Skip to content

5. Register Proses

Setelah tampilan login & register sudah dibuat langkah selanjutnya adalah kita akan membuat proses registernya menggunakan API yang nanti disediakan.

1. Persiapan Proses API

Langkah yang pertama sebelum kita menerapkan proses ke tampilan kita, kita harus mempunyai API terlebih dahulu dalam hal ini untuk API nya sudah disediakan di Github. Silahkan di clone terlebih dahulu dan kalau sudah lakukan beberapa hal berikut ini :

  1. Buatlah database dengan nama travel pada laptop masing - masing
  2. Jalankan npm i pada API yang sudah di clone
  3. Jalankan apinya dengan cara npm run start:dev

  4. Jalankan aplikasi postman, import file travel.postman_collection.json yang berada pada project API

    Alt text

  5. Buka kembali cmd / terminal dan ketikan ipconfig. Jika berhasil tampilannya akan muncul seperti ini :

    Alt text

    Keterangan

    • Setiap laptop akan berbeda ipnya
    • Copy ip yang IPv4 address 10.100.200.26
    • Jalankan pada browser / postman dengan url 10.100.200.26:457. 457: adalah port dari apinya
    • Jika berhasil akan menampilkan kata Welcome to API Travel APP!
    • Kenapa disini kita tidak menggunakan localhost karena localhost yang berada pada laptop / komputer kita tidak terdeteksi di emulator / device pada saat kita menjalankan flutter maka dari itu diperlukannya sebuah IP untuk mengakses API tersebut
    • Url ini juga selain dapat dibuka di emulator / device bisa juga dibuka dikomputer / laptop lain (yang mempunyai jaringan wifi yang sama)
    • Pada saat menjalankan flutter API jangan di stop jika laptop mengalami lag atau semacamnya bisa menggunakan url dari teman dekat yang mempunyai jaringan yang sama

  6. Install http,flutter_dotenv,awesome_dialog pada package flutter

2. Membuat Model

Sebelum membuat model kita harus menjalankan API nya terlebih dahulu, silahkan buka postman lalu jalankan API yang berada di dalam folder auth > register,metode post, dan masukkan data - datanya seperti nama, email, password, konfimasiPassword gambar dibawah ini:

Alt text

Dari hasil api tersebut copy hasil response dari api lalu silahkan masuk ke website app.quicktype.io

Alt text
1. Pastekan response API di point ke 1 pada gambar
2. Ubah nama model sesuai dengan API tersebut
3. Ubah Language menjadi dart
4. Copy Code
5. Pada folder model buat 2 buah file baru dengan nama model.dart & register.dart
6. Pastekan kode yang sudah di copy pada register.dart

Setelah itu kita akan membuat file model.dart ini sebagai file induk dari file model - model yang lainnya.

model.dart
import 'dart:convert';

part "register.dart";

Lalu selanjutnya pada register.dart ubah import dart convertnya menjadi part:

register.dart
part of "model.dart";

Register registerFromJson(String str) => Register.fromJson(json.decode(str));

String registerToJson(Register data) => json.encode(data.toJson());

Keterangan

  • quicktype : website yang digunakan untuk menggenerate json menjadi model
  • part : digunakan untuk file yang ditunjuk sebagai induk dari file - file lain
  • part of : digunakan untuk file yang ditunjuk sebagai anak
  • Keuntungan menggunakan part adalah pada saat kita ingin memanggil model yang diingikan kita tidak perlu repot - repot lagi memanggil file modelnya cukup mengimport induknya maka anak - anaknya bisa terpanggil juga. Lalu juga dengan menggunakan part kita tidak perlu lagi menggunakan import pada anak - anaknya cukup pada induknya saja

quicktype memang akan menggenerate data API kita cuman ada beberapa hal yang harus kita pahami contohnya adalah penamaan class yang bisa membuat Ambigu (sama seperti widget / nama yang lainnya) maka dari itu kita harus merubah class tersebut jika kita melihatnya :

Alt text

Ubahlah menjadi seperti ini :

register.dart
part of "model.dart";

Register registerFromJson(String str) => Register.fromJson(json.decode(str));

String registerToJson(Register data) => json.encode(data.toJson());

class Register {
    String status;
    String message;
    DataRegister data;

    Register({
        required this.status,
        required this.message,
        required this.data,
    });

    factory Register.fromJson(Map<String, dynamic> json) => Register(
        status: json["status"],
        message: json["message"],
        data: DataRegister.fromJson(json["data"]),
    );

    Map<String, dynamic> toJson() => {
        "status": status,
        "message": message,
        "data": data.toJson(),
    };
}

class DataRegister {
    DataRegister();

    factory DataRegister.fromJson(Map<String, dynamic> json) => DataRegister(
    );

    Map<String, dynamic> toJson() => {
    };
}

3. Membuat Proses

Setelah kita membuat model selanjutnya kita akan membuat prosesnya untuk membaca APInya. Buat file baru pada folder controller dengan nama authController.dart

Kita akan mulai mengatur flutter_dotenv terlebih dahulu.
1. Buat file baru dengan nama .env(pada folder project masing - masing BUKAN di folder lib)

.env
IP=http://???.???.???.???:457
2. Pada pubspec.yaml atur agar .env bisa dibaca
pubspec.yaml
assets:
    - assets/img/
    - .env
