Tutorial Lengkap CRUD Codeigniter 4 dan React js #3 Show Data

Tutorial CRUD codeigniter 4 dengan react js kali ini sampi pada menampilkan data. Setelah sebelumnya kita Tutorial CRUD codeigniter 4 dengan react js Create Data . Untuk kalian yang belum lihat tutorial sebelumnya mending dilihat dulu ya. show data codeigniter 4 react js Baik langsung saja kita masuk ke langkah-langkahnya

Membuat method rest api show data codeigniter 4

Langsung buka controller quotes nya yang telah dibuat di tutorial sebelumnya berada pada app/Controllers/Quotes.php . lalu masukan kode ```bash

request->getPost('quote'); $data = [ 'quote' => $quote, ]; $simpan = $this->model->insertQuotes($data); if ($simpan) { $msg = ['message' => 'Created quote successfully']; $response = [ 'status' => 200, 'error' => false, 'data' => $msg, ]; return $this->respond($response, 200); } } public function index() { return $this->respond($this->model->findAll(), 200); } } ``` Penjelasan! Disini terdapat method baru bernama index dan method tersebut akan menampilkan semua data dari tabel quotes. Tidak usah edit untuk modelsnya karena fungsi findAll merupakan fungsi quoery builder baru pada codeigniter 4. ### Menggunakan api show data codeigniter 4 di react js Oke setelah rest api sudah dibuat kita tinggal mainkan rest api tersebut di react jsnya. Langsung buka saja file **react/src/components/Home.js** . Tambah kodenya jadi seperti ini: ```bash import React, { Component } from "react"; export default class Home extends Component { constructor(props) { super(props); this.state = { listquotes: [], quotes: "", }; this.onChange = this.onChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } onChange(event) { this.setState({ quotes: event.target.value }); } handleSubmit(event) { fetch("http://localhost:8080/quotes/create", { method: "post", headers: { Accept: "application/json", "Content-Type": "application/x-www-form-urlencoded", }, body: `quote=${this.state.quotes}`, }) .then((respon) => respon.json()) .then((ra) => { if ((ra.status = +200)) { this.componentDidMount(); } else { alert("Data don't saved"); } }); event.preventDefault(); } componentDidMount() { fetch("http://localhost:8080/quotes") .then((respon) => respon.json()) .then((ra) => this.setState({ listquotes: ra, }) ); } render() { return (

{this.state.listquotes.map((data) => { return ( ); })}

Quotes	Action
{data.quote}	delete edit

); } } ``` Penjelasan!. Saya menambahkan fungsi componentdidmount ini merupakan fungsi yang otomatis dijalankan ketika component selesai di akses. Fungsi ini merupakan fungsi bawaan dari react js. Lalu dalam komponen tersebut saya melakukan fetch terhadap rest api untuk method mengambil data yang telah dibuat diatas. Saya menyimpan data tersebut ke dalam state yang sudah saya buat di constructor bernama listquotes. Lalu melooping state tersebut dalam tabel dalam tabel tersebut saya juga sudah membuat tombol untuk edit dan delete. Tidak lupa fungsi handleSumbit untuk response suksesnya saya panggil fungsi componentdidmount agar saat kita create data maka data akan tampil dalam tabel. Berikut hasilnya:  CRUD codeigniter 4 dengan react js Komentar jika ada yang error dan tunggu tutorail selanjutnya