LAPORAN PROYEK WEBSITE GEOINFORMATIKAAnalisis Daerah Rawan Longsor Studi Kasus : Kecamatan Dau, Kab. MalangA. MATERI1) Konten Website Dalam pembuatan website geoinformatika kali ini, website dibuat berdasarkan data spasial dan non-spasial yang telah diolah menggunakan software ArcGIS 10.1 hingga menghasilkan analisis daerah rawan longsor untuk kecamatan Dau kab. Malang. Data-data tersebut berupa : Data Spasial : Peta Curah Hujan Peta Administrasi Peta Kelerengan Peta Jenis Tanah Peta Tataguna Lahan Data Non-Spasial : Data Curah Hujan Data Administrasi Data Kelerengan Data Jenis Tanah Data Tataguna Lahan

Flowchart 1. Pengolahan Data Spasial dan Non-SpasialTidakCek Editing(Editing Ok)

Desain Database

Join

overlay

Hasil analisis prediksi kerawanan

Layouting

YAYATidak SelesaiOrthophoto Peta CurahHujan Peta JenisTanahEditingPeta Penggunaan Lahan dan Batas administrasi

Data Curah Hujan Data Jenis Tanah Data Penggunaan Lahan Data Kelerengan

Pembangunan Database

Data Non Spasial

Data SpasialMulaiPengumpualan DataTidakYAPeta KelerenganPeta Sistem Informasi Kawasan Rawan Bencana Longsor

2) Dasar Pembuatan WebsiteDalam pembuatan website ini, kami memanfaatkan keberadaan salah satu software coding yang sangat membantu yaitu DreamWeaver. Dengan software ini kami dapat menyelesaikan pembuatan website sekalipun baru belajar. Dimulai dari pembuatan template, hingga menjadi sebuah website yang telah lengkap dengan konten yang diinginkan. Hal-hal awal yang harus kami pelajari sebelum memulai menggunakan software ini adalah memahami bahasa CSS dan HTML.Apa itu CSS? CSS (Cascading Style Sheets) adalah salah satu bahasa pemrograman desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan bahasa penanda (markup language). CSS dibuat untuk memisahkan konten utama (biasanya dibuat dengan menggunakan bahasa HTML atau sejenisnya) dengan tampilan dokumen yang meliputi layout, warna dan font. Pemisahan ini dapat meningkatkan daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi dari sebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi banyak halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada layout desain web (layout tanpa tabel). Tujuan utama CSS diciptakan adalah untuk membedakan konten dari dokumen dan tampilan dari dokumen, dengan itu pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukuran dan formatting. Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu halaman web, sehingga akan memudahkan dalam membuat halaman web yang banyak, sehingga membuat waktu dalam membuat web jauh lebih cepat.

B. LANGKAH PENGERJAANFlowchart 2. Langkah PengerjaanStartDataPerencanaan DesainPembuatan WebsiteTampilan Website Pada BrowserEDITINGPengisian Konten WEBFinish

Berdasarkan flowchart 2 diatas maka langkah pengerjaan web geoinformatika untuk analisis daerah rawan bencana longsor di kecamatan Dau kab. Malang ini adalah sebagai berikut :1) Start Adalah mempersiapkan segala sesuatu yang dibutuhkan untuk membangun sebuah website instalasi paket software DreamWeaver.2) Data Seperti yang telah dijelaskan sebelumnya, data yang dimaksud adalah berupa data hasil olahan menggunakan software ArcGIS 10.1. Namun selain itu, perlu juga disiapkan data-data yang menyangkut konten website sebagai pelengkapnya.4) Perencanaan DesignDalam membangun sebuah website perencanaan design untuk website itu sendiri sangatlah penting. Dengan adanya perencanaan di awal, maka pada saat pembangunan websitenya kita tidak akan dibuat bingung dengan tampilan seperti apa yang diinginkan pada saat website jadi nantinya. Untuk website geoinformatika kali ini, kami merencanakan tampilan sebagai berikut :a) Website kami akan dibuat dengan tampilan 4 kolom. Kolom pertama sebagai header, kolom kedua sebagai menu, kolom ketiga sebagai tempat penyajian konten website serta kolom keempat sebagai footer.b) Untuk header dan footer menggunakan image yang telah dibuat sebelumnya menggunakan software design grafis sesuai dengan ukuran yang diinginkan. c) Pada bagian menu utama akan diisi secara berurutan dengan Home, Profil, Data, Maps dan Analisa Data. Sedangkan untuk sub-menu masing-masing adalah : Profil Profil Kecamatan Dau Geodesi dan SIG Data Data spasial Data Non-Spasial Maps Peta Curah Hujan Peta Administrasi Peta Kelerengan Peta Jenis Tanah Peta Tataguna Lahan Analisa Data Peta Hasil Overlay Data Hasil OverlayFlowchart 3. Rencana Design WebsiteStartMain MenuHomeProfilDataMapsAnalisa DataProfil Kecamatan DauGeodesi dan SIGData SpasialData Non-SpasialPeta Curah HujanPeta AdminPeta KelerenganPeta Jenis TanahPeta Tataguna LahanPeta Hasil OverlayData Hasil OverlayKonten Website Analisis Daerah Rawan Longsor. Studi Kasus : Kecamatan Dau Kab.MalangEND

5) Pembuatan Website Langkah-langkah dalam pembuatan website adalah sebagai berikut :1) Run software Dreamweaver kemudian pilih Create New HTML. Akan muncul tampilan blank workspace seperti pada gambar Kemudian klik pada Show Code and Design View untuk membuat source code sekaligus menampilkan hasil dari source code tersebut.

2) Kemudian simpan terlebih dahulu file tersebut dengan nama index.html. Dilanjutkan dengan membuat baru sebuah file CSS dengan cara klik file New CSS lalu simpan file CSS tersebut dengan nama style.css di folder yang sama dengan file *HTML yang telah disimpan sebelumnya. Lakukan hal yang sama kali lagi kemudian simpan dengan nama menu.css. Kedua file CSS tersebut nantinya akan diintregasikan dengan file HTML sehingga kedua jenis file tersebut bisa saling melengkapi untuk membentuak sebuah website.

3) Selanjutnya masukkan source code seperti dibawah ini untuk masing-masing file : style.css#layout {float: none;height: auto;width: 1350px;}#header {float: none;height: 200px;width: 1350px;}.Fheader {font-family: "Courier New", Courier, monospace;font-size: 20px;font-weight: bold;}#kolom1 {float: left;height: 30px;width: 990px;margin-left:170px;padding-left:14px;}.Fkolom1 {font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold;}#kolom2 {height: auto;width: 985px;background-color:#FFFFFF;margin-top: auto;margin-right: auto;margin-bottom: auto;margin-left: 181px;padding-top:100px;left: auto;top: auto;right: auto;bottom: auto;padding-right: 2px;padding-bottom: 2px;padding-left: 2px;}#footer {float: none;margin-left:170px;padding:5px;border:100px;}

Coding yang terdapat pada file style.css akan menjadi pengaturan untuk tampilan hasil dari index.html misalnya untuk layout, header, footer, body dll. Pengaturan tersebut meliputi font, lebar dan tinggi, posisi dll. Contohnya pada source code dibawah ini :#layout menyatakan layout yang akan diatur{ menyatakan pengaturan ada pada dalam kurung kurawalfloat: none; menyatakan posisi layoutheight: auto; menyatakan tinggi layoutwidth: 1350px; menyatakan lebar layout} menyatakan akir dari pengaturan

