Part 1: Create your own Login System using PHP and MySql

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.

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:

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.