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

<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 kali ini akan membahas pengembangan CRUD untuk master data barang (<em>items</em>)&nbsp;setelah sebelumnya kita membahas <a href="http://pojokprogrammer.net/content/aplikasi-persediaan-barang-sistem-in…"><strong>persiapan database</strong></a>&nbsp;yang akan kita gunakan dalam Aplikasi Inventory ini. Kita akan memanfaatkan Gii Code Generator untuk mempercepat proses pengembangannya.&nbsp;Aplikasi yang&nbsp;akan kita bangun&nbsp;<strong>sederhana&nbsp;</strong>saja sehingga akan cukup mudah dipahami para programmer pemula.</p>
<h2>Generate CRUD Menggunakan Gii</h2>
<p>Yii menyediakan&nbsp;<strong>extension Gii&nbsp;</strong>untuk memudahkan kita men-<em>generate</em> code untuk models, forms, CRUD, modules dan sebagainya. Keberadaan extension ini sangat membantu para programmer untuk mempercepat proses pengembangan aplikasi, karena template untuk CRUD sudah dibuatkan sehingga kita cukup memodifikasi sesuai keperluan saja.&nbsp;Gii bisa diakses melalui URL</p>
<pre>
http://localhost/path/to/index.php?r=gii
</pre>
<p>Atau jika kamu sudah menggunakan fitur pretty URL, maka Gii dapat diakses di</p>
<pre>
http://localhost/path/to/index.php/gii
</pre>
<p>Berikutnya yang perlu kita lakukan adalah men-generate form CRUD untuk master barang dengan&nbsp;<em>base table</em>&nbsp;<strong>items</strong>. Pilihlah option CRUD Generator yang disediakan oleh Gii, dan kemudian isikan form di bawah seperti tampak pada screenshot di bawah ini.</p>
<p>

</p>
<p>Yang perlu diperhatikan pada saat mengisi form CRUD Generator ini antara lain</p>
<ul>
<li>Perhatikan bahwa <strong>separator </strong>untuk namespace dan class menggunakan tanda garis miring terbalik (<em>backslash</em>) sedangkan separator folder untuk Views Path menggunakan garis miring biasa (<em>slash</em>) karena textbox&nbsp;Views Path berisikan folder lokasi views akan disimpan.</li>
<li>Nama <em><strong>Model Class </strong></em>harus lengkap, meliputi <em>namespace </em>dan nama <em>class </em>model bersangkutan, dalam hal ini adalah <span style="font-family:courier new,courier,monospace"><strong>app\models\Items</strong></span>. Untuk mengetahui <em>namespace </em>dan nama <em>class </em>caranya cukup dengan membuka file code model bersangkutan saja, di file tersebut sudah tersedia <em>namespace </em>dan nama <em>class</em>-nya.</li>
<li>Nama model untuk <strong><em>Search Model Class </em></strong>cukup kita salin saja dari <em>Model Class </em>dan kemudian kita tambahkan "Search" dibelakangnya. Dalam hal ini&nbsp;adalah&nbsp;<span style="font-family:courier new,courier,monospace"><strong>app\models\ItemsSearch</strong></span>.
<ul>
<li>Nama <strong><em>Controller Class </em></strong>kita ikuti konvensi yang digunakan oleh Yii2 yaitu menggunakan akhiran "Controller" di akhir nama class. Namespace yang dipakai adalah <span style="font-family:courier new,courier,monospace"><strong>app\controllers</strong></span>, sehingga&nbsp;field ini kita isikan dengan <span style="font-family:courier new,courier,monospace"><strong>app\controllers\ItemController</strong></span>. Perhatikan bahwa kita hanya menggunakan <span style="font-family:courier new,courier,monospace"><strong>Item</strong></span> saja tanpa akhiran plural "s"</li>
</ul>
</li>
<li>Kemudian isikan Views Path dengan <span style="font-family:courier new,courier,monospace"><strong>@app/views/item</strong></span> karena kita ingin menyimpan berkas-berkas views ini di dalam folder <span style="font-family:courier new,courier,monospace"><strong>views/item</strong></span>. Perhatikan bahwa kita menggunakan garis miring biasa (<em>slash</em>) untuk memisahkan nama folder.</li>
<li>Silakan beri centang pada option "Enable l18n" dan "Enable Pjax" jika diinginkan.</li>
<li>Biarkan field lainnya sesuai default.</li>
</ul>
<p>Langkan selanjutnya adalah menekan tombol Preview agar kita bisa memastikan tidak menimpa berkas coding yang sudah kita buat sebelumnya jika ada. Hasil preview tampak seperti screenshot di bawah ini.</p>
<p>

