Tutorial Lengkap CRUD Codeigniter 4 dan React js #5 Delete Data

Tutorial CRUD codeigniter 4 dengan react js sudah samapai delete data. Fungsi delete data itu sesuai namanya untuk menghapus data yang sudah kita tambahkan ke database.

Untuk delete data sebenarnya cukup mudah dibandingkan Tutorial Lengkap CRUD Codeigniter 4 dan React js #4 Edit Data . Baik langsung saja kita bahas step by step.

Membuat REST API Codeigniter 4 edit dan delete data

Seperti biasa sebelum melakukan development codeigniter 4 dengan react js kita aktifkan dulu

php spark serve

webpack --watch

Untuk mengaktifkan server local codeigniter 4 dan untuk membaca setiap perubahan react js.

 

Membuat rest api delete data pada codeigniter 4 baik langsung saja buka file controllersnya app/Controllers/Quotes.php dan modelsnya app/Models/Quotes_model.php 

Masukan method baru untuk controller

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

Untuk method modelsnya

    public function deleteQuotes($id)
    {
        return $this->db->table($this->table)->delete(['quote_id' => $id]);
    }

untuk url rest apinya sudah restfull ya di

http://localhost:8080/quotes/id

id nya ganti dengan id yang mau diganti oh ya jangan lupa metode requestnya harus delete

Delete data react js rest api codeigniter 4

Sekarang kita tinggal aktifkan tombol delete yang sudah kita buat di tutorial sebelumnya. Tambahkan event!

 <a href="#"
  class="badge badge-danger"
  onClick={() => this.delete(data.quote_id)}
   >
   delete
 </a>

jadi tombol deletenya ketika di klik akan memanggil fungsi delete sambil mengirim parameter id yang akan dihapus. Untuk fungsi deletenya seperti ini!

delete(id) {
    fetch("http://localhost:8080/quotes/" + id, {
      method: "DELETE",
    })
      .then((respon) => respon.json())
      .then((ra) => {
        console.log(ra);
        this.componentDidMount();
      })
      .catch((err) => {
        console.log(err);
      });
  }

Nah mudah bukan membuat CRUD codeigniter 4 dengan react js. Semoga apa yang saya sampaikan bisa bermanfaat dan menjadi amal jariyah. Untuk source kode lengkapnya bisa lihat di.

Github : crudci4reactjs