Android Um N

MODUL PRAKTIKUM
IS534– MOBILE APPLICATION DEVELOPMENT

PROGRAM SARJANA S1 SISTEM INFORMASI
FAKULTAS TEKNIK DAN INFORMATIKA
Date Issued :
PROGRAM STUDI SISTEM INFORMASI

FAKULTAS TEKNIK DAN INFORMATIKA
UNIVERSITAS MULTIMEDIA NUSANTARA
Gedung B Lantai 5, Kampus UMN
Jl. Scientia Boulevard, Gading Serpong, Tangerang, Banten-15811 Indonesia
Telp: +62-21.5422.0808 (ext. 1803), email: ict.lab@umn.ac.id, web: umn.ac.id
DAFTAR ISI
DAFTAR ISI ..................................................................................................................2

CAPAIAN PEMBELAJARAN PRAKTIKUM.......................................................................3
MODUL 1 PENGENALAN ANDROID & IDE ....................................................................4
MODUL 2 ACTIVITY LIFECYCLE & LOGCAT..................................................................16
MODUL 3 LAYOUT & STYLE .......................................................................................26
MODUL 4 WIDGET & DIALOG BOX ............................................................................39
MODUL 5 INTENT......................................................................................................51
MODUL 6 FRAGMENT ...............................................................................................60
MODUL 7 TEMA ........................................................................................................70
MODUL 8 WEBVIEW DAN VIEWPAGER .....................................................................71
MODUL 9 SQLITE DATABASE .....................................................................................75
MODUL 10 DATABASE MYSQL & JSON ......................................................................92
MODUL 11 PARSING DATA JSON ...............................................................................96
MODUL 12 MULTIMEDIA ........................................................................................ 110
MODUL 13 GOOGLE MAPS ...................................................................................... 123
MODUL 14 TEMA .................................................................................................... 134
PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

Hal. 2 dari 134
CAPAIAN PEMBELAJARAN PRAKTIKUM

Hal. 3 dari 134
MODUL 1
PENGENALAN ANDROID & IDE
DESKRIPSI TEMA
1. Membuat aplikasi hello world
2. Mengenal IDE untuk aplikasi android (Android Studio)
3. Menjalankan aplikasi di emulator android
CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

SUB-CLO1 - Students are able to understand and explain the introduction of android and the scope of
mobile application development (IDE) (C2)
PENUNJANG PRAKTIKUM
1. Android Studio
2. Virtual Device / Smartphone (Android OS)
LANGKAH-LANGKAH PRAKTIKUM
Membuat aplikasi hello world
1. Bukalah aplikasi Android Studio
2. Jika baru pertama kali dijalankan, Android Studio akan meminta untuk menentukan lokasi
Android SDK. Android SDK terletak di D:\FTI\IF633_IS534_MOBILE\android-sdk.
Bila sudah ditentukan sebelumnya, maka tidak akan diminta untuk menentukan lokasi
Android SDK.

Hal. 4 dari 134
3. Pilih Start a new Android Studio Project
4. Kemudian pada dialog box yang muncul, masukkan informasi sebagai berikut:
a. Application Name : HelloWorldUMN

b. Company Domain: Prak1_<NIM>.com
c. Project Location : D:\Android_SI\<kode_kelas>\Prak1\<Application_Name>
5. Klik Next

Hal. 5 dari 134
6. Pilih Phone and Tablet dan minimum SDK API 19: Android 4.4 (Kitkat)
7. Klik Next
8. Akan muncul dialog box untuk memilih jenis activity yang akan dibuat. Pilih Empty Activity
dan klik Next

Hal. 6 dari 134
9. Kemudian pada dialog Customize Activity, beri nama Activity Name dengan
nama MainActivity dan Layout Name dengan nama activity_main
10. Klik Finish

11. Setelah itu akan muncul tampilan yang kurang lebih adalah sebagai berikut yang merupakan
tampilan utama dari Android Studio

Hal. 7 dari 134
12. Pada kondisi default, aplikasi Hello World sudah selesai dibuat otomatis oleh
Android Studio
13. Tulisan Hello World! Kita akan ubah menjadi Halo UMN…

Hal. 8 dari 134
14. Cara pertama adalah dengan merubah langsung properties text di TextView
15. Cara kedua adalah dengan menambahkan string value di strings.xml

Beri string name dengan nama halo dan isi elemen string tersebut dengan tulisan Halo UMN..

Hal. 9 dari 134
Pada activity_main.xml, pilih tab Text
Pada properties android:text di TextView, ubah string menjadi “@string/halo”

Hal. 10 dari 134
Menjalankan aplikasi di Emulator Android
Berikutnya aplikasi Hello World yang sudah dibuat akan kita jalankan pada emulator Android.
1. Klik tombol Run yang terdapat pada toolbar di bagian atas atau melalui menu Run >
Run ‘app’
Atau
2. Pada dialog box yang muncul, cek apakah sudah ada virtual devices dengan API 19 yang
tersedia. Jika belum, silahkan pilih tombol Create New Virtual Device di bagian bawah

Hal. 11 dari 134
3. Pilih category Phone kemudian pilih seri handphone yang akan digunakan.
Pada contoh digunakan Nexus 5x.
4. Pilih versi API 19 (Kitkat)

Hal. 12 dari 134
5. Konfigurasi AVD biarkan sesuai default system, kemudian klik Finish
6. Double click virtual device yang sudah kita buat untuk menjalankan emulator

Hal. 13 dari 134
7. Akan muncul virtual device yang sudah dibuat dan juga aplikasi Hello World
yang dibuat

