Pertemuan 6: Front End - Instalasi dan Persiapan

Sekarang kita sudah masuk di dalam materi frontend, dimana kita akan belajar bersama-sama bagaimana cara mengkonsumsi atau menggunakan Rest API yang sebelumnya sudah kita buat di dalam Laravel ke dalam project React.js.

Dimana kita akan belajar banyak hal seperti membuat proses otentikasi di dalam React.js, membuat route dan private route, membuat proses CRUD untuk beberapa master data, membuat pagination, searching dan lain-lain.

Di materi pertama ini kita akan belajar bagaimana cara membuat project baru di React.js menggunakan Vite. Dengan Vite kita akan diberikan kemudahan dalam membuat sebuah starter project React.js baru dan modern.

Apa itu Vite ?

Vite the next generation frontend tooling. It's fast!

Vite atau disebut juga Vit merupakan build tool atau frontend tooling yang dibangun di atas ESBuild dan memiliki performa yang super cepat dalam proses compiling. Sehingga dengan menggunakan Vite para pengembang aplikasi web akan mendapatkan pengelaman yang modern.

Langkah 1 - Membuat Project Baru di React.js

Setelah Node.js berhasil terinstall di dalam komputer, maka sekarang kita bisa memulai untuk membuat project baru di React.js.

Silahkan masuk ke dalam folder dimana teman-teman akan menyimpan project-nya, kemudian jalankan perintah berikut ini di dalam terminal/CMD :

npm create vite@4.2.0 react-travel -- --template react

Perintah di atas digunakan untuk membuat project React.js baru dengan nama react-travel.

Langkah 2 - Menjalankan Project React.js

Setelah proses installasi project React.js selesai, sekarang kita akan lanjutkan belajar bagaimana menjalankan project tersebut. Silahkan jalankan perintah berikut ini di dalam terminal.

cd react-travel

Perintah cd di atas digunakan untuk masuk / navigasi ke dalam folder project kita, yaitu react-travel. Setelah itu, jalankan perintah berikut ini di dalam terminal/CMD untuk menginstall dependency :

npm install

Setelah dependency berhasil terinstall, silahkan jalankan perintah berikut ini untuk menjalankan project-nya.

npm run dev

Silahkan tunggu beberapa saat dan jika berhasil maka project React.js kita akan dijalankan di dalam localhost menggunakan port 5173. Kita bisa membukanya di dalam web browser dengan http://localhost:5173, jika berhasil maka tampilannya seperti berikut ini :

Setelah berhasil membuat project baru di React.js, sekarang kita akan lanjutkan belajar melakukan proses installasi dan konfigurasi beberapa package atau library pendukung yang akan kita gunakan di dalam project.

Berikut ini beberapa package atau library yang akan kita gunakan di dalam project React.js.

Langkah 1 - Hapus File Yang Tidak Dibutuhkan

Pertama-tama kita akan melakukan hapus beberapa file yang tidak dibutuhkan, tujuannya agar tidak menganggu saat proses development dan membuat struktur folder menjadi lebih rapi.

Silahkan buka folder src, kemudian hapus file App.css dan index.css. Sehingga di dalam folder src tersebut akan menyisakan folder assets, dan file App.jsx dan main.jsx.

Setelah menghapus file App.css dan index.css, maka kita harus menyesuaikan isi di dalam file App.jsx dan main.jsx, biar saat dijalankan tidak menampilkan error.

Silahkan buka file src/App.jsx, kemudian ubah kode-nya menjadi seperti berikut ini.

function App() {

  return (
    <div className="App">
        Hello, SantriKoding
    </div>
  )

}

export default App

Kemudian buka juga file src/main.jsx dan ubah kode-nya menjadi seperti berikut ini.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Sekarang jika kita buka project-nya di browser, maka hasilnya akan seperti berikut ini.

Langkah 2 - Installasi dan Konfigurasi React Router DOM

