tugas 6

README.md

@@ -1,3 +1,35 @@
+# TUGAS 6
+## 1. Perbedaan antara Asynchronous Programming dengan Synchronous Programming
+Dalam asynchronous programming, tugas - tugas dieksekusi secara paralel atau nonblok. Tugas - tugas dapat berjalan secara bersamaan tanpa harus menunggu satu sama lain. Program asinkron berguna ketika terdapat tugas-tugas yang memerlukan waktu lama, seperti permintaan data dari server atau operasi I/O, sehingga program dapat melanjutkan menjalankan tugas lain tanpa harus menunggu tugas yang memakan waktu lama selesai.
+Sedangkan dalam synchronous programming, tugas - tugas dieksekusi secara berurutan atau satu persatu. Setiap tugas harus menunggu tugas sebelumnya selesai  sebelum dapat berjalan. Mekanisme seperti ini cocok untuk tugas - tugas yang tidak memerlukan waktu lama. Namun, hal ini bisa mengakibatkan program menjadi lambat jika ada tugas yang memakan waktu lama. 
+## 2.Penjelasan Paradigma Event-Driven Programming
+Paradigma Event-Driven Programming merupakan pendekatan yang mana program merespon peristiwa atau event yang terjadi secara asinkron. Program akan menunggu peristiwa tertentu terjadi, seperti pemain data dari server, klik tombol atau peristiwa lainnya. Setelah mendapatkan peristiwa tersebut kemudian program akan merespon peristiwa tersebut dengan menjalankan kode yang sesuai. Contoh penggunaanya dalam tugas ini adalah ketika saya mengklik tombol add product, maka program akan menunggu peristiwa klik tersebut dan kemudian menjalankan permintaan AJAX untuk mengambil data dari server atau menambahkan produk ke dalam sistem. 
+## 3.Penerapan Asynchronous Programming pada AJAX
+Penerapan asynchronous programming pada AJAX memungkinkan permintaan seperti HTTP (misalnya mengambil data dari server) untuk dieksekusi secara asinkron. Ini berarti aplikasi website tidak akan terhenti atau terblokir saat menunggu respon dari server. Contohnya adalah ‘XMLHttpRequest’ atau Fetch API untuk membuat permintaan AJAX asinkron. Penerapan AJAX, antara lain:
+- Penggunaan Fetch API: Digunakan untuk mengirim permintaan HTTP asinkron ke server.
+- Fungsi Callback: Dibuat untuk mengelola respons dari server.
+- Mengirim Permintaan: Menggunakan Fetch API untuk mengirim permintaan ke server dengan pilihan metode (GET atau POST) dan header yang sesuai.
+- Menangani Respons: Respons dari server berupa data yang bisa diolah dalam fungsi callback.
+- Penanganan Kesalahan: Kesalahan selama permintaan ditangani dengan .catch.
+- Integrasi dengan Aplikasi: Logika aplikasi diterapkan dalam fungsi callback untuk memproses data respons sesuai kebutuhan aplikasi.
+## 4. Perbandingan FETCH API dengan jQuery untuk AJAX
+Fetch API adalah bawaan dari JavaScript modern untuk mengirim permintaan HTTP. FETCH API lebih modern,  lebih ringan daripada jQuery dan berfungsi dengan baik dengan Promise yang mendukung pemrograman asinkron. Penggunaan FETCH API tepat jika kita ingin menghindari beban berat jQuery.dan hanya memerlukan fitur - fitur AJAX.  Selain itu, Fetch API memungkinkan kita untuk memutuskan koneksi atau mencoba ulang permintaan dengan lebih mudah. Dengan skenario pemutusan konektivitas tersebut , kita dapat mengendalikan timeout da kita dapat mencoba ulang permintaan yang diperlukan FETCH API dapat dengan mudah menambahkan header khusus ke permintaan kita dengan menggunakan opsi dalam fetch() yang sangat berguna jika kita mau mengirim otorisasi atau header lainnya. Objek ‘Response’ seperti fitur pada Fetch API memungkinkan untuk memproses response dengan berbagai cara, seperti mengambil data dalam format JSON atau mengambil informasi header. 
+jQuery merupakan  perpustakaan JavaScript yang lebih tua dan lebih berat daripada Fetch API. Fitur - fitur nya melampaui AJAX, seperti animasi, manipulasi DOM, dan lainnya. Kedua, jQuery menggunakan pendekatan berbasis callback untuk mengelola tugas asinkron. Pendetekaatna ini menyebabkan kode yang lebih sulit dibaca jika kita memiliki banyak permintaan bersarang. Dari segi kapabilitas, jQuery memiliki dukungan yang lebih luas untuk browser yang lebih lama, yang bisa bermanfaat jika kita perlu mendukung peramban yang lebih tua. Selanjutnya, wrapper untuk XMLHTTPRequest, jQuery menggunakan XMLHttpRequest atau ActiveXobject (untuk IE lama) untuk melakukan permintaan AJAX. Ini berarti kita sebenarnya menggunakan teknologi yang sama tetapi dengan antarmuka yang lebih tingkat tinggi. 
+# 5. Cara mengimplementasikan checklist secara step-by-step
+Langkah 1: Mengubah AJAX GET 
+    Di dalam direktori "main/templates," saya membuka berkas "main.html." Pertama, saya menghapus kode tabel yang telah saya buat sebelumnya dan menambahkan elemen <table id="product_table"></table> untuk menyiapkan wadah tabel data produk. Selanjutnya, saya membuat fungsi baru dalam berkas "views.py" yang saya beri nama get_product_json. Fungsi ini bertugas untuk merespons permintaan dengan data dalam format JSON. Dengan fungsi ini, saya dapat menampilkan data produk pada halaman HTML yang bergantung pada pengguna yang sedang masuk. c. Saya pastikan fungsi get_product_json dapat diakses melalui URL dengan membuka berkas "urls.py" dalam folder "main," mengimpor fungsi tersebut, dan menambahkan path URL yang mengarahkan ke fungsi tersebut. Contohnya: path('get-product/', get_product_json, name='get_product_json').
+Langkah 2: Implementasi AJAX POST 
+    Selanjutnya, saya menambahkan kode yang diperlukan untuk mengaktifkan modal menggunakan komponen Bootstrap di dalam aplikasi. Saya sisipkan tombol dengan atribut data-bs-toggle dan data-bs-target untuk memungkinkan pengguna membuka modal dengan mudah. Saya membuat fungsi view baru dalam berkas "views.py" yang saya beri nama add_product_ajax. Fungsi ini akan menambahkan produk baru ke basis data. Fungsi ini menerima parameter request untuk menangani permintaan dari pengguna. Dalam fungsi ini, saya akan mengekstrak nilai dari permintaan POST yang dikirimkan melalui AJAX, seperti "name," "amount," "description," dan "user." Nilai-nilai ini kemudian saya gunakan untuk menambahkan produk baru ke basis data. c. Saya pastikan untuk mendefinisikan path URL yang mengarahkan ke fungsi add_product_ajax dalam berkas "urls.py." Ini akan memungkinkan aplikasi untuk mengakses fungsi tersebut melalui URL. Contohnya: path('create-product-ajax/', add_product_ajax, name='add_product_ajax').
+Langkah 3: Menghubungkan Form Modal dengan Path /create-ajax 
+    Saya membuat fungsi JavaScript baru dengan nama addProduct. Fungsi ini bertujuan untuk menghubungkan form dalam modal dengan path "/create-ajax." Dalam implementasi addProduct(), saya menggunakan objek FormData untuk mengumpulkan data dari form modal dan mengirimkannya ke server melalui AJAX. Setelah pengiriman berhasil, saya mengosongkan isi form modal.Untuk memastikan bahwa fungsi addProduct() dijalankan saat pengguna mengklik tombol "Add Product" dalam modal, saya tambahkan atribut onclick pada tombol tersebut dengan kode document.getElementById("button_add").onclick = addProduct.
+Langkah 4: Memperbarui Halaman Utama secara Asinkron 
+    Saya membuat fungsi JavaScript baru yang saya beri nama refreshProducts. Fungsi ini bertugas untuk memperbarui data produk secara asinkron. Dalam implementasinya, saya mengosongkan isi tabel produk dan mengambil data produk terbaru dengan menggunakan get(). Setiap produk saya olah dan tambahkan ke dalam tabel.
+Langkah 5: Menjalankan Perintah collectstatic Terakhir, saya menjalankan perintah collectstatic. 
+    Perintah ini berguna untuk mengumpulkan file statis dari berbagai aplikasi dalam proyek ke dalam satu folder yang siap digunakan di lingkungan produksi. Saya pastikan untuk menjalankan perintah ini melalui terminal setelah saya berpindah ke direktori proyek saya.
+
+
+
+
 # TUGAS 5
 ## 1. Jelaskan manfaat dari setiap element selector dan kapan waktu yang tepat untuk menggunakannya
 Element selectors dalam CSS berguna untuk menentukan gaya atau tampilan elemen HTML tertentu pada halaman website. Jenis - jenis element selector beserta manfaat dan penggunaan yang tepat, atnara lain:

main/templates/create_product.html

@@ -1,5 +1,4 @@
 {% extends 'base.html' %}
-
 {% block meta %}
     <title>Add New Product</title>
     <style>
@@ -41,7 +40,7 @@
 
         /* Gaya untuk input teks dalam form */
         .form-control {
-            width: 80%;
+            width: 100%;
             padding: 15px;
             margin-bottom: 15px;
             border: none;
@@ -66,20 +65,40 @@
         }
     </style>
 {% endblock meta %}
-
 {% block content %}
-<div class="form-container">
-    <div class="form-card">
-        <h1>Add New Product</h1>
-        <form method="POST">
-            {% csrf_token %}
-            <div class="form-group">
-                {{ form.as_table }}
-            </div>
-            <div class="form-group">
-                <input class="btn submit_btn" type="submit" value="Add Product">
+<div class="container">
+    <div class="row justify-content-center vh-100 align-items-center form-container">
+        <div class="col-md-6">
+            <div class="card form-card">
+                <div class="card-header">
+                    <h1 class="mb-0 text-center">Add New Item</h1>
+                </div>
+                <div class="card-body">
+                    <form method="POST">
+                        {% csrf_token %}
+                        <div class="form-group">
+                            <label for="name">Name:</label>
+                            <input type="text" class="form-control" id="name" name="name">
+                        </div>
+                        <div class="form-group">
+                            <label for="price">Price:</label>
+                            <input type="text" class="form-control" id="price" name="price">
+                        </div>
+                        <div class="form-group">
+                            <label for="amount">Amount:</label>
+                            <input type="text" class="form-control" id="amount" name="amount">
+                        </div>
+                        <div class="form-group">
+                            <label for="description">Description:</label>
+                            <textarea class="form-control" id="description" name="description" rows="4"></textarea>
+                        </div>
+                        <div class="text-center">
+                            <button type="submit" class="btn submit_btn mt-4">Add Item</button>
+                        </div>
+                    </form>
+                </div>
             </div>
