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.
<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 LOGIN
<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 LOGIN
Terima kasih :
#Admin
