Flutter: CRUD dengan Laravel API(CRUD with Laravel REST API) Part I — Read

Halo semua!

In this article I will share tutorial Flutter: How to make CRUD with Laravel REST API Part I (Read Data). This tutorial continues in part Membuat Login Flutter dengan API Laravel (Flutter Authentication with Laravel)

Read Data

In this part I will share tutorial How to display data with Laravel REST API

Table Student

Prepare the table that you want to use. For example here I use a student table with a structure like this.

CREATE TABLE `student` (
`id_student` int(10) NOT NULL,
`student_name` varchar(25) NOT NULL,
`gender` enum('Male','Female') NOT NULL,
`birth_date` date NOT NULL,
PRIMARY KEY(`id_student`)
);

Insert some data

INSERT INTO `student`
(`id_student`, `student_name`, `gender`, `birth_date`) VALUES
(1001, ‘Andreas Neil’, ‘Male’, ‘2006–04–18’),
(1002, ‘Bob Lee Swagger’, ‘Male’, ‘2006–07–07’),
(1003, ‘Cindy Octavia’, ‘Female’, ‘2006–10–12’);

Laravel REST API

Prepare your Laravel project as well, and create a model for your table. Here I am creating a student model for my student table

Student Model

class Student extends Model
{
protected $table = ‘student’;
protected $primaryKey = ‘id_student’;
protected $fillable = [
‘student_name’,
‘gender’,
‘birth_date’
];
public $timestamps = false;
}

Student Controller

Create a controller for the student’s CRUD function

api.php

The middleware means that to access the route requires login

Route::get(‘student’, ‘StudentController@index’)->middleware(‘auth:api’);

Flutter Project Structure

First create a project structure like this, because login and register have been in the previous tutorial, this time create a model and service for student table that are used as models and controllers in flutter.

lib project structure

Student.dart

You can adjust the parameters in the model according to your table.

StudentService.dart

This service is used to capture the results of the API route that we send.

home.dart

This page is used to display the data with Table Widget.

student_detail.dart

This page is used to display detailed student data.

Test Drive

Home and Detail Student Page

Having some issues? Let me know, write on comment below, cheers!

Thank you very much! Terima Kasih!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store