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.

CRUD codeigniter 4 react js delete data 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