Assalamu'alaikum!!!
LOGIN MULTI USER merupakan sebuah system login yang dapat digunakan untuk login oleh lebih dari satu level user (penggguna). Login multi User biasanya digunakan pada pembuatan aplikasi website berbasis umum seperti, website pemerintahan, website sekolah, dan cms seperti wordpress dan sebagainya.
Oke, mari kita lanjutkan!!
Buat terlebih dahuli sebuah folder dengan nama ujikom di dalam htdocs kalian, kemudian buatlah sebuah file bernama login.php dan ketikkan kode seperti berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Halaman Login | Masuk</title>
</head>
<body>
</body>
</html>
Kemudian buatlah sebuah div dengan ID form-login di dalam body sebagai berikut ini :
<div id="form-login">
</div>
Kemudian pada bagian head kita buat sebuah style untuk membuat css secara internal dan kita mulai dengan pemberian css reset seprti berikut.
body {
margin: 0px; /* digunakan untuk mensetel margin pada bagian body menjadi 0 */
padding: 0px; /* digunakan untuk mensetel padding pada bagian body menjadi 0 */
font-family: sans-serif; /* digunakan untuk mensetel jenis font pada web menjadi san-serif */
}
Apa itu css reset?
Sedikit penjelasan mengenai CSS RESET. CSS RESET merupakan sebuah css yang kita berikan untuk mensetel ulang settingan yang dibuat oleh browser. Hal ini dibutuhkan karena settingan setiap browser berbeda-beda. Ada yang memberikan margin dan padding bawaan dengan ukuran 5px (5 pixel). Juga jenis font yang digunakan berbeda pula.
Sekarang kita berikan style atau gaya pada div dengan ID form-login tadi seperti berikut :
#form-login {
width: 500px;
overflow: auto;
margin: 300px auto;
background: #eee;
}
Penjelasan :
width kita gunakan untuk memberikan ukuran lebar pada ID form-login.
overflow dengan nilai auto digunakan sebagai pengganti ukuran tinggi (height) yang dapat berubah-ubah sesuai dengan banyaknya atau panjangnya isi dari ID form-login.
Margin 300px auto akan memberikan margin sebanyak 300px(pixel) pada bagian atas dan bawah sedangkan pada bagian kiri dan kanan kita berikan nilai auto (otomatis) agar posisi div dengan ID form-login bisa di tengah.
background digunakan sebagai pemberi warna latar belakang dari si ID form-login.
#eee adalah kode warna dalam bentuk decimal untuk warna abu-abu tipis.
Saat Anda jalankan, pada http://localhost/ujikom/login.php belum ada yang bisa ditampilkan oleh web browser Anda ini di karenakan oleh tinggi dari ID form-login yang kita buat auto. Jadi agar ada tampilannya kita buat terlebih dahulu form berikut dan ketikkan tepat di dalam DIV ID form-login.
<form action="proses-login.php" method="post">
<table cellpadding="5" cellspacing="5">
<tr>
<td>Email</td>
<td>:</td>
<td><input name="mail" type="email"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="pass" type="password"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input name="submit" type="submit" value="Masuk">
<input name="clear" type="reset" value="Hapus">
</td>
</tr>
</table>
</form>
Mari kita pahami satu-persatu kodenya.
<form action="proses-login.php" method="post"></form>
PENJELASAN !!Attribut action digunakan untuk mengarahkan isi form akan di proses dimana.
Dan proses-login.php adalah tempat kita akan memproses isi dari form tersebut.
Attribut method adalah attribut yang akan menentukan metode apa yang akan kita gunakan untuk mengirimkan isi dari form tersebut. Nilainya ada get dan post.
Post digunakan untuk mengirimkan data (isi form) yang bersifat sensitif atau pribadi. Dengan kata lain metode ini adalah temasuk kedalam keamanan dalam pengiriman karena data yang di inputkan tidak akan di tampilkan pada adressbar.
Selanjutnya :
<table cellpadding="5" cellspacing="5"></table>
PENJELASAN!!Untuk penjelasan mengenai table dan attributnya bisa dilihat disini Pengertian Dan Penggunaan Dalam HTML.
<input name="mail" type="email"><input name="pass" type="password"><input name="submit" type="submit" value="Masuk"><input name="clear" type="reset" value="Hapus">PENJELASAN!!
Attribut name adalah attribut yang bisa dibilang penting karena nilai dari attribut ini
mail,
pass,
submit,
clear nantinya akan kita gunakan dalam
pemrosesan.
Mail,
pass,
submit,
clear ini adalah
nilai dari attribut name yang
bisa kita beri nama bebas sesuka hati.
Attribut type digunakan sebagai
pemberi nama untuk jenis inputan/masukan yang diberikan.Email adalah
nilai dari attribut type yang berfungsi untuk inputan janis email, yang mengharuskan penginput atau user untuk menginputkan text bersifat email atau mengandung karacter @ (at) di dalamnya.
contoh :
ferdians@ujikom.com.
password adalah
nilai dari attribut type yang
berfungsi untuk inputan jenis kata sandi dan bersifat rahasia. ketika user
menginputkan/mengetikkan text di dalamnya maka,
otomatis yang kita lihat adah
bullet atau titik hitam yang besar.
submit dan dan
reset fungsinya hampir sama namun sedikit berbeda. Pada
attribut type dengan nilai
submit ini akan
berfungsi sebagai tombol lakukan proses. Sedangkan
attribut type dengan nilai
reset ketika di tekan akan
memproses penghapusan inputan yang telah diketikkan atau mereset yang telah di inputkan.
Attribut value adalah
attribut yang akan menampilkan nilainya sebagai nama dari tombol atau isi dari input.Masuk dan
hapus adalah
nilai dari attribut value.
Oke selanjutnya kita bahas pada postingan susulan. yaitu
proses-login.php.
Wassalamu'alaikum Warohmatullohi Wabarokatuh.
Download file FORM LOGINTerima kasih :
#Admin
