SURAT KETERANGAN
Hasil Uji Program Tugas Akhir
Yang bertanda tangan dibawah ini, menerangkan bahwa mahasiswa Tugas Akhir Program Diploma Teknik Informatika :
Nama : Imam Subarkah B
NIM : 132406002
Program Studi : D-3 Teknik Informatika
Judul Tugas Akhir : Perancangan Sistem Informasi Bencana Alam
Berbasis Website Menggunakan PHP dan MYSQL
Telah melaksanakan tes program Tugas Akhir Mahasiswa tersebut diatas pada tanggal :
Dengan Hasil : SUKSES/GAGAL
Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran ujian Meja Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU Medan.
Medan, Juni 2016 Dosen Pembimbing
KARTU BIMBINGAN TUGAS AKHIR
Nama : Imam Subarkah B
NIM : 132406002
Judul Tugas Akhir : Perancangan Sistem Informasi Bencana Alam Berbasis Website Menggunakan PHP dan MYSQL
Dosen Pembimbing : Dr. Syahril Efendi, S.Si, M.IT Program Studi : D-3 Teknik Informatika
NO TANGGAL ASISTEN BIMBINGAN
PEMBAHASAN PADA ASISTEN MENGENAI, PADA
BAB
PARAF DOSEN PEMBIMBING
KETERANGAN
1 2 3 4 5 6 7
*Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan telah selesai.
Diketahui :
Ketua Program Studi D-3 Teknik Pembimbing Informatika FMIPA USU
LAMPIRAN LISTING PROGRAM
1. Admin
1.1style.css
* {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
}
html,
body {
width: calc(100%);
height: 100%;
background: url("../img/1.jpg") repeat fixed;
font-family: 'Open Sans', sans-serif;
font-weight: 200;
}
.login {
position: relative;
top: 50%;
width: 250px;
display: table;
margin: -150px auto 0 auto;
background: rgba(0, 0, 0, .5);
border-radius: 4px;
}
.legend {
width: 100%;
display: block;
background: rgba(0, 0, 0, .5);
padding: 15px;
color: #fff;
font-size: 20px;
}
.legend:after {
content: "";
background-image:
url(http://simpleicon.com/wp-content/uploads/multy-user.png);
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: 152px -16px;
opacity: 0.06;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
}
.banner {
background: url(../../images/banner2.jpg)
no-repeat 0px 0px;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-height:400px;
}
.input {
width: 90%;
margin: 15px auto;
}
.input span {
position: absolute;
display: block;
color: #d4d4d4;
left: 10px;
top: 8px;
font-size: 20px;
}
.input input {
width: 100%;
padding: 10px 5px 10px 40px;
display: block;
border: 1px solid #EDEDED;
border-radius: 4px;
transition: 0.2s ease-out;
color: #a1a1a1;
background: rgba(0, 0, 0, .25);
}
.input input:focus {
padding: 10px 5px 10px 10px;
outline: 0;
border-color: #FF7052;
}
.submit {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border: 1px solid #FF7052;
color: #FF7052;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px #fff;
transition: 0.2s ease-out;
}
.submit:hover,
.submit:focus {
background: #FF7052;
color: #fff;
outline: 0;
}
.feedback {
position: absolute;
bottom: -70px;
width: 100%;
text-align: center;
color: #fff;
background: #2ecc71;
padding: 10px 0;
font-size: 12px;
display: none;
opacity: 0;
}
.feedback:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
pointer-events: none;
border-color: rgba(46, 204, 113, 0);
border-bottom-color: #2ecc71;
border-width: 10px;
margin-left: -10px;
}
1.2index.php
<?php include 'inc/header.php'; ?>
<section id="section">
<?php
if (isset($_GET['home'])) {
include 'home.php';
}
if (isset($_GET['berita'])) {
include 'berita.php';
}
if (isset($_GET['galeri'])) {
include 'galeri.php';
}
if (isset($_GET['cuaca'])) {
include 'cuaca.php';
}
if (isset($_GET['logout'])) {
header("Location: logout.php");
} if (empty($_GET)) {
include 'home.php';
}
?>
</section>
1.3login.php
<?php
include '../../koneksi.php';
if (isset($_SESSION['username'])) {
header("Location: index.php");
exit();
}
if (isset($_POST['submit'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$query = mysqli_query($kon, "SELECT * FROM
admin WHERE username='$username' AND
password='$password'");
if (mysqli_num_rows($query) > 0) {
$_SESSION['username'] = $username;
header("Location: index.php?home");
exit();
} else {
echo "Username dan password tidak
benar!";
}
}
?>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>ADMIN | LOGIN</title>
<script src="js/modernizr.js"></script>
<link rel="stylesheet"
<link rel='stylesheet prefetch'
href='css/font-awesome.min.css'>
<link rel="stylesheet"
href="css/style.css">
</head>
<body>
<form action="" method="post"
class="login">
<fieldset>
<legend
class="legend">Login</legend>
<div class="input">
<input type="text"
placeholder="Username" name="username" required
/>
<span><i class="fa
fa-envelope-o"></i></span>
</div>
<div class="input">
<input type="password"
placeholder="Password" name="password" required
/>
<span><i class="fa
fa-lock"></i></span>
</div>
<button type="submit"
name="submit" class="submit"><i class="fa
fa-long-arrow-right"></i></button>
</fieldset>
<div class="feedback">
redirecting...
</div>
</form>
<script
src='js/jquery-2.2.3.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
1.4berita.php
<div class="section-container">
<div class="panel">
<h3 class="center
text-primary">Berita</h3>
</div>
<table class="table bordered
table-hover">
<tr>
<th>Judul</th>
<th>Pembuat</th>
<th>Keterangan</th>
<th>Gambar</th>
<th>Waktu</th>
<th colspan="2">Aksi</th>
</tr>
<?php
$query = mysqli_query($kon, "SELECT *
FROM berita");
while ($row =
mysqli_fetch_array($query)) {
<tr>
<td width="15%"><?php echo
$row['judul'] ?></td>
<td width="10%"><?php echo
$row['pembuat'] ?></td>
<td width="40%"><?php echo
$row['keterangan'] ?></td>
<td width="20%"><img
class="img-thumbnail img-responsive"
width="100px" src="../foto_berita/<?php echo
$row['gambar']; ?>"></td>
<td width="20%"><?php echo
$row['tanggal']; ?></td>
<td width="2.5%"><a
href="edit.php?judul=<?php echo $row['judul'];
?>">Edit</a></td>
<td width="2.5%"><a id="delber"
href="deleteberita.php?judul=<?php echo
$row['judul']; ?>">Delete</a></td>
</tr>
<?Php
} ?>
</table>
<script>
$(function() {
$("#delber").on("click",
function() {
var r = confirm("Anda yakin!");
if (r === true) {
window.location.href =
$(this).attr("href");
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) {
?>
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,
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">
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">
</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']; ?>"/>
</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'];
$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,
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>
<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 -->
<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>
<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>
<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="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"
<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
<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
</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
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
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'
<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>
</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">
<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"
<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">
$('#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>
<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>
<?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>
<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-->
</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>
<!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"
<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
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
<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>
<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>
<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-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"
</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=" " />
<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
<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>
$(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'
<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
<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>
<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"
<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,
