Cake Live Search in Five Steps !

cake

Tutorial berikut ini akan mengajak Anda untuk membuat sebuah aplikasi LiveSearch dengan menggunakan CakePHP dan beberapa script berbasis Ajax. Aplikasi LiveSearch ini bisa Anda lihat di url berikut ini :

http://masjidjogokariyan.net/web/posts/all/

Tertarik ? Oke, mari bareng-bareng kita buat aplikasi tersebut. Ikuti aja langkah-langkahnya ..

PERTAMA :
buatlah sebuah table pada database Anda. Namai dengan table user. Table ini akan menjadi objek percobaan kita, sebagai data yang akan ditampilkan oleh aplikasi LiveSearch kita. Cukup Anda copy paste kan script di bawah ini

SQL:

CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name_first` varchar(20) DEFAULT NULL,
`name_second` varchar(20) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=15 DEFAULT CHARSET=latin1 ;

SQL:

INSERT INTO `users` (`id`,`name_first`,`name_second`) VALUES (‘7′,’James’,’Callaghan’);
INSERT INTO `users` (`id`,`name_first`,`name_second`) VALUES (‘6′,’Margaret’,’Thatcher’);
INSERT INTO `users` (`id`,`name_first`,`name_second`) VALUES (‘1′,’Tony’,’Blair’);
INSERT INTO `users` (`id`,`name_first`,`name_second`) VALUES (‘5′,’John’,’Major’);
INSERT INTO `users` (`id`,`name_first`,`name_second`) VALUES (‘8′,’Edward’,’Heath’);
INSERT INTO `users` (`id`,`name_first`,`name_second`) VALUES (‘9′,’Harold’,’Wilson’);
INSERT INTO `users` (`id`,`name_first`,`name_second`) VALUES (’10’,’Alec’,’Douglas-Home’);
INSERT INTO `users` (`id`,`name_first`,`name_second`) VALUES (’11’,’Harold’,’Macmillan’);
INSERT INTO `users` (`id`,`name_first`,`name_second`) VALUES (’12’,’Anthony’,’Eden’);
INSERT INTO `users` (`id`,`name_first`,`name_second`) VALUES (’13’,’Clement’,’Attlee’);
INSERT INTO `users` (`id`,`name_first`,`name_second`) VALUES (’14’,’Winston’,’Churchill’);

KEDUA :
kita akan membuat aplikasi Model yang akan menjadi perantara antara table user dengan Controller kita. Copy paste kan script php di bawah ini :

PHP:

<?php
class User extends AppModel {
var $name = ‘User';
}
?>

KETIGA :
kita akan melakukan sedikit setting pada layout. Untuk memberikan efek transisi yang manis, kita memerlukan sebongkah kumpulan script javascript. Silahkan download di alamat ini : http://script.aculo.us/downloads
Uploads semua script yang Anda download, termasuk dua script terpenting, yakni scriptaculous.js dan prototype.js ke folder app/webroot/js .

Tambahkan line berikut ke dalam default layout Anda (default.thtml) dan letakkan sesudah tag </title> dan sebelum tag </head> :

<script type=”text/javascript” src=”<?php echo $this->webroot.”js/prototype.js”;?>”></script>
<script type=”text/javascript” src=”<?php echo $this->webroot.”js/scriptaculous.js”;?>”></script>

Script di atas digunakan untuk meng-include-kan script Javascript yang sudah Anda download sebelumnya.

KEEMPAT :
kita akan membuat tampilan yang diperlukan supaya hasil pencarian ditampilkan oleh browser kita.

Buat file results.thtml dan letakkan pada path /app/views/layouts/results.thtml. Isi dari file tersebut adalah :

PHP :
<?php print $content_for_layout; ?>

File ini berfungsi untuk menampilkan data hasil pencarian aplikasi LiveSearch kita.

Kemudian, kita akan membuat tampilan untuk form pencarian. Untuk memudahkan, kita buat file index.thtml dan letakkan pada path /app/views/users/index.thtml. Oya, sebelumnya, silahkan mendownload lebih dahulu animasi spinner di
http://www.justkez.com/wp-content/uploads/2006/11/spinner.gif

untuk mempercantik tampilan form. Untuk scriptnya, silahkan copy paste kan script berikut ini :

PHP:
<h1>Livesearch</h1>
<form onsubmit=”return false”>
<input type=”text” name=”livesearch” id=”livesearch” />
<div id=”loading” name=”loading” style=”display: none;”>
<?php echo $html -> image(“spinner.gif”) ?>
</div>
</form>

<?php
$options = array(
‘update’ => ‘view’,
‘url’ => ‘/users/search’,
‘frequency’ => 1,
‘loading’ => “Element.hide(‘view’);Element.show(‘loading’)”,
‘complete’ => “Element.hide(‘loading’);Effect.Appear(‘view’)”
);
print $ajax -> observeField(‘livesearch’, $options);
?>

<div id=”view” name=”view”>
<?php /* Results will load here */ ?>
</div>

Perhatikan script di atas ! Pada bagian $options, ada elemen array ‘url’ yang bisa dikustomasi. Url ‘/users/search’ adalah Views dari action Search yang nanti akan kita buat pada bagian Controller (langkah selanjutnya). Jika Anda teliti, Anda akan melihat sepasang tag div yang berfungsi untuk menampilkan / menyembunyikan aplikasi spinner.gif dan hasil pencarian Anda. Variabel array $options menjadi bagian penting yang akan mengatur Javascript Anda.

Sebelum Anda membuat bagian Controller, tambahkan file search.thtml (perhatikan, nama View harus sama dengan nama action Controller Anda) dan letakkan pada path /app/views/users/search.thtml . Untuk isinya, copy paste kan script di bawah ini :

PHP:
<?php
if (isset($result) && count($result)> 0)
{
foreach ($result as $user)
{
print ‘<div id=”result”>';
print $user[‘users’][‘name_first’] . ‘ ‘ . $user[‘users’][‘name_second’];
print ‘</div>';
}
}
else
{
print ‘<div id=”message”>No results found</div>';
}
?>

Perhatikan script di atas ! Hasil pencarian akan ditampilkan pada line print $user[‘users’][‘name_first’] . ‘ ‘ . $user[‘users’][‘name_second’];
di mana ‘users’ adalah nama Model Anda, dan ‘name_first’ , ‘name_second’ adalah nama field database Anda.

KELIMA :
Ini dia bagian yang paling penting. Sampai sejauh ini, kita sudah mempelajari beberapa hal berikut

  • Membuat Model dari aplikasi kita.
  • Membuat tampilan yang diperlukan, dengan file results.thtml, index.thtml, dan search.thtml.

Untuk bagian yang terakhir, buatlah sebuah file Controller dengan nama users_controller.php dan letakkan pada path /app/controllers/users_controller.php
Isi dari file tersebut antara lain :

PHP:
<?php
class UsersController extends AppController
{
var $name = ‘Users';
var $scaffold;
var $helpers = array(‘html’, ‘ajax’, ‘text’, ‘time’);
var $components = array(‘RequestHandler’);
}
?>

Berikutnya, tambahkan fungsi index pada Controller tersebut :

PHP:
/* .. snip .. */
function index()
{
$this->set(‘data’,$this->User->findAll());
}
/* .. snip .. */

Terakhir, tambahkan fungsi search pada Controller Anda :

PHP:
/* .. snip .. */
function search()
{
$this -> RequestHandler -> setAjax($this);
if (!empty($this->params[‘form’][‘livesearch’]))
{
$word = $this->params[‘form’][‘livesearch’];
$result = $this -> User -> query(“SELECT * FROM users WHERE name_first LIKE ‘%”.$word.”%’ OR name_second LIKE ‘%”.$word.”%'”);
$this->set(‘result’, $result);
}
}
/* .. snip .. */

Pada script di atas, query akan disimpan di variable $result. Kemudian variable result ini akan dikirim ke bagian View (lihat script search.thtml di atas) dan akan ditampilkan hasilnya.

Be Sociable, Share!
Categories: CakePHP

1 Comment

  • jan_kristanto says:

    klo aku sich biasanya klo mainan pake cake
    jarang pake SQL langsung..

    soalnya biasanya di web tu kan nama tabel kadang berubah.
    misal harus dikasih prefix, jadinya mending pake :

    $this->set(‘result’, $this->User->findAll(“User.name_first LIKE % ‘$word’%”) );
    sory klo ada yg salah

Leave a Reply