CARA MEMBUAT LOGIN DENGAN JQUERY BOOTSTRAP

Hallo Pembaca,
Selanjutnya saya akan membahas bagaimana cara membuat Login Page menggunakan JQuery dan Tampilan Bootstrap. Seperti biasa, sebelum kita mulai membuat desain formnya kita buat dulu database, kali ini saya menggunakan nama data
base "dbbos" buatlah tabel dengan field dengan struktur seperti gambar dibawah ini :
setelah kita buat tabel dan databasenya kita buat koneksinya, saya menggunakan class database yang sudah pernah kita buat atau kita bahas sebelumnya, pastikan anda sudah membaca  MEMBUAT CLASS UNTUK CRUD DATABASE PHP-MYSQL ( Bagian 1 ) Ok, sekarang kita mulai rubah pada setingan koneksinya, perhatikan skrip dibawah ini :
---------------------------------------------------------------------------------------------------------------------------------
   private $db_host = "localhost";
    private $db_user = "root";
    private $db_pass = "";
    private $db_name = "dbbos";   

---------------------------------------------------------------------------------------------------------------------------------
 Setelah kita rubah koneksi databasenya kita lanjut membuat skrip Form Loginnya, ada beberapa komponen yang dibutuhkan disini, yaitu Skrip JQuery (.js) dan CSS Bootstrap untuk desain interfacenya, dan juga ada beberapa komponen CSS lainnya yang nanti anda bisa ambil file seluruhnya atau file lengkapnya di sesi akhir. Yang akan saya tulis disini nantinya hanyalah skrip login dan prosesnya. Langsung saja sekarang kita buat skrip loginnya berinama "login.php", perhatikan skrip dibawah ini :
---------------------------------------------------------------------------------------------------------------------------------
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Selamat Datang Sistem BOS</title>
    <link href="css/bootstrap-cerulean.css" id="bs-css" rel="stylesheet">
    <link href="css/charisma-app.css" rel="stylesheet">
    <link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet">
    <link href="img/logo.png"rel="shortcut icon" >
        <style type="text/css">
      body {
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
    </style>
</head>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script src="js/charisma.js"></script>
<script src="js/jquery-latest.js"></script>
<script>
$(document).ready(function() {
    $("#tombollogin").click(function() {
  
        var aksilogin = $("#frmlogin").attr('action');
        var datalogin = {
            username: $("#username").val(),
            password: $("#password").val()
        };
      
        $.ajax({
            type: "POST",
            url: aksilogin,
            data: datalogin,
            success: function(aksi){
                if(aksi == '1')
                    $("#frmlogin").slideUp('slow', function() {
                        $("#hasil").html("<p class='berhasil' align='center'>Anda Berhasil Login<br>Halaman sedang dialihkan</p>");
                        setTimeout("location.href='system.php?page=home'", 3000);
                    });
                else
                    $("#frmlogin").slideUp('slow', function() {
                        $("#hasil").html("<p class='gagal' align='center'>Pengguna tidak ditemukan, <br> <a onClick=buka(); style='cursor:pointer;'>Ulangi Lagi<a></p>");  
                  });
                document.frmlogin.username.value = "";
                document.frmlogin.password.value = "";
            }
        });
        return false;
    });
  
});

function buka(){
    $('#frmlogin').slideDown();
}
</script>

<body>
    <div id="konten">
          <div class="row-fluid">
            <div class="span12 center login-header">
                  <h2>MTs Raden Sahid Mangunan Lor</h2>
            </div>
          </div>
          <div class="row-fluid">
            <div class="well span5 center login-box">
                  <div class="alert alert-info">
                    <div id="hasil"></div>
                    Silahkan login dengan  Username and Password.
                </div>
                  <form class="form-horizontal" id="frmlogin" name="frmlogin" action="ceklogin.php" method="post">
                    <fieldset>
                          <div class="input-prepend" title="Username" data-rel="tooltip"> <span class="add-on"><i class="icon-user"></i></span>
                            <input name="username" type="text" class="input-large span10" id="username" autofocus />
                          </div>
                          <div class="clearfix"></div>
                          <div class="input-prepend" title="Password" data-rel="tooltip"> <span class="add-on"><i class="icon-lock"></i></span>
                            <input name="password" type="password" class="input-large span10" id="password" />
                          </div>
                          <p class="center span5">
                            <button type="submit" class="btn btn-primary" id="tombollogin">Login</button>
                          </p>
                    </fieldset>
                  </form>
            </div>
        </div>
      </div>
</div>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------  
Tampilannya seperti dibawah ini :
Setelah kita buat desain Formnya kita buat file prosesnya, silahkan buat dan beri nama "ceklogin.php". Untuk skrip lengkapnya ada bisa lihat dibawah ini :


---------------------------------------------------------------------------------------------------------------------------------  
<?php
include('lib/config.php');
$db = new Database();
$db->connect();
function antiinjection($data){
  $filter_sql = mysql_real_escape_string(stripslashes(strip_tags(htmlspecialchars($data,ENT_QUOTES))));
  return $filter_sql;
}

$username = antiinjection($_POST['username']);
$pass     = antiinjection($_POST['password']);

$login=mysql_query("SELECT * FROM tblpetugas WHERE username='$username' AND password='$pass'");
$ketemu=mysql_num_rows($login);
$r=mysql_fetch_array($login);

if ($ketemu > 0){
  session_start();
  session_register("username");
  session_register("nama");
  session_register("password");

  $_SESSION[username]         = $r[username];
  $_SESSION[nama]              = $r[nama];
  $_SESSION[password]         = $r[password];
 
    echo "1";}
else{
    echo "2";}
?>
---------------------------------------------------------------------------------------------------------------------------------  
Selesai sudah, sekarang silahkan coba dengan web browser anda, dan login sesuai dengan dangan yang ada di tabel database. apabila berhasil maka halaman akan dialihkan ke halaman yang dituju, dan apabila pengguna tidak ditemukan maka akan muncul peringatan pengguna tidak ditemukan dan silahkan ulangi lagi. Seperti gambar dibawah ini :

Untuk skrip lengkapnya ada bisa ambil disini.

Terimakasih
Selamat Belajar.

0 Response to "CARA MEMBUAT LOGIN DENGAN JQUERY BOOTSTRAP"

Post a Comment