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

Aplikasi Persediaan Barang (Sistem Inventory) Menggunakan Yii2 - Transaksi Master Detail

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 ini merupakan lanjutan dari artikel ketiga yang membahas Pembuatan Form Master Barang. Artikel ini akan melanjutkan pembuatan form transaksi dengan desain master-detail menggunakan bantun extension dynamic-form, dan kita buat sederhana saja sehingga akan cukup mudah dipahami para programmer pemula.

Extension Tambahan

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.

composer require kartik-v/yii2-widget-datepicker "*"
composer require wbraganca/yii2-dynamicform "*"

Instalasi Extension

Generate CRUD Menggunakan Gii

Silakan generate CRUD untuk Table Transactions dan TransactionDetails dengan cara yang sama seperti saat membuat form master barang.

Generate CRUD Transactions

Generate CRUD TransactionDetails

Modifikasi List Transaksi Barang

Hasil generate CRUD dari Yii sangat membantu kita mempercepat proses pengerjaan aplikasi ini, namun masih perlu beberapa penyesuaian dari code standard Gii yang dihasilkan,

'columns' => [
    ['class' => 'yii\grid\SerialColumn'],
    'id',
    'trans_code',
    'trans_date',
    'type_id',
    'remarks',
    ['class' => 'yii\grid\ActionColumn'],
],

Kita dapat menghapus field id yang hanya field identity sehingga tidak penting untuk ditampilkan. Kita juga dapat mengubah field type_id menjadi type.name agar data yang ditampilkan adalah nama jenis transaksinya dan bukan angka id-nya sehingga hasilnya menjadi seperti di bawah ini

'columns' => [
    ['class' => 'yii\grid\SerialColumn'],
    'trans_code',
    'trans_date',
    'type.name',
    'remarks',
    ['class' => 'yii\grid\ActionColumn'],
],

GridView Transaksi

Hasilnya cukup user-friendly. Namun sayangnya dengan cara di atas, kita tidak bisa melakukan filter terhadap jenis transaksi. Oleh karena itu kita perlu melakukan perubahan agar filter terhadap jenis transaksi barang kita kita lakukan, filter menggunakan dropdown list. Pertama yang kita lakukan adalah mengambil data semua jenis transaksi yang ada di dalam database menggunakan code berikut,

$typeList = ArrayHelper::map(TransactionTypes::find()->asArray()->all(), 'id', 'name');

Kemudian ubah setting column type.name di GridView dengan menambahkan atribut setting filter dan value barupa Closure yang bentuknya spesifik untuk GridView, sehingga menjadi seperti di bawah ini

'columns' => [
    ['class' => 'yii\grid\SerialColumn'],
    'trans_code',
    'trans_date',
    [   'attribute' => 'type_id', 
        'filter' => $typeList, 
        'label' => 'Transaction Type', 
        'value' => function ($model, $index, $widget) { return $model->type->name; }
    ],
    'remarks',
    ['class' => 'yii\grid\ActionColumn'],
],

GridView Transaksi dengan Filter Dropdown

Modifikasi Form Transaksi Barang

Form input transaksi barang melibatkan dua buah table yaitu transactions dan transaction_details sehingga kita memerlukan extension dynamic-form untuk membuatnya. Instalasi dengan menggunakan perintah composer di bawah ini.

composer require wbraganca/yii2-dynamicform "*"

Yang perlu kita lakukan kemudian adalah

Membuat class Model untuk memudahkan kita membuat beberapa row TransactionDetails dalam satu baris code saja.
Modifikasi ActionCreate di TransactionController untuk proses pembuatan transaksi baru
Modifikasi ActionUpdate di TransactionController untuk proses pembuatan transaksi yang sudah ada di database
Modifikasi ActionDelete di TransactionController untuk proses penghapusan transaksi
Modifikasi form untuk Create dan Update.

Class Model

Class Model ini merupakan turunan dari class yii\base\Model namun kita menambahkan sebuah function createMultiple untuk memudahkan kita membuat beberapa row TransactionDetails berdasarkan isi dari variable POST menggunakan satu baris code saja.

Class Model

namespace app\models;

use Yii;
use yii\helpers\ArrayHelper;

class Model extends \yii\base\Model
{
    /**
     * Creates and populates a set of models.
     * @param string $modelClass
     * @param array $multipleModels
     * @return array
     */
    public static function createMultiple($modelClass, $multipleModels = [])
    {
        $model    = new $modelClass;
        $formName = $model->formName();
        $post     = Yii::$app->request->post($formName);
        $models   = [];

        if (! empty($multipleModels)) {
            $keys = array_keys(ArrayHelper::map($multipleModels, 'id', 'id'));
            $multipleModels = array_combine($keys, $multipleModels);
        }

        if ($post && is_array($post)) {
            foreach ($post as $i => $item) {
                if (isset($item['id']) && !empty($item['id']) && isset($multipleModels[$item['id']])) {
                    $models[] = $multipleModels[$item['id']];
                } else {
                    $models[] = new $modelClass;
                }
            }
        }

        unset($model, $formName, $post);
        return $models;
    }
}

