🏨 Trevio - Hotel Booking Management System

Final Project - Web Application Programming | Ganjil 2025

---

📋 Project Overview

Trevio adalah sistem manajemen pemesanan hotel yang memungkinkan:

• Multiple hotels dengan multiple owners
• Manual payment verification oleh admin
• Room slot management (automatic availability tracking)
• Multi-channel notifications (Email & WhatsApp)
• Reviews & rating system
• Complete refund workflow

---

🎯 Main Features

3 Main Transactions:

1️⃣ Booking & Manual Payment Verification

• Customer memilih hotel dan kamar
• Upload bukti transfer pembayaran
• Admin verifikasi payment secara manual
• Email invoice dikirim setelah konfirmasi
• WhatsApp notification ke owner

2️⃣ Room Slot Management

• Owner set total slot kamar saat create/edit room
• Slot otomatis ready untuk semua hari
• Slot berkurang otomatis saat booking confirmed
• Slot kembali saat booking cancelled/refunded
• No calendar per-date management needed!

3️⃣ Refund Processing

• Customer request refund dengan bank info
• Admin review dan approve/reject
• Transfer manual oleh admin
• Upload bukti transfer refund

---

👥 User Roles

Customer

• Register/Login (Email + Password / Google OAuth)
• Browse & search hotels
• Check room availability (real-time slot check)
• Book multiple rooms
• Upload payment proof
• Receive email invoice
• View booking history
• Request refund
• Write reviews & ratings

Hotel Owner

• Register/Login (Email + Password / Google OAuth)
• Add/manage hotels
• Add/manage rooms (set default slot count)
• View bookings
• Check-in guests
• View reports (Chart.js)
• Receive WhatsApp notification for new bookings

Admin

• Login (Email + Password)
• Verify/reject payments (view proof, add notes)
• Process refunds
• Manage users (activate/deactivate)
• Manage hotels (approve/reject)
• View global statistics & reports
• Moderate reviews

---

🛠️ Tech Stack

Backend:

• PHP 8.0+ (Native MVC Pattern)
• MySQL 8.0+
• PHPMailer (email notifications)
• WhatsApp API (Fonnte/Wablas)
• Google OAuth 2.0 (Sign in with Google)

Frontend:

• Tailwind CSS 3.0+ (styling)
• Chart.js (reports & statistics)
• SweetAlert2 (beautiful alerts)
• Vanilla JavaScript
• Google Fonts

Deployment:

