Jumat, 19 Agustus 2011

Instalasi Flexigrid

06.59 alie 11 comments
Menampilkan data di Flexigrid sangatlah mudah apabila kita tahu caranya.

Berikut adalah contoh menggunakan Flexigrid.
Langkah-langkah instalasi :
  1. Download library flexigrid disini
  2. Setelah flexigrid didownload extract melalui WinRAR, Extract Here
        Hasil extract kalau di buka kira-kira isinya seperti gambar dibawah ini
  3. Setelah Flexigrid di Extract buatlah folder baru dengan nama DEMO dan hasil extrakan tadi ditaruh di dalam folder DEMO, dan buat folder images didalam folder DEMO, didalam Folder DEMO apabila dibuka maka isinya seperti gambar dibawah ini.
  4. gambar dibawah ini simpan dan taruh didalam folder images


    apabila folder images dibuka kira-kira isinya seperti gambar dibawah ini
  5. Langkah selanjutnya yaitu membuat database bernama apotek dan buatlah tabel dengan nama jenis_obat fieldnya yaitu : id_jenis_obat,jenis_obat
  6. setelah database dan tabel jenis obat dibuat, langkah selanjutnya yaitu membuat file data.php
    Copy kode dibawah ini
    <?php
$nameserver = "localhost";
$username = "root";
$password = "123456";
$dbname = "apotek";
mysql_connect($nameserver,$username,$password);
mysql_select_db($dbname);

function alert($pesan) {
	echo "
		<script language=\"javascript\">
			alert('".$pesan."');
		</script>	
	";
}
function loncat($url) {
	echo "
		<script language=\"javascript\">
			window.location = \"".$url."\";
		</script>	
	";
}

function cek($sql) {
	$sql = $sql;
	$query = mysql_query($sql);
	$numrows = mysql_num_rows($query);
	return $numrows;
}

if(isset($_POST["tombol"])){
	if($_POST["tombol"]=="Simpan"){
		$cek = cek("select * from jenis_obat where jenis_obat = '$_POST[jenis_obat]'");
		if ($cek < 1) {
			$sql = "insert into jenis_obat ".
					"	(jenis_obat) ".
					"	values ".
					"	('$_POST[jenis_obat]') ";
			$query = mysql_query($sql);
		
			alert("Simpan Jenis Obat sukses");
			loncat("data.php");
		} else {
			alert("Simpan Jenis Obat gagal \\n Jenis Obat $_POST[jenis_obat] sudah ada");
			loncat("data.php");
		}
	}
	if($_POST["tombol"]=="Update"){
		$cek = cek("select * from jenis_obat where id_jenis_obat != '$_POST[id_jenis_obat]' and jenis_obat = '$_POST[jenis_obat]' ");
			
		if ($cek < 1) {
			$sql = "update jenis_obat ".
					"	set jenis_obat = '$_POST[jenis_obat]' ".
					"	where id_jenis_obat = '$_POST[id_jenis_obat]' ".
					" ";
			$query = mysql_query($sql);
			alert(" Data Jenis Obat sudah diupdate ");
			loncat("data.php");	
		} else {
			alert(" Data Jenis Obat gagal diupdate \\n Jenis Obat $_POST[jenis_obat] sudah ada ");
			loncat("data.php");	
		}
	}
}
?>
<!--- flexgrid, sesuaikan dengan folder anda--->
<script type="text/javascript" src="flexigrid/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="flexigrid/flexigrid.js"></script>
<link rel="stylesheet" href="flexigrid/css/flexigrid/flexigrid.css" type="text/css">

<style>
	/*************************************************************/
	/*Penambahan images pada button, sesuaikan dengan folder anda*/
	/*************************************************************/
	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
	}
	.flexigrid div.fbutton .add {
			background: url(images/add.png) no-repeat center left;
	}	
	.flexigrid div.fbutton .edit {
			background: url(images/edit.png) no-repeat center left;
	}	
	.flexigrid div.fbutton .delete {
			background: url(images/delete.png) no-repeat center left;
	}	
</style>

<div style="margin-left:25px; margin-top:30px">
<table id="flex1" style="display:none"></table>
</div>

<script type="text/javascript">
			
	$("#flex1").flexigrid
	(
	{
	//--sesuaikan dengan nama file anda
	url: 'data_flexgrid.php', 
	dataType: 'json',
	colModel : [
		{display: 'ID', name : 'id_jenis_obat', width : 40, sortable : true, align: 'center'},
		{display: 'Jenis Obat', name : 'jenis_obat', width : 80, sortable : true, align: 'left'}
		],
	buttons : [
		{name: 'Add', bclass: 'add', onpress : action},
		{name: 'Edit', bclass: 'edit', onpress : action},
		{name: 'Delete', bclass: 'delete', onpress : action},
		{separator: true}
		],
	searchitems : [
		{display: 'ID', name : 'id_jenis_obat'},
		{display: 'Jenis Obat', name : 'jenis_obat', isdefault: true}
		],
	singleSelect: true,
	sortname: "id_jenis_obat",
	sortorder: "asc",
	usepager: true,
	title: 'Jenis Obat',
	useRp: true,
	rp: 5,
	showTableToggleBtn: true,
	width: 700,
	height: 150
	}
	);

	function action(com,grid)
	{
		if (com == 'Delete')
			if($('.trSelected',grid).length>0){
				if(confirm('PERINGATAN : Hapus ' + $('.trSelected',grid).length + ' baris ?')){
					var items = $('.trSelected',grid);
					var itemlist ='';
					for(i=0;i<items.length;i++){
						itemlist+= items[i].id.substr(3)+",";
					}
					$.ajax({
						type: "POST",
						dataType: "json",
						url: "data_hapus.php",
						data: "items="+itemlist,
						success: function(data){
							//alert("Query: "+data.query+" - Total affected rows: "+data.total);
							alert("Data yang dihapus : "+data.total);
							$("#flex1").flexReload();
						}
					});
				}
			} else {
				return false;
			} 
		else if (com == 'Edit')
			{
				var items = $('.trSelected',grid);
				var itemlist ='';
				for(i=0;i<items.length;i++){
					itemlist+= items[i].id.substr(3)+",";
				}
				//confirm('Edit ' + $('.trSelected',grid).length + ' items? : ' + itemlist )
				//--sesuaikan dengan nama file anda
				$('#tampil').load("data_edit.php?id_jenis_obat="+itemlist);
			}
		else if (com == 'Add') {
			//--sesuaikan dengan nama file anda
			$('#tampil').load("data_tambah.php");
		}
	}
	
</script>
<div id="tampil"></div>
  7. Buat file data_edit.php
    Copy kode dibawah ini
    <?php
$nameserver = "localhost";
$username = "root";
$password = "123456";
$dbname = "apotek";
mysql_connect($nameserver,$username,$password);
mysql_select_db($dbname);

$id_jenis_obat = explode(",",$_GET[id_jenis_obat]);
$id_jenis_obat = $id_jenis_obat[0];

$sql = "select * from jenis_obat where id_jenis_obat = '$id_jenis_obat' ";
$query = mysql_query($sql);
$fetch = mysql_fetch_object($query);
?>
<form action="" method="post">
<div id="toggleText" style="display: block;">
    <div class="box">
        <div class="topleft">
            <div class="topright">
                <div>
                    <table>
                        <tr>
                            <td colspan="2"><h3>Edit Jenis Obat</h3></td>
                        </tr>
                        <tr>
                            <td>Jenis Obat</td>
                            <td>: 
                            	<input type="text" name="jenis_obat" value="<?=$fetch->jenis_obat;?>">
                                <input type="hidden" name="id_jenis_obat" value="<?=$fetch->id_jenis_obat;?>">
                            </td>
                        </tr>
                        <tr>
                            <td> </td>
                            <td>
                            	  <input type="submit" name="tombol" value="Update">
                            	  <input type="button" name="batal" value="Batal" onclick="javascript:window.location='data.php';">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="bottomleft">
            <div class="bottomright"> </div>
        </div>
    </div>
</form>
  8. Buat file dengan nama data_flexgrid.php
    Copy kode dibawah ini
    <?php
$nameserver = "localhost";
$username = "root";
$password = "123456";
$dbname = "apotek";
mysql_connect($nameserver,$username,$password);
mysql_select_db($dbname);

error_reporting(1);
function runSQL($rsql) {
	$result = mysql_query($rsql) or die ('test'); 
	return $result;
	mysql_close($connect);
}

function countRec($fname,$tname,$where) {
	$sql = "SELECT count($fname) FROM $tname $where";
	$result = runSQL($sql);
	while ($row = mysql_fetch_array($result)) {
		return $row[0];
	}
}

$page = $_POST['page'];
$rp = $_POST['rp'];
$sortname = $_POST['sortname'];
$sortorder = $_POST['sortorder'];

if (!$sortname) $sortname = 'id_jenis_obat';
if (!$sortorder) $sortorder = 'desc';

$sort = "ORDER BY $sortname $sortorder";

if (!$page) $page = 1;
if (!$rp) $rp = 5;

$start = (($page-1) * $rp);

$limit = "LIMIT $start, $rp";

$query = $_POST['query'];
$qtype = $_POST['qtype'];

$where = "";
if ($query) $where = " WHERE $qtype LIKE '%$query%' ";

$sql = "SELECT id_jenis_obat,jenis_obat FROM jenis_obat $where $sort $limit";
$query = mysql_query($sql);

$total = countRec("id_jenis_obat","jenis_obat $where");

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
header("Cache-Control: no-cache, must-revalidate" ); 
header("Pragma: no-cache" );
header("Content-type: text/x-json");
$json = "";
$json .= "{\n";
$json .= "page: $page,\n";
$json .= "total: $total,\n";
$json .= "rows: [";
$rc = false;
while ($row = mysql_fetch_array($query)) {
	if ($rc) $json .= ",";
	$json .= "\n{";
	$json .= "id:'".$row['id_jenis_obat']."',";
	$json .= "cell:['".$row['id_jenis_obat']."'";
	$json .= ",'".$row['jenis_obat']."']";
	$json .= "}";
	$rc = true;		
}
$json .= "]\n";
$json .= "}";
echo $json;
?>
  9. Buat file data_hapus.php
    Copy kode dibawah ini
    <?
$nameserver = "localhost";
$username = "root";
$password = "123456";
$dbname = "apotek";
mysql_connect($nameserver,$username,$password);
mysql_select_db($dbname);

error_reporting(0);
function runSQL($rsql) {
	$result = mysql_query($rsql) or die ('test'); 
	return $result;
	mysql_close($connect);
}
$items = rtrim($_POST['items'],",");
$sql = "DELETE FROM jenis_obat WHERE id_jenis_obat IN ($items)";

$total = count(explode(",",$items)); 
$result = runSQL($sql);
$total = mysql_affected_rows();

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/x-json");
$json = "";
$json .= "{\n";
$json .= "query: '".$sql."',\n";
$json .= "total: $total,\n";
$json .= "}\n";
echo $json;
?>
  10. Buat file dengan nama data_tambah.php
    Copy kode dibawah ini
    <form action="" method="post">
<div id="toggleText" style="display: block">
    <div class="box">
        <div class="topleft">
            <div class="topright">
                <div>
                    <table>
                        <tr>
                            <td colspan="2"><h3>Tambah Jenis Obat</h3></td>
                        </tr>
                        <tr>
                            <td>Jenis Obat</td>
                            <td>: <input type="text" name="jenis_obat"></td>
                        </tr>
                        <tr>
                            <td> </td>
                            <td>
                            	  <input type="hidden" name="p" value="<?=$_GET[p];?>">
                            	  <input type="submit" name="tombol" value="Simpan">
                            	  <input type="button" name="batal" value="Batal" onclick="javascript:window.location='data.php';">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="bottomleft">
            <div class="bottomright"> </div>
        </div>
    </div>
</form>
  11. Kalau file sudah dibuat semua maka isi dari folder DEMO seperti gambar dibawah ini

SELESAI,,,SEMOGA BERHASIL..!!!
Posted in:

11 komentar:

hadi mengatakan...

Mas saya sudah coba, tetapi isi datanya tidak muncul, kenapa yah dan seperti proses loading terus, padahal code nya persis dan data_flexgrid.php saya buka juga betul. Tabelnya sudah saya isi juga didatabase ada isinya namun di tampilannya kok seperti proses loading terus, tidak pernah muncul, mohon pencerahannya.thx

Selasa, 06 Maret 2012 pukul 11.52.00 WIB
alie mengatakan...

Mungkin koneksinya belum beres, cek koneksi :

$nameserver = "localhost"; //sesuaikan

$username = "root"; //sesuaikan

$password = "123456"; //sesuaikan

$dbname = "apotek"; //sesuaikan




Apabila koneksi sudah beres, sesuaikan nama tabel dan field2-nya, perhatikan kode berikut :

$sql = "SELECT id_jenis_obat,jenis_obat FROM jenis_obat $where $sort $limit";

Sesuaikan seperti kode diatas.

Jumat, 16 Maret 2012 pukul 21.08.00 WIB
Gina 'Ginong' Dwitasari mengatakan...

sudah di sesuaikan semua, tp datanya tetep tidak muncul... knp ya..

Sabtu, 31 Maret 2012 pukul 14.35.00 WIB
Unknown mengatakan...

saya juga ngalamin hal yg sama mas, semua udah di sesuaikan tp masih ga muncul datanya.. :(

Rabu, 18 April 2012 pukul 23.21.00 WIB
Anonim mengatakan...

wkwkwkw

Rabu, 07 November 2012 pukul 09.45.00 WIB
Rozaq D' Acewell™ mengatakan...

klo menggunkan Code igniter kayak gitu ada tha gug??

Sabtu, 23 Maret 2013 pukul 12.15.00 WIB
alie mengatakan...

Menggunakan flexigrid dalam code igniter, coba kunjungi web ini http://a2fahmi.com/?p=8640
semoga membantu

Sabtu, 30 Maret 2013 pukul 13.16.00 WIB
fadhlan satria mengatakan...

jadinya gimana ini bro??tetap dlm grid tidak muncul isi db,untuk koneksi tidak ada masalah..
tampilan grid hanya loading.. trims

Kamis, 09 Mei 2013 pukul 14.31.00 WIB
Anonim mengatakan...

bang bisa DONWLOAD SOUCE CODE nya ga ?

Sabtu, 21 Desember 2013 pukul 16.37.00 WIB
Anonim mengatakan...

kalau menggunakan left join gmana ya,, data muncul tapi menu searchingnya ga jalan

Kamis, 20 Maret 2014 pukul 21.51.00 WIB
Ann mengatakan...

kalau ingin menambahkan field foto bagaimana ya,, form upload/edit fotonya juga seperti apa.

Senin, 03 Agustus 2015 pukul 06.53.00 WIB

Posting Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Justin Bieber, Gold Price in India