PPT UAS LAB Proyek Perangkat Lunak FUTSAL.pdf

tentang futsal booking app

1. FUTSAL
BOOKING APP Kelompok 8
APLIKASI PEMESANAN LAPANGAN FUTSAL DENGAN
INTEGRASI USER DAN ADMIN

2. ANGGOTA KELOMPOK
Widya Nurul Sukma (2208107010054)
Pryta Rosela (2208107010046)
MIla Lestari (2208107010002)

3. APA ITU FUTSAL BOOKING APP?
Futsal Booking App adalah solusi digital yang memudahkan pemesanan
lapangan futsal melalui aplikasi web. Aplikasi ini menggabungkan antarmuka
user yang intuitif untuk melihat jadwal dan memesan lapangan, dengan
dashboard admin yang komprehensif untuk mengelola semua booking
menggunakan sistem CRUD. Yang menarik dari aplikasi ini adalah integrasinya
yang sempurna - setiap booking yang dibuat oleh user akan tersimpan di
database SQLite Django dan dapat langsung dikelola melalui dashboard admin.
Tujuan utama pengembangan aplikasi ini adalah menciptakan sistem yang
efisien untuk pemesanan lapangan sekaligus memudahkan administrator dalam
mengelola operasional.

4. FITUR DAN TEKNOLOGI
1.Antarmuka Pengguna (User Interface): Terdiri dari landing page untuk
melihat jadwal booking, formulir pemesanan yang mudah digunakan, dan
halaman konfirmasi dengan detail lengkap booking.
2.Dashboard Admin: Menggunakan Django Authentication untuk
keamanan dan menyediakan fitur CRUD lengkap melalui Django Admin
interface.
3.Teknologi yang Digunakan: Menggabungkan Django sebagai backend
utama, Django REST Framework untuk API, HTML + Tailwind CSS +
JavaScript untuk frontend, SQLite sebagai database, serta Express.js
sebagai proxy opsional yang menambah fleksibilitas arsitektur.

5. STRUKTUR DAN ALUR KERJA
Struktur Proyek: Struktur proyek dibagi menjadi tiga direktori utama:
backend-django yang berisi semua komponen Django termasuk models,
views, dan admin configuration; api-express sebagai layer tambahan yang
berfungsi sebagai proxy; dan frontend yang berisi file HTML, CSS, dan
JavaScript.
Alur Kerja Aplikasi: Alur kerja aplikasi dimulai ketika user mengakses landing
page untuk melihat jadwal, kemudian mengisi formulir booking yang akan
dikirim ke Django API melalui endpoint /api/bookings/. Data tersebut
disimpan ke database SQLite dan langsung dapat diakses oleh admin melalui
dashboard di /admin.
Peran Express.js: Express.js berperan sebagai proxy opsional yang
memperkuat arsitektur dengan dua framework backend.

6. ANTARMUKA PENGGUNA
Pengalaman user dirancang untuk kemudahan dan efisiensi. Landing page
menampilkan jadwal booking yang sudah ada dalam format yang mudah
dipahami, memungkinkan user melihat ketersediaan lapangan. Formulir
booking menyediakan input field untuk nama pemesan, pilihan lapangan,
tanggal, dan jam yang diinginkan dengan validasi yang tepat. Setelah
booking berhasil dibuat, user akan diarahkan ke halaman konfirmasi yang
menampilkan detail lengkap booking mereka, termasuk nomor booking
sebagai referensi. Semua halaman dirancang dengan Tailwind CSS untuk
tampilan yang modern dan responsif.

7. SISTEM MANAJEMEN ADMIN
Dashboard admin memanfaatkan Django Authentication untuk keamanan
login dan menyediakan interface yang powerful untuk mengelola semua aspek
booking. Admin dapat melakukan Create untuk menambah booking baru
secara manual, Read untuk melihat daftar semua booking termasuk yang
dibuat oleh user, Update untuk mengedit detail booking yang sudah ada, dan
Delete melalui dropdown Action untuk menghapus booking yang diperlukan.
Yang paling penting adalah integrasi sempurna dimana setiap booking yang
dibuat oleh user melalui frontend langsung muncul dalam daftar admin,
memungkinkan pengelolaan terpusat semua data booking.

8. INTEGRASI DAN SOLUSI TEKNIS
Tantangan Utama: Tantangan utama dalam pengembangan adalah memastikan
data booking dari user interface dapat dikelola melalui admin dashboard.
Solusi yang Diterapkan: Solusi yang diterapkan adalah mengintegrasikan
frontend langsung dengan Django API melalui endpoint /api/bookings/, sehingga
semua booking tersimpan di database SQLite Django. Untuk mengatasi masalah
CORS dalam komunikasi lintas domain, digunakan django-cors-headers yang
dikonfigurasi dengan tepat.
Peran Express.js dan Hasil Akhir: Express.js tetap dipertahankan sebagai proxy
opsional yang memberikan nilai tambah dengan menunjukkan kemampuan
menggunakan dua framework backend sekaligus. Hasil akhirnya adalah sistem
yang seamless, di mana booking user langsung dapat dikelola oleh admin tanpa
transfer data manual.

9. INSTALASI DAN PENGGUNAAN
Proses Instalasi Proses instalasi dimulai dengan setup Django backend
melalui aktivasi virtual environment, instalasi dependencies dari
requirements.txt, migrasi database, dan menjalankan development server
di port 8000. Express.js dapat diinstall secara opsional dengan npm install
dan dijalankan di port yang berbeda.
Instalasi Frontend: Frontend tidak memerlukan instalasi khusus, cukup
dibuka menggunakan Live Server extension di VS Code atau web server
sederhana lainnya.
Penggunaan Sehari-hari: Untuk penggunaan sehari-hari, user dapat
langsung membuat booking melalui halaman booking.html, sementara
admin mengakses dashboard melalui localhost:8000/admin untuk
mengelola semua booking yang masuk.

10. DEMO PROJECT

11. KESIMPULAN DAN PENCAPAIAN
Futsal Booking App berhasil memenuhi kebutuhan pemesanan lapangan futsal
dengan pendekatan yang komprehensif dan terintegrasi. Aplikasi ini
memberikan nilai tambah dengan menggunakan dua framework backend
(Django dan Express.js) yang menunjukkan fleksibilitas arsitektur. Fitur lengkap
mulai dari halaman user, dashboard admin, hingga API publik menjadikan
aplikasi ini solusi end-to-end untuk manajemen booking lapangan. Integrasi
yang sempurna antara frontend user dan backend admin memastikan tidak ada
data yang terpisah atau hilang dalam proses operasional. Dokumentasi lengkap
berupa README.md, presentasi ini, dan video demo menjadikan aplikasi mudah
untuk dikembangkan lebih lanjut atau diimplementasikan di lingkungan
produksi.

12. TERIMA KASIH Aplikasi Pemesanan Lapangan Futsal dengan
Integrasi User dan Admin