Dalam dunia pemrograman tentu kita membutuhkan yang namanya autentikasi di dalamnya. Apa gunanya!?
Tentu sangat banyak, dengan autentikasi yang disertakan dalam sebuah aplikasi akan membuat aplikasi kita bisa lebih aman data-datanya. Autentikasi layaknya sebuah pintu yang disertai dengan gembok / kunci, siapa yang memiliki kunci baru bisa masuk. Yang tidak memiliki, tentu akan tetap tertahan di depan pintu 😁
Coba bayangkan sebuah rumah / kantor tanpa disertai dengan kunci, semua orang bisa hilir masuk bahkan mengambil barang-barang yang ada di dalamnya bukan ? 😌
Maka dari itu kita perlu menambahkan ekstra pengaman untuk tempat kita ( rumah / kantor ). Yap, langsung saja kita ke poin pentingnya. Membuat sebuah autentikasi sederhana via flutter dengan back end dari php dan mysql.
Selanjutnya flutter create loginpage → masuk di bagian main.dart
Ubah semua bagian class menjadi :
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:http/http.dart' as http;
import 'package:login2/page_home/dashboard.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) {
⚠ Ingat! Samakan dengan kode diatas, class yang StatefulWidget namanya LoginPage sedang yang State<> menjadi _LoginPage. Jangan terbalik!
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: () {
},
child: Text("Masuk")
)
),
)
],
),
),
),
);
🛈 Bagian Scaffold() kita ubah dengan baris-baris kode diatas
KETERANGAN BARIS KODE
Pada baris kode ini :
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
]
)
),
Kita isi bagian body aplikasi kita dengan widget SingleChildScrollView() yang memiliki Container. Dengan properti MediaQuery kita set untuk lebar dan tinggi dari UI menyesuaikan bentuk device.
Lalu properti decoration kita buat dekorasi gradien dengan warna orange, deepOrange, red dan redAccent ( kemerahan )
Dilanjutkan dengan baris kode :
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(),
),
Kita menambahkan widget Column() di dalam Container child: Column().
margin: const EdgeInsets.only(top: 30), digunakan untuk set jarak dengan bagian atas aplikasi 30px
padding: const EdgeInsets.all(10), digunakan untuk set masing-masing jarak widget dalam Column menjadi 10px.
Baris kode :
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) {
},
),
),
Kita gunakan untuk membuat sebuah kolom input email. Widget yang kita gunakan adalah TextField() dengan controller email dan sandi, controller ini perlu kita buat di bagian bawah class State ( kita bahas nanti ).
Properti decoration kita gunakan untuk memberikan label pada kolom input berupa Email / Kata Sandi beserta ikonnya.
Selanjutnya pada bagian baris kode :
Container(
padding: const EdgeInsets.all(10),
margin: const EdgeInsets.only(top: 20),
child: SizedBox(
height: 60, width: double.infinity,
child: ElevatedButton(
onPressed: () {
_login(); // bisa di comment dulu
},
child: Text("Masuk")
)
),
)
Kita membuat sebuah tombol dengan tulisan Masuk. Properti onPressed() memanggil fungsi _login() saat ditekan.
Jangan lupa di bagian :
@override
Widget build(BuildContext context) {
Kita ganti dengan perintah baris kode :
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
statusBarColor: Colors.transparent
));
Dari kode di atas kita mendapatkan sebuah hasil UI :
Selamat yah, sudah berhasil mendesain UI-nya 👏
Sekarang kita lanjut ke bagian selanjutnya, membuat aplikasi berfungsi dengan semestinya → Flutter : Membuat Aplikasi Log In PHP - MySQL ( Bag. 2 )
🛈 INFO PENTING
Jika dalam menjalankan kode kita terdapat error XMLHttpRequest seperti dibawah ini :
Ikuti langkah-langkah di artikel ini untuk menyelesaikannya 😁
