• Tidak ada hasil yang ditemukan

Sistem Informasi Objek Wisata Kabupaten Tapanuli Utara Berbasis Web

N/A
N/A
Protected

Academic year: 2017

Membagikan "Sistem Informasi Objek Wisata Kabupaten Tapanuli Utara Berbasis Web"

Copied!
92
0
0

Teks penuh

(1)

LAMPIRAN LISTING PROGRAM WEBSITE 1.Halaman Admin <?php require "library/fungsi.php"; session_start(); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template">

<meta name="author" content="GeeksLabs">

<meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal">

<link rel="shortcut icon" href="img/favicon.png">

<title>Login Sistem Informasi Objek Wisata Kabupaten Tapanuli Utara</title>

<!-- Bootstrap CSS -->

<link href="assets/foradmin/css/bootstrap.min.css" rel="stylesheet">

<!-- bootstrap theme -->

<link href="assets/foradmin/css/bootstrap-theme.css" rel="stylesheet">

<!--external css--> <!-- font icon -->

<link href="assets/foradmin/css/elegant-icons-style.css" rel="stylesheet" />

<link href="assets/foradmin/css/font-awesome.css" rel="stylesheet" />

<!-- Custom styles -->

<link href="assets/foradmin/css/style.css" rel="stylesheet">

<link href="assets/foradmin/css/style-responsive.css" rel="stylesheet" />

<!-- HTML5 shim and Respond.js IE8 support of HTML5 --> <!--[if lt IE 9]>

(2)

</head> <?php

if(isset($_POST["tombol"]) && $_POST["tombol"] == "Login") {

if(isset($_POST["username"])&&isset($_POST["password"])) {

$query = "select * from tbl_login where

username='".$_POST["username"]."' and password=md5('".$_POST["password"]."')";

$conn = mysqli_query($koneksi, $query); while($data = mysqli_fetch_array($conn)) {

$_SESSION["id"] = $data['id'];

$_SESSION["username"] = $data['username'];

$_SESSION["password"] = $data['password'];

$_SESSION["nama"] = $data['nama']; } navigasi_login(); } } navigasi_login(); ?> <body class="login-img3-body"> <div class="container">

<form class="login-form" method="post" action="panelc.php"> <div class="login-wrap"> <p class="login-img"><i class="icon_lock_alt"></i></p> <div class="input-group"> <span class="input-group-addon"><i class="icon_profile"></i></span>

<input type="text" class="form-control" name="username" placeholder="Username" autofocus>

</div>

<div class="input-group">

<span class="input-group-addon"><i class="icon_key_alt"></i></span>

<input type="password" class="form-control" name="password" placeholder="Password">

</div>

(3)

<input class="btn warning lg btn-block" type="submit" name="tombol" value="Batal">

<?php

if(isset($_POST["username"]) && isset($_POST["password"]))

{

echo '<br><b><font color="red">Username atau Password Tidak Valid!</font></b>';

} ?> </div> </form> </div> </body> </html>

2. Halaman Beranda (index.php) <?php include "library/koneksi.php"; ?> <!DOCTYPE HTML> <html lang="en-US"> <head>

<title>Wisata Tapanuli Utara</title> <meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="assets/forpublic/css/bootstrap.css" /> <link rel="stylesheet" href="assets/forpublic/css/font-awesome.min.css" />

<link rel="stylesheet" href="assets/forpublic/css/linea-icon.css" /> <link rel="stylesheet" href="assets/forpublic/css/fancy-buttons.css" />

<!--=== Google Fonts ===-->

(4)

<link

href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

<!--=== Other CSS files ===-->

<link rel="stylesheet" href="assets/forpublic/css/animate.css" /> <link rel="stylesheet" href="assets/forpublic/css/jquery.vegas.css" />

<link rel="stylesheet" href="assets/forpublic/css/baraja.css" />

<link rel="stylesheet" href="assets/forpublic/css/jquery.bxslider.css" />

<!--=== Main Stylesheets ===-->

<link rel="stylesheet" href="assets/forpublic/css/style.css" /> <link rel="stylesheet" href="assets/forpublic/css/responsive.css" /> <!--=== Color Scheme, three colors are available red.css, orange.css and gray.css ===-->

<link rel="stylesheet" id="scheme-source" href="assets/forpublic/css/schemes/orange.css" />

<!--=== Internet explorer fix ===--> <!-- [if lt IE 9]>

<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif] --> </head> <body> <section id="preloader">

<div class="loading-circle fa-spin"></div> </section>

<div id="header" class="header-section"> <div class="sticky-bar-wrap">

<div class="sticky-section">

<div id="topbar-hold" class="nav-hold container">

<nav class="navbar" role="navigation">

<div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-responsive-collapse">

(5)

<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="site-name navbar-brand" href="#"><span>W</span>isata <span>T</span>apanuli <span>U</span>tara</a>

</div>

<div class="collapse navbar-collapse navbar-responsive-navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="current"><a href="assets/../">Beranda</a></li> <li><a href="wisata.php">Objek Wisata</a></li> <li><a href="berita.php">Berita</a></li> <li><a href="hubungi-kami.php">Hubungi Kami</a></li> </ul> </div> </nav> </div> </div> </div>

<div id="section-home" class="home-section-wrap center">

<div class="section-overlay"></div> <div class="container home">

<div class="row">

<h1 class="well-come">Wisata Tapanuli Utara</h1>

<div class="col-md-8 col-md-offset-2">

<p class="intro-message">Menghantar Kabupaten Tapanuli Utara Menjadi Destinasi Wisata Penting Dan Favorit</p>

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

(6)

<section id="section-feature" class="feature-wrap"> <div class="container features center">

<div class="row">

<div class="col-lg-12">

<ul id="card-ul" class="features-hold baraja-container">

<?php

$query_wisata = "select * from tbl_wisata limit 5";

$conn_wisata = mysqli_query($koneksi, $query_wisata);

while($data_wisata = mysqli_fetch_array($conn_wisata))

{

echo ' <li class="single-feature" title="'.$data_wisata['nama_wisata'].'">

<h4 class="feature-title color-scheme">'.$data_wisata['nama_wisata'].'</h4>

<div class="thumlist" style="background: url(assets/foto/wisata/'.$data_wisata['foto'].') no-repeat center; background-size: cover;"></div>

<br><br>

<a href="wisata-lengkap.php?wisata='.$data_wisata['kode_wisata'].'" class="fancy-button button-line btn-col small vertical">

Lihat

<span class="icon">

<i class="fa fa-search"></i> </span>

</a> </li>

'; }

(7)

<div class="features-control relative">

<button class="control-icon fancy-button button-line no-text btn-col bell" id="feature-prev" title="Previous" >

<span class="icon"> <i class="fa fa-arrow-left"></i> </span> </button> <button class="control-icon fancy-button button-line no-text btn-col zoom" id="feature-expand" title="Expand" > <span class="icon"> <i class="fa fa-expand"></i> </span> </button> <button class="control-icon fancy-button button-line no-text btn-col zoom" id="feature-close" title="Collapse" > <span class="icon"> <i class="fa fa-compress"></i> </span> </button> <button class="control-icon fancy-button button-line no-text btn-col bell" id="feature-next" title="Next" >

<span class="icon"> <i class="fa fa-arrow-right"></i> </span> </button> </div> </div> </div> </div> </section> <?php

$query_berita = "select * from tbl_berita order by tgl_update desc limit 2";

$conn_berita = mysqli_query($koneksi, $query_berita); $no = 1;

while($data_berita = mysqli_fetch_array($conn_berita)) {

(8)

echo '

<section id="step-1" class="section-step step-wrap">

<div class="container step animated" data-animation="bounceInLeft" data-animation-delay="700">

<div class="row">

<div class="col-md-8 step-desc">

<div class="col-md-2 center"> <div class="step-no">

<span class="no-inner">2</span> </div>

</div>

<div class="col-md-10 step-details">

<h3 class="step-title color-scheme">'.$data_berita['judul_berita'].'</h3>

'.substr($data_berita['isi_berita'], 0, 200).'...

<ul class="sub-steps"> <li>

<span class="icon fa fa-calendar-o color-scheme"></span>

<span class="sub-text">'.$data_berita['tgl_update'].'</span>

</li> <li>

<a class="btn icon button-line" style="margin-left: 0px !important;">

(9)

</a> </li>

</ul> </div>

</div> <div class="col-md-4 step-img">

<img src="assets/foto/berita/'.$data_berita['gambar'].'" alt="" />

</div> </div>

</div> </section> ';

} else {

echo '

<section id="step-2" class="section-step step-even step-wrap">

<div class="container step animated" data-animation="bounceInRight" data-animation-delay="700">

<div class="row">

<div class="col-md-8 step-desc">

<div class="col-md-2 center"> <div class="step-no">

<span class="no-inner">1</span> </div>

</div>

<div class="col-md-10 step-details">

(10)

'.substr($data_berita['isi_berita'], 0, 200).'...

<ul class="sub-steps"> <li>

<span class="icon fa fa-calendar color-scheme"></span>

<span class="sub-text">'.$data_berita['tgl_update'].'</span>

</li> <li>

<a class="btn icon button-line" style="margin-left: 0px !important;">

Baca Selengkapnya </a>

</li> </ul> </div>

</div> <div class="col-md-4 step-img">

<img src="assets/foto/berita/'.$data_berita['gambar'].'" alt="" />

</div> </div>

</div> </section> ';

} $no++; }

(11)

<section id="section-video" class="section-video-wrap"> <div class="section-overlay"></div>

<div class="container big-video center animated" data-animation="fadeInLeft" data-animation-delay="700">

<div class="row">

<div class="col-md-12 section-title">

<h3>Keindahan Tapanuli Utara</h3>

</div>

<div class="col-md-10 col-md-offset-1 video-content"> <iframe src="https://www.youtube.com/embed/WCnkXQ2KPls" width="400" height="240"></iframe> </div> </div> </div> </section>

<div id="section-footer" class="footer-wrap"> <div class="container footer center">

<div class="row"> <div class="col-lg-12"> <h4 class="footer-title"> <a class="site-name" href="#"><span>W</span>isata <span>T</span>apanuli <span>U</span>tara</a> </h4> <div class="social-icons"> <ul> <li><a href="#"><i class="fa fa-facebook-square"></i></a></li> <li><a href="#"><i class="fa fa-twitter-square"></i></a></li> <li><a href="#"><i class="fa fa-google-plus-square"></i></a></li> </ul> </div>

<p class="copyright">All rights reserved &copy; 2015</p>

</div> </div>

(12)

<script type="text/javascript" src="assets/forpublic/js/jquery-1.11.1.min.js"></script> <script

type="text/javascript" src="assets/forpublic/js/bootstrap.min.js"></script> <script type="text/javascript" src="assets/forpublic/js/bootstrapValidator.min.js"></script> <script type="text/javascript" src="assets/forpublic/js/modernizr.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.baraja.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.vegas.min.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.bxslider.min.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.ajaxchimp.min.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.nicescroll.min.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.nav.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.appear.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.fitvids.js"></script> <script type="text/javascript" src="assets/forpublic/js/custom.js"></script> </body> </html>

3. Halaman Wisata (wisata.php) <?php include "library/koneksi.php"; ?> <!DOCTYPE HTML> <html lang="en-US"> <head>

<title>Wisata Tapanuli Utara</title> <meta charset="utf-8">

(13)

<link rel="stylesheet" href="assets/forpublic/css/bootstrap.css" />

<link rel="stylesheet" href="assets/forpublic/css/font-awesome.min.css" />

<link rel="stylesheet" href="assets/forpublic/css/linea-icon.css" /> <link rel="stylesheet" href="assets/forpublic/css/fancy-buttons.css" /> <!--=== Google Fonts ===-->

<link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:300,700,400' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Raleway:600,400,300' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

<!--=== Other CSS files ===-->

<link rel="stylesheet" href="assets/forpublic/css/animate.css" /> <link rel="stylesheet" href="assets/forpublic/css/jquery.vegas.css" /> <link rel="stylesheet" href="assets/forpublic/css/baraja.css" />

<link rel="stylesheet" href="assets/forpublic/css/jquery.bxslider.css" /> <!--=== Main Stylesheets ===-->

<link rel="stylesheet" href="assets/forpublic/css/style.css" /> <link rel="stylesheet" href="assets/forpublic/css/responsive.css" />

<!--=== Color Scheme, three colors are available red.css, orange.css and gray.css ===-->

<link rel="stylesheet" id="scheme-source" href="assets/forpublic/css/schemes/orange.css" />

<!--=== Internet explorer fix ===--> <!-- [if lt IE 9]>

<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif] --> </head> <body> <section id="preloader">

<div class="loading-circle fa-spin"></div> </section>

(14)

<div class="sticky-bar-wrap"> <div class="sticky-section">

<div id="topbar-hold" class="nav-hold container"> <nav class="navbar" role="navigation">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

data-target=".navbar-responsive-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

<a class="site-name

navbar-brand" href="#"><span>W</span>isata <span>T</span>apanuli <span>U</span>tara</a>

</div>

<div class="collapse navbar-collapse navbar-responsive-collapse">

<ul class="nav navbar-nav navbar-right">

<li><a href="assets/../">Beranda</a></li>

<li class="current"><a href="wisata.php">Objek Wisata</a></li>

<li><a href="berita.php">Berita</a></li> <li><a href="hubungi-kami.php">Hubungi Kami</a></li> </ul> </div> </nav> </div> </div> </div> </div>

<section id="section-services" class="services-wrap"> <div class="container services">

<div class="row">

(15)

<h3>Objek Wisata</h3> </div>

</div> </div>

</section> <?php

$query_wisata = "select * from tbl_wisata order by kode_wisata desc";

$conn_wisata = mysqli_query($koneksi, $query_wisata); $no = 1;

while($data_wisata = mysqli_fetch_array($conn_wisata)) {

if($no % 2 == 1) {

echo '

<section id="step-1" class="section-step class="section-step-wrap">

<div class="container step animated" data-animation="bounceInLeft" data-animation-delay="700">

<div class="row"> <div class="col-md-8 step-desc">

<div class="col-md-2 center">

<div class="step-no">

<span class="no-inner">'.$no.'</span> </div>

</div> <div class="col-md-10 step-details">

<h3 class="step-title color-scheme">'.$data_wisata['nama_wisata'].'</h3> '.substr($data_wisata['deskripsi'], 0, 200).'...

<ul class="sub-steps"> <li>

(16)

href="wisata-lengkap.php?wisata='.$data_wisata['kode_wisata'].'" class="btn icon button-line" style="margin-left: 0px !important;">

Baca Selengkapnya </a> </li> </ul> </div> </div> <div class="col-md-4 step-img"> <img src="assets/foto/wisata/'.$data_wisata['foto'].'" alt="" />

</div> </div> </div> </section> '; } else { echo '

<section id="step-2" class="section-step class="section-step-even class="section-step-wrap">

<div class="container step animated" data-animation="bounceInRight" data-animation-delay="700">

<div class="row"> <div class="col-md-8 step-desc"> <div class="col-md-2 center"> <div class="step-no"> <span class="no-inner">'.$no.'</span> </div> </div> <div class="col-md-10 step-details">

(17)

'.substr($data_wisata['deskripsi'], 0, 200).'...

<ul class="sub-steps"> <li>

<a href="wisata-lengkap.php?wisata='.$data_wisata['kode_wisata'].'" class="btn icon button-line" style="margin-left: 0px !important;">

Baca Selengkapnya </a>

</li> </ul>

</div> </div>

<div class="col-md-4 step-img">

<img src="assets/foto/wisata/'.$data_wisata['foto'].'" alt="" />

</div> </div>

</div> </section> ';

} $no++; }

?>

<div id="section-footer" class="footer-wrap"> <div class="container footer center">

<div class="row">

<div class="col-lg-12">

<h4 class="footer-title">

<a class="site-name"

href="#"><span>W</span>isata <span>T</span>apanuli <span>U</span>tara</a>

(18)

<div class="social-icons"> <ul>

<li><a href="#"><i class="fa fa-facebook-square"></i></a></li>

<li><a href="#"><i class="fa fa-twitter-square"></i></a></li>

<li><a href="#"><i class="fa fa-google-plus-square"></i></a></li>

</ul> </div>

<p class="copyright">All rights reserved &copy; 2015</p>

</div> </div>

</div> </div>

(19)

<script type="text/javascript" src="assets/forpublic/js/custom.js"></script>

</body> </html>

4. Halaman galeri single (galeri_singel.php) <?php

include "library/koneksi.php"; if(isset($_GET['foto'])) {

$query_foto = "select * from tbl_gambar where kode_foto = '".$_GET['foto']."'";

$conn_foto = mysqli_query($koneksi, $query_foto); $data_foto = mysqli_fetch_array($conn_foto); } else { header('Location: wisata.php'); } ?> <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8">

<title><?php echo $data_foto['nama']; ?></title>

<link rel="stylesheet" href="assets/forpublic/css/bootstrap.css" /> <link rel="stylesheet" href="assets/forpublic/css/style.css" /> </head> <body> <div class="container"> asdkskdl <div class="portfolio-project"> <div class="row">

<div class="col-md-10 col-md-offset-1 center section-title">

<h4><?php echo $data_foto['nama']; ?></h4>

</div>

<div class="col-md-10 col-md-offset-1 center section-title">

<img src="<?php echo 'assets/foto/wisata/'.$data_foto['nama'].''; ?>" alt="" />

(20)

</div> </div>

</div> </body> </html>

5. Halaman hubungi kami (hubungi_kami.php) <!DOCTYPE HTML>

<html lang="en-US"> <head>

<title>Wisata Tapanuli Utara</title> <meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="assets/forpublic/css/bootstrap.css" /> <link rel="stylesheet" href="assets/forpublic/css/font-awesome.min.css" />

<link rel="stylesheet" href="assets/forpublic/css/linea-icon.css" /> <link rel="stylesheet" href="assets/forpublic/css/fancy-buttons.css" />

<!--=== Google Fonts ===-->

<link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:300,700,400' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Raleway:600,400,300' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

<!--=== Other CSS files ===-->

<link rel="stylesheet" href="assets/forpublic/css/animate.css" /> <link rel="stylesheet" href="assets/forpublic/css/jquery.vegas.css" />

<link rel="stylesheet" href="assets/forpublic/css/baraja.css" />

<link rel="stylesheet" href="assets/forpublic/css/jquery.bxslider.css" />

<!--=== Main Stylesheets ===-->

(21)

<link rel="stylesheet" id="scheme-source" href="assets/forpublic/css/schemes/orange.css" />

<!--=== Internet explorer fix ===--> <!-- [if lt IE 9]>

<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif] --> </head> <body> <section id="preloader">

<div class="loading-circle fa-spin"></div> </section>

<div id="header" class="header-section"> <div class="sticky-bar-wrap">

<div class="sticky-section">

<div id="topbar-hold" class="nav-hold container">

<nav class="navbar" role="navigation">

<div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="site-name navbar-brand" href="#"><span>W</span>isata <span>T</span>apanuli <span>U</span>tara</a>

</div>

<div class="collapse navbar-collapse navbar-responsive-navbar-collapse">

(22)

<li><a href="assets/../">Beranda</a></li> <li><a href="wisata.php">Objek Wisata</a></li> <li><a href="berita.php">Berita</a></li> <li class="current"><a href="hubungi-kami.php">Hubungi Kami</a></li>

</ul> </div> </nav> </div> </div> </div> </div>

<section id="section-contact" class="contact-wrap"> <div class="section-overlay"></div>

<div class="container contact center animated" data-animation="flipInY" data-animation-delay="1000">

<div class="row">

<div class="col-md-8 col-md-offset-2"> <div class="10 col-md-offset-1 center section-title">

<h3>Kirim Pesan</h3> </div>

<div class="confirmation">

<p><span class="fa fa-check"></span></p>

</div>

<form class="contact-form support-form">

<div class="col-lg-12">

<input id="name" class="input-field form-item field-name" type="text" required="required" name="contact-name" placeholder="Nama" />

<input id="email" class="input-field form-item field-email" type="email" required="required" name="contact-email" placeholder="Email" />

(23)

<textarea

id="message" class="textarea-field form-item field-message" rows="10" required="required" name="contact-message" placeholder="Pesan"></textarea>

</div>

<button type="submit" class="fancy-button button-line button-white large zoom subform">

Send message <span class="icon"> <i class="fa fa-paper-plane-o"></i> </span> </button> </form> </div> </div> </div> </section>

<div style="width: 100%"> <iframe

src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d510380.735 2375237!2d98.78924662350833!3d2.0157131764819662!2m3!1f0!2f0!3f0!3m2! 1i1024!2i768!4f13.1!3m3!1m2!1s0x302e6afe1293bcf5%3A0x3039d80b220d160 !2sKabupaten+Tapanuli+Utara%2C+Sumatera+Utara!5e0!3m2!1sid!2sid!4v1467 974813699" width="100%" height="600" frameborder="1" style="border:0" allowfullscreen></iframe>

</div>

<div id="section-footer" class="footer-wrap"> <div class="container footer center">

(24)

</div>

<p class="copyright">All rights reserved &copy; 2015</p>

</div> </div>

</div> </div>

<script type="text/javascript" src="assets/forpublic/js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="assets/forpublic/js/bootstrap.min.js"></script> <script type="text/javascript" src="assets/forpublic/js/bootstrapValidator.min.js"></script> <script type="text/javascript" src="assets/forpublic/js/modernizr.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.easing.1.3.js"></script>

<!--==== Slider and Card style plugin ====-->

<script type="text/javascript" src="assets/forpublic/js/jquery.baraja.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.vegas.min.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.bxslider.min.js"></script>

<!--==== MailChimp Widget plugin ====-->

<script type="text/javascript" src="assets/forpublic/js/jquery.ajaxchimp.min.js"></script>

<!--==== Scroll and navigation plugins ====-->

<script type="text/javascript" src="assets/forpublic/js/jquery.nicescroll.min.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.nav.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.appear.js"></script> <script type="text/javascript" src="assets/forpublic/js/jquery.fitvids.js"></script>

<!--==== Custom Script files ====-->

<script type="text/javascript" src="assets/forpublic/js/custom.js"></script>

(25)

DAFTAR PUSTAKA

Azwar, 1998. Pelayanan Rumah Sakit . http://www.library.upnvj.ac.id. Diakses 23

Maret 2015.

Bernard, R. S. Prijono, A., dan Agustaf, R. 2005. Mudah dan Cepat Menguasai

Pemrograman Web. Bandung: Informatika Bandung.

Disainweb, 2012 Pengertian website.

http://desainweb.com/site/pengertian-website-apa-ituwebsite. Diakses 23 Maret 2015

ST, Anhar .2010. Panduan Menguasai PHP dan MySQL Secara Otodidak. Jakarta

: Media Kita.

Suprianto, Dodit. 2008.Buku Pintar pemrograman php. Bandung : Oase media.

Wikipedia, 2012. Hotel. http://id.wikipedia.org/wiki/Hotel/. Diakses 20 Mei 2016.

Yuanita, Agnes Heri Tri, 2006. Membuat Website Interaktif Dengan Macromedia

(26)

BAB 3

PERANCANGAN SISTEM

3.1 PerancanganSistem

Perancangan sistem adalah tahap setelah analisis dari siklus pengembangan sistem, pendefenisian darikebutuhan-kebutuhan fungsional persiapan untuk rancang bangun implementasi menggambarkan bagaimana suatu system dibentuk yang dapat berupa penggambaran, perencanaan dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah kedalam satu kesatuan yang utuh dan berfungsi termasuk mengkonfigurasi perangkat lunak dan perangkat keras dari suatu sistem.

3.2 MetodePengembanganSistem

Dalam pembuatan Tugas Akhir ini, penulis menggunakan Metode Fabbri dan Schwan yang terdiridari :

1. Studi Kelayakan

Studi kelayakan bertujuan untuk mengidentifikasi apakah system informasi yang akan dibuat sesuai dengan kebutuhan.

(27)

Rencana pendahuluan bertujuan untuk menentukan lingkup sistem yang akan ditangani.

3. Analisis Sistem

Penguraian dari suatu system informasi yang utuh kedalam bagian-bagian komponennnya dengan maksud untuk mengidentifikasi dan mengevaluasi permasalahan-permasalahan, kesempatan-kesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikan.

4. Perancangan Sistem

Pendefinisian dari kebutuhan-kebutuhan fungsional, persiapan untuk rancang bangun implementasi, menggambarkan bagaimana suatu system dibentuk serta mengkonfigura sikomponen-komponen perangkat lunak dan perangkat keras dari suatu sistem.

5. Implementasi Sistem

Tahap untuk meletakkan sistem supaya siap untuk dijalankan.

3.3 HasilPerancangan

Dalam hasil perancangan ini dapat dibagi menjadi beberapa poin-poin dalam pembuatan sebuah web ini.

3.3.1 BaganBerjenjang

(28)

3.3.2 Use Case Diagram

Jika anda sudah lama bergelut dalam dunia IT pasti tidak asing lagi dengan apa itu Use Case. Use Case merupakan sebuah komponen wajib dalam program, dengan adanya use case pengguna dapat melihat gambaran dari kegunaan aplikasi tersebut

3.3.3 Pengertian Use Case

Use case diagram adalah suatu model yang dangat fungsional dalam sebuah sistem yang menggunakan actor dan use case. Sedangkan pengertian dari use case sendiri adalah layanan atau fungsi-fungsi yang tersedia pada sistem untuk penggunannya. Use case diagram menggambarkan efek fungsionalitas yang telah diharapkan oleh system, use case diagram dapat sangat membantu bila kita sedang menyusun requitment sebuah sistem, mengkomunikasikan sebuah rancangan aplikasi dengan konsumen, serta merancang test case untuk semua feature yang ada pada sistem. Aturannya, sebuah use case dapat di masukan lebih dari use case lain, sehingga duplikasi fungsionalitas dapat dihindaro dengan cara menarik keluar fungsional yang common.

3.3.4 Deskripsi Use Case Diagram

1. Sebuah use case merupakan dimana sebuah sistem dapat digunakan untuk memenuhi satu atau lebih kebutuhan dari pemakai.

2. Use case sendiri merupakan fase awal yang sangat tepat untuk setiap fase pengen\mbangan sistem berbasis objek, design testing, dan dokumentasi.

(29)

4. Use case sendiri menentukan nilai yang diberikan sistem kepada pemakai. 5. Use case hanya menetapkan apa seharusnya yang dikerjakan oleh si sistem, yaitu menyangkut dengan kebutuhan fungsional sistem.

6. Use case sendiri tidak menen tukan dengan kebutuhan nonfungsional. Dimaksut dengan kebutuhan nonfungsional misal bahasa pemrograman, sasaran kerja dan lain sebagainya.

3.3.5Macam Komponen-Komponen Use Case Diagram 1. Actor

Sebenernya Actor bukanlah bagian dari diagram, namun untuk dapat terciptanya suatu use case diagram diberikan beberapa actor, dimana actor tersebut menjelaskan seseorang atau sesuatu (sperti perangkat, system lain) yang berinteraksi dengan system. Sebuah actor mungkin hanya memberikan informasi inputan pada system, hanya menerima informasi dari system atau keduanya menerima dan member informasi pada system, actor hanya berinteraksi dengan use case tetapi tidak memiliki control atas use case. Actor digambarkan secara umum atau spesifik, dimana untuk membedakannya anda dapat menggunakan relationship.

Ada beberapa kemungkinan yang menyebabkan actor tersebut terkait dengan sistem antara lain :

1. Yang berkepentingan terhadap system dimana adanya arus informasi baik yang diterima maupun yang dia inputkan ke sistem.

(30)

4. System lain yang berinteraksi dengan sistem yang akan dibuat

2. Use Case

Use case merupakan gambaran fungsional dari suatu sistem, sehingga antara konsumen dan pengguna sistem paham dan mengerti mengenai kegunaan sistem yang akan dibangun.

Relasi dalam Use CaseBerikut adalah relasi dalam use case dan kegunaannya : Assoclation : Hubungan link antar element-element.

Generalization : Atau biasa disebut dengan inheritance (pewarisan), adalah sebuah elemen yang merupakan spesifikasi dari elemen lainnya

Dependency :Merupakan elemen tergantung dari beberapa cara kepada elemen-elemen lainnya.

Aggregation : Bentuk asosiation dimana sebuah elemen berisi elemen lainnya.

Contoh Use Case Diagram

Kebutuhan Aktor Nama Use Case

Sistem Harus Menyediakan Halaman Login

Admin. User Login Sistem Menyediakan Halaman Untuk

Memasukan Wisata

Admin. User Insert Table

Sistem Menyediakan Menu Melihat Data Admin. User Lihat Table Sistem Menyediakan Menu Mengubah

Range

[image:30.595.114.518.534.655.2]

Admin Edit Range

(31)

Berdasarkan kasus diatas, maka dapat dijabarkan dalam suatu pemodelan Use case. Model use case ini terdiri dari aktor dan kasus penggunaan. Aktor mewakili pengguna sistem yang berinteraksi dengan sistem tersebut. Penggunaan use case ini mewakili perilaku dari sistem, skenario bahwa sistem berjalan melalui tanggapan dari seorang aktor. Use case pada kasus pemanfaatan sistem pakar seleksi karyawan menggunakan metode Tsukamoto sesuai dengan gambar.

[image:31.595.151.496.257.451.2]

Admin user

Gambar 3.2 Alur Use Case

Pada use case diatas, maka dapat mendeskripsikan hal-hal sebagai berikut ini: 1. Admin adan User merupakan aktor.

2. Admin dan User melakukan login pada aplikasi sistem pakar seleksi karyawan menggunakan metode Tsukamoto.

3. Admin dan User melakukan pemasukan data pada aplikasi sistem pakar seleksi karyawan menggunakan metode Tsukamoto.

4. Admin dan User melihat data yang telah dimasukkan. 5. Admin dapat melakukan pengubahan range niali.

login

Insert wisata

Lihat wisata

Hubungi kami

(32)

3.4Diagram Alir (Flowchart)

Flowchart atau diagram alir merupakan sebuah diagram dengansimbol-simbolgrafis yang menyatakan aliran algoritma atau proses yang menampilkan langkah-langkah yang disimbolkan dalam bentuk kotak, beserta urutannya dengan menghubungkan masing-masing langkah tersebut menggunakan tanda panah. Diagram ini bisa member solusi selangkah demi selangkah untuk penyelesaian masalah yang ada didalam proses atau algoritma tersebut.

[image:32.595.255.372.438.712.2]

Tujuan utama penggunaan flowchart adalah untuk menyederhanakan rangkaian proses atau prosedur untuk memudahkan pemahaman pengguna terhadap informasi tersebut. Oleh karena itu, design sebuah flowchart harus ringkas, jelas, danlogis.

(33)
[image:33.595.228.392.107.382.2]

Gambar 3.4 Flowchart Tambah Tempat Wisata

[image:33.595.231.395.455.686.2]
(34)

3.5Perancangan Database

[image:34.595.107.514.223.363.2]

Desain database darisisteminiterdiridarilima tabel. Berikutadalahtabel-tabeldalamsistemtersebut:

Tabel 3.1 Tabel Admin

Field Name Type Field Size Keterangan

Id Int 11 Primary key

Nama Varchar 50

Password Varchar 100

Username Varchar 100

Tabel 3.2 TabelBerita

Field Name Type Field Size Keterangan

Kode_berita Varchar 100 Primary key Judul_berita Varchar 1000

Isi Longtext -

Gambar Varchar 5000

[image:34.595.107.517.641.757.2]

Tgl_update Date -

Tabel 3.3TabelGambar

Field Name Type Field Size Keterangan

Kode_foto Int 11 primery key

Kode_wisata Varchar 10

(35)
[image:35.595.103.519.103.565.2]

Tabel 3.4 Tabel Kritik Dan Saran

id Email topik pesan

[image:35.595.110.519.111.171.2]

1 Lewin.hutasoit25@gmail.com Apa ya..? Isi ajalah yang penting

Tabel 3.5 TabelPesanKunjungan

Field Name Type Field Size Keterangan

Kode_pesanan Int 11 primery key

Email Varchar 500

Tabel 3.6 TabelWisata

Field Name Type Field Size Keterangan

Kode_wisata Varchar 10 primery key

Nama_wisata Varchar 500

Foto Varchar 1000

Deskripsi Longtext -

3.6Rancangan Antarmuka (Interface)

[image:35.595.109.515.416.563.2]
(36)

kanan terdiri dari isi penjelasan dari menu sebelah kiri. Bagian kaki terdiri dari data diri penulis.

3.7Algoritma

Algoritma merupakan langkah-langkah maupun urutan bertahap dan spesifik dari suatu masalah. Algoritma digunakan untuk menganalisa serta menjelaskan urutan dan hubungan antara kegiatan-kegiatan yang akan ditempuh. Selain itu algoritma juga berfungsi untuk menyelesaikan suatu masalah sehingga tercapai suatu tujuan.

Berikut ini merupakan algoritma yang menjadi inti dari perancangan system yaitu: Langkah 1 : Tampilkan halaman index.php lalu klik salah satu menu yang tersedia

a. Beranda b. Objek wisata c. Berita

d. Hubungi kami

Langkah 2 : Klik menu Beranda

Maka akan tampil isi penjelasan tentang Tapanuli Utara

(37)

Maka akan tampil kumpulan daerah-daerah wisata yang ada di tapanuli Utara dan ketika di klik nama daerahnya akan menuju link dimana link tersebut berisi penjelasan tentang daerah wisata tersebut.

Langkah 4 : Klik menu berita

(38)

BAB 4

IMPLEMENTASI SISTEM

4.1 Implementasi Sistem

Implementasi sistem merupakan tahap untuk meletakkan system supaya siap dioperasikan, termasuk juga menulis kode program jika tidak digunakan paket perangkat lunak aplikasi.

4.1.1 Tujuan Implementasi Sistem

Adapun tujuan dari implementasi sistem ini adalah untuk mengetahui sistem yang telah ada sebelumnya dan untuk mengetahui kelebihan dan kekurangan dari sistem yang baru.

4.2Komponen Utama dalam Sistem

Dalam pembuatan Sistem Informasi yang sudah dirancang membutuhkan perangkat keras (hardware), perangkat lunak (software) dan tenaga pelaksana (brainware). Kebutuhan sistem yang dibutuhkan bersifat opsional, yaitu :

(39)

2. Hardisk sebagai media penyimpanan data dan tempat program beroperasi. 3. Memori

4. Monitor 5. Keyboard 6. Mouse 7. Printer 8. Dan lain-lain.

b. Perangkat Lunak (software)

1. Sistem Operasi Windows 7, yaitu menggunakan perangkat lunak (software) PHP, Mysql dan Sublime Text.

2. Anti virus untuk mengetahui terjadinya kerusakan sistem. 3. Dan lain-lain.

c. Tenaga Pelaksana (Brainware) yaitu seorang yang memiliki keahlian yang baik dan mengerti sistem operasi computer untuk menjalankan program.

4.3 Pemeliharaan

Berdasarkan penjelasan dari halaman sebelumnya, diperlukan pemeliharaan sistem agar system tersebut dapat berjalan sebagaimana mestinya. Adapun tujuan dari pemeliharaan system ini adalah sebagai berikut :

(40)

2. Menggantikan pemeliharaan system dengan surve isi sitem jika modifikasi yang diminta relative besar.

4.4Demonstrasi Program

Demonstrasi progam adalah untuk melihat hasil dari program yang sudah dapat dijalankan melalui aplikasi dreamweaver CS 4 dan sublime text yang sudah di koding programnya.

4.4.1Halaman Login Admin

[image:40.595.113.515.471.646.2]

Halaman login ini berisikan form untuk admin. Dimana form ini wajib di isi oleh admin agar bisa menuju kehalaman administer. Form yang di isi adalah username dan password dari admin.

(41)

4.4.2 Halaman Admin

[image:41.595.116.513.222.433.2]

Halaman admin ini merupakan halaman yang didalamnya admin bisa melakukan perubahan pada website yang telah dibuat. Bisa menghapus data pada website dan mengedit nya.

Gambar 4.2 TampilanHalaman Admin

4.4.3. Tampilan Utama Website

(42)
[image:42.595.114.514.84.272.2]

Gambar 4.3 TampilanUtama Website

4.4.4 Halaman Wisata

Halaman wisata ini merupakan halaman setelah halaman utama web ini kali muncul ketika mulai dibuka di web browser. Pada Halaman daerah ini terdapat beberapa slide gambar wisata dimana dapat melihat wisata dan penjelasannya.

[image:42.595.115.515.478.672.2]
(43)

4.4.5 Halaman Berita

[image:43.595.114.516.222.397.2]

Halaman berita ini tempat dimana informasi dan topic yang ingin dilihat, terutama informasi tentang kegiatan-kegiatan pada hari-hari besar yang terdapat di Kabupaten Tapanuli Utara.

Gambar 4.5 Tampilan Halaman Berita

4.4.6 Halaman Hubungi Kami

Mempermudahpengunjung untuk berbagi dengan admin mempermudah perusahaan untuk menghubungi pengunjung,untuk bekerjasama dengan pengunjung.

[image:43.595.115.513.574.720.2]
(44)

BAB 5

KESIMPULAN DAN SARAN

5.1Kesimpulan

Setelah melalukan pembahasan akhirnya penulis dapat membuat kesimpulan sebagai berikut:

1. Website objek wisata Tapanuli Utara ini adalah sarana informasi online yang dapat diakses oleh siapa saja, baik dari pihak sekolah maupun para pengunjung yang mengunjungi website-nya.

2. Perkembangan website pada daerah membuat penulis mengambil inisiatif membuat tugas akhir berupa website

3. Membangun sebuah website yang tidak hanya berdasarkan kebutuhan dari pihak pemberi order semata, melainkan lebih dititikberatkan kepada perkembangan informasi melalui jaringan internet yang bersifat global.

4. Memberikan kemudahan bagi Dinas Pariwisata Kabupaten Tapanuli Utara dalam mengenalkan objek yang terdapat di Kabupaten tersebut.

5.2Saran

(45)

BAB 2

LANDASAN TEORI

2.1Pengertian Komputer

Komputer adalah alat yang dipakai untuk mengolah data menurut prosedur yang telah dirumuskan. Kata computer semula dipergunakan untuk menggambarkan orang yang perkerjaannya melakukan perhitungan aritmatika, dengan tanpa alat bantu, tetapi arti kata ini kemudian dipindahkan kepada mesin itu sendiri. Asal mulanya, pengolahan informasi hampir eksklusif berhubungan dengan masalah aritmatika, tetapi komputer modern dipakai untuk banyak tugas yang tidak berhubungan dengan matematika.

(46)

Kata computer secara umum pernah dipergunakan untuk mendefiniskan orang yang melakukan perhitungan aritmatika, dengan atau tanpa mesin pembantu. Menurut Barnhart Concise Dictionary of Etymology, kata tersebut digunakan dalam bahasa Inggris pada tahun 1646 sebagai kata untuk "orang yang menghitung" kemudian menjelang 1897 juga digunakan sebagai "alat hitung mekanis". Selama Perang Dunia II kata tersebut menunjuk kepada para pekerja wanita Amerika Serikat dan Inggris yang pekerjaannya menghitung jalan artileri perang dengan mesin hitung.

2.1.1 Sejarah Komputer

Sejarah komputer yang perlu untuk diketahui secara detail.Sejarah perkembangan komputer berawal dari penemuan seorang yang bernama Charles Babbage.Dia adalah seorang ilmuwan di dunia yang telah banyak memberikan kontribusi bagi kehidupan manusia, terutama perkembangan komputer.

Penemuan fenomenalnya yaitu Mesin penghitung (Difference Engine no.1) merupakan salah satu penemuan yang paling terkenal dalam sejarah perkembangan komputer dan merupakan kalkulator otomatis pertama sebagai cikal bakal kompuer.Penemuan tersebut menjadikan Charles Babbage sebagai penemu konpur dan dijuluki sebagai bapak komputer.

Berikut ini sejarah komputer dan perkembanganya:

(47)

yang tinggi dan rumit. Mesin buatanya yang belum selesai tersebut saat ini di musiumkan di Museum of Science London.

1937: Dr. John V Atanasoff dan Clifford Berry mulai membuat design komputer digital elektronis pertama. Mereka memberi nama mesin tersebut ABC (Atanasoff-Berry Computer). Kemampuan mesin ABC tersebut hanya sebatas menghitung tambah dan pengurangan.

1943: Pada Perang Dunia 2, Seorang ilmuwan Inggris yang bernama Alan Turing mendesain komputer elektronik yang dibuat khusus bagi tentara Inggris. Tujuan pembuatan komputer tersebut agar dapat digunakan untuk menembus kode pertahanan Jerman.

1944: Howard Hathaway Aiken (Amerika) membuat yang diberi nama Mark I. Merupakan sebuah komputer hitung digital pertama. Komputer tersebut memiliki luas 7,45 kaki x 50 kaki, dengan berat 35 ton. Mark I sudah dapat digunakan untuk menghitung probabilitas.

1945: Dr. John von Neumann menulis sebuah konsep penyimpanan data. Pada saat itu masih berupa ide.

(48)

Numerical Integrator And Computer). Dunia juga beranggapan kedua orang ini sebagai penemu komputer digital.

ENIAC komputer memiliki berat 30 ton, terdiri dari 18.000 lampu tabung (transistor ukuran besar), dengan lebar 30 kaki x 50 kaki, memakai tenaga 160.000 watt. Saat pertamakali dioperasikan Pertama seluruh jaringan listrik di wilayah Philadelphia mendadak mati.

ENIAC sedikit lebih maju dibandingkan Mark I yang hanya dapat menghitung. ENIAC tidak hanya memiliki kemampuan menghitung, tambah, kurang, kali, bagi, tapi juga dapat diprogram untuk melakukan proses sederhana.

1951: The U.S. Bureau of Cencus menginstalasi komputer komersial pertama yang bernama UNIVAC I (Universal Automatic Computer). UNIVAC I ini dikembangkan oleh Mauchly dan Eckert untuk Remington-Rand Corporation.

1947: William Shockley, John Bardeen, dan Walter Brattain merupakan penemu Transistor pertama di dunia. Semenjak ditemukanya transistor, ukuran komputer menjadi semakin kecil.

2.1.2 Jenis-jenis Komputer

(49)

keyboard, mouse, sidik jari, retina mata, dan lain-lain) kemudian di proses oleh prosesornya dan ditampilkan melalui monitor atau dalam bentuk hardcopy (printer). Banyak sekali pembagian atau kriteria yang melekat pada komputer, berikut ini kita bahas 8 macam jenis komputer.

1. PC atau Personal Computer

Sesuai dengan namanya personal komputer,maka PC adalah komputer yang ditujukan untuk pemakaian satu orang atau dimiliki secara pribadi. Sebelum PC ini muncul, komputer dahulunya berwujud sangat besar, sehingga hanya dimiliki oleh perusahaan tertentu saja.PC pertama bernama Altair yang diproduki oleh MITS pada tahun 1975.

2. Komputer Desktop

Yaitu komputer yang dirancang untuk tidak dapat dipindahkan-pindahkan, atau khusus dirancang untuk diletakkan disuatu tempat seperti diatas meja kerja. Komputer jenis ini sangat banyak beredar dipasaran, terutama dikalangan perguruan tinggi, kantor dan perusahaan.

3. Laptop

(50)

lainnya dengan ukuran yang kecil dan ringan. Kemampunya bahkan melebihi komputer dekstop maupun PC..

4. PDA, Personal Digital Assistants

PDA adalah komputer canggih yang menggunakan flash memory sebagai pengganti media penyimpanan. PDA tidak memiliki keyboard, namun menggunakan teknologi layar sentuh (touchscreen) sebagai media input. PDA mempunyai ukuran yang sangat kecil, sedikit diatas ukuran handphone dan dapat dengan mudah dibawa kemana-mana.

5. Komputer Workstation

Workstation sebenarnya adalah komputer desktop yang memiliki kelebihan utama dalam hal kemampuan prosesor, memory yang besar, dan kemampuannya dalam menjalankan aplikasi-aplikasi yang membutuhkan performa tinggi, seperti aplikasi 3 dimensi, grafik, multimedia dan lain sebagainya.

6. Komputer Server

(51)

7. Komputer Mainframe

Adalah komputer dengan ukuran besar yang mampu melayani ratusan program aplikasi secara bersamaan, mendukung puluhan bahasa pemrograman yang berbeda, mampu menyimpan dan mengakses library rutin dengan kapasitas yang besar, mampu melayani ratusan transaksi secara bersamaan, bahkan lebih dan kelebihan lainnya. Komputer ini biasanya berfungsi sebagai pusat data pada perusahaan besar, namun dengan perkembangan zaman, komputer-komputer terbaru saat ini secara bertahap akan mampu menyaingi kelebihan dari komputer mainframe ini. Untuk ukuran yang sedang disebut dengan mini komputer dan ukuran lebih kecil disebut dengan mikro komputer.

8. Wearable Computer

Wearable Computer adalah perkembangan terbaru dalam bidang komputer, yaitu perangkat komputer menyatu seperti layaknya pakaian saja.Aplikasi-aplikasi yang biasa digunakan seperti email, database, multimedia, kalender terintegrasi langsung dengan jam tangan, handphone atau dalam bentuk lainnya.Sehingga perangkat komputer sudah menyatu dalam kehidupan kita sehari-hari.

2.2 Pengertian Sistem

Sistem berasal dari bahasa Latin (systēma) dan bahasa Yunani (sustēma) adalah

(52)

tujuan. Istilah ini sering dipergunakan untuk menggambarkan suatu set entitas yang berinteraksi, di mana suatu model matematika seringkali bisa dibuat.

Sistem juga merupakan kesatuan bagian-bagian yang saling berhubungan yang berada dalam suatu wilayah serta memiliki item-item penggerak, contoh umum misalnya seperti negara. Negara merupakan suatu kumpulan dari beberapa elemen kesatuan lain seperti provinsi yang saling berhubungan sehingga membentuk suatu negara dimana yang berperan sebagai penggeraknya yaitu rakyat yang berada dinegara tersebut.

Kata "sistem" banyak sekali digunakan dalam percakapan sehari-hari, dalam forum diskusi maupun dokumen ilmiah. Kata ini digunakan untuk banyak hal, dan pada banyak bidang pula, sehingga maknanya menjadi beragam. Dalam pengertian yang paling umum, sebuah sistem adalah sekumpulan benda yang memiliki hubungan di antara mereka.

2.3 Sistem Komputer

(53)

Perangkat computer harus bisa difungsikan secara komperehensif (kompak dan bersama-sama) dalam melaksanakan tugasnya yaitu dalam mengolah data atau informasi.Untuk mewujudkan konsepsi komputer sebagai pengolah data agar menghasilkan suatu informasi, maka diperlukan sistem komputer (computer system) yang elemennya terdiri dari hardware, software, dan brainware. Ketiga elemen system computer tersebut harus saling berhubungan dan membentuk kesatuan yang saling mendukung untuk bekerja sama. Hardware tidak akan berfungsi apabila tanpa software, demikian juga sebaliknya. Dan keduanya tidak akan bermanfaat apabila tidak ada manusia (brainware) yang mengoperasikannya dan mengendalikannya

2.3.1 Sistem Informasi

Sistem Informasi (SI) adalah kombinasi dari teknologi informasi dan aktivitas orang yang menggunakan teknologi itu untuk mendukung operasi dan manajemen. Dalam arti yang sangat luas, istilah sistem informasi yang sering digunakan merujuk kepada interaksi antara orang, proses algoritmik, data, dan teknologi. Dalam pengertian ini, istilah ini digunakan untuk merujuk tidak hanya pada penggunaan organisasi teknologi informasi dan komunikasi (TIK), tetapi juga untuk cara dimana orang berinteraksi dengan teknologi ini dalam mendukung proses bisnis.

(54)

informasi. Sistem informasi juga berbeda dari proses bisnis. Sistem informasi membantu untuk mengontrol kinerja proses bisnis.

Alter berpendapat untuk sistem informasi sebagai tipe khusus dari sistem kerja. Sistem kerja adalah suatu sistem di mana manusia dan/atau mesin melakukan pekerjaan dengan menggunakan sumber daya untuk memproduksi produk tertentu dan/atau jasa bagi pelanggan.Sistem informasi adalah suatu sistem kerja yang kegiatannya ditujukan untuk pengolahan (menangkap, transmisi, menyimpan, mengambil, memanipulasi dan menampilkan) informasi.

Dengan demikian, sistem informasi antar-berhubungan dengan sistem data di satu sisi dan sistem aktivitas di sisi lain. Sistem informasi adalah suatu bentuk komunikasi sistem di mana data yang mewakili dan diproses sebagai bentuk dari memori sosial.Sistem informasi juga dapat dianggap sebagai bahasa semi formal yang mendukung manusia dalam pengambilan keputusan dan tindakan.Sistem informasi merupakan fokus utama dari studi untuk disiplin sistem informasi dan organisasi informatika.

(55)

dan kegiatan strategi dari suatu organisasi dan menyediakan pihak luar tertentu dengan laporan-laporan yang diperlukan.

2.3.4Sistem Informasi Berbasis Web

Sistem Informasi Berbasis Web adalah sebuah sistem informasi yang menggunakan teknologi web atau internet untuk memberikan informasi dan layanan kepada pengguna atau sistem informasi lain.

Sistem informasi berbasis web biasanya terdiri dari satu atau lebih aplikasi web yang masing komponen mempunyai fungsi tertentu. Dimana masing-masing komponen tersebut saling mendukung satu sama lainnya guna mencapai fungsi sistem informasi web sesungguhnya secara umum.

2.4Syarat Merancang Sistem Informasi Berbasis Web Adapun syarat-syarat agar terbentuknya sebuah website adalah: 1. Tersedianya Web Server

(56)

2. Tersedianya Software Pemrograman Web Berbasis Server

Jika ingin membuat web, berarti harus tersedia sebuah bahasa pemrograman web selain HTML, baik itu client side maupun server side.Untuk yang client side, memiliki kekurangan yaitu instruksi program bisaa terlihat oleh pengguna internet.Sedangkan server side lebih aman karrena instruksi programnya tidak terlihat oleh user, yang terlihat adalah seperti HTML biasa.Contoh bahasa pemrograman web yang favorit adalah PHP.

3. Tersedianya Database

Database merupakan software yang digunakan untuk menyimpan dan memanajemen data.Jika memiliki data yang sedikit, mungkin masih bisa memakai file biasa sebagai media penyimpanannya. Tapi jika datanya sudah sangat banyak, tanpa database akan sangat rumit. Database dapat menyimpan berjuta-juta data dan dapat diakses dengan sangat cepat. Contoh database yang bisa dipakai untuk membuat web adalah Oracle, MySQL, dan masih banyak lagi yang lain. Database yang akan digunakan penulis adalah MySQL.

2.5Pengertian Internet

(57)

untuk dapat dikirim dan dinikmati bersama. Untuk dapat bertukar informasi, digunakan protocol standar yaitu Transmision Control Protocol dan internet Protocol yang lebih dikenal sebagai TCP/IP.

TCP (Transmission Control Protocol) bertugas untuk memastikan bahwa semua hubungan bekerja dengan benar, sedangkan IP (Internet Protocol) yang mentransmisikan data dari satu komputer ke komputer lain. TPC/IP secara umum berfungsi memilih rute terbaik transmisi data, memilih rute alternatif jika suatu rute tidak dapat di gunakan, mengatur dan mengirimkan paket-paket pengiriman data.

(58)

menyediakan akses wi-fi, seperti Wifi-cafe. Pengguna hanya perlu membawa laptop (notebook), atau PDA, yang mempunyai kemampuan wifi untuk mendapatkan akses Internet.

Disamping menggunakan PC (Personal Computer), kita juga dapat mengakses Internet melalui Handphone (HP) menggunakan Fasilitas yang disebut GPRS (General Packet Radio Service). GPRS merupakan salah satu standar komunikasi wireless (nirkabel) yang memiliki kecepatan koneksi 115 kbps dan mendukung aplikasi yang lebih luas (grafis dan multimedia). Teknologi GPRS dapat diakses yang mendukung fasilitas tersebut.Pen-setting-an GPRS pada ponsel Tergantung dari operator (Telkomsel, Indosat, XL, 3) yang digunakan.Biaya akses Internet dihitung melalui besarnya kapasitas (per-kilobite) yang didownload.

2.5.1 Sejarah Internet

(59)

Tujuan awal dibangunnya proyek itu adalah untuk keperluan militer. Pada saat itu Departemen Pertahanan Amerika Serikat (US Department of Defense) membuat sistem jaringan komputer yang tersebar dengan menghubungkan komputer di daerah-daerah vital untuk mengatasi masalah bila terjadi serangan nuklir dan untuk menghindari terjadinya informasi terpusat, yang apabila terjadi perang dapat mudah dihancurkan.

Pada mulanya ARPANET hanya menghubungkan 4 situs saja yaitu Stanford Research Institute, University of California, Santa Barbara, University of Utah, di mana mereka membentuk satu jaringan terpadu pada tahun 1969, dan secara umum ARPANET diperkenalkan pada bulan Oktober 1972. Tidak lama kemudian proyek ini berkembang pesat di seluruh daerah, dan semua universitas di negara tersebut ingin bergabung, sehingga membuat ARPANET kesulitan untuk mengaturnya.

Oleh sebab itu ARPANET dipecah manjadi dua, yaitu "MILNET" untuk keperluan militer dan "ARPANET" baru yang lebih kecil untuk keperluan non-militer seperti, universitas-universitas. Gabungan kedua jaringan akhirnya dikenal dengan nama DARPA Internet, yang kemudian disederhanakan menjadi Internet.

2.6Web Server

(60)

lepas yang namanya web server. Sebagian orang mungkin mengetahui istilah web server, akan tetapi tidak sedikit juga orang yang belum tahu mengenai Pengertian Web Server ini. Secara umum dapat disimpulkan bahwa Pengertian Web Server adalah sebuah layanan internet yang telah disediakan oleh komputer.

Dalam memasukkan web yang telah dirancang dalam internet, maka terlebih dahulu memiliki ruangan dalam internet dan ruangan inilah disediakan oleh server. Selain itu juga,Pengertian Web server merupakan sebuah perangkat komputer yang digunakan untuk mengakses segala jenis file yang terdapat pada halaman web melalui HTTP/HTTPS dengan menggunakan aplikasi atau program tertentu (dikenal dengan nama web browser) dan mengirimkan kembali hasil permintaannya dalam bentuk halaman – halaman web yang berbentuk dokumen HTML.

2.7HyperText Markup Language (HTML)

(61)

HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.

HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat teks ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b>TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh teks yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut.

2.8Personal Home Page

(62)

versi ke-5. Berdasarkan survey Netcraft pada bulan Desember 1999, lebih dari sejuta site menggunakan PHP, diantaranya adalah NASA, Mitsubishi, dan RedHat.

2.8.1 Sejarah PHP

Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal).PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995.Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.

Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI.Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP.

Pada November 1997, dirilis PHP/FI 2.0.Pada rilis ini, interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP diubah menjadi akronim berulang PHP: Hypertext Preprocessing.

(63)

membangun aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi.Pada Juni 2004, Zend merilis PHP 5.0.Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar.Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek.

2.8.2 Kelebihan dan Kelemahan PHP Kelebihan PHP :

a. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaanya.

b. Web Server yang mendukung PHP dapat ditemukan dimana – mana dari mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relatif mudah.

c. Dalam sisi pengembangan lebih mudah, karena banyaknya milis – milis dan developer yang siap membantu dalam pengembangan.

d. Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena memiliki referensi yang banyak.

e. PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah system.’

Kelemahan PHP :

(64)

b. Tidak memiliki sistem pemrograman berorientasi objek yang sesungguhnya (sampai versi 4 ini)

c. Tidak bisa memisahkan antara tampilan dengan logik dengan baik (walau penggunaan template dapat memperbaikinya)

