Membuat form login php

Question

Misalnya kita membuat Sistem Web dengan 2 bagian yaitu admin dan pengunjung, kalau di pengunjung sih ga masalah mau pakai login atau tidak tergantung keperluan, tapi kalau dihalaman admin tanpa login??? rasanya aneh, kalau orang tau link admin nya? Bisa langsung masuk ke halaman admin dong padahal dia bukan admin hehehe jadi sangat disarankan untuk membuat login di bagian halaman adminnya ya..

Kali ini masih dengan 2 versi : youtubedan web jadi kalau bingung silahkan lihat di youtube gilacoding

Pastinya login berikut ini dengan versi php 7 terbaruuu, mudah banget kok caranya, ayuk lah ikutin step step berikut ini :

#pastikan sudah menggunakan php versi 7 atau diatasnya

Cara ngeceknya coba ketikkan dibrowser localhost, nah pilih phpinfo. Lihat versi phpnya kalau saya disini php7.1 :

#beberapa file yang akan dibuat

#membuat tabel user

Buat Database login_gc, isinya ada tabel users untuk login nya, isi struktur tabel users nya seperti berikut :

Atau silahkan langsung jalankan script mysql nya untuk membuat tabel users

CREATE TABLE `login_gc`.`users` ( `id` INT NOT NULL AUTO_INCREMENT ,  `nama` VARCHAR(100) NULL ,  `username` VARCHAR(25) NOT NULL ,  `password` VARCHAR(255) NOT NULL ,    PRIMARY KEY  (`id`)) ENGINE = InnoDB;

INSERT INTO `users` (`id`, `nama`, `username`, `password`) VALUES (NULL, 'Herzi Gilacoding', 'gilacoding', '123456');

#membuat file koneksi.php

Yup, buat koneksinya untuk menghubungkan form login ke tabel di database kamu, biar dia bisa cek apakah user ditemukan atau tidak

<?php 
	$host = "localhost";
	$user = "root";
	$pass = "";
	$db = "login_gc";

	$koneksi = mysqli_connect($host, $user, $pass, $db);

	if(!$koneksi) {
		die("Koneksi gagal : ".mysql_connect_error());
	}
?>

#membuat form login

Nah buat form loginnya dulu dong, terserah deh mau pke css atau bootstrap bebas.. disini saya masih pakai html biasa aja ya buat contoh doang kok yang penting bisa login (desain login dengan css ada di bawah ya)

Coding nya dibawah ini, simpan dengan nama login.php

<!DOCTYPE html>
<html>
<head>
	<title>Form Login Gilacoding</title>
</head>
<body>
	<center>
	<form action="logincontroller.php" method="POST" style="margin-top: 200px;">
		<h2>Login</h2>
		<label>Username :</label>
		<input type="text" name="username" placeholder="masukkan username" required="" autofocus="">
		<br/>
		<br/>
		<label>Password :</label>
		<input type="password" name="password" placeholder="masukkan password" required="">
		<br>
		<br>
		<button type="submit">SUBMIT LOGIN</button>
	</form>
	<!-- Menampung jika ada pesan -->
	<?php if(isset($_GET['pesan'])) {  ?>
	<label style="color:red;"><?php echo $_GET['pesan']; ?></label>
	<?php } ?>	
	</center>
</body>
</html>

#Login Controller

Nah kalau sudah bikin formnya, tentunya kita harus membuat login controllernya, fungsi nya untuk proses cek n ricek apakah data username dan password udah benar atau belum

<?php 
// mengaktifkan session php
session_start();
 
// menghubungkan dengan koneksi
include 'koneksi.php';
 
// menangkap data yang dikirim dari form
$username = $_POST['username'];
$password = $_POST['password'];
 
// menyeleksi data user dengan username dan password yang sesuai
$result = mysqli_query($koneksi,"SELECT * FROM users where username='$username' and password='$password'");

$cek = mysqli_num_rows($result);
 
if($cek > 0) {
	$data = mysqli_fetch_assoc($result);
	//menyimpan session user, nama, status dan id login
	$_SESSION['username'] = $username;
	$_SESSION['nama'] = $data['nama'];
	$_SESSION['status'] = "sudah_login";
	$_SESSION['id_login'] = $data['id'];
	header("location:halaman_admin.php");
} else {
	header("location:login.php?pesan=gagal login data tidak ditemukan.");
}
?>

Note : untuk penjelasan nya langsung di komentar codingan nya ya, selebihnya kamu bisa tanyakan dibawah kalau masih belum paham

#Buat file halaman_admin.php

Jadi ini halaman tujuan kita, hanya yang mempunyai session sudah login yang bisa akses halaman_admin.php

Codingan nya ada dipaling atas itu fungsi cek sudah login atau belum, berikut lengkap nya :

<?php 
//memulai session yang disimpan pada browser
session_start();

//cek apakah sesuai status sudah login? kalau belum akan kembali ke form login
if($_SESSION['status']!="sudah_login"){
//melakukan pengalihan
header("location:login.php");
} 
?>
<!DOCTYPE html>
<html>
<head>
	<title>Halaman Admin</title>
</head>
<body>
	<h2>Yay! Selamat datang : <?php echo $_SESSION['nama']; ?></h2>

	<br>
	<a href="logout.php">Klik disini untuk logout.</a>
</body>
</html>

Note :

- Disini untuk menampilkan nama yang login atau username, cukup pakai variable $_SESSION['nama']; atau apa saja yang ingin ditampilkan. Sesuai dengan variable yang kita tampung disession pada logincontroller tadi.

- Misal ada tambahan kolom hak_akses, kamu cukup tambahkan disession login controller dengan $_SESSION[‘jabatan’];

#Membuat logout.php

Fungsi logout agar kita keluar dari session yang ada kalau kita klik logout otomatis kita keluar dari halaman admin, dan kembali ke halaman login. Makanya disitu ada session_destroy(), untuk menghapus semua data session yang tadi kita tampung

<?php 
// mengaktifkan session
session_start();
 
// menghapus semua session
session_destroy();
 
// mengalihkan halaman login
header("location:login.php?pesan=anda berhasil logout.");
?>

Nah sampai sini sih udah selesai sob! Tapi nanti akan saya ajari gimana caranya login dengan password yang terenksipsi agar lebih aman.

Oooiya... ini ada bonus untuk desain login :

#coding desain login v2

<!DOCTYPE html>
<html>
<head>
	<title>Form Login Gilacoding</title>
	<style type="text/css">
		body {
			background-color: #7a58ff;
			font-family: "Segoe UI";
		}
		#wrapper {
			background-color: #fff;
			width: 400px;
			height: 330px;
			margin-top: 120px;
			margin-left: auto;
			margin-right: auto;
			padding: 20px;
			border-radius: 4px;
		}
		input[type=text], input[type=password] {
			border: 1px solid #ddd;
			padding: 10px;
			width: 95%;
			border-radius: 2px;
			outline: none;
			margin-top: 10px;
			margin-bottom: 20px;
		}
		label, h2 {
			text-transform: uppercase;
			font-weight: bold;
		}
		h2 {
			text-align: center;
			font-size: 40px;
			color: #7a58ff;
		}
		button {
			border-radius: 2px;
			padding: 10px;
			width: 120px;
			background-color: #7a58ff;
			border: none;
			color: #fff;
			font-weight: bold;
		}
		.error {
			background-color: #f72a68;
			width: 400px;
			height: auto;
			margin-top: 20px;
			margin-left: auto;
			margin-right: auto;
			padding: 20px;
			border-radius: 4px;
			color: #fff;

		}
	</style>
</head>
<body>
	<div id="wrapper">
		<form action="logincontroller.php" method="POST">
			<h2>Login</h2>
			<label>Username</label>
			<input type="text" name="username" placeholder="masukkan username" required="" autofocus="">
			<label>Password </label>
			<input type="password" name="password" placeholder="masukkan password" required="" >
			<button type="submit">SUBMIT</button>
		</form>
	</div>
	
		<?php if(isset($_GET['pesan'])) { ?>
			<div class="error">
				<label>Oopps... <?php echo $_GET['pesan']; ?></label>
			</div>
		<?php } ?>
	

		
</body>
</html>

simpan dengan nama loginv2.php

Btw silahkan download project ini disini : https://github.com/herziwp/loginphp7 dan videonya ada disini :