aplikasi gallery pengetahuan

i

PEMROGRAMAN MOBILE TI024330

“Aplikasi Gallery Pengetahuan”

Dosen

I Putu Agus Eka Pratama, ST MT.

Oleh:

1. Siti Rohmatul Khasanah (1404505076)

2. Gede Wahyu Pratama (1404505090)

Kelas : C

JURUSAN TEKNOLOGI INFORMASI

FAKULTAS TEKNIK

UNIVERSITAS UDAYANA

2016

ii

KATA PENGANTAR

Puji dan syukur saya haturkan ke hadapan Tuhan Yang Maha Esa, karena

berkat rahmat-Nya, akhirnya penulis mampu menyelesaikan tugas Pemrograman

Mobile. Dalam penyusunan tugas ini penulis mendapat bantuan dari banyak

pihak. Untuk itu, pada kesempatan ini penulis mengucapkan terima kasih kepada:

1. Bapak I Putu Agus Eka Pratama, ST MT. selaku Dosen Pengampu Mata

Kuliah Pemrograman Mobile.

2. Teman-teman dan semua pihak yang telah membantu menyumbangkan ide

dan pemikirannya.

Penulis menyadari bahwa tugas ini jauh dari kata sempurna, baik dalam

penyusunan, bahasan, maupun penulisannya. Oleh karena itu kritik dan saran yang

bersifat membangun dari semua pihak sangat diharapkan demi tercapainya

kesempurnaan dalam tugas ini. Akhir kata, semoga tugas ini dapat memberikan

manfaat bagi semua pihak, sesuai yang diharapkan.

Badung, 17 Mei 2016

Penulis

iii

DAFTAR ISI

KATA PENGANTAR ................................................................................ ii

DAFTAR ISI .............................................................................................. iii

BAB I PENDAHULUAN

1.1 Latar Belakang .................................................................................. 1

1.2 Tujuan dan Manfaat .......................................................................... 1

1.3 Ruang Lingkup .................................................................................. 1

BAB II TINJAUAN PUSTAKA

2.1 Android ................................................................................................. 3

2.2 Java ........................................................................................................ 3

2.3 Eclipse ................................................................................................... 4

2.4 ADT ...................................................................................................... 4

2.5 SDK ....................................................................................................... 4

2.6 Widget ................................................................................................... 5

2.7 Toast ...................................................................................................... 6

BAB III DESAIN DAN IMPLEMENTASI

3.1 DESAIN ................................................................................................ 6

3.1.1 Deskripsi Aplikasi .................................................................... 7

3.1.2 Flowchart Aplikasi ................................................................... 8

3.1.3 Use Case ................................................................................... 9

3.1.4 Sequence Diagram .................................................................... 10

3.1.5 Class Diagram ........................................................................... 13

3.2 IMPLEMENTASI ................................................................................. 13

3.2.1 Proses Pembutan Aplikasi ........................................................ 13

3.2.1 Halaman Awal .......................................................................... 14

3.2.1 Halaman Mulai ......................................................................... 18

3.2.1 Halaman Galery yang Dipilih ................................................... 22

3.2.1 Attrs.xml ................................................................................... 25

iv

3.2.1 Halaman Tentang ...................................................................... 26

3.2.1 Android Manifest ...................................................................... 28

3.2.1 Uji Coba .................................................................................... 29

BAB IV KESIMPULAN

4.1 Kesimpulan ........................................................................................... 40

DAFTAR PUSTAKA ................................................................................... 41

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Seiring dengan berkembangnya teknologi, media komunikasi dan

informasi semakin banyak memberikan kemudahan terhadap pengguna untuk

saling berinteraksi. Gadget seperti handphone dan tablet merupakan

perkembangan teknologi masa kini.

Gadget sangat banyak digunakan oleh masyarakat umumnya mulai dari

orang tua, remaja, hingga anak-anak sangat tertarik menggunakan gadget yang

rata-rata adalah Android. Namun, aplikasi yang beredar saat ini didominasi oleh

aplikasi untuk orang dewasa. Oleh karena itu, aplikasi gallery pengetahuan ini

diciptakan untuk menambah wawasan anak-anak dalam mengenal lingkungannya

dan peran orang tua juga sangat penting dalam pembelajaran ini.

Aplikasi gallery pengetahuan ini untuk anak-anak yang dikemas dalam

media gambar yang berisi tentang pengenalan benda, buah, bunga, hewan, sayur,

dan warna. Aplikasi ini menggunakan Bahasa Indonesia sebagai bahasa utamanya.

Sehingga diharapkan aplikasi ini dapat membantu orang tua dalam mendidik

anaknya dalam belajar mengenali gambar dan membaca.

1.2 Tujuan dan Manfaat

Tujuan aplikasi Gallery Pengetahuan ini adalah untuk mengenalkan

lingkungan sekitar dan belajar membaca kepada anak-anak usia dini maupun

tingkat sekolah dasar.

Manfaat yang didapat setelah belajar dari aplikasi Gallery Pengetahuan

adalah anak-anak dapat mengenali gambar, membaca cepat, dan mengetahui

Bahasa inggris dari gambar tersebut.

1.3 Ruang Lingkup

Ruang Lingkup dari penggunaan aplikasi Gallery Pengetahuan ini adalah

sebagai berikut.

2

1. Anak usia dini

Anak usia dini dapat menggunakan aplikasi Gallery Pengetahuan ini

dengan pengawasan dan di didik oleh orang tuanya. Anak usia dini dapat belajar

melalui aplikasi ini dengan media gambar yang ditampilkan dan belajar

mengucapkan nama dari gambar tersebut.

2. Anak Sekolah Dasar

Anak sekolah dasar dapat menggunakan aplikasi Gallery Pengetahuan ini

