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

Code Factory | Sistem Inventory atau Aplikasi Persediaan Barang adalah salah satu aplikasi yang umum dan cukup menantang terutama bagi para programmer pemula yang sedang mengasah skill programming-nya. Artikel kali ini akan membahas pengembangan CRUD untuk master data barang (items) setelah sebelumnya kita membahas persiapan database yang akan kita gunakan dalam Aplikasi Inventory ini. Kita akan memanfaatkan Gii Code Generator untuk mempercepat proses pengembangannya. Aplikasi yang akan kita bangun sederhana saja sehingga akan cukup mudah dipahami para programmer pemula.

Code Factory | Sistem Inventory atau Aplikasi Persediaan Barang adalah salah satu aplikasi yang umum dan cukup menantang terutama bagi para programmer pemula yang sedang mengasah skill programming-nya. Artikel kali ini akan membahas pengembangan CRUD untuk master data barang (items) setelah sebelumnya kita membahas persiapan database yang akan kita gunakan dalam Aplikasi Inventory ini. Kita akan memanfaatkan Gii Code Generator untuk mempercepat proses pengembangannya. Aplikasi yang akan kita bangun sederhana saja sehingga akan cukup mudah dipahami para programmer pemula.

Generate CRUD Menggunakan Gii

Yii menyediakan extension Gii untuk memudahkan kita men-generate 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. Gii bisa diakses melalui URL

http://localhost/path/to/index.php?r=gii

Atau jika kamu sudah menggunakan fitur pretty URL, maka Gii dapat diakses di

http://localhost/path/to/index.php/gii

Berikutnya yang perlu kita lakukan adalah men-generate form CRUD untuk master barang dengan base table items. Pilihlah option CRUD Generator yang disediakan oleh Gii, dan kemudian isikan form di bawah seperti tampak pada screenshot di bawah ini.

[collapsed title=Generate CRUD][/collapsed]

Yang perlu diperhatikan pada saat mengisi form CRUD Generator ini antara lain

• Perhatikan bahwa separator untuk namespace dan class menggunakan tanda garis miring terbalik (backslash) sedangkan separator folder untuk Views Path menggunakan garis miring biasa (slash) karena textbox Views Path berisikan folder lokasi views akan disimpan.
• Nama Model Class harus lengkap, meliputi namespace dan nama class model bersangkutan, dalam hal ini adalah app\models\Items. Untuk mengetahui namespace dan nama class caranya cukup dengan membuka file code model bersangkutan saja, di file tersebut sudah tersedia namespace dan nama class-nya.
• Nama model untuk Search Model Class cukup kita salin saja dari Model Class dan kemudian kita tambahkan “Search” dibelakangnya. Dalam hal ini adalah app\models\ItemsSearch.
  • Nama Controller Class kita ikuti konvensi yang digunakan oleh Yii2 yaitu menggunakan akhiran “Controller” di akhir nama class. Namespace yang dipakai adalah app\controllers, sehingga field ini kita isikan dengan app\controllers\ItemController. Perhatikan bahwa kita hanya menggunakan Item saja tanpa akhiran plural “s”
• Kemudian isikan Views Path dengan @app/views/item karena kita ingin menyimpan berkas-berkas views ini di dalam folder views/item. Perhatikan bahwa kita menggunakan garis miring biasa (slash) untuk memisahkan nama folder.
• Silakan beri centang pada option “Enable l18n” dan “Enable Pjax” jika diinginkan.
• Biarkan field lainnya sesuai default.

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.

[collapsed title=Generate CRUD][/collapsed]

Kemudian tekan tombol generate untuk memastikan Gii membuat kita memastikan semuanya sesuai keinginkan kita.

 

Modifikasi List Master Barang

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

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

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

            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>

[collapsed title=Penampakan][/collapsed]

Modifikasi Form Master Barang

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,

    <?= Html::a(Yii::t('app', 'Back to List'), ['index'], ['class' => 'btn btn-warning']) ?>

Menjadi seperti tampak pada source code di bawah ini.

    <?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'code')->textInput(['maxlength' => true]) ?>
    <?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>
    <?= $form->field($model, 'quantity')->textInput() ?>
    <?= $form->field($model, 'remarks')->textInput(['maxlength' => true]) ?>

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

    <?php ActiveForm::end(); ?>

[collapsed title=Penampakan][/collapsed]

Modifikasi View Master Barang

Pada source code hasil auto-generate, Yii masih 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,

    <?= Html::a(Yii::t('app', 'Back to List'), ['index'], ['class' => 'btn btn-warning']) ?>

Menjadi seperti tampak pada source code di bawah ini.

    <p>
        <?= Html::a(Yii::t('app', 'Update'), ['update', 'id' => $model->id], ['class' => 'btn btn-primary']) ?>
        <?= Html::a(Yii::t('app', 'Delete'), ['delete', 'id' => $model->id], [
            'class' => 'btn btn-danger',
            'data' => [
                'confirm' => Yii::t('app', 'Are you sure you want to delete this item?'),
                'method' => 'post',
            ],
        ]) ?>
        <?= Html::a(Yii::t('app', 'Back to List'), ['index'], ['class' => 'btn btn-warning']) ?>
    </p>

    <?= DetailView::widget([
        'model' => $model,
        'attributes' => [
            'code',
            'name',
            'quantity',
            'remarks',
        ],
    ]) ?>

[collapsed title=Penampakan][/collapsed]

Penutup

Demikianlah tutrial untuk membuat Master Barang dalam Aplikasi Inventory ini. Semoga berguna!