Tutorial Yii2 Bagian 37 : Layout

Posted on November 28, 2017 by admin

Kali ini kita akan membedakan layout pada login page. 1. Buat layout untuk login. Tempat untuk mengatur layout terdapat di folder views/layouts. Jika kita ingin menambahkan layout baru, buatlah di dalam folder ini. Buat file baru loginLayout.php . Layout dibuat sama dengan main.php, hanya saja navbar dan breadcrumbs dihapus :

<?php

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

use backend\assets\AppAsset;
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use common\widgets\Alert;

AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>

<div class="wrap">
    <div class="container">
        <?= $content ?>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <p class="pull-left">&copy; My Company <?= date('Y') ?></p>

        <p class="pull-right"><?= Yii::powered() ?></p>
    </div>
</footer>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

<?php

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

/* @var $content string */

use backend\assets\AppAsset;

use yii\helpers\Html;

use yii\bootstrap\Nav;

use yii\bootstrap\NavBar;

use yii\widgets\Breadcrumbs;

use common\widgets\Alert;

AppAsset::register($this);

<?php $this->beginPage() ?>

<!DOCTYPE html>

<html lang="<?= Yii::$app->language ?>">

<head>

<?= Html::csrfMetaTags() ?>

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

<?php $this->head() ?>

</head>

<body>

<?php $this->beginBody() ?>

<?= $content ?>

</div>

<p class="pull-left">© My Company <?= date('Y') ?></p>

</div>

</footer>

<?php $this->endBody() ?>

</body>

</html>

<?php $this->endPage() ?>

2. Modifikasi SiteController.php pada actionLogin, tambahkan

$this->layout = 'loginLayout';

1	$this->layout = 'loginLayout';

Sehingga tampilan halaman Read more about Tutorial Yii2 Bagian 37 : Layout[…]

Tutorial Yii2 Bagian 34: Full Calendar (2)

Posted on November 23, 2017 by admin

Tutorial ini adalah lanjutan dari Bagian 33 sebelumnya. Kita akan menambahkan kode javascript sehingga saat kita mengklik tanggal, akan bisa langsung menambahkan event di tanggal tersebut. Oh ya, kalau mau lihat dokumentasi fullcalendar ada di http://fullcalendar.io/docs. 1. Modifikasi index.php dengan menambahkan pop-up.

<?php

use yii\helpers\Html;
use yii\grid\GridView;
use yii\bootstrap\Modal;
/* @var $this yii\web\View */
/* @var $searchModel common\models\EventSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

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

    <?php
        Modal::begin([
            'header' => '<h4>Event</h4>',
            'id' => 'modal',
            'size' => 'modal-lg',
        ]);

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

        Modal::end(); 
    ?>


    <?= \yii2fullcalendar\yii2fullcalendar::widget(array(
          'events'=> $events,
      ));?>
</div>

<?php

use yii\helpers\Html;

use yii\grid\GridView;

use yii\bootstrap\Modal;

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

/* @var $searchModel common\models\EventSearch */

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

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

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

<?php

Modal::begin([

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

'id' => 'modal',

'size' => 'modal-lg',

]);

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

Modal::end();

<?= \yii2fullcalendar\yii2fullcalendar::widget(array(

'events'=> $events,

));?>

</div>

2. Buat main.js di frontend/web/js dan tambahkan dulu di AppAsset.

$(function(){

	$(document).on('click','.fc-day',function(){
		var date = $(this).attr('data-date');

		$.get('index.php?r=event/create',{'date':date},function(data){
			$('#modal').modal('show')
				.find('#modalContent')
				.html(data);
		});
	});

});

$(function(){

$(document).on('click','.fc-day',function(){

var date = $(this).attr('data-date');

$.get('index.php?r=event/create',{'date':date},function(data){

$('#modal').modal('show')

.find('#modalContent')

.html(data);

});

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

Tag: tutorial yii2

Tutorial Yii2 Bagian 37 : Layout

Tutorial Yii2 Bagian 34: Full Calendar (2)

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)