PHP Tutorial
Control Statement
PHP Programs
- 20-php-programs
PHP Functions
PHP Arrays
PHP Strings
- php-string
- php-string-functions
PHP Math
- php-math-functions
PHP Form
- php-form:-get-post
PHP Include
- php-include-require
State Management
- php-cookie
- php-session
PHP File
Upload Download
- php-file-upload
- php-download-file
PHP Misc
PHP Mail
- php-mail
PHP MySQLi
PHP JSON
- php-json-example
PHP OOPs Concepts
PHP Topics
Related Tutorials
Interview Questions

PHP MySQL Login System

In this topic, we will learn how to create a PHP MySQL Login System with the help of PHP and MySQL database. There are few steps given for creating a login system with MySQL database.

Before creating the login system first, we need to know about the pre-requisites to create the login module.

Requirements

We should have knowledge of HTML, CSS, PHP and MySQL for creating the login system.
Text Editor - For writing the code. We can use any text editor such as Notepad, Notepad++, Dreamweaver, etc.
XAMPP - XAMPP is a cross-platform software, which stands for Cross-platform(X) Apache server (A), MySQL (M), PHP (P), Perl (P). XAMPP is a complete software package, so, we don't need to install all these separately.

Environment Setup

Now, we need to start the webserver and create the files for the login system. There are few steps that are given below to setup the environment.

Open the XAMPP Control Panel.
Start the Apache server by clicking on the Start button.
Start the MySQL by clicking on the Start button.
Create all the files needed for login.
Create login table in the database using phpMyAdmin in XAMPP.

Now, we will create four files here for the login system.

index.html - This file is created for the GUI view of the login page and empty field validation.
style.css - This file is created for the attractive view of the login form.
connection.php - Connection file contains the connection code for database connectivity.
authentication.php - This file validates the form data with the database which is submitted by the user.

Save all these files in the htdocs folder inside the Xampp installation folder. The detailed description and code for these files are discussed below.

index.html

First, we need to design the login form for the website user to interact with it. This login form is created using html and also contains the empty field validation, which is written in JavaScript. The code for the index.html file is given below:

     <html>
<head>
	<title>PHP login system</title>
	// insert style.css file inside index.html
	<link rel = "stylesheet" type = "text/css" href = "style.css"> 
</head>
<body>
	<div id = "frm">
		<h1>Login</h1>
		<form name="f1" action = "authentication.php" onsubmit = "return validation()" method = "POST">
			<p>
				<label> UserName: </label>
				<input type = "text" id ="user" name  = "user" />
			</p>
			<p>
				<label> Password: </label>
				<input type = "password" id ="pass" name  = "pass" />
			</p>
			<p> 	
				<input type =  "submit" id = "btn" value = "Login" />
			</p>
		</form>
	</div>
	// validation for empty field 
	<script>
	        function validation()
			{
				var id=document.f1.user.value;
				var ps=document.f1.pass.value;
				if(id.length=="" && ps.length=="") {
					alert("User Name and Password fields are empty");
					return false;
				}
				else
				{
					if(id.length=="") {
						alert("User Name is empty");
						return false;
					} 
					if (ps.length=="") {
					alert("Password field is empty");
					return false;
					}
				}							
			}
		</script>
</body>	
</html>

    

After executing the above code on the browser, the login page will appear as below if it does not contain style.css file.

style.css

Now, we will create style.css file to provide a more attractive view to the login form. The CSS code for the style.css file is given below:

     body{ 
	background: #eee;
}
#frm{
	border: solid gray 1px;
	width:25%;
	border-radius: 2px;
	margin: 120px auto;
	background: white;
	padding: 50px;
}
#btn{
	color: #fff;
	background: #337ab7;
	padding: 7px;
	margin-left: 70%;
}

    

After including above CSS file in index.html, the login form will be like -

Note: All these files should be saved in the same folder, so we can easily access them without any interruption.

Database and Table Creation

Now, the next step is to create the database and the login table inside the database.

Access the phpMyAdmin on the browser using localhost/phpmyadmin/ and create a table in the database. Here we will create a database and table using GUI based phpMyAdmin rather than queries execution.
Click on New and enter the database name and then click on Create button.

Now we will create a login table in the database. Create a table by name login in the database which you have created earlier.

Specify the column Name and their Type and Length in the table in which we will store the username and password for the different users and save it by clicking on the save button.

Click on the insert, from where we can insert the records in columns. So insert the username and password here and click on Go button to save the record.

connection.php

Next step is to do the connectivity of login form with the database which we have created in the previous steps. We will create connection.php file for which code is given below:

     <?php 	
	$host = "localhost";
	$user = "root";
	$password = '';
	$db_name = "w3cschoool";
	
	$con = mysqli_connect($host, $user, $password, $db_name);
	if(mysqli_connect_errno()) {
		die("Failed to connect with MySQL: ". mysqli_connect_error());
	}
?>

    

authentication.php

Now, we have our database setup, so we can go with the authentication of the user. This file handles the login form data that sent through the index.html file. It validates the data sent through the login form, if the username and password match with the database, then the login will be successful otherwise login will be failed.

     <?php 	
	include('connection.php');
	$username = $_POST['user'];
	$password = $_POST['pass'];
	
		//to prevent from mysqli injection
		$username = stripcslashes($username);
		$password = stripcslashes($password);
		$username = mysqli_real_escape_string($con, $username);
		$password = mysqli_real_escape_string($con, $password);
	
		$sql = "select *from login where username = '$username' and password = '$password'";
		$result = mysqli_query($con, $sql);
		$row = mysqli_fetch_array($result, MYSQLI_ASSOC);
		$count = mysqli_num_rows($result);
		
		if($count == 1){
			echo "<h1><center> Login successful </center></h1>";
		}
		else{
			echo "<h1> Login failed. Invalid username or password.</h1>";
		}	
?>

    

How to run the login form?

To run the login form, open the xampp control panel and run the apache server and PHP.
Now, type localhost/xampp/folder name/file name in the browser and press Enter key.
All setup is done now. Enter the username and password in the login form and click the login button.