Cara Membuat Login Sederhana Dengan PHP OOP with AJAX

Salam Pemrograman Pada Kesempatan ini Lapakcode Kembali Membagi Tutorial Penyanyi menjelaskan akan, cara membuat Login Script using jQuery Ajax DENGAN PHP MySQL, also Penyanyi Adalah postingan SIGNIFIKAN Saya Penghasilan kena pajak postingan Pendaftaran using jQuery Dan Ajax, sehingga hearts tutorial Penyanyi Saya akan MEMBUAT form login sederhana using Bootstrap. email kata sandi Dan akan memvalidasi JIKA pengguna Biarkan kosong Penghasilan kena pajak Formulir akan BR disampaikan using $ ajax () Metode Dan mengirim Nilai pengguna Ke Halaman Login Utama SEMUA Proses akan dilakukan Tanpa menyegarkan Halaman,

Kami telah digunakan di sini sebelumnya dibuat database dan tabel yang digunakan dalam pos pendaftaran ajax, gunakan kode berikut untuk membuat tabel dalam database "masuk.sql"

perhatikan Gmabar di bawah ini !

Buat database Dengan Nama masuk !

Kemudian buat new File Bernama
Dbconfig.Php

Database file konfigurasi, memodifikasi nama pengguna, kata sandi dan nilai-nilai database yang sesuai kebutuhan Anda.

<?php


 $db_host = "localhost";
 $db_name = "masuk";
 $db_user = "root";
 $db_pass = "";
 
 try{
  
  $db_con = new PDO("mysql:host={$db_host};dbname={$db_name}",$db_user,$db_pass);
  $db_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 }
 catch(PDOException $e){
  echo $e->getMessage();
 }


?>

Form Login sederhana Pengguna

Untuk memuat bootstrap desain kita harus menambahkan berikut dua file css bootstrap tepat di atas </ head> tag penutup

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">

Selanjutnya Kita membuat file baru dan menyimpannya sebagai index.php dengan kode berikut, ini adalah halaman login utama kami berisi form login html user friendly yang akan menerima email, password dan tentu saja validasi harus begitu validasi ada.


<body>

<div id="flip"><h2>Klik Disini Untuk Login</h2></div>
<div id="panel"><div class="signin-form">

    <div class="container">
     
        
       <form class="form-signin" method="post" id="login-form">
      
        <h2 class="form-signin-heading">Masuk</h2><hr />
        
        <div id="error">
        
        </div>
        
        <div class="form-group">
        <input type="email" class="form-control" placeholder="Masukan alamat email" name="user_email" id="user_email" />
        <span id="check-e"></span>
        </div>
        
        <div class="form-group">
        <input type="password" class="form-control" placeholder="Masukan Password Anda" name="password" id="password" />
        </div>
       
        <hr />
        
        <div class="form-group">
            <button type="submit" class="btn btn-default" name="btn-login" id="btn-login">
            <span class="glyphicon glyphicon-hand-right"></span> &nbsp; Sign In
            </button> 
        </div>  
        <h5 class="form-signin-heading">Created @bagusfever desain By Bootstrap</h5>
      
      </form>

    </div>
    
</div></div>

    

    
<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

Login Process.Php
Berisi kode hanya PHP, ini akan memverifikasi email dan password nilai-nilai dalam database, file ini akan bekerja diam-diam di back-end dan panggilan melalui $ ajax () metode menggunakan kode jQuery. jika login sukses memberikan pesan ok atau jika gagal akan mencetak rincian yang salah pesan.
<?php
 session_start();
 require_once 'dbconfig.php';

 if(isset($_POST['btn-login']))
 {
  //$user_name = $_POST['user_name'];
  $user_email = trim($_POST['user_email']);
  $user_password = trim($_POST['password']);
  
  $password =($user_password);
  
  try
  { 
  
   $stmt = $db_con->prepare("SELECT * FROM tbl_users WHERE user_email=:email");
   $stmt->execute(array(":email"=>$user_email));
   $row = $stmt->fetch(PDO::FETCH_ASSOC);
   $count = $stmt->rowCount();
   
   if($row['user_password']==$password){
    
    echo "ok"; // log in
    $_SESSION['user_session'] = $row['user_id'];
   }
   else{
    
    echo "Email atau Password  Salah D-:";
   }
    
  }
  catch(PDOException $e){
   echo $e->getMessage();
  }
 }

