bab iv hasil dan pembahasan -...

45

Bab IV

Hasil dan Pembahasan

Pada bab ini memuat hasil dan pembahasan yang meliputi

implementasi dari perancangan, pengujian dan hasil analisis. Implementasi

tersebut meliputi pengaturan pada XAMPP Server untuk penggunaan

framework Codeigniter dan pengaturan penggunaan Google Maps Api 3.

4.1 Implementasi

4.1.1 Implementasi Sistem

Untuk pengaturan awal pada framework Codeigniter yaitu

mengunduh plugin Codeigniter dari codeigniter.com, kemudian mengganti

nama folder dengan pmi_jateng dan meletakkannya pada directory

XAMPP/htdocs/. Selanjutnya keluarkan folder application dari folder system

pada directory XAMPP/htdocs/pmi_jateng/system/application.

Gambar 4.1 Susunan Folder dalam aplikasi yang dibuat

Pengaturan kedua adalah pengaturan base_url, yang terletak pada

directory application/config/config.php, arahkan agar file utama root kita

adalah http://localhost/pmi_jateng, seperti terlihat pada Kode program 4.1.

46

1. $config['base_url'] = "http://localhost/pmi_jateng";

1. $route['default_controller'] = "site";

1. $autoload['libraries'] = array('database');

Kode Program 4.1 Pengaturan base_url

Untuk menentukan halaman pertama yang akan terbuka saat aplikasi

dijalankan maka perlu pengaturan controller utama yang akan dipanggil.

Pengaturan tersebut terletak pada directory application/config/routes.php,

arahkan agar default_controller adalah site, seperti terlihat pada Kode

program 4.2.

.

Kode Program 4.2 Pengaturan default_controller

Library yang otomatis dipanggil ketika aplikasi dijalankan adalah

library database. Pengaturannya adalah pada file autoload yang terletak

pada directory application/config/autoload.php, seperti pada Kode program

4.3.

Kode program 4.3 Pengaturan library utama

4.1.2 Implementasi Basis Data

Untuk menghubungkan basis data yang sudah dibuat dengan aplikasi

yang dibuat dibutuhkan beberapa pengaturan. Pengaturan ini dilakukan pada

file database.php yang terdapat dalam application/config/database.php.

Pengaturan untuk database dapat dilihat pada Kode program 4.4.

Kode Proggram 4.4 Pengaturan database

1. $db['default']['hostname'] = "localhost";

2. $db['default']['username'] = "ria";

3. $db['default']['password'] = "";

4. $db['default']['database'] = "pmijateng";

5. $db['default']['dbdriver'] = "mysql";

6. $db['default']['dbprefix'] = "";

7. $db['default']['pconnect'] = TRUE;

8. $db['default']['db_debug'] = TRUE;

9. $db['default']['cache_on'] = FALSE;

10. $db['default']['cachedir'] = ""; 11. $db['default']['char_set'] = "utf8"; 12. $db['default']['dbcollat'] = "utf8_general_ci";

47

4.1.3 Pengaturan Model View Controller (MVC)

Penerapan konsep MVC pada sistem yang dibuat terlihat pada

Gambar 4.2 dibawah ini :

Gambar 4.2 Penerepan MVC pada aplikasi yang dibuat

Gambar 4.3 Cara Kerja MVC pada aplikasi yang dibuat

Mekanisme kinerja MVC pada aplikasi yang dibuat, terlilhat pada

Gambar 4.3 Ketika suatu alamat URL dibuka maka mengakses controller

48

(yang ada dalam folder controllers) untuk menjalankan fungsi. Selain itu

juga memanggil helper dan library yang ada dalam controller serta

mengirimkan variabel dan nilai variabel.

Dalam aplikasi yang dibuat, secara langsung jika tidak menuliskan

nama controller yang dituju, maka akan dianggap mengakses controller

utama yaitu controller site. Begitu pula jika tidak menuliskan fungsinya,

maka dianggap fungsi index pada controller site. Setelah itu fungsi index

dalam controller site akan memanggil view dengan nama home.php untuk

ditampilkan.

Namun, jika diketahui nama Controller, fungsi dan ada variabel yang

dikirimkan, maka akan dilakukan proses pengolahan data yang berupa

variabel yang dikirim dalam fungsi dalam Controller yang dituju. Adapula

pengolahan data yang berhubungan dengan data dalam basis data maka

controller akan memanggil model (terletak pada folder models) yang terkait.

Dalam controller tidak boleh mengandung kode program untuk

mengakses basis data, controller melalui fungsinya akan memanggil model

karena didalam model terdapat fungsi-fungsi khusus untuk penanganan basis

data. Dari mekanisme kinerja MVC ini, suatu fungsi dari controller

mempunyai memiliki tampilan sendiri yang diletakkan dalam folder view.

4.1.4 Pengaturan Google Maps API 3

Saat ini versi terakhir Google Maps API adalah versi 3. Versi ini

dapat tampil lebih cepat dari pada Google Maps API versi sebelumnya. Pada

aplikasi yang dibuat, khusus untuk tampilan Google Maps, digunakan plugin

jQuery.

Pengaturan Google Maps Api 3 pada sistem :

49

a. Download plugin jQuery yaitu jquery-1.4.4.min.js dan jquery-1.4.js.

Kemudian membuat folder dengan nama js didalam directory

XAMPP/htdocs/pmi_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="text/javascript" src="<?php echo base_url();

2 ?>js/jquery-1.4.js"></script>


4 ?>js/jquery-1.4.4.min.js"></script>

5 <script src=http://maps.google.com/maps/api/js?sensor=false

6 type="text/javascript"></script>


8 ?>js/gmap3.js"></script>

...

50

...

1 class Site extends Controller {

2 $data['title'] = "HOME";

3 $data['heading'] = "Main Page";

4 $data['template'] = "html";

5 $data['konten'] = "informasi/home.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 views/informasi.

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

51

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 Kab/kota di wilayah Jawa Tengah seperti terlihat

pada Gambar 4.4, halaman pencarian rute antar PMI Kab/kota di wilayah

Jawa Tengah dan halaman pencarian lokasi terdekat PMI Kab/kota di

wilayah Jawa Tengah yang memiliki persediaan darah dengan jumlah

tertentu.

Gambar 4.4 Halaman GIS letak PMI Kab/Kota

GIS pencarian rute antar PMI Kab/Kota wilayah Jateng menampilkan

rute perjalanan dari satu PMI Kab/kota menuju PMI Kab/Kota lain di PMI

Wilayah Jawa Tengah, seperti terlihat pada Gambar 4.5.

52

...

1 class Dbpmi extends Model {

2 function baca_pmicabang() {

3 $pmi_cabang=$this->db->get('pmi_cabang');

...

Gambar 4.5 Halaman GIS Rute PMI Kab/Kota

Menu GIS pencarian rute lokasi PMI kab/kota di wilayah Jawa

Tengah merupakan halaman yang memerlukan pengambilan data dari basis

data yaitu untuk mengetahui data berupa alamat tiap-tiap PMI Kab/Kota

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 Kab/kota dari basis data

53

...

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 Kab/Kota 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 kab/kota 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

54

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 Kab/kota 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 Kab/Kota asal dari user

55

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 kab/kota asal menuju

PMI Kab/kota tujuan. PMI Kab/kota tujuan adalah PMI Kab/kota 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.

56

...

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 Kab/kota

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

57

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 Kab/kota menampilkan tabel berisi nama seluruh PMI

Kab/kota yang ada di wilayah Jawa Tengah beserta dengan alamat dan

nomer teleponnya. Jika kita menekan nama PMI Kab/Kota akan terlihat

informasi tentang PMI Kab/Kota tersebut sekaligus letaknya dalam peta

Google Maps, seperti pada gambar 4.7.

58

Gambar 4.7 Halaman GIS profil PMI Kab/kota

e. Halaman UDD menampilkan tabel berisi daftar Unit Donor Darah

kab/kota wilayah Jawa Tengah beserta nama, alamat dan nomor telepon

masing-masing UDD, seperti pada gambar 4.8.

Gambar 4.8 Daftar UDD Kab/Kota wilayah Jawa Tengah

f. Halaman laporan persediaan darah PMI kab/Kota se-jateng,

menampilkan jumlah persediaan darah yang ada dari pada tiap-tiap PMI

Kab/kota wilayah Jawa Tengah. Data persediaan darah akan otomatis

59

terhapus dari basis data ketika untuk setiap golongan darah pada setiap

UDD kab/kota 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 Kab/Kota 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->library('cezpdf');

3 $db_data = $this->Pdf_model->laporanAllPmi();

4 $col_names = array(

5 'id_pmi' => 'ID PMI',

6 'nama' => 'Nama PMI Kab/Kota',

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->ezTable($db_data, $col_names, 'REKAP STOK DARAH PMI

14 KABUPATEN / KOTA SE-JAWA TENGAH ', array('width'=>550));

15 $this->cezpdf->ezStream(); }

...

60

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 Kab/Kota 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 nama/subjek/email harus

diisi. Selainitu jika email yang dimasukkan salah maka muncul

peringatan ”Email tidak valid”.

Gambar 4.11 Form Buku Tamu

61

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 telepon/hp 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 muncul peringatan ”Password salah”,

jika guest telah mendaftar menjadi member tapi belum diaktifkan oleh

62

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

63

Hampir sama dengan member, seorang operator yang merupakan

pegawai dari masing-masing PMI kab/kota memiliki hak untuk menulis

berita serta komentar berita. Namun ada satu hak khusus untuk operator yaitu

hak untuk memperbaharui jumlah persediaan darah dari PMI Kab/kota

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

64

Untuk rekap persediaan darah masing-masing PMI Kab/kota 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 Kab/Kota

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 Kab/kota yang ada di wilayah Jawa Tengah. Pada

halaman ini admin dapat melihat profil masing-masing PMI Kab/kota

serta dapat melakukan perubahan data alamat, nomor telepon, titik

longitude dan latitude, profil PMI Kab/kota dan foto PMI Kab/kota.

65

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 Kab/kota di Jawa Tengah.

5. Halaman aktifasi user merupakan halaman untuyk mengatur member,

pada halaman admin dapat mengaktifkan ataupun menonaktifkan

66

member. Selain itu juga dapat melihat data pribadi dari masing-

masing member.

6. Halaman operator menampilkan nama-nama operator dari setiap PMI

Kab/kota. Operator adalah pegawai dari PMI kab/kota 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 Kab/kota

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


halaman web dengan hak akses

operator



Valid

67

c. Jika username salah muncul peringatan user belum tersedia

Login admin

dengan klik

tombol login

Username

dan

password


halaman admin



c. Jika username salah muncul

peringatan user belum tersedia

Valid

b. Pengujian untuk menu-menu yang dapat diakses guest meliputi form

buku tamu dan form daftar member. Dari pengujian yang dilakukan

didapatkan kesimpulan bahwa form buku tamu dan form daftar member

telah berfungsi dengan baik

Table 4.2 Pengujian Black Box untuk menu yang dapat diakses guest

Aktivitas

dan

Event

Input Output Status

Pengujian

Mengisi buku

tamu

kemudian klik

tombol kirim

Memasuk-

kan nama,

subjek dari

pesan,

email dari

user, isi

pesan

a. Jika belum memasukkan nama

maka muncul peringatan : *nama

harus diisi

b. Jika belum memasukkan subjek

maka muncul peringatan :

*subjek harus diisi

c. Jika belum memmasukkan email

maka muncul peringatan : *email

harus diisi

d. Jika belum memasukkan

komentar maka muncul

peringatan : *komentar harus diisi

e. Jika format email yang

dimasukkan tidak benar maka

muncul peringatan : *email tidak

valid

f. Jika memasukkan nama, subjek,

email yang valid dan komentar

maka komentar akan diproses

valid

Daftar Memasuk- a. Jika (username/password/ valid

68

member kemudian klik

tombol submit

kan username,

password,

konfirmasi

password,

nama,

alamat,

pekerjaan,

nomor

telepon/hp,

email

konfirmasi password/nama, alamat/pekerjaan/nomor

telepon/hp/email) tidak diisi maka

muncul peringatan :

*(username/password/ konfirmasi

password/nama,

alamat/pekerjaan/nomor

telepon/hp/email) harus diisi

b. Jika memasukkan username

kurang dari enam karakter maka

muncul peringatan *username

minimal enam karakter

c. Jika inputan password dan

konfirmasi password berbeda


*password dan konfirmasi

password tidak sama

d. Jika format email yang

dimasukkan tidak benar maka

muncul peringatan : *email tidak

valid

e. Jika username yg dimasukkan

sudah pernah didaftarkan maka

akan muncul peringatan :

*username sudah digunakan

f. Jika telah memasukkan semua

syarat dengan benar maka data

akan diproses

c. Pengujian untuk menu-menu yang dapat diakses operator meliputi form

buku tamu dan form komentar berita, form perbaharui pesediaan darah,

form tambah berita dan unduh laporan rekap persediaan darah . Dari

pengujian yang dilakukan didapatkan kesimpulan bahwa form komentar

berita, form perbaharui pesediaan darah, form tambah berita dan unduh

laporan rekap persediaan darah telah berfungsi dengan baik

„

69

Table 4.3 Pengujian Black Box untuk menu yang dapat diakses operator

Aktivitas

dan

Event

Input Output Status

Pengujian

Menulis

komentar

kemudian klik

tombol kirim

Memasuk-

kan isi

komentar

a. Jika tidak memasukkan komentar


*masukkan komentar

b. Jika telah mengisi komentar maka

komentar akan di proses

valid

Operator

memperbaha-

rui persediaan

darah

kemudian klik

tombol

perbaharui

Memasuk-

kan data

stok darah

yang baru

a. Jika kolom tidak diisi maka akan

muncul peringatan : *golongan

(A/B/AB/O) darah harus diisi

b. Jika seluruh kolom diisi dengan

jumlah persediaan darah dengan

benar maka data akan diproses

valid

Posting Berita

kemudian klik

tombol kirim

Memasukk

an judul,

isi berita,

gambar

dan tipe

berita

a. Jika tidak memasukkan judul

berita maka akan muncul

peringatan : *judul harus diisi

b. Jika tidak memasukkan isi berita

maka akan muncul peringatan :

*masukkan isi berita

c. Data dapat diproses meski tidak

memasukkan gambar

d. Jika tidak memilih jenis berita

maka data akan diproses dengan

default tipe berita yaitu aktivitas

e. Jika telah memasukkan judul

berita dan menuliskan isi berita

maka data akan diproses

valid

Laporan rekap

persediaan

darah

kemudian

Klik tombol

unduh

Laporan persediaan data terunduh

dalam bentuk pdf

valid

d. Pengujian untuk menu-menu yang dapat diakses admin didapatkan

kesimpulan bahwa telah berfungsi dengan baik

70

Table 4.4 Pengujian Black Box untuk menu yang dapat diakses admin guest

Aktivitas

dan

Event

Input Output Status

Pengujian

Admin Edit profil

PMI Kab/kota dan

klik tombol edit

Masukkan

alamat, no.tlp,

titik longitude

dan latitude,

profil serta

gambar

Jika data baru telah

dimasukkan maka

akan dilakukan proses

update profil PMI

kab/kota

valid

Admin edit berita

dan klik tombol

edit

Memasukkan

judul, isi,

gambar dan

tipe berita

Jika data baru telah

dimasukkan maka

akan dilakukan proses

update berita

valid

Admin mengak-

tifkan berita dan

Klik tombol non

aktif

Jika tombol ditekan

maka berita akan

bernilai aktif

valid

Admin

menonaktifkan

berita dan Klik

tombol aktif

Jika tombol ditekan

maka berita akan

bernilai non aktif

valid

Admin menghapus

berita dan klik

tombol hapus

Jika tombol ditekan

maka berita akan

terhapus

valid

Admin hapus

gambar dari

gallery dan klik

tombol silang

Jika tombol ditekan

maka muncul

peringatan : Anda

yakin akan menghapus

gambar ini? Jika kita

tekan OK maka

gambar terhapus jika

Cancel maka data

tidak terhapus

valid

Admin tambah

gambar pada galeri

dan klik tombol

upload the file

Setelah memilih

gambar yang

diinginkan

danmenekan tombol

upload file maka data

gambar akan diproses

valid

Admin Jika tombol ditekan valid

71

mengaktifkan member dan Klik

tombol non aktif

maka account member akan bernilai aktif

Admin me-

non-aktifkan

member dan klik

tombol aktif

Jika tombol ditekan

maka account member

akan bernilai non-

aktif

valid

Admin

mengaktifkan

operator dan klik

tombol non aktif

Jika tombol ditekan

maka account operator

akan bernilai aktif

valid

Admin me-

non-aktifkan

operator dan klik

tombol aktif

Jika tombol ditekan

maka account operator

akan bernilai non-

aktif

valid

Logout dan Klik

tombol logout

Jika member, operator

dan admin menekan

tombol logout maka

mereka akan keluar

dari sesi

valid

Berdasarkan pengujian yang dilakukan didapatkan hasil bahwa

aplikasi ini sudah berjalan secara fungsional dan mengeluarkan informasi

sesuai dengan yang diharapkan

bab iv hasil dan pembahasan -...

Documents