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

Fokus: Frontend — Mengkoneksikan ReactJS dengan Backend API

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-2797aaed5fe8

Mari kita lanjutkan app kita di sisi frontend. Kalau kamu belajar dari artikel sebelumnya, Kamu bisa lihat default template ReactJS sebagai berikut.

Susunan default template ReactJS

Kita akan membuat code kita didalam folder src, dimana logic-logic akan kita taruh semua di folder ini. Susunan default direktorinya adalah sebagai berikut:

Isi folder src

Kalau bahasa saya sebagai Yii2 Developer, entry point nya React JS ini ada di App.js. Isi codenya adalah sebagai berikut.

Entrypoint React JS

Kita akan menghubungkan frontend dengan endpoint backend menggunakan request http, dimana kita mempunyai banyak opsi metode yang bisa kita pakai. Misalnya:

1. AJAX,
2. Promise,
3. Async Await,
4. Fetch API,
5. dsb.

Metode-metode yang disebutkan diatas bisa bersifat synchronous juga bisa bersifat asynchronous. Dalam artikel ini, kita akan menggunakan axios, https://github.com/axios/axios . Kenapa? Karena axios membuat penulisan code menjadi lebih sederhana, seolah-olah menulis code secara Sync tetapi sebenarnya metode pemanggilannya adalah Async. Oke, mari kita install axios menggunakan terminal di VS Code.

# Pastikan direktori yang aktif adalah direktori frontend
cd frontend
yarn add axios

Proses penambahan dependensi axios

Jika berhasil, coba lihat di direktori frontend\src\package.json Disana akan terlihat bahwa axios sudah menjadi dependensi di aplikasi frontend.

Axios menjadi salah satu dependencies di frontend

Supaya lebih rapi, frontend ReactJS kita akan mengikuti kaidah Atom Design. https://medium.com/@makersinstitute/penerapan-atomic-design-pada-environment-react-c6c50eaf1b66. Maka susunan folder react js kita sekarang menjadi sebagai berikut.

Susunan direktori berdasarkan atom design.

Mari kita buat satu component pages saja terlebih dahulu untuk Home sebagai testing. Buat satu file js bernama home.index.js di folder src\components\pages\home

Ilustrasi component Home Page

Kemudian ketikkan kode sederhana pada home.index.js dan kita panggil di App.js seperti pada halaman berikut.

Hasilnya bisa lihat langsung di browser frontend:

Jika berhasil, saatnya kita menembak endpoint backend yang sudah kita siapkan sebelumnya yaitu AuthController. Berikut langkah-langkahnya.

Tambah configurasi proxy di package.json untuk menghindari CORS.

Kemudian buat satu folder lagi bernama services, dimana folder ini akan kita gunakan menyimpan file source code untuk menembak endpoint backend.

Kemudian, Kita buat satu file bernama http-common.js untuk membuat instance dari axios, sehingga akan mengurangi kode yang berulang. Kita juga akan membuat auth.service.js untuk handle otentikasi.

Susunan direktori services

Masing-masing 2 file source code tersebut sebagai berikut.

Service Auth dengan function index, sebagai indikator bahwa frontend sudah bisa koneksi dengan backend

Kita akan menggunakan gaya React Hooks supaya lebih kekinian, tidak menggunakan style Class Component. Saatnya kita menggunakan service ini di Home Component, seperti pada gambar berikut.

Memanggil AuthService di Home Component

Jika semua langkah-langkahnya benar, maka akan tampil halaman bahwa Kita sudah connect dengan backend.

Tampilan App.js jika berhasil terkoneksi dengan backend

Coba rubah pesan dari backend : AuthController di method index dengan kalimat: Anda terhubung…!, kemudian refresh halaman frontend. jika berubah di sisi frontend, maka selamat, Anda sudah memasuki tahap awal Fullstackoverflow Developer. ^_^