</p>
<p>Kemudian tekan tombol generate untuk memastikan Gii membuat kita memastikan semuanya sesuai keinginkan kita.</p>
<p><img alt="Pojok Programmer Aplikasi Persediaan Barang (Sistem Inventory) Menggunakan Yii2 - CRUD Master Barang" src="/sites/default/files/pictures/tutorials/crud-items-04.png" style="height:313px; width:663px" /></p>
<p>&nbsp;</p>
<h2>Modifikasi List Master Barang</h2>
<p>Karena kita tidak perlu menampilkan fiel ID dalam List Barang, maka kita hapus saja field ID dari setting GridView , menjadi tampak seperti code di bawah ini</p>
<pre class="brush:php">
&lt;?= GridView::widget([
'dataProvider' =&gt; $dataProvider,
'filterModel' =&gt; $searchModel,
'columns' =&gt; [
['class' =&gt; 'yii\grid\SerialColumn'],

'code',
'name',
'quantity',
'remarks',

['class' =&gt; 'yii\grid\ActionColumn'],
],
]); ?&gt;
</pre>
<p>

</p>
<h2>Modifikasi Form Master Barang</h2>
<p>Yii sudah menyediakan validasi terhadap input yang kita berikan ke form ini. Validasi tersebut ada di dalam codeModel yang memastikan bahwa - misalkan - field Quantity harus diisikan dengan angka integer. Namun kita akan tambahkan sebuah link yang akan mengarahkan pengguna ke List Master Barang sebagai antisipasi jika kita memilih untuk membatalkan proses input data. Code yang kita tambahkan adalah,</p>
<pre class="brush:php">
&lt;?= Html::a(Yii::t('app', 'Back to List'), ['index'], ['class' =&gt; 'btn btn-warning']) ?&gt;
</pre>
<p>Menjadi seperti tampak pada source code di bawah ini.</p>
<pre class="brush:php">
&lt;?php $form = ActiveForm::begin(); ?&gt;

&lt;?= $form-&gt;field($model, 'code')-&gt;textInput(['maxlength' =&gt; true]) ?&gt;
&lt;?= $form-&gt;field($model, 'name')-&gt;textInput(['maxlength' =&gt; true]) ?&gt;
&lt;?= $form-&gt;field($model, 'quantity')-&gt;textInput() ?&gt;
&lt;?= $form-&gt;field($model, 'remarks')-&gt;textInput(['maxlength' =&gt; true]) ?&gt;

&lt;div class="form-group"&gt;
&lt;?= Html::submitButton($model-&gt;isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' =&gt; $model-&gt;isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?&gt;
&lt;?= Html::a(Yii::t('app', 'Back to List'), ['index'], ['class' =&gt; 'btn btn-warning']) ?&gt;
&lt;/div&gt;

&lt;?php ActiveForm::end(); ?&gt;
</pre>
<p>

</p>
<h2>Modifikasi View Master Barang</h2>
<p>Pada source code hasil auto-generate, Yii masih&nbsp;menapilkan field ID yang sebenarnya tidak kita perlukan, maka kita hapus saja dari code. Berikutnya kita tambahkan sebuah link yang akan mengarahkan pengguna ke List Master Barang memudahkan pengguna kembali ke halaman List Barang. Code yang kita tambahkan adalah,</p>
<pre class="brush:php">
&lt;?= Html::a(Yii::t('app', 'Back to List'), ['index'], ['class' =&gt; 'btn btn-warning']) ?&gt;
</pre>
<p>Menjadi seperti tampak pada source code di bawah ini.</p>
<pre class="brush:php">
&lt;p&gt;
&lt;?= Html::a(Yii::t('app', 'Update'), ['update', 'id' =&gt; $model-&gt;id], ['class' =&gt; 'btn btn-primary']) ?&gt;
&lt;?= Html::a(Yii::t('app', 'Delete'), ['delete', 'id' =&gt; $model-&gt;id], [
'class' =&gt; 'btn btn-danger',
'data' =&gt; [
'confirm' =&gt; Yii::t('app', 'Are you sure you want to delete this item?'),
'method' =&gt; 'post',
],
]) ?&gt;
&lt;?= Html::a(Yii::t('app', 'Back to List'), ['index'], ['class' =&gt; 'btn btn-warning']) ?&gt;
&lt;/p&gt;

&lt;?= DetailView::widget([
'model' =&gt; $model,
'attributes' =&gt; [
'code',
'name',
'quantity',
'remarks',
],
]) ?&gt;
</pre>
<p>

</p>
<h2>Penutup</h2>
<p>Demikianlah tutrial untuk membuat Master Barang dalam <a href="http://pojokprogrammer.net/content/aplikasi-persediaan-barang-sistem-in…">Aplikasi Inventory</a> ini. <strong>Semoga berguna!</strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2><img alt="" src="http://pojokprogrammer.net/sites/default/files/pictures/1900754_2755501…" style="width:100%" /></h2>