Form Login pada WEB

Pada pertemuan kali ini, saya akan membuat form login yang mana biasanya form ini dibuat untuk mengakses suatu laman tertentu agar laman tersebut aman dari pengguna yang tidak berkepentingan.Sebelumnya pada pembuatan form login yang saya buat ini merupakan form login sederhana yang nantinya akan dibuat pada halaman web. Berikut adalah syntaks html form login sederhana yang telah dibuat untuk dapat ditampilkan pada laman web.

Pada gambar diatas dimana pada bagian ini terdapat syntaks untuk pembuatan border atau tabel pembuatan form login, dimana bagian background tabel berwarna biru. Selanjutnya pada bagian ini pula terdapat script yaitu java script, dimana java script ini digunakan untuk pembuatan variabel username dan password yang digunakan pada form login.

Pada pembuatan script disini, tipe script yang digunakan sangat sensitive dimana masing masing karakter harus sesuai dengan apa yang divariabelkan, baik besar kecilnya huruf yang digunakan. Misalkan pada variabel username yang didefinisikan yaitu “Asep”, jika menggunakan username asep maka login tidak dapat berhasil dilakukan, karena huruf a yang digunakan tidak besar karena case yang digunakan sensitive jadi harus sama dengan apa yang didefinisikan sebelumnya oleh variabel tersebut.

Pada gambar ini juga terdapat pesan atau alert dimana jika berhasil masuk dengan akun dan password yang benar maka akan tampil alert “silahkan login”. Sedangkan jika gagal login maka akan tampil alert “akun atau password tidak valid”. Selanjutnya pembuatan tabel pada body laman web dimana pada bagian ini terdapat menu username dan password seperti pada gambar berikutnya yang merupakan lanjutan dari gambar sebelumnya.

Pada gambar kedua ini, terdapat bagian untuk pembuatan button username dan password dimana pada form login ini username yang digunakan berupa text sedangkan password yang digunakan berupa text maupun angka dengan sesuai yang telah didefinisikan oleh password sebelumnya.

Selanjutnya pada button login disini berupa type inputan submit dan sedangkan pada button lupa password disini berupa type inputan reset, dimana jika menekan button lupa password maka username dan password yang digunakan akan direset dan kembali kosong untuk diisi dengan username dan password yang baru.

Berikut adalah tampilan yang dihasilkan jika menginput username dan password dengan benar, yaitu dengan mengisi username “Asep” dan mengisi password “qwerty’.

Setelah gambar diatas adalah tampilan bila berhasil login dengan mengisi username dan password dengan benar, berikut adalah tampilan jika mengisi username dan password tidak sesuai apa yang sebelumnya telah didefinisikan.

Sekian penjelasan saya tentang pembuatan menu login pada halaman web secara sederhana, semoga dapat bermanfaat untuk yang membutuhkannya.