Menampilkan repo github pada gridview Yii2 dengan ArrayDataProvider

Untuk dapat menampilkan data dengan widget Gridview dibutuhkan sebuah Data Provider, ada tiga jenis Data Provider yang disediakan secara default oleh Yii2, namun kamu bisa juga membuat data provider sendiri dengan menambahkan extends yii\data\BaseDataProvider terhadap class yang kamu buat.

berikut data provider yang disediakan oleh secara default oleh Yii2.

Pada tutorial ini kita akan membahas masalah ArrayDataProvider dan menerapkannya pada Gridview untuk menampilkan daftar repo yang ada pada github. Pada tutorial ini membutuhkan Extension HTTP Client yang digunakan untuk mengambil data dari api github. Jika kamu belum melakukan installasi terhadap http client, kamu bisa melakukan installasi via composer dengan perintah 

php composer.phar require --prefer-dist yiisoft/yii2-httpclient

setelah melakukan installasi langsung saja kita masuk ke pokok tutorial ini.

  1. Membuat Controller, Buat file pada folder controller dengan nama ApiGithubController.php 
    <?php
    
    /**
     * @author Chabib Nurozak <chabibdev@gmail.com>
     * @website chabibnr.net
     */
    
    namespace app\controllers;
    
    use yii\httpclient\Client;
    use yii\web\Controller;
    use yii\data\ArrayDataProvider;
    
    class ApiGithubController extends Controller {
    
        public function actionIndex() {
            $client = new Client();
            $response = $client->get('https://api.github.com/users/chabibnr/repos')
                ->addHeaders(['user-agent' => 'Tutorial Yii2 by ChabibNr'])
                ->send();
            if ($response->isOk) {
                $dataFromApi = $response->data;
            }else{
                $dataFromApi = [];
            }
            $data = [];
            /* membuat struktur array baru berdasarkan data yang di ambil dari github untuk dimasukan ke ArrayDataProvider */
            foreach($dataFromApi as $repo){
                $data[] = [
                    'id' => $repo['id'],
                    'name' => $repo['name'],
                    'owner' => $repo['owner']['login'],
                    'url' => $repo['html_url'],
                    'created_at' => $repo['created_at'],
                    'updated_at' => $repo['updated_at']
                ];
            }
            $provider = new ArrayDataProvider([
                'allModels' => $data,
            ]);
            return $this->render('index', [
                'dataProvider' => $provider
            ]);
        }
    
    }
  2. Membuat View, Selanjutnya adalah membuat view index.php yang di simpan pada folder views/api-github dengan isi code sebagai berikut
    <?php
    /**
     * @var $dataProvider \yii\data\ArrayDataProvider
     */
    
    echo "<h2>Tutorial Yii2 ArrayDataProvider<br/><small>Menampilkan repo github pada gridview Yii2 dengan ArrayDataProvider</small></h2>";
    echo yii\grid\GridView::widget([
        'dataProvider' => $dataProvider,
        'columns' => [
            'id',
            'name',
            'owner',
            'updated_at:datetime',
            [
                'attribute' => 'url',
                'format' => 'html',
                'value' => function($model){
                    return \yii\helpers\Html::a('Buka di Github', $model['url']);
                }
            ]
        ],
    ]);

    Nah setelah kedua file tersebut dibuat selanjutnya adalah melakukan start server, gunakan php yii serve setelah muncul informasi “Server started on http://localhost:8080/” silahkan kamu akses lewat browser kesukaan kamu dan akses alamat http://localhost:8080/api-github

 

Gimana sudah paham dengan ArrayDataProvider, sekarang mari kita lanjutkan untuk menambah sorting dan pagination. 

Seberapa manfaat turorial ini?
Sending
User Review
5 (2 votes)
No Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.