User Signup and Sign in using HTML and PHP

by Anuj Kumar

In this tutorials, we learn how to create user signup and sign in using HTML and PHP.

File structure for user sign up and sign in

index.php: For user signup or user registration

signin.php: User for user sign in

dashboard.php: After login user redirect to this page

logout.php: Logout page

includes/dbconnection.php: Database connection file

Step 1– Create a database

Open browser type http://localhost/phpmyadmin, create a database named ‘regdb’ or you can create your own database (create database datbase_name). After creating database run the SQL script or import the SQL file given inside the package.
Structure for SQL table tbluser

CREATE TABLE `tbluser` (
  `ID` int(10) NOT NULL,
  `FullName` varchar(200) DEFAULT NULL,
  `MobileNumber` bigint(10) DEFAULT NULL,
  `Email` varchar(200) DEFAULT NULL,
  `Password` varchar(200) DEFAULT NULL,
  `RegDate` timestamp NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `tbluser` (

`ID` int(10) NOT NULL,

`FullName` varchar(200) DEFAULT NULL,

`MobileNumber` bigint(10) DEFAULT NULL,

`Email` varchar(200) DEFAULT NULL,

`Password` varchar(200) DEFAULT NULL,

`RegDate` timestamp NULL DEFAULT current_timestamp()

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Step 2– Create a database configuration file includes/dbconnection.php

<?php
$con=mysqli_connect("localhost", "root", "", "regdb");
if(mysqli_connect_errno()){
echo "Connection Fail".mysqli_connect_error();
}
?>

<?php

$con=mysqli_connect("localhost", "root", "", "regdb");

if(mysqli_connect_errno()){

echo "Connection Fail".mysqli_connect_error();

}

Step 2– Create a HTML form for User Signup / Registration.

   <h2 class="title">Registration Form</h2>
<form method="POST">
<div class="input-group">
<input class="input--style-1" type="text" placeholder="NAME" name="fname" required="true">
</div>
                        
<div class="row row-space">
<div class="col-2">
<div class="input-group">
<input class="input--style-1" type="text" placeholder="Mobile Number" name="contactno" required="true" maxlength="10" pattern="[0-9]+"> 
</div>
</div>
</div>
                        
<div class="input-group">
<div class="rs-select2 js-select-simple select--no-search">
<input class="input--style-1" type="email" placeholder="Email Address" name="email" required="true"> 
</div>
</div>

<div class="row row-space">
<div class="col-2">
<div class="input-group">
<input type="password" value="" class="input--style-1" name="password" required="true" placeholder="Password">
</div>
</div>
</div>

<div class="p-t-20">
<button class="btn btn--radius btn--green" type="submit" name="submit">Submit</button>
</div>
<br>
<a href="signin.php" style="color: red">Already have an account? Signin</a>
 </form>

<h2 class="title">Registration Form</h2>

</div>

</div>

</div>

</div>

<button class="btn btn--radius btn--green" type="submit" name="submit">Submit</button>

</div>

<br>

<a href="signin.php" style="color: red">Already have an account? Signin</a>

</form>

Step 4– Code for inserting User Signup / Registration values in the database

<?php 
include('includes/dbconnection.php');
if(isset($_POST['submit']))
  {
    $fname=$_POST['fname'];
    $contno=$_POST['contactno'];
    $email=$_POST['email'];
    $password=md5($_POST['password']);
    $ret=mysqli_query($con, "select Email from tbluser where Email='$email' || MobileNumber='$contno'");
    $result=mysqli_fetch_array($ret);
    if($result>0){
echo "<script>alert('This email or Contact Number already associated with another account');</script>";
    }
    else{
    $query=mysqli_query($con, "insert into tbluser(FullName, MobileNumber, Email,  Password) value('$fname', '$contno', '$email', '$password' )");
    if ($query) {
    echo "<script>alert('You have successfully registered');</script>";
    echo "<script>window.location.href ='signin.php'</script>";
  }
  else
    {
      echo "<script>alert('Something Went Wrong. Please try again');</script>";
       echo "<script>window.location.href ='index.php'</script>";
    }
}
}
 ?>

<?php

include('includes/dbconnection.php');

if(isset($_POST['submit']))

{

$fname=$_POST['fname'];

$contno=$_POST['contactno'];

$email=$_POST['email'];

$password=md5($_POST['password']);

$ret=mysqli_query($con, "select Email from tbluser where Email='$email' || MobileNumber='$contno'");

$result=mysqli_fetch_array($ret);

if($result>0){

echo "<script>alert('This email or Contact Number already associated with another account');</script>";

}

else{

$query=mysqli_query($con, "insert into tbluser(FullName, MobileNumber, Email, Password) value('$fname', '$contno', '$email', '$password' )");

if ($query) {

echo "<script>alert('You have successfully registered');</script>";

echo "<script>window.location.href ='signin.php'</script>";

}

else

{

echo "<script>alert('Something Went Wrong. Please try again');</script>";

echo "<script>window.location.href ='index.php'</script>";

}

Here is the full code that we have written for signup / registraion (index.php)

<?php 
include('includes/dbconnection.php');
if(isset($_POST['submit']))
  {
    $fname=$_POST['fname'];
    $contno=$_POST['contactno'];
    $email=$_POST['email'];
    $password=md5($_POST['password']);
    $ret=mysqli_query($con, "select Email from tbluser where Email='$email' || MobileNumber='$contno'");
    $result=mysqli_fetch_array($ret);
    if($result>0){
echo "<script>alert('This email or Contact Number already associated with another account');</script>";
    }
    else{
    $query=mysqli_query($con, "insert into tbluser(FullName, MobileNumber, Email,  Password) value('$fname', '$contno', '$email', '$password' )");
    if ($query) {
    echo "<script>alert('You have successfully registered');</script>";
    echo "<script>window.location.href ='signin.php'</script>";
  }
  else
    {
      echo "<script>alert('Something Went Wrong. Please try again');</script>";
       echo "<script>window.location.href ='index.php'</script>";
    }
}
}
 ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sign Up Page</title>
    <!-- Icons font CSS-->
    <link href="vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
    <link href="vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
    <!-- Font special for pages-->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

    <!-- Vendor CSS-->
    <link href="vendor/select2/select2.min.css" rel="stylesheet" media="all">
    <link href="vendor/datepicker/daterangepicker.css" rel="stylesheet" media="all">

    <!-- Main CSS-->
    <link href="css/main.css" rel="stylesheet" media="all">
</head>

<body>
    <div class="page-wrapper bg-blue p-t-100 p-b-100 font-robo">
        <div class="wrapper wrapper--w680">
            <div class="card card-1">
                <div class="card-heading"></div>
                <div class="card-body">
                    <h2 class="title">Registration Form</h2>
                    <form method="POST">
                        <div class="input-group">
                            <input class="input--style-1" type="text" placeholder="NAME" name="fname" required="true">
                        </div>
                        <div class="row row-space">
                            <div class="col-2">
                                <div class="input-group">
                                    <input class="input--style-1" type="text" placeholder="Mobile Number" name="contactno" required="true" maxlength="10" pattern="[0-9]+"> 
                                </div>
                            </div>
                         
                        </div>
                        <div class="input-group">
                            <div class="rs-select2 js-select-simple select--no-search">
                               <input class="input--style-1" type="email" placeholder="Email Address" name="email" required="true"> 
                              
                            </div>
                        </div>
                        <div class="row row-space">
                            <div class="col-2">
                                <div class="input-group">
                                    <input type="password" value="" class="input--style-1" name="password" required="true" placeholder="Password">
                                </div>
                            </div>
                        </div>
                        <div class="p-t-20">
                            <button class="btn btn--radius btn--green" type="submit" name="submit">Submit</button>
                        </div>
                        <br>
                        <a href="signin.php" style="color: red">Already have an account? Signin</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Jquery JS-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <!-- Vendor JS-->
    <script src="vendor/select2/select2.min.js"></script>
    <script src="vendor/datepicker/moment.min.js"></script>
    <script src="vendor/datepicker/daterangepicker.js"></script>
    <!-- Main JS-->
    <script src="js/global.js"></script>
</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>
<!-- end document-->

<?php

include('includes/dbconnection.php');

if(isset($_POST['submit']))

{

$fname=$_POST['fname'];

$contno=$_POST['contactno'];

$email=$_POST['email'];

$password=md5($_POST['password']);

$ret=mysqli_query($con, "select Email from tbluser where Email='$email' || MobileNumber='$contno'");

$result=mysqli_fetch_array($ret);

if($result>0){

echo "<script>alert('This email or Contact Number already associated with another account');</script>";

}

else{

$query=mysqli_query($con, "insert into tbluser(FullName, MobileNumber, Email, Password) value('$fname', '$contno', '$email', '$password' )");

if ($query) {

echo "<script>alert('You have successfully registered');</script>";

echo "<script>window.location.href ='signin.php'</script>";

}

else

{

echo "<script>alert('Something Went Wrong. Please try again');</script>";

echo "<script>window.location.href ='index.php'</script>";

}

<!DOCTYPE html>

<head>

</head>

<body>

<h2 class="title">Registration Form</h2>

</div>

</div>

</div>

</div>

<button class="btn btn--radius btn--green" type="submit" name="submit">Submit</button>

</div>

<br>

<a href="signin.php" style="color: red">Already have an account? Signin</a>

</form>

</div>

</body>

</html>

Step 5– User Signin or Login

First create a HTM form with two filed username and Password

<form method="POST">
<div class="input-group">
                          
<input type="text" class="input--style-1" placeholder="Registered Email or Contact Number" required="true" name="emailcont">
</div>

<div class="row row-space">
<div class="col-2">
<div class="input-group">
<input type="password" class="input--style-1" placeholder="Password" name="password" required="true">
</div>
</div>
</div>
                        
<div class="p-t-20">
<button class="btn btn--radius btn--green" type="submit" name="login">Sign IN</button>
</div><br>
<a href="index.php">Don't have an account ? CREATE AN ACCOUNT</a>
</form>

</div>

</div>

</div><br>

<a href="index.php">Don't have an account ? CREATE AN ACCOUNT</a>

</form>

User can log in through valid Email id /Contact Number and password.
PHP Code for Sign-in or Login

<?php
session_start();
error_reporting(0);
include('includes/dbconnection.php');
if(isset($_POST['login']))
{
 $emailcon=$_POST['emailcont'];
$password=md5($_POST['password']);
$query=mysqli_query($con,"select ID from tbluser where  (Email='$emailcon' || MobileNumber='$emailcon') && Password='$password' ");
$ret=mysqli_fetch_array($query);
if($ret>0){
$_SESSION['uid']=$ret['ID'];
echo "<script type='text/javascript'> document.location ='dashboard.php'; </script>";
  }else{
 echo "<script>alert('Invalid Details');</script>";
 }}
 ?>

<?php

session_start();

error_reporting(0);

include('includes/dbconnection.php');

if(isset($_POST['login']))

{

$emailcon=$_POST['emailcont'];

$password=md5($_POST['password']);

$query=mysqli_query($con,"select ID from tbluser where (Email='$emailcon' || MobileNumber='$emailcon') && Password='$password' ");

$ret=mysqli_fetch_array($query);

if($ret>0){

$_SESSION['uid']=$ret['ID'];

echo "<script type='text/javascript'> document.location ='dashboard.php'; </script>";

}else{

echo "<script>alert('Invalid Details');</script>";

}}

Step 6– Create a welcome page.

After login user will redirect to this page. Validate this page using user session if anyone want to access this page without login will redirect to signin.php automatically.
Code for dashboard.php

<?php
session_start();
error_reporting(0);
include('includes/dbconnection.php');
if (strlen($_SESSION['uid']==0)) {
header('location:logout.php');
} else{
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome Page</title>
    <!-- Icons font CSS-->
    <link href="vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
    <link href="vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
    <!-- Font special for pages-->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
    <!-- Vendor CSS-->
    <link href="vendor/select2/select2.min.css" rel="stylesheet" media="all">
    <link href="vendor/datepicker/daterangepicker.css" rel="stylesheet" media="all">
    <!-- Main CSS-->
    <link href="css/main.css" rel="stylesheet" media="all">
</head>

<body>
<div class="page-wrapper bg-blue p-t-100 p-b-100 font-robo">       
<div class="wrapper wrapper--w680">
<div class="card card-1">              
<div class="card-body">
<?php
$uid=$_SESSION['uid'];
$ret=mysqli_query($con,"select FullName from tbluser where ID='$uid'");
$row=mysqli_fetch_array($ret);
$name=$row['FullName'];

?>
<h4 style="color: blue; text-align: center;">Welcome !! <?php echo $name;?></h4>
</div>
</div>
<a href="logout.php" class="btn btn-outline btn-default">Logout</a>
</div>

    <!-- Jquery JS-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <!-- Vendor JS-->
    <script src="vendor/select2/select2.min.js"></script>
    <script src="vendor/datepicker/moment.min.js"></script>
    <script src="vendor/datepicker/daterangepicker.js"></script>
    <!-- Main JS-->
    <script src="js/global.js"></script>
</body>

</html>
<!-- end document-->
<?php }  ?>

<?php

session_start();

error_reporting(0);

include('includes/dbconnection.php');

if (strlen($_SESSION['uid']==0)) {

header('location:logout.php');

} else{

<!DOCTYPE html>

<head>

<title>Welcome Page</title>

</head>

<body>

<?php

$uid=$_SESSION['uid'];

$ret=mysqli_query($con,"select FullName from tbluser where ID='$uid'");

$row=mysqli_fetch_array($ret);

$name=$row['FullName'];

<h4 style="color: blue; text-align: center;">Welcome !! <?php echo $name;?></h4>

</div>

<a href="logout.php" class="btn btn-outline btn-default">Logout</a>

</div>

</body>

</html>

<?php } ?>

Step 7– logout Page.

Logout page used for destroy the session or unset the session variable.
code for logout.php page

<?php
session_start();
session_unset();
// unset session variable
session_destroy(); // destroy session
header('location:signin.php');
?>

<?php

session_start();

session_unset();

// unset session variable

session_destroy(); // destroy session

header('location:signin.php');

View Demo——————————————

View Demo

Download Source Code (User Signup and Sign in using HTML and PHP)

Size: 1.17 MB

Version: V 1.0

Download Now!

Recommended Tutorials for you

You may also like...

Latest Tutorials

Tutorials Categories

SQL Tutorials

User Signup and Sign in using HTML and PHP

Step 1– Create a database

Step 2– Create a database configuration file includes/dbconnection.php

Step 2– Create a HTML form for User Signup / Registration.

Step 4– Code for inserting User Signup / Registration values in the database

Step 5– User Signin or Login

Step 6– Create a welcome page.

Step 7– logout Page.

View Demo——————————————

Recommended Tutorials for you

You may also like...

Types of Errors in PHP

User Registration With Email OTP Verification Using PHP

Online Nurse Hiring System using PHP and MySQL

Latest Tutorials

Tutorials Categories

SQL Tutorials