Hal. 14 dari 134
CHALLENGE
Modifikasi tulisan "Halo UMN..." menjadi "Halo <NAMA>". <NAMA> diganti dengan nama
lengkap masing-masing. Kemudian ubah juga judul dari aplikasi "HelloWorldUMN" menjadi
"Aplikasi Pertamaku". Coba juga jalankan aplikasi yang dibuat langsung ke HP yang dimiliki.
Hint: untuk judul dari aplikasi bisa dengan cara merubah string value dengan nama app_name di
strings.xml.
Contoh tampilan yang diinginkan adalah sebagai berikut
REFERENSI
• Siswanto, E. (n.d.). Mobile. In Modul 1.

Hal. 15 dari 134
MODUL 2
ACTIVITY LIFECYCLE & LOGCAT
DESKRIPSI TEMA
1. Mengenal activity lifecycle di dalam aplikasi Android yang dibuat
2. Mampu memanfaatkan logcat untuk mengidentifikasi activity lifecycle dan bug yang terjadi

SUB-CLO2 - Students are able to understand and explain Android Architecture, Activity Lifecycle and
Logcat (C2)
PENUNJANG PRAKTIKUM
1. Android Studio
a. Application Name : Lifecycle_Logcat

b. Company Domain : Prak2_<NIM>.com

Hal. 16 dari 134
4. Klik Next
6. Klik Next
7. Akan muncul dialog box untuk memilih jenis activity yang akan dibuat. Pilih Empty Activity dan klik
Next

Hal. 17 dari 134
8. Kemudian pada dialog Customize Activity, beri nama Activity Name dengan nama
MainActivity dan Layout Name dengan nama activity_main
9. Klik Finish
10. Buka MainActivity.java, kemudian tambahkan Log.i(“posisi”, “onCreate”) di dalam method
onCreate dan lakukan import library Log seperti pada gambar.

Hal. 18 dari 134
11. Kemudian tambahkan method lainnya dengan menambahkan code berikut ini atau bisa
degenerate otomatis dengan menekan Alt-Insert pada keyboard.

Hal. 19 dari 134
12. Buka Window Logcat dengan cara mengklik Android Monitor pada bagian bawah aplikasi
Android Studio
13. Coba jalankan aplikasi dengan mengklik tombol Run, dan secara default kita akan melihat semua
informasi log dari aplikasi yang dijalankan secara realtime
14. Untuk menampilkan hanya log yang kita butuhkan/buat, bisa dengan melakukan filter pada jendela
Logcat
15. Pilih Dropdown list pada bagian kanan atas jendela Logcat, dan kemudian pilih Edit Filter
Configuration

Hal. 20 dari 134
16. Buat filter baru dengan nama Filter_Lifecycle, kemudian kita filter log berdasarkan tag
namenya dengan memberikan nama log tag yang sudah dibuat yaitu "posisi" dan berikan
package name sesuai dengan package name aplikasi yang dibuat. Kemudian klik ok.
17. Jalankan kembali aplikasi yang dibuat, selanjutnya Logcat hanya akan menampilkan Log yang
memiliki tag name "posisi"
18. Kemudian lakukan eksperimen dengan menekan tombol Home pada device Android. Maka akan
muncul status aplikasi tersebut sebagai berikut

Hal. 21 dari 134
19. Tekan tombol Overview/Recents Button dan klik kembali aplikasi yang ada di list Overview
20. Cek kembali status jendela Logcat

Hal. 22 dari 134
21. Kemudian coba ubah orientasi layar dari Potrait ke Landscape dengan cara menekan tombol
rotate right / left pada tombol di sebelah tampilan virtual device
22. Cek kembali status jendela Logcat

Hal. 23 dari 134
CHALLENGE
1. Jelaskan mengapa activity lifecycle diatas dapat mengalami perubahan pada setiap action
yang sudah dipraktikkan sebelumnya! Tuliskan jawaban Anda dengan memberikan komentar
pada MainActivity.java!
2. Tambahkan satu button pada aplikasi Lifecycle _Logcat dang anti ID button tersebut dengan
button1 dan beri nama button tersebut dengan “Aksi”

Hal. 24 dari 134
3. Masuk ke MainActivity.java dan tambahkan potongan code berikut di dalam method onCreate
4. Buat filter baru di dalam jendela Logcat untuk menangkap Log yang dihasilkan jika button ditekan,
beri nama filter tersebut dengan “Filter_Button”
5. Coba jalankan kembali aplikasi, dan kemudian tekan tombol Aksi dan lihat di dalam jendela Logcat.
Apa log yang muncul? Copy hasil log yang muncul ke dalam komentar pada Challenge pertama
REFERENSI

Hal. 25 dari 134
MODUL 3
LAYOUT & STYLE
DESKRIPSI TEMA
1. Mampu melakukan perubahan style dari tema secara keseluruhan maupun widget yang spesifik
2. Mengenal tipe-tipe layout pada activity Android

SUB-CLO3 - Students are able to use Icon, Theme, Android Manifest and Layout Editor (C3)
PENUNJANG PRAKTIKUM
1. Android Studio
a. Application Name : Layout_Style


Hal. 26 dari 134
4. Klik Next
6. Klik Next
Next

Hal. 27 dari 134
9. Klik Finish
Mengubah Based Style

1. Pada base application theme, warna style ditentukan oleh file XML bernama styles.xml
2. Warna dari colorPrimary, colorPrimaryDark, dan colorAccent diambil dari kumpulan string
warna pada file colors.xml
3. Buka colors.xml dan ubahlah hex code warna untuk colorPrimary, colorPrimaryDark,
colorAccent sesuai dengan preferensi masing-masing.
Acuan pemilihan warna:
https://material.io/guidelines/style/color.html#color-color-palette

