Registration and login form in php with mysql in hindi
Post Views : 1316

Leave a Comment / By
Registration and login form in php with mysql in hindi

Introduction

हेलो दोस्तों आज हम इस post में user registration form और user login system कैसे create कर सकते है php और mysql का इस्तेमाल करके यह हम सब detail से जानेगे!. हाल की website में हम देख सकते है की सभी website में उस website की registration और login system available होती है users अपना firstname, lastname, username, password, email जैसी detail को fillup करके अपना account create कर लेता है उसके साथ में  user का एक account create हो जाता है user का एक बार account create होने के बाद में user अपने accout details जैसे की username और password के साथ login हो सकता है और
user अपने dashboard feature को access कर सकता है!.

Create database and database table

Database create करने के लिए wamp, xamp जैसे software को download करके setup होने के बाद में start कर लेना hota है और उसके बाद में phpmyadmin में login होने के बाद में database tab में click करके create database में database का नाम लिखके database को create कर सकते है!.

Create database

Create database table

CREATE TABLE IF NOT EXISTS `register` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `username` varchar(255) NOT NULL,
 `email` varchar(255) NOT NULL,
 `phone` varchar(15) NOT NULL,
 `password` varchar(255) NOT NULL,
 PRIMARY KEY (`id`)
);

इस code को copy करके mysql server में sql tab में click करके code को insert करके run करे!.

Table create होने के बाद में table का structure कुछ इस तरह से show होगा!.

 

Database connection

Database और database में table को create कर लेने के बाद में MYSQL database server connection script और es script को हम dbconn.php नाम की file में लिखेंगे!.

dbconn.php file

<?php
  $servername = "localhost";
  $username = "root";
  $password = "";
  $database = "crud";

  // Create connection
  $conn = mysqli_connect($servername, $username, $password, $database);

  // Check connection
  if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
  } else{
    echo "Connected successfully";	
  }
 ?>

User registration system form

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>This is registration and login system</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function () {

            $(".form_data").validate({
            rules: {
            username: {
                required: true
            },
            email: {
              		required: true,
              		email: true
            		},
            		password: "required",
                        confirm_password: {
  						equalTo: "#floatingPassword"
                        },
            		phone:{
            			required: true
            		}
            },
            messages: {
            username: {
              required: "this field is required"
            },
            email: {
                  	required: "We need your email address to contact you",
                  	email: "Your email address must be in the format of name@domain.com"
                        },
                        phone: {
                required: "this field is required"
              }
            }
            });
        });
    </script>
    <style>.error{ color: red; top: 20px }</style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-10 col-xl-9 mx-auto">
        <div class="card flex-row my-5 border-0 shadow rounded-3 overflow-hidden">
          <div class="card-img-left d-none d-md-flex">
            <!-- Background image for card set in CSS! -->
          </div>
          <div class="card-body p-4 p-sm-5">
            <h5 class="card-title text-center mb-5 fw-light fs-5">Register</h5>
            <form action="#" method="POST" class="form_data">

              <div class="form-floating mb-3">
                <input type="text" class="form-control" name="username" id="floatingInputUsername" placeholder="myusername" required autofocus>
                <label for="floatingInputUsername">Username</label>
              </div>

              <div class="form-floating mb-3">
                <input type="email" class="form-control" name="email" id="floatingInputEmail" placeholder="name@example.com">
                <label for="floatingInputEmail">Email address</label>
              </div>

              <div class="form-floating mb-3">
                <input type="text" class="form-control" name="phone" id="floatingInputphone" placeholder="Enter your phone ">
                <label for="floatingInputEmail">Phone Number</label>
              </div>

              <hr>

              <div class="form-floating mb-3">
                <input type="password" class="form-control" name="password" id="floatingPassword" placeholder="Password">
                <label for="floatingPassword">Password</label>
              </div>

              <div class="form-floating mb-3">
                <input type="password" name="confirm_password" class="form-control" id="floatingPasswordConfirm" placeholder="Confirm Password">
                <label for="floatingPasswordConfirm">Confirm Password</label>
              </div>

              <div class="d-grid mb-2">
                <input  name="submit" class="btn btn-lg btn-primary btn-login fw-bold text-uppercase" type="submit" value="Register">
              </div>

              <a class="d-block text-center mt-2 small" href="/login.php">Have an account? Sign In</a>            
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

User registration form data get using php

registration.php file

<?php 
include('inc/dbconn.php'); 

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

    $username = $_POST['username'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $password = $_POST['password'];
    
    $inser_qury = "INSERT INTO `register` (`username`, `email`, `phone`, `password`) VALUES ('".$username."', '".$email."', '".$phone."', '".$password."')";
    $select_res = mysqli_query($conn, $inser_qury);	

    if( $select_res ){
      echo "Data inserted successfully!";
    }
}
?>

Fullcource code

<?php 
include('inc/dbconn.php'); 

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

    $username = $_POST['username'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $password = $_POST['password'];
    
    $inser_qury = "INSERT INTO `register` (`username`, `email`, `phone`, `password`) VALUES ('".$username."', '".$email."', '".$phone."', '".$password."')";
    $select_res = mysqli_query($conn, $inser_qury);	

    if( $select_res ){
      echo "Data inserted successfully!";
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>This is registration and login system</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function () {

            $(".form_data").validate({
            rules: {
            username: {
                required: true
            },
            email: {
              		required: true,
              		email: true
            		},
            		password: "required",
                        confirm_password: {
  						equalTo: "#floatingPassword"
                        },
            		phone:{
            			required: true
            		}
            },
            messages: {
            username: {
              required: "this field is required"
            },
            email: {
                  	required: "We need your email address to contact you",
                  	email: "Your email address must be in the format of name@domain.com"
                        },
                        phone: {
                required: "this field is required"
              }
            }
            });
        });
    </script>
    <style>.error{ color: red; top: 20px }</style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-10 col-xl-9 mx-auto">
        <div class="card flex-row my-5 border-0 shadow rounded-3 overflow-hidden">
          <div class="card-img-left d-none d-md-flex">
            <!-- Background image for card set in CSS! -->
          </div>
          <div class="card-body p-4 p-sm-5">
            <h5 class="card-title text-center mb-5 fw-light fs-5">Register</h5>
            <form action="#" method="POST" class="form_data">

              <div class="form-floating mb-3">
                <input type="text" class="form-control" name="username" id="floatingInputUsername" placeholder="myusername" required autofocus>
                <label for="floatingInputUsername">Username</label>
              </div>

              <div class="form-floating mb-3">
                <input type="email" class="form-control" name="email" id="floatingInputEmail" placeholder="name@example.com">
                <label for="floatingInputEmail">Email address</label>
              </div>

              <div class="form-floating mb-3">
                <input type="text" class="form-control" name="phone" id="floatingInputphone" placeholder="Enter your phone ">
                <label for="floatingInputEmail">Phone Number</label>
              </div>

              <hr>

              <div class="form-floating mb-3">
                <input type="password" class="form-control" name="password" id="floatingPassword" placeholder="Password">
                <label for="floatingPassword">Password</label>
              </div>

              <div class="form-floating mb-3">
                <input type="password" name="confirm_password" class="form-control" id="floatingPasswordConfirm" placeholder="Confirm Password">
                <label for="floatingPasswordConfirm">Confirm Password</label>
              </div>

              <div class="d-grid mb-2">
                <input  name="submit" class="btn btn-lg btn-primary btn-login fw-bold text-uppercase" type="submit" value="Register">
              </div>

              <a class="d-block text-center mt-2 small" href="/login.php">Have an account? Sign In</a>            
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

User Login Form

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>This is login system</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function () {
        $(".form_data").validate({
        rules: {		            
          email: {
              	required: true,
              	email: true
            	},
            	password: {
            		required: true
            	}     									    
        },
        messages: {		            
          email: {
                  required: "We need your email address to contact you",
                  email: "Your email address must be in the format of name@domain.com"
                    }
        }
        });
        });
    </script>
    <style>.error{ color: red; top: 20px }</style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-10 col-xl-9 mx-auto">
        <div class="card flex-row my-5 border-0 shadow rounded-3 overflow-hidden">
          <div class="card-img-left d-none d-md-flex">
            <!-- Background image for card set in CSS! -->
          </div>
          <div class="card-body p-4 p-sm-5">
            <h5 class="card-title text-center mb-5 fw-light fs-5">Login</h5>
            <form action="#" method="POST" class="form_data">              
              <div class="form-floating mb-3">
                <input type="email" class="form-control" name="email" id="floatingInputEmail" placeholder="example@example.com">
                <label for="floatingInputEmail">Email address</label>
              </div>
              <hr>
              <div class="form-floating mb-3">
                <input type="password" class="form-control" name="password" id="floatingPassword" placeholder="Password">
                <label for="floatingPassword">Password</label>
              </div>             
              <div class="d-grid mb-2">
                <input  name="submit" class="btn btn-lg btn-primary btn-login fw-bold text-uppercase" type="submit" value="login">
              </div>
              <a class="d-block text-center mt-2 small" href="/insert.php">Have Don't account? Sign up</a>
              <hr class="my-4">             
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Check user Authentication

