Skip to main content

Tugas 5: Membuat Formulir Validasi dengan JavaScript

By

Tugas 5: Membuat Formulir Validasi dengan JavaScript

Nama: Aulia Eka Putri Aryani
NRP: 05111940000044
Kelas: PWEB-B

Pembahasan

Pada pertemuan PWEB minggu lalu, saya diminta untuk membuat website pendaftaran kuliah tatap muka yang merupakan formulir validasi yang tidak dapat di-submit hingga seluruh datanya terisi. Untuk membuat website ini, saya mengimplementasikan HTML, CSS, dan JavaScript yang telah dipelajari sebelumnya serta memanfaatkan Github Pages untuk meng-host halaman website ini. Adapun isi dari formulir yang saya buat adalah sebagai berikut.

  1. Fakultas
  2. Departemen
  3. Nama
  4. NRP
  5. Email
  6. Kota
  7. Penyintas
  8. Dosis Vaksin
  9. Jenis Vaksin
  10. Ketersediaan Tatap Muka

Seperti yang diminta oleh dosen saya, saya tidak mengizinkan user untuk melakukan submit formulir jika terdapat data yang belum terisi dan mengeluarkan alert apabila terdapat data yang kosong. Selain mengeluarkan alert, saya juga memberikan focus pada data yang kosong. Setelah seluruh data sudah diisi oleh user, saya meminta konfirmasi dari nya untuk memastikan bahwa data yang ia isi benar. Namun, dalam pembuatan form ini, saya tidak dapat menggunakan action dan method post, karena tidak diizinkan oleh Github Pages. Sehingga, alih-alih berpindah ke halaman yang menyatakan data berhasil disimpan, saya memanfaatkan alert yang menyatakan bahwa data berhasil disimpan dan kembali ke halaman form.

Berikut adalah tampilan-tampilan dari halaman web yang saya buat. Untuk lebih jelasnya, dapat diakses pada link berikut. 

Tampilan Website

Tampilan Apabila Terdapat Data Yang Kosong

Tampilan Fokus Pada Data Yang Kosong

Tampilan Konfirmasi Formulir

Tampilan Data Berhasil Disimpan

Adapun souce code dari website yang saya buat adalah sebagai berikut. Atau dapat dilihat pada link berikut.

  • index.html (sebagai halaman utama website)
  • style.css (sebagai style dari website)
  • departemen.js (sebagai script untuk menampilkan option departemen pada fakultas yang dipilih)
  • validation.js (sebagai script untuk validasi form website, mulai dari mengecek kelengkapan data dan mengeluarkan alert, meminta konfirmasi submit, hingga menampilkan alert sukses)
  • focus.js (sebagai script untuk memberikan fokus pada data yang belum terisi)

Labels:

Comments

Post a Comment

Popular posts from this blog

Tugas 9: Implementasi Query dan Storage

By
Tugas 9: Implementasi Query dan Storage Nama: Aulia Eka Putri Aryani NRP: 05111940000044 Kelas: PWEB-B Pembahasan Melanjutkan website pendaftaran siswa pada  tugas sebelumnya , kali ini saya diminta untuk menambahkan fitur upload foto pada formulir pendaftaran dan menampilkannya pada data pendaftar. Untuk pengaplikasiannya, foto disimpan pada folder image dan database akan menyimpan nama file tersebut. Untuk menghindari penamaan file yang sama, tanggal upload foto  akan ditambahkan pada nama file yang ingin disimpan tersebut. Adapun tampilan dari website pendaftaran siswa yang saya buat dapat dilihat pada gambar-gambar di bawah ini. Tampilan Home Tampilan Formulir Pendaftaran Tampilan Pendafta
Post a Comment
Read more

Tugas 3: Analisis Kegagalan RE Process melalui Film Dokumenter Downfall

By
Tugas 3: Analisis Kegagalan RE Process melalui Film Dokumenter Downfall Nama: Aulia Eka Putri Aryani NRP: 05111940000044 Kelas: RK-D Pembahasan MCAS (Maneuvering Characteristics Augmentation System) MCAS (Maneuvering Characteristics Aug mentation System) merupakan sistem baru yang dikembangkan oleh Boeing Company melalui Pesawat Boeing 737 Max. MCAS didesain untuk menurunkan hidung pesawat  secara otomatis   ketika  sudut serang ( angle-of-attack ) terlalu besar.  Ia memanfaatkan motor Speed Trim untuk memutar stabilisator horizontal ( h orizontal stabilizer )  setiap kali angle-of-attack yang  terlalu besar terdeteksi.  Hal ini dilakukan untuk mencegah pesawat berada dalam kondisi  stall – kondisi dimana koefisien angkat yang dihasilkan oleh foil (sayap dalam pesawat)  berkurang atau hilangnya  karena  angle-of-attack  yang terlalu besar . Namun, apabila sensor  angle-of-attack ,  sensor yang terletak pada kedua sisi
Post a Comment
Read more

Tugas 1: Identifikasi Kebutuhan pada Studi Kasus

By
 Tugas 1 : Identifikasi Kebutuhan pada Studi Kasus Nama: Aulia Eka Putri Aryani NRP: 05111940000044 Kelas: RK-D Pembahasan 1. Deskripsikan aplikasi parkir Aplikasi Transaksi Parkir Non Tunai merupakan aplikasi parkir terintegrasi yang dikembangkan oleh Liquid Parking Technology dengan tujuan untuk mempermudah sistem ticketing dan pembayaran parkir. Pengguna dapat memasuki area parkir dengan menggunakan sistem ticketing otomatis yang mendeteksi plat nomor kendaraan pengguna. Teknologi yang digunakan untuk mendeteksi  plat nomor kendaraan pengguna adalah  LPR (License Plate Recognition) atau ANPR (Automatic Car Number Plate Recognition). Setelah  plat nomor kendaraan terdeteksi sistem, pengguna dapat mengambil karcis parkir yang telah dicetak sistem dan memasuki area parkir yang telah dibuka. K arcis parkir  memuat informasi seperti nomor karcis, plat nomor kendaraan pengguna yang terdeteksi, waktu masuk parkir, dan barcode  karcis. Untuk dapat keluar dari area parkir, pengguna harus me
Post a Comment
Read more