Tutorial membuat login dengan modal + AJAX bootstrap ( PHP mySQL)

      Pada kesempatan kali ini saya akan membagikan tutorial membuat login dengan modal bootstrap + AJAX. Modal bootstrap adalah komponen dari framework bootstrap yang menampilkan sebuah div layaknya pop-up. Sedangkan AJAX ( Asynchronous Javascript and XMLHTTP)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.

Hasil akhir dari tutorial ini

Fase Pertama, Persiapan database :

CREATE TABLE `admin` (
  `id` int(11) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(2555) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `admin`
--

INSERT INTO `admin` (`id`, `username`, `password`) VALUES
(1, 'hanzkid', 'e10adc3949ba59abbe56e057f20f883e');

Penjelasannya yaitu query SQL tersebut akan membuat sebuah table bernama admin , dengan kolom id, username dan password. Untuk kolom id berisi data 1, kolom username berisi data hanzkid, kolom password berisi 123456( di md5 ).

Fase kedua , Pembuatan script PHP :

• Masukkan js core jQuery dan bootstrap kedalam script login anda.

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">

• Masukan css core bootstrap ke dalam script login anda.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

• Buat script modal login. ( Bisa dimodifikasi sesuka anda)

<div class="modal fade active" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
          <div class="modal-dialog">
                <div class="loginmodal-container">
                    <h1>Login admin</h1><hr/>
                  <form method="POST" action="" class="login">
                    <input type="text" name="user" placeholder="Username" id="username">
                    <input type="password" name="pass" placeholder="Password" id="password"><br />
                    <input type="submit" name="login" class="login loginmodal-submit" value="Login" id="login">
                  </form>
                  <span id="hasil"></span>
                </div>
            </div>
          </div>

•  Buatlah sebuah link untuk menampilkan modal form tersebut

<a href="" data-toggle="modal" data-target="#login-modal">Login</a>

 *data-target = id login modal pada script diatas

• Buat script javascript yang akan mengirimkan data form yang disubmit ke login.php

 $(document).ready(function(){
$("#hasil").css('display', 'none', 'important');
     $("#login").click(function(){ 
          username=$("#username").val();
          password=$("#password").val();
          $.ajax({
           type: "POST",
           url: "login.php",
           data: "username="+username+"&password="+password,
           success: function(html){   
            if(html==1)    {
             window.location = "admin.php";
            }
            else{
            $("#hasil").css('display', 'inline', 'important');
            $("#hasil").html("Username dan password salah");
            }
           },
           beforeSend:function()
           {
            $("#hasil").css('display', 'inline', 'important');
            $("#hasil").html(" Loading...")
           }
          });
        return false;
    });
});

* Javascript tersebut akan mengirimkan data POST ke file login.php yang berisi username dan password.

• Buat file login.php. File ini yang akan memproses data login user.

 <?php
session_start();
$konek = mysqli_connect("localhost","root","","tutoial");
$name = mysqli_escape_string($konek,$_POST['username']);
$pass = md5(mysqli_escape_string($konek,$_POST['password']));
$login = mysqli_query($konek,"SELECT * FROM admin where username = '$name' AND password = '$pass'") or die(mysqli_error($konek));
$check = mysqli_num_rows($login);
if ($check>0){
    $_SESSION['username'] = $_POST['username'];
    echo 1;
}
?>

 * Koneksi database pada localhost, user root, password kosong, dan menggunakan db tutorial
** Untuk meminimalisir SQLinjection maka digunakan mysqli_real_escape_string.
*** Agar password tidak telanjang bulat, dipakein md5. Kasihan kalo password telanjang bulat.

• Jika anda mengikuti step per step, pasti bisa :) . Semangat :)

Link demo menyusul

Tweet

Tutorial membuat login dengan modal + AJAX bootstrap ( PHP mySQL)

4/ 5

Oleh burhan

Ditulis burhan Pada 1:58:00 AM 2 Komentar