Disini saya membuat aplikasi search list kamus dengan menggunakan PHP & MySQL. Kita akan memanggil data dari database menggunakan IP yang terkoneksi ke PC. Saat membuat aplikasi ini, kita memerlukan beberapa aplikasi:
• Android Studio
• XAMPP
• SublimeText
Langkah-langkah nya sebagai berikut :
1. Buat database terlebih dahulu dengan nama db_searchkamus. Lalu buat tabelnya dengan nama tbl_searchkamus dengan atribut sebagai berikut :
2. Lalu insert datanya sebanyak 5 record.
3. Kemudian buka SublimeText, dan buat folder di htdoc dengan nama ‘searchkamus’ dan ketikkan perintah berikut:
Conn.php :
Get_kamus.php :
4. Kemudian running di browser, http://localhost/searchkamus/Get_kamus.php.
6. Buka pubspec.yaml dan buka di browser pub.dev dan cari kata http
5. Selanjutnya buka aplikasi Android Studio, buat project baru di new flutter project.
7. Tambahkan library berikut:
8. Tambahkan code berikut ini :
Main.dart:
import 'package:flutter/material.dart';
import 'home_kamus.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SearchList Kamus PHP Mysql',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: DataKamusHome(),debugShowCheckedModeBanner: false,
);
}
}
Home_kamus.dart:
import 'dart:developer';
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'detail_kamus.dart';
import 'kamus_model.dart';
class DataKamusHome extends StatefulWidget {
@override
_DataKamusHomeState createState() => _DataKamusHomeState();
}
class _DataKamusHomeState extends State<DataKamusHome> {
List<KamusModel> listData = [], backupList = [];
bool isSearch = false;
Future<List> getData() async {
final responseData =
await http.get("http://172.16.0.12/searchkamus/Get_kamus.php");
return kamusModelFromJson(responseData.body);
}
void search(String query) {
/// ngeset data backup ke data utama
listData = backupList;
if (query.isNotEmpty) {
/// fungsi untuk memfilter data utama sesuai dengan query yang di inputkan
listData = listData
.where((e) => e.kata.toString().toLowerCase().contains(query))
.toList();
}
setState(() {});
}
Icon sr = Icon(Icons.search);
init() async {
final result = await getData();
if (result != null) {
setState(() {
/// memasukan data kedalam list array utama
listData = result;
/// Membuat backup an data kedalam variable baru dari data utama (data copy an)
backupList.addAll(listData);
});
}
}
@override
void initState() {
// TODO: implement initState
super.initState();
init();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: !isSearch
? Text("Kamus Sederhana")
: TextField(
style: TextStyle(color: Colors.white),
onChanged: (query) {
log("quer $query");
// method search
search(query);
},
decoration: InputDecoration(
icon: Icon(
Icons.search,
color: Colors.white,
),
hintText: "Search Here",
hintStyle: TextStyle(color: Colors.white)),
),
actions: <Widget>[
isSearch
? IconButton(
icon: Icon(Icons.cancel),
onPressed: () {
setState(() {
this.isSearch = false;
});
search("");
},
)
: IconButton(
icon: Icon(Icons.search),
onPressed: () {
setState(() {
this.isSearch = true;
});
},
)
],
),
body: ListView.builder(
itemCount: listData?.length ?? 0,
itemBuilder: (ctx, i) {
return new Container(
padding: const EdgeInsets.all(10.0),
child: new Card(
child: ListTile(
leading: Icon(Icons.widgets),
title: new Text(
listData[i].kata,
style: new TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
subtitle: Text(listData[i].arti),
onTap: () {
Navigator.of(context).push(new MaterialPageRoute(
builder: (context) => DetailPageKamus(
listData[i],
)));
},
trailing: new Image.network(
'http://172.16.0.12/searchkamus/gambar/' +
listData[i].gambar,
fit: BoxFit.cover,
height: 60.0,
width: 60.0,
),
),
),
);
}),
);
}
}
Detail_kamus.dart:
import 'package:flutter/material.dart';
import 'package:searchlistphpmysql/kamus_model.dart';
// ignore: must_be_immutable
class DetailPageKamus extends StatefulWidget{
KamusModel listData;
DetailPageKamus(this.listData);
@override
_DetailPageKamusState createState()=> _DetailPageKamusState();
}
class _DetailPageKamusState extends State<DetailPageKamus>{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('${widget.listData.kata}'),
backgroundColor: Colors.greenAccent,
),
body: new ListView(
children: <Widget>[
new Image.network('http://172.16.0.12/searchkamus/gambar/' +widget.listData.gambar),
new Container(
padding: const EdgeInsets.all(32.0),
child: new Row(
children: [
new Expanded(child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Container(
padding: const EdgeInsets.only(bottom: 8.0),
child: new Text('Nama Bunga : '+widget.listData.kata,
style: new TextStyle(fontWeight: FontWeight.bold),
),
),
],
)),
new Icon(Icons.insert_emoticon, color: Colors.red,)
],
),
),
new Container(
padding: const EdgeInsets.all(32.0),
child: new Text(widget.listData.ket,
softWrap: true,
),
)
],
),
);
}
}
Kamus_model.dart:
// To parse this JSON data, do
//
// final kamusModel = kamusModelFromJson(jsonString);
import 'dart:convert';
List<KamusModel> kamusModelFromJson(String str) => List<KamusModel>.from(json.decode(str).map((x) => KamusModel.fromJson(x)));
String kamusModelToJson(List<KamusModel> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class KamusModel {
KamusModel({
this.idKamus,
this.kata,
this.arti,
this.ket,
this.gambar,
});
String idKamus;
String kata;
String arti;
String ket;
String gambar;
factory KamusModel.fromJson(Map<String, dynamic> json) => KamusModel(
idKamus: json["id_kamus"] == null ? null : json["id_kamus"],
kata: json["kata"] == null ? null : json["kata"],
arti: json["arti"] == null ? null : json["arti"],
ket: json["ket"] == null ? null : json["ket"],
gambar: json["gambar"] == null ? null : json["gambar"],
);
Map<String, dynamic> toJson() => {
"id_kamus": idKamus == null ? null : idKamus,
"kata": kata == null ? null : kata,
"arti": arti == null ? null : arti,
"ket": ket == null ? null : ket,
"gambar": gambar == null ? null : gambar,
};
}
Hasil Running :
