pertemuan 11

2025-06-10 11:30:09 +07:00 · 2025-06-10 11:30:09 +07:00 · 2f4d912095
commit 2f4d912095
3 changed files with 82 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Widuri</title>
+        <link rel="stylesheet" href="//cdn.datatables.net/2.3.2/css/dataTables\.dataTables.min.css">
+    </head>
+    <body>
+        <table id="table-list">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Name</th>
+                    <th>Phone</th>
+                </tr>
+            </thead>
+
+            <tbody></tbody>
+
+        </table>
+        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+        <script src="//cdn.datatables.net/2.3.2/js/dataTables.min.js"></script>
+    
+        <script src="js/carrack.js"></script>
+        <script src="js/data.js"></script>
+    </body>
+</html>
--- a/js/carrack.js
+++ b/js/carrack.js
@ -0,0 +1,19 @@
+function sendHttpRequest(url, method, data, callback, contentType = "multipart/form-data", authorization = "") {
+  var xhr = new XMLHttpRequest();
+  xhr.open(method, url, true);
+  xhr.setRequestHeader("Content-Type", contentType);
+  xhr.setRequestHeader("Authorization", authorization);
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      if (xhr.status === 200) {
+        var response = xhr.responseText;
+        callback(null, response);
+      }
+      else callback(xhr.status, null);
+    }
+  };
+  var requestData;
+  if (contentType === "application/json") requestData = JSON.stringify(data);
+  else requestData = data;
+  xhr.send(requestData);
+}
--- a/js/data.js
+++ b/js/data.js
@ -0,0 +1,35 @@
+var table = $('#table-list').DataTable({
+    "ajax": {
+        "url": "http://localhost:11000/api/read",
+        "type": "POST",
+        "dataSrc": "data",
+        "contentType": "application/json",
+        "data": function (d) {
+            return JSON.stringify({});
+        },
+        "error": function (xhr, error, thrown) {
+            console.error("Error fetching data:", thrown);
+            console.error("Response:", xhr.responseText);
+        }
+    },
+    "columns": [
+        { 
+            "data": "id", 
+            "render": function (data, type, row) {
+                return data;
+            }
+        },
+        { 
+            "data": "name", 
+            "render": function (data, type, row) {
+                return data;
+            },
+        },
+        { 
+            "data": "phone",
+            "render": function (data, type, row) {
+                return data;
+            },
+        },
+    ],
+})