Registration and login with php

Registration and login with php

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.

image.png

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.

image.png

Creation of Table

Let the table name be users and number of column be 3.

image.png

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)

image.png

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.

hashnode 30-Sep-22 2_13_37 PM.png

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.

hashnode 30-Sep-22 2_24_42 PM.png

Write the normal html on the page to set it up. See the screenshot below.

C__xampp_htdocs_hashnode_index.php • - Sublime Text (UNREGISTERED) 30-Sep-22 2_26_42 PM.png

The next thing to do is create a form that will accept username and password. Do not forget to add the submit button.

C__xampp_htdocs_hashnode_index.php • - Sublime Text (UNREGISTERED) 30-Sep-22 3_04_30 PM.png

Let me explain the above html code. we used input and there are different types of input.

  1. text
  2. password
  3. checkbox
  4. button
  5. file
  6. radio
  7. Submit
  8. email

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>

C__xampp_htdocs_hashnode_index.php • - Sublime Text (UNREGISTERED) 30-Sep-22 3_00_47 PM.png

<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/

Registration Page - Opera 30-Sep-22 3_08_00 PM.png

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");

}

?>

localhost _ 127.0.0.1 _ hashnode _ users _ phpMyAdmin 5.2.0 - Opera 30-Sep-22 5_02_08 PM.png

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>

Registration Page - Opera 30-Sep-22 5_25_06 PM.png

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

hashnode 01-Oct-22 5_20_43 PM.png

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");    
}



}

?>