diff --git a/README.md b/README.md
index 5614db31c485058c8277b93c72a82d02c6d04a21..2fbea1b49126914d1e0735096128777787818d57 100644
--- a/README.md
+++ b/README.md
@@ -1,20 +1,51 @@
-## Panduan Pengerjaan
-Berikut adalah hal yang harus diperhatikan untuk pengumpulan tugas ini:
-1. Buatlah grup pada Gitlab dengan format "IF3110-2023-01-XX", dengan XX adalah nomor kelompok (untuk K1 dan K2) atau kode kelompok (untuk K3).
-2. Tambahkan anggota tim pada grup anda.
-3. **Fork** pada repository ini dengan organisasi yang telah dibuat.
-4. Ubah hak akses repository hasil Fork anda menjadi **private**.
-5. Hal-hal yang harus diperhatikan.
- * Silakan commit pada repository anda (hasil fork)
- * Lakukan beberapa commit dengan pesan yang bermakna, contoh: “add register formâ€, “fix logout bugâ€, jangan seperti “finalâ€, “benerin dikitâ€, “fix bugâ€.
- * Disarankan untuk tidak melakukan commit dengan perubahan yang besar karena akan mempengaruhi penilaian (contoh: hanya melakukan satu commit kemudian dikumpulkan).
- * Commit dari setiap anggota tim akan mempengaruhi penilaian.
- * Jadi, setiap anggota tim harus melakukan commit yang berpengaruh terhadap proses pembuatan aplikasi.
- * Sebagai panduan bisa mengikuti [semantic commit](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716).
-6. Buatlah file README yang berisi:
- * Deskripsi aplikasi web
- * Daftar requirement
- * Cara instalasi
- * Cara menjalankan server
- * Screenshot tampilan aplikasi (tidak perlu semua kasus, minimal 1 per halaman), dan
- * Penjelasan mengenai pembagian tugas masing-masing anggota (lihat formatnya pada bagian pembagian tugas).
+# TUGAS BESAR IF3110 PENGEMBANGAN APLIKASI BERBASIS WEB
+
+Untuk Tugas Besar 1 IF3110 Pengembangan Aplikasi Berbasis Web, kami dari Kelompok I mengembangkan *website* Saranghaengbok. Saranghaengbok ditujukan sebagai media jasa titip *merchandise* K-Pop.
+
+## Requirement
+* Docker Desktop
+
+## Instalasi
+
+1. Clone repositori dengan *command* berikut
+```
+git clone https://gitlab.informatika.org/if3110-2023-01-i/tugas-besar-1.git
+```
+## Menjalankan Server
+
+1. Pindah ke direktori repositori
+```sh
+cd tugas-besar-1
+```
+2. Masukkan *command* berikut ke terminal
+```sh
+docker compose up --build
+```
+3. *Copy* dan *paste* tautan di bawah di *browser*
+```sh
+localhost:8008/client/pages/login-page.php
+```
+4. Tekan "Enter"
+
+
+## Tampilan Aplikasi
+
+<br/>
+<br/> <img src="public/signup.png" alt="sign up page" width="1280">
+<br/>
+<br/> <img src="public/signin.png" alt="sign in page" width="1280">
+<br>
+<br/> <img src="public/home.png" alt="catalog page" width="1280">
+<br>
+
+## Pembagian Tugas
+
+### Server-side
+Login : 13521009, 13521012
+Register : 13521009, 13521012
+
+
+### Client-side
+Login : 13521009, 13521012
+Register : 13521009, 13521012
+Sidebar : 13521009, 13521012, 13521020
\ No newline at end of file
diff --git a/client/css/user-manage.css b/client/css/user-manage.css
new file mode 100644
index 0000000000000000000000000000000000000000..70f06e707d49630fec14fa44051ff660db0504c4
--- /dev/null
+++ b/client/css/user-manage.css
@@ -0,0 +1,92 @@
+@import url('https://fonts.googleapis.com/css?family=Inter');
+
+*{
+ margin: 0;
+ padding: 0;
+ font-family: Inter;
+ box-sizing: border-box;
+ transition: 0.5;
+}
+
+.container{
+ max-width: 100%;
+ height: 100vh;
+ mix-blend-mode: multiply;
+ background-position: center;
+ background-size: cover;
+ display: flex;
+ flex-direction: column;
+}
+h1{
+ text-align: center;
+ padding: 10px;
+}
+
+.tablebox{
+ width: 100%;
+ position: relative;
+ overflow: scroll;
+ border :outset #5e5e5e thick;
+ height: 100vh;
+ padding: 10px;
+}
+
+#table-container{
+ width: 100%;
+ height: auto;
+ position: relative;
+
+}
+
+table, th, td {
+ border: 1px solid #ddd;
+ border-collapse: collapse;
+}
+
+.fa-caret-down{
+ float: right;
+}
+
+table{
+ font-family: arial, sans-serif;
+ border-collapse: collapse;
+ width: 100%;
+ height: auto;
+}
+
+.contenttable{
+ cursor: pointer;
+}
+
+th {
+ padding: 20px;
+ text-align: left;
+ background-color: #5c12b1;
+ color: white;
+}
+
+
+td{
+ text-align: left;
+ padding: 10px;
+}
+
+
+tr:nth-child(even){
+ background-color: #f2f2f2;
+ text-align: left;
+ padding: 10px;
+}
+
+tr:nth-child(odd){
+ text-align: left;
+ padding: 10px;
+}
+
+tr:hover {
+ background-color: #ddd;
+}
+
+tr:active{
+ background: #8d8d8d;
+}
\ No newline at end of file
diff --git a/client/js/sidebar.js b/client/js/sidebar.js
index ae2c52dcd746e5f00535b91c2e106c2357d492eb..f04990ee4d4a850f48c9694df843bae4b219eb9b 100644
--- a/client/js/sidebar.js
+++ b/client/js/sidebar.js
@@ -27,9 +27,9 @@ addsidebar = () => {
<i class="fa-solid fa-user-plus"></i>
Add User
</a></li>
- <li><a href='../pages/make-sale.php' id="additem">
+ <li><a href='../pages/make-sale.php' id="makesale">
<i class="fa-solid fa-cart-plus"></i>
- Add Item
+ Make Sale
</a></li>
<li><a href='../../server/controllers/signout.php' id="logout">
<i class="fa-solid fa-right-from-bracket"></i>
diff --git a/client/js/user-manage.js b/client/js/user-manage.js
new file mode 100644
index 0000000000000000000000000000000000000000..00d535cd63d8f45a2d9ea7dcd4e9ae24576353c0
--- /dev/null
+++ b/client/js/user-manage.js
@@ -0,0 +1,47 @@
+
+function sendItem(username){
+ localStorage.setItem("username", username);
+ location.href = "#";
+}
+
+function usertable(){
+ var tablecontainer = document.getElementById("table-container");
+ const formdata = new FormData();
+ formdata.append("signal", "sending");
+
+ const xhr = new XMLHttpRequest();
+ xhr.open('GET', '../../server/controllers/user-manage.php', true);
+ //sending
+ xhr.send(formdata);
+ //get response from server
+ xhr.onreadystatechange = function(){
+ if (xhr.readyState === 4 && xhr.status === 200){
+ try{
+ var responseData = JSON.parse(xhr.responseText);
+ if (responseData.success){
+ var itemList = "";
+ itemList = responseData.data;
+ tablecontainer.innerHTML = `
+ <tr class="table-header">
+ <th class="colUser"><i class="fa-solid fa-user"></i> Username <i class="fa-solid fa-caret-down"></i></th>
+ <th class="colEmail"><i class="fa-solid fa-envelope"></i> Email <i class="fa-solid fa-caret-down"></i></th>
+ <th class="colPass"><i class="fa-solid fa-lock"></i> Password <i class="fa-solid fa-caret-down"></i></th>
+ </tr>`;
+ for (var i = 0; i < itemList.length; i++){
+ tablecontainer.innerHTML += `
+ <tr class="contenttable" href="#" onclick="sendItem('${itemList[i][1]}')">
+ <td>${itemList[i][1]}</td>
+ <td>${itemList[i][0]}</td>
+ <td>${itemList[i][2]}</td>
+ </tr>`;
+ }
+ } else {
+ alert("error: " + responseData.message);
+ }
+ } catch (err){}
+ } else if (xhr.status === 404){
+ var response = JSON.parse(xhr.responseText);
+ console.log(response.message);
+ }
+ }
+}
\ No newline at end of file
diff --git a/client/pages/user-manage.php b/client/pages/user-manage.php
new file mode 100644
index 0000000000000000000000000000000000000000..4ad4c09ac265f33747b4fdc849e0e99f5e21242f
--- /dev/null
+++ b/client/pages/user-manage.php
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta name="viewport" content="width=device-width, initial scale=1.0">
+ <title>Catalog</title>
+ <link rel="stylesheet" href="../css/user-manage.css">
+ <link rel="stylesheet" href="../css/navbar.css">
+ <link rel="stylesheet" href="../css/sidebar.css">
+ <script src="../js/navbar.js"></script>
+ <script src="../js/sidebar.js"></script>
+ <script src="../js/user-manage.js"></script>
+ <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
+</head>
+<body>
+ <div class="container">
+ <div class="tabgroup" id="tabgroup">
+ <script>
+ addnavbar();
+ </script>
+ </div>
+ <h1><i class="fa-solid fa-people-roof"></i> Manage User</h1>
+ <div class="tablebox">
+ <table id="table-container">
+ <script>
+ usertable();
+ </script>
+ </table>
+ </div>
+ <div class="sidebar" id="sidebar">
+ <script>
+ addsidebar();
+ </script>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/home.png b/public/home.png
new file mode 100644
index 0000000000000000000000000000000000000000..b243e578ce6432faaba670c22c090b0b5939db8a
Binary files /dev/null and b/public/home.png differ
diff --git a/public/signin.png b/public/signin.png
new file mode 100644
index 0000000000000000000000000000000000000000..b82159195127f4531ba22b091b0d8c09b36eaca8
Binary files /dev/null and b/public/signin.png differ
diff --git a/public/signup.png b/public/signup.png
new file mode 100644
index 0000000000000000000000000000000000000000..3c0112fc61098a6455aa3a34bafda6b40b8d3c99
Binary files /dev/null and b/public/signup.png differ
diff --git a/server/controllers/user-manage.php b/server/controllers/user-manage.php
new file mode 100644
index 0000000000000000000000000000000000000000..cd0b34882ab202c0217916c756415228b705c7c7
--- /dev/null
+++ b/server/controllers/user-manage.php
@@ -0,0 +1,28 @@
+<?php
+ require_once "connect_database.php";
+
+ if ($_SERVER["REQUEST_METHOD"] == "GET"){
+ $conn = connect_database();
+
+ $query = "SELECT * FROM user LIMIT 0, 200";
+ $stmt = $conn->prepare($query);
+
+ if (!$stmt){
+ die("Error in query preparation: ". $conn->error);
+ }
+ $result = $stmt->execute();
+
+ if (!$result){
+ die("Error in query execution: " . $stmt->error);
+ }
+
+ $resultSet = $stmt->get_result();
+ $rows = $resultSet->fetch_all();
+ if (!empty($rows)){
+ $response = array("success" => true, "message" => "data sent", "data" => $rows);
+ } else {
+ $response = array("success" => false, "message" => "Error: not found");
+ }
+ echo json_encode($response);
+ mysqli_close($conn);
+ }
\ No newline at end of file