Berikut ini lanjutan dari latihan bagian pertama yaitu bagaimana cara membuat halaman login website dengan menggunakan PHP dan database MySQL. Latihan kali ini berhubungan dengan latihan sebelumnya, jadi yang belum baca di bagian pertama silahkan klik di tautan atau link Cara Membuat Halaman Login Website dengan PHP dan MySQL. Oke, tanpa basa-basi panjang lebar, kita mulai langkah per langkah cara pembuatanya.
Latihan dalam membuat halaman login kali ini terdiri dari lima langkah. Saya ingatkan kembali bahwa dalam latihan membuat halaman login page disini, saya menggunakan aplikasi XAMPP berserta paket-paket aplikasinya yang detailnya bisa dilihat dibawah ini:
- XAMPP Linux version 5.5.30-6 detailnya bisa dilihat disini
- PHP version 5.5.30
- MySQL version 5.6.26-74.0
- Apache 2.4.17
- Sistem Operasi: Ubuntu 15.10
- Text Editor: Sublime Text 3 build 3103
- MySQL Editor: MySQL Workbench Version 6.3
Baiklah, kita lanjutkan langkah-langkah berikut ini. Tetap ikuti ya :)
Langkah Pertama
Buat folder baru di sites directory atau kalau teman-teman menggunakan XAMPP bisa dibuka di Explorer: xampp/htdocs. Gambaran treeview direktori yang dibuat berserta berkas-berkas / file yang akan kita isi kode atau scrip, seperti ini:
---[d]config ----------[f]koneksi.php ----------[f]verifikasi.php ---[d]css ----------[f]bootstrap.min.css ---[f]index.php ---[f]home.phpBerikut juga keterangan dari simbol atau singkatan diatas
[d] = adalah sebuah direktori atau Folder [f] = adalah sebuah berkas atau FileJika bingung, berikut ini screenshot dari direktori dan file yang saya buat:
Langkah Kedua
Perbaruan di database. Jika teman-teman belum membuat database bisa mengikuti cara berikut ini:
Buat database dengan nama dbase_personal:
CREATE DATABASE `dbase_personal`;Kemudian buat tabel dengan nama tbl_login dengan field sebagai berikut:
CREATE TABLE `dbase_personal`.`tbl_login` ( `idtbl_login` INT NOT NULL AUTO_INCREMENT COMMENT '', `username` VARCHAR(10) NULL COMMENT '', `password` VARCHAR(45) NULL COMMENT '', PRIMARY KEY (`idtbl_login`) COMMENT '');Selanjutnya isikan data ke dalam tbl_login. Saya mengisi data dengan isi sebagai berikut ini:
INSERT INTO `dbase_personal`.`tbl_login` (`username`, `password`) VALUES ('admin', 'gatau');
Langkah KetigaMasuk ke direktori "config" buka file koneksi.php, kemudian ketikan kode dalam syntax php berikut ini:
<?php
/*
-- --------------------------------------------------------
-- --------------------------------------------------------
-- Nama File : koneksi.php
-- Author : Fitri Ariyanto
-- Email : seorang.fitri@gmail.com
-- Website : http://phpbejo.blogspot.com
-- Copyright [c] 2016 Fitri Ariyanto
-- --------------------------------------------------------
*/
// fungsi koneksi ke data server mysql
$host = "localhost";
$user = "root";
$pass = "";
$dbase = "dbase_personal";
$konek = mysql_connect($host, $user, $pass) or die("Gagal membuat koneksi ke Database! <br/> Pastikan service MySQL sudah berjalan.");
$pilihdb = mysql_select_db($dbase, $konek) or die("Gagal memilih Database! <br/> Pastikan database sudah dibuat.");
?>
Setelah selesai simpan dan lanjutkan langkah berikutnya.Langkah Keempat
Masih dalam direktori "config", kemudian buka file verifikasi.php dan ketikan kode dalam syntax php berikut ini:
<?php
/*
-- --------------------------------------------------------
-- --------------------------------------------------------
-- Nama File : verifikasi.php
-- Author : Fitri Ariyanto
-- Email : seorang.fitri@gmail.com
-- Website : http://phpbejo.blogspot.com
-- Copyright [c] 2016 Fitri Ariyanto
-- --------------------------------------------------------
*/
require_once "koneksi.php";
$_user = @$_POST['username'];
$_pass = @$_POST['password'];
if(isset($_POST['login'])){
if(!empty($_user)){
$result = mysql_query("SELECT * FROM tbl_login WHERE username='".$_user."' AND password='".$_pass."'");
$row = mysql_fetch_array($result);
if(!empty($row['username']) AND !empty($row['password'])){
header("Location: ../home.php");
}else{
echo 'Gagal Login! Silahkan periksa Pengguna dan Kata Sandi Anda! <a href="../index.php"> Ulang Login </a>';
}
}
}
?>
Simpan dan lanjut langkah berikutnyah.. cemungut.. :PLangkah Kelima
Kembali ke direktori utama. Kita lanjutkan dengan menuliskan kode di dalam file index.php. Berikut kode-kode dalam file index.php:
<?php
/*
-- --------------------------------------------------------
-- --------------------------------------------------------
-- Nama File : index.php
-- Author : Fitri Ariyanto
-- Email : seorang.fitri@gmail.com
-- Website : http://phpbejo.blogspot.com
-- Copyright [c] 2016 Fitri Ariyanto
-- --------------------------------------------------------
*/
require_once "config/koneksi.php";
?>
<!DOCTYPE html>
<html>
<head>
<title>PHPBEJO: Tutorial Pemrograman PHP dan MySQL :: Login </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.panel{margin-top: 25%;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Admin Login</h3>
</div>
<div class="panel-body">
<form role="form" method="post" action="config/verifikasi.php">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Nama Pengguna" name="username" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Kata Sandi" name="password" type="password" value="">
</div>
<input type="submit" name="login" value="Login" class="btn btn-lg btn-success btn-block"/>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Simpan dan lanjutkan ke langkah terakhir.Langkah Keenam
Masih di direktori utama kemudian buka file home.php dan ketik kode berikut ini: disini saya menggunakan Bootstrap, sebagai style css latihan kali ini.
https://drive.google.com/file/d/0B1hN0ds2AvMXYmd1UWYxUnpnVFU/view?usp=sharing
Selesai kita menulis kode-kodenya, kita lanjutkan ke langkah pengujian kode. Langkah-langkahnya sepertia biasa, kita buka web browser, disini saya menggunakan browser besutan Google, yaitu Google Chrome versi 48.0.2564.109. Caranya dengan mengetik:
http://localhost/login-include-css
Berikut tangkapan layar pengujian kode / program yang telah kita buat sebelumnya, perlu diketahui bahwa screenshot berikut adalah tampilan ketika kode-kode yang kita tulis tidak ada error ataupun kesalahan syntax.
Halaman Utama Login
 |
| Halaman Login |
 |
| Tampilan ketika login berhasil |
 |
| Tampilan ketika login gagal |
Dan diujung artikel, saya lampirkan tautan unduh berkas yang saya buat. Silahkan teman-teman download di lingk berikut ini:
https://drive.google.com/file/d/0B1hN0ds2AvMXdWhFTVdBVC15S0U/view?usp=sharing