Tunggu Sebentar ...

Contoh Sederhana Datagrid Jeasyui - PHP

Ditulis oleh

Catatan ini tentang jquery easyui, khususnya membuat datagrid sederhana dengan jeasyui. Dan mengambil datanya dengan PHP Mysql. Data yang diambil berupa json. Untuk pertamakalinya, berarti dibutuhkan jeasyui ini. Silakan download terlebih dahulu jika belum ada. Sebenarnya, contoh dan tutorialnya sudah ada di situsnya. Dalam catatan ini, justru mengambil contoh dari situs tersebut, yaitu linknya disini.

Pertanyaannya kenapa saya buat lagi contoh disini padahal disitusnya sudah ada ? sebenarnya simpel aja, pada contoh disana, data yang diambil sudah langsung data json. Bukan lagi data yang diolah dari database dengan php dan mysql. Tentunya dalam contoh tersebut, data sudah tersedia dalam bentuk file. Sedangkan yang saya buat disini adalah mengambil data dari database, lalu ketika sudah diambil baru di convert ke format json. Jadi tidak tergantung lagi pada data berupa file.

Saya buat 2 file, yaitu :

1. datagridjeasyui.php. Isinya berupa code tempat meletakkan datagridnya.

2. datagrid_data.php. Isinya berupa code untuk menampilkan data dari database dengan php - mysql. Lalu data tersebut di convert ke format json dengan memanfaankan json_encode.

#datagridjeasyui.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DataGrid Jeasyui - DM</title>
    <!—- ini sesuaikan aja path jeasyui yang didownload —>
    <link rel="stylesheet" type="text/css" href="jeasyui144/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jeasyui144/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jeasyui144/themes/color.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="jeasyui144/jquery.easyui.min.js"></script>
</head>
<body>
  <h2>DataGrid Jeasyui</h2>
  <table id="tt" class="easyui-datagrid"
		 title = "Data Grid JeasyUI"
         style="width:750px;height:250px"
         url="datagrid_data.php" method="get"
         singleSelect="true">
     <thead>
       <tr>
          <th field="product_code" width="80">Kode</th>
          <th field="product_name" width="300">Produk</th>
          <th field="quantity" width="80" align="right" >Stok</th>
          <th field="price" width="80" align="right">Harga</th>
       </tr>
     </thead>
   </table>
   
</html>

Begitu code selengkapnya pada file datagridjeasyui.php. Terdapat pada code

<table id="tt" class="easyui-datagrid"
       title = "Data Grid JeasyUI"
       style="width:750px;height:250px"
       url="datagrid_data.php" method="get"
       singleSelect="true">

fungsi url="datagrid_data.php" adalah mengambil data dari datagrid_data.php. Yang mana file tersebut berisi code untuk mengambil data dari database dan di convert ke format json. Sedangkan contoh pada situs tersebut adalah url="data/datagrid_data.json". Seperti ini jika file datagrid_data.json dibuka dengan notepad++

Nah seperti gambar diatas jika file data json nya dibuka dengan editor. Sedangkan yang dibutuhkan itu adalah mengambil data dari database, bukan dari file. Maka dibutuhkan file php yang berfungsi untuk mengambil data dari database. Tetapi karena jeasyui ini harus berupa json, maka setelah data dari database diambil, maka langsung di format ke json dengan json_encode, dan php sudah menyediakannya.

#2. datagrid_data.php

<?php
   /************** database nya disesuaikan ***********/
   $server = "localhost";
   $user   = "root";
   $pass   = "usbw";
   $db     = "test";
   
   $database = new mysqli($server, $user, $pass, $db); 
   /****************************************************/
   $data = array();
   $result = array();
   $sql  = "select * from product";
   
   if($res = $database->query($sql)) {
      $jmldata = $res->num_rows; //jumlah data
      while ($row = $res->fetch_assoc()) {
	   $data[] = $row;
      }
   }
   $result = array(
     'total' => $jmldata,
     'rows'  => $data
   );
   echo json_encode($result);
   
   /* tutup koneksinya */
   $database->close();

Nah berikut diatas adalah code dari datagrid_data.php. Dari code tersebut mengambil data dari database, dengan nama databasenya "test". Sedangkan table yang diambil adalah table product. Dalam hal ini saya buat sendiri contoh table product nya. Tidak berdasarkan contoh dari situs tersebut. Hasilnya seperti gambar dibawah ini :

Nah jika datagrid_data.php diakses url nya, contoh misalnya http://localhost:8080/test/datagrid_data.php maka data sudah berupa json. Seperti ini :

{"total":19,"rows":[{"product_id":"28","product_code":"P0001","product_name":"Product 1","quantity":"939","price":"1100","status":"1","date_added":"2009-02-03 16:06:50","date_modified":"2011-09-30 01:05:39"},{"product_id":"29","product_code":"P0002","product_name":"Product 2","quantity":"999","price":"1279","status":"1","date_added":"2009-02-03 16:42:17","date_modified":"2011-09-30 01:06:08"},{"product_id":"30","product_code":"P0003","product_name":"Product 3","quantity":"7","price":"1100","status":"1","date_added":"2009-02-03 16:59:00","date_modified":"2011-09-30 01:05:23"},{"product_id":"31","product_code":"P0004","product_name":"Product 4","quantity":"1000","price":"1080","status":"1","date_added":"2009-02-03 17:00:10","date_modified":"2011-09-30 01:06:00"},{"product_id":"32","product_code":"P0005","product_name":"Product 5","quantity":"999","price":"1100","status":"1","date_added":"2009-02-03 17:07:26","date_modified":"2011-09-30 01:07:22"},{"product_id":"33","product_code":"P0006","product_name":"Product 6","quantity":"1000","price":"1200","status":"1","date_added":"2009-02-03 17:08:31","date_modified":"2011-09-30 01:06:29"},{"product_id":"34","product_code":"P0007","product_name":"Product 7","quantity":"1000","price":"1100","status":"1","date_added":"2009-02-03 18:07:54","date_modified":"2011-09-30 01:07:17"},{"product_id":"35","product_code":"P0008","product_name":"Product 8","quantity":"1000","price":"1100","status":"1","date_added":"2009-02-03 18:08:31","date_modified":"2011-09-30 01:06:17"},{"product_id":"36","product_code":"P0009","product_name":"Product 9","quantity":"994","price":"1100","status":"1","date_added":"2009-02-03 18:09:19","date_modified":"2011-09-30 01:07:12"},{"product_id":"40","product_code":"P0010","product_name":"product 11","quantity":"970","price":"1101","status":"1","date_added":"2009-02-03 21:07:12","date_modified":"2011-09-30 01:06:53"},{"product_id":"41","product_code":"P0011","product_name":"Product 14","quantity":"977","price":"1100","status":"1","date_added":"2009-02-03 21:07:26","date_modified":"2011-09-30 01:06:44"},{"product_id":"42","product_code":"P0012","product_name":"Product 15","quantity":"990","price":"1100","status":"1","date_added":"2009-02-03 21:07:37","date_modified":"2011-09-30 00:46:19"},{"product_id":"43","product_code":"P0013","product_name":"Product 16","quantity":"929","price":"1500","status":"1","date_added":"2009-02-03 21:07:49","date_modified":"2011-09-30 01:05:46"},{"product_id":"44","product_code":"P0013","product_name":"Product 17","quantity":"1000","price":"2000","status":"1","date_added":"2009-02-03 21:08:00","date_modified":"2011-09-30 01:05:53"},{"product_id":"45","product_code":"P0014","product_name":"Product 18","quantity":"998","price":"3000","status":"1","date_added":"2009-02-03 21:08:17","date_modified":"2011-09-15 22:22:01"},{"product_id":"46","product_code":"P0015","product_name":"Product 19","quantity":"1000","price":"2000","status":"1","date_added":"2009-02-03 21:08:29","date_modified":"2011-09-30 01:06:39"},{"product_id":"47","product_code":"P0016","product_name":"Product 21","quantity":"1000","price":"1100","status":"1","date_added":"2009-02-03 21:08:40","date_modified":"2011-09-30 01:05:28"},{"product_id":"48","product_code":"P0017","product_name":"product 20","quantity":"995","price":"1100","status":"1","date_added":"2009-02-08 17:21:51","date_modified":"2011-09-30 01:07:06"},{"product_id":"49","product_code":"P0018","product_name":"SAM1","quantity":"5","price":"1199","status":"1","date_added":"2011-04-26 08:57:34","date_modified":"2011-09-30 01:06:23"}]}

 

Ditumpuk didalam berkas : Catatan Belajar , PHP , MySQL / Mysqli
Yang berkomentar (0)
Setiap komentar yang tampil adalah hasil dari persetujuan Admin

Komentar untuk "Contoh Sederhana Datagrid Jeasyui - PHP"