In this video we are going to learn about Creating Laravel 10 Project and
Layout Setup For the E-Commerce Project
So lets start with creating new laravel 10 project
Make sure you have installed composer and php
php version must be 8.2 or higher
Lets see how to check the installed php and composer version
In command prompt For php run the command
Here php version is 8.2
And now lets check the composer
So run the command
And here composer version is 2.5.8
If you have not installed php and composer
Go to the google and search xampp
Now click on this link and from here you can download and install the php 8.2
And for the composer search the composer
Now click on this link
And from here you can download the compser-setup.exe and install it
Now lets create the laravel new project using the composer command
So run the following command in commd prompt
project has been created
now lets install laravel/ui package for the authentication
Run the command
Now create new mysql database
So go to the localhost/phpMyAdmin
Now here enter the new database name
Let say database name is Laravel10ecommercedb
Now in project lets configure the database
Go to the .env file and add the database name
Which Is laravel10ecommercedb user name root and password is blank in my case
Now lets migrate the migration
Now run the application
For that run the command
Now its running on localhost:8000
Go to the url
localhost:8000
And here is the laravel 10 default welcome page
Alright now lets setup the layout for the ecommerce project
So before doing the setup lets download the html template of the project
For getting the template
Go to the google and search here surfside media github
Now click this link, click on repositories
Now open this repository and download this
Unzip this now open index.html file this is the home page of template
Now implement this template in our project
So go to the layouts directory
And create here a new file base.blade.php file
Now go the template directory and lets open this index.html file into vs code
Now copy all the text and paste inside the base.blade.php view file
Now lets let's remove the sections from body
So just collapse all the section and from here to here just cut this
And add the @yield('content'), @stack('styles'), @stack('scripts') directives and also add the asset function with css and script url as following
Now lets create controller
In command prompt run the command
Layout Setup For the E-Commerce Project
So lets start with creating new laravel 10 project
Make sure you have installed composer and php
php version must be 8.2 or higher
Lets see how to check the installed php and composer version
In command prompt For php run the command
php –v
Here php version is 8.2
And now lets check the composer
So run the command
composer –v
And here composer version is 2.5.8
If you have not installed php and composer
Go to the google and search xampp
Now click on this link and from here you can download and install the php 8.2
And for the composer search the composer
Now click on this link
And from here you can download the compser-setup.exe and install it
Now lets create the laravel new project using the composer command
So run the following command in commd prompt
composer create-project laravel/laravel laravel10ecommerce
project has been created
now lets install laravel/ui package for the authentication
Run the command
composer require laravel/ui
php artisan ui bootstrap –auth
npm install
Npm build
Now create new mysql database
So go to the localhost/phpMyAdmin
Now here enter the new database name
Let say database name is Laravel10ecommercedb
Now in project lets configure the database
Go to the .env file and add the database name
Which Is laravel10ecommercedb user name root and password is blank in my case
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel10ecommercedb
DB_USERNAME=root
DB_PASSWORD=
Now lets migrate the migration
php artisan migrate
Now run the application
For that run the command
Php artisan serve
Now its running on localhost:8000
Go to the url
localhost:8000
And here is the laravel 10 default welcome page
Alright now lets setup the layout for the ecommerce project
So before doing the setup lets download the html template of the project
For getting the template
Go to the google and search here surfside media github
Now click this link, click on repositories
Now open this repository and download this
Unzip this now open index.html file this is the home page of template
Now implement this template in our project
So go to the layouts directory
And create here a new file base.blade.php file
Now go the template directory and lets open this index.html file into vs code
Now copy all the text and paste inside the base.blade.php view file
Now lets let's remove the sections from body
So just collapse all the section and from here to here just cut this
And add the @yield('content'), @stack('styles'), @stack('scripts') directives and also add the asset function with css and script url as following
<!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>
Now lets create controller
In command prompt run the command
php artisan make:controller AppController
Now open this AppController
And add a function here
public function index(){
return view('index');
}
Now create this index view so go to the resources directory and create new file index.blade.php file
Now add layout here, so write here
@extends('layouts.base')
@section('content')
@endsection
And from template index.html file
Lets copy the following content and paste here
Now create the route for this so go the web.php file and write here
Route::get('/',[AppController::class,'index'])->name('app.index');
Now save all and lets check it
Refresh the page
And here is the home page and template is now applied on this home page
In this way you create Project & Layout Setup for Laravel 10 E-Commerce Project.
