Categories
Javascript PHP

Codeigniter Datatables Kullanımı Sakila DB Örnek Example

Merhaba Arkadaşlar  ,

Bu yazımda PHP Frameworklerinden CodeIgniter ile JS Datatables nasıl kullanacağımız hakkında bir örnek ile bilgi vereceğim.

Hiç bir kurulum gerektirmeden CodeIgniter Framework’ünü kullanabilirsiniz. Son sürümü indirmek için tıklayın. (localhost’unuzun dizinine kopyalayın.)

  • GNU Lisansı olan Datatables kütüphanesini buradan indirin ve codeigniter’ın ana dizine kopyalayın. (applications/libraries)
  • Örnek Database olarakta standart olan ‘sakila.db’ yi kullanacağım. buradan indirebilirsiniz. (sakila.sql)
  • Son olarakda Datatables Javascript Kütüphanesini buradan indirebilirsiniz.(js/jquery.dataTables.min.js)

 

CONTROLLER 

class Welcome extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->library('datatables');
        $this->load->library('table');
        $this->load->database();   
    }

	public function index()
	{   
        $tmpl = array ( 'table_open'  => '<table id="table" border="1" cellpadding="2" cellspacing="1" class="table table-striped table-bordered">' );
        $this->table->set_template($tmpl); 

        $this->table->set_heading('Actor ID','Full Name ','Last Update' , 'Let Show It!!');

        $this->load->view('datatables_view');
	}

    public function ajax_pull()
    {
        $this->datatables->select('actor_id ,  fullname , last_update')
        ->from('actor');

        $this->datatables->where('actor_id > 100');
        $this->datatables->add_column('go', '<a href="javascript:alert(\'Actor ID :$1-- Actor Name : $2 \');">Go Go!! </a>', 'actor_id , fullname');
        $this->datatables->add_column('link', '<a href="#">Örnek Link : $1 </a>', 'site_url(actor_id)');
        echo $this->datatables->generate();
    }
}

Constructorda kullanılan kütüpnaleri config/autoload.php içine yazılarak çağırabilirsiniz.

Index fonksiyonunda tablomuzun header larını ayarlıyoruz .

Ajax_pull fonksyionu Datatables tarafından her değişiklikte Javascript Ajax sorgu gönderilecek. Buradaki kullanımları açıklayalım

Değerlerini istediğimiz tablonun kolanları

$this->datatables->select('actor_id ,  fullname , last_update')
        ->from('actor');

Kullanışlı bulduğum özellik ekstra Where bloğu ekleyebilirsiniz.

$this->datatables->where('actor_id > 100');

En kullanışlı özellik match replace ile Select ile gelen değerlerden yeni bir kolon oluşturabilirsiniz veya değiştirebilirsiniz.

$this->datatables->add_column('go', '<a href="javascript:alert(\'Actor ID :$1-- Actor Name : $2 \');">Go Go!! </a>', 'actor_id , fullname');

Önceden tanımlamış olduğunuz PHP fonksiyonlarını yeni kolon oluştururken kullanabilirsiniz. (site_url tanımlı bir codeIgniter fonksiyonudur).

$this->datatables->add_column('link', '<a href="#">Örnek Link : $1 </a>', 'site_url(actor_id)');

VIEW

      <script type="text/javascript">
        $(document).ready(function() {
	var oTable = $('#table').dataTable( {
	     "sWrapper": "dataTables_wrapper form-inline",
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": '<?php echo base_url(); ?>index.php/welcome/ajax_pull',
                //"bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "iDisplayStart ":20,
                "oLanguage": {
            "sProcessing": "<img src='<?php echo base_url(); ?>assets/images/ajax-loader_dark.gif'>"
        },  
        "fnInitComplete": function() {
                //oTable.fnAdjustColumnSizing();
         },
                'fnServerData': function(sSource, aoData, fnCallback)
            {
              $.ajax
              ({
                'dataType': 'json',
                'type'    : 'POST',
                'url'     : sSource,
                'data'    : aoData,
                'success' : fnCallback
              });
            }
	} );
} );
</script>

