Tampilan Untuk User - Implementasi Interface

BAB IV HASIL DAN PEMBAHASAN

4.3 Implementasi Interface

4.3.1 Tampilan Untuk User

Tampilan untuk user terdiri dari halaman beranda, halaman artikel, dan halaman kontak. Halaman-halaman untuk user tersebut akan dijelaskan dibawah ini.

a. Halaman Beranda

Pada halaman beranda ini digunakan untuk melakukan pencarian dengan cara user memasukkan kalimat dan klik button cari. Desain halaman beranda seperti pada gambar4.8.

Gambar 4.8 Desain Tampilan Halaman Beranda

b. Halaman Artikel

Pada halaman artikel terdapat dua kategori yaitu pencarian dan website. Link pencarian digunakan untuk mencari informasi tanaman, dan link website menuju alamat website tanaman obat yang sudah di onlinekan. Pada halaman artikel ini berisi

tentang link artikel dan dibawahnya potongan artikel tentang tanaman obat di Indonesia. Desain halaman artikel seperti pada gambar 4.9.

Gambar 4.9 Desian Tampilan Halaman Artikel

Kode program untuk menampilkan halaman artikel tersebut yaitu sebagai berikut.

$sqlCount = "SELECT COUNT(idtanaman) FROM tanaman ORDER BY idtanaman DESC"; $rsCount = mysql_fetch_array(mysql_query($sqlCount));

$Count = $rsCount[0];

$id = isset($_GET['id']) ? $_GET['id'] : 1; $limit = 5;

$start = $limit * ($id - 1);

$query_data = mysql_query("SELECT * FROM tanaman ORDER BY nama_indo ASC LIMIT $start, $limit");

while($data = mysql_fetch_array($query_data)){ $isi = $data['deskripsi_tanaman']; $isix = substr($isi,0,500); $content = substr($isi,0,strrpos($isix," ")); $judul = preg_replace("/\s/","-",$data['nama_indo']); $url_link = "tanaman".$data['idtanaman']."-".$judul.".html"; $id_data = $data['idtanaman']; echo"<a href=\"".$data['nama_url'].".html\">".$data['nama_indo']."</a><br/></br>"; echo $content; echo "<hr/>"; }

Pada halaman artikel ini terdapat lima puluh jenis tanaman obat, akan tetapi tampilan perhalaman hanya ada lima tanaman, untuk melihat tanaman yang lain disediakan pagging untuk melanjutkan halaman dan untuk kembali pada halaman awal. Desain halaman pagging seperti pada gambar 4.10.

Gambar 4.10 Tampilan Halaman Pagging

Kode program untuk membuat pagging tersebut sebagai berikut:

$page = ceil($Count / $limit); $prev = $id-1; $next = $id+1; if($prev==0){ echo'<span class="disabled_tnt_pagination">Prev</span>'; }else{ $prev_link = "ns".$prev."-halaman-ke-".$prev.".html"; echo "<a href=\"".$prev_link."\"' >prev</a> ";

}

for($i = 1; $i <= $page; $i++){ if($id != $i){

$link = "ns".$i."-halaman-ke-".$i.".html"; echo "<a href=\"".$link."\"' >".$i."</a> "; }else{

echo "<span class='active_tnt_link'>$i</span>"; } }

if($next>$page){

echo'<span class="disabled_tnt_pagination">Next</span>'; }else{

$next_link = "ns".$next."-halaman-ke-".$next.".html"; echo "<a href=\"".$next_link."\"' >next</a> ";

Untuk melihat informasi yang lengkap tentang tanaman, klik nama tanaman tersebut maka akan tampil gambar tanaman dan informasi tentang tanaman. Desain halaman lengkap seperti pada gambar 4.11.

Gambar 4.11 Tampilan Halaman Detail Tanaman

Kode program dari halaman detail yaitu sebagai berikut:

<span class="foto"><img src="foto/<?php echo $data['foto']?>" width="300" height="205"></span>

</br></br><br> <p align='justify'>

<b>Nama Latin : </b><?php echo $data['nama_latin']?></br>

<b>Nama Simplisia : </b><?php echo $data['nama_simplisia']?></br> <b>Nama Daerah : </b><?php echo $data['nama_daerah']?></br> <b>Nama Asing : </b><?php echo $data['nama_asing']?></br> <b>Sinonim : </b><?php echo $data['sinonim']?></br>

<br><b>Deskripsi Tanaman: </b><?php echo $data['deskripsi_tanaman']?> <?php echo $data['tanaman']?> </br><br>

<?php

$idtanaman = $data['idtanaman'];

$query_kimia = mysql_query("SELECT bd.kandungan_kimia, bt.nama_bagian FROM bagian_digunakan bd

LEFT JOIN bagian_tanaman bt ON bd.idbagian=bt.idbagian

Pada halaman detail ini juga terdapat visualisasi dari tanaman tersebut. Desain

visualisasi tanaman jure seperti pada gambar 4.12.

Gambar 4.12 Tampilan Visualisasi Tanaman Jure

Kode program untuk membuat visualisasi yaitu sebagai berikut:

WHERE bd.idtanaman='$idtanaman'"); while($data_kimia = mysql_fetch_array($query_kimia)){ ?>

<b>Kandungan Kimia : </b>

<?php echo $data_kimia['nama_bagian']; echo " mengandung "; echo $data_kimia['kandungan_kimia'];?></br><?php } ?> </br><br> <?php

$query_pemakaian = mysql_query("SELECT bt.nama_bagian, cp.cara_pemakaian, k.nama_penyakit FROM bagian_digunakan bd

LEFT JOIN bagian_tanaman bt ON bd.idbagian = bt.idbagian LEFT JOIN cara_pemakaian cp

ON bd.idbagian_digunakan = cp.idbagian_digunakan LEFT JOIN khasiat k

ON cp.idkhasiat = k.idkhasiat

WHERE bd.idtanaman = '$idtanaman'"); while($data_pemakaian = mysql_fetch_array($query_pemakaian)){ ?>

<b>Khasiat dan cara pemakaian : </b> <?php

echo $data_pemakaian['nama_bagian']; echo " berkhasiat untuk "; echo $data_pemakaian['nama_penyakit']; echo " . Cara pemakaianya ";

echo $data_pemakaian['cara_pemakaian'];?></br><?php } ?> </br> <b>Catatan : </b><?php echo $data['catatan']?></br></p>

c. Halaman Kontak

Pada halaman kontak ini berisi tentang alamat email untuk menampung saran dan kritik yang diberikan oleh pengguna website ini. Desain halaman kontak seperti pada gambar 4.13.

Gambar 4.13 Tampilan Halaman Kontak

<?php echo $data['nama_indo'];?> <ul>

<li><br><div style='margin: -55px -100px 30px 0; color: black;'>Nama Latin </div><br><br><?php echo $data['nama_latin']?> </li>

<li><br><div style='margin: -55px -100px 30px 0; color: black;'>Sinonim </div><br><br><?php echo $data['sinonim']?> </li>

<li><br><div style='margin: -55px -100px 30px 0; color: black;'>Nama Daerah </div><br><br><?php echo $data['nama_daerah']?> </li>

<li><br><div style='margin: -55px -100px 30px 0; color: black;'>Nama Asing </div><br><br><?php echo $data['nama_asing']?> </li>

<li><br><div style='margin: -55px -100px 30px 0; color: black;'>Nama Simplisia </div><br><br><?php echo $data['nama_simplisia']?> </li>

Dalam dokumen SEARCH ENGINE BERBASIS SEMANTIC WEB MENGGUNAKAN ALGORITMA RABIN KARP PADA ENSIKLOPEDIA TANAMAN OBAT DI INDONESIA SKRIPSI LUDVI ANDINI NIM. (Halaman 77-83)