Aplikasi Persediaan Barang (Sistem Inventory) Menggunakan Yii2 - Part #4

Aplikasi Persediaan Barang (Sistem Inventory) Menggunakan Yii2 - Transaksi Master Detail
<p><a href="http://pojokprogrammer.net/tags/code-factory" style="line-height: 20.8px;" target="_blank"><strong><span style="color:rgb(0, 0, 205)">Code&nbsp;</span><span style="color:rgb(255, 0, 0)">Factory</span></strong></a><span style="color:rgb(255, 0, 0)">&nbsp;</span>|&nbsp;<strong>Sistem Inventory&nbsp;</strong>atau Aplikasi Persediaan Barang adalah salah satu aplikasi yang umum dan cukup menantang terutama bagi para programmer pemula yang sedang mengasah skill&nbsp;programming-nya. Artikel ini merupakan lanjutan dari artikel ketiga yang membahas&nbsp;<a href="http://pojokprogrammer.net/content/aplikasi-persediaan-barang-sistem-in…"><strong>Pembuatan Form Master Barang</strong></a>. Artikel ini akan melanjutkan pembuatan form transaksi dengan desain <em>master-detail </em>menggunakan bantun <em>extension <strong>dynamic-form</strong></em>, dan kita buat&nbsp;<strong>sederhana&nbsp;</strong>saja sehingga akan cukup mudah dipahami para programmer pemula.</p>
<!--break-->
<h2>Extension Tambahan</h2>
<p>Untuk memudahkan kita membangun user interface yang cukup nyaman maka kita memerlukan dua buah extension tambahan, yaitu datepicker untuk memilih tanggal, dan dynamic-form untuk form CRUD master-detail. Gunakan perintah composer berikut ini untuk instalasi-nya.</p>
<pre class="brush:text">
composer require kartik-v/yii2-widget-datepicker "*"
composer require wbraganca/yii2-dynamicform "*"</pre>
<p>
</p>
<h2>Generate CRUD Menggunakan Gii</h2>
<p>Silakan generate CRUD untuk Table Transactions dan TransactionDetails dengan cara yang sama seperti saat membuat <a href="http://pojokprogrammer.net/content/aplikasi-persediaan-barang-sistem-in…">form master barang</a>.</p>
<p>
</p>
<h2>Modifikasi List Transaksi Barang</h2>
<p>Hasil <em>generate </em>CRUD dari Yii sangat membantu kita mempercepat proses pengerjaan aplikasi ini, namun masih perlu beberapa penyesuaian dari <em>code </em>standard <strong>Gii </strong>yang dihasilkan,</p>
<pre class="brush:php">
'columns' =&gt; [
['class' =&gt; 'yii\grid\SerialColumn'],
'id',
'trans_code',
'trans_date',
'type_id',
'remarks',
['class' =&gt; 'yii\grid\ActionColumn'],
],
</pre>
<p>Kita dapat menghapus field <span style="font-family:courier new,courier,monospace"><strong>id </strong></span>yang hanya field <em>identity </em>sehingga tidak penting untuk ditampilkan. Kita juga dapat mengubah field <span style="font-family:courier new,courier,monospace"><strong>type_id </strong></span>menjadi <span style="font-family:courier new,courier,monospace"><strong>type.name </strong></span>agar data yang ditampilkan adalah nama jenis transaksinya dan bukan angka id-nya sehingga hasilnya menjadi seperti di bawah ini</p>
<pre class="brush:php">
'columns' =&gt; [
['class' =&gt; 'yii\grid\SerialColumn'],
'trans_code',
'trans_date',
'type.name',
'remarks',
['class' =&gt; 'yii\grid\ActionColumn'],
],
</pre>
<p>
</p>
<p>Hasilnya cukup <em>user-friendly</em>. Namun sayangnya dengan cara di atas, kita <strong>tidak bisa melakukan filter </strong>terhadap jenis transaksi. Oleh karena itu kita perlu melakukan perubahan agar filter terhadap jenis transaksi barang kita kita lakukan, <strong>filter menggunakan dropdown list</strong>. Pertama yang kita lakukan adalah mengambil data semua jenis transaksi yang ada di dalam database menggunakan <em>code </em>berikut,</p>
<pre class="brush:php">
$typeList = ArrayHelper::map(TransactionTypes::find()-&gt;asArray()-&gt;all(), 'id', 'name');</pre>
<p>Kemudian ubah setting column <span style="font-family:courier new,courier,monospace"><strong>type.name </strong></span>di <em>GridView </em>dengan menambahkan atribut setting filter dan value barupa <a href="http://php.net/manual/en/functions.anonymous.php">Closure</a> yang bentuknya <a href="http://www.yiiframework.com/forum/index.php/topic/49479-gridview-with-f…">spesifik untuk GridView</a>, sehingga&nbsp;menjadi seperti di bawah ini</p>
<pre class="brush:php">
'columns' =&gt; [
['class' =&gt; 'yii\grid\SerialColumn'],
'trans_code',
'trans_date',
[ 'attribute' =&gt; 'type_id',
'filter' =&gt; $typeList,
'label' =&gt; 'Transaction Type',
'value' =&gt; function ($model, $index, $widget) { return $model-&gt;type-&gt;name; }
],
'remarks',
['class' =&gt; 'yii\grid\ActionColumn'],
],
</pre>
<p>
</p>
<h2>Modifikasi Form Transaksi Barang</h2>
<p>Form input transaksi barang melibatkan dua buah <em>table </em>yaitu <span style="font-family:courier new,courier,monospace">transactions</span> dan <span style="font-family:courier new,courier,monospace">transaction_details </span>sehingga kita memerlukan <strong><em>extension dynamic-form </em></strong>untuk membuatnya. Instalasi dengan menggunakan perintah composer di bawah ini.</p>
<pre class="brush:php">
composer require wbraganca/yii2-dynamicform "*"</pre>
<p>Yang perlu kita lakukan kemudian adalah</p>
<ul>
<li>Membuat class <span style="font-family:courier new,courier,monospace">Model </span>untuk memudahkan kita membuat beberapa row <span style="font-family:courier new,courier,monospace">TransactionDetails </span>dalam satu baris code saja.</li>
<li>Modifikasi <span style="font-family:courier new,courier,monospace">ActionCreate </span>di <span style="font-family:courier new,courier,monospace">TransactionController </span>untuk proses pembuatan transaksi baru</li>
<li>Modifikasi <span style="font-family:courier new,courier,monospace">ActionUpdate </span>di <span style="font-family:courier new,courier,monospace">TransactionController </span>untuk proses pembuatan transaksi yang sudah ada di database</li>
<li>Modifikasi&nbsp;<span style="font-family:courier new,courier,monospace">ActionDelete&nbsp;</span>di&nbsp;<span style="font-family:courier new,courier,monospace">TransactionController&nbsp;</span>untuk proses penghapusan&nbsp;transaksi</li>
<li>Modifikasi form untuk <em>Create </em>dan <em>Update</em>.</li>
</ul>
<h3>Class <span style="font-family:courier new,courier,monospace">Model</span></h3>
<p>Class <span style="font-family:courier new,courier,monospace">Model </span>ini merupakan turunan dari class <span style="font-family:courier new,courier,monospace">yii\base\Model </span>namun kita menambahkan sebuah function createMultiple untuk memudahkan kita membuat beberapa row&nbsp;<span style="font-family:courier new,courier,monospace">TransactionDetails</span>&nbsp;berdasarkan isi dari variable POST<span style="font-family:courier new,courier,monospace">&nbsp;</span>menggunakan satu baris code saja.&nbsp;</p>
<h3>Modifikasi <span style="font-family:courier new,courier,monospace">ActionCreate</span></h3>
<p>Saat melakukan proses penyimpanan data transaksi baru ke database, kita mengikuti algoritma berikut ini,</p>
<ul>
<li>Load master record</li>
<li>Load semua detail records</li>
<li>Assign foreign key field di detail records</li>
<li>Validate master record</li>
<li>Validate detail record</li>
<li>Jika validasi berhasil
<ul>
<li>Mulai transaksi database</li>
<li>Simpan master record</li>
<li>Simpan detail record satu-persatu</li>
<li>Jika berhasil semua, commit</li>
<li>Jika gagal rollback</li>
<li>Tampilkan hasilnya</li>
</ul>
</li>
</ul>

