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

Daftar Requirement

Login
Register
Home
Daftar Album
Search, Sort, dan Filter
Edit Lagu
Detail Lagu
Edit Album
Detail Album
Tambah Lagu
Tambah Album
Daftar User

Cara Instalasi

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.
Pastikan komputer Anda telah menginstalasi dan menjalankan aplikasi Docker.
Lakukan pembuatan image Docker yang akan digunakan oleh aplikasi ini dengan menjalankan perintah docker build -t tubes-1:latest . pada terminal directory aplikasi web.
Buatlah sebuah file .env yang bersesuaian dengan penggunaan (contoh file tersebut dapat dilihat pada .env.example).

Cara Menjalankan Server

Anda dapat menjalankan program ini dengan menjalankan perintah docker-compose up -d pada terminal directory aplikasi web.
Aplikasi web dapat diakses dengan menggunakan browser pada URL http://localhost:8080/public/home.
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

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

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

airathalca/Tubes-1-IF3110-WBD-Binotify