Membuat Login AjaX Menggunakan PHP dan MySQLi Dengan Bootstrap
Software Engineering Enthusiast | Blogger | Creator of RubyPedia.com
20 Oktober 2017

Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif.

Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability.

Pada tutorial kali ini kita akan coba mengimplementasikan AjaX dengan PHP sebagain server sidenya dan MySQL sebagai databasenya kemudian Bootstrap sebagai tampilannya, pada studi kasus kali ini kita akan belajar bersama-sama Bagaimana "Cara Membuat Login AJaX Menggunakan PHP dan MySQL dengan Bootstrap".

Apa saja yang akan kita buat ? berikut listnya :

  • index.php sebagai tampilan awal sekaligus sebagai tampilan loginnya.
  • koneksi.php file ini digunakan untuk menghubungkan PHP kita dengan database MySQL.
  • style.css yaitu sebagai pengatur tampilan dari aplikasi yang akan kita buat nanti.
  • login_proses.php merupakan file yang bertugas untuk pengecekan data dari database.
  • dashboard.php yaitu file dimana ketika kita berhasil login, maka halaman inilah yang akan kita tampilkan.
  • logout.php file yang digunakan ketika kita akan keluar dari aplikasi kita.

Oke langsung saja, buatlah sebuah folder baru di htdocs (jika menggunakan xampp), selanjutnya beri nama folder tersebut dengan login-ajax, terus buatlah beberapa file berikut ini di dalam folder tersebut:

  • index.php
  • koneksi.php
  • style.css
  • login_proses.php
  • dashboard.php
  • logout.php

Pertama buatlah sebuah database baru di http://localhost/phpmyadmin dan beri nama database tersebut dengan login-ajax selanjutnya import kode berikut ini:

-- MySQL dump 10.13  Distrib 5.6.22, for osx10.8 (x86_64)
--
-- Host: localhost    Database: belajar-php-mysql
-- ------------------------------------------------------
-- Server version   5.7.17

/*!40101 SET @[email protected]@CHARACTER_SET_CLIENT */;
/*!40101 SET @[email protected]@CHARACTER_SET_RESULTS */;
/*!40101 SET @[email protected]@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
/*!40103 SET @[email protected]@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @[email protected]@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @[email protected]@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @[email protected]@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @[email protected]@SQL_NOTES, SQL_NOTES=0 */;

--
-- Table structure for table `tbl_users`
--

DROP TABLE IF EXISTS `tbl_users`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `tbl_users` (
  `id_user` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(100) NOT NULL,
  `password` varchar(100) NOT NULL,
  `nama` varchar(100) NOT NULL,
  PRIMARY KEY (`id_user`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `tbl_users`
--

LOCK TABLES `tbl_users` WRITE;
/*!40000 ALTER TABLE `tbl_users` DISABLE KEYS */;
INSERT INTO `tbl_users` VALUES (1,'[email protected]','21232f297a57a5a743894a0e4a801fc3','Fika Ridaul Maulayya');
/*!40000 ALTER TABLE `tbl_users` ENABLE KEYS */;
UNLOCK TABLES;
/*!40103 SET [email protected]_TIME_ZONE */;

/*!40101 SET [email protected]_SQL_MODE */;
/*!40014 SET [email protected]_FOREIGN_KEY_CHECKS */;
/*!40014 SET [email protected]_UNIQUE_CHECKS */;
/*!40101 SET [email protected]_CHARACTER_SET_CLIENT */;
/*!40101 SET [email protected]_CHARACTER_SET_RESULTS */;
/*!40101 SET [email protected]_COLLATION_CONNECTION */;
/*!40111 SET [email protected]_SQL_NOTES */;

-- Dump completed on 2017-10-20 15:48:12

Jika berhasil maka akan tampil kurang lebih seperi gambar berikut ini:

Selanjutnya buka file index.php dan masukkan dan simpan kode berikut ini:

<!DOCTYPE html>
<!--
/*
@package : Login PHP dan Mysqli
@author  : Fika Ridaul Maulayya
@since   : 2016
@license : https://www.rubypedia.com
*/
-->
<html>
<head>
    <title>Login Ajax - PHP dan MySqli</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" style="margin-top: 50px">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-md-offset-4">
            <h1 class="text-center login-title">Sign in account</h1>
            <div class="account-wall">
                <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
                    alt="">    
                <form class="form-signin" method="POST" id="login-form">
                <input type="text" class="form-control" name="user_email" placeholder="Email" autofocus>
                <input type="password" name="password" class="form-control" placeholder="Password">
                <button class="btn btn-lg btn-primary btn-block" name="btn-login" id="btn-login" type="submit">
                    Sign in</button>
                <label class="checkbox pull-left">
                    <input type="checkbox" value="remember-me">
                    Remember me
                </label>
                <a href="#" class="pull-right need-help">Need help? </a><span class="clearfix"></span>
                </form>
            </div>
            <a href="#" class="text-center new-account">Create an account </a>
            <div id="error" style="margin-top: 10px"></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script>
    $('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 
           });  

       function submitForm()
       {  
       var data = $("#login-form").serialize();

       $.ajax({

       type : 'POST',
       url  : 'login_proses.php',
       data : data,
       beforeSend: function()
       { 
        $("#error").fadeOut();
        $("#btn-login").html('<span class="glyphicon glyphicon-transfer"></span>   sending ...');
       },
       success :  function(response)
          {      
         if(response == "ok"){

          $("#btn-login").html('<img src="https://github.com/maulayyacyber/phantom0308/raw/master/btn-ajax-loader.gif" />   Signing In ...');
          setTimeout(' window.location.href = "dashboard.php"; ',4000);
         }
         else{

          $("#error").fadeIn(1000, function(){   

          $("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span>   alamat email atau password salah!.</div>');
               $("#btn-login").html('<span class="glyphicon glyphicon-log-in"></span>   Sign In');

           });
          }
         }
       });
        return false;
      }
    });
