Dunia Aturcara Laman Web [php,ruby,mysql,linux,apache]: CakePHP : Membina pagination seperti Digg.com

Dalam tutorial kali ini, kita akan menggunakan layout khas yang dicipta sendiri tanpa menggunakan CSS dari kod yang dijana oleh CakePHP.

Kita akan gunakan balik sistem dari tutorial kita sebelum ini , Sistem Pengurusan Fail / Attachments.

Untuk itu, kita akan cipta satu layout bernama digg.ctp di dalam folder app/views/layouts/.
Untuk membolehkan seluruh aplikasi CakePHP menggunakan layout digg.ctp, kita perlu ubah fail app/app_controller.php supaya menggunakan digg.ctp sebagai layout utama. Layout ini akan menggunakan CSS khas yang bernama digg.css akan akan diletakkan dalam folder app/webroot/digg.css.

Langkah 1 : bina layout digg.ctp dan save di dalam app/views/layouts/digg.ctp

<html>
<head>
<title>Sistem Pengurusan Fail</title>
<?= $html->css('digg'); ?>
</head>
<body>
<h1>Sistem pengurusan fail</h1>
<? $session->flash(); ?>
<?= $content_for_layout; ?>
</body>
</html>

Penerangan :

Di baris no 4, kita melaksanakan arahan supaya memanggil fail digg.css yang terletak di dalam folder app/webroot/css/digg.css
Di baris no 8, kod untuk paparkan mesej yang datang dari notis,ralat dan sebagainya
Di baris no 9, kod untuk paparkan hasil yang dijana oleh controller dan view

Seterusnya, cipta fail digg.css di app/webroot/css/digg.css

/* letak css di sini */
* {
  margin-left:0px;
  padding:0px;
}

body {
  background: lightblue;
  color: black;
  font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
  font-size:90%;
  margin: 30px;
}

Untuk membolehkan digg.ctp digunakan sebagai layout utama di dalam aplikasi CakePHP, kita perlu cipta satu fail bernama app/app_controller.php . App Controller ini berfungsi sebagai penghulu kepada semua controller di dalam sistem CakePHP. Sila lihat kod di bawah

<?php
class AppController extends Controller {
  # gunakan digg.ctp sebagai layout utama
  var $layout = 'digg';
}
?>

Sila lihat baris no 4.

Kemudian uji aplikasi Pengurusan Fail anda di http://localhost/attachments, hasilnya berbentuk seperti berikut :

Dengan menggunakan digg.css, kita boleh mengawal bentuk layout, jenis font dan warna sistem.

Langkah 2 : ubahsuai kod action index supaya menggunakan Pagination
url rujukan : http://book.cakephp.org/view/164/Pagination
Untuk menggunakan fungsi Pagination, kod action di dalam index mesti diubahsuai seperti berikut

class AttachmentsController extends AppController {
  var $name = 'Attachments';
  var $paginate = array(
                  # hanya keluarkan field yang perlu sahaja
                  'fields' => array('id','name','type','size','created'),
                  # buat susunan supaya order by id DESC
                  'order' => 'id DESC',
                  # limitkan item yang dipaparkan
                  'limit' => 2,
                   );

  # untuk paparkan senarai fail
  # untuk upload fail
  function index(){
    # melihat kandungan fail
    #debug($this->data);
    if( $this->data &&
        is_uploaded_file($this->data['Attachment']['file']['tmp_name']) ){

        # fail wujud dan file dah upload, kita nak baca bentuk binari
        # untuk simpan dalam database
        $filedata = fread(fopen($this->data['Attachment']['file']['tmp_name'], "r"),
                                     $this->data['Attachment']['file']['size']);

        # untuk beri nama kepada fail
        $filename = basename($this->data['Attachment']['file']['name']);

        # assignkan uploaded data ke bentuk cakephp
        $this->data['Attachment']['data'] = $filedata;
        $this->data['Attachment']['name'] = $filename;
        $this->data['Attachment']['size'] = $this->data['Attachment']['file']['size'];
        $this->data['Attachment']['type'] = $this->data['Attachment']['file']['type'];

        # save ke dalam database
        if($this->Attachment->save($this->data)){
          $this->Session->setFlash('Berjaya save ke database');
        } else {
          $this->Session->setFlash('Gagal save ke database');
        }

    }else{
      # fail tidak wujud dan beri mesej
      #$this->Session->setFlash('Tiada fail dikesan !');
    }

    # senaraikan data guna Pagination
    $attachments = $this->Paginate('Attachment');

    # setkan nilai ke index.ctp
    $this->set(compact('attachments'));
  } // tamat action index

} // tamat class

Langkah 3 :ubahsuai kod app/webroot/css/digg.css

/* letak css di sini */
* {
  margin-left:0px;
  padding:0px;
}

body {
  background: lightblue;
  color: black; 
  font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
  font-size:90%;
  margin: 30px;
}


/* Paging */
div.paging {
}

div.paging table{
}

div.paging a {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  border: 1px solid #02a6fb;
  text-decoration: none; /* no underline */
  color: #02a6fb;
}
div.paging a:hover, div.paging a:active {
  border: 1px solid #02a6fb;

  color: #000;
}
div.paging span.current {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  border: 1px solid #bbb;
  font-weight: bold;
  color: blue;
 background: #f2f2f2;
}

div.paging .disable{
  padding: 2px 5px 2px 5px;
  margin: 2px;
  border: 1px solid #BBB;
  text-decoration: none; /* no underline */
  color: blue;
 background: #f2f2f2;
}

/* Tables */
div.index table {
  background: #fff;
  border:1px solid #ccc;
  border-right:0;
  clear: both;
  color: #333;
  margin-bottom: 10px;
  width: 100%;
}
div.index th {
  background: #f2f2f2;
  border:1px solid #bbb;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  text-align: center;
}
div.index th a {
  background:#f2f2f2;
  display: block;
  padding: 2px 4px;
  text-decoration: none;
}
div.index th a:hover {
  background: #ccc;
  color: #333;
  text-decoration: none;
}
div.index table tr td {
  background: #fff;
  border-right: 1px solid #ccc;
  padding: 4px;
  text-align: center;
  vertical-align: top;
}
div.index table tr.altrow td {
  background: #f4f4f4;
}
div.index td.actions {
  text-align: center;
  white-space: nowrap;
}
div.index td.actions a {
  margin: 0px 6px;
}

Yang terakhir, ubah kod app/views/attachments/index.ctp seperti berikut :

<?= $form->create('Attachment', array('action' => 'index', 'type' => 'file')); ?>
<?= $form->file('file'); ?>
<?= $form->end('Muat Naik'); ?>

<? if(isset($attachments)): ?>






<? foreach($attachments as $a): ?>

<? endforeach; ?> 
   ID

   Nama

   Jenis

   Tarikh Muat Naik

   Saiz

   Operasi

   
   <?= $a['Attachment']['id'];?>

   <?= $a['Attachment']['name'];?>

   <?= $a['Attachment']['type'];?>

   <?= $time->timeAgoInWords($a['Attachment']['created']);?>

   <?= round($a['Attachment']['size']/1000); ?> kb

   

<?= $html->link('Muat turun', array('action' => 'download', $a['Attachment']['id'])); ?>

|

<?= $html->link('Hapus', array('action' => 'delete', $a['Attachment']['id']),null, 'Hapus fail ?'); ?>

   

 <?php echo $paginator->prev('<<', array(), null, array('class'=>'disable'));?>

 <?php echo $paginator->numbers(array('separator'=> ''));?>

 <?php echo $paginator->next('>>', array(), null, array('class'=>'disable'));?>

 
<? endif; ?>

ID	Nama	Jenis	Tarikh Muat Naik	Saiz	Operasi
<?= $a['Attachment']['id'];?>	<?= $a['Attachment']['name'];?>	<?= $a['Attachment']['type'];?>	<?= $time->timeAgoInWords($a['Attachment']['created']);?>	<?= round($a['Attachment']['size']/1000); ?> kb	<?= $html->link('Muat turun', array('action' => 'download', $a['Attachment']['id'])); ?> \| <?= $html->link('Hapus', array('action' => 'delete', $a['Attachment']['id']),null, 'Hapus fail ?'); ?>

Buka browser anda di http://localhost/attachments dan hasilnya adalah seperti berikut :

Dunia Aturcara Laman Web [php,ruby,mysql,linux,apache]

Thursday, September 17, 2009

CakePHP : Membina pagination seperti Digg.com

No comments:

Post a Comment

Search This Blog

Blog Archive

About Me

Live Traffic Feed