

Tutorial Lengkap CRUD Codeigniter 4 dan

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

1 Komentar Posted in codeigniter 4, PHP, react js By semut Posted on Juli 3, 2020

Tagged ci4 feat react js, CRUD codeigniter 4, rest api codeigniter 4 forntend react js

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

<?php 

namespace App\Controllers; 

use CodeIgniter\RESTful\ResourceController; 

class Quotes extends ResourceController 
{ 
    protected $format       = 'json';
     protected $modelName    = 'App\Models\Quotes_model'; 

    public function create() 
    { 
        $quote   = $this‐>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
tersebut di react jsnya. Langsung buka saja
file react/src/components/Home.js . Tambah kodenya jadi seperti
ini:

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 ( 
      <div class="container"> 
        <div class="row"> 
          <div class="col"> 
            <div class="d‐flex justify‐content‐center"> 
              <form onSubmit={this.handleSubmit}> 
                <label> 
                  <input 
                    type="text" 
                    name="name" 
                    class="form‐controll" 
                    value={this.state.quotes} 
                    onChange={this.onChange} 
                  /> 
                </label> 
                <input 
                  class="btn btn‐primary btn‐sm" 
                  type="submit" 
                  value="Add Quotes" 
                /> 
              </form> 
            </div> 
           <table class="table table‐hover"> 
              <thead> 
                <tr> 
                   <th scope="col">Quotes</th> 
                  <th scope="col">Action</th> 
                </tr> 
              </thead> 
              <tbody> 
                {this.state.listquotes.map((data) => { 
                  return ( 
                    <tr> 
                      <td>{data.quote}</td> 
                      <td class="d‐flex justify‐content‐around"> 
                        <a 
                          href="#" 
                          class="badge badge‐danger" 
                        > 
                          delete 
                        </a> 
                        <a 
                          href="#" 
                          class="badge badge‐warning" 
                        > 
                          edit 
                        </a> 
                      </td> 
                    </tr> 
                  ); 
                })} 
              </tbody> 
            </table> 
          </div> 
        </div> 
      </div> 
    ); 
  } 
}

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

 Tutorial Lengkap CRUD Codeigniter 4 dan React js Tutorial Lengkap CRUD Codeigniter 4 dan React js #4

#2 Create Data Edit Data 

One thought on “Tutorial Lengkap CRUD

Codeigniter 4 dan React js #3 Show Data”
Donny putra
Mei 6, 2021 pukul 6:01 pm

Ketika di add quotes, tdk ada apa2.

cek di console ternyata errornya “POST
http://localhost:8080/quotes/create 500 ﴾Internal Server Error﴿”
mohon pencerahannya dg. terima kasih.

Balas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib

ditandai *

Komentar
Nama *

Email *

Situs Web

Simpan nama, email, dan situs web saya pada peramban ini untuk
komentar saya berikutnya.

Kirim Komentar

Kategori

Bash Shell ﴾1﴿

codeigniter 4 ﴾5﴿

Git dan Github ﴾4﴿

﴾4﴿
PHP ﴾4﴿

Python ﴾7﴿

react js ﴾5﴿

Termux ﴾5﴿

vps ﴾1﴿

Copyright © 2021 kumpul4semut. Theme: Zakra By ThemeGrill.