In this post through a couple others that would follow, we’re going to be building our own Facebook (oh yeah!). Brace yourself. It’s going to be one hell of an exciting ride!
- Build a Facebook clone from scratch with PHP — Part 1 (this article)
- Build a Facebook clone from scratch with PHP — Part 2
- Build a Facebook clone from scratch with PHP — Part 3
- Build a Facebook clone from scratch with PHP — Part 4
- Build a Facebook clone from scratch with PHP — Part 5
- Build a Facebook clone from scratch with PHP — Part 6
- Build a Facebook clone from scratch with PHP — Part 7
We’re making Facebook? Wow!
Facebook is the largest social network platform in the world. I mean, it’s crazy! An application that serves ~2 billion people? Insane! Facebook over the years has become more and more complex, adding new and exciting features as the days go by.
I’d like to, at this rather early juncture, outline what we’ll be building.
Facebook is big. There are photos, groups, messaging, pages, videos, live videos, stories, VR and more. That’s a lot. What we’ll be building here is good ol’ Facebook of 2004 — probably less. We want to focus on the initial core features of Facebook — posts, profiles, timelines, friend relationships and login/registration. Awesome!
Is it for me?
What you’ll be needing
All you’ll be needing is a PC/Mac and 3 apps you can download for free online:
- VS Code (text editor)
- XAMPP (PHP interpreter, PHP development server and MySQL server)
- Filezilla (FTP client)
VS Code is a flexible light-weight text editor. We’ll be using it to write our code.
XAMPP (pronounced “zamp”) is a suite of tools that’ll help us develop FaceClone (yeah, that’s the name of the Facebook clone we’ll be building). XAMPP is an acronym that stands for Cross-Platform (X), Apache (A), MariaDB (M), PHP (P) and Perl (P). We’ll be using the PHP interpreter, the PHP development server and MySQL from XAMPP. You can read more about XAMPP here.
Filezilla is an FTP client. FTP stands for File Transfer Protocol. We’ll be deploying our Facebook clone app. Filezilla is going to enable us upload our code to an online server.
NB: If you have issues setting up any of these apps, please let me know in the comments. I’m ready to help where I can.
The HTML template
Let’s quickly observe the structure of the template folder:
Folder structure for the template (ignore the .git folder)
The folder structure should be similar to the screenshot above. The .gitignore and README.md files are repo files and are not needed here so we can delete them.
The fonts folder contains the gyphicons fonts which Bootstrap uses for its icons.
There are 3 main html files: home.html, index.html and profile.html. The names of these files suggest what they contain. Go ahead and open these files with a browser. The index file contains a login and register form where our users can “login or register”. The home page contains a logged-in user’s feed as well as a couple other things and the profile page contains information about a user. The template.html file is an empty template file. You can use it to build other page templates if you want to add another other feature to your version of FaceClone!
Try opening these template files in VS Code to see the code. Compare the code with what you see in the browser and try to make sense of it. Don’t fret if you don’t understand any or all of it. We’re going to do justice to the code in later parts.
Serving our template
Open up a terminal window in the root folder of the project (i.e the folder displayed in the screenshot above). You can Google how to open up a terminal in your OS if you don’t know how to. Type the following and hit enter:
You should get a result similar to the screenshot below (i.e the version of PHP you have installed):
A terminal window
If you get a weird message like “invalid command” or something, your XAMPP is probably not properly installed. Post a comment on this article if you have any issues installing any of the apps we’ll be using.
Now type in
php -S localhost:8080 and hit enter. This command starts up the PHP development server on port 8080. Visit http://localhost:8080 on your browser. Our FaceClone template is opened up!
Unlike when we clicked index.html or the other html files to open them up in our browser, the page that is displayed was “served” by a server. This means we can run PHP code in them. Great!
But we actually can’t! Not yet. We have to change those files from html to php so that our server knows that they contain PHP and must be “pre-processed” before they are served. So go ahead and change home.html to home.php and so on for the other html files. Now we should have a folder structure similar to this:
Your folder structure should look like this (ignore the .gitkeep file)
That’s all for part 1. Cool!!!
The final code for this part is contained in my FaceClone repo here: https://github.com/nicholaskajoh/faceclone. Visit the link and click on the part-1 folder to see progress made so far.