Rabu, 07 Maret 2012

Tugas Pemograman Multimedia : Pembuatan Aplikasi Menggunakan Sistem Operasi Android, Rendi Utoyo-4IA06-50408701, Aplikasi "Nightlife Guide Of Jakarta City"

            Kali ini saya mendapatkan sebuah tugas dari dosen matakuliah pemograman web saya dan berkesempatan untuk menerangkan cara serta proses dalam pembuatan sebuah aplikasi yang berbasis system operasi android. Aplikasi ini saya namakan Nightlife Guide of Jakarta City, Aplikasi Android Nightlife guide of Jakarta City adalah aplikasi info tempat hiburan malam yang dibuat dengan bahasa pemrograman Java untuk sistem operasi Android pada ponsel. Seperti halnya aplikasi pemandu di platform lainnya, aplikasi ini memiliki beberapa menu standar antara lain Where Are You Going, About dan  Exit. Tapi pada aplikasi ini juga ditambahkan satu menu tambahan yaitu Jakarta Map, yang diharapkan bisa lebih membantu pengguna dalam mendapatkan informasi yang dibutuhkan. Pada dasarnya aplikasi ini merupakan sebuah aplikasi penunjuk jalan atau tempat hiburan malam yang terdiri dari tempat clubbing, Café 24 jam, dan Café yang menampilkan live music. Aplikasi ini saya buat semata-mata untuk memberikan alternative pilihan bagi masyarakat kota Jakarta yang menginginkan sebuah sarana tempat rekreasi yang berbeda di suasana malam kota Jakarta.

Berikut ini akan saya jelaskan mengenai beberapa perangkat yang saya butuhkan, antara lain perangkat keras berupa satu set laptop merk Acer dengan processor Intel(R)Core(TM)2Duo CPU T6400 @2.00GHz 2.00GHz, Memory 3.00 GB, System type 32-bit Operating System, HDD 320 GB dan ponsel Android Galaxy Mini versi Froyo 2.2. Kemudian Perangkat lunak yang digunakan untuk membuat aplikasi ini berupa Operation System Microsoft Windows XP, Eclipse Galileo, Droiddraw, ADT-10.0.0, Android SDK, dan Java JDK (Java Development Kit).

Setelah kita menyiapkan perangkat yang kita butuhkan selanjutnya kita bisa memulai membuat rancangan aplikasi ini yang terdiri dari beberapa tahapan yaitu pembuatan diagram alur dan  algoritma menggunakan UML, rancangan interface, pembuatan kode program, kompilasi, dan  implementasi. Dalam tahap diagram alur dan  algoritma menggunakan UML ini dimodelkan proses yang terjadi pada aplikasi. Tahap selanjutnya adalah rancangan interface dan  dilanjutkan dengan coding atau pembuatan kode program kemudian kompilasi kode program. Pada tahap implementasi,  aplikasi pemandu hiburan malam di kota jakarta yang dibuat akan dijalankan pada emulator Android 2.2 Dan  di install pada ponsel Android. 
 


1.1   Diagram Alur dan  Algoritma

Dalam memodelkan proses yang terjadi pada rancangan sistem aplikasi Nightlife Guide akan dibuat kedalam bentuk model struktur navigasi untuk melihat alur dan  menu aplikasi serta bentuk model UML, yaitu Use Case Diagram dan  Activity Diagram.
            
          1.1.1    Struktur Navigasi
Gambar 1.1 Rancangan Struktur Navigasi
           1.1.2    Use Case Diagram

          Gambar 1.2 Rancangan Use Case Diagram
Gambar Use Case Diagram menjelaskan bahwa terjadi interaksi antara pengguna dengan fungsionalitas sistem aplikasi panduan tempat hiburan malam di kota jakarta. Pengguna berhubungan dengan Menu Utama, Peta Jakarta, Pilih Kategori, dan Pilih Tempat Hiburan. Pada Menu Utama merupakan tampilan awal dari aplikasi ini. Pada Peta Jakarta memiliki kaitan dengan google map. Pada Pilih Kategori berkaitan dengan Kategori tempat hiburan malam yang tersedia dalam aplikasi ini yaitu Club, Cafe, dan Live Music. Pilih Tempat Hiburan terdapat kaitan yang dengan view info, dan  view gambar.

          1.1.3    Activity Diagram
                 Gambar 1.3 Rancangan Activity Diagram

Gambar 1.3 menjelaskan bahwa terdapat beberapa alur aktifitas dalam rancangan sistem aplikasi Nightlife Guide. Alur berawal dari aktifitas halaman awal aplikasi. Setelah itu alur memiliki aktifitas paralel yang mungkin terjadi pada beberapa eksekusi, diantaranya aktifitas About, Jakarta Map, Where Are You Going, dan  Exit. Aktivitas Jakarta Map memungkinkan pengguna untuk masuk kedalam akses google map kota jakarta. Aktifitas About hanya menampilkan kotak dialog lalu alurnya kembali ke aktifitas halaman awal. Sedangkan aktifitas Exit keluar dari aplikasi. Aktifitas Where Are You Going akan menuju ke halaman kategori hiburan malam, dimana tersedia tiga pilihan Kategori yang berbeda. Kemudian, setiap aktivitas Kategori akan menuju ke halaman daftar tempat hiburan malam yang tersedia. Kemudian saat pengguna memilih aktifitas informasi daftar tempat hiburan maka pengguna dapat melakukan berbagai pilihan tempat hiburan malam yang diinginkan. Setelah pengguna memilih salah satu tempat pada halaman daftar tempat hiburan, maka akan masuk pada tampilan informasi dan gambar tempat hiburan. Setelah masuk ke aktifitas informasi dan  gambar, terdapat decision untuk menanyakan kepada pengguna apakah ingin memilih lagi. Jika ya maka pengguna dapat kembali pada halaman daftar tempat hiburan malam atau jika tidak maka pengguna dapat keluar dari aplikasi dan  alur aktifitas akan berakhir di sini.



1.2   Rancangan Interface


Perancangan interface aplikasi Nightlife Jakarta ini terdiri dari perancangan Menu Utama aplikasi, rancangan tampilan About, rancangan tampilan Exit, rancangan tampilan Where Are You Going, rancangan tampilan Jakarta Map, rancangan tampilan Kategori, dan  rancangan tampilan Tempat Hiburan Malam.
   1.2.1 Rancangan Menu Utama

Secara umum aplikasi Nightlife Guide of Jakarta City ini hanya menampilkan dua bagian, yaitu background dan  button. Gambar 1.4 adalah Rancangan menu utama Nightlife Guide of Jakarta City:
Gambar 1.4 Rancangan Menu Utama
  Pada rancangan menu utama ini menampilkan halaman yang didalamnya terdapat empat button yang tersedia dari Aplikasi Nightlife Guide of Jakarta City yaitu Jakarta Map, About, Where Are You Going dan  Exit. 
     
   1.2.2 Rancangan Tampilan About


Pada rancangan ini terdapat tampilan kotak dialog yang akan tampil apabila pengguna memilih tombol About pada halaman menu utama.
Gambar 1.5 Rancangan Tampilan About
Pada rancangan tampilan dialog About ini terdapat informasi aplikasi bagi para pengguna mengenai fitur yang terdapat di pada aplikasi Nightlife Guide ini. Dialog untuk tombol About ini dibuat dengan kotak dialog, Dialog ini akan muncul di depan layar menu utama dengan menggunakan pengaturan default Android.
 
   1.2.3 Rancangan Tampilan Exit

Pada rancangan ini terdapat tampilan kotak dialog yang akan tampil apabila pengguna memilih tombol Exit pada halaman menu utama. 

Gambar 1.6 Rancangan Tampilan Exit
  
             Pada rancangan tampilan dialog Exit ini terdapat informasi pilihan bagi pengguna apakah yakin ingin keluar dari aplikasi Nightlife Guide. Dialog untuk tombol Exit ini dibuat dengan kotak dialog, Dialog ini akan muncul di depan layar menu utama dengan menggunakan pengaturan default Android.
   
   1.2.4 Rancangan Tampilan Where Are You Going

Pada rancangan tampilan ini dibuat sedikit berbeda dengan menggunakan new layout. Pada new layout ini menampilkan tujuan kita. Tampilan Where Are You Going menggunakan empat buah button sehingga tampilan tersebut dapat diklik untuk masuk ke pilihan kita. Pada tampilan ini memiliki tiga buah tombol yang digunakan untuk menjalankan aplikasi, yaitu tiga tombol Categories yaitu Club, Cafe, Live Music, dan  satu tombol Back. Tampilan Where Are You Going  menggunakan background yang berbeda dengan menu utama sebelumnya.
Gambar 1.7 Rancangan Tampilan Where Are You Going

   1.2.5 Rancangan Tampilan Daftar Menu Tempat Hiburan

Pada rancangan tampilan ini dibuat sedikit berbeda dengan menggunakan new layout dan menggunakan listview sehingga tampilan tersebut dapat digeser ke bawah dengan scroll. Tampilan ini memiliki satu buah button yang digunakan untuk kembali, yaitu tombol Back Tampilan Daftar Menu Tempat Hiburan ini menggunakan background yang berbeda dengan menu utama sebelumnya dan memiliki background yang berbeda pula untuk setiap kategorinya.
Gambar 1.8 Rancangan Tampilan Daftar Menu Tempat Hiburan 
   
   1.2.6 Rancangan Tampilan Info dan Gambar Tempat Hiburan

Pada rancangan tampilan ini memang dibuat sama seperti tampilan Where Are You Going, yaitu dengan menggunakan new layout dan listview sehingga tampilan tersebut dapat digeser ke bawah dengan scroll. Tampilan informasi dan gambar Tempat Hiburan Malam ini menggunakan 2 buah tombol yang digunakan untuk menjalankan aplikasi, yaitu tombol Back dan Home. Tampilan Info dan Gambar ini menggunakan  background yang berbeda dengan tampilan Where Are You Going.
Gambar 1.9 Rancangan Tampilan Info dan Gambar Tempat Hiburan

 1.3  Pembuatan Aplikasi Nightlife Guide of Jakarta City

  
   1.3.1 Penginstalan Aplikasi Pendukung
             
            Langkah pertama penulis mengawali dengan meng-instal jdk-6u24-windows-i586 karena di perlukan library pada update java terbaru  , Proses peng-instal-an ini dilakukan pada sistem operasi Microsoft windows, jika software ini belum ada pada komputer yang digunakan untuk mengompile skrip coding yang dibuat.

1.3.1.1 Menginstall Android SDK
             
            Meng-instal Installer_r10-windows (SDK Android), software utama membuat emulator android apabila tidak memiliki handphone android.

1.3.1.2 Menginstall Eclipse Galileo
             
            Meng-instal Eclipse Galileo, ini adalah software dimana tempat membuat aplikasi game “Memory Face” yang berupa gabungan coding script berbasis java, cara instalisasinya adalah Eclipse Galileo dapat di download di http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/galileo/SR2/eclipse-java-galileo-SR2-win32.zip.

1.3.1.3 Menginstall ADT
             
            Meng- instal ADT 10.0.0, adalah plugins untuk Eclipse yang terintegrasi dengan seluruh perangkat untuk membangun aplikasi Android.
 
   
   1.3.2 Pembuatan Project

Pada tahapan ini akan dijelaskan About pembuatan kode program aplikasi Nightlife Guide secara garis besar dengan menggunakan program Eclipse Galileo, Android SDK dan  ADT yang dimulai dari pengkodean menu utama, kotak dialog About, konten Jakarta Map, menu Kategori Tempat, dan  Tempat Hiburan Malam.


1.3.2.1  Pembuatan Menu Utama

Pada pemrograman Android untuk pembuatan program dan  tampilan dilakukan pada dua bagian yang berbeda. Untuk pembuatan tampilan layout dilakukan seluruhnya pada file XML. Pada bagian rancangan menu utama ini terbagi atas 2 bagian, yaitu tombol dan  background. Untuk membuat tombol dipergunakan file main.xml yang terdapat pada folder layout. Lalu kode yang digunakan adalah sebagai berikut :
<Button android:text="Where Are You Going?"
android:layout_height="wrap_content"
android:layout_width="200dip" android:id="@+id/pindah"
android:layout_x="60dip" android:layout_y="130dip"></Button>
 
Pada penggalan kode di atas menandakan bahwa pada @+id akan membuat sebuah identifier dengan nama pindah.
Setelah melakukan pengkodean pada file xml, saatnya mendefinisikan view pada kelas Start untuk menggunakan layout yang ada pada file main.xml. Penggalan kode programnya sebagai berikut.

setContentView(R.layout.main);
Dari kode di atas bahwa kelas Start diatur layout-nya berdasarkan file main.xml yang ada di dalam folder res/layout. Berikut output dari beberapa kode di atas. 
                                     Gambar 1.10 Tombol Where Are You Going

      Sedangkan untuk pengaturan penampilan, posisi dan  background dari menu utama terdapat pada kode berikut :
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="240px"
  android:layout_height="320px"
  android:background="@drawable/main"
  >

Secara garis besar penggalan kode di atas akan mengambil gambar dari folder drawable dengan nama main lalu dipasang sebagai background. Sedangkan untuk posisi tombol digunakan pengaturan padding yang diberi nilai 60 dip (density independent pixels).
Satu hal yang tidak boleh terlupakan adalah bahwa setiap aktifitas atau service yang dibuat harus didefinisikan di dalam file AndroidManifest.xml dan  penggalan kode program tersebut adalah sebagai berikut :
<activity android:name=".start"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter></activity>

Kode di atas mendefinisikan aktivitas dengan nama Start pada file yang bertujuan untuk mengenalkan kepada Android bahwa ada aktifitas Start. Hal ini dapat dilihat ketika pengguna mengklik button Where Are You Going maka aplikasi Nightlife Guide of Jakarta City akan dapat mengenali aktifitas selanjutnya dan  menjalankannya.
Berikutnya adalah menampilkan kelas utama, yaitu start.java dengan cara override yang sama, kemudian membuat apa yang harus dilakukan program ketika pengguna menekan tombol tersebut, yaitu dengan kode berikut ini :
public class start extends Activity implements OnClickListener{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        View masuk = findViewById(R.id.pindah);
            masuk.setOnClickListener(this);
            View info = findViewById(R.id.info);
            info.setOnClickListener(this);
            View keluar = findViewById(R.id.keluar);
            keluar.setOnClickListener(this);
            View Peta = findViewById(R.id.map);
            Peta.setOnClickListener(this);}
