Using Adminlte in laravel5.*
Using Adminlte in laravel5.*
Adminlte is a great simple background template built from HTML and CSS, and in this article I'll tell you how to integrate Adminlte and Laravel elegantly, and we can update and manage adminlte in a timely manner through Bower.
The tools we use
- Laravel
- Adminlte 2.3.2
- Bower
- Composer
Download a brand-new Laravel
If not very clear can go to the official website to view the document link
Here we can use the command line directly
composer create-project laravel/laravel myapp --prefer-dist
With this command we created a brand new Laravel project named MyApp, and if you succeed you can see the picture below
Download Adminlte via Bower
Go to the Myapp/public folder
cd myapp/public
Under this folder, execute the following command
Once done, you will find a Bower_componets folder, and in this folder you will see Adminlte
Convert Adminlte starter.html to Blade template
Laravel used a good template engine in this Blade, in order to make fuller use of Blade, we need to apply some general common HTML starting page to the Blade template, first create a view in the resources/views
folder, named admin_template.blade.php
, We then create a corresponding route for this page. As I have created below
Route::get('admin', function () { return view('admin_template'); });
Then, bower_components/admin-lte/starter.html
copy the contents into our view template and point the relevant links in the corresponding directory of our Adminlte
CSS and JS RELATED links to the corresponding directory, and then we localhost:8000/admin
look at the changes in the page, the page becomes such as:
Now that we have all the resources to use Adminlte, the following will add a final finishing touches to our main view, and I'll separate this template for three files,, sidebar.blade.php
header.blade.php
, andfooter.blade.php
The contents of these three files are the admin_template.blade.php
header part and the aside part and the footer part respectively, and the three parts are intercepted and placed into three files in turn.
The finishing touches work.
Now that we have separated our template personalization, we need to set up our initialadmin_template.blade.php
Templates for dynamic loading of content, as follows:
@include('header')
@include('sidebar')
{{ $page_title or "Page Title" }} {{ $page_description or null }}
- Level
- Here
@yield('content')
@include('footer')
In the code above, we added contetn
, here contains our main content, added the page title for different pages, rename it to dashboard.blade.php
now this blade layout is ready to use.
Test page
To verify what we've done before, I'll create a simple page
1. Createtest.blade.php
@extends (' dashboard ') @section (' content ')
Randomly Generated Tasks
@foreach ($tasks as $task){{$task [' name ']}} {{$task [' Progress ']}}%
@endforeach
Second Box
A separate section to add any kind of widgets. Feel free to explore all of adminlte widgets by visiting the demo page is on Almsaeed Studio.
@endsection
2. CreateTestController.php
php artisan make:controller TestController --plain
Here is the Code section for this controller:
' Design New Dashboard ', ' progress ' and ' the ', ' the ' color ' = ' Dange ' R '], [' name ' = = ' Create Home Page ', ' Progress ' = ' ", ' color ' = ' warning '], [' Name ' = ' Some other Task ', ' Progress ' =&G T ' + ', ' color ' = ' success '], [ ' Name ' = ' Start Building Website ', ' progress ' = ' 56 ', ' Color ' = ' info '], [' name ' = ' De ' Velop an Awesome algorithm ', ' progress ' + ', ' color ' and ' s ' Uccess ' ] ]; Return view (' Test ')->with ($data); } }
3. Create the corresponding route
Route::get('test', '[email protected]');
4. Open the corresponding page, if you do not have the error should be as shown
So the whole process is complete, of course, there is any problem can leave a message below.