---

🚗 Car Gallery - Full Stack Web Application

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.

✨ Core Features

• 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.

🛠️ Technology Stack

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

📋 Prerequisites

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)

🚀 Installation and Setup

Follow these steps to get a local copy of the project up and running.

1. Clone the Repository

   git clone https://github.com/Atamyrat2005/Cars.git
   cd Cars
   

2. Install PHP Dependencies Use Composer to install all the required Laravel packages.

   composer install
   

3. Set Up Environment Variables Copy the example environment file and generate your application key.

   cp .env.example .env
   php artisan key:generate
   

4. Configure the Database Open the .env file 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.

5. Run Database Migrations and Seeding This command will create the necessary tables (cars table) and populate them with initial sample data.

   php artisan migrate --seed
   

6. Run the Development Server Start the Laravel development server. By default, it runs on http://127.0.0.1:8000.

   php artisan serve
   

7. View the Application Open your web browser and navigate to http://127.0.0.1:8000. You should now see the application running!

⚙️ How It Works (Application Flow)

1. Request: A user visits the root URL (/).
2. Routing: Laravel's router (routes/web.php) catches the request and directs it to the index method of CarController.
3. Controller: The CarController uses the Car Eloquent model to fetch all entries from the cars table in the PostgreSQL database.
4. Model: The Car model represents the cars table and handles the database query.
5. View: The controller passes the collection of cars to the welcome.blade.php view.
6. 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.
7. Interaction: The frontend JavaScript (script.js) handles the onclick events for the buttons, changing the src attribute of the main image without needing to reload the page.

🗃️ Database Schema

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 |

🌟 Future Improvements

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/images folder manually.
• Testing: Write unit and feature tests to ensure application reliability.

📄 License

This project is open-source. Consider distributing it under the MIT License.