Baiklah ya, setelah kita membuat UI static WhatsApp. Kita sekarang akan belajar bagaimana menampilkan data yang dinamis, ada perubahan-perubahan secara konstan.
Pada bagian ini kita akan menampilkan dinamis untuk CHAT. Bagaimana langkah-langkahnya, yuk simak dengan teliti 😁
Pertama yang perlu dipersiapkan awalnya adalah kalian sudah memahami dasar-dasar dari basis data MySQL dan penggunaan phpMyAdmin sebagai RDBMS-nya, data JSON kemudian sudah memahasi dasar menampilkan data dari MySQL dengan pemrograman PHP.
Requirements :
- Basic Flutter
- MySQL
- PHP
- JSON
Di postingan ini, kita sudah belajar membuat UI-nya dan menghasilkan tampilan :
Di folder projek kita itu, kita buka file pubspec.yaml dan di baris ke 31 kita akan menemukan tulisan :
dependencies:
Tambahkan package / dependencies http sebagai jembatan komunikasi Flutter dan PHP :
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
http: ^0.13.5
flutter:
sdk: flutter
🛈Pastikan baris letak penulisan dependencies satu baris lulus dengan tulisan flutter : dibawahanya.
( Package / dependencies bahasa Flutter dapat di cek di web pub.dev )
Kemdian dibawah class state :
class _(ClassKita)State extends State<ClassKita> {
tambahkan variabel dengan nama chats dengan tipe data List[], tampilannya menjadi :
class _MyHomePageState extends State<MyHomePage> {
List chats = [];
Variabel ini akan kita gunakan sebagai penampung data yang kita ambil dari MySQL dengan bantuan bahasa PHP.
Setelah itu kita buat sebuah fungsi dengan nama _getChats() tipe void yang nantinya akan memanggil file PHP dengan bantuan Uri.http() dan http.get() :
Future<void> _getChats() async {
}
Lengkapnya :
Future<void> _getChats() async {
// ambil data chats
var url = Uri.http("localhost", "/whatsapp/chats.php", {'q': '{http}'});
}
Terlihat ada baris perintah untuk mengakses lokasi file PHP dengan nama chats.php ( file-nya belum kita buat ). Karena kita menuliskan alamatnya localhost, maka file chats.php ini kita buat dan simpan di dalam folder localhost ( C:\xampp\htdocs\whatsapp )
Sekarang kita coba buat folder whatsapp di localhost ( C:\xampp\htdocs\ ), kemudian buat file baru dengan nama chats.php.
Buka file chats.php, kita isi dengan kode berikut :
<?php
$db = mysqli_connect("localhost", "root", "", "db_wa");
header("Content-Type: application/json; charset=utf-8");
$query = $db->query("SELECT * FROM tb_chats");
$result = array();
while($data = $query->fetch_array()) {
$result[] = $data;
}
echo json_encode($result);
?>
Kita mengambil data dari MySQL lalu dengan perintah :
echo json_encode($result);
kita tampilkan data tersebut dengan format JSON.
Oiya, jangan lupa kita buat dulu basis data dan tabelnya via phpMyAdmin, buka tautan localhost/phpmyadmin di browser :
Kemudian buat basis data dengan nama db_wa dan tabel dengan nama tb_chats. Struktur dari tabel dapat dilihat dibawah ini :
Tambahkan data 1 atau dua data ke dalam tabel tersebut sebagai contoh. Hasilnya :
Kita kembali lagi ke baris kode :
Future<void> _getChats() async { }
Lengkapi fungsi _getChats() tersebut sehingga menjadi :
Future<void> _getChats() async {
// set url / alamat server dengan Uri.http
var url = Uri.http("localhost", "/whatsapp/chats.php", {'q': '{http}'});
// ambil data dari url ( Uri.http )
//lalu simpan di variabel 'response'
var response = await http
.get(url, headers: {"Access-Control-Allow-Methods": "POST, OPTIONS"});
// jika pengambilan data sukses,
//isikan data tersebut ke dalam variabel chats
if (response.statusCode == 200) {
setState(() {
// isikan data yang telah diambil dengan perintah setState
chats = json.decode(response.body);
// lakukan debug untuk menampilkan data,
//hasilnya muncul di terminal
print(chats);
});
} else {
throw Exception('Data gagal di ambil!');
}
}
Pertama kita buat url-nya sebagai jalan untuk mengakses file php ( chats.php ) tadi. Kemudian dengan variabel response kita menunggu respon saat mengakses file chats.php. Nah dilanjutkan dengan perintah if() kita cek, jika respon yang diberikan 200 maka responnya berstatus 'Berhasil', kemudian kita simpan respon JSON tadi ke dalam variabel chats melalui perintah json.decode() :
chats = json.encode(response.body);
Jika respon yang dihasilkan bukan 200 maka otomatis akan menjalankan perintah :
throw Exception('Data gagal di ambil!');
Kemudian kita buat initState, untuk inisialisasi data awal sebelum menampilkan UI. Dan tempat kita menjalankan fungsi _getChats() agar datanya terambil terlebih dahulu sebelum UI dipanggil.
@override
void initState() {
_getChats();
super.initState();
}
Sip! Sampai sini kita tinggal memanggil datanya yang menyesuaikan UI kita.
Di bagian body: TabBarView() kita ubah menjadi :
body: TabBarView(
children: [
ListView.builder(
shrinkWrap: true,
itemCount: chats.length,
itemBuilder: (context, index) {
return
InkWell(
child: ListTile(
leading: Icon(Icons.person),
title: Text(chats[index]["nama"]),
subtitle: Text(chats[index]["chat"]),
),
onTap: () {
print("Chat di tekan!");
},
);
},
)
⚠ NB :
Hanya bagian tab CHATS
Di bagian Terminal VS Code, akan muncul keterangan data yang berhasil di ambil. Ini tampil karena kita menggunakan fungsi print() di dalam initState() sebagai debug awal aplikasi di jalankan.
Kemudian hasinya :
Coba tambahkan baris data baru di tabel tb_chats, kemudian kita lakukan restart di terminal. Maka secara dynamic / otomatis datanya muncul di tab screen CHATS kita 😇😍😁
Tags:
Flutter