Build a Social Network from Scratch: JavaScript PHP + MySQL

Take a quick look at the sort of thing you will be producing! Your site will have all of the main features you will find on top social media websites such as Facebook or Twitter!

Note: This is just an example. You will be able to customise your site however you like! Colours, pictures, whatever! Be creative!

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.