</script>
</body>
</html>

Selanjutnya buka file koneksi.php masukkan dan simpan kode berikut ini:

<?php
/*
@package : Login PHP dan Mysqli
@author  : Fika Ridaul Maulayya
@since   : 2016
@license : https://www.rubypedia.com
*/
//membuat deklarasi variable
$hostname = "localhost";
$username = "root";
$password = "";
$database = "login-ajax"; //sesuaikan dengan password MySQL kalian
//create variable connectin
$connection = mysqli_connect($hostname, $username, $password, $database);
//checking connection
if(!$connection)
  {

    echo "Koneksi Gagal! : " . mysqli_connect_error();

  }else{

    //echo "Koneksi Berhasil!";

  }

 ?>

Selanjutnya buka file login_proses.php masukkan dan simpan kode berikut ini:

<?php
/*
@package : Login PHP dan Mysqli
@author  : Fika Ridaul Maulayya
@since   : 2016
@license : https://www.rubypedia.com
*/
session_start();

require_once('koneksi.php');

 if(isset($_POST['btn-login']))
 {

  $email    = $_POST['user_email'];
  $password = md5($_POST['password']);

  $query  = "SELECT * FROM tbl_users WHERE email='$email' AND password='$password'";
  $result = mysqli_query($connection,$query)or die(mysqli_error());
  $num_row = mysqli_num_rows($result);
  $row     = mysqli_fetch_array($result);

  if( $num_row >=1 ) {

    echo "ok"; // log in

    $_SESSION['logged_in'] = $row['id_user'];

  }else {

    echo "alamat email atau password salah!.";

  }

 }

?>

Setelah itu buka file style.css masukkan dan simpan kode berikut ini:

.form-signin
{
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox
{
    margin-bottom: 10px;
}
.form-signin .checkbox
{
    font-weight: normal;
}
.form-signin .form-control
{
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus
{
    z-index: 2;
}
.form-signin input[type="text"]
{
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"]
{
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.account-wall
{
    margin-top: 20px;
    padding: 40px 0px 20px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title
{
    color: #555;
    font-size: 18px;
    font-weight: 400;
    display: block;
}
.profile-img
{
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.need-help
{
    margin-top: 10px;
}
.new-account
{
    display: block;
    margin-top: 10px;
}

Selanjutnya buka file dashboard.php masukkan dan simpan kode berikut ini:

<?php
session_start();

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

require_once ('koneksi.php');

$session = $_SESSION['logged_in'];

$query  = "SELECT * FROM tbl_users WHERE id_user = '$session'";
$result = mysqli_query($connection,$query)or die(mysqli_error());
$row     = mysqli_fetch_array($result);

?>

<!DOCTYPE html>
<!--
/*
@package : Login PHP dan Mysqli
@author  : Fika Ridaul Maulayya
@since   : 2016
@license : https://www.rubypedia.com
*/
-->
<html>
<head>
    <title> Dashboard - Login Ajax PHP dan MySqli</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-inverse 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="#">Login Ajax - PHP dan MySQLi</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <div class="navbar-form navbar-right">
                <a href="logout.php" type="submit" class="btn btn-success"><i class="fa fa-sign-out"></i> Logout</a>
            </div>
      </div>
    </nav>
<div class="container" style="margin-top: 80px">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group">
              <a href="#" class="list-group-item active" style="text-align: center;background-color: black;border-color: black">
                ADMINISTRATOR
              </a>
              <a href="dashboard.php" class="list-group-item"><i class="fa fa-dashboard"></i> Dashboard</a>
              <a href="#" class="list-group-item"><i class="fa fa-book"></i> Blog</a>
              <a href="#" class="list-group-item"><i class="fa fa-folder"></i> Kategori</a>
              <a href="#" class="list-group-item"><i class="fa fa-comments-o"></i> Komentar</a>
              <a href="logout.php" class="list-group-item"><i class="fa fa-sign-out"></i> Logout</a>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-dashboard"></i> Dashboard</h3>
              </div>
              <div class="panel-body">
                Selamat Datang <b><?php echo $row['nama'] ?></b> di halaman Administrator System
              </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Oke untuk yang terakhir buka file logout.php kemudian masukkan dan simpan kode berikut ini:

<?php
/*
@package : Login PHP dan Mysqli
@author  : Fika Ridaul Maulayya
@since   : 2016
@license : https://www.rubypedia.com
*/
session_start();
unset($_SESSION['logged_in']);

if(session_destroy())
{
  header("Location: index.php");
}

?>

Selanjutnya, jalankan program kalian dengan mengetikkan di address bar browser http://localhost/login-ajax, maka kalian akan melihat kurang lebih tampilanya seperti berikut ini:

Kita coba masukkan dengan alamat email dan password salah, maka tampilannya akan seperti berikut ini:

Kemudian jika berhasil login, maka kalian akan melihat kurang lebih tampilan dashboardnya seperti berikut ini:

Untuk mendownload source codenya, kalian bisa mengunduhnya di https://github.com/maulayyacyber/login-ajax-php-mysqli

Blog ini telah dibaca sebanyak 2413 kali
PHP Ajax MySQLi MySQL Login Boosttrap PHP dan MySQLi

Sekilas Tentang Penulis

Fika Ridaul Maulayya
Software Engineering Enthusiast | Blogger | Creator of RubyPedia.com

KOMENTAR

blog comments powered by Disqus