Cara Membuat Form Login Menggunakan SESSION pada PHP SQL
Kali ini saya akan membahas tentang cara membuat Form Login beserta
Sessionnya pada php. Form Login sangat penting dalam membuat sebuah
aplikasi terutama aplikasi yang didalamnya menyimpan data yang penting
yang tidak seorang pun yang boleh tahu. Seperti aplikasi tabungan
ataupun yang lainnya.
Tanpa basa-basi lagi mari kita buat Contoh Form Loginnya lengkap
dengan Sessionnya. Perhatikan langkah-langkah berikut ini. hehehey :D
- Pertama marilah kita buat databasenya terlabih dahulu dengan nama belajar_db (nama bisa diganti sesuai project yang sedang dibuat). Saya akan mebuatnya dengan phpmyadmin yang lebih mudah :D
-
Membuat database di phpmyadmin
Membuat nama tabel pada phpmyadmin
Membuat nama columns pada phpmyadmin
Membuat primary key pada username
Mengisi username dan password dengan nama admin
- Kedua kita buat file php untuk mengoneksikan database dengan php dengan nama connect.php (nama bisa anda ganti sesuai selera) berikut sintaknya :v
- <?php
$host = 'localhost';
$user = 'root';
$pass = '';
$name = 'belajar_db';
mysql_connect ($host, $user, $pass);
mysql_select_db ($name);
?>
- Ketiga kita buat file php untuk membuat halaman utama dengan nama index.php (nama ini bisa anda ganti sesuai kondisi aplikasi yang anda buat tapi tetap diakhiri .php).
- // Membuat Session
- <?php session_start();
// set session yang digunakan
$_SESSION ['login'] = false;
?>
<html>
<head>
<title>Belajar Membuat Form Login</title>
// Memanggil File CSS
<link rel="stylesheet" href="style.css">
</head>
<body align="center">
<h1 align="center">Belajar Form Login</h1>
<div class="content-full" align="center">
<?php
if($_GET) {
if (isset($_GET['gagal'])) {
echo '<div class="gagal">
Username / Password Salah !
</div>';
} else {
echo ' ';
}
}
?>
// Membuat Form Login
<form action="login_proses.php" method="post">
<input type="text" name="username" placeholder="Masukkan Username" class="input-login" /><br />
<input type="password" name="password" placeholder="Masukkan Password" class="input-login" required /><br /><br />
<input type="submit" value="Login" class="submit-login" />
</form>
</div>
</body>
</html>
- Keempat kita buat File untuk memproses Form di atas dengan nama login_proses.php (nama harus sesuai dengan action di atas). Berikut sintaknya.
- // Membuat Session
include ('connect.php');
$user = $_POST['username'];
$pass = md5($_POST['password']);
$queri = "SELECT * FROM account WHERE username = '$user'";
$lakukan = mysql_query ($queri);
$tampilkan = mysql_fetch_array ($lakukan);
if (($pass) == ($tampilkan['password'])) {
header ('location : home.php?berhasil');
$_SESSION['login'] = true;
$_SESSION['username'] = $user;
}else {
header ('location : index.php?gagal=yes');
}
?>
- Terakhir kita buat file php lagi untuk pelarian jika proses login yang telah kita buat itu berhasil dengan nama home.php (seperti biasa nama bisa diganti sesuai selera anda). hehehey :D . Berikut Sintaknya.
- <?php session_start();
// cek apakau user sudah login
if($_SESSION['login'] == false){
header('Location:../login.php');
}else {
echo' ';
}
?>
<html>
<head>
<title>Home</title>
</head>
<body>
<?php
if ($_GET) {
if (isset($_GET['berhasil'])) {
echo '<div class="berhasil">
Selamat Datang berhasil login...
</div>';
}else {
echo '';
}
}
?>
<h1 align="center">Silahkan Edit Sesuai Kebutuhan Aplikasi yang Anda Buat...</h1>
<h3>hehehehehey.....</h3>
</body>
</html>
- Dan jangan lupa untuk memper indah halaman login tang telah kita buat barusan, tambahkan sedikit css yang telah saya siapkan dan simpan dengan nama style.css berikut cssnya.
.content-full {
width: 50%;
margin: 0 auto;
border: solid 1px #00FFFF;
border-radius: 10px;
box-shadow: 0px 0px 5px #00FFFF;
background-color: #FFF;
padding: 20px;
opacity: 0.7;
}
.content-full:hover {
opacity: 1;
transition: all 0.5s;
}
.input-login {
text-align: center;
width: 500px;
padding: 10px;
font-size: 18px;
color: #0000FF;
border-radius: 10px;
border: solid 1px #00FFFF;
background-color: #CCFFFF;
opacity: 0.7;
margin-top: 15px;
box-shadow: 0px 0px 5px #00FFFF;
}
.input-login:hover {
opacity: 1;
transition: all 0.5s;
}
.submit-login {
background-color: #0000FF;
width: 520px;
padding: 10px;
font-size: 18px;
opacity: 0.7;
color: #FFF;
}
.submit-login:hover {
opacity: 1;
transition: all 0.5s;
}
.berhasil {
background-color: #0F0;
padding: 10px;
border-radius: 10px;
margin: 5px;
box-shadow: 0px 0px 5px #060;
}
.gagal {
background-color: #F00;
padding: 10px;
border-radius: 10px;
margin: 5px;
box-shadow: 0px 0px 5px #900;
}
Untuk mempercepat pembuatan seperti diatas anda dapat mengkopi paste sintak diatas hehehey :D.......
Sekian dulu untuk pertemuan kali ini semoga bermanfaat bagi kita semua Aamiin........
Dan sampai ketemu lagi ditutorial selanjutnya hehehey :D :v.......
Autor : Maz Phoerwantho
Komentar
Posting Komentar