Merge branch 'main' of https://gitlab.informatika.org/IF3110-2022-K02-01-10/tugas-besar-1-webtune

Controller/AdminController.php

@@ -7,6 +7,7 @@ use Lib\Interfaces\Routing\IRequest;
 use Lib\Interfaces\Routing\IResponse;
 use Lib\Interfaces\Routing\IRoute;
 use Model\Relations\Album;
+use Model\Relations\Song;
 use Model\Relations\User;
 
 const USER_sIZE = 10;
@@ -17,7 +18,6 @@ class AdminController
   {
     $users = new User($req->db);
     $page = $req->getQuery("page") ?? 1;
-    $errors = [];
 
     if (!is_numeric($page)) {
       return $res->redirect("/admin/users");
@@ -93,4 +93,41 @@ class AdminController
       ...$album[0],
     ]);
   }
+
+  static function editAlbumSong(IRequest $req, IResponse $res) {
+    $users = new Song($req->db);
+    $page = $req->getQuery("page") ?? 1;
+    $idAlbum = $req->getParam("/admin/album/edit/:id/lagu", "id");
+
+    if (!is_numeric($page)) {
+      return $res->redirect("/albums");
+    }
+
+    $transaction = $users->transaction();
+
+    $total = $transaction
+        ->select(["COUNT(*) cnt"])
+        ->all()[0]["cnt"];
+    $total_page = ceil($total / USER_sIZE);
+
+    if ($page < 1) {
+      return $res->redirect("/admin/album/edit/$idAlbum/lagu");
+    }
+
+    if ($page > $total_page) {
+      return $res->redirect("/admin/album/edit/$idAlbum/lagu?page=$total_page");
+    }
+
+    $songs = $transaction->select(["*"])->paginate(10, $page-1)->all();
+
+    return $res->view("Pages/AlbumSongEdit", [
+      "page"=>$page,
+      "next_page" => $page < $total_page ? $page + 1 : null,
+      "prev_page" => $page > 1 ? $page - 1 : null,
+      "auth" => $req->auth,
+      "songs" => $songs,
+      "id_album" => $idAlbum,
+    ]);
+
+  }
 }

README.md

-## Panduan Pengerjaan
-
-Berikut adalah hal yang harus diperhatikan untuk pengumpulan tugas ini:
-
-1. Buatlah grup pada Gitlab dengan format "IF3110-2022-KXX-01-YY", dengan XX adalah nomor kelas dan YY adalah nomor kelompok.
-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).
-   - Sebaiknya commit dilakukan setiap ada penambahan fitur.
-   - 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).
-
-# Note
-
-- Sebelum menjalankan aplikasi, pastikan sudah membuat folder `/storage/audio` dan `storage/image` dengan permision 777.
-- Kalau pas ngupload file kena permission denied, ketik `chmod 777 /storage/`
+## Deskripsi Aplikasi Web
+Webtune merupakan suatu aplikasi pemutaran lagu berbasis web yang dibuat menggunakan HTML5, CSS, dan JavaScript untuk client-side, serta PHP buat server-side.
+## Daftar Requirement
+- HTML5
+- PHP
+- CSS
+- Javascript
+- Docker
+## Cara instalasi
+- Lakukan pemasangan docker
+## Cara menjalankan server
+- Lakukan perintah docker compose up untuk menjalankan program
+## Screenshot tampilan aplikasi
+![image-5.png](./image-5.png)
+![image-4.png](./image-4.png)
+![image.png](./image.png)
+![image-1.png](./image-1.png)
+![image-6.png](./image-6.png)
+![image-2.png](./image-2.png)
+![image-3.png](./image-3.png)
+## Penjelasan mengenai pembagian tugas masing-masing anggota 
+Login: 13520128
+Register: 13520128
+Home: 13520128
+Daftar user: 13520128
+Daftar Album: 13520047
+Detail Album: 13520047
+CRUD album: 13520047
+CRUD lagu: 13520086
+search: 13520086
+sort: 13520086
+filter: 13520086
+detail lagu: 13520086

Router/AdminRoutes.php

@@ -26,6 +26,7 @@ class AdminRoutes
     $route->route(HttpMethod::Put, "/admin/lagu/:id/album", [LaguController::class, "changeSongAlbum"]);
     $route->route(HttpMethod::Delete, "/admin/lagu/:id/album", [LaguController::class, "deleteSongAlbum"]);
 
+    $route->route(HttpMethod::Get, "/admin/album/edit/:id/lagu", [AdminController::class, "editAlbumSong"]);
     $route->route(HttpMethod::Get, "/admin/album/edit/:id", [AdminController::class, "editAlbums"]);
     $route->route(HttpMethod::Post, "/admin/album/edit/:id", [AlbumController::class, "editAlbums"]);
     $route->route(HttpMethod::Delete, "/admin/album/delete/:id", [AlbumController::class, "deleteAlbums"]);

