diff --git a/README.md b/README.md index be9ca73..bd6db67 100644 --- a/README.md +++ b/README.md @@ -872,4 +872,202 @@ Jawab: {% endblock content %} ``` -- ```{% if forloop.last %} bg-transparent {% else %}bg-white{% endif %}``` menambahkan pada class agar ketika item tersebut adalah item yang terakhir, warnanya berbeda dengan barang yang lain. \ No newline at end of file +- ```{% if forloop.last %} bg-transparent {% else %}bg-white{% endif %}``` menambahkan pada class agar ketika item tersebut adalah item yang terakhir, warnanya berbeda dengan barang yang lain. + +
+ +# Tugas 6 + +1. Jelaskan perbedaan antara asynchronous programming dengan synchronous programming. + + Synchronous Programming adalah kode dieksekusi secara berurutan. Artinya, satu operasi harus selesai sebelum operasi berikutnya dimulai. Jika ada operasi yang membutuhkan waktu lama untuk menyelesaikan seluruh program akan menunggu sampai operasi tersebut selesai. + + Asynchronous Programming adalah operasi yang membutuhkan waktu lama untuk menyelesaikan dapat dijalankan secara paralel dengan operasi lain. kode tidak perlu menunggu operasi tersebut selesai sebelum melanjutkan ke operasi berikutnya. Sebaliknya, kita dapat menjalankan operasi tersebut, melanjutkan ke tugas berikutnya, dan kemudian kembali ke operasi tersebut ketika sudah selesai. + +2. Dalam penerapan JavaScript dan AJAX, terdapat penerapan paradigma event-driven programming. Jelaskan maksud dari paradigma tersebut dan sebutkan salah satu contoh penerapannya pada tugas ini. + + Event-Driven Programming adalah paradigma pemrograman di mana alur program ditentukan oleh peristiwa seperti input pengguna, sensor output, atau pesan dari program lain. Biasanya dipicu oleh aksi pengguna seperti klik mouse, ketukan keyboard, atau interaksi lainnya dengan antarmuka pengguna. + Contohnya adalah menambahkan item melalui modal, dengan kita menekan tombol add item pada modal + ```java + function addItem() { + fetch("{% url 'main:create_ajax' %}", { + method: "POST", + body: new FormData(document.querySelector('#form')) + }).then(refreshItems) + + document.getElementById("form").reset() + return false + } + document.getElementById("button_add").onclick = addItem + ``` + Fungsi ```addItem()``` dipanggil ketika tombol dengan id ‘button_add’ diklik oleh pengguna. + +3. Jelaskan penerapan asynchronous programming pada AJAX. + + Asynchronous JavaScript dan XML (AJAX) adalah teknik yang digunakan dalam pengembangan web untuk membuat aplikasi web yang interaktif. Dengan AJAX, aplikasi web dapat mengirim dan menerima data dari server secara asynchronous tanpa mengganggu perilaku halaman itu sendiri. Berarti halaman web tidak perlu dimuat ulang setiap kali data dikirim atau diterima dari server yang membuat aplikasi web lebih responsif dan user-friendly. + +4. Pada PBP kali ini, penerapan AJAX dilakukan dengan menggunakan Fetch API daripada library jQuery. Bandingkanlah kedua teknologi tersebut dan tuliskan pendapat kamu teknologi manakah yang lebih baik untuk digunakan. + + - Ukuran: jQuery adalah library yang cukup besar dan jika Anda hanya menggunakan AJAX, mungkin sebagian besar kode jQuery tidak digunakan. Di sisi lain, Fetch API adalah fitur bawaan dari JavaScript modern dan tidak memerlukan library tambahan. + - Kemudahan Penggunaan: jQuery menyediakan metode .ajax() yang sangat kuat dan fleksibel, yang dapat disesuaikan dengan berbagai kebutuhan. Di sisi lain, Fetch API memiliki sintaks yang lebih modern dan ringkas. + - Penggunaan Promise: Fetch API menggunakan Promise secara native, yang membuat penanganan asynchronous lebih mudah dan kode lebih mudah dibaca. Di sisi lain, meskipun jQuery memiliki metode .promise() dan bisa bekerja dengan Promise, metode .ajax() secara default menggunakan callback. + + Menurut saya, Fetch API lebih baik karena menggunakan sintaks yang lebih modern dan mudah dibaca. Ini juga menggunakan Promise, yang membuat penanganan operasi asynchronous menjadi lebih mudah dan kode lebih rapi. + +5. Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial) + + - AJAX GET + + Mengubah kode tabel data item agar dapat mendukung AJAX GET. + ```html +
+ ``` + Menghapus isi dari tabel dan memberikan + ```id="item_card"``` + + Menambahkan tag `````` dan mengisinya dengan fungsi get + ```python + def get_item_json(request): + product_item = Item.objects.filter(user=request.user) + return HttpResponse(serializers.serialize('json', product_item)) + ``` + Menambahkan pathnya pada urls.py + ```python + path('get-item/', get_item_json, name='get_item_json'), + ``` + Menambahkan fungsi getItem untuk mengambil item yang ditambahkan oleh user tersebut. + ```javascript + async function getItems() { + return fetch("{% url 'main:get_item_json' %}").then((res) => res.json()) + } + ``` + ```getItems()``` melakukan fetch data dengan menjalankan method ```get_item_json``` yang berada pada views.py yang hasilnya dari responsenya dikirimkan dalam format json. + + Menambahkan fungsi refreshItems yang berfungsi untuk mengupdate item setiap kali item bertambah dan juga mengeset item agar dapat masuk kedalam web dalam bentuk card. + ```java + async function refreshItems() { + document.getElementById("item_card").innerHTML = "" + const items = await getItems() + if(items.length > 0){ + messageText.textContent = "Daftar Barang"; + }else{ + messageText.textContent = "Tambah Barang Dulu Yukk"; + } + let htmlString = `` + items.forEach((item, index, array) => { + const isLastItem = index === array.length - 1; + htmlString += `\n +
+
+
${item.fields.name}
+ +
+
h
+

${item.fields.description}

+
+

Rp.${item.fields.price}

+ ${item.fields.amount} items +
+
+ + + + + + +
+
+ ` + }) + document.getElementById("item_card").innerHTML = htmlString + } + ``` + - AJAX POST + + Menambahkan Modal + ```html + + ``` + Membuat sebuah button yang berfungsi untuk membuka modal dengan form untuk menambahkan item. + ```html + + ``` + Membuat fungsi create_ajax untuk menambahkan item dengan menggunakan ajax. Kemudian method ini akan mengambil nilai dari form yang sudah diisi kemudian menambahkan item sesuai dengan data dan menyimpanya ke database. + ```python + @csrf_exempt + def create_ajax(request): + if request.method == 'POST': + name = request.POST.get("name") + price = request.POST.get("price") + amount = request.POST.get("amount") + description = request.POST.get("description") + user = request.user + + new_item = Item(name=name, price=price, description=description, amount=amount, user=user) + new_item.save() + + return HttpResponse(b"CREATED", status=201) + + return HttpResponseNotFound() + ``` + Membuat path fungsi ```create_ajax`` + ```python + path('create-ajax/', create_ajax, name='create_ajax'), + ``` + Menghubungkan form modal yang ada dalam main.html ke path ```create_ajax``` degan cara menambahkan funsi ```addItem()``` di dalam tag `````` + ```javascript + ... + function addItem() { + fetch("{% url 'main:create_ajax' %}", { + method: "POST", + body: new FormData(document.querySelector('#form')) + }).then(refreshItems) + + document.getElementById("form").reset() + return false + } + ... + ``` + Menambahkan ```refreshItems()``` untuk menampilkan daftar item terbaru tanpa reload halaman utama secara keseluruhan + ```javascript + refreshItems() + ``` + - Menjalankan ```python manage.py collectstatic``` untuk mengumpulkan file static dari setiap aplikasi dalam suatu folder yang dapat dengan mudah disajikan pada produksi \ No newline at end of file diff --git a/main/templates/main.html b/main/templates/main.html index cda046a..06ed6e9 100644 --- a/main/templates/main.html +++ b/main/templates/main.html @@ -6,6 +6,9 @@

