Pertemuan 8 – API dan Validasi Form dengan JavaScript

Tujuan Pembelajaran

Mahasiswa diharapkan mampu menggunakan Fetch API untuk mengambil data dari server eksternal, memahami format JSON, dan mengimplementasikan validasi form client-side untuk meningkatkan keamanan dan user experience aplikasi web.

Fetch API dan JSON

Fetch API adalah cara modern JS untuk request data dari server tanpa reload halaman. Ia menggantikan XMLHttpRequest lama. JSON (JavaScript Object Notation) adalah format data ringan, mudah dibaca manusia dan mesin, seperti objek JS tapi string. Contoh: {"nama": "John", "umur": 25}. Fetch ambil JSON dari API, parse, dan tampilkan di web.

Penggunaan: fetch('url').then(res => res.json()).then(data => console.log(data)). Fetch async, jadi tidak blok UI. Error handle dengan .catch().

Validasi Form dengan JavaScript

Validasi form cek input user sebelum kirim ke server, cegah data salah seperti email tanpa @ atau password lemah. Lakukan di client-side untuk feedback cepat, tapi selalu validasi server-side juga untuk keamanan. Gunakan event listener di form submit, cek kondisi, alert atau highlight error.

Analoginya: Validasi seperti penjaga pintu, pastikan tamu sesuai aturan sebelum masuk.

Contoh Kode Lengkap

// Fetch API ambil data JSON dari API publik
fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network error');
        }
        return response.json();
    })
    .then(data => {
        // Tampilkan data di halaman
        let output = '';
        data.forEach(user => {
            output += '<p>' + user.name + ' - ' + user.email + '</p>';
        });
        document.getElementById('users').innerHTML = output;
    })
    .catch(error => console.error('Error:', error));

// Validasi form
function validateForm(event) {
    event.preventDefault(); // Cegah submit default
    let email = document.getElementById('email').value;
    let password = document.getElementById('password').value;
    
    if (!email.includes('@')) {
        alert('Email harus valid!');
        return false;
    }
    if (password.length < 6) {
        alert('Password minimal 6 karakter!');
        return false;
    }
    alert('Form valid, data dikirim!');
    // Kirim data ke server (simulasi)
}

// Panggil di HTML: <form onsubmit="validateForm(event)">
                

Penjelasan: Fetch ambil data user dari API dummy, tampilkan di div. Validasi cek email dan password, alert jika salah. Jalankan di browser dengan form HTML.

Tips Praktis

• Gunakan async/await untuk Fetch lebih readable: async function getData() { let res = await fetch('url'); let data = await res.json(); }.
• Untuk validasi, tambah regex untuk email kompleks: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email).
• Test API di tools seperti Postman dulu, lalu integrasi ke JS.
• Jika API gagal, handle dengan loading spinner atau pesan error user-friendly.

Ringkasan Materi

Fetch API dan JSON buat web ambil data dinamis dari luar, validasi form jaga input benar dan aman. Ini buat aplikasi seperti chat atau e-commerce lebih interaktif.

Latihan dan Diskusi

1. Buat halaman dengan form nama dan email, validasi JS sebelum alert "Berhasil". 2. Fetch data dari API publik (misal: https://jsonplaceholder.typicode.com/posts), tampilkan judul post di list. 3. Tambah error handling jika fetch gagal. 4. Diskusikan: Mengapa validasi client-side saja tidak cukup? Jika stuck, test di console browser.