d. PHP memiliki kelemahan security tertentu apabila programmer tidak jeli dalam melakukan pemrograman dan kurang memperhatikan isu dan konfigurasi PHP

e. Kode PHP dapat dibaca semua orang, dan kompilasi hanya dapat dilakukan dengan tool yang mahal dari Zend ($2000).

2.9XAMPP

XAMPP adalah program aplikasi pengembang yang berguna untuk pengembangan website berbasis PHP dan MySQL.Versi terbaru program ini adalah XAMPP 1.7.7, yang dirilis pada tanggal 20 September 2011.Software XAMPP dibuat dan dikembangkan oleh Apache Friends.

(65)

sehingga pengembang web dapat mengembangkan aplikasi web berbasis database secara mudah.Program XAMPP banyak diaplikasikan dan digunakan oleh kalangan pengguna komputer di bidang pemrograman web.XAMPP merupakan software gratis. XAMPP dapat dijalankan di sistem operasi Windows 2000/XP/Vista/7 dan sistem operasi lain. Untuk menginstall versi terbaru program ini, Anda cukup menginstal file installer XAMPP ke komputer Windows Anda.

Berikut ini Penjelasan dari bagian-bagian XAMPP:

a. X , Kenapa disebut dengan system operasi? karena XAMPP bisa dijalankan di 4 OS besar yang sering digunakan oleh pengguna komputer saat ini. Dan 4 OS tersebut tidak lain dan tidak bukan adalah Windows, Linux, Mac OS dan Solaris.

b. A(Apacahe) merupakan aplikasi web server. Apache ini bersifat opensource yang berarti gratis dan bisa diedit oleh penggunanya. Tugas utama Apache adalah menghasilkan halaman web yang benar kepada user berdasarkan kode PHP yang dituliskan oleh pembuat halaman web. jika diperlukan juga berdasarkan kode PHP yang dituliskan,maka dapat saja suatu database diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung halaman web yang dihasilkan.

(66)

dapat memanfaatkan MySQL untuk menambahkan, mengubah, dan menghapus data yang berada dalam database.

d. P (PHP), bahasa pemrograman web. Bahasa pemrograman PHP merupakan bahasa pemrograman untuk membuat web yang bersifat server-side scripting. PHP memungkinkan kita untuk membuat halaman web yang bersifat dinamis. Sistem manajemen basis data yang sering digunakan bersama PHP adalah MySQl. namun PHP juga mendukung sistem manajement database Oracle, Microsoft Access, Interbase, d-base, PostgreSQL, dan sebagainya.

e. P (Perl), bahasa pemrograman, pertama kali dikembangkan oleh Larry Wall di mesin Unix. Perl pertama kali dirilis pada tanggal 18 Desember 1987 ditandai dengan keluarnya Perl 1. Dua diantara karakteristik utama perl adalah penanganan teks dan berbagai jalan pintas untuk meyelesaikan persoalan-persoalan umum.Perl sangat populer di gunakan dalam program-rogram CGI (Common Gateway Interface) dan protokol internet lainnya.

(67)

2.10 MySQL

MySQL adalah sebuah perangkat lunak system manajemen basis data SQL (DBMS) yang multithread, dan multi-user.MySQL adalah implementasi dari system manajemen basisdata relasional (RDBMS). MySQL dibuah oleh TcX dan telah dipercaya mengelola system dengan 40 buah database berisi 10.000 tabel dan 500 di antaranya memiliki 7 juta baris.

MySQL AB merupakan perusahaan komersial Swedia yang mensponsori dan yang memiliki MySQL.Pendiri MySQL AB adalah dua orang Swedia yang bernama David Axmark, Allan Larsson dan satu orang Finlandia bernama Michael “Monty”. Setiap pengguna MySQL dapat menggunakannya secara bebas yang didistribusikan gratis dibawah lisensi GPL(General Public License) namun tidak boleh menjadikan produk turunan yang bersifat komersial.

(68)

2.10.1 Sejarah MySQL

MySQL pada awalnya diciptakan pada tahun 1979, oleh Michael "Monty" Widenius, seorang programmer komputer asal Swedia. Monty mengembangkan sebuah sistem database sederhana yang dinamakan UNIREG yang menggunakan koneksi low-level ISAM database engine dengan indexing. Pada saat itu Monty bekerja pada perusahaan bernama TcX di Swedia.TcX pada tahun 1994 mulai mengembangkan aplikasi berbasis web, dan berencana menggunakan UNIREG sebagai sistem database. Namun sayangnya, UNIREG dianggagap tidak cocok untuk database yang dinamis seperti web.TcX kemudian mencoba mencari alternatif sistem database lainnya, salah satunya adalah MySQL. Namun MySQL versi 1 ini juga memiliki kekurangan, yaitu tidak mendukung indexing, sehingga performanya tidak terlalu bagus.

(69)

David Axmark dari Detron HB, rekanan TcX mengusulkan agar MySQL di ‘jual’ dengan model bisnis baru.Ia mengusulkan agar MySQL dikembangkan dan dirilis dengan gratis. Pendapatan perusahaan selanjutnya di dapat dari menjual jasa “support” untuk perusahaan yang ingin mengimplementasikan MySQL. Konsep bisnis ini sekarang dikenal dengan istilah Open Source.Pada tahun 1995 itu juga, TcX berubah nama menjadi MySQL AB, dengan Michael Widenius, David Axmark dan Allan Larsson sebagai pendirinya. Titel “AB” dibelakang MySQL, adalah singkatan dari “Aktiebolag”, istilah PT (Perseroan Terbatas) bagi perusahaan Swedia.

2.10.2 Pengertian SQL

Structured Query Language (SQL) adalah sekumpulan perintah khusus yang digunakan untuk mengakses data dalam database relasional.SQL merupakan sebuah bahasa komputer yang mengikuti standar ANSI (American Nasional Standard Institute) yang digunakan dalam manajemen database relasional. Dengan SQL, kita dapat mengakses database, menjalankan query untuk mengambil data dari database, menambahkan data ke database, menghapus data di dalam database, dan mengubah data di dalam database. Saat ini hampir semua server database yang ada mendukung SQL untuk melakukan manajemen datanya.

2.11 Cascading Style Sheet (CSS)

(70)

terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan document dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

2.12 Sublime Text

Sublime Text merupakan teks editor multiplatform & powerfull kar

Gambar

Gambar 3.1 Diagram Use Case
Gambar 3.2 Alur Use Case
Gambar 3.3 Flowchart Login Admin
Gambar 3.4 Flowchart Tambah Tempat Wisata
+7

Referensi

Dokumen terkait

Elemen-elemen yang digunakan pada media visual perancanga kampanye ini menggunakan elemen yang berkaitan dengan permainan tradisional Kudus seperti Gedrik (Engklek),

Sistem ekonomi dimana pemerintah memiliki kendali yang  besar dalam perekonomian suatu negara, antara lain kepemilikan bisnis, laba, alokasi sumber daya serta

Dengan memanjatkan puji dan syukur Kehadirat Tuhan Yang Maha Kuasa, Saya menyambut gembira atas diterbitkannya buku ”KECAMATAN KEPULAUAN BOTANG LOMANG DALAM ANGKA TAHUN

Surya Media Perdana memiliki permasalahan dalam proses distribusi, dimana dalam satu kali pengiriman produk hanya dilakukan pada satu customer, sehingga mengakibatkan

pada mahasiswa S1 Peternakan Fakultas Peternakan dan Pertanian Universitas Diponegoro, sedangkan 68,1% sisanya ditentukan oleh faktor-faktor lain yang tidak diungkap

Atau dengan kata lain berdasarkan hasil perhitungan porositas batu apung tanpa menggunakan fitur Find Edges, batu apung yang digali pada kedalaman dangkal atau

Model berfungsi dengan cara berikut: selama transisi negara dari satu interval waktu berikutnya, tingkat kedatangan (biasanya diketahui) dapat digunakan untuk menentukan

Penelitian ini menggunakan konsentrasi daging ikan yang lebih rendah yaitu 30%, 40% dan 50% dengan alasan bahwa tekstur tahu bakso berbeda dengan bakso, selain