[Yii Framework] Membuat Entry Data One to Many Relation dengan Tabel Dinamis

Pastinya banyak sekali kasus dimana kita diharuskan membuat form entry data yang dimana tabel nya memiliki hubungan one to many. Nah, biasanya untuk mempermudah user, kita membuat form entry data terebut menjadi sebuah tabel dinamis seperti gambar berikut:

Yah, bisa anda lihat disana dimana kita harus menginput sebuah data Kelas sekaligus murid-murid yang ada di dalam kelas tersebut.

Sebenarnya postingan ini adalah sedikit pengembangan pada postingan sebelumnya, jadi akan lebih baik jika anda membaca postingan sebelumnya terlebih dahulu :D. Okeh, langsung saja.. Sama seperti postingan sebelumnya, saya akan menjelaskan dulu definisi tabel-tabel yang saya gunakan pada postingan ini.

Saya disini menggunakan 2 buah tabel, tabel “Kelas” dan tabel “Murid”, berikut penjelasannya :

Tabel Kelas :

• id : integer, Primary key, auto increment
• namaKelas : varchar(10)
• waliKelas : varchar(30)

Tabel Murid :

• id: integer, Primary Key, auto increment
• nama : varchar(50)
• jk: varchar(10)
• kelas : integer, Foreign Key tabel “kelas” attribute “id”

Mari kita mulai coding..

Pertama-tama lakuakan generate code Model dan CRUD kedua tabel tersebut dengan gii. Lalu download lah extension JAppendo disini. Extract dan letakkan pada folder “protected/extensions”. Sekarang buka “protected/controllers/KelasController.php”, lalu lakukan modifikasi pada code actionCreate menjadi seperti berikut:

	public function actionCreate()
	{
		$model=new Kelas;
		$model2=new Murid;

		if(isset($_POST['Kelas']))
		{
			$model->attributes=$_POST['Kelas'];
			if($model->save())
			{
				if(isset($_POST['nama']))
				{
					$total = count($_POST['nama']);
		    		for ($i = 0; $i <= $total; $i++)
		    		{
		    			if(isset($_POST['nama'][$i]))
		    			{
		     				$jiakakak = new Murid;
		     				$jiakakak->kelas=$model->id;
		        			$jiakakak->nama = $_POST['nama'][$i];
		        			$jiakakak->jk = $_POST['jk'][$i];
		         			$jiakakak->save();
		    			}	
					}
					$this->redirect(array('view','id'=>$model->id));
				}
			}
		}

		$this->render('create',array(
			'model'=>$model,
			'model2'=>$model2,
		));
	}

Penjelasan : Code di atas adalah code yang akan melakukan penyimpanan pada data baik data “Kelas” maupun data “Murid”. Disana terlihat saya melakukan perulangan pada penyimpanan tabelnya. Itu karena kita melakukan penyimpanan banyak data pada tabel “Murid”, sedangkan pada tabel “kelas” kita hanya melakukan penyimpanan 1 data saja. Lalu saya membuat attribut “kelas” pada tabel “Murid” tidak di input 1 per 1, melainkan langsung mengikuti semua “kelas” yang sudah di input di atas. Jadi nginput kelasnya cukup 1 kali aja dan itu akan mengarah ke semua murid yang di input di bawah nya..

Nah, kalo tabel yang anda gunakan berbeda attribut-attribut nya dengan yang saya paparkan, silahkan anda sesuaikan yak.. 😀

okeh, next step.. Buatlah sebuah file .php di protected/extensions/appendo/views/. Kasih nama  “jiakak”, jadi akan ada tabel jiakak.php di dalam folder tersebut. Lalu isi file tersebut dengan code berikut:

<table class="appendo-gii" id="<?php echo $id ?>">
	<thead>
		<tr>
			<th>Nama </th><th>Jenis Kelamin</th>
		</tr>
	</thead>
	<tbody>
    <?php if ($model->nama == null): ?>
		<tr>
			<td><?php echo CHtml::textField('nama[]','',array('style'=>'width:120px')); ?></td>
            <td>
            <?php echo CHtml::dropDownList('jk[]',"string",
                array(
                    "Laki-laki"=>"Laki-laki",
                    "Perempuan"=>"Perempuan",
                ),array('style'=>'width:100px'));
            ?>
            </td>
		</tr>
    <?php else: ?>
        <?php for($i = 0; $i < sizeof($model->nama); ++$i): ?>
    		<tr>
    			<td><?php echo CHtml::textField('nama[]',$model->nama[$i],array('style'=>'width:120px')); ?></td>
                <td>
                <?php echo CHtml::dropDownList('jk[]',$model->jk[$i],
                    array(
						"Laki-laki"=>"Laki-laki",
						"Perempuan"=>"Perempuan",
					),array('style'=>'width:100px'));
                ?>
                </td>
            </tr>
        <?php endfor; ?>
		<tr>
			<td><?php echo CHtml::textField('nama[]','',array('style'=>'width:120px')); ?></td>
            <td>
            <?php echo CHtml::dropDownList('jk[]',"string",
                array(
						"Laki-laki"=>"Laki-laki",
						"Perempuan"=>"Perempuan",
					),array('style'=>'width:100px'));
            ?>
            </td>
		</tr>
    <?php endif; ?>
	</tbody>
