In this tutorial, I'll be teaching you how you can create your very own secure PHP login system. A login form is what your website's visitors can use to log in to your website to access restricted content, such as a profile page. We will leverage MySQL to retrieve account data from the database.
The Advanced package includes additional features and a download link to the source code.
1. Getting Started
There are a few steps we need to take before we create our secure login system. We need to set up our web server environment and ensure we have the required extensions enabled.
1.1. Requirements
- If you haven't got a local web server set-up, I recommend you download and install XAMPP.
- XAMPP is a cross-platform web server package that includes the essentials for back-end developers. It includes PHP, MySQL, Apache, phpMyAdmin, and more. It's not necessary to install all the software separately with XAMPP.
1.2. What You Will Learn in this Tutorial
- Form Design — Design a login form with HTML5 and CSS3.
- Prepared SQL Queries — How to properly prepare SQL queries to prevent SQL injection and therefore preventing your database from being exposed.
- Basic Validation — Validating form data that is sent to the server using GET and POST requests [username, password, email, etc.].
- Session Management — Initialize sessions and store retrieved database results. Sessions are saved on the server and are associated with a unique ID that is saved in the browser.
1.3. File Structure & Setup
We can now start our web server and create the files and directories we're going to use for our login system.
- Open XAMPP Control Panel
- Next to the Apache module click Start
- Next to the MySQL module click Start
- Navigate to XAMPP's installation directory [C:\xampp]
- Open the htdocs directory
- Create the following directories and files:
File Structure
\-- phplogin
|-- index.html
|-- style.css
|-- authenticate.php
|-- logout.php
|--
home.php
|-- profile.php
Each file will consist of the following:
- index.html — The login form created with HTML5 and CSS3. We don't need to use PHP in this file. Therefore, we can save it as plain HTML.
- style.css — The stylesheet [CSS3] for our secure login system.
- authenticate.php — Authenticate users, connect to the database, validate form data, retrieve database results, and create new sessions.
- logout.php — Destroy the logged-in sessions and redirect the user to the login page.
- home.php — Basic home page for logged-in users.
- profile.php — Retrieve the user's account details from our MySQL database and populate them with PHP and HTML.
2. Creating the Login Form Design
We will now create a form that our users can use to enter their details and submit them for processing. We will be using HTML and CSS for this part of the tutorial as PHP will not be necessary on this page.
Edit the index.html file with your favorite code editor and add the following code:
Login
Login
If we navigate to the index page in our web browser, it will look like the following:
//localhost/phplogin/index.html
Profile Logout