Skip navigation


Melanjutkan postingan sebelumnya, sekarang tampilan dropdown dari CJuiAutoComplete yang hanya teks sederhana akan saya ubah menjadi lebih bagus. Dropdown ini akan kita buat agar bisa menampilkan data selain nama panjang, tetapi juga mungkin foto profil atau asal kota. Nantinya akan mirip dengan search autocomplete yang ada di Facebook seperti di bawah.

Autocomplete di Facebook search.

Yang pertama dilakukan adalah menyiapkan foto untuk setiap user sesuai dengan id dari user tersebut. Aplikasi untuk pengguna umumnya menggunakan fungsi untuk melakukan pengunggahan foto profil. Tapi di sini kita lewatkan dan asumsikan untuk user dengan id X maka foto profilenya adalah X.jpg dan bisa diakses di http://domain/images/x.jpg. Contohnya lihat di bawah.

Gambar profil

Menyiapkan gambar profil untuk masing-masing user

Di contoh di atas, user dengan nama “Arya Stark” (lihat postingan sebelumnya) memiliki ID 1, dengan demikian foto profilenya dapat diakses di http://domain/images/1.jpg.

Untuk mempermudah, di class User, kita tambahkan method getProfilePicturePath.

<?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 {
 	//cut
 	//tambahkan method di bawah di class User 
	/**
 	 * @return string profile picture path.
 	 */
 	public function getProfilePicturePath() {
 		return '/images/' . $this->id . '.jpg';
	}
	//cut
}

Untuk mendapatkan path dari sebuah instans User, kita cukup menginvokasi method yang baru ditambahkan

$path = $user->getProfilePicturePath();

Atau sesuai konvensi Component Property, kita dapat menyingkatnya seakan-akan method tersebut adalah atribut. (karena ini konvensi khusus Yii, ini tidak berlaku di aplikasi PHP yang lain)

$path = $user->profilePicturePath;

Selanjutnya agar kita dapat menampilkan foto profil beserta kota asal dari pengguna, tentunya kita harus mengembalikan data foto profil dan kota asal, bukan hanya data nama panjang. Untuk itu kita hanya perlu mengubah methodactionLookup dari controller SiteController yang kita buat sebelumnya.

		foreach ($users as $user) {
			$return[] = array(
			    'label' => $user->firstName . ' ' . $user->lastName,
			    'value' => $user->id,
			    'image' => $user->profilePicturePath,
			    'city' => $user->city,
			);
		}

Dapat dilihat di kode di atas, selain mengembalikan nama panjang dari user, kita juga mengembalikan data kota asal dan juga foto profil. Saat ini jika kita coba menggunakan autocomplete, memang tidak akan terlihat perubahan sama sekali. Tapi jika kita amati data yang lewat, maka kita dapat melihat ada data kota asal dan foto profil yang ikut dikembalikan.

Data Kota dan Foto Profil

Jika diamati menggunakan Firebug maka akan terlihat data kota dan foto profil juga dikembalikan.

Sekarang adalah bagian yang cukup sulit, yakni mengubah tampilannya. Di dokumentasi jQuery UI Autocomplete dapat dilihat bahwa pengubahan tampilan dilakukan melalui method chaining. Sayangnya di CJuiAutoComplete belum mendukung method chaining (mungkin versi selanjutnya). Tapi ini bisa diakali.

Pertama, di bagian view, kita beri id untuk autocomplete yang dibuat.

/**
 * @filesource /protected/views/201204/site/index.php
 */
$autoCompleteId = 'userautocomplete';
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
    'id' => $autoCompleteId,
    'name' => 'user',
    'sourceUrl' => $this->createUrl('lookup'),
    'options' => array(
	'minLength' => '2',
    ),
    'htmlOptions' => array(
	'style' => 'height:20px;'
    ),
));

Selanjutnya kita tambahkan di view file yang sama fungsi untuk menimpa fungsi penampilan dropdown dari CJuiAutoComplete.

Yii::app()->clientScript->registerScript('userAutoComplete', <<<EOJS
jQuery('#$autoCompleteId').data('autocomplete')._renderItem = function( ul, item ) {
	return $('<li></li>')
		.data('item.autocomplete', item)
		.append('<a class=\'userautocompletelink\'><img src=\''+item.image+'\'/><h1>'+item.label+'</h1><h2>'+item.city+'</h2></a>')
		.appendTo(ul);
};
EOJS
	, CClientScript::POS_READY);

Bisa dilihat di baris ke 5 di kode di atas, kita menambahkan string

'<a class=\'userautocompletelink\'><img src=\''+item.image+'\'/><h1>'+item.label+'</h1><h2>'+item.city+'</h2></a>'

ketimbang string yang biasanya

'<a>'+item.label+'</a>'

Sekarang dropdownnya sudah mulai berbentuk

Dropdown

Dropdown yang sudah dikustomisasi untuk menampilkan gambar.

Yang masih perlu dilakukan di dropdown ini hanyalah merapikan CSSnya saja. Karena di item yang kita append di atas sudah kita beri class “userautocompletelink”, kita dapat dengan mudah merapikan CSSnya. Penambahan CSS ini dapat dilakukan dengan menambahkan di file CSS atau dengan inline CSS menggunakan CClientScript. (Biasanya saya lebih suka cara kedua untuk CSS yang tidak terlalu sering dipakai). Untuk inline CSS, di view file yang sama, tinggal ditambahkan kode di bawah.

Yii::app()->clientScript->registerCss('userAutoComplete', <<<EOCSS
        .userautocompletelink {height:52px;}
	.userautocompletelink img {float:left;margin-right:5px;}
	.userautocompletelink h1 {font-size:15px;padding:0px;margin:0px;font-width:bold;}
	.userautocompletelink h2 {font-size:12px;padding:0px;margin:0px;}
EOCSS
);

Sekarang tampilannya sudah bagus.

Tampilan akhir dropdown

Tampilan akhir dropdown

Kodenya dapat diambil di sini. Berarti selanjutnya tinggal bagaimana cara bisa dengan mudah meletakkan dropdown ini di semua halaman dan bagaimana cara untuk menyambungkan dropdown ini di sebuah form.

6 Comments

  1. Canggih Om Petra, ane baru baca. Btw, yang ini kalo di-klik belum masuk link profile-nya kan ya Om?

  2. Saya memang sedang mencari teman ngeblog. Tapi blog Anda ini banyak sekali isi+pengujungnya. Yang lebih wow, ada Ubuntu di sini! Memang saya tidak mengerti jQuery atau CSS. Kenalan, Kang…🙂


3 Trackbacks/Pingbacks

  1. […] JavaScript, jquery ui, Yii, Yii Framework, yiiframework Sesuai dengan permintaan di postingan sebelumnya, sekarang saya akan mencoba menambahkan link di dropdown yang dihasilkan oleh autocomplete. […]

  2. […] autocomplete, Yii, Yii Framework Setelah sekian lama terbengkalai, akhirnya saya melanjutkan postingan ini. Di postingan tersebut (dan postingan-postingan sebelumnya), saya menulis tentang bagaimana […]

  3. […] autocomplete, Yii, Yii Framework Setelah sekian lama terbengkalai, akhirnya saya melanjutkan postingan ini. Di postingan tersebut (dan postingan-postingan sebelumnya), saya menulis tentang bagaimana […]

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: