You are on page 1of 48

BAB III

PERANCANGAN DAN IMPLEMENTASI

Dalam penulisan ini, penulis merencanakan membuat aplikasi mobile yang


akan menampilkan peta lokasi serta alamat dan/atau profil dari Showroom Bengkel
Mobil di wilayah Bekasi. Proses pembuatan aplikasi ini melalui beberapa tahapan,
antara lain:
1. Perencanaan Aplikasi
2. Pembuatan Struktur Navigasi
3. Perancangan Tampilan
4. Pembuatan Aplikasi
5. Implementasi

3.1 Perencanaan Aplikasi


Dalam penulisan ini, penulis merencananakan membuat aplikasi Mobile
yang akan menampilkan peta Bekasi dan showroom mobil yang disertai dengan
informasi dari showroom tersebut. Di dalam aplikasi ini tidak hanya akan
menampilkan peta lokasi, tetapi juga menampilkan informasi yang berupa alamat
dan hal lainnya yang berkaitan. Aplikasi ini terdiri dari beberapa bagian utama,
yaitu Peta Showroom, Petunjuk, Tentang dan Keluar. Bagian-bagian tersebut
ditampilkan dalam bentuk menu pilihan untuk memudahkan pengguna aplikasi
mengakses informasi peta lokasi showroom mobil yang ada di Bekasi. Selain itu
pengguna juga dapat mengetahui informasi profil dan/atau alamat dengan meng-
klik salah satu showroom yang dipilih. Dengan dibuatnya aplikasi ini, diharapkan
pengguna aplikasi akan lebih mudah mendapatkan informasi dan peta showroom
mobil yang ada di Bekasi.
Hal yang dilakukan penulis pertama kali adalah memilih bahasa
pemrograman yang akan digunakan dan pokok bahasan atau materi-materi yang
akan digunakan. Kemudian penulis melakukan pengumpulan data-data baik
berupa gambar ataupun artikel dari internet yang berkaitan dengan aplikasi.
27
28

Aplikasi ini dibuat menggunakan Android SDK sehingga aplikasi ini akan
berjalan di platform ataupun handphone Android. Penulis memilih membuat aplikasi
Mapping pada Sistem Operasi Android karena Sistem Operasi Android bersifat
terbuka (open source), artinya sistem ini dapat dan boleh diubah, ditambah dan
dimodifikasi isinya. Dan tidak lupa juga Sistem Operasi ini sudah banyak dipakai
pada jenis handphone dan menjadi Sistem Operasi untuk masa depan yang terus
dikembangkan.

Ciri aplikasi Mobile Mapping pada Android adalah, yaitu :


1. Pengguna dapat memilih dengan memilih menu pilihan.
2. Aplikasi ini akan menunjukan peta lokasi dari suatu lokasi.
3. Aplikasi ini akan menampilkan alamat dari suatu lokasi.
4. Aplikasi ini akan menampilkan informasi yang berkaitan dengan suatu
lokasi yang ditunjukan dalam aplikasi tersebut.
5. Dalam peta di aplikasi ini pengguna dapat melakukan Zoom in dan
zoom out ataupun Satelit view dan Street view.
6. Aplikasi ini akan berjalan di platform ataupun handphone Android.

3.2 Struktur Navigasi


Struktur navigasi digunakan sebagai penuntun alur sebuah aplikasi
multimedia atau dapat pula dianalogikan sebagai diagram alur dalam perancangan
bahasa pemrograman. Struktur navigasi berfungsi untuk menggambarkan dengan
jelas hubungan dan rantai kerja seluruh elemen yang akan digunakan dalam
aplikasi. Jenis struktur navigasi yang diimplementasikan pada aplikasi ini adalah
jenis struktur navigasi campuran (composit), karena merupakan gabungan dari
jenis struktur navigasi linier (mempunyai 1 rangkaian cerita yang terurut) dan
struktur navigasi hirarki (bercabang).
29

Gambar 3.1 Struktur Navigasi


30

Gambar 3.1 merupakan Struktur Navigasi yang digunakan dalam


penggunaan aplikasi ini, penjelasannya adalah sebagai berikut :
1. Halaman Loading
Halaman ini adalah yang pertama kali dijalankan ketika aplikasi ini
berjalan, setelah loading selesai maka program akan memanggil form
selanjutnya yaitu menu utama.
2. Halaman Menu Utama
Di menu utama program, akan ditampilkan empat buah pilihan, yaitu
Peta Showroom, Petunjuk, Tentang dan yang terakhir Keluar. Menu Peta
Showroom berisi pilihan merek mobil yang akan dicari. Menu Petunjuk
penggunaan berisi mengenai cara penggunaan dari aplikasi ini. Menu
Tentang berisi mengenai informasi dari aplikasi dan informasi dari
penulis. Menu keluar digunakan untuk keluar dari aplikasi ini. Setiap
pilihan menu yang telah dipilih, maka pengguna dapat kembali ke
halaman menu utama untuk memilih menu-menu yang lainnya ataupun
dapat keluar dari aplikasi.
3. Halaman Petunjuk
Halaman ini akan memberikan informasi cara penggunaan dari aplikasi
ini.
4. Halaman Tentang
Halaman ini akan menampilkan mengenai informasi dari aplikasi ini dan
juga informasi mengenai pembuat aplikasi.
5. Halaman Peta Showroom
Ketika memilih pilihan Peta Showroom maka akan ditampilkan menu
baru yang berisi pilihan merek mobil yang akan dicari yang semuanya
ada 12 pilihan (Toyota, Honda, Daihatsu, Proton, Mazda, Suzuki, Ford,
Nissan, KIA, Isuzu, Hyundai, dan Mitsubishi ).
6. Peta Semua Letak Showroom Mobil di Bekasi.
Di halaman ini akan ditampilkan peta lokasi dari semua showroom
mobil di Bekasi yang dipilih berdasarkan jenis merek mobilnya. Peta
31

yang ditampilkan disini adalah peta lokasi showroom mobil sebelum


dilakukan perbesar / perkecil.
7. Showroom Mobil di Bekasi Perbesar atau Perkecil.
Pada halaman ini akan ditampilkan peta lokasi dari salah satu showroom
mobil di Bekasi yang dipilih berdasarkan jenis merek mobilnya. Peta
yang ditampilkan disini adalah peta lokasi setelah dilakukan perbesaran
atau perkecilan.
8. Showroom Mobil di Bekasi dengan Mode Satelit atau Mode Jalan.
Pada halaman ini akan ditampilkan peta lokasi dari salah satu showroom
mobil di Bekasi yang dipilih berdasarkan jenis merek mobilnya. Peta
yang ditampilkan disini adalah peta lokasi setelah dipilih menggunakan
mode Satelit view atau Street view.
9. Info Salah Satu Showroom Mobil di Bekasi.
Dalam halaman ini akan ditampilkan informasi dari salah satu
showroom mobil di Bekasi yang dipilih berdasarkan jenis merek
mobilnya. Informasi yang ditampilkan berupa alamat dan/atau profil dari
showroom mobil yang dipilih berdasarkan jenis merek mobil.

3.3 Perancangan Tampilan


Untuk mempermudah pembuatan aplikasi, maka penulis membuat
rancangan awal aplikasi yang terdiri dari tampilan pembuka (loading) untuk
halaman pembuka, tampilan menu utama, tampilan Peta Showroom, tampilan peta
showroom mobil dan tampilan info, tampilan Petunjuk dan tampilan Tentang.

3.3.1 Rancangan Tampilan Halaman Loading


Halaman loading adalah halaman yang akan pertama kali tampil pada
aplikasi. Untuk rancangan tampilannya, akan digambarkan melalui rancangan
dibawah ini beserta penjelasannya.
32

Mapping Bengkel Bekasi

Background Gambar
Andorid

Progress Bar

Gambar 3.2 Perancangan Tampilan Loading


Gambar 3.3 merupakan gambar rancangan tampilan untuk halaman loading.
Tampilan ini berfungsi sebagai tambahan interface dalam aplikasi sehingga
tampilan lebih interaktif dan menarik bagi pengguna. Sebelum pengguna masuk
ke halaman selanjutnya maka akan ditampilkan loading, dan menghilang dengan
sendirinya kemudian dilanjutkan dengan ke halaman berikutnya. Dalam tampilan
di atas terdapat berupa gambar android dan sebuah progress bar.

3.3.2 Rancangan Tampilan Menu Utama


Halaman ini merupakan halaman yang digunakan sebagai menu utama
dalam aplikasi ini. Dalam halaman ini terdapat menu-menu pilihan yang dapat
dipilih oleh pengguna. Adapun gambar rancangan tampilan serta penjelasannya
dapat dilihat melalui gambar dan penjelasan dibawah ini.
33

Menu Utama

Peta Lokasi
Showroom & Bengkel Mobil
Daerah Bekasi

Peta Showroom

Petunjuk

Tentang

Keluar

Gambar 3.3 Perancangan Tampilan Menu Utama


Gambar di atas merupakan gambar rancangan untuk tampilan utama dalam
aplikasi ini. Dalam tampilan di atas akan ditampilkan judul dari program ini.
Kalimat yang akan ditampilkan disini adalah Peta Lokasi Showroom & Bengkel
Mobil Daerah Bekasi. Kemudian akan ditampilkan pilihan berupa button menu
dari program ini, yang akan ditampilkan adalah pilihan Peta Showroom, Petunjuk,
Tentang, dan Keluar.

3.3.3 Rancangan Tampilan Halaman Peta Showroom


Halaman ini merupakan sebuah halaman yang digunakan sebagai menu
pilihan jenis merek mobil. Dalam halaman ini terdapat menu-menu pilihan jenis
merek mobil yang dapat dipilih oleh pengguna. Adapun gambar rancangan
tampilan serta penjelasannya dapat dilihat melalui gambar dan penjelasan
dibawah ini
34

Pilih Merek Mobil

Daihatsu

Ford

Honda

Hyundai

Isuzu

KIA

Mazda

Mitsubishi

Nissan

Proton

Suzuki

Toyota

Gambar 3.4 Perancangan Tampilan Peta Showroom

Gambar di atas merupakan gambar rancangan untuk tampilan menu pilihan


jenis merek mobil dalam aplikasi ini. Dalam tampilan di atas akan ditampilkan
judul dari program ini. Kalimat yang akan ditampilkan disini adalah Pilih Merek
Mobil. Kemudian akan ditampilkan berupa spinner menu pilihan merek mobil,
diantaranya Toyota, Honda, Daihatsu, Proton, Mazda, Suzuki, Ford, Nissan, KIA,
Isuzu, Hyundai, dan Mitsubishi. Dan tombol Cari Lokasi berfungsi untuk
menampilkan ke halaman selanjutnya (Halaman Peta).

3.3.4 Rancangan Tampilan Halaman Peta


Halaman ini merupakan sebuah halaman yang akan menampilkan peta dari
showrrom mobil di Bekasi. Dalam halaman ini terdapat menu-menu pilihan
diantaranya perbesar, perkecil, Satelit view dan Street view. Adapun gambar
rancangan tampilan serta penjelasannya dapat dilihat melalui gambar dan
penjelasan dibawah ini.
35

Satelit Jalan

Gambar Lokasi Bengkel

+ -

Gambar 3.5 Perancangan Tampilan Halaman Peta


Gambar di atas merupakan gambar rancangan untuk tampilan peta dalam
aplikasi ini. Pada bagian ini akan ditampilkan peta lokasi showroom mobil di
Bekasi berdasarkan jenis merek yang dipilih oleh pengguna. Untuk lokasinya akan
ditandai dengan sebuah marker yang berada di dalam peta tersebut. Pada tampilan
ini terdapat beberapa tombol seperti, Zoom-, Zoom+, Satelit, Jalan. Dibagian
Zoom berfungsi untuk memperkecil gambar peta lokasi dari wilayah Bekasi.
Bagian Zoom + berfungsi untuk memperbesar gambar peta lokasi dari wilayah
Bekasi. Pada tombol satelit untuk melihat peta lokasi dari showrrom mobil di
wilayah Bekasi dengan mode Satelit. Dan tombol jalan untuk melihat peta lokasi
dari showrrom mobil di wilayah Bekasi dengan mode Street atau jalan.

