This is a dynamic, full-stack web application that showcases a gallery of cars. The project is built with the powerful Laravel PHP framework on the backend, a PostgreSQL database for data persistence, and a clean, interactive frontend built with HTML, CSS, and vanilla JavaScript.
This repository serves as a practical example of a complete Model-View-Controller (MVC) architecture, database integration, and dynamic content rendering.
- Dynamic Content: Car data (names, image paths) is dynamically loaded from a PostgreSQL database, not hardcoded in the HTML.
- Robust Backend: Built with Laravel, providing a structured, secure, and scalable foundation.
- Database-Driven: Uses PostgreSQL to store and manage application data, with migrations for easy schema management.
- MVC Architecture: Clean separation of concerns between business logic (Model), data presentation (View), and user input (Controller).
- Interactive Frontend: Retains the simple, fast, and user-friendly image-switching interface from the original concept.
- Extensible: The structure allows for easy expansion, such as adding a full CRUD (Create, Read, Update, Delete) interface for managing cars.
This project is built with a modern, robust technology stack:
- Backend: PHP 8.1+, Laravel 10
- Database: PostgreSQL
- Frontend: HTML5, CSS3, JavaScript (ES6)
- Templating: Blade (Laravel's native templating engine)
- Dependency Management: Composer
Before you begin, ensure you have the following installed on your local machine:
- PHP (version 8.1 or higher)
- Composer
- PostgreSQL Server
- A code editor (e.g., Visual Studio Code)
Follow these steps to get a local copy of the project up and running.
-
Clone the Repository
git clone https://github.com/Atamyrat2005/Cars.git cd Cars -
Install PHP Dependencies Use Composer to install all the required Laravel packages.
composer install
-
Set Up Environment Variables Copy the example environment file and generate your application key.
cp .env.example .env php artisan key:generate
-
Configure the Database Open the
.envfile and update the database connection variables to match your local PostgreSQL setup.DB_CONNECTION=pgsql DB_HOST=127.0.0.1 DB_PORT=5432 DB_DATABASE=your_db_name # <-- Change this DB_USERNAME=your_db_user # <-- Change this DB_PASSWORD=your_db_password # <-- Change this (can be empty if not set)
Important: Make sure you have created the database (
your_db_name) in PostgreSQL before proceeding. -
Run Database Migrations and Seeding This command will create the necessary tables (
carstable) and populate them with initial sample data.php artisan migrate --seed
-
Run the Development Server Start the Laravel development server. By default, it runs on
http://127.0.0.1:8000.php artisan serve
-
View the Application Open your web browser and navigate to http://127.0.0.1:8000. You should now see the application running!
- Request: A user visits the root URL (
/). - Routing: Laravel's router (
routes/web.php) catches the request and directs it to theindexmethod ofCarController. - Controller: The
CarControlleruses theCarEloquent model to fetch all entries from thecarstable in the PostgreSQL database. - Model: The
Carmodel represents thecarstable and handles the database query. - View: The controller passes the collection of cars to the
welcome.blade.phpview. - Rendering: The Blade view dynamically generates the HTML. It loops through the car data to create the buttons for each car and sets the initial image.
- Interaction: The frontend JavaScript (
script.js) handles theonclickevents for the buttons, changing thesrcattribute of the main image without needing to reload the page.
The application uses a simple cars table to store information. The schema is defined in the migration file located at database/migrations/.
| Column | Type | Notes |
|---|---|---|
id |
bigint |
Primary Key, Auto-Incrementing |
name |
varchar |
The name of the car brand (e.g., "BMW") |
image_path |
varchar |
The path to the image file (e.g., "images/bmw.jpg") |
created_at |
timestamp |
Timestamps managed by Laravel |
updated_at |
timestamp |
Timestamps managed by Laravel |
This project serves as an excellent foundation. Here are some potential features to add:
- CRUD Admin Panel: Create a secure area where an administrator can add, edit, and delete cars from the database.
- User Authentication: Add a login/registration system so users can have accounts.
- Search and Filter: Implement a search bar to filter cars by name.
- API Endpoints: Build a RESTful API to expose the car data, allowing it to be consumed by other applications (e.g., a mobile app).
- Image Uploads: Allow admins to upload car images directly through the web interface instead of placing them in the
public/imagesfolder manually. - Testing: Write unit and feature tests to ensure application reliability.
This project is open-source. Consider distributing it under the MIT License.