dudu.WEB.ID » Jquery

Set Specific row style in jqgrid

dudu — Fri, 20 Jan 2012 09:14:20 +0000

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..

Perlukah memakai framework ?

dudu — Tue, 27 Dec 2011 13:03:48 +0000

hmmm sudah beberapa bulan ini saya ga pernah lagi nulis tutorial tentang coding, apalagi khusus tentang Codeigniter. Ada banyak ide yang ingin saya tuliskan, tetapi rasa-rasanya waktunya belum nemu. Ah apalagi tutorial yang membahas Codeigniter sudah banyak bertebaran di internet, baik itu hasil karya sendiri maupun copas dari web lain, atau bermodalkan google translate

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

Insert Multiple Rows dynamically with Jquery, PHP and MySQL

dudu — Tue, 31 May 2011 01:14:35 +0000

udulnya mbois browww….

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.



  
    
    title
    
     
     
  
  
  
    	
    		
        	      
        
    		
    			No NIM Nama Depan Nama Belakang

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(
							 ''
						 + '' + count + ''
						 + ''
						 + ''
						 + ''
						 + 'Delete'
						 + ''
					);
				});

				$(".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

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:

 $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 
";
			echo "Kembali";

		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,,,

Mengaktifkan fitur search, sort dan paging pada JQrid dan Codeigniter

dudu — Thu, 26 May 2011 02:01:13 +0000

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..



 	
		
		
		
		
		
        
        
        
        
        

		Demo Jquery JqGrid Codeigniter

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

Chained DropDown dengan Jquery dan Codeigniter

dudu — Mon, 14 Feb 2011 07:16:58 +0000

*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 :

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 :

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



  
    
    Chain Select With Codeigniter and Jquery
    
		
		
		
  
  
    
    
    Propinsi : 

    
    
    
    Kota / Kabupaten :

   	'Pilih Propinsi Dahulu'),'','disabled');
    ?>

kota.php

Kota / Kabupaten :

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

Codeigniter – JQueryUI – Autocomplete tutorial

dudu — Thu, 02 Dec 2010 02:34:06 +0000

Kali ini saya mencoba menggabungkan jqueryui dan codeigniter lagi, dan membuat fitur autocomplete / autosuggest. Fungsi autocomplete ini adalah ketika kita mengetikkan karakter pada sebuah input text, maka akan menampilkan daftar item yang memiliki huruf awal sesuai karakter yang kita berikan. Tidak harus huruf awal, ini tergantung query kita dalam mencari item yang diinginkan.

Fitur autocomplete itu sendiri sudah dimiliki oleh plugin jqueryui secara default. Sehingga tidak perlu plugin tambahan lagi. Cukup dipanggil dengan .autocomplete pada elemen yang diinginkan (bisa menggunakan id atau class).

Dalam codeigniter, prinsipnya sama saja. Yang pertama kita buat fungsi index untuk menampilkan form input text. Input text tersebut kita beri id / class tertentu. Kemudian tambahkan fungsi autocomplete pada elemen input tersebut, dengan memanggil controller dan fungsi untuk mecari data. Dalam contoh ini data diambil dari database, dengan memanggil model. Kemudian data disajikan dalam bentuk JSON untuk kemudian ditampilkan dalam list autocomplete. Anda bisa mencoba di halaman demo.

Script controller nya adalah sebagai berikut:

load->model('MAutocomplete');
	}

	function index(){
		$this->load->view('autocomplete/show');
	}

	function lookup(){
		// process posted form data (the requested items like province)
        $keyword = $this->input->post('term');
        $data['response'] = 'false'; //Set default response
        $query = $this->MAutocomplete->lookup($keyword); //Search DB
        if( ! empty($query) )
        {
            $data['response'] = 'true'; //Set response
            $data['message'] = array(); //Create array
            foreach( $query as $row )
            {
                $data['message'][] = array(
                                        'id'=>$row->propinsi_id,
                                        'value' => $row->propinsi,
                                        ''
                                     );  //Add a row to array
            }
        }
        if('IS_AJAX')
        {
            echo json_encode($data); //echo json string if ajax request

        }
        else
        {
            $this->load->view('autocomplete/index',$data); //Load html view of search results
        }
	}
}

function index adalah fungsi untuk menampilkan form input. Sedangkan fungsi lookup digunakan untuk mengambil data dan menyajikan dalam bentuk JSON.

Dalam controller, untuk mengambil data menggunakan model, sehingga script modelnya adalah sebagai berikut :

db->select('*')->from('propinsi');
        $this->db->like('propinsi',$keyword,'after');
        $query = $this->db->get();    

        return $query->result();
	}
}

