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:
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:
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 …
