In this article, I will be explaining everything that is hidden or not clear about the registration and login system in php. This article is for someone who is already familiar with local server like xampp or wamp.
Creation Of Database
Before you can create database, you need to switch on your local server. In this article, I will be using xampp. Click start on both apache and mysql.
Now let go to our browser and type
http://localhost/phpmyadmin/
Once it load, you will see something related to the picture below.
Now let create a database called hashnode. This is done by clicking on new, followed by the name you want to use for the database. After which you will click on create.
Creation of Table
Let the table name be users and number of column be 3.
We are going to have id, username and password. id is set to uint, username to varchar 255, password to varchar 255. Do not forget to set the id as primary key and make it auto increment(this can be done by clicking A.I on id row)
Then click on save. We are already done with setting up of database and table creation. Let move on to the next thing.
Creation of folder and files
Let create folder hashnode inside htdocs folder. The path to htdocs is seen below.
C:\xampp\htdocs
Creation of database.php
Since folder has been created, let create the file called database.php inside the folder hashnode.
Open the file database.php and type the following.
<?php
mysqli_connect();
?>
The first method to call is mysq_connect(), the next thing to do is to fill the database details inside the method.
<?php
mysqli_connect("localhost", "root", "", "hashnode");
?>
The first thing to put is localhost, followed by root which is the username to the database and the password is empty, followed by the name of the database.
Save the above code in a variable, so that anytime we need it, we will just call the variable.
<?php
$conn = mysqli_connect("localhost", "root", "", "hashnode");
?>
Creation of index.php
Create another file named index.php This file will contain the frontend of our registration code.
Write the normal html on the page to set it up. See the screenshot below.
The next thing to do is create a form that will accept username and password. Do not forget to add the submit button.
Let me explain the above html code. we used input and there are different types of input.
- text
- password
- checkbox
- button
- file
- radio
- Submit
But what we will use is text, password and submit.
The next step is to wrap the inputs up with form tag.
<form>
<label>Username</label>
<input type="text" name="username"> <br>
<label>Password</label>
<input type="password" name="password"><br>
<input type="submit" value="Submit">
</form>
<form method="post" action="register_check.php">
<label>Username</label>
<input type="text" name="username"> <br>
<label>Password</label>
<input type="password" name="password"><br>
<input type="submit" value="Submit">
</form>
It is time to run our code on browser. Type the below code on your browser.
http://localhost/hashnode/
form tag takes in the action and method. method will be post and action is where the file will go to after the submit button is pressed.
Creation of Register_check.php
Create file named register_check.php First step here is to require connection from database.php
<?php
require_once("database.php");
?>
Next step is to receive the inputs from index.php by typing the following codes.
<?php
require_once("database.php");
$username = $_POST['username'];
$password = $_POST['password'];
?>
You can echo the above code to see if we truly receive input from the index.php
<?php
require_once("database.php");
echo $username = $_POST['username'];
echo $password = $_POST['password'];
?>
Let continue. Next step is to hash the password because you will not want to save the user's password as plain text into mysql database.
<?php
require_once("database.php");
$password = md5($_POST['password']);
?>
We need to first check if the username does not exist in our database.
<?php
require_once("database.php");
echo $username = $_POST['username'];
echo $password = md5($_POST['password']);
//let check if the username does not exist in the database
$q = "SELECT * FROM users WHERE username='$username'";
$q = mysqli_query($conn,$q);
echo $total = mysqli_num_rows($q);
?>
To know whether the username exist or not, echo out the $total. If it is equal to zero, then it does not exist and if you get 1 as your response, the username exist.
Create an if statement that will capture if $total is less than 1 ( it is zero ) or not.
If it is less than 1 then we insert the user's details else, we will redirect the user back to index.php
if($total < 1){
//this means that the username does not exist before in our database
}else{
//this means that the username exists in our database
}
<?php
require_once("database.php");
$username = $_POST['username'];
$password = md5($_POST['password']);
//let check if the username does not exist in the database
$q = "SELECT * FROM users WHERE username='$username'";
$q = mysqli_query($conn,$q);
$total = mysqli_num_rows($q);
if($total < 1){
//this means that the username does not exist before in our database
$q="INSERT INTO `users` (`id`, `username`, `password`) VALUES (NULL, '$username', '$password')";
mysqli_query($conn,$q);
}else{
/* this means that the username exists in our database, so we need to redirect the user back to index.php */
header("location: index.php");
}
?>
Congratulations, we have just completed the registration page that inserts the username and password of our users into the database.
Next step is to
Capturing Of Response From Backend
Though our code is working fine and good, but we need to return back responses from backend and display it on the frontend. What do I mean by this, follow me as I show you.
Still on register_check.php let append the message tag to the end of our redirect method.
if($total < 1){
//this means that the username does not exist before in our database
$q="INSERT INTO `users` (`id`, `username`, `password`) VALUES (NULL, '$username', '$password')";
mysqli_query($conn,$q);
header("location: index.php?message=You have registered successfully");
}else{
//this means that the username exists in our database
header("location: index.php?message=Username exist");
}
Here is the full code for register_check.php
<?php
require_once("database.php");
$username = $_POST['username'];
$password = md5($_POST['password']);
//let check if the username does not exist in the database
$q = "SELECT * FROM users WHERE username='$username'";
$q = mysqli_query($conn,$q);
$total = mysqli_num_rows($q);
if($total < 1){
//this means that the username does not exist before in our database
$q="INSERT INTO `users` (`id`, `username`, `password`) VALUES (NULL, '$username', '$password')";
mysqli_query($conn,$q);
header("location: index.php?message=You have registered successfully");
}else{
//this means that the username exists in our database
header("location: index.php?message=Username exist");
}
?>
Next step is to go to index.php and include the following code, so that we can get message from the backend.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration Page</title>
</head>
<body>
<h3>Enter Your details below</h3>
<?php
echo $_GET['message'];
?>
<form method="post" action="register_check.php">
<label>Username</label>
<input type="text" name="username"> <br>
<label>Password</label>
<input type="password" name="password"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Note: Do not forget to put @ before $_GET['message']; so that it won't be showing error when responses are not coming from backend. For an example if you are just visiting the page immediately it will show you error. So the better way to solve that is to use @.
Creation Of Login Page
First thing to do under Creation of login page is to create file where the login page code will be.
Creation of login.php
Copy and paste the code in index.php into login.php
Don't forget to replace anywhere you see registeration with login.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Page</title>
</head>
<body>
<h3>Enter Your details below </h3>
<?php
echo $_GET['message'];
?>
<form method="post" action="login_check.php">
<label>Username</label>
<input type="text" name="username"> <br>
<label>Password</label>
<input type="password" name="password"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Change the action in form to login_check.php
Creation of login_check.php
Create a new page named login_check.php then start by entering the code below.
<?php
require_once("database.php");
$username = $_POST['username'];
$password = md5($_POST['password']);
?>
The first step to take on login_check.php is to check if username and password are posted to login_check.php from login.php
Next step is to check if the username exists in the database.
<?php
require_once("database.php");
$username = $_POST['username'];
$password = md5($_POST['password']);
//let check if the username does not exist in the database
$q = "SELECT * FROM users WHERE username='$username'";
$q = mysqli_query($conn,$q);
$total = mysqli_num_rows($q);
if($total < 1){
//this means that the username does not exist before in our database
header("location: index.php?message=You are not a registered member");
}else{
}
?>
This shows that if the username does not exist, we are redirecting the user back to the login.php with the message "You are not a registered member"
If you are a registered member, the code will continue to execute the code below.
Let check if the username and password inputed by the user matches the ones in the database.
$q = "SELECT * FROM users WHERE username='$username'";
$q = mysqli_query($conn,$q);
while($row = mysqli_fetch_assoc($q)){
$db_username = $row['username'];
$db_password = $row['password'];
}
We had to loop through the database to make available the database username and the database password of the inputed username.
Create an if statement to check if the username and password inputed by the user is thesame as the one that the user saved in our database.
If the username and the password matches the ones in the database, then redirect the user to the dashboard, else if the username and password inputed by the user does not match that in the database, then redirect back to login.php with a message "Username or password is wrong"
<?php
require_once("database.php");
$username = $_POST['username'];
$password = md5($_POST['password']);
//let check if the username does not exist in the database
$q = "SELECT * FROM users WHERE username='$username'";
$q = mysqli_query($conn,$q);
$total = mysqli_num_rows($q);
if($total < 1){
//this means that the username does not exist before in our database
header("location: index.php?message=You are not a registered member");
}else{
$q = "SELECT * FROM users WHERE username='$username'";
$q = mysqli_query($conn,$q);
while($row = mysqli_fetch_assoc($q)){
$db_username = $row['username'];
$db_password = $row['password'];
}
if($db_username == $username AND $db_password == $password){
header("location:dashboard.php");
}else{
header("location:index.php?message=username or password is wrong");
}
}
?>