</table>

Penjelasan : code di atas adalah code untuk melakukan pengaturan attribut sesuai dengan tabel “Murid”. Saya disana memasuki attribute “nama” dan “jk” sesuai dengan yang ada pada database saya tadi. Tapi saya tidak memasukkan attribute “id” dan “kelas”, kenapa?? untuk attribute “id”, dia adalah attribtue dengan auto increment yang artinya attribute tersebut akan di input secara otomatis dari database, jadi ga perlu di input. Sementara attribute “kelas”, saya akan mengambil nilai nya dari inputan lain, jadi ga saya masukin biar ga nginput 1 per 1 nilainya.. 😀 . Lagi-lagi jika tabel anda berbeda dengan yang saya miliki, silahkan anda modifikasi sesuai dengan attribute yang ada di tabel anda :D…

Lalu buka “protected/views/kelas/_form.php”, tambahkan sebuah attribute seperti berikut:

	<div class="row">
	    <?php $this->widget('application.extensions.appendo.JAppendo',array(
        	'id' => 'repeateEnum',        
        	'model' => $model2,
        	'viewName' => 'jiakak',
        	'labelDel' => 'Remove Row',
       		// 'cssFile' => 'css/jquery.appendo2.css'
    	)); ?>
    </div>

Sehingga code lengkap pada “_form.php” nya akan menjadi seperti berikut:

<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'kelas-form',
	'enableAjaxValidation'=>false,
)); ?>

	<p class="note">Fields with <span class="required">*</span> are required.</p>

	<?php echo $form->errorSummary($model); ?>

	<div class="row">
		<?php echo $form->labelEx($model,'namaKelas'); ?>
		<?php echo $form->textField($model,'namaKelas',array('size'=>10,'maxlength'=>10)); ?>
		<?php echo $form->error($model,'namaKelas'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'waliKelas'); ?>
		<?php echo $form->textField($model,'waliKelas',array('size'=>30,'maxlength'=>30)); ?>
		<?php echo $form->error($model,'waliKelas'); ?>
	</div>

	<div class="row">
	    <?php $this->widget('application.extensions.appendo.JAppendo',array(
        	'id' => 'repeateEnum',        
        	'model' => $model2,
        	'viewName' => 'jiakak',
        	'labelDel' => 'Remove Row',
       		// 'cssFile' => 'css/jquery.appendo2.css'
    	)); ?>
    </div>

	<div class="row buttons">
		<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
	</div>
<?php $this->endWidget(); ?>
</div>

Penjelasan : code di atas adalah form input yang akan di tampilkan. Disana saya menambahkan sebuah control tabel dinamis yang digunakan untuk melakukan input data dengan tabel dinamis yang bisa kita tambahkan dan kurangi sesuka hati :D.

Nah, jika anda sudah berhasil melakukan proses di atas..Harusnya anda sudah bisa melakukan input data dengan menggunakan tabel dinamis. Terakhir mari kita poles tampilan untuk menampilkan datanya agar lebih enak dilihat. Bukalah “protected/views/kelas/view.php”, lalu edit menjadi seperti berikut:

<?php
$this->breadcrumbs=array(
	'Kelases'=>array('index'),
	$model->id,
);

$this->menu=array(
	array('label'=>'List Kelas', 'url'=>array('index')),
	array('label'=>'Create Kelas', 'url'=>array('create')),
	array('label'=>'Update Kelas', 'url'=>array('update', 'id'=>$model->id)),
	array('label'=>'Delete Kelas', 'url'=>'#', 'linkOptions'=>array('submit'=>array('delete','id'=>$model->id),'confirm'=>'Are you sure you want to delete this item?')),
	array('label'=>'Manage Kelas', 'url'=>array('admin')),
);
?>

<h1>View Kelas #<?php echo $model->id; ?></h1>

<?php $this->widget('zii.widgets.CDetailView', array(
	'data'=>$model,
	'attributes'=>array(
		'id',
		'namaKelas',
		'waliKelas',
	),
)); ?>

<?php $this->widget('zii.widgets.grid.CGridView', array(
	'dataProvider'=>$murid,
	'columns'=>array(
		'id',
		'nama',
		'jk',
		 array(
            'name'=>'Kelas',
            'value'=>'Kelas::model()->findByPk($data->kelas)->namaKelas',
        ),
	),
)); ?>

Lalu jangan lupa di KelasController, tepatnya di actionView, edit code ny menjadi seperti berikut:

public function actionView($id)
	{
		$kelas=Murid::model()->findByAttributes(array('kelas'=>$id));
                $haha=new CDbCriteria;
                $criteria=new CDbCriteria;
                $criteria->compare('kelas',$id);
 
                $murid=new CActiveDataProvider('Murid',
                     array('criteria'=>$criteria,)
                );
		$this->render('view',array(
			'model'=>$this->loadModel($id),
			'murid'=>$murid,
		));
	}

Dan anda akan lihat hasilnya seperti berikut:

Hohohoho….

Selesai… Selamat mencoba… dan lagi-lagi pesan saya… silahkan anda modifikasi code di atas sesuai tabel anda…

Semoga membantu… 😀

undefined