Form Register, Login, dan Reset Password Menggunakan Php MySql

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
September 13, 2018




Selamat malam sobat blogger kali ini kami akan share bagaimana membuat Form Register, Login, dan Reset Password Menggunakan Php MySqli. Ada beberapa yang perlu kalian persiapkan adalah membuat databasenya terlebih dahulu, pastikan query yang anda gunakan sudah sesuai.

Langsung saja yang pertama buat databasenya terlebih dahulu, buat database dengan nama login_regist kemudian masukkan tabel dibawah ini.

 -MariaDB
-- PHP Version: 7.2.5

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";

--
-- Table structure for table `users`
--

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `fullName` varchar(50) DEFAULT NULL,
  `userEmail` varchar(50) DEFAULT NULL,
  `password` varchar(100) DEFAULT NULL,
  `idUser` varchar(20) DEFAULT NULL,
  `regDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `updationDate` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' ON UPDATE CURRENT_TIMESTAMP,
  `status` int(1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`id`, `fullName`, `userEmail`, `password`, `idUser`, `regDate`, `updationDate`, `status`) VALUES
(1, 'Armaan', 'arman@gmail.com', 'ee11cbb19052e40b07aac0ca060c23ee', '12345', '2018-03-06 04:26:14', '2018-04-05 10:36:14', 1);

--
-- Indexes for table `users`
--
ALTER TABLE `users`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
COMMIT;
 

Kedua buat koneksi kedatabsenya terlebih dahulu, Buat file dengan nama config.php kemudian masukkan kodingan dibawah ini.

 <?php
define('DB_HOST', 'localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'login_regist');
$con = mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME);
// Check connection
if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?> 

Ketiga buat file dengan nama index.php form ini berfungsi sebagai form login dan form reset password.

 <?php session_start();
error_reporting(0);
include("include/config.php");
if(isset($_POST['submit'])) {
  $_SESSION['submit']='';
}
if(isset($_POST['submit']))
{

  $ret=mysqli_query($con,"SELECT * FROM users WHERE userEmail='".$_POST['username']."' and password='".md5($_POST['password'])."'");
  $num=mysqli_fetch_array($ret);
  if($num>0)
  {
$extra="dashbord.php";//
$_SESSION['login']=$_POST['username'];
$_SESSION['id']=$num['id'];
$host=$_SERVER['HTTP_HOST'];
$uip=$_SERVER['REMOTE_ADDR'];
$status=1;
$uri=rtrim(dirname($_SERVER['PHP_SELF']),'/\\');
header("location:http://$host$uri/$extra");
exit();
}
else
{
  $_SESSION['login']=$_POST['username'];  
  $uip=$_SERVER['REMOTE_ADDR'];
  $status=0;
  $errormsg="Invalid username or password";
  $extra="login.php";
}
}
if(isset($_POST['change']))
{
 $email=$_POST['email'];
 $id=$_POST['iduser'];
 $password=md5($_POST['password']);
 $query=mysqli_query($con,"SELECT * FROM users WHERE userEmail='$email' and idUser='$id'");
 $num=mysqli_fetch_array($query);
 if($num>0)
 {
  mysqli_query($con,"update users set password='$password' WHERE userEmail='$email' and idUser='$id' ");
  $msg="Password Changed Successfully";
}
else
{
  $errormsg="Invalid email id or idUser no";
}
}

?>
<!DOCTYPE html>
<html>
<head>
  <link rel="shortcut icon" href="images/profile.gif">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Main CSS-->
  <link rel="stylesheet" type="text/css" href="login/css/main.css">
  <!-- Font-icon css-->
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Example</title>
  <script type="text/javascript">
    function valid()
    {
      if(document.forgot.password.value!= document.forgot.confirmpassword.value)
      {
        alert("Password and Confirm Password Field do not match  !!");
        document.forgot.confirmpassword.focus();
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
  <section class="material-half-bg">
    <div class="cover">
    </div>
    
  </section>
  <section class="login-content">
    <div class="login-box">
     <p style="padding-left:20%; color:red">
      <?php if($errormsg){
        echo htmlentities($errormsg);
      }?>
    </p>
    <p style="padding-left:20%;  color:green">
      <?php if($msg){
        echo htmlentities($msg);
      }?></p>
      
      <form class="login-form" method="post">
        <a class="brand" href="../index.html">
          <div class="thumbnail"><center><img src="images/profile.gif" height="100"/></center></div></a><p/>
          <div class="form-group">
            <input class="form-control" name="username" type="text" placeholder="Email" autofocus>
          </div>
          <div class="form-group">
            <input class="form-control" type="password" name="password" placeholder="Password">
          </div>
          <div class="form-group">
            <div class="utility">
              <div class="animated-checkbox">
                <p class="semibold-text mb-2"><a href="registration.php">Create an Account</a></p>
              </div>
              <p class="semibold-text mb-2"><a href="#" data-toggle="flip">Forgot Password ?</a></p>
            </div>
          </div>
          <div class="form-group btn-container">
            <button type="submit" name="submit" class="btn btn-primary btn-block"><i class="fa fa-sign-in fa-lg fa-fw"></i>SIGN IN</button>
          </div>
        </form>
        <form class="forget-form" name="forgot" method="post">
          <a class="brand" href="index.php">
            <div class="thumbnail"><center><img src="images/profile.gif" height="100"/></center></div></a><p/>
            <div class="form-group">
              <input class="form-control" type="email" name="email" placeholder="Email">
            </div>
            <div class="form-group">
              <input class="form-control" type="text" name="iduser" placeholder="Identity Number">
            </div>
            <div class="form-group">
              <input class="form-control" type="password" id="password" name="password" placeholder="New Password">
            </div>
            <div class="form-group">
              <input class="form-control" type="password" id="confirmpassword" name="confirmpassword" placeholder="Confirm Password">
            </div>
            <div class="form-group btn-container">
              <button type="submit" name="change" onclick="return valid();" class="btn btn-primary btn-block"><i class="fa fa-unlock fa-lg fa-fw"></i>RESET PASSWORD</button>
            </div>
            <div class="form-group mt-2">
              <p class="semibold-text mb-0"><a href="#" data-toggle="flip"><i class="fa fa-angle-left fa-fw"></i> Back to Login</a></p>
            </div>
          </form>
        </div>
      </section>
      <!-- Essential javascripts for application to work-->
      <script src="login/js/jquery-3.2.1.min.js"></script>
      <script src="login/js/popper.min.js"></script>
      <script src="login/js/bootstrap.min.js"></script>
      <script src="login/js/main.js"></script>
      <!-- The javascript plugin to display page loading on top-->
      <script src="login/js/plugins/pace.min.js"></script>
      

      <script type="text/javascript">
      // Login Page Flipbox control
      $('.login-content [data-toggle="flip"]').click(function() {
       $('.login-box').toggleClass('flipped');
       return false;
      });
    </script>
  </body>
  </html> 




Keempat buat file dengan nama registration.php fungsi file ini sebagai form register untuk user, pada form ini sistem bisa mendeteksi adanya duplikat data id user.

 <?php
include('include/config.php');
error_reporting(0);
if(isset($_POST['submit']))
{
  $fullname=$_POST['fullname'];
  $email=$_POST['email'];
  $password=md5($_POST['password']);
  $iduser=$_POST['iduser'];
  $status=1;
  $query=mysqli_query($con,"insert into users(fullName,userEmail,password,idUser,status) values('$fullname','$email','$password','$iduser','$status')");
  $msg="Registration successfull. Now You can login !";
}
?>

<!DOCTYPE html>
<html>
<head>
  <link rel="shortcut icon" href="images/profile.gif">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Main CSS-->
  <link rel="stylesheet" type="text/css" href="login/css/mainregister.css">
  <!-- Font-icon css-->
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Example | Registration</title>
  
  <script>
    function iduserAvailability() {
      $("#loaderIcon").show();
      jQuery.ajax({
        url: "check_availabilytyiduser.php",
        data: 'iduser=' + $("#iduser").val(),
        type: "POST",
        success: function(data) {
          $("#iduser-availability-status1").html(data);
          $("#loaderIcon").hide();
        },
        error: function() {}
      });
    }
  </script>
</head>
<body>
  <section class="material-half-bg">
    <div class="cover">
      <div id="particles-js"></div>
    </div>
  </section>
  <section class="login-content">
    <div class="login-box">
     <p style="padding-left:20%; color:green">
      <?php if($msg){ echo htmlentities($msg); }?>
      <form class="login-form" method="post">
       <a class="brand" href="index.php">
        <div class="thumbnail"><center><img src="images/profile.gif" height="100"/></center></div></a><p/>
        <div class="form-group">
          <input class="form-control" name="fullname" type="text" placeholder="Full Name" autofocus required="required">
        </div>
        <div class="form-group">
          <input class="form-control" type="email" placeholder="Email" name="email" placeholder="Email" autofocus required="required">
        </div>
        <div class="form-group">
          <input type="text" class="form-control" maxlength="10" name="iduser" id="iduser" onBlur="iduserAvailability()" placeholder="Identity Number" required="required">
          <span id="iduser-availability-status1" style="font-size:12px;"></span>
        </div>
        
        <div class="form-group">
          <input class="form-control" type="password" required="required" name="password" placeholder="Password">
        </div>
        <div class="form-group btn-container">
          <button type="submit" name="submit" id="submit" class="btn btn-primary btn-block"><i class="fa fa-sign-in fa-lg fa-fw"></i>REGISTER</button>
        </div><p/>
        <div class="form-group mt-2">
          <p class="semibold-text mb-0">Account Already?<a href="index.php"> Sign in</a></p>
        </div>
      </form>
    </div>
  </section>
  <!-- Essential javascripts for application to work-->
  <script src="login/js/jquery-3.2.1.min.js"></script>
  <script src="login/js/popper.min.js"></script>
  <script src="login/js/bootstrap.min.js"></script>
  <script src="login/js/main.js"></script>
  <!-- The javascript plugin to display page loading on top-->
  <script src="login/js/plugins/pace.min.js"></script>
  
  <!-- particles js file -->
  <script src="login/js/particles.js"></script>
  <script src="login/js/app.js"></script>
  
  <script type="text/javascript">
      // Login Page Flipbox control
      $('.login-content [data-toggle="flip"]').click(function() {
       $('.login-box').toggleClass('flipped');
       return false;
      });
    </script>
  </body>
  </html> 



Kelima buat file dengan nama check_availabilytyiduser.php fungsi file ini adalah untuk mengambil data dari tabel users kemudian mencocokkan data yang kita input pada form registration.php ketika data yang di input sudah ada maka registrasi tidak bisa dilakukan, dan jika data belum ada registrasi bisa dilakukan.

 <?php 
require_once("include/config.php");
if(!empty($_POST["iduser"])) {
 $iduser= $_POST["iduser"];
 $result =mysqli_query($con,"SELECT idUser FROM users WHERE idUser='$iduser'");
 $count=mysqli_num_rows($result);
 if($count>
  0) { echo "<span style='color:red'>iduser already exists .</span>"; echo "
  <script>$('#submit').prop('disabled',true);</script>
  "; } else{ echo "<span style='color:green'>iduser available for Registration .</span>"; echo "
  <script>$('#submit').prop('disabled',false);</script>
  ";
 }
}

?> 

Keenam buat file dengan nama dashbord.php file ini berfungs sebagai file yang dituju ketika user berhasil login.

 <?php session_start();
error_reporting(0);
include('include/config.php');
if(strlen($_SESSION['login'])==0)
{ 
  header('location:index.php');
}
else{ ?>
  <!DOCTYPE html>
  <html>
  <head>
    <title>Export File</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <!--Script CSS-->
    <link type="text/css" href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' rel='stylesheet'>
    <link type="text/css" href='https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css' rel='stylesheet'>
    <link type="text/css" href='https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css' rel='stylesheet'>
    
  </head>
  <body>
    <br /><br />
    <div class="container">
     <nav class="navbar navbar-inverse">
      <div class="container-fluid">
       <div class="navbar-header">
        <a class="navbar-brand" href="logout.php">Logout</a>
      </div>
    </div>
  </nav>
  <br />
  <!--h2 align="center">EXPORT FILE</h2-->
  <br />
  <form method="post">
    <p> Welcome !!</p>
    <div class="form-group">
    </form>
  </div>

  <!--Script Javascript-->
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>

</body>
</html>
<?php } ?> 



Ketujuh buat file dengan nama logout.php pasti kalian sudah mengetahui fungsinya.

 <?php session_start();
include("include/config.php");
$_SESSION['login']=="";
date_default_timezone_set('Asia/Jakarta');
$ldate=date( 'Y-m-d H:i:s', time () );
mysqli_query($con,"UPDATE userlog  SET logout = '$ldate' WHERE username = '".$_SESSION['login']."' ORDER BY id DESC LIMIT 1");
session_unset();
$_SESSION['errmsg']="You have successfully logout";
?>
<script language="javascript">
 document.location="index.php";
</script> 

Jika teman-teman ingin melihat langsung demonya silahkan tekan button demo atau langsung download filenya dibawah ini.

DEMO                  DOWNLOAD

Sekian share kali ini semoga apa yang kami share bermanfaat bagi kalian semua, Jika teman-teman belum paham silahkan tinggalkan komentar dan mulai berdiskusi dengan kami.


Related Post

SUBSCRIBE TO OUR NEWSLETTER

closed