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. 4. Buka Text Editor lalu isikan script berikut: a. Connection.php Gambar 1. File html, php dan css
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.