MOBILE

MAKALAH
“PEMBUATAN APLIKASI HYBRID MOBILE
PROGRAMMING MENGGUNAKAN FRAMEWORK7
DENGAN MESIN BACKEND VIRTUALISASI
DOCKER”
Disusun Oleh :
Vicinthia Veren Sudrajat
2014321018
PERGURUAN TINGGI UNIVERSITAS BHAYANGKARA
ANGKATAN 2020/2021

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 Program- ming, 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
dengan tangan terbuka saya menerima segala saran dan kritik dari pembaca agar
penulis dapat memperbaiki makalah 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
Vicinthia Veren Sudrajat

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 Framework7
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 Framework7 Sebagai
Front-End
3.2.1 Installasi Framework 7
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

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 dapat
berupa hiburan, pembelajaran, maupun membantu pengguna dalam kehidupan
sehari-hari. Aplikasi mobile menyediakan berbagai layanan seperti komunikasi dan
pesan, 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.
1

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
framework7 ?
• 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.
2

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 memenuhi
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

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
4

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.
5

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
sebenarnya 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
6

akan manajemen semuanya urusan di docker ini). Jadi aplikasi client
yang kita ketik- kan sebelumnya (seperti mengetikkan docker
info,dll) itu sebenarnya 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.
7

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.
8

2.1.6 Pengertian Framework7
Adalah HTML mobile Framework gratis dan open-source yang
digunakan untuk mengembangkan aplikasi hybrid baik itu aplikasi mobile
ataupin website. Dengan menggunakan framework ini maka tampilan
aplikasi yang dikembangkan dapat menyerupai aplikasi bawaan pada iOS,
Android, maupun Windows (seolah-olah) agar terlihat lebih asli (native).
Pendekatan utama / base dari Framework7 adalah memberikan ke-
sempatan kepada para developer untuk menciptakan aplikasi iOS dan
Android dengan HTML, CSS, dan JavaScript dengan lebih mudah dan jelas.
Dengan rangkaian komponen UI yang disediakan oleh Framework7 ini
memungkinkan kita untuk membuat aplikasi web, aplikasi web progresif
atau Progresive Web APP (PWA) dan aplikasi iOS dan Android dengan
tampilan dan nuansa asli / native. Framework7 juga memiliki ekosistem
yang luas, karena mempunyai beberapa library seperti JavaScript, Vue js,
React dan Svelte yang sangat berguna ketika dalam pengembangan aplikasi
yang dibuat.
9

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. Yang
mana mesin ini nantinya akan menampung beberapa Image / aplikasi yang dibutuh-
kan 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/
10

Sesuai dengan persyaratan tersebut, maka saya melakukan cek Windows
Version terlebih dahulu.
Windows spesifications yang saya gunakan
Jadi apabila windows version kita kurang dari (build 19041) or higher (ber-
dasarkan syarat) maka kita tidak bisa menginstall aplikasi Docker Desktop-
nya. Nah berhubung sebelumnya Windows Version yang saya pu- nya itu
dibawah 19041 maka saya melakukan upgrade Windows Version terlebih
dahulu (menjadi Version 20H2 dan Build 19042).
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 diatas
11

Lalu saya 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 saya meng-restart laptop saya agar installasi WSL dan update
ke WSL2 berjalan dengan complete.
Langkah selanjutnya adalah download dan install Linux Kernel Update
Package. Saya mendownload nya di :
https://wslstorestorage.bob.exe.windows.net/wslblob/wsl_update_x64.msi
Installasi
12

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
Untuk melihat linux distribution yang sudah terinstall di WSL bisa meng-
gunakan command : wsl --list verbose
Cek linux distribution yang ada di WSL
13

Lalu setelah system requiremets diatas sudah dilakukan, saya langsung
mendownload aplikasi Docker Desktop Windows Version.
https://docs.docker.com/desktop/windows/install/
Setelah berhasil didonwload, saya menginstall-nya.
Tampilan awal Doscker Desktop setelah diinstall
14

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 Mob-APP
Di dalam folder Mob-APP ini lah sebagai tempat beberapa folder dan file
untuk pengembangan aplikasi Android saya.
15

Kemudian langsung saja saya melakukan open folder Mob-APP 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.
MOB_APP/docker-2/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 (kare
na 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.
16

Setelah membuat Dockerfile, saya lanjut untuk membuat file configura-
tion Nginx. Nginx tersebut saya gunakan sebagai Web Server. Berikut ini
source code config nginx yang saya gunakan.
MOB_APP/docker-2/nginx/nginx.conf
Dalam konfigurasi Server tersebut diatur mulai dari seperti ; letak port
server (80), file yang pertama kali dimunculkan ( bisa index.html, index.
htm, 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),
file root aplikasi (root /var/www/ori_server), dst.
17

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.
MOB_APP/docker-2/docker-compose.yml
File docker-compose.yml ini dimulai dengan definisi version, saya meng-
gunakan (version: “3.8”). hal ini akan memberi tahu docker-compose ten-
tang versi konfigurasi yang saya gunakan. Kemudian terdapat blok services,
untuk menyiapkan layanan yang merupakan baigian dari lingkungan ini.
Dalam kasus ini, saya memiliki sebuah layanan tunggal yang disebut app.
18

Berikut ini saya jelaskan secara rinci mengenai source code docker-
compose.yml.
• Build Dockerfile / image buatan sendiri
Dockerfile yang sebelumnya telah dibuat pada docker-compose ini
akan dibuatkan sebuah container sendiri dengan nama my-app.
Dan fungsi dari volumes adalah yang mana image dockerfile saya
akan disimpan sebagai bagian dari sistem file host yang dibuatkan
dan dikelola oleh docker atau data yang ada pada Container my-app
tersebut akan dimuat dalam volumes (../src:/var/www).
• Build Nginx
Untuk web server nginx juga dibuatkan sebuah Container dengan
nama my-server, dan memakai / PULL image : nginx:1.19-alpine
version. Ports yang digunakan yaitu “8000:80”, 8000 sebagai port
yang bisa diakses dari luar, dan 80 sebagai port default.
19

• Build db (perangkat lunak database)
Yang akan dibuild container selanjutnya adalah untuk db yang mana
menggunakan / PULL image mariadb:10.3 version. Dan disini
saya juga mengset environment bahwa untuk password dari
MySQL adalah root. Dan agar data tidak hilang meskipun container
db terhapus / dihapus maka saya memerlukan volumes : /bitnami
/mariadb untuk menyimpan database nya.
• Build phpMyAdmin
Sebuah container phpMyAdmin juga dibuild serta container terse-
but 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 atau
pembuatan aplikasi Android saya nantinya.
20

Build docker-compose
Setelah selesai melakukan konfigurasi pada Dockerfile dan docker-
compose nya , yang saya lakukan 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 MOB_APP/docker-2/docker-compose.yml
Command atau perintah docker yang digunakan untuk build docker-
compose yaitu : docker-compose up --build. Perintah tersebut di run pada
terminal yang mengacu pada folder docker-compose berada (dalam kasus
ini letak docker-compose saya : MOB_APP/docker-2) jadi enter command
-nya 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).
Success bulld container dari docker-compose.yml 21

Apabila kita ingin meng-run server kita maka kita harus menghidupkan
multicontainer-nya dahulu (docker-2). Dengan cara klik tombol start
pada aplikasi docker desktop atau dengan cara manual mengetikkan perin-
tah atau command docker-compose start ke terminal.
Terminal MOB_APP/docker-2/docker-compose.yml
Apabila muncul keterangan done, maka itu menandakan bahwa semua con-
tainner yang ada sudah start atau run. Pada docker desktop container-
container tersebut akan berwarna hijau serta server siap digunakan.
Docker desktop (server container running)
22

3.1.3 Source Code Program Back End
Pada pembuatan back end server ini saya menggunakan bahasa pe-
mograman PHP. Serta tujuan dari back end ini dibuat adalah untuk mendu-
kung 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 dengan
MySQL aktif / database yang ada. Berikut ini program php saya sebagai
back end.
• Konfigurasi Koneksi Database
MOB_APP/src/ori_server/koneksi.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 (“sewa_apartemen”).
• GET Data
MOB_APP/src/ori_server/tampil.php
23

Codingan diatas digunakan untuk GET data / menampilkan data
yang ada didalam database. Data diambil dari database
sewa_apartemen lebih tepatnya pada tabel penyewa. Jadi dengan
program ini saya bisa menampilkan data dari database ke layar user
nantinya. Kemudian pada codingan saya diatas itu saya beri tambah-
an code setting CORS (untuk agar php memberikan atau meng-
izinkan framework mengakses resource data php yang ada.). Serta
datanya nanti akan dikirim berupa JSON.
• Create Data
atau POST data, dari tabel yang ada didalam database yang dicantum
kan pada simpan.php ini yang mana menggunakan mysqli query,
dan menggunakan method POST.
Set response server pada saat terdapat request POST yang dikirim
kan, menggunakan response method.
MOB_APP/src/ori_server/simpan.php
Dalam coding-an tersebut terdapat sebuah query yang berisikan
parameter variable koneksi, variable data yang isinya dalah kolom-
kolom tabel databasenya. Seperti : id penyewa, nama penyewa, no
ktp, gaji bln, ttl, kota, kecamtan,dan no telp. Data tersebut akan
dikirimkan berupa respon dari server dalam bentuk JSON.
24

