Sistem Informasi Objek Wisata Kabupaten Tapanuli Utara Berbasis Web

(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]>

<script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]-->


(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>

<input class="btn primary lg btn-block" type="submit" name="tombol" value="Login">


(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 ===-->

<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'>


(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">

<span class="sr-only">Toggle navigation</span>


(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>

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

'; }

?> </ul>


(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)) {

if($no == 2) {


(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">

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


(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>

</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">

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


(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>

<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>


(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 ===-->

<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 ===-->


(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">

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


(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" />

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


(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">

<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>


(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>

</body> </html>


(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

Bagan berjenjang dapat dijadikan pedoman untuk perancangan selanjutnya,karena berisi semua proses yang adap ada perangkat lunak yang dirancangini.


(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.

3. Use case sendiri menggambarkan kebutuhan sistem sendiri dilihat dari sudut pandang diluar sistem.


(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.

2. Orang ataupun pihak yang akan mengelola sistem tersebut. 3. External resource yang digunaka oleh 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

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.

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.

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)

Gambar 3.4 Flowchart Tambah Tempat Wisata


(34)

3.5Perancangan Database

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

Tgl_update Date -

Tabel 3.3TabelGambar

Field Name Type Field Size Keterangan

Kode_foto Int 11 primery key

Kode_wisata Varchar 10


(35)

Tabel 3.4 Tabel Kritik Dan Saran

id Email topik pesan

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)

Rancangan antarmuka dari sistem ini dibagi menjadi tiga bagian yaitu kepala (header), bagian kiri (menu), bagian kanan (content) dan bagian kaki (footer), bagian kepala terdiri dari logo dan slider. Bagian kiri terdiri dari menu. Bagian


(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 :

a. Perangkat Keras (hardware) 1. Prosesor Intel Pentium


(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 :

1. Mencegah terjadinya kelainan sistem yang dapat mendatangkan masalah-masalah baru.


(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

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

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

Halaman Utama ini merupakan halaman web yang pertama kali muncul ketika mulai dibuka di web browser. Pada Halaman utama ini terdapat sebuah slider dan empat menu dibagian kiri dari website ini. Dimana keempat menu ini merupakan linkmenuju penjelasan dari menu tersebut, dibagian kanan (konten) terdapat penjelasan atau isi dari menu yang ada disebelah kiri website.


(42)

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.


(43)

4.4.5 Halaman Berita

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.


(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

Dalam mengakhiri penulisan Tugas Akhir penulis menguraikan beberapa saran antara lain:


(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.

Dalam arti seperti itu terdapat alat seperti slide rule, jenis kalkulator mekanik mulai dari abakus dan seterusnya, sampai semua komputer elektronik yang kontemporer. Istilah lebih baik yang cocok untuk arti luas seperti "komputer" adalah "yang mengolah informasi" atau "sistem pengolah informasi." Selama bertahun-tahun sudah ada beberapa arti yang berbeda dalam kata "komputer", dan beberapa kata yang berbeda tersebut sekarang disebut disebut sebagai komputer.


(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:

1822: Charles Babbage mengemukakan idenya yaitu sebuah alat yang dapat membantu manusia dalam melakukan penghitungan pada tingkat kompleksitas


(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.

1946: Dr. John W. Mauchly dan J. Presper Eckert, jr. membuat komputer skala besar yang pertama, nama komputer tersebut adalah ENIAC (Electronic


(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

Komputer telah merambah ke berbagai sektor dalam kehidupan kita, tidak saja digunakan oleh orang kantoran, akademisi, mahasiswa, anak-anakpun sudah terbiasa dengan komputer ini. Secara sederhana, komputer dapat kita definisikan sebagai perangkat elektronik yang menerima input (dapat berupa input dari


(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

Dahulu istilah laptop berbeda dengan Notebook ditinjau dari segi ukuran, namun sekarang laptop atau notebook mengacu ke maksud yang sama, yaitu komputer portable (mudah dibawa-bawa) yang terintegrasi langsung dengan monitor, keyboard, mouse pad/trackbal, processor, harrdisk, memory dan peripheral


(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

Server adalah komputer diperuntukan untuk menyediakan layanan terhadap komputer lainnya (client) dalam sebuah jaringan.Komputer server memiliki prosesor yang powerfull, memory yang besar dan kapasitas harddisk yang lebih besar.


(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 suatu kesatuan yang terdiri komponen atau elemen yang dihubungkan bersama untuk memudahkan aliran informasi, materi atau energi untuk mencapai suatu


(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

Sistem komputer adalah kumpulan dari elemen-elemen computer (hardware, software, brainware) yang saling berhubungan (terintegrasi) dan saling berinteraksi untuk melakukan pengolahan data dengan tujuan menghasilkan informasi sesuai dengan yang diharapkan.


(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.

Ada yang membuat perbedaan yang jelas antara sistem informasi, dan komputer sistem TIK, dan proses bisnis. Sistem informasi yang berbeda dari teknologi informasi dalam sistem informasi biasanya terlihat seperti memiliki komponen TIK.Hal ini terutama berkaitan dengan tujuan pemanfaatan teknologi


(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.

Sistem informasi adalah gabungan yang terorganisasi dari manusia, perangkat lunak, perangkat keras, jaringan komunikasi dan sumber data dalam mengumpulkan, mengubah, dan menyebarkan informasi dalam organisasi.Sistem informasi adalah suatu sistem didalam suatu organisasi yang mempertemukan kebutuhan pengolahan transaksi harian, mendukung operasi, bersifat manajerial


(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

Baik web statis ataupun dinamis, jika ingin bisa online di internet, maka syarat pertama haruslah memiliki server, baik berupa hardware maupun software. Untuk hardware yaitu seperangkat komputer yang selalu terhubung online dengan internet.Untuk software, selain operating system, harus disediakan juga software untuk web server itu sendiri.Untuk saat ini web server yang menjadi favorit adalah Aphace.


(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

Internet adalah jaringan besar yang saling berhubungan dari jaringan-jaringan komputer yang menghubungkan orang-orang dan komputer-komputer diseluruh dunia, melalui telepon, satelit dan sistem-sistem komunikasi yang lain. Internet dibentuk oleh jutaan komputer yang terhubung bersama dari seluruh dunia, memberi jalan bagi informasi (mulai dari text, gambar, audio, video, dan lainnya )


(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.

Untuk dapat ikut serta menggunakan fasilitas Internet, Anda harus berlangganan ke salah satu ISP (Internet Service Provider) yang ada dan melayani daerah Anda.ISP ini biasanya disebut penyelenggara jasa internet. Anda bisa menggunakan fasilitas dari Telkom seperti Telkomnet Instan, speedy dan juga layanan ISP lain seperti first media, netzip dan sebagainya.Di Indonesia, seperti negara berkembang dimana akses Internet dan penetrasi PC sudah cukup tinggi dengan di dukungnya Internet murah dan netbook murah, hanya saja di Indonesia operator kurang fair dalam menentukan harga dan bahkan ada salah satu operator yang sengaja membuat “perangkap jebakan” agar supaya si pengguna Internet bayar lebih mahal sampai ber juta-juta rupiah!!, lainnya sekitar 42% dari akses Internet melalui fasilitas Public Internet akses seperti warnet (warung internet), cybercafe, hotspot dll. Tempat umum lainnya yang sering dipakai untuk akses Internet adalah di kampus, di kantor, dan terdapat juga di toko-toko yang


(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

Internet merupakan jaringan komputer yang dibentuk oleh Departemen Pertahanan Amerika Serikat pada tahun 1969, melalui proyek ARPA yang disebut ARPANET (Advanced Research Project Agency Network), di mana mereka mendemonstrasikan bagaimana dengan hardware dan software komputer yang berbasis UNIX, kita bisa melakukan komunikasi dalam jarak yang tidak terhingga melalui saluran telepon. Proyek ARPANET merancang bentuk jaringan, kehandalan, seberapa besar informasi dapat dipindahkan, dan akhirnya semua standar yang mereka tentukan menjadi cikal bakal pembangunan protokol baru yang sekarang dikenal sebagai TCP/IP (Transmission Control Protocol/Internet Protocol).


(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

Dalam kemajuan teknologi zaman sekarang, jaringan internet sangat dibutuhkan oleh masyarakat pada umumnya. Jika bicara tentang internet, tentu tidak akan bisa


(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)

HTML (Hyper Text Markup Language) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet.Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web.HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).


(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

PHP adalah singkatan dari "PHP: Hypertext Prepocessor", yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML. PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun 1994.Pada awalnya PHP adalah singkatan dari "Personal Home Page Tools".Selanjutnya diganti menjadi FI ("Forms Interpreter"). Sejak versi 3.0, nama bahasa ini diubah menjadi "PHP: Hypertext Prepocessor" dengan singkatannya "PHP". PHP versi terbaru adalah


(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.

Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0.PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21.Versi ini banyak dipakai disebabkan kemampuannya untuk


(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.

Perangkat lunak komputer ini memiliki kelebihan untuk bisa berperan sebagai server web Apache untuk simulasi pengembangan website. Tool pengembangan web ini mendukung teknologi web populer seperti PHP, MySQL, dan Perl. Melalui program ini, programmer web dapat menguji aplikasi web yang dikembangkan dan mempresentasikannya ke pihak lain secara langsung dari komputer, tanpa perlu terkoneksi ke internet. XAMPP juga dilengkapi fitur manajemen database PHPMyAdmin seperti pada server hosting sungguhan,


(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.

c. M ( MySQL), merupakan aplikasi database server. Perkembangannya disebut SQL yang merupakan kepanjangan dari Structured Query Language. SQL merupakan bahasa terstruktur yang digunakan untuk mengolah database. MySQL dapat digunakan untuk membuat dan mengelola database beserta isinya. Kita


(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.

Fungsi dari Xampp adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl.Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis.


(1)

KEMENTRIAN RISET, TEKNOLOGI DAN, PENDIDIKAN TINGGI UNIVERSITAS SUMATERA UTARA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM PROGRAM STUDI D3 TEKNIK INFORMATIKA

Jl. Bioteknologi No. 1 Kampus USU Padang Bulan Medan 20155 Telp. (061) 8211050, 8214290, Fax (061) 8214290

PERSETUJUAN

Judul : Sistem Informasi Objek Wisata Kabupaten Tapanuli Utara Berbasis Web

Kategori : Tugas Akhir Nama : Lewin Hutasoit Nomor Induk Mahasiswa : 132406129

Program Studi : Diploma (D3) Teknik Informatika Departemen : Matematika

Fakultas : Matematika Dan Ilmu Pengetahuan Alam (FMIPA) Universitas Sumatera Utara.

Diluluskan di Medan, Juni 2016

Diketahui/Disetujui oleh

Ketua Prog.Studi

D3 Teknik Informatika, Pembimbing,

Dr. Elly Rosmaini, M.Si.

NIP 196 005 201 985 032 002 NIP 196 410 141 991 031 004 Dr. Open Darnius, M.Sc


(2)

PERNYATAAN

SISTEM INFORMASI OBJEK WISATA KABUPATEN TAPANULI UTARA BERBASIS WEB

TUGAS AKHIR

Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Juni 2016

Lewin Hutasoit 132406129


(3)

PENGHARGAAN

Puji syukur penulis ucapkan kepada Tuhan Yang Maha Esa atas limpahan berkat dan rahmat-Nya sehingga kajian tugas akhir ini dapat diselesaikan dengan baik dan dalam waktu yang telah ditetapkan.

Penulisan Tugas Akhir ini merupakan karya tulis yang sederhana dan merupakan salah satu syarat untuk menyelesaikan pendidikan D3 Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

Dalam penyusunan Tugas Akhir ini, penulis sadar akan keterbatasan kemampuan dan pengetahuan penulis, sehingga diharapkan kritik dan saran yang membangun serta dapat memberikan inspirasi yang baik untuk kemajuan tugas akhir ini.

Dengan selesainya Tugas Akhir ini penulis mengucapkan terima kasih kepada:

1. Bapak Dr. Kerista Sebayang, M.Sselaku Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

2. Bapak Dr. Open Darnius, M.Sc selaku Pembimbing penulis yang selalu memberi masukan baik kritik dan saran kepada penulis selama pembuatan tugas akhir dari awal hingga selesai.

3. Bapak Prof. Dr. Tulus, M.Si selaku Ketua Departemen Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.


(4)

4. Ibu Dr. Elly Rosmaini, M.Si selaku Ketua Program Studi D3 Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

5. Seluruh dosen pengajar Program Studi D3 Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

6. Seluruh Staff/Pegawai Fakultas MIPA Universitas Sumatera Utara khususnya Program Studi D3 Teknik Informatika.

7. Terkhusus penulis ucapkan terima kasih kepada kedua orang tua penulis, ”Ayahanda A. Hutasoit dan Ibunda M. Situmorang”, yang telah banyak memberi doa dan dukungan serta kasih sayang yang berlimpah untuk penulis. 8. Kepada kakak, abang dan adik penulis, Astri N. Hutasoit, Niko W. Hutasoit

dan Katrina Hutasoit yang telah memberi dukungan dan bantuan untuk penulis.

9. Buat para sahabat seperjuanganBasri P Sembiring, Buha A. Sinaga, Daniel Sijabat, Firnando H. Silalahi, Tulus R. Purba, Tumona Sinaga, Agustinus Gultom, Amron Toga Torop, Linggom Purba dan tidak lupa juga bagi semua anak parkir yang memberi semangat kepada penulis.

10.Buat teman-teman seperjuangan kom C 2013 dan mahasiswa D3 Teknik Informatika yang tidak dapat saya sebutkan satu per satu. Terima kasih atas dukungangnya dalam membantu menyelesaikan tugas akhir ini.

Penulis juga tidak lupa mengucapkan banyak terima kasih kepada semua pihak yang telah banyak membantu penulis dalam menyelesaikan Tugas Akhir ini yang tidak dapat disebutkan satu persatu.


(5)

Penulis menyadari bahwa Tugas Akhir ini masih jauh dari sempurna, baik dalam penulisan maupun dalam tata bahasanya. Oleh karena itu, penulis mengharapkan kritik dan saran yang membangun agar kedepannya penulis dapat lebih baik lagi dalam menyusun sebuah karya tulis.

Semoga tulisan ini bermanfaat bagi pembaca pada umumnya dan penulis khususnya, serta dapat memotivasi kita untuk meningkatkan ilmu pengetahuan sebagai bekal di masa yang akan datang.

Medan, Juni 2016 Penulis


(6)

ABSTRAK

Website adalah salah satu sistem informasi yang dapat dengan mudah diakses melalui jaringan internet. Dalam perancangan suatu sistem informasi diperlukan data dan informasi yang akurat agar sistem informasi yang dirancang dapat memenuhi kebutuhan yang sesuai dengan keinginan pengguna. Pembuatan website ini bertujuan untuk memudahkan masyarakat untuk mendapatkan informasi mengenai objek wisata Tapanuli Utara. Website ini dikembangkan menggunakan bahasa pemrograman PHP dan MYSQL sebagai databasenya. Untuk itu penulis akan membahas “Sistem Informasi Objek Wisata Kabupaten Tapanuli Utara Berbasis Web” .