Skip to content

Commit 02912ef

Browse files
BillDelvinBillDelvin
committed
API
0 parents  commit 02912ef

File tree

5 files changed

+305
-0
lines changed

5 files changed

+305
-0
lines changed

‎db.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"Buku": []
3+
}

‎index.html

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>API</title>
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
10+
/>
11+
<link
12+
rel="stylesheet"
13+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
14+
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
15+
crossorigin="anonymous"
16+
/>
17+
</head>
18+
<body>
19+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
20+
<a class="navbar-brand" href="./index.html">API</a>
21+
<button
22+
class="navbar-toggler"
23+
type="button"
24+
data-toggle="collapse"
25+
data-target="#navbarSupportedContent"
26+
aria-controls="navbarSupportedContent"
27+
aria-expanded="false"
28+
aria-label="Toggle navigation"
29+
>
30+
<span class="navbar-toggler-icon"></span>
31+
</button>
32+
33+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
34+
<ul class="navbar-nav mr-auto">
35+
<li class="nav-item active">
36+
<a class="nav-link" href="./index.html"
37+
>Adding Data <span class="sr-only">(current)</span></a
38+
>
39+
</li>
40+
<li class="nav-item">
41+
<a class="nav-link" href="./list.html">List Data</a>
42+
</li>
43+
</ul>
44+
</div>
45+
</nav>
46+
<div class="container mt-5">
47+
<div class="card">
48+
<div class="card-header text-center">
49+
Inventori Buku
50+
</div>
51+
<form id="inventoryBookForm">
52+
<ul class="list-group list-group-flush">
53+
<li class="list-group-item">
54+
<div class="row">
55+
<div class="col-md-3">
56+
<label for="namaBuku">Nama Buku :</label>
57+
</div>
58+
<div class="col-md-9">
59+
<input
60+
type="text"
61+
name="namaBuku"
62+
id="namaBuku"
63+
class="form-control"
64+
/>
65+
</div>
66+
</div>
67+
</li>
68+
<li class="list-group-item">
69+
<div class="row">
70+
<div class="col-md-3">
71+
<label for="penerbitBuku">Penerbit Buku :</label>
72+
</div>
73+
<div class="col-md-9">
74+
<input
75+
type="text"
76+
name="penerbitBuku"
77+
id="penerbitBuku"
78+
class="form-control"
79+
/>
80+
</div>
81+
</div>
82+
</li>
83+
<li class="list-group-item">
84+
<div class="row">
85+
<div class="col-md-3">
86+
<label for="jumlahHalaman">Jumlah Halaman :</label>
87+
</div>
88+
<div class="col-md-9">
89+
<input
90+
type="number"
91+
name="jumlahHalaman"
92+
id="jumlahHalaman"
93+
class="form-control"
94+
/>
95+
</div>
96+
</div>
97+
</li>
98+
<li class="list-group-item">
99+
<div class="row">
100+
<div class="col-md-3">
101+
<label for="jumlahBuku">Jumlah Buku :</label>
102+
</div>
103+
<div class="col-md-9">
104+
<input
105+
type="number"
106+
name="jumlahBuku"
107+
id="jumlahBuku"
108+
class="form-control"
109+
/>
110+
</div>
111+
</div>
112+
</li>
113+
</ul>
114+
<div class="text-center mt-3 mb-3">
115+
<button type="submit" class="btn btn-outline-primary">
116+
Submit
117+
</button>
118+
</div>
119+
</form>
120+
</div>
121+
</div>
122+
123+
<script
124+
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
125+
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
126+
crossorigin="anonymous"
127+
></script>
128+
<script
129+
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
130+
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
131+
crossorigin="anonymous"
132+
></script>
133+
<script
134+
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
135+
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
136+
crossorigin="anonymous"
137+
></script>
138+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
139+
<script src="./index.js"></script>
140+
</body>
141+
</html>

‎index.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
document
2+
.getElementById("inventoryBookForm")
3+
.addEventListener("submit", function () {
4+
event.preventDefault();
5+
const namaBuku = document.getElementById("namaBuku").value;
6+
const penerbitBuku = document.getElementById("penerbitBuku").value;
7+
const jumlahHalaman = document.getElementById("jumlahHalaman").value;
8+
const jumlahBuku = document.getElementById("jumlahBuku").value;
9+
const data = {
10+
namaBuku: namaBuku,
11+
penerbitBuku: penerbitBuku,
12+
jumlahHalaman: jumlahHalaman,
13+
jumlahBuku: jumlahBuku,
14+
};
15+
// console.log(data);
16+
// debugger;
17+
axios
18+
.post("http://localhost:3000/Buku", data)
19+
.then((res) => {
20+
console.log(res);
21+
window.alert("Buku berhasil di tambah");
22+
})
23+
.catch((err) => {
24+
console.log(err);
25+
});
26+
});

