Modul 8 Login

Modul PHP Native – Rekayasa Perangkat Lunak
SMK Telkom Malang
LOGIN PAGE (AUTHENTICATION)
 Membuat file login.php

1. Buatlah file hapus.php di xampp/htdocs/perpus_native
2. Ketikkan sintak berikut:
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.mi
n.css" rel="stylesheet" integrity="sha384-
+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="row" style="margin-top:50px;">
<div class="col-md"></div>
<div class="col-md rounded bg-light" style="box-shadow: 4px 4px 5px
-4px;padding:10px">
<form action="proses_login.php" method="post">
<h3 align="center">LOGIN Perpus Online</h3>
Username:
<input type="text" name="username" value="" class="form-
control">
password:
<input type="password" name="password" class="form-
control"><br>
<center><input type="submit" name="login" class="btn btn-
success" value="LOGIN"></center>
</form>
</div>
<div class="col-md"></div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bund
le.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb
9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
Penjelasan
<form action="proses_login.php" method="post">
Tag form ini memiliki atribut action yang berfungsi untuk melakukan proses setelah di klik
submit. Pada kasus ini action nya menuju ke file proses_login.php dengan method post.
 Membuat file proses_login.php

3. Buatlah file proses_login.php di xampp/htdocs/perpus_native
<?php
if($_POST){
$username=$_POST['username'];
SMK Telkom Malang
$password=$_POST['password'];
if(empty($username)){
echo "<script>alert('Username tidak boleh
kosong');location.href='login.php';</script>";
} elseif(empty($password)){
echo "<script>alert('Password tidak boleh
kosong');location.href='login.php';</script>";
} else {
include "koneksi.php";
$qry_login=mysqli_query($conn,"select * from siswa where
username = '".$username."' and password = '".md5($password)."'");
if(mysqli_num_rows($qry_login)>0){
$dt_login=mysqli_fetch_array($qry_login);
session_start();
$_SESSION['id_siswa']=$dt_login['id_siswa'];
$_SESSION['nama_siswa']=$dt_login['nama_siswa'];
$_SESSION['status_login']=true;
header("location: home.php");
} else {
echo "<script>alert('Username dan Password tidak
benar');location.href='login.php';</script>";
}
}
}
?>
Penjelasan:
Sintak if($_POST){ bertujuan untuk mencegah muncul error Ketika user mengunjungi file
proses_login.php ini tanpa method post. Jika memiliki data kiriman berupa post maka akan
dieksekusi jika tidak maka tidak ternjadi apa-apa.
Data post akan disimpan kedalam variable $username dan $password dan sintak
if(empty($username)){ yang artinya data post tersebut akan divalidasi apakah menyimpan
data atau kosong jika tidak menyimpan data atau kosong maka akan memunculkan alert
username tidak boleh kosong atau password tidak boleh kosong.
Jika variable nya tidak kosong maka akan diuji dalan query mysql apakah data username dan
password sudah benar atau tidak dengan menggunakan sintak sebagai berikut
$qry_login=mysqli_query($conn,"select * from siswa where username = '".
$username."' and password = '".md5($password)."'");
Sintak if(mysqli_num_rows($qry_login)>0){ menguji apakah dengan username dan
password tersebut ada atau tidak didalam table user yang mana menampilkan jumlah baris ,
jika mengujian menunjukkan diatas 1 baris maka username dan password tersebut dianggap
benar dan akan dilanjutkan proses penyimpanan data user login yang mana akan disimpan ke
dalam session dengan sintak sebagai berikut
$dt_login=mysqli_fetch_array($qry_login);
session_start();
$_SESSION['id_siswa']=$dt_login['id_siswa'];
$_SESSION['nama_siswa']=$dt_login['nama_siswa'];
$_SESSION['status_login']=true;
Setelah itu akan diredirect ke halaman home.php
Selanjutnya akan kita buat halaman konten stelah login. Di halaman ini akan dipecah menjadi 3
file yaitu header.php, footer.php dan file konten. File header.php dan footer.php akan selalu di-
include-kan ke setiap halaman konten sebagai desain tetap atau desain static Ketika terjadi
permindahan halaman.
SMK Telkom Malang
 Membuat file header.php

5. Buatlah file header.php di xampp/htdocs/perpus_native
<?php
session_start();
if($_SESSION['status_login']!=true){
header('location: login.php');
}
?>
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.mi
n.css" rel="stylesheet" integrity="sha384-
+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous">
<title></title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light"
style="box-shadow: 4px 4px 5px -4px;">
<div class="container-fluid">
<a class="navbar-brand" href="#">PERPUS</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="home.php">Home</a>
</li>
<a class="nav-link" aria-current="page"
href="buku.php">Buku</a>
</li>
href="histori_peminjaman.php">Transaksi</a>
</li>
href="logout.php">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container bg-light rounded" style="margin-top:10px">
Penjelasan:
session_start();
if($_SESSION['status_login']!=true){
header('location: login.php');
}
SMK Telkom Malang
Sintak diatas berfungsi untuk mengecek apakah user berstatus sudah login atau belum login,
jika belum melakukan login maka akan diredirect ke login.php, tetapi jika sudah melakukan
login maka akan diteruskan prosesnya dihalaman home.php
 Membuat file footer.php
7. Buatlah file footer.php di xampp/htdocs/perpus_native
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bund
le.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb
9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
 Membuat file home.php

9. Buatlah file footer.php di xampp/htdocs/perpus_native
<?php
include "header.php";
?>
<h2>Selamat datang <?=$_SESSION['nama_siswa']?> di website Perpus
Online.</h2>
<?php
include "footer.php";
?>
Penjelasan:
Didalam file home.php akan di-include-kan header.php dan footer.php agar di halaman
home.php mengadung desain header dan footer yang sudah dibuat tadi.
 Ujicoba Login Page
11. Buka browser ketikkan url http://localhost/perpus_native/login.php di addressbar
12. Isikan username dan password yang sudah diinputkan (di materi insert data)
13. Kemudian klik tombol LOGIN
14. Jika username dan password salah maka akan tampil alert seperti dibawah ini:
SMK Telkom Malang
15. Jika username dan password benar maka akan menuju ke halaman home.php seperti
pada gambar dibawah ini:
 Tugas
1. Lanjutkan tugas sebelumnya terkait toko online, buatlah login page untuk pelanggan seperti
tutorial diatas!

Modul 8 Login

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

Modul 8 Login

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul PHP Native – Rekayasa Perangkat Lunak

SMK Telkom Malang

LOGIN PAGE (AUTHENTICATION)

 Membuat file login.php

 Membuat file proses_login.php

 Membuat file header.php

 Membuat file home.php

Anda mungkin juga menyukai