3. Pada main.dart ubah bagian runApp nya untuk jalankan flutter_dotenv
main.dart
Future main() async{
    await dotenv.load(fileName: ".env");
    runApp(MyApp());
}

Lalu pada bagian authControllernya masukkan kode ini:

authController.dart
import "dart:convert";
import "package:flutter_dotenv/flutter_dotenv.dart";
import "package:http/http.dart" as http;
import "package:travel_app/model/model.dart";

class AuthController {
  Future registerProses(
      String nama, String email, String password, String konfirmasi) async {
    String url = "${dotenv.env['IP']}/auth/register";
    Uri urlData = Uri.parse(url);

    Map data = {
      "nama": nama,
      "email": email,
      "password": password,
      "konfirmasiPassword": konfirmasi
    };

    var body = json.encode(data);

    final respon = await http.post(urlData,
        headers: {"Content-Type": "application/json"}, body: body);

    if (respon.statusCode == 201) {
      Register dataRes = registerFromJson(respon.body.toString());
      return dataRes;
    } else {
      return null;
    }
  }
}

Keterangan

  • Import beberapa kebutuhan untuk proses seperti flutter_dotenv, http, dan kita panggil modelnya
  • Agar terstruktur kita dapat membuat buat class AuthController
  • Future hampir mirip dengan function sama dengan apa yang kita gunakan di main.dart
  • Pada registerProses membutuhkan data nama, email, password, konfimasiPassword
  • dotenv.env['IP'] : memanggil variabel env IP
  • Uri urlData = Uri.parse(url) : karena http tidak bisa membaca string jadi kita harus ubah url (string) menjadi Uri
  • json.encode : membuat data map menjadi json agar bisa dikirim menggunakan http
  • await http.post : karena proses http membutuhkan waktu maka disini harus diberikan await / proses menunggu prosesnya selesai. http.post proses pengiriman data ke api dengan metode post yang membutuhkan beberapa parameter seperti url yang berbentuk Uri, body (data yang akan dikirim), dan header (jenis data yang dikirim)
  • respon.statusCode == 201 : mengecek apabila data response yang didapat status codenya adalah 201 maka dia akan menjalakan prosesnya. 201 ini bisa dilihat pada postman
  • Register dataRes = registerFromJson(respon.body.toString()) : membuat variabel yang bertipe register yang isinya adalah mengubah data response yang berupa json (mentah / belum bisa diproses) menjadi data Register yang sudah kita buatkan modelnya

4. Implementasi Proses Pada Tampilan

Pada tampilan register.dart kita akan menjalankan proses registernya. Masukkan kode ini diatas widget build

register.dart
TextEditingController name = TextEditingController(),
      email = TextEditingController(),
      password = TextEditingController(),
      konfirmasiPassword = TextEditingController();
bool loading = false;
saveRegis() {
    setState(() {
      loading = true;
    });
    var dt = AuthController()
        .registerProses(
            name.text, email.text, password.text, konfirmasiPassword.text)
        .then((value) {
      if (value != null) {
        setState(() {
            loading = false;
        });
        AwesomeDialog(
          context: context,
          title: "Success",
          desc: "Register Berhasil",
          dialogType: DialogType.success,
          btnOkOnPress: () => Navigator.pushNamedAndRemoveUntil(
              context, "/login", (route) => false),
        ).show();
      } else {
        setState(() {
            loading = false;
        });
        AwesomeDialog(
          context: context,
          title: "Failed",
          desc: "Register Gagal",
          dialogType: DialogType.error,
        ).show();
      }
    });
}
Pada textfield kita akan menambahkan controller yang telah dibuat sebelumnya:

Text field pada register
Container(
  margin: EdgeInsets.only(bottom: tinggi * 0.04),
  child: TextField(
    controller: name,
    decoration: InputDecoration(
        label: Text("Name"),
        hintText: "Jhon Doe",
        focusedBorder: const OutlineInputBorder(
            borderSide: BorderSide(
                color: Color.fromARGB(255, 252, 211, 64)),
            borderRadius: BorderRadius.all(Radius.circular(15))),
        border: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(15)))),
  ),
),

Lalu lakukan hal yang sama pada password. Pada tombol jalankan function yang sudah dibuat :

tombol submit register
ElevatedButton(
  style: ButtonStyle(
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10))),
      backgroundColor: MaterialStateProperty.resolveWith(
          (states) => Color.fromARGB(255, 252, 211, 64))),
  onPressed: () => saveRegis(),
  child: loading
      ? Center(child: CircularProgressIndicator())
      : Text("Submit",
          style: GoogleFonts.poppins(
              textStyle: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.black))))

Keterangan

  • AuthController().registerProses() : memanggil proses register yang berada di authcontroller
  • then : adalah sebuah proses jika prosesnya selesai dan mempunyai nilai kembali maka akan di simpan kedalam value. valuenya disini kita cek kalau mengirimkan data akan menampilkan proses berhasil & apabila tidak mengirimkan data akan menampilkan error
  • Pada tombol submit disini diberikan kondisi dimana jika loading false akan menampilkan text submit dan jika loading true (sedang menjalankan proses) maka akan menampilkan loading