[Yii Framework] Membuat Entry Data Tabel Dinamis dengan JAppendo

Apa anda perlu membuat sebuah form entri data dengan menggunakan tabel dinamis yang bisa ditambah dan dikurangi seperti gambar berikut:

Biasa nya kita harus menggunakan cukup banyak code jquery yang kita rancang sendiri untuk membuat form serupa. Tapi ada sebuah solusi yang cukup bagus untuk melakukan ini.. yaitu dengan menggunakan extension JAppendo.  Dan saya akan paparkan step-step menggunakan JAppendo disini..

Okeh, step pertama.. Tentu saja download extension Jappendo tersebut dari link yang sudah saya berikan, lalu pindahkan ke folder “namaProject/protected/extensions”.

Biar seragam dan mudah di mengerti, saya akan jelaskan dulu tentang database dan tabel yang saya gunakan disini.

Saya memiliki sebuah tabel bernama “hahaha”  dimana attribut-attribut nya adalah sebagai berikut:

  • id: integer, Primary Key, Auto Increment
  • nama : varchar, panjang=100
  • nilai : integer
  • jk: varchar , panjang = 30
Nah, setelah itu saya lakukan generate Model dan CRUD tentunya.
Sekarang pada “protected/views/hahaha/_form.php”, rubah semua code nya hingga menjadi seperti berikut:
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'hahaha-form',
	'enableAjaxValidation'=>false,
)); ?>
    <div class="row">
	    <?php $this->widget('application.extensions.appendo.JAppendo',array(
        	'id' => 'repeateEnum',        
        	'model' => $model,
        	'viewName' => 'hihihi',
        	'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 :

Disana saya memanggil sebuah extension JAppendo yang mengacu pada model hahaha(‘model’=>$model) dan memanggil tampilan “hihihi”(‘viewName’=>’hihihi’).

Nah, mungkin anda bingung apa maksud dari memanggil tampilan ‘hihihi’ ??  Sekarang silahkan anda buka “protected/extensions/appendo/views” lalu di dalam folder tersebut buatlah sebuah file .php dengan nama ”hihihi’ sehingga akan ada sebuah file “hihihi.php” di dalamnya. Lalu isi code nya menjadi seperti berikut:

<table class="appendo-gii" id="<?php echo $id ?>">
	<thead>
		<tr>
			<th>Nama </th><th>Nilai</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::textField('nilai[]','',array('style'=>'width:90px')); ?></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->enum_name[$i],array('style'=>'width:120px')); ?></td>
                <td><?php echo CHtml::textField('nilai[]',$model->enum_value[$i],array('style'=>'width:90px')); ?></td>
                <td>
                <?php echo CHtml::dropDownList('jk[]',$model->enum_type[$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::textField('nilai[]','',array('style'=>'width:90px')); ?></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 : pada hihihi.php saya mendefinisikan variabel-variabel yang akan ditampilkan pada tabel dinamis nya nanti. Disana terliha ada variabel “nama”,”nilai”, dan “jk”. Sedangkan variabel “id” sendiri tidak ada dikarenakan “id” merupaka Auto Increment yang artinya nilainya akan diisi secara otomatis oleh database.

Jika anda sudah selesai melakukan langkah di atas, anda akan melihat tampilan dari “hahaha/create” sudah menampilkan sebuah tabel yang bisa anda tambah dan anda kurangi panjang tabelnya..

Hanya saja walau sudah dapat menampilkan tabel nya, tapi code-code tersebut belum mengizinkan dilakukannya penyimpanan semua variabel yang sudah di input.. Untuk memungkinkan penyimpanannya, mari kita lakukan modifikasi pada controller nya, yaitu HahahaController, tepatnya di actionCreate hingga menjadi seperti berikut:

        public function actionCreate()
	{
		$model=new Hahaha;

		if(isset($_POST['nama']))
		{
			$total = count($_POST['nama']);
		    for ($i = 0; $i <= $total; $i++)
		    {
		    	if(isset($_POST['nama'][$i]))
		    	{
		     		$jiakakak = new Hahaha();
		        	$jiakakak->nama = $_POST['nama'][$i];
		        	$jiakakak->nilai = $_POST['nilai'][$i];
		        	$jiakakak->jk = $_POST['jk'][$i];
		         	$jiakakak->save();
		    	}
		    }
		    $this->redirect(array('index'));
		}
		$this->render('create',array(
			'model'=>$model,
		));
	}

Penjelasan : code di atas akan menyimpan satu per satu nilai yang ada pada tabel sesuai dengan panjang tabel nya.

 

Selesai… Selamat mencoba…

Semoga membantu…😀

35 Responses to [Yii Framework] Membuat Entry Data Tabel Dinamis dengan JAppendo

  1. Pingback: [Yii Framework] Membuat Entry Data One to Many Relation dengan Tabel Dinamis « Sabitlabscode

  2. Ahmad Hani says:

    gan klo ini kan buat add row yang memanjang kesamping klo ane mau bkin kayak

    gimana ya?

  3. sabitzhabit says:

    ga gan, itu kalo add row, manjang ny ke bawah gan..

  4. Ahmad Hani says:

    iya gan itu kan untuk inputan yang datam satu /row klo saya mau buat yang kayak model standar _form CRUD klo di klik add dia bakal muncul lagi gtu?

  5. sabitzhabit says:

    hmm, bisa di jelasin lebih detil ga gan? ane masih belum nangkep mksd ny?

  6. ardi says:

    di view data muridnya kok muncul semua ga di bagi per kelas gan? di tunggu pencerahannya ^^

  7. Deri says:

    Gan,, itu kan baru buat controller actionCreate. untuk actionUpdate-nya sama aja?

    • Ika Werdhawati says:

      kakak smua minta di share dong yang untuk updatenya yang saya nggak bisa update data detailnya malah nambah terus record detailya…

  8. sama gan, dicoba aja gan..

  9. asakura4shera says:

    gan, klo untuk validasi nya gmn yah?
    jd ga muncul validasi nya gan..?

  10. kalo mau pake validasi saya ga nyaranin pake Jappendo gan, mending buat sendiri aja. Saya jga prnah mau buat ga bisa2 soalnya..

  11. Fin says:

    agan sabit thanks udah sharing, sy bnyk belajar dr blog ini… moga nambah pahalanya🙂
    btw, saran aja nih, klo ngasih contoh penamaanya jgn asalan gitu donk.. pek nama model hahah… hiihii.. ituuu…iniiiii…kakak kikikkk mungkin bagi gan sabit biasa n lebih mengerti agan lebih tau, menurut saya jika namanya sesuai dan teratur kita juga bisa ngetrace dara mana model/variable berasal, kadang kita(saya specially) bingung klo pke gituan haha.. hihiiii..
    sekedar saran thanks.

  12. hehehe.. okeh2 gan…
    thanks masukannya…

  13. han says:

    itukan agan ngasih contoh untuk yg add row, kalau untuk add colom bisa g gan?
    matursuwun🙂
    slam knal

    maaf gan ane masih pemula jd tanya nya mungkin g jelas gt hehe.

  14. ga bisa gan..
    itu cuma untuk add row aja..

  15. repeat says:

    Selamat malam mas.. saya ada masalah ini.
    kenapa pas saat saya create dia tidak mau masuk ke dalam database. malah selalu ada keterangan data tidak boleh kosong. pada hal saya dah masukin data y..?? kira2 itu kenapa y. terima kasih

  16. mas pastiin pada code nya data udah bener2 dimasukkin sesuai field nya..
    error yang mas ala adalah dikarenakan ketika ingin menyimpan dia tidak lolos validasi sehingga gagal simpan.. jadi kemungkinannya kalo ga inputannya yang salah, atau pada code nya agan belum ngelempar nilai nya dengan benar..

  17. arif says:

    mas kl bkin dropdownlist di yi tp dropdownya it tampilanya kayak textarea bisa memanjang.. jd bsa nampilin data banyak di dropdown td?

  18. maksud nya gmana ya mas? saya masih bingung?

  19. Nass says:

    gan newbe pengen nanya neh tukan dropdwonlistnya static ya,, kalau pakai dropdownlist datanya dari database disini codingnya jadi gimana ya?? maksudnya di implementasikan di Jappendo ini.

  20. mrkoeh says:

    gan mw tanya,
    klo tiap row itu ad file untuk diupload, gmna buat controllerny??

    ane udh nyoba gini, tp masih gagal. .

    public function actionCreate()
    {
    $model=new FilePendapatan;

    if(isset($_POST[‘nama_dokter’]))
    {
    //$model->attributes=$_POST[‘FilePendapatan’];
    $nama_file = CUploadedFile::getInstances($model,’nama_file’);
    $total = count($_POST[‘nama_dokter’]);
    for ($i = 0; $i kd_dokter = $_POST[‘kd_dokter’][$i];
    $file_add->nama_dokter = $_POST[‘nama_dokter’][$i];
    $file_add->tgl_upload = $_POST[‘tgl_upload’][$i];
    //$file_add->nama_file = $_POST[‘nama_file’][$i];
    $file_add->saveAs(Yii::app()->basePath .’/FilePendapatan/’ . $i->nama_file);
    $file_add->save();
    }
    }
    if ($model->save()) {
    $this->redirect(array(‘view’,’id’=>$model->id));
    }
    }
    $this->render(‘create’,array(
    ‘model’=>$model,
    ));
    }

  21. vita says:

    gan numpang tanya (newbie), misalnya ada tabel A dan B yang berelasi, tabel A berisi field kd_brg dan nm_brg, tabel B berisi kd_brg dan nm_brg juga, apabila kita mengisi kd_brg yang ada di tabel B -> dengan dropdownlist (sudah bisa) maka nm_brg yang di tabel B otomatis terisi.. cara nampilin nm_brg nya secara otomatis itu gmn gan??

  22. miqdar says:

    sip mas, berhasil nih, tinggal insert datanya mudah2an juga tidak ada masalah
    trims mas sabit

  23. waa says:

    gan kenapa data nya ga ke save ya???

  24. mas sabit di hihihi.php ada $model = enum_name itu maksudnya apa yah
    saya udah bisa masukin 1 row tpi waktu di add row
    baru data yg masuk tetep yang paling atas mohon pencerahaanya..

    • enum_name bisa diganti dengan nama field dari tabel model nya gan. sory2 itu salah saya, harus nya enum_name diganti nama, enum_value diganti nilai, enum_type diganti jk

  25. <table class="appendo-gii" id="”>

    KegiatanHasilMulaiSelesaiDurasiCatatan

    kegiatan == null): ?>

    ‘width:120px’)); ?>
    ‘width:50px’)); ?>
    ‘width:70px’)); ?>
    ‘width:70px’)); ?>
    ‘width:70px’)); ?>
    ‘width:120px’)); ?>

    <?php for($i = 0; $i kegiatan); ++$i): ?>

    enum_kegiatan[$i],array(‘style’=>’width:120px’)); ?>
    enum_hasil[$i],array(‘style’=>’width:50px’)); ?>
    enum_mulai[$i],array(‘style’=>’width:70px’)); ?>
    enum_selesai[$i],array(‘style’=>’width:70px’)); ?>
    enum_durasi[$i],array(‘style’=>’width:70px’)); ?>
    enum_catatan[$i],array(‘style’=>’width:120px’)); ?>

    ‘width:120px’)); ?>
    ‘width:50px’)); ?>
    ‘width:70px’)); ?>
    ‘width:70px’)); ?>
    ‘width:70px’)); ?>
    ‘width:120px’)); ?>

    saya ngikutin yg di atas tpi gagal pada saat memasukan row berikutnya

  26. permisi mas.. ko codingan buat add row sama delete row nya gaada ? manggilnya gimana mas ?.. mohon bantuannya

  27. R Rasyid says:

    mas, buat nampilin pesan error saat tekan tombol create bagaimana caranya?
    saya bisa jalankan code nya, cuma tidak ada error catch nya, jadi kosong pun data yang di input tetap dijalankan walaupun tidak masuk ke database. apa tidak bisa seperti form yang default di yii yah? klo ada kolom dengan tanda * harus diisi, kalau tidak data tidak akan di submit.

    thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: