Tutorial Membuat Form Login dengan CSS with Java Script

Cara Mmembuat Form Login Dengan HTML dan CSS

Assalamu'alaikum warahmatullahi wabarakatu

Pada kesempatan kali ini saya akan memberikan tutorial bagaimana cara membuat Form Login dengan HTML, CSS di tambah dengan JavaScript. Kali ini saya menggunakan aplikasi XAMPP dan Sublime Text 3. XAMPP digunakan untuk membuka server lokal sedangkan Sublime Text 3 untuk menuliskan coding yang akan kita buat.

1. Pertama buka dulu aplikasi XAMPP lalu tekan start pada Apache

2. Kemudian buat folder baru di folder C:\xampp\htdocs\kuliah\login-css-with-java. Buat folder baru bernama login-css-with-java seperti diatas.

3. Setelah membuat folder barunya baru lah buka aplikasi Sublime Text 3 nya lalu buka File-Open Folder dan pilih folder yang kita buat tadi. Setelah di buka klik kanan pada folder yang kita buka tadi yang berada di sisi kiri atas pilih New File, setelah membuat file baru save file nya langsung dengan menekan Ctrl+S dan buat nama file nya login.php atau login.html lalu save.

4. Langkah selanjutnya adalah kita mengetikkan syntax untuk membuat form login nya, syntaxnya adalah sebagai berikut :

 

Di dalam syntax saya menambahkan Java Script untuk menambahkan beberapa fungsi.
5. Setelah semua syntax telah kita masukkan sekrang saat nya membuat file baru lagi, klik kanan pada folder di sisi kiri atas dan pilih New File seperti langkah 3. Ctrl+S dan buat file bernama style.css dan save. Lalu masukkan syntax sebagai berikut :

6. Di dalam codingan saya juga menambahkan beberapa gambar supaya terlihat sedikit lebih bagu. Caranya cari gambar yang ingin kita masukkan lalu letakkan di folder yang kita buat di atas. Di dalam syntax kita bisa kita panggil dengan menyebut nama dari file foto tersebut dan di ikuti dengan format foto tersebut, seperti jpg atau png. 

7. Setelah kita selesai dengan semua syntax, baru lah kita lakukan pemanggilan dengan browser pencarian. caranya ketik di kolom pencarian : localhost/kuliah/login-css-with-java . Sebenarnya ini terhantung dari apa nama file yang kita buat tadi. Setelah di panggil tampilan form login saya sebagai berikut :

 

Di dalam coding saya menambahkan username khusus dan juga password, saat kita salah memasukkan username ataupun password akan muncul pop up "anda salah 1 kali " , jika sampai salah 3 kali maka akan muncul "anda salah 3 kali anda di blokir" maka kita tidak akan bisa memasukkan password maupun username lagi. Tapi jika kita benar memasukkan password dan username maka akan muncul pop up "Log In Berhasil"

 Mungkin cukup sekian tutorial dari saya, lebih dan kurang nya saya mohon maaf

Wassalamu'alaikum warahmatullahi wabarakatu