Membuat halaman login bukanlah hal sulit. untuk membuat halaman login kita bisa memanfaatkan fungsi SESSION untuk mengolah proses login. misal nya saat login sukses atau berhasil maka akan tercipta sebuah session yang mana session ini akan kita gunakan sebagai pengaman. karena user yang belum login tidak akan bisa mengakses sebuah halaman tanpa melakukan login terlebih dahulu .
yang kita butuhkan untuk membuat proses login di php anda harus terlebih dahulu membuat database, tabel admin untuk mengisi username dan password .
membuat database
membuat tabel admin
mengisi username dan password
di sini saya membuat akun admin dengan username admin dan password carikode123 .
setelah database selesai . maka lanjutkan dengan membuat file2 berikut ini .
membuat login di php
1. file login.php = pada file ini buat form/halaman login
membuat halaman login
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>
<div id="kotak">
<div id="atas">
LOGIN ADMIN
</div>
<div id="bawah">
<form method="post" action="aksi-login.php">
<input class="masuk" type="text" autocomplete="off" placeholder="Username .." name="username"><br/>
<input class="masuk" type="password" autocomplete="off" placeholder="Password .." name="password"><br/>
<input id="tombol" type="submit" value="Login">
</form>
</div>
</div>
</body>
</html>
berikut file css nya jika anda ingin tampilan yang lebih enak di pandang
body{
background:#ECF0F1;
font-family: sans-serif;
}
#kotak{
width: 520px;
height: 250px;
background: #fff;
margin: 150px auto 100px auto;
color:#2ECC71;
}
#atas{
height: 35px;
width: 520px;
text-align: center;
font-size: 15pt;
padding-top:20px;
}
#bawah{
height: 200px;
width: 520px;
}
.masuk{
width: 400px;
height:40px;
margin-top:10px;
margin-left: 60px;
font-size: 12pt;
border: 1px solid #2ECC71;
padding-left:10px;
color:#2ECC71;
}
.masuk:focus{
width: 400px;
height:40px;
margin-top:10px;
margin-left: 60px;
font-size: 12pt;
padding-left:10px;
color:#1ABC9C;
outline: none;
box-shadow: 0 0 5px #2ECC71;
}
#tombol{
width: 400px;
height:40px;
margin-top:10px;
margin-left: 60px;
background: #2ECC71;
border:none;
color:#fff;
font-size: 14pt;
outline:none;
}
2 . buat file php untuk membuat koneksi ke database . di sini saya memberi nama config.php
hal ini di lakukan karena username dan password berada di database, dan kita hanya akan melakukan pencocokan username password yang di inputkan dengan yg ada di database. penjelasan ini sudah saya jelaskan pada tutorial sebelumnya yaitu membuat koneksi php dengan databse, bisa teman-teman lihat pada tutorial sebelum nya di carikode.com tutorial belajar PHP lanjutan : cara menghubungkan PHP dengan database MySQL .
<?php
mysql_connect("localhost","root","xxx"); // isi sesuai host anda
mysql_select_db("db_web"); // nama database yang saya buat tadi
?>
koneksi php dengan mysql
3. buat file php untuk aksi dari form login.
<?php
session_start(); //mulai session, krena kita akan menggunakan session pd file php ini
include 'config.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 admin 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:index.php"); // dan alihkan ke index.php
}else{ //jika tidak tampilkan pesan gagal login
echo "gagal login";
}
?>
penjelasan nya. kita meinclude file config.php ke dalam file ini agar file ini dapat terkoneksi juga dengan database, kemudian menangkap data dari form input yang kemudian mengubahnya ke bentuk variabel untuk memudahkan kita dalam mencocokkan nya dengan pengecekan query .
pada perintah mysql_query, kita melakukan pengampilan data dari tabel admin di mana username yang bernama seperti pada pengisian form login dan password yang seperti yang di isi pada form login tadi . kemudian melakukan pencocokan.
pada kondisi percabangan yang di lakukan kita memeriksa apakah username dan password yg di input sesuai dengan yg ada pada databse ? jika sesuai akan di buat sebuah session dengan nama yg sesuai dengan nama username.dan kemudian mengalihkannya ke halaman index.php.
nah, pada halaman index.php ini lah yg biasa nya menjadi halaman admin atau ruang kerja aadmin pada aplikasi web .
4. buat index.php
<?php
session_start();
if(empty($_SESSION['username'])){
header("location:login.php");
}
echo "selamat datang ".$_SESSION['username'];
?>
<br/><br/><br/>
<a href="logout.php">Logout</a>
pada file index.php ini kita membuat sistem keamanan sederhana dengan membuat sebuah percabangan. yang bertujuan untuk mengecek apakah sudah memiliki session atau belum . jika belum maka akan di alihkan ke halaman login.php . nah untuk memiliki session sehingga dapat melihat file index.php ini anda harus terlebih dahulu login. karena perintah membuat session nya tadi terdapat pada proses saat login .
5 . buat file logout.php
file logout.php ini kita gunakan sebagai fungsi logout nanti nya saat user ingin logout dari web. cara kerja dari fungsi logout ini adalah dengan menghapus semua session kemudian mengalihkan halaman ke login.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
?>
disini kita akan memulai melakukan login, saya login dengan username admin dan password carikode123 seperti pada contoh database yg sudah kita buat
mencoba login
dan saat klik login
.
Login sukses
saat login sukses akan muncul pesan selamat datang admin. kata admin di ambil dari session username. dan jika link logout di klik akan di alihkan ke logout.php.
kemudian bagaimana jika user salah dalam mengisi username dan password ??
percobaan login
dan saat klik login
gagal login
akan muncul pesan gagal login .
0 komentar:
Post a Comment