Mangatz pagi ✌
Setelah di artikel sebelumnya kita berhasil membuat UI. Sekarang kita akan next step ke langkah pembuatan bagaimana aplikasi bisa berjalan sebagaimana mestinya.
Cuzz yak, bagian kode kemarin kita buka file main.dart
Nampak baris-baris kode yang jumlahnya kurang lebih 115 baris.
Sudah lumayan banyak yah 😁
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
home: LoginPage(),
)
);
class LoginPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _LoginPage();
}
}
class _LoginPage extends State<LoginPage> {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
statusBarColor: Colors.transparent
));
return Scaffold(
body: SingleChildScrollView(
child: Container(
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height
),
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// ignore: prefer_const_literals_to_create_immutables
colors: [
Colors.orange,
Colors.deepOrangeAccent,
Colors.red,
Colors.redAccent
]
)
),
padding: const EdgeInsets.all(20),
child: Column(
children: [
Container(
margin: const EdgeInsets.only(top: 30),
padding: const EdgeInsets.all(10),
// child: error? Errormsg(Errormsg) : Container(),
),
Container(
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
margin: const EdgeInsets.only(top: 10),
child: TextField(
controller: email,
decoration: const InputDecoration(
label: Text("Email"),
icon: Icon(Icons.person)
),
onChanged: (value) {
},
),
),
Container(
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
margin: const EdgeInsets.only(top: 10),
child: TextField(
controller: password,
obscureText: true,
decoration: const InputDecoration(
label: Text("Kata Sandi"),
icon: Icon(Icons.lock)
),
onChanged: (value) {
},
),
),
Container(
padding: const EdgeInsets.all(10),
margin: const EdgeInsets.only(top: 20),
child: SizedBox(
height: 60, width: double.infinity,
child: ElevatedButton(
onPressed: () {
_login();
},
child: Text("Masuk")
)
),
)
],
),
),
),
);
}
}
Oiya, siapa yang pada bagian controller email dan passwordnya error seperti ini :
Kenapa ya 😐
Ya memang seharusnya error sih, sebab kita memang belum membuat sebuah variabel dengan nama email ataupun password. Jadi error ✌
Nah kita sekarang akan fix bagian error ini, langsung saja kita scroll ka baris kode class _LoginPage extends State<LoginPage> dan tambahi dua baris setelahnya :
class _LoginPage extends State<LoginPage> {
TextEditingController email = new TextEditingController();
TextEditingController password = new TextEditingController();
Fungsinya kita membuat dua buah variabel email dan password dengan tipe TextEditingController, karena 2 input kita berupa TextField(). Nah, sampai sini error tersebut hilang bukan ? 😌
Silahkan jalankan kembali dengan komando flutter run
😁🙌😇
Selanjutnya pada bagian widget button, kita uncomment fungsi untuk memanggil _login() menjadi :
Container(
padding: const EdgeInsets.all(10),
margin: const EdgeInsets.only(top: 20),
child: SizedBox(
height: 60, width: double.infinity,
child: ElevatedButton(
onPressed: () {
_login(); <-- uncomment fungsi ini
},
child: Text("Masuk")
)
),
)
Kemudian dibawah variabel TextEditingController password = new TextEditingController(); kita buat fungsi _login()
TextEditingController password = new TextEditingController();
Future _login() async {
print("\n=======|> memanggil fungsi _login() ");
var url = Uri.http("localhost", "/flutter/login.php", {'q':'{http}'});
var response = await http.post(
url,
body: {
"email" : email.text,
"password" : password.text
});
var data = json.decode(response.body);
if ( data.toString() == "Success") {
print("Data 'log in' ditemukan!\n");
setState(() {
email.clear();
password.clear();
});
Navigator.push(context,
MaterialPageRoute(builder: (context) => Dashboard()
));
} else {
print("Data tidak ada...\n"+data.toString());
setState(() {
password.clear();
});
}
}
💁 Keterangan
Pada baris kode :
Future _login() async {
print("\n=======|> memanggil fungsi _login() ");
var url = Uri.http("localhost", "/flutter/login.php", {'q':'{http}'});
var response = await http.post(
url,
body: {
"email" : email.text,
"password" : password.text
});
Kita membuat sebuah objek fungsi Future _login().
🛈
Future<T> class Null safety
The result of an asynchronous computation.
An asynchronous computation cannot provide a result immediately when it is started, unlike a synchronous computation which does compute a result immediately by either returning a value or by throwing. An asynchronous computation may need to wait for something external to the program (reading a file, querying a database, fetching a web page) which takes time. Instead of blocking all computation until the result is available, the asynchronous computation immediately returns a Future which will eventually "complete" with the result.
Asynchronous programming
To perform an asynchronous computation, you use an async function which always produces a future. Inside such an asynchronous function, you can use the await operation to delay execution until another asynchronous computation has a result. While execution of the awaiting function is delayed, the program is not blocked, and can continue doing other things.
Di dalamnya kita membuat variabel url yang menampung alamat web localhost, yang akan dipanggil dengan fungsi http. Kemudian dengan variabel response kita menunggu respon dari url tadi, yang dikirim dengan tambahan parameter email - password sesuai dengan apa yang kita inputkan dalam TextField().
var data = json.decode(response.body);
Setelah respon di dapatkan dan disimpan dalam variabel response, kita ubah datanya dalam bentuk json.decode dan simpan kembali ke dalam variabel data.
if ( data.toString() == "Success") {
print("Data 'log in' ditemukan!\n");
setState(() {
email.clear();
password.clear();
});
Navigator.push(context,
MaterialPageRoute(builder: (context) => Dashboard()
));
Dengan menggunakan percabangan if, kita cek apakan hasil response di dalamnya ada kata Success ?
Jika ada, maka kita hapus data yang dimasukkan ke dalam TextField() email maupun password. Kemudian dengan baris kode Navigator.push() kita langsung pindah ke halaman Dashboard.
Setelah memanggil Dashboard(), kita perlu membuat file baru dengan nama dashboard.dart. Lalu isi dengan class Dashboard.
} else {
print("Data tidak ada...\n"+data.toString());
setState(() {
password.clear();
});
}
Pada bagian ini, kebalikan dari if yang jika ada kata Success. Maka kita akan tetap di halaman pertama ( main.dart ) dan kolom input password dijadikan kosong.
Sampai sini apakah aplikasi kita sudah berfungsi ?
Ooo belum, ingat tadi kita menuliskan sebuah baris kode :
var url = Uri.http("localhost", "/flutter/login.php", {'q':'{http}'});
Yang artinya kita menggunakan depedency http dan memanggil file login.php di dalam localhost. Apakah kita sudah membuatnya!?
Belum kan 😁
Untuk menggunakan dependency http, kita perlu menjalankan pub di terminal ( lihat disini )
Kemudian kita import package / dependency http, tambahkan baris kode ini di bagian atas aplikasi.
import 'package:http/http.dart' as http;
Bagian import akan menjadi seperti :
Oklah, selesai juga kita di bagian fungsi-fungsinya.
Satu step lagi, yaitu kita membuat file login.php sebagai jembatan antara flutter dan mysql serta mengisi file dashboard.dart setelah berhasil melakukan log in. Tunggu di artikel yang akan datang yah...
