Membuat Aplikasi Login Sederhana

MEMBUAT APLIKASI LOGIN SEDERHANA
DENGAN PHP DAN MYSQLI
A. PERSIAPAN
Dalam membuat aplikasil ogin sederhana menggunakan php dan mysqli ini, silahkan buat folder
baru dengan nama “login_sederhana” pada direktori localhost (XAMPP/htdocs/). Pada folder
tersebut kita akan menyimpan semua file aplikasi yang akan kita buat. Selanjutnya buat sebuah
database baru dengan nama “pbdi_login” dan buat table dengan nama “user”. Deskripsi dati table
tersebut adalah sebagai berikut:
No Nama Jenis Keterangan
1 id Int (11) Primary Key dan Auto Increment
2 nama Varchar (100) -
3 username Varchar (100) -
4 email Varchar (100) -
5 password Varchar (100) -
Atau dapat dilihat pada gambar di bawah.
Setelah database dan table berhasil kita buat, selanjutnya isikan data user dengan data contoh
melalui menu insert atau tambahkan seperti pada gambar berikut:
Selanjutnya pilih go atau kirim sehingga akan tersimpan data sebagai berikut:
1
Persiapan dalam membuat database sudah selesai. Pastikan dalam menyimpan password, memilih
MD5 untuk hashing dalam menyimpan password.
B. MEMBUAT KONEKSI DATABASE

Untuk memulai sebuah project aplikasi yang berhubungan dengan database, kita wajib untuk
membuat koneksi terhadap database terlebih dahulu. Tujuannya adalah agar project PHP kita dapat
terhubung dengan database. Untuk membuat koneksi dengan database, silahkan teman-teman buat
file “koneksi.php” pada folder login_sederhana yang telah kita buat sebelumnya dan ketikan
kode sebagai berikut:
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "pbdi_login";
$koneksi = mysqli_connect($host,$user,$pass,$db);
if (mysqli_connect_errno()) {
echo "Koneksi Gagal :".mysqli_connect_error();
}
?>
Silahkan teman-teman masukan sendiri nama database sesuai dengan anama database yang telah
kita buat. Sampai disini koneksi dengan database sudah berhasil kita buat. Selanjutnya kita akan
membuat halaman login sederhana sebagai form untuk administrator memaukan username dan
password. Apabila username dan password berhasil maka administrator akan dialihkan pada
halaman admin.
C. MEMBUAT HALAMAN LOGIN

Selanjutnya kita akan membuat halaman login sederhana untuk administrator. Buatlah file baru
dengan nama “index.php” dan simpan pada folder “login_sederhana” yang telah kita buat
sebelumnya dan ketikan kode berikut:
XAMPP/htdochs/login_sederhana/index.php
<!DOCTYPE html>
<html>
<head>
<title>Membuat Form validasi Login Sederhana</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<br><br>
<center><h2>HALAMAN LOGIN PENGGUNA</h2></center>
<div class="login">
<?php
2
if (isset($_GET['pesan'])) {
if ($_GET['pesan'] == "gagal") {
echo "Username dan Password anda salah! <br>";
}else if ($_GET['pesan'] == "logout") {
echo "anda berhasil logout!<br>";
}else if ($_GET['pesan'] == "belum_login") {
echo "untuk mengakses halaman ini, anda harus login dulu! <br>";
}
}
?>
<br>
<form action="login_proses.php" method="POST" onsubmit="return validasi()">
<div>
<label>USERNAME</label>
<input type="text" name="username" id="username"
placeholder="masukan username !">
</div>
<div>
<label>PASWWORD</label>
<input type="password" name="password" id="password"
placeholder="masukan password !">
</div>
<div>
<input type="submit" value="LOGIN" class="tombol">
<label>Belum punya akun ?</label> <a
href="register.php">REGISTRASI</a>
</div>
</form>
</div>
</body>
<script type="text/javascript">
function validasi() {
var username = document.getElementById("username").value;
var passsword = document.getElementById("password").value;
if (username != "" && password != "") {
return true;
}else{
alert('Username dan Password harus diisi !');
return false;
}
}
</script>
</html>
Selanjutnya untuk mengatur tampilan kita tambahkan file baru dengan nama “style.css” pada
folder “login_sederhana” dengan kode sevagai berikut:
XAMPP/htdochs/login_sederhana/style.css
body{
background: #3498db;
font-family: sans-serif;
}
h2{
color: #fff;
}
.login{
padding: 1em;
margin: 2em auto;
width: 17em;
3
background: #fff;
border-radius: 10px;
}
label{
font-size: 10pt;
color: #555;
}
input{
padding: 8px;
width: 95%;
background: #efefef;
border: 0;
font-size: 10pt;
margin: 6px 0px;
}
.tombol{
background: #3498db;
color: #fff;
width: 100%;
border: 0;
padding: 5px 8px;
margin: 20px 0px;
}
Pada file index.php di atas, kita telah menetapkan aksi pada form adalah “login_proses.php”
dengan metode “POST” untuk jenis pengiriman datanya. Sehingga silahkan teman-teman buat file
baru dengan nama “login_proses.php” pada folder “login_sederhana” dan ketikan kode berikut:
XAMPP/htdochs/login_sederhana/login_proses.php
<?php
session_start();
include 'koneksi.php';
$username = $_POST['username'];
$password = md5($_POST['password']);
$login = mysqli_query($koneksi,"SELECT * FROM user WHERE username ='$username' AND

password='$password'");
$proses = mysqli_num_rows($login);
if ($proses >0) {
session_start();
$_SESSION['username'] = $username;
$_SESSION['status'] = "login";
header("location: admin/index.php");
}else{
header("location: index.php?pesan=gagal");
}
?>
Pada kode login_proses.php di atas, disini kita aktifkan dulu session php, karena kita menggunakan
session sebagai penanda status pengguna yang akan login. Pada kode diatas kita telah mengaltifkan
session php dengan sintax berikut:
session_start();
4
Kemudian jangan lupa untuk menghubungkannya dengan file koneksi.php yang telah kita buat
pada kode berikut:
include 'koneksi.php';
Kemudian menangkap data yang dikirim dari form login
$username = $_POST['username'];
$password = md5($_POST['password']);
Kemudian kita seleksi data admin yang memiliki username dan password yang sesuai dengan yang
di input pada form login.
$login = mysqli_query($koneksi,"SELECT * FROM user WHERE username ='$username' AND
password='$password'");
Selanjutnya hitung jumlah record yang sesuai dengan username dan password yang di input.
$proses = mysqli_num_rows($login);
Jika username dan password admin ditemukan pada table user, makanilai dari variable $proses
adalah jumlah record yang ditemukan. Fungsi mysqli_num_rows() berfungsi untuk menghitung
jumlah record hasil dari query yang ada dalam parameter fungsi ini.
Selanjutnya cek dengan if else apabila variable $proses > 0, maka kita buat session username dan
password kemudaian alihkan ke folder admin/index.php. jika tidakkita alihkan halamannya
Kembali ke halaman login (index.php) dengan mengirimkan data pesan (?pesan=gagal).
if ($proses >0) {
session_start();
$_SESSION['nama'] = $nama;
$_SESSION['username'] = $username;
$_SESSION['status'] = "login";
header("location: admin/index.php");
}else{
header("location: index.php?pesan=gagal");
}
Itu sebabnya pada file index.php (halaman login) kita membuat pengecekan sebagai berikut:
perhatikan pada file index.php)
<?php
if (isset($_GET['pesan'])) {
if ($_GET['pesan'] == "gagal") {
echo "Username dan Password anda salah! <br>";
}else if ($_GET['pesan'] == "logout") {
echo "anda berhasil logout!<br>";
}else if ($_GET['pesan'] == "belum_login") {
echo "untuk mengakses halaman ini, anda harus login dulu! <br>";
}
}
?>
Ini untuk memeriksa pesan yang dikirim. Karena jika user dan password tidak ditemukan, akan
dikirimkan pesan “gagal”. Pada notifikasi ini kita akan menampilkan pesan “Username dan
Password anda salah!” apabila username dan password gagal. Begitu pula untuk pesan logout dan
belum_login yang akan kita buat pengalihannya.
D. MEMBUAT HALAMAN ADMIN

Seperti yang telah kita lihat pada sintax sebelumnya. Saat melakukan pengecekan, apabila
username dan password benar, maka halaman akan dialihkan ke halaman admin yang berada
dalam folder “admin”. Sehingga dalam “login_sederhana” kita tambahkan folder baru dengan
nama “admin” seperti pada gambar berikut:
5
Setelah membuat folder “admin”, kita akan membuat halaman sederhana untuk admin. Sehingga
buatlah file baru dengan nama “index.php” pada folder admin dan ketikan dengan kode berikut:
XAMPP/htdocs.login_sederhana/admin/index.php
<!DOCTYPE html>
<html>
<head>
<title>Halaman Admin</title>
<link rel="stylesheet" type="text/css" href="../style.css">
</head>
<body>
<h2>HALAMAN ADMIN</h2>
<hr>
<br>

<?php
session_start();
if ($_SESSION['status'] != "login") {
header("location:../index.php?pesan=belum_login");
}
?>
<h2>SELAMAT DATANG <?php echo $_SESSION['username']; ?></h2>
<h3>Anda Telah Berhasil Login !</h3>
<br>
<br>
<a href="logout.php"><button class="tombol">LOGOUT</button></a>
</body>
</html>
Perhatikan pada kode di atas, disini kita buat pengecekan dengan if else

<?php
session_start();
if ($_SESSION['status'] != "login") {
header("location:../index.php?pesan=belum_login");
}
?>
Jika session status tidak sama dengan login maka halaman akan dialihkan ke halaman login dan
mengirimkan pesan “belum_login”. Hal ini berfungsi untuk keamanan agar halaman admin tidak
dapat diakses sebelum melakukan login. Kemudian kita buat link logout dengan tombol link.
<a href="logout.php"><button class="tombol">LOGOUT</button></a>
Saat kita klik logout, maka akan dialihkan ke file logout.php. sehingga buat file baru dengan nama
“logout.php” pada folder admin dan ketikan kode berikut:
XAMPP/htdocs.login_sederhana/admin/logout.php
<?php
6
session_start();
session_destroy();
header("location: ../index.php?pesan=logout");
?>
File logout.php berguna untuk menghapus semua session yang telah dibuat saat login dan
mengalihkan Kembali ke halaman login dengan mengirimkan pesan “logout”.
E. HASIL
Setelah semua persiapan dan file berhasil kita buat, selanjutnya untuk mencoba form login ini
sudah berjalan dengan benar atau belum kita akan menjalankan aplikasinya. Silahkan teman-teman
jalankan aplikasinya sehingga akan tampil halaman sebagai berikut:
http://localhost/login_sederhana/
Selanjutnya untuk menguji apakah form login sudah berjalan dengan semestinya, coba isikan
dengan
Username : username
Password : username123
7
Selanjutnya pilih login, maka akan muncul pesan username dan password salah.
Selanjutnya coba untuk masuk langsung pada halaman admin tanpa melakukan login dengan
mengakses “http://localhost/pbdi/login_sederhana/admin”
8
Maka akan muncul notifikasi yang mengharuskan kita login terlebih dahulu. Selanjutnya, kita
masukan username dan password yang benar yaitu:
Username : admin
Password : admin123
Lalu pilih login, maka akan dialihkan pada halaman admin
Selanjutnya pilih menu logout, maka halaman akan dialihkan pada halaman login dan
menampilkan pesan logout.
9
Sampai disini membuat aplikasi login sederhana menggunakan PHP dna MySQLi sudah selesai.
Semoga bermanfaat !!!
10

Membuat Aplikasi Login Sederhana

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Aplikasi Login Sederhana

Diunggah oleh

Hak Cipta:

Format Tersedia

MEMBUAT APLIKASI LOGIN SEDERHANA

DENGAN PHP DAN MYSQLI

B. MEMBUAT KONEKSI DATABASE

C. MEMBUAT HALAMAN LOGIN

$login = mysqli_query($koneksi,"SELECT * FROM user WHERE username ='$username' AND

D. MEMBUAT HALAMAN ADMIN

Semoga bermanfaat !!!

Anda mungkin juga menyukai