Pelatihan Sertifikasi SKKNI Teknisi Utama - Analis Sistem Informasi Geografis (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

5. UGM.AC.ID
Bagaimana
Internet Bekerja?

15. How 'Internet' Works
Client
Server

16. How 'Internet' Works
Submarine Cable Map (2018)

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

20. One of Google's Server room

21. UGM.AC.ID
Bahasa dan
Protokol Internet

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(?)

24. Client
Server
Language= HTML
Language Grammar= HTTP, FTP, etc
House Address= IP
Analogies
House door= Ports
Lips = Browser
Security = Firewall

25. Internet (Application Layer) Protocols
• HTTP – Hypertext Transfer Protocol  Webpages
• FTP - File Transfer Protocol  Files
• SMTP - Simple Mail Transfer Protocols  Emails
• SSH - Secure Shells  Credentials
• Etc
Note: These are merely for text/images/file transfer.
How about Spatial Data?
HTTP 80
HTTPS 443
FTP 20/21
SMTP 25

26. Membaca URL: Alamat Website
Protokol
Subdomain
Domain
(TLD )
Top Level Domain
Path

27. Membaca URL: Domain Name System

28. Membaca URL: Domain Name System
74.125.130.100
=
IP Address
DNS

29. Membaca URL: Domain Name System
Alur permintaan halaman web pada protokol HTTP
http://blog.catchpoint.com

30. UGM.AC.ID
Bagaimana
Halaman Web
Disusun?

31. Komponen Halaman Web

32. Komponen Halaman Web
https://www.azurebarry.com

33. Komponen Halaman Web
<div id=“kucing>
HTML is the Object

34. Komponen Halaman Web
<style>
#kucing {
warnaBulu: hitam;
panjangEkor: 4cm}
</style>CSS define its Properties

35. Komponen Halaman Web
Kucing.bobo(“no”);
(membangunkan kucing yg bobo)
Kucing.tambahEkor(“200cm”);
(panjang ekor kucing ditambah 2
meter)
JS define its Action or Method

37. Anatomi Elemen HTML

38. Anatomi Elemen HTML
https://www.madebymike.com.au/demos/html5-periodic-table/

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

41. Komponen Halaman Web
Javascript Client-side Scripting

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

45. UGM.AC.ID
Document Object
Model (DOM)

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?

52. TERIMA KASIH