4.61 out of 5
4.61
2420 reviews on Udemy

Build a Social Network from Scratch: JavaScript PHP + MySQL

Learn JavaScript, PHP and MySQL by building the ultimate social network website from scratch! The complete guide!
Instructor:
Reece Kenney
11,211 students enrolled
English [Auto] More
Create a full scale social networking website like Facebook or Twitter, including features such as newsfeeds, profiles, friend system, chat system, trending posts and much more!
Program proficiently in PHP, HTML and CSS
Program using an OO (Object Oriented) approach
Know how to easily use MySQL databases with your website
Understand how to register domain names and put your new site on the web!

Join over 5,000 students and be a part of this Udemy rated BEST SELLING course!

Do you want to become an expert in JavaScript, PHP and MySQL?

Do you want to build a social network just like Facebook?

If so, you’re in the right place! This course will guide you step by step in creating your own social network COMPLETELY from scratch.

We’re talking the kind of website that will amaze anybody that sees it. The kind of website that will get you hired in no time!

Why let me teach you?

I work as a Software Engineer at Microsoft where I build products used by millions of people all over the world! I want to take the skills I’ve gained through years of working with some of the best developers in the world and transfer them directly to you!

I’ve taught thousands of students here on Udemy and created some of the most popular development courses on Udemy!

Okay so what’s the course about?

I will personally guide you, step by step, in creating your own social network site just like Facebook complete with:

  • Status posts

  • Newsfeeds

  • User profiles

  • Chat/messaging systems

  • Friend systems

  • And much more

Whether you are a complete beginner* or an experienced programmer, this course will be massively beneficial to you.

Why should I take the course?

In the programming world, the “big 4” often consists of Google, Microsoft, Facebook and Amazon. To get a job at any of these companies, you absolutely MUST know the essentials: HTML, CSS, PHP, JQuery, JavaScript and MySQL.

If you take this course, you will have nothing to worry about because we use all of these skills extensively!

Support: 

By enrolling in this course, you will have the COMPLETE support of a Microsoft Software Engineer (me). I’m always ready to answer any question you may have. Programming issues, errors, feature requests, general programming advice – it doesn’t matter, I’m always happy to help! I always aim to respond to questions within a few hours and it’s also worth noting that I’ve answered EVERY SINGLE question asked so far.

Future course discounts:

By enrolling in this course, you will get access to ALL of my current and future courses for the lowest possible discount we as instructors are capable of offering on Udemy – FOREVER

Project portfolio:

The site you create in this course will be the highlight of your project portfolio! Any potential employer who see’s this project on your resume will want to hear all about it. The reason? They know that a project like this means you’re familiar with the wide range of technical skills they need their employees to know.  

Fun!

Finally, this project is a lot of fun and I know you’ll have a great time implementing your own unique ideas as well as the ones we implement together. What are you waiting for? 

Welcome! Info and Setup

1
Intro (same as course landing page video)

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!

2
Installing Xampp
3
Creating the index page
4
Creating our database
5
Connecting to our database with PHP

Register / Sign Up Form

1
Let's create the register form!

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

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

2
Getting values from the form

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

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

3
Checking that the Emails Match

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!

4
Creating the Users Table

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!


5
Checking that the Email Hasn't Already Been Used

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!

6
Validating Remaining Values

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!

7
Storing Values in Session Variables

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!

8
Storing the Error Messages

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!

9
Displaying the Error Messages to the User

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

10
Generating a Unique Username

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!



11
Giving the User a Random Profile Picture

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!

12
Inserting the Values into our Database

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!

13
Finishing touches - Finally!

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!

Login Form

1
Improving efficiency - Only 2 extra lines of code!

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

2
Creating the login form

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

3
Writing the Login Handler

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

Sourcecode in lecture 22!

4
Handling Login Errors

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!

5
Reopening a Closed Account

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!

Styling the Register/Login Page

1
Setup and Introduction to CSS

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. 

2
Adding our Page Background Image

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

The image used in this video is attached. Enjoy!

3
White Panel Background

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.

4
Panel Header

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

5
Using Custom Fonts

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

