Buku Pemrograman Web FQ

1
OCEHAN PROGRAMMER
WEB PEMULA
Fiqy Ainuzzaqy
2
3
Ocehan Programmer Web

Pemula
Penulis : Fiqy Ainuzzaqy
Copyright 2016
Diterbitkan Oleh:
Jl. Hikmat 50A, BetroSedati,
Sidoarjo
Telp/fax: 031 8672552
E-mail:
rm.rabbitmedia@gmail.com
Diterbitkan pertama kali oleh Rabbit Media,

Cetakan Pertama, MM 2016
Ukuran buku: 15.5 cm x 23 cm, 100 hal
Layout & Desain Cover: Fq
Semua source code dalam buku ini beserta

software dan tools pendukung pembuatan
website dikemas dalam DVD yang ada di sampul
belakang buku
4
ISBN: 123-456-789-1011-12-0
Hak Cipta dilindungi undang-undang. Dilarang memperbanyak atau
memindahkan sebagian atau seluruh isi buku kedalam bentuk
apapun, secara elektronis maupun mekanis, termasuk fotokopi,
merekam, atau dengan teknik perekaman lainnya, tanpa izin dari
Penerbit. Undang-Undang Nomor 19 Tahun 2000 tentang Hak Cipta,
Bab XII Ketentuan Pidana, Pasal 72, Ayat (1), (2), dan (6)
KATA PENGANTAR
Dengan menyebut nama Allah SWT yang Maha

Pengasih lagi Maha Panyayang, karena atas rahmat,
hidayah, dan inayah-Nya, penulis mampu
menyelesaikan buku Ocehan Programmer Web
Pemula.
Adapun buku ini telah penulis usahakan
semaksimal mungkin dan tentunya dengan bantuan
berbagai pihak, sehingga dapat memperlancar
pembuatan buku ini. Untuk itu penulis tidak lupa
menyampaikan banyak terimakasih kepada semua
pihak yang telah berperan aktif dalam pembuatan
buku ini.
Akhirnya penulis mengharapkan semoga dari
buku Ocehan Programmer Web Pemula ini dapat
diambil hikmah dan manfaatnya sehingga dapat
memberikan inpirasi terhadap pembaca.
Surabaya, DD MM 2016
1
Penulis
DAFTAR ISI
KATA PENGANTAR..........................................................i
DAFTAR ISI...................................................................ii
1st Ocehan....................................................................1
1.1 Pengenalan Umum HTML.........................................
1.2 Kelebihan dan Kekurangan HTML5...........................
1.3 Template Dasar HTML5............................................
2nd
Ocehan...................................................................5
2.1 Software Desain Web...............................................
2.2 Tag...........................................................................
2.2.1 Tag Text Format......................................8
2.2.2 Tag Lists................................................11
2.2.3 Tag Table...............................................12
2.2.4 Tag Penyisipan......................................13
2.2.5 Tag Form...............................................14
2.2.6 Tag a.....................................................15
2.3 Meta Tag................................................................
2.3.1 Meta Tag Title........................................16
2.3.2 Meta Tag Descriptsi...............................16
2.3.3 Meta Tag Keywords................................16
2.3.4 Meta Tag Verifikasi................................17
3rd Ocehan.................................................................19
3.1 Penjelasan Umum Tentang CSS..............................
2
3.2 Cara Penulisan CSS................................................
3.2.1 Inline Style Sheets.................................21
3.2.2 Embedded/Internal Style Sheets...........22
3.2.3 External Style Sheets............................22
3.3 Jenis-Jenis Selector Dasar CSS...............................
3.3.1 Universal Selector.................................25
3.3.2 Element/Tag Selector............................25
3.3.3 Class Selector........................................25
3.3.4 ID Selector............................................26
3.3.5 Attribute Selector..................................26
3.4 Macam Macam Code CSS....................................
3.4.1 CSS Fonts..............................................27
3.4.2 CSS Units & Colors................................27
3.4.3 CSS Layout............................................27
3.4.4 CSS Text................................................27
3.4.5 CSS Background....................................28
3.4.6 CSS Lists...............................................28
th
4 Ocehan.................................................................29
4.1 Download Contoh Website Yang Mengandung CSS
30
4.2 Pembahasan Tentang Tips dan Penerapan CSS......
4.2.1 Cursor Property.....................................30
4.2.2 Link hover animasi GIF..........................31
4.2.3 Button Image........................................32
4.2.4 Button dan Anchor................................34
4.2.5 Pop Up Gambar.....................................35
4.2.6 Sudut Melipat........................................36
3
4.2.7 Tool Tips................................................36
4.2.8 Z-Index..................................................37
4.2.9 Tabs.......................................................37
4.2.10 Table dan Form......................................38
th
5 Ocehan.................................................................39
5.1 Pengertian dan Fungsi JavaScript...........................
5.2 Sejarah Singkat Penamaan JavaScript....................
5.3 Cara Penulisan JavaScript......................................
5.3.1 Inline JavaScript....................................42
5.3.2 Internal JavaScript.................................43
5.3.3 External JavaScript................................43
5.3.4 Menggunakan URL................................44
5.4 Kegunaan Script yang Ada di JavaScript................
5.4.1 Tipe Data : string...................................46
5.4.2 Tipe Data : number...............................47
5.4.3 Tipe Data : boolean...............................47
5.4.4 Tipe Data : null......................................47
5.4.5 Tipe Data : undefined............................47
5.4.6 Operator................................................47
5.4.7 Function................................................50
5.4.8 Click Events: onclick..............................50
5.4.9 Mouse Events: onclick...........................51
5.4.10 Input Keyboard Events..........................52
th
6 Ocehan.................................................................53
6.1 Pengertian jQuery..................................................
6.2 Penggunaan jQuery...............................................
th
7 Ocehan.................................................................60
4
7.1 Pengertian PHP......................................................
7.2 Kegunaan Dari PHP................................................
7.2.1 Database...............................................62
7.2.2 Application............................................62
th
8 Ocehan.................................................................68
8.1 Pengertian Database.............................................
8.2 Bagian-Bagian Dari Database................................
8.2.1 Characters.............................................71
8.2.2 Field......................................................71
8.2.3 Record...................................................72
8.2.4 Table / File.............................................72
8.3 Tahapan perancangan basis data..........................
8.4 Tujuan Pembuatan Database.................................
8.5 Cara Penggunaan Database di Website.................
9th Ocehan.................................................................77
9.1 Pengertian AJaX.....................................................
9.2 Penggunaan AJaX...................................................
10th Ocehan...............................................................82
10.1 Pengenalan Web Responsive............................
10.2 Bootstrap Untuk Membuat Responsive Web.....
DAFTAR PUSTAKA.......................................................89
TENTANG PENULIS.....................................................91
5
1st Ocehan
Pengenalan Awal Tentang
Web dan HTML
Mengenai apa itu HTML dan apa saja yang dibutuhkan
ketika akan membuat sebuah website
1.1 Pengenalan Umum HTML

Sebelum membuat sebuah website, kita wajib
mempunyai sebuah domain dan hosting. Jika
dianalogikan hosting adalah sebuah tanah yang siap
memuat isi bangunan, dan isi website yang kita desain
itu sebagai bangunan tersebut, nah semakin bagus
bangunan itu maka akan semakin rumit struktur
bangunannya. Sedangkan domain dapat dianalogikan
sebagai alamat dari rumah tersebut.
Bermula dari apa sih HTML itu? HTML (Hypertext
Markup Language) adalah bahasa yang digunakan untuk
menulis halaman web. HTML merupakan pengembangan
dari standar pemformatan dokumen teks yaitu SGML
(Standard Generalized Markup Language). HTML
sebenarnya adalah dokumen ASCII atau teks biasa, yang
dirancang untuk tidak tergantung pada suatu sistem
operasi tertentu. Jadi intinya HTML adalah source code
atau script yang diketik untuk membangun sebuah
website, baik itu membuat tampilan website beruba
gambar ataupun tulisan. Saat ini HTML yang biasa
1
digunakan adalah HTML versi 5 dengan berbagai
perbaikan dan penambahan fitur dari HTML versi
sebelumnya. Nah pasti akan timbul pertanyaan mengapa
sih dibuat HMTL 5 ? Dibuat HTML5 karena di HTML versi
terbaru ini terdapat fitur-fitur baru pada HTML, CSS, DOM
(Document Object Model) dan JavaScript, mengurangi
kebutuhan untuk plugin eksternal (seperti Flash),
penanganan kesalahan yang lebih baik, lebih banyak
markup untuk menggantikan scripting, HTML5
merupakan perangkat mandiri. Nah selain itu juga pasti
ada yang tanya tentang apa sih perbedaan HTML5
dengan versi sebelumnya? Di dalam HTML5 terdapat fitur
baru seperti unsur kanvas untuk menggambar, video dan
elemen audio untuk media pemutaran, dukungan yang
lebih baik untuk penyimpanan secara offline, elemen
konten yang lebih spesifik, seperti artikel, footer,
header, navigation, section, bentuk kontrol form seperti
kalender, tanggal, waktu, e-mail, URL, search.
1.2Kelebihan dan Kekurangan HTML5
Sekarang mari kita bahas kelebihan dan
kekurangan HTML5. Kelebihan HTML5 adalah sebagai
berikut :
Dapat ditulis dalam sintaks HTML (dengan tipe

media text/HTML) dan XML.
Integrasi yang lebih baik dengan aplikasi situs dan
pemrosesannya.
Integrasi (inline) dengan doctype yang lebih
sederhana.
Cleaner code, karena sebagian besar kode telah
termasuk dalam sintaks HTML5 dengan kata lain
penulisan kode menjadi lebih efisien.
Improve semantics, dengan berbagai elemen kode
di dalam HTML5 yang telah distandarisasi maka
nilai semantic dari sebuah web dapat lebih
ditingkatkan.
Konten yang ada di situs lebih mudah terindeks
oleh search engine.
2
HTML5 mempunyai API (Application Programming
Interface) yang terintegrasi terhadap geolocation.
Offline application cache, user dapat terus
melakukan interaksi dengan aplikasi meskipun
mereka terputus dari jaringan internet.
Smarter forms, terdapat semacam regex (regular
expression) yang membuat form mampu
mengenali secara lebih baik tentang input,
validasi.
HTML5 membuat sebuah mekanisme yang lebih
mudah dalam pembuatan front end, aplikasi chat,
tools drag and drop, video player.
HTML5 menyimpan di client menggunakan
localStorage - simpan data tanpa batas waktu
sessionStorage simpan data dalam 1 sesi,
berbeda dengan HTML versi-versi sebelumnya
yang menyimpan data di client menggunakan
cookies (terbatas datanya).
3
Sedangkan kekurangan HTML5 adalah sebagai berikut :
Karena tergolong baru, sangat memungkinkan

browser yang ada sekarang sebagian belum
mendukung elemen HTML5, sehingga tidak
compatible pada layout web yang dibuat.
HTML5 ini masih dalam perkembangan jadi
beberapa elemen yang ada bisa saja berubah.
Fitur keamanan yang ditawarkan HTML5 juga
masih terbatas.
Menggunakan http://www.html5test.com, berikut
hasil skor testing browser yang penulis gunakan:
(max. 555 poin)
Mozilla Firefox = 449
Opera = 514
MS Internet Explorer = 343
Google Chrome = 511
1.3Template Dasar HTML5

Nah dari penjelasan sebelumnya kita sudah
mengetahui tentang HTML sekaligus tentang HTML versi
terbaru untuk saat ini, HMTL 5. Yang perlu kita ketahui
selanjutnya adalah template dasar HTML. Berikut adalah
template dasar dari HTML5.
<!doctype html>
<html>
<head>
<title>Judul Website</title>
</head>
<body>
</body>
</html>
Demikian penjelasan tentang HTML secara umum,

di ocehan selanjutnya akan dibahas mengenai HTML
secara khusus dan lebih detail.
4
5
2nd Ocehan
Penjelasan KhususTentang
HTML
Mengenai contoh-contoh penggunaan elemen/tag dalam
HTML dan penjelasan detail lainnya
2.1Software Desain Web

1.4 Software yang diperlukan untuk membuat
web yang paling umum adalah dreamweaver.
Dreamweaver adalah salah satu software paling eksis
untuk membuat web karena kemudahan yang
ditawarkannya, software keluaran adobe ini kita sangat
dibantu dalam menulis script pemrograman web baik itu
script HTML atapun script PHP dan script lainnya yang
berhubungan dengan web. Disoftware ini pengguna
dipermudah dengan munculnya sugesti perintah ketika
pengguna mengetik kata pertama, contohnya kita ingin
membuat link maka kita hanya perlu mengetik huruf h
maka akan muncul sugesti href, fungsi untuk membuat
link.
1.5
5
6
1.6
1.7
1.8 Selain itu disoftware ini juga terdapat live preview
dari web yang nantinya akan tampil dari source code
yang diketik, dimana source code berada disisi kiri layar
dan live preview berada disisi kanan layar. Contoh seperti
gambar dibawah ini:
1.9
1.10 Namun, penulis lebih merekomendasikan
software IDE PhpStorm dari JetBrains. Nah pasti akan
timbul pertanyaan kok bisa sih lebih menyarankan
PhpStorm daripada Dreamweaver notabenanya adobe itu
jauh lebih familiar dari pada JetBrains? Dari namanya aja
udah lebih keren PhpStorm daripada Dreamweaver, dan
PhpStorm memang terlahir untuk developer PHP. Tapi, ya
masih ada tapi, software ini berbayar meski demikian
khusus untuk pelajar bisa mendapatkan license selama 1
tahun penuh dengan membuat akun jetbrains
menggunakan email institusi, contohnya
6
7
fiqyainuzzaqy@mhs.unesa.ac.id. Berikut adalah kelebihan

dan kekurangan dari PhpStorm.
Kelebihan
Autosuggest/intelsense yang super
responsive, tidak hanya untuk PHP, HTML, dan
CSS tapi untuk jQuery juga. Suggest class
yang ada di jQuery atau bootstrap juga pop-
up tinggal tekan tombol ctrl+space dan pilih
sesuai yang diinginkan lalu enter. Bahkan
anda tidak perlu membuat tag penutup
seperti </html> secara manual.
Bisa ganti warna editornya karena disediakan
beberapa themes, tinggal download dan
apply.
Ada penanda untuk tag penutup atau
pasangannya.
Ada tree view, untuk akses folder lebih cepat.
Ada akses langsung ke GIT, bagi anda yang
sudah mengenal GIT, ini adalah keuntungan
besar karena anda tidak perlu akses GIT
dengan command prompt atau terminal, jadi
bisa langsung melalui PhpStorm.
Kekurangan
Tidak ada live preview seperti Dreamweaver.
Termasuk software berbayar.
2.2Tag
<html>, <head>, dan <body> dinamakan
elemen/tag. Didalam tag ini bisa diletakkan
berbagai page attribute, misalnya:
<body bgcolor=#000000
background=images/pcb.gif text=#ffffff
link=#ff0000 vlink=ffff00 alink=0000ff>.
7
8
Bgcolor, background, text, link, vlink, alink dan

sebagainya itulah yang dinamakan attribute sedangkan
semua yang dituliskan setelah attribute dan symbol sama
dengan yang diberi tanda kutip dinamakan value.
Berikut adalah contoh penggunaan tag dalam HTML.
2.2.1 Tag Text Format
NB: tag <tt> atau teletype berfungsi untuk mengubah

bentuk teks menjadi seperti teks yang dikirimkan melalui
telegraf yang biasa disebut sebagai telegram.
8
9
NB: tag <abbr> dan <acronym> berfungsi untuk

mendefinisikan teks yang disingkat maupun akronim dengan
menampilkan sebuah tooltip yang didalamnya berisi definisi
atau kepanjangan dari singkatan maupun akronim tersebut.
Ketika kursor diarahkan pada teks tersebut maka tooltip
akan muncul seperti yang ditunjukkan pada gambar diatas
(S.Kom -> Sarjana Komputer).
9
10
Untuk menampilkan teks dengan simbol-simbol khusus

diperlukan perintah tertentu, diantaranya sebagai berikut:
© untuk menampilkan simbol copyright
® untuk menampilkan simbol register
° untuk menampilkan simbol degree
¥ untuk menampilkan simbol yen
€ untuk menampilkan simbol euro
£untuk menampilkan simbol poundsterling
10
11
2.2.2 Tag Lists
11
12
2.2.3 Tag Table
2.2.4 Tag Penyisipan

12
13
Tag penyisipan merupakan tag yang berfungsi

untuk menyisipkan file baik berupa gambar, audio,
maupun video. Berikut adalah hierarki penulisannya
dalam HTML.
<img src="unesa-3.jpg" width="45%">
<br><audio src="Closer.mp3"
controls="controls"></audio>
<br><video src="Closer.mp4" controls="controls"

width="45%"></video>
13
14
2.2.5 Tag Form

2.2.6
2.2.7
2.2.8
2.2.9 Pada tag form diatas terdapat attribute
method dengan dua value, yaitu POST dan GET.
Bedanya, POST tidak menampilkan nilai variabel pada
URL sedangkan GET menampilkan nilai variabel yang
dikirimkan sehingga POST lebih aman daripada GET.
Kemudian, POST biasanya digunakan untuk input dari
FORM, sedangkan GET menggunakan input dari LINK atau
akses menggunakan link. POST cenderung digunakan
untuk mengirimkan data yang sifatnya rahasia seperti
password, sedangkan GET digunakan untuk
14
15
mengirimkan/mengambil data publik seperti id_user atau

id_halaman.
2.2.10 Tag a
2.2.11 Dalam halaman web sealu ada

tatuan atau link dimana link adalah sebuah tulisan
atau gambar atau tombol atau lainnya yang
berada pada suatu halaman A yang apabila diklik
akan membawa pengguna untuk menuju ke suatu
halaman lain atau halaman B. Dan berikut adalah
source code untuk membuat link:
2.2.12
<a href=data.html>dataku</a>
<a href=../../images/data.html>dataku</a>
2.2.13
<a href=www.dot.com/images/data.php>dataku</a>
2.2.14
<a href=data.html target=_blank><img
src=logo.jpg /></a>
2.2.15
2.3Meta Tag
2.2.16 Dalam HTML terdapat banyak sekali
source-source code untuk membangun sebuah
website salah satu yang paling dasar adalah meta
tag. Meta adalah elemen atau tag dalam bahasa
pemrograman HTML atau XHTML yang berfungsi
sebagai penyampai informasi metadata dari
sebuah halaman web. Elemen meta tag harus
diletakkan dibawah awalan HEAD dan diatas TITLE
dalam HTML tersebut. Tag meta ini dapat dipakai
juga untuk menyatakan descriptsi/keterangan dari
suatu halaman web dan untuk menjelaskan
mengenai kata kunci (keyword) yang terkait serta
untuk metadata lain tanpa HEAD Secara umum,
terdapat beberapa macam meta tag dengan
fungsi yang berbeda. Beberapa fungsi tersebut
misalnya meta keywords dan description. Berikut
lebih jelasnya tentang meta tag.
15
16
2.2.17
16
17
2.3.1 Meta Tag Title
Meta tag yang menyatakan identitas atau

judul dari suatu blog. Berikut penulisan meta tag
title:
<title><data:blog.pageTitle/></title
>
Kalian dapat memodifikasi kode meta tag title agar judul

postingan lebih dulu terindeks oleh search engine dari
pada judul blog (salah satu trik SEO). Penulisannya
berubah menjadi:
<title><data:blog.pageName/> |
<data:blog.pageTitle/></title>
2.3.2 Meta Tag Descriptsi
Meta tag yang berfungsi untuk

mendescriptsikan seluruh konten (isi) artikel suatu
blog. Meta tag ini membantu web spider atau web
robot search engine dalam mendescriptsikan blog
Anda. Berikut penulisan meta tag descriptsi:
<meta content='My Experience Is My Inspiration'

name='description'/>
2.3.3 Meta Tag Keywords
Meta tag yang berisi keywords (kata kunci)

dari konten blog Anda. Kata kunci harus sesuai
dengan materi dari artikel Anda. Karena dengan
kata kunci yang benar, dapat lebih mudah
menjaring pembaca ke blog Anda berdasarkan
kata kunci tertentu. Penulisan kata kunci harus
dipisahkan dengan tanda koma. Berikut penulisan
meta tag keywords:
<meta content=keyword1,keyword2,keyword3,
dan seterusnya name=keywords/>
17
18
2.3.4 Meta Tag Verifikasi
Meta tag yang dipasang pada template

blog setelah Anda mendaftarkan blog ke search
engine Google, Bing, Msn, Yahoo, Alexa dan search
engine yang lainnya. Setelah proses verifikasi blog
selesai, biasanya Anda diharuskan memasang
kode meta tag verifikasi tersebut pada template
blog Anda. Berikut contoh penulisan meta tag
verifikasi:
<meta
content='TtuX5x792RG5l1Vt52Lue2VbFGm545NIlQ
Qw1CGI23c 'name='google-site-
verification'/>
<meta content='af350aa3e238f9c3'
name='y_key'/>
<meta
content='EF3208999BFC2D6DD07C9896BF493B3B'
name='msvalidate.01'/>
<meta content='wIOcDXyX7nhrfNmLaljhzeaDYlc
'name='alexaVerifyID'/>
Kode - kode meta tag verifikasi tersebut

jangan pernah dihapus, karena merupakan bukti
bahwa Anda telah mem-verifiksi blog. Bagi kalian
yang belum mengetahui apa itu fungsi meta tag
langsung simak fungsi meta tag berikut:
Membantu robot google dalam mengindeks

konten blog.
Membuat blog lebih cepat terindeks pada search
engine.
Membuat posting lebih cepat terindeks search
engine berdasarkan kata kunci.
18
19
Spider bot search engine lebih mudah

mengindeks konten blog.
19
20
Selain itu meta tag juga mempunyau beragam manfaat

sebagai berikut:
Membuat blog Anda menjadi ramai visitor atau

pengunjung.
Memungkinkan artikel berada pada halaman
pertama Google.
Judul artikel / postingan lebih mudah terindeks
search engine.
Menaikkan trafik dan page rank blog Anda.
Dari ocehan sebelumnya yang sudah membahas

tentang HTML maka dirasa cukup mengenai pembahasan
tentang HTML mulai dari pengenalan hingga beberapa
source code yang sangat penting dalam pembuatan
suatu website. Dalam ocehan selanjutnya akan dibahas
mengenai CSS yaitu source code yang berguna untuk
menghias atau mempercantik suatu website.
20
21
3rd Ocehan
Pengenalan Awal Tentang
CSS
Mengenai apa itu CSS dan bagaimana penggunaannya
21
22
3.1Penjelasan Umum Tentang CSS
CSS (Cascading Style Sheets) merupakan

kumpulan kode yang digunakan untuk mendefenisikan
desain dari markup language dan digunakan untuk
mendesain atau mempercantik tampilan halaman HTML.
Dengan CSS kita bisa mengubah desain dari text, warna,
gambar dan latar belakang dari (hampir) semua kode tag
HTML. CSS selalu dikaitkan dengan HTML, karena
keduanya memang saling melengkapi. HTML ditujukan
untuk membuat struktur, atau konten dari halaman web
sedangkan CSS untuk tampilan dari halaman web
tersebut.
CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata
seperti Microsoft Word yang dapat mengatur beberapa
style, misalnya heading, subbab, bodytext, footer,
images, dan style lainnya untuk dapat digunakan
bersama-sama dalam beberapa berkas (file).
CSS dapat mengendalikan ukuran gambar, warna
bagian tubuh pada teks, warna tabel, ukuran border,
warna border, warna hyperlink, warna mouse over, spasi
antar paragraf, spasi antar teks, margin kiri, kanan, atas,
bawah, dan parameter lainnya. CSS adalah bahasa style
sheet yang digunakan untuk mengatur tampilan
dokumen. Dengan adanya CSS memungkinkan kita untuk
menampilkan halaman yang sama dengan format yang
berbeda.
Pasti sebagian dari kita banyak yang
berpikir kenapa harus menggunakan CSS ?
padahal kan menghias halaman web seperti
memberi warna tulisan membuat spasi bisa
dilakukan dengan menggunakan bahasa HTML
saja. Berikut alasan-alasan kenapa harus CSS.
CSS menghilangkan atribut presentasi dari

