FORM VALIDASI

Tugas kali ini membuat website form validasi (di sini validasi untuk pendataan vaksin mahasiswa). Dalam proses pengerjaannya, menggunakan HTML, CSS (Bootstrap), dan JavaScript. JavaScript di sini dipakai untuk proses validasi beberapa kolom inputan yang ada di form. Untuk hosting web sendiri memakai Github.

Halaman Form


Saat mencoba untuk mengisi input bagian "Nama" dan mengosongkan bagian yang lain, akan tampak dialog alert seperti berikut. 

Fitur ini berlaku untuk semua kolom yang ada pada form, berurutan dari atas.

Dapat dilihat bahwa ada bagian untuk memilih status vaksinasinya, apabila belum memilih maka tidak muncul form input berikutnya, sedangkan jika telah memilih salah satunya maka akan tampil seperti berikut.


Untuk pilihan "Sudah"


Untuk pilihan "Belum"

Sama seperti sebelumnya, jika kolom input lanjutannya ada yang tidak terisi ketika user menekan submit, maka akan muncul alert dialog seperti berikut.


Lalu, ketika user telah melengkapi semua data yang dibutuhkan dan menekan submit, akan muncul alert dialog untuk meyakinkan user benar-benar ingin submit datanya atau tidak.


Ketika setuju untuk submit akan muncul dialog tab yang menyatakan bahwa submit data telah sukses.


Source code dari web berikut tersedia di repository github ini Laman website-nya dapat diakses pada link berikut.


Komentar

Posting Komentar

Postingan populer dari blog ini

STUDI KASUS PEDULI LINDUNGI

Gambar
  Deskripsi Aplikasi PeduliLindungi merupakan aplikasi berbasis  web  dan  mobile  milik Indonesia yang bertujuan untuk melakukan  contact tracing  (pelacakan penyebaran) Coronavirus Disease (COVID-19). PeduliLindungi mengandalkan data dari partisipasi masyarakat ( crowdsourcing ) untuk melaporkan data lokasi mereka ketika bepergian, memasuki tempat umum, dan juga data vaksinasi masyarakat. Data yang telah didapatkan lalu bisa digunakan untuk melacak penyebaran COVID-19. Fitur pelacakan PeduliLindungi untuk saat ini hanya bisa dilakukan di aplikasi berbasis mobile, baik itu Android maupun iOS. Aplikasi berbasis web hanya berfungsi untuk melakukan cek status kesehatan masyarakat (cek status vaksin, tes covid-19 dan warna label). Hal ini kemungkinan disebabkan oleh ketergantungan aplikasi PeduliLindungi dengan fitur GPS dan Kamera yang umumnya tersedia pada  smartphone . Saat ini, untuk memasuki tempat-tempat umum seperti universitas dan mall, diperlukan aplikasi PeduliLindungi pada smar
Baca selengkapnya

TUGAS PBO B (TRAFFIC LIGHT SIMULATOR)

Gambar
  ABSTRAKSI    Berikut saya akan menjelaskan sedikit tentang program yang akan saya posting berikut berupa sebuah  Traffic Light Simulator. Pada program berikut  saya akan membantu simulator ini untuk tampak lebih nyata dengan membuat output dengan tidak hanya dalam bentuk tulisan melainkan dengan grafis dengan menggunakan bentuk  Graphical User Interface  ( GUI ) di dalam pemograman java, salah satunya yaitu menggunakan java swing. Secara teori,  GUI  adalah suatu sistem yang membuat para pengguna atau user mampu berinteraksi dengan suatu perangkat komputer yang digunakan oleh si user tersebut.   Simulator ini memiliki tiga komponen warna yaitu Merah, Hijau, dan Kuning yang akan menyala secara berurutan dengan periode masing - masing warna yaitu 10 detik, dengan urutan Merah-Kuning-Hijau. DIAGRAM CLASS DIAGRAM Berikut adalah class diagram dari Traffic Light Simulator yang di bentuk di BlueJ OBJECT DIAGRAM Berikut Object Diagram dari Traffic Light Simulator yang telah dibuat IMPLEMENTA
Baca selengkapnya

WEB UPLOAD FOTO

Gambar
Pada tugas kali ini,  s aya membuat web database lanjutan dari tugas kemarin my sql sederhana dengan menggunakan HTML , PHP dan Bootstrap  namun ditambah fitur menambah foto. Berikut Tampilan dari website tersebut: Tampilannya halaman depannya seperti ini Dan berikut jika anda menekan tombol Daftar Baru Dan berikut jika anda menekan tombol Data Pendaftar Lalu jika anda menambahkan data di formulir pendaftaran akan terlihat seperti ini Source code dari web berikut tersedia di repository github  ini   Laman website-nya dapat diakses pada  link  berikut .
Baca selengkapnya