<h3>Modifikasi <span style="font-family:courier new,courier,monospace">ActionUpdate</span></h3>
<p>Saat melakukan proses penyimpanan perubahan data transaksi ke database. Agak sedikit berbeda dengan proses pyimpanan transaksi baru, untuk proses edit, kita menghapus semua detail record yang sudah ada sebelumnya di database dan kemudian melakukan insert ulang sebagai record baru. Algoritma-nya adalah seperti berikut ini,</p>
<ul>
<li>Load master record</li>
<li>Load semua detail records</li>
<li>Assign foreign key field di detail records</li>
<li>Validate master record</li>
<li>Validate detail record</li>
<li>Jika validasi berhasil
<ul>
<li>Mulai transaksi database</li>
<li>Simpan master record</li>
<li>Delete semua detail record yang sudah ada di database</li>
<li>Simpan detail record satu-persatu</li>
<li>Jika berhasil semua, commit</li>
<li>Jika gagal rollback</li>
<li>Tampilkan hasilnya</li>
</ul>
</li>
</ul>

<h3>Modifikasi <span style="font-family:courier new,courier,monospace">ActionDelete</span></h3>
<p>Pada saat menghapus data transaksi maka yang perlu kita lakukan adalah terlebih dahulu menghapus detail record sebelum menghapus master/parent record. Algoritma-nya adalah sebagai berikut</p>
<ul>
<li>Mulai transaksi database</li>
<li>Delete semua detail record satu-persatu</li>
<li>Delete master record</li>
<li>Jika berhasil semua, commit</li>
<li>Jika gagal rollback</li>
<li>Tampilkan index transaksi barang</li>
</ul>

