🛍️ Laravel E-Commerce Project: Setup and Layout Configuration

Welcome back to the Laravel E-Commerce Project Tutorial! This guide details the steps for creating a new Laravel project and setting up the basic layout for our e-commerce application.

💻 Project Creation and Dependencies

First, ensure you have Composer and PHP installed on your system.

1. Verify PHP Version

Laravel 12 requires PHP version 8.2 or higher. You can check your version using the command:

php –v

This version is recommended for Laravel 12.

2. Verify Composer Version

Check your Composer installation with the command:

composer –v

If you have not installed PHP and Composer, you can download PHP 8.2 by searching for "xampp" and Composer by searching for "composer" on Google and installing composer-setup.exe.

3. Create the Laravel Project

Navigate to your desired project folder and run the following Composer command to create a new Laravel 12 project named laravel12pro:

composer create-project --prefer-dist laravel/laravel laravel12pro "12.*"

4. Install Authentication (Laravel Breeze)

Install the laravel/breeze package for setting up authentication, followed by the installation and build commands:

composer require laravel/breeze --dev
php artisan breeze:install blade
php artisan migrate
npm install
npm run build

⚙️ Database Configuration

1. Create a MySQL Database

Go to localhost/phpMyAdmin and create a new database. The example uses the name Laravel12ecommercedb.

2. Configure .env File

Open the .env file in your project and update the database settings. The example uses root as the username and a blank password. Also, add the DB_COLLATION setting:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Laravel12ecommercedb
DB_USERNAME=root
DB_PASSWORD=
DB_COLLATION=utf8mb4_unicode_ci

The DB_COLLATION setting specifies the default character set collation for the MySQL connection, using a Unicode collation that supports a wide range of languages and characters.

3. Run Migrations and Start Server

Execute the migrations to set up the database tables:

php artisan migrate

Then, run the application using the serve command:

php artisan serve

The application is now running on localhost:8000, showing the Laravel 12 default welcome page.

🎨 Layout Setup for E-Commerce

The next step is to set up the layout using an HTML template.

1. Download the Template

Search Google for "surfside media GitHub," open the repository, and download the template. After unzipping, the index.html file is the home page template.

2. Modify the Main Layout (app.blade.php)

Open resources/views/layouts/app.blade.php.

  • Remove the default fonts, scripts, and all content from the <body>.
  • Copy the <head> content from the template'sindex.html and paste it into app.blade.php's<head>.
  • Copy the template's<body> content and paste it into the <body> of app.blade.php.
  • Cut out the main content sections from the body and replace them with the slot variable:
    {{ $slot }}
  • Add the @stack directives for rendering view-specific styles and scripts:
    @stack("styles’)
    @stack("scripts’)

3. Update Asset URLs

Use the Laravel asset() method to generate URLs for files in the public directory. Select all CSS and script URLs in app.blade.php and wrap them with the asset() helper:

{{ asset(‘assets/css/style.css’) }}
{{ asset(‘assets/js/main.js’) }}

4. Create and Configure the Home View

  • Update the index function in HomeController.php to return the index view:
    public function index(){
    return view(‘index’);
    }
  • Create the view file resources/views/index.blade.php.
  • In index.blade.php, add the layout component tags and paste the main content from the template'sindex.html inside:
    <x-app-layout>
    </x-app-layout>
  • Define the route for the home page in web.php:
    Route::get(‘/’,[HomeController::class,’index’])->name(‘home.index’);

After saving all changes and refreshing the page, the home page will display with the applied template. This completes the project and layout setup for the e-commerce project.