Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial CRUD Codeigniter 4 dan Flutter #3 – Detail Data

3 min read

CRUD Codeigniter 4 + Flutter - Detail Data

Tutorial CRUD Codeigniter 4 dan Flutter #3 – Detail Data. Kali ini saya akan melanjutkan pembahasan sebelumnya yaitu detail data.

Sebelum melanjutkan, jika Anda belum membaca dan mempraktikan part ke 2 tentang create data, silahkan kunjungi:

Rekomendasi: Tutorial CRUD Codeigniter 4 dan Flutter #2 – Create Data

Apabila sudah, sekarang kita akan melanjutkan langkah berikutnya. Yaitu membuat halaman create data di Flutter dan mengirimkan data (method POST) melalui REST API Codeigniter 4.

Silahkan ikuti beberapa langkah di bawah ini:

Step 1 – Tambahkan Function getUserBy($id) di Controller

Buka kembali file project Codeigniter 4, kemudian pada file User.php tambahkan kode berikut:

app/Controllers/User.php

public function getUserBy($id)
{
    $data = $this->user->getUser($id);

    $user = [
        'id' => intval($data['id']),
        'fullname' => $data['fullname'],
        'gender' => $data['gender'],
        'grade' => $data['grade'],
        'phone' => $data['phone'] 
    ];       
    return $this->respond($user, 200);   
}

Penjelasan:

Kode di atas berfungsi untuk mengambil data berdasarkan id di table users. Silahkan cek function getUsers($id) di model.

Step 2 – Testing Api untuk Detail dengan Postman

Silahkan ketik URL berikut dengan method GET di Postman:

localhost/belajar-codeigniter-4/ci4_restapi_flutter/public/index.php/user/getUserBy/5 

atau …

localhost:8080/user/getUserBy/5 

Penjelasan:

Angka 5 yang saya sisipkan berdasarkan id yang ada di field table users. Coba cek lagi id / primary key di table users Anda. Siapa tahu berbeda.

Kalau beda?

Sesuaikan saja id-nya dan ganti angka 5 di atas.

Jika berjalan dengan lancar, hasilnya:

crud codeigniter 4 flutter detail data - gambar 1

Step 3 – Tambahkan Function getUserBy(int id) di Api Service

Silahkan buka kembali file user_service.dart yang ada di dalam direktori lib/service.

… kemudian tambahkan kode berikut:

Future<User> getUserBy(int id) async {
  final response = await client.get("$baseUrl/user/getUserBy/$id");
  if (response.statusCode == 200) {
    final data = User.fromJson(json.decode(response.body));
    return data;
  } else {
    return null;
  }
}

Penjelasan:

Pada function ini terdapat baris kode Future<User> dikarenakan output yang akan dikembalikan adalah Model User.

Tak lupa disertakan parameter id untuk dikirimkan ke server dan dicari data user yang sesuai.

getUserBy(int id)

… dan kita akan mengecek apakah status response OK atau bukan. Biasanya kalau oke nilai-nya 200.

Jadi kita buat seperti ini:

if (response.statusCode == 200) {
  final data = User.fromJson(json.decode(response.body));
  return data;
} 

Fungsinya selain untuk mengecek data, juga berfungsi untuk mengembalikan nilai yang didapatkan dari server.

Step 4 – Tambahkan Image Assets

Silahkan buat folder baru bernama assets di direktori project Flutter.

… di dalam folder assets, buat lagi folder bernama images.

Kemudian isi dengan 2 gambar, yaitu pria.png dan wanita.png.

Anda bisa download di mana saja yang Anda suka atau download file asset langsung di link Github pada akhir artikel ini.

Lalu tambahkan kode di bawah ini pada file pubspec.yaml:

assets:
  - assets/images/pria.png
  - assets/images/wanita.png
  - assets/images/sekolah.png 

Bingung? Tenang…

Perhatikan gambar di bawah ini:

Step 5 – Modifikasi File Homepage di Flutter

Silahkan buka kembali file home.dart pada direktori lib/screen, kemudian tambahkan beberapa baris kode berikut pada onTap.

...
...
onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (BuildContext context) => DetailUser(id: user.id, key: ValueKey(user.id))) 
  );
},
...
...

Bingung letaknya di mana?

Coba perhatikan gambar berikut ini:

crud codeigniter 4 flutter detail data - gambar 2

Dapat Anda lihat kurang lebih letaknya ada di baris 67 – 72.

Lanjut?

Yuk …

Step 6 – Buat File Baru untuk Halaman Detail di Flutter

Silahkan buat file baru bernama user_detail.dart dan simpan di direktori lib/screen.

Kemudian ketik kode berikut ini:

import 'package:flutter/material.dart';
import 'package:flutter_crud_ci4/model/user.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;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 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: () {}
          ),
          IconButton(
            icon: Icon(Icons.delete), 
            onPressed: () {},
          ),
        ],
      ),
      // 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 &&
                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(),
              );
            }
          }
        ),
      ),
    );
  }
}

Step 7 – Testing dan Uji Coba

Silahkan jalankan project pada Codeigniter 4 dengan perintah:

php spark serve

… dan pada project Flutter ketik:

flutter run

Jika berjalan dengan lancar, berikut tampilannya (by Video):

Apa Selanjutnya?

Alhamdulillah, tutorial crud codeigniter 4 dan flutter part ke 3 – detail data sudah selesai.

Saya harap, semoga tidak ada error yang dialami oleh teman-teman semuanya.

Jika pun ada, Anda bisa bertanya di kolom komentar atau mau lihat-lihat dulu perubahan source code yang ada di Github (perhatikan commit part 3 nya ya).

Ini linknya: Commit Part 3 – Detail Data

Semoga tutorial ini bermanfaat dan selamat belajar …

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

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.