Tutorial Yii2 Bagian 31 : Submit Form Menggunakan Ajax

Posted on November 6, 2017November 6, 2017 by admin

Kita akan coba untuk melakukan submit form dengan Ajax. 1. Modifikasi _form.php milik view branches dengan menambahkan kode jQuery di bagian bawah :

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use backend\models\Companies;
use kartik\select2\Select2;

/* @var $this yii\web\View */
/* @var $model backend\models\Branches */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="branches-form">

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

    <?= $form->field($model, 'companies_company_id')->widget(Select2::classname(), [
        'data' => ArrayHelper::map(Companies::find()->all(),'company_id','company_name'),
        'language' => 'en',
        'options' => ['placeholder' => 'Pilih Company'],
        'pluginOptions' => [
            'allowClear' => true
        ],
    ]);

    ?>

    <?= $form->field($model, 'branch_name')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'branch_address')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'branch_status')->dropDownList([ 'active' => 'Active', 'inactive' => 'Inactive', ], ['prompt' => 'Status']) ?>


    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

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

</div>
<?php 
$script = <<< JS 
$('form#{$model->formName()}')on('beforeSubmit',function(e)
{
    var \$form = $(this);
    $.post(
        \$form.attr("action"), //serialize Yii2 form 
        \$form.serialize()
    )
        .done(function(result){
            if(result == 1)
            {
                $(\$form).trigger("reset");
                $.pjax.reload({container:'#branchesGrid'});
            }else
            {
                $("#message").html(result);
            }
        }).fail(function(){
            console.log("server error");
        });
    return false;
});

JS;
$this->registerJs($script);

<?php

use yii\helpers\Html;

use yii\widgets\ActiveForm;

use yii\helpers\ArrayHelper;

use backend\models\Companies;

use kartik\select2\Select2;

/* @var $this yii\web\View */

/* @var $model backend\models\Branches */

/* @var $form yii\widgets\ActiveForm */

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

<?= $form->field($model, 'companies_company_id')->widget(Select2::classname(), [

'data' => ArrayHelper::map(Companies::find()->all(),'company_id','company_name'),

'language' => 'en',

'options' => ['placeholder' => 'Pilih Company'],

'pluginOptions' => [

'allowClear' => true

]);

<?= $form->field($model, 'branch_name')->textInput(['maxlength' => true]) ?>

<?= $form->field($model, 'branch_address')->textInput(['maxlength' => true]) ?>

<?= $form->field($model, 'branch_status')->dropDownList([ 'active' => 'Active', 'inactive' => 'Inactive', ], ['prompt' => 'Status']) ?>

<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>

</div>

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

</div>

<?php

$script = <<< JS

$('form#{$model->formName()}')on('beforeSubmit',function(e)

{

var \$form = $(this);

$.post(

\$form.attr("action"), //serialize Yii2 form

\$form.serialize()

)

.done(function(result){

if(result == 1)

{

$(\$form).trigger("reset");

$.pjax.reload({container:'#branchesGrid'});

}else

{

$("#message").html(result);

}

}).fail(function(){

console.log("server error");

});

return false;

});

JS;

$this->registerJs($script);

2. Modifikasi. index.php

<?php

use yii\helpers\Html;
use yii\grid\GridView;
use yii\bootstrap\Modal;
use yii\helpers\Url;
use yii\widgets\Pjax;

/* @var $this yii\web\View */
/* @var $searchModel backend\models\BranchesSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = 'Branches';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="branches-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
        <?= Html::button('Create Branches', ['value'=>Url::to('index.php?r=branches/create'),'class' => 'btn btn-success','id'=>'modalButton']) ?>
    </p>

    <?php 
        Modal::begin([
                'header'=>'<h4>Branches</h4>',
                'id'=>'modal',
                'size'=>'modal-lg',
            ]);
        echo "<div id='modalContent'></div>";
        Modal::end();
    ?>

    <?php Pjax::begin(['id'=>'branchesGrid']); ?>

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'rowOptions' => function($model){
                    if($model->branch_status == 'active'){
                        return ['class'=>'success'];
                    }else{
                        return ['class'=>'danger'];
                    }

                    },
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            [
                'attribute'=>'companies_company_id',
                'value'=>'companiesCompany.company_name',
            ],
            //'branch_id',
            'branch_name',
            'branch_address',
            'branch_created_date',
            'branch_status',
            

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

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

</div>

<?php

use yii\helpers\Html;

use yii\grid\GridView;

use yii\bootstrap\Modal;

use yii\helpers\Url;

use yii\widgets\Pjax;

/* @var $this yii\web\View */

/* @var $searchModel backend\models\BranchesSearch */

/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = 'Branches';

$this->params['breadcrumbs'][] = $this->title;

<h1><?= Html::encode($this->title) ?></h1>

<?php // echo $this->render('_search', ['model' => $searchModel]); ?>

<p>

<?= Html::button('Create Branches', ['value'=>Url::to('index.php?r=branches/create'),'class' => 'btn btn-success','id'=>'modalButton']) ?>

</p>

<?php

Modal::begin([

'header'=>'<h4>Branches</h4>',

'id'=>'modal',

'size'=>'modal-lg',

]);

echo "<div id='modalContent'></div>";

Modal::end();

<?php Pjax::begin(['id'=>'branchesGrid']); ?>

<?= GridView::widget([

'dataProvider' => $dataProvider,

'filterModel' => $searchModel,

'rowOptions' => function($model){

if($model->branch_status == 'active'){

return ['class'=>'success'];

}else{

return ['class'=>'danger'];

}

'columns' => [

['class' => 'yii\grid\SerialColumn'],

[

'attribute'=>'companies_company_id',

'value'=>'companiesCompany.company_name',

//'branch_id',

'branch_name',

'branch_address',

'branch_created_date',

'branch_status',

['class' => 'yii\grid\ActionColumn'],

]); ?>

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

</div>

3. Modifikasi actionCreate pada BranchesController.php

public function actionCreate()
    {
        if(Yii::$app->user->can('tambah-branch'))
        {
            $model = new Branches();

            if ($model->load(Yii::$app->request->post())) {
                $model->branch_created_date = date('Y-m-d h:m:s');
                if($model->save())
                {
                    echo 1;
                }else
                {
                    echo 0;
                }
            } else {
                return $this->renderAjax('create', [
                    'model' => $model,
                ]);
            }
        }else
        {
            throw new ForbiddenHttpException; 
        }
    }

public function actionCreate()

{

if(Yii::$app->user->can('tambah-branch'))

{

$model = new Branches();

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

$model->branch_created_date = date('Y-m-d h:m:s');

if($model->save())

{

echo 1;

}else

{

echo 0;

}

} else {

return $this->renderAjax('create', [

'model' => $model,

]);

}

}else

{

throw new ForbiddenHttpException;

}

Tutorial ini sebagai dokumentasi dan pembelajaran pribadi sekalian belajar terjemahin bahasa Inggris, dan siapa tahu bermanfaat buat orang lain. Sumber lengkapnya Read more about Tutorial Yii2 Bagian 31 : Submit Form Menggunakan Ajax[…]

Tutorial JQuery 9 : CSS Selector

Posted on November 5, 2017 by admin

Beberapa contoh CSS Selector yang lain : $(“div.smart > p”) : Akan mentarget paragraf yang merupakan direct descendant dari div yang memiliki class “smart”. $(“div ~ p”) : Menargetkan semua paragraf yang setara, bukan child atau parent element. $(“ul#steps + div”) : Menargetkan semua ul dengan id steps yang paling dekat (Immediate adjacent siblings). $(“[class !=’imp’]”) : Menargetkan class Read more about Tutorial JQuery 9 : CSS Selector[…]

Tutorial Yii2 Bagian 30 : Memanfaatkan Kartik Gridview Widget

Posted on November 3, 2017November 3, 2017 by admin

Sekarang kita akan memanfaatkan widget dari kartik yaitu gridview widget untuk menampilkan purchase order. 1. Install kartik gridview widget dari website http://demos.krajee.com/grid di folder advanced :

sudo composer require kartik-v/yii2-grid "@dev"

1	sudo composer require kartik-v/yii2-grid "@dev"

2. Modifikasi index.php milik purchaseorder yang berada di folder backends\views\purchaseorder :

use kartik\grid\GridView;

1	use kartik\grid\GridView;

Sehingga file index.php menjadi seperti ini :

<?php

use yii\helpers\Html;
use kartik\grid\GridView;

/* @var $this yii\web\View */
/* @var $searchModel backend\models\PurchaseOrderSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Purchase Orders');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="purchase-order-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
        <?= Html::a(Yii::t('app', 'Create Purchase Order'), ['create'], ['class' => 'btn btn-success']) ?>
    </p>

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            [
                'class'=>'kartik\grid\ExpandRowColumn',
                'value'=> function ($model, $key, $index, $column){
                    return GridView::ROW_COLLAPSED;
                },
                'detail' => function ($model,$key,$index,$column){
                    $searchModel = new PurchaseOrderItemSearch();
                    $searchModel->po_id = $model->id;
                    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

                    return Yii::$app->controller->renderPartial('_poitems',[
                            'searchModel' => $searchModel,
                            'dataProvider'=> $dataProvider,
                        ]);
                },
            ],
            'po_no',
            'description:ntext',

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

</div>

<?php

use yii\helpers\Html;

use kartik\grid\GridView;

/* @var $this yii\web\View */

/* @var $searchModel backend\models\PurchaseOrderSearch */

/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Purchase Orders');

$this->params['breadcrumbs'][] = $this->title;

<h1><?= Html::encode($this->title) ?></h1>

<?php // echo $this->render('_search', ['model' => $searchModel]); ?>

<p>

<?= Html::a(Yii::t('app', 'Create Purchase Order'), ['create'], ['class' => 'btn btn-success']) ?>

</p>

<?= GridView::widget([

'dataProvider' => $dataProvider,

'filterModel' => $searchModel,

'columns' => [

[

'class'=>'kartik\grid\ExpandRowColumn',

'value'=> function ($model, $key, $index, $column){

return GridView::ROW_COLLAPSED;

'detail' => function ($model,$key,$index,$column){

$searchModel = new PurchaseOrderItemSearch();

$searchModel->po_id = $model->id;

$dataProvider = $searchModel->search(Yii::$app->request->queryParams);

return Yii::$app->controller->renderPartial('_poitems',[

'searchModel' => $searchModel,

'dataProvider'=> $dataProvider,

]);

'po_no',

'description:ntext',

['class' => 'yii\grid\ActionColumn'],

]); ?>

</div>

3. Buat file php partial di folder view Read more about Tutorial Yii2 Bagian 30 : Memanfaatkan Kartik Gridview Widget[…]

Tutorial Yii2 Bagian 29 : Membuat Form dengan Dynamic Form (2)

Posted on November 3, 2017November 3, 2017 by admin

Di bagian sebelumnya kita telah berhasil memodifikasi form create untuk menambahkan purchase order. Perlu dicatat bahwa formId pada property DynamicFormWidget harus sesuai dengan id pada ActiveForm, begitu juga insertButton dan deleteButton juga harus ditambahkan classnya pada form. Di bagian ini kita akan melakukan saving record ke dalam database. 1. Buat model class, copy paste saja Read more about Tutorial Yii2 Bagian 29 : Membuat Form dengan Dynamic Form (2)[…]

Tutorial Yii2 Bagian 28 : Membuat Form dengan Dynamic Form (1)

Posted on November 3, 2017November 3, 2017 by admin

Contoh aplikasi seperti invoice atau nota pembelian terkadang membutuhkan form yang kompleks. Disini kita akan coba membuat dynamic form dengan bantuan Yii2 extension yaitu dynamicform. 1. Install yii2-dynamicform extension dari https://github.com/wbraganca/yii2-dynamicform dengan ketikkan perintah berikut di directory advanced :

sudo composer require --prefer-dist wbraganca/yii2-dynamicform "*"

1	sudo composer require --prefer-dist wbraganca/yii2-dynamicform "*"

2. Buat tabel purchase_order dengan tiga field sbb : 3. Buat tabel purchase_order_item : Read more about Tutorial Yii2 Bagian 28 : Membuat Form dengan Dynamic Form (1)[…]

indocoder.com

Month: November 2017

Tutorial Yii2 Bagian 31 : Submit Form Menggunakan Ajax

Tutorial JQuery 9 : CSS Selector

Tutorial Yii2 Bagian 30 : Memanfaatkan Kartik Gridview Widget

Tutorial Yii2 Bagian 29 : Membuat Form dengan Dynamic Form (2)

Tutorial Yii2 Bagian 28 : Membuat Form dengan Dynamic Form (1)