[Yii Framework] Membuat Slider

Pernah liat kan sebuah web yang nampilin highlight berita yang nampilin gambar yang berganti-ganti kayak slide? Yah, itu lah slider.. Biasanya slider sendiri digunakan untuk menampilkan highlight berita yang menampilkan judul berita dan juga gambar dari berita tersebut. Selain mempercantik tampilan, slider sendiri bisa menghemat ruang pada web karena dengan slider kita bisa menampilkan beberapa berita di satu frame. Okeh, saya akan bahas cara membuat nya di Yii Framework.

Ada banyak library yang bisa kita gunakan untuk membuat slider, tapi saya menggunakan s3slider. Kenapa? karena sudah ada yang mengintegrasikannya pada Yii Framework sehingga mudah untuk digunakan. Okeh, pertama-tama yang harus anda lakukan adalah mendownload file s3slider dari link yang sudah saya berikan di atas.

Lalu extract hasil downloadan anda lalu pindahkan ke folder “projectAnda/protected/extensions”. Setelah itu pada view anda(terserah dimana saja sesuai tempat dimana anda menampilkannya) masukkan code berikut:

$this->widget('application.extensions.s3slider.S3Slider',
        array(
             'images' => array(
                    array('images/banner/01.jpg', 'Text 1'),
                    array('images/banner/02.jpg', 'Text 2'),
                    array('images/banner/03.jpg', 'Text 3'),
                    array('images/banner/04.jpg', 'Text 2'),
                    array('images/banner/05.jpg', 'Text 3'),
              ),
              'width' => '720',
              'height' => '300',
        )
  );

Penjelasan : code tersebut saya copas dari link yang sudah saya berikan sebelumnya. Disana ada “images/banner/01.jpg”, dll.. itu adalah alamat dari image yang ingin anda tampilkan di slider anda. Yah, tentu anda harus arahkan alamat image anda sesuai dengan alamat image yang anda punya. Sedangkan “Text 1”, “Text 2”, dll itu adalah text yang akan di tampilkan pada slider anda. Jika code anda sudah benar, anda akan melihat tampilan gambar yang begerak seperti slide beserta ada tulisan di atas gambar yang bergerak.

Okeh, jika anda sudah berhasil melakukannya.. selamat…

Permasalahan sekarang adalah kita harus membuat slider yang bisa di ubah-ubah secara otomatis oleh user tanpa harus melakukan edit pada coding. Ya, solusinya adalah dengan menghubungkannya ke database. Sekarang saya akan paparkan step-step menghubungkan slider dengan database agar ia bersifat dinamis.

Pertama, buatlah sebuah tabel dengan attribute sebagai berikut: id, judul, gambar. Lalu lakukan generate code untuk model dan operasi CRUD nya.. Setelah itu buat agar anda dapat melakukan upload file “gambar” pada tabel tersebut(bila anda belum mengerti tentang hal ini, anda bisa lihat di https://sabitlabscode.wordpress.com/2011/06/16/yii-framework-cara-upload-file/).

Misal, anda ingin menampilkan slider saya pada halaman indeks saya. Buat code pada controller tepatnya pada actionIndeks anda menjadi seperti berikut:

	public function actionIndex()
	{	
		$sql='SELECT * FROM namaTabelAnda order by id desc';
		$dataProvider2=new CSqlDataProvider($sql,array(
			'keyField' => 'id',
			'pagination'=>array(
				'pageSize'=>4,
			),
		));
		$this->render('index',
			array(
				'dataProvider2'=>$dataProvider2
			)
		);
	}

Penjelasan : pada code di atas saya mengambil semua nilai pada tabel yang sudah saya buat. Saya panggil datanya dari urutan paling akhir dan saya hanya mengambil 4 nilai terakhir dari data tersebut. Setelah itu saya kirimkan nilai tersebut ke ke view, tepatnya index agar dapat digunakan datanya untk di tampilkan.

Lalu pada tampilan anda, buat code berikut:

<?php
$terserah=array();
foreach($dataProvider2->getData() as $i=>$ii)
{
	$itu=$ii['judul'];
	$awal='a/../namaFolderTempatNyimpen/'.$ii['id'].'.jpg';
	$terserah[$i]=array($awal,$itu);
}

$this->widget('application.extensions.s3slider.S3Slider',
        array(
             'images' => $terserah,
              'width' => '660',
              'height' => '340',
        )
  );
?>

Penjelasan : Code di atas mengambil semua nilai dari SQL query yang kita dapatkan dari controller tadi lalu memasukkan hasilnya ke dalam sebuah array dengan nama variabel “terserah”. Di variabel “terserah” itu sendiri saya memasukkan link gambar yang akan di tampilkan beserta text yang akan tampil pada gambar tersebut. Setelah itu kita memanggil widget s3slider untuk menampilakan slidernya, lalu memasukkan array “terserah” ke dalamnya.

Jika anda sudah benar melakukannya, maka akan tampil slider yang secara otomatis menampilkan slider kurang lebih seperti berikut:

sekalian narsis

Mohon maaf, saya numpang narsis sedikit.. hehehe… 😀

Jika anda sudah melakukan nya dengan benar, gambar di atas akan bergerak seperti slide, begitu juga tulisan yang ada di atasnya…

Selesai… Selamat mencoba…

Semoga membantu… 😀