MODUL

MOBILE Programming

MOBILE PROGRAMMING

Tim Penyusun:
Ade Hendini, M.Kom
Agung Sasongko, M.Kom
Muhammad Sony Maulana, ST., M.Kom

UNIVERSITAS BINA SARANA INFORMATIKA

1
 KATA PENGANTAR

Puja dan puji syukur selalu kami panjatkan kehadirat Allah Swt yang telah memberikan semua
nikmatnya sehingga penulis berhasil menyelesaikan modul ajar yang berjudul Mobile Programming ini
tanpa adanya kendala yang berarti. Tujuan dari penyusunan modul ini adalah untuk memudahkan para
mahasiswa Sistem Informasi Fakultas Teknik dan Informatika Universitas Bina Sarana Informatika
dalam mengenl dan memahami mobile programming dan praktik pembuatan API. Modul ini disusun
dalam tahapan agar pemula dapat lebih mudah mempelajarai mobile programming dan mengembangkan
aplikasi mobile yang dikhususkan kepada sistem operasi android.

Keberhasilan penyusunan modul ini tentunya bukan atas usaha penulis saja namun ada banyak
pihak yang turut membantu dan memberikan dukungan untuk suksesnya penulisan modul ini. Untuk
itu, penulis mengucapkan terima kasih yang sebesar-besarnya kepada semua pihak yang telah
memberikan dukungan baik secara moril ataupun material sehingga buku ini berhasil disusun.

Modul yang ada ini tentu tidak luput dari kekurangan. Selalu ada celah untuk perbaikan.
Kritik, saran serta masukkan dari pembaca sangat kami harapkan untuk penyempurnaan kedepannya.

Pontianak, Maret 2022

Tim Penyusun

2
 Daftar Isi
Aplikasi Mobile dengan Flutter .............................................................................................................. 6
Menyiapkan perangkat ...................................................................................................................... 6
Install Git ........................................................................................................................................ 6
Install JDK ....................................................................................................................................... 6
Install Android Studio................................................................................................................... 11
Install Flutter ................................................................................................................................ 16
Konfigurasi Android Studio dengan Flutter .................................................................................. 22
Membuat dan menjalankan projek .................................................................................................. 23
Membuat dan menjalankan projek dengan VSCode dan Handphone Android ................................ 30
Install VSCode sebagai alternatif editor ....................................................................................... 30
Membuat projek flutter dengan VSCode ..................................................................................... 31
Menjalankan aplikasi dengan Handphone Android ..................................................................... 34
Struktur Folder Flutter ..................................................................................................................... 41
Membuat Hello World ..................................................................................................................... 42
Membuat Widget Column ............................................................................................................... 48
Membuat Widget Row ..................................................................................................................... 50
StatelessWidget dan StatefullWidget .............................................................................................. 51
Membuat Form ................................................................................................................................ 52
Pemisahan Widget Kedalam fungsi-fungsi ....................................................................................... 57
Membuat Detail Produk................................................................................................................... 58
Membuat fungsi tombol simpan dan menampilkan data pada Detail Produk ................................. 59
Membuat ListView Produk ............................................................................................................... 62
Membuat Route (Pindah Halaman) ................................................................................................. 64
Pemisahan Widget ke dalam Class StatelessWidget ........................................................................ 66
Menampilkan Detail Produk saat ListView diklik ............................................................................. 68
Membuat projek flutter yang terhubung dengan API .......................................................................... 72
Apa itu API ....................................................................................................................................... 72
Arsitektur API ................................................................................................................................... 73
Membuat projek Toko API (Restful API)............................................................................................... 73
Installasi Apache, MySql dan PHP (XAMPP) ..................................................................................... 73
Install Postman ................................................................................................................................ 78
API SPEC ........................................................................................................................................... 79
Pembuatan Database ....................................................................................................................... 82
Installasi CodeIgniter 4 sebagai Restful API ..................................................................................... 84

3
 Membuat hasil response.................................................................................................................. 86
Registrasi.......................................................................................................................................... 87
Membuat model Registrasi .......................................................................................................... 87
Membuat controller Registrasi .................................................................................................... 88
Menambah route Registrasi ......................................................................................................... 88
Login ................................................................................................................................................ 90
Membuat model Member ........................................................................................................... 90
Membuat model Login ................................................................................................................. 90
Membuat controller Login ........................................................................................................... 91
Menambahkan route Login .......................................................................................................... 92
Mencoba Rest .............................................................................................................................. 92
CRUD Produk ................................................................................................................................... 92
Membuat model Produk .............................................................................................................. 92
Membuat controller produk ........................................................................................................ 92
Mencoba Rest .............................................................................................................................. 95
Membuat projek flutter tokokita ......................................................................................................... 97
Membuat Model .............................................................................................................................. 97
Login ............................................................................................................................................ 98
Registrasi...................................................................................................................................... 99
Produk.......................................................................................................................................... 99
Membuat Halaman .......................................................................................................................... 99
Registrasi.................................................................................................................................... 100
Login .......................................................................................................................................... 104
Form Produk .............................................................................................................................. 107
Detail Produk ............................................................................................................................. 109
Tampil List Produk...................................................................................................................... 111
Membuat Helper Modul ................................................................................................................ 115
Menambahkan depedencies ...................................................................................................... 115
Membuat Class Token ................................................................................................................ 115
Http request ............................................................................................................................... 117
Membuat Bloc ............................................................................................................................... 120
Registrasi.................................................................................................................................... 121
Login .......................................................................................................................................... 122
Logout ........................................................................................................................................ 122
Produk........................................................................................................................................ 122

4
 Menyatukan Fungsionalitas ........................................................................................................... 124
Membuat Common Dialog Widget ............................................................................................ 124
Modifikasi main.dart .................................................................................................................. 127
Modifikasi registrasi_page.dart.................................................................................................. 128
Modifikasi login_page.dart (fungsi login) ................................................................................... 132
Modifikasi produk_page.dart ..................................................................................................... 136
Memodifikasi Form Produk (produk_form.dart) ........................................................................ 141

Untuk akses file lengkapnya silahkan di link berikut ini:

https://drive.google.com/file/d/17QF9roS9JYT9vZm-KJtvHdcyiBDwcr82/view?usp=sharing