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 4: Membuat Website Katalog Produk dengan CSS

By
Tugas 4: Membuat Website Katalog Produk dengan CSS Nama: Aulia Eka Putri Aryani NRP: 05111940000044 Kelas: PWEB-B Pembahasan Pada pertemuan PWEB terakhir kali, saya diminta untuk membuat website yang berisi katalog produk dengan menggunakan CSS yang telah dipelajari.  Sama seperti tugas-tugas sebelumnya, saya memanfaatkan Github Pages untuk meng- host  halaman web ini, dimana  default  domain yang digunakan adalah github.io.  Berikut adalah tampilan dari website yang telah saya buat. Untuk lebih lengkapnya dapat dilihat pada link berikut . Tampilan Website Konten website yang saya buat adalah beranda dari website. Saya membagi beranda menjadi 3 div utama, yaitu div yang berperan sebagai header, main, dan footer. Pada div header saya meletakkan logo, kolom pencarian, akun,  wishlist ,  bag , serta navigasi yang yang terdir...
Post a Comment
Read more

Evaluasi Akhir Semester

By
Evaluasi Akhir Semester Nama : Aulia Eka Putri Aryani NRP : 05111940000044 Kelas : PWEB-B Pembahasan Fitur-fitur yang akan saya bangun untuk aplikasi website sekolah saya disesuaikan dengan 4 role yang ada, yakni sebagai berikut. Admin Login Dashboard Menampilkan jumlah siswa aktif Menampilkan jumlah guru aktif Menampilkan jumlah pemasukan (dalam 1 bulan) Menampilkan jumlah pengeluaran (dalam 1 bulan) Manajemen Siswa Menambah data siswa Menampilkan data siswa Mengubah data siswa Menghapus data siswa Mencari data siswa Mengunduh data siswa Manajemen Guru Menambah data guru Menampilkan data guru Mengubah data guru Menghapus data guru Mencari data guru Mengunduh data guru Manajemen Orang Tua Me...
Post a Comment
Read more

Tugas 9: Requirement Modelling Language Loket.com

By
Tugas 9: Requirement Modelling Language Loket.com Nama: Aulia Eka Putri Aryani NRP: 05111940000044 Kelas: RK-D Pembahasan Loket.com adalah platform yang memiliki Ticketing Management Service (TMS) teknologi unggul dalam mendukung seluruh penyelenggaraan event, mulai dari distribusi dan manajemen tiket hingga penyediaan laporan analisa event di akhir acara.  Beberapa teknologi yang tersedia untuk memfasillitasi penyelenggara event dalam setiap tahap persiapan adalah sebagai berikut. Distributor tiket terlengkap untuk melakukan penjualan tiket penyelenggara event. Sistem pembayaran yang beragam dan aman sehingga memberikan kemudahan kepada calon pembeli. Gate management yang aman dan nyaman untuk akses saat event berlangsung sehingga event dengan jumlah penonton yang besar dapat ditangani dengan mudah. Sistem analisis data yang lengkap dan komprehensif setelah acara berlangsung untuk memudahkan penyelenggaraan event dalam menentukan strategi event selanjutnya. Business Objective Mode...
Post a Comment
Read more