LAMPIRANeprints.undip.ac.id/41774/7/LAMPIRAN.pdf1. Script CSS (emx_nav_left.css) /*****/ /*...

LAMPIRAN

LAMPIRAN I

(Lembar Asistensi)

LAMPIRAN II

(Peta Curah Hujan)

Gambar : Citra Satelit MTSAT sebelum dilakukan pengolahan

Gambar : Citra Satelit MTSAT setelah dilakukan klasifikasi BT

LAMPIRAN III

(Script Website)

SCRIPT WEBSITE

1. Script CSS (emx_nav_left.css)

/***********************************************/

/* emx_nav_left.css */

/* Use with template Halo_leftNav.html */

/***********************************************/

/***********************************************/

/* HTML tag styles */

/***********************************************/

body{

font-family: Arial,sans-serif;

color: #333333;

line-height: 1.166;

margin: 0px;

padding: 0px;

background: #cccccc url(bg_grad.jpg) fixed;

}

#pagecell1 #pageName img {

}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{

color: #005FA9;

text-decoration: none;

}

a:hover{

text-decoration: underline;

}

/************** header tag styles **************/

h1{

font: bold 120% Arial,sans-serif;

color: #334d55;

margin: 0px;

padding: 0px;

}

h2{


color: #006699;

margin: 0px;

padding: 0px;

}

h3{


color: #334d55;

margin: 0px;

padding: 0px;

}

h4{

font: 100% Arial,sans-serif;

color: #333333;

margin: 0px;

padding: 0px;

}

h5{

font: 100% Arial,sans-serif;

color: #334d55;

margin: 0px;

padding: 0px;

}

/*************** list tag styles ***************/

ul{

list-style-type: square;

}

ul ul{

list-style-type: disc;

}

ul ul ul{

list-style-type: none;

}

/********* form and related tag styles *********/

form {

margin: 0;

padding: 0;

}

label{

font: bold 1em Arial,sans-serif;

color: #334d55;

}

input{

font-family: Arial,sans-serif;

}

/***********************************************/

/* Layout Divs */

/***********************************************/

#pagecell1{

position:absolute;

top: 112px;

left: 2%;

right: 2%;

width:95.6%;

background-color: #F5f7f7;

}

#tl {

position:absolute;

top: -1px;

left: -1px;

margin: 0px;

padding: 0px;

z-index: 100;

}

#tr {

position:absolute;

top: -1px;

right: -1px;

margin: 0px;

padding: 0px;

z-index: 100;

}

#masthead{

position: absolute;

top: 0px;

left: 2%;

right: 2%;

width:95.6%;

}

#pageNav{

float: left;

width:178px;

padding: 0px;

background-color: #F5f7f7;

border-right: 1px solid #cccccc;

border-bottom: 1px solid #cccccc;

font: small Verdana,sans-serif;

}

#content{

padding: 10px 10px 10px 10px;

margin:0px 0px 0px 178px;

border-left: 1px solid #ccd2d2;

background-color: #FFFFFF;

}

/***********************************************/

/* Component Divs */

/***********************************************/

#siteName{

margin: 0px;


font-weight: normal;

font-weight:bolder;

background-image: url(images/bg_menu-atas-hover.gif);

background-repeat: repeat;

text-indent: 10px;

}

/************** utility styles *****************/

#utility{

font: 75% Verdana,sans-serif;

position: absolute;

top: 16px;

right: 0px;

color: #919999;

}

#utility a{

color: #ffffff;

}

#utility a:hover{


}

/************** pageName styles ****************/

#pageName{


margin: 0px;

border-bottom:1px solid #ccd2d2;

background: #F3FF66;

}

#pageName h2{


color: #000000;

margin:0px;

padding: 0px;

}

#pageName img{

position: absolute;

top: 0px;

right: 6px;

padding: 0px;

margin: 0px;

width: 74px;

height: 78px;

overflow: visible;

}

/************* globalNav styles ****************/

#globalNav{

position: relative;

width: 100%;

min-width: 640px;

height: 32px;

color: #cccccc;

padding: 0px;

margin: 0px;

background-image: url(glbnav_background.gif);

}

#globalNav img{

margin-bottom: -4px;

}

#gnl {

position: absolute;

top: 0px;

left:0px;

}

#gnr {

position: absolute;

top: 0px;

right:0px;

}

#globalLink{

position: absolute;

top: 6px;

height: 22px;

min-width: 640px;

padding: 0px;

margin: 0px;

left: 10px;

z-index: 100;

width: 472px;

}

a.glink, a.glink:visited{

font-size: small;

color: #000000;

font-weight: bold;

margin: 0px;


border-right: 1px solid #8FB8BC;

}

a.glink:hover{

background-image: url(glblnav_selected.gif);


}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{

position: absolute;

top: 84px;

left: 0px;

/*width: 100%;*/

min-width: 640px;

height: 20px;


visibility: hidden;

color: #ffffff;

}

.subglobalNav a:link, .subglobalNav a:visited {

font-size: 80%;

color: #ffffff;

}

.subglobalNav a:hover{

color: #cccccc;

}

/*************** search styles *****************/

#search{

position: absolute;

top: 5px;

right: 10px;

z-index: 101;

}

#search input{

font-size: 70%;

margin: 0px 0px 0px 10px;

}

#search a:link, #search a:visited {

font-size: 80%;

font-weight: bold;

}

#search a:hover{

margin: 0px;

}

/************* breadCrumb styles ***************/

#breadCrumb{


font: small Verdana,sans-serif;

color: #AAAAAA;

background: #F3FF66;

}

#breadCrumb a{

color: #AAAAAA;

}

#breadCrumb a:hover{

color: #005FA9;


}

/************** feature styles *****************/

.feature{


font-size: 80%;

min-height: 200px;

height: 200px;

margin: 4;

}

html>body .feature {

height: auto;

margin-right: 30px}

.feature h3{


color: #000000;


}

.feature img{

float: left;


}

/*************** story styles ******************/

.story {


font-size: 80%;

margin-right: 50px;

text-align:justify;

text-indent:40px;

line-height: 2;

}

.contactus {


font-size: 80%;

margin-right: 150px;

text-align:justify;

}

.story h3{


color: #000000;

}

.story p {


line-height: 2;

}

.story a.capsule{

font: bold 1em Arial,sans-serif;

color: #005FA9;

display: block;

padding-bottom: 5px;

}

.story a.capsule:hover{


}

td.storyLeft{

padding-right: 12px;

}

/************** siteInfo styles ****************/

#siteInfo{

clear: both;

border-top: 1px solid #cccccc;

font-size: small;

color: #cccccc;


margin-top: 0px;

}

#siteInfo img{


vertical-align: middle;

}

/************ sectionLinks styles **************/

#sectionLinks{

margin: 0px;

padding: 0px;

}

#sectionLinks h3{



}

#sectionLinks a:link, #sectionLinks a:visited {

display: block;

border-top: 1px solid #ffffff;


background-image: url(bg_nav.jpg);

font-weight: bold;


color: #21536A;

}

#sectionLinks a:hover{

border-top: 1px solid #cccccc;

background-color: #DDEEFF;

background-image: none;

font-weight: bold;


}

/************* relatedLinks styles **************/

.relatedLinks{

margin: 0px;



}

.relatedLinks h3{


}

.relatedLinks a{

display: block;

}

/**************** half styles *******************/

.half { width: 400px }

.h20 { height: 20px }

.h40 { height: 40px }

img { margin: 0; padding: 0; border: none }

.img_border { background: #525252; padding: 4px; border: 1px solid #282828 }

.img_nom { display: block; margin-bottom: 15px }

.img_fl { float: left; margin: 3px 15px 5px 0 }

.img_fr { float: left; margin: 3px 0 5px 15px }

.left { float: left }

.right { float: right }

/********************* end **********************/

#pagecell1 #content .tutorial {

font: normal 12px "Times New Roman", Times, serif;

}

#capsule.content {

font: normal 14px/normal "Times New Roman", Times, serif;

letter-spacing: normal;

text-align: justify;

word-spacing: normal;

padding: 30px;

height: auto;

width: auto;

border: 3px dotted #99CC00;

}

#time {

font-family: Garamond;

font-size: 16px;

color:black;

padding:3px;

width:170px;

text-align:center;

position:relative;

margin:40px 0px -75px 1000px;

}

2. Script Beranda (index.html)

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

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

<html xmlns="http://www.w3.org/1999/xhtml">



<head>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Home - SIG Curah Hujan</title>

<link rel="stylesheet" href="emx_nav_left.css" type="text/css" />

<script type="text/javascript">

<!--

var time = 3000;

var numofitems = 7;

//menu constructor

function menu(allitems,thisitem,startstate){

callname= "gl"+thisitem;

divname="subglobal"+thisitem;

this.numberofmenuitems = allitems;

this.caller = document.getElementById(callname);

this.thediv = document.getElementById(divname);

this.thediv.style.visibility = startstate;

}

//menu methods

function ehandler(event,theobj){

for (var i=1; i<= theobj.numberofmenuitems; i++){

var shutdiv =eval( "menuitem"+i+".thediv");

shutdiv.style.visibility="hidden";

}

theobj.thediv.style.visibility="visible";

}

function closesubnav(event){

if ((event.clientY <48)||(event.clientY > 107)){

for (var i=1; i<= numofitems; i++){

var shutdiv =eval('menuitem'+i+'.thediv');

shutdiv.style.visibility='hidden';

}

}

}

// -->

</script>

<style type="text/css">



</style>

<link href="file:///C|/ms4w/Apache/htdocs/apa/apa" rel="stylesheet" type="text/css" />

<style type="text/css">



</style>

</head>

<body onmousemove="closesubnav(event);">

<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="#pageNav">links on

this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site

information)</a> </div>

<div id="masthead">

<h1 class="style1" id="siteName">Informasi Peta Curah Hujan</h1>

<div id="globalNav"> <img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl" /> <img

alt="" src="glbnav_right.gif" height="32" width="4" id="gnr" />

<div id="globalLink"> <a href="index.html" id="gl1" class="glink" > Beranda</a><a

href="tutorial.html" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">

Tutorial</a><a href="peta.html" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">

Peta</a><a href="hubungikami.html" id="gl5" class="glink"> Hubungi Kami</a></div>



</div>



<div id="subglobal1" class="subglobalNav"> <a href="#">subglobal1 link</a> | <a

href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a

href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a>

</div>




</div>

<div id="subglobal3" class="subglobalNav"> <a href="konversi_data.html">Konversi PGM ke ERS

</a> | <a href="koreksi_geo.html">Koreksi Geometrik</a> | <a

href="penggabungan.html">Penggabungan Data</a> | <a href="konversi_BT.html">Konversi Nilai DN

ke BT</a> | <a href="klasifikasi.html">Klasifikasi nilai BT</a> | <a

href="tutorial_layout.html">Layout-ing Peta </a> | <a href="tutorial_animasi.html">Membuat Animasi

Peta</a> </div>

<div id="subglobal4" class="subglobalNav"> <a href="peta_mei.html">Bulan Mei 2013</a> | <a

href="peta_juni.html">Bulan Juni 2013</a> | <a href="peta_juli.html">Bulan Juli 2013</a> | <a

href="peta_agust.html">Bulan Agustus 2013</a> | </div>




</div>




</div>




</div>




</div>

</div>



<div id="pagecell1">



<img alt="" src="tl_curve_white.gif" height="6" width="6" id="tl" /> <img alt=""

src="tr_curve_white.gif" height="6" width="6" id="tr" />

<div id="breadCrumb"> <a href="#">Beranda</a> /</div>

<div id="pageName">

<h2>Informasi Peta Curah Hujan <img src="images/Logo.png" alt="logo" name="logo" width="66"

height="72"/>

<div id="time">


tday =new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu");

tmonth=new