3.3.5 Rancangan Tampilan Halaman Info


Halaman ini merupakan sebuah halaman yang digunakan sebagai halaman
info dari showroom mobil di wilayah Bekasi. Dalam halaman ini akan
ditampilkan informasi dari showroom mobil untuk alamat dan/atau profil
showroom tersebut. Adapun gambar rancangan tampilan serta penjelasannya
dapat dilihat melalui gambar dan penjelasan dibawah ini.
36

Info Fasilitas

Nama Bengkel

Gambar / Foto

Bengkel

Informasi Bengkel

-alamat
-nomer telpon
-fasilitas

Gambar 3.6 Perancangan Tampilan Halaman Info

Gambar di atas merupakan gambar rancangan untuk tampilan info dalam


aplikasi ini. Dalam bagian ini akan ditampilkan judul info dari showroom atau
nama showroom yang dipilih oleh pengguna. Kemudian akan ditampilkan gambar
info dari showroom mobil yang dipilh oleh pengguna. Dan informasi pada
showroom mobil yang dipilih oleh pengguna di wilayah Bekasi berupa alamat
dan/atau profil showroom tersebut. Informasi yang ditampilkan setelah pengguna
mengklik salah satu showroomnya (marker).

3.3.6 Rancangan Tampilan Halaman Petunjuk


Halaman ini merupakan sebuah halaman yang digunakan sebagai halaman
untuk memberikan panduan informasi penggunaan dari aplikasi ini. Adapun
perancangan tampilannya seperti dibawah ini.
37

Menu Petunjuk

Peta Lokasi Bengkel Bekasi

Detail Petunjuk

Gambar 3.7 Perancangan Tampilan Halaman Petunjuk

Gambar di atas merupakan gambar rancangan untuk tampilan Petunjuk


dalam aplikasi ini. Dalam bagian ini akan ditampilkan judul dari halaman ini.
Kalimat yang akan ditampilkan disini adalah Peta Lokasi Showroom Bekasi.
Kemudian akan ditampilkan keterangan petunjuk penggunaan dari aplikasi ini.

3.3.7 Rancangan Tampilan Halaman Tentang


Halaman ini merupakan sebuah halaman yang digunakan sebagai halaman
untuk memberikan informasi dari aplikasi ini dan juga mengenai pembuat
aplikasi. Adapun perancangan tampilannya seperti dibawah ini.

Menu Tentang

Peta Lokasi Bengkel Bekasi

Detail Tentang

Gambar 3.8 Perancangan Tampilan Halaman Tentang


38

Gambar di atas merupakan gambar rancangan untuk tampilan Tentang


dalam aplikasi ini. Dalam bagian ini akan ditampilkan judul dari halaman ini.
Kalimat yang akan ditampilkan disini adalah Peta Lokasi Showroom Bekasi.
Kemudian ditampilkan informasi dari aplikasi ini dan juga informasi mengenai
pembuat aplikasi.

3.4 Pembuatan Aplikasi


Untuk membuat aplikasi ini, penulis menggunakan script Java dan xml,
dimana script keduanya saling berkaitan antara Java dan xml nya. Script Java ini
berupa kelas-kelas Java yang tersimpan dalam file dengan type .java yang
disimpan pada direktori C: \Users\ aga\ workspace\ MappingBengkelBekasi\ src\
com\ aga\mapping. Sedangkan untuk script xml berupa tampilan interface yang
tersimpan dalam file dengan .xml yang disimpan pada direktori
C:\Users\ade\workspace\MappingBengkelBekasi\res\layout.

3.4.1 Pembuatan Android Manifest (Permission dan Library)


File AndroidManifest.xml diperlukan oleh setiap aplikasi Android karena
file ini merupakan permission dan library pada suatu aplikasi. Diletakan pada
folder root aplikasi, dan mendeskripsikan nilai global paket aplikasi nya.
Termasuk komponen yang ada pada aplikasi (activity, service, dll) yang memang
diekspos untuk sistem diluar aplikasi yang membutuhkan. Termasuk juga data
pada tiap Activity aplikasinya, bagaimana menanganinya dan bagaimana
diluncurkan (launched). Hal yang penting yang harus diperhatikan dari file
AndroidManifest.xml adalah intentFilters. intenFilters menjelaskan dimana dan
kapan saja activity dijalankan.

<?xml version="1.0" encoding="utf-8"?>


<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.aga.mapping"
android:versionCode="1"
android:versionName="1.0">
39

<uses-permission
android:name="android.permission.INTERNET" />
<uses-permission
android:name="android.permission.ACCESS_COARSE_LOCATION" />

Script di atas merupakan titik root utama dari AndroidManifest.xml yang


berisi atribut paket (package-atribute), yang menjadi titik dari semua paket pada
Activty. Path Activity lain secara relativ akan mengacu pada nilai ini. Kemudian
uses-permission menjelaskan tentang security permission, yang harus diberikan
agar aplikasi / activity bisa secara benar beroperasi (misal ketika mengakses
internet). Permisi ini diberikan kepada pengguna ketika penginstalan aplikasi.

<application android:icon="@drawable/icon1"
android:label="@string/app_name">
<uses-library android:name="com.google.android.maps" />
<activity android:name=".loading"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="menu"
android:label="Menu Utama">
</activity>
<activity android:name="menu2"
android:label="Pilihan Jenis Merek Mobil">
</activity>
<activity android:name=".help"
android:label="Menu Petunjuk">
</activity>
40

<activity android:name=".about"
android:label="Menu Tentang">
</activity>
<activity android:name="semua"
android:label="Peta Semua">
</activity>
<activity android:name="toyota"
android:label="Peta Auto 2000">
</activity>
<activity android:name="daihatsu"
android:label="Peta Daihatsu">
</activity>
<activity android:name="ford"
android:label="Peta Ford">
</activity>
<activity android:name="honda"
android:label="Peta Honda">
</activity>
<activity android:name="isuzu"
android:label="Peta Isuzu">
</activity>
<activity android:name="kia"
android:label="Peta KIA">
</activity>
<activity android:name="mazda"
android:label="Peta Mazda">
</activity>
<activity android:name="mitsubishi"
android:label="Peta Mitsubishi">
</activity>
<activity android:name="nissan"
41

