airathalca / Tubes-2-IF3110-WBD-Binotify-App

Binotify

Disusun untuk memenuhi Tugas Milestone 1 - Monolithic PHP & Vanilla Web Application IF3110 Pengembangan Aplikasi Berbasis Web

Daftar Isi

• Deskripsi Aplikasi Web
• Struktur Program
• Daftar Requirement
• Cara Instalasi
• Cara Menjalankan Server
• Screenshot Tampilan Aplikasi
• Entity Relationship Diagram
• Pembagian Tugas

Deskripsi Aplikasi Web

BNMO (dibaca: Binomo) dan Doni sedang tergila-gila dengan musik toktok yang berjudul "Tiba-Tiba". Musik tersebut dijalankan oleh BNMO dan Doni melalui aplikasi bernama youcub yang dinyalakan pada ponsel pintar milik Indra. Aplikasi youcub tersebut harus tetap dibuka agar lagu tetap berjalan dan Indra kesal karena ponselnya dipinjam terus menerus oleh BNMO dan Doni. Oleh karena itu, Indra memiliki ide untuk membuatkan Binotify, aplikasi musik berbasis web pada BNMO. Namun, permasalahannya, BNMO adalah mesin yang kuno sehingga hanya kuat untuk menjalankan sebuah DBMS (PostgreSQL/MariaDB/MySQL) dan PHP murni beserta HTML, CSS, dan Javascript vanilla. Karena Indra tidak paham mengenai hal tersebut, Indra meminta tolong mahasiswa Informatika angkatan 2020 untuk membuatkan aplikasi tersebut.

Struktur Program

.
│   .env.example
│   .gitignore
│   docker-compose.yml
│   Dockerfile
│   README.md
│
├───scripts
│       build-image.sh
│
└───src
    ├───app
    │   │   .htaccess
    │   │   init.php
    │   │
    │   ├───components
    │   │   ├───album
    │   │   │       AddAlbumPage.php
    │   │   │       AdminAlbumDetailPage.php
    │   │   │       AlbumListView.php
    │   │   │       UserAlbumDetailPage.php
    │   │   │
    │   │   ├───home
    │   │   │       HomePage.php
    │   │   │
    │   │   ├───not-found
    │   │   │       NotFoundPage.php
    │   │   │
    │   │   ├───song
    │   │   │       AddSongPage.php
    │   │   │       AdminSongDetailPage.php
    │   │   │       SearchPage.php
    │   │   │       UserSongDetailPage.php
    │   │   │
    │   │   ├───template
    │   │   │       Aside.php
    │   │   │       Navbar.php
    │   │   │
    │   │   └───user
    │   │           LoginPage.php
    │   │           RegisterPage.php
    │   │           UserListPage.php
    │   │
    │   ├───config
    │   │       config.php
    │   │
    │   ├───controllers
    │   │       AlbumController.php
    │   │       HomeController.php
    │   │       NotFoundController.php
    │   │       SongController.php
    │   │       UserController.php
    │   │
    │   ├───core
    │   │       App.php
    │   │       Controller.php
    │   │       Database.php
    │   │       MP3Access.php
    │   │       StorageAccess.php
    │   │       Tables.php
    │   │
    │   ├───exceptions
    │   │       LoggedException.php
    │   │
    │   ├───interfaces
    │   │       ControllerInterface.php
    │   │       ViewInterface.php
    │   │
    │   ├───middlewares
    │   │       AuthenticationMiddleware.php
    │   │       SongLimitMiddleware.php
    │   │       TokenMiddleware.php
    │   │
    │   ├───models
    │   │       AlbumModel.php
    │   │       SongModel.php
    │   │       UserModel.php
    │   │
    │   └───views
    │       ├───album
    │       │       AddAlbumView.php
    │       │       AdminAlbumDetailView.php
    │       │       AlbumListView.php
    │       │       UserAlbumDetailView.php
    │       │
    │       ├───home
    │       │       MainView.php
    │       │
    │       ├───not-found
    │       │       NotFoundView.php
    │       │
    │       ├───song
    │       │       AddSongView.php
    │       │       AdminSongDetailView.php
    │       │       SearchView.php
    │       │       UserSongDetailView.php
    │       │
    │       └───user
    │               LoginView.php
    │               RegisterView.php
    │               UserListView.php
    │
    ├───public
    │   │   .htaccess
    │   │   index.php
    │   │
    │   ├───images
    │   │   ├───assets
    │   │   │       arrow-left.svg
    │   │   │       arrow-right-white.svg
    │   │   │       arrow-right.svg
    │   │   │       bars.svg
    │   │   │       dropdown-arrow.svg
    │   │   │       logo-dark.svg
    │   │   │       logo-light.svg
    │   │   │       logo-notext-dark.svg
    │   │   │       sample.png
    │   │   │       search.svg
    │   │   │       user-solid.svg
    │   │   │
    │   │   └───icon
    │   │           android-chrome-192x192.png
    │   │           android-chrome-512x512.png
    │   │           apple-touch-icon.png
    │   │           favicon-16x16.png
    │   │           favicon-32x32.png
    │   │           favicon.ico
    │   │           site.webmanifest
    │   │
    │   ├───javascript
    │   │   ├───album
    │   │   │       add-album.js
    │   │   │       album-list.js
    │   │   │       update-album-detail.js
    │   │   │
    │   │   ├───component
    │   │   │       navbar.js
    │   │   │
    │   │   ├───home
    │   │   │       home.js
    │   │   │
    │   │   ├───lib
    │   │   │       debounce.js
    │   │   │
    │   │   ├───song
    │   │   │       add-song.js
    │   │   │       play-song.js
    │   │   │       search.js
    │   │   │       update-song.js
    │   │   │
    │   │   └───user
    │   │           login.js
    │   │           register.js
    │   │           user-list.js
    │   │
    │   └───styles
    │       ├───album
    │       │       add-album.css
    │       │       album-detail-admin.css
    │       │       album-detail.css
    │       │       album-list.css
    │       │
    │       ├───home
    │       │       home.css
    │       │
    │       ├───not-found
    │       │       not-found.css
    │       │
    │       ├───song
    │       │       add-song.css
    │       │       search.css
    │       │       song-detail-admin.css
    │       │       song-detail.css
    │       │
    │       ├───template
    │       │       aside.css
    │       │       globals.css
    │       │       navbar.css
    │       │
    │       └───user
    │               login.css
    │               register.css
    │               user-list.css
    │
    └───storage
        ├───images
        │       .gitkeep
        │
        └───songs
                .gitkeep

