Get dan Create Data menggunakan Rest API

Apa itu CRUD?

CRUD adalah operasi dasar yang harus ada pada setiap sistem komputer, yang terdiri dari beberapa perintah pada sistem tersebut. Masing-masing fungsi sistem tersebut adalah Create, Read, Update, dan Delete.

• – Create secara istilah, create adalah salah satu fungsi dalam sebuah aplikasi yang berperan dalam membuat atau menginputkan data ke dalam sistem. Data ini nantinya akan terkirim ke database yang tertuju secara otomatis dari sistem yang Anda buat.

• – Read adalah perintah membaca. Maksud dari perintah ini adalah untuk menampilkan data yang diambil dari database yang terhubung dengan sistem. Perintah ini menggunakan id unik sebagai pembeda satu data dengan yang lainnya.

• – Update pada CRUD adalah sebuah perintah yang memungkinkan pengguna melakukan editing atau update informasi dari data yang sudah tersaji. Jadi, pengguna harus memposisikan opsi perintah ini pada bagian tampilan data yang Anda beri akses untuk bisa pengguna edit.

• – Delete pada CRUD adalah fungsi hapus, yang memungkinkan pengguna aplikasi Anda untuk menghapus entri data yang tersedia. Pada proses kerja sistem penghapusan ini, jangan langsung hapus data yang pengguna hapus.

untuk pembahasan kali ini kita akan menggunakan Api yang telah disediakan oleh reqres.in

dan kita akan coba untuk Get dan Post data dari API reqres.in.

Post

Untuk Post kita akan menggunakann API

https://reqres.in/api/users

Tampilan Awal

Jadi sebelum kita mengget data kita perlu membuat perlu tampilan awal berikut tampilan awal, 

mport 'package:flutter/material.dart';

import 'person.dart';
import 'person_card.dart';

class MainPage extends StatefulWidget {
 const MainPage({Key? key}) : super(key: key);

 @override
 State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
 Person? person;

 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(
         title: const Text('Rest Api'),
       ),
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             person != null
                 ? PersonCard(person: person!)
                 : const Text('no data'),
             const SizedBox(
               height: 20,
             ),
             SizedBox(
               width: 100,
               child: ElevatedButton(
                   onPressed: () async {}, child: const Text('GET')),
             ),
             SizedBox(
               width: 100,
               child: ElevatedButton(
                   onPressed: () async {}, child: const Text('POST')),
             )
           ],
         ),
       ));
 }
}

Untuk tampilannya akan menjadi seperti berikut 

Setelah kita telah membuat tampil awal, lalu kita akan membuat class model sebagai wadah untuk menepatkan data data API agar dapat diakses pada UI Atau tampilan

Card

Setelah membuat tampilan awal kita juga akan membuat tampilan card untuk dapat menampilkan Data, Berikut kode untuk card

import 'package:flutter/material.dart';

import 'person.dart';

class PersonCard extends StatelessWidget {
 final Person person;

 const PersonCard({Key? key, required this.person}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return Container(
     padding: const EdgeInsets.all(15),
     width: 300,
     decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(8), color: Colors.lightBlue[100]),
     child: Column(
       children: [
         Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             const SizedBox(
               width: 50,
               child: Text('ID',
                   style: TextStyle(
                     fontWeight: FontWeight.bold,
                   )),
             ),
             SizedBox(width: 220, child: Text(': ${person.id}'))
           ],
         ),
         Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             const SizedBox(
               width: 50,
               child: Text('Name',
                   style: TextStyle(
                     fontWeight: FontWeight.bold,
                   )),
             ),
             SizedBox(width: 220, child: Text(': ${person.name}'))
           ],
         ),
         Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             const SizedBox(
               width: 50,
               child: Text('Email',
                   style: TextStyle(
                     fontWeight: FontWeight.bold,
                   )),
             ),
             SizedBox(width: 220, child: Text(': ${person.email}'))
           ],
         )
       ],
     ),
   );
 }
}

Class Model

Untuk class model kita hanya menggunakan cara sederhana

class Person {
 int id;
 String name;
 String email;

 Person({required this.id, required this.name, required this.email});
}

Service

Setelah kita membuat model kita bisa memulai untuk Get Api menggunakan Dio, tetapi pertama kita perlu membuat class baru, dengan nama Services agar kita bisa menulis kode untuk mendapatkan Data dari API

import 'person.dart';

abstract class Services {
 /// Post Data / Create
 static Future<Person?> createUser(
     String firstName, String lastName, String email) async {}
}

Pada file Services kita perlu menyiapkan 2 Fungsi yang tipe datanya adalah Person Class atau Model yang telah kita buat yang akan kita buat untuk GET dan POST data Ke API, 

dan kita juga perlu menambahkan package DIO pada project kita dengan menuliskan 

flutter pub add dio

Kita bisa menuliskan command diatas dengan terminal di project kita 

Post API

Setelah kita membuat class serivce kita akan membuat Post untuk membuat / create data dari yang kita buat, kita perlu menambahkan kode pada fungsi Create User pada file Service

/// Post Data / Create
 static Future<Person?> createUser(
     String firstName, String lastName, String email) async {
   try {
     var response = await Dio().post('https://reqres.in/api/users',
     data: {
       'first_name' : firstName,
       'last_name' : lastName,
       'email' : email,
     });
     if (response.statusCode == 201) {
       return Person(
           id: int.tryParse(response.data['id'].toString())??0,
           name: response.data['first_name'] +
               '' +
               response.data['last_name'],
           email: response.data['email']);
     }
   } catch (e) {
     throw Exception(e.toString());
   }
 }
}

lalu pada pada tampilannya kita juga menambahkan kode pada button post dengan kode berikut

SizedBox(
 width: 100,
 child: ElevatedButton(
     onPressed: () async {
       Person? result  = await Services.createUser('Ahmad', 'Miqdad', '[email protected]');
       if(result != null){
         setState(() {
           person = result;
         });
       }
     }, child: const Text('POST')),
)

Berikut hasil dari Post 

Setelah Selesai lah pembahasan kita tentang POST API