[Yii Framework] Membuat Toggle/Spoiler

Toggle/Spoiler adalah salah satu teknik untuk menyembunyikan sebuah tampilan dimana dapat ditampilkan jika user menginginkannya. Yah, mungkin bagi anda yang sering buka kaskus pasti tau bagaimana itu spoiler.. Nah, sekarang saya akan bahas bagaimana step-step untuk membuatnya untuk aplikasi web kita..

Sebenarnya contoh coding seperti ini sudah ada pada code halaman “admin” kita jika kita menggunakan “CRUD Generate” yang sudah disediakan oleh Yii Framework. Pertama,  pada halaman view yang ingin anda buat spoilernya, buatlah code javascript berikut:

<?php
Yii::app()->clientScript->registerScript('search', "
$('.tombol').click(function(){
	$('.spoiler').toggle();
	return false;
});
");
?>

Penjelasan  : Pada code di atas, kita membuat sebuah code yang akan menjadikan sebuah tampilan di spoiler/sembunyikan. Di code tersebut kita juga mengizinkan user menampilkan halaman yang di sembunyikan dengan cara melakukan klik pada sebuah tombol yang memiliki class “tombol”.

Lalu masukkan code berikut:

<?php echo CHtml::link('Buka Spoiler','#',array('class'=>'tombol')); ?>
<div class="spoiler" style="display:none">
Masukkan tampilan yang ingin anda sembunyikan disini
</div>

Penjelasan : Pada code tersebut saya membuat sebuah link yang memiliki class “tombol” dimana jika link tersebut di pilih oleh user maka program akan menjalankan perintah javascript yang sudah kita buat tadi. Lalu saya membuat sebuah tag <div> yang memiliki class “spoiler” yang akan disembunyikan saat pertama kali halaman dibuka, hal tersebut terlihat dari “style=”display:none””. Jadi semua yang ada di dalam tag <div> akan di sembunyikan terlebih dahulu saat halaman pertama kali dibuka, lalu akan di tampilkan saat user menekan link yang sudah ada..

 

Selesai… Selamat mecoba..

Semoga membantu… 😀

Advertisements

[Yii Framework] Import Excel Data into Database SQL

Sebelumnya saya sudah membuat step-step untuk membaca excel file dengan PHP. Ya karena bisa membaca data excel dengan PHP, tentu kita bisa melakukan sedikit modifikasi untuk melakukan input data ke dalam database kita dari file Excel kita tadi.  Berikut step-step melakukan import data excel ke dalam database kita:

  • Jika anda belum pernah sama sekali mencoba membaca excel file di PHP Yii Framework, silahkan baca postingan ini terlebih dahulu.
  • Yak, silahkan download php excel reader lalu extract di “protected/extensions”
  • Misal saya memiliki tabel “A” yang memiliki 2 attribut yaitu: id, nama. Dan saya ingin memasukkan semua nilai dari Excel file pada kolom 1 untuk nilai “id”, dan kolom 2 untuk “nama”.
  • Buatlah sebuah form untuk mengupload data excel yang kita inginkan. Buat sebuah form “excel.php” yg isinya seperti berikut:
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'excel-form',
	'enableAjaxValidation'=>false,
        'htmlOptions'=>array('enctype'=>'multipart/form-data'),
)); ?>
	<div class="row">
                <b>Masukkan Kata Kunci :</b>
		<?php echo $form->fileField($model,'filee',array('size'=>60,'maxlength'=>200)); ?>
		<?php echo CHtml::submitButton('Search'); ?>
	</div>
        
<?php $this->endWidget(); ?>
</div>
  • jangan lupa atur di Model anda agar file yang di upload kita batasi hanya untuk file excel dengan cara:
public $filee;
	
	public function rules()
	{
		return array(
			array('nama', 'required'),
			array('nama', 'length', 'max'=>200),
			array('filee','file','types'=>'xls'),
			array('filee','safe','on'=>'excel'),
			array('id, nama', 'safe', 'on'=>'search'),
		);
	}

