Merhabalar.

Uzun süredir blogu boşladım. İş, güç, master falan derken... Yok inanmayın. Bahane uyduruyorum. Hayatta herşey için vakit vardır. Hele ki kişinin uzmanlık alanı ile ilgiliyse ekstra bir boş zamana zaten gerek yoktur. Neyse, sosyal mesajımızı da verdikten sonra konumuza dönebiliriz.

Code igniter ile olan ilişkim devam ediyor. Bu sefer ki yazım gene code igniter ile ilgili. Fakat sadece bunula sınırlı değil. Jquery'nin nimetlerinden de yararlandım. JQuery UI-layout ve jqgrid library'lerini ile kullandım. Şu an yazdığım cms'de bu library'leri kullanıyorum. Madem kullanıyorum küçük bir demoyu da blogumda sizlerle paylaşmak istedim.

Bütün kodları blog postuna yazmam imkansız. Aslında imkansız değil ama bunları yaparken çok sıkılırım O nedenle tüm dosyalara yazının sonunda vermiş olduğum linkten ulaşabilirsiniz. Eğer herhangi bir problem yaşarsanız bana nasıl ulaşacağınızı zaten biliyorsunuz

İlk olarak dosyalar hangi dizinlerde ve programı çalıştırırken nelere dikkat edeceksiniz onlardan bahsetmek istiyorum.

• Dosyaları indirdikten sonra cms_yeni.sql isimli dosyayı phpmyadmin'de çalıştırınız ve veritabanınızı oluşturunuz.
• Programı http://localhost/cms/anasayfa şeklinde veya sizin belirlediğiniz bir dosya yapısında çağırınız.
• Path'lerle iligi ayarları application/config/config.php, veritabanı ile ilgili ayarları ise application/config/database.php dosyalarından yapabilirsiniz.
• Layout ve grid ile ilgili tüm dosyalar /js klasörü içerisinde bulunmaktadır. Dosyayı açtığınız zaman kullanmış olduğum jqgrid'in versiyon numarası ile adlandırılmış olan jquery.jqGrid-3.7.1 isimli bir klasör göreceksiniz.
• Sayfanın arayüzü yani kullanıdığımız UI layout, jqgrid için kullandığımız library'ler, css dosyaları ve sayfanın html çatısı application/views/content.php içerisine yazılmaktadır.
• Kullanmış olduğum UI layout esnek bir yapıya sahiptir. Geliştiricileri tasarım yapma uğraşından kurtaracağı gibi gerektiğinde tasarıma da rahatça müdahale etmemizi sağlamaktadır. İstediğiniz paneli rahatlıkla açıp kapatabilme şansı vererek iyi bir kullanıcı deneyimi sağlamaktadır.
• Sayfaya girdikten sonra sol panelde bulunan Menü butonuna bastıktan sonra çıkacak alt menüden Haberler butonuna basarak haber listesini jqgrid içerisinde görebilirsiniz.
• Sol menüye eleman ekleyip çıkarmak için projenin içerisinde bulunan tree.xml dosyasını kullanabilirsiniz. Menü eklemek oldukça basittir. Herhangi bir satırı çoğaltın ve link adı ile url'yi değiştirin. İsterseniz bu dosyayı program içerisinde dinamik olarak da oluşturabilirsiniz. Orası sizin hayal gücünüze kalmış
• jqgrid üzerinde yapacağınız ekleme, güncelleme, silme, arama, yenileme(refresh) gibi işlemlerin tümü ajax ile çalışmaktadır.
• Haber modülü ile ilgili işlemlerin yapıldığı controller dosyası application/controllers/haber.php, model dosyası application/models/mhaber.php, view dosyası ise application/views/vhaber.php'dir.

Biraz da jqgrid'in yüklenme mantığından bahsetmek istiyorum.

Sol menüden Haberler linkine tıkladıktan sonra ajax request ile http://localhost/cms/haber/haber_liste çalışmaktadır. Buradan da anlaşıldığı üzere haber controller'ı içerisindeki haber_liste fonksiyona gidiliyor. Bu fonksiyon içerisinde sadece aşağıdaki satırlar bulunmaktadır.

public function haber_liste()

{

$this->load->view('vhaber');

}

Yani vhaber.php isimli view dosyası yüklenmektedir.

vhaber.php dosyasının içeriğinde ise grid'e yüklenecek olan haber bilgilerini çağıracak ve grid üzerinde yapacağımız ekleme, düzenleme, silme, arama işlemlerinin opsiyonlarını belirleyen javascript fonksiyonumuz bulunmaktadır. Ayrıca sayfanın en üstünde datanın ve grid pager'ın yerleşeceği html kodları bulunmaktadır.

<table id="list_haber"></table>
<div id="pager_haber"></div><script type="text/javascript">
$(document).ready(function() {

$.jgrid.defaults = $.extend($.jgrid.defaults,{loadui:"enable",refresh:true});

var lastsel3;
$("#list_haber").jqGrid({
url:"<?php echo config_item('base_url')?>haber/haber_liste_grid",
mtype:"GET",
datatype: "json",
imgpath: "<?php echo config_item('admin_grid_theme')?>images/",
caption:"Haberler",
height:"auto",
width:1000,
loadui: "enable",
autowidth: false,
rowNum:10,
rowList:[10,20,40],
pager: 'pager_haber',
sortname: 'HaberId',
viewrecords: true,
sortorder: "desc",
multiselect: true,
pgbuttons: true,
editurl: '<?php echo config_item('base_url')?>haber/haber_islem',
refreshicon: 'ui-icon-refresh',
colNames:['Haber Id', 'Baslik', 'Icerik', 'Durum', 'Vitrin', 'Kayit Tarihi', 'Duzenleme Tarihi'],
colModel:[
{name:'HaberId',index:'HaberId', width:50},
{name:'Baslik',index:'Baslik', width:90, editable:true},
{name:'Icerik',index:'Icerik', width:90, editable:true, hidden:true, editrules: {edithidden:true},edittype:"textarea",editoptions: {rows:"10",cols:"100"}},
{name:'Durum',index:'Durum', width:90, editable:true,align:"center",edittype:"select",editoptions:{value:"Aktif:Aktif;Pasif:Pasif"},stype:'select', searchoptions:{value:":Hepsi;Aktif:Aktif;Pasif:Pasif"}},
{name:'Vitrin',index:'Vitrin', width:90, editable:true,align:"center",edittype:"select",editoptions:{value:"Aktif:Aktif;Pasif:Pasif"},stype:'select', searchoptions:{value:":Hepsi;Aktif:Aktif;Pasif:Pasif"}},
{name:'EklemeTarihi',index:'EklemeTarihi', width:80, align:"center", search:false},
{name:'DuzenlemeTarihi',index:'DuzenlemeTarihi', width:80, align:"center", search:false}
]
}).jqGrid('navGrid','#pager_haber',{edit:true,add:true,del:true,refresh: true},{width:800,height:400,closeAfterEdit:true},{},{},{multipleSearch:true})
.jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
});
</script>

Parametrelere bakarak aslında az çok ne işe yaradığını anlarsınız. Hala kafasında soru işareti olan varsa yorum yazabilir, e-posta atabilir veya jqgrid sayfasına bakabilir.
Burada dikkat edilmesini istediğim 2 şey var.

url:"<?php echo config_item('base_url')?>haber/haber_liste_grid",
.
.
editurl: '<?php echo config_item('base_url')?>haber/haber_islem',

Buradaki 2 url parametresinden ilki olan url parametresi javascript kodu yüklendikten sonra datanın alınacağı sayfayı ve fonksiyonu gönstermektedir. Yani grid objemize yerleşecek olan json data haber class'ının haber_liste_grid fonksiyonundan çekilecektir. Grid üzerinde bulunan ve data eklemeye, düzenlemeye ve silmeyi sağlayan url ise editurl parametresinde bulunmaktadır. Bu sayfa haber class'ının, haber_islem fonksiyonudur.
Bu fonksiyonların işlemlerini anlatırdım ama zaten ci yükleyip çalıştıracak olan kişi neler yaptığının da farkındadır
mhaber.php dosyasında ise iliglii veritabanı işlemleri bulunmaktadır. Burada dikkat edilmesi gerekilen fonksiyon listeGrid fonksiyonudur. vhaber.php dosyasından gelecek olan parametreler ile arama kriterleri ve arama kelimelerine göre sql farklı şekillerde yazılmaktadır. Arama işlemlerinde arama opsiyonu olarak AND veya OR parametresi gelmektedir. Ayrıca birden fazla where koşulu da bulunma ihtimali vardır. Bu nedenle sql farklı durumlara göre farklı şekiller alarak CI'nin nimetlerinden faydalanılmıştır. Örneğin eğer şart parametresi AND ise yani farklı durumlar AND ile birleştirilecek ve arama opsiyonu cn yani contain ise $this->db->like($row['field'],$row['data']); şeklinde bir satır göreceksiniz. Eğer seçilen arama kriterleri OR ile bağlanacaksa ve gene cn kullanılmış ise bu sefer arama sql'i $this->db->or_like($row['field'],$row['data']);şeklinde olacaktır. Kodu açıp biraz incelediğinizde ne demek istediğimi eminim daha iyi anlayacaksınız

Bu sistem eminim çoğu geliştirinini işin oldukça kolaylaştıracaktır. Yapmanız gereken dosyayı indirmek ve gerekli ayar işlemlerini yaptıktan sonra programı çalıştırmaktır. Programı yazarken ben oldukça eğlendim. Sizin de eğleneceğinizi düşünmekteyim İyi çalışmalar.

Kodları indirmek için tıklayınız.

jqgrid ile ilgili diğer örnekleri görmek ve gelişmeleri takip etmek istiyorsanız burayı ziyaret edebilirsiniz: http://www.trirand.com/blog/

ui-layout için daha fazla örnek görmek istiyorsanız burayı ziyaret edebilirsiniz: http://layout.jquery-dev.net/