السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Berikut langkah-langkahnya :
- Pastikan laptop anda sudah terinstall dengan XAMPP, dan pastikan Apache dan MySQL sudah diaktifkan.
- Masuk ke url "localhost/phpmyadmin".
- Buatlah sebuah database baru dengan nama "viscabarkah" (nama database bebas).
- Buatlah sebuah tabel baru dengan nama "user_login" (nama tabel bebas).
- Masukkan data baru ke "user_login" dengan struktur sebagai berikut:
- Masukkan data baru ke tabel "user_login" dengan meng-klik menu "tambahkan/insert" dan inputkan data dibawah ini:
- Jika anda ingin mengubah, salin dan hapus id, username, atau password, klik menu "user_login" dan pilih edit, copy, atau delete.
- Jika sudah sampai tahap ini, buka direktori tempat anda menginstall XAMPP tadi. Misal D:/xampp/htdocs/kemudian buat folder dengan nama "login" (nama folder bebas).
- Buka aplikasi "Notepad C++" (recommended), buatlah sebuah file .php dengan file-file yang dibutuhkan sebagai berikut:
-koneksi.php
<?php
mysql_connect("localhost","root",""); // isi sesuai host anda
mysql_select_db("viscabarkah"); // nama database yang saya buat tadi
?>
-login.php
<html>
<head>
<title>LOGIN</title>
<script type="text/javascript">
function validasi() {
var usernameValid = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zAZ]*)*$/;
var username = formulir.username.value;
var password = formulir.password.value;
var pesan = '';
if (username == '') {
pesan += '-Username harus diisi\n';
}
if (username != '' && !username.match(usernameValid)) {
pesan += '-Username tidak valid\n';
}
if (password == '') {
pesan += '-Password harus diisi\n';
}
if (pesan != '') {
alert('Maaf, ada kesalahan pengisian Formulir : \n'+pesan);
return false;
}
return true
}
</script>
</head>
<body>
<center>
<br><br><br><br><br><br><br><br>
<form name="formulir" action="proses_login.php" method="post" onSubmit="return validasi()">
<fieldset style="margin:auto; width:20%;">
<legend><h3>LOGIN</h3></legend></br><br>
<table border="0" width="300">
<tr>
<td>
<center><input type="text" name="username" value="" size="28" placeholder="Username"/></center>
</td>
</tr>
<tr>
<td>
<center><input type="password" name="password" value="" size="28" placeholder="Password"/></center>
</td>
</tr>
<tr>
<td align="center" colspan="2"><br>
<input class="button" type="submit" name="submit" value="Login">
</td>
</tr>
</table>
</form>
<br><br>
</div>
</div>
</fieldset>
</center>
</body>
</html>
-proses_login.php
<?php
session_start(); //mulai session, krena kita akan menggunakan session pd file php ini
include 'koneksi.php'; //hubungkan dengan config.php untuk berhubungan dengan database
$username=$_POST['username']; //tangkap data yg di input dari form login input username
$password=$_POST['password']; //tangkap data yg di input dari form login input password
$query=mysql_query("select * from user_login where username='$username' and password='$password'"); //melakukan pengampilan data dari database untuk di cocokkan
$xxx=mysql_num_rows($query); //melakukan pencocokan
if($xxx==TRUE){ // melakukan pemeriksaan kecocokan dengan percabangan.
$_SESSION['username']=$username; //jika cocok, buat session dengan nama sesuai dengan username
header("location:welcome.php"); // dan alihkan ke welcome.php
}else{ //jika tidak tampilkan pesan gagal login
echo "<script> alert('Username atau Password Salah'); location = 'login.php'; </script>";
}
?>
-welcome.php
<?php
session_start();
include "koneksi.php";
if(!isset($_SESSION['username'])){
header("location:login.php");
exit();
}
if(isset($_SESSION['username'])){
$username = $_SESSION['username'];
}
?>
<html>
<head>
<title>Home</title>
<style type="text/css">
h2 {
font-size: 30px;
text-align: center;
margin-top: 150px;
font-family: Agency FB;
}
h3 {
font-size: 15px;
text-align: center;
font-family: Calibri;
}
p {
text-align: center;
color: #000000;
width: 100px;
height: 23px;
border-radius: 25px;
background-color: #1efd62;
}
</style>
</head>
<body>
<h2>Welcome, <?php echo $_SESSION['username']; echo " "?><br></h2>
<h3>Selamat anda berhasil login!!!</h3>
<center><p><a href="logout.php">Logout</a></p></center>
</body>
</html>
-logout.php
<?php
session_start(); //perintah agar file ini membaca/mengenal/memulai session
session_destroy(); // perintah menghapus semua session yg ada
header("location:login.php"); // mengalihkan halaman ke login.php
?>
- Selanjutnya, buka web browser kalian (Mozilla, Chorme dsb) dan ketikan "localhost/login/login.php" pada address barnya.
- Lakukan proses login dengan menginputkan username dan password sesuai dengan data pada "user_login".
- Jika gagal login akan muncul notif bahwa ada kesalahan pada username atau password.
- Karena saya juga menggunakan javascript pada script "login.php", maka jika username dan password tidak diisi akan muncul notif sebagai berikut:
- Jika berhasil login akan masuk pada tampilan "welcome.php".
- Dan jika mengklik link "Logout" maka akan muncul menu login seperti tampilan awal.
0 komentar:
Posting Komentar