View/Pages/AlbumSongEdit.php

+<?php
+  $this->layout("Templates/PageTemplate", [
+    "title" => "Edit daftar lagu | Webtune",
+    "auth" => $auth,
+    "page" => "album",
+    "styles" => ["/static/css/home.css", "/static/css/album-song.css"],
+    "scripts" => [
+      "/static/js/http.js",
+      "/static/js/album-song.js",
+    ],
+  ]);
+?>
+
+<h2>Edit Daftar Lagu</h2>
+
+<?php
+  foreach($songs as $song) {
+    $release_date = $song["release_date"] ?? "";
+    $year = strlen($release_date)>0 ? explode('-',$release_date)[0]: "";
+?>
+<div class="list__item">
+    <div class="list__item__picture">
+    <img src='<?= $song["image_path"] ?>' alt="<?= $song["title"] ?> by <?= $song["singer_name"] ?>  Cover Image" />
+    </div>
+    <div class="list__item__content">
+      <h1 class="list__item__title"><?= $song["title"] ?></h1>
+      <p class="list__item__year"><?= $year ?></p>
+      <p class="list__item__author"><?= $song["singer_name"] ?></p>
+      <p class="list__item__genre" ><?= $song["genre"] ?></p>
+      <div style="margin-top: 20px;">
+      <?php
+        if($song["album_id"] === (int) $id_album) {
+          ?>
+          <button class="destroy" onclick="deleteSong(<?= $song['song_id'] ?>)">Hapus Lagu</button>
+      <?php
+        }else{
+          ?>
+          <button class="primary" onclick="addSong(<?= $song['song_id'] ?>, <?= $id_album ?>)">Tambah Lagu</button>
+      <?php
+        }
+      ?>
+      </div>
+    </div>
+</div>
+<?php
+  }
+?>
+
+<?php
+  $this->component("Component/Pagination", [
+    "page_number" => $page,
+    "next_page" => isset($next_page) && !is_null($next_page) ? "/admin/users/?page=$next_page": null,
+    "prev_page" => isset($prev_page) && !is_null($prev_page) ? "/admin/users/?page=$prev_page": null,
+  ])
+?>
\ No newline at end of file

View/Pages/DetailAlbum.php

 <?php
 $this->layout("Templates/PageTemplate", [
-    "title" => "Daftar Album Page | Webtune",
+    "title" => "Album $title | Webtune",
     "auth" => $auth,
     "page" => "album",
     "styles" => ["/static/css/home.css", "/static/css/detail_album.css", "/static/css/search.css"],
-    "scripts" => [],
+    "scripts" => [
+        "/static/js/http.js",
+    ],
 ]);
 ?>
 
+<script>
+    async function onDelete() {
+        await http.delete(`/admin/album/delete/<?= $album_id ?>`)
+        location.assign("/album")
+    }
+</script>
 <div>
     <div class="detail__album">
         <img src="<?= $image_path ?>" alt="<?= $title ?> Cover Image" />
@@ -18,10 +26,17 @@ $this->layout("Templates/PageTemplate", [
             <p id="singer_name"><?= $singer_name ?></p>
             <p id="total_duration"><?= $total_duration ?></p>
         </div>
+        <?php
+            if(isset($auth) && !is_null($auth) && $auth->is_admin) {
+        ?>
         <div class="edit__delete">
             <a class="edit" href="/admin/album/edit/<?= $album_id ?>">Edit</a>
-            <a class="delete" href="/admin/album/delete/<?= $album_id ?>">Delete</a>
+            <a class="edit" href="/admin/album/edit/<?= $album_id ?>/lagu">Edit Songs</a>
+            <button class="delete" onclick="onDelete()">Delete</button>
         </div>
+        <?php
+            }
+        ?>
     </div>
     <div class="detail__list">
         <h2>Daftar Lagu</h2>

static/css/album-song.css

+.list__item:hover {
+  background-color: transparent;
+}
+
+.list__item {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.list__item__picture {
+  max-width: 150px;
+}
+
+.destroy {
+  background-color: #8b4141;
+}
+
+button {
+  padding: 10px 20px;
+}

static/js/album-song.js

+async function deleteSong(song_id) {
+  await http.delete(`/admin/lagu/${song_id}/album`);
+  location.reload();
+}
+
+async function addSong(song_id, album_id) {
+  await http.put(`/admin/lagu/${song_id}/album`, {
+    album_id,
+  })
+  location.reload();
+}
\ No newline at end of file