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.
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.
Now, we will create four files here for the login system.
Save all these files in the htdocs folder inside the Xampp installation folder. The detailed description and code for these files are discussed below.
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.
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 -
Now, the next step is to create the database and the login table inside the database.
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 = "rookienerd";
$con = mysqli_connect($host, $user, $password, $db_name);
if(mysqli_connect_errno()) {
die("Failed to connect with MySQL: ". mysqli_connect_error());
}
?>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>";
}
?>
Output:
Output
