MODUL 4 PENGENALAN BAHASA PEMROGRAMAN UNTUK WEBGIS. A. Tujuan 1. Praktikan dapat mengetahui dasar-dasar bahasa pemrograman dalam WebGIS.

(1)

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

(2)

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 Keterangan

1 <html>…</html> Merupakan induk dari semua elemen dalam dokumen HTML. Semua elemen HTML lain terkandung pada elemen ini.

2 <head>…</head> Wadah untuk memproses informasi dan metadata untuk dokumen HTML.

3 <body>…</body> 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 Keterangan

1 <link/> Penghubung ke dokumen lain, penggunaan umumnya adalah untuk menyambungkan ke dokumen CSS.

2 <meta/> 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)

dengan tambahan memiliki atribut untuk mengarahkan alur informasinya dengan tujuan yang berbeda.

3 <style>...</style> Wadah untuk membuat CSS dalam dokumen HTML secara embeded.

4 <title>…</title> 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 : <p>..</p>, <h1>…</h1>, dan lain-lain

Daftar : <dl>…</dl>,<ol>..</ol>,<dd>..</dd>,<dt>…</dt>,<ul>…</ul>, <menu>…</menu> ( elemen ini telah dihapus namun ditambahkan kembali pada HTML5 )

Elemen blok lain : <div>…</div>,<hr>…</hr>,<script>…</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 : <a>…</a>

b. Frase umum : <abbr>…</abbr>, <em>…</em>,<strong>…</strong> c. Frase computer : <var>…</var>, <code>…</code>

d. Presentasi : <b>…</b>,<i>…</i>,<u>…</u>,<small>…</small> e. Span : <span>…</span>

f. Lain-lain : <br/>, <data>…</data>,<del>…</del>,<ins>…</ins>

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

 Form elemen-elemenya adalah diantaranya <form>…</form>, <button>…</button>, <textarea>…</textarea>, <input />, <fieldset>…</fieldset>, <option>…</option>, dan lain-lain.

(4)

 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: <table>…</table>,<th>…</th>,<tr>…</tr>,<td>…</td>, dan lain-lain.

 Frames, semua elemen berbasis frame masih bisa digunakan pada HTML5 namun telah menjadi elemen obsolete (jadul) kecuali elemen baru yaitu <iframe>…</iframe>

Beberapa elemen dan keterangannya yang terdapat pada elemen Body terdapat pada tabel 3.

TABEL 3. Elemen Body

No Nama Keterangan

2 <a>…</a> 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 <br/> Memberi baris baru/pindah baris

5 <button> Mendefinisikan sebuah tombol diklik

6 <div> Mendefinisikan sebuah section dalam dokumen 7 <form> Mendefinisikan sebuah form HTML untuk input

form

8 <h1, h2, h3, h4, h5, dan h6>

Digunakan untuk menunjukkan awal dari suatu

header/judul dari dokumen HTML tersebut.

9 <head> Digunakan untuk memberikan informasi tentang dokumen tersebut.

10 <hr> Membuat garis horizontal

11 <html> Mendefinisikan root dari suatu dokumen HTML 12 <img> Berfungsi untuk menampilkan gambar pada

dokumen HTML

(5)

sumber eksternalnya

14 <input> Digunakan untuk berbagai macam keperluan menyangkut hal-hal tentang memasukkan data.

15 <ul> Memasukkan data list

16 <li> Isi data daftar yang dibuka oleh elemen ul

17 <table> Membuat tabel

18 <tr> Membuat baris dalam tabel (elemen harus dibuka oleh tag table terlebih dahulu)

19 <th> Membuat kolom judul dalam tabel (elemen harus dibuka oleh elemen tr terlebih dahulu)

20 <td> 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 Keterangan

1 class Digunakan untuk mendefinisikan class yang akan

dipakai didalam sebuah tag ( umumnya banyak yang menyangkutkan ini dengan class CSS )

2 Id Dipakai untuk membuat kode unik yang tertuju pada

tag tertentu dalam sebuah halaman.

3 style Dipakai untuk membuat CSS dengan metode

embedded.

