Cara Membuat Form Login Modal Dengan Menggunakan Bootstrap

MP4U - Cara Membuat Form Login Modal Dengan Menggunakan Bootstrap - Hallo guys selamat dini hari dan selamat berkunjung kembali di blog MP4U, setelah semalam membahas dan berbagi mengenai Cara Membuat Form Login Responsive menggunakan Bootstrap, di kesempatan inipun masih membahas hal serupa yaitu cara pembuatan form login, lebih tepat nya akan membahas Cara Membuat Form Login Modal Dengan Menggunakan Bootstrap, untuk ulasan selengkapnya, silahkan sobat lanjutkan membacanya dibawah ini...

OK Next... Membuat Form Login dengan PHP memang sangat menarik untuk terus dibahas... selain itu Form login atau halaman login adalah sebuah fitur yang sangat penting dan harus dimiliki oleh setiap website untuk membedakan antara pengunjung website dan admin atau pengurus website, dimana Admin bertugas mengatur konten - konten yang akan dilihat oleh para pengunjung jadi jangan sampai tercampur...

Untuk sementara kita kesampingkan dulu masalah tercampurnya pengujung dan admin diatas, sebab kita akan fokus dalam membuat form login dengan bootstrap modal yang akan kita bahas pada tutorial ini...

Dan jika sahabat MP4U ingin melihat - lihat dan ingin membuat form login dengan cara lainnya, bisa cek pada postingan sebelumnya, mengenai :

Seperti yang saya katakan diatas bahwa membahas tentang form login itu mengasyikan dan ditutorial ini beda dengan tutorial membuat form login sebelum - sebelumnya kenapa ?... karena pada tutorial - tutorial sebelumnya kita selalu membuat form login dihalaman khusus atau tersendiri dan ditutorial ini kita akan membuat form login berada dalam satu halaman dengan halaman home atau depan dengan memanfaatkan Bootstrap Modal..

#Step 1 : Cara Membuat Form Login Modal Dengan Menggunakan Bootstrap

OK Next... Namun sebelum kita melanjtkan disini saya asumsikan sobat sudah bisa menggunakan atau mengimplementasikan bootstrap pada file berekstensi PHP dan sudah bisa menggunakan PHP di XAMPP, dan jika memang sobat belum bisa mencoba, bisa untuk mengikuti video tutorial Membuat Template Web dengan Bootstrap atau Membuat Form Login dengan Bootstrap kalian akan dijelaskan bagaimana mengimplementasikan bootstrap di file PHP dan menggunakan XAMPP

Langkah Pertama : Buatlah Database dengan nama bootstrap melalui localhost/phpmyadmin kemudian import dengan cara save as Kode SQL ini lalu import sebagai file sql...

Langkah Kedua : 1. Buatlah Folder baru di htdocs dengan nama “form-login“
2. Didalam folder form-login buatlah file config.php, index.php, admin.php, check-login.php, logout.php dan folder assets
3. Unduh bootstrap di sini lalu letakan di folder assets, kurang lebih strukturnya akan tampak seperti gambar berikut :

4. Lalu unduh jquery disini dengan cara save as, dan letakkan di folder assets/js/

Langkah Ketiga : Karena tadi kita sudah membuat dan meng-import database, maka pada step ini kita akan membuat fungsi koneksi dengan database... buka file config.php dan tuliskan kode berikut ini :

<?php
/**
 * Nama File : Config.php
 * File Ini berisi beberapa data penting seperti
 * Data koneksi ke database
 * Secret Kode
 * dan data lain yang nantinya akan digunakan secara terus-menerus
 */
 
define('DBHOST', 'localhost');
define('DBUSER', 'root');
define('DBPASS', '');
define('DBNAME', 'bootstrap');
 
$koneksi = new mysqli(DBHOST, DBUSER, DBPASS, DBNAME);
 
# Check koneksi, berhasil atau tidak
if ( $koneksi->connect_error ) {
   die( 'Oops!! Koneksi Gagal : '. $koneksi->connect_error );
}

Untuk Cara mengetes / mengujinya, sobat bisa dengan cara mengunjungi ( Misal ) http://localhost/form-login/config.php

jika BLANK maka koneksi telah sukses, namun jika muncul Oops!! bla bla bla berarti ada yang salah... dan saya asumsikan sudah berhasil, maka selanjutnya kita buat tampilah home, tentunya akan kita lakukan secara bertahap...

#Step 2 : Cara Membuat Form Login Modal Dengan Menggunakan Bootstrap

Pada tahap pertama kita akan memasang bootstrap terlebih dulu... Buka File index.php dan tuliskan kode berikut ini :

<html>
  <head>
    <title>Membuat Form Login dengan Bootstrap Modal</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
  </head>
  <body>
    <!-- Navbar -->
    
    <!-- body text-->
 
    <!-- Modal -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>

Masih tetap di file index.php, selanjutnya kita akan buat Navbar atau navigasi bar dengan menambahkan kode berikut tepat dibawah

<nav class="navbar navbar-default navbar-inverse" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" 
                  data-toggle="collapse" 
                  data-target="#bs-example-navbar-collapse-1">
            <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="#">MP4U Tutorial</a>
        </div>
 
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" 
                          data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <!-- menu login -->
            <li><a href="#" data-toggle="modal" 
                            data-target="#onphpidLogin"><b>Login</b></a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

Perhatikan link atau tag <a> dibawah  di sana terdapat dua buat attribute data-toggle="modal" dan data-target="#onphpidLogin", fungsi attribut tersebut adalah untuk menandakan bahwa link atau tag <a> memiliki hubungan dengan modal, dimana ketika di klik maka modal dengan attribut id="onphpidLogin" akan muncul... Namun untuk sekarang modal tidak akan pernah muncul… kenapa ? karena belum kita buat hehehe… dan dibawah ini kode form login modalnya

<div id="onphpidLogin" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Login Dulu Ya Gan</h4>
          </div>
          <div class="modal-body">
            <!-- form login -->
            <form action="check-login.php" method="post">
              <div class="form-group">
                <label for="username">Username</label>
                <input type="text" name="username" placeholder="Username" class="form-control" />
              </div>
              <div class="form-group">
                <label for="password">Password</label>
                <input type="text" name="password" placeholder="Password" class="form-control" />
              </div>
              <div class="text-right">
                <button class="btn btn-danger" type="submit">Login</button>
              </div>
            </form>
            <!-- end form login -->
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

Nah sekarang Modal dengan attribut id="onphpidLogin" sudah kita buat... kalian sudah bisa menampilkan modal dengan melakukan klik pada menu login... berikutnya kita akan bahas form loginnya... perhatikan pada  di tag <form> terdapat sebuah attribut action="check-login" bukan ?... attribut tersebut menandakan kalau kita klik login maka data yang kita inputkan seperti username dan password akan dikirim ke halaman / file check-login.php untuk dilakukan validasi dan pengecekan data pada database... seperti apa validasi dan pengecekannya, yuk kita buka file check-login.php dan isi dengan kode berikut ini :

<?php
session_start();
require 'config.php'; // menyisipkan file koneksi
 
if (isset($_POST['username'])) { // check apakah ada pengiriman data
    $username = $_POST['username'];
    $password = md5($_POST['password']);
 
 
    $sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
 
    $query = $koneksi->query($sql);
 
    if ($query->num_rows > 0) { // jika datanya ada
        $row = $query->fetch_assoc();
        $_SESSION['namaLog'] = $row['nama']; // menyimpan nama yang login pada session
        header('location:admin.php');
 
    } else { // jika datanya tidak ada
        echo "<script>alert('Username & Password Salah !!!'); window.location.href='index.php'</script>";
    }
    exit();
}

Mari kita bahas satu persatu, pertama kita mulai dari kode berikut :

session_start();

Kode tersebut memiliki fungsi untuk mengaktifkan penyimpanan informasi pada server melalui $_SESSION yang bisa digunakan secara global, pada kasus ini kita akan menyimpan nama siapa yang login kedalam $_SESSION['namaLog'] yang nanti akan kita panggil setelah login berhasil...

if (isset($_POST['username'])

Apa itu md5() ? md5() adalah sebuah hashing untuk mengubah sebuah data teks tertentu menjadi sebuah angka dan huruf secara acak, biasanya digunakan untuk pengamanan data sensitif seperti password...

$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";

Dan... $query = $koneksi->query($sql); // eksekusi

Kode diatas merupakan perintah kepada SQL ( database ) dimana kita meminta kepada DB ( DataBase ) untuk mencarikan data yang sama dengan username dan password yang kita kirim...

if ($query->num_rows > 0)

Kode diatas untuk mengecek apakah data yang kita minta pada database itu ada ? jika ada maka akan dilanjutkan dengan menyimpan data pada session seperti kode berikut ini :

$_SESSION['namaLog'] = $row['nama']; // menyimpan nama yang login pada session

Kemudian akan diarahkan kehalaman admin.php dengan kode berikut :

header('location:admin.php');

Nah, Karena halaman atau file admin.php belum ada isininya saya pastikan tidak akan muncul apapun di admin.php, nah biar muncul nama siapa yang login... isi file admin.php dengan kode berikut ini :

<?php
session_start();
echo 'hallo Selamat Datang, <h1>' . $_SESSION['namaLog'] . '</h1>';
 
echo '<a href="logout.php">logout</a>';

OK Next... pastikan jika kalian berhasil login pasti akan muncul nama siapa sajanya yang telah login... Dan jika kalian perhatikan, diakhir file admin.php ada kata logout bukan ? itu adalah fungsi logout, bagaimana cara membuatnya ? langsung aja buka file logout.php dan isi dengan kode berikut ini :

<?php 
session_start();
session_destroy(); // hapus session yang tersimpan
 
header('location:index.php'); // kembali kehome
exit();

Dan saat ini halaman hanya terdapat navbar dengan latar putih, jika kalian ingin menambahkan konten kalian bisa menambah kode berikut di file index.php tepat dibawah

<div class="container">
      <h1 class="text-center">
        Selamat Datang dan Silahkan Login
      </h1>
    </div>

Kurang lebihnya nanti hasil akhirnya seperti pada gambar dibawah ini guys...

OK Next... Itu saja yang dapat admin blog MP4U bagikan pada kesempatan kali ini, mengenai Cara Membuat Form Login Modal Dengan Menggunakan Bootstrap selamat mencoba, semoga bermanfaat dan selamat pagi aja ya guys... Bye!!!

BlogCaraOchaNetwork

Cara Membuat Form Login Modal Dengan Menggunakan Bootstrap

#Step 1 : Cara Membuat Form Login Modal Dengan Menggunakan Bootstrap

#Step 2 : Cara Membuat Form Login Modal Dengan Menggunakan Bootstrap

Content Disclaimer!