I was bit caught up with work, So after a long time a post coming. This is an important one, to enable CRUD operations with nice looking Datagrid along with the CRUD (create, read, update, delete) functionality. For the sake of fun I have pulled data from IMDB top 250 movies first 25 movies and created the database
The end result we are looking for is like this – >
===============================Now the technical part=================================
Technology used
- PHP
- jQuery
- JSON
File / Folder Structure
- root folder
- ——-index.php
- ——-inc folder
- ——-js folder
code of index.php
<?php
/**
* PHP based Ajax Grid to update all our favourite imdb movies
*
* @author Shakeel Osmani <shakeel.osmani@gmail.com> - http://www.codecaninsters.in
* @version 1.0.0
* @license: open source so fork it up
*/
// open up DB connection
$conn = mysql_connect("localhost", "root", "root");
mysql_select_db("ajaxmoviedb");
// set your db encoding -- for ascent chars (if required)
mysql_query("SET NAMES 'utf8'");
// include and create object
include("inc/jqgrid_dist.php");
$g = new jqgrid();
// set few params
$grid["caption"] = "IMDB favourite movies list";
$grid["multiselect"] = true;
$g->set_options($grid);
// set database table for CRUD operations
$g->table = "movielist";
/*$col1 = array();
$col1['title'] = "ID";
$col1['name']= "id";
$col1['width']= "10";
$col1['editable'] = "false";
$cols[] = $col1;
$col2 = array();
$col2['title'] = "Name";
$col2['name']= "name";
$col2['width']= "50";
$col2['editable'] = "true";
$cols[] = $col2;
$col3 = array();
$col3['title'] = "Year of release";
$col3['name']= "year";
$col3['width']= "10";
$col3['editable'] = "True";
$cols[] = $col3;
$col4 = array();
$col4['title'] = "Summary";
$col4['name']= "summary";
$col4['width']= "500";
$col4['editable'] = "True";
$cols[] = $col4;
$col5 = array();
$col5['title'] = "IMDB Rating";
$col5['name']= "rating";
$col5['width']= "10";
$col5['editable'] = "true";
$cols[] = $col5;
$g->set_columns($cols); */ // Figuring this out till that time remains commented @shakeel
// render grid
$out = $g->render("list1");
?>
<!DOCTYPE html>
<html>
<head>
<title>Our favourite IMDB movies list</title>
<link rel="stylesheet" type="text/css" media="screen" href="js/themes/redmond/jquery-ui.custom.css"></link>
<link rel="stylesheet" type="text/css" media="screen" href="js/jqgrid/css/ui.jqgrid.css"></link>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/themes/jquery-ui.custom.min.js" type="text/javascript"></script>
<style>
body
{
width:100%;
background:#666;
}
#maincontainer
{
margin:0 auto;
width:70%;
margin-top:50px;
}
</style>
</head>
<body>
<div id="maincontainer">
<?php echo $out?>
</div>
</body>
</html>
As you can with an effort as little as that and a bit of setup, we are able to get such a nice result. The phpgrid library used is free and can be downloaded from here
There is another free option here
Hope you enjoyed this post and it will be useful
Thanks 🙂
shakeel osmani 