dengan media gambar yang ditampilkan dan belajar membaca cepat nama dari

gambar tersebut serta terdapat Bahasa Inggris dari gambar.

3

BAB II

LANDASAN TEORI

2.1 Android

Android merupakan sebuah sistem operasi yang sangat popular di masa

kini. Android sendiri adalah salah satu platform berbasis Linux yang dirancang

khusus untuk perangkat mobile seperti smartphone serta tablet. Pada awalnya,

Android dikembangkan oleh perusahaan bernama Android, Inc., disertai

dukungan dari perusahaan teknologi Google yang kemudian membelinya dan

resmi menjadi milik Google pada tahun 2005 dan dirilis secara resmi pada tahun

2007.

Perkembangan Android begitu pesat sehingga mampu menjadi sebuah

sistem operasi terhadap smartphone yang paling banyak digunakan di dunia

karena keunggulannya, seperti sistem operasi yang berbiaya rendah, dapat

dikustomisasi, bahkan merupakan sistem operasi yang ringan dalam penggunaan

atas kapasitas memori yang tersedia. Selain itu, Android merupakan salah satu

sistem operasi dengan komunitas pengembang yang besar karena pada umumnya

bahasa pemrograman yang digunakan merupakan bahasa Java[3].

2.2 Java

Java adalah salah satu bahasa pemrograman yang pada umumnya

dijalankan di berbagai perangkat komputer seperti telepon seluler. Bahasa Java ini

sendiri dipengaruhi oleh sintaksis pada bahasa pemrograman C dan C++ yang

sudah berkembang terlebih dahulu, namun bahasa Java dibuat dengan sintaksis

model objek yang lebih sederhana. Java merupakan bahasa pemrograman yang

bersifat umum karena fungsionalitasnya yang memungkinkan aplikasi Java untuk

mampu berjalan di beberapa platform sistem operasi yang berbeda.

Banyak kelebihan yang didapat menggunakan bahasa Java, antara lain

bersifat multiplatform sehingga dapat dijalankan di beberapa platform, bersifat

pemrograman yang berbasis objek, library yang lengkap sehingga mudah untuk

mengembangkan suatu aplikasi, bahkan memiliki fasilitas untuk mengatur

4

penggunaan memori. Dengan kelebihan yang cukup banyak membuat bahasa Java

menjadi bahasa pemrograman yang paling popular untuk digunakan saat ini[4].

2.3 Eclipse

Eclipse merupakan salah satu IDE (Integrated Development Environment)

yang digunakan untuk mengembangkan perangkat lunak dan dapat dijalankan di

semua platform. Eclipse pada saat ini merupakan salah satu IDE favorit karena

bersifat open source dan diperoleh secara gratis. Kelebihan yang didapat dari

Eclipse ini sendiri adalah multiplatform yang dapat dijalankan diberbagai jenis

sistem operasi, multilanguage yang berarti selain dikembangkan dengan bahasa

Java dapat pula dikembangkan dengan bahasa pemrgraman lainnya, dan multi role

yang bisa digunakan untuk aktivitas dalam siklus pengembangan perangkat lunak

seperti dokumentasi dan testing terhadap perangkat lunak. Eclipse ini sendiri

memiliki kemampuan untuk dapat dikembangkan oleh penggunanya dengan

komponen yang disebut dengan plug-in [2].

2.4 ADT

ADT atau Android Development Tools adalah sebuah plug-in yang

didesain untuk IDE Eclipse yang memberikan kemudahan terhadap penggunanya

dalam mengembangkan aplikasi Android dengan menggunakan IDE Eclipse.

Kemudahan yang didapat dari segi membuat aplikasi project Android, membuat

GUI (Graphic User Interface) aplikasi, hingga menambahkan komponen-

komponen lainnya. Dalam ADT memiliki aturan dimana, semakin tinggi platform

yang digunakan, maka dianjurkan untuk menggunakan ADT yang lebih terbaru

hal ini dikarenakan munculnya platform baru tersebut akan dibarengi dengan

munculnya versi terbaru dari ADT itu sendiri[2].

2.5 SDK

SDK atau Software Development Kit merupakan sebuah tools API

(Appkication Programming Interface) yang digunakan dalam mengembangkan

aplikasi berbasis Android menggunakan bahasa Java. SDK ini memberikan

kemudahan agar laptop atau komputer pengguna dapat berkinerja menjadi

5

Android, sehingga aplikasi ini pula dapat mendukung untuk mengubah

smartphone pengguna menjadi teraplikasi Android didalamnya.

SDK memiliki seperangkat tools pengembangan yang mudah untuk

dipahami didalamnya. Tools yang berada didalamnya antara lain, debugger,

libraries, dokumentasi, contoh kode program, tutorial, hingga handset emulator.

Sehingga, SDK ini sangat bermanfaat untuk pengguna yang ingin

mengembangkan aplikasi yang dibuatnya[2].

2.6 Widget

Widget adalah komponen yang dapat digunakan untuk menampilkan user

interface dan menerima interaksi terhadap user. Setiap widget memiliki property

atau atribut yang mengatur widget tersebut ditampilkan, seperti tinggi dan lebar

widget. Widget di dalam Android ditampilkan dengan konsep view, dengan widget

yang umum digunakan adalah Layout XML. Untuk mengimplementasikan widget,

selain file java juga dibutuhkan tambahan dua file yaitu file XML dan layout XML

(optional)[2].

2.6.1 Button

Button merupakan turunan dari text view, sehingga yang berlaku di text

view juga berlaku di button. Tambahan property yang penting adalah onClick[2].

2.6.2 ListView

Listview adalah widget untuk menampilkan data dalam bentuk list yang

dapat di-scroll karena ukuran layar smartphone yang terbatas. Listview merupakan

salah satu widget terpenting dan paling sering digunakan untuk menampilkan