Array("January","February","Maret","April","Mei","Juni","July","Agustus","September","Oktober","No

vember","Desember");

function GetClock(){

d = new Date();

nday = d.getDay();

nmonth = d.getMonth();

ndate = d.getDate();

nyear = d.getYear();

nhour = d.getHours();

nmin = d.getMinutes();

nsec = d.getSeconds();

if(nyear<1000) nyear=nyear+1900;

if(nhour == 0) {ap = " AM";nhour = 12;}

else if(nhour <= 11) {ap = " AM";}

else if(nhour == 12) {ap = " PM";}

else if(nhour >= 13) {ap = " PM";nhour -= 12;}if(nmin <= 9) {nmin = "0" +nmin;}

if(nsec <= 9) {nsec = "0" +nsec;}

document.getElementById('clockbox').innerHTML=" "+tday[nday]+", "+ndate+" "+tmonth[nmonth]+"

"+nyear+" "+nhour+" : "+nmin+" : "+nsec+ap+"";

setTimeout("GetClock()", 1000);}window.onload=GetClock;</script><div id="clockbox">

</div>

</div>

</h2>

</div>

<div id="pageNav">

<div id="sectionLinks"> <a href="index.html"> Beranda</a><a

href="tutorial.html"> Tutorial</a> <a href="peta.html"> Peta Curah Hujan</a> <a

href="hubungikami.html"> Hubungi Kami</a></div>





























<div class="relatedLinks">

<h3>Link Terkait </h3>

<a href="http://geodesi.undip.ac.id/" target="_blank">Geodesi - UNDIP </a> <a

href="http://www.undip.ac.id/" target="_blank">UNDIP</a> <a

href="http://www.bmkg.go.id/BMKG_Pusat/Main.bmkg" target="_blank">BMKG</a> <a

href="http://www.lapanrs.com/simba" target="_blank">Simba LAPAN </a></div>



























</div>

<div id="content">

<div class="feature" id="home">

<h3 align="left">Selamat Datang ! </h3>

 <a href="index.html"><img src="images/images.png" alt="image1"

width="249" height="162" border="0" align="middle" /></a>

<blockquote>

Selamat Datang di Website Kami.

 

Latar Belakang

Curah hujan merupakan unsur meteorologi yang mempunyai variasi tinggi

dalam skala ruang dan waktu sehingga paling sulit untuk diprediksi. Akan tetapi, informasi curah hujan

sangat penting dan dibutuhkan oleh hampir semua bidang seperti pertanian, transportasi, perkebunan,

hingga untuk peringatan dini bencana alam, banjir, longsor, dan kekeringan (Parwati et al.

2009). 

Data dan informasi curah hujan masih terbatas baik untuk skala spasial yang

luas maupun satuan wilayah yang lebih kecil. Akses untuk data sulit dan belum memenuhi syarat layak

pakai. Jumlah stasiun penakar hujan mungkin banyak namun kelengkapan data masih belum

menjanjikan. Keterbatasan-keterbatasan tersebut menjadi penghambat bagi pengguna data curah hujan

dan kegiatan yang memfokuskan diri pada implementasi analisis data hujan.

Keterbatasan ini mampu dijawab oleh data satelit penginderaan jauh.

Beberapa data satelit meteorologi telah mampu memberikan informasi cuaca yang up to date

setiap jam dan dapat diakses gratis. Meskipun begitu pemanfaatannya masih sangat terbatas.

Pendugaan curah hujan dengan satelit diawali sekitar tahun 1960 dengan memanfaatkan kanal

inframerah serta cahaya tampak atau visible (Suseno 2009). Berbagai metode masih terus

dikembangkan agar hasil penghitungan nilai curah hujan dugaan mendekati hasil pengukuran stasiun

penakar hujan. 

Salah satu data satelit penginderaan jauh yang dapat digunakan untuk

memantau dan memberikan informasi tentang kondisi keawanan dan curah hujan antara lain adalah

MTSAT-1R (Multifunction Transport Satellite 1 Replacement). Data satelit penginderaan

jauh MTSAT-1R ini mampu memberikan informasi kondisi awan melalui kanal inframerah setiap 30

menit dengan resolusi spasial 4 km. Data MTSAT dapat diunduh setiap jam ini dapat menginformasikan

kondisi awan di Indonesia sehingga diharapkan ke depan data MTSAT-1R ini mampu untuk

memprediksi daerah berpotensi banjir dengan berdasarkan kondisi curah hujan di wilayah Pulau

Jawa. 

Oleh karenanya perlu dilakukan analisis kondisi awan di wilayah Indonesia

yang menyebabkan curah hujan tinggi yang memicu terjadinya banjir. Diharapkan kajian ini dapat

dimanfaatkan dalam pembuatan peta persebaran curah hujan di Pulau Jawa melalui data satelit

khususnya dari parameter suhu kecerahan awan dari MTSAT-1R terhadap data curah hujan yang

diperoleh dari stasiun pengamatan seperti BMKG. 

Website ini menyajikan peta curah hujan yang merupakan hasil dari

pengolahan citra MTSAT-1R. Wilayah peta itu sendiri mencakup seluruh wilayah di Pulau Jawa. Peta-

peta yang terdapat di website ini terhitung sejak tanggal 1 Mei 2013 hingga 31 Agustus 2013. Disini

tersedia pula hasil layout peta berupa animasi dalam format .gif . Hasil output dalam bentuk .gif tersebut

merupakan gabungan selama satu bulan. Misal untuk mei.gif, itu berarti dari tanggal 1 Mei 2013 sampai

dengan 31 Mei 2013. Demikian sekilas isi dari website ini. Terima Kasih. Semoga Bermanfaat. 

 

Penulis

 


</blockquote>

</div>

<div class="story">

<h3 align="left"><a href="tutorial.html">Tutorial</a></h3>

Bagaimana cara untuk membuat Peta Curah Hujan ?? Apa saja data yang

perlu disiapkan ?? Software pendukung apa saja yang diperlukan ?? Tenang tenang.. Satu persatu kita

akan mengupas dan menjelaskannya semuanya disini. Bagi yang belom mempunyai software-software

pendukungnya, disini tersedia juga link-link untuk mengunduh software tersebut. 

<a href="tutorial.html">Selengkapnya >>></a> 

 

 

 

</div>

</div>

<div id="siteInfo"><a href="#">About Us</a> | <a href="#">Site Map </a>| <a

href="hubungikami.html">Contact Us</a> | © 2013 Dian Ika Aryani -

Teknik Geodesi UNDIP </div>

</div>



 




</script>

</body>

</html>

3. Script Tutorial (tutorial.html)

<div class="story">

<h3> </h3>

<blockquote>

<h3 class="style2">Tutorial</h3>

<blockquote>

Bagaimana cara untuk membuat Peta Curah Hujan ?? Apa saja data yang perlu

disiapkan ?? Software pendukung apa saja yang diperlukan ?? Tenang tenang.. Satu persatu kita akan

mengupas dan menjelaskannya semuanya disini. Bagi yang belum mempunyai software-software

pendukungnya, disini tersedia juga link-link untuk mengunduh software tersebut. 

Oke, pertama kita mulai untuk menyiapkan bahan (data) dan peralatannya

(software). 

Data - data yang dibutuhkan untuk membuat Peta Curah Hujan ini adalah : 

1. Peta Administrasi Indonesia 

2. Data Citra MTSAT - 1R.

 

untuk Data Citra MTSAT-1R dapat diunduh secara gratis di website resmi Kochi - Jepang, untuk

mengunduh silahkan klik <a href="http://weather.is.kochi-u.ac.jp/sat/GAME/2013/May/IR1/"

target="_blank">disini.

</a> 

Data yang berhasil diunduh formatnya berupa file kompresan berformat .gz , ini bisa diekstrak

dengan menggunakan <a href="http://www.7-zip.org/" target="_blank">.7zip</a> atau<a

href="http://www.rarlab.com/" target="_blank"> winrar.</a><a

href="http://www.rarlab.com/"></a> 

 

Kemudian untuk software - software pengolahan data adalah sebagai berikut : (klik untuk men-

download) 

<a href="http://www.4shared.com/rar/UmRse0_c/ENVI_43.html" target="_blank">1. ENVI

4.3</a> , 

<a href="http://www.4shared.com/rar/vvPlO_27/ER_Mapper_701.html" target="_blank">2. ER

Mapper 7.0</a> , 

3. ArcGIS 9.3 ,

<a href="http://www.4shared.com/rar/7jdXqF31/xampp.html" target="_blank">4. XAMPP</a>

, 

<a href="http://www.4shared.com/file/mHKdjSDe/notepad_.html" target="_blank">5. Notepad

++</a> , 

<a href="http://www.4shared.com/rar/zz1vKtc7/MACROMEDIA_FLASH_MX_6.html"

target="_blank">6. Macromedia Flash MX </a>, 

<a href="https://creative.adobe.com/products/dreamweaver" target="_blank">7. Macromedia

Dreamweaver 8</a> , 

Langkah - langkah dalam pembuatan Peta Curah Hujan dapat dilihat pada link

- link tutorial dibawah ini. Agar saudara tidak salah dalam langkah - langkah pembuatan peta nya,

berikut adalah diagram alir nya :

<a href="tutorial_clip_image002.gif" target="_blank"><img

src="tutorial_clip_image002.gif" alt="diagram_alir" width="370" height="411" border="0" /></a> 

Gambar. Diagram Alir

Selamat mencoba, semoga berhasil dan bermanfaat. Terima Kasih.

</blockquote>

 

</blockquote>

<table width="100%" cellpadding="0" cellspacing="0" summary="">

<tr valign="top">

<td width="50%" class="storyLeft"><blockquote>

 <a href="konversi_data.html" class="capsule">1. Konversi PGM ke ERS

</a>Covert file dilakukan untuk mengubah format file dari format .pgm kedalam format

.ers agar bisa dibuka dan dilakukan pengolahan data di software Er-Mapper 7.01. Peng-

convert-an file dilakukan dengan menggunakan software ENVI 4.3. Langkah-

langkah konversi adalah sebagai berikut : 

</blockquote></td>

<td width="50%"><blockquote>

 <a href="koreksi_geo.html" class="capsule">2. Koreksi Geometrik dengan

GCP Point </a> Koreksi Geometrik pada dasarnya adalah meningkatkan ketelitian geometrik dengan

menggunakan titik kendali / kontrol tanah (Ground Control Point biasa disingkat GCP).

GCP dimaksud adalah titik yang diketahui koordinatnya secara tepat dan dapat terlihat pada citra

inderaja satelit seperti perempatan jalan dan lain-lain. Adapun langkah-langkah untuk melakukan

koreksi geometrik adalah sebagai berikut : 

</blockquote></td>

</tr>

<tr valign="top">

<td class="storyLeft"><blockquote>

<a href="penggabungan.html" class="capsule">3. Penggabungan Data Tiap

Jam menjadi Data Harian </a>Untuk melakukan penggabungan data diperlukan langkah-langkahnya

sebagai berikut: 

</blockquote></td>

<td><blockquote>

 <a href="konversi_BT.html" class="capsule">4. Konversi Nilai DN ke

Brightness Temperature (BT) </a>Data Citra MTSAT-1R itu berupa data

raster yang cell value -nya masih berupa nilai warna pixel belum berupa nilai

brightness temperature yang sebenarnya. Oleh karena itu, untuk membuat Peta

Curah Hujan diperlukan nilai Brightness Temperature yang sebenarnya untuk

melakukan klasifikasi sehingga bisa dilakukan identifikasi terhadap peta tersebut.

Berikut adalah langkah - langkah untuk melakukan konversi

nilai Digital Number (DN) ke Brightness Temperature

(BT) :

</blockquote></td>

</tr>

<tr valign="top">


 <a href="klasifikasi.html" class="capsule">5. Klasifikasi nilai BT

(Brightness Temperature)</a>Klasikasi nilai Brightness Temperature (BT) ini dilakukan

untuk melakukan pengkelompokan agar bisa diidentifikasi area-area yang terindikasi terjadi Hujan

Lebat, Hujan Sedang, Hujan Ringan ataupun malah Tidak Hujan (Cerah). 

Adapun klasifikasi nilai Brightness Temperature yaitu : 

</blockquote></td>

<td><blockquote>

 <a href="tutorial_layout.html" class="capsule">6. Layout-ing Peta via Arc

GIS </a>Dalam penelitian ini, proses layouting peta

dilakukan dengan software ArcGIS. Data yang digunakan adalah citra hasil klasifikasi,

yaitu data citra MTSAT-1R yang sudah diolah di Er Mapper dan Peta Administrasi Indonesia 2010. 

Pembuatan peta curah hujan dilakukan dengan menggabungkan data spasial Peta Administrasi

Indonesia dengan hasil pengolahan citra MTSAT-1R yang telah di klasifikasi sebelumnya.



</blockquote></td>

</tr>

<tr valign="top">


 <a href="tutorial_animasi.html" class="capsule">7. Membuat Animasi Peta

via Macromedia Flash </a>Macromedia Flash adalah software yang salah satunya digunakan untuk

membuat animasi bergerak yang terdiri dari gambar - gambar. Berikut ini adalah langkah - langkah

untuk membuat animasinya : 

</blockquote></td>

<td> </td>

</tr>

</table>

 

</div>

4. Script Peta Curah Hujan (peta.html)

<div class="feature">

<h3 align="left">Peta Curah Hujan</h3>

Berikut adalah Peta Curah Hujan yang merupakan hasil dari

pengolahan data citra MTSAT-1R yang digabungkan dengan 

data Administrasi Pulau Jawa Tahun 2010 : 

<ol>

<li class="style3">

<a href="peta_mei.html" target="_top">Peta Bulan Mei 2013</a>

</li>

<li class="style5">

<a href="peta_juni.html" target="_self">Peta Bulan Juni 2013</a>

</li>

<li class="style5">

<a href="peta_juli.html" target="_parent">Peta Bulan Juli 2013</a>

</li>

<li class="style3">

<a href="peta_agust.html" target="_parent">Peta Bulan Agustus 2013

</a>

</li>

</ol>

Anda juga dapat membuat Peta Curah Hujan sendiri dengan mengikuti step-step

yang telah saya posting di Menu <a href="tutorial.html">Tutorial</a>.

 

Terima Kasih 

 

 

 

 

 

 

 

 

 

 

</div>

a. Script Peta Bulan Mei 2013 (peta_mei.html)

<div id="content">


<h3 align="left">Peta Curah Hujan Bulan Mei 2013 </h3>

<form id="form1" name="form1" method="post" action="">

 

Berikut adalah Peta Curah Hujan Bulan Mei 2013 :



 

<input type="image" name="imageField" src="images/mei.gif" width="1000"

height="578" />

</label>

</form>

 


Anda juga dapat melihat peta curah hujan harian (per

tanggal) sesuai dengan pilihan anda.

beikut adalah Kalender Bulan Mei 2013 : 

<h2 align="center" class="style6"> </h2>

<table cellpadding="0" cellspacing="0" class="calendar">

<tbody>

<tr class="calendar-row">

<td class="calendar-day-head">Minggu</td>

<td class="calendar-day-head">Senin</td>

<td class="calendar-day-head">Selasa</td>

<td class="calendar-day-head">Rabu</td>

<td class="calendar-day-head">Kamis</td>

<td class="calendar-day-head">Jum'at</td>

<td class="calendar-day-head">Sabtu</td>

</tr>


<td class="calendar-day-np"></td>



<td class="calendar-day"><div class="day-number">

<div align="center"><a href="Mei/1.gif" target="_blank">1</a></div>

</div> </td>

<td class="calendar-day"><div class="day-number"><a href="Mei/2.gif"

target="_blank">2</a></div>

 

 </td>



 

 </td>



 

 </td>

</tr>




 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</tr>




 

 </td>



 

 </td>

</td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</tr>




 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</tr>

</td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>


</tr>

</tbody>

</table>


 

 

<form id="form1" name="form1" enctype="multipart/form-data" method="post"

action="">

<label>

<div align="right">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=

5,0,0,0" name="peta" width="100" height="22" id="peta">

<param name="movie" value="button1.swf" />

<param name="quality" value="high" />

<embed src="button1.swf" width="100" height="22" quality="high"

pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version

=ShockwaveFlash" type="application/x-shockwave-flash" name="peta" ></embed>

</object>

</div>

</label>

</form>

 

</div>

</div>


href="hubungikami.html">Contact Us</a> | © 2013 Dian Ika

Aryani - Teknik Geodesi UNDIP </div>

</div>

b. Script Peta Bulan Juni 2013 (peta_juni.html)

<div id="content">


<h3 align="left">Peta Curah Hujan Bulan Juni 2013 </h3>


 

Berikut adalah Peta Curah Hujan Bulan Juni 2013 :



 

<input type="image" name="imageField" src="images/juni.gif" width="1000"

height="578" />

</label>

</form>





beikut adalah Kalender Bulan Juni 2013 : 



<tbody>









</tr>








<td class="calendar-day"><div class="day-number"><a href="Juni/1.jpg"


 

 </td>

</tr>




 

 </td>



 

 </td>

</td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</tr>




 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</tr>




 

 </td>

</td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</tr>




 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</tr>




 

 </td>







</tr>

</tbody>

</table>


 

 


action="">

<label>

<div align="right">









</object>

</div>

</label>

</form>

 

</div>

</div>




</div>


c. Script Peta Bulan Juli 2013 (peta_juli.html)

<div id="content">


<h3 align="left">Peta Curah Hujan Bulan Juli 2013 </h3>


 

Berikut adalah Peta Curah Hujan Bulan Juli 2013 :



 

<input type="image" name="imageField" src="images/juli.gif" width="1000"

height="578" />

</label>

</form>





beikut adalah Kalender Bulan Juli 2013 : 



<tbody>









</tr>



<td class="calendar-day"><div class="day-number"><a href="Juli/1.jpg"


 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</tr>




 

 </td>

</td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</tr>




 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</tr>

</td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</tr>




 

 </td>



 

 </td>



 

 </td>



 

 </td>




</tr>

</tbody>

</table>

action="">

<label>

<div align="right">









</object>

</div>

</label>

</form>


 

</div>

</div>




</div>


 

</body>

</html>

d. Script Peta Bulan Agustus 2013 (peta_agust.html)

<div id="content">


<h3 align="left">Peta Curah Hujan Bulan Agustus 2013 </h3>


 

Berikut adalah Peta Curah Hujan Bulan Agustus 2013 :



 

<input type="image" name="imageField" src="images/agust.gif" width="1000"

height="578" />

</label>

</form>





berikut adalah Kalender Bulan Agustus 2013 : 



<tbody>

</tr>






<td class="calendar-day"><div class="day-number"><a href="agust/1.jpg"


 

 </td>



 

 </td>



 

 </td>

</tr>




 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</tr>

</td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</tr>




 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</td>



 

 </td>

</tr>




 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>



 

 </td>

</tr>

<tr>








</tr>

</tbody>

</table>





action="">

<label>

<div align="right">

</object>

</div>

</label>

</form>


 

</div>

</div>




</div>


5. Script Hubungi Kami (hubungikami.html)

<div class="contactus">

<h2 class="style1 style2">Hubungi Kami</h2>

 

<div class="half left">

<h4>Alamat :</h4>

<ul>

 Teknik Geodesi - UNDIP

Fakultas Teknik Universitas Diponegoro 

Gedung Kuliah Bersama B Lantai III

Jl. Prof. Sudarto, SH – Tembalang Semarang 

Telp. 027-76480785, Telp./Fax. 024-76480788 

 

Email : [email protected] 

Website : geodesi.undip.ac.id





 

</ul>

<h4>Tim Penyusun :</h4>

<h4> </h4>

<h4>1. Pengarah </h4>

<ul>

<li>Dosen Pembimbing I :

<blockquote>

Nama : Bandi Sasmito, S.T., M.T

NIP : 197802062010121003 

</blockquote>

</li>

<li> Dosen Pembimbing II : </li>

<blockquote>

Nama : Arwan Putra Wijaya, S.T., M.T

NIP : 198501252012121005 

</blockquote>

</ul>

2. Penulis

<blockquote>

Nama : Dian Ika Aryani

NIM : L2M 009 019 

Email : [email protected] 

</blockquote>



</div>

<div class="half right">

<h4>Quick Contact</h4>

Jika anda mempunyai pertanyaan, kritik ataupun saran, anda dapat menghubungi

kami di alamat yang sudah tertera disamping. Atau dengan mengirim pesan di bawah ini : 

<div id="contact_form">

<form action="proses_contact.php" method="post">

<table border=0 cellpadding=4>

<tr><td>Nama:</td><td><input type="text" name="nama"></td></tr>

<tr><td>Email: </td><td><input type="text" name="email"></td></tr>

<tr><td>Subjek:</td><td><input type="text" name="subjek"></td></tr>

<tr><td>Pesan: </td><td><textarea name="pesan" cols="35" rows="10"></textarea></td></tr>

<tr><td colspan=2><input type="submit" value="KIRIM"></td></tr>

</table>

</form>

</div>

</div>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

</div>

a. Script email (proses_contact.php)

<?php

$nama=$_POST['nama'];

$email=$_POST['email'];

$subjek=$_POST['subjek'];

$pesan=$_POST['pesan'];

$to='[email protected]';

$header="From: $email";

@mail($to, $subjek, $pesan, $header);

echo "Pesan Berhasil Dikirim. ";

echo "Terima Kasih Telah Menghubungi Kami";

?>

LAMPIRANeprints.undip.ac.id/41774/7/LAMPIRAN.pdf1. Script CSS (emx_nav_left.css) /*****/ /*...

Documents

Transcript of LAMPIRANeprints.undip.ac.id/41774/7/LAMPIRAN.pdf1. Script CSS (emx_nav_left.css) /*****/ /*...