Dokumen tersebut membahas tentang analisis data dan rancangan aplikasi pengenalan daun. Terdapat informasi sumber yang digunakan, lokasi pengambilan gambar daun, struktur navigasi, flowchart, dan rancangan tampilan aplikasi seperti splash screen, halaman utama, daftar daun, detail daun, petunjuk dan tentang.

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

2. 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,

3. 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,

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

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

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

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

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

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

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

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

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

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

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

15. 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 }

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

17. 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"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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