Wildan Fuady Penulis buku motivasi dan inspirasi Islami, Web Developer dan Mobile App Developer.

Tutorial CRUD Codeigniter 4 dan Flutter #5 – Delete Data

4 min read

CRUD Codeigniter 4 + Flutter - Delete Data

Halo minna, jika Anda membutuhkan tutorial CRUD codeigniter 4 dan flutter yang membahas delete data, Anda berada di artikel yang tepat. Ke depannya kita akan menggunakan Codeigniter 4 sebagai back end dan Flutter sebagai mobile app dengan mengambil data dari Codeigniter 4 melalui rest api.

Melalui artikel ini, Anda akan belajar:

  1. Menambahkan fitur delete pada model dan controller di Codeigniter 4
  2. Menambahkan fitur delete di user service dan screen Flutter
  3. Menampilkan pesan berhasil delete data melalui snackbar
  4. dan masih banyak lagi …

Namun jika Anda belum membaca tutorial sebelumnya yang membahas update data, silahkan kunjungi tutorialnya melalui link di bawah ini:

Rekomendasi: Tutorial CRUD Codeigniter 4 dan Flutter #4 – Update Data

So, jika sudah membaca tutorial sebelumnya dan Anda tertarik untuk membaca tutorial delete data pada crud Codeigniter 4 dan Flutter, tunggu apa lagi…

Let’s go!

Step 1 – Tambahkan Function Delete di Model Codeigniter 4

Buka kembali file User_model.php pada direktori app/Models. Silahkan ketik kode berikut ini:

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

Function deleteUser($id) ini akan menghapus record di database sesuai dengan parameter id yang diberikan.

Step 2 – Tambahkan Function Delete di Controller Codeigniter 4

Silahkan buka file User.php dan silahkan tambahkan function delete($id = NULL) pada direktori app/Controllers.

Ketik kode berikut ini:

public function delete($id = NULL)
{
    // cek id
    $cekid = $this->model->getUser($id);
    
    if(!empty($cekid)){
        // delete data
        $this->model->deleteUser($id);
        $msg = ['message' => 'Deleted user successfully'];
        $response = [
            'status' => 200,
            'error' => false,
            'data' => $msg,
        ];
        return $this->respond($response, 200);
    } else {
        $msg = ['message' => 'Deleted user failed'];
        $response = [
            'status' => 500,
            'error' => false,
            'data' => $msg,
        ];
        return $this->respond($response, 500);
    }
}

Di Codeigniter 4, function delete bisa diakses dengan method GET ataupun DELETE. Jika Anda memilih GET, maka kita tidak perlu lagi menambahkan route baru di app/Config/Routes.php. Namun jika Anda menginginnya penggunaan method DELETE, silahkan tambahkan route di bawah ini pada file app/Config/Routes.php:

$routes->delete('user/delete/(:segment)', 'User::delete/$1'); 

Pemilihan method GET dan DELETE akan berpengaruh pada user service di Flutter nantinya. Melalui tutorial ini, kita sudah sering menggunakan GET, jadi sekali-kali saya akan menggunakan DELETE ya. So, silahkan tentukan pilihannmu juga ya.

Step 3 – Testing API Delete

Silahkan buka Postman dan cobalah masukan URL di bawah ini menggunakan method GET / DELETE. Pastikan Anda sudah menentukan mau menggunakan method apa ya.

localhost:8080/user/delete/22

… atau bisa juga menggunakan URL ini:

 http://localhost/belajar-codeigniter-4/ci4_restapi_flutter/public/index.php/user/delete/22 

Kalau URL ke 2 ini PATH foldernya harus sesuai dengan project Anda ya.

Jika berjalan dengan lancar, hasilnya:

Tutorial CRUD Codeigniter 4 dan Flutter #5 – Delete Data - Uji API

Gambar di atas menunjukan bahwa saya menggunakan method DELETE dan menambahkan route di step sebelumnya pada file Routes.php.

Alhamdulillah, sampai di tahap ini proses crud codeigniter 4 dan flutter proses delete data sudah berhasil. Now, kita masuk ke bagian Flutternya.

Let’s go!

Step 4 – Modifikasi User Service Flutter

Silahkan buka file user_service.dart pada drektori lib/service dan kemudian tambahkan function di bawah ini:

Future deleteUser({int id}) async {
  // ganti dengan method get juga gpph
  final response = await client.delete(
    "$baseUrl/user/delete/$id"
  );
  if (response.statusCode == 200) {
    return 1;
  } else {
    return 0;
  }
}

Nah, pada function di atas, saya coba menggunakan method DELETE. Anda bisa menggunakan method GET jika mau. Bebas, itu pilihan saja.

Step 5 – Modifikasi Screen Detail

Pada part tutorial crud codeigniter 4 dan flutter bagian detail data kita sudah berhasil membuat screen detail. Namun, kita perlu memodifikasi bagian klik deletenya.

Apa yang dimodifikasi?

Lumayan, ada tambahan scaffoldKey, widget SnackBar dan link untuk delete data. So, silahkan modifikasi kode yang lama ke kode yang baru di bawah ini:

import 'package:flutter/material.dart';
import 'package:flutter_crud_ci4/model/user.dart';
import 'package:flutter_crud_ci4/screen/user_edit.dart';
import 'package:flutter_crud_ci4/service/user_service.dart';
import 'package:flutter_crud_ci4/util/capitalize.dart';

class DetailUser extends StatefulWidget {

  // create variabel id untuk menghandle param yang diberikan (wajib ada @required)
  final int id;
  // constructor
  DetailUser({@required this.id, Key key}):super(key: key);

  @override
  _DetailUserState createState() => _DetailUserState();
}

class _DetailUserState extends State<DetailUser> {

  // create variabel untuk menampung User Api Service
  UserApiService apiService;
  // create variabel _user untuk menampung model User
  User _user;
  // scaffold key
  final GlobalKey<ScaffoldState> _scaffoldkey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    // inisialisasi state apiService dengan class UserApiService
    apiService = UserApiService();
    super.initState();
  }

  _showSnackBar(message){
    final snackbar = SnackBar(content: Text(message),);
    _scaffoldkey.currentState.showSnackBar(snackbar);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldkey,
      // header
      appBar: AppBar(
        title: Text("Detail User"),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () => {
            Navigator.pop(context),
          },
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.edit), 
            onPressed: () {
              Navigator.push(context, 
              MaterialPageRoute(builder: (BuildContext context) => FormEditUser(
                user: _user,
                id: widget.id),
                ),
              );
            }
          ),
          IconButton(
            icon: Icon(Icons.delete), 
            onPressed: () {
              final onSuccess = (Object obj) async {
                _showSnackBar("Deleted user successfully");
                await Future.delayed(Duration(seconds: 2)).then((Object obj) => Navigator.pop(context));
              };
              final onError = (Object obj) => _showSnackBar("Deleted user failed");
              apiService.deleteUser(id: widget.id).then(onSuccess).catchError(onError);
            },
          ),
        ],
      ),
      // body
      body: Center(
        child: FutureBuilder<User>(
          // panggil function getUserBy(int id)
          future: apiService.getUserBy(widget.id),
          builder: (context, snapshot) {
            // jika connection none atau data = null
            if (snapshot.connectionState == ConnectionState.none &amp;&amp;
                snapshot.hasData == null) {
              return LinearProgressIndicator();
            
            // jika connection berhasil
            } else if (snapshot.connectionState == ConnectionState.done) {
              
              // tampung data dari server
              _user = snapshot.data;

              // jika data ada / tidak null
              if(_user.id != 0){

                return ListView(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
                      child: Image.asset(
                        'assets/images/${_user.gender}.png',
                        width: 150.0,
                        height: 150.0,
                      ),
                    ),
                    ListTile(
                      leading: Icon(Icons.account_box),
                      title: Text(_user.fullName),
                      subtitle: const Text('Nama'),
                    ),
                    ListTile(
                      leading: Icon(Icons.phone),
                      title: Text(_user.phone),
                      subtitle: const Text('No.Hp'),
                    ),
                    ListTile(
                      leading: Icon(Icons.label),
                      title: Text(capitalize(_user.gender)),
                      subtitle: const Text('Jenis Kelamin'),
                    ),
                    ListTile(
                      leading: Icon(Icons.school),
                      title: Text(_user.grade.toUpperCase()),
                      subtitle: const Text('Jenjang'),
                    ),
                  ],
                );
              // jika data null / tidak ada
              } else {
                return Text("User Not Found");
              }
            
            // tampilkan container kosong jika terjadi hal lainnya
            } else {
              return Center(
                child: Container(),
              );
            }
          }
        ),
      ),
    );
  }
}

Simpan.

Step 6 – Testing Flutter

Pada direktori project Flutter, silahkan ketik perintah berikut ini untuk menjalankan project:

flutter run

Jika berjalan dengan lancar, cobalah untuk “tap” pada list data user di homepage, kemudian klik icon delete.

Jika berhasil, maka tampilannya seperti ini (muncul pesan snackbar deleted user successfully dan akan back ke halaman homepage):

Tutorial CRUD Codeigniter 4 dan Flutter #5 – Delete Data - Final

Apa Selanjutnya?

Alhamdulillah, seri tutorial CRUD Codeigniter 4 dan Flutter diakhiri dengan pembahasan delete data. Saya bersyukur bisa sampai di tahap ini.

… tapi jangan puas dulu, sebab kemungkinan besar saya akan membahas AUTH JWT pada Codeigniter 4 dan Flutter. So, subscribe website Ilmu Coding atau jika muncul pesan “Tambahkan Ilmu Coding ke Layar Utama”, iya kan saja.

… dengan begitu Anda akan terus mendapatkan update tutorial dari Ilmu Coding.

Oh iya, saya sampai lupa. Buat yang ingin lihat commit terbaru dari tutorial ini di Github, silahkan cek link di bawah ini:

New Commit – Part 5 Delete Data

Semoga tutorial ini bermanfaat luas. Aamiin.

Wildan Fuady Penulis buku motivasi dan inspirasi Islami, Web Developer dan Mobile App Developer.

2 Replies to “Tutorial CRUD Codeigniter 4 dan Flutter #5 – Delete Data”

    1. Sama-sama dan terima kasih banyak sudah berkunjung. Please share dan baca tutorial lainnya ya.

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.