Berisi query active record (bisa juga query sql biasa) untuk mencari data dengan ketentuan LIKE keyword yang diberikan.

Sedangkan viewnya adalah sebagai berikut, sudah dilengkapi dengan script untuk memanggil fungsi autocomplete:



	
	    Codeigniter Autocomplete
	    
		
		
		
	    

	    

	    

	
	
		Nama Provinsi :

Anda bisa mecoba di halaman DEMO, dan script nya bisa dilihat pada github saya
Semoga berhasil. Jika ada pertanyaan silahkan masukkan pada kolom komentar.
NB: Jangan lupa sesuaikan database yang digunakan. Berikut adalah sql dari tabel propinsi yang saya gunakan

Tutorial menggunakan Codeigniter dan JqGrid

dudu — Wed, 24 Nov 2010 10:35:30 +0000

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. Beberapa fungsi dari Jqgrid dapat dilihat pada halaman demo nya.

Tutorial kali ini saya akan menggabungkan Jqgrid dengan framework codeigniter (tentunya). Langkah-langkahnya adalah dengan meload data dari database dalam format JSON (dapat juga menggunakan format Array dan XML) kemudian ditampilkan dalam Jqgrid. Silahkan lihat demo nya di halaman ini.

Kita menggunakan aplikasi ci_ku yang sebelumnya kita bahas. Kemudian tambahkan dua fungsi berikut pada controller daily:

function jqGrid(){
  	$this->load->view('daily/grid');
  }

  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

		if(!$sidx) $sidx =1;
		$query = $this->MDaily->getAll();

		$count = count($query);

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

		if ($page > $total_pages) $page=$total_pages;

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

		$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($i+1,$row->date,$row->name,$row->amount);
			$i++;
		}
		echo json_encode($responce);
  }

fungsi jqGrid adalah fungsi yang nantinya kita panggil, sehingga URL nya akan menjadi (http://localhost/ci_ku/index.php/daily/jqGrid)

Kemudian fungsi loadDataGrid adalah fungsi yang dipanggil untuk meload data dari database dan ditampilkan dalam dormat JSON

untuk Model, tidak ada perubahan, karena kita hanya mengambil data sehingga bisa langsung di ambil dengan $this->MDaily->getAll();
kemudian untuk view saya buat seperti berikut :



 	
		
		
		
		
		
		
		

		Demo Jquery JqGrid Codeigniter

Perlu diperhatikan juga direktori kita untuk meload jqgrid. Jqgrid dapat didownload pada halaman ini. Kemudian ekstrak pada root direktori project CI. Sesuaikan pada file jquery.jqGrid.js pada baris berikut, sesuai path tempat direktori Anda

var pathtojsfiles = "http://localhost/ci_ku/jqgrid/js/"; // need to be ajusted

Untuk demo bisa di lihat pada halaman ini dan source code ada pada github saya

Semoga berhasil

Update, untuk sorting data, silahkan controllernya yang

$query = $this->MDaily->getAll();

diganti

$query = $this->MDaily->getAll($limit,$sidx,$sord);

Kemudian bagian model diubah menjadi

function getAll($limit,$sidx,$sord){
    $this->db->select('id,date,name,amount');
    $this->db->from('daily');
    $this->db->limit($limit);
    $this->db->order_by($sidx,$sord);
    $query = $this->db->get();

    return $query->result();
  }

Update lagi, bagi yang akan mengaktifkan fitur search, ada pada artikel Berikut

CRUD sederhana dengan jquery, jqueryui, dan Codeigniter

dudu — Fri, 19 Nov 2010 08:12:43 +0000

CRUD adalah singkatan dari Create Read Update dan Delete. Setiap aplikasi biasanya kebanyakan memiliki fungsi CRUD di dalamnya. Fungsi ini digunakan untuk menyimpan / menambahkan data, kemudian mengedit data dan menghapus data.

Kali ini saya akan coba memberikan contoh aplikasi CRUD sederhana, yang saya bangun menggunakan Codeigniter dan digabung dengan Jquery serta JQueryui. Apabila ada yang bertanya apa itu Codeigniter, Jquery dan Jqueryui, silahkan googling dulu, atau juga dapat mencari pada artikel blog ini (mungkin ada mungkin juga tidak ). Sehingga saya anggap, kita sudah biasa menggunakan Codeigniter dan Jquery.

Saya juga tidak akan menjelaskan config.php, kemudian database nya, karena saya anggap itu sudah Anda lakukan

OK, tanpa perlu berpanjang lebar, saya menggunakan Jqueryui library javascript yang merupakan bagian dari jquery yang di dalamnya banyak ditemukan fungsi-fungsi untuk penanganan interface. Contohnya adalah Dialog, Autocomplete, Drag and Drop, Sortable dan lain sebagainya.

Jqueryui saya gunakan untuk membuat form dialog. Fungsinya, ketika saya akan input data, maka akan muncul sebuah dialog yang berisi form inputan data, kemudian dengan ajax, data akan dimasukkan dalam tabel. Begitu juga dalam proses Edit dan Delete data. Untuk lebih jelasnya bisa di lihat di halaman demo ini

Berikut script untuk controller yang saya gunakan

load->model('MDaily');
  }

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

  function submit(){
    if ($this->input->post('ajax')){
      if ($this->input->post('id')){
      	$this->MDaily->update();
      	$data['query'] = $this->MDaily->getAll();
      	$this->load->view('daily/show',$data);
      }else{
      	$this->MDaily->save();
      	$data['query'] = $this->MDaily->getAll();
      	$this->load->view('daily/show',$data);
      }
    }
  }

  function delete(){
    $id = $this->input->post('id');
    $this->db->delete('daily', array('id' => $id));
    $data['query'] = $this->MDaily->getAll();
    $this->load->view('daily/show',$data);
  }
}