?>

Selanjutnya Script.Js
Kode JavaScript / jQuery yang bertanggung jawab untuk melakukan semua hal yang diam-diam, ini akan membunuh "login process.php" melalui $ ajax () metode dan id "respon" ok maka akan redirect ke halaman rumah, jika tidak maka akan menampilkan pesan yang tepat dalam "#error" div. script ini dilengkapi dengan validasi yang tepat.

$('document').ready(function()
{ 
     /* validation */
  $("#login-form").validate({
      rules:
   {
   password: {
   required: true,
   },
   user_email: {
            required: true,
            email: true
            },
    },
       messages:
    {
            password:{
                      required: "Mohon isi Paswword Anda Dengan Benar !"
                     },
            user_email: "harap Masukan email Anda Dengan Benar !",
       },
    submitHandler: submitForm 
       });  
    /* validation */
    
    /* login submit */
    function submitForm()
    {  
   var data = $("#login-form").serialize();
    
   $.ajax({
    
   type : 'POST',
   url  : 'login_process.php',
   data : data,
   beforeSend: function()
   { 
    $("#error").fadeOut();
    $("#btn-login").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; Memproses');
   },
   success :  function(response)
      {      
     if(response=="ok"){
         
      $("#btn-login").html('<img src="btn-ajax-loader.gif" /> &nbsp; Harap Tunggu ...');
      setTimeout(' window.location.href = "home.php"; ',4000);
     }
     else{
         
      $("#error").fadeIn(1000, function(){      
    $("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; '+response+' !</div>');
           $("#btn-login").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign In');
         });
     }
     }
   });
    return false;
  }
    /* login submit */
});

home.php

ini adalah halaman anggota rumah kami dan hanya anggota dapat mengaksesnya, file ini akan dibuka melalui ajax, dan jika sesi kosong itu akan mengarahkan ke halaman login / index.

<?php
session_start();

if(!isset($_SESSION['user_session']))
{
 header("Location: index.php");
}

include_once 'dbconfig.php';

$stmt = $db_con->prepare("SELECT * FROM tbl_users WHERE user_id=:uid");
$stmt->execute(array(":uid"=>$_SESSION['user_session']));
$row=$stmt->fetch(PDO::FETCH_ASSOC);

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bagus Fever</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"> 
<script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>
<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://demamsinau.blogspot.co.id/">Demam Sinau</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Hubungi Kami</a></li>
            <li><a href="#">PHP</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
     <span class="glyphicon glyphicon-user"></span>&nbsp;Hi' <?php echo $row['user_name']; ?>&nbsp;<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="profil.php"><span class="glyphicon glyphicon-user"></span>&nbsp;View Profile</a></li>
                <li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span>&nbsp;Sign Out</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    
    
<div class="body-container">

<div class="container">
    <div class='alert alert-success'>
  <button class='close' data-dismiss='alert'>&times;</button>
   <strong>Hello '<?php echo $row['user_name']; ?></strong> Selamat datang DI Halaman Utama enjoy Ya :-D
    </div>
</div>

<div class="container">






        


<script type="text/javascript">
window.twttr = (function (d, s, id) {
  var t, js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src= "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>

<!-- Place this tag where you want the widget to render. -->


<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
    (function() {
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
    })();
</script>
    </div>
</div>

</div>
</div>


</div>

</div>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

logout.php

menghancurkan sesi logout pengguna dan meneruskan ke halaman login / index.

<?php
 session_start();
 unset($_SESSION['user_session']);
 
 if(session_destroy())
 {
  header("Location: index.php");
 }
?>

itu saja, kami telah menciptakan sini skrip login sederhana dengan Ajax, jQuery, PHP, MySQL dengan desain bootstrap, baik ini adalah bagian kelanjutan dari saya tutorial sebelumnya diposting. harap Anda menyukainya.