Modifikasi ActionCreate

Saat melakukan proses penyimpanan data transaksi baru ke database, kita mengikuti algoritma berikut ini,

Load master record
Load semua detail records
Assign foreign key field di detail records
Validate master record
Validate detail record
Jika validasi berhasil
- Mulai transaksi database
- Simpan master record
- Simpan detail record satu-persatu
- Jika berhasil semua, commit
- Jika gagal rollback
- Tampilkan hasilnya

ActionCreate

/**
 * Creates a new Transactions model.
 * If creation is successful, the browser will be redirected to the 'view' page.
 * @return mixed
 */
public function actionCreate()
{
    $model = new Transactions();
    $details = [ new TransactionDetails ];

    // proses isi post variable 
    if ($model->load(Yii::$app->request->post())) {
        $details = Model::createMultiple(TransactionDetails::classname());
        Model::loadMultiple($details, Yii::$app->request->post());

        // assign default transaction_id
        foreach ($details as $detail) {
            $detail->trans_id = 0;
        }

        // ajax validation
        if (Yii::$app->request->isAjax) {
            Yii::$app->response->format = Response::FORMAT_JSON;
            return ArrayHelper::merge(
                ActiveForm::validateMultiple($details),
                ActiveForm::validate($model)
            );
        }

        // validate all models
        $valid1 = $model->validate();
        $valid2 = Model::validateMultiple($details);
        $valid = $valid1 && $valid2;

        // jika valid, mulai proses penyimpanan
        if ($valid) {
            // mulai database transaction
            $transaction = \Yii::$app->db->beginTransaction();
            try {
                // simpan master record                   
                if ($flag = $model->save(false)) {
                    // kemudian simpan detail records
                    foreach ($details as $detail) {
                        $detail->trans_id = $model->id;
                        if (! ($flag = $detail->save(false))) {
                            $transaction->rollBack();
                            break;
                        }
                    }
                }
                if ($flag) {
                    // sukses, commit database transaction
                    // kemudian tampilkan hasilnya
                    $transaction->commit();
                    return $this->redirect(['view', 'id' => $model->id]);
                } else {
                    return $this->render('create', [
                        'model' => $model,
                        'details' => $details,
                    ]);
                }
            } catch (Exception $e) {
                // penyimpanan galga, rollback database transaction
                $transaction->rollBack();
                throw $e;
            }
        } else {
            return $this->render('create', [
                'model' => $model,
                'details' => $details,
                'error' => 'valid1: '.print_r($valid1,true).' - valid2: '.print_r($valid2,true),
            ]);
        }

    } else {
        // inisialisai id 
        // diperlukan untuk form master-detail
        $model->id = 0;
        // render view
        return $this->render('create', [
            'model' => $model,
            'details' => $details,
        ]);
    }
}

Modifikasi ActionUpdate

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,

Load master record
Load semua detail records
Assign foreign key field di detail records
Validate master record
Validate detail record
Jika validasi berhasil
- Mulai transaksi database
- Simpan master record
- Delete semua detail record yang sudah ada di database
- Simpan detail record satu-persatu
- Jika berhasil semua, commit
- Jika gagal rollback
- Tampilkan hasilnya

ActionUpdate

/**
 * Updates an existing Transactions model.
 * If update is successful, the browser will be redirected to the 'view' page.
 * @param integer $id
 * @return mixed
 */
