Laravel 10 E-Commerce Project - Project & Layout Setup
Creating a New Laravel 10 Project
Let's start by creating a new Laravel 10 project. Make sure you have installed Composer and PHP, with a PHP version of 8.2 or higher.
Let's check the installed PHP and Composer versions. In the command prompt, run the command:
php –v
Here, the PHP version is 8.2. Now, let's check the Composer version:
composer –v
The Composer version is 2.5.8. If you haven't installed PHP and Composer, go to Google and search for XAMPP. Download and install PHP 8.2, and then search for Composer and download the Composer setup executable.
Creating a New Laravel Project
Now, let's create a new Laravel project using the Composer command:
composer create-project laravel/laravel laravel10ecommerce
The project has been created. Now, let's install the Laravel/UI package for authentication:
composer require laravel/ui
php artisan ui bootstrap –auth
npm install
Npm build
Creating a New MySQL Database
Next, create a new MySQL database:
Go to localhost/phpMyAdmin, enter a new database name, such as Laravel10ecommercedb, and configure the database in the .env file.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel10ecommercedb
DB_USERNAME=root
DB_PASSWORD=
Migrating the Migration
Now, let's migrate the migration:
php artisan migrate
Running the Application
Run the application:
Php artisan serve
The application is now running on localhost:8000. Go to the URL localhost:8000, and you will see the Laravel 10 default welcome page.
Setting Up the Layout
Now, let's set up the layout for the e-commerce project. Before doing so, let's download the HTML template of the project:
Go to Google and search for Surfside Media GitHub. Click on the link, click on repositories, open the repository, and download the template. Unzip the file, open the index.html file, and implement the template in our project.
Go to the layouts directory and create a new file called base.blade.php. Open the index.html file in VS Code, copy all the text, and paste it inside the base.blade.php view file.
Removing Sections from the Body
Now, let's remove the sections from the body:
Collapse all the sections, cut the unnecessary code, and add the @yield('content'), @stack('styles'), @stack('scripts') directives. Also, add the asset function with CSS and script URLs as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="MkRqEzTGuoSx6LqJUm0OAKxSgNUYt26wTT7RMUZY">
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="{{asset('assets/images/favicon.ico')}}">
<link rel="icon" href="{{asset('assets/images/favicon.ico')}}" type="image/x-icon">
<link rel="icon" href="{{asset('assets/images/favicon.ico')}}" type="image/x-icon">
<meta name="theme-color" content="#e87316">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Surfside Media">
<meta name="msapplication-TileImage" content="{{asset('assets/images/favicon.ico')}}">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Surfside Media">
<meta name="keywords" content="Surfside Media">
<meta name="author" content="Surfside Media">
<link rel="preconnect" href="https://fonts.gstatic.com">
<title>SurfsideMedia</title>
<link id="rtl-link" rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/vendors/ion.rangeSlider.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/font-awesome.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/feather-icon.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/slick/slick.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/slick/slick-theme.css') }}">
<link id="color-link" rel="stylesheet" type="text/css" href="{{ asset('assets/css/demo4.css') }}">
<style>
.h-logo {
max-width: 185px !important;
}
.f-logo {
max-width: 220px !important;
}
@media only screen and (max-width: 600px) {
.h-logo {
max-width: 110px !important;
}
}
</style>
<link rel="stylesheet" href="{{asset('assets/css/custom.css')}}">
@stack('styles')
</head>
<body class="theme-color4 light ltr">
<style>
header .profile-dropdown ul li {
display: block;
padding: 5px 20px;
border-bottom: 1px solid #ddd;
line-height: 35px;
}
header .profile-dropdown ul li:last-child {
border-color: #fff;
}
header .profile-dropdown ul {
padding: 10px 0;
min-width: 250px;
}
.name-usr {
background: #e87316;
padding: 8px 12px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
line-height: 24px;
}
.name-usr span {
margin-right: 10px;
}
@media (max-width:600px) {
.h-logo {
max-width: 150px !important;
}
i.sidebar-bar {
font-size: 22px;
}
.mobile-menu ul li a svg {
width: 20px;
height: 20px;
}
.mobile-menu ul li a span {
margin-top: 0px;
font-size: 12px;
}
.name-usr {
padding: 5px 12px;
}
}
</style>
<header class="header-style-2" id="home">
<div class="main-header navbar-searchbar">
<div class="container-fluid-lg">
<div class="row">
<div class="col-lg-12">
<div class="main-menu">
<div class="menu-left">
<div class="brand-logo">
<a href="{{route('app.index')}}">
<img src="{{asset('assets/images/logo.png')}}" class="h-logo img-fluid blur-up lazyload"
alt="logo">
</a>
</div>
</div>
<nav>
<div class="main-navbar">
<div id="mainnav">
<div class="toggle-nav">
<i class="fa fa-bars sidebar-bar"></i>
</div>
<ul class="nav-menu">
<li class="back-btn d-xl-none">
<div class="close-btn">
Menu
<span class="mobile-back"><i class="fa fa-angle-left"></i>
</span>
</div>
</li>
<li><a href="{{route('app.index')}}" class="nav-link menu-title">Home</a></li>
<li><a href="shop.html" class="nav-link menu-title">Shop</a></li>
<li><a href="cart.html" class="nav-link menu-title">Cart</a></li>
<li><a href="about-us.html" class="nav-link menu-title">About Us</a></li>
<li><a href="contact-us.html" class="nav-link menu-title">Contact Us</a>
</li>
<li><a href="blog.html" class="nav-link menu-title">Blog</a></li>
</ul>
</div>
</div>
</nav>
<div class="menu-right">
<ul>
<li>
<div class="search-box theme-bg-color">
<i data-feather="search"></i>
</div>
</li>
<li class="onhover-dropdown wislist-dropdown">
<div class="cart-media">
<a href="wishlist/list.html">
<i data-feather="heart"></i>
<span id="wishlist-count" class="label label-theme rounded-pill">
0
</span>
</a>
</div>
</li>
<li class="onhover-dropdown wislist-dropdown">
<div class="cart-media">
<a href="cart/list.html">
<i data-feather="shopping-cart"></i>
<span id="cart-count" class="label label-theme rounded-pill">
0
</span>
</a>
</div>
</li>
<li class="onhover-dropdown">
<div class="cart-media name-usr">
<i data-feather="user"></i>
</div>
<div class="onhover-div profile-dropdown">
<ul>
<li>
<a href="{{route('login')}}" class="d-block">Login</a>
</li>
<li>
<a href="{{route('register')}}" class="d-block">Register</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="search-full">
<form method="GET" class="search-full" action="http://localhost:8000/search">
<div class="input-group">
<span class="input-group-text">
<i data-feather="search" class="font-light"></i>
</span>
<input type="text" name="q" class="form-control search-type"
placeholder="Search here..">
<span class="input-group-text close-search">
<i data-feather="x" class="font-light"></i>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="mobile-menu d-sm-none">
<ul>
<li>
<a href="demo3.php" class="active">
<i data-feather="home"></i>
<span>Home</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i data-feather="align-justify"></i>
<span>Category</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i data-feather="shopping-bag"></i>
<span>Cart</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i data-feather="heart"></i>
<span>Wishlist</span>
</a>
</li>
<li>
<a href="user-dashboard.php">
<i data-feather="user"></i>
<span>Account</span>
</a>
</li>
</ul>
</div>
@yield('content')
<div id="qvmodal"></div>
<footer class="footer-sm-space mt-5">
<div class="main-footer">
<div class="container">
<div class="row gy-4">
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="footer-contact">
<div class="brand-logo">
<a href="{{route('app.index')}}" class="footer-logo float-start">
<img src="{{asset('assets/images/logo.png')}}" class="f-logo img-fluid blur-up lazyload"
alt="logo">
</a>
</div>
<ul class="contact-lists" style="clear:both;">
<li>
<span><b>phone:</b> <span class="font-light"> +1 0000000000</span></span>
</li>
<li>
<span><b>Address:</b><span class="font-light"> NIT, Faridabad, Haryana,
India</span></span>
</li>
<li>
<span><b>Email:</b><span class="font-light"> contact@surfsidemedia.in</span></span>
</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="footer-links">
<div class="footer-title">
<h3>About us</h3>
</div>
<div class="footer-content">
<ul>
<li>
<a href="{{route('app.index')}}" class="font-dark">Home</a>
</li>
<li>
<a href="shop.html" class="font-dark">Shop</a>
</li>
<li>
<a href="about-us.html" class="font-dark">About Us</a>
</li>
<li>
<a href="#" class="font-dark">Blog</a>
</li>
<li>
<a href="contact-us.html" class="font-dark">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="footer-links">
<div class="footer-title">
<h3>New Categories</h3>
</div>
<div class="footer-content">
<ul>
<li>
<a href="shop.html" class="font-dark">Latest Shoes</a>
</li>
<li>
<a href="shop.html" class="font-dark">Branded Jeans</a>
</li>
<li>
<a href="shop.html" class="font-dark">New Jackets</a>
</li>
<li>
<a href="shop.html" class="font-dark">Colorfull Hoodies</a>
</li>
<li>
<a href="shop.html" class="font-dark">Shiner Goggles</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="footer-links">
<div class="footer-title">
<h3>Get Help</h3>
</div>
<div class="footer-content">
<ul>
<li>
<a href="#" class="font-dark">Your Orders</a>
</li>
<li>
<a href="#" class="font-dark">Your Account</a>
</li>
<li>
<a href="#" class="font-dark">Track Orders</a>
</li>
<li>
<a href="#" class="font-dark">Your Wishlist</a>
</li>
<li>
<a href="#" class="font-dark">Shopping FAQs</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-sm-6 d-none d-sm-block">
<div class="footer-newsletter">
<h3>Let's stay in touch</h3>
<div class="form-newsletter">
<div class="input-group mb-4">
<input type="text" class="form-control color-4" placeholder="Your Email Address">
<span class="input-group-text" id="basic-addon4"><i
class="fas fa-arrow-right"></i></span>
</div>
<p class="font-dark mb-0">Keep up to date with our latest news and special offers.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sub-footer">
<div class="container">
<div class="row gy-3">
<div class="col-md-6">
<ul>
<li class="font-dark">We accept:</li>
<li>
<a href="javascript:void(0)">
<img src="assets/images/payment-icon/1.jpg" class="img-fluid blur-up lazyload"
alt="payment icon">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="assets/images/payment-icon/2.jpg" class="img-fluid blur-up lazyload"
alt="payment icon">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="assets/images/payment-icon/3.jpg" class="img-fluid blur-up lazyload"
alt="payment icon">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="assets/images/payment-icon/4.jpg" class="img-fluid blur-up lazyload"
alt="payment icon">
</a>
</li>
</ul>
</div>
<div class="col-md-6">
<p class="mb-0 font-dark">© 2023, Surfside Media.</p>
</div>
</div>
</div>
</div>
</footer>
<div class="tap-to-top">
<a href="#home">
<i class="fas fa-chevron-up"></i>
</a>
</div>
<div class="bg-overlay"></div>
<script src="{{ asset('assets/js/jquery-3.5.1.min.js') }}"></script>
<script src="{{ asset('assets/js/bootstrap/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/js/feather/feather.min.js') }}"></script>
<script src="{{ asset('assets/js/lazysizes.min.js') }}"></script>
<script src="{{ asset('assets/js/slick/slick.js') }}"></script>
<script src="{{ asset('assets/js/slick/slick-animation.min.js') }}"></script>
<script src="{{ asset('assets/js/slick/custom_slick.js') }}"></script>
<script src="{{ asset('assets/js/price-filter.js') }}"></script>
<script src="{{ asset('assets/js/ion.rangeSlider.min.js') }}"></script>
<script src="{{ asset('assets/js/filter.js') }}"></script>
<script src="{{ asset('assets/js/newsletter.js') }}"></script>
<script src="{{ asset('assets/js/cart_modal_resize.js') }}"></script>
<script src="{{ asset('assets/js/bootstrap/bootstrap-notify.min.js') }}"></script>
<script src="{{ asset('assets/js/theme-setting.js') }}"></script>
<script src="{{ asset('assets/js/script.js') }}"></script>
<script>
$(function () {
$('[data-bs-toggle="tooltip"]').tooltip()
});
</script>
@stack('scripts')
</body>
</html>
Creating a Controller
Now, let's create a controller:
php artisan make:controller AppController
public function index(){
return view('index');
}
Creating a New Index View
Create a new index view by going to the resources directory and creating a new file called index.blade.php. Add the layout, and write:
@extends('layouts.base')
@section('content')
@endsection
Copy the following content from the template index.html file and paste it here. Now, create the route for this by going to the web.php file and writing:
Route::get('/',[AppController::class,'index'])->name('app.index');
Now, save all the changes and let's check the result. Refresh the page, and you will see the home page with the template applied.
In this way, you have successfully created the project and layout setup for the Laravel 10 E-commerce project.