-        </form>
+        </div>
     </div>
 </div>
-{% endblock content %}
+{% endblock %}

main/templates/edit_product.html

@@ -0,0 +1,64 @@
+{% extends 'base.html' %}
+
+{% load static %}
+
+{% block content %}
+<div style="display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(45deg, #ff00cc, #3333ff, #00ccff, #33ff00); background-size: 400% 400%; animation: gradientAnimation 10s linear infinite;">
+
+    <div style="background-color: rgba(255, 255, 255, 0.8); border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); padding: 20px; text-align: center;">
+
+        <h1 style="font-size: 36px; margin-bottom: 20px;">Edit Product</h1>
+
+        <form method="POST">
+            {% csrf_token %}
+            <table>
+                {{ form.as_table }}
+                <tr>
+                    <td></td>
+                    <td>
+                        <input type="submit" class="btn submit_btn" value="Edit Product"/>
+                    </td>
+                </tr>
+            </table>
+        </form>
+    </div>
+
+</div>
+
+<style>
+    /* Keyframes animation */
+    @keyframes gradientAnimation {
+        0% {
+            background-position: 0% 50%;
+        }
+        100% {
+            background-position: 100% 50%;
+        }
+
+    /* Gaya untuk input teks dalam form */
+    .form-control {
+        width: 100%;
+        padding: 15px;
+        margin-bottom: 15px;
+        border: none;
+        border-radius: 5px;
+        background: rgba(255, 255, 255, 0.2);
+    }
+
+    /* Gaya untuk tombol dalam form */
+    .btn.submit_btn {
+        background-color: #2ecc71;
+        color: #fff;
+        padding: 15px 30px;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 18px;
+    }
+
+    /* Gaya hover untuk tombol submit */
+    .btn.submit_btn:hover {
+        background-color: #27ae60;
+    }
+</style>
+{% endblock %}