BAB IV
IMPLEMENTASI DAN PENGUJIAN
4.1 IMPLEMENTASI
Tahap berikutnya setelah melakukan analisis dan perancangan
terhadap aplikasi TouringApps adalah implementasi dan pengujian. Berikut
ini akan dijelaskan implementasi dari aplikasi TouringApps pada Telephone
Genggam dengan menggunakan Integrated Development environment (IDE)
Eclipse, dan Android SDK yang terdiri dari pengkodean, lingkungan
implementasi, dan antarmuka dari aplikasi TouringApps, serta hal-hal yang
berhubungan dengan pengujian aplikasi.
4.2 Kebutuhan Minimum Perangkat Keras/Perangkat Lunak untuk
Aplikasi Eclipse
4.2.1 Kebutuhan Minimum Perangkat Keras
Telephone Genggam android yang menggunakan sudah menggunakan
sistem operasi Android 2.2 Froyo. Karena pada saat perancangan aplikasi
sudah ditentukan bahwa aplikasi nya dirancang untuk sistem operasi android
froyo.
Pengujian aplikasi touringapps dilakukan pada dua buah ponsel dengan
spesifikasi yang berbeda, yaitu :
1.Telephone Genggam Samsung Galaxy Fit GT-S5670, prosesor 600
MHz, Memori: 160 MB internal.
2.Koneksi Internet
3.LAN networking (Wifi atau kabel)
Untuk PC/Laptop, minimum memori RAM yang digunakan adalah
1GB, apabila menggunakan memori yang rendah, maka proses kompilasi
source code aplikasi akan memakan waktu yang cukup lama.
4.2.2
Kebutuhan Minimum Perangkat Lunak
Untuk sampai pada tahap simulasi, perangkat lunak minimum yang
dibutuhkan adalah :
i. Sistem Operasi Windows XP-SP2 Professional Edition
ii. Eclipse Galileo
iii. Jdk-6u2-windows-i586-p
iv. Android-sdk_r06-windows
v. Browser
Untuk sampai pada tahap implementasi, perangkat lunak minimum
yang dibutuhkan adalah :
i. Sistem Operasi Windows XP-SP2 Professional Edition
ii. Eclipse Galileo
iii. Jdk-6u2-windows-i586-p
iv. Android-sdk_r06-windows
v. Browser
4.3 Pengkodean
TouringApps
Pada bab ini akan dijelaskan potongan-potongan dari kode sumber
(source code) aplikasi TouringApps. Tahap awal sebelum memulai membuat
kode untuk aplikasi ini adalah dengan membuat android project baru pada
eclipse yang diberi nama TouringApps
Gambar 4.1 Projek baru android
Keterangan gambar 4.1
Ini adalah tampilan form yang muncul pada eclipse ketika pertama kali
membuat projek android.
Langkah pertama adalah membuat tombol yang apabila di klik akan
mendapatkan lokasi.koordinat saat ini dari location provider. Berikut ini
adalah file main.xml dari tampilan awal aplikasi:
1. <?xml version="1.0" encoding="utf-8"?> 2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3. android:orientation="vertical" 4. android:layout_width="fill_parent" 5. android:layout_height="fill_parent" 6. >
7. //Menampilkan textbox untuk memasukan nama 8. <EditText android:id ="@+id/edittextName" 9. android:text="Input Name"
10. android:layout_width="wrap_content" 11. android:layout_height="wrap_content" 12. />
13. //Menampilkan tombol untuk mendapatkan lokasi koordinat saat ini 14. <Button 15. android:id="@+id/retrieve_location_button" 16. android:text="Retrieve Location" 17. android:layout_width="wrap_content" 18. android:layout_height="wrap_content" 19. /> 20. </LinearLayout>
Berikut ini adalah penampilannya ketika dijalankan pada emulator:
Gambar 4.2 Emulator Aplikasi TouringApps
Keterangan gambar 4.2
Ini adalah tampilan emulator dari aplikasi TouringApps yang sudah selesai.
Agar memiliki kemampuan untuk mendapatkan lokasi dari android API,
maka langkah pertama adalah mengambil referensi dari LocationManager
class, yang menyediakan akses kepada system lokasi services. Hal ini bisa di
lakukan menggunakan getSystemService di activity. Berikut dibawah ini
kode nya:
1. locationManager = (LocationManager) getSystemService(Context.LOCATION_SERVICE); 2. locationManager.requestLocationUpdates( 3. LocationManager.GPS_PROVIDER, 4. MINIMUM_TIME_BETWEEN_UPDATES, 5. MINIMUM_DISTANCE_CHANGE_FOR_UPDATES, 6. new MyLocationListener() 7. ); 8. retrieveLocationButton.setOnClickListener(new OnClickListener() { 9. @Override
10. public void onClick(View v) { 11. showCurrentLocation(); 12. }
13. }); 14. }
15. protected void showCurrentLocation() { 16. try {
17. Location location =
locationManager.getLastKnownLocation(LocationManager.GPS_PROVIDER); 18. if (location != null) {
19. String message = String.format(
20. "Current Location \n Longitude: %1$s \n Latitude: %2$s", 21. location.getLongitude(), location.getLatitude()
22. );
Kemudian, untuk mendapatkan update lokasi digunakan method
requstLocation Updates. Dalam method ini disediakan nama yang di inginkan
location provider (GPS), waktu minimum untuk interval notifikasi, dan jarak
minimum notifikasi dan yang terakhir adalah sebuah kelas yang meng
implementasi antar muka LocationListener. Antar muka ini mendeklarasi
methode untuk menjalankan perubahan lokasi dan juga perubahan status.
Berikut dibawah ini kode nya:
1. public class LbsGeocodingActivity extends Activity {
2. private static final long MINIMUM_DISTANCE_CHANGE_FOR_UPDATES = 1; // in Meters
3. private static final long MINIMUM_TIME_BETWEEN_UPDATES = 1000; // in Milliseconds
4. protected LocationManager locationManager; 5. protected Button retrieveLocationButton; 6. EditText name ;
7. @Override
8. public void onCreate(Bundle savedInstanceState) { 9. super.onCreate(savedInstanceState);
10. setContentView(R.layout.main);
11. name = (EditText)findViewById(R.id.edittextName);
12. retrieveLocationButton = (Button) findViewById(R.id.retrieve_location_button);
13. HttpClient httpclient = new DefaultHttpClient(); 14. HttpGet httpget = new
HttpGet("http://rafie166.tk/touringapps/isi_lokasi.php?latitude="+location.ge tLatitude()
15. +"&longitude="+location.getLongitude()+"&user="+name.getText()+""); 16. HttpResponse response = httpclient.execute(httpget);
17. HttpEntity entity = response.getEntity(); 18. byte buffer[] = new byte[1024] ; 19. InputStream is = entity.getContent() ; 20. int numBytes = is.read(buffer) ; 21. is.close();
22. //String entityContents = new String(buffer,0,numBytes) ; 23. Log.d("TouringApps","here"); 24. Toast.makeText(LbsGeocodingActivity.this, message, 25. Toast.LENGTH_LONG).show(); 26. } 27. } 28. catch (IOException e) {
29. Toast.makeText(LbsGeocodingActivity.this, "gagal get GPS Loc", 30. Toast.LENGTH_LONG).show();
31. } 32. }
33. private class MyLocationListener implements LocationListener { 34. public void onLocationChanged(Location location) {
35. /*
36. String message = String.format(
37. "New Location \n Longitude: %1$s \n Latitude: %2$s", 38. location.getLongitude(), location.getLatitude() 39. ); 40. Toast.makeText(LbsGeocodingActivity.this, message, Toast.LENGTH_LONG).show(); 41. */ 42. }
43. public void onStatusChanged(String s, int i, Bundle b) { 44. /*
45. Toast.makeText(LbsGeocodingActivity.this, "Provider status changed", 46. Toast.LENGTH_LONG).show();
47. */ 48. }
49. public void onProviderDisabled(String s) { 50. Toast.makeText(LbsGeocodingActivity.this, 51. "Provider disabled by the user. GPS turned off", 52. Toast.LENGTH_LONG).show();
53. }
54. public void onProviderEnabled(String s) { 55. Toast.makeText(LbsGeocodingActivity.this, 56. "Provider enabled by the user. GPS turned on", 57. Toast.LENGTH_LONG).show();
58. } 59. } 60. }
Selanjutnya adalah menggunakan AVD manager untuk membuat aplikasi
Android baru dan pastikan fitur GPS support sudah termasuk.
Gambar 4.3 AVD Android
Keterangan gambar 4.3
Ini adalah form untuk membuat android virtual device. Pada form ini
ditentukan targetnya adalah android 2.1 dengan API level 7. Size SD card nya
128 Mib dengan memakai skin default (WVGA800). Kemudian yang paling
penting adalah pada property hardware harus memakai GPS support.
Gambar 4.4 Emulator Aplikasi TouringApps
Keterangan gambar 4.4
Gambar 4.4 adalah emulator dari hasil setingan yang dilakukan pada android
virtual device.
4.4 Pengkodean ShowMap
Berikut ini adalah file main.xml dari tampilan awal aplikasi:
1. <?xml version="1.0" encoding="utf-8"?> 2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3. android:orientation="vertical" 4. android:layout_width="fill_parent" 5. android:layout_height="fill_parent" 6. >
Berikut ini kode untuk menampilkan map yang ada pada webserver:
1. package com.rafie.showmap; 2. import android.app.Activity; 3. import android.content.Intent; 4. import android.net.Uri; 5. import android.os.Bundle;
6. public class actShowMap extends Activity { 7. /** Called when the activity is first created. */ 8. @Override
9. public void onCreate(Bundle savedInstanceState) { 10. super.onCreate(savedInstanceState);
12. String url = "http://rafie166.tk/touringapps/phpsqlajax_map.htm"; 13. Intent i = new Intent(Intent.ACTION_VIEW);
14. i.setData(Uri.parse(url)); 15. startActivity(i); 16. }
17. }
Berikut ini coding manifest untuk ShowMap:
1. package com.rafie.showmap; 2. import android.app.Activity; 3. import android.content.Intent; 4. import android.net.Uri; 5. import android.os.Bundle;
6. public class actShowMap extends Activity { 7. /** Called when the activity is first created. */ 8. @Override
9. public void onCreate(Bundle savedInstanceState) { 10. super.onCreate(savedInstanceState);
11. setContentView(R.layout.main);
12. String url = "http://rafie166.tk/touringapps/phpsqlajax_map.htm"; 13. Intent i = new Intent(Intent.ACTION_VIEW);
14. i.setData(Uri.parse(url)); 15. startActivity(i); 16. }
17. }
18. Coding pada Webserver
18.1.1 Di webserver ada beberapa program menggunakan php:
19. Untuk mendapatkan lokasi dari android maka program yang digunakan adalah: 20. Isi_lokasi 21. <?php 22. include "koneksi.php"; 23. $latitude=$_GET["latitude"]; 24. $longitude=$_GET["longitude"]; 25. $name=$_GET["user"]; 26. echo 'test';
27. $delFirst="delete from marker where name='$name'"; 28. mysql_query($delFirst);
29. $perintah="INSERT INTO marker(latitude,longitude,name) VALUES ('$latitude','$longitude','$name')";
30. mysql_query($perintah);
Berikut ini program php untuk mengambil data dari basisdata
1. phpsqlajax_genxml3.php 2. <?php
3. require("phpsqlajax_dbinfo.php"); 4. // Start XML file, create parent node
5. $dom = new DOMDocument("1.0"); 6. $node = $dom->createElement("markers"); 7. $parnode = $dom->appendChild($node); 8. // Opens a connection to a MySQL server
9. $connection=mysql_connect (localhost, $username, $password); 10. if (!$connection) { die('Not connected : ' . mysql_error());} 11. // Set the active MySQL database
12. $db_selected = mysql_select_db($database, $connection); 13. if (!$db_selected) {
14. die ('Can\'t use db : ' . mysql_error()); 15. }
16. // Select all the rows in the markers table
17. $query = "SELECT * FROM marker WHERE 1"; 18. $result = mysql_query($query);
19. if (!$result) {
20. die('Invalid query: ' . mysql_error()); 21. }
22. header("Content-type: text/xml");
23. // Iterate through the rows, adding XML nodes for each 24. while ($row = @mysql_fetch_assoc($result)){ 25. // ADD TO XML DOCUMENT NODE 26. $node = $dom->createElement("marker"); 27. $newnode = $parnode->appendChild($node); 28. $newnode->setAttribute("name",$row['name']); 29. $newnode->setAttribute("lat", $row['latitude']); 30. $newnode->setAttribute("lng", $row['longitude']); 31. } 32. echo $dom->saveXML(); 33. ?>
Berikut ini program html untuk menampilkan map:
1. phpsqlajax_map.html
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml"> 4. <head>
5. <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 6. <title>Google Maps AJAX + mySQL/PHP Example</title>
7. <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAk9C3-K_GcH0btH8YNeVQABSbyuwkpEUAa4bcYeWRz4Rj7rERDBR0dP3Unj3 ZoN0VEJhP5zuoV2cUig" 8. type="text/javascript"></script> 9. <script type="text/javascript"> 10. //<![CDATA[
12. iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
13. iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
14. iconBlue.iconSize = new GSize(12, 20); 15. iconBlue.shadowSize = new GSize(22, 20); 16. iconBlue.iconAnchor = new GPoint(6, 20); 17. iconBlue.infoWindowAnchor = new GPoint(5, 1); 18. var iconRed = new GIcon();
19. iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
20. iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
21. iconRed.iconSize = new GSize(12, 20); 22. iconRed.shadowSize = new GSize(22, 20); 23. iconRed.iconAnchor = new GPoint(6, 20); 24. iconRed.infoWindowAnchor = new GPoint(5, 1); 25. var customIcons = [];
26. customIcons["restaurant"] = iconBlue; 27. customIcons["bar"] = iconRed; 28. function load() {
29. if (GBrowserIsCompatible()) {
30. var map = new GMap2(document.getElementById("map")); 31. map.addControl(new GSmallMapControl());
32. map.addControl(new GMapTypeControl());
33. map.setCenter(new GLatLng(-6.180833,106.848106), 11 ); 34. // Change this depending on the name of your PHP file 35. GDownloadUrl("phpsqlajax_genxml3.php", function(data) { 36. var xml = GXml.parse(data);
37. var markers = xml.documentElement.getElementsByTagName("marker"); 38. for (var i = 0; i < markers.length; i++) {
39. var name = markers[i].getAttribute("name"); 40. var address = markers[i].getAttribute("address"); 41. var type = markers[i].getAttribute("type");
42. var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), 42.1.1 parseFloat(markers[i].getAttribute("lng")));
43. var marker = createMarker(point, name, address, type); 44. map.addOverlay(marker);
45. } 46. }); 47. } 48. }
49. function createMarker(point, name, address, type) { 50. var marker = new GMarker(point, customIcons[type]); 51. var html = "<b>" + name + "</b> <br/>" + address; 52. GEvent.addListener(marker, 'click', function() { 53. marker.openInfoWindowHtml(html); 54. }); 55. return marker; 56. } 57. //]]> 58. </script> 59. </head>
61. <div id="map" style="width: 500px; height: 300px"></div> 62. </body>
63. </html>