struktur yang memungkinkan penggunaan
kembali (reusabilitity), kemudahan pemeliharaan
dan lapisan presentasi dipertukarkan
(interchangeable).
22
23
HTML tidak pernah dimaksudkan untuk menjadi

bahasa presentasi. Vendor proprietary telah
menciptakan tag untuk menambahkan presentasi
struktur.
CSS memungkinkan untuk membuat perubahan
menyeluruh (global) dan seketika dengan mudah.
Dalam CSS ada yang namanya cascade, apa itu

cascade ?
Kekuatan CSS ditemukan dalam "cascade" yang

merupakan kombinasi gaya default browser,
external style sheets, embedded/internal style
sheets, inline style sheets, dan bahkan style yang
ditetapkan pengguna.
Cascade membuat prioritas pada individual styles
pada style turunan (inheritance).

3.2Cara Penulisan CSS

Dalam penjelasan cascade diatas ada istilah
inline, embeded/internal, dan external style sheets.
Lantas apa arti dari masing-masing istilah tersebut?
Berikut adalah penjelasannya.

3.2.1 Inline Style Sheets

Merupakan cara menginput kode CSS
secara langsung kedalam tag HTML dengan
menggunakan attribute style. Berikut adalah contoh
penggunaannya.
23
24
3.2.2 Embedded/Internal Style Sheets

Digunakan untuk memisahkan kode CSS
dari tag HTML namun tetap dalam satu halaman HTML.
Atribut style yang sebelumnya berada di dalam tag,
dikumpulkan pada pada sebuah tag <style>. Tag style ini
harus berada pada bagian <head> dari halaman HTML.
24
25
3.2.3 External Style Sheets

Kekurangan dari metode internal style
sheets sebelumnya adalah jika ingin membuat beberapa
halaman dengan tampilan yang sama, maka setiap
halaman akan memiliki kode CSS yang sama. Metode
External Style Sheets digunakan untuk mengangkat
kode CSS tersebut kedalam sebuah file tersendiri yang
terpisah sepenuhnya dari halaman HTML. Setiap halaman
yang membutuhkan kode CSS, tinggal memanggil file
CSS tersebut. Ada dua cara pemanggilan:

<style>@import url(contoh.css)</style>
<link rel=stylesheet href=contoh.css>

25
26
Dalam file css ini terdapat dua macam

selector yang selanjutnya bisa dipakai untuk memanggil
fungsi dari selector yang berisi dekorasi pada HTML nanti.
Selector paling dasar dari CSS adalah tag dari HTML itu
sendiri, misalnya: tag p, i, h1, li, dan lain-lain.
Property CSS adalah jenis style, atau
elemen apa yang akan diubah dari sebuah tag HTML. CSS
memiliki puluhan property yang dapat digunakan agar
menampilkan hasil akhir yang kita inginkan. Hampir
semua property dalam CSS dapat dipakai untuk seluruh
selector. Jika selector digunakan misalnya untuk mencari
seluruh tag <p>, maka property adalah efek apa yang
ingin dimanipulasi dari tag p tersebut, seperti ukuran
text, warna text, jenis fontnya, dan lain-lain.
Value CSS adalah nilai dari property.
Misalkan untuk property background-color yang
digunakan untuk mengubah warna latar belakang dari
sebuah selector, value atau nilainya dapat berupa red,
blue, black, atau white.

Selector di tempatkan pada awal penulisan
CSS. Dalam contoh diatas, body, p, h1 dan h2
adalah selector. Khusus untuk selector yang
26
27
lebih dari 1 (seperti pada contoh selector

terakhir: h1,h2) untuk memisahkan kedua
selector tersebut, digunakan tanda koma (,).
Setelah penulisan selector, seluruh isi dari
property dan valuenya (nilainya), berada di
antara kurung kurawal { dan }.
Diantara property satu dengan yang lainnya,
dipisahkan dengan tanda titik koma (;)
Diantara property dengan value (nilai),
dipisahkan dengan anda titik dua (:).
Untuk property yang memiliki 2 kata , spasi
diantaranya digantikan dengan tanda hubung
(-), contohnya: background-color dan border-
left.
Untuk properti yang berada pada baris terakhir,
kita boleh mengabaikan tanda ; sebagai tanda
tutup, tetapi disarankan agar tetap
menggunakan tanda ;, karena bisa saja kita
lupa menuliskan tanda titik koma pada saat
menambahkan properti lainnya. Contoh
property tanpa tanda ; dapat di lihat pada
contoh text-decoration: underline.

27
28
3.3Jenis-Jenis Selector Dasar CSS

Terdapat 5 Selector dasar dalam CSS.
Berikut penjelasannya.

3.3.1 Universal Selector

Universal Selector hanya ada 1 di dalam
CSS, yaitu tanda bintang *. Selector ini bertujuan untuk
mencari semua tag yang ada.

*{
color: blue;
background-color:
white;}
}

3.3.2 Element/Tag Selector

Element Type Selector atau Tag Selector
adalah istilah untuk selector yang nilainya merupakan tag
HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai
selector, dan seluruh tag tersebut akan ditangkap oleh
selector ini.

h1
{text-decoration:
underline;}
p
{font-size:14px;}

3.3.3 Class Selector

Digunakan untuk menentukan style
dari sebuah group elemen. Berbeda dengan ID,
selector class bisa dipakai berulangkali pada
sebuah dokumen web. Artinya sebuah nama class
dapat dipanggil beberapa kali pada elemen-
elemen yang ada pada sebuah halaman web.
28
29
Selector class dituliskan dengan ditandai dengan

tanda titik .. Contoh selector class :
Pada bagian dokumen web, misalnya akan

diterapkan pada paragraph dan pada sebuh div
dalam sebuah dokumen web yang sama, dapat
dituliskan :
<p class="komentar"> Ini adalah paragraph
komentar .komentar{
</p>
text-align:left;
color:red;}
<div class="komentar">Ini bagian komentar</p>

3.3.4 ID Selector

Digunakan untuk menentukan style bagian
unik dari html. Unik disini artinya satu nama id hanya
bisa digunakan satu kali pada sebuah halaman web.
Apabila satu nama ID digunakan lebih dari satu kali pada
sebuah halaman, maka style hanya akan berlaku pada id
yang pertama saja. Selector ID pada syntax CSS ditandai
dengan #. Contoh selector ID:

#par1{
text-align:center;
color:red;
}
Pada bagian dokumen HTML, untuk menggunakan

style tersebut, misalnya pada sebuah paragraph, bisa
dituliskan:

<p id="par1">Ini adalah sebuah paragraph</p>

3.3.5 Attribute Selector

Selector dasar terakhir kita adalah
attribute selector. Selector ini sedikit lebih advanced
dibandingkan dengan selector-selector sebelumnya.
29
30
Atribut Selector ini digunakan untuk mencari seluruh tag

yang memiliki atribut yang dituliskan.

[href]
{font-size:20px ;}
[type="submit"]
{width:30px;}
30
31
3.4Macam Macam Code CSS

Setelah kita sudah mengetahui
bagaimana cara menulis css maka yang perlu
diketahui selanjutnya adalah macam-macam
source code css, berikut adalah mereka :
3.4.1 CSS #rrggbb
Fonts (hexadecimal)
Font-family
3.4.3 CSS
Font-weight Layout
Margin
Font-style
Padding
Font-size
Border
3.4.2 CSS Units
& Colors Z-index
Units
Positioning
%
Width
in
Height
cm
Float
mm
Text-align
em
Vertical-align
px
3.4.4 CSS Text
pt Text-indent
Colors Text-align
color Text-decoration
name (red, blue,
Letter-spacing
purple, etc)
Text-transform
rgb (x,x,x)
x=0-255 Word-spacing
(decimal)
31
32
White-space Background-
repeat

3.4.6 CSS Lists
3.4.5 CSS List-style
Background
Background-color List-style-image
Background- List-style-position
image
List-style-type
Background-
position
32

Demikian tentang pengenalan mengenai

CSS secara umum, di ocehan selanjutnya akan dibahas
mengenai tips-tips tentang CSS dan penerapan CSS.
33

4th Ocehan
Tips dan Penerapan CSS
Mengenai tips-tips untuk menerapkan dan
menggunakan CSS dalam suatu website
34
4.1Download Contoh Website Yang Mengandung
CSS
Part ini adalah lanjutan dari ocehan

sebelumnya yang membahas tentang pengertian secara
umum dan penerapan CSS secara singkat. Dalam ocehan
ke empat ini akan dijelaskan mengenai css tips dan
penerapannya dalam membuat suatu website. Sebelum
dijelaskan lebih lanjut disarankan untuk mengambil
template website yang ada dengan penerapan css.
Contohnya:
http://localhost/ocehanku/P3.zip
4.2Pembahasan Tentang Tips dan Penerapan CSS
Jika sudah membuka template atau contoh

website yang sudah jadi diatas maka mari kita simak tips-
tips CSS berikut ini.
4.2.1 Cursor Property
Tips yang pertama dinamakan cursor

property. Cursor property pada css digunakan untuk
mengubah bentuk cursor yang semula type standart
yaitu berbentuk tanda panah biasa menjadi type cursor
lainnya (select, move, loading, dll) apabila cursor
diarahkan ketempat yang elemennya sudah diberi css
cursor property, biasanya cursor property diterapkan
pada link. Perhatikan source code dibawah ini:
href=www.google.com style
<a
=cursor:crosshair>TEST</a>

35
Dari source code css diatas dapat diartikan bahwa
tulisan TEST mempunyai link ke www.google.com
tapi ketika cursor diarahkan ketulisan TEST yang
mempunyai link ke situs raksasa dunia tersebut
type cursor berubah menjadi type cursor crosshair
atau type cursor yang berbentuk tanda plus.
Perhatikan gambar contoh-contoh tipe cursos
berikut untuk lebih jelasnya :
4.2.2 Link hover animasi GIF
Tips yang kedua adalah css untuk

membuat animasi gif dibawah link seperti contoh
animasi tanda panas berjalan dibawah suatu link.
Perhatikan script HTML link berikut:
<a
href="http://www.tanggulangin.com">Website

Tanggulangin Dot Com</a> |
<a href="#">Website lainnya</a>
36

Terapkanlah source code CSS dibawah ini kedalam

HTML diatas:
a:hover {
text-decoration: none;
background-image:
url(animated_underline.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
color: #F00;
}
Jika CSS sudah diterapkan ke HTML diatas maka

akan menghasilkan tampilan seperti ini :
4.2.3 Button Image
Oke masuk ke tips ketiga, button image.

Dari namanya saja sudah dapat diketahui bahwa button
image adalah tombol berupa gambar plus tulisan yang
menuju kesuatu link atau halaman web dengan, jadi
tentunya dengan button image link yang tadinya hanya
37
sebuah tulisan saja dapat didesain lebih menarik dengan
menambahkan tombol. Ini adalah kode HTML nya :
<a class="ovalbutton"
href="#"><span>Website Link</span></a>

<a class="ovalbutton" href="#"

style="margin-left: 6px"><span>Produk
link</span></a>

38
Terapkanlah source code CSS dibawah ini kedalam
HTML diatas:

a.ovalbutton{
background: transparent url('ovalleft.gif')

no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma;
line-height: 16px;
height: 24px;
padding-left: 11px;
text-decoration: none;
}

a:link.ovalbutton, a:visited.ovalbutton,
a:active.ovalbutton{
color: #494949;
}

a.ovalbutton span{
background: transparent url('ovalright.gif')
no-repeat top right;
display: block;
padding: 4px 11px 4px 0;
}

a.ovalbutton:hover{
background-position: bottom left;
}

a.ovalbutton:hover span{
background-position: bottom right;
color: black;
}
39

Jika CSS sudah diterapkan ke HTML diatas maka

akan menghasilkan tampilan seperti ini :
Tentunya selain button diatas, kita juga bisa

membuat model button image sendiri. Yang
diperlukan adalah dua buah gambar dengan icon
yang sama tapi dengan warna yang berbeda
karena salah satu dari icon tersebut akan
ditampilkan dan ketika mouse berada diatas icon
tersebut maka gambar akan bergeser atau
berganti ke gambar lainnya dengan warna yang
berbeda. Cara mudah untuk membuat button
image bisa dengan php berikut :
http://localhost/ocehanku/css_tips/icon/icon
.php
4.2.4 Button dan Anchor
40
Tips keempat adalah button dan anchor.
Fungsi css berikut adalah untuk mempercantik tampilan
tombol yang biasa digunakan pada pengisian formulis
agar terlihat lebih menarik. Perhatikan perbandingannya:
Source code dari tampilan button yang cantik

diatas dapat diambil di link dibawah ini :
http://localhost/ocehanku/css_tips/link_butt
on/
4.2.5 Pop Up Gambar
Lanjut ketips kelima, pop up gambar. Css

ini berfungsi untuk menampilkan gambar dengan size
yang lebih besar yang muncul secara tiba-tiba ketika
cursor diarahkan kegambar yang ukurannya lebih kecil
pada suatu halaman web. Contohnya:
41

Source code dari tampilan diatas dapat diambil di

link dibawah ini:
http://localhost/ocehanku/css_tips/gambar_popup/
42
4.2.6 Sudut Melipat
Tips keenam adalah membuat sudut

melipat pada sebuah box dengan menggunakan css.
Hasilnya akan namak seperti dibawah:

link dibawah ini:
http://localhost/ocehanku/kuliah/css_tips/box_lipat
4.2.7 Tool Tips
Tips selanjutnya adalah css mengenai tool

tips. Css ini digunakan untuk memberi pop up pada
suatu teks yang berisi tentang keterangan teks
tersebut, contohnya adalah teks css yang diberi tool tips
seperti gambar dibawah :
43
link dibawah ini:
http://localhost/ocehanku/kuliah/css_tips/tooltips
44
4.2.8 Z-Index
Pada css juga terdapat semacam layer

untuk menempatkan konten, sama halnya sperti
photoshop yang terdapat layer-layer atau lapisan=lapisan
untuk menempatkan konten agar visibilitas antar konten
dapat diatur. Pada css cara mengatur layer menggunakan
z-index yang dapat ditambahkan pada css dengan
menuliskan z-index: 1; angka 1 adalah layer tempat
konten berada, standart adalah 0. Untuk lebih jelasnya
perhatikan gambar berikut:

link dibawah ini:
http://localhost/ocehanku/z-
index_stack_1_iframe.html
4.2.9 Tabs
Berikutnya adalah membuat kolom yang

berisikan tab-tab dengan memanfaatkan z-index pada
css. Langsung saja perhatikan gambar:
45

Source code
dari tampilan diatas dapat diambil di link dibawah
ini:
http://localhost/ocehanku/css_tips/tab/tab.html
4.2.10 Table dan Form
Dan berikut yang terakhir adalah tips-tips

css untuk menghias table dan form, bisa langsung
mendownload dan pelajari CSS serta HTMLnya di link
dibawah ini:
Form :
http://localhost/ocehanku/css_tips/form/form_0.html

Table :
http://localhost/ocehanku/css_tips/table/table_0.html

46

CSS sudah dibahas di dua ocehan sehingga

pembelajaran mengenai CSS sudah dirasa cukup,
penerapan CSS dapat langsung dipraktikan dengan
mendownload File HTML di link yang telah tertuliskan di
ocehan ke empat ini. Diocehan berikutnya akan dibahas
JavaScript.
5th Ocehan
Penjelasan Tentang
JavaScript
Mengenai apa itu JavaScript serta cara penerapan dalam
sebuah website
47
5.1Pengertian dan Fungsi JavaScript
Meskipun dalam membuat halaman web anda

tidak harus menggunakan JavaScript, tetapi saat ini
JavaScript hadir dalam hampir setiap halaman web
modern, sehingga JavaScript adalah salah satu bahasa
pemograman web yang wajib di kuasai. Namun, sebelum
mempelajari JavaScript, sebaiknya anda menguasai
dasar-dasar HTML dan dapat membuat halaman web
sederhana terlebih dahulu. Pengetahuan CSS dan
Programming language seperti PHP juga akan membantu
dalam mempercantik tampilan website. JavaScript
termasuk dalam 3 komponen penting yang harus dikuasai
programmer web, yakni HTML untuk konten (isi dari
website), CSS untuk tampilan (presentation), dan
JavaScript untuk interaksi (behavior).
JavaScript adalah bahasa pemograman yang

digunakan untuk membuat interaksi atau menambah fitur
web dinamis kedalam sebuah web. JavaScript merupakan
bahasa pemrograman web yang bersifat Client Side
Programming Language. Client Side Programming
Language adalah tipe bahasa pemrograman yang
pemrosesannya dilakukan oleh client. Jenis bahasa
pemrograman Client Side berbeda dengan bahasa
pemrograman Server Side seperti PHP, dimana untuk
server side seluruh kode program dijalankan di sisi server.
JavaScript memiliki beberapa fitur, yaitu high-level
programming language, client-side, loosely tiped, dan
berorientasi objek.
48
JavaScript pada awal perkembangannya berfungsi
untuk membuat interaksi antara user dengan situs web
menjadi lebih cepat tanpa harus menunggu pemrosesan
di web server. Sebelum JavaScript, setiap interaksi dari
user harus diproses oleh web server. Dalam
perkembangan selanjutnya, JavaScript tidak hanya
berguna untuk validasi form, namun untuk berbagai
keperluan yang lebih modern. Berbagai animasi untuk
mempercantik halaman web, fitur chatting, efek-efek
modern, games, semuanya bisa dibuat menggunakan
JavaScript.
JavaScript mengalami permasalahan yang sama

seperti kode pemograman web yang bersifat client side
seperti CSS, yakni bergantung kepada implementasi web
browser. Jadi, JavaScript pada awalnya termasuk bahasa
pemograman yang rumit, karena harus membuat
beberapa kode program untuk berbagai web browser
atau dengan kata lain kode JavaScript yang kita buat,
bisa saja tidak bekerja di suatu browser seperti Internet
Explorer, karena web browser tersebut tidak
mendukungnya, sehingga programmer harus bekerja
ekstra untuk memanipulasi kode program agar tetap bisa
support/compatible dengan web browser tersebut.
JavaScript kembali naik daun atas kemudahan

yang ditawarkan oleh komunitas programmer yang
membuat library JavaScript seperti jQuery. Library ini
memudahkan kita membuat program JavaScript untuk
semua web browser, dan membuat fitur-fitur canggih
yang sebelumnya membutuhkan ribuan baris kode
program menjadi sederhana.
49
5.2Sejarah Singkat Penamaan JavaScript
Sejarah JavaScript dimulai sekitar tahun 1994,

ketika internet dan website sedang mengalami
perkembangan yang pesat. Website pada saat itu
umumnya dibuat menggunakan bahasa pemograman
PERL yang pemrosesannya hanya bisa dilakukan di sisi
web server. Kelemahan pemrosesan di sisi web server
adalah, setiap instruksi dari user harus dikirim terlebih
dahulu kepada web server, baru kemudian ditampilkan
lagi di dalam web browser. Karena kecepatan rata-rata
koneksi internet yang terbatas, hal ini dipandang tidak
efisien. Programmer web membutuhkan bahasa
pemograman client-side yang bisa berjalan di web
browser tanpa harus dikirim ke server.
Pada tahun 1995, Brendan Eich seorang

programmer dari Netscape mulai mengembangkan
sebuah bahasa pemograman script yang dinamakan
Mocha. Netscape pada saat itu merupakan perusahaan
software ternama yang memiliki web broser Netscape
Navigator. Bahasa script Mocha ini ditujukan untuk client-
side dan juga server-side. Dalam perkembangan
selanjutnya, nama Mocha diubah menjadi LiveScript
untuk versi client-side, dan LiveWire untuk versi server-
side. Pada saat bahasa pemograman tersebut akan dirilis,
Netscape mengadakan kerjasama dengan Sun
Microsystems untuk mengembangkan LiveScript, dan
tepat ketika Netscape Navigator 2 dirilis, Netscape
merubah nama LiveScript menjadi JavaScript dengan
tujuan bahasa baru ini akan populer seperti bahasa Java
50
yang saat itu sedang booming di kalangan programmer.
Versi JavaScript ini dinamakan dengan JavaScript 1.0.
5.3Cara Penulisan JavaScript
JavaScript merupakan bahasa script yang berjalan

pada web browser, sehingga program yang dibutuhkan
untuk menjalankan JavaScript hanyalah sebuah aplikasi
text editor dan sebuah web browser seperti Google
Chrome atau Mozilla Firefox.
Untuk menginput, atau memasukkan kode

JavaScript ke dalam HTML, JavaScript menyediakan 4
alternatif, yaitu:
5.3.1 Inline JavaScript
Cara yang pertama untuk menjalankan JavaScript

adalah dengan memanggilnya menggunakan Event
Handler atau Inline JavaScript dari dalam tag HTML.
Penulisan JavaScript dengan metode ini adalah penulisan
yang paling standar. Caranya dengan menulis script
JavaScript didalam tag html contohnya didalam tag
<html>
<div>, perhatikan script berikut.
<head>
<title>JS dalam Elemen</title>
</head>
<body>
<div onclick="this.innerHTML='<b>teks
JavaScript</b>';"> 51
teks di elemen HTML, untuk merubah
silakan di klik
</div>
</body>
</html>
Dalam script html tersebut dapat diketahui bahwa
dimasukkan script JavaScript di dalam elemen div. Script
tersebut berguna untuk merubah tulisan teks di elemen
HTML, untuk merubah silakan di klik menjadi tulisan
teks JavaScript ketika diklik. Dapat dipelajari bahwa
penulisan dari javascrip diatas hanya dituliskan dalam
salah satu elemen html yaitu div, jadi JavaScript tersebut
hanya berlaku di elemen div yang disisipi script JavaScript
itu sendiri. Penulisan model seperti ini tentunya
embutuhkan waktu yang lama dan mempunyai tingat
efisiensi yang rendah karena diharuskan memberi script
JavaScript pada satu per satu elemen html.
5.3.2 Internal JavaScript
Cara kedua yaitu dengan menggunakan tag

<script> secara internal. Internal disini berarti bahwa
kode JavaScript ditulis pada halaman yang sama dengan
HTML, atau di dalam satu file HTML. Cara ini merupakan
cara yang paling sering digunakan, jika kode JavaScript
tidak begitu panjang, dan hanya digunakan di 1 halaman
52
saja. Kode JavaScript yang akan diinput diletakkan
diantara tag pembuka <script> dan tag penutup
</script> seperti berikut ini:
<script>
//kode JavaScript diletakkan
disini
</script>
Tidak seperti metode Internal pada CSS yang harus

diletakkan pada tag <head> melainkan bisa di bagian
mana saja.
5.3.3 External JavaScript
Cara yang ketiga adalah dengan memindahkan

kode JavaScript ke dalam sebuah file terpisah, lalu
memanggilnya dari HTML. Cara ini sangat disarankan
karena akan memberikan banyak keuntungan dan
fleksibilitas dalam membuat program JavaScript. Sebuah
file JavaScript disimpan dalam ekstensi .js, seperti:
kode.js, register.js, atau kodeku.js. Dari halaman HTML,
kita memanggilnya menggunakan tag <script> dengan
53
atribut src. Atribut src berisi alamat dari file JavaScript
tersebut, seperti berikut ini:
<script src="kode_JavaScript.js">
</script>
5.3.4 Menggunakan URL
Cara terakhir (dan juga paling jarang digunakan

saat ini) adalah dengan menyisipkan JavaScript ke dalam
alamat href dari tag HTML. Cara ini disebut juga dengan
protocol JavaScript, karena kita mengganti alamat link
dari yang biasa menggunakan protocol http//: menjadi
JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript di Duniailkom</title>
</head>
<body>
<h1>Belajar JavaScript</h1>
<p>Saya sedang belajar JavaScript di
duniailkom.com</p> <p>Belajar Web Programming
di Duniailkom.</p>
<a href="JavaScript:alert('Hello World!!')">Hallo
Dunia...</a>
</body>
54
5.4Kegunaan Script yang Ada di JavaScript
Setelah keempat cara penulisan dari JavaScript

sudah dibahas sekarang waktunya untuk membahas
mengenai kegunaan script-script pada JavaScript itu
sendiri. Salah satu kegunaan dari JavaScript adalah
membuat massage alert, yaitu pesan dialog windows
yang biasa muncul pada browser yang biasanya terdapat
pilihan OK dan tutup. JavaScript tersebut menggunakan
fungsi window.alert , window.confirm, window.prompt.
lebih jelasnya bisa mempelajari contoh dibawah :
http://localhost/ocehan/JavaScript/js_output_box.html
Selanjutnya adalah JavaScript untuk menuliskan
teks dan memberi gaya pada teks. Fungsinya
menggunakan window.write dan window.writeln. Fungsi
window.write digunakan untuk menampilkan teks tanpa
ganti baris sedangkan fungsi window.writeln digunakan
55
untuk menulis teks dengan ganti baris. Bisa dipelajari
lengkapnya di :
http://localhost/ocehan/JavaScript/js_output_write.ht
ml
Selanjutnya adalah variabel, sama seperti
pemrograman c++, di JavaScript juga ada yang namanya
deklarasi dan inisialisasi untuk variabel. Caranya adalah
seperti :
var count;
var count, amount, level;
var count = 0, amount = 100;
Berikut adalah macam-macam dari nama variabel :
case-sensitive
Karakter pertama huruf atau underscore, nomor
tidak boleh sebagai karakter pertama
Bukan reserved word:
56
Dalam JavaScript terdapat 3 jenis data, yaitu sebagai
berikut.
Tipe data primer
String
Number
Boolean
Tipe data komposite (composite/reference)
Object
Array
Tipe data khusus
Null
Undefined
5.4.1 Tipe Data : string
"Happy am I; from care I'm free!"
Anak itu bodoh kok
57
"45"
'c'
Contoh scriptnya adalah sebagai berikut :
<script>
var mobil = "Toyota Yaris";
var mobil = Toyota Yaris;
</script>
58
5.4.2 Tipe Data : number
JavaScript merepresentasikan angka dengan floating-

point
-5 , 0 , 6 , 09 // integer
3.45e2 , 2e-3 // floating point
0xF , 0x11 // hexadecimal
011 // octal
5.4.3 Tipe Data : boolean
Seperti sebelum-sebelumnya untuk tipe data ini

hanya berisi perbandingan atau comparison : true atau
false
5.4.4 Tipe Data : null
Keyword null tidak bisa digunakan untuk

nama variable atau function.
Variable null berisi no value atau no object
Null tidak sama dengan 0 (nol)
5.4.5 Tipe Data : undefined
59
Nilai undefined didapat jika:
Object property tidak ada
Variable sudah dideklarasikan tapi belum terisi

data.
5.4.6 Operator
Sama seperti bahasa pemrograman yang lain

yang mempunyai operator, dalam JavaScript juga
terdapat fungsi operasi seperti operator Computational
yang berisi perintah-perintah operasi standart seperti:
60
Dan ada juga operasi Bitwise yang berisi perintah
seperti :
61
Serta ada juga operasi logical yang berisi perintah
layaknya perbandingan seperti :
Ada juga operasi Compound Assignment yang isinya :
62
5.4.7 Function
Dalam
JavaScript juga ada fungsi function layaknya di C++ guna
mempersingkat coding dalam pembuatan JavaScript.
Cara penulisannya hampir sama dengan di C++ yaitu :
functionName(parameters) {
// isi blok program
}
Contoh penerapan dalam JavaScript adalah dalam coding

berikut:
<script>
function kali(a, b){
document.write(a+ X +b+ = + a*b);
}
function kali_ret(a, b){

Return(a*b);
}
var a=5, b=7 ; 63

kali(a,b);
document.write(<br>);
document.write(a+ X +b+ = + kali_ret(a, b));
</script>
Lihat hadil dari coding JavaScript diatas di :
http://localhost/ocehan/JavaScript/function_deklarasi.ht
ml
5.4.8 Click Events: onclick
Sama seperti di css juga, di JavaScript juga ada

click events atau di css disebut hover yaitu script
dijalankan ketika cursor berada diatas elemen hover. Di
JavaScript terdapat mouse event yang bermacam-macam
contohnya adalah script dijalankan ketika mouse diklik.
Contohnya di :
http://localhost/ocehan/JavaScript/event_onclick.html
64
5.4.9 Mouse Events: onclick
Ini adalah aksi atau tindakan yang terdapat dalam

JavaScript yang bisa diatur dan berjalan dimana cursor
dalam kondisi tertentu, untuk lebih jelasnya lihat gambar
dibawah :
Contoh dari mouse event ada di :
http://localhost/ocehan/JavaScript/dom_document_
bg_event.html
65
5.4.10 Input Keyboard Events
Selain aksi yang disesuaikan dengan kondisi

cursor juga terdapat aksi yang disesuaikan dengan
kondisi keyboard. Input keyboard event adalah aksi atau
tindakan yang terdapat dalam JavaScript yang bisa diatur
dan berjalan dimana keyboard dalam kondisi tertentu,
untuk lebih jelasnya lihat gambar dibawah

Contoh dari input keyboard event ada di :
http://localhost/ocehan/JavaScript/dom_documen
t_bg_inputevent.html
Cukup sekian ocehan mengenai penjelasan detail

tentang JavaScript agar dapat memahami penjelasan
secara maksimal hendaknya selalu mendownload file-file
HTML yang sudah jadi di link yang telah diberikan dalam
masing-masing poin penjelasan tentang JavaScript diatas.
66
6th Ocehan
Pengenalan Tentang jQuery
Mengenai apa itu jQuery, bagaimana penulisannya, serta
secara singkat menjelaskan fungsi yang ada pada jQuery
67
6.1Pengertian jQuery
jQuery adalah salah satu dari sekian banyak

JavaScript library atau framework. Ocehan ini merupakan
pengembangan dari ocehan yang sebelumnya mengenai
JavaScript karena dengan adanya JavaScript library atau
framework ini kita jadi dipermudah dalam pembuatan
script pada suatu website. JavaScript saat ini sudah
jarang digunakan karena kerumitannya dalam penulisan
yang sering digunakan untuk saat ini ialah JavaScript
library atau framework karena sangat memberikan
keringkasan dan kemudahan dalam penulisan. Dalam
JavaScript library tersebut berisi kumpulan perintah yang
dapat dipanggil langsung menggunakan kode pada HTML
jadi kita sudah tidak perlu lagi membuat perintah
tertentu yang sudah ada pada JavaScript library tersebut.
Ada banyak macam penyedia layanan JavaScript library
daftarnya adalah sebagai berikut :
jQuery - https://jquery.com
Prototype - http://prototypejs.org
Mootools - http://mootools.net
Ext JS - http://www.sencha.com/products/extjs
Yui - http://yuilibrary.com
Angular - https://angularjs.org
Midori - http://www.midorijs.com
68
Google Web Toolkit -
http://code.google.com/webtoolkit
DHTMLX - http://dhtmlx.com
Dojo Toolkit - http://www.dojotoolkit.org
Echo 3 - http://echo.nextapp.com/site/echo3
MochiKit - http://mochi.github.com/mochikit
Pyjamas - http://pyjs.org
69
Hanya saja pada ocehan tentang pemrograman web ini
menggunakan layanan dari jQuery yang mana bisa
diakses di www.jQuery.com. jQuery adalah JavaScript
library kecil open source yang menekankan pada
interaksi antara JavaScript dan HTML. Library ini dirilis
pada Januari 2006 di BarCamp NYC oleh John Resig dan
berlisensi ganda di bawah MIT dan GPL. jQuery juga
merupakan JavaScript library yang cepat, ringan, dan
mempunyai banyak fitur. jquery dapat membuat
dokumen html yang baik dan atraktiv, penuh animasi,

dan kaya akan fitur. jQuery adalah salah satu JavaScript
library terbaik yang dapat menggantikan fungsi
JavaScript itu sendiri. jQuery juga dapat mendukung
hampir semua browser internet explorer, chrome, firefox,
opera, safari dan bahkan ios dan android. Berikut adalah
3 hal mengapa harus memilih jQuery :
Dari penjelasan diatas dapat diketahui bahwa jQuery

adalah :
JavaScript library / framework
jQuery mempunyai semboyan: write less, do

more
70
jQuery dirancang untuk memperingkas kode-kode
JavaScript
jQuery dirancang untuk mengubah cara menulis

JavaScript
Fitur fitur yang ditawarkan oleh jquery itu sendiri antara
lain :
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities
71
6.2Penggunaan jQuery
Dari fitur-fitur yang ditawarkan oleh jQuery

tersebut pasti banyak orang yang ingin mencoba dan
menerapkan jQuery diwebsitenya. Nah, untuk mencoba
jQuery maka kita perlu mendownload library tersebut di
website jQuery. Untuk langsung mendownload jquery
silahkan buka dihalaman www.jQuery.com/download. Tapi
sebenarnya jika ingin menerapkan jQuery tidak perlu
mendownload juga masih bisa dilakukan karena untuk
mengaktifkan fungsi jquery pada website ada dua yaitu :
Pertama menggunakan script seperti ini :

<script src="js/jquery-1.5.1.min.js"></script>
Script diatas adalah script untuk mengaktifkan fungsi

jquery pada sebuah website dengan mengambil file .js
dari jquery itu sendiri pada hosting yang kita gunakan,
jadi cara ini mengharuskan kita untuk mendownload
terlebih dahulu jquery kemudian menguploadnya pada
sebuah hosting lalu pada akhirnya dipanggil pada file
html guna mengaktifkan file .js yang berisi javascipt
library dari jquery tersebut di website kita. Apabila
terdapat update pada jquery maka kita diharuskan untuk
mendownload dan mengupload ulang file jquery tadi.
Pada versi download ini juga terdapat dua versi, yaitu
versi pertama dengan size yang besar sekitar 212 kb dan
versi kedua adalah versi ringkas hanya 84 kb.
Perbedaanya adalah jika yang mempunyai size besar
terdapat enter dan spasi antar script satu dengan lainnya
jadi lebih mudah untuk mempelajarinya taua bahkan
72
mengeditnya namun jika yang bersize kecil tidak terdapat
spasi dan enter sama sekali sehingga mustahil untuk
mempelajarinya apalagi mencoba untuk mengeditnya.
Kedua menggunakan script seperti ini :
<script
src="http://ajax.googleapis.com/ajax/libs/jqu
ery/1.11.2/jquery.min.js"></script>
Script diatas adalah cara memanggil fungsi jquery yang

lebih simpel. Kita tidak perlu untuk mendownload dan
mengupload file jquery pada hosting melainkan
menggunakan sebuah link dimana file jquery tersebut
berada yang sudah disediakan oleh perusahaan
javascript library jquery ini. Kelebihannya tentu apabila
terdapat update pada jquery maka kita akan otomatis
mendapatkan update tersebut.
Jika kita sudah mengaktifkan fungsi jquery pada

website maka tidak ada salahnya untuk mencoba
mengetes apakah sudah aktif atau belum dengan script
sederhana untuk menampilkan text menggunakan jquery.
Berikut caranya :
<html>
<head>
<title>Tes jQuery</title>
<script type="text/javascript" src="js/jquery-
1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#indo").text("Tulisan ini dari jQuery
... !");
});
</script>
</head>
<body> 73
<div id="info></div>
</body>
</html>
Apabila dibrowser sudah muncul tulisan dibawah maka
bisa dipastikan bahwa pemanggilan fungsi jQuery telah
berhasil :
Penulisan pada jquery selalu diawali dengan kata

