Tugas 6: JavaScript dan AJAX

Pemrograman Berbasis Platform (CSGE602022) — diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Ganjil 2024/2025

---

Deskripsi Tugas

Pada tugas ini, kamu akan mengimplementasikan AJAX pada aplikasi yang telah kamu buat pada tugas sebelumnya.

Checklist untuk tugas ini adalah sebagai berikut:

• Mengubah tugas 5 yang telah dibuat sebelumnya menjadi menggunakan AJAX.

  • AJAX GET
    • Ubahlah kode cards data mood agar dapat mendukung AJAX GET.
    • Lakukan pengambilan data mood menggunakan AJAX GET. Pastikan bahwa data yang diambil hanyalah data milik pengguna yang logged-in.
  • AJAX POST
    • Buatlah sebuah tombol yang membuka sebuah modal dengan form untuk menambahkan mood.
      catatan

      Modal di-trigger dengan menekan suatu tombol pada halaman utama. Saat penambahan mood berhasil, modal harus ditutup dan input form harus dibersihkan dari data yang sudah dimasukkan ke dalam form sebelumnya. Jika penambahan gagal, tampilkan pesan error.

    • Buatlah fungsi view baru untuk menambahkan mood baru ke dalam basis data.
    • Buatlah path /create-ajax/ yang mengarah ke fungsi view yang baru kamu buat.
    • Hubungkan form yang telah kamu buat di dalam modal kamu ke path /create-ajax/.
    • Lakukan refresh pada halaman utama secara asinkronus untuk menampilkan daftar mood terbaru tanpa reload halaman utama secara keseluruhan.
  peringatan

  Pastikan AJAX GET dan POST dapat dilakukan secara aman.

• Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).

  • Jelaskan manfaat dari penggunaan JavaScript dalam pengembangan aplikasi web!
  • Jelaskan fungsi dari penggunaan await ketika kita menggunakan fetch()! Apa yang akan terjadi jika kita tidak menggunakan await?
  • Mengapa kita perlu menggunakan decorator csrf_exempt pada view yang akan digunakan untuk AJAX POST?
  • Pada tutorial PBP minggu ini, pembersihan data input pengguna dilakukan di belakang (backend) juga. Mengapa hal tersebut tidak dilakukan di frontend saja?
  • Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial)!

• Melakukan add-commit-push ke GitHub.

Tenggat Waktu Pengerjaan

Tenggat waktu pengerjaan Tugas 6 adalah Rabu, 9 Oktober 2024, pukul 12.00 siang.

Asisten dosen akan mengecek last commit dari repositori tugas lab, sehingga kamu tidak perlu mengumpulkan tautan repositori ke dalam slot submisi.