From d191dfd1dfe5cc1c77d02aefa461fb3d3096d0c1 Mon Sep 17 00:00:00 2001
From: nabilmuafa <109450293+nabilmuafa@users.noreply.github.com>
Date: Wed, 2 Oct 2024 10:04:15 +0700
Subject: [PATCH] add: tutorial 5 and assignment 6

---
 assignments/individual/assignment-6.md        |  47 +
 docs/tutorial-5.md                            | 836 ++++++++++++++++++
 .../current/individual/assignment-6.md        |  50 ++
 .../current/tutorial-5.md                     | 834 +++++++++++++++++
 static/img/5-alert-box-xss.png                | Bin 0 -> 5257 bytes
 static/img/5-form-error.png                   | Bin 0 -> 2695 bytes
 6 files changed, 1767 insertions(+)
 create mode 100644 assignments/individual/assignment-6.md
 create mode 100644 docs/tutorial-5.md
 create mode 100644 i18n/en/docusaurus-plugin-content-docs-assignments/current/individual/assignment-6.md
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/tutorial-5.md
 create mode 100644 static/img/5-alert-box-xss.png
 create mode 100644 static/img/5-form-error.png

diff --git a/assignments/individual/assignment-6.md b/assignments/individual/assignment-6.md
new file mode 100644
index 0000000..497c7a5
--- /dev/null
+++ b/assignments/individual/assignment-6.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: Tugas 6
+sidebar_position: 6
+Path: assignments/individual/assignment-6
+---
+
+# 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_.
+            :::note
+            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.
+    :::warning
+    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.
diff --git a/docs/tutorial-5.md b/docs/tutorial-5.md
new file mode 100644
index 0000000..1722233
--- /dev/null
+++ b/docs/tutorial-5.md
@@ -0,0 +1,836 @@
+---
+sidebar_label: Tutorial 5
+sidebar_position: 7
+Path: docs/tutorial-5
+---
+
+# Tutorial 5: JavaScript dan AJAX
+
+Pemrograman Berbasis Platform (CSGE602022) — diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Ganjil 2024/2025
+
+---
+
+## Tujuan Pembelajaran
+
+Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:
+
+- Memahami fungsi JavaScript pada *front-end development*
+- Menggunakan JavaScript secara dasar
+- Menerapkan AJAX dan Fetch API dengan aman
+
+## JavaScript
+
+### Pengenalan JavaScript
+
+JavaScript merupakan bahasa pemrograman multi-paradigma tingkat tinggi lintas platform (*cross-platform high-level multi-paradigm programming language*). Sifat multi-paradigma membuat JavaScript mendukung konsep pemrograman berbasis obyek, pemrograman imperatif, dan pemrograman fungsional. JavaScript sendiri merupakan implementasi dari ECMAScript, yang merupakan inti dari bahasa JavaScript. Beberapa implementasi lain dari ECMAScript yang mirip dengan JavaScript antara lain JScript (Microsoft) dan ActionScript (Adobe).
+
+JavaScript, bersama dengan HTML dan CSS, menjadi tiga teknologi utama yang dipakai pada pengembangan web. Pada dasarnya, keuntungan menggunakan JavaScript dalam pengembangan web adalah manipulasi halaman web dapat dilakukan secara dinamis dan interaksi antara halaman web dengan pengguna dapat meningkat. Oleh karena itu, hampir semua situs web modern saat ini menggunakan JavaScript dalam halaman web mereka untuk memberikan pengalaman terbaik kepada pengguna. Beberapa contoh yang dapat kita lakukan dengan menggunakan JavaScript antara lain menampilkan informasi berdasarkan waktu, mengenali jenis peramban pengguna, melakukan validasi form atau data, membuat *cookies* (bukan kue, namun [HTTP *cookies*](https://en.wikipedia.org/wiki/HTTP_cookie)), mengganti *styling* dan CSS suatu *element* secara dinamis, dan lain sebagainya.
+
+Pada pengembangan web umumnya kode JavaScript digunakan pada *client-side* suatu web (*client-side JavaScript*), namun beberapa jenis kode JavaScript saat ini digunakan pada *server-side* suatu web (*server-side JavaScript*) seperti **node.js**. Istilah *client-side* menunjukkan bahwa kode JavaScript akan dieksekusi atau dijalankan pada peramban pengguna, bukan pada server situs web. Hal ini berarti kompleksitas kode JavaScript tidak akan memengaruhi performa server situs web tersebut namun memengaruhi performa peramban web dan komputer; semakin kompleks kode JavaScript, maka semakin banyak memori komputer yang dikonsumsi oleh peramban web.
+
+Pada mata kuliah PBP, kita hanya akan fokus kepada kode *client-side JavaScript*.
+
+### Tahapan Eksekusi JavaScript oleh Peramban
+
+Perhatikan diagram berikut untuk mengamati tahapan eksekusi JavaScript oleh peramban web.
+
+![javascript-works](https://preview.ibb.co/e258TG/Screenshot_from_2017_10_31_14_29_13.png)
+
+Setelah peramban mengunduh halaman HTML web maka tepat dimana tag `<script></script>` berada, peramban akan melihat *tag script* tersebut, apakah tag tersebut berisi kode *embedded* JavaScript atau merujuk berkas eksternal JavaScript. Jika merujuk pada berkas eksternal JavaScript, maka peramban akan mengunduh berkas tersebut terlebih dahulu.
+
+### Penulisan JavaScript
+
+Penulisan JavaScript dapat dilakukan dengan ***embedded JavaScript*** atau ***external JavaScript***. Kode JavaScript dapat didefinisikan atau dituliskan secara *embedded* pada berkas HTML maupun secara terpisah pada berkas tersendiri. Jika ditulis dalam berkas terpisah dari HTML, ekstensi berkas yang digunakan untuk berkas JavaScript adalah `.js`. Berikut contoh beberapa pendefinisian dari JavaScript.
+
+JavaScript dapat diletakkan pada *head* atau *body* dari halaman HTML. Selain itu, kode JavaScript **harus** dimasukkan di antara tag `<script>` dan `</script>`. Kamu dapat meletakkan lebih dari satu *tag script* yang berisi JavaScript pada suatu berkas HTML.
+
+#### Embedded JavaScript pada HTML
+
+```html title="index.html"
+<script type="text/JavaScript">
+    alert("Hello World!");
+</script>
+```
+
+#### External JavaScript pada HTML
+
+```html title="index.html"
+<script type="text/JavaScript" src="js/script.js"></script>
+```
+
+```javascript title="js/script.js"
+alert("Hello World!");
+```
+
+Pada berkas eksternal JavaScript, tag `<script>` tidak perlu lagi ditambahkan.
+
+Memisahkan JavaScript pada berkas tersendiri dapat memberikan beberapa keuntungan seperti kode dapat digunakan di berkas HTML lain, kode JavaScript dan HTML tidak bercampur sehingga lebih fokus saat mengembangkan aplikasi, serta mempercepat proses pemuatan halaman. berkas `.js` biasanya akan di-*cache* oleh peramban sehingga jika kita membuka halaman yang sama dan tidak ada perubahan pada berkas `.js`, maka peramban tidak akan meminta berkas `.js` tersebut kepada server lagi, namun akan menggunakan berkas dari *cache* yang sudah disimpan sebelumnya.
+
+### Eksekusi JavaScript
+
+Setelah JavaScript sudah dimuat dengan sempurna, maka peramban akan langsung mulai mengeksekusi kode JavaScript. Jika kode tersebut BUKAN merupakan *event-triggered*, maka kode langsung dieksekusi. Jika kode tersebut merupakan *event-triggered*, maka kode tersebut hanya akan dieksekusi jika *event* yang didefinisikan terpicu (*triggered*).
+
+```javascript
+// langsung dieksekusi
+alert("Hello World");
+
+// langsung dieksekusi
+var obj = document.getElementById("object");
+// langsung dieksekusi, menambahkan event handler onclick untuk element object
+obj.onclick = function () {
+    // hanya dieksekusi jika element 'object' di klik
+    alert("You just clicked the object!");
+};
+```
+
+### Sintaks JavaScript
+
+#### Variabel
+
+Mendefinisikan variabel pada JavaScript cukup mudah. Contohnya seperti berikut.
+
+```javascript
+var example = 0; // var example merupakan sebuah bilangan
+var example = "example"; // var example merupakan sebuah string
+var example = true; // var example merupakan sebuah boolean
+```
+
+JavaScript dapat menampung banyak tipe data; mulai dari string, integer, hingga *object* sekalipun. Berbeda dengan Java yang penandaan tipe datanya dibedakan dengan *head variable* (contohnya kamu ingin membuat variabel dengan tipe data `int`, maka sintaknya seperti `int x = 9`), JavaScript mempunyai ciri khas *loosely typed* atau *dynamic language*, yakni kamu tidak perlu menuliskan tipe data pada *head variable* dan JavaScript nantinya akan secara otomatis membaca tipe data kamu berdasarkan standar yang ada (seperti pada contoh di atas).
+
+Ada beberapa aturan dalam pemilihan *indentifiers* atau nama variabel dalam JavaScript. Karakter pertama **harus** merupakan alfabet, *underscore* (`_`), atau karakter dolar (`$`). Selain itu, JavaScript *identifiers* bersifat *case sensitive*.
+
+#### Penggabungan String
+
+Dalam JavaScript, kita juga dapat menyambungkan `string` dengan `string` lainnya seperti pada Java.
+
+```javascript
+var str1 = "PBP" + " " + "Fun";
+var str2 = "PBP";
+var str3 = "Fun";
+var str4 = str2 + " " + str3;
+var str5 = "Fun";
+var str6 = `PBP ${str5}`;  // Memiliki hasil yang sama seperti "PBP" + " " + str5
+```
+
+### Ruang Lingkup JavaScript
+
+#### Variabel Lokal
+
+Variabel yang didefinisikan **di dalam** fungsi bersifat lokal, sehingga hanya dapat diakses oleh kode didalam fungsi tersebut.
+
+```javascript
+// kode diluar fungsi thisFunction() tidak dapat mengakses variabel courseName
+function thisFunction() {
+    var courseName = "PBP";
+    // kode di dalam fungsi ini dapat mengakses variabel courseName
+}
+```
+
+#### Variabel Global
+
+Variabel yang didefinisikan **di luar** fungsi bersifat global dan dapat diakses oleh kode lain dalam berkas JavaScript tersebut.
+
+```javascript
+var courseName = "PBP";
+function thisFunction() {
+    // kode di dalam fungsi ini dapat mengakses variabel courseName
+}
+```
+
+#### Variabel Auto Global
+
+Value yang di-*assign* pada variabel yang belum dideklarasikan otomatis menjadi variabel global, walaupun variabel tersebut berada di dalam suatu fungsi.
+
+```javascript
+thisFunction(); // fungsi thisFunction() perlu dipanggil terlebih dahulu
+console.log(courseName); // cetak "PBP" pada JavaScript console
+function thisFunction() {
+    courseName = "PBP";
+}
+```
+
+#### Mengakses Variabel Global dari HTML
+
+Kamu dapat mengakses variabel yang berada dalam berkas JavaScript pada berkas HTML yang memuat berkas JavaScript tersebut.
+
+```html
+...
+<input type="text" onclick="this.value=courseName" />
+...
+```
+
+```javascript
+...
+var courseName = "PBP";
+...
+```
+
+### Function dan Event
+
+*Function* adalah sekumpulan grup dari kode-kode yang bisa dipanggil di mana pun pada bagian kode program (mirip dengan `method` pada Java). Hal ini mengurangi redundansi kode yang ada (mengurangi kode-kode yang dapat sama berulang-ulang). Selain itu, *function* pada JavaScript sangat berguna untuk memudahkan elemen pemanggilan secara dinamis. *Function* dapat dipanggil sesama *function* dan dapat juga dipanggil karena *event* (akan dijelaskan di bawah). Sebagai contoh, berikut kode yang terdapat pada `index.html`.
+
+```html title="index.html"
+...
+<input type="button" value="magicButton" id="magicButton" onclick="hooray();" />
+...
+```
+
+Kemudian berikut adalah kode pada `javascript.js`.
+
+```javascript title="javascript.js"
+...
+function hooray() {
+    alert("Yahoo!");
+}
+...
+```
+
+Apabila `magicButton` ditekan, maka fungsi `onclick` akan menjalankan *function* `hooray()` pada `javascript.js`, lalu muncul *alert* sesuai yang sudah di-*assign* sebelumnya.
+
+Kode `onclick` sebenarnya adalah salah satu contoh kemampuan JavaScript yang disebut *event*. *Event* adalah kemampuan JavaScript untuk membuat sebuah situs web dinamis. Maksud dari `onclick` adalah penanda apa yang akan dilakukan JavaScript jika elemen tersebut ditekan. Selain itu, *event* biasanya diberikan sebuah fungsi yang berguna sebagai perintah-perintah untuk JavaScript. Selain itu, banyak contoh-contoh *event* lainnya seperti `onchange`, `onmouseover`, `onmouseout`, dan lain sebagainya yang bisa kamu baca pada tautan [ini](https://www.w3schools.com/js/js_events.asp).
+
+### JavaScript DOM
+
+#### HTML DOM
+
+HTML DOM (*Document Object Model*) adalah standar bagaimana mengubah, mengambil, dan menghapus HTML *elements*. HTML DOM dapat diakses melalui JavaScript atau dengan bahasa pemrograman lainnya. Detail lengkapnya dapat dilihat [di sini](https://www.w3schools.com/js/js_htmldom.asp).
+
+Berikut adalah contoh implementasinya.
+
+```html
+...     
+<div>
+    <p onclick="myFunction()" id="demo">Example of HTML DOM</p>
+</div>
+...
+```
+
+```javascript
+...
+function myFunction() {
+    document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
+}
+...
+```
+
+#### CSS DOM
+
+Sama dengan HTML DOM, CSS DOM dapat mengubah CSS secara dinamis melalui JavaScript. Detail lengkapnya dapat dilihat [di sini](https://www.w3schools.com/js/js_htmldom_css.asp).
+
+Berikut adalah contoh implementasinya.
+
+```html title="index.html"
+...
+<p id="blueText" onclick="changeColor()">Click me v2</p>
+...
+```
+
+```javascript title="javascript.js"
+...
+function changeColor(){
+    document.getElementById("blueText").style.color="blue";
+}
+...
+```
+
+## AJAX
+
+### Pengenalan AJAX
+
+AJAX merupakan singkatan dari ***A**synchronous **J**avaScript **A**nd **X**ML*.
+
+AJAX bukanlah merupakan sebuah bahasa pemrograman, melainkan sebuah teknologi yang memadukan peramban web (untuk meminta data dari *web server*) dengan JavaScript dan HTML DOM (untuk menampilkan data). AJAX dapat menggunakan XML untuk mengirim data, tetapi AJAX juga dapat menggunakan teks ataupun JSON untuk mengirim data. AJAX memungkinkan halaman web untuk memperbarui data secara asinkronus dengan mengirimkan data ke peladen di balik layar. Hal tersebut berarti bahwa kita dapat memperbarui sebagian elemen data pada halaman tanpa harus me-*reload* halaman secara keseluruhan.
+
+Berikut ini adalah diagram cara kerja AJAX.
+
+![ajax-works](https://www.w3schools.com/js/pic_ajax.gif)
+
+1. Sebuah *event* terjadi pada halaman web (contohnya tombol *submit data* ditekan)
+2. Sebuah `XMLHttpRequest` *object* dibuat oleh JavaScript
+3. `XMLHttpRequest` *object* mengirimkan *request* ke server
+4. Server memproses *request* tersebut
+5. Server mengembalikan *response* kembali kepada halaman web
+6. *Response* dibaca oleh JavaScript
+7. Aksi berikutnya akan dipicu oleh JavaScript sesuai dengan langkah yang dibuat (contohnya memperbarui data di halaman tersebut)
+
+`XMLHttpRequest` sebelumnya merupakan cara standar untuk melakukan permintaan AJAX di JavaScript. Namun, XMLHttpRequest memiliki beberapa kelemahan, seperti penanganan yang kurang rapi ketika bekerja dengan _promises_ dan _callback_ serta keterbatasan dalam mendukung alur kode yang lebih modern.
+
+Oleh karena itu, `fetch()` diperkenalkan sebagai API baru untuk melakukan permintaan HTTP dengan sintaks yang lebih sederhana dan mendukung _promises_ secara langsung. Hal ini memungkinkan pengembang menulis kode yang lebih mudah dibaca, dikelola, dan lebih cocok dengan paradigma asinkron modern seperti _async_/_await_. `fetch()` juga lebih fleksibel dalam menangani format data yang berbeda serta mendukung *API* yang lebih baik untuk menangani kesalahan atau respons HTTP. Penjelasan lebih lanjut terhadap perbedaan `fetch` dan `XMLHttpRequest` dapat dilihat di tautan [ini](https://www.tutorialspoint.com/ajax/fetch_api_vs_xmlhttprequest.htm).
+
+Pada PBP kali ini, kamu akan melakukan AJAX pada peramban web dengan menggunakan fungsi `fetch()` yang diberikan oleh JavaScript. Sebagai gambaran besar, penggunaan `fetch()` untuk melakukan pemanggilan AJAX dapat dilihat di tautan [ini](https://www.w3schools.com/jsref/api_fetch.asp).
+
+### Fetch API
+
+Fetch API merupakan API baru yang diperkenalkan pada ECMAScript 2020 sebagai standar baru untuk membuat *request* dengan `Promise`. Fetch API menyediakan antarmuka untuk mengambil sumber daya (termasuk di seluruh jaringan). API ini merupakan pengganti yang lebih kuat dan fleksibel untuk [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). Fetch API secara umum digunakan untuk mengimplementasikan AJAX secara lebih mudah daripada AJAX dengan `XMLHttpRequest`. Fetch API juga mendukung lebih banyak metode HTTP dan header HTTP daripada AJAX biasa.
+
+Fungsi `fetch()` memiliki beberapa parameter, yaitu:
+
+- `url`: URL dari sumber daya yang akan diminta
+- `method`: Metode HTTP yang akan digunakan
+- `headers`: Header HTTP yang akan dikirim
+- `body`: Isi dari permintaan HTTP
+
+Fungsi `fetch()` mengembalikan objek `Response`. Objek `Response` memiliki beberapa properti, yaitu:
+
+- `status`: Kode `status` HTTP dari respons
+- `headers`: Header HTTP dari respons
+- `body`: Isi dari respons
+
+Kamu dapat mempelajari Fetch API lebih lanjut pada tautan [ini](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
+
+### Fungsi Async dan Await
+
+Sebelum mempelajari penggunaan fungsi `fetch()`, ada baiknya kita mempelajari fungsi `async` dan `await` yang memungkinkan pengimplementasian AJAX tanpa perlu menggunakan *library* eksternal, seperti [jQuery](https://jquery.com/).
+
+Fungsi `async` dan `await` merupakan fungsi baru yang diperkenalkan di ECMAScript 2017. Fungsi `async` digunakan untuk menandai fungsi sebagai fungsi yang dapat mengembalikan nilai secara asinkronus, sedangkan fungsi `await` digunakan untuk menunggu hasil dari fungsi `async`.
+
+Kamu dapat mempelajari fungsi `async` dan `await` lebih lanjut pada tautan [ini](https://www.w3schools.com/js/js_async.asp).
+
+### Penggunaan Fetch API
+
+Fetch API menyediakan antarmuka JavaScript untuk mengakses dan memanipulasi bagian-bagian protokol, seperti *requests* dan *responses*. API ini juga menyediakan metode `fetch()` global yang menyediakan cara yang mudah dan logis untuk mengambil sumber daya secara asinkronus pada seluruh jaringan.
+
+Tidak seperti `XMLHttpRequest` yang merupakan API berbasis *callback*, Fetch API berbasis `Promise` dan menyediakan alternatif yang lebih baik dan dapat dengan mudah digunakan pada *service worker*. Fetch API juga mengintegrasikan konsep HTTP tingkat lanjut seperti CORS dan ekstensi lain ke HTTP.
+
+Berikut adalah contoh penggunaan Fetch API dengan fungsi `async` dan `await` untuk melakukan AJAX.
+
+```javascript
+async function fetchData() {
+    const response = await fetch("https://jokes-bapack2-api.yuana.id/v1/text/random");
+    const data = await response.json();
+    return data;
+}
+
+const joke = await fetchData();
+console.log(joke);
+```
+
+Kode di atas akan melakukan AJAX untuk meminta data dari API lelucon bapak-bapak masa kini secara asinkronus. Hasil dari AJAX akan disimpan dalam variabel `joke`.
+
+Kamu dapat mempelajari penggunaan Fetch API lebih lanjut pada tautan [ini](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch).
+
+## Tutorial: Menambahkan _Error Message_ Pada Login
+
+Untuk memudahkan proses _login_ pada aplikasi anda, berikan _conditional_ pada _view_ `login_user` anda, sehingga kodenya menjadi seperti ini.
+
+```python title="main/views.py"
+...
+if form.is_valid():
+    user = form.get_user()
+    login(request, user)
+    response = HttpResponseRedirect(reverse("main:show_main"))
+    response.set_cookie('last_login', str(datetime.datetime.now()))
+    return response
+else:
+    messages.error(request, "Invalid username or password. Please try again.")
+...
+```
+**Penjelasan Kode:**
+
+- `messages.error(request, msg)` akan "menempelkan" pesan _error_ kepada `request` yang mengirimkan permintaan _login_, yang nantinya akan ditampilkan di templat `login.html`.
+
+## Tutorial: Membuat Fungsi untuk Menambahkan _Mood_ dengan AJAX
+
+Pada bagian ini, kamu akan membuat fungsi pada _views_ untuk menambahkan mood baru ke basis data dengan AJAX.
+
+1. Tambahkan kedua impor berikut pada file `views.py`.
+    ```python title="main/views.py"
+    from django.views.decorators.csrf import csrf_exempt
+    from django.views.decorators.http import require_POST
+    ```
+
+2. Buatlah fungsi baru pada `views.py` dengan nama `add_mood_entry_ajax` yang menerima parameter `request` seperti berikut.
+
+    ```python title="main/views.py"
+    ...
+    @csrf_exempt
+    @require_POST
+    def add_mood_entry_ajax(request):
+        mood = request.POST.get("mood")
+        feelings = request.POST.get("feelings")
+        mood_intensity = request.POST.get("mood_intensity")
+        user = request.user
+
+        new_mood = MoodEntry(
+            mood=mood, feelings=feelings,
+            mood_intensity=mood_intensity,
+            user=user
+        )
+        new_mood.save()
+
+        return HttpResponse(b"CREATED", status=201)
+        ...
+    ```
+    
+    **Penjelasan Kode**:
+    - _Decorator_ `csrf_exempt` membuat Django tidak perlu mengecek keberadaan `csrf_token` pada `POST` _request_ yang dikirimkan ke fungsi ini.
+    - _Decorator_ `require_POST` membuat fungsi tersebut hanya bisa diakses ketika pengguna mengirimkan `POST` _request_ ke fungsi tersebut. Jika pengguna mengirimkan _request_ dengan _method_ lain, maka dari Django akan dikembalikan eror `405 Method Not Allowed`.
+    - `mood = request.POST.get("mood")` dan semacamnya digunakan untuk mengambil data yang dikirimkan pengguna melalui `POST` _request_ secara manual.
+    - `new_mood = MoodEntry(...)` merupakan objek `Mood` baru yang dibuat secara manual berdasarkan data-data yang dikirimkan dari `POST` _request_.
+
+## Tutorial: Menambahkan _Routing_ Untuk Fungsi `add_mood_entry_ajax`
+
+1. Buka `urls.py` yang ada pada subdirektori `main` dan impor fungsi yang sudah kamu buat tadi.
+    ```python title="main/urls.py"
+    from main.views import ..., add_mood_entry_ajax
+    ```
+
+2. Tambahkan _path url_ ke dalam `urlpatterns` untuk mengakses fungsi yang sudah diimpor tadi.
+    ```python title="main/urls.py"
+    urlpatterns = [
+        ...
+        path('create-mood-entry-ajax', add_mood_entry_ajax, name='add_mood_entry_ajax'),
+    ]
+    ```
+
+## Tutorial: Menampilkan Data _Mood Entry_ dengan `fetch()` API
+
+1. Bukalah berkas `views.py` dan **hapus dua baris** berikut.
+    ```python title="main/views.py"
+    mood_entries = MoodEntry.objects.filter(user=request.user)
+    ```
+    dan
+    ```python title="main/views.py"
+    'mood_entries': mood_entries,
+    ```
+    Pada tutorial ini, kita akan mendapatkan objek-objek _mood entry_ dari *endpoint* `/json`, sehingga kode di atas tidak diperlukan lagi.
+
+2. Bukalah berkas `views.py` dan ubahlah baris pertama _views_ untuk `show_json` dan `show_xml` seperti berikut.
+
+    ```python title="main/views.py"
+    data = MoodEntry.objects.filter(user=request.user)
+    ```
+
+2. Bukalah berkas `main.html`. Hapus bagian _block conditional_ `mood_entries` untuk menampilkan card_mood ketika kosong atau tidak. Untuk memperjelas, inilah _block_ kode yang perlu kamu hapus.
+
+    ```html title="main/templates/main.html"
+    ...
+        {% if not mood_entries %}
+            <div class="flex flex-col items-center justify-center min-h-[24rem] p-6">
+                <img src="{% static 'image/sedih-banget.png' %}" alt="Sad face" class="w-32 h-32 mb-4"/>
+                <p class="text-center text-gray-600 mt-4">Belum ada data mood pada mental health tracker.</p>
+            </div>
+        {% else %}
+            <div class="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6 w-full">
+                {% for mood_entry in mood_entries %}
+                    {% include 'card_mood.html' with mood_entry=mood_entry %}
+                {% endfor %}
+            </div>
+        {% endif %}
+    ...
+    ```
+
+    Setelah menghapus _block conditional_ tersebut, tambahkan potongan kode ini di tempat yang sama.
+    ```html title="main/templates/main.html"
+    ...
+    <div id="mood_entry_cards"></div>
+    ...
+    ```
+
+3. Buatlah _block_ `<script>` di bagian bawah berkas kamu (sebelum `{% endblock content %}`) dan buatlah fungsi baru pada _block_ `<script>` tersebut dengan nama `getMoodEntries`.
+
+    ```html title="main/templates/main.html"
+    <script>
+      async function getMoodEntries(){
+          return fetch("{% url 'main:show_json' %}").then((res) => res.json())
+      }
+    </script>
+    ```
+    **Penjelasan Kode:**
+    
+	- Fungsi ini menggunakan `fetch()` API ke data JSON secara *asynchronous*.
+    - Setelah data di-*fetch*, fungsi `then()` digunakan untuk melakukan *parse* pada data JSON menjadi objek JavaScript.
+
+4. Buatlah **fungsi baru** pada *block* `<script>` dengan nama `refreshMoodEntries` yang digunakan untuk me-*refresh* data *moods* secara asinkronus.
+
+    ```html title="main/templates/main.html"
+    <script>
+        ...
+     async function refreshMoodEntries() {
+        document.getElementById("mood_entry_cards").innerHTML = "";
+        document.getElementById("mood_entry_cards").className = "";
+        const moodEntries = await getMoodEntries();
+        let htmlString = "";
+        let classNameString = "";
+
+        if (moodEntries.length === 0) {
+            classNameString = "flex flex-col items-center justify-center min-h-[24rem] p-6";
+            htmlString = `
+                <div class="flex flex-col items-center justify-center min-h-[24rem] p-6">
+                    <img src="{% static 'image/sedih-banget.png' %}" alt="Sad face" class="w-32 h-32 mb-4"/>
+                    <p class="text-center text-gray-600 mt-4">Belum ada data mood pada mental health tracker.</p>
+                </div>
+            `;
+        }
+        else {
+            classNameString = "columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6 w-full"
+            moodEntries.forEach((item) => {
+                htmlString += `
+                <div class="relative break-inside-avoid">
+                    <div class="absolute top-2 z-10 left-1/2 -translate-x-1/2 flex items-center -space-x-2">
+                        <div class="w-[3rem] h-8 bg-gray-200 rounded-md opacity-80 -rotate-90"></div>
+                        <div class="w-[3rem] h-8 bg-gray-200 rounded-md opacity-80 -rotate-90"></div>
+                    </div>
+                    <div class="relative top-5 bg-indigo-100 shadow-md rounded-lg mb-6 break-inside-avoid flex flex-col border-2 border-indigo-300 transform rotate-1 hover:rotate-0 transition-transform duration-300">
+                        <div class="bg-indigo-200 text-gray-800 p-4 rounded-t-lg border-b-2 border-indigo-300">
+                            <h3 class="font-bold text-xl mb-2">${item.fields.mood}</h3>
+                            <p class="text-gray-600">${item.fields.time}</p>
+                        </div>
+                        <div class="p-4">
+                            <p class="font-semibold text-lg mb-2">My Feeling</p>
+                            <p class="text-gray-700 mb-2">
+                                <span class="bg-[linear-gradient(to_bottom,transparent_0%,transparent_calc(100%_-_1px),#CDC1FF_calc(100%_-_1px))] bg-[length:100%_1.5rem] pb-1">${item.fields.feelings}</span>
+                            </p>
+                            <div class="mt-4">
+                                <p class="text-gray-700 font-semibold mb-2">Intensity</p>
+                                <div class="relative pt-1">
+                                    <div class="flex mb-2 items-center justify-between">
+                                        <div>
+                                            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-indigo-600 bg-indigo-200">
+                                                ${item.fields.mood_intensity > 10 ? '10+' : item.fields.mood_intensity}
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200">
+                                        <div style="width: ${item.fields.mood_intensity > 10 ? 100 : item.fields.mood_intensity * 10}%;" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="absolute top-0 -right-4 flex space-x-1">
+                        <a href="/edit-mood/${item.pk}" class="bg-yellow-500 hover:bg-yellow-600 text-white rounded-full p-2 transition duration-300 shadow-md">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-9 w-9" viewBox="0 0 20 20" fill="currentColor">
+                                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+                            </svg>
+                        </a>
+                        <a href="/delete/${item.pk}" class="bg-red-500 hover:bg-red-600 text-white rounded-full p-2 transition duration-300 shadow-md">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-9 w-9" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                `;
+            });
+        }
+        document.getElementById("mood_entry_cards").className = classNameString;
+        document.getElementById("mood_entry_cards").innerHTML = htmlString;
+    }
+    refreshMoodEntries();
+    </script>
+    ```
+
+     **Penjelasan Kode:**
+
+    - `document.getElementById("mood_entry_cards")` digunakan untuk mendapatkan elemen berdasarkan ID nya. Pada baris kode ini, elemen yang dituju adalah tag `<div>` dengan ID `mood_entry_cards` yang sudah kamu buat pada tahapan sebelumnya.
+    - `innerHTML` digunakan untuk mengisi *child element* dari elemen yang dituju. Jika `innerHTML = ""`, maka akan mengosongkan isi *child element* dari elemen yang dituju.
+    - `className` digunakan untuk mengisi *class name* dari elemen yang dituju.
+    - `moodEntries.forEach((item))` digunakan untuk melakukan *for each loop* pada data *moods* yang diambil menggunakan fungsi `getMoodEntries()`. Kemudian, `htmlString` kita konkatenasi dengan data moods untuk mengisi container dengan *cards* seperti pada tutorial sebelumnya.
+    - `refreshMoodEntries()` digunakan untuk memanggil fungsi tersebut pada setiap kali membuka halaman web.
+
+## Tutorial: Membuat Modal Sebagai Form untuk Menambahkan _Mood_
+
+1. Tambahkan kode berikut untuk mengimplementasikan modal (_Tailwind_) pada aplikasi kamu. Kamu dapat meletakkan potongan kode berikut dibawah `div` dengan `id` `mood_entry_cards` yang telah kamu tambahkan sebelumnya.
+   
+    ```html title="main/templates/main.html"
+    ...
+    <div id="crudModal" tabindex="-1" aria-hidden="true" class="hidden fixed inset-0 z-50 w-full flex items-center justify-center bg-gray-800 bg-opacity-50 overflow-x-hidden overflow-y-auto transition-opacity duration-300 ease-out">
+      <div id="crudModalContent" class="relative bg-white rounded-lg shadow-lg w-5/6 sm:w-3/4 md:w-1/2 lg:w-1/3 mx-4 sm:mx-0 transform scale-95 opacity-0 transition-transform transition-opacity duration-300 ease-out">
+        <!-- Modal header -->
+        <div class="flex items-center justify-between p-4 border-b rounded-t">
+          <h3 class="text-xl font-semibold text-gray-900">
+            Add New Mood Entry
+          </h3>
+          <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center" id="closeModalBtn">
+            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+            </svg>
+            <span class="sr-only">Close modal</span>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <div class="px-6 py-4 space-y-6 form-style">
+          <form id="moodEntryForm">
+            <div class="mb-4">
+              <label for="mood" class="block text-sm font-medium text-gray-700">Mood</label>
+              <input type="text" id="mood" name="mood" class="mt-1 block w-full border border-gray-300 rounded-md p-2 hover:border-indigo-700" placeholder="Enter your mood" required>
+            </div>
+            <div class="mb-4">
+              <label for="feelings" class="block text-sm font-medium text-gray-700">Feelings</label>
+              <textarea id="feelings" name="feelings" rows="3" class="mt-1 block w-full h-52 resize-none border border-gray-300 rounded-md p-2 hover:border-indigo-700" placeholder="Describe your feelings" required></textarea>
+            </div>
+            <div class="mb-4">
+              <label for="moodIntensity" class="block text-sm font-medium text-gray-700">Mood Intensity (1-10)</label>
+              <input type="number" id="moodIntensity" name="mood_intensity" min="1" max="10" class="mt-1 block w-full border border-gray-300 rounded-md p-2 hover:border-indigo-700" required>
+            </div>
+          </form>
+        </div>
+        <!-- Modal footer -->
+        <div class="flex flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-2 p-6 border-t border-gray-200 rounded-b justify-center md:justify-end">
+          <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg" id="cancelButton">Cancel</button>
+          <button type="submit" id="submitMoodEntry" form="moodEntryForm" class="bg-indigo-700 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg">Save</button>
+        </div>
+      </div>
+    </div>
+    ...
+    ```
+
+    
+2. Karena kita menggunakan _vanilla Tailwind CSS_, tidak ada _class_ modal yang _built-in_. Oleh karena itu, agar modal dapat berfungsi, kita perlu menambahkan fungsi-fungsi JavaScript berikut.
+    ```html title="main/templates/main.html"
+    <script>
+    ...
+      const modal = document.getElementById('crudModal');
+      const modalContent = document.getElementById('crudModalContent');
+
+      function showModal() {
+          const modal = document.getElementById('crudModal');
+          const modalContent = document.getElementById('crudModalContent');
+
+          modal.classList.remove('hidden'); 
+          setTimeout(() => {
+            modalContent.classList.remove('opacity-0', 'scale-95');
+            modalContent.classList.add('opacity-100', 'scale-100');
+          }, 50); 
+      }
+
+      function hideModal() {
+          const modal = document.getElementById('crudModal');
+          const modalContent = document.getElementById('crudModalContent');
+
+          modalContent.classList.remove('opacity-100', 'scale-100');
+          modalContent.classList.add('opacity-0', 'scale-95');
+
+          setTimeout(() => {
+            modal.classList.add('hidden');
+          }, 150); 
+      }
+
+      document.getElementById("cancelButton").addEventListener("click", hideModal);
+      document.getElementById("closeModalBtn").addEventListener("click", hideModal);
+    ...
+    </script>
+    ```
+    :::info  
+    Form dan fungsi JavaScript pada modal tersebut sudah disesuaikan untuk model pada aplikasi `mental_health_tracker`. Apabila kamu ingin menggunakan model lain yang juga memiliki field lain, perhatikan kembali nilai-nilai dari atribut HTML terkait.
+    :::  
+
+3. Ubahlah bagian tombol _Add New Mood Entry_ yang sudah kamu tambahkan di tutorial sebelumnya seperti berikut. Kemudian, tambahkan tombol baru untuk melakukan penambahan data dengan AJAX.
+
+    ```html title="main/templates/main.html"
+    ...
+        <a href="{% url 'main:create_mood_entry' %}" class="bg-indigo-400 hover:bg-indigo-400 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 mx-4 ">
+            Add New Mood Entry
+        </a>
+        <button data-modal-target="crudModal" data-modal-toggle="crudModal" class="btn bg-indigo-700 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105" onclick="showModal();">
+          Add New Mood Entry by AJAX
+        </button>
+    ...
+    ```
+
+## Tutorial: Menambahkan Data _Mood_ dengan AJAX
+
+Modal dengan form yang telah kamu buat sebelumnya belum bisa digunakan untuk menambahkan data _mood_. Oleh karena itu, kamu perlu membuat fungsi JavaScript baru untuk menambahkan data berdasarkan _input_ ke basis data secara AJAX.
+
+1. Buatlah fungsi baru pada block `<script>` dengan nama `addMoodEntry`.
+    ```html title="main/templates/main.html"
+    <script>
+      function addMoodEntry() {
+        fetch("{% url 'main:add_mood_entry_ajax' %}", {
+          method: "POST",
+          body: new FormData(document.querySelector('#moodEntryForm')),
+        })
+        .then(response => refreshMoodEntries())
+
+        document.getElementById("moodEntryForm").reset(); 
+        document.querySelector("[data-modal-toggle='crudModal']").click();
+
+        return false;
+      }
+    ...
+    </script>
+    ```
+    **Penjelasan Kode:**
+    - `new FormData(document.querySelector('#moodEntryForm'))` digunakan untuk membuat sebuah `FormData` baru yang datanya diambil dari _form_ pada modal. Objek `FormData` dapat digunakan untuk mengirimkan data _form_ tersebut ke server.
+    - `document.getElementById("moodEntryForm").reset()` digunakan untuk mengosongkan isi *field* form modal setelah di-*submit*.
+
+2. Tambahkan fungsi `onclick` pada *button* "Add Product" pada modal untuk menjalankan fungsi `addMoodEntry()` dengan menambahkan kode berikut.
+    ```html title="main/templates/main.html"
+    <script>
+    ...
+    document.getElementById("submitMoodEntry").onclick = addMoodEntry
+    </script>
+    ```
+    **Penjelasan Kode:**
+    - `document.getElementById("submitMoodEntry").onclick = addMoodEntry`: Apabila tombol _save_ pada modal (`<button type="submit" id="submitMoodEntry" form="moodEntryForm" class="bg-indigo-700 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg">Save</button>`) di-_click_, maka aplikasi ada akan memanggil fungsi `addMoodEntry()`. 
+
+Selamat! Kamu telah berhasil membuat aplikasi yang dapat menambahkan data dengan menggunakan AJAX. Bukalah [http://localhost:8000/](http://localhost:8000/) dan cobalah untuk menambahkan data _mood entry_ baru pada aplikasi. Seharusnya, sekarang aplikasi tidak perlu melakukan *reload* setiap kali data _mood entry_ baru ditambahkan.
+
+## Tutorial: Melindungi Aplikasi dari _Cross Site Scripting (XSS)_
+
+### Mencoba XSS
+
+Tahukah kamu bahwa kode yang baru saja kamu tambahkan ternyata membuka celah keamanan pada aplikasimu? Untuk melihat _severity_ dari celah keamanan ini, cobalah ikuti langkah-langkah berikut.
+
+1. Tambahkan data _mood_ baru dengan nilai _field_ `mood` sebagai berikut. _Field_ lain dapat diisi sesuai dengan keinginan kalian.
+    ```html
+    <img src=x onerror="alert('XSS!');">
+    ```
+
+2. Tekan tombol simpan dan jika penyimpanan berhasil dilakukan, kamu akan mendapatkan _alert_ dengan nilai `XSS!` seperti di gambar berikut.
+    
+    ![Alert Box XSS](/img/5-alert-box-xss.png)
+
+### Menambahkan `strip_tags` untuk "Membersihkan" Data Baru
+
+Dari _input_ di atas, dapat dilihat bahwa orang yang berniat jahat dapat menambahkan data baru yang dapat mengeksekusi JavaScript di _browser_ pengguna aplikasi. Celah keamanan ini biasa disebut sebagai _Cross Site Scripting_ atau XSS. Lebih spesifiknya, dalam aplikasi ini terdapat _Stored XSS_, yang berarti _payload_ untuk XSS nya tersimpan dalam basis data aplikasi. Tentu saja kita tidak mau aplikasi yang kita buat untuk memiliki celah keamanan tersebut. Untuk menutup celah keamanan ini, kamu dapat mengikuti langkah-langkah berikut.
+
+1. Bukalah berkas `views.py` dan `forms.py` dan tambahkan impor berikut.
+    ```python title="main/views.py, main/forms.py"
+    from django.utils.html import strip_tags
+    ```
+
+2. Pada fungsi `add_mood_entry_ajax` di `views.py`, gunakanlah fungsi `strip_tags` pada data `mood` dan `feelings` sebelum data tersebut dimasukkan ke dalam `MoodEntry`.
+    ```python title="main/views.py"
+    ...
+    @csrf_exempt
+    @require_POST
+    def add_mood_entry_ajax(request):
+        # highlight-start
+        mood = strip_tags(request.POST.get("mood")) # strip HTML tags!
+        feelings = strip_tags(request.POST.get("feelings")) # strip HTML tags!
+        # highlight-end
+        ...
+    ```
+    
+    **Penjelasan Kode**:
+    - Fungsi `strip_tags` akan menghilangkan semua _tag_ HTML yang terdapat pada data yang dikirimkan pengguna melalui `POST` _request_, sehingga data yang disimpan dalam basis data adalah data yang sudah "bersih". Misal `data = "<b>Pemrograman</b> <button>Berbasis</button> Platform <span>Ganjil 2025</span>"`, `strip_tags(data)` akan mengembalikan `Pemrograman Berbasis Platform Ganjil 2025`.
+    - Data `mood_intensity` tidak dibersihkan dengan `strip_tags` karena _field_ tersebut berupa `IntegerField` dan jika isinya bukan `int`, Django tidak akan menyimpannya ke basis data.
+
+3. Pada _class_ `MoodEntryForm` di `forms.py` tambahkan kedua _method_ berikut.
+    ```python title="main/forms.py"
+    ...
+    class MoodEntryForm(ModelForm):
+        class Meta:
+            ...
+        
+        # highlight-start
+        def clean_mood(self):
+            mood = self.cleaned_data["mood"]
+            return strip_tags(mood)
+    
+        def clean_feelings(self):
+            feelings = self.cleaned_data["feelings"]
+            return strip_tags(feelings)
+        # highlight-end
+    ...
+    ```
+    
+    **Penjelasan Kode**:
+    - _Method_ `clean_mood` dan `clean_feelings` akan dipanggil ketika melakukan `form.is_valid()`, sehingga dengan menambahkan kedua _method_ tersebut, kamu sudah melakukan validasi untuk fungsi `create_mood_entry` dan `edit_mood`.
+
+4. Setelah menambahkan `strip_tags`, hapuslah data _mood_ yang tadi kamu tambahkan dan coba tambahkan kembali. Jika kamu dihadapkan dengan _error_ pada form yang mengatakan _field_ `mood` tidak boleh kosong, maka selamat, kamu sudah menambahkan pertahanan terhadap XSS! Jika kamu tidak dihadapkan dengan _error_ tersebut, periksa kembali apakah kamu sudah mengikuti langkah-langkah sebelumnya dengan sesuai.
+
+    ![Form Error](/img/5-form-error.png)
+
+### Membersihkan Data dengan DOMPurify
+
+Fungsi `strip_tags` yang kamu tambahkan akan "membersihkan" semua data **baru**, tetapi data yang lama harus kita bersihkan sendiri atau kita me-_reset_ basis data. Atau, kita juga bisa menggunakan _library_ JavaScript [DOMPurify](https://github.com/cure53/DOMPurify) untuk melakukan pembersihan di _frontend_. Perlu diperhatikan bahwa DOMPurify hanya akan bekerja jika data diambil untuk ditampilkan dengan HTML di aplikasi kita. Jika ada yang menggunakan API `/json` atau `/xml` dari aplikasi kita, maka data yang didapatkan masih data yang "kotor".
+
+1. Bukalah berkas `main.html` dan tambahkan potongan kode berikut pada _block_ `meta`.
+    ```html title="main/templates/main.html"
+    {% block meta %}
+    ...
+    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.7/dist/purify.min.js"></script>
+    ...
+    {% endblock meta %}
+    ```
+
+2. Setelah itu, pada fungsi `refreshMoodEntries` yang telah kamu tambahkan sebelumnya, tambahkan potongan kode berikut.
+    ```html title="main/templates/main.html"
+    <script>
+        ...
+        async function refreshMoodEntries() {
+            ...
+            moods.forEach((item) => {
+                // highlight-start
+                const mood = DOMPurify.sanitize(item.fields.mood);
+                const feelings = DOMPurify.sanitize(item.fields.feelings);
+                // highlight-end
+                ...
+            });
+            ...
+        }
+        ...
+    </script>
+    ```
+    
+    :::note
+    Jangan lupa untuk mengubah semua kemunculan `item.fields.mood` menjadi `mood` dan `item.fields.feelings` menjadi `feelings`.
+    :::
+
+3. _Refresh_ halaman utama dan jika kamu sebelumnya memiliki data yang "kotor" seperti yang memunculkan _alert box_, _alert box_ tersebut seharusnya tidak muncul lagi pada _browser_ mu.
+
+## Penutup
+
+- Setelah menjalankan tutorial di atas, Anda seharusnya memiliki struktur direktori lokal seperti berikut.
+```
+   mental-health-tracker
+   ├── .github\workflows
+   │   └── push.yml
+   ├── env    
+   ├── main
+   │   ├── migrations
+   │   │   ├── __init__.py
+   │   │   ├── 0001_initial.py
+   │   │   ├── 0002_alter_moodentry_id.py
+   │   │   └── 0003_moodentry_user.py   
+   │   ├── templates
+   │   │   ├── create_mood_entry.html
+   │   │   ├── card_info.html
+   │   │   ├── card_mood.html
+   │   │   ├── edit_mood.html
+   │   │   ├── login.html
+   │   │   ├── main.html
+   │   │   └── register.html
+   │   ├── __init__.py
+   │   ├── admin.py
+   │   ├── apps.py
+   │   ├── forms.py
+   │   ├── models.py
+   │   ├── tests.py
+   │   ├── urls.py
+   │   └── views.py
+   ├── mental_health_tracker
+   │   ├── __init__.py
+   │   ├── asgi.py
+   │   ├── settings.py
+   │   ├── urls.py
+   │   └── wsgi.py
+   ├── templates
+   │   └── base.html
+   │   └── navbar.html
+   ├── static
+   │   └── css
+   │       └── global.css
+   │   └── image
+   │       └── sedih-banget.png
+   ├── .gitignore
+   ├── manage.py
+   └── requirements.txt
+```
+## Referensi Tambahan
+
+- [HackTricks Cross Site Scripting](https://book.hacktricks.xyz/pentesting-web/xss-cross-site-scripting)
+- [OWASP Cross Site Scripting](https://owasp.org/www-community/attacks/xss/)
+
+## Kontributor
+
+- Juan Maxwell Tanaya
+- Muhammad Faishal Adly Nelwan
+- Muhammad Irfan Firmansyah
+
+## Credits
+
+Tutorial ini dikembangkan berdasarkan [PBP Ganjil 2024](https://github.com/pbp-fasilkom-ui/ganjil-2024) dan [PBP Genap 2024](https://github.com/pbp-fasilkom-ui/genap-2024) yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.
diff --git a/i18n/en/docusaurus-plugin-content-docs-assignments/current/individual/assignment-6.md b/i18n/en/docusaurus-plugin-content-docs-assignments/current/individual/assignment-6.md
new file mode 100644
index 0000000..2b3509f
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs-assignments/current/individual/assignment-6.md
@@ -0,0 +1,50 @@
+---
+sidebar_label: Assignment 6
+sidebar_position: 6
+Path: assignment/individual/assignment-6
+---
+
+# Assignment 6: JavaScript and Asynchronous JavaScript
+
+Platform-Based Programming (CSGE602022) — Organized by the Faculty of Computer Science Universitas Indonesia, Odd Semester 2024/2025
+
+---
+
+## Assignment Description
+
+In this assignment, you have to implement AJAX in the application that you created in the previous assignment.
+
+Checklist for this assignment is as follows:
+
+- [ ] Modify the previously created assignment 5 to use AJAX.
+  - [ ] AJAX GET
+    - [ ] Modify the codes in data cards to able to use AJAX GET.
+    - [ ] Retrieve data using AJAX GET. Make sure that the datas retrieved are only the datas belonging to the logged in user.
+  - [ ] AJAX POST
+    - [ ] Create a button that opens a modal with a form for adding a mood entry.
+
+        :::note  
+        The modal is triggered by clicking a button on the main page. When adding a mood entry successfully, the modal should be closed, and the form input should be cleared from the data entered before. If adding the mood entry fails, show an error message. 
+        :::
+
+    - [ ] Create a new view function to add a new mood entry to the database.
+    - [ ] Create a `/create-ajax/` path that routes to the new view function you created.
+    - [ ] Connect the form you created inside the modal to the `/create-ajax/` path.
+    - [ ] Perform asynchronous refresh on the main page to display the latest item list without reloading the entire main page.
+    :::warning
+    Make sure the AJAX `GET` and `POST` can be done securely.
+    :::
+- [ ] Answer the following questions in `README.md` in the root folder (please modify the `README.md` you have created; add subheadings for each task).
+    - [ ] Explain the benefits of using JavaScript in developing web applications!
+    - [ ] Explain why we need to use `await` when we call `fetch()`! What would happen if we don't use `await`?
+    - [ ] Why do we need to use the `csrf_exempt` decorator on the view used for AJAX `POST`?
+    - [ ] On this week's tutorial, the user input sanitization is done in the back-end as well. Why can't the sanitization be done just in the front-end? 
+    - [ ] Explain how you implemented the checklist above step-by-step (not just following the tutorial)!
+
+- [ ] Perform `add`-`commit`-`push` to GitHub.
+
+## Deadline
+
+The deadline for Assignment 6 is **Wednesday, 9th October 2024, at 12:00 p.m.**
+
+The teaching assistants will check the last commit of the lab assignment repository, so you do not need to submit the repository link separately.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/tutorial-5.md b/i18n/en/docusaurus-plugin-content-docs/current/tutorial-5.md
new file mode 100644
index 0000000..9745391
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/tutorial-5.md
@@ -0,0 +1,834 @@
+---
+sidebar_label: Tutorial 5
+sidebar_position: 7
+Path: docs/tutorial-5
+---
+
+# Tutorial 5: JavaScript and AJAX
+
+Platform-Based Programming (CSGE602022) — Organized by the Faculty of Computer Science Universitas Indonesia, Odd Semester 2024/2025
+
+---
+
+## Learning Objectives
+
+After completing this tutorial, students are expected to be able to:
+
+- Understand the usage of JavaScript in the context of front-end development
+- Understand the basics of JavaScript
+- Apply AJAX and Fetch API safely
+
+## JavaScript
+
+### Introduction to JavaScript
+
+JavaScript is a high-level, multi-paradigm programming language. The multi-paradigm feature of JavaScript allows it to support object-oriented programming, imperative programming, and functional programming. JavaScript itself is an implementation of ECMAScript, that serves as a baseline for the JavaScript language. Other implementations of ECMAScript that is similar to JavaScript are JScript (Microsoft) and ActionScript (Adobe).
+
+JavaScript, with HTML and CSS, is one of the three main technologies used in web development. The benefit of using JavaScript in web development is that dynamic page manipulation can be done and interaction between web pages and users can be increased. That is why most modern websites are using JavaScript on their web page to give the best experience to the user. Some things that we could do with JavaScript are to display information based on time, recognizing the type of device used, do validation on forms or data, creating cookies (not literally, but [HTTP cookies](https://en.wikipedia.org/wiki/HTTP_cookie)), change the CSS of an element dynamically, etc.
+
+Usually, JavaScript is used on the client-side of a web (client-side JavaScript), but there are some types of JavaScript that are used on the server-side of a web (server-side JavaScript) like **node.js**. Client-side means that the JavaScript code will be executed on the user's system, not on the website's server. This means that the JavaScript code complexity will not affect the server's performance but will affect the user's system performance; where more complex JavaScript will force the browser to use more memory.
+
+In the PBD course, we will only focus on the client-side JavaScript.
+
+### JavaScript Execution by Browser
+
+Take a look at the diagram below to understand how JavaScript execution is done by the browser.
+
+![javascript-works](https://preview.ibb.co/e258TG/Screenshot_from_2017_10_31_14_29_13.png)
+
+After the browser downloads the HTML web page, the browser will look for the `<script></script>` tag, and the browser will see the tag script if the tag contains embedded JavaScript or external JavaScript. If the script tag refers to an external JavaScript code, the browser will download that file first.
+
+### JavaScript Writing
+
+JavaScript could be added as an **embedded JavaScript** or **external JavaScript**. JavaScript code could be defined or written as an *embedded* code in an HTML file or as a separate file. If written outside of the HTML, the file extension for the JavaScript file is `.js`. Below is an example of how to define a JavaScript code.
+
+JavaScript could be placed in the head or body of an HTML file. In addition, the JavaScript code **must** be placed between the `<script>` and `</script>` tags. You can place more than one script tag containing JavaScript code in an HTML file.
+
+#### Embedded JavaScript pada HTML
+
+```html title="index.html"
+<script type="text/JavaScript">
+    alert("Hello World!");
+</script>
+```
+
+#### External JavaScript pada HTML
+
+```html title="index.html"
+<script type="text/JavaScript" src="js/script.js"></script>
+```
+
+```javascript title="js/script.js"
+alert("Hello World!");
+```
+
+On the external JavaScript file, the `<script>` tag is no longer needed.
+
+Separating JavaScript from the external file can provide several benefits like the code can be used in other HTML files, JavaScript and HTML do not conflict, so the focus is on developing the application, and the page loading speed can be improved. `.js` files are usually cached by the browser so that if we open the page again and there is no changes on the `.js` file, then the browser will not request the file to the server again but it will use the cached file that has been stored.
+
+### JavaScript Execution
+
+After the JavaScript code has been loaded, then the browser will start executing the JavaScript code. If the code is not event-triggered, then it will be executed immediately. If the code is event-triggered, then it will only be executed if the defined event is triggered.
+
+```javascript
+// immediately executed
+alert("Hello World");
+
+// immediately executed
+var obj = document.getElementById("object");
+// immediately executed, adding an event handler for the onclick event to the object
+obj.onclick = function () {
+    // only executed if the 'object' element is clicked
+    alert("You just clicked the object!");
+};
+```
+
+### JavaScript Syntax
+
+#### Variables
+
+Defining variables in JavaScript is very easy. Here is an example.
+
+```javascript
+var example = 0; // var example is a number
+var example = "example"; // var example is a string
+var example = true; // var example is a boolean
+```
+
+JavaScript can hold many types of data; from strings, integers, even objects. Unlike Java, which uses data types, JavaScript has a loosely typed or dynamic language, meaning that you do not need to specify the type of data in the head variable (for example, if you want to create a variable with type data `int`, the syntax would be `int x = 9`), JavaScript will automatically read the type of data based on the standard (as shown in the example above).
+
+There are some rules in choosing the identifiers or variable names in JavaScript. The first character **must** be an alphabet, underscore (`_`), or dollar sign (`$`). In addition, JavaScript identifiers are case sensitive.
+
+#### String Concatenation
+
+In JavaScript, we can also concatenate `string` with `string` like in Java.
+
+```javascript
+var str1 = "PBP" + " " + "Fun";
+var str2 = "PBP";
+var str3 = "Fun";
+var str4 = str2 + " " + str3;
+var str5 = "Fun";
+var str6 = `PBP ${str5}`;  // Has the same result as "PBP" + " " + str5
+```
+
+### JavaScript Scopes
+
+#### Local Variables
+
+Variables defined **within** a function are scoped locally, so only the code within the function can access the variable.
+
+```javascript
+// code outside the thisFunction() function cannot access the courseName variable
+function thisFunction() {
+    var courseName = "PBP";
+    // code within the thisFunction() function can access the courseName variable
+}
+```
+
+#### Global Variables
+
+Variables defined **outside** a function are global and can be accessed by other JavaScript code in the same file.
+
+```javascript
+var courseName = "PBP";
+function thisFunction() {
+    // code within the thisFunction() function can access the courseName variable
+}
+```
+
+#### Auto Global Variables
+
+Value assigned to a variable that has not been declared automatically becomes a global variable, even though the variable is within a function.
+
+```javascript
+thisFunction(); // thisFunction() function must be called first
+console.log(courseName); // print "PBP" to the JavaScript console
+function thisFunction() {
+    courseName = "PBP";
+}
+```
+
+#### Accessing Global Variables from HTML
+
+You can access variables that are in JavaScript files in HTML files that load the JavaScript file.
+
+```html
+...
+<input type="text" onclick="this.value=courseName" />
+...
+```
+
+```javascript
+...
+var courseName = "PBP";
+...
+```
+
+### Function and Event
+
+Function is a group of code that can be called anywhere in the code program (similar to `method` in Java). This reduces redundancy of code (reducing code that can be repeated). Other than that, functions in JavaScript are useful to dynamically invoke elements. Functions can be called by another function or triggered by an event (which will be explained below). Below is an example of an `index.html` file.
+
+```html title="index.html"
+...
+<input type="button" value="magicButton" id="magicButton" onclick="hooray();" />
+...
+```
+
+Here is the code in `javascript.js`.
+
+```javascript title="javascript.js"
+...
+function hooray() {
+    alert("Yahoo!");
+}
+...
+```
+
+If `magicButton` is pressed, then the `onclick` function will run the `hooray()` function in `javascript.js`, then the *alert* will be displayed according to what was previously assigned.
+
+The `onclick` code is an example of JavaScript's *event*. An *event* is JavaScript's ability to create a dynamic website. The meaning of `onclick` is to indicate what will happen to JavaScript if the element is pressed. Other than that, events are usually associated with a function that could be used as commands in JavaScript. There are also other examples of events such as `onchange`, `onmouseover`, `onmouseout`, and others, that you can read more [here](https://www.w3schools.com/js/js_events.asp).
+
+### JavaScript DOM
+
+#### HTML DOM
+
+HTML DOM (Document Object Model) is a standard of how to change, take, and delete HTML elements. HTML DOM can be accessed through JavaScript or other programming languages. The details can be found [here](https://www.w3schools.com/js/js_htmldom.asp).
+
+Here is an implementation example.
+
+```html
+...     
+<div>
+    <p onclick="myFunction()" id="demo">Example of HTML DOM</p>
+</div>
+...
+```
+
+```javascript
+...
+function myFunction() {
+    document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
+}
+...
+```
+
+#### CSS DOM
+
+Similar to HTML DOM, CSS DOM can change CSS dynamically through JavaScript. The details can be found [here](https://www.w3schools.com/js/js_htmldom_css.asp).
+
+Here is an implementation example.
+
+```html title="index.html"
+...
+<p id="blueText" onclick="changeColor()">Click me v2</p>
+...
+```
+
+```javascript title="javascript.js"
+...
+function changeColor(){
+    document.getElementById("blueText").style.color="blue";
+}
+...
+```
+
+## AJAX
+
+### Introduction to AJAX
+
+AJAX is an abbreviation of ***A**synchronous **J**avaScript **A**nd **X**ML*.
+
+AJAX is not a programming language, but a technology that provides the browser (to request data from the web server) with JavaScript and HTML DOM (to display data). AJAX can use XML to send data, but AJAX can also use text or JSON to send data. AJAX allows a web page to fetch data asynchronously by sending data to the server in the background. This means that we can update parts of a page without having to refresh the entire page.
+
+Here is a diagram of how AJAX works.
+
+![ajax-works](https://www.w3schools.com/js/pic_ajax.gif)
+
+1. An event occurs on the web page (for example, the *submit data* button is pressed)
+2. A `XMLHttpRequest` object is created by JavaScript
+3. The `XMLHttpRequest` object sends the request to the server
+4. The server processes the request
+5. The server returns the response back to the web page
+6. The response is read by JavaScript
+7. The next action will be triggered by JavaScript according to the step that was made (for example, update the data on the page)
+
+`XMLHttpRequest` was previously a standard way to make an AJAX request in JavaScript. However, XMLHttpRequest has some drawbacks, such as cumbersome handling when working with promises and callbacks, and limited support for modern code patterns.
+
+Therefore, `fetch()` was introduced as a new API for making HTTP requests with a simpler syntax and direct support for promises. This allows developers to write code that is easier to read, manage, and better aligned with modern asynchronous paradigms like async/await. `fetch()` is also more flexible in handling other data formats such as JSON, and provides a better API for handling errors and HTTP responses. Further explanation of the differences between `fetch` and `XMLHttpRequest` can be found [here](https://www.tutorialspoint.com/ajax/fetch_api_vs_xmlhttprequest.htm).
+
+On this course, you will be performing AJAX on a web browser using the `fetch()` function provided by JavaScript. In general, the use of `fetch()` for making AJAX calls can be seen [here](https://www.w3schools.com/jsref/api_fetch.asp).
+
+### Fetch API
+
+Fetch API is a new API that was introduced in ECMAScript 2020 as a new standard for making requests with `Promise`. Fetch API provides an interface for obtaining data sources (including all networks). It is a more flexible and powerful replacement of [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). The Fetch API generally used to implement AJAX more easily than with `XMLHttpRequest`. Additionally, the Fetch API supports more HTTP methods and headers compared to traditional AJAX.
+
+The `fetch()` function has several parameters, including:
+
+- `url`: The URL of the data source that will be requested
+- `method`: The HTTP method that will be used
+- `headers`: The HTTP headers that will be sent
+- `body`: The content of the request
+
+The `fetch()` function returns an `Response` object. The `Response` object has several properties, including:
+
+- `status`: The `status` code of the response
+- `headers`: The HTTP headers of the response
+- `body`: The content of the response
+
+You can learn more about the Fetch API [here](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
+
+### Async and Await Functions
+
+Before learning how to use the `fetch()` function, it's recommended that we first learn about the `async` and `await` functions which allow us to implement AJAX without the need to use an external library, such as [jQuery](https://jquery.com/).
+
+The `async` and `await` functions are new functions introduced in ECMAScript 2017. The `async` function is used to indicate a function as an asynchronous function, while the `await` function is used to wait for the result of an `async` function.
+
+You can learn more about the `async` and `await` functions at [this](https://www.w3schools.com/js/js_async.asp) link.
+
+### Using Fetch API
+
+The Fetch API provides a JavaScript interface to access and manipulate parts of the protocol, such as requests and responses. The API also provides the `fetch()` global method that provides an easy and reliable way to fetch data asynchronously across the entire network.
+
+Unlike `XMLHttpRequest`, which is based on callbacks, Fetch API is based on `Promise` and provides an alternative that is easier and more reliable to use in *service worker*. This API also integrates advanced HTTP concepts such as CORS and other extensions to HTTP.
+
+Here is an example of using Fetch API with the `async` and `await` functions to perform AJAX.
+
+```javascript
+async function fetchData() {
+    const response = await fetch("https://jokes-bapack2-api.yuana.id/v1/text/random");
+    const data = await response.json();
+    return data;
+}
+
+const joke = await fetchData();
+console.log(joke);
+```
+
+The code above will perform an AJAX request to request data from the API asynchronously. The AJAX request will store the result in the `joke` variable.
+
+You can learn more about the Fetch API at [this link](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch).
+
+## Tutorial: Adding Error Message to Login
+To make the login process easier for your users, provide a conditional to the `login_user` view in your application as such.
+
+```python title="main/views.py"
+...
+if form.is_valid():
+    user = form.get_user()
+    login(request, user)
+    response = HttpResponseRedirect(reverse("main:show_main"))
+    response.set_cookie('last_login', str(datetime.datetime.now()))
+    return response
+else:
+    messages.error(request, "Invalid username or password. Please try again.")
+...
+```
+
+**Code Explanation:**
+
+- `messages.error(request, msg)` will "render" an error message to the `request` that is sending the login request, which will then be displayed in the `login.html` template.
+
+## Tutorial: Creating Function to Add a Mood with AJAX
+
+In this section, you will create a function in the views to add a new mood to the data base with AJAX.
+
+1. Add the following two imports to the `views.py` file.
+    ```python title="main/views.py"
+    from django.views.decorators.csrf import csrf_exempt
+    from django.views.decorators.http import require_POST
+    ```
+
+2. Create a new function in the `views.py` file with the name `add_mood_entry_ajax` that receives the `request` parameter as follows.
+
+    ```python title="main/views.py"
+    ...
+    @csrf_exempt
+    @require_POST
+    def add_mood_entry_ajax(request):
+        mood = request.POST.get("mood")
+        feelings = request.POST.get("feelings")
+        mood_intensity = request.POST.get("mood_intensity")
+        user = request.user
+
+        new_mood = MoodEntry(
+            mood=mood, feelings=feelings,
+            mood_intensity=mood_intensity,
+            user=user
+        )
+        new_mood.save()
+
+        return HttpResponse(b"CREATED", status=201)
+        ...
+    ```
+    
+    **Code Explanation**:
+    - The `csrf_exempt` decorator tells Django to not check the `csrf_token` in the `POST` request that is sent to the function.
+    - The `require_POST` decorator makes the function only accessible when the user sends a `POST` request to the function. If the user sends a request with a method other than that, then a `405 Method Not Allowed` error will be returned.
+    - `mood = request.POST.get("mood")` and similarly used to retrieve data sent by the user through the `POST` request manually.
+    - `new_mood = MoodEntry(...)` is an object `Mood` new that is created manually based on the datas sent from the `POST` request.
+
+## Tutorial: Add Routing For `add_mood_entry_ajax`
+
+1. Open `urls.py` on the `main` subdirectory and import the function that you have already made.
+    ```python title="main/urls.py"
+    from main.views import ..., add_mood_entry_ajax
+    ```
+
+2. Add the URL path inside of `urlpatterns` to allow access to the functions that has been imported.
+    ```python title="main/urls.py"
+    urlpatterns = [
+        ...
+        path('create-mood-entry-ajax', add_mood_entry_ajax, name='add_mood_entry_ajax'),
+    ]
+    ```
+
+## Tutorial: Displaying Mood Entry Data with `fetch()` API
+
+1. Open the `views.py` file and **remove the two lines** below.
+    ```python title="main/views.py"
+    mood_entries = MoodEntry.objects.filter(user=request.user)
+    ```
+    and
+    ```python title="main/views.py"
+    'mood_entries': mood_entries,
+    ```
+    In this tutorial, we will fetch the **Mood Entry** objects from the `/json` endpoint, therefore the code above is no longer required.
+
+2. Open the `views.py` file and change the first line of the `show_json` and `show_xml` functions as follows.
+
+    ```python title="main/views.py"
+    data = MoodEntry.objects.filter(user=request.user)
+    ```
+3. Open the `main.html` file and remove the `mood_entries` block conditional to display the card_mood when empty. This is the code snippet that you have to remove.
+
+    ```html title="main/templates/main.html"
+    ...
+        {% if not mood_entries %}
+            <div class="flex flex-col items-center justify-center min-h-[24rem] p-6">
+                <img src="{% static 'image/sedih-banget.png' %}" alt="Sad face" class="w-32 h-32 mb-4"/>
+                <p class="text-center text-gray-600 mt-4">No mood data on the mental health tracker yet</p>
+            </div>
+        {% else %}
+            <div class="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6 w-full">
+                {% for mood_entry in mood_entries %}
+                    {% include 'card_mood.html' with mood_entry=mood_entry %}
+                {% endfor %}
+            </div>
+        {% endif %}
+    ...
+    ```
+    After removing the code snippet above, add this code snippet on the same place.
+
+    ```html title="main/templates/main.html"
+    <div id="mood_entry_cards"></div>
+    ```
+
+4. Create a `<script>` block below the file (before `{% endblock content %}`) and create a new function in the `<script>` block with the name `getMoodEntries`.
+
+    ```html title="main/templates/main.html"
+    <script>
+      async function getMoodEntries(){
+          return fetch("{% url 'main:show_json' %}").then((res) => res.json())
+      }
+    </script>
+    ```
+    **Code Explanation:**
+    - This function uses the `fetch()` API to fetch the JSON data asynchronously.
+    - After the data is fetched, the `then()` function is used to parse the JSON data into a JavaScript object.
+
+5. Create a **new function** on the `<script>` block with the name `refreshMoodEntries` that is used to refresh moods data asynchronously.
+
+    ```html title="main/templates/main.html"
+    <script>
+        ...
+     async function refreshMoodEntries() {
+        document.getElementById("mood_entry_cards").innerHTML = "";
+        document.getElementById("mood_entry_cards").className = "";
+        const moodEntries = await getMoodEntries();
+        let htmlString = "";
+        let classNameString = "";
+
+        if (moodEntries.length === 0) {
+            classNameString = "flex flex-col items-center justify-center min-h-[24rem] p-6";
+            htmlString = `
+                <div class="flex flex-col items-center justify-center min-h-[24rem] p-6">
+                    <img src="{% static 'image/sedih-banget.png' %}" alt="Sad face" class="w-32 h-32 mb-4"/>
+                    <p class="text-center text-gray-600 mt-4">No mood data on the mental health tracker yet.</p>
+                </div>
+            `;
+        }
+        else {
+            classNameString = "columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6 w-full"
+            moodEntries.forEach((item) => {
+                htmlString += `
+                <div class="relative break-inside-avoid">
+                    <div class="absolute top-2 z-10 left-1/2 -translate-x-1/2 flex items-center -space-x-2">
+                        <div class="w-[3rem] h-8 bg-gray-200 rounded-md opacity-80 -rotate-90"></div>
+                        <div class="w-[3rem] h-8 bg-gray-200 rounded-md opacity-80 -rotate-90"></div>
+                    </div>
+                    <div class="relative top-5 bg-indigo-100 shadow-md rounded-lg mb-6 break-inside-avoid flex flex-col border-2 border-indigo-300 transform rotate-1 hover:rotate-0 transition-transform duration-300">
+                        <div class="bg-indigo-200 text-gray-800 p-4 rounded-t-lg border-b-2 border-indigo-300">
+                            <h3 class="font-bold text-xl mb-2">${item.fields.mood}</h3>
+                            <p class="text-gray-600">${item.fields.time}</p>
+                        </div>
+                        <div class="p-4">
+                            <p class="font-semibold text-lg mb-2">My Feeling</p>
+                            <p class="text-gray-700 mb-2">
+                                <span class="bg-[linear-gradient(to_bottom,transparent_0%,transparent_calc(100%_-_1px),#CDC1FF_calc(100%_-_1px))] bg-[length:100%_1.5rem] pb-1">${item.fields.feelings}</span>
+                            </p>
+                            <div class="mt-4">
+                                <p class="text-gray-700 font-semibold mb-2">Intensity</p>
+                                <div class="relative pt-1">
+                                    <div class="flex mb-2 items-center justify-between">
+                                        <div>
+                                            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-indigo-600 bg-indigo-200">
+                                                ${item.fields.mood_intensity > 10 ? '10+' : item.fields.mood_intensity}
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200">
+                                        <div style="width: ${item.fields.mood_intensity > 10 ? 100 : item.fields.mood_intensity * 10}%;" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="absolute top-0 -right-4 flex space-x-1">
+                        <a href="/edit-mood/${item.pk}" class="bg-yellow-500 hover:bg-yellow-600 text-white rounded-full p-2 transition duration-300 shadow-md">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-9 w-9" viewBox="0 0 20 20" fill="currentColor">
+                                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+                            </svg>
+                        </a>
+                        <a href="/delete/${item.pk}" class="bg-red-500 hover:bg-red-600 text-white rounded-full p-2 transition duration-300 shadow-md">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-9 w-9" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                `;
+            });
+        }
+        document.getElementById("mood_entry_cards").className = classNameString;
+        document.getElementById("mood_entry_cards").innerHTML = htmlString;
+    }
+    refreshMoodEntries();
+    </script>
+    ```
+
+    **Code Explanation:**
+    - `document.getElementById("mood_entry_cards")` is used to get the element based on its ID. In this code, the element that is being targeted is the `<div>` tag with the ID `mood_entry_cards` that you have created previously.
+    - `innerHTML` is used to fill in the child element of the element that is being targeted. If `innerHTML = ""`, then it will clear the contents of the child element of the element that is being targeted.
+    - `className` is used to fill in the class name of the element that is being targeted.
+    - `moodEntries.forEach((item))` is used to perform a *for each loop* on the data *moods* that is retrieved using the `getMoodEntries()` function. Then, `htmlString` will be concatenated with the data moods to display in the container with the *cards* like in the previous tutorial.
+    - `refreshMoodEntries()` is used to call the function above when the page is loaded.
+
+## Tutorial: Creating Modal as a Form to Add a Mood
+
+1. Add the following code to implement the modal (Tailwind) on your application. You can place the following code below the `div` with the `id` `mood_entry_cards` that you have added previously.
+   
+    ```html title="main/templates/main.html"
+    ...
+    <div id="crudModal" tabindex="-1" aria-hidden="true" class="hidden fixed inset-0 z-50 w-full flex items-center justify-center bg-gray-800 bg-opacity-50 overflow-x-hidden overflow-y-auto transition-opacity duration-300 ease-out">
+      <div id="crudModalContent" class="relative bg-white rounded-lg shadow-lg w-5/6 sm:w-3/4 md:w-1/2 lg:w-1/3 mx-4 sm:mx-0 transform scale-95 opacity-0 transition-transform transition-opacity duration-300 ease-out">
+        <!-- Modal header -->
+        <div class="flex items-center justify-between p-4 border-b rounded-t">
+          <h3 class="text-xl font-semibold text-gray-900">
+            Add New Mood Entry
+          </h3>
+          <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center" id="closeModalBtn">
+            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+            </svg>
+            <span class="sr-only">Close modal</span>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <div class="px-6 py-4 space-y-6 form-style">
+          <form id="moodEntryForm">
+            <div class="mb-4">
+              <label for="mood" class="block text-sm font-medium text-gray-700">Mood</label>
+              <input type="text" id="mood" name="mood" class="mt-1 block w-full border border-gray-300 rounded-md p-2 hover:border-indigo-700" placeholder="Enter your mood" required>
+            </div>
+            <div class="mb-4">
+              <label for="feelings" class="block text-sm font-medium text-gray-700">Feelings</label>
+              <textarea id="feelings" name="feelings" rows="3" class="mt-1 block w-full h-52 resize-none border border-gray-300 rounded-md p-2 hover:border-indigo-700" placeholder="Describe your feelings" required></textarea>
+            </div>
+            <div class="mb-4">
+              <label for="moodIntensity" class="block text-sm font-medium text-gray-700">Mood Intensity (1-10)</label>
+              <input type="number" id="moodIntensity" name="mood_intensity" min="1" max="10" class="mt-1 block w-full border border-gray-300 rounded-md p-2 hover:border-indigo-700" required>
+            </div>
+          </form>
+        </div>
+        <!-- Modal footer -->
+        <div class="flex flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-2 p-6 border-t border-gray-200 rounded-b justify-center md:justify-end">
+          <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg" id="cancelButton">Cancel</button>
+          <button type="submit" id="submitMoodEntry" form="moodEntryForm" class="bg-indigo-700 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg">Save</button>
+        </div>
+      </div>
+    </div>
+    ...
+    ```
+2. Because we are using vanilla Tailwind CSS, there is no built-in modal class. Therefore, to make the modal work, we need to add the following JavaScript functions.
+
+    ```html title="main/templates/main.html"
+    <script>
+    ...
+      const modal = document.getElementById('crudModal');
+      const modalContent = document.getElementById('crudModalContent');
+
+      function showModal() {
+          const modal = document.getElementById('crudModal');
+          const modalContent = document.getElementById('crudModalContent');
+
+          modal.classList.remove('hidden'); 
+          setTimeout(() => {
+            modalContent.classList.remove('opacity-0', 'scale-95');
+            modalContent.classList.add('opacity-100', 'scale-100');
+          }, 50); 
+      }
+
+      function hideModal() {
+          const modal = document.getElementById('crudModal');
+          const modalContent = document.getElementById('crudModalContent');
+
+          modalContent.classList.remove('opacity-100', 'scale-100');
+          modalContent.classList.add('opacity-0', 'scale-95');
+
+          setTimeout(() => {
+            modal.classList.add('hidden');
+          }, 150); 
+      }
+
+      document.getElementById("cancelButton").addEventListener("click", hideModal);
+      document.getElementById("closeModalBtn").addEventListener("click", hideModal);
+    ...
+    </script>
+    ```
+    :::info
+    The form and JavaScript functions in the modal that we have created are adapted to the model in the `mental_health_tracker` application.
+
+    To create a modal without using JavaScript, we can use a built-in class in a Tailwind CSS JavaScript Library, one of which is [_Flowbite_](https://flowbite.com/). You can read more about the modal on the _Flowbite Tailwind CSS_ at [here](https://flowbite.com/docs/components/modal/).
+    :::
+
+3. Change the Add New Mood Entry button that you have added in the tutorial above and add a new button to perform the addition of data with AJAX.
+
+    ```html title="main/templates/main.html"
+    ...
+        <a href="{% url 'main:create_mood_entry' %}" class="bg-indigo-400 hover:bg-indigo-400 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 mx-4 ">
+            Add New Mood Entry
+        </a>
+        <button data-modal-target="crudModal" data-modal-toggle="crudModal" class="btn bg-indigo-700 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105" onclick="showModal();">
+          Add New Mood Entry by AJAX
+        </button>
+    ...
+    ```
+
+## Tutorial: Adding Data Mood with AJAX
+
+The modal with the form that you have created previously cannot be used to add data mood. Therefore, you need to create a new JavaScript function to add data based on the input to the data base in an AJAX.
+
+1. Create a new function in the block `<script>` with the name `addMoodEntry`.
+    ```html title="main/templates/main.html"
+    <script>
+      function addMoodEntry() {
+        fetch("{% url 'main:add_mood_entry_ajax' %}", {
+          method: "POST",
+          body: new FormData(document.querySelector('#moodEntryForm')),
+        })
+        .then(response => refreshMoodEntries())
+
+        document.getElementById("moodEntryForm").reset(); 
+        document.querySelector("[data-modal-toggle='crudModal']").click();
+
+        return false;
+      }
+    ...
+    </script>
+    ```
+    **Code Explanation:**
+    - `new FormData(document.querySelector('#moodEntryForm'))` is used to create a new `FormData` object that contains the data from the form in the modal. The `FormData` object can be used to send the form data to the server.
+    - `document.getElementById("moodEntryForm").reset()` is used to clear the contents of the field form modal after submitting.
+
+2. Add the `onclick` function to the "Add Product" button in the modal to run the `addMoodEntry()` function with the following code.
+    ```html title="main/templates/main.html"
+    <script>
+    ...
+    document.getElementById("submitMoodEntry").onclick = addMoodEntry
+    </script>
+    ```
+
+    **Code Explanation:**
+    - `document.getElementById("submitMoodEntry").onclick = addMoodEntry`: When the save button in the modal (`<button type="submit" id="submitMoodEntry" form="moodEntryForm" class="bg-indigo-700 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg">Save</button>`) is clicked, then the application will call the `addMoodEntry()` function.
+
+Congratulations! You have successfully created an application that can add data using AJAX. Go to [http://localhost:8000/](http://localhost:8000/) and try to add a new mood entry to the application. Now, the application should not need a reload every time a new mood entry has been added.
+
+## Tutorial: Protecting the Application from Cross Site Scripting (XSS)
+
+### Trying XSS
+
+Did you notice that the code that you have just added actually opens a security hole in the application? To see the severity of the security hole, follow the steps below.
+
+1. Add a new mood entry with the value of the `mood` field as follows. Other fields can be filled in according to your preference.
+    ```html
+    <img src=x onerror="alert('XSS!');">
+    ```
+
+2. Press the save button and if the storage is successful, you will get an alert with the value `XSS!` as shown in the figure below.
+    
+    ![Alert Box XSS](/img/5-alert-box-xss.png)
+
+### Adding `strip_tags` to "Clean Up" New Data
+
+From the input above, it can be seen that a hacker can add new data that can execute JavaScript in the user's browser application. The security hole is usually called Cross Site Scripting or XSS. More specifically, in this application, there is a Stored XSS, which is a payload for XSS that is stored in the application's data base. Of course, we do not want the application that we are creating to have a security hole. To close the security hole, you can follow the steps below.
+
+1. Open the `views.py` and `forms.py` files and add the following imports.
+    ```python title="main/views.py, main/forms.py"
+    from django.utils.html import strip_tags
+    ```
+
+2. In the `add_mood_entry_ajax` function in the `views.py` file, use the `strip_tags` function on the `mood` and `feelings` data before the data is inserted into the `MoodEntry`.
+    ```python title="main/views.py"
+    ...
+    @csrf_exempt
+    @require_POST
+    def add_mood_entry_ajax(request):
+        # highlight-start
+        mood = strip_tags(request.POST.get("mood")) # strip HTML tags!
+        feelings = strip_tags(request.POST.get("feelings")) # strip HTML tags!
+        # highlight-end
+        ...
+    ```
+    **Code Explanation**:
+    - The `strip_tags` function will remove all HTML tags that are present in the data sent by the user through the `POST` request, so that the data that is stored in the data base is clean. For example, `data = "<b>Programming</b> <button>Basic</button> Platform <span>Genap 2025</span>"`, `strip_tags(data)` will return `Programming Basic Platform Genap 2025`.
+    - The `mood_intensity` field is not cleaned up with `strip_tags` because the field is an `IntegerField` and if it is not an `int`, Django will not store it in the data base.
+
+3. On the `MoodEntryForm` class in the `forms.py` file, add the following two methods.
+    ```python title="main/forms.py"
+    ...
+    class MoodEntryForm(ModelForm):
+        class Meta:
+            ...
+        
+        # highlight-start
+        def clean_mood(self):
+            mood = self.cleaned_data["mood"]
+            return strip_tags(mood)
+    
+        def clean_feelings(self):
+            feelings = self.cleaned_data["feelings"]
+            return strip_tags(feelings)
+        # highlight-end
+    ...
+    ```
+    
+    **Code Explanation**:
+    - The `clean_mood` and `clean_feelings` methods will be called when `form.is_valid()` is called, so by adding the two methods, you have done validation for the `create_mood_entry` and `edit_mood` functions.
+
+4. After adding `strip_tags`, remove the data that you have just added and try to add it again. If you get an error on the form that says the `mood` field cannot be empty, then congratulations, you have added a security hole against XSS! If you do not get an error, check again whether you have followed the steps above.
+
+    ![Form Error](/img/5-form-error.png)
+
+### Sanitizing Data with DOMPurify
+
+The `strip_tags` function that you have added will "clean up" all new data, but old data must be cleaned up itself or we can use a JavaScript library called [DOMPurify](https://github.com/cure53/DOMPurify) for cleaning up on the frontend side. It is important to note that DOMPurify will only work if the data is retrieved to be displayed with HTML on the application's frontend. If there is an API `/json` or `/xml` used by the application, then the data that is obtained will still be "dirty".
+
+1. Open the `main.html` file and add the following code to the `meta` block.
+    ```html title="main/templates/main.html"
+    {% block meta %}
+    ...
+    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.7/dist/purify.min.js"></script>
+    ...
+    {% endblock meta %}
+    ```
+
+2. After that, add the following code to the `refreshMoodEntries` function that you have added previously.
+    ```html title="main/templates/main.html"
+    <script>
+        ...
+        async function refreshMoodEntries() {
+            ...
+            moods.forEach((item) => {
+                // highlight-start
+                const mood = DOMPurify.sanitize(item.fields.mood);
+                const feelings = DOMPurify.sanitize(item.fields.feelings);
+                // highlight-end
+                ...
+            });
+            ...
+        }
+        ...
+    </script>
+    ```
+    
+    :::note
+    Don't forget to change all occurrences of `item.fields.mood` to `mood` and `item.fields.feelings` to `feelings`.
+    :::
+
+4. Refresh the main page and if you have previously had dirty data like the alert box that shows up, then the alert box should no longer appear on the browser.
+
+## Closing
+
+- After running the tutorial above, you should have the local directory structure as follows.
+```
+   mental-health-tracker
+   ├── .github\workflows
+   │   └── push.yml
+   ├── env    
+   ├── main
+   │   ├── migrations
+   │   │   ├── __init__.py
+   │   │   ├── 0001_initial.py
+   │   │   ├── 0002_alter_moodentry_id.py
+   │   │   └── 0003_moodentry_user.py   
+   │   ├── templates
+   │   │   ├── create_mood_entry.html
+   │   │   ├── card_info.html
+   │   │   ├── card_mood.html
+   │   │   ├── edit_mood.html
+   │   │   ├── login.html
+   │   │   ├── main.html
+   │   │   └── register.html
+   │   ├── __init__.py
+   │   ├── admin.py
+   │   ├── apps.py
+   │   ├── forms.py
+   │   ├── models.py
+   │   ├── tests.py
+   │   ├── urls.py
+   │   └── views.py
+   ├── mental_health_tracker
+   │   ├── __init__.py
+   │   ├── asgi.py
+   │   ├── settings.py
+   │   ├── urls.py
+   │   └── wsgi.py
+   ├── templates
+   │   └── base.html
+   │   └── navbar.html
+   ├── static
+   │   └── css
+   │       └── global.css
+   │   └── image
+   │       └── sedih-banget.png
+   ├── .gitignore
+   ├── manage.py
+   └── requirements.txt
+```
+
+## Additional References
+
+- [HackTricks Cross Site Scripting](https://book.hacktricks.xyz/pentesting-web/xss-cross-site-scripting)
+- [OWASP Cross Site Scripting](https://owasp.org/www-community/attacks/xss/)
+
+## Contributors
+
+- Juan Maxwell Tanaya
+- Muhammad Faishal Adly Nelwan
+- Muhammad Irfan Firmansyah
+- Muhammad Oka (EN Translation)
+
+## Credits
+
+This tutorial was developed based on [PBP Odd 2024](https://github.com/pbp-fasilkom-ui/ganjil-2024) and [PBP Even 2024](https://github.com/pbp-fasilkom-ui/genap-2024) written by the 2024 Platform-Based Programming Teaching Team. All tutorials and instructions included in this repository are designed so that students who are taking Platform-Based Programming courses can complete the tutorials during lab sessions.
diff --git a/static/img/5-alert-box-xss.png b/static/img/5-alert-box-xss.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe22e509db0ebda2c32c9aaa56b94997106b835a
GIT binary patch
literal 5257
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
EKXO!Lxc~qF

literal 0
HcmV?d00001

diff --git a/static/img/5-form-error.png b/static/img/5-form-error.png
new file mode 100644
index 0000000000000000000000000000000000000000..ffb4b1d84ec11369899b4f2908d8e9362f67aa9d
GIT binary patch
literal 2695
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

literal 0
HcmV?d00001