![](\"https://static.commonlounge.com/fp/600w/Yowua83OVXTzQnS4ebkUYvGZ31536604829_kc\")
The wait is finally over! Welcome to your final project for the PHP course. In this three part project, you’ll create a clone of Twitter from scratch using PHP and some basic HTML and CSS. Completing this project will require the use of all the skills that you have learnt in this course.
\nHere is an overview of what you will be creating in each of the three parts:
\nThe guidance provided in these write-ups will also help you understand how to properly structure your code to incorporate all of the above features. Let’s get started!
\nBefore we begin, download all the project resources here. This includes HTML, CSS and image files that we will be using throughout the project.
\n\n\nWe will focus mainly on PHP in this project and will use these resources to take care of the HTML and CSS.
\n
Okay. Let’s begin by creating the directory structure for our project:
\nhtdocs folder located in {your_xampp_directory}.{your_xampp_directory}/htdocs and call it twitter.Now create 3 new folders inside the twitter folder:
assets: for images, CSS files and javascript code. Create three folders inside the assets folder: css, images, js.core: for the core files of the project. Create two folders inside the core folder: classes and database.includes: for all files that will be included in other files.Your directory structure will look like this:
\nNow open up the project-resources folder that you downloaded and copy-paste the assets folder into your project directory (inside twitter folder).
Inside the css folder, you will see style-complete.css which contains all the CSS for our project. Inside the images folder, you will find some background and profile images.
Create a database in phpMyAdmin and call it twitter.
Create the connection.php file inside core/database/ folder.
Then, create a file index.php inside the twitter folder and include the connection.php file in it.
Checkpoint: Open your browser and type in localhost/twitter. If you see a blank page, the database connection is successful. The index.php page will be the login and signup page.
Solution to this section can be found in section Solution: Database Connection below.
\nOkay, now the next step is to answer the question: How many tables do you need? Think about it before seeing the answer below.
\nWe will have a users table to store the user data, a tweets table to store the tweets and finally a follow table to store the followers and following data. We can later add more tables depending on our requirements. But these are enough for now.
For each table, you need to create a class.
\nRemember the Base class which has the generic insert, update and delete functions? Yes, you will be needing that as well.
Create these 4 classes in separate files inside core/classes/ folder.
Solution to this section can be found in section Solution: Classes and init below.
\nNow we will include all these classes (and also the connection.php file) in file core/init.php:
<!-- init.php -->\n<?php \n include 'database/connection.php';\n include 'classes/base.php';\n include 'classes/user.php';\n include 'classes/tweet.php';\n include 'classes/follow.php';\n global $pdo;\n session_start();\n $getFromU = new User($pdo);\n $getFromT = new Tweet($pdo);\n $getFromF = new Follow($pdo);\n define(\"BASE_URL\", \"http://localhost/twitter/\");\n?>Notice that we are setting a global $pdo variable to use the $pdo database connection object everywhere in the code. We also add the session_start() function and create instances of each class. We then create an instance of each of the three classes User, Tweet and Follow. Finally, we use the define() function which basically says we want to refer to http://localhost/twitter/ as BASE_URL.
Now, instead of including the connection.php file to index.php, we will include init.php:
<!-- index.php -->\n<?php \n include 'core/init.php';\n?>Great! Now create a table users inside the twitter database with 8 columns in phpMyAdmin which should look like this:
Most of the rows are self explanatory. profileImage will have the path to an image file that is stored on your machine. following and followers is the number of users the user is following, and the number of followers of a user, respectively.
Create this table using phpMyAdmin.
\nSolution to this section can be found in section Solution: User Table below.
\nGreat! You created the table users, have the User class ready and also an instance of the User class $getFromU (we created this in init.php).
Let’s now work on the front-end and write some PHP code to create the signup and login page (i.e. index.php).
\n\nIn this section, we will provide you the HTML for index.html (for the log-in and sign-up forms). You will write the
\n.phpcode yourself in the next section.
Open the project-resources folder and find index.html. Copy all the HTML code from here and paste it below the PHP tags in index.php:
![](\"https://static.commonlounge.com/fp/600w/VMMf31STGdIPiOXG8SMiVG2BA1536613652_kc\")
<!-- index.php -->\n<?php \n include 'core/init.php';\n?>\n<html>\n <head>\n <title>Twitter Clone</title>\n <meta charset=\"UTF-8\" />\n <link rel=\"stylesheet\" href=\"assets/css/font/css/font-awesome.css\"/>\n <link rel=\"stylesheet\" href=\"assets/css/style-complete.css\"/>\n </head>\n<body>\n<div class=\"bg\">\n<div class=\"wrapper\">\n<!---Inner wrapper-->\n <div class=\"inner-wrapper-index\">\n <!-- main container -->\n <div class=\"main-container\">\n <!-- content left-->\n <div class=\"content-left\">\n <h1>Welcome to Twitter</h1>\n <br/>\n <p>See what's happening in the world right now.</p>\n </div><!-- content left ends --> \n <!-- content right ends -->\n <div class=\"content-right\">\n <!-- Log In Section -->\n <div class=\"login-wrapper\">\n <?php include 'includes/login.php' ?>\n </div><!-- log in wrapper end -->\n <!-- SignUp Section -->\n <div class=\"signup-wrapper\">\n <?php include 'includes/signup-form.php' ?>\n </div>\n <!-- SIGN UP wrapper end -->\n </div><!-- content right ends -->\n </div><!-- main container end -->\n </div><!-- inner wrapper ends-->\n </div><!-- ends wrapper -->\n</div> \n</body>\n</html>Now we need to create the login.php and signup-form.php files that will have the login and signup forms which we will attach to the index.php page. Go ahead and open the includes folder and create two new files: login.php and signup-form.php with simple PHP open and close tags.
This is how includes/login.php will look:
<!-- login.php -->\n<?php ?>And includes/signup-form.php:
<!-- signup-form.php -->\n<?php ?>Checkpoint: Save the files and open http://localhost/twitter/. You will see something like this:
Now we will add the HTML for the forms. Open up the project-resources folder and copy paste the HTML from login.html and signup-form.html below the PHP tags inside login.php and signup-form.php respectively.
Checkpoint: Refresh the browser, and you should see this:
\nLooking good, right? Time to make the login and signup forms work.
\nLet’s create a record in the users table so that we can login with an email and password. Open phpMyAdmin and in the users table, browse to the SQL tab and execute this statement:
\n![](\"https://static.commonlounge.com/fp/600w/vzCWZn0hdHuROLtk6nMYAC5Fi1536999697_kc\")
![](\"https://static.commonlounge.com/fp/600w/eBNMmy9TbdecfoqeBDLkorJKs1536999704_kc\")
INSERT INTO `users`(`username`, `email`, `password`, `fullname`, `profileImage`) VALUES (\"jamesmat\",\"jamesmat@test.com\",md5(\"password\"),\"James Mat\",\"assets/images/defaultprofile1.png\")Now check the table for the record:
\n\n\n\n
md5()is a hashing function which encrypts the password. You should never store the password text directly. Always store a hash of the password. That way, even if someone maliciously gets access to the database, they will not know the users’ passwords.
OK, now this is your next task:
\nWhen the user enters email and password in the login form and clicks on the Login button:
![](\"https://static.commonlounge.com/fp/600w/1hQxRQFnhA4LOWhPGinFuiDcA1537009434_kc\")
$error variable to “Please enter email and password!“.checkInput() function.$error variable to “Invalid Email format”.$error variable to “Invalid username or password”.user_id variable to the user_id of the logged in user and redirect the user to home.php. Create home.php, which includes core/init.php and echos the session user_id variable.Hint 1:
\nDo the form validation etc in login.php, but create helper methods in User class.
Hint 2:
\nCreate methods checkInput() and login() inside the User class and access them like $getFromU->checkInput() and $getFromU->login() in login.php.
\n\nYour browser might re-submit a form when you refresh. This might cause you some confusion as you are debugging your code. For example, suppose you try to log-in, but there is some error in your code. After fixing the error, when you refresh your browser, your browser might automatically re-submit the form data as you had filled it last time. So you might see a another error even without filling the form, or you might get logged-in (if your code is working now).
\n
Checkpoint: Enter the email and password that you added in the database and hit login.
\nIf you are redirected to home.php and you see the user_id of the logged in user, everything is working fine. In this case the output would be:
![](\"https://static.commonlounge.com/fp/600w/pVvx1Md2g1YCvrPpQcLxAVQgc1537009439_kc\")
1Also, try different incorrect / empty inputs and see if the corresponding error messages are displayed or not.
\nSolution to this section can be found in section Solution: Login form below.
\nAwesome, the login form is working as expected. Let’s get the signup form working too. This is your task:
\nWhen the user enters the full-name, username, email and password in the signup form and clicks on the Signup button,
$signupError variable to “Please enter email and password!“.checkInput() function.$signupError variable to “Invalid Email format”.$signupError variable to “Name must be between 6-20 characters”.$signupError to “Password too short”.$signupError variable to “Email already registered” or “Username already exists” respectively.user_id variable to the user_id of the new user and redirect the user to home.php.Hint 1:
\nCreate new methods checkEmail() and checkUsername() inside the User class which will check if a user with the given email or username already exists and access them as $getFromU->checkEmail() and $getFromU->checkUsername() in login.php.
Hint 2:
\nUse the $getFromU->create() method to create the new record in the users table.
Use assets/images/defaultprofile1.png as the default value for profileImage of the user. In this project, we will not implement a way for the user to edit his profile image. If you want, you can change this value in the users table directly from phpMyAdmin.
Checkpoint: Go ahead and refresh your browser and enter some details into the signup form. Try incorrect / empty inputs and see if the appropriate error messages are being displayed or not.
\nOnce you click on Signup, you should be redirected to home.php and the new user_id should be displayed. In this case, the output would be:
![](\"https://static.commonlounge.com/fp/600w/NSHZZ86fciwZotWxw1TLeEu4V1537034379_kc\")
2Also verify that the row created in your database table looks as you would expect it to be.
\nSolution to this section can be found in section Solution: Signup form below.
\nAmazing! You just finished implementing the created the login and signup flow!
\nNow, let’s add some HTML to home.php and a method to fetch all the user details from the table to display them on the home page.
Add a method in the User class which will fetch all the user data for a given user_id. Let’s call it userData():
public function userData($user_id) {\n $stmt = $this->pdo->prepare(\"SELECT * FROM users WHERE user_id = :user_id\");\n $stmt->bindParam(\":user_id\", $user_id, PDO::PARAM_INT);\n $stmt->execute();\n return $stmt->fetch(PDO::FETCH_OBJ);\n}Open the project-resources folder and copy-paste the HTML from home_1.html below the PHP tags in home.php.
Replace the echo in home.php with the following lines to call the userData() method:
<!-- home.php -->\n<?php\n include 'core/init.php';\n $user_id = $_SESSION['user_id'];\n $user = $getFromU->userData($user_id);\n?>Checkpoint: Now save the file and try to login with valid email and password. You will see:
\nThis is how the home page looks like after logging-in!
\nSo you have implemented everything required for someone to log-in, but what about log-out? Let’s do it!
\nCreate a logout() method in the User class. What all does it need to do?
Answer:
\nAll you have to do in the logout() method is destroy the session and redirect the user to index.php!
In home.php, on the top right corner, you will see a profile icon. Click on it and you will see 2 options: the first will take you to your profile page (we haven’t done this yet!) and the second one says logout.
On clicking the logout button, you will be redirected to logout.php and this file should call the logout method. Create logout.php inside the includes folder
Checkpoint: Now save and try to logout from home.php. You should be redirected to the index page as expected.
Solution to this section can be found in section Solution: Log-out below.
\nFinal step for part 1! Phew!!
\nIn this part, you will write the code restrict access to index.php and home.php pages. A user should be able to access index.php only if he / she is logged-out, and a user should be able to access home.php only if he / she is logged-in.
If a user tries to access index.php from the URL (by typing in http://localhost/index.php in the browser) and user has already logged in, we want to redirect the user to home.php.
This can be done by adding the following lines in index.php:
![](\"https://static.commonlounge.com/fp/600w/YK4JPGVIUPrHUky4UrYgBg2Sk1537034386_kc\")
<!-- index.php -->\n<?php \n include 'core/init.php';\n if (isset($_SESSION['user_id'])) {\n header('Location: home.php');\n }\n?>\n<!-- html goes here -->And lastly, you need to restrict a user who tries to directly access the home.php page (by typing in http://localhost/home.php in the browser) without logging in! Currently, this will throw a lot of errors as the session user_id won’t be set and we don’t want this to happen, do we?
To do this, create a method in the User class called loggedIn() which checks if the session variable user_id is set or not.
public function loggedIn() {\n if (isset($_SESSION['user_id'])) {\n return true;\n } \n return false;\n}Then, call this function in home.php. Like so:
<!-- home.php -->\n<?php\n include 'core/init.php';\n $user_id = $_SESSION['user_id'];\n $user = $getFromU->userData($user_id);\n if ($getFromU->loggedIn() === false) {\n header('Location: index.php');\n }\n?>Checkpoint: Great! Now if you try to access home.php from the URL without logging in, you will be redirected to the index page. Similarly, if you are logged-in and you try to access index.php, you will be redirected to home.php.
In this part of the project, you created the index page with login and signup forms and the home page which is the user feed. You also added some HTML and CSS and your website is starting to look better!
\nIf you lost track, got stuck, or just need to double check, the solution for each of the above steps is included below. You can also find all the code we have written so far here (that is, what your current code should look like).
\nIn the next part of the project, you will work on the user profile and the tweet feature in the user feed page. Aren’t you excited?!
\nconnection.php:
<!-- connection.php -->\n<?php \n $dsn = 'mysql:host=localhost; dbname=twitter'; // database name\n $user = 'root';\n $pass = '';\n try {\n $pdo = new PDO($dsn, $user, $pass);\n } catch(PDOException $e) {\n echo 'Connection error! '. $e->getMessage();\n }\n?>index.php:
<!-- index.php -->\n<?php \n include 'core/database/connection.php';\n?>base.php:
<!-- base.php -->\n<?php \n class Base {\n protected $pdo;\n function __construct($pdo) {\n $this->pdo = $pdo;\n }\n public function create($table, $fields = array()) {\n $columns = implode(',', array_keys($fields));\n $values = ':' . implode(', :', array_keys($fields));\n $sql = \"INSERT INTO {$table} ({$columns}) VALUES ({$values})\";\n if ($stmt = $this->pdo->prepare($sql)) {\n foreach ($fields as $key => $data) {\n $stmt->bindValue(':'.$key, $data);\n }\n $stmt->execute();\n return $this->pdo->lastInsertId();\n }\n }\n public function update($table, $user_id, $fields = array()) {\n $columns = '';\n $i = 1;\n foreach ($fields as $name => $value) {\n $columns .= \"{$name} = :{$name}\";\n if ($i < count($fields)) {\n $columns .= \", \";\n }\n $i++;\n }\n $sql = \"UPDATE {$table} SET {$columns} WHERE user_id = {$user_id}\";\n if ($stmt = $this->pdo->prepare(\"$sql\")) {\n foreach ($fields as $key => $value) {\n $stmt->bindValue(':' . $key, $value);\n }\n $stmt->execute();\n }\n }\n public function delete($table, $array) {\n $sql = \"DELETE FROM {$table}\";\n $where = \" WHERE\";\n foreach ($array as $name => $value) {\n $sql .= \"{$where} {$name} = :{$name}\";\n $where = \" AND \";\n }\n if ($stmt = $this->pdo->prepare($sql)) {\n foreach ($array as $name => $value) {\n $stmt->bindValue(':'.$name, $value);\n }\n }\n $stmt->execute();\n }\n }\n?>user.php:
<!-- user.php -->\n<?php \n class User extends Base {\n function __construct($pdo) {\n $this->pdo = $pdo;\n }\n }\n?>tweet.php:
<!-- tweet.php -->\n<?php \n class Tweet extends Base {\n function __construct($pdo) {\n $this->pdo = $pdo;\n }\n }\n?>follow.php:
<!-- follow.php -->\n<?php \n class Follow extends Base {\n function __construct($pdo) {\n $this->pdo = $pdo;\n }\n }\n?>Here is how your rows should look like when creating the table:
\nMake sure A_I for user_id is checked and it is the PRIMARY key in the table.
This is what user.php looks like after adding checkInput($var) and login($email, $password):
![](\"https://static.commonlounge.com/fp/600w/mcbRbqHN9o5yneckj77xwh9BD1536613658_kc\")
<!-- user.php -->\n<?php \n class User extends Base {\n function __construct($pdo) {\n $this->pdo = $pdo;\n }\n public function checkInput($var) {\n $var = htmlspecialchars($var);\n $var = trim($var);\n $var = stripslashes($var);\n return $var;\n }\n public function login($email, $password) {\n $stmt = $this->pdo->prepare(\"SELECT user_id FROM users WHERE email = :email AND password = :password\");\n $stmt->bindParam(\":email\", $email, PDO::PARAM_STR);\n $hash = md5($password);\n $stmt->bindParam(\":password\", $hash, PDO::PARAM_STR);\n $stmt->execute();\n $user = $stmt->fetch(PDO::FETCH_OBJ);\n $count = $stmt->rowCount();\n if ($count > 0) {\n $_SESSION['user_id'] = $user->user_id;\n header('Location: home.php');\n } else {\n return false;\n }\n }\n }\n?>The login() function queries the database for the email and password. If a row is returned, the session variable is set and the user is redirected to home.php. Otherwise, login() returns false.
login.php after adding form validation:
<!-- login.php -->\n<?php \n if (isset($_POST['login']) && !empty($_POST['login'])) {\n $email = $_POST['email'];\n $password = $_POST['password'];\n if(!empty($email) || !empty($password)) {\n $email = $getFromU->checkInput($email);\n $password = $getFromU->checkInput($password);\n if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {\n $error = \"Invalid email format\";\n } else {\n if($getFromU->login($email, $password) === false) {\n $error = \"The email or password is incorrect\";\n }\n }\n } else {\n $error = \"Please enter email and password!\";\n }\n }\n?>\n<!-- html goes here --> Finally, we have twitter/home.php file which echos the user_id:
<!-- home.php -->\n<?php\n include 'core/init.php';\n echo $_SESSION['user_id'];\n?>New methods in the User class:
public function checkEmail($email) {\n $stmt = $this->pdo->prepare(\"SELECT email FROM users WHERE email = :email\");\n $stmt->bindParam(\":email\", $email, PDO::PARAM_STR);\n $stmt->execute();\n $count = $stmt->rowCount();\n if ($count > 0) {\n return true;\n } else {\n return false;\n }\n}\npublic function checkUsername($username) {\n $stmt = $this->pdo->prepare(\"SELECT username FROM users WHERE username = :username\");\n $stmt->bindParam(\":username\", $username, PDO::PARAM_STR);\n $stmt->execute();\n $count = $stmt->rowCount();\n if ($count > 0) {\n return true;\n } else {\n return false;\n }\n}Form validation in signup-form.php:
<!-- signup-form.php -->\n<?php \n if (isset($_POST['signup'])) {\n $fullname = $_POST['fullname'];\n $username = $_POST['username'];\n $password = $_POST['password'];\n $email = $_POST['email'];\n $signupError = \"\";\n if(empty($fullname) || empty($username) || empty($password) || empty($email)) {\n $signupError = 'All feilds are required';\n } else {\n $email = $getFromU->checkInput($email);\n $fullname = $getFromU->checkInput($fullname);\n $username = $getFromU->checkInput($username);\n $password = $getFromU->checkInput($password);\n if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {\n $signupError = \"Invalid email\";\n } elseif (strlen($fullname) > 20) {\n $signupError = \"Name must be between 6-20 characters\";\n } elseif (strlen($username) > 20) {\n $signupError = \"Username must be between 4-20 characters\";\n } elseif (strlen($password) < 5) {\n $signupError = \"Password too short\";\n } else {\n if ($getFromU->checkEmail($email) === true) {\n $signupError = \"Email already registered\";\n } elseif ($getFromU->checkUsername($username) === true) {\n $signupError = \"Username already exists\";\n }\n else {\n $user_id = $getFromU->create('users', array('email' => $email,'password' => md5($password), 'fullname' => $fullname, 'username' => $username, 'profileImage' =>'assets/images/defaultprofile1.png'));\n $_SESSION['user_id'] = $user_id;\n header('Location: home.php');\n }\n }\n }\n }\n?>\n<!-- html goes here --> logout() method in User class:
public function logout() {\n session_destroy();\n header('Location: '. BASE_URL .'index.php');\n}includes/logout.php:
<!-- logout.php -->\n<?php \n include '../core/init.php';\n $getFromU->logout();\n?>