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

Compare commits

base: istek-widuri:pagi
Branches Tags
istek-widuri:master
istek-widuri:sore
istek-widuri:pagi
..
compare: istek-widuri:master
Branches Tags
istek-widuri:master
istek-widuri:sore
istek-widuri:pagi

1 Commits
pagi ... master

Author SHA1 Message Date
Dita Aji Pratama
cc558ad78a CRUD selesai 2025-06-17 16:11:09 +07:00
2 changed files with 32 additions and 41 deletions
Show Stats Expand all files Collapse all files

2
index.html
View File

@ -6,7 +6,7 @@
<body> <body>
<input id="form-add-name" type="text" placeholder="Name" /> <input id="form-add-name" type="text" placeholder="Name" />
<input id="form-add-phone" type="text" placeholder="Phone" /> <input id="form-add-phone" type="text" placeholder="Phone" />
<button id="button-add" type="button" onclick="buttonAdd()">Create</button> <button type="button" onclick="buttonAdd()">Create</button>
<hr> <hr>
<table id="table-list"> <table id="table-list">
<thead> <thead>

71
js/data.js
View File

@ -27,13 +27,13 @@ var table = $('#table-list').DataTable({
{ {
"data": "name", "data": "name",
"render": function(data, type, row) { "render": function(data, type, row) {
return `<input id="form-edit-name-${row.id}" type="text" value="${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 `<input id="form-edit-phone-${row.id}" type="text" value="${data}">`; return `<input id="form-edit-phone-${row.id}" value="${data}">`;
} }
}, },
{ {
@ -46,52 +46,43 @@ var table = $('#table-list').DataTable({
}) })
function buttonAdd() { function buttonAdd() {
var name = document.getElementById("form-add-name" ).value; var name = document.getElementById("form-add-name").value;
var phone = document.getElementById("form-add-phone" ).value; var phone = document.getElementById("form-add-phone").value;
var url = "http://localhost:11000/api/create"; var url = "http://localhost:11000/api/create";
var payload = { var payload = {
"name" : name, "name":name,
"phone" : phone "phone":phone
}; }
sendHttpRequest(url, "POST", payload, function (error, response) { sendHttpRequest(url, "POST", payload, function (error, response) {
if (error) console.error("Error:", error); if (error) console.error(`Error: ${error}`);
else { else table.ajax.reload(null, false);
table.ajax.reload(null, false); // false means keep the current page
console.log("JSON Response:", response);
}
}, "application/json"); }, "application/json");
} }
function buttonEdit(key){ function buttonEdit(key) {
var name = document.getElementById(`form-edit-name-${key}` ).value; var name = document.getElementById(`form-edit-name-${key}`).value;
var phone = document.getElementById(`form-edit-phone-${key}` ).value; var phone = document.getElementById(`form-edit-phone-${key}`).value;
var url = "http://localhost:11000/api/update"; var url = "http://localhost:11000/api/update";
var payload = { var payload = {
"key" : key, "key":key,
"name" : name, "name":name,
"phone" : phone "phone":phone
}; }
sendHttpRequest(url, "POST", payload, function (error, response) { sendHttpRequest(url, "POST", payload, function (error, response) {
if (error) console.error("Error:", error); if (error) console.error(`Error: ${error}`);
else { else table.ajax.reload(null, false);
table.ajax.reload(null, false); // false means keep the current page
console.log("JSON Response:", response);
}
}, "application/json"); }, "application/json");
alert("Data telah di Update"); alert("Data berhasil dirubah");
} }
function buttonRemove(key){ function buttonRemove(key) {
var url = "http://localhost:11000/api/delete"; var url = "http://localhost:11000/api/delete";
var payload = { var payload = {
"key" : key "key":key
}; }
sendHttpRequest(url, "POST", payload, function (error, response) { sendHttpRequest(url, "POST", payload, function (error, response) {
if (error) console.error("Error:", error); if (error) console.error(`Error: ${error}`);
else { else table.ajax.reload(null, false);
table.ajax.reload(null, false); // false means keep the current page
console.log("JSON Response:", response);
}
}, "application/json"); }, "application/json");
alert("Data telah di Hapus Selamanya"); alert("Data berhasil dihapus, permanent, selamanya!");
} }