Image Load

Hello world, 

Melanjutkan dari part sebelumnya dimana sebelumnya saya membuat contoh bagaimana cara menampilkan data JSON dengan flutter MVVM, maka kali ini akan menjadi proses selanjutnya yaitu proses input data menggunakan API JSON. Untuk API yang akan kita gunakan sebagai contoh adalah API yang sudah saya buat (bisa dilihat di sini) dengan menggunakan PHP dan database Mysql. Pada API tersebut saya buat inputan data berupa nama_lengkap, email dan alamat dengan bentuk input JSON seperti berikut.

{
    "nama_user" : "Riza",
    "email_user" : "rizariza@gmail.com",
    "alamat_user" : "Jakarta"
}

Okey langsung saja kita masuk ke tahap pertama yaitu membuat form. Sebagai catatan untuk contoh kali ini saya melanjutkan project yang ada di part 1. Jadi jika ingin lebih enak mengikutinya maka coba dulu part 1 nya. Jika sudah maka kita tinggal buat sebuah file dengan nama halamaninput.dart pada folder lib/views/ dan isi dengan code berikut

import 'package:flutter/material.dart';

class HalamanInput extends StatefulWidget {
  @override
  _HalamanInputState createState() => _HalamanInputState();
}

class _HalamanInputState extends State<HalamanInput> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Halaman Input"),
      ),
      body: Container(
        padding: EdgeInsets.all(10.0),
        child: ListView(
          children: [
            TextField(
              decoration: new InputDecoration(
                  hintText: "Nama Lengkap", labelText: "Nama"),
            ),
            TextField(
              decoration:
                  new InputDecoration(hintText: "Email", labelText: "Email"),
            ),
            TextField(
              decoration:
                  new InputDecoration(hintText: "Alamat", labelText: "Alamat"),
            ),
            RaisedButton(child: Text("Simpan"), onPressed: null)
          ],
        ),
      ),
    );
  }
}

Pada kode di atas kita mempunyai tiga textfield yaitu untuk nama, email dan alamat. Untuk melihat contoh pembuatan form bisa dilihat di sini. Kemudian pada tahap kedua kita buatkan controller untuk masing-masing textField yang berfungsi untuk menampung dan mengambil data dari textField seperti berikut. letakkan pada posisi setelah kode class _HalamanInputState extends State<HalamanInput> {.

  TextEditingController namaController = new TextEditingController();
  TextEditingController emailController = new TextEditingController();
  TextEditingController alamatController = new TextEditingController();

Kemudian pada Textfield kita pasangkan controllernya masing-masing seperti berikut.

        TextField(
		controller: namaController,
		decoration: new InputDecoration(
			hintText: "Nama Lengkap", labelText: "Nama"),
	),
	TextField(
		controller: emailController,
		decoration:
		new InputDecoration(hintText: "Email", labelText: "Email"),
	),
	TextField(
		controller: alamatController,
		decoration:
		new InputDecoration(hintText: "Alamat", labelText: "Alamat"),
	),

Jika step di atas sudah selesai maka sekarang kita tinggal membuat prosesnya yaitu dengan menambahkan kode berikut ke dalam file lib/viewmodels/userviewmodels.dart. Untuk cara pembuatan API nya bisa dilihat di sini. Silakan buat dan pasang API pada website/hosting kalian masing2.

Future<bool> postUser(body) async {
    try {
      http.Response hasil = await http.post(
          Uri.encodeFull("http://byriza.com/webapi/create.php"),
          body: body,
          headers: {
            "Accept": "application/json",
          });
      if (hasil.statusCode == 200) {
        print("status 200");
        // final data = json.decode(hasil.body);
        return true;
      } else {
        print("error status " + hasil.statusCode.toString());
        return null;
      }
    } catch (e) {
      print("error catchnya $e");
      return null;
    }
  }

Sehingga file userviewmodel.dart akan menjadi seperti berikut.

import '../models/usermodel.dart';
import 'package:http/http.dart' as http;

class UserViewModel {
  Future<List<UserModel>> getUsers() async {
    try {
      http.Response hasil = await http.get(
          Uri.encodeFull("http://byriza.com/webapi/read.php"),
          headers: {"Accept": "application/json"});
      if (hasil.statusCode == 200) {
        print("data category success");
        final data = userModelFromJson(hasil.body);
        return data;
      } else {
        print("error status " + hasil.statusCode.toString());
        return null;
      }
    } catch (e) {
      print("error catch $e");
      return null;
    }
  }

  Future<bool> postUser(body) async {
    try {
      http.Response hasil = await http.post(
          Uri.encodeFull("http://byriza.com/webapi/create.php"),
          body: body,
          headers: {
            "Accept": "application/json",
          });
      if (hasil.statusCode == 200) {
        print("status 200");
        // final data = json.decode(hasil.body);
        return true;
      } else {
        print("error status " + hasil.statusCode.toString());
        return null;
      }
    } catch (e) {
      print("error catchnya $e");
      return null;
    }
  }
}

Kemudian kita buat model dengan nama userpostmodel.dart pada folder lib/models/ dengan menggunakan inputan json di atas. Untuk membuat model biasanya saya pakai yang instan menggunakan https://app.quicktype.io/. Caranya tinggal kita paste saja json kita ke form yang sudah disediakan dan kita pilih bahasa pemrograma dart.


Kemudian tinggal kita copy paste saja hasilnya seperti di bawah ini ke dalam file model kita yaitu di sini saya beri nama userpostmodel.dart dan kita simpan di folder lib/models/.

import 'dart:convert';

UserpostModel userpostModelFromJson(String str) => UserpostModel.fromJson(json.decode(str));

String userpostModelToJson(UserpostModel data) => json.encode(data.toJson());

class UserpostModel {
    UserpostModel({
        this.namaUser,
        this.emailUser,
        this.alamatUser,
    });

    String namaUser;
    String emailUser;
    String alamatUser;

    factory UserpostModel.fromJson(Map<String, dynamic> json) => UserpostModel(
        namaUser: json["nama_user"],
        emailUser: json["email_user"],
        alamatUser: json["alamat_user"],
    );

    Map<String, dynamic> toJson() => {
        "nama_user": namaUser,
        "email_user": emailUser,
        "alamat_user": alamatUser,
    };
}
Langkah terakhir kita tinggal mengubah proses onPress pada tombol simpan yang ada pada file halamaninput.dart menjadi seperti berikut.

RaisedButton(
	child: Text("Simpan"),
	onPressed: () {
		UserpostModel commRequest = new UserpostModel();
		commRequest.namaUser = namaController.text;
		commRequest.emailUser = emailController.text;
		commRequest.alamatUser = alamatController.text;
		UserViewModel()
			.postUser(userpostModelToJson(commRequest))
			.then((value) => print("Mantab"));
	}) 

Jangan lupa untuk memanggil file userpostmodel.dart pada halamaninput.dart dengan cara import '../models/userpostmodel.dart'; sehingga halamaninput.dart akan menjadi seperti berikut.

import '../models/userpostmodel.dart';
import '../viewmodels/userviewmodel.dart';
import 'package:flutter/material.dart';

class HalamanInput extends StatefulWidget {
  @override
  _HalamanInputState createState() => _HalamanInputState();
}

class _HalamanInputState extends State<HalamanInput> {
  TextEditingController namaController = new TextEditingController();
  TextEditingController emailController = new TextEditingController();
  TextEditingController alamatController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Halaman Input"),
      ),
      body: Container(
        padding: EdgeInsets.all(10.0),
        child: ListView(
          children: [
            TextField(
              controller: namaController,
              decoration: new InputDecoration(
                  hintText: "Nama Lengkap", labelText: "Nama"),
            ),
            TextField(
              controller: emailController,
              decoration:
                  new InputDecoration(hintText: "Email", labelText: "Email"),
            ),
            TextField(
              controller: alamatController,
              decoration:
                  new InputDecoration(hintText: "Alamat", labelText: "Alamat"),
            ),
            RaisedButton(
                child: Text("Simpan"),
                onPressed: () {
                  UserpostModel commRequest = new UserpostModel();
                  commRequest.namaUser = namaController.text;
                  commRequest.emailUser = emailController.text;
                  commRequest.alamatUser = alamatController.text;
                  UserViewModel()
                      .postUser(userpostModelToJson(commRequest))
                      .then((value) => print("Mantab"));
                })
          ],
        ),
      ),
    );
  }
}


Selamat mencoba :)