77
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
78
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.
79
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 <!-- input form
2 --- --> 3
4 <form name="form" action="" method="get" style="float: left; margin: 0px 5 300px;">
6
7 <label for="start"><img src="marker_green.png" height=17 width=10 /> 8 Start</label>
9 <select id ="start" name="start"> 10 </select>
11
12 <br/><br/>
13 <label for="finish"><img src="marker_red.png" height=17 width=10 /> 14 Finish</label>
15 <select id="finish" name="finish" label="finish"> 16 </select>
17
18 <br/><br/>
19 <button onclick="getRoute(); return false;">Get Route</button> 20
21 <p id="distance"></p>
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.
80 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.
81 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 function initialize() { 2 3 var myOptions = 4 { 5 zoom: 15, 6 center: centerVertex, 7 mapTypeId: google.maps.MapTypeId.ROADMAP,
8 zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL },
9 streetViewControl: false,
10 mapTypeControl: false
11 };
12
13 map = new google.maps.Map(document.getElementById("mapPane"),
14 myOptions);
15 }
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
82 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
83 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 var matrix = new Array();
2 var pathArray = new Array();
3 var lineArray = new Array();
4
5 // Show Nodes
6 // ---
7 // Adds a marker to the map for each node in the vertex array
8 function showNodes()
9 {
10 try
11 {
12 //Skip 0, since it's a dummy node.
13 for (var b = 1; b < vertArray.length-1; b++)
14 {
15 nodeMarkerArray.push( new google.maps.Marker({
16 position: vertArray[b], 17 map: map, 18 icon: "nodes.png", 19 title: b.toString() 20 })); 21 } 22 }
23 catch (error) { document.getElementById('errors').innerHTML+=error; }
24 }
25
26 // Hide nodes
27 // ---
28 // Removes the node markers from the map.
29 function hideNodes()
30 {
31 //loop through vertexes. Setting the map to null will clear the node. 32 for (var c = 0; c < nodeMarkerArray.length; c++)
33 {
34 if (nodeMarkerArray[c] == undefined) printMsg("errors","NMA at " +
35 c + " is undefined."); 36 else nodeMarkerArray[c].setMap(null); 37 } 38 } 39 40 // Print Message 41 // ---
42 // A function for simple error output.
43 function printMsg(id, msg) {
44 document.getElementById(id).innerHTML+="<p>" + msg + "</p>";
45 }
46
47 // Add adjacencies to matrix
48 // ---
49 var tempArray;
50
51 function addAdjsToMatrix()
84
53 matrix = new Array();
54
55 for (var d = 0; d < numNodes; d++)
56 {
57 tempArray = new Array();
58
59 for (var e = 0; e < adjArray[d].length; e++)
60 { 61 tempArray[adjArray[d][e]] = 1; 62 } 63 64 matrix.push(tempArray); 65 66 } 67
68 printMsg("errors","Finished adding adjs to matrix."); 69 printMsg("errors","Matrix[3][4] = " + matrix[3][4]); 70 printMsg("errors","Matrix[53][54] = " + matrix[53][54]); 71 printMsg("errors","Matrix[10][300] = " + matrix[10][300]);
72 }
73
74 //Add paths to map
75 function showPaths()
76 {
77 pathArray = new Array();
78
79 for (var f = 0; f < numNodes; f++)
80 {
81 for (var g = 0; g < f; g++)
82 {
83 if (matrix[f][g] == 1)
84 {
85 pathArray.push( new Array(vertArray[f],vertArray[g]));
86 }
87 }
88 }
89
90 for (var h = 0; h < pathArray.length; h++)
91 {
92 lineArray.push( new google.maps.Polyline(
93 { 94 map: map, 95 path:pathArray[h], 96 strokeColor:"#FF0000", 97 strokeWeight:2, 98 strokeOpacity:1 99 })); 100 } 101 } 102
103 //clear paths from the map
104 function hidePaths()
105 {
106 for (var k = 0; k < lineArray.length; k++)
107 {
108 lineArray[k].setMap(null);
109 }
110 }
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
85 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.
86
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.
87 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.
88
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.
89 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 function dijkstra(fArr) {
2 var u;
3 var foundFinish = false
4 while (moreToVisit() && !foundFinish)
5 {
7 u = extractMin();
8 if (visit[u]==1) throw("revisiting a node! Node = " + u);
9 if (u == 0) break;
10 visit[u] = 1;
11 var uAdjArr = adjArray[u];
12 for (v = 0; v < uAdjArr.length; v++) 13 { 14 relax(u,uAdjArr[v]); 15 } 15 if (fArr.indexOf(u) != -1) 17 { 18 hitFinishIndex = u; 19 foundFinish = true; 20 break; 21 } 22 } 23 }
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.
90
1 function getPathArray(start,finish) {
2 pathArr = new Array();
3 pathArr.push(hitFinishIndex);
4 var currIndex = hitFinishIndex;
5 pathArr.push(currIndex);
7 while (pi[currIndex] != -1) {
8 currIndex = pi[currIndex];
9 pathArr.push(currIndex);
10 }
11 orderArr = new Array(pathArr.length);
12 for (i = 0; i<pathArr.length; i++) {
13 orderArr[pathArr.length-1-i] = pathArr[i];
14 }
15 var hold;
15 var retArr = new Array(orderArr.length); 17 for (j = 0; j<orderArr.length; j++) { 18 hold = orderArr[j]; 19 retArr[j] = getVertex(hold); 20 } 21 return retArr; 22 }
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
91
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 Hasil Keterangan
1. Menjalankan aplikasi tanpa koneksi internet
Gagal Peta Google Map Api tidak terlihat
2. Menjalankan aplikasi dengan koneksi internet
Berhasil Peta Google terlihat
3. Memilih tempat awal dan tujuan yang sama
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 dan hide
Berhasil Pada peta terdapat bintang dan bisa di sembunyikan 7. Menekan tombol show paths
sebelum menekan tombol tambahkan matriks
Gagal Untuk menampilkan simulasi path pada peta harus terlebih dahulu menekan tambahkan matriks
