phpGrid, Laravel and Bootstrap (version 2)

phpgrid laravel5 bootstrap3 full edit
Note this tutorial has an updated version. Check out the latest, much improved Dashboard + Laravel 10 + Bootstrap 5 integration demo please!

Introduction

This tutorial will begin by walking you through the integration of the Laravel 5 and Bootstrap 3 themes. Afterwards, we will show you how to add a PHP datagrid. If the Laravel and the Bootstrap theme are already up and running on your server, you can skip directly to “Create ‘dashboard.blade.php’ Child Template View” or “Where is phpGrid?”.

Install Laravel 5 (with Composer)

Let’s get started. Laravel 5 has the following system requirements.

  • PHP >= 5.4
  • Mcrypt PHP Extension
  • OpenSSL PHP Extension
  • Mbstring PHP Extension
  • Tokenizer PHP Extension

Please note that these Laravel 5 system requirements apply to both the web and the command line interface. There’s always a possibility that the version of PHP used in the command line may be different from the PHP running on the web server. If this is the case, modify your PHP alias to point to the same PHP executable for both. Finally, download a copy of phpGrid from download page for later use.

It is highly recommended that you use Composer to install Laravel. In order to keep the code lightweight, Laravel does not come prepackaged with any third-party libraries. Instead, it relies on Composer to manage any dependencies. Learn more about how to install Composer here.

To install Laravel, in the command line, go to the web root (e.g. /www), and execute the following command:

1
#composer create-project laravel/laravel --prefer-dist

To run Laravel, certain permissions need to be configured. Allow the web server to have write access to subfolders under the “storage” and “vendor” folders.

laravel5-folder-permission

Laravel, AdminLTE Integration

In a previous phpGrid Bootstrap integration tutorial, we used the “Bootstrap SmartAdmin” theme. Here,  we will use another theme called “AdminLTE“. You can preview it at https://almsaeedstudio.com/AdminLTE. If you are looking for alternative theme, we recommend the premium high qualify bootstrap themes from WrapBoottrap. While they are not free, it well worths the investment for developing beautiful and professional looking web apps.

Technically, AdminLTE works without the Laravel framework. But, by integrating it with Laravel, you get the added benefit of MVC routing and views. This ultimately results in cleaner, and more importantly, scalable code. The downside is that one must edit each AdminLTE page to covert it to Laravel views, preferably by using the Blade template.

 

Convert AdminLTE “starter.html” to Laravel View

 

At this point, we need to convert AdminLTE’s default “starter.html” to Laravel views so we can host our PHP datagrid. This consists of splitting the file into several “include” files – which will then be called by the startup routine.

  1. First, download AdminTLE from almsaeedstudio.com and extract the files. Copy the folders “bootstrap”, “dist”, “plugins”, and file “starter.html” to the Laravel “public” folder. Open “starter.html” and copy its contents to the clipboard. This will be used as our starting point to create the new Laravel view.

    laravel5-adminlte-integration

  2. Create a new view called “admin.blade.php”. (Note that all Blade templates should use the “.blade.php” extension.) Paste the text we copied from “starter.html” in the previous step and save the new view in “resources/views”. This will be the admin default layout from which the various Blade templates will be derived.convert-admin-views
  3. We now need to divide the code in “admin.blade.php” and copy it to a series of reusable sub-views. Create a new folder called “includes” under “resource/views”. This folder will be used to store these admin sub-views.phpgrid-laravel5-bootstrap3-includes-subviews
  4. Cut out the “<header>”” section and paste it as a new view which we will call “header.blade.php”. Change any hyperlinks or file references to use the Laravel “asset” help function. Save the new file in the “includes” folder.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    <!-- Main Header -->
    <header class="main-header"><!-- Logo -->
    <a class="logo" href="index2.html">
    <!-- mini logo for sidebar mini 50x50 pixels -->
    <span class="logo-mini"><b>A</b>LT</span>
    <!-- logo for regular state and mobile devices -->
    <span class="logo-lg"><b>Admin</b>LTE</span>
    </a><!-- Header Navbar --><nav class="navbar navbar-static-top"><!-- Sidebar toggle button-->
    <a class="sidebar-toggle" href="#" data-toggle="offcanvas">
    <span class="sr-only">Toggle navigation</span>
    </a>
    <!-- Navbar Right Menu -->
    <div class="navbar-custom-menu">
    <ul class="nav navbar-nav">
    <ul class="nav navbar-nav"><!-- Messages: style can be found in dropdown.less-->
        <li class="dropdown messages-menu"><!-- Menu toggle button -->
    <a class="dropdown-toggle" href="#" data-toggle="dropdown">
    <i class="fa fa-envelope-o"></i>
    <span class="label label-success">4</span>
    </a>
    <ul class="dropdown-menu">
        <li class="header">You have 4 messages</li>
        <li><!-- inner menu: contains the messages -->
    <ul class="menu">
    <ul class="menu">
        <li><!-- start message -->
    <div class="pull-left"><!-- User Image -->
    <img class="img-circle" src="{{ asset('dist/img/user2-160x160.jpg') }}" alt="User Image" /></div>
    <!-- Message title and timestamp -->
    <h4>Support Team
    <small><i class="fa fa-clock-o"></i> 5 mins</small></h4>
    <!-- The message -->

    Why not buy a new awesome theme?</li>
    </ul>
    </ul>
    <!-- end message -->

    <!-- /.menu --></li>
        <li class="footer"><a href="#">See All Messages</a></li>
    </ul>
    </li>
    </ul>
    </ul>
    <!-- /.messages-menu -->

    <!-- Notifications Menu -->
    <ul class="nav navbar-nav">
    <ul class="nav navbar-nav">
        <li class="dropdown notifications-menu"><!-- Menu toggle button -->
    <a class="dropdown-toggle" href="#" data-toggle="dropdown">
    <i class="fa fa-bell-o"></i>
    <span class="label label-warning">10</span>
    </a>
    <ul class="dropdown-menu">
        <li class="header">You have 10 notifications</li>
        <li><!-- Inner Menu: contains the notifications -->
    <ul class="menu">
    <ul class="menu">
        <li><!-- start notification -->
    <a href="#">
    <i class="fa fa-users text-aqua"></i> 5 new members joined today
    </a></li>
    </ul>
    </ul>
    <!-- end notification --></li>
        <li class="footer"><a href="#">View all</a></li>
    </ul>
    </li>
    </ul>
    </ul>
    <!-- Tasks Menu -->
    <ul class="nav navbar-nav">
    <ul class="nav navbar-nav">
        <li class="dropdown tasks-menu"><!-- Menu Toggle Button -->
    <a class="dropdown-toggle" href="#" data-toggle="dropdown">
    <i class="fa fa-flag-o"></i>
    <span class="label label-danger">9</span>
    </a>
    <ul class="dropdown-menu">
        <li class="header">You have 9 tasks</li>
        <li><!-- Inner menu: contains the tasks -->
    <ul class="menu">
    <ul class="menu">
        <li><!-- Task item -->
    <a href="#">
    <!-- Task title and progress text --></a>
    <h3>Design some buttons
    <small class="pull-right">20%</small></h3>
    <!-- The progress bar -->
    <div class="progress xs"><!-- Change the css width attribute to simulate progress -->
    <div class="progress-bar progress-bar-aqua" style="width: 20%;"><span class="sr-only">20% Complete</span></div>
    </div></li>
    </ul>
    </ul>
    <!-- end task item --></li>
        <li class="footer"><a href="#">View all tasks</a></li>
    </ul>
    </li>
    </ul>
    </ul>
    <!-- User Account Menu -->
    <ul class="nav navbar-nav">
    <ul class="nav navbar-nav">
        <li class="dropdown user user-menu"><!-- Menu Toggle Button -->
    <a class="dropdown-toggle" href="#" data-toggle="dropdown">
    <!-- The user image in the navbar-->
    <img class="user-image" src="{{ asset('dist/img/user2-160x160.jpg') }}" alt="User Image" />
    <!-- hidden-xs hides the username on small devices so only the image appears. -->
    <span class="hidden-xs">Alexander Pierce</span>
    </a>
    <ul class="dropdown-menu">
    <ul class="dropdown-menu"><!-- The user image in the menu -->
        <li class="user-header"><img class="img-circle" src="{{ asset('dist/img/user2-160x160.jpg') }}" alt="User Image" />Alexander Pierce - Web Developer
    <small>Member since Nov. 2012</small></li>
    </ul>
    </ul>
    <!-- Menu Body -->
    <ul class="dropdown-menu">
    <ul class="dropdown-menu">
        <li class="user-body">
    <div class="col-xs-4 text-center"><a href="#">Followers</a></div>
    <div class="col-xs-4 text-center"><a href="#">Sales</a></div>
    <div class="col-xs-4 text-center"><a href="#">Friends</a></div></li>
    </ul>
    </ul>
    <!-- Menu Footer-->
    <ul class="dropdown-menu">
        <li class="user-footer">
    <div class="pull-left"><a class="btn btn-default btn-flat" href="#">Profile</a></div>
    <div class="pull-right"><a class="btn btn-default btn-flat" href="#">Sign out</a></div></li>
    </ul>
    </li>
    </ul>
    </ul>
    <!-- Control Sidebar Toggle Button -->

    </div>
    </nav></header>
  5. Now, go back to “admin.blade.php” and cut out the “<aside>”” sidebar section and paste it as a new view called “sidebar.blade.php”. As in the previous step, change any hyperlinks or file references so they use the Laravel “asset” help function. Save this file in the “includes” folder.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!-- Left side column. contains the logo and sidebar --><aside class="main-sidebar"><!-- sidebar: style can be found in sidebar.less --><section class="sidebar"><!-- Sidebar user panel (optional) -->
    <div class="user-panel">
    <div class="pull-left image"><img class="img-circle" src="{{ asset('dist/img/user2-160x160.jpg') }}" alt="User Image" /></div>
    <div class="pull-left info">

    Alexander Pierce

    <!-- Status -->
    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>

    </div>
    </div>
    <!-- search form (Optional) -->

    <form class="sidebar-form" action="#" method="get">
    <div class="input-group"><input class="form-control" name="q" type="text" placeholder="Search..." />
    <span class="input-group-btn">
    <button id="search-btn" class="btn btn-flat" name="search" type="submit"><i class="fa fa-search"></i></button>
    </span></div>
    </form><!-- /.search form -->

    <!-- Sidebar Menu -->
    <ul class="sidebar-menu">
    <ul class="sidebar-menu">
        <li class="header">HEADER</li>
    </ul>
    </ul>
    <!-- Optionally, you can add icons to the links -->
    <ul class="sidebar-menu">
        <li class="active"><a href="#"><i class="fa fa-link"></i> Link</a></li>
        <li><a href="#"><i class="fa fa-link"></i> Another Link</a></li>
        <li class="treeview"><a href="#"><i class="fa fa-link"></i> Multilevel <i class="fa fa-angle-left pull-right"></i></a>
    <ul class="treeview-menu">
        <li><a href="#">Link in level 2</a></li>
        <li><a href="#">Link in level 2</a></li>
    </ul>
    </li>
    </ul>
    <!-- /.sidebar-menu -->

    </section><!-- /.sidebar -->

    </aside>
  6. Repeat these steps for the “<footer>”” and “<control>”” sidebar sections. Name the files “footer.blade.php” and “controlsidebar.blade.php” and “footer.blade.php”
    1
    2
    3
    4
    5
    6
    7
    8
    <!-- Main Footer -->

    <footer class="main-footer"><!-- To the right -->
    <div class="pull-right hidden-xs">Anything you want</div>
    <!-- Default to the left -->
    <strong>Copyright © 2015 <a href="#">Company</a>.</strong> All rights reserved.

    </footer>

    controlsidebar.blade.php

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <!-- Control Sidebar -->

    <aside class="control-sidebar control-sidebar-dark"><!-- Create the tabs --><!-- Tab panes -->
    <div class="tab-content"><!-- Home tab content -->
    <div id="control-sidebar-home-tab" class="tab-pane active">
    <h3 class="control-sidebar-heading">Recent Activity</h3>
    <ul class="control-sidebar-menu">
        <li><a>
    <i class="menu-icon fa fa-birthday-cake bg-red"></i></a>
    <div class="menu-info">
    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
    Will be 23 on April 24th

    </div></li>
    </ul>
    <!-- /.control-sidebar-menu -->
    <h3 class="control-sidebar-heading">Tasks Progress</h3>
    <ul class="control-sidebar-menu">
        <li>
    <h4 class="control-sidebar-subheading">Custom Template Design
    <span class="label label-danger pull-right">70%</span></h4>
    </li>
    </ul>
    <!-- /.control-sidebar-menu -->

    </div>
    <!-- /.tab-pane -->
    <!-- Stats tab content -->
    <div id="control-sidebar-stats-tab" class="tab-pane">Stats Tab Content</div>
    <!-- /.tab-pane -->
    <!-- Settings tab content -->
    <div id="control-sidebar-settings-tab" class="tab-pane"><form method="post">
    <h3 class="control-sidebar-heading">General Settings</h3>
    <div class="form-group"><label class="control-sidebar-subheading">
    Report panel usage
    <input class="pull-right" checked="checked" type="checkbox" />
    </label>Some information about this general settings option</div>
    <!-- /.form-group -->

    </form></div>
    <!-- /.tab-pane -->

    </div>
    </aside><!-- Add the sidebar'
    s background. This div must be placed
    immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
  7. Add the “include” statements for the newly-created sub-views in “admin.blade.php”, as shown below
    1
    2
    3
    4
    @include('includes.header');
    @include('includes.sidebar');
    @include('includes.footer');
    @include('includes.controlsidebar');
  8. Also in “admin.blade.php”, add the following section between sidebar and footer. Copy and past section <div class=”content-wrapper”>(see below) where we host the code in which phpGrid is rendered. Also include “@yield(‘content’)”” in <section class=”content”> section.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <div class="wrapper">

    @include('includes.header')
    @include('includes.sidebar')

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper"><!-- Content Header (Page header) -->
    <section class="content-header">
    <h1>Page Header
    <small>Optional description</small></h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
    </ol>
    </section><!-- Main content -->

    <section class="content"><!-- Your Page Content Here -->
    @yield('content')</section><!-- /.content -->

    </div>
    <!-- /.content-wrapper -->

    @include('includes.footer')
    @include('includes.controlsidebar')

    </div>
    <!-- ./wrapper -->
  9. Move the required Javascript found at the bottom of “starter.html” to the “<head>”” section (not “<header>”!) in “admin.blade.php”.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!– REQUIRED JS SCRIPTS --!>
    <!– jQuery 2.1.4 –->
    <script src="”{{"></script>
     <!– Bootstrap 3.3.2 JS –>
    <script src="”{{" type="”text/javascript”"></script>
    <!– AdminLTE App –>
    <script src="”{{" type="”text/javascript”"></script>
    <!– Optionally, you can add Slimscroll and FastClick plugins.
    Both of these plugins are recommended to enhance the
    user experience. Slimscroll is required when using the
    fixed layout. –>
  10. We are almost done. In “admin.blade.php”, be sure to change any hyperlinks or file references, so they point to the Laravel “asset” help function.

 

Create “dashboard.blade.php” Child Template View

 

We just created our admin layout by dividing the file “starter.html” into various views and sub-views and saving them as PHP files. “admin.blade.php” is our parent layout – the one that is used as a basis for all other admin layouts and the file from which these other layouts will extend. Variable “$grid” holds the PHP datagrid object passed from route next.

1
2
3
4
5
@extends('admin')

@section('content')
{!! $grid !!}
@endsection

 

Where Is phpGrid??

 

Up until now, the walk-through has addressed converting AdminLTE theme to Laravel views. Everything in Laravel 5 is autoloaded using PSR-4 within the “app/” directory. This can be seen in the “composer.json” file.

Although we foresee the capability in future releases, for backward compatibility reasons, phpGrid currently does not support the namespace construct. Without namespace support, we cannot call our C_DataGrid class from directly within the Laravel Controller. – The workaround is to call phpGrid directly from a route file. For this reason, instead of storing phpGrid in the app/ directory, we place the phpGrid components in the public folder.

The correct path to put phpGrid is in the Laravel “public” folder, not “app” folder.
X

So, go ahead and download a copy of phpGrid if you haven’t already done so, and extract the files into the Laravel “public” folder. Complete the installation by configuring the “conf.php” file. For instructions on how to do this, see setup phpGrid configuration.

Once you have completed the previous step, in the Laravel route file “app/Http/routes.php”, copy and paste the following code snippet:

1
2
3
4
5
6
7
8
9
10
11
12
Route::get(‘dashboard’, function () {
require_once(public_path() ./phpGrid_Lite/conf.php”);

$dg = new C_DataGrid(“SELECT * FROM orders”, “orderNumber”, “orders”);
$dg->enable_edit(“INLINE”, “CRUD”);
$dg->enable_autowidth(true)->enable_autoheight(true);
$dg->set_theme(‘cobalt-flat’);
$dg->display(false);

$grid = $dg -> get_display(true); // do not include required javascript libraries until later with with display_script_includeonce method.
return view(‘dashboard’, [‘grid’ => $grid]);
});

That’s all there is to it!

 

Where is the controller?

 

Where is the Laravel controller?You may ask, “Where is the Laravel controller for our view?” The answer is it is simply not needed for our datagrid. The route we created in a previous step essentially controls the view for us. In a perfect world, the controller would be stored where all logic and pass information for rendering views would be handled. However, phpGrid’s current lack of “namespace” support makes it impossible for us to call the phpGrid library from within the Laravel Controller. In a future phpGrid release which offers “namespace” support, this workaround will no longer be necessary.

 

phpgrid-laravel5-bootstrap3-full-edit

 

 

 

 


Reference: