Skip navigation


Setelah di postingan sebelumnya menjelaskan tentang cara penggunaan CJuiAutoComplete secara sederhana, postingan ini akan mencoba menyambungkan autocomplete tersebut dengan database.

Yang dibutuhkan pertama adalah table beserta beberapa record secukupnya. Untuk itu diperlukan, migration. Sebenarnya gak butuh-butuh banget sih. Tapi ada bagusnya membiasakan diri menggunakan migration. Cara membuat migration adalah seperti di bawah.

petra@petra-laptop:~/maleskoding$ /opt/lampp/bin/php protected/yiic migrate create create_user_table

Yii Migration Tool v1.0 (based on Yii v1.1.10)

Create new migration '/home/petra/maleskoding/protected/migrations/m120421_234410_create_user_table.php'? [yes|no] yes
New migration created successfully.
petra@petra-laptop:~/maleskoding$

Setelah itu, table yang diperlukan tersebut ditambahkan ke dalam migration file yang telah dibuat di atas.

<?php
/**
 * @filesource /protected/migrations/m120421_234410_create_user_table.php
 */
class m120421_234410_create_user_table extends CDbMigration {
 	public function up() {
 		/* Create table */
 		$this--->createTable('Users', array(
		    'id' => 'INT(11) UNSIGNED NOT NULL AUTO_INCREMENT',
		    'firstName' => 'TEXT NOT NULL',
		    'lastName' => 'TEXT NOT NULL',
		    'city' => 'TEXT NOT NULL',
		    'PRIMARY KEY (id)',
		));
	}

	public function down() {
		$this->dropTable('Users');
	}

}

Di atas adalah cara untuk menambahkan table, sementara itu untuk menambahkan record yang dibutuhkan, dapat dilakukan cara seperti di bawah. (Lihat bagian yang ada “$this->insert”)

<?php
/**
 * @filesource /protected/migrations/m120421_234410_create_user_table.php
 */
class m120421_234410_create_user_table extends CDbMigration {
 	public function up() {
 		/* Create table */
 		$this--->createTable('Users', array(
		    'id' => 'INT(11) UNSIGNED NOT NULL AUTO_INCREMENT',
		    'firstName' => 'TEXT NOT NULL',
		    'lastName' => 'TEXT NOT NULL',
		    'city' => 'TEXT NOT NULL',
		    'PRIMARY KEY (id)',
		));

		/* Insert sample data */
		$this->insert('Users', array(
		    'firstName' => 'Arya',
		    'lastName' => 'Stark',
		    'city' => 'Winterfell',
		));
		$this->insert('Users', array(
		    'firstName' => 'Bran',
		    'lastName' => 'Stark',
		    'city' => 'Winterfell',
		));
		$this->insert('Users', array(
		    'firstName' => 'Cersei',
		    'lastName' => 'Lannister',
		    'city' => 'Casterly Rock',
		));
		$this->insert('Users', array(
		    'firstName' => 'Daenarys',
		    'lastName' => 'Targaryen',
		    'city' => 'Dragonstone',
		));
		$this->insert('Users', array(
		    'firstName' => 'Rickard',
		    'lastName' => 'Karstark',
		    'city' => 'Karhold',
		));
		$this->insert('Users', array(
		    'firstName' => 'Robb',
		    'lastName' => 'Stark',
		    'city' => 'Winterfell',
		));
		$this->insert('Users', array(
		    'firstName' => 'Tyrion',
		    'lastName' => 'Lannister',
		    'city' => 'Casterly Rock',
		));
	}

	public function down() {
		$this->dropTable('Users');
	}

}

Jangan lupa untuk mengedit konfigurasi baik di config/main.php dan config/console.php

<?php
/**
 * @filesource /protected/config/main.php
 * @filesource /protected/config/console.php
 */
