Tutorial ReactJS #8 : REST API pada ReactJs

Pengertian REST API

API (Application Programming Interface) adalah kumpulan aturan / code yang membuat 2 program atau lebih dapat berkomunikasi. API menjadi jembatan antar sistem yang menghubungkan client (program yang membutuhkan data) dengan server (database). Dengan kata lain, API adalah penghubung / perantara antar berbagai aplikasi, baik dalam satu platform atau lintas platform.

API membantu developer untuk mengkoneksikan fitur dengan aplikasi yang sudah ada. Hal ini membuat pekerjaan tim developer menjadi lebih efisien, tanpa harus mengembangkan fitur dari nol. Developer cukup mengambil data dari platform / aplikasi lain melalui API.

API memungkinkan komunikasi antar platform melalui siklus request – respons. Aplikasi yang membutuhkan data dari layanan atau server lain (client) mengirimkan permintaan, yang disampaikan melalui protokol API, dan data yang diperlukan dikirim kembali dari server.

Client dapat berkomunikasi dengan server, memanipulasi data, mengambil data yang ada di server tersebut tanpa merusak atau merubah data asli di dalam server. Hal ini dimungkinkan karena adanya protocol yang mengatur, sehinga API tidak akan merubah apapun di luar aturan yang berlaku.

REST atau Representational State Transfer adalah gaya arsitekturial dan pendekatan komunikasi yang bersifat stateless dan menggunakan HTTP/HTTPS untuk transmisi data. API yang menggunakan protokol REST disebut RESTful API.

REST protocol mendukung transmisi data dalam berbagai format seperti JSON, HTML, Python, teks biasa, serta file media. Tetapi REST hanya menggunakan HTTP/HTTPS untuk transmisi data dan tidak dapat beradaptasi dengan protokol lain seperti SOAP.

RESTful API bersifat stateless, artinya tidak ada data client yang disimpan dalam server di antara GET request. REST request memiliki keempat komponen yaitu Endpoint, Metode (GET, POST, PUT, DELETE), Header, Body (data).

 

 

Pengenalan Axios

Axios adalah sebuah library JavaScript yang digunakan untuk membuat permintaan HTTP (HTTP requests) dari aplikasi JavaScript. Library ini sangat populer di dunia pengembangan web dan sering digunakan untuk berinteraksi dengan REST API dan sumber daya web lainnya. Axios bekerja di berbagai lingkungan, termasuk dalam aplikasi web yang menjalankan JavaScript di sisi klien (seperti dalam browser) dan juga dalam lingkungan Node.js di sisi server.

Beberapa fitur dan keunggulan utama dari Axios adalah :

1. Sintaks yang Mudah Dipahami : Axios menyediakan API yang mudah digunakan dengan sintaks yang intuitif, sehingga memudahkan pengembang untuk membuat permintaan HTTP dengan sedikit usaha.
2. Dukungan untuk Promises : Axios secara bawaan mendukung Promises, yang memungkinkan pengguna untuk mengatasi permintaan HTTP secara asynchronous dengan mudah menggunakan ‘.then()‘ dan ‘.catch()‘.
3. Penanganan Otomatis Kesalahan : Axios memiliki penanganan yang baik terhadap kesalahan permintaan HTTP, seperti kesalahan jaringan atau kesalahan server, dan memungkinkan pengguna untuk dengan mudah menangani kasus-kasus ini.
4. Intersepsi Permintaan dan Tanggapan : Axios memungkinkan kita untuk mengintersep permintaan dan tanggapan HTTP, yang dapat berguna untuk menambahkan otorisasi, menambahkan header kustom, atau memproses tanggapan sebelum menggunakannya.
5. Dukungan untuk Berbagai Jenis Permintaan : Axios mendukung semua jenis permintaan HTTP, termasuk GET, POST, PUT, DELETE, dan lainnya. Kita juga dapat mengirim data dalam berbagai format, seperti JSON atau FormData.
6. Kompatibilitas Browser dan Node.js : Kita dapat menggunakan Axios baik di browser maupun di lingkungan Node.js, sehingga memudahkan pengembangan aplikasi yang berjalan di berbagai lingkungan.

 

Contoh penggunaan sederhana Axios dalam mengirim permintaan GET ke sebuah REST API adalah sebagai berikut:

axios.get('https://api.example.com/data')
.then(response => {
    // Tanggapan sukses
    console.log(response.data);
})

.catch(error => {
    // Tanggapan kesalahan
    console.error(error);
});

Dengan menggunakan Axios, pengembang dapat dengan mudah berkomunikasi dengan sumber daya jarak jauh dan mengintegrasikan data dari berbagai sumber ke dalam aplikasi web mereka.

Untuk bisa menggunakan Axios kita harus menginstallnya terlebih dahulu dengan perintah :

npm install axios

Fungsi Axios yang akan sering kita gunakan adalah GET dan POST. GET untuk mendapatkan data dari server, sedangkan POST mengirimkan data ke server. Berikut adalah kerangka dari perintah untuk melakukan GET :

axios.get('url')
.then(function (response){
    //Handle success
    console.log(response);
})
.catch(function(error){
    //Handle error
    console.log(error); 
})

Sedangkan kerangka untuk melakukan POST :

axios.get('url',data_json)
.then(function (response){
    console.log(response);
})
.catch(function(error){
    //Handle error
    console.log(error); 
});

 

 

Mengakses API

Kita akan melakukan request API ke https://jsonplaceholder.typicode.com/posts/ . URL tersebut menyediakan data yang bisa diakses untuk latihan. Format data JSON yang dihasilkan bisa kita lihat langsung di alamat tersebut.

Untuk mencobanya kita buat komponen baru dengan nama TampilPost.js dengan sintak seperti berikut :

import React, {useState, useEffect} from "react";
import axios from 'axios';

const TampilPost = () =>{
    const [posting, setPosting] = useState([]);
    const [isLoading, setLoading] = useState(true);
    const [isErr, setErr] = useState(false);
    useEffect(()=>{
        axios
            .get('https://jsonplaceholder.typicode.com/posts/')
            .then(res=>{
                console.log(res)
                setPosting(res.data);
                setLoading(false);
            })
            .catch(err=>{
                console.log(err);
                setErr(true);
            });
    },[]);

    return(
        <div>
            <h1>Daftar Posting</h1>
            <hr/>
            {isLoading && <div className="text-secondary">
                Loading...</div>
            }
            {isErr && <div className="text-danger">
                terjadi kesalahan akses REST API</div>
            }
            {posting.map((row)=>(
                <div key={row.id}>
                    <h3>{row.title}</h3>
                    <p>{row.body}</p>
                </div>
            ))}
        </div>
    )
}

export default TampilPost;

Penjelasan sintak :

• Baris 1 : import useState dan useEffect.
• Baris 2 : import axios.
• Baris 5 : deklarasi array destructuring untuk posting, dimana nilai awal posting di isi dengan [ ] atau array kosong.
• Baris 6 : deklarasi array destructuring untuk state isLoading. State ini akan kita gunakan untuk menampilkan indikator loading selama pengambilan data API.
• Baris 7 : deklarasi array destructuring untuk state isErr. State ini kita gunakan untuk menampilkan pesan error jika terjadi permasalahan request data API.
• Baris 8-20 : Menggunakan lifecycle useEffect. Pada baris akhir 19 ,kita tambahkan parameter [ ] yang artinya render hanya dilakukan sekali.
• Baris 9-19 : melalukan request API dengan axios. Jika request berhasil, maka state posting akan menampung data yang dikirimkan lewat API, isLoading bernilai false. Sedangkan jika request gagal, maka isErr akan bernilai true.
• Baris 26 : Jika isLoading bernilai true, maka menampilkan indikator loading.
• Baris 27 : Jika isErr bernilai true, maka akan menampilkan pesan terjadi kesalahan.
• Baris 28-33 : Mapping variable posting ke row. Sesuai dengan data JSON yang didapat lewat API, data bertipe object dengan kolom atau field: userId, id, title, body. Sehingga untuk mengambil nilai kolom kita gunakan perintah row.userId, row.id, row.title, row.body.

Selanjutnya ubah komponen App.js menjadi seperti berikut :

import logo from './logo.svg';
import './App.css';
import TampilPost from './Components/TampilPost';

function App() {
  return (
    <div className="container">
      <TampilPost/>
    </div>
  );
}

export default App;

Untuk menjalankannya, ketikan perintah berikut ini :

npm start

Maka hasilnya seperti berikut ini :

Di browser kita akan melihat data yang diperoleh API dari URL yang kita akse, kita juga bisa menampilkan console untuk melihat data yang didapat lewat API.

 

 

Membuat REST API dengan PHP

Untuk menangani JSON, PHP menyediakan fungsi json_encode dan json_decode. Fungsi json_encode digunakan untuk konversi data dalam format JSON, sedangkan json_decode sebaliknya, menjadikan JSON dalam format object atau array asosiatif di PHP.

JSON Tunggal

Sekarang kita akan membuat JSON object yang hanya memiliki 1 record dengan PHP. Kita buat file PHP untuk menghasilkan JSON dengan nama dataproduk.php, dengan sintak seperti berikut :

<?php
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: access");
    header("Access-Control-Allow-Methods: GET");
    header("Content-Type: application/json; charset=UTF-8");
    header("Access-Control-Allow-Headers: Content-Type,Access-Control-Allow-Header, Authorization, X-Requested-With");

    class Produk{
        public $kode    = "";
        public $jenis   = "";
        public $merk    = "";
        public $harga   = 0;
    }

    $produk = new Produk();
    $produk->kode   = "M0001";
    $produk->jenis  = "avanza Veloz";
    $produk->merk   = "Toyota";
    $produk->harga  = 225000000;
    echo json_encode($produk);
?>

Penjelasan sintak :

• Baris 2-6 : Informasi header PHP untuk menghasilkan data JSON.
• Baris 8-13 : Pembuatan class produk dengan property kode, jenis, merk dan harga.
• Baris 15 : Pembuatan object $produk dari class Produk.
• Baris 16-19 : Pemberian nilai untuk tiap-tiap property.
• Baris 20 : Konversi $produk menjadi JSON.

Ketika dijalankan melalui browser maka hasilnya seperti berikut ini :

JSON dengan PHP sudah berhasil dibuat, untuk mengecek format JSON tersebut apakah sudah benar atau belum kita bisa mengeceknya lewat JSON Validator, salah satunya pada alamat https://jsonformatter.curiousconcept.com. JSON yang dihasilkan oleh PHP tersebut kita copy ke form dan tekan tombol Proses.

Jika pesannya valid, berarti JSON yang kita buat dengan PHP sudah benar, sehingga bisa diakses lewat axios dengan Reactjs.

Untuk mengaksesnya, kita buat komponen baru dengan nama AmbilDataTunggal.js untuk mengambil REST API di atas, dengan sintak seperti berikut ini :

import React, {useState, useEffect} from "react";
import axios from 'axios';

const AmbilDataTunggal = () => {
    const [produk, setProduk]       = useState({});
    const [isLoading, setLoading]   = useState(true);
    const [isErr, setErr]           = useState(false);

    useEffect(()=>{
        axios
            .get('http://localhost/php-rest-api/dataproduk.php')
            .then(res=>{
                console.log(res)
                setProduk(res.data);
                setLoading(false);
            })
            .catch(err=>{
                console.log(err);
                setErr(true);
            });
    },[]);

    return(
        <div>
            <h1>Data Produk</h1>
            <hr/>
            {isLoading && <div className="text-secondary">
                Loading...</div>
            }
            {isErr && <div className="text-danger">
                terjadi kesalahan akses REST API</div>
            }
            
            <p>Kode     : {produk.kode}</p>
            <p>Nama     : {produk.jenis}</p>
            <p>Kategori : {produk.merk}</p>
            <p>Harga    : {produk.harga}</p>
        </div>
    )
}

export default AmbilDataTunggal;

Berikutnya kita panggil komponen AmbilDataTunggal.js dari komponen App.js dengan sintak seperti berikut :

import './App.css';
import AmbilDataTunggal from './Components/AmbilDataTunggal';

function App() {
  return (
    <div className="container">
      <AmbilDataTunggal/>
    </div>
  );
}

export default App;

Maka hasilnya :

