Mata Kuliah: Aplikasi Web (TW2). Durasi: 120 menit (Tatap Muka). Target: Mahasiswa semester 2.
Tujuan Pembelajaran
- Menghubungkan frontend dan backend melalui API
- Mengambil data dari server menggunakan fetch
- Mengirim data dari formulir secara asinkron
- Memperbarui tampilan tanpa memuat ulang halaman
Capaian Pembelajaran
Mahasiswa mampu menghubungkan frontend dan backend, mengambil dan mengirim data melalui fetch, serta memperbarui tampilan secara asinkron.
Konsep Materi
Perlu dipahami bahwa fetch bekerja secara asinkron, artinya kode dapat terus berjalan sementara permintaan sedang diproses oleh server. Hasil permintaan kemudian ditangani melalui fungsi yang dipanggil ketika respons tiba. Pola ini berbeda dengan cara kerja PHP yang berurutan, sehingga mahasiswa perlu membiasakan membaca dan menulis alur yang berbasis peristiwa. Memahami konsep asinkron menjadi titik penting dalam pengembangan frontend modern.
Tidak kalah penting adalah penanganan keadaan kosong. Saat API mengembalikan daftar yang tidak berisi data, tampilan sebaiknya menampilkan pesan yang ramah alih-alih kosong tanpa penjelasan. Sewaktu proses pengambilan sedang berlangsung, indikasi loading juga membantu pengguna memahami bahwa aplikasi masih bekerja. Kebiasaan memperhitungkan setiap keadaan, baik sukses, gagal, maupun kosong, merupakan tanda perancang yang matang.
Untuk menghindari kesalahan umum, perhatikan bahwa permintaan ke alamat yang berbeda asal dari halaman bisa ditolak oleh kebijakan keamanan browser. Saat membangun aplikasi di server lokal, sebaiknya seluruh berkas, termasuk halaman dan API, diakses melalui alamat yang sama agar tidak terhalang. Pemahaman tentang batasan ini membantu mahasiswa mengenali sumber kesalahan saat integrasi tidak berjalan sesuai harapan.
Membangun aplikasi terintegrasi juga menuntut disiplin dalam memisahkan tampilan, data, dan perilaku. JavaScript mengolah data dari API dan mengubah tampilan, sedangkan HTML dan CSS menata tampilan itu sendiri. Dengan pembagian yang jelas, perbaikan pada satu bagian tidak mudah merusak bagian lain, dan aplikasi tetap mudah dikembangkan selanjutnya.
Untuk mengapresiasi hasil kerja, mahasiswa diminta menjalankan kembali seluruh alur aplikasi end-to-end: dari menambah data melalui formulir, melihatnya tampil pada daftar, hingga memuat ulang halaman agar data tetap ada. Pengalaman melihat semua bagian bekerja bersama inilah yang memberi kepuasan tersendiri dan memantapkan pengertian tentang bagaimana sebuah aplikasi web utuh dibangun dari komponen-komponen yang telah dipelajari satu per satu.
Integrasi frontend dan backend adalah proses menghubungkan sisi tampilan dengan sisi server sehingga aplikasi web menjadi satu kesatuan yang dinamis. Pada praktik awal, halaman hanya menampilkan data statis yang ditulis langsung di HTML. Setelah backend dan API tersedia, frontend harus mampu mengambil data dari server dan menampilkannya, sekaligus mengirim data perubahan dari pengguna untuk disimpan. Pertukaran data ini menjadikan aplikasi benar-benar hidup dan bermanfaat.
Salah satu cara utama berkomunikasi antara JavaScript dan API adalah menggunakan objek yang tersedia pada setiap browser, yaitu fetch. Fungsi ini mengirim permintaan HTTP dari browser, termasuk metode GET atau POST, dan mengembalikan hasil yang biasanya berupa JSON untuk diolah. Dengan menghubungkan fetch ke endpoint API, frontend dapat meminta daftar data lalu menampilkannya sesuai struktur tampilannya.
Untuk mengirim perubahan, formulir yang tadinya memuat ulang halaman dapat diubah menjadi pengiriman asinkron dengan JavaScript. Nilai dari formulir dikumpulkan dan dikirim melalui fetch dengan metode POST tanpa perlu memuat ulang. Respons dari server, misalnya pesan berhasil atau gagal, kemudian ditampilkan di halaman. Pola ini menciptakan pengalaman yang responsif tanpa pindah halaman.
Setelah data berhasil diambil, frontend membangun elemen tampilan secara dinamis melalui pemrograman DOM. JavaScript membuat elemen baru sesuai data yang masuk dan menyisipkannya ke dalam halaman. Dengan menggabungkan fetch untuk mengambil data dan pembuatan DOM untuk menampilkannya, aplikasi dapat memperbarui tampilan seiring aktivitas pengguna. Kemampuan menerjemahkan antara JSON dan tampilan menjadi tuntutan penting bagi pengembang web.
Langkah Praktik
- Pastikan API pada pertemuan sebelumnya berjalan di server lokal.
- Buka halaman frontend melalui alamat server agar permintaan lintas asal tidak terhalang.
- Gunakan fetch GET untuk mengambil seluruh data dan tampilkan sebagai daftar.
- Buat formulir yang mengirim data baru melalui fetch POST.
- Setelah kiriman sukses, perbarui daftar tanpa memuat ulang halaman.
app.js (contoh)
fetch('http://localhost/latihan/api.php')
.then(res => res.json())
.then(data => {
const box = document.getElementById('daftar');
data.forEach(item => {
const p = document.createElement('p');
p.textContent = item.nama;
box.appendChild(p);
});
});Latihan / Proyek
- Tampilkan jumlah data yang berhasil diambil
- Tambahkan pemrosesan error bila API gagal diakses
- Buat tombol hapus yang mengirim permintaan DELETE lalu memperbarui tampilan
- Tambahkan pencarian yang menyaring data di frontend
- Pisahkan pembagian tugas dalam berkas agar mudah dikelola
Rekap & Tindak Lanjut
Mahasiswa mampu menghubungkan frontend dan backend sehingga data mengalir dua arah secara asinkron. Integrasi end-to-end ini menjadi dasar pengerjaan proyek akhir.