phpGrid, Laravel 5 and Bootstrap 3

Swift coder

5.00/5 (2 votes)

2 Jul 2015CPOL6 min read

24.7K

phpGrid, Laravel 5 and Bootstrap 3

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 PHP datagrid. If the Laravel and Bootstrap theme are already up and running on your server, you can skip directly to “Create ‘dashboard.blade.php’ Child Template View”.

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 the possibility your server could be running different versions of PHP in the command line than on the web server. If this is the case, modify your PHP alias to point to the same PHP executable for both. Lastly, acquire a copy of phpGrid from download page for later use.

It’s highly recommended to 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 on how to install Composer here.

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

Razor

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

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

Laravel, AdminLTE Integration

In a previous phpGrid Bootstrap integration tutorial, we used the Bootstrap SmartAdmin theme. In this tutorial, we will use a different theme called “AdminLTE“, an excellent and free Bootstrap 3 admin theme created by @Almasaeed2010. You can preview it at https://almsaeedstudio.com/AdminLTE.

Technically, AdminLTE works even without Laravel framework. But, by integrating it with Laravel, you get the added benefit of MVC routing and views, which ultimately results in cleaner, and more importantly, scalable code. However, the downside is that one must edit each AdminLTE page to covert it to Laravel views, preferably by using 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 will consist 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 file. Copy the folders “bootstrap”, “dist”, “plugins”, and file “starter.html” to 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 named “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, then 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, 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.

HTML

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

Now, go back to admin.blade.php and cut out the <aside> sidebar section and paste it into 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.

HTML

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

Repeat these steps for the <footer> and <control> sidebar sections. Name the files footer.blade.php and controlsidebar.blade.php.footer.blade.php.

XML

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

HTML

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

Add the “include” statements for the newly-created sub-views in admin.blade.php, as shown below:

PHP

@include('includes.header');
@include('includes.sidebar');
@include('includes.footer');
@include('includes.controlsidebar');

Also in admin.blade.php, add the section between sidebar and footer. Copy and paste section <div class=”content-wrapper”> (see below) where we will host the code in which phpGrid will be rendered. Also include @yield(‘content’) in <section class=”content”> section.

HTML

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

Move the required JavaScript found at the bottom of “starter.html” to <head> section (not <header>!) in admin.blade.php.

PHP

<!– 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, make sure to change any hyperlinks or file references to use 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” will be our parent layout – the one that will be used as a basis for all other admin layouts and the file from which these other layouts will extend. $grid is the variable that holds the PHP datagrid passed from route next.

PHP

@extends('admin')

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

Where Is phpGrid??

Up until now, the walk-through has addressed converting AdminLTE to Laravel views. Everything in Laravel 5 is autoloaded using PSR-4 within the app/ directory. You can also see this 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.

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:

PHP

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 display_script_includeonce method.
return view(‘dashboard’, [‘grid’ => $grid]);
});

That’s it. You can now run the demo.

Run Demo

Where is the Controller?

Now, you are probably going to ask, “Where is 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 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.

I hope this tutorial gives you a jump start on using phpGrid with Laravel.

Have a grid day!

Richard

References

The post phpGrid, Laravel 5 and Bootstrap 3 appeared first on phpGrid.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)