http://sda.dpupesdm.jogjaprov.go.id
MadulOperasionalisasiSistemInformasiSumberDayaAir(SISDA)2017
ii
KATAPENGANTAR
ManualBookinimerupakanbukupanduanoperasionalisasiSistemInformasiSumber
DayaAir(SISDA)http://sda.dpupesdm.jogjaprov.go.idyangdisusunOlehTimAhliPT.
Citra Gama Sakti yang ditujukan untuk panduan Administrator, Help Desk dan User
SISDA di Bidang Sumber Daya Air Dinas Pekerjaan Umum, Perumahan dan Energi
Sumber DayaMineral, Daerah Istimewa Yogyakarta.Manual Book terdiri dari 4 BAB
yaitu:
BAB1.TentangSISDA
BAB2.SystemRequirments
BAB3.OperasionalisasiSISDA
BAB4.KustomisasiKonten
AkhirkataPT.CitraGamaSaktiselakukonsultanmenyampaikanterimakasihkepada
Dinas Pekerjaan Umum, Perumahan dan Energi Sumber Daya Mineral, c.q. Bidang
Sumber Daya Air, Daerah Istimewa Yogyakarta atas kerjasama, bantuan, dan
kepercayaanyangdiberikan,sertakepadasemuapihakyangtelahmembantusehingga
terselesaikannyapekerjaanini.
Yogyakarta,Agustus2017 PT.CitraGamaSakti
TenagaAhli
MadulOperasionalisasiSistemInformasiSumberDayaAir(SISDA)2017
iii
DAFTARISI
KATAPENGANTAR .................................................................................................... ii
DAFTARISI ............................................................................................................... iiiDAFTARGAMBAR ...................................................................................................... v
BAB 1. TentangSISDA ........................................................................................ 1
1.1.LatarBelakang ........................................................................................ 11.2.TujuanPembangunanSISDA ................................................................... 2
1.3.Data&InformasiSDABerbasisSpasial .................................................... 21.3.1.DataSDABerbasisGIS ................................................................... 2
1.4.MenudanFeatureSISDA ......................................................................... 4
1.4.1.Beranda ........................................................................................ 41.4.2.Data&Informasi ........................................................................... 4
1.4.3.FooterPage ................................................................................... 51.4.4.Geospasial ..................................................................................... 6
1.4.5.Link/AplikasiSDA ......................................................................... 6
1.4.6.Kontak .......................................................................................... 71.4.7.Login/Logout ................................................................................ 7
1.4.8.PengaturanUser ............................................................................ 8BAB 2. SystemRequirementsSISDA ................................................................. 9
2.1.StandardKompetensiBrainware/SDM(Administrator) ........................... 9
2.2.PerangkatKeras(Hardware) ................................................................... 92.3.PerangkatLunak(Software) ................................................................... 10
2.3.1.QuantumGIS ............................................................................... 102.3.2.Geoserver .................................................................................... 11
2.3.3.PostgreSQLdanPOSTGIS ............................................................. 11
2.4.StandardDataSpasialWebGISSISDA .................................................... 122.4.1.SistemProyeksi ........................................................................... 12
2.4.2.KetelitianDataSpasial ................................................................. 13BAB 3. OperasionalisasiSISDA ........................................................................ 14
3.1.TambahUserBaru ................................................................................ 14
3.2.EditDatadanPasswordUserAdministrator .......................................... 163.3.MengaturDataUserAdministrator ....................................................... 17
3.4.DataDinas/Instansi/SKPD/UnitKerja ................................................... 173.5.Create,Edit,DeleteData&Informasi ..................................................... 18
MadulOperasionalisasiSistemInformasiSumberDayaAir(SISDA)2017
iv
3.6.PengaturanKategoriData&Informasi .................................................. 19
3.7.MengaturSliderBeranda ...................................................................... 21
3.8.Menambah,Edit,HapusKontenData&Informasi .................................. 223.9.MelakukanInputData&InformasidenganTemplate ............................ 25
3.10. Geospasial ................................................................................... 26BAB 4. Kustomisasi Konten ........................................................................... 27
4.1.StrukturHTML ...................................................................................... 27
4.2.MembuatHalamanHTML ..................................................................... 28
4.3.LayoutTeks .......................................................................................... 284.3.1.Layout Teks <br> ....................................................................... 28
4.3.1.Paragraf <p> .............................................................................. 294.3.1.Paragraf <p> .............................................................................. 29
4.3.1.Rata Tengah <center> ............................................................... 30
4.3.1.Heading <h> .............................................................................. 304.4.Tabel .................................................................................................... 31
4.4.1.Tag Dasar <table> ...................................................................... 314.4.2.Mengatur lebar tabel .................................................................. 31
4.4.3.Cell pading Cell spacing ............................................................. 32
4.4.4.Colspan dan Rowspan ............................................................... 324.4.5.Judul Kolom ................................................................................ 33
4.4.6.Judul Tabel ................................................................................. 344.5.Menambahkan Gambar ....................................................................... 34
4.5.1.Mengatur Ukuran Gambar .......................................................... 34
4.5.2.Mengatur Posisi Gambar ............................................................ 354.6.Links .................................................................................................... 35
4.6.1.Teknik Dasar Link ....................................................................... 354.6.2.Link dengan Gambar .................................................................. 35
4.6.3.Link ke jedela baru ..................................................................... 35
4.7.Frame .................................................................................................. 364.7.1.Tag <frameset> .......................................................................... 36
4.7.2.Mengunci frame .......................................................................... 364.7.3.Menghilangkan border ................................................................ 36
4.7.4.Frame navigasi ........................................................................... 37
DAFTAR PUSTAKA ................................................................................................ 38
MadulOperasionalisasiSistemInformasiSumberDayaAir(SISDA)2017
v
DAFTARGAMBARGambar 1 Main Menu SISDA ....................................................................................................... 4Gambar 2 Beranda & Slider Headline .......................................................................................... 4Gambar 3 Menu Data & Informasi ................................................................................................ 5Gambar 4 Menu Layer, Peta dan Instansi .................................................................................... 5Gambar 5 Geospasial Explorer .................................................................................................... 6Gambar 6 Menu Link Aplikasi ...................................................................................................... 6Gambar 7 Kontak 7Gambar 8 Login Form .................................................................................................................. 7Gambar 9 Pengaturan User & Admin ........................................................................................... 8Gambar 10 Quantum GIS ............................................................................................................ 10Gambar 11 Geoserver Web Mapservice ...................................................................................... 11Gambar 12 Login Form ................................................................................................................ 14Gambar 13 Pengaturan User ....................................................................................................... 15Gambar 14 List User Administrator .............................................................................................. 15Gambar 15 Form Input User Administrator .................................................................................. 16Gambar 16 Form Edit User Administrator .................................................................................... 16Gambar 17 Form Atur Data User ................................................................................................. 17Gambar 18 List Dinas/SKPD/Unit Kerja ....................................................................................... 17Gambar 19 Form Input Data Dinas/SKPD ................................................................................... 18Gambar 20 Edit Data User Administrator ..................................................................................... 18Gambar 21 Menu Data & Informasi .............................................................................................. 19Gambar 22 List Ketegori Sub Menu Data & Informasi ................................................................. 20Gambar 23 Form Input Kategori Baru .......................................................................................... 20Gambar 24 Notifikasi Konfirmasi Hapus ...................................................................................... 21Gambar 25 Slider Headline Data & Informasi .............................................................................. 21Gambar 26 Setting Headline Slider .............................................................................................. 22Gambar 27 Tambah Data Konten ................................................................................................ 22Gambar 28 Form Input Tambah Konten ...................................................................................... 23Gambar 29 Form Editing Konten .................................................................................................. 24Gambar 30 Notifikasi konfirmasi hapus konten ............................................................................ 25Gambar 31 Tambah Data Konten ................................................................................................ 25Gambar 32 Geospasial ................................................................................................................ 26
ModulUser&AdministratorSISDA
1
BAB 1. TentangSISDA
1.1. LatarBelakang
AirmenurutUndangUndangNo. 11 tahun1974 tentangPengairan
adalah semua air yang terdapat di dalam dan atau berasal dari sumber
sumberair,baikyangterdapatdiatasmaupundibawahpermukaantanah,
tidaktermasukdalampengertianiniairyangterdapatdilaut.Kebutuhanair
makinmeningkatseiringdenganpeningkatanjumlahpendudukdanragam
kebutuhan yang menuntut sumber daya air dalam jumlah banyak, baik
untukrumahtangga,industri,irigasi,energi,danberbagaiaspekkehidupan
lainnya.Sedangkanpemanfaatanairuntukberbagaipenggunaancenderung
melebihi persediaan air yang ada dan belum terintegrasi dengan upaya
konservasiair.Hal inimakinmemberikan tekanan terhadapketersediaan
sumber daya air untuk berbagai penggunaan dan berdampak pada
meningkatnya potensi konflik antarsektor. Untuk mengalokasikan dan
mendistribusikan air secara proporsional dan mengurangi konflik antar
sektor pengguna air kebutuhan air setiap sektor harus ditetapkan, dan
jaringandistribusiairharusdibangunsecaraluas.
Masalah sumber daya air merupakan masalah yang melibatkan
banyak pihak, baik sektor swasta, pemerintahan maupun masyarakat
umum.Kompleksnyapermasalahanyangberhubungandenganpengelolaan
SumberDayaAir(SDA)menuntutpenyediaandatadaninformasiSDAyang
akurat,benar,sertatepatwaktusebagaidasardalamperumusankebijakan,
perencanaan, dan penyusunan rencana kerja terkait SDA. Karena itu,
pengelolaanSDAmemerlukandukunganSistemInformasiSumberDayaAir
(SISDA)berbasisteknologiinformasidankomunikasi(TIK)yanghandal.
Berdasarkanuraiandiatas,makadiperlukaninformasiyangmemadai
yang bisa digunakan dalam upaya pengelolaan dan pengendalian sumber
dayaair,termasukdiantaranyainformasispasial.SistemInformasiGeografis
(SIG)atau Geographic InformationSystem(GIS) adalahbagiandari sistem
informasi yang ditambahkan fitur atau data dan analisis spasial yang
diharapkan dapat membantu pengguna dalam memahami dan melakukan
analisispermasalahansecaralebihkomprehensif.
ModulUser&AdministratorSISDA
2
Kemajuan yang dicapai dalam bidang TIK dewasa ini telah dapat
mengatasi kendala jarak dengan biaya operasional yang cukup efisien
sehingga dapatmendukung pengelolaan informasi SDA yang terintegrasi.
HalinimemungkinkanpenyediaaandatadaninformasiSDAsecaraakurat,
benar, dan tepatwaktu. Dengan demikian SISDA akan dapatmendukung
pengambilankeputusansecaracepatsertamembantumeningkatkanmutu
keputusanyangdihasilkanolehpengelolaSDA.
1.2. TujuanPembangunanSISDA
Sistem Informasi Sumber Daya Air ditujukan untuk memudahkan
masyarakatdalammengaksesdatadaninformasibaikspasialmaupunnon
spasialyangberkaitandengansumberdayaair,sepertikondisiHidrologis,
Hidrometeorologis, Hidrogeologis, Kebijakan, Prasarana SDA, Teknologi,
LingkunganSDAsertamenampilkanobyeksumberdayaairyangberbasis
GISpadaWebBidangSumberDayaAir,DinasPUP&ESDMDIYyangdapat
diaksesolehpublikmaupun instansi danpengguna informasi SDA secara
mudah,cepatdanakurat.
1.3. Data&InformasiSDABerbasisSpasial1.3.1. DataSDABerbasisGIS
• Data kondisi SDA: sungai, air tanah, bendung, bendungan, waduk,
embung,jaringanirigasi,potensiembung,potensimataair;
• Data Kebencanaan: posko banjir, pos pengamat banjir, daerah rawah
banjir,daerahrawankekeringan,daerahrawanlongsor,daerahgunung
berapi;
• HataHidrologi&klimatologi:poshujan,posdugaair,posklimatologi;
• Data lahan: lahan pertanian, lahan perkebunan, lahan perikanan, lahan
hutan,lahankritis,lahankawasankarts;
• KelembagaanPengelolaSDA:DewanSDA,KomisiIrigasi,SKPDPengelola
SDA,GP3A,ForumDAS,TKPSDA,BalaiPengelolaDAS.
a. KondisiSumberDayaAir(SDA):
KondisiSDAmeliputikondisi:
ü Sungai,
ü Airtanah,
ü Bendung,
ü Bendungan,
ModulUser&AdministratorSISDA
3
ü Waduk,
ü Embung,
ü Jaringanirigasi,
ü Potensimataair.
b. Databencana
Databencanameliputi:
ü Poskobanjir,
ü Pospengamatbanjir,
ü Daerahrawahbanjir,
ü Daerahrawankekeringan.
c. Datahidrologi&klimatologi
Identifikasidaninventarisasidatahidrologi,meliputi:
ü Poshujan,
ü Posdugaair,
ü Posklimatologi.
d. Datalahan
Identifikasidaninventarisasidatalahan,meliputi:
ü Penggunaanlahan
ü lahanpertanian,
ü lahankritis,
ü lahankawasanKarst;
e. IdentifikasidaninventarisasidatakelembagaanpengelolaSDA
IdentifikasidaninventarisasidatakelembagaanpengelolaSDA,antaralain:
ü DewanSDA,
ü KomisiIrigasiProvinsidanKabupaten
ü SKPDPengelolaSDA,
ü GP3A,
ü ForumDAS,
ü TKPSDA,
ü BalaiPengelolaanDAS.
ModulUser&AdministratorSISDA
4
1.4. MenudanFeatureSISDA
Gambar 1 Main Menu SISDA
1.4.1. Beranda
• Beranda merupakan home page yang tampil ketika website Sistem
InformasiSumberDayaAirdiaksesmelaluibrowserdenganalamaturl
addresshttp://sda.dpupesdm.jogjaprov.go.id.
• SliderBerandamerupakanheadlinedanresumedaridatadaninformasi
untukmemberikaninformasiberupaflashnewsdatadaninformasi.
• Footer berupa hotlink button icon yang terdiri dari Layer, Maps dan
Instansi/SKPDterkait.
Gambar 2 Beranda & Slider Headline
1.4.2. Data&Informasi
• Data&Informasimerupakanmenuyangdisediakanuntukmenampung
baikdataberupanumerik,datastatistik,tabulermaupundapatmemuat
datayangtelahdiolahmenjadiinformasidalambentukdeskriptifmaupun
artikel yang dapat dilengkapi dengan gambar, video audio maupun
previewdataspasialterkaitsumberdayaairDIY.
ModulUser&AdministratorSISDA
5
Gambar 3 Menu Data & Informasi
1.4.3. FooterPage
• FooterPageberisikanmenuLayer,PetadanInstansi.Layermerupakan
akases linkuntukmenampilkan list layerdatageospasial teraitSumber
DayaAiryangditerbitkanolehWalidataseluruhinstansi/SKPDdiDaerah
Istimewa Yogyakarta, baik kewenangan pusat maupun daerah. Peta
merupakan susunan satu atau beberapa layer sesuai dengan tema
informasi geospasial. Instansi merupakan menu yang ditujukan untuk
mengetahui lokasi kantor atau sekretariat terkait dengan pengelolaan
SumberDayaAirsertainstansi/SKPD/UnitKerja/Forum/Komisiterkait
SumberDayaAirdiDaerahIstimewaYogyakarta.
Gambar 4 Menu Layer, Peta dan Instansi
ModulUser&AdministratorSISDA
6
1.4.4. Geospasial
• Geospasialmerupakanaspekkeruanganyangmenunjukkanlokasi,letak,
danposisisaranadanprasaranasumberdayaairyangbereferensipada
sistemkoordinatdandigambarkanpadapetadasar.
Gambar 5 Geospasial Explorer
1.4.5. Link/AplikasiSDA
• Merupakan menu yang disediakan untuk menampung direct link ke
AplikasiSDAsepertiAKNPIdanjugalinkdatageospasialdariinstansilain,
seperti link ke Sistem Informasi Perencanaan Tata Ruang BAPPEDA
ProvinsiDIY.
Gambar 6 Menu Link Aplikasi
ModulUser&AdministratorSISDA
7
1.4.6. Kontak
• Kontak merupakan halaman page yang menunjukan lokasi kantor
pengelolaSISDADIYyaituBidangSumberDayaAirDinasPUPESDMDIY.
Gambar 7 Kontak
1.4.7. Login/Logout
• Login/Logout merupakan menu untuk administrator yang disediakan
khususuntukaksesmasukdankeluardanautentifikasiuser.
Gambar 8 Login Form
ModulUser&AdministratorSISDA
8
1.4.8. PengaturanUser
• Pengaturanusermerupakanmenuyangdisediakanuntukmenambahkan
userbaru yangdapamelakukan editingmaupunmenambahkan artikel
mengenaiSumberDayaAir.
Gambar 9 Pengaturan User & Admin
ModulUser&AdministratorSISDA
9
BAB 2. SystemRequirementsSISDA
Systemrequirments SISDAdari sisi server side danclient side terdiridaribeberapa
komponenyang terkaitbaikhardware,softwaredanbrainware terkaitSDM.Detail
systemrequrmentsSISDAsebagaiberikut:
2.1. StandardKompetensiBrainware/SDM(Administrator)
Standar kompetensi yang harus dimiliki oleh pengelola SISDA dalam hal ini
sebagaiadministratorsebagaiberikut:
1. MemilikipemahamanterkaitSumberDayaAirDIY.
2. MemilikipemahamanterkaitdatageospasialSumberDayaAirDIY.
3. DapatmengeloladatageospasialSumberDayaAirDIY.
4. DapatmembangundatabaseSumberDayaAirDIY.
5. Dapat menghimpun data dan informasi terkait sumber daya air
maupun prasarana Sumber daya air yang ada di DIY, dari tahap
perencanaankekonstruksidanprogressertakondisiprasaranayang
ada.
6. Mampu mengolah data spasial dan non spasial menjadi informasi
terkaitSumberDayaAir.
7. Memilikikemampuandalanmengoprasikankomputer/PC.
8. Mampumendeteksipermasalahanhardwaredansoftwaresertadapat
mengatasitroubleshootingterkaitdenganperangkatkomputer/PC.
9. DapatmelakukancontrolkualitasterhadapdatadaninformasiSISDA.
10. MampumenjadiHelpDeskterkaitdatadaninformasiSISDA.
2.2. PerangkatKeras(Hardware)
Perangkatkerasyangdiperlukanuserdanadministratoryaituberupa
PC yang dapat terkoneksi ke servermelalui jaringan internet, spesifikasi PC
ClientuntukUsermaupunAdministratoryangdigunakanuntukakseslangsung
keSISDAsecaraonline,sebagaiberikut:
1. RAMminimal8GB
2. Hardiskminimal750GB,TipeSSDlebihbaik
3. KecepatanInternetUplink&Downlink10MBPS
4. KecepatanCPUminimal2.6GHz
ModulUser&AdministratorSISDA
10
KemudianspesifikasiserverSISDAagardapatdiaksesdenganperformadan
kinerjayangbaikadalahsebagaiberikut:
1. CPU4Corearsitektur64bit,ClockProsesorMinimal3.0GHz
2. MemoryDDRAMMinimal16GB
3. SSDStorage64GB
4. BandwidthUplink&Downlink:100Mbps*ataulebihbesar(1Gbps)
2.3. PerangkatLunak(Software)
Perangkatlunakyangdibutuhkansebagaiuserhanyaberupabrowser
seperti Safari, Firefox, Chrome, Edge (IE), Opera browser untuk mengakses
Sistem Informasi Sumber Daya Air secara online. Sedangkan untuk
administratorselainbrowserdiperlukanbeberapaperangkatlunakberikut:
2.3.1. QuantumGIS
Quantum GIS merupakan perangkat lunak SIG (Sistem Informasi
Geografis)berbasisopensource,digunakanuntukkeperluanpengolahandata
geospasial yang dikembangkan oleh Open Source Geospatial Foundation
(OSGeo).QuantumGISdigunakanuntukmengolah,mengeditdanmengupload
dataspasialsecararemotekeserverdatabasespasialsepertigambarberikut
denganversiminimal2.18ataulebihtinggi.
Gambar 10 Quantum GIS
ModulUser&AdministratorSISDA
11
2.3.2. Geoserver
GeoServer adalah Software yang terinstall pada server. Software ini
dirancang untuk interoperabilitas dan map engine pada server, GeoServer
menerbitkan data dari sumber data utama spasial menggunakan standar
terbuka.GeoServerdapatmenghubungkaninformasi/datayangadakedalam
suatu global virtual seperti Google Earth dan NASA World Wind, serta
menghubungkankedalampetaberbasiswebsepertiGoogleMaps,BingMaps,
dan OpenLayers. Pada intinya, perangkat lunak ini digunakan untuk proses
renderdatayangakanditampilkandalamformatwebmapservice.
Gambar 11 Geoserver Web Mapservice
2.3.3. PostgreSQLdanPOSTGIS
PostgreSQL adalah sebuah sistem basis data yang dapat dugunakan
secarabebas(opensource).Perangkatlunakinimerupakansalahsatubasisdata
yangpalingbanyakdigunakansaat ini,selainMySQLdanOracle.PostgreSQL
menyediakanbanyakfituryangbergunauntukberbagaikeperluanbasisdata.
Dalam hubunganya dengan Sistem Informasi Geografis, PostgreSQL
merupakan basis data yang dapatmenyimpan data berupa objek geometrik
berupa point (titik), garis (line), dan area (polygon) selain dari table-tabel
atribut (berserta objek-objek lainnya seperti halnya view, rule, constraint,
indeks, fungsi/prosedur,dan lainsejenisnya)sebagaimanabasisdatabiasa.
DenganmenggunakanpluginPostGIS,yangbergunasebagaispatialdatabase
engine,atauextensionyangdapatmenambahdukungandalampendefinisian
danpengelolaan(fungsional)unsur-unsurspasialbagiDBMSobjekrelasional
ModulUser&AdministratorSISDA
12
PostgreSQL.Secarapraktis,PostGISberperansebagaipenyedialayananspasial
bagiDBMSini.MemungkinkanPostgreSQLuntukdigunakansebagaibackend
basis data spasial untuk perangkat lunak SIG. Singkatnya, PostGIS juga
menambahkantipe-tipe(kumpulan)SQL(query),operator,danfungsi-fungsi
(analisis) yang kemudian menyebabkan DBMS PostgreSQL menjadi bersifat
“Spatially-enabled”.PostgreSQLmerupakansalahsatubasisdataterbaikuntuk
keperluanSIGsaatini,dilihatdaricostandvalueperformance-nya.
PostGIS adalah satu set fungsi GIS yang ditambahkan ke PostgreSQL
yangmemungkinkan database untukmenyimpan danmenganalisa data GIS.
SebuahPostGISquerybrowsertelahdikembangkanuntuktutorialinisehingga
dapatmelihatoutputgeografisdariqueryPostGIS.FungsiPostGISdijalankan
melaluiquerypadakolomgeometridarisebuahtabeldataGIS.
2.4. StandardDataSpasialWebGISSISDA
Standarddatasumberdayaairharusmemenuhibeberapakriteriayaitu
sistemproyeksi dan ketelitian data spasial terkait dengan skala data spasial
sertaklasifikasidata.
2.4.1. SistemProyeksi
Sistem proyeksi Koordinat UTM (Universal Transver Mercator)
membagibumikedalambeberapazonapadaBujur,antara01s/d60dengan
satuanmeter.Padasistemkoordinatbumiakandibagimenjadiduabagian
untukpenggunaandalamperangkatlunak,diataskhatulistiwasebagaibagian
Utaradengansimbol (N)sertadibagianSelatankhatulistiwadiberi simbol
(S).SedangkanpadapembagiansebenarnyadariUTM,lintangdibagisetiap8
derajat,dibagianSelatangariskhatulistiwadiberinamadenganhurufAs.dM,
dandibagianUtarakhatulistiwadiberinamaNs.dZdenganmenghilangkan
huruf O. Satu CRS (Coordinate Reference Systems) selalu terdiri dari satu
Datumdan satu Sistemkoordinat.Datumadalahkumpulanparameterdan
titik kontrol yang hubungan geometriknya diketahui, baik melalui
pengukuranataupenghitungan.SistemKoordinatmerupakanbilanganyang
dipergunakan/dipakai untuk menunjukkan lokasi suatu titik, garis,
permukaanatauruang.
Informasi lokasi ditentukan berdasarkan sistem koordinat, yang
diantaranyamencakupdatumdanproyeksipeta.ProyeksiPetaadalahsistem
yang dirancang untuk merepresentasikan permukaan dari suatu bidang
ModulUser&AdministratorSISDA
13
lengkung atau spheroid (misalnya bumi) pada suatu bidang datar. Di
Indonesia selalu mengunakan Datum WGS84 / WGS 1984, dan Sistem
Koordinat di Indonesia bisa menggunakan Geographic Coordinate System
WGS1984 (WGS84 / EPSG:4326), Wilayah DIY berada di UTM Zona 49S
(WGS84/UTMZone49S/EPSG:32750).
2.4.2. KetelitianDataSpasial
Ketelitian data spasial adalah ketepatan, kerincian dan kelengkapan data,
dan/atau informasi georeferensi dan tematik, sehingga merupakan
penggabungandarisistemreferensigeometris,skala,akurasi,ataukerincian
basis data, format penyimpanan secara digital termasuk kode unsur,
penyajian kartografis mencakup simbol, warna, arsiran dan notasi, serta
kelengkapanmuatandataspasial.
ModulUser&AdministratorSISDA
14
BAB 3. OperasionalisasiSISDA
SISDAdikeloladandikoordinatoriolehBidangSumberDayaAirDinasPUPESDM
DIY
Dengan administrator tidak hanya dari Bidang Sumber Daya Air, tetapi juga oleh
Instansi/SKPD/Unit Kerja terkait Sumber Daya Air di DIY. Berikut petujuk
operasionalisasi sebagai administratoruntukmelakukancreate,updatedandelete
kontenyangadapadaSISDA,maupununtukmembuatuseradminbaru.
3.1. TambahUserBaru
a. Bukapageloginpadaurlberikut
http://sda.dpupesdm.jogjaprov.go.id/page/login.php
b. MasukkanUserIDdanPasswordselakuAdministrator
c. Setelahloginmakaakanmunculmenupengaturanuserpadaheader
sepertiGambar13.
Gambar 12 Login Form
ModulUser&AdministratorSISDA
15
Gambar 13 Pengaturan User
d. KlikTambahUserBaru,sampaimunculpageGamabr14berikut
Gambar 14 List User Administrator
e. Kliktambahuser,untukmenampilkaninputanuserbarusepertipada
Gambar15.
f. Level user dibagi menjadi 2 level user yaitu 1. Admin dan 2. User,
Adminmemilikihaksepertisuperadmin,bisamembuatuserbarudan
membuatkontensedangkanuserhanyamemilikihakuntukmengisi
kontensesuaidenganketogorinyasaja.
ModulUser&AdministratorSISDA
16
Gambar 15 Form Input User Administrator
g. Masukkan Nama Lengkap, Nama User Login, Password, Ulangi
Password, Dinas, Bidang, Jabatan dan Level User, jika sudah klik
simpan.Makauserbarutelahditambahkan.
3.2. EditDatadanPasswordUserAdministrator
a. Padaposisilogin,pilihmenuPengaturanUser,kemudianpadadropdown
menupilihEditDatadanPassword,sampaimunculmenuberikut
Gambar 16 Form Edit User Administrator
b. Edit data yang perlu di edit, klik simpan untukmenyimpanperubahan
yangtelahdilakukan.
ModulUser&AdministratorSISDA
17
3.3. MengaturDataUserAdministrator
a. AturDataUserdigunakanuntukmenghapusataumengubahdatauser
yangdipilihpadalistuseryangada.
b. Padakondisiloginsebagaiuseradministratorpilihpengaturanuser.
c. Kemudianpilihaturdatausersehinggamunculhalamansebagaiberikut.
d. Pilihuseryangakandihapusataudiubahdatausernya.
3.4. DataDinas/Instansi/SKPD/UnitKerja
a. Data Dinas berisi list dinas/instansi/skpd/unit kerja terkait dengan
SumberDayaAirDIY.
b. Pada posisi sudah login pilih menu Pengaturan User, kemudian pada
dropdownmenuklikdatadinas.
c. Makaakanmuncullistdatadinassebagaiberikut
Gambar 17 Form Atur Data User
Gambar 18 List Dinas/SKPD/Unit Kerja
ModulUser&AdministratorSISDA
18
d. Kemudianuntukmenambahkannamadinas,edit,hapusdapatdilakukan
denganmemilihterlebihdahulunamadinasyangakandieditataupun
dihapus.
e. TambahnamadinasdapatlangsungdilakukandenganmengklikTambah
sampaimunculmenuinputansebagaiberikut,
Gambar 19 Form Input Data Dinas/SKPD
f. Kemudian dapat dengan menginputkan Nama Dinas/Instansi, Alamat
WebsitedanLogoInstansiterkait.Kemudiansimpanuntukmenyimpan
listdinas.
g. Edit Data User digunakan untuk mengubah data dinas yang sudah
dimasukkanpadalistdinas.
Gambar 20 Edit Data User Administrator
h. Hapusdatadinasdigunakanuntukmendeletedatadinasyangadadilist.
3.5. Create,Edit,DeleteData&Informasi
a. Data dan Informasi dapat dugunakan untuk menyampaikan data-data
maupun data yang telah diolah menjadi informasi terkait dengan ke-
sumberdayaairanDIY.
b. Mengisikonten,menambahkategorimaupunmengaturheadlineslider
dapatdilakukanpadaposisiloginsebagaiadministrator.
ModulUser&AdministratorSISDA
19
c. Setelahloginmakapadamenudropdowndata&informasiakanmuncul
tambahan sub menu berupa pengaturan kategori data dan atur slide
berandauntukmengaturheadlinesliderpadaberanda.
3.6. PengaturanKategoriData&Informasi
a. PengaturanKategoriData&Informasihanyapadatdilakukanolehuser
yangtelahlogin.PadaposisiloginpilihmenuData&Informasikemudian
pilih dropdown menu pengaturan kategori data, sehingga muncul
tampilanlistkategoridatadaninformasiyangtelahdiinputkan.
b. PadalistData&InformasiakanmunculNamaKategoriyangmerupakan
kategori dari data/informasi, kemudian urutan pada dropdown menu
data&informasisertaUseryangmengcreatekategoritersebut.Dibagian
bawahadatombolaksitambah,editdanhapussepertipadagambar22.
Gambar 21 Menu Data & Informasi
ModulUser&AdministratorSISDA
20
c. Untuk menambahkan ketegori klik tombol tambah, sehingga muncul
tampilaninputansepertiberikut
Gambar 23 Form Input Kategori Baru
d. KetikkanNamaKategoridanUrutankemudiansimpan,danklikOKuntuk
konfirmasi penyimpanan, maka akan muncul notifikasi data berhasil
disimpan.
e. Penghapusanlistkategorihanyadapatdilakukanjikadatadaninformasi
padakategoaritersebutkosong.
f. Perludiingatbahwakategorimaupunkontenyang telahdihapus tidak
dapatdikembalikanlagi/restore.
g. Menghapus list klik tombol Hapus maka akan muncul notifikasi
konfirmasi seperti gambar 24 berikut, klik OK untuk meng eksekusi
penghapusan.
Gambar 22 List Ketegori Sub Menu Data & Informasi
ModulUser&AdministratorSISDA
21
3.7. MengaturSliderBeranda
a. Slide beranda merupakan slider yang muncul pada home page untuk
memuatheadlinedata informasiyangadapadawebsiteSISDA.Contoh
tampilansliderheadlinesepertiberikut
b. Untuk mengatur slider beranda pada posisi login sebagai admin,
kemudian memilih menu Data & Informasi kemudian pilih atur slide
beranda,sehinggamunculpagesepertigambar26.
Gambar 24 Notifikasi Konfirmasi Hapus
Gambar 25 Slider Headline Data & Informasi
ModulUser&AdministratorSISDA
22
Gambar 26 Setting Headline Slider
c. Memilihheadlinedatadaninformasiyangakanditampilkanpadaslider
dapatdilakukandenganmemberitandacheckpadakolom,kemudianklik
simpandata.
3.8. Menambah,Edit,HapusKontenData&Informasi
a. Menambah konten dapat dilakukan dengan sangat mudah, dan untuk
melakukanpenambahan,editdanhapuskontendatadaninformasidapat
dilakukanhanyapadaposisitelahlogin.
b. Untukmenambahkonten,setelahloginpadamenuData&Informasipilih
sub menu kategori yang akan ditambahkan data dan informasinya,
misalkanPotensiSDA,makaakanmuncultampilanberikut
Gambar 27 Tambah Data Konten
ModulUser&AdministratorSISDA
23
c. KliktombolTambahData,makaakanmunculinputansepertiberikut
Gambar 28 Form Input Tambah Konten
d. IsikanJudul,ResumedanGambarPreviewyangnantidapatditampilkan
padaslider.Kemudianbodykontendapatdiisikanpadadeskripsi.Klik
SimpanDatasetelahsemuaterisi.
e. Refrensi gambar juga dapat ditambahkan pada body konten dengan
terlebihdahulumengupload refrensi gambardanmemasukkan format
referensikedalambodytext“gambar/namafile”,namafile,diisisesuai
namagambaryangterupload.
f. Edithanyabisadilakukanpadaposisitelahlogin,daneditinghanyadapat
dilakukanolehuseradminpembuatkonten.
g. Untukmelakukaneditingpilihkontenmanayangakandieditkemudian
klik tombol edit, sehingga inputan konten yang akan di edit, sebagai
contohakantampilsepertipadagambar29.
ModulUser&AdministratorSISDA
24
Gambar 29 Form Editing Konten
h. KlikSimpanDatauntukmengakhirieditingdata.
i. Menghapus konten pilih menu Hapus, maka akan keluar notifikasi
konfirmasisepertiGambar30.
ModulUser&AdministratorSISDA
25
Gambar 30 Notifikasi konfirmasi hapus konten
j. PilihOkuntukmengeksekusihapuskonten,makakontenakanterhapus.
3.9. MelakukanInputData&InformasidenganTemplate
a. Menambahkontendapatdilakukandenganmenggunakantemplateyang
sudahdisediakanyaitutemplateuntukembungdandaerahirigasi.
b. Untukmenambahkonten,setelahloginpadamenuData&Informasipilih
sub menu kategori yang akan ditambahkan data dan informasinya,
misalkanPrasaranaSDA,kemudianpilihtemplateyangakandigunakan,
kemudianlakukaninputpadaformtamplateyangtersedia
Gambar 31 Tambah Data Konten
ModulUser&AdministratorSISDA
26
3.10. Geospasial
a. Menu geospasial berisi data spasial tematik liputan wilayah DIY yang
terkaitdenganSumberDayaAir.
b. UntukmenampilkanklikmenuGeospasialmakapageGeoExplorerakan
munculsepertiberikut
c. MenuGeospasialGeoExplorer terdiri dari Panel Layer,Tools, danMap
View.
d. Layer Panelmemuat list layer peta yang dapat ditampilkan padaMap
View. Klik tombol + hijau untuk menambahkan dan – merah untuk
menghapuslayerpadalayerpanellist.
e. MapViewdigunakanuntukmenampilkandataspasial.
f. Toolsterdiridarialatnavigasipanel,Pan,ZoomIn/Out,SaveMap,Print,
Identify,Query,MeasurementdanEdit.
Gambar 32 Geospasial
ModulUser&AdministratorSISDA
27
BAB 4. Kustomisasi Konten
Kustomisasi dan modifikasi konten dapat dilakukan dengan menuliskan baris
HTML(HypertextMarkup Language) pada inputan data dan informasi. HTML sendiri
adalah sebuah bahasa pemrograman yang mengatur browser bagaimana sebuah
halamanditampilkandiinternet.HTMLmerupakancabangdaribahasayanglebihbesar,
SGML(StandardGeneralizedMarkupLanguage).
Sebagaimana tujuan awalnya untuk mengatur tampilan sebuah dokumen, HTML
bukanlah sebuah Bahasa pemrograman untukmembuat program yang dapat berdiri
sendiri.Sehinggabeberapafiturbahasapemrogramanpadaumumnyasepertipemilihan
kondisidanperulangantidaktercakupdisini.SehinggaHTMLharusdisandingkanatau
dikombinasikan dengan bahasa pemrogramanlain untuk membuat sebuah program
yangberbasisweb.
4.1. StrukturHTML
PemrogramanHTMLtidaklepasdarilabelberkurungyangpopulerdengansebutantags,berikutadalahsebuahcontohdokumenHTMLsederhana:
<HTML> <HEAD> <title>Sumber Daya Air</title> </HEAD> <body>
Ini adalah data dan informasi sumber daya air dari sebuah dokumen HTML
</body> </HTML>
Padadokumentersebuttampakbeberapasifatdasardarisebuahdokumenhtml:Diawalidengantag<html>dandiakhiridengantag</html>.Untuktagyangpalingawalmenjelaskanbahasadaridokumentersebut,untukbahasapemrogramanlainjugaakanmemilikinamanyasendiri.Tagpembukadanpenutupdibedakandenganadanyatanda/dipenutuptag.
TerdiridariduabagianyaituHeaddanBody.Headmenjelaskaninformasi-informasiyangakandicantumkandalamsebuahdokumen,sementarapadaBodyberisiinformasiyanginginditampilkandalamsebuahdokumen.
Besarkecilnyahuruftidakberpengaruhdalampenulisantags.
ModulUser&AdministratorSISDA
28
4.2. MembuatHalamanHTML
Padabagian iniakan langsungmencobamembuathalamanHTMLsederhana.Sebagaieditornyacukupmenggunakantoolyangsederhanasajayaitunotepadpadawindowsataugeditpadalinux.Sebenarnyabebasuntukmenggunakaneditorapasaja,mulaidariyangpalingsederhanasepertinotepaddangedit,sampaiyangmemangditujukanuntukpemrogramanwebsepertiFrontpage,Dreamweaver,danQuanta.Tapiagarbenar-benarmenguasai konsep pemrograman web dan untuk menghindarkan diri dariketergantunganakansangatbaikjikamulaidaridasar.Padaeditormulailahketikkodeberikut:<html> <head> <title>Halaman HTML Perdana</title> </head> <body>
Hallo semuanya, selamat datang di halaman PU P sumber daya air DIY!
</body> </html> 4.3. LayoutTeks
Setelahberhasilmembuathalamansederhanakinisaatnyabelajarjurus-jurustagstambahanuntukmempercantiktampilanweb.
4.3.1. Layout Teks <br>
Misalkan ingin membuat sebuah halaman text dua baris, dengan membuat sebuahhalamanhtmlsebagaiberikut:
<html> <head> <title>Daerah Irigasi</title> </head> <body> kesatuan wilayah atau hamparan tanah yang mendapat air dari satu jaringan irigasi </body> </html>
Dansekarangcobalahdibukadenganbrowser.Akantampakbahwatekstampildalamsatubarismendatar.Agarteksdiatastampilsesuaidenganyanginginkanmakaperlumenambahkansebuattag<br>.Setelahdimodifikasimakahalamandiatasakanmenjadi:
<html> <html> <head> <title>Daerah Irigasi</title>
ModulUser&AdministratorSISDA
29
</head> <body> kesatuan wilayah atau hamparan tanah <br> yang mendapat air dari satu jaringan irigasi </body> </html>
Dansekarangjikabrowser,barulahdapatkantampilanyanginginkan.Tag<br>initidakmembutuhkantagpenutup.
4.3.1. Paragraf <p>
Tag ini berfungsi untuk memberitahu browser bahwasanya ingin membuat jedaparagrafbaru,dengankatalainmemasukkansebuahlinebreakdanmemberijaraksatuspasi kosong dengan baris berikutnya. Mirip dengan tag <br>, tag <p> juga tidakmembutuhkantagpenutup.Berikutcontohpenerapannya:
<html> <head> <title>Air</title> </head> <body>
Air sebagai sumber kehidupan <br> yang dibutuhkan oleh semua makhluk hidup harus<p> senantiasa dijaga kelestariannya. Akan tetapi karena<br> tidak adanya tempat yang dapat menampung <p> melimpahnya air dan seringkali air hanya terbuang mengalir menyatu dengan sungai terdekat.
</body> </html>
Selanjutnya coba untuk menjalankan dokumen diatas pada browser.
4.3.1. Paragraf <p>
Seringkali ingin menambahkan spasi antar karakter, sementara pada bahasa HTML spasi
kosong lebih dari satu akan diabaikan. Untuk keperluan itulah menggunakan tag dan
tag ini cukup unik karena tidak memerlukan <>. Berikut contoh penggunaannya:
<html> <head> <title>Tes spasi</title> </head> <body> 1 2 3 4 </body> </html>
ModulUser&AdministratorSISDA
30
4.3.1. Rata Tengah <center>
Ada kalanya ingin membuat teks tampil rata tengah, saat itulah menggunakan tag<center>.Taginidimasukandiawaldandiakhirteksyangakanbuatratatengah,bisaberupa satu kata, kalimat atau paragraf. Misalnya pada text berikut inginmembuatsemuanyatampakratatengahmakaakantampaksebagaiberikut:
<html> <head> <title>Naik-naik</title> </head> <body> <center>
Air sebagai sumber kehidupan <br> yang dibutuhkan oleh semua makhluk hidup harus<br> senantiasa dijaga kelestariannya. Akan tetapi karena<br> tidak adanya tempat yang dapat menampung <br> melimpahnya air dan seringkali air hanya terbuang<br> mengalir menyatu dengan sungai terdekat. <center>
</body> </html>
4.3.1. Heading <h>
Dalamartikelatautulisanseringkalimembuatjudul,denganformatyangberbedadaritulisanumunya.Untukitubisamenggunakantag<h>ditambahangkadibelakangnya,misal<h1>,<h2>,danseterusnya.Untukcontohlebihjelasnyaandadapatmelihatkodedibawah:
<html> <head> <title>Bermacam Jenis Heading</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> Ukuran teks normal </body> </html>
ModulUser&AdministratorSISDA
31
Denganmencobamenjalankanhalamandiatasdenganbrowserandaakanmendapatkanberbagai pilihan heading yang akan anda gunakan. Selain itu dengan tambahan alignandabisamengaturletakdariheadingtersebut,pilihanyangtersediaadalahleft,centerdanright,contohnya:
<h1 align="center">Kata ini akan berada di tengah</h1> 4.4. Tabel
Tabelakanbergunauntukmemberikanbentukpadahalamanweb,karenahalamanyanghanyaberisi teksakan terasamembosankan,dan tabel jugabergunauntukmengaturtampilanteksagarlebihrapi.
4.4.1. Tag Dasar <table>
Untukmembuattabelmemulainyadengantag<table>dansepertibiasa,mengakhirinyadengan</table>.Tagberikutnyayangharus kenaladalah<tr>,yangberfungsiuntukmembuat rowataubaris, semakinbanyak<tr>yang buatakansemakinbanyak jugabarisyangadapadasuatutabel.Taklengkapmengenalbarisjikatidakmengenalkolom,dimanatagnyaadalah<td>dantaginibiasaditempatkandidalamtag<tr>.Untuklebihjelasnyadalampenggunaanlihatlahcontohberikut:
<table border="1"> <tr> <td>Baris 1 kolom 1</td> <td>Baris 1 kolom 2</td> </tr> <tr> <td>Baris 2 kolom 1</td> <td>Baris 2 kolom 2</td> </tr> </table>
Jikalihatpadakodediatassetelahtagtablelihatadanyaopsiuntukborder,borderdisiniberfungsi untukmengatur ketebalan dari garis pembatas di sekeliling tabel, semakinbesarnilainyamakagariskelilingnyaakansemakintebal.Danjikamencantumkannilaiborderiniataubernilai0,makayangtampakhanyalahteksdidalamtabelsaja.
4.4.2. Mengatur lebar tabel
Opsilainuntuktabeladalahwidth,untukmengaturlebardaritabel.Terdapatduacarayangbisalakukanuntukmengaturnya,yangpertamamengaturnyadalambentukangkaabsolut dalam pixel(misal width=400) atau dengan persentase lebar browser(misalwidth=80%).Contohnya:
<table border="1" width="300">
ModulUser&AdministratorSISDA
32
4.4.3. Cell pading Cell spacing
Selanjutanya akan belajar mengatur jarak antara teks di dalam sel dengan border,disebutjugacellpaddingdanmengaturjarakantarsel,disebutjugacellspacing.Tanpaadanya cellpadding seringkali tampak jarak teks terlalu rapat dengan border disekelilingnyasehinggaperlutambah.Angkayangdigunakandisiniadalahdalampixel,berikutcontohpenggunaannya
<table border="1" cellpadding="10"> <tr> <td>Baris 1 kolom 1</td> <td>Baris 1 kolom 2</td> </tr> <tr> <td>Baris 2 kolom 1</td> <td>Baris 2 kolom 2</td> </tr> </table>
Sementarajikainginmenambahspasiataujarakantarsel,gunakanopsicellspacingdalambesaranpixel,berikutcontohnya
<table border="1" cellspacing="10"> <tr> <td>Baris 1 kolom 1</td> <td>Baris 1 kolom 2</td> </tr> <tr> <td>Baris 2 kolom 1</td> <td>Baris 2 kolom 2</td> </tr> </table>
4.4.4. Colspan dan Rowspan
Lalubagaimanajikainginmeleburbeberapakolomataubarismenjadisatu?Untukitubisa gunakan colspan untuk kolom, dan rowspan untuk baris. Contoh dari keduanyadalamsatuhalamanadalahsebagaiberikut:
<h4>Dua kolom jadi satu</h4> <table border="1"> <tr> <th>Nama</th> <th colspan="2">Telepon:</th>
</tr> <tr>
ModulUser&AdministratorSISDA
33
<td>Busthomy</td>
<td>0274 XXXXXX</td> <td>0274 XXXXXX</td> </tr> </table> <h4>Dua baris jadi satu</h4> <table border="1"> <tr> <th>Nama</th> <td>Tegar</td> </tr> <tr> <th rowspan="2">Telepon:</th> <td>0274 XXX-XXX</td> </tr> <tr>
<td>0856 XXX-XXX</td> </tr> </table>
4.4.5. Judul Kolom
Seringkali inginmenampilkanjuduldarikolom,untukitu tambahkantag<th>,misalpadacontohsebelumnyaingintambahkanheadingmakacontohdiatasakanmenjadi:
<table border="1"> <tr> <th>Kolom 1</th> <th>Kolom 2</th> </tr> <tr> <td>Baris 1 kolom 1</td> <td>Baris 1 kolom 2</td> </tr> <tr>
<td>Baris 2 kolom 1</td> <td>Baris 2 kolom 2</td> </tr> </table>
ModulUser&AdministratorSISDA
34
4.4.6. Judul Tabel
Masihtentangjudul,jikainginmenambahkanjuduldaritabelsecarakeseluruhanbisatambahkantag<caption>setelahtag<table>,masihdengancontohyangsama:
<table border="1"> <caption>Judul tabel</caption> <tr> <th>Kolom 1</th> <th>Kolom 2</th> </tr> <tr> <td>Baris 1 kolom 1</td> <td>Baris 1 kolom 2</td> </tr> <tr>
<td>Baris 2 kolom 1</td> <td>Baris 2 kolom 2</td> </tr> </table>
4.5. Menambahkan Gambar
Untukmenambahkangambarpadahalamanweb,dapatmenggunakantag<img>tanpatagpenutup.Berikutcontohpenggunaannya:
<img src="foto.jpg">
Dimanatagdiatasdapatdimasukkandibagianmanasajayanginginkan.Adabaiknyajuga tambahkanopsialt,sehinggabilagambartidakdapatditampilkanolehbrowser,akanditampilkantekspengganti.Beberapabrowserjugaakanmenampilkanteksinijikamelayangkankursordiatasgambar.Contohnya:
<img src="foto.jpg" alt="ini fotoku">
Sumberdarigambarjugabisadaridirektorilain,contoh:
<img src="/images/foto.jpg">
atausituslain
<img src="www.gambar.com/image_dir/foto.jpg">
4.5.1. Mengatur Ukuran Gambar
jugadapatmengaturukurandarigambaryangingintampilkandenganmenambahkanopsiwidthdanheight,berikutadalahcontohnya:
<img src="foto.jpg" width="40" height="20">
ModulUser&AdministratorSISDA
35
4.5.2. Mengatur Posisi Gambar
Posisigambarjugabisaaturrelatifmenurutteks.Terdapattigapilihanposisivertikalyangbisagunakan,yaitubottom,middledantopdanduaposisihorizontalyaituleftdanright.Jikaposisiinitidaktentukansecaraotomatismakaakanmenjadibottom.Contohpenerapannya:
<img src="foto.jpg" align="middle">
4.6. Links
Hyperlinks atau biasa disebut dengan links sajamerupakan salah satu ciri khas dankelebihandarihalamanweb,yaitukemampuannyauntukmeloncatatauberpindahkehalamanlaindenganhanyasatuklikmouse.
4.6.1. Teknik Dasar Link
Linkyangpalingsederhanadanyangpalingsering lihatdalamhalamanweb,berupakalimat atau huruf berwarna biru dan bergaris bawah.Mari lihat contoh link untukhalamanlainyangmasihberadapadasatudirektoriyangsamadenganhalamanyangsedangbuka:
Klik <a href="halaman2.htm">Halaman 2</a> untuk berpindah ke halaman 2
Danjikainginberpindahkehalamandisituslain,makabisamelihatcontohberikut:
<a href="http://www.google.com/">Mesin pencari</a>
4.6.2. Link dengan Gambar
Juga bisamembuat linkmenggunakan gambar,misal pada contoh sebelumnya inginmenampilkangambarkacapembesaryangjikadi-klikakanmenujukesitusGooglemakacaranyaadalah:
<a href="http://www.google.com/"><img src="lup.gif"></a>
4.6.3. Link ke jedela baru
Ada kalanya ingin ketika link di-klikmaka halaman yang dituju akan dibuka dalamhalamanbaru,untukitutambahkanopsitarget,sepertipadacontohberikut:
<a href="http://www.google.com/" target="_blank">Mesin pencari</a>
ModulUser&AdministratorSISDA
36
4.7. Frame
Framesangatbergunajikainginmenampilkanlebihdarisatuhalamanwebdalamsatujendelabrowser.Dimanaframeakanmemecahsatutampilanmenjadibeberapabagiantampilan. Isi satu frame merupakan bagian independen. Namun frame setidaknyamemiliki dua kelemahan dimana programmer web harus memperhatikan beberapadokumenHTMLsekaligusdankesulitanuntukmencetakkeseluruhanhalaman.
4.7.1. Tag <frameset>
Tag <frameset> mendefinisikan bagaimana memecah satu tampilan halaman webmenjadi beberapa tampilan sekaligus. Frameset disini jugamengatur beberapa barisataukolomyangakanditampilkan,dannantinyaakanberdampakdariukurantempatyang digunakan.Misalkan inginmenampilkan dua halaman sekaligus(halaman1.htmdanhalaman2.htm)denganproporsi25%:75%makadalambahasaHTMLakanmenjadi:
<frameset cols="25%,75%"> <frame src="halaman1.htm"> <frame src="halaman2.htm"> </frameset>
Untukmembuatsebuahhalamandaribeberapabarismakacukupmengganticolsdiatasmenjadirows.
4.7.2. Mengunci frame
Satukelemahandaricaradiatasadalahborderdariframedapatdiubaholehpengunjungataubergeser.Untukituakanlebihbaikjikatambahkanjugaopsinoresizepadacontohdiatas:
<frameset cols="25%,75%"> <frame noresize="norezise" src="halaman1.htm"> <frame noresize="norezise" src="halaman2.htm"> </frameset>
4.7.3. Menghilangkan border
Jugabisamenghilangkanborderataupembatasyangadadisekelilingframedenganopsiframeborder,sebagaicontoh:
<frameset cols="25%,75%"> <frame frameborder="0" src="halaman1.htm"> <frame frameborder="0" src="halaman2.htm"> </frameset>
ModulUser&AdministratorSISDA
37
4.7.4. Frame navigasi
Salahsatupenggunaanframeyangpopuleradalahframenavigasi,dimanaterdapatsatuframe statis yang berisi link, dan frame kedua yangmenampilkan isi dari setiap linktersebut.Pertamabuatdulusatuhalamanyangberisilinkyangdiinginkan,misaldiberinamamenu.htmdenganisifile:
<a href="halaman1.htm" target="showframe">Halaman 1</a> <a href="halaman2.htm" target="showframe">Halaman 2</a> <a href="halaman3.htm" target="showframe">Halaman 3</a>
Kemudianbarubuathalamanutamayangmenampilkankeduaframeini,contoh:
<html><framesetcols="120,*"><framesrc="menu.htm"><framesrc="halaman1.htm"name="showframe""></frameset></html>
ModulUser&AdministratorSISDA
38
DAFTAR PUSTAKA
Republik Indonesia. 1974. Undang-Undang No. 11 Tahun 1974 tentang Pengairan. Sekretariat Negara. Jakarta.
Tim Penulis. 2016. Pengembangan GIS Unit Management Information System dan Web. Laporan Utama. PT. Citra Gama Sakti. Yogyakarta.
Tim Penulis. 2016. Modul User dan Administrator SISDA 2016. Modul. PT. Citra Gama Sakti. Yogyakarta.
Top Related