diff --git a/README.md b/README.md
index 3b168bfd22acb42acbe011e282ccf0cb19a797d4..707a9900f160d90a0ccb55809d980042a6f2fce8 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,30 @@ Aplikasi web ini merupakan platform sharing music.
2. Jalankan command berikut: chmod +x ./scripts/build-image.sh && ./scripts/build-image.sh
# Screenshot
+### Login
+
+### Register
+
+### Home
+
+### Daftar Album
+
+### Search, sort, filter
+
+### Edit lagu
+
+### Detail Lagu
+
+### Edit album
+
+### Detail album
+
+### Tambah lagu
+
+### Tambah album
+
+### Daftar user
+
# Pembagian tugas
_Server-side_
@@ -50,7 +74,7 @@ Edit album: 13521136
Detail album: 13521136
Tambah lagu: 13521163
Tambah album: 13521163
-Daftar user: 13521128
+Daftar user: 13521128
Object storage add: 13521163
Object storage delete: 13521163
Object storage edit: 13521136
diff --git a/images/daftar_album.png b/images/daftar_album.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0430ed629ed7875bf81433dac3dfe21c402347b
Binary files /dev/null and b/images/daftar_album.png differ
diff --git a/images/daftar_user.png b/images/daftar_user.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc3147543a7c741af0fd2d0768e74df409ede45d
Binary files /dev/null and b/images/daftar_user.png differ
diff --git a/images/detail_album.png b/images/detail_album.png
new file mode 100644
index 0000000000000000000000000000000000000000..73c40e52487b2baad46fdd809ec43671aa5db249
Binary files /dev/null and b/images/detail_album.png differ
diff --git a/images/detail_lagu.png b/images/detail_lagu.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2cdaf88b644899a0ef517232df9a177314b8c01
Binary files /dev/null and b/images/detail_lagu.png differ
diff --git a/images/edit_album.png b/images/edit_album.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb9f42db4740b9cd08f710c14f43e8968c0e1608
Binary files /dev/null and b/images/edit_album.png differ
diff --git a/images/edit_lagu.png b/images/edit_lagu.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e8f3334dcbdf928ecd799494b03bf23b491f8a3
Binary files /dev/null and b/images/edit_lagu.png differ
diff --git a/images/home.png b/images/home.png
new file mode 100644
index 0000000000000000000000000000000000000000..b4f00aceb44826d300f8996c676cd80a59b87098
Binary files /dev/null and b/images/home.png differ
diff --git a/images/login.png b/images/login.png
new file mode 100644
index 0000000000000000000000000000000000000000..afcb8f27edd6034dda334f44956104a0745c6a0a
Binary files /dev/null and b/images/login.png differ
diff --git a/images/register.png b/images/register.png
new file mode 100644
index 0000000000000000000000000000000000000000..62d3bc165bd1bf4fdcad921d8ce5c9963e4bb338
Binary files /dev/null and b/images/register.png differ
diff --git a/images/tambah_album.png b/images/tambah_album.png
new file mode 100644
index 0000000000000000000000000000000000000000..352c2d3a97fdb12fd1e36bff2eb6b03f559e1278
Binary files /dev/null and b/images/tambah_album.png differ
diff --git a/images/tambah_lagu.png b/images/tambah_lagu.png
new file mode 100644
index 0000000000000000000000000000000000000000..3178e875624812ee282015ffe8658fc1fafebd62
Binary files /dev/null and b/images/tambah_lagu.png differ
diff --git a/src/web/presentation/music/edit/editMusic.view.php b/src/web/presentation/music/edit/editMusic.view.php
index db72787c5c8780f49474661131b4973d24eaa445..829fcd6557e6e2fa4309c3d7d4f0de6766507b8d 100644
--- a/src/web/presentation/music/edit/editMusic.view.php
+++ b/src/web/presentation/music/edit/editMusic.view.php
@@ -58,7 +58,7 @@ if (is_numeric($id)) {
<?php require 'presentation/template/navbar.php' ?>
<p id="title">Edit Music</p>
<div class="img-container">
- <img src="<?php if ($exists) echo getAlbumImage(); else echo '/presentation/music/edit/img/defalbum.jpg' ?>" alt="Album">
+ <img src="<?php if ($exists) echo getAlbumImageFromMusic(); else echo '/presentation/music/edit/img/defalbum.jpg' ?>" alt="Album">
</div>
<div class="fields" id="form-d">
<form method="post" id="form">
diff --git a/src/web/presentation/music/info/albumInfo.php b/src/web/presentation/music/info/albumInfo.php
index d1078fb4c1a980ae05b9d1edade08dfd35ff253b..4781662b50e4519b42b6c71272da5464aff1e1a4 100644
--- a/src/web/presentation/music/info/albumInfo.php
+++ b/src/web/presentation/music/info/albumInfo.php
@@ -1,5 +1,9 @@
<?php
+require_once 'auth/authorizer.php';
+
+$is_admin = authorizeAdmin($_COOKIE['token']) != null;
+
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
require 'albumInfo.view.php';
} else if ($_SERVER['REQUEST_METHOD'] == 'POST') {
@@ -38,13 +42,23 @@ function secondsToMinutes($duration): string {
}
function createListItem($class, $id, $title, $duration): void {
- echo '<li class="'.$class.'">';
+ global $is_admin;
+
+ if ($is_admin) {
+ echo '<div class="hidden">';
+ }
+
+ echo '<li class="'.$class.'" id="'.$id.'">';
echo ' <p class="music-title" id="music-title">'.$title.'</p>';
echo ' <div class="music-sub-item">';
- echo ' <p style="display: none" id="music-id">'.$id.'</p>';
echo ' <p class="music-duration">'.secondsToMinutes($duration).'</p>';
echo ' </div>';
echo '</li>';
+
+ if ($is_admin) {
+ echo ' <button class="edit-music" id="'.$id.'-b">Edit</button>';
+ echo '</div>';
+ }
}
function populateList($album_id): void {
diff --git a/src/web/presentation/music/info/albumInfo.view.php b/src/web/presentation/music/info/albumInfo.view.php
index 526929d8f4fffd40eca06e87dde97a04aae29c6c..c8e58b03105513277d5ce64bd0f3b91357fcbce7 100644
--- a/src/web/presentation/music/info/albumInfo.view.php
+++ b/src/web/presentation/music/info/albumInfo.view.php
@@ -1,5 +1,6 @@
<?php
+global $is_admin;
require_once 'util/album-finder.php';
require_once 'util/account-finder.php';
@@ -49,7 +50,7 @@ if (is_numeric($id)) {
<div class="img-container">
<img src="<?php echo getAlbumImage() ?>" alt="Album">
</div>
- <?php if (authorizeAdmin($_COOKIE['token']) != null) {?>
+ <?php if ($is_admin) {?>
<div id="edit-b">
<button id="edit-button">Edit</button>
</div>
diff --git a/src/web/presentation/music/info/css/albumInfo.css b/src/web/presentation/music/info/css/albumInfo.css
index c6e24ac75ff37a2f9f3c7123d528f58e33bc4c2f..9285fd4b6bfaea471838d346db19ab6ebb8a89ae 100644
--- a/src/web/presentation/music/info/css/albumInfo.css
+++ b/src/web/presentation/music/info/css/albumInfo.css
@@ -107,6 +107,24 @@ body {
margin-right: 8px;
}
+.edit-music {
+ display: flex;
+ justify-content: center;
+ width: 50px;
+ height: 20px;
+ border: none;
+ border-radius: 5px;
+ background-color: #da0f47;
+ color: white;
+ font-size: 12px;
+ font-weight: 500;
+ cursor: pointer;
+}
+
+#hidden {
+ overflow: hidden;
+}
+
#audio-d {
position: fixed;
bottom: 0;
diff --git a/src/web/presentation/music/info/js/albumInfo.js b/src/web/presentation/music/info/js/albumInfo.js
index 9e603a24c3c837c0f28a3c9646b541276462b267..af92874d26992bc465d32c096584f9b7d1726b60 100644
--- a/src/web/presentation/music/info/js/albumInfo.js
+++ b/src/web/presentation/music/info/js/albumInfo.js
@@ -1,12 +1,12 @@
-const list = document.querySelector('#music-list').getElementsByTagName('li');
-// const audioPlayer = document.createElement('audio');
+const listItems = document.querySelector('#music-list').getElementsByTagName('li');
+const editButtons = document.querySelector('#music-list').getElementsByClassName('edit-music');
const audioPlayer = document.querySelector('#audio');
-for (let item of list) {
+for (let item of listItems) {
item.addEventListener('click', (e) => {
e.preventDefault();
- let id = item.querySelector('#music-id').innerHTML;
+ let id = item.id;
let url = '/album';
let xhr = new XMLHttpRequest();
@@ -28,4 +28,16 @@ for (let item of list) {
xhr.send(JSON.stringify(data));
});
+}
+
+if (editButtons && editButtons.length > 0) {
+ for (let item of editButtons) {
+ item.addEventListener('click', (e) => {
+ e.preventDefault();
+
+ let id = item.id.substring(0, item.id.length - 2);
+
+ window.location.href = '/music/edit?id=' + id;
+ });
+ }
}
\ No newline at end of file
diff --git a/src/web/presentation/music/info/musicInfo.view.php b/src/web/presentation/music/info/musicInfo.view.php
index 917c20b419ef2be9199d25c3ef4658d2c268d6b9..dc1dd0a8109b36ee5d04d5a135d11cff94870fd0 100644
--- a/src/web/presentation/music/info/musicInfo.view.php
+++ b/src/web/presentation/music/info/musicInfo.view.php
@@ -50,7 +50,7 @@ if (is_numeric($id)) {
<div class="main-wrapper">
<?php require 'presentation/template/navbar.php' ?>
<div class="img-container">
- <img src="<?php echo getAlbumImage() ?>" alt="Album">
+ <img src="<?php echo getAlbumImageFromMusic() ?>" alt="Album">
</div>
<div id="music-info">
<p id="artist-title"><?php echo $artist.' - '.$title ?></p>
diff --git a/src/web/util/album-finder.php b/src/web/util/album-finder.php
index 828ec5b3ffb11ec6026e7db5f754e57ba45f7ceb..fac74a11f34c369d0aba8c22f0c6a6cb85b227e7 100644
--- a/src/web/util/album-finder.php
+++ b/src/web/util/album-finder.php
@@ -10,6 +10,47 @@ function getAlbumCreator(mixed $album_id) {
return $result[0]['username'];
}
+function getAlbumImageFromMusic(): string {
+ $image = '/presentation/music/edit/img/defalbum.jpg';
+
+ if (!isset($_GET['id'])) {
+ return $image;
+ }
+
+ // get album id from db
+ $album_id = execSelect("SELECT album_id FROM music WHERE music_id = :id", ['id' => $_GET['id']])[0]['album_id'];
+
+ // get album cover filename from db
+ $q_result = execSelect("SELECT owner_account_id, album_cover_filename FROM album WHERE album_id = :id", ['id' => $album_id]);
+ $accountId = $q_result[0]['owner_account_id'];
+
+ if (count($q_result) != 0) {
+ $filename = $q_result[0]['album_cover_filename'];
+
+ // prepare curl request
+ $url = 'object-storage:80/object';
+
+ $data = http_build_query(array(
+ 'owner' => $accountId, // account id,
+ 'fileType' => 'album-cover',
+ 'fileName' => $filename
+ ));
+ $getUrl = $url.'?'.$data;
+
+ $curl = curl_init($getUrl);
+ curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
+ $result = curl_exec($curl);
+
+ if (!curl_errno($curl) && curl_getinfo($curl, CURLINFO_HTTP_CODE) == 200) {
+ $contentType = curl_getinfo($curl, CURLINFO_CONTENT_TYPE);
+ $image = 'data:'.$contentType.';base64,'.base64_encode($result);
+ }
+ curl_close($curl);
+ }
+
+ return $image;
+}
+
function getAlbumImage(): string {
$image = '/presentation/music/edit/img/defalbum.jpg';