kelompok informasi[2].

2.6.3 Image View

Image view adalah widget yang menampilkan gambar seperti icon. Image

view dapat memuat gambar dari berbagai sumber (resource atau content

providers)[2].

6

2.7 Toast

Toast merupakan sebuah umpan balik sederhana dari sebuah operasi dalam

sebuah popup. Toast hanya mengisi sebagain ruang dari aplikasi. contohnya

adalah delivery report saat mengirimkan SMS, saat pesan terkirim biasanya akan

muncul pemberitahuan bahwa pesan terkirim itulah yang dinamakan toast. Toast

otomatis akan hilang ketika durasi untuk menampilkannya telah habis atau

timeout [2].

7

BAB III

DESAIN DAN IMPLEMENTASI

3.1 DESAIN

Desan dari pembuatan aplikasi Gallery Pengetahuan akan dijelaskan

sebagai berikut:

3.1.1 Deskripsi Aplikasi

Struktur navigasi dari aplikasi Gallery Pengetahuan dapat dilihat pada

Gambar 1.

Halaman

Awal

Mulai Tentang Keluar

Pilih

Gallery

Tentang

Aplikasi

Benda Buah Sayur Hewan Warna KeluarBunga

Gambar 3. 1 Strukur aplikasi Gallery Pengetahuan

Gambar 3.1 merupakan struktur saat aplikasi Gallery Pengetahuan

dijalankan akan masuk ke halaman awal dari aplikasi. Halaman awal aplikasi ini

berisi 3 button untuk Mulai, Tentang, dan Keluar. Mulai merupakan perintah

untuk memulai pembelajaran pada gallery tertentu yang akan dipilih. Tentang

merupakan panduan tentang aplikasi gallery pengetahuan ini. Keluar untuk keluar

dari program aplikasi gallery pengetahuan.

Di dalam pilihan button mulai terdapat list view pilihan gallery yang akan

dipilih. Gallery tersebut meliputi: benda, buah, bunga, hewan, sayur, dan warna.

Ketika salah satu gallery tersebut di pilih maka akan ke halaman selanjutnya

sesuai gallery yang dipilih. Di dalam gallery yang dipilih tersebut akan

ditampilkan gambar – gambar sesuai gallery yang dipilih (misalnya gallery warna)

8

maka akan muncul tampilan gambar warna, dan apabila di klik salah satu gambar

warna tersebut akan muncul tulisan Bahasa Indonesia dan Bahasa Inggris nama

gambar sesuai gambar warna yang dipilih.

Di dalam pilihan button tentang terdapat text mengenai aplikasi gallery

pengetahuan dan terdapat button kembali untuk kembali ke halaman awal. Pada

pilihan keluar akan muncul kotak dialog yang menanyakan “Mau keluar?” jika

pilih ya maka akan keluar dari aplikasi, jika tidak maka akan tetap pada aplikasi.

3.1.2 Flowchart Aplikasi Gallery Pengetahuan

Gambaran dari aplikasi gallery pengetahuan dapat dijelaskan dengan

menggunakan flowchart yang dapat dilihat pada Gambar 3.2

9

Gambar 3. 2 Flowchart Aplikasi

Gambar 3.2 merupakan flowchart yang menjadi alur dari penggunaan

aplikasi gallery pengetahuan.

3.1.3 Use Case Diagram

10

Hak akses yang dimiliki oleh Admin adalah login, input gambar

bunga dan hewan, update gambar bunga dan hewan, delete gambar

bunga dan hewan. Sedangkan pengguna hanya mempunyai hak akses

untuk view gambar bunga dan view gambar hewan.

3.1.4 Sequence Diagram

3.1.4.1 Login

Login ini hanya untuk admin saja ketika ingin menambah foto

atau melakukan pengeditan foto.

3.1.4.2 Input Gambar Bunga dan Hewan

11

Input gambar hewan atau bunga dapat dilakukan untuk megisi

gambar bunga atau hewan di aplikasi.

3.1.4.3 Update Gambar Bunga dan Hewan

Update gambar hewan atau bunga bisa dilakukan apabila ingin

mengubahnya.

3.1.4.4 Delete Gambar Bunga dan Hewan

12

Delete gambar hewan atau bunga bisa dilakukan apabila ingin

menghapus gambar hewan atau bunga.

3.1.4.5 View Gambar bunga

view gambar bunga pengguna dapat melihat gambar hewan

beserta nama bunga tersebut dalam bahasa Indonesia dan

inggris.

3.1.4.6 View Gambar Hewan

Pada view gambar hewan pengguna dapat melihat gambar

hewan beserta nama hewan tersebut dalam bahasa Indonesia dan

inggris.

13

3.1.5 Class Diagram

Class Diagram diatas dapat dilihat bahwa penggu dan admin dapat

melihat gambar hewan dan bunga tetapi hanya admin saja yang bisa

melakukan insert, update dan delete.

3.2 IMPLEMENTASI

Implementasi dari pembutan Aplikasi Galllery Pengetahuan adalah sebagai

berikut:

3.2.1 Proses Pembuatan Aplikasi

Aplikasi gallery pengetahuan memiliki 10 layout dan memiliki 9 class. 10

Layout yang terdapat pada aplikasi terdapat dapat dilihat pada Gambar 3.3.

Gambar 3. 3 Layout pada Gallery Pengetahuan

Gambar 3.3 merupakan layout yang terdapat pada Gallery Pengetahuan

yang terdiri dari 10 layout dan memiliki 11 class. 10 Layout yaitu

activity_main.xml, pilihgallery.xml, about.xml, gbenda.xml, ghewan.xml,

14

gsayur.xml, gwarna.xml, gbunga.xml, dan gbuah.xml, sedangkan 11 class yang

dimiliki yaitu MainActivity.java, pilih_main.java, about.java, Gbenda.java,

