phpGrid, Laravel and Bootstrap (version 2)

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.

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.
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.
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.

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

<header class="main-header">
<a class="logo" href="index2.html">

<span class="logo-mini"><b>A</b>LT</span>

<span class="logo-lg"><b>Admin</b>LTE</span>
</a><nav class="navbar navbar-static-top">
<a class="sidebar-toggle" href="#" data-toggle="offcanvas">
<span class="sr-only">Toggle navigation</span>
</a>

<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<ul class="nav navbar-nav">
<li class="dropdown messages-menu">
<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>
<ul class="menu">
<ul class="menu">
<li>
<div class="pull-left">
<img class="img-circle" src="{{ asset('dist/img/user2-160x160.jpg') }}" alt="User Image" /></div>

<h4>Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small></h4>


Why not buy a new awesome theme?</li>
</ul>
</ul>


</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
</ul>
</ul>



<ul class="nav navbar-nav">
<ul class="nav navbar-nav">
<li class="dropdown notifications-menu">
<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>
<ul class="menu">
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a></li>
</ul>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
</ul>
</ul>

<ul class="nav navbar-nav">
<ul class="nav navbar-nav">
<li class="dropdown tasks-menu">
<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>
<ul class="menu">
<ul class="menu">
<li>
<a href="#">
</a>
<h3>Design some buttons
<small class="pull-right">20%</small></h3>

<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%;"><span class="sr-only">20% Complete</span></div>
</div></li>
</ul>
</ul>
</li>
<li class="footer"><a href="#">View all tasks</a></li>
</ul>
</li>
</ul>
</ul>

<ul class="nav navbar-nav">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">

<img class="user-image" src="{{ asset('dist/img/user2-160x160.jpg') }}" alt="User Image" />

<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<ul class="dropdown-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>

<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>

<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>


</div>
</nav></header>

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

<aside class="main-sidebar"><section class="sidebar">
<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


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

</div>
</div>


<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>


<ul class="sidebar-menu">
<ul class="sidebar-menu">
<li class="header">HEADER</li>
</ul>
</ul>

<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>


</section>

</aside>

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

<footer class="main-footer">
<div class="pull-right hidden-xs">Anything you want</div>

<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

<aside class="control-sidebar control-sidebar-dark">
<div class="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>

<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>


</div>


<div id="control-sidebar-stats-tab" class="tab-pane">Stats Tab Content</div>


<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></div>


</div>
</aside>
<div class="control-sidebar-bg"></div>

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');

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')


<div class="content-wrapper">
<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>

<section class="content">
@yield('content')</section>

</div>


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

</div>

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. –>

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.

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:

https://stackoverflow.com/questions/19064305/convert-html-code-to-laravelor-any-framework
https://maxoffsky.com/code-blog/laravel-first-framework-chapter-4-views/
https://almsaeedstudio.com/
https://codelution.com/development/web/integrating-bootstrap-admin-template-with-laravel-5/
Blade cheatsheet: https://laravel-recipes.com/recipes/248/knowing-all-the-blade-template-command
Laravel view: https://laravel.com/docs/master/views
https://tutsnare.com/pass-data-from-controller-to-view-laravel/
If you are looking for a more general introduction in PHP, you can check this PHP tutorial