Wednesday, July 13, 2016

Kategori: , , , ,

Tutorial Membuat Login Ajax dengan JQuery, PHP, MySQL, dan Bootstrap

ajax bootstrap jquery mysql php


PHP- Membuat Login Ajax dengan Menggunakan JQuery, PHP, MySQL, dan Bootstrap, Tutorial Login Ajax Terbaru Dengan PHP dan MySQL.

Pada Postingan tutorial kali ini saya akan menjelaskan, bagaimana cara membuat login Script menggunakan JQuery Ajax dengan PHP MySQL, pada Tutorial ini akan dibuat form sederhana dengan menggunakan bootstrap sebagai desain awal, dengan metode ajax maka tidak akan ada refresh halaman. OK mari kita mulai Ngoding.


Membuat Database dan Table
Langkah awal buatlah database db_registration pada PHP MyAdmin, atau pada aplikasi XAMPP, dengan nama database db_login, kemudian buat table dengan nama tbl_users.


CREATE TABLE IF NOT EXISTS `tbl_users` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `user_name` varchar(25) NOT NULL,
  `user_email` varchar(60) NOT NULL,
  `user_password` varchar(255) NOT NULL,
  `joining_date` datetime NOT NULL,
  PRIMARY KEY (`user_id`)
) 



Config.php

lal buatlah file configurasi pada database. Berikut codingnya simpan dengan nama file config.php.


<?php
 $db_host = "localhost";
 $db_name = "dbregistration";
 $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();
 }
?>

Koneksikan css bootstrap dengan designnya. Silahkan bisa download bootstrapnya di getbootstrap.com


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

index.php

Buatlah file index.php pada folder di htdocs yang sudah ditentukan, 


<div class="signin-form">
 <div class="container">        
       <form class="form-signin" method="post" id="login-form">
      
        <h2 class="form-signin-heading">Log In to WebApp.</h2><hr />
        
        <div id="error">
        <!-- error will be shown here ! -->
        </div>
        
        <div class="form-group">
        <input type="email" class="form-control" placeholder="Email address" name="user_email" id="user_email" />
        <span id="check-e"></span>
        </div>
        
        <div class="form-group">
        <input type="password" class="form-control" placeholder="Password" 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-log-in"></span> &nbsp; Sign In
   </button> 
        </div>  
      
      </form>

    </div>
    
</div>

login_proses.php Buatlah script login_proses.php, script yang akan memproses inputan username dan password pada halaman login.

<?php
 session_start();
 require_once 'dbconfig.php';

 if(isset($_POST['btn-login']))
 {
  $user_email = trim($_POST['user_email']);
  $user_password = trim($_POST['password']);
  
  $password = md5($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 or password does not exist."; // wrong details 
   }
    
  }
  catch(PDOException $e){
   echo $e->getMessage();
  }
 }

?>

Buatlah Script.js JavaScript / jQuery yang bertanggung jawab untuk melakukan semua hal yang tersembuni, ini akan memanggil " login_process.php " melalui $ ajax ( ) metode dan id " respon " ok maka akan redirect ke halaman rumah , jika tidak maka akan muncul 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: "please enter your password"
                     },
            user_email: "please enter your email address",
       },
    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; sending ...');
   },
   success :  function(response)
      {      
     if(response=="ok"){
         
      $("#btn-login").html('<img src="btn-ajax-loader.gif" /> &nbsp; Signing In ...');
      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

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



<?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>Login Form using jQuery Ajax and PHP MySQL</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"> 
<link href="style.css" rel="stylesheet" media="screen">

</head>

<body>

<div class="container">
    <div class='alert alert-success'>
  <button class='close' data-dismiss='alert'>&times;</button>
   <strong>Hello '<?php echo $row['user_name']; ?></strong>  Welcome to the members page.
    </div>
</div>

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

Logout.php 
Logout.php adalah script yang mengakhiri session data 


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

Sekian artikel pada malam ini, semoga script login Ajax dengan jQuery Php MySQL dan Bootrap dapat bermanfaat.

tag : PHP, JQuery, MySQL, Bootstrap. 
PHP, JQuery, MySQL, Bootstrap.PHP, JQuery, MySQL, Bootstrap, sugih code, Sugih Code Progra

Tobi Muhammad

Author & Editor

Tobi (Muhammad Tobi) adalah seorang Tukang Masak di perusahaan startup, suka sekali menulis dan mempelajari source code open source lisensi GNU di Github dll. Bisa pemrogramman web karena sering belajar dari contoh program yang ada di Github dll. Anak desa yang hanya lulusan Paket C.

0 comments:

Post a Comment

 

News Letters

Subscribe here to get our newsletter in your inbox, it is safe and EASY!

Copyright © Tobi Web™