Tutorial CakePHP ini akan belajar bagaimana membuat pagination dan sorter/pengurut untuk daftar data yang akan ditampilkan.

Tutorial CakePHP Dasar Part III - Sorting, Pagination

Updated: 20 Mei 2014

Akhirnya serial tutorial CakePHP ini bisa saya lanjutkan. Mohon maaf lama nunggu tutorial CakePHP ini soalnya saya juga membuat tutorial-tutorial yang lainnya. Untuk melihat tutorial-tutorial saya, silakan klik #tutorial-cheyuz. Selain itu, kerjaan-kerjaan lain sangat menumpuk di to do list saya, hehe.. Jadi mohon maklum.

Ok, untuk tutorial pada part III ini sesuai janji saya kita akan membuat Pagination dan Sorting untuk data yang akan ditampilkan. Dengan menggunakan CakePHP, kita tidak "dikasih" ribet dalam pembuatan dua makhluk ini. Bagi yang sudah mempelajari menggunakan framework lain, seperti Codeigniter maupun framework lainnya, tentu sudah tidak asing lagi dengan dua istilah ini. Bagi yang belum tahu, pagination adalah suatu "page number" pada halaman website, lengkap dengan nomor halaman, tombol previous, dan tombol next. Simpelnya, coba kunjungi Google, kemudian cari sesuatu, nah di situ terdapat page number di bagian bawah.

Kita akan melanjutkan tutorial dari aplikasi yang pernah dibuat sebelumnya, yang terdapat pada Tutorial CakePHP Dasar Part II. Oh iya, sekarang level tutorial ini sudah masuk ke dalam level "Newbie", hehe...

Sebelum pagination dibuat, tambahkan data pada article kamu sebanyak mungkin pada url: http://localhost/blogku/artikel/tambah. Dimisalkan di sini kita membuat 10 data.

Pagination

Untuk membuat sebuah pagination pada CakePHP, kita harus mendefinisikan batasan (limit) untuk setiap list data yang ditampilkan. Caranya adalah dengan menambahkan kode berikut pada controller:

$this->paginate = array(
    'limit' => 3
);

Arti kode di atas yaitu definisikan batasan untuk data yang ditampilkan sebanyak 3 data.

Kemudian, setelah itu masih di controller yang sama, di bawah kode tersebut tambahkan kode berikut:

$data = $this->paginate('NamaModel');

Dengan menggunakan kode tersebut maka isi dari $data adalah model "NamaModel" dengan memakai pagination.

Kita implementasikan pada controller ArtikelController.php yang sebelumnya sudah dibuat, pastikan kode pada function index() adalah sebagai berikut:

function index()
{
  $artikel = $this->Artikel->find('all');
  $this->set('artikel', $artikel);
}

Nah, sebelum variable $artikel didefinisikan, kita akan membuat 2 kode di atas untuk dibuat di dalam function index tersebut. Dan karena kita akan menggunakan pagination, maka kode $artikel = $this->Artikel->find('all'); akan dihapus. Kodenya akan berubah menjadi seperti ini:

function index()
{
  $this->paginate = array(
      'limit' => 3
  );
  $artikel = $this->paginate('Artikel');
  $this->set('artikel', $artikel);
}

Untuk setting pada controller sudah selesai, selanjutnya kita akan memodifikasi file view, yaitu pada file /View/Article/index.ctp. Tambahkan3 baris kode berikut setelah tag </table>.

<div class="paging">
	<?php
	echo $this->Paginator->prev(
		' < Sebelumnya', array(), null, array('class' => 'prev disabled')
	);
	echo $this->Paginator->numbers(array('separator' => ''));
	echo $this->Paginator->next(
		'Selanjutnya >', array(), null, array('class' => 'next disabled')
	);
	?>
</div>

Catatan:
Pada CakePHP versi terbaru, helper Paginator secara default sudah diload oleh CakePHP. Jika misalnya Paginator undefined, maka kamu tinggal load helper Paginator dengan cara menambahkan kode:

public $helpers = array('Paginator');

Disimpan di dalam controller, tetapi di luar function, karena $helpers adalah properti/atribut dari class Controller.

Sorting

Sorting adalah teknik pengurutan data di dalam view supaya data dapat ditampilkan berdasarkan urutan tertentu (order). Cara memperlakukan sorting yaitu dengan cara mengklik nama field di setiap kolom data. Membuat Sorter pada CakePHP sangat sangat mudah, karena kita menggunakan helper Paginator yang sudah kita pakai sebelumnya. Langsung saja, kita buka file /View/Article/index.ctp, kemudian edit di setiap judul kolom pada table yang asalnya seperti ini:

<thead>
  <tr>
    <th>ID</th>
    <th>Judul</th>
    <th>Konten</th>
    <th>Tanggal Dibuat</th>
    <th>Aksi</th>
  </tr>
</thead>

Menjadi seperti berikut:

<thead>
  <tr>
    <th><?php echo $this->Paginator->sort('id','ID'); ?></th>
    <th><?php echo $this->Paginator->sort('judul','Judul'); ?></th>
    <th><?php echo $this->Paginator->sort('konten','Konten'); ?></th>
    <th><?php echo $this->Paginator->sort('created','Tanggal Dibuat'); ?></th>
    <th>Aksi</th>
  </tr>
