Membuat form login serta validasi merupakan 2 (dua) hal yang sama penting dalam pembuatan sebuah form yang akan dipergunakan untuk halaman login agar dapat mengakses halaman tertentu atau halaman dashboard admin pada website. Dalam merancang dan membuat sebuah website yang utuh tentunya tidak lepas dari peran sebuah halaman yaitu form login.
Apa fungsi validasi pada form login…? Form validasi pada sebuah form login berfungsi untuk melakukan pengecekan atau pencocokan terhadap inputan yang di masukan pada form input. Hal tersebut menjadi penting agar seorang user dapat mengetahui pesan yang ditampilkan, jika salah memasukan data atau mengosongkan field inputan pada form login. Disamping itu validasi juga berfungsi untuk melakukan verifikasi username dan password yang sudah di daftar pada database. Hal ini perlu dilakukan agar orang tidak dapat mengakses ke dalam sistem atau website yang kita miliki, karena datanya tidak terdaftar pada database kita. Demikian penjelasan mengenai form login dan validasi Inputan form login. Hee..hee..hee.., jadi panjang lebar pembahasannya...! OK.. Guys.., langsung aja pada materi inti tutorial ini tentang cara membuat form login serta validasi pada PHP dan MySQL. Berikut langkah-langkah yang harus di persiapkan:
- Pertama: Siapkan sebuah database pada php myadmin terlebih dahulu untuk penampungan data, contoh (belajar_login)
- Kedua: Buat sebuah tabel pada database (belajar_login) tersebut, contoh (login) seperti gambar berikut:
- Tiga: Buatlah sebuah folder pada xampp yang telah ter-instal pada komputer anda, contoh (C:\xampp\htdocs\latihan) untuk penyimpanan file php yang akan dibuat.
- Empat: Langkah berikutnya siapkan sebuah file php untuk pembuatan halaman login (contoh:index.php).
- Lima: Apabila halaman form index.php telah siap, langkah selenjutnya masukan source code php seperti berikut:
<!DOCTYPE
html>
<html
lang="en">
<head>
<title>Login
Box</title>
<link rel="shortcut icon"
type="image/x-icon" href="img/logo.png">
<!-- Meta
tag Keywords -->
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<meta
name="keywords" content="User Profile Form A Responsive
Widget,Login form widgets, Sign up Web forms , Login signup Responsive web
form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter
Forms,Elements" />
<script
type="application/x-javascript">
addEventListener("load", function() { setTimeout(hideURLbar, 0); },
false);
function
hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Meta
tag Keywords -->
<!-- css
files -->
<link
href="css/style.css" rel="stylesheet"
type="text/css" media="all">
<link
rel="stylesheet" href="css/font-awesome.min.css">
<!-- Font-Awesome-Icons-CSS -->
<script
src="js/civem.js"></script>
<!-- //css
files -->
</head>
<body>
<div
class="header">
<h1><font
color="#FF0033"> Form Login</font></h1>
</div>
<div
class="w3-main">
<div class="form-w3l">
<div class="img">
<img
src="img/logo.png" alt="image" height="100">
<h2>silahkan
login</h2>
<?php
//Koneksi dan Menentukan Database Di Server
error_reporting(0);
$server="localhost";
$user="root";
$pass="";
$db="belajar_login";
$konek=mysql_connect($server,$user,$pass)
or die ("KONEKSI GAGAL");
$konek_database=mysql_select_db($db)
or die ("DATABASE TIDAK BISA DIAKSES");
//Proses verifikasi login
if(isset($_POST['submit']))
{
$username=$_POST['username'];
$password=md5($_POST['password']);
$ret=mysql_query("SELECT
* FROM admin WHERE username='$username' and password='$password'");
$num=mysql_fetch_array($ret);
if($num>0)
{
$extra="admin/media.php";//
$_SESSION['alogin']=$_POST['username'];
$_SESSION['id_admin']=$num['id_admin'];
$_SESSION['akses']=$num['akses'];
$host=$_SERVER['HTTP_HOST'];
$uri=rtrim(dirname($_SERVER['PHP_SELF']),'/\\');
header("location:admin/media.php");
exit();
}
else
{
echo '<h4
style="color:red;">Username & Password Tidak
Sesuai.</h4>';
$extra="index.php";
$host = $_SERVER['HTTP_HOST'];
$uri = rtrim(dirname($_SERVER['PHP_SELF']),'/\\');
echo
"<meta http-equiv='refresh' content='4; url='>";
exit();
}
}
?>
</div>
<form
action="" method="post">
<div
class="w3l-user">
<span><i
class="fa fa-user"
aria-hidden="true"></i></span>
<input
type="text" name="username" placeholder="username"
required="" autofocus=""
data-errormessage-value-missing='username masih kosong'>
<div
class="clear"></div>
</div>
<div
class="w3l-password"><span><i class="fa fa-lock
w3l-2" aria-hidden="true"></i></span>
<input type="password"
name="password" placeholder="password"
required="" autofocus=""
data-errormessage-value-missing='password masih kosong'>
<div
class="clear"></div>
</div>
<div
class="w3l-btn">
<input
type="submit" name="submit" value="Login"/>
</div>
</form>
</div>
</div>
<footer>©
<?php echo date('Y');?>. All rights reserved. <a
href="https://www.kodingbuton.com/">kodingbuton.com</a>
</footer>
</body>
</html>
- Enam: Apabila telah selesai proses coding, simpanlah file php tersebut ke-dalam folder latihan yang sudah dibuat tadi.
- Tujuh: Tahap selanjutnya uji coba dan jalankan form login pada browser kalian dengan cara ketikan url pada address bar seperti berikut: localhost/latihan/index.php (pastikan XAMPP Control Panel pada komputer anda sudah Running). Lihat Cara Mengkoneksikan XAMPP Dengan Website PHP dan MySQL
- Delapan: Apabila anda melakukan semua tahapan dengan benar, maka akan tampil hasilnya seperti gambar berikut:
Lihat juga: Membuat Form Register dan Login Yang Menarik Dalam Satu Halaman
Demikian tutorial Membuat Inputan Textarea Dengan Fitur Editor Lengkap di PHP yang dapat saya bagikan, semoga bermanfaat dan memberi inspirasi buat proses pembuatan source code form penginputan website yang dikerjakan...!
Post a Comment