PHP laravel framework using Adminlte template to write the site background interface, laraveladminlte_php tutorial

Source: Internet
Author: User
Tags php framework

PHP's Laravel framework uses Adminlte templates to write Web site background interfaces, Laraveladminlte


Adminlte is a free advanced management Control Panel theme based on Bootstrap 3.x, fully responsive management for a wide range of screen resolutions from small mobile devices to large desktops.

Features of Adminlte:

    • Fully responsive
    • A categorized instrument panel
    • 18 Plugins and 3 custom plugins
    • Light weight and fast
    • Compatible with most mainstream browsers
    • Full support for glyphicons,fontawesome and icons

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

Bower Install Admin-lte



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 Blade, in order to make fuller use of Blade, we need to apply some of the general common HTML start page to the Blade template, first create a view in the Resources/views folder, Named Admin_template.blade.php, and then we create a corresponding route for this page. As I have created below


Route::get (' admin ', function () {  return view (' Admin_template ');});

Then, copy the contents of bower_components/admin-lte/starter.html into our view template, and link the relevant links in our Adminlte to the corresponding directory, as follows is my preliminary settings:

 
  
 
  

Similarly, the CSS and JS RELATED links to the corresponding directory, and we see the page changes through Localhost:8000/admin, the page becomes such as:

Now that we have all the resources to use Adminlte, here's the final finishing touches on our main view, I'll separate this template for three files, sidebar.blade.php, header.blade.php, and footer.blade.php
The contents of these three files are admin_template.blade.phpheader part and aside part and footer part respectively, the three parts are intercepted and put into three files in turn.

The finishing touches work.
Now that we have separated our template personalization, we need to set our original admin_template.blade.php
Templates for dynamic loading of content, as follows:

Head>
 
  
 <title>{{$page _title or "Adminlte Dashboard"}}</title>
 
  
 
 
 
  
 
 
 
  
 
 
 
  
 
 
 
  
 
 
 
  
 
 
 
 
 @include (' header ')
 @include (' sidebar ')
  
  
 
    
 
   

{{$page _title or ' page title '}} {{$page _description or null}}

  1. Level
  2. Here
@yield (' content ') @include (' footer ')

Recent Activity

    • Langdon ' s Birthday

      Would be is on April 24th

Tasks Progress

    • Custom Template Design 70%

Stats Tab Content

In the code above, we added Contetn, which contains our main content, added page headings for different pages, renamed them to dashboard.blade.php now that the template is ready to use.

Test page

To verify what we've done before, I'll create a simple page

1. Create test.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. Create testcontroller.php

PHP Artisan Make:controller TestController--plain

Here is the Code section for this controller:

<?php  namespace App\http\controllers;  Use Illuminate\http\request;  Use app\http\requests;  Use App\http\controllers\controller;  Class TestController extends Controller  {public   function index () {   $data [' tasks '] = [     [      ' name ' = > ' Design New Dashboard ',      ' progress ' + ' "and '",      ' color ' = ' danger '     ],     [      ' name ' = ' = '] Create Home Page ',      ' progress ' = ' + ',      ' color ' = ' warning '     ],     [      ' name ' = ' = ' Some Other Task ',      ' progress ' = ' + ',      ' color ' = ' success '     ],     [      ' name ' = = ' Start Building Website ',      ' progress ' = ' + ',      ' color ' + ' info ',     [      ' name ' = ' = ' Develop an Awesome Algorithm ',      ' progress ' + ', '      color ' = ' success '     ]   ;   Return view (' Test ')->with ($data);  } }

3. Create the corresponding route

Route::get (' Test ', ' Testcontroller@index ');

4. Open the corresponding page, if you do not have the error should be as shown

Articles you may be interested in:

    • In-depth parsing of event events operations in PHP's Laravel framework
    • PHP's Laravel framework combined with MySQL and Redis database deployment
    • Methods for using Message Queuing queue and asynchronous queues in PHP's Laravel framework
    • Eloquent Object relational mapping in PHP's Laravel framework using
    • PHP Framework Laravel Learning Experience
    • A comprehensive understanding of PHP's popular development Framework Laravel
    • Nginx Run PHP Framework laravel configuration file sharing
    • PHP IDE phpstorm Configuration supports friendly Laravel code hints method
    • Develop Laravel with Phpstorm
    • PHP Development Framework Laravel installation and configuration tutorial
    • PHP Framework Laravel Two tips

http://www.bkjia.com/PHPjc/1113726.html www.bkjia.com true http://www.bkjia.com/PHPjc/1113726.html techarticle PHP laravel Framework using the Adminlte template to write the site background interface, Laraveladminlte Adminlte is a bootstrap 3.x-based free advanced management Control Panel theme, fully responsive ...

  • Related Article

    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.