Tutorial Membuat Login dan Register Flutter Menggunakan Database Lokal

Oleh Saepul Akbar 01.53 Posting Komentar

Login dan Register Flutter Menggunakan Database Lokal

Berikut adalah panduan untuk membuat sistem login dan register di aplikasi Flutter menggunakan database lokal. Dalam tutorial ini, kita akan menggunakan SQLite sebagai database lokal untuk menyimpan data pengguna, dan sqflite untuk mengakses SQLite di Flutter.

1. Persiapan Proyek Flutter

Buat Proyek Flutter Baru: Di terminal, buat proyek baru dengan perintah:
```
bash

flutter create login_register_demo_local
```
Tambahkan Dependency Sqflite dan Path Provider: Buka file pubspec.yaml dan tambahkan sqflite dan path_provider untuk membantu pengelolaan file database.
```
yaml
  
dependencies:  sqflite: ^2.0.0
  path_provider: ^2.0.12
```
Install Dependencies: Jalankan perintah berikut untuk menginstal dependency:
```
bash

flutter pub get
```

2. Setup Database SQLite

Buat Model User: Buat file user.dart di folder lib untuk mendefinisikan model User:

dart

class User {
  int? id;
  String username;
  String password;

  User({this.id, required this.username, required this.password});

  // Convert a User into a Map.
  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'username': username,
      'password': password,
    };
  }

  // Convert a Map into a User.
  factory User.fromMap(Map<String, dynamic> map) {
    return User(
      id: map['id'],
      username: map['username'],
      password: map['password'],
    );
  }
}

Buat Database Helper: Buat file database_helper.dart untuk mengelola operasi CRUD di database:

dart

import 'dart:async';
import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';
import 'user.dart';

class DatabaseHelper {
  static final DatabaseHelper _instance = DatabaseHelper._internal();
  factory DatabaseHelper() => _instance;
  DatabaseHelper._internal();

  static Database? _database;

  Future<Database> get database async {
    if (_database != null) return _database!;
    _database = await _initDatabase();
    return _database!;
  }

  Future<Database> _initDatabase() async {
    String path = join(await getDatabasesPath(), 'users.db');
    return openDatabase(
      path,
      onCreate: (db, version) {
        return db.execute(
          "CREATE TABLE users(id INTEGER PRIMARY KEY, username TEXT, password TEXT)",
        );
      },
      version: 1,
    );
  }

  Future<int> registerUser(User user) async {
    final db = await database;
    return await db.insert('users', user.toMap());
  }

  Future<User?> loginUser(String username, String password) async {
    final db = await database;
    List<Map<String, dynamic>> maps = await db.query(
      'users',
      where: 'username = ? AND password = ?',
      whereArgs: [username, password],
    );
    if (maps.isNotEmpty) {
      return User.fromMap(maps.first);
    }
    return null;
  }
}

3. Membuat UI Login dan Register

Buat dua halaman untuk login dan register.

Login Page: Buat file baru login_page.dart dengan UI sederhana untuk login:

dart

import 'package:flutter/material.dart';
import 'database_helper.dart';
import 'home_page.dart';

class LoginPage extends StatelessWidget {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Login")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: usernameController,
              decoration: InputDecoration(labelText: "Username"),
            ),
            TextField(
              controller: passwordController,
              decoration: InputDecoration(labelText: "Password"),
              obscureText: true,
            ),
            ElevatedButton(
              onPressed: () => loginUser(context),
              child: Text("Login"),
            ),
            TextButton(
              onPressed: () {
                Navigator.pushNamed(context, '/register');
              },
              child: Text("Belum punya akun? Register"),
            ),
          ],
        ),
      ),
    );
  }

  void loginUser(BuildContext context) async {
    final username = usernameController.text.trim();
    final password = passwordController.text.trim();
    final dbHelper = DatabaseHelper();

    final user = await dbHelper.loginUser(username, password);
    if (user != null) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomePage(user: user)),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("Login gagal")),
      );
    }
  }
}

Register Page: Buat file baru register_page.dart untuk registrasi pengguna baru:

dart

import 'package:flutter/material.dart';
import 'database_helper.dart';
import 'user.dart';

class RegisterPage extends StatelessWidget {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Register")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: usernameController,
              decoration: InputDecoration(labelText: "Username"),
            ),
            TextField(
              controller: passwordController,
              decoration: InputDecoration(labelText: "Password"),
              obscureText: true,
            ),
            ElevatedButton(
              onPressed: () => registerUser(context),
              child: Text("Register"),
            ),
          ],
        ),
      ),
    );
  }

  void registerUser(BuildContext context) async {
    final username = usernameController.text.trim();
    final password = passwordController.text.trim();
    final dbHelper = DatabaseHelper();

    final newUser = User(username: username, password: password);
    await dbHelper.registerUser(newUser);
    Navigator.pop(context); // Kembali ke halaman login
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text("Registrasi berhasil")),
    );
  }
}

4. Halaman Utama Setelah Login

Buat file home_page.dart untuk menampilkan halaman utama setelah login:

dart

import 'package:flutter/material.dart';
import 'user.dart';

class HomePage extends StatelessWidget {
  final User user;

  HomePage({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Home")),
      body: Center(
        child: Text("Selamat datang, ${user.username}!"),
      ),
    );
  }
}

5. Routing Halaman

Atur routing di main.dart untuk mengarahkan ke halaman login dan register:

dart

import 'package:flutter/material.dart';
import 'login_page.dart';
import 'register_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login Register Demo',
      initialRoute: '/login',
      routes: {
        '/login': (context) => LoginPage(),
        '/register': (context) => RegisterPage(),
      },
    );
  }
}

6. Menjalankan Aplikasi

Setelah semua selesai, jalankan aplikasi dengan perintah:

bash

flutter run

7. Penjelasan Singkat

DatabaseHelper: Kelas ini menangani semua operasi yang terkait dengan SQLite, seperti registerUser dan loginUser.
User Model: Berisi struktur data pengguna dan fungsi konversi toMap dan fromMap untuk penyimpanan dan pengambilan data.
UI: Halaman login (LoginPage) dan register (RegisterPage) memungkinkan pengguna memasukkan username dan password, memanggil fungsi di DatabaseHelper untuk validasi.

Sekarang, Anda telah berhasil membuat aplikasi login dan register menggunakan database lokal dengan SQLite di Flutter.

Pemrograman dan Teknologi