TUGAS PEMROGRAMAN MULTIMEDIA.

"APLIKASI WISATA KOTA GARUT BERBASIS ANDROID"

Tampilan Halaman Pembuka

      Halaman pertama yang akan dirancang adalah halaman pembuka (splash screen).Halaman Splash Screen ini berfungsi sebagai halaman pembuka yang nantinya terhubung dengan halaman Main Menu. Pada halaman pembuka ini, penulis menggunakan sebuah file image sebagai latar belakang (background) dari tampilan ini.

Listing program :

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@drawable/splash"

    android:orientation="vertical" >

    <ProgressBar

        android:id="@+id/progressBar1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_alignParentRight="true"

        android:layout_marginBottom="30dp"

        android:layout_marginRight="120dp" />

</RelativeLayout>

Kode program di atas merupakan perintah dalam splash.xml yang berfungsi untuk membuat tampilan halaman splash screen-nya dengan menggunakan widget progress bar.

package app.chandra.wisatagarut;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.view.WindowManager;

public class Splash extends Activity{

                @Override

                protected void onCreate(Bundle savedInstanceState) {

                                setTheme(android.R.style.Theme_Translucent_NoTitleBar_Fullscreen);

                                getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

                                // TODO Auto-generated method stub

                                super.onCreate(savedInstanceState);

                                setContentView(R.layout.splash);

Thread timer = new Thread() {

                                                public void run() {

                                                                try {

//berapalama splashscreen akan ditampilkan dalam milisecond

                                  sleep(5000);

                           } catch (InterruptedException e) {

                                  //TODO: handle exception

                                  e.printStackTrace();

                           } finally {

                                  //activity yang akan dijalankan setelah splashscreen selesai

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

                                  startActivity(i);

                                  Splash.this.finish();

                                 

                           }

                     }

              };

              timer.start();

       }

       public void onBackPressed(){

}

}

Tampilan kode program di atas adalah Splash.java yang digunakan untuk memanggil dan menjalankan kode program splash.xml. Pada potongan program tersebut, program akan berfungsi untuk melakukan delay (berhenti sejenak) selama 5 detik kemudian pindah ke halaman menu utama.

Pembuatan Halaman Menu Utama

     Tampilan pada halaman menu utama ini masih mengikuti pola dari halaman splash screen sebelumnya, hanya terdapat tambahan 4 tombol. Tombol tersebut yaitu Tombol Tempat Wisata, Tombol Hotel, Tombol About dan Tombol Exit.

Listing program :

<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/menu_utama"

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

        <ImageButton

              android:id="@+id/imageButton1"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_alignParentLeft="true"

               android:layout_alignParentTop="true"

                       Potongan kode program di atas adalah untuk tampilan menu utama yang dibuat pada file activity_main.xml yang menggunakan button dengan latar belakang gambar pada masing-masing button tersebut.

package app.chandra.wisatagarut;

import android.os.Bundle;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.app.AlertDialog;

import android.app.Fragment;

import android.content.DialogInterface;

import android.content.Intent;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.ImageButton;

@SuppressLint("NewApi")

public class MainActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

    ImageButton button_tempat_wisata = (ImageButton) findViewById(R.id.imageButton1);

       button_tempat_wisata.setOnClickListener(new View.OnClickListener() {

              public void onClick(View arg0) {

            // TODO Auto-generated method stub

            Intent i =new Intent(getApplicationContext(),Tempat_wisata.class);

            startActivity(i);

              }

       });

       ImageButton button_hotel = (ImageButton) findViewById(R.id.imageButton2);

       button_hotel.setOnClickListener(new View.OnClickListener() {

              public void onClick(View arg0) {

            // TODO Auto-generated method stub

            Intent i =new Intent(getApplicationContext(),Hotel.class);

            startActivity(i);

              }

       });

      

ImageButton button_about = (ImageButton) findViewById(R.id.imageButton3);

       button_about.setOnClickListener(new View.OnClickListener() {

              public void onClick(View arg0) {

            // TODO Auto-generated method stub

            Intent i =new Intent(getApplicationContext(),Tentang.class);

            startActivity(i);

              }

       });

//aksi untuk button keluar

    ImageButton button_keluar = (ImageButton) findViewById(R.id.imageButton4);

    button_keluar.setOnClickListener(new View.OnClickListener() {

        

       public void onClick(View clicked) {

              switch (clicked.getId()) {

                     case R.id.imageButton4:

                            keluar();

                            break;

              }

       }

    }

    );

}

