Implementasi Sistem Informasi Geografis PMI Wilayah Jawa

a. Download plugin jQuery yaitu jquery-1.4.4.min.js dan jquery-1.4.js. Kemudian membuat folder dengan nama js didalam directory XAMPPhtdocspmi_jateng, letakkan plugin jQuery dalam folder js. b. Download plugin Google Maps Api 3 untuk jQuery yaitu gmap3.min.js dan gmap3.js, setelah itu meletakkannya pada folder yang sama dengan letak plugin jQuery yaitu folder js. c. Menuliskan kode program untuk mengakses jQuery dan Google Maps API 3 pada head halaman view utama yaitu file index.php. Kode program dapat dilihat pada Kode Program 4.1. Kode Program 4.5 Kode Program untuk memanggil library jQuery dan Google Maps API 3 d. Untuk pemakaiannya dalam tampilan sistem, pengaturan dilakukan dalam view, karena jQuery bekerja sisi pengguna.

4.1.5 Implementasi Sistem Informasi Geografis PMI Wilayah Jawa

Tengah Dalam sistem yang dibuat, terdapat 4 jenis user yaitu Guest, Group members, Operator dan Admin. Guest adalah masyarakat umum yang dapat mengakses sistem secara langsung tanpa melakukan proses login. Ketika aplikasi dijalankan maka akan muncul halaman utama yaitu Home. Halaman Home menampilkan menu-menu yang dapat diakses oleh Guest seperti pada ... 1 script type=textjavascript src=?php echo base_url; 2 ?jsjquery-1.4.jsscript 3 script type=textjavascript src=?php echo base_url; 4 ?jsjquery-1.4.4.min.jsscript 5 script src=http:maps.google.commapsapijs?sensor=false 6 type=textjavascriptscript 7 script type=textjavascript src=?php echo base_url; 8 ?jsgmap3.jsscript ... ... 1 class Site extends Controller { 2 data[title] = HOME; 3 data[heading] = Main Page; 4 data[template] = html; 5 data[konten] = informasihome.php; ... gambar 4.8 serta menampilkan form login untuk member, operator dan admin. Menu yang dapat diakses oleh Guest yaitu : a. Informasi umum tentang PMI Provinsi Jateng yang terletak di halaman web sebelah kiri. Ketika navigasi Informasi umum di tekan maka akan muncul sub-menu dari menu informasi umum. Menu-menu tersebut adalah Profil PMI Provinsi Jawa Tengah, Misi dan Prinsip, Gedung Diklat, Visi Misi, Sejarah PMI Dunia, Sejarah PMI Indonesia, Code of conduct, Hukum Kemanusiaan, Safer Access, Service Cost dan Diseminasi, Sejarah Transfusi Darah dan Persediaan Darah. Untuk halaman Informasi Umum tentang PMI tidak membutuhkan akses data dari basis data. Sehingga untuk membuat tiap halaman tersebut hanya dibutuhkan sebuah fungsi pada class informasi dalam package controllers dan sebuah file dalam package view untuk tampilan masing- masing halaman yang diletakkan dalam package viewsinformasi. Pengaturan Controller untuk halaman Home adalah dengan membuat fungsi bernama index pada class Site. Dalam fungsi ini terdapat beberapa variabel array yaitu title, heading, template, konten, pmi_prov_jateng, menu_login, aktif, status, username, nama, jenis_user. Variabel tersebut berisi nilai yang akan diolah dalam view. Kode Program 4.6 Controller untuk menu Profil PMI Provinsi Jawa Tengah Theme untuk aplikasi SIG PMI Wilayah Jawa Tengah diunduh dari http:www.metamorphozis.com, kemudian disesuaikan dengan kebutuhan aplikasi. Dalam template tersebut terdapat beberapa atribut yang nilainya diambil dari variabel array dalam controller, seperti pada Kode Program 4.2 pada baris kedua sampai baris keduabelas. Baris kedua terdapat variabel title digunakan untuk menyimpan judul tiap-tiap halaman dalam web, baris keempat terdapat variabel template untuk menentukan template yang digunakan dan baris kelima terdapat variabel konten menentukan halaman yang akan ditampilkan. b. Halaman GIS, terdiri dari 3 halaman yaitu halaman yang menampilkan letak-letak seluruh PMI Kabkota di wilayah Jawa Tengah seperti terlihat pada Gambar 4.4, halaman pencarian rute antar PMI Kabkota di wilayah Jawa Tengah dan halaman pencarian lokasi terdekat PMI Kabkota di wilayah Jawa Tengah yang memiliki persediaan darah dengan jumlah tertentu. Gambar 4.4 Halaman GIS letak PMI KabKota GIS pencarian rute antar PMI KabKota wilayah Jateng menampilkan rute perjalanan dari satu PMI Kabkota menuju PMI KabKota lain di PMI Wilayah Jawa Tengah, seperti terlihat pada Gambar 4.5. ... 1 class Dbpmi extends Model { 2 function baca_pmicabang { 3 pmi_cabang=this-db-getpmi_cabang; ... Gambar 4.5 Halaman GIS Rute PMI KabKota Menu GIS pencarian rute lokasi PMI kabkota di wilayah Jawa Tengah merupakan halaman yang memerlukan pengambilan data dari basis data yaitu untuk mengetahui data berupa alamat tiap-tiap PMI KabKota serta melakukan pemanggilan Google Maps API 3. Jadi diperlukan sebuah model untuk mengakses data dari basis data dan sebuah controller untuk mengatur aksi apa yang akan ditampilkan dalam view. Dari controller kita memanggil fungsi baca_pmicabang dari class Dbpmi pada model untuk mengambil data-data dari tabel pmi_cabang. Kode program untuk model terlihat pada Kode Program 4.3, terlihat pada baris ketiga variabel pmi_cabang digunakan untuk menyimpan data yang diambil dari tabel pmi_jateng dalam basis data. Kode ”get” berarti kita mengambil semua row dari basis data. Kode Program 4.7 Model untuk mengambil data PMI Kabkota dari basis data ... 1. var asal=asal.val; 2. var tujuan=tujuan.val; 3. ... 4. action:getRoute, 5. options:{ 6. origin:asal, 7. destination:tujuan, 8. travelMode: google.maps.DirectionsTravelMode.DRIVING ... 1. { action:init, 2. zoom: 8, 3. mapTypeId: google.maps.MapTypeId.ROADMAP, 4. streetViewControl: true, 5. center: {lat:-6.976031,lng:110.416107} }, 6. { action:addDirectionsRenderer, 7. options:{ 8. preserveViewport: true, 9. draggable: true, 10. directions:results } 11. }, 12. { action:setDirectionsPanel,cache:false,id:panel } ; ... Untuk view-nya, dibuat satu file .php bernama GisPmiJateng.php. Didalamnya terdapat 2 combo box yang masing-masing berisi nama-nama PMI KabKota di wilayah jateng. Nama –nama tersebut diambil dari tabel pmi_jateng. Selanjutnya untuk tempat menampilkan peta Google Maps dan rutenya, diatur dalam file gmap_view seperti pada kode Program 4.4. Kode Program 4.8 View untuk halaman pencarian rute antar PMI kabkota wilayah Jateng Langkah pertama, kode program baris yang pertama dan kedua adalah mendeklarasikan nilai id asal dan id tujuan yang nilainya diambil dari value combo box , asal untuk id asal dan tujuan untuk id tujuan. Selanjutnya pada baris keempat mengambil fungsi getRoute dari library Google Maps untuk mencari rute perjalanan. Pada baris kelima dan keenam, nilai dari origin didapatkan dari variabel asal sedangkan destination didapat dari variabel tujuan. Selanjutnyapada baris kedelapan, diatur untuk tipe perjalanan yaitu tipe driving atau perjalanan berkendara motor. Kode Program 4.9 Pengaturan untuk tampilan peta Seperti kode program 4.5, untuk pengaturan tampilan peta yaitu dengan menjalankan fungsi callback yang didalamnya terdapat tiga action yaitu init, addDirectionsRenderer dan setDirectionsPanel . Pada baris kesatu sampai kelima, dalam init diatur tampilan untuk map, meliputi : zoom untuk skala perbesaran, jenis peta ROADMAP, tampilan streetViewControl: true, serta letak center map pada titik latitute 6.976031 dan longitute 110.416107. Pada baris keenam sampai kesepuluh, untuk addDirectionsRenderer mengatur tampilan untuk rute meliputi preserveViewport: true, draggable bernilai true agar rute dapat dipindah dan directions:results untuk menampilkan hasil pencarian rute. Sedangkan setDirectionsPanel pada baris keduabelas yaitu tampilan keterangan rute jalan yang dilalui. Gambar 4.6 Halaman GIS mencari Persediaan darah Halaman GIS untuk pencarian PMI Kabkota yang memiliki persediaan darah tertentu terlihat pada Gambar 4.6. Pada halaman ini kita dapat melakukan pencarian lokasi terdekat yang memiliki persediaan darah tertentu. Caranya adalah memasukkan nama PMI KabKota asal dari user pengguna dan memilih golongan darah yang dicari serta menuliskan jumlah persediaan darah minimal yang dibutuhkan. Pada kasus pencarian lokasi terdekat, awalnya dalam model akan dilakukan penyaringan data untuk PMI yang memiliki persediaan darah dengan golongan tertentu serta dengan jumlah minimal yang diharapkan. Untuk seluruh PMI yang memenuhi kedua syarat tersebut kemudian akan diambil data berupa longitude dan latitude dari masing-masing PMI yang tersaring. Setiap PMI yang tersaring dianggap sebagai PMI tujuan, selanjutnya akan dicari jarak antara PMI asal dengan PMI tujuan. Hasil dari perhitungan jarak dari PMI asal dengan seluruh PMI tujuan kemudian akan dibandingkan dan dicari jarak terpendek. Pencarian jalur terpendek caranya adalah mengambil jarak pertama kemudian dibandingkan dengan jarak yang selanjutnya. Jika jarak yang dibandingkan nilainya lebih kecil dari jarak pertama maka nilai dari jarak tersebut akan menggantikan nilai yang pertama. Selanjutnya akan menjadi pembanding untuk jarak yang selanjutnya. Untuk setiap jarak yang nilainya lebih kecil daripada nilai dari variabel pembanding maka nilainya akan menggantikan nilai dari variabel pembanding tersebut. Perhitungan jarak memanfaatkan fungsi DistanceMatrixService dari library Google Maps untuk mencari jarak dari PMI kabkota asal menuju PMI Kabkota tujuan. PMI Kabkota tujuan adalah PMI Kabkota yang memiliki persediaan darah minimal yang diinginkan. Seperti pada kode program 4.6, dilakukan beberapa pengaturan yaitu baris kedua pengaturan yaitu origins untuk menentukan lokasi mulai dari mana untuk menghitung arah, baris ketiga destinations untuk menentukan lokasi akhir yang untuk menghitung arah, baris keempat travelmode untuk menentukan apa modus transportasi untuk digunakan saat menghitung arah, baris kelima unitSystem untuk menetapkan sistem apa unit untuk digunakan saat menampilkan hasil. ... 1. service.getDistanceMatrix 2. { origins: [origin1, origin2], 3. destinations: [destinationA, destinationB], 4. travelMode: google.maps.TravelMode.DRIVING, 5. unitSystem: google.maps.UnitSystem.METRIC, 6. avoidHighways: false, 7. avoidTolls: false 8. } ... Untuk unitSystem digunakan google.maps.UnitSystem.METRIC yaitu jarak ditampilkan dengan menggunakan kilometer. Baris keenam avoidHighways ketika diatur ke false menunjukkan bahwa rute dihitung untuk tidak menghindari jalan raya utama. AvoidTolls ketika diatur ke false menunjukkan bahwa rute dihitung tidak menghindari jalan tol. Kode Program 4.10 Fungsi untuk perhitungan jarak yang terdekat Jika jarak tidak dapat dihitung akan terjadi eror dalam pencarian jarak maka akan ditampilkan message box dengan jenis eror yang terjadi, tapi jika jarak dapat dihitung maka akan ditampilkan nama PMI Kabkota terdekat dari daerah asal yang memiliki persediaan darah golongan tertentu dan jumlah minimal yang diharapkan. c. Halaman Berita akan menampilkan daftar berita tentang PMI Jawa Tengah. Data Berita yang ditamilkan adalah berita yang diambil dari tabel tb_berita. Namun tidak semua berita yang ada dalam tabel ditampilkan, yang ditampilkan adalah berita yang nilai aktif-nya sama dengan satu. Untuk membatasi jumlah berita yang ditampilkan tiap halaman maka dalam model juga membutuhkan paginasi. Untuk paginasi, dihitung seluruh record data yang ada dalam tabel tb_berita dan menentukan jumlah data yang akan ditampilkan per halaman. Jumlah halaman paginasi adalah sejumlah berita yang ada dan yang aktif dibagi dengan jumlah berita yang ditampilkan per halaman. Berita ditampilkan secara descending sehingga berita terbaru akan berada dibagian paling atas. Selain itu, pada berita juga terdapat gambar yang ditampilkan untuk memperjelas isi berita. Pada gambar yang tampil, diberikan link ke detail-berita sehingga ketika gambar di tekan maka akan terlihat rincian berita. Untuk gambar yang ditampilkan dalam halaman berita, metode penyimpanannya adalah dengan menyimpan nama file gambar dalam basis data. Sedangkan file gambarnya disimpan dalam folder gambarupload untuk pengaturan pemanggilan gambar diatur oleh controller. Untuk membaca rincian berita, Guest bisa menekan link read more atau menekan gambar pada setiap berita. Pada rincian berita inilah user dapat membaca isi berita secara lengkap dan mengetahui siapa penulis berita, kapan berita tersebut ditulis juga membaca komentar tentang berita tersebut. Bagi member dan operator juga dapat menuliskan komentar untuk setiap berita. d. Halaman PMI Kabkota menampilkan tabel berisi nama seluruh PMI Kabkota yang ada di wilayah Jawa Tengah beserta dengan alamat dan nomer teleponnya. Jika kita menekan nama PMI KabKota akan terlihat informasi tentang PMI KabKota tersebut sekaligus letaknya dalam peta Google Maps , seperti pada gambar 4.7. Gambar 4.7 Halaman GIS profil PMI Kabkota e. Halaman UDD menampilkan tabel berisi daftar Unit Donor Darah kabkota wilayah Jawa Tengah beserta nama, alamat dan nomor telepon masing-masing UDD, seperti pada gambar 4.8. Gambar 4.8 Daftar UDD KabKota wilayah Jawa Tengah f. Halaman laporan persediaan darah PMI kabKota se-jateng, menampilkan jumlah persediaan darah yang ada dari pada tiap-tiap PMI Kabkota wilayah Jawa Tengah. Data persediaan darah akan otomatis terhapus dari basis data ketika untuk setiap golongan darah pada setiap UDD kabkota terdapat minimal 10 data dan tanggal input lebih dari satu minggu. Untuk menampilkan tabel rekap persediaan darah, seperti pada gambar 4.9. Gambar 4.9 Daftar Persediaan darah PMI KabKota wilayah Jawa Tengah Data persediaan darah dapat diunduh dalam bentuk pdf. Untuk membuat pdf dalam controller diatur data apa saja yang akan dimasukkan dalam pdf seperti kode program 4.7. Untuk membuat laporan persediaan darah dalam bentuk pdf dibutuhkan plugin cezpdf yang dimasukkan dalam package library, yang kemudian dipanggil dalam controller. Baris keempat sampai baris keduabelas adalah pengaturan untuk data apa saja yang diambil dari basis dan akan ditampilkan dalam laporan pdf. Kode Program 4.11 Controller untuk membuat Pdf ... 1 function cetak_allstokpmi { 2 this-load-librarycezpdf; 3 db_data = this-Pdf_model-laporanAllPmi; 4 col_names = array 5 id_pmi = ID PMI, 6 nama = Nama PMI KabKota, 7 jml_golA = Golongan A, 8 jml_golB = Golongan B, 9 jml_golAB = Golongan AB, 10 jml_golO = Golongan O, 11 waktu = Waktu 12 ; 13 this-cezpdf-ezTabledb_data, col_names, REKAP STOK DARAH PMI 14 KABUPATEN KOTA SE-JAWA TENGAH , arraywidth=550; 15 this-cezpdf-ezStream; } ... g. Galeri PMI adalah halaman galeri yang berisi foto-foto dokumentasi kegiatan-kegiatan yang dilakukan oleh PMI Wilayah Jawa Tengah, seperti terlihat pada Gambar 4.10. Gambar 4.10 Galeri Foto PMI KabKota Wilayah Jawa tengah h. Pada Halaman Buku Tamu didalamnya terdapat form buku tamu seperti pada gambar 4.11. Disinilah user dapat menginggalkan pesan berupa pertanyaan maupun kritik dan saran untuk PMI Provinsi Jawa Tengah. Jika dalam pengisian buku tamu tidak dicantumkan nama, subjek, email dan komentar maka akan muncul peringatan namasubjekemail harus diisi. Selainitu jika email yang dimasukkan salah maka muncul peringatan ”Email tidak valid”. Gambar 4.11 Form Buku Tamu i. Halaman Daftar member. Untuk dapat masuk menjadi member group dari PMI maka harus melakukan pendaftaran, caranya dengan mengisi form registrasi daftar member. Dalam form tersebut guest harus menuliskan username, password, konfirmasi password, nama, alamat, pekerjaan, nomor teleponhp dan email. Jika ada kesalahan dalam pengisian form pendaftaran member maka akan muncul peringatan- peringatan sesuai dengan kesalahan yang dibuat, seperti pada gambar 4.12. Setelah mendaftar maka guest harus menunggu konfirmasi dari admin apakah diterima menjadi member atau tidak. Konfirmasi penerimaan sebagai memberakan dikirimkan ke email dicantumkan saat mendaftar menjadi member. Gambar 4.12 Form Pendaftaran Member Selanjutnya adalah hak akses untuk member. Seorang member dapat melakukan seluruh aktivitas yang dilakukan oleh guest, yang membedakan adalah setelah melakukan login member dapat menulis berita dan memberi komentar pada setiap berita. Ketika melakukan login, jika terjadi kesalahan maka akan muncul peringatan seperti pada gambar 4.13. Jika salah dalammemasukkan password maka mun cul peringatan ”Password salah”, jika guest telah mendaftar menjadi member tapi belum diaktifkan oleh admin maka muncul peringatan ”User belum diaktifkan” dan untuk login dengan username yang belum didaftarkan maka muncul peringatan ”User belum tersedia” Gambar 4.13 Peringatan ketika login gagal Seorang member memiliki hak untuk menulis berita. Namun untuk setiap berita ataupun komentar yang diberikan tidak akan langsung ditampilkan melainkan menunggu konfirmasi dari admin apakah komentar dan berita layak untuk ditampilkan atau tidak. Dalam penulisan berita setiap member wajib memasukkan judul, isi berita serta memilih tipe berita yang ditulis. Jika tidak memilih jenis berita maka secara default dianggap jenis beritanya adalah aktivitas. Ketika member tidak mengisikan judul maka akan muncul peringatan ”judul harus diisi” dan jika member belum mengisikan isi dari berita maka berita tidak akan tersimpan, seperti pada gambar 4.14. Gambar 4.14 Form Tambah Berita Hampir sama dengan member, seorang operator yang merupakan pegawai dari masing-masing PMI kabkota memiliki hak untuk menulis berita serta komentar berita. Namun ada satu hak khusus untuk operator yaitu hak untuk memperbaharui jumlah persediaan darah dari PMI Kabkota tempat operator tersebut bekerja. Misalnya operator dari PMI Kabupaten Magelang yang hanya bisa memeperbaharui informasi jumlah persediaan darah di PMI Kab Magelang. Seperti terlihat pada Gambar 4.15. Gambar 4.15 Halaman Daftar Persediaan Darah untuk operator Ketika seorang operator memilih untuk mengedit data persediaan darah maka akan muncul form perbaharui jumlah persediaan darah. Jika ada kolom yang tidak diisi maka akan muncul peringatan ”Golongan darah harus diisi”, seperti terlihat pada Gambar 4.16. Gambar 4.16 Halaman perbaharui persediaan darah untuk operator Untuk rekap persediaan darah masing-masing PMI Kabkota di tampilkan data persediaan darah selama beberapa waktu disertai dengan Grafik yang menggambarkan kenaikan dan penurunan persediaan darah, seperti terlihat pada Gambar 4.17. Gambar 4.17 Halaman rekap persediaan darah PMI KabKota Untuk halaman admin memiliki halaman tersendiri yang lebih sederhana. Pada halaman admin terdapat tujuh halaman untuk mengatur data, halaman tersebut adalah halaman profil, berita, galeri, persediaan darah, aktifasi member, operator dan admin. Penejelasan masing-masing halaman adalah sebagai berikut : 1. Halaman Profil PMI adalah halaman yang menampilkan daftar seluruh PMI Kabkota yang ada di wilayah Jawa Tengah. Pada halaman ini admin dapat melihat profil masing-masing PMI Kabkota serta dapat melakukan perubahan data alamat, nomor telepon, titik longitude dan latitude, profil PMI Kabkota dan foto PMI Kabkota. 2. Halaman Berita memperlihatkan seluruh berita baik yang aktif maupun yang non aktif. Berita yang aktif adalah berita yang layak ditampilkan kepada user. Sebuah berita yang baru saja ditulis akan bernilai nonaktif, untuk mengaktifkannya admin terlebih dahulu harus membaca beritanya. Jika berita layak untuk ditampilkan maka admin dapat mengaktifkan berita, jika kurang layak maka admin dapat mengedit isi berita dan meperbaiki supaya berita tersebut menjadi layak untuk ditampilkan. 3. Halaman Galeri Gambar adalah halaman untuk mengatur gambar yang ditampilkan. Admin dapat menambah dan menghapus gambar. Ketika gambar dihapus maka otomatis gambar tidak ditampilkan dan gambar yang ada dalam directory juga dihapus. Sebelum gambar dihapus muncul peringatan ”Anda yakin akan menghapus gambar ini?” seperti terlihat pada Gambar 4.18. Gambar 4.18 Peringatan Sebelum menghapus gambar 4. Halaman Persediaan Darah adalah halaman untuk mengatur data persediaan darah. Halaman ini hampir sama dengan halaman pesediaan darah pada operator hanya saja admin dapat merubah data persediaan darah dari semua PMI Kabkota di Jawa Tengah. 5. Halaman aktifasi user merupakan halaman untuyk mengatur member, pada halaman admin dapat mengaktifkan ataupun menonaktifkan member. Selain itu juga dapat melihat data pribadi dari masing- masing member. 6. Halaman operator menampilkan nama-nama operator dari setiap PMI Kabkota. Operator adalah pegawai dari PMI kabkota yang diberikan hak untuk mengubah data stok darah. Pada halaman ini admin dapat menonaktifkan operator dan menambah operator.

4.15 Pengujian Sistem

Untuk pengujian aplikasi sistem informasi geografis PMI Kabkota wilayah Jawa Tengah dengan metode blackbox. Pengujian dilakukan oleh petugas PMI Provinsi Jawa Tengah bagian Teknologi Informasi sebagai admin, lima orang pegawai PMI Jawa Tengah sebagai operator, serta 10 mahasiswa sebagai member sekaligus guest. Untuk rincian pengujian dapat dilihat pada Table 4.1 berikut : a. Pengujian Login yaitu untuk mengecek apakah fungsional dari form login telah berjalan dengan baik. Dari pengujian yang dilakukan didapatkan kesimpulan bahwa form login telah berfungsi dengan baik. Table 4.1 Pengujian Black Box untuk form login Aktivitas dan Event Input Output Status Pengujian Login member dengan klik tombol login Username dan password a. Jika berhasil maka masuk halaman web dengan hak akses member b. Jika password salah maka muncul peringangatan password salah c. Jika username salah muncul peringatan user belum tersedia Valid Login operator dengan klik tombol login Username dan password a. Jika berhasil maka masuk halaman web dengan hak akses operator b. Jika password salah maka muncul peringangatan password salah Valid