MODUL 5 PENGGUNAAN HTML, CSS DAN PENGENALAN...
12
MODUL 5 PENGGUNAAN HTML, CSS DAN PENGENALAN BAHASA PHP DALAM WEBGIS A. Tujuan 1. Praktikan dapat mengetahui dasar-dasar penggunaan HTML dan CSS dan pemakaian PHP 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 adalah rangkaian kode 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. HTML dapat melakukan: - pengontrolan tampilan dari web page dan contentnya, - 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
Transcript of MODUL 5 PENGGUNAAN HTML, CSS DAN PENGENALAN...
MODUL 5
PENGGUNAAN HTML, CSS DAN PENGENALAN
BAHASA PHP DALAM WEBGIS
A. Tujuan
1. Praktikan dapat mengetahui dasar-dasar penggunaan HTML dan CSS dan pemakaian
PHP 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 adalah rangkaian kode 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. HTML dapat melakukan:
- pengontrolan tampilan dari web page dan contentnya,
- 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 terdapat elemen lain. Elemen
tertinggi disebut Elemen Struktur (mencakup di dalamnya html, head dan body).
a. Elemen Struktur
Elemen struktur adalah elemen yang memiliki banyak elemen yang
ketergantungan di dalamnya. 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 dapat dilihat pada
tabel 2.
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 dengan
tambahan memiliki atribut untuk
mengarahkan alur informasinya dengan
tujuan yang berbeda.
3 <style>…</style> Wadah untuk membuat CSS dalam
dokumen HTML secara embedded.
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 terdiri dari
beberapa elemen bagian, terdapat pada Tabel 3.
TABEL 3. Elemen Body
No Nama Keterangan
1 <a>…<a> a mendefinisikan sebuah anchor, tetapi lebih
tepat jika diartikan sebagai tautan karena
digunakan untuk saling menautkan antara satu
dokumen HTML ke dokumen HTML yang lain
2 <br/> Memberi baris baru/pindah baris
3 <button> Mendefinisikan sebuah tombol diklik
4 <div> Mendefinisikan sebuah section dalam dokumen
5 <form> Mendefinisikan sebuah form HTML untuk input
form
6 <h1, h2, h3, h4, h5
dan h6>
Digunakan untuk menunjukkan awal dari suatu
header/judul dari dokumen HTML tersebut
7 <head> Digunakan untuk memberikan informasi tentang
dokumen tersebut
8 <hr> Membuat garis horizontal
9 <html> Mendefinisikan root dari suatu dokumen HTML
10 <img> Berfungsi untuk menampilkan gambar pada
dokumen HTML
11 <link> Mendefinisikan hubungan antara dokumen dan
sumber eksternalnya
12 <input> Digunakan untuk berbagai macam keperluan
menyangkut hal-hal tentang memasukkan data
13 <ul> Memasukkan data list
14 <li> Isi data daftar yang dibuka oleh elemen ul
15 <table> Membuat tabel
16 <tr> Membuat baris dalam tabel (Elemen harus dibuka
oleh tag tabel terlebih dahulu)
17 <th> Membuat kolom judul dalam tabel (Elemen harus
dibuka oleh elemen tr terlebih dahulu)
18 <td> Membuat kolom dalam tabel (Elemen harus
dibuka oleh elemen tr terlebih dahulu)
19 <style> Membuat CSS dengan metode inline
C. Atribut
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 dapat dilihat pada
Tabel 4.
TABEL 4. Atribut HTML
No Atribut Keterangan
1 class Digunakan untuk mendefinisikan class yang akan dipakai di dalam 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>)
D. Struktur Dasar HTML
Penjelasan:
a. Tag <html> digunakan untuk menyatakan halaman website menggunakan
bahasa HTML.
b. Tag <head> adalah kepala dari halaman website, digunakan untuk menambahkan
banyak informasi seperti meta, CSS, javascript, font dan lain-lain.
c. Tag <title> digunakan untuk menyatakan title website yang disimpan pada tag
<head>.
d. Tag <body> digunakan untuk menampilkan isi dari website, baik itu image, text,
video, music atau sebagainya.
e. 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 programmer, HTML versi berapa yang digunakan dan juga
membantu programmer untuk dapat menggunakan tag-tag HTML dengan benar.
<!DOCTYPE html> digunakan pada HTML5.
2. CSS (Cascading Style Sheet)
CSS merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah
web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa
pemograman. CSS digunakan untuk membuat pemograman web menjadi lebih mudah
karena dapat menyeragamkan format terhadap elemen-elemen yang sama dengan cepat
dalam sebuah situs. Situs-situs 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. Berikut penulisan
kode CSS:
Keterangan:
- body : selector
- {} : deklarasi
- background-color : property
- blue : nilai
Metode pemakaian
1. Inline CSS
CSS ditulis langsung ke dalam tag HTML. Penulisan CSS dengan cara ini tidak
memerlukan selector dalam kode CSS. Penulisan dengan cara ini jika ingin
menformat suatu elemen untuk satu kali saja. Contoh:
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:
3. External CSS
Cara pemakaian external CSS ditulis dengan satu file terpisah 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:
a. Buat satu file dengan teks editor dan beri nama file, misalnya style.css. kemudian
tulis CSS yang akan diimplementasikan. Contoh:
b. Kemudian untuk memanggil file style.css dari semua halaman web, diantara tag
<head> dan </head>, link kan file style.css dengan menuliskan:
3. PHP (Hypertext Preprocessor)
PHP 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 (Content Management System).
a. Variabel
Variabel di dalam PHP harus diawali dengan dollar sign ($). 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 adalah beberapa variabel yang telah didefinisikan secara sistem
oleh PHP dan kita sebaiknya tidak membuat variabel dengan nama yang sama.
Beberapa contoh predefined variables: $GLOBAL, $_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:
Hasil yang didapat:
E. Cara Praktikum
1. Aktifkan XAMPP terlebih dahulu.
2. Kemudian buka folder XAMPP yang disimpan pada Local Disk (C:), pilih htdocs, lalu
buat folder baru prakmodul5_4DigitBpPraktikan.
3. Pada file baru tersebut, buat 2 file html (index.html dan map.html), 2 file php
(connection.php dan getdata.php) dan 1 file CSS (style.css), seperti pada Gambar 1.
Gambar 1. File html, php dan css
4. Buka Text Editor lalu isikan script berikut:
a. Connection.php
b. Getdata.php
c. Index.html
d. Map.html
e. Style.css
5. Kemudian save file-file tersebut.
6. Setelah itu buka index.html menggunakan browser. Tampilannya akan terlihat seperti
Gambar 2.
Gambar 2. Tampilan index.html
F. Instruksi Praktikum
Instruksi praktikum akan dijelaskan pada saat praktikum berlangsung.