Sedangkan Modelnya

db->select('*');
    $this->db->from('daily');
    $this->db->limit(5);
    $this->db->order_by('id','ASC');
    $query = $this->db->get();

    return $query->result();
  }

  function get($id){
    $query = $this->db->getwhere('daily',array('id'=>$id));
    return $query->row_array();
  }

  function save(){
    $date = $this->input->post('date');
    $name = $this->input->post('name');
    $amount=$this->input->post('amount');
    $data = array(
      'date'=>$date,
      'name'=>$name,
      'amount'=>$amount
    );
    $this->db->insert('daily',$data);
  }

  function update(){
    $id   = $this->input->post('id');
    $date = $this->input->post('date');
    $name = $this->input->post('name');
    $amount=$this->input->post('amount');
    $data = array(
      'date'=>$date,
      'name'=>$name,
      'amount'=>$amount
    );
    $this->db->where('id',$id);
    $this->db->update('daily',$data);
  }

}

Saya memiliki dua buah view yaitu input.php dan show.php yang scriptnya sebagai berikut.
input.php

Daily Notes

load->view('daily/show'); ?>

Are you sure?

show.php

Daily Notes
";
 echo    "";
 echo    "";
 echo    "";
 echo    "";
 echo    "";
 echo    "";
 echo  "";
 }
 ?>

 
 No
 Date
 Name
 Amount
 Edit
 Delete
 
 $i $row->date $row->name $row->amount id\" date=\"$row->date\" name=\"$row->name\" amount=\"$row->amount\">Edit id\" href=\"#\" >Delete

No	Date	Name	Amount	Edit	Delete
$i	$row->date	$row->name	$row->amount	id\" date=\"$row->date\" name=\"$row->name\" amount=\"$row->amount\">Edit	id\" href=\"#\" >Delete

Ini adalah tutorial dasar, jadi masih banyak yang harus diperbaiki dan ditambahkan apabila Anda akan memakai script ini dalam aplilkasi Anda. Apabila ada yang mau menambahkan silahkan masukkan di kolom komentar karena saya juga masih belajar.

Source code dapat ditemukan pada github saya di : http://github.com/dwijonarko/ci_ku

Semoga berhasil

Codeigniter Dasar – Membuat Edit Data

dudu — Wed, 07 Jul 2010 05:19:07 +0000

Sekali lagi Perhatian, ini hanya ditujukan kepada Newbie seperti saya, kalo yang sudah jago ya kayanya ga perlu lagi baca . Juga wajib mengikuti tuorial sebelumnya yaitu

Edit data, setelah beberapa waktu lalu selesai dengan memasukkan data dan menampilkan serta menghapus data, kemudian ada seseorang yg menanyakan tentang cara mengedit data.

Secara algoritma MVC nya, Edit data dilakukan dengan Memanggil fungsi edit pada controller, fungsi ini akan memanggil data yang akan di edit (menggunakan parameter id) melalui Model, kemudian data tersebut ditampilkan kedalam view. Setelah data tersebut di edit, kemudian memanggil fungsi submit pada controller untuk menentukan proses update data yg dilakukan pada model. Kemudian di redirect ke halaman index untuk melihat hasil data yg telah di edit tadi. Secara gambarannya seperti berikut :

So, daripada bingung, langsung saja di praktekkan

Pada file view.show.php ubah menjadi seperti di bawah ini



Daily Notes
";
 echo    "";
 echo    "";
 echo    "";
 echo    "";
 echo    "";
 echo    "";
 echo  "";
 }
 ?>

 
 No
 Date
 Name
 Amount
 Edit
 Delete
 
 $i $row->date $row->name $row->amount ".anchor("daily/edit/$row->id",'Edit')." id\" href=\"#\" >Delete

No	Date	Name	Amount	Edit	Delete
$i	$row->date	$row->name	$row->amount	".anchor("daily/edit/$row->id",'Edit')."	id\" href=\"#\" >Delete

Buat controller fungsi edit pada controller daily


function edit($id){
 $query          = $this->MDaily->get($id);
 $data['fid']    = $query['id'];
 $data['fdate']  = $query['date'];
 $data['fname']  = $query['name'];
 $data['famount']= $query['amount'];
 $this->load->view('daily/edit',$data);
 }

Kemudian pada Model buat fungsi get untuk mengambil data/ record yang akan di edit


function get($id){
 $query = $this->db->getwhere('daily',array('id'=>$id));
 return $query->row_array();
 }

Lanjutnya buat file edit.php pada direktory views/daily/edit.php




 
 Daily Notes
 
 
 
 
 Daily Notes

Ubah pada fungsi submit pada controller daily sehingga menjai seperti berikut :


function submit(){
 if ($this->input->post('ajax')){
 $this->MDaily->save();
 $data['query'] = $this->MDaily->getAll();
 $this->load->view('daily/show',$data);
 }else{
 if ($this->input->post('submit')){
 if ($this->input->post('id')){
 $this->MDaily->update();
 redirect('daily/index');
 }else{
 $this->MDaily->save();
 redirect('daily/index');
 }
 }
 }
 }

Maksud dari kode di atas adalah, jika kita submit memiliki $id maka akan memanggil function update pada model, apabila $id masih kosong, maka akan menambahkan data,

Untuk model ditambahkan function update sebagai berikut :

function update()
{
$id	 = $this->input->post('id');
$date = $this->input->post('date');
$name = $this->input->post('name');
$amount=$this->input->post('amount');
$data = array(
'date'=>$date,
'name'=>$name,
'amount'=>$amount
);
$this->db->where('id', $id);
$this->db->update('daily',$data);
}

OK sekarang kita coba edit datanya..

Bagi yang belum paham bisa kirim komentar ya piss saya juga masih belajar..

Codeigniter Dasar – Menghapus data dengan Jquery

dudu — Tue, 27 Apr 2010 09:55:19 +0000

Untuk menghapus data menggunakan Ajax dengan Jquery, sebenarnya tidk terlalu sulit. Dengan menggunakan data yang terdahulu pernah kita buat. Kita mempunyai 2 view yaitu show.php dan input.php. Ubah show.php untuk meletakkan fungsi Jquery yang digunakan untuk mengirim data secara Ajax dan memanggil Controller untuk menghapus data. Kemudian Jquery akan menghilangkan baris dengan triger class pada barisnya dengan fungsi animate. Ah terlalu bertele-tele hahahaha bikin ribet, padahal dalam codingnya tidak terlalu banyak perubahan.

Tambahkan script berikut pada view show.php pada aplikasi ci_ku yang kita buat sebelumnya , sehingga show.php akan menjadi seperti berikut :


Daily Notes
";
 echo    "";
 echo    "";
 echo    "";
 echo    "";
 echo      "";
 echo  "";
 }
 ?>

 
 No
 Date
 Name
 Amount
 Delete
 
 $i $row->date $row->name $row->amount id\" href=\"#\" >Delete

No	Date	Name	Amount	Delete
$i	$row->date	$row->name	$row->amount	id\" href=\"#\" >Delete

Perhatikan pada baris ke 53 yaitu pada bagian menampilkan link delete, tampak seperti di atas

echo "id\"  href=\"#\" >Delete";

Script javascript di ataslah (baris 133) yang digunakan Jquery untuk mengirimkan data ke controller daily dan menjalankan fungsi delete. Kemudian ubah link delete (baris 53), tambahkan id sebagai data yang akan dihapus dan class delbutton sebagai triger pada Jquery untuk menjalankan fungsi hapus ini.
Jangan lupa ubah controller daily pada fungsi delete menjadi seperti dibawah ini :

function delete()
 {
 $id = $this->input->post('id');
 $this->db->delete('daily', array('id' => $id));
 }

Selesai.. Saya ingin membuat halaman demonya, tetapi belum sempat. Kalo mau download source lengkapnya silahkan ambil di sini