20

BAB III

PEMBAHASAN

3.1 Analisis Data

Dalam pembuatan aplikasi ini, informasi yang digunakan berdasarkan

buku-buku dan sumber informasi yang terkait. Sedangkan untuk pengumpulan

gambar daun, dilakukan observasi langsung di beberapa tempat sebagai berikut :

Tabel 3.1 Pengambilan Gambar Daun

No. Tanggal Tempat

1. 4 April 2014 Toko Trubus, Cimanggis - Depok

2. 28 Mei 2014 Pameran Flora Fauna, Lapangan Banteng -

Jakarta

3. 21 Juni 2014 Taman Tanaman Obat RW. 08, Kelurahan

Cipulir - Jakarta

Pada bab ini akan membahas rancangan aplikasi, mulai dari struktur

navigasi, flowchart, rancangan tampilan, pembuatan aplikasi, implementasi dan

uji coba aplikasi.

21

3.2. Struktur Navigasi

Gambar 3.1 Struktur Navigasi Program

Struktur Navigasi yang digunakan dalam pembuatan aplikasi ini yaitu

struktur navigasi campuran. Struktur navigasi campuran digunakan karena

fungsinya yang dapat bebas dan fleksibel dalam mengakses halaman aplikasi.

Struktur navigasi mempermudah dalam memahami tampilan alur

penggunaan aplikasi. Pertama pengguna akan masuk ke halaman splash,

kemudian akan tampil halaman menu utama. Pada menu utama terdapat tiga

menu, yaitu Daftar Daun, Petunjuk dan Tentang. Jika memilih Daftar Daun,

22

pengguna akan masuk ke halaman nama-nama daun, setelah memilih nama daun,

maka akan tampil halaman detail. Pada halaman petunjuk, pengguna akan masuk

ke halaman detail petunjuk, dan pada halaman tentang, pengguna akan masuk ke

halaman detail tentang.

3.3 Flowchart

Gambar 3.2 Flowchart Program

Flowchart menggambarkan alur program pada saat pengguna memulai

aplikasi, pertama akan tampil halaman splash, kemudian tampil menu utama. Pada

tampilan menu utama terdapat tiga menu, Jika memilih Menu Daftar Daun,

23

pengguna akan memilih daun yang ingin di akses informasinya, jika tidak maka

akan kembali ke menu utama, jika memilih Pilihan Daun, akan tampil informasi

mengenai daun yang di pilih, setelah itu akan kembali lagi ke menu utama. Jika

memilih menu kedua yaitu Menu Petunjuk, akan tampil petunjuk penggunaan

aplikasi, kemudian kembali lagi ke menu utama. Jika memilih menu ketiga yaitu

Menu Tentang, akan tampil mengenai informasi aplikasi dan pembuat aplikasi,

kemudian kembali lagi ke menu utama.

3.4 Rancangan Tampilan

Rancangan tampilan sangat diperlukan dalam pembuatan aplikasi

multimedia. Desain Interface bertujuan agar aplikasi yang dihasilkan terlihat lebih

mudah, menarik dan sederhana untuk digunakan. Rancangan tampilan aplikasi

informasi dan manfaat dedaunan menggunakan eclipse sebagai berikut :

3.4.1 Rancangan Tampilan Splash Screen

Gambar 3.3 Rancangan Splash Screen

24

Tampilan pertama yaitu splash screen. Pada tampilan splash screen

menggunakan tampilan gambar background yang bertipe .png. Splash screen pada

aplikasi ini berjalan selama 4 detik. Pada saat splash screen berjalan nantinya akan

ada suara sebagai back sound-nya.

3.4.2 Rancangan Tampilan Halaman Utama

Gambar 3.4 Rancangan Halaman Utama

Rancangan halaman utama terdiri dari background dan 3 button. Button

pertama yaitu button yang berisikan daftar daun, button kedua berisikan petunjuk

pemakaian aplikasi, dan button ketiga berisikan tentang aplikasi.

25

3.4.3 Rancangan Tampilan Menu Daftar Daun

