Laravel 8 Layouts And Views Using AdminLTE3 — Phpflow.com
We will create laravel 8 layout and views Using AdminLTE3 Theme.This tutorial help to convert simple bootstrap HTML theme into laravel 8 layout. The layout means a theming of your laravel application. The blade template engine will use to create theme layout in laravel 8.
The Laravel is a powerful and MVC pattern based framework. Default, The Laravel store view file in /resources/views
folder.
Blade Engine
The Blade is one of them powerful templating engine in php, which will generate theme layout in HTML format. All blade files uses .blade.php
file extension and stored in resources/views
directory.
AdminLTE3
The AdminLTE3 is a free to use Bootstrap 4 admin template. This template uses the Bootstrap 4 styles along with a variety of powerful jQuery plugins and tools to create a powerful framework for creating admin panels or back-end dashboards.
Laravel 8 File changes
There are following files will participate into this laravel layout tutorial :
- public : This folder will contain
css
,js
andimages
folder and files. - resources/views : This folder will contain all views file.
- resources/views/layouts : This folder will contain all layout files .
- resources/views/partials : This folder will contain all layout partial files like header, footer and sidebar etc.
- routes/web.php : This file contain web routes.
- Http/Controllers/HomeController.php : This file contains controller method for routes.
You can also check other recommended tutorials of Lumen/Laravel :
Laravel 8 Layouts And Views
We will download HTML based AdminLTE3 theme and convert into powerful laravel layout using blade templating engine. Break the index.html
page into the smaller unit like header, footer, sidebar and content, then coupled into the master layout( app.blade.php
) file. Let's create layout and render content:
Install Laravel Using Composer
There are two method to install laravel using laravel installer or composer, Let’s install Laravel by Composer command create-project
. If your system doesn't has Composer Installed, You need to install them? Run the below command to create a laravel project into the terminal-
composer create-project --prefer-dist laravel/laravel laravel-app
Download AdminLTE Theme
First, We will download AdminLTE3 Template from Here.
Move Theme assets files
Theme have assets folder that contains css.js and images folder. We will Move all theme js, css, images and fonts folder and files into laravel-app /public
folder.
Create Partials Files From HTML Theme
Already downloaded AdminLTE3 zip folder, we will extract it and open index.html
file. Let's created following separate template files. These file will have separate portion of theme adminLte index.html
file -
- /resources/views/partials/header.blade.php : This file will contains html template header part.
- /resources/views/partials/sidebar.blade.php : This file will contains html template sidebar part.
- /resources/views/partials/footer.blade.php : This file will contains html template footer part.
- /resources/views/partials/breadcrumb.blade.php : This file will contains breadcrumb information.
- /resources/views/layouts/app.blade.php : This file will use to include above partial files and create master layout template which will render on each laravel request.
header.blade.php
Created a new views/partials/header.blade.php
file and paste AdminLTE theme header html code:
footer.blade.php
Created new views/partials/footer.blade.php
file and paste AdminLTE theme footer HTML code.
sidebar.blade.php
Created new views/partials/sidebar.blade.php
file and paste AdminLTE theme sidebar HTML code.
breadcrumb.blade.php
Created new views/partials/breadcrumb.blade.php
file and paste AdminLTE theme breadcrumb HTML code.
HomeController.pho file
Let’s create HomeController.php
file into Http/Controllers/ folders, Added below code here :
Convert Bootstrap Into Laravel Layout
Created new resources/views/layouts/app.blade.php
file. Added partial files into here and create content area that will filed by routes page contents. Also, included required css and js files that will help to render theme styling. Added below codes into this file:
You can see above code, I am using two directives,
- @include : This directive used to include partial files.
- @yield : This directive used to set content into the section, which is main content area of layout.
Create A Home Page
Now, Create a home page for our laravel application and link home page menu into sidebar. This is default page view of the our laravel application.
Define home view Routes In Laravel 8
Now define routes and call above view, Let’s add below entry into the routes/web.php
file.
Route::get('/', [HomeController::class, 'index']);
Define home Method into Controller
We have defined home routes and target index method under HomeController
file, Let's create index()
method here :
Home view File
Let’s create a new home.blade.php
file into the /views/pages
folder and added below code into the this file.
We have extended master layout app.blade.php
file and passed active class name($elementActive
), This variable value get into the master layout file:
Contact Us page
Contact page is another page into this laravel 8 layout tutorial, that ll have application contact information.
Define Contact view Routes In Laravel 8
Now define routes and render contact view, Let’s add below entry into the routes/web.php
file.
Route::get('/contact', [HomeController::class, 'contact'])->name('contact');
Define contact Method into Controller
We have defined contact routes and target contact method under HomeController file, Let’s create contact()
method here :
Above method search contact.blade.php
file into pages folder.
Contact view File
Create views/pages/contact.blade.php
file and added below code:
Now run Laravel application using php artisan serve
and navigate http://localhost:8000, You can get AdminLTE theme page layout with 'this is my home page' message.
Conclusion
We have created a laravel theme layout using AdminLTE. You can convert any HTML theme into laravel layout by helping this tutorial. You can use any other template engine as well. This laravel tutorial used bootstrap 4,blade template engine and php 7 to convert HTML view into Laravel Layout. You can get more info about laravel 8 from official laravel website.
Originally published at https://www.phpflow.com on May 11, 2021.