Tugas 6 PWEB B 2021

Di postingan ini, saya akan menunjukkan proses pembuatan halaman login dan send message menggunakan Bootstrap. Hal-hal yang saya lakukan adalah:

1. Membuat halaman login

Pertama saya membuat halaman login terlebih dahulu. Saya menggunakan extension vscode yang mempunyai snippet untuk Bootstrap 5. Di snippet itu, style dan snippet Bootstrap 5 digunakan dari CDN yang disediakan oleh Bootstrap sendiri di dokumentasinya. Di login ini, saya membuat form yang mempunyai input username dan email, checkbox untuk remember me, dan tombol submit. Selain itu di halaman ini juga ada link ke halaman register dan contact us

2. Membuat halaman register

Meskipun untuk tugas tidak ada perintah membuat halaman register, saya tetap membuatnya karena tidak jauh berbeda dengan halaman login. Di halaman ini, selain ada form input username dan password, ada juga input email dan retype password. Selain itu, tidak ada checkbox untuk remember me. Mirip seperti halaman login juga, terdapat link ke halaman login dan contact us.

3. Membuat halaman contact us

Yang berikutnya adalah halaman contact us sebagai halaman untuk mengirim pesan. Di halaman ini saya membuat form yang memiliki input text nama, email, dan no telpon, juga input textarea untuk pesannya sendiri. Di halaman ini saya juga menggunakan Font Awesome untuk menambahkan icon sebagai dekorasi.

4. Deploy website

Seperti biasa, yang terakhir saya lakukan adalah men-deploy website. Sama seperti tugas-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

Tugas 6 MPPL A 2021

 Di postingan ini, saya akan menunjukkan prototype dari KAK Toko Online Shopi yang telah kami kerjakan. Anggota kelompok kami adalah:

• Muhammad Nur Abdurrauf 05111940000140
• Syamil Difaul Haq Sukur 05111940000196

Berikut adalah prototype yang sudah kami buat:

Tugas 5 MPPL A 2021

 Di postingan ini, saya akan menunjukkan KAK dari studi kasus toko online yang telah kami kerjakan. Anggota kelompok kami adalah:

• Muhammad Nur Abdurrauf 05111940000140
• Syamil Difaul Haq Sukur 05111940000196

Berikut adalah KAK yang sudah kami buat:

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