• VPS Server (Ubuntu/CentOS)
• Apache/Nginx
• SSL Certificate (Let's Encrypt)

---

📊 Database Structure

9 Tables:

1. users - All users (customer, owner, admin)
2. hotels - Hotels (owned by owners)
3. rooms - Room types with slot count
4. bookings - All booking transactions
5. payments - Payment proofs & verification
6. refunds - Refund requests & processing
7. reviews - Customer reviews & ratings
8. notifications - Notification logs (email & WhatsApp)
9. admin_activities - Admin action audit log

See full schema: database/trevio_final.sql

See ERD: docs/ERD.png

---

🚀 Installation

Prerequisites:

• PHP >= 8.0
• MySQL >= 8.0
• Composer (optional, for dependencies)
• VPS Server with SSH access

1. Clone Repository

git clone https://github.com/your-team/trevio.git
cd trevio

2. Configure Environment

# Copy environment template
cp .env.example .env

# Edit configuration
nano .env

Required configurations:

# Database
DB_HOST=localhost
DB_NAME=trevio
DB_USER=root
DB_PASS=your_password

# App
APP_URL=https://trevio.yourdomain.com
APP_ENV=production

# Email (Gmail SMTP)
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your_email@gmail.com
MAIL_PASSWORD=your_app_password
MAIL_FROM=noreply@trevio.com

# WhatsApp (Fonnte)
WHATSAPP_API_KEY=your_fonnte_api_key
WHATSAPP_ENABLED=true

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_REDIRECT_URI=https://trevio.yourdomain.com/auth/google-callback

3. Database Setup

# Create database
mysql -u root -p -e "CREATE DATABASE trevio"

# Import schema
mysql -u root -p trevio < database/trevio_final.sql

# Import sample data (optional)
mysql -u root -p trevio < database/seeders.sql

4. Set Permissions

# Set upload directory permissions
chmod -R 755 public/uploads
chmod -R 755 logs

# Set ownership (if on VPS)
chown -R www-data:www-data public/uploads
chown -R www-data:www-data logs

5. Configure Web Server

Apache (.htaccess already included):

# Enable mod_rewrite
sudo a2enmod rewrite
sudo systemctl restart apache2

Nginx:

server {
    listen 80;
    server_name trevio.yourdomain.com;
    root /var/www/trevio/public;
    index index.php;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.0-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}

6. Access Application

http://your-domain.com
or
http://your-vps-ip

---

🔑 Default Login Credentials

Admin:

Email: admin@trevio.com
Password: password123

Owner:

Email: owner@trevio.com
Password: password123

Customer:

Email: customer@trevio.com
Password: password123

⚠️ IMPORTANT: Change these passwords after first login!

---

💡 Room Slot Management Logic

How It Works:

When Owner Creates Room:

// Example: Owner creates "Deluxe Room" with 5 slots
Room:
- room_type: "Deluxe Room"
- total_slots: 5        // Set by owner
- available_slots: 5    // Default = total_slots

// Slot is READY for ALL dates automatically!
// No need to set availability per date

When Customer Books:

// Customer books 2 rooms
// Before booking:
available_slots = 5

// After booking confirmed:
available_slots = 5 - 2 = 3

// System automatically reduces slots

When Booking Cancelled/Refunded:

// Restore slots
available_slots = 3 + 2 = 5

// Back to original

Availability Check:

// When customer searches hotel for any date:
SELECT * FROM rooms 
WHERE hotel_id = ? 
AND available_slots >= num_rooms_requested

Result: Simple, no per-date calendar needed! ✅

---

📧 Notification System

Email Notifications (PHPMailer):

Sent for:

• ✉️ Booking created (invoice attached)
• ✉️ Payment verified
• ✉️ Payment rejected
• ✉️ Refund completed

WhatsApp Notifications (Fonnte):

Sent to OWNER only for:

• 📱 New booking confirmed
• 📱 Guest check-in today reminder

Setup:

Email (Gmail):

1. Enable 2-Step Verification in Google Account
2. Generate App Password
3. Use in .env as MAIL_PASSWORD

WhatsApp (Fonnte):

1. Register at https://fonnte.com
2. Get API key
3. Use in .env as WHATSAPP_API_KEY

---

🔐 Google OAuth Setup

1. Create Google OAuth App:

1. Go to: https://console.cloud.google.com/
2. Create new project: "Trevio"
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add authorized redirect URI:

   https://trevio.yourdomain.com/auth/google-callback
   

6. Copy Client ID & Client Secret

2. Configure in .env:

GOOGLE_CLIENT_ID=your_client_id_here.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your_client_secret_here
GOOGLE_REDIRECT_URI=https://trevio.yourdomain.com/auth/google-callback

3. Add Google Sign-In Button:

Already included in views/auth/login.php

---

📊 Reports & Statistics

Owner Reports (Chart.js):

• Revenue trend (line chart)
• Booking trend (bar chart)
• Occupancy rate (pie chart)
• Room type performance

Admin Reports:

• Total users (by role)
• Total hotels
• Total bookings (by status)
• Revenue summary
• Top performing hotels

---

🧪 Testing

Test Accounts:

Admin:
- Email: admin@trevio.com
- Password: password123

Owner:
- Email: owner@trevio.com
- Password: password123

Customer:
- Email: customer@trevio.com
- Password: password123

Test Scenarios:

Customer Flow:

1. Register/Login (email or Google)
2. Search hotel
3. Check room availability
4. Book room
5. Upload payment proof
6. Wait admin verification
7. Receive invoice email
8. Write review after stay

Owner Flow:

1. Login
2. Add hotel
3. Add rooms (set slots)
4. View bookings
5. Check-in guest
6. View reports

Admin Flow:

1. Login
2. Verify payment
3. Reject payment (test)
4. Process refund
5. Manage users
6. View statistics

---

📂 Key Files

trevio/
├── app/
│   ├── controllers/
│   │   ├── AuthController.php          # Login + Google OAuth
│   │   ├── BookingController.php       # Booking logic
│   │   └── OwnerRoomController.php     # Room slot management
│   ├── models/
│   │   ├── Room.php                    # Room model (slot logic)
│   │   └── Booking.php                 # Booking model
│   └── views/
│       └── ...
├── config/
│   ├── database.php                    # DB config
│   └── google-oauth.php                # Google OAuth config
├── libraries/
│   ├── PHPMailer/                      # Email library
│   ├── Mailer.php                      # Email wrapper
│   └── WhatsApp.php                    # WhatsApp wrapper
└── public/
    ├── index.php                       # Entry point
    └── uploads/                        # Upload directory

---

🚀 Deployment to VPS

Quick Deployment Guide:

1. Connect to VPS:

ssh root@your-vps-ip

2. Install LAMP Stack:

# Update system
apt update && apt upgrade -y

# Install Apache, MySQL, PHP
apt install apache2 mysql-server php8.0 php8.0-mysql php8.0-curl php8.0-gd php8.0-mbstring -y

3. Clone & Setup:

cd /var/www
git clone https://github.com/your-team/trevio.git
cd trevio
cp .env.example .env
nano .env  # Configure

4. Database:

mysql -u root -p < database/trevio_final.sql

5. Permissions:

chown -R www-data:www-data /var/www/trevio
chmod -R 755 /var/www/trevio/public/uploads

6. Apache Config:

nano /etc/apache2/sites-available/trevio.conf

<VirtualHost *:80>
    ServerName trevio.yourdomain.com
    DocumentRoot /var/www/trevio/public
    
    <Directory /var/www/trevio/public>
        AllowOverride All
        Require all granted
    </Directory>
    
    ErrorLog ${APACHE_LOG_DIR}/trevio-error.log
    CustomLog ${APACHE_LOG_DIR}/trevio-access.log combined
</VirtualHost>

a2ensite trevio
a2enmod rewrite
systemctl restart apache2

7. SSL (Let's Encrypt):

apt install certbot python3-certbot-apache -y
certbot --apache -d trevio.yourdomain.com

Full guide: docs/Deployment_Guide.md

---

🎨 UI/UX Features

• ✨ Responsive design (mobile-first)
• 🎨 Modern Tailwind CSS
• 📊 Interactive charts (Chart.js)
• 🔔 Beautiful alerts (SweetAlert2)
• 🖼️ Image galleries
• ⭐ Star rating system
• 📱 Mobile-friendly forms
• 🔍 Real-time search
• 🎯 Loading indicators

---

📝 Documentation

• ERD Diagram
• User Flow
• Deployment Guide
• API Documentation (if applicable)

---

👨‍💻 Team Members

Name	Role	Responsibilities
Hendrik	Project Manager & Full Stack	Backend core, coordination
Fajar	Full Stack & DevOps	Backend, deployment, notifications
Syadat	Database & QA	Database design, testing
Zek	UI/UX Designer	Interface design, user experience
Reno	Frontend Developer	Frontend implementation, Tailwind

---

📊 Project Statistics

• Total Files: 50+
• Lines of Code: 5000+
• Database Tables: 9
• Main Transactions: 3
• User Roles: 3
• Notification Channels: 2 (Email + WhatsApp)

---

🐛 Known Issues & Solutions

Issue: Upload size limit

# php.ini
upload_max_filesize = 10M
post_max_size = 10M

Issue: Email not sending

• Check Gmail app password
• Check SMTP settings
• Check firewall (port 587)

Issue: Google OAuth not working

• Verify redirect URI exactly matches
• Check Client ID & Secret
• Enable Google+ API

---

🔄 Version History

v1.0.0 (Current)

• Initial release
• Manual payment verification
• Room slot management
• Email & WhatsApp notifications
• Google OAuth integration
• Reviews & rating system

---

📞 Support

For questions or issues:

• Project Manager: Hendrik - hendrik@email.com
• Lecturer: Moch Kautsar Sophan

---

📜 License

This project is created for educational purposes as part of Web Application Programming final project.

© 2025 Trevio Team. All Rights Reserved.

---

🙏 Acknowledgments

• Moch Kautsar Sophan (Lecturer)
• PHP Community
• Tailwind CSS Team
• Chart.js Contributors
• SweetAlert2 Team
• Google OAuth Documentation
• Fonnte WhatsApp API

---

Built with ❤️ by Trevio Team