[trick] Membuat Data Grid Dengan PHP Berorientasi Objek dan JEASYUI

Bismillah..

Langsung Saja Ya :

db

 

masuk ke codingnya :

1.index.php


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Transform DataGrid from Table - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/icon.css">
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/demo.css">
 <script type="text/javascript" src="jquery-easyui-1.3.4/jquery.min.js"></script>
 <script type="text/javascript" src="jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
</head>
<body>
 <h2>Contoh Data GRID dengan PHP JEASYUI</h2>
 <div class="demo-info">
 <div class="demo-tip icon-tip"></div>
 <div>Data Produk Penjualan.</div>
 </div>
 <div style="margin:10px 0;"></div>

 <?php
 include"class.php";
 $db=new database();
 $db->koneksi();
 $daftar=$db->tampilData();
 ?>
 <table class="easyui-datagrid" style="width:150px;height:100;" data-options="singleSelect:true,collapsible:true">
 <thead>
 <tr>
 <th data-options="field:'id'">ID</th>
 <th data-options="field:'nama'">Nama</th>
 <th data-options="field:'produk',align:'right'">Jumlah</th>

 </tr>
 </thead>
 <tbody>
 <?php
 foreach($daftar as $data){
 echo"<tr><td>".$data['id']."</td><td>".$data['nama']."</td><td>".$data['jumlah']."</td></tr>";
 }
 ?>
 </tbody>
 </table>
</body>
</html>

2.class.php


<?php

class database{

private $dbHost="localhost";
private $dbUser="root";
private $dbPass="";
private $dbName="grid";

function koneksi(){
mysql_connect($this->dbHost,$this->dbUser,$this->dbPass);
mysql_select_db($this->dbName);
}

function tampilData(){
$sql=mysql_query("select * from table_grid");
while($rows=mysql_fetch_array($sql))
$data[]=$rows;
return $data;
}
}

?>

hasil :

hasil

 

 

link download sourcecode disini

Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: