phpGrid, Twitter Bootstrap Integration Tutorial

This is a step-by-step tutorial of how to integrate SmartAdmin, or any other Bootstrap theme, with phpGrid.

SmartAdmin is a popular Bootstrap admin theme. It has modern flat design and responsive layout. SmartAdmin comes with 5 different versions: Pure HTML, AJAX Version, PHP version, Modular AngularJS, and ASP.NET MVC5 versions. For this example, we will use the PHP version, specifically, the PHP Ajax version.

What you will need

Download a copy of phpGrid. You can either use the free, phpGrid Lite, or get the full version of phpGrid here.
Get the Bootstrap theme SmartAdmin.

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.

1. Folder Structure

As mentioned earlier, we will use SmartAdmin’s PHP version. In the PHP_version folder, you will find two subfolders, PHP_Ajax_version andPHP_HTML_version. In this example, only PHP_Ajax_version folder is copied to the root directory and is renamed as smartAdmin_AJAX (see below).

Next, we save our phpGrid folder in smartAdmin_AJAX as shown. However, you can save it to any folder you choose.

2. Update phpGrid conf.php

Before you begin coding using phpGrid, you must specify the database information in conf.php, the phpGrid configuration file. Here, we specify the following values:

Database connection information,
SERVER_ROOT,
THEME

It is important that we set THEME value as “NONE”. We don’t need to provide a jQuery UI theme as Bootstrap already includes a theme. Using two jQuery themes will likely result in CSS conflicts and style inconsistency.

To learn more about phpGrid configuration, read the installation guide:/documentation/installation/

For the purposes of this demo, we will use a MySQL database. In the figure below, you can see an example of the necessary database definitions as they appear in conf.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
define('PHPGRID_DB_HOSTNAME', 'localhost:3306');
define('PHPGRID_DB_USERNAME', 'root');
define('PHPGRID_DB_PASSWORD', '');
define('PHPGRID_DB_NAME', 'sampledb');
define('PHPGRID_DB_TYPE', 'mysql');
define('PHPGRID_DB_CHARSET','utf8');
define('SERVER_ROOT', '/smartAdmin_AJAX/phpGrid');
define('THEME', 'NONE');
// *** MUST SET TO FALSE WHEN DEPLOYED IN PRODUCTION ***
define('DEBUG', false);
/******** DO NOT MODIFY ***********/
require_once('phpGrid.php');
/**********************************/
?>

3. Edit Bootstrap lib/config.php

phpGrid requires PHP SESSION. To ensure that the PHP session starts properly, open the file “config.php” on the “SmartAdmin_AJAX/lib/” directory and copy and paste the following text at the very top of the file.

1	if (session_id() == ''){ session_start();}

The setup process is now complete.

4. Insert PHP Grid

In this demo, we will add a reference call to phpGrid directly in the file SmartAdmin “ajax/dashboard.php“. This call can be to any file in SmartAdmin ajax folder.

1
2
3
4
5
6
7
8
9
10

<?php
require_once(“../phpGrid/conf.php”);
$dg = new C_DataGrid(“SELECT * FROM orders”, “orderNumber”, “orders”);
$dg->enable_search(true);
$dg->enable_export(‘EXCEL’);
$dg->enable_edit(‘INLINE’);
$dg->set_col_hidden(‘comments’);
$dg->set_col_edittype(“status”, “select”, “Shipped:Shipped;Canceled:Cancelled;Open:Open;Pending:Pending”); $dg->enable_autowidth(true);
$dg->display();
?>

Note the first line that references phpGrid/conf.php.

“orders” is a database table name from our MySQL sample database. You can find the sample MySQL sample database by going to phpGrid/examples/SampleDBfolder.

Now visit the following URL to play around with your newly created PHP grid by using functions such as CRUD, search, and export. You can find a complete list of phpGrid demos here.

1	http://<YOUR WEB SERVER>/smartAdmin_AJAX/

5. Add Custom CSS (Optional)

At this point, the installation is complete. However, I refined jqGrid CSS so the final result would be more aesthetically pleasing. Here’s the final version of the CSS. Feel free to use this code on your page.

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

That’s it. You now have a fully functional and great-looking, responsive PHP grid in your Bootstrap. And it also works great on mobile devices!

Bootstrap Integration Framework Integration