menu.cssul {margin: 0;padding: 0;list-style: none;}ul li {position: relative;float:left;top: 47px;width: 194px;padding-top:5px;}li ul {position: absolute;top: 30px;display: none;}ul li a {display: block;text-decoration: none;line-height: 20px;color: #000;padding: 5px;background-image: url(images/menu.jpg);margin: 0 2px;}ul li a:hover { background: #66F; }li:hover ul, li.over ul { display: block; }

Coding yang terdapat pada file menu.css akan menjadi pengaturan untuk tampilan main menu untuk membuat menu dropdown pada website. Pengaturan tersebut meliputi font, lebar dan tinggi, posisi, tampilan menu saat hover, dll. Dapat dilihat pada kode diatas, terdapat beberapa format css yang mengatur tampilan dari tag

dan

, dimana tag-tag tersebut berfungsi untuk mengatur tampilan list menu. Setelah itu buat sebuah file html baru untuk menampilkan style menu pada file css yang baru saja kita buat. index.html

SISTEM INFORMASI RAWAN BENCANA LONGSOR, DESA DAU, BATU.

• Home
• Profil
  • Profil Kecamatan Dau
  • Geodesi & SIG
• Data
  • Data Spasial
  • Data Non Spasial
  • Basis Data
• Maps
  • Peta Curah Hujan
  • Peta Admin
  • Peta Kelerengan
  • Peta Jenis tanah
  • Peta Tataguna lahan
• Analisa Data
  • Peta Hasil Overlay
  • Data Hasil Overlay

Longsor atau sering disebut gerakan tanah adalah suatu peristiwa geologi yang terjadi karena pergerakan masa batuan atau tanah dengan berbagai tipe dan jenis seperti jatuhnya bebatuan atau gumpalan besar tanah. Secara umum kejadian longsor disebabkan oleh dua faktor yaitu faktor pendorong dan faktor pemicu. Faktor pendorong adalah faktor-faktor yang memengaruhi kondisi material sendiri, sedangkan faktor pemicu adalah faktor yang menyebabkan bergeraknya material tersebut. Meskipun penyebab utama kejadian ini adalah gravitasi yang memengaruhi suatu lereng yang curam, namun ada pula faktor-faktor lainnya yang turut berpengaruh:

1. Erosi yang disebabkan aliran air permukaan atau air hujan, sungai-sungai atau gelombang laut yang menggerus kaki lereng-lereng bertambah curam
2. Lereng dari bebatuan dan tanah diperlemah melalui saturasi yang diakibatkan hujan leba gempa bumi menyebabkan getaran, tekanan pada partikel-partikel mineral dan bidang lemah pada massa batuan dan tanah yang mengakibatkan longsornya lereng-lereng tersebut.
3. Gunung berapi menciptakan simpanan debu yang lengang, hujan lebat dan aliran debu-debu getaran dari mesin, lalu lintas, penggunaan bahan-bahan peledak, dan bahkan petir berat yang terlalu berlebihan, misalnya dari berkumpulnya hujan atau salju.

Coding yang terdapat pada file index.html akan menjadi coding awal untuk tampilan website karena coding ini akan menjadi tampilan dari menu HOME dan apabila pengaturan pada file index.html ini sudah dirasa cukup dan sesuai keninginan, maka file ini nantinya akan di jadikan acuan untuk membuat laman tujuan untuk menu-menu yang lainnya yang terdapat pada website sesuai dengan rencana design di awal. Pada index.html ini juga diatur pengenalan file menu.css dan style.css sehingga pengaturannya bisa diterapkan di index.html. pengaturan tersebut berupa sebuah coding yaitu :

3) 4) 5) 6) Tampilan Website Pada BrowserSelanjutnya untuk melihat tampilan dari proses pembuatan website yang perlu kita lakukan adalah dengan cara kilk 2x pada file index.html. Karena sudah disimpan dengan ekstensi *html maka file tersebut akan secara otomatis terbuka pada web browser default yang sering digunakan.

7) Pengisian Konten WebsiteApabila tampilan pada langkah 6 diatas dirasa sudah cukup, maka untuk menu-menu yang lain tinggal copas coding yang ada pada index.html lalu mengganti konten sesuai dengan menu.8) FinishPada saat ini, website telah siap untuk diperlihatkan pada user.