4 name Dipakai untuk menamai tag (umumnya banyak yang

menggunakan ini di dalam tag yang sebelumnya dibuka terlebih dahulu oleh perintah tag <form>)

(6)

D. Struktur Dasar HTML <!DOCTYPE html> <html> <head> <title></title> </head> <body>  </body> <footer> </footer> </html> Penjelasan :

- Tag <html> digunakan untuk menyatakan halaman website menggunakan bahasa HTML

- Tag <head> adalah kepala dari halaman website, digunakan untuk menambahkan banyak informasi seperti meta, css, javasctipt, font dan lain-lain.

- Tag <title> digunakan untuk menyatakan title website yang disimpan pada tag

<head>

- Tag <body> digunakan untuk menampilkan isi dari website, baik itu image, text,

video, musik, atau lain sebagainya.

Tentang DOCTYPE

DOCTYPE adalah suatu deklarasi yang digunakan untuk mengidentifikasi jenis dokumen HTML yang digunakan sehingga browser dapat menentukan bagaimana memperlakukan kode tersebut. DOCTYPE sendiri berguna untuk memberitahu

programer, HTML versi berapa yang digunakan dan juga membantu programer

untuk dapat menggunakan tag-tag HTML dengan benar. <!DOCTYPE html> digunakan pada HTML5.

D. CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam, CSS bukan merupakan bahasa pemrograman, CSS digunakan untuk membuat pemrograman web

(7)

menjadi lebih mudah karena dapat menyeragamkan format terhadap elemen-elemen yang sama dengan cepat dalam sebuah situs. Situs-situs yang berbasis HTML menggunakan CSS untuk meningkatkan keluesan tampilan. CSS disimpan dalam file terpisah yang ekstensinya .css, dan setiap perubahan yang dilakukan pada file akan mempengaruhi seluruh dokumen HTML atau XHTML yang terkait padanya. Dengan menggunakan CSS dapat mengurangi waktu untuk melakukan perubahan terhadap situs dengan jumlah halaman yang banyak.

CSS dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer,

images, dan style lainnya untuk dapat digunakan dalam file secara bersama-sama. CSS dapat mengendalikan ukuran gambar, warna pada background text, warna table, ukuran

border, warna border, warna hyperlink, warna mouse over, spasi antar paragraph, spasi antar teks, margin ( top, bottom, left,right), dan parameter lainnya.

Struktur CSS terdiri dari selector, deklarasi, property dan nilai. Penulisan kode css: Body {background-color:white;} Keterangan : - Body : Selektor - {} : deklarasi - Background-color : properti - White : nilai Metode Pemakaian 1. Inline CSS

CSS ditulis langsung ke dalam tag HTML, penulisan css dengan cara ini tidak memerlukan penulisan selector dalam kode css. Penulisan dengan cara ini jika ingin memformat suatu elemen untuk satu kali saja. Contoh :

<h2 style="color: blue;"> H1 dengan CSS

</h2>

2. Embedded CSS

Pemakaian embedded CSS dengan cara menempelkan kode CSS diantara tag <head> dan </head> yang diawali dengan tag <style> dan diakhiri dengan </style>. Contoh:

(8)

3. External CSS

Cara pemakaian external CSS ditulis dalam satu file terpisal yang disimpan dengan akhiran “.css” atau ekstensi “.css”. untuk menggunakannya perlu dilakukan pemanggilan ke dalam halaman web yang dibuat. Langkah-langkah untuk mengimplementasikan CSS adalah sebagai berikut:

1. Buat satu file dengan notepad/teks editor lain dan beri nama, misalnya style.css, kemudian tulis css yang akan diimplementasikan. Contoh :

p {font-family: arial; font-size: small;} h1 {color: red; }

2. Kemudian untuk memanggil file style.css dari semua halaman web, diantara tag

<head> dan </head> link kan file style.css dengan menuliskan:

E. PHP

PHP (Hypertext Preprocessor) adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.

a. Variabel

Variabel di dalam PHP harus diawali dengan dollar sign atau tanda dollar ($). Setelah tanda $, sebuah variabel PHP harus diikuti dengan karakter pertama berupa huruf atau underscore (_), kemudian untuk karakter kedua dan seterusnya bisa menggunakan huruf, angka atau underscore (_). Dengan aturan tersebut, variabel di dalam PHP tidak bisa diawali dengan angka.

Minimal panjang variabel adalah 1 karakter setelah tanda $. Variabel dalam PHP bersifat case sensitive dan tidak bertipe.

- Variabel Sistem PHP (Predefined Variables)

Predefined Variables atau terjemahan bebasnya Variabel Sistem PHP, adalah beberapa variabel yang telah didefenisikan secara sistem oleh PHP, dan kita sebaiknya tidak membuat variabel dengan nama yang sama.

(9)

$GLOBALS,$_SERVER,$_GET,$_POST,$_FILES,$_COOKIE,$_SESSION,$_ REQUEST,$_ENV,$php_errormsg,$HTTP_RAW_POST_DAT,$http_response_ header, $argc, $argv, $this.

- Cara Menampilkan Nilai Variabel

Untuk menampilkan nilai atau isi dari variabel, kita tinggal menampilkannya dengan perintah echo atau print, seperti berikut ini:

<?php

$a='Saya Sedang belajar PHP';

$b=5;

print $a;

echo $b;

?>

Hasil yang didapat adalah: Saya Sedang belajar PHP5 F. JAVASCRIPT

Javascript adalah kode-kode program yang digunakan untuk membuat halaman web

terlihat lebih dinamis. Javascript digunakan untuk menambahkan beberapa fitur yang dapat membuat tambilan lebih menarik serta dapat membatasi aksi dari pengguna, javascript juga membuat navigasi menu yang lebih canggih serta efek grafis sederhana dapat dilakukan. 1. Variabel

Variabel dalam javascript adalah penampung sebuah nilai, tipe dari variabel ada angka (Number), String, Boolean atau yang lainnya.

Aturan penamaan variabel javascript:

- Karakter pertama harus diawali dengan huruf, underscore (_) atau tanda dollar ($) - Karakter kedua dan seterusnya ditambahkan dengan huruf, angka, underscore (_)

atau tanda dollar ($).

Cara membuat variabel Javascript :

2. Membuat variabel dalam javascript ada dua, yakni dengan menggunakan keyword var, dan tanpa var.

a. Penulisan dengan menggunakan keyword var, contohnya adalah sebagai berikut:

(10)

var a;

var b, c, d; var g=12;

var h="Praktikum Modul 4"; </script>

b. Penulisa tanpa menggunakan keyword var, contohnya adalah sebagai berikut:

Penggunaan penambahan elemen HTML dapat juga dilakukan dengan Javascript dan merupakan bagian dari DOM (Document Object Model). Contoh:

var cth= document.createElement("td");

3. Array

Array adalah tipe data untuk menyimpan nilai dalam satu nama, dibedakan melalui nilai

index-nya. Array diperlakukan sebagai objek dalam javascript. Membuat objek Array :

- Gunakan keyword new Array()

var objArr = new Array();

- Gunakan keyword new Array(jumlahindex)

var objArr = new Array(3);

- Gunakan keyword new Array(item,item2,…)

var objArr = new Array("satu", "dua", 100);

cara akses objek dengan menggunakan notasi nama objek diikuti posisi index-nya yang dibatasi kurung siku, seperti :

(11)

G. SQL (Structured Query Language)

SQL adalah sekumpulan perintah khusus yang digunakan untuk mengakses data dalam database relasional. SQL merupakan sebuah bahasa komputer yang mengikuti standar ANSI (American Nasional Standard Institute) yang digunakan dalam manajemen

database relasional.

SQL yang gunakan untuk saat ini lebih bertujuan untuk melanjutkan menampilkan

database dari PostgreSQL ke PHP dimulai dengan koneksinya. Untuk koneksi ke PHP.

1. Query Umum

Perintah umum yang biasa digunakan hampir sama dengan perintah pada umumnya. SELECT*FROM namatabel;

INSERT into namatabel (namakolom1, namakolom2, …) VALUES (‘Isi Kolom1',’Isi Kolom2’, 'Isi Kolom3', …);

UPDATE namatabel set namakolom0 ='nilaiUbah' WHERE namakolom1 = 'nilaiAcuan';

DELETE FROM namatabel WHERE namakolom = 'dataNilai'; H. Koneksi dan lain-lain

Koneksi PostgreSQL dengan PHP. Langkah-langkahnya:

1. Cari php.ini pada folder penyimpanan PHP di dalam MS4W atau XAMPP, cari “; extension=php_pdo_pgsql.dll” lalu hilangkan tanda semicolon “;” .

2. Buatlah sebuah file PHP.

3. Buatlah koneksinya. Penggunaan koneksi ke PostgreSQL adalah dengan menggunakan fungsi pg_connect() dan ditutup dengan pg_close(). Untuk pengecekan koneksi bisa digunakan fungsi pg_result_error(). Contoh koneksi:

pg_connect(“host=localhost port=5555 dbname=postgis_2016 user=postgres password=pass”);

(12)

Cara Praktikum

1. Aktifkan XAMPP terlebih dahulu.

2. Kemudian buka folder XAMPP yang disimpan pada Local Disk (C:), pilih htdocs, dan kemudian buat folder baru html misalnya labgis.

3. Pastikan praktikan telah menginstall Sublime atau text editor lainnya.

4. Buat file html baru dengan cara menyimpannya pada folder yang telah dibuat tadi. Pada praktikum kali ini buat 3 file html seperti index.html, home.html, dan about.html seperti pada gambar dibawah ini.

5. Buka file html tersebut pada Sublime, kemudian pada setiap file isikan script seperti berikut :  index.html <!DOCTYPE html> <html> <head> <title> LGIS </title> <style type="text/css"> #primary_nav_wrap { margin-top:15px }

(13)

#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,sans-serif } #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% }

(14)

#primary_nav_wrap ul li:hover > ul { display:block } </style> </head> <body> <div> <h3>LGIS</h3> <div style="width:100%;float:left;"> <nav id="primary_nav_wrap"> <ul> <li><a href="home.html">Home</a></li> <li class="current-menu-item"><a href="index.html">Maps</a></li>

<li><a href="about.html">About</a> </li> </ul>

</nav> </div>

</div> </div>

<div style="width:100%; float:left; border-style: ridge; min-height:420px;"> Info Windows Detail

</div> </div> </body> </html>  home.html <!DOCTYPE html> <html> <head> <title> LGIS </title> <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,sans-serif } #primary_nav_wrap ul li { position:relative; float:left;

(15)

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 } </style> </head> <body> <div> <h3>LGIS</h3> <div style="width:100%;float:left;"> <nav id="primary_nav_wrap"> <ul> <li class="current-menu-item"><a href="home.html">Home</a></li> <li><a href="index.html">Maps</a></li> <li><a href="about.html">About</a> </li> </ul>

</nav> </div>

<div style="width:100%; border-style: groove; float:left;"> Isi!

</div> </div> </body> </html>

(16)

 about.html <!DOCTYPE html> <html> <head> <title> LGIS </title> <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,sans-serif } #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 }

(17)

#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 } </style> </head> <body> <div> <h3>LGIS</h3> <div style="width:100%;float:left;"> <nav id="primary_nav_wrap"> <ul> <li><a href="home.html">Home</a></li> <li><a href="index.html">Maps</a></li>

<li class="current-menu-item"><a href="about.html">About</a> </li>

</ul> </nav> </div>

<div style="width:100%; border-style: groove; float:left;"> Isi!

</div> </div> </body> </html>

6. Kemudian save ketiga file tersebut.

7. Setelah itu buka index.html dengan menggunakan browser, maka akan tampil seperti gambar di bawah ini.

(18)

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 :

<?php

$dbconn = pg_connect("host=localhost port=5555

dbname=postgis_2016 user=postgres password=02021994");

//connect to a database named "mary" on the host "sheep" with a username and password

if ($dbconn) // Jika Ada Koneksi {

echo "Koneksi Database Sukses"; }

else {

echo "Koneksi Database Gagal".pg_error(); }

?>

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.