This is a modified excerpt from my book on how to make a web-based application with PHP. The full code for this tutorial can be found on GitHub.
This example is very simplistic and does not provide the step-by-step detail that my book has. In my book, “User Sign Up” (Chapter 22) is 14 pages and “User Login” (Chapter 23) is 8 pages.
I have a handful of files that define the website’s layout and some custom functions that are spread across multiple files. For this tutorial, I’ll combine everything into one file, called functions.php
Explanation of functions.php:
- Line 2: session_start() — Built-in PHP function that allows you to remember a user logged in (the purpose of this tutorial!).
- Lines 4–17: Database connection. Here, I’m using a MySQL database. Obviously fill in your database credentials.
- Line 19: A variable that remembers the User ID of the person logged in. It’s surrounded in the built-in PHP function intval() so that, if needed, it will be converted to “0” (indicating a user has not yet been logged in). We’ll see how to get/populate this value later in the tutorial.
- Lines 24–37: A function to define the website layout (the top of each page; basically just includes Bootstrap CSS).
- Lines 39–44: Afunction to define the website layout (the bottom of each page; basically just closes the BODY and HTML tags).
Some general assumptions:
- If the person viewing your website has a User ID of “0” then they are not yet logged in. If the User ID is a number greater than “0”, then they are logged in.
- You have a database table called “Users”, with 3 fields:
- id (auto-incrementing integer, which is the primary key)
- email (text)
- password (text)
Creating the Sign Up and Sign In Forms
Create sign-up.php and include the functions.php file:
It looks like this:
Let’s also create the Sign In / Login page, called sign-in.php
Which looks like this:
Each form is relatively simple, with these components:
- Textbox for the user’s email
- Textbox for the user’s password
- Hidden textbox (Line 21 in each file) so we know if the user is signing up or signing in
- Submit button
In both cases of the Sign Up / Sign In, when the user hits the “submit” button, they will be brought to a page called controller.php . There will be two blocks of code; one to detect users sign up (lines 5–37), and another block to detect users who are logging in (lines 39–87).
- First, include functions.php file.
- Using the built-in PHP function array_key_exists(), we are checking for the value of “sign_up” or “sign_in”. These were the values of the hidden textbox on their respective pages.
Explanation for Signing Up:
- Lines 10 & 11: Get the user’s email and password that was put in the textboxes.
Ideally you would account for SQL Injection and have various validation checks (did this user already sign up? was the password blank? etc.). This was skipped for this basic tutorial but is covered in my book.
- Lines 25–29: Insert this user’s data from the form into the database.
- Line 33: The built-in PHP function mysql_insert_id() will get the latest ID of a row in the database (assuming your database is MySQL and the primary key is set to auto-increment). Once we have this value, assign it to a SESSION variable. This is a built-in PHP function for this very purpose (to record the “session” of the user; i.e. have the webpage remember who they are as they transition from page-to-page).
- Line 34: Redirect the user to the home page.
Explanation for Signing / Logging in:
- Lines 41 & 42: Get the user’s email and password that was put in the textboxes.
- Lines 45–61: Get the user’s password, based on the email that was put in.
- Lines 71–80: If the user’s password matches what was expected, then set the SESSION variable and redirect the user to the logged in portion of the website.
- Lines 80–85: If the user’s password does not match what it should be, then redirect the user elsewhere. Also include an extra piece in the URL to display an error to the user (explained momentarily).
For this tutorial the user is redirected to index.php (no matter what) which will indicate if the user has logged in or not. If needed, there will be an alert indicating the user was not able to log in.
Explanation of index.php:
- Line 1: Includes the functions.php file, which has our database connection, some templates for the HTML/CSS, and most importantly for this tutorial, a way to see if the User is logged in.
- Line 10: Checks to see if there is a GET variable (i.e. from the URL) called “action”, and if the value is “invalid-login”. If so, show the DIV on lines 12–14 indicating the user was not able to be logged in.
- Lines 21–32: Since the User ID is “0”, the user is not logged in. In this case, show the appropriate content (for example, a link to Sign Up or Sign In).
- Lines 32–38: The User ID is not 0, so they are logged in. Show the appropriate content. Right now I’m only displaying the User’s ID.
The user most likely won’t care about their ID for your web app; but now that you (the developer) know the User ID, you can display pertinent information to them.
If the user is logged in:
If the user received an error:
This was meant to be a simple tutorial. The full code for this PHP tutorial on how to create a User Login can be found here on GitHub.
Other things to consider:
- Add a checkbox for “Remember Me” to prevent the user from needing to sign in every time they close the browser.
- Encrypt (aka “SALT”) the user’s password once it’s in your database.
- How can a user “sign out”.
Like this style of writing? 👍👍 Are you creating a PHP web application and already know what a “variable” is and the concept of an “if” statement? Check out my book: Web Development for Intermediate Programmers — with PHP