Group Name: Ayam Gepuk Supremacy
Section: 2
Instructor: Madam Nor Azura binti Kamarulzaman
Group Members:
- Sadia Ahmad (2413422)
- Fathima Hiba (2411914)
- Al Meerah Anas (2416772)
SportsHub is a web‑based sports facility booking and management system built with Laravel. It allows students to browse facilities, check real‑time availability, make bookings, cancel bookings, and leave reviews.
Administrators have a dedicated panel to manage facilities (add, edit, delete) and view system statistics.
- To develop a convenient online system for booking sports facilities.
- To provide real‑time availability checking and booking management.
- To implement different user roles (student / admin) with proper access control.
- To create an attractive, responsive, and easy‑to‑use interface.
- To apply Laravel best practices in developing a functional web application.
- Students – browse facilities, book time slots, cancel bookings, leave reviews.
- Administrators – manage facilities (add, edit, delete), view dashboard statistics.
- User Authentication – register, login, logout (Laravel Breeze).
- Browse Facilities – view all facilities with images, sport type, location, price, and average rating.
- Search & Filter – filter by sport type (Futsal, Badminton, Basketball) and location.
- Real‑time Availability – system prevents double‑booking by checking overlapping time slots.
- Make a Booking – select date, start time, end time → instant confirmation.
- My Bookings – view upcoming and past bookings, cancel confirmed bookings.
- Reviews & Ratings – after using a facility, students can give a star rating and write a comment.
- Admin Dashboard – shows total users, facilities, bookings, and reviews.
- Facility Management – full CRUD (add, edit, delete facilities) via a dedicated panel.
- Backend Framework: Laravel 12.x
- Frontend: Blade Templates with Tailwind CSS (inline style overrides for guaranteed button visibility)
- Database: MySQL
- Authentication: Laravel Breeze
- Development Environment: XAMPP + Git Bash / VS Code
The ERD shows the following relationships:
users→bookings(one‑to‑many)users→reviews(one‑to‑many)facilities→bookings(one‑to‑many)facilities→reviews(one‑to‑many)bookings→reviews(one‑to‑one)
Stores student and admin accounts with a role column (student or admin).
Stores facility details: name, description, sport type, location, price per hour, image URL.
Stores bookings: which user, which facility, date, start time, end time, status, total price.
Stores reviews: rating (1‑5), comment, linked to a user, facility, and booking.
Key routes:
// Public facility browsing
Route::get('/facilities', [FacilityController::class, 'index'])->name('facilities.index');
Route::get('/facilities/{facility}', [FacilityController::class, 'show'])->name('facilities.show');
// Student routes (authenticated)
Route::middleware(['auth'])->group(function () {
Route::post('/facilities/{facility}/book', [BookingController::class, 'store'])->name('bookings.store');
Route::get('/my-bookings', [BookingController::class, 'myBookings'])->name('my-bookings');
Route::patch('/bookings/{booking}/cancel', [BookingController::class, 'cancel'])->name('bookings.cancel');
Route::post('/bookings/{booking}/review', [ReviewController::class, 'store'])->name('reviews.store');
});
// Admin routes
Route::middleware(['auth', 'admin'])->prefix('admin')->name('admin.')->group(function () {
Route::get('/dashboard', [AdminDashboardController::class, 'index'])->name('dashboard');
Route::resource('facilities', AdminFacilityController::class);
});FacilityController– lists facilities with search/filter, shows a single facility with booking form.BookingController– handles booking creation (with availability check), listing user bookings, and cancellation.ReviewController– saves reviews after a booking.Admin/DashboardController– returns statistics for the admin dashboard.Admin/FacilityController– full CRUD for facilities (create, read, update, delete).
User model – has many bookings and reviews.
Facility model – has many bookings, many reviews, and an avgRating() method.
Booking model – belongs to a user and a facility; has one review.
Review model – belongs to a user, facility, and booking.
Checks if the logged‑in user has role = admin. Protects all admin routes.
Key views:
facilities/index.blade.php– facility grid with search/filter.facilities/show.blade.php– facility details and booking form.bookings/my-bookings.blade.php– user’s bookings with cancel and review forms.admin/dashboard.blade.php– statistics and Manage Facilities button.admin/facilities/index.blade.php– list of facilities with edit/delete and + Add Facility.admin/facilities/create.blade.php– form to add a new facility.admin/facilities/edit.blade.php– form to edit a facility.
- Registration & Login – Laravel Breeze (email + password).
- Role Assignment – new users default to
student. Admin account is created via seeder or tinker. - Access Control – admin routes are protected by
AdminMiddleware.
- Student – register a new account (any email/password).
- Admin – login with:
Email:admin@sportshub.com
Password:password
- PHP >= 8.1
- Composer
- Node.js & NPM
- MySQL (via XAMPP)
- Git
-
Clone the repository:
git clone https://github.com/almxnas/SportsHub.git cd SportsHub -
Install PHP dependencies:
composer install
-
Install NPM dependencies and build assets:
npm install npm run build
-
Environment configuration:
cp .env.example .env
Edit
.envand set your database credentials:DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=sports_hub DB_USERNAME=root DB_PASSWORD=
-
Generate application key:
php artisan key:generate
-
Run database migrations and seeders:
php artisan migrate --seed
This creates tables and inserts sample facilities.
-
Start the development server:
php artisan serve
The application will be available at
http://127.0.0.1:8000.
- User registration, login, logout.
- Student can browse facilities, filter by sport type/location.
- Facility detail page shows correct info and booking form.
- Booking – availability check prevents double‑booking; total price calculated.
- My Bookings – displays bookings with cancel option.
- Cancel booking – status updates to “cancelled”.
- Add review – rating and comment saved, shown on facility page.
- Admin login – sees Admin Panel link.
- Admin Dashboard – shows total users, facilities, bookings, reviews.
- Manage Facilities – add, edit, delete facilities.
- All buttons visible and functional
| Challenge | Solution |
|---|---|
| White / invisible buttons (Tailwind CSS overrides) | Used inline style attributes for critical buttons. |
Missing migration columns (user_id in bookings, comment in reviews) |
Added columns manually via php artisan tinker. |
| 419 Page Expired (CSRF) | Ensured @csrf in forms; temporarily added booking route to VerifyCsrfToken::$except for demo. |
| Admin dashboard view not found | Moved dashboard.blade.php from admin/facilities/ to admin/. |
| Negative total price | Fixed calculation using abs() and correct diffInMinutes()/60. |
| SQLite vs MySQL confusion | Switched from SQLite to MySQL and updated .env. |
- Image upload – allow admins to upload images instead of using URLs.
- Time slot picker – visual grid for easier selection.
- Email notifications – send booking confirmations.
- Pagination – for facilities list when many facilities exist.
- Laravel MVC, Eloquent, Blade, Artisan.
- Database migrations, seeding, relationships.
- Role‑based authentication with custom middleware.
- Real‑time availability logic (complex query to prevent overlaps).
- Git & GitHub collaboration.
- Team collaboration (VS Code Live Share, WhatsApp).
- Debugging and problem solving.
- Time management under deadline pressure.
- Documentation and presentation preparation.
- Laravel Documentation
- Tailwind CSS Documentation
- MDN Web Docs
- Stack Overflow
- dbdiagram.io – ERD design.
https://github.com/almxnas/SportsHub
SportsHub is a functional sports facility booking system. Students can browse, filter, book, cancel, and review facilities. Administrators can manage facilities and view system statistics. All core objectives were met. Despite challenges with CSS visibility and database migrations, the final application is stable and ready for presentation.
Project Completion Date: 14 June 2026
Course: BIIT 2305 Web Application Development (Section 2)