Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Andrew Finn
Andrew Finn
2,193 Points

Custom member only login feature.

I joined Treehouse after having an idea for a website, and as I have no previous programming experience I am unsure about a lot of website functionality, and terminology.

If I wanted to design a website, with the home page being a simple screen containing a log in area in the centre, below the company logo, what would I need to do design this from scratch?

The log in box would prompt for a user name and password, and also offer the option for sign up to new users.

Log in info entered would need to correspond with a database (I have already signed with a web hosting service), with any new user sign ups being added to the database.

This might be really straight forward, but I am really in the dark with the basics. Any advice would be appreciated, Team Treehouse!

4 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

The web page you're wanting to build is probably not as simple as you think it might be. But let's see if I an explain a bit about what you might want to study to get this accomplished. HTML is what defines the document and the elements in that document that are shown on the webpage. CSS is what sets the appearance of the document including (but not limited to) colors and fonts. CSS is very powerful and can do more than just those things! And the functionality from the front end (ie the click of the submit button) can be done with javascript. But then there's code on the backend to actually do something with the information you sent off. To code that part you will likely need some experience with PHP and SQL.

But my best suggestion to you is to get started on the Front End Web development track here on Treehouse. It's fun and will give you a good basis for starting your own project using best practices.

Hi Andrew!

What is this Login form's purpose? Where should your users be logged in to? What do they sign up to? Do you want to provide access to certain sites to those members only? What kind of sites? Do you want to provide access to downloadable files?

The list of questions can go on on and on :))

So my best guess is that you want to provide some kind of access to some kind of content. Have you heard of WordPress? Check it out! It might be a very simple solution to what your are trying to accomplish.

While using WordPress you can start the Frontend Webdevelopment Course, Basic php course as well as Basic WordPress courses also available here on teamtreehouse.com to get a basic understanding of what's going on :)

Best Saskia

Andrew Finn
Andrew Finn
2,193 Points

Hey Saskia, thanks for the reply. I have already made a demo site on WordPress, but it wasn't flexible enough for what I'm trying to do here. Once a user is logged in they will be using an array of on/off buttons to represent real time information (I assume this can be done with Javascript). the state of the buttons will then be communicated through a database, and represent availability through to another website (again assuming that two sites can be connected and communicate in real time). further down the timeline I will be displaying this data on iOS/Android apps, but first starting with a web app.

Hopefully I'm making sense, if you can recommend what skills will be needed to complete this that would be very helpful,

Thanks!

Kevin Korte
Kevin Korte
28,109 Points

This is starting to become a pretty big project. Wordpress can do this, but you just need to know how to bend it's arm. However I wouldn't recommend wordpress here.

Likely, you are at a big enough point you will probably want to look at MVC frameworks. Just on the log in and new user registration page there is a ton of logic and security that you should account for, some things to consider

  • Salting the password in the database
  • Protect against spam sign ups
  • What if the user already exists
  • Protect is CSF attacks (cross script forgery) - Pass and check a CSF token
  • Password reset
  • Email confirmation?

That's just off the top of my head. Wordpress, and many good MVC's will address most or all of these things for you.

For two sites to communicate, the site that is hosting the actual data, which sounds like it's the other site will need to have an API that you can request information from, and send information too. By default, two sites can't really just "communicate" for obvisous security reasons. So API's allow your site, to pass authenticated tokens to the other site, and information and calls to "do something", which the other site can do, and respond back to with the results. It works the same in reverse. If the other site's API supports webhooks, you can receive a call to do something, do it, and than return the call letting the other server know whatever it asked your server to do, worked.

This is definitely a bigger, custom project, and I'd highly recommend a MVC framework for this. My favorite is Ruby on Rails. Although Node.js is cool, and I'm personally working on Node, and the Meteor.js framwork built off of Node, I still like Ruby on Rails.

But, Meteor does real time data updates really well, where it's a lot of work on Rails, or any other server side language, as they do not default to live updates by default. All of these technologies are still HTTP request based, and so it takes a bit more work to establish a socket, or connection between browser and server to receive real time data updates.

Good luck, it sounds like a fun project

Andrew Finn
Andrew Finn
2,193 Points

Thank you for the reply, provided a lot of detail for me to look into! Are there any tutorials on here that you can recommend I watch to learn how to integrate a map feature on to a site, and in turn have it alter and represent data with an API?

Kevin Korte
Kevin Korte
28,109 Points

Hi Andrew,

More than anything I would suggest picking your server side technology, and going through those courses. Nothing super specific to recommend, just jump in with both feet, and after you start learning some of the basics of that language, you'll start figuring out your specific use cases pretty well. With a map feature, assuming you are going to use the google maps api, you'll want to understand front end javascript. There was at one point a course here that taught exactly this, but I'm not sure if it's been retired or not.

And than make sure the site you are pulling data from has a developer api available. If they don't you're basically out of luck.

Andrew Finn
Andrew Finn
2,193 Points

Hey Kevin, Thanks again for the info. Im not totally clear on what you mean by my picking a server side technology? Do you mean I should be getting clued up on PHP and SQL? And the site I will be pulling data from will be one of the two sites I'm making. Specifically, the members only site, which would then send the data to the map in real time. So does this mean I would have to make a developer API myself, and make it available?

I appreciate the help, these are things I just haven't learned myself yet.

Kevin Korte
Kevin Korte
28,109 Points

Server side would be something like PHP, Ruby, Python, Node.js, etc. Those are probably the most popular. PHP and a SQL based database like MySQL or Postgresql would be fine. NoSQL like Mongo might also be a great database option. I'd go through the entry videos of both SQL and NoSQL here on Treehouse to decide.

I am not sure the reason why your two sites have to be separated, since you're developing both it seems they could be one. But if you have decided that needs to be the case, than yes, you'll have to develop your own API, in which case the one site will send a request to a specific URL of the other site, the site will do something, and return whatever information it needs to. Biggest piece of advice is have fun doing it!