Struktur Halaman Website - Implementasi Sistem

Bab 5. Implementasi Sistem

5.4 Struktur Halaman Website

Struktur halaman Website yang dibuat adalah seperti pada Gambar 5.1.

Halaman Utama

Halaman Home

Tempat Wisata Halaman Kategori

Bangunan Sejarah

Pakaian Adat Halaman

Sejarah

Rumah Adat Kuliner Adat Istiadat Halaman

Profil

Halaman Admin

Halaman Objek Populer

Gambar 5.1 Struktur Halaman Website

5.5 Halaman Website

Pada tampilan awal menu, akan dihadapkan pada pilihan pariwisata yang akan di lihat khususnya Kabupaten Langkat dapat dilihat pada Gambar 5.2.

5.5.1 Tampilan Awal Website

Tampilan awal Website Sistem Pariwisata dapat dijalankan melalui Website browser firefox atau Google Crome dan ketikkan pada addres bar http://localhost/kabupatenlangkat. Halaman utama sistem dapat dilihat pada Gambar 5.2.

Gambar 5.2 Halaman Awal

5.5.2 Tampilan Halaman Home

Ketika pada halaman awal Website diklik tempat wisata akan muncul halaman home. Halaman Home dapat dilihat pada Gambar 5.3.

Gambar 5.3 Halaman Home Kabupaten Langkat

5.5.3 Tampilan Halaman Tempat Wisata

Pada tampilan menu home terdapat beberapa pilihan yaitu pilihan untuk menampilkan kategori objek. Pada kategori objek teradapat beberapa pilihan salah satunya tempat wisata. Halaman tempat wisata dapat dilihat pada Gambar 5.4.

Gambar 5.4 Halaman Pariwisata Langkat

5.5.4 Tampilan Halaman Sejarah

Pada tampilan menu home terdapat beberapa pilihan yaitu pilihan untuk menampilkan Sejarah Kabupaten Langkat. Halaman Sejarah Kabupaten Langkat dapat dilihat pada Gambar 5.5.

Gambar 5.5 Halaman Sejarah Kabupaten Langkat

5.5.5 Tampilan Halaman Profil

Pada tampilan menu home terdapat beberapa pilihan yaitu pilihan untuk menampilkan Profil. Halaman Profil Kabupaten Langkat dapat dilihat pada Gambar 5.6.

Gambar 5.6 Halaman Profil

5.5.6 Tampilan Halaman Login Admin

Pada tampilan selanjutnya ada halaman login admin. Halaman login admin mempunyai username dan password untuk dapat masuk ke halaman berikutnya.

Halaman login admin dapat dilihat pada Gambar 5.7.

Gambar 5.7 Halaman Login Admin 5.5.7 Tampilan Halaman Admin

Pada tampilan selanjutnya ada halaman admin. Halaman admin dikelola untuk merubah maupun menambahkan keterangan lainnya. Halaman login admin dapat dilihat pada Gambar 5.8.

Gambar 5.8 Halaman Admin

5.6 Ringkasan

Sesuai dengan pembicaraan Bab 5 (lima) Implementasi Sistem dapat diringkaskan bahwa hasilnya merupakan software/aplikasi berupa Website Pariwisata Kabupaten Langkat.

BAB 6

KESIMPULAN DAN SARAN

6.1 Kesimpulan

Dari pembahasan bab-bab sebelumnya penulis menarik kesimpulan Sistem Informasi Pariwisata Kabupaten Langkat dibuat dengan menggunakan bahasa pemograman PHP dan MySQL. Pembuatan Website dilakukan memalui beberapa tahapan yaitu studi literatur, pengumpulan data dan sampling. Sistem Informasi yang berupa Website dapat memberi informasi pada masyarakat luas untuk mengetahui kondisi pariwisata daerah Langkat sehingga para turis lokal dan pendatang dapat berkunjung kedaerah pariwisata Langkat.

6.2 Saran

Adapun saran untuk menjadikan Website Pariwisata Kabupaten Langkat menjadi lebih baik lagi adalah sebagai berikut:

1. Diharapkan partisipasi dari pihak Dinas Pariwisata Langkat dalam memelihara dan memperbaharui data dan informasi di dalam Website Pariwisata Langkat.

2. Diharapkan pariwisata Kabupaten Langkat semakin bertambah dan informasi di dalam Website Pariwisata Langkat akan bertambah.

3. Sebaiknya ada pengembangan dari Website yang telah dibuat oleh pihak Dinas Pariwisata Langkat maupun pengembang lainnya.

DAFTAR PUSTAKA

Davis. Gordon B, 1991. Kerangka Dasar Sistem Informasi Manajemen Bagian 1, Jakarta: PT. Pustaka Binamas Pressindo.

Enger. Norman L, 2012. Analisis Sistem Informasi. Yogyakarta Hamacher V.C. dkk, 1981. Computer Organization. Tokyo.

Jogiyanto H.M 1999. Pengenalan Komputer. Jakarta

Madcoms, 2008. Aplikasi Web Database Menggunakan Pemograman PHP dan MySQL. Yogyakarta

Peranginanginan. Kasiman, 2006. Aplikasi Web dengan PHP dan MySQL. Jakarta Sibero, Alexander F. K. 2012. Kitab Suci Web Programing. Yogyakarta:

MediaKom

Sutabri. Tata, 2003. Sistem Informasi Manajemen. Jakarta : Andi Yogyakarta Wardiyanta, 2006. Metode Penelitian Pariwisata. Yogyakarta: Andi Yoeti. H. O. A. dkk, 2006. Pariwisata Budaya. Jakarta

http://pemulabelajar.com/2016/03/pengertian-sublime-text-editor.html

https://rampesteam.blogspot.co.id/2015/09/pengertian-dan-sejarah-mysql.html https://www.langkatkab.go.id/page/9/sejarah

http://kami-anak-stabat.blogspot.co.id/2013/01/peta-langkat-dan-sejarah-langkat.html

http://fauzial-bukhari.blogspot.co.id/2011/07/perancangan-sistem-informasi.html

https://adepuspita28.wordpress.com/2013/10/26/pengertian-data-flow-diagram-dfd-dan-contoh-gambar-dfd/

Lampiran Listing Program

1. Media.php

<?php

error_reporting(0);

session_start();

include "config/koneksi.php";

include "config/fungsi_indotgl.php";

include "config/fungsi_combobox.php";

include "config/library.php";

include "config/fungsi_autolink.php";

include "config/fungsi_rupiah.php";

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

charset=utf-8" />

<title>Pariwisata Kabupaten Langkat</title>

href="template/images/favicon.ico" />

href="template/css/style.css" media="screen" />

href="template/css/common.css" media="screen" />

href="template/css/button.css" media="screen" />

<div class="logo"><img src="template/headerlangkat.png"

/></div>

</div>

$best=mysql_query("SELECT * FROM kategori ORDER BY lihat DESC LIMIT 3");

while($a=mysql_fetch_array($best)){

$harga = format_rupiah($a[harga]);

echo "<li><img

src='foto_kategori/small_$a[gambar]' height='50' width='30' />

<div class='p-info'><a

$kategori=mysql_query("select nama_kategori, kategori.id_kategori, count(kategori.id_kategori) as jml from kategori left join

kategori on kategori.id_kategori=kategori.id_kategori group by nama_kategori");

<h2 id="soConnector"><center>Web Statistik</center></h2>

</div> </div>

</div>

<?PHP include "tengah.php";?>

</div>

</head>

<img src="pariwisata.png" align="center" width="1225"

height="250">

<h2 align="center"> <p align="center"> <a

href="media.php">PARIWISATA KABUPATEN LANGKAT</a> <h2>

</body>

</html>

3. Admin

<?php

error_reporting(0);

session_start();

if (empty($_SESSION[username]) AND empty($_SESSION[passuser])){

echo "<link href='style.css' rel='stylesheet' type='text/css'>

<center>Untuk mengakses modul, Anda harus login <br>";

echo "<a href=index.php><b>LOGIN</b></a></center>";

}

tinyMCE_GZ.init({

plugins : 'style,layer,table,save,advhr,advimage, ...', themes : 'simple,advanced',

languages : 'en', disk_cache : true, debug : false });

</script>

src="../tinymcpuk/tiny_mce_src.js"></script>

tinyMCE.init({

mode : "textareas", theme : "advanced", plugins :

theme_advanced_buttons3_add : "emotions,flash", theme_advanced_toolbar_location : "top",

theme_advanced_toolbar_align : "left",

theme_advanced_statusbar_location : "bottom", extended_valid_elements :

"hr[class|width|size|noshade]",

file_browser_callback : "fileBrowserCallBack", paste_use_dialog : false,

theme_advanced_resizing : true,

theme_advanced_resize_horizontal : false,

theme_advanced_link_targets : "_something=My somthing;_something2=My somthing2;_something3=My somthing3;",

apply_source_formatting : true });

function fileBrowserCallBack(field_name, url, type, win) { var connector =

"../../filemanager/browser.html?Connector=connectors/php/connector .php";

var enableAutoTypeSelection = true;

var cType;

tinymcpuk_field = field_name;

tinymcpuk = win;

switch (type) { case "image":

cType = "Image";

break;

case "flash":

cType = "Flash";

break;

case "file":

cType = "File";

break;

}

if (enableAutoTypeSelection && cType) { connector += "&Type=" + cType;

}

window.open(connector, "tinymcpuk",

"modal,width=600,height=400");

}

</script>

</head>

<li><a href='logout.php'>Logout</a></li>

</ul>

</div>

<?php include "content.php"; ?>

</div>

href="css/style.css" />

<style>

body {background: url(images/blurred.jpg) no-repeat center top;

-webkit-background-size: cover;

if (form.username.value == ""){

alert("Anda belum mengisikan Username.");

form.username.focus();

return (false);

}

if (form.password.value == ""){

alert("Anda belum mengisikan Password.");

form.password.focus();

<form name="login" action="cek_login.php"

method="POST" onSubmit="return validasi(this)" class="form-3">

<label for="login">Username</label>

<input type="text" name="username" id="login"

placeholder="Username">

</p>

<label for="password">Password</label>

<input type="password" name="password" id="password"

placeholder="Password">

</p>

if (empty($_SESSION['username']) AND empty($_SESSION['passuser'])){

echo "<link href='style.css' rel='stylesheet' type='text/css'>

<center>Untuk mengakses modul, Anda harus login <br>";

echo "<a href=../../index.php><b>LOGIN</b></a></center>";

}

<body>

</body>

</html>

6. Fungsi tengah.php

function validasi(form){

function validasi2(form2){

if (form2.email.value == ""){

alert("Anda belum mengisikan Email.");

form2.email.focus();

return (false);

}

if (form2.password.value == ""){

alert("Anda belum mengisikan Password.");

form2.password.focus();

return (false);

}

return (true);

}

function harusangka(jumlah){

var karakter = (jumlah.which) ? jumlah.which : event.keyCode if (karakter > 31 && (karakter < 48 || karakter > 57))

// Halaman utama (Home) if ($_GET[module]=='home'){

<div class="slides_container">';

$sql=mysql_query("SELECT * FROM kategori ORDER BY id_kategori DESC LIMIT 5");

while ($r=mysql_fetch_array($sql)){

$deskripsi=substr($r[deskripsi],50,50);

echo"

<div class='imgeslider'><img

src='foto_kategori/$r[gambar]' alt='lapy' title='product' width='220' height='240' />

<h1>$r[nama_kategori]</h1>

href='media.php?module=detailkategori&id=$r[id_kategori]'>

Click Here <span></span></a></div>

</div>";

echo "<div class='center_title_bar'></div>";

$sql=mysql_query("SELECT * FROM kategori ORDER BY id_kategori DESC LIMIT 0");

while ($r=mysql_fetch_array($sql)){

echo " <div class='product-info'>

//MODULE INI DIGUNAKAN UNTUK MEMBUAT MENU BARU////////////////////////////////////

elseif ($_GET[module]=="tes") {

//include digunakan untuk memanggil file include "tes.php";

}

//Module Warning

elseif ($_GET[module]=='warning') {

echo "<div id='info'>! Untuk Melakukan Hal ini Anda Harus Login Terlebih Dahulu <a

href='media.php?module=login'>disini</a></div>";

}

// Modul detail produk

elseif ($_GET[module]=='detailkategori'){

// Tampilkan detail kategori berdasarkan kategori yang dipilih

$detail=mysql_query("SELECT * FROM kategori,kategori WHERE

kategori.id_kategori=kategori.id_kategori

AND id_kategori='$_GET[id]'");

$r = mysql_fetch_array($detail);

include "diskon_stok.php";

echo "

<div class='img'><a href='foto_produk/$r[gambar]'><img

src='foto_kategori/$r[gambar]' border='0' width='230' height='210'/></a><br/>

// Modul kategori per kategori

elseif ($_GET[module]=='detailkategori'){

// Tampilkan nama kategori

$sq = mysql_query("SELECT nama_kategori from kategori where id_kategori='$_GET[id]'");

$n = mysql_fetch_array($sq);

echo "<div class='center_title_bar'>Kategori:

$n[nama_kategori]</div>";

// Tampilkan daftar produk yang sesuai dengan kategori yang dipilih

$sql = mysql_query("SELECT * FROM kategori WHERE id_kategori='$_GET[id]'

ORDER BY id_kategori DESC LIMIT 9");

$jumlah = mysql_num_rows($sql);

// Apabila ditemukan kategori dalam kategori if ($jumlah > 0){

while ($r=mysql_fetch_array($sql)){

// Modul profil

elseif ($_GET[module]=='profilkami'){

// Data profil mengacu pada id_modul=43

$profil = mysql_query("SELECT * FROM modul WHERE id_modul='1'");

$r = mysql_fetch_array($profil);

echo "

// Modul hasil pencarian kategori elseif ($_GET['module']=='hasilcari'){

// menghilangkan spasi di kiri dan kanannya $kata = trim($_POST['kata']);

// mencegah XSS

$kata = htmlentities(htmlspecialchars($kata), ENT_QUOTES);

// pisahkan kata per kalimat lalu hitung jumlah kata $pisah_kata = explode(" ",$kata);

$jml_katakan = (integer)count($pisah_kata);

$jml_kata = $jml_katakan-1;

$cari = "SELECT * FROM kategori WHERE " ; for ($i=0; $i<=$jml_kata; $i++){

$cari .= "deskripsi LIKE '%$pisah_kata[$i]%' OR nama_produk LIKE '%$pisah_kata[$i]%'";

if ($i < $jml_kata ){

$cari .= " OR ";

} }

$cari .= " ORDER BY id_kategori DESC LIMIT 7";

$hasil = mysql_query($cari);

$ketemu = mysql_num_rows($hasil);

echo "<div class='center_title_bar'>Hasil Pencarian</div>";

if ($ketemu > 0){

echo "<div class='prod_details_cari'>Ditemukan <b>$ketemu</b>

produk dengan kata <font style='background-color:#00FFFF'><b>$kata</b></font> : </div>";

while($t=mysql_fetch_array($hasil)){

// Tampilkan hanya sebagian isi produk

$isi_produk = htmlentities(strip_tags($t['deskripsi']));

// mengabaikan tag html

$isi = substr($isi_kategori,0,250); // ambil sebanyak 250 karakter

$isi = substr($isi_kategori,0,strrpos($isi," ")); //

potong per spasi kalimat

echo "<div class='prod_box_big'>

<br />$isi ... <a

echo "<p>Tidak ditemukan kategori dengan kata

<b>$kata</b></p>";

} }

// Modul hubungi aksi

elseif ($_GET[module]=='hubungiaksi'){

$nama=trim($_POST['nama']);

$email=trim($_POST['email']);

$subjek=trim($_POST['subjek']);

$pesan=trim($_POST['pesan']);

echo "<div id='info'>";

if (empty($subjek)){

echo "Anda belum mengisikan SUBJEK<br />

<a href=javascript:history.go(-1)><b>Ulangi Lagi</b>";

}

elseif (empty($pesan)){

echo "Anda belum mengisikan PESAN<br />

<a href=javascript:history.go(-1)><b>Ulangi Lagi</b>";

} else{

if(!empty($_POST['kode'])){

if($_POST['kode']==$_SESSION['captcha_session']){

mysql_query("INSERT INTO hubungi(id_kustomer, subjek,

<div class='product_title_big'>Terimakasih</div>

<div>

<br />Terimakasih telah menghubungi kami.<br /><br /> </div>

</div>

</div>";

}else{

echo "Kode yang Anda masukkan tidak cocok<br />

<a href=javascript:history.go(-1)><b>Ulangi Lagi</b></a>";

} }else{

echo "Anda belum memasukkan kode<br />

<a href=javascript:history.go(-1)><b>Ulangi Lagi</b></a>";

elseif ($_GET[module]=='login') { if ($_GET[act]=='aksilogin') { echo "<div id='info'>";

$email = $_POST['email'];

$password = md5($_POST['password']);

$sql = "SELECT * FROM kustomer WHERE email='$email' AND password='$password'";

$hasil = mysql_query($sql);

$r = mysql_fetch_array($hasil);

if(mysql_num_rows($hasil) == 0){

echo "Email atau Password Anda tidak benar<br />";

} else{

session_start();

$_SESSION[email]= $r[email];

$_SESSION[password]= $r[password];

echo "<script> alert('Silahkan Berbelanja Di Toko Kami');window.location='index.php'</script>\n";

<h2>Form Login</h2>

<form name=form2

action=media.php?module=login&act=aksilogin method=POST onSubmit=\"return validasi2(this)\">

<table>

<tr><td>Email</td><td> <input type=text name=email size=30></td></tr>

<tr><td>Password</td><td> <input type=password name=password size=30></td></tr>

<tr><td><input type='submit' class='button' value='Login' id='submit'></td><td align=right><a

// Modul lupa password

elseif ($_GET[module]=='lupapassword'){

echo "<div class='center_title_bar'>Lupa Password</div>";

echo "<div class='login-box'>

<table>

<tr><td>Masukkan Email Anda</td><td> <input type=text name=email size=30></td></tr>

</table>

</form>

</div>";

}

// Modul kirim password

elseif ($_GET[module]=='kirimpassword'){

// Cek email kustomer di database

$cek_email=mysql_num_rows(mysql_query("SELECT email FROM kustomer WHERE email='$_POST[email]'"));

// Kalau email tidak ditemukan if ($cek_email == 0){

echo "Email <b>$_POST[email]</b> tidak terdaftar di database kami.<br />

<a href=javascript:history.go(-1)><b>Ulangi Lagi</b></a>";

} else{

$password_baru = substr(md5(uniqid(rand(),1)),3,10);

// ganti password kustomer dengan password yang baru (reset password)

$query=mysql_query("update kustomer set

password=md5('$password_baru') where email='$_POST[email]'");

// dapatkan email_pengelola dari database

$sql2 = mysql_query("select email_pengelola from modul where id_modul='43'");

$j2 = mysql_fetch_array($sql2);

$subjek="Password Baru";

$pesan="Password Anda yang baru adalah <b>$password_baru</b>";

// Kirim email dalam format HTML

$dari = "From: $j2[email_pengelola]\r\n";

$dari .= "Content-type: text/html\r\n";

// Kirim password ke email kustomer

mail($_POST[email],$subjek,$pesan,$dari);

echo "<div class='center_title_bar'>Kirim Password</div>

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

-webkit-box-shadow: 0px 0px 2px 2px rgba(198, 198, 198, .5);

box-shadow: 0px 0px 2px 2px rgba(198, 198, 198, .5);

background:#fff;

border-radius:5px;

border:1px solid #cfcfcf;

color:#c6c6c6;

/*---*/

/* Home page content starts now */

.primary-section { overflow:hidden;

}

.logo {

float:left;

margin:11px 0 0 16px;

}

.header-aside span { float:left;

.header-aside ul { float: right;

overflow:hidden;

margin-right:9px;

}

.header-aside ul li { float:left;

margin-left:15px;

}

.header-aside ul li a {

font:12px/26px Arial, Helvetica, sans-serif;

display:block;

color:#454;

text-transform:uppercase;

}

.border {

background:url(../images/divider.jpg) right center no-repeat;

height:24px;

margin-top: 8px;

padding-right: 8px;

}

.header-aside ul li.carts { width: 165px;

display:block;

padding:10px;

padding:5px 0 0 10px;

position:relative;

border-radius:5px;

height:32px;

z-index:1;

background:url(../images/cart-bg.png) left top repeat-x;

} .log {

padding:0px 0 0 17px;

}

.user {

background:url(../images/user.jpg) left 7px no-repeat;

padding:7px 0 0 17px;

}

.cart {

background:url(../images/cart-icon.png) left top no-repeat;

height:26px;

}

.header-aside ul li.carts a { font-size:14px;

margin: 17px 10px 0;

border-radius: 5px;

overflow:hidden;

min-height:38px;

background: #CF2317;

background: linear-gradient(#CF2317, #d8493f);

-pie-background: linear-gradient(#CF2317, #d8493f);

}

.navigation li { float:left;

background:url(../images/home.png) center no-repeat;

text-indent:-9999px;

}

.search-box li input { padding:0 5px;

.latest-product h2 { width: 221px;

border-radius:5px 5px 0 0;

background: #4E4E4E;

text-align:center;

background: linear-gradient(#4E4E4E, #060606);

-pie-background: linear-gradient(#4E4E4E, #060606);

padding:8px 0;

}

.latest-product ul {

margin:11px 11px 0 10px;

font-size:12px;

}

.latest-product ul li {

border-bottom:1px dotted #7c7b7b;

overflow:hidden;

.latest-product ul li img { float:left;

margin-top:8px;

}

.p-info {

float:right;

}

background: url(../images/cell-icon.jpg) right center no-repeat;

display:block;

margin-right:11px;

}

.latest-product a { font-size:15px;

float:right;

color:#0d0d0d;

line-height:20px;

}

.latest-product a span { color:#d74338;

margin: 6px 11px 0 14px !important;

}

background:url(../images/m-icon.jpg) left center no-repeat;

padding-left:28px;

border:1px solid #dedede;

}

.f-shadow {

overflow:hidden;

margin:20px 0 0 12px;

}

.fc-shdw {

float:left !important;

background:url(../images/face-s.jpg) left top no-repeat;

width:41px;

display:block;

.platform span { color:#3b5998;

display:block;

font-family:Arial, Helvetica, sans-serif;

font-size:13px;

border-top: 1px dotted #7C7B7B;

margin:8px 9px 0;

color: #000;

}

.facebook-text span { font-size:11px;

line-height:14px;

display:block;

margin:10px 0 0 9px;

}

.facebook-text ul { overflow:hidden;

margin: 3px 0 5px 10px;

}

.facebook-text ul li { float:left;

margin:0 4px 0 0;

padding:0;

border:none;

}

.facebook-text ul li img { display:block;

margin:0 0 -3px 0;

float:none;

Dalam dokumen SISTEM INFORMASI PARIWISATA KABUPATEN LANGKAT SUMATERA UTARA BERBASIS WEBSITE TUGAS AKHIR SEREPINA L TOBING (Halaman 56-0)