6
Styling the Input Boxes

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

Source code available in Lecture 17!

7
Showing and Hiding the Register/Login Forms

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!

8
Register Page Finishing Touch

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!

Building the Foundation of Our Site

1
Header Page and Redirecting Users not Logged in

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.

2
Adding Twitter Bootstrap

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.

3
Creating the Blue Top Bar

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

4
Making a Simple Site Logo

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

5
Navigation Bar Icons

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

Starting the Index Page

1
Creating the Main User Details Column Structure

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!

2
Styling the User Details Panel

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!

3
Adding Data to the User Details Panel

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!

4
Creating the Newsfeed Column - Part 1

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!

5
Creating the Newsfeed Column - Part 2

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

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

6
The HTAccess File

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!

7
Creating our Newsfeed Database Tables

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!

8
Object Oriented Programming - The User Class

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!

9
Posting Status Updates - Part 1

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!

10
Posting Status Updates - Part 2

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!

11
Allowing line breaks in our posts
12
Stop the form resubmitting on refresh
13
The Forgotten Logout Button

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!

Newsfeed - Getting Posts

1
Loading Posts - Part 1

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!

2
Loading Posts - Part 2 Checking if Account is Closed

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!

3
Loading Posts - Part 3 Getting the Timestamp

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!

4
Loading Posts - Part 4 Output to Newsfeed

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!

5
Styling the Posts

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!

6
Infinite Scrolling (Auto Load Posts) - Part 1

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!

7
Infinite Scrolling (Auto Load Posts) - Part 2

In this video we continue with our infinite scrolling system.

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

8
Infinite Scrolling (Auto Load Posts) - Part 3

In this video we continue with our infinite scrolling system.

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

9
Infinite Scrolling (Auto Load Posts) - Part 4

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

Source code up to this point is attached!

10
Our Infinite Scrolling System - Explained!

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.

Newsfeed - Extra Features

1
'isFriend' function - Is user 'A' friends with user 'B'

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

2
Only Showing Posts from Friends

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!

3
Posting Comments - Part 1

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

4
Posting Comments - Part 2

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

Source code up to this point is attached!

5
Displaying the Comment Section - (Posting our First Comment)

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!

6
Loading comments - Part 1

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!

7
Loading comments - Part 2

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

8
Styling the Comments - Part 1

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

9
Styling the Comments - Part 2

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

10
Bug fix - "Cannot modify header information..."
11
Displaying Number of Comments for Each Post

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

12
When Link is Clicked, Don't Show Comments

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.

13
Like Button - Part 1

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.

14
Like Button - Part 2

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.

15
Like Button Handler

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

16
Unlike Button Handler (Undoing a Like)

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).

17
Like Button Styling

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.

Profile Page

1
Creating the Left Profile Bar

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.

2
Styling the Left Profile Bar

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!

3
Add Friend Buttons - Part 1

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. 

4
Add Friend Buttons - Part 2

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

5
Friend Button Styling

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

6
Remove Friend Functionality

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. 

7
Add Friend 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!

8
Creating the Friend Requests Page

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.

9
Accepting and Ignoring Friend Requests

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.

10
Styling the Friend Request Buttons

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

11
Showing the Popup Post Form

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. 

12
Creating our Main JavaScript File
13
Submit Post Ajax Form

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

14
Adding the Delete Post Button
15
Delete Button Functionality and Styling

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.

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.6
4.6 out of 5
2420 Ratings

Detailed Rating

Stars 5
1621
Stars 4
602
Stars 3
137
Stars 2
37
Stars 1
22
36792991ebf64086276764070000be16
30-Day Money-Back Guarantee

Includes

17 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion

Working hours

Monday 9:30 am - 6.00 pm
Tuesday 9:30 am - 6.00 pm
Wednesday 9:30 am - 6.00 pm
Thursday 9:30 am - 6.00 pm
Friday 9:30 am - 5.00 pm
Saturday 9:30 am - 3.00 pm
Sunday Closed
Build a Social Network from Scratch: JavaScript PHP + MySQL
Price:
$49.99 $35