ANDROID

Pemrograman Aplikasi Mobile Smartphone

dan Tablet PC Berbasis Android
Edisi Revisi

t,
kr
T

Nazruddin Safaat H.

INFORMATIKA
Bandung
 KATA PENGANTAR

\NDROID
'emrograman Aplikasi Mobile Smartphone dan Tablet PC Berbasis
\ndroid
)enyusun : Nazruddin Safaat H. Perkembangan smartphone dan Tablet pc berbasis android sangat
menakjubkan, hal ini terbukti saat ini hampir semua uendor-uendor
'enerbit : lnformatika Bandung smartphone sudah memproduksi smartphone berbasis android, uendor-
)emasaran uendor itu antara lain HTC, Motorola, Samsung, LG, HKC, Huawei, Archos,
: Bl-Obses
Pasar Buku Palasari No. 82 WebstationCamangi, Dell, Nexus, Sciphone, Wafiee, Sony Ericsson, LG,
Bandung 40264 Acer, Philips, T-Mobile,Nexian, IMo, Asus dan masih banyak lagi uendor
Tetp.(022)7317812 smartphone di dunia yang memproduksi smartphone android. Antusiasnya
Fax. (022)7317896 uendor memproduksi smartphone android dikarenakan android adalah os
April 2012 (edisi revisi)
mobile yang open platfurm karena android sendiri adalah sistem operasi
)etakan Pertama
untuk perangkat mobile berbasis linux yang mencakup system operasi,
SBN 978-602-8758-52-9 middleuare dan aplikasi.

)opyright @ 201 2 pada Penerbit INFORMATIKA Bandung

Sct,irrl girris lrcsitr btrku dibagi atas beberapa bagian yaitu bagian pengenalan
ar-rrlr<ricl, lragian persiapan coding android, bagian hello android, bagian user
hterldcc (UI), bagian acti,itA, bagian uidget, bagian droiddraus, bagian
uebkit, bagian lanjutan layout, bagian arrayffile, bagian database, serla
bagian mops,bagian handle telepon (Diol/SMS)'

Seiain bahasan aplikasi yang dibuat khusus android (base programming

java), buku ini juga membahas lengkap pembuatan aplikasi android yang
dikembangkan dengan HTML5+CSS3 serta JQueryMobile dan PhoneGap.
Karena tidak dapat dipungkiri di masa yang akan datang dibutuhkan aplikasi
yang dikembangkan untuk multi platfurm, hal ini disebabkan karena tetap
eksiinya berbagai macam operating sAstem perangkat smartphoneltablet pc
terutama android, ios, dan blackberry. Perkembangan aplikasi Web Mobile
dengan HTML5 (JQueryMobile) akan menjadi trend yang akan tumbuh
berkembang dalam pembuatan aplikasi mobile. Di dalam buku ini akan DAFTAR ISI
dibahas berbagai jenis aplikasi web mobile client-seruer yang dibangun
dengan fi.amework JQueryMobile dan PhoneGap dengan konsep HTML5
seperti aplikasi Mobile Restorant (M-Resto), Aplikasi Hadits, Aplikasi RSS
Readar, dan berbagai aplikasi lainnya.

Puji syrrkur Alhamdulillah saya panjatkan ke hadirat Allah SWT yang

memberikan hidayah kepada saya sehingga buku ini dapat saya tulis. Terima
kasih kepada semua pihak yang mendukung penerbitan buku ini, Ayahanda
dan Ibundaku tercinta, keluargaku tercinta dan seluruh orang yang
berpartisipasi dalam penulisan buku ini terutama saudara Muhammad
Yunus Wijaya, Thio Pratama, dan KurniaAnggriani.

Semoga buku ini bermanfaat,

KATAPENGANTAR lll
Bandung, Feburuari zorz DAFTARISI v
BAGIAN KONI\TENSI xl
Penulis,
BAGIAN T. PENGENAI.AN ANDROID 1
SejarahAndroid L

Android: Platform Masa Depan 3

Nazruddin Safaat H. The DalvikVirtual Machine (DVM) 4
Android SDK (Software Development Kit) .. s
ADT (Android Development Tools)... 6
Arsitektur Android.......... 7
Fundamental Aplikasi...... 9
Versi Android................ 10
ITAGIAN z. PERSIAPAN CODING 13 Widgef ImageView/ImageButton ............ 77
Instalasi Java............ t4 Bekerja dengan Kumpulan Widg ets...... 8r
Instalasi Android SDK........... 15 ListView.......... 9r
Instalasi Eclipse .......;............ r6 Spinner/Combolist 93
Instlasi ADT / Plug ins Eclipse..... 17 InputType.. 95
MembuatAVD L9 TypeFace 9B
Instalasi Aplikasi Android 2t Messag es Box............. 101
Instalasi Aplikasi melalui Internet 2l Program Stulf ........... to4
Instalasi Aplikasi dari File 22
Uninstalasi Aplikasi Android...........,.r............ 22 BAGIAN Z. MOREWEW....... 109
Menggunakan Aplikasi Sourcode Project oo TimePicker View ........... 110
DatePicker View............... rr4
BAGIAN s. HELLO ANDROID 25 Spinner View .......... 115

Program HelloAndroidr............... z6 Gallery Vieu ........... ttg

Program HelloAndroidz ............. 29 ImageSwitcher View t23
Program HelloAndroid3 ............. AnalogClock/ DigitalClock t27
31
Program HelloAndroid+ ............. Menus (Context Menuf Options Menu) r29
32
Program HelloAndroidS ............. 34
BAGIAN 8. DROIDDRAW 135
BAGIAN 4. U,SERINTERFACE (UI)......... 37 Pengantar DroidDraw. 135
Komponen User Interface (UI) Aplikasi Converter 136
37
AndroidManifest.xml... 39
Program Ulcodingr.. 4t BAGIAN g. WEBI(IT ............. r43
Program Uicodingz.. Konsep Webkit....... 143
45
Program Uicoding3.. Aplikasi Webkitr 144
47
Program Uicoding4..................... Aplikasi Webkitz..... 145
49
Program Uicoding5.. Aplikasi Webkit3..... 148
51
ProgramUlcoding6 53
Program UlcodingT.. 55 BAGIAN To. BEKERJA DENGAN ARRAY DAN FILE 151
Program Ulcoding8 56 Konsep ArrayAdapter ............... 151
Aplikasi array1......... r52
BAGIAN 5. ACTTWTY 9 Aplikasi Arrayz 154
Konsep Acfr uity ............. 59 Aplikasi Array3 159
Siklus, cfiuitA ............... 6o Aplikasi FiIer........... :^66
Aplikasi Jamr .......... 6S
Aplikasi jam2 ................. 66 BAGIAN TT. DATABASE DI ANDROID ............ a7a
Aplikasi Databaser 173
BAGIAN 6. WIDGET.. 6g Aplikasi Databaseri. 179
Konsep Widget........ 6g Aplikasi databaserii r8z
Widget TextView.... Aplikasi Databasez.. tB4
7t
Widget EditText..... Aplikasi Database3.. 195
73
Widg et RadioButton/RadioGroup ................. Aplikasi Database4.. zo6
75
BAGIAN az. CODING MAPS 217 Mempersiapkan Bagian Client (ANDROID) ............... 338
Location Based Seraice 218 Penanganan Tampilan 34o
Bekerja dengan GPS pada Emulator... 218 Penanganan.Aksi .......... 356
Aplikasi codingmapsl ................. 220 Paket Configurasi 356
Aplikasi codingmaps2................. ,r2 Paket mobile.kelas.rss 358
Aplikasi codingmaps3 ................. orn Paket com.mobile.learning ................ 364
Api Key Google........ 230 Paket mobile.course 369
Aplikasi GoogleMaps 233 Paket mobile.tugas 375
Aplikasi codingmaps 4................. 238 Paket mobile.nilai 392
Aplikasi codingmapss ................. 245 Paket mobile.upload 399
Aplikasi codingmaps6................. 249 Paket mobile.download 406
Paket mobile.berita 4tt
BAGIAN T3. IIANDLE TELEPIIONE 255 Paket mobile.about 4r4
Dial Ernulator .............. 256
CONN E CTED FI LE M O BI LB - LEARN ING 416
SMS Emulator .............. 256
Aplikasi DialDemo 257 MANAGEMENT MOODLE UNTUK MOBILE-
Aplikasi SMS Messag ing ............. 26C LEARNING 430
Aplikasi SMSBoom 266
BAGIAN z.o. VWB APPS IITML5, JQUERY MOBILE, SERTA
BAGIAN r4. RIADVIIVG PROJECTDT DEWCE z7B PIIONEGAP 455
TeknikDebug Langsung................. 272 WebAppsdenganHTML5 &CSS3....... 456
TeknikCommandLineADB...... 276 Aplikasi Caf6.- ....... 458
Package Aplikasi Android 277 JQueryMobi1e................ 462
Fcns
Aplikasi Barca 464
BAGIAN rg. PROJECT BONUS 281 PhoneGap Framework 472
Project Aplikasi Notepad................. 281 Aplikasi RSS Recder (Jquerymobiie + PhoneGap).......... 477
Project Aplikasi Facebook.............. 284 Aplikasi M-Resto..... 483
Aplikasi HADITS..... 489
BAGIAN 16. BEKERJA DENGAN MEDIA.... 289
Project Aplikasi Notepad zgo BAGIAN 21.. UPLOAD \(E MARKET ANDROID 505
Registrasi User Market ................. 505
BAGIAN T7. APLIKASI DOA HARIAN Mempersiapkan Release Key store 506
297
507
ii:,i:r

BAGIAN 18. ANDROID MYSQL Upload apk ke Market....... 508

311
Aplikasi Entry Data 3I.2
Aplikasi Login User DAFTAR PUSTAKA 513
323

BAGIAN lr9. MOBILE-LEARNING 333

Integrasi Android dengan E-learning Moodle 333
Mempersiapkan Bagian Seruer 331
InstlasiXampp Seruer 335
Instalasi dan Konfigurasi Moodle 336
 KONVENSI

Buku ditulis dengan memisahkan source code dar. penjelasan. Source code
ditulis dalam kotak beraster sehingga memudahkan pembaca untuk
memahami isi buku.

Anda diperbolehkan menggunakan operating sistem Windows atau Linux

dalam pengembangan aplikasi android, karena resources yang disediakan di
dalam cd tersediaTtle-file yang dibutuhkan untuk pengembangan di windows
maupun linux.

Segala bentuk perbaikan dan penambahan tentang bahasan buku dapat

dilakukan di-milist g r oup.
http : //groups. google.com/group/android-coding

serta info perbaikan coding di

http : //nsafaat.wordpress.com
BAGIAN 1

PENGENALAN ANDROID

Seiarah Android
Android adalah sebuah sistem operasi untuk perangkat mobile berbasis
linux yang mencakup sistem operasi, middleuare dan aplikasi. Android
menyediakan platfurm terbuka bagi para pengembang untuk menciptakan
aplikasi mereka. Awalnya, Google Inc. membeli Android Inc. yang
merupakan pendatang baru yang membuat peranti lunak untuk
ponsel/smortphone. Kemudian untuk mengembangkan Android,
dibentuklah Open Handset Alliance, konsorsium dari 34 perusahaan peranti
keras, peranti lunak, dan telekomunikasi, termasuk Google, HTC, Intel,
Motorola, Qualcomm, T-Mobile, dan Nvidia.
Pada saat perilisan perdana Android, 5 November 2oo7, Android bersama
Open Handset Alliance menyatakan mendukung pengembangan open
source pada perangkat mobile. Di lain pihak, Google merilis kode-kode
Android di bawah lisensi Apache, sebuah lisensi perangkat lunak dan open
platform perangkat seluler.
Di dunia ini terdapat dua jenis distributor sistem operasi Android. Pertama
yang mendapat dukungan penuh dari Google atalu Google Mail Seruices
(GMS) dan kedua adalah yang benar-benar bebas distribusinya tanpa
dukungan langsung Google atau dikenal sebagai Open Handset Distribution
(oHD).
Sekitar September zooT Google mengenalkan Nerus One, salah satu jenis
smartphone yang menggunakan Android sebagai sistem operasinya. Telepon
seluler ini diproduksi oleh HTC Corporation dan tersedia di pasaran pada 5
Januari 2o1o). Pada 9 Desember 2oo8, diumumkan anggota baru yang
bergabung dalam program kerja Android ARM Holdings, Atheros
Communications, diproduksi oleh Asustek Computer Inc, Garmin Ltd,
Softbank, Sony Ericsson, Toshiba Corp, dan Vodafone Group Plc. Seiring
pembentukan Open Handset Alliance, OHA mengumumkan produk perdana
mereka, Android, perangkat mobile yang merupakan modifikasi kernel
Linux 2.6. Seiak Android dirilis telah dilakukan berbagai pembaruan berupa
perbaikan bug dan penambahan fitur baru.
Pasa masa saat ini sebagian besar uendor-uendor smartphone sudah
memproduksi smartphone berbasis android, uendor-uendor itu antara lain
HTC, Motorola, Samsung, LG, HKC, Huawei, Archos, Webstation Camangi,
Dell, Nexus, SciPhone, WayteQ, Sony Ericsson, LG, Acer, PhiliPS, T-
Mobile,Nexian, IMO, Asus dan masih banyak lagi uendor smartphone di
dunia yang memproduksi android. Hal ini, karena android itu adalah sistem
operasi yang open source sehingga bebas didistribusikan dan dipakai oleh
uendor manapun.
Tidak hanya rnenjadi sistem operasi di smartphone, saat ini Android
menjadi pesaing utama dari Apple pada sistem operasi Table PC. Pesatnya
pertumbuhan Android selain faktor yang disebutkan di atas adalah karena
Android itu sendiri adalah platform yang sangat lengkap baik itu sistem
operasinya, Aplikasi dan Tool Pengembangan, Market aplikasi android serta
dukungan yang sangat tinggi dari komunitas Open Source di dunia, sehingga
android terus berkembang pesat baik dari segi teknologi maupun dari segi
jumlah deuice yang ada di dunia.
Androidz Platform Masa Depan
Android dipuji sebagai "platfonn mobile pertama yang Lengkap, Terbuka,
dan Bebas".
. Lengkap (Complete Platfurm): Para desainer dapat melakukan
pendekatan yang komprehensif ketika mereka sedang mengembangkan
platJorm Android. Android merupakan sistem operasi yang aman dan
banyak menyediakan tools dalam membangun softuare dan
memungkinkan untuk peluang pengembangan aplikasi .
. Terbuka (Open Source Platfurm): Platfurm Android disediakan melalui
lisensi open source. Pengembang dapat dengan bebas untuk
mengembangkan aplikasi. Android sendiri menggunakan Linux Kernel
2.6.
c Free (Free Platform): Android adalah platfurmlaplikasi yang bebas
untuk develop. Tidak ada lisensi atau biaya royalti untuk dikembangkan
pada platfurm Android. Tidak ada biaya keanggotaan diperlukan. Tidak
diperlukan biaya pengujian. Tidak ada kontrak yang diperlukan. Aplikasi
untuk android dapat didistribusikan dan diperdagangkan dalam bentuk
apa pun.
Android merupakan generasi baru platform mobile, platfurm yang
memberikan pengembang untuk melakukan pengembangan sesuai dengan
yang diharapkannya. Sistem operasi yang mendasari Android dilisensikan di
bawah GNU, General Public Lisensi Versi z (GPLvz), yang sering dikenal
dengan istilah "copyleft" lisensi di mana setiap perbaikan pihak ketiga harus
terus jatuh di bawah terms. Android didistribusikan di bawah Lisensi
Apache Software (ASL/Apache2), yang memungkinkan untuk distribusi
kedua dan seterusnya. Komersialisasi pengembang (produsen handset
khususnya) dapat memilih untuk meningkatkan platform tanpa harus
memberikan perbaikan mereka ke masyarakat open source. Sebaliknya,
pengembang dapat keuntungan dari perangkat tambahan seperti perbaikan
dan mendistribusikan ulang pekerjaan mereka di bawah lisensi apa pun yang
mereka inginkan. Pengembang aplikasi Android diperbolehkan untuk
mendistribusikan aplikasi mereka di bawah skema lisensi apa pun yang
mereka inginkan.
llt.rrgcrrrbang memiliki beberapa pilihan ketika membuat aplikasi yang
lrcrlrasis android. Sebagian besar pengembang menggunakan Eclipse yang
tersedia secara bebas untuk merancang dan mengembangkan aplikasi
Android. Eclipse adalah IDE yang paling populer untuk pengembangan
Android, karena memiliki Android plu g -in yangtersedia untuk memfasilitasi
pengembangan Android. Selain ifii, Eclipse juga mendapat dukungan
langsung dari Google untuk menjadi IDE pengembangan aplikasi Android,
ini terbukti dengan adanya penambahan plugins untuk eclipse untuk
membuat project android di mana source software langsung dari situs
resminya Google. Akan tetapi, hal di atas tidak menutup kemungkinan untuk
menggunakan IDE yang lain seperti Netbeans untuk melakukan
pengembangan android.
Aplikasi Android dapat dikembangkan pada sistem operasi berikut:
. Windows XP Vista/Seven.
o Mac OS X (Mac OS X ro.4.8 atau ]ebih baru.
. Linux.
The Daluik Virtual Machine (DVM)
Salah satu elemen kunci dari Android adalah Daluik Virtual Machine
(DVM). Android berjalan di dalam Daluik Virtual Machine (DVM) bukan di
Jaua Virtual Machine (JVM), sebenarnya banyak persamaannya dengan
Jaua uirtual machine (VM) seperti Java ME (Jaua Mobile Edition), tetapi
Android menggunakan Virtual Machine sendiri yang menurut saya
dikustomisasi dan dirancang untuk memastikan bahwa beberapa feature-
feature berjalan lebih efisien pada perangkatmobile.
Daluik Virtual Machine (DVM) adalah "register bases" sementara Jauo
Virtual Machine (JVM) adalah "stack based", DVM didesain dan ditulis oleh
Dan Bornsten dan beberapa engineers Google lainnya. Jadi, bisa kita
katakan "Daluik equals(Jaua) == False". Dalvik Virtual Machine
menggunakan kernel Linux untuk menangani fungsionalitas tingkat rendah
termasuk keamanan, threading, dan proses serta manajemen memori. Ini
memungkinkan kita untuk menulis Aplikasi C / C + sama halnya seperti
pada OS Linux kebanyakan. Meskipun dalam kenyataanya kita harus banyak
memahami Arsitektur dan proses sistem dari kernel linux yang digunakan
dalam Android tersebut.
Semua harduare yang berbasis Android dijalankan dengan menggunakan
Virtual Machine untuk eksekusi aplikasi, pengembang tidak perlu khawatir
tentang implementasi perangkat keras tertentu. Daluik Virtual Machine
mengeksekusi executable fiIe, sebuah format yang dioptimalkan untuk
memastikan memori yang digunakan sangat kecil. The executable file
diciptakan dengan mengubah kelas bahasa java dan dikompilasi
menggunakan fools yang disediakan dalam SDKAndroid.
Android SDK (Software Development Kit)
Android SDK adalah tools API (Application Programming Interface) yang
diperlukan untuk mulai mengembangkan aplikasi pada platfurm Android
menggunakan bahasa pemrograman Java. Android merupakan subset
perangkat lunak untuk ponsel yang meliputi sistem operasi, middleuare dan
aplikasi kunci yang di-release oleh Google. Saat ini disediakan Android SDK
(Softuare Deuelopment Kit) sebagai alat bantu dan API untuk mulai
mengembangkan aplikasi pada platfurm Android menggunakan bahasa
pemrograman Java. Sebagai platform aplikasi-netral, Android memberi
Anda kesempatan untuk membuat Aplikasi yang kita butuhkan yang bukan
merupakan aplikasi bawaan Handphone/ Smarthpone. Beberapa fitur-fitur
Android yang paling penting adalah:
o Framework Aplikasi yang mendukung penggantian komponen dan
reusable.
r Mesin Virtual Daluik dioptimalkan untuk perangkat mobile
o Integrated brouser berdasarkan engine open source WebKit
. Grafis yang dioptimalkan dan didukung olehlibraries grafis zD, grafis 3D
berdasarkan spesifikasi opengl ES r,o (Opsional akselerasi harduare)
. SQLite untuk penyimpanan data
. Media Support yang mendukung audio, video, dan gambar (MPEG4,
H.264, MP3, AAC, AMR, JPG, PNG, GIF), GSM Telephong (tergantung
hardware)
. Bluetooth, EDGE, gG, dan WiFi (terganttnghardtaare)
r Kamera, GPS, kompas, dan accelerometer (tergantung hardtaare)
. Lingkungan Deuelopment yang lengkap dan kaya termasuk perangkat
emulator, fools untuk debugging, profil dan kinerja memori, danplugin
untuk IDE Eclipse.
Untuk source SDK Android ini dapat dilihat dan diunduh langsung di situs
resmi pengembang SDK Android di http: //tutnu.deueloper.android.com
atau SDK Android juga terdapat dalam CD yang di-include-kan dalam buku
ini baik versi windows maupun versi linux, karena SDK Android sifatnya
gratis serta bebas didistribusikan.
 ADT (Android Development Tools) Applications dan Widg ets
Applications dan Widgets ini adalah layer di mana kita berhubungan
Android Deuelopment Tools (ADT) adalah plugin yang didesain untuk IDE dengan aplikasi saja, di mana biasanya kita download aplikasi kemudian
Eclipse yang memberikan kita kemudahan dalam mengembangkan aplikasi kita lakukan instlasi dan jalankan aplikasi tersebut. Di layer terdapat
android dengan menggunakan IDE Eclipse. Dengan menggunakan ADT aplikasi inti termasuk klien email, program SMS, kalender, peta,
untuk Eclipse akan memudahkan kita dalam membuat aplikasi project browser, kontak, dan lain-lain. Semua aplikasi ditulis menggunakan
android, membuat GUI aplikasi, dan menambahkan komponen-komponen bahasa pemrograman Java.
yang lainnya, begitu juga kita dapat melakukan running aplikasi
menggunakan Android sDK melalui eclipse. Dengan ADT juga kita dapat Applications Fr ameta orks
melakukan pembuatan package android (.apk) yang digunakan uniuk
distribusi aplikasi android yang kita rancang.
Android adalah "Open Development Platform" yaitu Android
menawarkan kepada pengembang atau memberi kemampuan kepada
pengembang untuk membangun aplikasi yang bagus dan inovatif.
Mengembangkan aplikasi android dengan menggunakan ADT di eclipse Pengembang bebas untuk mengakses perangkat keras, akses informasi
sangat dianjurkan dan sangat mudah untuk memulai mengembangkan resources, menjalankan seruice background, mengatur alarm, dan
aplikasi android. Berikut adalah versi ADT untuk eclipseyang sudah dirilis: menambahkan status notifi.cations, dan sebagainya. pengembang
o ADT 12.o.o (July zorr) memiliki akses penuh menuju API framework seperti yang dilakukan
o ADT t 1.o.o (June zorr) oleh aplikasi yang kategori inti. Arsitektur aplikasi dirancang supaya kita
r ADT 1o.o.1(March zorr) dengan mudah dapat menggunakan kembali komponen yang sudah
o ADT 1o.o.o (February zotr) digunakan (reuse).
o ADT 9.o.o (January zorr)
o ADT B.o.r (December zoro) Sehingga bisa kita simpulkan Applications Frameworks ini adalah /ayer
r ADT B.o.o (December zoro) di mana para pembuat aplikasi melakukan pengembangan/pembuatan
o ADT o.9.9 (September zoro) aplikasi yang akan dijalankan di sistem operasi Android, karena pada
o ADT o.9.8 (September zoro) layer inilah aplikasi dapat dirancang dan dibuat, seperti content-
o ADT o.9.7 (May zoro) prouiders yang berupa sms dan panggilan telepon.
o ADT o.9.6 (March zoro)
o ADT o.9.5 (December zoog) Komponen-komponen yang termasuk di dalam Applications
o ADT o.9.4 (October zoog) Frameuorks adalah sebagai berikut:
a) Vieus
semakin tinggi platJ'orm android yang kita gunakan, dianjurkan
b) Content Prouider
menggunakan ADT yang lebih terbaru, karena biasanya munculnya p latfurm
c) Resource Manager
baru diikuti oleh munculnya versi ADT yang terbaru. untuk melakukan d) Notifi.cation Manager
instlasi ADT di-eclrpse dapat dilakukan secara on-line maupun offiine. e) Actiuity Manager
Untuk dotunload.\DT ini dapat dilakukan di
http : / / deu eloper.andr oid.com/ sdk/ eclipse- adt.html. Libraries
Libraries ini adalah layer di mana fitur-fitur Android berada, biasanya
para pembuat aplikasi mengakses libraries untuk menjalankan
aplikasinya. Berjalan di atas kernel, Layer ini meliputi berbagai library
Arsitektur Android CIC++ inti seperti Libc dan SSL, serta:
. libraries media untuk pemutaran media audio dan video
secara garis besar Arsitektur Android dapat dijelaskan dan digambarkan . libraries untuk manajemen tampilan
sebagai berikut:
 liltrctries Graphics mencakup SGL dan OpenGL untuk grafis zD dan
Asplieati$rts and Widgtsrs
:Jl)
i lkr*. ... i : Contratc j . EnsE€r ; g.dCeB I yourApFH€rE i
I
libraries SQLite untuk dukungan database.
a
libraries SSL dan WebKit terintegrasi dengan tueb brotuser dan Applle,atisn Pramewtlnk
security !' H& Hffif' I t$,-fi| ; v,o'nsrsYl H8'#" '
libraries LiveWebcore mencakup modern web brousser dengan P-a{l(age T-ele$tI{:y : . g*shrrcc Lo(arr$n
engine embeded useb uiew II liarrrgar ' !.kitue' ?. i *faflqEr : " Sensor
iria-rwgcr* i

. libraries 3D yang mencakup implementasi OpenGL ES r.o API's l*lbr€ries A.ndr'e:id Runtirr"!e

Android RunTime
MffiMNWNNW C.$r6 Libraaie$

Layer yang membuat aplikasi Android dapat dijalankan di mana dalam
prosesnya menggunakan Implementasi Linux. Daluik Virtual Machine
(DVM) merupakan mesin yang membentuk dasar kerangka aplikasi
Android. Di dalam Android Run Time dibagi menjadi dua bagian yaitu:
. Core Libraries: Aplikasi Android dibangun dalam bahasa java,
sementara Dalvik sebagai virtual mesinnya bukan Virtual Machine
Java, sehingga diperlukan sebuah libraries yang berfungsi untuk
menterjemahkan bahasa java/cyang ditangani oleh Core Libraries.
. Daluik Virtual Machine: Virtual mesin berbasis register yang
dioptimalkan untuk menjalankan fungsi-fungsi secara efisien, di
mana merupakan pengembangan yang mampu membuat linux
kernel untuk melakukan threading dan manajemen tingkat rendah.
Linux Kernel
Linux kernel adalah layer di mana inti dari operating sistem dari
Android itu berada. Berisi "file--1ile system yang mengatur sistem
processing, memorA, resource, driuers, dan sistem-sistem operasi
android lainnya. Linux kernel yang digunakan android adalah linux
kernel release 2.6. jika anda ingin rnempelajari linux kernel ini, Anda
dapat mengunduh linuxkernel secara gratis di situs www.kernel.org.
NwmlwwffiN* ffi
effiKffiwNi B&lr.lh Vlftrr&l
Mi6(t,i&d
ffiffiffi$tuffiW tuffi
N-lnux Ker$el
tlrysqqs ilr!|MEA f{-$q! f, 2 i:r$W*-ry]
frwxx lt-**€ssg{Yrye [Yry:-i t.ffij
Gambar 't.1 Arsitektur Android
Fundamental Aplikasi
Aplikasi Android ditulis dalam bahasa pemrograrnan java. Kode java
dikompilasi bersama dengan data file resource yang dibutuhkan oleh
aplikasi, di mana prosesnya dipackage oleh rools yang dinamakan "apt
tools" ke dalam paket Android sehingga menghasilkanfile dengan ekstensi
apk. tr'ile apk itulah yang kita sebut dengan aplikasi, dan nantinya dapat di
install di perangkat mobile.
Ada enam jenis komponen pada aplikasi Android yaitu:
a) Actiuities
Suatu acfiuiry akan menyajikan user interface (UI) kepada pengguna,
sehingga pengguna dapat melakukan interaksi. Sebuah aplikasi android
bisa jadi hanya memiliki satu actiuity, tetapi umumnya aplikasi memiliki
banyak actiuity tergantung pada tujuan aplikasi dan desain dari aplikasi
tersebut. Satu cctruifu biasanya akan dipakai untuk menampilkan
aplikasi atau yang bertindak sebagai user interfoce (UI) saat aplikasi
diperlihatkan kepada user. Untuk pindah dari satu actiuity ke actiuity
lain kita dapat melakukannya dengan satlu euen, misalnya click tombol,
memilih opsi atau menggunakan triggers tertentu. Secara hirarki sebuah
uindoru s actiuitg dinyatakan dengan metho d Activity.setContentView0.
ContentView adalah objek yang berada pada root hirarki.
b) Seruice
Seruice tidak memiliki Graphfc (Jser Interfoce (GUI), tetapi seruice
berjalan secara background, sebagai contoh dalam memainkan musik,
seruice mungkin memainkan musik atau mengambil data dari jaringan,
tetapi setiap seruice harus berada dalam kelas induknya. Misalnya,
media player sedang memutar lagu dari hsr yang ada, Aplikasi ini akan
memiliki dua atau lebih acrruity yang memungkinkan user untuk
memilih lagu misalnya, atau menulis sms sambil player sedang jalan.
Untuk menjaga musik tetap di jalankan, actiuity player dapat
menjalankan seruice. Seruice dijalankan pada thread utama dari proses
aplikasi.
c) Broadcast Receiuer
Broadcast receiuer berfungsi menerima dan bereaksi untuk
menyampaikan notifikasi. Contoh broadcast seperti notifikasi zona
waktu berubah, baterai low, gambar telah selesai diambil oleh camera,
atau pengubahan referensi bahasa yang digunakan. Aplikasi juga dapat
menginisiasi broadcast misalnya memberikan informasi pada aplikasi
lain bahwa ada data yang telah diunduh ke perangkat dan siap untuk
digunakan.
Broadcast receiuer tidak memiliki user interface (UI), tetapi memiliki
sebuah actiuity untuk merespon informasi yang mereka terima, atau
mungkin menggunakan Notification Mana.ger untuk memberitahu
kepada pengguna, seperti lampu latar atau uibrating (getaran)
perangkat, dan lain sebagainya.
d) Content Prouider
Content prouider membuat kumpulan aplikasi data secara spesifik
sehingga bisa digunakan oleh aplikasi lain. Data disimpan dalam Ttle
sistem seperti database SQLite. Content prouider menyediakan cara
untuk mengakses data yang dibutuhkan oleh suatu actiuity, misalnya
ketika kita menggunakan aplikasi yang membutuhkan peta (Mop), atau
aplikasi yang membutuhkan untuk mengakses data kontak dan navigasi,
maka di sinilah fungsi content prouider.
Versi Android
Telepon pertama yang memakai sistem operasi Android adalah HTC Dream,
yang dirilis pada 22 Oktober zoo8. Pada penghujung tahun 2o1o
diperkirakan hampir semua uendor seluler di dunia menggunakan Android
sebagai operating sAstem. Adapun versi-versi Android yang pernah dirilis
adalah sebagai berikut:
. Android versi r.r
Pada 9 Maret zoo9, Google merilis Android versi t.t. Android versi ini
dilengkapi dengan pembaruan estetis pada aplikasi, jam, alarm, uoice
search (pencarian suara), pengiriman pesan dengan Gmail, dan
pemberitahuan email.
o Android versi r,5 (Cupcake)
Pada pertengahan Mei zoo9, Google kembali merilis telepon seluler
dengan menggunakan Android dan SDK (Software Deuelopment Kit)
dengan versi r.5 (Cupcake). Terdapat beberapa pembaruan termasuk
juga penambahan beberapa fitur dalam seluler versi ini yakni
kemampuan merekam dan menonton video dengan modus kamera,
meng-upload uideo ke Youtube dan gambar ke Picasa langsung dari
telepon, dukungan Bluetooth AzDP, kemampuan terhubung secara
otomatis ke headset Bluetooth, animasi layar, dan keyboard pada layar
yang dapat disesuaikan dengan sistem.
. Android versi r.6 (Donut)
Donut (versi r.6) dirilis pada September dengan menampilkan proses
pencarian yang lebih baik dibanding sebelumnya, penggunaan baterai
indikator dan kontrol applet VPN. Fitur lainnya adalah galeri yang
memungkinkan pengguna untuk memilih foto yang akan dihapus;
kamera, camcorder dan galeri yang dintegrasikan, CDMA/EVDO,
8o2.1x, VPN, Gestures, dan Text-to-speech engine, kemampuan diol
kontak, teknologi text to change speech (tidak tersedia pada semua
ponsel, pengadaan resolusi WVGA.
o Androidversi z.ofz.t(Eclair)
Pada 3 Desember 2oo9 kembali diluncurkan ponsel Android dengan
versi z.of z.r (Eclair), perubahan yang dilakukan adalah pengoptimalan
hardware, peningkatan Google Maps 3.r.2, perubahan UI dengan
broutser baru dan dukungan HTML5, daftar kontak yang baru,
dukungan;flosh untuk kamera 3,2 MP, digital Zoom, dan Bluetooth z.t.
. Android versi z.z (Froyoz FrozenYoghurt)
Pada bulan mei zoro Android versi z.z Rev t diluncurkan. Android
inilah yang sekarang sangat banyak beredar di pasaran, salah satunya
adalah dipakai di Samsung FX tab yang sudah ada di pasaran. Fitur yang
tersedia di Android versi ini sudah kompleks di antaranya adalah:
. Kerangka aplikasi memungkinkan penggunaan dan penghapusan
komponen yang tersedia.
. DaluikVirtual Machine dioptimalkan untuk perangkat mobile.
. Grafik: grafik di zD dan grafis 3D berdasarkan libraries OpenGL.
. SQLite: untuk penyimpanan data.
 . Mendukung media: audio, uideo, dan berbagai format gambar
(MPEG4, H.264, MP3,AAC, AMR, JPG, PNG, GIF)
. GSM, Bluetooth, EDGE, 3G, dan WiFi (hardu.rare independent)
. Kamera, Global Positioning System (GPS), kompas, dan
accelerometer (tergantun g harduare).

Android versi z.g (Gingerbread)

Android versi 2.3 diluncurkan pada Desember 2o1o, hal-hal yang
direvisi dari versi sebelumnya adalah kemampuan seperti berikut:
. S/P-basedVoIP
. Near Field Communications (NFC)
. Gyroscope dan sensor
. Multiple cemeras support BAGIAN 2
. Mixable audio effects
. Dounloadmanager PERSIAPAN CODING
. Android versi S.o (Iloneycornb) dirilis Februari zorr sebagai
android 3.o revisi 1 serta android versi 3.o revision z telah dirilis pada
juli zorr.
. Android versi 3.r dirilis Mei zorr, sedangkan android 3.r revisi z juga
dirilis mei 2011, serta android 3.r revision 3 dirilis pada juli zorr.
r Android versi 3.2 dirilis Juli zorr.
. Android versi 4.o dirilis November zorr.

Android versi 3.o ke atas adalah generasi platfurm yang digunakan untuk
tablet pc. Sementara versi 4.o sudah merupakan platfurm yang bisa dipakai
di smartphone dan tablet pc. Demikian beberapa versi android yang sudah
dirilis sampai dengan buku ini ditulis, kemungkinan besar versi tersebut
akan terus berkembang seiring dengan kebutuhan yang sangat kompleks di
bidang penggunaan smartphone. Untuk informasi detail versi platform atau
untuk mendapatkan informasi versi terbaru android Anda dapat melihat di
www. developer. android. com

Setelah kita membahas gambaran android pada bab sebelumnya, pada bab
ini kita akan membahas secara detail hal-hal yang kita perlukan dalam
rangka membuat aplikasi smartphone berbasis android. Sebelum kita
lanjutkan kebagian instalasi, semua paket instlasi yang kita perlukan untuk
pemrograman android yang dibahas di buku ini tersedia dalam cd yang
disertakan dengan buku ini.
Instalasi fava
Lakukan instalasijava, seperti yang dijelaskan di atas bahwa android adalah
aplikasi yang dikembangkan dengan berbasis java, sehingga sebelum kita
melakukan coding aplikasi berbasis android, komputer/pc kita harus sudah
terinstal program java. Paket untuk instalasi java tersedia di dalam cd atau
dapat langsung download secara gratis di
http://tuww.oracle.com/technenoork/jaua/jauase/downloads/index.html,
Kalau Anda menggunakan platform linux seperti ubuntu, java adalah
program yang sudah termasuk dalam repository dalam setiap versi dari
ubuntu, tinggal kita hubungkan ubuntu kita ke repository lalu melakukan
instalasi java.
I(ta memerlukan Sun Java SE versi r.5 atau r.6 atau versi diatasnya untuk
dapat mengompilasi aplikasi android yang akan kita buat. Untuk
memastikan versi java yang sudah kita instalasi dapat dilakukan dengan
mengetik perintah
Linux:
Dengan masuk ke terminalfconsole dan mengetikkan perintah seperti
contoh berikut
javac -vers-ion
Windows:
Jika Anda menggunakan operating sistem windows, cara untuk mengecek
versi java kita adalah sama, cuma kalau di windows untuk mengetikkan
perintahnya kita harus masuk ke sistem command line (click Start- pilih
run- pada isian box run ketikkan cmd kemudian tekan enter/ok).
rion 6.1.?6661
ight (c) 2669 l'licrosoft Corporation. All rights
: \ljsers\uxc , uilis )jaua -uers ion
uersion "1.6.8-22"
Il'l) SE Xuntime Enuironnent (build 1.6.6-22-hE4)
Hot$pot(Il'l) CIient Ull (buiId 1?.1-b03, rnixed mode, sharing)
Gambar 2.1 Java -version windows
Instalasi Android SDK
Selanjutnya yang perlu kita instalasi adalah Android SDK, seperti yang
sudah dijelaskan di bab sebelumnya bahwa SDK (So/truare Deuelopment
Kir) ini lah yang kita perlukan untuk sebagai alat bantu dan API dalam
mengembangkan aplikasi pada platfurm Android menggunakan bahasa
website pemrograman Java. Selain source-tya dari CD yang tersedia bersama buku,
Android SDK dapat kita diunduh secara gratis di uebsite resmi google di
http : //rvww. developer. android. com.
Untuk mempermudah tahap instlasi Anda dapat copy isi direktori Android
SDK dari CD ke komputer Anda, Untuk konfigurasi standard buatlah
direktori Android SDK di Program Ffles pada komputer/laptop Anda
sebagai tempat menampung file-file Android SDK, contoh Android SDK
berada di folder (C:\Program Files\Android SDK), kalau Anda
menggunakan linux seperti ubuntu sebaiknya letakkan Android SDK Anda
berada di dalam home directory user Anda contoh
(/home/useranda/AndroidSDK).
Letak posisi folder Android SDK perlu kita ingat, karena selanjutnya ketika
kita akan me-/ink-kan posisi Android SDK kita dengan IDE Eclipse sebagai
aplikasi coding yang kita pergunakan nantinya dalam membuat program
Android. Jika Anda menggunakan Android SDK yang tersedia di dalam CD
yang disertai dalam buku ini, itu berarti anda tidak perlu melakttkan update
Android SDKplof/orm-nya lagi, karena Android SDK yang tersedia di dalam
CD sudah di-update sampai dengan platfurm Android 2.3. tentunya, ketika
Anda membutuhkan versi terbaru dari platform Android yang akan datang
Anda bisa lakukan update.
Sebaliknya Anda menggunakan Android SDK yang di-dounload dari situs
http://www.developer.android.com. Kita diharuskan untuk meng-
update platform Android SDK kita sampai dengan minimal Android 2.3,
r.eserued.
karena biasanya paket Android SDK instalasi default-nya tidak memiliki
platform, sehingga kita perlu meng-update-nya, tentunya untuk melakukan
update kita harus terkoneksi melalui internet ke situs Android sebagai
penyedia platfurm-nya. Yang kita akan gunakan dalam pembuatan program
Android di buku ini adalah kebanyakan untukAndroid 2.3,
Instalasi Eclipse
Selanjutnya kita akan lakukan instalasi Eclipse sebagai IDE yang kita
gunakan dalam coding aplikasi Android nantinya. Eclipse adalah IDE untuk
pengembangan java/android yang free dan dapat di-dounload di
http://lrrww.eclipse.org/downloads/, versi eclipse yang ada sekarang
sudah banyak seperti Eclipse Helios (eclipse versi .3.6), Eclipse Galileo
(eclipse versi 3.5), dan Eclipse Ganymede (eclipse versi 3.4), kita dapat
melakukan instalasi salah satu versi, versi eclipse 3.4 sudah support dengan
Android Deuelopment Tools (ADT) untuk membuat eclipse dapat digunakan
untuk coding project Android.
Apabila Anda menggunakan Eclipse yang ada di dalam CD Anda tidak perlu
melakukan instalasi, cukup dengan mengopinya ke komputer/laptop Anda,
untuk keseragaman Anda copy-kan ke dalam folder (c:$rogram
files\eclipse) apabila Anda menggunakan windows, sementara apabila
Anda menggunakan linux seperti ubuntu Anda dapat meng-copA eclipse ke
dalam directory home user Anda seperti (/home/user/eclipse).
Untuk menjalankan eclipse, Anda dapat dengan cara menge-click eclipse
yang bertipe applicotion di dalam folder tempat kita melakukan instlasi
Eclipse. Sehingga akan muncul gambar tampilan eclipse seperti gambar di
bawah ini:
Gambar 2.2 Tampilan Awal Eclipse
Instalasi ADT/ Plugins Eclipse
Selanjut kita akan melakukan instalasi ADT atau yang lebih dikenal dengan
plugins Eclipse, plugins ini yang membuat eclipse dapat membtat project
yang berbasis android, ADT adalah plugins di eclipse yang harus kita rnstoll
sehingga Android SDK yang sudah kita miliki di atas dapat dihubungkan
dengan IDE Echpse yang kita gunakan sebagai tempat coding aplikasi
android nantinya.
ADT adalah kepanjangan dari Android Deuelopment Tools yang menjadi
penghubung antara IDE Echpse dengan Android SDK. Setelah selesai
instlasi eclipse kita dapat melakukan instalasi Android Deuelopment Tools
(ADT) dengan menggunakan koneksi internet atau menggunakan file jar
untuk instalasi tanpa membutuhkan koneksi internet. Untuk koneksi
internet untuk melakukan instlasi ADT di eclipse-nya dengan cara sebagai
berikut:
. Buka Eclipse yang sudah kita instalasi pada bagian yang di atas.
. Click Menu Help - Softtuare Update, pilih pada pilihan Auailable
Software pilih Add Site dan isi location dengan https://dl-
ssl. google. com/android/eclipse/
*""* U"-4"
.{ cu.,-.:' gp6,16 5'..
i'l S rhe E(lipse p,ot€d updire'
tt n# src
Gambar 2.3 Add ADT Plugsin
Tujuan dari gambar di atas adalah kita akan melakukan instalasi ADT di
Eclipse dari situs resminya google. Setelah itrt, click OK dan setelah
muncul dalam daftar checklist dan click installs. Ketika akan
melakukan instlasi ADT, tunggu sampai proses instlasi selesai.
 Andr6id Prde.en.e6
Name Verior SnK Location: F:\Proqr;m Files\And.oid SDK

;, ii'l { Ganymede l.Jpdatesiti Not€: The tist of SUK Iargeti bel(w k onry relodd onre yeu hilAppty. sr ,OK,
r I { httpr. dl-rlgoogle.(oruandmrd'trlipra i. HerF Vesdor Pkform
l
r fr]ii DevelcperTcols r. Inltaluupdate l
And'oid Open 5ource P,olect 1.5 l
I.teqraied Aqeni {antroller
*r 'g Andrcid C0M5 801.v201012{6210j"81219
, l6va
l CooglP In< . 1.5 f
i AFd.oid Open Sou,<e P!oj-(r
i{ 49r Android Cerelcpmentlooli
1.6
8,01,v11101106110181119 Mip Proiect sete.taon i Googleln. 16
!i 4lri Andrcid Hierarhl lie*er 8,01 vl01$1Mt107-82219 :' Ptug-in De,elopsent
Prow,risning Admin
l Android 0pen sdur.. Projed 2.0 5
I
Googleln.. 2.O 5
Rsdhe Erimpre
Gambar 2.4. lnstall ADT Eclipse dengan internet, r, RunlDebug
i Android open Sour<e Projeci 2.O.1 6
r Ta<kr
i Goegle In<. ?.0.1 5
Android:.1-updetel AndrDid Open Sou.€c proJed 2.1,up... 7
Tenrpldte Editor Google In.. J.1-sp... 7
Undc Prderencer Android Open 5d0r.e ProlEd ).2 B
Go$gleln(.
Untuk instlasi ADT ini sebenarnya anda juga dapat melakukan instalasi U5aEe 0ata Collector 2.2
I

tanpa menggunakan koneksi internet yaitu dengan menggunakan file KML

archiue jar lokal yang sudah klta download. File archiue jar-nya
tersedia di dalam CD, langkahnya sama dengan langkah koneksi dengan Gambar 2.6. Android SDK Location
internet tetapi pada pilihan terakhir pada Add sites kita pilih pilihan
Iocal kemudian brou-rse posisifle dotunload ADT.zipnya seperti gambar
berikut.
Membuat AVD
* Add rite
..--::;::-!
, LGd,,
Selanjutnya kita akan membuat Android Virtual Deuice (AVD) yang
I I :

h@non r,re:'E "*-*--**"i merupakan emulator untuk menjalankan program aplikasi android yang kita
I
i.-4rar";a.l i
buat, AVD ini nantinya yang kita jadikan sebagai tempat tesf dan
menjalankan aplikasi android yang kita buat, AVD berjalan di Virtual
Machine.
Gambar 2.5. lnstall ADT Eclipse dengan lokal.
Untuk membuat AVD dapat
dilakukan dari IDE Eclipse dengan
cara menge-click menu Windows -
Setelah melakukan instalasi ADT selanjutnya adalah menghubungkan
IDE Eclrpse dengan Android SDK kita dengan cara menge-click Android SDK and AVD
Managers, pilih virtual Device-
Windows-Preferences, pilih Android dan lakukan Browse SDK
New.
Android yang sudah kita miliki, setelah itu lakukan apply sehingga
akan menghasilkan seperti gambar berikut:

i sj.a..aye.., I I

Gambar 2.7 Create AVD

Penjelasan Gambar 2.7.

Name : Androidz3
Target : Android 2.3 - Api Level g
Size : 64 Mib
Name dari AVD itu adalah hanya labeling, Anda diperbolehkan untuk
membuat nama AVD dengan nama yang lain, tetapi dianjurkan sesuai
dengan targetnya sehingga memudahkan kita mengetahui AVD apa yang
sedang running. Target di sini maksudnya adalah bahwa AVD yang kita buat
di atas adalah platform Android 2.3, apabila Anda ingin membuat aplikasi
bukan untuk platform Android 2.3 Anda bisa merubahnya atau menambah
platform Android yang anda kehendaki, Size di sini maksudnya adalah kita
menyediakan 64 Mib untuk proses running AVD, karena Simulator AYD
membutuhkan memori untuk running,Anda diperkenankan menambah stZe
seperti rz8 tergantung besarnya memory yang Anda gunakan, letapi defoult-
nya sebenarnya 32 Mib sudah lebih dari cukup untuk A\rD.

Dianjurkan kita membuat semua emulator/AYD untuk semua platfurm

Android yang kita miliki, ini sangat berguna ketika kita melakukan
Gambar 2.9. Running AVD.
perubahan jenis platfurm pada aplikasi Android kita, akan secara otomatis
melihat emulatorlAYD yang cocok dengan pla{orm-nya. Berikut ini contoh
semua AVD untuk seluruhplof/orm versi Android yang sudah ada sekarang.

qiE
, Instalasi Aplikasi Android
f, Andreid SO( and A{D MaNqs

lffi!ffiffi Ld of ai*ino Andrordvrduar 0frrce' &fld at tJk,rluyc.wrti'\.andrordlavd

Banyak aplikasi-aplikasi android yang gratis di internet, untuk meng-instol/
'J;:i51."i.i,"t':,i lnv0ilame
Aynildblepr.kages oro"u.. i",e*ru"*.
largdNam p,ailc,r apre\er L;,."--J aplikasi tersebut di emulator kita ada dua cara yang dapat kita lakukan, yaitu
-. anaroiat.s
I I -r
""a'"ia.s
Android
An,lroid 1.5
1.5 -1.5 I ," install langsung via internet atau instal ia file setelah.f,le aplikasinya di-
)-
] . APns
] -, Aidroidl6
GooqleAPl' l6ooalc
t,6
ardrord
In.I 1.5
1.6
I
4 I .rTit ,
-
dounlo ad melalui pc/laptop.
l -.,AFI16 6osqkAPk(GEoqleln..l 1.6 4

] '.'o.r*,* anatiu:., 2.0 5 . r*,r;.,, .

I +APUo
+APuo 66o9leAFl!{Gsogleln.l
66oqleAFl!{Gsoqleln.) Z.A
z.a 5
5 i
i :,,n
i..,Anaroiazr Android2.ol 10.1 r i 'ill^:l
:n.1
APIZI
A.d.ordJlU
APUIU
. APUI.U
GoogleAPI!icooglPln(.,
Ard,. d i 1.rpJ.rel
6009l.APl<,booglel.(.J
6ooqr. APl. icooqle I.(.J
2.1'upda... ?
2.1-upda... 7,
?.I-Lpdd...
6

Instalasi Aplikasi melalui lnternet

Android22 androdl2 D e
Buka menu pilih broroser dan
l

I APUZ uoosl( rPl',Gcogrela(.t 22 I

I . ono,o,o.2: rnd,c d 2.1 2.J

I-: *-
q

' ooD] Gcog,e nP1, 'ooo, .,n, ,

''- -*- )J I
:s:{
masukkan alamat uteb yang
menyediakan aplikasi-aplikasi
i

"1'"'t1 o*':"t o**

I X 1 "',::"', -,.
An Andlod Vidunl Osi<e that {ail.d to
i*r':o:.^.":l':* :l*'
l*d. (li(l 'Details' to tee lhe .r.ot. android yang gratsi misalnya
www.freewarelovers.com, pilih
Gambar 2.8 Semua AVD salah satu aplikasi dan kemudian
pilih pilihan dounload

di atas, kita dapat melakukan proses testing

Setelah kita melakukan hal Setelah aplikasi Anda dotunload,
running simulator AVD kita dengan cara menge-click start-launch kita dapat lakukan langsung
sehingga akan tampil simulator AYD kita sebagai berikut: instalasi, sebenarnya banyak
utebsite yang menyediakan Gambar 2.10 Download aplikasi di internet
aplikasi yang free Anda dotanload seperti www.market-android.com
yang merupakan market android resmi dari google.
lnstalasi Aplikasi dari File
Aplikasi android juga bisa diinstalasi menggunakan console atau perintah
command line, hal ini dilakukan apabila Anda men-download aplikasi
android tidak menggunakan smarthpone alat emulafor Anda, caranya
adalah dengan menggunakan perintah adb install, tool itu terdapat dalam
direcotrg tools di mana Android SDK kita berada, berikut ini adalah contoh
perintah untuk menginstalasi meebo di emulator kita.
adb install e:\meebo-22.apk (fi1e meebo*22.a?)k t.erdapat dalam drive
Menggunakan Aplikasl Sourcode Project
Untuk dapat menggunakan project yang dibahas di dalam buku ini anda
dapat melakukannya dengan teknik import dengan cara:
. Buka IDE Eclipse,Windows-Showview-Project Explorer
. Click kanan pada layar bagian Project Explorer pilih import pilih
General-Existing project into workspace, kemudian brouse di
mana direcfory disimpan file-file project Anda, sehingga akan tampil
list-tist project yangada, seleksi p roject dengan checklist danTtnrsh.
e) . Project siap dijalankan.

Uninstalasi Aplikasi Android

Kita juga dapat menguninstalasi aplikasi
android kita apabila kita sudah tidak
membutuhkannya lagi, caranya adalah
clfck pada Setting-Application-Manage
Aplication dan lakukan pemilihan
aplikasi yang mau di uninstalasi seperti
contoh berikut ini:

Gambar 2.11. lianoge application

Kemudian pilih uninsfcll dan pilih ok seperti gambar berikut:

Gambar 2.12. Uninstalasi lieebo

BAGIAN 3

HELLO ANDROID

Sekarang kita akan membuat program pertama kita pada android, seperti
belajar bahasa pemrograman yang lainnya, biasanya program pertama yang
dibuat adalah program untuk menampilkan tulisan "hello word",lebih sering
dikenal dengan program hello uord.
Program HelloAndroidl
Jalankan IDE Eclipse, pilih File-New-Android Project, sehingga muncul
pilihan seperti berikut:

Select a Hizard

Wizards
type filter tst
I g$ .lava Project
| * ,J*a eroiect f rom Exrsting Ant Buildf ile
It* *! Pluq-in Proiect
I I t*l Generat
I ei Faceted Project
I f:i Project
I . i**r*q8,l
I *i android Prdert
Il"' d, Android Tst Prolect Gambar 3.2. Program HelloAndroidl
i )
i
LScvs
I i' L.i, Java
| : i:* Plug-in DtreloPmenl
Ketika Anda me-running aplikasi android, membutuhkan waktu untuk
proses loading emulator-nya, dianjurkan setelah Anda berhasil me-running
program tidak perlu menutup emulator-nya apabila ada program aplikasi
t?\
yang lain yang akan di-running, sehingga tidak membutuhkan waktu lagi
Gambar 3.1. Create New Proiect Android.
untuk booting emulator tetapi langsung mengesksekrsi project android
yang akan kita jalankan. Tampilkan project explorer untuk melihat semua
elemen-elemen yang ada pada program HelloAndroid seperti gambar di
project bawah ini.
kemudian isilah isian yang diperlukan dalam membuat slu'at:u
android sesuai dengan isian berikut: Id HelloAndroidl
: HelloAndroidr r ;$ srr
Project Name r S com,wilir.hello
Buitl Target : Android 2.3 , tB,tgt;+*ij
Application name : hello r, 6 hello
/ E* gen illlir.ril(tl Jr';a f rlcj
Package name : com.wilis.hello r $ com.wilis.hello
Activity : hello
e 1S
r ijl RJ',u
Min SDK
Android 2.3
:9 I $! androidjar- Fr\.irrrlriirl frisil,t.r.jrriC Li$(platirrmr\rntlreirl t
t. ____^_
. Pl ,"u
Untuk menjalankan programnya adalah click kanan di nama project di ; 6!, drmable'hdpi
jendela project explorer (menampilkan project explorer dengan menu r e} drawable-ldpi
I (3. drawable-mdpi
windows - show view - project explorer), kemudian pilih menu Run r (i' lByout
As-Android Aplications atau dengan cara singkat click tombol run yang l:( minxml
berbentuk segitiga ke kanan pilih Run As-Android Aplications sehingga r ilr valus
I strings,xml
muncul tampilan seperti berikut: ,,:il AndroidManilest.xml
El default.propertis

Gambar 3.3 View Project HelloAndroidl

Dari gambar uietu di atas, dapat kita lihat susunannya,-1tle java berada dalam Dari source coding main.xml di atas, dapat kita lihat bahwa untuk menampilkan
Jblder src, file generate jaua file (Rjava) berada pada folder gen, file texf adalah dengan coding android:text= "Gstring/he77o,, kode ini
Libraries android platfurm aplikasi berada padafolder Androidz.3 di mana menunjukkan bahwa android:text berasal dari string.xml pada directory
versi 2.3 adalah target platform aplikasi yang kita bangun. Ttle xml berada r es f u alue s, melalui pof n t er y a\g berada p adafile R j ava.
pada folder res(layoutfualues), serta Tile Android.Manifest.xml serta
default.properties. File Rjava ini di-generate oleh sistem secara otomatis, dan tidak
diperkenankan diubah secara langsung.
hello java
package com.wif is. helfo; Rjava
package com.wi 1 i s.he11o;
inport android. app. Activity;
irqport android. os. Bundle ; public finaL claeE R I
pu"bIic class heffo cxtenda Activity public etatic final class atlr (
{
. ** CaIle.l rv:e.n Lhe acLivit.y is f i rsL created. . )
public static final class drawable {
publlc woid onCreate(Bundle savedlnstancesEate) public statl"c final int. icon=0x7f020000;
{
super. oncreate ( savedlnstanceState) I
;
public static fiaal class layout {
setContentview(R. layout .main) ; public static finaL inc majn=0x7f030000;
I
pubLic static final class strjng {
public st.atic flnal int app_name=0x7f040001;
Actiuity adalah merupakan basic class untuk sebuah user interface. Di mana public statLc final- int hello=0x1f040000;
1
kita lihat bahwa di dalam Actiuity terdapat sebuah method onCreate yang )
berfungsi untuk memanggil setContenVieus. sementara setContenVieu
memanggil sebuah f/e main.xml (R.layout.main), main.xml ini yang
bertindak sebagai user interfoce. Berarti string yang ditunjuk yaitu string yang berada dalam file string.xml,
string dalam.Ttle inilah yang akan ditampilkan ke user interface.
Double click file main.xml dan pilih tob "main.xml" untuk melihat kode
main.xml.
string.xml
<?xnl versiorr="1.A " encoding= "utf-8"?>
main.xml <r-r:,.,;1rfC l>
<?xnL version="1. 0" encodi ng= "utt -8"?> <s;' i:'g name=".he7 lo">Helfo Wor1d, heflo! </t::.:r,c.tr>
<i i neo r1-ayo, r' <L, r. .i r"t name= "app_name ">heIf o< / .:;t . i :.q>
< I resources>
:<nrlns : andro id= " h L Lp : / / s chemas. anclroi d. com t apk / re s r andt o id''
android: orientaLion= " vertica l "
android : Iayout_widE.h= " f i I lJa-ren c" Sebagai latihan, Anda dapat ubah isi dari string menjadi <sLrins
android: layout-hei ght= "fi /J_3rarenr "
name= "he7fo">Hai, ini program pertama saya
<T'-.x';Vi ev/ diandroid !< ,/ s Lri,ng> . Kemudian running ulang aplikasinya dan lihat
android : 1 ayour_widrh= " I i I 7JsarenE "
android: layout height= "wrap_corltenE "
hasilnya.
android: Lext.= "@sfri ngthe77o"
</Lf nedr La-Y0ui >

Program HelloAndroid?
Buatlah project baru dengan ketentuan berikut ini:
 Project Name HelloAndroidz
Buitl Target Android 2.3 Program HelloAndroid3
Application name hello Berikut kita akan coba memodifikasi tampilan layar program HelloAndroid
Package name com.wilis.hello dengan warna tulisan dan warna background. Buatlah project baru dengan
Activity hello ketentuan berikut ini:
Min SDK 9
Project Name HelloAndroid3
Dari program sebelumnya dapat kita lihat bahwa coding aplikasi untuk Buitl Target Android 2.3
menampilkan hello-nya adalah melalui 7tle xml yaitu main.xml) string.xml Application name hello
(coding seperti inilah yang direkomendasikan),untuk lebih mendalami
Package name com.wilis.hello
sekarang kita akan coba membrat hello android dengan coding melaluif/e
Activity hello
java.
Min SDK 9
Pertama hapus beberapa dan file main.xml sehingga menjadi seperti
hello java
berikut:
. ?>cnl version='-1. 0" encoding="ut f-8" package com. wiLis. hello ;
?>
<LinearLayouf
irrport android. app.Activity;
android : ori entation= " vert i caL " irq>ort android. os. Bundle ;
android : layout-width= " f i 7 7 Jarent " public clase hello exteriilg Activity {
android : IayouE-heighL= " f i I f Jsa rent''
l"* Called when ihd actj-vity is iirst created. *l
< LinearLayout> G:)''crr i,ie
,/
publie woid onCreat.e(Bundl-e savedfnstancestate) {
EIrpGr. onCroate (savedlnstanqestate.l ; . ,,.

Kalau kita perhatikan dalam main.xml ini tidak memiliki TextView seperti setcortentview{R. layout : main} ; I

pada main.xml HelloAndroidr, ini artinya bahwa main.xml tidak memiliki )

)
komponen yang mau ditampilkan sebagai lagout User Interfoce (UI).
Sehingga coding di hellojava kita tidak memerlukan untuk memanggil
R.layout.main, ubah-fle hellojava menjadi seperti coding di bawah ini: main.xml
<?xml version= "1. 0" encodinq=,,utf-8,,?>
packag€ com.wi1is.he11o; <Li nedrLayou L

xnlns I irndrqid: ,'hl t:p i / / slchemas . and.roid', eom/apk/ res /android,'

funport android. app.Activity; android : 6rieotation,:,,yerti cal
irport android. os.Bund1e; .. android : layouE-widtha,,filJ:J:arer:r,,
lmlrcrt android. widget . Textview; aqdroid : leyout_height=,,fj I ]_-i:arent,
pub1,icc1{3glre11o'eiltenda'Activity{] android:background =', # t t00tf00 "

/*t Called when tshe activity is tirst creared. */ <lexrView

reOver ride
puJclic void onCreaEe(Bundte savedlnstancestate) { andloid : layout*width.,,fill;ardnt,.
.andrq id : layQqt*he i ght=lwral]_con r €n L il
auDer . oncreaEe ( savedfnsEancestate ) ;
TextView hello = new TextView(this)
.' android:co,lor =,'#ffft.ftjo!'
i
heffo. seLText. ( "Hello Android" ) ; 4ndroid:background .".# t t00AA f f .'! .

. ahilr o i d.: Lert,=: ",llazruddi n .9a faa t .Ii. .,i

setcontentview ( he]1o ) ; />
< /1,i.&eafl,ayout> '.
]

Dalam coding di atas berarti program dalam menampilkan isi fext langsung
Jalankan aplikasi dan lihat hasilnya seperti apa.
dari main.xml, tidak menampilkan berdasarkan string.xml karena dalam
main.xlm tidak ada statement yang memanggil string.xml (seperti contoh ke- Simpan 7tle it:u di
folder HelloAndroid/res/drawable-mdpi (proj e ct android
z kita yang telah dibahas sebelumnya), android: background kita biasanya berada dalam folder utorkspace di fold.er -usir), sehingga
="#ff}0ff00" dan android:color ="#tffftt}a" adalah untuk tampilan project uieu kita seperti ini. (ikafile belum tampil lakukan reyresn
memberikan warna background dan mernberikan warna text yang akan atau tekan Fs). cara memasukkan file-nya bisa juga Anda lakukan dengan
ditampilkan pada layar aplikasi android kita. Untuk pemilihan jenis-jenis click kananfle di windows explorer pilih copy, kemudian bukan project
warna pada layar dapat lihat di: uieu di eclipse, pilih drawable-mdpi, kemudian c/rck kanan aan pilin
http: //deueloper.anclroid.com/reference/antlroid/grnphics/Color.htntl. paste.
Beriknt ini adalah tampilan dari coding di atas:
HelloAndroid4
J G$ srr
r g$ com.witis.hetto,
;. pl hetlolava
E$ g.n l{rn*rrt*ti ,l;:.* lilr:l
t S Andrsi,d 2.3
[!. asets
G=l r."
* L*r drawahte-hdpi
1r, ill drawable-ldpi
r 1i$; draw.ahle-mdpi
ffi android.png
ffi icon.png
Gambar 3.4. Program Hel[oAndroid3 ;r ffl layout
i: B" vdlu.es
[li; AndroidManifest.xml
Program HelloAndroid4 Gambar 3.6 HelloAndroid view drawable

Untuk mempermahir dalam pemahaman sturuktur aplikasi Android, kita

akan membahas lagi program HelloAndroid, tapi kali ini menggunakan Berikut coding HelloAndroid gambar dengan kode java
gambar, baik itu dengan coding java maupun coding xml. Buatlah project
baru dengan ketentuan berikut ini : hello java
Project Name HelloAndroid4
package com. wi1is. helIo,.
Buitl Target Android 2.3 inrport android. app, ectivi- ty;
Application name hello irngrort android. os . Bundle;
Package name com.wilis.hello i6;; il;;;;. ;;;It. iiis"v,i*w,
Activity hello pubX.lc c1ag6. hrel10'e:atende Activity i I

Min SDK 9 . l.*1 Callled,.vrhen the aetivity is fiist cre.aLed. ,*l ,..
tiOvc r r. -rlc
public void oncreat.e(Bundle savedlnstancestate) {
Sediakan 7tle gambar android.png seperti di supe.r. oncreate ( savedlnstancestaie ) ; .
samping ini. (file dalam format png) ImageView .fie1loWoid = iew Imageview(this);
liel 1 oWord . Se glmageRe$ource ( R. drawable . androj d) I
,, setcontehtvielr(Eelloword) ;
I
)

Gambar 3.5. android.png Image dipanggil dengan R.drawable.android (android adalah nama
file
tanpa ekstensi png dalam pemanggilannya)
main.xrnl: hello java
<?xrLl version= "L. 0" encoding= "utf.-8"?> packag€ com. wilis.he1lo I
<Lrnear Lavouf- irnport android. app. Activity;
xrnlns : andro td= " ht tp : t / schemas . andz o id . com/apk/ res /android"
android: orient.ation verticaf "
= "
anclroid : layout;width=" fj l,-paren t I
-1 public c1a66 he11o exienda .Activity {
android : layout*leight = " fj "I."lJ:aaent ^ > ,'* .al led when rhe activicy is firs[ created. *l
(.::,..),'i ]e
.pulrlie 1rol,il oncreaIeiBi]fldls savedlnstai.ceState) {
Euxrer. oncf eate { savedfnstancestate ) ;
Perhatikan coding java di mana kita menggunakan statetement setcontenfview ( R. l"ayoLrt . ma ju)
;
setcontentView (HelloWord) ; j
untuk menampilkan ke layar di mana )

HelloWord itu sendiri didefenisikan

sebagai image android, tentunya ini
Perhatikan dalam hellojava di atas kita tidak memerlukan libraries
memerlukan libraries yaitu dengan android.widget.Imageview, hal ini dikarenakan kita menampilkan
gambarnya menggunakan coding xml bukan melaui coding java.
mengimpor p aket uidg ets dengan
perintah import
android. widget . ImageView; main.xml
Penjelasan tentang android . widget <?.:.r.' version= "J. 0" encodinq=,,utf-8,,?>
akan dijelaskan pada bagian Widget. < I.: ncdrl.ayuu r
xm i ns : andro i d = "h r rp ; / /s c hema s . andr o i d. c om,/ apk / r e s,t andr o i d,,
Ketika program diatas dijalankan akan android: ori enLati on= ,\rerLl CaL ,'
menghasilkan gambar sebagai berikut: Gambar 3.7. Program HelloAndroid4 android : layout ..width=,,fj f L_j:aren t,,

Fi/e gambar yang ditampilkan umumnya harusJtle bertipe png dan ukuran
sizenya 64x 64 pixel, apabila Anda memiliki gambar yang tipenya jpg, Anda < I maqev i cw android : id= , G+ ict,r inageview,,
dapat conuert dengan tools conuerter image atau membuka file itu dengan android : layout_height=,. fi.j 7 J)arenL,,
mspaint dan menyimpannya dengan saue asformat sebagaipng. android : sr c= " d rawabl e,/ andr o ict.
@

/>
</-inear l,.ryo rr>

Program HelloAndroid5 Lakukan run program, sehingga menghasilkan hasil yang sama dengan
Proram HelloAndroid4 menggunakan coding java dalam menampilkan gambar 3.7 di atas, sekarang coba dengan menampilkan imageview dengan
gambarnya, pada program HelloAndroidS ini kita akan mencoba format wrap-content, artinya setiap coding ,tfill3arert- dig;ti
menampilkan gambar sebagai HelloAndroid dengan coding xml. Buatlah dengan ttwrar)-conEent" dan perhatikan apakah ada perbedaan hasil
projectbart dengan ketentuan berikut ini: tampilan programnya.
Project Name HelloAndroid5
Buitl Target Android 2.3
Application name hello
Package name com.wilis.hello
Activity hello
Min SDK 9

Masukkan kembaliTile gambar seperti pada bahasan HelloAndroid4.

BAGIAN 4

usER /NTERFACE (Ut)

Komponen User lnterface (Ut)

Secara umum Arsitektur user interface (uI) pada aplikasi Android adalah
user interfoce yang meliputi Actiuity dan user interfoce yang terdiri dari
komponen. Semua yang berhubungan dengan user interface pada aplikasi
android biasanya berada pada lokasi res/layout/filename.xml. di
mana coding java untuk memanggilnya yang kita kenal dengan
R. layout . filename.
Secara umum sintaksTtle ini mempunyai sturuktur sebagai berikut:
<?Kn1 version='1.0" encoding="utf-8"?>
AndroidManifest.xml
<Viewcroup lcnlns : android= " http: / / sclremas ' android. com/ apk/ res /android "
ri/e AndroidManifest.xml diperlukan oleh setiap aplikasi android, file ini
android : id*,' B I + I {pAckage : I idl resource*rametr
., android:1a1aQut-heiqht-l."djrnensjqnl l. "fi11-parent]. ] "'wrap*contentx] lrerada pada folder roof aplikasi. File ini mendeskripsikan variabel global
'android:layout3idth=[rdimension".. l' "fill-parent". ] rro*uu-"ontenc"l clari paket aplikasi yang kita gunakan. Berikut adalah contoh 7tle
,... lvietifrroulT:speqifjc atlrj.butesl > AndroidManifest.xml yang akan kita gunakan dalam program Ulcoding.
<Vaew
. aridroid: id:tr0 [+lripackage:lLd/ resaurce*name'l ''
androidrlayo.ut-heightqt"dimensjon'|"fi11--oererLti,': l "wrap-content"l
andro-1d: layqut*width= t "dr mens ion" l,i fi:,t3arerrt1" |'wrap-content " l AndroidManifest.xml
.. lVi6lr-speclfic atttibureg] > ,. ,'.
''' ,r"' '. <rqqqe$tFocUs/> .. r ..
,r
<?,.'.- version=,'-1. 0,' encod.ing=,,ut t-g,,?>
.i.i. . .:.
t. a/Viet, i' .. t r.r...,:.lt .,,'.,
*st xmlns : android= "httr / l schemas. ancirr:i
<rnani f : d. cam/alsklres,/€ndroidl,
package= "cem. wjJjs. uicodingL
...:Y;Zff;f,un..,....... anclro i d: versionCocle=',1,,
< / VieuGrouP> android :versionName= "l . 0,>
<inqlude ldyout: "
g ldy anl / Tayout-re I auvc e " I > <application android: j"con= ', Gdrawalsf e/ icon
< / Vi ewGroup>
android : 1abe1= ,, @stzring,/ap.p_narne ',>
<.-'i'..ity androjd:name=,'.,icodingl,,android:labe1=,,@stzingtapp_rame,,>
Komponen-komponennya adalah sebagai berikut: <..:errt. J..l.ltr.r>
. <ViewGroup> <. i ron andro-id:name=,,and.roid.intent -acLian.I4AIN" />
Kumpulan uieta di mana kita dapat menentukan tata letak komponen <, ., |,..,i)c r'r' androicl : nam e=,' a ndro i d . i n f en t . ca Leg o ry. LAWCHER, / >
</:r,Lpni. f i It-er'>
uieu secara berbeda, seperti Li-nearl.ayout, RelativelayouL, </.t '' '-r.'-,>
Framelayout, serta Tabulasi. Atribut dari ViewGroup ini biasaya < /.;)fi| j r'ac i or.>
terdiri dari : < :sj: rr- s,lk andro.id:minSdkVersi on=,,9,, />
. android:id </.'nni:est>
resource id, yang berisi variabel unik dat'r elemenf tersebut.
. android:layout*height Di dalam AndroidManifest.xml ini lah berisi semua pendefinisian hal-hal
dimensi Dalue-nya (height) yang diikutinya dengan opsi "fiIl*parent" yang dibutuhkan oleh aplikasi android kita, beberapa elemen yang terdapat
atau "urap-content", tentunya perbedaan keduanya sudah kita di dalamy'/e ini adalah sebagai berikut:
bahas dalam akhir bab program hello android.
. android:layout-width <manifest>
dimensi ualue-nya (width) yang diikutinya dengan opsi "fill-parent" Titik root utama dari AndroidManifest.xml, berisi atribut package aplikasi
atau "wrap-content" serta paket actiuity dalam program android kita.
o <View> <rn.;rni f es t :silns : anrlroid=' htlp : / / schemas . android., comlapkl res / androi d,,
Sama seperti <ViewGroup> tetapi <View> lebih di kenal dengan package= " com. wi I is . uicodingl- "
"individual UI component", atributnya juga minimal terdiri dari tiga android : versionCode= " 1,,
yang sama persis dengan atribut yang dimiliki oleh <ViewGroup>. android : vers i onName=,, 1. 0,' >
. <requestFocus>
Elementkosong yang bisa kita defenisikan di dalam <view>
di sini terlihat bahwa package kita adalah com.wilis.uicodingr beserta
er sion co de yang digunakan.
. <include>
u

Memasukkan file layorrf ke dalam layout.

Atributnya sama dengan
<ViewGroup> dan <View> tetapi ada satu tambahan atribut yaitu
<resource> yang berfungsi untuk menentukan
<uses-permission>
Menjelaskan tentang user permissionf security permission yang harus
file layout-nya. diberikan agar aplikasi dapat berjalan sebagaimana mestinya misalnya,
apabila kita menggunakan resources yang tersedia dari sistem, seperti ketika <servlce>
mengirim sms, dan sebagainya. Contoh uses-permisson ini adalah Merrdeklarasikan komponen yang dapat berjalan sebagai seruice (berjalan di
lruckground).
<uses -permi ss i on andro j d. name= " android. permi ss ion . RECEIVE-SMS " / >

<provider>
<permission>
Mendeklarasikan komponen-komponen yang mengelola data dan
Menjelaskan batasan tentang user permissionf security permission.
nrempublikasikannya untuk dikelola/dipakai oleh aplikasi lain.
I
<instrumentation> <uses-sd.k . i: .;:ll android:minSdkVersion - ?>
Mendeklarasikan komponen instrumen yang tersedia untuk menguji
fungsionalitas dari paket aplikasi yang kita gunakan dalam aplikasi android Mendeklarasikan skd Android yang digunakan, bisa juga menentukan sdk
kita. minimum yang digunakan. Sampai buku ini ditulis, tersedia kemungkinan
nilai minSdkVersion sebagai berikut:
<application> . r mewakili Android 1.o SDK
Elemen rootyangberisi deklarasi aplikasi android kita. . 2 mewakili Android 1.1 SDK
-app I i car i nn android.: icon= " @dlawabTe/ icon" >
o J rrewakili Android r.5 SDK
o { mewakili Android 1.6 SDK
<intent filter> o g m€w&kili Android z.o SDK
Mendeklarasikan intent yang dibutuhkan oleh aplikasi android yang kita . 6 mewakili Android z.o SDK
gunakan, atribut-atribut bisa diberikan di sini untuk men-supply label, icon, o / rrew&kili Android z.o Update (z.o.r) SDK
data, daninformasi yang kita gunakan dalam aplikasi android. . 8 mewakili Android z.z SDK
r ! rl€w?kili Android 2.3 SDK
<action> o 1o mewakiliAndroid 2.3.3 SDK
Berisi tentang action tApe yarrg didukung oleh komponen-komponen yang . 11 mewakili Android 3.o
berada dalam aplikasi android. . 12 mewakili Android 3.r
<category>
. 13 mewakili Android 3.2
Mendeklarasikan kategori-kategori yang didukung oleh aplikasi android.
. t4 mewakili Android 4.o

<data>
Mendeklarasikan tipe MIME, URL, aufhority penggunaan URL serta Program Ulcodingl
penentuan p ath yangdigunakan dalam URL.
Pada program Uicodingr ini kita akan coba lihat penerapan dari istilah-
<meta-data> istilah yang telah dijelaskan di atas.
Mendeklarasikan meta data yang kita butuhkan sebagai tambahan data yang
ada kita gunakan dalam aplikasi android. Buatlah project android dengan ketentuan sebagai berikut:
Project Name : Ulcodingr
<receiver> Buitl Target : Android 2.3
Mendeklarasikan di mana aplikasi kita diberikan informasi mengenai Application name : uicodingr
sesuatu perubahaan atau aksi yang terjadi, seperti menerima SMS. Package name : corn.wilis.uicodingr
Activity : uicodingr
Min SDK :9
 string.xml
<?xrI version=,,1 .0,, encoding=,,utf _g,,?>
<: €Ja!lt (:e1:>
<s trinq namei,,app_na]ne,,>ui iodingl< / s tr inq>
</r€r:O,;:,i,rS>

string'xml cukup berisi satu variabel yaitu variaber

app_name, variabel ini
dipanggil oleh melalui coding difireAndroid.Marrir".i.*.rrr
a".rgu., perintah
coding yaitu android: label= ,,@string/app*name,, untuk
menampilkan turisan uicodingr sebagai tampilan -;;"
sebenarnya kita bisa menghapusTt/e stiing.xmrlni
aplikasi kita.
{
langsung pada - fit" " a"nsu;
Android.tvlanifej.xmi
,o.rrgganti nilai
android: seperti
laber
uicod.ing-, ", dengan begituf/e androia.uanifest
= "
membutuhkan string.xml lagi untuk mengisi tidak
t
: android.rabernya karena sudah
diisi langsung.

Android.Manifest.xml
<?yfi. : version=,,1. 0,, encoding
=,,utf_g,,?>
<n;:inif *st. xmlns : andro iCt*,,hfip: lsehemas.. qadiqid.
: . '-:*--:: ::Y.'l'.q'a/ /rer l android,,
"/ com l.qtrsk,/res
packaqre= "corz;rd-li,s. ojcodjnerj.,

android:versionName*r1.6,i>.r. . ,,, I
<eipplicafion android;icor:=,6dtawable/icon*. .
android;1abdl= iGstring,tapr>...Dame1>. , .,. i ,,. . .

.. ,

<ac I ilri ly andrOid : name=, l.. jqodjlrg^I,,

u
android : label =, @ st r ing,t app_name,>
<inl:en, f I lL.cr>
<acri on android:name=,,andraid.intent
. action. MATN,, />
< .d i cuo r v android : name= ,,andro j
d - intent . categoty . LAIfi(CHER, >
</inrei:. Ii.ltsr> /
<,/.tcL.vity>
</rpp,lirarior>
<,/flJnit pJt >

packase= " c om . wi I i s . u i c od ingr adarah

defenisi packag edari aplikasi
uicodingr kita, Anda dapat_melakukan perub
ahan package di fire ini, tapi
perhatikan apabila Anda merakukan perub
ahan paciagr, j*,it u., coding di
java juga package ikut diubah.
ad^a buah inrenr yi"g
dimiliki oleh aplikasi android yang kita rancang, yaitu "*"*nya wajib
action anclroid:name=,,android. intent.acti on.MAIN,,
category android: name=,,android. intenr . calegory. dan
LAUNCHER,, .

di dalam Android.Manifest.xmr di atas, tidak kita

defenisikan <r_rses-s<lk
android:minSdkVersion= ./>., Anda dapat mendefenisikan
ini jika
Anda menentukan minimum SDK Android untuk mengeksekusi aplikasi
Anda. Akan tetapi, target SDKAndroid yang dipakai ditentukan di dalamTtle
-= \iiwr
default.propertis yang berada di dalam fle Android.Manifest.xml di dalam =- :.,1

project uieu. 6 ostweovs&j ,lil

g so*x.uio llllt
gv;* illl
Apabila Aplikasi Uicodingr dijalankan akan memiliki hasil seperti gambar & Yiewstub

berikut: @ weuviro
@ AnalogCtmk
0 Aubcsmptei
W Suttoft

S fheckBox
S Ct'wkea;"xtt
S Chronometer
$ oatepi"ker
0 0iqitaltlock ri
$ fo*feir
@ eattrl, * i, n

ai layoui main.xmli

Gambar 4.2. Graphical Layout main.xml uicodingl.

coba Anda tambahkan komponen lain misalnya Button, setelah itu

lrerhatikan coding main.xml akan otomatis menambahkan coding untuk
l<omponen yang kita tambahkan secara visual. penambahan secara visual
untuk pemula sangat membantu dalam mendesain layout main.xml.

Gambar 4.1. Program Ulcodingl.

Program Uicoding2
Perubahan atau penambahan komponen di dalam layout (main.xml) Sekarang kita akan coba perkaya pengetahuan kita mengenai user interfoce
sebenarnya tidak harus dilakukan dengan coding manual, namun bisa lreserta element-element didalamnya serta bagaimana memanipulasi user
dilakukan dengan visual, artinya kita dapat menge-drag komponen- interfoce. Buatlah proj ect android deng an ketentuan berikut :
komponen apa saja yang mau ditambahkan di dalam layout (main.xlm), Project Name : Ulcodingz
Caranya adalah dengan menge-click Graphical Layout pada editor eclipse Buitl Target : Android 2.3
seperti gambar di bawah ini: Application name : uicodingz
Package name : com.wilis.uicodingz
Activity : uicodingz
Min SDK i g

uicoding2 java
package com.wilis. uicoding2 ;

import android. app.Activity;

import androld. os. Bundle;
publlc class uicoding2 extenda Activity {
"* Called/in+n the acLiviLy is first createci' */
'-L.ei: iuu
pr:b1ic void oncreaue(Bundle savedTn$tancestate) {
super, oncreate (.s6vedI*$taric'estate );
setconL.enLview{R.laipu!rmaja).;
)
i

main.xml
<?. n,: version="i- 0" encoding="utf-B"?>
<tine&rla'r'out xmlng.i android=
" h t tp : / I s chemas . andro j d. c om / apk 1 r et 6 / andr ai d " Gambar 4.3 Program Ulcoding2
and.roid : orientat ion= " ver t i ca l- "
layout .width= "f j I fJarent"
""4r":d:
android : Iayou r-he ight = "fj 7 7 J)aren t "

< l'rrX1 '11en'

android : layout-width* "wrall*concert a 1 Program Uicoding3
android : layout*height- "wrap*con ten L'
android : Lext= " El ement One " Buatlah projecf android dengan ketentuan berikut:
/> Project Name
<-txll j(-t{ UIcoding3
android: Iayouc,width= "wrap-conEenE" Buitl Target Android 2.3
android : layout-heighL= "wrap-content "
Application name uicoding3
android: text='E-le,?enL Two "
/> Package name com.wilis.uicoding3
<'f&xLV:ew Activity uicoding3
android : layout-widxh= "wrap-content " Min SDK
android : I ayou u-height ='hlrap -con ren r " 9
android : text= " ElemenL Three"
/>
uicoding3java
</L.near L.7,'1'1 package com.wilis.uicoding3 ;

Di dalam main.xml ada tiga komponen yang semuanya tipenya adalah import android. os. Bundle ;
TextView.
{" Call(,d when ihc ucr.ivit.y is riist creared. o,
string.xml SOrrerride
pulllic void oncreatre (Bundle saved.InsEanceSEALe) . {
<?xnL version= "1 - 0" encodingr="utf - 8"?> auper. oncreate (savedlnst.anceState) ;
<resuur -:es> setcontentview (R. layout.majn) ;
<s tr ing name= "app*name ">ui coding2< / s t r inqt ]
</re:;c.rrce.:> )

Apabila Aplikasi Uicodingz dijalankan akan memiliki hasil seperti gambar main.xml (Layout berubah menjadi
berikut:
RelativeLayout)
<?xm}. version=,,1 ; 0,, encoding= t,p51.-6"7,
<Ri:lelt ivel-ayoul. xmlns : android=
" http: ,t I schemas. aadro-r d, com/apk/res/android,,
unclro-id: Iayout -width=,,ti f f Jtarenc "
andr id : I ayoul i gh L= " f j -7--::a.z e?? t ">
a".-
o
,, a
_1 rr' -i
string.xml
andro r d : i d,= " G * i cl. F.L7 1 "
.:? rrri.i
and ro i d : layout-wid Lh= 'wrap-conLenL "
version=',L. 0,, encoding=,,utf-g,,?>
androi d: l.ayout-height= "t rap-contenc "
<..' in.j Lame=,dpp_name,,>uicoding3</,,.L l,q>
android: text= " El ement One"
<' , ,.r r 1.'ir:r'
androi d : id= "La t icl t EL02 " Apabila Aplikasi Uicoding3 dijalankan akan memiliki hasil seperti gambar
andro i cl : IayouL h= " wrap- canten t: "
anclroid: 1 ayorrL--widt
height= "wrap-cantent " berikut:
anciroid: LexL= "E-lement Two"
androi d: layout-be Law= "@id,rELT I "

<T,l: ".'.('r
andro j d : I ayout-wi<1t.h= "h/rdp-con ten r "
android : .Iayout-heighL= " r,irap-co n t en t "
android : text= "E-iement Thtee "
android: layout-toRightof - "t?ic|/Fl .O)"
</V -,,1 i.,111,f,,/(, i>

Dalam main.xml ini perintah untuk menampilkan di layar menggunakan

layout_below dan layout-toRighOf. layout-below artinya berada di bawah Gambar 4.4 Program Ulcoding3
variabel yang disebutkan di dalam layout-below, sementara layout*toRight
berada di sebelah kanan. Selain kedua cara laAout itu ada beberapa layout
yang lain, yaitu:
. android:layout_above Program Uicoding4
. android:layout-alignBaseline Buatlah projecf android dengan ketentuan berikut:
. android:layout-alignBottom Project Name : Ulcoding4
. android:layout_alignleft Buitl Target : Android 2.3
. android:layout-alignParentBottom Application name : uicoding4
. android:layout-alignParentLeft Package name : com.wilis.uicodingr
. android:layout-alignParentRight Activity : uicoding4
. android:layout_alignParentTop Min SDK : 9
. android:layout*alignRight
. android:layout_alignTop uicoding{java
. android:layout-alignWithParentlfMissing package com.wilis. ulcoding4 ;
. android:layout--centerHorizontal
. import android. app. AcLivity;
android:layout-centerlnParent import android. os . Bundf e,.
. android:layout-centerVertical
. android:layout_toleftOf publLc claes uicoding4 er.tends Activit.y {
1tt Caller1 wheir ilre act.ivity is iirst created.. */
I .t...:::r ,,le
silakanAnda coba dengan mengganti lagout dengan salah satu layout di atas
publtg void oncreate(Bundl.e savadlnstanceState) . {
dan perlratikan perbedaan tampilan lay out-ny a.
' euper.oncreate (savedlnstancestate) ;
setcontentvier,rr R. layout, ma inj ;
(

)
 .'\lrlbila Aplikasi Uicoding4 dijalankan akan memiliki hasil seperti gambar
main.xml (menggunakan Absolutelayout) lrt,r'ikut:
<?;r,l version="1.0" encoding="utf-8"?>
<; JsolureLdyi:,l xmlns:android=
" hf ry) :,1,/ chemas . andx'oi d, c$n / apk / ves / andr aid'
x*:i ;
g
: ril:i:n*l; :;l:*ru: ; =

<.^xL'/iew

ilff : i 3, I 3l3X l- Xl i i i;:Y:-1k:Z:: ;:: ;

android: text= "E.1 ement One"

<Textview .. ..
android: layout-wi dth= "k/rap-conrent "
android : Iayouc_height = " wrap_con Een c "
anrlroi text= i'E-tement ?uo "
d r
android rlayout*x= "3 Opx"

<i r: x t- ./-i -- ..t Gambar 4.5. Program Ulcoding4

;";.. i"rout-w ici t h= " w r ap-c on t en t "
; ;;-
android: layout-hei ght= "t .zap-colltent "
android: t.exL- "E-iement Three" (loba Anda ubuh nilai layout-x dan nilai layout3 menjadi nilai 6o element
android : layout-x= " 5 }px "
android: layout y= " 50px" two dan nilai layout-x dan nilai*layout3 menjadi 9o untuk element three
/> rlan lakukan running :ulang project dan perhatikan perbedaan posisi
a7 ",:.r:.1 uf it:ri'/uul >
pcnempatannya.
"Element one" ditempatkan tanpa mendefenisikan posisi penempatan fext-
nya, sementara "Eelement two" dan "Element Three" dalam penempatan
posisi text-nya menggunakan perintah Program Uicoding5
and.roid : layout-x= "3 7px "
android: l"ayout_y= " 3 }pa' ,' lluatlah projecf android dengan ketentuan berikut:
android: lay.out*x= ' 51px' .
Project Name : Ulcoding5
android : layout*y= " 5 lpx'
Buitl Target : Android 2.3
nilai x dan y sebagai koordinat posisi penempatan text ditentukan. Tentunya, Application name : uicoding5
teknik ini sangat kita butuhkan apabila kita perlu menempatkan posisi texf Package name : com.wilis.uicoding5
pada posisi yang kita hitung secara matematis dengan konsep x,y terutama Activity : uicoding5
dalam peta dan game.
Min SDK :9

string.xml uicoding5java
<?xrnl version= "f , 0" encoding: "uft-8 "?>
packagre com -roil
. is . uicoding5 ;
< resoul, ces> imgort android. app, Activityi
' . <striilO: 4ame= "apArierne">uicodi4g4iIstr ing> ingrort android. os. Bundle;
<,/ rc scu rces >
public c16EE uicodingS extendg Activity {
l** Called when the activiL',2 is f irst created- *l
,,.r':,,rfile
public wo:Ld onCreate(Bundle savedlnstancestate) {
3lrper. oncreate I savedlnstancestate ) ;
seLconLentvieln.( R. layEut . main I i
]

main.xml (Menggunakan Tablelayout) Gambar 4.6. Program Ulcoding5

<?xml version="1. 0" encoding="utf-8"?>
xnlns : android= " ht t-p :,/ t schema s . andr a id. com / apk t res / and t o i d "
android:1ayou!-width=rfjl.J p reir"
android. : Iayout -he ight= " f i I *ar ent J. "
I

> Program Ulcoding5

<T,:.h.L e F ow>
<l e.(r '/i a.'r. Buatlah proTect android dengan ketentuan berikut:
andro i d: fayout-wi dth= " wrap-cantenE " Project Name UIcoding6
android: Iayout-heig ht= " wrap-content "
android: text= "Element One A" Buitl Target Android 2.3
Application name uicoding6
<.P:<L r/iev;
Package name com.wilis.uicoding6
android: layou t-.widt h= "wrap-cantent "
android: layout-height= "h/rap- contbnt " Activity uicoding6
android: Lext= "Eleme nt One B" Min SDK 9
/>
< lT&1:1eRsw>
<Tdl).1. r Po,r>
<TeY r ,/i ew
uicoding6java
android: Iayour-.width= "wrap*content " package com.wilis. uicoding6 ;
androj d: layout-height= "wrap-content "
android: text= "Element Two A" impor! android. app. AcEivity;
import android. os. BundIe;
<Tcxl /'('\ public class uj coding6 extends Activity {
android : layout*width= "I4/rap-cofl L€n c " , - - Ca11ec] rriren Llte activiry is f iist cteated. *;
android. : layou c-hei ghL = " wrap-con ren L" J/r'r, r " .1o
android:texL='ETemcnL Twa B" public voLd onCreate(Bundle savedlnstanceState) {
/> strper. oncreate ( savedlnstancestate ),.
</jdblcl.oh> setcontentview (R. layout . main\ ;
</ l(:brn' dvouJ > )

Proses penampilan layout menggunakan konsep Table.

main.xml (Menggunakan ScrollView)
string.xml <?y:rl version= "1 .0" encoding=',utt-8',?>
<?.<:r. l version='-1 .0" encoding="utt-8"?> <Scre1 1i"ri ew xmlns : android=
< r{}g {lurces>
, <.stringname='Ialapname'>uicodirrg5</sfr:i&(I> "http: / / schemas. androj d. com/apklres,/a-ndroid"
.,.i.-, andro id: layout-w id L h= " I i 7lJ)dL ertL ''
</rc,"j,iu: ces> android r layout_heiqhtx if wrel?_cont€n t ,,

android : scrolltrars* "v€rtica J ">

Apabila Aplikasi Uicoding5 dijalankan akan menghasilkan seperti gambar
( , .r,: -t Lcl r'C L: L
berikut: androicl : ori entaLion = " ver t ica l "
android: layout. widLh= 'rfi.lf-l]are4r,' . ... Apabila Aplikasi Uicoding6 dijalankan akan menghasilkan seperti gambar
android ; 1 ayouL-heiqhL< "f i I f.:p*teia L'.'' . .'
bcrikut:

<'f cxL u': cu

androidriext:=::i.iogrja ,$ilb'e*lr: :
':: . .'::.''

android;l,ayout*width*':fi7tJ)aienE..' r.l', .

android ; layour-heiEhrt,..".wra;Lcorltegt l''.,.1.,,1,

<Tcxr \/i ew
android:,..teXts "[lserxame' 1' ',','r' . i. iri: I ' '
r '' '

android, 1ayo*t;height='| wrap;cantent " ..

.r'i
<ECitTexl
andrdid.; id* "6+ id I u5erna$ie ".'
aldroid: layouL_wldtb* lfili]:s4ve]1c " .,.' .

andrq i d : 1 ayout-he,i ghii r'' #rar:corite. 4 ii !i i' i -

Gambar 4.7. Program Ulcoding6

<TextV;ew

android:layout-widLh.?"twra.- ao tent'!:'
andgo i d.r.l. ayou L-hei gh.t = "'rrap* con t e.n t''
Program UlcodingT
<Fd i r-Te: f
B:uatlah p r oj ect android dengan ketentuan berikut:
android r layouL-widtln= " fil 7J>arent "
androi ayout-height= 'rdrap-co ntent
d:I " Project Name UIcodingT
andioid: inputtype" =.<bexf Passwoidq. ': Buitl Target Android 2.3
Application name uicodingT
Package name com.wilis.uicodingT
i3}llilrru-,,;'G+'/r.o nbuttoa", . , ',,
Activity uicodingT
.
a[6seigl'; ] 6yi5uL-rnri dthi' l';.wr:ab= con tar t ", .''
android. r lalrouL-hbighi; ;wrap*iorteaL ' Min SDK 9
androidrl Lextiti'L,gint "" ii '

<TextVi ow uicodingT java

idr t'6+id.1sta tus." ..
a]1droid : ,'
package com.wilis.uiEoding?;
dndroid:1ay.out-width;,'1.f i.J.J.iarent " 'r ' .i
:. ,,:,
''aaaro
id : l- a.yout*he i gfiL*' w:t ap-con t ent e. i.
inrports android. app,Activit.y;
';indroid: !**lstyl*= \narrf;lal" 'l r'' .,.i...... 'j
irr$ort android.os.fuodle;'.. . ..,
androi.d; text= ;:Ei?ler Usefnane And .Pas,srarord."
/>
pub1icEJ.assuicodingrexta[aE'Aettvity.{
< /L inea rLayou t.> r'** ealled ,irhen ihie.,"&itiviry,r i"' girgl' Ctedted;,.:i
</Scro1 lView> i?r,ver r ide
nubtic woLd, onCreate (Bundle savedfnstancest.ate)
super.onCroate {savedlnsfancestabe.) ; .. , r,.,. ..

string.xml ]
setcortentview (R. layout. majnl ;

,?x$1 version-,*1.. 0' . encoding;.r111q1'-g t2; i

r<fe$qilf(e*> '.,. 1..' , . '" ,',

<$tr ing namer "apb-a4rna o>ui coding6< / s t r: ins,

</ r esou r-ces>
main.xml (Linearlayout) Buitl Target
Application name
Android 2.3
uicodingB
<?xrrl version- "1., " encoding- nutf -8'a>
-. --*--= Package name com.wilis.uicoding8
<Linea.rlayoilf
: / lsclxernas ; a4droici, c.o m / apk / r e s / andr o i d "
xmlns : andro id= " ht tp
Activity uicoding8
android : or:iente,!ion: "trert.i caL i Min SDK 9
android : layout*widt.n-' fiJt,-paren.9 " ..

aadroid r 1a:rout-heighL= 'fiL-LJrareat '> . ...'

<TexLVi{1w r'- l-:: "'' '1 uicodingS java
android : Iayout-widt
" 'l'
h= " t.L 1 f J,ar e nL " paekege qom.wilis..uico.ding8.;.
"'' . ..

android : f ayouc-he ighL= " wrap-corl t en r "

android: t"*t= "rrfe, Texc Be7ow" inport android. app. aetivity;
/>. .:. '
irnxrort android. oS. BundLe;.
<Ed i , TexL
import android . widget,:,CheqkB.r -
import android.widget . CompoundButton;
andro id : layout*width.*.'ifi f f --parert."
android : 1ayouL-heigrhti'wrab;cafitent " public class uicoding8 extends eetivity
android:hint.= "Text Goes Here ! " LilUrL$ments CompoundButton. Oncheckedchangel i s Eener {
CheckBox cb;
. Yi f ::lr
< /lin*artayautr> public voLd oncreate{Bundle icicle) {
aup€r. onCreate. ( iciile) ;
Ada dua komponen di dalam main.xml yaitu komponen Textview yang seruontentView {R . layout . marn ) ;
bertuliskan "Enter Text Below" dan komponen EditText yang bertuliskan cb= (CheckBox! findviewByld(R. id,.checkl ;
"Text Goes Here!". cb. set0ncheckedchangeli stener ( this ),
]

string.xml publLc void onCheckedChanged ( CompoundButton buEt.onview, booleaa

isChecked) {
<?.xml version= "I- 0" encoding="ut t-8"?> 1f (isChecked
cb. setText ( ,,checkbox : checked', )
"app- name ">uicodinsz</:r -i 11g>
)
;

.;.::i ::a:.name= else {

cb. setText ( "checkbox unchecked") I
Apabila Aplikasi UicodingT dijalankan akan menghasilkan seperti gambar ]
berikut: )

main.xml
<?:nrl version= "-1 .0" encoding="ut t -8"?>
<Cl:-tl,.Box xmLns:android="http://schemas.andtoid.com/apk/res/android,,
andro id : !d=', G+ id/ chec k',
android : Iayout_widt h=', wr ap_conL ent,,
andro j d : layou t _hel. ght = " wr ap*conEen t,,
Gambar 4.8. Program UlcodingT android:text= "checkbox : uncheckecl,, />

string.xml
Program UlcodingS <?xml version="1.0" encoding=,'uLf B',?>
<.Pl:^l lv ( _a->
< s L r:.i ng name= "app_name " >uicodingS< / I r .r .i n g >
Buatlah project android dengan ketentuan berikut: </::csour.ces;>
Project Name : Ulcoding8
Apabila Aplikasi UicodingS dijalankan akan menghasilkan seperti gambar
berikut:

Gambar 4,9 Program UlcodingS

BAGIAN 5

ACTIVITY

Konsep Activity
Actiuity merupakan public c/oss dalam aplikasi Android. Setiap actiuity
merupakan sesuatu yang unik ata:u single, yang ditujukan untuk meng-
handle macam-macm hal yang bisa dilakukan oleh user. Umumnya, actiuitg
berhubungan dengan dengan user di mana ocfruifu menciptakan windows
atau LII yang mana ditampilkan dengan concepts setContentView(View) .
Ada z methodyangpasti dimiliki oleh satu actiuity yaitl:
a) oncreate untuk menginisiasi suatu actiuity, biasanya dipanggil dengan
perintah setContentView(int) untuk resource yang kita defenisikan di
layout UI, dan perintah findViewByld(int) untuk memanggil uidget
yang dibutuhkan UI untuk berinteraksi dengan aplikasi.
b) onPause untuk menyatakan ketika user meninggalkan suatu ochufry.

Untuk penggunaan dengan Context.startActivity0, semua kelas octruiry

harus sesuai dengan <activity> yang dideklarasikan dalam suatu paket di
AndroidManifest.xml. Actiuity adalah bagian penting dari keseluruhan
siklus aplikasi, bagaimana actiuiy dijalankan merupakan bagian penting dari
Mss66t1/lry@s
model aplikasi.

Siklus Actiuity
Actiuity aplikasi android dikelola dengan sistem yang dikenal dengan
actiuity sfock. Ketika suatu actiuity start, actiufry diletakkan pada stack
yang paling atas dan actiuity-actiuity yang sudah jalan berada dibawahnya
dan akan terus berada pada posisi atas stack sampai muncul actiuity yang
baru.

Gambar 5.1 Lifecycle Activity

Pada dasarnya actiuity memiliki empat keadaan, yaitu:
1. active/running, jika actiuity berada pada posisi atas sfack.
2. pause, jika actiuity tidak dipakai atau dibutuhkan pada suatu saat
Berdasarkan gambar lifucycle actiuity di atas, secara umum dapat kita
tertentu, tetapi ochuiry itu masih ada atau uisible, ketika actiuity baru'
jelaskan bahwa looping (perulangan) yang mungkin dialami oleh actiuity
yang ditangani oleh sistem actiuity yang lama disebut pause dan masih
ada tiga perulangan, yaitu:
berada di memorg, bisa jadi suatu acfiuttA yang sudah keadaan pouse
tidak ada di memori yang kemungkinan disebabkan oleh keterbatasan 1. entire lifetime yaifi actiuity yang terjadi mulai dari onCreate0 sampai
memory.
dengan onDestroy0. Biasanya actiuitg ini akan dibuat sefiry global
ketika mendefinisikannya.
3. stopped, jika actiuity sudah tidak dipakai dan digantikan oleh actiuitg
2. visible lifetime yaitu acfiuifu yang terjadi mulai dari onCreate0
lain, actiuity yang sudah stopped tidak akan pernah dipanggil lagi, dan
sampai dengan onStop0,
secara parmanen memorA pun tidak menyimpan info mengenai actiuity
ini. 3. foreground lifetime yaitu acfiuitA yang terjadi di antara onResume0
dan onPause0
4. restart, jika actiuity pause atau stopped, sistem dapat menge-drop
actiuity ini dari sistem memory, dan ketika user membutuhkan actiuity
sehingga sintaks superclass dari gambar di atas adalah sebagai berikut:
tersebut, actiuity akan kembali keadan awal, artinya actiuity tersebut
mengalami proses restart. public class Act.ivity exrends ApplicaE.ionconEext {
protected voj-d onCreate (Bundle savedlnstancestate) ;
Berikut ini adalah gambaran mengenai actiuity lifecycle atau siklus dari protected void onstart ( ) ;
proLected void onRestart ( ) ;
actiuity di dalam android sistem. protected void onResume ( ) ;
Brotected void onPause ( ) ;
protected vo,id onstop O ;
 protected void onDestroy() ; Method Descriution KIItabIe Nefi
dibutuhkan (actiuity
abel 3.1, Lifecycle Activtty dihancurkan), dapat juga
Metrod Description Killable Next dilakukan dengan fungsi
onCreate () Ketika sebuah actiuity dibuat, N qtStarit o finish ( ) aLau
pada method inilah kita isFinishing ( )

melakukan inisialisasi seperti

create uietu, list data,dll. Killable di sini maksudnya adalah apakah mumungkinkan bagi sistem untuk
Method onCreate0 selalu diikuti rnematikan proses host actiuity atau tidak. Sehingga method yang ditandai
oleh onStart () dengan N itu berarti melindungihost actiuifu (tidak dimatikan).
crReBtar:to Ketika sebuah actiuity N onStart ()
Sebagai catatan, actiuity yang secara teknis Killable adalah N bisa saja
dihentikan, dan merupakan
prioritas untuk memanggil dimatikan secara otamatis oleh sistem apabila terjadi loro memory alal
actiuitg itu kembali. Method ini tidak cukupnya resource untuk menjaga actiuitg itu tetap hidup. Kejadian
selalu diikut oleh onStart ( )
tidak cukuptya resource bisa jadi terjadi karena banyak proses yang sedang
dieksekusi dan memerlukan kapasitas memory yang besar, sehingga terjadi
onStart () Ketika sebuah actiuity dipanggil N onResume
sebelum diperlihatkan ke user, ( )or lou memory yang menyebabkan beberapa actiuity otomatis hilang dari
onStop () nrcmorA. Berikut ini kita akan coba menerapkan konsep actiuity di atas ke
method ini diikuti oleh
dalam program aplikasi android.
onResrrme ( ) atau onStop ( )
onResume ( ) Ketika sebuah actiuy N onPause ( )
start/mulai melakukan interaksi
dengan user, pada saat ini Aplikasi Iaml
actiuity berada pada posisi
teratas dari actiuity sfcck yang Sekarang kita akan membuat sebuah program aplikasi Android yang
mana user akan melakukan bertujuan untuk menampilkan jam yang sedang berjalan di sistem, program
input. Selalu diikuti oleh ini akan memperlihatkan kepada kita bahwa pemrograman di android
onPause ( ) memiliki konsep actiuity yang sangat sederhana dan mudah dipahami.
onPause () Ketika sebuah actiuity lainnya Y onReaune Buatlah proTect android dengan ketentuan seperti berikut:
dipanggil atau dimulai, method ( )or Project Name Jamr
ini digunakan ketika data tidak onstop( ) Buitl Target Android 2.3
Application name jamr
harus disimpan kedalam sistem
secara parmanen, rnethod ilai
Package name com.wilisjamt
Activity jamr
diikuti oleh orrneEume ( ) atau
onStop( ) Min SDK 9
onStop( ) Ketika sebuah actiuity tidak lagi Y onRestar
dibutuhkan atau tidak terlihat to or Jaml.Java
lagi oleh user,method ini diikuti onDestro package com.wilis. jaml ;
olehonReEtart0 atau vo iryort :aildroid. app Activity,,.
onDestroy( )
;

iq)ort android . os . Bundle,.

qrDestrofro Ketika sebuah actiuity secara Y imDort android. view. View,.
inE ort android. widget. BuEton;
parmanent tidak lagi iryort java.util.Date;
Apabila program di atas di-running akan menghasilkan tampilan sebagai
bcrikut:

::,:::,:!sedildtlrBi,rri$$i43 6q,!$liq!rilsl l -rrrrilr-\i1

,:.i:.:,llrlillilllliii.itli':,,
::,ii.:.ii.i.rii.:, , l, ,,i.'1,'fl'r' ..: til.lrriiiiirri:r,i,i i ilitrrli

.:.,riiiil.:i.ulr;lrrl,ll,::Strltrtrittrr],r.r..:..1,,rr:1:rtt.:fiiiiil]liiulrir:iiitiili
lilllilliililllllltllllil,,.:,.

. .:'
;.
\.
: --::: 1

Gambar 5.2. Aplikasi Jaml

Penjelesan aplikasi jamr

package coding. android. jam;
inport android. app.Activity;
imBrort android. os . Bundf e ;
import android.view.View;
import, android. widget . Buttoni
import java. uEi1. Date;

pockoge deklarasi adalah package yang terbentuk ketika kita melakukan

creote project, seperti pemrograman java, biasanya kita membutuhkan/
import beberapa c/osses yang memiliki fungsi yang dibutuhkan dalam
aplikasi. Biasanya, closs inilah yang dikenal dengan android.package.

puhlic cl"ass jaml extends Actj-vit,y imlrl.e&ents view.,OnclicklisEener {

Button btn;
Acitiuities yang merupakan public c/asses kita, diwariskan dari
android.app.Activity, perlu diingat tidak semua class yang bisa didefinisikan
di java dapat didefinisikan di dalam android. Kita dapat melihat di website
android mengenai apa saja closs yang tidak terdapat di dalam android.

Kemudian terdapat tiga buah public uoid yaitlu

1x{qllc vold oncrcare(Bundle icicle} {
sqDer. onCreate..( icicle ),
jamzjava
bt.n=D.ew But.t.on (thie) ; Dackage com.wilis-. jam2 ;

Setcontentview(btn) ; Lmport android.oS,Bundle.:,

,! Inrport androj"d..view.Vi6w;' .. '.: ,
.i

itrport android. widqrdt. Butr.on;

puhllc void 'onellck{Vlew viero} {
' qpdateTimsi),
.\ publlc class j am2 Bxtcn{s Ac!.ivi t}. ixthl.anants vi ew. onc] icxr,iscener
private void updateTime ( ) { 00verride , '
,.
pu}.ic void dnCreaueiBundle lcicle) {
..,. .

btn. setsTexc (n6w Date ( ) . toSLring( ));

gqler-oncireat.€{iclqle);..:'' .'

setcont entview (R r lay-ouL.. rnajn ) ;

onCreate0 adalah method yang untuk memulai activity, di mana actiuiA btn= (ai.rrron) iindviewsyrd(R. id. bucror) ;
sudah didefinisikan di dalam superclass. Dalam aplikasi kita, kita create bi1r.'$etOnclicklistener l'this ),,
objek btn dengan perintah new Button(this), dan menterjemahkan updaleTime..{jl'.'l' ..i, . : . .r..
- setCqnlentviewlbtn) ,... .r '':

apabila click button akan dikirim ke actiuitg itu sendiri dengan perintah )
setonClicklistener (this) . Seterusnya memanggil fungsi updatetime0. Dublic void'pnClick{View.viewl .1 r' " '. '

updatetimq O ;. i i. .

Fungsi onClick O akan membuat setiap kita c/ick akan melakukan update
timeyang ditampilkan ke layar. Kemudian ketika kita melakukan onCreate0 prlvate rroid qpdaterirne{) {1,
bLn.seEText (new Date ( ) . toString( ));
atau mengclick (onClick0), akan meng-update time yang diambil dari fungsi j
Date0.toString0. )

main.xml
Aplikasi iam2 <?yrrl version= "-2. 0 " encoding=,'utf -8,.?>
<Br:tLou xmlns:android="http;llsci:emas,android,cornlapk/res/android"
Aplikasi jamr di atas merupakan aplikasi coding di mana tidak memerlukan android : i d=', 13 i c] /bu t: t on,'
+

t.ra.td.'a**a= u
"
atau membutuhkan main.xml sebagai lagout-nya, sekarang kita akan coba
i

androi d: Iayout_wj dth=,' f i I JJ)arenr ,,

lihat perbedaannya dengan aplikasi jamz di mana kita membutuhkan android : layouL*Lreiqh!1,,fi J J-.parel:6 *

main.xml sebagai layout, sangat penting sebenarnya menggunakan xml />

karena lagout dengan xml dapat lebih terstruktur tampilannya daripada
melalui coding java, root element deklarasi dari file xml adalah AndroidManifest.xml
>anlns : android= "http: / / schemas . android. com/apk/res /android" . nanifest:<rnlns:android="http://schemas.android.com/apk/res/android,
Ini deklarasi element yang wajib kita buat biasanya dalam layout main.xml package= " com. wi I is . j am2 ', >

dalam program android, berikut ini adalah file dari aplikasi jamz kita. <appli.c6tion>.. r:. .', ....
Buatlah proTecf android dengan ketentuan seperti berikut: <;. Livj ty android:name=" . jam2,' androj d: IabeI=', jam2",
Project Name ,lamz ."i r-Lorrr f iltor>
<action .android:name="android, in[eni.action.,uAiN* /]
Buitl Target Android 2.3 <caleqoray android : name:.'! andro id. iht enr . caLegory . LA{,NC}IER,, /,
Application name jamz .'inrenr.'1-ilrer>
< r acL ivi Ly,
Package name com.wilisjamz
:iapplicarjcr,>
Activity jamz , tndrlif es[:>
Min SDK 9
Dari coding di atas bisa kita lihat, bahwa android:id="@+id/button" adalah
id ualue yang kita kirim ke jamzjava. dimana id/button adalah merupakan
identifi.er untuk button widget. setcontentView(R. layout .main)
akan membuat Rjava akan di-updcte ketika project aplikasi di-running
dengan referensi layoutfile main.xml yang berada pada res/layout/.

Apabila kita jalankan akan menghasilkan seperti gambar berikut:

BAGIAN 6

iiw,iilittleri
."t:.,:,..'

os.il}:.aes+,qarrtqt$*,:a1:,i
".,:.t. ANDROID WIDGET

Gambar 5.3. Aplikasi Jam2.

Konsep Widget
Android uidget sudah kita implementasikan sedikit pada bagian actiuity,
pada bagian Android utidget ini akan kita jelaskan lebih detail mengenai
komponen-komponen yang terdapat dalam Android tuidget. paket widget
pada dasarnya merupakan visualisasi dari elemen user intergace (UI) yang
digunakan pada layar aplikasi Android dimana kita dapat merancang sendiri
sesuai kebutuhan kita.
Widget di dalam android ditampilkan dengan konsep Vieut.Di mana aplikasi Chronometer HorizontalScrollView
android pada umumnya menggunakan uidget sebagai Layout XML. Untuk CompoundButton ImageButton
mengimplementasikan widget, selain file java kita juga membutuhkan ImageSwitcher SeekBar
tambahan duafile. Berikut ini adalahTtle-file yang umumnya kita butuhkan lmageVrew S mpleAdapter
apabila kita membu al uidg et: Lrnearlayout S mpleCursorAdapter
r File Java Llnearlayout. LayoutParams S mpleCursorTreeAdapter
Berupa file java di mana merupakan file yang mengimplementasikan ListView SimpleExpandableListAdapter
aksi dari widget. Jika anda mendefinisikan suatu widget beserta LrstVrew..t rxedViewlntb SlidingDrawer
posisinya di layar yang didefinisikan dari fle XML, kita harus MediaController Spinner
melakukan coding difilelava dimana kita dapat mengambil semua nilai
MultiAutoCompleteTextView TabHost
atribut dari tata letakTi/e XML yang didefinisikan.
MultiAutoCompleteTextView.Comm TaFHost.TtESpec
. File XML aTokenizer
Sebuah file XML yang berada di res/values/ yang mendefinisikan
OverScroller TableLayout
komponen elemen-elemen XML yang digunakan untuk inisialisasi
PopupWindow TableLayout. LayoutParams
uidget serta atribut yang mendukungnya (file yang kita kenal dengan
ProgressBar TableRow
main.xml pada bab bagian-bagian sebelumnya).
. LayoutXML [optionaU QuickContactBadge
RadioButton
TableRow. LayoutParams
File ini tidak harus ada, file XML berada di dalam res/layout/ yang TabWidget
RadioGroup. LayoutParams TextSwitcher
menggambarkan atau penambahan keterangan pada layout uidget
RatingBar TextView
Anda. Sebenarnya ini kita dapat dilakukan di file java kita (/t/e ini
dikenal dengan string.xml pada bab bagian-bagian sebelumnya, dimana Relativelayout TextView.SavedState
fungsi string.xml itu bisa dihandle olehf/e javanya). RelativeLayout. LayoutParams TimePicker
RemoteViews Toast
abet 5.1. Jenis-jenis (Classes) anclrorcl wrclgets ResourceCursorAdapter ToggleButton
AbsListView CursorAdapter ResourceCursorTreeAdapter TwoLineListltem
AbslistView. LayoutParams CursorTreeAdapter Scroller VideoView
AbsoluteLayout DatePicker ScrollView ViewAnimator
AbsSeekBar DialerFilter
AbsSpinner DigitalClock
EditText
AdapterView<T extends Adapter
AdapterViewAdapterContexMenulnfo
>
ExpandableListView
Itlidget TextView
Alphabetlndexer ExpandableListView. ExpandableL Menampilkan text kepada layar dan memiliki optional bisa dilakukan edit,
istContextMenulnfo tetapi secara defoult Textview tidak dapat diedit, untuk dapat melakukan
AnaloeClock Filter edit harus menggunakan subc/oss yang berfungsi untuk menampilkan isi
ArrayAdapter<T> Filter.FilterResults Textview. Buatlah pro.Tect android dengan ketentuan seperti berikut:
AutoCompleteTextView Framel"ayout Project Name TextView
BaseAdapter Framelayout. LayoutParams Buitl Target Android 2.3
BaseExpandablelistAdapter Gallery Application name textview
Button Gallery.LayoutParams Package name com.wilis.textyiew
CheckBox GridView Activity tex[view
CheckedTextView HeaderViewl,istAdapter Min SDK 9
 Aplikasi TextView di atas sebenarnya bisa anda lakukan tanpa
main.xml rnembutuhkan import android. widget yaitu dengan cara
0" encoding= "utf ' 9"?>
<?xprL version= "1. menampilkan text langsu ng di-coding xml nya seperti berikut:
<TdlxiYiew xmlns:android= "httP; ,r /schemas.andvoid.coil/apk/reslancbaid"
android: td= " G+ id/ Lu-I isan "
.android : layput*width= "fi-i J*parent "
andro id : layouL-he i ght = " wrap-co n te nL "
main.xml (ubah main.xml menjadi seperti
/> berikut).
<? . . vcrsion= " l 0" encodi ng=',utt 8"?>
textviewjava <T'e:{LViei,,J xrnlns:android*"http://schernas.andro:d.comy'apk/reslandroid,,
android : Iayout_widch= " f i I f_pat enL,'
Dacka.ge com.wilis. textwiewi android : layout*height= "wrqp*con Lent,.
android:Lext.= ,,Ini adalah Eulisan dengan widget Textview,,
:lmport andioid. app - Activi t)t; />
iattrrort android. os . Bundle ;
;*;;; ""J..'J. *raq;f . r""tvj.e,;
pirblic 'ckigF texEview extelrds Act.ivity {
texMewjava
. l**.aailed. when the acLiwitv is fi,vst created. *l
ld(l'Jcrt'fJ,
pulrlic wold onCreace(Bqndle savedlnstancestate) .{ . iilport android. app. Activity;
super. oncreate ( savedf nst.ancestat e); import android. os. Bundle ;
setcontentview (R. layout . mainl ;
pubLic c:.asa lextview extends Activ!.ty t
Textvieu/ t= (TextView) findViewevfd (R. id. tulisan) ; :'** Called when the aclivity is first created. *l .',

. . t.satTexL( ''Ini adalah tulisan dengan widget TexlView" ) ; *--v"':i:Je

) pub1ic *o:ld onCreaf,e(BundLe savedlnstancegtate) {
) sup€r. oncreate ( savedfnstanceState) ;
setContentview (R . l-ayout. . ma jn ) ,.

]
Diperlukan libraries android.widget.TextView karena kita mendefenisikan ]
komponen yang berupa widget TextView, apabila Anda banyak
menggunakan komponer widget Anda tidak perlu melakukan import
semuanya cukup dengan Perintah:
Widget EditText
inport android.widgeE. * ;
Edittext adalah kostumisasi TextView di mana menjadi TextView yang
dengan perintah itu akan membuat otomatis semua komponen dari uidget dapat mengonfigurasi dirinya sendiri sehingga dapat diedit. Buatlah project
yang tersedia bisa dilakukan pemanggilan. android dengan ketentuan seperti berikut:
Project Name EditText
Perhatikan cara pemanggilan id komponen yang sudah didefenisikan di Buitl Target Android 2.3
dalam main.xml dengan menggunakan f indViewf d (R - id. tulisan) Application name edittext
di mana ini bisa diproses karena sudah dideklarasikan dengan Package name com.wilis.edittext
setcontentView ( R . Layout . main) . Activity edittext
Min SDK 9
Apabila Anda jalankan akan menghasilkan
seperti gambar berikut: main.xml
<?xnl vers-Lon= "-i. 0" encoding= "utf -8 "?>
<LdiLfext xmfns:android="nttp,//sc,hemas.android.com/apk/res/android,,
androi fi 1 ifl= " @* i fi / tampi 7,,
Gambar 6.1. Aplikasi TextView android: l ayout_widt|r= " I il lJsarent "
 layqut hei qht,E] fi ]]l2arelrt
,,',' qn4ro i,4 : ]l
android : singleLine= " €al se'
Komponent berupa EditText yang dikenal dengan variabel tampil dan
memiliki sifat boleh lebih dari beberapa baris (singleline=false).
edittextjava
I)acksgts com.wilis. edittext ;
iryrort android. app.AcEivity ;
iryrort android. os. Bund1e,.
$rJrlic claa8 edittext 6xt6rxd.s Act.ivity {
/** Called when Lhe acLivity is firsL creaEed.
tg(JVerlt ce
public void onCreate(Bundle savedlnstancestate)
auper . oncreate ( savedlnstanceState ) ,.
setcontentview (R. f ayout . main) ;
EditText. f= (Edit.Text) findviewByld(R. id. tampif) ;
f.setText("Ini adafah t.ampilan EdiEText di Android 2.3 " +
" Anda bisa memanggil fungsi EditText setelah anda"
" import libraries android.widget.EditText, Tampilan
" EditTexL menjadi beberada baris karena '
" android: s j-nglel ine=f al-se " ) ;
Apabila Anda jalankan akan menghasilkan seperti gambar berikut:
[ni adalah tarnpilar'] EditText di
Android 2.3 Anda bisa memanggil
fungsi f ditText setelah anda import
li brari es android -wi dget-{
Tampilan EditText menjadi
beberada baris karena android:
si ilglelin e=false
Gambar 6.2. Aplikasi EditText
l't'rhatikan cara pemanggilan id komponen yang sudah didefinisikan di
rlalam main.xml dengan menggunakan findViewfd(R. id. tampil) di
nrana ini bisa diproses karena sudah dideklarasikan dengan
r ;etContent.View (R. LayouL . main) ;
Aplikasi EditText dengan coding xml tanpa import android. widget . * ;
main.xlm
.:?rml version= "1. 0" encoding= "utf-8 "?>
<l.,iLTexi xm-Ins:android="httpj //schemas.android.com/apk/res/andtoid"
android : id,= " 13+ id / t anpi 7 "
android: layout-widt h= " f i I JJ:arenL '
android : Iayout-hei ght= " f i 1 f J)a rent "
android.: singleLine= " faJ-se"
*,i
android:text="rni adalah tampitan EdiETexE di android 2.3 Anda
t,isa melakukan tanpa anda imporE l-ibraries android.widget. Bdit'rext
( yaitu meJalui coding rcnJ, Tampilan EditText nenjadi beberada baris
kd rlna andro id : s ing le f i ne=f al se "
+ Sehingga coding edittextjava hanya seperti berikut ini
+ edittextjava
Dackage .cQm.wilic.. sdiLtext; .:
import android. app. Activity;
lflulort .android, os. Bundl,e.; .
pubtrlc class ,edittext.. exterrdF, Activity..{ .
l** Called wh€n the activitv is first created. */
00ve.r r i. r1e
public void onCreate(Bundfe savedlnstancestate). {
I
suf,rer.oncreate(savedlnstancestate);
set.Contentview (R. layout . ma i n) ;
d itText,
lAidset Radio B utton/RadioGroup
Pada umumnya RadioButton digunakan bersama-sama dengan RadioGroup,
di dalam satu RadioGroup terdapat beberapa RadioButton. Di dalam satu
RadioGroup user hanya dapat melakukan satu check/pemilihan
RadioButton. Buatlah proTect android dengan ketentuan seperti berikut:
Project Name : Radio
Buitl Target : Android 2.3
 Application name : radio
Package name : com.wilis.radio
Activity : radio
Min SDK :9

main.xml
<?xr1 version= "7. 0" encoding= "ut f . 8"?>
<P.rLdioC:r rr
xmfns: android= "httg:: 1 l schemas. aadroi d, cc>ml apklres /android"
android. : orientat i on= " vet t ica J
android : layour-width= " f i I LJ)arent "
android, laiout-treight= "f i lTjar ent "

<Rdcli.obr-,.i cn android: id,= " @ + id/ radioL "

' android : 1ayout:.widtfi*
"hrrap*conterr b "
androi d : 1 ayout-_hei ghrL-- " wr ap*c o n t ent,'
. aridroi-d : tex!; "liadio .Euttan 1. ,' /.> Gambar 6.3. Aplikasi RadioButton

naa i o Bu
<
ffi ,T,ffi ,:h:Hj,{,ff3;, ", t
.,,
android: layout*height= 'Mrap-corten
android:text="Radio Button 2,' />
,,
Widget I mageView/l mage B utton
<!.adioHut.an android: id= " @+id/radio3,' ImageView adalah utidget yang menampilkan gambar seperti icon.
androi d : 1 ayout*width= " wrap_co.n ten L " Imageview dapat memuat gambar dari berbagai sumber (resour.ce ata:u
il3::x*' 13*::;;13";; ;rfii:';:""' " content prouiders), sementara ImageButton adalah uidget yang
< /RailioGroup> menampilkan tombol yang berisi gambar (bukan teks) yang bisa ditekan
atau di klik oleh pengguna. Secara defoult, sebuah ImageButton hampir
radio java sama dengan button biasa. Buatlah project android dengan ketentuan seperti
berikut:
package com.wilis. radio,.
Project Name : Imager
luports andro.id. app. A,ct.ivity : Buitl Target : Android 2.3
imlrort android. os. Bundle ;
Application name : image
public cLasE radio extends Activity { Package name : com.wilis.image
/ { * Cal 'l ecl when the act ivi ry is irsl credt ed.
f " , Activity : image
ldr)1/L,r t-:.le
Min SDK :9
public void onCreaEe(Bundle savedfnstanceStaEe) {
sw)er. oncreate ( savedlnstancestate) ;
setconl.entview {S; }ayout . main) ;
main.xml
:-ragtrVr,'l xmlns:android=,,hEtp://schemas.android.com/apk/res/android'
androi d: id= " G+id/ 1ogo,'
and ro i d : l ayout_width = ,'wrap_cont.ent ,,

Pada deklarasi main.xml kita temukan dalam satu RadioGroup terdapat tiga android : l ayouL_hei ght = " wrap_content. ''

buah RadioButton. Apabila dijalankan akan menghasilkan tampilan seperti andro id.: adj ustviewBounds=, t rue,'
berikut:
 Lnport android.rrridg€t- ImageButEon;
rmage.Java i.,.',.
-

public cLass..'irndge axeends Activity 1 .

t ackrge com,'wilis.. irqage.l .i,,
l** Callec1 when the activiLy is .firsL created,,
irqrort android. app. Activity; GOverride
im6rort android. os. Bundle public void onCreate (Bundle savedlnstanceSf.ate)
;
super. oncreate ( savedlnstancestate) ;
irygrt androi.d.widget.Imdg.eVi6w; .,..,' setconE.entview (R. layout . main\ ;
public clies image ertt€nalr.,Activilty {"r' i,:r:
ImageBUttan.'dua = ngw ImageButEori(.bhit*l; .
/*, Called when the actjvir.y is firsc created- */ dua. setlmageResource (R. drawable . l-ogo2)
.'

;
@0vei::lder I
seEcontentview(dua);
DuFIiq votdl oncre'atse(Bundle savedlristancesqqle) {
'sL{rgr.oncreat-e{qayedrnstancegtate.}r,i'. .i:i. "
i
setcontentview(R. Iayout .main) ;

. lmageVierisat, = new fmag€view(thiEltirl-r l.: ...

Akan menghasilkan seperti gambar berikut:
satu'i set]nageBesouiCejR. df awable . I ogol ;
setcontentview ( satu ) ;
,

Akan menghasilkan seperti gambar berikut:

Kemudian rbah coding ImageView menjadi

ImageButton seperti berikut dan lihat Gambar 6.5. Aplikasi Widgets lmageButton
perbedaan hasilnya dengan chck gambar
dari hasil keduanya: Gambar 6.4. Aplikasi Widgets
lmageView
Berikut ini akan kita coba gabungkan tampilan dua gambar dalam satu layar
main.xml tanpa menggunakan libraries androd.widgets." (coding melalui xml).

>anl.ns : android= " hatp : I / schemas . android; qom/ apk / re.s / andf Qid'l main.xlm
. . and.roid: id= " E+idlloga.z'l
and.ro id: 1ayout-width= "wrap-content " <?ff- version= "1.0" encoding="uLf -8"?>
android : layout. helght*! wrap-conEent "
-,.1, . i.,r
....,. . i ..android: adjuptViewBorrnd$.= " true'. i r,-d r:,.tyou l.
<.i..
xmlns : android= " ht tp : / / s c hema s . and r o i d. c om / apk / re s / andro i d "
android: oriencation= "verticaT "

imagejava aadro id: 1"ayou!-hei gh!= I fj J l:$a rent'

package com.wilis. image,' ..:..
<,'raqeView xmlns:android="htrp: //schemas.android.com/apktres/android'
,...'.

inr6rort android. app. Activi ty; android : iC,= " @, id / i con "
Lqrfrnrt android. os . Bundle; android : layouL-width= "wra1r;co,rltdo,ir"
 android : layout-heiqht = " Iilrap*con Len L "
android: src -'@drawable17ogo "
/>
Bekeria dengan Kumpulan Widgets
<,.rn-qcB,i- f on l(umpulan Widgets yang memiliki struktur tersendiri-sendiri biasanya
xmlns : android= "fi1 Lp; I / android, comlapk/res /android"
schemas . tlisebut dengan controiners. Jika kita bekerja dalam sebuah tampilan
android: i-cr= " G+ id.I icon2 " tlimana terdapat beberapa uidget kita harus menentukan layout yang
anrlroid : J ayout -w id th= "wrdp-can cen r "
android : I ayour-hei ghl= "wr ap-conren t " tligunakan. Seperti kebanyakan GUI yang memiliki layout management
android : src= " @dr awabl e t I oqo2 " trntuk menampilkan containers, seperti layout Boxlayout di Java/Swing,
/> Android juga memiliki beberapa layout management yaitu sebagai berikut:
</L.ne;t ",a,'r;ut > . Linear
Penggunaannya mirip dengan model box dari Java/Swing, yaitu
rmage.Java menampilkan uidgets ata:u containers dalam posisi baris atau colom,
satu per satu. Konfigurasi Linearlayout mempunyai 5 contents yait:u:
package com.wil is. image;
Orientation, Fill Model, Weight, Grauitg, dan Padding .
import android. app. Activity;.' 1. Orientation
lilulort android.os.Bundle; Orientation mengindikasikan loyout ditampilkan berdasarkan baris
public class image extends Activity { atau kolom, sintaksnya adalah:
,1,* Called when Lhe. act-ivitv i.s f irst ct eated,. '1
, '::-i lr android. orienLaLion= "vaf ue "
pub1ic void onCreate(Bundle savedlnstatlcestate) { Valuenya horizontaf berdasarkan baris atau vertikal berdasarkan
gulrgr . oncreate t'savedlnstancestaee) ;
kolom.
setcontsentview {R. layout. maja},
2. Filt Model
l
)
Fill Model adalah bentuk tampilan elementf ruidgets terhadap spoce
yang tersedia. Terdiri dari tiga pilihan, yaitu
Akan menghasilkan seperti gambar berikut: . Spesific dimension, seperti 125px untuk mengisi uidgets
tampilan di rz5pixel.
r wrap_content, widgets akan mengisi posisi dengan konsep
natural space.
. fill*parent, widgets akan mengisi posisi yang tersedia.

3. Weight
Weight mengatur settingan android.layout_width (untuk baris) dan
android.layout_height (untuk kolom).

4. Grauity
Grauitg Secara defoult pada tampilan dengan Linearlayout adalah
"Left and top aligned". Jika kita menginginkan tampilan yang
berbeda kita bisa mengatur gravity sesuai kebutuhan. Nilai-nilai
Gambar 6.6. Aplikasi Widgets /mage dengan XlvlL gravity adalah feft,center-horizontaf, right for left-
aligned, centered, dan right-aligned.

5. Padding
 Padding memiliki empat nilai standard yaitu paddinsleft,
ii .. . -, 4{ld.r:old: text= "verl j ca1 " />,
paddingnight , paddingTop, dan paddingBottom. Berikut </Rad i.oCroup>
gambar yang menjelas posisi padding dari sebuat widgets. <RadioGiorip aldio-id: id= ti?*idlgravity, ,. '.
. diidroid:ofienLalion-"ver.t:lca.I n . ;t' .. :

. ahdroid: layqut_n idth:i 1f.f l]l:arenf i',. .i. ,,.

' :. r ....androii,el.:r1'4y.outieishE:',r,idhp_:co4LelrL r i,

.aadroi'dlpadding=n5bx.|.|..>..:....
<RarljoRrrttcn
.'., . ... ."andrA,idit idE.re +jd/]efl "
android: text= " teft,, />
. <R&di0Butto!,t..,..' i'
android : id=,, + id /cent er',
@

android i texL*,,6,enL.er,, 1>

widget . <Radi.oButton
android: id= ,,@+ idt r ight,,
android: texL= " right, />
</11acJi.-,Gr ou1,>
<lLine*rlay$ut>
t. .
5
ltnear.Java
package com. wi 1is . Iinear,.
Gambar 6.7, Padding Volues
inaort android. app :,g,ctivity; .

irnport android. os, Bundf e;

inq>or! android. view. cravity,.
Berikut adalah contoh yang menerapkan konsep Linearlayout di atas. irnport android.widget. Linearlayout ;
Buatlah project android dengan ketentuan seperti berikut: in$orL android. widge,L.; RadioGr,6irp,
Project Name : Linear publl.c c],aes linear exterrdE Activity
Buitl Target : Android 2.3 ir lenrente RadioGroup.OnCheckeddhangelistener {
Application name : linear Radiocroup orientation ;
RadioGrqup gravity;
Package name : com.wilis.linear
Activity : linear ? Ovrr r i.le

Min SDK :9 public void oncreate(Bundle icicle) {

super. oncreate ( icicle ) ;
setcontentview(R. layout .mainl ;
main.xml oiientaLion; (Radioorolip),findviewByrd (R, id, orrenta ri on)
<?*ml vari:lon= "1 :0 1, encoding= "p15;9,?> . . ori enrari bn . setonCheckedcharrgeli 6 t ener (.thls ). ;
<Linedrl.ay=out
I
graviry= (RadioGroup ) findViewByld R. id. gravity) ; (

xmlns : androi d= "ht tp : /,/ s cl)emas . andro i d . com / apk / res / a ndro i d "
..r' ..iigravity.set0ncheckedchangelistenerittriEi),
androi d; orientat ion = "ver tica 7 " l.
android: layout-width= " f i7J*parenL "
public vold oncheqkedChangediiRgdioGroup group, irir cheikedld)
androi d : layout-height =' fi f JJarent "
i....ewltcb..(,ih6ckegrd}]i-:'..i.li...:.l:.........l1

' <(adioGroup andioid':'id;:'6ijd/orjdnfation"' .,. i' i'

android: orientat.ion = "horizontaf " -,.,orientat i on setoriellt.ati .. on (rihearLayouc . HOR r z,aNTAL\ ;
android : layout*widtin= " w r ap-cont en t " break;
android : layouc-height= "wrap content "
android : paddi ng= "5pv "1' :.. ::. ... . ...
'., t.r .cag€, R. id. vertiCAJ:
...,...;

<RadicButton - orislration. setorientetion{tinearliryoqt. rc'ar:iar),; ,, . ..: '

id /hor i zon tal *

Ld= "G+
brsak; .
""artia,
android: LexE='hori zontaT " />
<RadioButton
gravity. setcrayity(crt\r-ity. I,EET) ; .
 break,'

case R.id.center:

gravi Ly .se
,'^*---...^
tGrawi ty ( Grav irtya.
CEN?E'R- HoR I z )NTAL \ ;

ca'se R' t"."Grawi

fr'#"&t Lv { Gravi rv . RrG}r?) ;
break;
)
,
L

Gambar 6. 10. Aplikasi LinearLayout3

Ketika pertama kali dijalankan akan menghasilkan seperti gambar
berikut:
Relatiue
Relatiue atau lebih tepatnya Relativelayout adalah layout di mana jika
kita membutuhkan penempatan Widget A dibawah kiri dari Widget B
atau dibawah sebelah kanan, dan penempatan lainnya.

Relativelayout standarnya mempunyai dua lcyout, yaitu:

7. Relatiue to Container
Terdiri dari beberapa posisi, yaitu:
. android:layout_alignParentTop
, android:layout_alignParentBottom
Gambar 6.8. Aptikasi LinearLayoutl
. android:layout_alignParentleft
. android:layout_alignParentHorizontal
'. android:layout_centerHorizontal
Coba Anda click horizontal dan pilih center akan menjadi seperti android:layout_centerVertical
gambar berikut:
. android:layout*centerlnParent
2. Relatiue to Widgetlainnya
Terdiri dari beberapa posisi, yaitu:
, android:layout_above
. android:layout_below
. android:layout_toleftOf
. android:layout_toRightof
Berikut ini akan kita terapkan konsep dari Relativelayout. Buatlah
project android dengan ketentuan seperti berikut:
Gambar 6.9. Aptikasi Linearlayout2 Project Name Relative
Buitl Target Android 2.3
Application name relative
Tampilan apabila c/ick vertikal dan right Package name com.wilis.relative
Activity relative
Min SDK 9
main.xml Apabila dijalankan akan menghasilkan gambar seperti berikut:
<?,wl version= "l .0 " encoding="utf -8',?>
<Fel al. ruL.LoyuuL
xmlns : android= t'h i.tp, 1 / i chenes',. andr g jd Ci on l apk / r e s ) andra i d,,
andro id lalaoul3yidtl:.r . t i l J _l,dien t,,' r.':. "
:
android : laVr:uL,heifn't* t, yrt 6p-:coh i en t:t
andro i d : padding= " Spx' >

<Textview anaroid: tA; i,@*id/7a1;e1.,, ,.' ".'' .,;,,,,

android : layoi*t:width. ,'.Wiap;.cO8tini i .

androi layout_height= ,[^/rap_content

ri : ,,

android: text= ".li/ama.. "

androi d : paddingTop= " 1 Spx " / >

<lldii ',ex t. Gambar 6.1 1 . Aplikasi RelativeLayout

android : id= " @+ id/ ent ry "
andrcid: layout*Wi.dth= "fj_1_1,,.parenL,1 . ..
android: layout-hsighLi rlrdrall-content,, .

" aodro j.d.;1ay6ut*toRi gbl.gt"t i ?id/labet , Tabula

android I layqrxL-_a1 i gnBesel ine=,,6j d/] ab e 1 . / > Tabula atau yang lebih kita kenal dengan layout table
.

di HTML,
<Br.it1-an i :,.. . . penerapannya seperti aplikasi di bawah ini. Buatlah project android
. androiE':i.d*r'@+idlek,,:.. ....'. dengan ketentuan seperti berikut:
. analio i illi. 1ayout-lwidth-.t nrrap-co.R t6n t "
.. aadrord., layou!-hei ghr*,,lwra11*conLent " Project Name Tabula
. . android.; l.gyqu!:be1ow= Gid/ enert, tl Buitl Target Android 2.3
naro.i{: 1a}rout-alignRight*,.,Eid / entry " Application name tabula
android: texL='OK" />
Package name com.wilis.tabula
<Bilt ron Activity tabula
.android: id* "6+id./cance-1 '
android : layout*widlh=, wrap*content " Min SDK 9
android : 1 ayou t-lre i UhL =,' hrra?r-co n t e n t tt
android, layout tot e fLOt=.@iA/ok"
andrd j 11: layout*alig$Top=.,,djdlok ' main.xml
, . android:text='canie.l, l> <?xnl version= "-1. 0,, encoding="utf-g,,?>
i <TableLayout.
</Relal-iwellayouL> '
xmlns : andro id=,,-h L tp :,/ 1 s c h ema s . andr o i d. c om/ A:pk,/ r eb I andr a i d ll
android r layout. wldth= "fi-Z j parer:t,
relative java andioid I layout*heiqhE.= ,,f1If_p6y6r,g
android I stretchcolumnsi,,l,>
,,

packag€ com.wilis . rel-ative <TableDow>

;
<TextVi c)J
i.qrort 6r-rdroid.app.Activi.lL, - .. . .ii .. android: text= "Nama i ,, />
imnorli android.os,Br:ind1e;, .' . rt, ... <Edi r?e:{L andioid : id* !, @ + id / enxry,,
.. android; liyout_sf:an ,, j />
gublic clagE relativd,gxt€ads,Activity r ' i
< / l'crl-l eRo'a'>
= ',

{,i <.,iierr
/tr* Called when Ehe activi.ty is first created. tl
?(tvt'. r -ae androi d: laycut_he ight= " 2px,,
..trlublic void onCreate(Bundle savedlnstancestate) ' anclroid:baqkground"=,, #0A.00,Fy,, / >
{
'super. oocreat€ t sawed1ns.tancestaie ) ; < I'ah I ePt;>
setcontentvie*(R.:'layoul , majn) ir -
<Eu.!Co:t.androidrid=,'Qtid/ca:nceJi . .'l . .,, ,, ,i,:
) android : layouL_column=',2,,
i android: ter.t=,iCancel , />
<3**. tDn android: id=',G+id/ok,,
android: texl= ,,0ff. />
 <1..:rableRqwi
<l$ablel,e:rb11tz <TabJ cL,ryoui:
i t,.....
android : layou!_widqh*,,fj-11__parent,:
aridroi d ;. 1 a.yout*he i gh t E,i f i -l J3aren E,',
tabulajava <1'ab.l. eRc r,r>
<Vi ew
..android: lalrout height. t 80pxu'
inport android. Activity; app. android: l:ac!ground=..f,# 0AA00A ! />
iraooqg,r:lg- ,oid.,os.; B.und:tr ?'i '. ,,,:,,,,''. ' . rrl.. .i:ilrr,.'i rr::- <TaxLVie, android:text=',Aaris ke 1,,
i' . ,andqqid;piiddiog]Jefti "Apk". . - '

i*l ti,
/',
itatq, talura, itigc6, a*tl!iry,,', i,,,t.,,,,,.,,1,,,,1,,,,' andioid.:.1".a).qUt*gravi,ty3 .,cqn teu:v.ert jcal,r
Called when t.he acLivity is first created.
i.c
t-)t/et: r l cle < /'lalrl *Row>
publtc woid onCreaEe (Bundle aavedlnstancestate)
oncreate ( savedlnE tancestate ),'
Eu.D€r. <Tabl oFnv;>
'.,'...., setContentVi ew ( R: layouL . ma jn ),; . <'/icd
] android r:layout ,.heiEht = " 81rsx"
android:backgrorind!,1 #A4.:A000,t l> .. .,

android : paddin€tl,8f t q,, 4,px,,

Akan menghasilkan seperti gambar berikut: . android: layout,graviuy= "s,.rra*;- verticaJ."
</ lab.LePcr>

<l'a b LeRorr>
<'.'iew
andro id : layouE_he iqhL=,' B \px',
. android:backgfound= "#8944A0" ./; . :.
. ..<T€xLVi.ew android.:tex!*,,Earis ke*3,
. android:paddingleit=,4px,,
android: layout_gravit)aE ,,certer_verf, j ca j ,,

Gambar 6.12. Aplikasi TableLoyout

</ tub)e R.:w>

<Ta bl..eRow>
Scrollwork <'-lte,
android : layout*hei. ght -,1 I opx,
Scrollwork adalah membuat layout yang bisa dilakukan scroll baik .
android: backgr:ound*,,#aa?g44:, / >
scrol/ naik maupun scroll turun. Buatlah project android dengan <TextVier,v android:text*.,rBarl,s ke*4". .,..
ketentuan seperti berikut: android i paddinglef t= r,dpx,,
' android.; layoutgrarrity= ,,cexte3:lvert jcal ,,
Project Name Scroll
Buitl Target Android 2.3 <,/'i u.Lleliux>
<fal, Ir"Porr>
Application name scroll <r./iet
Package name com.wilis.scroll ,. android : layout_heighl= .,g,px ,,

Activity scroll :, ..., .

..android:bae,kgroun{.r,,#'ffeABB', />
Min SDK . ..r.i: ,. , .<TdxtYiew and.roid.:'i'exti {6Arisii. k6,St t .. ... . ,...r',,... ..,i '

9
andro.id : layout.-.gravi ty=,,6'6fl ,5'sr::1/errCieef':,
/>
main.xml < /Tab] ePow>
<?><rn] versiono ".1. 0' encoding- "utf-B "?> < fablePow>
<ScrollVi ew
<'J I O'd
xml ns : andro i d= "h c tp : / / s chema s . andro i d, c om / ap k / re s / andr o id"
androi.d : layout_heiqht=,, Opx,,
android : layout-width= " f i f fJ>arent' B
androidrbdikgroundi "#f ff f aa, . /i, :..
android : layout-hei ghL= " wrap-con t ent ,.i,..
">
<Textvi"ew androidr texti,_Aaiis'ke:d,
 android : paddingl,ef t- " 4Px " Akan menghasilkan tampilan seperti berikut:
android : layouL*gravi ty= "center- ve r t i c al "

</'r )hi(: '..>

<Tnl-i, i,.i>
< \/ ; e,.;
androicl: laYout-hejght= "8OPx "
android:Lrackground* " # f f f t f f " / >
, <Textlli.ew android:text:"Baris ke-7"
android : Paddingr,ef t= " 41rx "
androi d: layout -gravi ty= "cen L er-vert icaf
/>
</TableRcv.t>
<t&blei{aro/>
<\/ 1 eu
android : laYout-height * " I APx "
android:background- " Sf f f f aa " / >
<Texl1.rie.,,/ android: texL= "^Baris ke*8"
arrdroid : paddinglef t=' dpx'
android : layout-qravity= " c'.r a.t*ueri i cal
Gambar 6.13. Aplikasi Scroll
< 1!al)leR$u>
<rrab l eRoil>
<View i
android: 1ayout-height= "8'rpx "
android:background=' # ff f f t f " I >
ListView
<Texl,Vier,r android r text= "Earis ke-9 " 'l'entunya Anda sudah sering mendengar apa yang dimaksud dengan
android : Paddinglef t= " 4Px "
anclroi d : layout-gravi ty= " s6:n 6a r rzerL j ca J ListView, ListView di android juga memiliki fungsi yang sama dengan
I-istView di bahasa pemrograman yang lain. Berikut ini adalah contoh
</:'ur',lPr'u>
<'fdl)l { -trr?> penerapan ListView pada android. Buatlah project android dengan
<Vierr ketentuan seperti berikut :
android : layouL-heighrt= " I OPx " Project Name : LisMew
android:background= " # f f f taa" / >.
<ileli1:1.lic"!d android : text'= "Bd-r is ke* I 0 " Buitl Target : Android 2.3
android : Paddingl,ef t= "dPx " Application name : lisMew
android : 1ayouL-qravi ty='c'., a*t rrert j ca]
/>
Package name : com.wilis.lisMew
<,/T.l:l eko',,> Activity : listview
</"1 ublr'l ',11i'o lr >
< / Sc rci l \, 4.'d>
Min SDK :9

scrolljava lisMewjava
package cornrwiLis. llstview;
package com.wilis. scro11 ;

import android. os. Bundle ;

imxrort apdroid. app.Activity; import android. app. L.istAcbiviLy ;
i.fiE)art android. os . Bundle i
. .
intr,ort android.view. View;,
irqport android. widget . ArrayAdapter,.
Enrbltc c1a3s scroll €rrtsrrds Activity { imports android. widget. ListView;
/trt Called when lhe activitrr is first created. *l ittrlrort android. widset, Textvielr;
GOv,,rr laP
p[blic Trsld onCreiite(Bqndle. savedlnstancegtate) { public qlaEE listview. extends ListActiviEy {
srrpar. onCreate ( savedTnstancegtale );
Textview selecLion,.
FetconlentvieW (R. layouL. main),
1
tstrlnq,[ ] . items.: {'aceh era Utera.1 .. 'Sr.matera Befat " , .'Riau' ,
1,r t,,, I'sumaf
"iambir':';. isirqratera Selattn1 rnengkq.lu" i 't4rnpung'' , , ".Barigka. B-elitung" ;
,
.".Kepulauanr&iiauli,:',lakartii",.'lJawa Balar",,,li,.Oa1{? Teogah",:"Yog'yakarta"
il'f4wa Timur",']tBq11X611" rr,.. |l.Ba1i': , ' 'Nusa,,,,asp$iiara; Baret' ,
;Nusa Tenggar; timuf,':;'&alimanlan Bar+t'il.r'ixiilim4ntan Tengah",
"Kalimantan Se"Iatan', "Kalimantan'Iimur", "Sulawesi Utara",
l'r'sul,awesi Tengah,l,,"gulqqesi,l,sefatanr;''lSu1:awesi.,'rTenggara!1 .,lGorontalo",
"sulawesi Barat", "Maluku", "Maluku UEara", "Papua Barat', "Papua" );

public rro{a dcreiie.(erroate iqiclql 1 r;rr I ' i i'

, .,rt.. siilrar,,,l6nCiieaie.iiciCle ).;. ' . .t.: . .i'1,..,i i,.,,,..,...r l

seEconEentview (R. layout . ma in) ;

' - settti'r'tAdrpter (naw ArrayAdapter<String> (thig,
,,, aoaroid..,.R.,r,:.eyout.6imple*list ite&,..1,iteng,)ri,

': :', seLeCtiont(rexiviewlfindviewBnrdlRrid.a'eTection);

)., ..'. .,. . i... .liil.ir 'l',': , .i..

rltltc
ial
vti.Ld onlistltemcl.ick { ListView parent, .View. v. int. posiL-ion, J.ong Gambar 6.14. Aplikasi ListView
t
....,,
selection. setText ( it-erns [po.eition] ] ;
1
Spinner /Combolist
main.xml Widget ini hampir mirip dengan ListView, hanya perbedaannya ListView-
nya berasalah dari satu combo atau yang dikenal dengan spinner, kalau
<?xrnl veision.:'.1 .0.1'. enqoding- :.\ttf -.8t'.?> ,

<L j nearlayor.lt Anda yang terbiasa di programan visual basic mengenal namanya combolist,
.,, .:'' .
lrerikut kita lihat penerapan spinner. Buatlah project android dengan
.

. 1,,."i' 1.,,,. . . , .. ....:..

.t I ,

, . : ketentuan seperti berikut :

.androidi Erieneatiori'+ "vertjca] " ,....: , r..

,.. android:1eyoq! .widlh= "fif .l:rarert " .

Project Name Spinner
.android I layout*hei ght.= " fi I l.-"parer I " > Buitl Target Android 2.3
..:'. Application name spinner
<1'ext.View
anoroid: td= " @+ id/ se Lec t i on " Package name com.wilis.spinner
android: layout-widt h= " f iT lJsarent " Activity spinner
androi d : l-ayout*heig]nE= " wrap-content " />
Min SDK 9
<List'./ie',v
android : id= @andro id : i d/ 1 i st'
-..1r '.,
...,..,.'i
"
'aadr'oid:layout--width= " f i1l,3arent" ' ,
main.xml
android : layout-height= " fj 7 f J)arent- "
...:..:.:.android,:drawse1ecLor0$Top=lf615",,..... <?/.nl version= "-l . 0 " encoding = " uLf -8 "?>
< cqdrL.lvoiit
/> '' .ri...,
"
</Linearlayour>
xmlns : androi d= " h tLp : / / schemas . a ndro i d . com/ apk / re s I andro i d "
android: orienLaE ion = " vertical "
Apabila dijalankan akan menghasilkan seperti gambar berikut: android : Iayout-widL h= " f i.1 I Jarent "
android : IayouL-heigh:.= " f i f fJta renL "
<'fe}n-tView
'.,i,,.' ..randroid:id='lE+id.:rseJ.eeticin'. .

android : layout-width= " f i l l Jarent "

android: Iayout-he ighl= "wrap-content "

<Spirnei android: id= " @+id/ spinner "

 *l

android: layout-widLin= " f il7-S;ayent " Hasil tampilan pertama kali dijalankan adalah sebagai berikut:
android : layour _heighl- = " wrap_(ont en c "
android : drawselectoronTop= " t-rue "
l>
<./1,i,nea:Layou L-.>

sprnner.Java

Gambar 6.15. Aplikasi Spinnerl

Setelah dilakukan pemilihan misalnya Jawa Barat akan menghasilkan

gambar seperti berikut:

Gambar 6.16. Aplikasi Spinner2

InputType
Inputtype adalah untuk mengontrol inputan terhadap uidgets sehingga
inputan sesuai dengan struktur yang diharapkan. Pada android terdiri dari
beberapa closses inputan yaitu:
o Text (deloult inputan)
. Number
. Phone
r Datetirne
c Date
. Time
 <licli tTexr
Berikut akan kita terapkan inputType dalam contoh aplikasi android di
bawah ini. Buatlah project android dengan ketentuan seperti berikut: 1ndroid:.inF'.,*.i*.iiiiiiiiifi+t'!+,n*/u**'txuLoCr:rrecL,j:
Project Name InputType android:gravity= l'toPr':' , '

Buitl Target Android 2.3 .'. ,.. .1>

Application name inputtype < lTabl eRoid>
' /1,rb rl.ayour.>
Package name com.wilis.inputtlpe
Activity inputlype l'ada coding xml di atas dapat kita lihat beberapa inputType sebagai berikut:
Min SDK 9 r. Email; tidak memiliki fnpuf tgpe.arltinya isiannya bebas.
2. Nama: inputType " Lext f textEmail-Address,, berarti memiliki
inputan yang berupa text.
:J. Umur: inputType "number f numberSigned lnumberDecimal,,
berarti inputannya hanya berupa angka.
4. Tanggal Lahir: inputType "date" berarti harus berupa format tanggal
seperti 04-o6-1982.
S. Alamat: inputType " texl I textMuTtiLine f textAutoCorrect,,
berarti inputannya berupa text dengan mengizinkan lebih dari satu
barus.

inpuffilejava
package com. wiIis. inputtype;
inDort android. app. Act.ivity;
import android. os. Bundle;
Dublic',class inputt)rpe, extends Adtivity.,{ . ' ....:.
l** Called.when the aceivity is.first created. *l
,;nvert:i.de
public void oncreate(Bundle saved.Instancestate) {
Euper. oncreate ( savedlnstancestaEe) ;
.- .setiontentView(R,,iiryott.rlajE) ,i'.i.i'' '..'.. :t : . I

)
)

Running aplikasi tersebut dan perhatikan konsistensi inputannya apakah

sesuai dengan formula yang kita rancang, salah satu bentuk inputan pada
aplikasi di atas adalah seperti berikut:
 Gambar 6.17. Aplikasi inputType

Ubah main.xml diatas untuk dapat melakukan ScrollView sehingga prosedur

penginputan lebih bagus.

TypeFace
TypeFace yang dalam android ditulis dengan typeFace adalah untuk
mendefenisikan jenis huruf yang Anda mau tampilkan, tentunya jenis huruf
di android tidak sebanyak jenis huruf seperti di operating sistem seperti
windows/linux. Berikut typeFace yang tersedia di android
1. !,peFace="sans"
2. typeFace="serif'
3. tytrleFace="monospace"
4. typeFace custom (untuk font yang kita include sourcelfi/e tff-nya)

program di bawah ini adalah contoh penerapan jenis typeFace di atas.

Buatlah pro.Tecf android dengan ketentuan seperti berikut:
Project Name typeFace
Buitl Target Android 2.3
Application name typeface
Package name com.wilis.typeface
I
Activity typeface
Min SDK 9
 < / Tahl ep,or.r>
r &li* com.@ilir.typef,.e
<l !f el-rl el,ayout> r' l!-] tyFet.(.rav.
L i;3 q.^ f il.i..iri'l :,r,':r | ,1.r1
!. rs& Android 2J

typefacejava r i:r fdnis

,...., .r-'-[!fe l"!rr,
paclrage coil:'wi1is. typeqq:et '
,..,,,, . . ;
i'
i.
L:r. drB*able-hdpi
ali, dr.Babte ldpi
i t..! d.aKabte-ndpi
irqrrtandrqid.app.ActiVity';],]...... , f:a.tarout
iry>ort android. graphics . Tt4>ef ace; i*i narin.xnal
i, !a'- values
ircofu:airdroid-os.Bundle;:-' ,'.',- .., ... .'.,, ...' ,"'.

irnport andtoid,lridge!,Telitviewi,' '.

. ..:1.' ..1. Gambar 6.18, Project viewtypeFace
i'ii: i 'r'
llnbliE cladi.' tlryefaqd .riaxt6nil6 Activity { .:. .; ' . .

/** Cal-led when the accivity is first cre.-rteci. ",u

(,rve rr i de
,? I(emudian coding java yang untuk memanggil dan menjadikan font mistral
puuric.void.onCreate{Bund1e'gavedInstanceSt'ate){.. adalah sebagai berikut :
'lqrrggi.onCfeat€{satedInstancegtate)'i
setcontentview (R. layouE . ma i n') ;
'l'exLView t.v= (Textview) f indViewByld(R. id. custom) ;
rex[Vier"i tv; (tdrtview) f indViewByld{R. id. custor.n} ; '
' ,
'l'Ypeface face=Typeface. createFromAsset (getAssets ( ),
Tl4peface " r onrs/mj stral. ttf " ) ;
f,ace=Ty.pefa.ce, clea.fetrro.i,na:sset (getAsssts () , " f onts/rnistral " ttiii ;i.' ,

t v - setT)4)eface ( face) ;
' : .. tv.set?lpeface{face); .

)
tentu coding tersebut membutuhkanlibraries yang diwakili dengan perintah

Penjelasan costum huruf, didefenisikan tulisan yang akan kita berikan import android . graphics . Typeface ;
fontFace custom adalah berikut ini:
'l'ampilan program typeFace tersebut adalah sebagai berikut:
<Textview
.,, android-: iext.,:,,,Custom -,,
. ... iindroid r layout-marg'inRight* tr $pv1;
,ai1droid: textss,lze! "?0sp,' , i
. : /,f r-'.,. !
' <fextviein . , .,,1 ..' ., ..' . .,
.i

r,.'ahdro.id: id--"8+iA/custofi]". :.'

.,;:..,
.
:

. . dnd.roidltext= ""il/" S'afaaf,. H. "

. .'

android; tsexls.ize: 11 098'' ' . ,

1

t
jl
it Gambar 6.19. Aplikasi typeFace.
Di mana isi dari variabel custom akan dijadikan huruf mistral, pastikan il
ii
huruf mistral sudah ada di folder assetffonts seperti view project di bawah tl
ini. l Messages Box
il
il
il Messages boxyang di kenal di android terbagi dua jenis yaitu:
il . Ioosts
it Adalah messagefpesan yang muncul dalam waktu sebentar dan
kemudian hilang tanpa mempunyai user interoction dengan pengguna,
biasa ini merupakan fokus dari actiuitA yang acfive.
o Alert Button alerL;
Sutton t.oast t
Adalah Dialog box atau messoge yang mempunyai user interaction
dengan user, biasa terdiri dari 3 bagian yaitu ,ii" Ca:L:1.e:d. when lhe act.ivity is f irst c::e.rteC. */
,/ setMessageO berisi tnlisan pesanf messaEe GOverride
p"fiio-r"ia oncreate(Bundle icicle) {
'/ setTitle0 / setlcon0, konfigurasi titlelicon dari dialog box sup€r. oncreate (icicle) I
./ setPositiveButton0,setNeutralButton0,setNegativeButton0, berisi setconLentview(R. fayout .main) ;

posisi serta metode click-nya. alert= ( Button) f indViewByld (R. id, a-1ert) ;
alert . seLOnClicklisrener this ) ; 1

Berikut adalah penerapannya, buatlah project android dengan ketentuan t.oast= (Button) findViewByld(R. id. Loast) i
toast . setOnCl ickI,ist.ener ( this ) ;
seperti berikut: )
Project Name Messagebox
public void onClick(View vjew) {
Buitl Target Android 2.3 if (view==alert) {
Application name messagebox :rew Al erLDialog. eui der (this)
1

Package name com.wilis.messagebox . setTitfe{ "Message r iL1o" )

.seLMessage( lrij,:dalah bag:an seLMeslage")
Activity messagebox .setNeutralBuLton ( 'L.Losd", new
Min SDK 9 l)ialoglnterface.OnClickl,istener ( ) {

public void onClick(Dialoglnterface d1g, tnt sumthin) {

main.xml )
])
<?am} version= "L. 0 " encodi.ng="utf*8"?> .show();
<r i---rrLJ/r.r I )
:unlns : android= " http : / / schemas . arc{r'oi d. coml apkt'res / andra id. " e16e t
android : orientat ion* ""r.,erti caL " Toas t
android : layouE-wrdth= "fjl I 1ta renr " .make?exE (this, "Hai . .Mcssaoe t odsL" ,
,I'oas T I,EAiG? H_S
android: Iayout-he*ghL= "f .i I I pat e,'.rt ' > . HOR,I: )
<Sut ll(}n .show(),.
androi d: id.= " G+ td. afez t " i
android : texL= " Mes sageBax / Ale L t " j
android : layouL-wi dth= " fi -tl--:rarent "
andro id: layou L-heighl= " wrap-can t enL " / >
<lruLl-n
android r id- " r?+id,t toast "
. android: Lext= "Mes,sa<ye ?oils ls " Perhatikan, bahwa untuk menampilkan message box kita memerlukan
android: layout-r'7idlh= " f iJlJsarent " libraries berikut
android: 1ayout-heigrltL= "wtap-content " i >
<,/l i nea r : dy rrt >
inport android. app. Alert.Diaf og ;
imprort android. content . Diaf oglnt.erf ace ;
messageboxjava import android,widget.Toast,.
Dackage com.wilis . messagebox;
Aplikasi dijalankan akan menghasilkan seperti gambar berikut:
inport android. app.Activity;
irport android. app.AlertDial-og ;
irport android. content . Diafoglnterface;
inupit android. widget. But.Eon;
in\port android.widget. Toast ;
inport android. os. Bundf e ;
ir4llort android. view. View;
public clage messagebox e:ttends Aclivity implenents
view. OnClicklristener {
 : Vie6:- j
[, G*turce€dar ',i
a5) sud,.€li*- qi
go,* il
S vi$sruh li
@ welvi* il
($ aMlagClort
@ Adoaorpldel
@ auto. ii
O.hertBox ll
i
{) [he.LedTslk
O (h'onomder
S aurulirler ,t
@ oiqitarcrct

Gambar 6.21. Desain program stuff.

Gambar 6.20. Aplikasi messoge box

iadikan coding xml adalah seperti berikut:

Keterangan gambar main.xml

Gambar sebelah kanan adalah apabila di-click button yang bertuliskan ?:.ml versi<ln.,f , 0,, encodinqr=. utf, -B . ?>
.i

Messagebox/alert sementara gambar sebelah kanan apabila di-click i.nearl;&ycut

.: l,
xrnlns : android:,,ht tp j / / s chema s . and r o i d, c om / apk,1 r e s,/ andr a id,,
button Message Toast. android. : orienl.iation = wer t i c a f tt t,

android : J,ayout*vridth*.,fi I _lJrarenf ,'

android : layout_heighE:,frf Ljarent "
>.'.

Program Stuff <IJLIi n

andro id : id: il
@i ! d7 Atigay t.
Pada program ini kita akan rancang sebuah program android yang sudah android : layout*wi.dLh;,,wrap:content,'
mengombinasikan uidget yang biasa digunakan. Buatlah project android andro id:'layout_he iEht =', wr ap*i ant en t,
android : padding=' 1 96, "
dengan ketentuan seperti berikut : android: background=,, Gdrawabfe/ androicl but ton,, />
Project Name FormStuff
<t{ditText
Buitl Target Android 2.3 andr:oid I id*,,6*J d/edr t texL I,
Application name formstuff android : layout_-width= "fj f J_,paren r "
Package name com.wilis.formstuff andro.id:1ayout.height:"i,frap_content,l>
Activity formstuff <ChockBcrx ahdrOid; id= ,,Q+id.lehdikbaxa ,
'..'
Min SDK 9 andqoiil: tayou!:width!,swiap_cbat,en.c,,
. and-roid..1ayout*he!1ghLq,,wrap::qpnten:,, . .. .

android:,!ext= "cftec&.ijt,out 1. /i.

Desain layout seperti gambar berikut:
<r{ 'rd I oGrolrp
dndlBid : 1:iyout;wi.dth*,, ff .].l;:rdrent..,rr..
android ; leybut hdiqrlL=,t wrap:,qantant n

.. android: orientetionp ',ver\ical 4> ,... ,,

<Radi 6Brit ton android.: i d:,, 6+id;rra d i o-r ed " .

. androi
d I a)rou t_wi dth=,,wraa ion t en t.
.1" f
,

.,,,.qnQrq11{: layoulheight* r,wrdl:_corjtent" ., . . ..

''.andfqtd:taxt*/l?eda /> ' .

<RAdioBurton android : id=,, + i d / rad i o_b j u e,, @

android:,1a]aout_width* ,'wrap*cantent u ,.
. . android r layouL_height= "wraLcerterr, "
 andrOid: text= "8-lue " /> ToasE.makefext(formstuff .this,''Beep Bop,,
'l'oasL. T,ENGTH-SHORT) . show( ) ;
</1 , ,,,.r l, iil> ]

<Tiqi, leB!-i t,l}rl aridroid : i d=,, + i d / t ogg lebu t t on,,

@
final EditText edittext = (EdiLText)
android : layout**ldthi "wrap*cor t en t' I j ndViewByTd (R. id. edj ttexl) ;
android: layout-height= "x{rrap-conre;n r " edj ttext. setonKeyl-tsLener (new Or.Keylistener ( ) {
android: Lextoni ivibrate an" public boolean onKey(View v, int keyCode, KeyEvent event)
anrlroid: textOf f = "Vibrate af f " / > t
/1 If the er?{};1t i$ a l.:*y-Cow:: r:ven! E:n, lhe "$nle:,''
.:t i. i an
<P..:1,i.rqBar android: Ld= " A+id/raLingbar " if ((evenl.getActionO == KeyEvenl .AC?IOI/ DOW) &&
android : layout-width= "idrap-corl Lei] r " (keyCode == KeyEvent . KEYCODE_ENTER) ) {
t' ' L'+r'i: rLfl :i- .;... ' . u ;'t...:.
android : layout-heighf = "wrap-conf en
antlroid: nu:tstars= "5 r' Toast.makefext (formsLuff , this. edittexE. get.Text ( ),
an<1roid: stePSize= " 1-' C " I > 'roasL. LEI,IGffJ* SHORTI . show ( ) ;
return true;
<,/ l.ixe*rl,.ryc il ii > )
return f,aLse;
I
formstuffjava ]);
package com,wilis, formstuf f ; final CheckBox checkbox - (CheckBox)
I indViewByld (R. id. checkbox) ;
import android. app.Acti vi Ly; checkbox.setOnClickListener(new OnClickl,istener( ) {
irntrrort android. os. Bundle; pubLic void onClickrview v) {
imports android. v-iew. KeyEvent,' r'./ Fe:ii:::$ aclr:an r,::r tl. j.cl:s, rirrpending or: ,o.,irei:h+r ia's
import androi d. v-Lew. Vi ew; , ,h ,,
irnpor! android. vj-ew. View. OnCli ckl,i stener ; if (( (CheckB?rl \rl .ischeckedO) {
.
import android.vi ew.View. OnKeyListener; Toas.t " makeText ( formstuf f . thls , " Sel ec tecl " ,
irnport android.widget . BuLton; I odst.IE ICTH .SHORT l.shovr( );
inlport android , widget , CheckBox; i else {
import android. widget . Edi EText ; Toast. makeText({-ormsLuff.this, \oL reiecced',,
imlrort android. widqet. RadioBqtton; loasL. I.EllC'il1 SiiORT) . show( ) ;
imlrort android. wi.dget . RatringiBar; )
import androj.d.widget . Toast ; )
ifiport android.widget. ToggfeButEon ; J);
import android. widget . RatingBar' onRatingBarchangeli s Lener ;

public class formsLuff extends Activity { final ToggleBuLton togglebutton = (ToggleButLon)

l** Calleclwhen'-.e;(Li'i'y i. Li-Lst, creet€d. */ I inciViewBTId{R. id. tocrglebuttonl ;
t.- togglebui!on. seLOnClickl,is'tener{new OnCtickI,istener ( ) {
publ"ic voidl onCreaLe(Bundle savedlnstancestate) { public void onClick(View v) {
6uper. oncreate ( savedlnstancestate) ; r,/ iret:f {lirn .itation (jo c}ii{:li$
setcontentvj.ew R, layout, ma jr:) ;
(

"';:33::*il?l;iiEliil:flll"l.",,,checke.l,,.
final" RadioRut.lon radlo_red = (RadioButton) lodst. LEAIG'IH_SHORT) . show( ) ;
f indviewByld (R. id. radjo*red) ; 'i else {
final RadiotsuLton radio_btue = (RadioButton) toast .makeText(formstuff.this, "Nor clteckeo',
f indviewByld (R. id. radio-bfue) ; '. ,asL. LLWGfH-SriORT) . show ( ) ;
radio*red. setOnClickListener ( radio-1istener ) ; I
radio--bf ue . setoncl- ickl,is Lener ( radio-1i s tener) ; ]
1),
f,inal Button button . (Button) fi"ndViewByld(R.id.button)
button. seLOnClicklistener (new oncl-ickl,istener ( ) { final RatingBar rating5sl = (RatinqBar)
public woid onCfick(View v) { i ndviewByld (R. id. rac ingba t ) ;
P' r I ( ..-r. :'-Cl ;1.:, 'i " ': i ,.
 . ra!ingbar.setonRatingBarchangelistener(aeit
onRatingBarchangelisienef { ) f'r'.
x}ublic vald onRatingchanged (RaEingBar ralingBar,
rating, bo61eail frotiUser) {
. ,,' Toast-maJce"e*i(formstirff.this, "New Rating:
raLing. Toast ,.f,glrG"ri-.9fl08f) . sliow { ) ;
)

. rJ :'
.. privite 0rlclicktislener. radio*listener = nemr OnClickl,istener ( ) {
Dublie vold onClick(View'v) (
ll Ferform actrio& lrn. e1ick.,
' Rddiogutton rb' i .(RadioBuuEon)
rb.getText ( ) ,

rqast . r.ElVGTI{-,gAOeIl):. show ( ) ; BAGIAN 7

)
I . i,, i.
] i ': ..,i -'

lvlORE VIEW
Jalankan aplikasi, dan setiap Anda melaukan ocrion terhadap uidget akan
dimunculkan pesan dalam bentuk widget.toast yang berisi achon adalah
seperti contoh gambar berikut pesan toost ketika checlisk click.

Pada bagian more uieu ini kita akan menjelaskan tentang layout user
interfoce yang belum dijelaskan pada bagian user interfoce dan bagian
Gambar 6.22. Program stuff.
widget. Layout tersebut adalah sebagai berikut:
. TimePicker view
. DatePicker yiew
. Spinner view
. Galleryview
. ImageSwitcher view
a GridViewview import android. app.Activity;
import android. os. Bundle ;
a Context Menu
c Options Menu public class timepicker extends Activiry
a AnalogClock ir,lvqrl:: ds:
a DigitalClock protected void onCreate (Bundl e savedlnsLanceStaEe)
t
super. oncreate ( savedlnstancestaLe ) ;
seLContenlview (R. layout - da L et i nep i cker) ;
]
TimePicker View
Picker Vieu adalah tampilan layout tanggal dan waktu. Fungsi Picker Vieu I(emudian ubahlah .{ndroidManifest.xml seperti berikut:
dibagi menjadi dua bagian yaitu TimePicker dan DatePicker view.
TimePicker ini memperbolehkan user urrtuk seleksi waktu dalam sehari AndroidManifest.xml
yaitu z4 jam (pm/am), berikut adalah penerapan TirnePicker.
,'',.rbion-"1-r"' cncocling="u'.t.-8"?>
.r:if:...rii xrn.l.ns:androieT=,,http://schemas-andraid.con,apk,:.c_.;.andrcid,,
Buatlah pro-7ecf baru dengan ketentuan berikut: pa,'ko.,1..= "cun.-r-i7 i.s. r io"epickor ;,
Proiect name TimePicker an lroid: rersior'foc1o- " j '
arJroi.r: vcr si.onNare=,' L .,' >
Target Android 2.3 < I d..droid:icon="fi,/,dk,,tjl(,i,un',
Application name timepicker .l...io: labcl=",.r_. r i:,q apL, Ljrrnp,.>
Package com.wilis.timepicker <) rr.Jrrio: Cam^: ., . r it.,,l-,i 1ke , .

anciroi<1 : lahe1 =,,6sfi-inq .)l )f:_ilam.', >

Activity timepicker <' | ,1 ,>

<;i:iii:r android:name=,,andr-oid. inIenf .ai't..i.cI .tL ttn" />

<i-.nf r:irjj:, anClrOid:name= ,,andro-i(r. 'rnteni. Cdteq, .t y. t )-ttNCI{iiR,, />
Kemudian buatlahfle datetimepicker.xml dalam folder resf layout, dan isi </ ...: r .r..'t)
coding seperti berikut :

datepicker.xrnl
*ro1 ya.p.;iurr- /.ti' CilCodinq-";;1 ' P'?>
LinearLayouL litrat fi.le java dengan nama viewsActivityjava yang akan meng-lrundre
xmlns : android= ".hilp: / /schemas. anrj::oid. com .?pkl:('s .trrlJrni.l " tr<:tiuity-nya.
aL.<l-o:cl;c,r . en: at lon= "','r - ie-: J

android: layout-uiclth= "f iII,pare.nt "

andr:o i d : l ayoui:-he i ght = " f : -1 -I,-j:aren I "
ViewsActivityjava
package com.wil i s. timep i cker;
T imePicker
atrclrorrr :1 lyouL-i+i (lt\= "l'Jt c), (.',ilrlcrl " import androi d . app. activi l-y;
andro j-d: layo'rt*height= "r1T ap--conf er]t " I) import android. conLcnt. I nLenL ;
i mport android. os. BundJ e,.
{ r'LinearLayout-"
1>ub1ic cLass ViewsActivity extends AcLivity
Kemudian perbaikille timepickerjava menjadi seperti berikut: ' ( : 7l^-;. 1|1,r ,-f
ri i v i. ':.,..:' -. 1 ..): - t-
GOverride
public void onCreate (Bundle savedfnstancestate)
timepickerjava t
packagre com.wilis. t-imepicker; super. oncreate ( saved tns LancestaLe );
seLconcentview (R. fayout . majn) ;
 seartAcliviLy(neto lnt.enL (thiE, timepicker.clas6) ) ;
switch (id) {
l caae TIME-DIALOG*ID:
,
r€turn aew Timepicker Dialog (
' thi6, mTimesetListener, hour, minute,
Jalankanprojecf sehingga akan menghasilkan seperti gambar berikut: fal"ee) i
]
return null";

private Timepi-ckerDial0gr, onTimesetl i s tener mTimes et.Li s t en€r

new TimepickerDialog,OnTimesetlisLener ()
t
pubLic woid onTimeset (Timepicker view, int hourofDay, int
rninu teOfHour )

hour = hourOfDay;
minute = minut.eOfHour;
Toast . makeTexC ( getBasecontext ( ),
"You have selecred : ,' + hour + + minute,
Toast. . LENG"I{*SH0fiT) . show ( } ;

Gambar 7.1. Aplikasi TimePicker };

,
)

C/ick tombol tambah atau kurang dan perhatikan bahwa nilai jam atau Ilunning ulang project sehingga akan menghasilkan seperti gambar berikut:
menit otomatis akan berubah. TimePicker sebenarnya bisa ditampilkan
dalam bentuk dialog box, seperti penerapan coding di bawah ini, ubah
timepickerjava kita menjadi seperti berikut:

timepickerjava
package com.wi-Lis. timepicker ;
lJnDort android. app. AcEivity;
irnport android. app. Diatog;
import android. app. TimePickerDialog ;
import android. os. Bundle ;
imgrort android . widget . TlmePicker ;
i-nport android.widget. Toast ;
gubLic class timepicker €rltelrds Activity
{
:.int.hour,minutqi........:'..i..li.ii..il.i]
.r... static f,tna1 inU ffW DIALAG-.JD.i Q;:r1r" :'.'.'

0o';e.r iCe
I,roteeted void onqre4t.e {Eundle Eevedlnstanqestate ) Gambar 7.2 Aplikasi TimePicker Dialog
t
Eulrer . oncreate t savedf nS tanaqstate-)',
setcontentview (R., layou t . da te rimepi eker ) ;
showDialog(rIW-DIALOq*fD)i, I'imePicker muncul dalam bentuk message dialog yang tampil di tengah
] layar, lakukan perubahan setelah itu click button set.
QOvrrrioe
xlrotGqted Dialog oncreateplalogliat' itd)
 android.: 1a11out*heiqht= ,,fi -1Jjareln t ,,

(' " i
': -'..
andr:o i. <i : l ayou t df h=,' r/rap-co,
t er? t,,
-wl i gh
ar:droid ; layout_he t =,, i4 z ap_ colt f en t, 1>

'/ '.i ,,>

l(cmudian ubah datepickerjava seperti berikut:

datepickerjava
package com.wilis . dat.epicker,

import android. app.ActiviLy;

i.mport android. os. Bundle ;

DubIic claes datepicker extends Actjvify {

/' i C*lled when th* a.cLivtLy is f ils, (ririttterl
Gambar 7.3. Aplikasi TimePicker Selected ,i:ilve:rii3*
public void oncreate{Bundle savedfnstancestate) {
. suxler . oncreate ( savedlnstancest.ate ) ;
setcontentview (R. layouE . da tet jmepj cker) ;
pada gambar 7g tersebut adalah aksi terhadap pemilihan 1:o, sehingga ]-
pesan dalam bentuk roasf muncul sebagai notifications dari pemilihan yang
)

kita lakukan.
l-tari coding tersebut baik coding timepicker maupun datepicker kita tidak
nrenggunakan defenisi layout dari main.xml, sebenarnya Anda bisa
DatePicker View ,relakukan penghapusan main.xml karena kita tidak ada memanggil atau
rnembutuhkannya dalam project ini.
DatePicker uietu adalah laYout yang memperbolehkan user untuk
melakukan seleksi tanggal (tanggal, bulan, tahun). Buatlah project dengan ,lalankan aplikasi dan akan menghasilkan
ketentuan sebagai berikut: gambar seperti berikut:
Proiect name DatePicker
Target Android 2.3
Application name datepicker
Package com.wilis.datepicker Spinner View
Activity datepicker
Spinner Vieu adalah menampilkan /rsf dari
item pada saat tertentu dan membolehkan Gambar 7.4. Aplikasi DatePicker.
Lakukan penambahan datetimepicker.xml pada folder resf layout dan lsl
uset' untuk memilihnya. Buatlah project
dengan coding seperti berikut: rlengan ketentuan sebagai berikut:
Project name Spinner View
datetimepicker.xml Target Android 2.3
<?:**1 vergion= "f , 0" encoding= "utf -8 "?> Application name spinner
<Li:fe;1r Li}yarut Package com.wilis.spinner
xml"ns : android* "hC tp : / / s chemas . andr a i d. c om I aI:.k / r es / andra i d "
androicl' or ientot io n= " ve rt i c:a J " Activity spinner
androj-c1: layout*widt:n= " f iII3arent "
 s1 . setAdapter I adapEer) ;
s1 . setonltemselectedlistener (new OnftemseLedtedListener ()
{
gublic.. void onI temselec ged AdapterVi ( ew< ?> argo,
t
int index = s1 . get,selectedltemposit,ionii( ) ;.
Toast . makeText getBasecontext ( ) ,
(
,,you have selected item : ', + clublindex],
Toast. lEiIGrH_SHORT) . show ( ) ;
]
public vold onNoih.inEselected(Adapterview<?> arqo) {}

AndroidManifest.xml
.?..' version="1 .0" encoding=',utf B"?>
-. .r ' i,t. xmlns:android="htLp:/.schemas. android.com/apk/restandroid,,
package= ,,com,wif is ^ spjnner,,
android :versi oncode='ll'
android : vers ionNam e=,, l. 0,, >
<..,!.1'. I , ar.io,r android: icon= "@drawahte/icon,,
,rndroid: lai:el. ,'tgstrin.g/app*name ,,>
<dL'i .J,v i " ', android:name=,,. sp jnner,,
. android: labe1= ,@sVring laptrt*iniime ,,>
<::t1.,:i:l lilt^f>
<eeti*n android:name=,,Anidroid. rntenC. actian. MAIN,' />
Lretegiory
.''rdroid:name= "andt Oid. intent. cacegar.y -LALINCHER', / >

< i/ a -| I J,t y>

</:ty,y,t l'at-..,r>
<..i5(.s- ;..k android;nrinSdkVersi on=,' 9,, />
'.,/ ^ ,n i L(.atr.>

I(emudian buat satu file java dengan nama viewsActivityjavd dan isikan
coding seperti berikut:

ViewsActivityjava
lrackage com,wilis. spinner;
import. an{5o!d.app,Aqtivi:(y;,',,.t.,,,,,...'
importandroid.content,Int.9nL;.........
import android.os.Bundle; ,.,'
1lub1ie.c1as5ViewsACtivityexLends4cLivity'.].ill.
I

/** Ca1led when.the aclivity . .is f irst,. cidirted.. * /

(this, @Override
public void oncfeate (Bundle savedfnstanceState )
{
 super . oncreage i savedlnst ancest&te), Ubuh cara menampilkan /rst di spinnerjava menjadi seperti berikut:
sietcontentview {R , layout . main }.;

gtarLActiviiytnew lntent (this, spinner.class) ) ; ArrayAdapter String adapt.er = new ArrayAdapt.er String
] thiE,
' andro id .R. I ayou t .s inipl'd.sp i nner*dropdown*i t em,
presidents
Running aplikasi sehingga akan menghasilkan Sambar seperti berikut:
running l;lang projecf dan lihat perbedaan hasilnya. Sebenarnya cod.ing ini
akan menghasilkan tampilan yang berbentuk lain.

Gallery View
Gallery Vieu adalah layout yang menampilkan item-item dalam bentuk
image. Untuk mempermudah memahaminya buatlah project dengan
ketentuan sebagai berikut:
Project name GalleryView
Target Android 2.3
Application name gallery
Package com.wilis.gallery
Activity gallery

Buatlahf/e layout xml di resf layout dengan namafile displayview.xml

Gambar 7.5. Aplikasi Spinner.

displayview.xml
<?xnr version=',1. 0,, encoding=,,utf-8,'?>
Click list yang muncul dan pilih Mencherster City, sehinga akan selected dan <l.,ineal:taY(}ul .,
memunculkan pesan dalam bentuk Toast apayang kita pilih seperti berikut: xmlns : andro Lda "ktr.p: / lscfidinas;.endraid. con,/a:pk/reb /android',
android : orientaUior1= "1/6rtical.
android : layout_width=,, f i I _l_-paren t,,
android : 1 ayouL_height=,, fi I l;:arer0,, .

<Tex'-Vi ew
. android.:l"ayout.-widbh*'rfi"I]-*parenil
android: layout.:h.eiglxt= :"rra:p*cor len t ,
andinid': tc:rt.x "fp66gss Kata Bandung, . I 2
<CaI:ery
andioid:id=u.€*id,r'git11artri.,!. ., ..

andfoid: 1&youE-width= " f i7f _-f;arent ,.

androi d, : layou t*hei ght *,: r/ra,p-Con Le nt,, />

<'n"q'vicw
android.: idr ,,€+Jdli.nag'el ,,

android : layout_widthr " 3 2 ttpxn

android : ldyout_heigh[= " 2 5 1px,, .,
android: scaleType. * fitry, />
Gambar 7.6. Aplikasi Spinner Selected.
/':-.r'at l,qVout>
Untuk tampilan gallery kita mempersiapkan tujuh buah gambar seperti
berikut:

r l*p "*s
*: LI} d'ra,'uva.ble
l&* bandunsaiPs
ixdi handurlg;ips
&-l band'r,rn93jPg,
iKj bandung4ip'g
i&j h'an*ungsipng
;= bandun96jPg
i*.;l bandurrg7.JPg
Gambar 7.7. drawable Aptikasi Gallery

Kemudian codinq galleryjava adalah setragai berikut:

galleryjava
$ackage com.wilis. gallery;
import android. app. ActivitY;
import android. content. Context;
Lmport android. content. res' TypedArray ;
i&)ort android. os.Bundlei
inEnrt android. view.View;
S.mport android. view,Viewcroup;
inrport android. widget . Adaptervier4l;
inrDor! android . widget . BaseAdapter ;
inDort android.widget . GallerY;
inDort android. vridget. hageview,
irnport android.widget . ToasE;
imsrort androi d . widge t . Adaptervi ew . OnI temc 1 i ckl,i s Eener ;

public clagE gallery extandE AcLivity

{
tnteger[]rimagelDs = {
R. drawable. banduagf,
R. dralirable . bahdunga ,
R,drawabfe. bandung3,
R. drawable . bafldung.A,

...R,drawable.baadui.ng.6, i ' '

R. diawabl e ; bandiig7 ,' '

);
Q(tver:::idc
irublic .vol,d,.qnCreirteIBundle' savedristaacEstate) i

{
.'.......isu!,ef.onCreaie{sdvedtn5!ancestate)]i
setcontenEvier,r (R. layout . disptayt jse71 ;
 nrageView. setfmageResource ( imagelDs
ViewsActivityjava i
Iposition] );

packEge com.wilis. gallery;

i4>ort, android. app. ActiviEy ; llunning ulang project dan perhatikan apabila Anda milih salah satu photo
J.rport android. content . Intent;
i$port a4droid. os. Bundle; rlalam gallery akan menampilkan photo tersebut daram image uieu yang
..
berada di tampilan bawah, seperti gambar berikut:
pubttc cl,ass ViewsActivity .extends ectivity
/*" Called when lhe activir.y is firsL creaLed. *l
!;l0V(') r1.1,
public void, onCreate (Bundl-e savedfnstancestate)
t
super. oncreate ( savedinsLaniestate ) ,'
setcontentview(R. Iayout .mainl ;

startActivity{new Intent (thlE, galIery.cl.ass) ) ;

Runing project dan akan menghasilkan tampilan seperti gambar berikut:

Gambar 7.9. Aplikasi Gollery view image.

ImageSwitcher View
ImageSwitcher sampai sama dengan ImageView, hanya perbedaan cara
menampilkan perubahan atau pergantian gambar yang ditampilkan pada
layar. Berikut penerapannya.

displayview.xml
<?xml version=,,1. 0,, encoding-"uef*8,?>
Gambar 7.8. Aplikasi Gallery , :tt.l. r..l.ctyouL
xmlns : andro id. "http: / lscJrernas . androjd. cony' ipk/ res,/Andraid,'
android:orien.tationq,,!'€rtica-l" I .

android : 1a1.out;widLh=', f i J LJ)arent',

Tambahkan coding berikut untuk manampilkan image di ImageView android : layout_height= "fj J _parenL,' L

gambar yang di pilih. Perbaiki method onltemClick menjadi seperti berikut: android:,background= , #ff0A0000 "

public void onIt.emClick (AdapLgrYiew parent,

View v, int position, long id) < tfi.1.1e, jv, j I r.l:C'r
t android : id=,, 6+i d.rsrq i t cher 1
android : layout*widtl:=,' fj f f*pareat,,
Imageview imageview = (rmageview) findviewByld(R. id. inagel) ; android : layout height=',fjL-l_.paren t,,
 .....android:1a)rout'a1ignparentLefL android. R. anim. fade_in) );
-'i . androidrlayoui*alignFarentRight= "true"
' ' 1,' android:layou-t=alignParentBottom= "true mageSwi t cher .se toutArrimat ion {Animat ionut, i l" s . I o adAn ima ti thl g,
,. on
'' i (

/> android,R.anim. fad{out) ) ;

<e .lI ic r.'l
r, androi d: !d* ,,
8+ id/gialleryl ,,
Gallery gallery = {Ga11ery) fj.ndViewByld(R.id. galJerlrJ,) ;
android: Iayout-widLh= "fif IJarenl " ga1]ery. setAdapter (new ImaqeAdapLer (this) ) ;
android : Iayouc-hei ght-= " wrap-content " ga1 1ery. setonf emcl j ck],is E.ener n6w Onf temCl ickl,i stener ( )
E (

(
pr:Jr1ic vol.d onlt,emCl ick (Aqapterview parent,
''''ro...........
</Rel.at j.ve1,a)aou.> ', I rrr
View v, int position, tongf id)
t
.i
--^^c,.,1 iwitcher.
ts^h^- -^ts T-
seLlmaqeResource ( imagelDs [pbsition]
imageswitcherjava )
)

package com..wi1 is . imageFwitcher

]);
; )

iryoft aridroid.app.Activityi . public View makeviewo

inlxrrt android. content . Contej{t; t
LnDort android. content . res . TI4)edArray; ImageView imageView = new ImageView(thle);
Lmport android. os . Bundf e ; irnageVlew. setBackgroundColor ( 0xff000000.) ;
l"ngprt android. view. View,' imageVi ew. set Scal eType ( fmageview. Sca IeTlrpe .F f ,f _C EN,|E R | ;
import android. view.Viewcroup; imageVi ew . set LayoutParams ( new
i4lqrt andro id. vi ew. an.imat ion . AnimalionUti f s ; Imageswi_tcher - Layout Params (
inport android.widget . Adapterview; Layout.Params . .trft.L_PA,R,E I? ,
Lmport android.widget, BaseAdapEer ; LayoutParams. FU,t. PAFEAIr) ) ;
Lryrort android. widget . Gallery; return imageView;
irqport andro i d . widget . Ga1 1ery. L<ryouLParams ; i
import android. widqet . ViewSwitcher. ViewEactory;
i4lrort android . widget . Imageswitcher ; public claEE ImageAdapter extends BaseAdapLer i

inport android. wj dget . rmageview; t

l"ryprt andro id. tridqet . Adapt ervi ew. onf temc 1 i ckl,i s tener ; Drivate Context context;
Irrivate int itemBackground;
public claes j-mageswitcher extenda Activity
irtr,lm€ntE ViewFactory public TmageAdapter (Context c)
{ t
11*-.-th* images ir: display--'.. context = c;
Integer[] imagelDs = {
R.drawable . bandungJ- ,
R.drawable. bandung2, )
R.drawable. bandung3,
R, drawable . ban dung$ ,
R.drawabfe. bandung7, publlc lnt qetcount ( )
R, drawable. bandung6 , t
R. drawable . bandung7 retura, j.mageIDs . lenqth;
1.
]
prl,vale Imageswitcher imageSwiLcher ; public Object get.ltem(int position)
{
Ll(JV*.rrlJe return position;
publlc vol,d onCreate (Bundle savedlnstancestate)
:,. r . *w|ar.onqieate{,savedlnstancestate) r. publ"ic lon.g getltemld (int positioir)
. setConteqtViewiR.Layout.dispTawiewl; 1

returr, position;
imageswitcher = (fmageswitcher) findviewByfd(R. id. swiLchert\ )
imageSwi t.cher, setFactory ( this ) ;

imageSwi tcher . set Iri.Animat ion ( Animat i onut i f s . -Z oadAnima Ei on ( thi s,

 publLc View getView(int position, View convertview, Vie\to€roup
parent )
(
lmageview imaqeView = new Imageview(conLext) ;
imageVi ew. setrmageResource ( imageJ Ds Ipos ition] ) ;
imaqeVi ew. setscaL e[lrpe ( Imageview. Sial eT)pe . F I T-xY) ;
imageview. setlayout Params ( nevt Ga1 1ery. Layout Params ( 1 5 0,
120) );
imageVi ew. setBaikgroundResource { i temBackgr ound ) ;
return imaqeView,'
1

ViewsActivityjava
package com. wil-is. iiriagegr,ritcher ;

import android. app.Actlvity;

import android. content. IntenL,'
irnport android. os. eundle ; Gambar 7. 1 0. Aplikasi lmageSwitcher

public class ViewsActivity extend.s AcLivity

l** Cal-}ed when the activity is first created. */
GOverride AnalogClock/ Di gital Clock
public void onCreate(Bundle savedlnsLancestate)
{ ,\rralagoClcok adalah layout untuk menampilkan jam analog. Sedangkan
super. oncreat,e (savedlnstancestat6),
s€tcontentview(R.l"ayout.main) ; l)igitalClock adalah layout untuk menampilkan jam digital. Berikut adalah
"
sbartActivity (new Jntent (this, images\,riE.cher.c1ass) ); I)(f nerapannya. Buatlahproject dengan ketentuan sebagai berikut:
Project name Analogdigital Clock
Target Android 2.3
Application name analogdigital
string.xml Package com.wilis. analogdigital
<?x,. version= "J.0" encoding="uL t -8"?> Activity analogdigital
< r €f-ol:rccs>
<t:1 | .,t name= "he-l-lo">HeI10 World, galleryt</st r , -.r>
< s tring name= "ap.p_nqme " > ImageSwi tcher< / * i-r I nE> t Ilrah main.xml nya menjadi coding seperti berikut:
</ l t:.:ur, e:>

Rurmhtg project dan lihat perbedaan tampilannya dengan ImageView pada

main.xml
project aplikasi Gallery, berikut adalah tampilan layar apabila project .'i,rrl version=,,-1-r,, encodirlq=',utf=8,?> .

i ilearT,Av$ll]'
ImageSwitcher dijalankan.
.

, r,i 1 ns : and;si d"=' h t tp : /./ schelias. andr o i cl . e om / apk / r e s / ancir o i d,,

android : orientat ion: orre r t i cal
andrsid: layout*width= lrfjf f_parent " .,.
andro i d : 1 ayou t ght =,, f j -l -t-_traren t,,
-he!

<AnalcgCIiek androi.d.: idi= "Gr jdls] ock.1,'

android: 1ayor-it-:width= "ft/rap-eonten t ,'

androj d: IayouL_height = "wrap_conrent "

/>
',/ t,'.r:rr1,ru1.>
analogdigitaljava Menus (Context Menul Options Mena)
irackage com.wiI.is, analogclock;
f't'rbedan Context Menu dengan Options Menu adalah Context menu
inFort android. app.ectivlty; lriirsanya menampilkan menu dengan aksi menge-click menu tersebut,
import anclroid. os. Bundf e ; scclangkan Options Menu adalah menampilkan menu dengan aksi menge-
pubLic class analogdigital- extends ActiviEy { r'/ick/menekan tombol Menu.
-' CuL-^r when r.he ac( ivily i-s Iirst cr(al ed. */

public void onCreate(Bundle saved.InsEancestate) {

Itcrikut adalah contoh Options Menu, di mana kita melakukan aksi menekan
sup6r. oncreate (savedlnstancestate) ; lornbol Menu yang terdapat pada bagian kanan gambar.
(R. layout . mainl ;
""icorrt.rrtview

Running project dan akan menghasilkan seperti gambar berikut:

Gambar 7.13. Options Menu

Gambar 7.1 1. Aplikasi Analogclock

Itcrikut adalah contoh Context Menu.

Kita akan menambahkan tampilan Digitalclock pada layout di atas,
tambahkan coding berikut dalam main.xml
.'l i.'i':- LCl, Lk android: id= "@+id/cfock2 "
android : layout-wid Lh= "wrap-content'
anciroi<1 : IayouL- heighr- = "wrap-conEent"

Running :ulangproject sehingga menghasilkan seperti gambar berikut:

Gambar 7.14. Contex lAenu

Iterikut akan kita coba membuat Opfibns Menu dan Contex Menu, buatlah
1
troj ect dengan ketentuan berikut:
Gambar 7.1 2. Aplikasi AnalogDigital Project name : Menulayout
Target : Android 2.3
 Application name : menulayout mnu2. setAlphabeticshortcut (' b, ),
rrru2.setlcon(R.drawab1e.icon) ;,
Package : com.wilis.menulayout )
Activity : menulayout MenuIt.em mnu3 = menu.add(0, 2, 2, "Item 3',);
{
mnu3 . setAlphabeticshortscut (Ic!) ;
Buatlah-7t/e xml di resf layout dengan namafile menu.xml. mnu3 . setlcon (R . drawable . next ) ,.

]
Menuf tem mnu4 = menu. add (0, 3 , 3 , ,,f tem 4,,)
menu.xml {
;

mnu4 . setAlphabeticshortcut ( .,d, ) ;

<?:<m1 version. "1" 0" encodingr= "ritf=8"?> J
< i. rr*u r Layrtr l.
1., menu. add (0, 3, Item 5,' ) ;
3 , ',
><mlns : andro id= "]r I tp : / ./ I ch eina s ..qrndrqj d. coml apsk / r e s/a ndr o i d " menu.add(0, 3, 3, Item 6',); ',
android : ori6ntation. "veiriial'.. menu. add (0, 3, 3 , ,'Item 7', ) ;
. aadroid: layout;widfh= "fjlljarenl'' ]
android: f .iyoul-he.ight- "filfJarenf " private boofean MenuChoice (MenuIt.em item)
t
swiEch {item.getItemIdO ) {
<Bllf.lon anilroid : id.= "Bticllbtnl.l' case 0:
android:1ayout_r,uidtn-=,,lfiJ7Js:a.rent"..:.'.' ToasL.makeText(this,,,you clicked on. liem 1.
android : laybuL*hei qhf, ='tqrap*eon r en a 1'
Toast . LENGTH_LONG) . show ( ) ;
android;.text.= "Ne71o, .Tamp'lan &bnui " ...'. return true;
/> UdSE I :
Toast.makeText(this, ,,you clicked on Item 2r
</1.-te r'l .ryoul> Toast. LENGTE*LONG) . show [ ] ;
return true,.
case 2:
menulayoutjava Toast.makefext(this,.,,you clicked on Item 3"
Toast . LENGTH_LONG) . show ( ) ;
package com. wil-is.menulayout ; ret.uro true;
irnporf android. app. Activity; case 3:
import android. os, Bundle; ToaSE.makeText(.this, ',you clicked on Item
import. android. view. Menu ; 4n
Toast. LENGTH_LONG) . show ( ) ;
import android. view. Menu f tem; return truei
import android. widg.et . But,ton ; case 4:
import android.widget. ToasL ;
Toast.makeTaxt{this, ,,you clicked on ften 5{
Toast..LENGTH_:L0NC) . show{ ) ;
rrublic class menulayout ext€rlds Acti.vity
.

return true; . i.
{ case 5:
@Overrlde ToasE.makeTexr{this, ,,you cficked on IEem 6'
public void onCreate (Bundle savedlnslancestate) Toast. LENGTH_LONG) . show ( ) ;
t return true,'
super. onCreate ( savedlnstancegtate ) ; n=ea 6.
ToasC.makeText(this, .',you clicked on f tem 7,,,
setcontentview ( R. Iayout. menu) ; Toast . LENGTH*LONG) . show ( ) ;
BuLton 5;n = (But.ton) findViewByld(R.id.btnl) ;
return true;
btn . s etoncreateconbextMenuli stener ( tlri q ) ; t
privat@ void CreateMenu(Mern1
return false;
merlu) I
{ Lduverrade
menu. setQwertyMode 1 Lrue ) ; public boolean oncreateOptionsMenu (Menu menu) {
Menultern mnul = menu;add(0, 0, 0, "It6m 1",) t
super. oncreateopt ionsMenu (menu) ;
t C-reateMenu (menu )
.' mnul . setAiphabeticshortcut ( 'a' ) ; return true;
;

mnu1. setlcon (R.drawabte. icon) ;

)
] {goverrt de
Menultem mnu2 = menu.add(0, 1, 1, "Item 2"); publ ic boolean onOptionsltemsel_ected (Menuftem item)
,t
 return Uenuchoice ( item) ;

ViewsActivityjava
package com.wilis.menulayout ;

impoit android. app.Activityt

imporc android. os.Bundl"e;
import android. cont.ent. Intent ;

pubtic cfass ViewsAct.ivit.y extends Activit.y {

/** Cal1ed when the aetivity is first created. *l
Goverride
public void. onCreate(Bundfe saved-tnstancestate) { Gambar 7.15. Aplikasi LayoutMenu
super . oncreate { savedlnsEancestate } ,
setconlentview ( R. Iayout . main),'
startActivity(new IntenL(this, menufayout.cfass) ) ;
l Ickan tombol menu yang di atas keyboard sehingga muncul seperti
] lrcrikut:

AndroidManifest.xml
<?\n i. version= "1.0" encodinq="utt-8"?>
<m.;.riLr.i;', xml-ns:android="htip:t/schemas.and.roid.com/apk,/res/android"
package= "com.wi 1 is.menulayout"
unaroiA : versionCode= " J "
android : vers.i onNam e= " 1. 0 " >
..;;; ;;;;.j.; ;;;;;id, icon= "@drawa bte/ icon"
android : Iabel= " GsLr ing / app-nane " >
<.icL ;v i cy android:name= " .menuIaYout"
android: labe1= " @strinEIapp*name ">
<:rIltl-t. i:. l.e'>
<J.t r c,' android:name= " anclroid. inLent. acti on. I"IAIN" / >
<ca teg'\ ry and.roid : name= "andr o i d. i n t en t . ca t egorY. LALINCHER' />
. /int ini- ritr*r,
.r_;{i::lx:::' g" />
<usi:s*sdk android:minSdkversion- "
</r,1nr-Li:Lrf->

Running pr,o.7ecf sehinggal menghasilkan gambar seperti berikut: Gambar 7.16. Aplikasi LayoutMenu action i.

tlntuk menampilkan Context Menu layout click tombol yang bertuliskan

More sehingga muncul seperti gambar berikut:
 f

BAGIAN 8

DROID DRAW
Gambar 7.17. Aplikasi LayoutMenu action ii.

Pengantar DroidDraw
DroidDraw adalah fools desain aplikasi android yang bersifatfree dan dapat
di-dounload di http://www.droiddraw.org. Dengan fools ini, kita dapat
dengan mudah mendesain tampilan android.
a& U[ tuljd Hp
riurri 1**11:*1m\ \hq5 r.oron am's s{mn
i&rlry.ui;,49***.1.:,
k s S!e: 4trhd* t
Ian" l- r--t
& d. & torzr i f f fJ'r"rs.,L)"u,'ou,no. V).4

Gambar 7.2. Relativelayout aplikasi converter.

Kemudian pilih Layouts Tab,

Gambar 7.1. Tampilan awal DroidDraw

Berikut kita akan coba desain aplikasi menggunakan DroidDraw.

Aplikasi Converter Gambar 7,3, Layout Tobs.

Pada bagian ini kita akan membuat aplikasi conuerter nilai mata uang dollar
menjadi nilai mata uang rupiah, di mana kita akan mendesain dua buah drag dan drop Linearlayout ke atas tengah layar
inputan dan satu buah button untuk proses conuerter. Langkah-langkahnya sehingga menghasilkan gambar seperti berikut:
adalah sebagai berikut:

Buka DroidDraw dan jadikan root layout adalah Relatiue Layout seperti Double click Linearlayout dan jadikan nilai
gambar berikut ini. propertisnya menjadi width "zoopx" dan height
"13opx", setelah itu c/ick apply.

Pilih Tab Widget, Drag dan Drop z buah

TextView dan z buah EditTexl serta 2 buah radio
button sehingga menghasilkan seperti gambar
berikut: Gambar 7.4 Posisi
LinearLayout.
 Gambar 7.7 Tampilan Fu11 layout.
Gambar 7.5 Tampilan LinearLayout.

('1ick tombol gerate untuk mendapatkan layout tampilannya dalam coding

Drag dan drop satu buah butfon dan penempatannya pada Relativelayout rrnl, sehingga coding xml kita adalah seperti berikut:
sehingga menghasilkan seperti gambar berikut:
' '1 \nl. version= ".1 . 0 " encoding* "ulf *8 "?>
. 17 rl
.rr rr oid I i c)=' @+ ict /widqet:2.7 "
,rr Ir,' id : I ayour_width= " fi lfJ,arent'
rrrdroid:layour height= "fi 1 l -.pat ent'
' i ;rs : android= "ht t p ; u. schcmds. andr oi.J. com / apk./ r es t anclroi d "

I .;,,','
.widget26"
' r lroid: ict= "G+id
r ndroid : layout_\didth= ", 0Opx "
.r rdr.;i d : 1 ayout-heighL= " 2 1 gpx "
..rr Lns : andro,d= " ht f p ; / / schemd s. andr o id. com, apk t res t andt o i t! "
,r:dro icl: ori-enLaLi on= "vert i ca L "
, r reli:oi d : .layouL erVer t i ca I = " t t ue "
,
-ccrrt
rclroid : layout-centerliori zonl:al :' Lrue "

Gambar 7.6 Tambahan Button. .,t-,

,r,d:oi d : id= " @* ia t widge t 3 0 "
, r,droid. : layouL-wi dLh-- " wi ap_ cant ent "
, r.qt o,ir-l : 1 ayout_he j gh t-= " w; ap_ cont en t "
Double c/ick TextView pertama dan jadikan textnya menjadi "Dollar" ,noroi d ; text= " DrsI 7ar "
rndroid : textstyle= br: 7d,'
dalam tulisan bold begitu juga TextView kedua jadikan text-nya "Rupiah". , "

.Iadikan propertis EditTex't pertama menjadi id "@+id/dollars" dan text-nya . / ( \r.,/:,iJ>

kosong serta widthnya "loopx".. Kemudian EditText kedua menjadi . i . :rr
, rdrc,id : id= " G + idt do Lfar "
r

@+id/rupiah dan textnya kosong serta uidth-nya "loopx". Edit RadioButton r,d roid : layout_wi d t-h= " 10apx "
r

pertama menjadi id @+id/dtor dan text-nya "Dollar to Rupiah". Dan ,ndroid: layouc_height= " wrap-content "
RadioButton kedua menjadi id @+id/rtod dan text-nya "Rupiah to Dollar". : t€xt size= " 3. isp "
lndrord
Dan edit Button menjadi "6r+id/convert" dan text-\ya Conversi. Sehingga ' / 1 r.l l')'ell >
menghasilkan gambar seperti berikut: . i \:r\/1@'d
rd roi d : i d= " * id /widget3 2 "
rr @

rdroi d: layout-w i df h= " hlrap-conLent "

, r

rdroid : layout *he ight = " wrap-contenL "

rr

,ndroid: texL= "Rupiah "

. rrrdroid: textstyf e= 'bo jd"
< ,/'l ex L "l, c 'r>
<-E,.i- LT,-rL-
android : :rd.= " 6 + i d / rupi ah "
android: layr:uL-widch=" I A}px"
androi d : I ayou L-he-i gh^L= " wrap-content "
androi d : texts ize= " 1 8 sp''
</Edi -'1 erL>
<Rao ioRut Ltf
android : id= " + id / dE or''
@

androj d : 1 ayou L-wi d LLl= "wrap-can r en t "

android : J ayout_heiglnL= " wrap_con len t "
android: text= "Dol-Za r to Rupiah"
</Fad; cRut l-,)n>
<Hadl0tiitrr on
android : id,= " + id t rtod "
@

android : I ayout-wi d th= "wrap-content "

android : layout_hei gbt = "wrap- contenL "
andfoid: texd* "fruBiah .to Dollar
</?adiogutton>
< /Li.ncD r Ldyoui>
<BuL.Lon
android' id=' @ + id/ conver t "
androi d : l ayout._widLln= " wrap_cont ent "
dnd.roid: layout*heightE "wr'ai?_conte.n t."
android: text= "Conversi "
andro j d : 1 ayout-be I ow= " G + id /widget2 I "
androi d ; ! alroqt, al iqnRight+ " 6+i d / wi dgr et 2 8 "
<1But ton>
< lRelai ivel,&yout>

Bluatla}a projecf baru seperti ketentuan berikut:

Project Name : conver
Buitl Target : Android 2.3
Application name : conver
Package name : com.wilis.conver
Activity : conver
Min SDK :9
pxotecled woid. convertRupiahToDollars ( ) {
Buah main.xml dari project tersebut dengan isi dari Ttle xml yang kita double vaf =
generate dari DroiDraw tersebut. Jadikan isifle converjava menjadi seperti l)ouble. parseDoubl.e ( rupiah. getText ( ) . tostring ( ) ) ;
berikut: l/ in a real app, o-*,il get this'Aff th* 'net
do1 lars . setteit (poub1e. tosrr]ngr (va1 1 90 00 ) ) ;
1
)

conver.Java I

paelt*ge ..com.wi 1is-; eonverter t ,lalankan project dan masukkan nilai di isian dollars dan clrck conversi
itrDort android. app. ActiviEy; sehingga akan menghasilkan seperti gambar berikut:
irrport android. os. Bundle,'
 BAGIAN 9

ANDROID WEBKIT
Gambar 7.8 Aplikasi ConYerter.

Konsep Webkit
Arrdroid Webkit adalah salah satu toolkits GUI di mana kita diperbolehkan
rrrenggunakan format HTML untuk menampilkannya di brot-user yang lebih
licnal dengan istilah embedding. Web browser dapat dijadikan sebagai
widgets di dalam sebuah actiuity untuk menampilkan format H'IML. Web
ltrowser di android dikenal dengan istilah Webkit, sama dengan istilah
Safari Web browser di produk Apple's.
Class di Android Webkit sangat banyak seperti WebView, WebStroge, l:rowser. f oadData (" <htm1><body>Tulisan pertama yanq ditampilkan
<f i web brouscr. .brcl1 '-.hLJnL>", "LexL/lrLrnI", "UTF 8");
WebSetting, WebChromeClient, URLUtil, WebViewClient, WebViewDatabase, )
dll. Class yang paling banyak dipakai adalah WebView.

l'rrrlratikan, kita membutuhkan import libraries android taebkit yang

liwakili oleh sub c/ass WebView seperti berikut:
Aplikasi Webkitl
r

I mpor! andro-Ld. webki t .Webview;

Pada program ini kita akan membuat program yang mana hasilnya akan di
tampilkan di web broutser android. Buatlah project baru seperti ketentuan licrnudian data ditampilkan dengan statement loadData, seperti contoh
berikut: lrcrikut yang akan menampilkan tulisan fext di layar:
Project Name webkitr r,,wser.loadData("<html'.bcdy>cext. bocly..'51o1'","lexf html","Li'l't'-
Buitl Target Android 2.3
Application name webkitr
Package name com.wilis.webkitr l)r'ogram tersebut akan menghasilkan tampilan seperti tampilan di bawah
Activity webkitr rrri:

Min SDK 9

main.xml
<?irl version="J. 0" encoding="utf '8"?>
<I ; n.il a t.,1yr rr

>.r,,lns, andio ia-h t tp : / / s ch ema s . andr o i d .. g a.4 L apk / r.? s /- prtg{9i{

Gambar 8.1. Aplikasi webkitl
android : orientaL ion= " vert ica l "
android : layout-width= " f j I llarent "
androi d : layouc-height= " fj i lJ:a ren t "
j6. '
Sclain loadData sebenarnya usebkit mempunyai fungsi-fungsi lain yaitu
<. -e... android: Ld,="@+id/webkiL " loadUrl, loadDataWithBaseUrl, kita akan membahas loadUrl pada aplikasi
andro ir.l : I ayoul -widLh= " f i 7 J ent "
-pat rvebkitz dan loadDataWithBaseUrl pada aplikasi webkit3.
android: Iayout-he-ight= "Irf l--parent "

< / i. i r 'c:a 'r'.r",' , -,' ,

webkitljava Aplikasi Webkit2

package com.wilis . webkitl ; l'ada aplikasi webkitz ini akan kita buat program di mana apabila aplikasi
rlibuka akan otomatis membuka website. Buatlah project baru seperti
iffi::: ll3l3i3 33iiffi"i;::' lictentuan berikut:
import android. webkit. WebView;
Project Name webkitz
publtc class webkitl erEtend6 Activity I Buitl Target Android 2.3
webview browser; Application name webkitz
GOverride Package name com.wilis.webkitz
grubLic woid onCreate(Bundfe icicle) { Activity webkitz
super. oncreate ( icicfe) ; Min SDK
setcontentvi ew (R. fayout . na inl ;
9
browser= (WebView) findViewayrd(R. id. webkitl ;
 browser, loadUrl ( ',http I I /nazruddinsyafaat. blogspot . com,, )
]

Alrabila kita jalankan akan terlihat tampilan blog yang kita sebutkan di-
utding java menjadi seperti berikut:

iri..r li, .r-iii i .\::iI t:.{r_

'IAR'H

AnstP Etoc
. ^i t it Jtll

Gambar 8.2. Aplikasi Webkit2

l'ada saat Anda jalankan aplikasi tersebut bisa jadi aplikasi Anda akan tidak
rrrenampilkan isi ueb yang kita sebut dalam coding java, seperti berikut:

Web page not available

moved pennanently to a new web

address,

Here are some suggestions:

. Check to make sure yOur devire

has a signal afld data aonnecti0n
. Reioad this |veb page later.
. View a (a(hed ropy 0f the web
page from G0ogle

'f ir' rr-r -.4,,

public void, oncreate(Bundle icicle) {
super. onCreate (icicle) ;
setcontentview(R, layouL 'mainl ;
browser= (WebView) findViewByrd (R. id. webkit) ;
Gambar 8.3. Aplikasi webkit2 error
 *

Ada dua kemungkinan yang menyebabkan tidak tampil yaitu Anda tidak <linl:*nl*f ilter> . ., ' :t. .:.: . .,
</acr ivit.v>
terkoneksi dengan internet dan dalam Android.Manifest.xml tidak ada
permission untuk mengakses internet. Permission tersebut adalah sebagai </appiicat'ion>..,.
<r-rsg.i-.gdk iudroidixinSdkVdrsion= n9, />
berikut:
, ): . .. i tt. i- i :: i. : and.roid : name= "androjd. permjssi on. INTERNET " , .,rriI*sl,> i

l..il;r tidak membutuhkan permission Internet, karena kita tidak

r('nggunakan koneksi ke internet.
Aplikasi WebkitS I
r

Pada Aplikasi webkit3 ini kita akan melihat penggunaan webkitS java
IoadDataWithBaseUrl yang kita terapkan untuk menampilkan jam sistem ke package com.wi1i5,webkit3; :

browser. Buatlah project baru seperti ketentuan berikut:

Project Name webkit3 lmport android.app.Ac;ivity; I

lmport android, os. Bundle;

Buitl Target Android 2.3
Application name webkitg lmport android.webkit.'WebViewCiient; :

lmgort java.util.Date;
Package name com.wilis.webkit3
Activity webkit3 pubJ.ic slass uebklt3 extends Activity 1 "

Min SDK 9 WebView brows.er;

GOverride
pulrlic woid. onCreate(Bundle jcicle)
main.xml super. oncreate ( icicf e) ;
(

<lz;, I v3rs1o:= ", 0" encoclins="uLI-8"?> setcontentview ( R. layout . main );

<L . -r ,: L .'7or: t browser= (Webview) f indvieidByld (R. j d. webkiL) ;
><rnlns : andro lde " htllo : l lschemas . anrlrr:i d. c om / apk,/ re s / andr tt i <1 " browser. setWebvierlrclieni (new Callback ( ) ) ;
android: orienlation= "Yerticaf "
androjd: layout-widfh= " fi IfJ)arent " I oadT'ime():
android: IayouL-height= "fj 7 IJdr ent " ]

<:'J6.b -/r - android: id= " @+idr wcbki t "

cir woid foadTime O {
- . String page:"<htm1><body><a href=\"c1ock)',r,,
,"Jr"la, tayort-"ridth= "f i I Tiarent "
anrlroid : layout-hei ght = " fj 7 J J)a tent " +n€w Date { ) ;t.ostring ()

/> +" </a></body>< lhEml >";

</ l,inei:r:ri.,ay*u t>
browser . loadDatawit.hBaseURL ( "x-data: r /base', ,
l,,rge, "textrhtml ", 'UTF-8',nu11) ;
Android.Manifest.xml
<?m version= "f. 0 " encoding= "ut f B "?> privat€. clase Callback Bxtgilds Webvielvclieni {
<manifesl xmlns:android-"Itttp:l/schemas.android.comlapk/res,/ancirojd" public boolean shoufdoverrideUrlLoading (WebView view, String
package= " con. wi I is . webk i t 3 " rlrl){ i:
.', ,
''i....
... ,i..
android :versioncode= " l " Loadfime();, rl

i,:,. ...
android. : versionName= " 3. . A' >
<a1rp, i,'.1t ion android: icon= "@drawablet icon"
android : label = " t3 st r ing / app-name "> )
<acliwiLy android:name= ", wei:kj tJ "
androi d : labe1 = " G s L t .i ng /a pp-name''>
<:Lll e:.t.-filte:'>
<acti** and.roid: name= "andrr:id- inle:l]t . action ' MAIN" />
<l:dl egcly
android:name= "android. intenc . cateqary. LAUNCHER" / >
Mon lan 10 1 6:08:0q-G1,,[rq7:402Q]_1

BEKERJA DENGAN ARRAY DAN

Gambar 8.4 Aplikasi Webkit3 FILE

Konsep ArrayAdapter
ArrayAdapter adalah ListAdapter yang mengelola dari objeck arraA,
ArrayAdapter adalah salah satu closs yang terdapat pada
a ndroid.widgets.Adapter.
 < /?ab1eR*w>
Aplikasi arrayl
<RLrLt on android: id,= "G+id/save"
Pada aplikasi ini kita akan membtat layoutftampilan serta pembuatan android : layou.t_width= r fi lfjarene,'
class-c/oss inputan yang nantinya kita masukkan dalam arraA diaplikasi
. android text. dsarze ,i
array2. Pada aplikasi arrayr ini akan kita buat inputan untuk Address :
/>
Manager, inputan yang kita gunakan adalah Nama, Jenis Kelamin, dan </-i.:ic,dyoLr>
Alamat. Buatlah pro-7ect baru seperti ketentuan berikut: . /;.|ine:a: i dyc.Lrr >

Project Name Arrayr

Buitl Target Android 2.3 Kita membutuhkan z file java yaitu arrayrjava sebagai file utama dan
Application name arrayl admagjava sebagai clcss yang menangani closs-class inputan pada address
Package name com.wilis.arrayr rnanager ini.
Activity arrayl
Min SDK 9 arrayl.Java
package com.wilis, arrayl ;
main.xml import android. app. Act j vity;
<?x;itrl . versioir; "-1 - 0 " enci:ding*. uu lf -8 "? >. ilnport android. os, Buadle.;
<1, i nedr Layouc import' android.view.View;
xmins : android; "hc cp : /,/ sc hema s . anciroi d. com / apk I r e s / 1ndroi cJ " import android.widget. Button;
android : layouL-wiclt:n-- " w r ap-c ont ent " imXrort android ; iridget - Edi tText ;
. android : layout-height = " wrap*con Cent " i4port android.widget. RadioGroup ;

publlc claaB arrayl B:(tendri Activity I

<Tabl.ql,ayout almag reuew almaqO;
andro j.d : layout*width= " rrap*conf en t'
android: tayout-heighL-- "wt ap-content " :.rovert idc
androi 11 : str.etchColunrrs = "l " pubLic void oncreate(Bundl-e savedlnsE.ancestate) {
Buper. oncreate ( savedlnstanceState) i
setcontentviev, (R. Iayout . main) ;
< fdbl eRow>
<TexlVlew android: text= "lfame: " /> Butron save* (Button) findViewByld(R-id. sarre) ;
<Edit.?€xl android:id= " G+id/nama" />
< /'T aL.-r e F.:w> save. setonclickl,istener ( onSave) i
< fabl ePc\v>
<TexlView aridroid: texl= "Je&eL: ' 1> private View. OnCIi ckl,istener onsave=nelr' View, OnClicklistener ( ) {
. <Eadi*Grnup androidtid-"@+td/jekeL"> public void onClick(View v) {
<&adi-aButtt;r andrdid. : ic.z tt + i d,/ pr i a " Gt

android: text= " PIi a " Edi.tTex.E. alamat:{EditTdxt) f indv.iewaVld (R- id. aLamatl;
/>
.andioi d:,i d* " @ t i d/ g+rernpuatl f :
. <RaCi oBu t t on . ,.: ..
' :.r'. .. ....,rr,., r.tid:etl{qla(nama...getTextO.toStrinS.O ) ;
. android :. 1 ayor.it-width* " hrrap-cor:te4 f "
......:....'.]i.anr1roid:t,extF.llFer€J,!puan,,.:
r RadioGr.orrp jekel= (Radiocroup) f indviewBlrlO(n.'iO. je.tre:l
/>
</RadieGr!:up> ewi.tch 1jekel .getCheckedRadiosuttonJdr, , { ,]'",'

</ Table Rorv> caae R. id.pria:

'''-,, - -r.,setJekel {,Pria,');
<TAh1 eRfiw> : .'. : break;
r

,.......'
<t'ffrLview android: text= "efamat : " 1> .
.',.. ,.
. <EdiLfexi android:id="@+id/a7amat" /> caEe R. id.perempuan;
 -f

r. seaJ6kel ( "Perempuan" ) ; Project Name Arrayz

break;
Buitl Target Android 2.3
Application name array2
]; Package name com.wilis.arrayz
Activity array2
Min SDK I
almagjava
pachage com.wif is. arrayL ;
rnain.xml
xrublLc.ic1as8 al-maq t . ',' :ir.l version= "-1 , O" encoding; "uLf*8"?>
priwate String nama="'' ; , \:,t.fvolli
privete Slring afamac=""; '. n I ns : androi d- "http : / / schernas . android - com/ apk/ res /android"
prLvate String jekel="', androi d : 1 ayouL-wi dth= "wrdp-content "
android: layout-hei ghL= "h/rap content"
public String getNama ( ) {
return(nama);
)
<Tahl er,ayout. andro id : id=': A + i d,/ deraj f s "
grblic void setNama(String nama) { and.rojd: layout_width= "f i I1..tr>arent"
this. nama=nama; android: layout -height= "wrap content"
andr'oid : layout-a1 ignParentBottom= 'true "
androic1: sL.retchco}umns= "-1 "
ptrblic String getAlamat{) {
return(afamat);
)
<.1:,1,..1..:ilu*>
pu31ic void setAlamat ($trinE alamat) <TextVi*w android: t.ext= "lvamei " />
thia. alamaL=af amat ,' <gditT{}xt android: id= "@+idlnama" />
< / IdiJ, oRor;>

DuJsLic String gretJekel O { <'lir) i el<O1^1>

return(jekel ) ; <T€x1-vire.ri android; text-."Jeke-Z i " />
I <I,-Li.ir',r.'rt. android : id= "G+ id/jekel ">
+ i a / a r i a'
PqblLc void set,fekel{Stringr jekel) { '""o'.,:::::l-:H:::1;:f;;'.a
tlr:.s . I eke.1_=l eKel ; />
j i .,'i ft
]
< &a d oB
:o
android : fexf=
,tffi*ih. fii! !ff!{! Ji{r ":,
Pel:empuan "
"
"
Tampilan dari aplikasi arrayl itu adalah sebagai
berikut: </Pir(iLt( , :j.rl)>
</?ableRow> : .,

<-. -bl cRow>

Aplikasi Array2 <Text-Vi*'"v android:texL= "Al.amaL;

<Ei,'.
" />
" r rxt android: id= "@+id/alamat" />
</lCllrL.J ''.\>
Pada aplikasi array2 ini kita akan menyimpan
list array inputan setelah ditekan tombol save,
{,"
di mana inputannya akan kita tampilkan di atas
< Br') L t
i'i::
-1Y:1'id : layout_width=
a:rdroi 9-. i 1
- -,-^* L
" fj,1 Jl:aren -,,'
/orm inputan. Buatlah project baru seperti andro-id: layour he j ghr= "i4,,i ap .content
"'-15,".,,
android:text= "Sdve"
"

ketentuan berikut: Gambar 9.1. Aplikasi Arrayl

 *

/> I .,.

</Tab I eLJyo,iL>
<L.ist t,I.i e, android: id="@+idtalmag" publlc void setJekel{S,lrinq jekel) { , , ,

androi d : I ayouE_wi d Lh'= " f i 7 I J)a r ent "

androi d : Iayout. _heigh:= 'wrap_content " l
arrdro i d : 1 a yout_al ignParentTop= " t rue "
andloid: layout*above='t@id/detaifs"
. ... . :..

i
/> raturri(getNamao ), ....

</Fclat ive]-ayour > J

Perbedaan dengan main.xml pada aplikasi arrayl adalah penambahan

id/details untuk tampilan input dan id/almag untuk data inputan nantinya, l't'nambahan hanya pada nilai kembali berupa nama nantinya.
perhatikan tampilan untuk id/almag digunakan coding berikut:
srublic String tostringO {
<l-i st,/ ier android : id= " @+id/afnag' returrl(getNamaO )i
androi d: Iayout-width= " f i7lJ:arent " l
android : 1ayout -height= " wrap-conEent "
android : Iayout*a I ignParenLTop= a
andro-id : layout _abov e= " id / deta i J" s "
@ ilrray2.Java
package com.wif is . array2 ;

Itu artinya inputan yang sudah diinput nantinya akan ditampilkan di atas lnport android.app.Activity; 'ii

tampilan inputan (layout_above), jika Anda menginginkan tampilan hasil lmport android.os..Bundfe; .,,,...

Inlport android. view.View;

inputan di bawah tampilan inputan maka bisa Anda ubah dengan lmport android. widEet . ArrayAdapter i
layout_below. lnport.android.widgel.Button,
lnport android. r"/idget . Edj.aText.; i

import android. widget. Listview;

almagjava import android.widget. Radiocroup ;
import java. util,Arraylist;
IraclEage com.wif is . array2 ;

public class almag { public c1a6s array2 extondg Activity {

private SLring nama="";
privat,€ string alamat=" " ;
Drivate String iekel=" " ;
puJrlic String g6LNama ( )
return(nama);
niiblle vold setNama(string nama) {
thiB. nama=nama;
:l
..,
public String gretAfamat ( )
,. ," ' 'r.etiflr(alamdt),
\ android.
pu&Itc voiA setAlamat{string alamat)
Irist<almaE> model=n€w Arraytist<almag> ( );
ArrayAdapt.er<aImag> adapLer=nuL1 ;
,..,.,,.
:,i."a:. r: -le
public void oncreale(Bundl€ savedlnstancestate) {
{ Euper. oncreate ( savedlnstancestat,e) i.
setContanlview (R. layout. mara) ;
Button save= (Button) findvievrByfd[Rr id. saye) i
save. setOnClick].istener ( onsave ),
tistView 11st= {I:isiView} findView&aId (R.ld, aJmag) i
{ adapt.er=naw ArrayAdapier<elmaS>.(thig,
R. layou! . sjrnpJe*Jjst*i t.em*-l,,
{ model); i .
:

thLs. afamaE.=alamat; list,se.tAdapter{adapter}i,:.: .i.r,,'r'

l :
,,t' r,.. ,,
pulrlti String getJekel ( ) { private View.OnCl ickl.istener onsave=new View.OnClicklistener ( )
returr(jekel);
 publlc vo-l"d onCl-ick(View v) { , rrrr I roid. R.Layout. simple_list_item_t adalah
) rindview,vld (R id' nama\ ;
',ttrk layout yang menampilkan baris yang
:iiii:i:":L:l6:jl;""' l.ilir inputkan. Aplikasi affay2 untuk inputan
alamat= (EditText) f indVi.ewById(R. id. aLamaL) ;
;rr,r'tamz setelah mengisi data dan menge-
r.setNama(nama. geLText ( ). tostring ( ) ) ;
,'li& tombol save akan seperti gambar
r. setAlamat (alamat.geEText ( i . tostrinq{) ); lrt'r'ikut ini.
RadioGroup jekel= (Radiocroup) tindviewByld(R. id. jckeJ );

switch t;ltT'T'"fi'.dRadioBuLtonrd ( ) ) {
liff
T. setJekel ( ''pria'1 ;
break;
case R. id.perempuan.:
r. setJekel { "perempuan" );
break;
Gambar 9.2. Aplikasi Array2
]

adapter.add(r); \pabila kita tambahkan data otomatis data

]
iist di atas inputan bertambah dan dapat
l ,lilihat dengan scroll/lisMew seperti
lrt'rikut:
Dalam array2java di atas kita membutuhkan libraries

irrDort android. widget .ArrayAdapLer ;

inrport java.util . Arraylist ;
inE>or! java. ut.i1 .l-ist.;
Aplikasi ArrayS
pada aplikasi arrayr model hst almag kita didefenisikan seperti berikut: l'rrda aplikasi array3 ini berisi tentang
almag r=new almag ( ) ; li,ostumisasi aplikasi array2, di mana layar
lrrmpilan akan kita bagi menjadi dua tab, tab
pada aplikasi arrayz model almag kita menjadi seperti berikut: vrrng pertama berisi lisf-list data yang sudah
rliinputkan (tidak lagi satu layar tampilan Gambar 9.3. Aplikdsi Array3
List<almag> model=new Arraylistcalmag> ( ) ;
scperti aplikasi array2), tab yang kedua
Kemudian kita masukkan semuanya kedalam list dengan perintah berikut: lrcrisi dengan tampilan layout inputan data, kemudian pada tab pertama
vang berisi /ist-hsr akan kita coba buat tampilan gambar png sebagai
*,",'!*,
H*x: ::"*=i;*;i:H:ii:*Ii::i:l#; lrrrnpilan /rsf beserta nama inputan, apabila dia adalah inputan yang berjenis
:1, .: _ m.de 1, ; liclamin pria akan muncul icon pria sebelum list namanya, begitu juga
;rpabila dia adalah lisf inputan yang perempuan, maka ada icon perempuan
scbelum /rsf namanya, berikut adalah icon-icon yang kita butuhkan dan
I rr ngsinya.

addpter.add(r);
:.:';
t ::
lt.
''i.
**rr
wffi
It'onr untuk tampilan tab yang berisi inputan data almag (alamat manager)
Iconz untuk tampilan tab yang berisi /isr-listyang sudah diinput <rablALayout iirrdro j.d : id:' 6*id,zdeLa j ls I
android : layor.rt-widtih= " f i I J. Jsar ent "
Icon3 untuk tampilan Iist data yang berjenis kelamin perempuan android,: r}'ayout*hei ght= "wrap:con tbn t "
Icon4 untuk tampilan hst data yang berjenis keiamin pria. android: stretrchcof umns= "-i "
.,. android: padding?op= ' Apx't ..
i

Untuk mempermudah kita dalam merancang <'tdb I eFDw>

tampilan lagout xml, berikut kita tampilkan <TexLView android:texL= "Nama: " />
<L,diLTexi android: id,="@+id/nama" / >
hasil loyout tampilan yang kita inginkan. <,/'i'ab I eFow>

<Tab I eRow>
<TextV: ew android: text= "Lfekel i " />
<RadioGrc:i"rpr andr:oid ; idl " @+j d,z j ekel ">
<RadioBu.LtGn 'arLdrpid: i'd= 't 8+id,/]}r-ta "
android: text= "Pria"
Gambar 9.4. Tampilan Tabl
<Ilad i aBr t* t on andro id : id='
r Q+ i d/ perempuan "
android: Eext= "Perempuan "
Dari tampilan di samping, kita membutuhkan
dua buah tampilan layout xml yaitu main.xlm </Padj cci oup>
<,/"T'abieltovr>
dan row.xml. Buatlah project baru seperti <1'ablcRow>
ketentuan berikut: <Texr.','iFw android: texL= "AlamaL : " />
Project Name Array3 <EditIc..{t android: id="@+id/alama:" />
Gambar 9.5. Tampilan Tab2 <,/'l.1h rcP,ow>
Buitl Target Android 2.3
Application name array3
Package name com.wilis.array3 <BuL r-on android: id* " A+id/ save "
Activity array3 android: f"yort-*iAth= ".fill*.par ent" . .'

Min SDK 9
andro i d : 1 ayou Llsight = r. wrap*co:,ffi
: ;", t **r =,sr.re,
main.xml <
/>
/?ablel,aYo.ut>
<?xml versjon= " encodi.ng= "utf *8 "?>
""1 . 0 </.1 Yamel-aYout >
<TirbHo$l xmlns: android= "hl[p: / lschemas ' android, camla[sk,/res/andrr:id" < /Linea*:LayouL>
android : id= " @android : i d t tabhost " .:.r OSl >
andro jd : I ayout-wi oth= "f j I1...-parent "
android: layout-height= "f-il 1 parenc">
< I- i t'r o r La) 'r'lid t'()w.xml
, o-. i"rrt.t ion= ,,vert i cal ,,

androi d: 1 ayout-wi dth= "f j I J-_p ar ent " . Lt:Ldv0u: :

andr oid Iayout-height='fj I I 3a rent " >

: rrI ns : andioid= " htLp r / / schemas android. cqm/apk/res1andrOid."
-
tt,ahwidget and::oiii : id= " 6and::o j d ; j d,/ rabsr" androl -d : 1 aygLrt-wi dth= " f i ll--parent'
' anclloid:layout*width="f,j,f.1-,;:atent" android: IayouL-height = "wrap-conEent "
irndroid : layout-hei,ght-."irratr}*cor:tent " android : ori entat i on= " horizonta 1 '
/.> :' android : Padding=' 4r*'
<l l,rmt'LJyour android: id= " Gandroid : id/tabconLent"
andro.id : layout*width= ;lfil-IJlarej: L * :5]nagqvi.6w indroid,.id=1r.G+id/'iconr ''ri i ' ", ,,.

android : layout " f i J 7 Sarent " android.:layout-width+i."wrap Conteflt!' I .i.., ] r

-height= .aridroidr I'a]aout-hei.ght= :' f i1l--f:arent u
< f , i sr android : id= " E + id/ a lmag "
V ir...w .'.andf o' d : 1 ayout a1 i gnParerltrop= * truo r'
.,'r

android: layout-widtlrr= " fiJ7-s:arent "

'''r'android: layoui*a1 ignFar6-n'teot tom=' true "
android : layoul-heiqhl= " fr f JJ:aren L" . ., .android: layor.rt-marginRiqrhtc " 4trx" ., . .

/>
<Liaeartayout
 androi-d : layoul-width= " f illJarent" I
andro.id : Layou t-he ight. =' wrap-conient "
orientation* "werticaL " public String t"oStringO t
:ndroid: retura(EelNamaO );
.:?exL\i i ru anrlroid : id= - 8+id/ title " I

android: layout-width= " f i1liarent "

android : layout_heigrht= " wrap-contenll "
andf oid : layout.'wei ght= " 1 "
arrdroid: gravity= " center. :verIical " array3java
android: lexLSt.yler i bold " package com.wil-is. array3
. android: singler,ine= " true" ;
andr o id :e l.I ips i ze= " end "
import android. app. TabAcEivj"Ey;
<TtlxlView android : id-" @i"id,/alamaE " inport android. os. Bund1e;
android : 1a).ouL-width*' f i llJarent o lmport android. view.View;
android : layoul*heiglrt.= "wrap-conteat tmport android. view.VieuEroup ;
"
ndroid: layorrt-weight= " 11 import android.view. Layoutlnf later;
..
inport android. widget . Adapt.erview;
android : gravi ty= " eenter*vertical " inport android. widget. ArrayAdapEer;
android : s inol" eI,ine=' Erue."
android:ellir:siz€="end.".., i."
import, android. widget. Button,.
l>
lnport android - widget. EditText,
< /l,i nasrLavout-> Inxrort'android. widget . Imageview i
< . J,i r1". ,: r t,; 7ou t '
import androi.d. widget . ListView;
irport android. widget . RadioGroup;
inport android. widget . TabHost ;
Kita masih menggunakan almagjava i4port android.widget-. Textview;
lmports j ava. uEil . Arraylist.;
lmgrort java.ucil. Ltst ;
almagjava public cLess array3 sxt€ndB TabActivity {.
I)ackage Com.wj.1is. array3 ; . List<;ilmag> model=new ArraylJi st<a1mag> ( ) ;
almagAdapter adapter-nuIl,
rrubl"ic c].ass ..a.Imag { EditText nama=nuI1;
private Stt.ing nama="' i Edit?ext alamat:null i
prLvat€ Suring alamat.= '' "; Radiocroup jekel=6i1.
Driva.te Strinq jekel=" ";
.d u'Jer t -LCe
Dublj.c SLring getNama ( ) { public void onCreate(Bundl-e savedfnstanceState) t
return(nama); auper. oncreate ( savedlnstanceSt.ate ) ;
'setcohtentvieln(R.layout.main) ;, .

pubLic void seLNama(String nama) t nama= {EditText) findViewByld (R. id. irama) ;
thls.namasnamai i aIa$atF,(EditText) flndVieweyfd{R, id. aJamac) i
] j ekelq (RadioGroup) findViewqlrd {R. id. jerel ) ,

publlc Slring, getAlamaE{} { ' , Button. save- {Button} f indvieuByf,d,{B. id,..cel|el i .t,
rdturd{a1,irnat) ;...: :' . i. l

1 . ...r.
save.sdtOflClicklistener{o4Save);] . i: . .

public,iroidl EetAlamaL { StrinS alanat

. ) ListYiew 1ist; (Listviewlfindviwellraf n: ia. almai) ; I
thlE. alamat=afamat;
) 4dapter=new almagAdapt.eril.;r .,. . ..,. , ,, ,.,
list, selAdapter (adapter) - .
Xrublic string get.Jeke1 ( )
.

{
returrd(jeke1 ); ryabHost,TabSpec spec=getTabHost I),.nedlabspee.l LfaSl' ) i
]
spec , setconlent ( R. id . a_lrnag) i
public void set.lekel(SLring jekel) { spec.set.Indicator {,,tisf ',, qetResauiie; { )
thle . j ekel=j ekel ;
 )
1"

.getDrawablei&.drarsable,list) 1'.';' . . ..i

li ..,..
,.

( (spec)
geETabHost ) .addTab ; .cf,'aBe ,al$idQiAdaplter 6ritgtrdlrr'' arrayAdapter<dlmagl { iir ".',.':

i: .spec:getTabl{astO .newfabspec( "tag2") i .

,r' r.r,':, "r" ir' , , ,,EuF6r{arjrayS:ithds;.:R.;layoi}t.rror+r, :aoda!).;:,,irii
'spec.5etC0ntent{R.id.deciajfs); )
i'',.' spec.s,etlndicator('rpetails:', getResourceg( ), ...i rr .. .ii,...',Erribl;lc.Vi6w:,11.9q'1UraW,l:,L4\ plclsitiO$.;t:.:.VieW cCinrze::tvi*rry, l

i.

;'qet'Drawab'1e{Rt'ijiawab1e.a7amat.|..)i. ViewGroup parent) {

. getTabHost ( ) .addTab(spec) ; View row=convertView,.
almagHolder holder=nuII ;
, '. .getTab$ost O .setcurrentTab{0) i ''' ",: .

rrr.,.ir,'ll','.t,r'i.
i,r''1.

I i s t . setonl temcl icklJi s tener ( onl,i s tCl i ck ) ; *fi.,'{ro*aa..rrrX!) { "',

Lal,ggtf nfl-at *i., i.nf lates:getr,ayoutlnf laqiir

I {l}r,i
privats . View. OnC.liqklj"stener-r ons.ave'aaw View. OnClickl,ist€ner,( ) row=inflater. inflate(R.layout. row, parent,
{ faLBg).,; ,'t',,
hrilddi*nar almagttolder I rowi,?
.alm4g .r=ne.w aLmag{} ;' .':.:. ' .: row. setTag (holder) ;
r. sEtNama (nama.getTexL'( ) .toStrinS,(.) l.;
ri1';lggtAlatnat (elanrai.getText
.

. toStrin* {.} { ) .) ; ,,' elee {

hqlde-r'? {almagHold4r) raw'getrag{ I i ":
e*itch (jek*l.setcheckedRadioButtonldO ) { :.. .. ..i.... ,,.,.: . . :. ,.....},..,,...' ''

: 1.4....,i. _.ri..:'-r
a ':.ii l r'i...:.. :.,.
:'::: , r., ., . .:.a,
case R. id.Pria:
r . setJekeL (" Pria " ) ., :,...,,... .. . . .',.'............. . hold-er.po.p,uL*t,errorri:{mqqel .get {position) ) ; i:.'
break; :.::....:,t.. . .. .,,_. r'r:r.t ..,.t,. ...
roturn(row) ;
, ca$C R, id, pere-mpuan r i
r.setJ6ke1 {"Perempuanr: }, ,r
break;
)
Drivate Textview nama=null ;
adapter.add(r); Dri?ate Textview alamat=nuIl ;
) Drirrate ImageView icon=nuIl;
privatc View row=nuII;
'''i

rrriri.ate Adap i ervi ew . onr t emc 1 i c kl,i $ t ener on],i g tC 1 i ck=nelit

Adapterview. OnI.Lemcliik!isterier (.) { th.i6. row=row,.
lrublic void onltemclick(AdapterView<?> parenr,
nama= (Textview) row. findViewByld (R. id. ti tj.e) ;
View..view, j.a! Positionr alamat= (Textview) row. f indVierayf tn. ia. alatit) a ;
,: i i i'i iioni { I$dg|eView) row. f indvii*dByld{R j id. icon} ;
long id) { i
almag r*model, ge! (position) ;
.. ..,,.. . .'volit'papu1!rb6rror$i(a1mas...r) -,{
nama; setfext {r. getNama ( ) } i . nama. set.Text (r. getNama ( ) ) ;
.q.lamai. settext (i. getAlaftat ( ) ) r.

if1r'geEJeke1.{).equa1s(.ipria,)){: . i.,'.,, ': if {r.gerJekel{).6qua1s(,piia,'}) {

- ieorl. setlmaqeRqsource lR..'dfawab1e.i pri;ir) ;
)
e.lse .if (rt getJekgl i ) . eqqaLs (:lPerempuan" ). ) .-{ , ,., ,t.. . ' ..sLsB if (r;:getJekel (,).,-,equa1s {."per:emrru.an.r.,).). { ..
::, . . jekel.check(R,..',id.perempuar) ;.
1."l , I,. icon. setlmageResource (R. drawabl,e . perempuanl ;
l i

.getTabHost ( ) . seccuirent"ab ( 1) i
 Activity : filer
Min SDK :9
Pada Tabr adalah menempatkan inputan dan pada Tabz menempatkan list- nrain.xml
lrst yang sudah diinput, seperti coding berikut:
vcrsion= "7- 0" encodi rg= "ut f - 8,?>
. .:".),."1.1
Tabllost.TabSpec spec=getTabHost ( ) .nevrTabspec ( "tagl" ) ; , ns : android= ht tp : l,t schemas . ardroi d. catn / apk / re s / andra id,,
"
android I ayouL_width= " fi Lljaren l',
:
spec. setcontenL (R. id. a lnag\ ; android: I ayout-height= " fj I JJ:ar ent "
spec. setIndicaLor ( "Ll st ", androi d: orien[ation= "vertica-l ">
getResources ( ) .getDrawable (R.drawable. I isr) ) ; <g,,rt ton android; id="A+id/c|.ase', .

getTabHost ( ) . addTab ( spec ) ; android : Iayou t - wi dch= ' rdrdp- con Lcn t "
android : layout_heiglnL= " wrap_ a on t eu L,'
spec=geETabHost ( ),newTabspec ( "tag2 " ) ; android: text= "C-lose " l>
spec. setcontenL (R. id. deraj-1s) ; <r'.1 '' r-
spec.settndicator('Detai ls",getResourcesO.gelDrawabfe(R.drawabIe.aJam androicl: id= ''(lr idteditor"
anllroid : J ayour widrh= " { i t lJlarettt "
anrlroid: layorrL he'i ght= " IiJ L ltat .'nt "
( ) .addrab (spec) ; android : sinqle1-ine= " fa 7 sc "
""llr"-"".
get.TabHosL ( ) . setCurrentTab ( 0 ) ; and.roi d : graviLY= " r 6p'
/>
. Lr,.i,',)
berikut tampilan aplikasi arrays untuk entry datake-5

liler java
package com.wilis. file1 ;

import androj d. app,Activity;

imporb android. os.Bundfe;
import android.vi ew. View;
i mport android . widget . But ton ;
import android.widgeL. Edi tText ;
imliof,t android. widget. Toast ;
imtrrort java . io. eufferedReader;
j.mport java. io. InputStrcam;
import j ava . io . InputstreamReader ;
import java. io. OuLputstreamWriter;
public claEE fi1el extends Activity {
Gambar 9.6. Aplikasi array3 input Gambar 9.7. Aplikasi array3 list private final static SLring t7Leku= "tlleku. Lxt":
private EciitText ediLor;
OOverride
public void oncreate(Bundle icicle)
Aplikasi Filel super. oncreate ( icic-Le) ;
{

setcontentview (R. layout . ma in) ;

Pada aplikasi ini kita akan membuat sebuah file dan memasukkan isinya editor= (EdiLText. ) fjndviewByld (R. id. edjror) ;
serta kita melakukan read dan urite terhadap file tersebut. Buatlah project
ButLon btn= (Button) findViewByld(R. id. close) ;
baru seperti ketentuan berikut:
Project Name Filer btn. setonc I j ck Li stener (new Button . OnCI ickl,istener ()

Buitl Target Android 2.3 publLc void onClick(View v) {

f i-nish O ;
Application name filer 1
J

Package name com.wilis.filet ));

 'I
Nama -71le yang akan kita buat adalah fileku.txt yang didefenisikan dengan
!
rcding
P@lie woid onResume() {
sulrsr. onResume () ;
private flpal statlc SEring fiTeku=" fileku.uxt";
private EditText editor,.
try'{
rnputStrea:n in=openFi'lelnPut
:
1
fileku ).i
,lalankan aplikasi filer dan isi tulisan seperti gambar berikut:
if (in!=uulI) t
' r.:,,1.,.. lnpul,FlreamReail€( imp=&ss InputstrearBeader(in) ;

Buf,f*::edReader readerr.lie.ir ',, ' ...

strinqf sEr;
StringrnuilCtei buf-neiir Scrl,4gizuilcter ( )i Ini adalah contoh progman
mengekses file di android
w&tle { (str': reader.readl,ine!| } t*
buf . append(str+ " \n " ) ;
j

in.closeO;
ieditorl setrext (buf . tostring{ )} i
,
)
catclr t j ava I io . ri1 eNotFoutrdfi(cept ion'e ) {

Gambar 9.8. Aplikasi filel (mengisi texf)

qarchr, (rhra{+hi.e r) { i

Toast
. ,nakeText ( tlris , "Exceptipn: l+t.to.Strirlg( ), ('lick close sehingga terbuat sebuah fileku.txt, lihat file tersebut
?000) nrenggunakan file explorer-nya eclipse sehingga tampil seperti gambar
. showO ;
) lre rikut:
)
:.'' : ,. r.,',.,. ,,...,....... .. ..
eqblj,c 'rr'ol.d,.rronPaus*,{) {'",.i .. . Froiect Exptorer ffili$k
'surni..oiiPa{ise(}.,,..'....
ii eral
{ .' ..r'...r,,'... .,:..
B{l
OutputstreamWfiter ouE='
.', n€,lr'ioutputstream .riter{openfileolrtpuElfi-leku'' r [3 rom.wilis,filel
0) ii r {J, iiles
'irut . write { e4it'61:'.,getsTrlxt { ) . tostr'iBg ( )}; . $ fileku.trt
out.c-Lose(l; r Et lib
l
eateh (fhrqwable t) { Gambar 9.9. File Explorer aplikasi file1.
Toast
.makefleit.{bbtp; "Exception:'+t'tostsrinq(}
2000 )
. show( ) ; ,lalankan aplikasi lagi, akan menghasilkan tulisan yang pertama yang sudah
\
:
;rnda ketikkan, coba edit dan tambahkan lagi tulisan "Ini adalah
\ l)enambahan baris kedalam fileku" kemudian close dan coba jalankan
;rplikasi dan seharusnya akan menghasilkan seperti gambarberikut.
 ul
I

Ini adalah contoh progfiian

mengakses file di android

ini adalah penambahan baris

kedalam fileku

BAGIAN 11

DATABASE DI ANDROID
Gambar 6.10 Aptikasi filel(edit isi).

Pada bagian ini kita akan membahas tentang database, Android juga
memiliki fasilitas untuk membuat database yang dikenal dengan SQLite,
SQLite adalah salah satu softtuare yang embedded yang sangat populer,
kombinasi SQL interfoce dan penggunaan memorA yang sangat sedikit
dengan kecepatan yang sangat cepat. SQLite di android termasuk dalam
Android runtime, sehingga setiap versi dari android dapat membuat
database dengan SQLite.
 fl
I
I

Dalam sistem android memiliki beberapa teknik untuk melakukan SQtttEkry.

penyimpanan data. Teknik yang umum digunakan adalah sebagai beiikut: thtt :S.h&.::!$s.,. !at:,r!.l.*!:Jsgq-,,,
$d, E:'E:$ri*r l'ffi.,#lel
. Shared Prefences yaitu menyimpan data beberapa nilai (ualue) dalam ..-..
-----'t - l
. :." I
lsry
'
l

._.::.....:.".....-........- I
bentuk group s key yang dikenal dengan prefences. N Ddab6i. Nd &le.t.d

o Files yaitu menyimpan data dalam file, dapat berupa menulis ke file
atau membacadarifile.
. SQLite Databases, yaitu menyimpan data dalam bentuk Dafcbases.
o Content Providers, yaitu menyimpan data dalam bentuk content
prouiders seruice.

Pada bagian ini kita akan fokus membahas bagian databases. Tidak ada
database yang otomatis disediakan oleh android, jika kita menggunakan
SQLite, kita harus meng-create database sendiri, mendefenisikan tabelnya,
index serta datanya. Untuk membuat dan membuka database yang paling
baik adalah menggunakan libraries
Importandro id . database . sqI i te . SQLi teOpenHelper SQBE all Gr*o1,9.?f,1 +6.5

Gambar 1 1.1 SQLite Mozilla.

yang menyediakan tiga metode yaitu:
o Constructor, menyediakan representasi versi darj database dan skema
database yang kita gunakan.
o onCreateo, menyediakan SQliteDatabase object yang kita gunakan Aplikasi databasel
dalam defenisi tabel dan inisialisasi data. l'ada aplikasi databaser ini, akan kita coba membuat database, tabel serta
. onUpgradeo, menyediakan fasilitas konversi database dari database rnenyimpan data ke dalam database. Buatlah project baru seperti ketentuan
versi yang lama ke database versi yang baru atau sebaliknya. berikut:
Project Name databaser
Banyak softtuare Manager SQLite yang bisa diunduh secara gratis, salah Buitl Target Android 2.3
satunya adalah SQLite yang addons dengan mozilla Firefox, Anda dapat Application name databaset
install melalui addons mozilla, SQLite Manager mozilla inilah nantinya yang Package name com.wilis.databaser
akan kita gunakan dalam buku ini untuk mem-uieu data di database setelah Activity databaser
kita melakukan proses pull database, berikut adalah tampilan SQLite yang Min SDK 9
addons di mozilla.
'l'erdiri dari dua bnah .file java yaitu DBAdapterjava yang meng-handle
masalah SQLite beserta fungsi-fungsi yang dibutuhkan seperti struktur dan
sekema database dan databaserjava yang digunakan untuk melakukan
lrcngiriman data yang akan ditambahkan ke database, membuka, mengedit,
rrremanipula si database.

DBAdapterjava
Dackase eo:a, wi1,iS. databa'se1 i
itrE)ort android . content . Contentvalues ;
l[E)ort android. conEent. Context ;
 publ,lc DBAdapter openO throws SQLException
i
db = DBHelper' getwritab,leDatabase ( );
return thi6;
)

public void cfose ( )

{
DBHe lper. close ( ) ;
)

pubIlc longr inserETitle(SEring iskrn, Strj.nq title, String

r"rblisher)
{
ContenEvalues lnitialvalues = new ContenuValues ( ) ;
init.ialValues.put (ffEv*.r.9BN, isbn) ;
initialvalues.put \KEY TTTLE, title) ;
initialValues.put (KEY-PUBLISHER, publ-isher) ;
returlr db. insert IDATABASE-'IABLE, null", jnitial-Values)
)

plrblic booLaan deleteTitle ( long rowld)

return db. delete IDATABASE-'IABLE, KEY-ROWID +
',=" + rowld, nuLl) > 0;
)

publlc Cursor getAllTitles ( )

t
return db.query(DATABASIT-TABLE, new String[] {
KEY*ROWID,
KEY-ISBN,
KEY*YIrLE,
KE.Y PUE TSHtrR},
nu1l,
nuxl,
nuI1,
nul1,
nu11);
i
rxrb].ic Cursor gelTitLe{l'ong rowld). throws SOLExcepLion
(
Cursor mcursor =
db.query (true, DA?ABASE-TABLE, n6!r StrinqIr] .{
KEY*ROWID,
KEY_ISE}tr,
!_ttDt\ t
^E
KEY-TITLE,
Log.iv(?AG, "UpErading database from version " + oldVersion KEY PUBLISHER
+ " f-o " ],
+ newVersion + ", which will desLroy all. o1d KEy RAWID + ,,i,, + rowfd,
daEa'' ) t
rru1L,
db.execSQL('DROp TABLE IF EXISTS tit.1es"); nulX',
onCreate (db) ; nu11,
)
null '
 rf

.,,r:1il6.19g.9 ilr*r,r..hUll). .{
lfungsi open database adalah sebagai berikut:
Lf _,

public DBAdapter openO throwa SelException

:. , ,.,r.f t :
, {
rtitlrrtl mcur.sor, 'dh=DBHe}per.getWritab1eDl.rtabas9i};i..
J. ,, ,',. , | ,: ......,,, .,,,r' ltllt return thia;
;;,1
i - . ii ,tr.l r, . t.
..t.tit,t.,r.... ,,.

I,uJrllq' brrelqart updette"it'1e (Loas rowrd';i' sbrlng i sbn;

string,,']'tlt1'g,;St!:1ns'.prrb1.i.sher.)
:{...,. , , ll rrr' '... ...- , :t:.':.:.. .
l;ungsi insert database adalah sebagai berikut:
coneentvalues,,].args',= trerrr contentYalues{); ,, :. :

: . args .put { KFy:ISaAr,..,..i.q,bn) ;

publti !.ong insertTitte{string isbn, 'st!.{eC t.it1e,..,:St.ring publisher)
'
, , iirg,s.prlt (XEg-qffIJS;rr.,,!if,le) ; .
{ ' " .r'

eiiqsi.put{lffi F,IB-tfS}{g&; publishsr} ; ConLentvafues initialvalues = nelf Contentvalues ( ) ;

.'rq,tirrrl db.. update (.DAr'ABASE*arA"BIrtr; args.. initlalValue.s.put{XEq-fSBfV, isbri),.; ' '.'.'.; .r' r:' '

' -. . :. :.: ". r,.

.

ft.Ef-fiOr{Ip'+ r!;'r + roirid, nrill} > O, initialValnairs..put (fr8'1a_?Jft5, ttt.Ie') i,..:::,1 :,

i initialVelues;iptft (I(gy-PUBI,fSIfI:&,. publisheq).i.... I. . r,rr' r. r,..:

returilr ilb. inter.r. { DAT.ABAS E*TABLE,'i"fir]"t i, initriatval.ue,E );

)

Penj elasan DBAdapter j ava Irungsi delete record adalah sebagai berikut:
Kita membutuhkan libraries yang berhubungan dengan SQLite dengan publ5.C bQsleaq deleteTitle(loag.rowId) ., ... r.... . .,,....,.

{
defenisi berikut:
r€tlrrn ar'aetetlyTy;';,Ti3,
1'1#u"'
*,
irqport'andibid,.da!abalse.sg].iue.sQLiteDataba$e,
ir{aftandfoid;databalsei9q1ltQ.sQLiteopeflHe1pefi.].-' )
LlEroft ardrQidr; da.babar:d.. sgl ite..sQri testateineiiLi r'
lrungsi menampilkan semua record adalah sebagai berikut:
Nama database, uersion, dan table-nya didefinisikan di DBAdapter dengan public Cursor qetAllTitles ()
co ding sebagai berikut : i
rerurn db.query(DATABASE*rABLE, $e* Sir,ingIl t -

fxrblic Etatic fLnal String KEY-ROWID = '-id";

?ublis $tatis fi.n4ltrrgtring KEv*r,sal/ i Iisbrllr;
KEY-ROWTD,
fiEY-JsBlv'
Dublic'itatic f:1a*1''string KEY*TTYLE -'trialetr' KEYTTITLE
. Dr*blLe:.,,.strElq filidl,ti:String. KE'y_.Pu8lrsllE'fi t '(pi"1$1i.sherl'; K'T'L PUBLTSHER}
I

privatc Btatic fiaa]' String TAG = "DBAdapter"; nuI1,

,.

nuI1,
DrLvat6 statlc flurl string DATABASE-NAME = "books"; nuL1,
DriwatE"gtatic tirel strinq DATABASE:TABL.E.='tit1 s'' null);
.}ri*at..Btattc.f'iii'itt..ifrtDgirBaAsg*.yE,8,9.I0}I=.1;...i''.... ]
prlvata statlc flBr]. String DATABASE-CREATE =
.' : . '.1 .,.*'ei:eaE.e tab.le'i.rrt.itles (rid inteqe{.. prim6.r:y., k*y autoincremenE, ' Sementera fungsi meng-update record adalah sebagai berikut:
r.+ ';isbn :Lext rtd|*'.'.,ru11,l lg1tr* ,text noE. nu1l, ..0. .,... .

'. '. + . .l publ ish6r t:ext. ..,nor .nuII

) i .l! ;' ... publLe bgolean updatefitle(long rowld, String isbn,
. ,
.. ,.'

srriqg titJ.e;, stririg pubrisher)

{
:]..*rb1tc.vtild..ohCieate{sQtjteDatabasedbl''l. .ContentvAllrds drgg = ne$ ContentValue$'l ),.;.. ,

t args.put (KEy_ISBJV, isbn) ;

' ..,.'i,,,,,,r.,.,:db-exec$Qll.p-AfAAeSE CREA"I$I i args . put ( Kt y ^TITLE, TiIIE);
-I i...:: ll I args.put(i(Ey_pL(B.t.fSHER,.. pnblisher'i ;',,. :i' . ..'
retum db'update'?*Tfrf,i;'1'?3;,
i'?i,rd, null) > 0;
Database-nya adalah books dengan field-field id, isbn, title, publisher
beserta tipe -feld-nya.
 *l

Pada databaserjava akan kita contohkan untuk melakukan proses :l', i iai r3;iiiri 1}-{;}.l&-I'Ar,*
penamiahan data ke dalam database. . Frcject
' Erplorer.. +iktrdos ;3. . 1* d -
- ,J'- ffi:-#ffi-'*-\-,
Nam< !r;e Oaie
, .. .D$
Databasel java F.ad.rccoirrt
Li com,srox.piro
[:. rom,$ilis,rodingnrEprl
20Ll-01-li
2fl11-01-06
2011,n1-1]
package com.wilis. databasel ; Li rom.wili!.(odingmaps2 2011,01,1!
i:: (om,wrlis,dBtibas€1 1011-tl1-11
* databdler 7011 0l tl
inqrortandroid. app. ActivitY;
-L: --l !- -
boots 5120 2011-81-ll
import android. os. Bundte ; ;1. lib 2011-01-1j
L:.. conr.lrili!.datdbB5el 2011-01-13
public clasa databasel extendE Activity { a] r0n1,wi|s,edrfred 2011-01-11

l!* Called when Lhe activity is first crE&ted- Gambar 1 1.3. Fite Explorer aplikasi databasel
@Override
xrrrblic woid onCreate(Bundle savedlnstancestate) t
super, oncreate ( sav€dlnstancestate ) ,'
setcont.entview (R. laYout. marn) ;
l,akukan proses pull dengan menge-c/ick tombol yang bertuliskan pull a
DBAdapLer db = nen DBAdapLer(thig), lile from device dan simpan di direktori penyimpan yang bisa Anda ingat.
. llrrka SQLite dan buka database yang barusan kita pull sehingga muncul isi
_ | :- .,,

db.openO; ,lotabase di SQLite firefox seperti berikut:

long id;
id = db.insertTitle( [S, sai.,. M"""c;- r,\Grrr*;
1234512345 -rrur"
"
" " rdnmcr 's Rele'ence"
Android PrJlj ,
I ort"rrr"
l-
iil;t"- ITrigger lgok Help

"WashinEtton Fress" ) ; Itre -DCgr, ld'#lmr'ffii s {

Oiredory

-Ld = OD. anSerC'1'at.te

\4 121 l2 l4\" ,
"
(
l**
t.-
-.1,

-l.,] f*rrar,-
, iari"'. * i",
r-----'''- ....'.'-
Linux Frogranr,'ninE ",
" rMcterlrite{1) I
I Lntir lQL
I
"Bandunq Press" ), te_mi:let
l

id = db. insertTi t-l-e (

I
:q
TaL.es -11
I
I ur,,r ' ,^0, ,, .,.
" 098?654321 ,;*, or
I

"
"Anclroid Devlopment l,ife (yclc", |
,: i

"Hongkong Press" ) ; I -
Indatr rul
r 0{Eri irl It-
j-;;;
Run 501 Adr Lart Etrorr rct an Etrcr

db.closeO; I i ,a :bn trtle publi:her

I; lrrr+:u:.rs JAndroid Prognmmelr Rderence l'Earhington Prer

i I tt lsl:arz:i: lLinu Progmmming ]Bandung Press
I losuov;u lAnelrod 0e;lopment Life tytle lHen'ghcnq Pr*:

Dilakukan definisi DBAdapter db = new

DBAdapter (this) ; kemudian Db.open Gambar 11.4. SQLite rlAanager dari databasel

dipanggil sebelum melakukan proses

penambahan data dan db.close setelah
melakukan penambahan data. Aplikasi Database I i
untuk memastikan Gambar 11.2 Aplikasi databasel
Buka Ttle explorer eclipsi l'rrda aplikasi Databaseri ini kita akan menampilkan kelayar data-data yang
database yang terbentuk dan isinya seperti l.ita inserf-kan dengan konsep uidget toosf dalam penampilannya. Buatlah
r o.i ect bara seperti ketentuan berikut :
yang kita tambahkan. Berikut adalahfile explorer dari aplikasi databaser. 1
t

Project Name : databaseri

Buitl Target : Android 2.3
Application name : databaseri
 Package name : com.wilis.databaser
Activity : databaser
Min SDK :9
llbah databaserjava menjadi seperti ini:

databaseljava
package com.wilis.databasel ;

imporE android. database, Cursor ;

import arraiaia. oi, ,,Bulrd1e.iill ' ':' . ,. ll,,' ' i .
,' :, '.1 .

ilrrpar,t and.r6id.wid9et,,,,ToasL;:..'.. . .: '' .: ..,:'

11

' ::' ''l:i i

,,

l*1..calIled when,..'Eha a'ctivity is.,. if,irq'e']':crEai.!ed. .*l '"' , '

'i.::
:,.:
,it
Eoverride ':,,:;
,'i . publ,ic',:void ior,lCreate{Bundle g&vedlasl.atidesteite) {',, Gambar 11.5. Aplikasi databaseli
,:t: FuBer.oncreete(gavedlI1'sta1lcesbate.)'i.' r, "r'' : ' '

, setcontentview {R; layquq .main,) ; :l .. rr . .lr' r',.,iri.rli ' .. t

: .'

I'ada aplikasi databaseri di atas adalah menampilkan seluruh data, apabila

.i ,.'.. ..:.i , . .
ingin menampilkan salah satu data adalah mengganti fungsi menampilkan
db.openO;
, ,''-. . cur'gor c'*i db;.getAlltitles O:i t . '.1 , . :.. ' ' semua dengan fungsi menampilkan salah satu.
. :.i' .if'(c.inov.eroFirs!-('.)' i I,.,.. .....,:.i:,i ,.rr r : .'
{
Itungsi memanggil semua data
DisplayTit.le (c ) ; clb.open();
) whil"e (c.moveToNext() ); ,,,cririior,.:q r db.,geLAltfltl*"(t ;, :,,
) ' ,if '(.c:movet6!'irstO lii,, .' .,'
db.closeO; t
do{
.. . ..,:,,.,,:,Di6playTille
\.cl ;:.
., .,,.,:,.
pubJ"ic..void DisplayT.itfe (Cur66r c)
'i : ) while (c.moveToNext O ) ;
'l )
Toast.makeText (this, i
db.closeO;
"id: " + c.getstrinq(0) +'\n' +
"lSBN: " + c.getstsring{1") + ll \nn "f .,i,.
.i . *?ITLE.: '". +.c;getS.tring12\ +': '!\nt +, 'i' fungsi memanggil salah satu data
i.. "FUBLISHERT " + c.getSlring,(3),, .. .r. - rl i i

Toast']]ENGTi{*LON€}.showl); . :.'l' r",,',r ..,..., I ' db.openO;

) .,,, ... ,. e:frs,E:i':.c,;rrt.,,'tlb- - T'f- 6 {t$-} ;.rr,,r:
. ,i'r,il:::
_ ..,,..,,,,..,,.,,,.,,,,., , . ,.,.,,.,..,.,.....

)
lf (c.moveToFirst O )
G].Be
Program akan menampilkan isi database ke tampilan layar dengan konsep ,',..',:,:,.,:;::,':,,'.,,".:..{d&s,Slt;Ea:kefextjt}it,i)r',.,r.,.,1llq Brlt:1e found,,
widget foasf dengan satu per satu data seperti gambar beriktu: i ..rt,,;r:.'.,,iiitri , .iitilt,, i t,ir,.iri it ,,,,r,i i,:t'r:,rl,u, .
fOaSL . eEfBtfL.IiOMI . show ( l ; r

db. close O ;

I
 -f

Toast, LENGTI{_LONG) . show( ) ;

Aplikasi databasel ii I/---------
db.closeO;
Pada aplikasi databaserii kita akan mencoba melakukan update data di
database, yang kita ubah adalah data buku (rzg45tzg4g, Android public void DispfayTitle {Cursor c)
Programmer's Reference, Washington Press) menjadi ((tzg41tz141, {
Toast.makeText {this,
Android coding Reference, Jakarta Press). Buatlah project baru seperti "id: " + c.getSLrinq(0) +
ketentuan berikut: "ISBN: " + c.getstrinq(1) + n\n" +
Project Name databaserii "TITLE: ' + c.geLstring{2) +."\n,, +
"PUBLISHER: " + c.getslrinq(3),
Buitl Target Android 2.3 Toast . LENGTH*LONG) . show ( ) ;
Application name databaserii )

Package name com.wilis.databaset

Activity databaser
Min SDK I
ubah coding databaserjava menjadi seperti berikut:

Databaseljava
package com.wilis. databasel ;

import android. app. AcLivi Ly,'

import androj d. database. Cursor ;
import android. os. Bundf e,'
imporL android. widget . Toast ;

public class databasel- extends Activity {

/** Called when the activity is fjrst creaLed. +/
Goverride
public void onCreate(Bundfe savedlnstancestate) {
super. oncreate ( savedrnstancestate) ; Gambar 11.6. Aptikasi databaselii
setcontenEview ( R. layout.main ) ;
DBAdapter db = new needapter(this);

//---update title--- Lakukan pengecekan kebenaran data dengan cara melakukan p.u/I database
db.open(); schinga isi database kita adalah seperti berikut:
if (db.updateTitl€ (1,
-id ilbn trtle rubtlshel
,iiliii#Ht::?, ;"'"'"nces " i1 lua:l*rs lanaroia rr0{ramrgiii.t*1,1 $ashlnggq ir*s
Toast .makeText (thj s, "Update successful.
Toast. LENGTH-LONG) . show ( ) ;
"
tl
t_
ll:atrl+s lLinux
programming Sandlng Prels

e1 se lO*AISS*3i1 lAndr*idSevlopmentLife[yrle Honqkong Prers

Toast.makeText(this, "Update failed. ",
Toast. LENGTH*LONG) . show( ) ;
id isbn title publisher

//--irelrieve the same title to verify Itz:+st::+s lAndroid coding references llukrrt.
p,.,,
Cursor c = db.getritle(1);
if (c.moveToFj.rstO ) ls*lrttn+s lLin* Programmin,g lBandung
presr

DisplayTltl-e(c); f0fffns+:A lAndrnid $evlopmeni Life Cyrle lHongkong Fress

else
Toast.makeText (this, "No t.iLle found" Gambar 11.7. Database sebelum dan sesudah aplikasi databaselii
 I

dan apabila anda mau menghapus salah satu data bisa menggunakan fungsi
berikut:
db.openO;
if (db.deleteTitle (1) )
Toast..makeText (thl,a, "De1ete suqqe$sfu1
Toast . LENGTH-LONG) . show ()
else
(tlilg., ' 'Da1etdr fail-ed. ",
Toast .Iuakefbxf
Toast. LENGTH-LONG) . show ( )
db.closeO;

Aplikasi Database2
Pada aplikasi databasez ini akan kita rancang aplikasi yang akan menyimpan
alamat seperti pada aplikasi arrag, tetapi dalam hal ini kita kan menyimpan
dalam database. Buatlah project baru seperti ketentuan berikut:
Project Name databasez
Buitl Target Android 2.3
Application name databasez
Package name com.wilis.databasez
Activity databasez
Min SDK I
Inputan form kita terdiri dari nama, alamat, jenis kelamin. Kemudian
tampilan dibagi dengan z tabulasi, tabulasi pertama adalah list data yang
sudah disimpan dalam database atau yang sudah diinputkan, tabulasi kedua
adalahform input data yang akan dimasukkan dalam database. Dibutuhkan
beberapa lay out xml sebagai berikut:

layout/main.xml
<?xml versior,= " 1.0 " encoding= "utf-q "?>
<TabHost }(In1ns:android.='htLp://schernas.android..com/apk/res/android"
android: id='@android: 7d,/ tabhost "
android: layout-width= " f i 7 TJarent'
android: layout-height= 'fjl lJra rent ">
<LinearLayout
android : layout-widt h= " f i 7 f J>arenc'
android : layout_height='fill-a renE'>

. android : layout-width = ' f i 7 7J>arent '

androiii : layout_heighE=' wrap_cantgnt "
/>
<Framelayout' android : L d= " Bandro i d : id / t abcont @n t "
android : layout-width= " f i T TJtar ent.
android : layout_hei g}:.t = " f i 7 TJta r ent'
 <l,islview android : :-d=': &+ idl 8Tmag'
android : orj-entattone "l.orizontal "
android : Padd ing= " {P.Y' android :I ayout*widLn= " f i I f 3.arent "

<rmaq*Vie\,r android : id* " G+idlicon" android: layout-heighL= " wrap-contenL "
android : 1 ayout-rnridth= "wrap:-conEent "
android: IayouL-heighL=' fi11 Jarent' " < lLinear;,aya1r!>
android : layout-:al ignPa"entTops " Lrue "

1.
android: 1 ayout-aI ignParentBottom= " true
androi d : layout-ma rgi nRighE =' 4px "
"
:
<Tablelayout android : id='A+id/detai-1s
$3::1$;1ffi*{:i}ll-tf,!u"'*"',,,
"

android: stretctlcolunms- " L, 3

<LinearLeyouL android : paddingToP= "lPY'
android: layouL-widthi " fi1l-$arent "
android : layoul-heieiht='rwrap-conLent "
<'[:]b,cP,)t>
android: orientat ion= "vertical " <TexLVie
. i-...
android': lext= "Alama-; "
<?ext.view gnd53i-d : id= " @+.id/t iLle'' android : PaddingRight = "2Px "
android: layout*width= " fi11l>arent "
/>
"
<Edi t TexL
il3::i3 ; 13il:l:H131!1.11"n-"o"""'
' android: grivity= " cenrer*vertical " ' android:maxwidth."1:40sp"
android : LextSLYle!."ho1d" '
/>
android: singlel,ioe= " Lrue " <textYiew ..
irndroid: ellipsi ee= "end'
i...

1>
android: texL. "e.Lamari "
android : paddiaglef ti "rpx "
< I'cxLvi cw anctroid: id=" G+id/aLamat" andrr:id: PaddingRight=- "?.,l:X "
randroid: layaut*width* " fi1I-:raient. "
/>
android : layout-height'='t wrap-contsent "
<tr1i L r'ex.L
android.: layout "1"
android : id= r E+ idl aTamat "
-weight=
android: gravi Ly= " center-vertical "
andro id : maxWi,dt.h= " 1 4 Osp "
android: singf"ii.t"= " true "
android:el1iPsiz6="end" l>
</Table&ow>
/> <'Iab1ei1r:w>
4 lLinearlalrouL>
<TextVier.r android;text- "f14?e: " ./>
{/ r,ined.rl.ayouL> <RatlioGroup android r id.' @+ id/ j ekel il>
<Radiogr"rlton android: id1 "e+id/pria*
android: text= "Pria
layout-land/main.xml />
"

<Radi oBu i I 0$ aridro id : id= j d,/perempuan,

<?xnrI version="'l .0" encoding="uxf -8"?> .ir. 'andr.oid
"6+

<rabttosi xmins:androLd=,,|tttp:/fsc.lremas.andraid.com/agsl</reslandroid" : t.exE= {Peir.enpuilnl

android : id'= " @andr o id : id,/ t abhos t: "
android : layout-width= " fj I lJ)a renc " </Radiocroup>
andro id : Iayout-height.= " fi l -Ziaren t "> <?exl.View r .

<Li nearl.ay'o'i.t android:Lext*1lfFr;r'1 ' ' r.'.'

android : orientauioix:'I/ertical tr' ;andrqld ; paddi os.{,e f t * " ?.p',. "
android: layout-widlh*"'fiLLJtarent" />
..
j n ed rl-avou
android : layout*hei.ght= "fi J J3arert "> <L L

<Tahl$i dget android : j.d* i' @ar:droi d : i d / t abs "

android: layout-widt:h= " f if f Jtaxent " arrdroidl1ayout-width="fj-11--paren.|,,;;,.
a.ildroid:layout-heighti: "!trap-co,tent"' , . .i.:

1> android : lavout*heiqht= "fill-:ralffi"tu,

<Fra:nelaysut andro id ; id= " Eandroj d : j d,/ E abc c'nt en t " orrentaLion=,rrerrica:. l
anaroiA, l"ayout-vridLh= 'fj i-iia-irenL "
andrQid : layout-height* " fj f JJ:arent " <ualitText android: id= " G+ id t hP

:tin*arlayou!
:.' android: layouL_width= "fi 1J3 arent "
andro id : 1 ayout*lreiqht = " fj 1 f--paren C " .rrdroid : scrollHorizontally= " f a ! se
 *l

,i..r iiir'ri,.,riii.i.arrdro.id.l'lt6youL::width=
"fi113ar9nt" .'.: .,i:. '
package com-wi1ls . database2,;
',ii r irii'.',r i i andrqid I rleyoue heighL*
,,
,i.*_rap_con.f ea.L .1 ..,
i,,
ttnport android.cont€nt,.Contexi.;. ,.. ,,.,...
.'i., . i ...
ttcn ,erid.rQid;i.d*rt.d-+idlseve.ir.
.-..::.t <.F Itry)ort android. contenf . ContentValues ;
:., .,) . .android : layou!, iwidthi f il J-J.arent
., ,, ,,
lmport android. database. Cursor ;
lmport andro id . database . sq1 ite . SeLi teopenHetper ;
.
..". . ,:.:: androidr.i laypuL*hqight; ',wi4p*.contenL-,1
..' . . . l
lmport android. database. sqliEe. SeLiteDatabase;
arid'oid:t'exb*".se'e,',.l.il.lii.i.
l>.......i..i.l,'l..
<,/Lined.rLayorr> c1e35A1magHe1perextenda'sQI.jiteQpenHe1pei{...
. ,-, ...i . . rr:<ltaJfl:eRbw>r, .,t.. . ......,., .... , ...., ...t r:,r -.r . -. priwate s!{ti.c. .f iaaX. Striflg DABABA,SE*NAI{E=, addiessmanager
,,,, :.. . db,' ;
. .:.,,1,,
,.<lY4tjl.eltsyr:ul> , ., .. : :.. :.: -::. .. ,' . , pf,:ivate static ftrrql iat SCI{EMA*VERSIOff=1;

</LinearLayo':t-> pubLic Almagl{e1per{Cootex! cooLext} t. ,, .,..

< /'i'a bi{o ! t > swrer (cont€xt, !&fi{.BA,5g;}IAlUE, . null, ,SCHEItrLIIEASJOAr) ;
)

menu/option.xml iJrr.r,,r, ide

<?rcry1version=,1..0,|'encodi'ag=l1iiif_6,,?>.l
public va,ld qncreate(sQr,iteDatabase db).. { ' , ,
db.execSQL(,CREATE TABLE almag (_id INTEGER pRrMARy KEy
<menu xmlns : andro id= " ht tp : / / schemas . and.r o id. com / apk/ res / andro i d,, >
ATTTOITNCREMENT;.:.nama TEXT;i alanae TEXT; jdke1. TEXT, r, hpi.iTEXr) , . ) i
'r:,.i r'rr-<iL*m .androidi 1d- "6iid/tarasr I r. 'ir " ir'i ' ..

" '.. ranilroid: icon= nAdfAwAllfel Loast " ... . :: .'.:'

',1(r.'e,r.re
/> public woid onUpgrade(SeLiteDaEabase db, lnt o]dVersion, int
<i rom andro'i d: id= "t?+id/run,, !lewversion) {
'.,'... .r..'r , antiroi{: lille= ",Run .Iorgr.,faskr ,r ..r.i.ri
,/ ' no-up, si n..c c ,ll rr,rr i::e ca lled un,- , i 2ncr schema
. , . andfoid: icon*:,rBdrawiiltle/run,t ,
/. veision exists
)
< /menu>
rrublic Cursor gerAlll) {
Dari hasil xml di atas akan menghasilkan tampilan seperti berikut: retura ( gdtReadabl eDatabase ()
..rauQuery (' gELECT _id.
nama, alanriat. jekel, hp fRO$ almag ORDER By ndma " ,

nu1l) ) ;
1

Dubll.c vold insert(String nama, String,alamat,

Strins jekel, St.ring .hp) {
. Contentvalues cv=ne*, Contentvalues O t

cv:put { "nama"., nama) , ., ...i ..,

iv,put("a14ma1"'; alamat) i .,.

qv. put ( l' j ekel " , j ekel ). ;

getWritableDaLabase (.) . inserl ('ai&aqi', lnar-ne,', cv) ,

)

Gambar 1 1.8. Tampilan tabl -2 aplikasi database2. pulliq St.ring getNama(Cursor Cc) {
retrirn (c. getString ( 1') );
) " ''
AlmagHelperjava yang berisi fungsi utama SQliteOpenHelper adalah puJrlic String' EetAlamat (Cursor c,.). i
retuiE{c. getSerlng(2) ) i.
sebagai berikut: )
 -l
i

public Slring geE,.Iekel(Cursor c) {

return (c. qet.string ( 3 ) ) ;
!

public String getHp(Cursor c) {

return (c. getString (4 ) ) ;
)
]

Defenisi database dan tabel serta sturuktur tabelnya didefenisikan dari

bagian coding tersebut.
prlvat€ statsLc final String DATABASE-NA&E="dddressmandgeL.clb" ;

nrLvate static fLnal lnt SCHEMA*VERSION=L;

fxrbLic Al.magHelper(Context contexi) {
EUT,A.! (iONtCXt , ,DATABASE-NAME. MT].l , SCHET,T-C_VERSIONI i
I

.il.;r,+r: r j tle
prrblic vqid onCreaEe(sQliteDatabase db) {
db.execSQL('CREATE TABLE afmaE {-id INTEGER PRIMA&Y KEY
AUTOINCREI{ENT, nama TAX{, alamaL TEXT, jekel TtrX?, hp TEXT) , " ) ;
)

Nama database adalah addressmanager.db dengan nama tabel almag yang

berisifeld id, nama, alamat, jekel, hp sesuai dengan inputan yang akan kita
lakukan.

databasezjava
package com.wilis. database2 ;

irnport android. app . TabActivity;

inport android. content. Context ;
imlrorts android. database . Cursor;
import android. os . Bundle ;
imlrort android.view. View; getTabHost ( ) . addTab ( spec ),
in{rort android. view. Viewcroup,'
l-ng>ort android.view. Layoutlnflater; getTabHost. ( ) . seEcurrentTab ( 0) ;
iryprt android. ividget.Adapt ervi6w,
import android. widgeL . CursorAdapt er,' list . setonltemClicklistener ( onl-is tClick );
lInt ort android ..qi{geg - Euttoq;: ]
import android.widgeE. EditText ;
inrport android . widgeE . hageview; rd',vet il )e
LnE ort android. widget . Listview; public void onDest.royO t
inport android. widget . Radiocroup; super. onDes L.roy ( ) ;
funport android. widget. TabHost ;
import android. widgeE. Textview; helper.closeO;
)
public cLasa database2 e:rts€Ed,B TabAcLivity {
Cursor modef=nuII;
AlmagtAdapter adapter=nuL1 ; private View. OnCl-icklist-ener onsave=new View. OnC I j ckl,istener ()
EditText nama=nu11;
 publie vatd onclick(Vieli v) { rl()ver r i ic
SEring t14)e=nu11; View newviet*r,(Contexi.. ctxb, .Cursor c,
I>.Ub1.ic
,, $wirch ( jekel . setcheckedRadioButtonld(.,) ) {. .' .,,,:.'

iViewcrollp'r, gaid0t) {
case R-i.rl ,pria: .,ii'
Layoutlnf leler: inillat errgbtlayout Inf later () ;
. r vieid.iow=iefliiter,irfla'b6{R;layou!"rolrr, parent,
..,,. ,.'.: .. '..,-.breah; . l

false );
aas€ R.id.perempuani ldpr holderlnew
.tt. typei$Perer'!"rpuan"; .
AlmagHo Al.litrdgHo lder ( row ) ;
:. i , -break; .. ..,
. .. : .,.i
j
row.setTag(holder) j
:,,',' fatuf.tr(rowi'i . i",r.. .,1,,.'', ... i., ...
i

helper. j.nsert ]
i. {riarna; getTexL ( ) . toString { ). alamat ,.getTex! ( } ..toStri 1
ng ( ), type, hp. gerText ( ) .rostririg ( ) ) ;
model.requeryO; .

Etatic claEE AlmagHolder {

1.
ti pf.ivate Textview.,naJla=nu11r.
..
,

private Adapterview. OnI E.emCI i ckl,i stener onl,i s t C f ick=new .,':.....'!rfivaL€Textvie.wd1ainaL*nu11;i:.

. , privale .lrndgevf*iw iion=nu1l.;.. '., , .,. i.
Adapterview.OnILemCf ickl,istener ( ) {
. public void ofrlfemClick(Adaptervi€ir<?> parer:rt,
, View .view, int poEition'; .,'r '1,.,
Alpag}'iolder (Vie\rr rOw) { .. .'r .. , r' .. ,.

. ,i:. .,..'r.,,'., ,.,... nama- {?extView) row,.f indViewByld (R,.id. Lit-le).;

moddl.movaTopositiqB{Fcisition) i .. I i.i' ' - I
na$a. setText {he1per. geLNama (mode1 ) ) ;
ir.,i '1'1'1.',1,r,, .iilaarat; (Textview) row. f indviewByld (R. id. aJanat) ;
.,,.i...,.., 19;ar.r,=(Im@q.eyiery)row.findviewByld(R.id.icon);
alamat. seftext (hailper. geielamat (mode1 )) ;
]
hp, setT.ext {helper i get}Ip (model } ) i

if {helper.getJekel (model) .eguals( "Pria'' ) ) ' ' :',,. .1,. .',iaoid'popilLaterFrofi(.exrrqgr c, Almagl{elper hs}p6r} {
, {
.,.i...i .:.i.. i r,,,, . .nafiia,setrext(helper.getNarda,(c) li
jekel . check (R. id.pria) ; : i'., "''..,'.',].'alaiidt.eetfexI(helper.getAlamat(c)I;
]
else if
(he1per.getJeke1(mode}}..*"'-j;i;f:Ifl::i;}lij.'pe.*,,u,.,u,), ''
i:.. . icon.sqtlmageRlsource(R.drawab1e.g>rigl;
t :ll .,
)
,.., : a]laa if '(helper.get.lekel ('c).e$ral${';perempu4n")
. i

seETabHostO .SetCurrentTablll iqqn.F,etlnageResource(R.drawable.per-eritlu4n)

] i, i .., . . :.: -.,.... -., ,,. ....,,..

t. )

1
,,EIaEa AlmagAdapter. ..exteirda C.ursorAdaptei i{. ...
' AlmagAdapter(Cursor c)
..

{ : .:. . . . ., .,:
.,:::.r,ll -.,..:iitii.. .: :.:.:.::. .
.. euper{database2,thiE, c) i. :,
)
.lalankan aplikasi dan inputkan data seperti pada gambar berikut:
.....l.i.....''''BsVerric1e...
pubLic woid bindview(View row, Context ctxt,
Cursor c) {
AlmagHolder holderi {AlmagHo}der } row. gelirag ()

holder.populaEefrom(c. heip.er) ;
 lable |ndu lim Trigger Tgris Hdp

elD5$$r,*iffi'ffilmr'ffii *'e{iory , N*S:{ttjl.!r$_.,:]

tructute , Broue & Search [.e.ute 5QL DB Settrnltri

Enter5QL Select I od{alytau,pBiatmn i CreatElAlter ] Dop I Rdndx i PRASMA

lELttT'FRO[,lanrag

H
lNaruttrJin Safaai ltr suaiim u... ln,;, loar:amtosoo l
Ituutu ltt.Harapan 76 F...lPerempuan loas:ttol+rr,t I

lR.towitliun llt,tr,,terdeka 76,,, lPria loer:rgc:+t:+ I

Gambar 1 1.1 2. SQLite manager addressmanager.db

Gambar 1 1.9. Aplikasi database2 inputdata.

Lakukan proses penyimpanan dengan menge- Aplikasi Database3

clrck tombol save, inputkan dua data lagi dan
ini akan kita rancang aplikasi yang fungsinya sama
l';rda aplikasi database3
kemudian data di-saue dan tampilan list akan
, k'ngan aplikasi databasez, tetapi tampilan yang simple dengan
berisi nama tersebut seperti berikut:
rrrcrnbutuhkan aksi tombol menu di keyboard. Buatlah project baru android
lt'ngan ketentuan seperti berikut:
Lakukan proses pull databoses dan buka
r

Proiect Name : database3

dengan SQLite Manager mozilla seharusnya
Buitl Target : Android 2.3
akan seperti gambar berikut:
Application name : database3
Package name : com.wilis.database3
Frqect €xplorer [fu$lq@ffi(\; Activity : database3
m,€ * Gambar 11.10. Aptikasi
database2 listdata. Min SDK i9
r. 14 com,wi[s,datobasel
r L:. .om,Bili!,dotEba5d l'arnpilan yang akan kita buat adalah seperti berikut:
J L Udrdud!ra
addressmanagrr.db

, r-t irh

: li. com,rvllil,edittert
:i com,rv lis,Iilel

Gambar 11.11. file explorer Aplikasi database2.

Setelah Anda lakukan proses pull, buka hasilytle proses pul/ dengan SQLite
Manager, dan akan menghasilkan seperti gambar berikut:

Gambar 1 1.1 3. Rancangan aplikasi database3.

Layout yang kita butuhkan adalah layout/menu.xml, layout/row.xml
layout/detail_form.xml, layout/row.xml dan menu/option.xml. " r,J: I iv.,L;
-rrr Lns ; android='f h!tp: / / schemas . android. com/apk/ reslandroidl
android: layout_wi{Lh= " fil.I__parent "
layout/menu.xrnl andro-Ld : I ayout-hei ght = " wrap-cont.ent "
<?xnl wersion- android : orient.aLion= " hori zontal "
"-1- 0 " endodiiig; l'.uff -$ "?>
<LisLYi*rir xnlnsrandroid=".hEtp;1/schemas.a]ndroid.com/apklr:eb/android': android : paddinq= '4p* '
android : id,= " Gandro ia, ;a I I i s t'
android : Iayout-widt h= "fi-l f J)arent " <I:nageVielv android : id= " @-+idl icon "
and ro id : layout-widCh= "wrap-content "
android : layou t-he i gh|-= " f i I l Jsar ent "
andro id : layout-height=' fifljarenl'
/>
.android : layout*alignFarenltop;1 t.rrta'1. ... ,

: ..' iindroid:layout_alignParentBoiLom;ttraitei. ir

I ayout/ detail_form. xmI android:layout-marginRight="4px'ri'.' .. ..:

-Td i-) I +LayouL

.1, i nea r Ldyou t
>sn I ns : andro id=' ht tp : / / schemas . andro id . com/ apk/ res / android " andf.oid:layout-width='fi1l-parent"
,...
..:.,,:,.:.. .

android : layout_width= " f ilfl:arent' i androidal-ayolrt*height.-i,turap_content'

andro i d : 1 ayout-he ight = 'wrap-cont.ent. ' .. ,. andioid: orient-aLion=.'verticrl-" '., , ,. 'l' i '

{TexLview android : idiil, g+id,/ t it le "

]ruo, u*o* . andr o i d : 1 ayout -:wj- dth='i,.g i lrlOargn
.
g,'r'l rr,

sTsxtView,android:'text?''Nama:,i.l>l. androi.d : lilyout height=I,Ufap;,,.content,l'

<EditTexL android: id="G+id/namau /> . android: layoirl*weighti*1l!r'. ,.,. 'i -,r..

< /TableRow> .iil.'.

android I gt:avity= ".cenLe} v4rtleal.!.':
<Tabl eRoid> android: Eextstyle="bold"' ,:'.: ' : '

<Textview android:text="Alamat: " /> .,, .i . , android: singleli$ei.ir.Erue!l i...1

.,EdirText android:id="G+idlalamat" />

< /TaIlleRow> />
<TableRow> ..' <Te*LViewandroid;.id:1g+id/alamat"
<TextView android.:text.=",Jenis Kelamln:' /> android : layout*wiftf: l f i l lJlarent , r' r.
<RadioGroup and.roid: id="@+id/jekel'> android : layout_hei ght = " wrap_content't
' . android: layout-weight+iti" r'r'
' android: t€xt6 ltria !
.,ii
o
...,
., .ti' " :l '
:. . andrqid: Era.vity.riceflteLvertical "' , .,
android : singleLine=' true "
<RadioBut ton android: id='G+id/perempuan" .android:ellipsize-'end\'..,' ".,... .,
.,..r ,.'.,..:r. .t, ,'. .,, air.droid:text*lPefempUan,| .,,. .t:,
i.' ".,......
/> ../ Linedrl-ayout .

I inearLiyoirc>

</TabIeRow>
<TableRow>
*$*XtView aadr.Oid.r.L;qxLt !,$p,:.r., i,I,: rt:. ..,. a :"::.::,;:.:.,'.
menu/option.xml
imtrt?stE ap.dloi4,: ridr.:,9+tdlrhp)r,r :,' I'1:. ;,,,, 1,,,r,, . ? ;r r version= "-l . 0" encoding="utf -8"?>
'dndioid : gravitlE' Eop' . ., ru xmlns : android= " ht tp : t / schema s . andro id. com./ apk / r e s / android " >
< i Lern android: id= "G+id/add"
android: lines= " 2' android: tit1e= "Add"
i iliiiiidibi n]..s crO f f l{orre(intrl.llrli ll f eli9a.
.: ::, .,t,lttlt tr:' tit t
android : icon= " @d rawabf e / i c-menu-add'
android : maxlines= '2 ' /\
IJ
android : maxwidth=' 200sp " . /:.+n t>

Kita masih membutuhkan AlmagHelperjava yang berisi fungsi utama

SQliteOpenHelper adalah sebagai berikut:

ir.....'tll,ili,ti',f >-tiilt.iiti'. t,.r:l

;/r;ri;adnd.i,,
 *f

cv.put ( "jekel", jekel)

AlmagHelperjava . cv.put('hp'. hp);
r

package com. wif is. daLabase3 ; gelwritabLeDat.abase.() "

inserl*{ "a1mag", "nama", cv) ;
ir$prt android. contenL, Context )
;
irry>ort andro j d. content . Contentvaf ues,' publ"ic voidl update(String id, St,ring nama, String alamat,
iqrort android. database. Cursor ;
import android. daEabase. SQLExcepEion; String jekel, String hp) {
iryort android. database. sq1 ite. SQLiteopenHelper,' Contentvalues cv=new Contentvalues ();
import android.database. sql ite, SQLiteDatabase; String [ ] args={id};
import android. database. sq1 ite. SQLi teQueryBuilder;
c1a6s AlmagHelper extends SQLiteopenHefper {
cv-put ( "nama", nama) ;
private EtatLc final String DATABASE-,iVA{E='addrescmanager2.db",' cv.puL ( "aIdmat." , afamat) ;
prlvate static finaL i.nt siugqe-yERsro /=l; cv.put ( "jekel", jekef) ;
cV.put("hp", hp) i
ixrXrl,ic AJ"magl{elper {Context context } { getwriE.abfeDaLabase() .update( "alrnag", cv, "*TD=?",
aup€T (ConEexE, DATABASE_NA}IE, NuII, SCHEMA_VERSION\ ;

args);
lJr''r':.,, )
xrublic void onCreate(sQliteDatabase db) { public String getNama(Cursor c) {
db.CxeCSQL(',CFEAT}, TABLE AIMAg (_id TNTEGEF PRIMARY KEY
returrr (c. getstring (1 ) ) ;
AUTOINCREMENT, nama TEXT, alamaL TEXT, jekel TExf, hp TEXT);");
)

lJ,.r ,,. r 'de

public SEring getAlamat (Cursor c) .{
public vold onUpgrade(SQliLeDatabase db, int oldversion, int retur:t (c. getstrinq 12) ) ;
I
newVersion) {
',rl nc*rn, since r,r,j. l.l not he call**d unlil :nd s,rhe:u
' veii:in-. ..ri.:-r: Dubtic String getJekel{Cursor c} {
j return(c. getString (3 ) ) ;

publtc Cursor getAl1{) i. ptrblic String getHp(Cursor c) {

returrr ( get Readabl eDat abase ( ) returfl (c. getString (4) ) ;
. rawQuerY('SELECT -i d,
nama, alamat., jekel, hp !'ROM almag ORDER BY nama",
l

nul1) );
, DetailFormjava
public Cursor qetByld(Strinq id) { package com.wilis. database3 ;
String[] args={id};
import androj d. app.activity;
impore android. database. Cursor,
. rawQueiy('SELECT *id, import. android. os. Bundle ;
nama, alamat, jekeJ, hp FROM aLmag WHERE
-1D=?", inport android. view. View,.
import. android. widget . Button ;
args) ) ; import android. vridget . Edi tlext,
) irnport android. widget. Radiocroup,
import android. widqeE. Textview;
publLe void insert(String nama, String aLamat,
pubLic claE6 Detail,Form extends Activity {
String jeke1, Strinqr hp) { Edat.Text- nama=nuI1;
Contentvalues cv=f,r6't{ Contentvalues O ; EditText alamat=null;
EditText hp=nu11;
cv.put( "nama", nama) ; Rad.ioGroup jekel=nul1 ;
cv.put { "a-Iam"rL " , af amat) ; AlmagHelper hdlper=nu11 ;
 q
String almagld=nul-L; t)ry)e= " Prla,, ;
break;
i"L\! i" r iae case R.id.perempuan:
public void. onCreate(Bundle savedlnstancestate) { type=,,Perempuan', ,.

suDer. oncreate (savedfnsE.ancestate ) ,' break;

setcontentView ( R.. layouts, deta j "1* f a rnl i
J
helper=new AlmagHelper (thie) ;
if (almagld==nuL1) t
nama=(EditText) findviewByld(R. id. nama) ; helper . insert ( nama . getText ( ) . EosLring ( )
alamat= (EditText) findviewByld(R. id. alanaL\ ;
hp= (EditText ) f indviewByld (R. id. hp) ; alamat.get.Text ( ) .toString( ), type,
jekel= (RadioGroup) f indViewBy:d (R. id. ie]cel ) ;
hp.getText { ), to$tring{ )) ;
Button s6r,,q: (Button) findViewByld (8. id. savel ; )
eLEe {
save. setoncL icklistener ( onSave ) ; helper. update almagld, (
',rnd.get-Text( ) . Eostring( ),
.,,''.almagldBgellntent {)..gretstrr.ngExtra{database3. rD-E'x"RA) l,

ala]nat.getText ( ) . EoString ( ), type,

if, (almagldt=nu1l) {
toad( ) ; hp. getText { ) . tosrring () 1;

))
finishO;
rlCrrr*r r i.le
pubtic void onDesEroyO { );
Euper. onDestroy ( ) ,'

helper. close O;
database3java
lrrirrate vqid load0 .{. ..i.
package com.wilis. database3 ;
. .. qurgor c=helper.getByld(almagld);
import android. app. ListActivity;
e.noveToPirst () ; impor! android. content. Context. ;

'
,
:ffi;::::;l1i?llil;f;Iilifilli.,,,
hp.setText{helper.getlip(c) };
import
import
import
android.
android.
android.
content. Intent
database. Cursor ;
os. Bundle;
;

irqtrrort android. view. Menu ;

if (helper.get.Jekel(c)
-5efef .eguafs("Pria") ) { import android. view. Menuf nf 1ater,.
. check (n. td.prja) ; import android. view. MenuILem;
)
import android. view. View;
elee Lf (helper.getJekel (c) .equals ( "Perempuan" ) ) { import android.view. ViewGroup ;
j ekel . check (R. id.perempuan),' import andro-id - view. Layoutlnf f ater,.
) import andro id. widget . Adapterview ;
i mport android. widget . CursorAdapter ;
impor! android.widget. Button;
c. close O ; import android,wi dgeE. EditText ;
i, import android. widget. Imageview,.
import android.widget. Listview;
prj.rrgtd Vievr:
. OnCl i ckl,is tener onsave--new View..OnCl ickl,i stener () i mport android. widget . RadioGroup;
import android.widget . TabHosL,.
i .. - i mport android. widget. TextView;
Dublia lr.oLd onClick.(View vi { '

. . '. String lype-(Irl1; ....' ,.

public c]'ass database3 extend,s ListActiwity {

EwLtch (jekel.getcheckedRadioButtonrd() ) { public final staEic String ID_EXTRA=',com.wi lis.database3. ID,'
cage R, id..pria: Cursor mode I =nu1l ,.

AlmagAdapter adapter=nu1L,.
 tl
]

privat€ View.OnClickl,istener onsave=new View.OnCl ickl,istener ()

public void onClick(View v) {

String tg>e=nul1;
switch (jekel.geEcheckedRadioBuLLonld() ) {
case R . id. prja :
type=,'pria,,;
break;
a'e R.,#.:1ffIil.,,",,,
;.'.ir.,
]

helper. inserL (nama. getText ( ) . tostring( ),

alamat . getText ( ) . toStrinq ( ) , type,
hp.get.Text ( ) . toString () ) ;
model.requery();
]
j;

cLasE Al-magAdapter extonds CursorAdapter {

AfmagAdapLer(Cursor c) {
super(database3.this, c),
)

SO!*l:rid*
publlc void bindview(View row, Context ctxt,

Cursor c) {
AfmagHofder holder= (AlmagHolder) row. getTag ( ) ;

holder.popufateFrom(c, helper) ;
]
'.''...t iU'.
public View newView(Cont.ext ctxt, Cursor c,

Viewcroup parent) {
Layoutfnfl-ater inflater=getLayout lnflater ( ) ;
View row=inf later. inflate (R. layout. rokl, parenl,
false);
AlmagHolder holder=new AfmagHolder (row) ;
row. setTag (holder) ;

stsarEAcEivity (new lntent {database3 -thi6, return(row) ;

DetaifForm.class) );
)
raturn(tru6);
] static clas8 AlmagHolder {
private TextView nama=nulI ;
retura ( super. on0ptions I temselect ed { i tem ) ) ; privatse Textview al amat=nu11 ;
 -f

xrriwate Imaqevievi icon=nu1l

prL\ratr€ vieu row=0u11 i
; li'l<an tombol menu di keyboard sehingga akan menghasilkan seperti
ri;rrnbar berikut:
AlmagHolder(View row) {
this. row=row;
nam.i: (TexLView) row. f indViewByld (R. id. t j t,7 e ) ;
al amat= ( Textview) row. f indViewByld ( R. id . a .l ama r ) ;
icon= (Imageview) row. findViewByld (R. id. icon) ;
)

void populateFrom(Cursor c, AlmagHelper helper) {

nama. setText (helper. geENama (c) ) ;
. alamat. setText (helper.getAlamat (c) ) ;

' if (helper rgetJekel { e ) . equals.('pria' ) )- {

icon . setlmageResource {R. drawable ' prial ;

elge if (helper.getJ€ke1 (c) .equals ( "Perempuan" ) )

icon. setlmageR€source (R. drawable . perernpua]1)

1

I
Gambar 1 1.15. Aplikasi database3 tampilan tambah data,

Jalankan aplikasi database3, dan akan menghasilkan seperti gambar berikut:

t'/ick tombol Add untuk menampilkan form inputan data, masukkan data
st'perti gambar berikut:

Gambar 1 1.14. Aplikasi database3 tampilan pertama.

Gambar 1 1.1 6. Aplikasi database3 input data.
C/ick tombol save sehingga data akan disimpan, seperti gambar berikut:

Gambar 11 .1 8. Tampilan awal Aplikasi database4.

Gambar 11.17. Aptikasi database3 list inPutan data.

l :rnrpilan layar setelah tombol Setting di-click adalah sebagai berikut:

Aplikasi Database4
Pada aplikasi database4ini akan kita rancang aplikasi yang fungsinya sama
dengan aplikasi database3, tetapi memiliki tambahan menu untuk sortir By Narnd. Ascending
berdasarkan kemauan user. Buatlah project baru android dengan ketentuan By Nanla, Descending
seperti berikut:
gy Jekel i '
Project Name database4
Buitl Target Android 2.3 By Alarnat. Ascendrrrg
Application name database4 RV Alamal. F)es.cncltnq
Package name com.wilis.database4
Activity database4
Min SDK 9 Gambar 11.19. Tampilan Aplikasi database4 pilihan setting.

Layout tarnpilan aplikasi database4 ini adalah seperti gambar berikut:

l'cnambahan layout dibuat di dalam file xml/preferences.xml yang
rrrcrnpunyai isi seperti berikut:

XmI/preferences.xml
l'r eterencesscreen
xmlns : android= "h t tp j / / s c hema s. androicl, com / apk / res I andt o i. d " >
<Lirl ProIei:encc
android : keY='5,'. a-old"r "
android: title= ''Sort Order"
android:surTrmary= "Choose the order the -l jst uses"
 android: cnrries= " @array/ sorL -names " l,rss AlmagHelper extends SQliteopenHefper {
andro j d: entryValues= "(dar'l ay./sot L-cl auses" privat.e static final String DATABASE_NAuE="addressmanager4. d.b"
android:dialogTitle="Choose a .9ort ordcr " /> private static finaf int SCHEMA_VERSION=1;
</ PreferencesScreen>
public Al"magHelper(Conbext'context) {
super(context, DATABASE_NAI{E, nu}1, SCHEMA_VERSION) ;
j
Sedangkan menu yang ditampilkan oleh tombol setting dibuat oleh
values/arrays.xml yang mempunyai isi seperti berikut: GOverride
public void onCreate(SQLiteDatabase db) {
db.execsQl,(TCREATE TABLE almag (*id INTEGER pRIMARY KEY
nama TEXE, alamat TEXT, jekel TEXt, hp rEXT);,,);
values/amays.xml ^r|TOINCREMENT,
)
<?r,rl version=''1.0" encoding="uLf-8"?>
<'r Dall Ct:c;>
GOverride
<:,'--r lrro ali-v name= "sorc rdmes "> public void onUpgrade(SQliteDatabase dh, int' oldVersion, int
rr, WVerS On) {
<it.,:r,>By Name, escending</ -.-..,,'>
<: l, :n>By Name, Descending</ i L *r> / / no-op, .slnce will not be caIled until 2fid schema
< j rcn >By Type<,/ i r- -Ln> // version exists
. <iLem>By Address, Asce$ding</itea>
< | t er >By Address, Descending</, - er>
</:. .' ''(l .. r'rr'l> public Cursor qetAll(String orderBy) {
<, ! r'al-d] r.r, name="so-tt-clduses"> return { gelReadableDatabase ( )
<i' . : >name ASC</ j " ^r,> .rawQuery(.SELECT _id, nama, alamat, jeke], hp FROM
<, i ..-,>name DESC</. L r.> r I mag ORDER BY '+orderBy, nul 1) ) ;
<i r t':',>t),pe, name ASC</'. :r::> ]
..,, -,radda"ss ASC<,/.'r.c,:>
<i I tr >address DESC</ i I Fr> public Cuisor gerByld{Strir-rE idi {
<,/r. li ,n.J &r'dy> Slring[1 arqs={id};
</ , .'. ric" q> .return(,getReadableDatabase O i .

,rawQuery{".SELECT *id, narira, al,amat, jekel, hp..FROI{ afmag WHERE

tD=?",ar0si);
AlmagHelperjava masih sama dengan aplikasi database3, tetapi ada .1

perbedaan di dalam fungsi getAll dengan penambahan String orderBy iuU:.ic void insert{$Lring nama. $tring alamat.,Strihg jekei,
seperti sebagai berikut: . ContentValues cv=new Contentvali.res {) ; :

publ-ic Cursor gelAll-(String orderBy) { cw.put ( "nama" , riiama) ;

return (getReadabl"eDatabaSe ( ) , cv.put("alamattr, alamat.);
cv.p,irt 1" jet<st,.;, jekel) i
.rawQuery( "SiuLECT
OPDER B\'. "+orderBy,nu11) ) ;
-id, nama, alamuL. .lt kcl, hp FROM almag
cv.put ("hp", hp) ;
l
getwritablelatabasel ) . insert { "almag,', ,'namau , cv) ;
)
AlmagHelperjava selengkapnya adalah sebagai berikut:
pubJ"ie void update($tring id, String nama, String alamat,
, Str:ing jeke1,, String hp) {i :

AlmagHelperjava r,. Conieotvalue.s cv*.frew C,ontertvalue3{.) ; ,

serinsl! arsrs={id}; ' '

package com.wi 1j s. daE.abase4;

, cV;prit ( lnama". na$a) j ,, --
imporE android. conlent. Conlext ;
import android. content.Contentvalues; cv.Put("jeke1", jekel);'
-Lmport android. database. Cursor ; , .".i... c.v.putt'hp', hp)i , i.-
imporL, android. database . SQLExcepLion ; . . gdtsWliitableDaEabase{.) .update(,a1mag', cv,,_rD=?,,,arss) ;
import android. dalabase. sqliLe. SQL1teopenHelper ; )
import andro j d . database, sqf i t e. SQL1teDatabase ; ptblic String getNama(Cursor c) {
import android. database. sqlite. SQLiteQueryBuilder; return {c, geEString ( 1) } ;
 )
super.onDestroy( );
public String getAlamat(Cursor c) {
return (c. qetstring (2 ) ) ; helper.closei);
)
public String getJekel(Cursor c) {
return (c. getstrins ( 3 ) ) ; lrar"." foad(). {
^wold c=helper. getByrd (almagId)
)
Cursor ;
public String getnp(cursor c) {
return (c. getstrinS (4) ) ; c.moveToFirst ( ) ;
)
ndma. seLTexL (helper. getNama (c) ) ;

J
alamat.seLText (hefper. getAfamat (c) ) ;
hp. setText (helper- getHp t"l t,

DetailFormjava if (he-Iper.getJekel (c) .eguaf s ("pria"

jeke1. check (R. id.pria) ;
) ) {

package com.wi 1is. database ; l

. else if (helper.getJekel(c) .equa1s("Perempuan") ) {
iraport android. app. Act j vitY ; jekel . check ( R. i d.perempuan) ;
l,fiE ort android. database . Cursor; ]
irqport android. os. Bundf e;
itnport android. view. View;
irnport android.widqets. Button, c. cIose O ;
import android.widget. EditTexL ;
inirort android. widget . Radiocroup i
irnfiorts android. widget. TexLview; private View. OnCl- icklistener onsave=n€w Vi ew. OnC I i ckl,i s tener ()

public clasa DetailForm extends Activiay { public woid onCfick(View v) {

EditText nama=nul,Ii SErinq tt pe=nul-1.;
EditText aiamat=nu11;
EdiLText hp=null; E!,rlteh (ieket.getcheckedRadioButEonldO ) {
RadioGrouP jekel=nuIl ; case R. id.pria;
AfmagHelper helper=nul1 ; type="Pria";
String almagrd=nulI; break;
case R. id-perempuan:
. ::- ",ij( tylre= " Perempuan '' ;
public void oncreate(Bundfe savedlnstancestate) { break;
super. oncreate (savedlnsEancestate) ;
setconEentview (R. layout ' detaiT-form) ; l
helper=new AlmagHefper (lhie) ; 1f (almagId==nul1) {
helper. insert (nama,getTexE. ( ) . tostrinq O,
nama= (EditText) findviewByTd (R. id. nama) ; alama! . getText ( ) . toString ( ) , t:,f:e,
alamat= (EditText) fjndViewByld(R. id. afamat:l ; hp.getText ( ) . tostrinq () ) ;
hp= EditTexl ) findviewByrd (R. id. hp) ;
(
jekel= (RadioGroup) findviewByld (R. id. jekeT) ; else {
helper. update {a1magld, nama, getText ( ) . tostring ()/
ButLon ssvs= (But.ton) findviewByld(R. id. save) alamat. get.TexL ( ) . tostringO, type.
hp.getText ( ) .tostring( ));
save. setOnCl ick]-istener ( onSave),' t

almagld=getlntsent ( ) . qetstringExtra (datahaseA . ID-ErTRA\ finish();

if (aJmagIdt=nu11) { ];
loadO;
]

l--"t,r-.1:
public void onDestroyo {
 'l

super. onDestroy O
database4java hetper.closeO;
;

]
xnclrage com.wilis. daEabase4 ; ,..,.,ji,
publ c vo r_d nL i r r.
import, android..app,ListActivity;
irrport andro i d . content . Cont ext ;
i" o s
",..I ",.,,
inport. android. con.!.eEl. Intent; :::r"."rr; rr::.,, J,,.:
imDort android. conEent. SharedPreferences ;
Intent i=new IntenL(database4.this, DetailForm.class)
rqlort . android. database, Cuisor ;
imnort arldioid. o.s. Bundie, i.puLExtra (I D-.EXIRA, String. valueOf (id) ) ;
Lnrport aadroi d, paef erence,, Pref erenceManager ;
sLartActivity(i);
irnports android.view.Menu; .. .

irnErcrt android. view. Merturnf later ;

., .t\. i, . ,-
imp.ort android. view.View; public boolean oncreateoptionsMenu(Menu menu) {
iqllort android.view-ViewGroup i '
nevr Menulnflacer (this) . inflate (R.menu. c:ption, rnenu) ;
fi>ort android . view. Layoutlnf l-ater;
inrport android. widget. . Adapterview,'
inDort android.widget. CursorAdapLer ; return (super. oncreaLeoptionsMenu (menu) ) ;
inport a4droid.widget. . Bu!!oni,
r'r
l

irpnrt android . widget -.Edittext' i

,
,
'
furport android..widget - ll4ageviery i "'I . !l
public boolean onoptionsltemselected(MenuItem item)
iqrort android.widget . Listview; t
fqg,grt android ;'widqei. Radiocrorip ;
if (item.getlLemrd( )==R.id .addt {
inport android. widget . TabHost ; startAcLivity (rr€w
I ntent (database4.this, DetailForm.cLass) ) ;
import androld.viidgeL. TextView i
return(true);
pubtic ql.agE .databaso4. axtar-rCls ListActivity {
publie fira], 6tatic' String rD*.EXI,RA=*com.wilis.database . rD'r else if (iEem.getItemId()==R.id.prefs) {
,Cursor model+null ; startActivity(neur Intent(this, Editpreferences.clase) )

AlmagAdapter adapter=nul1 ;
EditTexE nama=nu11i returrr(tflre);
EditTexE alamat=nu1I; )

EditText hp=null; ret,urn ( super . onOptri ons f t emsel ec ted ( j t em ) ) ;

RadioGroup j ekel=mrl1 ;
AlmagHelper helper=nuI1; )

.. SharedPreferences pr€fs=trull; ...

private void initlistO {
GOver r,,ie
i....
tt
p*iiitiJia'orrcr*"te(Bundle savedrnsEancdstate) {
'-"0"J.;&"'.'isrt,sc.,r.o' (mode1 ) ;
super. oncreaEe ( savedlnsLancestate ) ; motlel .cfose();
sotcontenrVievr { R. layouL, na in\ ; )

rLs);
,, .. }e,lbqr=fi6w AlmarrHelper{thl,e);. model-helper. getAll (pref s. getstring (" sort*order.", " naft.i ")) ;
, ,..,
startManagj ngcursor (model );
. pz:g'is=PrelfrdrenidManager. getDefauLtsharedPreferencds(this}, adaprer=new AlmagAdapter (mode'l ),.
setListAdapt-er ( adapt er ) ;

, '. ,' nama= (EditText) fiadvi€wById{R. id.rrama) ;

' )

i-ii alatnau*iEditrei(t) f indViewByld(R. id. alaryat) ,;

private SharedPref erences . OnsharedPref erenceChangeLisEener
hp= (EditText) findvieweyld (R. id. hp) ;
jeke1={,RqdioGloup}findViewBvrd{R'id.jekeJ), r'refL,stener=new SharedPreferences.OnsharedPreferenceChangelisc.enero
,, 1

inittist(); public voLd onSharedPref erenceChanged (SharedPreferences sharedPref s,

:it-ring kev) {
pref s',,regi steronsharedpref erencechangeLis tdner (pref Li s Eener ) i if (key.equals ( "sorl order" ) ) {
jnitl,ist();
)
)
ftr.erriclc
public woid onDestroyO { )
 *l

class AlmagAdapter extends CursorAdapter

Al-magAdapter(Cursor c) {
sul>er {database . LbLs. . c.1 ;
)

Il vt.:- i :lf
public void bindView(View row, Context ctxt,Cursor c) {
AfmagHofder holder= (AlmagHolder) row,qetTag () ;

holder ;populaLeFrom(c, helper) ;

til')\f el-r1fi
"
public View newView(Context ctxt, Cur$or C,ViewGroup parent) (
Layoutlnflat6r inflater=getI,ayoutlnflater ( ) i
View row=inflater.inflate(R.]ayout.row, parent, false) ;
AlmagHolder hol-der=new Al-magHolder (row) ;
Gambar 11.20. Aplikasi database4.
row.setTag(holder);
return(row);
]
'fekan tombol menu di keyboard emulotor sehingga akan muncul menu di
static class AlmagHolder { bawah layar seperti gambar berikut:
private Textview nama=nuIl,;
private Textview al amat=nul1 ;
privale Imageview icon=uu11 ;
private View zow=nulI;
AlmagHolder(View row) {
this. row=row;
na6a= ( TextView) row. f indViewByld ( R. id. t i t-7 e ),
alamat= (TexLVie\'/)row. f indViewByld(R. id. alamar) ,'

icon= (Imageview) row. findViewByld(R. id. icon) ;

I

void populateFrom(Cursor c, AlmaEllelper helper) {

nama. setText (helper. getNama (c) ) ;
alamal. setText (helper. getAlamat (c) ) ;
if (helper.getJekel(c) .equals('pria") ) {
icon. seLlmageResource (R.drawabfe . pria\ ;

elEe if (hefper,getJekel (c) .equals ( "Perempuan" )

icon. seLlmageResource ( R, drawable . perefipuan) ; Gambar 1 1.21. Aplikasi database4 Nenu option.

Untuk menguji proses sorting data, c/ick tombol setting dan pilih try
] Nama, Descending dan perhatikan hsf data kita akan otomatis tersortir
sesuai dengan jenis sortir yang kita pilih, proses pemilihan setting dapat
Jalankan aplikasi database4 dan lakukan tambah data sebanyak 3 buah, dilihat seperti gambar berikut:
seperti gambar berikut:
 By Nama, Ascending

By Nama, Descending

By Jekel

By Alamat, Ascending

By Alamat. Descending
BAGIAN 12

CODING MAPS
Gambar 1 1.22. Aplikasi database4 sorting dato.

Sehingga lisf data akan disortir berdasarkan nama dengan urutan

descanding (zke a), seperti gambar berikut:

Salah satu ciri mobile phoneltable pc adalah portabilitas, sehingga tidak

Gambar 1 1.23, Aplikasi database4 sorting data.
rnengherankan bahwa beberapa fitur android sangat menarik seperti
layanan yang memungkinkan anda menemukan, mencari serta
menvisualisasikan posisi kita ke dalam peta lokasi fisik (google.maps). Kita
tlapat membuat peta berbasis Google Maps dan menjadikannya sebagai
alement dalam layout User Interface (UI) yang kita rancang. Kita dapat
rrrelakukan akses penuh ke peta google maps, dan memungkinkan kita
rrntuk mengontrol pengaturan tampilan, mengubah tampilan zoom lokasi,
tlan memindahkan lokasi tampilan.
Pada bagian ini kita akan mencoba membahas tentang Location Based
Seruice (LBS) yaitu seruice yang berfungsi untuk mencari dengan teknologi
GPS dan Google's cell-based location. Maps dan layanan berbasis lokasi
menggunakan lintang dan bujur untuk menentukan lokasi geografis, namun
sebagai user kita membutuhkan alamat atau posisi realtime kita bukan nilai
lintang dan bujur. Android menyediakan geocoder yang mendukung
forward dan reuerse geocoding. Menggunakan geocoder, Anda dapat
mengonversi nilai lintang bujur menjadi alamat dunia nyata atau sebaliknya.
informasi geografis. Kita dapat mendapatkan nilai KML secara otomatis
rrrenggunakan Google Maps.
Untuk mengaktifkan GPS di emulator, Anda dapat menjalankan 7tle ddms
(daluik debug monitors system) yang berada di folder took android sdk.
Seperti tampilan berikut
lr,,1 ji1.'.!.iieb*jr.rL--1{*I!stiltts,byx*r].;;;;;;i;;i

. -,,1,,,,1
!.,nll r i ntrai llii r
ri .l',1

Location Based Seruice Location fontrolr

M;;;"ii.sri - |KMr-
f
Location Based Seruice (LBS) atau layanan berbasis lokasi adalah istilah i g, oecimat
umum yang digunakan untuk menggambarkan teknologi yang digunakan I ....'soug.**ut
untuk menemukan lokasi perangkat yang kita gunakan. Dua unsur utama I Longrtude -122.084095
lititude 17.42i006
LBS adalah:
t@
Location M anag er (APl Map s) Gambar 12.1 GPS di Emulotor
Menyediakan toolsfsource untuk LBS, Application Programming
Interfoce (API) Maps menyediakan fasilitas untuk menampilkan,
memanipulasi mapsfpeta beserta feature-feature lainnya seperti Untuk mendapatkan nilai longitude dan latitude suatu daerah di Indonesia,
tampilan satelit, street fialan), maupun gabungannya. Paket ini berada bisa diambil dari situs maps.google.co.id, dengan menge-c/rck kanan daerah
pada com. google.android.maps. 'clan pilih what's here. Seperti gambarberikut:

Location Prouiders (API Location) -6_9241A6.107.61004 I TdiJw

Menyediakan teknologi pencarian lokasi yang digunakan oleh
device/perangkat. API Location berhubungan dengan data GPS (Global
Positioning System) dan data lokasi real-time. API location berapa pada gdeafut

paket android yaitu dalam paket android.location. Dengan Location

Manager, kita dapat menentukan lokasi kita saat ini, Track
gerakan/perpindahan, serta kedekatan dengan lokasi tertentu dengan
mendeteksi perpindahan.

Bekeria dengan GPS pada Emulator

Untuk mencari posisi location kita sebenarnya kita membutuhkanhardtuare
Gambar 12.2. Mendapatkan Nilai Manual GPS
GPS, namum kita juga tetap dapat menggunakan GPS di emulator dengan
menyimulasikannya dengan tools DDMS yang sudah disediakan di dalam
Android SDK kita, Kebanyakan sistem GPS menggunakan fi.le track GPX,
Sebenarnya kalau menggunakan perangkat mobile android yang dilengkapi
sedangkan KML digunakan secara ekstensif online untuk mendefinisikan
GPS, nilai itu bisa kita dapatkan langsung karena sudah disediakan di
gps-provider. Ddms location control di atas akan bertindak sebagai GPS
receiuer. Perlu diingat GPS uolue tidak akan berubah samPai dengan ada
aplikasi yang melakukan update lokasi.

Aplikasi codingmaps I
program ini bertujuan mendapatkan nilai dari gps.provider, dalam hal ini
nilal gps-nya kita dapatkan 4ari ddms, tentunya kalau A.da running
progr;m ini di n obil" android yang memiliki hordtuore gps, akan
meidapattan nilainya dari gps tersebut secara reol time. Buatlah project
android dengan ketentuan sebagai betikut:
Project Name codingmapsr
Buitl Target Android z.z
Application name codingmapsr
Package name com.wilis.codingmaPsr
Activity codingmapsr
Min SDK 8

default.propertis
# Project target.
target=android - B

di sini default.propertis nya adalah android-8 atau android z.z, pastikan avd
yang targetnya android z.z sudah Anda buat.

AndroidManifest.xml
<?:-m version=".1- 0" encoding="utf -8"?>
<manifesl:arras:androld=,,http://achemas.ancltoid.cam/atrtk/res/android"
package= " cc:m. wi I i s . cod i ngtnaps L">
-
<applicJiian android: iconr'.Sdrawablelicon">
iactivity android: nams* ' . codingrmapsl "
androi d : label= " s tr ing / app-name " >
@

. <inLeoL-filter>
. <aetion android:name*"aildroid'intent'action'!!AIN" />
<cat{i!{ory..android I name= "android' in ten E' category' LAIINfNER " />
,</inLeni'-r;:.t*.t
<,/activ:ry>
</at:Plicari-.r>
<LSCS lr€rr issi 'tn
,ratoia,""*e-"andrctid.perrrds,Sion;ACCESS*rJJ\IE-{'OCA"ION"/>
</moni{esr>

Perhatikan di sini kita membutuhkan permrssion ACCES-FINE-LOCATION

karena menggunakan android.location.
 String IatlongsLring;
Aplikasi codingmapsz
if (locaLion != nul1) t
double 1at .= Iocation . getlatitude ( ) ; II r ratlah pro;ect android dengan ketentuan sebagai berikut:
double lrrq = location. geLlongitude ( ) ;
latLongString = ,,Lat;,, + 1aE + ,,\nlong: + 1ng; Project Name codingmapsz
J els,e { Buitl Target Android z.z
. latl,ongstring = "No location found"; Application name codingmapsz
)
Package name com.wilis.codingmapsz
mylocationText'SetText( "Your CurrerrL Position is:\n' +
Activity codingmapsz
IatlongString) ; Min SDK B
)
]
rlefault.propertis
Setelah aplikasi Anda running, sewaktu emulator loading kita dapat
il t)roj ecL t.arget .
mengirimkan nilai gps yang kita ibaratkan didapatkan dari hardware gps t,rrget= android-8
kita melalui emulator ddms seperti berikut kita kirimkan nilainya.
AndroidManifest.xml
!-*ll i i!{*nq r-Ip; ,' .' version= " I .0 " encoding= ,'ut f -g,,?>
.,. rqsL x'nlns:android,=,,http:,t/schemas.andrrsid.comlapktres/and?c:id"
Locati6n Csntrnls.
rckage= " com " wi f i s. codinwaps?',>
M;--;i J.ge;1,......,$.lc1155 1
t,,
< .1';'1 i l'a t- i on>
{iir De€i'Tat <acr j vr t.y android:name=,,. codingnaps2"
ai:il\ qemaqeril'nal
, rrrdroid:label; ,t€str.ing lapxr-name,,> .
tongrtude'l,J2.CA4O95
<in',errl-t.--Il.er>
Latitude J I.4?rDO6
<a.. j,:r, android:name=',android. intent. action.MAIN,, />
.<cat&qo.r}f android I name=,,andfoj d - rn f, er t . ca t6Ero"ry,,tA INCHER, />
</lnLatrL i'ilrer>
Gambar 12.3. Mengirim nilai lokasi. </.rcr i,1 it./>
</,1 pl.icrLion>
< r:;es-permiss j on
., r'd ro id : narre= " an dro i d . permi ss i on . ACC.ESS* F f
Akan menghasilkan seperti gambar berikut: NE*LOCAT tON,, / >
',/ dni f cst>

rnain.xml
','xml version= n L. O,' encoding* rutf:8,!?>
. . .-or LayLU,*
xm] ns : android= "h t Lp : / / s chemas. android. com / apk / res / andro id,,
dnd roid : orient.at ion= " ver t Tcal',
android : I ayouL_width=,' f i I lJ:arent,,
android : I ayout_height=,,fi j J)arent,'I >
< -exlView
Gambar 12.4. codingmapsl android : id= " + i d/]3nyLoc aL i anText,
@

androi d: layout_he ighL= ', wr ap_conL en t "

android: t.ert4 ::A.$ttingrlftelJo,, . .'
Setelah Anda running aplikasinya coba Anda ganti nilai gpsnya, programnya />
tidak akan merespon karena program tidak ada fungsi untuk meng-handle ,:.'nenrLay'o.lt>

perubahan nilai gps Qrpdate location), program update location akan di-
handle di codingmapsz.
string.xrnl pubLic void onrroviderDj.sabled{Strj.nq provider)
updateWi thNewl,ocal ion (nuI1 ) ;
{

<?:r',r]. version= "-1. 0 " encoding= "utf *g "?> )

< ll t::la'.il.i{:::l>
<s l.:,i r:;-1 name= "he.1 Io "><,/ s'' r-irg> public void onProviderEnabled(SEring provider) { J

</ i.> publ,ic void onstatusChanged(String provider, iat staLus, Bundl-e

,.\tras) t]
1.
codingmaps2iava .i*, Updalg Uf !/iLh a new location *1
package com.wilis. codingmaps2 ; p.ir"[" rr"ii-"pAituw:.thNewlocation(tocation location) {
Textview mylocalionText *
inporb android. app. Act.ivitY; |r'extview) f indvj.ewById (R ^ jd. myr,o cation?ext) ;
import androicl , content . Context i
irnporL andr:oic1, location. Criteria ; String latLongstring;
imrrort android. location. LocaLion ;
imporE android. location. LocationlJistener; if (Jocation l= aulL) {
iw)ort android. location, LocationManager; doubLe -tat. = location.getlatitude() ;
import anclroid. os. Bundle; double lng = 1o".;ion.getlonqitudeO ;
imisrt android. widget . Textview,' Iatlongstring = "Lat: " + l-al + " n1-onq: " + lng;
i else {
public class codingmaps2 extendE Activity { latl-ongst.ring = "Nu localion tound";
t?riYerriCe
pubLic void onCreate(Bundle icicle) { mylocationText.setText("rorr ^uirpnt PosiLion is:'n" +
super , oncreaLe { icicle ); l.rrLongstring);
setcontentview {R. laYout . main} ; I

LocaLionManager locatioiManager i
locationManager =
( Locat i onuanager ) getsys temservi ce ( ConEext, L?CAT I ?N_SERVICE\ i
rrilai /ocafron pertama yang kita kirim adalah seperti berikut:
criterla critseria = new CriteriaO;
cr i t eria . s etAccuracy ( Cr i t er i a . ACCURACY-FIJVE) ;
criteria. setAl titud;Required ( falsa) ;
criteria . $etBearingRequired { f,a1Ee ) ;
criEeria. setcostAllowed ( true ) ; ,lSi Decimal
cri ter ia . set PowerRequ irement { Cri teria . PawER-Low) ; ,' t,5exaqesimal

String provider = locationl4anager. getBesLProvider (criteria, L6ngrtude -10$.r1848S5

true); Larilude 30.412005

t_' .

Ioca E ionManager . get.LastKnownlocat ion ( provider ) ;

Gambar 12.5. Nilai [ocationl codingmaps2
updatewithlllewl,ocat ion.( locaiion)';,

. locationManager.requegtrJocatioilupddtes(provider, 2000, 10,

locationtisLener); .
l'ampilan codingmaps2-nya adalah sebagai berikut:

Drl,vate f lnal LocaLionlist'ener locationlistener = rlaw .

Locationl-istener ( ) {
public'v:oid onlocationchanged(Location location) {
updatewithNewlocat ion ( location );
)
 Aplikasi codingmaps3
l)rrlam program codingmaps3 ini kita akan mendapatkan alamat/nama
rlrrcrah dari suatu location yang dikirim oleh Gps.provider ke aplikasi kita.
'I't'ntunya kita membutuhkan koneksi internet di sini ketika kita
rrrcnjalankan aplikasi codingmaps3. Buatlah project android dengan
lit'tentuan sebagai berikut:
Project Name : codingmaps3
Buitl Target : Google Api's 8
Application name : codingmaps3
Gambar 12.6. Aptikasi codingmaps2 locationl Package name : com.wilis. codingmaps3
Activity : codingmaps3
Min SDK :8
Program codingmaps2 masih sedang running, sekarang kita kirim nilai
lokasi baru sebagai berikut:
tlefault.propertis
r ProjecL target.
U''lrl,**:.v tlrlsx,Gsj'xsrl Lrrget=Googie Inr. :Goog le ApTs: B
r"lu*i 16p; I 61a1
l

i
rtr D*imal t:rrget kita adalah google API level B, pastikan avd untuk level API tersebut
I i',i Ssagsimnl srrdah ada.
I tongitude 75,0840&5

Latitude
S€fid
S0.q:i0S6
AndroidManifest.xml
versi on= "l - 0 " encod )ng=,y1[ -g,'cs
Gambar 12.7. Nilai location2 codingmaps2 ..:r m I ns : and.ro i d=', h Ltp :,/ / schema s. andr oi d. com t apk t r es / and ro ici,,
1:du^dge- cam. wi Lis.codjngrnapsJ,,>
<. l ".,' 't )
< .sr.:- : -i,r,: 1 android:name=,,com. qaoqle-android.maps,, / >
Sehingga codingmaps2 melakukan wdate location secara otomatis seperti <,r L -'-
gambar berikut: android : narne= " . cod ingmaps i,,
android : label=,' Gs r.r i ng, zpp ramt. ">
< *, l , ,| , >
.,- i,,
onaro:d:name=,,andt ctid.- inLFnt.acLion.MAJN,, />
<. .. - *e. i "7 android : name=,, a nd ro i d.intent . cat egor-y. I,A'LINCHER, / >
</lr.lc:LL .[..- l:- r>
</:,,' .. ,,>
< /,.1.1: ),,...,.,....>
< .lc:i,J, .rj s! :,,: android:name=,,android.permission. LNTERNET,, />
<:: -g. : ,r, r ,,. , ';- j r,1
.nrlro id : name= " andro i d. permrssion. ACCESS_FIffE_ LOCATfON " / >
i:- 1 , '>

l)i dalam AndroidManifest.>mrl kita memerlukan libtary com.google.android.maps

l<arena kita kan menggunakain librari itu unhrk mendapatkan alamat dari suatu
rrilai locatron, sehingga kita rnemerlukan:
r ;es- L i trrary and.roid : nam e=,, c am. go o g J e . andr o i d. maps,, .

Gambar 12.8. Aplikasi codingmapsZ location2

 -l

public woid onCreate(Bundle savedlnstanceStaLe) {

Seterusnya kita memerlukan dua permfssion, yaitu sut)er. oncreate (savedlnstanceState) ;
setcontentview(R. Iayout . nain\ ;
'. |. tt ]'::' an'lroid:name--"andtoid'permission'IJVTERAIET"
-.,.s :. , m, .: :, ..
/:' Locati onManager locationManager ;
,r-raroib, n"* e= " android.permission ' ACCESS*F1NE*LOCAT7ON" String context = Context . LOCATT)N-SERVICE;
locationManager = ( LocaLionl{anager) getsysiemservice ( context ) ;

Pernissionini adalah harus karena kita akan menggunakan internet

sebagai

komunikasinya untuk medapatkan nilai alamatnya' ::i :::r :::i,i*."iriil i=ii,}iiiycv-Fr,E,

cri teria. seLAlt.itudeRequired ( f alse ) ;
;

;
main.xml ::*:iii ::::a:at?i*;i;;in;
:
crj"leria.setPowerRequirement(Criteria, POWER-LAWI i ..
<?xnl, version=".1 .0" encoclinqt -"utf-8"?> String providqr. : locationndanager. getBestProvider (criteria, true)
-.L,/t.
< . ,
xmlns:android'=,,htt1://schemas.ar:dr:oic' co*t/atrsk/les,landroi.d,,
Location focati,on =
anclroid: or i er,t. ar ion= "ve.t. t' tcsi "
Io ca t i onManagor . ge tlra s tKnor,rrnlocat isn { provi de r ) ;
anclroid: layout-wicith= " { i L'- pa tonr " upda t ewi thl{ewlocat j on ( 1 ocation) ;
androic!.: Layoul-lreight= " t i i I -pdrent">
aI..L''i.r. IocationMa&ager. requestLocationupdates tprovider, 2000, 10,
androiC: id="At icJ my{oc'ac i-o'1 exL" ,
locaLionl,istener);
android: layout-widLh='fj'Iliarefl c"
I
android : layout*heiqhL= "urrap*cr:n f en' "

android: text= "6sLri ng/helks" privaE,e fl,na1 LocationI-istener Iocationl,istener = new

/> .,ocation]-istener O {
</ .1' ,' ,1.. "j' ) publlc woid onlocaLionchanged(Location locaEion) t
updaEewi thNewLocation ( locat ion) ;
]
string.xml
encoui:lq="uc! 6'?> puJrllc
- void onProviderDii;abled { strinq provider }{
<? . version='I.0" updateWitshl{ewlocation (nuII ) ;
(' .... .,, r'. )
<:., ':'n-i nar'le= "ilel,1O'></ ' >
in| . ntt name= " app-rame " >codingmaps 3 < I s t.r :i" ng >
public voLd onProvideiHnabled(string provider) { }
</ e .' <' >
Irub1ie toid onsEatusChanged(String provider, int slalus,
Bundle extras) { }
l.
codingmapssiava
package com.wilis. codingrmaps3 ; private woid updalewithNewlocation (Location location) {
String latl,ongstring;
import java. io. IoExcepLion; TexEView myl,ocationText ;

l"mport java. util - List; mylocationTglg = (TextView) f indViewByld (R. id.myrocat ionText')
impor.t java. util . Locale;
SLring addressSLr-Lng = "No address found";
imlrort android. aPP. Ac tivitY ;

iilrXrort android. content ' Context;

import android. f ocation. Address ; "iiff-ii; i:il:rl:i:ili,
ingort android. locatiofi . Criteria
inrport android' locaEion.Geocoder ;
;
;*iii;i
latlongstring = "Lat:" + lat + "\nlonq:" + llng,'
import android. location. Location;
import android. location. Locationlistener
.
; dlouble latsiLride = locauion.gettaLitude{) ;
,l.nu:ort andro i d ocat ion . Locat'i' onManager
-1 ; double longitude = location.geElongitude() ;
import android. os. Bundle; Geocoder gc 3 ilelv Geocoder(thLs, l,oca:-e.'geEDefaulL()) ;
i*ioot android. widget. Text'View ; try {
List<Address> addresses = 9c. getFromlocation ( latitude,
public class codingmaps3 extends Actlvity longiLude, 1);
StringBuifder sb = new StringBuifderO;
,,:,,,1
 #f

if (addresses.s-Lze() > 0) { l)engan emulator kita dapat melakukan map uieu untuk membuat agar
Address address = addresses.get (0) ;
Ooogle Maps bisa kita masukkan dalam mops yang akan kita buat. Google
for (int i * 0; i < address.getMaxAddresslinelndex0; i++) Mops merupakan hak cipta Google secara propierty, sehingga kita dalam
sb. append {address.getAddressf,ine (i) 1 .append{ " \n" ) ; rrrenggunakannya memerlukan adanya perjanjian, Google membuat
sb.append(address.getLocality () ) .append ( " rn" ) ; rrrekanisme untuk dapat mengakses Google Maps dengan coding aplikasi
sb.append(address.getPostalcode ( ) ) .append( "\ n " ) ; tlengan sebuah kunci yang dikenal dengan API Key, kunci ini dapat kita
sb. append (address. getcountryName ( ) ) ; rlapatkan berdasarkan nilai generate otomatis dari SDK Android yang kita
addressserinq = sb.foSLri.hgO, i nst al.
i catch (IoExcept.ion e) {}
) else 1
Langkah-langkah mendapatkan API Key Google
latlongString = "No locat.ion found";
J t. Mendapatkan nilai MD5 Hash
mvLocationrext' setrext'' Carifile debug.keystore yaituTt/e MD5 Hash dan biasanya berada pada:
I:xi"il:::l:r":" * i:?".' :;)l""iu *i"q ) ;
Windows : document and setting user uindous kita seperti berikut:
)
)
Directory of F:\UseFs\uxc -uilis\.android
l/61,/2gLL 16:19 <DIR>
Apabila kita aplikasi dijalankan dan ada nilai location yang dikirim akan 3/E,-/2g1L 16 ! 19 <DI R>
4/BL/2A1L 14:21 L23 adh usb-ini
menghasilkan seperti gambar berikut: 4/BL/zALL 13 =44 223 androidtoo1-cfg
5/AL/?EJ1,L 66:23 <DIR> aud
/E,7./2gl1,L 13
5/E,7./2gl1,L :58
13:58 1 - 532
L/17./2gl7.gl
/LL/?gJ7,gl 26=gl7
zB=glL 7- -26A
L6f,atiBn f.ontrolls /LL/2B18 26=BE ?04 Eefau-lt-kEyEEI
*rvr;;;;f /E|L/ZEJAa a4=gz
/ZEJAa E?=99
1?1 mo de m-n u-ran-S 5 5 4
7-?1 mo de m*n s-ran-S 5 5 6
XRS{ ,."X-{${t:::l _ /2BLL 86=23 2s
t$:r Decimal
Gambar 1 2. 10. Lokasi file MD5 Hash android windows
,{} Sxaglesimal
Longitude 107.6105f9
Latitude -6.493211 Linux : berada padahome user lirutx seperti berikut:
re.---14
t@uxcuilis :,/hoee/uxcvilisl. an.irBid* pwd
lhffi/0xcvilisl . and roid
root6uxcHilis i lhomE,/uxcuilis/ . and r6id* ls - 1
tot6l 28
-ro-r--r-- L uxcui.lis uxcwilis 123 ?418-ll.-l.A 89:52 adb usb.ini
-ru-r--r-- 1 uxcuilii uxcuilis 143 26LB-12-19 l4:55 and;oidtoot.rfq
ruxr-xr-x 7 uxcuilis uxrwilis 4996 2gXO-1?-:6 6E:5U *sil
Gambar 12.9. Aplikasi codingmaps3 -ru-r--r-- I uxcwilis uf,cwiLis L217 2416-1?-26 13:4S ddms.cfg
.ry-r--r.-1UxCUi11suxcuili51?577s1g-1]'.l616:€l@
-ro-r--r-- I uxcwitis uxcuilis 75S 2OlA-l].-15 18:gZ default.keyset
-tu'r--r-- :. ux(witris uxcyitis 72 2SlA-L2-26 86:52 repositories.(fg
lis : /h(m,/uxcultis,/. and roid* I

Api Key Google Gambar 12.1 1. Lokasi file MD5 Hash android linux

Pada codingmaps selanjutnya kita akan b:uat map uieu, yang dapat
menunjukkan dalam bentuk mops di mana posisi dari nilai lokasi yang kita Masuk ke directory bin dari folder java anda dan lakukan perintah
kirim (nilai GPS nantinya apabila dijalankan di deuice yang mempunyai berikut untuk mendapatkan nilai MD5 Hasnya
harduare GPS). Ini dapat dilakukan di android karena Google mops Keytool -Iist -alias androiddebugkey -keystore <Iokasi
disertakan pada android, jadi hal ini merupakan salah satu kelebihan detrug.keystore > -storepass android -keypass android
android daripada sistem operasi deuice mobile yang lain.
Sehingga mendapatkan nilai MD5 has seperti gambar berikut:
 :\Program Files\Jaua\jilkl.6.0-12\hinlkeytool -list -alias
androidilehugkey
Your key isr

ore f:\llsers\uxc.r,rilis\.android\dehug.keystore -storcpass android -keypass

I lUZdAhhtbairp]{r-Jt]I/d0 leBP.lii'i4,,rrLgbr1--qlkri.ilIA
id
u idilehugkey, 11-il0u4810, Priuatel{ey[ntny, This [<ey is good for ail apps signed with your ceftificate whose frngerprrnt is:

ificate fingerprint (l'lD5): F{:Cl:15:fl[:1{:5?:39:1C:10:lX:84:33:fi{:55:E[:[B

F,! : u1 : 1 5 : EE : 1 4 : 5? r.l1 : 1C : 1lr : 1E : E4 :,1-l : A,l : 55 : EE : DE

Here is an exampie xrnl layout to gEt },ou sta.rted on your lllay to mapping glory:
Gambar 12.12. Nilai MD5 Hash android di windows
crn. graale andrcrd naps.1{aFY1E{
;nlrord Ieycut_urdlh= t rI.[_parer,t "
andraid : layaut_h*ighi = " f i 11_Farert "
andrard apiley= ".iltlldibht hanpltO0td0 1rBIilX4wngbciqDl,-cUVi
: "
/',}
rootQuxcuilis : lusrlbin# M
/usr/bin
-tist -aU.as- androiddebugkey -keystore lho*eluxcwitis/ Gambar 12.15. Nilai API Key Android
rootpuxcvilis:lusr/bin# keytool
.androidldebug.keystore -storepass andraid -keypass android l

androiddebugkiy, ttov I[, 2S1g, privatel{ey[ntry, ,

Certifi{ate fingerprint (l{05}:2E:2tr:19:37:}5:66:*B:[C:F(:?5:BA:E3:91:AC:44:80 Nilai API Key ini lah yang kita gunakan untuk program membuat dan
root@uxcwilis : /us r/bin# [ rnenampilkan serta memanipulasi maps. google.com di program aplikasi kita.
Gambar 12.13. Nitai MD5 Hash android di linux

,
Aplikasi GoogleMaps
Lakukan koneksi internet untuk mendapatkan nilai API Key dengan
mengakses alamat http : / / code.g oog le.com/ android/ add-ons/ g oog le- ini akan kita lihat penerapan dari penggunaan Api
Pada aplikasi GoogleMaps
apis/maps-api- signup.html, baca dan checklis terms and conditionnya, Key yang sudah kita dapatkan diatas. Buatlah project dengan ketentuan
danpaste-kan nilai MD5 Hash kita seperti gambar berikut: berikut:
Project name GoogleMaps
Target Google Api's 9
ldl lharn read *nd agree with the lerms and condittons {pI|Ilable yeEigni Application name googlemaps
Package com.wilis.googlemaps
My ce,rtificate's MD5 fngerprint : F4:C l ]5.8E: 14:57:39 t C. l D:'1 8.84 33:A4:55:EE.DB
Activity googlemaps

@ Pada aplikasi GoogleMaps ini kita membutuhkan libraries

com.google.android.maps dan permission untuk dapat menggunakan
Gambar 12.14. Nilai MD5 Hash Generate
internet, sehingga AndroidManifest.xml adalah seperti berikut:

Sehingga kita mendapatkan nilai API Key kita seperti gambar di bawah AndroidManifest.xml
berikut: <?,:l version= "1.0" encodi ng="utf-8"?>
< rr.r f es'. xmlns:android= "Jrt tp: //schemas.android-com,/apk/restandroicl"
package= " com. wi I i s. goog Tenaps "
oid : versionCode= " -1 "
and.r
android : vers ionName= " 1. 0 . A ">
<dplr. -1.:L i cr. android: icon= " @drawabfel icon"
android : labe I = " st r i ng t app_name,'@ >
 .f

<uses*1.ibr:ary android:name= "com. gaagTe. android. maps " I >

<J('t-", r 7 android:name= ". groogrJemaps"
googlemapsjava
android : Iabel = " B s c r ing,t app_nane " > package com. wilis. goog)-emaps;
< J :'L ent I -. L l.er>
<-cL : or android:name="andro;d. intenL, acLion. MAIN" /> import com. google . android . maps . MapAc t ivi ty;
<cetegiory android: name. "android- jnfent, categary. LA,JJfCHER" /> import android. os. Bundf e;
</inFcr'L-i'i ,': el'>
</ ur"* iv tL t> public class googlemaps entende MapActivity
</ ipi.).( rt iL-)> I

<11 ses *per.mi s s i on androi d I name= "a;:clro j d. permj ss j on. JJV?SAIVE?' / > rho acLivr ly is iirsl- crealed" "l
lr" Ca11er1 ul"ren
</-nan1-iti'-> Override
public void onCreate (Bundle savedlnsCancestate)
Defenisi penggunaan library didefenisikan dengan t.
Bu[rer, oacreate (savedlnstancestate) ;
. "i:us I i r'r-r:.t anriroid:name='com. googfe. android.maps" ., setcontentview (R. J ayout. ma j n) ;
I

Sementara defenisi permission penggunaan internet dengan ' - F v"(:r'

'.rre< .i, ..,..r'.- j,i j;,,

protact.sd boolean isRouteDisplayed() i
' android:name= "android.permission.LNTERNET"
j
return faLEe;
Penggunaan internet dimaksudkan karena dalam aplikasi kita
membutuhkan koneksi internet.
.lalankan aplikasi googlemaps sehingga menghasilkan seperti gambar
berikut:
main.xml
<?: *,i version="/.0' encoding="ut i B"?>
<,li e :1..r ]: i \.el,aycul
xmlns : androicl= " http : .y' I schemas . antlrrsid . cam/ apk/ res / android "
and ro id: 1 ,ryour-wi dth= " t i J lJa r ent "
android: layout-heiqin|= " f i11.--pare,t ">

<:, ..... .. ,r . 1: l;..,ri .1"

antlroid : id=,, d/mapyi ew,,
6 +:i
andr:oid : l"ayaut_wj.d.Lh= " f j I f--::aren E "
anCroid : layout*height= " fj,7 -ljaren L "
anriroi<l: erabl ed= " r? ue "
andr oid : cf ickable= " L rue "
androiil ; api,Key= "A r! tz (LAhht bawxQ 0Vc1A 7 e 8K2 x4wmghc CqDl<cl{VA'
/>
./ , .. ".'r...''-', )

Pada main.xml di atas dapat kita lihat apiKey dari Android SDK yang kita
gunakan, pastikan apiKey ini adalah dari Android SDK anda sebelum
menjalankan, karena setiap SDK harus memiliki ApiKey yang berbeda.
Dalam coding di atas kita menggunakan Gambar 12.16. Aplikasi GoogleMaps

r.'"l,. {...".1 ..' 'l i t.

android : id- " 6+i d,rmap[iew "
Selanjutnya kita akan mencoba kostumisasi tampilan tersebut dengan
variabel mapview inilah yang akan kita kirim kefile java sebagai identifier control zoom, kita akan defenisikan zoom yang berfungsi untuk tombol
untuk menampilkan tarnpilan google.maps control zoom untuk memperbesar dan memperkecil uieu dari google.maps
 ,,r,hingga lengkapnya file java kita adalah seperti berikut:
yang kita rancang. Tambahkan uariable zoom seperti berikut dalam
main.xml
<Li[earlayout android:id. " '' .: ' .r' gOoglemapsjava
android : layout-width ' .. ,r 1.. ' .r' t. r. i ,' ,

android:layout*height-' ."a1. r' ,i Lir-L' Dackag€ com.wi1ls, googlemaps ;

android: 1:iyoqt-a1 iO4ParentBottom' u Lru*' lmport com. goog 1 e . androi d . maps . MapAct ivi ty,'
android: Layout-centerHorizontal- " r'.'' I mport com. qoogrle . androi<1. maps, I4apview i
l> I mport com. qoogle - androi.d. maps , Mapview. LayoulParams;
lmport android. os. Bundle ;
Sehingga main.xml sepenuhnya menjadi lnport android. view.Viewi
lmport android. widget , IJinearlayout ;
<?xnl version= "1. 0" encoding= "ut f-8"?>
<kel aLl vel-,ay,>uL public clasg googlemaps extenda l'Iapactivity
xmlns : andro id='http: /,: /schernas. android. camlapk/ ::es /androi.d*
android : layout-width= " f i I 7 iaren c" MapView mapView;
andrOid : layou t *hei ghr= " f i 1,]--paren E ">
/.i Cal1ed w}:en the activitf i s {i rsL crealed: 't,/
<ionl. qooqile.. anclroi"d' naps " ryapa,riE"ld GOverride
android : Ld,= " @ + i d / napVi ew " pubJ"ic void onCreate (Bundle savedlnstanceState)
androi d : layout-wi dt h= "f i I ) Ja rent "
aldroid: layout-height = " fj I lJ:ar en c " Errlrer . oncreate ( savedlnstancestat e ) ;
andro id: enab l ed= " t rue " setcontentview (R. laYout -mair) ;
androi d : clickable= " E rue "
android : ap i Key' = " A I UZ dAbh tltawpKQ QVd) 1 e I KZ X4v'rmgbc CqDkcWVA " mapview = (I{apview) f indViewByrd {R. id' niapvjew).,
/> Linearlayout zoomLaYout =
( Linearlayout ) findviewByld (R, id. zaom) i
<LinearLayortt android: id= " @+ id,t zoom' View zoomView = mapView.geEzoomcontrols ( ) ;
andro.id : layout*width+ "htra.p*cqn aen f "
, .androl"d: layout-heiqh!: "ufa.tr,*cofic€.nf ' zoomlayout . addvie\u, ( zoomvi ew,
android : Iayout--aI ignParenLBot L om= " Lrue " new Linearlayout. LayoutParams (

androjd : laYout-centerHorizonLaf = " t rue " tayout Params . fi/RAP*COIVTEN?

/> LayoutParams' rrGAP*C0lv?E'Nf ) ) ;
mapview. displayzoomcontrols ( trlro ) ;
< / F,e'l aL i I clayou t >
)

ribrorias be kur P'"T:f;?i ililr**r:ti1,f.llrr9:i; ,,,,:::ir;iii.ir :::r:,.i," .r r::.,.

I@o.tj'6s.sooila.a6droid:'6r..xrlvr$4:'IavoutPrt!iir,r; I' .'': . .. ',, ,:...

ilbd,ti.irdroid;yls,vie{r , .:: :

dao l.jta memerlukatr coding untuk freng-handle apabila kontrol zoom zoom seperti gambar berikut:
difu ngsikan sebagai berikut:
tEr l,.r ! .u.EIr.{N '.tirEtwcv!ryJii R.id,sae$:elr: :
r,i.niiGrcur zqre,,int " Li6.rlaierii li.a<rvi.tBvrd E! la.39d. .
!.!er.'9o.vr*," meYi .s"tr":"ilc"1:.,1i6 i,: ' ..' ,.,.,,

!"*r^"""t..iiwr.* 'o*vr*, .
.:.jar lia6dL;lnyorr. L.yoqtrFa, aM :::
.
.:i:'.'r r.
ta!outp*-+. kBlE;idift"Y,'. '' ' ', '
'":,':r
.:, ' ":"'
Ie'YtutPa?a4r.WRAP-[ou-rffi ''
maDvis.disFlayz@co.rrols ttu
 </.,"- :: '>
. ' i: ll .Lli>
./ ,t:'x:;' >

rnain.xml
' :'\ I version= "1.0" encodi ng="utt-8"?>
,l i'/C",n /!1rt
. rn lns : androi S.* " http : ,/ /schemas ' anilroid, coml apkl res / andraid"
android: Idyour-width=" fiJt -patenL "
anclro id: layouL-heighE= "fj J J-parent">

< coir. uc<:g le . andrci d . :rap s' Mapv-i e** anclro id : i d= " @ + i d / nap "
an<lroid : layout*width= " f i 7.7 iar en t "
android : layout*hei ghL= "f: I fJ:arer: f "

android : api Key''' g lu7dA]:1ttba*pXQ AV<10 1 e 8K2 X4wmgl:ccqDkcuvA'

android: cl ickabl e= "rrue",/>
<Lir]$a i'!.ayo,;t android : Ld- "G+ i d,/ z aofi "
Gambar 12.17. Aplikasi GoogleMaps dengan zoom kontrol androicl: J.ayout widch= "wrap cotTtc'n1"
anclt ojd: I ayout -hej ght= 'w) dP-conLent "
android: layouL-aliqnParentBot tom= " "
android I tayout-alignPar€ntlef '7uc
t: " Lrue " >
Aplikasi codingmaps4 </ ti.L u\ ,l)

Pada aplikasi codingmaps4 berikut kita akan coba tampilkan sebuah lokasi
(nilai longiture dan latitude) diketahui, berikut adalah co ding -nya. <Lin{}arLay*ul-
mlns : andro id= "h L tp :,/ / s chema s . andr r: i d . e am / apk I r e s,/ andr o i d"
android: IayouL-width= " wlap content "
default.propertis andrt:j-d: layout heighL = "tdrap-L ont.ent "
android, I ayout .a1 i gnPare:LPortofll= " t rue "
# Project targeL. android : layouL*aliqnParentBiqht' "Lrue" >
targeL=Coogle ln-. :Couglc API::a
<But"' i ilri
android : id-, g * i.d/ Saae.l j t,,
Android.Manifest.xml anclroid: I ayoul-wi dt-h= "wr.rp-cont'efl c "
android : layout*height= " trr-ap--c'on Ler t "
"I C" encocling-"uLf -8"?>
<?r-l.nl wersi.on= .:ndroi cl i text= " laI cJ i t-'
<riiirnllesi xmlns:androio="htlpr sc,he.,nos..r;:droicJ.r:omlapklres,tanLfu aid" android : laYout-x= " 2 5 ?Px "
pa. k:ge= "coft1 .wi) j.+.1"66f 1716;1,3p5J"1 android : laYo.ut-Y= "5PY'
<r1$*s--iro.rrli-s:;ion. androirl:name= "and.rojd.perrnJss:ox. fN?Eql,/trT' /> <,/ B,:r- t rr>
<., ,,,":
dnclr o i d : namc= " and ro i d . pe rniss i orr . 1\(e EI..3-COARSE 1 Lr('/77 ON " /> <*rl ic
android: id= "0+id,zJalan "
<.:J..j., ( .. ......': android: :con= "@dtawaofct icon" android : layo ut*width' "wr6p-con ren t "

and::o j ci : I a you t.- he j gh r = " wr ctp-con t eil L"

an,Jroi<i: label = @string app-ttdft;e">
"
<::ses.'.l i.l:ralir android:name= "co"rn" googTe, andtc:id.maps" aRdroid: text= "StreeL "
/> laYout-x=':58l}x'
an<1roid :
<.rrl'',',-y androj.cl: name= " . r-odjngmaps4" android: I dYOut 3Px'
-V= "
arrciroid : lalrcl = " As Lri ng rpp-name ">
<llliCrll l-. . > < /BuLLcn>
<.:]{ri'i*!l eindroid: name= "aadroid. intenL. a€tioi1.MAIN " / >
< ir.'.'a: android:namC= "ar:,/,.,,J. infenL .catega-r). - LAWI( HER" /> </Linear:LaYr:r-: l>
</.t^.+r.' 'i i r> /:*l,a|CLJ'/i.L->
Perhatikan coding
;com. qoogle. android.maps.Mapview androi<l: id= " E+id/map "
- android: layout-width= "fi-11-*pareflL "
andro id r tryour-fr"ight= " f il l--.parenr "
andrord : api Key = " A IA 5 dAbhtbawpx}Ovd1 I e 8K2 xawngbccqDkcwA "
android:cf ickable= "Lrue" ., .

ini API Key yang di-g enerate dari SDK Android kita.

string.xml
<?r*ml version= ".1. 0 ". encoding= " utf -B " a. >
<I e90,1rces>
<rr ri,rj name='he7 Jo"></sLrr ilcT>
< str inq name= "app-name ">codinqrrnaps4< / s t r i rig >
</, a:.r-t,f t o.:>

codingmaps4java
xrackage com. wi1is. codingmaps4 ;

inlport androi d. graphics. drawabte. Drawabl e;

inport android. graphics. Canvas ;
irnpsrt android. os.. Bundle ;
irqlort android. vj-ew. KeyEvent ;
lm&rort android.
vidw. View;
.ifiport android.
view. Vie.wGroup i
view. Vi.ew. OnCl ickl,i stener
fuhDort android. ;
import android.widget. Toast,'
i:n6rort com. googl e . andro id. maps, OeoPoint ;
ort com. googl e . andro id. maps . r Lemi zedover 1 ay,'
itnE
inport com, google. android.maps.MapAct.ivity;
innort cor[. googl e . ar-rdro id. maps . Mapview i
tnpr-rt com. googl e . andro id . maps . lly],ocat ionover I ay,'
imxrort com.qoogle. android.maps,OverlaylLem;
import java.ut il.Arraylist ;
irnport java.uti 1.List ;

I)ubliq claee codingrmaps4 er(!end6 MapActivity {

Privat,e MapView map=nu11-
xrrivaba lb/Location0verlay me=null ;

85..ippre.sswerrr ings {' deprecation " )

SovE:r.rir1r
't ..;.uc prot€cted. boolean isRouteDisplayed ()
Xrublic woid onCreate (Bundle savedlrrstancestate) return(fa1ae);
super. onCfeate (savedlnstancestate) ;
seEconLertview (R. layout . mainl i )

map= (MapView) findViewByld{R. id.map} ;

3f,cri -rc
 pubLic boolean on(eyDown(lnt keycode, KeyEvent event) { public inb sizeO {
if ikeycode == KeyEvent.K.6'yCoDFl-,9) { r€turfl (items. si ze ( ) ) ;
map. setsatellite ( !map. isSat.ellite () ) ; ]
return(true); I
)
€lse if (keycode :a KeyEvenL.KEYCODE-Z\ {
. map.displayzoomcontrol"s (true) ,
return(true); l'crhatikan potong codingmaps4 berikut ini:
1
J ' .,p= (Mapview) findViewByld (R. id. map) ;
',,, rgetController
p . ( ) . setcenter ( getPoinL I- 6. 893211", l-07 . 61 053 9) ) ;
return{6uper. onKeyDovnn (keycode, event) ) i .,n. getcontroffer ( ) . setZoom (17 ) ;
)

private GeoPoint getPoint.(double 1at, doubLe 1on) { Irita memberikan posisi lokasi ( - 6 . 89321L, 1,07 . 6 1 0 5 3 9 ) yang merupakan
return(new GeoPoint ( (int) (lat*1000000. 0), rrilai lokasi dari Jl. Ganesha, Bandung yang kita dapatkan dari
(int) (Ion*1000000.0) ) );
nraps.google.co.id dengan cara teknik yang sudah kita pelajari pada awal bab
lrrrgian ini, sehingga aplikasi kita sudah otomatis mem-uieu-kan lokasi dari
pri?ale cI66E siteFoverlay e,rt6nds ItemizedOverlay<Overlay1tem>
titip pusat lokasi yang kita tentukan, sehingga nilai gps tidak ada dikirim
priwate List<OverlayItem> items.new Arraylist<Over]ayIt.em> ( ); ,ltri hardwore gps melainkan kita masukkan nilainya langsung di-coding
5rrLvale Drawabl"e marker-nulI i;rvanya, untuk coding maps dari nilai yang dikirim dari gps akan kita bahas
t'ubric e marker) { rli program codingmaps5. setzoom(r7) adalah untuk nilai zoom dari maps
liita bernilai t7, anda bisa mengubah ini menjadi yang lebih besar atau lebih
x#i::?:i1f"--,- '
kccil sesuai dengan tampilan seberapa besar/kecil mop uieu yang
rI itampilkan diaplikasi kita.
items . add (new .OverlayItem ( getPoinr ( -6 . 8932 11, 107 . 6J-053 9)
"Jln.Canesha", "Jln.Ganesha" ) ) ; r ems. add (new overlayltem (getPoint ( -
populateO; ,,.8932LL,107.610539), ".Jlr.Gdnesha", "Bandung" ));
]
i.-...t1..rJ.. ini adalah untuk membuat keterangan yang ditunjuk oleh getPoint dengan
protected overlayltem creaLeltem(int i) { nilai ( -6 .89321-i-,l-07. 610539 ) . Potongan coding berikut adalah untuk
roturn(i uems.get (i) );
l neng-handle apabila user melakukan click terhadap button satelite dan
i slreet.
POver.r'id{: . ,,t
I
public voLd draw(Canvas canvas, Mapview mapview, ll,rtton satelitBtn = (ButLon) findviewByjd(R. id. Sate-7iL) ;
boolean shadow) { ii
I.,rLton jatanBtn = (Button)f indviewByld(R.id. Jalan);
super.draw(canvas, mapview, shadow) ; r'i I )r awable *ar146y=getResources { ) . getDrawable (R. drawable. marker) ;
I lr, r rker . set.Bounds
, 0, ( 0
tom (marker ) ; ',r,rrker. getlntrlrsicWidth( ),marker. getrntrinsicHeight
boundCenterBo L ( )) ;
) I ',.rp. getoverlayi'( ) .raa(lrew sitesoverlay(marker) ),'
li
I rlr
r,,-nevr Mylocationoverlay(this, map) ;
r\iV --: ,f i a1* rj ,,,rp. getoverlays ( ) .add(me) ;
protect€d, boolean onrap(lnt i) {
Toast . make?ext ( codingmaps4 . thi6, : r,) re 1 i tBtl]. s-etoncl i ::L.::::"::j?fl,onc1 i ckr,i stener (){
pqblic uoid onCllck(View v) {
ltems. get 1i) .qetSnippet ( ), map, setstreetvieu/ ( f aLEe ) ;
map. seLsat.ellite ( true) ;
Toast. Iaivcr}l (
^SHo.&?) . show ) i
)
roturrr(trlre), t;
1 ,rl anBtn. setonclicklistener (n€w OnClicklistener ( ) {
publlc void onclick(View v) {
E*vclrridr: map. set.SEreeEView ( Erue ) ;
 map. setsatellite (fa16e) ;
]
]
);

Di mana id.satelit dan idjalan sudah didefenisikan didalam main'xlm kita

dan dipanggil dengan perintah findviewByld(R.id.sorelit) dan
{indviewiyla6.ia."rolo,r), defenisi uariable adalah dari potongan main.xml
berikut ini:
. Button
android : id=' G+ id / Sate f .i t "
. anrLroid: layout-width"h'rap*content "
android : layout. heiqiht= " wratr:--co nt efit "
android: iexL= 'sacefi t "
android: laYout-x=' 2 5 Br:x "
android : laYout-Y; " 5P1 "
. Button.
- ButLon
android : id= " G' i d t Jafan " Gambar 12.17. Aplikasi codingmaps4 view street
android : layout-widLh= "wrap-conLenL "
androici : .l ayout-he ight = " wt ap-conr e nt "

androi d: ta*t= "Srta.r "

android: IaYout-x= " 25BPx"
android : 1 aYout-Y= "JPa' Aplikasi codingmapss
' . BuLton: l';rclang codingmapsS ini kita akan rancang aplikasi di mana kita
rrrcnentukan posisi keberadaan kita dalam bentuk maps yang didapatkan
Apabila aplikasi codingmaPs4 di ,lt'rrgan membaca nilai dari gps hardware kita (dengan mengirimkan nilai
jalankan dan kita Pilih button lol<asi). Aplikasi ini sebenarnya kalau kita running di deuice mobile android
Satelit akan menghasilkan sepeti r;rng memiliki gps akan menampilkan posisi keberadaan kita yang lebih
gambar beriktu: ,lil<enal dengan istilah "where am i". Tentunya ketika eksekusi program ini
L i ta membutuhkan koneksi internet.

tlefault.propertis
'r l,roject target
' ,, rget=Google Inc. : Googl e APfs : I

Android.Manifest.xml
.' ve.rsion="-1.0" encoding="utf-B'?>
r;r.l.fest xmlns:android-"http://schemas.andz"oid'com/apk/reslandroid"
package= " cam. wi I i s . ccLdingmaps 5 ">
. I l i. .rt lcr.
android: icon= "@drawabJe icon">
< i'.,, i - 1.: i:- a
:
".,r android ; name= com. g oog 7 e.
" and.L c: i d. maps " / >
< .i 't -v i i. y
android: name= " . codingmaps\ "
Gambar 12.16. Aplikasi codingmaps4 android : label - " Gscr i ig t app-nam? " >
view satelit <;nl,-3f ti-', r'>
 <action android: name= "android' inEent. action-MAIN" />
.a;;4,;;, l' a.atoi a : name='' andro i d.jnren t . cdLegor v. LAn:HER " />
</ir'tcrt L.j er>
<,/:u-:'r. rY>
</aY,P':' .'.1
<us es j j
$ $ r Qn andrc id : name= " andro d. permj ss on - fl\lr.cEnlEf " / >
-perm1
<*.:r 5 pe?':r,i 1.'' rcI
androi d. : narre= "ancfu a i d . rte t m i ss i on . ACC E S 9-F I NE- LOC A'f I ON " / >
</:iJnl r!:.'>

main.xml
<?xmi version= "1. 0" encoding= "ut f-8"?>
<:..ncrrl 4J iuL
:m1lns : andro id= "h t rp ; / / s cherna s . a.rrdroi d. c csm / apk / r e s / andr o i d "
android. : ori enLa L ion= " ve.rt i ca l "
androi d : 1 ayoul-widt h= " f j .l I J>at ent "
android: Iayout -he.ighr= " tiTi pa tent">
<Tc \ L'./-L /,

android : id= " + id / my Loc at i onTex t "

@

android : layouL-width= " fif L*--paren r "

andr oid : layout-hei ght= " wr ap-con tc.nc "
android: text= "Asrri ng/heJ)o"

<con. googl"e, android. maps ,}{apview

andro i d : id* " I + i d "t mvKar:vi ew"'
anclro j d: layout-vridt h= " f il fJsarenl: "
andrr:id: layout-heighL= " fiLiJ)arent "
android : enabled= " t -(ue "
androi d : clickable= " true "
android : api :Key = " 0 7UZ&\bh tbaWXQ0vd0 1 e 8K2 xLwmg bcCqDkclqlA'
/>
</:.i nCJ'i."1. Cr,lr>

Pastikan apiKey sudah anda ganti dengan apiKey dari Android SDKAnda'

string.xml
<?xmI version="1.0" encoding= "utf. 8"?>
< r e5(rU rr:eS>
<str i nq, name= "hel-lo"></st r : ng>
<s: r...:.r:il name= "app-name">codingmaps5</st r inu>
</tcsour '.',>

codingmapss.java
package com.wi 1is . codingrmaps5 ;

import jawa. io. IoExceplion,

import. java.util.List ;
import java. util. Locale;
import com. google.android.maps.GeoPoinL,'
import com. google . android. maps . MapActivity ;
 ) mylocationText, setText ( "Your CurrenL Position. i-s: \n! +
latl,ong:St.ring +'\nrt + addressgtring)
privat.e final LocationlisLener locationlistener = new
Location],istener ( ) {
public void onlocationchanged(Location location) {
updatewithNewlocat.ion ( f ocat.ion) ;
Ls€ation Contrcls
.
i-r"r;;;;i-l-qja-ir {.!t!,$...*i _
public void or.rProviderDisabled(String prowider) !9 Decimal
updatewi thNewlocation ( nul-1 ) ; j-::':l Seag elimat

Longitude ioi.oig:z
public void onProyiderEnabled(String provider) t ) Latitude -O.aS9ZAA
public void onstatusChanged(String provider, int status,
Bundle extras) { }
Gambar 12.18 Nilai Lokasi codingmaps5
private void updateWithNewlocation(Location focation) {
String faLlongstring;
Textview my]-ocati onText,.
mylocationTexL = (TextView) f i ndviewBy-td ( R. i d. mylocationText );
String addressString = "No address found";
if (location != nu11) {
// Update the map location.
Doubfe geolat = Iocatj on. getlatitude ( ) * 1E6 ;
Doubfe geolng = Iocat.ion.getlongitude() *1E6;
GeoPoint point = new GeoPoint (geolaL. int.Value(),
geol,ng.intvalueO);
mapcontrol. ler . animateTo (poinl- ) ;
double fat = l-ocation. getlatitude ( ) ;
doubLe lng = lo"raion.getlongitude() ;
lallongstring = "Lat.: " + lat + "\nlong: " + ]ng;
doubfe latitude = l-ocation.getlat-LLudeO ;
doubfe longitude = Iocation.getlongitudeO ;

Geocoder gc = new Geocoder(this, Locate.getDefau,Lt() );

try t
LisL<Add-ress> addresses = gc.getFromlocation(latitude, fongitude, 1) ;
StringrBuilder sb = new StrjngBuilderO; Gambar 1 2.1 9 Aplikasi codingmapss
if (addresses.sizeO > 0) {
Address address = addresses.qet (0) ;
for (int i = 0; i < addiess,getMaxAddresslinefndex0 ; i++)
sb. append (address. getAddressline (i) ) .append( " \n" ) ;
Aplikasi codingmaps6
sb.append(address.getLocality( )) .append( "\n" ) ; Hampir sama dengan aplikasi codingmaps5, aplikasi codingmaps6 enam ini
sb.append(address.geLPostalcode () ) .append( " \n" ) ; rnenggunakan modul myposisionoverlay dan hasil tampilan akan
sb. append (address. getcounbryName ( ) ) ;
I
menunjukkan posisi kita di peta dengan tanda tulisan posisi saya.
addressstring = sb.tostring( );
) cat-ch (IoExceptjon e) {}
etse t default.propertis
latLongstring = "No focation found"; H Project target.
target=Coogle Inc. :Coogle APls :B
codingmaps6 java
xrackage ccim.wilis. codingmaps6 ;
irport java. 1o.. louxcepL&on;
ifiEort java.util.LisE;
ixXrrt java. ucil. Locale;
in4lort com. google. android.maps. GeoPoint,'
lxErcrt com . qtoogle . androld . maps . uapActivi ty,
 locatior:-l4anager. requesLlocationupdates (provider, 2 000, 10, ]
.
l-ocationl,ist€ner) ; addressString = sb. tostrj-ng O;
I
] cEtch (IoException e) i)
] else {
private final- Locationl,istener locaLionl,ist-ener = new IatLongstring = ''No loc.lLion f ound." ;

""'";i::ii:;i:iIi:::l:::ti::::i:ff:"* 1'ca'Li'n {
I

mvtocaLionrext' setrext -'

I:ffi"ffi;:l:r":'iii?".':;;:;.:rrrins)
)

public void onProviderDisabled(String prowider) {

updatewi thNewlocation ( nu11 ) ;
MyPositionOverlay j ava
pubJ.ic voidl onProviderEnabled(String provider) { } 1,, rckage com,wilis. codingmaps6 ;
public void onstatusChanged(String provider,, iat status,
. Bundle extras) { } , rr.1,ort androi d . graphi cs . Canvas;
, ,ort
r.t android. graphics. Paint;
r rI1 rort and.ro j"d , graphi cs . Point ;
private woj-d updatewithNewlocation(Location location) { , rrl,ort and.roid. graphics. RectF;
String f at.Longs t.ring ; L rrl)ort android. locat.ion . Loca.t.ion; .

Textview mylocat-ionTexL ; rrt,orL com. google.android.maps.GeoPoint;

mylocat ionText = ( TextVi ew ) f -lndVj-ewById R. ld . my Loc a t i onTex t \
( il I,orL com. google.android.maps.Mapview;
String addressString = "No address found"; nt)ort com. google. android,maps.Overleiy;
L rlport com . google . android'. maps . Proj ection,'
. if (Location l= nu1l) {
/l updeLs my local,icn narkE:r , ,l,1.ic class MyPositionOverlay extends Overlay {
posit ionOverlay. seLLocation ( l-ocation) ;
1'rivaLe final int mRadius = 5;
l/ Update the lnap irraticn. Location location;
Doubfe geoLat = location.getl,atitude( ) *1E6; t,ublic Location qetlocationO {
Doubfe qeolng = Iocatjon.getLongitudeO *l-E6; return locaLion;
GeoPoint. point = new GeoPoint (geolat. intvalue ( ) , I

geo],ng.intValueO); public void setl,ocation(Location focation) {

this.location = location;
mapcontroller. animateTo {point );

dou5le fat = focation.getlatitudeO ;

(,rOverride
doubLe 1ng = l6"rgion.getlongitudeO ; 1,ublic boofean onTap(GeoPoint point, I4apview mapView) {
latlongstring = "LaL:" + fal + "\nlong:" + Ing; return fafse;
double latitude = Iocation.getlatitudeO ; (dOverri de
double longiLude = focat.ion.getLongitude( ) ; public void draw(Canvas canvas, uapview mapview; boolean shadow)
Proj ection proj ection = mapView. getProj ect.ion ( ) ;
Geocod,er gc.= netr Geocoder(this, Loca]-e.getDefaulcO ) ;
try { if (shadow == false) {
List<Address> addresses = gc.getFromlocation(faLit.ude, // GeL the current location
. longitude, 1); Doubl-e ]atitude = location.qet.Latitude O *186;
StringBuilder sb = new StringBuilder(); Doubfe longiLude = location.getlongitude() *1E6;
if, (addresses.sizeO > 0) { GeoPoint geoPoint;
Address address = addresses.get(0) ; geoPoint = new
ceoPoint (fatitude. intValue ( ), fongitude. intvalue () ) ;
for tint i . 0; i'.i"ddt*"*.getMaxAddresslineTndexO; i++) // Convert the focation to screen pixels
sb.append(address.getAddresst ine (i) ) .append { " \n" ) ; Point point = new Point ( ) ;
proj ection . loPixels ( geoPoint , pointl): ;
sb. append(address. getl,ocality ( )) .append( " \n" ) ;
sb.append(address.getPostalcode( )).append( "\n" ); RectF oval = new RectF(po1nt.x - mRadius, point.y - mRadius,
sb. append ( address . getcountryName ( ) ) ; point.x + mRadius, point,y + mRadius)
/ / Setup the paint
 Paint paj.nt . new Paint ( ) ;
paint. serARGB 1250, 255, 255, 255) ;
paint. setAnLiAfias (true) ;
paint - seEFakeBoldT€xh ( t,rue ) ;
Paint backPaint = new Paint. ( ) ;
backPaint. seLARcB l1l5 , 50 , 50, 50 ) ;
backPaint . seL.AntiAf ias ( true ) ;
. RectF bac.kRect = new RectF(point.)< + 2 + mRadius,
poinL.y - 3*mRad.ius,
;;t;;:; + 05, point.y + rnRadius ) ;
/ / DTaw the marker
canvas.drawOvaf (ova1, painL) ;
canvas.drawRoundRect(backRect, 5, 5, backPaint) ;
caavas. drawText ( "pasisi Saya",
poinL.x + 2*mRadius, poinL.y,
paint); BAGIAN 13

HANDLE TELEPHONE
I
super.draw{canvas, mapview, shadow) ;
)

Kirimkan nilai gps dari emulator seperti

I u".."r lei;i I *ur
berikut:
i

o Dec'ma,
i';'Sexase'imal
L6ngitude 1q7.62f44f
LatitudE -5.8ry214

Gambar 12.20. Nilai gps codingmaps6

Sehingga menghasilkan seperti gambar berikut:

l'ada bagian ini, kita akan membahas bagaimana membuat aplikasi di

android untuk melakukan Dicl atau panggilan serta SMS. Secara umum
rrndroid adalah telephone,jadi fungsi membuat Dtol/SMS merupakan salah
l'ungsi utama android. Pada bagian ini kita akan merancang sebuah proiect
.yang fungsinya dapat melakukan Diol/SMS. Tapi sebelumnya kita akan
rnencoba bagaimana melakukan Dial/SMS terhadap emulator yang sedang
berialan.
Gambar 1 2.21. Aplikasi codingmaps6
 ,l;rrr pilih sms dan ketikkan pesan/sms pada isian Message, berikut adalah
DiaI Emulator lirrrnbar penerapan SMS ke emulator Android kita.
Dengan emulator kita dapat menyimulasikan peng-handlen Telephone
(membuat dfol/sms ke emulator, caranya adalah melalui tools DDMS In.omingnumb€r W1lffi
(Daluik Debug Management System) yang berada di folder tools Android
il 9Ms
SDK. Kita, double clickfile ddms dan pilih Emulator Control - Pada fob lle5ige:''**,iun,.;""r"g,d'-l*-:

Telephony Actions masukkan nomor yang akan melakukan Dral ke

emulator pada Incoming number kemudian pilih opsi voice dan c/ick
l*d ..:,:.ir
tombol Call seperti contoh pada gambar berikut:
Gambar 13.3 SMS ke Emulator.

v"t.", |lat9r.,. :..,:,1 sp*a, iF*ii. .-i

o",.. ,;*" - r.reh." Non.
TclePhony a.hon5 Schingga pada emulafor kita akan muncul seperti gambar berikut
In(ofrin9,1umb€r ac5?65653133

.rsMs
i

: ill lels 9p l

Gambar 13.1. Membual Dial

Emulator yang sedang jalan akan berbentuk seperti gambar berikut:

W"lI 0si:6*egogo*, s"lu-ur

l. Malarn Pak, Lagi dimana ?

!r:fii t::li'rl
....** --:Si::lilll iliiii
, &ka)

Gambar 13.4 Emulator SMS.

Aplikasi DialDemo
l(ita akan merancang aplikasi yang kita sebut dengan aplikasi dialdemo, di
rnana dengan aplikasi ini kita dapat melakukan panggilan/diol terhadap
rromoryang kita masukkan. Buatlahproject dengan ketentuan berikut:
Gambar 13.2 Dial Masuk. Project name : DialDemo
Target Android 2.3
Application name dialdemo
SMS Emulator Package com.wilis.dialdemo
Activity dialdemo
Begitu juga dengan SMS, kita dapat melakukan SMS terhadap emulator,
pada pilihan Emulator Control masukkan number pada incoming number .ladikan coding layout main.xml nya seperti berikut:
I

<rrtiviLy android:name= ". diaTdemo "

main.xml android : labef = " G str ing / app-name ">
<?rm} version= ",1. O" encoding= "utf-8'?> <arl.ion android:name= "android. inf ent .actian.I,IAIN" />
<LineariL;.voul /',. -'er.'r'7 android : name= " andt o i d . ; nLen t: . cat egary. LALJNCHER " />
xmlns : andro id= "h tp : / / schemas, android. corl,/ apk / r e s I andr o i d
C "
<zi.'.st'- f:l'.c:>
android : ori entation= " vert ica7 " </t 1' .Ll>
android : layout-widt:r.= " fi7 l--paz ent "
< / .c)- i1.'i.rt.:orl>
androi<1 : layout-heiglrl= " fj LIJaren r l <,iL,. sok android:minSdkVersion ="9" />
::.':it>
<L,',e"rr Lavr.. .t
android : o::ient ation= " hor i eantaT'
android : layotiL-widt h= " f i I L-Lcar ent "
android : layout*heigin!= " wt:ap*c ontent "
tlialdemojava
<?extVielt
android : layout*width= "wrap-con Len L "
android : layout-heighL= "n:rap-con Lenf "
android: texL= "lvoffor Teleqon: "
/>
<fr.1i LTe:{a andrr:id : id* " G +id/ num}er T

android: layout-width= "fif fidrent "

android : layout*hei g rl, = " wr ap -c on t en t "
android : cur sorVisi ble= " t rue "
android : editable= " frue "
android : singleline= " t rue il
/>
</L ncrr] I :t // ,1)1.>
<l1L): i.on anciroid: id= " A* id/ dja7"
androicl: I ayout-widt l,= " filfJ:arent "
androld : lavout*hei ghl- "I/rap*content rf

androicl: layout*weight= "-i "

androicl:text="C a f 1. "
/>
< / L. .',ea, l.trY' r.; I>

Default.propertis
+ Project target
Target = android-9

String.xml
<?xnl version= "-1. 0" encoding= "utf-8"?>
<yesourc€s>
<$ t t: j. r.g nanie : " app:r]ame. "> Di a I erDemo< / s tr i ng>
</:' ', . .rc, :.,>

AndroidManifest.xml
<? rn.. version="?. 0" encoding="utf -8"?>
<nranitest xmlns:ar:droid= "itLp: /,/schernas.androjd. cam/apk/res/and::rsid"
package= " com. u' i.7is. d ia I demo "
anclroi d :versionCode- " l "
android:versionName= " t -0">
<*.pp} ir:rrl i *rr android ; i con= " 6drai,va bJ e I i c on "
andro i, I : I abcl=' @sLr i ng /dpp-ramL.'>
 t

running aplikasi dan akan menghasilkan aplikasi seperti berikut: android : layout*wir11-h= " f: l. llrarer:t "
.rndroid: LayclrL he-ight= "wr<tp -conLcnL'
anclroid : text= "Md.sukkan tVomor penetrma "
/>
<,,,, 1,.ra:(r
androi d: id= "O ti d/tx:-PhaneNo"
android.: IayouL-widch=" ri LJ J)at:ent"
ancLroid ; layout -height= " wt ap -contenL "

/>.
< ,rt:ir-r.
arrdrcid: J ayout_width= "fiJ 1 - parest "
android: Iayout*hei ght= "rilr'ap c()ntenc "
andro id : text = "Mes sage "
/>
< .u' . Te/"-
android :'Lc!= " G+ id / t xEMe s s ag e "
android: layout--widih= " f i-IfJsarent ''
android : 1 ayout_he i ght= " I 5 Apx "
android : gravi Ly= " 16,p "
/>
<PLL; 'ln
andro id : i d= "A+ i d / b tn.Send.ctrf.5 "
andr oid : Iayout_width= " f il *pa rent,' 7

Gambar 13.5 Aplikasi DialDemo ndroid : layou t-he ight = ";dt'ap- c onten t
a "
androi d: texL= ".Sencl SflS "
/>
'/ r' iLrlOUL>
Aplikasi SMS Messaging
I)efenisi main.xrnl ini adalah untuk menghasilkanloAout seperti berikut:
Sama halnya dengan Dial, SMS juga merupakan merupakan fungsi utama
dari android, pada aplikasi ini kita akan lihat bagaimana membuat aplikasi
yang dapat mengirim sms pada sistem android. Aplikasi SMS ini akan kita
rancang untuk dapat mengirim pesan dari satu emulator ke emulator
lainnya. Buatlah project dengan ketentuan berikut:
Project name SMSMessaging
Target Android 2.3
Application name SMSApp
Package com.wilis. SMSMessaging
Activity SInS

Ubah coding main.xml dan jadikan seperti coding berikut:

main.xml Gambar 13.6 Aplikasi DialDemo

<?:r,I version="I.0" encoding="ufr- B"?>
<. in-.:,LJyaJL
xmf ns : andr oid= " h t cp : / / schemas - andro i d . com, apk re s,/ a nd ro i d" Pada AndrodManifest.xml kita tambakan permisson SEND SMS dan
android: ori entati an= " vert i ca l "
android.: Iayout -widrh= '' f i 7l parcnc" RECEIVE_SMS, sehinggan AndroidManifest.xml kita selengkapnya adalah
android : layoul-height = " fr -1-11:aren E " seperti berikut:
< p^ l-\l ie,r
 Ut
AndrodManifes.xml
<?xrI version= " 1.0" encoding="uEf -8"?>
<mani Ie:t xmfns:android= "hLtp; ,/ /schemas.android.com./apk/res/anc]zoid"
package= " com. w i.7 is . SMSMes sag ing "
android:VerSionCod.e-',,fn......;;........
android :vers ior:.|iame= " ) . 0. 0 ">
<app1icatj.qnandroid:icon=,,6drah]ab7Q/lcon,. 'i
android :I abel= " As t r i ng / app-name "> ,lt i
iviL,z android: TuI*: " : :MS"
<.rct
lr,ir
rli,
-., android:1abel*',6s,,tringrlapp_I]&rid'>,' .
..
<in"er,t Iilt-€]> -
<.a iL i on androirl : name='' androi d. in t en t . aC.iion,.l{AIlrI' I >''
<iategory android : name= " android.jn rent', Cat:'ega{y. I4Atn.IellEe' />
</,ntcnt-tilLer>
</actrvIiY>
</ar;pi icat j on>
<L-r.;cs-pe::r.i.sc ion androld:name= "android.permission. ^9EJVD-SM.9">
</ilsL s -l-reLril--js.l uiI>
<uses*p€irmi.s$itlrf, android:name: "androjd, Pelilniggian.R&QgIVE-SMS">
</tlsas-perrnission>
</narr i frsL>

SMSjava
packag€ com. wi li s . S!{sMessaging ;

inport android. app. Activity;

irqrort android. app. Pendingfntent ;
irDDort android. content. BroadcastReceiver;
irnport android. cont.ent. . ConEext ;
*rytort android. contenb . Intent ; .' i. . . l

inport android. content. IntentFilter ;

iryprt .android. os . Bundl} i
irq>ort androi d.vi ew.View;
5.lport android. widqet. Button;
i$rort android. widget . Edit.Text ;
lnport android.widget. Toast ;
public class SMS errtends Activity
1

. ., -u,Ef,on btnsendsMs; .

EditText txtPhoneNo;
EditText txtlvlessage,.
'/**.Called .when tile qctivity is flrst cr€aL€dl.:t i/
GOver ricle
public void onCreat.e (Bund1e savedlnstancestate)

seLcontentview(R. fayout .main\ ;

btn$end$M$ * {gut Eon) f indviawByrd {R ; id. btnsends.i4s} ;

txtPhoneNo = (EditText) findviewByld(R.id. txtPhoneNo) ;
txfFlessage = (Edibfext) f indVievlByld(R. id. txtffe.ssage ) ;
btnsends$S . setOnCl ickli s tener B€w Vi ew.
( OnC1 i ckli s tener ()
 *f
Dulrllc void. onReceive(ConLexL argo,Intenl argl) i
swibch (getResultcodeO )
1

case AcLivi ty - RESIJLT_aK :

Toast . make?ext ( getBa secontext () , " SMS de I i vc rcd " ,

Toast. LENGTH_SHORI) . show ( ),
break;
case Activi ty . RESULT-CANCELED :
Toast.ftake?ext(getBasecontext( ), "SMS noL defivered", ini adalah pesan dari emulatOr
Toast. iEiVcf{_SJ{Ofir) .6how( ) ; sebelah
break;

j*=,=,,r;,;;",. ;;;;;;;,;;;I*,,,',1,.= =.n. sen, Pr

"" ]
I

Sebelum running aplikasi aktifkan dua buah emulator kita, kemudian

Gambar 13.8 Aplikasi SMS(ii).
running aplikasi dan akan menghasilkan gambar seperti berikut:

SMS dari 5554 sudah diterima oleh emulator 5556, click notifications di
emulator 5556 untuk melihat pesan, seperti gambar berikut:

WY 'rEsgsa:,ggia: ini adatah

Si:,tt,,,.,l.tl pesan dari emulator sebelah
.:...i...-......,.:
Sent: l:144$4
Gambar 13.7 Aplikasi SMS(i).
L
| )I"' rr.ri,r )r ,l

Perhatikan emulator yang jalan aplikasi sms dikenali dengan number 5554 Gambar 13,9 Emulator 5556 membaca pesan.
dan emulator yang satu lagi dikenali dengan number 5556. Isikan SSS6 di
nomor penerima dan tuliskan pesannya "ini adalah pesan dari emulator
sebelah" dan lihat apakah emulator 5556 menerima pesan tersebut. Apabila
dilakukan dengan benar akan menghasilkan seperti gambar berikut:
Aplikasi SMSBoom
Berikut adalah aplikasi yang kita lakukan kostumisasi dengan aplikasi
smsmessaging yang di atas, di mana akan dilakukan pengulangan untuk
mengirim pesan terus (bomb) sejumlah variabel perulangan pengiriman
pesan yang di input oleh user, aplikasi ini sering digunakan untuk
membanjiri nomor tertentu dengan sms. Satu sudut pandang aplikasi ini
agak sedikit berbahaya apabila digunakan untuk hal yang tidak benar.

Desian tampilan inputan seperti di atas di mana ada 3 isian yaitu nomor,
pesan, dan jumlah pengiriman sms. Coding tampilan diatas adalah sebagai
berikut:
android : layout-x=' Apx'
anclroid : Jayout-y-
2
") 0px " sms.Java
</:.,1 ..:'>
<l.rx.'. -i t
android: id= " G-rid,twidqet4,L "
android: layout_wi drh= "rurap_conl enr "
andro jcJ : 1 ayout- hei ght=' wt ap-con'.ent "
ondroid:tcxl="Mcssage 1()opin9 (Nu.nt)er ) "
android : layout_x= " 2 ?px "
androj-d : 1 ayouL--y= " 2 I n px "

</ . .-.<- .: rj.,>

<1.. : .f\.
android: id= "6i i d/duras i -
andro j.d : l ayout-vridLh= " 55px "
andro j d; J ayout-he.Lght= "wr,rp- cant en.L ''
android : t extsize= " 1 8sp "
android: .i ayout_x= "2}px"
android: layout-a.= " 223px"
</r;. : .I-^ >
<rlL:l', '

androi d : j d= " @+ i d / btnsendsl,ls "

antlroid: 1 ayou t.- wi dch= " 72px "
android: I ayouL height= "wrap-cantent"
android: LcxL= "Send"
and.ro-id : layou t-x= " 2 }px "
android : layout-y= " 2 a Apx "
</LLr -ufl>
<Bu1-hi:l
android: id= "@+i<J. btn exi c "
android: layoLLL-vridL h= " 66px'
android: layouL-hei g:r]t= "wrap-canLent "
android: text='Exi t"
androi d: 1 ayout-x= " 1 0 apx'
androi d : 1 ayoutj= " 27 Apx "
</sui1'c:-r>
<!'r,r''i*'..'
android : id= " @+ id / wi dget 4 5 "
android : 1 ayou t-wi dth= "r/rap-c on ten t "
andrcrid : 1ayout*heigytt= " wrap_c ant ent "
android: Lext= "By : nsaf.adt.wordpress.com" if (SLrinq.valueOf (txtFhoneNo) == "081268680908"),
android : layouL.*xE rtrrpx " t
android l layout*yr 3 1 Apx' u

finish () ;

<,/1'exrV iew>
</Al_r' .,,11 q .a,/,)u..>
inc i;
.:,.;rX.::'".." fl.oat n1 = FloaL.valueof (akhir.getTexL () .LoStringO );

if (phoneNo.l-ength( )>0 && message.length{)?0j

l/lakukan perulangan pengiriman sms tapi jalan di
lrackground
 for' ( ia$; i < nl'; i++ 1 1 't,rri;,,iit
sendsl4s(phoneNo, message) i ,ilr"r'll
try{ I

wait(200);
] .eaich (hcerrupt€dException
.

.q,);,,:l
,:..:iit;
{
i . /l ryaDo Auto-generaLed't,.lll
catch block
e.printstackTrace();
) , ,,.,1
...,:t.l
\.

else
foast.makeText {getBaseContext ( } ,' l
"Please enter both phoRe nunber and message.n,
Toast,IENGT}I SHORT) , show( ) ,
)

));
btnExit . SetOI1C 1 icklistsener new View' OnCl i ckl,i s eener
{
(}

@overiide i

public void oncllck(View v) {

/ I T.ADO Auio-generated method stub
Intent exiE = new Intenit
IrrTENT.ACTION_MAIN} ;
exit. addcategory ( Intent . CATEGORY-HOME )

exib . setplass (Intent. rLAG-ACTIVITY:NEW-TASK) ;

irlartsActivitY { exiE) ;

));
)

//---sends an SMS message Lo another device---

private void sendSXS(Stiing phoneNumber, String message)
t
1
rro aottmli
, String SENT r "SMS*SENT";
StTiNg DELIVERED =,,SMS-DEI,IVERED',;
PendinglntanE sentpf. a FendinglnEent,gcfBroadcast (this' 0,
net -Interrt(SENT), 0!; .i ... ... .,

Peadinglnt ellt'delivoredpr = Pendinglntent'. getBroadcas t ( ihis'

0,
aew Inrent{PELIVERED), 0} i

l/-::iiu'h6n the S$S ha6..been senl-*"'

regristerReceivertqew Broadcastaeceivef.,(){'i' : : 1r''
Eoverride' I 'i' '

i public void..,,onReceive(ContexE argO, InEent argl) {

switch (getResultcode ( ) )
Apabila aplikasi dijalankan akan menghasilkan seperti tampilan berikut:

Mry ynu *ove hlm

*ey"'"
s"ry""" BAGIAN 14
&{vC fine tre€rs0n."

RUNN'NG PROJECT DI DEVICE

Jumlah message looping tidak dibatasi tetapi sebagai catatan ini akan
berpengaruh terhadap kinerja smartphone Anda, apabila memiliki souT'c?
memorA dan cpu yang lumayan akan berjalan lebih kencang. Untuk
menghindari lambat diberbagai macam hardware perangkat mobile,
lakukan kostumisasi aplikasi dengan terjadwal mengirim sms atau dibuat
range pengiriman misalnya dalam z menit pertama dikirim 5o buah dan
seterusnya sejumlah mes sog e looping -ny a.
l':r<la bagian ini, kita akan membahas bagaimana cara menjalankan aplikasi
l,t'riect yang kita buat langsung running di deuice android kita, tentunya
l,;rgian ini dapat Anda lakukan apabila Anda mempunyai deuice smartphone
,,rrtlroid.

Teknik Debug Langsung

l':rrla teknik pertama ini adalah dengan cara menganggap deuice kita adalah
,r'lrerti emulator langsung, ketika di jalankan dari eclipse, project android
kita langsung di running di deuice android kita, tentunya syarattrya deuice
android kita sudah terhubung dengan Pc/Netbookkita.
Langkah-langkah dalam melakukan cari ini adalah sebagai berikut:
. Pastikan Deuice smartphone kita sudah terhubung dengan komputer
dan komputer sudah mengenail USB deuice kita. Google USB Driuers
dapat diinstal melalui Android SDKManager seperti gambar berikut:
l*lrturl da*iras
50K toqetiqu c\xdBandroid"tdli",r**dc*x
I Pi*rg.. i'cril.r$k ftr do;*nl*rd
' *ruroio Rrpotrtory
.$
r $ $ Thedp*rty*drt-nnr
* rj$ Googl*tnc add.*u {dt"r:l,q*g!*,eom}
, . f]& frssgtr,s,pebysssskln<"Aodrui*AF[8.r*virionl
. / il* 6esgliE$&b,'6ceg&lnc"andrudsFl?.rpreionl
fl $ firogtun$e\S*rglclnr" At*kti*aFI{. ru*iito }
[ $ soosk sFe h$tsgqln1 E&id-&PI ], ttvkinn ]
# 6o+gh thb Orivr pxkrg+ r*ruion {
,
.fljffi s**slc [krt{r [${!nring Frc*q1 rrr,l1iy: t
0ercr#,l4n
l35B &ivrr{orWnd*ltr, rr*:iskr 4 debuggable="true" pada defenisi <application> atau menggunakan
$-iDil*ry updxqr wly
./ Pilih Browse dan carjr folder USB yang biasanya berada pada
< sdk> \google-usb *driver\).
,/ Klik Next untuk menginstal driuers.
Windows Xp
Untuk menginstal USB Driuers pertama kali di windows xp adalah
sebagai berikut:
,/ Hubungkan android deuice dengan USB komputer sehingga akan
muncul notifi.cations hardtaare update uizard.
./ Pilih install from a list or specific location kemudian Next.
./ Pilih Search for the best driuer in these locatiortsl un-check Search
remouable media; dan checklist [nclude this location in the search.
Pilih Browse dan cari folder USB yang biasanya berada pada
< sdh> \google-usb*driver\)
Klik Next untuk menginstal driuers.
Setelah USB deuice terinstal selanjutkan buka project android kita di
eclipse. Untuk menjalankan project langsung ke deuice ada sedikit
penambahan yang dilakukan di dalam AndroidManifest.xml dari
project kita, yaitu dengan menambahkan perintah android:
GUI Application AndroidManifest.xml seperti gambar berikut:

the atnbder spr.fri. to the application

Gambar 14.'l Google USB Drivers Packages.
I.gr.-",str.-.] a.ur.a

[&qq'.r;] Drruesarrr

l:iym.] ,.**.a.
Google USB driuer sudah di-update untuk source Android SDK yang u,,,r .p,..
[.irqryL'-",] 'ci'rt,
terdapat dalam CD yang di-include-kan dalam buku ini. @i,.1 nrr"*a*,**r*,
. Setelah USB deuice android Anda terhubung dengan komputer untuk
f

, Terr onty

mamastikan USB Driuers sudah adalah dapat dilakukan pengecekan l:'----

sebagai berikut:
Gambar '14.2 Google USB Drivers Packages.
Windows 7
Untuk menginstal USB Driuers pertama kali di windows 7 adalah
sebagai berikut: Berikut adalah contoh AndroidManifest.xml dari aplikasi jamz yang
'/ Hubungkan android deuice dengan USB komputer dibahas pada bagian actiuity yang sudah di-setting untuk running
./ Klik kanan my computer di dekstop atau dari windous explore langsung di deu ice l<tta.
lalu pilih manage. - ma::i
./ Pilih device pada window sebelah kiri.
f r-.s,-
><rnlns : andr oid='http: / / schemas . android. com/apk/res /android,,
,/ Klik kanan pada nama perangkat (nexu, samsung, dll.) dan pilih package=' com.wllis . j am2 " >
. nppl i ca i iori androi d: debuggable=,'true', ,
Update Driuers Sofnuare sehingga menampilkan harduare update <oct i",ri ty android:name=". jam2" android : label=',jam2,,,
uizard. <i1Leut-[iILcr
 <at'.ion android:name="android. intenL'action'MAIN" I:L ,'. tl, dll (yang apabila kita melakukan command /ine tidak terlalu susah
r' 1 r -r ardroid:n,lme-"android.inLent.category'LAUNCHER" rrrcngaksesnya). Berikut adalah gambar contoh debuggin project aplikasi
.. ...:.,or ' ita: -
..- l,rrrrz kita dengan commandline adb
r l.l i JL -"'.
. , i .r,
DDM-ware?
sebelum running aplikasi, pastikan bahwa setting IJSB Debugging padir App dexription:
Onlift
deuice smartphone android kita sudah aktif, Menu-Setting-
73
2il6 B E6oo
Pro.es5 IDi
Aplication-Development- dan aktifkan USB Detruggrng isss g 8601
Suppo.ts PrBfrting Centrcll

Running project kita dan perhatikan bahwa project akan langsung

running di deuice kita tanpa memerlukan AYD lEmulator Android lagi.
t't/OL/2o7.1 26.68 <DIR>
t't/OL/zenL 2O=EiE <IIIR>
h4/O1,/2AnL 14=2L <DIB> add-ons
it2/12/2o16 L3.16 <IIIR> docs
h4/O1,/2AnL 23:53 <DIR> googrle-mdrket-licensing
yi4/Ol,/zenL 23:59 <DIR> google-usb_driver
Teknik Command Line ADB l2/lL/2o16
V2/12,/2OleJ
?2/12/2o1A
1B=24
13:13
13:19
<DIR>
<DlR>
<DIR>
narket_Iicensing
platfopm-tooIs
platforns
?2/12/2t,la L3.28 <DIR> samples
'.,e/A1/2gJl7 16:57 <IIIR> temp
Selain debugging langsung dari IDE Eclipse, kita dapat melakukan proses 't6/12/2gJ7,g
tz/ll/zglg
21:53 <DIR> tools
lg=44 <DIR> usb-driuer
command line adb dengan cara sebagai berikut: O File(s)
13 Dis(s)
6 bgttes
2.55?,59fl,'152 bytes ftsee

-s <id device> install <posisi file apk>

I :\PFogpam Piles\Fndroid SDI{}cd tools
Adb
l:\Ppogpan Files\Android SDX\tools>adb -s I5516c6fba34a install e:\jamz.apk
l:lO XBls (4736 bytes in 6-O14s)
pkg ! /data/Iocal/tnplja02. apk
Untuk mengetahui id deuice smartphone android kita dapat dilakukarr
dengan cara menyambungkan deuice smartphone kita dengan usb dart
membuka DDMS (Daluik Debug Monitor sgstem) sehingga muncul itl 02-01?f,:510.,, D 165 StstusB,.. updatesighBlstrength:numeri<=510S8,...

deuice smartphone kita seperti gambar berikut:

Gambar 14.4 lnstall dengan adb command line.

Dalvik Debug Monitor

11$ .f$Q, sctmry,,*$t aplikasi di deuice android kita untuk memastikan apakah aplikasi yang
,,@, - , lf rrl<a
l. tta debugging sudah masuk.
iNS&tl

Online 2.2
2s46 A
2s8s B,
86oo
8601
Package Aplikasi Android
'ir.lrelum kita melakukan distribusi aplikasi kita tentunya kita harus
rrrt'lakukan package terhadap aplikasi kita, frle ".apk sebenarnya sudah
,,r,'r'upakan package aplikasi android yang kita bangun, namun dianjurkan
,,' a I i kita melakukan p ackag e den gan menyertaka n certificate pada aplikasi
l<

l, rtl sebagai bukti bahwa aplikasi itu adalah aplikasi yang kita

Gambar 14.3 Nomor deYice android.
Kemudian posisi.Tile apk dari setiap project android kita berada padafoUtr
bin di setiap project android kita. Copykanfle ".apk tersebut kedalam/oldt'r'
l,;rrrgun/deuelop sendiri . Certificate di sini adalah certificate atau kunci yang
l.rt;r dapatkan dari google di mana cara mendapatkannya sudah dibahas
g,,rrla bagian coding mzps.
Berikut adalah cara melakukan Package dengan menyertakan certificate. a, .v+d c:l:l: Ap!-r(a::::

,/ Buka project dengan eclipse dan cliclc kanan pada project kita i Keyslore selection
I

kemudian pilih Android Tools Export Signed Application I

Package seperti gambar berikut: i ..i Ule eining keystere

I Create ns ke.5t!re

Lo(ationl F:\d.bu9.keystor" rt
New ) -f
: t"l ,
' a a Shdxlln Alt+Shift+!t >

/ L' I i;: Copy {trl* {

r' I qiit copy qunffied Nsme

,.
I .l p"*. Ctrl.V
1: -.
iX out.t. Oelete
. t , i:.il.!e {iem a.*.i lr,i-Ah. inill; $.t\ ^
j e"ita potn
n*ator
'I
i Alt+shift+T

i du Imgod"'
: ej E po(...

ClsE Projed
Clorc Unrdakd Prujeds

Gambar 15.7 Browse Debug.keystroe.

A&anc€d Fk Cupyrights
Fix (opyright$,.. Proid,..
N€lv Teil
Ns F,eurce Fi[e...
Debuq As
Export SLg^d Appli<ati6n Pa<kagE... S Erport Andrcid Applic*tion

Expo{ UneiEnedAppl;catian FBckage...

Key Creation
Rdor. from Lo.al Hktsry... Dirpky &x byt€cod€
POE Tcols Renam. Applicrtion F3{k.9e
Fax Prsj€ct P.opedies
Sour(e Alias: debugkey

Pasryordr
Gambar 15.5 Export Sign Applicotion.
Confirm;

vdlid:ry kars)r

O Aoeldtb.
Etmd Ad.dd
Firrt and Lait Name Nazruddin gEfaat H
i -.-__*
i Prored Checks Organirational Unit: 5TEI
p.{ormrdseror(.F !rrotule,-,.th+r!pl.Ldioa.d.bic.aoded
'\! i
Organi:ation: ITB

$lad th€ p.oj.dlo sPd l (ity or localit$ Eanounq

c,"1..t
'J".2 -
Stdte or Provin(ei lawa Birat
Nc.troBl.!.d. (lktNe
Country Cod€ {Y.I): I"i"""';"

{:?)
L:",hl:l[:r -:
Gambar 15.8 Pembuatan Key.

._:'!3tal

Gambar 15.6 Browse Project ondroid.

 Export Android Appticaticn

Destination and key/certificate checks &iJ!!ll!*!

$qi*sdij!r
$w

Ocstination APK filg E\Project\Master ap&\jaml.apk

Ery!;,1
CertifKate qFires in 25 yers,

BAGIAN 15

PROJECT BONUS
ril t'@ r[:-Iry]*1re-,:l
Gambar 15.9 Tempat Hasil file apk.

Setelah proses ini kita dapat melakukan instlasi fi.le apk ke deuice kita
dengan cara adb command line atau meng-copy-kan fle apk tersebut
ketempat penyimpanan deuice dan melakukan proses instlasi langsung di
device kita dengan cara menge-click file apk tersebut. Sebenarnya setelah
kita melakukan package aplikasi android kita dengan teknik di atas berarti
kita sudah siap untuk mem-publish projectl<rta dan siap didistribusikan.

Pada bagian ini akan kita bahas berbagai contoh project androidyang dapat
diunduh di situs resminya devoloper.android.com.

Aplikasi Notepad
Pada bagian ini kita akan membuat aplikasi android yang berfungsi seperti
notepad pada sistem operasi windows.
 No,tepade pe!'tamaku
Ini adalah tutisan saya

Gambar 15.1. Aplikasi Notepad Gambar 15.3. Aplikasi Notepad menu simpan

tO:39.F

Notepade pertarnaku
Ini adalah tulisan sayal

Gambar 15.2. Aplikasi Notepad dengan tulisan

Gambar 15.4. Aptikasi Notepad list tulisan

 Properties for taebook 1.r
ffi Java Build Path
)11*dLiLldx
R$ource
Android
EuiLders
Java Buitd Paih
l-i- &ll*tJ-olr,r- +*"u""r,'rrb ---_------l
Java Code Style r && Android ?3
lava Compiler l&&,,,.
$! Acce* rulx No rules defined ,,.,

Jara Editsr Native library locatiou.' (Nonel

;p
Javador Location 1-!! androidjar - E\Program Filrs\Androld SDKplatforn
Pr*jed Referenres
Refadoring History
Run/Oebug Settings
Task Repository
.Add Folden",
Ta:k Tags
Yaldatian
Edir.- .,

Gambar 15.5. Aptikasi Notepad edit tulisan

Aplikasi Facebook
Aplikasi facebook yang kita bahas adalah aplikasi facebook dari
androidpeople.com. Buatlah project android dengan ketentuan sebagai Gambar 15.6. Configure Poth aplikasi facebook.
berikut:
Project Name : Facebook
Buitl Target : Android 2.3 FacebookRo cketExample j ava
Application name : FacebookRockeExample package com.wif is. facebook;
Package name : com.wilis.facebook
Activity : FacebookRocketExample import net . xeomax. FBRocket . FBRockeE.;
ifiDort net . xeomax. FBRocket . Facebook;
Min SDK :9 iqrort net . xeomax. FBRocket . toginlistener,'
iryert, net , xeomax. $'BReeket, $eir1re]9Er.forqxc€pL Lq;iri.'.'..
Tambahkan jar fbrocket-o.la ke dalam projecf Anda dengan cara click kanan iryort android. app.Activity;
i4lrort android. os. Bundf e ;
jar pilih build path pilih configure built path, kemudian add External
Class Folder. Tampilannya confrgurepoth seperti gambar berikut. public cIa,ss FacebookRocketExampLe €xt€n a Activity irqrleueatg

private FBRocket fbRocket;

t9OteIr ide
Bubl:lc .rrerld .onqreate ( Bundle Eavedlnstancd$f r', a.Ce l. {
auper. oncreate ( savedlnstancestate) ,'

EharieEacebook( ) ;
 .,i.'.pe]-'m:isi;:ion android:rram€="arldrord.permissjon.,f]V?Eal,IEf"></'.:,+:'
::.i ll4)
: . ,'>

lrrlankan dan akan menghasilkan seperti gambar berikut:

Gl 1l:oop*

LJni!!1nJr Blrlr meiS;rFnLii ik*r Frath.r.r[

{iir,:4nr Pri.hi*t rlll;Lir

trN&i,:

: Ed:i;r iarin llal! rritiiI ir rrl

i r.rar k;in !*rdi A:iI;r'

Ms*dartar fa{ab$qk
Wl.#'.*
Gambar 15.7. Aplikasi facebook login.

N'lasukkan usernonte Anda dan passuord, sehingga akan menghasilkan

'i('perti gambar berikut.
 !& 11:o4px

ibnil ,ln i)0tli rln

Meylrnd,: Yuristrka L l,,r r.erl r,, r,,.: ',

l.ii{iUt*.
"rhrirl ;r
ixrur;So

Pak l-ae l-*e test dari mobile

I irlr:r:;gr f-iia {$'r:rite!ri
Pak L*e Lae TEST
I i1:iir: "ilil l-r;it l:r*r:irlrrrt

BAGIAN 16

.1 rlt{ ill!l!:
BEKERJA DENGAN MEDIA
Spe More Stnries

Gambar 15.8. Aplikasi facebook.

Pada bagian ini akan kita bahas beberapa aplikasi yang berhubungan dengan
rnedia. Salah satu fungsi smartphone dan tablet pc android adalah sebagai
lremutar media yang mobile yang sangat digemari oleh pengguna, baik itu
rrntuk memutar lagi seperti mp3, mp4, maupun untuk memutar video.
Aplikasi Pemutar Musik
ini kita akan membuat aplikasi android yang berfungsi
pada bagian seperl i

untuk memutarf e audio I lag';'.

I

Persiapkan tiga buah icon seperti berikut:

t'\*
W untuk image buttonmemainkan lagu.

KK untuk imag e button Pause lagu.

untuk imag e button mematikan lagu.

Gambaran untuk desain aplikasi ini adalah seperti gambar berikut:

Strrnentara method setup0 berisi seperti berikut:

private void setup ( ) {
Gambar 15.1. Tampilan Aplikasi Pemutar musik' loadCl ip O ;
play. setEnabLed (true) ;
pause. setEnabled ( false) ;
sLop. setEnabled ( falee) ;
Kita memerlukan import media player android untuk dapat memainkiltr J
' :
''

musik di android. Importtersebut adalah sebagai berikut:

import android.media'MediaPlayer;
Scmentara untuk meng-hcndle apabila dilakukan c/ick terhadap rcon akan
dan kita dalam coding menggunakan teknik implements serlrt rremanggil salah fungsi-fungsi berikut:
r

rnendefenisikan uarioble sebagai Media Players seperti coding di bawirlr private void playO {
mp.sEartO;
berikut:
 play, selflnabled ( false ) anilroid : €nabled: " faJse "
pause . setEnabled true) (
stop. setEnabled ( true) ;
)
lmageButton Pause
Brivatevoidstitr(t)-: {, , ,.
mp. stop O ; ua!e3utfon android: k1=' G+i.dlparu*.'- -
pause..,S.EtsEnab1ed { f alSe } , android : src5 "Gdrawabl e / Pause "

stop. setErlabled,{ f a1 Se1.;, android: layout*heigltE= "wrap*conten L"

android : layout-width= "wtap*contenL "
try ( android : PaddingRigtt = " 4Px "

.........:..'.:r*i,seekTo(0).;
., : E1i!y.setgnabled{truel
i .1., , '.,)-. , ".r. ,...i., lmageButton StoP
r.ii i catch... {Thfouiable t..} {
goBlooey(t); I rageButton android: !d= " 6+id/6top1
aodroid : sic q " @'drawable / s EaP'
)
)
. i android:layout-heiqht="wrap-cortent'
privaLe void pause ( ) ' eindroid; layoul ,widtbt "wrdl)'collf enl " '
{
..: ..mp.pauseo, andro id : PaddingRight= " 4Px "

: llx;iSll;i:ii:i[:i:;]r, : '
Selangkapnyafile layout xml kita adalah sebagai berikut:
st op . setEnabled ( Erue ) ;
)

Main.xml
Masukkanf/e mp3 sample ke dalam/older raus di project android kita dan
versi on= " 7.0" encoding="utf-8"?>
- ?:..rrl.
akan di-lood dengan fungsi seperti berikut: . t,inearlayolll
;<mlns i andio iii=lhf;ipl / /schamag. androld.eom /apk4res/andfaid'
private void loadClip ( ) t androi{ : orientaticrhs "vert j caf '
try { android : lavout*width'r "fi.l:Jpare'c "
mp=Mediaplayer.create(utris, R.raw.mar s danokratl i android : layout-height=' fi llrparent "
setonconpleLiolir'iqtener(tbie) ;
. , ::mp'
, .'.'. c*tch..{,fh:r0wab,lg tl { <L i c+arLdYou'.
goBlooey(L); .android : tayouL widthsi f il lparent'
l..:']}'','...........i..
androi d ; layout-heig]nL= " wtap-conEent "
)
android : Padding=' 4P* "

Dari coding di atas bahwa sample mp3 yang akan di-/ood adalah mp3
dengan namafile mars_demokrat.mp3. apabila Anda ingin mengganti bisa ' i ' androl-d: layou! height,a "w{4p-conte'1.t1' ,.
: .'
i

dengan memasukkanTt/e mp3 yang anda sukai.

:::::;3;*3x3?l;Xi*ii;;;;y'"on'fei?t"
' ... .. ,' '
. ' ..aridrciid: enabled* "false' ,, ..
Berdasarkan layout tampilan aplikasi pemutar musik di atas, kita />
memurlukan tige defenisi image button dalam layout xml kita yaitu:
'
' i android: layout-widLh* I'fiffl?arentsi "
ImageButton Play .'. android t lavouf.,-hei ghLi, l'f i "IfJa r.eq t ". .
andr oid : gravi ty='cenre r-vert i ca l "
r''
< Imag*Bu qt ori .,..andf o iil I ii*i 6+i d,/t]ay,i.,
i1 ..
.
;,,
.. andr.oid : Iayout*gr:avity*'se";;r.,,vqr.!iial'!
,,.i',ri.andioi.d,,:,src=\@dtawab:1.e/ft7,ay,,: . ri'..

, r,r,arndigid la:tout*he iSiht =,'wf ap;con ten t i

: android: lexcAbpearance= " ?andro id: attr/ textAppeai-'arcelJargre "
4*ro U ]ayoUg.:-liriidth;,;1la}tr do- n ter t !,
I "::
,,..,,r.::,

'..,,.:,lrrl,andt-oldipaddingrRighc!r!4tri*:) r',",r,'''' .r";:t;,r,'

"'
i$lport. android. widget ' ImageButton;

public class muslc €xtends Activrcy

imxrlements Medi anlayer . OnComplet i onli s t ener {

private ImageBut-ton play;

private fmageButton Pause;
privatse ImageButLon st.op;
priwate MediaPlayer mP;

1.. r" j l".

pub1lc void, oncreaLe(Bundle icicle) {
EUIrei, oncreate ( icicle ) ;
seEcontentview(R. IaYouL .main) ;

play= ( rmageButton) findViewByld (R ' id ' play) ;

pause= ( ImageButton) f indviewById ( R - id, pause) ;
stop= ( ImageButton ) f indViewByld ( R. id. stop) ;
pf ay . setoncl icklistener new View' oncl ickli dt'ener ( )
(

public void otrCtick(View view) {

PIaY O ;
)
]);
pause. setonclicklistener (new Vie w. oncl icklislener ( ){
publf";;i, onClick(View view) {
pause ( ) I
]
));
stop . setOnCf ickl,istener ( new View' OnCl ickl-istener ()

Public void onClick(view vieu']) t

stop O ;
l
]);
setup ( ) ;
l

r'.,1r:,-.]
Dublic void onDestroy0 {
sulror.onDestroy{);
lf (stop.isEnabledO) {
sEoP O ;
1
j
]

public void onComplet.ion{Mediaplayex r$) {

stop O ;
)

private void p1-aY ( ) {

mtr).start();
p1ay. setEnabled ( false ) ;
 BAGIAN 17
APLIKASI DOA HARIAN

Pada bagian ini akan kita membuat aplikasi sederhana tentang doa-doa
r' harian dalam Islam, aplikasi ini sendiri dapat Anda dapatkan dengan di
,, .'._setfitle("SXceCtioiii'.,;,,i i

android-market dengan gratis, aplikasi ini adalah perpaduan antara suara

.,'i . ssLuessAga { t i.toString { )J '' .' ' ''
dan image serta konsep-konsep dasar yang sudah kita pelajari di bab-bab
sebelumnya.

Gambaran umum aplikasi ini adalah di mana doa-doa harian sudah

dibuatkan dalam bentuk gambar dan suara-suara doa-doa hariannya sudah
dibuat dalam bentuk mp3, jadi konsepnya doa dipilih akan menampilkan

E
 doa dalam bentuk gambar dan suara yang berisi bunyi dari doa yang dipililr I)o'a Agar Diberi Limpahan Rezeki
tersebut. O Do'a Agar Mendapat Kedudukan Yang Mulia

Berikut adalah tahapan-tahapan dalam membuatnya.

Langkah I
Persiapkan menu aplikasi dimana menu menampilkan pilihan berikut:
o DoaBersumberAl-Qur'an
r Doa Bersumber Hadits
o Bantuan
r About
o Exit

l(emutiian submenu l)oa bersumber Hadits berisi pililian berikut:

. Do'a Akan Makan
sementara submenu dari Doa bersumber Al-eur'an berisi pilihan berikut: . Do'a Sesudah Makan
. Do'a Agar Diberi Jodoh . f)o'a Akan Tidur
. Do'a Supaya Diperlakukan Adil . Do'a Bangun Tidur
r Do'a Agar Diberi Kemudahan Urusan . Do'a Masuk Masjid
. Do'a Sapu jagad . Do'a Keluar Masjid
. Do'a Menghadapi Lawan . Do'a Masuk Rumah
. Do'a Menjauhi Kesesatan . Do'a Keluar Ruurah
. Do'a Diberi Keselamatan . Do'a Masuk Toilet
. Do'a Agar Terhindar Dari Siksa Neraka . Do'a Keluar Toilet
 Langkah II Coding Layout Tampilan
Menu.xml
'? rr1. version- "1. 0 " encoiling= "utf *8"?>
.- i .r:
.,1, tt
r<mlns ; andro id= " ht tp : 1 / scjremas . android " cc:m/ apk/ res I andraid"
rndroiJ : Iayouc widLh= " f i 1 I-patent"
:r rd roid : layouf
-height= " t i I L-Lparen
r ">

<'l'*:{ j:Vie .i\,

anclroid: id=,,ra*id, j abpl ,

android : Eex|= " + i d / Textvi ew 0 1 "

@

an<1roid: layoul*width- " wrap cantent "

andro'i d: Iayor.tt-heighr= "wrap- canLenL "
android : textsi ze= " 3 Apx " / >
. /.. .: , t rl , r.,.r ,'jr.. >

Menuhadist.xml
.?-r I version=''7.0" encoding= "uLf 8"?>
. ,,,,t i-,-.cL
xmlns : android= "ht Lp: / / schemas " android ' cam/ apk/ res landroid"
android : layout-width= " fj -lJ:rarent " -1

andro id : layout-he i ght = " f j,1 -l--.pareir L " >

<Texl\ii.e?l
androi d : id= "@+ i d, fabe l "
android : texi:=' G*id1?exlI/iew01 "
android : layout-wid!h= " wrap-c ontent "
anclro i d : I ayout-height= "h/rap- cantent "
android : Lextsize= " 3 Apx' / >
Dari uraian diatas kita memerhkanlayout xml sebagai berikut: </ l.:,r-l irti,:n:i>
o Menu.xml untuk layouttampilan menu utama pilihan
. Menuhadist.xml untuk layout tampilan menu pilihan doa dari hadits Menuquran.xml
o Menuquran.xml untuk layout tampilan menu pilihan doa hari Qur'an <?:<;rl. version= "-1 ,0 " encocling= "urf *8"?>
. Dr.xml untuk layouttampilan di mana doa-doa dari Qur'an ditampilkan <li-is n.l-uleI,aycuf.
r Ddr.xml untuk loyouttampilan di mana doa-doa dari hadits ditampilkan "}t bp j I / schenas . androi d. ioml apk/ res landraid"
xmlns : anrlroid=
android: Iayout widrlt= " ti I I parent "
android: layouL-heiginf= " f i7L3)arerL ">
Sementara kita memerlukan beberapafile java sebagai berikut: (ir,:i-'-'-.
. Menujava untuk handle tampilan menu awal .

android : id= " Q + ir1 / Tabe I

. Menuhadistjava untuk handle tampilan menu pilihan doa-doa sumber androi-cl : texa=' 6+i dl :fextvi ew 0 l "
android: layouL-width= 'wrFp content l'
dari hadits android: layout- heiqhl--= "wrap contenL"
Menuquranjava untuk handle tampilan menu pilhan doa-doa sumber androi"d: textCr:lor. " # f tA 0 0 0 0 0'
anJroid; Lextsize= " 3Apx" />
Qur'an </,,.- t.-.L i.,, '..>
a Aboutjava untuk handle tampilan informasi aplikasi ini.
a Dan untuk konsep dasar untuk setiap doa kita buatkan file javanya
(dr,dz...ddr,ddz) java.
('oding-an berikut ini adalah untuk menampilkan tombol play suara dari
r loa tersebut

, r,. , :.- androjd; Jayout widLh= "wrap-content"

,rrclroid : srq= " Gdrawabl"elpTay" android: id= " G+idlp7ay"
r,1roj.d.:layout--heignt="'wrap-contenE" android:padclingFighl="1Tpx"
rL<lroi-d: layout.*,x= " 67dip" android: layout-y= " 520dip"
,rrtlroici:scale'fypc= "f it9ncl'" ..' :'11 i.,r.

: i .' ..'. , android:layout width- "wrap conLent"

.lraid: src= " @drawabl e/pause" anrlr oid: Ld=' A+id,/pause"
|
Lnrli:oid.: layout-.height= "wrap-content" android:paddjngRi.ght= "1)px"
ndroiil : layouf*x= 'lAaaip' android : layout-y= " 52 \dip "
r

rclroid : scaleType= " f i tgnd " r', I'1rn&t {jllrll i'an'

rr

.1.,, : dnclroio: Iayo.lI vr;ct]r= "wrap-content"

,,rdroid : sr c- " @drawabL e / s t op " androi<l ; \d=' + i d / s t op "
@

r lroid:Jayo*t-h+jght.= "wra,p-content" .rncl::oicl:padcij:gR '.qbL="l7px"

r r oid: Iayo.t andruitl: laYour. y - "527di-p"
-v,="227dip'
,lr n-, rl: scale, ype= "fi tEnd" ' r'., '

Langkah III Coding file Java

I icrikut adalah co ding - an Jile j avanya

Nlenujava
package doa. islam;

i nport android. app. AlertDialog ;

indrert android. app. ListActivity;
rlrport, android. conLent . DialogTnLerf ace ;
import androicl. conLent. lnLent ;
import android.os.Bundle; .,':
import android.view. View;
import androicl.widgeL.ArrayAdapter;
inport, android.widget. Listview;
import anclro'i d. widget. Toast ;

l,,ublic class menu extends LisLActiviLy {

puhlic vgid oncreate(Bu.nqle- icicle) t

Eup{rr. oncreate ( icicle ) ;

II List Ylenu !i:lihan

StringLl menu - new Stringll t "Do'd Bergrmber A1
,il 'dn", "DJ'a BersuflI])er Hadj s'', "Bantudn", 'Abour' "Exit" ); ,

.rl llense.1: nil.ai;r:l:4.1' l:e cia];rn 1i;t

-..'1,,, ,. r . ., , ir .L . j.
,ri, 11. ,'l;
 Ehi6 . set.Li stAdapEer (new ArrayAdapt er< Str ing> ( this,
android. R. l-ayout . simpl e*l i s l-i t em--,1, public void onClick (DialoglnLerface dialoq,
menu) ) :
inr id) t
getl,istview ( ) . setBackground.Resource (R.drawabLe. bg\ ;
Intent exi: = new lnlent (

)
Intent . AC"r0rf_.MAI]v) ;
.1t . ;.1 .

''mef hocr ir. lkan nl.:ng(lverlc', merhocl u^L..;trtemcl icl. /ang "1da
exit. addCategory ( Jntent . CATEGORY -HOtLEl ;
p"*ge l ldss L.ist a,:; jj,'iiy
- methc,J ill.i -tool-. iLlpgrgS-4 apabLlu i ai].a salal, satr) lLem clidri exit
1is]: rterlu ydng dipi l in
. setFlags ( rnt.ent. . FLAG-ACTIIrrY-NEW-TASKI;
Xrrotocted vol.d onliscltemCl-ick(Listview 1, View v. int
position, long id) { startActivity(exit);
eu;rer.onI,istltemcfick(1, v, position, id) ;
// Ge1: the it.enl thal wa$ cliclleC
llc!!:lqf.o,9 r,ilai rcx: Tang uklik ) )' . setNegativeBut t.on ( " Ti dak " ,
Object o = thle.getlistAdapter( ) .get,ILem(position) ; new
String pilihan = o. toString ( ) ; I Ir os r n t e r r ac
\.ar/rmn: ldr ''."si-: r ih:r:r :rf IJ JJI+r benrLt) fncst
tampif kanPil ihan (pi lihan ) ; :r: "'"". r r'.T;r',: :r ;.. rrace d i a l os,

) int id) 1

dialog,cancel();
' Igtipi-}!g: Activity !-?!,Ue! {Slig*q nenu y.dris a-ipj.iil,.
)) 'show|;
protectad void. tampilkanpilihan(String pilihan) { ) else {
try { Toasl. rdaker€xt {
ri lt:r.enr '1i l,r|okan unt''*li sebagai p*rrLgenal suatrr tlrts.
l r. 1...r 'i r r '/
IntenE i = nuI1; l,ilihan ...

if (pilihan.equals("Do'a Bersumber A1 Qur'an") )

( i, r jonnya belum dibuaf',.

i = nsw IntenL(this, menuquran.clase) i
) eLse if (pifihan.equals("Do'a Bersumber roas c rJ,il*rn-':i;;-"rilr.r,
Hadis" ) ) {
i = new Intent(this, menuhadis,clasi); r,,
] else if (pilihan.equals ("BdnE.uan" )) ( I catchi {Exc_eption,e) {
i = new rrt..rl (thi6 , hel-p . class ) ; i ' , r€,rPf,i4tStac'kTrace0;
) eLse if (pilihan.equals ( "About " ) ) {
i = rrew.lnten!(Lhts, abouL,eXase) ;
] else if (pilihan.equals ( "Exit') ) {
// f$f,e$f exit = naw
lnr i:.i,1 I:n'.nn -.''''I;rN ll:lli) ;
// $tilr:tAe Livily { exit } ;
li'rikut ini adalah file java yg menghandle untuk menampilkan doa makan
Al"ert.Dialog.Builder builder * new ':r,r'ta untuk menampilkan suara/bunyi doa tersebut :
AlertDialog. Eu j lder ( thls ) ;.
builder. setMessage ( "Anda Yakin Ingin
Menutup Apl ikasi? " ) tl r java
. setcancelable (f,alse) . setPosiEiveBufton( "Ya" l,ackage'doa n rsJ.am;, ....

Dialoglnterface. oncl-ickl,istener ( ) {
lrnport android. app.Activity;
import android. aPP.AlertDialog ;

irE ort android. view'View;

import android.widget. ImageButton ;
imxlort android. widgec . Imageview;
isE ort android. media. Mediaplayer;
irrErott android. os. Bundle;
public class d1 extends Activity itnplements
uediaPlayer Oncompl eLion],is Lener {
irst crieeted' *l
.
l*'k Cal1e<1 r,rhen the activity is f

privata ImageButton PlaY;

|riwate ImageButEon Pause;
privaLe ImageButLon stoP;
private MediaPlayer mP;
privatse imageView garnbar;

Gfir,*::ri*e
public woid onCreate(Bund-le_ icicle) {
suirer. oncreate icicle) ;1

setcontenLView(R. layout. dl) ;

PlaY'(rmageBul-trcn) findViewByIdiR' id'PlaY) ;

pauss= ( ImageBuLton ) f indVi ertByld (lR.id.pause);
stop= {rmageButLon) findViewByld(R' id' stop) ;
g.^trt= (imageview) findViewByld(R' id' ga$tbat) ;
.

*
gambar setlmageResource (R drawab Ie'doaakarunakanJ;
- '

play. setOnCl ickI,is tener new View' OnCl ickli stener

( ()

publtc voLd onclick(view view) {

PlaY{ };
\
));
pause . setoncl icklistenei ( naw View' OnCl icklisEener ( ){
prl"bLic void onclick(View view) {
pause ( ) ;
)
));
stop, setsOnCI icklistener (nEvr vie\^r' OnCI ickl,-i s tener ( )

pulrlic woLd oriClick(View view) {

stop{) i
)
)
satch {Throvrable t) {
)); qoBlooey(t);
l
setup ( ) ;
]
i
private wold setup0 {
E0vtL:rid*
 loadCliP ( );
P1aY. setEnablgd !t:u:), . rmA Andrgicl 2.2
t$ src
I)ause ' setEnabled ( f,aIse ) ; S* g=* l{jr:n$ri3tr:{:l ..rd!;r r:ile:!}
st oP. setEnabted ( false) ; i!!: a=sas
] ,-1{ doamasukrumah.mpj
1$ do.am.asulmc,mp3
. Dr{vata IIoiA qoBlooev(Throwable t) { ,* doasetelah.mattan-m.p3
AlertDialog. Build,er builder=new iib, bin

Al"ertDial-ogf .BuiLder (this) , i;i:! d rEwa tr,l e

;;i*l auoutjpg
i$fr egjpg
builder l!;J i tldkE .,pg
. , setTi tle Excepl i on I '' )
( " dsaactili,ls
fi|
,setsUessage (8. tostring ( ) ) l$ droaakanmakanjps
.. .setBositiveBuEton("0K', null) i{tl .}6aaka,ntidu.rjpq
.showO; ..$. doabangunt'dur.jps
!S dsajodoh,ips
.d, doakeluarmasjid.Jp 9
-J, dodheluarrumah.Jpg

lrrlankan aplikasi sehingga akan muncul seperti gambar berikut:

Penjelasan:

gambar. seLlmaqeResource (R. drawabl e. d-oaakanmakan) ;

gambar yang akan ditampilkan adalah image dengan nama file

doaakanmakanjpg
trv {
rto'* ,#tsi,,:?ffi,{*-
'xrp=$edi apl ayer . crea te Lhi s, R i ralir - doa akarut'akan) i
j r ui$ I:} i*J -r-E X, l I
(

mp. set.Oncompletionl,i sLener ( this ) ;

:: _t_1$ I u.* 1 i; ti$ -9 11,:I
)
"..\ll;ulrrrnrrlrir 1n;u{k llr:a;r
lirrrr,ur taz;r<1t:u!;tit 11;r {litrilir
Begitu juga apabila tombol p/oy ditekan, file doakanmakan.mp3 akan "lrlzaalxrrrttrt- {i)"
dipanggil. l\r1in1x:
"\'a r\1tr:rlr, lr<'rk;rlIil;rlr riz<1i
l,;lrt{ l*rgk;rrl rizrlikarr
Gambar tersebut danfile mp3 tentunya harus sudah berada dalam pockage he;xul;l k:uni, rl;rrr
proj ect kita seperti gambar berikut: p*lilru'alalr k;rrni tl;rri sihsr
lerak;r""

.St:rol/-kanlayar sehingga tampilan bawah akan muncul untuk

rnendengarkan bunyi doa tersebut seperti gambar berikut:
 fio'n &€nn ffok^
; r t.l$ ul lsl J-q illl I
r-ti I l, I rA l:F i 1$I
*Allaalrrrnrrrra l*uuik Luraa
fiirrraa razatgtanaa rv:r qitt;*t
-atlz;rulrurniu' (i)'
,'\rlirrya:
"\'a,\lliilr. lx'r'kalril;rlr rizrli
laurg lirgkarr riz-r;ikarr BAGIAN 18
ke pad;r k:rrrri, clan
pelilxrralirh karrri *l:rri siksa
rrenrka-"
ANDROID MYSQL

.ffir S ffi

l'lda bagian ini akan kita bahas beberapa aplikasi yang dapat dikategorikan
',t'lragai aplikasi client seruer database. android sebagai client akan
lrrhubungan dengan mysql seruer dengan perantara php, secara konsep
,lirsar di gambarkan sebagai berikut:
 rromor-lrp varchar(1,.2) NoT NULL,
Android Device Server Side I,RIMARY
)
KEY {'username' )

I"l'%
[ .."iffi;i
t re#ffi"I
langkah Il
hffil
Er :--:--l
Kita memerlukan 7ile php sebagai penghubung (web seruices controller)
lsn ,.. :-- -J
I; E (".',:;'"r vang berfungsi penghubungan/pengantar data ke mysql seruer.

,t\ Simpan.php

+
r:----El."ffil
I :
-":4,4#*il l
II : *":&ii#a1l
.i."&sffiE- I
'?nhn
'
irr=5-pOST [ 'username' ] ;
$pw:$,PosT['password'];
$rpw=$-POST [' repassword' ] ;
Snl=S-POST [ 'nama ' ] ;
$jk=$-Posr['jekel'];
,.',,,,.. .'...,..., .'.'l ,-

i l
$a1=$_POST I' alamat' I ;
$nt=$-POST L'nomor-tlp' I ;
$nh=$-POST [' nomor-hp' ]

Ngl
;

.$con4.'='$ysql*connect { " localhosL', "roqt'

mysql-select-db( "laEihan" ) ;

Aplikasi Entry Data i:query = "INSERT IM1O user

(u s ername. pa S Sword, repa s swof d ;-nama;l engkap.; j *jkel ; al" amat ; nomor*t 1p, nomo
Pada bagian ini kita akan membuat aplikasi android yang ber{ungsi untuk
r .hp) values (' $un',' Spw',' $rpw',' $n1','Sjk',' $al',' $nt',' $nh' ) " ;
::result = mysqf-query($query) or die("REPoRTGagaf Query Simpan
melakukan input data ke database seruer mysql I)ATA. " ) ;

Langkah I /loot adalah user database dengan passuord-nya dalam hal ini kosong.
membuat database-nya dengan perintah berikut: I)enggunaan _POST atau tanpa _POST tergantung setting uariable globals
sistem apache/php yang anda gunakan, apa on/off.
creaLe database latihan;

membuat table user dengan perintah berikut:

create table user
{
Langkah lll
usefiiame varchar{20) NOr $ULt, I'ersiapkan Tampilan androidnya untuk input datanya
password varchar(20) NOT NULL,
repassword varchar(20) NOT NULL,
nama-Iengkap varchar(40) NOT NULL,
jekel varchar(1-0) NOT NUI-L,
alamat varchar(30) NoT NULL,
nomor-Ll-p varchar(10) NOT NULL,
 , r,lroid:Lextcolor= "#f f ()A00f f '

rlrLr:Iow android:bas.elinealiqneds "Lrue "

Silekan Magukkan Data ''r lroid: Iayout. widLh= "mdtch.J)arent">
Username: . i, *
,r. rr o i tl: t e-xt= "Usernamei "
r r. r r o-id: layout-width= "matchJat ent "
Password: ',', I rcr id : 1 ayout-height= " wr ap -conf ent'
,r,, lroi<1 r LextColor= " #t f A0 A0 f t "

retype-Password:
lt(rxt android: id= "8+idlet*un "
Ii
rr rr Iroid : rfio.xWidth= " I 4 0,sp
ldarnaLengkap: r, Iroid : 1ayout heighl= "tr'rap-corlEenc "

sr;\
i rr

, r r. lr o id : .Iayout -wj-deh= " natch.J)arent "

Jekell rrrr iroid : layout-grawity* " g.t a*xl- ve r t i ca 7 "
.: l.:.il-r>
/ I .rL:le&crr'>

. . ir. VJ>
I cw r t-1/
rr rr ' lext. "Pas,sword j "
l;6id
Alan'lat: ,, r, r ro i d : 1 ayout-wid Lh= " wr ap-con tenL "
,rl iroid: layoul-heigrlrt.= "rllrap._corf cnC /
,n,1roid : texLColor= " #t t0 A00f t "
Fiornor YIP:
. , iit'lerxt android: id= "6+ ''dlet p!,/"
Nomor HP: rrr' l roj d: Iayout-heighc= "wt ap-coatent "
rrrr roid : layout*width=
I "matclurarer E "
rrr, Iroid : 1ayout-gravitsy= "center*ver tical '
rrr, Lroi<l : inpu.tT:rpe* " Lexf Fassfi/ord ">
' '. I L X t >
,,_) _)\i>

L lr l elt$w>

Tambah-user.xml '
r I I roid
" : e,l
: text= "retype-Pa6sklorcl."'
<?xml versi on= "1-0 " encoding= " utf
-8 "?> , rr,lroid: layout--wi-d.t1= 'urap-contenI "
<Scro,l lVierr }snlns : andro id= ! h t ap : 1 /$chenas.. 4ndr a i d. c on / apk / r e s,/ androi d' r l lrcrid : layout*height= "wrap.-cofi te'nx "
. android: orienlation= "vertica"l " r, lroid:
, r textColor= " *t fOA 0ltf '
' android:layour*widLh'"fi77J)arerlt" ' 'l
'

android : Iayout-height= " fi J ll,arenE "

android : background=' # f f 00 f f t f "
Ii r'I'ext and,roid: layout*height.= "wrap*conte.nt "
,rr, lroid : i"d=' &+id/ ef : rp*"
<1'ab I eLa-,,o\r i , r r roid : 1ayoi.11--width= "ma Lchiarefl f
l "
r, lroid : inputTl4:e,; " textPasswo rd " >
xmlna:anlroid.'htrp; //sqhena,s.andraid'camlapkltei'/andraid'' .' r r

android : layout-wi dth= " fi 7 ia tent " 7 /,.,llt-?ext> i:

.android: lalzout*height"fif f--parent " ,t -LRo.,>
"'
.'.,.,

android:Lexlx= "sifekao Masukkan Data Pengguna" . . t,:h>

andro j d : I ayout-wi drh= "ma tchi arent '
unA ro I a , f aiout -f,ei sht= " matchJtarent "
android: text= "Nama Lengkap: " rl,leRnu> ...,
..

androi d : 1 ayout-wi dth= "wrap*content " ,xtVi&W .,. . . t' .:

',
android : layout_he ight= " wr ap_cantent " rrr,lroidrtex!= "ffoJtor flP; ".
android : textcof or= " # t t 0 0 0 0 t t " rrr, roid ; lal.out . wldt]r}= " wtap-c.antent "
I

r, lroid : layout_heighE - " wrap:content'l

, r

rrr,iroid: textColor= "lttf 0AAAtf i .-

<Sab1..g&or,r>l'rr, . .t ' ,,. : . l'i'.l'''i . ., ... ..:.

<TexLVi ew
android : text= "Jvo.rnor ?-1p.. "
android: layouc-widtll= " wrap_content " Langkah IV
android: layout.-hei ght= "wrap_content "
android: textcolor= " # f f 0 A 0 O t f " I trratlahTt/e java yaitu tambah-user java dan CustomHttpClientjava
/>
'l'ambah_user.java
<EdiitT6xt ",'andra'id: Iayout-heigtr-tiiiiwr';I1-son ren r "
android : id= " A + id t et_no t e7 " I,, rckage com,.w11ig,,,ptr.lxnysql ;
android ; layout.-width= " mat chJ)a rent " >
</ Edi tTexr > lrnporto::g,.apache1hitp'NameVa1uePdiri;.l'
< /TabIeRow> r rl1;ort org . apache , h.itp . mes sage , Bas icNamevaf uePair ;
import android. aPP. ActivitY ; Arraylist<NameValuePair> postparameters = new
lmport android. content. Intent,
imiort android. os. Bundle ; r.r ayl-istcNameValuePair> ( ) ;
r
postParameters. add(new BasicNamevaluePair ( "username",
import android.view.view; .,rr.qetText ( ) .toSLring( ) ) ) ;
import android.widget. Button; pos LParameEers . add { new Bas i cNamevaluepa j" r ( " paB sword ",
import andr'oid. widqleL . EditText ; .tostrinq () )
imporL android. widget. RadioGroup ; t,w.(trelText ( ) ) ;
postParameters . add ( new Bas I cNamevaluePai r ( " repas s!,ord'',
imiort android.widget. TextView;
' r,w.getText- { ) . toSt-ring ( ) ) ) ;
posLParameters. add(new BasicNamevaluePair ( "nama",
public class tanbah-user exlends ActiviEy {
' l.serTexLO.toSEringO ) );
postParameters.add(new BasicNamevafuePair{ " jeke1". typel) ;
EditText un, Pw, rPw, nl, af , nt, nh,'
posfParameters . add (aew BasicNamevaluePair (" alamaL " ,
RadioGroup jk;
Textview error; ,rl.getTexto .toStringO));
Button simPan, keluar,' postParameters . add ( new sas i cNameValuePai r ('' nomor*t lp',
rrr . get.Text o .rostrinso));
postParameters.add (new BasicNamevaluePair ( "nomor 'hp" ,
/** Callad when the activiey is firsr created' */ rlr.gretText{} .toStringO ) );

Goverride String valid,- 'Ii'*/

String response = nulf;
public void onireaf,e{Bundle savedlnslancestate} {
super. oncreate ( savedfnsEanceSLate) ; cry t
setcontentview (R. Iayout. tambah-user) ;
response =
un= { EditText } f lndViewByld ( R. id. et-uil ), , rr:;tomHLtpClient.executeHttpPost ( "http: / /LO -O -2.2/he1Lonrysql/simpan'ph
pw= i Edit?ext ) f indViewByrd
(R - id. et-*pw) ; r", postParameters) ;

rpw= (Edittext) findViewByld(R. id'€t*rpw) ;

nl; ( ) f indvieroByrd ( R - id. et-nama) i
Edi t?ext Stringr res = response. tostring ( );
jk= (Radiocroup) findvie\^,Bvfd(R. id' jekel) ;
aI* {Edit?ext ) f indvieuBvld (R. id' et*alamaL} i res = res.trimo,
nt= EditTexL) f.LndviewBy1d tR, id. ets-noLel ) i
(

nh= {EditText ) f indviewBvld (R. j-d. et.nohp) ; res = res.replaceAll t"\\s+", "");

error . setText (res ) ,'

s inrpan= Butlon) f indViewByld ( R. id . btn*s impan ) i
(

keluar+ (autton) f indvie\-,Byrd(R' id'i:ln-keluar) ; if (res.equals("1") ) error.setText('Dat.a Tersimpan") ;

error= (TextView) findviewByld(R. id' error) ;

. simpan.setsOncliik1Jistener(new View,OnClicklisteoerO { else errof.setfeXt{''Data Tersimpan Ke Server"} i

GOverride
public Yoid qnqlick{view v) { catch (Exception e) I '

/ / TODo Auto-generated $ethod stub .i . .., ..

un.seLIex!(e.UqStrlng() ) ; .

$,#(ffiw
-,.:.-- .
,,,,,-""'. ,_
Siring
,
:,
;
.tlgre=nr1}1 .
,ut )

switch (jk.getcheikedRadioButtonldO ) { ]
case R.id.Pria:
tsype-'iPria n '
break; i);
caEe. B.,.id.rperefi{)uan : i i. ,

txle*{ Perempuan"
public void keluar
,.
(Vj-ew theBuuEon)
break;
] {
InIent a = new fnLent ( this, l"ogia. cl"ass ) ;
 slarlActivity{,a);
* orelurn an Htfpclidrit. .obj'6ct with conoectsion parameiers set
i
private itttpclient getHttpclient()' { :
"e*.ti"l
if (mllttpcl-ient,ir.i ru1.L) {
.t'
Karena database kita berisi text untuk-7te/d jekel sementara diinputan/ornr .. mHLtpcl.ient 'ii new lefaultElt$Cli€nt{)i ,.t ,', . I :. ..
kita adalah berupa radio button sehingga kita memerlukan kondisi berikut ar*a*.,,Il,ttpFarams 'paramF. =. :nHtrpclient.getParams ( ) ,
untuk mentransferkan pilihan jekel kedalam text. . attpconn€qtionParams ..EetConnect idnlimeout'.( p4iams,
II'I''I'P_TIMEOUT) ;
Blsd HttpconnectionParams. setsoTimeout (params, HTTP-TIMEOUT)
l/a1ur variabel utk menam;x-rnqepfllhsn Jenis'kel&rfH Conn!-IarlagerParams . setrimdout { params, HrTP*TrMEour } ;
r-r,1ri,...,.. switch (jk.getCheckedRadioButtqnldt)') {
return mHttpclient;
' ' '*'*'il11:"f;ii'1:l', .. .,,..,

:
I

* Perfoxms an I{TTP Post request to thc specified urL with the

LYPe+'lFeremp1.ran",'..i ::. : . : * specified parameters; .'
brea]lli',' '
'

j * Epardm ur1 . fhe web''eddrqs.q to post the request to'

* @param posLFarametets fhe parameters to send via tho request
* @return The ' e6u1E of tl.e request
Kemudian ("http://ro.o.2.2lappmysql/simpan.php) adalah koneksi ke * GEhrows Exqeptlon
seruer dalam hal ini menggunakan 1o.o.2.2 yg artinya adalah localhost,
kemudian appmysql adalah folder di htdocs di sistem seruer kita tempat di public static .string executEHttpPost(String url,
Ar r aylist<NameVa1uePair> poseParameters) throws Exception {
mana file simpan.php berada. BufferedReader in = nul1;
try {
HlLpClient client = getHttpClienc O ;
CustomHttpClientjava HttpPost reguest = new HttpPost (url ) ;
paCkirgdconi;wi.1is'appmy9gli...... UrfEncodedFormEntity formEntity = new
,J
II r I EncodedFormEntity (postParaneters) ;
request . setEntity ( f ormEntity ) ;
import. j ava. io . Buf f eredReader,' 't
HEtpResponse response = client-.execute (reguesE) ;
import. j ava . io . IoException, :,,$ in = new BufferedReader(new
import java.io.lnputstreamRead.er; $l I rt )utstreamReader ( response. gelBntity ( ) . getcontent ( )))
imporL java.neL.URI; ,ffi
r ;

import java.util.Arraylist; :l StringBuffer sb * new StringBuffer{"");

tt SLring fine = "";
irnpqrtorg.ipache.rrtrp'nrtpae*po*"*; , ,t String NL = System.getProperly("line.separator" )
iqport org..apachei.htstp.Namevalrjepalr; ' ...,.- .. I while ((line = in.readlineO) t= nul1) {
impor.t org.apache;http.client.H&tpelient,., , : ,.:. .. d sb.append(line + NL);
import org.apache.http.cfient.entity.UrlEncodedFormEntity; il )
import org.apache.http.client..methods.HttpGeE; il in.closeO;
imporL org.apache.http.client.methods.HttpPost,' il
import. org, apache. ht.tp. conn. params . ConnManagerParams,' .fl
import org.apache.http.impl.client.DefaultHttpclient.;
imporE org. apache. http. params . HtstpconnectionParams;
,,t
,jt
"
imDor'L'o'Is.apache,ht'tpi:para*q]H!tpParamc;
"',,ii:,;iil:ii.,"il,'"".'"n
public cfass CustonHEtpclient { "jil
/** The time it takes for our cfient t.o timeout */ ,il ) catch (IoException e) {
public static flnal iht HTTP-TTMEOUT = 30 * 1000; // milliseconds fl e.prinEstackTrace ( ) i
/** Single instance of our Htt.pclient. */ il
)

lpgivate staiic ltttpcliEnt rn!{tLpC1ienl,;'' '' ;'", ilil

/** I
,il
* GeE our single instance of our Httpc1ient. object. I
 * Performs an HTTP GET request to lhe specified urI.
* Gparam url- The web address to post Lhe request to
* @reEurn The result of Lhe reguest
+ Gthrows Except-ion
public st.atic String executeHttpcet(String ur1) throws Exception
BufferedReader in = nufl;
rry t
Httpcliene client c getl{tL.pC}ienL O ;
llttpcet request = new lItEPGet ( ) ;
request, setURI (new URI (ur1) ) ;
HttpResponse response = client.execute (request) ;
in = ner.r BufferedReader(new
rnputstreamReader (response. qetEntilry ( ) - getcontent ( ) ) ) ;
StringBuffer sb = new StringBuffer("");
String line = "";
String Nt * System.getProperty("line.separator" )
while {(Ilne * in.readline{)) l= nuLl) {
' sb.append(line + NL) i
)
in.close O ;

. String resull - sb.toString();

reEurn result;
] tinally {
if (in l* nu1l) {
try i
in.cfoseO;
l catch (IoException e) {
e,.printstackfrace ( ) ;
]
)
j
Iterikut adalah data mysql setelah dilakukan penyimpan ke seruer
] ilhfl

Jalankan aplikasinya dan lakukan input data seperti gambar berikut dan . S cni-
$-.g:_,1"
:q :-t{tg:.y. lHW i
l$ ! rabre Data
l,-::*. j-ry.qg.. "
pastikan isi database di seruerbertambah setelah tombol simpan ditekan. , -\ pmplr . -.

*&&&dl.rfitor,r$tominahnskdFrr {l ). ltolFms 5: -HeSj

r. l, lclumns
ii ,i hds*
'iler*

Strrd Proci

. Funeiim:

. Tr(gtr:

Aplikasi Login User

.S i apkan lay out tampilan fo r m 1og f n seperti gambar berikut :
 rr rdroid : layout*heigiht.= "wrap*content "
, ndroid: textcolor= " #ff000 0 ff "

tilakan'Login sebelun imem6kai aplkas! titditText android : id- il g+idle t*un 'i

Uggmannel.
'i
,, , ''
.:-i..-
, r

. r r
rrdroid : layout*width= "maf ch.,*Irarent'r
rdroi d: layout-height= "wrap-content '>
l . EditText>
'lexLView
Pasxuard:. ::
r ndroid : text='lPassword :

li l:::13 : l3llli:ffi ill;=ruk,trttrt,

rudroid : textColor= " #f f 0000f f '

- t,tdj.tText androi.dr 1ayout*heighu= "wrap-content "

. rrrclroi d: id= G+idletjw"
"
, r ndroid : layout:width= !'maLchJaidnt "
. r r r, roid : inputType=' textPassword " >
I

. F:ditText>
'l'.rbfeRohr >
,,rii." android: text= "Login"
,, ndroid: id= " 0+id/btn-Iogin "
, r ri<1roid: layout;width-'wrapicontent " .

, r nclroid : layout-height- "wrap*content " >

/ Bu t ton>

llutton android: te>at,e'Cance1 i

Login.xml . rr

. rr
idroid: id= " G+id/btn-cancel "
rdroid : layouL*width= "wrap-cQnEent "
<?rsnl version="1. 0" eacoding='utf*8 r"> rrrclro j-d. : layout-heiEhti: "wrap-cQnteint " l
<LinearLayout / Bulton>
xnlns : android= "htlp: / / schemas.. android. comlapk/res /android"
. android: orienLation= "vertical " 'l'abIeRow>
android : layout*uidth= " f i I liarent "
android : layoul*height.=' f i l1Jarent "
android: background= " # ff00 ffff' 't'r:xtView android: text*' '
. rr r, lroid: fayout-height= "wrap-content "
, r rrclroid : id= i G+ld/tv-er.roi "
<TableLayout
>cnl,ns : : I lschemas. aldroid. com/apk,/reslaodroid'
android: " http . , r i<lroid: Layott-width= "wrap:-conLen! * >.

android lalrout;width=' f i11j:arent "

: 'I'extView>
androld:'1'a1rout.heighi=.ir1i11335Ent"
't'r,:xtViev/ andioidl*exL=ri ! I

, r r r<lro id : l- gyout, 'hei ght =. "wrap-content'r'

<TexEView ,lrr<lroid:id:,:0*'idl1j:arak]-,,'-
arrdroid:!exr="Sllakan r,oEin sebelurn memakai aplikasi" , r r rrlroid I 1ayout*w-idth= "wraB*cQnLeht' >
android: layout-width= " f it lJarent " 'l'extview>
android : layouL*bei ght-'''wrap-content "
android : textcoloi=.' * if 0 000 f f ' 'l'r.xtView .android:text="Belum MemiLiki Account':
,rr(lroid: layout-beightt "wrap-conteot*,
.rrl lroi d : id="@+id/Ijarak2 "
<TextView . r r r,Iroid l layout-wiitth- "$rrap-content "
android ; tdxt=' Username ; ".. , r r r, l roid: textcolof= " Sff0000 ff " >

android : layout-width= "wrap;conLent "

</TextView> .. . ,.,,.,,,. . .,,' '.,

GOverride
<Brrttqn android:L€xt*'tBuat AccOunt'.' 11.

android : layout_height = " wrap-content " . public void onClick{view..v) {

android : id= " G+id/daf tar " i :.....

android : onCl ick=' tambah_user " / / 'IADA Auto-.genereted]iimethod stub

android: layout-width= "wrap-content " > . .

. __ o.:ry"isE<NamevaluePair>
< /BuEton> postParameEers = new
Arraylist<NameValuePair> () ,.

:iffi:::::il::i. pos t Fdralnet. ers . add { new Ba s i cNameva 1 ue pa.l ri ( ." username ",
rrn.get.Text ( ) . tostrinq( ) ) ) ;
Buatlah"lile loginjava seperti coding berikut ini: .. postPiiranieters . add ( new Aas ic$amevaluePalr (" passwqrd,rl.,
l)w gerrexr{}:toslrlnsil)); ,,,, ',,,,.

, ,
Loginjava String valid = "L';*/
String response = nulI;
inqport java.util.Arraylist ;
try {

import org. apache.http,NamevaluePair; reSPOnSe =

import org. apache.http.message. BasicNamevafuePair; ('ustomHtLpClien!.exeCutellitpFost{ohtfp: /110-0,2.2/apt:W*.Qllcheck.php",
lmport android. app. Activity; l,ostParameters ) ,.

import android. content . fntent ;

Str,ing .,r,e* = retponse. EoSLririg ( ) ,
import android. os, Bundle,'
import. android. view.View,. :'
imporr android. widget, Butbon; 5eS. res.trih{"}i;
import. android.widget. EditText ;
1fiSart android.widget.Textview; reQ = r.eg trepLaclpall ( 1\\st1,rl ll ) ; r

,, ..

p ,1.ii'r,.icla$s l"oqin exterids Activityli. error . seEText ( res ) ;

1

if (res. equals ('1 ")

,,aaiiiext ,ro;prr', )

Textview error;
Button 1ogin, cancel, daf tar; lor ! q,et:text, { " Correq ! Uger{ra$e or. Fassvrord!
e,f ) i

Strinq i; berhasil (v) i

11l,,Call,ed,when Lhe acliviLy is first created' *l ]

Lduverr.1 de
else {
error. sdtText ( "SorryI ! Wlong. uFerna&e r,or Fassword
l,lntered') ; ''., t' ' 'I 1.,
..:a ..:.,
p.]1b.1ic..i.vaid'.6ncrea!.9(B!trdle.,,savedlnstaricegtate).. {. .
)
it,,,ii,itir,i.,,,,i'sUp€I.,;.,o.fiCfeaC6 1 gAvqdIttgtEn:qeslaLe) ;' :
..ii.].]]].i]i]setcontentView]R'1ayd'ut,11ogin'li..... )
- . ,. ,: ,
,..,. .:, , ,t,,,, . i catch . (Exception e)
,, r' un= (EdltText) f iirdViawByral{R.
,
{
.. .. id;e!-un} ;,'i,

,.,, .. r tt
. ,,.i ..

. .t.,t.r,rrn . seLTexL { e . la$tring ( })i .

)
tinavl ay:dlR.id,btn*fosin) ; ,. .
lil..,.,.ll,,i;nlni.,{nulioni
,

'ertoi=it*extVierrr) f indviewByf d (R. id. tv-error') ;'i'i ,'. .'''. ,

login. setOnC.l"i ckl,i sqener ( new Vi ew. OnCl ickli Etener (.)
 Selanjutkan kita akan buat tampilan menu utama aplikasi yang akan diakses
));
j setelah user login kedalam sAstem, menu utama untuk kasus ini adalah
seperti gambar di bawah ini.
publ"ic void taflhah-uscr {View theButton)
{
// disini menampilkan menu utama atau hal selalah login
berhas i I
// dalam haI ini menu blum ada yg kembali aja ke tambah-:user
Intent i * new Inl.ene(this,tarnbah*user'c1ass) ;
siartAc!ivirY(i) i

/l apabila.user befum terdaftar'

public void berhasif (View theBut'ton)
1

rnteat s = ne'$i .Inten! (this, menulayanan^c1ass);

startActivitY(s);
)
]

Jalankan aplikasi sehingga akan muncul, silakan isiform login dengan user
data yang sudah ada di database, berikut contoh apabila user yang
dimasukkan salah user atau possu.,ord-nya salah.

Menulayananiava
Silakan Login sebelurn rnemakai aplikasi I,ackage com.wilis. appmysql ;

Username:
i mport android. app. ListActivity;
import android. content. Intent;
, farah i mport android. os. Bundle;
i mport android.view.View;
Password: i mport android. widget . ArrayAdapter;
i mport android.widgeL. ListView;
ataallal import android.widget.Toast;
public class menulayanair extends LlstActivity {
tll
hgin
I:.*. - Ii Fncd I /** Called when t.he activity is first created. */
,i+ul L_ -;: ;

Ssnyl!lEfrong U$e{narne or P*sswsrd Enteled public void .oncreare(Bundle icicle) t

super. oncreate ( icicle) ;
Belurn' Merniliki,Accou*t
. gtringtll merru]avaaan: new $trinerll { "pra Bayar",
"Pasca Bayar', 'Customer SerYice", uHeIP",ttExi!"); i'

l/Menset nl1ai array ke dalam list adapater sehingga

,l,rta pada array akan dimunculkan dalam list
thi s . seLLi s tAdapter ( new ArrayAdapter< St. ring> ( thi s,
 i = new lntent(this, I{e1p.class};
.]
) finish ( ) ;
) else {
. GOverride Toast.makeText (thiE, "Anda I'Iemilih: " +
/**method ini akan mengoverid.e method onl,isEItemclick yang qda r,i].ihan + n . Actionnya belum dibuat", Toast,LEldGTH LONG) .shqw0 ;
pada class List Activity ]
* method ini akan dipanggil apabilal ada salah satu item dari
list menu yang dipilih
*/ n('w Intent(this, PraBayar.class) akan me-load class Prabayarjava, artinya
protected..void,on],isLleen1click(Listvi6* 1, .View v, inE lrila Menu Pra Bayar dipilih akan memanggil class Prabayarjava.
position, lonq id) {
super.onlistlt.emClick(1, v. position, id) ;
Srrpaya bisa berjalannormal aplikasi ini, pastikan setiap actiuit! yang akan
/'li M€nangkap nilai text yangr. dklik ,lipanggil oleh sistem sudah didaftarkan di AndroidManifest.xml seperti
Object o = lhjs.getl-istAdapterO .getltem(position) ; lrt'rikut ini.
String pilihan = o. toString ( ) ; ;i

// Menanpilkan.hasil pilihan'menu dalam bentuk Toast fr

tampilkanPi lihan (pi lihan ) ;
) AndroidManifest.xml
/** .' .r. version="1. 0" encoding= "utf-8"?>
* Tampilkan Activity sesuai dengan menu yang dipilih .schemas.andt oid-com/apktres/android"
* i , -:t. xm-Ins:android= "hctpi /
*/ package= " com. wi 7 i s. appmysqt "

protected. void tampil-kanPilihan(String pilihan) android: versioncode= ''.1 "

{ androi d :versionNdme= "?.0 ">
try { <L'iyr'sCk android:minSdkVersion= "8" />
llrntent unuuk seoagai pengerral suatu activity'
Iatent i = null; <appl ical ion anrlro id : icon- " 6drarara 1>7 e / i can "
if (pilihan. equals ( " Pra Bayar,, ) ) t rrlroi<l : labels " G srr ing i app-name " >
i = new Intent(this, praBayar.class);
, r

<.,' ;-. , rY android:name= " -Jo91in"

) else if (pllihan.equal-s ('lp61gsa Bayar" ) ) i android: Iabel= " @sl r ing' app name">
i = new Intent(this, pascaBayar.class),. <in,-:LL li.l. l-i>
] .e1se if (pilihan.equals('Customer Service") ) <aci:i*1-i android:name* "android, intena . actian.MAIN" />
i = new lntent(this, <t-'t t- "1'
Customerservi ce. class ) ; , ,.lroid:name= "andtoid. inl enr .eaLeoorY.LAWCHER" />
) else if (pilihan.eguals(,,Help,,) ) { </ '. : '..>
i = new f ntent (this, Help. class ) ,' </.t' \' 'y>
) else if (pi1ihan. equals 1,exit,,) ) { <r"l 'rJ.l.v dn droi-d: name= " . l.l,rlbaJl user "
finish( ) ; anclroid: labe1= " Form Pendaftaran rJser "
) else {
ToasL . makeText ( this, ,,Anda Memif ih: ', + </acl:ivily>
pilihan + " , Actionnya belum dibuat,,, Toast.lntetn-IONG).showO;
l <., :i. iv, -7 android:name= ", menul ayanan"
t'r'' and.roid: IabeI= "Ilenu {Jtama ApIikasi "
] carch ",t"X'.t*'.tt'""J.tJ
.
e.printsEackTraceO; .

</-c' i ,'i t v>

) <acl ivi ty android : nam e.= " Prafuayar" an<lroid : label- " Pra Bay{t " >
,
</a^t.lv'LY>
<acl-ivify android: name= "PascaBayar'l aridroid: l"abel* "Pasca
(pilihan. equals (',pra Bayar,,.) ) . {
if t t'a r't'>
i = new fntent(this, PraBayar.class); <,/:cl, . i: ,r>
) else i.f (pi1ihan. equals ( " pasca Bayar " ) )_ { < a c1: ir.i i:)" androi d : name= " Cus.L omerSelvi ce "
,i i, new Intent(this; .pascaBayar.cLass); rr,lv6i6 ' labe1= "Custoiler Ser,*.ice ">
'
) else if (pilihan. equals ( "Customer Service" ) ) < / a{:t ivlly>
i ' new rntent(this' <aciiwity android:name:'IH€lp'r android: label= "He7p'>
customerservlce.class); </ra*;"i v>
] else if (pi1ihan.'equals (,,He1p,,) ) {
 <,/ appli ca1- i l]n>
<useg -palritl: !j Saon androi d : namee'androi d " pe mi.ssr'- o.?'r . -Iff?ll&Vl{f, " />
<,/mani f es i:>

BAGIAN 19

IilOBILE LEARN'NG

lntegrasi Android dengan E-learning Moodle

l'ada bab 19 ini pembahasan kita akan berlanjut kepada bagaimana
rrrengintegrasikan Android dengan E-learning Moodle menggunakan konsep
t:lient-Seraer. Di sini akan digunakan berbagai macam teknik agar android
lrisa mengakses konten-konten yang ada pada Moodle, baik dalam
rnengakses maupun manipulasi kontennya. Agar lebih jelasnya bisa dilihat
liumbaran umum dari sistem yang akan kita buat.
 't. Folder Connected File
File yang ada di dalamfolder ini nantinya akan berfungsi sebagai media
Server
penghubung atau jembatan antara sistem pada perangkat Android
dengan Seruer dalam proses tukar-menukar data alav request and
T- w"{" I ansu)er. selengkapnya bisa dilihat pada bagian connected File atau lihat
\. dalam CD buku ini.
r-l.v t'--
.....-.......,1:'rr''rul{S)

'...---...---.*" ."":"& lnstalasi Xampp Senrer

l(lik xampp -wingz-r.7.r-installer

Weborne to the XAMPP 1.7.I Setup

Wlzard
ftts wizarC sdl lude 'rN dTtulh lhe hlGllaton nf lA$P
1.7.1.

Dari gambar di atas ada dua bagian inti yang bisa mengintegrasikan Androirl Ite re.trmsded *rat yDu dose all ohtr app&.an.f,s
beture sbrtru sEEp. l'1xs wlli mdF itFsibl€ to uFdEle
dengan Moodle, perangkat Android itu sendiri dan Seruer yang terdiri dali reklst lvrEm filet fl$tuthauhq b retut tru.

Moodle dan database-nya plus connected file yang berfungsi sebagli ald Neit t..ontnue
perantara.

Mempersiapkan Bagian Server

Nah, sebelum memulai proyek, ada baiknya kita mempersiapkan bagiarr
seruer karena kita akan membuat sebuah sistem yang nantinya bersifirt
client seruer. Mempersiapkan sert)er juga membutuhkan waktu yang agali
lama, maka dari itu kita perlu mempersiapkannya terlebih dahulu. l'.cmudian klik next

Ada beberapa peralatan yang dibutuhkan untuk membangun sert)er ini, rli
kHJll.dim
antaranya: S@se ttE lolder in *hich io inslail\AuP I 7 l.

1. Localhost
seM slltutd xffi 1.7.1in 6t AIoME tulds,10 imHln a dfi.rent fslder, dclt
Untuk localhost kita menggunakan Xarnpp sebagai localhost, karenir &osri dd dert onoher fuller' S* &d h.stnffi.

kita akan membangun sistem ini di Windows. Untuk paket xomplr

sendiri bisa di dapat dalam CD buku ini.
2. Moodle
Sebagaimana judul di atas, kita menggunakan Moodle sebagai seruer
dari konten-konten yang akan diakses. Di sini kita akan menggunakau 5Fe r4*€d. I7.m
Moodle r.9 dan bisa di dapat pada tuebsite Moodle.org atau dalam Cl) SEe BvidablE; 7.re8

buku ini. Lihat juga bahasan tentang manogement moodle tntuk

aplikasi ini.
Pilih tujuan .folder ata:u directory tempat Xampp akan di-insfal/, kemucliirrr 'I'r,"qpprrta*+ry:"oi"f.t"rg" ,,it
lrle Edit Ssrch Vie
iiffiil! Gs*- d-*$
klik next Enisding languag€-- setlings Mdfio &[n Plugins iqindw
, lM& u':;*iiqr"*Hri$*s*lsikl *'sl',r.lriit:!\i (Wi.ll*& ' p ssr
I config.pfu |

li r: ?;::ri
lurset,SCFG, ,' r.
l

$cFG->dbtype ::: 1:i,!{.ri 1 - .',r 1 l:l rllr )

gfEG->dbhost = '.i.r.:ila.3:' j :l!:"irp.crr
tLtb""@nile-:1;
$CEG->dbuser = 'ii:i::'; r,'
scn',G->&pA55: ; j :r
$CnG-..prefix ,,' ;
$cEG->dl:persist = fa]-se; i
ScFG->1{twrtrtrt : i r':I:!:,i,',,.1.::s.l.i
)u!E-.'olrrooE ,-t'
9CE6->dataraot =' ar .1xBrti:,.r,::,j
$CF 6--3director1,1:emissions :
SCgG->admiR = 'a:lu.ii' r
)uaG-.'unacoae@ - true,
requi:re once{SCFG >Cirroot, '. ' - , );

Gambar Konfigurasi config.php

hilangkan centang pada seruice section, kemudian klik install dan tunggtr.
4. kemudian buka brouser ketikkan http://localhost/phpmyadmin
dan buat sebuah database dengan collation = utfS-bin dan MySQL
connection collation = utfS-bin. NB: nama database di sini harus
Instalasi dan Konfigurasi Moodle sama dengan nama dbname yang ada padafile config.php tadi.
5. Masih di brotuser, ketikan http://localhost/moodle dan ikuti
1. Extract moodle-latest-19.rar ke directory C:\xampp\htdocs.
instruksinya, hingga moodle ter-insfall. Jika telah selesai biasanya
2. Buatlah sebuah/o/der data directory di C:\xampp\htdocs , dengan nattt;r
tampilan browser kosong warna putih dan untuk itu kita perlu
folder moodledata. melakukan r elo ad ulang terhadap url http : / / lo calho st/ mo o dle.
3. Untuk pengguna Windows 7 ataupun Vista atau Xp, copy-kan .lilr 6. Kemudian kita masuk ke folder atau directorg
config.php yang ada pada CD, kemudian edit file config.php tersebtrt
C:\xampp\htdocs\moodledata. Di sana kita akan menemukan Ttle
mulai dari nama dbrype,dbhost, dbuser, dbname, dbpass, dirrool. .htaccess. edit.file tersebut menjadi seperti di bawah ini.
wur$Toot, dan dataroot.

order deny, allow

allow from all

.7
Kemudian isilah konten dari moodle tersebut, mulai dari username,
course, dll. Untuk cara mengelola konten moodle bisa dilihat pada
file bagian manlg e moo dle.
 . t$ mobjlelr.mang

Mempersiapkan Bagian Clien (ANDROID) r

x* Andtoid ?"2
qi$ srr Untuk membuat package
,,S Klik kanan path /src ) new )
Maksudnya di sini kita akan memulai membangun sebuah sistem tli r 3J hrhm&llBmrirvr
Package
perangkat android yang akan bertindak sebagai client, di sini kita aklrr e $$ mobik.about
menggunakan eclipse indigo sebagai IDE dan menggunakan android verrii i. trl eboutjes
z.z. untuk itu ada baiknya sebelum memulai, kita persiapkan dulu proyck r {$ mobilr.b*itr
r. il berlla.j*r
dan paket-paket yang terlibat didalamnya. r 111 b*hrfdail"p"r Untuk membuat class
* $ mebilc,tor*ig
r, $ konekijwa Klik kanan package ) new )
Berikut properti dari proyek yang akan dibuat: ;, l* rugisilhFclientjoYo
class
Project name : mobilelearning r $! mobil*,cocm
: L* cour*,jra
Build Target : Android z.z :' [J coune$etail.iaw
Application Name : Mobile Learning I |{ tuum$*ailJs.jrtr
r S mcbllr"dowlood
Package Name : com.mobile.learning : [] dow0ttailjw*
Activity : login '. l! domloadjavr
;. l$ dsmTctjxa
Min SDK :B . *) mobiie..kel!s"r!!
r i$ RSSFadj*a
I il: [5sH!(dls.j!va
Setelah selesai membuat properti dari proyek, editlah bagian-bagian dat't ; ill R5sxmlava
folder di dalam proyek tadi. r $ mobilc,nilai
l. $ nik{wa
;, $ nilais*ailjra
Di dalam folder /src, secara default telah terbuat sebuah package dengarr l lil niliisrrrilrrjea
e $ mohik.lugrs
nama com.mobile.learning dengan sebuah closs dengan nama loginjavrr, : ll pilihTugr{*a
berikut beberapapockage dan c/ass yang harus kita buat: r. !l tug*jrvr
: !;'iugaa0tttiljrvr
r' |l} tugxDadlJ*j*r
i: p tuqrr0csiU*Upfvr
1., lI tugisBft{ilupj}Yt
:, [l] tugr*Upjava
z$ mobilc.uptrud
I j) uplcadjm
;, ffi Uploadwjava
r lj) uplordtlpd*cjwr

l(emudian buatlah beberapaf/e xml untuk menangani tampilan dari sistem

virng akan dibuat,Ttle xml dibuat pada path f resf layout, dan beberapa buat
icon untuktampilan halaman awal yang bisa di-copy dari CD dan di-paste ke
puth dranuable yang ada pada path res, Path drawable secara defoult belum
rrda, jadi kita harus membuat path tersebut. Caranya klik kanan path
/res)new)folder lalu buat namafolder tersebut dratuable. Untuk lebih
rnudahnya ikuti seperti gambar di bawah ini.
B. welcome.xml android: id= " G+id/7inearlayout4
android : layou t-widLtr= ma E chJar en t "
"
"

Setelah selesai membuat tampilan untuk login,kitalanjut ke tampilan untrrl
halaman utamanya. Di sini kita memberi nama file-nya welcome.xrnl
halaman ini berfungsi sebagai navigasi untuk menu-menu yang akan kitl
buat nantinya. Berikut code dariwelcome.xml
<?xml version= "-1 . 0 " encoding= "utf -8,'?>
<ScrolIView xnlns:android="http:t./schemas.android.com,/apk/zestandroi<1"
android : id= " @+ id I sc roJ. 7Vi ew1 "
android : background= " # f t t t f t'
android ; layout*width= " fjl J._.paren t,'
android: layout_heighL= " fifLJ)arent ">
<LinearLayout
android id/ l inearLayout l,'
: i d= " @ +
android. : layout-widt h= " match 3.ar enL'
android: Iayout-heig i.L= "match-parenE "
android : orientation='verti ca-1 ">
android : layout*height='wral1-contefi t "
android: ori entation= "vertica7 ">
lJuLton
android : id= " e.+ id/ ibKon t en "
android : 1 ayout-widt h= " wr ap-c ont en t "
androj d : layout-he ighl= " wrap-content "
android : Iayout-gravity= *6'"rra", var t i c a L
andro id r background* ".Edr awabf e / kont en "
androidrLexL="" />
E. /'LinearLayout>
INW
n
re
LinearLayout
r android: id* " 6+id,t 7inearl,ayout5 "
android : layout-widtin= " mat chJ)aren t "
rt I android : 1 ayout-hei gr.x= " wr ap-c onten t "
android : orientation= " ver t i ca 7 " >
i

'l'extview
<Linearl,ayout s android : id='t A+ idl t\.KanLen "
android: @+id/7inearLayoilt2 '
id.= " ttl android : 1 ayoul-width=' wrap-c ont ent "
android : l ayout-width= ma t chJ)ar en t "
" android : 1 ayout--hei gl)t= " wr ap-c o.n te.n t "
android : layouL_heighL= " wrap_content " android : layout*gravity='eenter vert ical "
android : orientation= " verticaJ- "> ffilsD aadroid : lrextstyLe= " ba 7d -
android: textColor= ' # A0 AA00
<Texwiei,r
android : id,= " G+ id / I ogou t "
H android: texE= " MATERI"
"

android ; layout-widt-h= " wr ap_c ont ent "

android : 1 ayout-heiginL= "wrap_content " / L,inearlJayout>
android: layout-graviXy= " y1r7r "
android I textcolor=' #fVi 3 i 3' l,i.nearl,ayout
android : lextstyle= " boLd " android I id=', @ + i d / 7 inearLayout 6 "
androld : text= " Logout " android : t-width= ma t chJ)ar en t "
tayou "

android : layouL*heigh:- " wrap*content "

android : orientar ion= " vert ica 7 " >
</Linearlayout>
l{u t ton
<LinearLayout. android : id= " @+ id/ ibBer i ta "
andro j.d \d- " E + id/ 1 in$arLayout 3
: android : layouu-v0idth,=. "wrap-content "
android layout-widt]n=' mat chJ)ar ent "
: android : layout-hei ghL= " wr ap-c ont ent "
andro id : layout-hei ghi.= " wrap_con t en t " android : layout-gravitY= "r1n1rt "
android : orieneation= " vert icaf " > android:text="" ..
rrri:iroid: background= " Gdrawabf e,/news " / >
<Textview
android : !d= " G+ id/welText " / Linearlayout>
andro id : Iayou L-widL 11= " wrap-c onL en t "
android : I ayout-height= " wrap*conten t " l, inearlJayout
android : textstyle=' A7U." android : id= " G + id1 7 i nearLayout 7 "
android. : textcof or=' # 0 A0 0 AA " andro id : 1 ayout*wi dt\* ma E chJ)ar en t ""

android:text= "te" android : layou!*hei ght= " wrap-c ontent "

android r orientation= " vert ica7 ">
< /Linearlayout> ''.xLView
android : id= " G+ id/ tvB@r i ta "
<LinearLayout android : layout*widtln= " wrap-c ont ent
 android: laygut-heighL= wrap-eonten.t " :'
anilroi'd : layout gravi ty* " z: ight]' android r 1a)tout*widlh- vlrr.atchJoarefit q'
aiirrdrqid:teiii,$.fy1E* "baid",. . . ...' : ri.. andro id : layout he I ghi =' qr!'4p!co n t e& E
.
lt,.

. aadroid: Lextcolor*' *AA0000 " android : orl'entation= 'iverticaf "> . '

6hdioidr text= rBEfiIf-A ' . .:'

/> ''fextvieh, ''....''

. "' andioid t idr "6+idltvltli Tai " .'

< l,t.{ilearljay,{}utt andioid,: la.Youl*'nidth* '60dP "

aridroid i lavout'-height= 'r#"aILcar,lfent "
<LinQSiI,aYquL . android r layouL*gravilv; iriErlrc I
eilldroidi idq "'6+jd/J jiiearLayautS" ." r i
,,

i android: textsiyle='bo-ld" "

android :.l.iryout::widBhtI"mid t.clt-Jr.*lten t;"':.' .'android : te)(LcoLor.' *00AA0 A'
aridroid : 1 ayout-h6i gi!!= \vvap*c ant bnt " . . andioid r text= " ..uI;AI', .

androld:oiieni;tuion*"vefticb1.1>., . .,:.:'

<ButLon /LinearLAyout>
..,. andrdid tidi+i!',@*id,/j ITTUgas]' I - iii '

, :.' an-dfsidrr layeut*width* "wrap*conten|"

., Linearlayout
',.a0drq:Ld: layout.*Jreighb= "wral2-coxtsr.t' android :.id= *.&+id,/ 7 inearLayout 12 " .

arrdrdid.:.texts: r r ir.,,i, andro id layout-width* "ma f, .ch;;:are. n t." .'.

:
androld:backgrourtd*'6drarwabi,e/tiigrasr/> .': I .i. .,,,.. . . andro id ; layout-height= lwrap*eQn te. E t "
android : orieniat.ion= " ver t iea7 ">
< /Linearl-ayout>
l.lutton
<LinearLayout andrord I id= " G + id / ibDonTot "
.'::.::.::;,','',.android.:.id=,,6+idlJ.iada.rLay1utg{ ... . android: layout*width: tl77dPr
androld i layou[ln-idtYi=''\nat'q hJpa :rant t aindroid : ldyoi.lt*hei g}lt' " wr ap-c ont ent "
.' iiudroid.: layout*heightF- "hrr-ep;cont.enL 1 android : backgiound=' @drawable / downToaa "
android r orieQtatlons :uertic'ala > android:texl="" l>

rr :
<Text^View
:- /Linearlayout>
::3::i1:i";.':l#:Xfi:)i-,u,r.,j,,. t,inearLayout
rlnilap-co
android : layout-trei ghb= nt ent' dndioid.r id= " &+ id / T inearLayout l 3 \
android : textstyle; il ba ld ti android : layouL-widtr1= "natchJ)arent "
android : textc.olor= . #00 000 0 " andro.id : 1 ayoul*hei ght= "h/rap-salten t "
android: text= " TUGAS" android : orientation.'vertica-l ">
/>,
'rexlView
</Linearl,ayout> . androi.dlid='tg+id./tvDonTot''
android: layout-width= "wrap-contenE "
<Lineailayout' ,, android : lefyoul*he i ghl* " wt ap-cont ent "
android,:textstYle*"boZd* .

''I -. aadroidr layout*width: lrnatch3arerilltr' ardroid :.ter{ccolors | #,00 0000 "

...:..|.:..4ndroid:1ayouts'hQ.i..gh!=1@.ap-fonqe'4t,' andfoid.; ggY!=rlP$ithli0eD'i l

<Button /Linearlayaut>
andioiilrid;.'t@.*idlibNiT,iti.tl .,,t"..,,,'.,,,,.,,,..'.'...,,,:::',,',' ..

androidi l.aysut invidth;:!i,!. f..Qe.tenru ''- ' L inearIJa.l.eti!

andioid i 11
ayolr!-J1ei gtrt.= " rtqialr- con't eri t.' .': arrdiciid : i d= " o* i d / 7 iaearldvou ti'{ r',
android : laYout-grav itY=' 4rr " a1 4rtidro id : layoir t dth= trna tilhJsa.fer2 t q
wi
android'irbaekgfoundrir'ddlaiiiableLl,,llai'I . aridr.oid : f ayor"it,heighL.?,;grAp-conLelt ".. .

androld:text="" /> andrgid : orienlatiqnq * lrert icaT ">

..
....:
< /LinearlayouL> ItuttOn
android : id- " €+ id / ibebqut'
. android : 1ayou.t*Iiridt\* "wtap-qQntent "
 android : layout-heighf= " wrap*content " ,rndroi d: layout-width= "fj I l--.parent"
android. : background= " Gdrawab l- e / abo u t " .rndroid: fayou t-height= "wrap-content "
android: layout-grav ity='ainYr " .rndroid: l.d- " @+idl feedpubdaEe " / >
r, .: IView
/> ,rndroid.: Iayout-widLh= " fiII JtarenL "
</Linearlayout> .rndroid : layou t-hei gl:rL= " wrap-c on t en t "
,rndroid: autolink= "u/eb "
< LlnearLayouc ";;;;i;, ii= " @+idr reedr ink" />
android : id* "id / 1 ineart ayout1" 5 "
@ + .r:rLView
android : layout-widtln=' matchJ)ar en t " ndroi d, t td.= " @andro id : i dl 7 i s t "
a
android : layout-hei glnL= " wrap-c on ten t " android: layout-:width= " f iJTsatent'
android : orientation* " we.r,t i ca 7' > android: layouL-height= "wrap-conLent " />
., xtView
<'1'excvleu/ android : id= " Gandroid : id / emPtY "
android ; id* " + i d / EuAbau t "
@ android : layout-width= " fi1L-Jtarent "
android. : layout-widtin= " wrap-c ont en| " android: layout-heig]nL= "wrap -content "
android: 1 ayout*height= " wrap-content " android:Eext= "No Data" />
android; .Layout-qrav ity= ' rinn, " I i nearlayout>
android : text stvr*=' bil:1
d : texrcol or =,, #00000 0,,
android.: Uexi'= "ABOUT
D. showdetailcourse.xml
< /LinearlayouL>
/,i/c ini berfungsi menangani tampilan untuk detail kontefl course yang ada.
< /Linearlayorxt> l';rrrrpilan ini hanya berupa textview. Berikut code daishowdetailcource.xml.
<,/ScrollView> . xml version="1".0" encoding= "uEf-8"?>
rr(:ro1lview >snlns:andro]ld-'ht:.p://,schernas. android'com,/apk/reslartdroid..
android : background= " #f tfff { "
android: layout-widt h= " fif7J>arenL "
C. mainrss.xml android : Iayout-heighL= " f i 7 7 J)arenE " >
t, i nearlayouE
Karena nantinya setiap konten yang ada pada masing-masing menu akan android: orientation = " vertica7 "
ditampilkan dalam bentuk /ist, maka kita akan menggunakan teknikparsing android: layout-widEh= " f i7Tiarent "
android : layout*heigirrl=' f i 7 l--paren f ">
xml, seperti rss. Sehingga kita membutuhkan tampilan berupa liswiew
Berikut code untuk tampilan mainrss.xml L inearLayouE
and.roid : orientation= " hor i z onLaL "
<?:<rnf version= " J-.0 " encodinq= " utf -8 "?> ;;;;;t;, i"r"".-ri-a.h=rir7-parent "
"
<LinearLayout android : layouE-height= " f i l lJtat ent "
:<n1ns:android=,,htLp;/,/schemas.android'com/apk/reS/android,.
android : orientat ion= " ver t i caf
android: layout_widEln= " f i f fJ:arent "
android: layout-hei9161= " fi 71garent
'l'extView
<Textview android: id= " f +' O,"ud,ur "
android: layout-widt h= " fiTfJ:arent " andro id : layout*marginTop= " 5P1 "'
andro id : layout*height= "wrap-con ten t " android I 1*yout-widtb= " fi77*Parent "
android: Lext= "Gstri ng/he71o" /> aridioid: layout-heighl= wrap-c antent
u
"'

<TexEView android: laYout-weight= "f "

android: l ayout-width='f if l-Jarent " android: texEsize- " 2 )Px "
android : layout-height= " wrap-content " android : gravitY= "center'
android: id= " @+id/ feedtitTe" /> android : lextcolor=' # 0 A0AO 0'
<TextView android : textSt.Yle= " bo Ld"
android: layoul-widtln= " t iTlJtarent " ./Textview>
android : layout-heigint= " wr ap *c on t ent "
android: id= " @+id/ feeddescribtion" /> Li nearLayout>
<TextVi ew Li nearlayout
 ' .. . android:Orientatiort*"harizontal,,
, ' - axldroid.l.layout ..uidihE..'f-j]JJraren.t,, .
,.r '. .

r : andfoid,IeyoUL*height*,fiJlJagenbr1, . ,,
::
<TexLView
android : id= " G+id/ isi "
. .,,android'; layoqt ,,rnarginTop=r'r'5p'x' . , I ., i
r..r
,, 1., .,, . . iindip,id: layout*width= "fi_1_lJrarent,
.: i :i:i andloid:1.ayput*height+,,wJ:ap..go4tent*
'..i.'r., . . rand::Oid:grraviLy*."J6ft"''

< /Linearlayout>
< /Linearlayout>

E. showdetailnilai.xml
File ini berfungsi menangani tampilan untuk nilai yang diinput oleh teacher
dari seruer. Berikut code darifile showdetailnilai.xml.
<?;anI verslon= "-1 .0" encoding="utf -8',?>
<gcrollview :orlns:'and{oid=,'JrEtpj,//gche&ag,androjd. com/apk/res,/and.raid,,
android : background=' # f f t f t t'
.: a{droid : 1a}aout*width=, fi -zJ:aren t,,
-1
I ' andlroid: layout-height* "fi1l--.pa rent,>
<LinearLayouE.
android : orientation=,' ver t i ca J-,,
''-v^"rA-,,O"".Oi.,,
android ; backgrourd* "#f f t f t t !
i .. .-,,e.ndroi-d: layouu widLh- ufrLJ_Jrarent,,
aadroid : layout* eight= "fj-I-IJ:aren t,,>
<f,iinearlayout
. .

android: orientation='horizontaf ,,

android : layout-width= " f i l J. Jta rent "

. ",ir,,.,. a4dloid:.1.iyout_heightr,,filJJsarenL',
androj-d i bieckgroundc, # t f t t f f ,

<Textview
i.i..',, '&ndroid;id=,'€+id/kepa1a,, r.i

:,]l.li]:ii..andr.oi.d,:text.lJrIlI,Ar,,:.
"''.'.'.",',., androidi.,.layoutJnargin.Iop:l'5px" .,.,,,t.,
android: layout_width= ' fil-lJtarent "
',,,,',.,,,,..' dndroldilayout*height.,:'rffai2-:corteri.' .

':, a!:dvoid: layout::l;qight= "1 " '

, android: Lextsire* 'izabx; ,

android : gravity= "6., g.r "

arldrdid:textcolor= "#0:Qa000,,. .., , .:
android : textstyle=' bofd'
></TextViek>l I .t,, ..,, .,,.,

< /Lineartayout>.
 android: f ayout_height= ,, f if f *arenL,,> ton>
ilu t
<Absotutelayout Li rlayout>
nea
android : layou t.-heig hL= ',wrap_content ,,
:,:roIfView>
android; Iayout-wi dtin= ', f i I 7J:arent,',
<Button
android. : l ayou t_heighL= ,,
5 Opx,,
and roid : f ayou t_width=',
andro id : id=,' @ rid/ upf oadT',
ma t chJ)ar ent,, G. pilihantugas.xml
android : text= ,,UpLOAD TUGAS " /,ik, ini berfungsi sebagai tampilan untuk pilih tugas, nantinya kita akan ada
>< /Button>
< /Absol uteLayout>> rlrrir jenis tugas yakni upload tugas dan update tugas, Ttle inilah yang akan
rlf ()nangani dua proses ini. Berikut code daripilihantugas.xml.
<LinearLayout. {B
android : orienlat ion = ( ho r i z ontal,, :<ml version="t-.0" encod.ing= "utf -8"?>
android: f ayout-widtih= ', f if f J>arent,, lirrrrrrllrrrisllri,]ir,irlrrtrffi ffi $$Nl:.!',r rollView )<mlns : androi,d= "htLp: / /scftemas andra id. com / apk / res / andro i d'
android : layout_heighE=,' f i 7 TJsarent android : background= " # t f f f f f "
android: layout-width= " fi 7lJsarent" HiB
<Textview -[,.i,t
:ir.,ii]i';i i ir,l,, :':,, android: layout-height= " f if fJarent"> W
android : Ld= r @+id/J:udul-Tugas,t
'.,"
r , i nearlayout *{|:$|t@$ijwi{tc , , .... ..., i

andro.id : l ayou E.-marginTop= ,5p.;* , lW$&iiiiirriit1!il:llr;!lll,iiilrliiiiliii android: orientati on= "verticaI " ruM * ",
android : layout*width=,, f i 7 l_Jsaren t,, android : layout*widLh= "fj l lJrar6.l"lt " liill$lllr'\rilirlrl}4i::iii.rlirlrrrliirill i

android : f ayout_heighL= ,,w.rap_conL ent ,' android: layout-height= " fiffJarent ">
android.: fayout-weight= "-l "
android : textsize= " 2 7px "
android: gravity= 'qqrlrr " <Linearlayout
android : textstyle= " bo ]d " android : orienta Lion = " hor i zonta L "
and.roid: textcolor= " #000000 " android :,Iayouu-width= " f i f 7J:arent "
><,/Textvi ew> android: layout-height= " fil7J:arent "
< /LinearLayout>
<L i nearlayout
aidroid : ori entation-,, ha r i zonta l, l{uLton android: t.exL= "EA/?Ry TUGAS'.
android: layout-width= ', f i713arent,, android : id= " + id / entr\4ugas "
@

android : layout-heighr=,, f i 7 l_;:aren t,, android : textStyle= " bof d "

android: textsize= " L6px"
<TextView android : Iayout-width= " matchJ)arenL "
android : id,= " @+ id,t i s iTugas,' android: layout_.heiQlht.= "ma tchJraren l "><,/EutLon>
android : layout-marginf Jp= " 5p*, 'Linearlayout>
android: layout_width= f i7 T3arent
,, ,, Li nearlayout
android. : layout_he i gint=', wrap_c ont en t,, android r orientation= " hor i zontaf."
android: layout-weight= "1 " android I layout*wldEh= "filll:arent "
android : gravi ty='7sl'6' ;;;;;;d, i;;;;a-h"is it= '' ritl-pu,.nt "
android : textcolor= " # 00 0 00 0 "
>< /'r'excv rew> . ButLon android: t-ext= "UPDATE TUGAS"
</Linearlayout> urra.oia, f ayout-height= "maLchJ)ar:ent "
<EditText and.roid : tayout-width= ma t chJ)arent " "

android : layouL-marginTop= " 2 Opx, android : t-exts tYJe= " bo 7 d "

android : id= " B+ id,/ j awaban " android.: textsize= " L6px"
android : Layout_width-,' fi-l JJrarent,, android : id-,, @ + i d,1 upda t efugras,, >< / BuEton>
android : layout_height-= matchJ:arent
',
,, I r,i.r"..iryori,
android : gravigy= " 7e f t " / LinearLayout>
android:hint=',Ket:k Jawaban Anda Disini', , ScroIIView>
andro j d : layout-gravi ty= " f e f t " > < / Ed.i tText >
<BuLt,on
android : id= " 0+id t ki ri m"
androld : iayoui*widuh: dma [chJarefl b,, H. showdetailtugasupdate.xml
android: layout_height= " 51px',
android : EexiL= " KIRIM,, I,iIe ini berfungsi untuk menangani tugas-tugas yang akan di-update pada
android : fayout-grav ity= ',1rY, " nrasing-masing course. Berikut code dari showdetailtugas.xml.
<?xml version= "1 - 0" encoding="utl-8"?> l{rrLton
<Scrol Lview. ]oiilns : andr:oid. ,h.t.Ep;.1../ s.chemas . andraid, com/apk/res,/ android" ,. .: '*..-,rl-.:-. ;--l--
irndrqid:,id.llg*id./iiijml&rdater" r'

android :.backgrorad-': # f f f f f, t " , . android : layout--uidth-,'m? f,ch-"paren c "

android : layout_width= " f i 7 TJtarent,,
android : layout*height= "fil fja rent "> iandroid: iext= 'Kl&rff UPDATE ,JaWABAIV,1 . '

<LinearLayout android : Iayou E-gravitY= " 7 in6r "

.'an'droidrorien.L.ation="yerticaJ,. .. /Button>
android : layout-widt.h= " f i f 7J)arent "
android i layout_height= lfj I J. par:ent,,> . ,:;crollView>
<AbsoluteLayout
android. : layout_height= "wrap_content "
android: layout*width; rf fj] JJa.r.en L,,>
l.
.

<Button upload.xml
android. : tayout-heighE =' 5 lpx "
android: layout*widLh= "ma?chJ:,arenU 1 r' . I,'ilc ini berfungsi untuk menangani proses uploadfile yang berupa dokumen.
alldfoid : id* "6* i d / updat€up-l. oad,' llt'rikut code darifile upload.xml
android : texL= "TJPDATE FILE"
android: Iayout*x= ,,3dip',. .
. ,'xml version=.,1f '.d" encodingE"utf--81.?> '.r... . ' ,." . ,. ,' .. l
android : layOut;r. "16iO "r< lButton> - t, i nearr.ayeut-,.
.,.. , .'
. i , ,., ..,
xrrr lns: aad*oidl*':hECp.:./,/scliemas,. and,z:bid.. aan/apk/rea/andraid
. <Linearlayout
'
r.. .. r"i
and.roid : orientat ion= " vert i ca7'
android : orientation = " hor i zantal " android : background= " # t t t t t f "
;;;;l;, i.vorr.*ria.h= t'fil-lJarert,, '
i"y;i;r'width=:" fi l]--paient I ' i r l' i-'
android : layout-height= "filfl:a rent " > ""Oi.idtr
android:layout:height*"fj-I.1--rraiena' '
<TextView
android : i d= " + id/ Judu LTugas,,
@ 'l r:xtView
android : layout-margintop='5p5 " android: id{'6;jd/jn fo" ffi
1,r

android; layout*width= "fjf l.J:arent " ,

. . android.i LexL= "I}lI,o"
andro id : l"iiyout*he i ght='rwrap_co{l c6& f r ,. android: textcolor=' #0 A 0A A 0';
i android: f eyout-weighLq ,,1 ,, android: layout-width= " f if TJarent "
.android: text$ize= "20px" '' ..andioid.: IayouL-ha i ghtq "wr&p-con ten t "
.
tffi$s
android : textstyle= bo fd "
"

android : Lextcolor= " #000000 " '"*li:

***r* ii::+t,.;
>< /'r'excv 1ew>
< /Linearlayout> i l'li i z:;: :;,'
<LinearLayout
android: orientation = "horizonEaT "
,, .',,.'
. I,,ctitText
. .

android : layout-width=' f i 7 7J.,arent', , r r rdroid':. id=' @ + ld/ a .]afiat "

androi d : layaut*hei ght=,' fj f f-::aren t n>
ndroid I ldYout3idtli* "fia tqJu)aren t "'
'r
<'l'exf,vaew , r rrdroid i l.ayout*helght= tr&,rap-conten t'
android : id= " @+ id / i s iTugas,, ,rrrdroid: text= "'
android: layouL-marginTop= "5px " ,rrrdroid,: layoui=Xe.'2Odip" p. ...-. ''., . .

.android: layout_widLh= ,'fl-1J;pi:renE r ,' . r'

,r rdroi'd i lalroul;ryrli0Odjp'><
r l fditText,
androidr:layout:_heigh.tt',r/ral?:conte11& r, .. r. . .r .
'Itutton
. ' I. andrQid:1ay0ut*$reigh!: "1" .., . rr rdroid : layout-heiglrt=' 5 Opx "
....andrqidlgravit).i.Ifefe,.-] rr .,.,,11,.r,11
'rrrdroid,:ira)rotit:$iidthr'f20px'.:.,
android : textcof or=' #000 000 " .,rrdroidl..teXt$EyIe= "bdldt ' i:i 'r rr' : ' :r"ii:r
><,/TextView> , rr rdroid : Ley'i-= " TJPLOAD "
< /LinearLayout> ,, r rdroid.'i't:id;,,1t€+idlupioading'1><7gsgi'drtj' ri

l. i stview
android : layout-marginTop=' 2 Tpx' ' randiOrid, i d*'r,: &avldro i d : i"d/ L l atl ",',,:
android : id- " 6:+ id / j awaban ( : andiqid:1a11ouc*width= " fjl]'J2arctnt "
. android I laydut*widlh= 'fif f:.pareri.[ , andr.qid : 1.dlraut:h€tght='&rrap*dort[.d;id't . ..
android : layout_height= "ma tchl, arent u
"..
lr,.r.,
l>.,. . . r,.tlfltiliriili.ir'',' ):
android: gravity= "1sl'g " ''l'extView
android:hint= "Ketik Jawaban Anda oisini,, android : id=' Gandro i d : i d,/ empty'
android : l.qyouf*gravi ty* " f ef e ">< / Edi t1texe> anatoid,ilayo(t-vriatn=' fj ll"-pqj:erril
 ant en t
android : IayouL-heighx'- " wrap-c ont en t "
androi d : layout-hei gint= " wl: ap*c "
android : j d= " r?+ i dt detaif spubdaLe " / >
android: LexLCoIor= " #00A000 " ./LinearlayouE>
android: texL= "No Data"
/>
< /Linearl-aYout>
L. about.xml
. ?Kn1 version= "1,0" encoding- ^utf-8"?>
J. row.xml
.r
Absol utelJayout
ndroid : Ld,-:' @+ id / Absof uteLayou t 0 l "
File row.xml berfungsi sebagai Ttle pembantu untuk tampilan dari .;J;;t;, i;yout-width= " ri ttiarent "
rndro j d: layout-heighL= " fiJ13arent "
upload.xml. berikut code daifile row.xml.
.

xmf ns : anaro ia=tr1 r tp : / / s chena s . andro i d.. c om / apk / r e s/ andro i d "

rndroid : background= "#f f f f f f ">
<?>m1 version= "-1' 0" encoding = "utf -8 "?> .

<TextView TexLView
, ;"rout-width= " wrap-cont en.- "
;;;;i;'
- xmlns:android= "htttrs: /,/schemas'androjd'can/apk/res/android" , layout-height' " wrap*c ontent "
Lndrold :

android : Ld.= " + id / rowtext "

@
,,ndroid : textStYIe= "bol d "
android: layout-width= "fjlf--.parene " , ndroi d : texEColor= " # 0 0 00 0 0 "

android : layout-height= " wrap-coiltefle " ,rndroid. : gravi tY= "-1eft "
android : gravitY= "center-vettical " ,rndroid: i.yort-*= "1Tdip" android: layouL-y= "115dip"
android: textSLYle= " itaLic" rndroid : Ld.=' C+ id / abou t 7 s i
android: textcolor=' #0 0 0 0 0A "' ,rndroid: Lextr* "I,lV.f ABOUT OPTIONAL : ) "><l'lextView>
android: Lextsize= " 23sP" / > .'lextview android : layout-width = " wr ap-content "
,rndroid : texts ize= " 2 0 px " android : gravi ty= " center'
ANdTOJ-d:IEXt;_, SELA}IAT DATANG DI MOBILE T'EAfiNING'
-'-""a'"
:ffi :i ; =i' ;; ;;-"-""c
;' i ;;;;.:#, t i d : id= " G + i d/ abo ut r udut "
""
android: texfStYl e= ""
" boLd"
K. detailberita.xml .indroid : LextColor= " # 0 A 0 0 0 0 "
android: layout-x= " \dip" androidI layoutj= Idip""''extView>
File ini berfungsi untuk menangani tampilan berita atau notifikasi terkait
" 2
/ Absol utelayou L >
course yang ada. Berikut co de dari detailberita'xml'
<?:<rnl version= "-l . 0 " encodrnq= "utf '8"?>
<LinearLayout
Hffi, ffi;;li-'n"ry t t schemas. android' com/apk/res/android" M. Linktext.xml
android : orienfation= " vert icaT llerfungsi menangani tampilan untuk link downloadfile dari seruer. Berikut
android : l ayout-w-Ldth= " f i f I Jar ent "
c o de dari file linktext.xml.
android : Iayout-hei g]nt= " f i 7 f J)az ent "
ADSofu t elayout
<'I',exLVteW : id= id,tAbsoJ uteLayou t 0 1 "
f i I 7J>ar ent: "
,ndroi d " @+
android layout-width=
: "
, rndroid: layouL.widt]n= " fi7TJtarent "
android : Iayout-he i g:rlL= "wrap*conten E"
., ndroid: Iayout-height= " t iTfJtarent "
android tLexL=" " /> rdroid; background=' # t f f f f f "
<TextView
- '
;<mlns : andro i6'= "http: / /schemas. android. com/apk/res /android">
a.rAtoia, layout-width= " f j flJtarent " .'rextview andro id : 1 ayou!*width= " wr ap*c ont ent "
android : layout-heig]nL= "wrap-conEent "
,rrdroi d: textsi ze= " 2j?x"
androjd : id= " @+id/detailstiLfe" / > .rndroi d : gravity= " center "
<TextView . rrdroid: textcol-or= " #00000A'
android : layout-widLh= " f i 1 LJ>arent " nJroia, LextStY[e= " bo7d"
andro id : layout-he i ginL- " wr ap-c ant en t "
, r nrlroid : ::d= " G+id/.Text " android: layout-height= "wrap*content "
android: id= r e+idldetaiJsd.escription' />
rndroid.:text=,,Sijahkan KJik Link di Bawah Ini llnLuk Mengunduh Fi1e"
<TextView " 6dip" andro i d: Javout3='
gdip"></Textview>
android: Jayout-width= " fill .J)atent" ';;;;t;' lryora-*= id layout-wi wr ap_c en t"
.. 'rextvi ew andro r dt.1:1= " on E
android : layout*height'= " wrap-cantent' ,rrdroid : Ld- " G + i d / Tex t L ink " android : layout*he j"g]nL* " wr ap-c ontent "
android: autoL i nk= "h/eb " rndroid: Eext- "t i " android: layour-x= "6dip"
android: id= " @+id/detail sfink" />
ndroid: fayout-y.- " J 3 3dip" >< /'textview>
<TextView < /A]lso Lut elayout >
android : Iayout-wid Ll-L= " t i J 7J)a rent "

i

Penanganan Aksi
Setelah selesai membuat tampilan untuk sistem atau aplikasi yang akan
dibuat, masuk kepada tahap berikutnya, yaitu memberi aksi. Sehingga
aplikasi bisa berjalan sesuai yang diharapakan.
http://ro.o.z.z/mobile, yang berarti di sana termasuk domain seruer
berserta path connection .fi\" yang dari PHP, kemudian ada
koneksif)ownloadjava hanya berisi domoin dari seruer dan ini hanya
cligunakan untuk class dotpnload.
- -tugasHttpClient j ava

Paket Konfigurasi
paket konfigurasi sangat penting untuk dibuat, hal ini dimaksudkan untuk
memudahkan kita ketika ada perubajan dari rrl seruer. Aarena aplikasi ini
berjalan dengan metode client seruer, sehingga paket konfigurasi ini dirasa
akan lebih membantu dalam hal menjalankan aplikasi. Buatlah sebuah
package dengan nama mobile.config.

Dalam paket konfigurasi yang akan dibuat terdapat 3 closs, yakni c/oss
koneksi java, koneksiDownloadjava dan tugasHttpClientjava. Berikut code
dari class-c/oss-nya.

--koneksijava
tr,ackage mobi 1e . conf ig ,'

Dublicclaes koneksi {

Strinq'urLi.{pbi'1eljearning=' I'http| / I 1O'.0.2.2 / " ;

Dubltc koneksi(String urlml) {
. urll{obi.lel,earning = url}Iobilel.earning+ur1m1l
I
public String getur] ( ) {
return urlMobi l-elearning,.

--koneksiDownload j ava
Dackage mobile. conf ig;
publicclasa koneksiDownload {
SEring urlMobilelearning= "http: / / 10.0.2.2/ " ;
public koneksiDownload ( String urIml ) {
urlMobilelearning = urfMobilelearning+urlml;
grbli.c SLring geturl O {
return urlMobil-elearning ;

Closs koneksi java dan koneksiDownload java berfungsi sebagai Ttle koneksi
semua closs ke selTer. Pada class koneksijava terdapat url StringBuffer sb = new StringBuffer("");
 I
String ljne = "";
String NL = SysLem.gerproperLy(',line.separator,' )
I'ir(la paket ini buat 3 closs, RSSFeedjava, RSSHandlerjava, RSSItem java.
whife ((Line = in.readl-LneO) t= nullt { Ittlikut code dari ketiga c/ass tersebut.
sb. append (f -ine + NL) ;
]
--RSSFeedjava
in.close();
String resuIL -- sb.toslringO; package mobil-e. ke1as. rss ;
return resu I t;
tinal 1y { lrrport java.utit. List;
if (in != null) { lmDorts'iava .util .Vector;
trY {
in.close(); gublicclass RSSFeed i
.] catch (IOExcepLion e) { privete Slring Litfe = nulI;
e.printStackTrace ( ) privatse String description = nuI1;
)
,.
private String ijnk - nu11;
)
privat.e String pubDale = nuII;
private SLring category = nu11;
prLva.te List<RSSltem> iLemlisL;

public static String executeHttp6et(Strinq url) throws Exception ( RssFeed( ) {

BufferedReader in = nul I ; i temLi st = new Vector<RSSItem> (0 )

trv { 1

HLLpCli ent c-Iient = getHttpcfient ( ) ;

HtLpGet request = new HttpGet O ; voLd addlLem(RSSItem item) t
requesL. setURI (new URI (url) ) ; iteml,jst.add(item);
HttpResponse response : ctient.execute(request) ;
in = new BufferedReade-r (new
InputstreamReader ( response . getEnt i Ly ( ) . getcontent ( ) ) ) ; public RSSItem getltem(:tot location) {
return iLeml,ist. get (l ocation) ;
StringBuf fer sb = neii/ StringBufferl',',;; ]
String line = "";
String NL = Syst.em.getProperty(,'line.separator" )
grblic List<RSSItem> get-List ( ) (
;
while {(fj.ne = in.readlineO) l= nulf) { return itemlisL;
sb.append(1ine + NL); )
)
in.cl-ose(); voLd setTitle (Stringr value)

String resuit = sb. toString ( ) ; titfe = val-ue;

return resulL; )
) finally { void setDescription(String vafue)
if (in != nulf) { {
try { descript.ion = vafue;
in. close O ,.
]
) catch (IOExcepLion e) { void setlink(String vafue)
e.printstackTrace( ) ; ] ) ) ]] t
link = value;
l

void setPubdate (String value)

{
Paket mobile.kelas.rss pubDate = value;
)
Sesuai pada bahasan sebelumnya, sebagian besar dari aplikasi yang akan void setCaiegory(Stringr value)
{
kita buat ini akan menggunakan parsing xml seperti rss. Maka kita perlu category = vafue;
membuat sebuha paket yang berisi penanganan aksi-aksi parsing xml. l

Untuk itu, buatlah sebuahpackage dengan nama mobile.kelas.rss. kemudian public String getTitle( )

si
i
 return title;
)
pulrlic String getDescription @Override
( )
pubJ.icwoid endDocument ( ) throws SAxException {
{ / / TOD0 AuLo-generated method st.ub
leturn description;
I
public String getLink ( )
@C)\/err r cie
{
retura fink,. lruIrLicvotd sLarlEfement (String uri, Str-Lng localName, String qNafte,
Attributes attribuLes) throws SAXException {
] / / IODO Auto-generated method stub
pubtris String getPubdate ( )

{ if (focalName.equalslgnorecase( "item") ){
return pubDate; it.emFound = t,rue;
)
String getCatego-ry ( ) item = Ireiv RSSItemO;
currentsEaLe = staLe-unknown;
{
return category; elBeif (focalName.equalslgnorecase( "ciLIe" )){
] currentstate = state_LiLfe;
)
€lself "description"
(l-ocalName. equalsrgnorecase_( )){
currentstate * state_description;
--RssHandlerjava ]
eleeif, (1oca1Name. egualslgnoreCase ( " link" ) ) {
package mobiLe. ke1as. rss ;
currentstate = state ]ink;
)
irnport org.;onl . sax. Attributes,. algaif (tocalName.equalslgnorecase('pubDate" )){
inport org - xm] . sax. SAXException,. currentst-ate = stateJubdale;
import org.:m1. sax,helpers. DefaultHandJer,. )
elseif (localName. equafslgnorecase ( "cateqory" )){
Dublicclass RssHandLer a,rtends DefaultHandler {
current.State = state*cateqory;
j
final-i.nt state*unknown = 0; olso {
finalint state_t.itle = 1; currentstat e = sEate-unknown;
finalint st.aEe_description = 9; ]
finalint state_link = 3,.
fLnalint. sLat.eJubdate = 4; ]
f,inalint state-category = 5-
int currentstate = staLe_unknown; @Overri de
frubticrrotdl endEl-ement (String uri, SLring localName, string qName)
RSSFeed feed, tlrrowE SAxExceplion {
RSSIt.em item; / / g,oDO Auto-generated method sLub
if (localName.equalslgnorecase ("item" )){
boolean itemFound = falEe; feed.addTtem(item);
)

public RssHandfer O {
]
)
@override
publie RSSFeed getFeedO {
publicvoid characEers(char[.] ch, int start, int length)
return feed.,. throws SAxException t
/ / aODo AuLo-generated meLhod stub
i
string sErcharacLers = nerr strinq:{ch,start, length) ;
3:;ii:isi" srarlDocumenr ( ) rhross sAxExceprion
if (itemFound==true) {
/ / BODA Auto-generated method stub
feed = new RSSFeedO; // "item" Lag found, it's item's parameter
item = new RSSItemO; switch ( currentstat.e ) {
case state_LiLfe:
item, setTitle ( sErcharacters ) ;
 '. tm.Jr;
deso :!,lien: r,e{d 66. r: LIe(SL.i.q vclle)
rrd, sEtDesciiption (.ti*da.rer5)j I
': bE.,!i :r!e . valuei
'::: tae.s6tl,inkirElcracLe<s); 6lit selLiaicriptimrsEtlhlr laruer
- .::,r "' : . . br-tr j :. (
:. :: d.ililaEe,pLbdaLe: . .' deEcrjprior = value:
br.Atr : . 6erlllxisrrils va_E)
. :i. 'it at ll,dC6-catevory: -a?t
I
itq.re.CateqorwlsLlchalactels); llnt r v.llej
. :' br..b, , l
' ,rl,ii:i' .f:i di!.ulti 'i: ' :: r,ii! Eaal.BeiPubdat6{s!.rias va1*e)
i:t::. :::,:,,
" I
brer;:,: .. ,:ll { , . ,
pubDace - value:
)
.rt"i Ellt serca-eqory (sErlnq v.lu.)
/, noi "tEa" tas rdrd, "L,. F.pd,s pa.arerct t
:' ErlrcL,curre.rs-ccr I c
cu! stsdEe ti tl6: I
' feed.seLiiL-€(strch.racters) ;
. bE.!r: t tbXl,o str'bg g6E_iE.e{,
. d... sLac6-oGscripE'or: I
. reed.aetDescrtptton(st{nalactclcl i Etuh EiE-e:
. b!.al; I
. .: .i:'art..6tate_1iqk: .:. Ilrbllc' srrj,hs geEDeicriprion (I
ted.s;Er,ink (etlchaf,acr.ers) j |
. brGlE, !.rqn des.riprj orj
stsate pxldafe: I
feed.6alPubderersrfchalacr.lsrj rEbXlc ScriDg geELiMr,
bc..lri t
' car. stst€-category. zarurd linkj
leed..etcaEeqory rs! rcnd rqcLer s i :
h!..,rr ,uutc SL I tnq qoloubdare()
a|f.ult:
br..l: E.tua plbDace;
l)
,i ,,, strins setcaEesory( )
,
curtentgtaEe r state_uknom,
?*u,c
Erura categoryt
t' . l
OOve!ride
Dubtlc iL!inq
-,; tost!:E ( ) {
-i'ii"5';-,;.;;erar
--RRSltemjava '
--' ed 6e,hod srur.
rcbtl.e.*r.s.rssr
D.cr.!rr :: !! (Lr;r;.rasrhr) , too)
tu$ltccl... Rssl(e .l :1, iit - cirta,tustrinsto! .roo) .+ , .. ..,
Fl*."s-.],a'.,..1"..u1x,,:,,..,L."'o.i".",
il;;;.;;{;;'rfi;, '-:' '
srn rq:d;.cr:pr,.!d r ltrir:
t|!rnE.
:, ,: I :

Drl,ar. suiri, = *1ll puttDrte '..:.... .1. lDbtio srrins rosrrinst.(r

Drr6r. sr t liiid: ii&;?ory ,= eUj.,,. .:. :.i re
{
ra_-.=.-ip.io-n..".q8^r, , roor
RsslleE{r ( rruE o6sclipLion,sqbsrrile{0, roo);

Jllst
 ]
retum description 1oqin, setonclj.ckI,istener (n6w OnClicklistener ( ) {

publicwoid onClick(View v) {

/ / BADO Auto-generaLed method stub

String Re;
SLring musername = usernarne.geEText ( ) . tostring( )

Paket com.mobile.learning SEring mPassword = password.getText O . toStrinqo

Re=trylogin (musername, mPassword)
Paket ini berfungsi untuk menangani aksi login dan navigasi halaman
utama. Dalam paket ini terdapat dua clcss, yaitu c/ass halamanUtamajava Log.d( "Check". "Here" );
Log.d('Re".Re);
dan class loginjava. Berikut code dari c/ass yang ada: String temp. check=Re. trim( ) ;
lft:emp check.equals("1 ") )
--loginjava String
{
nama 3 username. get.Text ( ) .tostringi ( ) ;
package
fnteni newlntent = new Intent(login,thls,
com. mobile. learning ; lr,r Lamanutama. class ) ;
String txtnama = Strins.rzafueOf(nama) ;
iarport mobile. config, * ; /,/membuat. Bundf e
la[prt java. io. Buf f eredReader ; Bundle bundle = new BundleO;
irqport java. io. IOException;
irnport j ava. io. InputstreamReader ;
//me4e4!u!e4 parameLer Bundle (id,isl) -*>
irrport j ava. io. OutputstreamWriter ; i r:t=n3*-6-tr, t aada I ahvariabef dari LxLnama
imports jr'iiVeiriryt rll;i f t$ilnaC onrt e c t i o-n ;
t
=
bundl,e,putsLring ( "nama", LxLnama) ;
iryort java.net.URL;
import /imqg@Chkgxr bundle pada intent
android. app. Activit.y; newTnLenL. puLExtras ( bundle) ;
import android. app. AlertDiaf og ; sLa-r tActivitylorResu It (newlntent, 0) ;
inport android. app. ProgressD-Lalog ;
// notif. setText ( 'SUKSES' ) ;
iqrcrt android. content. fntent; 1
!
inport and.roid. os. Bund1e,. oLse
inqrort android. uLil . Log; t
iryort android.view.View; createDialog ( "Maaf" , "Username Atau Password Salah ! " ) ;
irqrort andro ici. vi ew. View. OnC I ickli s t ener ;
import android. widget . Button,. )
import android. widget. EditText ; j
inrlrort android. widget . Toast ; ));
publicclasa. login errtondls Activity { J
protected, SL-rinq Lrylogin(String musername, String mPassword)
public koneksi linkurf;
String SERVER-URL; Log.d{ " Trylogincheck ", "Here" ) ;
private ButEon login; I I r tpt RLConnect j on connect ion;
privato EditText. username, password; OutputStreamwriLer request = nuI1;
public ProgressDj.alog progressDialog;
UEL urL = null;
Strjng response = nult;
/*" Called when the activiLy is first creaLed. *,/
String temP=1s11'
@Override SLring parameLers =
puUficvoia-onC."rt.. (Bundle savedlnsLancesLate) t " username= r'+musername+ '' &password= r'+mPassword;
auper. oncreat.e ( savedfnstancestate) ;
seLcontentv-Lew(R. layout . signin) ; ''lsLem.out-.print1n("UserNdme"*mUserndme+"\n"+"password"{mPassword)
Log. d( " Parameters ", parameters) ;
Iogin = {Button) findViewEyld(R.id. login); cry
username = (Edj.tText) f indViewByld(R. j,d. uaame) ; i
password = (Edi LTexL) findviewByjd(R.-id .passwd)
.' L.int@r] 6ffkonebi{.,Ioqir.php.); t.u.tnobi-te,dom.oad.*j
smlrEq-Jp&,E't t.I;t.qetu!tt) r. toorr nobite.Ldia;.,;
!.u,1 = ed
uR!, srRrER UxL)r r@rr rcb.te.nit i..;
' comecEion , ,itEl*iidiHEi'iil*inifEd, ur- .ope;tuectr oni, r rport nobire.atdut..;
1 comac! I oa. setrloo! rput irrE I j
, :conrecLlo.n.66cReque;.propet(y(,conra--T.ype,,
'. -'--. ": teo* ar&o,id. ip!. Aca lvj ri:
,appricAt iui,i* ;w-.oh ."r-L..Joaea, r i .:
i;;;;t;i;.;;;i;;.r"r:*,' , " . :

' 'resLet ='4*' 4o!t dd! o id vl4n' vid;

t;orr "!droid.!'i;,.vie,.o*rr"rr.sti".',
ollpJL.s-leat{r:Br(c@ecrio4,se-ourrursr,ed(r,; i"i",i ".J.ra.'iia."-.*,'".,
requegl . ffiiie rparareteE, : lrylr ddroid, krdoer. -*rvis;
requeaL.ljusht );
. ! req!66t,close0 lurrttccLr. .hala]@ui.fr .st-dr a<L:viEy (
.. r. StrtEs 1ine.,;:.,', . 1tc@ld 4ocreat.lri1riarle sanedtrrr6ra.esEaEe) t ,
hPutqtreaftheader isr : nri:: t. oncleare I savedlnstmcesta6 ) i
InoJ-sl le.hpeade! {couet ion,qeE -nplt6L I emr r, j secconLenrvtew{R.t.trur. rrco6e) j
: '.:..i:.]Buffer9diiEade'ieaa6r=n.iBufiA!e.tReader(i6I):
:: : ",. 's*iig liJeir ir---; s;;i";;;ii;;i;;-* '"-:,il s"et." r *,.".* lBuEEe) .,rindvi;rByrd (*. i.d.:&orrsr r
!nt1.lIu::E.read€!.teadr,i49o):.jl.rurr,t''a"ii."rtooar"c=iaart"ni'Favtqn*rd(R-id'iD0oe,oi)i.]''
:i:... ,' .tr
' { ' ,, ,:;,, = {B;roE) i!.dvi6-tiByrd id.Ib?rias) i
. ". Eutron i}rrlqaB (B.
id, jtd/j]aj ) ; '
,'
:: Bitr.n 1rliiilat , (B1llrdiii rindvierBvrd 1n.
. rb.appscr.Iine r .\n,r, aa; i,B;;i"" j ! rEu-Lon, tiodvre;,yrd{R.io..ibser.;ta),
'] ttc; ilr.cboui (BurEon) ftndviewBylat (R. Id. i!. &ou tl i
tmp-5b. rost ring (,. Brdre bundle rDtr.q6thr6lLr).serfxiras()i
:: rdo. di,iiitrp" . r6rrri)) ;
f'@ sewd atte, login pro<esE kitt be . /4enqanbll pareete, I jglukode - lEa
.tor6d ls lespdse vd, ie-ble. rr l slr:nq;a-d1 = burdle,se-ir-r'r9{,n#;r:
' lesponse - sb.rosrlins{); a (TFyrvtew)litrdv:euByldrR.ld.rerTef,Li:
I-oq.di're6ponse'. r.6porser, -elrvifi tv toalo1rr = (Tqlvltui firdvi&By-tdrR,Id.7o9OL )i
. Los, d{,,sb vat Jo., sb. -osr. ins l } r j
' is!.clo.eo ti. sertcxt { , selarEt Datans -i +pard1} '- di M-Learni!s'),
rsoe!,cloee(, r
') rv,logoui . sotdilickris !en6! 16.r olcl icklisEene. ( ) {
c.t.i(rolxcaption e)
{ Dllllmtat onclick(view v) {
.. . . roaEt.na*e"er.c(!!tr,e.rosrrinero,o).6hok1), , // roE) auto-gdnerared nelbod stub
'. l' Intenl logout = ffi ltteElltElmanutaa ttl.,
/, r-og.a r "R6sponse,, re€phser j ,...cU.5,;
!.rua !espo.56; sLcrr_A.rivrLy(_oqou-j:
) l
tllat.@itt cr-areDtalogrsr -ias LiE. e. s.,ins rexr, I I, :
A16riDie1oq;d:'.E.*A1ertDia1oo.Euiide'(!ht.)'ibcorE€.stQDcltckI,jsten6r(Eonc1ickListene!i)t
..6etPosir'cBLLLon(,o\., rurl)
,aetTille{ :11.r DuD1a.6id onclic},vi6v v) {
. eetMessaqe tex!) (
/ /:4o@ Auio-se.erat€6 rcthad stub
, .cleatelt, , '. . si!{ns lrEMus;r = payalr1r
'': ;':' l. ,.,,,,
"' ad;Bh&{), !t6r nsrErir'ir = r;e* rot*t 0,a:ra,riat utara. ttt., cdrrse.cl.,);

) //hedbuat Buno re

--halamanUtamajava ';m-,";""ffi1;,i*,*r;"'' , .ili" :.

D.cxlct cm.nobi r e.lealniDs, "-iq=9c!!!}4#i****ql{!P;=*r,.:' .

l{Elt nob: Ie.cous6. .:

trydr nobile.belitarir .:r:: ,i ,:. //nQDa'bahkan budle Ps:le lntent 'l'l:l:":: i

rr* i
 newlncent. putExt.ras (bundle) ; / /ryqmblraL B\rndf e
starLAccivityForHesu'l b (newTntent, 0) ; Bundfe bundle = new Bundle();
1

)); //menentukan parameter Bundle (id, isi) -->

i ri abef dari Lx Lnama
cl=namadani s i nya a da I a hva
bundle.purstring ( "namauser", txtnama) ;
ibDonlot.. set.Onclicktistener(new OnClickI,istener ( ) t
//$enambahkin bundle pada i.ntent
publicvoidl onClick{View v) { newlntent. putExtras (bundl"e ) ;
sL ub startActiviLyForResuft(newlntenr, 0) ;
I l,H;",*::;::":';:::-tre'Lhod
Intent newlnteni = near fnLent'ttraiarnanUtama.this, ]);
down I oad . class );
String txtnama = String.ya-Zueof(namauser) ; ibBerita. setonClickl,istener (new onclicklistener ( ) {

//membuat Bundle publicvoid oncfick(view v) {

Bundl-e bund]e = new Bundle0; ,11 EODO Auto-generated method stub
Intent intentBerita = new
1/qenentukan parameter Bundle (id,isi) --> Lntent (haLamanUtama.this, beriLa. clasE) ;
id=namadani s i nyaqda lahvariabeldari txtnama . startActivity(intentBerita);
txL.nama) ; ]
]);
//menambahkan bundle pada intent
newlntent. puLExtras (bundle) ; ibAbouL. setoncficklistener (new OnCl j ckl,i stener O {
startActivityForResult (newlntenE, 0) ;
) publicvoid onClick(View v) {
1\. / / \ODO AuLo-generated method stub
lntent intentAbout = new
ibTugas.setOnClick],istener (new OnClicklistener ( ) I nLent (hal-amanutama.this, about.clase) ;
{
startAcLivi ty ( lnt.entAbout ) ;
publLcvoid j:c]i"k(view
v) .{
/ TODO AuEo-generated
/ -
method stub
String namauser = paraml,
fntent newlntent * n6w InLent (hafamanutama.this,
pilihTugas.class);
Shring Lxtnama = String. vaJueOf(namauser) ;
/1ggrolge! Bundle
Sundle Fundl-e = new Bundle ( );
Paket mobile.course
,/,/menenLukan parameLer Bundle ( i d, isi ) -. > I'aket ini berfungsi sebagai paket untuk menangani aksi course dari clienf ke
i d=namadan i i.vr sert)er. Untuk itu, kita perlu membuat sebuah paket. Klik new pada path
"qelelyqf l"ne_!4el+f!1gae
g
bundle.putsLring( "namauser,,, txLnama) ;
/src ) new ) package. Di dalam paket course ada 3 c/oss yaitu,
//menanb.jlhkan bundle pada intent (:oursejava, courseDetailjava, courseDetailJsjava. Berikut code dari class
newlnt.ent. putExtras (bundle ) ; yang ada:
st.artActivityForResult (newlntent, 0) ;
)
i);
--course java
ibNilai .seLOnCIickListener(new OnCl ickl,isL.enez () { package mobile. course;
pubLicvoid onCli.ck(View w) { inport mobi 'l e. conf ig - koneks i ;
/ I YODO Auto-generat.ed method stub iryrort mobil-e. kelas. rss . * ;
String namauser = paraml; irnport java. io. IOExceptj on;
lrLEenL newLnlent = new lntenl(halamanUcama.this, nilai .clasE);
String txtnama = String.r,,a-ZueOf(namauser) ; import j ava. net . Mal f ormedUR LExcept.ion ;
inlrort java.net.URL;
inport javax.;cnl .parsers - Parserconf igurationExcept'i on ;
 m

t*'*==""ed! =null)
l'
Textview feedTitle =
( r ex tvi ew ) r i ndvi ewBvr t
[i1r*"it"::t3s c r iut i on =
.i
tI
( TexLView) f indviewByTd R. id. f eedde scr i bt i on \
( ; t
Textview feedPubdate =
iTextView) findViewByTd {R. id. feedpubdatel ; l,l
Textview feedlink = it ,l
( rextvi ew ) r i ndVi ewBvrt t*"'a1r11"i'"'J.?;.
( myRs s F eed . se tr i r 1 e ( ) ) ; 'i

I
f eedDescrib"'";!Elliil:iti::l;::;?*i::;::3illll,lli,,",,,, I
t
feedlink. seLText (myRssreed. getiinX () ) ;
1
ArraYAdapte"*tiliSliu::i:::;r;
r.em> ( rrrr.e,

android . R. I ayou t . srmpJe- J jst_i Eem_f , myRssFeed. get-List () ) ;

set],istAdapter adapter ) ;
(

)
I
protect,ed,void onl,istltemCfick(ListView l, View v, Lnt posltion,
long -Ld) t

Intent intent = new IntenE.(this,courseDeta.il.clasE) ;

Bundle bundle = new BundfeO;
bundle.putstring ( "keycourse",
rnyRssFeed. getltem{position) . getTitle ( ) ) ;
bundle. putstring 1 " keyuname ",
|ryRssFeed.. get fEem(position) . getDescription ( ) ) ;
bundle.putString ( "keyldc" ,
',ryRssFeed.getIt.em(position) . getLink( ) ) ;
bundle.puLSCri ng ( " keyuserId ",
rr yRssFeed. getltem(posit.ion) . getpubdate () ) ;
intent.putExtras (bundl e) ;
startAct ivity ( intent ) ;

r'lrrss di atas berfungsi sebagai aksi untuk menampilkan courseyangdi-enrol

,rlclr user, jika class ini dijalankan akan menampilkanlist course.

catch ($alformeduRlExcepEion e) {
/ I TOD6 Auto-generated catch block
e.printStackTrace ( ) ;
catch (ParserConfigr:rationException e) (
/ / lArlo Auto-gererated catch bfock
e.printStackTrace ( ) ;
catcb (sAxException e) {
/ / IoDo AuLo-generated catch bl"ock
e . printstackTrace ( ) ;
catch (loException e) t
--courseDetailjava
;"':"-:',""..:;" ;oneksi ;
lnrport mobi1e. kefas. rss. * i
lmDort java . io. loException;
lnDort iava. neL .Maf formeduRlExcept-Lon;
t rrDort j,)v.l . ncr .llRL;

/ / TODo Auto-generated catch ]:lor:k lnport jirv.rx. xml .l)arsers. Parserconf rigurationException;
e.printSt,rck'I'race ( ) ; lnfgort j.lv(lx. xtnl . I)arslors. SAXPrrr'$;{tr';

if
]
tf (myRssFeed ! :null )
t
il{,ort org, apache. htslp. HttpResponEe;
lrylort . org . apache, hltp - Namevaluepair ;
iryort org . apache . hltp . cl, ient . Cl ientProtocolExcept i on ;
i.rurort orE. apache. hLLp. clienL, Htstpclient;
lryrqrt org . apache . http . cl ient, enti ty. url SncodedFormEnui tv,
LnDort orE. apache. http. cl ient . melhods . HttpPosi i
iryort org. apache. hllp. impl . client . Def auf tlit,tpCLient.;
lrpqrt org. json. JSONArrayi
irE ort org. jsol1. JsoNExcepEion;
l.&rcrt org., j son.,JS0Nobj ect,,
lryort com.mobile; learni&g. R,
L$prt androld. app. ActiYity;
llElort .android. os, Bundle; :

irFort android; util..log;

iqrort aridroid.widget . T€xtYieli';
Lryprt android. widget . Toast t
publLcclare ioursepetailJs 6ntelrds AcLivity {
ru,bltq koneksi.,liakurl ;
TextView juduf, isi;
StTing SERVER*URL ;
0Override
putsllevold oncreate { Bundie savedrnsiancestate ) {
,
gulrcr. onCreate ( sa1redf $stancestate) ;
' Betcontentview{R.layout. shoi4/d€Eaif dourse} i . '

' ist * (fextView) findviewByld(R.id. jsj) . ::

Bundle bundle : thle;'gretlntenLO ,getExtras O i

String paramL = buiidle.Setstringf (.ukeyCourseld" ) ;
SLring paramz * bundle.geLstring ( "keyResourceld" ) ;
String pdra{I3 : bundle.getstring("keyuserrd" ) ;

linkurl =
adpkoneksi { '/coursaDetailTopikJson- php?idc= " +paraml+.}&idri " +para&2+ " &u
n='+param3);.i..isERVER:uRL*1inkur]..geLUr1();

Httpclient ht.tpclieat = n€ft DefaultHtEpclient() ;

HttpPost httpPost = neet HEEpPost (SERVER-URL) ;
/ /Parameter
ArrayLisl<NameValuePair> param = nero
Arraylist<Na$gvallrePair> () .t. {.
trv {
//add Parameter
httpPosg. setEntity (nev, UrlEncodedFormEritity (param) ) ;
Ht.tpResponse httpRespose = hltpClient'execute (httpPost.) ;
HttpEntity httpEnt.ity = httpRespose.getEntity( ); Paket mobile.tugas
/read content
/
InpuE.Stream in . httpEntity. getcontent ( ) ; --pitihTugas java
BufferedReader read = new BufferedReader(ncw
Dackaga mobi I (.,. t,u(ldr.l;
InputstreamReader ( in) ) ;
St.ring conLenL Lt6ort com.trrrrlri Ir.. lr,.rrrrirr11.lt;
lmDort,rrrrlr oirl.,rp;r.All iv lI y;

*i
 I
iq>ort android. contenL. Intent ;
newlntent . puLExEras ( bundle );
iryort android,wier^r. View; startActiviEyForResuft {newIntenL, 0) ;
lrport andioi d. View. Vi6w, Orql i ckl,i s tener
iwort android. widqfet . Butlan;
;
]);

Dublicil46s pilihTugas sxtends activiLll {

/** Ca11ed when the acCivity is firSt created. *l Code di atas berfungsi sebagai aksi untuk menjalankan pilihan tugas, karena
GOverride
prblicvold oncrerte-(Bundle savedtnsianiestate) di sana terdapat dua pilihan yakni, enrry tugas danupdate tugas.
{
sufrgr. orlc:reate ( savedf nstaneestat.e ) ;
setcanlentview (R. layout . pi Jihar:cuoas)
Bundfe bundle = this.getlntentO.getExtrabO
;
i
--tugas java
final String paramL = bundie.getString(',namauser,,) ; package mobif e. tugas,'
Button entryTugas s (Button) findViewByIdtR.id. entry,fugast ; Lmport mobile. conf ig. koneksi ;
BuLtort updateTugas i. {Button) findViewByI.d (R. id. updaterugas) inDort mobile. ke1as. rss. RSSFeed,'
fuport mobi Ie. ke1as . rss . RSSHand.ler;
cnttyTrrgas ; setonc.l icklJi S llener new
( OnC ti ckli s tener ( ) { inport mobile. kelas. rss. RSSItem;
publicToiil onClick(View v) { inport java. io. foException;
inport java.net.Maf formeduRlException;
/ I $ODO Auto:generated method stub J,nport j ava. net . URL;
String usernafte * pareml; irnport j avax. xm1 . parseis . ParserconfigurationException;
Intent nehrlntent = Dery Ittent (pilihrugas.this, inport j avax . xml . parsers . SAXParser ;
tugas.claEs),' imDort javax. xrnl .parsers. SAxParserFactory,'
SLring txtnama = String.valueOf(username) ; irnport org . :cnl . sax . fnputsource ;
import org. xml . sax. SAxExcept ion;
//membuat Bundle inport orq. >an1 . sax. xMlRead.er;
Bundle bundle = naw Bundle(), inport com.mobife, Iearning. R;
inport android. app. ListActivity ;
//n$Snlukgn parameLer Bundle (id.isi) -*> inport android. content. Intent ;
id=namadani sinyaadalahvariabeldari txtnama inport android. os. Bundf e,'
bundfe . put String ( ', username ,' , txtnama ); import android. view.View,'
lnport android. widget . ArrayAdapter;
l,/mgnambahkan bundle- pe4C intent iflE ort android.widget. ListView;
newfntent , putExtras (bundle) ; inport android. widget. Textview;
startActivitsyForResult (newlntent, 0) ;
)
)); DuSlicclaas tugas extondE ListActivity {
public koneksi Linkurl;
xipdateTugas. setonclicktistener (new OnClickl,istener ( ) { String SERVER-URL;
private RSSFeed myRssFeed = au1I;
publicvoid onClick(View v) {
/ / TODO AuLo-generated meEhod slub. is first created.. *l
St.ring username = par.rml; /** CalLed whea the acti*ity
@override
Intent newlntent = Da$ fntent.(pilihfugas.thiE, publicwold oncreate(Bundle savedfnstanceState) i
tugasup. cl*ss)
supor . oncreatd ( savedlni;tancestaEe I ;
String txtnana = String. rza]ueof (username) i setconEentvj"ew{ R. layout. majnrss ) ;
, //membuat Bundle Bundle bundfe = thle.getlntent() .getExtrasO ;
Bundle bundle
=
n€vr Bundle ll ; , . .

1/menentukan parameteil Bundle. (id, isi)

String paraml = bundle.getstring('tusername"lj'
-->
ia@daritxt-nama SERVER..URI, = SERVER_URL+', ?UNAME:,' +PAIaMl ;
@name,,, Extnama)i try (
I inkrrrl .. ncw
//[eltqnba4Eqn bund]e pada intent kottlkrri ("/r'otlrs;e.l)llpi'tlll.llllrr "tl),l16ml) ;
,
i
I
I
I
I
 bundle, putstring ( " keycourse ",
myRssFeed. getlt.em(position) .geLTitfe () ) ;
. bundle.PutString{"keYUname'
myRssFeed. getrEem(posiiion) . geLoescription ( ) ) ;
bundle.putString ( "keYldc" ,

myRssFeed. getltem(positjon) . getlink ( ) ) ;

' bundle.puLstrjng ( "keyuserId",
myRssFeed. getrlem(posiliont . geEPubdate ( ) ) ;
intent . putExt ras bundle ) ; (

. startActivity(iatent) i
)]
Code di atas berfungsi sebagai aksi menampilkan course yang nantinya di
dalam course itu ada tugas.\

--tugasDetailjava

inport mobif e. conf i g. koneksi ;

j-urport mobi Ie . kelas . rss . RSSFeed;
fuoport mobi 1e. ke1as. rss. RssHandler ;
irqlrorts mobife. kelas. rss.RSSItem;
irnrrort jawa.io.l0Exceptioni I .

ort
l,flE j ava . net . Ma1 formedURlException ;
inport java.net.LIRL;
InE ort j avax. xml . parseis . Parserconf i grurat ionException ;
imDort j avax . ;on} . parsers . SAXParser;
i4port j awax. xm1 . pars ers . gAxParserFactory ;
inqlort org.xm1. sax. Inputsource;
import org. :cn1 . sax. SAxException;
import org.:<rn1. sax.xMlReader ;
inE ort com.mobile. learning. R;
iqport android. app. ListAcE.ivity;
import android. content. Intent ;
irwort android. os . Bundle;
import android. view.View;
impor! android. widqet . ArrayAdapter;
irnpbrt android. widget . ListView;
irport android.widgeE. Textview; . .......l

publicclAge Lugas sxtEnds.. ListActivity { .., ,. .

Dublic koneksl linkurl;

private RSSFeei[ ilryRssFoed a ootr, ,...,

/n* CalLed'when lhe activity is first created. 11. : ' "'

Goverrid.e
ptrbllcvoJ.d oncreate (eundle savedfnstsancestate) {
aupcr. oncreaLe (saved.InstancestaLe) ;
setcontcntVj.ew ( R. layout . majnrss) ;

fntenE intent = rrew Intent (thlr, tugasDetoi I .c1arr) ;

Bundle bundle - now Bundle ( ) ; Bundle lru.rrrllr: thla.getlnLenEO .getExtraso
$trlnu Lratentl - lrrttttllo.qetStri.ng("username")

-l
 1

SERVER*URL e SERIIER;_URL+, ?uname= u+paramL i

try {
Iinkur] = new
koneksi (" /course,php?uname= " +paraml ),.

sAXparserFae,.*,",*{ftfr:::;,*:.-:iiirm'i::l'*= '

mysAXParser' getxMlReadTs!*rr,ar"r
myRssHandrer = nes, RSSHandler ( ) ;
myXMlReader . s"iconterrtHandl er {myRSSHandl er }
Inputsource mylnputsource = aew
Input.Source ( rssUrl . openstre_am () I ;
myxMlReader. par$e (mylnputsource ) ,

. myRssFeod : myRssHandler.gettrcEdil;
.: .i.
) cnteh (MalformeduRlExceptioa.e) {
/ / TODo Auto-generated cat.ch block
e . prints Eacktrace ( ) ;

e.printstackTrace ( );
)

Lf (myRssFeed! =nu1I)
{
fextsView feedTitle =
(TextView) f indviewByld (R. id. feedE it 7e) ;
Textview feedDescribtion =
(TextView) findviewByfd {R. id. feeddescribtionl ;
Textview feedPubdate =
( Textview) findViewByld ( R. id. feedpubdate\ ;
TexEView feedlink =
(TextView) lindviewById (R. id. f, eedl i nkj ;
feedTiE.le. seEText. (myRssFeed. getTit.l-e () ) ;

f eedDescrib"'";:::;:;:iH::ffi
:i;?ff:::;:::i]!il,l*".",, li
feed],ink. s€tText lmyRs-sreea. getiink ( I ) ;
ArrayAdapter<RssItem> adapt.er = now
', Array&dapter<Rss1tem> ( thls .
aqdroid. R. layoui. si4pJe_"1jsr*j tem_-l, myRssFeed. gerlisr () ) ;
setlistAdapter ( adapter) ;
)
)
 I

DublLcclass rugasDetail,rs extendE Activity { String response = nuI1;

Publlc koneksi l inkr-:11 ; trY t
Textview judulTugas, isiTugas; l-inkurl- = nero
EditText jawaban; koneksi (" /LugasKirimTeks.php?idlgs=" +param2 r "&idu=" +param3 ) ;
StTiNg SERVER_URL ; $ERVER_URL = linkurl.geturl O,
Goverride response =
publicvoid oncreate(Bundle savedlnstancestate) tt rusasHrr.pcr j enr . execu r.r1r..rr#1:,jr:x11;#;. ptosrparamerers );
Eulrer. oncreate ( savedTnstanceState ) ;
. setcontentvlew(R.. layout. shawdetaiftugas) ; res = r6s.trim();
res = res.replaceAll ( " \\s+", " ) -
jawaban = (EditText) findviewByld(R' id' jawabanl i if(res.equals("f") ) t
j;;;1iln"* = (Textview) findviewBvrd(R' id" JuduTTusasl ; createDialog( "Selamat", "Jawaban Anda Berhasil
isirugal : (Textview) findviewByld(R'id' jsi?ugas) ; Dik-Lrim ^_^");
)e1se
Bundle bundle * thls.geElntentO .getExtrasO ; I
crealeDialog("Maaf", "Jawaban Anda Gagal Terkirim Anda '-L',e-Lat

f,ina1 String paraml = bundle'getstring("keycourse1d") t mengirim Tugas" );

f,,lna1 String param2 = bundle.getString("keyAsslgnld") i )

iiiar st.iti para*: = bundle.geLstring("kevuserrd") ;

Butlon upload = (ButLon) findvie\MByld(R'id' upload?) ;
upload. (naw onclickI,istener ( ) {
"Ltotcli.kl,istener
Puhliewoid onCfick(View v) {
// TODO Auto-generaEed method stub
' string courseld = Paraml;
String tsugasld = Param2;
String userld = Param3 i
Inuent iuPload = new
Intent ( tugasDetailJs . thLE , upload. claes ) ;
String txtcourseld =
String . valueOf ( cgurseld) ;
SLring txtTugasld =
String. valueof \LlrgtisId) ;
String txtuserld =
String. rza-lueOf (userld) i
Bundle bundl-e = new Bundle0;
bundle.putstring( "idc", txtCourseld) ;
bundle.putst.ring( "idt$s", txtTugasfd) ;
bundle.putslring ( !idu-, txtuserrd) ;
iUpload, puLExcras (bundle) ;
startActivitsy(iupload),
,
));
Butf,on bt-jar,raban = (Buttson) f indViewBytd (R: id' kirim) t
bt-jal^raban. BeeOnClicklistener (rr€w OnClicklistener ( ) {
ptrbllcvo{d. onclick(View v) t
/ / ,]ODo AuLo-generaEed method stub
ArraylJisL<NamevaluePair> postParameters = n€w
Arraylist<NamevaluePair> ( ) ; jawab"
posiParameters. adcl(ncw BasicNamevalueFnir ("
''jawaban.geETexL ( )' losLring( )));

*l
 I

T]oao Auto*generated catch block

/ I
PrintslackTrace ( ) ;
e .
--tugasDetailUpjava
] catch (PaiserConfigurationException e) { package mobile.tugas;
ca.ch b10ck
l1,l?::.*:;;::::ii:* inport mobile. confi-g. koneksi ;
) catch (SAxException e) { ilE ort mobile. kefas. rss. RSSFeed,.
/ / $ADO Auto-generaLed catch block import, mob i I e . kefas . rss . RSSHandl-er ;
e . PrintstackTrace ( ) ; inport mobile. ke1as. rss. RSSILem;
) catch (IoExcePLion e) { inrport java. io. foExcept.ion;
/ / TOI'p Auto-generat'ed catch block LnDort java.nel .MalformedURlException;
e.PrintstackTrace ( ) ; import java.net.URL;
i inport j avax . xml, parsers . Parserconf i gura t i onExcept ion ;
tryrort javax,xml.parsers. SAXFarser;
isEort javax.xml,parsers. SAxparserFactory;
if (myRssFeed! =nuII) import org . :<rn1 . sax . Inputsource ;
{ iqrort . org. )trol . sax. SAxException ;
Textview feedTitle = iqrort org. xm1 . sax. XMLReader;
import com.mobile. learning. R;
Textview feedbescribtion = inqrort android. app. ListAct ivity;
( Textvi ew I f indViewBvrd ( R. id - feeddescri'btior )r i inFort android,contene. IntenE. ;
fextview feedFubdate * iryort android. os. Bundle;
(Textview) findviewByld (R . id. feedpubdatel ; J,rport android. view. View;
Textview feedlink = inport androi d.widget . ArrayAdapter ;
(rextview) rindviewBvl" tl#.'rffj'.1J#;, inport android.widget. ListView;
(mvRssFeed. setrirle () ); import android.wi dgeL. Textview;
reedDescriut ien publicclase tugasDelailup enlends ListActivity i
t s;$ffi:iT:::iiii;?ii?il;::3: ;:$lidate (, ; ; .
getr,ink(
public koneksi linkurl;
feedlink ' setTexc (n lyRss!'eed' ));
Stringr SERVER_URI;
ArrayAdapter<RssItem> adapter = priv&te RSSFeed myRssFeed = nu11;
ArraYAdaPter<RsSItem> ( thiB'
getlist
/** Called when the activity is.first created" */
android. R. layout . sirnpl e*lj s t*i f em*J' , qryRssreed ' O); GOverride
set]-istAdapf, er { adapter) ; publicvoLd oncreate (Bundle, savedlnsbancestate) . {
super. oncreate (savedlnstancestate) ;
setcontenLview (R . layout . majrrss) ;
Bundle bundle = thle.getfntentO.qeLExtras() ;
1, View v' iat position'
.

. protoctedvoid oolisultemclick(Listview
long id) { 5trang paraml : bundle.getsEring{ "keyIdc, ) ;
Strj"ng param2 = bundle. getstring (.,'keyUserld" );
Intent intent = nerf Intent'(thlE, tugasDetailup'claas)'
Bundle bundle = new Bundle0; / / SERVER*URI, = SERVER-URL+ r'
? |
idca +paraml+',&un*,, +param2 ;
bundle, PutSEring {'i keYCaurse", trv t
myRssFeed.getltem(position) .getTitle ( )) ; Jinkurl" = ners
bundle -PutstrinE ( " keyuname ", koneksi ("/ tugasupdate . php?idc= " +paraml+ " &idu= " +param2 ) ;
myRssFeed. getltem posi Lion) . EetDescriptlon ( l ) ;
(
SERVER*URI = linkurL,geturl{) ;
bundl-e.Putstring ( "keYIdc ", URL ,]
rssurl * nerrr URI(SERVER-URL);
myRssFeed. getltem (position) , gdtI,ink ( ) ) ; SAxParserFactory mysAxparseiFactory *
bundle.Putstring ( "keyuserrd" , SAXParserFactory. nerJns Eance ( \,
myRssFeed. getltem (positioh) . getpubdate ( ) ) ; SAXParser mysAxparser =
. intent'PutExtras (bundle) ; illysAxParserFactory.newSAXParser(),...
startActivitY ( intent ) ; )O{LReader qr}O4lReader : mysAxparser.get}O4lReader ( );
j RSSflandIer myRssHandler = n6r, RSSHandlerO;
) nlyXM l,l{(., r(l(. r . se L ContentHandler (myRSSHandler ) ;
ln[)ul il()llt r'(, rl]ylnputSource = new
l !ll)lll lir)lll i'('( r tttlllt I .0lrIttlil t .!.lrl ( ) ) ;
 myxMlBeader . parse (mvlnputsource ) ; Code di atas untuk menangani aksi update tugas yang ada pada setiap
course. Update bisa dijalankan ketika tugas telah ada yang di-submit.

- ] catch. (MalformeduRlExceptiori e) {
./l T]ODA Auto*gendrated catch bloik :
--tugasDetailJsUP
. .e;PrintstackTracd ( ) ;
) catch (Pars'erConfiguraLionException e) {
. //. TODO AuLo*generated catch block
e.printstackTrace ( ) ;
) catch (sAxException e) {
/ / ToDo Auto-generaEed catch block
e.printstackT'race ( ) ;
) catch (loException e) {
. / / ttc,E8 Auto:generated catch block
e.PrintstacXfrace ( ) ;
)
lf (mYRssFeed! =nul1)
I
' T"ttView feedTitle =
(Textview) findViewByld(R.id . feedLiELel i
Textview feedDescribtion =
(rextview) findviewByld{R jd.[?"igrfl,f":i?,=, '

( Textvi er,i ) f indVi ewById ( R. i d. feedpub-da re ) ;

Textview feed],ink =
(Textview) findViewByld(R. id. feedlink\ ;
f eedTitle. setText (myRsstreed. getTi tle () );

feedDescribt i on . setText (myRs sFeed . getDescript i on () ) ;

feedPubdate. setTexE (myRssFeed' geEPubdate () ) ;
feedlink. selText (mvRssreed' getlink( ));

ArrayAdapter<Rss1tem> adapter = new

ArrayAdapter<RsSIiem> ( this,'
androi d' R''"""1;;il:ii;jiil;1 jil;i :TIl""'.u'
setli sr
"I I

l
]
protected\roldl onlistltsemClick(ListView 1, View v, int position'
long id) {
Intent .intent E new Intent(thlE,tugasDetailJsup'cl'ats),
Bundle bundle = new Bundle ( ) ;
bundle. putstring ( " keycourseName ",
' >sition)
myHssI eeo. geE1 tem (posr-r,1 get ra:, O ) ;
on ) ..get.title
. "-,-,,
bundle.pltstrinE "keyuserrd"
( ,
myRssFeed. geti
ition ) . getDescript ion { ) ) ;
tem {pos
bundte. putstring ( " keyassignf d'',
myRssFeed., getltem(.posilion) . getLink ( ) ) ;
bundle ;putstring ( " keyCourseld"'
myRssFeed. getlrem(posi.t.ion) . EetPubdate ( ) ) ;
bundle-pulstrins{,,heyAssignsubldf,,myRssFeed.qetltem(position).getcaEeg
ory( ) ;
intent.putExtras (bundle) ;
startAct.ivi ty ( intent ), *
) - thlr.qolfntentO
IlrrncJle brrndle .getExtrasO ;
)

*i
fr8al. sLringi paraml .i bundle. getString (."key-C6urseId'l ) ; createDialog(."Se1arnat"., "Jawaban Anda B€rhasil Di
fLnal St.ring param2 = bundle.getString( "keyAssignld" ) ; UPdate ^,4.!i) ;
fLnal String param3 = bundle.getstring ( "keyUsertd" ) ; . ]a].se
f,tnat String paianA. - bundle.getString("keyAi:slgnsubid") i .., {
Button uploadupdate = (Button) createDialos("Maaf", "Jawaban Anda Gagal UpdaE.e T-T
findviewByld(R..id.updateupJoad), : : waktu untuk updaLe teLah habis,l),
'': uplEadupdate.BeLonclicklisEener(u.nI oriclicklistenqr() { :
)
t
IrJbltcv.t{dl onclick{Vie\d v) { ,. ..:
// fo,!o. Auto*$enerated,mEbhod stub ''., cttcb (Exceptioh e) {'
. StrinE courseld = pirreiiil.i.i . '.
' jawaban. seltei(t (e. tostrinqr.( )),
Strir'rg userld :i Pdrim3; .

string Assignsubrd = param4; )

htant iUpload F n€li Intent(auqasDetail,Jsup.thtg, uploadupdat.e.clags), )
));
Strinq t.xtcourseld =
' linkrrrl * nerr. i -

koneksi (" /tugasDet,ailJson-php?ida=,+paIaml+,,&ida=" +param2+" {

&1du4 +para
String. va-lueof ( tugasld) ; m3);
:;:::';:.*".;1"==,,,', SERVER*IJRI, = linkurl.serurlO; .

Strinq.vaJueoftusd,rrd) i'
Strinq txtAssignsubld =
Etrins - vaTudd i lessisilsubrd ) ; Httpclient hrLpclient = aew EefaultriELpclieni() t
tsund16 bundLe: nec, Bundle{}i . i' HLtpPost ht.tpPost ; new lltlppost(SER1rER_URIr) i
bundle,putstsrinq ( iidc" , t*tcourseld) ; / lparameter
.. bllndle.plrt$trins("idtgsr ; Extrugasld) ; Arraylist.<NameValuePair> param = now
bundle.put'$tri.ng If iduri ; . txtUselfd.) ; Arraylist<NameValuePair> ( ) ; {
bundle-putsLring 1 " idastt trv {
txlAssignsubld) ; I /add parameter
iUr:load.putExtrag(bundle); .. .t',,t. ht tpPos t . setEn t i ty ( new Url,EncodedFormEnt i ty (param ) ),
starEActivity ( iUpf oad) ;
) HttpResponse httpRespose = hEtpCLient.execute(httppost) ;
]); * (Button) findviewByld{R. id. kirimtlpdate)
HttpEnt.ity httpEntit.y = httpRespose.getEntity( ) ;
'Butt,on bt*jawaban t
/ / read content
Inputstream in = httpEntity.getconlentO ;
nul|lrcvoi* onclick(view vJ { BufferedRead.er read = nert
r / rop1 ooao*n**.r.ted method srub Buf feredReader ( nenfnputsEreanReader
:'..* - -. ( in ) ) ;

= neYt
Arraylist<NamevaluePair> ( ) ; String content = "";
postParameters. add (n6vr BasicNamevafuePair (" jawab", String line = "";
jawaban.getTexuO .tostring(l ) i; i

Stiing resBghse .= nul,l' ' .,. ' , i

while( (line = read.readlineO ) !=nuI1) {
try i
linkurl = new j
koneksi { 1'ltugasKirirageksupdafe.php?idlgs;* +pararnz+ "&idr.x=" +param3+ " aida
s=, +param4 ) ,. Log. d( 'ADBUG' , "content.: "+content) ,.

SERVER-URL = linkurl. getUr1 O ; t1t:^^^

| )i2!!
ie.spods* ,..= ' tugas$ttpcLient . execuf 6}rl tpPo,$l { SEEVER*U&I,, lf, ! conlent. equals'{ -nu1I"
( )){
postPAramaters.) ;
try {
SLring res = response. tostring O ; .TSONArray jarr = rrew JSONArray(contenL);
String namaTugas="",.
res = res.trimO ; St.ring detailTugas=" " ;
res = res.replaceAll ( "\\s+', "") ;
if(res.equals(-1") ) t lor(lnt i,=0; i<jArr:. lengttr ( ) ; i++) {
,ISoNol),o(:t iObj = jArr.get,JSONObject (i) ;

-l
 import. mobile " kelas . rss . RSSFded;
string name = jobj .getslri-ng ( "name" ) ; inport mobil-e. ke1as. rss . RSSHandler ;
String alltexl = jobj -getslrinq( "description" ); inDor! mobile. kelas. rss. RSSIt.em;
iuport java. io. IoException;
namaTugas += name+'\n" ; irnDort java. neE.Maf formeduRlException;
detailTug:as += alltext+n\nri ' irrport java. net.URL,.
l funDort j avax. xrnl . parsers . Palserconf igurationException;
.

judulTugas. setTexE (namaTugas) ; inport, j avax . xml . parsers . SAxParser ;

isitugas. setTexL (detaitTugas) ; import j avax . xm1 . parsers . SAXParserFactory ;
ing ort org. xm1. sax, Inputsource;
] catch (,fSONExcePEion e) { . i8Elort org . >on1 . sax . SAxExcept i on ;
. / / 1rODO Auto*generaLed catsch block Lnport org. xm1. sax. xMlReader;
.. e.printsiackTraceO ; iq)ort com. mobi Ie . learning . R;
] Lport android. app . ListActivity ;
ielee { iryort android. content. fntent ;
' Toas! .makeflext(ihle, 'error", ToasL-.LEJVG"H*IoIVG) .shot"rO ;. i-qrort android. os. Bundle;
\ iqlort android, view. View,.
iroport android . widget . ArrayAdapLer;
catch (ClientProEocolException e) { *,rq)ort android. widget. ListView i
/ / TOVA Auto-generated catch block ilt[Dort android.widget:Textvie*.l
e . printstackTrace ( ) ; .
catch {I0Exceptian e} .{ I)ubticil..sa n.i1ai, gxUendt tistActivity {.'
/ / BODO Auto-denerated catch block grblic koneksi linkurf ;
e.prinLstack'frace ( ) ;
SETing SERVER-URL;
)
priwaie RSSFe;d myRssFeed = null;
]
' 3rrlvatetold createDialog(string tiu1e, String text) { 1t*. Cal1ed when the- acti.vity .is first created. *l
AlertDialoE ;id = new alertDialog'Builder(thte) @override
. setPositiveButton ( "Ok" , nuII) pu"bllcwoid oncreate (Bundle savedlnstanceState) {
:;;;;i;i;i.i;i;i
text
super. oncreat.e (savedfnstancesEate)
seECont.entview ( R. layout. mainrss)
;
. setMessaqe ( ) ;
. create O ;
Bundle bundle = thiE.qet.Intent () .getExtras ( );
I
) String paraml = bundle.getString( "namauser" ) ;

/ / SERVER-URL = SER\TER-URL+ " ?uname= " +paraml

Code di atas berfungsi menangani aksi untuk menampilkan soal atatl
;
trv {
pertanyaan dari uP date tugas. f-inkdrl. = ncrl*
koneksi (" /course . php?uname= " +paraml ),..
SERVER_URL = linkurl.geLurl (),
URL rssurl = aew URL(SERVER_URL};
sAxPargerFactor)f mysAxParsbrracuory *
Paket mobile.nilai SAXParserFa cLory, newlnstance ( ) ;
SAXParser mysAxParser =
Paket ini berfungsi untuk menangani aksi-aksi nilai dari setiap tugas yatrg mySAXParserFac t.ory. newsaXParser ( ) ;
XMLReader myXMlReader
telah diperiksa dan diberi nilai melalui seruer. untuk itu buatlah sebttitlt
=
mysAxParser.getxMlReader ( ) ;
paket dengan nama mobile.nilai. Di dalam paket ini ada 3 c/ass. Beriklt RSSnandler myRssHandler : dew'RssHandler( );
qr
class-class-nya. TIffiIE::::: ff ;ffXi;::Iil*1";lltss,andl
)

I ll[)utSource ( rssurl . openstream ( )) ;

'-nilaijava myxlvllReader . parse ( mylnBut Source ) i

package mobile.nilai; myRssFeed = myRssHandler.getFeedO ;

LnEprt mobile. config. koneksi ;

) crtch (M,1 [f ()r'rneduRI,Exception e) {
 // tOlO Auto-g6neratdd catetr D-lock
--nilaiDetail java
' .,... .']:,cabclr {Parsercoilf iguiaLionExcqp.tigqrl e) {. .
gack ge riob.i.le i riiliii ;
' l/.,,,1qDO Auio-generaied iat.ch b1oik..,r''
.' ,.... .,..,, e.piint$tackfratre O ;... .,,.,., i
ir'.t. . . .... ,.
, .imort mobile..configi:koneksi; .i . ..

..,..,.,.. ,,:,.., ...., ) .catch {.sAxBxqepti.qn .dJ { ,'

i' ll :rODO Auto*Slet'reraqgd ealch block "''i' inglort mobile. kef as. rss. RssHandLer ;
'q.print,$tdckTraqe ( ) ; : imlrort mobile. kdl. ds. rse rRSSItern;
.....}.c*tch.(IoException.e'),t'','.......... iirryort.Java.io.. IOExceritiorl!.r', ,,,, '. .. i:. r.'i . , '..
,. 1 / ' $OUO "j\]rrLo-g€rnerated'. catchrl,block .,...
.
.tmort j alia. $et .1'{a1 f orobd|BlExceplion;
iruport java.net..URL;
i inElatt, j avax ;'rdntr. ..parsers.. pers droOof i gnitationEx*ept ion ; .
..'',{.f.......{myRssF6ed1=nutr1).. tqrort j avax ::on1.;.pAr:EBrs';.SAxgartier ;,, .

t lryprt javax,xml'.paieerg, $AxpargerFact.ory; , .:..

T6}(tview . feedTitle -
{'textviewi f indviewBtrd id ; .f,eedri tLe) ;
(R.
Textview feedDescrlblion q
.' iqgort org.:c.n1..sax-]nlrutsoltrce; .,. .i.'
Lrulort orE. l<:iil . sax :.SAX$xception;
.
tqp.ont org.)snl :giix.XMLiR€aderi . ,.

(fextViewlfindViewByld(R,id'feedde,sqri.btior:jl;'."'t' iryort com,mobile. learning. R;

Textview) findvieweyrd ( R . id . feedpubdate\ ;
(
,textYlew feedl,ink 2 ingort android. content. Intent ;
.{TextView) fi.ndviet^rByrd{R: id. f,e€'dl jn*) ;
'. ,:.:
iryort. and.foid.qi!.gund1e; . ,. .r '.i.
isFof! eirdroid.view.,Vlew; .. .' ,t.
feedritle. edtr€xt {myRsisFeed. gq-britle {)};
lr!port.android.widgeu..ArrayAdapter;''
getDescr:iption
inrport android.widget. LisLView;
f e*dDescribt.ion. setfext (myF.gsFeed. ( )) i Lmport android.widget. TextView;
f eerdpubdate. Fettext 1;nyx.ssFeed.. oetkrbdate ( ));
feedtirik. setfext {myRssl'eed. getlink { }); publicclase nilaiDetail e*tenda ListActjrrirw {
' .publLc .konekei linkurl;
ArrayAdapLcr<RssItem>adapLer. t: ..,
,.... :naw Arr4yAdapter<kssjlgm> lt.b'i.' i .
.
'.':.'
$trin!, SERVER_URL; r:: -

. ttrivat,o RgSf'eed rnyRssFee4 = nrrll;

andioid' R ' setlist t));
..

'
'"'0"!;:iffiii;jji5;ij5:;l;lIl**"*u /** Cal1ed when Ehe act.ivity is first created. */
I
GOverride
) publicwoid oncreate(Bundle savedlnstancestat.e)
protactadvoiil -onr,istltemclick(ListView 1, view v, int position, aupar. oncreate ( savedf nstanceState ),
{

long id) { setContentView ( R. 1 ayout . mainrss) ;

. Bundle bundle ! thJ.',get,Intei,It().gelExtras();
Intent.. inierrt = r"* InLent (thi*,nilaiDetait.cfaer) ;..i]
String parainl = bundle,geLslrinS(,,keyldc").
- Bundle bundle .= r6w Bundle ( ) ; Strins pa:taro2 r br:nd,le.getgtring("keyUserI.d',
' i bundl-e , putstring ( ;'keyCourse "
,

l,
myR$sreed. getltern(posiLion),getlitIe ( ) ) ;
bundle.putstring ( "keyuname ", / / SERVEA*URL = SERVER*IIRIi+ ( ?idc= r +paraml.+ " --:--
&un=', +param2 ;
tr,Y { r"' ri. ..i .. .

m],Rs.sFeed.ge!iI.tem(ps$iti0n}.g9uDescript.ion{}};' , liirku*l : navr'

r,,,.:,, ...rrr..,:Lrundle.put.stfiing'll:ketIdc"
koneksi ( " /ni1ai .php? idc= " +paramL+,, &idu=. +param2 ),
myRssFeed. getltem(position) . getlink( ) ) ;
'' 'r" '' ' ,, ,. ,hundIb,pUtSlring.lnkey$iEerld",..,',' , i' . ::r.r ' SERVnn*ggL ,r, llhkurl .EeLUrIO i, I ', ' ir'
URLrrssurl - ns URI{SERVER*URL},- :-
..,r.

myRe,Erged.,.get.lten(pasi.tj.onl.;getpubdate..'(l) ;,t' ..r..t' .:i i,:.i.'' .

intenE . putExtras (bundle ) ;

'.',". S4{eggq erFac t of
}.. my$AXPar ser}'ae ton . T,
SAXParserFactory . newlns tanc e | ) ;
startAct.ivity ( inEenE ) ; .., SAxparseq-mysAxpar,ser:i,. : :'.:.:' :: .:::
,)'.-'. t: .:.'
t
mysAxParser.getxlvllReader{}; . ' ,.. ,. .. I

Code class di
atas berfungsi untuk menjalankan aksi menampilkan nilai RSSHandl€r myeS$HandlQr.,r,'nerr nSs$aadler.{ I i ,:.,,,.. .

my)OvflReade r . s e tC ont entHandl eir {myRS $H+ndl,eq ). tir,':' i., ., i

berdasarkan course. Di sini akan ditampilkan course yang ada. Inputsource mylnpuEsource = rro!,
I.nputSource ( rssUrl . openstream () ) ;
myxMl,Reader. parse (mylnputsource ) ;

-l
 n

myRssFeed = myRssHandler.getFeed( ) ;

) eetah (MalformedURlExcepr'ion e) {
I / *ODO Auto-generated catch blqck
e.PrintstackTrace ( ) ;
) satch lParserconfigurationException e) t
I / \oN Auto-generared catch block
e.printstackTrace ( ) ;
i aatch {s.AxException e) {
. / / TODO Auto-grenerated calch block
. e.pri4tstackTrace{ ) ;
) catch (ioexception e) {
. / / .lroDo .AuLo-generated catch block
e. printsstackTrace ( ) ,
1

at (myRssFeed I *rul1 )
t
Textview feedritle =
(Textview) findviewByld (R. id - feedtitJ-e\ ;
Textview feedDescribtion =
( Textview ) f indvi ewById ( R. id. f eedde s c r ibt i on ) ;
Textview feedPubdate =
(Textvielv) f indViewBytd (R. id. feedpubdatel ;
Textview feedlink =
(Textview) findviewByld(R. id. feedfink\ i
feedtlble.seuText{myRss.Feed.EetTitsle(} ),,
feedDescribiion. seuText (my-RssFeed. g€tDescription O) i ..

feedzubdate. setText imyRssFeed. qetPubdate () ) ;

feedllnk-setText (mvRssreed. getl,ink( ))i

ArraYAdaPeer<RSSItem> adaPter =
n6w errayAdapter<RssItem>(tbie.
android. R- layoxlt . simpJ.e*J is t-i tem-1 . myRssFeed ' qetlist ( ));
setlistAdapter ( adapEer ) ;
)
)
protsct€drrold onl,istItemClick(Listvie!'' 1, View v; ltlt position'
long id) t
Intent intsent. = aa$ InEent(thlB,nilaipetail'Js'class) ;
Bundle bundle = ndw Bundle0;
bundle . puLstring ( " keycourseName ",
myRssFeed. getltem(position) . getTiEle ( ) ) ;
bundle . putstring {' keyAssignld",
nvRs sFeed. geLltem (posilie4 ).'.getDescript ion ( ) ) ; .

. bundle.pi"rlstring("ke)ruserld",
rnyRssFeed. getriem(position)'- g'ettink ( ) ) i
bundl e . PutSrring { "keySubmisrd",
myRssFeed. getltem (positioa) .getPubdate{ ) ) ;
intent .PuLExtras (bundle ) ;
startActivic:, ( intent),
)
)

I //1r.rr rrrnr,lor

sl
 Paket mobile.upload
Paket mobile.upload ini berfungsi sebagai paket untuk menangani aksi
uploadfile, image, uideo, dan audio. Untuk itu, kita perlu membuat sebuah
paket di path lsrc dengan nama mobile.upload. dalam paket ini ada 3 class
yaitu

--uploaderjava
pachags mobile. upload;

irE)ort j ava. io. Dataoutputstream;

iryort j ava. io. Filernputst.ream;
iqrort j ava. io. Input.Stream;
iurport j ava. net . HttpuRlconnection ;
ingrort j ava . net,URL,'

inrport android . os . As)mcTask;

Lqrort android. widget. Textview;
puJr].ica1t.$$ Uploader extenda AsyncTask<object, String, Object>

URL connectuRl;
String params;
String responsestring ;
String fileName;
5yteil dataToserver;
FileInpuE.Stream f ilefnputStream;
TextView info;
. voj.d .seturlAndFile (String urlstring, String fileName, Textview
info)
thls.info = info;
try
{
filelnput$tream = new Filelnputstream ( f ifeName)
connectuRl = nevr URL(urlstring);
]
catch(Flxception e)

publishProgress (e, toString ( i )I

)
tshis. fileName = fileName;

slimchroniiedlvoiddoupload() . ...''.... l.

SEring twoH)4)hens
String boundary - n*****n-
try
I
publishProgress ( "Sedang Upload. . . " ) ;
HttpuRlconnection conn : (HttpuRlconnection)
connectURL. oponconnocLlon ( ) ;

-l
arive.i; . : ,:. , .:. .. . ,:', .

aar rrouraarv.;-rounoaryr ;
a
' :: - . :' tiEi...idio.;;etlextlpfa€Bsi0li; .
. oitao".pursr@ 'do6 =; raourix EsEr6:i$ I
i Da : ! , ,: .'..
-*.seqirxr1luii6ar r; .' 1 )' . i:' ::..
' dor. El..eqr!.d t6. {}rh@ r b(Nd6ry'..Il;€h Ld
I
{os.yllr.ByLcsr'cotrLent Di.posititdi.. fotudt tar .'.':.":. .: . :'::i
rrri.'us6!Illc\.;!i-oir$e-\.' + fii+{a ,,\'. , lilErrd)I ::' ::l:i
Code di atas berfuDgsi seb agai engine day', aLsi uplood }"ng akan dijalan}a&
rlt W....\!efl"Ute ... ..'1::i:'
..:i'
i?rtl.Ilnislranh. ih i l6bte ) : ',.:: i'ii. i:i.
l.;r ,*Buf t;Estre. . i2A;:'::,:::.. ' . - i":r l:i
I

, 1a bufre!6t,6 . )qat}t.'ti.ltlilryrivEllab}a,
':' .".,,..:, :.:".., ..i: .a:i:.:,,
-Uploadjava
Mxsutt€lslzq), ,;,, rr6talt riobit€,ueload:
b!ri. t l::h$tcr - ilr!!r^rlh! trersr .e)'i , .: '.r:.,'..".::':
.

:,' ::.,. : .' ,,, :,1 d*#:iiebrre,:i;nrrq.roo.,.8i,

:6urf.!5iret, i . r"t bylFele"d = ri1erreuEst';. re.dixiurrer, o!;, iif'* 1,va.ra.itrcr
:, : l:,::i:, ..,. ..,::,i:,,.,. ,.:,,,,, ii. rrirrt' .java. urtr -.eirayr iet r
.:!:::: :' !.:,i:1 .,::i::: ;fo;' iiltn: Jn?a.uli1.it5tr
,. .: tlvte"g"ao ' oi .::..: i" !*,ort i*r.rcutre,re+nrog,a,
. :. 'anlr
:. i { .'.. ..:::', i, . ,,*rdrt .ajn&oId app. aI6, LD1}loe,
. .

:: doi;irtrettuifE!, o, burrerati'ir;
... I f*ert a,.d,"td.q!E,r,iuda.iii,iLy,
. ,,.. .fy! 6'be$ai rab16 -
:l '
rlleli;pttatf€dird{,b11.}1.(}';-,,:' : ':. ,,,,,',, ,,.,,,i:
-:.. r$oirr:.i"droid.conE@r,Di6roElrilGrIa<e:
qEt;ndrcid.G.B.tedl;i ---T
,:, :' 'l' : bui'f6rd-ire :. !(eLh. ria tbyrsiGrl6blc, ''' ,r;6rr drord.vii!,,vi€u;
dxBr!fersi,..): ,,:.:.. :.:.:.. .i: 1904 Mdrold. vie,. ,/Ieo. oE!.LiEkrJl t6€! E
': byrds!.ai = ftl9rlret-sr.ree.;aad(trrrei, ilDoi 6droid.widc.r e"&ira"pre';
. '
O. bul!e!s1ze): . ,: L-,q.r u@o14. wid;e!, Eur L;a;

twHyph.6( j iinaEnd), ...,:r,..i, . ..

.' :': :' tllerqDursrles.cloEet I r ::,.. Dirrli. tron€k;: liEritr;

d6.aiaah(1, :, srrlhs sERv!4 uRii i'
Dilrrna rrst<g$In{i itea.: N1l; .' ,i:
,-i.. !: i::.:::r:r:. ::ruurgt'etrr'ijr'. ,'.coni,r.getxrputstditill(lit!,.i,, !*lt.aia I,i6*Etrltj>, tE!h.:= N1t:
r_

. LEt. .hr j. ,!16t. srrins ,@.,/. r

.:.. ::,'. :.... r ,:!':. .Flr.!. EdtErexE rat rarhrest:
. ..., +tlfi rch=,Ei.r_eadt)l r::1) :.,:!:,:,,,, aov€rrld.
' .: (:... '::: t. Duur@r.t oisreaLerB;d1i dav.rh.Lan&StaLe) -.( .. .
. :'.,::.:,,: Ldft. aFt*tEd Ci4hE) chl r .urf,!. dcre.* rEryidrrt occst-ar-d, ,
'l -'1i' r:' ' ' .-' -::: se.cdiairitwtes {R.16your. i ' : .. :i'
'.qi.!o.d,
: ..'.do5.c1aaBtr,,l..i .,' ... llEt srltnq Diliifir = hsdie.seEstitnq('idc.) r ....':.:,:..::".

", a!t.t iiiceF Iq et !161 stline l*iilu * r'uare,9*stri,s(.rdu:); ,. '

,i ' publt6hp.os.esere.r6sr-in.r,ri I s...o, "o - rr"."."r fhdvr""tiii;. id, qpteldltci; . ,l,"r.
) | myparhrext : (rdicrext) *navilisyia tf.iiiili#i-ii r """"""
I I 96tDi.{root),
I *, *, Fi.nr'. (rd oDcr i ckr,i Erene! o {
"nclicklil
II
ll
 I
publlcvol& onclickiview v) {.. . ..
r""l'...
/ / Tl}f,p AuLo-qenerated method stub ... gOverride ., r. i

. trv proEectedvoid onl-istlt.emCtick(ListView 1, View v, iat position,

long id) {
. , linkurl * n6!v .

koneksi (.''.lup}'oadProses . php?idc= " +paraml,+ " &idtgs= " +.pararn2 + 1' &1du='' +param File file - nalu Fi1etpatsh.qgr.(pa$icion));
1\, tf (file.isDirectoryO )

SERVER_URL = ]inkurl.qetUrl O ;
Uploader uploader = neltr UpLoaderO;
:, {
i re r ril..;S*Tii:llllllllllllllllJr.
uploader . setUrlAndFi le ( SERVER-URL , s.1po.iriool: l: ;
( ( Edit"ext ) f i.ndViewPyTd R' id. a"lanrat) ) . getText
( { ) . toString ( }, (Textview) (, elea
f indviewByld (R. id. info) ) ) ; t
uploader,.execute(); il, , nelr AlertDialog, Builder (thls)
i
catch(E>ac€ptior e) .setTiLle("!" + file.getNameO + "l folder can,t be
. t ',t'

. setPositiveBulton { "OK".i now

( ( EditText )f indViewByld ( R. id : alar4at ) ) . setfext i e. tostring O) ;,,' .' Diafoglnt.erface. OnClickl,istener ( ) {
,, Dultlicvold onClick{Dial"oglnterface dialog; inL which). {
]); /I TODQ
)l .-,.t, Auto-generated method stub
I

grivaterrol{ getDir (String dirPath) )).show{);

]
myPathText.setText(dirFath);. ,,, ' )
, blse
item = rtarr ArraylisE<String>(); {
palh = new ArraylisiiSlring> O ; myPathText. sdt?ext ( f i1e, EetPath () ),
1

File f = new File(dirPath);

rilell fil-es = f .l-ist.FilesO; ),
Lf ( ! dirPath. equals (root) )
C/ass di atas berfungsi sebagai distributor dari file yang akan di-upload.
{
item.add(root); Karena di c/oss ini ditampu\gfile yang akan di-upload.

iEem.add ("../^\; --uploadUpdatejava

path.add(f . getParent ( ));
pachage mobile.upload;
]
import mobiLe. conf ig.koneksi ;
for(Lnt i=0; i < files.length; i++) import java.io.File;
t iryort java.uti].Arraylist ;
File fiLe = fileslil; Lntport java.util. List;
pach.aild( file. gatPath{ ) ) ;
if (file.isDirectoryO,)' fuDort com.mobi1e.. learyring, R;
itein.add{fi16.getsNdme11 + "/" );
eLEC lryort android . app . AIertDi alog;
item. add(file. getName () ), Lryort android. app. LiseAcCivity;
IrE)ort android. content. Dialoghterfacd;
]
lnDort android. os. Bundle;
I4)ort android. view.View;
ArrayAdapter<String> fiIel,isE =
I Lnport android. view.View. OnCl ickl,isEener ;
nc!, ArrayAdapEer<String> (thla, R,1.ayout. r'ow, iLem) l.ryort andro id. widget . ArrayAdapEer,
setl,istAdapt.er ( fi lelist );
lport .1nd! o i (l . wi dseL , Ilu t t ()n ;

*l
 fI

lryrort android.widget. EditiexE ; item * new Arraylist<Slring>{);

furE,ort .android. widstet . Listvi ew ; path = new Arraylist<String> O ;
L$port android. widget. Textview,
File f = nerc File(dirPath);
publLcclaoe uploadUpdaf,e €xtends ListActivity { Filetl files = f,lis.bFiles{) r
public koneksi linkurl;
SLringf SERVER-URL; if ( !dj.rPath.equal$ {rogC) I
prLtate LisE<String> item = nuI1; {
priwaue List<String> Path = nuLl;
private String. root="/" i item.add(rooE);
Edi.t?ext mYPathText; pat.h . add ( root )
;lrivale ;

item.add("../");
/** Ca11ed when the activity is first created' */
@override
publicwoid oncreate(Bundle savedlnst-ancestaLe) { t
Euper. oncreaEe ( savedfostancesLate) ;
setconcentview { R . Iayou L - uploadl i foi(int i=0; i < files.lengEh; i++)
Buridle bundle * thlg.getrntent O.'getExtrasO ;
fifral SLring paraml . bundle.getsLring('idc'') i
fLnal String param2 = bqnqle.getstringi"16ggs") ;
f,ina1 String param3 = bundler,getstring("idu" ) ;
fLnal String param4 = bundle.getstring('idas") ;

Button up = (ButEon) findViewByld(R. id. uploading) ;

mypatshText= (EditText) findViewByld(R' id' a"lamaL) ; )

ArrayAdapter<String> fileI,ist =
new ArrayAdapEer<String> (thlg, R. layout..row, item) ;
up. setoncficklistener (Bew oncfickl,isLener ( ) { setlistAdapter ( fife],ist) ;
t

Dublicvoid onClick(View v) {
/ 1 a}!p Auto-generated method stub GOverride
try Irrotectedvoid on],istlt.emCfick(LisEView t, View v, int posiEion,
{
long id) t
l"inkurl = new
koneksi ( ,,
/uploadupdate. php? idc= " +paraml+ " &idtgs= " +param2+ r &idu: " +param File fil.e = naw. File (paE.h.get (position) );
3 +" &i das= " +param4 ) ;
SERVER-URL = Iinkurl.get.Url ( ) ;
lf (file.isDirectory() )

Upfoader uploader = new Uploader ( ) ;

upfoader . seturl AndFi Ie ( SERVER-URL, If (fj-le.canReadO )
gietDir (path. get (position)
(i saitrext ) findviewByrd (R. id. alamat ) ) . getTexi ( ) ' tostrins ' (TexEview) )
( ) ( ;
findviewByld (R. id. info\ ) ) ; elEe
t
uploader.executeO;
) n€lr AlertDialog. Bui lder ( thiE )

catch(gxception e)
{
.;setTitle{{lo + fi}e,AletNameO + ".1
folder can't be read! " )

( (EditText) findviewBvrd(R- id. alamat) ) ' seiText (e' cost'ring () ) ; . seuPosiLiveButton ( "OK" ,
n6w Dialoglnt.erface.OnClick],istener( ) {
1'
)); publicvo:Id onCliek{pialtogtnterfece di.atrog, Lnt. which),
)
I **
AuLo-qenerated method stub
prLvatevoid getDir ( String dirPaLh) )
t )).showo;
rnyPaEhl'ext. setText (di r:Pat.h) ;

i
 ]
elEs
{
mypathTexE. setText { fi1e. geLPatsh( } ) ;
l

Paket mobile.download
Paket ini berfungsi menangani aksi untuk melakukan dounload file dari
seruer, teknik download ini menggunakan teknik linkifu. Dalam paket ini
ada 3 closs yang saling ketergantungan. Berikut class-nya:

--downloadjava
Dackage mobi1e. download;
iwort mobil-e. confis, koneksi ;
{ryrort mobile. kelas. rss.RsSFeedi
isprt mobi Id , kelas . rss . RssHandler ;
itqlrcrt mobile. kel"as. rss . nsslEemi
iryrort java. io. IoExeeptioni
iqrort j ava. net . MaIformedURlException,'
irE,ort j ava . net . LIRL
;

lqrort j avaX . xnrt . parsers . ParserConf iguratlionExcept ion ,

iryrort j avax ,:on1 . parsers . SAXParser ,
itryrort javax.>anl.parsers. SAXParserFacEory;
irylort org. ><nI . sax, Inputsource;
infirort org. :<m1 . $ax - sAxException ;
lq)ort org.xrn1. sax.xMlReader;
j"qrort corn.mobile. learning.. R;
Lq)ort android. app. iistactivi ty ;
l.aport android. contenE . Intent ;
iaport android. os . Bundl-e ;
irqrort android. vietr. View i
Lnrport android. widget. ArrayAdapter,'
Jrnport android. widget . Listview ;
inFort android.widget.textvi.ew; . .

prrbllcclasa downl"oad ListAct.ivity {

tuJtlic koneksi"*""rrdt
linkurl-;
I SEring SERVER-PRL, feedDescribtion, setText {myRssFeed. getDesciipEio& ( ) .} ,
private RSSFeed myRssFeed = nu11; ;
::::ill[]!E;illl?filIll::::i3;aiffifi?'Le
/** Ca}led when the acEivity is firsL created' */
@Override ArrayAdapter<Rssftem> adapter = naw
puJrttcVotA oncreate (Bundle savedrnstancest.ate) { ArrayAdap Ler<RSsI tem> ( this, android. R. Iayout . simpJe--li s t-item-J- ,

6uper. oncreat,e ( savedhs Eancestate ),' rrryRssleed. getList () ) ;

seEcontentview ( R. IayouE . ma jnrss) ; setLi stAdapter (adapter ) ;
)
Bundl.e buncll.e - thlr.qr,.tTntollt ( ) .(,ot l,lxt r',r:r ( ) ; )
 'Drot€ctadvoi4 onl,istrtemclick(LisLView L, view v, int positibn. l** Called when the activity is first created. */
long id) { @Overri de
publlcwold oncreate(Bundle savedlnstancestate) (
. Intent intenE = neJ| rnEent{th{.a,downDetail .c[ad*) i ..:,

8und1e bundle = new BundIeO; setcontentview ( R. f ayout . mainr ss | ;

'''burld1e.put5iring{''keyCoufse',,....i.
myRgsFeed.getItem{pos,ition},set?it1e(),)i.... Burtdle bundle = thle.getlntertO.getsxtias{) ;'
bundle r'putStrinq'1 " keyUnailre " , String paraml = bundle.getstring("keyIdc,, ) ;
myRssFeed,get.ltem(pogition) .getDescrj"ptioii( )) r Striflg param2 = bund]e.qeE.SEring.i,,ke.yuserld, ). -
bundle.putString ( "keyIdc ",
myRssFeed. getltem(position) . getlink ( ) ) ; SERVER_URL = SERVER_URL+ ,,
? idc= ,, +paraml + ,,
6sn= ,'+param2
bundle;putstring ( "keyuserrd" , try (
,.

$yRss}.eed. getltern tposilion)., getPubdaLe ( ) ) ; I inkurl = aew

intent.putExtras (bundle ) ; koneks i ("/ downl oadFi 1e . php ? idc= " +paraml +"e idu= " +param2 ) ;
startActivity ( intent ) ; SERVER_URL = linkurl.getUrf ( ) ;
URL rssurl s ner*r URL(SERVER_URL),
1
!
SAxParserFactory mysAxparserFactory =
SAXParserFactory. nerrfnsEance ( ) ;
C/oss di atas berfungsi sebagai pintu gerbang utama untuk melakukan SAXParser mySAXParser
mySAXParSerpactory. newsAxParser
=
( ),
dounload file, di sini akan ditampilkan course yang ada kemudian akan xMlReader myxMlReader =
berlanjut ke list file yang akan di-dou;nload berdasarkan course, untuk itu mysAxParser. getxMlReader ( ) ;
Rs$Handl"er myRssHandler = rraw RSSHandler ( ) ;
berikut class step berikutnya: ilryXMl,Reader . setcontentltand1 er ( myRssHandl er ) ;
lnputsource mylnputsource = new
Inputsource (rssurl-. openstream ()
--downDetailjava ) ;
myxMlReader. parse (mylnpuLsource ) ;
pachage mobile. download; myRssFeed = myRSSltandler.getFeed ( );
Lrport mobile. conf ig. koneksi ;
) catch (MafformeduRlException e) {
5.m5rort mobile. keIas. rss.RSSFeed; / / TO,l() Auto-generated catch block
inport mobile. kef as . rss . RssHandl-er,' e.printgtackTrace ( ) ;
inport mobif e. kefas. rss. RSSItem; ) catch (ParserconfigurationException e) {
inport java. io. lOException; / / TIODO Auto-generated cat.ch block
irq)ort java. net. Maf f ormeduRlException,' e.print.stackTrace ( ) ;
LmDort java.net.URL; ) catch (SAxException e) {
J.mport j avax . >cn1 . parsers . Parserconf i gurat ionExcept i on ; / I IIODO Auto-generated catch block
itrlI,ort j avax . >onI . parsers . SAxParser ; e. print.st.ackTrace () ;
inport javax. xml.parsers. SAxParserFactory; ) catch
inport, org. xm1 . sax. Inputsource; rT"-hT"^t"'.T-n?r.t r."u carch brock
imgort org. :an1 . sax. SAxException; e.printstackTraceO;
LmE)ort org . >nn1 . sax. xMlReader,' )
irqlrcrt com.mobile. learning. R,' Lf yRssFeedl-nu}l)..
(myRssFeedl =nuIl)
imDort android. app. ListAcEivity; . {
irnpdrt, android - content. Inlent i TextView feedTitle =
inport andioid. os. Burrdle ;' (rextview) lindViewByld id. feedtjcle) t
(R.
imgort -android.vieu.View; i..
, TextView feedDescribtion =
imtrrrt android.widget,ArrayAdapter:;' ( Textview) findViewByld (R. id. feeddescrj.b rian) ,
import android. widget. ListView; TextView feedpubdate =
iryort.. android -widget . Texcview;. .
( TextVi ew ) f indvi ewByld R. id, feedpu.bda
{ te ) ;
llistAct ivity Textview feedlink *.,
Dublicclqss downDetail extands t (Textvj.evr) findViewByld (R. id. feed Tinki ;
. .. , 9ubtric konigksi linkurl; f eedTitie. setText (myRssFeed. getTitle {} )i
string SERVER-URL; f eedDescr ibt i on . se LText (myRssFeed . getDescript i on ( ) ) ;
prl.vats RSSFeed myRssFeed = nu1l; co(lpubdaEe. setText (myRssFeed. qetpubdate
I (] );
lFerll,i nk,!tet'fext (myRssfeed.geELink( ));

-l
 1

finkurl = new
koneksiDownload ( "moodledata/ " +paraml+" / " +param2 ) ;
ArraYAdaPter<RSSTtem> adapter >ffivpR_U.RL = linkurl.getUrl O ;

getList mTextLink. setTexE (SERVER-URL) ;

android. R. fayoul . simpJe*Jis t*item*l, myRssFeed ' O) ;
. Pattern pattsern = pattern.compjLe(SERVER-uRL);
setl,istAdaPLer ( adapter ) ;

Linkify. addLinks (mTextLink, pattern,

1
I
"");
]
piotect€dvoldonl,istltemclick(Listviewl'Viewv'Lntposition''
long id) {
Intent itrtent = new lntsent,tt'bLs,downTexf 'claas) ;
Class di atas berfungsi menampilkan link download dan ketika link tersebut
Bundle bundle = ncw Bundle0; di klik, maka sistem akan membawa kita ke area download.
bundle. Putstring (' keyNama",
myRssFeed. gtetl Lem ( posi tion ) . getTitf e ( ) ) ;
bundle, putstring ( " keyRef erence "'
myRssFeed. getltelrt (position) . g€tDescription ( ));

myRssFeed.
bundle.PutString ( "keyrdc "'
getlEem(position) . get]-lnk ( ) ) ;
Paket mobile.berita
intent . PutExtras (bundle ) ;
startActivitY ( intenL) ;
Paket ini berfungsi menangani aksi menampilkan berita yang ada pada
) seruer, ketika edmin ata:u teacher menginputkan sebuah berita, maka kita
) client akan mendapatkan list berita tersebut. Dalam paket ini ada z class,
berikut class dari paket ini.
Closs di atas berfungsi menampilkan lisrTtle yang di-dournloadberdasarkan
courseyang diambiioleh user. Berikutnya ketika salah satu list diklik akan
menampilkan link untuk doranloadfile, berikut clcss-nya: --beritajava
package mobile. berita ;

--downTextjava irnport mobile. conf ig. koneksi ;

pagkage mobile,download;
import mobile. keLas. rss.RSSFeed;
l-mport mobile. kelas. rss . RSSHandler ;
import java.util . regex. Pattern; inport mobile. kefas. rss. RSSItem;
iuDort com.mobile. Iearning. R ; inport java. i o. IOException;
f,n6ott mobile. conf ig. koneks ioownload; import j ava. net. Ma1 formedURlException;
LrE ort android. aPP. ActivitY ;
import java.net.URL;
lmport android. oe. Bundle ; inport j avax . xrnl . parse.rs . Parserconf i gurat ionfixcept ion ;
import j avax. xm1 . parsers . SAxParser;
tnport android. Lext. util . r,inkify; inport javax.xml.parsers. SAxParserFactory;
:tryoru arrdroid, widBlet - Texaview; inrport org . ><rn1 . sax. Inputsource;
p.drlicclaE6 dctwnText al3t€nds Activity I inllort org.:<nl . sax. SAxException;
inport org. >cn1. sax. xMlReader;
. Publtc koneksiDownload linkurl;
import com.mobif e. learning. R;
String url; lmDort android. app. ListActivity i
' l*x Calfed when the aeti-vity is first created' */ imgort android. content . Intent ;
J.nport android. os . Bundle;
Goverride inport androld. view..View;
pr:J:ltqrroidl oncreate ( Bundle savedlnstsancesLate) {

suDer, onCreate ( savedlns tanc€State) ;

setcontentview (R. Iayout ' 7inktext\ ; iffi:i: :r3i:i3, *i3;i!' ii::Ii#""'
publlcclarr berit.a axtcndE ListAcLivity
Textview .mTextlink = (TextView) findViewayld(R' id' ?ext,l'jnk) ;
publlo konoksii linkurf;
{

Bundle bundle = thlr.getlntenEO .getExErasO ;

Ijt. r inq iill;tlVl,:l{ l,l{1, ;
String paraml = bundle.qetsLrinqJ( "keyldc" ) i
St r i rrcJ par';rm2 - br.rnd'l'l' (rlll lit r" l n<l ( " koyllr'[ 111 11111'1r'r ) ;

rl
 /**.. ca]l.ed wtren Lhe aceivity is f irsu created'
i/ J

qoverride GOverride
pubficyold oncreate{Bundle savedlnsEailcegtate) { protected,void onl,isLrEemCIick(ListView ], View v, int posit.ion,
-*rrper
. onCreate { savedtns tances tat e ) ;
lons id) {
. '. .. .getconLentvie,ii (R.layouts.majlnrss) ;
// TODO Auto-generaLed method stub
fntent intent = rrew InEent (this,beritaDetaif.class);
Bundfe bundle = n6t' Bundle();
trv {
bundf e. putstring ( " keyTitle",
....]"inkui1*n€wkoneksi(,'/berita.php,');l.
SERVER-URL = linkurl.get.Url ( ) ; myRssFeed. getrtem(position) . get.Title ( ) ) ;
URL rssurl = n6!, UR1J(SEBVER-URI;) i..
bundle.putstring ( "keyDescripti on",
SAXParserFactory mysAxParserFactory = myRssFeed. getltem(posiEion) . getDescriptjon ( ) ) ;
SAxParserf&cLory. xibitI]lstance ( ) i
bundle.putstring ( "keyr,ink" ,
SAxParser mYSAXParser = myRssFeed. getltem (posit ion ) . getlink ( ) ) ;
bundle . putst ring ( " keyPubdate ",
nysAxParserractory.rrdwgAXParser ( ) ;' myRssFeed.getltem(position) .geLPubdate ( ) ) ;
XffiReader mYxMtReader
( i ntent. putExtras (bundle) ;
mysAxParser. EetXMLReader );
RssHandldr myR$SHand.ler : tew RssHandfer()i
:
starLActivity ( intent ) ;
. myXMlReader ..setcontentHandl er {ryyRS$tlandldr )
Ir}I)utgoufce mylnputsource = new )]
rnputgource {rssUrl. . openStieam( ).). ;
qryxMlReader. parse (myinput$ourqe ) I
myRssfead :. myRssfiartdler-getFeed( ) ; --beritaDetailjava
package mobile. berita
) catch {Mal"formedURlException e} { ;
I / go',} Auto-efenerated catch block
e . printstacktrace ( ) ; import com.mobile. learning. R;
) eatsh (ParserConfigurationException e) t iryort android. app. Activity;
I / I]Offi Auto-g€nerated catch block irqport android. os . Bund-Le;
e.printSEackTraceO; inport android.widget . Textview;
) eatch (SAxException e) { publicclare beriraD€tail extends activity
/ I ?.a,Jo Autso-generaLed catch block {
e.printstackTraceO;
1 c&tch (IoException e) { @Override
I / YaDA Auto*generaLed catch hlock Drotect€dvoid onCreate(BundLe savedlnstanceState) {
e . printstackTrace ( ) ; / / Ig)fc. Auto-generaL,ed meLhod st.ub
] sup6r. oncreate ( savedlnstanceStaEe ) ;
'- '' '' lf (mYRsPreedl=nuIll sebcontentview {R. layouE. detaiTberita) ;
Textview det.ailsTitle =
( Textvi ew ) id. de ta j s t i El. e ) ;
f indviewByld ( R. -Z

(TexEview) findViewByld(R. id . feedtitJe) ; Textview detailsDescripLion =

Texlview feedDescribtion = (Textview) f indViewByld R . id. de rai lsdesc r ipt i on) ;
(

('.rextView) f indViewByld(R. id- feeddescrjbtior') ; Textview detaifsPubdate =

Textview feedPubdate =
{TexuVievr) f indViewBvld ( R. id. feedpul:da te} ;
Textview feedlink =
(TexEview) findViewByrd(R. id' feedfinkl ;
feedti.tlle;!ettext (myRs5566{.getTitIe
(Textview) findviewBytd (R. id. detaifspubdate\ ;
Textview detalls],ink =
(Textview ) f indViewByld ( R. id. de t ai 7 s 7 ink) ;
( )) ; Bundle bundle = this.getfnLent O .getExtraB O ;..

feedDescribtion. betText (myRssFeed.gefDescriptton ( ) ) ; detailsTitle. setText. (bundle. getstring ( "ke1rTitIe" ));

detai 1 sDesiript.ion . setText ( bundle . getstring { ,'kdyDescription " ) );

detsa i I sPubdate . set.Text. ( bundle . getstring ( " keypubdat e " ) j;
'*arravAdapter<RssItem>
--' ";;- adaPter =
- -airavaaapt-er<RSSrtem> detai IsLink. setText (bundle. geEstrj ng (' keylink " ) ) ;
( th''t'

android.R. layout. simpJe*Jis t-item*L,myRssFeed' getlist () ) ;

setLi st.Adapter ( adapter ) ;

)
Paket mobile.about
Paket ini berfungsi untuk menjalankan aksi menampilkan about, about di
sini merupakan menu tambahan saja. Bisa untuk menampilkan info
deueloper, info diri sendiri atau lain-lain. Dalam paket ini ada r class.
Berikut clcss-nya

--aboutjava
package mobile.about;

inE ort com.mobile. learning.R;

imtr ort android. app.Activity;
l"rnlrort android. os. Bundle;
import android. view.View;
irnport android. view. Vi ew. OnC-L ickli s tener i

publicclass abouL exlerrde activity implenrents onclicklistener {

/x* Calfed when the activity is first created. */
GOverride
nulrtlcvoldl oncreate (Bundle savedlnstanceState) {
super . oncreate ( savedlns Lancestate ) ;
setcontentvi ew (R. l-ayout . about) ;
)
publicvoid oncl-1ck(View v) {
/ / T]Oro Auto-generated method stub

AndroidManifest.xml
Edit Android-1.{anifest di project anda seperEi di bawah ini.
<?;<rnl version="1. O" encoaing="utf-8"?>
<manifest:cn1ns:android:"http://schemas.android,com/apk/reslandroid"
package= " com. mobife . learning "
android : versionCode= "1"
android:versionName= "1.0">

<uses-sdk android:minSdkVersion=" 8" />

-permiss i on android : name= " android. permi
<u ses ss i on . INTERNET "/>

<appficat ion
android: icon= " Gdrawable/ i c- launcher'
android : tabef = " @s tr i ng / app-name " android : debuggable= " f a1 se ">
<actavaty
androi d : 1abel= " Gst ring/app-name'
I4ndyoid: naxre=" . login">
<intent-fifter >
<action android:name= "arrdroid. intent. acEion.MAIN" />
< ca tegory android : name= " android . intent . category . LAUNCHER' / >
< / int.ent- filter>
< /activity>

rl
 $Suery = "SELECT subject, messag€ ,from mdl*forumJosts
CONN ECT ED F ILE lvlOBlLE'
$run = mysql_query(Squery) ;
whif e ( $b=mysqL_fetch_array ( Srun) ) {
?>
<item>
LEARNTNG <Eit1e><?php ech6',$blsubjecsl ", i?></titie>
<dericription><?php echq l$blmes.sage],' ;:. ?>5/ddscripiion>
</ ilem>
<?php ) ?>
<,/ channel >
</rss>
<?p!p rnyegi*c1ose() ; :>

Berfungsi sebagai querA untuk penampilan berita.

Connected file atau yang biasa penulis sebut dalam bahasa Indonesia Ttle
penghubung atau mesing penghubung. File ini mempunyai peranan vital --config.php
dalam aplikasi client seruer yang akan kita buat. Tanpa file ini aplikasi yang < ?php
dibuat tak berarti apa-apa. ConnectedfiIe ini dibangun menggunakan PHP, $host = "localhost,,;
file ini menghubungkan atau sebagai k.u'rir reque.st dan respon dari client $username = "rooL";
$password = ";
maupun seruer. Connected -1tle diletakan di dalam htdocs bagi yang sdatabasename =',dl:moodle" ;
menggunakan xampp dengan nama folder "mobile" di sana akan ada Sconnection = mysql-connect ($host, Susername, Spassword) or
beberapaTt/e php yang berperan sebagai connect ed file. B erikutTt le -ny a: die( "Kesalahan Koneksi ... I ! ,,) ;
mysql-select-db($databasename, gconnecEion) or die ( "Databasenya
?>
:ili":" - ...Y::::':no''"' Burh N@toLd.r

lX D.:hop
Berfungsi sebagaiTt/e koneksi untuk semualfi/e ke database dan konten.

:Tinliial i o lc pii! \.1{,1

--course.php
: .ouE.Dd.ilTsp'rndn
..ur:eIdp,r :,r, t!:a!Li ,:.: .i: Prl,,:.i.i
lrli t. nr: i \8

<?php ?>
ffi vu"". { .u-o.",r,.^ <rss version= " 2.0 " )qllns : atom=', http : // wvtw .w3. org / 2 0 0 5 /Atom,, >
l: u'e"'oauu'o. <channef>
81, rEJo'trk t(jj tugrsF,nmrerr
9i tu9.rtu,mr.kup&t€ <tit1e>cou*SE YANG
:1 rueasupd.r6
:i: upr.adP.6;e!
i1.y::51:ii:;:
<1ink>http : / /m-learning. com/< / link>
:i uprcadupd!re <descript ion>< /descripl' on>
< 1 anguage>id< 7 languagl>
<managingEdi tor>I{obi I e Learning< /managingEdi tor>
Isi dari/older "mol)ile" connected file <copyright>Copyright 2011 Mobi 1e Learn.ing</copyright>
< ?php
include "config.php";
--berita.php Squery = "SELECT a.course, b.fu11name, b.id, c.usernamer a.userid from
< ?php ?> mdI-course-di splay
<rss version="2. 0" xmfns:atom="http: //www.w3.orgl2005/Atom"> as a inner join md1 .,iourse as b:on b.id=a.course..inner, join mdl_user
<channel> .ls c on c.id=a.userid and c.usernarne=,',.$_eUt1'uname'l . ", ,;
<ti tf e>BERITA< / ti t1e> Srun = mysql_query(Squery) ;
<description>< / descript ion> while ( $b=mysq1_fetch_array ( grun) ) {
<Ianguage>id< / language>
<managingEdiEor>MobiIe Learning</managingEditor> . i t.em>
<copyrighL>Copyright 2011 Mobi 1e Learni.ng</copyrighL> - t i.tle><'lphp echo ',$btful lname],,; ?></tj"tle>
. ?php .1:rrbDate><?php echo n$bIrraorirll,, ; ?></pubDate>
inr:1 rrrir' "r'orrl irJ.plty:" ;
.. I ink><?phl: n(-"ho "$frI trll , r /.. / I lnk>
<descriplion><?php eeho "$blusername] " ; ?></descripEion>
< / item>
\IIJITP
-r^h^ 1 ?!
I-
'
< /channel>
</rss>
<?php mysql-closeO r ?>

File diatas berfungsi sebagai querA untuk list course berdasarkan user.

--courseTopik.PhP
<?php ?>
<ris- version=' 2 . 0 " )<mJns : atoma "http : / /www. w3' org/2 0 05 /Atom" >
<channel>
<t.it1e>TOPIK C0URSE< /tiLLe>
<1ink>http /m-l earning. com/< / Link>
:/
<description>Silahkan Klik Topik yang Ada</description>
<f angua-ge> id< / 1 anguage>
<mariagingEditor>MobifeLearning</m€nagingEditor>
."opyiiqht.rcopyright 2011 Mobile l,earning</copyright>
< ?php
j-nclude "conf ig.PhP" ;
$query * "SELECT a.course, b.fullname, c.username, a'userid, d'id' .'
a,.r.*", d.t)rpe, d.alLtext, d.reference from mdf-course-display
as.a innei-join mdl*course as b ofl h.id=a'course inner join mdl-user
as c on c.id=a.userid
inner join mdl-resource as d on d.course=a.cour5e and d't14)e='t'ext'
and b.id=''.$-GET[' jdc' l.'' and c.id=''.$-GETI'idu' ) ";
$run = rnysql-query($querY) ;
""
while ( Sb=mysq1-f eLch-array ( $run) ) {
?\
<item>
<titfe><?php echo "Sb[namel "; ?></tiLfe>
<pubDate><?php echo "$blcoursel' ; ?></pubDaLe>
<1ink><?php echo "SbLidl "; ?></1ink>
<category><?php echo 'Sbtal ILexl "; ?><,/category>
<description><?php echo "$bluserid] "i ?></d€6cription>
</item>
<?php ] ?>
< / channef>
< /rss>
<?php mysql-closeO; ?>

File di atas berfungsi sebagai querA untuk lisf topik yang ada berdasarkatt
course.

-- courseDetailToPikJson.Php
. ?php
include "confiq.PhP";
$idc= $-REQUEST[' idc' ] ;
Sun= $-REQUEST [ 'un' ] ;
if(Sidc && $un) (
$sqlSEri.nq = "SEL,ECT a.cour'!;e, b. f rll lrldm(), t). irl, r-:'trt;r'r'rlllllll-r, (l't'tttorld'
d.itl, ct.nirrrrr,, d.ty1tr,, ti,;tlllcxt , rl .tr'lrrr'(lrl('e trom mrll t'ortrttt' rlirllrlay
File di atas berfungsi sebagai querA untuk menampilkan file yang bisa di- File di atas berfungsi sebagai querA untuk menampilkan nilai berdasarkan
dousnload di client berdasarkan course. course.

--login.php --nilaiDetailJson.php
<?php <?php
include "config.php"; include "config.php";
$username =. $-REQUE6TI lusefname' I ; gidu= g_REeUEST [ 'idu' I ;
,,,
$password : $-REQUESf I rpassvord'l i 6166= g_REeUEST [ , lda, ] ;
$passwordhash = 'inds {-$password) i
/ / q)ery untuk mendapatkan record dari username i $""rllJfi;"=t:-#331{"..orr**,b.rr"r11name, c.username, a.userid, d.id,
$query = 'sELECT * from mdI-user where username = '$username' and d,name, e.id, e.assignment, e.grad.e FROM 'mdf_course_display' as a
passwbrd -''i $passwordhaEh"' ; innerjoin md1*course as,b.on b.id=a.course inner join mdI*user as q.
$numRohr myqql-num*rowe (mysql-query ( $query ));
. .,.,,. on c.id=a,userid inner join mdl,assignment as d on
=
/ / cek kesesuaian password d.course=a.course inner join md1-assignment*submissions as e on
if ($numRow >= l-) e . assignment*d. id
echo 1; , and a.userid=,',.$_cETt,idu,l.'"
el se and
'r'i e'assignmentr'il'$-GET['ida']'''
?> and. e.id=,,,,$*cETt'idsub' j.",,';
)else{
SsqlString = "SELECT a.course,b.fullname, c.username, a.userid, d.id,
File di atas berfungsi sebagai querA untuk loginke sistem. d.name, e.id, e.assignmenL, e.grade FROM md1_course_display' as a
innerjoin mdf-course as b on b.id=a.course inner join *df_r"ar a" .
on c.id=a.userid inner join md1-assignment as d on
--nilai.php d.course=a.course inner join md1_assignment_submissions as e on
e . assignment=d. id" ;
<?php ?>
<rss version= 2 . 0' ><rn1ns : aLom= "htLp : / /www.w3. orgl2 005 /ALom" > )
"
<ctrannef > $rs = mysql-query (SsqlString) ;
<title>Nf LAI TUGAS</tit1e> if(Srs) {
<link>htEp : / /m-learning, com/</link> while ($objRs = mysqf-fet.ch-assoc (Srs) ){
<descriptign>Silahkan Klih Untuk l4elihat Nilai Tugas yang goutputll = goUjns;
Ada< /descripti on> l
< language> id< / 1 anguage> echo json-encode ( Soutput );
<manigingEdiLor>Mobile Learning</managingrEditor> ]
<copyright>Copyright 2011 I'{obiIe Learning</copyrigrh!> mysql_cioseO;
<?php ?>
include "config.php";
$<Xuery = "select c.id, c.fuJlname,a.userid, d..username, b.name, a.id, File di atas befungsi sebagai querA menampilkan nilai secara detail
a.assignment,a.grade from md1-assignment*submissions as a inner join
mdl*assignment as b on b,id=a.assignment inner join mdJ"*course as c on menggunakan porsing Json.
c.id=b.course.inner join mdl*user as d on d.id*e-userid and
c.id='".$-GEtt'idc'I . "' and a.userid='".$-GETI'idu'I . " "';
--tugas.php
$run = mysql-query{$query),
while ( $b=mysql-f etch-array ( $run) ){ < ?php? >
?> <rss version= "2.0 " xmlns : atom= "http :// tlww,w3. orgl2 005 /Atom" >
<iterrP <channel>
<li.t1e><?php eiho'- "$b[nane] u ; ?></title> <ti tle>TUGAS< /Lit1e>
<pubDate><?php echo r96lidl "; ?><lbubDate> < 1 ink>http : / /m-learnine / < / l.ink>
<lirtk><?php echo.'.r,1.$btuseridl'' ; ?></link> <description>Silahkan Klik Tugas yang Ada</de*ciiption> i .

{description><.?php echo "9bIassignment] " ; ?></description> < 1 anguage> id< / Ianguage>

</item> 1e Learning< /managingEdi tor>
<managringEdi tor>Mobi
<?PhP ) ?> <copyright.>Copyright 20Ll- MobiIe Learning</copyright>
< / channel > < ?plrp
< /rss> incIrrrir' "r'onf irl .ptrp";
<?php mysql-closeO; ?>

4&l
.#l
 - -tugas KirimTeksUp date. php

include "config.php";
Sidtgs=$-REQUEST t' idtgs' I ;
Siduser=S REOUEST [ 'idu' ] ;
$idas=$_REQUEST I' idas' I i
$ j awaban=$*RfrQUHST I' jawab' ] ;

Stimezone = "Asia/Jakarta",.
daEe-def auf t-Eimezone-set. ( $timezone ) ;

(*ffi: 3'ii*.i;,' ' '' h:i A');

/ /eclto $waktu;
$q2 : "SELECT Eimedue from mdL*assignment where id ='$idtgs"';
{;hq2 . mysql - quer-y ($q2 ) ;
{;clat,r2 ,. nryscJl f t:t r.lr ;rrriryl$hq2);

1l
 <1ink><?php echo "$blassignmentJ " ; ?></fink>
/ / echo $data2 [ 'timedue' ] ; <category><?php echo "$blid-subl "; ?></category>
<description><?php echo "$bIuseridl " ; ?></d.escription>
$t = $data2['timedue']; ; </item>
$y = intval ($t); z"^h6
1;YTJP 1
J
"\
< ,/ channel- >
$t.s = date("Y-m-d H:i",$y) ; </rss>
$te = date("Y*m*d H:i"); <?php mysql*cLoseO; ?>

$q1 = "SELECT count(*) as jum pROM md1*assignment-submissions WHERE File di atas merupakan query untuk menampilkan tugas yang bisa di-update
datal = ,g jawaban, ; ,, ,. berdasarkan course.
Shasil = mysql-query($q1) ;
Sdata = mysql-fetch-array($hasi1) ;
if (($daLaf'jum'l > 0) ll (Ste > $ts))
t
--uploadProses.php
echo ,'I4AAF DATA YANG ANDA MASUKAN SAMA ATAU WAKTU ANDA TELAH HABIS, <?php
] else // setting nama folder tempat i:pIoad.
$guery = "UPDATE md]-assignment-submissions SET timemodified = include "config.php";
'$waktu', datal = '$jawaban' WIIER$ id = '$idas"'; $dirPath =' .. /../htdocs' ;
$result. = mysqf_query($guery) ; $idcouqse=$_REQUEST I'idc' 1 ;
if ($result >= 1)
echo 1; Sidtqs=$. REQUESTI 'idtss'l ;

else $iduser=$-REQUEST I' idu' I ;

echo 0; if (Shandle = opendir($dirPath)){
?> ir ( !is-dir r:,
,,.-:r",n1'."r1xt"XJ.' i ,

File di atas merupakan query untuk update jawaban tugas yang berupa teks.
)
$dlrpathz= " . . /moodledata",'
if (opendir ( Sdirpath2 ) ) {
--tugasUpdate.php if ( ! is-dir ( ". . /moodledata/ " .$idcourse) ){
<?php ?>
.rss version="2. 0" mlns :atom="http : / /www.w3.orgl2005/Atom">
mkdir ( " . . /moodfedaEa/ " .$idcourse) ;
)
<channel>

<titfe>TUGAS</tit1e> $dirpath3=" . . /moodledata/ " . $idcourse;

<1ink>http ; / /m-l earning . com/</ link> if (opendir ( $dirpath3 ) ) {
<description>Sifahkan Kfik Tugas Untuk Update</description>
< language> id<,/ Ianguage>
if ( !is-dir($dirpat.h3.'. . /moddata" )){
<managingEditor>Mobi 1e Learning</managingEdi tor>
<copyright>Copyright 2011 Mobife Learning</copyright> mkdrrf$dirneth3:l lmoddata':)',
< ?php , i

include "config.php"; ......,

Squery = "selecl c.id as course, c.fullname,a.userid, d.username,
U.nane, a.id as id-sub, a.assignment,a.grade from
mdl-assignment-submissions as a inner join md1-assignment as b on
b.id=a.assignment inner join md.f-course as c on c.id=b.course inner
" ",'
join mdl-user as d on d.id=a.userid and c.id="'.$-Cutt'idc'1."' and ^ii;; ;;1,.j:;:::::;"=;;;:."il,
a.userid=,,,. $_cETt, idu, .l . "' " ;
grun = mysgl_query ( Squery) ;
while ( $b=mysqI_f eEch_array ( $run) ) {
Sdirpath5=$dirpath4. " . . /assignment ",.
<item> if (opendir ($dirpathS) ){
<title><?php echo "$blname] "; ?></tit1e> i{ ", ./'.$idrqs)
<pubDat.e><?php echo "$bIcourse] "; ?></prtbl)at o' I ! is-.(lir'($<llrrral lt'r. ){
 lfli}FE*t*:ldd'frat!i5),,l',,,,::::,.,,.i,::::i:i:;':::.::,,,-,..,,

Diupload";
/ /ec\o'1</scripti";
] )efse {
$timezone = "Asia/Jakarta'; //ecbo "<script>";
: date*defaul"t*timezone*set ( $timezone ); echo"File cagal Diupload" ;
:

: 1/echo dat6i'1, j F Y, h:i a'), / /echo"</script>';

"
Swaktu = timeO;
/leeho Swaktu;
?>
$dirtujuan=Sdirpath6. " / " . Siduser;
File di atas merupakan proses untuk uploadfile dari client yang merupakan
/ /echo Suploaddir;
. // membaca.darria fild yarrg diupload: bagian dari tugas yang jenisnya uploadfile.
$fileNanie * $-f'ItESt'userfil€' J ['name' ] ;
,,// neri:a file teqll:orary.yang .akan di.sirnpan di serve\ --uploadUpdate.php
$EmpName = $-FILES['userfile' ] ['tmp-name' ] ;
<?php
// membaca ukuran file yang diupload // setting nama folder tempat upload
$fileSize = $-FILES['userfile' ] ['size'] i include "config.php" ;
$dirPath'-' .. /../htdocs' ;
l/ membaca jenis file lrang diupload Sidas=S-REQUESTt' idas' I ;
9fi1er54re:,+ $-FlrES['userf f ie' ]'l 'tyxre' 1 ; Sidcourse=$-REQUESTI 'idc' I ;
$idtss=$-REQUESTt' idtss' I ;
$iduser=g-REQUEST f idu, I ;
' $upl"qadfiLe = r$fileNQr[e; i .

if ($handle = opendir($dirPaEh) ){
$q2 trSELECT tiniedtie. from md1..asislgruiient.where-id ='$idtgs' ",
t''.,, .$hq2=* mysql;query.{$q2);
' ', $data2 = mysql, feiih.arraV1$hq2) i',''',
'r'.,rr
, " 1''"-ft'*'i,,I::;*mHJi.i,
t /. iecl:rol $*atai t.
, timq4.rre' 1 i $dirpath2='r . . /mopdledata" ;
if (opendir ( $dirpath2 ) ) {
i',' $C ;'$datat[''timedue']; ; if ( ! is-dir ( ". . /moodledaLa/ " .$idcourse) ){
$y * intval{$t);
mkdir ( ". . /moodledaLa/ " . $idcourse) ;
SE.s = date("Y-m-d g:i",$y) ; )
 StmpName = $_FILES['userfile' ] ['tmp-name' ] ;
$dirpath3:" -, /mood1edatsa,1 ". $idcourse;
" sidcourse;
ifi?I:i::31; ; ;"lffitHii'La/
(opendir 1$dirpaLh3 )){ // membaca ukuran file yang diupload
$fileSize . $*l'ILnS['userfile'] ['size' ] ;
if ( ! is-dir(Sdirpach3.''. . /moddata" ) ) {
,// membaca jenis file yang diupload
mkdir ( $dirpath3 . ' . . /moddata" ) ; $fifeType = $_FILES['userfile' ] ['tlrpe' ] ;
j
$dirpath4=$dirpath3 -'l - . /moddata" ; //5t91=date 1' v-m-d' ) ;
if {opendir ($diryarh4 )) { $uploadfile = $fiIeName;
if is dir{$dirpath4. ". . /assignment") ) t
(,! $guery = "UPDATE mdl-assignment-submissions SET timemodified =
'$waktu' WHERE id = 'Sidas' " ;
nkdir(5dirpatlr4. -../assign$ent" ) t mysql_query ( Squery );
)
// proses uptoad fife ke folder 'data'
i:

$dirpath5=$dirpath4. ".., /assignmentr ; (move_uploaded-fi1e($-TILES['userfi]e'l['tmp-name'],''Sdirtujuan/".$upl-

if ,(opendir ( $dirpathS )){ oadfi Ie) ) {
echo "File telah diupdate";
if ( !is-dtr($dirpaths .'n .. /'.Sidtqs)
/il tinrnc\\I ){ ) else {
echo "Fife gagaf diupdate';
mkdir($d.irpath5.'...1":.$idtgs);} )

i! 1l q#1'.(H:!i114!1ffrr,1. j/.. $idiarrl:) (:,.::. ,. . , ,:,iii::,i:!.

,*i;ir;rr*il;rl.,il.*a,i;*ir;,;: :i''::' ' ' ::ii:::::i

-'m- zonel..,.,ir r.Asi4;/Jakartd" ;

S
daEe:default;iimeqone-g,et ( $timezone) ; r

.'lle.cho dAte{iI", j.rp.'y,;r.,1r:.i,p..,),,ii.'i

$waktu = timeo;
/ /echo $waktu;
$diftujueni'$dir"pach6. " / ".$idue er;
I l*ina $upioaddir; '
l/ mernbaca nama file yang diupload
$filetrtame = $-FILESI'userf ile'l ['name'];
/ / nama file Eemporary yang akan disi.mpan di server

i
I
 TAANAGETAENT TNOODLE
UNTUK MOBILE- LEARN'NG
' ces@a0ta!{6
.tutuF

Setelah selesai instalasi Moodle, kita masuk ke bagian otak atik moodle atau
mengisi konten moodle agar nantinya bisa dilihat pada client (android).
Konten-konten yang akan kita kelola hanya beberapa saja, di antara course,
resourse, assignment, netns, dan dotanload. Ketika pertama kali kita
membuka url http://localhost/moodle kita akan mendapatkan tampilan
seperti gambar di bawah ini

Klik menu course ) add/edit course kemudian klik Butfon Add new
category seperti gambar di atas. Ketika button Add new category di klik
maka akan muncul tampilan seperti gambar di bawah ini.
;1tr**,,:::2$&ri.;ifuli[tii*])i:r,l'ri:i.:.l.Jr,nr,,"l"*..i.'..
'&i $*{il{Wi ffi;:::,-,,,r,,trllli
+ C alrr(alhotti.i').r..ir:i..i:ii)kr,,..: ,,,:,:,',!,1 * \

Tampilan di atas mengindikasikan kita belum login, loginJah sebagai

administrator, kemudia isi konten dari moodle. Setelah login hal pertamit
yang harus dilakukan adalah mengisi konten course. Caranya seperti gamb;rr
di bawah ini.
lsi lrrlr .fbnn <:ategonT kemudian klik button Create category. Setelah itu,
rrli;r rr rrrrrncrrl tarnpilan scperti berikut ..
 ,i:iMS
*t
selesai membuat course. Maka kembalilah ke menu awal dan masuk ke
tahap selanjutnya untuk pembuatan user.

[/ser dalam moodle terbagi beberap jenis, mulai dari Administrator yang,
mempunya hak akses paling tinggi, kemudian course creator, teacher, Non-
r Ccf* S.rlt *tiry$
editing teacher, student, guest, authenticatic user. Semua user di atas
mempunyai hak akses yang berbeda tapi bisa di coustimsasi oleh
administrator sesuai peraturan yang berlaku. Berikut gambar pengaturan
role user.
r'x*\,ri*r*Nffil:,,.,.,
fiYl;"t;l, . {]N**,,,_:,*ili;;;;;;;;;; :iliWr,

Kemudian buatlah course baru dengan klik Button Add a new course
seperti gambar di atas maka akan muncul tampilan seperti di bawah ini.

n' ..,-. ',.'*,.-" )' r 'kws l :llril H; ll

":.;. -- ..::::'']it;i'!n

Catqary
S r*il. iltrd ka:_1
, il:xj 0
r,[, ar r€ M
Sh.iuffii e
CM*IDMere
cM Editlah form di atas sesuai ketentuan atau aturan yang anda punya untuk
SffiryS moodle.

o 6
===E 'n
ii 1=i;;=j= &&,*,I,-*e S-O*P Kemudian kita akan membuat beberapa user yang akan bertindak sebagai
Lodp t.nrdg ,4
tacher dan student sebagai percobaan kita pada aplikasi kali ini. Untuk
membuat user lihat gambar berikut ini.
@
ftrrol O iwrskrtumd E
Nnhr oiw€ksiopics, 10Ii]
Cour*saddate@,rs[il k*q [] :sr2i:-]
Hi&n s.lions S . n'dds *ilsN nc no* r dap(d io,m [iJ
l@ilmsloswO 5ll;"1

Gambar di atas merupakan/orm pembuatan cour.ser baru, Iritrttittyit lltuttltth

z buah course yang penamaannya hersifat optiorral atau llililtittr. Sctcl:rlr kilrt

ffiI
.,]X*rsr*f.*--:,*$sir{*F*ti-;,r,.rt,,;,;*,",**-""" .\*S,}$id$ r:, Klik Add/edti courses kemudian klik teknik informatika, seperti
a i C i'.irc.arhosi',',,,i.,,,-,,-r'l.,r,r':.,:,,.r,,..: i * \
gambar di atas. Setelah itu akan muncul tampilan seperti di bawah ini
,rrre.ftt*t::,::,..:,,;...,.-ii,&l",lryti,lLt.'......_.....,ln,,r a,s6ddc{(du ::,i*ff$*i;;,ri:i:,:ffi]Niik;ffiili:&t

Tle Bslrqd M he a1 bt$ 8 &radeE, at ba$ 1 dg0lsl al

le.st 1 Mr 6e hte(sl ,r bisl I qper cis Nedsl d basl 1
,s sb,BUFrc, hd'r'tc(:)
: itmnsi
i Car$&!a* &it'ryr

F-roi di$pky Ab{ 61, ,rhs !i!r.e ru$b*. r! 5.e sr:,*i **r$ i:l
f reil aqMled l]n3 ; ;.Bd j.]
.rui ddi;;
e millffiEl F,eu @a bsd i:l
fm[drFdryP' fl.to**i,@1.sfr lBeBpd] i:l

Kiik Add a new User seperti gambar di atas kemudian isi form, ulangi
langkah di atas hingga tercipta beberapa user baik untuk teacher dan Kemudian kliklah ikon yang ditunjukan gambar panah di atas untuk
student. memberi tugas kepada seorang teaclrcr untuk mengampuh sebuah cou?.se.
Kemudian akan muncul tampilan seperti gambar di bawah ini
Setelah selesai pembuatan user kita beranjak ke tahap selanjutanya yaitu
'ltw$rlgli*
memberi teacher pada setiap course. Untuk pemberian teacher pada setiap rlrllli::il&r.iari:
*d
course berikut caranya.
.,.nn;.*..,-_,...1,, :i.lr}iq*,,i_+ii:. '-:::iri:r-'"i,.i*,o.;, 'rii.!*f*$1!i{6 }- li$.]il*};k$H
e Ci'-ilerrx4l.,rr.i,,_..!rri.fri,r:,i,.rir, '1 *\

S - r*,.
'{**x,.*#-
l|1 'tn'oryn"
r*'*e w*x xt,nlr
.
I

$ e trsiBe

llosuu'
* o ,**'r,*rp
D erjLrhiss
*
t ,seh:

el
Pada gambar di atas kita bisa lihat bahwa belum ada teacher yang Di sana telah ada teacher yang mengampu course C-AA. Ulangi langkah di
mengampu course C-AA. Noh, untuk itu klik teacher seperti yang ditunjuk atas untuk memberi pengampu pada course yang lain.
panah kemudian akan muncul tampilan seperti berikut.
Setelah selesai memberi pengampu pada setiap course, cobalah /ogin dengan
ili,
menggunakan akun teacher yang dibuat tadi. Sebagai contoh pada course C-
€ C a:]io.aibon.,r.r,il.r.ii. i: :ilii.i:.r., !.al.. i.",ir,. i
iwNw:i1si\$i;iw$\r\:iiii::\NiiN.ts$i!$]wry{s9rsillit AA pengampunya ada Nazruddin Safaat, ST, MT. Ketika pertama kali login
maka akan muncul tampilan seperti berikut
Esdre&dsaton ud,-i;I:]Staniryrm Todav1z7&r!4&121 l:

M1

Cenuyr ldrrc:,,
CjttoMi,rerdrku
CouB$: 1,. ir !$
FjB1..c€33: stMar, 7 Aqls! :lli i 11 A Atl l1ll dnys 1 io!,
Lait6ccaer: Frday,2lJanrary2013 N2?lAd i1.e.i

Di sana akan ada beberapa potensial user sesuai dengan jumlah user yang
ada. Kemudian pilih salah satu user yang ada pada box potential user Kemudian kliklah halaman utama seperti yang ditunjuk tanda panah pada
kemudin klik Bufton Add, buatlah seperti gambar di atas. Hasilnya bisa gambar di atas. Maka akan muncul tampilan seperti berikut.
dilihat pada gambar di bawah ini.
.&iei rJffiB;;::r:r,::j:lffi:i*l:lllN$,lllLiw{qiffi
..P,!:l!:*4:llilii,..,:ii
€ g il:o..rhon *\

St,tclirlr itrr l<lil<lirh (:()lrrse yang diampuh si teacher seperti yang ditunjukan
lltrrurlr rli irttrs. Mirliir ;rliirrr rrrtrnt'rrl tarnpilan selterti berikut ini.
 .$...1lv81 :::.....--...rttt':tt.i.Y:ll\tla:lilill L. *- l-e +e:{*
+ C r:, o.arhcd. . *\

ssrmry 0

5-*=-= = tllt. :. :- ::::..3.1_ {:.1: ]a -_a & € :t @

ilstdaja.i tmtang Paanqkat tubile

ffi

I t{bn1 & biusrir

t.r3.br: r.::r:fkb.,

Kemudian klik tombol Turn editing on. Ketika tombol itu diklik
maka si
upload, dll sesuai role
teacher bisa melakukan create course, topik, tugas, Hasil akhirnya seperti gambar di bawah ini.
yang diberikan.
.'..q,lr*::1;.,,,:,r.,-.1:l[t{1.&tli* -- .rl*,a*.l**m !11**$:er*{a1.1ffi.1)]:r,..Jffiffifff11:KL&- lx*c$r
Kemudian buatlah beberapa topik, Ttle yang bisa di-download,
dan tugas, S.C'l"riocihoni:.,i.ir:!r..rr:,:.r, !l\

berikut caranya.

,xi.'r.rt|1....,r,,::n'ri11.9qlqi&:
.i1tu".('*-s rr*siwt&:!Nlu,-:-:':,J$Wi lS$.i:iaM--Sr&'W
*{
+tC ,oa.i{

Kemudian buatlah file yang berhubungan dengan course yang bisa di-
dounload student. Caranya teacher harus meng-upload file, file-nya bisa
audio, uideo, atau dokumen. Caranya dapat dilihat pada gambar berikut ini.
$tr1 Rep{.
$llasieiom
* g !,€rdNrer.a.ed

Pilihlah Cotnpose 0 tcxt;lcr7c pitclit silllth sitttr tnillirtt' lllilllillllilll

st'pt'r'ti
grrrrrlrirr <li irtir"s, licrrrrrtliirrr isi.lot'trt-.litr',tr llvil st'1lt'l'ti g;trttllltt'rli lxrw:rlt.
 l'r'L-".,-,,",. :iit.la:iliitlk' T:". .,..]!:\i ll:{$lSi:S;sSrrrrrrrrrr;M::!:9&.W
*&

.tYed{$lliwi{ti

:!!oEmnas k, Sl&

t.q.'
a.) I irri-3ri.rtar5:r
.st
arnrs,:F ale{ Fq! Airl! ri.e $.n'i.sday,
I Jeurr 2alr. {2 il&
(' r. *$-r ..m OAn*&l*!
ar.erbradr-r.,r
'r Llfoi !r':.,xl.rr ft

Adr ad $S l..L^m:-ra?P

€, Aea,P.iiiliP 'l{, irtrilr,u',

Plihlah Link to a file or web site pada combo box seperli gambar di
atas, maka akan muncul tampilan seperti di bawah ini.

Pilihlah folder dokumen karena kita akan upload 7t1e berupa dokumen,
maka akan muuncul tampilan seperti gambar di bawah ini.

Isilah lform sesuai perintah dan klik button Choose or upload file Ittitl<tt
akan muncul jendela seperti gambar di atas, kemudian buatlah/okler uploed
sesuai tipe data seperti Audio, Video, atau dokumen. Maka hasilltyit ttl<ittt
seperti gambar berikut ini.
Klik brrltorr Upkrnrl t lilc sehingga hasil akhirnya seperti gambar berikut
irri.
 Sama pada seperti pembuatan topik tadi, pilihlah combo box add an
activity dan pilih Online text. Kemudian isi form-nya sesusai perintah,
sebisa mungkin pada judul tugas online texr diberi label atau embel-embel
kalu tugas ini jenis online texf, seperti contoh gambar di bawah ini.
i{trr.*IXSS
{r {,

1r&...:.&*+re G.-'.i,e8..{>
=,=..== ,Ii :;:l;is:s IE
l. Pcngefriai Sttem Opera\r I 7. ieh{k.rn ]--rn ailten ap€,nti I
Apa l. Aoa
rGmn ![r!!]r OF a\i IJq (rp.. l

€@

Kemudian pilihlah salah satu dokumen seperti gambar di atas untuk

menghubungkannya ke outline. Kemudian save. ,::,r,:,:,;:ii,1',:':l11ll:i:1tlfr;'ti :i1::rrrrr::rrri'1r:;r"rrrrrrrrr:i
Grr)upn,deo- rbr:!.
,'1|11117r11;,:ffi
Kemudian buatlah beberapa jenis tugas, di moodle ada beberapa jenis tugas,
di antaranya online turt., upload single file, adcance uploading of file dan
ffiine actiuity. Untuk percobaan kali ini kita akan membuat yangonline text Ikuti seperti gambar di atas.
danupload. singlefite. Berikut cara pembuatan tugas. Kemudian untuk tugas uploa d single file caranya bisa dilihat pada gambar di
bawah ini.
& ij11a'. itl:i.d.:!ar9:1,r,1r,,,.,..-'.,1\Ni;.-.:.,,,:,..,1\$1 ':lilill;l(skgiW
i:\

A.i!!in!f: rrm.' 1!F9 tjdrad a .Ei inr I

lji:.tillror' S

$re:]wrFsrffi:]Nrr*lx*s *isl s,l #sl

r#ilil ffi# riEss tk *s+p- sQ#*rp ,-a

arc
i ?! Jinu.ry?012 u? 43AM Grn& 0 lic a
li .!rr !ix,l r',{r{r,, 1 irr'
Ayerhbbftom ,:;]i--{ ';.j 20r a: i2;l $ a l Drsab[
bdddt,,, t.b_j ,;.,..r 0.. ..- n,so,e
(D Addarce.u.. i: O Adds,-r'!
P,*n,n'c i&mr, or, \ ;

Abw onilmrnrry ra Yrs

I rntrrrnhl,l rklnhr\ (i il)

csh6 io4L aat[.|

Caranya sama dengan yang online text, hanya memilih pilihan upload a Maka akan tampil awal ketika pertama kali login seperti gambar di bawah
single file pada combo box add an actiuity. Usahakan dalam mebuat ini.
soalnya dalam Text Mode seperti gambar di atas, kliklah ikon yang ditunjuk
panah untuk beralihke text Mode. * g ::r lo.ahclr
X}l$:l:lllffi**il **S:Aal& *ffiSki.:.r:;i:S:iliiffi:....\**:\.'&m*.-..: +*,*

? oo $r *ank8lecnr.me ln *€ pur sMrd? | s;* pxsoia : \ev* loJ la" ilr l

Hasil akhir dari pembuatan topik, tugas,/ile download

nFl &S
O ,. e .^ .j,6Nryd

!16 [M,]!iil':li'il'iilr'lilil
ffi;,;, .,.,.,,t,,1,,,t.,.t1:ffi
*Eliin'a{!'rrri',,':r',rlr'''

ffi#lKi***#
i{{S*f,llrllrl,',1""'1,1,]i,1 * irrs n ,r'r . tt {
flo ns nas *n Fosre

#$lriidiii*'rrr,','" rrf
$r h.sasr6!4
nFus I Egidiiiiriir*r,il
tf
.iB i *) r.r. a1
t Fd6r i Fei,,.."
ilaitsif !8sliltl,r";;,tirrr,ri Biul[r1 +tdxi
11

: ;a: r, atu rdrn :,rre trs

lwiiill}i*iii liirllliiiririrr.r Bi4fr!n: rIdxn ll i.&r' l;ta6r
Er.rp[rA3 r+dxr
i6" l
6FrEroF(n1.+dxr
Fl I LL ioFlt { . $ d X '
sFta ror(vifu I rt 4x,
:::)l
i:rrinsAr rodxri
*I{criiprrd snlr ariril, $ 4x, I ,*$l{9L;:r-:
6 Add,rerltrc -l O Addaflddr l.:.1 &11!! tlsdes&y,
sin.e
Tampilah di atas menandakart student belum melakukan enrol terhadap
course yang ada. Caranya klik course yang ada. Maka akan muncul
,! Jituary!01?,0?i1M
lfA! !r r"i ,).1
A6r*3 '#:
S.66up*
,..,1: 13 Adaaresr,.. i-i r1 e,taarrr f;l
:,i.::
tampilan seperti di bawah ini.
togxAl
f
ry
n
O AddaesnrP ; 6 *a*-roy l:l t

Kemudian cobalah enrol course oleh student, hal ini ditujukan agar nantinya
studenf bisa melihat konten moodle melalui c/ient (android).

3 , C {lto(atno!::1,:.,:!,,,,:...:ii,rii,. * \

Reirmlng to thls web sate? 16 thts youri6l tlme here? Setelah itu cobalah login pada client menggunakan akun studenf yang kita
!Q6 Mr6 !$rf,g !ou. ,sefii,re .nd @s{or( Hrl Ffi tu( .sftr pI ne& lo 6k a diruF b . de , N a.ianl to,
tr.iss b gunakan loginpada ueb tadi. Berikut tampilan client-nya
{wee mst b, eirnw in }nff br.sr{i, youMns fr 6 $.b ste Elcn.l ihe hd*idlal rdrffi sat al$ hile a.nelk
'ln.ohril r.y". !firh !e {on\ @ unD Be' riere afe tre Jre6
u** roFl .. l Urnd$e lrx&.&n, re,b S ylur &6it
e"*o* .:::::l':::....-r:.....rren....]
&sw drs lldrd€l! ser! !o ts ffiri**5
{es ye. ei and .ki s rk xlb &ri i re&is.
You.&rsil $n k iontM and !o! sn & rqr& 6
se {@.s @l a{s gmt a.c6 .ltre seel 1& rn{* pu **dl lo 8{6ipde d
tr @ ..e A.s!6 re an lsolrunt Sf - !* he om ha, your lkhtr nas
lrQs* ryslli we.@ 1i6*{bndpuh&.ee
Y0r.ao M a(s$ he tun cilff ars ns on t6usl 0n[ ng h sler
pr*6nduxrffi adF$M{inl&lmonlhisp.!ei6rqrndM
Fqdbn sr t*.nire o. Fsw6, ar.*a ertrrle w bv. srdsd ilr
l-ld,lFiP;iiii! 1

LOGIN LAH SEBAGAI STUDENT O

Login menggunakan akun student. Maka ketika tombol login diklik sistem Jika kita klik salah satu course maka ia akan menampilkan topik yang ada
akan membawa kita ke halaman utama seperti gambar di bawah ini. seperti yang dibuat pada u.,eb tadi.

Ketika gambar Materi/course kita klik maka akan tlunt:trl li.sl t'ottrs('v;rrtl{ l)an.iika sirlirlt srrlrr topik diklik maka akan muncul detail topik seperti
telah di-enro/ tadi. Seperti gamhar berikul ini. garrrllrrr lx'r'ilirrt in i.
Kemudian kembali ke halaman utama dan klik gambar tugas maka akan
muncul tampilan seperti gambar di bawah ini.

Gambar di atas contoh entry tugasjenis online textyang berhasil di-entry

atau dimasukan.

Ada z jenis menu tugas yaitu Entry tugas untuk enfry tugas yang diberikarr
pada student dan update tugas untuk update tugas yang telah di-entrrT tiipi
update tugas memiliki batas waktu. Batas waktu sesuai yang diberi lcuclrar
saat create tugas. Jika kita telah update-nya atau melewati batus waktrr,
(ilrnbirr cli atas adalah jenis upload tugas single file. Di sana kita bisa
maka sistem akan menolak.
Ittcl:tlirr l<ir n /rrorr.r.sc rl;rl ;r scsrriti di mana kita menyimpannya.
Setelah itu, masuklah sebagai teacher pada web untuk memberi nilai pada f
tugas yang telah di-entry. Seperti gambar di bawah ini.

rr Asril&tlstom:Firlr. :l.,srqA1?. d3l0S

:\ tu366irrr&!,)F$.aqalt.0l:0M

Kemudian berilah grade seperti gambar di atas. Sesuai ketentuan dari

Lihat yang ditunjukan panah itu adalah tanda telah ada yang melakukan masing-masingteacher. Hasilnya seperti gambar di bawah ini.
submit atal' entry tugas. Klik tanda itu, maka akan muncul tampilan seperti
di bawah ini. nr. e,r"s:r odhrL
a C i', ro.,,ion ,.Sry$$rye*$: N&Nsw r:\
.Ii..;6,u";'il;.;"'\i;rt*e{ariidl!iit: *ffi$tN il*Sf3\-W

Kemudian berilah nilai atau grade pada tugas yang submit oleh srudenl
dengan klik tanda yang ditunjukan panah di atas. Maka akan muncttl
tampilan seperti gambar berikut ini.
Kemudian lihatlah nilai melalui client buktikan kalau sistem bekerja sinkron
dengan seruer. Login ke sistem di-client dan klik gambar nilai pada halaman
utama, kemudian kita akan dibawa ke lisf course di mana kita membuat
tugas, misal pada course C-AA, maka akan muncul tampilan seperti berikut
ini.
 +g

Pilihlah tugas yang telah diberi nilai. Kemudian akan muncul tampilan
seperti gambar di bawah ini.

NITAT
Tugas A1 Online Text

88
Dari gambar di atas kita lihat hasilnya telah sinkron antara clienf dengan
seruer,

Jika punya Anda seperti gambar di atas maka, sistem yang Anda buat telah
berhasil.

Kemudian untuk menu dorunload, masuklah ke halaman utama pada client

(android). Klik menu download. Maka kita akan dibawa ke /rst course
untuk rnemilihTtle berdasarkan course. Seperti gambar berikut ini.
Buktikanlah dengan yang di-seruer, apakah hasilnya sinkron'

Kemudian kita coba update tugas. contohnya rlallat <lilihirt p;ttlrt grttttlrrtt
berikut ini.
 BAGIAN 20
WEB APPS HTTALS,
JQUERYtvtOBtLE SERTA
Pilihlah salah satuTt/e. Maka sistem akan membawa kita ketampilan berikut PHONEGAP
seperti gambar di bawah ini.

Silahkan Kliklink di Bawah Ini

Untuk Mengunduh File

pqJ

Pada bagian ini akan bahas mengenai Mobile Web Applicattbn, sebelum
lebih lanjut mungkin sedikit pendahuluan mengenai gambaran umum
tentang mobile web apps mobile. Bahwa pengembangan aplikasi untuk
mobile sudah diambang perubahan secara besar-besaran, di mana kita
ketahui sekarang paling tidak yngg mendominasi sistem mobile sekarang
saat ini irclalah ios untuk iphone/ipad dan android, blackberry serta
winrlows pltortt'. Sclitma ini yang berjalan aplikasi yang kita rancang untuk
iphonc lt'ttlttttt';t tirl:rli lrisl herialan di android dan di os rtto6ik'lairlttya,
begitu juga sebaliknya, sehingga masa yang akan datang akan diperlukan
sebuah pemrograman atau pembuatan aplikasi di mana bisa dijalankan di
seluruh os perangkat mobile atau yang dikenal dengan istalah cross
platform.
Dan permasalahan di atas dapat diatasi dengan membuat aplikasi dengan
HTML5 sehingga dapat dijalankan di-cross platform. Di lain hal, cerita
teknologi di pemrograman di komputer pc biasa juga diawali dengan cerita
seperti pemrograman di perangkat mobile, awalnya aplikasi dekstop seperti
aplikasi buatan vb, c+, borland, dbase, foxpro sangat pouterpul, sehingga
pada masanya berakhir atau berkurang digantikan oleh hadirnya teknologi
web (php, asp, jsp, cfm, .net, dll), sehingga aplikasi menjadi berbasis ueb
pada umumnya, begitu juga dengan aplikasi di mobile, pada saat ini
kebanyakan berdiri masing-masing, android dengan base programming
dengan java, sementara ios lebih dominan dengan c, sehingga sudah tiba
masanya membuat aplikasi yang dapat dijalankan di multi platform, dan
jawaban atau keinginan itu dijawab dengan HTML5
Apa saja hal-hal menarik yang dimiliki oleh html5, point-nya dapat kita
ringkas seperti berikut:
. TrulA crossplatform
. rich content: 'video', 'audio', 'canvas'
. ofrtlene storage
t Cache Manifest
. Location
o Websocket
Kemudian teknologi seperti Javascript (ajax atau jqueryjson) dapat
digunakan di dalarn tagging-nyahtml5, berikut ini adalah padanan yang
sangat banyak digunakan bersama HTML5 yaitu:
. JavaScript (Jquery)
. CSS3
. Deuice API Working Group (Contact, Calender, Media Capture
(API/HTML Forms)
o Cross Origin Resouce Sharing (CORS) seperti JSONP
WEB APPS dengan HTML5 8r CSSS
Bicara tentang apiikasi ueb adalah salah satu software yang sang,at populitt'
yang paling banyak digunakan programmer untuk melakul<art uxlirrtl
aplikasi ueb yaitt Adobe Dreamweavcrs. Sebagian lrcsirr pt\r(1,'(t,,tnt(,'
apalagi programmer useb pasti sudah familiar dengan adobe dreamweaver
baik itu programmer php, jps, cfm, html, js,vbs, dll. dreamweaver sangat
enak dan comfatible sekali dipakai oleh programmer, tapi dreamweaver
dipakai oleh orang yang akan mengembangkan untuk aplikasi mobile
mungkin agak lain bagi orang lain untuk sekarang.
Aadthln (, Ajay {un}ar, 4lnin Dumesny, Alnn sonE. andr.a! }vud! aueesh Ral K u,
Eob E*terdiy, (hirles Antio, Ch.is Ennk, (in Elar, JEff Booher, Justin Pa1m. la! 5i09h.
Nl.nikifldan s. Na..yan M. Pann.e.relvam v.rdthardjan, Rtsndf Ednrunds. Ridqn}raFl C I
Ralmond L!n. 5<oS Ri<hdrds, 9resh Xlma.. S.nlarai Umap.thv, vit Mitflick,
vr.trnnaditya oha.al. !rshikha vardla. Ydto Biler
Q6kyEqirceE
akir. x'kka$a, Andred*enl &rLn Ka:a, Avni!fi Gupta. Afelha Anrin Ddstagirii
Ehnrqava S, Corrinnn Kink. Oatrd Alc.l., Debbie Suruk!, Dr!yd E f, oonald Eoolh.
Eflly Chanq, I.ini Mrdery.h, lanaki Likshmrkrnthan. lung Chor, llslin Rain{ater,
Luiz o. L mi, N o 9irafta! &rtlra M v" Pihu 5harBar RiLa NGhro. 9.dh.k SnEhal,
Silas Norbu Lep.ha. 5uhalatha Sekd., turai Ajila. Iakesh! H!.al:hl, !do ?6dll!
veeresh Hfemith. Vrn.stTruouq tan Ngn" Sinda Hunng
E@k€.iry ffidaGn€Dt
anind situu.l Ed*in, la, Londo.. l6rqe latlar. Lil) l*en, Nr.k !nlbatken,
Peler ftleis, Raolaran Gorurrdh!, 5ao.Y Bannur
Dengan hadirnya HTML5/CSS3, sehingga dreamweaver sangat cocok sekali
dipakai sekarang, hal ini karena adobe dreamweaver cs 5.o sudah memiliki
tampilan untuk multi screen uieut (desktop, tablet, smartphone) bahkan
versi 5.o ke atas sudah support dengan tagging html5 terlebih versi 5.5
sudah sangat support sekali dan sudah memiliki plugins untuk android sdk
platfrom sehingga dengan dreamweaver cs 5.5 ketika testing aplikasi mobile
kita tidak perlu buka eclipse lagi, tetapi bisa langsung running ke avd
android kita.
Untuk contoh berikut yang digunakan adalah adobe dreamweaver cs 5.5
yang sudah memilikip/ugins untuk membuat aplikasi natiue ke android sdk.
Berikut adalah cara setting dreamweaver cs 5.5
. Setelah adobe dreamweaver 5.5 terbuka, click menu site pilih new site,
kemudian buat nama applikasi/rrebapps yang akan kita buat.
o Setelah coding web apps-nya dibuat, untuk menjadikan menjadi aplikasi
natiue android, pilih menu site - mobile application - Configure
Application Framework sehingga muncul gambar seperti berikut:
 r$]ry.rrrsr,r,

. Masukka\ diT'ectorA di mana android-sdk Anda berada (sesuaikan

dengan sistem/older android sdk di komputerAnda).
o Untuk menjalankan/membuat aplikasi natiue android, pilih menu site -
mobile applications - build / build and emulate.
. Aplikasi natiue android telah terbuat dari aplikasi uebapps yang Anda Sementara tampilan apabila dibuka di dalam tablet pc seperti gambar
buat, untuk melakukan instlasi, dapat dilakukan d.engan mencari Ttle berikut (buka browser tablet pc android dan buka broswer dengan alamat
".apk dari bufld applikasi kita ditempat folder aplikasi natiue-nya di http I / ro.o.z.z/citrus).
:

build/package.

Note: sampai buku ini diterbitkan, masih android-sdk saja yang sudah
memilikiplugfns untuk natiue di dreamweaver.

Aplikasi Cafd
Berikut ini adalah salah satu contoh aplikasi dasar yang berbasis html5 dan
css3, contoh aplikasi ini dapat Anda download dari situs resmi adobc
(www.adobe.com) sebagai perusahaan yang mengeluarkan softtuare adobc
dreamweaver.

Langkah I
Copg-kan folder citrus dari cd kedalam sistem folder komputer Antla,
sebaiknya berada dalam folder httdocs sistem apache, panggil index.htrrtl
dengan mengetikkan perintah (localhost/citrus) di browser komputer Att<lit
sehingga menampilkan gambar seperti berikut: Senrentara apabila kita jalankan di smartphone akan terlihat seperti berikut:
 i[ c]rai a!'ffisi]avdi "sms, .k tt (d]le€ti,sia eif q]* sfr'l$e. &tga,rrgfid i'*iBsa&9 yaiu'$--aa,.r']!ir, la{ttr
lv,ebsitx",A$:|reatriwd.ay*r,sitiilimUql*Vtrasrrrbnad,iiCi'idi,S.ilairi;dt$4tdiir*.&rirlg*r:r,'.
resl6t$ar tihlirE,l*ain.ratore shS,!.{i&*}( $n file,s, ae-d &r,rdd?6,{e.r{t&iB']r{!n qrgerys
\ylrerts yqlr ${}3t ttlE sMilii-fi,las t6 itne.,wek'. ,,.,,,i,i..... ...rt.r.
H;re tidiitr:It,.irdted $hrdj&ci', fBifdrer 6,n'd, a nawe f,qi'*ss Qii&g!!is$-{! *ft&;l,' .i,.. I .':iil::' .. . :
''..,:.i.'ii};'ic.*",'':...:|.:.:.:.:.:.....
.,',. ro*"l xtirr,qiii:a,. [E,p=EGE!i:@{l:s::r:]eqyi=:6l---l- I e

[..,;,,.r' ,:I

Setelah site terbentuk pilih menu eksplore dengan cara clickkanan nama
site seperti gambar berikut :

lh*rkln
Aplikasi ini dirancang untuk berjalan normal di tiga platform sekaligus lJids {herk ll01
(desktop,tablet pc, smartphone). !h!:*i {ir(Led Crt !}..
ii{,ll Edck !a,$e
iorrp:re *rih iemcte 5*n'*r
Aplikasi di atas dijalankan dengan memanggil dibrowser baik itu di tablet pc
Site-Speri{ic aode Hint5"..
ataupun smartphone, berikut ini akan kita bahasa langkahJangkah 1)rrhrcni:r..,
membuat aplikasi native dari sebuah aplikasi web mobile. li:irl3-!'lrnihr.ni:. lntormitre*
. Buka Adobe Dreamweaver Version Control

. Pilit menu site - new site dan isikan nama aplikasi web yang akan kita Ctcaking
Turn off Rtad Only
buat seperti gambar berikut: Ls(Ete on RemBte 9eNe.

Prsiea in grMer
Ih.erk Linkr

^tt li tJ^'cnle:
L"ttt'r'
.t-:'.j rn ........

Lxplere,,,
Refrsh Ltrdl Filet

a Paste-kan di situ,fi/e-f le daifolder citt:us yang ada di cd.

a Kernudian untuk membuat aplikasi natiue-nya dengan menge-click
nrcnu site - Application Mobile - Application Setting dan isi
st'1lt'r't i gitrnllitt' llt'r'il<trt irti
 MO. .otr.htrotu!.(6t
lI]&, #&
pq
k]w a&* tu ?d.lryr.dl@'6tear&aF-

le4ahtffi
l1#&.:# : - ". rd3lMi!#'.!),w,
'k$r.@";Sn,l@ff
eErl€r!4y &*$ks.d&$rle
o[us-'a'e
qa&
d@r,b
"$$ r@i .lwrr!ffid
lsyM4&e1
4{&b d6&tsrir
ra1Mrtsd
&jg. .: iouer{ jQuery Mobile Overview
(hr|M. !.rsn: l.o
5/@I^L-' A Torrch-optlmlz*d web Frsmework ;qrierys mobile strate8y can be
@hl(dtu:
c;lk.surr'nllitpdt4 &
for Smanphone5 & Tablet3 summarized simply: A unified user
rareiPah;
interface system that works seamlessly
16 lageiO! v.ls$ across all popular mobile device
Me, ,r.. .,,,-n |!l!ifi$i!,&,] W*Ic0rse" Browse the jQuery Mobile platfarms, built on the r0ck-solid
ccmponents and learn howto make jQuery 5nd jQuery UI foundation.
rich. accessible, touch-ft iendly Focused on a llghtweight cadetrase built
w€bsites and apps. on progressive enhancetnent with a
flexible, easily themeable design.
Ihe critical dlfference with our
approach is the wiele variqty of
Intrn to jQuery.Mobtle !]tq!ils_-I{&r tfa rm s we rg t{r r&et ng
l

with jQu€ry Mobile. we'vs bden working

o Selanjutnya pilih menu site- application mobile - build - android Quick start guide
haid at trringing jquery support to all
mobile trrowsers that. a.r€ sulfie iently-
atau build and emulate, sehingga file natiue android terbentuk. Buka capQble and have at least a naminal
Features .ai]]ount of market share, In *!i5 way,
folder hasil package application natiue-nya, cari 7tle apk-nya dan we're treating rnobile vyeb Lrrerw3ers
pindahkan ke folder c atau d, sehingga memudahkan kita untuk A:cessibility exactly how we treat desktap web
browsers-
melakukan instlasi dengan commandlineke emulator dengan perintah
adb instafl c: \ .citrus-cafe-debug. apk

Note: perintah itu dilakukan di command line (cmd) windows atau Untuk menjalankan jqm di
terminal linux dengan posisi di platfurm-fools sistem folder android-sdk smartphone / tablet pc bisa
Anda. dilakukan dengan dua
cara: yaitu dengan
. Cara lain untuk menjalankannya adalah dengan teknik import aplikasi memanggil jqm dari seruer
natiue yang terbentuk ke sistem utorkspace eclipse kita dan melakukan ffiIe jqm berada di seruer)
running projecf dari eclipse. atau dengan memanggil
jqm di mana jqm sudah
berada dalam package
aplikasi project yang
JQueryMobile dijalankan. Cara yang
JQueryMobile (http //j querymobile. com/) adalah fr amew ork yang berbasis
:
pertamafle jgm berada di
HTMLS/CSS3 dan javascript untuk aplisi u.reb yang dijalankan di perangkat seruer (folder httdocs
mobile. Tentunya Anda sudah sering menggunakan atau paling tidak pernah sistem apaclrc) sehingga
mendengar, bahwa dalam membangun web kita bisa menggunakan kita dapat memanggilnya
fremaworkjquery, begitu juga apabila ingin membuat aplikasi ueb untuk seperti gambar berikut:
perangkat mobile (smartphone/tablet pc) kita bisa menggunakan
iquerl,rnobile. Seterusnya iquerymobile akan kita sebut dengan iqm urrtrrlt
mempermudah penjelasan selanjutnya.

Berikut adalah gambar apabila jqm dijalankan cli android.

Aplikasi Barca Fans index.htrnl
r.. ,

Berikut ini kita akan membuat aplikasi sederhana dengan menggunakan jqm
sebagai framework-nya, aplikasi ini menampilkan data-data pemain
Barcelona dalam bentuk /isf serta kalau dipilih details akan menampilkan 8:,.

identitas pemain tersebut.

1$. dbsCy>

Langkah I L1.l
13
t3 ,
<Ci? id:"erl}:16}.eelistFaq=" Cnle-role:"Feae" }

<dit Ctsta - rsle="he sdt:. " dala-pts i E isn="i ixec" :

Siapkan database yang digunakan, karena data-data yang akan ditampilkan 1.$',' .{h1>Eq BercelanB{,rhI>
{,r'cir>
dalam aplikasi ini adalah data-data yang berasal dari mysql, lakukan irnport 1?...
databctse dari cd kedalam sistem database mysql Anda, sehingga akan <.iit daEts-r*le-'c$rier!1">
<ut ic:''e8fr]-itrE€tirf," lat6-xn1e-"1ir!i:eq'" csia:i1f,et="4sue"x,rui>
nampil seperti gambar berikut ini (dalam hal ini menggunakan GUI Sqlyog {/l1V}

dalam mem-uieu database yang digunakan). $,{. .

<r.Civ>
{ririp! srr:*l B.j j {ue:}:- I 3"}.ti"3:riFi}
tscrilt s:r='"1s/ldBE:li-*x,t:iIe-1, llrtl -sin. I s",:{.r 3traEl:"
*.s. d 3 f, .1 p! F Y c-" j s r/er!_l 3tr"e e 1 ! 3 t' i B " ri:.' e e riF: >
]s t scr ili sr a-:"1 3.i erX]l31'eeCe iaa 1 5 " j s " >{,1 srriFii
dsLrlB! src:'"i s..irpcrili 3 ! - I s'' >{,r 3 rl jpl:}

-,*^-".J
t,rhisl>

Perhatikan coding di
atas terdapat d,ua file pada folder css yaitu
jquery.mobife-1.0rc1.min.css dan styles.css. .fi\"
j query . mobi le- 1 . 0 rc 1 . min . c s s adalah bawaan dari Jramework jqm
yang telah kita dounload pada tahapan sebelumnya. Sementara berisi
seperti coding berikut:

s\rles.css
,.. *' $ti:ti$).'i...i::yrtr.'i.'r ,:: I
P f]aar: aEit'.-
i3 tr}Bdd".ira,q-riglac; l,&Ilxi
Langkah II "* Fact.Cift{lr*h,*t:.t.cm.: A6}}}{ i

Persiapkan;fi/e html danfile javascript Qs) seperti coding berikut ini: . 'T t 1! r*l&F: i...t.!"."' {: r:i: :--1'!: tl i: ::i. * }:i -l
..1..

..",,r.$ r mBr€lan-{Gtr}: SIsx i'

,.,,rr$ :., i : mB r,q-i-rr-13*'h E cm i SI:"K ;
tu
11
:-Ar 1*af,iii!.,:rli:.i...:ri: i
a.3 cae*r: htstt- ;:

rE ]l

St'lirrrirrlnvrr tlapat kita pt'r'ltltil<an.7i1c index.html itu memanggil s.flc java

sr'r'i2l <lt'rrgrttr 1lt'r'irtt;tlt llt't'ilirrl :
<script =tq=' j s/ j guery. j s " ></script >
<script saq= " j s / jquery. mobile-1 . 0rcl- . min. j s " >< / script> employeedetails js
<script src-" js/employeelist, js"></script> r!a{r:fr:;
<script s1'6= " j s /employeedetails. j s " >< / script > , {' il*"lri:ilali' }, Ule i
!
| luclion {rxri I
var i.C = :rtll:lfars{) ['iC"];
<scripl src=. js/reportl"i st . j s " ></script> ; . get.:501i { se rrlceXlL ^f.
), i= -' I ir rrl: tr.l.''aal.

]);
jquery. js dan jquery.mobile-1. 0rc1.min. js adalah bawaan jqm fwcli@ iis!,]a'rljELElee {deta} {

dan3file lainnya berisi coding berikut: ,ar er8lolee = Cata,itm;

. rEql .
^!!60r

ti'iE";I :_i::t::' ),ati:i'i::','!1r.,' - eli]:]::,t:ct!*) ;

$ {' *iuilliae' I .terl lesplclrE. ii$tliBtr r " . enlLalee,

employeelistjs $ i' }{,rlcl3eirtle' ) . irxt {erFl8lee. tj.t1e1 ;
Lisxllffi } ;

| {'ic:i!'l,trxlieryl.r}e--.cj.ty) ;
r 3E:1'1:eL1Rl ='rr:!:. -:rdin:s! iI:::Ltr\ :::',i:?:'"; .^nE1l! l!ryl. rc i"r.rtlr-c\'

i{ rf i€r$IciEe,aannEerll:.)] {
rEv Erl
^t,FFr' ;{'*aiilr{1it'}.illenlt'{ii.}1. h:ri=.:rEirieedrr::r1:.hitr1:il=' } erpltfer,mns.ge:IC . '"Hh.ltiit$ Siir;::' h3)'
i! (;)'-:4::iee,[r.dl:]fijitllrT - '- eT-cl:€,H:al::L:3::iilr -', t. i. ,I)'l;
; {' *.empi*}relirtFagt' } "bilC (' pafeixit', fusfi sn {31erl} { I

getErglcyEel,ist {} i if {efiFlcyee,ftp*rtclunL)i} {
$l ri:: --li''l,e!!€:j{' --).; i:.:- r:(:lrl-J:,r,i[. ]:- - :r;ic;::.:l - "'..1ir] r:; "::::: '"eia:::. ': -
]!; - "rrl- r.E r. ^ / :! '' l ,
rrl, ',r\' "
:1. i
fuctictr getEnplslEPli3t{} {
!1 ia l6ril^.eE.n::l\ I
1.i:.,,. S.geLJS$],I{iefficeuRt +'{Etenplij,ees"FhF', imction{data} i "'r .i.:):,ar:< ni:' "
i: ;{'ier;i:iee::3: l;'1.:eE;el};
:l arn_.(-aEa = n:r:1tEii,
:j ;.eeEhle[r.1rlee3, fuctlon(1nCex. ErIl:;ee] { St'*a.ar..hit'l.apFenCt)<iilii Lrr:-':n1-:,r' - e$f1:ie::xnr.L r'"xI3)Errr1{/h'r}'a
l,i $('iEtrf.t?E:Llir'),iFpend{rd1i}<r hHi='eilpiryeejleiail3.hlrlliC=' + er,p}sye'e.iC i '"}' r
<F:' + e[$.1alae,eNr1 ]'<,/!).;,ie:.{,/1i}'} ;

l{i,rq irc=''Fiisi'r + essltye:.pi*turE + lnila' + il

l!'. .afr.Errn.!i i

..1$. 'th,l)' + erElclte.iirstllffi + " + etrSlslte']aEtt{ffi -t '{lh'}}' +

;l'ti::1::Lli: i,aptrsdt (::\<e h:r!=":rl;' l enFl!r"ee-elii.efuine + "'xir3){al1 a::1:el,'h:)' i
iF:' - etrf1.i:e."j.rIe + r('f)' - rtr:' - ex.FI:le:.:::lceihaie 'i- nv ;r.'lj
1! :?!,er:-l:5-'li-li-t;B:":' - erylcTEe':ell:t:affir = '{.:Fanx a)a/1i}'); ]
13,,r,,. ]); ;*
:1 ;{'*iriicri,iri'}-apperd{r{l:)li r:::-'-rI:' r er!1!Je:,r:11Fh:n: r '"}<hl>C.I1 leii{/irl)r }
:i, +i'*efitr'lcleEiist'l'lj.itvieH{'reix:h'}; r.r'' . arFll EE _.ll:h_-o -

ri! Il; ;l'*a*ierl,iii').aFFlnC{r{li}ia h::i="im:'+ enELcyee-*1.llhrne 1 ''')a}l}S}t5</h3}' i

'(! ' ea!L:l::.ceiltr,:1e - :.tr, i ,1i )j
t: )
$ i'*ecir.:Iii:' ) -L9iv1er(' :!f r!str') ;

File js di atas memerlukan getemployess.php yang berada pada folder l1

€{ tulclron l::U:1)1:! (l {

dir e ctorg f s eruices pada sistem htt do cs op oche kita. \4. r6i!
aar hashes
- LJ, u:nu,
- rr:lar,iicalr5i.h*f. ...ir:.:l-;.I:aat:rx.hr::.. (':'] + ll,i:flr:{';'};
{1. forier r . i; i < hrihe3.lenglh; ilt)
Employeedetails.html Getemployee.php
, f, r:f,-m?EF gTU \
{illi
:-5"n_-- .-': -.;, r.
i {hLr-I>
S .. {head} :::ii.":t]:.::.lj.i'.i]3ilii]i't.]i::].iJ..,:,1i:t,;:l:d.l'i:i1t.l.ltil:....
4. d,/he6c1 tiriti.ir.ijl :i:l:i:lr,: " ,
3r ''r,.reii, t.!1riu:!, tr,:i:i:li;ff ii:t{:::i::'i.}id3, r,i:i:iiari ti:til::l::i:lii:,
'':i:r:[l::j,er: j.:::.j]:i.rr:!1,r,,,* i:r:.xiin;t::i*r.itli::: -". -r:.ir::-... =:.:ri ".
<n*rd -..
'lih::i:.:j.:lil.;:i:r:r :.1i::l'1;:3 ::li: j:i i,:r3-:1;if,i, :,:ii:;l;i[:";
|
S...r{CiT iC="CeiBilsF6!e" CatE-rD.Le=-F6{e" Cir*-adc-beEk-llin="true"}
rit 1

:l.S',.r -{Civdata-xc1e="hEaCer""3 1* iiili - ::ir !:ll"rtjql:iIr.i:1lnr:;iii:iH-;iirrffi', i::llffr, ;:.i:!;:i);

<:hLlFc SarEelcnar:-Il:1: jil-)setXttli-bute {}S: |AUF. $$$}l, l}:,r:E!.LYli[_$iEE]Iilli ;
li ..,, i
1: (, di?>
15 ..,' .-.::-itlrl:t:il: l', ':- ti,:
Ii! r,' I {liY daia-rrle="c33teat'} lt ,, -E^:.uLElll
I5 li. illliritr = ;::i:-:.fitcrriblrrii) ;
:.9,'.' {j,s}jc='"enP1ctr?e?ir"i} r{
rli'....t. {Cirid='"etrs,l*y€eletai.I3"> i::tt',. "iiit" t'. jsrn-enr::.je l ;9::1::rtl,' I' ;
18. : {ir3 iC='"ful1$am"}<.rh3} :ti. I -_ ilT;r-...i.n:"1
dE ii='enp1o!'eelitle *}{ilF: 'i,r
11$ . i!l :...: j.l -?el\:::3iqel' ';
ee <F il='"-':t]"'><,/P>
rSIi-.r {.iCiv} ii,l J

.t3-
ll'
ll
"if,'.,, <ul aC=-aciiBn],l3]:" daiB-rq1e=''.ilst{ies"" CatB-insei="trui"xr"ul->
.l,l
aS:: {J.Civ>
i6 Jalankan aplikasi baik itu di brousser komputer biasa maupun di brourser
{3ii' dlci?}
.,1$ I -<lb*i'',:
smarq)honeltablet pc, dan perhatikan tampilan layar jqm akan
;.* lr:- {lhtsi}} menyesuaikan dengan besar layar yang ada. Dan inilah merupakan salah
satu keunggulan jqm. Berikut adalah tampilan aplikasi ini dijalankan
Langkah III diberbagai layar.

Persiapkan-7i/e php sebagai seruice-nyaberupa config'php, getemployee'php'

getemployees.php seperti coding berikut ini:

config.phP
{}}h:}

ii}5,::i -'iii.l,f ,l"' ;

iilti:l = '1,:l;';
, r;
iClr6,a;i: '
= dire*llir*! ;
r
$,$h,ra:::r
 i:iirt i*t:

hicAlidal

& ir liri

&
&
& lbrahim Ahllay

3elifiiil]l Srai,l
,
& *[]ir,l:::'., 0 s
,1

& R?li*:'" o *3

&
0atliAlvtl
i$
& !t! ii.Jl]tr
::H."^."1::ff' ! qx

$agioBuqud
i{1 *1111:
o" o g
& !l3qlal]q!siJhil

Adriano 0e
v
& !e{kia:

Perhatikan gambar dari ketiga tersebut (dekstop, tablet, dan smartphone)

Cesc Flbregar
(u menghasilkan tampilan yang menyesuaikan dengan lebar layar, itulah salah
& Piarr;$l

satu keunggulan jqm yang di desain untuk berbagai jenis layar dan jenis
platfurm (android, ios, bb, wp7, dll.).
$ Jonathan Fonlre
r$
A ;rnlsrBrI
Perlu untuk diingat bahwa khusus untuk and.roid, untuk menjalanka n ruteb
apps yang didesain dengan html5 atau menggunakanfamework ueb apps
mobile baik jquerymobile (http://jquerymobile.com/), dojo
(http://dojotoolkit.org/), maupun menggunakan frameutork dari sencha
Tampilan dijalankan dibrowser normal di komputer. (http://www.sencha.com/products/touch/), dll., berjalan normal apabila
dijalankan dengan platfurm Google APls (Geogle Inc.), bukan dengan
platfor m Android biasa.

AVD Name Targ.et Nanre

Anclrcid-l,5 Andraid 1,5
ondroid2 1 i,I
And,rsid
analci{-il ... i1d1o1d2{ -""-." . ...

qooqle apiS Gooqle APIs (Gooqle Inc.)

Berikut adalah tampilan apabila salah satu pemain dipilih, gambar berjalan Untuk men-douload phoneGap dapat oraKuKan secara g@
di tablet maupun di smartphone. http://phonegap.com/, berikut adalah contoh sederhanaTtle html ;E:l
kita buatkan natiu e -ny a. I
,lJ

SK&:s:," task.html
thl-sErtry ]atB Ir"e jB{ian{rrhl.}
(31:iF: Lt;::''iex:,:laY6"!l::1pi" .::L;:3ti="ul: ;" 3rC="EhC:le?e;,1-i''x. J;::!t,
Leo$*l Mssri
!l,nike.
S*rashr6,5PA . -,i -. r. t-..."taELne$B"'lleBClir1Es: . l.:,;".,: {hr .r}
-i r: .'-'*le:{]:" :i : .-, ";a;i(-lte}e]" "Ldikr-&m€'"

View Mendg*r '"--a.rllerc " lesk:ipsi {€l aCian

.,- "ta3h{CE;..r'iFi;i:nl ' :.'-*-q".' --

!adil ''! ]
r!il':irii:ir*ri!|r tr.i,.
"r6$kdl'1e" .TerxTlat KEjadian: r' . .{br
view slanager "r-r{l'idr!cl
!kJrLru!l lOSnJUtr
{all ortite
l; {lCi1,}
"sulri[" *i.'.-e"
Call (*ll gffail
fi .i::: llJib*rrf lin.. :am

sM5 Call 0ffice

if, r t-!.t,u i{,t r

(ell felN
File html tersebut apabila kita buka di brouser komputer akan
menghasilkan seperti gambar berikut:

PhoneGap Framework Smtrry Snta l{ejrnrlimm

PhoneGap adalah salah satu frametuork yang opensource yang
memungkinkan kita menjadikan aplikasi berbasis tueb (html) menjadi
aplikasi natiue. Seperti yang sudah kita singgung di atas, jqm bisa kita
buatkan natiue-nya dari dreamweayer cs 5.5, hal itu sebenarnya adobe
dreamweaver menggunakan frameruork phoneGap untuk membuat natiue
aplikasinya. Pada bagian ini kita akan menggunakan phoneGap secarir
terpisah dari dreamweaver. Dengan phoneGap kita bisa membuat aplikasi
berbasis useb yang nantinya bisa dijalankan sebagai aplikasi nativtr tli
platform mobile. Sebagai catatan, sebenarnya phoneGap menyctliitl<itrr Tetrrpat l{,ejq$$1
framework untuk membuat aplikasi natiue untuk senlua jcnis 1rltrl/irlrrr
sistem operasi smathponef tablet yang ada (antlroicl, ios, llll, w117, Syttt[irrrt, I s"u*ii u**w l
dn.).
Selanjutnya kita akan membuat aplikasi natiue android di mana akan ssft
trww
menghasilkan tampilan seperti di atas dengan menggunakan fremeuork Java Euild Path

phoneGap, buatlah project android dengan ketentuan berikut:

Euilder!
:*-*y::"1"ki-k9:sg* s, Libra'ies
jAR: ond rla:r folde6 En the buitd path:
3t *:ts:***r:*l ^--------"1
Application Name PhoneGap-task Ja!. Build Path
]
I aca rar...
P, (om.dndro,d rde.ecl'F!e.ddt.UERARIL5 --l
B I
Package Name com.wilis.task Java Code Style : e GoooleAPI! IAndrord 2.21 --,1
I

Jdvi Compiler
Compil
l-,{d4r{t""{l*tl,,--l
Activity
Minimum SDK
task
8
Jwa Editor
javado. Lo.ation
PGje.t Rderen€Er
Rtfe
lillr l -- v*aurs"
iI .- - -ma
"- - .*:,... ..,... .
l. aaaLo'"o... li
i
_
I

fi.un.rDehuq Sding:

Selanjutnya dengan membuka project tersebut di eclipse, click kanan asset

Task REpos;l
REpos;tGry
Tesk Tags
1..:. 4{ii$ir f$&--r--1 l f

Usld.ryrqw@
dan pilih new-folder dan buat dengan nama folder www seperti gambar
berikut:

I
l

''',.',,,,....1

(al (..,:
{-.. ..,.. l.;,{rrs*-'-.t

Pilih tombol Add Jars dan cari nama project kita dan/o/der bin di mana
file jar phonegap kita copy-kan.Pilih sehingga libraries kita bertambah
seperti gambar berikut:

Kemudian p aste-kanfile html kita tadi di folder www yang barusan kita buat
sesuai langkah di atas. Selanjutnya copg-kan phonegapjat dariframework
phoneGap yang telah kita dotunlood untuk bagian android kefolder bur di
project kita. Setelah itu, click kanan project kita dan pilih build path -
configure build pat]l sehingga akan muncul seperti gambar berikut:
Selanjutnya copg-kanfolder xml dariframeuork phoneGap yang telah kita
dou-tnload ke folder res di projecf kita sehingga susunan folder res project
kita seperti gambar berikut:

;:. ip drawab,ie-hdpi
rr tr;t drawa[:le-ldpi
1.. [] drawahle-mdpi
. * l:,,a,,+

I t}. trluu,
, l_'.:l *nlr
gl phonegap,xmt
;q plugins.xmt
t+ AndroidM.anifest.xnrl
;.:i proguard,cfg
$ prnject,propertier
" ,:t ^,
!:: HnCnEqapl.
,r i$ src
,r,$ con'r,wilis.phaneqapl"
r. .ft phenegapljava

Catatan: tentu cara-cara di atas berbeda dengan cara buat natiue untuk
aplikasi di platfurm lainnya seperti ios, bb, $p7, tetapi intinya tetap mudah
Selanjutnya rbahfile taskjava menjadi seperti coding berikut:
dan bisa dengan menggunakan phoneGap, untuk mengetahu cara untuk
platfurm lain silakan pelajari di situs http://phonegap.com/start
taskjava
package com.wif is. t.ask;
irlport com. phonegap. DroidGap ; Aplikasi RSS Reader (Iquerymobile +
import android. os. Bundle ; PhoneGap)
public claBs Lask extends Droidcap {
",.aIied.vhen Llt.-a,:ri.:r7 i' l-r:, crr.,l r:.i . ' Pada bagian ini kita akan mernbuat aplikasi android untuk membaca RSS
i,i,VLi'tU- dari sebuah uebsite ataupun blog. Anda dapat mengganti menjadi RSS
public woid oncreale(Bundle savedfnslanceslrate) t
sebuah uebsite apabila uebsite itu memiliki RSS. Pada kesempatan ini kita
sul}er. oncroate ( savedlnsL.ancesLate ) ;
agper, loadurl ( " f i ld : I I /android;asset /viww/ task. html " ) ; akan contohkan untuk membaca RSS sebuah blog dalam hal ini adalah blog
nsafaat.wordpress.com, jadi kita akan membuat aplikasi android untuk
J
membaca posting-an terbaru dari blog tersebut dengan menggunakan
fr amet-u orkj qm dan phoneGap.
Perhatikan coding-an "super.loadUrl("fi1e:l I landroid assgl/www/task.htnrl")"
disesuaikan dengan lokasi dan namaTtle yang kita buat, jalankan aplikasi tli- Langkah I
emulotor android sehingga akan menghasilkan tampilan seperti girrrrlxrr
Coprl-l<;rn .file jquery.mobile-r.o.min (css), jquery.mobile-r.o.min 0s),
berikut:
jt;rrcrv r.().,.1.rnin fis),phonegap-1.3.o 0s) ke folder js di dalam folder
I{SSI)r.rrro. /,i/r, irri tak usah diubah karena merupakan bawaan dari
li'tttttt'trrtt'k ir1trr rl;rrr plrorrt'(i;r;t.
 ry,

Langkah II Pastikan file yang dipanggil dengan script src sudah berada dalam
yang tepat.
folder
Buatlahlle index.html dengan posisi sejajar dengan/older js (bukan berada
dalam/o/der js).
Langkah III
index.html Buat.Ttle mainjs di dalam/older js dengan beriskan code berikut ini-

{ htr[]
,i':ri:3iirtiiiliiiili:

2
I

<hLEl>
SSCTYPE
marn.Js
(head>
<tria na&e='vieh?art." conreni="uidth=Cevi*e-s*iCihr ini.tial-3c81e=l-"> ... ili;... ::::
<iirleH/rii.Ie> llr':.i wr TIll,E = "nsaaaai,scrdpres3.com";
,$,tir:,r:]. {1ink rE1="stylesheet" href="i3/irT'l€ry"mebile-}..['ri*.sss'' J]
1 <script src="js,/lquerf-'1..6.4.tri:i,ls"x,/3crrp;)
*, fSS = "hllF:li'ssBilsL'tr3rCFre3s,cffi!,r:eed,J"
'::llti},l.,l
rl {script 3rs="j 3/iqu€ry"mcbile-l. 0'ej$. i 3"><,'scriFt >

',,,,:11',,1*.,, <sffiFt sls="js/!&in"i5*xlsclipL>

itlll:l$il1r { /hf ad>
l1i;11 mr etrtrie$ = [];
l1 thtulrr\ {$.;jt'var selectedE rr!' = "";
12
t:,a,::.,|. ...::..::: ::i: i:l;tt. _::.li:
,,,,,,X3,,,.,,.,, <arv daca-rsle="pege' j.d=*mainFage'> : $ t". cettertlrnk"l' live {"click", fuction (} (
,1&:ri
:1.1{i:..ri, ,l{':li.:i selectedlrlry = t{th!s)'cata{"e}tr}id"};
rrlrl,$r,rl:;i'; tdiv data-r6le="1:eader") ll;
1|',.;,1'1',

,1$,,:r'r {hl14r.hl> ::!::61:..:',:

imctim retderEntrirs {eniries) {

r.;X31 , </div> r .liirr,t,rt
iil*ti]it,t mr s = ,';
,{$, 6.each(lntries, fuction{i, Y) {
l;,9;,1;1':;;::l <div data-xsle='ccnlsot*> ,iilltilrtlii i t= '{l!Xa hrrf="}icntertFage" cltsss="cont€trEl1nk" ditBtntryid='rr+1frtr}' + r.t:tle + '<i8x/h.>';
'*::X..:,::,"::: {di" id="gtatus"></dlVf I .41..:, l);
':':Xi: :: <ul ic='linkslist" data-rc1e="tistr,'iex{" datts-ifl5eiE"iruE"x/u1> e2 i{"{lini3li5r")'htnl(3};
rr',f3,.:1ir,r <l,'diy> 23 S{"t1roIsL:3t").115rYlex{'r::resh");
,._- - ,r,.,
t,ri: .i&n 1

:rt:,:.:.::.,;;

,S :,r,,,1,,r,,1, <dj-v data-rcle="fotter"> )t6,:i:. - - -:::1: ::: :.nr:, i:j;

l.*$1,l,,11,.r, <h4>5i@leBlog xt ,iQlk/h4> :!!: ' 91"1*rrt.n*'l .rilt {"pa{eiiiit", fuctis{} {
i6 </div> ,,7Y:.:,::. . : i:: ilr: ::.:.i
11 ::&$1.;;:, i{"h1", this}'text(IITIEI;

t,!lt,:t.l:. i ' alsx{{

l:'$31,,.",11,, 4;61ut
!3,1!il url:Rss,
. ,fr{iir,iir.i,,
::bir]:t::)::::, success:fwction{res.ccde} {
ritlii]ititl,lli {d11' data-rs1e="}age" id="conleslfage-}
::.i{1.,]]. entrirs = [];
:rrir$'*lii:ili {div ddta-r*le="h€ader"} ,:
11::ii1 var :orl = $irgl;
{atrref=-*mi[Page'"catn-rrI="back']ils!6e{ia} ,iti$itii,:, var itess = mI. fisd {"itea"} ;
tl'84l:.::,,1 $.eash{iteffi, flnlctlon{i, v}
'.;.:8::.;.,. <hlxlhL> l,'r$irr,,' {
,rr,rg$.,.i.t <ldiv> 3? entrY = {
-::t*l:t.:,:.:: ,.3!,...:, title;$(v).iind("title'l.text{1,
,l!1.:r'1.,r, lifih S {v} . tind {"tlnk"} . tert {} ,
{divdala-rc1e="eonteni" id="trlryTexl'>
,

;1,&iiii It; tlt,., destrriptioni $ ' trim {$ {v} . iilc ("da5eripiim"} ' text {} }
r,r3i$i...':. t/div>
,t tl
l $,$,,,,,,,,,,,,
i:{,X,,iliiiiil. </div> 4i enEries. I . l.: (enErY) ;
44 ll;
{s
i{gt::.rl:, {lbsdy> *
a7x61" 46 1*EBl5Eor6get"eltries"l ,;561'l'3Lri-sgiiy{entrle5};
uir{{r,. .. (ent:ies);
{? renCerEnErles
lt
i: er:crtfuclionlll.LiR,statu3.e::::, { RSSDemoActivityjava
-: if{I::"]sE;:axel'litj1:l"li { package com.wi Li s. rssdemo;
5!,.. $ {''*:tatu:"1 .his1 {''11i1!E aeciic Yelsirl.'
ii errtrreE * .15.;li.ai.i:;,:r ilccelsrqra.Je l"tirllies""'}:l ]
:{
*!,
-f,le:Ef,tr:er(eaE:r'3);
i else { iffi::: lffi;illl3!i8..,u,",
.S1.,"', +{,'*stBl}s,,},hts1{'5iti}, !E aie uinfle io r]ei tht A5: e}l ih:rs is nc cai.h:,''}i
:1 l public c1a6s RSSDemoActivity €xterlds Droidcap {
.* , 1lr
,r** |al1etl lrhen lhe aclivily is lirst creal*C" f,l
,{:., }}i prblic woidl onCreate(Bundle savedlnstanceState) {
$3.lli.ilr Eulrer. oncreaLe (savedlnstancestate) ;
i: $ {"*rair,Fage"1, llYe {"FalrlE
jNresh;s", fmcliqn {*r,'r:ri, cBta} { super. loadUrl ("f i le :. t /android asseL/inn,v index.irLml ");
S{ if{Ceta.PEl'Feg:,lewrh}i I
,:* +i'hi", Car*.Erre"f8ge].tErt{"""},'
i.i .' i{''itritr-$err'", iex6.FiEvFEge}'brnli''"}i
'El 1;
,ii
$9
rr ,
Selanjutnya jangan lupa untuk copg folder xml dari frameu.tork phoneGap
l'1.. $ {"icrrt*rrf :ge"}' l.ifE i"F.EeEhr.". f urcti+n{FreFage} {
kefolder resf project android kita. Jalankan aplikasi sehingga menampilkan
Li ..- seperti gambar berikut:
l! i{*hl', ftis}.tE{t{e}tr1e5[sElecr:dcrt:!].tit1eJ;
1* rar rcstentilJ}ll, - ''";
;15 trcrtincHll'i]-t=etrrrieslEeLectedlatr]:l.Ce5c:llltita;
r"]:ElelgliapeJa{ln}';
:i c|rte$il{iIl i= rr:privii hre:=''r*alrieE[3ele:teCErirlf].11.]: +
'- €{",;:,:l;:rrl',this!,hf,.i{':ateat'-Ty-L}r
j; j);

Penjelesan. Adabe Sreamure&ver CS5,5 ->,,. S

var RSS = http://nsafaat.wordpress.com/feed/ adalah alamat url rss dari jQuery *llobilc ; Tutorials part"." ffi
blog yang akan kita jadikan dalam contoh berikut, bisa Anda ganti dengan
Tuturial $atabas€Aps sqllt*".. S
alamat url rss suatu blog lain atau rreb seperti contoh alamat url rss
detiksport.com/sepakbola adalah htrp://rss.detik.com/index.php/sepakbola/ .
Eisnis Mndel Content Provide,..$S

Rerlt&trl Secure S*r.*tq denga.,," S

Langkah fV
*ndroid.t*I.ephony"Srns*ltann."" W
Selanjutnya adalah membuat program natiue androidnya dengan
menggunakan phonecap, buatlah project android dengan nama project Tutorial WebApps Mobile epp...S
RSSDemo setelah itu copy-kanfile jqm (tueb) yang di atas kedalamfolder Msngu{&pksn Jtlalhlssalam ... $
asset/\.nrww sistem folder android kita. Yang di-copy-kan adalah file
index.html danfolder js yang telah kita buat di atas, sehinggaisifolder asset smsMada Unpublishniafaato... €)
dariproject kita seperti gambar berikut: Tutorial Froject Jtplikasi andr.". $$
asrEts
jr Andr$id *55 n*eder*$afaatan.., SS
r*r*tr
Lr is
;$ index,html

I'}ililr srrlrrlr satu po.s/irrr7-irn misalnya posting-an pertama sehingga al<an

Ubah.Tile java dari pro.iect android kita yang lterftrngsi tttttttl< tllt'tttlrrrggil /i/r' nrt'rrglrrrsill<irn st'1x,rli girnrlrirr lx.ril<ut ini:
i rrrlex.ltt rnl scltt't1i <txlirul ht'r'il<trt:
 ;
i
Aplikasi Mobile -Restoran (M-Resto) i

Aplikasi tersebut adalah kosturnisasi

JQMobile, aplikasi ini dikostumisasi I

Kebanyaknn programm€r *Palagi

progrirn|ner wet, paeti Sud*h t*miliar dari source di JQMobile Gallery.
beQarr adobe dresrfiwtav€r baikitu .. Aplikasi ini apabila dijalankan di
profta*-"t Php,jps.tf m,htnrl,;>.vbs,dll'
dreimweavei sansal endk dan smarthpone akan menghasilkan
comfdtrble sekall drPak.rr o!eh SFLAMAT DATAI{C DI MOB]LT.RESTO
progl.ammer. tapi dreaifiweaver dipalrai seperti gambar berikut:
of*fi ,:.ung y*ttgi akan rnengenrbangk&n
untule apliLisi fiohile nr*n$kin agak lain
bssi drang lain untuksekar&fig, pengan ;
hadirnyd HTML5, sehinggd Makanan $$
dreanrwexvcr sangat (o{ok $ekali
dipakai sekararlS, hal rni 1,. 1
Minuman I ffi
srle08,[s&$ya
Snark a$

Apabila dipilih selengkaPnYa

Apabila salah satu kategori
akan menampilkan tamPilan (Minuman) dipilih akan
lengkap dari blog Posting-an A*$gril* **:*esx'Bw*d}\ssr {$$"S -}
menampilkan seperti gambar
itu sepenuhnya sePerti *:*l** $ r.xg vw*Sx 5xtrss xx: c*&*i * c]
berikut:
gambar berikut ini: &*$ri&'c |xe$t,{*Ps$

l(ehnnyakeo progra*lille. +palagi pr ogr''rrrrr{:t w'rl)

pasii sudnh fsmiliar dengitn &dcbe 'jfeirt|a':nver
halk itu prog{amner php,ips,cfnl,h(rtr}.1 !.\'lr" rlll
dre&nl&'eiver s{ngat rn3k do[ (o:r11'rllhL(' ''r'k'rll
di|la16i sleh Fffr8! {inlnler ' ldpl (lt {"lrl)wt 'lv( l
aiilia}tei !leh ardnii y,lrlli itkirl r)1'l lll('r rl l)'rr rlll'!r I
uilt1rk npi'hJsi trlobilr rlttrrlllklrr 'iil,tk l.rrrr tr'tliI rr "rril
larrr urltuk 'irlknr il,ttl
sedangkan apabila dibuka di browser pc menghasilkan seperti gambar lndex.php
berikut: .<?rlh11
* i:l b-,8{
.ifl.
:.. E& : r1 ,6k h!

:e4rire_snce "rncluCes..':r.ain, f hp" ;

{
.try
r: {i_3[T I rcareqory' ] ] {
;r = neu Categor$cntrolleri);
Pudatrg Roti lGkus ttr,lwr
.I
' else if{empr}i{S_CeI} } {
, i* = ne$ Hstr|ECsotr$11er{};
'.,
ri
I
else rhr*&' nes* Exeepti*n{''l{E*rr,A pagel 1'} ;

+c->handleRequest O ;
Ir
'.I
ri c.arch tExceptlen 6e| {
i render{'etrrnr',*r'rey{'uesseEer=}Se-}Eet}kseage{} }};
,,:: I
J"!
Untuk mempermudah pemahaman kita tentang aplikasi ini mari kita lihat
t-:

terlebih dahulu struktur project ini, di mana aplikasi ini sudah

menggunakan frameuork MVC (Models Vietu controler) seperti gambar main.php
l:aganfile projectir,i.
a
.::I m-rtore Folder u?J2rr 12 1r 13 PM
;:;;) assers tsoldea lj2l3B12 11 13 Pl'l J
: i}l i:l css ?r'2l3llt 1:13 FM
t
ttL J imq F*lder ?,t12412 1rL3 Ffi
{:. rJ indudes Folder 2lu:tr[ 1r 13PM
,;',',',:&..:,::',',:.:,;,:,,
: i-.] i:3 conbollers Folder UU201? 11 13 Fr4
: I 's,r "" i"n,:luCe B l. rtrnf ig , php'- ;
categwy..rnAofier,php lKB FHP s.ript 8J1q/:0 11 3r 17 PI{
ti home.controller'FhP !{B FHF StriFt 8J1gJ?l I 1 :r 16 PM
Al requi::e-crrce " i:1,:l-u.Ce B y'' c.BnJl€ ct. phtr* :
tEI:r] 12 1r1l PM
rE-'i YF .h.E '"inr.luCes/helper s " php* ;
i !:j ;3 models F*lder ;.,::.::,t::::.

, : : ii.ii categmy,model.PhP lr(E PHP Sqipt 61191301r 3t07 Pl,'l IU

".:. ra-ri Yc .n.E "i$sluCe;/Inf,.de1s /prcCuci " rB{]del . php";
* j,n*luCeifrs.hCels
:, I * produrt.model,php 1l€ PHP Stripi Bl19/2rl 11 frats Pl,1 TI radli rE
!r9s:rL_u.re- -h^E Jcategcry" rtsdel - php" t
i !:l * views Folder 1J2J1.01? 1:1f FM Il*llr:',,:llrrrlr !
:-.Yri vsi-_L'ur
nn-6 *insludesr',:satrallers /hilse " c$nt16l1Er - php*;
i ,4, lHE PHP Ssipt 3/1dJ2n r1 8r?7 PM Lilt::'..::
-{ur!
!16ilri :a
^n-a
*in*lude3lc$ntr!l1ers Jc*teqft3ry, o{rnL}r&11er "php" ;
-rEtegsry.php -{ur!.-_u:rur
il{B FHF Ssipt 8J1813fl 11 8rJ6 FN
'I : 'lll-fooier'PhP L&:,11:,11;l.::,;

: ,l\-header.php il{3 PHF Ssipt 8J18lr81l B:3S FM

L&:::::::::.::.
1::$-roduct,rho 1}(E PHP Stript al1Bl2l]11 B:49 PN!
aa
: , A .attgorYphF lKB PHF s.ript allsi:r]113184Pr"{
'\ error.phg lriB FHP Ssipt 8J1BI?0 11 9106 PM
Li.:
, : :. .t hsme.php lXB PHP Ssipt 8J1sl'20118:"14PM .LE header{'fache-C*ltrt:l : nex-ege:, 6[[, ll"Util t,

tXB PHF Ssipt I .LY hEader{'Fxe{rma: rarhe' } ;

, : 1 mnfu,plqr 81331101 lr 58 PM
6}fI"},'
, i! .onne{t.pi1p ll(E PHP Ssipt BllS/21111 lrOi Pl"l 2A header {*le*r-${xij-!ied; "' -qndate {"'*, d !.{ T I{:!rE",tine{}}-"
: '"a1, helpers,php 1KE Pl-tP Ssipt ts119120 1 1 2r s9 PM 2L heaCer{"Expires: "-grdatEt*S, d !'$ Y H:1:s", t.ir€{l +36C[] -" S{T"i :
i i. Y.: ma;n,php 1KB PHP Sryipt 8/19/20r1 2r55 PM 22
:.. ;1,' tndex.php 1KB PHP S.rpt 8/19/20 I 1 lr l5 pM 23
config.php product.model.php
t:::X:,::. q?L:t}l}} .i,trjjrr: <r?rtrF

.E
l:t cldsi FrfflucEl
;i;llrltfflt,r,ill erc*E ::erlortitrE {E-&IL ' E-I'IaTISE} ;
:':::i'a:::::1t.al.ii1::, I

5 pu(l1-r rratre Suncrien Iind{g&f:} {

E l-'-(:L . ir;
,: irrrri$,lrllilll |;
? $d-tr_hc":t = 'l-rtcn Ifrest :f i*ir. ['1.1'] ] .l
,l,tlr,.i.:'e1a:,:,,lur $d}:-user :' r*{:1:' ; i*r = iCir->pEFaE("5rlfaT * I"Raal l.q1gj}.duErs trXRn ld=:ijl"l;
L,',r,,::,,,#it,:,,,t.1,;', FcbJr,ass : r I i )
€f6e if {+ir: [ ].ateqro.f" I ] {
::,tS$lllttl|li; $c}:*na:ne : 'I$-resE* t ; liiil*lt,tl,lltiil $ei = idh.->Frerlare {*sEl*Eif * a!{x lqsJ:.:idusis illiER[ ealegor? :
1
..ir:$$Iliiai iu9i:'i:lilt e13el
eliel
,,lrl.,,$.&{iili.r' ri1?,:i:il itliiNqesExceptioa{''Ujtsutr}Nrie.i}rspB!!;]"};
x3" .,f.Er:l:: I
:
:.' A:*:::):,:.::,',,, ,,,1{:,}
?q,:,::a.a, ist-kxecute {;*.r);
U-Dp rtnr - ',3.4:::::.:::,.: rerurn ii.->fetchAl1{Ps8:1lT.fftt_stAss. "prcJr::^);
'll?$1,'iiiliii i
:!$:111111 t

'99,:::::,)::: o''

Nama hosf, nama user dan rrama databcse sesuaikan dengan setting Sementara fle sebagai controllers adalah file category.controller.php dan
komputer di mana disimpan database-nya. home.controller.php

Sementara yang bertindak sebagai models adalah category.model.php dan category. controller.php
product.model.php. {:Flxp

cI aEs Cat€gorllcontrolIer {
category.model.php Euf:1ic function hMdle&equest {) {
irai = Category: :fiad{array{}id':>$*$EI['cat€gnry'] ]];

ii terFry {&rat} I {
Ehrl8 sew Exceptisn('-Ihere j-3 n6 Buctr cai€gsry!*l;
l
.t.:i.:rr:ii ii:::: i,:-: r,i:-.;.-._..r- :r,:_.ii..,,.,.,',.,'.j.
icaiegrrrtss = Category: :find() ;
F&.llc at&ric truoction tind{$*.: : 8.16!'{l }{ gFrcducii = Pro{iuct: : find {Btray {' cat:Eory':>g Gg.T [ " caiegory, ]] ],
!fshal 6.ih;

al {enpi!" {4eir} } { rend€r { }cateEcry', arrey {

$-rr; : 9:1h->paellaE {*Sr"LECT * mS l.im_cel:eu.rI ie3 trirle, :> "Sxousing , -icat[[]->nffi,
) 'cateqarfeJ' => Srare?cr iesr
elsE rf{$e.r['idr]]{
gss : 6dtl->pre6ae,{"::L1.nfi fRW lqq 6dteJ:r.ie3 'prcducL3' =>;f:cCJ::3
'

ihr6u nek ExcepEj-an {''Unsup}x} rtje{l FIr:pe rt: y l " I t

1

geu->erecute tgBrr) i
home.controller.php category.php
{}Fhli render {' _he6Ce r', nrrei' t' r it:le ! =}i-:il:: } } t}
1. < I Flrl:
.tB],trlillr,iti|i
<diY clEsE-'rightIsl]m">
'..t1::.:3 ,,',':,a:,: : r I:-r -: ,: i: r,: )-: : i.- ::, .l -r ar:rr :: i'-: i i liil,i-.: l.'r:. , {u1 dEra-.ole="1isivieu" CBtB-iriei:"true" datd-ihene="f," d6ta-d1}1Celihere:"c">
'.',.Slr:trrll <?FhF tredEr{;l ri{trits) }l}
',.-iitli$:.itl11i l
11lil

{lu}>
,|:t:::51' :| !1.*me{*nt.r*a 1e r {
::t:..1:.1
c I Bs ,,..,,$,.r..:r
:
:',' ::' ::ai',: ::' ::., < I di\ >
,]':l:lri$iltr.::, Ilu]3lic. func.Eia.rr fra:rdleRetl"re5t {}{ ':l'::.9..::::a::..:
,l :}:':lliriiirlilllil' :a'.:::'Y:,:t'
.idi? class="1eftctrll]&*!
a .tl&{lL,ili: du1 data-rB1E='ll3tvieN' data-inset="t.uE" iBta-there="s' data-da?1d€rlher€="h'>
<11 dBta-ro1€="'1isr-diride:">CBtegories</1i>
:]::::Stt:t,li Sc*j:rl:el1c : CaEeqt$I:y::firxit)'- ,r.l.titl ,;:t
ir. <rll1 rEnder(4rai*{::ier,a:rs:'{'arii"e'=}"t';ETl'isieqc:}!'l)} t}
1-O. 1l;:1&&.11,11::;: t,1u1>
1f;t"'llrlll"'''' r€tldEr t t t:r:me' o *rrey { ":t {.'::'::',:: :: < f d it >
,:,';g,,,,.::,,,,,'::,,,': rt.it1e' :F'3$*}}i1e-Ii"e5t*'
lltt,l:{lt,t-, I s\:Lr trnder { t_iBsler' } }.''
iiiiilYtii,i'r
::7!,&.:"':,,::t)': i);
rtg I
:',*$;,:,1::111,11;,'' 1
_product.php
a,&lrlilrliliiiriti,iii ?F,
r 11i glsss=,;:0du[I"]
:}.rlirl:l{1s{ srr=,sgsetrlrry/{?php enir* ipr,ir.r*i-:id }},jg" ali*{?p$ mhi rFr:,***i-}nam ?}' l}
Sementara yang bertindak sebagai uieu.r adalah file-file php berikut qlp1t rrh* ;lx,iu$*nanfl ;) (iX?!:hF rrhi, ip$iu,:t-hmnufa*urer?H/i) {b*p,{}$ tch: i;::1:::-:
r,3,,,
_category.php n$! Fn rV
y;fLL r /E\ \J s/
category.php
r,{rrr,,lrrrr, {lii}
_footer.php
-header.php home.php
_product.php
Error.php
, 1 {?}i:$ rcnder{'_header', array {
1
title'-}itirle} I ?}
Home.php :{'r'r'l

<p>SELAXm EM&l$ SI $SBILE-T0$S(/p)

-category.php lr,] &:$$li <ul dara-ro1e='1ist?iefi" data-inEet="true" data-theme="c' data-dividerlhere="b")
X, ttl {?p$ e*i:* {iartin : ir*ti{mtr-}id I 'Ccte-thtffi=*aor : "! ?s ,utffi$* {Ii data-r'o1e="1ist-di1,'ider*>Filih
r'!&$iii {?ShF rerderi{nrrr:e::l! ?}
Categsty BarEngtlli}

4u i:iri=-?ealegsry"{?$}$ e$s $ceti{*li-}1d?}. dal*-transixim="faden}

',!)
t 1lrhrr p,rfia ;';-srav"-\nrm ?!
J' \:!'I{rt-Lirs Y!:L!v*!.'
11' ., {!pj:F render{} fB0r€r'}?}
..1...*11)r {gFm clags=*ui-li-*cu'it"H}php t*r* ir.&iri]*r}-ks$tains}XllpanXie>
,,,&.(: {llt}
:r..,$. trr,rrr

Aplikasi HADITS
Pada mulanya aplikasi yang mengandung bahasa arab di perangkat mobile
khususnya android agak sedikit rumit, hal itu karena sistem android belum
nrengenal dengan sempurna huruf arab, sehingga untuk menampilkan
llirhirsa arab/tulisan irrirb rnermerlukan arab re.shoper. Sehingga schagian
besar aplikasi Alqur'an atau hadits itu masih menggunakan sistem image
untuk menampilkan tulisan arabnya atau dengan teknik yang cukup rumit
yaitu menggunakan arab Reshaper. Akan tetapi, tidak untuk genarasi
android 3.o ke atas sudah memiliki kemampuan untuk menampilkan tulisan
arab, sehingga kita bisa menggunakan aplikasi client seruer untuk aplikasi
Alqur'an ataupun Hadits.

Berikut adalah gambar awal aplikasi hadits ini apabila dijalankan di antroid
tablet (android 3.r) dalam contoh berikut:

Pilih salah satu hadits sehingga akan menampilkan seperti gambar berikut:

Apabila dipilih salah satu akan muncul seperti berikut (dalam hal ini pilihan
kedua yang dipilih).
 < / styl e>
< /head>

<body>

<secLion id='r'page!i> < l-- Def ining the #page .sectlon with the section
tag -->
'' <header> <l-- Defining the header s€ctiofi of the page with
the appropriate tag -->

<hl><img src; " img/lladi st*himpunaa. png " a1 t= " i con "
widrh="113 " heishr='101'>Hadits App</h1>
<span claEs'=!'styleZ"> Ensiklopedi. Hadits -
Kutubus Si tLah< I span>< /hgroup>
'< lheilddr>
<section id="articles">
r,' ,..<ar'tiile irtl-"articIe1">
< figure>
: <div al"isn="r:jghr"!<img src*"imgrlbgkhari,pnq"
vridth="50'r height="60' /></div> l
< / figure>
<a hret. " tradisL.php?tlitr)e=1 "><h5><stiong>
shahih Bukhori <,lstiorig> - Abu Abdull"ah Muhanuiiad bin rsmail bin
lbrahim bin a1-l4ughirah biir Bardizbah al'Ju' fi a}-Bilkhari< /h5></ a>
< / div>
. i </artlcle> .,,.,... .,. it,,

. </section> .
:. .,.. ., ..
r
Untuk menjalankanini import database.sql dalamfolder hadits ini kedalam
sistem mysql ini, dalam database ini hanya beberapa contoh sample hadits <art.icle id. I articlel d'i
saja, tidak semua hadits diikutkan karena pertimbangan storage, sila hkan <div c'lass;"artic1eBody clear'>"'
<figure>
ditambah database haditsnya serta aplikasinya sehingga benar-benar siap ',', : <div ali gn='rri.ght q>< img,, src* ",img/mu'sllm; png'.
dipakai oleh orang yang akan menggunakan aplikasi hadits ini. tiidth-' 60 ", heighL.' 60 n -/ ><,ldLv> ., .

',li',,l'r',. i.r.. ' :::

.t'<./.fjiffore>t.
<a href = "hadist . php?type=2 " ><h5><strong>
Index.php shi*rih.Musfim <l.,ritrorls>- Al-lmam Abrii. Husaihr"]xusi1$r:'bin aLr;l{ajjAJ''a1*
{/div>
Qusyairi ea-Nai$aburL< / h5>< 1 a7
?rrrrr&OctyP$,,ithttrtl.tl:l <. I *;,.:::tthle rrew doebyFc..i:,i
<hrml >
<head>

<meta http-equiv= "Content-Tlpe" content= " text/htm1 ; ,, , ., ...,1:. . ,:r,,.:<al.iicle:.:id;t!artic}dl{1.,.. . ..,..1,.

charset=uEf -8' /> <div cfass='articfeBody clearu>

' :',.: .,:' ", {ttrlq2iladiiaitiii,App< /tit 1e> < f igure>
irt..r, , . .i <1i:lk i'e1*1.$ey1esh6et" tl.pe='text/css", hrBf="sUyles.css" /> . ,,,66ji7:.A1ignt,rigltU.ll{img,
,r . ,r'r,,:rtll.,r,tr,. .iiiriiiii,irir'i,l

src='.imgli1dbq:adWud",pngl.1lll.w1dth..'60.,heighr:|i..6.0!1,],]']]l></diVill.l.l..li
..,,::., , </figr.iref,. ,,.,... ..iiri.,r. :::::': : '

,.",.,,:,,..',):.' <QIEV1e
lypel"text/css"> ,._. ..,,,,,i... <a hief.rhadist..plry?iype*:lrtnSt{strong> Sunan
< l-- Abu Dawud iiong>-,, Sulaiman .bin' A1'g,si i ati;]. As*
< / s Ahp,t r.pe.wua
.sEyIe2 {font-famiLy: Forte;
font-size:2Opx; < / art ic 1e>
) </section>
.sEy1e3 {font-family: Scheherazade)
 <see'tLon id* "articles">. hadits.php
<article id="articIe1"> <?php
<div class="arLicleBody cfear"> header ( 'Content-t).pe: text/htmf; charset=utf-8 ') ;
<figure>
<diw align="right'><img src="img/tirmidzi.png"
width:"60" height="60" /></div> ift$-cEr[hal]:*"1")
< / figure>
<a href=llhadist.php?t)&e:4 "><h5><strong> Sunan
At Turmudzi </strong>- Abu fsa Muhammad bin Isa bin Surah At Turmudzi
Spage = 1;
</n>></a> $Pre = 1;
</ div> Snext= $page+ l-;
< /article>
< / secE ion> el-se
<section id="artictes"> $page = $*cEr[hal];
<article id= "arLic1e1 "> Spre = $page - 1;
<div cl-ass= "articf eBody cf ear" >
$next= $page+ 1;
< t igure> l
<djv align="right"><img src=" img/nasai.png"
widrh="60" height='60" l></div> $con = mysql-connecl("Iocalhost", "root', ") -
</flgure> mysq-L_set_charset ('utfB' , Scon) ;
<a href="hadist.php?type=5"><h5><strong> Sunan mysql . seleit*dLr ( "db*arab" , $con) ;
An Nasa a <,/strong>- Ahmad bin Syu'aib Al Khurasany </h5></a>
</ dlv> tb_hadist
$tableName= " ";
/articfe>
<
Stargetpage = "hadist.php?typs='.S-GETIrype] ;
<,/secti on> gl-imit = 5;
<secLion id= "art icfes " >
<article id="artic1eI ">
<div class="artic IeBody cfear" >
$slages = 3;
"i3li"]r rnn=,, rishr " ><ims
$page * mysql-escape-string(g*GET['pase, ] ) ;
/ i bnu -ma j h
s r c = " i ms a
-" " i f t Spase) {
$start = ($page - 1) * $limit;
., ?:i'r"-::#;, : ::"^, :.,"" = : :;,.
: Lrons > sunan
= ] el-se {
Ibnu Majah </strong> Abu Abdullah Muhammad bin Yazid bin Abdul lah bin SsLarL = 0;
Majah Af Quzwaini </hs></a> <ud-Lv-.
]
art ic
</ l-e>
</section> $query = "SELECT * FRoM t.b-hadist where id=
' $-oer 1 t.yps 1'
$queryl : TSELECT * FROM tb_hadist where id=
'$*GErltypel'
<footer> <1-- Marking the footer section -*> $querys = "SELECT COUNT(*) as num FROM tb_hadist where
id='$_GETlt]pel ' ";
<div class= " f ine " ></div> if (isset(S-POSTtCaril ) and $-POSTIno*hadist] != "")
.: ',<p>Copyright 2011 * Android t
TEA},I .Biobses<lp> $queryjaram = " and $ p0STlberdasarkan] like
<l:1 lhqnge thq copyright notice --> ' B$_POSTIno-hadist] 3' ";
< / footer>
$start = 0;
r '.ii' </section> j
<11*. Clo$rinC.. the .#paSe section --> Squery = Squery. $queryJaram;
< !-: ,Ja*aScript Includes --> $queryl = $quer-y1.$qu6ryJaram.T order by number asc
,:,: LIMIT $start, $1imiE";
$guerys = gquerys. gquery3aram;
< /body>
</html>
 .- ,-,.,,ifi$r; i;J;1i,,,,,,i,,' ,i,,iiii:,ii:i::" ,*:'r:,ff*1i1*;11''i;ffi..i.
,,.

;i;ji;$*il1-,**f',[*
'",;,,,i:"+::i'i: ,,,''i

,ffi,.,'1-1-
1.+l

1
I
ll$rasult = mysql--gueryl $querir) ;
''r" elseif (SLastpage > 5 + ($sbages tr,,2)) /l Enough..:pages to
hide a few?
$res = mysql-guery('SELECT * FROM tb-ikhtisar "); {
$rw = mysg!*feleh:-array ($..res) ; .i,' r.,,-// Beqri_nning only ni6. 16gsa,,.pages
'tf($page <'1 i {$stasds * 2)) i,,'
I
.:.:: ::::. ,.for ($count€r ..1; $ca&iitser < i'i4: +":...

/ / GeL page data t

.,i', if ($counle6 =a $page) | ,.:.
.
. $'result = mysql-query($querY-1) ; $pagjnate.= "<span
c l.ass* 'cr-rrrent ' >,$q,ounteri.l.span>,, ; ..,i
] else{
='<a
href=, gtargetpage&page=gcounrer' >gcounL.r.r.rffintnate'
i
)
''' $paSinitts': r""';r''
*i*:'*#;':.r*i.:''|"
r'
'iir
$Paginate'= "<a
hief =' $tqigeLpage&page: $Lds tpitgeml' >$ r,astpage!$1< / at " ;
' :r$paginaLe,=.'<A... . .I
$lastpage = cei] ($tota13agss7$1imit) ;
... $LagtPaQreril .* $las.tpage * 1; ., ...t .;.. href = ' $ targetpageapage= $ lasEpage ' > $ Iastpage< / a> ";
)
/:l..Middlc. .hide isome f.rsnt and somq beck
. elEeif (.$Irastpage * '($stages *. 12)i'r'',,>:'$page &&
...
Spage> ($sLages*2))
(
.,,.'- $paginard.; "<a.. . ',, . ..
hi.efi'$tai$etpage&page5,L'>I</a>!.i, .,: ':::..:.::..

$paginate.= "<a
href-'$tarEetpage*pig.e*2 1>21.14{>!) l. ; ' ,,r',,
'i. .
.'

i..'ri:l: , .r.,, $.pAgihqler,'.,l,;.r'i,<d[iv 61a9,s=,pagri,eaEe''t.,>,) ;

i,,, gpaginllte .= .!.,;...... ,' j.., ., ,.,,..,,,
,..,..r'ii.rr ,,,1,,,.

// Previous .i.:,,',i,.,'',,r:rfcii 3^- (..$counter."'i

/a^^..-!^- c-.^-^ t^>---
- $paqd,'''-.'$st:age.,9.:.i
.'.; ::..: ,.::... if {$paqer',r,i.1}{:,,,1. '...:,: $counter <= $page + $stages; $counter++)
Spaginate.= "<a ''r..:i - .t
t
href* ' $iargetpage&page:Sprev' >Previou,s< /a> " ; ,.. ,. .,,i1 .,.{$counter =,=::$Oaqe}.( .'.-
,t;'t ..... . , ..,: ..,:: I gl$g { :.:: . .:
,. ,. :: $Paginate.= "<span
$paginate.- "<span class='current'>$counter<lspan>"i " ri' .

,t,, ,. ii ..,..i. ,.
i.lass*..'disabled'>Previous<lspan>"; I )else{ ,

$Paginate'= "<a
hre f = ' $ targetpage&page= $counter '> $counter< / a> " ; )

/ / Pages
**:ffiilil;#ffiffii,i.I.i'],..,..,i,|ff+,.*....1'i,,!,,i,' ;;#;*:*;ffi
ittl+lf:tsii}l,.11ffi "liii:t\I#tr1:if""Yi :.,:::::::,:.,,:li:,+: t*iX,*+*:::;4if*ilSiFE$l:'Hfffr's'f1i,,1".i*,..
i:iiii+;i;
i;:.,:,.,.:;':,::::i;:r'

#fit;frffi;9,*;i"i'l'riir.dffi
.r]f- ' : !!!::!::.::.n:
T;i--,:ir,#Eiifft-ffi1.#
_::_" ',.ir|:.!'!i:::::::b:':iiiii:::iii:: -:i

;n**,ruir.rirxii;mg Xx*l*ii..',, ,,..,1..,1.,;*.;.=!;,ili:1ii, Wt ;f'.'ff",i1'1ff,ffi;{#*-.ff;:,}:ti+:,,;r'i+1,+:.',ru'',:

i1.,,
+.i.., "-'q*i?1l[#tijli;+ii+,u,tt+r,,.i.ii|:** 'i**-:]}**ffi,. ,;.J,,,,,,r,ffi'0ffi"

. .!-"Cy.ii?t+ri#l:!iCf;t&E+91i ;:h ,ir:* . .,.:. . .. '::+.: :'"t.. i. ;'ri* :':ii;. , . :::i:iiiii:r.,:riii+i

.. "
.
;.:!;i:,::ii;, '.
:'t, i '.: ": rtliil}i6: I4!i!*!!iili5 " :.
,,,',',, :
'r.':':,r,::,:i j,ii:e4}!;, ''' ll,- '.i;. j:'::::i:f.,,,"':rii:::*i:1.
nrut6;.1obi" b.rdq=: o.
Y::*-+;Ht{i
!!: .lltirl
i :!! '
rd widrh=,2t, attrn=.c6re!,><h3
<fotu id='raElenrry,, rame=tton1, .1ign..c.nr6!' c1..8=,,sry163,> <Epan
acrion=.<?=sPHP SELA?>" herhod='DoEti> cla.6=r.tvl.5r>No</.p.n)</hl></tal>
 , ...<td width="43t" Align="center">{h3
al.ign:''center!r, .class=lsey1e3 1 > <$pan < / F-Pq.n"
cla.s5*,1ts1y1e5n>Art.i<./.spietljL>7/h3></td> ..,. .. ; ,.i </a>.
<td>< / td> < /div>
width="458' alisn='center'r{}:.3
....<td;, </div>
el-,igri-,,reerit.€f ' ,,c1a3s=!q!ylq3': <qpan' ....,. '.' </td>
cl-ai's=l'sty1e5.>iadis?<l;ra$i"lh3;"1'gq! ',,'' .i:r ' ,,, '' ,, ' , </a>
</tr> </tr>
<?php /\ Dhh^
; YIIP
,lr'..
. ': ..:: - '
.. .iiihi {.$r:ow = .. ..,i..,
", '
?l
1e...
''
. , .:t
,.t

myBq}"fefch*dffay{$ietiu1L}i...' t.' .., . <t!>

{ <Ed colspan="4" aIign="center"><?php echo
?> $iotiil_-pages, Results' ; echo $paginate; t>anbsp.; </td>
<tr> '' </tr>
.:' <td a1ign= ' 1eft * V-a1i g:}.F.'middle " >
], 11.,.: .. </tabLe>
: '.r <a.. href." . ldetail-hadi's,t..php:tlpe-<?php -echg
$--GE" tqfpBI ; ?>&ha1=<?B!rpi echo $rorr[,]number:' ] ;,'?>" ><5pa4 ... i ' <ldiv>
i1a$s.=i,.m1'tgt,''>{.?phpecho,$ryowI.nrmher,];?>&nbgpi.<lsE,an;</a> </arLicle>
</td> < / secLion>
.
.,i
.i:., : <td> .i

<div dir="Itr" < foot:er>

align: " justifyl >'l :'. ,: .,:'
: . ..
.i

,'',<div align='rightqila </ fqoter>

href,:'.rldetail*hadiQE;,php?tl4)e:<?php echo"$*€Ef IE](,eI ' i?>&ha1;<?ph$
echo Srow['number' ] ;?>" > <l-;.,C1osing the #page section --l
,. {.spall. class="mlist'l
<?php </ body>
< /html >
fcr' ($i=1; $i<=25; $ii+) <sEyle typd: " text/css">
{ <l*-
echo ($kata) ; .ml"ist {coior: *ffffff ;
echo(" "); padding:2px Apx;
$kata=strtok(" "); dj splay:b1ock;
]?>... font*family :' " Scheherazade ";
src : url- ( ScheherazadeRegOT. t.t.f );
</div> fonE-size:1Spx;
< /div> , font-iLyler normal; ,

. i r < ltd, . ,, r,.r,. ,,.. line-height: normal;

.,
1.,
,. .. ,,.... .,., . ,
.. .

<Ed> font*variant: nonnalI

</td> text.-align: justify;
. :. irhi t,e-Space :r'.. nofi[al i
<td> width: 1008;
<d;iv.,diiinr,g,!n align:{ justi.t}r!'> . ,..ii
.,','. .
1 ine-height:120*; )
.,i.ir'1,.i r'. . tdiV align=(i.ightuS<a'i .i"'iti','.. ,.,
.cfist. {color: #CCCCO0;
tri*C*, .ldelail-hiaisitr.phpltype-<?Btrp- echo i$*rGST{tf,pel i'i ?>&}ral-<?php paddiogr?px 4pry; ': i

eclio $fc,!(t.iri1.1*lnber,'llrl ; ?:?)' 7'. 'i 'r"rr': .:'rrrr'" : '::: :: ' display:blocki ,- ..
'..
... .11..<.6pan :i1asB*"c1ist "> font-family:'Scheherazade" ;
<.?PhF. :rr'. I .-rr: . arc : uril SchehalrazaddReg0?., tt f ) ;
.(

Skaiaistrtqk { $rql{,l I can'Ewtt] l .," ' } ; font-size: 23px,.

for ($i*1; gi<=25; $i++) f onE-styIe: normal ,.

-{ line-height : itbrntal ;
echo($kata); font-weighL: normal;
echo(" "); f ont-varianE : norma1,.
$kata=sErtok(" "); lext-align: Just i fv;
)?>... whiLe-spaco : lrollrrnl ;
 i$$g.xtt:ruiir$I}e$e+ :.,
,\:,::,1;1,:,,;l;1:111:,:1:;:'1

e3,aa
r{:l: r,iillllrii

$p$qle:,,,ir:r r[rhs]]rr',r'r,,,
$pre=gpage-1;
$next= $page+ 1;

</head>
<body onload='window.scrollTo(0, 1) ;'>
with the section tag -->

., ,l:::r.'1,,

': 'lllr,r:tl
:rir]ritiltiltiir{ ra,:iiiliiiiti]l.i.lLlilltrru,tltrtirr,,,ll
rllllrtliit]lr

1 .. .r'i liilii.l l.'; ..i.i rui lill llriruilliit,,'iiliii

;triil.iurlilj)ll,trlr,,,l,',,,.,ll,il

rtrtiltt trt.':t!,rt,urtr rt tr rr... ..:..,..

...,,r .

,.llll:l1li,rl,t.rt,rt,l.,','',.,
.ililrl.irli;iil .l,lr" r.. : '' :
,rlrrll.li;lrl}-lrr': .. r .'r-

detail_hadits.php ?,&lri1*<? eiho

$page = 1;
$prc e 1,;
'.'',<lheade,]...,ar1.*^,..-,-...
. tdiv class=:11ine"></div>
<div class="articleBody clear">
..:..u:;,$..5;;l1,,'1''*"*":$:ilI.:-,",
class="sLyfe1"><?php echo $row['content' ] ?><,/span></scrong><,/d.iv>
</ div>
<br>
<div cfass=,' Iine,, ></div>
. <spirn class= "meariing'! >"ArLinya I ::lepirn>
<div align;' justilyl> <span
clelss*"$eanlng" > <?php echo.'.'1.'. $row['meanins'] ?>
</ span><,/div>
</ div>
<footer> <l-- Marking the fboter section -->
BAGIAN 21

.i.<l__Changethecopyrightnot,ice*.>.
UPLOAD KE tnIARKET ANDROID
<,/ f oot.er>
</secEion> <!-- Closing the #page seclion -->
< lbody>
< thtmf >
<s't1rle tlt)et"text/c.ss"> .l
<!--
.sty1e1 {color: #CCCC00;
paddi ng: 2px 4px,'
.: I ,. display : block; I '

.. font-family:. " Scheherazad.a" ;

src : urf (ScheherazadeRegoT. ttf ) ;
font-size: 45px;
font-style: normal;
line-height.: normal;
font-weighi:. normal;
f ont-variant i :eermal;.. .

text -align: justify;

whiEe-space: normal;
widrh:100t;
line:height : 12 0t ; ]
</style>
<?php
mysql-c1ose($con); Pada bagian ini, kita akan membahas bagaimana cara mem-pubhsh aplikasi
android ke market (market.android.com) sebagai market resmi android dari
google. Berikut langkah-lan gkah nplo ad ke market. android. com

Registrasi User Market

Untrrk clapat melakrrkirn upload ke android markct rliwrr.lihkan untllk
ttt('tttlliryirr sehes;rr' $rS rurlrrk selanranya, apallilir Arrrlir titl;rk ingin
membayar, disarankan untuk melupakan upload di market.android.com dan setelah proses enter Anda akan diminta memasukkan keterangan-
memilih market lainnya yang bersifat free untuk upload aplikasi. Untuk keterangan seperti passuord, nama, nama lengkap, organisasi, tempat/kota
melakukan registrasi dapat dilakukan di alamat serta negara. Hasil dari proses itu adalah akan membentuk keystore lota
https://market.android.com/publish/signup seperti gambar berikut ini: yang namanya my-release-key.keystore difolder bin, nama-1tle ini bisa Anda
sesuaikan dengan penamaan yang Anda butuhkan. -ualidaty loooo artinya
r*ilr.rrr ::t.:,-.:, j! -.1,j.1 I - aplikasi kita nantinya validasinya sampai loooo hari, tentunya kalau kita
^ onrror)
*r. inginkan aplikasi hanya bertahan ro hari berarti -ualidafu rc.
s rnarKBI
'retl.1( i:;nt{
8€fore you cm Erbl$h sofuiale s tie An*oid Market, you illsl do thr* things:
Ylem- Pa ckage Apli kasi ( apk )
. l(eatsadoeloF Fofile
.AgrPelolhe@
I Pay a reg{station fer { $2, 00} wlth yo$ credii ctrd Psrrg C*ogle Chekoutl Langkah selanjutnya adalah mem-package apk kita dengan keystore yang
tadi, caranya adalah:
YNr de;ebper proil*will detsnire h0wyou appeail0 etto*sls ifi ltle And&id,,'ltrkel . buka eclipse dan pilih project yang akan kitapublish
0eYeloper llame
o pilih menu android-tools- Export Signed Application Package
Wl'i appes t0 lseri under the na@ 0f yo{f apdicat}on seperti gambar berikut:
Email Addrs r-*q&-
Weki& UIL *1_,_ r &ud'S a*tt'
U$ ry ctntBi!.:
Phsre llumbe. ',i" t# lt Aos"frfl*aldFmi.6
lrolude dus 3gn {ourtfy .ode tr{ asa csde. For examde, r 1{5G?63 00S0. yl]}-dq we ask for ihis?

Email t pdals lfj Conlel rE (casieally abott d@lop@nt ed Mad{el oppodlnitres.

f,mAr
$!bu$fJ 6gst$gFtdl$lkdbn P.doga-
*$d* Eryorl lh*J[i.d Aer*do r.&gr-.
Txn frr$rydqh&ade
CrtrpeWalr S$ffmA?rfi.nfi Pxlrg.
r
6on{nug
RtrlEIYP:
Afilroir, loolr
* rddcwpdilitiityth*y-,
f{PpjxrM&3

Setelah melakukan pendaftaran, kita akan dapat melakukan upload aplikasi

Selanjutnya penentuan key store selection
ke market.android dengan mengikuti petunjutk-petunjuk yang sudah dibuat
brouse tempat my*release-key.keystore yang telah kita buat serta
oleh google.
passwornya seperti gambar berikut:

Mempersiapkan Release Keystore

Gunanya ini adalah untuk generate public/private key serta masa validasi
aplikasi yang akan kita publish. t angkah-langkahnya adalah sebagai berikut:
o start - run - cmd (linux machine = terminal)
. masukke direcotry binfolder jdkinstllation
o ketikkan perintah seperti berikut
keytool -genkey -v -keystore my-release-key.keyatore -aIias
alias-name -keyafg RSA -keyrizo 2048 -valldity 10000
 la{ $.rle r

User Revrews Frlter Dlsnnls

On.janniry:I.r01:rerurrlrrn.lrldsDwhdrreinvn!,ne(la*r{on!oe i*s-..prrailr.tsihers$r&ie.tsfit.6dLttlrLrseislansui$e.dtic.
3pp lef$rm 3.i 5l.r mlirr!

{,ri5 etXl:f$l 1, 168t*i'.1*i 16..::.ii1?r r.r:{irilselj rree L@8]!! r pilblLhed

l-' ;l Applrdirtrs BDqi:s * REfe..ncr elata$t 11 561 rrs iNbl: ins*sl A$r&lelullj!
J"-ln lulqlts l0 i2l1)"ji**-1it:, 1lr19iiDirlrillallsiriersl rree ta$-j13] Prbiishsi
*:l A$liiliiis Ediliitirn iIsl]]l3 i0 i:la n, 1..iailr idd.i"l &f,B)c!&-!ft

Sl11 i:.'ittr'::. 'i:. i I 'r'{- '..,''. ' '. r,.e u!'pdbr.(trp,1

lr'illll +c :: ,o' .. 1,, , i!$&!h ,lstrt hildk ii.t3t

upk]sdaprr;eft]n
[I

Pilih tombol Upload Application untuk melakukan upload apk baru.

Selanjutkan akan muncul isian untuk browse apk yang akan di-upload
seperti gambar berikut:

selanjutnya penentuan key alias selection.. pilih combo-nya kemudian

masukkan p as sw or d my-relase-key-nya.
a selanjutnya penentuan posisi hasil akhir apk.
a sampai di sini apk tersebut sudah siap di-upload ke market.android

Upload apk ke Market

Selanjutnya adalah melakukan upload apk yang sudah kita buat pada
langkah-langkah sebelumnya dengan membuka alamat
https://market.android.com/publish/Home seperti gambar berikut:
Broutse posisi apk yang telah kita buat pada langkah sebelumnya.

Pada tab products details akan muncul seperti gambar berikut

 I i(!l'1.1 la.: l(

La0guage | 'En8lkh {en} I

*3d,laocsase Star siqm (") indicdEs the default language

ScreBh& Add a screaoshol Sc,eensh*: Iiile {Engltuh}

'treasr? I:M l,l8qrel 320 x d80, 480 x 80{. 48* x 65d.
l?80 x 720 1280 x 800
0 chsracters (30 max)
?4 bil PNC oTJPEO ino alF&ai
Flil bl*d. no bardtr in a( Bescripton (Englishl
You ilay spload sc(genshols n
iands€ape onenlaiim Be thrmbnails
will apt€tr io bo rok.d, bul lhr rclual
images andthei medarons will tts

High R$hlis Applicalion Ad{, a hiies apdcdron ftr: Hi0h Reslulioo Applialion lconi
512 \ 512
32 l,it PIJG tr JPEG
Muimumr
0.hsrelers (4000 rux)
1024 K6
PrmlionalGraphi( MarEo@tmalgaphrr Prm Graphicl Rmot Changes {English)
oPto,,a tqgd--l lup'qr{-.j i80w x 120h ,Learn Morql
?,1 hl P|,lG or JPEG ino alpha)

Featurc 6r.phic Add a leatur. graFh€ Featu,e G.aphic:

10r{ r 500
lle€ri ft'lorel 2{ bit PNG oTJPEC {no alphai
Will be dosnsrzed le mni or ecrc

P.motimal Ulds 4S € ,!9to.!9!4 ddeo lina. Prmdional Vids:

odmx* h|9l/ Enler YouTube URI 0 charEcters (500 ,rox,

oil3u! t?-JOo na gomte my apdie*iof, ex.epi in Anded L,lskri and in ey Geogle.otrerJ online or nsbrle Promo Text {foqlish}
"artetif,g pose(ies. I sndeistedthd any changes lo ihis Fete,cflce mEytake $i*!.da',$ ls ta*e eflst.

L irl;nl dri;it! 0 .harelers (80 maxJ

Langurge I'€f,glirh l€rl I Iype
add lanauil€ St* slgfi (') ifl&cder lhe de{ilit langualq
Applicarion Select -

Persiapkan gambar sesuai ukuran yang ditetapkan, gunakan aplikasi Selanjutnya penentuan tipe aplikasi apakah berbayar atau gratis serta
pengelola gambar seperti photoshop untuk mendesain dan menentukan penentuan negara-negara mana saja yang boleh untuk melakukan instalasi
ukuran prxel sesuai ketentuan yang diminta, ukuran file dan pixel gambar aplikasi nantinya seperti isian gambar berikut:
haruslah diperhatikan. Setelah tahap ini adalah untuk mengisi tentang
deskripsi aplikasi yang akan kitapub/uh diisian seperti gambar berikut:
 Pri c ing F re E !'r'art to sell s*phca tler sf :el!j.-a i.,l*r. t3jlA,.it:Sli|l_{1;_q-r-,J! t I: i lt tl

m All Countries

X &rgs.,o.tn*.- $--l t.;tvie

Lr{.i&r"Larralia ldlLirnuasi.s
iJ-iAustrt" i?lLu:em$our$
|{lPai$un idl[]nl!g
ii* F.me,rl l{ilrle":l._s
i{.1 nutuala idlNetlorliurir
i{ tat*erq!,n illilew Iealand
Ui -La-r:-a{a lll r'ira$Su;
lel plle*,illsllc iilU13t1.gl
,ri{}pI!:
itiCzectr l-lqlublj!
tl&rf,esrsr
iiljegai*
DAFTAR PUSTAKA
lc t'elrnarli vlf,sa-usal
i?jEiil!,rc *lRnmania
vtuls-r,l i:fl Rus=ia
$.r&t:rc id $er:csal
:/ urlhnanl, iYiSirsoFore

selanjutnya untuk contact information, masukkan website Anda dan email

serta phone sebagai informasi yang bisa dilihat oleh user yang akan
melakukan instlasi aplikasi anda apabila user memerlukan contact alau
ingin menghubungi deueloper yang telah buat aplikasi tersebut, seperti isian
gambar berikut:

Android Developer Guide : http://developer.android.com

Android Programming Forum : http://www.anddev.org
Android TM Devlopment, Mark L. Murphy, CommansWare press,
www. github. com/commonsguy
Android TM Programming Tutorials, Mark L. Murphy, CommonsWare
iii.. ills :4lralrn: *eat: Aflo!!!r:i.!1 ;!idg8$ Press,
Android DevlopmentCommunity: http ://www.anddev.org/
fonr ti* LilirC Slat.s li.ier lheq. tar: l.aju !l$p.l
Android Devloper Group Mailing list :android-
clcvclopers @ googlegroups.com
Christophe Coenraets :http: //www.coenraets.org/
Forum DevlopmentSoftware :www.stackoverfl ow.com CATATAN
Foundation PHP :http://foundationphp.com/
HTM5 Application :HTML5 Demos and Examples
HTML5 Demos : HTMl5demos.com
JQUERYMobileFramework jquerymobile. coml
JQueryMobile Gallery Application :wwwjqmgallery.com/
Learn creative and technical skills :www.tutsplus.com/
Linux Kernel Documentation, www.kernel.org
Moodle ;http ://www.moodle.org
Mobile Tut Plus ;http://mobile.tutsplus.com/
NazruddinSafaatblog's :http://www.nsafaat.wordpress.com
Professional Android Application Development, Reto Meier,Wrox Press,
www.wTox.com
Tutorialzine : Web dev Tutorial and Resources : http://tutorialzine.com/
W3C Foundation :www.w3c.org
W3Schools Online Web Tutorials :www.w3schools.com/
WebApps Mobile Adobe Dreamweaver CS 5.5. : www.adobe.com