Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial CRUD Codeigniter 4 dan Flutter #1 – Tampil Data

5 min read

CRUD Codeigniter 4 + Flutter

Halo spark, jika Anda membutuhkan tutorial CRUD codeigniter 4 dan flutter, Anda berada di artikel yang tepat. Ke depannya kita akan menggunakan Codeigniter 4 sebagai back end rest api dan Flutter sebagai mobile app dengan mengambil data dari Codeigniter 4.

Nah, melalui artikel ini, Anda akan belajar:

  1. Membuat rest API CRUD pada Codeigniter 4
  2. Menampilkan data menggunakan Flutter
  3. … dan masih banyak lagi.

Sekarang, jika Anda tertarik untuk membuat CRUD sederhana menggunakan Codeigniter 4 dan Flutter, silahkan ikuti tutorial ini step by step ya.

Let’s go!

Tools yang Perlu Dipersiapkan

  1. Visual Studio Code = https://code.visualstudio.com/download
  2. Codeigniter 4 = https://codeigniter.com/
  3. Flutter = https://flutter.dev/docs/get-started/install
  4. Android Studio = https://developer.android.com/studio

Step 1 – Download Codeigniter 4

Silahkan download file Codeigniter 4 terbaru di situs https://codeigniter.com

Kemudian extact dan simpan di root project Anda. Beri nama ci4_restapi_flutter.

Kebetulan saya menempatkan project di folder berikut:

… dan jika baru pertama kali download silahkan buka project di Visual Studio Code dan rename file env menjadi .env.

Cari kode berikut:

# CI_ENVIRONMENT = production

Ubah menjadi:

CI_ENVIRONMENT = development

Step 2 – Buat Database dan Table Baru

Silahkan buat database bernama ci4_crud_restapi_flutter.

Kemudian ketik perintah php spark migrate:create user di terminal / CMD untuk membuat table users.

Perhatikan gambar berikut:

Kemudian buka file 2020-04-22-233213_user.php (sesuaikan saja dengan nama file yang terbuat di project Anda).

Rekomendasi: Tutorial CRUD Codeigniter 4

Ketik kode berikut:

<?php namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class User extends Migration
{
	public function up()
	{
		$this->forge->addField([
			'id'			=> [
				'type'           	=> 'BIGINT',
				'constraint'     	=> 20,
				'unsigned'       	=> TRUE,
				'auto_increment' 	=> TRUE
			],
			'fullname'       	=> [
				'type'           	=> 'VARCHAR',
				'constraint'     	=> 100,
			],
			'gender' 		=> [
				'type'           	=> 'VARCHAR',
				'constraint' 		=> 15
			],
			'jenjang' 		=> [
				'type'           	=> 'VARCHAR',
				'constraint' 		=> 15
			],
			'phone' 		=> [
				'type'           	=> 'VARCHAR',
				'constraint' 		=> 13,
			]
		]);
		$this->forge->addKey('id', TRUE);
		$this->forge->createTable('users');
	}

	public function down()
	{
		//
	}
}

Kemudian buka .env dan konfigurasi databasenya:

database.default.hostname = localhost
database.default.database = ci4_crud_restapi_flutter
database.default.username = root
database.default.password = 
database.default.DBDriver = MySQLi

… agar table yang kita buat di atas bisa ter-migrate ke database, silahkan ketik perintah php spark migrate.

Perhatikan gambar di bawah ini:

Hasilnya table users akan ter-migrate ke database seperti pada gambar di bawah ini:

Step 3 – Buat Model User

Silahkan buat file baru bernama User_model.php dan simpan di direktori app/Models/User_model.php. Kemudian ketik kode berikut ini:

<?php

namespace App\Models;

use CodeIgniter\Model;

class User_model extends Model {

    protected $table = 'users';

    public function getUser($id = false)
    {
        if($id === false){
            return $this->db->table($this->table)->get()->getResult();
        } else {
            return $this->getWhere(['id' => $id])->getRowArray();
        }  
    }
}

Simpan.

Step 4 – Buat Controller Baru

Silahkan buat controller baru dengan nama User.php dan simpan di app/Controllers/User.php. Kemudian ketik kode berikut ini:

<?php namespace App\Controllers;

use CodeIgniter\RESTful\ResourceController;

use App\Models\User_model;

class User extends ResourceController
{
    protected $format       = 'json';
    protected $modelName    = 'App\Models\User_model';

    public function __construct()
    {
        $this->user = new User_model;
    }

	public function index()
	{
        $data = $this->user->getUser();

        foreach ($data as $row) { 

            $user[] = [
                'id' => intval($row->id),
                'fullname' => $row->fullname,
                'gender' => $row->gender,
                'grade' => $row->grade,
                'phone' => $row->phone 
            ];
            return $this->respond($user, 200);
        
        }	
    }
} 