‎list.html

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>API</title>
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
10+
/>
11+
<link
12+
rel="stylesheet"
13+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
14+
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
15+
crossorigin="anonymous"
16+
/>
17+
</head>
18+
<body>
19+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
20+
<a class="navbar-brand" href="./index.html">API</a>
21+
<button
22+
class="navbar-toggler"
23+
type="button"
24+
data-toggle="collapse"
25+
data-target="#navbarSupportedContent"
26+
aria-controls="navbarSupportedContent"
27+
aria-expanded="false"
28+
aria-label="Toggle navigation"
29+
>
30+
<span class="navbar-toggler-icon"></span>
31+
</button>
32+
33+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
34+
<ul class="navbar-nav mr-auto">
35+
<li class="nav-item active">
36+
<a class="nav-link" href="./index.html"
37+
>Adding Data <span class="sr-only">(current)</span></a
38+
>
39+
</li>
40+
<li class="nav-item">
41+
<a class="nav-link" href="./list.html">List Data</a>
42+
</li>
43+
</ul>
44+
</div>
45+
</nav>
46+
<div class="container mt-5">
47+
<table class="table table-striped">
48+
<thead>
49+
<tr>
50+
<th scope="col">Nama Buku</th>
51+
<th scope="col">Penerbit Buku</th>
52+
<th scope="col">Jumlah Halaman</th>
53+
<th scope="col">Jumlah Buku</th>
54+
<th scope="col">Action</th>
55+
</tr>
56+
</thead>
57+
<tbody id="listdata">
58+
</tbody>
59+
</table>
60+
</div>
61+
<script
62+
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
63+
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
64+
crossorigin="anonymous"
65+
></script>
66+
<script
67+
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
68+
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
69+
crossorigin="anonymous"
70+
></script>
71+
<script
72+
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
73+
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
74+
crossorigin="anonymous"
75+
></script>
76+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
77+
<script src="./list.js"></script>
78+
</body>
79+
</html>

‎list.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
let data = [];
2+
axios
3+
.get("http://localhost:3000/Buku")
4+
.then((res) => {
5+
const listsHTML = document.querySelector("#listdata");
6+
data = res.data;
7+
8+
data.forEach((item) => {
9+
const { id, namaBuku, penerbitBuku, jumlahHalaman, jumlahBuku } = item;
10+
const tableHTML = `<tr>
11+
<td>${namaBuku}</td>
12+
<td>${penerbitBuku}</td>
13+
<td>${jumlahHalaman}</td>
14+
<td>${jumlahBuku}</td>
15+
<td>
16+
<button type="button" onclick="update(${id})" class="btn btn-outline-secondary">
17+
<i class="far fa-edit"></i>
18+
</button>
19+
<button type="button" onclick="remove(${id})" class="btn btn-outline-danger">
20+
<i class="fas fa-trash-alt"></i>
21+
</button>
22+
</td>
23+
</tr>
24+
`;
25+
listsHTML.innerHTML += tableHTML;
26+
});
27+
})
28+
.catch((pesanError) => {
29+
console.error(pesanError);
30+
});
31+
32+
const update = (id) => {
33+
const listData = data.find((item) => {
34+
return item.id === id;
35+
});
36+
37+
if (listData) {
38+
const namaBuku = window.prompt("Nama Buku", listData.namaBuku);
39+
const penerbitBuku = window.prompt("Penerbit Buku", listData.penerbitBuku);
40+
const jumlahHalaman = window.prompt("Jumlah Halaman", listData.jumlahHalaman);
41+
const jumlahBuku = window.prompt("Jumlah Buku", listData.jumlahBuku);
42+
43+
const data = {
44+
namaBuku,
45+
penerbitBuku,
46+
jumlahHalaman,
47+
jumlahBuku,
48+
};
49+
50+
axios.put(`http://localhost:3000/Buku/${id}`, data);
51+
}
52+
};
53+
54+
const remove = (id) => {
55+
axios.delete(`http://localhost:3000/Buku/${id}`);
56+
};

0 commit comments

Comments
 (0)