Integrasi API: Register Akun (POST)

---

Tujuan Pembelajaran

Setelah mengikuti materi ini, siswa mampu: 1. Memahami perbedaan method GET dan POST. 2. Mengirim data Body dalam format JSON ke server. 3. Menangani respon sukses (201 Created) dan gagal (400 Bad Request) dari server. 4. Mengintegrasikan form input Flutter dengan API Service menggunakan URL dari .env.

---

Pertanyaan Pemantik

Kalau kemarin kita "Minta Data" (GET) dari server, sekarang bagaimana caranya kita "Kirim Data" (POST) ke server agar tersimpan di database?

Bayangkan saat kalian mengisi formulir pendaftaran ekskul, kalian mengisi kertas lalu menyerahkannya ke panitia. Di sini, kertas itu adalah Body Request dan panitia adalah Server.

---

1. Persiapan: Endpoint API

Kita akan menggunakan API yang sama dengan sebelumnya, hanya beda "pintu" (Endpoint).

• URL: {{ API_URL }}/register (Ambil dari .env)
• Method: POST
• Body (JSON):

  {
      "name": "Nama Lengkap",
      "email": "email@contoh.com",
      "password": "password123",
      "confirm_password": "password123"
  }
  

• Response Sukses (201 Created):

  "register berhasil"
  

---

2. Membuat Auth Service

Catatan Penting: Pastikan kalian sudah melakukan setup flutter_dotenv di main.dart seperti pada materi sebelumnya (API Get Product). Ingat: Jangan mengubah bagian runApp saat inisialisasi dotenv.

Kita butuh "Pelayan" khusus untuk urusan autentikasi. Kita akan gunakan flutter_dotenv agar URL tidak ditulis hardcode.

1. Buat file baru: lib/services/auth_service.dart.
2. Tulis kode berikut:

import 'dart:convert'; // Untuk jsonEncode
import 'package:http/http.dart' as http;
import 'package:flutter_dotenv/flutter_dotenv.dart';

class AuthService {
  // Ambil URL dari .env
  final String baseUrl = dotenv.env['API_URL'] ?? 'https://online-shop-golang.vercel.app';

  // Fungsi Register
  Future<bool> register({
    required String name,
    required String email,
    required String password,
    required String confirmPassword,
  }) async {
    // 1. Siapkan URL
    var url = Uri.parse('$baseUrl/register');

    // 2. Siapkan Body (Data yang mau dikirim)
    var body = {
      "name": name,
      "email": email,
      "password": password,
      "confirm_password": confirmPassword,
    };

    // 3. Lakukan Request POST
    var response = await http.post(
      url,
      headers: {'Content-Type': 'application/json'}, // Wajib ada
      body: jsonEncode(body), // Ubah Map jadi String JSON
    );

    // 4. Cek Status Code
    if (response.statusCode == 201) {
      return true; // Berhasil
    } else {
      // Gagal (misal email sudah terpakai)
      throw Exception('Gagal Register: ${response.body}');
    }
  }
}

---

3. Integrasi ke Halaman Register

Sekarang kita hubungkan service di atas dengan RegisterPage yang sudah kalian buat antarmukanya (UI).

Langkah-langkah:

1. Buka file lib/pages/register_page.dart (atau sesuaikan nama file kalian).
2. Pastikan kalian sudah punya TextEditingController untuk setiap inputan.
3. Buat fungsi untuk memanggil API saat tombol ditekan.

Contoh Kode (Potongan):

import 'package:flutter/material.dart';
import '../services/auth_service.dart';
// import file login page kalian

class RegisterPage extends StatefulWidget {
  const RegisterPage({super.key});

  @override
  State<RegisterPage> createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  // 1. Controller untuk mengambil teks inputan
  final nameController = TextEditingController();
  final emailController = TextEditingController();
  final passwordController = TextEditingController();
  final confirmPasswordController = TextEditingController();

  // 2. State untuk loading
  bool isLoading = false;

  // 3. Panggil Service
  final AuthService authService = AuthService();

  // Fungsi Register
  void register() async {
    setState(() {
      isLoading = true;
    });

    try {
      // Panggil fungsi di service
      bool success = await authService.register(
        name: nameController.text,
        email: emailController.text,
        password: passwordController.text,
        confirmPassword: confirmPasswordController.text,
      );

      if (success) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text("Register Berhasil! Silakan Login.")),
        );
        Navigator.pop(context); // Kembali ke Login
      }
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(e.toString())),
      );
    } finally {
      setState(() {
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Daftar Akun")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(controller: nameController, decoration: const InputDecoration(labelText: "Nama")),
            TextField(controller: emailController, decoration: const InputDecoration(labelText: "Email")),
            TextField(controller: passwordController, decoration: const InputDecoration(labelText: "Password"), obscureText: true),
            TextField(
              controller: confirmPasswordController, 
              decoration: const InputDecoration(labelText: "Konfirmasi Password"), 
              obscureText: true
            ),
            const SizedBox(height: 20),
            isLoading
                ? const CircularProgressIndicator()
                : ElevatedButton(
                    onPressed: register,
                    child: const Text("Daftar Sekarang"),
                  ),
          ],
        ),
      ),
    );
  }
}

---

4. Analisa Kode

• DotEnv: Kita sekarang memanggil dotenv.env['API_URL'] sehingga jika URL server berubah, kita cukup ganti di file .env saja, tidak perlu cari satu-satu di kodingan.
• Headers: Tetap wajib menyertakan content-type JSON.

---

Tugas Praktikum

1. Pastikan kalian sudah mengerjakan konfigurasi .env di pertemuan sebelumnya.
2. Implementasikan fitur Register ini.
3. Cek apakah data benar-benar masuk? (Coba login setelah register).

---

Tantangan

Tambahkan validasi: - Password minimal 6 karakter. - Format email harus valid (ada @ dan .).