Ghewan.java, Gbunga.java, Gbuah.java, Gsayur.java, dan Gwarna.java.. Langkah-

langkah pembuatan aplikasi android Gallery Pengetahuan akan dijelaskan sebagai

berikut.

3.2.2 Halaman Awal

Langkah pertama dalam pembuatan aplikasi android Gallery Pengetahuan

adalah halaman utama yang berfungsi sebagai halaman yang pertama kali muncul

ketika aplikasi Gallery Pengetahuan jalankan. Halaman utama ini memiliki layout

yang diberi nama activity.xml dan class yang diberi nama MainActivity.java.

berikut merupakan penjelasan dari pembuatan halaman utama pada aplikasi

Gallery Pengetahuan.

3.2.2.1 Desain layout activity_main

Desain Layout dari aplikasi Gallery Pengetahuan terdapat pada

activity_main.xml yang ditunjukkan Gambar 3.4.

Gambar 3. 4 Desain layout activity_main.xml

Gambar 3.4 merupakan Graphical Layout atau perancangan layout dari

halaman utama aplikasi yang akan ditampilkan. Gambar 3.4 terlihat bahwa

halaman utama aplikasi Gallery Pengetahuan memiliki 3 button yaitu Mulai,

15

Tentang, dan Keluar. Sedangkan untuk menambahkan background seperti

Gambar 3.4 caranya adalah pada jendela properties yang terletak pada kanan

layar, ubah backgroundnya dengan memilih file gambar dari data di komputer

sesuai background yang diinginkan.

Jika ingin melihat Kode Program dari desain yang dirancang, pada bagian

bawah aplikasi disamping tab Graphical Layout dapat memilih tab

activity_main.xml-nya, maka pada activity_main.xml akan tampak seperti Kode

Program 3.1.

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/bg"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity" >

<Button

android:id="@+id/button2"

android:layout_width="150dp"

android:layout_height="50dp"

android:layout_alignRight="@+id/button1"

android:layout_below="@+id/button1"

android:layout_marginTop="14dp"

android:text="Tentang" />

<Button




android:layout_alignLeft="@+id/button2"

android:layout_below="@+id/button2"


android:text="Keluar" />

<Button




android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"


android:text="Mulai" />

</RelativeLayout>

Kode Program 3. 1 Activity_main.xml

16

Kode Program 3.1 merupakan kode hasil dari perancangan Graphical

Layout, jadi kita dapat mengubah elemen user interface dari halaman utama

dengan dua cara yaitu melalui graphical layout atau langsung mengedit file xml-

nya.

Kode Program 3.1 tempatnya untuk memberikan perintah tambahan

seperti pengaturan layout, text, ukuran text, warna, dan lain-lainnya atau bisa juga

langsung desain pada Graphical Layout aplikasi.

3.2.2.2 Pengaturan Class MainActivity

Selain activity_main.xml, halaman utama memiliki class

MainActivity.java untuk menjalankan perintah yang ada pada layout dapat dibuka

melalui package explorer: buka/src, pagacke dan klik MainActivity.java.

package com.gallerypengetahuan;

import android.app.Activity;

import android.app.AlertDialog;

import android.content.Context;

import android.content.DialogInterface;

import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

public class MainActivity extends Activity implements

OnClickListener{

Button mulai,tentang, keluar;

final Context context = this;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mulai= (Button)findViewById(R.id.button1);

tentang= (Button)findViewById(R.id.button2);

keluar= (Button)findViewById(R.id.button3);

mulai.setOnClickListener((OnClickListener)this);

tentang.setOnClickListener((OnClickListener)this);

keluar.setOnClickListener((OnClickListener)this);

}

@Override

public void onClick(View v) {

switch (v.getId()) {

case R.id.button1:

17

Intent pilga= new Intent (this, pilih_main.class);

startActivity(pilga);

break;

case R.id.button2:

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

startActivity(tentang);

break;

case R.id.button3:

AlertDialog.Builder alertDialogBuilder = new

AlertDialog.Builder(

context);

// set title

alertDialogBuilder.setTitle("");

// set dialog message

alertDialogBuilder

.setMessage("Mau Keluar? ")

.setCancelable(false)

.setPositiveButton("Ya",new

DialogInterface.OnClickListener() {

public void onClick(DialogInterface

dialog,int id) {

// if this button is clicked,

close

// current activity

MainActivity.this.finish();

}

})

.setNegativeButton("Tidak",new

DialogInterface.OnClickListener() {

public void onClick(DialogInterface

dialog,int id) {

// if this button is clicked, just

close

// the dialog box and do nothing

dialog.cancel();

}

});

// create alert dialog

AlertDialog alertDialog =

alertDialogBuilder.create();

// show it

alertDialog.show();

break;

}

}

}

Kode Program 3. 2 MainActivity.java

18

Kode Program 3.2 merupakan source code untuk menjalankan activity

pada activity_main.xml. Kode Program 3.2 akan mengimplementasikan ketiga

button yang dibuat pada activity_main.xml dengan cara menemukan id dari

button-button tersebut dan apabila salah satu button di click akan menuju ke

halaman atau layout berbeda sesuai dengan perintah intent menuju ke class

activity yang diberikan. Selain itu, pada Kode Program 3.2 terdapat fasilitas alert

dialog untuk menanyakan apakah akan keluar di button 3 dengan memberikan

perintah if dan memintapersetujuan pengguna memilih keluar atau tidak. Jika

pengguna memilih “Ya” maka perintah MainActivity.finish() yang berarti proses

akan berhenti dan keluar dari aplikasi sedangkan jika pilihan “Tidak” maka

dialog.cancel yang berarti tidak jadi keluar.

3.2.3 Halaman Mulai