Hal. 28 dari 134
Contoh tampilan pada API 25 Contoh tampilan pada API 19
Mengatur Activity Layout

1. Tambahkan Relative Layout ke dalam Component Tree
2. Kemudian tambahkan 3 buah button ke dalam Linear Layout yang sudah dibuat dan beri nama
dengan "Tombol 1", "Tombol 2", dan "Tombol 3". Kemudian ubah juga ID setiap button menjadi
tombol1, tombol2, dan tombol3

Hal. 29 dari 134
3. Beri warna yang berbeda untuk masing-masing button dengan merubah
Properties "Background"

Hal. 30 dari 134
4. Kemudian ubah layout menjadi Linear Layout (horizontal)

Hal. 31 dari 134
5. Kemudian ubah posisi Linear Layout menjadi vertical pada Text Design dan lihat
perubahan yang terjadi pada layout ketiga button
6. Apa yang berbeda antara design Linear Layout Horizontal dengan Vertical? Jawab dengan
memberikan komentar pada MainActivity.Java
7. Simpulkan perbedaan antara LinearLayout dengan RelativeLayout!

Hal. 32 dari 134
Mengatur Width dan Height Widget
1. Gunakan layout terakhir yaitu Linear Layout Vertical
2. Ubah Layout Width semua button menjadi Match Parent

Hal. 33 dari 134
3. Kemudian untuk setiap button, berikan layout_margin sebesar 20dp
CHALLENGE
1. Tambahkan 1 activity baru pada project sebelumnya dengan cara klik kanan pada folder app di
bagian project hierarchy, pilih New > Activity > Empty Activity

Hal. 34 dari 134
2. Beri nama activity name dengan “ListTeman” kemudian klik Finish

Hal. 35 dari 134
3. Kemudian buat layout pada activity "ListTeman" menjadi berisi 3 kolom yaitu untuk kategori
Teman Kuliah, Teman Sekolah, dan Teman Jalan. Kemudian untuk masing-masing kategori
tersebut, buatlah 10 list nama-nama teman sesuai dengan kategori dengan menggunakan TextView.
Gunakan teknik layout dan style yang sudah dipelajari sebelumnya.

Hal. 36 dari 134
4. Tentukan 3 orang teman yang paling akrab dari masing-masing kategori dan ubahlah stylenya
sehingga terlihat berbeda dari nama teman-teman yang lain. Kalian bisa menggunakan
properties Font Family, Text Style, Text Size, Text Color, dan Background. Contoh tampilannya
seperti sebagai berikut ini.
Note:
• Perhatikan kejelasan tulisan, kerapihan design, dan penggunaan warna dalam membuat layout
tersebut.
• Karena terdapat 2 activity pada project tersebut, secara default ketika aplikasi dijalankan pada
emulator maka activity yang pertama kali dibuat yang akan muncul
• Untuk mengubah default activity yang pertama kali dijalankan menjadi activity “ListTeman”,
maka buka AndroidManifest.xml dan pindahkan tag xml untuk action Main dan category Launcher
dari MainActivity ke Activity ListTeman

Hal. 37 dari 134
REFERENSI
• Siswanto, E. (n.d.). Mobile. In Modul 3

Hal. 38 dari 134
MODUL 4
WIDGET & DIALOG BOX
DESKRIPSI TEMA
1. Mampu mengenalkan jenis-jenis widget yang umumnya sering dipakai dalam pembuatan aplikasi
Android
2. Mengenal macam-macam dialog box

SUB-CLO4 - Students are able to use Android Widgets and Dialog Box (C3)
PENUNJANG PRAKTIKUM
1. Android Studio
a. Application Name : Widget_Dialog


Hal. 39 dari 134
4. Klik Next
6. Klik Next
Next

Hal. 40 dari 134
9. Klik Finish
Membuat Fungsi Widget Input dan Dialog Box Sederhana

1. Buatlah layout seperti gambar di bawah ini yang terdiri dari satu Plain Text dan satu Button

Hal. 41 dari 134
2. Berikan hint pada Plain Text dengan tulisan “Input Namamu Disini….”
3. Ganti ID Plain Text dengan txtNama dan ID Button dengan btn Toast
4. Kemudian buka MainActivity.java, pada method onCreate tambahkan source code sebagai
berikut.
5. Jalankan aplikasi dan coba isikan nama kalian dan klik Button Toast, jika benar maka akan
muncul hasil seperti gambar berikut.

Hal. 42 dari 134
6. Setelah berhasil membuat Toast, tambahkan satu Button lagi di bawah Button Toast.
Beri nama “Dialog Box” dan ID btnDialog

Hal. 43 dari 134
7. Kemudian buka MainActivity.java, pada method onCreate tambahkan source code
sebagai berikut.

Hal. 44 dari 134
8. Setelah itu jalankan kembali aplikasi yang dibuat dan coba isikan nama kalian dan klik
Button Dialog, jika benar maka akan muncul hasil seperti gambar berikut.

Hal. 45 dari 134
9. Setelah berhasil, tambahkan source code MainActivity.java Override method onClick
sebagai berikut.
CHALLENGE
1. Buatlah Activity Baru dengan nama “RegisterActivity”

Hal. 46 dari 134
2. Buatlah Layout form registrasi yang terdiri dari TextView, Plain Text, E-mail, Button,
dan Spinner
3. Tambahkan gambar logo UMN untuk mempercantik tampilan form register dengan cara mengkopi
gambar ke dalam folder res > drawable. Cari gambar dengan tipe jpg atau png dan beri nama
logo_umn.jpg. (Nama gambar harus dalam huruf kecil semua dan tidak boleh ada spasi)
4. Kemudian tambahkan widget ImageView ke dalam layout dan pilih gambar Logo UMN yang sudah
dimasukkan

Hal. 47 dari 134
5. Kemudian atur height dari gambar sehingga ukurannya proporsional dengan widget widget
yang lain
6. Ubah ID dari masing-masing Widget sebagai berikut:

• Plain Text Nama : txtNama
• E-mail Text : txtEmail
• Phone Text : txtPhone
• Spinner : spinAsal
• Button : btnRegister

Hal. 48 dari 134
7. Tambahkan coding sebagai berikut ke dalam RegisterActivity.java untuk menambah daftar
negara ke dalam spinner asal. Negara yang dimasukkan ke dalam array daftarNegara adalah
sebagai berikut: Australia, Belanda, Brunei Darussalam, Filipina, Indonesia, Jepang, Malaysia,
Singapore, Taiwan
8. Setelah itu, buatlah dialog box yang dapat menampilkan konfrimasi detail Nama, Email, Telp, dan
Asal Negara dari data yang sudah diinput dengan tombol Konfirmasi Ya dan Tidak.

Hal. 49 dari 134
9. Jika ditekan Tidak, tidak ada proses yang terjadi. Jika ditekan Ya, tampilakn tulisan
“Data Registrasi Anda berhasil disimpan” dalam bentuk Toast dan bersihkan semua field
registrasi yang sudah diisikan dan ubah focus ke field Nama
Hint:
• Gunakan fungsi <ID_Widget>.setText(“”); untuk menghapus isian Edit Text
• Gunakan fungsi <ID_Widget>.setSelection(<index>); untuk merubah posisi pilihan Spinner
ke posisi tertentu
• Gunakan fungsi <ID_Widget>.requestFocus(); untuk merubah focus ke widget tertentu
REFERENSI

Hal. 50 dari 134
MODUL 5
INTENT
DESKRIPSI TEMA
1. Mampu membedakan explicit dan implicit intent
2. Mampu melakukan parsing data antar activity dengan menggunakan Extra

SUB-CLO5 - Students are able to build applications with Multiple Activity (Intent) (C6)
PENUNJANG PRAKTIKUM
1. Android Studio
a. Application Name : IntentActivity


Hal. 51 dari 134
4. Klik Next
6. Klik Next
Next

Hal. 52 dari 134
9. Klik Finish

Hal. 53 dari 134
Membuat Intent Sederhana
1. Buatlah layout yang terdiri dari 4 buah button. Beri nama button tersebut Activity 1,
Activity 2, Activity 3, Activity 4. Kemudian ubah juga ID dari masing-masing button dengan
btnActivity1, btnActivity2, btnActivity3, btnActivity4
2. Tambahkan 4 Empty Activity baru ke dalam project dengan nama ActivityOne, ActivityTwo,
ActivityThree, ActivityFour

Hal. 54 dari 134
3. Pada masing-masing Activity tersebut, berikan tulisan dan style tulisan yang
berbeda-beda
4. Pada MainActivity, tambahkan coding berikut untuk memberikan action membuka

ActivityOne pada btnActivity 1 ketika diklik dengan menggunakan fungsi Intent
5. Tambahkan juga action untuk btnActivity2, btnActivity3, btnActivity4

6. Setelah itu, coba jalankan aplikasi dan coba klik button yang ada di MainActivity

Hal. 55 dari 134
Parsing Data dengan Intent
1. Tambahkan satu button lagi, beri nama Form Pendaftaran dan beri ID btnForm

Hal. 56 dari 134
2. Kemudian tambahkan juga 1 Edit Text, beri ID edtName, dan hint "Masukkan Nama"
3. Tambahkan satu Empty Activity baru dengan nama FormActivity

Hal. 57 dari 134
4. Pada FormActivity, tambahkan 1 TextView dan berikan ID txtHello
5. Kemudian tambahkan coding berikut untuk memberikan action pada btnForm sekaligus
mengirimkan data nama dari edtName untuk dikirimkan ke FormActivity
6. Pada FormActivity, tambahkan coding berikut pada function onCreate
7. Kemudian coba jalankan aplikasi

Hal. 58 dari 134
CHALLENGE
1. Ubah design FormActivity menjadi sebuah form yang terdiri dari Jenis Kelamin, Umur, Alamat, dan
No Telp. Jenis Kelamin menggunakan Spinner yang memiliki nilai Laki-Laki dan Perempuan, Umur
menggunakan Number Text, Alamat menggunakan Multiline Text, dan No Telp menggunakan
Phone Text.
2. Buatlah form baru dengan nama ResultActivity dan tambahkan 1 TextView untuk menampilkan hasil
data inputan dari FormActivity
3. Buatlah agar data yang diinput dari FormActivity dapat ditampilkan pada ResultActivity dengan
menggunakan Intent.
REFERENSI

Hal. 59 dari 134
MODUL 6
FRAGMENT
DESKRIPSI TEMA
1. Mampu membuat aplikasi fragment sederhana
2. Mampu mengenal dan menggunakan Fragment Manager

SUB-CLO6 - Students are able to build applications with UI Fragment (C6)
PENUNJANG PRAKTIKUM
1. Android Studio
a. Application Name : FragmentApps


Hal. 60 dari 134
4. Klik Next
6. Klik Next
Next

Hal. 61 dari 134
9. Klik Finish

Hal. 62 dari 134
Membuat Fragment Sederhana
1. Tambahkan 2 buah Activity baru dengan nama ActivityFragment1 dan
ActivityFragment2
2. Buatlah layout pada ActivityFragment1 seperti pada contoh gambar berikut.

Hal. 63 dari 134
3. Buatlah layout pada ActivityFragment2 seperti pada contoh gambar berikut.
4. Setelah itu pada ActivityFragment1.java, ubah class ActivityFragment1 menjadi extends

Fragment dan hapus method onCreate kemudian tambahkan method onCreateView dengan
mengetikkan @override dan pilih method View onCreateView dari drop list yang muncul
seperti pada gambar di bawah ini.
5. Lakukan hal yang sama dengan ActivityFragment2.java

Hal. 64 dari 134
6. Kemudian pada layout Main Activity, tambahkan 1 Linear Layout yang di dalamnya
terdiri dari 2 Frame Layout masing-masing dengan ID frame1 dan frame2.

Hal. 65 dari 134
7. Pada MainActivity.java tambahkan baris coding berikut.
8. Kemudian coba jalankan aplikasi!

Hal. 66 dari 134
CHALLENGE
1. Buat Activity baru dengan nama MainActivity2.

2. Atur layout menjadi seperti berikut yang terdiri dari 3 Button dan 1 FrameLayout
3. Tambahkan 3 Activity baru dengan nama PenjumlahanActivity, PenguranganActivity,

PerkalianActivity dengan tampilan layout sebagai berikut.

Hal. 67 dari 134
Hal. 68 dari 134
4. Kemudian dengan menggunakan Fragment atur agar PenjumlahanActivity,
PenguranganActivity, PerkalianActivity dapat muncul di MainActivity2 jika ditekan
tombol Penjumlahan, Pengurangan, ataupun Pembagian. Gunakan fungsi replace pada fragment.
5. Setelah berhasil, buat agar fungsi untuk perhitungan penjumlahan, pengurangan, dan perkalian
dapat berjalan dengan baik dan dapat memberikan hasil perhitungan yang akurat.
REFERENSI

Hal. 69 dari 134
MODUL 7
TEMA
DESKRIPSI TEMA
(Apa yang akan dipelajari mahasiswa pada minggu ini)

SUB-CLO7 - Students are able to solve problems by making applications according to the proposal that
has been approved by the lecturer (A5)
PENUNJANG PRAKTIKUM
1. …
2. …
3. dst
(+ Perlengkapan Apd/Alat Pelindung Diri Yang Harus Digunakan, Jika Ada)
…
REFERENSI

Hal. 70 dari 134
MODUL 8
WEBVIEW DAN VIEWPAGER
DESKRIPSI TEMA
1. Mampu membuat aplikasi mobile dengan menggunakan webview untuk akses internet
2. Mampu mengimplementasikan fungsi ViewPager di dalam membuat aplikasi mobile baik dengan
Fragment ataupun tanpa Fragment

SUB-CLO8 - Students are able to build applications with Web View and View Pager (C6)
PENUNJANG PRAKTIKUM
1. Android Studio
3. Buatlah project baru dengan nama ViewPager

a. Company Domain : Prak8_<NIM>.com
b. Project Location : D:\Android_SI\<kode_kelas>\Prak8\<Application_Name>
4. Klik Next

Hal. 71 dari 134
6. Klik Next
Next

Hal. 72 dari 134
9. Klik Finish
Membuat WebView
1. Buatlah satu Fragment Activity baru dengan nama FragmentOne yang digunakan untuk
menampilkan WebView yang sudah dipelajari di kelas teori
2. Buatlah satu Fragment Activity baru dengan nama FragmentTwo dana tur layout sehingga
berisi petunjuk penggunaan aplikasi yang dibuat. Petunjuk penggunaan boleh terdiri dari teks
ataupun gambar.
Membuat ViewPager dengan Fragment

1. Pada activity_main.xml, tambahkan sebuah ViewPager dengan ID pager

Hal. 73 dari 134
2. Pada MainActivity.java, ketikkan code berikut ini
3. Karena Class ViewPagerAdapter belum dibuat, maka buatlah Class tersebut sebagai berikut
CHALLENGE
1. Tambahkan 1 Fragment Activity dengan nama FragmentThree dan isi layoutnya dengan CV dan
Portfolio pribadi kalian masing-masing. Kemudian tambahkan FragmentThree yang dibuat agar
dapat muncul di dalam ViewPager bersama FragmentOne dan FragmentTwo
2. Minimal isi konten CV dan Portfolio yang harus ada adalah nama, foto, riwayat pendidikan,
pengalaman organisasi / pekerjaan.
REFERENSI

Hal. 74 dari 134
MODUL 9
SQLITE DATABASE
DESKRIPSI TEMA
Mampu membuat aplikasi mobile dengan menggunakan database SQLite

SUB-CLO9 - Students are able to build applications with local database (SQLite) (C6)
PENUNJANG PRAKTIKUM
1. Android Studio
3. Buatlah project baru dengan nama SQLiteProduct

4. Klik Next

Hal. 75 dari 134
6. Klik Next
Next

Hal. 76 dari 134
9. Klik Finish
Menentukan Struktur Tabel
Column Data Type

_id integer / primary key / autoincrement
nama_barang varchar(50) / not null
kategori_barang varchar(50) / not null

harga_barang long / not null

Hal. 77 dari 134
Membuat Layout Design
1. Pada activity_main.xml, tambahkan sebuah ListView dengan ID @android:id/list
dan FloatingActionButton dengan ID fab

Hal. 78 dari 134
2. Buatlah 1 Empty Activity dengan nama tambah setelah itu atur layoutnya sehingga terdiri
dari 3 TextView, 3 EditText dengan ID edtNama; edtKategori; edtHarga dan 2 Button
dengan ID btnReset; btnSimpan

Hal. 79 dari 134
3. Buatlah 1 Empty Activity dengan nama edit setelah itu atur layoutnya sehingga terdiri
dari 3 TextView, 3 EditText dengan ID edtNama; edtKategori; edtHarga, dan 2 Button
dengan ID btnReset; btnSimpan

Hal. 80 dari 134
4. Tambahkan 1 layout resource file bernama dialog dana tur layoutnya sehingga terdiri
dari 2 Button dengan ID btnHapus dan btnEdit
Membuat Class untuk Data Model

1. Create New > Java Class

Hal. 81 dari 134
2. Beri nama Barang, kemudian klik OK
3. Ketikkan code berikut ini

Hal. 82 dari 134
Hal. 83 dari 134
Membuat Class DB Handler
1. Tambahkan 1 Java Class dan beri nama MyDBHandler
2. Ketikkan code berikut ini

Hal. 84 dari 134
Hal. 85 dari 134
Menambahkan code pada MainActivity.java

Hal. 86 dari 134
Hal. 87 dari 134
Menambahkan code pada tambah.java

Hal. 88 dari 134
Hal. 89 dari 134
Menambahkan code pada edit.java

Hal. 90 dari 134
Setelah itu, coba jalankan aplikasi Anda. Pastikan tidak ada error, yang terjadi dan cobalah
untuk teliti.
CHALLENGE
1. Buatlah 1 project baru dengan nama SQLiteNotes yang berfungsi untuk mencatat notes dengan
struktur table sebagai berikut.
Column Data Type
_id integer / primary key / autoincrement
judul_notes varchar(50) / not null
konten_notes varchar(50)/not null
2. Silahkan berkreasi sesuka kalian.
REFERENSI

Hal. 91 dari 134
MODUL 10
DATABASE MYSQL & JSON
DESKRIPSI TEMA
1. Mampu merancang database dengan MySQL
2. Mampu mengimplementasikan fungsi JSON untuk membaca data dari database MySQL

SUB-CLO10 - Students are able to build applications with Database, PHP, and JSON on Android (C6)
PENUNJANG PRAKTIKUM
1. Xampp
2. Text Editor (Visual Studio Code, Sublime, etc)
3. phpMyAdmin
1. Bukalah phpMyAdmin di komputer Anda
2. Buatlah sebuah database dengan nama umnsi
3. Kemudian buat sebuah table di dalamnya dengan nama mahasiswa dengan struktur sebagai
berikut:
Nama Kolom Tipe Data Atribut
Id int Primary Key, Auto
Increment
Nama varchar(50) -
alamat varchar(100) -

Hal. 92 dari 134
4. Buatlah semua file PHP dengan nama conn.php untuk melakukan koneksi ke database yang
sudah dibuat
5. Setelah itu buatlah sebuah file PHP dengan nama addMahasiswa.php dan ketikkan kode berikut.

Hal. 93 dari 134
6. Buatlah sebuah file PHP dengan nama getMahasiswa.php dan ketikkan kode berikut.

Hal. 94 dari 134
7. Buatlah sebuah file PHP dengan nama updateMahasiswa.php dan ketikkan kode berikut.
CHALLENGE
1. Buatlah file PHP dengan nama deleteMahasiswa.php untuk menghapus data di tabel mahasiswa
dan menampilkan status berhasil atau tidak melalui JSON
2. Buatlah file PHP dengan nama getMahasiswaById.php untuk melakukan query data pencarian
mahasiswa berdasarkan ID dalam bentuk data JSON
3. Cobalah masukkan beberapa data ke dalam table mahasiswa melalui phpMyAdmin dan jalannkan
getMahasiswa.php melalui browser internet dan screenshot hasil yang muncul kemudian simpan
dalam gambar JPG atau PNG.
4. Ekspor database yang dibuat dalam bentuk file SQL, kemudian zip semua dan kumpulkan file zip
tersebut kepada aslab masing-masing.
REFERENSI

Hal. 95 dari 134
MODUL 11
PARSING DATA JSON
DESKRIPSI TEMA
Mampu mengimplementasikan data JSON ke dalam aplikasi Android untuk select, insert, update, delete
data di MySQL database

SUB-CLO11 - Students are able to build applications with JSON Data Parsing to Android (C6)
PENUNJANG PRAKTIKUM
1. Android Studio
Praktikum minggu ini masih menggunakan tabel dan JSON yang sudah dibuat pada praktikum
sebelumnya. Silahkan upload tabel dan file JSON yang kalian buat pada saat praktikum 10 ke web server
online. Jika belum memiliki web server, kalian bisa gunakan web server gratis di
http://www.000webhost.com


Hal. 96 dari 134
3. Buatlah project baru dengan nama JSONMahasiswa
4. Klik Next
6. Klik Next
Next

Hal. 97 dari 134
9. Klik Finish
10. Tambahkan 2 Button ke Layout Main Activity dan beri ID btnMahasiswa dan btnTambah
11. Atur tampilan menjadi sebagai berikut
12. Buat sebuah Empty Activity baru dengan nama TambahMahasiswaActivity

Hal. 98 dari 134
13. Atur tampilan layout menjadi sebagai berikut
14. Nama mahasiswa merupakan Edit Text dengan ID textNama, Alamat Mahasiswa merupakan
Multiline Edit Text dedngan ID textAlamat, dan Button Tambah Mahasiwa dengan ID btnTambah.
15. Buat sebuah Empty Activity baru dengan nama EditMahasiwaActivity

Hal. 99 dari 134
16. Atur tampilan layout menjadi sebagai berikut
17. Beri ID textNama untuk nama mahasiswa, textAlamat untuk alamat mahasiswa, btnEdit untuk
Button Edit, btnHapus untuk Button Hapus, dan btnBatal untuk Button batal
18. Tambahkan 1 Empty Activity baru dengan nama SemuaMahasiswaActivity

Hal. 100 dari 134
19. Atur layoutnya menjadi sebagai berikut. Layout terdiri dari sebuah ListView dengan ID listView
20. Tambahkan sebuah Layout Resource File dengan nama list_item

21. Tambahkan 3 buah TextView dengan ID textNama, textID ke dalam layout list_item
22. Copy paste file JSONParser.java yang sudah diberikan ke dalam java project kalian
Coding Java
1. Pada MainActivity.java, tambahkan source code berikut ini

Hal. 101 dari 134
2. Pada TambahMahasiswa.java, tambahkan source code berikut ini
3. Setelah itu buatlah sebuah class TambahMahasiswa yang extends fungsi dari AsyncTask
4. Di dalam class tersebut, tambahkan 3 buat override method yaitu onPreExecute, doInBackground,
onPostExecute

Hal. 102 dari 134
5. Ketikkan source code berikut

Hal. 103 dari 134
6. Pada MainActivity.java, ketikkan source code berikut ini
7. Pada SemuaMahasiswaActivity.java, ketikkan source code berikut
8. Kemudian tambahkan sebuah class TampilAnggota yang extends fungsi dari AsyncTask dan sebuah
method override dengan nama onActivityResult

Hal. 104 dari 134
9. Di dalam class tersebut, tambahkan 3 buat override method yaitu onPreExecute,
doInBackground, onPostExecute

Hal. 105 dari 134
10. Pada EditMahasiswaActivity.java, tambahkan source code berikut ini
11. Tambahkan sebuah class TampilAnggota yang extends fungsi dari AsyncTask

Hal. 106 dari 134
12. Di dalam class tersebut, tambahkan 3 buat override method yaitu onPreExecute,
doInBackground, onPostExecute
13. Tambahkan sebuah class UbahAnggota yang extends fungsi dari AsyncTask

Hal. 107 dari 134
onPostExecute
15. Tambahkan sebuah class UbahAnggota yang extends fungsi dari AsyncTask

Hal. 108 dari 134
onPostExecute
REFERENSI

Hal. 109 dari 134
MODUL 12
MULTIMEDIA
DESKRIPSI TEMA
Mampu mengimplementasikan fungsi dasar multimedia seperti kamera, video, dan audio ke dalam
aplikasi Android

SUB-CLO12 - Students are able to build applications with Multimedia (Picture, Audio) (C6)
PENUNJANG PRAKTIKUM
1. Android Studio
3. Buatlah project baru dengan nama MultimediaApps

4. Klik Next

Hal. 110 dari 134
6. Klik Next
Next

Hal. 111 dari 134
9. Klik Finish
10. Atur layout dari Main Activity menjadi seperti berikut

Hal. 112 dari 134
11. Button Capture Camera memiliki ID btnCamera, Button Video Playback memiliki ID
btnVideoPlay, Button Audio Play memiliki ID btnAudioPlay, dan Button Audio Record
memiliki ID btnAudioRecord
12. Tambahkan 3 Empty Activity dengan nama CaptureCamera, VideoPlayback, AudioPlay, dan
AudioRecord
13. Setelah itu pada MainActivity.java, tambahkan source code berikut pada method onCreate

Hal. 113 dari 134
14. Pada Activity CaptureCamera, tambahkan 2 buah Button dengan nama Capture
Photo (ID btnCapture) dan Record Video (ID btnRecord) dan atur layoutnya seperti di bawah ini
15. Tambahkan method hasCamera yang berfungsi untuk mengecek apakah device yang dijalankan
memiliki hardware kamera atau tidak

Hal. 114 dari 134
16. Setelah itu, pada method onCreate, ketikkan source code sebagai berikut
17. Tambahkan baris berikut pada class CaptureCamera, di luar semua method
18. Tambahkan method startCapture sebagai berikut

Hal. 115 dari 134
19. Tambahkan method startRecording sebagai berikut
20. Pada Activity Layout VideoPlayback, tambahkan sebuah VideoView ke dalam layout dan beri ID
videoView1

Hal. 116 dari 134
21. Kemudian pada VideoPlayback.java, tambahkan source code berikut pada method onCreate
22. Pada layout AudioPlay, tambahkan 2 buah Button dengan nama Start (ID btnStart) dan Pause (ID
btnPause)

Hal. 117 dari 134
23. Pada AudioPlay.java, tambahkan source code berikut pada method onCreate

Hal. 118 dari 134
24. Pada layout AudioRecord, tambahkan 3 buah Button dengan nama Record (ID btnRecord),
Play (ID btnPlay), Stop (ID btnStop)
25. Pada AudioRecord.java, tambahkan sebuah method dengan nama hasMicrophone() untuk
mengecek apakah device yang dijalankan memiliki microphone atau tidak

Hal. 119 dari 134
26. Kemudian tambahkan beberapa variabel dan object yang dibutuhkan pada class AudioRecord
27. Pada method onCreate, tambahkan source code berikut
28. Tambahkan method recordAudio

Hal. 120 dari 134
29. Tambahkan method stopAudio
30. Tambahkan method playAudio
31. Tambahkan beberapa permission ke Android sebagai berikut

Hal. 121 dari 134
REFERENSI

