Perancangan Sistem Infomasi Bencana Alam Berbasis Website Menggunakan PHP dan MYSQL
window.location.href = $(this).attr("href");
(12)
return false;} });
}); </script> </div>
1.5edit.php
<?php include 'inc/header.php'; ?> <?php
if (isset($_GET['judul'])) { $judul_q = $_GET['judul']; }
if (isset($_POST['submit'])) { $judul = $_POST['judul']; $pembuat = $_POST['pembuat'];
$keterangan = $_POST['keterangan']; $waktu = $_POST['tanggal'];
$imgFile = $_FILES['gambar']['name']; $tmp_dir = $_FILES['gambar']['tmp_name']; $imgSize = $_FILES['gambar']['size']; if (empty($judul)) {
$errMSG = "Masukkan judul."; } else if (empty($keterangan)) {
$errMSG = "Masukkan keterangan."; } else if (empty($imgFile)) {
$query2 = mysqli_query($kon, "UPDATE berita SET judul='$judul',
keterangan='$keterangan' WHERE judul='$judul_q'");
if ($query2) { ?>
(13)
alert("Data berhasil di update");
window.location.href = "index.php?berita";
</script> <?php } else {
echo "Error.." . mysqli_error($kon);
} } else {
$upload_dir = '../foto_berita/';
$imgExt = strtolower(pathinfo($imgFile, PATHINFO_EXTENSION));
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif');
$userpic = rand(1000, 1000000) . "." . $imgExt;
if (in_array($imgExt, $valid_extensions)) {
if ($imgSize < 500000000000) { move_uploaded_file($tmp_dir, $upload_dir . $userpic);
} else {
$errMSG = "Maaf, file terlalu besar.";
} } else {
$errMSG = "Hanya tipe JPG, JPEG, PNG & GIF yang diizinkan.";
}
if (!isset($errMsg)) {
$query2 = mysqli_query($kon, "UPDATE berita SET judul='$judul',
(14)
keterangan='$keterangan', gambar='$userpic' WHERE judul='$judul_q'");
if ($query2) { ?>
<script>
alert("Data berhasil di update"); window.location.href = "index.php?berita";
</script> <?php } else {
echo "Error.." . mysqli_error($kon);
} } else { ?>
<script>
alert("<?php echo $errMSG; ?>");
</script> <?php } }}?>
<section id="section">
<div class="section-container"> <?php
$query = mysqli_query($kon, "SELECT * FROM berita WHERE judul='$judul_q'");
$row = mysqli_fetch_array($query); ?>
<form class="form-horizontal "role="form" action="" method="post" enctype="multipart/form-data">
(15)
if (isset($errMSG)) { ?>
<div>
<?php echo $errMSG; ?> </div>
<?php }
?>
<fieldset>
<!-- Form Name -->
<legend>Berita</legend> <div class="form-group"> <label class="col-md-4 control-label" for="judul">Judul</label> <div class="col-md-6"> <input value="<?php echo $row['judul']; ?>" id="textinput"
name="judul" type="text" placeholder=""
class="form-control input-md" required="true">
</div> </div>
<div class="form-group"> <label class="col-md-4 control-label" for="pembuat">Pembuat</label> <div class="col-md-6"> <input value="<?php echo $row['pembuat']; ?>" id="textinput" name="pembuat" type="text" placeholder=""
class="form-control input-md" required="true">
(16)
</div>
<div class="form-group"> <label class="col-md-4 control-label" for="tanggal">Waktu</label> <div class="col-md-6"> <input value="<?php echo $row['tanggal']; ?>" id="textinput" name="tanggal" type="text" placeholder=""
class="form-control input-md" required="true">
</div> </div>
<!-- Textarea -->
<div class="form-group"> <label class="col-md-4 control-label"
for="keterangan">Keterangan</label>
<div class="col-md-6"> <textarea rows="10"
class="form-control" id="keterangan" name="keterangan"><?php echo
$row['keterangan']; ?></textarea> </div>
</div> <!-- Text input-->
<div class="form-group"> <label class="col-md-4 control-label" for=""></label>
<div class="col-md-4"> <img class="img-thumbnail" src="../foto_berita/<?php echo $row['gambar']; ?>"/>
(17)
</div>
<!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="gambar">Gambar</label> <div class="col-md-4"> <input id="gambar" name="gambar" class="input-file" type="file"> </div>
</div>
<div class="form-group"> <label class="col-md-4 control-label" for=""></label>
<div class="col-md-4"> <input id="submit" name="submit" class="input-submit"
type="submit"> </div>
</div> </fieldset> </form>
</div></section>
<?php include 'inc/footer.php'; ?> 1.6tambahberita.php
<?php include 'inc/header.php'; ?> <?php
if (isset($_GET['judul'])) { $judul_q = $_GET['judul']; }if (isset($_POST['submit'])) { $judul = $_POST['judul']; $pembuat = $_POST['pembuat'];
$keterangan = $_POST['keterangan']; $waktu = $_POST['tanggal'];
$imgFile = $_FILES['gambar']['name']; $tmp_dir = $_FILES['gambar']['tmp_name'];
(18)
$imgSize = $_FILES['gambar']['size']; if (empty($judul)) {
$errMSG = "Masukkan judul."; } else if (empty($keterangan)) {
$errMSG = "Masukkan keterangan."; } else if (empty($imgFile)) {
$errMSG = "Pilih gambar."; } else {
$upload_dir = '../foto_berita/'; // upload directory
$imgExt = strtolower(pathinfo($imgFile, PATHINFO_EXTENSION)); // get image extension // valid image extensions
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions // rename uploading image
$userpic = rand(1000, 1000000) . "." . $imgExt;
// allow valid image file formats if (in_array($imgExt,
$valid_extensions)) {
// Check file size '5MB'
if ($imgSize < 500000000000) { move_uploaded_file($tmp_dir, $upload_dir . $userpic);
} else {
$errMSG = "Maaf, file terlalu besar."; } } else {
$errMSG = "Hanya tipe JPG, JPEG, PNG & GIF yang diizinkan.";
} if (!isset($errMsg)) { $query2 = mysqli_query($kon,
(19)
gambar) VALUES('$judul', '$keterangan', '$pembuat', '$userpic')");
if ($query2) { ?> <script>
alert("Data berhasil di tambah"); window.location.href =
"index.php?berita"; </script> <?php } else { echo "Error.." . mysqli_error($kon); }
} else { ?> <script>
alert("<?php echo $errMSG; ?>"); </script> <?php }}?>
<section id="section"> <div class="section-container"> <form class="form-horizontal "role="form" action="" method="post"
enctype="multipart/form-data"> <?php
if (isset($errMSG)) { ?> <div>
<?php echo $errMSG; ?> </div> <?php } ?>
<fieldset> <!-- Form Name --> <legend>Berita</legend> <div class="form-group"> <label class="col-md-4 control-label" for="judul">Judul</label> <div class="col-md-6"> <input id="textinput" name="judul" type="text" placeholder=""
class="form-control input-md" required="true"> </div> </div>
(20)
<label class="col-md-4 control-label" for="pembuat">Pembuat</label> <div class="col-md-6"> <input id="textinput" name="pembuat" type="text" placeholder=""
class="form-control input-md" required="true"> </div> </div> <label class="col-md-4 control-label" for="tanggal">Waktu</label> <div class="col-md-6"> <input id="textinput" name="tanggal"
type="text" placeholder="" class="form-control input-md" required="true">
</div> </div> <!-- Textarea -->
<div class="form-group"> <label class="col-md-4 control-label"
for="keterangan">Keterangan</label>
<div class="col-md-6"><textarea rows="10" class="form-control" id="keterangan"
name="keterangan"></textarea>
</div> </div> <!-- Text input-->
<div class="form-group"> <label class="col-md-4 control-label" for=""></label>
<div class="col-md-4"> <img class="img-thumbnail" src=""/>
</div>
</div>
<!-- File Button --> <div class="form-group">
(21)
<label class="col-md-4 control-label" for="gambar">Gambar</label> <div class="col-md-4"> <input id="gambar" name="gambar" class="input-file" type="file"> </div>
</div>
<div class="form-group"> <label class="col-md-4 control-label" for=""></label>
<div class="col-md-4"> <input id="submit" name="submit" class="input-submit"
type="submit"> </div>
</div> </fieldset> </form> </div>
</section><?php include 'inc/footer.php'; ?> 1.7logout.php
<?php
include '../../koneksi.php'; session_destroy();
header("Location: login.php"); exit();
?> 2. nav.php
<nav id="platform-menu" class="platform-menu"> <a href="index.php" class="home">Home</a>
<ul > <nav>
(22)
<li><a
href='semua-berita.php'><span>Berita</span></a></li> <li><a href='#'><span>Pengetahuan Bencana</span></a>
<ul id="dd">
<li><a href='defenisi.php'>Defenisi dan Jenis Bencana</a></li>
<li><a href='potensi.php'>Potensi Ancaman Bencana</a></li>
<li><a href='sistem.php'>Sistem Penanggulangan Bancana</a></li>
<li><a href='siaga.php'>Siaga Bencana</a></li>
</ul> </li>
<li><a
href='semua-album.php'><span>Gallery</span></a></li><li><a href='hubungi-kami.php'><span>Kontak
Kami</span></a></li> <li><a
href='videos.php'><span>Videos</span></a></li> <li><a href='cuaca.php'><span>Prakiraan Cuaca</span></a></li>
</nav> </ul> </nav>
3. search.php
<form method="GET" id="searchForm" action="pencarian.php">
<fieldset>
(23)
<input type="text" name=cari id="term" name="kata"/>
<input type="submit" name="search" id="search_button" class="go backcolr"
alt="Search"/>
</fieldset> </form>
4. index.php
<?php include '../koneksi.php'; ?> <!DOCTYPE html>
<html class="not-ie no-js" lang="en"> <!--<![endif]-->
<head> <title> </title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow"> <meta name="description" content="">
<meta name="keywords" content=""> <meta http-equiv="Copyright"
content="templatelokomedia.co.nr"> <meta name="author"
content="templatelokomedia.co.nr">
<meta http-equiv="imagetoolbar" content="no"> <meta name="language" content="Indonesia"> <meta name="revisit-after" content="7"> <meta name="webcrawlers" content="all"> <meta name="rating" content="general">
(24)
<meta name="spiders" content="all">
<link rel="shortcut icon" href="favicon.ico" /> <link rel="alternate" type="application/rss+xml" title="templatelokomedia.co.nr" href=" " />
<link rel="alternate" type="application/atom+xml" title="templatelokomedia.co.nr" href=" " />
<link rel="shortcut" href="images/favicon.html" /> <link rel="stylesheet" type="text/css"
href="templates/tantra/stylesheets/style.css" /> <link rel="stylesheet"
href="templates/tantra/stylesheets/lof-style2.css" type="text/css"/>
<link rel="stylesheet"
href="templates/tantra/paging.css" type="text/css"/>
<link rel="stylesheet"
href="templates/tantra/css/prettyPhoto.css" type="text/css" media="screen"/>
<link
href='http://fonts.googleapis.com/css?family=PT+Sa ns+Caption' rel='stylesheet' type='text/css'/> <!-- initialize jQuery Library -->
<script type="text/javascript"
src="../ajax.googleapis.com/ajax/libs/jquery/1.7.1 /jquery.min.js"></script>
<script type="text/javascript"
src="templates/tantra/js/jquery.min.js"></script> <script type="text/javascript"
src="templates/tantra/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="templates/tantra/js/jquery-1.7.min.js"></script>
(25)
<script type="text/javascript"
src="templates/tantra/js/jquery.easing.js"></scrip t>
<script type="text/javascript"
src="templates/tantra/scripts/jquery.prettyPhoto.j s"></script>
<script type="text/javascript"
src="templates/tantra/js/jquery.scrollto.min.js">< /script>
<script type="text/javascript"
src="templates/tantra/js/lof-script.js"></script> <script type="text/javascript">
$(document).ready( function(){
$('#lofslidecontent45').lofJSidernews( { interval:4000,
easing:'easeInOutExpo', isPreloaded : false, // for IE9
duration:1200, auto:true } ); });
</script>
<!-- javascript -->
<script type="text/javascript"
src="templates/tantra/scripts/modernizr.js"></scri pt>
<script type="text/javascript"
src="templates/tantra/scripts/jquery.nivo.slider.j s"></script>
(26)
<script type="text/javascript"
src="templates/tantra/scripts/jquery.prettyPhoto.j s"></script>
<script type="text/javascript"
src="templates/tantra/scripts/script.js"></script> <script type="text/javascript"
src="templates/tantra/scripts/jquery.easing.1.3.js "></script>
<script type="text/javascript"
src="templates/tantra/scripts/jquery.quicksand.js" ></script>
<script>
$(document).ready(function() {
$("a[data-rel^='prettyPhoto']").prettyPhoto(); });
</script>
<! Insert to your webpage before the </head> -->
<script
src="sliderjs/amazingslider.js"></script> <link rel="stylesheet" type="text/css" href="sliderjs/amazingslider-1.css">
<script src="sliderjs/initslider-1.js"></script>
<!-- End of head section HTML codes --> </head>
<body class="tantra h-style-1 text-1 skin-1">
<div id="wrapper"> <header class="clearfix"> <div id="logo"> <span> <img
(27)
</div>
<!--/ #logo-->
</header> <div class="container"> <div class="search-container">
<?php include 'inc/search.php'; ?> <!--/ #searchForm-->
</div>
<!--/ .search-container-->
<?php include 'inc/nav.php'; ?> <div id="amazingslider-wrapper-1"
style="display:block;position:relative;max-width:1500px;margin:0px auto 98px;">
<div id="amazingslider-1"
style="display:block;position:relative;margin:0 auto;">
<ul class="amazingslider-slides" style="display:none;">
<li><img
src="sliderimg/thumb_975x300_ACDM-2016-Website-Banner-02a.jpg" alt="Optimalisasi kerjasama asean menuju acdm 2016" title="Optimalisasi kerjasama asean menuju acdm 2016" />
</li> <li><img
src="sliderimg/thumb_975x300_foto%20MoU%20Fiji%20d an%20Indonesia.jpg" alt="Indonesia dan Fiji jalin kerjasama penanggulangan bencana"
title="Indonesia dan Fiji jalin kerjasama penanggulangan bencana" />
</li> <li><img
(28)
pencegahan kebakaran hutan dan lahan tahun 2016" title="Presiden pimpin rekornas pencegahan
kebakaran hutan dan lahan tahun 2016" /> </li>
<li><img
src="sliderimg/thumb_975x300_web-ibnu-hajar1.jpg" alt="Pentingnya edukasi bencana bagi pelajar dan mahasiswa" title="Pentingnya edukasi bencana bagi pelajar dan mahasiswa" />
</li> <li><img
src="sliderimg/thumb_975x300_IMG_20160127_115008.j pg" alt="Pemberdayaan masyarakat untuk cegah
karhutla 2016 di riau" title="Pemberdayaan
masyarakat untuk cegah karhutla 2016 di riau" /> </li>
</ul>
<ul class="amazingslider-thumbnails" style="display:none;">
<li><img
src="sliderimg/thumb_975x300_ACDM-2016-Website-Banner-02a-tn.jpg" alt="Optimalisasi kerjasama asean menuju acdm 2016" title="Optimalisasi kerjasama asean menuju acdm 2016" /></li> <li><img
src="sliderimg/thumb_975x300_foto%20MoU%20Fiji%20d an%20Indonesia-tn.jpg" alt="Indonesia dan Fiji jalin kerjasama penanggulangan bencana"
title="Indonesia dan Fiji jalin kerjasama penanggulangan bencana" /></li>
<li><img
src="sliderimg/thumb_975x300_Foto-Rakornas-Karhutla-2016b-tn.jpg" alt="Presiden pimpin
(29)
rekornas pencegahan kebakaran hutan dan lahan tahun 2016" title="Presiden pimpin rekornas pencegahan kebakaran hutan dan lahan tahun 2016" /></li>
<li><img
src="sliderimg/thumb_975x300_web-ibnu-hajar1-tn.jpg" alt="Pentingnya edukasi bencana bagi pelajar dan mahasiswa" title="Pentingnya edukasi bencana bagi pelajar dan mahasiswa" /></li>
<li><img
src="sliderimg/thumb_975x300_IMG_20160127_115008-tn.jpg" alt="Pemberdayaan masyarakat untuk cegah karhutla 2016 di riau" title="Pemberdayaan
masyarakat untuk cegah karhutla 2016 di riau" /></li> </ul> </div> </div>
<!-- End of body section HTML codes --> </div> <!--/ .content-container--> <div style="margin-top: 20px;" class="entry clearfix"><div id="content">
<div class="title-caption"> <h3>BERITA TERBARU</h3>
<a href="semua-berita.php" class="rss"></a> </div>
<?php
$query = mysqli_query($kon, "SELECT * FROM berita ORDER BY tanggal DESC");
while($row = mysqli_fetch_array($query)) { ?> <article class="post-item clearfix">
<section class="post-thumb"> <a href='foto_berita/<?php echo $row['gambar']; ?>' title='<?php echo
$row['judul']; ?>' class='thumb' data-rel='prettyPhoto[galleryName]'>
(30)
<img src='foto_berita/<?php echo $row['gambar']; ?>' width='240' height='170' class='small-custom-frame'/></a>
<div class="platform-teaser" style="padding-bottom:15px"> <a
href="berita-selengkapnya?judul=<?php echo $row['judul']; ?>"></a> </div>
<!--/ .platform-teaser--> </section>
<!--/ .post-thumb--> <section class="post-entry"> <div class="post-title"> <h5> <a
href="berita-selengkapnya.php?judul=<?php echo $row['judul']; ?>" class='title' > <?php echo $row['judul']; ?> </a></h5> <a href="#" class="pc"><?php echo $row['tanggal']; ?></a><br />
</div>
<!--/ .post-title--> <br />
<div class="star"></div> <!--/ .star-->
<p align=justify ><?php echo $row['singkatnya']; ?><br>
<br><a
href="berita-selengkapnya.php?judul=<?php echo $row['judul']; ?>" class='xbox'>Selengkapnya </a>
</section> </article> <?php } ?> <br> </div><aside id="sidebar">
<div id="fb-root"> </div> </aside> <!--/ #sidebar-->
(31)
</div> <!--/ .entry-->
<footer id="footer" class="clearfix"> <div style="color: white; padding: 15px; font-size: 14px;">
<p><a href='hubungi-kami.php'>Contact Us<br><a href='semua-album.php'>Galerry</a></p> <a href='semua-berita.php'><img
src="templates/tantra/images/logo2.png" /></a> <div class="copyright"> Copyright © 2016. Informasi Bencana Alam. Development by Imam Batubara. All rights reserved </div>
<!--/ .copyright-->
</footer> <!--/ #footer--> </div> <!--/ .container-->
</div><!--/ #wrapper--> <!-- #control_panel --> script type="text/javascript"
src="templates/tantra/js/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript"
src="templates/tantra/js/jquery.mousewheel.min.js" ></script>
<script type="text/javascript"
src="templates/tantra/js/general.js"></script> </body>
</html>
5. semua-berita.php
<?php include '../koneksi.php'; ?>
<!DOCTYPE html>
<html class="not-ie no-js" lang="en"> <!--<![endif]-->
(32)
<head> <title> </title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow"> <meta name="description" content="">
<meta name="keywords" content=""> <meta http-equiv="Copyright"
content="templatelokomedia.co.nr"> <meta name="author"
content="templatelokomedia.co.nr">
<meta http-equiv="imagetoolbar" content="no"> <meta name="language" content="Indonesia"> <meta name="revisit-after" content="7"> <meta name="webcrawlers" content="all"> <meta name="rating" content="general"> <meta name="spiders" content="all">
<link rel="shortcut icon" href="favicon.ico" /> <link rel="alternate" type="application/rss+xml" title="templatelokomedia.co.nr" href=" " />
<link rel="alternate" type="application/atom+xml" title="templatelokomedia.co.nr" href=" " />
<link rel="shortcut" href="images/favicon.html" /> <link rel="stylesheet" type="text/css"
href="templates/tantra/stylesheets/style.css" /> <link rel="stylesheet"
href="templates/tantra/stylesheets/lof-style2.css" type="text/css"/>
<link rel="stylesheet"
href="templates/tantra/paging.css" type="text/css"/>
(33)
<link rel="stylesheet"
href="templates/tantra/css/prettyPhoto.css" type="text/css" media="screen"/>
<link
href='http://fonts.googleapis.com/css?family=PT+Sa ns+Caption' rel='stylesheet' type='text/css'/> <!-- initialize jQuery Library -->
<script type="text/javascript"
src="../ajax.googleapis.com/ajax/libs/jquery/1.7.1 /jquery.min.js"></script>
<script type="text/javascript"
src="templates/tantra/js/jquery.min.js"></script> <script type="text/javascript"
src="templates/tantra/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="templates/tantra/js/jquery-1.7.min.js"></script>
<script type="text/javascript"
src="templates/tantra/js/jquery.easing.js"></scrip t>
<script type="text/javascript"
src="templates/tantra/scripts/jquery.prettyPhoto.j s"></script>
<script type="text/javascript"
src="templates/tantra/js/jquery.scrollto.min.js">< /script>
<script type="text/javascript"
src="templates/tantra/js/lof-script.js"></script> <script type="text/javascript">
(34)
$('#lofslidecontent45').lofJSidernews( { interval:4000,
easing:'easeInOutExpo', isPreloaded : false, // for IE9
duration:1200, auto:true } ); }); </script>
<!-- javascript -->
<script type="text/javascript"
src="templates/tantra/scripts/modernizr.js"></scri pt>
<script type="text/javascript"
src="templates/tantra/scripts/jquery.nivo.slider.j s"></script>
<script type="text/javascript"
src="templates/tantra/scripts/jquery.prettyPhoto.j s"></script>
<script type="text/javascript"
src="templates/tantra/scripts/script.js"></script> <script type="text/javascript"
src="templates/tantra/scripts/jquery.easing.1.3.js "></script>
<script type="text/javascript"
src="templates/tantra/scripts/jquery.quicksand.js" ></script>
<script>
$(document).ready(function() {
$("a[data-rel^='prettyPhoto']").prettyPhoto(); });
</script> <!--[if lt IE 9]>
(35)
<script src="js/modernizr.custom.js"></script> <script
src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js">< /script>
<script type="text/javascript" src="js/ie.js"></script>
<![endif]-->
</head>
<body class="tantra h-style-1 text-1 skin-1">
<div id="wrapper">
<header class="clearfix"> <div id="logo"> <span> <img
src="templates/tantra/images/logo.png" /> </span>
</div>
<!--/ #logo-->
<div class="container">
<div class="search-container">
<?php include 'inc/search.php'; ?> <!--/ #searchForm-->
</div> <!--/ .search-container--> <?php include 'inc/nav.php'; ?> <!--/ .platform-menu-->
<div class="entry clearfix"> <div id="content">
<div id='begin' class='inner'> <div class='title-caption-large'>
<h3>Semua Berita</h3> </div>
(36)
<?php
$query = mysqli_query($kon, "SELECT * FROM berita");
while($row = mysqli_fetch_array($query)) { ?>
<div>
<a href="berita-selengkapnya.php?judul=<?php echo $row['judul']; ?>"><h2><?php echo $row['judul']; ?></h2> </a>
<div class='alignleft small_shadow'> <a href='foto_berita/<?php echo $row['gambar']; ?>' title='<?php echo
$row['judul']; ?>' data-rel='prettyPhoto '> <img src='foto_berita/<?php echo
$row['gambar']; ?>' width='266' height='180' class='frame'></a>
</div> <a class="xbox" href="#"><?php echo $row['tanggal']; ?></a> <br><br>
<?php echo $row['singkatnya']; ?></a> <br><br>
<a
href="berita-selengkapnya.php?judul=<?php echo $row['judul']; ?>" class='pc'>Selengkapnya
</a>
<div class='sep'></div> </div> <?php } ?>
</div> </div> <aside>
</aside>
<aside id="sidebar">
<div class="categories widget clearfix"> <div class="title-caption">
(37)
</div>
<div class="latest-video widget"> <ul class="entry-holder">
</ul> </div>
<div class="latest-video widget"> <div class="title-caption-dark"> </div>
<ul class="entry-holder"> </ul>
</div>
<div class="latest-video widget">
<div class="title-caption-dark"> </div>
<div class="entry-holder"> <div id="fb-root">
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
fjs.parentNode.insertBefore(js, fjs); }</script>
<div class="fb-like-box"
data-width="237" data-height="260" data-show-faces="true" data-stream="true" data-header="true"> </div>
</div> </div>
<!--/ .latest-video--> </aside>
(38)
</div>
<footer id="footer" class="clearfix"> <div style="color: white; padding: 15px; font-size: 14px;">
<p><a href='hubungi-kami.php'>Contact Us<br>
<a href='semua-album.php'>Galerry</a></p> <a href='semua-berita.php'><img
src="templates/tantra/images/logo2.png" /></a> <div class="copyright"> Copyright © 2016. Informasi Bencana Alam. Development by Imam Batubara. All rights reserved </div>
<!--/ .copyright--> </footer>
<!--/ #footer-->
</div> <!--/ .container--> </div>
<!--/ #wrapper-->
<!-- #control_panel -->
<script type="text/javascript" src="templates/tantra/js/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript"
src="templates/tantra/js/jquery.mousewheel.min.js" ></script>
<script type="text/javascript"
src="templates/tantra/js/general.js"></script> </body>
</html>
(39)
<!DOCTYPE html>
<html class="not-ie no-js" lang="en"> <!--<![endif]-->
<head> <title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow"> <meta name="keywords" content="bencana"> <meta http-equiv="Copyright"
content="templatelokomedia.co.nr">
<meta name="author" content="templatelokomedia.co.nr"> <meta http-equiv="imagetoolbar" content="no">
<meta name="language" content="Indonesia"> <meta name="revisit-after" content="7"> <meta name="webcrawlers" content="all"> <meta name="rating" content="general"> <meta name="spiders" content="all">
<link rel="shortcut icon" href="favicon.ico" /> <link rel="alternate" type="application/rss+xml" title="templatelokomedia.co.nr" href=" " />
<link rel="alternate" type="application/atom+xml" title="templatelokomedia.co.nr" href=" " />
<link rel="shortcut" href="images/favicon.html" /> <link rel="stylesheet" type="text/css"
href="templates/tantra/stylesheets/style.css" /> <link rel="stylesheet"
href="templates/tantra/stylesheets/lof-style2.css" type="text/css"/>
<link rel="stylesheet"
(40)
<link rel="stylesheet"
href="templates/tantra/css/prettyPhoto.css" type="text/css" media="screen"/>
<link
href='http://fonts.googleapis.com/css?family=PT+Sans+Ca ption' rel='stylesheet' type='text/css'/>
<!-- initialize jQuery Library --> <script type="text/javascript"
src="../ajax.googleapis.com/ajax/libs/jquery/1.7.1/jque ry.min.js"></script>
<script type="text/javascript"
src="templates/tantra/js/jquery.min.js"></script> <script type="text/javascript"
src="templates/tantra/js/jquery-1.7.1.min.js"></script> <script type="text/javascript"
src="templates/tantra/js/jquery-1.7.min.js"></script> <script type="text/javascript"
src="templates/tantra/js/jquery.easing.js"></script> <script type="text/javascript"
src="templates/tantra/scripts/jquery.prettyPhoto.js"></ script>
<script type="text/javascript"
src="templates/tantra/js/jquery.scrollto.min.js"></scri pt>
<script type="text/javascript"
src="templates/tantra/js/lof-script.js"></script> <script type="text/javascript">
$(document).ready( function(){
$('#lofslidecontent45').lofJSidernews( { interval:4000,
easing:'easeInOutExpo',
isPreloaded : false, // for IE9 duration:1200,
(41)
auto:true } ); });
</script>
<!-- javascript -->
<script type="text/javascript"
src="templates/tantra/scripts/modernizr.js"></script> <script type="text/javascript"
src="templates/tantra/scripts/jquery.nivo.slider.js"></ script>
<script type="text/javascript"
src="templates/tantra/scripts/jquery.prettyPhoto.js"></ script>
<script type="text/javascript"
src="templates/tantra/scripts/script.js"></script> <script type="text/javascript"
src="templates/tantra/scripts/jquery.easing.1.3.js"></s cript>
<script type="text/javascript"
src="templates/tantra/scripts/jquery.quicksand.js"></sc ript>
<script>
$(document).ready(function() {
$("a[data-rel^='prettyPhoto']").prettyPhoto(); });
</script> <!--[if lt IE 9]>
<script src="js/modernizr.custom.js"></script> <script
src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></scri pt>
(42)
<script type="text/javascript" src="js/ie.js"></script>
<![endif]--> </head>
<body class="tantra h-style-1 text-1 skin-1">
<div id="wrapper">
<header class="clearfix"> <div id="logo"> <span> <img
src="templates/tantra/images/logo.png" /> </span>
</div> <!--/ #logo--> </header>
<div class="container">
<div class="search-container"> <?php include 'inc/search.php'; ?> <!--/ #searchForm-->
</div>
<!--/ .search-container-->
<?php include 'inc/nav.php'; ?> <!--/ .platform-menu-->
<div class="entry clearfix"> <div id="content">
<div id='begin' class='inner'>
<p><a class="xbox" href="siaga.php">Siaga Bencana <a class="xbox" href="potensi.php">Potensi Ancaman Bencana
<a class="xbox" href="sistem.php">Sistem Penanggulangan Bencana
<a class="xbox" href="defenisi.php">Definisi dan Jenis Bencana</a></p><br><br>
(43)
<h3>SIAGA BENCANA</h3>
</div>
<p>Apakah anda sudah siap siaga menghadapi ancaman bencana? Sejak dini, kita perlu menyadari bahwa kita hidup di wilayah rawan bencana. Kenyataan ini mendorong kita untuk mempersiapkan diri, keluarga, dan komunitas di sekitar kita. Kesiapsiagaan diri diharapkan pada akhirnya mampu untuk mengantisipasi ancaman bencana dan meminimalkan korban jiwa, korban luka, maupun kerusakan infrastruktur. Mulai dari dalam diri sendiri, kita
dapat membantu keluarga dan komunitas untuk membangun kesiapsiagaan, maupun pada saat menghadapi bencana dan pulih kembali pasca bencana.</p>
<p>Berikut beberapa jenis bencana dan cara apa yang kita harus lakukan ketika bencana itu datang:</p>
<ol>
<li>Gempa Bumi</li> <li>Tsunami</li> <li>Gunung Api</li> <li>Banjir</li>
<li>Tanah Longsor</li> <li>Kekeringan</li> <li>Angin Topan</li> <li>Kebakaran</li>
<li>Wabah Penyakit</li> </ol>
</div> </div>
(44)
<div class="categories widget clearfix"> <div class="title-caption">
</div>
<div class="latest-video widget"> <ul class="entry-holder">
</ul> </div>
<div class="latest-video widget"> <div class="title-caption-dark">
</div> <ul class="entry-holder"> </ul>
</div>
<div class="latest-video widget"> <div class="title-caption-dark">
</div>
<div class="entry-holder"> <div id="fb-root">
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
fjs.parentNode.insertBefore(js, fjs); }</script>
<div class="fb-like-box"
data-width="237" data-height="260" data-show-faces="true" data-stream="true"
(45)
data-header="true"> </div>
</div> </div>
<!--/ .latest-video-->
</aside>
<!--/ #sidebar--> </div>
<!--/ .entry-->
<footer id="footer" class="clearfix"> <div style="color: white; padding: 15px; font-size: 14px;">
<p><a href='hubungi-kami.php'>Contact Us<br> <a href='semua-album.php'>Galerry</a></p> <a href='semua-berita.php'><img
src="templates/tantra/images/logo2.png" /></a> <div class="copyright"> Copyright © 2016.
Informasi Bencana Alam. Development by Imam Batubara. All rights reserved </div>
<!--/ .copyright--> </footer>
<!--/ #footer-->
</div> <!--/ .container-->
</div><!--/ #wrapper--> <!-- #control_panel --> <script type="text/javascript"
src="templates/tantra/js/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript"
src="templates/tantra/js/jquery.mousewheel.min.js"></sc ript>
<script type="text/javascript"
(46)
</body> </html>
7. videos.php
<!DOCTYPE html>
<html class="not-ie no-js" lang="en"> <!--<![endif]-->
<head> <title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow"> <meta name="keywords" content="">
<meta http-equiv="Copyright"
content="templatelokomedia.co.nr"> <meta name="author"
content="templatelokomedia.co.nr">
<meta http-equiv="imagetoolbar" content="no"> <meta name="language" content="Indonesia"> <meta name="revisit-after" content="7"> <meta name="webcrawlers" content="all"> <meta name="rating" content="general"> <meta name="spiders" content="all">
<link rel="shortcut icon" href="favicon.ico" /> <link rel="alternate" type="application/rss+xml" title="templatelokomedia.co.nr" href=" " />
<link rel="alternate" type="application/atom+xml" title="templatelokomedia.co.nr" href=" " />
(47)
<link rel="stylesheet" type="text/css"
href="templates/tantra/stylesheets/style.css" /> <link rel="stylesheet"
href="templates/tantra/stylesheets/lof-style2.css" type="text/css"/>
<link rel="stylesheet"
href="templates/tantra/paging.css" type="text/css"/> <link rel="stylesheet"
href="templates/tantra/css/prettyPhoto.css" type="text/css" media="screen"/>
<link
href='http://fonts.googleapis.com/css?family=PT+Sans +Caption' rel='stylesheet' type='text/css'/>
<!-- initialize jQuery Library --> <script type="text/javascript"
src="../ajax.googleapis.com/ajax/libs/jquery/1.7.1/j query.min.js"></script>
<script type="text/javascript"
src="templates/tantra/js/jquery.min.js"></script> <script type="text/javascript"
src="templates/tantra/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="templates/tantra/js/jquery-1.7.min.js"></script>
<script type="text/javascript"
src="templates/tantra/js/jquery.easing.js"></script> <script type="text/javascript"
src="templates/tantra/scripts/jquery.prettyPhoto.js" ></script>
<script type="text/javascript"
src="templates/tantra/js/jquery.scrollto.min.js"></s cript>
(48)
<script type="text/javascript"
src="templates/tantra/js/lof-script.js"></script> <script type="text/javascript">
$(document).ready( function(){
$('#lofslidecontent45').lofJSidernews( { interval:4000,
easing:'easeInOutExpo',
isPreloaded : false, // for IE9 duration:1200,
auto:true } ); });
</script>
<!-- javascript -->
<script type="text/javascript"
src="templates/tantra/scripts/modernizr.js"></script >
<script type="text/javascript"
src="templates/tantra/scripts/jquery.nivo.slider.js" ></script>
<script type="text/javascript"
src="templates/tantra/scripts/jquery.prettyPhoto.js" ></script>
<script type="text/javascript"
src="templates/tantra/scripts/script.js"></script> <script type="text/javascript"
src="templates/tantra/scripts/jquery.easing.1.3.js"> </script>
<script type="text/javascript"
src="templates/tantra/scripts/jquery.quicksand.js">< /script>
(49)
$(document).ready(function() {
$("a[data-rel^='prettyPhoto']").prettyPhoto(); });
</script>
</head><body class="tantra h-style-1 text-1 skin-1"> <div id="wrapper">
<header class="clearfix"> <div id="logo"> <span> <img
src="templates/tantra/images/logo.png" /> </span> </div>
<!--/ #logo--> </header>
<div class="container">
<div class="search-container">
<?php include 'inc/search.php'; ?> <!--/ #searchForm-->
</div>
<!--/ .search-container--> <?php include 'inc/nav.php'; ?> <!--/ .platform-menu--> <div class="entry clearfix"> <div id="content">
<div id='begin' class='inner'> <div class='title-caption-large'><h3>VIDEOS</h3>
</div> <div class="latest-video widget"><div class="title-caption-dark"> <h3>Videos</h3> </div> <div
class="entry-holder"> <iframe width='280px' height='260'
rc='https://www.youtube.com/embed/j_P80hi0eY0' frameborder='0' allowfullscreen></iframe>
(50)
<iframe width='280px' height='260' src='http://www.youtube.com/embed/qUf79xBvpZU' frameborder='0' allowfullscreen></iframe> <iframe width='280px' height='260' src='http://www.youtube.com/embed/YE8i-AxjweI' frameborder='0' allowfullscreen></iframe> <iframe width='280px' height='260' src='http://www.youtube.com/embed/ZiNeroWXMW4' frameborder='0' allowfullscreen></iframe>
<iframe width='280px' height='260' src='http://www.youtube.com/embed/4YnBZafUiDc' frameborder='0' allowfullscreen></iframe>
<iframe width='280px' height='260' src='http://www.youtube.com/embed/POMyZ36cr8' frameborder='0' allowfullscreen></iframe>
<iframe width='280px' height='260' src='http://www.youtube.com/embed/ywb18YTZGwE' frameborder='0' allowfullscreen></iframe>
<iframe width='280px' height='260' src='http://www.youtube.com/embed/eTy9-7XeJUs' frameborder='0' allowfullscreen></iframe>
</div> </div>
</div> <!--/ .entry-->
<footer id="footer" class="clearfix"> <div style="color: white; padding: 15px; font-size: 14px;">
<p><a href='hubungi-kami.php'>Contact Us<br> <a href='semua-album.php'>Galerry</a></p> <a href='semua-berita.php'><img
(51)
<div class="copyright"> Copyright © 2016. Informasi Bencana Alam. Development by Imam Batubara. All rights reserved </div>
<!--/ .copyright--> </footer>
<!--/ #footer--> </div>
<!--/ .container--> </div>
<!--/ #wrapper-->
<!-- #control_panel -->
<script type="text/javascript" src="templates/tantra/js/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript"
src="templates/tantra/js/jquery.mousewheel.min.js">< /script>
<script type="text/javascript"
src="templates/tantra/js/general.js"></script> </body></html>
8. cuaca.php
<?php include '../koneksi.php'; ?>
<!DOCTYPE html>
<html class="not-ie no-js" lang="en"> <!--<![endif]-->
<head> <title> </title>
(52)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow"> <meta name="description" content="">
<meta name="keywords" content=""> <meta http-equiv="Copyright"
content="templatelokomedia.co.nr"> <meta name="author"
content="templatelokomedia.co.nr">
<meta http-equiv="imagetoolbar" content="no"> <meta name="language" content="Indonesia"> <meta name="revisit-after" content="7"> <meta name="webcrawlers" content="all"> <meta name="rating" content="general"> <meta name="spiders" content="all">
<link rel="shortcut icon" href="favicon.ico" /> <link rel="alternate" type="application/rss+xml" title="templatelokomedia.co.nr" href=" " />
<link rel="alternate" type="application/atom+xml" title="templatelokomedia.co.nr" href=" " />
<link rel="shortcut" href="images/favicon.html" /> <link rel="stylesheet" type="text/css"
href="templates/tantra/stylesheets/style.css" /> <link rel="stylesheet"
href="templates/tantra/stylesheets/lof-style2.css" type="text/css"/>
<link rel="stylesheet"
href="templates/tantra/paging.css" type="text/css"/> <link rel="stylesheet"
href="templates/tantra/css/prettyPhoto.css" type="text/css" media="screen"/>
(53)
<link
href='http://fonts.googleapis.com/css?family=PT+Sans +Caption' rel='stylesheet' type='text/css'/>
<!-- initialize jQuery Library --> <script type="text/javascript"
src="../ajax.googleapis.com/ajax/libs/jquery/1.7.1/j query.min.js"></script>
<script type="text/javascript"
src="templates/tantra/js/jquery.min.js"></script> <script type="text/javascript"
src="templates/tantra/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="templates/tantra/js/jquery-1.7.min.js"></script>
<script type="text/javascript"
src="templates/tantra/js/jquery.easing.js"></script> <script type="text/javascript"
src="templates/tantra/scripts/jquery.prettyPhoto.js" ></script>
<script type="text/javascript"
src="templates/tantra/js/jquery.scrollto.min.js"></s cript>
<script type="text/javascript"
src="templates/tantra/js/lof-script.js"></script> <script type="text/javascript">
$(document).ready( function(){
$('#lofslidecontent45').lofJSidernews( { interval:4000,
easing:'easeInOutExpo',
isPreloaded : false, // for IE9 duration:1200,
(54)
});
</script>
<!-- javascript -->
<script type="text/javascript"
src="templates/tantra/scripts/modernizr.js"></script >
<script type="text/javascript"
src="templates/tantra/scripts/jquery.nivo.slider.js" ></script>
<script type="text/javascript"
src="templates/tantra/scripts/jquery.prettyPhoto.js" ></script>
<script type="text/javascript"
src="templates/tantra/scripts/script.js"></script> <script type="text/javascript"
src="templates/tantra/scripts/jquery.easing.1.3.js"> </script>
<script type="text/javascript"
src="templates/tantra/scripts/jquery.quicksand.js">< /script>
<script>
$(document).ready(function() {
$("a[data-rel^='prettyPhoto']").prettyPhoto(); });
</script>
</head>
<body class="tantra h-style-1 text-1 skin-1"> <div id="wrapper">
(55)
<div id="logo"> <span> <img
src="templates/tantra/images/logo.png" /> </span> </div>
<!--/ #logo--> </header>
<div class="container">
<div class="search-container">
<?php include 'inc/search.php'; ?> <!--/ #searchForm-->
</div>
<!--/ .search-container-->
<?php include 'inc/nav.php'; ?> <!--/ .platform-menu-->
<div class="entry clearfix"> <div id="content"> <div id='begin' class='inner'>
<div class='title-caption-large'> <h3>PRAKIRAAN CUACA</h3> </div> <table>
<?php $query = mysqli_query($kon, "SELECT * FROM cuaca ORDER BY ID DESC");
$kota = array(); $kondisi = array(); $derajat = array(); $gambar = array();
while($row = mysqli_fetch_array($query)) { $kota[] = $row['kota'];
$kondisi[] = $row['kondisi']; $derajat[] = $row['derajat']; $gambar[] = $row['gambar']; }
echo "<tr>";
(56)
?>
<td align=center valign=top> <div class='small_shadow2'>
<img src='img_cuaca/<?php echo $gambar[$i]; ?>' width='146' height='110' class='frame' >
</a> </div>
<p align=left class='border light_border neutral_outline'> <b><?php echo $kota[$i]; ?></b><br>
<?php echo $kondisi[$i]; ?></div><br> <?php echo $derajat[$i]; ?></div></p> </td>
<?php
} echo "</tr><tr>";
for ($i = 5; $i < 10; $i++) { ?>
<td align=center valign=top> <div class='small_shadow2'>
<img src='img_cuaca/<?php echo $gambar[$i]; ?>' width='146' height='110' class='frame' >
</a> </div>
<p align=left class='border light_border neutral_outline'> <b><?php echo $kota[$i]; ?></b><br>
<?php echo $kondisi[$i]; ?></div><br> <?php echo $derajat[$i]; ?></div></p> </td>
<?php }
(57)
for ($i = 10; $i < 15; $i++) { ?>
<td align=center valign=top> <div class='small_shadow2'>
<img src='img_cuaca/<?php echo $gambar[$i]; ?>' width='146' height='110' class='frame' >
</a> </div>
<p align=left class='border light_border neutral_outline'> <b><?php echo $kota[$i]; ?></b><br>
<?php echo $kondisi[$i]; ?></div><br> <?php echo $derajat[$i]; ?></div></p> </td>
<?php
} echo "</tr><tr>";
for ($i = 15; $i < 20; $i++) { ?>
<td align=center valign=top> <div class='small_shadow2'>
<img src='img_cuaca/<?php echo $gambar[$i]; ?>' width='146' height='110' class='frame' >
</a> </div>
<p align=left class='border light_border neutral_outline'> <b><?php echo $kota[$i]; ?></b><br>
<?php echo $kondisi[$i]; ?></div><br> <?php echo $derajat[$i]; ?></div></p> </td> <?php
} echo "</tr><tr>";
for ($i = 20; $i < 25; $i++) { ?> <td align=center valign=top> <div class='small_shadow2'>
(58)
<img src='img_cuaca/<?php echo $gambar[$i]; ?>' width='146' height='110' class='frame' >
</a> </div>
<p align=left class='border light_border neutral_outline'> <b><?php echo $kota[$i]; ?></b><br>
<?php echo $kondisi[$i]; ?></div><br> <?php echo $derajat[$i]; ?></div></p> </td> <?php
} echo "</tr><tr>";
for ($i = 25; $i < 30; $i++) { ?><td align=center valign=top> <div class='small_shadow2'>
<img src='img_cuaca/<?php echo $gambar[$i]; ?>' width='146' height='110' class='frame' >
</a> </div>
<p align=left class='border light_border neutral_outline'> <b><?php echo $kota[$i]; ?></b><br>
<?php echo $kondisi[$i]; ?></div><br> <?php echo $derajat[$i]; ?></div></p> </td> <?php }
?>
</tr> </table>
</div> </div>
<aside id="sidebar">
<div class="categories widget clearfix"> <div class="title-caption"> </div>
<div class="latest-video widget">
(59)
<ul class="entry-holder"> </ul>
</div>
<div class="latest-video widget"> <div class="title-caption-dark">
</div>
<ul class="entry-holder"> </ul>
</div>
<div class="latest-video widget"> <div class="title-caption-dark"> </div>
<div class="entry-holder"> <div id="fb-root">
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
fjs.parentNode.insertBefore(js, fjs); }</script>
<div class="fb-like-box"
data-width="237" data-height="260" data-show-faces="true" data-stream="true" data-header="true"> </div>
</div> </div>
(60)
</aside>
<!--/ #sidebar--> </div>
<!--/ .entry-->
<footer id="footer" class="clearfix">
<div style="color: white; padding: 15px; font-size: 14px;">
<p><a href='hubungi-kami.php'>Contact Us<br> <a href='semua-album.php'>Galerry</a></p> <a href='semua-berita.php'><img
src="templates/tantra/images/logo2.png" /></a> <div class="copyright"> Copyright © 2016. Informasi Bencana Alam. Development by Imam Batubara. All rights reserved </div>
<!--/ .copyright--> </footer>
<!--/ #footer--> </div>
<!--/ .container--> </div>
<!--/ #wrapper-->
<!-- #control_panel -->
<script type="text/javascript" src="templates/tantra/js/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript"
src="templates/tantra/js/jquery.mousewheel.min.js">< /script>
<script type="text/javascript"
src="templates/tantra/js/general.js"></script> </body>
</html>
(61)
9. koneksi.php
<?php
@session_start();
$kon = mysqli_connect("localhost", "root", "", "tugas_akhir");
if (!$kon) {
echo "Error... " . mysqli_error($kon); }
10. Pencarian.php
<?php include '../koneksi.php'; ?>
<!DOCTYPE html>
<html class="not-ie no-js" lang="en"> <!--<![endif]-->
<head> <title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow"> <meta name="description" content="">
<meta name="keywords" content=""> <meta http-equiv="Copyright"
content="templatelokomedia.co.nr">
<meta name="author" content="templatelokomedia.co.nr"> <meta http-equiv="imagetoolbar" content="no">
<meta name="language" content="Indonesia"> <meta name="revisit-after" content="7"> <meta name="webcrawlers" content="all">
(62)
<meta name="rating" content="general"> <meta name="spiders" content="all">
<link rel="shortcut icon" href="favicon.ico" /> <link rel="alternate" type="application/rss+xml" title="templatelokomedia.co.nr" href=" " />
<link rel="alternate" type="application/atom+xml" title="templatelokomedia.co.nr" href=" " />
<link rel="shortcut" href="images/favicon.html" /> <link rel="stylesheet" type="text/css"
href="templates/tantra/stylesheets/style.css" /> <link rel="stylesheet"
href="templates/tantra/stylesheets/lof-style2.css" type="text/css"/>
<link rel="stylesheet"
href="templates/tantra/paging.css" type="text/css"/> <link rel="stylesheet"
href="templates/tantra/css/prettyPhoto.css" type="text/css" media="screen"/>
<link
href='http://fonts.googleapis.com/css?family=PT+Sans+Ca ption' rel='stylesheet' type='text/css'/>
<!-- initialize jQuery Library --> <script type="text/javascript"
src="../ajax.googleapis.com/ajax/libs/jquery/1.7.1/jque ry.min.js"></script>
<script type="text/javascript"
src="templates/tantra/js/jquery.min.js"></script> <script type="text/javascript"
src="templates/tantra/js/jquery-1.7.1.min.js"></script> <script type="text/javascript"
src="templates/tantra/js/jquery-1.7.min.js"></script> <script type="text/javascript"
(63)
<script type="text/javascript"
src="templates/tantra/scripts/jquery.prettyPhoto.js"></ script>
<script type="text/javascript"
src="templates/tantra/js/jquery.scrollto.min.js"></scri pt>
<script type="text/javascript"
src="templates/tantra/js/lof-script.js"></script> <script type="text/javascript">
$(document).ready( function(){
$('#lofslidecontent45').lofJSidernews( { interval:4000,
easing:'easeInOutExpo',
isPreloaded : false, // for IE9 duration:1200,
auto:true } ); }); </script>
<!-- javascript -->
<script type="text/javascript"
src="templates/tantra/scripts/modernizr.js"></script> <script type="text/javascript"
src="templates/tantra/scripts/jquery.nivo.slider.js"></ script>
<script type="text/javascript"
src="templates/tantra/scripts/jquery.prettyPhoto.js"></ script>
<script type="text/javascript"
src="templates/tantra/scripts/script.js"></script> <script type="text/javascript"
src="templates/tantra/scripts/jquery.easing.1.3.js"></s cript>
(64)
<script type="text/javascript"
src="templates/tantra/scripts/jquery.quicksand.js"></sc ript><script>
$(document).ready(function() {
$("a[data-rel^='prettyPhoto']").prettyPhoto(); }); </script>
<!--[if lt IE 9]>
<script src="js/modernizr.custom.js"></script> <script
src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></scri pt> <script type="text/javascript"
src="js/ie.js"></script> <![endif]-->
</head>
<body class="tantra h-style-1 text-1 skin-1"> <div id="wrapper">
<header class="clearfix"> <div id="logo"> <span> <img
src="templates/tantra/images/logo.png" /> </span> </div>
<!--/ #logo--> </header>
<div class="container">
<div class="search-container">
<?php include 'inc/search.php'; ?> <!--/ #searchForm-->
</div>
<!--/ .search-container--> <?php include 'inc/nav.php'; ?> <!--/ .platform-menu--> <div class="entry clearfix"> <div id="content">
(65)
<div id='begin' class='inner'> <div class='title-caption-large'>
<h3>Hasil Pencarian</h3> </div>
<?php
if (isset($_GET['cari'])) $cari = $_GET['cari']; $temu = false;
$query = mysqli_query($kon, "SELECT * FROM berita WHERE judul LIKE '%$cari%' || keterangan LIKE
'%$cari%'");
while($row = mysqli_fetch_array($query)) { $temu = true;
?> <div>
<a href="berita-selengkapnya.php?judul=<?php echo $row['judul']; ?>"><h2><?php echo $row['judul']; ?></h2> </a>
<div class='alignleft small_shadow'>
<a href='foto_berita/<?php echo $row['gambar']; ?>' title='<?php echo $row['judul']; ?>'
data-rel='prettyPhoto '>
<img src='foto_berita/<?php echo
$row['gambar']; ?>' width='266' height='180' class='frame'></a>
</div> <a href=#' class='xbox'> 03 Maret 2016 </a> <a href=#' ></a> <br><br><p align=justify><?php echo $row['tanggal'] ?>, <?php echo $row['singkatnya']; ?> ... <p>
<a href="berita-selengkapnya.php?judul=<?php echo $row['judul']; ?>" class='pc'>Selengkapnya
(66)
<div class='sep'></div> </div> <?php
} if ($temu == false) {
?><h3>Pencarian untuk kata <i><b><?php echo $cari; ?></b></i> tidak ditemukan</h3>
<?php } ?>
</div> </div>
<aside id="sidebar">
<div class="categories widget clearfix"> <div class="title-caption">
</div>
<div class="latest-video widget"> <ul class="entry-holder"> </ul>
</div>
<div class="latest-video widget"> <div class="title-caption-dark"> </div>
<ul class="entry-holder"> </ul>
</div>
<div class="latest-video widget"> <div class="title-caption-dark">
</div>
<div class="entry-holder"> <div id="fb-root">
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return;
(1)
4. Bapak Prof. Drs. Tulus Vordipl.Math., M.Si., PhD selaku Ketua Departemen Matematika Fakultas Matematika dan Ilmu Pengetahuan Alama Sumatera.
5. Ibu Dr. Elly Rosmaini, M.Si, selaku Ketua Program Studi D-3 Teknik Informatika FMIPA USU.
6. Seluruh Bapak dan Ibu Dosen serta Staf pengajar lainnya yang telah membimbing saya selama menjalani masa perkuliahan.
7. Teman – teman Kom A‟13, terutama anggota Mebun Acong, Jek, Todo, Hardi, Pandri, Daniel, Cuuy, Marguna, Leman, Miko, Eljan, dan ketua Komting Pane, mantan komting Renza dan juga kepada Lambok yang telah membantu banyak tentang program dan memberi dukungan kepada penulis untuk menyelesaikan Tugas Akhir ini.
Penulis menyadari bahwa tugas akhir ini masih banyak kekurangan dan masih jauh dari sempurna, untuk itu penulis berharap adanya kritik dan saran yang bersifat membangun dari semua pihak untuk perbaikan dari tugas akhir ini.
Penulis berharap semoga tugas akhir ini dapat memberi manfaat bagi para pembaca.
Medan, Juni 2016
Imam Subarkah B 132406002
(2)
ABSTRAK
Teknologi informasi di Indonesia menuntut semua bidang informasi untuk menggunakan teknologi semaksimal mungkin agar dapat memberikan informasi secara globalisasi. Dengan adanya informasi yang disajikan masyarakat lebih mudah mengetahui adanya bencana alam yang terjadi di wilayah tertentu. Informasi terbaru dan akurat sangat dibutuhkan.Sistem informasi ini bertujuan untuk memberikan informasi kepada user yang ingin mencari informasi mengenai bencana alam. Sistem Informasi ini dibangun menggunakan PHP, MySQL, XAMPP, HTML, CSS (Cascading Style Sheet), Javascript, Sublime Text, Adobe Photoshop sebagai perancangan layout serta browser Google Chrome.
(3)
DAFTAR ISI
Halaman
Persetujuan ii
Pernyataan iii
Penghargaan iv
Abstrak vi
Daftar Isi vii
Daftar Tabel ix
Daftar Gambar x
Bab 1 Pendahuluan
1.1 Latar Belakang 1
1.2 Rumusan Masalah 2
1.3 Batasan Masalah 3
1.4 Manfaat dan Tujuan 3
1.5 Metodologi Penelitian 4
1.6 Sistematika Penulisan 5
Bab 2 Landasan Teori
2.1 Pengertian Sistem 7
2.2 Data 8
2.3 Informasi 10
2.4 Sistem Informasi 11
2.5 Database 11
2.6 Sublime Text 13
2.7 HTML 13
2.8 Personal Home Page (PHP) 14
2.8.1 Sejarah PHP 15
2.8.2 Konsep Dasar PHP 15
2.9 MySQL 18
2.10 Fungsi PHP dan MySQL 18
2.11 Internet 20
2.12 World Wide Web 20
Bab 3 Perancangan Sistem
3.1 Perancangan Sistem 22
3.2 Data Flow Diagram (DFD) 22
3.3 Perancangan Basis Data 24
(4)
3.4.1 Flowchart Pencarian 29
3.4.2 Flowchart Login Admministrator 30
3.4.3 Flowchart Halaman Utama Admin 31
3.5 Perancangan Interface 32
Bab 4 Implementasi Sistem
4.1 Pengertian Implementasi Sistem 33
4.2 Tujuan Implementasi Sistem 33
4.3 Komponen – Komponen Implementasi Sistem 34
4.3.1 Perangkat Keras (Hardware) 34
4.3.2 Perangkat Lunak (Software) 35
4.3.3 Perangkat Operator (Brainware) 35
4.4 Tampilan Web 36
4.4.1 Halaman Utama index.php 36
4.4.2 Tampilan Berita 37
4.4.3 Tampilan Pengetahuan Bencana 38
4.4.4 Tampilan Gallery 39
4.4.5 Tampilan Kontak Kami 39
4.4.6 Tampilan Informasi Data Pegawai 40
4.4.7 Tampilan Prakiraan Cuaca 41
Bab 5 Kesimpulan dan Saran
5.1 Kesimpulan 42
5.2 Saran 43
Daftar Pustaka Lampiran
(5)
DAFTAR TABEL
Halaman
Tabel 3.1 – Simbol-simbol DFD 23
Tabel 3.2 – Tabel Login Admin 25
Tabel 3.3 – Tabel Berita 25
Tabel 3.4 – Tabel Cuaca 25
Tabel 3.5 – Tabel Gallery 26
Tabel 3.6 – Tabel Kontak 26
Tabel 3.7 – Tabel Flowchart 27
(6)
DAFTAR GAMBAR
Halaman
Gambar 3.1 – Data Flow Diagram (DFD) 23
Gambar 3.2 – Flowchart Pencarian 29
Gambar 3.3 – Flowchart login Administrator 30 Gambar 3.4 – Flowchart halaman utama admin 31
Gambar 3.5 – Perancangan tampilan awal 32
Gambar 4.1 – Halaman index.php untuk user 36
Gambar 4.2 – Halaman index.php untuk admin 37
Gambar 4.3 – Tampilan Semua Berita 38
Gambar 4.4 - Tampilan Pengetahuan Bencana 38
Gambar 4.5 – Tampilan Gallery 39
Gambar 4.6 – Tampilan Kontak Kami 40
Gambar 4.7 – Tampilan Videos 40
Gambar 4.8 – Tampilan Prakiraan Cuaca 41