Part 4 — Membuat RESTFul API menggunakan Yii2 (basic template) sebagai backend dan React JS sebagai frontend — FullStackOverflow Developer

Fokus: Frontend— Melakukan instalasi ReactJS menggunakan create-react-app & Inisialisasi Awal API di Yii2 Backend

Github Repo: https://github.com/ahmadfadlydziljalal/yii2-reactjs

Melanjutkan dari artikel sebelumnya: https://ahmadfadlydziljalal.medium.com/membuat-restful-api-menggunakan-yii2-basic-template-sebagai-backend-dan-react-js-sebagai-2223e8613322

ReactJS di-maintenance oleh Facebook.Inc; yang sudah kita ketahui adalah salah satu dari media sosial yang sangat besar di bumi sehingga mungkin itu salah satu alasan mengapa React JS adalah sebuah frontend framework yang terkenal. Saat artikel ini ditulis merupakan framework paling populer nomor 2: https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/.

Ada banyak cara melakukan instalasi ReactJS seperti yang tertera di halaman doc ReactJS, https://reactjs.org/docs/create-a-new-react-app.html#more-flexible-toolchains. Namun pada artikel ini, kita akan menggunakan create-react-app sebagai metode yang paling mudah. Oke, ketikkan perintah- perintah berikut pada terminal:

# Metode 1: Perintah diketik secara sekuensial / (satu-satu)
npx create-react-app frontend 
cd frontend 
yarn start
# Metode 2: Perintah satu line
npx create-react-app frontend && cd frontend && yarn start

Jika tidak ada masalah koneksi internet atau lainnya, berikut hasil tampilan-nya, dimana Yii2 sebagai backend server berjalan di port :8080 dan ReactJS berjalan di port 3000.

Pastikan juga di browser tidak ada masalah dalam mengakses dua aplikasi ini. Berikut tampilan ke dua app tersebut.

Tampilan awal Yii2 dan ReactJS

Oke, ReactJS sudah jalan, mari kita buat direktori khusus untuk API Backend. Susunan direktori yang kita buat mengadopsi style versioning sesuai aturan umum dan best practice dari Restful itu sendiri ; https://restfulapi.net/versioning/.

Backend API yang kita buat bisa mengcover style ini dengan menggunakan Yii2 modules: https://www.yiiframework.com/doc/guide/2.0/en/structure-modules, sehingga struktur folder dan file-nya sebagai berikut.

Susunan direktori pada Backend API

Jika dijelsakan secara rinci, api adalah folder utama untuk Backend API dengan 3 bagian penting:

• index.php | entry point Yii2
• config | merupakan direktori layaknya direktori config pada backend/config, berisi konfigurasi yang dibutuhkan
• modules | merupakan direktori tempat menyimpan logika-logika yang berhubungan langsung dengan frontend, berisi controller dengan versioning

Penjelasan

File index.php sama isinya dengan index.php pada direktori backend\web\index.php Kita hanya perlu sesuaikan path nya saja. Berikut perbandingannya.

Perbandingan entry point web & api

Direktori config berisi dua file:

api.php, Isinya adalah konfigurasi API sebagai berikut

<?php
$params = require(__DIR__ . '/params.php');
return [
    'id' => 'basic',
    'basePath' => dirname(__DIR__) . '/..',
    'bootstrap' => [
         'log',
    ],
    'components' => [
        'authManager' => [
            'class' => 'yii\rbac\DbManager',
            'defaultRoles' => ['user-default']
         ],
         'cache' => [
            'class' => 'yii\caching\FileCache',
        ],
        'request' => [
           'parsers' => [ // Konfigurasi ini wajib untuk REST
               'application/json' => 'yii\web\JsonParser',
           ]
        ],
        'user' => [
           'identityClass' => 'mdm\admin\models\User',
           'enableAutoLogin' => false,
           'enableSession' => false,
           'loginUrl' => null,
        ],
        log' => [
           'traceLevel' => YII_DEBUG ? 3 : 0,
           'targets' => [
                  [
                      'class' => 'yii\log\FileTarget',
                      'levels' => ['error', 'warning'],
                      'logFile' => '@app/runtime/logs/api.log',
                  ],
            ],
        ],
        'urlManager' => [
           'class' => 'yii\web\UrlManager',
           'enablePrettyUrl' => true,
           'enableStrictParsing' => true,
           'showScriptName' => false,
           'rules' => [
               [
                  'class' => 'yii\rest\UrlRule',
                  'controller' => [
                      'v1/auth' => 'v1/auth'
                  ],
                  'patterns' => [
                        'GET index' => 'index',
                  ],
                  'pluralize' => false,
              ],
           ],
         ],
         'db' => require(__DIR__ . '/../../config/db.php'),
    ],
   'modules' => [
     'v1' => [
           'basePath' => '@app/api/modules/v1',
           'class' => 'app\api\modules\v1\Module'
     ],
  ],
  'params' => $params,
];

Kemudian dengan file params.php, berisi parameter-parameter global di Backend API sebagai berikut.

<?php
return [
    'adminEmail' => 'superadmin@perusahaan.com',
    'senderEmail' => 'noreply@perusahaan.com',
    'senderName' => 'Perusahaan.com mailer',
    'allowedDomains' => [
       'http://localhost:3000',
    ]
];

Kemudian dengan direktori modules, Modules dapat Kita buat menggunakan Gii (Magic Tool) bawaan Yii2 atau kita membuatnya secara manual. Untuk mengakses gii, lakukan perubahan konfigurasi di backend/config/web.php . Ingat, ini hanya di Development Environment.

Kemudian masuk ke link berikut ini: http://localhost:8080/index.php?r=gii

Cara mengakses menu module menggunakan akses Gii

Isi dengan sesuai pada gambar.

Gii akan menggenerate beberapa file pada direktori backend\api\modules\v1, hapus file yang kita tidak perlukan. Kita hanya butuh seperti pada gambar berikut.

Tampilan file yang dibutuhkan

Jika dilihat pada konfigurasi api.php, kita mendefinisikan satu Class Controller, yaitu AuthController. Controller inilah yang akan menghandle Otentikasi backend API.

AuthController.php

Kemudian mari kita jalankan server untuk RestFul API nya di port 8081. Secara kasat mata, kita running 3 port yaitu:

1. Port 8080, => backend web
2. Port 8081, => backend Rest
3. Port 3000, => frontend React

php yii serve localhost --docroot="api" --port=8081

Ke-tiga port running secara simultan.

Test pakai Postman atau Insomnia untuk Rest API, hasilnya harusnya seperti ini :

Insomnia IDE.

Contoh app yang menandakan bahwa React sudah konek dengan Yii2

Artikel selanjutnya:

https://ahmadfadlydziljalal.medium.com/part-5-membuat-restful-api-menggunakan-yii2-basic-template-sebagai-backend-dan-react-js-sebagai-1e692dfb4433