BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM. 4.1 Implementasi Sistem Implementasi bisa diartikan sebagai pelaksanaan atau penerapan atau bisa

BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM

4.1

Implementasi Sistem Implementasi bisa diartikan sebagai pelaksanaan atau penerapan atau bisa

disebut juga sebagai proses untuk melakukan interaksi, Maka dalam melakukan implementasi diperlukan tempat atau lingkungan yang bisa digunakan untuk melakukan implementasi perangkat lunak yang di bangun. Untuk itu, kita bisa melihatnya pada keterangan berikut ini. 4.1.1

Perangkat keras (Hardware) Penelitian ini di implementasikan menggunakan perangkat keras sebagai

alat bantu untuk menjalankan sistem dengan spesifikasi sebagai berikut : 1. Seperangat CPU (Motherboard, Harddisk, Memory dan Processor) 2. Monitor 3. Keyboard 4. Mouse 5. Koneksi internet

4.1.2

Perangkat lunak (Software) Implementasi yang dijalankan menggunkan software atau perangkat lunak

dengan spesifikasi sebagai berikut : 1. Sistem Operasi

: Windows XP Professional SP3

2. Web Server

: Apache Server 2.2.12

3. Database Sever

: MySQL client version: 5.1.37

4. Web Browser

: Mozilla Firefox version 12

5. Code Editor

: Notepad++,Macromedia® Dreamweaver® 8

77

4.1.3

Kebutuhan Pengguna (Brainware) Perangkat yang dapat menjalankan system ini dibagi menjadi 2 yaitu:

a. Admin Admin adalah pengguna yang mempunyai akses penuh atas sistem ini yang dapat melakukan update data dan manajemen data. b. User User adalah siapa saja yang mengakses tanpa login terlebih dahulu, dan aksesnya terbatas. 4.2

Implementasi Antar Muka Sistem

Setelah semua komponen komputer yang mendukung proses aplikasi terinstall, proses selanjutnya adalah penjelasan program. Penjelasan program merupakan petunjuk yang dapat digunakan dalam menjalankan suatu program. Pada Tugas Akhir ini akan dijelaskan mengenai penggunaan program yang ada, antara lain menu rute, menu angkot , dan menu panduan. 4.2.1

Menu Rute Menu rute merupakan tampilan awal pada program aplikasi ini, yang

dimana dalam menu rute ini terdapat tiga fasilitas yang dapat digunakan oleh user. Fasilitas tersebut diantaranya: 1.

Pilihan Tempat Asal dan Tujuan. Pada fasilitas ini user dapat memilih tempat asal dan tujuan,

kemudian dengan menekan tombol submit user akan memdapatkan rute terpendek dari simulasi peta yang ada di bawahnya. Untuk lebih jelasnya bisa di lihat pada Gambar 4.1.

78

Gambar 4.1 Pilihan tempat asal dan tempat tujuan Untuk membuat tampilan select form tersebut, berikut ini Gambar 4.2 dari code program tampilan tersebut. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

style="float: left; margin: 0px

Start <select id ="start" name="start">

Finish <select id="finish" name="finish" label="finish">

Get Route

Gambar 4.2 Code program Select form Pada gambar diatas merupakan potongan script program yang menampilkan fungsi select form dan fungsi distance pada aplikasi ini. Pada baris ke-9 dan baris ke-15 terdapat fungsi select id yang dimana fungsi tersebut nantinya akan memanggil data node yang telah diinputkan terlebih dahulu. Sehingga node yang telah ada dalam database akan ditampilkan dalam select form yang ada dalam aplikasi tersebut.

79

Sedangkan pada baris ke-21 terdapat id distance yang nantinya akan memanggil fungsi distance sehingga setelah kita memilih tempat pada select form dan kemudian dilanjutkan dengan menekan tombol submit, maka akan dihasilkan simulasi rute, deskripsi perjalanan dan jarak tempuh yang dilakukan. 2. Peta Google Map API Peta Google Map API merupakan element terpenting dalam pembangunan aplikasi ini. Karena aplikasi ini bertujuan untuk memberikan informasi mengenai rute terpendek sebuah jalan yang sengaja disajikan dengan menampilkan simulasi peta pada Google Map API. Sehingga perancangan antar muka pada aplikasi ini lebih menarik dan memiliki sisi dinamis. Untuk lebih jelas mengenai pemetaan menggunakan Google Map API bisa dilihat pada Gambar 4.3.

Gambar 4.3 Peta google map API

80

Dalam peta tersebut user akan mendapatkan sebuah simulasi rute terpendek jalan yang dilalui. Supaya lebih memahami tentang konsep peta Google Map API tersebut, berikut di bawah ini code program sebuah fungsi dari hasil pemetaan tersebut. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function initialize() { var myOptions = { zoom: 15, center: centerVertex, mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, streetViewControl: false, mapTypeControl: false }; map = new google.maps.Map(document.getElementById("mapPane"), myOptions); }

Gambar 4.4 Code program peta Google Map API Untuk script menampilan peta Google Map API kita dapat memanggil fungsi initialize tersebut. Pada baris ke-3 sampai ke-11 dalam script tersebut kita dapat memilih jenis peta, mengatur posisi peta, perbesaran peta serta ukuran peta yang akan ditampilkan dalam apalikasi taersebut. 3. Tombol Presentasi Selain fasilitas di atas, aplikasi ini juga mempunya fasilitas pendukung berupa tombol presentasi. Supaya lebih jelas dalam memahami pencarian rute terpendek tersebut. Khususnya pemahaman yang berkaitan dengan graf, karena pada dasarnya teknik pencarian dengan menggunakan algoritma dijkstra di bangun dari sebuah kumpulan simpul (node) dan

81

dihubungkan dengan sebuah path (edge). Maka, untuk lebih jelasnya bisa di lihat pada Gambar 4.5.

Gambar 4.5 Presentasi peta Google Map API Pada gambar di atas terdapat beberapa tombol presentasi yang berguna untuk menampilkan node dan path yang berguna untuk melakukan proses pencarian pada algoritma dijkstra. Selain itu, pada 82

gambar pemetaan diatas terdapat kumpulan bintang dan garis berwarna merah yang saling berikatan membentuk sebuah jalur yang nantinya akan berguna sebagai arah pencarian rute jalan terpendek dari algoritma tersebut. Maka untuk lebih jelas dalam memahami node dan path tersebut, berikut dibawah ini disajikan code program untuk fungsi tombol presentasi tersebut. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

var matrix = new Array(); var pathArray = new Array(); var lineArray = new Array(); // Show Nodes // -------------------------------------// Adds a marker to the map for each node in the vertex array function showNodes() { try { //Skip 0, since it's a dummy node. for (var b = 1; b < vertArray.length-1; b++) { nodeMarkerArray.push( new google.maps.Marker({ position: vertArray[b], map: map, icon: "nodes.png", title: b.toString() })); } } catch (error) { document.getElementById('errors').innerHTML+=error; } } // Hide nodes // -------------------------------------// Removes the node markers from the map. function hideNodes() { //loop through vertexes. Setting the map to null will clear the node. for (var c = 0; c < nodeMarkerArray.length; c++) { if (nodeMarkerArray[c] == undefined) printMsg("errors","NMA at " + c + " is undefined."); else nodeMarkerArray[c].setMap(null); } } // Print Message // ------------// A function for simple error output. function printMsg(id, msg) { document.getElementById(id).innerHTML+="

" + msg + "

"; } // Add adjacencies to matrix // ------------------------var tempArray; function addAdjsToMatrix() {

83

53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110

matrix = new Array(); for (var d = 0; d < numNodes; d++) { tempArray = new Array(); for (var e = 0; e < adjArray[d].length; e++) { tempArray[adjArray[d][e]] = 1; } matrix.push(tempArray); } printMsg("errors","Finished adding adjs to matrix."); printMsg("errors","Matrix[3][4] = " + matrix[3][4]); printMsg("errors","Matrix[53][54] = " + matrix[53][54]); printMsg("errors","Matrix[10][300] = " + matrix[10][300]); } //Add paths to map function showPaths() { pathArray = new Array(); for (var f = 0; f < numNodes; f++) { for (var g = 0; g < f; g++) { if (matrix[f][g] == 1) { pathArray.push( new Array(vertArray[f],vertArray[g])); } } } for (var h = 0; h < pathArray.length; h++) { lineArray.push( new google.maps.Polyline( { map: map, path:pathArray[h], strokeColor:"#FF0000", strokeWeight:2, strokeOpacity:1 })); } } //clear paths from the map function hidePaths() { for (var k = 0; k < lineArray.length; k++) { lineArray[k].setMap(null); } }

Gambar 4.6 Code program tombol presentasi Pada script tombol presentasi diatas terdiri dari beberapa bagian yang memiliki sebuah fungsi. Bagian pertama pada baris ke-8 sampai baris ke-24 merupakan fungsi show nodes yang berfungsi untuk menampilkan 84

node yang akan ditampilkan pada peta. Fungsi tersebut akan memanggil data koordinat lat-long yang ada pada database kemudian akan ditampilkan dalam peta berupa bintang. Bintang tersebut merupakan gambar bertipe PNG yang akan dipanggil oleh fungsi tersebut. Bagian kedua merupakan fungsi hide nodes yang terdapat pada baris ke-29 sampai baris ke-38 yang berfungsi menyembunyikan nodes ketika sudah ditampilkan. Kemudian pada bagian ketiga merupakan fungsi tambahkan adjoin matriks yang terdapat pada baris ke-51 sampai baris ke-72. Fungsi tersebut akan memanggil variable adjarray yang ada pada data.js kemudian setelah ditambahkan fungsi ini, maka fungsi show path akan bisa ditampilkan pada peta. Yang selanjutnya pada bagian keempat dan kelima merupakan fungsi show path dan fungsi hide path yang terdapat pada baris ke-75 sampai baris ke-110. Setelah ditambahkan fungsi adjoin matriks maka fungsi show path ini dapat ditampilkan dalam peta. Tampilan show path pada peta berupa garis merah yang menghubungkan semua nodes yang ada dalam peta tersebut. Kemudin pada fungsi hide path merupakan fungsi untuk menyembunyikan path yang telah di tampilkan. 4.2.2

Menu Angkot Dalam menu rute angkot terdapat fasilitas yang berfungsi untuk

menampilkan rute dari setiap Angkutan Kota dan Damri yang ada di Kota Bandung ini. Untuk lebih jelas, kita bisa melihatnya pada Gambar 4.7.

85

Gambar 4.7 Peta rute Angkutan Kota dan Damri Pada gambar tampilan menu angkot diatas terdapat simulasi peta Google Map API dan sebuah tabel yang menjelaskan tentang rute perjalanan setiap Angkutan Kota dan Damri. Di dalam tabel tersebut terdapat 2 tombol submit yang berfungsi untuk menampilakan rute dari setiap jurusan dan juga menyembunyikan rute tersebut. 4.2.3

Desain Tampilan CSS (Cascading Style Sheet) Di dalam sebuah sistem perancangan antar muka, CSS mempunyai

peranan penting dalam pembuatan sebuah design aplikasi yang berbasis web. Karena CSS mempunyai sifat yang dinamis dan dapat dengan mudah membantu para developer web dalam membuat sebuah design web yang menarik.

86

Dalam membuat sebuah CSS kita hanya perlu mendefinisikan sebuah method – method tertentu, dan memanggilnya ke dalam sebuah fungsi sehingga CSS dapat dengan mudah ditampilkan. Untuk itu, dalam pembuatan aplikasi ini kita akan sedikit membuka gambaran tentang design CSS yang diterapkan dalam aplikasi ini. Berikut dibawah ini sebuah tampilan antara muka yang telah dilengkapi dengan fiture CSS di dalamnya.

Gambar 4.8 Tampilan aplikasi yang telah menggunakan CSS

87

4.3

Implementasi Algoritma Dijkstra pada Sistem Pada bab sebelumnya telah dibahas sebuah pseudocode algoritma dijkstra

yang merupakan inti dari penelitian ini. Pseudocode tersebut nantinya akan menjadi sebuah acuan dalam pengimplementasi algoritma dijkstra ke dalam sebuah script. Sehingga dari situlah script yang dijalankan bisa menghasilkan sebuah pencarian rute terpendek sebuah jalan. Elemen terpenting dalam pembuatan aplikasi pencarian rute terpendek ini adalah adanya panerapan algoritma dijktra di dalamnya, sehingga aplikasi tersebut dapat digunakan untuk pencarian rute terpendek sebuah perjalanan. Untuk itu, berikut dibawah ini Gambar 4.11 salah satu contoh hasil simulasi dari pemetaan Google Map API yang telah menerapkan proses algoritma dijkstra di dalamnya.

Gambar 4.9 Peta simulasi yang telah mendapatkan rute terpendek

88

Supaya lebih memahami tentang penerapan algoritma dijkstra ke dalam sebuah code program, berikut di bawah ini code program yang telah dilengkapi dengan penerapan algoritma dijkstra di dalamnya. 1 2 3 4 5 7 8 9 10 11 12 13 14 15 15 17 18 19 20 21 22 23

function dijkstra(fArr) { var u; var foundFinish = false while (moreToVisit() && !foundFinish) { u = extractMin(); if (visit[u]==1) throw("revisiting a node! Node = " + u); if (u == 0) break; visit[u] = 1; var uAdjArr = adjArray[u]; for (v = 0; v < uAdjArr.length; v++) { relax(u,uAdjArr[v]); } if (fArr.indexOf(u) != -1) { hitFinishIndex = u; foundFinish = true; break; } } }

Gambar 4.10 Code program fungsi dijkstra Script diatas adalah fungsi dijkstra yang merupakan penyusun utama dari algoritma dijkstra tersebut. Fungsi tersebut terdiri dari dua variable yaitu variable u dan variable foundfinish yang bernilai false. Variable u merupakan sebuah kunci dari arah yang akan dituju. Sedangkan variable foundfinish merupakan titik sebuah arah yang dituju dan apabila telah ditemukan maka pencarian tersebut akan dihentikan. Setelah mendeskripsikan masing-masing variable, kemudian pada baris ke-4 sampai baris ke-22 terdapat sebuah perulangan yang berfungsi untuk membandingkan jarak terkecil diantara simpul yang akan dituju hingga ditemukannya titik tempat tujuan. Perulangan tersebut akan terus bekerja hingga titik tempat tujuan tersebut ditemukan. Setelah titik tersebut ditemukan, maka variable foundfinish akan bernilai true dan variable u akan ditetapkan menjadi titik yang dituju. 89

1 2 3 4 5 7 8 9 10 11 12 13 14 15 15 17 18 19 20 21 22

function getPathArray(start,finish) { pathArr = new Array(); pathArr.push(hitFinishIndex); var currIndex = hitFinishIndex; pathArr.push(currIndex); while (pi[currIndex] != -1) { currIndex = pi[currIndex]; pathArr.push(currIndex); } orderArr = new Array(pathArr.length); for (i = 0; i<pathArr.length; i++) { orderArr[pathArr.length-1-i] = pathArr[i]; } var hold; var retArr = new Array(orderArr.length); for (j = 0; j
Gambar 4.11 Code program fungsi getPathArray Setelah kita menemukan titik yang dituju pada fungsi dijkstra diatas, selanjutnya pada Gambar 4.11 terdapat fungsi getPathArray yang akan mencetak lintasan dari titik awal hingga titik tujuan. Pada fungsi tersebut terdapat variable currIndex sebagai arah yang menjadi tempat tujuan. Kemudian pada baris ke-7 sampai baris ke-10 terdapat perulangan yang berfungsi sebagai arah lintasan yang akan menjadi titik tujuan. Pada baris ke-11 sampai baris ke-14 menghasilkan sebuah pathArray yang masih harus dibalikan ke arah titik yang menjadi tempat tujuan. Setelah membalikan pathArray, maka akan terbentuklah sebuah lintasan yang dihasilkan dari titik asal menuju titik tujuan. Sehingga terciptaan lintasan yang dihasilkan dari algoritma dijkstra yang bisa dilihat pada sismulasi Gambar 4.9 diatas.

90

4.4

Pengujian Sistem Pengujian perangkat lunak ini menggunakan metode pengujian black box,

yaitu pengujian hanya dilakukan pada fungsi-fungsi dan modul-modul inti dengan melihat apakah fungsi atau modul sudah berjalan atau belum. Dalam melakukan pengujian perangkat lunak tersebut, tentu saja ada objek yang harus diuji dimana setelah itu akan didapat hasil dari pengujian tersebut. Pengujian yang kami lakukan terhadap perangkat lunak tersebut diantaranya adalah sebagai berikut: Tabel 4.1 Tabel pengujian perangkat lunak No. Deskripsi Uji 1. Menjalankan aplikasi koneksi internet

tanpa

Hasil Gagal

Keterangan Peta Google Map Api tidak terlihat

2.

Menjalankan aplikasi dengan koneksi internet

Berhasil

Peta Google terlihat

3.

Memilih tempat tujuan yang sama

dan

Berhasil

Peta simulasi hanya menunjukan titik dimana tempat awal dan tempat tujun yang di pilih.

4.

Memilih tempat awal dan tempat tujuan yang berbeda

Berhasil

Peta simulasi menujukan rute perjalanan terpendek sesuai tempat awal dan tempat tujuan yang di pilih.

5.

Memilih tempat awal dan tempat tujuan yang berbeda, kemudian di lakukan percobaan lagi tetapi tempat awal dan tempat tujuannya di balik.

Berhasil

Peta simulasi menunjukan rute yang sama pada percobaan yang pertama maupun yang kedua

6.

Menekan tombol show node Berhasil dan hide

Pada peta terdapat bintang dan bisa di sembunyikan

7.

Menekan tombol show paths sebelum menekan tombol tambahkan matriks

Untuk menampilkan simulasi path pada peta harus terlebih dahulu menekan tambahkan matriks

awal

Gagal

91

92