Yii Framework Forum

Yii2 - Export (PDF, EXCEL, CSV) Data Filtered yang Ditampilkan GridView


(Mamanh) #1

Ada cara mudah yaitu menggunakan Kartik Gridview. File export yang bisa dipilih cukup lengkap: PDF, EXCEL, HTML, atau CSV.

Sebetulnya temen-temen bisa lihat langsung ke http://demos.krajee.com/grid, tapi karena disana sangat lengkap dan pakai bahasa Inggris mungkin sulit memahaminya sehingga membuat jadi malas untuk coba.

Kali ini sya mau coba menjelaskan bagaimana penggunaan extension kartik/grid secara sederhana. Contoh implementasi bisa dilihat di http://seacf.org/certificates/index1.

  1. Install kartik grid dg
    prompt> composer require kartik-v/yii2-grid “dev-master”
    atau tambahkan baris “kartik-v/yii2-grid”: “dev-master” di file composer.json lalu lakukan prompt> composer update.

  2. Ubah config nya yaitu dg menambahkan:
    untuk yii advanced, yaitu file frontend/config/main-local.php


    $config['bootstrap'][] = 'debug';
    ....
    $config['modules']['gridview'] = [
      'class' => '\kartik\grid\Module'
    ];
    ...
untuk yii basic, yaitu file config/web.php
    [config] = [
    'id' = 'basic',
      ...
      'modules' => [
          'gridview' =>  [
              'class' => '\kartik\grid\Module'
           ]
        ],
      ...
     ];
  1. Buka file index.php salah satu view kita, pada contoh adalah certificates/index.php. Ganti isi file dengan kode berikut. Tentunya field yang akan ditampilkan harus disesuaikan dengan field yg ada di model punya temen2… Pada kasus ini ada 5 field yg ditampilkan.
<?php

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

/* @var $this yii\web\View */
/* @var $searchModel frontend\models\search\CertificatesSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = 'Issued Certificates';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="certificates-index">

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

    <?php  echo Collapse::widget([
       'items' => [
            // equivalent to the above
            [
                'label' => 'Search',
                'content' => $this->render('_search', ['model' => $searchModel]) ,
            ],
       ]
    ]);
    ?>

    <?php $gridColumns = [
        ['class' => 'kartik\grid\SerialColumn',
        'width'=>'5%'
        ],
        [
            'attribute' => 'nocertificate', //nama field-1
            'vAlign' => 'middle',
            'width' => '5%',
        ],

        ['attribute'=> 'courses.standards.title', //nama field-2
          'format'=>'raw',
          'label'=> "Title",
          'width' => '10%'
        ],

        [
          'attribute' => 'name', //nama field-3
          'label' => 'Name',
          'format' => 'raw',
          'value' => function ($model) {
               return Html::a($model->name,['/certificates/view/', 'id'=>$model->id] ); //'http://dev1.seacf.org/backend/web/index.php?r=certificates/view&id='.$model->id
          },
        ],
        [
            'attribute' => 'sex', //nama field-4
            'vAlign' => 'middle',
            'width' => '5%',
        ],
        [
            'attribute' => 'nationality', //nama field-5
            'vAlign' => 'middle',
            'width' => '5%',
        ],

    ];

    echo GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => $gridColumns,
        'containerOptions' => ['style' => 'overflow: auto'], 
        'headerRowOptions' => ['class' => 'kartik-sheet-style'],
        'filterRowOptions' => ['class' => 'kartik-sheet-style'],
        'summary'=>'',
        'containerOptions' => ['style'=>'overflow: auto'], 
        'beforeHeader'=>[
            [
                'columns'=>[
                    ['content'=> $this->title, 'options'=>['colspan'=>12, 'class'=>'text-center warning']], //cuma satu kolom header
            //        ['content'=>'', 'options'=>['colspan'=>0, 'class'=>'text-center warning']], //uncomment kalau mau membuat header kolom-2
              //      ['content'=>'', 'options'=>['colspan'=>0, 'class'=>'text-center warning']],
                ], //uncomment kalau mau membuat header kolom-3
                'options'=>['class'=>'skip-export'] 
            ]
        ],
        'exportConfig' => [
              GridView::PDF => ['label' => 'Save as PDF'],
              GridView::EXCEL => ['label' => 'Save as EXCEL'], //untuk menghidupkan button export ke Excell
              GridView::HTML => ['label' => 'Save as HTML'], //untuk menghidupkan button export ke HTML
              GridView::CSV => ['label' => 'Save as CSV'], //untuk menghidupkan button export ke CVS
          ],
          
        'toolbar' =>  [
            '{export}', 
          //  '{toggleData}' //uncoment untuk menghidupkan button menampilkan semua data..
        ],
        'pjax' => true,
        'bordered' => true,
        'striped' => true,
        'condensed' => false,
        'responsive' => false,
        'hover' => true,
        'floatHeader' => true,
        'showPageSummary' => true, //true untuk menjumlahkan nilai di suatu kolom, kebetulan pada contoh tidak ada angka.
        'panel' => [
            'type' => GridView::TYPE_PRIMARY
        ],

    ]);
     ?>
</div>
  1. Waktunya coba. Pada search box di atas Gender (pada halaman contoh diatas), ketik Female dan pada search box Nationality ketik Indonesia, maka akan tampil hanya daftar pemegang sertifikat yang berjenis kelamin Female dan warganegara Indonesia. Lalu klik tombol “Save as PDF” di bagian kanan atas, maka hanya data terpilih saja yang akan diexport menjadi laporan PDF.
  2. That’s it. Semoga sukses ya…