public function actionUpdate($id)
{
    $model = $this->findModel($id);
    $details = $model->transactionDetails;

    if ($model->load(Yii::$app->request->post())) {

        $oldIDs = ArrayHelper::map($details, 'id', 'id');
        $details = Model::createMultiple(TransactionDetails::classname(), $details);
        Model::loadMultiple($details, Yii::$app->request->post());
        $deletedIDs = array_diff($oldIDs, array_filter(ArrayHelper::map($details, 'id', 'id')));

        // assign default transaction_id
        foreach ($details as $detail) {
            $detail->trans_id = $model->id;
        }

        // ajax validation
        if (Yii::$app->request->isAjax) {
            Yii::$app->response->format = Response::FORMAT_JSON;
            return ArrayHelper::merge(
                ActiveForm::validateMultiple($details),
                ActiveForm::validate($model)
            );
        }

        // validate all models
        $valid1 = $model->validate();
        $valid2 = Model::validateMultiple($details);
        $valid = $valid1 && $valid2;

        // jika valid, mulai proses penyimpanan
        if ($valid) {
            // mulai database transaction
            $transaction = \Yii::$app->db->beginTransaction();
            try {
                // simpan master record                   
                if ($flag = $model->save(false)) {
                    // delete dahulu semua record yang ada
                    if (! empty($deletedIDs)) {
                        TransactionDetails::deleteAll(['id' => $deletedIDs]);
                    }
                    // kemudian, simpan details record
                    foreach ($details as $detail) {
                        $detail->trans_id = $model->id;
                        if (! ($flag = $detail->save(false))) {
                            $transaction->rollBack();
                            break;
                        }
                    }
                }
                if ($flag) {
                    // sukses, commit database transaction
                    // kemudian tampilkan hasilnya
                    $transaction->commit();
                    return $this->redirect(['view', 'id' => $model->id]);
                }
            } catch (Exception $e) {
                // penyimpanan galga, rollback database transaction
                $transaction->rollBack();
                throw $e;
            }
        } else {
            return $this->render('create', [
                'model' => $model,
                'details' => $details,
                'error' => 'valid1: '.print_r($valid1,true).' - valid2: '.print_r($valid2,true),
            ]);
        }
    }

    // render view
    return $this->render('update', [
        'model' => $model,
        'details' => (empty($details)) ? [new TransactionDetails] : $details
    ]);
}

Modifikasi ActionDelete

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

Mulai transaksi database
Delete semua detail record satu-persatu
Delete master record
Jika berhasil semua, commit
Jika gagal rollback
Tampilkan index transaksi barang

ActionDelete

/**
 * Deletes an existing Transactions model.
 * If deletion is successful, the browser will be redirected to the 'index' page.
 * @param integer $id
 * @return mixed
 */
public function actionDelete($id)
{
    $model = $this->findModel($id);
    $details = $model->transactionDetails;

    // mulai database transaction
    $transaction = \Yii::$app->db->beginTransaction();
    try {
        // pertama, delete semua detail records
        foreach ($details as $detail) {
            $detail->delete();
        }
        // kemudian, delete master record
        $model->delete();
        // sukses, commit transaction
        $transaction->commit();

    } catch (Exception $e) {
        // gagal, rollback database transaction
        $transaction->rollBack();
    }

    return $this->redirect(['index']);
}

Modifikasi create.php

Kita perlu menambahkan variable $details agar dapat dikenali di dalam _form.php

    <?= $this->render('_form', [
        'model' => $model,
        'details' => $details,
    ]) ?>

Modifikasi update.php

Kita juga perlu menambahkan variable $details agar dapat dikenali di dalam _form.php

    <?= $this->render('_form', [
        'model' => $model,
        'details' => $details,
    ]) ?>

Modifikasi _form.php

Code lengkapnya adalah seperti berikut ini

Code HTML form transaksi

<div class="transactions-form">

    <?php $form = ActiveForm::begin(['id' => 'transactions-form']); ?>

    <div class="row">
        <div class="col-sm-4 col-md-6">
            <?= $form->field($model, 'trans_code')->textInput(['maxlength' => true]) ?>
        </div>
        <div class="col-sm-4 col-md-3">
            <?php 
                echo '<label class="control-label" for="transactions-trans_date">Transaction Date</label>';
                echo DatePicker::widget([
                    'id' => 'transactions-trans_date',
                    'name' => 'Transactions[trans_date]',
                    'type' => DatePicker::TYPE_COMPONENT_APPEND,
                    'value' => date('Y-m-d'),
                    'pluginOptions' => [
                        'autoclose'=>true,
                        'format' => 'yyyy-mm-dd'
                    ]
                ]);
            ?>
        </div>
        <div class="col-sm-4 col-md-3">
            <?= $form->field($model, 'type_id')->dropDownList(
                ArrayHelper::map(TransactionTypes::find()->all(), 'id', 'name'),  
                ['prompt'=>'* Pilih Transaksis *']                          
            ); ?>
        </div>
        <div class="col-sm-12 col-md-12">
            <?= $form->field($model, 'remarks')->textInput(['maxlength' => true]) ?>
        </div>
    </div><!-- .row -->

    <div class="panel panel-default">
        <div class="panel-heading"><h4><i class="glyphicon glyphicon-th-list"></i> Transaction Details</h4></div>
        <div class="panel-body">
             <?php DynamicFormWidget::begin([
                'widgetContainer' => 'dynamicform_wrapper',  // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
                'widgetBody' => '.container-items',          // required: css class selector
                'widgetItem' => '.item',                     // required: css class
                'limit' => 999,                                // the maximum times, an element can be cloned (default 999)
                'min' => 1,                                  // 0 or 1 (default 1)
                'insertButton' => '.add-item',               // css class
                'deleteButton' => '.remove-item',            // css class
                'model' => $details[0],
                'formId' => 'transactions-form',
                'formFields' => [
                    'trans_id',
                    'item_id',
                    'quantity',
                    'remarks',
                ],
            ]); ?>

            <div class="container-items"><!-- widgetContainer -->
            <?php foreach ($details as $i => $detail): ?>
                <div class="item row">
                    <?php
                        // necessary for update action.
                        if (! $detail->isNewRecord) {
                            echo Html::activeHiddenInput($detail, "[{$i}]id");
                        }
                    ?>
                    <div class="col-sm-8 col-md-4">
                        <?= $form->field($detail, "[{$i}]item_id")->dropDownList(
                            ArrayHelper::map(Items::find()->all(), 'id', 'name'),  // Flat array ('id'=>'label')
                            ['prompt'=>'* Pilih Barang *']                          // options
                        ); ?>
                    </div>
                    <div class="col-sm-4 col-md-2">
                        <?= $form->field($detail, "[{$i}]quantity")->textInput(['maxlength' => true]) ?>
                    </div>
                    <div class="col-sm-10 col-md-5">
                        <?= $form->field($detail, "[{$i}]remarks")->textInput(['maxlength' => true]) ?>
                    </div>
                    <div class="col-sm-2 col-md-1 item-action">
                        <div class="pull-right">
                            <button type="button" class="add-item btn btn-success btn-xs">
                                <i class="glyphicon glyphicon-plus"></i></button> 
                            <button type="button" class="remove-item btn btn-danger btn-xs">
                                <i class="glyphicon glyphicon-minus"></i></button>
                        </div>
                    </div>
                </div><!-- .row -->

            <?php endforeach; ?>
            </div>

            <?php DynamicFormWidget::end(); ?>
        </div>
    </div>


    <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']) ?>
    </div>

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

