Anda yang membaca artikel ini…
…pasti sedang merancang sebuah desain web ya?
Benar?
Yang sedang membuat web, pasti sudah tak asing lagi mengenal istilah form login.
Iya kan?
Form login seperti nya sudah menjadi bagian yang penting dalam pembuatan desain web.
Entah itu dalam pembuatan web pendidikan.
Atau…
Web jual beli online.
Web yang…
…terdapat banyak user di dalam nya, membutuhkan yang nama nya form login.
Bagi Anda yang baru belajar bahasa pemrograman.
Atau bisa saja.
Yang sedang mengikuti kontes semacam…
…perlombaan web design. Memerlukan inpirasi untuk desain form login.
Anda bisa pelajari cara membuat form login di pembahasan ini dengan PHP dan MySQL sebagai pemroses data nya.
Tentu nya…
…dengan tampilan form login yang elegan dan juga sederhana. Tampilan yang enak dipandang mata.
Saya akan coba menjelaskan bagai mana langkah-langkah cara membuat form login yang elegan dan sederhana.
Baik.
Mari kita mulai pembahasan nya.
Pertama…
…kita buat dulu tampilan form login nya menggunakan skrip HTML dasar.
1. Membuat tampilan form login dengan skrip HTML
Buat folder ‘Login’ pada direktori C/xampp/htdocs.
Kemudian buka text editor Anda, (saya menggunakan notepad++).
Kemudian…
…ketikkan skrip di bawah ini.
<html>
<head>
<title>Tutorial Cara Membuat Form Login Dengan PHP MySQL Elegan Sederhana</title>
</head>
<body>
<form>
FORM LOGIN
<br/>
Nama User:
<br/>
<input type='text'>
<br/>
Kata Sandi:
<br/>
<input type='password'>
<br/>
<button>LOGIN</button>
</form>
</body>
</html>
Jika sudah diketikkan.
Simpan file tadi dalam folder C/xampp/htdocs/Login.
…beri nama file nya dengan index.php
Kemudian…
…buka file nya pada browser Anda.
Kalau skrip yang Anda diketikkan tadi sesuai dengan pembahasan ini. Maka hasil nya akan menjadi seperti gambar berikut.
Bagai mana hasil nya?
Apakah sesuai dengan hasil di atas?
Tidak sama?
Jika tidak sama, coba cek ulang skrip yang Anda ketikkan tadi.
Pastikan tidak ada karakter yang terlewat ataupun penambahan karakter lain nya.
Karena kesalahan satu karakter pun bisa berpengaruh terhadap hasil nya.
Baik.
Sampai tahap ini Anda telah membuat tampilan form login dasar menggunakan skrip HTML.
Bagai mana?
Dasar banget ya tampilan nya?
Atau malah dibilang belum jadi ya?
Hehe…
…rasa nya kurang enak dipandang.
Hm…
Mau agak lebih baik dan rapi tampilan nya?
Anda bisa membuat tampilan nya lebih baik dan nyaman dilihat.
Simak pembahasan selanjut nya.
2. Mempercantik tampilan form login dengan skrip dasar HTML
Karena tampilan form nya masih kurang menarik…
…selanjut nya tinggal merubah tampilan nya agar lebih menarik.
Anda juga bisa merubah tampilan form login hanya dengan skrip dasar HTML.
Perhatikan penambahan skrip berikut.
<html>
<head>
<title>Tutorial Cara Membuat Form Login Dengan PHP MySQL Elegan Sederhana</title>
</head>
<body>
<table border='1' cellpadding='5' cellspacing='0' bordercolor='#66aaff'>
<tr>
<td valign='middle' align='center' bgcolor='#66aaFF'>
<form action='login.php' method='post'>
<font face='impact' size='5' color='#fff' >FORM LOGIN</font>
</td>
</tr>
<tr>
<td align='left' bgcolor='#f0f0ff ' height='120'>
<font face='calibri' size='3' color='#0099FF' >Nama User:</font>
<br/>
<input type='text' name='namauser' size='30' >
<br/>
<font face='calibri' size='3' color='#0099ff' >Kata Sandi:</font>
<br/>
<input type='password' name='katasandi' size='30' >
<br/>
</td>
</tr>
<tr>
<td align='center' bgcolor='#66aaff' >
<button name='login' value='login' type='submit' >login</button>
</form>
</td>
</tr>
</table>
</body>
</html>
Skrip di atas adalah hasil modifikasi dengan penambahan tag <table> di dalam nya.
Coba pahami skrip nya.
Ada yang beda ?
Pasti ada.
Sesuaikan skrip HTML sebelum nya dengan skrip baru di atas hasil modifiasi tadi.
Atau copy dan gantikan saja dengan skrip di atas.
Kemudian…
…jika sudah disamakan.
Save file nya.
Buka file tersebut pada browser Anda, maka …
…hasil nya akan jadi seperti ini.
Nah!
Bagai mana ?
Lumayan kan hasil nya?
Lebih menarik tampilan nya kan?
Akan saya jelaskan sedikit bagian-bagian skrip tadi.
<form action=’login.php’ …>
Action=’login.php’, Proses login akan diarahkan ke halaman ‘login.php’.
<table border='1' cellpadding='5' cellspacing="0" bordercolor="#66aaff">
border, ketebalan garis tabel.
cellpadding, jarak antara tepi tabel dengan objek di dalam tabel.
cellspacing, jarak antara garis tiap cell.
bordercolor, warna garis tabel.
<td valign="middle" align='center' bgcolor='#66aaFF'>
valign, tata letak objek secara vertical.
align, tata letak objek secara horizontal.
bgcolor, warna latar belakang.
<font face="calibri" size="3" color="#0099FF" >
font face, jenis huruf.
size, ukuran huruf.
color, warna huruf.
Selanjut nya…
…tinggal kembangkan saja imajinasi Anda.
Tambahkan warna.
Pemilihan warna yang pas. Dapat menjadikan form login sederhana terlihat elegan.
Pelajari agar tampilan form login nyaman di pandang dengan pemilihan warna yang elegan.
Sampai sini Anda telah membuat form login dengan HTML…
…tampilan yang sederhana namun elegan.
Tahap berikut nya yaitu…
…tinggal mengkoneksikan form login dengan database.
3. Mengkoneksikan form login dengan database MySQL.
Saat nya masuk ke pembahasan inti.
Untuk membuat simulasi login user…
…kita perlu membuat file koneksi.php, login.php dan juga logout.php.
Namun…
…sebelum kita membuat file tersebut…
…kita tambahkan dulu database login user nya.
Terlebih dahulu anda harus Install web server Xampp.
Jika Anda telah menginstall web server nya.
Cara nya…
…tinggal ketikkan…
Localhost/phpmyadmin
… pada address bar browser.
Setelah itu…
…pada box ‘create new database’, isi nama database yang akan dibuat…
…isi dengan nama ‘ datalogin’.
Tekan ‘create’.
Pilih menu ‘SQL’.
Untuk membuat table, pada kotak kosong ketikkan skrip di bawah ini.
CREATE TABLE `tablelogin` (
`id` CHAR( 3 ) ,
`namauser` VARCHAR( 20 ) NOT NULL ,
`katasandi` VARCHAR( 20 ) NOT NULL ,
PRIMARY KEY ( `id` )
);
Tekan tombol ‘go’.
Skrip diatas menjelaskan Anda membuat table ‘tablelogin’ dengan kolom ‘id’ maksimal 3 karakter dan disetting sebagai ‘primary key’.
Kolom ‘namauser’ maksimal 20 karakter.
Juga…
…kolom ‘katasandi’ maksimal 20 karakter.
Pilih menu ‘SQL’ kembali untuk mengisi data table tadi.
Ketikkan skrip berikut pada kotak kosong…
INSERT INTO `tablelogin` ( `id` , `namauser` , `katasandi` )
VALUES (
'1', 'Oreki', '12345'
);
Pilih tombol ‘go’.
Skrip di atas menjelaskan Anda memasukan data ke dalam table ‘tablelogin’.
Dengan mengisikan nilai ‘1’ pada kolom ‘id’…
…mengisikan nama ‘Oreki’ pada kolom ‘namauser’…
…serta…
…mengisikan kata sandi ‘12345’ pada kolom ‘katasandi’.
Selamat !
Anda telah membuat database untuk login user nya.
Selanjut nya…
…kita buat file koneksi.php.
Buka text editor Anda.
Ketikkan skrip di bawah.
<?
mysql_connect("localhost","root","");
mysql_select_db("datalogin");
?>
Simpan dengan nama file koneksi.php.
Simpan dalam folder C/xampp/htdocs/Login.
Selanjut nya buat file login.php.
Buka kembali text editor.
Ketikkan skrip di bawah ini.
<?
session_start();
?>
<html>
<head>
<title>Tutorial Cara Membuat Form Login Dengan PHP MySQL Elegan Sederhana</title>
</head>
<body>
<?
include "koneksi.php";
$namauser= $_POST['namauser'];
$katasandi = $_POST['katasandi'];
$login = $_POST['login'];
$sql=mysql_query("SELECT COUNT(*) FROM tablelogin WHERE katasandi='$katasandi' AND namauser='$namauser'");
$hasil=mysql_result($sql,0,0);
if($login == 'login')
{
if($hasil == 1)
{
$_SESSION['namauser']=$namauser;
$_SESSION['katasandi']=$katasandi;
echo"
<html>
<head>
</head>
<body>
<table border='1' cellspacing='0' cellpadding='5' bordercolor='#66aaff'>
<tr>
<td align='center' bgcolor='#66aaFF'>
<font face='impact' size='3' color='#fff' >SELAMAT!</font>
</td>
</tr>
<tr>
<td align='center' height='60' bgcolor='#f0f0ff'>
<font face='calibri' size='3' color='#0099FF' >
$_SESSION[namauser]
<br/>
Anda berhasil login!</font>
</td>
</tr>
<tr>
<td align='center' bgcolor='#66aaff'>
<font face='impact' size='3' color='#fff' ><a href='logout.php'>LOGOUT </a></font>
</td>
</tr>
</table>
</body>
</html> ";
}
else
{
print"<meta http-equiv='refresh' content='3;url=index.php'>";
echo"
<html>
<head>
</head>
<body>
<table border='1' cellspacing='0' cellpadding='5' bordercolor='#66aaff'>
<tr>
<td align='center' bgcolor='#66aaFF'>
<font face='impact' size='3' color='#fff' >MAAF!</font>
</td>
</tr>
<tr>
<td align='center' height='60' bgcolor='#f0f0ff'>
<font face='calibri' size='3' color='#0099FF' >Anda gagal login!</font>
</td>
</tr>
<tr>
<td align='center' bgcolor='#66aaff'>
<font face='impact' size='3' color='#fff' >COBA LAGI!</font>
</td>
</tr>
</table>
</body>
</html>";
}
}
?>
</body>
</html>
Simpan file tersebut dengan nama login.php.
Simpan dalam folder C/xampp/htdocs/Login.
Yang terkahir kita buat file logout.php.
Ketikkan skrip di bawah ini
<?
session_start();
session_destroy();
header("Location:index.php");
?>
Simpan dengan nama logout.php.
Simpan dalam folder C/xampp/htdocs/Login.
Kita cek hasil kerja kita dari awal hingga akhir tadi.
Coba ketikkan ‘localhost/login’ pada address bar.
Maka akan tampil form login yang kita buat tadi.
Kemudian…
Isi nama user dan kata sandi dengan tepat.
Maka…
Hasil nya…
Adalah…
Seperti ini...
Selamat!
Anda berhasil membuat form login dengan PHP MySQL yang elegan dan sederhana ini.
Sebenar nya…
Ada cara membuat form login yang lebih…
Keren lagi…
Canggih lagi...
Dan…
Stylish lagi.
Yaitu membuat form login dengan JQUERY.
Dengan JQUERY...
...Anda bisa membuat form login dengan desain layak nya proffesional.
Hm..
Selesai juga akhir nya.
Sekian pembahasan mengenai Tutorial Cara Membuat Form Login Dengan PHP MySQL Elegan Sederhana.
Ini desain form login saya.
Mana desain form login Anda ?