PHP laravel framework using Adminlte template to write Web site background interface _php Skills

Adminlte is a bootstrap 3.x free advanced management Control Panel theme, fully responsive management, suitable for many screen resolutions from small mobile devices to large desktops.

Characteristics of Adminlte:

• Fully responsive
• A dashboard that can be categorized
• 18 Plugins and 3 custom Plug-ins
• 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 new Laravel
If you are not sure you 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 new Laravel project named MyApp, and if you succeed you can see the following picture

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 you're done, you'll find a Bower_componets folder, and in this folder you'll see Adminlte

Convert Adminlte starter.html to Blade templates
Laravel here uses a good template engine blade, in order to make the most of the blade, we need to apply some of the regular 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 the bower_components/admin-lte/starter.html into our view template, and link the relevant links to our Adminlte's corresponding directory, which is my initial setup:

<script src= "{{asset ("/bower_components/adminlte/plugins/jquery/jquery-2.1.4.min.js)}} "></script>
<!--Bootstrap 3.3.5-->
<script src= "{{Asset ("/bower_components/adminlte/bootstrap/js/ Bootstrap.min.js ")}" ></script>
<!--adminlte App-->
<script src= "{Asset ("/bower_ Components/adminlte/dist/js/app.min.js ")}}" ></script>

Similar to this, the CSS and JS RELATED links to the corresponding directory, and then we through the localhost:8000/admin to view the changes in the page, this time the page into the following figure:

Now that we have all the resources using Adminlte, the following adds the final finishing work to our main view, and I will separate this template for three files, sidebar.blade.php, header.blade.php, and footer.blade.php
The contents of these three files are the Admin_template.blade.phpheader part and the aside part and the footer part, and then the three parts are intercepted and put into three files.

The final touches of the work
now that we have separated our templates individually, we need to set our initial admin_template.blade.php
Templates for dynamic loading of content, as follows:

<! DOCTYPE html>  

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

Test page

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

1. Create test.blade.php

@extends (' dashboard ') @section (' content ') <div class= ' Row ' > <div class= ' col-md-6 ' > <!--Box--> &L T;div class= "box box-primary" > <div class= "Box-header with-border" > 
 
 
 

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 ' =& Gt ' Design New Dashboard ',
      ' progress ' => ', '
      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 errors should be shown in the following figure