Praktik: Membuat formulir pendaftaran dengan validasi
Berikut adalah **modul lengkap praktikum Web Programming**: 📌 **Membuat Formulir Pendaftaran dengan Validasi Menggunakan JavaScript** Dikhususkan untuk dijalankan di **Ubuntu 24.04** tanpa Visual Studio Code, cukup pakai tools bawaan seperti **Gedit**, **Nano**, dan **Firefox**.
---
- 📘 Modul Praktik: Formulir Pendaftaran + Validasi JavaScript
- 🎯 Tujuan Praktikum
- Mahasiswa mampu membuat form HTML untuk pendaftaran. - Mahasiswa memahami dan mengimplementasikan **validasi input** dengan JavaScript. - Mahasiswa dapat **menguji form** di Ubuntu menggunakan tools tanpa software berbayar.
---
- 1. 🧰 Tools yang Digunakan (Ubuntu 24.04)
| Tool | Keterangan | |---------------|-------------------------------------| | Gedit | GUI Text Editor bawaan GNOME | | Nano | Text editor berbasis terminal | | Firefox | Browser bawaan Ubuntu | | Chromium | Alternatif browser open source |
---
- 2. 📄 Struktur File
``` /formulir └── pendaftaran.html ```
---
- 3. 🧱 Formulir Pendaftaran (HTML + JavaScript)
- ✍️ File: `pendaftaran.html`
```html <!DOCTYPE html> <html> <head>
<title>Formulir Pendaftaran</title>
</head> <body>
Formulir Pendaftaran
<form id="formPendaftaran"> <label>Nama Lengkap:</label>
<input type="text" id="nama" required>
<label>Email:</label>
<input type="email" id="email" required>
<label>No. Telepon:</label>
<input type="text" id="telepon" required>
<label>Password:</label>
<input type="password" id="password" required>
<label>
<input type="checkbox" id="setuju"> Saya setuju dengan syarat dan ketentuan
</label>
<input type="submit" value="Daftar"> </form>
<script>
document.getElementById("formPendaftaran").addEventListener("submit", function(e) {
let nama = document.getElementById("nama").value.trim();
let email = document.getElementById("email").value.trim();
let telepon = document.getElementById("telepon").value.trim();
let password = document.getElementById("password").value.trim();
let setuju = document.getElementById("setuju").checked;
let pesan = "";
if (nama === "" || email === "" || telepon === "" || password === "") {
pesan = "Semua field harus diisi.";
} else if (!/^\d+$/.test(telepon)) {
pesan = "Nomor telepon harus berupa angka.";
} else if (password.length < 6) {
pesan = "Password minimal 6 karakter.";
} else if (!setuju) {
pesan = "Anda harus menyetujui syarat dan ketentuan.";
}
if (pesan !== "") {
e.preventDefault();
document.getElementById("pesan").innerText = pesan;
} else {
alert("Pendaftaran berhasil!");
}
});
</script>
</body> </html> ```
---
- 4. 🚀 Cara Menjalankan di Ubuntu
- 🔸 Dengan Gedit (GUI)
```bash gedit pendaftaran.html ```
- 🔸 Dengan Nano (Terminal)
```bash nano pendaftaran.html ```
- 🔸 Jalankan di Browser
```bash firefox pendaftaran.html ``` Atau buka file secara manual dari File Explorer → klik kanan → Open with Firefox.
---
- 5. 📚 Tugas Mahasiswa
1. Tambahkan kolom **"Ulangi Password"**:
- Validasi apakah kedua password cocok.
2. Tambahkan dropdown **pilihan jurusan**. 3. Tampilkan hasil input ke console browser (`console.log`) jika validasi berhasil.
---
Kalau kamu mau, aku bisa bantu bikin versi lengkap tugas (dengan dropdown jurusan + password confirm) atau bantu debug file kamu. Mau lanjut?