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 </span><span style="color:rgb(255, 0, 0)">Factory</span></strong></a><span style="color:rgb(255, 0, 0)"> </span>| <strong>Sistem Inventory </strong>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 <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 <strong>sederhana </strong>saja sehingga akan cukup mudah dipahami para programmer pemula.</p>

<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>

Instalasi Extension

</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>

Generate CRUD Transactions

Generate CRUD TransactionDetails

</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' => [
['class' => 'yii\grid\SerialColumn'],
'id',
'trans_code',
'trans_date',
'type_id',
'remarks',
['class' => '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' => [
['class' => 'yii\grid\SerialColumn'],
'trans_code',
'trans_date',
'type.name',
'remarks',
['class' => 'yii\grid\ActionColumn'],
],
</pre>
<p>

GridView Transaksi

</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()->asArray()->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 menjadi seperti di bawah ini</p>
<pre class="brush:php">
'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'],
],
</pre>
<p>

GridView Transaksi dengan Filter Dropdown

</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 <span style="font-family:courier new,courier,monospace">ActionDelete </span>di <span style="font-family:courier new,courier,monospace">TransactionController </span>untuk proses penghapusan 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 <span style="font-family:courier new,courier,monospace">TransactionDetails</span> berdasarkan isi dari variable POST<span style="font-family:courier new,courier,monospace"> </span>menggunakan satu baris code saja. </p>

Class Model

<pre class="brush:php">
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;
}

}
</pre>

<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>

ActionCreate

<pre class="brush:php;">
/**

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,
]);
}
}
</pre>

<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>

ActionUpdate

<pre class="brush:php">
/**

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;
}

// 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
]);
}
</pre>

<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>

ActionDelete

<pre class="brush:php;">
/**

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']);
}
</pre>

<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"> <?= $this->render('_form', [
'model' => $model,
'details' => $details,
]) ?></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"> <?= $this->render('_form', [
'model' => $model,
'details' => $details,
]) ?></pre>
<h3>Modifikasi <span style="font-family:courier new,courier,monospace">_form.php</span></h3>
<p>Code lengkapnya adalah seperti berikut ini</p>

Code HTML form transaksi

<pre class="brush:php;">
<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>

<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">
<?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>

<?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>
</pre>

<p>

Form Transaksi Barang

</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>

Code ActionView

<pre class="brush:php;">
/**

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]]);
}</pre>

<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>

HTML Code View Transaksi

<pre class="brush:php;">
<?= 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>
</pre>

<p>

Penampakan View Transaksi Barang

</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> silakan digunakan untuk keperluan pembelajaran saja.</p>
<p>.</p>
<p> </p>

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
8030 kali dilihat