Sekarang kita akan belajar bagaimana cara melakukan installasi dan konfigurasi React Router DOM di dalam project React.js. Library ini nantinya akan kita gunakan untuk membuat navigasi atau routing di dalam project, seperti berpindah-pindah halaman dengan menerapkan konsep SPA (Single Page Application).

Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan menjalankan-nya di dalam project React.js

npm install react-router-dom@6.4.5

Silahkan tunggu proses installasinya samapi selesai. Dan jika sudah, maka kita akan lanjutkan untuk melakukan sedikit konfigurasi di dalam project.

Silahkan buka file src/main.jsx, kemudian ubah kode-nya menjadi seperti berikut ini :

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>,
)

Dari perubahan kode di atas, pertama kita melakukan import module BrowserRouter dari React Router DOM.

//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';

kemudian kita gunakan module tersebut untuk membungkus component App. Karena component App yang akan di render pertama kali saat project di jalankan.

<BrowserRouter>
   <App />
</BrowserRouter>

Langkah 3 - Installasi Axios

Sekarang kita akan lanjutkan untuk menginstall package Axios di dalam project React.js. Sebenarnya untuk Axios akan membutuhkan beberapa konfigurasi lagi, akan tetapi kita akan bahas di materi selanjutnya.

Axios sendiri merupakan package atau library yang bersifat HTTP client untuk browser dan Node.js, dimana akan digunakan untuk mempermudah kita dalam melakukan proses HTTP request ke dalam sebuah server.

Silahkan jalankan perintah berikut ini di dlam terminal/CMD dan pastikan berada di dalam project React.js-nya.

npm install axios@1.2.1

Langkah 4 - Installasi React Bootstrap

Selanjutnya kita akan lakukan installasi React Bootstrap di dalam project React.js. React Bootstrap digunakan untuk mempermudah kita dalam menggunakan component dari Bootstrap itu sendiri tanpa harus menggunakan jQuery.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan menjalankannya berada di dalam project React.js.

npm install react-bootstrap@2.0.0-beta.6

Langkah 5 Installasi dan Konfigurasi Bootstrap

Setelah berhasil menginstall React Bootstrap, maka kita akan lanjutkan untuk menginstall CSS Bootstrap-nya itu sendiri. Dan kita juga akan lakukan sedikit konfigurasi agar CSS dari Bootstrap bisa digunakan di dalam project React.js.

SIlahkan jalankan perintah berikut ini di dalam terminal/CMD :

npm install bootstrap@5.1.0

Jika Bootstrap sudah berhasil terinstall, maka sekarang kita akan lanjutkan untuk melakukan konfigurasi, dimana kita akan melakukan load file CSS dari Bootstrap di dalam project React.js.

Silahkan buka file src/main.jsx, kemudian ubah kode-nya menjadi seperti berikut ini :

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';

//import CSS Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>,
)

Dari perubahan kode di atas, kita melakukan import CSS Bootstrap. Tujuannya agar dicompile dan dijalankan saat project pertama kali diakses.

//import CSS Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

Langkah 6 - Installasi Js Cookies

Js Cookies merupakan package yang mempermudah kita dalam melakukan manajemen cookies di dalam browser. Dimana kita akan gunakan package ini untuk melakukan set, get dan remove token dari proses otentikasi.

Silahkan jalankan perintah berikut ini di dalam termina/CMD :

npm install js-cookie@3.0.1

Langkah 7 - Installasi React Confirm Alert

Kita lanjutkan belajar menambahkan package atau library React Confirm Alert, dimana package tersebut akan kita gunakan nantinya untuk menampilkan jendela konfirmasi sebelum data dihapus.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD :

npm install react-confirm-alert@3.0.6

Langkah 8 - Installasi dan Konfigurasi React Hot Toast

React Hot Toast akan kita gunakan untuk menampilkan notifikasi di dalam project React.js secara elegan dan smooth. Dimana akan kita gunakan untuk menampilkan notifikasi berhasil insert data, update data, delete data dan lain-lain.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project React.js.