jQuery lalu diikuti dengan fungsi selanjutnya jadi bisa
terlihat seperti jQuery(*) namun karena penulisan
tersebut sedikit panjang karena harus menuliskan tulisan
jQuery berkali-kali maka dibuat singkata untuk tulisan
jQuery menjadi simbol $ jadi penulisan jquery jadi terlihat
seperti $(*).
Salah satu sebab dari banyaknya pengguna dari

jQuery ini adalah karena di java library tipe satu ini
menyediakan banyak library yang bisa digunakan untuk
membuat halaman web walaupun juga ada beberapa
javascript library yang juga membunyai fungsi yang bisa
digunakan untuk membuat halaman web tapi karena
jQuery karena supportnya yang lebih ramai dan
dokumentasinya jauh lebih lengkap daripada javascript
library lain yang dapat membuat kemudahan dalam
menghadapi suatu kasus dalam pembuatan suatu
website.
74
Sama seperti CSS, di jQuery juga terdapat selector
untuk memanggil fungsi-fungsi yang terdapat didalam
jQuery itu sendiri. Sebenarnya tidak ada perbedaan
selector antara CSS dan jQuery namun ada sedikit
tambahan jika di CSS apabila ingin menambahkan style
pada salah satu class elemen HTML maka cukup
mendifinisikan style dengan tanda titik ditambah dengan
nama classnya begitu pula dengan jQuery, misal ingin
memasukkan selector untuk elemen body dan
memberikan perintah agar background halaman website
menjadi biru maka akan perlu kode seperti di bawah ini :
<script type="text/javascript">
$('body').css('background', 'blue');
});
</script>
75
Fungsi berikutnya adalah mmebuat menu dropdown,
kodenya seperti dibawah ini :
<select name=cities>
<option value=1>Tel-Aviv</option>
<option value=2 selected=selected>Yavne</option>
<option value=3>Raanana</option>
</select>
Terdapat sangat banyak macam perintah atau

fungsi pada jQuery itu sendiri, tidak memungkinkan
untuk dibahas dalam sebuah ocehan kecil seperti ini,
disini hanya dijelaskan mengenai cara menuliskan jQuery
dan fungsi secara songkatnya saja. Maka untuk
mempelajari jQuery lebih lanjut dapat membuka situs
resmi dari jQuery itu sendiri di www.jQuery.com.
76
7th Ocehan
Pembahasan Tentang PHP
Mengenai apa itu PHP (Personal Home Page) dan
penjelasan tentang kegunaannya secara singkat
77
7.1Pengertian PHP
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.
Pada awalnya PHP merupakan kependekan dari
Personal Home Page (Situs personal). PHP pertama kali
dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu
itu PHP masih bernama Form Interpreted (FI), yang
wujudnya berupa sekumpulan skrip yang digunakan
untuk mengolah data formulir dari web. Selanjutnya
Rasmus merilis kode sumber tersebut untuk umum dan
menamakannya PHP/FI. Dengan perilisan kode sumber ini
menjadi sumber terbuka, maka banyak pemrogram yang
tertarik untuk ikut mengembangkan PHP.
Pada November 1997, dirilis PHP/FI 2.0. Pada rilis
ini, interpreter PHP sudah diimplementasikan dalam
program C. Dalam rilis ini disertakan juga modul-modul
ekstensi yang meningkatkan kemampuan PHP/FI secara
signifikan. Pada tahun 1997, sebuah perusahaan
bernama Zend menulis ulang interpreter PHP menjadi
lebih bersih, lebih baik, dan lebih cepat. Kemudian pada
Juni 1998, perusahaan tersebut merilis interpreter baru
untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0
dan singkatan PHP diubah menjadi akronim berulang
PHP: Hypertext Preprocessing.
Pada pertengahan tahun 1999, Zend merilis
interpreter PHP baru dan rilis tersebut dikenal dengan
PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak
dipakai pada awal abad ke-21. Versi ini banyak dipakai
disebabkan kemampuannya untuk membangun aplikasi
78
web kompleks tetapi tetap memiliki kecepatan dan
stabilitas yang tinggi.
Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi
ini, inti dari interpreter PHP mengalami perubahan besar.
Versi ini juga memasukkan model pemrograman
berorientasi objek ke dalam PHP untuk menjawab
perkembangan bahasa pemrograman ke arah paradigma
berorientasi objek. Versi terbaru dari bahasa
pemograman PHP adalah versi 5.6.4 yang resmi dirilis
pada tanggal 18 Desember 2014.
7.2Kegunaan Dari PHP
Dalam pemanfaatannya dalam dunia web PHP

banyak dimanfaatkan sebagai otak dari satu website
tersebut yang biasa digunakan untuk mengirimkan data
dari website ke database menggunakan aplikasi web.
Aplikasi merupakan program atau grup program yang
didesain untuk digunakan oleh end user (pengguna). Jika
interaksi pengguna menggunakan sebuah web browser,
maka disebut sebagai web-based atau web-application
tapi jika aplikasi web tersebut membutuhkan
penyimpanan informasi database dengan jangka waktu
lama, maka disebut web database application yang terdiri
dari 2 bagian, yaitu:
7.2.1 Database
Memori jangka panjang dari aplikasi tersebut

dimana aplikasi tersebut tidak dapat berjalan tanpa
adanya database.
7.2.2 Application
79
Merupakan bagian dari program yang membentuk
sebuah fungsi/tugas. Program membuat tampilan yang
bisa dilihat melalui browser. Aplikasi secara interaktif
dapat menerima dan memproses informasi yang
diaktifkan oleh pengguna melalui browser kemudian
menyimpannya dalam database
Terdapat dua macam tipe halaman website yang
pertama adalah halaman web statis. Halaman web yang
dibuat dengan single-html disebut STATIS, pengguna
tidak dapat berinteraksi dengan halaman web. Semua
orang melihat halaman web yang sama. Halaman web
yang dibuat dengan single-html disebut STATIS,
pengguna tidak dapat berinteraksi dengan halaman web.
Semua orang melihat halaman web yang sama. Yang
kedua adalah halaman web dinamis, Dinamik merupakan
halaman web dimana pengguna dapat berinteraksi
dengan fungsi-fungsi yang ada. Setiap pengguna bisa
melihat halaman yang berbeda-beda tampilannya. Untuk
membuat web dinamik digunakan bahasa pemograman
lain yang ditambahkan dalam format html.
Berbeda halnya dengan HTML yang dapat dengan
mudah dilihat source code HTML suatu website
menggunakan fungsi view source pada web browser,
apabila PHP terdapat dalam suatu website maka tidak
akan bisa dilihat source codenya oleh web browser. Jadi
PHP adalah semacam script yang sudah dijalankan oleh
browser dari komputer server ke komputer client secara
diam-diam. Silahkan lihat gambar dibawah ini supaya
lebih jelasnya mengenai gambaran proses dari PHP dari
komputer server ke komputer client yang diterjemahkan
oleh web browser.
80
81
Sama seperti pemrograman lain seperti C++,
dalam php juga terdapat variables, constants, operators.
Yang dimana Variables adalah nilai yang disimpan dalam
memory komputer, Variables berupa nilai/data
diklasifikasikan dalam tipe-tipe data, Nama yang
diberikan pada variable disebut identifier. Penulisan
variabel pada PHP diawali dengan tanda $ kemudian
dilanjutkan dengan nama variabelnya, assign atau
pemberian nilai pada variable menggunakan operator
= sebagai Contoh: $nama = Torrento, penulisan
variabel tidak boleh diawali angka, tidak perlu
didefiniskan (inisiasi) sebelumnya, variabel di PHP
termasuk Case-sensitive comtoh: $name and $Name
berbeda. Variables bisa berubah nilainya, Integers dapat
berubah menjadi floats dan menjadi strings
Tipe variable di PHP :
Boolean // TRUE / FALSE

Integer // -3 , 0 , 4
Float // 5.6 , 5.75
String // ini teks
Array // $hari[4] , $matriks[5][7]
Object // $mobil->roda
Resource // Resource #4
NULL
Dalam PHP juga terdapat variabel array dan juga variabel

array yang sudah didefinisikan oleh fungsi PHP itu sendiri,
berikut contoh variabel yang berdasarkan letaknya :
$_COOKIE
$_SESSION
$_ENV
82
$_FILES
$_GET
$_POST
$_REQUEST
$_SERVER
Selain variabel yang bisa berubah-ubah nilainya,

dalam PHP juga terdapat variabel konstan yang dimana
nilai dalam variabel tersebut tidak dapat berubah-ubah.
Nama Constant tidak diawali dolar ($), Nama Constant
menggunakan huruf kapital, Menggunakan define() untuk
membuat constant contohnya :
define("CONSTANT_NAME", value), Nilai yang bisa
dimasukkan pada function define() adalah text string,
number, atau Boolean value.
Selain itu juga sama seperti pemrograman lainnya, dalam
PHP juga terdapat fungsi-fungsi operasi seperti contoh
dibawah ini:
Assignment (=) dan combined assignment
$a = 3;
$a += 5; // sets $a to 8;
$b = "Hello ";
$b .= "There!"; // sets $b to "Hello There!";
Bitwise (&, |, ^, ~, <<, >>)
Pada suatu pengoprasian dalam PHP tentu

dibutuhkan suatu nilai berupa angka yang dimasukkan
dalam variabel. Tentunya terdapat aturan untuk
menuliskan suatu nilai berupa angka dalam satu variabel,
untuk variabel integer berisi nilai positive, negative dan 0
(-250, 2, 100, 10,000), untuk floating-point number berisi
83
decimal notasi exponential (-6.16, 3.17, 2.7541), dan
untuk Exponential notation / scientific notation, penulisan
decimal yang terlalu panjang contoh : 2.3e11 sama dgn
2.3 x 10
Dalam PHP juga terdapat tipe data Boolean, yaitu
tipe data yang menunjukkan benar atau salah agar dapat
menjalankan suatu fungsi atau tidak. Boolean value =
TRUE or FALSE, Hasil compare data, Dalam PHP
programming, langsung menggunakan TRUE atau FALSE
kalau dalam pemrograman lain menggunakan 1 = TRUE,
0 = FALSE. Selanjutnya ada decision making yang dapat
mengevaluasi fungsi tipe data boolean. Decision making
mengevaluasi Boolean expressions (true / false),
if($lapar) { /* makan*/ }, TRUE and FALSE are
reserved words, Inisialisasi $valid = false;, Compare with
==, AND dan OR untuk menyeleksi 2 kondidi atau lebih
Contoh : if ($lapar AND $bokek) {/* puasa */}
Fungsi yang cukup penting dalam suatu program adalah
fungsi if else, yaitu fungsi yang dapat digunakan untuk
memberikan perinta suatu baris perintah jalan atau tidak.
Fungsi if pada PHP merupakan kumpulan blok program
diapit tanda kurung kurawal (bracket) brace { dan
closing brace } Contoh :
if ($a < $b) {

echo $a is less than $b;
}
else {
echo $b is less than $a;
}
Dalam implementasinya dalam dunia web desain

tidak sedikit yang memanfaatkan PHP untuk
84
menampilkan jam di suatu halaman web. Untuk contoh
perhatikan source code berikut :
<html>
<body>
<?php
echo "Today is " . date("Y/m/d") .
"<br>";
echo "Today is " . date("Y.m.d") .
"<br>";
echo "Today is " . date("Y-m-d") .
"<br>";
echo "Today is " . date("l");
?>
</body>
</html>
Yang nantinya akan mempunyai tampilan seperti :
Demikian ocehan tentang penjelasan secara

singkat mengenai PHP, untuk melihat tentang source
code PHP yang lain bisa menuju ke
www.w3schools.com/php karena sangat tidak mungkin
apabila harus dijabarkan pada ocehan ini semua. Di
ocehan selanjutnya akan membahas tentang database.
85
86
8th Ocehan
Pembahasan Tentang
Database
Mengenai kegunaan database dalam sebuah website dan
cara pengimplementasiannya
87
8.1Pengertian Database
Data adalah suatu nilai/value yang turut

merepresentasikan deskripsi dari suatu objek atau
kejadian (event). Sedangkan Informasi merupakan hasil
dari pengolahan data dalam suatu bentuk yang lebih
berguna dan lebih berarti bagi penerimanya yang
menggambarkan suatu kejadian-kejadian (event) yang
nyata (fact) yang digunakan untuk pengambilan
keputusan. Jadi Sistem Informasi adalah suatu sistem
dalam suatu organisasi yang merupakan kombinasi dari
orang-orang, fasilitas, teknologi, media, prosedur-
prosedur dan pengendalian untuk mendapatkan jalur
komunikasi penting, memproses tipe transaksi rutin
tertentu, memberi sinyal kepada manajemen dan yang
lainnya terhadap kejadian-kejadian internal dan eksternal
yang penting dan menyediakan suatu dasar informasi
untuk pengambilan keputusan.
Sistem informasi samadengan Sistem terotomasi,
terdiri dari beberapa komponen, antara lain :
Hardware : CPU, Disk, terminal, printer.

Software : Sistem Operasi, Sistem Database,
Program Pengontrol Komunikasi,
Program Aplikasi.
Personil : yang mengoperasikan sistem,
menyediakan masukan,
mengkonsumsi keluaran dan
melakukan aktivitas manual,
yang mendukung sistem.
Data : Data yang tersimpan dalam jangka
waktu tertentu.
Prosedur : Instruksi dan kebijakan untuk
88
mengoperasikan sistem.
Pangkalan data atau basis data (bahasa Inggris:
database), atau sering pula dieja basisdata, adalah
kumpulan informasi yang disimpan di dalam komputer
secara sistematik sehingga dapat diperiksa
menggunakan suatu program komputer untuk
memperoleh informasi dari basis data tersebut.
Perangkat lunak yang digunakan untuk mengelola dan
memanggil kueri (query) basis data disebut sistem
manajemen basis data (database management system,
DBMS). Sistem basis data dipelajari dalam ilmu informasi.
Istilah "basis data" berawal dari ilmu komputer.
Meskipun kemudian artinya semakin luas, memasukkan
hal-hal di luar bidang elektronika, artikel ini mengenai
basis data komputer. Catatan yang mirip dengan basis
data sebenarnya sudah ada sebelum revolusi industri
yaitu dalam bentuk buku besar, kuitansi dan kumpulan
data yang berhubungan dengan bisnis.
Konsep dasar dari basis data adalah kumpulan dari
catatan-catatan, atau potongan dari pengetahuan.
Sebuah basis data memiliki penjelasan terstruktur dari
jenis fakta yang tersimpan di dalamnya: penjelasan ini
disebut skema. Skema menggambarkan obyek yang
diwakili suatu basis data, dan hubungan di antara obyek
tersebut. Ada banyak cara untuk mengorganisasi skema,
atau memodelkan struktur basis data: ini dikenal sebagai
model basis data atau model data. Model yang umum
digunakan sekarang adalah model relasional, yang
menurut istilah layman mewakili semua informasi dalam
bentuk tabel-tabel yang saling berhubungan dimana
setiap tabel terdiri dari baris dan kolom (definisi yang
sebenarnya menggunakan terminologi matematika).
89
Dalam model ini, hubungan antar tabel diwakili denga
menggunakan nilai yang sama antar tabel. Model yang
lain seperti model hierarkis dan model jaringan
menggunakan cara yang lebih eksplisit untuk mewakili
hubungan antar tabel.
Istilah basis data mengacu pada koleksi dari data-
data yang saling berhubungan, dan perangkat lunaknya
seharusnya mengacu sebagai sistem manajemen basis
data (database management system/DBMS). Jika
konteksnya sudah jelas, banyak administrator dan
programer menggunakan istilah basis data untuk kedua
arti tersebut.
8.2Bagian-Bagian Dari Database
Berikut adalah gambaran skema dari database :
90
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
8.2.1
Characters
Merupakan bagian data yang terkecil, dapat

berupa karakter numerik, huruf ataupun karakter-
karakter khusus (special characters) yang membentuk
suatu item data / field.
8.2.2 Field
Merepresentasikan suatu atribut dari record yang

menunjukkan suatu item dari data, seperti misalnya
nama, alamat dan lain sebagainya. Kumpulan dari field
91
membentuk suatu record. Field name harus diberi nama
untuk membedakan field yang satu dengan lainnya. field
representation adalah tipe field (karakter, teks, tanggal,
angka, dsb), lebar field (ruang maksimum yang dapat
diisi dengan karakter-karakter data). Field value adalah isi
dari field untuk masing-masing record.
8.2.3 Record
Kumpulan dari field membentuk suatu record.

Record menggambarkan suatu unit data individu yang
tertentu. Kumpulan dari record membentuk suatu table.
Misalnya table mahasiswa, tiap-tiap record dapat
mewakili data tiap-tiap mahasiswa.
8.2.4 Table / File
Table terdiri dari record-record yang

menggambarkan satu kesatuan data yang sejenis.
Misalnya table mata pelajaran berisi data tentang semua
mata pelajaran yang ada. Contohnya:
Database : Buku daftar nomor telpon

Tabel : Teman Kuliah
Field : Nama, NomorRumah,
NomorHP
Type data : Text, Number, Number
Record : Titi Kamal, 8531265, 8564445646
8.3Tahapan perancangan basis data
Perancangan basis data merupakan upaya untuk

membangun sebuah basis data dalam suatu lingkungan
92
bisnis. Untuk membangun sebuah basis data terdapat
tahapan-tahapan yang perlu kita lalui yaitu:
Perencanaan basis data

Mendefinisikan sistem
Analisa dan mengumpulkan kebutuhan
Perancangan basis data
Perancangan aplikasi
Membuat prototipe
Implementasi
Konversi data
Pengujian
Pemeliharaan operasional
8.4Tujuan Pembuatan Database
Pembuatan database atau basis data memiliki

beberapa tujuan, diantaranya adalah sebagai berikut.
Kecepatan dan Kemudahan (Speed)

Dapat menyimpan data atau melakukan
perubahan / manipulasi terhadap data atau
menampilkan kembali data tersebut dengan cepat
& mudah
Effisiensi Ruang Penyimpanan (Space)

Karena adanya keterkaitan yang erat
antarkelompok data dalam database, maka
terjadinya perulangan data (redudancy) tidak
dapat dielakkan. Dengan menggunakan database,
optimalisasi penggunaan ruang penyimpanan
93
dapat ditingkatkan dengan penggunaan kode pada
data atau relasi-relasi tertentu.
Keakuratan (Accuracy)
Pemanfaatan kode atau pembentukan relasi
disertai dengan penggunaan batasan (constraint)
pada tipe data yang digunakan, akan dapat
meningkatkan keakuratan data yang tersimpan.
Ketersediaan (Availability)
Dengan semakin banyaknya data yang tersimpan,
ruang penyimpanan yang digunakan juga butuh
lebih besar, maka untuk mengatasi hal tersebut
data dapat di pisah-pisahkan menurut kebutuhan.
Data yang sudah lama tidak diakses dapat di - off
line kan. Tapi data tersebut sewaktu-waktu dapat
dipergunakan kembali.
Kelengakapan (Completeness)
Kelengkapan suatu data bersifat relatif. Bila
seoarng pemakai menyatakan data tersebut sudah
lengkap belum tentu menurut pengguna yang lain.
Untuk mengatasi hal tersebut, pengguna dapat
menambahkan record-record data juga dapat
merubah struktur dalam database tersebut.
Keamanan (Security)
Untuk melakukan akses pada suatu data tertentu
dapat diterapkan tingkatan-tingakatan dalam
pengamanan data. User dapat dibatasi hak
aksesnya. User dengan tingkat paling rendah
hanya dapat melihat isi data saja, tapi user
94
dengan tingkatan lebih tinggi dapat melakukan hal
lain.
Kebersamaan Pemakaian (Sharability)

Data pada suatu database dapat dipergunakan
secara bersama. Database yang dibangun dengan
software yang mendukung penggunaan bersama
dapat mendukung sistem ini, tetapi tetap menjaga
supaya database tidak menjadi deadlock.
Selain ketujuh tujuan diatas, yang terpenting dengan

adanya database adalah konsistensi data.
95
8.5Cara Penggunaan Database di Website
Seperti yang dibahas di ocehan sebelumnya,

penerapan database pada suatu website diperlukan
sebuah fungsi PHP yang dituliskan di web tersebut. Awal
mula yang harus dilakukan untuk menerapkan database
pada suatu website adalah dengan membuat koneksi
antara web ke database, caranya adalah sebagai berikut :
<?php
$servername = "localhost";
$username = "username";
$password = "password";
// Create connection
$conn = new mysqli($servername, $username,
$password);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn-
>connect_error);
}
echo "Connected successfully";
?>
96
yang perlu dilakukan pada skrip PHP diatas adalah
mengganti servername, username, dan password
menjadi sesuai dengan database yang ingin
dikoneksikan. Setelah koneksi berhasil salah satu fungsi
yang paling sering dipakai adalah membuat fungsi untuk
menginputkan apa yang didapat di web kemudian
dimasukkan ke database, perhatikan skrip berikut :
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password,
$dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO MyGuests (firstname, lastname, email)

VALUES ('John', 'Doe', 'john@example.com')";
if ($conn->query($sql) === TRUE) {

echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
Banyak fungsi dalam PHP yang digunakan untuk

menerapkan database dalam sebuah website tapi
97
diocehan ini hanya dibahas yang paling penting yaitu
mengkoneksikan dan menginputkan data sehingga
ocehan tentang database dirasa cukup dan akan
dilanjutkan oleh ocehan berikutnya yang membahas
tentang AJAX.
9th Ocehan
Pengenalan Tentang AJaX
Mengenai apa itu AJaX dan seluk-beluknya
98
9.1Pengertian AJaX
Asynchronous JavaScript and XMLHTTP, atau

disingkat AJaX, adalah suatu teknik pemrograman
berbasis web untuk menciptakan aplikasi web interaktif.
Tujuannya adalah untuk memindahkan sebagian besar
interaksi pada komputer web surfer, melakukan
pertukaran data dengan server di belakang layar,
sehingga halaman web tidak harus dibaca ulang secara
keseluruhan setiap kali seorang pengguna melakukan
perubahan. Hal ini akan meningkatkan interaktivitas,
kecepatan, dan usability. Ajax merupakan kombinasi
dari :
DOM yang diakses dengan client side scripting

language, seperti VBScript dan implementasi
ECMAScript seperti JavaScript dan JScript, untuk
menampilkan secara dinamis dan berinteraksi
dengan informasi yang ditampilkan
Objek XMLHTTP dari Microsoft atau
XMLHttpRequest yang lebih umum di
implementasikan pada beberapa browser. Objek
ini berguna sebagai kendaraan pertukaran data
asinkronus dengan web server. Pada beberapa
framework AJAX, element HTML IFrame lebih
dipilih daripada XMLHTTP atau XMLHttpRequest
untuk melakukan pertukaran data dengan web
server.
XML umumnya digunakan sebagai dokumen
transfer, walaupun format lain juga
memungkinkan, seperti HTML, plain text. XML
dianjurkan dalam pemakaian teknik AJaX karena
kemudahan akses penanganannya dengan
memakai DOM
99
JSON dapat menjadi pilihan alternatif sebagai
dokumen transfer, mengingat JSON adalah
JavaScript itu sendiri sehingga penanganannya
lebih mudah
Seperti halnya DHTML, LAMP, atau SPA, Ajax bukanlah
teknologi spesifik, melainkan merupakan gabungan dari
teknologi yang dipakai bersamaan. Bahkan, teknologi
turunan/komposit yang berdasarkan Ajax, seperti AFLAX
sudah mulai bermunculan.
Ajax merupakan suatu teknik / metode pengambilan
data dari server menggunakan sebuah fungsi dalam
javascript yaitu :
XMLHttpRequest (XHR)
XMLHttpRequest (XHR) merupakan object yang
dirancang untuk memungkinkan permintaan layanan ke
HTTP server secara asinkron. Asinkron berarti client bisa
meminta layanan dari server setiap saat dan tidak perlu
menunggu server melayaninya seluruh halaman. Berikut
adalah skema perbedaan tanpa menggunakan ajax dan
menggunakan ajax.
100
101
9.2Penggunaan AJaX
Berikut adalah source code contoh penggunaan AjaX :
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3
/jquery.min.js"></script>
<script>
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This

Text</h2></div>
<button>Get External
Berikut terdapat tabelContent</button>
tentang fungsi atau metode pada
AJaX :
</body>
</html>
102
Sekian mengenai ocehan tentang AJaX. Ocehan
selanjutnya akan membahas tentang pembuatan web
yang dapat dibuka di layar kecil atau smartphone dan
layar besar atau PC dengan memanfaatkan CSS yang
biasa disebut dengan responsive web.
103
10th Ocehan
Pembuatan Web Responsive
Mengenai apa itu Responsive Web dan bagaimana cara
membuat web yang tampilannya dapat menyesuaikan
ukuran layar
104
10.1 Pengenalan Web Responsive
Saat membuat desain web dari materi materi

yang sebelumnya telah dibahas yang perlu diperhatikan
adalah siapa pengguna dari web yang nantinya telah jadi
tersebut. Tentu di jaman yang serba gadget ini tidak
sedikit orang yang membuka halaman web lewat
smartphone mereka bahkan ada beberapa orang yang
justru malas untuk membuka lewat pc atau laptop. Oleh
karena itu desain web dibutuhkan dua versi, versi mobile
dan versi desktop agar dapat memudahkan pengguna
untuk melihat halaman web tersebut baik dari layar kecil
seukuran smartphone ataupun layar standart seukuran
laptop. Tapi apakah perlu untuk mendesain web dua kali
untuk mendapatkan tampilan desktop dan tampilan
mobile ? tentu tidak dengan css semua tersebut dapat
dilakukan hanya dengan sekali kerja saja yaitu dengan
cara membuat desain web kita menjadi responsif dengan
memanfaatkan fitur dari css. Mari kita bahas lebih
lengkap tentang responsif web desain dibawah ini
Istilah responsive berkaitan dengan bagaimana
browser merespon lingkungan sekitarnya. Dalam kaitan
ini respon browser terhadap perangkat apa atau layar
ukuran berapa yang membuka halaman web tertentu.
Desain responsive berkaitan bagaimana website
dikembangkan menyesuaikan dengan lingkunagn
pengaksesnya (browser, piranti atau ukuran layar).
Pendekatan desain responsive akan membuat layout
website mudah diadaptasi menggunakan grid yang
fleksibel, konten yang fleksibel (image, teks, video) serta
query media CSS3.
105
Desain responsive akan menghindari unit yang fix
seperti pixel, dan menggunakan unit yang relatif seperti
prosentase. Artinya lebar dari beberapa bagian dari
website merupakan prosentase dari viewport. Jadi yang
dimaksud desain responsive adalah : Bahwa semua
display harus menerima konten yang sama, namun
dibangun dengan fleksibel, sehingga mengoptimalkan
tampilan untuk tiap piranti. Contoh web desain
responsive adalah www.headlondon.com
Viewport adalah tampilan dimana website terlihat
sebelum HTML5 dan CSS3, umumnya website dilihat
dalam ukuran browser. Misal saat full screen ukuran 1024
x 800 px dan ketika itu website ukuran fix 960 px hingga
980 px. Sehingga untuk ukuran piranti mobile terlalu
lebar. Solusinya mengeset viewport lebih lebar dari
piranti sehingga website akan di skala menjadi lebih kecil
dan perlu zoom untuk melihat lebih detail. Viewport diset
melalui meta tag
Breakpoint di desain responsive adalah nilai lebar,
dimana website akan mengubah layout berdasarkan
deklarasi media query. Umumnya web responsive
memiliki dua atau lebih breakpoint tergantung kepada
breakpoint yang ditujukan untuk piranti tertentu.
Piranti sangat kecil, misal telepon (<768 px)

Piranti kecil, misal tablet (768 992 px)
Piranti medium, misal netbook (992 1200 px)
Piranti besar, misal komputer desktop (> 1200 px)
Sistem grid adalah struktur layout website. Terdiri

dari baris horisontal dan kolom vertikal untuk
106
menampung konten yang bisa menjangkau satu kolom
atau lebih. Contoh Grid CSS open source:
Fulidable (http://fluidable.com/)
CSS Smart Grid (http://dryan.github.io/css-smart-
grid/)
960 GS (http://960.gs/)
CSS Wizardry (http://csswizardry.com/csswizardry-
grids/)
Blueprint (http://blueprintcss.org/)
Gambar dibawah ini merupakan salah satu contoh

struktur grid.
107
10.2 Bootstrap Untuk Membuat Responsive Web
Bootstrap terdiri dari HTML dan CSS untuk

menghasilkan Grid, Layout, Typography, Table, Form,
Navigation, dan lain-lain. Bootstrap juga sudah terdapat
jQuery plugins untuk komponen UI (User Interface)
seperti Transitions, Modal, Dropdown, Scrollspy, Tooltip,
Tab, Popover, Alert, Button, Carousel dll. Template Dasar:
<html>
<head>
<title>Template HTML</title>
</head>
<body>
Halo Dunia
</body>
</html>
108
109
Template Dasar Bootstrap :
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">

<link href="css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
Halo Bootstrap
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/
1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Template Dasar Bootstrap dengan Responsive :
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">

<link href="css/bootstrap.min.css"
rel="stylesheet">

<link href="css/bootstrap-responsive.min.css"
rel="stylesheet">
</head>
<body>
Halo Bootstrap
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.
1/jquery.min.js"></script>
110
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Fungsi dari bootstrap sendiri yang paling dibutuhkan
dalam membuat responsive web adalah pembuatan
navigation bar yang responsive, simak source code
berikut untuk mengetahui :
<html>
<head>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/boot
strap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jque
ry.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootst
rap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Basic Navbar Example</h3>
111
<p>A navigation bar is a navigation header that is placed
at the top of the page.</p>
</div>
</body>
</html>
Hasil jadinya akan nampak seperti dibawah ini apabila
dibuka di layar laptop standart :
Dan akan terlihat seperti ini jika dilihat menggunakan

layar yang jauh lebih kecil :
112
Demikian ocehan terakhir pemrograman web yang
berakhir pada pembahasan tentang responsive web,
berharap dapat bermanfaat dalam pembuatan suatu
website bagi siapapun yang membacanya.
113
DAFTAR PUSTAKA
Andre. 2016. Index Tutorial Belajar MySql Duniailkom.

http://www.duniailkom.com/tutorial-belajar-mysql-
dan-index-artikel-mysql/ (diakses pada tanggal: 27
Oktober 2016).
Andre. 2016. Index Tutorial Belajar PHP Duniailkom.

http://www.duniailkom.com/tutorial-belajar-php-dan-
index-artikel-php/ (diakses pada tanggal: 22 Oktober
2016).
Bisma, Rahadian. 2016. CSS [PowerPoint Slides].

http://192.168.10.8/mi15/materikuliah/internet-
pemprograman/css.html (diakses pada tanggal: 8
September 2016).
Bisma, Rahadian. 2016. HTML [PowerPoint Slides].

pemprograman/html.html (diakses pada tanggal: 1
September 2016).
Bisma, Rahadian. 2016. JavaScript [PowerPoint Slides].

pemprograman/js.html (diakses pada tanggal: 8
September 2016).
Kurniawan, Ari. 2015. JavaScript Library / Framework

[PowerPoint Slides].
114
pemprograman/jquery.pptx (diakses pada tanggal: 3
Oktober 2016).
w3schools.com. Tanpa Tahun. Bootstrap 3 Tutorial.

http://www.w3schools.com/bootstrap (diakses pada
tanggal: 31 Oktober 2016).
w3schools.com. Tanpa Tahun. CSS Tutorial.

http://www.w3schools.com/css (diakses pada tanggal:
7 Oktober 2016).
w3schools.com. Tanpa Tahun. HTML Responsive Web

Design.
http://www.w3schools.com/html/html_responsive.asp
(diakses pada tanggal: 2 November 2016).
w3schools.com. Tanpa Tahun. HTML5 Tutorial.

http://www.w3schools.com/html (diakses pada
w3schools.com. Tanpa Tahun. JavaScript Tutorial.

http://www.w3schools.com/js (diakses pada tanggal:
14 Oktober 2016).
w3schools.com. Tanpa Tahun. jQuery Tutorial.

http://www.w3schools.com/jquery (diakses pada
w3schools.com. Tanpa Tahun. PHP 5 Tutorial.

http://www.w3schools.com/php (diakses pada
115
w3schools.com. Tanpa Tahun. SQL Tutorial.
http://www.w3schools.com/sql (diakses pada tanggal:
24 Oktober 2016).
116
TENTANG PENULIS
iqy Ainuzzaqy.
F
Lahir di Surabaya 15 Oktober
1997. Menyelesaikan Sekolah
Dasar di SD Hang Tuah 10 Juanda,
SMP di SMPN 1 Sedati, SMA di
SMAN 1 Gedangan, dan sekarang berkuliah di
UNIVERSITAS NEGERI SURABAYA Jurusan Teknik
Informatika, Program Studi D3 Manajemen Informatika.
Buku ini terselesaikan untuk memenuhi Tugas Akhir

mata kuliah Pemrograman Web dari Rahadian Bisma,
S.Kom.,M.Kom. Buku yang ditulis ini merupakan buku
pertama kali yang ditulis oleh penulis sehingga ada
tantangan dan pengalaman baru bagi penulis.
117
Semoga buku ini menajdi bahan referensi bagi anda
yang membaca dan semoga bermanfaat. Selamat
Membaca.
118

Buku Pemrograman Web FQ

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Buku Pemrograman Web FQ

Diunggah oleh

Hak Cipta:

Format Tersedia

1

Ocehan Programmer Web

Penulis : Fiqy Ainuzzaqy

Diterbitkan pertama kali oleh Rabbit Media,

Semua source code dalam buku ini beserta

Dengan menyebut nama Allah SWT yang Maha

1.1 Pengenalan Umum HTML

Dapat ditulis dalam sintaks HTML (dengan tipe

Karena tergolong baru, sangat memungkinkan

1.3Template Dasar HTML5

Demikian penjelasan tentang HTML secara umum,

2.1Software Desain Web

fiqyainuzzaqy@mhs.unesa.ac.id. Berikut adalah kelebihan

Bgcolor, background, text, link, vlink, alink dan

2.2.1 Tag Text Format

NB: tag <tt> atau teletype berfungsi untuk mengubah

NB: tag <abbr> dan <acronym> berfungsi untuk

Untuk menampilkan teks dengan simbol-simbol khusus

2.2.2 Tag Lists

2.2.3 Tag Table

2.2.4 Tag Penyisipan

Tag penyisipan merupakan tag yang berfungsi

<img src="unesa-3.jpg" width="45%"><!--jika file

<br><video src="Closer.mp4" controls="controls"

2.2.5 Tag Form

mengirimkan/mengambil data publik seperti id_user atau

2.2.11 Dalam halaman web sealu ada

2.3.1 Meta Tag Title

Meta tag yang menyatakan identitas atau

Kalian dapat memodifikasi kode meta tag title agar judul

2.3.2 Meta Tag Descriptsi

Meta tag yang berfungsi untuk

<meta content='My Experience Is My Inspiration'

2.3.3 Meta Tag Keywords

Meta tag yang berisi keywords (kata kunci)

2.3.4 Meta Tag Verifikasi

Meta tag yang dipasang pada template

Kode - kode meta tag verifikasi tersebut

Membantu robot google dalam mengindeks

Spider bot search engine lebih mudah

Selain itu meta tag juga mempunyau beragam manfaat

Membuat blog Anda menjadi ramai visitor atau

Dari ocehan sebelumnya yang sudah membahas

3.1Penjelasan Umum Tentang CSS

CSS (Cascading Style Sheets) merupakan

CSS menghilangkan atribut presentasi dari

HTML tidak pernah dimaksudkan untuk menjadi

Dalam CSS ada yang namanya cascade, apa itu

Kekuatan CSS ditemukan dalam "cascade" yang

3.2.2 Embedded/Internal Style Sheets

3.2.3 External Style Sheets

Dalam file css ini terdapat dua macam

lebih dari 1 (seperti pada contoh selector

3.3Jenis-Jenis Selector Dasar CSS

Selector class dituliskan dengan ditandai dengan

Pada bagian dokumen web, misalnya akan

Pada bagian dokumen HTML, untuk menggunakan

3.3.5 Attribute Selector

Atribut Selector ini digunakan untuk mencari seluruh tag

3.4Macam Macam Code CSS

Demikian tentang pengenalan mengenai

Part ini adalah lanjutan dari ocehan

4.2Pembahasan Tentang Tips dan Penerapan CSS