Skip navigation


Sesuai dengan permintaan di postingan sebelumnya, sekarang saya akan mencoba menambahkan link di dropdown yang dihasilkan oleh autocomplete. Seperti autocomplete yang ada di Facebook, autocomplete yang akan saya modifikasi akan memindahkan halaman ke halaman profil userketika dropdownnya diklik.

Sebenarnya caranya sangat mudah, tapi ada baiknya kalau kita siapkan halaman user profilenya.

Yang harus dilakukan pertama adalah membuat controller UserController yang menampilkan data user.

<?php

/**
 * @filesource /protected/controllers/UserController.php
 */
class UserController extends Controller {

	public function actionView() {
		$user = User::model()->findByPk($_GET['id']);
		if ($user !== NULL) {
			$this->pageTitle = $user->firstName. ' '.$user->lastName;
			$this->render('index', array(
			    'user' => $user,
			));
		} else
			throw new CHttpException(404);
	}

}

dan viewnya juga

<?php
/**
 * @filesource /protected/views/user/index.php
 */
?>
<div>
	<h1><?php echo $user->firstName . " " . $user->lastName; ?></h1>
	<h2><?php echo $user->city;?></h2>
	<?php echo CHtml::image($user->profilePicturePath);?>

</div>

Untuk halaman user ini nantinya dapat diakses dengan cara /user/[id]. Sebagai contoh, berikut halaman untukuserdengan ID 2 (yang dapat diakses di http://domain/user/2).

Halaman Profil User

Halaman Profil User

Kemudian sekarang kita menambahkan method di class User yang dapat mengembalikan alamat halaman profil untuk si user.

	/**
	 * @return string profile page.
	 */
	public function getProfilePage() {
		return CHtml::normalizeUrl(array('/user/view', 'id' => $this->id));
	}

Dengan method di atas kita dapat mengambil alamat profile page dari sebuah user dengan cara

$page = $user->profilePage;
//for user with ID 1, the $page will be '/user/2'

Setelah ini kita coba mengembalikan alamat profile page ke autocomplete, caranya adalah dengan menambahkan data dari array yang dikirim oleh action actionLookup.

			$return[] = array(
			    'label' => $user->firstName . ' ' . $user->lastName,
			    'value' => $user->id,
			    'image' => $user->profilePicturePath,
			    'city' => $user->city,
			    'url' => $user->profilePage,
			);

Perhatian bagian yang ada “‘url’ => $user->profilePage,”. Jika diperhatikan di Firebug, akan dapat dilihat bahwa data url ini juga akan dikembalikan.

Terakhir adalah menambahkan aksi ketika sebuah item dari dropdown dipilih. Ini tinggal menambahkan fungsi javascript di pilihan select di options di CJuiAutoComplete. Atribut options ini merupakan pembungkus dari daftar atribut untuk jQuery UI AutoComplete. Kodenya adalah seperti ini

$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
    'id' => $autoCompleteId,
    'name' => 'user',
    'sourceUrl' => $this->createUrl('lookup'),
    'options' => array(
	'minLength' => '2',
	'select' => <<<EOJS
js:function(event, ui){
	window.location.href = ui.item.url;
}
EOJS
    ,
    ),
    'htmlOptions' => array(
	'style' => 'height:20px;'
    ),
));

Ketika sebuah item dari dropdown dipilih, maka browser akan dipaksa untuk membuka alamat milik user yang dipilih tersebut. Tidak terlalu susah khan?

Kode bisa dilihat di sini.

4 Comments

  1. Mantap om, setelah saya baca jadi tidak terlalu susah😀. Terima kasih lho telah memenuhi request saya.
    Btw, ada saran buat tabular input ga om? Enaknya pake extension apa ya?

    • you’re welcome,, kalo tabular input kurang tau juga sih,, gak pernah pakai.. (dan gak pernah butuh buat pakai)

  2. Bang master, saya lagi belajar yii. Saya biasa main di drupal. Sekarang pingin mendalami yii. Mohon bimbingannya ya master…

  3. nuhun pisan sederetan tutorial CJuiAutoComplete nya bener-bener berguna, semua yang saya cari ada di sini -meski tersebar di post yang berbeda-, mantab!


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: