BAB III

RANCANGAN DAN IMPLEMENTASI

3.1 Gambaran Umum

Pada saat pertama kali program dijalankan akan ditampilkan aplikasi

dengan 2 buah menu dropdown dan sebuah tombol rincian biaya yang aktif.

Masing-masing menu dropdown berisi nama 33 ibukota provinsi di Indonesia.

pengguna memilih dua buah kota yang akan dihubungkan dengan menggunakan

menu dropdown. Setelah kota yang akan dihubungkan terseleksi maka tombol

“SAMBUNG/PUTUS” akan aktif dan pengguna dapat menyambungkan kedua

kota terseleksi tersebut dengan mengklik tombol tersebut.

Pengguna dapat menyambungkan beberapa kota sesuai dengan

kebutuhannya. Setiap kali pengguna menghubungkan titik kota maka aplikasi

akan menampilkan visualisasinya dengan munculnya garis penghubung pada peta.

Setelah menghubungan kota, pengguna memasukkan nilai biaya dengan

mengklik tombol biaya. Setelah tombol biaya ditekan akan muncul jendela yang

berisi daftar kota yang sebelumnya telah dihubungkan dan biaya dapat dirubah

pengguna melalui jendela ini. Setelah ada 2 kota yang tersambung maka menu

dropdown ketiga dan keempat yang masing-masingnya berfungsi untuk memilih

kota asal dan kota tujuan. Ketika kota asal dan kota tujuan sudah ditentukan maka

tombol “HITUNG” akan aktif dan saat tombol “HITUNG” diklik aplikasi akan

mencari jalur dengan biaya minimal dari kota asal ke kota tujuan kemudian

aplikasi menampilkan hasil berupa jalur minimal antara kota asal ke kota tujuan

beserta dengan biaya minimalnya.

14

15

3.2 Rancangan Diagram UML Program Aplikasi

3.2.1 Diagram Proses Bisnis (Use Case Diagram)

Dalam gambar diagram proses bisnis (use case diagram) di atas, aktor

(pengguna) memiliki 4 aksi yang dapat dilakukan dalam menjalankan aplikasi

yaitu memilih ibukota provinsi, kemudian menyambungkan ibukota provinsi yang

dipilihnya, memilih ibukota provinsi asal, dan memilih ibukota tujuan.

3.2.2 Diagram Kelas (Class Diagram)

Gambar 3.1: Use Case Diagram

Gambar 3.2: Class Diagram

16

Diagram kelas (class diagram) berisi kelas-kelas yang dibuat untuk

program aplikasi. Aplikasi melibatkan 4 kelas penting yaitu GlobalVars, Rute33,

CostPanel, dan ResultPanel. Rute33 merupakan kelas utama. Rute33

membutuhkan kelas lain yaitu CostPanel yang nantinya menciptakan obyek

sebagai tool untuk memasukkan nilai biaya dari pengguna dan obyek dari kelas

ResultPanel untuk menampilkan hasilnya. Sedangkan kelas GlobalVars berisi

deklarasi dan inisialisasi nilai variabel yang akan dipakai pada kelas Rute33.

3.2.3 Diagram Berangkai (Sequence Diagram)

Gambar diagram berangkai (sequence diagram) di atas menggambarkan

interaksi antar obyek pada aplikasi simulasi biaya minimal pada jalur transportasi

pengiriman barang. Pengguna memasukkan input pada obyek instance dari kelas

utama Rute33 dan nantinya dapat melihat output pada obyek instance kelas

ResultPanel melalui obyek instance Rute33.

Gambar 3.3: Sequence Diagram

17

3.3 Rancangan Tampilan Aplikasi

Rancangan tampilan aplikasi yang akan dibuat terlihat ada bagian input (di

atas) dan gambar background peta yang nantinya juga sebagai visualisasi. Bentuk

visualisasinya adalah 33 titik ibukota provinsi yang jika tersambung akan ada

penanda garis yang saling menghubungkan masing-masing titik tersebut.

Bagian input dirancang tampilannya berbentuk mendatar. Tidak semua

komponen input yang dibuat dapat berinteraksi dengan pengguna pada awal

berjalannya aplikasi sehingga memaksa pengguna untuk memasukkan input

melalui beberapa komponen saja dan secara garis besar akan membimbing input

pengguna dimulai dari sebelah kiri ke sebelah kanan. Alur input yang dirancang

seperti ini diharapkan mempermudah pengguna untuk mempelajari cara

pemakaiannya secara otodidak.

Dimulai dari rancangan tampilan aplikasi saat pertama kali dijalankan

yang ditunjukkan pada gambar di atas. Rancangan tersebut terdiri atas panel input

(sebelah atas berupa menu pulldown dan tombol) serta panel peta Indonesia.

Gambar 3.4: Tampilan Awal Aplikasi

18

Dari bentuk rancangan tersebut terlihat panel input berisi 4 menu pulldown

dan 3 tombol sebagai alat pengguna untuk berinteraksi yang disusun secara

mendatar. Panel tersebut struktur menunya adalah seperti di bawah ini.

Dimulai dari menu pulldown pertama (sebelah paling kiri) dan menu

pulldown kedua (setelah tombol SAMBUNG/PUTUS) berisi daftar 33 ibukota

Indonesia. Gambar di bawah adalah bentuk tampilan saat menu pulldown pertama

diklik.

Gambar 3.5: Struktur Menu Aplikasi

Gambar 3.6: Tampilan Aplikasi Pulldown Pertama Diklik

AmbonBanda Aceh

BatamBengkuluJakarta

M akassarPadang

RiauTanjung Pinang

Yogyakarta

19

Tampilan ketika salah satu kota dalam menu pulldown pertama telah

dipilih maka akan muncul titik yang terpilih pada peta. Menu pulldown yang

kedua (sebelah kanan tombol SAMBUNG/PUTUS) merupakan duplikat dari

menu pulldown pertama yang berisi 33 ibukota provinsi Indonesia.

Gambar 3.7: Tampilan Aplikasi Pulldown Pertama Terpilih

Gambar 3.8: Tampilan Aplikasi Pulldown Kedua Diklik

AmbonBanda Aceh

BatamBengkuluJakarta

M akassarPadang

RiauTanjung Pinang

Yogyakarta

20

Dan setelah menu pulldown kedua dipilih akan muncul titik kedua yang terpilih.

Setelah ada 2 kota yang terpilih melalui menu pulldown pertama dan kedua

kemudian pengguna dapat menyambungkannya dengan menggunakan tombol

SAMBUNG/PUTUS yang ada di antara kedua menu pulldown tersebut.

Gambar 3.9: Tampilan Aplikasi Pulldown Kedua Dipilih

Gambar 3.10: Tampilan Aplikasi Tombol SAMBUNGAN Diklik

21

Tombol selanjutnya adalah tombol BIAYA. Tombol ini akan menampilkan

daftar biaya yang berisi kota-kota yang sebelumnya disambungkan oleh pengguna.

Secara umum, bentuk detail daftar saat tombol BIAYA diklik seperti di bawah ini.

Daftar biaya tersebut berisi "Kota 1" dan "Kota 2" yang berasal dari menu

pulldown pertama dan kedua yang saling disambungkan oleh pengguna sedangkan

"Biaya" merupakan tempat input pengguna.

Gambar 3.11: Tampilan Aplikasi Tombol BIAYA Diklik

---------------daftar biaya

---------------

Gambar 3.12: Tampilan Panel Daftar Biaya

Kota 1 Kota 2 Biaya

Didapat dari menu pulldown kedua.

Didapat dari menu pulldown pertama. Tempat pengguna

memasukkan biaya secara manual.

22

Input pada daftar biaya berupa biaya perjalanan yang dikeluarkan saat

menempuh perjalanan antara kedua ibukota provinsi tersebut. Setelah

memasukkan biaya, selanjutnya yang harus dilakukan pengguna adalah memilih

kota asal dan tujuan melalui menu pulldown ketiga dan keempat. Jika menu

pulldown ketiga dan keempat telah terisi maka tombol HITUNG baru bisa

digunakan.

Saat tombol HITUNG diklik program akan mulai mencari jalur mana

sajakah yang dilalui dan menghasilkan total biaya yang minimal dan kemudian

ditampilkan pada aplikasi seperti gambar berikutnya.

Gambar 3.13: Tampilan Aplikasi Pulldown Ketiga dan Keempat (Kota Asal dan Kota Tujuan)

Menu pulldown ketiga (kota asal).

Menu pulldown keempat (kota tujuan).

23

Gambar 3.14: Tampilan Aplikasi Tombol HITUNG

Gambar 3.15: Tampilan Aplikasi Tombol HITUNG Diklik

-------------------tampilan hasil

-------------------

x

Gambar 3.16: Rancangan Tampilan Hasil.

Kota yang disarankan untuk mendapatkan biaya minimal adalah:<kota 1> → <kota 2> → … → <kota n>

x

9999999

JalurMinimal

BiayaMinimal

24

3.4 Cara Pembuatan

3.4.1 Pembuatan Tampilan Obyek PendukungAplikasi yang dibuat ingin diberi visualisasi latar belakang yang lebih baik

dengan cara membuat gambar vektor. Penulis menggunakan Inkscape sebagai alat

untuk membuat background.

Pertama penulis meng-import gambar peta Indonesia di Inkscape.

Gambar 3.17: Tool Inkscape Untuk Membuat Obyek Pendukung

Toolbox Dalam membuat gambar vektor, penulis menggunakan 2 tool yaitu Ellipse dan Draw Bezier. Draw Bezier digunakan untuk men-tracing gambar bitmap yang di-import sebelumnya. Sedangkan Ellipse digunakan untuk membuat obyek pendukung nantinya.

Draw Bezier

Ellipse

Rectangle

Gambar 3.18: Import Gambar Berbasis Bitmap di Inkscape

25

Kemudian gambar tersebut di-tracing sehingga hasilnya menjadi sedemikian rupa.

Dengan menggunakan Draw Bezier tepian garis gambar pulau Indonesia yang

ditebali hingga membentuk peta kembali dengan bentuk yang lebih baik.

Obyek pendukung lainnya yang digunakan dalam aplikasi ini adalah:

Untuk membuat gambar pendukung tersebut juga menggunakan bantuan tool

rectangel dan ellipse pada Inkscape.

Gambar 3.20: Obyek Pendukung

Gambar 3.19: Hasil Tracing Bitmap di Inkscape

26

3.4.2 Membuat Controller untuk Meng-input

Agar aplikasi dapat dipergunakan oleh pengguna maka dibutuhkan

pengontrol input seperti tombol, combobox, dll. Selanjutnya untuk pengaturan

tombol yang disable dan enable serta isi menu combobox dibantu dengan

pengaturan dari kode ActionScript yang ada di bagian lampiran.

Gambar 3.21: Elemen Obyek Input Flash CS4

Untuk membuat pengontrol pada aplikasi penulis men-drag and drop komponen input dari panel components yang dapat ditampilkan dengan menekan tombol Ctrl_F7 bersamaan.

Komponen pada panel ditarik dan langsung diletakkan pada screen layar kerja Flash.

27

Satu lagi komponen input yang tak kalah penting adalah panel biaya (cost

panel). Komponen input ini dibuat sendiri agar dapat dikostumisasi lebih leluasa

oleh penulis.Untuk membuat CostPanel digunakan list dari component panel Flash

yang digabungkan dengan 2 obyek shape.

Gambar 3.22: Obyek Input-Output

CostPanel (panel biaya) ini merupakan

alat input pengguna berupa nilai biaya terhadap

masing-masing hubungan antar ibukota

provinsi.

CostPanel dapat dimunculkan dengan

mengklik tombol “Rincian / Biaya” pada

aplikasi dan dapat diisi ketika sudah ada

minimal sebuah keterhubungan antar ibukota

provinsi.Tampilan CostPanel pada saat aplikasi dijalankan dapat dilihat pada gambar di bawah ini.

list

Obyek shape pendukung lainnya.

28

3.4.3 Pembuatan Tampilan Output Hasil

3.4.4 Pembuatan Help

Help dibuat terpisah dengan program utama agar lebih memudahkan

dalam pembuatannya. Help dibuat dengan menggunakan HTML dan

disambungkan dengan link pada program utama. Ketika pengguna mengklik link

help pada program utama maka akan terbuka jendela web browser dengan link

menuju file Help.html yang ada pada laman web

https://sites.google.com/site/brondongproject/brondong/rute33/help.

Gambar 3.23: Tampilan Hasil

Tampilan output dibuat langsung di Flash dengan menggunakan

Rectangle Tool dengan sedikit modifikasi yang hasilnya seperti

di bawah ini.

Hasil Output

29

Gambar 3.24: Tampilan Help

30

3.5 Uji CobaFile aplikasi yang telah jadi dalam bentuk siap eksekusi kemudian

diunggah ke penyedia layanan hosting https://sites.google.com dengan alamat

laman online https://sites.google.com/site/brondongproject/brondong/rute33 pada

tanggal 14 November 2010. Setelah mengunggah aplikasi, selanjutnya

mengunggah file Help.html sebagai laman yang nantinya akan diakses pemakai

jika membutuhkan bantuan dalam pengoperasian aplikasi. Laman kuisioner

kemudian dipersiapkan sebagai alat untuk menerima umpan balik (feedback) dari

responden nantinya. Laman kuisioner tersebut disisipkan di dalam laman aplikasi.

Uji coba dilakukan menggunakan jaringan internet menggunakan

komputer desktop dengan spesifikasi processor AMD Athlon X2, RAM 4 GB,

VGA nVidia GeForce 7200 GS. Selanjutnya diujicobakan kembali menggunakan

notebook berspesifikasi procesesor AMD Turion X2, RAM 1.5 GB, VGA nVidia

GeForce 9100 m G. Program mengalami beberapa kali pembaruan (update)

aplikasi saat uji coba online secara mandiri oleh penulis sebelum diujicobakan

kepada responden. Setelah dianggap cukup dengan tidak ditemukannya error

fungsional saat uji coba mandiri, uji coba online selanjutnya dilakukan oleh

responden.

Aplikasi diuji kualitasnya dengan 7 poin sebagai berikut:

1. completeness, tingkatan dimana implementasi lengkap dari fungsi yang

dibutuhkan telah tercapai yang dimaksudkan untuk mengetahui apakah

program aplikasi selalu dapat menemukan hasil jika kota asal dan

tujuan terhubung secara langsung maupun tidak langsung

2. accuracy, yaitu ketepatan perhitungan dan kontrol yang diujikan untuk

mengetahui apakah program aplikasi selalu dapat menemukan hasil

biaya yang benar-benar paling minimal

31

3. instrumentation, tingkatan di mana program memiliki operasi tersendiri

dan mengawasi kesalahan yang terjadi

4. operability, yaitu pengujian terhadap kemudahan pengoperasian

program dengan maksud mengetahui apakah program aplikasi mudah

dioperasikan oleh pemakai

5. error tolerance, kerusakan yang muncul ketika program menemukan

kegagalan misalnya apakah pernah terjadi crash, hang, atau tidak ada

respon saat program dijalankan

6. execution efficiency, merupakan pengujian pemakai terhadap

kemampuan program mendapatkan hasil dengan cepat atau lambat

7. self-documentation, apakah dokumentasi (menu Help) pada program

aplikasi dapat membantu pemakai dalam menggunakan program.

Uji coba yang dilakukan dengan 7 faktor di atas kepada responden

menghasilkan umpan balik (feedback) berupa 7 persentase dari 7 pertanyaan yang

masing-masing pertanyaan kuisioner mewakili satu faktor. Masing-masing faktor

uji coba yang dilakukan responden dinyatakan terpenuhi jika masing-masing

faktor memiliki lebih dari 60% responden memilih baik, cukup, dan semacamnya.

Dari hasil uji coba didapatkan:

1. memenuhi faktor completeness, artinya implementasi lengkap dari

fungsi yang dibutuhkan telah tercapai (86% responden) yaitu untuk

mencari jalur yang paling minimal biayanya dari beberapa jalur yang

tersedia

2. hasil output/keluaran program berupa jalur yang sebaiknya ditempuh

dan perhitungan biaya minimalnya yang akurat/accuracy (73%

responden)

32

3. pengoperasian/operability program cukup mudah untuk digunakan

(68% responden)

4. waktu eksekusi/execution efficiency program yang cepat (68%

responden)

5. dokumentasi yang disediakan dapat membantu pemakai dalam

penggunaan aplikasi simulasi biaya minimal pada jalur transportasi

pengiriman barang (36% sangat membantu & 50% cukup membantu).

3.6 Contoh Kasus

Untuk memahami tentang penggunaan aplikasi simulasi biaya minimal

pada jalur transportasi pengiriman barang dicontohkan apabila suatu barang

dikirimkan dari Banda Aceh ke Manokwari. Dalam perjalanannya terdapat pilihan

jalur yang dapat ditempuh yaitu menggunakan transportasi yang langsung

mengantarkan barang dari Banda Aceh ke Manokwari dan menggunakan

transportasi yang melalui beberapa kota terlebih dahulu sebelum sampai di

Manokwari. Di bawah ini adalah contoh jalur transportasi yang dapat ditempuh

untuk mengirimkan barang:

No. Kota 1 Kota 2 Biaya1 Kendari Banda Aceh 7002 Banjarmasin Banda Aceh 4003 Kupang Banda Aceh 7004 Kupang Manado 4005 Kendari Manado 2006 Banjarmasin Manokwari 7007 Manado Manokwari 1008 Kupang Manokwari 300

Table 3.1: Jalur Transportasi yang Dapat Ditempuh.

33

Jika divisualisasikan maka jalur pengiriman barang akan terlihat seperti

gambar di bawah ini:

Ketika tombol “Hitung” diklik maka perhitungan dan pencarian jalur

dilaksanakan. Untuk memperjelas langkah-langkah program dalam menemukan

hasil digunakan persamaan sebagai berikut:

Banda Aceh = a Banjarmasin = b

Kendari = c Kupang = d

Manado = e Manokwari = f

setiap kota yang memiliki keterhubungan dengan kota yang lainnya digambarkan

dalam bentuk bulatan titik dalam graf. Penggambaran graf jalur pengirimannya

seperti di bawah ini:

Gambar 3.25: Jalur Pengiriman

34

Dari graf tersebut (gambar 3.26) terlihat titik a (Banda Aceh) berwarna biru

menandakan bahwa titik tersebut adalah titik awal dan menjadi titik aktif pertama

(inialisasi). Titik berwarna biru menandakan titik tersebut belum pernah diproses.

Untuk biayanya digunakan skala 1:10.

Gambar 3.26: Graf Jalur Pengiriman

Gambar 3.27: Langkah 1

35

Langkah pertama yang dilakukan program adalah mengecek titik apa saja

yang terhubung dengan titik aktif saat ini (gambar 3.27). Titik yang terhubung

dengan titik a pada gambar 3.27 adalah titik b, c, dan d. Titik terhubung ini disebut

juga sebagai successor ditandai dengan warna merah. Di setiap successor b, c, d

dihitung biayanya masing-masing 40, 70, 70.

Langkah kedua adalah menentukan nilai biaya terkecil dari successor dan

menjadikan titik dengan biaya terkecil sebagai titik aktif saat ini. Titik successor

biaya terkecil ada pada titik b. Titik yang telah diproses dan sudah pernah menjadi

titik aktif diberi tanda dengan warna kuning. Titik kuning tidak boleh

dibandingkan kembali biayanya.

Titik aktif saat ini (titik b) dicari successor-nya kemudian dihitung biaya

successor dari titik aktif saat ini (titik b).

Successor dari titik b adalah titik f dengan biaya 110. Saat ini seluruhnya

didapatkan 3 titik successor yaitu titik c, d, dan f. Biaya dari ketiga successor

Gambar 3.28: Langkah 2

36

tersebut saling dibandingkan. Successor dengan nilai terkecil dijadikan titik aktif

berikutnya. Apabila biaya minimal dimiliki oleh lebih dari satu titik successor

maka titik manapun dari successor tersebut boleh dipilih secara acak oleh

program.

Ada 2 titik dari 3 titik successor yang memiliki nilai minimal yaitu titik c dan d.

Titik aktif berikutnya yang dipilih program adalah titik c. Setelah memilih titik c,

titik successor dan biaya sucessor-nya ditemukan masing-masing titik e dan 90.

Saat ini successor adalah titik d, e, dan f.

Sama seperti langkah-langkah sebelumnya, titik successor saat ini saling

dibandingkan biayanya dan didapatkan titik d sebagai successor dengan biaya

terkecil.

Gambar 3.29: Langkah 3

37

Titik d memiliki 2 successor yaitu titik e dan f. Kedua titik successor ini sudah

menjadi successor sebelumnya. Biaya successor titik e sebelumnya akan dirubah

jika biaya titik e dari titik d nilainya lebih murah. Sebelumnya, nilai successor

titik e dari titik c adalah 90 dan nilai successor titik e dari titik d adalah 110. Jadi

nilai titik c tidak dirubah tetap diambil dari biaya titik e dari titik c yang lebih

murah. Sedangkan biaya successor titik f dari titik b yang sebelumnya adalah 110

dirubah dengan biaya successor titik f dari titik d yang lebih murah yaitu 100. Saat

ini seluruhnya tersisa 2 titik successor yaitu titik e dan f.

Titik e memiliki biaya yang paling murah sehingga dijadikan sebagai titik

aktif saat ini. Titik e memiliki successor yaitu titik f dengan biaya dari titik e

sebesar 100. Titik f sebagai successor dari titik e memiliki biaya yang sama

dengan titik f sebagai successor dari titik d yaitu 100. Titik f sebagai successor

dari titik e maupun titik d ini tidak menjadi masalah. Program memilih titik f

sebagai successor dari titik e menjadi titik aktif. Titik f menjadi titik aktif adalah

titik tujuan maka pencarian titik successor dihentikan.

Gambar 3.30: Langkah 4

38

Setelah titik tujuan ditemukan, urutan jalur dan hasil biaya yang dilalui

kemudian ditampilkan pada window baru hasil perhitungannya seperti gambar di

bawah dengan hasil jalur yang dilalui adalah Banda Aceh → Kendari → Manado

→ Manokwari dan biaya untuk melalui keempat kota tersebut sebesar 1000.

Gambar 3.31: Program Aplikasi dengan Hasil