Membuat Form masuk / login menggunakan Notepad++
Memang sedikit sulit jika membuat sendiri mengetik satu-persatu kode HTML, apa lagi bagi pemula yang belum paham betul dengan kode HTML, salah pengetikan satu kode saja akan membuat form login yang dibuatnya akan berantakan bahkan tidak bisa mucul sesuai keinginan.
Nah.. untuk Anda yang ingin membuat form login tanpa mengetik satu-persatu caranya gampang, namun karena cara membuat form login ini menggunakan Notepad++, pastikan aplikasi Notepad++ tersebut sudah ada pada komputer Anda, jika belum ada, silahkan download disini dan ikuti panduanya.
Setelah aplikasi Notepad++ sudah selesai di install, mari ikuti panduan berikut ini:
1. Buka Notepad++ Anda
2. Copy kode dibawah ini dan pastekan pada Notepad++.
<html> <head> <title>Halaman Masuk</title> <link rel="stylesheet" type="text/css" href="style.css"></head> <body> <div class="kotak-masuk"> <div class="judul-masuk"> Silakan Masuk </div> <div class="masuk"> <form action=""method="POST"> <input type="text" name="user" placeholder="Masukan Username" /> <input type="password" name="pass" placeholder="Masukan Password" /><br> <input type="submit" name="masuk" value="masuk"/> </form> <?php if(isset($_POST['masuk'])){ $user = $_POST['user']; $pass = $_POST['pass']; if($user == "" && $pass == ""){ echo 'Username dan Password Tidak Boleh Kosong';} elseif($user == "user" || $pass == "pass"){ echo 'Berhasil Masuk';} else{ echo 'Data Anda Salah';}} ?> </div> </div> </body></html>Jika sudah di masukan pada Notepad++ selanjutnya klik berkas - simpan - berinama index.php, ikuti panduan gambar dibawah.
Kode akan berubah warna seperti ini.
Selanjutnya buat kode CSS
Kemudian copy dan paste kode CSS dibawah ini,
*{margin:0px;padding:0px}.kotak-masuk { width:300px; height:300px; border:1px solid #4682B4; margin:200px auto; }.judul-masuk { width:100%; height:30px; text-align:center; line-height:30px; font-weight:bold; background-color:#4682B4; font-size:20px; }.masuk { width:100%; height:270px; text-align:center; }.masuk form { margin-top:40px; }.masuk form input { margin-top:10px; width:250px; height:30px; }Jangan lupa disimpan terlebih dahulu, proses penyimpanan seperti kode HTML diatas,
Beri nama style.css
Terakhir Buka browser Anda, masukan alamat pencarian sesuai penyimpanan file Notepad++ Anda tadi, contoh untuk mendapatkan alamat url file seperti gambar dibawah.
Form Login versi Net Mmc sudah selesai..
Gimana? gampang kan... selamat di coba.
EmoticonEmoticon