In Laravel5. Use Adminlte in

Source: Internet
Author: User
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

    1. Laravel
    2. Adminlte 2.3.2
    3. Bower
    4. 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 }}

  1. Level
  2. 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.

  • Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.