</div>

Form Transaksi Barang

Membuat View Transaksi Barang

Untuk menampilkan data master-detail, maka kita harus record master dan semua record detail yang berelasi, sehingga kita perlu mengubah ActionView menjadi seperti ini

Code ActionView

/**
 * Displays a single Transactions model.
 * @param integer $id
 * @return mixed
 */
public function actionView($id)
{
    return $this->render('view', [
        'model' => $this->findModel($id),
        'details' => $this->findDetails($id),
    ]);
}

/**
 * Finds the Transactions model based on its primary key value.
 * If the model is not found, a 404 HTTP exception will be thrown.
 * @param integer $id
 * @return Transactions the loaded model
 * @throws NotFoundHttpException if the model cannot be found
 */
protected function findModel($id)
{
    if (($model = Transactions::findOne($id)) !== null) {
        return $model;
    } else {
        throw new NotFoundHttpException('The requested page does not exist.');
    }
}

/**
 * Finds the TransactionDetails model based on its foreign key value.
 * @param integer $id
 * @return data provider TransactionDetails for GridView 
 */
protected function findDetails($id)
{
    $detailModel = new TransactionDetailsSearch();
    return $detailModel->search(['TransactionDetailsSearch'=>['trans_id'=>$id]]);
}

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.

HTML Code View Transaksi

<?= DetailView::widget([
    'model' => $model,
    'attributes' => [
        'trans_code',
        [
            'attribute' => 'trans_date',
            'format' => [ 'date', 'php: d-M-Y' ],
            'labelColOptions' => [ 'style'=>'width:30%; text-align:right;' ]
        ],
        'type.name',
        'remarks',
    ],
]) ?>

<div class="item panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title pull-left"><i class="glyphicon glyphicon-barcode"></i> Transaction Line Item</h3>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">
        <?= GridView::widget([
            'dataProvider' => $details,
            'columns' => [
                ['class' => 'yii\grid\SerialColumn'],

                [
                    'attribute' => 'item_id',
                    'value' => 'item.code',
                    'header' => 'Item Code',
                ],
                [
                    'attribute' => 'item_id',
                    'value' => 'item.name',
                    'header' => 'Item Name',
                ],
                'quantity',
                'remarks',
            ],
        ]); ?>
    </div>
</div>

Penampakan View Transaksi Barang

Sistem Inventory atau Aplikasi Persediaan Barang Menggunakan Yii Yii2 PHP View Transaction

Simpulan

Mudah-mudahan tutorial ini dapat membantu teman-teman yang sedang belajar membuat aplikasi inventory, khususnya yang menggunakan Yii Framework. Source code aplikasi ini dapat dilihat di GitHub, silakan digunakan untuk keperluan pembelajaran saja.

Tag

question

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

Link permanen

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

Silakan Download Source code nya

nurhidayat Kam, 05/11/2017 - 10:24

Link permanen

Silakan download source code dan cek di folder models ada file yang namanya Model.php yang dipakai untuk penyimpanan data master-details

Log in to post comments
7969 kali dilihat