Penggalan kode di atas digunakan untuk menampilkan 3 tombol ke dalam aktifitas Menu dengan identifier tombol pindah, info, keluar dan  map. Masing-masing tombol diberikan identifier untuk mempermudah aplikasi dalam mengenali tombol yang ditekan oleh pengguna. Dan  method setOnClickListener akan mengatur apa yang akan selanjutnya dilakukan ketika tombol diklik.
public void onClick(View v) {
            switch(v.getId()) {
        case R.id.pindah:
            Intent masuk = new Intent(this, pilihan.class);
                startActivity(masuk);
            break;
        case R.id.map:
            Intent Peta = new Intent(this, peta.class);
                startActivity(Peta);
            break;
        case R.id.keluar :
            AlertDialog.Builder mauKeluar = new AlertDialog.Builder(start.this);
            mauKeluar.setMessage("Are you sure want to Exit?").setCancelable(false)
            .setPositiveButton("YES",new AlertDialog.OnClickListener(){
                 
                  @Override
                  public void onClick(DialogInterface arg0,int arg1){
                        Intent exit = new Intent (Intent.ACTION_MAIN);
                        exit.addCategory(Intent.CATEGORY_HOME);
                        exit.setFlags(Intent.FLAG_ACTIVITY_EXCLUDE_FROM_RECENTS);
                        startActivity(exit);
                  }
            })
.setNegativeButton("NO",new AlertDialog.OnClickListener(){
@Override
public void onClick(DialogInterface dialog,int arg1){
                  dialog.cancel();
                  }    
            });
AlertDialog judul = mauKeluar.create();
judul.setTitle("EXIT ?");
judul.setIcon(R.drawable.acon);
judul.show();
Pada penggalan kode di atas merupakan suatu decision dimana jika tombol yang ditekan oleh pengguna adalah tombol Where Are You Going yang memiliki identifier pindah maka aplikasi mengganti ke layar baru dan  menjalankan aktifitas kelas pilihan. Jika yang ditekan adalah tombol About dengan identifier info maka aplikasi akan mengganti ke layar baru dan  menjalankan Kotak Dialog. Dan  jika yang ditekan adalah tombol Exit maka pengguna akan keluar dari aplikasi tersebut. Berikut tampilan dari menu utama:
            Gambar 1.11 Menu Utama



1.3.2.2 Pembuatan Peta Jakarta

Pada tampilan Peta dibuat dengan gagasan bahwa jika pengguna menekan tombol Peta, maka akan muncul tampilan peta kota  Jakarta beserta tanda lokasi tempat hiburan malam yang ada di dalam aplikasi Nightlife Guide
Langkah pertama adalah membuat tampilan untuk tombol Peta dengan membuat file XML baru di folder layout, yaitu peta.xml. Berikut penggalan kode tersebut.
<com.google.android.maps.MapView
 android:id="@+id/mapJakarta"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:apiKey="0Yr4xKn-0U7VZC1BtQUZ0hhcmojCEGi_nEmGgEQ"
 android:clickable="true" />
<LinearLayout android:id="@+id/zoom"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_alignParentLeft="true" />
Pada penggalan kode di atas menandakan bahwa pada @+id akan membuat sebuah identifier dengan nama mapJakarta. Dan dalam pembuatan tampilan peta ini, kita menggunakan bantuan API key yang disediakan oleh Google Maps. Dan pada tampilan peta ini, di mungkinkan adanya fasilitas zoom in/ zoom out.
Berikutnya adalah menampilkan tampilan layout peta yang sudah di buat di peta.xml. Dengan cara membuat file java baru yaitu peta.java, yaitu dengan kode berikut ini :
public class peta extends MapActivity {
private MapView map=null;
private MyLocationOverlay me=null;
@SuppressWarnings("deprecation")
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.peta);
map=(MapView)findViewById(R.id.mapJakarta);
map.getController().setCenter(getPoint(-6.178102,106.820641));
map.getController().setZoom(12);
ViewGroup zoom= (ViewGroup)findViewById(R.id.zoom);
zoom.addView(map.getZoomControls());
Drawable marker=getResources().getDrawable(R.drawable.marker);
marker.setBounds(0, 0, marker.getIntrinsicWidth(), marker.getIntrinsicHeight());
map.getOverlays().add(new SitesOverlay(marker));
me=new MyLocationOverlay(this, map);
map.getOverlays().add(me);
    }

Pada penggalan kode di atas akan membuat apa yang harus dilakukan program ketika pengguna menekan tombol Peta. Setelah melakukan pengkodean pada file xml, saatnya mendefinisikan view pada kelas peta untuk menggunakan layout yang ada pada file peta.xml. Dan jangan lupa untuk memasukkan geopoint dari kota Jakarta sebagai titik utama tampilan peta serta geopoint untuk lokasi tempat hiburan yang dicantumkan dalam aplikasi Nightlife Guide.
Satu hal yang tidak boleh terlupakan adalah bahwa setiap aktifitas atau service yang dibuat harus didefinisikan di dalam file AndroidManifest.xml. Dan dalam penggunaan tampilan peta ini, kita juga harus memasukkan akses internet. Karena penggunaan tampilan ini bergantung pada akses internet. Dan penggalan kode program tersebut adalah sebagai berikut:
<uses-permission
    android:name="android.permission.INTERNET" />
    <uses-permission
    android:name="android.permission.ACCESS_COARSE_LOCATION"/>
Dan untuk tampilan peta jakarta yang tersedia dalam aplikasi adalah sebagai berikut:
 Gambar 1.12 Peta Jakarta
 


1.3.2.3 Pembuatan Kotak Dialog About

Pada tampilan About dibuat dengan gagasan bahwa jika pengguna menekan tombol About, maka akan muncul kotak dialog yang berisikan informasi mengenai aplikasi Nightlife Guide.
Pada pemrograman Android semua resource mulai dari gambar, layout, string, lagu dan  segala jenis resource lainnya selalu dilakukan pada file XML. Oleh karena itu, dalam membuat kotak dialog About hanya dilakukan degan memodifikasi file start.java pada folder src. Lalu dimasukkan kode berikut ini :
AlertDialog.Builder info = new AlertDialog.Builder(start.this);
info.setMessage("Aplikasi sederhana ini di buat untuk " +        "memberikan informasi dan kemudahan " +
      "dalam memilih tempat hiburan malam " +
      "ketika anda berlibur di Kota Jakarta." +
      "\n" +
      "\n" +
      "Nama  : Rendi Utoyo\n" +
      "Kelas       : 3IA06\n" +
      "NPM         : 50408701\n")
.setCancelable(false)
.setPositiveButton("OK",new AlertDialog.OnClickListener()
@Override
public void onClick(DialogInterface dialog,int id){dialog.cancel();}});
AlertDialog judul1 = info.create();
judul1.setTitle("Application Info");
judul1.setIcon(R.drawable.info);
judul1.show();
break;
Pada penggalan kode di atas akan membuat text. Semua label, text field dan  segala jenis karater lainnya akan diletakkan di dalam file start.java ini. Title Application Info adalah sebuah Menu Dialog yang dimasukan dalam class start.Java.
Langkah selanjutnya adalah membuat tampilan untuk tombol About dengan membuat file XML baru di folder layout, yaitu main.xml. Berikut penggalan kode tersebut.
<Button
      android:layout_height="wrap_content"
      android:id="@+id/info"
      android:text="About"
      android:layout_width="80dip"
      android:layout_x="120dip"
      android:layout_y="225dip">
      </Button>
Pada dasarnya yang harus dilakukan hanyalah melakukan override pada method onCreate dan  mengatur layout yang digunakan pada kelas start yang diambil dari folder res/layout berisi tampilan yang sudah dibuat pada file main.xml. Berikut ini output dari beberapa kode pembuatan kotak dialog About di atas.
 Gambar 1.13 Kotak Dialog About


1.3.2.4 Pembuatan Kotak Dialog Exit

Pada tampilan Exit dibuat dengan gagasan bahwa jika pengguna menekan tombol Exit, maka akan muncul kotak dialog untuk keluar dari aplikasi Nightlife Guide.
Pada pemrograman Android semua resource mulai dari gambar, layout, string, lagu dan  segala jenis resource lainnya selalu dilakukan pada file XML. Oleh karena itu, dalam membuat kotak dialog About hanya dilakukan degan memodifikasi file start.java pada folder src. Lalu dimasukkan kode berikut ini :
AlertDialog.Builder mauKeluar = new AlertDialog.Builder(start.this);
mauKeluar.setMessage("Are you sure want to Exit?")
.setCancelable(false)
.setPositiveButton("YES",new AlertDialog.OnClickListener(){
@Override
public void onClick(DialogInterface arg0,int arg1){
Intent exit = new Intent (Intent.ACTION_MAIN);
exit.addCategory(Intent.CATEGORY_HOME);
exit.setFlags(Intent.FLAG_ACTIVITY_EXCLUDE_FROM_RECENTS);
startActivity(exit);
                  }
            })
.setNegativeButton("NO",new AlertDialog.OnClickListener(){
@Override
public void onClick(DialogInterface dialog,int arg1){
                  dialog.cancel();
                  }    
            });
AlertDialog judul = mauKeluar.create();
judul.setTitle("EXIT ?");
judul.setIcon(R.drawable.acon);
judul.show();
Pada penggalan kode di atas akan membuat text. Semua label, text field dan  segala jenis karater lainnya akan diletakkan di dalam file start.java ini. Title EXIT  adalah sebuah Menu Dialog yang dimasukan dalam class start.Java.
Langkah selanjutnya adalah membuat tampilan untuk tombol Exit dengan membuat file XML baru di folder layout, yaitu main.xml. Berikut penggalan kode tersebut.
<Button
      android:layout_height="wrap_content"
      android:id="@+id/keluar"
      android:text="Exit"
      android:layout_width="60dip"
      android:layout_x="131dip"
      android:layout_y="270dip">
      </Button>

Pada dasarnya yang harus dilakukan hanyalah melakukan override pada method onCreate dan  mengatur layout yang digunakan pada kelas start yang diambil dari folder res/layout berisi tampilan yang sudah dibuat pada file main.xml. Berikut ini output dari beberapa kode pembuatan kotak dialog Exit di atas. 
 Gambar 1.14 Kotak Dialog Exit


1.3.2.5 Pembuatan Tampilan Where Are You Going

Tampilan ini terdiri atas listing java dan  xml yang di mana nanti keduanya saling berhubungan untuk membuat layout tampilan ini bisa digunakan, untuk xml-nya digunakan listing sebagai berikut. Widget adalah objek view yang bertugas sebagai sebuah antarmuka untuk interaksi dengan pengguna. Pada saat pengguna menekan tombol - tombol Categories (Club, Cafe, dan Live Music) pada tampilan awal Where Are You Going, pengguna akan dibawa masuk ke dalam tampilan dengan berbagai kategori pilihan tempat hiburan malam.
Seperti biasa untuk membuat widget tab, hal yang pertama perlu dilakukan adalah membuat file XML baru, yaitu main.xml di dalam folder layout lalu dimasukkan kode berikut ini :
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
android:id="@+id/widget0"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@drawable/pilihan">
<Button
android:id="@+id/button_menu"
android:layout_width="110px"
android:layout_height="40px"
android:text="CLUB"
android:layout_x="70px"
android:layout_y="80px">
</Button>
<Button
android:id="@+id/button_menuu"
android:layout_width="110px"
android:layout_height="40px"
android:text="CAFE"
android:layout_x="70px"
android:layout_y="125px">
</Button>
<Button
android:id="@+id/button_menuuu"
android:layout_width="110px"
android:layout_height="40px"
android:text="LIVE MUSIC"
android:layout_x="70px"
android:layout_y="170px">
</Button>
<Button
android:id="@+id/button_back"
android:layout_width="240px"
android:layout_height="45px"
android:text="BACK"
android:layout_x="1px"
android:layout_y="240px"
android:onClick="exit">
</Button>
</AbsoluteLayout>
Setelah melakukan pengkodean pada pilihan.xml kemudian lakukan pengkodean sederhana pada java seperti tampilan menu utama sebelumnya.
public class pilihan extends Activity implements OnClickListener {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.pilihan);
Maka output programnya akan seperti berikut ini.
 Gambar 1.15 Tampilan Where Are You Going


1.3.2.6 Pembuatan Tampilan Daftar Menu Tempat Hiburan

