Membuat Register Form di Flutter


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

Subscribe

Related articles

Tips Kolaborasi Efektif antara UI/UX Desainer dan Pengembang

Kerja sama yang solid antara UI/UX desainer dan pengembang...

Aturan Penting yang Harus Dipatuhi oleh Seorang UI/UX Designer

Desain Antarmuka Pengguna (UI) dan Pengalaman Pengguna (UX) adalah...

Membangun Profil LinkedIn yang Mengesankan untuk UI/UX Designer

Dalam era digital yang semakin maju, LinkedIn telah menjadi...

Meningkatkan Karir Anda dengan Sertifikasi Google UX

Dalam dunia yang semakin terhubung secara digital, pengalaman pengguna...

Perjalanan Seorang Intern UI/UX Desainer di Udacoding

Sebagai seorang mahasiswa yang bersemangat dan bercita-cita tinggi di...

LEAVE A REPLY

Please enter your comment!
Please enter your name here