Laravel 11 E-Commerce - Project & Layout Setup

Welcome back to the Laravel E-Commerce Project Tutorial! In this video, we will learn how to create a new Laravel project and set up the layout for an e-commerce project.

Creating a New Laravel Project

To begin, let's create a new Laravel project. Make sure you have installed Composer and PHP, with a version of 8.2 or higher.

Let's check the installed PHP and Composer versions. In the command prompt for PHP, run the command:

Php –v

The PHP version is 8.2. Now, let's check the Composer version.

Run the command:

Composer –v

The Composer version is 2.5.8. If you haven't installed PHP and Composer, search for XAMPP and download and install PHP 8.2. Then, search for Composer and download the composer-setup.exe file to install it.

Creating a New Laravel Project using Composer

Now, let's create a new Laravel project using the Composer command:

composer create-project laravel/laravel laravelecommerce

The project has been created.

Installing Laravel/UI Package for Authentication

Next, let's install the Laravel/UI package for authentication.

Run the command:

composer require laravel/ui
php artisan ui bootstrap -auth
npm install
Npm  build

Creating a New MySQL Database

Now, create a new MySQL database. Go to localhost/phpMyAdmin and enter a new database name, such as Laravel11ecommercedb.

In the project, let's configure the database. Go to the .env file and add the database name, username, and password.

Now, let's migrate the migration:

php artisan migrate

Running the Application

Run the application by running the command:

php artisan serve

The application is now running on localhost:8000. Go to the URL localhost:8000 to see the Laravel 11 default welcome page.

Setting up the Layout for the E-commerce Project

Now, let's set up the layout for the e-commerce project. Before we do, let's download the HTML template of the project.

Search for Surfside Media GitHub and download the template. Unzip the file and open the index.html file from the website folder, which is the home page of the template.

Implement this template in our project by going to the layouts directory and opening the app.blade.php file. Then, go to the template directory and open the index.html file in VS Code.

Copy all the text and paste it inside the app.blade.php view file.

Now, let's remove the main sections from the body. Collapse all the sections and cut the unnecessary code. Add the @yield directive:

@yield('content')

Also, add:

@stack('styles')

@stack('scripts')

For rendering styles and scripts, add the Laravel asset method to generate the URL.

Select the text and press Ctrl + D, then add:

Select the text again and press Ctrl + D, then add:

In the script, do the same thing. Select the text and press Ctrl + D, then add:

And add:

Creating the Index View and Route

Now, go to the App\Http\Controller and open HomeController.php. Add a function:

public function index(){
    return view('index');
}

Create a new index view by going to the resources directory and creating a new file, index.blade.php.

Extend the layout:

@extends('layouts.app')
@section('content')
@endsection

Copy the content from the template index.html file and paste it here.

Create the route for this by going to the web.php file and writing:

Route::get('/',[HomeController::class,'index'])->name('home.index');

Save all and let's check it. Refresh the page, and you should see the home page with the template applied.

That's it! We have successfully created a new project and set up the layout for the Laravel e-commerce project.

So, that's all about Project & Layout Setup for Laravel E-Commerce Project.