Membuat Form dengan Implementasi Javascript

Tugas 3 PWeb

Link Penting


Deskripsi Tugas

Pada tugas ini, saya membuat website berisi form yang disertai dengan validasi menggunakan Javascript. Terdapat 2 halaman yang sudah dibuat, yaitu halaman login dan signup.


Dokumentasi Website

Halaman Login

Halamnan Login

Halaman ini menyajikan 2 inputan, yaitu username dan password. Untuk melakukan login dengan sukses, user harus memasukkan data pada kedua inputan tersebut. Javascript berperan dalam memvalidasi apakah input username maupun password valid dan bisa diterima

HTML Login

Saya menggunakan beberapa syntax HTML untuk membangun tampilan form login, di antaranya tag form, label, input, dan button.

Javascript Login

Kode program javascript di atas berperan untuk menjalankan sesuatu ketika user melakukan interaksi.

Fungsi validateForm berfungsi untuk melakukan validasi apakah inputan username dan password sudah terisi semua.

Fungsi submitForm berjalan ketika form di-submit.Fungsi ini memanfaatkan kembalian dari Fungsi validateForm untuk mengetahui apakah data inputan valid dan dapat diterima.

Fungsi signup berperan untuk bernavigasi ke halaman signup.



Halaman Signup

Halamnan Signup

Halaman ini menyajikan 4 inputan, yaitu name, email, password, dan password confirmation. Untuk melakukan signup dengan sukses, user harus memasukkan data pada semua inputan tersebut. Javascript berperan dalam memvalidasi apakah inputan sudah terisi semua, formatnya valid, dan sebagainya.

HTML Signup

Kode HTML di atas berperan menyajikan tampilan form ke dalam website menggunakan beberapa tag seperti form, table, label, input, dan button.

Javascript Signup

Kode javascript di atas berperan untuk melakukan validasi terhadap data inputan user.

Fungsi validate melakukan validasi terhadap input user. Validasi yang dilakukan di antaranya cek data kosong, format name, format email, kesamaan konfirmasi password, dan format password.

Fungsi createAccount berjalan ketika form di-submit dan memberikan respons berhasil tidaknya proses pembuatan akun. Fungsi ini membutuhkan nilai kembalian dari fungsi validate untuk mengetahui apakah data inputan user valid dan dapat diterima.

Fungsi login berperan untuk bernavigasi ke halaman login.

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Website Profil Diri

Gambar
Tugas 1 PWeb Link Penting Lihat Website Lihat Portofolio Deskripsi Tugas Pada tugas ini, saya membuat website profil diri yang berisikan biodata dan pengalaman saya. Dokumentasi Website Penjelasan Kode File index.html Pada header, saya meng- import font Monserrat dan file style.css Potongan kode di atas mempresentasikan halaman awal yang muncul pertama kali saat web dibuka. Section ini berisi gambar beserta teks pelengkap seperti nama, jurusan, serta link icon menuju sosial media. Section ini mempresentasikan bagian tentang diri saya yang hanya berisi heading dan teks. Section ini mempresentasikan preferensi teknologi y...
Baca selengkapnya

Membuat Form Upload Gambar

Gambar
Tugas 7 PWeb Link Lihat Portofolio Deskripsi Tugas Pada tugas ini, saya membuat aplikasi CRUD menggunakan PHP dan MySQL yang form-nya memiliki input gambar. Dokumentasi Website Halaman awal Halaman form pendaftaran Redirect ke halaman awal setelah pendaftaran sukses Halaman daftar siswa Halaman edit data Redirect ke halaman daftar siswa setelah berhasil melakukan perubahan data. Nama data pertama berubah dari ITS menjadi ITS Surabaya Jika tombol hapus ditekan, maka data terhapus. Gambar di bawah m...
Baca selengkapnya

Membuat Web dengan Styling Bootstrap

Gambar
Tugas 5 PWeb Link Penting Lihat Website Lihat Portofolio Deskripsi Tugas Pada tugas ini, saya membuat website dengan styling bootstrap Dokumentasi Website Penjelasan Kode File index.html Pada head HTML di atas, saya menuliskan judul web pada tag title dan meng- import file bootstrap serta css custom milik saya. Kode di atas mempresentasikan header pada web. Saya mengisi navbar di dalam tag header. Styling navbar dibentuk dengan warna gelap, ditandai dengan class dark . Opsi navigasi navbar dibentuk menggunakan tag anchor . Kode di atas membentuk jumbotron atau banner pada web yang berisikan heading 1 dan teks paragraf. Kode di atas membentuk tam...
Baca selengkapnya