Tutorial Lengkap CRUD Codeigniter 4 dan React js #4 Edit Data

Tutorial Lengkap CRUD Codeigniter 4 dan React js

Edit data selalu dibutuhkan dalam sebuah sistem programing. Kali ini kita akan lanjutkan tutorial CRUD codeigniter 4 dengan react js bagian edit data.

Edit data codeigniter 4 react js
Edit data codeigniter 4 react js

Setelah sebelumnya dalam Tutorial Lengkap CRUD Codeigniter 4 dan React js #3 Show Data kita sudah membuat tombol untuk delete dan edit tapi belum berfungsi sebagaimana mestinya. Sekarang mari kita buat tommbol edit ini berfungsi. Langsung saja ya!.

Membuat REST API Codeigniter 4 edit dan update data

Untuk mengedit sebuah data kita membutuhkan 2 request yang pertama request untuk mengambil data yang mau kita edit yang kedua request untuk mengupdate data yang sudah kita edit. Baik langsung saja kita buat. Buka file app/Controllers/Quotes.php

Method baru di controller quotes

Method untuk mengambil data yang mau diedit

public function edit($id = NULL)
    {
        $get = $this->model->getQuotes($id);
        if ($get) {
            $code = 200;
            $response = [
                'status' => $code,
                'error' => false,
                'data' => $get,
            ];
        } else {
            $code = 401;
            $msg = ['message' => 'Not Found'];
            $response = [
                'status' => $code,
                'error' => true,
                'data' => $msg,
            ];
        }
        return $this->respond($response, $code);
    }

Method untuk mengupdate data yang sudah diedit

public function update($id = NULL)
    {
        $data = $this->request->getRawInput();
        $simpan = $this->model->updateQuotes($data, $id);
        if ($simpan) {
            $msg = ['message' => 'Updated Quotes successfully'];
            $response = [
                'status' => 200,
                'error' => false,
                'data' => $msg,
            ];
            return $this->respond($response, 200);
        }
    }

Penjelasan!

Codeigniter 4 mempunyai magic untuk mengupdate data yaitu fungsi getRawInput() ini untuk mengambil request data baru dari user dan juga untuk membuat array yang nantinya akan diteruskan ke models.

Menambah method pada models quotes

Buka file di app/Models/Quotes_model.php tambah 2 method ini

public function getQuotes($id = false)
    {
        if ($id === false) {
            return $this->findAll();
        } else {
            return $this->getWhere(['quote_id' => $id])->getRowArray();
        }
    }

public function updateQuotes($data, $id)
    {
        return $this->db->table($this->table)->update($data, ['quote_id' => $id]);
    }

 

Selesai kita membuat rest apinya dengan codeigniter 4 teman teman bisa coba dulu di postman dengan url .

  • Ambil data yang madu diedit
     http://localhost:8080/quotes/id/edit
    
    // * id 
    // ganti dengan id data yang mau di edit

     

  • Dan update data di
    http://localhost:8080/quotes/id
    
    //dengan method put atau patch
    //dengan mengirim body quotes baru

     

Biar tidak bingung mari kita pasang di react js nya jangan lupa jalankan webpack –watch agar ketika kita mengedit project react js nya langsung connect dengan codeigniter 4.

Edit data react js rest api codeigniter 4

Membuat default state baru untuk edit

Buka file react/src/components/Home.js Tambahkan pada statenya seperti ini