<?php 
include('inc/dbconn.php');

session_start();
if( isset ( $_SESSION["Login"] ) ){
    header("Location: dashboard.php");
}

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

    $email = $_POST['email'];	
    $password = $_POST['password'];
    
    $select_query = "SELECT * FROM `register` WHERE  email ='".$email."' AND password = '".$password."' ";		
    $select_res = mysqli_query( $conn, $select_query );		

    if( mysqli_num_rows( $select_res ) > 0 ){
        $_SESSION["Login"] = true;
        $_SESSION["email"] = $email;
        $_SESSION["password"] = $password;

        header("Location: dashboard.php");
      exit();
    } else{
        echo "User Login Faild!";
    }
}
?>

Fullcource code

<?php 
include('inc/dbconn.php');

session_start();
if( isset ( $_SESSION["Login"] ) ){
    header("Location: dashboard.php");
}

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

    $email = $_POST['email'];	
    $password = $_POST['password'];
    
    $select_query = "SELECT * FROM `register` WHERE  email ='".$email."' AND password = '".$password."' ";		
    $select_res = mysqli_query( $conn, $select_query );		

    if( mysqli_num_rows( $select_res ) > 0 ){
        $_SESSION["Login"] = true;
      $_SESSION["email"] = $email;
        $_SESSION["password"] = $password;

        header("Location: dashboard.php");
      exit();
    } else{
        echo "User Login Faild!";
    }
}
?>
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>This is login system</title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
 <script>
  $(document).ready(function () {
    $(".form_data").validate({
      rules: {		            
         email: {
           required: true,
           email: true
         },
         password: {
           required: true
         }     									    
        },
        messages: {		            
          email: {
            required: "We need your email address to contact you",
            email: "Your email address must be in the format of name@domain.com"
          }
        }
        });
      });
    </script>
    <style>.error{ color: red; top: 20px }</style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-10 col-xl-9 mx-auto">
        <div class="card flex-row my-5 border-0 shadow rounded-3 overflow-hidden">
          <div class="card-img-left d-none d-md-flex">
            <!-- Background image for card set in CSS! -->
          </div>
          <div class="card-body p-4 p-sm-5">
            <h5 class="card-title text-center mb-5 fw-light fs-5">Login</h5>
            <form action="#" method="POST" class="form_data">              
              <div class="form-floating mb-3">
                <input type="email" class="form-control" name="email" id="floatingInputEmail" placeholder="example@example.com">
                <label for="floatingInputEmail">Email address</label>
              </div>
              <hr>
              <div class="form-floating mb-3">
                <input type="password" class="form-control" name="password" id="floatingPassword" placeholder="Password">
                <label for="floatingPassword">Password</label>
              </div>             
              <div class="d-grid mb-2">
                <input  name="submit" class="btn btn-lg btn-primary btn-login fw-bold text-uppercase" type="submit" value="login">
              </div>
              <a class="d-block text-center mt-2 small" href="/insert.php">Have Don't account? Sign up</a>
              <hr class="my-4">             
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

 

Create session

Session  को create करने के लिए session_start() function का इस्तेमाल होता है!

session_start();
if( isset( $_POST['submit'] ) ){	

    $email = $_POST['email'];	
    $password = $_POST['password'];
    
    $select_query = "SELECT * FROM `register` WHERE  email ='".$email."' AND password = '".$password."' ";		
    $select_res = mysqli_query( $conn, $select_query );		

    if( mysqli_num_rows( $select_res ) > 0 ){
        $_SESSION["Login"] = true;
      	$_SESSION["email"] = $email;
        $_SESSION["password"] = $password;
        header("Location: dashboard.php");
      exit();
    } else{
        echo "User Login Faild!";
    }
}

 

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *