In this video we create our register page and add the necessary input fields!

Source code is available as a .zip in lecture 17!

Now we get the variables sent from the form and store them in variables

Source code is available as a .zip in lecture 17!

In this video we are going to validate the email by making sure that the two emails entered match and that they are in the correct format for an email. 

Source code is available as a .zip in lecture 17!

So it's finally time for us to create our first actual database table! We are going to create the users table which will hold all the details of users that have signed up to our website. 

Source code is available as a .zip in lecture 17!

Before we let the user sign up, we need to make sure that the email address they are trying to use hasn't already been used by another user. 

Source code is available as a .zip in lecture 17!

Here we are checking the validity of the remaining values such as if the passwords match and if the email has been used already for an account.

Source code is available as a .zip in lecture 17!

When a user submits the form but there are things that need to be corrected e.g. the passwords do not match, at the moment, it resets the form which means the user will have to enter all of the values again. What we would like to happen, is when the user submits the form, it remembers the values and re-populates the text fields with those values to save the user having to type them out again. 

Source code is available as a .zip in lecture 17!

Now that we successfully check for valid data, we will store any errors the user might run into such as "Your passwords do not match" or "This email has already been used with an account" so that they can be output to the screen.

Source code is available as a .zip in lecture 10!

So now that we are storing the error messages into our error array, we want to display these on the screen. 

In this lecture, we will be automatically generating a unique username for the user. 

UPDATE: 

There's a small issue with the code that means unique usernames do not become 'user_name_1', 'user_name_2' etc. like they are supposed to. Instead, they end up like 'user_name_1', 'user_name_1_2', 'user_name_1_2_3' etc. 

To fix this, replace this while loop:

while(mysqli_num_rows($check_username_query) != 0){
    ...
    ...
    ...
}

With the following code:

while(mysqli_num_rows($check_username_query) != 0){
$temp_username = $username; //Temporary username variable used to find unique username
//If username already exists, add number to end and check again
while(mysqli_num_rows($check_username_query) != 0){
    $temp_username = $username; //Reset temporary username back to original username
    $i++;
    $temp_username = $username."_".$i;
    $check_username_query = mysqli_query($con, "SELECT username FROM users WHERE username='$temp_username'");
}
$username = $temp_username; //$temp_username will now contain the unique username

Source code is available as a .zip in lecture 10!

We will be assigning each new user with a default profile picture. The default picture is same silhouette style pictures that new users get when they sign up to Facebook. We have a few of these pictures that are exactly the same, except they have different background colours. We want to randomly assign one of these as their profile picture so that all users don't look the same. The profile pictures I have used are attached as a zip file to this lecture.

Source code is available as a .zip in lecture 17!

Phew, it's finally time to insert the values into our user table in our database! 

Source code is available as a .zip in lecture 17!

This is it! Finally we are about done with the register form! The longest part is over, good job everyone! We will just do some finishing touches on it and then move onto the login form.

Source code up to this point is attatched!

In this video we will be making our code a little easier to work with.

In this fairly short video, we get our login form in place!

We are now going to write the code that is executed when someone tries to login.

Sourcecode in lecture 22!

Now it's time to write the code to handle an unsuccessful login attempt. We will be storing the email in a session variable so that the user doesn't have to type their email again and we will also display the error message. This is the same process as when we did it for the register form so it's nothing you haven't done before.

Sourcecode is in lecture 22!

So eventually, we will allow the users to close their accounts. Uses with closed accounts should be able to reopen it simply by logging in. Although we wont be implementing the close account functionality for a while, we will write the code to reopen a closed account now because it's not very long. 

Source code .zip is attached too!

Now it is finally time to style our register page! In this video we'll setup our CSS page and I'll also give you a short introduction to CSS. 

We're now going to add a cool background image to our page.

The image used in this video is attached. Enjoy!

We are going to style our panel now. The panel is the white 'box' that the content sits in. You may not realise it, but you see these all the time on lots of websites including Facebook and Twitter.

We are going to give our panel a blue header box which is where the title will go!

In this video we are going to download a custom font from the internet and then use it in our CSS code.

Now we will be making the input boxes look nice and also react to a mouse hover over!

Source code available in Lecture 17!

We only want the login form or the register form to be showing at one time - we do not want to see both. We are going to use jQuery for the first time this project to show/hide each form.

Source code is available in the next video!

The last thing to do on the register page is to make it so only one form shows at a time - not both. With a click, the user can show or hide the login form or the register form. This is our first use of JQuery!

Source code is attached!

Happy coding!

Here we make a start on our header file that will contain all the code that we want to be present on every page. This includes the navigation bar, logo, icons etc.

Here we add a link to Twitter Bootstrap and review what this means for us. By simply adding the link to our header file, there is a whole bunch of styles that are already being applied to our content without us having to do anything.

We continue with our header file, this time adding the blue bar that goes across the top of the page. 

Now we are going to add a simple 'logo' for our site much like the one we added when working on our register page.

In this video we use the icons from 'Font Awesome' to add links to different pages on our navigation bar.

In this video we start creating the small panel that contains information about the user logged in. Our first panel! Yay!

Source code up to this point is available in lecture 46!

So last video we created our user details panel but it hasn't been styled yet so it doesn't look like anything really... Let's add some CSS!

Source code up to this point is available in lecture 46!

So we've created and styled our user details panel; now we will add the data to it!  

Source code up to this point is available in lecture 46!

It's time to create the newsfeed column that the user will see when they log in!

Source code up to this point is available in lecture 46!

In this video we're going to continue creating the newsfeed column!

Source code up to this point is available in lecture 46!

We are now going to create a HTAccess file that will allow us to access a users profile page simply by typing their username at the end of the URL much like you see on sites such as Facebook.

Source code up to this point is available in lecture 46!

Before we actually create our newsfeed, we need to create the tables that the data will be inserted into. In this video we create these three tables.

Source code up to this point is available in lecture 46!

It's time to learn some OO (object oriented) programming! We will be making our User class which will contain a bunch of useful functions for us to re-use throughout this website!

Source code up to this point is available in lecture 46!

It's finally time for us to program the status updates functionality! Again, this uses an OO approach to keep things nice and efficient. Enjoy!

Source code up to this point is available in lecture 46!

This is part 2 of our status updates section. By the end of this video your users will be able to submit status updates to the database!

Source code up to this point is available in lecture 46!

My mistake! I forgot to add a logout button when we were creating our navigation bar items! By the end of this super short video, you'll be able to logout.

Source code up to this point is attached!

In this video we will make a start to our function that will retrieve posts from the database and output them to our newsfeed.

Source code up to this point is available in lecture 55!

We're going to continue with our function that will output the posts to a user's newsfeed. Specifically, in this video we will be writing the function that will return true or false depending on whether a user's account is closed or not. This function will be used in numerous places all over our site!

Source code up to this point is available in lecture 55!

In the last video we made a start on our newsfeed. We are now going to continue with this and create the timeframe system that will tell us how long ago a post was posted e.g. "10 minutes ago" or "4 months 2 days ago".

Source code up to this point is available in lecture 55!

Now all that is left to do is output the posts to the newsfeed for us to enjoy!

Source code up to this point is available in lecture 55!

Now that we are getting our posts from the database and outputting them to the newsfeed, we can apply some CSS style to make it look great!

Source code up to this point is available in lecture 55!

At the moment, when the page is loaded, all posts are being pulled from the database and show to the user. If we have a large number of posts, this is not a very efficient way of doing things. We are going to make it so that when the user scrolls to the bottom of the page, it will automatically load more posts!

Source code up to this point is available in lecture 55!

In this video we continue with our infinite scrolling system.

Source code up to this point is available in lecture 55!

In this video we continue with our infinite scrolling system.

Source code up to this point is available in lecture 55!

This is the final video of our infinite scrolling system (...phew!).

Source code up to this point is attached!

Alright, that was a lot of information to take in... In this video I'll just explain a little about what we just did and how it all works.

In around 5 lines of code, we are writing our function that checks to see if two users are friends or not!

Now we are going to make it so that only posts from people we are friends with appear on our newsfeed!

Source code up to this point is attached!

We are now going to the create the file that will show comments for a post.

Now we will add the ability to actually post a comment! Yay!

Source code up to this point is attached!

So the code is there for us to post a comment, but at the moment there is no form that we can actually post from. In this video we will show the comment section for each post and also post our first comment!

We can post comments and we can show the comment section. One thing we aren't yet doing, is actually showing the comments for each post. We'll make a start on that now!

By the end of this video we will be able to see all the comments related to a post!

We are nearly done with our comment system! All that is left to do is make it look pretty!

After this we are done with our comment system, great job!

Now we are going to add a little label to each post that says how many comments it has.

If a user clicks a link to the person's profile, we don't want the comment section to open. We take care of that now with a single if statement.

So the time has come for us to implement a like button! The first thing to do is decide whether to show a 'Like' button, or an 'Unlike' button.

By the end of this video we will be showing a 'Like' button or an 'Unlike' button on each status depending on whether the user has previously liked it or not.

In this video we will be adding the functionality to our like button!

Sometimes we may like a post by mistake, so it is important to be able to unlike something after you have liked it. We are going to be making this possible without writing any new code (use what we did for the like button handler).

Now for the final part of the section, we will be styling our like buttons so that they look good and match the rest of our styling.

It's finally time to create the profile page (woohoo!). We are going to create the left bar which will contain the user's profile picture, some basic info about the user (number of friends, likes and posts) and also the buttons that will be used to add or remove the user as a friend.

So we have created our left profile page bar but we haven't styled it yet. By the end of this video we will have a profile bar that looks great!

Now we are going to create the buttons that are used to add, remove and respond to a friend request. These buttons will appear on a users profile. 

In this video we will finish creating the add friend buttons that appear on a user's profile page. 

So we have our buttons, but they don't look very good at the moment. In this video we will make them look nice! 

So we have our button to remove a user as a friend but at the moment, it doesn't do anything. In this video we will create that functionality. 

Just as we did with the remove friend button, we are going to write the code that handles adding a user as a friend when the 'add friend' button is clicked. 

Source code up to this point is attached!

So now that we can send friend requests, we need a way of responding to them. In this video we will create the page in which a user will be able to see all of their requests and from there they can either accept or ignore them.

Okay, we can send friend requests, and we have our page that will display all of the requests that we have received. The last thing we need to do is handle these requests. In this video we will add functionality to the accept and ignore buttons.

So our friend system finally works! The very last thing to do is give the buttons on our request page some style! 

In the next few videos we will create a way for user's to post something on somebody else's profile. In this part we will get the popup window working that you submit the post from. 

In this video we will create the ajax form that handles our popup post submission.

So now that our delete buttons appear next to posts that belong to the user logged in, we can add some functionality to them. In this video we will create the ajax page that actually deletes the post (don't worry, it's really short!), and we'll also add some CSS style to make the buttons look a little nicer.

In this video we start creating the newsfeed that will appear on a user's profile page. This will only show posts that were posted by that user or that were posted to that user. We have already written most of the code for this when we made the newsfeed that appears on the homepage. Because of this there isn't a huge amount of code to write. We are mostly copy and pasting and cutting some unnecessary code out.

So we have most of our code to load the posts on the user's profile page. There are just a few things that need to be added/fixed in order for it to work! 

In this video, we will be writing the function that calculates the number of mutual friends the user logged in has with another user. We can then display this number anywhere we like, e.g. on the profile page side bar for another user it might say "5 Mutual Friends".

So we have our function that works out how many mutual friends we have with another user, now we need to actually show this information to the user. We can put it anywhere we want, but in this video, we will put it on the side bar of a user's profile page. 

We are now going to create the page that allows users to upload a new profile picture. Thankfully, if you have followed the same folder structure as I have used, you can simply take the upload script (and the supporting JS and CSS files) and copy it into your project. You may have to change a word or two in the script but it shouldn't be much! There are a bunch of other free photo upload tools available online that you can download and use in your project, so please feel free to look around! 

Source code up to this point is attached!

It is time for us to create the messaging system! To begin with we will create the page that users will go to in order to view their inbox messages.

In this video we are writing the function that will get the username of the most recent user that we have either sent a message to or received a message from. 

Now we will create the table that will be used to hold all of the messages that are sent.

In this video, we are going to configure the heading of the messages page to say who the user is talking to. For example, if I click on the conversation between me and Bart Simpson, the heading at the top of the page will say something like "Conversation between you and Bart Simpson". 

In this video we will be showing the messages form. The messages form is where the user will write their messages and click send. However, we are going to handle two scenarios here. If the user is sending a message to a user (and so a username parameter has been passed to the page) we will simply show the conversation and then the message form. If however, the user has clicked 'New Message' (no username parameter yet), we first want to ask them who they are sending the message to. This means we wont yet show them the message form, we will first show them a text box they can use to search for users.

We can't have a message system without the ability to send messages, can we? In this video, that's exactly what we will create!

In this video we will be writing the function that retrieves the messages that were sent between two given users. We will eventually be displaying them in a way similar to iMessage where messages are either blue or green depending on whether you or the other person sent them. 

We are now going to finish off the function that retrieves the messages. We'll be giving the div for each message a certain class attribute depending on whether the message was sent by you or the other person. This will allow us to style them differently in the next video. 

So we can send messages and we can also display them to the user. The only thing left to do really is to get them looking nice! In this video we will be styling the message form, that is, the text box and submit button that you use to send a message. 

So our message form is styled nicely, now we are going to style our messages. We are going to make them look similar to the way that iMessage does i.e. sent messages on the right and received messages on the left. 

So in this very short video, we are going to write two lines of JavaScript code that will make our messages box scroll to the bottom (the most recent message) as soon as the page loads. 

In this video we will begin writing the function that will retrieve the list of conversations that the user is a part of. This will be displayed on the screen to allow the user to select and view previous conversations. 

When we retrieve the conversations that the user is a part of, we want to show the most recent message from that conversation as a way to remind the user what was said. This may help them if they are looking for a specific conversation but cannot remember who the conversation was between. 

We will now finish off retrieving the conversations list. We have done most of the hard work, we just need to configure the return string! 

So now we are going to style the conversations list that we've worked so hard on over the last couple of videos!

We are going to now create the drop down area for sending new messages. It will be a text box which, when you start typing a name or username, will show a dropdown of your friends for you to select. This will update in real time so as you are typing, the results are filtered! Clicking on one of one of the users from the dropdown will allow you to send a new message to them. 

So in this video we will finish the friends drop down search box that we were creating over the last 2 lectures (finally). Great work!

So the last thing we need to do on our message page is to style the user search results. Once we have done this, the search results will look nice and neat and we will be done with the message page!

We are going to make the messages accessible from a user's profile page. This means when you are on someone's profile, you can click to the message tab and send them a message from there. In this video we will create the tab system that will allow us to do this. Thankfully, we copy and paste most of the code from the Bootstrap website, we just need to configure it. 

So we've created our tabs, now we just need to put the correct content into it's respective tab. Again, we're largely copy and pasting our existing code with some configuration. 

So we've set up the tabs and copied all our code across. We just need to write a little bit of code to handle a message being sent. We're going to be calling our 'sendMessage' function that we wrote previously in our Message class so most of the work here is done already.