Simpan.

Step 5 – Compiling dan Testing

Silahkan aktifkan web server yang Anda gunakan (saya pakai laragon), aktifkan apache dan mysql. Kemudian jalankan perintah php spark serve untuk menjalankan project Codeigniter 4 melalui terminal atau cmd.

Perhatikan gambar berikut:

Untuk menampilkan rest api yang kita buat silahkan insert beberapa data secara manual terlebih dahulu di database untuk uji coba saja.

Silahkan insert secara manual fullname, gender, grade, dan phone terlebih dahulu.

Jika sudah, kita bisa membuka software postman untuk menguji rest api sudah berjalan dengan baik atau belum.

Anda bisa menggunakan 2 URL berikut ini:

localhost:8080/user

atau

localhost/belajar-codeigniter-4/ci4_restapi_flutter/public/index.php/user

Untuk URL yang ke 2 silahkan sesuaikan saja dengan path folder penyimpanan Anda.

Hasilnya jika di buka melalui Postman:

crud codeigniter 4 dan flutter bagian 2

Jika dibuka pada URL ke 2:

crud codeigniter 4 dan flutter bagian 1

Step 6 – Create Flutter Project

Sekarang saatnyalah kita membuat project menggunakan Flutter.

Apabila Anda belum menginstallnya, silahkan ikuti petunjuk installasi di https://flutter.dev/docs/get-started/install

Jika sudah, silahkan cek kelengkapan installasi melalui perintah flutter doctor.

Semuanya harus sudah tercentang dengan baik. Perhatikan gambar di bawah ini:

crud codeigniter 4 dan flutter bagian 6

Jika semua sudah lengkap, ketik command berikut untuk membuat project Flutter baru:

flutter create --org=com.ilmucoding --androidx --description="Tutorial CRUD Codeigniter 4 dan Flutter" flutter_crud_ci4

Anda bisa mengubah / memodifikasi setiap kata yang saya cetak tebal.

Coba jalankan dulu file project dengan mengetik perintah flutter run.

Perhatikan gambar berikut:

crud codeigniter 4 dan flutter bagian 5

Tunggu sampai installasi selesai.

Jika berhasil akan muncul tampilan berikut ini:

Step 7 – Tambahkan Package Http

Silahkkan buka file pubspec.yaml yang ada di dalam direktori flutter_crud_ci4/pubspec.yaml.

Tambahkan depedencieshttp: ^0.12.0+4 tepat di bawah cupertino-icons.

Seperti ini:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  http: ^0.12.0+4

Kemudian simpan.

Step 8 – Buat Struktur Project dan Source Code Flutter

Pertama, silahkan buat struktur project seperti ini berikut dengan nama-nama file yang ada di dalamnya:

crud codeigniter 4 dan flutter bagian 4

user.dart

import 'dart:convert';


class User {
  static const genders = ['pria', 'wanita'];
  static const grades = ['tk', 'sd', 'smp', 'sma'];

  int id;
  String fullName;
  String gender;
  String grade;
  String phone;

  User({this.id, this.fullName, this.gender, this.grade, this.phone});

  factory User.fromJson(Map<String, dynamic> map) {
    return User(
      id: map["id"], 
      fullName: map["fullname"], 
      gender: map["gender"], 
      grade: map["grade"],
      phone: map["phone"]
    );
  }

  Map<String, dynamic> toJson() {
    return {
      "id": id, 
      "fullname": fullName, 
      "gender": gender, 
      "grade": grade,
      "phone": phone
    };
  }

  @override
  String toString() {
    return 'User{id: $id, fullname: $fullName, gender: $gender, grade: $grade, phone: $phone}';
  }
}

List<User> userFromJson(String jsonData) {
  final data = json.decode(jsonData);
  return List<User>.from(data.map((item) => User.fromJson(item)));
}

String userToJson(User data) {
  final jsonData = data.toJson();
  return json.encode(jsonData);
}

user_list.dart

import 'package:flutter/material.dart';
import 'package:flutter_crud_ci4/model/user.dart';
import 'package:flutter_crud_ci4/service/user_service.dart';
import 'package:flutter_crud_ci4/util/capitalize.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  UserApiService apiService;

  @override
  void initState() {
    super.initState();
    apiService = UserApiService();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Homepage"),),
      body: FutureBuilder(
        future: apiService.getUsers(),
        builder: (BuildContext context, AsyncSnapshot<List<User>> snapshot) {
          if (snapshot.hasError) {
            return Center(
              child: Text(
                  "Something wrong with message: ${snapshot.error.toString()}"),
            );
          } else if (snapshot.connectionState == ConnectionState.done) {
            List<User> users = snapshot.data;
            return _buildListView(users);
          } else {
            return Center(
              child: Container(),
            );
          }
        },
      ),
    );
  }

  Widget _buildListView(List<User> users) {
    return  ListView.separated(
      separatorBuilder: (BuildContext context, int i) => Divider(color: Colors.grey[400]),
      itemCount: users.length,
      itemBuilder: (context, index) {
        User user = users[index];
        return ListTile(
          onTap: () {},
          leading: Icon(Icons.people),
          title: Text(user.fullName),
          subtitle: Text(capitalize(user.gender)),
          trailing: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Text(user.grade.toUpperCase()),
              Text(user.phone)
            ],
          ),
        );  
      },
    );
  }
}

user_service.dart

import 'package:flutter_crud_ci4/model/user.dart';
import 'package:http/http.dart' show Client;

class UserApiService {

  final String baseUrl = "http://10.0.2.2/belajar-codeigniter-4/ci4_restapi_flutter/public/index.php/";
  Client client = Client();

  Future<List<User>> getUsers() async {
    final response = await client.get("$baseUrl/user");
    if (response.statusCode == 200) {
      return userFromJson(response.body);
    } else {
      return null;
    }
  }

}

Penjelasan:

Pada baris ke 6 Anda bisa ubah sesuai lokasi file project yang Anda buat (jika berbeda dengan saya).

Pada contoh kasus, saya menggunakan emulator dan setiap emulator harus mengganti localhost dengan IP 10.0.2.2.

Jika Anda menggunakan Smartphone, silahkan ketik ipconfig saat internet sudah tersambung. Catat IP Anda dan ubah 10.0.2.2 dengan API address Anda.

capitalize.dart

String capitalize(String str){

  if(str == null) return '';

  return "${str[0].toUpperCase() + str.substring(1)}";
  
}

Terakhir, pada main.dart cari kode berikut:

 home: MyHomePage(title: "Flutter demo"), 

Ubah menjadi:

 home: Home(), 

dan pada bagian atas main.dart jangan lupa import:

 import 'package:flutter_crud_ci4/screen/user_list.dart'; 

Selesai.

Step 9 – Jalankan Aplikasi

Pertama, pastikan webserver sudah aktif.

Kedua, jalankan project Codeigniter 4 dengan perintah php spark serve

Terakhir, jalankan aplikasi dengan mengetik perintah flutter run pada terminal atau cmd Anda.

Perhatikan gambar berikut:

crud codeigniter 4 dan flutter bagian 3

Tunggu sampai installasi selesai.

Jika berhasil, maka hasilnya akan seperti:

crud codeigniter 4 dan flutter bagian 1

Apa Selanjutnya?

Alhamdulillah tutorial CRUD Codeigniter 4 dan Flutter selesai pada part pertama.

Insya Allah akan disambung sampai proses delete data.

Aamiin.

Download Source Code Codeigniter 4 dan Flutter via Github

Semoga bermanfaat dan selalamat belajar.

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

12 Replies to “Tutorial CRUD Codeigniter 4 dan Flutter #1 – Tampil…”

  1. Access denied for user ”@’localhost’ (using password: NO)
    D:\Web\1. REST API CI\ci4_restapi_flutter\system\Database\MySQLi\Connection.php – 225

    says dapat error tsb, padahal sudah mengatur .env nya. berikut code .env nya:

    # database.default.hostname = localhost
    # database.default.database = ci4_crud_restapi_flutter
    # database.default.username = root
    # database.default.password =
    # database.default.DBDriver = MySQLi

    # database.tests.hostname = localhost
    # database.tests.database = ci4_crud_restapi_flutter
    # database.tests.username = root
    # database.tests.password =
    # database.tests.DBDriver = MySQLi

    1. [SOLVED] belum mengatur di app>config>Database.php ternyata hehe

    2. Di uncomment atau hilangkan tanda # pada bagian ini:

      database.default.hostname = localhost
      database.default.database = ci4_crud_restapi_flutter
      database.default.username = root
      database.default.password =
      database.default.DBDriver = MySQLi

  2. The getter ‘length’ was called on null.
    Receiver: null
    Tried calling: length

    1. Itu karena data dari database kosong. Coba ganti return null jadi return []

  3. kok begini ya mas? mohon bantuannya,, udah nyari solusi blom ketemu juga .

    D:\PROJECT\www\ci4_restapi_flutter>php spark migrate:create user
    PHP Parse error: syntax error, unexpected ‘:’, expecting ‘{‘ in D:\PROJECT\www\ci4_restapi_flutter\system\Common.php on line 77

    Parse error: syntax error, unexpected ‘:’, expecting ‘{‘ in D:\PROJECT\www\ci4_restapi_flutter\system\Common.php on line 77

Leave a Reply

Your email address will not be published. Required fields are marked *