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

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

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


Last modified: Agustus 3, 2020

Comments

That could be the finish of this post. Here you will discover some web pages that we believe youll enjoy, just click the links. Esme Lorrie Kruse

Write a Reply or Comment

Your email address will not be published.