android:label="Peta Nissan">
</activity>
<activity android:name="proton"
android:label="Peta Proton">
</activity>
<activity android:name="suzuki"
android:label="Peta Suzuki">
</activity>
<activity android:name="hyundai"
android:label="Peta Hyundai">
</activity>
<activity android:name="infofasilitas"
android:label="Info Fasilitas">
</activity>
</application>
<uses-sdk android:minSdkVersion="10" />
</manifest>
Blok program di atas akan mendeklarasikan semua permission yang
digunakan pada class java yang sudah dideklarasikan. Apabila pengguna ingin
activity yang pertama bisa langsung dibuka, maka pada activity yang pertama
harus mendukung MAIN dan LAUNCHER. Kemudian pada script di atas terdapat
elemen <uses-library> dengan android:name=com.google.android.maps, yang
berfungsi sebagai tanda untuk menggunakan Android API.

3.4.2 Pembuatan Halaman Loading (loading.java)


Kelas ini merupakan sebuah script yang nantinya akan membuat tampilan
loading untuk program ini. Kelas ini adalah activity pertama yang dijalankan oleh
program.
42

super.onCreate(savedInstanceState);
setContentView(R.layout.loading);

Blok program di atas berfungsi untuk memanggil script xml (loading.xml)


pada program ini. Fungsi yang dipanggil merupakan layout atau user interface
dari class loading.java.
public void run()
{
while(status < 100){
status = loading();
handler.post(new Runnable() {

Blok program di atas berfungsi sebagai pengaturan waktu pada saat animasi
berjalan. Program melakukan perintah while hingga variabel status kurang dari
100, dimana variabel status dideklarasikan sebagai variabel loading.

Intent inten = new Intent(MappingFasilitas.this, menu .class);


MappingFasilitas.this.startActivity(inten);
MappingFasilitas.this.finish();

Blok program di atas berfungsi untuk memanggil class menu.java setelah


program mengeksekusi class loading yang sudah dieksekusi sebelumnya.

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom"
>
43

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/loading1"
android:layout_gravity="center"
/>
<ProgressBar
android:id="@+id/progg"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_gravity="center"/>
</LinearLayout>

Blok program script xml (loading.xml) di atas merupakan user interface


dari script loading.java. Script ini akan muncul apabila activity loading.java
terpanggil. Pada script di atas juga akan memanggil gambar loading sebagai
background pada halaman loading ini. File yang dipanggil untuk digunakan
sebagai gambar berjenis .jpg.

3.4.3 Pembuatan Halaman Menu Utama (menu.java)


Kelas ini merupakan kelas untuk membuat menu utama pada program ini,
dimana terdapat menu Peta Showroom (pemilihan jenis merek mobil), Petunjuk,
Tentang dan Keluar.

super.onCreate(savedInstanceState);
setContentView(R.layout.main1);

Blok program di atas berfungsi untuk memanggil script xml (main1.xml)


pada program ini. Fungsi yang dipanggil merupakan layout atau user interface
dari class menu.java.
44

View enterButton = findViewById(R.id.button_GoMapping);


enterButton.setOnClickListener(this);
View guideButton = findViewById(R.id.button_guide);
guideButton.setOnClickListener(this);
View aboutButton = findViewById(R.id.button_about);
aboutButton.setOnClickListener(this);
View exitButton = findViewById(R.id.button_exit);
exitButton.setOnClickListener(this);

Blok program di atas akan menampilkan button-button pada script xml


yang sudah dideklarasikan pada script main1.xml, yaitu Peta Showroom,
Petunjuk, Tentang dan Keluar.

Toast.makeText(this, "Peta Showroom Mobil di Daerah Bekasi",


Toast.LENGTH_LONG).show();

Blok Program di atas berfungsi untuk menampilkan layout theme beberapa


detik dengan kalimat Peta Showroom Mobil di Daerah Bekasi".

public void onClick(View v) {


switch (v.getId()) {
case R.id.button_GoMapping:
Intent menu = new Intent(this, menu2.class);
startActivity(menu);
break;
case R.id.button_guide:
Intent guide = new Intent(this, help.class);
startActivity(guide);
break;
case R.id.button_about:
45

Intent About = new Intent(this, about.class);


startActivity(About);
break;
case R.id.button_exit:
keluar(v);
break; }
Blok program di atas berfungsi untuk memanggil class-class yang
dideklarasikan pada button dalam main1.xml. Perintah public void onClick(View
v) berguna untuk menjalankan fungsi sentuhan.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:padding="60dip"
android:orientation="horizontal"
android:background="@drawable/logo1"
android:icon="@drawable/icon">
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_gravity="center">
<TextView
android:text="@string/main_title"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="25dip"
android:textSize="20sp" />
<Button
46

android:id="@+id/button_GoMapping"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/label_GoMapping" />
<Button
android:id="@+id/button_guide"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/label_guide" />
<Button
android:id="@+id/button_about"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/label_about" />
<Button
android:id="@+id/button_exit"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="@string/label_exit">
</Button>
</LinearLayout>
</LinearLayout>
47

Blok program script xml (main1.xml) di atas merupakan user interface dari
script menu.java. Script ini akan muncul apabila activity menu.java terpanggil.
Pada script di atas juga akan memanggil gambar logo1 sebagai background pada
halaman menu utama ini. File yang dipanggil untuk digunakan sebagai gambar
berjenis .jpg.

3.4.4 Pembuatan Halaman Peta Showroom (menu2.java)


Kelas ini merupakan kelas untuk membuat menu Peta Showroom, dimana
didalam menu ini terdapat pilihan untuk memilih jenis merek mobil, seperti
Toyota, Honda, Daihatsu, Proton, Mazda, Suzuki, Ford, Nissan, KIA, Isuzu,
Hyundai, dan Mitsubishi.

super.onCreate(savedInstanceState);
setContentView(R.layout.main2);

Blok program di atas berfungsi untuk memanggil script xml (main2.xml)


pada program ini. Fungsi yang dipanggil merupakan layout atau user interface
dari class menu2.java.

View daihatsuButton = findViewById(R.id.button_Daihatsu);


daihatsuButton.setOnClickListener(this);
View fordButton = findViewById(R.id.button_Ford);
fordButton.setOnClickListener(this);
View hondaButton = findViewById(R.id.button_Honda);
hondaButton.setOnClickListener(this);
View hyundaiButton = findViewById(R.id.button_Hyundai);
hyundaiButton.setOnClickListener(this);
View isuzuButton = findViewById(R.id.button_Isuzu);
isuzuButton.setOnClickListener(this);
View kiaButton = findViewById(R.id.button_KIA);
kiaButton.setOnClickListener(this);
48

View mazdaButton = findViewById(R.id.button_Mazda);


mazdaButton.setOnClickListener(this);
View mitsubishiButton = findViewById(R.id.button_Mitsubishi);
mitsubishiButton.setOnClickListener(this);
View nissanButton = findViewById(R.id.button_Nissan);
nissanButton.setOnClickListener(this);
View protonButton = findViewById(R.id.button_Proton);
protonButton.setOnClickListener(this);
View suzukiButton = findViewById(R.id.button_Suzuki);
suzukiButton.setOnClickListener(this);
View toyotaButton = findViewById(R.id.button_Toyota);
toyotaButton.setOnClickListener(this);

Blok program di atas akan menampilkan button-button pada script xml


yang sudah dideklarasikan pada script main2.xml.

public void onClick(View v) {


switch (v.getId()) {
case R.id.button_Daihatsu:
Intent Daihatsu = new Intent(this, daihatsu.class);
startActivity(Daihatsu);
break;
case R.id.button_Ford:
Intent Ford = new Intent(this, ford.class);
startActivity(Ford);
break;
case R.id.button_Honda:
Intent Honda = new Intent(this, honda.class);
startActivity(Honda);
break;
case R.id.button_Hyundai:
49

Intent Hyundai = new Intent(this, hyundai.class);


startActivity(Hyundai);
break;
case R.id.button_Isuzu:
Intent Isuzu = new Intent(this, isuzu.class);
startActivity(Isuzu);
break;
case R.id.button_KIA:
Intent KIA = new Intent(this, kia.class);
startActivity(KIA);
break;
case R.id.button_Mazda:
Intent Mazda = new Intent(this, mazda.class);
startActivity(Mazda);
break;
case R.id.button_Mitsubishi:
Intent Mitsubishi = new Intent(this, mitsubishi.class);
startActivity(Mitsubishi);
break;
case R.id.button_Nissan:
Intent Nissan = new Intent(this, nissan.class);
startActivity(Nissan);
break;
case R.id.button_Proton:
Intent Proton = new Intent(this, proton.class);
startActivity(Proton);
break;
case R.id.button_Suzuki:
Intent Suzuki = new Intent(this, suzuki.class);
startActivity(Suzuki);
break;
50

case R.id.button_Toyota:
Intent Toyota = new Intent(this, toyota.class);
startActivity(Toyota);
break;

Blok program di atas berfungsi untuk memanggil class-class yang


dideklarasikan pada button dalam main2.xml. Perintah public void onClick(View
v) berguna untuk menjalankan fungsi sentuhan.

<?xml version="1.0" encoding="utf-8"?>


<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/black" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1"
android:padding="70dip">
<Button
android:id="@+id/button_Daihatsu"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_marginTop="1dip"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:text="DAIHATSU" />
<Button
android:id="@+id/button_Ford"
51

android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:text="FORD" />
<Button
android:id="@+id/button_Honda"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:text="HONDA" />
<Button
android:id="@+id/button_Hyundai"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:text="HYUNDAI" />
<Button
android:id="@+id/button_Isuzu"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:text="ISUZU" />
<Button
android:id="@+id/button_KIA"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_width="fill_parent"
52

android:layout_height="30dip"
android:text="KIA" />
<Button
android:id="@+id/button_Mazda"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:text="MAZDA" />
<Button
android:id="@+id/button_Mitsubishi"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:text="MITSUBISHI" />
<Button
android:id="@+id/button_Nissan"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:text="NISSAN" />
<Button
android:id="@+id/button_Proton"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:text="PROTON" />
53

<Button
android:id="@+id/button_Suzuki"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:text="SUZUKI" />
<Button
android:id="@+id/button_Toyota"
android:background="@drawable/tombolhighlight"
android:textColor="#fcfcf9"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:text="TOYOTA" />
</TableLayout>
</ScrollView>
Blok program script xml (main2.xml) di atas merupakan user interface dari
script menu2.java. Script ini akan muncul apabila activity menu2.java terpanggil.
Pada script di atas juga akan memanggil gambar black sebagai background pada
halaman Go Mapping ini. File yang dipanggil untuk digunakan sebagai gambar
berjenis .jpg.

3.4.5 Pembuatan Cuztomize Dialog (CuztomizeDialog.java)


Kelas ini berguna sebagai customize dialog pada halaman peta dan halaman
info. Pada halaman info akan dipanggil variabel nama, info dan gambar.
public class CustomizeDialog extends Dialog implements OnClickListener
{
Button okButton;
TextView lblNama, lblInfo;
ImageView imgMuseum;
54

Blok program di atas berfungsi untuk pembuatan button untuk variabel


nama, info dan gambar.

setContentView(R.layout.dialog);
okButton = (Button) findViewById(R.id.OkButton);
lblNama = (TextView)findViewById(R.id.TextView01);
lblInfo = (TextView)findViewById(R.id.TextView02);
imgMuseum = (ImageView)findViewById(R.id.ImageView01);
imgMuseum.setImageResource(Image);
lblNama.setText(Nama);
lblInfo.setText(Info);
okButton.setOnClickListener(this);

Blok program di atas berguna sebagai desain dan pemanggilan script xml
(dialog.xml). Pada masing-masing perintah di atas juga akan memanggil semua
fungsi variabel yang telah dideklarasikan sebelumnya.

<?xml version="1.0" encoding="utf-8"?>


<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/LinearLayout01"
android:layout_height="fill_parent"
android:background="#F8F7FF"
android:gravity="center"
android:layout_width="fill_parent">
<TextView
android:layout_alignParentTop="true"
android:id="@+id/TextView01"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textStyle="bold"
55

android:background="#308EED"
android:layout_width="fill_parent"
android:text=""
android:gravity="center"
android:layout_margin="0dip">
</TextView>
<ScrollView
android:layout_below="@+id/TextView01"
android:layout_above="@+id/lytBottom"
android:id="@+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_width="fill_parent">
<ImageView
android:id="@+id/ImageView01"
android:layout_width="300dip"
android:layout_height="200dip"
>
</ImageView>
<TextView
android:id="@+id/TextView02"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_width="wrap_content"
android:padding="5dip"
android:text="">
</TextView>
56

</LinearLayout>
</ScrollView>
<LinearLayout
android:id="@+id/lytBottom"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#308EED"
android:padding="5dip" >
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Kembali"
android:id="@+id/OkButton">
</Button>
</LinearLayout>
</RelativeLayout>

Blok program script xml (dialog.xml) di atas merupakan user interface dari
script CustomizeDialog.java. Script ini akan muncul apabila activity
CustomizeDialog.java terpanggil.

3.4.6 Pembuatan Halaman Peta


Kelas ini berguna untuk menampilkan peta dari showroom mobil. Disini
penulis hanya menjelaskan salah satu contoh jenis merek mobil saja yaitu jenis
merek mobil Toyota, karena pada dasarnya script java dan xml untuk pembuatan
halaman peta showroom mobil di Bekasi pada umumnya sama.

public class toyota extends MapActivity {


MapController mc;
57

Geocoder gc;
int index;
MapView map;
GeoPoint point;
List<Overlay> mapOverlays;
Drawable drawable;
MapsOverlay itemizedoverlay;
OverlayItem overlayitem;

Blok program di atas berfungsi untuk mendapatkan hak akses public untuk
kelas toyota.java kedalam MapActivity. Kelas yang dipanggil dapat dilihat pada
blok program di atas.

String[] nama = {
"Auto 2000 Kalimalang",
"Auto 2000 Bekasi Timur",
"Auto 2000 Bekasi Barat",
"Auto 2000 Cikarang",
"Astrido Toyota Bekasi",
"Astrido Toyota Pondok Gede",
"Tunas Toyota Jatiwaringin"
};

String[] info = {
"Alamat : \nJl Raya Tarum Barat 45 Kalimalang Jakarta Timur
13440 \nTlp : 021-8652000 \nFax : 021-8642446 \n\nMelayani :
\n-Penjualan \n-Service \n-Spare Parts",

"Alamat : \nJl. Diponegoro No. 38, Bekasi Timur 17510 Bekasi,


\nTelp : (021) 8802000 \n\nMelayani : \n-Penjualan \n-Service \n-
Spare Parts \n-Body & Paint",
58

"Alamat : \nJl. Siliwangi RT 003/009, Sepanjang Jaya, Rawa


Lumbu, Bekasi Barat \nTelp : (021) 82422000 \n\nMelayani : \n-
Penjualan \n-Service \n-Spare Parts",

"Alamat : \nJl. M.H. Thamrin Kav. 168 Lippo Cikarang Cikarang


Bekasi \nTelp : (021) 89902000 \n\nMelayani : \n-Penjualan \n-
Service \n-Spare Parts",

"Alamat : \nJl. Jend. Sudirman No 10, Bekasi 17143 \nTelp : 021-


8855678, 021-8896397 \nFax : 021-8890215 \n\nMelayani : \n-
Penjualan \n-Service \n-Spare Parts",

"Alamat : \nJl. Inkopau I, Pondok Gede, Bekasi, 17414 \nTelp :


021-8480536 \nFax : 021-8480541 \n\nMelayani : \n-Penjualan \n-
Service \n-Spare Parts \n-Body & Paint",

"Alamat : \nJl. Raya Jatiwaringin No 366 - Kel.Jaticempaka - Kec.


PD. Gede, Bekasi \nTelp : 021-84974713 \nFax : 021-8497305
\n\nMelayani : \n-Penjualan \n-Service \n-Spare Parts"
};
int[] gambar = {
R.drawable.autoxmalang,
R.drawable.autotambun,
R.drawable.autobekasi,
R.drawable.autocikarang,
R.drawable.astrindobekasi,
R.drawable.astrindopg,
R.drawable.toyotatunas,
};
int[] icon = {
59

R.drawable.marker1,
R.drawable.marker1,
R.drawable.marker1,
R.drawable.marker1,
R.drawable.marker1,
R.drawable.marker1,
R.drawable.marker1
};

Blok program di atas berfungsi untuk memberikan nilai pada masing-


masing variabel yang telah dideklarasikan sebelumnya yaitu variabel nama, info,
gambar dan icon.

double[] lat = {
-6.246914,
-6.250573,
-6.26529,
-6.330467,
-6.227488,
-6.281837,
-6.260422

};
double[] lng = {
106.920324,
107.033615,
106.99512,
107.139722,
106.983738,
106.910267,
106.910868
60

};

Blok program di atas berfungsi untuk menampilkan titik-titik Latitude dan


Longitude untuk sarana umum yang ingin ditampilkan pada peta di wilayah
Bekasi. Diperpaduan titik itulah nantinya push pin diletakan.

public void onCreate(Bundle savedInstanceState) {


super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.petabengkel);

Blok program di atas berfungsi untuk memanggil script xml


(petabengkel.xml) pada program ini. Fungsi yang dipanggil merupakan layout
atau user interface dari class toyota.java.

double latKota = -6.209883;


double lonKota = 107.002563;
mc = map.getController();
mc.setZoom(13);

Blok program di atas berfungsi untuk menampilkan wilayah Bekasi dengan


titik Latitude -6.209883 dan titik Longitude 107.002563. Kemudian posisi kamera
di zoom sebanyak 13 kali. Dengan memasukkan GeoPoint tersebut maka program
langsung akan membawa peta ke titik tersebut.

map = (MapView)findViewById(R.id.mapView);
map.setStreetView(true);
gc = new Geocoder(this);
map.setBuiltInZoomControls(true);
61

Blok program di atas berguna untuk memanggil fungsi zoom dan sebagai
pengontrolan fungsi zoom. Selain dapat melakukan perbesaran, peta juga dapat
melakukan perkecilan.

Button satelitBtn = (Button)findViewById(R.id.Satelit);


Button jalanBtn = (Button)findViewById(R.id.Jalan);

Blok program di atas akan mendeklarasikan dan menampilkan button untuk


mode Satelit view dan Jalan view.

for(int i=0;i<lat.length;i++){
point = new GeoPoint((int) (lat[i] *1E6),(int) (lng[i] * 1E6));
mapOverlays = map.getOverlays();
drawable = this.getResources().getDrawable(icon[i]);
itemizedoverlay = new MapsOverlay(drawable, this);
overlayitem = new OverlayItem(point, null, null);
itemizedoverlay.addOverlay(overlayitem);
itemizedoverlay.getData(nama[i], info[i], gambar[i]);
mapOverlays.add(itemizedoverlay);

Blok Program di atas digunakan untuk memanggil overlay pada masing-


masing variabel sebagai penunjuk letak titik GeoPoint sarana umum yang sudah
dideklarasikan sebelumnya. File yang dipanggil untuk digunakan sebagai icon
berjenis .jpg dan .png.

GeoPoint pKota = new GeoPoint((int)(latKota * 1E6),(int)(lonKota * 1E6));


mc.animateTo(pKota);

Blok program di atas berguna untuk mendapatkan nilai latitude dan


longitude pada peta yang akan ditampilkan.
62

<?xml version="1.0" encoding="utf-8"?>


<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<com.google.android.maps.MapView
android:id="@+id/mapView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:enabled="true"
android:clickable="true"
android:apiKey="00di27yoPrRG2DWmg1sjGIp8LZMXp1fXTWykX3w"
/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:layout_alignParentRight="true" >
<Button
android:id="@+id/Satelit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Satelit"
android:layout_x="258px"
android:layout_y="5px"
>
</Button>
<Button
android:id="@+id/Jalan"
63

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jalan"
android:layout_x="258px"
android:layout_y="3px"
>
</Button> </LinearLayout>
</RelativeLayout>

Blok program script xml (petabengkel.xml) di atas merupakan user


interface dari script toyota.java. Script ini akan muncul apabila activity
toyota.java terpanggil. Pada script di atas juga terdapat apiKey yang berguna
untuk pendaftaran mendapatkan Id (API Key), yang didasarkan atas sebuah kunci
yang digenerate otomatis ketika penulis menginstal SDK Android.

3.4.7 Pembuatan Halaman Info


Kelas ini berguna untuk menampilkan info alamat dan/atau profil dari
masing-masing sarana umum pada peta. Sebelumnya harus dideklarasikan terlebih
dahulu kelas overlay yang ingin digunakan.

public class MapsOverlay extends ItemizedOverlay {


String namaMuseum, infoMuseum;
int imageMuseum;
private ArrayList<OverlayItem> mOverlays = new
ArrayList<OverlayItem>();
private Context mContext ;
public MapsOverlay(Drawable defaultMarker) {
super(boundCenterBottom(defaultMarker));

Blok program di atas berfungsi untuk membuat kelas overlay yang ingin
digunakan pada halaman peta. Setiap overlay yang ingin ditambahkan pada peta,
64

harus diimplementasikan sebagai subkelas dari overlay. Terdapat sebuah subkelas


ItemizedOverlay ketika ingin melihat semacam push pin atau sejenisnya, dan
ItemizedOverlay memudahkan proses itu. Kemudian pada blok program di atas
terdapat pendeklarasian variabel yaitu variabel namaMuseum dan infoMuseum
yang bertipe data string dan variabel imageMuseum yang bertipe data integer.

public void getData(String nama, String info, int image){


namaMuseum = nama;
infoMuseum = info;
imageMuseum = image;

Blok program di atas berfungsi untuk pemberian nama pada variabel yang
telah dideklarasikan sebelumnya. Namanya dapat dilihat pada blok program di
atas pada masing-masing variabel-nya.

infofasilitas.ambilData(namaMuseum, infoMuseum, imageMuseum);


Intent in = new Intent(mContext, infofasilitas.class);
mContext.startActivity(in);

Blok program di atas berguna sebagai pemanggilan kelas lain yaitu kelas
infofasilitas.java. Selanjutnya beralih ke kelas infofasilitas.java.

public class infofasilitas extends Activity {


TextView txtNama;
TextView txtInfo;
ImageView imgGambar;
static String tempNama, tempInfo;
static int tempGambar;
public static void ambilData(String nama, String info, int gambar){
tempNama = nama;
tempInfo = info;
65

tempGambar = gambar;

Blok program di atas berfungsi untuk pemanggilan variabel-variabel yang


telah dideklarasikan sebelumnya yaitu variabel nama, info dan gambar.

public void onCreate(Bundle savedInstanceState)


{
super.onCreate(savedInstanceState);
setContentView(R.layout.infofasilitas);
txtNama = (TextView)findViewById(R.id.TextView01);
txtInfo = (TextView)findViewById(R.id.TextView02);
imgGambar = (ImageView)findViewById(R.id.ImageView01);
txtNama.setText(tempNama);
txtInfo.setText(tempInfo);
imgGambar.setImageResource(tempGambar);
}

Blok program di atas berfungsi untuk memanggil script xml


(infofasilitas.xml) pada program ini. Fungsi yang dipanggil merupakan layout
atau user interface dari class infofasilitas.java.

<ScrollView android:id="@+id/ScrollView01"
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@drawable/petunjuk">
<LinearLayout android:id="@+id/LinearLayout01"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="vertical">
66

<TextView android:padding="15dip"
android:text="@+id/TextView01"
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#000000">
</TextView>
<ImageView android:padding="20dip"
android:id="@+id/ImageView01"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</ImageView>
<TextView android:padding="15dip"
android:text="@+id/TextView02"
android:id="@+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textColor="#000000">
</TextView>
</LinearLayout>
</ScrollView>

Blok program script xml (infofasilitas.xml) di atas merupakan user interface


dari script infofasilitas.java. Script ini akan muncul apabila activity
infofasilitas.java terpanggil.
67

3.4.8 Pembuatan Halaman Petunjuk


Untuk memudahkan penggunaan dari aplikasi maka dibuatlah kelas ini yang
berguna untuk menampilkan petunjuk penggunaan dari aplikasi ini. Petunjuk yang
ditampilkan berupa kalimat penggunaan dari aplikasi ini.

super.onCreate(savedInstanceState);
setContentView(R.layout.help);

Blok program di atas berfungsi untuk memanggil script xml (help.xml) pada
program ini. Fungsi yang dipanggil merupakan layout atau user interface dari
class help.java.

super.onCreate(savedInstanceState);
setContentView(R.layout.help);

Blok program di atas berfungsi untuk memanggil script xml (help.xml) pada
program ini. Fungsi yang dipanggil merupakan layout atau user interface dari
class help.java.

<?xml version="1.0" encoding="utf-8" ?>


<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/splashback">
<LinearLayout android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView android:layout_marginTop="20dip"
android:text="Peta Lokasi Bengkel Bekasi"
android:layout_width="wrap_content"
68

android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:textColor="#000000">
</TextView>
<TextView android:layout_marginTop="20dip"
android:text="@string/help"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textSize="15sp"
android:textStyle="bold"
android:textColor="#000000">
</TextView>
</LinearLayout>
</ScrollView>

Blok program script xml (help.xml) di atas merupakan user interface dari
script help.java. Script ini akan muncul apabila activity help.java terpanggil.

3.4.9 Pembuatan Halaman Tentang


Kelas ini berguna untuk menampilkan informasi dari program ini, informasi
yang ditampilkan adalah mengenai pembuat aplikasi dan penjelasan serta versi
dari aplikasi ini.

super.onCreate(savedInstanceState);
setContentView(R.layout.tentang);

Blok program di atas berfungsi untuk memanggil script xml (tentang.xml)


pada program ini. Fungsi yang dipanggil merupakan layout atau user interface
dari class about.java.
69

<string name="tentang">
Aplikasi dibuat ditujukan untuk pengguna yang ingin mengetahui
letak-letak bengkel khusus mobil di sekitar daerah Bekasi baik
Kota maupun Kabupaten. Aplikasi ini merupakan aplikasi berbasis
Mobile Android.\n\n
Version: 1.0\n
Created By Aga Bastian\n
aga21bastian@gmail.com\n
http://agabastian.wordpress.com</string>

Blok program di atas berfungsi untuk menampilkan informasi dari program


ini. Blok program di atas terdapat didalam string.xml. String tentang di atas
dipanggil melalui script tentang yang berada didalam tentang.xml.

<?xml version="1.0" encoding="utf-8" ?>


<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/splashback">
<LinearLayout android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView android:layout_marginTop="20dip"
android:text="Peta Lokasi Bengkel Bekasi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dip"
android:textStyle="bold"
android:textColor="#000000">
</TextView>
70

<TextView android:layout_marginTop="20dip"
android:text="@string/tentang"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textSize="15sp"
android:textStyle="bold"
android:textColor="#000000">
</TextView>
</LinearLayout>
</ScrollView>

Blok program script xml (tentang.xml) di atas merupakan user interface dari
script about.java. Script ini akan muncul apabila activity about.java terpanggil.

3.5 Implementasi
Pada bagian ini akan menampilkan pembuatan aplikasi dengan
menampilkan pengujian dengan mengklik kanan pada project yang dibuat lalu
pilih run kemudian pilih android applications.

Gambar 3.9 Tampilan Halaman Menu Utama


71

Tampilan di atas merupakan tampilan menu utama yang terdapat di dalam


aplikasi ini. Dalam menu ini terdapat menu pilihan, seperti Peta Showroom,
Petunjuk, Tentang, dan Keluar.

Gambar 3.10 Tampilan Halaman Peta Showroom


Dalam halaman ini terdapat menu-menu pilihan jenis merek mobil yang
dapat dipilih oleh pengguna dengan menggunakan fungsi tombol button yang
akan menunjuk ke halaman selanjutnya yaitu halaman Peta dari Showrooom
tersebut.

Gambar 3.11 Tampilan Halaman Peta Jalan


72

Tampilan di atas merupakan tampilan peta yang menampilkan dalam bentuk


jalan pada letak lokasi showroom yang dipilih pengguna.

Gambar 3.12 Tampilan Halaman Peta Satellit


Tampilan di atas merupakan tampilan peta yang menampilkan dalam bentuk
satelit pada letak lokasi showroom yang dipilih pengguna.

Gambar 3.13 Tampilan Halaman Info


73

Tampilan di atas merupakan tampilan info uang berupa sebuah informasi


mengenai Showroom Mobil yang ingin dicari oleh pengguna. Dalam halaman info
ini terdapat alamat, nomer telpon dari showroom tersebut dan informasi lainnya.

Gambar 3.14 Tampilan Halaman Menu Petunjuk


Tampilan di atas merupakan tampilan petunjuk yang berupa petunjuk
petunjuk untuk menggunakan aplikasi.

Gambar 3.15 Tampilan Halaman Menu Tentang


74

Tampilan di atas merupakan tampilan tentang mengenai informasi dari


aplikasi dan informasi dari pembuat aplikasi.

3.6 Spesifikasi Pembuatan Aplikasi


Pada pembuatan aplikasi ini berisi tentang spesifikasi komputer yang
digunakan oleh penulis dan testing and debugging aplikasi pada beberapa tipe
handpone Android. Sebagai keterangan, penulis menggunakan Android SDK 2.3
dan Eclipse v. Helios.
1. Perangkat yang penulis gunakan dalam pembuatan aplikasi ini yaitu
dengan menggunakan sebuah Notebook dengan spesifikasi :
Software
1. Microsoft Windows 7 Ultimate
2. Android SDK 2.3, ADT (Android Development Tools) v. 10.0
3. Java JDK
4. Eclipse v. Galileo
Hardware
1. Processor Intel Core(TM) i3 CPU 540 @ 3.07 GHz
2. 250 GB hard disk
3. 2 GB RAM
4. VGA NVIDIA GeForce 9500 GT
2. Untuk mengetahui apakah aplikasi ini memerlukan penyempurnaan,
penulis melakukan testing and debugging aplikasi pada beberapa tipe
handpone berbasis Android dengan uraian sebagai berikut :
1. SAMSUNG GT-I9100 dengan sistem operasi Android 2.3
Gingerbread.