public boolean onCreateOptionsMenu(Menu menu) {   

    // Inflate the menu; this adds items to the action bar if it is present.

    getMenuInflater().inflate(R.menu.main, menu);

    return true;

}

@SuppressLint("NewApi")

public boolean onOptionsItemSelected(MenuItem item) {

    int id = item.getItemId();

    if (id == R.id.action_settings) {

        return true;

    }

    return super.onOptionsItemSelected(item);

}

public static class PlaceholderFragment extends Fragment {

    public PlaceholderFragment() {

    }

}

//aksi untuk alert message

private void keluar() {

       AlertDialog.Builder keluar = new AlertDialog.Builder(this);

       keluar.setMessage("Apakah Anda yakin ingin Keluar?")

       .setCancelable(false)

       .setPositiveButton("Ya", new

              DialogInterface.OnClickListener() {

                     public void onClick(DialogInterface dialog, int id) {

                           MainActivity.this.finish();

                     }

              }

       )

       .setNegativeButton("Tidak",new

              DialogInterface.OnClickListener() {

                     @Override

                     public void onClick(DialogInterface dialog,

                           int arg1) {

                     dialog.cancel();    

                           }

              }).show();

    }

    }

Potongan program di atas merupakan bagian dari file Main_Activity.java yang berisi perintah untuk mendefinisikan masing-masing button yang telah dibuat pada file .xml sebelumnya. Kemdian untuk potongan program kedua merupakan perintah pemanggilan method pada masing-masing button saat dilakukan klik.

Tampilan Tempat Wisata
            Pada tampilan tempat Wisata ini, berisikan daftar Tempat wisata yang berada di kota Garut, dimana posisi disusun secara vertikal dari atas ke bawah dengan menggunakan listview.

Listing program:

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

<RelativeLayout

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

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/tempat_wisata" >

<TextView

       android:id="@+id/yangDipilih"

       android:layout_width="fill_parent"

       android:layout_height="wrap_content" />

<ListView

        android:id="@+id/listView1"

        android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:layout_alignParentLeft="true"

       android:layout_below="@+id/yangDipilih"

       android:layout_marginLeft="10dp"

       android:layout_marginTop="100dp" >

</ListView>

</RelativeLayout>

Kode program di atas adalah bagian dari file tempat_wisata.xml yang berfungsi untuk membuat tampilan daftar Tempat wisata. Pada halaman tersebut, penulis menggunakan Listview. Kemudian didalamnya berisikan informasi tentang Tempat wisata yang dipilih.

package app.chandra.wisatagarut;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.ListView;

import android.widget.AdapterView.OnItemClickListener;

public class Tempat_wisata extends Activity implements OnItemClickListener{

      

       ListView mulai;

       String[] menulist = {"SITU BAGENDIT", "SITU CANGKUANG", "CURUG CITIIS", "PEMANDIAN CIPANAS", "CANDI CANGKUANG", "WATERBOOM DARAJAT PAS", "KAWAH KAMOJANG", "GUNUNG PAPANDAYAN"};

      

       @Override

       protected void onCreate(Bundle savedInstanceState){

              super.onCreate(savedInstanceState);

              setContentView(R.layout.tempat_wisata);

             

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

             

              ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, menulist);

             

              mulai.setAdapter(adapter);

              mulai.setOnItemClickListener(this);}

public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3){

if (position == 0){

        Intent i = new Intent(Tempat_wisata.this, Situ_bagendit.class);

        startActivity(i);

       finish();}

else if(position == 1){

        Intent i = new Intent(Tempat_wisata.this, Situ_cangkuang.class);

        startActivity(i);

       finish();}

else if(position == 2){

        Intent i = new Intent(Tempat_wisata.this, Curug_citiis.class);

        startActivity(i);

       finish();}

else if(position == 3){

        Intent i = new Intent(Tempat_wisata.this, Cipanas.class);

        startActivity(i);

       finish();}

else if(position == 4){

        Intent i = new Intent(Tempat_wisata.this, Candi_cangkuang.class);

        startActivity(i);

       finish();}

else if(position == 5){

        Intent i = new Intent(Tempat_wisata.this, Waterboom.class);

        startActivity(i);

 finish();}

else if(position == 6){

        Intent i = new Intent(Tempat_wisata.this, Kawah_kamojang.class);

        startActivity(i);

        finish();}

else if(position == 7){

        Intent i = new Intent(Tempat_wisata.this, Gunung_papandayan.class);

        startActivity(i);  

finish();}

else{}

}

}

Potongan program di atas adalah bagian dari file class Tempat_wisata.java yang mendfinisikan aksi dari button button yang terdapat pada file tempat_wisata.xml sebelumnnya. Kemudian  juga pada program diatas terdapat perintah pemanggilan method pada setiap daftar Tempat wisata yang nantinya akan dipilih.

Pembuatan Tampilan Halaman Informasi Tempat Wisata

Pada tampilan informasi tempat wisata ini berisi informasi terkait tentang tempat wisata yang di pilih. Pada halaman ini juga terdapat gambar tempat wisata yang menggunakan Image Button dan bisa melihat peta lokasi tempat wisata yang menggunakan button.

Listing program:

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@drawable/background_tempat_wisata2"

    android:orientation="vertical" >

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="224dp"

        android:layout_height="227dp"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="50dp"

        android:src="@drawable/situ_bagendit" />

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_alignParentLeft="true"

        android:layout_marginBottom="53dp"

        android:text="Situ Bagendit (Danau Bagendit) masih menjadi salah satu tempat Wisata favorit para wisatawan apabila berkunjung ke Kota Garut. Situ Bagendit merupakan danau yang dilingkupi kawasan yang masih alami, dikelilingi oleh pesawahan dan perkampungan penduduk dengan latar pegunungan yang indah. Situ Bagendit terletak di Kec. Banyuresmi. Dengan luasnya yang lebih dari 124 Ha, maka Anda bisa berlayar ke tengah situ dengan menggunakan rakit, sepeda air, Canoe, atau memancing di sini."

        android:textStyle="bold" />

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:text="Lihat peta dan petunjuk arah" />

</RelativeLayout>

Kode program di atas merupakan source code tampilan halaman informasi Situ Bagendit yang kita buat dengan situ_bagendit.xml. Pada halaman tersebut, informasi yang terkait dengan rumah sakit diletakkan dalam textview sehingga mempermudah dalam pembuatan program.

package app.chandra.wisatagarut;

       import android.app.Activity;

import android.content.Intent;

import android.net.Uri;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

       public class Situ_bagendit extends Activity{

              @Override

              protected void onCreate(Bundle savedInstanceState) {

                     super.onCreate(savedInstanceState);

                     setContentView(R.layout.situ_bagendit);

                    

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

               button1.setOnClickListener(new View.OnClickListener() {

                    

                     public void onClick(View v) {

                     // TODO Auto-generated method stub

                            Intent intent = new Intent(android.content.Intent.ACTION_VIEW,

                            Uri.parse("http://maps.google.com/maps?f=d&saddr=&daddr=-7.159747, 107.941303"));

                            startActivity(intent);

                     }

              }

               );

              }

       }
Pembuatan Tampilan Halaman About

                Pada tampilan tentang (about) ini, berisikan informasi mengenai aplikasi Informasi Tempat Wisata di Kota Garut, disebutkan juga cara penggunaan serta tombol alamat profil facebook dan twitter dari pembuat aplikasi tersebut. Selain itu juga terdapat sebuah gambar background dari halaman Tentang ini. Semua informasi tersebut diletakkan dalam sebuah Background Image.

            Tampilan Menu Keluar

             Tampilan “Exit” berikut terdiri dari sebuah TextView dan 2 buah button yaitu “No” dan “Yes”. Apabila user memilih button “No”, maka program tidak akan keluar dan kembali ke menu utama. Tetapi jika user memilih button “Yes”, secara otomatis program akan berhenti dan keluar.

Listing program:

//aksi untuk alert message

    private void keluar() {

        AlertDialog.Builder keluar = new AlertDialog.Builder(this);

        keluar.setMessage("Apakah Anda yakin ingin Keluar?")

        .setCancelable(false)

        .setPositiveButton("Ya", new

               DialogInterface.OnClickListener() {

                      public void onClick(DialogInterface dialog, int id) {

                             MainActivity.this.finish();

                      }

               }

        )

        .setNegativeButton("Tidak",new

               DialogInterface.OnClickListener() {

                      @Override

                      public void onClick(DialogInterface dialog,

                             int arg1) {

                      dialog.cancel();    

                             }

               }).show();

    }

}

Source code di atas adalah potongan kode program yang merupakan bagian dari class Main_Acitivity.java yang menampilkan output berupa wizard prompt.

           Sekian artikel ini saya buat untuk melengkapi Tugas Pemrgoraman Multimedia pada semester 8 ini, semoga artikel ini bermanfaat bagi yang membacanya. Apabila terdapat kesalahan dalam penulisan mohon di maafkan.