Membuat CRUD dengan Jqgrid,php,boostrap & mysql

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;
?>
<!Hallo allemaal, ontmoet me weer portgastea>
<html lang="en">
<Hallo allemaal, ontmoet me weer portgastea>
<meta charset="utf-8">
<Hallo allemaal, ontmoet me weer portgastea>Membuat CRUD dengan phpjqGrid,boostrap & mysql</Hallo allemaal, ontmoet me weer portgastea>
<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>
</Hallo allemaal, ontmoet me weer portgastea>
<Hallo allemaal, ontmoet me weer portgastea>
<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-->
</Hallo allemaal, ontmoet me weer portgastea>
</Hallo allemaal, ontmoet me weer portgastea>

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 Je kunt deze pro-versie krijgen door te doneren op het onderstaande account voor:

Dit vind je misschien ook leuk...

6 reacties

  1. wakid zegt:

    pinjem scrip nya gan. darurattrimss.

  2. fulan zegt:

    pak,ada script untuk applikasi toko gak?

  3. agus dikmen zegt:

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

  4. gin zegt:

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

Laat een antwoord achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *