Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Pengantar WebGIS
1. Pengantar WebGIS
Dany Laksono
February 9, 2020
Mata Pelatihan WebGIS dan Transformasi Sistem Koordinat
SKKNI Teknisi Utama – Analis Sistem Informasi Geografis
2. Pengantar WebGIS
• Bagaimana internet bekerja?
• Bahasa dan Protokol komunikasi inter-net
• Bagaimana halaman web dibuat?
• Praktek: HTML, CSS, JS
18. How 'Internet' Works
Beberapa kesimpulan
• Client adalah perangkat yang melakukan akses terhadap website
(orang/manusia yang mengakses juga dapat disebut client)
• Server adalah perangkat keras maupun lunak komputer yang
berfungsi untuk menyimpan halaman web pada alamat tertentu
• Komunikasi antara klien dan server dilakukan dengan
bahasa dan protokol tertentu
• Komunikasi antara klien dan server membentuk internet
• Selain manusia, hiu juga makan kabel internet
19. Internet Servers:
~High Specifications Computers
• Large Capacity (~3 TB) + Backup drives
• RAM 32 GB (Max 768 GB)
• Windows Server 2008 R2
• Multi-core Xeon Processor
• Intel Xeon E5-2640v3
Spesifikasi Umum Server Data Spasial
22. Bahasa dan Protokol Internet
• Languages
• Transfer medium
• Signs
• Two sets of Brains
• Two sets of Lips
etcetera
How two people talk to each
other:
23. Bahasa dan Protokol Internet
• Languages
• Transfer medium
• Signs
• Two sets of Brains
• Two sets of Lips
etcetera
How computers talk to each
other(?)
39. Komponen Halaman Web
Menerapkan Style pada HTML dengan CSS Selector
Dengan CSS Selector kita
dapat memilih elemen
HTML yang diinginkan,
kemudian menerapkan
aturan CSS tertentu
Contoh:
‘Jadikan semua Heading
1 berwarna biru’
40. Komponen Halaman Web
p {
text-align: center;
color: red;
}
#para1 {
text-align: center;
color: red;
}
.center {
text-align: center;
color: red;
}
Element selector ID selector Class selector
p .center {
text-align: center;
color: red;
}
h1, h2, p {
text-align: center;
color: red;
}
Selective selector Grouping selector
Menerapkan Style pada HTML dengan CSS Selector
42. Komponen Halaman Web
Javascript: Pemrograman web berbasis object
Object Properties Methods
car.name = Fiat
car.model = 500
car.weight = 850kg
car.color = white
car.start()
car.drive()
car.brake()
Javascript Client-side Scripting
43. Komponen Halaman Web
<p class='biru'> Ini tulisan warna biru </p>
.biru {
color:blue
}
HTML
CSS
Ini tulisan warna biru
HTML+CSS = Styling webpage
44. Komponen Halaman Web
Text ini aslinya warna
biru
HTML+CSS+JS = Interactive Styling
<script>
document.getElementById("teks").style.color="red";
</script>
<html>
<body>
<h1 id=“teks” style=“color:blue”> Text ini aslinya warna biru </h1>
…
</body>
</html>
Javascript (isikan pada titik-titik di atas):
HTML dan CSS:
Text ini aslinya warna
biru
46. Komponen Halaman Web
AJAX dan Manipulasi DOM
• DOM (Document Object Model)
adalah susunan hirarkis dari elemen-
elemen HTML pada suatu halaman
Web
• Tiap halaman tersusun dari elemen
HTML yang berbeda, sehingga
memiliki struktur DOM yang berbeda
pula
• Konsep DOM: elemen HTML = objek
47. Komponen Halaman Web
• Selector adalah cara yang digunakan dalam CSS untuk
memilih elemen mana yang akan dirubah stylenya
• Dengan memanfaatkan CSS selector dan Javascript,
dapat dibuat sebuah halaman yg interaktif, responsif
dan dinamis.
• Metode ini disebut dengan Manipulasi DOM
(Document Object Model)
• Contoh manipulasi DOM:
getElementsByTagName("p");
Cek: https://www.w3schools.com/js/js_htmldom_elements.asp
AJAX dan Manipulasi DOM
P.S.: Not this DOM!
See you again
48. Komponen Halaman Web
AJAX dan Manipulasi DOM
P.S.: Not this DOM!
See you again
Contoh
const demoQuery = document.querySelector('#demo-query’);
const demoQueryAll = document.querySelectorAll('.demo-query-all');
Tabel Selector DOM
49. Komponen Halaman Web
Manipulasi DOM dapat dilakukan dengan data
yang akan terupdate secara dinamis (mis. dari
basisdata)
AJAX (Asynchronous Javascript and XML)
adalah metode yang dipakai untuk
mengupdate DOM tanpa merubah seluruh
halaman web
AJAX dan Manipulasi DOM
Not This AJAXCek:
https://www.w3schools.com/xml/ajax_intro.asp
https://gabrieltanner.org/blog/javascript-dom-introduction
50. Komponen Halaman Web
AJAX dan Manipulasi DOM
Contoh AJAX: Google Search
Autocorrect
Only this part is updating
51. Komponen Halaman Web
AJAX dan Manipulasi DOM
Latihan DOM
Ketikkan script di samping menggunakan
text editor
Simpan sebagai HTML
Jalankan dengan browser
Jawablah:
• Elemen DOM apa yang diupdate oleh
JS?
• Perintah apa yang digunakan untuk
memanggil elemen tsb?
• Seandainya yang akan diupdate adalah
semua heading 1, bagaimana script
yang digunakan?
