Jika anda melihat sistem blog seperti di blogspot atau wordpress, elemen utama yang anda nampak ialah tajuk , isi, komen dan tarikh blog dicipta.
Tugas pertama kita ialah membina satu sistem di mana kita boleh: 1. Baca posting secara detail
2. Edit posting
3. Senaraikan semua posting 4. Padam posting
5. Search posting
Struktur table posts
Sistem Blog yang akan dibina, akan menggunakan database table bernama posts yang akan dibina di dalam database blog_development. Table posts ini akan mempunyai kolum seperti berikut:
Nama Jenis Fungsi
id Integer,
auto_increment
Menyimpan no rujukan setiap posting
Title Varchar Menyimpan tajuk posting
Summary Text Menyimpan summary setiap posting
Content Text Menyimpan kandungan posting
Created Datetime Menyimpan tarikh posting dibina Updated Datetime Menyimpan tarikh akhir ubahsuai
posting
Is_published Integer Flag yang akan menentukan blog boleh dipaparkan kepada pembaca.
Save fail tersebut sebagai blog.php di dalam folder /blog/config/sql/
Seterusnya, jalankan arahan berikut menggunakan cake CLI di dalam MS-DOS. Kita akan gunakan dry mode untuk memastikan kod SQL yang dihasilkan
memenuhi kehendak sistem blog. Flag --dry akan menyebabkan CakePHP tidak melaksanakan arahan untuk membina table posts di dalam database
blog_development.
Arahan : cake –app blog schema run create blog -dry
Contoh SQL script yang dijana oleh arahan cake CLI. Untuk veteran SQL, anda sudah tentu dapat membaca maksud kod SQL di atas. Jika dilaksanakan, satu table bernama posts dengan field id,title,summary,content,updated,created dan
is_publish akan dibina di dalam database blog_development.
Tetapi command di atas tidak akan membina table bernama posts di dalam
database blog_development, anda perlu laksanakan arahan yang sama tetapi tanpa flag --dry. Setelah anda berpuashati dengans struktur table posts, sila laksanakan arahan berikut.
blog_development secara automatik.
Sekarang cuba anda buka perisian PHPMyAdmin di
http://localhost/phpMyAdmin. Pilih database blog_development di menu sebelah kiri dan paparan berikut akan terpapar.
Dengan mengunakan cake schema, saya dapat membina table secara automatik tanpa perlu menaip arahan SQL di dalam perisian phpMyAdmin.
Seterusnya, kita akan membina antaramuka sementara untuk table posts. Ianya akan dibina juga menggunakan cake bake cli. Antaramuka ini akan membolehkan saya menguji sistem blog yang asas dengan feature seperti
– Masukkan post – Senaraikan post – Kemaskini post – Padam post
Arahan cake –app blog bermaksud, saya menggunakan cakephp akan
menggunakan projek folder blog di dalam c:\xampp\htdocs\cake_projects. Flag – app akan memberitahu kepada CakePHP supaya menggunakan folder/projek blog. Saya akan membina Model dan Controller untuk table posts.
CakePHP Model
Model di dalam CakePHP adalah sumber data, dalam kes ini table posts akan diwakili oleh model bernama Post. Segala operasi untuk mengeluarkan dan
memasukkan data ke dalam table posts akan dilakukan oleh model bernama Post. Untuk itu saya perlu bina model bernama Post sebagai /blog/models/post.php
Save fail di atas sebagai post.php di dalam folder
c:\xampp\htdocs\cake_projects\blog\models. Sperti penerangan saya di atas, Model ialah kawasan di mana CakePHP bercakap dengan database MySQL. Dalam kes ini, Post merujuk kepada Model. Untuk membina model, struktur berikut perlu dipatuhi
1. Nama model mesti dimulakan dengan huruf besar seperti Post, User, Location
2. Nama model mesti singular ( tanpa penambahan s ) dan bukannya plural seperti Posts,Users
3. Nama model mesti dalam format CamelCase. Yakni dimulakan dengan huruf besar dan diikuti dengan huruf kecil
4. Jika anda ingin menggunakan 2 patah perkataan sebagai mode, gunakan CamelCase. Contohnya anda mempunyai table bernama user_settings, dan ingin membina model untuk table tersebut. Nama model yang perlu anda guna ialah UserSetting
5. Nama fail untuk Model mesti sama dengan nama model yang ditakrifkan di dalam kod. Nama fail mestilah berhuruf kecil dan jika mempunyai 2
Location ~ location.php
6. Fail model perlu disimpan di dalam folder /blog/models/* CakePHP Controller
Controller dalam CakePHP berfungsi untuk menerima data dari Post Model dan data akan dimanipulasi di Controller sebelum di hantar ke View. Fungsi Scaffold digunakan untuk melihat struktur table posts dengan menggunakan interface yang digenerate oleh CakePHP. Untuk membina Post Controller, fail bernama
posts_controller.php perlu dicipta dan diletakkan di dalam folder /blog/controllers.
Save fail di atas sebagai posts_controller.php di dalam folder c:\xampp\htdocs\cake_projects\blog\controllers.
Untuk membuat controller, proses di bawah perlu dipatuhi.
1. Controller akan menggunakan nama plural dari model. Jika kita
menggunakan model Post, controller akan menggunakan nama Posts dan diakhiri dengan ayat ‘Controller’.
2. Jika anda hendak membuat Controller untuk Model UserSetting, failnya akan bernama user_settings_controller.php
3. Nama Class mestilah dalam bentuk CamelCased dan disambung dengan ayat ’Controller’. Contohnya UserSettingsController extends AppController 4. Fail Controller mesti disimpan di dalam folder /blog/controllers/
Seterusnya saya ingin menguji fungsi Scaffold. Oleh itu saya akan buka alamat http://localhost/cake_projects/blog/posts
Seterusnya saya akan mencuba mengisi table posts dengan menggunakan interface CRUD yang disediakan. Hasilnya seperti berikut.
lengkap CRUD pertama anda. Maksud CRUD ?
C – Create ~ untuk cipta post R – Read ~ untuk membaca post U – Update ~ untuk kemaskini post D – Delete ~ untuk padam post
Apa itu Scaffold ?
Scaffold ialah satu fungsi di mana CakePHP akan membina interface untuk operasi CRUD yang menggunakan table posts sebagai sumber data. Kegunaan Scaffold ialah untuk melihat struktur table yang dibina menepati kehendak sistem.
Ciri-ciri Sistem Blog : versi 1
Seterusnya kita akan membuat aplikasi kita yang pertama dengan ciri-ciri berikut 1. Sistem perlu mempunyai index dan view untuk senaraikan Posting dan
untuk paparkan Posting mengikut id
2. Perlu mempunyai mekanisma CRUD untuk admin
3. Setiap Posting perlu disenaraikan di hadapan , contohnya alamat http://localhost/cake_projects/blog perlu memaparkan Posting terkini. 4. Posting di muka hadapan mesti menyenaraikan Posting terakhir dahulu 5. Hanya tajuk,tarikh dan ringkasan Posting sahaja di paparkan
6. Mesti ada link untuk membaca Posting yang lengkap.
7. Perlu ada link navigasi yang ringkas untuk panduan pembaca blog 8. Hanya paparkan Posting yang disahkan sahaja ( is_published = 1 ) 9. Hanya paparkan 10 Posting dan selebihnya boleh disenaraikan
menggunakan Pagination.
10.Blog perlu menggunakan Search Engine Friendly URL untuk memudahkan user memahami tajuk blog dia mereka terjumpa link di dalam hasil carian.
Kehendak : Sistem perlu mempunyai index dan view untuk senaraikan Posting dan untuk paparkan Posting mengikut id
Untuk memenuhi kehendak di atas, saya akan membina 2 action bernama index dan view di dalam Post Controller ).
Action index tugasnya ialah:
– Senaraikan posting mengikut format blog dan disusun mengikut tarikh. Blog yang terakhir akan dipaparkan dahulu
– Hanya senaraikan Tajuk, Ringkasan,Tarikh sahaja
– Mempunyai Pautan untuk membaca blog dengan lengkap
– Mempunyai navigasi untuk membantu pembaca menggunakan blog
Tugasan : Senaraikan posting mengikut format blog dan disusun mengikut tarikh. Blog yang terakhir akan dipaparkan dahulu.
• Pastikan anda telah menambah sekurang-kurangnya 10 posting menggunakan Post Scaffold sebelum meneruskan langkah di bawah. Penyelesaian : Untuk menyenaraikan posting, saya akan menggunakan action index dan boleh diakses melalui http://localhost/cake_projects/posts/index . Untuk itu saya akan menambah function index() di dalam Posts Controller dan akan membina index.ctp di dalam folder /blog/views/posts.index.ctp . Untuk memanggil data dari table posts, saya akan membuat function bernama getLatestPost() dalam fail Post Model.
/blog/model/post.php
Function atau dikenali sebagai method getLatestPost() akan mendapatkan kesemua data dari table posts menggunakan arahan $this->find(‘all’). Jika saya Cuma ingin mendapatkan satu data sahaja, arahan $this->find(‘first’) boleh digunakan. Untuk rujukan lanjut mengenai arahan $this->find, sila rujuk laman web :
http://book.cakephp.org/view/449/find
Seterusnya hasil carian akan dihantar menggunakan arahan return.
Tambah method index() dari baris 12 hingga ke 16. Variable $posts akan mendapat data dari arahan $this->Post->getLatestPost(). $this->Post merujuk kepada model Post, yakni sumber data yang digunakan untuk mendapatkan maklumat dari table posts. Method getLatestPost() pula merujuk kepada method yang kita bina sebelum ini di dalam fail /blog/models/post.php.
Memperkenalkan debug();
Di dalam programming, jadikan amalan untuk melihat struktur data dahulu sebelum dipersembahkan ke dalam View. Untuk itu, saya akan menggunakan fungsi debug() seperi di baris 15. Dalam kes ini variable $posts mempunyai data, dan saya akan gunakan debug($posts); untuk melihat data yang terkandung di dalamnya.
Untuk melihat hasilnya, sila ke alamat
Hasilnya adalah seperti di dalam screenshot di atas. Data disusun dalam bentuk Array() yang ditentukan oleh CakePHP. Setiap gugusan data dikumpulkan
mengikut model, dalam kes ini Post. Jika saya ingin mengeluarkan title blog dari variable $posts, saya akan melakukan arahan berikut
Echo $posts[0[‘Post’][‘title’]; /
Tetapi, saya akan menggunakan Foreach Loop untuk menyenaraikan kesemua data posts. Contoh :
<?php Foreach( $posts as $key=> $value ): ?>
…kesemua data akan dipaparkan di sini menggunakan variable $key atau $value <?php EndForeach; ?>
Apa itu $key=> $value ?
Ok, bayangkan anda ingin mengumpulkan data seperti nama pelara dalam kelas di dalam satu variable $nama, apa yang anda perlu buat ialah
<?php
$nama[] = ‘Ahmad’; $nama[] = ‘Raju’; $nama[] = ‘Ah Chong’; ?>
$nama ialah key,
Ahmad,Raju dan Ah Chong ialah value
Untuk mengeluarkan data di atas, anda perlu menggunakan Foreach Loop <?php
Foreach($nama as $key=>$value): Echo $key . ‘ = ’ . $value . ‘<br />’; Endforeach;
?>
Dan hasilnya seperti berikut nama = Ahmad
nama = Raju nama = Ah Chong
dahulu di dalam index action sebelum ianya boleh digunakan di dalam View index.ctp
Hanya perlu tambah kod di bari 18. Arahan $this->set(compact(‘posts’)); akan megambil nilai $posts dan terus boleh digunakan di dalam View.
Rujukan cuntuk compact() : http://php.net/manual/en/function.compact.php
Post Views
Views adalah tempat dimana persembahan data dilakukan, folder bernama posts perlu dibina di dalam folder /blog/views/ . Kemudian saya akan save fail bernama index.ctp di /blog/views/posts/index.ctp . Nama folder biasanya adalah plural kepada nama model. Contohnya jika model Post, nama folder ialah views. Jika nama model UserSetting, nama folder view ialah user_settings
Contoh bagaimana saya cipta folder posts di dalam folder
c:\xampp\htdocs\cake_projects\blog\views\ menggunakan MD-DOS. Anda boleh menciptanya guna Windows Explorer
Seterusnya buka fail baru di dalam Crimson Editor dan tulis kod seperti di bawah:
Save fail ini sebagai index.ctp di dalam folder /blog/views/posts/index.ctp . Fail View mesti diakhiri dengan extension .ctp ( Cake Template ) dan pastikan nama fail sama dengan nama method yang digunakan dalam Post Controller. Dalam kes ini, index(), maka nama view untuk action index() ialah index.ctp.
Untuk melihat hasilnya, sila buka alamat http://localhost/cake_projects/blog, dan papar berikut akan muncul.
Jika anda perhatikan, di bawah page tersebut, debug arahan SQL dipaparkan. Ada beberapa perkara lagi yang perlu dibetulkan dengan paparan index di atas.
– Susunan blog sepatutnya diterbalikkan dengan Posting terakhir akan dipaparkan dahulu
– Link untuk membaca kandungan blog
– Panel navigation untuk memudahkan pembaca pergi ke index semua setelah membaca blog.
CSS Untuk Navigation
Sila cipta fail bernama /blog/webroot/css/blog.css
CSS untuk DOM id navigation. Kod di atas ialah kod CSS ( Cascading Style Sheets ) yang digunakan untuk mengawal warna,saiz,kedudukan panel navigasi blog kita nanti.
Seterusnya, CakePHP perlu diberitahu untuk memanggil fail ini. Memperkenalkan LAYOUTS
Di dalam folder /blog/views/layout, ada terdapat satu fail bernama default.ctp. Fail ini berfungsi sebagai placeholder untuk keseluruhan projek blog saya ini. Jika saya melakukan perubahan di fail default.ctp, ianya akan diapply ke seluruh projek.
Tambah kod di line 38, dan save fail tersebut.
Seterusnya saya ingin menambah panel navigasi di dalam View index.
Refresh kembali action index anda, dan anda akan dapat paparan seperti di bawah
Betulkan Susunan Posting
Buka fail /blog/models/post.php dan letak kod di bawah:
Tambah kod seperti di baris ke 11 dan save fail post.php. Cuba refresh semula action index() dan kedudukan susunan akan berubah.
Title website adalah satu elemen penting dalam pembinaan blog, kerana jika pembaca ingin Bookmark page disukai, Browser akan mengambil nilai tag title. Contoh
<html> <head>
<title>Senarai Posting</title> </head>
Tag title di atas akan dibaca oleh browser dan juga search engine. Jadi adalah penting untuk saya ubahsuai layout default.ctp seperti di bawah :
Sila ubah fail /blog/views/layouts/default.ctp dan ubahsuai kod di baris 30
Ubah fail /blog/controllers/posts_controller.php. Tambah kod di baris 14. Save fail tersebut dah refresh action index anda. Cuba bookmark page tersebut dengan tekan CTRL + D di Mozilla.
Secara automatik satu popup akan terbuka dan nilai Page Title berjaya dibawa sebagai title.
Membina action view ( untuk melihat kandungan lengkap blog )
Kehendak : Di dalam action index, hanya senarai ringkasan blog sahaja yang dipaparkan. Bagaimana jika pembaca blog anda ingin membaca blog anda dengan lebih lengkap ?
Penyelesaian : Bina satu action bernama view dan hanya menerima 1 argumen sahaja, iaitu nilai $id. HTML link yang dijana di dalam index perlu membawa nilai $id supaya CakePHP dapat retrieve data berdasarkan nilai $id yang diberi. Nilai $id mesti dibawa menggunakan method http get. Contoh :
http://localhost/cake_projects/posts/view/13
Nilai 13 di atas adalah nilai $id yang dibawa menggunakan method http get. Langkah 1 : Bina method getPost() di dalam Model Post