MODUL 4 PENGENALAN BAHASA PEMROGRAMAN UNTUK WEBGIS

A. Tujuan 1. Praktikan dapat mengetahui dasar-dasar bahasa pemrograman dalam WebGIS. 2. Praktikan dapat membuat halaman Web. B. Tools a. XAMPP ( mendukung PHP5 ) b. PostgreSQL c. Browser Chrome atau Mozilla Firefox ( Mendukung HTML5 dan CSS3 ) d. Text Editor ( Notepad++ atau Sublime Text ) C. Teori 1. HTML (Hyper Text Markup Language) HTML (Hyper Text Markup Language) adalah rangkaian kode program yang merupakan representasi visual sebuah halaman web. HTML memuat kumpulan informasi yang disimpan dalam tag-tag tertentu. HTML hingga sekarang tetap digunakan sebagai dasar dari bahasa web seperti PHP, ASP, JSP, dan lainnya. Dengan HTML dapat melakukan : - Pengontrolan tampilan dari web page dan content-nya, - Publikasi dokumen secara online sehingga bisa diakses, - Penambahan objek-objek seperti image, audio, video dan juga java applet dalam dokumen HTML. A. Tag Tag dapat diartikan sebagai tanda untuk mendefinisikan fungsi sebuah teks sebagai kode markup (teks khusus). Tag-tag tersebut yang digunakan untuk melakukan format terhadap informasi. Penulisan tag pada umumnya selalu berpasangan (tag pembuka dan tag penutup yang mana objek yang dikenai perintah tag berada diantaranya) namun ada sebagian kecil juga yang tidak (terkadang nilai yang ada

dimasukkan dengan atribut khusus). Tag yang dimaksud disini adalah dua tanda yang diawali “<” dan diakhiri “>”, dan tanda awal ada yang ditambahkan garis miring “/” untuk menandai tag penutup. B. Elemen Elemen HTML adalah esensi dari dokumen HTML yang memberikan petunjuk bagaimana sebuah situs web ditampilkan dalam browser. Elemen HTML secara umum terdiri dari tag pembuka, isi/konten, dan tag penutup. Ada beberapa elemen yang tidak memiliki konten umum dan tag penutup, elemen ini disebut Void Element. Void Element menampilkan nilai yang dimilikinya melalui atribut khusus. Elemen terdiri dari beberapa tingkatan, di dalamnya memiliki elemen lain, elemen tertinggi disebut Elemen Struktur (mencakup di dalamnya html, head, dan body). a. Elemen Struktur Elemen Struktur adalah elemen yang memliki banyak elemen yang ketergantungan didalamnya. Elemen Struktur yang dimaksud terdapat pada tabel 1. TABEL 1. Elemen Struktur No

Elemen

1

…

2

…

3

…

Keterangan Merupakan induk dari semua elemen dalam dokumen HTML. Semua elemen HTML lain terkandung pada elemen ini. Wadah untuk memproses informasi dan metadata untuk dokumen HTML. Wadah untuk tampilan isi dari dokumen HTML.

1. Elemen Head Elemen ini menjadi tempat untuk informasi paling umum pada suatu dokumen HTML. Elemen yang terkandung di dalamnya adalah : TABEL 2. Elemen Head No

Elemen

1



2

<meta/>

Keterangan Penghubung ke dokumen lain, penggunaan umumnya adalah untuk menyambungkan ke dokumen CSS. Bisa digunakan untuk data tambahan dokumen HTML, seperti pemilik, tanggal publikasi, deskripsi, kata kunci dokumen, dan lain sebagainya. Elemen ini pada dasarnya adalah elemen yang memiliki informasi tersembunyi selayaknya elemen komentar pada dokumen HTML

3

<style>...

4



dengan tambahan memiliki atribut untuk mengarahkan alur informasinya dengan tujuan yang berbeda. Wadah untuk membuat CSS dalam dokumen HTML secara embeded.

Digunakan untuk membuat judul dokumen pada kepala tab browser.

2. Elemen Body Elemen ini berisikan seluruh isi dokumen HTML dan mencakup segala keperluan untuk presentasi data objek dokumen. Elemen Body memiliki beberapa elemen bagian yaitu :  Elemen Blok adalah elemen yang memiliki struktur yang pada dasarnya berbentuk kotak, elemen-elemen bagian ini akan otomatis lebar sesuai lebar induknya (elemen tempat dia bergantung). Elemen yang merupakan bagian dari elemen blok adalah sebagai berikut: Teks dasar

:

..

,

…

, dan lain-lain

Daftar

:

…

,

..

,

..

,

…

,

…

, <menu>…

(

elemen

ini

telah

dihapus

namun

ditambahkan kembali pada HTML5 ) Elemen blok lain :

,

---

…,<script>….

 Elemen Inline adalah elemen yang bisa menyisip diberbagai tempat, namun beberapa diantaranya harus berada di dalam elemen blok. Bagian elemen inline adalah: a. Anchor

: …

b. Frase umum

: …, <em>…,<strong>…

c. Frase computer

: …, …

d. Presentasi

: …,…,…,<small>…

e. Span

: <span>…

f. Lain-lain

:
, …,<del>…,…

 Elemen Gambar dan Objek adalah elemen dengan berisikan gambar dan objek-objek lain. Contohya : …, <map>…,, dan <param />  Form elemen-elemenya adalah diantaranya

…

, …, …, ,

…

, …, dan lain-lain.



Tabel memiliki fomat elemen distandarisasi saat HTML4 namun penggunaannya telah dilakukan semenjak HTML3.2. Elemen bagian ini terdapat di dalamnya penggunakan elemen blok dan elemen inline. Contoh elemen bagian ini adalah: …,…,…,…, dan lain-lain.



Frames, semua elemen berbasis frame masih bisa digunakan pada HTML5 namun telah

menjadi

elemen

obsolete

(jadul)

kecuali

elemen

baru

yaitu

<iframe>… Beberapa elemen dan keterangannya yang terdapat pada elemen Body terdapat pada tabel 3. TABEL 3. Elemen Body

No 2

Nama …

Keterangan a mendefinisikan sebuah anchor, tetapi lebih tepat jika diartikan sebagai tautan dikarenakan tautan ini digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain.

4




Memberi baris baru/pindah baris

5



Mendefinisikan sebuah tombol diklik

6

Mendefinisikan sebuah section dalam dokumen

7

Mendefinisikan sebuah form HTML untuk input form

8

9


Digunakan untuk menunjukkan awal dari suatu

h6>

header/judul dari dokumen HTML tersebut.



Digunakan untuk memberikan informasi tentang dokumen tersebut.

10

---

Membuat garis horizontal

11



Mendefinisikan root dari suatu dokumen HTML

12



Berfungsi

untuk

menampilkan

gambar

pada

dokumen HTML 13



Mendefinisikan hubungan antara dokumen dan

sumber eksternalnya 14



Digunakan

untuk

berbagai

macam

keperluan

menyangkut hal-hal tentang memasukkan data. 15

Memasukkan data list

16


• 
  
  Isi data daftar yang dibuka oleh elemen ul
  
  17
  
  
  
  Membuat tabel
  
  18
  
  
  
  Membuat baris dalam tabel (elemen harus dibuka oleh tag table terlebih dahulu)
  
  19
  
  

  Membuat kolom judul dalam tabel (elemen harus dibuka oleh elemen tr terlebih dahulu) 20

  Membuat kolom dalam tabel (elemen harus dibuka oleh elemen tr terlebih dahulu) 21 <style> Membuat CSS dengan metode inline C. Atribut HTML Atribut HTML merupakan informasi tambahan yang disertakan pada sebuah elemen HTML. Atribut memiliki berbagai macam fungsi yang membantu HTML dalam berbagai macam hal hingga berhubungan dengan PHP, CSS, dan javascript. Atribut umum yang bisa digunakan dalam setiap elemen HTML adalah sebagai berikut: No Atribut 1 class 2 Id 3 style 4 name Keterangan Digunakan untuk mendefinisikan class yang akan dipakai didalam sebuah tag ( umumnya banyak yang menyangkutkan ini dengan class CSS ) Dipakai untuk membuat kode unik yang tertuju pada tag tertentu dalam sebuah halaman. Dipakai untuk membuat CSS dengan metode embedded. Dipakai untuk menamai tag (umumnya banyak yang menggunakan ini di dalam tag yang sebelumnya dibuka terlebih dahulu oleh perintah tag ) D. Struktur Dasar HTML Penjelasan : - Tag digunakan untuk menyatakan halaman website menggunakan bahasa HTML - Tag adalah kepala dari halaman website, digunakan untuk menambahkan banyak informasi seperti meta, css, javasctipt, font dan lain-lain. - Tag <style type="text/css"> #primary_nav_wrap { margin-top:15px } #primary_nav_wrap ul { list-style:none; position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul a { display:block; color:#333; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sansserif } #primary_nav_wrap ul li { position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul li.current-menu-item { background:#ddd } #primary_nav_wrap ul li:hover { background:#f6f6f6 } #primary_nav_wrap ul ul { display:none; position:absolute; top:100%; left:0; background:#fff; padding:0 } #primary_nav_wrap ul ul li { float:none; width:200px } #primary_nav_wrap ul ul a { line-height:120%; padding:10px 15px } #primary_nav_wrap ul ul ul { top:0; left:100% } #primary_nav_wrap ul li:hover > ul { display:block } LGIS Info Windows Detail  home.html <style type="text/css"> #primary_nav_wrap { margin-top:15px } #primary_nav_wrap ul { list-style:none; position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul a { display:block; color:#333; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sansserif } #primary_nav_wrap ul li { position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul li.current-menu-item { background:#ddd } #primary_nav_wrap ul li:hover { background:#f6f6f6 } #primary_nav_wrap ul ul { display:none; position:absolute; top:100%; left:0; background:#fff; padding:0 } #primary_nav_wrap ul ul li { float:none; width:200px } #primary_nav_wrap ul ul a { line-height:120%; padding:10px 15px } #primary_nav_wrap ul ul ul { top:0; left:100% } #primary_nav_wrap ul li:hover > ul { display:block } LGIS Isi!  about.html <style type="text/css"> #primary_nav_wrap { margin-top:15px } #primary_nav_wrap ul { list-style:none; position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul a { display:block; color:#333; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sansserif } #primary_nav_wrap ul li { position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul li.current-menu-item { background:#ddd } #primary_nav_wrap ul li:hover { background:#f6f6f6 } #primary_nav_wrap ul ul { display:none; position:absolute; top:100%; left:0; background:#fff; padding:0 } #primary_nav_wrap ul ul li { float:none; width:200px } #primary_nav_wrap ul ul a { line-height:120%; padding:10px 15px } #primary_nav_wrap ul ul ul { top:0; left:100% } #primary_nav_wrap ul li:hover > ul { display:block } LGIS Isi! 6. Kemudian save ketiga file tersebut. 7. Setelah itu buka index.html dengan menggunakan browser, maka akan tampil seperti gambar di bawah ini. 8. Sql Data Connect Buat file PHP dengan nama sql.php dalam folder yang dibuat tadi, kemudian save as, lalu buat script yang ada dibawah ini : 9. Jika koneksi berhasil maka akan keluar tampilan bahwa “Koneksi Database Sukses” setelah membuat localhost/ss/sql.php pada URL browser. Instruksi Praktikum Lakukan hal yang sama dengan cara praktikum kemudian tukar gambar dengan peta Universitas Andalas. Perhatian ! Kepada para praktikan WAJIB mengerjakan cara praktikum terlebih dahulu sebagai syarat untuk melakukan praktikum modul 4. × Report "MODUL 4 PENGENALAN BAHASA PEMROGRAMAN UNTUK WEBGIS. A. Tujuan 1. Praktikan dapat mengetahui dasar-dasar bahasa pemrograman dalam WebGIS" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close