Membuat Form Login Menarik Menggunakan PHP

Pernahkah anda masuk form login, dimana anda harus membubuhkan username dan password?.....tentu saja pernah donk!..
hal seperti ini banyak anda jumpai di facebook,twitter dll sebagai pengenal registrasi pada situs-situs tersebut.
sekarang yang jadi pertanyaan nya bagaimana si membuta form login tersebut, pada dasarnya sangat sederhana
langkah awal , terlebih dahulu
kita membuat file css-nya, baru
kemudian dilanjutkan dengan membuat file php dan html

CSS disini berfungsi sebagai kerangka utama dalam pembuatan
halaman web

Sedangkan PHP sendiri berfungsi sebagai pengatur data yang akan
digunakan pada pembuatan form login

File html seperti biasanya, digunakan untuk menampilkan
halaman web yang telah kita desain sebelumnya

Berikut adalah langkah-langkah dalam membuat form login
sederhana :

1. Membuat file css seperti di bawah ini:

Coding CSS Form Login:

 <style type="text/css"> #apDiv1 { position:absolute; width:373px; height:330px; z-index:1; left: 289px; top: 136px; background-color: #FFFFFF; border: 2px solid Blue; } #apDiv3 { position:absolute; width:80px; height:25px; z-index:2; left: 289px; top: 274px; } .style3 { font-size: 10px; font-weight: bold; } #apDiv2 { position:absolute; width:412px; height:115px; z-index:2; top: 0px; left: 289px; } #header{ width:220px; height:98px; background-image: url(); top: 0px; left: 289px; } #footer{ width:373px; height:40px; top: 0px; left: 289px; } body { background-image: url(1.jpg); } </style> 

2. Lalu kita membuat file php seperti di bawah:

Coding PHP Form Login:

 <head> <title>Form Administrator</title> </head> <body> <?php if(($_POST['user']=='M.Nidhom') AND ($_POST['pass']=='nidhomcakep')) { echo 'Selamat, Anda Telah Berhasil Login dengan User Name :'.$_POST['user']; echo 'Selamat Datang.. ' . $_POST['user']; } else { echo "<body text='red'><center>Username atau Password Anda Salah...! <a href='3.html'><h4>Kembali Ke Login</h4></a></center></body>"; } ?> </body> </html> 

3. Membuat file html untuk menampilkan desain halaman web
yang telah kita buat sebelumnya

Coding HTML Form Login:

 <html> <head> <title>Form Login</title> <link rel="stylesheet" href="tugas.css" type="text/css" /> </head> <body onLoad="document.form1.user.focus(); backgroundimage= "1.jpg"> <form name="form1" method="post" action="tugas.php"> <div id="apDiv1"> <div id="header"> </div> <div align="center"> <img src="2.jpeg" align="center"> <div align="center"> User Name : <input type="text" name="user" size="40" value="" style="background-color:#00FF00"> Password : <input type="password" name="pass" size="40" style="background-color:#00FF00"> <input type="submit" name="submit" value=" E N T E R " onClick="admin()"> </div> </div> <div align="center" id="apDiv3"> </div> <div id="footer" align="center"> </div> </div> </form> </body> </html> 

Setelah membuat 3 file di atas, simpan ketiganya dalam satu
folder berikut file gambar yang digunakan sebagai tampilannya

Show...Jadinya akan seperti ini:
Try It!...Dengan Kreasi kamu sendiri

Seandainya ada kesalahan login, akan terlihat seperti berikut:

Sunday, April 4, 2010

Membuat Form Login Menarik Menggunakan PHP

0 comments:

About Me

Hubungi Saya

Post Blog

Iklan Vertikal

Rank Site

Tracking

Trafic Site

Blog Kunjungan

Followers

Recent Post

Recent Comments