• new artist related files.

Daftar Requirement

1. Login
2. Register
3. Home
4. Daftar Album
5. Search, Sort, dan Filter
6. Edit Lagu
7. Detail Lagu
8. Edit Album
9. Detail Album
10. Tambah Lagu
11. Tambah Album
12. Daftar User
13. List Penyanyi Premium
14. List Lagu dari Seorang Penyanyi Premium

Cara Instalasi

1. Lakukan pengunduhan repository ini dengan menggunakan perintah git clone https://gitlab.informatika.org/rayhankinan/if-3110-2022-k-02-01-01.git pada terminal komputer Anda.
2. Pastikan komputer Anda telah menginstalasi dan menjalankan aplikasi Docker.
3. Lakukan pembuatan image Docker yang akan digunakan oleh aplikasi ini dengan menjalankan perintah docker build -t tubes-1:latest . pada terminal directory aplikasi web.
4. Buatlah sebuah file .env yang bersesuaian dengan penggunaan (contoh file tersebut dapat dilihat pada .env.example).

Cara Menjalankan Server

1. Anda dapat menjalankan program ini dengan menjalankan perintah docker-compose up -d pada terminal directory aplikasi web.
2. Aplikasi web dapat diakses dengan menggunakan browser pada URL http://localhost:8080/public/home.
3. Aplikasi web dapat dihentikan dengan menjalankan perintah perintah docker-compose down pada terminal directory aplikasi web.

Screenshot Tampilan Aplikasi

Login

Register

Home

Daftar Album

Search, Sort, dan Filter

Edit Lagu

Detail Lagu

Edit Album

Detail Album

Tambah Lagu

Tambah Album

Daftar User

Daftar Premium Artist

Daftar Lagu

Entity Relationship Diagram

Pembagian Tugas

Server Side

Fitur	NIM
Login	13520065
Register	13520065
Home	13520119
Daftar Album	13520119
Search, Sort, dan Filter	13520101
Edit Lagu	13520101
Detail Lagu	13520101
Edit Album	13520119
Detail Album	13520119
Tambah Lagu	13520101
Tambah Album	13520119
Daftar User	13520065
Polling	13520065
Premium Artist	13520101
Premium Artist Songs	13520119

Client Side

Fitur	NIM
Login	13520065
Register	13520065
Home	13520119
Daftar Album	13520119
Search, Sort, dan Filter	13520101
Edit Lagu	13520101
Detail Lagu	13520101
Edit Album	13520119
Detail Album	13520119
Tambah Lagu	13520101
Tambah Album	13520119
Daftar User	13520065
Premium Artist	13520101
Premium Artist Songs	13520119