</thead>

Function sort() pada helper Paginator berfungsi untuk mengubah nama field biasa menjadi sebuah sorter. Di dalamnya terdapat 2 buah argumen/parameter, yaitu nama field dan label. Setelah kita refresh, maka table akan langsung bisa diurutkan berdasarkan Judul, Konten, maupun Tanggal Dibuat. Caranya adalah dengan mengklik teks tersebut

Preview

Selamat mencoba

Stand By With Me, 
cheyuz@jagocoding.com

 


About Author

Cecep Yusuf

Hi, my name is Cecep Yusuf. However, in the virtual world I am more likely to use the name Cheyuz, which is an abbreviation of two words "Cecep" and "Yusuf". I am founder of Jagocoding.com, u can view more of me in Cheyuz.com


Comment & Discussions

  • Mas Capto (Guest)
    tutorial ini akan lebih komplit jika ada penambahan tutorial login dan hak akses, soalnya banyak newbie yang nyoba tapi masih gagal, termasuk saya :p

  • By Fauzi (Guest)
    mas maaf nih ane ganggu , knapa ya saat ane sort nama_sisiwa

    http://localhost/sim-prkerin/students/index/sort:namestudent/direction:desc
    tapi gak ada aksi (gak jalan sort nya) , trus apa yang harus di ubah gan


    class StudentsController extends AppController {
    public $uses = array('Student');

    public function index()
    {
    $this->paginate = array(
    'limit' => 3
    );
    $data_students = $this->paginate('Student');
    $this->set('data_students', $data_students);


    $this->loadModel('Jeniskelamin');
    $this->loadModel('Jurusan');
    $this->loadModel('School');
    $this->loadModel('Rombel');
    //$data_students = $this->Student->find('all');
    // $this->set('data_students', $data_students);


    }

    ----



    <table class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
    <th><?php echo $this->Paginator->sort('id', 'ID Siswa'); ?></th>
    <th><?php echo $this->Paginator->sort('namestudent', 'Nama Siswa'); ?></th>
    <th><?php echo $this->Paginator->sort('address', 'Alamat'); ?></th>
    <th><?php echo $this->Paginator->sort('hp', 'No HP'); ?></th>
    <th><?php echo $this->Paginator->sort('mayor', 'Jurusan'); ?></th>
    <th><?php echo $this->Paginator->sort('email', 'Email'); ?></th>
    <th><?php echo $this->Paginator->sort('ttl', 'TTL'); ?></th>
    <th><?php echo $this->Paginator->sort('gender', 'JK'); ?></th>
    <th><?php echo $this->Paginator->sort('school', 'Sekolah'); ?></th>
    <th>Action(s)</th>
    </tr>
    </thead>
    <tbody>
    <?php foreach($data_students AS $r): ?>
    <tr>
    <td><?php echo $r['Student']['id']; ?></td>
    <td><?php echo $r['Student']['name']; ?></td>
    <td><?php echo $r['Student']['address']; ?></td>
    <td><?php echo $r['Student']['hp']; ?></td>
    <td><?php echo $r['Jurusan']['namejurusan']; ?></td>
    <td><?php echo $r['Student']['email']; ?></td>
    <td><?php echo $r['Student']['ttl']; ?></td>
    <td><?php echo $r['Jeniskelamin']['namejk']; ?></td>
    <td><?php echo $r['School']['nameschool']; ?></td>
    <td><?php echo $this->Html->link('Ubah', array('action' => 'ubah_siswa', $r['Student']['id']),array('class'=>'ubah')); ?> |
    <?php echo $this->Html->link('Hapus', array('action' => 'hapus', $r['Student']['id']),array('class'=>'ubah'),
    array('confirm'=>'Apakah Anda yakin akan menghapus data ini?')); ?></td>
    </tr>
    <?php endforeach ?>
    <td colspan="10">

    <div class="paging">
    <?php
    echo $this->Paginator->prev(
    ' < Sebelumnya', array(), null, array('class' => 'prev disabled')
    );
    echo $this->Paginator->numbers(array('separator' => ''));
    echo $this->Paginator->next(
    'Selanjutnya >', array(), null, array('class' => 'next disabled')
    );
    ?>
    </div>





    ------------------------------------
    Dibantu yah mas ....

  • priyo
    kalo misal pagination yang melibatkan tabel INNER JOIN gimana ya? apakah sama ?, mohon pencerahanya. karena tak coba selalu gagal dengan pesan unknown column.

    • Cecep Yusuf

      Itu bisa langsung asosiasikan dengan model yang mau dijoin, banyak macam2 asosiasi, bisa dicek di sini mas: http://book.cakephp.org/2.0/en/models/associations-linking-models-together.html
      Saya belum buat tutorialnya :)


  • Ahmad Maulana
    gan error Invalid argument supplied for foreach() [APP\View\Artikel\index.ctp, line 13]

    • Cecep Yusuf

      Coba didebug variablenya, caranya debug($data). kalo datanya tidak keluar berarti belum keselect modelnya.


  • Arfan (Guest)
    Thanks gan buat tutoestaterialnya, ngebantu ane bgt... sukses trus buat jagocoding.com

  • Please LOGIN before if you want to give the comment.