Penerapan Form Input Dinamis pada Pembuatan Transaksi Jurnal Umum Akuntansi

11 June 2017 | Tags: Form dinamis combobox, Form Dinamis Select Option, Form Dinamis untuk Akuntansi, Form dinamis untuk transaksi jurnal umum, Jurnal Umum Akuntnasi, Transkasi Jurnal Umum

---

Kali ini saya akan membahas tentang penerapan form input dinamis pada pembuatan transaksi jurnal umum akuntansi. Untuk form dinamis sendiri sudah pernah saya tulis pada artikel : Membuat Form Input Dinamis Dengan Jquery dan Proses Form Dinamis Dengan PHP MySQL. Konsep dari form dinamis adalah kita bisa menambahkan element html yang bisa berupa text, combobox, checkbox dan yang lainnya sejumlah yang kita inginkan secara dinamis. Dan artikel kali ini dalam pembuatan aplikasinya menggunakan framework CodeIginter dan Bootstrap.

Ok, sebelum memulai mari kita mulai dari pengertian Jurnal Umum. Jurnal Umum adalah buku untuk mencatat analisis tiap transaksi secara kronologis atau beraturan  sesuai dengan tanggal kejadian [Badriyah Hurriyah: Praktis Menyusun Laporan Keuangan]. Jurnal umum dicatat dengan  menyebutkan akun yang di Debet maupun yang di Kredit.

Jadi untuk memulai materi ini kami mengasumsikan bahwa pembaca sudah memahami konsep dasar akuntansi, jika belum silahkan cari artikel sederhana untuk memahaminya.

Diagram E-R(Entity Relationship Diagram) Jurnal Umum

Untuk penerapan jurnal umum sederhana ke dalam aplikasi, kita membutuhkan beberapa tabel sebagai berikut:

1. tbl_periode: tabel untuk merekam periode
2. tbl_ju_header: tabel untuk merekan master dari jurnal umum
3. tbl_ju_detail: tabel untuk merekam rincian kode perkiraan dari jurnal umum
4. tbl_perkiraan: tabel master untuk kode perkiraan atau disebut Chart of Accounts (COA).
5. tbl_perkiraan_group: tabel untuk mengelompokkkan kode perkiraan.

Adapun diagram E-R nya adalah sebagai berikut:

Pembuatan Form Input Dinamis Pada Transaksi Jurnal Umum

Yang menjadi fokus pada artikel kali ini adalah penerapan Form Input Dinamis. Untuk konsep CRUD (Create, Read, Update, Delete) pada CodeIgniter bisa anda pelajari sendiri, karena begitu banyak contoh yang tersedia di Internet.

Pada transaksi Jurnal umum, satu transaksi bisa mempengaruhi minimal 2 (dua) perkiraan dimana jumlah total debet dan kredit harus sama.Sebagai contoh: Transaksi Pembelian Peralatan secara tunai akan mencatatkan kode perkiraan sebagai berikut:

1. Pembelian Peralatan menyebabkan nilai peralatan bertambah sehingga kode perkiraan dicatat di kolom debet
2. Pembelian peralatan secara tunai menyebabkan kas berkurang sejumlah nilai peralatan yang dibeli sehingga dicatat di kolom kredit.

Contoh kasus yang lain misalnya Transaksi Pembelian Perlengkapan seharga Rp. 1.000.000, dibayar dengan tunai Rp.400.000 dan hutang Rp. 600.000, maka pencatatannya adalah:

1. Perlengkapan Bertambah dicatat di debet sebesar Rp. 1.000.000
2. Kas Berkurang dicatat di kredit sebesar Rp.400.000
3. Utang Usaha bertambah dicatat di kolom kredit sebesar Rp. 600.000

Nah dari kasus jurnal umum tersebut jika diterapkan ke dalam aplikasi, dalam kasus berbasis web, maka kita perlu menggunakan form input dinamis untuk mencatat rincian perkiraan akun yang terlibat.

Dalam contoh kasus diatas ketika kita menambah rincian, maka akan muncul rincian baru dengan kolom: kode perkiraan, kolom debet  dan kolom kredit. Khusus pada kode perkiraan diambil dari tabel tbl_perkiraan.

