Mengatur style untuk baris pada jqgrid (Bahasa Indonesianya gitu..)

Permasalahan ini saya temui ketika akan membuat tabel dengan Jqgrid, kemudian ada pengelompokan baris tertentu. Misalnya ketika pada field “Status” ternyata masih kosong, maka baris tersebut akan berwarna merah (tugas dari temen sih sebenernya ). Kalo misal table yang dibuat bukan dari plugin JQgrid mungkin tidak terlalu ribet, apalagi dokumentasi JQgrid sangat minim menurut saya.Dan juga desain table yang saya gunakan tidak setandar!!! hah, gimana ini..

Setelah browsing dan disambi twitteran, serta google plus-an (halah) dan tidak lupa ngaskus..akhirnya nemu inspirasi juga..

Beberapa cara yang sempat terpikirkan :

• Looping setiap halaman dan cari valuenya : ternyata ga bisa karena ngakses rownya dari ID, dan ID nya ga sama dengan nomor record nya (ini )
• Looping sampe row terakhir : ini juga ga bisa, apalagi dtanya sampe 4000, berat loadnya..
• Menggunakan looping pake jquery.each(), cari ID row kemudian cocokan valuenya

Ternyata cara yang terakhir yang paling cocok dan bisa di aplikasikan dalam kasus yang saya alami. Script yang saya gunakan seperti ini

loadComplete: function() {
 $('.jqgrow').each(function(index,value){//looping semua baris jqgrid
 var idRow = $(this).attr("id");//cari idRow nya
 var data = jQuery('#list1').jqGrid ('getCell', idRow, 'colomname'); //cari value dari cell "collomname"
 if(data!="Aktif"){ //cocokan dengan syaratnya
 grid.jqGrid('setRowData',idRow,"false",'ui-state-error'); //set style untuk baris tersebut
 }
 });
 },

Hasilnya kira-kira seperti gambar pada artikel ini… semoga membantu..

Framework oh framework, suatu hal yang lagi booming sekarang ini, buka milis pasti ada yang nanya framework, buka forum juga.. Dan yang paling sering ditanyakan adalah “perlu ga sih kita pake framework??” Ketika saya melihat pertanyaan itu, yang terbesit dalam pikiran saya adalah, yang dimaksud dalam pertanyaan tersebut “framework itu sendiri” dan “framework yang mana”

Kembali ke pengertian framework itu sendiri, yang sering saya temukan adalah ” kerangka sebuah aplikasi (baik itu web, desktop, dll) yang berisi kumpulan library, class, function dan lainnya yang sekiranya umum dan sering digunakan dalam pembuatan aplikasi tersebut yang bertujuan untuk mempermudah pengembangan aplikasi yang menggunakan kerangka program tersebut.

Nah kalau melihat definisi tersebut, jawaban dari “perlukah memakai framework ?” adalah perlu. Setiap aplikasi yang siap pakai (bukan setengah aplikasi) pasti terdiri dari ratusan bahkan ribuan baris kode (LOC). Apabila kode-kode atau syntax tersebut tidak kita organisir dengan baik, pastinya akan membuat program kita akan menjadoi over bloated dan banyak mengandung spaghetti code. Tetapi apabila kita mengorganisasi dengan baik, kita buat fungsi dan class yang benar sesuai tugasnya masing-masing, diharapkan kode yang kita buat akan menjadi lebih mudah dibaca, dipahami dan digunakan kembali dikemudian hari.

Ada mungkin diantara kita berpendapat “lebih puas coding dari awal”. Kalo seperti itu yang saya tanyakan “dari awal yang mana?” buat file satu persatu, class demi class, function demi function sehingga menjadi sebuah aplikasi jadi. Kalau suatu waktu ada proyek membangun program yang hampir mirip, apakah harus melakukan hal seperti itu lagi? pasti akan membuang banyak waktu. Akan lebih baik jika class yang sudah kita bangun, kita rapikan, kita dokumentasikan agar suatu saat bisa kita gunakan lagi. Nah dengan demikian kita sudah membuat “framework” untuk aplikasi kita.

Framework yang mana?

Sekarang banyak sekali framework yang bergelimpangan dan bertebaran di jagat Internet. Mau gratis atau berbayar, mau yang file nya kecil atau yang besar, tinggal pilih sesuai keinginan dan kebutuhan. Bagi saya, menggunakan framework yang sudah ada dipasaran (ex. codeigniter, yii, symfony, ruby on rails, django) bukanlah suatu masalah. Tidak ada framework yang jelek, yang ada hanyalah jurang maksimalnya kita menggunakan framework tersebut.

Menggunakan framework membuat kode program kita menjadi lebih teratur dan terorganisir. Membuat kita belajar bagaimana agar kode kita mudah dibaca orang lain (apabila kita bekerja tim).

Kesimpulannya yang saya ambil adalah, setiap aplikasi pasti memerlukan dasar dan kerangka yang biasa disebut framework. Tentang framework yang akan digunakan, apakah memilih framework buatan sendiri atau framework yang sudah ada, itu tergantung kebutuhan dan kemampuan kita.

Pesan hari ini : Liat wajah bayi yang menguap dan tidur itu sungguh indah rasanya

Tetapi, menurut saya justru seperti itulah cara yang hebat (walopun berat dan saya juga belum tentu bisa). Hal itu membuat programmer memiliki kemampuan logika yang kuat, skill programmingnya terasah terus-menerus meningkat.

Coba dibandingkan dengan jaman sekarang. Mahasiswa diberikan tugas sederhana Algoritma. Yang saya temui mereka justru berusaha mencari jawaban langsung di Internet. Bukan memikirkan logika algoritmanya. Banyak saya jumpai di forum, milis pertanyaan yang sepertinya tugas kuliah yang diberikan di perkuliahanya.

Jujur saya merasa prihatin (#SBY mode ON) tentang hal tersebut. Harusnya dengan Internet kita bisa lebih kreatif bukan malah menjadi malas.

NB: Catatan Jumat : Jangan tunda pekerjaan, semakin ditunda akan semakin menumpuk..

class Mobil
   %w{jenis merek bensin}.each { |prop|
   define_method(("get"+prop.capitalize).to_sym) {
     return self.instance_variable_get "@"+prop
   }
   define_method(("set"+prop.capitalize).to_sym) { |value|
     self.instance_variable_set "@"+prop, value
   }
}
end

a = Mobil.new
a.setMerek("Honda")
a.setBensin("Pertamax")
a.setJenis("Sedan")

a.getMerek
a.getBensin
a.getJenis

Sumber : kaskus credit to agan magico

Disclaimer: Saya menulis artikel ini bukan karena sudah tidak mau lagi menjawab pertanyaan. Bertanya boleh, sepanjang saya ada waktu dan bisa membantu insya Allah akan saya jawab. Tapi intinya adalah, bagaimana teknik bertanya yang dapat menghasilkan nilai tambah yang besar, bukan hanya untuk penanya, tapi juga untuk penjawab. Mengingat saya tidak dibayar untuk menjawab pertanyaan Anda, melainkan sebagai sedekah dan niat baik saja. Di lain pihak, dalam menjawab pertanyaan Anda, ada waktu yang saya gunakan. Waktu ini entah merupakan hak pelanggan saya (yang membayar untuk jasa saya), atau hak keluarga di rumah. Jadi untuk kebaikan kita semua, mohon baca artikel berikut sampai tuntas.

RTFM adalah singkatan dari Read The F!@#*ing Manuals, atau Read The Fine Manual, tergantung mood Anda saat mengucapkannya.

Kalimat sederhana, tapi entah kenapa banyak orang yang tidak melakukannya. Untuk kesekian kalinya, saya mendapat pertanyaan, “Bagaimana cara pakai ini? Bagaimana menjalankan aplikasi itu? Mengapa framework ini tidak berjalan seperti harapan saya?” dan pertanyaan lain yang sejenis.

Bukan, ini bukan tentang playbilling. Playbilling memang parah dokumentasinya, jadi bukan salah Anda kalo mengalami kesulitan

Yang sedang saya bicarakan adalah teknologi yang sehari-hari digunakan programmer. Misalnya PHP, Java, Hibernate, Spring, Freemarker, Linux, dan lainnya. Itu semua adalah produk mature, yang siap pakai, sudah banyak komunitasnya. Dengan demikian, manual dan dokumentasi pasti tersedia di mana-mana.

Sering sekali terjadi, ada yang tanya ke saya, baik melalui Y!, SMS, telpon, dan sebagainya. Dulu, saya masih mau menjawab panjang lebar. Akhir-akhir ini, pertanyaan semakin banyak, jadi respon standar saya adalah balik bertanya. Berikut urutan pertanyaan saya:

Sudah download?
Sudah extract?
Sudah baca dokumentasinya?
Sudah coba jalankan contohnya?
Sudah lihat dokumentasi/FAQ/forum di websitenya?
Sudah cari di Google?
Misal, ada yang tanya, “Bagaimana cara membuat mapping one-to-many di Hibernate?” Maka respon saya adalah:

Sudah download Hibernate?
Sudah extract hibernate-xx.zip?
Sudah baca dokumentasinya?
Sudah coba jalankan contohnya?
Sudah lihat dokumentasi/FAQ/forum di websitenya?
Sudah cari di Google dengan keyword “hibernate one to many mapping”?
Sayang sekali, sampai saat ini belum ada yang sampai nomer 6. Biasanya para penanya sudah “menyerah” di nomer 3. Pada beberapa kasus menyedihkan, nomer 1 saja dijawab “Belum”.

Untuk mereka yang menyerah di nomer 1, Anda hanya membuang waktu dan bandwidth saya yang berharga. Mereka ini adalah tipikal orang yang ingin gampang dan tidak memikirkan kepentingan orang lain. Sama saja dengan menganggap saya sebagai petugas 108 yang siap menjawab segala pertanyaan, karena memang dibayar untuk itu.

Bagi mereka yang menyerah di nomer 3, saya masih sedikit berempati. Mungkin penguasaan bahasa Inggrisnya kurang. Atau mungkin keder melihat dokumen berpuluh-puluh halaman, dalam bahasa Inggris pula. Walaupun mungkin juga ada yang bermentalitas cari gampang seperti nomer 1 di atas.

Tapi saran saya adalah, bacalah dokumentasi. Kalau bahasa Inggris yang kurang, kursus. Kalau ngeri melihat dokumen yang banyak, jangan dibaca semua. Gunakan Ctrl+F alias fasilitas find.

Jika Anda ingin serius dalam karir duniawi, investasi Bahasa Inggris sangat penting. Kemampuan membaca tulisan Inggris akan memungkinkan Anda maju secara mandiri. Kalau tidak, kemajuan Anda akan tergantung kepada orang-orang baik hati yang mau membantu Anda. Orang seperti ini tidak selalu ada. Mereka sangat mungkin memiliki kesibukan lain, sehingga kemajuan Anda akan menunggu ‘bala bantuan’ tersebut punya waktu luang untuk membantu Anda. Konsekuensinya jelas, Anda hanya akan jadi orang tertinggal.

Dalam proses membaca dan memahami dokumentasi, pengetahuan kita akan meningkat. Bukan saja kita mendapat jawaban atas masalah kita, tapi kita mendapatkan pengalaman memahami dokumentasi teknis. Ini adalah skill yang sangat bermanfaat, dan telah terbukti berguna pada waktu saya mengalami kesulitan.

Ada satu skill lagi yang sangat bermanfaat, yaitu skill problem solving. Anda mendapat masalah, kemudian melakukan langkah-langkah pemecahan. Kalau tidak berhasil, mungkin ada yang perlu diperbaiki di sistematika pemecahan masalahnya. Kemampuan problem solving sangat penting bagi karir Anda. Anda akan dianggap orang yang ‘bisa bekerja secara mandiri‘ atau ‘mampu bekerja dengan supervisi minimal‘. Sering lihat kan kriteria seperti ini di lowongan pekerjaan?

Problem solving skill bukan teknik instan. Ini harus dilatih terus menerus sepanjang hidup. Semakin banyak masalah yang kita hadapi dan kita coba pecahkan, kemampuan kita akan meningkat, berhasil itu cuma masalah waktu saja.

Bagi mereka yang sudah menjawab Ya sampai nomer 5, saya ucapkan selamat untuk Anda. Anda sudah membuktikan bahwa Anda telah mengerjakan PR Anda sebelum akhirnya memutuskan untuk meminta waktu saya. Dan kalau ternyata memang belum menyelesaikan masalah, saya tidak keberatan untuk membantu Anda.

Untuk kaum nomer 5, biasanya prosedur standar saya adalah menggunakan Google untuk mencari jawaban. Kemungkinan pertama, search langsung menghasilkan jawaban. Pada kasus ini, saya akan memberikan keyword google yang saya gunakan dan menunjukkan pada entri keberapa jawaban ditemukan. Harapan saya adalah, pada kesempatan berikutnya si penanya akan tahu metode dan teknik memilih keyword supaya hasil Google-nya akurat. Dengan demikian, si penanya akan bisa lebih mandiri.

Kemungkinan yang lain, saya harus bersusah payah mencari sebelum berhasil menemukan jawaban. Biasanya alirannya begini: Google -> Website -> dapat keyword lain -> Google lagi, dan seterusnya sampai ketemu. Kalau begini kejadiannya, saya akan menjelaskan proses berpikir saya dalam menelusuri internet kepada si penanya. Lagi-lagi tujuannya adalah supaya si penanya bisa mencoba sendiri di kemudian hari.

Buat mereka yang sudah lulus sampai nomer 6, tapi masih belum ketemu jawaban, lalu tanya saya … hmm … sejauh ini belum ada Kalau sudah lihai pakai Google dan gak ketemu, kecil sekali kemungkinan saya bakal ditanya. Kalaupun ditanya, jawaban saya cepat. Kalau saya sudah pernah mengalami masalah yang sama, saya akan jawab. Kalo belum pernah, ya saya bilang belum pernah, sehingga saya sama tidak tahunya dengan si penanya.

Pertanyaan yang saya benci adalah pertanyaan debug. Misalnya begini, “Saya bikin kode seperti ini , kemudian muncul NullPointerException, kenapa ya?”

Saya tidak suka karena:

Baca source code di Y! adalah penyiksaan, lewat SMS itu mungkin sudah melanggar HAM . Jangan ketawa, ada yang pernah kirim source code via SMS ke saya.
Untuk bisa debug, paling efektif adalah dengan coding langsung, pasang println disana-sini, recompile, re-run, lihat hasilnya.
So, jangan ajukan pertanyaan debug ke saya. Coba kirim ke milis. Mudah-mudahan ada yang mau bantu. Kalo saya sih tidak … lihat source code yang ditulis sendiri aja pusing, apalagi source code orang, lewat SMS pula …

Kalau ada pertanyaan yang dibenci, tentunya ada pertanyaan yang disukai. Pertanyaan yang saya suka adalah yang konseptual. Misalnya, “Apa itu anonymous inner class, dan kapan kita menggunakannya”. Contoh lain, “Teknik mapping inheritance mana yang paling baik untuk kasus saya, one-table-for-all, table-per-subclass, atau table-per-class”?

Pertanyaan seperti ini mencerdaskan kedua belah pihak. Si penanya mendapat wawasan baru, sedangkan saya mendapat kesempatan untuk menguji apakah pemahaman saya sudah lengkap dan benar.

Jadi, mari bertanya secara cerdas demi kebaikan kita semua.

Begini ceritanya.pernah suatu ketika saya dikasih tugas di tempat kerja saya yang dulu, untuk membuat aplikasi web. Nah pada aplikasi tersebut terdapat fungsi memasukkan data tetapi secara dinamis (ga satu persatu). Yang dimaksudkan dinamis adalah, kita bisa menambahkan baris dengan sebuah tombol, jadi setiap tombol tersebut di klik, maka akan muncul 1 baris baru di bawahnya untuk menampilkan field inputan. Kalo masih belum mudeng, bisa di lihat di halaman DEMO.

Nah dulu sih, ada contohnya, buatnya pake DOM Javascript, karena fieldnya banyak, maka scriptnya jadi spagetti alias amburadul.. Susah dipelajari, mana yang child, mana yang parent. Ternyata eh ternyata, setelah belajar pake jquery, jquery memiliki fungsi .append() yang bisa digunakan untuk ini.

Dalam demo ini contohnya saya akan menginputkan data mahasiswa dengan field nim, nama depan, nama belakang. Untuk databasenya bisa dibuat sendiri lah (sesuaikan dengan milik Anda). Pada form inputnya dibuat script input seperti biasa, tetapi saya menggunakan tabel agar tampilannya bisa lebih rapi. Kemudian jangan lupa panggil jquerynya ya.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="jquery.js"></script> <!-- ini disesuaikan -->
    <script type="text/javascript" src="jquery_append.js"></script> <!-- yang ini juga disesuaikan -->
  </head>
  <body>
  <form id="id_form" action="jquery_dom_save.php" method="post">
    	<table>
    		<tr>
        	<td><input type="button" name="add_btn" value="Add" id="add_btn"></td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        </tr>
    		<tr>
    			<td>No</td><td>NIM</td><td>Nama Depan</td><td>Nama Belakang</td><td>&nbsp;</td>
    		</tr>
    		<tbody id="container">
<!-- nanti rows nya muncul di sini -->
        </tbody>
        <tr>
	        <td><input type="submit" name=submit value="Save"></td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
	      </tr>
    	</table>
    </form>
  </body>
</html>

Kemudian saya memisahkan file javascriptnya, yang digunakan untuk membuat elemen baru,saya namakan jquery_append.js yang scriptnya sebagai berikut :

$(document).ready(function() {
    		var count = 0;

    		$("#add_btn").click(function(){
					count += 1;
		   		$('#container').append(
							 '<tr class="records">'
						 + '<td ><div id="'+count+'">' + count + '</div></td>'
						 + '<td><input id="nim_' + count + '" name="nim_' + count + '" type="text"></td>'
						 + '<td><input id="nama_depan_' + count + '" name="nama_depan_' + count + '" type="text"></td>'
						 + '<td><input id="nama_belakang_' + count + '" name="nama_belakang_' + count + '" type="text"></td>'
						 + '<td><a class="remove_item" href="#" >Delete</a>'
						 + '<input id="rows_' + count + '" name="rows[]" value="'+ count +'" type="hidden"></td></tr>'
					);
				});

				$(".remove_item").live('click', function (ev) {
    			if (ev.type == 'click') {
	        	$(this).parents(".records").fadeOut();
                        $(this).parents(".records").remove();
        	}
     		});
		});

Script di atas adalah script javascript yang menggunakan jquery append() untuk membuat elemen. Dan nama elemennya saya buat nama_elemen_ agar nanti setiap penambahana elemen akan ditambahkan prefik dari variabel count yang isinya adalah nomor / angka berurutan. Sehinga pada baris pertama, nama inputnya akan menjadi nim_1, nama_depan_1, nama_belakang_1, kemudian pada baris selanjutnya nim_2, nama_depan_2, nama_belakang_2 dan seterusnya.

Baris

<input id="rows_' + count + '" name="rows[]" value="'+ count +'" type="text"></td></tr>

digunakan untuk nantinya menghitung berapa row yang sudah dibuat, digunakan ketika perulangan insert data ke dalam tabel.

Saya juga menambahkan link untuk menhapus row jika sekiranya di perlukan. Menggunakan jquery live() karena row yang ditambahkan dibuat menggunakan javascript, sehingga harus menggunakan jquery.live() silahkan baca dokumentasi jquery .live() di sini

Akhirnya script untuk input datanya adalah sebagai berikut:

<?php
	if(isset($_POST['submit'])){
	  $connection = mysql_connect("localhost","root","") or die(mysql_error());
	  mysql_select_db("latihan") or die(mysql_error());
			foreach ($_POST['rows'] as $key => $count ){
				$nim = $_POST['nim_'.$count];
				$nama_depan = $_POST['nama_depan_'.$count];
				$nama_belakang = $_POST['nama_belakang_'.$count];

				$query_2 = "INSERT INTO kelas_mahasiswa (nim,nama_depan,nama_belakang) VALUES ('$nim','$nama_depan','$nama_belakang')";

				mysql_query($query_2) or die(mysql_error());
			}

			echo "Data Berhasil disimpan <br>";
			echo "<a href=\"jquery_dom.php\">Kembali</a>";

		mysql_close($connection);

	}else{
		header('Location: jquery_dom.php');
	}
?>

Menggunakan perulangan foreach dengan menghitung $_POST['rows']. Jangan lupa untuk setiap perulangan ditambahkan $count untuk mengambil nilai dari form input yang kita namai setiap field nya dengan name_1, 2 3 dst tadi.

Ada pertanyaan? Silahkan berkomentar, jika ada kesalahan mohon diperbaiki ya,,,

Sebelumnya saya mohon maaf, jika pada artikel sebelumnya Tutorial menggunakan Codeigniter dan JqGrid ternyata masih banyak terdapat kesalahan pada codingnya . Misalnya fungsi sorting dan search belum bisa jalan, kemudia fungsi pagination juga masih eror (.

Kali ini saya berusaha memperbaiki kesalahan tersebut, dengan mengaktifkan fitur search, sorting dan paging pada jqgrid tersebut.

Berbekal dari google, dan akhirnya menemukan blog ini.. Mulau saya kutak katik koding yang dahulu.. ternyata banyak salahnya saya gapapa deh, namanya juga belajar. Sebelumnya saya mengubah file view, menjadi seperti ini..

<!DOCTYPE HTML>
<html lang="en-US">
 	<head>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
		<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
		<link type="text/css" href="<?php echo base_url()?>jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
		<link type="text/css" href="<?php echo base_url()?>jqgrid/css/jquery.searchFilter.css" rel="stylesheet" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>jqgrid/js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>jqgrid/jquery.jqGrid.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>jqgrid/jquery.jqGrid.min.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>jqgrid/jquery.layout.js"></script>

		<title>Demo Jquery JqGrid Codeigniter</title>
	</head>
	<body>
		<?
			$ci =& get_instance();
			$base_url = base_url();
		?>

		<script type="text/javascript">
			jQuery().ready(function (){
				jQuery("#list1").jqGrid({
		   			url:'<?=$base_url.'index.php/daily/loadDataGrid'?>',      //another controller function for generating data
					mtype : "post",             //Ajax request type. It also could be GET
					datatype: "json",            //supported formats XML, JSON or Arrray
		   			colNames:['Date','Name','Amount'],       //Grid column headings
		   			colModel:[
				   		{name:'date',index:'date', width:30, align:"left"},
				   		{name:'name',index:'name', width:20, align:"left"},
				   		{name:'amount',index:'amount', width:20, align:"right"},
		  			],
				   	rowNum:10,
				   	width: 450,
						height: 300,
				   	rowList:[10,20,30],
				   	pager: '#pager1',
				   	sortname: 'id',
				    viewrecords: true,
					rownumbers: true,
					gridview: true,
					caption:"List Daily"
				}).navGrid('#pager1',{edit:false,add:false,del:false});
			});
		</script>

		<table id="list1"></table> <!--Grid table-->
		<div id="pager1"></div>  <!--pagination div-->
	</body>
</html>

Intinya perubahan view adalah membetulkan file javascript yang dipanggil (dulu ga tau, asal manggil aja). Kemudian pada controller, ada beberapa yang saya betulkan, terutama pada fungsi untuk memanggil jqgridnya (dulu saya memakai nama fungsinya function loadDataGrid). Yang saya lakukan adalah menambahkan beberapa parameter yang digunakan pada searching data, paging dan sorting. Untuk lebih jelasnya script function loadDataGrid sebagai berikut :

function loadDataGrid(){
		$page = isset($_POST['page'])?$_POST['page']:1; // get the requested page
		$limit = isset($_POST['rows'])?$_POST['rows']:10; // get how many rows we want to have into the grid
		$sidx = isset($_POST['sidx'])?$_POST['sidx']:'name'; // get index row - i.e. user click to sort
		$sord = isset($_POST['sord'])?$_POST['sord']:''; // get the direction

        $start = $limit*$page - $limit; // do not put $limit*($page - 1)
		$start = ($start<0)?0:$start;  // make sure that $start is not a negative value

		$where = ""; //if there is no search request sent by jqgrid, $where should be empty
        $searchField = isset($_POST['searchField']) ? $_POST['searchField'] : false;
        $searchOper = isset($_POST['searchOper']) ? $_POST['searchOper']: false;
        $searchString = isset($_POST['searchString']) ? $_POST['searchString'] : false;

        if ($_POST['_search'] == 'true') {
            $ops = array(
            'eq'=>'=', //equal
            'ne'=>'<>',//not equal
            'lt'=>'<', //less than
            'le'=>'<=',//less than or equal
            'gt'=>'>', //greater than
            'ge'=>'>=',//greater than or equal
            'bw'=>'LIKE', //begins with
            'bn'=>'NOT LIKE', //doesn't begin with
            'in'=>'LIKE', //is in
            'ni'=>'NOT LIKE', //is not in
            'ew'=>'LIKE', //ends with
            'en'=>'NOT LIKE', //doesn't end with
            'cn'=>'LIKE', // contains
            'nc'=>'NOT LIKE'  //doesn't contain
            );

            foreach ($ops as $key=>$value){
                if ($searchOper==$key) {
                    $ops = $value;
                }
            }
            if($searchOper == 'eq' ) $searchString = $searchString;
            if($searchOper == 'bw' || $searchOper == 'bn') $searchString .= '%';
            if($searchOper == 'ew' || $searchOper == 'en' ) $searchString = '%'.$searchString;
            if($searchOper == 'cn' || $searchOper == 'nc' || $searchOper == 'in' || $searchOper == 'ni') $searchString = '%'.$searchString.'%';

            $where = "$searchField $ops '$searchString' "; //create where parameter for search data
        }

		if(!$sidx) $sidx =1;
        $count = $this->db->count_all_results('daily'); //get total rows from table daily

		if( $count > 0 ) {
			$total_pages = ceil($count/$limit);    //calculating total number of pages
		} else {
			$total_pages = 0;
		}

		if ($page > $total_pages) $page=$total_pages;
   		$query = $this->MDaily->getAllGrid($start,$limit,$sidx,$sord,$where); //add parameter to model

		$responce->page = $page;
		$responce->total = $total_pages;
		$responce->records = $count;
		$i=0;
		foreach($query as $row) {
			$responce->rows[$i]['id']=$row->id;
			$responce->rows[$i]['cell']=array($row->date,$row->name,$row->amount);
			$i++;
		}
		echo json_encode($responce);
  }

banyak perubahannya ya? hehehe.. maklum saya juga masih belajar.. Dan untuk model, saya membuat sebuah fungsi baru yaitu getAllGrid dengan parameternya ada banyak (lihat source codenya langsung) seperti berikut :

function getAllGrid($start,$limit,$sidx,$sord,$where){
    $this->db->select('id,date,name,amount');
    $this->db->limit($limit);
    if($where != NULL)$this->db->where($where,NULL,FALSE);
    $this->db->order_by($sidx,$sord);
    $query = $this->db->get('daily',$limit,$start);

    return $query->result();
  }

terdapat if dalam fungsi tersebut, digunakan kalau ada parameter where, maka dilakuakan query menggunakan where tersebut, jika tidak ya tidak menggunakan where .

Semoga berhasil.. Ingat, untuk menjalankan program ini harus terhubung ke internet, soalnya jquery nya saya ambil langsung dari internet . Dan juga harus mengikuti artikel yang ini dulu..

Demo masih tetap pada halaman berikut

Untuk lebih jelasnya tentang perubahan yang saya gunakan, bisa di cek di github saya

Dalam aplikasi pendaftaran user ini, saya menyimpan password dengan meng-enkripsi md5 terlebih dahulu untuk field password. Kemudian pada waktu edit,password tidak akan tampil. Jika field password tidak diedit, maka password tidak di ganti, tetapi jika filed input password diubah, maka password akan diubah, dengan fungsi enkripsi md5 tentunya.

Kalau dilihat dari sisi coding, ga terlalu jauh dengan script terdahulu, tetapi saya menambahkan fungsi validasi inputannya. Sehingga pada controller user, kita tambahkan fungsi edit untuk menampilkan data yang akan diedit, fungsi submit yang berfungsi menangani submit dari form input dan edit, dan fungsi delete untuk menghapus data. Scriptnya adalah sebagai berikut :

<?php
class User extends CI_Controller{

	/*---script sebelumnya---*/

	function submit(){
		if ($this->input->post('submit')){

			if ($this->input->post('id')){
				$this->form_validation->set_rules('username', 'Username', 'required|min_length[5]|max_length[12]');
				$this->form_validation->set_rules('password', 'Password', 'matches[passconf]');
				$this->form_validation->set_rules('fullname', 'Fullname', 'required|min_length[5]|max_length[25]');

				if ($this->form_validation->run() == FALSE){
					$data['id'] = $this->input->post('id');
					$data['username'] = set_value('username');
					$data['fullname'] = set_value('fullname');
					$this->load->view('view_user/edit',$data);
				}else{
					$this->Model_user->update();
        	redirect('user/index');
        }
			}else{
				$this->form_validation->set_rules('username', 'Username', 'required|min_length[5]|max_length[12]');
				$this->form_validation->set_rules('password', 'Password', 'required|matches[passconf]');
				$this->form_validation->set_rules('passconf', 'Password Confirmation', 'required');
				$this->form_validation->set_rules('fullname', 'Fullname', 'required|min_length[5]|max_length[25]');

        if ($this->form_validation->run() == FALSE){
						$data['query'] = $this->Model_user->getAll();
						$this->load->view('view_user/input',$data);
				}else{
	          $this->Model_user->save();
  	        redirect('user/index');
  	    }
      }
		}
	}

	function edit(){
  	$id=$this->uri->segment(3);
  	$data['result']=$this->Model_user->getUser($id);

    if (empty($id) or count($data['result'])==0 ){
    	redirect('user/index');
    }else{
	    $result=$this->Model_user->getUser($id);
	    $data['id'] = $result['id'];
	    $data['username'] = $result['username'];
			$data['fullname'] = $result['fullname'];
	    $this->load->view('view_user/edit', $data);
    }
  }

  function delete($id){
  	$this->db->delete('user', array('id' => $id));
		redirect('user/index');
  }
}

agak panjang ya mungkin jika Anda menemukan yang lebih pendek, bisa kasih tau saya

Untuk modelnya ditambahkan fungsi seperti dibawah ini :

<?php
class Model_user extends CI_Model{

/*---fungsi sebelumnya ---*/	

	function getUser($id){
		$this->db->where('id', $id);
    $query = $this->db->get('user'); 

    return $query->row_array();
	}

	function save(){
    $username = $this->input->post('username');
    $password = $this->input->post('password');
    $fullname = $this->input->post('fullname');
    $data = array(
      'username'=>$username,
      'password'=>md5($password),
      'fullname'=>$fullname
    );
    $this->db->insert('user',$data);
  }

  function update(){
    $id   = $this->input->post('id');
		$username = $this->input->post('username');
		$password = $this->input->post('password');
    $fullname = $this->input->post('fullname');
    if ($password==''){
    	$data = array(
      'username'=>$username,
      'fullname'=>$fullname
    );
    }else{
    	$data = array(
      'username'=>$username,
      'password'=>md5($password),
      'fullname'=>$fullname
    );
    }

    $this->db->where('id',$id);
    $this->db->update('user',$data);
  }
}

Untuk view, saya membuat file edit.php pada folder view_user yang scriptnya sebagai berikut :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Data User</title>
  </head>
  <body>
    <div id="form_input" title="Edit Data">
      <table>
        <?php echo validation_errors(); ?>
        <?php echo form_open('user/submit'); ?>
        <tr >
            <td> <?php echo form_label('User Name : '); ?></td><?php echo form_hidden('id',$id); ?>
            <td> <?php echo form_input('username',$username,'id="username"'); ?></td>
        </tr>
        <tr>
            <td> <?php echo form_label('Password : ');?> </td>
            <td> <?php echo form_password('password','','id="password"'); ?></td>
        </tr>
         <tr>
            <td> <?php echo form_label('Repeat Password : ');?> </td>
            <td> <?php echo form_password('passconf','','id="passconf"'); ?></td>
        </tr>
        <tr>
            <td> <?php echo form_label('Full Name : ');?> </td>
            <td> <?php echo form_input('fullname', $fullname,'id="fullname"'); ?></td>
        </tr>
        <tr>
        		<td><?php echo form_submit('submit','Save')?>
        </tr>
      </table>
      </div>
  </body>
</html>

Dalam artikel terdauhulu :

Codeigniter dasar – Membuat insert data

Codeigniter dasar – Menampilkan dan menghapus

Codeigniter dasar – Membuat Edit data

Codeigniter dasar – Belajar Ajax dengan Jquery

Menghapus data dengan JQuery

CRUD sederhana dengan JQuery, JQueryUI dan Codeigniter

Menggunakan Codeigniter dan JQGrid

Kesemuanya menggunakan Codeigniter versi 1.7.3 (kalo saya tidak salah ingat..) Nah berhubung sekarang sudah ada yang versi terbaru, berikut ini CRUD sederhana dengan Codeigniter verse 2.0.2 silahkan cari perbedaannya dengan yang versi terdahulu.

Misalnya, kita akan membuat aplikasi pendaftaran user.. Untuk databasenya adalah sebagai berikut :

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `username` varchar(15) NOT NULL,
  `password` text NOT NULL,
  `fullname` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
)

Sebelum membuat controller dan sebagainya, silahkan sesuaikan pada application/config/config.php

$config['base_url']= 'http://localhost/nama_folder_ci/';

application/config/autoload.php

$autoload['libraries'] = array('database','form_validation');
$autoload['helper'] = array('url','form');

application/config/database.php

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root'; //user mysql kalian
$db['default']['password'] = ''; //password mysql kalian
$db['default']['database'] = 'codeigniter'; //nama database kalian
$db['default']['dbdriver'] = 'mysql';
...dst

Nah untuk cotroller, saya buat dalam fungsi index yang nantinya terdapat form input dan tabel data yang di inputkan.. controllernya dan fungsi indexnya

<?php
class User extends CI_Controller{

	function __construct(){
		parent::__construct();
		$this->load->model('Model_user');
	}

	function index(){
		$data['query'] = $this->Model_user->getAll();
		$this->load->view('view_user/input',$data);
	}
}

Jangan lupa membuat model_user, dengan fungsi untuk menampilkan data scriptnya :

<?php
class Model_user extends CI_Model{
        function __construct(){
		parent::__construct();
	}

	function getAll(){
		$this->db->select('id,username,fullname');
                $this->db->from('user');
                $this->db->limit(10);
                $this->db->order_by('id','ASC');
                $query = $this->db->get();

                return $query->result();
	}
}

Untuk tampilannya, saya lebih menyenangi membuat sebuah folder untuk setiap crud jadi dalam folder views saya membuat folder dengan nama user_views, dan di dalamnya saya membuat view input.php dan show.php.
input.php digunakan untuk inputan form, scriptnya sebagai berikut :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Data User</title>
  </head>
  <body>
    <div id="form_input" title="Input / Edit Data">
      <table>
        <?php echo validation_errors(); ?>
        <?php echo form_open('user/submit'); ?>
        <tr >
            <td> <?php echo form_label('User Name : '); ?></td>
            <td> <?php echo form_input('username',set_value('username'),'id="username"'); ?></td>
        </tr>
        <tr>
            <td> <?php echo form_label('Password : ');?> </td>
            <td> <?php echo form_password('password','','id="password"'); ?></td>
        </tr>
         <tr>
            <td> <?php echo form_label('Repeat Password : ');?> </td>
            <td> <?php echo form_password('passconf','','id="passconf"'); ?></td>
        </tr>
        <tr>
            <td> <?php echo form_label('Full Name : ');?> </td>
            <td> <?php echo form_input('fullname', set_value('fullname'),'id="fullname"'); ?></td>
        </tr>
        <tr>
        		<td><?php echo form_submit('submit','Save')?>
        </tr>
      </table>
      </div>
      <div id="show">
        <?php $this->load->view('view_user/show'); ?>
    </div>
    </div>
  </body>
</html>

sedangkan show.php scriptnya adalah sebagai berikut :

<?php
	if (isset($query) && count($query) > 0){
	?>
	<h1>Data User</h1>
	<table width="400" border="1">
 	<tr >
	 <th>No</th>
	 <th>Username</th>
	 <th>Fullname</th>
	 <th>Edit</th>
	 <th>Delete</th>
 </tr>
 <?php
 $i=0;
 foreach ($query as $row){
 $i++;
 echo "<tr class=\"record\">";
 echo    "<td>$i</td>";
 echo    "<td>$row->username</td>";
 echo    "<td>$row->fullname</td>";
 echo    "<td><a href=".base_url()."index.php/user/edit/$row->id>Edit</a></td>";
 echo    "<td><a href=".base_url()."index.php/user/delete/$row->id>Delete</a></td>";
 echo  "</tr>";
 }
 ?>
</table>
<?php
	}
?>

sampai sini, kita sebenarnya sudah selesai untuk membuat fungsi menampilkan data dari database, coba masukkan data lewat phpmyadmin, insyaalloh udah bisa tampil… Untuk simpan dan edit serta delete, lanjut di post berikutnya ya

*gambarnya aneh

Selamat datang kembali, yeah… setelah kemarin pusing dengan aktifitas di tempat kerja, akhirnya bisa refreshing lagi, kangen-kangenan lagi dengan Codeigniter dan JQuery. Rencananya sih pengen nyoba yang 2.0, tapi nanggung ah, masih pake yang versi lama dulu.

Beberapa waktu lalu sempat ditanyain cara buat dropdown yang nyambung (istilahnya banyak sih), ada pula yang kasih istilah Sub Dropdown. Yaitu select/dropdown 1 yang kalo dipilih, nanti dropdown 2 listnya akan berubah sesuai kategori di dropdown 1. Contoh sederhananya ya ketika milih propinsi, maka dorpdown 2 akan muncul pilihan kota sesuai propinsi di drodown 1 (kaya di skrinsut ).

Karena saya biasa pake CI, ya wes langsung ta buat aja..

Controller :

<?php
class Chain extends Controller{

	function __construct(){
		parent::Controller();
		$this->load->model('MChain');
	}

	function index(){

		$data['option_propinsi'] = $this->MChain->getPropinsiList();
		$this->load->view('chain/index',$data);
	}

	function select_kota(){
		$data['option_kota'] = $this->MChain->getKotaList();
		$this->load->view('chain/kota',$data);
	}
}
?>

Dua function, yang pertama index, untuk menampilkan halaman awalnya, kemudian select_kota itu dijalankan lewat ajax untuk memanggil dropdowon dua yang isinya kota sesuai propinsi pada dropdown pertama.

Model :

<?php
class MChain extends Model{
	function __construct(){
		parent::Model();
	}

	function getPropinsiList(){
		$result = array();
		$this->db->select('*');
		$this->db->from('propinsi');
		$this->db->order_by('propinsi','ASC');
		$array_keys_values = $this->db->get();
        foreach ($array_keys_values->result() as $row)
        {
            $result[0]= '-Pilih Propinsi-';
            $result[$row->propinsi_id]= $row->propinsi;
        }

        return $result;
	}

	function getKotaList(){
		$propinsi_id = $this->input->post('propinsi_id');
		$result = array();
		$this->db->select('*');
		$this->db->from('kota_kabupaten');
		$this->db->where('propinsi_id',$propinsi_id);
		$this->db->order_by('kota_kabupaten','ASC');
		$array_keys_values = $this->db->get();
        foreach ($array_keys_values->result() as $row)
        {
            $result[0]= '-Pilih Kota / Kabupaten-';
            $result[$row->kota_id]= $row->kota_kabupaten;
        }

        return $result;
	}

}
?>

Dua fungsi yang hampir sama, sama-sama memanggil isi dari tabel, kemudian ditampilkan sebagi list pada dropdown. Kalo fungsi yang kedua, itu ditambah statement where, sesuai kategori propinsi yang dipilih.

View :
Saya buat dua view, yang pertama untuk halaman depannya, kemudian yang kedua adalah untuk menampilkan dropdown dua untuk kota/kabupaten. Viewnya sebagai berikut :
index.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Chain Select With Codeigniter and Jquery</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
		<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/	css" media="all" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
  </head>
  <body>
    <!-- page content -->
    <div id="propinsi" style="width:250px;float:left;">
    Propinsi : <br/>
    <?php
    	echo form_dropdown("provinsi_id",$option_propinsi,"","id='propinsi_id'");
    ?>
    </div>
    <div id="kota">
    Kota / Kabupaten :<br/>
   	<?php
    	echo form_dropdown("kota_id",array('Pilih Kota / Kabupaten'=>'Pilih Propinsi Dahulu'),'','disabled');
    ?>
    </div>
    <script type="text/javascript">
	  	$("#propinsi_id").change(function(){
	    		var propinsi_id = {propinsi_id:$("#propinsi_id").val()};
	    		$.ajax({
						type: "POST",
						url : "<?php echo site_url('chain/select_kota')?>",
						data: propinsi_id,
						success: function(msg){
							$('#kota').html(msg);
						}
				  	});
	    });
	   </script>
  </body>
</html>

kota.php

Kota / Kabupaten :<br/>
   	<?php
    	echo form_dropdown("kota_id",$option_kota,'');
    ?>

Prosesnya adalah di view index.php, dropdown pertama diberikan sebuah id, kemudian id tersebut dipanggil dengan jquery, dengan menambahkan parameter value yg dipilih. Kemudian memanggil controller select_kota, memanggil model getKotaList sesuai paramater pada dropdown propinsi, lalu hasilnya akan diletakkan pada div kota. Begitulah kira-kira langkahnya

Source nya ada di sini

Ada beberapa bugs ketika saya coba, ketika di coba di localhost. semua berjalan lancar, tetapi ketika saya coba upload di hosting, ternyata scriptnya jadi ga jalan.. POST nya ga bisa dikirim oleh jquery… aneh.. ada yang bisa nemu erorrnya??

30-03-2011 : Pagi ini saya upload ulang filenya, dan tiba-tiba bisa jalan di servernya. Coba di cek deh http://dudu.web.id/ci_ku/index.php/chain ga tau kenapa..

Oh ya, unttuk databasenya saya download dari sini, thx to mas @matriphe