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...

Cara Membuat Form Login Modal Dengan Menggunakan Bootstrap

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 :

Baca Juga : Cara Membuat Form Login Responsive menggunakan Bootstrap
Cara Membuat Desain Form Login Seperti Yahoo Dengan Bootstrap
Cara Membuat Desain Form Login Seperti Google Dengan Bootstrap

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 :
Cara Membuat Form Login Modal Dengan Menggunakan Bootstrap

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 <!-- Navbar -->

<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 <!-- menu login --> 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 <!-- form login --> 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 <!-- body text -->

<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...

Cara Membuat Form Login Modal Dengan Menggunakan Bootstrap

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!!!



Before you continue reading, it is necessary to underline that what is written is only a reference! so if there are errors in words and delivery methods, please understand! and below the recommendation article for you!


Content Disclaimer!

  • I as the owner of "BlogCaraOcha" thank you to all loyal readers, and those who accidentally stopped by here.

    And I apologize if there are many advertisements on the homepage or in the post.

    After "BlogCaraOcha" is accepted as a Google publisher, Google automatically places all advertisements.

  • If the content on "BlogCaraOcha" has similarities with other sites or blogs, it only provides a reference to each other by spreading the word in a simple article.

    With the aim, all internet visitors can easily and freely which if the article is easy to understand.

    In addition, so that readers can easily find what is on the search, with content that can provide content in surfing the internet!

  • All images posted in the article are not 100% owned by "BlogCaraOcha" but are taken from Google Search.

    So if there are similarities with the images on other sites, it is only for illustration only (to decorate the storyline as outlined in the article).

    For some of the images here, they are purely self-created, with the same purpose as illustration only.

    However, if there are inappropriate images and ask to be removed, please provide more detailed information via the contact at "BlogCaraOcha"

  • For content that discusses the product review or tutorial, if there are errors, please be advised that it may be an error in typing words or lacking in detail reviewing.

    So if there are typos and results that are not appropriate, can provide input where the location of the error or lack, so that the content is immediately deleted or corrected.

    But before submitting, try to see between the date / year the post was published with the current date / year.

    Because it could be other times what the written policy has changed.
  • '