<h3>Modifikasi <span style="font-family:courier new,courier,monospace">create.php</span></h3>
<p>​Kita perlu menambahkan variable $details agar dapat dikenali di dalam _form.php</p>
<pre class="brush:html">​ &lt;?= $this-&gt;render('_form', [
'model' =&gt; $model,
'details' =&gt; $details,
]) ?&gt;</pre>
<h3>Modifikasi <span style="font-family:courier new,courier,monospace">update.php</span></h3>
<p>​Kita juga perlu menambahkan variable $details agar dapat dikenali di dalam _form.php</p>
<pre class="brush:html"> &lt;?= $this-&gt;render('_form', [
'model' =&gt; $model,
'details' =&gt; $details,
]) ?&gt;</pre>
<h3>Modifikasi <span style="font-family:courier new,courier,monospace">_form.php</span></h3>
<p>​Code lengkapnya adalah seperti berikut ini</p>

<p>
</p>
<h2>Membuat View Transaksi Barang</h2>
<p>Untuk menampilkan data master-detail, maka kita harus record master dan semua record detail yang berelasi, sehingga kita perlu mengubah ActionView menjadi seperti ini</p>

<p>Dan jangan lupa mengubah view.php agar menampilkan data yang didapat dari controller. Kita akan menggunakan DetailView untuk master row, dan menggunakan GridView untuk menampilkan detail row.</p>

<p>
</p>
<h2>Simpulan</h2>
<p>Mudah-mudahan tutorial ini dapat membantu teman-teman yang sedang belajar membuat aplikasi inventory, khususnya yang menggunakan Yii Framework. <em>Source code </em>aplikasi ini dapat dilihat di <strong><a href="https://github.com/hidayat365/yii2-inventory-app">GitHub</a>,</strong>&nbsp;silakan digunakan untuk keperluan pembelajaran saja.</p>
<p>.</p>
<p>&nbsp;</p>

Moch Yogi    Jum, 04/21/2017 - 02:19

gan mau tanya tentang "Membuat class Model untuk memudahkan kita membuat beberapa row TransactionDetails dalam satu baris code saja" itu maksudnya gimana ya? kita bikin file php namanya model atau kita copy source dari agan ke Model yang basenya Yii2? mohon pencerahannya :D