MEMBUAT FORM LOGIN MENGGUNAKAN TEMA BOOSTRAP DAN PHP

Membuat Form login dengan bootstrap

Langkah pertama

kita akan belajar membuat form login dengan bootstrap.

Unduh file bootstrap disini sebagai tema yang akan kita pakai. atau sobat bisa akses getboostrap.com untuk memilih tema yang diinginkan.
buatlah sebuah direktori dengan mengekstrak file boostrap hasil downloadan pada langkah satu di dalam htdocs dengan nama HTML dan isinya seperti gambar berikut .
Buatlah sebuah direktori di dalam htdocs dengan nama login-bootstrap isi seperti gambar berikut.

4. salin folder css, js, dan fonts-awesome, dan log yang berada di folder HTML yg sudah diekstrak sebelumnya ke folder on-admin pada direktori login-bootstap

Langkah kedua :

Buka file login.php dan isikan dengan script berikut. Dan untuk mendalami bagaimana cara menggunakan bootstrap dengan php kalian bisa mempelajarinya di cara menggunakan bootstrap dan untuk memahami system grid atau layouting kalian bisa membaca belajar bootstrap grid system.

<!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">
    <title>Halaman Login</title>

    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="col-md-4 col-md-offset-4 form-login">
    
    <?php
    /* handle error */
    if (isset($_GET['error'])) : ?>
        <div class="alert alert-warning alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <strong>Warning!</strong> <?=base64_decode($_GET['error']);?>
        </div>
    <?php endif;?>

        <div class="outter-form-login">
        <div class="logo-login">
            <em class="glyphicon glyphicon-user"></em>
        </div>
            <form action="check-login.php" class="inner-login" method="post">
            <h3 class="text-center title-login">Login Member</h3>
                <div class="form-group">
                    <input type="text" class="form-control" name="username" placeholder="Username">
                </div>

                <div class="form-group">
                    <input type="password" class="form-control" name="password" placeholder="Password">
                </div>
                
                <input type="submit" class="btn btn-block btn-custom-green" value="LOGIN" />
                
                <div class="text-center forget">
                    <p>Forgot Password ?</p>
                </div>
            </form>
        </div>
    </div>

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

Perhatikan pada tag komentar /* handel error */ dibawah tag tersebut merupakan component Alert dari bootstrap yang dimodifikasi dengan PHP.

nah jika sudah, kalian bisa mengeceknya dengan mengakses localhost/login-bootstrap/login.php melalui browser kalian.

lho kenapa kok tidak langsung dengan localhost/login-bootstrap saja ? ya karena file index.php belum ada, karena file index.php belum ada maka jika kita akses dengan localhost/login-bootstrap maka akan tampak seperti berikut :

bagaimana ? jelek bukan…

nah sekarang kita buat file index.php dan isi dengan script berikut :

session_start();

if ( isset($_SESSION['user_login']) && $_SESSION['user_login'] != '' ) {

    $halaman = $_SESSION['user_login'];

    header('location:on-'. $halaman);

    exit();

} else {

    header('location:login.php');

    exit();

}

view raw

di dalam file index.php terdapat fungsi pengkondisian (if) yang akan mengecek apakah user sudah login atau belum dengan benar yakni (isset($_SESSION[‘user_login’]) && $_SESSION[‘user_login’] != ”

Jika kondisi diatas bernilai TRUE maka kita akan diarahkan sesuai nilai $_SESSION['user_login'], $_SESSION['user_login'] $_SESSION['user_login'] memiliki dua nilai yaitu admin dan member. Akan bernilai admin jika yang login adalah admin dan bernilai member jika yang login adalah member.

Sehingga, jika dia login sebagai admin maka secara otomatis dia akan dibawa ke folder “on-admin” begitu juga ketika dia login sebagai member maka dia akan dibawa ke halaman “on-member/index.php”.

dan jika dia belum login dia akan dibawa kehalaman login.php.

ingat nama folder samakan jika tidak dapat mempengaruhi kinerja sistem login ini :D.

Langkah Ketiga :

Pada langkah ketiga kita akan membuat fungsi cek login dengan membuat file check-login.php. Disini kita menggunakan php mysqli prepare statement yang mana prepare statement ini diklaim cukup ampuh dalam menahan SQL Injection dan kita akan menambahkan hash md5 untuk meningkatkan keamanan password. berikut scriptnya :

<?php
session_start();
require 'config.php';

if ( isset($_POST['username']) && isset($_POST['password']) ) {
    
    $sql_check = "SELECT nama, 
                         level_user, 
                         id_user 
                  FROM users 
                  WHERE 
                       username=? 
                       AND 
                       password=? 
                  LIMIT 1";

    $check_log = $dbconnect->prepare($sql_check);
    $check_log->bind_param('ss', $username, $password);

    $username = $_POST['username'];
    $password = md5( $_POST['password'] );

    $check_log->execute();

    $check_log->store_result();

    if ( $check_log->num_rows == 1 ) {
        $check_log->bind_result($nama, $level_user, $id_user);

        while ( $check_log->fetch() ) {
            $_SESSION['user_login'] = $level_user;
            $_SESSION['sess_id']    = $id_user;
            $_SESSION['nama']       = $nama;
            
        }

        $check_log->close();

        header('location:on-'.$level_user);
        exit();

    } else {
        header('location: login.php?error='.base64_encode('Username dan Password Invalid!!!'));
        exit();
    }

   
} else {
    header('location:login.php');
    exit();
}

view raw

Perhatikan tanda tanya (?) pada syntax SQL diatas merupakan salah satu tanda kita menggunakan prepare statement.

kemudian (ss) pada $check_log->bind_param() , (ss) tersebut diartikan bahwa data yang kita masukan untuk username dan password bertipe “string”, kita bisa memasukan type data lain seperti

– i untuk integer

– s untuk string

– b untuk blob

– d untuk double

bind_param() sendiri berfungsi untuk memastikan tipe data dan data yang kita masukan sama atau tidak.

Kemudian perhatikan $_SESSION itu adalah cara kita menyimpan sesi login untuk memastikan kita sudah login atau belum.

Langkah keempat :

Fungsi check-login.php diatas tidak akan fungsi sebelum ada perintah koneksi ke database. lho kenapa ? karena dalam fungsi check-login.php kita perlu mencocokkan data user yang dimasukkan atau inputkan saat login dengan data yang berada di dalam database dalam hal ini adalah ini username dan password. berikut scrip koneksinya.

<?php

define('DBHOST', 'localhost');
define('DBUSER', 'root');
define('DBPASS', '');
define('DBNAME', 'mhs');

/**
 * $dbconnect : koneksi kedatabase
 */
$dbconnect = new mysqli(DBHOST, DBUSER, DBPASS, DBNAME);

/**
 * Check Error yang terjadi saat koneksi
 * jika terdapat error maka die() // stop dan tampilkan error
 */
if ($dbconnect->connect_error) {
 die('Database Not Connect. Error : ' . $dbconnect->connect_error);
}

view raw

Perlu diketahui bahwa kita menggunakan mysqli oop ( object oriented program ) hal ini ditunjukkan dengan “new” dan “->” yang ada di script diatas.

Langkah kelima :

pada langkah kelima ini kita akan membuat database untuk form login. Masukanlah localhost/phpmyadmin dan buat database sesuai dengan nilai DBNAME pada langkah keempat. buat database seperti berikut.

Langkah keenam :
Selanjutnya kita akan mengisi folder on-admin dan on-member agar terlihat perbedaan antara admin yang login dan member.

buat file index.php didalam folder on-admin dan isi dengan script berikut :

<!DOCTYPE html>

<?php

include "config.php";

?>

<html lang="en">

<head>

<title>Dashboard</title>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="css/bootstrap.min.css" />

<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />

<link rel="stylesheet" href="css/fullcalendar.css" />

<link rel="stylesheet" href="css/matrix-style.css" />

<link rel="stylesheet" href="css/matrix-media.css" />

<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />

<link rel="stylesheet" href="css/jquery.gritter.css" />

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>

</head>

<body>

<!--Header-part-->

<div id="header">

  <h1><a href="dashboard.html">Matrix Admin</a></h1>

</div>

<!--close-Header-part-->

<!--top-Header-menu-->

<div id="user-nav" class="navbar navbar-inverse">

  <ul class="nav">

    <li  class="dropdown" id="profile-messages" ><a title="" href="#" data-toggle="dropdown" data-target="#profile-messages" class="dropdown-toggle"><i class="icon icon-user"></i>  <span class="text">Welcome User</span><b class="caret"></b></a>

      <ul class="dropdown-menu">

          <li><a href="./../login.php"><i class="icon-key"></i> Log Out</a></li>

      </ul>

    </li>

</div>

<!--close-top-Header-menu-->

<!--start-top-serch-->

<div id="search">

  <input type="text" placeholder="Search here..."/>

  <button type="submit" class="tip-bottom" title="Search"><i class="icon-search icon-white"></i></button>

</div>

<!--close-top-serch-->

<!--sidebar-menu-->

<div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-home"></i> Dashboard</a>

  <ul>

    <li class="active"><a href="index.php"><i class="icon icon-home"></i> <span>Dashboard</span></a> </li>

    <li><a href="tambahdata.php"><i class="icon icon-th"></i> <span>Tambah Data</span></a></li>
 <li><a href="datauser.php"><i class="icon icon-th"></i> <span>Data Mahasiswa</span></a></li>

</div>

<!--sidebar-menu-->

<!--main-container-part-->

<div id="content">

<!--breadcrumbs-->

  <div id="content-header">

    <div id="breadcrumb"> <a href="index.php" title="Go to Home" class="tip-bottom"><i class="icon-home"></i>dashboard</a></div>

  </div>

  <h2><center>SELAMAT DATANG ADMIN</center></h2>

<!--End-breadcrumbs-->

<!--Action boxes-->

  <div>

</div>

<!--end-main-container-part-->

<!--Footer-part-->

<div class="row-fluid">

  <div id="footer" class="span12"> 2013 &copy; Matrix Admin. Brought to you by <a href="http://themedesigner.in">Themedesigner.in</a> </div>

</div>

<!--end-Footer-part-->

<script src="js/excanvas.min.js"></script>

<script src="js/jquery.min.js"></script>

<script src="js/jquery.ui.custom.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.flot.min.js"></script>

<script src="js/jquery.flot.resize.min.js"></script>

<script src="js/jquery.peity.min.js"></script>

<script src="js/fullcalendar.min.js"></script>

<script src="js/matrix.js"></script>

<script src="js/matrix.dashboard.js"></script>

<script src="js/jquery.gritter.min.js"></script>

<script src="js/matrix.interface.js"></script>

<script src="js/matrix.chat.js"></script>

<script src="js/jquery.validate.js"></script>

<script src="js/matrix.form_validation.js"></script>

<script src="js/jquery.wizard.js"></script>

<script src="js/jquery.uniform.js"></script>

<script src="js/select2.min.js"></script>

<script src="js/matrix.popover.js"></script>

<script src="js/jquery.dataTables.min.js"></script>

<script src="js/matrix.tables.js"></script>

<script type="text/javascript">

  // This function is called from the pop-up menus to transfer to

  // a different page. Ignore if the value returned is a null string:

  function goPage (newURL) {

      // if url is empty, skip the menu dividers and reset the menu selection to default

      if (newURL != "") {

          // if url is "-", it is this page -- reset the menu:

          if (newURL == "-" ) {

              resetMenu();           

          }

          // else, send page to designated URL           

          else { 

            document.location.href = newURL;

          }

      }

  }

// resets the menu selection upon entry to this page:

function resetMenu() {

   document.gomenu.selector.selectedIndex = 2;

}

</script>

</body>

</html>

view raw

buat file index.php didalam folder on-member dan isi dengan script berikut :

<?php
session_start();
/**
 * Jika Tidak login atau sudah login tapi bukan sebagai admin
 * maka akan dibawa kembali kehalaman login atau menuju halaman yang seharusnya.
 */
if ( !isset($_SESSION['user_login']) || 
    ( isset($_SESSION['user_login']) && $_SESSION['user_login'] != 'member' ) ) {
 header('location:./../login.php');
 exit();
}
?>
<h2>Hallo Member <?=$_SESSION['nama'];?> Apakabar ?</h2>
<a href="./../logout.php">Logout</a>

view raw

Perhatikan$_SESSION merupakan tempat penyimpanan sementara dan bisa kita manfaatkan untuk menampilkan nama, level, dan id_user yang sedang login (bisa dilihat di langkah ketiga di dalam script tentang $_SESSION) yang sudah disesuaikan dengan database.

Langkah ketujuh : dapat kita lihat bersama bahwa di halaman admin maupun member terdapat tombol logoutkan.. nah dilangkah ketujuh kita akan membuat script logout .

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

view raw

session_start() bertugas memulai/load session dan tanpa fungsi session_start() kita tidak bisa menggunakan $_SESSION. Sedangkan session_destroy() adalah menghapus session yang sudah kita buat saat berada di file check-login.php lalu kita akan dibawa ke halaman login lagi.

langakah diatas baru membuat untuk kegiatan login, logout dan koneksi database saja. karena disini kita akan melink kannya dengan tema dari boostrap yang didwonload sebelumnya. maka silahkan ikuti langkah selanjutnya.

langkah kedelapan :

Buka folder on-admin dalam folder Login-boostrap , kemudian buat file php seperti dibawah ini. jika sebelumnya kita telah membuat file index.php pada masing-masing folder on-admin dan on-member. maka gunakanlah script index yang sekarang.

1.buka masing-masing file .php yang berada dalam folder on-admin yang telah dibuat sebelumnya kemudian masukan scripnya masing-masing dengan script yang telah saya sediakan. untuk scripnya dapat kalian download disini. silahkan kalian masukan masing-masing scripnya . contoh file index.php isi scripnya kalian masukan pada file index.php yang sebelumnya kalian bikin.

langkah kesembilan :

jika semua scrip sudah dimasukan maka tinggal kalian cek dengan cara ketik "localhost/login-boostrap" .

maka jika dijalankan akan tampil seperti berikut :

jika kita masukan username member dan paswoord member maka sesi setelah login akan diarahkan ke index member jika kita masukan username admin dan password admin maka sesi selanjutnya akan diarahkan ke index admin.

berikut tampilan saya login menggunakan akun admin. karena yg akun member index dan lain-lainnya belum saya buat. berikut tampilannya.

jika menu tambah siswa di klik maka tampilannya seperti berikut .

jika menu data mahasiswa di klik,maka tampilannya sebagai berikut.

jika kita klik tambah siswa pada tabel diatas maka akan diarah ke menu tambah siswa. dan jika kita sudah submit tambah siswa maka data akan bertambah contoh : saya menambahkan data kosong. berikut hasilnya.

jika kita klik tombol hapus pada tabel maka data akan terhapus, berikut hasilnya.

data dengan id 22 sudah terhapus.

selanjutnya..

jika kita klik tombol edit pada tabel maka data yg dipilih akan di edit. contoh disini saya edit data dengan nama Nenf Lusi Virgianti menjasi Neng Lusi. berikut hasilnya.

dan hasilnya data berubah, seperti berikut.

terakhir jika kita tekan tombol logoutt maka akan diarahkan ke halaman login kmbali. berikut gambarnya.

hasilnya

Oke demikian tutorial membuat form login php dengan bootstrap kalian bisa mendapatkan script fullnya di sini.. untuk login-boostraonya saja namun jika kalian ingin versi lengkap scrip,sql dll. silahkan tulis komentar dan cantumkan email kalian. nanti saya akan kirim via email.

jika ada error atau pertanyaan bisa kalian tinggalkan di kolom komentar. atau kontak email langsung.

untuk user dan password

admin [user : admin, pass: admin]
member [user:member, pass: member]

sekian dan selamat belajar semoga bermanfaat.

Search This Blog

TUTORIAL

MEMBUAT FORM LOGIN MENGGUNAKAN TEMA BOOSTRAP DAN PHP

Membuat Form login dengan bootstrap

Comments

Post a Comment

Popular posts from this blog

CARA MENGKONEKSIKAN DATABASE AGAR MUNCUL DI WEB BROWSER MENGGUNAKAN XAMPP DAN PHPMYADMIN

LANGKAH-LANGKAH MEMBUAT FORM LOGIN

	<?php
	session_start();
	/**
	* Jika Tidak login atau sudah login tapi bukan sebagai admin
	* maka akan dibawa kembali kehalaman login atau menuju halaman yang seharusnya.
	*/
	if ( !isset($_SESSION['user_login']) \|\|
	( isset($_SESSION['user_login']) && $_SESSION['user_login'] != 'member' ) ) {

	header('location:./../login.php');
	exit();
	}
	?>
	<h2>Hallo Member <?=$_SESSION['nama'];?> Apakabar ?</h2>

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

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