JSON Array Object

Selanjutnya kita akan membuat JSON dengan elemen array atau record lebih dari 1. Kita buat file baru dengan nama daftarproduk_array.php di dalam folder php-rest-api di dalam folder htdocs dengan sintak seperti berikut :

<?php
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: access");
    header("Access-Control-Allow-Methods: GET");
    header("Content-Type: application/json; charset=UTF-8");
    header("Access-Control-Allow-Headers: Content-Type,Access-Control-Allow-Header, Authorization, X-Requested-With");

    class Produk{
        public $kode    = "";
        public $jenis   = "";
        public $merk    = "";
        public $harga   = 0;
    }

    $daftarproduk = array();

    $produk1 = new Produk();
    $produk1->kode   = "M0001";
    $produk1->jenis  = "Avanza Veloz";
    $produk1->merk   = "Toyota";
    $produk1->harga  = 225000000;

    $daftarproduk[] = $produk1;

    $produk2 = new Produk();
    $produk2->kode   = "M0002";
    $produk2->jenis  = "New Ertiga";
    $produk2->merk   = "Suzuki";
    $produk2->harga  = 200000000;

    $daftarproduk[] = $produk2;

    $produk3 = new Produk();
    $produk3->kode   = "M0003";
    $produk3->jenis  = "HR-V";
    $produk3->merk   = "Honda";
    $produk3->harga  = 350000000;

    $daftarproduk[] = $produk3;

    echo json_encode($daftarproduk);
?>

Penjelasan sintak :

• Baris 1-13 : sama dengan sebelumnya
• Baris 15 : Pembuatan array $daftarproduk
• Baris 23,31,39 : Data Object disimpan dalam array $daftarproduk

Ketika dijalankam maka hasilnya seperti berikut ini :

Lakukan validasi JSON seperti langkah sebelumnya menggunakan https://jsonformatter.curiousconcept.com. Jika valid, lanjutkan ke pembuatan komponen Reactjs. Kita buat komponen baru dengan nama AmbilDataSemua.js dengan sintak seperti berikut :

import React, {useState, useEffect} from "react";
import axios from 'axios';

const AmbilDataSemua = () => {
    const [no, setNomor]            = useState(1);
    const [produk, setProduk]       = useState([]);
    const [isLoading, setLoading]   = useState(true);
    const [isErr, setErr]           = useState(false);

    useEffect(()=>{
        axios
            .get('http://localhost/php-rest-api/dataproduk_array.php')
            .then(res=>{
                console.log(res)
                setProduk(res.data);
                setLoading(false);
            })
            .catch(err=>{
                console.log(err);
                setErr(true);
            });
    },[]);

    return(
        <div>
            <h1>Data Produk</h1>
            <hr/>
            {isLoading && <div className="text-secondary">
                Loading...</div>
            }
            {isErr && <div className="text-danger">
                terjadi kesalahan akses REST API</div>
            }

            <table className="table table-hover">
                <thead>
                    <tr>
                        <th scope="col">No</th>
                        <th scope="col">Kode</th>
                        <th scope="col">Jenis</th>
                        <th scope="col">Merk</th>
                        <th scope="col">Harga</th>
                    </tr>
                </thead>

                <tbody>
                    {produk.map((row,idx)=>(
                        <tr key={row.kode}>
                            <td>{idx+1}</td>
                            <td>{row.kode}</td>
                            <td>{row.jenis}</td>
                            <td>{row.merk}</td>
                            <td>{row.harga}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    )
}

export default AmbilDataSemua;

Penjelesan sintak :

Hampir sama dengan mengakses data tumggal API, hanya saja disini data produk ditampilkan dengan table. Baris 40 : Mapping produk dengan variable row dan idx, dimana row menampung object dan idx untuk menampilkan index dari tiap object.
Selanjutnya kita panggil kompenen AmbilDataSemua.js dari komponen App.js dengan sintak seperti berikut :

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import AmbilDataSemua from './Components/AmbilDataSemua';

function App() {
  return (
    <div className="container">
      <AmbilDataSemua/>
    </div>
  );
}

export default App;

Maka hasilnya seperti berikut :

 

 

Submit Form API (JSON)

dadad