This is a step-by-step tutorial of how to integrate SmartAdmin, or any other Bootstrap them, 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 use PHP version, and specifically, the PHP Ajax version.
What you will need
- Acquire a copy of phpGrid. You can use either the free, phpGrid Lite or get phpGrid full version here.
- Get Bootstrap SmartAdmin. Many Bootstrap themes are also available for free on the Internet.
Now that you’ve downloaded both, let’s get started.
1. Folder Structure
As mentioned earlier, we will use SmartAdmin’s PHP version. Inside PHP_version folder, you will find two subfolders, PHP_Ajax_version and PHP_HTML_version. Here, only PHP_Ajax_version folder is copied to web root directory and renamed as smartAdmin_AJAX (see below).
Secondly, save our phpGrid folder in smartAdmin_AJAX as shown. However, you can save it to any folder.
2. Update phpGrid conf.php
Before you begin coding using phpGrid, you must specify database information in conf.php, phpGrid configuration file in which we specify the following values:
- Database connection information,
- SEVER_ROOT,
- THEME
It’s important that we set THEME value as “NONE”. The reason is that 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: http://phpgrid.com/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.
<?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.
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 SmartAdmin ajax/dashboard.php. . This call can be in any file in SmartAdmin ajax folder.
<?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 inside phpGrid/examples/SampleDB folder.
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 demo here.
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.
<style>
/* phpGrid to re-expand 100%. Needed when page is loaded in Ajax and there’s sidebar */
div.ui-jqgrid.ui-widget.ui-widget-content.ui-corner-all{
width: 100% !important;
overflow: auto;
}/* prevent Bootstrap CSS conflict by reseting phpGrid header CSS */
.ui-jqgrid .ui-jqgrid-htable th div {
position: inherit;
height: initial;
}.ui-jqgrid .ui-jqgrid-view input, .ui-jqgrid .ui-jqgrid-view select, .ui-jqgrid .ui-jqgrid-view textarea, .ui-jqgrid .ui-jqgrid-view button {
width: 100%;
height: 100%;
padding:0px;
}/* FORM edit */
.ui-jqdialog-content table.EditTable input{
width: 90%;
}
.ui-jqdialog-content table.EditTable select{
width: 95%;
}
.ui-jqdialog-content table.EditTable textarea{
width:90%;
}
</style>
That’s it. You now have a fully functional and great-looking datagrid in your Bootstrap.
Thanks for reading. If you enjoyed this article, please hit that clap button 👏 to help others find it and follow me on Twitter.
