BAB 3 PERANCANGAN SISTEM 1. Perancangan sistem
Gambar 1. Ilustrasi Garis Besar Perancangan Sistem. Sistem ini secara umum terdiri dari 3 bagian utama, yaitu bagian pengirim lokasi, server, dan pelacak. Bagian pengirim lokasi merupakan bagian di mana device mengambil kordinat dari satelit GPS dan mengirimkan kordinat ke server. Pada bagian server, data yang diterima dari pengirim akan ditampung di tabel database MySQL. Kemudian pada bagian penerima, data kordinat diambil dari server untuk ditampilkan pada Google Maps. Berikut ini adalah blok diagram untuk sistem ini:
Gambar 2. Blok Diagram Umum Perancangan Sistem.
1.1.
Perancangan pengirim lokasi
1.1.1. Diagram alur
Gambar 3. Diagram Alur MainActivity Flow chart MainActivity ini merupakan flow chart yang menjelaskan program utama pada aplikasi android pengirim. Alur kerja dari flow chart ini pertama-tama aplikasi akan membuka layout yang berisikan dua buah pilihan yaitu “update position” dan “update location data every s” yang memerlukan respon dari user untuk melakukan fungsinya, kemudian setelah menerima respon dari user maka aplikasi akan merespon sesuai pilihan user dan akan memanggil class yang sudah dihubungkan. Class UpdatePosition.java adalah program yang dipakai saat melakukan percobaan-percobaan awal
dimana fungsinya mengupdate table pada database
dengan memasukkan data secara manual untuk mencari tahu apakah data yang dikirim dari android sudah diterima oleh database server. Selanjutnya class ShowPosition akan dijelaskan pada flow chart berikutnya.
Gambar 4. Diagram Alur ShowPosition ShowPosition.java merupakan program yang secara otomatis melakukan pengiriman data setiap detik dan memiliki fitur dapat melogging data setiap overflow (5s, 3s, dan 1s). Alur kerja dari flow chart ini awalnya program ini akan menampilkan layout yang isinya data koordinat yaitu latitude dan longitude serta dua buah button “start” dan “stop”. Kemudian program akan mulai menjalankan “timer update database” yang akan mengirimkan data koordinat setiap detiknya jika data koordinat itu telah tersedia. Selanjutnya program mengaktifkan “service gps” yang ada pada mobile device untuk memulai request latitude dan longitude dari satellite terdekat. Setelah mendapatkan data koordinat maka akan ditampilkan pada layout latitude dan longitude. Program akan terus mengirimkan data koordinat sambil menunggu respon dari user untuk menekan button “start”. Jika button “start” ditekan maka program akan melanjutkan aplikasi dengan mengaktifkan timer “timeupdatelog” yang memiliki tugas untuk memulai logging data setiap overflow dan membuat button “stop” dapat bisa ditekan oleh user karena pada kondisi awal button “stop” belum bisa ditekan, button “start” akan disable/tidak dapat ditekan. Program akan terus melogging data sampai button “stop” ditekan, jika button “stop” ditekan program akan mematikan timer “timeupdatelog” dan button “start” dapat kembali enable/ dapat ditekan, tombol “stop” akan disable/ tidak dapat ditekan.
1.1.2. Perancangan tampilan
Gambar 5. Perancangan Tampilan MainActivity Pada MainActivity terdapat 2 pilihan, Update Position dan Update Location Data Every S. Update Position mengirimkan kordinat ke server namun hanya 1 kali. Update Location Data Every S adalah untuk mengirimkan kordinat ke server setiap 1 detik dan melakukan logging data setiap 1 detik.
Gambar 6. Perancagan Tampilan ShowPosition Pada menu “Update Location Data Every S”, jika device telah menerima sinyal GPS, maka Longitude dan Latitude akan ditampilkan ke user. Tombol “Start” untuk mengirimkan data ke server dan “Stop” untuk berhenti. 1.2.
Perancangan database pada server
1.2.1. Perancangan tabel ‘position’
No. 1. 2. 3.
Nama field Tipe data Latitude double Longitude double Waktu direkam datettime Tabel 1. Perancangan tabel position.
Tabel 2 menunjukkan perancangan tabel ‘position’ pada database. Pada tabel tersebut terdapat 3 buah atribut yang digunakan, yaitu Latitude dan Longitude yang digunakan untuk
merekam kordinat, dan Waktu yang direkam yang menunjukkan waktu saat posisi direkam. Waktu rekam menggunakan format YYYY-MM-DD hh:mm:ss. Field “Latitude” dan “Longitude” menggunakan tipe double, sedangkan “waktu direkam” menggunakan tipe text. Contoh isi tabel adalah seperti tabel 3 berikut: Latitude
Longitude
Waktu direkam YYYY-MM-DD -1.23456789 123.45678901 hh:mm:ss Tabel 2. Contoh isi tabel position.
1.2.2. Perancangan tabel ‘positionlog’
No. 1. 2. 3. 4.
Nama field Tipe data Idlog int(11) Latitude double Longitude double Waktu direkam datettime Tabel 3. Perancangan tabel positionlog.
Tabel 4 menunjukkan perancangan tabel ‘positionlog’ pada database. Pada gambar tersebut terdapat 4 buah atribut yang digunakan, yaitu Idlog yang menunjukkan urutan record, Latitude dan Longitude yang digunakan untuk merekam kordinat, dan Waktu direkam yang menunjukkan waktu saat posisi direkam. n menunjukkan jumlah data yang terekam di database server. Pada tabel ini Idlog digunakan sebagai primary key dan besifat auto-increament. Waktu rekam menggunakan format YYYY-MM-DD hh:mm:ss. “Idlog” menggunakan tipe int(11), “Latitude” dan “Longitude” menggunakan tipe double, dan “Waktu direkam” menggunakan tipe text. Contoh isi tabel ditunjukkan pada tabel 5. Idlog
Latitude
Longitude
1
-1.23456789
123.45678901
Waktu direkam YYYY-MM-DD hh:mm:ss
.. n
..
..
..
Tabel 4. Contoh isi tabel positionlog.
1.3.
Perancangan penerima lokasi (Web)
1.3.1. Diagram alur
Gambar 7. Diagram Alur Update Position dan Position Log.
Pada flow chart update position diatas, merupakan program yang digunakan ketika menerima input dari device android pengirim, dimana tujuan dari pemrograman ini ialah untuk melakukan update data koordinat dari device pengirim ke dalam tabel yang ada di database server. Alur kerja dari program tersebut ialah ketika device pengirim mengirimkan data koordinat latitude dan longitude-nya ke server, maka program ini yang kemudian akan menerima data.
Setelah
menerima data dan menampung sementara, maka program akan mulai menjalankan fungsi waktu sejak data diterima oleh program. Waktu yang dicatat terdiri dari hari, bulan , tahun, jam, menit, dan detik untuk menandai setiap data yang dikirimkan. Untuk setiap data posisi baru yang telah diberikan tanda oleh fungsi waktu akan diisikan ke dalam table di database. Data baru tersebut akan menggantikan posisi data lama di dalam table. Untuk dapat melakukan koneksi ke dalam database dan melakukan update table, maka program tersebut akan melalui sebuah program terpisah yang diberi nama db_connect.php. Pada flow chart position log, merupakan program yang digunakan untuk menyimpan semua data koordinat yang dikirimkan device pengirim. Alur kerja dari program tersebut ialah pertamatama program akan membaca data dari table update dan membaca data dari table history. Maka program telah memiliki 2 buah data koordinat di table update dan di table history. Kemudian program akan melakukan pengecekan pada 2 buah data tersebut apakah masih sama. Jika data antara table update dan table history berlainan, maka dapat dikatakan bahwa telah terjadi perubahan data baru. Jika program telah mendapatkan data baru, maka selanjutnya akan menjalankan Haversine formula yang dimana tujuan dari formula ini ialah untuk mendapatkan jarak antara 2 titik posisi yang kemudian digunakan sebagai tujuan akhir untuk mendapatkan fungsi kecepatan. Rumus dari haversine tersebut ialah:
a = sin²(∆φ/2) + cos(φ1).cos(φ2).sin²(∆λ/2) c = 2.atan2(√a, √(1−a)) d = R.c Di mana φ ialah latitude, λ adalah longitude, R adalah radius bumi (mean radius = 6,371 km). Fungsi tersebut jika diterjemahkan ke dalam bahasa pemrograman javascript dapat menjadi :
var R = 6371; // km var dLat = (lat2-lat1).toRad(); var dLon = (lon2-lon1).toRad(); var lat1 = lat1.toRad(); var lat2 = lat2.toRad();
var a =
Math.sin(dLat/2) * Math.sin(dLat/2) + Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); var d = R * c;
Variable d diatas merupakan jarak yang telah didapatkan dari perhitungan menggunakan haversine formula. Maka untuk mendapatkan kecepatan yang diinginkan dapat memanfaatkan nilai dari jarak dibagi interval waktu antara dua titik tersebut. Setelah mendapatkan data kecepatan, maka kita akan memasukkan data tersebut ke dalam table history bersama dengan data koordinat dari table update dan waktunya. Untuk dapat
melakukan koneksi ke dalam database dan melakukan insert ke dalam table, maka program tersebut akan melalui sebuah program terpisah yang diberi nama db_connect.php.
Gambar 8. Diagram Alur DB_Connect Flow chart db_connect.php merupakan sebuah program yang digunakan untuk melakukan koneksi ke suatu database sehingga dapat diakses oleh program lain. Alur kerja dari program ini ialah ketika dilakukan inisialisasi bahwa ada program yang ingin melakukan koneksi ke database, maka program akan menjalankan pengecekan apakah data-data yang dibutuhkan untuk masuk ke database sesuai dengan yang telah dikonfigurasi oleh administrator. Data-data tersebut meliputi
alamat server, id, dan password untuk masuk ke database. Jika ketiga parameter tersebut benar, maka program akan memperbolehkan untuk memasuki database yang dituju.
Gambar 9. Diagram Alur Menu Flow chart menu diatas merupakan program yang digunakan sebagai interface bagi user untuk melakukan pelacakan baik secara real time maupun untuk melihat history dari tracking melalui web. Alur kerja dari program diatas ialah ketika alamat dari program dipanggil melalui web browser, maka program yang telah terhubung ke server akan menampilkan tampilan menu yang telah didesain pada web browser. Interface pada web browser akan menampilkan pilihan bagi para user untuk memilih 1 dari 4 opsi pilihan yang disediakan. Ketika user memilih opsi 1,
maka program akan menampilkan peta tracking real time dari device A. Ketika user memilih opsi 2, maka program akan menampilkan peta history device A. Ketika user memilih opsi 3, maka program akan menampilkan peta tracking real time dari device B. Ketika user memilih opsi 4, maka program akan menampilkan peta history device B.
Gambar 10. Diagram Alur Tracking Map dan History Map Flow chart tracking map merupakan alur kerja dari program yang menampilkan peta pada web browser dan digunakan untuk melakukan pelacakan pada device secara real time. Posisi device yang dilacak pada peta akan ditandai oleh sebuah marker. Alur kerja dari program tersebut ialah ketika di start / dipanggil, maka program melakukan inisialisasi pewaktu , dimana pewaktu ini digunakan untuk update marker pada peta setiap 5 detik atau sesuai inisialisasi. Kemudian program akan menampilkan peta yang telah didapatkan dari mengintegrasikan code peta dari google map ke dalam program. Disini, peta yang digunakan merupakan peta dari google map. Setelah menampilkan peta, selanjutnya program akan menginisialisasikan geocoding. Geocoding merupakan proses untuk mengkonversikan alamat ke koordinat geografik, yang dapat digunakan untuk menandai marker atau posisi di peta. Sementara reverse geocoding digunakan untuk mengkonversikan koordinat geografik ke alamat yang dapat dibaca oleh user. Untuk dapat mengakses geocoding pada google map, dapat melalui google maps API dengan menambahkan code pada program berupa objek google.maps.Geocoder. Karena data yang didapatkan berupa koordinat, maka untuk dapat mengkonversi koordinat tersebut menjadi alamat dibutuhkan reverse geocoding. Kita dapat memilih untuk menampilkan jenis alamat yang sesuai dengan kebutuhan dengan merubah parameter results[] pada code reverse geocoder. Reverse geocoder dapat menampilkan berbagai jenis alamat sesuai koordinat seperti Negara , provinsi, kota, neighborhoods, alamat jalan, dan kode pos. berikut contoh dari format alamat yang disediakan reverse geocoder :
results[0].formatted_address: "275-291 Bedford Ave, Brooklyn, NY 11211, USA", results[1].formatted_address: "Williamsburg, NY, USA", results[2].formatted_address: "New York 11211, USA", results[3].formatted_address: "Kings, New York, USA", results[4].formatted_address: "Brooklyn, New York, USA",
results[5].formatted_address: "New York, New York, USA", results[6].formatted_address: "New York, USA", results[7].formatted_address: "United States"
Setelah geocoding telah berjalan, maka program akan melakukan koneksi ke database untuk mendapatkan semua data yang ada pada table database. Kemudian program akan menandai setiap koordinat baru yang ada di table database dengan marker pada peta. Marker akan diupdate setiap interval tertentu. Setiap update marker, maka marker akan menampilkan alamat yang telah di konversi, posisi ,dan waktu terbaru. Flow chart history map merupakan alur kerja dari program yang menampilkan peta pada web browser dan digunakan untuk melakukan pelacakan pada device dengan melihat history. History yang ditampilkan pada peta merupakan kumpulan koordinat posisi device yang dilacak secara real time dan setiap data koordinat ditandai dengan marker. Alur kerja dari program tersebut ialah ketika di start / dipanggil, program akan menampilkan peta yang telah didapatkan dari mengintegrasikan code peta dari google map ke dalam program. Disini, peta yang digunakan merupakan peta dari google map. Setelah menampilkan peta, selanjutnya program akan menginisialisasikan geocoding. Geocoding merupakan proses untuk mengkonversikan alamat ke koordinat geografik, yang dapat digunakan untuk menandai marker atau posisi di peta. Sementara reverse geocoding digunakan untuk mengkonversikan koordinat geografik ke alamat yang dapat dibaca oleh user. Untuk dapat mengakses geocoding pada google map, dapat melalui google
maps
API
dengan
google.maps.Geocoder.
menambahkan
code
pada
program
berupa
objek
Karena data yang didapatkan berupa koordinat, maka untuk dapat
mengkonversi koordinat tersebut menjadi alamat dibutuhkan reverse geocoding. Kita dapat memilih untuk menampilkan jenis alamat yang sesuai dengan kebutuhan dengan merubah
parameter results[] pada code reverse geocoder. Reverse geocoder dapat menampilkan berbagai jenis alamat sesuai koordinat seperti Negara , provinsi, kota, neighborhoods, alamat jalan, dan kode pos. Setelah geocoding telah berjalan, maka program akan melakukan koneksi ke database untuk mendapatkan semua data yang ada pada table history database. Untuk semua data yang ada pada table akan ditandai dengan marker pada peta. Jika ada penambahan data baru pada table, maka program akan memberikan marker baru pada peta sesuai koordinat pada table. Jika marker pada peta diklik, maka akan menampilkan data alamat jalan, posisi koordinat, waktu dan kecepatan yang telah tersimpan dalam database. 1.3.2. Perancangan tampilan
Gambar 11. Perancangan Tampilan Frame
Pada tampilan utama terdapat 2 frame, yaitu panel kiri dengan lebar 25%, dan panel kanan dengan lebar 75%. Pada panel kiri terdapat menu dengan 4 opsi, yaitu “Show Device 1 Online Tracking” untuk melacak device 1 secara real-time, “Show Device 1 History Tracking” untuk melihat history perjalanan device 1, “Show Device 2 Online Tracking”, dan “Show Device 1 History Tracking” yang memiliki fungsi yang sama untuk device 2.
Gambar 12. Perancangan Tampilan Show Device x Online Tracking. Untuk tampilan “Show Device 1 Online Tracking”, terdiri dari header text yaitu “Online Tracking” dan tampilan Google Maps di bawahnya. Terdapat sebuah marker di atas layer Google Maps yang menunjukkan posisi device terkini.
Gambar 13. Perancangan Show Device x History Tracking. Untuk tampilan “Show Device 1 History Tracking”, terdiri dari header text yaitu “History Tracking” dan tampilan Google Maps di bawahnya. Terdapat beberapa marker di atas layer Google Maps yang menunjukkan posisi yang telah dilalui device.
1.4.
Perancangan penerima lokasi (Android)
1.4.1. Diagram alur
Gambar 14. Diagram Alur MainActivity. Diagram alur di atas adalah diagram alur MainActivity untuk Penerima_App. Saat pertama program dijalankan, pertama-tama fungsi onCreate dijalankan. Dilakukan inisialisasi Array of String “menu” yang berisi string Device 1, Device 2, dan End. Kemudian dibuat List adapter dengan nama adapter untuk menampung nilai “array of string menu” yang secara pemrograman
akan menghubungkan data ini dengan ListView. Kemudian List Adapter diset untuk tampilan ListView. Kemudian jika salah satu item di list dipilih, maka akan dipanggil method onListItemClick. Salah satu parameter di metode onListItemClick yang digunakan adalah int position yang menyimpan index list. Kemudian item yang dipilih akan disimpan pada Object o dan diubah ke dalam String pilihan dan program memanggil method tampilkanPilihan(pilihan). Pada tampilkanPilihan() dibuat intent baru dengan objek i. Jika yang dipilih adalah item device 1, maka intent diisi dengan Show_Lokasi.class dengan Extra_Message “1”. Jika item device 2 dipilih, maka intent diisi dengan Show_Lokasi.class dengan Extra_Message “2”. Selain itu maka aktivitas diakhiri dan diclose. Lalu akan dijalankan startActivity() sesuai dengan isi intent yang sudah dipilih user.
Gambar 15. Diagram Alur Show_Lokasi Pada Show_Lokasi.class, tampilan activity content yang digunakan diambil dari layout resource R.layout.main dan diinisialisasi di metode onCreate(). Kemudian inisialisasi kembali
intent dengan objek intent untuk mengambil data Extra_Message dari MainActivity yang kemudian ditampung pada String msg. Kemudian inisialisai map untuk tampilan map dari GoogleMaps. Yang terakhir dari onCreate adalah inisialisasi Runnable updateTimeTask untuk inisialisai Timer. Method run() di dalam updateTimeTask diset untuk memanggil tampilkanPosisikeMap() dengan interval yang telah diset. Pada percobaan interval diset dengan 5s, 3s, atau 1s untuk disesuaikan dengan interval pengiriman kordinat ke server. Pada tampilkanPosisikeMap(), jika msg == 1, maka akan dilakukan request ke url1 dengan getRequest(url1). Jika bukan, maka request dilakukan ke url2 dengan getRequest(url2). Hasil request ditampung di String xResult. Setelah itu hasil JSON string xResult akan dimapping dengan name/value ke dalam JSONobject jObject. Isi jObject yang sudah dimap yang ditandai dengan name “nih_data” akan ditampung ke dalam JSONArray menuitemArray. Isi array sesuai dengan isi dari tabel di database server, yaitu terdiri dari tabel lat, lon, des, dan value dari masing-masing atribut tersebut. Kemudian terdapat dua variabel, double a dan double b yang masing-masing akan menyimpan nilai JSONobject lat dan lon. Latitude dan longitude disimpan dalam satu Geopoint bernama point. Tahap berikutnya yaitu melakukan reverse geocoding yang akan mengembalikan nama jalan, kota, kode pos, dan negara dari point tersebut. Informasi ini ditampung di dalam variabel point2 untuk kemudian diisi ke textResult dan ditampilkan di TextViewResult. Berikutnya seluruh overlay yang ada di mapView akan disimpan di list overlay. Kemudian seluruh overlay yang ada sebelumnya akan diclear. Lalu program mengambil icon dari R.drawable.marker yang digunakan pada object overlay. Kemudian dibuat OverlayItem item untuk memberikan informasi Geopoint pada marker. Setelah itu object overlay akan
ditambahkan ke dalam List item. Kemudian seluruh list item akan ditambahkan ke mapView. Posisi map akan ditengahkan pada point yang telah diset pada OverlayItem item. 1.4.2. Perancangan tampilan
Gambar 16. Perancangan Tampilan MainActivity Pada saat pertama dijalankan, program akan menampilkan tampilan seperti di atas. Terdapat nama aplikasi di paling atas kiri dan beberapa widget tombol untuk memilih device mana yang ingin ditrack. Terdapat device 1, 2, dan seterusnya sampai device n yang dapat ditrack. Tombol end untuk mengakhiri program.
Gambar 17. Perancangan Tampilan Show_Lokasi Saat device dipilih, terdapat 2 tampilan utama, yaitu hasil json yang mengembalikan alamat dan bagian Google Maps untuk menunjukkan peta device. Posisi device akan ditunjukan oleh marker.