npm install react-hot-toast@2.4.0

Setelah berhasil menginstall-nya, sekarang kita lanjutkan untuk melakukan konfigurasi secara global untuk package ini. Silahkan buka file src/App.jsx, kemudian ubah kode-nya menjadi seperti berikut ini :

//import Toaster
import { Toaster } from 'react-hot-toast';

function App() {

  return (
    <>
      <Toaster />
    </>
  )
}

export default App

Dari perubahan kode di atas, kita melakukan import module Toaster dari React Hot Toast.

//import toats
import { Toaster } from 'react-hot-toast';

Kemudian kita letakkan di dalam method return akan module tersebut dapat digunakan secara global di dalam project.

<Toaster/>

Langkah 9 - Installasi React Image Gallery

Sekarang kita akan melakukan installasi package React Image Gallery, dimana akan kita gunakan untuk menampilkan gambar secara slide di dalam halaman detail place nanti-nya.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD :

npm install react-image-gallery@1.2.11

Langkah 10 - Installasi React Js Pagination

Karena akan menampilkan data, maka kita butuh yang namanya pagination, dimana kita akan membatasi data yang ditampilkan per-halaman agar aplikasi tidak menjadi berat. Dan disini kita menggunakan package yang bernama React Js Pagination.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD :

npm install react-js-pagination@3.0.3

Langkah 11 - Installasi React Quill

React Quill merupakan Rixh Text Editor yang digunakan untuk mempermudah kita dalam menulis sebuah konten di dalam website, seperti membuat text menjadi miring, tebal dan -lain-lain.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD :

npm install react-quill@2.0.0

Langkah 12 - Installasi dan Konfigurasi Mapbox GL

Kita lanjutkan untuk melakukan proses installasi Mapbox GL di dalam project React.js. Mapbox GL akan digunakan untuk mempermudah kita dalam menampilkan sebuah maps di dalam project.

Karena Mapbox menggunakan API KEY, maka kita harus mendaftar terlebih dahulu di website-nya untuk mendapatkan kridensial tersebut. Tapi untuk langkah mendapatkan API KEY akan kita bahas di materi selanjutnya, karena disini kita akan fokus pada installasi package atau library-nya saja.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD untuk melakukan proses installasi Mapbox GL di dalam project React.js.

npm install mapbox-gl@2.14.1

Setelah itu, kita akan melakukan import CSS dari Mapbox di dalam project React.js. Silahkan buka file src/main.jsx, kemudian ubah kode-nya menjadi seperti berikut ini :

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';

//import CSS Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

//mapbox gl CSS
import 'mapbox-gl/dist/mapbox-gl.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>,
)

Di atas, kita melakukan import CSS dari Mapbox GL.

//mapbox gl CSS
import 'mapbox-gl/dist/mapbox-gl.css';

Langkah 13 - Installasi Mapbox GL Geocoder

Mapbox GL Geocoder merupakan salah satu plugin tambahan di dalam Mapbox GL untuk menambahkan sebuah kolom pencarian, sehingga kita bisa lebih mudah dalam menemukan sebuah lokasi di dalam Maps.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD :

npm install --save @mapbox/mapbox-gl-geocoder@5.0.1

Sama seperti sebelumnya, kita akan melakukan import CSS dari Mapbox GL Geocoder di dalam project React.js. Silahkan buka file src/main.jsx, kemudian ubah kode-nya menjadi seperti berikut ini :

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';

//import CSS Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

//mapbox gl CSS
import 'mapbox-gl/dist/mapbox-gl.css';

//mapbox gl geocoder CSS
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>,
)

Di atas kita melakukan import CSS dari Mapbox GL Geocoders.

//mapbox gl geocoder CSS
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';

Langkah 14 - Installasi Mapbox GL Directions

Selanjutnya kita juga akan menambahkan sebuah plugin tambahan lagi untuk direction/navigation di dalam Maps, yaitu dengan menggunakan Mapbox GL Directions. Tujuannya untuk membuat sebuah navigasi dari 2 titik lokasi yang berbeda dan menampilkan jarak tempuh-nya.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD :

npm install @mapbox/mapbox-gl-directions@4.1.1 --legacy-peer-deps

Kita lanjutkan untuk melakukan import CSS dari Mapbox GL Directions. Silahkan buka file src/main.jsx, kemudian ubah kode-nya menjadi seperti berikut ini :

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';

//import CSS Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

//mapbox gl CSS
import 'mapbox-gl/dist/mapbox-gl.css';

//mapbox gl directions CSS
import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css'

//mapbox gl geocoder CSS
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>,
)

Di atas kita melakukan import CSS dari Mapbox GL Directions.

//mapbox gl directions CSS
import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css'

Sekarang kita akan belajar melakukan konfigurasi endpoint di dalam project React.js, dimana endpoint ini adalah domain yang kita gunakan sebagai backend. Dengan begini kita tidak perlu menuliskan endpoint secara berulang-ulang di dalam component dan jika ada perubahan kita cukup mengubah 1 baris kode saja.

Langkah 1 - Membuat File .env

File .env akan memudahkan kita dalam membuat variable envronment, contohnya untuk menyimpan kridensial endpoint, API Key dan lain-lain.

Silahkan buat file baru dengan nama .env di dalam root project dari React.js. Dimana file tersebut akan sejajar dengan folder src dan public. Setelah itu masukkan config berikut ini di dalam file .env tersebut.

VITE_APP_BASEURL=http://localhost:8000

INFORMASI : http://localhost:8000 merupakan domain dari project Laravel.

Langkah 2 - Konfigurasi Global Endpoint dengan Axios

Sekarang kita akan membuat konfigurasi untuk global endpoint menggunakan Axios. Kita juga akan membuat konfigurasi interceptors di dalam Axios.

Silahkan buat folder baru dengan nama api di dalam folder src. Setelah itu di dalam folder api silahkan buat file baru dengan nama index.jsx dan masukkan kode berikut ini :

//import axios
import axios from 'axios'

//import js cookie
import Cookies from 'js-cookie';

const Api = axios.create({
    
    //set endpoint API
    baseURL: import.meta.env.VITE_APP_BASEURL,

    //set header axios
    headers: {
        "Accept": "application/json",
        "Content-Type": "application/json",
    }
});

//handle unathenticated
Api.interceptors.response.use(function (response) {

    //return response
    return response;
}, ((error) => {

    //check if response unauthenticated
    if (401 === error.response.status) {

        //remove token
        Cookies.remove('token');

        //redirect "/admin/login"
        window.location = '/admin/login';
    } else {

        //reject promise error
        return Promise.reject(error);
    }
}));


export default Api

Dari perubahan kode di atas, pertama kita melakukan import Axios.

//import axios
import axios from 'axios'

Setelah itu, kita juga melakukan import Js Cookies. Ini akan kita gunakan untuk mendapatkan cookie yang berisi informasi token dari proses otentikasi.

//import js cookie
import Cookies from 'js-cookie';

Kemudian kita membuat object dari Axios untuk mendefinisikan baseURL dan headers default-nya.

const Api = axios.create({
    
    //set endpoint API
    baseURL: import.meta.env.VITE_APP_BASEURL,

    //set header axios
    headers: {
        "Accept": "application/json",
        "Content-Type": "application/json",
    }
});

Dimana untuk baseURL kita ambil dari file .env yang bernama VITE_APP_BASEURL dan untuk headers-nya kita atur secara default menggunakan application/json.

Setelah itu kita buat konfigurasi interceptors yang bertujuan untuk melakukan pengecekan terhapap response API atau callback dari API.