constructor(props) {
    super(props);
    this.state = {
      listquotes: [],
      quotes: "",
      quote_id_edit: "",
      isEdit: false,
    };
    this.onChange = this.onChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  • quotes_id_edit merupakai state yang akan kita isi oleh id data yang mau kita edit
  • isEdit  Ini untuk keperluan ui jadi kita akan pakai sebuah form jika state ini true maka form tersebut terbuka dan tentunya untuk mengedit data.

Membuat tombol edit berfungsi

Ubah button editnya jadi

                       <a
                          href="#"
                          class="badge badge-warning"
                          onClick={() => this.edit(data.quote_id)}
                        >

Disitu kita memberi event jika tombol di klik makan fungsi edit jalan sambil mengirim id data yang akan diedit.

Tampilan dinamis form tambah data dengan edit data

Tetap di file yang sama ya karena memang tutorial untuk react js nya cuma fokus satu file aja. Kita akan mencoba membuat form tambah data juga bisa digunakan untuk edit data kodenya seperti ini

                {this.state.isEdit ? (
                  <div>
                    <input
                      class="btn btn-warning btn-sm"
                      type="button"
                      value="Edit Quotes"
                      onClick={() => this.update()}
                    />
                    <input
                      class="btn btn-danger btn-sm"
                      type="button"
                      value="Close"
                      onClick={() => this.setState({ isEdit: false })}
                    />
                  </div>
                ) : (
                  <input
                    class="btn btn-primary btn-sm"
                    type="submit"
                    value="Add Quotes"
                  />
                )}

Penjelasan

Jadi tombol tambah data kita beri logic jika state isEdit  true bukan tombol tambah data yang ditampilkan melainkan tombol edit data.

Fungsi request ke rest api untuk edit data react js

edit(id) {
    fetch("http://localhost:8080/quotes/" + id + "/edit", {
      method: "get",
    })
      .then((respon) => respon.json())
      .then((ra) => {
        this.setState({
          quotes: ra.data.quote,
          quote_id_edit: id,
          isEdit: true,
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }

  update() {
    fetch("http://localhost:8080/quotes/" + this.state.quote_id_edit, {
      method: "put",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: `quote=${this.state.quotes}`,
    })
      .then((respon) => respon.json())
      .then((ra) => {
        this.componentDidMount();
      });
  }

Jadi untuk kode lengkapnya sampai edit pada react js home.js seperti ini

import React, { Component } from "react";
import Shimmer from "react-js-loading-shimmer";

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listquotes: [],
      quotes: "",
      quote_id_edit: "",
      isEdit: false,
    };
    this.onChange = this.onChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  onChange(event) {
    this.setState({ quotes: event.target.value });
    console.log(this.state.quotes);
  }

  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) => {
        this.componentDidMount();
      });

    event.preventDefault();
  }

  componentDidMount() {
    fetch("http://localhost:8080/quotes")
      .then((respon) => respon.json())
      .then((ra) =>
        this.setState({
          listquotes: ra,
        })
      );
  }


  edit(id) {
    fetch("http://localhost:8080/quotes/" + id + "/edit", {
      method: "get",
    })
      .then((respon) => respon.json())
      .then((ra) => {
        this.setState({
          quotes: ra.data.quote,
          quote_id_edit: id,
          isEdit: true,
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }

  update() {
    fetch("http://localhost:8080/quotes/" + this.state.quote_id_edit, {
      method: "put",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: `quote=${this.state.quotes}`,
    })
      .then((respon) => respon.json())
      .then((ra) => {
        this.componentDidMount();
      });
  }

  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>
                {this.state.isEdit ? (
                  <div>
                    <input
                      class="btn btn-warning btn-sm"
                      type="button"
                      value="Edit Quotes"
                      onClick={() => this.update()}
                    />
                    <input
                      class="btn btn-danger btn-sm"
                      type="button"
                      value="Close"
                      onClick={() => this.setState({ isEdit: false })}
                    />
                  </div>
                ) : (
                  <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 || <Shimmer height={"50px"} />}</td>
                      <td class="d-flex justify-content-around">
                        <a
                          href="#"
                          class="badge badge-danger"
                        >
                          delete
                        </a>
                        <a
                          href="#"
                          class="badge badge-warning"
                          onClick={() => this.edit(data.quote_id)}
                        >
                          edit
                        </a>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }
}

Hasilnya seperti ini


Tutorial Lengkap CRUD Codeigniter 4 dan React js #4 Edit Data

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Scroll to top