555Garage

Aplikasi web booking jasa servis & modifikasi mobil berbasis Native PHP + MySQL dengan desain neo-brutalist. Mendukung pembayaran online via Midtrans (sandbox).

Fitur

Umum

• Landing page dengan hero, daftar layanan/paket, profil bengkel, dan lokasi peta
• Autentikasi: registrasi, login, logout
• Desain neo-brutalist responsif (Archivo Black, Space Grotesk, Space Mono)

Fitur User

Fitur	Keterangan
Checkout	Pilih paket servis (preset atau custom), isi data kendaraan beserta foto, lihat harga dinamis
Pembayaran	Pembayaran online via Midtrans Snap (QRIS, e-wallet, Virtual Account, dll.)
Halaman Menunggu Bayar	Polling status pembayaran otomatis setiap 3 detik
Riwayat Transaksi	Daftar semua booking dengan status (Pending / Proses / Sukses / Gagal / Dibatalkan / Kadaluwarsa)
Detail Transaksi	Rincian booking: layanan, kendaraan, total biaya — lanjut bayar jika masih pending
Profil	Ubah data akun
Syarat & Ketentuan	Halaman S&K yang bisa diakses dari checkout

Fitur Admin

Fitur	Keterangan
Dashboard	Statistik transaksi dan ringkasan data
Manajemen Layanan	CRUD layanan: nama, harga, estimasi jam kerja, foto, kategori
Manajemen Kategori Modifikasi	CRUD kategori modifikasi/layanan
Manajemen Paket Servis	CRUD paket servis (preset), atur layanan di dalam paket
Manajemen Merek Mobil	CRUD merek mobil, toggle aktif/nonaktif
Manajemen Transaksi	Lihat & update status transaksi, detail kendaraan & layanan per booking
Manajemen Pengguna	Daftar akun terdaftar, kelola role user/admin
Statistik	Laporan transaksi dan performa layanan

Cara Menjalankan Aplikasi

Prasyarat

• PHP >= 8.0
• MySQL / MariaDB
• XAMPP (atau Apache + MySQL lainnya)
• Akun Midtrans (untuk fitur pembayaran)

---

1. Clone repositori

git clone <url-repo>
cd <nama-folder>

2. Salin dan isi file konfigurasi

cp .env.example .env

Edit .env dan sesuaikan nilai berikut:

APP_NAME="555Garage"
APP_ENV=development
BASE_URL=/l200240091/tugas-akhir-prak-web-s4   # Sesuaikan path dari document root Apache

DB_HOST=localhost
DB_PORT=3306
DB_NAME=dbs_service_mobil
DB_USER=root
DB_PASS=

SESSION_SECRET=isi_dengan_string_acak_yang_kuat

UPLOAD_MAX_SIZE=2097152
UPLOAD_ALLOWED=jpg,jpeg,png,webp

WA_NUMBER=6281234567890        # Nomor WhatsApp bisnis (format 62xxx)
IG_HANDLE=nama_akun_ig         # Username Instagram tanpa @

MIDTRANS_SERVER_KEY=SB-Mid-server-xxxx   # Dari dashboard sandbox Midtrans
MIDTRANS_CLIENT_KEY=SB-Mid-client-xxxx   # Dari dashboard sandbox Midtrans
MIDTRANS_IS_PRODUCTION=false   # Ganti jadi true jika sudah pakai key production (bukan sandbox lagi)

Cara mendapatkan key Midtrans: Buat akun di Midtrans, lalu di sidebar dashboard pilih Sandbox > Pengaturan > Access Key. Ambil Server Key dan Client Key dari halaman tersebut. Selama masih sandbox, simulasikan pembayaran lewat simulator.sandbox.midtrans.com. Dokumentasi API lengkap: docs.midtrans.com.

3. Buat database dan jalankan schema

mysql -u root -p < database/schema.sql
mysql -u root -p dbs_service_mobil < database/seed.sql

4. Jalankan aplikasi

Opsi A — PHP built-in server (development):

php -S localhost:8000 -t public/

Kemudian buka http://localhost:8000 di browser.

Opsi B — XAMPP / Apache:

Letakkan folder proyek di dalam htdocs/, lalu arahkan BASE_URL di .env ke path yang sesuai (contoh: /l200240091/tugas-akhir-prak-web-s4). Akses via http://localhost/l200240091/tugas-akhir-prak-web-s4.

---

Akun Default (dari seed.sql)

Role	Nama (Username)	Email	Password
Admin	Administrator	admin@555garage.com	admin123
User	Orang	orang@mail.com	123456
User	Siti	siti@mail.com	123456

Struktur Direktori

.
├── database/
│   ├── schema.sql      # DDL: struktur tabel
│   └── seed.sql        # Data awal (admin, layanan, paket contoh)
├── public/             # Document root — semua request masuk sini
│   ├── index.php
│   ├── css/
│   │   ├── style.css       # Entry point utama — import core + components (selalu dimuat)
│   │   ├── admin.css       # Entry point admin — import admin/*
│   │   ├── user.css        # Entry point user — import user/*
│   │   ├── landing.css     # Style landing page
│   │   ├── auth.css        # Style login & register
│   │   ├── core/           # variables, reset, base, utilities, animations
│   │   ├── components/     # button, card, form, modal, table, navbar, footer, dll (reusable)
│   │   ├── admin/          # shared, dashboard, users, produk, transaksi, statistik, merek-kategori
│   │   └── user/           # checkout, riwayat, payment-method, payment-waiting, order-detail, profile
│   ├── js/
│   │   ├── main.js         # Script global (navbar, util bersama)
│   │   ├── landing.js      # Interaksi landing page
│   │   ├── admin/          # kategori, layanan, merek, paket, statistik, transaksi, users
│   │   ├── user/           # checkout, profile
│   │   └── midtrans/       # payment, payment_waiting (integrasi Snap & polling)
│   └── images/
├── src/
│   ├── config/         # Koneksi DB, konfigurasi app & Midtrans
│   ├── includes/       # Komponen UI (navbar, footer, head, profile)
│   ├── pages/
│   │   ├── admin/      # dashboard, layanan, kategori, merek, paket, transaksi, users, statistik
│   │   ├── auth/       # login, register, logout
│   │   ├── user/       # checkout, payment, payment_waiting, payment_detail, payment_finish, riwayat, profile, terms
│   │   └── midtrans/   # Webhook notifikasi pembayaran
│   └── api/            # check_payment.php — polling status pembayaran
├── .env.example
└── .env                # Tidak di-commit (lihat .gitignore)

Catatan

• Password di database disimpan dalam hash MD5. Untuk produksi, ganti dengan password_hash() / bcrypt.
• Pastikan folder public/images/layanan/ dan public/images/kendaraan/ dapat ditulis oleh web server untuk fitur upload foto.