From 52afee5e253201e8dd8b7b0ac33acddfa34f6760 Mon Sep 17 00:00:00 2001
From: Dita Aji Pratama <ditaajipratama@protonmail.com>
Date: Tue, 17 Jun 2025 11:05:03 +0700
Subject: [PATCH] Bikin fitur Update dan Delete pada tiap row

---
 js/data.js | 43 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/js/data.js b/js/data.js
index 36bb501..5f8a86a 100644
--- a/js/data.js
+++ b/js/data.js
@@ -1,3 +1,7 @@
+function buttonAct(id) {
+    return `<button onclick="buttonEdit(${id})">Update</button> <button onclick="buttonRemove(${id})">Delete</button>`
+}
+
 var table = $('#table-list').DataTable({
     "ajax": {
         "url": "http://localhost:11000/api/read",
@@ -23,19 +27,19 @@ var table = $('#table-list').DataTable({
         {
             "data": "name",
             "render": function(data, type, row) {
-                return data;
+                return `<input id="form-edit-name-${row.id}" type="text" value="${data}">`;
             }
         },
         {
             "data": "phone",
             "render": function(data, type, row) {
-                return data;
+                return `<input id="form-edit-phone-${row.id}" type="text" value="${data}">`;
             }
         },
         {
             "data": null,
             "render": function(data, type, row) {
-                return `<button>Update</button> <button>Delete</button>`;
+                return buttonAct(row.id);
             }
         },
     ],
@@ -58,3 +62,36 @@ function buttonAdd() {
     }, "application/json");
 }
 
+function buttonEdit(key){
+    var name 	= document.getElementById(`form-edit-name-${key}`	).value;
+    var phone 	= document.getElementById(`form-edit-phone-${key}`	).value;
+    var url		= "http://localhost:11000/api/update";
+    var payload	= {
+        "key"	: key,
+        "name"	: name,
+        "phone"	: phone
+    };
+    sendHttpRequest(url, "POST", payload, function (error, response) {
+        if (error) console.error("Error:", error);
+        else {
+            table.ajax.reload(null, false); // false means keep the current page
+            console.log("JSON Response:", response);
+        }
+    }, "application/json");
+    alert("Data telah di Update");
+}
+
+function buttonRemove(key){
+    var url		= "http://localhost:11000/api/delete";
+    var payload	= {
+        "key"	: key
+    };
+    sendHttpRequest(url, "POST", payload, function (error, response) {
+        if (error) console.error("Error:", error);
+        else {
+            table.ajax.reload(null, false); // false means keep the current page
+            console.log("JSON Response:", response);
+        }
+    }, "application/json");
+    alert("Data telah di Hapus Selamanya");
+}