Скачать или смотреть Laravel 10 Tutorial | Part 80 | Convert HTML Template to Laravel | E-commerce Website Structure

►Laravel 10 Tutorial Playlist:    • Laravel 10 Tutorial: Make Admin Panel / E-...  

In Part 80 of the Laravel 10 Tutorial to make the E-commerce Website in Laravel, we will convert ecommerce template to our Laravel website that we have downloaded in the last video. In the process of conversion, we will copy HTML pages, images, JS and CSS files into the Laravel structure.

And we will also create a route, controller, and function for the index page and set its design as well.

1) Copy CSS, SCSS, JS, Images and Webfonts:-
First of all, we will copy CSS, SCSS, JS, Images and Webfonts from the HTML template to our Laravel file structure.

1.1) Copy CSS Files:-
We will create css folder under /public/front/ and copy all CSS files from /css/ folder of html template.

1.2) Copy SCSS Files:-
We will create css folder under /public/front/ and copy all SCSS files from /scss/ folder of html template.

1.3) Copy JS Files:-
We will create js folder under /public/front/ and copy all JS files from /js/ folder of html template.

1.4) Copy Images:-
We will create an images folder under /public/front/ and copy all Images from /images/ folder of HTML template.

1.5) Copy Webfonts:-
We will create a fonts folder under /public/front/ and copy all files from /webfonts/ folder of HTML template.

2) Create layout Folder and layout.blade.php File:-
We will create a layout Folder under /resources/views/front/ path in which we will create the layout.blade.php file.

We will copy content from the index.html file from HTML template folder and paste it into this layout.blade.php file.

Before making further changes to this file, we will also create the below files under the layout Folder:-

header.blade.php
footer.blade.php
sidebar.blade.php

header.blade.php file contains the header part of our Multi Vendor E-commerce website

footer.blade.php file contains the footer part of our Multi Vendor E-commerce website

sidebar.blade.php file contains the left sidebar of our Multi Vendor E-commerce website

We will add content to the above three files and will also update the layout.blade.php file as shown in the video.

We will include the header.blade.php, footer.blade.php, sidebar.blade.php files in the layout.blade.php file.

For middle content, update the layout.blade.php file that will fetch the middle content of the page dynamically.

For the index page, add the index.blade.php file under the front folder that we will create under /resources/views/front/ path in which we will copy the middle content from the index.html file from HTML template.

3) Create IndexController :-
Now create the Front folder under /app/Http/Controllers/ and then create the IndexController.php file under the Front folder by running below artisan command:-
php artisan make:controller Front/IndexController

We will keep all Front Controllers separate from Admin Controllers which will help us to separate the front and admin codes.

4) Create Route:-
We will create a separate group in the web.php file for front routes so that we can keep them separately with namespace Front and prefix front.

Learn more about Routing/Controllers including namespaces/route groups in Laravel 6 Basics playlist:-
   • Laravel 6 Basics  

5) Create index function:-
Now create an index function in IndexController that will return to the index.blade.php file in which we have already copied the middle content of index.html

We will update the front layout files; layout.blade.php, header.blade.php and footer.blade.php and correct CSS, JS, Images and fonts paths and add asset/url by using url and asset functions of laravel.

6) Update layout.blade.php file:-
Now, we will update the layout.blade.php file to add Laravel asset/url to CSS, JS and images paths.

7) Update header.blade.php file:-
Now we will update the header.blade.php file to add Laravel asset to images paths.

8) Update footer.blade.php file:-
Now we will update the footer.blade.php file to add Laravel asset to images paths.

9) Update index.blade.php file:-
Now we will update the index.blade.php file to add Laravel asset to images paths.

From the next video, we are going to start making the home page dynamic.

►Click here to subscribe for Laravel & other updates -    / stackdevelopers  

Popular Stack Developers Series that can help you:-

►Laravel Multi-Vendor E-commerce Website -    • Laravel Multi Vendor Tutorial  

►React JS Tutorial for Beginners with Laravel -    • React JS Tutorial with Laravel for Beginners  

►Join this channel to get the complete source code:
   / @stackdevelopers  

#laravel10 #laravel10tutorial #laravel