//handle unathenticated
Api.interceptors.response.use(function (response) {
	
	//response
	
}, (error => {

	//check status code 401

})

Di dalam interceptors kita membuat kondisi untuk melakukan pengecekan terhadap response yang memiliki status code 401, artinya response tersebut tidak mendapatkan izin untuk mengakses Rest API yang membutuhkan otentikasi.

//check if response unauthenticated
if (401 === error.response.status) {

	//remove token & redirect login

}

Jika terdapat response dengan status code 401, maka kita akan menghapus token yang ada di cookie.

//remove token
Cookies.remove('token');

Setelah itu, kita arahkan ke dalam halaman login.

//redirect "/admin/login"
window.location = '/admin/login';

Kesimpulannya adalah jika terdapat token yang sudah expired, maka kita akan dipaksa untuk melakukan login ulang.

Sekarang kita akan belajar untuk menambahkan assets (CSS dan Images) secara external, dimana untuk CSS-nya sudah saya sesuaikan agar bisa sesuai dengan tampilan dari website yang akan kita buat.

Langkah 1 - Download Assets

Pertama, silahkan unduh file-file assets-nya di link berikut ini : https://drive.google.com/file/d/1ryEd4GiIzZBe5K-pq7RGoEIR9UuzNogu/view?usp=sharing.

Jika sudah di unduh, silahkan extract file tersebut dan kita akan mendapatkan 1 folder baru dengan nama assets yang di dalamnya ada 2 folder lagi yaitu css dan images.

Silahkan copy folder css dan images tersebut dan paste di dalam folder src/assets yang ada di project React.js. Jadi kurang lebih seperti berikut ini :

Langkah 2 - Import CSS di React.js

Setelah itu, kita akan import css yang sudah kita tambahkan di atas di dalam project React.js. Silahkan buka file src/main.jsx, kemudian ubah kode-nya menjadi seperti berikut ini :

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';

//import CSS Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

//mapbox gl CSS
import 'mapbox-gl/dist/mapbox-gl.css';

//mapbox gl directions CSS
import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css'

//mapbox gl geocoder CSS
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';

//import custom CSS
import './assets/css/styles.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>,
)

Di atas kita melakukan import file styles.css dari folder src/assets/css, dimana file tersebut berisi kode CSS tambahan untuk kebutuhan dari website kita.

Dan pastikan posisi import-nya yang paling bawah, dikarenakan agar custom CSS tersebut bisa meng-override / me-replace CSS yang sudah ada.

Agar bisa menggunakan Mapbox dan menampilkan sebuah maps di dalam project, maka kita butuh yang namanya token/API Key. Kridensial tersebut dapat kita peroleh dengan cara mendaftar akun di website resmi dari Mapbox.

Mapbox sendiri merupakan provider maps yang sangat populer, dimana kita bisa menggunakan layanan maps untuk di integrasikan di dalam aplikasi. Seperti menampilkan maps, navigation, marker dan masih banyak lagi.

Banyak perusahaan besar di Dunia menggunakan Mapbox sebagai provider maps di dalam aplikasi mereka, seperti BMW, Toyota, Adobe dan lain-lain.

Langkah 1 - Daftar Akun di Mapbox

Pertama, kita akan mendaftar akun terlebih dahulu di website Mapbox. Silahkan buka link berikut ini dan lakukan register di dalam-nya : https://account.mapbox.com/auth/signup/

Setelah berhasil register, maka silahkan lakukan konfirmasi di email yang dikirimkan oleh Mapbox. Dan jika berhasil maka kita masuk ke dalam halaman dashboard Mapbox.

Dari gambar di atas, kita telah berhasil mendapatkan public token / API Key.

Langkah 2 - Konfigurasi Token/API key di React.js

Setelah berhasil mendapatkan token, sekarang kita akan simpan kridensial tersebut di dalam project React.js, karena kita akan menggunakannya nanti secara berulang-ulang.

Silahkan buka file .env, kemudian tambahkan kode berikut ini di dalam-nya.

VITE_APP_MAPBOX=paste_token_kamu_disini