istek-widuri/widuri-client
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CRUD selesai

Browse Source
This commit is contained in:
Dita Aji Pratama 2025-06-17 16:11:09 +07:00
parent 65f4657d4d
commit cc558ad78a
2 changed files with 52 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -4,9 +4,9 @@
<link rel="stylesheet" href="//cdn.datatables.net/2.3.2/css/dataTables.dataTables.min.css"> <link rel="stylesheet" href="//cdn.datatables.net/2.3.2/css/dataTables.dataTables.min.css">
</head> </head>
<body> <body>
<input type="text" placeholder="Name" /> <input id="form-add-name" type="text" placeholder="Name" />
<input type="text" placeholder="Phone" /> <input id="form-add-phone" type="text" placeholder="Phone" />
<button>Create</button> <button type="button" onclick="buttonAdd()">Create</button>
<hr> <hr>
<table id="table-list"> <table id="table-list">
<thead> <thead>

52
js/data.js
View File

@ -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({ var table = $('#table-list').DataTable({
"ajax": { "ajax": {
"url": "http://localhost:11000/api/read", "url": "http://localhost:11000/api/read",
@ -23,20 +27,62 @@ var table = $('#table-list').DataTable({
{ {
"data": "name", "data": "name",
"render": function(data, type, row) { "render": function(data, type, row) {
return data; return `<input id="form-edit-name-${row.id}" value="${data}">`;
} }
}, },
{ {
"data": "phone", "data": "phone",
"render": function(data, type, row) { "render": function(data, type, row) {
return data; return `<input id="form-edit-phone-${row.id}" value="${data}">`;
} }
}, },
{ {
"data": null, "data": null,
"render": function(data, type, row) { "render": function(data, type, row) {
return `<button>Update</button> <button>Delete</button>`; return buttonAct(row.id);
} }
}, },
], ],
}) })
function buttonAdd() {
var name = document.getElementById("form-add-name").value;
var phone = document.getElementById("form-add-phone").value;
var url = "http://localhost:11000/api/create";
var payload = {
"name":name,
"phone":phone
}
sendHttpRequest(url, "POST", payload, function (error, response) {
if (error) console.error(`Error: ${error}`);
else table.ajax.reload(null, false);
}, "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);
}, "application/json");
alert("Data berhasil dirubah");
}
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);
}, "application/json");
alert("Data berhasil dihapus, permanent, selamanya!");
}