Yii2: Yii as Web Client consume RESTful Web Service

restyii

A. PENDAHULUAN

Yii Framework ini memang bener-bener cocok buat fullstack programming.. mau jadi backend OK, frontend juga OK atau dua duanya juga OK. Kali ini kita akan bermain-main dengan Yii sebagai frontend atau web client.. lha kok gak pake HTML JS aja? atau pake AngularJs?
#kan-cuma-main-main

Maaf becanda.. jawabannya adalah males ah koding buat frontend.. enakan pakai Yii karena ada CRUD generatornya, udah full twitter bootstrap lagi.. kurang apa coba?
#padahal-males

Nah, web client ini kemudian consume XML/JSON via RESTful web service. Oke.. asumsinya kita sudah bikin web service dengan sebagai contoh pake method GET dulu.. eits tunggu.. jangan2 kamu gak bisa bikin web service? ah pasti gak bisa..

Karena lagi baik hati.. nih aku ajarin mbikin web service.. pada tutorial ini aku hanya akan mencontohkan membuat webservice menggunakan Yii, namun Anda bisa menggunakan framework atau bahasa lain..

B. MEMBUAT WEB SERVICE MENGGUNAKAN YII

Membuat web service menggunakan Yii2 ini keterlaluan mudah.. cocok buat kamu-kamu yang males koding.
1. Install Yii template single aja (ini template basic yang udah di enhance kek advanced)

php composer.phar global require "fxp/composer-asset-plugin:~1.1.0"
php composer.phar create-project --prefer-dist --stability=dev hscstudio/yii2-app-single rest

2. Bikin database lalu import sql contoh ini

CREATE TABLE IF NOT EXISTS `employee` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `email` varchar(100) NOT NULL,
  `birthday` date DEFAULT NULL,
  `photo` varchar(255) DEFAULT NULL,
  `created_at` int(11) DEFAULT NULL,
  `updated_at` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB AUTO_INCREMENT=8;

INSERT INTO `employee` (`id`, `name`, `email`, `birthday`, `photo`, `created_at`, `updated_at`) VALUES
(1, 'Jayda Douglas', 'britchie@yahoo.com', '1983-12-18', 'images/3c6bb1a0f9559dc5f35b5c4ff0af62a1.jpg', 1448838415, NULL),
(2, 'Arne Cummings', 'bulah.christiansen@barrows.com', '1976-06-03', 'images/7aa5030f593d9fdbaf83928477581342.jpg', 1448838422, NULL),
(3, 'Ludwig Daniel', 'lorenz97@donnelly.net', '1937-07-25', 'images/16fe84f059901ac62575d0878233ff45.jpg', 1448838436, NULL),
(4, 'Devan Prosacco', 'qpagac@kiehn.com', '1969-11-14', 'images/113fa3eb20213b3a95f35f27e0ca5dc1.jpg', 1448838443, NULL),
(5, 'Jesse Sauer', 'emmitt26@gmail.com', '1983-12-18', 'images/978cb1271da894dbd3795e35de188585.jpg', 1448838458, NULL),
(6, 'Antonietta Adams Jr.', 'jordi.stark@yahoo.com', '1928-02-29', 'images/b102b35a0483c4a55f4f19b79834952a.jpg', 1448838465, NULL),
(7, 'Corine Grady', 'cleveland95@yahoo.com', '1983-12-18', 'images/c92658fcd87b5db8c88304c4ffc94ca5.jpg', 1448838466, NULL);

3. Lakukan konfigurasi database app\config\db.php
4. Bikin model employee pake Gii aja index.php?r=gii, gunakan namespace \app\models\Employee
5. Buat controller rest..
buat file \app\controllers\EmployeeController.php
dengan kode

 <?php
 namespace app\controllers;
 use yii\rest\ActiveController;
 class EmployeeRestController extends ActiveController
 {
 public $modelClass = 'app\models\Employee';
 }</pre>
<pre>
 6. Lakukan konfigurasi komponen request dan URLManager app\config\web.php
</pre>
<pre>
 'components' => [
 'request' => [
 ...
 'parsers' => [
 'application/json' => 'yii\web\JsonParser',
 ]
 ],
 'urlManager' => [
 'enablePrettyUrl' => true,
 'showScriptName' => false,
 'rules' => [
 ['class' => 'yii\rest\UrlRule', 'controller' => 'employee'],
 ],
 ],

7. Selesai..
Dengan minimal effor kamu dah selesai bikin RESTful API, cara aksesnya gini
GET /employee: list all employee page by page;
HEAD /employee: show the overview information of employee listing;
POST /employee: create a new employee;
GET /employee/123: return the details of the employee 123;
HEAD /employee/123: show the overview information of employee 123;
PATCH /employee/123 and PUT /employee/123: update the employee 123;
DELETE /employee/123: delete the employee 123;
OPTIONS /employee: show the supported verbs regarding endpoint /employee;
OPTIONS /employee/123: show the supported verbs regarding endpoint /employee/123.

 

Selengkapnya http://www.yiiframework.com/doc-2.0/guide-rest-quick-start.html

Pada tutorial ini yang akan kita pakai adalah GET /employee: list all employee page by page; yang bisa diakses via URL http://path_to_host/rest/web/employee maka jika diakses akan mengembalikan data daftar employee dalam format XML

C. MEMBUAT WEB CLIENT MENGGUNAKAN YII

Untuk membuat yii sebagai client caranya juga mudah.. seperti langkah biasa..
1. Install Yii template single aja (ini template basic yang udah di enhance kek advanced)

php composer.phar global require "fxp/composer-asset-plugin:~1.1.0"
php composer.phar create-project --prefer-dist --stability=dev hscstudio/yii2-app-single client

2. Lakukan konfigurasi database app\config\db.php
ini cuman buat generate MODEL & CRUD saja.. gunakan database yang sama dengan REST diatas yaitu tabel employee
3. Bikin model employee pake Gii aja index.php?r=gii, gunakan namespace \app\models\Employee
4. Generate CRUDnya juga
5. Kalo sudah.. silahkan diakses crud hasil generate, melalui url index.php?r=employee/index
Maka akan muncul gridview, nah si gridview ini datanya langsung nembak ke database..
Tantangan yang ingin kita taklukkan pada tutorial ini adalah gimana caranya data dari web service
pada contoh ini data harusnya dari webservice yang tadi kita bikin

http://path_to_host/rest/web/employee

6. Caranya, modifikasi app/controllers/EmployeeController.php
Kita akan menggunakankan 3 class utama ini, silahkan di use di controller tsb

use yii\data\ArrayDataProvider;
use yii\httpclient\Client;
use yii\helpers\Json;

Kemudian pada actionIndex, silahkan dimodifikasi sebagai berikut:

public function actionIndex()
{
    $client = new Client(['baseUrl' => 'http://path_to_host/rest/web/']);
    $response = $client->createRequest()
      ->setUrl('employee')
      ->addHeaders(['content-type' => 'application/json'])
      ->send();
    $data = Json::decode($response->content);
    $dataProvider = new ArrayDataProvider([
        'allModels' => $data,
        'pagination' => [
            'pageSize' => 10,
        ],
    ]);
    return $this->render('index', [
        'dataProvider' => $dataProvider,
    ]);
}

7. Karena kita tidak pake model, maka di app\views\employee\index.php silahkan dihapus aja filterModel

...
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    //'filterModel' => $searchModel,
    ...

8. Selesai..
silahkan akses http://path_to_host/client/web/employee/index

selengkapnya baca https://github.com/yiisoft/yii2-httpclient/blob/master/docs/guide/basic-usage.md

Nah.. data Gridview yang muncul sekarang sumbernya adalah data dari webservice RESTful.. Silahkan dilanjutkan untuk CREATE, UPDATE dan DELETE.. SORT PAGING dsb.. Konsepnya sama.. kek gitu doang..

#sorry jika bingung.. ane juga nyubi..

9 Comments
  1. Dedik
  2. Henry
  3. MasMo
  4. firdaus
  5. Dawud Tan (陳大衛)
  6. rana
  7. Abundanti
  8. Leave a Reply
  9. Leave a Reply

Leave a Reply

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