Hal. 122 dari 134
MODUL 13
GOOGLE MAPS
DESKRIPSI TEMA
Mampu menggunakan API Google Maps dan Google Place untuk penggunaan sederhana pada aplikasi
Android

SUB-CLO13 - Students are able to build applications with the Google Maps API (C6)
PENUNJANG PRAKTIKUM
1. Android Studio
3. Buatlah project baru dengan nama MyMaps

4. Klik Next

Hal. 123 dari 134
6. Klik Next
7. Akan muncul dialog box untuk memilih jenis activity yang akan dibuat. Pilih Google Maps Activity
dan klik Next

Hal. 124 dari 134
8. Kemudian pada dialog Customize Activity, beri nama Activity Name dengan nama MapsActivity dan
Layout Name dengan nama activity_maps
9. Klik Finish
10. Setelah itu, buka google_maps_api.xml yang ada di folder values
11. Copy link yang ada pada xml tersebut
12. Kemudian paste ke dalam Web Browser

13. Kalian akan diarahkan ke halaman Google APIs, silahkan sign in dengan account Google masing-
masing jika belum

Hal. 125 dari 134
14. Akan muncul tampilan seperti di bawah ini
15. Pilih Manage all projects pada menu drop down list Create a project
16. Klik button Create Project

Hal. 126 dari 134
17. Beri nama project dengan Android Map, kemudian klik tombol Create
18. Setelah selesai, kembali ke Dashboard APIs & Services
19. Pilih Google Maps Android API

Hal. 127 dari 134
20. Klik Enable
21. Klik Create Credentials
22. Ikuti stepnya sampai mendapatkan API key yang dibutuhkan
23. Copy dan paste API key tersebut pada google_maps_api.xml

Hal. 128 dari 134
24. Jalankan aplikasi yang dibuat maka akan muncul peta di Australia dengan title Marker
in Sydney
CHALLENGE
1. Buatlah sebuah Empty Activity baru dengan nama CustomMaps
2. Tambahkan sebuah LinearLayout (vertical) ke dalam layout Custom Maps

3. Kemudian tambahkan fragment ke dalam layout

Hal. 129 dari 134
4. Pilih SupportMapFragment
5. Atur layout design seperti di bawah ini
6. Ada 6 Button yang digunakan yaitu Normal (ID btnNormalMode), Terrain (ID btnTerrainMode),
Hybrid (ID btnHybrid), Satellite (ID btnSatelliteMode), Search (ID btnSearch), My Location (ID
btnMyLocation)

Hal. 130 dari 134
7. Pada build.gradle (Module: app), tambahkan library play services untuk places setelah itu
Sync kembali gradle yang sudah diubah
8. Tambahkan implements fungsi dari OnMapReadyCallback pada class CustomMaps dan tambahkan
beberapa objek, instance, dan variabel yang dibutuhkan seperti di bawah ini
9. Kemudian implements method overried untuk onMapReady dan ketikkan source code berikut di
dalam method tersebut
10. Pada method onCreate, tambahkan source code berikut

Hal. 131 dari 134
Hal. 132 dari 134
11. Tambahkan override method onActivityResult
12. Kembali ke halaman web Google APIs dan pilih Google Places API for Android
13. Enabled API dan add credentials untuk penggunaan Google Places
14. Silahkan explore fungsi-fungsi dari library Google Maps, CameraUpdateFactory, LocationManager,
dan Place
CHALLENGE
(Dijawab dengan memberikan komentar pada CustomMaps.java)
1. Apa perbedaan dari LocationManager.GPS_PROVIDER dan
LocationManager.NETWORK_PROVIDER?
2. Apa fungsi dari newLatLngZoom dan berapa minimal dan maksimal nilai zoom yang dapat
diberikan sebagai parameter?
3. Apa fungsi dari showInfoWindow()? Apa bedanya jika diberikan perintah tersebut dengan
dihilangkan?
4. Apa perbedaan map type Normal, Terrain, Hybrid, dan Satellite?
5. Apa fungsi dari PlaceAutoComplete dan jelaskan cara kerjanya?
REFERENSI

Hal. 133 dari 134
MODUL 14
TEMA
DESKRIPSI TEMA
(Apa yang akan dipelajari mahasiswa pada minggu ini)

SUB-CLO14 - Students are able to build applications that can publish to the Play store and present their
final project in accordance with the proposal that has been approved by the lecturer (C6)
PENUNJANG PRAKTIKUM
1. Android Studio
…
REFERENSI

Hal. 134 dari 134

Android Um N

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Android Um N

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL PRAKTIKUM

IS534– MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI

DAFTAR ISI ..................................................................................................................2

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

a. Application Name : HelloWorldUMN

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

10. Klik Finish

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

15. Cara kedua adalah dengan menambahkan string value di strings.xml

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

Pada properties android:text di TextView, ubah string menjadi “@string/halo”

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

4. Pilih versi API 19 (Kitkat)

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

Contoh tampilan yang diinginkan adalah sebagai berikut

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

a. Application Name : Lifecycle_Logcat

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

20. Cek kembali status jendela Logcat

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

22. Cek kembali status jendela Logcat

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

• Siswanto, E. (n.d.). Mobile. In Modul 2.

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

a. Application Name : Layout_Style

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

Mengubah Based Style

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

Mengatur Activity Layout

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

2. Ubah Layout Width semua button menjadi Match Parent

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

• Siswanto, E. (n.d.). Mobile. In Modul 3

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

a. Application Name : Widget_Dialog

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT

PROGRAM STUDI SISTEM INFORMASI | PRAKTIKUM MOBILE APPLICATION DEVELOPMENT