• Delete Data
MOB_APP/src/ori_server/hapus.php
Dalam melakukan hapus data yang terkoneksi dengan databse sewa
apartemen ini saya lakukan berdasarkan id. Jadi client akan mengi-
rimkan request delete berdasarkan id-nya. Server akan melakukan
respon balik dengan berupa pesan “SUKSES” dan data tersebut
berhasil dihapus. Dan tetap data tersebut nantinya akan berupa
JSON.
• Update Data
MOB_APP/src/ori_server/ubah.php
25

Untuk Update data kurang lebih source code-nya sama dengan pada
saat mengirimkan request POST data / tambah data (terdapat
variable data yang isinya adalah kolom-kolom tabel database. Seper-
ti : id penyewa, nama penyewa, no ktp, gaji bln, ttl, kota, kecamatan,
dan no telp). Melainkan hanya beda di query berupa perintah
“UPDATE”. Ketika request update berhasil dilaksanakan sama si
server maka server akan merespon balik client dengan berupa pesan
“Berhasil Disimpan!”. Dan tetap data tersebut dibalikkan ke client
dalam bentuk JSON.
3.2 Pembuatan Aplikasi Mobile CRUD Dengan Framework7 Sebagai Front-
End
Untuk mendapatkan tampilan aplikasi yang baik, interaktif, sekaligus res-
ponsive untuk semua perangkat mobile, saya menggunakan salah satu dari
framework mobile development yaitu : Framework7. Fungsi dari Framework7
ini adalah sebagai kerangka kerja yang membantu developer dalam mengem-
bangkan aplikasi mobile terutama aplikasi hybrid, serta agar tampilan aplikasi
hybrid say aini dapat menyerupai aplikasi bawaan pada Android (seolah-olah).
3.2.1 Installasi Framework7
Sebagaimana penjelasan diatas merupakan salah satu alasan saya
memilih untuk menggunakan Framework7 sebagai perangkat pemngem-
bangan aplikasi hybrid mobile saya. Framework7 sendiri bisa di download
melalui situs web-nya langsung. Disana terdapat 2 cara untuk penginstalasi-
nya, yaitu : 1. melalui CMD dengan NPM, dan 2. melalui Github
Repository Framework7. Dalam kali ini,saya menggunakan cara install
yang ke-2, melalui situs Github Framework7.
26

https://github.com/framework7io/Framework7
Ketika didownload Framework7 nya nanti itu berupa ZIP file. Kemudian
diekstrak file pada folder tertentu (disini saya pada folder Resource_ MOB
_APP). Apabila sudah selesai mengekstraknya maka Framework7 siap un-
tuk digunakan.
3.2.2 Coding / Source Code
Langkah Pertama = melakukan konfigurasi Path pada index.html / file
yang pertama kali dimuat ketika diakses oleh user. Konfigurasi mengenai path
yang dibutuhkan aplikasi saya. Berikut ini source code pada program :
Konfigurasi atau menambahkan path untuk Library bundle CSS dan Custom
app styles.
Resource_MOB_APP/index.html
Dimana konfigurasi path tersebut berisi alamat lokasi penempatan file yang
ada, baik yang default (dari framework7-nya sendiri) maupun costum.
27

Konfigurasi atau menambahkan path untuk Library bundle JS (Framework7)
dan path untuk app js (Custom sesaui dengan aplikasi yang akan dibuat).
Dimana konfigurasi path tersebut berisi alamat lokasi penempatan file yang
ada, baik yang default (dari framework7-nya sendiri) maupun costum.
Langkah Ke Dua = membuat tampilan / view halaman index.php,
menggunakan source code seperti dibawah ini :
Resource_MOB_APP/index.html (bagian view yang menampilkan semua
data ) | 1
28

Resource_MOB_APP/index.html (bagian view yang menampilkan semua
data ) | 2
Source code diatas tersebut akan menampilkan halaman semua data yang
telah dikoneksikan dengan database, serta memberikan fungsi pada
sebuah tombol “tambah” (ketika tombol diklik maka akan didirect langusng
ke halaman dengan url atau href “/tambah/”)
Langkah Ke Tiga = membuat halaman tambah data, menggunakan source
code seperti dibawah ini :
Resource_MOB_APP/index.html (bagian untuk halaman tambah data) | 1
29

30

Beberapa source code diatas itu merupakan untuk membuat halaman tam-
bah data. Apabila tombol “Tambah” di halaman index.php itu diklik maka
dia akan diarahkan langsung ke halaman tambah data.php ini, dan isi dari
halaman ini adalah berupa seperti form kosong dan nantinya user akan menam-
bahkan datanya pada form yang sudah disediakan. serta memberikan fungsi
pada sebuah tombol “simpan” (ketika tombol simpan diklik maka data yang
dimasukkan pada form tambah data oleh user tersebut akan tersimpan secara
otomatis di phpMyAdmin setalah itu data baru akan tampil di halaman
utama atau index.php ).
31

Langkah Ke Empat = membuat halaman ubah data, menggunakan
source code dibawah ini :
Resource_MOB_APP/index.html (bagian untuk halaman ubah data) | 1
32

Dengan source code diatas saya dapat membuat sebuah halaman yang diguna-
kan untuk mengubah atau mengedit data yang ada. Halaman ini seperti
sebuah form yang telah diisi dengan data (berdasarkan id data), apabila user
ingin mengubahnya datanya maka bisa secara langsung mengubahnya dan data
akan terubah ketika klik tombol “Simpan”, setelah itu data akan terupdate
dan tampil pada halaman utama (index.php) dengan data yang user edit atau
ubah.
33

Langkah Ke Lima = melakukan konfigurasi pada file java script untuk
aplikasi yang saya buat (Custom : my-app.js). Dilakukan agar user dan
program dapat berkomunikasi dengan lebih baik, interaktif, serta program
CRUD berjalan.
Resource_MOB_APP/js/my-app.js (bagian beberapa konfigurasi untuk
aplikasi yang dibuat)
Langkah Ke Enam = melakukan atau membuat program untuk bisa
mengirim sebuah request terhadap server untuk menampilakan semua
data yang bersal dari database ke halaman index.php. Berikut ini source
code yang saya gunakan :
Resource_MOB_APP/js/my-app.js (request GET ALL Data)
34

Dimana pada codingan saya itu dimaksudkan untuk mengirimkan sebuah
request GET ALL Data pada database yang sudah dikonfigurasi sebelunya
pada server. Dan nanti data yang dikirim oleh server dan ditangkap oleh
client akan berbentuk type JSON.
Langkah Ke Tujuh = membuat keberhasilan client melakukan
request POST Data / Tambah data kepada server .Berikut ini source-
Resource_MOB_APP/js/my-app.js (request POST Data / Tambah Data) | 1
Resource_MOB_APP/js/my-app.js (request POST Data / Tambah Data) | 2
Request post data kepada server, kemudian server meresponnya dengan
memasukkan data barunya ke dalam database dan menampilkannya dalam
halam utama.
35

Langkah Ke Delapan = membuat keberhasilan client melakukan
request DELETE Data / hapus data kepada server .Berikut ini source-
Resource_MOB_APP/js/my-app.js (request DELETE Data / Hapus Data)
Langkah Ke Sembilan = membuat keberhasilan client melakukan
request Ubah Data kepada server .Berikut ini source code yang saya
gunakan :
Resource_MOB_APP/js/my-app.js (request Ubah Data) | 1
36

Resource_MOB_APP/js/my-app.js (request Ubah Data) | 2
3.3 Isi Tampilan Aplikasi Mobile ( Kompatibel Dan Responsive With
Framework )
Setelah back end dan front end sudah selesai dibuat,applikasi hybrid mobile
saya siap digunkan. Berikut ini tampilan dari aplikasi saya.
Resource_MOB_APP/index.html (GET ALL Data)
Yang mana ini saya jalankan melalui browser di laptop terlebih dahulu, kondisi
belum saya compile jadi sebuah apk yang dijalan di hp.
37

Resource_MOB_APP/index.html (Halaman Tambah Data)
Apabila form tambah data di isi dan klik tombol simpan, apabila sukses maka
akan menampilan pop up alert seperti pada gambar dibawah ini.
Data yang telah ditambahkan langsung ditampilkan pada halaman utama (data no
5) yang merupakan data baru yang ditambahkan sebelumnya.
38

Resource_MOB_APP/index.html (aksi hapus data)
Ketika ingin menghapus data yang ada, tinggal klik aksi icon tampat sampah.
Dan ketika sukses maka akan muncul pop up alert yang memberitahu bahwa hapus
data berhasil.
Resource_MOB_APP/index.html (halaman ubah data)
Dengan meng-klik icon pensil yang ada pada halaman utama, maka nanti akan
diarah ke halaman ubah data seperti gambar diatas. Berupa form yang sudah ada
datanya berdasarkan id. Ketika sudah mengedit / mengubah datanya, maka klik
tombol simpan yang ada dibawahnya.
39

apabila sukses maka akan menampilan pop up alert seperti pada gambar dibawah
ini.
Data tersebut akan ditampilkan pada halaman utama dengan kondisi yang ter-
update.
Melakukan Compile Menjadi Sebuah File Aplikasi
Saya menggunakan Cordova untuk mengcompile menjadi sebuah aplikasi
android. Langkah pertama yang saya lakukan adalah installasi Cordova dan
konfigurasi Path Cordova di laptop.
https://cordova.apache.org/#getstarted
40

Saya melakukannya seperti arahan yang ada di situs Cordova / seperti gambar
diatas. Setelah installasi selesai maka lanjut untuk membuat platform (platform
Android) guna build apk-nya, hal ini dilakukan di CMD, Setelah add platform
selesai, terbentuklah sebuah folder yang berisi beberapa folder project untuk
mendukung compile jadi apk Andorid.
Beberapa File Hasil Dari Cordova Add Platform
Didalam folder www terdapat file-file HTML,CSS,JavaScript, dll yang merupakan
file program pembuatan aplikasi saya.
Build Aplikasi menggunakan Cordova, cara yang saya lakukan adalah
seperti ini : enter command “cordova build” di cmd
Command diatas dilakukan di folder project Cordova APP yang sebelumnya telah
dibuat (D:/Cordova_APP/UjiApp)
Ditunggu sampai BUILD SUCCESSFUL, nanti file apk androidnya berada pada
folder android/app/build/outputs/apk/debug/app-debug.apk
41

Run Aplikasi, setelah dibuild maka aplikasi tersebut sudah bisa dijalankan
di perangkat mobile android. Untuk prosess intallasi aplikasi ke hp android saya
melakukan enter command cordova run ( disini saya installasi langsung melalui
USB Debugging) di CMD.
Command diatas dilakukan di folder project Cordova APP yang sebelumnya telah
dibuat (D:/Cordova_APP/UjiApp)
Ditunngu sampai BUILD SUCCESSFUL, dan INSTALL SUCCESS serta
LAUNCH SUCCESS
Proses installasi berhasil di hp Android saya
42

Launch aplikasi berhasil, serta Splash Screen juga berhasil ditambahkan pada
aplikasi
View halaman utama dari aplikasi hybrid CRUD saya
Tetapi, untuk saat ini saya masih belum bisa bagaimana caranya agar database ikut
tetap aktif ketika dicompile menjadi sebuah aplikasi, sedangkan ketika dijalan di
browser laptop itu databasenya aktif.

BAB IV
PENUTUP
4.1 Kesimpulan
Dapat disimpulkan bahwa pada zaman modern seperti sekarang ini,
kehidupan tidak lepas dari yang namanya mobile, hamper seluruh kegiatan kita
dikerjakan melalui mobile. Mulai dari urusan manajemen data, transportasi, dll bisa
dilakukan melalui mobile. Perkembnagn teknologi komunikasi sangat pesat dan
cepat. Tidak hanya perangkat mobile saja yang berkembang, aplikasi yang didalam-
nya juga semakin berkembang. Seperti halnya aplikasi yang saya buat ini dimana
berjenis Hybrid dan berupa aplikasi yang menjalankan atau melakukan CRUD.
Sehingga dengan aplikasi ini kita bisa memanajemen data menggunakan peragkat
mobile dengan sangat praktis.
4.1 Saran
Selama saya membuat aplikasi mobile programming jenis hybrid ini
terkadang saya mengalami kesulitan dikarenakan saya tidak bisa secara leluasa
sharing,bertanya dengan yang lain, dikarenakan perkuliahan diadakan secara online
sebab pandemic corona.
Semoga kedepannya saya dan mahasiswa-mahasiswa lainnya dapat mem-
buat aplikasi-aplikasi mobile programming dan paham betul dalam pembuatannya.
Serta semoga saya bisa menemukan solusi dari problematic yang saya temui
sebelumnya, Dan terus dapat mempelajari teknologi-teknologi baru sesuai dengan
perkembangan zaman.

MOBILE

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to MOBILE

Similar to MOBILE (20)

Recently uploaded

Recently uploaded (9)

MOBILE