Halaman mulai adalah halaman ketika button mulai pada halaman utama

di klik. Halaman mulai ini berfungsi untuk mulai memilih jenis gallery yang akan

dilihat dengan menggunakan listView maka akan tampil list text yang merupakan

pilihan dari jenis gallery. Langkah-langkah halaman mulai akan dijelaskan pada

sub bab 3.2.3.

3.2.3.1 Pilihgallery.xml

Pilihgallery.xml ini merupakan listView yang digunakan untuk

menampilkan list dari text pada pilihan jenis gallery.

19

Gambar 3. 5 Layout pilihgallery.xml

Gambar 3.5 merupakan tampilan layout pilihgallery.xml. Cara

menambahkan list view pada layout adalah dengan memilih composite dan drag

ListView ke layout. Kode dari list view pada Gambar 3 ditunjukkan pada Kode

Program 3.3

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

<LinearLayout


android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#FFFFFF">

<ListView

android:id="@+id/listView1"



android:cacheColorHint="#00000000"/>

</LinearLayout>

Kode Program 3. 3 Pilihgallery.xml

Kode Program 3.3 merupakan kode dari pilihgallery yang digunakan untuk

menampilkan list pada halaman mulai aplikasi Gallery Pengetahuan dengan

menggunakan list View yang sederhana.

20

3.2.3.2 Pilih_main.java

Pilih_main.java merupakan activity yang digunakan untuk

mengimplementasikan tampilan yang terdapat pada pilihgallery.xml.


import java.util.ArrayList;

import java.util.HashMap;




import android.widget.AdapterView.OnItemClickListener;


import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.ListView;

public class pilih_main extends Activity implements

OnItemClickListener{

private ListView lv;

ArrayAdapter<String> adapter;

ArrayList<HashMap<String, String>> menu;

@Override



setContentView(R.layout.pilihgallery);

String[] menu = new String[] {

"Benda",

"Buah",

"Bunga",

"Hewan",

"Sayur",

"Warna",

"Kembali"

};

lv = (ListView)findViewById(R.id.listView1);

lv.setOnItemClickListener(new

AdapterView.OnItemClickListener() {

public void onItemClick(AdapterView<?> parent, View

view, int position,

long id) {

// TODO Auto-generated method stub

String pilihan =

(lv.getItemAtPosition(position).toString());

tampilkanPilihan(pilihan);

}

private void tampilkanPilihan(String pilihan) {


Intent i = null;

if (pilihan.equals("Benda")) {

21

i = new Intent(pilih_main.this, Gbenda.class);

}

else if (pilihan.equals("Buah")) {

i = new Intent(pilih_main.this, Gbuah.class);

}

else if (pilihan.equals("Bunga")) {

i = new Intent(pilih_main.this, Gbunga.class);

}

else if (pilihan.equals("Hewan")) {

i = new Intent(pilih_main.this, Ghewan.class);

}

else if (pilihan.equals("Sayur")) {

i = new Intent(pilih_main.this, Gsayur.class);

}

else if (pilihan.equals("Warna")) {

i = new Intent(pilih_main.this, Gwarna.class);

}

else if (pilihan.equals("Kembali")) {

i = new Intent(pilih_main.this, MainActivity.class);

}

startActivity(i);

}

});

adapter = new ArrayAdapter<String>(this,

R.layout.pilihgallery, R.id.pilih, menu);

lv.setAdapter(adapter);

}

@Override

public void onItemClick(AdapterView<?> arg0, View arg1,

int arg2, long arg3) {


}

}

Kode Program 3. 4 Pilih_main.java

Pilih_main.java akan mengimplementasikan layout pilihgallery.xml dan

membuat list dapat dipilih, untuk tampil ke halaman yang dituju dengan

menemukan id row dari list view yang akan dipilih dengan kode AdapterView

parent untuk view parent yang menampung semua row, View untuk view baris

yang di pilih, position untuk menentukan posisi baris yang dipilih, dan id untuk

menentukan id dari row. Selain itu, untuk menentukan ke halaman yang dituju

sesuai baris yang dipilih pada Kode Program 3.4 menggunakan perintah if dengan

mengambil string sebagai penentuan pilihan baris yang dituju dengan string menu.

Jika string dengan nama tertentu (misalnya benda) maka akan ditentukan intent

menuju ke halaman dari halaman yang telah ditentukan.

22

3.2.4 Halaman Gallery yang di Pilih

Halaman gallery yang dipilih ini merupakan halaman salah satu dari list

gallery yang dipilih pada halaman mulai. List view pada halaman mulai terdapat 7

(tujuh) list yaitu benda, buah, bunga, hewan, sayur, warna dan pilihan untuk

kembali ke halaman sebelumnya atau halaman mulai. Intinya semua layout dan

kode dari list gallery yang dipilih memiliki kesamaan tampilan dan kode yang

sama, hanya saja berbeda pada penamaannya. Berikut merupakan salah satu

layout dan kode halaman gallery yang dipilih.

3.2.4.1 gbunga.xml

gbunga.xml merupakan salah satu halaman dari list gallery yang dipilih

dan berfungsi menampilkan gallery gambar bunga untuk mengenalkan kepada

anak-anak jenis-jenis bunga.

<LinearLayout


xmlns:tools="http://schemas.android.com/tools"



android:orientation="vertical">

<TextView


android:layout_height="wrap_content"

android:text="Galeri Bunga"

android:textColor="#ffffff"

android:background="#aa0000"

android:textSize="8pt" />

<Gallery

android:id="@+id/gallery1"


android:layout_height="wrap_content" />

<ImageView

android:id="@+id/imageView1"



android:scaleType="fitXY"/>

</LinearLayout>

Kode Program 3. 5 Gbunga.xml

Kode Program 3.5 merupakan kode dari salah satu halaman gallery yang

dipilih yaitu gallery bunga. Pada layout di Kode Program 3.5 terdapat textView

23

Gallery, dan ImageView. Fungsi dari textView adalah menampilkan judul galeri

yang ditampilkan, dan imageView tempat menampilkan gambar pada galeri bunga

3.2.4.2 Gbunga.java

Gbunga.java digunakan untuk mengimplementasikan activity dari

gbunga.xml dengan kode yang terdapat pada Kode Program 3.6.




import android.content.Context;

import android.content.res.TypedArray;


import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.BaseAdapter;

import android.widget.Gallery;

import android.widget.ImageView;

import android.widget.Toast;

public class Gbunga extends Activity{

Integer[] bunga = {

R.drawable.mawar,

R.drawable.melati,

R.drawable.kamboja,

R.drawable.sd,

R.drawable.matahari,

R.drawable.anggrek,

R.drawable.ks,

R.drawable.teratai,

R.drawable.anyelir,

R.drawable.tulip

};

String[]nama={"Indonesia: Mawar \nInggris: Rose","Indonesia:

Melati \nInggris: Jasmine",

"Indonesia: Kamboja \nInggris: Frangipani",

"Indonesia: Sedap Malam \nInggris: Tuberose Flower",

"Indonesia: Bunga Matahari \nInggris: SunFlower",

"Indonesia: Anggrek \nInggris: Orchid", "Indonesia: Kembang

Sepatu \nInggris: Hibiscus Flower",

"Indonesia: Teratai \nInggris: Water Lily",

"Indonesia: Anyelir \nInggris: Carnation",

"Indonesia: Bunga Tulip \nInggris: Tulip"};

Gallery gallery;

ImageView image;

@Override



setContentView(R.layout.gbunga);

gallery = (Gallery) findViewById(R.id.gallery1);

24

image = (ImageView) findViewById(R.id.imageView1);

gallery.setAdapter(new ImageAdapter(this));

gallery.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View v, int

position,long id) {

Toast.makeText(getBaseContext(), ( nama[position] ),

Toast.LENGTH_LONG).show();

image.setImageResource(bunga[position]);

}

});

}

public class ImageAdapter extends BaseAdapter{

Context context;

int itemBackground;

public ImageAdapter(Context c){

context = c;

TypedArray a =

obtainStyledAttributes(R.styleable.Gallery1);

itemBackground =

a.getResourceId(R.styleable.Gallery6_android_galleryItemBackgrou

nd, 0);

a.recycle();

}

@Override

public int getCount() {

return bunga.length;

}

@Override

public Object getItem(int position) {

return position;

}

@Override

public long getItemId(int position) {

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup

parent) {

ImageView imageView;

if(convertView == null){

imageView = new ImageView(context);

imageView.setImageResource(bunga[position]);

imageView.setScaleType(ImageView.ScaleType.FIT_XY);

imageView.setLayoutParams(new Gallery.LayoutParams(150, 120));

}else {

imageView = (ImageView) convertView;

}

imageView.setBackgroundResource(itemBackground);

return imageView;

}

25

}

}

Kode Program 3. 6 Gbunga.java

Kode Program 3.6 merupakan implementasi dari activity gbunga.xml

dimana gbunga.java menggunakan tipe Integer untuk menampilkan gambar

diambil dari folder drawable dan sesuai nama gambar yang digunakan. Kemudian

untuk mendeklarasikan nama dari gambar digunakan tipe string. Proses

selanjutnya menemukan id dari gallery dan image view sehingga dapat

menggunakan toast untuk menampilkan kata-kata pada string. Tipe toast yang

digunakan untuk menampilkan kata menjadi lebih lama adalah

Toast.LENGTH_LONG. Kemudian untuk class imageAdapternya untuk

menentukan posisi object dan styleable gallery yang nantinya akan diatur pada

attrs.xml. Selain itu pada imageAdapter ini diatur imageviewnya pada saat di klik

salah satu gambar pada gallery maka akan muncul dibawah gallery tersebut

gambar yang di klik dalam ukuran yang lebih besar

3.2.5 Attrs.xml

Attrs.xml ini dibuat pada directori values, yang berfungsi sebagai referensi

style gallery dimana kode programnya ditunjukkan oleh Kode Program 3.7.


<resources>

<declare-styleable name="Gallery1">

<attr name="android:galleryItemBackground"></attr>

</declare-styleable>
















</resources>

Kode Program 3. 7 Attrs.xml

26

Kode Program 3.7 menunjukkan bahwa attrs.xml ini berfungsi mengatur

style dari masing-masing gallery yang terdapat pada aplikasi gallery pengetahuan.

Kalau tidak di atur, maka gambar gallery pada aplikasi akan menjadi berantakan.

3.2.6 Halaman Tentang

Halaman tentang ini merupakan halaman yang tampil ketika pengguna

memilih button tentang pada halaman awal.

3.2.6.1 About.xml

About.xml ini merupakan desain atau graphical interface yang akan

ditampilkan pada aplikasi gallery pengetahuan.


<RelativeLayout


android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/paper"

android:orientation="vertical" >

<TextView

android:id="@+id/textView2"

android:layout_width="wrap_content"


android:layout_alignParentTop="true"



android:text="Tentang Gallery Pengetahuan"

android:textStyle="bold"

android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView




android:layout_alignLeft="@+id/pilih"

android:layout_alignParentRight="true"

android:layout_below="@+id/textView2"


android:text="Gallery Pengetahuan merupakan media

pembelajaran untuk anak-anak."


<Button




android:layout_above="@+id/pilih"

android:layout_alignLeft="@+id/pilih"

27

android:layout_marginBottom="40dp"

android:text="Kembali" />

<TextView




android:layout_alignLeft="@+id/textView3"

android:layout_alignRight="@+id/pilih"

android:layout_below="@+id/textView3"


android:text="Pilih Mulai untuk mulai belajar dan pilih

salah satu kategori Gallery yang ingin di pelajari."


<TextView




android:layout_above="@+id/button1"

android:layout_alignRight="@+id/textView2"


android:text="Selamat Belajar!"

android:textAppearance="?android:attr/textAppearanceMedium"

android:textColor="#aa0000" />

<TextView

android:id="@+id/pilih"



android:layout_alignParentBottom="true"



android:text="Pemrograman Mobile 2015 - Kelompok 4 " />

</RelativeLayout>

Kode Program 3. 8 About.xml

Kode Program 3.8 adalah rancangan dari halaman tentang yang berisi 5

(lima) textView untuk menampilkan text berupa kata-kata tentang aplikasi dan 1

(satu) button untuk kembali ke halaman awal.

3.2.6.2 About.java

About.java digunakan untuk mengimplementasikan button kembali yang

terdapat pada about.xml dengan kode yang terdapat pada Kode Program 3.9.




28



import android.widget.Button;

public class about extends Activity {

@Override



setContentView(R.layout.about);

Button kembali = (Button) findViewById(R.id.button1);

kembali.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {


startActivity(new Intent(about.this,

MainActivity.class));

finish();

}

});

}

}

Kode Program 3. 9 About.java

Kode Program 3.9 merupakan kode untuk mengimplementasikan button

kembali pada about.xml dengan id dari button about yaitu button1 akan

ditampilkan dan menggunakan finish untuk selesai di halaman about dengan

membawa halaman intent ke MainActivity atau halaman awal.

3.2.7 AndroidManifest.xml

AndroidManifest.xml merupakan file yang berfungsi untuk

menggambarkan karakteristik mendasar dari aplikasi dan mendefinisikan masing-

masing komponen aplikasi. Di dalamnya terdapat source code elemen-elemen

untuk mendeklarasikan fitur-fitur tertentu di dalam aplikasi.


<manifest


package="com.gallerypengetahuan"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="17" />

29

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name="com.gallerypengetahuan.MainActivity"

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="com.gallerypengetahuan.pilih_main"

android:label="Pilih Gallery">

</activity>

<activity

android:name="com.gallerypengetahuan.about"

android:label="Tentang">

</activity>

<activity android:name=".Gbenda"></activity>

<activity android:name=".Gbuah"></activity>

<activity android:name=".Gbunga"></activity>

<activity android:name=".Ghewan"></activity>

<activity android:name=".Gsayur"></activity>

<activity android:name=".Gwarna"></activity>

</application>

</manifest>

Kode Program 3. 10 AndroidManifest.xml

Kode Program 3.10 merupakan AndroidManifest.xml yang secara

otomatis ada pada saat membuat aplikasi android dan pada dasarnya berisi

informasi mengenai aplikasi, namun pada AndroidManifest.xml dalam Kode

Program 3.10 ditambahkan perintah untuk mengatur activity dan penggunaan

intent untuk pemilihan

3.2.8 Uji Coba

Uji coba yang dilakukan untuk aplikasi gallery pengetahuan akan

dijelaskan pada sub bab 3.2.8.

3.2.8.1 Halaman Awal

30

Tampilan halaman awal dari aplikasi gallery pengetahuan setelah

dijalankan dapat dilihat pada Gambar 3.6

Gambar 3. 6 Tampilan Halaman Awal

Gambar 3.6 merupakan tampilan dari halaman awal yang menampilkan 3

menu yaitu mulai, tentang dan keluar. Pengguna yang ingin memulai

pembelajaran dapat menekan menu mulai, atau ingin mengetahui tentang gallery

pengetahuan dapat menekan menu tentang. Pengguna yang ingin keluar dari

aplikasi dapat menekan menu keluar.

3.2.8.2 Halaman Mulai

Halaman mulai adalah halaman yang akan muncul setelah pengguna

memilih menu mulai pada halaman awal. Tampilan halaman mulai dapat dilihat

pada Gambar 3.7.

31

Gambar 3. 7 Tampilan Halaman Mulai

Gambar 3.7 merupakan tampilan halaman mulai yang terdapat banyak

pilihan pembelajaran yang diinginkan. Terdapat 6 pembelajaran yang dapat dipilih

yaitu benda, buah, bunga, hewan, sayur dan warna. Pengguna yang ingin kembali

ke halaman awal dapat menekan pilihan kembali.

3.2.8.3 Halaman Pilihan Gallery

Halaman pilihan gallery merupakan halaman yang akan muncul setelah

pengguna memilih pembelajaran yang akan dilakukan. Tampilan dari halaman

pilihan gallery dapat dilihat pada Gambar 3.8.

32

Gambar 3. 8 Tampilan Galeri Benda

Gambar 3.8 merupakan tampilan dari galeri benda yang akan

menampilkan benda yang umum digunakan sehari-hari. Saat gambar benda dipilih

maka akan muncul bahasa Indonesia dan bahasa Inggris dari benda tersebut.

Misalkan pada galeri benda dipilih bola maka akan muncul bahasa Indonesia dan

bahasa Inggris dari bola.

33

Gambar 3. 9 Tampilan Galeri Buah

Gambar 3.9 merupakan tampilan dari galeri buah yang akan menampilkan

buah yang umum diketahui dan dimakan sehari-hari. Saat gambar buah dipilih

maka akan muncul bahasa Indonesia dan bahasa Inggris dari buah tersebut.

Misalkan pada galeri buah dipilih buah alpukat maka akan muncul bahasa

Indonesia dan bahasa Inggris dari buah alpukat.

34

Gambar 3. 10 Tampilan Galeri Bunga

Gambar 3.10 merupakan tampilan dari galeri bunga yang akan

menampilkan bunga yang umum diketahui dalam kehidupan sehari-hari. Saat

salah satu gambar bunga dipilih maka akan muncul bahasa Indonesia dan bahasa

Inggris dari bunga tersebut. Misalkan pada galeri bunga dipilih bunga matahari

maka akan muncul bahasa Indonesia dan bahasa Inggris dari bunga matahari.

35

Gambar 3. 11 Tampilan Galeri Hewan

Gambar 3.11 merupakan tampilan dari galeri hewan yang akan

menampilkan hewan yang umum diketahui dalam kehidupan sehari-hari. Saat

salah satu gambar hewan dipilih maka akan muncul bahasa Indonesia dan bahasa

Inggris dari hewan tersebut. Misalkan pada galeri hewan dipilih kupu-kupu maka

akan muncul bahasa Indonesia dan bahasa Inggris dari kupu-kupu.

36

Gambar 3. 12 Tampilan Galeri Sayur

Gambar 3.12 merupakan tampilan dari galeri sayur yang akan

menampilkan sayuran yang umum diketahui dalam kehidupan sehari-hari. Saat

salah satu gambar sayuran dipilih maka akan muncul bahasa Indonesia dan bahasa

Inggris dari sayuran tersebut. Misalkan pada galeri sayur dipilih sayuran kol maka

akan muncul bahasa Indonesia dan bahasa Inggris dari sayuran kol.

37

Gambar 3. 13 Tampilan Galeri Warna

Gambar 3.13 merupakan tampilan dari galeri warna yang akan

menampilkan warna yang umum diketahui dalam kehidupan sehari-hari. Saat

salah satu warna dipilih maka akan muncul bahasa Indonesia dan bahasa Inggris

dari warna tersebut. Misalkan pada galeri warna dipilih warna hitam maka akan

muncul bahasa Indonesia dan bahasa Inggris dari warna hitam.

3.2.8.4 Halaman About

Halaman about merupakan halaman yang akan menampilkan informasi

mengenai aplikasi gallery pengetahuan. Tampilan dari halaman about dapat

dilihat pada Gambar 3.14.

38

Gambar 3. 14 Tampilan Halaman About

Gambar 3.14 merupakan tampilan dari halaman about yang berisikan

informasi tentang gallery pengetahuan. Halaman about berisikan juga tombol

untuk memudahkan pengguna yang ingin kembali ke halaman awal.

3.2.8.5 Keluar

Keluar merupakan menu terakhir yang terdapat pada aplikasi gallery

pengetahuan. Tampilan keluar dari aplikasi gallery pengetahuan dapat dilihat pada

Gambar 3.15.

39

Gambar 3. 15 Tampilan Keluar

Gambar 3.15 merupakan tampilan saat pengguna memilih keluar pada

halaman awal. Saat keluar dipilih maka akan muncul pertanyaan “Mau keluar”

dengan pilihan “Ya” dan “Tidak”. Pengguna yang memilih “Ya” akan langsung

keluar dari aplikasi dan bila pengguna memilih “Tidak” maka akan kembali ke

halaman awal.

40

BAB IV

PENUTUP

4.1 Kesimpulan

Kesimpulan dari aplikasi gallery pengetahuan yang telah dibuat antara

lain:

1. Aplikasi gallery pengetahuan dengan menggunakan android ini dibuat

untuk menambah wawasan anak-anak tentang lingkungannya dan belajar

membaca serta mengenali gambar.

2. Aplikasi gallery pengetahuan memiliki 6(enam) jenis gallery yang dipilih

untuk ditampilkan diantaranya adalah benda, buah, bunga, hewan, sayur,

dan warna.

Aplikasi gallery pengetahuan ini memang sederhana dan menampilkan

gallery gambar, namun keunikan aplikasi gallery pengetahuan ini pada saat di klik

salah satu gambar pada gallery maka akan muncul dibawah gallery tersebut

gambar yang di klik dalam ukuran yang lebih besar, selain itu aplikasi ini berisi

tulisan yang muncul hanya dalam beberapa detik, sehingga anak" terlatih untuk

membaca cepat.

41

DAFTAR PUSTAKA

[1]Safaat H, Nazruddin.2014.Pemrograman Aplikasi Mobile Smartphone dan

Tablet PC Berbasis Android.Bandung: Informatika

[2]Pengantar Mobile Programming dengan Android: http://yuliadi.com/ilkom

Akbarul Huda Arif. 2013. 24 Jam Pintar Pemrograman Android

[3]http://www.aingindra.com/android-adalah-pengertian-android-sistem-

operasi.html

[4] http://www.swalt.info/pemograman/java/76-pengertian-java.html

[5]http://agusharyanto.net/wordpress/?p=442

[6]https://kholisilkom45.wordpress.com/2013/09/04/membuat-gallery-gambar-

dengan-imageview/

[7]http://jintoples.blogspot.com/2013/07/membuat-aplikasi-android-gallery-

view.html#.VXB7Mka71S4

http://yuliadi.com/ilkom

http://www.aingindra.com/android-adalah-pengertian-android-sistem-operasi.html

http://www.aingindra.com/android-adalah-pengertian-android-sistem-operasi.html

http://www.swalt.info/pemograman/java/76-pengertian-java.html

http://agusharyanto.net/wordpress/?p=442

https://kholisilkom45.wordpress.com/2013/09/04/membuat-gallery-gambar-dengan-imageview/

https://kholisilkom45.wordpress.com/2013/09/04/membuat-gallery-gambar-dengan-imageview/

http://jintoples.blogspot.com/2013/07/membuat-aplikasi-android-gallery-view.html#.VXB7Mka71S4

http://jintoples.blogspot.com/2013/07/membuat-aplikasi-android-gallery-view.html#.VXB7Mka71S4

aplikasi gallery pengetahuan

Education