BiNotify: Aplikasi Web Pemutar Lagu menggunakan Monolithic PHP dan Vanilla Web Application

Implementasi untuk Tugas Besar 1 dan 2 IF3110 Pengembangan Berbasis Web, Prodi Informatika ITB Tahun Ajaran 2022/2023

Deskripsi

BiNotify adalah sebuah aplikasi pemutar lagu berbasis web yang dapat digunakan untuk memutar lagu, menambahkan lagu / album, serta melakukan perubahan data lagu / album yang terdaftar. Pengguna dapat memutar lagu yang terdaftar di BiNotify dengan mudah menggunakan UI yang simpel dan aplikasi yang berbasis web. Menggunakan hak admin, pengguna dapat melihat daftar pengguna lainnya dan menambahkan / menyunting lagu dan album.

BiNotify dibangun menggunakan bahasa pemrograman HTML, CSS, dan JavaScript di bagian client side, dan PHP di bagian server side. Komunikasi antara kedua pihak dilakukan dengan paradigma request/response secara asynchronous dengan perantara AJAX. Penanganan state dilakukan menggunakan fitur $_SESSION dari bahasa PHP.

Daftar Requirement

Perangkat lunak yang dibutuhkan untuk bisa mengoperasikan BiNotify adalah:

• Docker versi 20.10.21, panduan instalasi
• Docker Compose versi 1.26.2, panduan instalasi
• Operating system berbasis WIndows 10 atau Linux Ubuntu 20.04

Pengguna juga harus melakukan setup terkait repo berikut:

1. BiNotify Config, untuk mengakses database utama (wajib untuk penggunaan umum)
2. BiNotify SOAP, SOAP server untuk melakukan pemeriksaan subscription
3. BiNotify REST, REST server untuk mendapatkan daftar pengguna

Instalasi dan Pemakaian

1. Lakukan fork terhadap repository ini dan ketiga repository di atas
2. Lakukan urutan menjalankan konfigurasi Docker mengikuti urutan: BiNotify Config -> BiNotify SOAP -> BiNotify REST

• Pada root folder tiap repository di local computer anda, lakukan perintah

docker-compose down && docker-compose build && docker-compose up

• Detail lebih lanjut dapat dilihat pada README.md masing-masing repository

3. Untuk BiNotify App, instalasi dapat digunakan menggunakan perintah docker-compose seperti berikut:

docker-compose down && docker-compose build && docker-compose up

Apabila proses instalasi berhasil,

• Aplikasi dapat diakses pada http://localhost:8001, dengan login dilakukan pada http://localhost:8001/login.html dengan kredensial berikut:

-- untuk user biasa
Username: user01
Password: dummy

-- untuk user admin
Username: admin
Password: admin

• Adminer (antarmuka basis data) dapat diakses pada http://localhost:8080 dengan kredensial berikut:

Server: db-binotify
Username: root
Password: root
Database: binotify-app

[IMPORTANT] Pastikan repository BiNotify Config sudah dijalankan!

Apabila proses instalasi tidak berhasil karena port yang digunakan sedang digunakan untuk proses lain, port dapat diganti pada konfigurasi docker-compose.yml

Screenshot

Halaman Home

Halaman Daftar Lagu (Search, Sort, dan Filter)

(Kasus melakukan pencarian pada lagu yang dinyanyikan Tulus dengan genre Melancholic diurutkan berdasarkan nama lagu secara menurun dari alfabet besar ke kecil)

Halaman Daftar Album

Halaman Detail Lagu

(Kasus admin, dapat melakukan editing)

Halaman Detail Album

(Kasus admin, dapat melakukan editing)

Halaman Register

Halaman Login

Halaman Tambah Lagu (Admin)

Halaman Tambah Album (Admin)

Halaman Daftar User (Admin)

Opsi Edit Lagu / Album (Admin)

(dijadikan satu kasus karena layouting yang sama)

Halaman Daftar Artis Premium

Halaman Daftar Lagu Premium

Pembagian Tugas

Secara umum, pembagian tugas dilakukan dengan setiap anggota melakukan pengembangan di server side maupun client side berdasarkan groundwork yang sudah dibuat. Pengecualian terkhusus pada pembuatan komponen reusable dan CSS yang digunakan bersama.

Legenda NIM adalah sebagai berikut:

• 13520043: Muhammad Risqi Firdaus
• 13520117: Hafidz Nur Rahman Ghozali
• 13520124: Owen Christian Wijaya

Server Side

• Halaman Login + Register: 13520124
• Halaman Home + Navbar: 13520117
• Halaman Daftar Lagu + Pagination + Search/Sort/Filter: 13520124
• Halaman Daftar Album: 13520124
• Halaman Detail Lagu + Player Lagu: 13520117
• Halaman Detail Album: 13520043
• Halaman Tambah Lagu: 13520043
• Halaman Tambah Album: 13520043
• Halaman Daftar User: 13520124
• Halaman Daftar Artis Premium: 13520117, 13520124
• Halaman Daftar Lagu Premium per Artis: 13520117, 13520124

Client Side

• Halaman Login + Register: 13520124
• Halaman Home + Navbar: 13520117
• Halaman Daftar Lagu + Pagination + Search/Sort/Filter: 13520117, 13520124
• Halaman Daftar Album: 13520117, 13520124
• Halaman Detail Lagu + Player Lagu: 13520117
• Halaman Detail Album: 13520043
• Halaman Tambah Lagu: 13520043
• Halaman Tambah Album: 13520043
• Halaman Daftar User: 13520117, 13520124
• Halaman Daftar Artis Premium: 13520117, 13520124
• Halaman Daftar Lagu Premium per Artis: 13520117, 13520124