PetrusAriaa · PetrusAriaa · Nov 15, 2023 · Nov 15, 2023 · Nov 15, 2023 · Nov 15, 2023
diff --git a/docs/about.html b/docs/about.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+<body class="p-20">
+    <header>
+        <h3 class="text-sm font-semibold text-amber-500">About</h3>
+    </header>
+    <h1 class="text-4xl font-bold text-slate-800 py-4">Sekilas tentang Berkati.id</h1>
+    <p>Aplikasi untuk memfasilitasi keinginan pengguna yang ingin bersedekah makanan layak untuk orang yang kekurangan</p>
+    <h1 class="text-4xl font-bold text-slate-800 py-4">Teknologi yang digunakan</h1>
+    <div class="my-2">
+        <h2 class="text-xl font-semibold text-slate-800 py-1">Frontend</h2>
+        <ul class="list-disc list-inside">
+            <li><b>Windows Presentation Foundation</b>: Framework GUI untuk pengembangan frontend</li>
+            <li><b>Material Design (UI Library)</b>: Library untuk mempermudah pengembangan frontend</li>
+            <li><b>Figma</b>: Digunakan untuk membuat rancangan awal tampilan aplikasi</li>
+        </ul>
+    </div>
+    <div class="my-2">
+        <h2 class="text-xl font-semibold text-slate-800 py-1">Backend</h2>
+        <ul class="list-disc list-inside">
+            <li><b>ASP .NET Core Web API</b>: Framework pengembangan Web yang digunakan untuk mengembangkan REST API server</li>
+            <li><b>JWT Authentication</b></li>
+            <li><b>Bcrypt</b>: Digunakan untuk enkripsi password</li>
+        </ul>
+    </div>
+    <div class="my-2">
+        <h2 class="text-xl font-semibold text-slate-800 py-1">Database</h2>
+        <ul class="list-disc list-inside">
+            <li><b>PostgreSQL</b>: RDBMS untuk manajemen data persistent</li>
+            <li><b>NeonDB</b>: PaaS untuk hosting PostgreSQL Server secara gratis</li>
+        </ul>
+    </div>
+    <div class="my-2">
+        <h2 class="text-xl font-semibold text-slate-800 py-1">Production</h2>
+        <ul class="list-disc list-inside">
+            <li><b>Docker</b>: Kontainer untuk deploy server backend ke cloud</li>
+            <li><b>Amazon VPC</b></li>
+            <li><b>Amazon EC2</b>: IaaS untuk deploy server backend</li>
+            <li><b>NGINX</b>: Reverse proxy untuk redirect port pada server backend ke default TCP port 80 dan menerapkan request rate limit</li>
+        </ul>
+    </div>
+    <div class="my-2">
+        <h2 class="text-xl font-semibold text-slate-800 py-1">Development</h2>
+        <ul class="list-disc list-inside">
+            <li><b>Git</b>: Version control</li>
+            <li><b>GitHub</b>: Collaboration tool</li>
+            <li><b>Docker Hub</b>: Cloud Docker Image manager</li>
+        </ul>
+    </div>
+    <h1 id="about" class="text-4xl font-bold text-slate-800 py-4">Skema</h1>
+    <div class="flex flex-col items-center py-10">
+        <div class="relative w-[50rem]">
+            <img src="assets/schema-aplikasi.png" class="object-cover" alt="schema-aplikasi.png">
+        </div>
+        <label class="italic text-slate-400">Gambar: Skema aplikasi Berkati.id</label>
+    </div>
+</body>
+
+</html>
diff --git a/docs/assets/add-request-icon.png b/docs/assets/add-request-icon.png
diff --git a/docs/assets/add-request.png b/docs/assets/add-request.png
diff --git a/docs/assets/edit-request-1.png b/docs/assets/edit-request-1.png
diff --git a/docs/assets/edit-request-2.png b/docs/assets/edit-request-2.png
diff --git a/docs/assets/install-01.png b/docs/assets/install-01.png
diff --git a/docs/assets/install-02.png b/docs/assets/install-02.png
diff --git a/docs/assets/install-03.png b/docs/assets/install-03.png
diff --git a/docs/assets/install-04.png b/docs/assets/install-04.png
diff --git a/docs/assets/install-05.png b/docs/assets/install-05.png
diff --git a/docs/assets/install-06.png b/docs/assets/install-06.png
diff --git a/docs/assets/list-request-page-2.png b/docs/assets/list-request-page-2.png
diff --git a/docs/assets/list-request-page.png b/docs/assets/list-request-page.png
diff --git a/docs/assets/login-01.png b/docs/assets/login-01.png
diff --git a/docs/assets/logout-button.png b/docs/assets/logout-button.png
diff --git a/docs/assets/main-icon.png b/docs/assets/main-icon.png
diff --git a/docs/assets/request-delete-01.png b/docs/assets/request-delete-01.png
diff --git a/docs/assets/request-delete-02.png b/docs/assets/request-delete-02.png
diff --git a/docs/assets/request-done-01.png b/docs/assets/request-done-01.png
diff --git a/docs/assets/request-done-02.png b/docs/assets/request-done-02.png
diff --git a/docs/assets/schema-aplikasi.png b/docs/assets/schema-aplikasi.png
diff --git a/docs/home.html b/docs/home.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+<body class="p-20">
+    <header>
+        <h3 class="text-sm font-semibold text-amber-500">Home</h3>
+    </header>
+    <h1 class="text-4xl font-bold text-slate-800 py-4">Berkati.id</h1>
+    <h2 class="text-xl font-semibold text-slate-800">Kelompok 7 – Software Architect</h2>
+    <ul class="list-disc list-inside">
+        <li>Fio Mel Nathany (21/473580/TK/52199) - Backend Developer</li>
+        <li>Khairun Nisa Zuqri (21/473354/TK/52162) - Frontend Developer</li>
+        <li>Petrus Aria Chevalier Rambing (21/480757/TK/53050) - Software Architect</li>
+    </ul>
+    <div class="border-b-2 h-4"></div>
+    <div class="mt-4">
+        <div class="py-4">
+            <h1 class="text-2xl font-bold text-slate-800">Project Junior Project TI</h1>
+            <h1 class="text-2xl font-bold text-slate-800">Departemen Teknik Elektro dan Teknologi Informasi, Fakultas Teknik, Universitas Gadjah Mada</h1>
+        </div>
+        <h2 class="text-xl font-semibold text-slate-800 py-2">Jawaban Modul 1</h2>
+        <ol>
+            <li class="font-semibold py-1">1. Nama Produk: Berkati</li>
+            <li class="font-semibold py-1">2. Jenis Produk: WPF</li>
+            <li class="py-1">
+                <h1 class="font-semibold">3. Permasalahan yang dipecahkan</h1>
+                <p>Sebuah tradisi di Indonesia untuk memberikan makanan ketika ada acara yang mengundang banyak orang. Akan tetapi
+                    penyelenggara acara bisa jadi memesan makanan yang berlebih dan berakhir membuang makanan tersebut. Di sisi lain,
+                    terdapat orang-orang yang sulit untuk mendapatkan makanan yang layak.</p>
+            </li>
+            <li class="py-1">
+                <h1 class="font-semibold">4. Solusi yang diusulkan</h1>
+                <p>Kami menawarkan sebuah platform yang memfasilitasi keinginan penyelenggara acara untuk memaksimalkan penyaluran makanan
+                    yang layak kepada orang-orang yang membutuhkan.</p>
+                    <p>Fitur</p>
+                    <ul class="list-inside list-disc">
+                        <li>menyimpan kontak dan lokasi penyelenggara acara</li>
+                    <li>menyimpan jenis dan estimasi jumlah makanan</li>
+                </ul>
+            </li>
+            <li class="py-1">
+                <h1 class="font-semibold">5. Aplikasi sejenis</h1>
+                <p>Kitabisa, IWarga</p>
+            </li>
+        </ol>
+    </div>
+</body>
+</html>
diff --git a/docs/index.html b/docs/index.html
@@ -1,9 +1,38 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>Berkati.id | Documentation</title>
-  </head>
-  <body>
-    <h1>halo</h1>
-  </body>
-</html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Dynamic Sidebar</title>
+    <script src="script.js"></script>
+</head>
+
+<body class="flex flex-row h-full w-full">
+    <div id="sidebar" class="bg-slate-50 flex flex-col w-1/5 h-full fixed text-lg px-8 py-12">
+        <a href="/docs" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Home</a>
+        <a href="#about" onclick="showPage('about.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">About</a>
+        <a href="#instalasi" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Installation</a>
+        <p class="px-3 py-1 font-semibold text-xl mt-4">Usage</p>
+        <a href="#api-demo" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">API Demo</a>
+        <a href="#login" onclick="showPage('login.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Login</a>
+        <a href="#access-request" onclick="showPage('request/access.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Access requests</a>
+        <a href="#add-request" onclick="showPage('request/add.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Add new request</a>
+        <a href="#edit-request" onclick="showPage('request/edit.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Edit active requests</a>
+        <a href="#delete-request" onclick="showPage('request/delete.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Delete requests</a>
+        <a href="#finish-request" onclick="showPage('request/done.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Mark request as done</a>
+        <a href="#add-admin" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Add new admin</a>
+        <a href="#delete-admin" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Delete admin</a>
+        <a href="#add-partner" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Add new partner</a>
+        <a href="#edit-partner" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Edit partner information</a>
+        <a href="#delete-partner" onclick="showPage('installation.html')" class="px-3 py-1 border-l-2 hover:border-amber-500 hover:text-amber-500 transition-color duration-200">Delete partner</a>
+    </div>
+
+    <div id="content" class="grow flex justify-end">
+        <iframe id="content-iframe" src="home.html" class="w-4/5 min-h-screen"/>
+    </div>
+
+</body>
+
+</html>
diff --git a/docs/installation.html b/docs/installation.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+
+<body class="p-20">
+    <header>
+        <h3 class="text-sm font-semibold text-amber-500">Installation</h3>
+    </header>
+    <h1 class="text-4xl font-bold text-slate-800 py-4">Download</h1>
+    <p>Download installer melalui tautan berikut</p>
+    <div class="flex gap-8">
+        <label class="font-bold">Berkati for Windows (x86):</label>
+        <a href="https://drive.google.com/uc?id=1Zt_GLdAjhBcmapIYyvwzM5wuxy1hlIJU&export=download" class="text-blue-700 focus:text-purple-600 focus:underline hover:underline" target="_blank">BerkatiSetup.msi (13MB)</a>
+    </div>
+    <h1 class="text-4xl font-bold text-slate-800 py-4">Prosedur Instalasi (Windows)</h1>
+    <div class="my-2">
+        <p>Jalankan <b>BerkatiSetup.msi</b> yang sudah didownload.</p>
+    </div>
+    <div class="my-2">
+        <p>Mungkin akan muncul notifikasi peringatan dari Windows untuk instalasi perangkat lunak dengan sumber '<i>Unknown</i>'
+            tergantung konfigurasi keamanan komputer anda.</p>
+            <div class="flex flex-col items-center py-10">
+                <div class="relative w-96">
+                <img src="assets/install-01.png" class="object-cover" alt="Security Warning.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Notifikasi peringatan keamanan dari Windows</label>
+        </div>
+    </div>
+    <div class="my-2">
+        <p>Jika notifikasi tersebut muncul, pilih <b>More Info</b> lalu tekan tombol <b>Run anyway</b> untuk melanjutkan proses instalasi.</p>
+        <div class="flex flex-col items-center py-10">
+            <div class="flex items-center gap-8">
+                <div class="relative w-96">
+                    <img src="assets/install-02.png" class="object-cover" alt="Security Warning.png">
+                </div>
+                <div class="relative w-96">
+                    <img src="assets/install-03.png" class="object-cover" alt="Security Warning.png">
+                </div>
+            </div>
+            <label class="italic text-slate-400">Gambar: Langkah melanjutkan instalasi</label>
+        </div>
+    </div>
+    <div class="my-2">
+        <p>Tampilan awal installer tampak seperti gambar berikut. Anda hanya perlu melanjutkan proses instalasi dengan menekan
+        tombol <b>Next ></b> dan membiarkan semua pengaturan default.</p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-96">
+                <img src="assets/install-04.png" class="object-cover" alt="Berkati Setup Wizard.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Berkati Setup Wizard</label>
+        </div>
+    </div>
+    <div class="my-2">
+        <p>Jika instalasi berhasil, akan muncul tampilan berikut. Anda bisa menekan tombol <b>Close</b> untuk keluar dari installer.</p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-96">
+                <img src="assets/install-06.png" class="object-cover" alt="Berkati Setup Wizard.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Installation Complete</label>
+        </div>
+    </div>
+    <h2 class="text-xl font-semibold text-slate-800 py-1">Perhatian</h2>
+    <div class="my-2">
+        <p>Jika perangkat anda belum terinstall .NET Desktop Runtime, notifikasi berikut akan muncul. Anda bisa menekan tombol <b>Yes</b>
+        untuk memulai instalasi .NET Desktop Runtime. Ikuti semua tahapan instalasi .NET Desktop Runtime. Jika sudah, anda dapat
+        kembali melanjutkan instalasi aplikasi Berkati.</p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-72">
+                <img src="assets/install-05.png" class="object-cover" alt="Berkati Setup Wizard.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Error ketika .NET Desktop Runtime tidak ditemukan</label>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/docs/login.html b/docs/login.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+
+<body class="p-20">
+    <header>
+        <h3 class="text-sm font-semibold text-amber-500">Usage</h3>
+    </header>
+    <h1 class="text-4xl font-bold text-slate-800 py-4">Login</h1>
+    <p>Login dapat dilakukan dengan username dan password admin yang sudah terdaftar. Untuk masuk sebagai SuperUser, anda dapat
+    melakukan login dengan</p>
+    <p><b>Username: </b>Admin</p>
+    <p><b>Password: </b>admin</p>
+    <div class="my-2">
+        <p>Tekan tombol <b>Login</b> dan tunggu hingga proses authentication selesai.</p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="assets/login-01.png" class="object-cover" alt="Login.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Login Window</label>
+        </div>
+    </div>
+    <div class="my-2">
+        <p>Setelah selesai menggunakan aplikasi, pada side navigation bar tekan tombol (<span><img src="assets/logout-button.png" class="w-6 inline"/></span>) untuk logout.</p>
+    </div>
+</body>
+
+</html>
diff --git a/docs/request/access.html b/docs/request/access.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+
+<body class="p-20">
+    <header>
+        <h3 class="text-sm font-semibold text-amber-500">Request</h3>
+    </header>
+    <h1 class="text-4xl font-bold text-slate-800 py-4">Menampilkan daftar permintaan layanan</h1>
+    <div class="my-2">
+        <p>Sesaat setelah login, anda akan berada pada halaman pertama, yaitu List Request. 
+            Anda juga dapat memilih icon (
+                <span>
+                    <img src="../assets/main-icon.png" class="inline w-8" alt="main-icon.png" />
+                </span>) 
+            untuk
+            mengarahkan ke halaman List Request. Halaman ini berisi card yang merupakan data permintaan layanan
+        yang telah diajukan.</p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="../assets/list-request-page.png" class="object-cover" alt="list-request-page.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Halaman List Request</label>
+        </div>
+    </div>
+    <div class="my-2">
+        <p>Anda dapat menekan tombol <b>Refresh</b> untuk memperbarui data setelah beberapa waktu.</p>
+    </div>
+</body>
+
+</html>
diff --git a/docs/request/add.html b/docs/request/add.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+
+<body class="p-20">
+    <header>
+        <h3 class="text-sm font-semibold text-amber-500">Request</h3>
+    </header>
+    <h1 class="text-4xl font-bold text-slate-800 py-4">Menambahkan permintaan layanan baru</h1>
+    <div class="my-2">
+        <p>Pada halaman utama terdapat side navigation bar berisikan beberapa icon. Pilih icon (<span><img src="../assets/add-request-icon.png" class="inline w-5" alt="add-request-icon.png"/></span>) untuk mengarahkan ke halaman Add Request.</p>
+        <div class="flex flex-col items-center py-10">
+            <div class="relative w-[35rem]">
+                <img src="../assets/add-request.png" class="object-cover" alt="add-request-page.png">
+            </div>
+            <label class="italic text-slate-400 max-w-sm text-center">Gambar: Halaman Add Request</label>
+        </div>
+    </div>
+    <div class="my-2">
+        <p>Isikan data yang diperlukan sesuai format yang ada. Kemudian tekan tombol <b>Add</b> untuk mengkonfirmasi penambahan permintaan
+        layanan baru. Tunggu hingga proses selesai.</p>
+    </div>
+</body>
+
+</html>