BAB IV IMPLEMENTASI DAN PENGUJIAN

(1)

BAB IV

IMPLEMENTASI DAN PENGUJIAN

4.1. Implementasi Sistem

Implementasi sistem informasi untuk mengetahui produksi perikanan ini membutuhkan beberapa perangkat lunak serta spesifikasi hardware yang mendukung. Pembuatan aplikasi ini menggunakan komputer dengan spesifikasi sebagai berikut :

1. Perangkat keras

a. Tipe komputer : Note Book

b. Processor : AMD Radeon

c. RAM : 2GB

d. Harddisk : 200 GB

e. Monitor : 11 inch

2. Perangkat lunak

a. Microsoft Windows 7 Ultimate b. MYSQL versi 2.10.2

c. Mozila Firefox 21.0

4.2. Implementasi Basis Data

Tahap awal dalam pembuatan aplikasi ini yaitu pembuatan database. Berikut tabel-tabel yang dibutuhkan :

(2)

69 1. Tabel admin

Gambar 4.1.Tabel admin

CREATE TABLE IF NOT EXISTS àdministrator` ( ìd` int(11) NOT NULL AUTO_INCREMENT, ùsername` varchar(45) NOT NULL,

`password` varchar(50) NOT NULL, `role` varchar(15) NOT NULL, `created_date` date NOT NULL, PRIMARY KEY (`id`)

(3)

70 2. Tabel berita

Gambar 4.2.Tabel berita CREATE TABLE IF NOT EXISTS `berita` (

`id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(200) NOT NULL,

`content` text NOT NULL,

`image` varchar(100) NOT NULL, `created_date` date NOT NULL, `hits` int(11) NOT NULL, PRIMARY KEY (`id`)

(4)

71 3. Tabel ikan

Gambar 4.3.Tabel ikan CREATE TABLE IF NOT EXISTS `ikan` (

`id` int(11) NOT NULL AUTO_INCREMENT, `jenis_ikan` varchar(50) NOT NULL,

`nama_ikan` varchar(50) NOT NULL, PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=28 ;

4. Tabel hits

(5)

72 CREATE TABLE IF NOT EXISTS `hits` ( `ip` varchar(20) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

5. Tabel kritik_saran

Gambar 4.5.Tabel kritik_saran CREATE TABLE IF NOT EXISTS `kritik_saran` ( `id` int(11) NOT NULL AUTO_INCREMENT, `nama` varchar(45) NOT NULL,

`email` varchar(45) NOT NULL, `komentar` text NOT NULL, `created_date` date NOT NULL, PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

(6)

73 6. Tabel perairan

Gambar 4.6.Tabel perairan

CREATE TABLE IF NOT EXISTS `perairan` ( `id` int(11) NOT NULL AUTO_INCREMENT, `id_wpp` int(11) NOT NULL,

`perairan` varchar(100) NOT NULL, PRIMARY KEY (`id`)

(7)

74 7. Tabel peta_wpp

Gambar 4.7.Tabel peta_wpp CREATE TABLE IF NOT EXISTS `peta_wpp` ( `id` int(11) NOT NULL AUTO_INCREMENT, `nama_wpp` varchar(100) NOT NULL,

PRIMARY KEY (`id`)

(8)

75 8. Tabel produksi

Gambar 4.8.Tabel produksi CREATE TABLE IF NOT EXISTS `produksi` ( `id` int(11) NOT NULL AUTO_INCREMENT, `id_wpp` int(11) NOT NULL,

ìd_ikan` int(11) NOT NULL, `nilai_produksi` int(11) NOT NULL, `nilai_msy` int(11) NOT NULL, `stok` int(11) NOT NULL, `created_date` date NOT NULL, ìd_admin` int(11) NOT NULL, PRIMARY KEY (ìd`)

(9)

76 4.3. Tampilan Antar Muka

4.3.1. Tampilan Antar Muka Pada User

a. Tampilan Halaman Utama pada User

Gambar 4.9.Halaman Utama Berikut potongan coding untuk halaman utama :

<div class="header"><imgsrc="<?php echo base_url(); ?>images/header.jpg" width="900" height="150" /></div>

<div class="head_title">SELAMAT DATANG DI WEBSITE INFORMASI WILAYAH PENGELOLAAN PERIKANAN</div>

<?php $this->load->view('menu'); ?><div class="wrap_content">

<?php $this->load->view('left_content'); ?><div class="center_content"><div class="box_center">

<div class="box_center_title">BeritaUtama</div><div class="box_content"><div class="padding10">

<?phpforeach($berita->result() as $row) { ?><div class="row_berita"><div class="title_berita"><a href="<?php echo base_url();

?>index.php/berita/detail/<?php echo $row->id; ?>"><?php echo ucwords($row->title); ?></a></div>

<div class="tgl_berita"><?php echo date('d F Y', strtotime($row->created_date)); ?></div>

(10)

77 b. Tampilan Halaman Profil pada User

Gambar 4.10. Halaman Profil Berikut potongan coding untuk halaman profil :

<title>Profil</title>

</head>

<?php $this->load->view('menu'); ?> <div class="wrap_content">

<?php $this->load->view('left_content'); ?> <div class="center_content">

(11)

78 c. Tampilan Halaman Peta pada User

Gambar 4.11. Halaman Peta Berikut potongan coding untuk halaman peta :

$(".maps").click(function () {

$.post("<?php echo base_url();

?>index.php/peta/get_map/"+this.id+"",function(data,status){ $('#divpeta').html(data); }); }); }); </script> </head> <body onLoad="CoolClock.findAndCreateClocks()"> <div class="wrapper">

<?php $this->load->view('menu'); ?> <div class="wrap_content"> <div class="left_peta"> <div class="box_peta"> <div class="box_peta_title">Peta</div> <div class="box_content"> <div class="padding10"> <div id="imgmapdiv"> <map name="imgmap">

(12)

79 d. Tampilan Halaman Berita pada User

Gambar 4.12. Halaman Berita Berikut potongan coding untuk halaman berita :

<?php $this->load->view('menu'); ?><div class="wrap_content"> <?php $this->load->view('left_content'); ?>

<div class="center_content"><div class="box_center"> <div class="box_center_title">Berita</div>

<?phpforeach($berita->result() as $row) { ?> <div class="row_berita">

<div class="title_berita"><a href="<?php echo base_url(); ?>index.php/berita/detail/<?php echo $row->id; ?>"><?php echo ucwords($row->title); ?></a></div>

<div class="tgl_berita"><?php echo date('d F Y', strtotime($row->created_date)); ?></div>

<div class="image_berita"><img width="120" height="80" src="<?php echo base_url(); ?>images/upload/<?php echo $row->image; ?>" title="<?php echo ucwords($row->title); ?>" /></div>

<div class="text_berita"><?php echo character_limiter(strip_tags($row->content), 160); ?></div>

(13)

80 e. Tampilan Halaman Statistik pada User

Gambar 4.13. Halaman Statistik Berikut potongan coding untuk halaman statistik :

<div class="header"><img src="<?php echo base_url(); ?>images/header.jpg" width="900" height="150" /></div>

<?php $this->load->view('menu'); ?> <div class="wrap_content"> <div class="left_statistik"> <div class="box_peta"> <div class="box_peta_title">Statistik</div> <div class="box_content"> <div class="padding10"> <h1><p align="center">POTENSI PRODUKSI PERIKANAN WPP 571</p></h1>

<img src="<?php echo base_url(); ?>images/WPP_571.jpg" width="860" />

<h1><p align="center">POTENSI PRODUKSI PERIKANAN WPP 572</p></h1>

<img src="<?php echo base_url(); ?>images/WPP_572.jpg" width="860" />

<h1><p align="center">POTENSI PRODUKSI PERIKANAN WPP 573</p></h1> width="860" /> PERIKANAN

(14)

81

f. Tampilan Halaman Kritik dan Saran pada User

Gambar 4.14. Halaman Kritik dan Saran Berikut potongan coding untuk halaman kritik dan saran:

<?php echo $this->session->flashdata('message'); ?>

<?php echo validation_errors('<div class="error">', '</div>'); ?> <form action="<?php echo current_url(); ?>" method="post"> <table border="0" cellpadding="0" cellspacing="10">

<td><input type="text" style="width: 200px;" name="nama" id="nama" value=""></td></tr><tr><td>Email</td>

<td valign="top">Komentar</td><td valign="top">:</td>

</tr><tr> <td></td> <td></td>

</div></div></div></div>

<?php $this->load->view('right_content'); ?> <div class="clear"></div></div>

(15)

82 4.3.2. Tampilan Antar Muka Pada Admin

a. Tampilan Halaman Login pada Admin

Gambar 4.15. Halaman Login Admin

$username = $this->input->post('username'); $password = md5($this->input->post('password')); $query =

$this->admin_model->valid(array('username'=>$username, 'password'=>$password)); if($query->num_rows() > 0) {

$getdata = $this->admin_model->info(array('username' => $username)); $admin = $getdata->row();

/* create session */ $session = array( 'role'=> $admin->role, 'id'=> $admin->id, 'username'=> $admin->username,

'is_admin_login'=> true ); $this->session->set_userdata($session) redirect('admin/home'); } else {

$this->session->set_flashdata('error', '<div class="error text_center">Username Atau Password Yang Anda Masukan Tidak Valid</div>'); } }

$this->load->view('admin/index', $data); } function logout() { $this->session->sess_destroy(); $this->session->unset_userdata('role'); >unset_userdata('id'); $this->session->unset_userdata('username'); $this->session >unset_userdata('is_admin_login'); redirect('admin'); } public function home() { if ($this->session->userdata('is_admin_login') == false) { redirect('admin'); }

(16)

83 b. Tampilan Halaman Utama pada Admin

Gambar 4.16. Halaman Utama Admin Berikut potongan coding untuk halaman utama admin:

</head> <body>

<div class="left paddinglr10">Welcome <?php echo $this->session->userdata('username'); ?></div>

<div class="right paddinglr10 fontwhite"><a href="<?php echo base_url(); ?>index.php/admin/logout">Logout</a></div> </div> <div class="wrap_content"> <div class="left_content"> <?php $this->load->view('admin/menu'); ?> </div> <div class="right_content"> <div class="padding10">

<span class="titleadmin">Selamat datang di halaman admin</span><br> <p>Di bagian kiri adalah menu akses administrator</p>

</div> </div>

(17)

84 c. Tampilan Halaman Peta

Gambar 4.17. Halaman Peta Admin Berikut potongan coding untuk halaman peta admin:

<div class="right paddinglr10 fontwhite"><a href="<?php echo base_url(); ?>index.php/admin/logout">Logout</a></div>

</div><div class="wrap_content"><div class="left_content"> <?php $this->load->view('admin/menu'); ?>

</div><div class="right_content">

<form action="<?php echo current_url(); ?>" method="post">

<td></td><td><input type="submit" name="submit" class="btnorange" id="submit" value="Submit" />  <input type="button" name="cancel" class="btnred" id="cancel" value="Cancel"

onClick="javascript:location.href='<?php echo base_url(); ?>index.php/admin/peta'" /></td>

(18)

85 d. Tampilan Halaman Perairan

Gambar 4.18. Halaman Perairan Admin Berikut potongan coding untuk halaman perairan admin:

</div><div class="wrap_content"><div class="left_content"> <?php $this->load->view('admin/menu'); ?></div>

<div class="right_content"><div class="padding10"> <div class="left titleadmin">Add Perairan</div><div class="clear"> </div>

<?php echo validation_errors('<div class="error">', '</div>'); ?> <form action="<?php echo current_url(); ?>" method="post">

<td width="10">:</td><td> <select name="nama_wpp" id="nama_wpp"> <option value="">Pilih ID WPP</option>

<?php foreach($peta->result() as $row) { ?>

(19)

86 e. Tampilan Halaman Ikan

Gambar 4.19. Halaman Ikan Admin Berikut potongan coding untuk halaman ikan admin:

<?php $this->load->view('admin/menu'); ?></div> <div class="right_content"><div class="padding10">

<div class="left titleadmin">Page Ikan</div><div class="right"><input class="btnorange" type="button" onClick="javascript:location.href='<?php echo base_url(); ?>index.php/admin/add_ikan'" value="Buat Ikan Baru" name="create"></div>

<?php echo $this->session->flashdata('message'); ?> <div class="clear"> </div>

</div>

url : '<?php echo base_url(); ?>index.php/admin/get_ikan', dataType : 'json',

(20)

87 f. Tampilan Halaman Produksi

Gambar 4.20. Halaman Produksi Admin Berikut potongan coding untuk halaman produksi admin:

<title>Admin Produksi</title>

</head><body><div class="wrapper"><div class="header">

<div class="right_content"><div class="padding10"> <div class="left titleadmin">Edit Produksi</div> <div class="clear"> </div>

<?php echo validation_errors('<div class="error">', '</div>'); ?> <form action="<?php echo current_url(); ?>" method="post">

<input type="hidden" name="id" id="id" value="<?php echo $produksi->id; ?>" /> <table border="0" cellpadding="0" cellspacing="10"

width="100%"> <tr> <td width="100">ID WPP</td>

<td width="10">:</td><td> <select name="nama_wpp" id="nama_wpp"> <option value="">Pilih ID WPP</option>

(21)

88 g. Tampilan Halaman Berita

Gambar 4.21. Halaman Berita Admin Berikut potongan coding untuk halaman berita admin:

<div class="left titleadmin">Page Berita</div><div class="right"><input class="btnorange" type="button" onClick="javascript:location.href='<?php echo base_url(); ?>index.php/admin/add_berita'" value="Buat Berita Baru" name="create"></div>

<?php echo $this->session->flashdata('message'); ?> <div class="clear"> </div>

</div>

(22)

89 h. Tampilan Halaman Kritik dan Saran

Gambar 4.22. Halaman Kritik dan Saran Admin Berikut potongan coding untuk halaman kritik dan saran admin:

</div><div class="right_content"><div class="padding10"> <div class="left titleadmin">Page Kritik & Saran</div> <?php echo $this->session->flashdata('message'); ?> <div class="clear"> </div>

</div>

url : '<?php echo base_url(); ?>index.php/admin/get_kritik_saran', dataType : 'json', colModel : [ { display : 'No', name : 'no', width : 30, align : 'center'

(23)

90 i. Tampilan Halaman Laporan

Gambar 4.23. Halaman Laporan Admin Berikut potongan coding untuk halaman laporan admin:

<form action="<?php echo current_url(); ?>" method="post" id="upload" enctype="multipart/form-data">

<table border="0" cellpadding="0" cellspacing="10" width="100%"> <tr> <td>Upload Laporan</td>

</tr> </table> </form><?php } ?> <?php if ($handle = opendir('files')) {

$thelist = ''; while (false !== ($file = readdir($handle))) { if (($file != ".") && ($file != ".."))

{ $button = '';

if ($this->session->userdata('username') != 'staf') { $button = '<div class="row_icon"><a title="Delete"

href="'.base_url().'index.php/admin/delete_file/'.$file.'"><img src="'.base_url().'images/delete.png" /></a></div>';

} $thelist .= '<li><div class="row_file"><a href="'.base_url().'files/'.$file.'">'.$file.'</a></div>'.$button.'</li>'; } } closedir($handle); } ?> <p>List of files:</p><ul class="row_upload"><p><?php echo $thelist?></p></ul><div class="clear"></div></div>

</div>

(24)

91 j. Tampilan Halaman Petugas

Gambar 4.24. Halaman Petugas Berikut potongan coding untuk halaman Petugas:

class="right paddinglr10 fontwhite"><a

href="http://localhost/ayu/index.php/admin/logout">Logout</a></div> </div> <div class="wrap_content"> <div class="left_content"> <ul class="menu"> <li><a href="http://localhost/ayu/index.php/admin/home">Home</a></li> <li><a href="http://localhost/ayu/index.php/admin/produksi">Produksi</a></li> <li><a href="http://localhost/ayu/index.php/admin/laporan">Laporan</a></li> </ul> </div> <div class="right_content"> <div class="padding10">

<span class="titleadmin">Selamat datang di halaman admin</span><br>

<h2>INFORMASI WILAYAH PENGELOLAAN PERIKANAN</h2>

<p>Di bagian kiri adalah menu akses administrator</p> </div>

</div>

(25)

92 4.4. Pengujian Sistem

Pengujian sistem yang dilakukan adalah untuk mengetahui bahwa aplikasi yang telah dibuat dapat berjalan sebagaimana mestinya sesuai dengan yang dirancang. Dan untuk menghindari adanya kesalahan – kesalahan yang mungkin terjadi pada saat web tersebut dijalankan.

4.4.1. Metode Pengujian

Metode pengujian yang dilakukan adalah metode black box testing. Metode ini merupakan metode pengujian yang menekankan pada berhasil atau tidaknya menjalankan fungsi dari web yang telah dibuat tanpa memperdulikan code source yang ada.

4.4.2. Skenario Pengujian

Berikut adalah beberapa skenario pengujian yang akan dilakukan:

Tabel 4.1.Tabel skenario pengujian

No Antar muka Bagian dari antar muka yang diuji Status aplikasi Skenario

pengujian Hasil yang diinginkan 1 Tampilan login Proses input data login Tampilan login sudah terbuka Masukan user name & password lalu klik “login”

Data akan dicek. Jika salah akan diulangi, jika benar akan masuk ke halaman menu utama 2 Tampilan

halaman utama

Menguji semua link menu yang terdapat pada halaman utama Tampilan halaman utama sudah terbuka Klik menu yang diinginkan

Link menu yang dipilih dapat membuka halaman yang dimaksud 3 Tampilan halaman peta Menguji fungsi tambah peta, edit dan hapus peta Halaman peta sudah terbuka Pilih peta klik buat peta baru jika ingin menambah, mengedit data jika ingin diedit dan klik hapus jika ingin menghapus.

Data akan disimpan dan ditampilkan pada data peta 4 Tampilan halaman Menguji fungsi tambah data Halaman perairan Pilih perairan

Data akan disimpan dan ditampilkan pada data

(26)

93 perairan perairan, edit

dan hapus data

sudah terbuka klik buat perairan baru jika ingin menambah, mengedit data jika ingin diedit dan klik hapus jika ingin menghapus perairan 5 Tampilan halaman ikan Menguji fungsi tambah data perairan, edit dan hapus data

Halaman ikan sudah terbuka Pilih ikan klik buat ikan baru jika ingin menambah, mengedit data jika ingin diedit dan klik hapus jika ingin menghapus

Data akan disimpan dan ditampilkan pada data ikan 6 Tampilan halaman produksi Proses menginput data produksi Tampilan halaman produksi sudah terbuka Pilih produksi klik buat produksi baru jika ingin menambah, mengedit data jika ingin diedit dan klik hapus jika ingin menghapus

Data akan disimpan dan ditampilkan pada data produksi 7 Tampilan halaman berita Proses membuat berita baru dan edit berita Tampilan halaman berita sudah terbuka Pilih berita klik buat berita baru jika ingin menambah berita, mengedit berita jika ingin diedit dan klik hapus jika ingin menghapus

Data akan disimpan dan ditampilkan pada data berita

(27)

94 halaman

kritik dan saran

menghapus kritik dan saran

kritik dan saran sudah terbuka dan saran klik detail jika ingin melihat detail krtik dan saran, klik hapus jika ingin menghapus

saran yang dipilih

9 Tampilan halaman laporan Proses mengunduh laporan Tampilan halaman laporan telah terbuka Pilih laporan, klik choose file yang ingin di unduh. Laporan berhasil diunduh. 10 Halaman Petugas Daerah Menguji semua link menu yang terdapat pada halaman petugas daerah Tampilan halaman petugas sudah terbuka Klik menu yang diinginkan

Link menu yang dipilih dapat membuka halaman yang dimaksud 11 Halaman produksi petugas daerah Melihat nilai produksi dan eksploitas perikanan Tampilan halaman produksi petugas sudah terbuka Klik menu produksi pada halaman petugas daerah

Akan menampilkan nilai produksi dan eksploitas perikanan 12 Tampilan halaman laporan petugas daerah Proses mengunggah laporan Tampilan halaman laporan telah terbuka Pilih file yang ingin di unggah, lalu klik submit jika ingin di unggah Laporan berhasil diunggah.

Tabel 4.2.Tabel hasil pengujian

No Antar muka yang diuji Bagian dari antar muka yang diuji Status aplikasi Skenario

pengujian Hasil yang didapat 1 Tampilan

halaman home

Menguji semua link menu yang terdapat pada halaman utama Tampilan halaman home sudah terbuka Klik link menu satu persatu

Link menu yang dipilih dapat membuka halaman yang dimaksud 2 Tampilan halaman profil Menguji fungsi profil Tampilan halaman profil sudah terbuka Klik profil maka akan muncul visi dan misi.

Menampilkan profil yang berisi visi dan misi

3 Tampilan halaman peta Menguji tampilan peta WPP Tampilan halaman peta WPP Klik peta, pilih nama WPP Menampilkan data produksi perikanan

(28)

95 sudah terbuka 4 Tampilan halaman berita Menguji fungsi berita Tampilan halaman berita sudah terbuka Klik berita, pilih berita yang akan dipilih

Menampilkan berita yang akan dibaca 5 Tampilan halaman statistik Menguji fungsi statistik Tampilan halaman statistik sudah terbuka Klik statisktik maka akan mucul statistik perikanan Menampilkan data statistik perikanan 6 Tampilan halaman kritik dan saran Menguji fungsi kritik dan saran

Tampilan halaman kritik dan saran sudah terbuka Klik kritik dan saran lalu input nama, email dan isi komentar lalu klik “submit” Menginput komentar pada halaman krtik dan saran

4.4.3. Analisis Hasil Pengujian

Dari skenario pengujian yang telah dilakukan terhadap aplikasi ini, maka diperoleh analisis hasil pengujian dengan rincian sebagai berikut:

1. Semua proses dan link berjalan dengan baik sesuai dengan yang dirancang oleh penulis.

2. Semua proses dapat berjalan dengan baik menggunakan spesifikasi komputer yang terdapat pada lingkungan pengujian.

3. Dalam pengujian ini penulis menggunakan web server apache dengan Mozila Firefox 21.0.

Analisa pengujian dengan Mozila Firefox 21.0 adalah :

a. Masukan nama localhost web aplikasi, setelah itu masuk kehalaman home. Dihalaman home ini akan terdapat 6 link yang terdiri dari link home, profil, peta, berita, statistis, dan kritik dan saran.

b. Analisa pengujian yang dilakukan dengan mozila firefox adalah untuk mengetahui bahwa aplikasi yang telah dibuat dapat berjalan sebagaimana mestinya sesuai dengan yang dirancang dan semua link – link yang ada dapat berjalan

(29)

96

Dari hasil pengujian yang dilakukan pada aplikasi ini, penulis menyimpulkan bahwa semua form dan tombol-tombol yang ada di dalam aplikasi dapat berjalan dengan baik.