Hello {{ name}} from {{ class}}!

+

+ Kamu Menyimpan {{total_items}} item +

@@ -105,7 +108,7 @@
${item.fields.n refreshItems() function addItem() { - fetch("{% url 'main:add_item_ajax' %}", { + fetch("{% url 'main:create_ajax' %}", { method: "POST", body: new FormData(document.querySelector('#form')) }).then(refreshItems) diff --git a/main/urls.py b/main/urls.py index 627438e..7d545b8 100644 --- a/main/urls.py +++ b/main/urls.py @@ -1,5 +1,5 @@ from django.urls import path -from main.views import show_main, create_item, show_xml, show_json, show_json_by_id, show_xml_by_id, show_html, show_html_by_id, register, login_user, logout_user, add_amount, remove_item,delete_amount, add_item_ajax, get_item_json, delete_item_ajax +from main.views import show_main, create_item, show_xml, show_json, show_json_by_id, show_xml_by_id, show_html, show_html_by_id, register, login_user, logout_user, add_amount, remove_item,delete_amount, create_ajax, get_item_json, delete_item_ajax app_name = 'main' @@ -14,7 +14,7 @@ path('json/', show_json, name='show_json'), path('register/', register, name='register'), path('get-item/', get_item_json, name='get_item_json'), - path('create-item-ajax/', add_item_ajax, name='add_item_ajax'), + path('create-ajax/', create_ajax, name='create_ajax'), path('delete-item-ajax//', delete_item_ajax, name='delete_item_ajax'), path('login/', login_user, name='login'), path('logout/', logout_user, name='logout'), diff --git a/main/views.py b/main/views.py index 13c5e78..d13fecc 100644 --- a/main/views.py +++ b/main/views.py @@ -74,7 +74,7 @@ def get_item_json(request): return HttpResponse(serializers.serialize('json', product_item)) @csrf_exempt -def add_item_ajax(request): +def create_ajax(request): if request.method == 'POST': name = request.POST.get("name") price = request.POST.get("price")