Hai kali ini saya sedang belajar membuat Login di flutter,
Part 1 (Pembuatan halaman layout)
kita buat halamannya, oh iya kita menggunakan route ya ini
login.dart :
Untuk layoutnya seperti berikut :
Code :
import 'package:flutter/material.dart';
class Login extends StatefulWidget {
@override
_Login createState() => _Login();
}
class _Login extends State<Login> {
TextEditingController _usernameController = TextEditingController(text : "ini username");
TextEditingController _passwordController = TextEditingController(text : "ini password");
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello World Page'),
),
body: Center(
child: Container(
width: MediaQuery.of(context).size.width,
height: 400,
margin: EdgeInsets.fromLTRB(16, 0, 16, 0),
padding: EdgeInsets.fromLTRB(24, 16, 24, 16),
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue, // Warna border biru
width: 2, // Ketebalan border (opsional)
),
),
// Widget lain di dalam Container
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(height : 20) ,
TextField(
controller: _usernameController,
decoration: InputDecoration(
labelText: 'Username',
),
),
SizedBox(height : 20) ,
TextField(
controller: _passwordController,
decoration: InputDecoration(
labelText: 'Password',
),
//obscureText: true, // Agar text pada TextField tidak terlihat
),
SizedBox(height : 50) ,
ElevatedButton(
onPressed: () {
// Aksi saat tombol login ditekan
},
child: Text('Login'),
),
],
),
)),
);
}
}
void main() {
runApp(MaterialApp(
home: Login(),
));
}
Part 2 (Pembuatan API)
Untuk API kita buat yang paling sederhana, kita menggunakan method POST
2.A, Konfigurasi API
sebelumnya kita harus melakukan konfigurasi API terlebih dahulu, di sini saya menggunakan PHP untuk codenya seperti berikut.
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header('Content-Type: application/json; charset=utf-8');
include 'conn.php';
$username = $_POST["username"];
$password = $_POST["password"];
//$username = "admin";
//$password = "admin";
$sql = "SELECT * FROM user WHERE username='$username' AND password='$password'";
$result = $connect->query($sql);
// Memeriksa apakah query berhasil dieksekusi dan baris yang dikembalikan lebih dari 0
if ($result && $result->num_rows > 0) {
// Jika ada baris yang cocok, kembalikan true
http_response_code(200);
$data = array(
"status" => "True",
);
echo json_encode($data);
} else {
// Jika tidak ada baris yang cocok, kembalikan false
http_response_code(400);
$data = array(
"status" => "False",
);
echo json_encode($data);
}
Sedangkan untuk database seperti berikut :
Silahkan dicoba menggunakan Postman atau Insomnia, jika sukses harusnya seperti berikut :
Kita sudah berhasil melakukan konfigurasi di sisi beckend, sekarang kita akan mengerjakan di sisi Flutter
untuk code di flutter masih sama dengan tahap 1, namun dengan tambahan bisa mengakses HTTP, untuk code lengkapnya seperti berikut :
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'welcome.dart';
class Login extends StatefulWidget {
@override
_Login createState() => _Login();
}
class _Login extends State<Login> {
TextEditingController _usernameController =
TextEditingController(text: "admin");
TextEditingController _passwordController =
TextEditingController(text: "admin");
Future<void> postDataToApi(String username, String password) async {
// URL endpoint API
String apiUrl =
'http://192.168.43.227/contohAPI/login.php'; // Ganti dengan URL API Anda
// Data yang akan dikirimkan ke API
Map<String, String> body = {
'username': _usernameController.text,
'password': _passwordController.text,
};
try {
// Kirim permintaan POST ke API
var response = await http.post(
Uri.parse(apiUrl),
body: body,
);
// Periksa kode status respons
if (response.statusCode == 200) {
// Jika berhasil, lakukan sesuatu
print('Data berhasil terkirim ke API');
print('Response: ${response.body}');
Map<String, dynamic> responseMap = json.decode(response.body);
String status = responseMap['status'];
print('Status: $status');
print("selesai");
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Ini adalah pesan sementara'),
duration: Duration(seconds: 3),
),
);
//navigateToSecondPage(context);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Welcome()),
);
} else {
// Jika gagal, tampilkan pesan kesalahan
print(
'Gagal mengirim data ke API. Status code: ${response.statusCode}');
}
} catch (e) {
// Tangani kesalahan jika terjadi
print('Terjadi kesalahan: $e');
}
}
// Fungsi untuk berpindah ke halaman kedua
void navigateToSecondPage(BuildContext context) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Welcome()),
);
}
@override
void initState() {
super.initState();
//postDataToApi('username_value', 'password_value');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello World Page'),
),
body: Center(
child: Container(
width: MediaQuery.of(context).size.width,
height: 400,
margin: EdgeInsets.fromLTRB(16, 0, 16, 0),
padding: EdgeInsets.fromLTRB(24, 16, 24, 16),
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue, // Warna border biru
width: 2, // Ketebalan border (opsional)
),
),
// Widget lain di dalam Container
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(height: 20),
TextField(
controller: _usernameController,
decoration: InputDecoration(
labelText: 'Username',
),
),
SizedBox(height: 20),
TextField(
controller: _passwordController,
decoration: InputDecoration(
labelText: 'Password',
),
//obscureText: true, // Agar text pada TextField tidak terlihat
),
SizedBox(height: 50),
ElevatedButton(
onPressed: () {
// Aksi saat tombol login ditekan
postDataToApi('username_value', 'password_value');
},
child: Text('Login'),
),
],
),
)),
);
}
}
void main() {
runApp(MaterialApp(
home: Login(),
));
}
biar lebih nyata, tambahkan halaman welcome.dart :
import 'package:flutter/material.dart';
class Welcome extends StatefulWidget {
@override
_Welcome createState() => _Welcome();
}
class _Welcome extends State<Welcome> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login Success'),
),
body: Center(
child: Text(
'Login SUccess',
style: TextStyle(fontSize: 24.0),
),
),
);
}
}
Sekarang kita bisa mencoba
Bisa kita lihat, kita sudah berhasil melakukan Login dengan Flutter.
