Today we are going to create a simple login page using PHP and MySQL. Login Systems are very first and basic needs when it comes to website development due to the large user-base. For any new developer it seems a trivial task to create a very basic but somehow secure login system. That is the main objective of this post to achieve this task.. So before moving on let’s summarize what we are going to achieve in today’s post.
- First of all we will create a simple HTML page to take inputs from user of their username and password to login
- Second we will create a MySQL table for users, where we will store the user information.
- Third, we will seed some random users into our database.
- Fourth, We will look how to receive html form input in PHP
- Fifth, We will retrieve Username and password from the database.
- Finally we will handle some errors and give prompts to users about successful or login failure. Also we will look into hashing function comes with PHP to secure our password retrials
Login Page Front End
For a front-end, we need a simple html form with two input boxes to take input of username and password, and one submit or login button. When user will hit the submit/login button the html form will automatically submit the data to our PHP login verification page which will verify the credentials from MySQL database. So Let’s build a simple HTML form first. Because this tutorial is more focused on PHP rather then HTML/CSS so let’s just look for some ready made Login Page our internet. We also want to keep things simple and focused so we chooses this simple Bootstrap based Login form and modified the code a little bit and come up with the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Simple Login Form</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script><style type="text/css">
.login-form {
width: 340px;
margin: 50px auto;
}
.login-form form {
margin-bottom: 15px;
background: #f7f7f7;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
</style>
</head>
<body>
<div class="login-form">
<form action="" method="post">
<h2 class="text-center">Log in</h2>
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" required="required">
</div>
<button type="submit" class="btn btn-primary btn-block">Log in</button>
</form>
<p class="text-center"><a href="register.php">Create an Account</a></p>
</div>
</body>
</html> Code language: HTML, XML (xml)this will show following html form
MySQL Database and Users Table
Now that we are done with our front-end we need to focus on the database. So let’s open localhost/phpmyadmin and create a new database. You can name that database whatever you want but I am going to name this database “logintest”. After that my database is successfully created all I have to do is to create a new table into that database so that I could store users and verify them at login verification process. So Let’s create a new table and name that table “Users” (Note: You can name it whatever you like). Here is how our “Users” table looks like
Register New User
Now let’s create another page similar like login page but name that page “register.php”. We will use this page to insert data in our MySQL database. Unlike the login page, we need one more password retype input field just to verify that user know what he types for the password. So instead of two input fields, here we are using another input filed of type password. So our form will look like this
<div class="login-form">
<form action="" method="post">
<h2 class="text-center">Register</h2>
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="repassword" placeholder="Re-type Password" required="required">
</div>
<button type="submit" class="btn btn-primary btn-block">Sign UP</button>
</form>
<p class="text-center"> Already User? <a href="register.php"> Login</a></p>
</div>Code language: HTML, XML (xml)This is how it looks
Insert Data into MySQL Table
Now that we are done with our required front-end so far, it is now time to write some PHP code to handle form request and insert the data into the database. Because of using the POST request, first of all we need to make sure that the POST request receive some variables.
We can check this with the help of isset() function which will tell us either some variable is SET and is no null. Use this function to make sure that we receive our desired data from POST request. Also one thing to note here that we are receiving the request on the same page. That is the reason why we saved the page with “.php” extension. So that we will be able to handle servers side back-end code.
Here is the complete php code which will first make a connection with the database. After it INSERT data into the users table. One more thing to note here is that, it also hash the incoming password and first make sure that incoming password and retype password does match. But if they doesn’t it prompts the user that the two passwords are not matching.
We know we can handle that password matching thing on client side and could use the JavaScript for that, but our main concern here is not the client side language but the Server side specially the PHP. So we are doing most of the code in PHP. But if you prefer doing this in JavaScript or any other client side language you should do that. Because doing such kind of Input validations are usually done on client side not on server side.
Here is the code that we used to insert data into the MySQL database using mysqli object oriented approach.
<?php
if(isset($_POST['username'])){
$uname = $_POST['username'];
$upass = $_POST['password'];
$urpass = $_POST['repassword'];
if($urpass==$upass){
$pass_hash = password_hash($upass, PASSWORD_DEFAULT);
// connect with database
$conn = new mysqli('localhost','root','','logintest');
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO users (username, password)
VALUES ('$uname', '$pass_hash')";
if ($conn->query($sql) === TRUE) {
echo "New User Registered successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
}
?>Code language: HTML, XML (xml)References:
- https://deliciousbrains.com/php-encryption-methods/
- https://www.php.net/manual/en/function.password-hash.php
- https://www.php.net/manual/en/function.password-verify.php
