/Binotify-Web-Application

Primary LanguagePHP

TUGAS Tugas Besar 1 IF3110

Milestone 1 - Monolithic PHP & Vanilla Web Application

Website Binotify merupakan aplikasi musik berbasis web pada BNMO. BNMO adalah mesin yang kuno sehingga hanya kuat untuk menjalankan sebuah DBMS (PostgreSQL/MariaDB/MySQL) dan PHP murni beserta HTML, CSS, dan Javascript vanilla.

Daftar Requirement

  • XAMPP
  • MySQL
  • PHP
  • Apache
  • Docker

Cara intalasi

  1. instal XAMPP
  2. install Docker
  3. Ikuti perintah yang terdapat pada website untuk menginstal aplikasi tersebut

Docker

lakukan build image dengan menjalankan file build-image.sh yang terdapat pada folder script, atau jalankan perintah docker build -t tubes-1:latest . pada terminal

Cara Menjalankan Aplikasi

Menggunakan XAMPP

  1. Jalankan Apache dan MySQL pada aplikasi XAMPP
  2. pada file config.php pada folder src uncomment config bagian atas, dan comment pada bagian bawah, uncomment bagian berikut ini
'db_host' => 'localhost',
'db_database' => 'binotify',
'db_user' => 'root',
'db_password' => '',
'db_pdo_connect' => "mysql:host=localhost;dbname=binotify",
  1. Sesuaikan config.php dengan konfigurasi database Anda (password, database name, dsb.)
  2. Buka localhost/phpmyadmin pada browser
  3. Buat Database dengan nama binotify
  4. import file binotify.sql (yang terdapat pada folder sql) ke dalam database yang telah dibuat sebelumnya
  5. ketikan URL localhost/home pada browser

Menggunakan Docker

⚠ Peringatan! Pada Docker masih terdapat beberapa fitur yang error. Harap menggunakan cara XAMPP.

  1. pada file config.php pada folder src uncomment config bagian bawah, dan comment pada bagian atas, uncomment bagian berikut ini
'db_host' => 'db',
'db_database' => 'binotify',
'db_user' => 'root',
'db_password' => 'MYSQL_ROOT_PASSWORD',
'db_pdo_connect' => "mysql:host=db;dbname=binotify",
  1. jalankan perintah docker compose up pada root folder
  2. Buka localhost:8080 untuk mengakses phpmyadmin
  3. pada phpmyadmin masukan
user = root
password = MYSQL_ROOT_PASSWORD
  1. Buat Database dengan nama binotify
  2. import file binotify.sql (yang terdapat pada folder sql) ke dalam database yang telah dibuat sebelumnya
  3. aplikasi akan berjalan pada localhost:8008/home

Admin sudah terdaftar pada database dengan username admin dan password admin

Tampilan Website

Berikut merupakan tampilan dari website yang kami buat

  1. Halaman Login Login

  2. Halaman Register Register

  3. Halaman Home Home

  4. Halaman Daftar Album DaftarAlbum

  5. Halaman Search, Sort, and Filter Search

  6. Halaman Detail Lagu Detail Lagu

  7. Halaman Detail Album Detail Album

  8. Halaman Tambah Album/Lagu Add Album Add Song

  9. Halaman Daftar User AUser List

Pembagian Tugas

  1. Server-side
Login : 13520149
Register : 13520149
Home : 13520149, 13520116
Daftar Album: 13520116
Search, Sort, and Filter : 13520146
Detail Lagu : 13520146
Detail Album : 13520146
Tambah Album/Lagu : 13520116
Daftar User : 13520149
  1. Client-side
Login : 13520149
Register : 13520149
Home : 13520149, 13520116
Daftar Album: 13520116
Search, Sort, and Filter : 13520146
Detail Lagu : 13520146
Detail Album : 13520146
Tambah Album/Lagu : 13520116
Daftar User : 13520149