Tampilan ini dibuat dengan gagasan bahwa jika pengguna menekan tombol Categories (Club, Cafe, Live Music), maka akan muncul tampilan daftar nama – nama tempat hiburan yang tersedia.
Pada pemrograman Android semua resource mulai dari gambar, layout, string, lagu dan  segala jenis resource lainnya selalu dilakukan pada file XML. Oleh karena itu, dalam membuat kotak dialog About hanya dilakukan degan memodifikasi file start.java pada folder src. Lalu dimasukkan kode berikut ini :
Pertama-tama dibuat aktifitas class java yang akan berkaitan dengan tampilan ini yaitu. Penggalan kode yang digunakan adalah sebagai berikut :
public class listclub extends Activity implements OnClickListener{
    /** Called when the activity is first created. */
    @SuppressWarnings("unchecked")
      @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.daftar);
        View kembali = findViewById(R.id.kembali);
      kembali.setOnClickListener(this);
     
          ListView l = (ListView) findViewById(R.id.ListView);
          ArrayAdapter adapter = ArrayAdapter.createFromResource(
                this, R.array.wisata, android.R.layout.simple_dropdown_item_1line);
          l.setAdapter(adapter);
          l.setOnItemClickListener(new AdapterView.OnItemClickListener(){
Penggalan kode di atas menyatakan bahwa kelas listclub merupakan kelas java yang digunakan dalam pembuatan tampilan ini. Dan untuk tampilanya akan mengunakan file xml dari layout yang ada pada daftar.xml.

Kemudian, dibuat dulu script yang akan menjadi tempat untuk data nama tempat hiburan yang tersedia. Di script ini ada pemanggilan resource dari folder values yang digunakan untuk membuat daftar-daftar menu tempat hiburan yaitu di ambil dari folder values yang bernama array.xml, di mana array wisata ini berisi berbagai macam daftar menu tempat hiburan malam yang nanti akan muncul. Berikut listingnya :

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="wisata">
        <item>ALEXIS</item>
        <item>BARCODE</item>
        <item>B.A.S.T</item>
        <item>BLOWFISH</item>
        <item>CENTRO</item>
        <item>CJs</item>
        <item>CLUB 36</item>
        <item>DRAGONFLY</item>
        <item>GOLDEN CROWN</item>
        <item>ILLIGALS</item>
        <item>IMMIGRANT</item>
        <item>K.A.M.P.U.S</item>
        <item>LUVs</item>
        <item>MILLENIUM</item>
        <item>MUSRO</item>
        <item>RED SQUARE</item>
        <item>SECOND FLOOR</item>
        <item>STADIUM</item>
        <item>SUN CITY</item>
        <item>TRIPLE NINE</item>
        <item>X2</item>
        <item>X-LOUNGE</item>
    </string-array>
</resources>

Untuk menangkap nilai pilihan yang di pilih, gunakan onItemClick. Ini menggunakan perintah If position yang dimana jika pengguna memilih salah satu daftar objeknya maka listing ini akan mengejar ke class java baru yang pengguna pilih tersebut. Berikut penggalan listingnya :
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
          if(position == 0) {
          Intent intent = new Intent(getApplicationContext(), alexis.class);
          startActivity(intent);
          }
          if(position == 1) {
              Intent intent = new Intent(getApplicationContext(), barcode.class);
              startActivity(intent);
        }
          if(position == 2) {
              Intent intent = new Intent(getApplicationContext(), bats.class);
              startActivity(intent);
        }
Kemudian jangan lupa tuk sebelumnya harus dibuat juga bagaimana daftar tempat hiburan malam itu akan di tampilkan yaitu dengan membuatnya di file daftar.xml. Penggalan koding untuk tampilan layout yang ada dalan file daftar.xml adalah sebagai berikut:
<TextView
android:text="Please choose where you want !"
android:id="@+id/TextView" android:textColor="#0000ff"
android:textSize="20sp" android:layout_width="240px"
android:layout_height="wrap_content" android:gravity="center">
</TextView>
<LinearLayout
android:id="@+id/LinearLayout"
android:layout_width="fill_parent" android:layout_height="wrap_content"><ListView
android:id="@+id/ListView" android:layout_width="fill_parent"
android:layout_height="300dip"></ListView>
</LinearLayout>
<Button
android:id="@+id/kembali" android:layout_width="240px" android:layout_height="40px" android:text="BACK"></Button>
</LinearLayout>
Berikut ini contoh output dari kodingan Class dan  Xml Daftar Menu Tempat Hiburan Malam.
 Gambar 1.16 Tampilan Daftar Menu Tempat Hiburan


1.3.2.7 Pembuatan Tampilan Info dan  Gambar Tempat Hiburan


Tampilan ini menggunakan banyak file class java dan  file xml-nya. Ada 39 file class java dan 39 file xml yang berpasangan. Setiap 1 file class java berpasangan 1 file xml . Dimana setiap file class java dan  file xml listingnya hampir serupa. Potongan listing xml-nya adalah sebagai berikut :
<ScrollView 
android:id="@+id/ScrollView01"
android:layout_x="0dip"
android:layout_y="0px"
android:layout_width="240px"
android:layout_height="150dip">

<TextView android:id="@+id/TextView"
android:text="@string/alexis"
android:layout_width="wrap_content"
android:layout_x="0dip"
android:layout_height="130dip"
android:layout_y="3dip" >
</TextView>


Listing ini terdiri dari layout absolute yang designnya bisa di atur sendiri lalu ada widget gallery dan  image yang nantinya id-gallery tersebut berhubungan ke file class java untuk membuat sebuah gallery image. Ada juga widget scrollview dan  text yang nantinya untuk menampilkan informasi di dalam layout ini yang jika informasinya banyak nanti bisa di scroll ke bawah untuk melihat seluruh informasi. Lalu ada widget button yang id-nya ini akan berhubungan di class java-nya. Di setiap tampilan informasi dan  gambar pariwisata,semua script file xml-nya sama ,hanya yang membedakan di script yang ini :
android:text="@string/alexis"


Script ini berguna untuk menampilkan isi informasi daftar objek yang di pilih pengguna.script ini untuk info tempat hiburan malam Alexis yang berkategorikan Club. Untuk info tempat hiburan yang lain di listing xml ,scriptnya adalah sebagai berikut:

android:text="@string/amor"
android:text="@string/comedycafe"
.
.
.
.
.
android:text="@string/xx"


Setelah ini semua terdistribusi maka akan di buat file class java-nya yang nanti akan saling berpasangan sesuai dengan nama file xml dan   file class java yang sama. Berikut potongan listing Javanya :
public class alexis extends Activity implements OnClickListener{
      //---Daftar Gambar yang ingin Ditampilkan---
                Integer[] list_image = {
                        R.drawable.alexis1,
                        R.drawable.alexis2,
                        R.drawable.alexis3,
                        R.drawable.alexis4,
                        R.drawable.alexis5,
                        };
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.alexis);


Listing java ini berpasangan dengan listing xml info tempat hiburan malam Alexis yang di mana pada awal mulanya listing ini menggunakan perintah untuk memuat daftar gambar yang diinginkan, lalu selanjutnya seperti biasa yaitu listing untuk menghubungkan file java ini dengan xml yang diinginkan, selanjutnya pendeklarasian button – button beserta fungsi –fungsi yang ingin digunakan. Setelah itu listing ini akan membuat sebuah gallery image yang nanti akan ditampilkan di layout xml-nya dengan mengambil gambar yang tadi di muat dilisting yang paling atas sebagai gambar – gambar yang akan ditampilkan pada gallerynya. Sama seperti listing setiap xml , setiap listing java ini juga sama semua hanya yang membedakan daftar gambar dan  hubungan antar layoutnya. Untuk listing java , berikut ini potongan listing informasi dan  gambar tempat hiburan lainnya, contoh scriptnya adalah sebagai berikut :


Info Tempat Hiburan Malam HardRock Cafe

public class hardrock extends Activity implements OnClickListener{
      //---Daftar Gambar yang ingin Ditampilkan---
                Integer[] list_image = {
                        R.drawable.hardrock1,
                        R.drawable.hardrock2,
                        R.drawable.hardrock3,
                        R.drawable.hardrock4,
                        R.drawable.hardrock5,
                        R.drawable.hardrock6,
                        R.drawable.hardrock7,
                        };
  Info Tempat Hiburan Malam Magnum Cafe

public class magnumcafe extends Activity implements OnClickListener{
      //---Daftar Gambar yang ingin Ditampilkan---
                Integer[] list_image = {
                        R.drawable.magnumcafe1,
                        R.drawable.magnumcafe2,
                        R.drawable.magnumcafe3,
                        R.drawable.magnumcafe4,
                        R.drawable.magnumcafe5,
                        R.drawable.magnumcafe6,
                        R.drawable.magnumcafe7,
                        R.drawable.magnumcafe8,
                        };

 Info Tempat Hiburan Malam Backstage

public class backstage extends Activity implements OnClickListener{
      //---Daftar Gambar yang ingin Ditampilkan---
                Integer[] list_image = {
                        R.drawable.backstage1,
                        R.drawable.backstage2,
                        R.drawable.backstage3,
                        R.drawable.backstage4,
                        R.drawable.backstage5,
                        R.drawable.backstage6,
                        };
.
.
.
.
public class xx extends Activity implements OnClickListener{
      //---Daftar Gambar yang ingin Ditampilkan---
                Integer[] list_image = {
                        R.drawable.ekstu1,
                        R.drawable.ekstu2,
                        R.drawable.ekstu3,
                        R.drawable.ekstu4,
                        R.drawable.ekstu5,
                        R.drawable.ekstu6,
                        };

             Dan  tentunya setiap listing java ini akan berhubungan dengan layout xml yang sama dengan nama file class java dengan file xml-nya. Dan  jika pengguna akan memilih button BACK maka aktifitas di setiap tampilan ini akan di tutup dan  balik ke tampilan awal yaitu tampilan daftar pilihan tempat hiburan. Dan  jika mau keluar maka di tampilan awal ini tinggal di pilih button HOME.


1.3.2.8 Pembuatan Activity Pada Android Manifest


Untuk dapat mengaktifkan class-class baru yang telah dibuat, buat aktifitinya pada AndroidManifest.xml. Urutkan activity berdasarkan urutan tampilan. Lihat script berikut :
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="nightlife.guide"
      android:versionCode="1">
            <uses-permission
    android:name="android.permission.INTERNET" />
    <uses-permission
    android:name="android.permission.ACCESS_COARSE_LOCATION"/>
      <application android:icon="@drawable/icon1"
    android:label="@string/app_name">
    <uses-library
    android:name="com.google.android.maps" />
            <activity android:name=".start"
                  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=".listclub" android:label="Club"/>
<activity android:name=".listclubb" android:label="Cafe"/>
<activity android:name=".listclubbb" android:label="Live Music"/>
<activity android:name=".pilihan" android:label="Categories Nightlife"/>
<activity android:name=".peta" android:label="Map of Jakarta"/>
<activity android:name=".alexis" android:label="ALEXIS"/>
<activity android:name=".apartement" android:label="The Apartment"/>
<activity android:name=".backstage" android:label="The Backstage"/>
.
.
.
.
.
<activity android:name=".satulagi" android:label="The Satu Lagi"/>
<activity android:name=".comedycafe" android:label="The Comedy Cafe"/>

   </application>
   <uses-sdk android:minSdkVersion="8" />
</manifest>

            Tampilan pertama yang akan muncul ketika aplikasi dijalankan adalah Tampilan Awal, kemudian daftar yang berisi objek – objek pariwisata dilanjutkan dengan akitifitas info – info dan gambar pariwisata yang diaktifkan sesuai dengan listing program di atas.



1.4   Kompilasi

Setelah membuat kode aplikasi Nightlife Guide perlu dilakukan kompilasi untuk mengetahui apakah kode tersebut berhasil dijalankan atau tidak. Untuk melakukan kompilasi dapat dilakukan dengan cara klik kanan pada projek aplikasi yang ingin dikompilasi di Eclipse lalu pilih Run as dan  selanjutnya pilih yang 1 Android Application. Jika proses kompilasi gagal maka akan muncul kotak dialog seperti pada gambar 3.12 berikut ini.
Gambar 1.17 Kompilasi Gagal

Untuk mengetahui di mana letak kesalahan tersebut sehingga dapat diperbaiki ada pada tab Problems di bagian bawah Eclipse. Contohnya seperti gambar 3.13 berikut ini. 
Gambar 1.18 Kesalahan pada Kompilasi

Dan  jika proses kompilasi berhasil maka akan muncul emulator Android yang akan menampilkan hasil dari pembuatan kode aplikasi Nightlife Guide. Untuk mengetahui apakah proses kompilasi sudah berakhir dapat dilihat pada tab Concole di Eclipse. Contohnya seperti gambar 3.14berikut ini. 
 Gambar 1.19 Kompilasi Berhasil


Jika kesalahan terdapat pada logika program, proses kompilasi tetap berhasil dilakukan dan  kesalahan akan terlihat saat aplikasi pada emulator dibuka, akan muncul pesan error seperti gambar di bawah ini. 
 Gambar 1.20 Pesan error pada emulator



1.5   Pengujian Aplikasi


Untuk mencoba menjalankan aplikasi pada emulator, klik window>Android SDK and AVD Manager. Pada dialog AVD Manager, isikan field untuk AVD seperti gambar di bawah ini :
 Gambar 1.21 Tampilan Create AVD


Lalu klik Create AVD. Selanjutnya klik Start dan akan terbuka jendela baru seperti gambar dibawah ini.
 Gambar 1.22 Tampilan Launch Program


Setelah emulator berhasil dibuat, klik kanan pada project yang ingin dijalankan pada emulator, lalu klik kanan > Run As > Android Application. Lalu akan muncul tampilan seperti dibawah ini :
Gambar 1.23 Tampilan Awal Virtual Android


Buka kunci android, lalu klik menu utama dan aplikasi Nightlife Guide akan terlihat jika berhasil diinstal.
Setelah aplikasi Nightlife Guide di instal, saatnya menggunakan aplikasi tersebut. Untuk membuka aplikasi Nightlife Guide klik ikon Nightlife Guide pada menu ponsel. 
 Gambar 1.24 Aplikasi Nightlife Guide

Pada halaman awal tekan tombol Where Are You Going untuk menuju ke aplikasi, tekan tombol About  untuk melihat informasi yang berkenaan dengan aplikasi Nightlife Guide, tekan tombol Jakarta Map untuk melihat tampilan peta kota Jakarta yang sudah disertai dengan lokasi tempat-tempat hiburan yang tersedia di dalam aplikasi, atau tekan tombol Exit untuk keluar dari aplikasi. Jika tombol About yang ditekan maka akan muncul kotak dialog seperti gambar 1.25 berikut ini. 
 Gambar 1.25 Tampilan About

Jika tombol Jakarta Map yang dipilih, maka pengguna akan menuju ke dalam halaman seperti gambar 1.26 berikut  ini. 
 Gambar 1.26 Tampilan Jakarta Map

Pada tampilan peta kota Jakarta, jika pengguna ingin kembali ke halaman awal, maka pengguna dapat menekan tab Back dan  akan masuk ke halaman Utama.
Jika tombol Where Are You Going yang dipilih, maka pengguna akan menuju ke dalam halaman seperti gambar 1.27 berikut  ini. 
 Gambar 1.27 Tampilan Where Are You Going

Pada halaman Where Are You Going pengguna dapat memilih Kategori Tempat Hiburan Malam untuk melihat tempat hiburan mana yang ingin dituju didalam memori ponsel Android.
            Dan jika pengguna menekan salah satu dari tiga kategori yang terdapat pada halaman Where Are you Going, pengguna akan diberi suguhan daftar menu tempat hiburan yang sesuai dengan setiap kategorinya seperti gambar 1.28 berikut ini: 
Gambar 1.28 Tampilan Daftar Menu Tempat Hiburan

Ketika salah satu daftar ini di pilih maka akan muncul tampilan info tempat hiburan malam yang di pilih, seperti gambar 1.29 berikut ini .
 Gambar 1.29 Tampilan Info dan Gambar Tempat Hiburan

             Ketika button BACK di pilih maka akan kembali ke tampilan yang tadi yaitu tampilan daftar tempat hiburan yang tersedia, sedangkan jika pengguna memilih button HOME maka pengguna akan diarahkan ke halaman awal.

             Pada halaman awal, jika anda ingin keluar dari aplikasi maka anda bisa melakukanya dengan menekan tombol exit. Setelah itu akan muncul kotak  dialog yang akan menanyakan kepastian maksud anda untuk keluar dari aplikasi. seperti gambar 1.30 berikut ini :
           Gambar 1.30 Tampilan Kotak Dialog Exit

 

3.6   Implementasi

Setelah proses kompilasi dan pengujian aplikasi berhasil, saatnya mengimplementasikan aplikasi Nightlife Guide pada ponsel Android. Pertama, sambungkan kabel data dari ponsel Android ke komputer. Lalu download dan  instal aplikasi APKInstaller pada komputer. Berikutnya install aplikasi Nightlife Guide ke dalam ponsel Android dengan klik ganda pada file bernama NightlifeGuide.apk yang terdapat di dalam folder bin di dalam projek Android, misalnya C:\NightlifeGuide\bin. Pada jendela APKInstaller yang muncul pilih tombol Install
 Gambar 1.31 Jendela APKInstaller
Tunggu sampai proses instalasi selesai. 
 Gambar 1.32 Proses Instalasi file apk

Dan  sekarang ponsel Android telah terinstal aplikasi Nightlife Guide dan  siap digunakan.



9 komentar:

  1. mas...saya boleh mendapatkan source codenya kah..?

    BalasHapus
  2. maaf mengganggu saya hanya ingin berbagi artikel yang berkaitan tentang UML dan Java
    berikut linknya :
    http://repository.gunadarma.ac.id/bitstream/123456789/2470/1/076.pdf
    semoga bermanfaat :)

    BalasHapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. Coding lengkapnya nanti saya kasih linknya..

    BalasHapus
    Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus
  5. mas boleh share source codenya dong...

    BalasHapus
  6. bagi coding lengkapnya dong mas :)

    BalasHapus