Tugas 5 PWEB B 2021

 Di postingan ini, saya akan menunjukkan proses pembuatan halaman survei status vaksinasi dan validasi formnya. Hal-hal yang saya lakukan adalah:

1. Membuat htmlnya

Hal yang pertama saya lakukan adalah membuat file htmlnya. Di halaman html tersebut, saya membuat form yang mempunyai input text nama, nrp, email, domisili, dropdown departemen, dan input bertipe radio untuk status vaksin. Saya menggunakan bootstrap sehingga untuk stylingnya hanya perlu menambahkan class-class ke element htmlnya.

2. Membuat javascript

Untuk web ini, saya menggunakan external javascript. Saya membuat file scriptnya lalu di html tadi saya menambahkan element <script> dengan atribut src ke file script yang telah dibuat. Di file script itu, saya membuat fungsi validateForm yang akan mengecek validasi form ketika form di-submit. Di fungsi itu, validitas setiap input diperiksa. Jika ada yang tidak valid, maka fungsi akan me-return false. Sedangkan jika valid, fungsi akan mengubah isi element dengan id success menjadi "Data berhasil di submit"

Untuk mengecek validitas setiap elemen, saya membuat fungsinya sendiri-sendiri. Saya juga membuat fungsi alertAndFocus yang akan digunakan fungsi yang mengecek validitas elemen untuk menampilkan alert dengan pesan alasan tidak valid dan membuat halaman focus ke elemen tersebut. Untuk syarat validitas, setiap elemen memiliki perbedaan. Untuk nama dan domisili, syarat validnya adalah sudah diisi. Begitu juga dengan departemen dan status vaksin, syarat validnya adalah sudah ada yang dipilih. Untuk NRP, selain ada syarat diisi, ada juga syarat input harus angka dan jumlah digitnya 14. Sedangkan untuk email, input harus memenuhi reges yang berfungsi untuk mengecek format email yang valid.

4. Men-deploy website

Langkah terakhir adalah men-deploy website tersebut. Masih sama seperti tugas sebelumnya, saya menggunakan github pages. Saya membuat sebuah repo baru di Github dan meng-push kodenya ke repo tersebut. Kemudian saya mengaktifkan github pages di setting repo tersebut sehingga website tersebut bisa diakses.

Websitenya bisa diakses dengan link berikut

Sementara source codenya bisa dilihat di link berikut