Menjadi Pembangun CakePHP
Penulis : Azril Nazli Alias
Kerjaya : Trainer PHP/MySQL, CakePHP, Linux System Administration, E Commerce / Marketing, Freelance Web Developer
Pengalaman Programming : Sejak 1998 Email : azril.nazli@gmail.com
Facebook : http://facebook.com/azrilnazli Tarikh : 1 January 2010
Menjadi Pembangun Laman Web Open Source
Pembangunan laman web ialah satu kerja yang memerlukan anda tahu banyak teknologi dan juga berbagai bahasa aturcara. Membangunkan laman web ialah satu kerjaya yang menyeronokkan dan juga memberi pendapatan lumayan disebabkan oleh permintaan tinggi dari sektor swasta dan juga awam tetapi dengan syarat anda perlulah kemaskini pengetahuan dengan teknologi terkini.
Tugas-tugas am pembangun laman web adalah seperti berikut
1. Memahami kehendak pelanggan dan membantu mereka membuat URS ( User Requirement Spec )
2. Memastikan server mengikuti spec untuk development dan juga production 3. Membina skema pengkalan data ( database schema )
4. Memastikan kod-kod dibackup dan mempunyai sistem versioning . 5. Mencari bugs di dalam sistem
6. Membuat Unit Test terhadap sistem 7. Memilih bahasa aturcara yang sesuai
( PHP,Ruby,Java,Perl,Coldfusion,ASP )
8. Memilih perisian pengkalan data yang sesuai ( MySQL, Oracle,PostgreSQL )
9. Memilih sistem operasi yang sesuai ( Linux, Windows, FreeBSD ) 10.Membina kod asas HTML dan membantu Pereka Laman Web ( Web
Designer )
11.Menentukan sistem navigasi dan kepuasan pengguna. ( User Experience & Usability )
12.Berupaya menyelesaikan masalah dalam masa yang singkat 13.Memastikan sistem boleh dikemaskini dikemudian hari
14.Membina dokumentasi lengkap untuk manual pembangun ( API Documentation )
15.Memastikan keselamatan laman web di peringkat tertinggi
Jelas di sini, tugas seorang pembangun laman web merangkumi banyak aspek. Tidak terhad kepada aturcara semata-mata, seorang pembangun perlu mengetahui selok belok server, pengetahuan asas tentang rangkaian dan juga web design.
Cabaran utama pembangun laman web semakin hari ialah untuk deliver hasil kerja mereka dalam masa yang singkat dan mudah untuk diubahsuai mengikut kehendak pelanggan. Contohnya jika pelanggan tiba-tiba ingin menambah feature seperti search engine dan ianya perlu disiapkan dalam masa 1 jam.
Buku ini akan mengubah cara anda membina laman web. Secara tradisionalnya, pembangun laman web yang menggunakan PHP dan MySQL akan membuat sistem tanpa menggunakan framework. Memang benar, kelajuan aturcara anda memang laju disebabkan anda tidak perlu mengikut undang-undang dalam membina laman web. Anda boleh letak fail secara sesuka hati anda, membuat panggilan database di setiap fail, malah anda tidak perlu risau dengan struktur sistem anda. Tetapi, ianya akan menjadi masalah yang besar jika sistem anda perlu dinaik taraf di kemudian hari dan ianya sudah tentu memerlukan ramai
pengaturcara untuk memahami cara anda membuat sistem. Lebih teruk lagi jika sistem anda perlu dimigrate ke pengkalan data Oracle dari MySQL dan bayangkan anda ada beribu-ribu fail yang memerlukan perubahan dan di ketika itu anda
mungkin rasa menyesal dan ingin berubah ke kerjaya yang tidak memeningkan kepala anda.
Membina laman web menggunakan framework akan menjimatkan masa anda dalam jangka masa yang panjang dan buku ini akan membuatkan anda gembira dengan tugas sebagai pembina laman web.
Bagaimana untuk menjadikan elemen kegembiraan wujud di dalam dunia aturcara ?
2. Terdapat 5 juta result dari hasil carian Google berkaitan ‘CakePHP’ 3. Terdapat lebih kurang14,000 ahli yang aktif di CakePHP Google Group 4. Boleh generate code secara automatik menggunakan command line
5. Mempunyai berbagai Helpers seperti Form,HTML,Ajax,Javascript,XML dan banyak lagi
6. Menggunakan SEF URL ( Search Engine Friendly ) 7. Struktur yang hampir sama dengan Ruby On Rails
Oh ya, saya lupa bercerita tentang Ruby On Rails atau RoR. Ianya mula popular sekitar tahun 2006 disebabkan menggunakan konsep MVC ( Model View
Controller ) dan tujuan utama menggunakan RoR ialah untuk membuatkan pembangun laman web gembira semasa membina sistem. ( sila google Ruby On Rails )
Secara teknikalnya, CakePHP ialah
“ CakePHP is a rapid development framework for PHP which uses commonly known design patterns like ActiveRecord, Association Data Mapping, Front Controller and MVC. The primary goal is to provide a structured framework that enables PHP users at all
levels to rapidly develop robust web applications, without any loss to flexibility. “
Pengetahuan Asas
Buku ini ditujukan kepada semua orang dengan syarat anda mempunyai minat untuk menjadi pembangun laman web. Ya, buku di tujukan untuk semua peringkat masyarakat di luar sana dengan pengetahuan asas menggunakan komputer dan
internet. Sepantas harimau kumbang berlari, dia perlu belajar berjalan dahulu sebelum belajar berlari. Tapi sebaiknya jika ada mempunyai asas-asas berikut
– PHP dan SQL programming
– HTML, CSS dan Javascript scripting
– Apache dan MySQL system administration Apa yang kita bina ?
Bayangkan membuat sesuatu yang mengembirakan contohnya buat blog. Blog ialah satu medium di mana anda boleh mengasah bakat anda sebagai pembangun laman web. Jadi kita akan membina sistem blog yang mempunyai elemen-elemen seperti berikut :
1. Senarai posting anda 2. Komen untuk setiap post
3. Sistem login untuk admin , editor dan pelawat 4. Search engine
5. Sistem rating untuk post dan juga komen
6. Statistik pelawat dan juga posting yang popular 7. Sistem tag & kategori untuk setiap post
8. Sistem RSS ( Really Simple Syndication ) 9. Dwi bahasa ( Bahasa Inggeris dan Melayu ) 10.Sistem penunjuk status pemilik blog ala Twitter Teknologi yang terlibat
Sekarang adalah zaman Web 2.0 dan skill-skill baru yang akan dipelajari adalah seperti berikut 1. HTML 2. CSS 3. Javascript 4. AJAX 5. PHP
cuba cari maksudnya.
Perisian yang perlu anda download
Saya adalah pengguna sistem operasi Linux sejak tahun 1998 dan sehingga kini kesemua hasil kerja saya adalah menggunakan Linux sepenuhnya. Tetapi di dalam, buku ini saya akan menggunakan platform Windows ( Windows Vista Home ). Jadi perisian yang saya senaraikan di bawah adalah untuk platform Windows sahaja.
# Kategori Nama URL
1 Development Server
XAMPP Lite http://www.apachefriends.org
2 Text Editor Crimson Text Editor http://www.crimsoneditor.com
3 Version Control Tortoise SVN http://tortoisesvn.net 4 Ajax Framework ScriptAculoUs http://script.aculo.us 5 Ajax Framework Prototype http://www.prototypejs.org 6 PHP Framework
CakePHP 1.2.5 Stable http://www.cakephp.org
7 Browser Mozilla Firefox http://getmozilla.com 8 Browser
Debugger
Sila download kesemua fail di atas dan simpan di dalam satu folder. Apa itu XAMPP ?
XAMPP ialah koleksi perisian asas untuk membolehkan saya menjalankan Apache web server dan juga MySQL database server di dalam persekitaran sistem operasi Windows. Secara amnya, Apache web server akan menggunakan port 80 di dalam komputer kita dan MySQL akan menggunakan port 3306. Untuk memastikan web server kepunyaan saya berjaya di install, saya cuma perlu buka alamat web
http://localhost:80 atau secara singkatnya http://localhost dan web server akan memaparkan website. Disamping itu, XAMPP datang sekali dengan bahasa
perisian PHP yang akan digunakan oleh framework CakePHP di dalam projek blog ini nanti.
Install XAMPP
Saya menggunakan XAMPP versi lite. Untuk install, sila ikuti cara-caranya di http://www.apachefriends.org/en/xampp-windows.html . Untuk PATH
installation, saya gunakan c:\xampp. Setelah anda install xampp, klik ikon XAMPP di Desktop anda dan jangan tick running sebagai service. Cuma start 2 service sahaja, iaitu Apache dan MySQL. Klik menu start dan jika Windows Vista tanya soalan untuk block/unblock service berikut, pilih unblock. Setelah anda berjaya running 2 service itu ( Apache & MySQL ), gunakan Mozilla Firefox dan buka alamat http://localhost atau http://127.0.0.1. Anda akan nampak XAMPP default page seperti gambar rajah di bawah.
Pastikan perkataan ‘Running’ dipaparkan disebelah Apache dan MySql
Muka hadapan jika anda membuka alamat http://localhost atau http://127.0.0.1 di browser Mozilla Firefox anda.
Pengenalan kepada CakePHP Framework URL : http://www.cakephp.org
CakePHP ialah satu framework yang menggunakan PHP sebagai bahasa aturcara sokongan. Ia mengambil inspirasi Rapid Application Development yang
diperkenalkan older framework Ruby On Rails. CakePHP boleh dijalankan di dalam persekitaran Windows, Linux,Freebsd dan Mac OS.
CakePHP menggunakan konsep MVC dalam pembinaan laman web. MVC bermaksud Model, View dan Controller
Apa itu Model ?
Model ialah gateway untuk akses data. Data boleh berbagai bentuk seperti fail CSV, database, LDAP. Contoh fail untuk Post Model ialah
Apa itu Controller ?
Sesudah data dipanggil dari sumber, tugas Controller ialah untuk memanipulasi data sebelum di hantar ke View. Di dalam Controller, saya boleh panggil data dari berbagai sumber seperti User,Post,Comment dan kemudiannya digabungkan untuk di hantar ke View. Contoh fail untuk Post Controller ialah
/app/controllers/posts_controller.php
Apa itu View ?
View ialah tempat data dipersembahkan kepada client. Persembahan data boleh berbagai bentuk seperti HTML,JSON,Javascript,XML malah text sahaja. View ialah tempat di mana CakePHP berinteraksi dengan pengguna. Setiap action akan mempunyai viewnya sendiri, contohnya Add Action, ianya merujuk kepada satu method untuk Post Controller bernama Add dan akan mempunyai satu fail View bernama /app/views/posts/add.ctp. Extension .ctp bermaksud Cake Template.
Struktur direktori Projek CakePHP
Contoh Struktur folder projek bernama Engineering di dalam CakePHP. CakePHP mempunyai struktur direktorinya sendiri.
Engineering/ ~ mewakili nama projek
Engineering/app/ ~ folder aplikasi utama untuk projek Engineering
Engineering/app/models/ ~ menyimpan fail-fail Model
Engineering/app/plugins/ ~ menyimpan fail-fail untuk Plugin Engineering/app/tests/ ~ menyimpan fail-fail untuk Unit Test Engineering/app/tmp ~ folder sementara. Perlu writable
Engineering/app/vendors/ ~ folder untuk menyimpan 3r party vendor script. Contohnya phpThumb, Zend library ,Pear library
Engineering/app/views/ ~ folder untuk menyimpan views untuk setiap action dalam controller. Setiap views akan disimpan dalam foldernya sendiri contohnya views/posts akan menyimpan semua fail view untuk model posts.
Engineering/app/webroot ~ folder untuk public dan menyimpan fail-fail untuk image,css dan javascript.
Engineering/cake ~ folder untuk libray core CakePHP. Install CakePHP di dalam XAMPP
Sebelum itu, baik saya terangkan bagaimana struktur direktori sistem blog ini. Sepertimana yang kita tahu, XAMPP akan diinstall di c:\xampp dan directory c:\xampp\htdocs akan menyimpan kesemua fail-fail yang boleh diakses melalui web server. Jika PC anda mempunyai alamat 10.0.0.1 dan anda berada di dalam rangkaian, rakan anda boleh mengakses fail-fail dan direktory menerusi alamat http://10.0.0.1 dengan syarat Apache web server sedang berjalan.
Jadi di dalam kes ini, saya akan download CakePHP 1.2.5 stable ( .zip ) dan extract sebagai folder c:\xampp\htdocs\cake_projects\
Extrak fail tersebut ke folder folder cake_1.2.5/ di dalam Desktop
Masuk ke dalam folder cake_1.2.5/ dan akan jumpa satu folder bernama cake_1.2.5/ . Rename folder tersebut menjadi cake_projects. Copy/cut folder tersebut ke dalam folder c:\xampp\htdocs
Konfigurasi CakePHP
Untuk memastikan anda berjaya install CakePHP dengan jayanya, sila buka alamat http://localhost/cake_projects/ menggunakan Mozilla Firefox, dan anda akan dapat melihat page seperti berikut :
Jelas di sini anda perlu membetulkan 2 perkara iaitu : 1. Betulkan nilai Security.salt di dalam fail
c:\xampp\htdocs\cake_projects\app\config\core.php ( line 151 ) kepada nilai lain ( asalkan bukan default )
2. Bina database bernama blog_development dan rename fail bernama c:\xampp\htdocs\cake_projects\config\database.php.default kepada
database.php di dalam folder yang sama. Masukkan nilai yang betul untuk username,password dan nama database di dalam fail database.php.
Ubah nilai Security.salt kepada nilai ‘projek_blog_cakephp_2010’ Buat database bernama blog_development
MySQL database adalah pilihan utama di dalam projek ini. Untuk memanipulasi pengkalan data MySQL, saya akan gunakan perisian PHPMyAdmin yang telah datang sekali dengan XAMPP. Untuk akses ke PHPMyAdmin, sila ke alamat berikut
http://localhost/phpMyAdmin dan anda akan dapat paparan panel PHPMyAdmin. Sila cari fungsi untuk create database dan masukkan nilai ‘blog_development’
Klik create setelah memasukkan nilai blog_development.
Kini , untuk membolehkan CakePHP berhubung dengan MySQL database, settingnya adalah seperti berikut
– Username : root
– Password : < tiada password > – Host : localhost
Dengan menggunakan Crimson Editor, edit fail database.php yang terletak di c:\xampp\htdocs\cake_projects\app\config\database.php dan ubah nilai seperti di atas. Save fail tersebut sebagai database.php dan buka alamat
Kemudian, sila refresh browser anda di alamat http://localhost/cake_projects, dan sepatutnya anda akan mendapat 4 baris hijau seperti di atas.
Maksud baris hijau mengikut urutan
1. Baris pertama berkisar berkenaan temporary folder. CakePHP memerlukan satu folder tmp/ yang terletak di /app/tmp . Pastikan folder ini writable dan jika membuat dalam Linux, pastikan anda set kan permission chmod 777 2. Baris ke 2 bercerita tentang CacheEngine. Cakephp menyokong perisian
caching untuk melajukan sistem. FileEngine digunakan secara default. Antara perisian cache engine yang disokong ialah APC, MemCache dan XCache
3. Baris ke 3 pula memberitahu anda fail konfigurasi /app/config/database.php telah wujud dan boleh digunakan
Antara satu kelebihan CakePHP, ia mempunyai CLI ( command line interface ) yang akan membantu pembangun laman web dengan menggunakan MS-DOS command line.
Seterusnya, cipta satu fail bernama cake.bat ( windows batch file) di lokasi c:\xampp\htdocs\cake_projects\cake.bat . Sila tulis kod seperti di bawah.
Contoh kandungan kod fail cake.bat
Save fail tersebut dan kemudian buka terminal MS-DOS anda dan pergi ke folder c:\xampp\htdocs\cake_projects\
Arahan : cd c:\xampp\htdocs\cake_projects
Sekarang, anda sudah boleh menggunakan cake CLI . Cuba taip arahan: cake dan tekan [ENTER].
Paparan seperti di atas akan muncul. Saya ingin membina satu projek bernama blog dan ianya akan disimpan dalam folder c:\xampp\htdocs\cake_projects\blog . Sistem ini akan diakses melalui alamat http://localhost/cake_projects/blog
Jadi untuk membina projek bernama blog arahan berikut akan dilaksanakan arahan: cake bake project
Kemudian paparan seperti di bawah akan ditunjukkan dan anda perlu isi lokasi projek blog anda
Saya memberi nilai c:\xampp\htdocs\cake_projects\blog dan tekan [ENTER] Seterusnya anda akan ditanya 2 soalan. Sila tekan Y untuke kedua-dua soalan dan cake CLI akan membina projek blog anda dan output seperti di bawah akan
Paparan selepas cake CLI berjaya bina projek blog
Kemudian cake CLI akan bertanya soalan tentang konfigurasi database. Kita akan menggunakan objek default untuk menyimpan setting database. Sila ikut
konfigurasi seperti di atas. Tekan y jika anda bersetuju dengan konfigurasi yang disediakan.
Paparan setelah berjaya membuat konfigurasi database untuk projek blog dengan menggunakan cake CLI.
Menguji sistem blog
Sila buka alamat http://localhost/cake_projects/blog, dan anda akan dapat papar seperti di bawah,
Ringkasan Bab 1
Dalam buku anda akan membina berbagai-bagai projek, tidak terhad hanya membina blog sahaja. Contohnya anda membina sistem bernama Event, untuk mengaksesnya hanya perlu membina projek di folder
c:\xampp\htdocs\cake_projects\ dan http://localhost/cake_projects/event
Folder c:\xampp\htdocs\cake_projects\ akan menjadi placeholder untuk berbagai-bagai jenis projek yang saya akan tulis dalam buku ini.
Bab 2 : Membina sistem Posting
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
Langkah 2: Bina action view() dalam Post Controller
Baris 24 hingga 34
Tambah function view() di bawah function index() dan sebelum penutup class. Save action view di dalam fail /blog/controllers/posts_controller.php.
Langkah 3 : Tambah View view.ctp untuk action view di dalam folder /blog/views/posts/
Save fail ini sebagai view.ctp di dalam folder /blog/views/posts/ Langkah 4 : Ubahsuai view index.ctp untuk tambah link
Baris 17 hingga 23
Tambah kod dari baris 17 hingga 23 di dalam fail /blog/views/posts/index.ctp. Langkap 5 : Uji sistem blog anda
Buka alamat http://localhost/cake_projects/blog/posts/ , paparan adalah seperti berikut
Blog boleh dibaca dengan sepenuhnya. Perhatikan juga link navigation di atas dan juga back link di bawah. Dengan design sebegini, pembaca blog saya boleh
menggunakan sistem navigasi untuk kemudahan mereka membaca blog. Apa yang berlaku jika tidak passing $id ?
Jika anda perhatikan kod untuk action view() dalam Post Controller,
Saya membuat checking untuk mengesan kehadiran nilai $id. Jika $id tidak wujud, arahan redirect() akan dilaksanakan ke action index() dan disertakan dengan mesej.
Jika saya memasukkan alamat http://localhost/cake_projects/blog/posts/view , sistem akan redirect ke index dan memberi mesej ‘Invalid ID’.
Bagaimana pula jika pembaca menghantar $id yang tidak wujud di dalam database ?. Untuk mengesan data yang tidak wujud, saya akan membuat code seperti di bawah
Data yang tidak wujud akan memberikan nilai empty kepada variable $post. Jadi saya Cuma perku periksa samaada nilai $post adalah empty, jika benar, redirect ke index dan beri mesej ‘Post not exist’ kepada pembaca. Senario ini biasanya berlaku jika search engine capture data yang lama dan pemilik blog telah padam daripada database.
Pagination
Bagaimana jika Posting anda sudah terlalu banyak ? Gunakan Pagination Helper untuk memudahkan pembaca blog membaca posting-posting lama anda. Saya akan membuat blog pagination dengan 10 posting setiap page.
*Buka alamat http://localhost/cake_projects/blog/posts/add untuk tambah data Ubahsuai index action di dalam Post Controller seperti berikut
Baris 19 hingga 22
Perhatikan saya ‘matikan’ baris 17 untuk memberi laluan kepada Pagination Helper. Baris ke 20 ialah untuk memberi nilai jumlah post yang perlu dipaparkan.
Salin kod di atas ke dalam fail View index di /blog/views/posts/index.ctp. Salin di bahagian bawah fail tersebut.
Buka alamat http://localhost/cake_projects/blog/posts, dan blog anda kini sudah mempunyai pagination di bahagian bawah.
Rujukan lanjut mengenai Pagination :
Helper Time dan Text
CakePHP mempunyai berbagai-bagai helper yang boleh kita guna untuk membantu membuat coding dengan cepat dan kemas. Contohnya, saya ingin
– mengubah tarikh ~Time Helper
– membuat autolink supaya URL dalam post ~ Text Helper – keluarkan tempoh masa blog di hantar ~ Time Helper
Buka fail Post Controller anda, /blog/controllers/posts_controller.php, dan tambah kod Helpers seperti berikut. Saya akan menggunakan 2 Helpers, Text dan Time
Baris 10
Nilai var $helpers mesti dimulai dengan huruf besar dan diletakkan di dalam
format array();. Seterusnya ubahsuai fail Index View di /blog/views/posts/index.ctp dan ubahsuai kod seperti di bawah :
Ba ris 12,13 dah 15
dan perhatikan perubahan.
Action untuk Add,Edit dan Delete
Setakat ini, saya telah membuat 2 action, iaitu Index dan juga View. Untuk Add ( Tambah ) Post, saya akan gunakan admin routing dengan beranggapan hanya admin sahaya yang boleh melakukan operasi add,edit dan juga delete. Jadi, untuk manage blog, saya akan menggunakan URL seperti berikut :
http://localhost/cake_projects/blog/admin/posts/index ~ Index http://localhost/cake_projects/blog/admin/posts/add ~ Add http://localhost/cake_projects/blog/admin/posts/edit/12 ~ Edit http://localhost/cake_projects/blog/admin/posts/delete/12 ~ Delete
Untuk membolehkan saya menggunakan admin routing, saya perlu mengubahsuai fail /blog/config/core.php dan enablekan admin routing seperti berikut :
Save fail tersebut, dan edit semua fail Post Controller di
/blog/controllers/posts_controller.php dan tambah kod berikut :
Seterusnya, bina fail View untuk action admin_index() di dalam sebagai /blog/views/posts/admin_index.ctp
Mari kita cuba admin routing. Buka alamat
http://localhost/cake_projects/blog/admin/posts/index. Paparan seperti berikut akan keluar.
Seterusnya, kita akan bina sistem index untuk menyenaraikan kesemua posting blog kita. Kembali semua ke action admin_index()
limit anda boleh letak nilai selain dari 2 contohnya 10. Elements
Element di dalam CakePHP ialah satu fail yang diguna berulangkali. Dalam kes ini, kod HTML/PHP untuk Pagination akan digunakan banyak kali di dalam sistem. Oleh itu saya akan mencipta satu fail bernama paging.ctp di dalam folder /blog/views/elements/ .
Save sebagai /blog/views/elements/paging.ctp
Untuk memanggil fail paging.ctp di dalam admin_index.ctp, saya akan buat kod seperti di bawah
<?php echo $this->element(‘paging’); ?>
CakePHP akan secara automatik mencari fail bernama paging.ctp di dalam folder tersebut. Seterusnya, ubahsuai fail admin_index.ctp seperti kod di bawah :
Sekarang, anda telah mempunyai antara muka admin index. Antara muka ini khas untuk admin mengawal Posting blog anda seperti tambah,edit dan juga padam Post. Jika anda perhatikan, link untuk Edit dan Delete, mempunyai flag admin => true. Kod ini bermaksud untuk mengarahkan CakePHP supaya menghasilkan link seperti
http://localhost/cake_projects/blog/admin/posts/edit/1 http://localhost/cake_projects/blog/admin/posts/delete/1 Manakala link untuk view pula, berbentuk seperti : http://localhost/cake_projects/blog/posts/view/1
Dengan cara ini, saya boleh membuat pemeriksaan, hanya usergroup admin sahaja yang boleh mengakses fungsi tambah,padam dan edit di dalam sistem.
Tugasan : Sila tambah navigation dengan menggunakan BreadCrumb dari Hml Helper.
Action Add
Untuk menambah Posting ke dalam sistem, saya perlukan satu action yang akan menerima data dari HTML Form dan akan melakukan proses validation sebelum data boleh dimasukkan ke dalam database dan memberi mesej error jika ada masalah. Saya akan bina skeleton untuk action dan view untuk add
Tambah kod di atas di baris akhir fail /blog/views/posts/admin_index.ctp
Seterusnya ubah Post Controller anda dan tambah kod berikut di dalam action admin_add()
Save Post Controller.
Cuba buka alamat http://localhost/cake_projects/blog/admin/posts, anda akan nampak link Add New Post di sebelah bawah kanan, klik link tersebut, dan paparan berikut akan keluar.
http://localhost/cake_projects/blog/admin/posts/add . Cuba isi data seperti di atas dan klik button Submit.
Anda akan dipaparkan nilai yang dihantar oleh action Add dengan menggunakan fungsi debug($this->data) di dalam action Add()
key adalah berdasarkan nama table field sepertimana yang terdapat di dalam database. Data yang dihantar oleh Form, disimpan di dalam satu array value bernama $this->data. Jadi, saya boleh anggap variable $this->data ialah satu array() yang sepatutnya penuh dengan data. Dan saya boleh membuat checking dengan kod if(!empty($this->data)) untuk memastikan variable $this->data dipenuhi dengan nilai yang sepatutnya.
Form Helper
Rujukan : http://book.cakephp.org/view/182/Form
CakePHP secara automatik dapat mengesan jenis Form Field yang dikeluarkan berdasarkan jenis field di dalam table. ( Convention over Configuration )
Tetapi ada ketikanya anda ingin membina Form dengan setting anda sendiri seperti Ingin bina form header dengan method = get dan action ke /users/info
Akan hasilkan kod Form Header seperti
Untuk jenis-jenis Form Field pula, anda boleh melihat di sini , http://book.cakephp.org/view/204/Form-Element-Specific-Methods
Sila cuba setiap Form Helper method yang disediakan oleh CakePHP. Contoh di bawah ialah saya ingin membina dropdown menu menggunakan data yang saya bina sendiri.
Hasilnya di dalam Mozilla,
Save data ke dalam database
Untuk save data yang dihantar dari CakePHP Form Helper, arahan berikut akan dilaksanakan jika controller berjaya detect kehadiran variable $this->data , contohnya
$this->Post->create(); // initiate ada record baru
$this->Post->save( $this->data ); // save ke dalam table posts
Post Model akan digunakan untuk melakukan operasi ini dan ianya akan di panggil di dalam Post Controller. Kod $this->Post bermaksud, menggunakan objek Post Model. Seterusnya, saya akan mengubah admin_add() action supaya data berjaya disimpan di dalam database.
Baris 65 - 70
Ubahsuai action admin_add() untuk menambah fungsi save. Jika berjaya save, bagi mesej ‘Post successfully added’ dan redirect ke action index(). Seterusnya cuba anda klik link Add New Post di index ( di dalam Mozilla ) dan tambah data dengan klik submit.
sahaja, anda sudah berjaya membuat sistem untuk menambah data ke dalam database.
Form Validation
Rujukan : http://book.cakephp.org/view/125/Data-Validation
Form Validation ialah satu mekanisme di mana saya perlu menapis dahulu input dari user sebelum data di simpan di dalam database. Untuk membuat form
validation di dalam sistem blog, saya perlu meletakkan rules di dalam fail /blog/models/post.php .
Buat masa ini saya hanya mempunyai 1 rule sahaja untuk setiap field di dalam table posts, iaitu data untuk title,summary dan content tidak boleh kosong ( empty ).
Baris 13 - 18
Skrg, cuba anda hantar Post tanpa mengisi apa-apa nilai di dalam form field. CakePHP akan memaparkan error untuk setiap field.
Edit Post
Seterusnya, saya akan membuat mekanisme untuk edit Post. Secara amnya,
pemilik blog akan buka paparan admin_index() dan akan klik link Edit di sebelah kanan setiap row untuk Post. Link Edit tersebut sepatutnya membawa nilai $id seperti di bawah
Link di atas bermaksud, saya ingin edit Post yang menggunakan $id = 12. Action admin_edit() perlu menerima nilai $id tersebut supaya boleh digunakan di dalam action untuk manipulasi data Post = 12.
Pastikan link Edit di admin_index() adalah seperti kod di bawah :
Nilai $id telah diassign semasa di dalam Foreach Loop. Setkan ‘admin’ => ‘true’ untuk memberitahu CakePHP anda berada dalam mode Admin.
Kemudian, edit Post Controller anda dan tambah action admin_edit() seperti berikut
Penerangan
Barus 79 hingga 87 adalah kod untuk kemaskinikan data di dalam table posts. Form data akan dihantar menggunakan variable $this->data dan di dalamnnya terkandung nilai id Post yang ingin dikemaskini. Arahan $this->Post->save($this->data) akan kemaskinikan data yang dihantar terus ke dalam table posts.
Baris 91 pula ialah kod yang mengeluarkan data Post berdasarkan nilai $id yang diberi. $this->Post->read(null,$id) akan mengambil nilai Post berdasarkan $id di dalam table posts, dan akan diberi kepada variable $this->data. Seterusnya Form Helper akan menggunakan niali di dalam variable $this->data untuk keluarkan data di dalam Edit Form.
Akhir sekali, cipta fail baru bernama /blog/views/posts/admin_edit.ctp dan tambah kod seperti berikut :
Kod fail admin_edit.ctp hampir sama dengan admin_add.ctp, cuba ada
adalah key untuk memberitahu untuk update rekod berdasarkan nilai ID di dalam database. Seterusnya, cuba anda edit mana-mana Post di dalam senarai index, dan anda akan dipaparkan dengan interface seperti berikut :
admin_delete(). Tambah kod untuk admin_delete() seperti kod di bawah di dalam Post Controller,
Kod baris 101, $this->Post->del($id) adalah arahan untuk memadam rekod di dalam database. Selebihnya hanya fungsi checking sahaja. Save Post Controller, dan cuba Delete Post.
Contoh kod Delete di dalam admin_index.ctp. Latihan :
1. Buat action dan controller untuk admin_view di dalam Post Controller
Ubah Default Route ke Blog index
Secara default,CakePHP akan routekan hompeage anda (
Saya ingin mengubah default page ke Controller : posts Action : index. Untuk itu saya akan mengubah fail Route, /blog/config/routes.php
menjadi default page.
Sistem Administration
Buat masa ini ,untuk akses ke sistem Admin, saya akan menggunakan alamat http://localhost/cake_projects/blog/admin/posts.
Alhamdulillah, kita berjaya tamatkan tutorial peringkat pertama. Dalam tutorial seterusnya, kita akan buat modul-modul berikut
1. Blog Authentication ( Admin perlu login dahulu sebelum boleh akses modul Admin )
2. Search Engine untuk carian Post
3. Tingkatkan sekuriti Form menggunakan Sanitize 4. Update status menggunakan Ajax
5. Sistem Komen.
6. User registration & User management 7. Sistem Attachment untuk gambar-gambar 8. Gabungkan TinyMCE HTML Editor 9. Sistem RSS ( Really Simple Syndication )
Azril Nazli Alias azril.nazli@gmail.com - CakePHP
- Ruby On Rails - LAMP
Helpers untuk SideBar
Sidebar ialah kawasan di mana saya boleh meletakkan berbagai-bagai elemen seperti :
– Menu untuk pembaca – Menu untuk admin – Senarai Posting terkini – Senarai Komen terkini
Jadi untuk itu, saya akan membuat Helpers bernama Sidebar. Untuk memastikan Helper Sidebar sentiasa dipanggil, saya akan membuat satu master controller yang di panggil AppController. Fail ini membolehkan arahan dilakukan secara global. Contohnya jika anda ingin membuat statistik pelawat, anda boleh meletakkan kod tersebut di AppController tanpa mengulangnya di setiap Controller yang ada dalam sistem anda. AppController ini telah dibina secara default oleh CakePHP dan
lokasinya terletak di /blog/app_controller.php.
Saya cuma ingin mendapatkan 10 posting terakhir sahaja. Jadi fungsi $this->Post->getLatestPost() di dalam Post Model perlu diubah supaya menerima variable $limit. Variable $limit ini yang menentukan jumlah data yang akan ditarik dari database.
Buka fail /blog/models/post.php dan ubahsuai method getLatestPost() seperti berikut :
Kali ini saya telah mengubahsuai panggilan $this->find dengan meletak argumen $options. Variable $options ialah array yang menyimpan settings supaya CakePHP boleh mencipta script SQL yang sesuai untuk memanggil hanya 10 data sahaja dari table posts dan Cuma field id,title dan created sahaja yang direturn.
Kod di atas akan menghasilkan script SQL seperti berikut :
SELECT `Post`.`id`, `Post`.`title`, `Post`.`created` FROM `posts` AS `Post` WHERE 1 = 1 ORDER BY `Post`.`id` DESC LIMIT 10
Sekarang, $this->Post->getLatestPost() telah diubahsuai dan saya ingin aplikasi blog saya sentiasa mendapatkan 10 posting terakhir di keseluruhan sistem. Untuk itu saya akan ubahsuai AppController di /blog/app_controller.php dan tambah kod berikut :
beforeRender() ialah satu ciri CakePHP yang amat penting. Saya memanggil fungsi beforeRender() selepas logik di dalam Controller di jalankan dan sebelum CakePHP memaparkan View. Di antara fasa tersebut, saya menyuruh
AppController untuk dapatkan 10 Posting terakhir dan didaftarkan ke dalam View menggunakan variable $latest_posts. Dengan cara ini, saya boleh menggunakan variable $latest_posts untuk di gunakan di dalam Helper Sidebar.
/blog/views/helpers/sidebar.php
Fungsi $sidebar->getLatestPost() akan memaparkan 10 Posting terakhir di dalam sidebar aplikasi blog kita nanti. Untuk membina Helper :
1. Nama Helper perlu dalam singular seperti TimeHelper, GenerateXmlHelper dan diikuti dengan ayat Helper dalam bentuk CamelCased
2. Lokasi untuk menyimpan Helper ialah di dalam folder /blog/views/helpers/ 3. Helper perlu dipanggil di dalam Controller barulah ia boleh digunakan di
dalam View. Contohnya var $helpers = array(‘Sidebar’, ‘Time’, ‘Ajax’) 4. Kebiasaannya, Helper adalah pembantu kita di dalam View untuk
menghasilkan kod yang kompleks.
Seterusnya, saya perlu panggil Helper Sidebar di dalam AppController. Dan disebabkan saya perlu menggunakan model Post untuk memanggil method getLatestPost(), saya perlu juga panggil model Post di dalam AppController dengan menggunakan $uses.
Sila ubah AppController anda di /blog/app_controller.php dan salin kod seperti di bawah :
Contoh lengkap AppController seperti di bawah :
Perlu diingatkan, selepas bari ke 15, jangan ada whitespace yang terhasil. Untuk untuk, anda tidak perlu tutup kod php dengan tanda ?> seperti kebiasaan untuk mengelakkan masalah whitespace.
/blog/views/layouts/default.ctp
Hanya perlu ubah kod di dalam DIV = content. Baris ke 68 adalah penggilan Helper Sidebar untuk hasilkan kod yang memaparkan 10 posting terakhir di dalam aplikasi blog. Save fail default.ctp dan buka alamat
Di sebelah kanan aplikasi kini sudah ada senarai posting terakhir. Authentication
Kini tiba masanya saya ingin membuat sistem Auth di mana hanya admin sahaja yang boleh akses untuk manage blog admin. Untuk itu, saya perlukan table bernama users dicipta di dalam database blog_development. Buka kembalik fail Blog Schema yang terletak di /blog/config/sql/blog.php dan tambah kod untuk table users :
*ralat : length untuk password sepatutnya 255 bukan 10 ( baris 25 )
Seterusnya saya hanya ingin mencipta table users sahaja. Untuk itu jalankan arahan berikut di dalam MS – DOS
cake schema run create blog users bermaksud CakeSchema akan create table bernama users di dalam skema blog.
Seterusnya anda akan ditanya 2 soalan – Drop table users ? [ y ]
– Create table users ? [ y ]
Saya secara tidak sengaja telah meletak length untuk field password = 10.
Sepatutnya ialah 255 disebabkan komponen Auth akan seara automatik hashedkan password yang dihantar dan ianya memerlukan 64 aksara . Jadi saya perlu ubah fail skema blog dan perlu update table users.
Anda boleh taip cake schema help untuk arahan-arahan lain seperti update table, cipta schema utama, cipta snapshot dan berbagai arahan lagi.
Table users sudah dicipta. Seterusnya saya perlu bina Model, Views dan Controller untuk User. Disebabkan saya cukup malas untuk taip satu-persatu kod untuk
Model,View dan Controller, saya akan gunakan cake bake CLI untuk membuat fail-fail tersebut secara automatik.
Cipta User Model : cake bake model User
User Controller akan dicipta dengan fungsi $scaffold terbina dalam. Cipta User View : cake bake view User
CakePHP akan mencipta fail skeleton untuk CRUD ( index,view,add dan edit ) di dalam /blog/views/user/*
Sila lawati http://localhost/cake_projects/blog/user ( User singular bukan plural ). Dan anda akan dapati paparan seperti di atas.
URL : http://www.littlehart.net/atthekeyboard/2007/09/11/a-hopefully-useful-tutorial-for-using-cakephps-auth-component/
Saya akan menggunakan Component Auth yang didatangkan khas bersama CakePHP untuk melindungi sistem Admin aplikasi blog. Komponen Auth secara default akan mengambil kira konfigurasi berikut :
– Table bernama ‘users’ dicipta di dalam database
– Field bernama ‘username’ dan ‘password’ di dalam table users
Edit fail AppController untuk menambah var $components = array(‘Auth’); supaya Auth Component dapat digunakan.
Ubahsuai AppController anda dan tambah kod seperti di bawah :
Tambah kod di baris 64 di dalam method beforeRender(). Untuk register $Auth di dalam View.
Save fail AppController dan sekarang tambah satu user di alamat http://localhost/cake_projects/user/add
Klik button submit. Sila tick checkbox Is Admin. Kemudian buat satu lagi user, tetapi jangan tick checkbox is_admin. Jadi anda akan mempunyai 2 user,iaitu admin dan bukan admin.
Jika Auth Component berfungsi dengan betul, nilai Password untuk User anda sepatutnya berbentuk hashed seperti di atas.
Bina action untuk login() dan logout() dalam User Controller
Baris 1 – 21 ( 4 methods, login,logout, admin_login dan admin_logout ) Saya membina action untuk normal login/logout dan juga untuk admin login/logout.
Untuk menguji sistem Auth, saya perlu ubahsuai kod AppController ( /blog/app_controller.php ) dan matikan kod $this->Auth->allow(array(‘*’));
Baris 21 di dalam /blog/app_controller.php
Kemudian saya akan allow action Post Index dan Post View. Ini bermaksud, pembaca tidak perlu login untuk akses action index() dan view() di dalam Post Controller. Tambah method beforeFilter dalam Post Controller (
Kalau anda masih ingat, di dalam AppController, saya telah menambah kod
Baris 64.
Dengan menggunakan $this->Auth->user(), saya boleh akses maklumat user yang telah login dengan mudah sekali. Jika anda debug($Auth) di dalam View
default.ctp, data berikut akan diperolehi :
Hasil debug($Auth) di dalam default.ctp. Dengan menggunakan variable $Auth di dalam view, saya boleh mengesan user yang login ialah admin atau tidak dengan menggunakan $Auth[‘User’][‘is_admin’]. Nilai 1 adalah admin dan 0 adalah sebaliknya.
Jadi saya boleh membuat menu yang ringkas untuk Admin di dalam Helper Sidebar. Edit fail /blog/views/helpers/sidebar.php dan tambah 2 method berikut :
Ralat ! : Baris 32, sila setkan ‘admin’ => FALSE
Method admin_login() untuk cipta link login ke Admin Post dan method admin() untuk senaraikan modul-modul untuk Admin.
Seterusnya, di dalam Default Layout, /blog/views/layouts/default.ctp, sila tambah kod berikut :
Sekarang, mari kita uji sistem Auth. Sila buka browser ke alamat http://localhost/cake_projects/blog
Anda akan nampak link Administration di sidebar belah kanan, klik link tersebut dan paparan login akan dipaparkan. Cuba login sebagai user yang mempunyai akses admin.
Secara automatik, CakePHP Auth akan redirect anda ke muka hadapan blog dan cuba klik menu Manage Post di sebelah kanan.
Paparan admin_index untuk Post. Kemudian cuba klik link Logout dan cuba login sebagai user yang tidak mempunyai akses admin.
Menu Administration tidak kelihatan di sebelah kanan.
Cuba anda pergi ke alamat admin secara manual, http://localhost/cake_projects/blog/admin/posts
Amaran Unauthorized Access akan diberikan. Taip
Ubahsuai User Controller menjadi Admin Scaffold
Jika anda malas untuk menaip semula kesemua Controller Action untuk CRUD dan view, anda boleh menggunakan satu ciri $scaffold untuk Admin. Sila buka User Controller dan update menjadi kod berikut
di dalam action index dan juga edit. Jadi tidak kesemua field akan dipaparkan. Kod untuk paparan Edit mempunyai field tambahan bernama change_password. Jika admin ingin menukar password user, dia boleh menggunakan field ini. Mengapa guna change_password tetapi tidak terus field password sahaja ?
Componen Auth di dalam CakePHP akan mengambil apa sahaja nilai termasuk whitespace ( blank ) dan akan convert ke format hashed password jika ia detect field bernama ‘password’ digunakan. Bayangkan admin Cuma ingin mengubah data email , tetapi bila admin submit data, CakePHP akan mengambil nilai whitespace / blank dan terus hashed kan data untuk password dan save ke dalam database. Seterusnya, user tersebut tidak dapat login kerana hashed password sudah bertukar. Untuk mengatasi masalah ini, saya menggunakan custom field yang bernama change_password. Dalam callback beforeFilter(), saya akan membuat checking samaada data change password wujud atau tidak. Jika wujud, assignkan $this->data[‘User’][‘password’] kepada nilai change_password dan secara automatik CakePHP akan mengubah password tersebut di dalam database. Kemudian update fail Sidebar Helper untuk letak link Manage User
Buka semua aplikasi blog di dalam Firefox , dan klik menu Manage User di sebelah kanan, paparan berikut akan terhasil
Dengan masa tidak sampai 5 minit, anda telah berjaya membuat Admin Modul untuk Model User . Module ini menggunakan $scaffold yang telah dicustomkan. Cuba klik Edit salah satu user,
Callback AfterFind
Bagaimana jika saya tidak suka format date Created dalam Scaffold ? Dan saya ingin dalam format TimeAgoInWords() ? Untuk mengubah data yang telah ditarik dari dalam database, saya akan menggunakan callback AfterFind() di dalam User Model. Buka fail /blog/models/user.php dan tambah kod berikut :
$results adalah array() data yang direturn dari database.
Refresh semua paparan Manage User dan format Created telah berubah. AfterFind sangat berguna jika anda ingin mengubah data yang dikeluarkan dari database seperti untuk kegunaan drop down menu.
Model Relation
url : http://book.cakephp.org/view/79/Relationship-Types
Dalam CakePHP, table join dipersembahkan dalam bentuk Model Relation seperti – User hasMany Post
– User hasMany Comment – Post belongsTo User – Post hasMany Comment – Comment belongsTo Post – Comment belongsTo User
– Tag hasAndBelongsToMany Post – Post hasAndBelongsToMany Tag
Konsep blog yang saya bina ialah setiap User akan mempunyai Post mereka sendiri. Jadi relationship yang ingin saya bina ialah berupa :
– User hasMany Post – Post belongsTo User
Disebabkan setiap Post dimiliki oleh seorang User, di dalam table posts saya perlu menambah kolum bernama user_id ( integer ). Untuk itu saya perlu ubahsuai fail /blog/config/sql/schema/blog.php dan menambah field user_id
Jalankan arahan Cake Schema : cake schema run update blog posts Ubah Post Controller
Method admin_add() dan admin_edit() perlu diubahsuai untuk membolehkan nilai user_id di dalam table posts diberi nilai $id user yang sedang login. Buka fail /blog/controllers/posts_controller.php dan ubahsuai kod :
Tambah baris 88
Variable $this->data[‘Post’][‘user_id’] akan diberi nilai $id user yang sedang login dengan menggunakan panggilan $this->Auth->user(‘id’);
Ubahsuai Model Post dan User untuk tambah Model Relation User Model : /blog/models/user.php
Post Model : /blog/models/post.php
Hanya tambah baris 11.
Seterusnya, edit Post terkini atau tambah Post baru menggunakan fungsi admin Manage Post. Pastikan nilai user_id diisi secara automatik dengan melihat data di dalam phpMyAdmin
Ubahsuai fail View Index di /blog/views/posts/index.ctp untuk tambah nama User di dalam Posting
Baris 13. Cuba debug() nilai $value di baris 9. Anda akan lihat CakePHP akan return data User yang memiliki Post tersebut.
Ralat
Ralat dalam format kolum Post.created,Post.updated,User.created dan
User.updated. Sepatutnya, jenis kolum ialah datetime dan bukannya date. Untuk membetulkan format kolum tersebut, saya akan mengubah fail Blog Schema dan akan laksanakan arahan cake schema
Laksanakan arahan : cake schema run update blog posts. Cuba tambah Post lihat kembali format data di browser.
Sekarang format Date untuk Created telah berjaya dipaparkan dengan betul.
Latihan
1. Gunakan field Updated untuk paparkan bilakah Post tersebut kali terakhir dikemaskini.
2. Paparkan nama User di dalam admin_index Manage Post
Search Engine untuk Post
penerangan.
Bina view untuk function search().
Header search.ctp untuk menu dan CSS untuk highlight keyword.
Search Result. Untuk paparkan hasil carian
Salin kesemua kod di atas dan save sebagai /blog/views/posts/search.ctp Seterusnya, mari kita cuba sistem carian, layari
http://localhost/cake_projects/blog/posts/search dan mulakan carian berkaitan ‘php’ dan tekan Search.
Screenshot di atas adalah bila saya cuba mencari Post dari pada User bernama ‘bazet’
Melihat SQL yang dijana oleh CakePHP, ia berjaya fetch 5 row data yang berkaitan dengan search term di atas.
Seterusnya saya ingin membuat search field di dalam Helper Sidebar. Oleh itu saya akan menambah Helper Form di dalam fail /blog/views/helpers/sidebar.php seperti berikut :
Kemudian, saya akan bina method bernama search() supaya ianya boleh digunakan di dalam Default Layout untuk generate Search Form :
Save fail Sidebar Helper, dan buka Default Layout, /blog/views/layouts/default.ctp dan tambah kod berikut;
Refresh kembali aplikasi Blog anda dan sistem carian telah terpapar di sebelah atas kanan sidebar. Cuba buat carian dan tekan [ENTER]
Hasil carian anda telah berjaya dipaparkan. Penerangan untuk Search Engine.
Ianya nampak kompleks kerana kriteria saya ialah mencari keyword match di setiap field yang terlibat di dalam table Posts dan Users.
Saya gunakan array $options untuk membina dahulu kriteria carian. – Fields : untuk tentukan field yang direturn ke View
– Limit : limit data yang dikeluarkan
oleh Search Form sesudah user menekan button Search.
Action Search adalah fungsi untuk Public User dan tidak perlu Login ke dalam sistem untuk menggunakannya. Jadi sila allow action Search dalam Post Controller beforeFilter.
Menggunakan $postConditions
url : http://code.hexflux.com/2009/06/easier-searchfiltering-with-controllerpostconditions/
Seterusnya saya ingin membuat Admin Search. Fungsinya untuk membuat simple Search Filter untuk Admin Post. Sayacuma ingin membuat Post Filter dengan menggunakan 2 fields sahaja iaitu Post.title dan Post.summary. Buka fail Post Controller, dah tambah kod berikut
Untuk admin_search.ctp di dalam folder /blog/views/posts/ pula, sila tulis kod berikut,
Kod di atas untuk menjana hasil carian.
Buka alamat http://localhost/cake_projects/blog/admin/posts/search. Mari kita filter Post dengan keyword Post.title = ‘cakephp’ dan Post.summary = ‘skeleton’ ( gunakan keyword anda )
Hasil carian terpapar di atas.
Kod SQL untuk Filter dijana oleh CakePHP
Kod $this->postConditions memudahkan anda menjana kod conditions untuk di gunakan dengan $this->Model->find(‘all’, $options). Untuk bacaan lanjut dan contoh, sila ke http://code.hexflux.com/2009/06/easier-searchfiltering-with-controllerpostconditions/
Latihan :
Ajax, saya boleh menggunakan Helper tersebut. Cake 1.2.5 menggunakan Ajax Prototype dan ScriptAculoUs. Untuk menggunakan Ajax, sila download
prototype.js dari website http://prototypejs.org/download dahulu dan save sebagai /blog/webroot/js/prototype.js.
Kemudian ubah AppController untuk memasukkan Helper Javascript dan Ajax.
Baris 4 : /blog/app_controller.php
Seterusnya, include prototype.js dalam Default Layout di /blog/views/layouts/default.ctp
Baris 35
Untuk sistem komen, Model Relation adalah seperti berikut : – Post hasMany Comment
– Comment belongsTo Post
Seterusnya, buka fail Skema Blog di /blog/config/sql/blog.php dan tambah skema untuk table comments :
Bina Model untuk Comment
Hasil Comment Model yang dicipta oleh Cake Bake CLI Bina Controller untuk Comment
Sila buka alamat http://localhost/cake_projects/comments
CakePHP secara automatik membuat dropdown Post. Sekarang saya sudah
ditujukan.
Untuk menghantar komen, pembaca perlu klik Post View dahulu dan di bawah setiap Post akan ada ruangan untuk menambah komen. Saya akan menggunakan teknologi Ajax untuk user menghantar komen.
Baris 11 ( Pastikan Post hasMany Comment )
Controller Comment Add akan menguruskan tugas memasukkan data komen ke dalam table comments beserta post_id. Validation yang asas akan digunakan dalam Comment Model.
Validation dalam Comment Model, /blog/models/comment.ctp
Seterusnya, saya akan tambah $components bernama ‘RequestHandler’ di dalam Comment Controller. Dan bina action untuk beforeFilter() dan add().
