Register form atau formulir pendaftaran adalah suatu bentuk atau formulir yang biasanya ditempatkan di sebuah situs web untuk memungkinkan pengguna membuat akun atau mendaftar sebagai anggota.Tujuan dari formulir pendaftaran ini adalah untuk mengumpulkan informasi dasar dari pengguna sehingga mereka dapat memiliki akses yang lebih luas ke layanan atau fitur tertentu di situs tersebut.
Pada artikel ini saya akan menjelaskan langkah langkah untuk membuat sebuah Halaman Register yang berisi input nama, username, email, dan password
Langkah pertama adalah membuat sebuah database dan sebuah file php untuk melakukan koneksi dengan database tersebut
<?php
include 'koneksi.php';
if($_SERVER['REQUEST_METHOD'] == "POST") {
$response = array();
$username = $_POST['username'];
$password = md5($_POST['password']);
$fullname = $_POST['fullname'];
$email = $_POST['email'];
$cek = "SELECT * FROM users WHERE username = '$username' || email = '$email'";
$result = mysqli_fetch_array(mysqli_query($koneksi, $cek));
if(isset($result)){
$response['value'] = 2;
$response['message'] = "Username atau email telah digunakan";
echo json_encode($response);
} else {
$insert = "INSERT INTO users VALUE(NULL, '$username', '$email', '$password', '$fullname', NOW())";
if(mysqli_query($koneksi, $insert)){
$response['value'] = 1;
$response['message'] = "Berhasik didaftarkan";
echo json_encode($response);
} else {
$response['value'] = 0;
$response['message'] = "Gagal didaftarkan";
echo json_encode($response);
}
}
}
?>Buka postman lalu coba koneksi
Setelah membuat akun menggunakan postman berhasil , langsung saja buat file dart dengan nama register_screen.dart, berikut adalah isi kodenya
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:new_flutter/auth/login_screen.dart';
import 'package:new_flutter/api/api.dart';
import 'package:new_flutter/response/res_register.dart';
class RegisterScreen extends StatefulWidget {
const RegisterScreen({super.key});
@override
State<RegisterScreen> createState() => _RegisterScreenState();
}
class _RegisterScreenState extends State<RegisterScreen> {
TextEditingController fullname = TextEditingController();
TextEditingController username = TextEditingController();
TextEditingController email = TextEditingController();
TextEditingController pass = TextEditingController();
GlobalKey<FormState> key = GlobalKey<FormState>();
bool isRegister = false;
Future<ResRegisterUser?> registerUser() async {
try {
setState(() {
isRegister = true;
});
http.Response res =
await http.post(Uri.parse("${Api.baseUrl}register.php"), body: {
"username": username.text,
"password": pass.text,
"fullname": fullname.text,
"email": email.text
});
ResRegisterUser data = resRegisterFromJson(res.body);
if (data.value == 1) {
setState(() {
isRegister = false;
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (_) => const LoginScreen()),
(route) => false);
});
} else if (data.value == 2) {
setState(() {
isRegister = false;
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("${data.message}")));
});
} else {
setState(() {
isRegister = false;
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("${data.message}")));
});
}
} catch (e, st) {
setState(() {
isRegister = false;
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text(e.toString())));
print("Error ${st.toString()}");
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Form(
key: key,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"REGISTER".toUpperCase(),
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 25),
),
const SizedBox(
height: 35,
),
TextFormField(
controller: fullname,
validator: (val) {
return val!.isEmpty ? "tidak boleh kosong" : null;
},
decoration: InputDecoration(
hintText: "FULLNAME",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: BorderSide.none),
fillColor: Colors.green.withOpacity(0.2),
filled: true),
),
const SizedBox(
height: 8,
),
TextFormField(
controller: username,
validator: (val) {
return val!.isEmpty ? "tidak boleh kosong" : null;
},
decoration: InputDecoration(
hintText: "USERNAME",
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(6)),
filled: true,
fillColor: Colors.green.withOpacity(0.2)),
),
const SizedBox(
height: 8,
),
TextFormField(
controller: email,
validator: (val){
return val!.isEmpty ? "tidak boleh kosong" : null;
},
decoration: InputDecoration(
hintText: "EMAIL",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: BorderSide.none),
fillColor: Colors.green.withOpacity(0.2),
filled: true),
),
const SizedBox(
height: 8,
),
TextFormField(
controller: pass,
validator: (val){
return val!.isEmpty ? "tidak boleh kosong" : null;
},
obscureText: true,
decoration: InputDecoration(
hintText: "PASSWORD",
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(6)),
filled: true,
fillColor: Colors.green.withOpacity(0.2)),
),
const SizedBox(
height: 25,
),
MaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6)),
height: 45,
minWidth: 150,
onPressed: () async{
if(key.currentState!.validate()){
await registerUser();
}
},
color: Colors.green,
textColor: Colors.white,
child: const Text("REGISTER"),
)
],
),
),
),
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(8.0),
child: MaterialButton(
onPressed: (){
Navigator.pushAndRemoveUntil(context,
MaterialPageRoute(builder: (_) => const LoginScreen()),
(route) => false);
},
color: Colors.white,
textColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6),
side: const BorderSide(width: 1, color:Colors.green)),
child: const Text("anda sudah punya akun ? silahkan login"),
),
),
);
}
}
Berikut adalah baris kode yang memanggil file php tadi
await http.post(Uri.parse("${Api.baseUrl}register.php"),Untuk base url nya adalah berikut
static String baseUrl ="http://192.168.0.167/beritadb/";Maka register Form yang dibuat telah siap untuk dipakai
