Ajax Login Php Mysql dengan jquery form dan jquery validation

Asalamualaikum, Sebenarnya sudah banyak yang share bagaiamana login menggunakan ajax ini, namun disini saya akan menggunakan library lain sebagai bantuan yakni jquery form dan validation dalam handling client side ajaxnya. Untuk style nya saya menggunakan boostrap dan sedikit custom untuk mempercantik tampilan login, owh iya, saya juga menggunakan library backstretch supaya halaman background nya berganti secara dinamis. Baiklah langsung saja berikut yang harus dipersiapkan :

Demo | Download File
Kita akan buat strukturnya seperti ini

Library yang digunakan

Table Users

Silakan buat database baru dan buat table user dengan query berikut

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(50) NOT NULL DEFAULT '0',
  `last_name` varchar(50) NOT NULL DEFAULT '0',
  `username` varchar(50) DEFAULT NULL,
  `password` varchar(50) DEFAULT NULL,
  `email` varchar(50) DEFAULT NULL,
  `date_created` date DEFAULT NULL,
  `foto_user` varchar(150) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=latin1;

INSERT INTO `users` (`id`, `first_name`, `last_name`, `username`, `password`, `email`, `date_created`, `foto_user`) VALUES
  (1, 'mohamad ', 'wildannudin', 'admin', '21232f297a57a5a743894a0e4a801fc3', 'wildannudin@gmail.com', '2015-01-26', 'pat.png');

CREATE TABLE IF NOT EXISTS `users` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`first_name` varchar(50) NOT NULL DEFAULT '0',

`last_name` varchar(50) NOT NULL DEFAULT '0',

`username` varchar(50) DEFAULT NULL,

`password` varchar(50) DEFAULT NULL,

`email` varchar(50) DEFAULT NULL,

`date_created` date DEFAULT NULL,

`foto_user` varchar(150) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=latin1;

INSERT INTO `users` (`id`, `first_name`, `last_name`, `username`, `password`, `email`, `date_created`, `foto_user`) VALUES

(1, 'mohamad ', 'wildannudin', 'admin', '21232f297a57a5a743894a0e4a801fc3', 'wildannudin@gmail.com', '2015-01-26', 'pat.png');

login.js

Berisi code untuk meng-handle form yang disubmit id=”form” , melakukan validasi apakah dan selanjutnya mengirim ajax post ke action url form

$(document).ready(function(){
  //lakukan validasi 
    $("#form").validate({
            rules: {
                username: {           //input name: fullName
                    required: true,   //required boolean: true/false  
                },
                  password: {           //input name: fullName
                    required: true,   //required boolean: true/false   
                },
            },
            messages: {
              username : {
                required: "Masukan username anda"
              },
              password: {
                required: "Masukan Password anda"
              }
            },
            
        errorClass: 'help-block',
        errorElement: 'span',
        highlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').removeClass('has-error').addClass('has-success');
        },
            submitHandler: function(form) {
              //tampilkan loading bar
                 $('.load').show();
                   $(form).ajaxSubmit({
                          type:"post",
                          url: $(this).attr('action'),
                          data: $(this).serialize(),
                         success: function(data){
                          //jika response diterima sembunyikan loading bar
                         $('.load').fadeOut();
                              if (data=='good') { 
                                //redirect jika berhasil login
                                window.location="./index.php/";
                              } else {
                                 $('.alert').fadeIn();
                              }
                      }
                    });
            }

        });  
//ketika tombol close notif di click, lakukan hide saja jangan di hapus element
 $("[data-hide]").on("click", function(){
        $(this).closest("." + $(this).attr("data-hide")).hide();
    });

  //untuk mengganti secara dinamis tampilan background halaman login
  $.backstretch([
      "img/2.jpg",
      "img/02.jpg",
      "img/3.jpg"
  ], {duration: 3000, fade: 1000});
  })

$(document).ready(function(){

//lakukan validasi

$("#form").validate({

rules: {

username: { //input name: fullName

required: true, //required boolean: true/false

password: { //input name: fullName

required: true, //required boolean: true/false

messages: {

username : {

required: "Masukan username anda"

password: {

required: "Masukan Password anda"

}

errorClass: 'help-block',

errorElement: 'span',

highlight: function(element, errorClass, validClass) {

$(element).parents('.form-group').removeClass('has-success').addClass('has-error');

unhighlight: function(element, errorClass, validClass) {

$(element).parents('.form-group').removeClass('has-error').addClass('has-success');

submitHandler: function(form) {

//tampilkan loading bar

$('.load').show();

$(form).ajaxSubmit({

type:"post",

url: $(this).attr('action'),

data: $(this).serialize(),

success: function(data){

//jika response diterima sembunyikan loading bar

$('.load').fadeOut();

if (data=='good') {

//redirect jika berhasil login

window.location="./index.php/";

} else {

$('.alert').fadeIn();

}

});

}

});

//ketika tombol close notif di click, lakukan hide saja jangan di hapus element

$("[data-hide]").on("click", function(){

$(this).closest("." + $(this).attr("data-hide")).hide();

});

//untuk mengganti secara dinamis tampilan background halaman login

$.backstretch([

"img/2.jpg",

"img/02.jpg",

"img/3.jpg"

], {duration: 3000, fade: 1000});

})

proses_login.php

buat file di folder inc/proses_login.php, file ini handle dari post yang dikirim form, serta check autentikasi ke database

<?php
session_start();
include "config.php";
	$data_post = array(
		'username'=>$_POST['username'],
		'password'=>md5($_POST['password'])
		);
		$check = $db->check_exist('users',$data_post);
		if ($check==true) {
                //jika true, query table user untuk mengambil value kolom id atau kolom di table users untuk dijadikan content session
                $data=$db->fetch_single_row('users','username',$_POST['username']);
			$_SESSION['id_user']=$data->id;
			$_SESSION['login']=1;
			echo "good";
		}	
?>

<?php

session_start();

include "config.php";

$data_post = array(

'username'=>$_POST['username'],

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

);

$check = $db->check_exist('users',$data_post);

if ($check==true) {

//jika true, query table user untuk mengambil value kolom id atau kolom di table users untuk dijadikan content session

$data=$db->fetch_single_row('users','username',$_POST['username']);

$_SESSION['id_user']=$data->id;

$_SESSION['login']=1;

echo "good";

}

index.php

Berisi file html dan php untuk halaman admin setelah login, jika belum login, redirect ke file login.php. Di halaman ini menampilkan profil user yang di ambil dari table users

<?php 
session_start();
include "inc/config.php";
//jika session kosong atau belum login, redirect ke halaman login
if (empty($_SESSION['login'])) {
    header("location:login.php");
}
?>
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Halaman Admin setelah login</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/simple.css" rel="stylesheet">
</head>

<body>

    <div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                       Admin Board
                    </a>
                </li>
                <li>
                    <a href="#">Profil</a>
                </li>
                <li>
                    <a href="logout.php">Logout</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                     <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                        <h1>Profil Users</h1>
                     <div class="box-body table-responsive no-padding">
                     <img src="img/pat.png" class="img-thumbnail" width="200">
                                    <table class="table table-hover">
<?php $data = $db->fetch_single_row('users','id',$_SESSION['id_user']); ?>
                                        <tbody>
                                        <tr>
                                            <th class="col-md-2">Username</th>
                                            <td><?=$data->username;?></td>
                                            </tr>
                                        <tr>
                                            <th>First Name</th>
                                             <td><?=$data->first_name;?></td>
                                          
                                            </tr>
                                        <tr>
                                            <th>Last Name</th>
                                             <td><?=$data->last_name;?></td>
                                          
                                            </tr>
                                        <tr>
                                            <th>Email</th>
                                              <td><?=$data->email;?></td>
                                          
                                            </tr>
                                    </tbody></table>
                                </div>
                       
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="js/jQuery-2.1.3.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Menu Toggle Script -->
    <script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
    </script>

</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

<?php

session_start();

include "inc/config.php";

//jika session kosong atau belum login, redirect ke halaman login

if (empty($_SESSION['login'])) {

header("location:login.php");

}

<!DOCTYPE html>

<head>

<title>Halaman Admin setelah login</title>

</head>

<body>

Admin Board

</a>

</li>

<li>

<a href="#">Profil</a>

</li>

<li>

<a href="logout.php">Logout</a>

</li>

</ul>

</div>

<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>

<h1>Profil Users</h1>

<?php $data = $db->fetch_single_row('users','id',$_SESSION['id_user']); ?>

<tbody>

<tr>

<th class="col-md-2">Username</th>

<td><?=$data->username;?></td>

</tr>

<tr>

<th>First Name</th>

<td><?=$data->first_name;?></td>

</tr>

<tr>

</tr>

<tr>

<th>Email</th>

<td><?=$data->email;?></td>

</tr>

</tbody></table>

</div>

</div>

$("#menu-toggle").click(function(e) {

e.preventDefault();

$("#wrapper").toggleClass("toggled");

});

</script>

</body>

</html>

login.php

Halaman login berisi html dan php, jika user telah login, redirect ke halaman index.php

<?php 
session_start();
if (isset($_SESSION['login'])) {
    header("location:index.php");
}
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax Login Php mysql</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.2 -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

     <link href="css/login.css" rel="stylesheet" type="text/css" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

  </head>
  <body class="login-page">
    <div class="login-box">
  
      <div class="login-logo">
        <a href="assets/index2.html"><b>Ajax</b> Login</a>
      </div><!-- /.login-logo -->    <div class="login-box-body">
<div class="img-div">
<img src="img/pat.png" />
</div>


<div class="load" style="display: none;"><img src="img/load.gif"><span class="txt">Please Wait</span></div>

<div class="alert alert-danger alert-dismissable" hidden="hidden">
<button type="button" class="close" data-hide="alert" aria-hidden="true">×</button>
<i class="icon fa fa-warning"></i> Username Or Password Incorrect</div>
        <form id="form" action="inc/proses_login.php" method="post">
          <div class="form-group has-feedback">
            <input type="text" name="username" class="form-control" placeholder="Username"/>
            <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
          </div>
          <div class="form-group has-feedback">
            <input type="password" class="form-control" name="password" placeholder="Password"/>
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
          </div>
          <div class="row">
       
            <div class="col-xs-12">
              <input type="submit" id="login" class=" btn btn-primary btn-block" value="Login">
            </div><!-- /.col -->
          </div>
        </form>

   
      </div><!-- /.login-box-body -->
       <div class="bawah">&nbsp;</div>
    </div><!-- /.login-box -->

    <!-- jQuery 2.1.3 -->
    <script src="js/jQuery-2.1.3.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
  <script type="text/javascript" src="js/jquery.backstretch.min.js"></script> 
  <script src="js/jqueryform.js"></script>
  <script src="js/validate.js"></script>
  <script src="js/login.js"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>

  </body>
</html>

<?php

session_start();

if (isset($_SESSION['login'])) {

header("location:index.php");

}

<!DOCTYPE html>

<html>

<head>

<title>Ajax Login Php mysql</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<a href="assets/index2.html"><b>Ajax</b> Login</a>

</div> <div class="login-box-body">

</div>

<div class="load" style="display: none;"><img src="img/load.gif"><span class="txt">Please Wait</span></div>

<i class="icon fa fa-warning"></i> Username Or Password Incorrect</div>

</div>

</div>

</div>

</div>

</form>

</div>

</div>

</body>

</html>

logout.php

hapus session dan direct ke halaman login

<?php
session_start();
session_destroy();
header("location:login.php");
?>

<?php

session_start();

session_destroy();

header("location:login.php");

Selesai sudah tutorial ajax login ini, Semoga bermanfaat untuk temen – temen yang sedang belajar php dan ajax. Wassalam.

Demo | Download File

6 Comments

banghaji

October 2, 2015 at 12:54 am

Assalaamu’alaikum wrwb..
Mantap mas tutorialnya, ana mohon ijin belajar ya…
Moga makin banyak ilmu yang bisa dibagikan, manfaat buat diri dan orang lain 😀
Salaam..

- wildan
  
  October 5, 2015 at 2:49 am
  
  Alaikumsalam, terimakasih mas. Insya Allah sebisa saya berbagi sesuai kemampuan saya
  
yuda

January 7, 2016 at 4:05 am

kalo mau dropdown yang berurutan gimana gan?

ramdan

February 3, 2016 at 8:46 am

wah pa,, meni mantap kieu yeuh jadi login teh teu kudu nga refresh ka luar… kren pak lanjutkan

Ziad

May 23, 2016 at 7:35 am

izin download mastah

I'm Wildan, Based in Indonesia, Bandung, I freelance for small businesses, start-ups, individuals, all over the world.

6 Comments

Leave a Comment. Cancel reply