return array(
 	//cut
 	'db' =--> array(
	    'connectionString' => 'mysql:host=localhost;dbname=maleskoding',
	    'emulatePrepare' => true,
	    'username' => 'maleskoding',
	    'password' => 'maleskoding',
	    'charset' => 'utf8',
	),
	//cut
);

Sekarang tinggal mengaplikasikan migration yang telah dibuat.

petra@petra-laptop:~/maleskoding$ php protected/yiic migrate

Yii Migration Tool v1.0 (based on Yii v1.1.10)

Total 1 new migration to be applied:
    m120421_234410_create_user_table

Apply the above migration? [yes|no] yes
*** applying m120421_234410_create_user_table
    > create table Users ... done (time: 0.104s)
    > insert into Users ... done (time: 0.001s)
    > insert into Users ... done (time: 0.000s)
    > insert into Users ... done (time: 0.000s)
    > insert into Users ... done (time: 0.000s)
    > insert into Users ... done (time: 0.001s)
    > insert into Users ... done (time: 0.000s)
    > insert into Users ... done (time: 0.001s)
*** applied m120421_234410_create_user_table (time: 0.111s)

Migrated up successfully.
petra@petra-laptop:~/maleskoding$

Setelah migration diaplikasikan, sekarang ada baiknya table tersebut dibuatkan active recordnya. Dengan menggunakan Gii, hal ini jadi sangat mudah. Cara pengaturan dan penggunaannya dapat dilihat di sini. Dan kelas CActiveRecord yang dihasilkan adalah sebagai berikut.

<?php

/**
 * This is the model class for table "Users".
 *
 * The followings are the available columns in table 'Users':
 * @property string $id
 * @property string $firstName
 * @property string $lastName
 * @property string $city
 */
class User extends CActiveRecord {
     //dst dst
}

Perlu dicatat kelas di atas dihasilkan dari mengisi “Users” di table dan “User” di class name. Saya memiliki kebiasaan memberi nama table dengan kata benda jamak dan class name dengan kata benda tunggal.

Sekarang kembali ke SiteController yang telah dibahas di postingan sebelumnya. Kita cukup mengubah isi dari action actionLookup untuk memanggil data dari database bukan array statis. Kodenya seperti di bawah.

	/**
	 * Returns data for the autocomplete lookup.
	 */
	public function actionLookup() {
		$term = $_GET['term'];
		$users = User::model()->findAll(array(
		    'condition' => 'firstName LIKE :firstName OR lastName LIKE :lastName',
		    'params' => array(
			':firstName' => "%$term%",
			':lastName' => "%$term%",
		    ),
			));
		$return = array();
		foreach ($users as $user) {
			$return[] = $user->firstName . ' ' . $user->lastName;
		}
		echo CJSON::encode($return);
	}

Penyeleksian data dilakukan dengan mengisi kriteria pada method findAll dari User yang diturunkan oleh CActiveRecord. Setelah itu untuk setiap User yang memenuhi syarat, atribut firstName dan lastNamenya dikumpulkan ke dalam sebuah variabel untuk dikembalikan. Dan terakhir variabel array tersebut akan dikembalikan sebagai JSON string.

Hasilnya akan sama seperti di postingan sebelumnya, hanya saja kali ini berasal dari database ketimbang static array. Karena penyambungan autocomplete dengan database sudah dilakukan, maka, seperti yang telah dijelaskan di postingan sebelumnya, postingan selanjutnya akan berkutat antara lain di bagaimana mengkustomisasi tampilan autocomplete, bagaimana meletakkan autocomplete di form, atau bagaimana membuat widget pencarian menggunakan autocomplete.

Kode yang di sini sudah diupdate dengan tutorial ini.

One Comment

  1. Reblogged this on erycamel.


One Trackback/Pingback

  1. […] cjuiautocomplete, JQuery, jquery ui, Yii, Yii Framework, yiiframework Melanjutkan postingan sebelumnya, sekarang tampilan dropdown dari CJuiAutoComplete yang hanya teks sederhana akan saya ubah […]

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: