Laravel 8 Layouts And Views Using AdminLTE3

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 and images 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.