Gambar 3.5 Rancangan Menu Daftar Daun

Pada rancangan tampilan daftar daun terdiri dari list view. List view

digunakan untuk mengurutkan nama-nama daun yang tersedia. Terdapat 40

pilihan nama daun di aplikasi ini. Penggunaan list view di pakai untuk

memudahkan pengguna dalam mengakses informasi daun yang di pilih.

26

3.4.4 Rancangan Tampilan Daun Detail

Gambar 3.6 Rancangan Daun Detail

Pada halaman daun detail, akan langsung mengakses data yang telah

tersimpan dalam hosting dengan menggunakan tampilan web view. Web view

berisikan nama daun, nama ilmiah daun, gambar daun, nama daerah daun,

kandungan kimia, manfaat daun serta tips penggunaan daun sebagai obat herbal.

27

3.4.5 Rancangan Tampilan Menu Petunjuk

Gambar 3.7 Rancangan Menu Petunjuk

Rancangan tampilan menu petunjuk ini berisikan petunjuk

penggunaan aplikasi. Dalam halaman menu petunjuk menggunakan

background dan text view.

28

3.4.6 Rancangan Tampilan Menu Tentang

Gambar 3.8 Rancangan Menu Tentang

Rancangan tampilan menu tentang ini berisikan informasi aplikasi dan

pembuat aplikasi. Dalam halaman menu tentang menggunakan background,

image view dan text view.

29

3.5 Pembuatan Aplikasi

Sebelum memulai membuat aplikasi, tahap pertama adalah proses

instalasi software yang dibutuhkan. Instalasi software dilakukan dengan cara

bertahap. Instalasi software secara bertahap berguna untuk memudahkan dalam

pembuatan aplikasi agar lebih terstuktur.

3.5.1 Instalasi Java

Software Java Development Kit (JDK) dapat di unduh langsung pada

website http://www.java.com/en/download. JDK merupakan software yang gratis

dan open source. JDK diperlukan untuk membuat aplikasi berbasis android,

karena merupakan salah satu software yang dapat membaca source code

pemrograman Java.

Gambar 3.9 Instalasi JDK

30

3.5.2 Menjalankan ADT Bundle for Windows

Software yang digunakan untuk membuat aplikasi android ini yaitu ADT

Bundle for Windows yang dapat di unduh pada halaman website :

http://developer.android.com/sdk/index.html. ADT Bundle for Windows sangat

mudah dalam hal instalasi karena sudah terbungkus menjadi satu dengan Eclipse

dan Android SDK, sehingga pengguna tidak perlu menghubungkan sendiri ADT,

Eclipse dan Android SDK.

Gambar 3.10 Start Up ADT

Gambar 3.11 Window Eclipse

31

3.5.3 Membuat Android Virtual Device (AVD)

AVD merupakan perangkat interface yang berupa virtual machine yang

akan menjadi emulator pada pc untuk menjalankan aplikasi yang telah dibuat.

Langkah-langkahnya :

Jalankan Eclipse, kemudian klik menu Window lalu pilih Android

Virtual Device Manager.

Pada Jendela AVD, klik tombol new. Isikan data pada jendela new

AVD.

Gambar 3.12 Membuat AVD

32

Untuk menguji apakah AVD berhasil di jalankan sebagai emulator, cara

nya dengan mengklik start pada AVD Daun.

Gambar 3.13 Loading AVD

Jika AVD berhasil di jalankan sebgai emulator, maka akan tampil seperti

gambar di bawah ini.

Gambar 3.14 Tampilan Emulator AVD

33

3.5.4 Membuat New Project

Untuk membuat sebuah project baru klik menu File, pilih new, kemudian

pilih Android Application Project. Isi kan data-data pada kolom yang telah

disediakan.

Gambar 3.15 Membuat New Project

34

3.5.5 Membuat Halaman Splash Screen

Splash screen adalah tampilan di awal aplikasi sebelum masuk ke halaman

utama aplikasi. Langkah-langkah membuat splash screen yaitu klik file > new >

other > next > Blank Activity.