View ayarlarında dikkat etmeniz gereken en önemli nokta elbette aJaxSource

"sAjaxSource": '<?php echo base_url(); ?>index.php/welcome/ajax_pull',

 

NOT : Template olarak Bootstrap kullandım. Tasarımdan çok anlamıyosanız ve  arayüzde  işleri hızlı çözmek istiyorsanız tavsiye ederim tabiki de kendi çözümünüzü üretebilrisiniz. Datatables template editlemek için buraya ,  bootstrap template içinde buraya bakabilrsiniz.

NOT  : Github’dan indirmiş olduğunuz kütüphane gerçekten hayat kurtarıyor. Çok dinamik ve neredeyse bütün taleplerinize cevap veerecek kadar da genişletilebilir.   Ayrıntılı fonksiyonların kullanımı için buraya bakabilirsiniz.

Github Contact Info : 

Yusuf Ozdemir <[email protected]>

Vincent Bambico <[email protected]>

 

 

Projenin son halini buradan indirebilirsiniz

Projenin demosunu görüntelemek için buraya bakabilirsiniz.

 

 

Muharrem Tığdemir

Categories
Javascript NodeJS

NodeJS-Socket IO-Başlangıç

Merhaba Arkadaşlar ,

Kısaca nodejs kurulumu ve ilk uygulama ile ilgili bilgi vereceğim. Client side uygulamalarda çok gelişmiş olan Javascript server side teknolojilerde de hızlı gelişmeler gösteriyor. Bunların en güçlü örneği kesinlikle nodeJS. Güçlü bir community ve push , pop socket uygulamalarını hızlıca geliştirmek için çok basit , sosyal ağların kendilerinde ve ilgili üçüncül uygulamalarında vazgeçilmezi bunun yanında notification ve real time chat  sistemlerinde kullanılıyor vs vs.. örnekleri çoğaltabiliriz.

Capture

NodeJS’i buradan indirin kurulumu yapın. Ben windows versiyonunu kullanıyorum. İndirdiğimiz nodejs’i kurduktan sonra gerçekten başka bişey yapmaya gerek yok 😀

 

İlk uygulamamız için öncelikle node server’a script’i yüklemeliyiz. Bunun için herhangi bir yere javascript dosyası oluşturmalıyız.

var http = require('http');

http.createServer(function (request, response) {
    response.writeHead(200, {'Content-Type': 'text/plain'});
	console.log('NodeJS running!!');
    response.end('Hello World Muharrem Tığdemir\n');
}).listen(1338);

console.log('Server Running..');

Javascript dosyasını buradan indirebilirsiniz. Bu dosyayı D dizinine kayıt ederseniz aşağıdaki gibi kodu console’a yazmanız yeterli

D:>   node app.js

app.js dosyasını çalıştırdıktan sonra console’da

Server Running..

yazısını göreceksiniz. Bilmeniz gereken bir diğer noktada herhangi bir portu dinleyebileceğimiz tabiki , örneğin ben listen(1338); seçtim.

localhost:1338

girdiğinizde ekranda “Hello World”  console’da ise “NodeJS Running” yazılarını göreceksiniz..

 

Muharrem Tığdemir

 

 

 

Categories
Hatalar Javascript

Apprise Load File

Merhaba Arkadaşlar ,

Alternatif bir Dialog aracı olan Apprise inner HTML yazıları göstermekde çok kullanışlı  ancak dışarıdan dosya load ettiğimiz zaman over-scroll hatası oluşabiliyor. Bunun için küçük bir editleme gerekli ve devamında load fonksiyonuda var.

Apprise’ı kullanmamı öneren Dostum Oğuz Çabuk’a teşekkürler..

Apprise’ı indirmek için..

 

                    <style>
                    .apprise
                    {
                        overflow: scroll;
                        height: 70%;
                    }
                    </style>

 

<script>
function apprise()
{

     jQuery('#texter').load('/resume.doc', function(data){
        Apprise(data);
      });
}
</script>
Linke Tıklayarak Apprise’ı Load File deneyebilirsiniz -> CV’mi Görüntülemek için Tıklayın..