Penanganan login dengan PHP

3 November 2019

Kali ini kita akan belajar membuat form login dan bagaimana kita menanganinya menggunakan PHP.

Skenarionya, kita akan membuat 3 file php yang berfungsi untuk halaman login, kemudian dashboard untuk user yang telah melakukan login dan yang terakhir adalah logout untuk mengakhiri session login.

Karena kita memerlukan database untuk menampung user yang berhak login pada aplikasi kita, sobat buat database dan table dengan struktur seperti pada gambar dibawah :

form-login-struktur-table.png

Kemudian isikan data user, disini saya coba input satu data user saja untuk testing. Username nya admin dan passwordnya juga admin.

form-login-isi-table-user.png

index.php

Sobat buat file dengan nama index.php. File ini berfungsi untuk tampilan dan proses login. Untuk tampilannya sobat bisa sesuaikan dengan keninginan sobat karena disini hanya contoh saja.

Isi dari file index.php kurang lebih seperti dibawah ini, untuk nama database, user dan password pada koneksinya silahkan sesuaikan :


<?php 

session_start();

if(isset($_POST['username']) && isset($_POST['password'])){
		
	$username = $_POST['username'];
	$password = $_POST['password'];

	$database = new PDO('mysql:host=localhost;dbname=logindb', 'root', 'sa123');

	$statement = $database->prepare('SELECT COUNT(*) FROM users WHERE username=? AND password=?');
	$statement->bindValue(1, $username, PDO::PARAM_STR);
	$statement->bindValue(2, $password, PDO::PARAM_STR);
	$statement->execute();
	
	$result = $statement->fetch();
	$result = (int) $result[0];
	
	if($result == 1){
		
		$_SESSION['username'] = $username;
		
		header('location:dashboard.php');
		
		exit();	
		
	}else{
		
		$msg = '<p>Maaf, user atau password tidak terdaftar</p>';
		
	}
}

?>

<!doctype html>
<html lang="en">
<head>
	
	<meta charset="utf-8">
	<title>Login</title>
	<style>
	*{
		margin:0;
		padding:0; 
	}

	body{
		background-color:#F7F7F7;
		font-family:arial;
		color:#666666;
	}
	
	input[type="text"],
	input[type="password"]{
		padding:5px;
		color:#555555;
		border:1px solid #E1E1E1;
	}

	input[type="submit"]{
		padding:5px;
		color:#555555;
		border:1px solid #E1E1E1;
	}
	
	.login-form{
		background-color:#fff;
		border: 1px solid #E1E1E1;
		width:300px;
		height:300px;
		margin:50px auto 0 auto;
		padding:20px;
	}
	
	label{
		display:block;
		margin-top:20px;
		margin-bottom:20px;
	}
	
	hr {
		margin-top: 20px;
		margin-bottom: 20px;
		border-width: 0;
		border-top: 1px dotted #E1E1E1;
	}
	
	</style>
	
</head>
<body>

	<div class="login-form">
		
		<p>Silahkan Login</p>
		
		<?php if(isset($msg)) echo '<br />'. $msg; ?>
		
		<hr />
		
		<form method="post">
			<label>Username</label>
			<input type="text" name="username" placeholder="Username" autocomplete="off">
			<label for="password">Password</label>
			<input type="password" name="password" placeholder="Password" autocomplete="off"><br /><br />
			<input type="submit" value="Submit">
		</form>
		
	</div>
	
</body>
</html>

Tampilannya kurang lebih seperti ini

form-login.png

Kalo user dan password yang dimasukkan tidak ada akan muncul tulisan Maaf, user atau password tidak terdaftar

form-login-user-tidak-terdaftar.png

dashboard.php

Kemudian kita buat file dashboard.php untuk halaman user setelah berhasil login, disini juga kita kasih link untuk logout. Jika user belum berhasil login dan coba mengakses file dashboard.php maka akan di redirect ke index.php untuk login terlebih dahulu.


<?php 

session_start();

if(!isset($_SESSION['username'])) header('location:index.php');


?>


<!doctype html>
<html lang="en">
<head>
	
	<meta charset="utf-8">
	<title>Dashboard</title>
	<style>
	*{
		margin:0;
		padding:0; 
	}

	body{
		background-color:#F7F7F7;
		font-family:arial;
		color:#666666;
	}
	
	.dashboard{
		background-color:#fff;
		border: 1px solid #E1E1E1;
		width:300px;
		height:280px;
		margin:50px auto 0 auto;
		padding:20px;
	}
	
	hr {
		margin-top: 20px;
		margin-bottom: 20px;
		border-width: 0;
		border-top: 1px dotted #E1E1E1;
	}
	
	</style>
	
</head>
<body>

	<div class="dashboard">
		
		<p><span style="float:left;">Dashboard</span><span style="float:right;"><a href="logout.php">Logout</a></span></p><br />
		
		<hr />
		
		<p>Selamat datang <?php echo $_SESSION['username']; ?></p>
		
	</div>
	
</body>
</html>

Tampilannya kurang lebih seperti berikut :

form-login-dashboard.png

logout.php

Terakhir adalah file logout.php, berfungsi untuk logout dan mengakhiri session. Setelah logout user akan di redirect lagi ke halaman login. Isi dari file logout.php seperti dibawah ini :


<?php 

session_start();

session_destroy();

header('location:index.php');

exit();

Demikian, mudah-mudahan tutorial ini bemanfaat buat sobat yang baru belajar pemrograman.


Komentar