Lalu isikan data yang dibutuhkan pada kolom yang sudah disediakan.

Gambar 3.16 Membuat Splash Activity

Berikut ini beberapa potongan program SplashActivity.java

1 mMediaPlayer = MediaPlayer.create(this, R.raw.welcome);

2 mMediaPlayer.start();

3 Thread timer = new Thread() {

4 public void run (){

5 try{

6 sleep(4000);

7 } catch(InterruptedException e){

8 e.printStackTrace();

9 }finally{

10 Intent openMain = new Intent ("com.dedauan.dedauan.menu");

11 startActivity(openMain);

12 }

35

13 }

14 };

15 timer.start();

Pada SplashScreen.java baris pertama berfungsi untuk mendefinisikan

mMediaPlayer sebagai media suara yang bernama welcome.3GPP. Pada baris

kedua berfungsi untuk memulai mMediaPlayer yang telah didefinisikan.

Pada baris ketiga mendefinisikan variabel timer sebagai thread. Pada baris

keempat sampai baris ke-14 mempersiapkan thread untuk berhenti sejenak selama

4000ms atau 4 detik. Setelah dijalankan selama 4 detik, splash screen akan

berpindah ke activity com.dedauan.dedauan.menu.

Untuk menambahkan background pada splash screen, cara nya yaitu :

Simpan gambar sc.jpg pada folder workspace > dedauan > res > drawable.

Kemudian pada lembar kerja klik kanan > edit background > drawable > pilih sc.

Gambar 3.17 Tampilan Splash Screen

36

3.5.6 Membuat Halaman Utama

Halaman utama pada aplikasi ini memunyai tiga button, yaitu Daftar Daun

yang berisikan nama-nama daun, Petunjuk yang berisikan petunjuk penggunaan

aplikasi, dan Tentang yang berisikan informasi mengenai aplikasi dan pembuat

aplikasi.

Pada saat pembuatan new project, activity halaman utama akan terbentuk

dengan sendirinya yang bernama MainActivity.java

Berikut ini beberapa potongan program MainActivity.java

Button btn_daun = (Button) findViewById(R.id.buttonDaun);

Button btn_petunjuk = (Button) findViewById(R.id.buttonPetunjuk);

Button btn_tentang = (Button) findViewById(R.id.buttonTentang);

Baris program diatas berfungsi untuk membuat variabel button, dimana

tiap button tersebut dideklarasikan sebagai buttonDaun, button Petunjuk dan

buttonTentang.

Sedangkan untuk berpindah activity, maka harus dibuat sebuah Intent baru

yaitu :

Intent kedaun=new Intent("com.dedauan.dedauan.Menu_daun");

Untuk menampilkan background pada halaman utama, cara nya yaitu :

Simpan gambar bg.jpg pada folder workspace > dedauan > res > drawable.

Kemudian pada lembar kerja klik kanan > edit background > drawable > pilih bg.

Untuk membuat tampilan gambar pada button, caranya yaitu : Simpan

gambar button_daun.jpg, button_petunjuk.jpg dan button_tentang.jpg pada folder

workspace > deduan > res > drawable. Kemudian pada activity_main.xml

tambahkan potongan program di dalam button :

android:background="@drawable/button_daun"

android:background="@drawable/button_petunjuk"

android:background="@drawable/button_tentang"

37

Gambar 3.18 Tampilan Halaman Utama

3.5.7 Membuat Halaman Menu Daftar Daun dan Daun Detail

Menu Tentang adalah sebuah menu yang berisikan informasi mengenai

aplikasi. Langkah-langkah membuat splash screen yaitu klik file > new > other >

next > Master / Detail Flow. Lalu isikan data yang dibutuhkan pada kolom yang

sudah disediakan.

Gambar 3.19 Membuat Daun Activity

38

Setelah di klik finish, akan tampil lima activity (DummyContent.java,

DaunListActivity.java, DaunListFragment.java DaunDetailActivity.java dan

DaunDetailFragment.java) dan empat file xml yang menjadi layout

(activity_daun_detail.xml, activity_daun_list.xml, activity_daun_twopane.xml

dan fragment_daun_detail.xml).

DummyContent.java

Activity ini berfungsi untuk menyimpan data statis daun untuk aplikasi ini.

Berikut ini beberapa potongan program DummyContent.java

static { addItem(new DummyItem("1", "Andong",http://daun.esy.es/Daun/

andong .html )); addItem(new DummyItem("2","Binahong","http://daun.esy.es/Daun/

binahong.html")); addItem(new DummyItem("3", "Cincau Pohon","http://daun.esy.es/

Daun/ cincaupohon.html")); ... addItem(new DummyItem("40", " Temu Hitam ",http://daun.esy.es/

Daun/temuhitam.html ));

}

Pada class static ditambahkan data untuk objek dummy item yaitu id,

nama daun, dan alamat web untuk penjelasan tentang daun. Menambahkannya

dengan menggunakan fungsi addItem.

DaunListActivity.java dan DaunListFragment.java

Activity ini berfungsi untuk menampilkan list daun dengan menggunakan data

pada DummyContent.java

DaunDetailActivity.java

Activity ini berfungsi untuk menampilkan detail informasi daun dengan

memanggil DaunDetailFragment.java

39

DaunDetailFragment.java

Activity ini berfungsi untuk menampilkan detail dengan menggunakan web view.

Data ditampilkan sesuai dengan data yang tedapat pada DummyContent.java

3.5.8 Membuat Halaman Menu Petunjuk

Menu Petunjuk adalah sebuah menu yang berisikan petunjuk pemakaian

aplikasi, yang bertujuan untuk memudahkan pengguna dalam mengoperasikan

aplikasi ini. Langkah-langkah membuat splash screen yaitu klik file > new > other

> next > Blank Activity.

Lalu isikan data yang dibutuhkan pada kolom yang sudah disediakan.

Gambar 3.20 Membuat Petunjuk Activity

40

Berikut ini beberapa potongan program Menu_petunjuk.java

1 setContentView(R.layout.activity_menu_petunjuk);

2 TextView tp = (TextView) findViewById(R.id.textpetunjuk);

3 tp.setMovementMethod(new ScrollingMovementMethod());

Pada baris pertama berfungsi untuk mengatur tampilan

Menu_petunjuk.java sesuai dengan activity_menu_petunjuk.xml. Pada baris

kedua, membuat variabel tp sebagai TextView dengan nilai sesuai TextView yang

bernama textpetunjuk. Pada baris ketiga bertujuan untuk memberikan fungsi scroll

pada varibel tp.

Untuk menampilkan background pada halaman utama, cara nya yaitu :

Simpan gambar bg.jpg pada folder workspace > dedauan > res > drawable.

Kemudian pada lembar kerja klik kanan > edit background > drawable > pilih bg.

Gambar 3.21 Tampilan Menu Petunjuk

41

3.5.9 Membuat Halaman Menu Tentang

Menu Tentang adalah sebuah menu yang berisikan informasi mengenai

aplikasi dan pembuat aplikasi. Langkah-langkah membuat menu tentang yaitu klik

file > new > other > next > Blank Activity.

Lalu isikan data yang dibutuhkan pada kolom yang sudah disediakan.

Gambar 3.22 Membuat Tentang Activity

Berikut ini beberapa potongan program TentangActivity.java

1 setContentView(R.layout.activity_tentang);

2 TextView tt = (TextView) findViewById(R.id.texttentang);

3 tt.setMovementMethod(new ScrollingMovementMethod());

Pada baris pertama berfungsi untuk mengatur tampilan TentangActivity.java

sesuai dengan activity_tentang.xml. Pada baris kedua, membuat variabel tt

sebagai TextView dengan nilai sesuai TextView yang bernama texttentang. Pada

baris ketiga bertujuan untuk memberikan fungsi scroll pada varibel tt.

42

Untuk menampilkan background pada halaman utama, cara nya yaitu :

Simpan gambar bg.jpg pada folder workspace > dedauan > res > drawable.

Kemudian pada lembar kerja klik kanan > edit background > drawable > pilih bg.

Gambar 3.23 Tampilan Menu Tentang

43

3.6 Membuat File HTML Daun

3.6.1 Instalasi Bootstrap

Data yang digunakan untuk mengakses informasi daun herbal merupakan

suatu tampilan web yang akan diakses pengguna. Untuk membuat tampilan web

secara praktis, maka digunakan bootstrap untuk mempermudah dalam mendesign

halaman web, sehingga menghasilkan tampilan yang responsif dan adaptif.

Tampilannya dapat langsung menyesuaikan dengan ukuran layar handphone

pengguna. Bootstrap dapat di download pada http://getbootstrap.com.

Buat sebuah folder baru bernama “Daun” pada direktori D. Ekstrak file

bootstrap.zip tersebut pada folder Daun, sehingga menghasilkan tiga folder, yaitu

css, fonts dan js.

Gambar 3.24 Ekstrak Bootstrap

Pada folder css berisi suatu fungsi mengenai style dasar seperti reset,

layout, button yang sudah disediakan oleh bootstrap. Pada folder fonts berisi jenis

huruf yang nantinya akan digunakan pada tampilan web. Pada folder js berisi

javascript untuk mengaktifkan berbagai fitur bawaan bootstrap.

44

Kemudian buat satu folder lagi bernama “img” pada D:/Daun. Fungsi

folder img yaitu gambar yang diletakkan didalamnya akan di panggil pada koding

.html yang akan di buat selanjutnya. Masukkan ke-40 gambar daun ke dalam

folder tersebut. Gambar daun-daun tersebut bertipe .png, jenis png di pilih karena

kualitas gambar lebih bagus dan tidak mudah pecah jika di perbesar.

3.6.2 Membuat HTML Data Daun

Langkah selanjutnya yaitu membuat 40 file HTML mengenai daun-daun

herbal. File tersebut diletakkan pada D:/Daun. Buka notepad, lalu copy potongan

program yang sudah disediakan pada getting started bootstrap ke dalam notepad.

Pada bagian <body>, masukkan kodingan untuk menampilkan gambar serta

informasi yang dibutuhkan mengenai daun tersebut.

Berikut ini potongan program andong.html

1 <body background="img/background_web.jpg">

2 <div class = "container-fluid">

Penjelasannya yaitu : pada baris pertama, berfungsi untuk mengatur

backgound dengan memanggil gambar pada folder img, dengan gambar bernama

background_web.jpg. Baris kedua mendefinisikan layout pada website berjenis

fluid, yang berguna untuk tampilan halaman terlihat baik walaupun dalam ukuran

layar yang berbeda.

Untuk menambahkan gambar pada tampilan web, tambahkan potongan

program berikut ini :

<img src="img/Andong.png" alt="Andong" class="img-rounded img-

responsive">

Potongan program di atas menunjukkan bahwa gambar yang ingin di

tampilkan berada pada folder img, dengan nama Andong.png, pinggiran dari

gambar tersebut di buat membulat dan responsif terhadap ukuran layar.

45

Berikut ini adalah daftar 40 nama daun yang dijadikan file bertipe HTML :

Tabel 3.2 Daftar 40 Nama Daun

3.7 Mengupload File HTML ke Hostinger

3.7.1 Membuat Akun pada Hostinger

Untuk membuat suatu domain gratis, salah satu nya bisa menggunakan

layanan web hosting dari http://idhostinger.com. Langkah pertama yaitu membuat

akun pada hostinger.

46

Gambar 3.25 Tampilan Website www.idhostinger.com

Gambar 3.26 Membuat Akun Baru

3.7.2 Membuat Hosting Baru

Setelah pendaftaran akun selesai, untuk membuat suatu domain gratis,

tahap pertama memilih paket hosting Gratis, lalu klik Order.

47

Gambar 3.27 Membuat Hosting

Kemudian tahap kedua yaitu mengisikan nama website dan subdomain

yang akan di buat.

Gambar 3.28 Mengatur Nama Domain

Setelah mengatur nama domain, di dapatkan nama domainnya yaitu

http://Daun.esy.es. Http:// merupakan nama protokol, sedangkan domainnya

bernama Daue.esy.es. Esy.es merupakan subdomain bawaan pada saat mengatur

nama domain di hostinger.

48

3.7.3 Mengupload File ke Hostinger

Setelah akun hosting dan nama domain terbentuk, lalu klik kelola.

Gambar 3.29 Daftar Akun Hosting

Untuk mengupload file-file HTML yang telah di buat sebelumnya, klik

menu file manager, lalu akan tampil seperti gambar yang berikut :

Gambar 3.30 File Manajer

49

Upload folder Daun yang berada di D:/Daun di dalam menu public pada

file manajer hostinger.

Gambar 3.31 Upload File ke Hostinger

Jika data-data sudah di upload, pada saat pengguna mengoperasikan

aplikasi di telepon selularnya dan mengklik salah satu nama daun, pengguna akan

di alihkan menuju tampilan web view pada hosting yang telah di buat.

3.8 Implementasi dan Uji Coba Aplikasi

Pada tahap implementasi, sistem yang dibutuhkan dalam pembuatan

aplikasi ini mencakup hardware, software dan data. Berikut ini merupakan

hardware dan software yang digunakan untuk aplikasi.

Spesifikasi hardware pada laptop yang digunakan :

Prosessor Intel(R) Core(TM) i3 CPU M 370 @ 2.40GHz 2.39GHz

RAM 2.00 GB

Harddisk 320 GB

50

Spesifikasi software yang dibutuhkan :

Operating System Microsoft Windows 7 Home Premium

Java Development Kit 7

ADT Bundle Windows

Android SDK

XAMPP 1.7.7

Spesifikasi telepon selular yang digunakan :

Operating System : Android version 4.2.2 (Jelly Bean)

Processor : CPU MTK 6572, Dual-core 1.3 GHz

Network : 2G GSM 900 / 1800 / 1900, 3G HSPDA 900 / 2100

Back Camera : 5 MP, 2592x1944 pixels, Geo-tagging, panorama, smile

detection, Video. Front Camera : VGA

Size : 480x854 pixels, 4.5 inches, IPS LCD capacitive touchscreen

Connection : Wi-Fi, Wi-Fi Hotspot. Bluetooth v4.0, USB, microUSB v2.0

Browser : HTML

Memory : internal 4 GB, external microSD up to 32 GB (2 GB included)

Battery : Li-Po 2000 mAh

51

Untuk memastikan aplikasi berjalan dengan baik, pertama dilakukan uji

coba pada emulator Android Virtual Device (AVD). Caranya, klik Run, lalu pilih

Dedaunan. Kemudian pada Pilih AVD Daun, lalu start, tampilan AVD nya

sebagai berikut :

Gambar 3.32 Ikon Aplikasi pada AVD

Gambar 3.33 Aplikasi pada AVD

52

Setelah melakukan uji coba pada AVD dan hasilnya berjalan baik, maka

selanjutnya melakukan uji coba pada beberapa telepon selular bersistem Android

dengan cara meng-copy file bertipe .apk yang terdapat workspace aplikasi. File

bertipe .apk merupakan jenis file yang digunakan sebagai installer aplikasi pada

telepon selular bersistem Android.

Beberapa telepon selular yang sudah di uji coba dalam pemasangan

aplikasi ini, diantara nya :

Tabel 3.3 Daftar Uji Coba

No. Tipe Spesifikasi Hasil

1. Lenovo A516 OS Android v4.2.2 Jelly Bean

Resolusi 480 x 854 pixels

Berjalan baik

2. Lenovo K900 OS Android v4.2 Jelly Bean

Resolusi 1080 x 1920 pixels

Berjalan baik

3. Lenovo Vibe X

S960

OS Android v4.4 Kit Kat

Resolusi 1080 x 1920 pixels

Berjalan baik

4. Samsung Galaxy

Tab 2 7.0

OS Android v4.2 Jelly Bean

Resolusi 600 x 1024 pixels

Berjalan baik