Membuat CRUD dengan Jqgrid,php,boostrap & mysql

by · May 23, 2015

Jqgrid adalah plugin dari Jquery yang digunakan untuk manipulasi data menggunakan framework jquery. Jqgrid memiliki fungsi antara lain load data, search, edit delete dan sebagainya. Apabila kita biasa menampilkan data dalam bentuk tabel biasa, maka dengan menggunakan Jqgrid, data akan ditampilkan menjadi lebih menarik dan dinamis.

Ok tutorial kali ini saya akan mencoba membuat Jqgrid mengambil data dari mysql

Buat database nya dengan nama crudphpgrid dan buat tabel dengan nama client seperti dibawah ini

CREATE TABLE IF NOT EXISTS `clients` (
`client_id` int(11) NOT NULL,
  `name` char(120) DEFAULT NULL,
  `gender` varchar(255) DEFAULT NULL,
  `company` varchar(255) DEFAULT NULL
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=97 ;
 
--
-- Dumping data for table `clients`
--
 
INSERT INTO `clients` (`client_id`, `name`, `gender`, `company`) VALUES
(90, 'andez', 'laki-laki', 'PT. Andeznet'),
(91, 'steven', 'laki-laki', 'PT. wijaya'),
(93, 'dina', 'perempuan', 'PT. UNTUNG TERUS '),
(94, 'agung', 'laki-laki', 'PT. ANGIN RIBUT'),
(95, 'SINTHA', 'perempuan', 'PT. ADEM TRUS'),
(96, 'WAHYU', 'laki-laki', 'PT. LUNTANG LANTUNG SEJAHTERA');
 
--
-- Indexes for dumped tables
--
 
--
-- Indexes for table `clients`
--
ALTER TABLE `clients`
 ADD PRIMARY KEY (`client_id`);
 
--
-- AUTO_INCREMENT for dumped tables
--
 
--
-- AUTO_INCREMENT for table `clients`
--
ALTER TABLE `clients`
MODIFY `client_id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=97;

Buat file php baru melalui notepad / Editor lainya bernama config.php atau terserah anda

copy script di bawah ini,

<?php
// PHP Grid database connection settings
define("PHPGRID_DBTYPE","Mysql"); // or mysqli
define("PHPGRID_DBHOST","localhost");
define("PHPGRID_DBUSER","root");
define("PHPGRID_DBPASS","12345");
define("PHPGRID_DBNAME","crudphpgrid");
 
// Automatically make db connection inside lib
define("PHPGRID_AUTOCONNECT",0);
 
// Basepath for lib
define("PHPGRID_LIBPATH",dirname(__FILE__).DIRECTORY_SEPARATOR."lib".DIRECTORY_SEPARATOR);

Lalu buat file php baru dengan nama index.php / terserah anda

<?php
// include db config
include_once("config.php");
// Seting-an Database anda
mysql_connect('localhost','root','12345');
mysql_select_db(PHPGRID_DBNAME);
// include dan membuat object
include(PHPGRID_LIBPATH."inc\jqgrid_dist.php");
$g = new jqgrid();
// seting tabel untuk CRUD sesuai dengan nama tabel
$g->table = "clients";
$grid["caption"] = "Daftar Nama Client";
$grid["form"]["position"] = "center";
$grid["autowidth"] = true;
$grid["autoresize"] = true; // responsive effect
$g->set_options($grid);
$col = array();
$col["title"] = "Id"; // nama kolom yang akan ditampilkan
$col["name"] = "client_id"; // nama colom client_id diambil dari database mysql
$col["editable"] = true;
$col["width"] = "30";
$cols[] = $col;
$col = array();
$col["title"] = "Nama"; // nama kolom yang akan ditampilkan
$col["name"] = "name"; // nama colom name diambil dari database mysql
$col["editable"] = true;
$col["required"] = true;
$cols[] = $col;
$col = array();
$col["title"] = "Jeni Kelamin"; // nama kolom yang akan ditampilkan
$col["name"] = "gender"; // nama colom gender diambil dari database mysql
$col["editable"] = true;
$cols[] = $col;
$col = array();
$col["title"] = "Perusahaan"; // nama kolom yang akan ditampilkan
$col["name"] = "company"; // nama colom company diambil dari database mysql
$col["editable"] = true;
$col["editoptions"] = array("defaultValue" => "Default Company");
$cols[] = $col;
$g->set_columns($cols);
$g->set_actions(array(  // untuk melakukan aksi
"add"=>true,
"edit"=>true,
"delete"=>true,
"clone"=>true,
"rowactions"=>true,
"search" => "advance",
"showhidecolumns" => false
)
);
// untuk menampilkan tabel
$tampil = $g->render("list1");
// untuk Tema
$themes = array("black-tie","blitzer","cupertino","dark-hive","dot-luv","eggplant","excite-bike","flick","hot-sneaks","humanity","le-frog","mint-choc","overcast","pepper-grinder","redmond","smoothness","south-street","start","sunny","swanky-purse","trontastic","ui-darkness","ui-lightness","vader");
$i = rand(0,8);
if (is_numeric($_GET["themeid"]))
$i = $_GET["themeid"];
else
$i = 14;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Membuat CRUD dengan phpjqGrid,boostrap & mysql</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" media="screen" href="lib/js/themes/<?php echo $themes[$i] ?>/jquery-ui.custom.css">
<link rel="stylesheet" type="text/css" media="screen" href="lib/js/jqgrid/css/ui.jqgrid.css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="lib/js/jqgrid/css/ui.bootstrap.jqgrid.css">
<script src="lib/js/jquery.min.js" type="text/javascript"></script>
<script src="lib/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="lib/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="lib/js/themes/jquery-ui.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div class="row-fluid">
<div class="span12">
<div style="margin:10px">
<form method="get">
Pilih Theme: <select name="themeid" onchange="form.submit()">
<?php foreach($themes as $k=>$t) { ?>
<option value=<?php echo $k?> <?php echo ($i==$k)?"selected":""?>><?php echo ucwords($t)?></option>
<?php } ?>
</select> -
Anda bisa custum theme di (<a href="http://jqueryui.com/themeroller">jqueryui.com/themeroller</a>).
</form>
<?php echo $tampil?> <!--untuk menampilkan tabel-->
</div>
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="alert alert-info">
<a name="contact"></a>
<h2>www.andeznet.com</h2>
<p class="text-info">Gudang Teknologi & Informasi</p>
<p>&copy; <a href="http://andeznet.com">www.andeznet.com</a>&nbsp<?php echo date("Y");?></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
</div><!--/row-->
</body>
</html>

Setalah itu anda download boostrap & jqgrid, lalu masukan folder boostrap & jqgrid di directory htdocs anda . lalu jalankan localhost di browser anda jika sudah benar maka akan tampil seperti gambar dibawah ini :

tutorial jqgrid

Ok sekian tutorial dari saya untuk script lengkap nya bisa anda download disini

Tags:

You may also like...

6 Responses

  1. wakid says:
    August 10, 2015 at 7:55 pm

    pinjem scrip nya gan. darurat… trimss.

    Reply
  2. fulan says:
    October 28, 2015 at 4:05 am

    pak,ada script untuk applikasi toko gak?

    Reply
  3. agus dikmen says:
    November 13, 2015 at 6:38 am

    Mas, kalau pada kolom perusahaan menggunakan componen combobox bisa nggak yach? please

    Reply
  4. gin says:
    December 14, 2015 at 8:09 pm

    kalau mau setting query contoh “select * from user where id=’123′” gimana?

    Reply

Leave a Reply

Your email address will not be published.