Penjelasan : model di atas melakukan validasi agar file yang hanya bisa di upload hanya bertipe .xls. Sedangkan code pada baris kedua berguna untuk mengizinkan pada saat actionExcel di akses, user diperbolehkan hanya mengisi form entri “filee”. Bingung?? Saya juga bingung gimana cara jelasinnya, mungkin bisa anda pelajari disini 😀

  • Pada controllernya, buatlah code seperti berikut:
	public function actionExcel()
	{
		$model=new CobaExcel;
		if(isset($_POST['CobaExcel']))
		{
			$model->attributes=$_POST['CobaExcel'];
			$itu=CUploadedFile::getInstance($model,'filee');
			$path='/../jadwal_keg.xls';
			$itu->saveAs($path);
			$data = new Spreadsheet_Excel_Reader($path);
			$id=array();
			$nama=array();
			for ($j = 2; $j <= $data->sheets[0]['numRows']; $j++) 
			{
				$id[$j]=$data->sheets[0]['cells'][$j][1];
				$nama[$j]=$data->sheets[0]['cells'][$j][2];
			}
		
			for($i=0;$i<count($id);$i++)
			{
				$model=new CobaExcel;

				$model->id=$id[$i];
				$model->nama=$keg[$i];
				$model->save();
                       }
                        unlink($path);
			$this->redirect(array('index'));
		}
		$this->render('excel',array('model'=>$model));
	}
Penjelasan : pada code di atas kita akan menangkap hasil inputan dari form excel.php. Setelah itu kita ambil data tersebut, lalu kita covert file excel yang sudah kita pilih dan kita tangkap nilai-nilai ny untuk kemudian kita masukkan ke dalam database kita..
Selesai… Selamat mencoba…
Semoga membantu… 😀

[Yii Framework] Membuat Menu Dinamis

Menu dinamis yang saya maksud adalah menu yang bisa berubah-ubah di tampilkan atau tidak sesuai dengan user yang sedang mengakses web app kita. Contoh yang saya paparkan disini sendiri sebenarnya saya tiru dari aplikasi “Blog” yang ada di dalam framework Yii sendiri…

Berikut step-step membuat menu dinamis:

  • Pada protected/components, buatlah sebuah folder baru, misal “views”.
  • Buat sebuah file baru bernama misal :”menuku.php”. Lalu isi dengan baris menu, misal :
<ul>
	<li><?php echo CHtml::link('Kelola User',array('user/index')); ?></li>
	<li><?php echo CHtml::link('Kelola Data1',array('data1/index')); ?></li>
	<li><?php echo CHtml::link('Kelola Data2',array('data2/index')); ?></li>
	<li><?php echo CHtml::link('Kelola Data3',array('data3/index')); ?></li>
	<li><?php echo CHtml::link('Kelola Data4',array('data4/index')); ?></li>
</ul>
  • Pada “protected/components”, buatlah sebuah file baru misal “Menuku.php”. Isi dengan code berikut:
<?php

Yii::import('zii.widgets.CPortlet');

class Menuku extends CPortlet
{
	public function init()
	{
		$this->title="Kelola Data";
		parent::init();
	}

	protected function renderContent()
	{
		$this->render('menuku');
	}
}
  • Buka file pada “protected/views/layouts/column2.php”
  • Untuk bisa menampilkan menu yang dimaksud, masukkan code berikut:
		<div class="sidemenu">			
			<?php $this->widget('MenuDokumen'); ?>
		</div>
  • Nah, code di atas sudah bisa menampilkan menu di tampilan kita. Hanya saja menu tersebut belum dinamis berdasarkan user yang login ke dalam web app kita.
  • Untuk membuat nya dinamis, ubah code di atas menjadi seperti berikut:
		<div class="sidemenu">			
			<?php if(Yii::app()->user->getLevel()<=2) $this->widget('MenuDokumen'); ?>
		</div>

Penjelasan : code di atas akan menampilkan menu yang kita maksud jika user login dengan level 2. Yah, tentunya level 2 yang saya maksud disini sudah saya definisikan  sesuai kebutuhan saya. Tentu anda bisa merubahnya dengan kebutuhan anda..

Selesai… Selamat mencoba..

Semoga membantu… 😀

Display Excel File With PHP-Excel-Reader

Cukup banyak teman yang bertanya pada saya, “bisakah menampilkan file yang ada di excel ke dalam halaman web kita?? ” jawabannya “bisa”. Beruntung ada sebuah library yang cukup mumpuni untuk melakukan ini yaitu “php-excel-reader“. Yah, dengan menggunakan ini, kita tidak perlu bersusah payah menampilkan file excel.. cukup kita gunakan dan langsung bisa menggunakan file excel yang ingin kita tampilkan.

Pertama, download file “php-excel-reader” yang ada pada link yang saya berikan tersebut lalu extract. Setelah itu, anda akses class yang ada dengan cara mendeklarasikan dahulu file tersebut lewat aplikasi kita seperti berikut:

require_once('excel_reader2.php');

Lalu arahkan pada file excel yang ingin kita tampilkan seperti berikut:

$data = new Spreadsheet_Excel_Reader("fileExcelAnda.xls");

Setelah itu anda dapat menampilkan file excel tersebut dengan cara:

echo $data->dump(true,true);

Jika anda sudah melakukannya dengan benar, anda akan melihat tampilan excel tersebut pada halaman web anda…

Catatan :

  • Jika terdapat pesan yang mengatakan error karena split(), maka dapat anda pecahkan dengan cara melakukan replace all keyword split menjadi explode pada file “excel_reader2.php”.
  • Jika terdapat pesan error sbb: Assigning the return value of new by reference, maka pada file “excel_reader2.php” cari code
     $this->_ole =& new OLERead();

    lalu rubah menjadi seperti berikut:

     $t = new OLERead();
     $this->_ole =& $t;

Selesai.. Selamat mencoba..

Semoga membantu… 😀

[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… 😀

[Yii Framework] Get Data From CSqlDataProvider

Yah, tentunya pasti kita sering melakukan query data di aplikasi kita. Di Yii Framework sendiri sudah di sediakan yang namanya CSqlDataProvider yang dapat digunakan untuk mempermudah kita dalam melakukan query data dan menampilkannya. Permasalahannya pada CSqlDataProvider konsep nya tidak sama dengan melakukan pemanggilan model secara langsung  sehingga tidak bisa langsung di lakukan pemanggilan data lewat attributnya.

Seperti contoh, jika kita lihat code generate dari Yii Framework pada:

	public function loadModel($id)
	{
		$model=NamaModel::model()->findByPk((int)$id);
		if($model===null)
			throw new CHttpException(404,'The requested page does not exist.');
		return $model;
	}

kita bisa mengakses data nya langsung di view kita dengan cara:

$model->id; atau $model->namaAttribut;

Nah, tapi jika kita menggunakan CSqlDataProvider maka kita harus melakukan sedikit modifikasi pada code kita. Misal kita melakukan query data dengan CSqlDataProvider seperti berikut:

		$sql='SELECT * FROM namaTabel order by id desc';
		$dataProvider2=new CSqlDataProvider($sql,array(
			'keyField' => 'id',
		));

Kita tidak bisa mengaksesnya secara langsung dengan cara seperti berikut:

foreach($dataProvider2->getData() as $i=>$ii)
{
	echo $ii->id;
	echo $ii->namaAttribut;
}

Tapi tenang saja, kita bisa mengaksesnya dengan memodifikasi sedikit code kita menjadi seperti berikut:

foreach($dataProvider2->getData() as $i=>$ii)
{
	echo $ii['id'];
	echo $ii['namaAttribut'];
}

Selesai… Selamat mencoba…

Semoga membantu.. 😀

[Yii Framework] Validation Upload Max File Size tidak bekerja..

Saat kita akan mengupload file, kita akan menentukan batas maksimal ukuran file yang bisa di upload. Di Yii Framework, sangat mudah membuat validasi ini.. Anda cukup menambahkan validasi seperti berikut pada attribut yang akan di berikan validasi:

array('image', 'file', 'types'=>'jpg, gif, png','maxSize'=>1024*1024*10),

Code di atas artinya saya hanya akan mengizinkan file dengan tipe jpg, gif, dan png yang bisa di upload. Dan saya juga hanya membatasi ukuran file yang di upload sebesar 10MB. Tapi kenyataannya saat saya melakukan upload file sebesar misal: 6MB, aplikasi saya tetap tidak mengizinkan upload file dan menampilkan pesan error sebagai berikut:

The file "_MG_9676.JPG" is too large. Its size cannot exceed 2097152 bytes.

Setelah anda kotak-katik dan anda pastikan code anda sudah benar tetapi tetap saja error, kemungkinan ada beberapa settingan yang harus anda ganti.

Yah, anda harus pastikan pada file “php.ini” anda, cari kata kunci

upload_max_filesize

Di laptop saya dengan menggunakan “wamp server”, default dari ukurannya adalah 2MB. Agar dapat memenuhi kebutuhan anda, silahkan anda ganti dengan size yang lebih besar sesuai keinginan anda. Setelah itu restart server anda dan silahkan coba kembali…

Semoga membantu… 😀

%d bloggers like this: