Dokumen ini adalah makalah tentang pembuatan aplikasi mobile menggunakan framework Flutter dan server Docker. Penulis menjelaskan tentang dasar-dasar mobile programming, tipe aplikasi yang ada, serta bagaimana menggunakan Docker untuk backend server dalam pengembangan aplikasi. Selain itu, makalah ini juga mencakup teori-teori dasar yang diperlukan dan proses pembuatan aplikasi mobile yang kompatibel serta responsif.

1. MAKALAH
“PEMBUATAN APLIKASI MOBILE DENGAN
FRAMEWORK FLUTTER DAN SERVER DOCKER”
Disusun Oleh :
Rizky Syahputra Setyawan
2014311012
PERGURUAN TINGGI UNIVERSITAS BHAYANGKARA
ANGKATAN 2020/2021

2. KATA PENGANTAR
Dengan menyebut nama Allah SWT yang Maha Pengasih lagi Maha
Panyayang, Kami panjatkan puja dan puji syukur atas kehadirat-Nya, yang telah
melimpahkan rahmat, hidayah, dan inayah-Nya kepada kami, sehingga saya dapat
menyelesaikan tugas makalah tentang pembuatan aplikasi berbasis mobile
programming dengan secara baik.
Makalah ini telah saya susun dengan maksimal dan mendapatkan bantuan dari
berbagai pihak sehingga dapat memperlancar pembuatan makalah ini. Untuk itu
kami menyampaikan banyak terima kasih kepada semua pihak yang telah
berkontribusi dalam pembuatan makalah ini. Terutama kepada Bapak R. Dimas
Adityo,MT selaku dosen mata kuliah Mobile Programming, yang memberikan
bimbingan, saran, dan idenya kepada penulis.
Adapun isi yang akan penulis sampaikan dalam makalah ini, yaitu Backend
Server dengan mesin Docker Virtualization, materi dan tugas pembuatan Aplikasi
Mobile Programming ; suatu Teknik pemrograman yang diterapkan dalam
mengembangkan aplikasi di perangkat mobile (seperti; smartphone dan tablet)
berbasis Android maupun IOS, serta hal-hal lainnya yang menyinggung mengenai
topik pembahasan.
Terlepas dari semua itu, Saya menyadari sepenuhnya bahwa masih ada
kekurangan baik dari segi susunan kalimat maupun tata bahasanya. Oleh karena itu
kritik dan saran sangat dianjurkan agar penulis/pembaca selanjutnya dapat
memperbaiki makalah yang sangat kurang ini.
Akhir kata saya berharap semoga makalah tentang pembuatan aplikasi
berbasis mobile programming yang baik ini dapat memberikan manfaat maupun
inpirasi terhadap pembaca.
Sidoarjo, 27 November 2021
Rizky Syahputra Setyawan

3. DAFTAR ISI
KATA PENGANTAR
DAFTAR ISI
BAB I PENDAHULUAN
1.1 Latar Belakang
1.2 Rumusan Masalah
1.3 Maksud dan Tujuan Penulisan
BAB II LANDASAN TEORI
2.1 Teori-Teori Dasar
2.1.1 Pengertian Mobile Programming
2.1.2 Pengertian Hybrid App
2.1.3 Pengertian Back-End Server
2.1.4 Pengertian Docker
2.1.4.1 Docker Architecture
2.1.4.2 Docker file
2.1.4.3 Docker compose
2.1.5 Pengertian Front-End Mobile Programming
2.1.6 Pengertian Flutter
BAB III PEMBAHASAN
3.1 Pembuatan Mesin Back-End Server
3.1.1 Installasi Docker
3.1.2 Konfigurasi Pada Docker file dan Docker Compose (Source
Code)
3.1.3 Source Code Program Back End
3.2 Pembuatan Aplikasi Mobile CRUD Dengan Flutter Sebagai
Front-End
3.2.1 Installasi Flutter
3.2.2 Coding / Source Code
3.3 Isi Tampilan Aplikasi Mobile (kompatibel dan responsive with
framework)
BAB IV PENUTUP
4.1 Kesimpulan
4.2 Saran

4. 1
BAB I
PENDAHULUAN
1.1 Latar Belakang
Teknologi mobile programming terus berkembang dan saat ini menjadi semakin
lengkap sejak adanya smartphone. Dengan adanya teknologi ini setiap orang dapat
membuat aplikasi sendiri pada smartphone. Teknologi mobile telah menjadi bagian
kehidupan kita sehari-hari. Teknologi mobile merupakan teknologi abad ke-21
dimana terdapat perkembangan aplikasi yang luar biasa. Jadi selain dari segi
perangkat keras yang mengalami perkembangan sangat pesat, dari segi perangkat
lunak juga mengalami hal yang sama pesatnya. Aplikasi mobile merupakan sebuah
perangkat lunak yang berjalan pada perangkat mobile. Aplikasi mobile dapatberupa
hiburan, pembelajaran, maupun membantu pengguna dalam kehidupansehari-hari.
Aplikasi mobile menyediakan berbagai layanan seperti komunikasi danpesan, audio
atau video, game, manajemen atau mengelola informasi dan data,dll.
Banyak sekali pengembangan teknologi yang telah dikembangkan oleh para
mobile developer dunia dan khususnya berbasis web. Beberapa contohnya antara
lain Progresisive Web Apps (PWA). Progresisive Web Apps adalah sebuah aplikasi
yang dibangun dengan melakukan optimasi pada sebuah website. Optimasi yang
dilakukan tidak hanya akan membuat website menjadi lebih cepat namun juga
mampu memberikan pengalaman layaknya menggunakan aplikasi mobile. Selain
itu,juga tidak perlu membuat aplikasi mobile secara terpisah. PWA merupakan
aplikasi hybrid yang terinspirasi dari kemudahan penggunaan browser di berbagai
platform dan kenyamanan menggunakan aplikasi mobile di ponsel atau tablet. Jika
saat ini Anda berencana untuk mengembangkan aplikasi mobile atau aplikasi
seluler, maka Anda harus menentukan jenis aplikasi apa yang ingin Anda kembang-
kan. Secara umum, aplikasi mobile development dibagi menjadi 3 macam aplikasi,
yaitu native, web, dan hybrid app. Seiring perkembangan teknologi informasi yang
semakin maju, Android menjadi OS yang paling banyak digunakan diantara sekian
banyak pilihan sistem operasi untuk perangkat mobile. Sifatnya yang open source
memudahkan pengembang untuk membuat sebuah aplikasi. Android merupakan
OS (Operating System) Mobile yang tumbuh ditengah OS lainnya yang berkem-
bang dewasa ini.

5. 2
1.2 Rumusan Masalah
 Apa itu mobile programming ?
 Bagaimana pengertian back-end server secara luas ?
 Apa pnegertian dari front-end secara luas ?
 Apa yang dimaksud dengan docker itu ?
 Apa pengertian dari framework7 ?
 Bagaimana cara membuat mesin back-end server ?
 Bagaimana cara membuat front-end app mobile programming ?
 Bagaimana cara membuat aplikasi crud mobile menggunakan
flutter ?
 Bagaimana tampilan kompatibel dan responsive dari aplikasi crud
mobile yang telah dibuat ?
1.3 Maksud dan Tujuan Penulisan
Maksud dari penyusunan makalah ini adalah untuk menambah wawasan bagi
pembaca dan penulis serta untuk memenuhi dan melengkapi tugas Ujian Akhir
Semester 3 mata kuliah Mobile Programming.

6. BAB II
LANDASAN TEORI
2.1 Teori-Teori Dasar
Teori-teori dasar/umum ini menjadi pemahaman mendasar bagi keseluruhan
teori yang ada.
2.1.1 Pengertian Mobile Programming
Mobile programming adalah proses pembuatan aplikasi untuk
perangkat mobile baik yang bersifat offline / luring maupun online / daring.
Mobile programming juga dapat diartikan sebagai suatu teknik program-
ming yang diterapkan dalam mengembangkan aplikasi di perangkat mobile,
seperti smartphone dan tablet. Pengembang aplikasi mobile disebut dengan
mobile programmer (mobile developer). Jadi beberapa jenis aplikasi smart-
phone yang kita pakai setiap hari merupakan hasil akhir dari pemrogra man
mobile. Pentingnya belajar mobile programming adalah : untuk meme- nuhi
kebutuhan DUDI (Dunia Usaha Dunia Industri) seperti aplikasi online shop,
aplikasi crud data lainnya,dll, serta untuk kebutuhan aplikasi mobile
berbasis multitasking dan multiplatform semakin tinggi.
Untuk mengembangkan aplikasi mobile atau aplikasi seluler, maka
Anda harus menentukan jenis aplikasi apa yang ingin Anda kembangkan.
Secara umum, aplikasi mobile development dibagi menjadi 3 macam
aplikasi, yaitu native, web, dan hybrid app. Native app adalah aplikasi yang
dibangun secara spesifik untuk operating system tertentu. Jika aplikasi ini
dibangun untuk operating system iOS, maka aplikasi tersebut tidak akan
dapat berjalan pada operating system yang lain seperti pada Android. Keun-
tungan utama dari jenis aplikasi ini adalah performanya yang tinggi serta
memiliki user experience yang baik karena developer mengembangkan
aplikasi ini menggunakan UI dari perangkat native. Hybrid app dapat
dikatakan seperti kombinasi dari dua macam aplikasi, yaitu native dan web.
Aplikasi hybrid dinilai lebih mudah dan cepat untuk dikembangkan
dibanding dengan native app. Namun kecepatan aplikasi hybrid bekerja
lebih lambat dari pada aplikasi native karena bergantung pada kecepatan
browser user. Pada kali ini, saya mengembangkan aplikasi mobile berjenis
Hybrid. 3

7. 4
2.1.2 Pengertian Hybrid App
Perusahaan teknologi VMware memprediksi aplikasi hybrid atau
hybrid applications (Hybrid Apps) akan menjadi teknologi enterprise yang
banyak diadopsi perusahaan di masa depan. Pasalnya, aplikasi ini dianggap
memiliki fleksibilitas tinggi dalam mengoptimalkan berbagai layanan
berbeda. Hybrid app ini mampu menyandingkan layanan-layanan native
cloud terbaik dengan beragam teknologi sumber terbuka (open source).
Hybrid app adalah aplikasi yang menggabungkan berbagai layanan atau
elemen aplikasi asli (native app) dan aplikasi web (web app). Hybrid app
adalah jenis aplikasi yang memiliki elemen dari aplikasi native, yaitu yang
dikembangkan untuk platform tertentu seperti iOS atau Android, dengan
elemen dari aplikasi web,aplikasi hybrid dijalankan dalam container
(wadah) asli yang menggunakan objek web view control seperti UI-
WebView pada iOS dan Webview untuk Android, dll. Saat aplikasi hybrid
digunakan, objek ini menampilkan konten web berkat penggunaan teknolo-
gi atau elemen web (CSS, JavaScript, dan HTML5). Jadi, inti aplikasi ditulis
menggunakan teknologi / elemen web (CSS, JavaScript, dan HTML5) yang
kemudian dienkapsulasi dalam aplikasi native.
2.1.3 Pengertian Back-End Server
Back end adalah segala hal yang berhubungan dengan server (misal
pada situs atau cloud) dan database. Back end amat dibutuhkan karena
memiliki kemampuan mengolah sebuah situs atau aplikasi. Hal ini
dikarenakan pengembangan dan perbaikan situs atau aplikasi akan terus
terjadi. Mereka adalah mesin yang bekerja di balik layar, semua yang ridak
dilihat oleh pengguna akhir atau berinteraksi langsung, tetapi itu memberi
kekuatan pada apa yang terjadi. Back end developer fokus pada database,
scripting, dan arsitektur dari sebuah website atau aplikasi hybrid. Kode yang
ditulis oleh mereka akan membantu mengomunikasi database informasi
kepada browser. Back end developer bertanggung jawab untuk memastikan
agar situs atau aplikasi dapat bekerja semaksimal mungkin, dalam sebuah
sistem aplikasi, segala urusan yang tak terlihat oleh pengguna seperti logic,
database, keamanan data, dan kestabilan server. Dengan tugas tersebut,
back end wajib memastikan agar semua sistem di dalam situasi atau aplikasi

8. 5
dapat bekerja. Serta wajib memikirkan risiko-risiko yang mungkin hadir.
Misalnya harus memikirkan di mana muatan situs atau aplikasi disimpan,
apakah data akan aman, hingga bagaimana jika pengguna melebihi
kapasitas maksimal. Bahasa pemrograman back end yang paling populer
adalah PHP, Ruby, dan Phyton. (Pada pembuatan hybrid app ini saya meng-
gunakan Bahasa pemrograman PHP sebagai back end-nya). Selain itu, back
end juga harus menggunakan perangkat lunak seperti MySQL, Maria DB,
Oracle, SQL Server, dll. (Pada pembuatan hybrid app ini saya mengguna -
kan perangkat lunak Maria DB). Perangkat lunak ini penting karena diguna-
kan untuk pengembangan berbasis database.
2.1.4 Pengertian Docker
Lamanya proses pengembangan yang dilakukan tidak lagi mengham
bat karena semua proses mulai dari perancangan, pengembangan, hingga
distribusi hasil produk jadi pun juga semakin mudah dan cepat diban
dingkan dengan cara konvensional terdahulu. Untuk membangun suatu
aplikasi, pengembang menjalankan banyak step seperti membuat konfigu-
rasi hardware dan menyiapkan system operasi yang akan menjadi tempat
semua file virtualisasi. Agar mempermudah semua langkah proses ini maka
dibangun sebuah container yang bisa menyimpan sebuah program dan
semua yang saling bersangkutan. Container ini diciptakan dengan ukuran
kecil dan sering disebut dengan lightweight platform yang mampu membuat
aplikasi berjalan lebih cepat serta efisien. Salah satu container ini adalah
Docker yang dibangun dengan ide teknologi tersebut.
Docker sendiri bisa didefinisikan sebagai project open source de-
ngan menyediakan jenis platform terbuka yang digunakan untuk develop-
per juga administrator admin, supaya pengembang bisa membangun, menge
mas, serta menjalankan berbagai aplikasi dalam lokasi manapun sebagai
sebuah container yang bersifat ringan. Docker adalah suatu platform yang
dibangun dengan dasar teknologi container. Docker adalah aplikasi untuk
menyatukan berbagai file software dan pendukungnya dalam sebuah wadah
(container) agar memudahkan proses pengembangan software.

9. 6
Mengemba- ngkan sebuah software dengan efisien itu penting. Terutama,
untuk dapat dilakukan di berbagai lingkungan pengembangan sekaligus.
Nah, Docker adalah salah satu solusi untuk mempermudah proses tersebut.
2.1.4.1 Docker Architecture
image : docker architecture.
Ketika kita menginstall docker, sebenarnya kita itu mengins
Tall dua buah aplikasi yaitu ; Docker Client dan Docker Server/Host.
Kenapa menginstall 2 aplikasi tersebut ? karena tidak cukup satu saja
(server saja / client saja). Karena nanti pada kenyataannya yang
digunakan pada laptop kita itu cumin docker client-nya, sedangkan
docker server-nya nanti di install di server production-nya. Tetapi
dalam development, docker client dan server harus diinstall di laptop
kita.
Aplikasi Docker Client sebenarnya itu sederhana, hanya
beru pa aplikasi terminal (berupa perintah docker). Aplikasi client
tanpa server sebenarnya sudah bisa jalan. Akan tetapi, biasanya
aplikasi client, ketika kita input perintah di aplikasi client-nya, dia
sebenar- nya akan mengirim perintahnya ke Docker Server.
Sedangkan Docker Server / Docker Host itu sendiri diguna-
kan untuk melakukan manajemen si container. Jika secara detail-
nya : docker server akan melakaukan manajemen Images Docker,
Container Docker, dan koneksi ke Registry Container,(docker server

10. 7
akan manajemen semuanya urusan di docker ini). Jadi aplikasi client
yang kita ketik- kan sebelumnya (seperti mengetikkan docker
info,dll) itu sebenar- nya cuma aplikasi clientnya, dimana dia akan
bertanya ke servernya (versi informasi dari servernya) dan
dibalikkan / diberi respon ke client-mya dan otomatis respon
tersebut ditampilkan di terminal kita. Jadi secara tidak sadar
sebenarnya kita memasukkan perintah docker ke client itu semuanya
akan terkoneksi ke server untuk meng execute perintahnya dan
dibalikkin lagi responnya ke client.
Container Registry adalah tempat yang digunakan untuk
menyimpan image docker. Jadi saat kita membuat aplikasi, kemudi-
an kita bundle menjadi image maka akan kita simpan ke dalam
registry sebelum kita deploy setiap server docker-nya. Kenapa tidak
disimpan langsung ke server doscker ? alsannya, karena dalam dunia
nyata / production itu kita tidak mungkin menginstall satu sebuah
server saja untuk docker melainkan pasti banyak, lebih dari satu. Jika
kita upload ke semua server yang banyak tersebut maka kita akan
repot dan tidak efisen jadinya. Oleh karena itu kita tidak perlu
langsung mendeploy / menyimpan data image-nya ke dalam server
docker-nya, cukup simpan di Registry.
2.1.4.2 Docker File
Docker File adalah file teks yang berisi semua perintah yang
bisa dijalankan user pada baris perintah untuk membuat Image. Ini
mencakup semua instruksi yang diperlukan oleh docker untuk
membangun image. Biasanya kita ambil / pull image yang sudah
siap pakai pada Registry. Dengan docker file ini kita membuat
image docker untuk aplikasi yang akan kita buat secara manual.
Jadi kita bisa membuat container dari image yang dibuat manual ini.
Dalam membuat / membuild image itu jarang yag mulai dari kosong
an (mulai dari nol ) melainkan kita menggunakan image yang
sudah ada. (image tersebut digunakan sebagai dasar / base dal-
am image baru). Jadi membuatnya tidak dari nol.

11. 8
2.1.4.2 Docker Compose
Docker Compose adalah alat yang memungkinkan untuk
menjalankan lingkungan aplikasi multikontainer berdasarkan defi-
nisi yang ditetapkan dalam berkas .YAML. alat ini menggunakan
definisi layangan untuk sepenuhnya membangun lingkungan yang
dapat disesuaikan dengan penggunaan beberapa container yang
berbagi volume data dan jaringan. Bisa dikatakan bahwa YAML
merupakan versi lebih mudahnya JSON, lebih simple menggunakan
file YAML dari pada file JSON.
2.1.5 Pengertian Front-End Mobile Programming
Front-End adalah sebuah bagian dari website / web app atau hybrid
app yang menyuguhkan tampilan kepada user. Bagian ini dibangun meng-
gunakan HTML (HyperText Markup Language), CSS (Cascading Style
Sheets), dan JavaScript sehingga sebuah URL bisa berfungsi dan menam-
pilkan website yang baik. Orang yang bekerja di baliknya alias Front-End
developer bertugas mengembangkan semua komponen visual pada situs
web dan menjaga tampilan antarmuka. Front-End developer juga bertugas
mengerjakan layout tampilan muka alias User Interface (UI) suatu website
atau aplikasi untuk tampilan yang lebih menarik.
Berdasarkan laman Career foundry, front end developer adalah
mereka yang memiliki tanggung jawab dalam menghubungkan suatu situs
website ataupun aplikasi dengan para penggunanya. Mereka akan membuat
gambar, tombol, teks, dan juga menu serta interaksi antar setiap situs atau
aplikasi dengan para pengguna. Oleh karena itu, mereka juga biasa dikenal
dengan client-side. Front end adalah suatu hal yang tidak dibuat dengan me-
rancang desain dari suatu situs ataupun aplikasi dari nol. Karena, pada dasar
nya hal tersebut sudah dikerjakan oleh UI designer. Tugas front end adalah
memindahkan desain yang dibuat oleh UI designer dalam bentuk yang lebih
interaktif dan membuat desain tersebut menjadi lebih hidup.

12. 2.1.6 Pengertian Flutter
Flutter adalah platform yang digunakan para developer untuk membuat
aplikasi multiplatform hanya dengan satu basis coding (codebase). Artinya, aplikasi
yang dihasilkan dapat dipakai di berbagai platform, baik mobile Android, iOS, web,
maupun desktop. Flutter memiliki dua komponen penting, yaitu, Software
Development Kit (SDK) dan juga framework user interface. Software Development
Kit (SDK) merupakan sekumpulan tools yang berfungsi untuk membuat aplikasi
supaya bisa dijalankan di berbagai platform. Framework UI merupakan komponen
UI, seperti teks, tombol, navigasi, dan lainnya, yang dapat Anda kustomisasi sesuai
kebutuhan. Flutter juga merupakan platform yang gratis dan open source. Jika Anda
ingin menggunakan Flutter, Anda perlu mempelajari bahasa pemrograman Dart.
Berbeda dengan framework front-end pada umumnya yang
menggunakan JavaScript sebagai bahasa pemrogramannya. Sebelum resmi
diluncurkan pada Desember 2018, Flutter sebenarnya telah dikembangkan oleh
Google sejak 2015. Lalu, di tahun 2019, popularitas Flutter mulai meroket dan
banyak developer berbondong-bondong menggunakan Flutter. Faktor meroketnya
Fluter, tak lain karena kemudahan yang ditawarkan. Ada banyak aplikasi Flutter
yang telah tampil di Google Play Store dan App Store, Misalnya Hamilton, Alibaba,
Google Ads, dan masih banyak lagi.
9

13. 10
BAB III
PEMBAHASAN
3.1 Pembuatan Mesin Back-End Server
Pertama untuk medukung pembuatan aplikasi mobile Andorid berbasis
Hybrid harus terlebih dahulu ada mesin virtualisasi back end server-nya. Mesin ini
akan menampung beberapa Image / aplikasi yang dibutuhkan selama pembuatan /
pengembangan aplikasi mobile. Beberapa peralatan atau software yang saya
gunakan dalam membuat Mesin Back-End Server, diantaranya yaitu : Docker
Desktop, Docker Image, Web Server (Nginx), Maria DB, php- MyAdmin, dan code
editor (Visual Studio Code).
3.1.1 Installasi Docker
Langkah pertama yang harus dilakukan adalah karena saya meng
gunakan Windows, maka dari itu terdapat persyaratan sistem yang harus
dipenuhi terlebih dahulu untuk dapat menginstall Docker Desktop. Berikut
ini System requirements yang harus dipenuhi.
https://docs.docker.com/desktop/windows/install/

14. 11
Sesuai dengan persyaratan tersebut, maka saya melakukan cek Windows
Version terlebih dahulu.
Windows spesifications yang saya gunakan
Jadi apabila windows version kurang dari (build 19041) or higher (ber-
dasarkan syarat) maka kita tidak bisa menginstall aplikasi Docker Desktop-
nya. Saya memiliki windows version dengan build 19042 sehingga saya
tidak perlu meng-upgrade versi windows.
Lalu Langkah selanjutnya yaitu ; Setup WSL2 (Enable the Windows
Subsystem for Linux)
Dengan cara membuka Power Shell as Administrator terlebih dahulu ke-
mudian mengetikkan command berikut ini :
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Sub
system-Linux /all /norestart
https://docs.microsoft.com/id-id/windows/wsl/install-manual#step-4---
download-the-linux-kernel-update-package
Hasil ketika sudah enter command

15. 12
Setelah itu melakukan Enable Virtual Machine feature juga. Dengan
cara sama seperti diatas menggunkan Open Shell lalu run command
berikut ini.
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all
/norestart
https://docs.microsoft.com/id-id/windows/wsl/install-manual#step-4---
download-the-linux-kernel-update-package
Hasil ketika sudah enter command diatas
Setelah itu restart laptop agar installasi WSL dan update WSL2 berjalan
dengan baik.
Langkah selanjutnya adalah download dan install Linux Kernel Update
Package. Untuk download Linux Kernelnya disini :
https://wslstorestorage.bob.exe.windows.net/wslblob/wsl_update_x64.msi
Installasi

16. 13
Langkah selanjutnya yaitu Download dan Install Linux Distribution
(Ubuntu).
https://www.microsoft.com/id-
id/p/ubuntu/9nblggh4msv6?activetab=pivot:overviewtab
Tampilan ketika Linux Distribution Ubuntu berhasil diinstall

17. 14
Lalu setelah system requiremets diatas sudah dilakukan, kita bisa
mendownload aplikasi Docker Desktop Windows Version.
https://docs.docker.com/desktop/windows/install/
Setelah berhasil didonwload, ikuti langkah yang tertera untuk menginstall
Tampilan awal Doscker Desktop setelah diinstall

18. 15
Untuk kita dapat mengakses Docker di Ubuntu terminal maka saya meng-
aktifkan fitur Resources dan WSL Integration pada aplikasi docker. Dan ini
merupakan langkah terakhir dalam Installasi Docker
WSL Ubuntu di aktifkan
3.1.2 Konfigurasi Pada Docker file dan Docker Compose (Source Code)
Sebelum membuat Docker file dan Docker Compose, langkah yang
saya ambil yaitu menentukan aplikasi apa yang akan saya buat (apakah ber-
basis php, apakah aplikasi Android type Hybrid, dll). Setelah itu saya mulai
dengan membuat Folder yang nantinya berisi bebrapa folder dan file-file
aplikasi saya.
Folder Aplikasi Data Mahasiswa
Di dalam folder Aplikasi Data Mahasiswa inilah sebagai tempat beberapa
folder dan file untuk pengembangan aplikasi berbasis Android/mobile.

19. 16
Kemudian langsung saja open folder Aplikasi Data Mahasiswa di Visual
Studio Code, dan membuat Dockerfile.
Dockerfile sendiri ini digunakan untuk menyimpan Image yang akan dipa-
kai untuk pembuatan aplikasi Android nantinya. Berikut ini source code
pada Dockerfile saya.
Aplikasi Data Mahasiswa/docker-server/docker/Dockerfile
Disini saya membutuhkan Image PHP karena server aplikasi mobile saya
akan berbasis PHP itulah maksud dari code FROM php:7.4-fpm atau bisa
dikatakan juga sebagai image dasar untuk membangun image baru
(karena saya akan berurusan dengan web server, jadinya saya butuh versi
php yang mendukung fpm / FastCGI Process Manager yang merupakan
sebuah protocol yang menjembatani komunikasi / interaksi program php
saya dengan web server-nya / Nginx). Lalu pada RUN docker-php-ext-
install mysqli untuk men-PULL sekaligus install mysqli beserta dengan
extension nya (hal ini berdasarkan program saya dimana app saya nantinya
berupa CRUD maka dari itu mysqli harus ada), kemudian setting workdir
(WORKDIR /var/www) digunakan untuk menetapkan direktori kerja saat
ini untuk instruksi RUN (mengatur direktori kerja), serta untuk /var/www
sendiri itu merupakan nama folder untuk menempatkan file-file untuk
kebutuhan aplikasi.

20. 17
Setelah membuat Dockerfile, saya lanjut untuk membuat file configuration
Nginx. Nginx tersebut saya gunakan sebagai Web Server.
Aplikasi Data Mahasiswa/docker-server/docker/nginx/nginx.conf
Dalam konfigurasi Server tersebut diatur mulai dari seperti ; letak port
server (80), file yang pertama kali dimunculkan ( bisa index.html, dan
index.php), tempat menyimpan informasi apabila ada error
(/var/log/nginx/error.log), tempat menyimpan aktivitas web server (/var
/log/nginx/access.log), ketika ada error page 404 maka akan diatur dengan
didirect ke index.php meskipun terjadi error (error_page 404 /index.php),
dst.

21. 18
Membuat docker-compose
Dimana docker-compose ini berfungsi untuk menghubungkan antara source
code dengan nginx serta database yang saya pakai. Berikut ini source code
pada file docker-compose.yml saya.
Aplikasi Data Mahasiswa/docker-server/docker/docker-compose.yml
Aplikasi Data Mahasiswa/docker-server/docker/docker-compose.yml
File docker-compose.yml ini dimulai dengan definisi version, saya meng-
gunakan (version: “3”). hal ini akan memberi tahu docker-compose tentang
versikonfigurasiyang saya gunakan. Kemudianterdapat blok services,untuk
menyiapkan layanan yang merupakan bagian dari lingkungan ini. Dalam
kasus ini, saya memiliki sebuah layanan tunggal yang disebut app.

22. 19
Berikut ini saya jelaskan secara rinci mengenai source code docker-
compose.yml.
Dockerfile yang sebelumnya telah dibuat pada docker-compose ini akan
dibuatkan sebuah container sendiri dengan nama web-app. Dan fungsi
dari volumes adalah image dockerfile saya akan disimpan sebagai bagian
dari sistem file host yang dibuatkan dan dikelola oleh docker atau data yang
ada pada Container web-app tersebut akan dimuat dalam volumes
(../src:/var/www).
 Build Nginx
Untuk web server nginx juga dibuatkan sebuah Container dengan nama web-
server, dan memakai / PULL image : nginx:alpine. Ports yang digunakan yaitu
“8000:80”, 8000 sebagai port yang bisa diakses dari luar, dan 80 sebagai port
default.
 Build db (perangkat lunak database)
Yang akan dibuild container selanjutnya adalah untuk db yang menggunakan /
PULL image mariadb:10.3 version. Dan disini saya juga mengset environment
bahwa untuk password dari MySQL adalah root.
 Build phpMyAdmin
Sebuah container phpMyAdmin juga dibuild serta container tersebut berupa
image phpyadmin. Kemudian ports-nya : “3306:80” ,3306 merupakan port
yang bisa diakses dari luar sedangkan port 80 sebagai port default.
Jadi dengan docker-compose ini, apabila dibuild nanti maka akan menghasilkan
4 container yang mana container-container tersebut berisi aplikasi-aplikasi yang
mendukung / dibutuhkan dalam pengembangan ataupembuatan aplikasi Android
saya nantinya.

23. 20
Build docker-compose
Setelah selesai melakukan konfigurasi pada Dockerfile dan docker-
compose nya, selanjutnya adalah meng-build docker-compose (menjadi
sebuah multicontainer dari berbagai Image yang saya gunakan pada
docker-compose.yml). Untuk membuild docker-compose tersebut
diperlukan adanya perintah docker yang berupa command dan nanti di
run di terminal komputer. Berikut ini gambar yang menjelaskan langkah
yang saya ambil dalam build docker-compose.
Terminal Aplikasi Data Mahasiswa/docker-server/docker/docker-compose.yml
Command atau perintah docker yang digunakan untuk build docker- compose yaitu :
docker-compose up --build. Perintah tersebut di run padaterminal yang mengacu pada
folder docker-compose berada (dalam kasus ini letak docker-compose saya :
MOB_APP/docker-2) jadi enter commandnya berada di lokasi tersebut. Apabila sudah
dienter maka proses pembuatan akan berjalan dan ditunggu sampai success atau selesai.
Jika tidak ada error pada nginx, Dockerfile, dan docker-compose. Maka bisa disebut
berhasil melakukan build, dan docker juga sudah membuatkan multicontainer (docker-
2) dan didalam container tersebut ada 4 buah container lain (my-app, my-server, db,
phpmyadmin).

24. 21
Apabila kita ingin meng-run server kita maka kita harus menghidupkan
multicontainer-nya dahulu (docker-compose). Dengan cara klik tombol
start pada aplikasi docker desktop atau dengan cara manual mengetikkan
perintah atau command docker-compose start ke terminal.
Apabila muncul keterangan done, maka semua containner yang ada sudah
running. Pada docker desktop container-container tersebut akan berwarna
hijau serta server siap digunakan.
3.1.3 Source Code Program Back End
Pada pembuatan back end server ini saya menggunakan bahasa
pemograman PHP. Serta tujuan dari back end ini dibuat adalah untuk
mendukung performa dibalik layar aplikasi Android saya. Jenis aplikasi
mobile yang saya buat adalah Hybrid app dan memuat konten Create,
Read, Update, and Delete sebuah data (CRUD) yang langsung terkoneksi
denganMySQL aktif / database yang ada. Berikut ini program php saya
sebagai back end.

25. 22
 Konfigurasi Koneksi Database
Aplikasi data Mahasiswa/docker-server/src/public/conn.php
Dengan program inilah saya mengkoneksikan aplikasi saya ke database secara
langsung. Konfigurasi berupa nama host (“db”), username (“root”), password
(“root”),dan nama database yang saya gunakan (“crud_db”).
 GET Data
Aplikasi data Mahasiswa/docker-server/src/public/getdata.php
Codingan diatas digunakan untuk GET data / menampilkan data yang ada di
dalam database. Data diambil dari database crud_db lebih tepatnya pada tabel
Mahasiswa. Jadi dengan program ini saya bisa menampilkan data dari database
ke layar user nantinya.

26. 23
Create Data
atau POST data, dari tabel yang ada didalam database yang dicantumkan pada
adddata.php ini yang mana menggunakan mysqli query, dan menggunakan method
POST.
Set response server pada saat terdapat request POST yang dikirimkan,
menggunakan response method.
Aplikasi data Mahasiswa/docker-server/src/public/adddata.php
Dalam codingan tersebut terdapat sebuah query yang berisikan parameter variable
koneksi, variable data yang isinya adalah kolom-kolom tabel databasenya. Seperti
: id, nama, nim, jurusan, nomor_telepon, email.
Delete Data
Aplikasi data Mahasiswa/docker-server/src/public/deletedata.php

27. 24
Dalam melakukan hapus data yang terkoneksi dengan databse ini saya lakukan
berdasarkan id. Jadi client akan mengirimkan request delete berdasarkan id-nya.
Update Data
Aplikasi data Mahasiswa/docker-server/src/public/editdata.php
Untuk Update data kurang lebih source code-nya sama dengan padasaat mengirimkan
request POST data / tambah data (terdapat variable data yang isinya adalah kolom-kolom
tabel database. Seperti id, nama, nim, jurusan, nomor_telepon, email. Melainkan hanya
beda di query berupa perintah “UPDATE”.
3.2 Pembuatan Aplikasi Mobile CRUD Dengan Flutter Sebagai Front-End
Untuk mendapatkan tampilan aplikasi yang baik, interaktif, sekaligus
responsive untuk semua perangkat mobile, saya menggunakan salah satu
dari framework mobile development yaitu : Flutter. Fungsi dari Flutter ini
adalah sebagai kerangka kerja yang membantu developer dalam
mengembangkan aplikasi mobile terutama aplikasi hybrid, serta agar tampilan
aplikasi hybrid dapat menyerupai aplikasi bawaan pada Android (seolah-olah).
3.2.1 Installasi Flutter
Sebelum menginstall Flutter, kita perlu terlebih dahulu menginstall android
studio agar flutter bisa berjalan dengan baik. Android studio bisa diinstall
melalui link https://developer.android.com/studio. Tinggal mengikuti
langkahnya lalu install seperti biasa. Setelah itu android studio dikonfigurasi
sedemikian rupa. Kita membutuhkan android SDK platform agar flutter

28. 25
dapat berjalan lancar.
Sebagaimana penjelasan diatas merupakan salah satu alasan saya memilih
untuk menggunakan Flutter sebagai perangkat pemngembangan aplikasi
hybrid mobile saya. Flutter sendiri bisa di downloadmelalui situs web-nya
langsung. Flutter bisa didownload melalui https://docs.flutter.dev/get-
started/install disini terdapat banyak OS yang bisa dipakai untuk menginstall
flutter.
Konfigurasi flutter yaitu pertama setting path flutter. Setelah installasi flutter selesai di
direktori yang diinginkan, langsung saja ke file flutter/bin dan copy path tersebut.
Kemudian kedalam search bar kita tuliskan “environment” dan klik path lalu paste path
flutter tersebut kedalam path. Setelah itu buka cmd dan tuliskan “flutter doctor”(tanpa
petik)
Jik terdapat isu seperti diatas, kita tinggal meng-run `flutter doctor --android-licenses` dan

29. 26
flutter akan berjalan dengan baik.
Untuk membuat dan menjalankan aplikasi flutter di VSCode kita bisa menekan
CTRL+Shift+P untuk membuat folder project baru. Nantinya akan muncul bar diatas dan
tekan flutter:new project lalu pilih bagian Module
3.2.2 Coding / Source Code
Langkah Pertama =
pubspec.yaml
Memberi nama aplikasi menjadi jualdata
Menambahkan library http: any agar bisa menjalankan query http yaitu post,get,delete,get.
Juga menambahkan library icon agar bisa menampakkan icon di aplikasi.

30. 27
Di bagian flutter akan terdapat assets yang di comment #. Kita perlu menghapus comment dan
menambahkan syntax seperti diatas. Pastikan nama file sama dengan yang dimasukkan.
Ini bisa untuk menambahkan foto ke dalam aplikasi.
test/widget_test.dart
Mengubah import package menjadi jualdata/main_copy.dart.
Juga mengubah yang asalnya MyApp menjadi Home (line 16).

31. 28
assets/images/rizky.jpg
Masukkan foto yang ingin kita masukkan ke aplikasi ke dalam assets/images/
Main_copy.dart
Masuk ke file main_copy.dart, saya membuat main_copy.dart karena untuk backup jika terjadi error.
Import beberapa package seperti diatas, itu akan berimpact pada koding error anda.
Buat void main untuk menjalankan apa yang pertama kali aplikasi dibuka, kali ini saya membuat splash

32. 29
screen ketika aplikasi dibuka pertama kali.
Buat class Home untuk masuk ke inti aplikasi.
splashscreen_view.dart
Import package yang tertera diatas.
Buat class SplashScreenPage dengan widget stateful dan buat class _SplashScreenState dengan State dan
di override dan buat void yang mengarah ke startSplashScreen.
Buat startSplashScreen dan di syncrhonize lalu buat variabel duration dengan syntax dari flutter Duration
lalu pilih berapa detik. Lalu tampilkan dengan return dengan tampilan MaterialPageRoute setelah itu
tampilkan lagi ke Home.

33. 30
Buat @override seperti diatas untuk menjalankan syntax selanjutnya. Setelah itu buat Widget build dan
kode seperti diatas. Ini untuk menampilkan Splash Screen yaitu foto, nama, dan nim. Splash Screen adalah
tampilan awal ketika aplikasi dijalankan sebelum masuk ke inti aplikasi.

34. 31
main_copy.dart
Kembali ke main_copy.dart lalu buat class _HomeState. Ini nanti akan dimasukkan beberapa syntax penting
dan juga ini adalah tampilan awal ketika aplikasi dijalankan.
Mula-mula ambil data dari database dengan syntax diatas. Saya menggunakan docker makanya http diisi ip
address yang dimiliki docker. Jika teman-teman menggunakan xampp maka tuliskan saja
localhost/folder/file yang dimasukkan ke htdocs lalu tampilkan decode nya.

35. 32
Penjelasan :
Buat Widget build dengan syntax seperti diatas. Ini untuk tampilan awal

36. 33
Ini untuk menampilkan icon dan tampilan ketika jsondecode dari getdata dijalankan.

37. 34

38. 35
Mula-mula import package yang berguna untuk koding di adddata.dart. jangan lupa buat controller agar
data yang kita masukkan ke form tambah data nanti bisa disimpan. Lalu buat void dan variabel url yang
sesuai dengan ip address local server anda. Untuk mengecek ip address local server bisa di command prompt
lalu ketik “ipconfig” dan copas bagian IPv4 Address setelah itu code isikan sesuai main_copy.dart tetapi
ubah menjadi /adddata.dart.
Selanjutnya setelah @override itu adalah syntax untuk form tambah data. Masukkan controller di masing-
masing textField dan beri tombol agar ketika ditekan akan masuk ke variabel addData();
Editdata.dart
Sama seperti adddata.dart namun ganti url menjadi editdata.dart dan tambahkan syntax untuk memanggil
id ketika ingin mengubah suatu data.

39. 36
Tambahkan controller untuk ubah data juga tetapi kita tidak membuat controller baru melainkan
mengganti controller yang sudah ada dan diisikan dengan yang baru.

40. 37
Untuk form ubah data juga sama persis seperti tambah data bedanya yaitu untuk form ubah data akan
menampilkan data spesfik di form ubah data itu sendiri.
Detail.dart

41. 38
detail.dart ini adalah file untuk edit dan hapus data. Bisa dilihat dibawah syntax @override yaitu widget
build yaitu adalah untuk menampilkan data spesifik yang telah ada di database dan ditampilkan ke dalam
sebuah container.
Juga disini untuk menampilkan detail dari data spesifik. Ini juga tombol untuk mengubah dan menghapus
data spesifik tersebut.
Untuk class _DetailState itu adalah syntax untuk menjalankan hapus data. Sebelumnya diberi konfirmasi
box untuk menghapus data atau tidak.
Flutter ini adalah bahasa pmerograman hybrid yang bisa dijalankan melalui build aplikasi maupun website.
Untuk kali ini saya membuat flutter dengan database lokal dengan wifi ip address yang sama untuk
memudahkan crud di website maupun aplikasi.

42. 39
3.1 Isi Tampilan Aplikasi Mobile ( Kompatibel Dan Responsive With
Framework )
Setelah back end dan front end sudah selesai dibuat,applikasi hybrid mobile
siap digunkan. Berikut ini tampilan dari aplikasi crud flutter. Kelebihan dari
flutter yaitu kita bisa menjalankannya lewat browser kita maupun build ke
aplikasi.
Untuk menjalankan lewat browser kita hanya perlu mengetikkan ke
terminal “flutter run -d chrome” dan pastikan file sudah berada di file flutter kita.

43. 40
Disini terlihat bahwa isi dari database sudah terbaca dan menampilkan data mahasiswa. Ketika kita ingin
klik tambah akan masuk ke form tambah data.
Setelah mengisikan data langsung pencet submit agar data masuk kedalam database dan ditampilkan ke
tampilan awal.

44. 41
Ketika ingin melihat detail dari data tersebut kita bisa mengeklik nama atau bagian dari data tersebut.
Disitu terlihat bahwa terdapat tombol edit dan delete yang berfungsi untuk mengubah dan menghapus
data.
Jika ingin mengubah data tinggal klik edit dan kita akan ditujukan ke form ubah data yang telah terdapat
isi dari data yang bersangkutan.

45. 42
Ketika telah mengubah data tinggal klik submit lagi dan data akan berhasil diubah. Kali ini saya
mengubah nim menjadi 002.
Setelah itu ketika ingin menghapus data tinggal klik tombol DELETE. Akan terdapat notifikasi sebelum
menghapus data.

46. 43
Jika sudah yakin ingin menghapus tinggal klik Pastinya dan data akan terhapus otomatis.
Terlihat data telah terhapus sepenuhnya. Ini juga bisa di build kedalam Aplikasi juga hanya tinggal
debugging terlebih dahulu untuk menginstall aplikasi kedalam mobile kita.

47. 44
Debugging aplikasi
Untuk masuk ke opsi pengembang, kita perlu mengeklik beberapa kali “Versi MIUI” jika dari
Xiaomi maupun redmi. Setelah itu masuk ke bagan Opsi Pengembang dan scroll ke bawah
sampai terlihat Debugging USB dan Install Via USB itu diaktifkan semua lalu debugging siap
digunakan.

48. 45
Setelah itu sama seperti di browser maka akan muncul splash screen dan lalu masuk kedalam
aplikasinya.

49. 46
Mendapatkan perlakuan sama seperti di browser jika ingin menambah data tinggal mengeklik
icon tambah di bawah kanan dan akan masuk ke form tambah data.
Setelah mengisikan data kedalam form lalu klik submit dan data akan langsung tertambah di
database dan langsung ditampilkan ke tampilan awal.

50. 47
Ketika ingin melihat detail data tinggal mengeklik bagian nama atau di sekitar data tersebut dan akan
muncul bagian detail data.
Jika ingin mengubah data kita bisa mengeklik tombol edit dan juga jika ingin menghapus data bisa klik
tombol Delete. Ketika tombol edit ditekan maka akan muncul form untuk ubah data. Saya akan mengubah
data pada jurusan menjadi teknik mesin.

51. 48
Ini adalah tampilan ketika kita memencet tombol Delete. Ada alert yang akan muncul apakah sudah yakin
ingin menghapus data atau tidak dan ada 2 tombol untuk menghapus dan tidak.
Ketika kita memencet tombol Pastinya yang berarti yakin untuk menghapus data, maka data akan
terhapus sepenuhnya dan akan kembali ke tampilan awal dimana data yang telah dihapus sudah hilang.

52. 49
BAB IV
PENUTUP
4.1 Kesimpulan
Dapat disimpulkan bahwa pada zaman modern ini, kehidupan kita telah
maju daripada zaman yang lalu. Di zaman ini telah mengenal adanya aplikasi web,
mobile, dan lainnya. Kita pun tidak luput dari adanya aplikasi tersebut. Mulai dari
sosial media, membeli tiket transportasi, dan sebagainya. Perkembangan teknologi
yang membuat kita belajar juga bagaimana pemahaman kita terhadap aplikasi-
aplikasi tersebut. Kita pula yang akan memimpin negeri ini dengan apa yang kita
bisa. Maka dari itu, saya membuat aplikasi ini agar tidak ketinggalan zaman dan
maju ke zaman selanjutnya yang juga akan memudahkan kita melakukan apapun
lewat aplikasi.
4.1 Saran
Dalam progress membuat aplikasi ini, saya mendapat kendala karena
kekurangan adanya pemahaman tentang konsep aplikasi itu sendiri. Ini dikarenakan
adanya virus korona yang membuat semua hal menjadi terhambat. Semoga dalam
kedepannya mahasiswa dapat memahami secara otodidak meskipun telah diberikan
pemahaman pada saat kuliah daring.

53. 50