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.

[AdSense-A]

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. 

5 comments:

  1. Visitor Rating: 5 Stars

    ReplyDelete
  2. Visitor Rating: 5 Stars

    ReplyDelete
  3. […] kita telah membahas masalah GridView menggunakan ArrayDataProvider,  dengan studi kasus “Menampilkan repo github pada gridview Yii2” pada tutorial kali ini, kita akan menyambung pembahasan sebelumnya yang berjudul “Menampilkan […]

    ReplyDelete
  4. […] sebelumnya. Pada langkah menampilkan data, sama seperti pada tulisan sebelumya yang berjudul Menampilkan repo github pada gridview Yii2 dengan ArrayDataProvider, hanya saja kali ini kita akan menggunakan ActiveDataProvider sebagai Data […]

    ReplyDelete
  5. keren. finde me : tomysatriaalasi.blogspot.com

    ReplyDelete

Powered by Blogger.