Pembuatan Form Dinamis dengan Jquery/Javascript

Untuk membuat form dinamis kita perlu membuatkan fungsi yang disimpan pada file javascript: assets/js/arf.js

Adapun script nya adalah sebagai berikut:

function addRincian(sl_coa) {
    var idf = document.getElementById("idf").value;
	stre="<div class='form-group'  id='srow" + idf + "'><div class='controls'>";
	stre=stre+"<label for='NamaLengkap' class='control-label col-xs-2 ckeditor'></label>";
	stre=stre+" <div class='col-xs-4'>";
	stre=stre+sl_coa;
	stre=stre+"</div>";
	stre=stre+" <div class='col-xs-2'>";
	stre=stre+"<input placeholder='Debet'  type='text' class='form-control input-sm' name='debet[]'   />";
	stre=stre+"</div>";
	stre=stre+" <div class='col-xs-2'>";
	stre=stre+"<input placeholder='Kredit'  type='text' class='form-control input-sm' name='kredit[]'   />";
	stre=stre+"</div>";

	stre=stre+"<div class='col-xs-1'> <button type='button' class='btn btn-danger btn-sm' title='Hapus Rincian !' onclick='removeFormField(\"#srow" + idf + "\"); return false;'><i class='glyphicon glyphicon-remove'></i></button></div> </div>";
    $("#divAkun").append(stre);
    idf = (idf-1) + 2;
    document.getElementById("idf").value = idf;
}
function removeFormField(idf) {
    $(idf).remove();
}

Pada fungsi kita menyertakan parameter  sl_coa yang berisi nilai element untuk menampilkan combobox/dropdown daftar kode perkiraan yang diambil dari tabel tbl_perkiraan.

Pemanggilan Fungsi

Kembali ke paramter sl_coa diatas, itu dibuat dengan query ke tbl_perkiraan sehingga daftar kode perkiraan disimpan pada sl_coa. Varibel sl_coa berisi perintah html untuk membuat element form select/combobox.

  <?php
       	$sl_coa="<select name=coa[] class=form-control input-sm>";
	    if(count($gp)>0)
		{
		   foreach($gp as $rg)//fetch dari tbl_perkiraan_group
			{
		     	    $kelompok=$rg->id;
			    $sl_coa.="<option value=$kelompok disabled=disabled>".strtoupper($rg->nama_pg)."</option>";
			    $this->db->order_by('coa_perkiraan','ASC');
			    $perkiraan= $this->db->get_where('tbl_perkiraan',array('kelompok'=>$kelompok));
			    foreach ($perkiraan->result_array() as $data )
				{
			  	  $ip=$data['id_perkiraan'];
				  $sl_coa.= "<option value=$ip>&nbsp;&nbsp;&nbsp;&nbsp;".$data['coa_perkiraan']."-".$data['nama_perkiraan']."</option>";
				}
			}
		 }
	$sl_coa.="</select>";
?>

Pemanggilan Lewat Button

<a class="btn btn-primary btn-sm"  onclick="addRincian('<?php echo $sl_coa;?>'); return false;"><i class="glyphicon glyphicon-plus"></i> Tambah Rincian</a>

Proses Form Dinamis

Selanjutnya pada Controller tinggal melakukan proses untuk menyimpan form dinamis yang dengan menggunakan array.

    //----------------INSERT DETAIL--------------------------------------
   if($this->input->post('coa'))
	{
  	  $v1=$this->input->post('coa');
	  while(list($key,$value)=each($v1))
	    {
		$ca=$this->input->post("coa[$key]");
		$debet=$this->input->post("debet[$key]")*1;
		$kredit=$this->input->post("kredit[$key]")*1;
		$data2=array('coa'=>$ca,
			     'header'=>$header,
			     'debet'=>$debet,
                             'kredit'=>$kredit);
                $this->db->insert('tbl_ju_detail',$data2);			 
            }
       }

Ok, demikian tutorial kali ini semoga bermanfaat dan bisa diterapkan.

Download Form Input Input Dinamis pada Transaksi Jurnal Umum

Komentar via Facebook tentang Penerapan Form Input Dinamis pada Pembuatan Transaksi Jurnal Umum Akuntansi