Materi Pembelajaran Web Design Dan Programming

Materi Pembelajaran Web Design Dan Programming
Konsep Dasar Web Design:

Perencanaan Website
Typografi, Pewarnaan, LayOut / Tata Letak
==================================================================
HTML
Teks & Dasar Tag HTML:
<html>
<head>
<!-- Bagian Head --!>
<title></title>
</head>
<body>
<!-- Bagian Body --!>
</body>
</html>
Jenis Dokumen
Judul
Header
Batang Tubuh
<html></html>
<title></title>
<head></head>
<body></body>
Heading
o tag <hr
align
color
size
width
noshad
(terdapat pada awal dan akhir dari file HTML)

(untuk mendefinisikan judul dokument)
(keterangan umum, seperti judul dsb.)
(isi dari halaman HTML)
/> untuk membuat garis pembatas horizontal

Menentukan letak garis : center,left,right
Menentukan warna garis
Menentukan ukuran garis
Menentukan tebal garis
Efek bayangan.
Paragraf
o Tag-tag Pemformatan
Tag Awal
Tag Akhir
<b>
</b>
<big>
</big>
<em>
</em>
<i>
</i>
<small>
</small>
<strong>
</strong>
<sub>
</sub>
<sup>
</sup>
<pre>
</pre>
<blockquote> </blockquote>
Keterangan
Mendefinisikan teks yang ditebalkan
Mendefinisikan teks yang besar ukurannya
Mendefinisikan teks yang ditekankan (miring)
Mendefinisikan teks yang dimiringkan italic
Mendefinisikan teks yang dikecilkan ukurannya
Mendefinisikan teks yang ditebalkan
Mendefinisikan teks yang dijaikan subscript
Mendefinisikan teks yang superscript
Mendefinisikan teks preformatted
Mendefinisikan quotation yang panjang (awal paragraph)
Font
o
o
o
Size
Color
Face
: menentukan ukuran font

: menentukan warna font
: menentukan jenis font
<font size=?></font>
<font color="#$$$$$$"></font>
<font face="***"></font>
Table:
<table>
<th>
<tr>
<td>
<caption>
<colgroup>
<col>
<thead>
<tbody>
<tfoot>
Mendefinisikan tabel
Mendefinisikan header tabel
Mendefinisikan baris tabel
Mendefinisikan cell tabel
Mendefinisikan caption tabel
Mendefinisikan group kolom tabel
Mendefinisikan atribut nilai jumlah kolom tabel
Mendefinisikan head tabel
Mendefinisikan body tabel
Mendefinisikan footer tabel
Create Table
<table border=1 cellpadding=3 cellspacing=3 align=center>
<tr bgcolor=silver>
<td align=center>NIM</td>
<td align=center>NAMA LENGKAP</td>
</tr>
<tr>
<td>13101025</td>
<td>Sulastra Rahayu</td>
</tr>
</table>
Table Properties
border
rows
column
table width
border thickness
cellspacing
cellpadding
align
valign
bgcolor
rowspan
colspan
width
height
:
:
:
:
:
:
:
:
:
:
:
:
:
:
akan memberikan garis pembatas pada tabel.

jumlah baris
jumlah kolom
lebar tabel
tebal border
akan menset jarak dalam piksel antara batas dalam dan batas luar.
akan menset jarak dalam piksel antara batas dalam dan teksnya.
penjajaran rata kanan, kiri atau tengah.
vertical align baseline | top | bottom | middle
akan memberikan efek warna pada tabel.
untuk menset jumlah baris ke bawah.
untuk menset jumlah kolom ke kanan.
untuk menset batas lebar / panjang tabel.
untuk menset batas tinggi tabel.
LayOut with Table

Image:
width
height
src
alt
class
map
vspace
hspace
border
align
lebar image
tinggi image
sumber / letak image
untuk memberikan judul pada gambar /adalah deskripsi gambar jika kursor di tempat gambar
pilih Class jika menggunakan definisi CSS
jika image digunakan sebagai link
jarak image dari tulisan atasnya
jarak image dari tulisan disampingnya
tebal bingkai image
letak posisi image Right | Left | Center
Jenis File Image

Inserting Images
<img
src="jpg/house1.jpg"
align="left">
width="114"
height="62"
hspace="10"
vspace="5"
Resizing Images
Text & Image
<p>Sebuah gambar<img src="jpg/bunga1.jpg" width="103" height="77" align="bottom">
di tengah teks dengan atribut align = top</p>
Create Image Map

<img
src="planets.gif"
width="145"
height="126"
alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area
shape="poly"
coords=145,83,138,12,128,84
alt="Venus"
href="venus.htm">
</map>
rect (Persegi empat)
poly (Lebih dari tiga sudut)
circle (Lingkaran)
point
coords=x1,y1,x2,y2
coords=x1,y1,x2,y2,x3,y3.xn,yn
coords=x,y,r
coords=x,y
x1,y1 : sudut kiri atas, x2,y2 : sudut kanan bawah

x1(145),y1(83),x2(138),y2(12),x3(128),y3(84)
x,y : titik pusat lingkaran tersebut, r : jari-jari
daerah berupa satu titik, dengan kordinat x,y
Hyperlinks:
<a href="http://www.google.com">Link ke www.google.com </a>
href
target
style
class
name
id
title
rel
URL/ Halaman web

untuk, membuat link, yang apabila di klik akan terbuka di tab baru (_blank, _self, _top)
untuk memberi style pada link
Nama bagian - Digunakan untuk link dalam satu dokumen web
untuk memberikan judul pada link
menunjukan hubungan link yang dituju dan berfungsi untuk memberikan informasi dari sebuah link
terhadap search engine.
Link Relatif (Membuat Link Dari Satu Page ke Page Lainnya)

<a href="biodata.html">Biodata</a>
Link Absolut (Membuat Link ke Page Web Lain Yang Berada di Internet)
<a href="http://www.google.com" >Link ke google</a>
Link ke Bagian Lain Dalam Dokumen Yang Sama

<a href="#isibab1">1. Bab 1</a>
<a name="isibab1">Bab1</a>
Mail to
<a href="mailto:info@eepis-its.edu">info@eepis-its.edu </a>
Active Elements:
Marquee
<marquee behavior=alternate direction=up>Universitas Narotama Surabaya</marquee>
1. behavior
: Untuk mengatur gaya gerakan pada gambar ataupun teks.
o alternate
:Untuk menggerakan gambar atau teks secara bolak-balik.
o slide
: Untuk menggerakan gambar atau teks berjalan ke satu arah sekali saja.
o scroll
: Untuk menggerakan gambar atau teks ke satu arah secara Continue.
2. direction
: Untuk mengatur arah gerakan gambar ataupun teks.
o up
: Untuk menggerakan suatu object bergerak keatas.
o down
: Untuk menggerakan suatu object bergerak kebawah.
o left
: Untuk menggerakan suatu object bergerak kekiri.
o right
: Untuk menggerakan suatu object bergerak kekanan.
3. face
: Untuk mengatur jenis font / teks seperti.
4. width
: Untuk mengatur ukuran panjang atau lebar ruangan gambar/teks dalam satuan pixel.
5. height
: Untuk mengatur ukuran Tinggi ruangan gambar/teks dalam satuan pixel.
6. bgcolor
: Untuk mengatur warna background.
7. scrolldelay
: Untuk mengatur ukuran waktu tunda gerakan dalam satuan per mili detik.
8. scrollamount
: Untuk mengatur ukuran kecepatan gerakan dalam satuan pixel.
9. loop
: Untuk mengatur ukuran jumlah pengulangan.
Counter
Animation Graphics
Frame:
<frameset>
<frame>
<noframes>
<iframe>
Mendefinisikan kumpulan frame

Mendefinisikan bagian dari windows (sebuah frame)
Mendefinisikan bagian noframe untuk browser yang tidak dapat menangani frame
Mendefinisikan suatu frame inline
Dengan frame, anda akan mempunyai dua jenis dokumen yang jelas berbeda.
Layout documents, (Dokumen tata letak) dapat menciptakan frame. Dokumen ini biasanya tidak menampilkan isi
apapun. Fungsinya semata-mata untuk membagi jendela menjadi beberapa area (beberapa bidang).
Content documents, (Dokumen isi) akan masuk ke dalam frame. Dokumen ini sama dengan Halaman web biasa. Satusatunya variasi yang dapat anda miliki adalah Link-nya, jika Halaman-Halaman itu harus saling memanggil di dalam
jendela frame.
Index.html
<html>
logo.html
<html>
menu.html
<html>
welcome.html
<html>
<head>
<title></title>
</head>
<frameset rows="25%,*"
border="0">
<frame
name="atas"
src="logo.html" />
<frameset cols="20%,*">
<frame
name="menu"
scrolling="no"
src="menu.html" />
<frame
name="isi"
src="welcome.html" />
</frameset>
</frameset>
</html>
<head>
<title></title>
</head>
<body
bgcolor="#006699">
<h2><font
color="#FFFFFF">
Cara Membuat WEB
</font></h2>
</body>
</html>
<head>
<title></title>
</head>
<body
bgcolor="#CCCCFF">
<h4>Latihan</h4>
Mencoba latihan membuat
Frame HTML
</body>
</html>
<head>
<title></title>
</head>
<body>
<h2>Selamat
Datang</h2>
<h4>Anda berada
pada
halaman
latihan Membuat
FRAME HTML</h4>
</body>
</html>
Konsep Frame
<frame> : mendefinisikan frame yang terdapat dalam frameset.

name
Nama Frame untuk Jalur sambung bertarget (target
linking)
src
URL dari dokumen yang akan berada dalam frame
tersebut
marginwidth
Margin lebar frame
marginheight Margin tinggi frame
scrolling
Memungkinkan ada atau tidaknya scroll dalam frame
bordercolor
Merubah warna border
noresize
Memungkinkan frame tidak dapat dirubah-rubah
framespacing Jarak antar sel frame
frameborder
Rubah besaran boder frame
Karakter yang tidak diperbolehkan: \ / : * ? " < > |

URL dokumen relatif
Sembarang angka
Sembarang angka
YES/NO/AUTO
Warna, atau nilai hexa warna
N/A
Angka dalam piksel
Angka dalam piksel
<frameset> : berfungsi untuk membagi isi jendela web browser menjadi beberapa bagian.
name
Nama dari frame untuk jalur sambung bertarget (target Tidak boleh memuat string : \ / : * ? " < > |
linking)
rows
Membuat baris frame yang akan muncul serta ukurannya
Contoh. ROWS="300,200,*"
cols
Membuat kolom frame yang akan muncul serta ukurannya
The
Column
sizes
listed
ie.
COLS="200,600,*"
frameborder
Merubah berapa ukuran tepian atau border
Angka piksel
framespacing Jarak yang memisahkan masing-masing frame-frame
Angka piksel
Dokumen Tata Letak

Link & Target
Target
o
o
o
o
_blank : halaman yang dipanggil akan muncul pada jendela baru

_top
: halaman yang dipanggil akan mengisi penuh jendela yang sama, meskipun tadinya ada frame.
_self
: halaman yang dipanggil akan mengisi tempat yang sama, bila link tersebut dalam sebuah frame maka
halaman yang dipanggil akan mengisi frame tersebut.
_parent : halaman yang dipanggil akan akan mengisi FRAMESET, satu tingkat lebih tinggi dari FRAME
tempat link yang bersangkutan.
Contoh:
judul.html
<html>
<head></head>
<body bgcolor="red">
<font
size=7
color="blue"><center><b>3
FRAME SEDERHANA</b>
</center></font>
</body></html>
menu.html
<html>
<head></head>
<body bgcolor="yellow">
Menu :<br>
<a href="tambahan.html" taget="kiri">Di sini </a><br>
<a href="tambahan.html" taget="kanan">Di sana </a><br>
<a href="tambahan.html" target="atas">Di atas </a><br>
<a
href="http://www.geocities.com/sandra99"
target="_blank">Link saya</a><br>
<a href="http://www.prohosting.com/mia" target ="_top">Link
lain</a><br>
<a
href="http://www.geocities.com/smun14
target
="_self">Link lain lagi</a><br>
isi.html
<html>
<head></head>
<body bgcolor="blue">
<font
size=3
color="yellow">
Ini
adalah
isi
homepage saya...;)
</font>
</body></html>
<a
href="http://www.prohosting.com/sandra"
target
="_parent">Link aneh</a>
</body></html>
tambahan.html
induk.html
<html>
<html>
<head></head>
<head>
<body
<title>Pertama kali bikin frame </title>
bgcolor="green">
</head>
<font
size=5 <frameset rows="20%,80%">
color="yellow">
<frame src="judul.html" name="atas">
<b>Ini isinya cuman
<frameset cols="25%,75%">
tambahan kok</b>
<frame src="menu.html" name="kiri">
</font>
<frame src="isi.html" name="kanan">
</body></html>
</frameset>
</frameset></html>
Home Page Berbingkai
Ordered List & Unordered List

Tag Awal
<ol>
<ul
<li>
<dl>
<dt>
<dd>
Keterangan
Mendefinisikan Ordered List
Mendefinisikan Unored List
Mendefinisikan List Item
Mendefinisikan Definition List
Mendefinisikan Definition Term
Mendefinisikan Definition Description
Ordered List <ol>

Atribut
type
start
Contoh:
List Nomor
<ol>
<li>Apel </li>
<li>Pisang</li>
<li>Mangga</li>
<li>Jambu</li>
</ol>
Unordered List <ul>
Atribut
type
Argumen
A
a
I
i
1
x
Keterangan
Daftar dengan huruf besar (A,B,C dst)
Daftar dengan huruf kecil (a,b,c, dst)
Daftar dengan bilangan romawi besar (I,II dst)
Daftar dengan bilangan romawi kecil (i,ii, dst)
Daftar dengan nomor berurut (1,2,3 dst)
X diisi dengan angka/huruf yang akan dijadikan awal daftar.
List huruf besar

<ol type="A">
<li>Apel </li>
<li>Pisang</li>
<li>Mangga</li>
<li>Jambu</li>
</ol>
Argumen
Disc
Circle
Square
List huruf kecil

<ol type="a">
<li>Apel </li>
<li>Pisang</li>
<li>Mangga</li>
<li>Jambu</li>
</ol>
Keterangan
Simbol berupa disk
Simbol berupa lingkaran
Simbol berupa kotak
Contoh:
List type disk
<ul type="disc">
<li>Apel</li>
<li>Mangga</li>
<li>Jeruk</li>
<li>Pepaya</li>
</ul>
List type circle

<ul
type="circle">
<li>Apel</li>
<li>Mangga</li>
<li>Jeruk</li>
<li>Pepaya</li>
</ul>
Nested List : List item dapat digunakan secara bersarang.

<html>
<head>
<title>Nested List</title>
</head>
List romawi besar

<ol type=I>
<li>Apel </li>
<li>Pisang</li>
<li>Mangga</li>
<li>Jambu</li>
</ol>
Bentuk
List type square

<ul
type="square">
<li>Apel</li>
<li>Mangga</li>
<li>Jeruk</li>
<li>Pepaya</li>
</ul>
List romawi kecil

<ol type="i">
<li>Apel </li>
<li>Pisang</li>
<li>Mangga</li>
<li>Jambu</li>
</ol>
<body>
<ol>
<li>Buah</li>
<ul type="circle">
<li>Semangka</li>
<li>Jambu</li>
</ul>
<li>Bunga</li>
<ul type="disc">
<li>Melati</li>
<li>Anggrek</li>
</ul>
<li>Kendaraan</li>
<ul type="square">
<li>Mobil</li>
<li>Sepeda Motor </li>
</ul>
</ol>
</body>
</html>
Definition List
<dl><dl> Untuk menyatakan list definisi
<dt>
Istilah yang akan didefinisikan, tag tunggal tanpa penutup
<dd>
Definisi dari istilah tersebut, tag tunggal tanpa penutup
<html>
<body>
<h4>Contoh List Definisi:</h4>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language, bahasa yang digunakan untuk membuat halaman
web.</dd>
<dt>Internet Explorer</dt>
<dd>Web browser bawaan dari sistem operasi Windows, digunakan untuk menampilkan
halaman web.</dd>
</dl>
</body>
</html>
Menggunakan Forms & Fields:

Tag
<form>
<input>
<textarea>
<label>
<fieldset>
<legend>
<select>
<optgroup>
<option>
<button>
Keterangan
Mendefinisikan form untuk masukan user
Mendefinisikan masukan field
Mendefinisikan textarea
Mendefinisikan label control
Mendefinisikan sebuah fieldset
Mendefinisikan caption sebuah fieldset
Mendefinisikan list (drop-down box)
Mendefinisikan option group
Mendefinisikan option pada drop-down box
Mendefinisikan button
<form action="#" method="post">

....
</form>
Elemen Masukan Form <input>
Text
: digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server. Nilai yang dimasukkan
dapat berupa angka ataupun teks.
Radio
: menyediakan beberapa pilihan, hanya satu pilihan yang dapat dipilih.
Check box
: menyediakan beberapa pilihan, pilihan bisa lebih dari satu yang dipilih.
Button
: digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form.
o SUBMIT
: button yang digunakan untuk mengirim data.
o RESET
: button yang digunakan untuk menginisialisasi (mengosongkan) form.
List
: menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih dapat lebih dari satu.
Hidden
: elemen tersembunyi memberikan kebebasan pada pengembang untuk mengirimkan data ke server
tanpa menampilkan data tersebut kepada pengguna.
Elemen Masukan Form < textarea >

Text Area, digunakan untuk memasukkan data dalam bentuk teks berupa memo.
Organisasi Elemen Form
Label, memberikan fasilitas untuk menambahkan teks pada elemen masukan form. Elemen ini diisikan dengan deskripsi
dari elemen masukan yang ingin ditambahkan, dan harus memiliki atribut for.
Fieldset, digunakan untuk membungkus beberapa elemen masukan form, untuk menandakan bahwa elemen-elemen
tersebut merupakan elemen masukan yang berada pada satu grup yang sama, atau saling berhubungan.
Legend, digunakan untuk memberikan judul pada sebuah fieldset.
Validasi Masukan pada Form
o Atribut requied, jika pengguna tidak mengisikan elemen maka browser secara otomatis akan memberikan peringatan
kepada pengguna dan membatalkan pengiriman form. <input type="text" name="username" requied>
o Pengunaan atribut type yang benar, untuk memastikan browser dapat melakukan pengecekan nilai yang diisikan
pengguna dengan format sesuai dengan yang dispesifikasikan pada standar HTML.
Pengenalan Komponen Forms

Tag FORM
<form action="url" method=[post| get][enctype="..."]> ... </form>
Tag FORM menyatakan awal dan akhir suatu masukan. Meskipun kita bisa membuat jenis masukan dalam 1 halaman
tidak berarti kita bisa menggabungkannya dalam satu peryataan. Untuk itu Tag FORM bisa menggunakan atribut berikut
ini: ACTION, METHOD, dan ENCTYPE. Guna atribut adalah sbb:
ACTION, menentukan data masukan akan dilayani oleh CGI pada URL yang ditentukan (nama file yang akan
dieksekusi). Bila atribut ini tidak ada, maka akan dipakai CGI URL dimana tempat dokumen tersebut berada.
METHOD menentukan metoda pengiriman. Nilai METHODE. yang berlaku adalah GET dan POST. Dimana:
o GET
: mengirim informasi ke server melalui variabel environment.
o POST : mengirim informasi ke server memakai send standard input.
Metoda mana yang digunakan tergantung tata cara kerja Server. Umumnya dipakai POST.
ENCTYPE, adalah sebuah pilihan yang bersifat khusus. Merupakan opsi dan lazimnya ditiadakan. Digunakan
untuk menentukan bagaimana informasi suatu formulir harus di encode oleh brwser. Attribute ini hanya
diterapkan di metoda POST. Semua informasi yang disalurkan memakai metoda GET di encode dengan cara
baku. Jenis MIME yang berlaku untuk ENCTYPE adalah application/x-www-form-urlencoded, adalah cara
encode yang baku untuk CGI.
NAME dan ID digunakan sebagai identitas unik form dalam sebuah halaman.
Didalam tag FORM, INPUT, SELECT, dan TEXTAREA tag digunakan untuk menentukan unsur antarmuka didalam
formulir. Dibawah ini adalah rinciannya.
Tag INPUT
<input
type="..."[name="..."]
[value="..."]
[size="..."]
[maxlenght="..."]
[src="..."] [checked]>
INPUT tag dipakai untuk menentukan unsur masukan sederhana didalam FORM dan merupakan tag yang berdiri
sendiri; tag </input> tidak diperlukan. dan memungkin anda untuk menentukan berbagai cara data masukan.
Seperti text, password, checkbox, tombol radio, submit dan reset. Semua jenis masukkan kecuali submit dan reset
memerlukan nama identifikasi. Semuanya diperinci sebagai berikut:
TYPE=TEXT
Masukan text (text field entry) yang merupakan jenis yang ditentukan. inilah sebuah masukan text field:
<input type="text">
<input type="text" name="textfield">
Keterangan :
Input : tag yang menandakan sebuah masukan
Type
: type sebuah masukan, yaitu text
Name : nama text field
Nilai-nilai yang dapat diisikan pada atribut type yaitu:
color
week
time
url
datetime-local date
datetime
password
number
email
month
text
tel
range
search
file
TYPE=CHECKBOX
Jenis Checkbox adalah untuk membuat kotak pilihan yang bisa dipilih ataupun tidak dipilih.
<input type="checkbox" name="day" value="senin"> Senin <br>
<input type="checkbox" name="day" value="selasa"> Selasa <br>
<input type="checkbox" name="day" value="rabu"> Rabu
<input name="checkbox" type="checkbox" value="checkbox" checked>
Keterangan :
Name : nama checkbox
Type
: type masukan
Value : nilai yang dikirimkan ke server
Checked : menunjukkan bahwa otomatis pilihan tersebut dipilih. Secara default atribut tersebut unchecked (tidak
dipilih).
TYPE=RADIO
<input type="radio" name="sex" value="pria"> Pria <br>
<input type="radio" name="sex" value="wanita"> Wanita
<input name="radiobutton" type="radio" value="radiobutton">
Keterangan :
Name : nama radiobutton
Type
: type masukan
Value : nilai yang akan dikirim ke server
TYPE=SUBMIT
Adalah tombol tekan yang bila ditekan akan mengirim formulir yang bersangkutan ke server.
<input type="submit" name="submit" value="Masukkan
Form">
TYPE=RESET
Adalah tombol tekan yang akan menghapus semua data masukan.
<input type="reset" name="reset" value="Kosongkan
Form">
TYPE=HIDDEN
<input type="hidden" name="csrf_token" value="a1923">
Tag SELECT
Format:
<select name="..." [size="..."] [multiple]>
<option [value="..."] [selected]>
</select>
Dengan tag ini kita bisa membuat menu pilihan. Pengguna bisa memilih pilihan yang beragam bila attribut MULTIPLE
digunakan. Panjang daftar pilihan bisa dibatasi tayangannya dengan menggunakan Tag SIZE; Bila daftar lebih panjang
dari yang dibatasi browser akan menampilkan sroll bar. Daftar pilihan biasanya ditayangkan dalam bentuk pull down
menu. Bila Size tidak ditentukan maka yang berlaku adalah size=1.
Syntax dari tag <select> adalah mirip dengan lists (Daftar pilihan). Setiap item pilihan ditentukan oleh tag
<option>, yang merupakan tag tunggal. Yang dikurung dalam tag <select>. Bila nilainya tak ditentukan di tag
<option>. Anda bisa memilih attribute untuk untuk pilihan sebagai pilihan awal.
Dalam daftar pilihan dengan size 1 (pull down menu), satu pilihan dinyatakan sebagai pilihan awal, bila tidak ditentukan
option sebagai pilihan awal, maka urutan pilihan pertamalah yang ditentukan sebagai pilihan awal. Namun, dalam daftar
pilihan dengan size lebih besar dari 1, maka bisa dibuat <select> tanpa adanya pilihan awal.
<select name="country">
<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="filipina">Filipina</option>
<option value="vietnam">Vietnam</option>
</select>
<select name="select">
<option value="TI">Teknologi Informasi</option>
</select>
Keterangan :
Select : tag yang menandakan sebuah list/menu
Name : nama list/menu
Option : tag yang menandakan sebuah pilihan list
Value : nilai pilihan yang akan dikirim ke server
Tag TEXTAREA
<textarea name = "..." rows = number cols = number></textarea>
Tag TEXTAREA digunakan untuk bidang (field) masukan text yang banyak dan bisa dibatasi isinya dan bisa sudah
berisi text awal, dengan menggunakan Atribute TEXTAREA sbb:
o NAME, adalah Nama simbolik dari bidang masukan text.
o ROWS, yang menentukan tinggi bidang masukan text dinyatakan dengan angka menurut jumlah huruf.
o COLS, yang menentukan lebar bidang masukan text dinyatakan dengan angka menurut jumlah huruf.
Dalam TEXTAREA bidang masukan text akan ditayangkan berikut scroll bar; sembarang jumlah text bisa dimasukkan
didalamnya.
<label for="msg">Message</label><br/>
<textarea name="msg" cols="20" rows="4"></textarea>
<textarea name="textarea" cols="100" rows="5"></textarea>

Keterangan :
Textarea : tag yang menandakan sebuah masukan textarea
Name : nama textarea
Cols
: jumlah kolom textarea
Rows : jumlah baris textarea
Tag LABEL, FIELDSET dan LEGEND
<fieldset>
<legend>Login</legend>
<label for="username">Username</label>
<input type="text" name="username" id="username">
<label for="password">Password</label>
<input type="text" name="password" id="password">
</fieldset>
Form Methode (Get, Post)

<form action=# method=post/get>
</form>
Method adalah proses bagaimana suatu data dikirim kepada web server. Namun jika tidak diisi maka secara default akan
menggunakan metode GET. Perbedaan method GET dan POST adalah sebagai berikut :
GET
o Variabel telihat pada URL, data setiap
variabel dipisahkan dengan &.
Contoh : http://url/page.php?
get1=nilai2&get2=nilai2
o Dibatasi oleh panjang string sebanyak 2047
karakter
o Memungkinkan pengunjung langsung
memasukkan nilai variable pada form proses.
o Variabel diambil dengan
$_REQUEST[nama] atau
$_GET[nama]
<form id="FCONTOH" name="CONTOH" method="get"

action="simpan.php">
<p> Nama : <br />
<input name="nama" type="text" id="nama"
size="20" />
</p>
<p>Alamat : <br />
<textarea name="alamat" cols="30" rows="3"
id="alamat"></textarea>
</p>
<p>
<input type="submit" name="button"
id="button" value="Kirim" />
</p>
</form>
POST
o Nilai variabel tersembunyi untuk pengunjung
o Lebih aman karena lebih susah untuk
dimainkan pengunjung melalui pergantian
nama variable
o Tidak dibatasi oleh panjang string
o Variabel diambil dengan
$_REQUEST[nama] atau
$_POST[nama].
<form id="FCONTOH" name="CONTOH" method="post"

action="simpan.php">
<p> Nama : <br />
<input name="nama" type="text" id="nama"
size="20" />
</p>
<p>Alamat : <br />
<textarea name="alamat" cols="30" rows="3"
id="alamat"></textarea>
</p>
<p>
<input type="submit" name="button"
id="button" value="Kirim" />
</p>
</form>
Feedback Form
==================================================================
CSS
Pengenalan / Dasar CSS (Cascading Style Sheet)
Menginput Kode CSS ke Halaman HTML
Metode Inline Style, adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan
atribut style.
Contoh:
<body>
<h2 style="background-color:black; color:white" >
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
Metode Internal Style Sheets, atau disebut juga Embedded 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.
Contoh:
<head>
<title>Contoh Inline Style CSS</title>
<style type="text/css">
h2 {
background-color:black;
color:white;
}
</style>
</head>
Metode External Style Sheets, digunakan untuk mengangkat kode CSS tersebut kedalam sebuah file
tersendiri yang terpisah sepenuhnya dari halaman HTML.
Contoh:
menggunakan metode @import
menggunakan tag <link>
<head>
<head>
<title>Inline Style CSS</title>
<title>Inline Style CSS</title>
<link
rel="stylesheet"
@import url(belajar.css);
type="text/css" href="belajar.css">
</style>
</head>
</head>
Aturan dan Cara Penulisan Kode CSS

Contoh:
body {
font-size: 14px;
color: navy;
}
p {
font-family: calibri, helvetica, sans-serif;

}
h1, h2 {
text-decoration: underline;
font-size: 23px;
color: green;
}
Seperti yang dapat dilihat dari contoh diatas, aturan penulisan CSS adalah sebagai berikut:
- Selector di tempatkan pada awal penulisan CSS. Dalam contoh diatas, body, p, h1 dan h2adalah selector.
Khusus untuk selector yang 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 (-),
Contoh: 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.
Selector
Contoh:
p {font-family: calibri, helvetica, sans-serif;}
Keterangan:
- P : selector
- font-family : property
- calibri, helvetica, sans-serif : value
Selector, adalah sebuah pola (pattern) yang digunakan sebagai identitas pendefinisian suatu style, dan suatu cara untuk
mengaitkan atau menghubungkan kode CSS dengan tag HTML.
Jenis-jenis selector dasar pada CSS:
Universal selector, hanya ada 1 di dalam CSS, yaitu tanda bintang *. Selector ini bertujuan untuk mencari
semua tag yang ada.
Contoh:
* {
color: blue;
background-color: white;}
}
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. Efek dari element type selector adalah dari awal tag, sampai akhir tag.
Contoh:
h1 {
text-decoration: underline;
}
p {
font-size:14px;
}
Class Selector, merupakan salah satu selector yang paling umum dan paling sering digunakan. Class Selector
akan mencari seluruh tag yang memiliki atribut class dengan nilai yang sesuai. Untuk penggunaan Class
Selector, kita harus memiliki tag HTML yang mempunyai atribut class.
Contoh:
Tag pada HTML
Tag pada CSS
<p
class=paragraf_pertama>
Ini
adalah .paragraf_pertama {
sebuah paragraf pertama</p>
color: red;
}
<h1 class=judul>Judul Artikel</h1>
.judul {
font-size:20px;
<h2 class=judul penting berwarna>Sub Judul
}
Artikel<h2>
.penting {
color:red;
font-size: 1em;
}
ID Selector, bersama-sama dengan class selector merupakan selector paling umum dan juga sering dipakai
(walau tidak sesering class selector). Penggunaan ID selector hampir sama dengan class selector, dengan
perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk ID selector, kita
menggunakan atribut id. Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masingmasing tag (terutama dipakai untuk kode JavaScript). Karena hal tersebut, id yang digunakan harus unik dan
tidak boleh sama. Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan
tidak boleh sama.
Contoh:
Tag pada HTML
Tag pada CSS
<p id=paragraf_pembuka> Ini adalah sebuah #paragraf_ pembuka {
paragraf pembuka</p>
color: red;
}
<h1 id=judul_utama>Judul Artikel</h1>
#judul utama {
font-size:20px
<h2 id=sub_judul>Sub Judul Artikel<h2>
}
Atribut Selector, ini digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan. setiap atribut
selector harus berada diantara tanda kurung siku [ dan ].
Contoh:
[href] {
font-size:20px ;
}
[type="submit"] {
width:30px;
}
Cara Penggunaan Selector CSS

Menggunakan tanda koma (,)
Contoh:
h1, h2, h3, h4, h5, h6{
color: blue;
}
Tanda koma (,) sebagai pemisah menginstruksikan kepada browser bahwa kedua tag akan berwarna biru.
Tidak ada batasan seberapa banyak selector yang bisa digunakan.
Menggunakan spasi ( )
Contoh:
p strong {
h2 span strong {
color:red;
color:red;
}
}
Maksud dari kode p strong adalah seluruh tag <strong> yang berada di dalam tag <p>. Yang perlu diingat
dalam urutan ini adalah: tag yang dikenai style hanya tag yang paling terakhir, dimana dalam contoh diatas,
hanya tag <strong> saja yang akan bewarna merah.
Gabungan
Contoh:
h2.judul , .paragraf {
font-style: italic;
}
h2.judul diperlukan untuk mencari seluruh tag h2 dengan class judul, sedangkan .paragraf digunakan untuk
mencari seluruh tag yang memiliki class paragraf, apapun tag tersebut.
Contoh:
#belajar_html, p#belajar_css, h3.subheader {
font-size:14pt;
}
Ubah ukuran text menjadi 14pt untuk tag yang memiliki id belajar_html, tag p dengan id belajar_css dan
seluruh tag h3 yang memiliki class subheader
Urutan Prioritas Selector CSS (Cascading)
Jika terdapat property CSS yang saling bentrok, maka urutan prioritasnya adalah sebagai berikut (dari yang paling
kuat):
Inline style, yakni style yang langsung melekat pada tag.
Internal style, yakni style yang dideklarasikan pada awal halaman (tag <style>).
Eksternal style, yakni style yang dideklarasikan pada sebuah file .css, dan dipanggil melalui tag <link> atau
@import.
Urutan Prioritas Selector CSS (Specificity)

Berikut adalah nilai CSS Specificity untuk selector di dalam CSS:
- Setiap element/tag selector bernilai 0,0,0,1
- Setiap class selector, attribut selector bernilai 0,0,1,0
- Setiap ID selector bernilai 0,1,0,0
- Setiap inline style bernilai 1,0,0,0
Contoh:
Dengan menggunakan aturan tersebut, mari kita hitung
P {color:red;}
angka ke-spesifik-an dalam contoh.
div p {color:green;}
- Selector p, hanya terdiri dari 1 tag selector, maka
#aaa{color:orange;}
nilainya: 0,0,0,1
body div p {color:yellow;}
- Selector div p, terdiri dari 2 tag selector, maka nilainya:
div p.kalimat {color:silver;}
0,0,0,2
</style>
- Selector #aaa, terdiri dari 1 ID selector, maka nilainya:
0,1,0,0
- Selector body div p, terdiri dari 3 tag selector, maka
nilainya: 0,0,0,3
- Selector div p.kalimat, terdiri dari 1 class selector dan
2 tag selector, maka nilainya: 0,0,1,2
Perintah !important
Perintah !important diletakkan di belakang propery dari CSS, dan perintah !important ini akan mengambil alih urutan
prioritas CSS.
Contoh:
p {color:red !important;}
div p {color:green;}
#aaa {color:orange;}
body div p {color:yellow;}
div p.kalimat {color:silver;}
</style>
Property
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 diinginkan. Hampir semua property dalam CSS
dapat dipakai untuk seluruh selector.
Value
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.
Satuan Nilai (Value) dalam CSS
Nilai absolut, adalah sebuah nilai di dalam CSS, dimana nilai tersebut tidak dipengaruhi kondisi tag induknya
(parent), dan didasarkan pada ukuran sebenarnya di media printing. Di dalam CSS, nilai absolut ini adalah:
milimeter (mm), centimeter (cm), inchi (in), point (pt), dan pica (pc).
Nilai Relatif, berbeda dengan nilai absolut, nilai relatif didalam CSS dipengaruhi oleh tag disekitarnya. CSS
mendukung banyak nilai relatif, beberapa yang kita bahas adalah: pixel (px), Em-height (em), danX-height
(ex).
Nilai persentasi, adalah sebuah nilai per seratus (%) dari suatu property yang relatif terhadap induk ( parent)
dari tag tersebut. Misalkan kita membuat sebuah defenisi CSS sebagai p {font-size: 10pt;}, dan em
{font-size: 120%;}. Maka jika terdapat tag <em> didalam tag <p>, maka ukuran font dari tag <em>
akan menjadi 120% dari 10pt, atau sekitar 12pt.
Contoh:
<head>
<title>Contoh Perbandingan Ukuran dari font-size</title>
body
{ font-size:14pt; }
p.satu { font-size:8mm; }
p.dua
{ font-size:0.35in; }
p.tiga { font-size:2.2pc; }
p.empat { font-size:20px; }
p.lima { font-size:1.8em }
p.enam { font-size:3ex; }
p.tujuh { font-size:190%; }
</style>
</head>
<body>
<p>Kalimat ini akan berukuran 14 point</p>
<p class="satu">Kalimat ini akan berukuran 8 milimeter</p>
<p class="dua">Kalimat ini akan berukuran 0,35 inchi</p>
<p class="tiga">Kalimat ini akan berukuran 2,2 pica</p>
<p class="empat">Kalimat ini akan berukuran 20 pixel</p>
<p class="lima">Kalimat ini akan berukuran 1,8 em</p>
<p class="enam">Kalimat ini akan berukuran 3 ex</p>
<p class="tujuh">Kalimat ini akan berukuran 190%</p>
</body>
Keterangan:
Jika diperhatikan lagi, pembuatan sebuah selector body {font-size:14pt;} pada bagian awal definisi CSS, akan
menurunkan (inherit) ukuran font ini ke seluruh tag <p> yang berada di dalam tag <body>, namun pada masing-masing
tag <p>, ditambahkan property HTML class, sehingga ukuran font akan ditimpa (override) oleh nilai lainnya.
Khusus untuk class=lima, class=enam, dan class=tujuh, menggunakan nilai relatif em, ex,dan %, sehingga nilainya
bergantung dengan nilai induknya (parent), yakni body {font-size:14pt;}.
Sifat Penurunan Dalam CSS (Inheritance)

Inheritance dalam CSS adalah sifat penurunan efek CSS dari sebuah tag HTML kepada tag HTML lainnya. Syarat
untuk inheritance adalah: tag tersebut harus berada di dalam tag lainnya.
Contoh:
<div><p>Saya sedang belajar <em>inheritance</em> CSS</p></div> div {
color:green;
}
Keterangan:
Dari contoh diatas, tag <p> berada di dalam tag <div>, sehingga dapat dikatakan tag <div> adalah induk (parent) dari
tag <p>. Sedangkan tag <em> yang berada di dalam tag <p> merupakan anak (child) dari tag <p> dan grandchild dari
tag <div>.
Efek dari kode CSS tersebut akan membuat seluruh text di dalam tag <div> akan berwarna hijau, walapun di dalam tag
<div> juga terdapat tag-tag lainnya. Dapat dikatakan bahwa efek CSS tersebut diturunkan (inherit) dari tag induk <div>
kepada tag anak <p> dan <em>.
Nilai Property: inherit
Untuk memaksa proses penurunan, CSS memiliki nilai property: inherit. Jika sebuah kode CSS memiliki nilai
property inherit, maka property tersebut akan mencopy nilai dari tag induk (parent).
Contoh:
<body>
div.satu {border: 1px solid black;
<div class="satu">
color: blue;}
<p class="satu">
div.dua {border: 1px solid black;}
Kalimat
ini
tanpa
<em
p.dua {border: inherit;}
class="satu">nilai property inherit</em>
</style>
CSS
</p>
</div>
<br />
<div class="dua">
<p class="dua">
Kalimat ini menggunakan <em
class="dua">nilai
property
inherit</em>
CSS
</p>
</div>
</body>
Penulisan Kode Warna pada CSS (Model Warna RGB)

Dalam desain di media visual seperti televisi maupun monitor komputer, model warna yang digunakan adalah model
warna RGB (Red Green Blue). CSS mendukung hingga 16.777.216 kombinasi warna. Warna ini berasal dari perpaduan
ketiga warna ini dan akan memberikan 256 kombinasi merah x 256 kombinasi hijau x 256 kombinasi biru = 16.777.216
kombinasi warna. Kombinasi warna ini dikenal dengan 24bit warna, atau disebut juga true color.
Format #RRGGBB
Format penulisan warna #RRGGBB adalah yang paling populer digunakan untuk CSS. Dimana RRadalah nilai untuk
warna merah, GG untuk hijau, dan BB untuk warna biru. Masing-masing nilai ini berisi angka 00 sampai dengan FF.
Contoh: #FF0000
Format #RGB
Format penulisan 3 digit ini merupakan penulisan singkat dari 6 digit. Contohnya #RGB merupakan penulisan singkat
dari #RRGGBB, #F0F adalah singkatan dari #FF00FF.
Penulisan Desimal
CSS juga menyediakan penulisan warna menggunakan angka desimal. Format penulisannya adalah: rgb(0, 160, 255)
atau rgb(0%, 63%, 100%), dimana urutan warna adalah merah, hijau, dan biru. Menggunakan format pertama, 255
sama dengan 100%. Jika kita menuliskan nilai diluar dari angka yang seharusnya, yakni 0 255 atau 0% 100% maka
CSS secara otomatis akan menyamakannya dengan nilai yang terdekat.
Kata Warna (Keyword)
CSS juga mendukung 17 kata warna dalam bahasa inggris, yakni: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, orange, purple, red, silver, teal, white, dan yellow. Kata-kata ini berasal dari warna dasar VGA pada
Windows dan dikenal juga dengan istilah classic internet color.
Tabel Kata Warna dalam CSS
Keyword Warna Nilai RGB
aqua
#00ffff
black
#000000
blue
#0000ff
fuchsia
#ff00ff
gray
#808080
green
#008000
lime
#00ff00
maroon
#800000
navy
#000080
olive
#808000
orange
#ffa500
purple
#800080
red
#ff0000
silver
#c0c0c0
teal
#008080
white
#ffffff
yellow
#ffff00
Nilai property: Transparent
CSS menyediakan keyword transparent sebagai nilai. Dengan memberikan nilai transparan, sebuah tag akan
melewatkan warna dari tag dibelakangnya.
Contoh:
p.lima{color:transparent;}
CSS Lanjutan
Pengertian dan Cara Penulisan Kode Warna RGBA, HSL, dan HSLA
RGBA
RGBA adalah singkatan dari Red Green Blue Alpha. Tambahan kata Alpha disini merujuk kepada alpha channel.
Alpha channel adalah sebuah metode untuk menentukan tingkat transparan sebuah warna. Nilai alpha 0 akan membuat
sebuah warna transparan (tembus pandang), dan nilai alpha 1 akan membuat warna pekat dan tidak akan melewatkan
objek lain dibelakangnya (ini merupakan nilai default). Jika ingin membuat nilai alpha berada diantara 0 dan 1, dengan
menggunakan penulisan desimal seperti 0.5, 0.6, dan 0.9.
Contoh:
h2 {color: rgba(255,0,0,0.3); background-color: rgba(0,0,255,0.6);}
HSL
HSL adalah singkatan dari Hue, Saturation, dan Lightness (atau sering ditulis juga dengan Luminance).
Contoh untuk membuat wana merah:
color: hsl(0, 100%, 50%);
Nilai pertama yakni Hue merupakan derajat warna dengan nilai 0 sampai 360. Nilai ini didapat dari lingkaran warna
(color wheel) yang tersusun dari warna pelangi. Setiap warna berada dalam jarak sekitar 51 derajat.
Nilai kedua dari kode warna HSL adalah Saturation. Saturation menyatakan seberapa murni sebuah warna. Nilai dari
Saturation adalah persen dari 0% sampai dengan 100%, dimana nilai 0% akan membuat warna menjadi pudar dan
menghasilkan warna abu-abu (terlepas dari apapun warna Hue yang dipilih). Dan nilai Saturation 100% adalah warna
murni.
Nilai ketiga dari HSL adalah Lightness atau kecerahan dari warna. Sama seperti Saturation, nilai Lightness berada
dalam angka 0% sampai dengan 100%. Nilai 0% akan membuat warna apapun menjadi hitam, dan nilai 100% akan
membuat warna apapun menjadi putih. Untuk mendapatkan warna normal angkanya berada di nilai 50%.
HSLA
Sama seperti kode warna RGB dan RGBA, huruf A dari HSLA juga singkatan dari Alpha Channel. Nilai yang
digunakan juga sama, yakni nilai 1 untuk warna solid, dan nilai 0 untuk warna transparan.
Contoh:
h2 {color: hsla(240,100%,60%,0.8);}
Pengertian Attribute Selector dalam CSS

Atribut Selector adalah selector CSS yang digunakan untuk mencarielemen HTML dengan menggunakan nilai attribut
dari tag HTML.
Cara Penggunaan Attribute Selector CSS
Attribute Selector: [attr]
Aturan penulisan atribut selector pertama kita adalah: [attr] (attr merupakan singkatan dari attribute). Nilai attr
disini dapat diganti dengan atribut HTML yang ingin di cari.
Contoh:
[href] {
color:green;
}
Contoh lain, jika ingin mencari seluruh tag <img> yang memiliki atribut title, maka bisa menggunakan selector
img[title] seperti berikut:
img[title] {
border: 1px solid blue;
}
Attribute Selector: [attr=value]

Penulisan atribut selector [attr=value] berarti mengikut-sertakan nilai dari atribut tersebut ke dalam selector.
Contoh untuk menyeleksi tag <img> yang memiliki atribut width=200px:
img[width="200px"] {
border: 2px solid red;
}
Dengan menambahkan nilai 200px, maka selector diatas tidak akan mengubah border tag <img>lain yang
memiliki atribut width selain 200px.
Attribute Selector: [attr^=value]

Atribut selector dengan penulisan [attr^=value], berarti selector tersebut akan mencari seluruh tag HTML yang
nilai atributnya diawali dengan nilai value.
Contoh:
a[href^="http://"] {
color:red;
}
Selector diatas akan mengubah warna teks untuk link berikut:
<a href="http://www.duniailkom.com">Link ke http://www.duniailkom.com</a>

Namun tidak akan mengubah warna teks untuk link berikut:
<a href="halaman_pertama.html">Link ke halaman_pertama.html</a>
Attribute Selector: [attr$=value]

Atribut selector dengan penulisan [attr$=value], berarti selector tersebut akan mencari seluruh tag HTML yang
nilai atributnya diakhiri dengan nilai value.
Contoh:
a[href$=".pdf"] {
color:brown;
}
Selector a[href$=".pdf"] akan mencari seluruh tag <a> yang memiliki nilai akhiran .pdf pada atribut href-nya.
Attribute Selector: [attr~=value]

Atribut selector dengan penulisan [attr~=value], akan mencari seluruh tag HTML yang nilai atributnya
mengandung nilai value dan dipisahkan tanda spasi.
Contoh:
selector img[title~=bunga] akan cocok dengan tag <img> yang memiliki atribut title = bunga mawar,
karangan bunga, maupun mari menanam bunga di taman. Namun tidak akan cocok dengan
title=menanam-bunga atau taman telah berbunga, dimana keduanya bukan dipisahkan dengan spasi.
Attribute Selector: [attr|=value]

Atribut selector dengan penulisan [attr|=value], akan mencari seluruh tag HTML yang nilai atributnya
mengandung nilai value dan dipisahkan tanda penghubung (-).
Contoh:
selector img[src|=hijau] akan cocok dengan tag <img> yang memiliki atribut src (nama gambarnya)
dengan nilai: hijau-daun.jpg.
Attribute Selector: [attr*=value]

Atribut selector dengan penulisan [attr*=value], akan mencari seluruh tag HTML yang nilai atributnya
mengandung kata value terlepas dari ada atau tidaknya karakter pemisah.
Contoh:
img[title*=belajar], akan cocok dengan tag <img> yang memiliki atribut title dengan nilai: sedang
belajar, lagi-belajar, maupun sudahbosanbelajar.
Pengertian Pseudo-class dan Pseudo-element CSS

Pseudo Class Selector
Pseudo Class Selector adalah selector CSS yang digunakan untuk mengakses bagian tertentu dalam HTML yang tidak
terlihat (tidak tertulis di dalam HTML) atau bagian dari HTML yang tidak bisa diakses dengan selector sederhana lain.
Penggunaan pseudo class selector lebih banyak dirancang untuk mengakses kondisi khusus dalam HTML.
Contoh:
a:visited{color:#000;} .contoh a:hover{color:red;text-decoration:bold;}
Macam-macam Pseudo-class:
Dynamis Pseudo Class, digunakan untuk menyajikan dan merespons event-event yang dinamis.
o :link
: Memberikan style pada link yang belum dikunjungi.
o :visited : Memberikan style pada link yang telah dikunjungi.
o :hover : Memberikan style pada elemen yang disorot oleh pointer/mouse.
o :active : Memberikan style pada elemen yang berada pada keadaan diaktifkan.
o :focus : Memberikan style pada elemen ketika elemen tersebut menerima focus.
Structural Pseudo Class, digunakan pada style yang ada pada struktur dokumen.
o :first-child
: Memberikan style pada elemen anak pertama pada dari elemen induknya.
o :lang()
: Menentukan bahasa yang digunakan pada elemen tersebut.
o :root
: Menunjuk kepada root (induk) dokumen. Di HTML element root adalah <html>.
o :last-child
: Memberikan style pada elemen anak terakhir pada dari elemen induknya.
o :empty
: Menunjuk kepada elemen yang tidak memiliki anak.
o :not
: Memberikan style pada elemen yang bukan merupakan elemen yang ditunjuk.
o :target
: Menunjuk suatu target dari link yang diklik.
o :nth-child(n)
: Memilih banyak elemen sesuai dengan posisinya di dalam dokumen.
o :only-child
: Memilih elemen jika hanya dirinya yang menjadi anak dari elemen induknya.
o :disabled
: Untuk menonaktifkan kolom isian.
o :enable
: Untuk membalik dari keadaan :disabled.
Contoh:
CSS
p:nth-child(3n+0) {
:not(p) {
input:enabled {
background: #ff0000;
color: #ff0000;
background: #ffff00;}
input:disabled {
background: #dddddd;}
HTML
<form action="">
Name: <input type="text"
value="Mickey"><br>
Pass: <input type="pass"
name="pass"
value="psw"
disabled></form>
Pseudo Element Selector
Pseudo Element Selector adalah elemen yang tidak didefinisikan pada HTML namun bisa diakses melalui CSS.
Contoh:
p.intro::first-letter { h1::before {
p::first-letter {
color: #ff0000;
content: url(smiley.gif);}
color: #ff0000;}
font-size:200%;}
p::first-line {
color: #0000ff;}
Jenis-jenis Pseudo-Element:
o ::before
: Digunakan untuk menambah suatu content sebelum element tertentu.
o ::after
: Digunakan untuk menambah suatu content setelah element tertentu.
o ::first-letter
: Digunakan untuk memberi style pada huruf pertama pada selector tertentu.
o ::first-line
: Digunakan untuk memberi style pada baris pertama pada selector tertentu.
Pengertian Child Selector CSS

Child Selector adalah selector di dalam CSS yang penggunaannya di dasarkan pada struktur urutan tag HTML. selector
ini mengizinkan untuk menyeleksi tag HTML berdasarkan aturan child-parent.
Contoh:
div > h2 {
font-style:italic;
font-family: Calibri;
}
Selector div > h2 berarti cari seluruh tag <h2> yang merupakan child atau anak dari tag <div>.
Perbedaan antara Child Selector dengan Descendant Selector
Descendant selector, (gabungan selector yang dipisah dengan tanda spasi) akan mencari seluruh tag <h2> yang
berada di dalam tag <div>, walaupun tag <h2> tersebut berada di dalam tag lain (nested tag). Selama tag <h2>
berada di bawah tag <div>, maka div.main h2 akan menemukan tag tersebut.
Contoh:
ul.nav li {color: green;}
Kode CSS tersebut akan membuat seluruh tag <li> yang berada di dalam tag <ul class=nav> memiliki warna
text hijau, termasuk jika list tersebut memiliki list juga (list bersarang) atau nested list.
Child selector, hanya akan mencari seluruh tag <h2> yang merupakan turunan langsung dari tag <div>.
Contoh:
ul.nav > li {color: green;}
Maksud dari selector tersebut adalah mencari seluruh tag <li> yang merupakan child dari tag <ulclass=nav>.
Karena selector tersebut hanya mencari tag <li> yang merupakan anak langsung dari tag <ul>, maka nested
list tidak akan berefek.
Property pada CSS

Jenis-jenis Property pada CSS
@keyframes
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
Background
Animation Properties
Menentukan animasi
Menentukan nama untuk animasi keyframes @
Menentukan berapa detik atau milidetik animasi diperlukan untuk menyelesaikan satu siklus
Menentukan kurva kecepatan animasi
Menentukan kapan animasi akan mulai
Menentukan jumlah kali animasi harus dimainkan
Menentukan apakah atau tidak animasi harus bermain secara terbalik pada siklus alternative
Menentukan apakah animasi sedang berjalan atau dijeda
Background Properties
Mengatur semua properti latar belakang dalam satu deklarasi
background-attachment
Backround-color
background-image
background-position
background-repeat
background-clip
background-origin
background-size
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
outline
outline-color
outline-style
outline-width
border-bottom-left-radius
border-bottom-rightradius
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-radius
border-top-left-radius
border-top-right-radius
box-shadow
overflow-x
overflow-y
overflow-style
rotation
rotation-point
color-profile
opacity
rendering-intent
bookmark-label
bookmark-level
bookmark-target
float-offset
hyphenate-after
hyphenate-before
Mengatur apakah gambar latar belakang tetap atau gulungan dengan sisa halaman
Mengatur warna latar belakang dari elemen
Mengatur gambar latar belakang untuk elemen
Mengatur posisi awal dari gambar latar belakang
Mengatur bagaimana gambar latar belakang akan diulangi
Menentukan daerah lukisan latar belakang
Menentukan daerah posisi gambar latar belakang
Menentukan ukuran gambar latar belakang
Border and Outline Properties
Mengatur semua properti perbatasan dalam satu deklarasi
Mengatur semua properti perbatasan bawah dalam satu deklarasi
Mengatur warna batas bawah
Mengatur gaya perbatasan bawah
Mengatur lebar perbatasan bawah
Mengatur warna batas
Mengatur semua properti perbatasan kiri dalam satu deklarasi
Mengatur warna batas kiri
Mengatur gaya perbatasan kiri
Mengatur lebar batas kiri
Mengatur semua properti perbatasan kanan dalam satu deklarasi
Mengatur warna batas kanan
Mengatur gaya perbatasan kanan
Mengatur lebar batas kanan
Mengatur gaya dari empat perbatasan
Mengatur semua properti perbatasan atas dalam satu deklarasi
Mengatur warna batas Atas
Mengatur gaya perbatasan Atas
Mengatur lebar batas Atas
Mengatur lebar dari empat perbatasan
Mengatur semua properti outline dalam satu deklarasi
Mengatur warna garis besar
Mengatur gaya garis besar
Mengatur lebar garis besar
Mendefinisikan bentuk perbatasan sudut kiri bawah
Mendefinisikan bentuk perbatasan sudut kanan bawah
Properti singkatan untuk menetapkan semua perbatasan-image
Menentukan jumlah dimana bidang gambar perbatasan melampaui kotak perbatasan
Menentukan apakah gambar-perbatasan harus diulang, bulat atau diregangkan
Menentukan offset batin dari perbatasan gambar
Menentukan gambar yang akan digunakan sebagai perbatasan
Menentukan lebar perbatasan gambar
Properti singkatan untuk menetapkan semua empat perbatasan-*-radius properti
Mendefinisikan bentuk perbatasan pojok kiri
Mendefinisikan bentuk perbatasan sudut kanan atas
Atase satu atau lebih drop-bayangan ke kotak
Box Properties
Menentukan apakah atau tidak untuk klip kiri / kanan tepi konten, jika meluap area konten elemen
Menentukan apakah atau tidak untuk klip bagian atas / bawah tepi konten, jika meluap area konten elemen
Menentukan metode bergulir disukai untuk elemen yang melimpah
Memutar elemen di sekitar titik yang diberikan ditentukan oleh properti rotasi-titik
Mendefinisikan titik sebagai offset dari tepi perbatasan kiri atas
Color Properties
Memungkinkan spesifikasi dari profil warna sumber lain selain default
Menentukan tingkat opacity untuk elemen
Memungkinkan spesifikasi maksud warna profil render selain default
Content for Paged Media Properties
Menentukan label bookmark
Menentukan tingkat bookmark
Menentukan target dari link bookmark
Dorong elemen melayang ke arah berlawanan dari mana mereka telah melayang dengan float
Menentukan jumlah minimum karakter dalam kata ditulis dgn tanda penghubung setelah karakter
hyphenation
Menentukan jumlah minimum karakter dalam kata ditulis dgn tanda penghubung sebelum karakter
hyphenate-character
hyphenate-lines
hyphenate-resource
hyphens
image-resolution
marks
string-set
height
max-height
max-width
min-height
min-width
width
box-align
box-direction
box-flex
box-flex-group
box-lines
box-ordinal-group
box-orient
box-pack
font
font-family
font-size
font-style
font-variant
font-weight
@font-face
font-size-adjust
font-stretch
content
counter-increment
counter-reset
quotes
crop
move-to
page-policy
grid-columns
grid-rows
target
target-name
target-new
target-position
alignment-adjust
alignment-baseline
baseline-shift
dominant-baseline
drop-initial-after-adjust
drop-initial-after-align
drop-initial-before-adjust
drop-initial-before-align
hyphenation
Menentukan string yang akan ditampilkan ketika hyphenate-break terjadi
Menunjukkan jumlah maksimum baris ditulis dgn tanda penghubung berturut-turut dalam suatu elemen
Menentukan suatu daftar comma-separated sumber daya eksternal yang dapat membantu browser
menentukan titik hyphenation
Mengatur cara untuk membagi kata-kata untuk meningkatkan tata letak paragraf
Menentukan resolusi gambar yang benar
Menambahkan tanaman dan / atau tanda silang pada dokumen
Dimension Properties
Mengatur ketinggian elemen
Mengatur ketinggian maksimum elemen
Mengatur lebar maksimum elemen
Mengatur ketinggian minimal elemen
Mengatur lebar minimum elemen
Mengatur lebar elemen
Flexible Box Properties
Menentukan bagaimana untuk menyelaraskan elemen anak dari kotak
Menentukan arah mana anak-anak kotak ditampilkan
Menentukan apakah anak-anak kotak fleksibel atau tidak fleksibel dalam ukuran
Memberikan elemen fleksibel untuk melenturkan kelompok
Menentukan apakah kolom akan pergi ke baris baru setiap kali kehabisan ruang di kotak orangtua
Menentukan urutan tampilan elemen anak dari kotak
Menentukan apakah anak-anak dari kotak harus ditata horizontal atau vertikal
Menentukan posisi horizontal dalam kotak horisontal dan posisi vertikal dalam kotak vertikal
Font Properties
Mengatur semua properti font dalam satu deklarasi
Menentukan Tampilan font untuk teks
Menentukan ukuran font teks
Menentukan gaya font untuk teks
Menentukan apakah atau tidak teks harus ditampilkan dalam huruf kecil.
Menentukan berat font
Sebuah aturan yang memungkinkan situs web untuk men-download dan menggunakan font selain "webaman" font
Mempertahankan pembacaan teks saat fallback font yang terjadi
Memilih wajah, normal kental, atau diperluas dari keluarga font
Generated Content Properties
Digunakan dengan: sebelum dan: setelah pseudo-elemen, untuk memasukkan konten yang dihasilkan
Penambahan satu atau lebih counter
Menciptakan atau mengatur ulang satu atau lebih counter
Mengatur jenis tanda kutip untuk kutipan tertanam
Memungkinkan elemen diganti menjadi hanya area persegi obyek, bukan seluruh objek
Penyebab elemen yang akan dihapus dari aliran dan dimasukkan kembali pada titik kemudian dalam
dokumen
Menentukan halaman yang berbasis terjadinya suatu unsur tertentu diterapkan ke counter atau nilai string
Grid Properties
Menentukan lebar setiap kolom dalam kotak
Menentukan tinggi setiap kolom dalam kotak
Hyperlink Properties
Properti singkatan untuk menetapkan target-nama, target-baru, dan target-posisi properti
Menentukan di mana untuk membuka link (target tujuan)
Menentukan apakah link tujuan baru harus terbuka di jendela baru atau di tab baru dari jendela yang ada
Menentukan di mana link tujuan baru harus ditempatkan
Linebox Properties
Memungkinkan penyelarasan lebih tepat dari unsur-unsur
Menentukan bagaimana elemen inline-tingkat sejalan sehubungan dengan induknya
Memungkinkan reposisi relatif dominan-awal sampai dominan-dasar
Menentukan-dasar skala-tabel
Mengatur titik alignment drop awal untuk titik koneksi utama
Set yang keselarasan baris dalam kotak garis awal digunakan pada titik sambungan primer dengan kotak
huruf awal
Mengatur titik alignment drop awal untuk titik sambungan sekunder
Set yang keselarasan baris dalam kotak garis awal digunakan pada titik sambungan sekunder dengan kotak
surat awal
drop-initial-size
drop-initial-value
inline-box-align
line-stacking
line-stacking-ruby
line-stacking-shift
line-stacking-strategy
text-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
marquee-direction
marquee-play-count
marquee-speed
marquee-style
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
padding
padding-bottom
padding-left
padding-right
padding-top
fit
fit-position
image-orientation
page
size
bottom
clear
clip
cursor
display
float
left
overflow
position
right
top
visibility
z-index
Mengontrol tenggelamnya sebagian dari huruf awal

Mengaktifkan efek drop-awal
Set yang garis blok inline multi-line sejajar dengan elemen inline sebelumnya dan berikutnya dalam garis
Properti singkatan untuk menetapkan garis-susun-strategi, garis-susun-ruby, dan garis-susun-pergeseran
sifat
Mengatur metode garis susun untuk elemen blok yang mengandung unsur-unsur penjelasan ruby
Mengatur metode garis susun untuk elemen blok yang mengandung unsur-unsur dengan dasar-pergeseran
Mengatur strategi garis susun untuk kotak garis ditumpuk dalam elemen blok yang mengandung
Set dimensi blok-perkembangan area konten teks sebuah kotak inline
List Properties
Mengatur semua properti untuk daftar dalam satu deklarasi
Menentukan gambar sebagai penanda daftar-item
Menentukan jika daftar-item penanda akan muncul dalam atau di luar aliran konten
Menentukan jenis daftar-item penanda
Margin Properties
Ukuran jarak bagian luar atau ukuran jarak sesudah Border
Mengatur ukuran jarak bagian bawah
Mengatur ukuran jarak bagian kiri
Mengatur ukuran jarak bagian kanan
Mengatur ukuran jarak bagian Atas
Marquee Properties
Mengatur arah konten bergerak
Set berapa kali bergerak konten
Mengatur seberapa cepat gulungan konten
Mengatur gaya konten bergerak
Multi-column Properties
Menentukan jumlah kolom elemen harus dibagi menjadi
Menentukan bagaimana mengisi kolom
Menentukan kesenjangan antara kolom
Sebuah properti singkat untuk pengaturan semua kolom-aturan-sifat *
Menentukan warna aturan antara kolom
Menentukan gaya aturan antara kolom
Menentukan lebar aturan antara kolom
Menentukan berapa banyak kolom elemen harus mencakup seluruh
Menentukan lebar kolom
Properti singkatan untuk menetapkan kolom-lebar dan kolom-count
Padding Properties
Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Mengatur ukuran jarak bagian bawah
Mengatur ukuran jarak bagian kiri
Mengatur ukuran jarak bagian kanan
Mengatur ukuran jarak bagian Atas
Paged Media Properties
Memberikan petunjuk untuk bagaimana skala elemen diganti jika tidak lebar maupun properti puncaknya
adalah auto
Menentukan penyelarasan obyek dalam kotak
Menentukan rotasi ke arah kanan atau searah jarum jam bahwa agen pengguna berlaku untuk gambar
Menentukan jenis tertentu dari halaman di mana elemen HARUS ditampilkan
Menentukan ukuran dan orientasi dari kotak yang berisi untuk konten halaman
Positioning Properties
Menentukan posisi bawah elemen diposisikan
Menentukan mana sisi elemen mana elemen mengambang lainnya tidak diperbolehkan
Klip elemen benar-benar diposisikan
Menentukan jenis kursor yang akan ditampilkan
Menentukan bagaimana elemen HTML tertentu harus ditampilkan
Menentukan apakah atau tidak kotak harus mengapung
Menentukan posisi kiri elemen diposisikan
Menentukan apa yang terjadi jika konten melebihi kotak elemen
Menentukan jenis metode penentuan posisi yang digunakan untuk sebuah elemen (statis, relatif, absolut
atau tetap)
Menentukan posisi yang tepat dari elemen diposisikan
Menentukan posisi teratas dari elemen diposisikan
Menentukan apakah elemen terlihat
Mengatur urutan tumpukan elemen diposisikan
orphans
page-break-after
page-break-before
page-break-inside
widows
ruby-align
ruby-overhang
ruby-position
ruby-span
mark
mark-after
mark-before
phonemes
rest
rest-after
rest-before
voice-balance
voice-duration
voice-pitch
voice-pitch-range
voice-rate
voice-stress
voice-volume
border-collapse
border-spacing
caption-side
empty-cells
table-layout
color
direction
letter-spacing
line-height
text-align
text-decoration
text-indent
text-transform
unicode-bidi
vertical-align
white-space
word-spacing
hanging-punctuation
punctuation-trim
text-align-last
text-justify
text-outline
text-overflow
text-shadow
text-wrap
word-break
word-wrap
transform
transform-origin
transform-style
perspective
Print Properties
Mengatur jumlah minimum baris yang harus ditinggalkan di bagian bawah halaman saat istirahat halaman
terjadi di dalam elemen
Mengatur perilaku halaman pemecah setelah elemen
Mengatur perilaku halaman-breaking sebelum elemen
Mengatur perilaku halaman-breaking di dalam elemen
Mengatur perilaku halaman-breaking di dalam elemen
Ruby Properties
Mengontrol perataan teks dari teks ruby dan isi basis ruby relatif terhadap satu sama lain
Menentukan apakah, dan di sisi mana, ruby teks diperbolehkan untuk sebagian overhang teks yang
berdekatan di samping basis sendiri, ketika teks ruby lebih lebar dari dasar ruby
Mengontrol posisi teks ruby sehubungan dengan alasnya
Mengontrol perilaku mencakup elemen anotasi
Speech Properties
Properti singkatan untuk menetapkan tanda-tanda sebelum dan setelah sifatMemungkinkan spidol nama harus terpasang ke stream audio
Memungkinkan spidol nama harus terpasang ke stream audio
Menentukan pengucapan fonetik untuk teks yang dikandung oleh elemen terkait
Properti singkatan untuk menetapkan sisa-sisa sebelum dan setelah sifatMenentukan istirahat atau batas prosodi untuk diamati setelah berbicara konten sebuah elemen
Menentukan istirahat atau batas prosodi untuk diamati sebelum berbicara konten sebuah elemen
Menentukan keseimbangan antara saluran kiri dan kanan
Menentukan berapa lama harus dilakukan untuk membuat konten elemen yang dipilih
Menentukan lapangan rata-rata (frekuensi) dari suara yang berbicara
Menentukan variasi dalam lapangan rata-rata
Mengontrol kecepatan berbicara
Menunjukkan kekuatan penekanan yang akan diterapkan
Mengacu pada amplitudo gelombang output oleh synthesises pidato
Table Properties
Menentukan apakah atau tidak perbatasan tabel harus runtuh
Menentukan jarak antara batas sel yang berdekatan
Menentukan penempatan keterangan tabel
Menentukan apakah atau tidak untuk menampilkan perbatasan dan latar belakang pada sel kosong dalam
tabel
Mengatur tata letak algoritma yang akan digunakan untuk tabel
Text Properties
Mengatur warna teks
Menentukan arah teks / tulisan arah
Meningkat atau menurun ruang antara karakter pada teks
Mengatur tinggi baris
Menentukan alignment horizontal teks
Menentukan dekorasi ditambahkan ke teks
Menentukan indentasi dari baris pertama dalam blok teksMengontrol kapitalisasi teks
Mengatur alignment vertikal dari elemen
Menentukan bagaimana putih-ruang di dalam elemen ditangani
Meningkat atau menurun ruang antara kata-kata dalam teks
Menentukan apakah karakter tanda baca dapat ditempatkan di luar kotak garis
Menentukan apakah karakter tanda baca harus dipangkas
Menjelaskan bagaimana baris terakhir blok atau baris tepat sebelum istirahat garis paksa sejajar ketika textalign adalah "membenarkan"
Menentukan metode pembenaran digunakan ketika text-align adalah "membenarkan"
Menentukan garis teks
Menentukan apa yang harus terjadi ketika teks melimpahi mengandung unsur
Menambahkan bayangan untuk teks
Menentukan aturan melanggar garis untuk teks
Menentukan aturan baris melanggar untuk non-CJK script
Memungkinkan panjang, kata-kata bisa dipecahkan untuk dilanggar dan bungkus ke baris berikutnya
2D/3D Transform Properties
Menerapkan transformasi 2D atau 3D untuk elemen
Memungkinkan Anda untuk mengubah posisi pada elemen berubah
Menentukan bagaimana bersarang elemen tersebut diberikan di ruang 3D
Menentukan perspektif tentang bagaimana unsur-unsur 3D dipandang
perspective-origin
backface-visibility
transition
transition-property
transition-duration
transition-timing-function
transition-delay
appearance
box-sizing
icon
nav-down
nav-index
nav-left
nav-right
nav-up
outline-offset
resize
Menentukan posisi bawah elemen 3D

Tetapkan apakah atau tidak sebuah elemen akan terlihat bila tidak menghadap layar
Transition Properties
Properti singkatan untuk menetapkan sifat transisi empat
Menentukan nama properti CSS efek transisi untuk
Menentukan berapa detik atau milidetik efek transisi diperlukan untuk menyelesaikan
Menentukan kurva kecepatan efek transisi
Menentukan kapan efek transisi akan mulai
User-interface Properties
Memungkinkan Anda untuk membuat tampilan elemen seperti elemen antarmuka pengguna standar
Memungkinkan Anda untuk menentukan unsur-unsur tertentu untuk menyesuaikan suatu daerah dengan
cara tertentu
Menyediakan penulis kemampuan untuk gaya elemen setara dengan ikon
Menentukan mana untuk menavigasi ketika menggunakan tombol panah-bawah navigasi
Menentukan urutan tabbing untuk elemen
Menentukan mana untuk menavigasi ketika menggunakan tombol panah kiri navigasi
Menentukan mana untuk menavigasi ketika menggunakan panah kanan tombol navigasi
Menentukan mana untuk menavigasi ketika menggunakan panah-up tombol navigasi
Offset garis besar, dan menarik itu di luar tepi perbatasan
Menentukan apakah suatu unsur adalah resizable oleh pengguna
Jenis-jenis Value pada CSS

Property Dan Values Pada Background
Property
Values
Background-image
Url
Background-repeat
Repeat
Repeat-y
Repeat-x
no-Repeat
Keterangan
Alamat gambar yang sudah di upload
Gambar diulang dalam halaman
Gambar diulang dalam sumbu y
Gambar diulang dalam sumbu x
Gambar tidak diulang hanya muncul 1 gambar
Property Dan Values Pada Font

Property
Values
Keterangan
font-family
Arial;
Jenis font adalah arial
Font-size
small;
kecil
medium;
menengah
large;
besar
12px;
besar 12 pixel (Bisa diganti 12pt)
Font-style
Normal;
Font normal
Italic;
Font miring
Font-weight Normal;
Ketebalan font normal
Bold;
Font Tebal
100-900
Ketebalan font dengan nilai dari 100-900
Property Dan Value Pada Text
Property
Values
Text-decoration none;
Underline;
Overline;
line-through;
blink;
Text-transform
uppercase;
Text-align
left;
right;
center;
justify;
Keterangan
Menampilkan text asli
Menampilkan Text bergaris bawah
Menampilkan text bergaris atas
Menampilkan text tercoret
Menampilkan text berkedip
Menampilkan text huruf besar
Text rata kiri
Text rata kanan
Text rata tengah
Text rata kanan kiri
Selector Pada Link

Selector Keterangan
a:link
Keadaan awal link
a:hover
Keadaan link saat dikenai mouse
a:active
Keadaan link saat di klik
a:visited Keadaan link setelah dikunjungi
Property Dan Value Pada Position

Property Values
Keterangan
Position
Static;
Elemen render dalam rangka, seperti yang muncul dalam aliran dokumen
Absolute; Unsur diposisikan relatif terhadap posisi pertama (tidak statis)
Fixed;
Unsur diposisikan relatif terhadap jendela browser
Relative; Elemen diposisikan relatif terhadap posisi normal, sehingga "left: 20" menambahkan 20 pixel ke
posisi KIRI elemen
Inherit;
Nilai dari properti posisi diwariskan dari elemen induk
Property Dan Value Pada Border
Properties
Value
Contoh
border-width: 10px;
border-width
px
border-top-width: 1.4em;
em
border-width: 1%;
%
border-width: medium;
medium
border-bottom-width:thin;
thin
border-right-width: thick;
thick
border-style: dashed;
border-style
dashed
border-left-style: dotted;
dotted
border-right-style: double;
double
border-style: groove;
groove
border-style: hidden;
hidden
border-bottom-style: inherit;
inherit
border: inset 20px blue;
inset
border-style: none;
none
border-top: ridge 8px;
ridge
border-color: #fff;
border-color
hex
color names border-top-color: green;
border-left-color: rgb(0,100,100);
rgb
border:solid rgba(0,0,0,0.3) 10px;
rgba
border-left: solid hsl(100,50%,25%);
hsl
border:double 2em hsla(45,20%,85%,0.6);
hsla
Property Dan Value Pada Border-Radius
Property
Values
Border-radius
10px;
border-top-left-radius
2em 0.5em;
border-top-right-radius
3em 2.5em;
border-bottom-right-radius 1em 2em;
2em 1em;
2em;
Keterangan
Garis melemgkung disemua sisi dengan ukuran 10px
Garis melengkung pada sisi atas dan kiri dengan ukuran berbeda
Garis melengkung pada sisi atas dan kanan dengan ukuran berbeda
Garis melengkung pada sisi bawah dan kanan dengan ukuran berbeda
Garis melengkung pada sisi bawah dan kiri dengan ukuran berbeda
Garis melengkung pada sisi bawah dan kiri dengan ukuran sama
Property Dan Value Pada Margin Dan Padding

Property
Values
Keterangan
margin
10px 5px 0px 5px; atas 5, kanan 5, bawah 0, kiri 10
margin-top
10px;
karak atas 10px
margin-right
5px;
jarak kanan 5px
margin-bottom 2em;
jarak bawah 2em
margin-left
3em;
jarak kiri 3en
padding
2em;
atas, kanan, kiri dan bawah 2em
Property Dan Value Pada Display
Property
Values
Keterangan
Display
None;
Berfungsi untuk menghilangkan atau menyembunyikan elemen yang diberi kode tersebut
Block;
Berfungsi untuk memberi blok baru atau baris baru seperti kode <br> dan <p>
Inline;
Berfungsi sama seperti kode span, yang memberi desain background berbeda hanya pada
elemen tersebut
Inline-block; jika layar tidak muat maka secara otomatis membuat baris baru.
Property CSS & HTML

Tipografi
Prinsip Utama Tipografi
Tipografi berbicara tentang kemudahan membaca teks (readability) dan kemudahan mengenali setiap huruf
dan kata (legibility). Tipografi menghidupkan teks dalam sebuah tulisan. Tipografi membuat teks menjadi
menarik, sehingga pembaca penasaran dan ingin membaca teks.
Typeface
Typeface merupakan karakter-karakter yang dirancang secara khusus untuk digunakan bersama-sama. Contoh
dari typeface: Times New Roman, Arial, Helvetica, Courier New, dan Calibri. Typeface juga
mencakup ketebalan, kemiringan, lebar, dan pembuat dari typeface tersebut. Pemilihan typeface pada sebuah
teks akan sangat berpengaruh terhadap mood pembaca.
Font
Font (dalam konteks tipografi web dan tipografi digital) berbicara mengenai file yang menyimpan typeface.
Font hanyalah medium yang digunakan oleh komputer untuk menampilkan typeface. Sebuah font dapat terdiri
dari banyak typeface. Misalnya, font Helvetica Nueue dapat saja memiliki typeface Hevetica Nueue,
Helvetica Nueue Bold, Helvetica Nueue Italic, Helvetica Nueue Condensed, dst.
Jenis Format Font Yang Bisa Digunakan Untuk Web Browser
o EOT (Embedded Open Type), format font yang hanya didukung oleh Internet Explorer, dan relatif
jarang digunakan.
o TTF (True Type) and OTF (Open Type), kedua format font ini merupakan format font yang paling
banyak digunakan.
o WOFF (Web Open Font Format), merupakan jenis format paling baru dan didesain secara khusus
untuk keperluan web. WOFF pada dasarnya adalah versi kompresi dari format TTF dan OTF. Web
browser dalam Android dan IE 8 kebawah tidak akan bisa mengaksesnya.
o SVG (Scalable Vector Graphic), bukan merupakan format khusus untuk font, melainkan format untuk
menyimpan gambar vector. Tidak didukung oleh IE dan Firefox. Hanya untuk iOS Safari versi 4.1 atau
sebelumnya.
Klasifikasi Huruf
o serif, jenis font yang memiliki kaki pada setiap hurufnya. Contoh: Times New Roman dan Georgia.
o sans-serif, jenis font yang tidak memiliki kaki pada setiap ujung karakternya. Contoh: Arial,
Verdana, Trebuchet MS, Helvetica, dan Calibri.
o monospace, tipe font yang lebar setiap karakternya sama panjangnya. Contoh: Courier, Courier New,
dan Andale Mono.
o cursive, jenis font yang meniru tulisan tangan atau kaligrafi. Contoh: Comic Sans.
o fantasy adalah font yang bersifat visual dengan karakter font khusus seperti font disney, matrix, dll.
Sistem Pengukuran Huruf

Satuan Ukuran Font: Pixel (px)
Satuan ukuran pixel relatif mudah dipahami karena ia tidak terikat dengan setingan browser. Dalam menulis
nilai satuan dalam pixel, tidak boleh terdapat spasi diatara angka dan px. Sebagai contoh, 16px adalah benar,
namun 16 px adalah salah (perhatikan karakter spasinya).
Satuan Ukuran Font: Persen (%)
Satuan persen adalah satuan yang bersifat relatif. Perhitungan ukuran persen akan mendapatkan ukuran font
dari setingan parent element. Apabila parent element ukuran fontnya tidak dinyatakan, maka perent element
akan ditentukan oleh ukuran default text web browser. Ukuran default web browser ini disebut sebagai base
text size yang umumnya berukuran 16px.
Satuan Ukuran Font: em
1em di dalam CSS sama dengan 100%, 0.5em sama dengan 50%, 1.2em sama dengan 120% dan seterusnya.
Konsep parent element dari pembahasan kita mengenai satuan persen juga berlaku untuk satuan em. Penulisan
0.5em dapat disingkat dengan menghapus angka 0, menjadi: .5em.
Satuan Ukuran Font: rem
CSS3 memperkenalkan satuan ukuran teks baru, yaitu rem. rem merupakan kependekan dari Root em,
dimana parent elemen untuk seluruh selector adalah tag <html> yang digunakan sebagai root. Karena rem
memiliki hanya satu parent elemen, sehingga tidak perlu menghitung efek parent elemen seperti satuan persen
dan em.
Property CSS Font
Merubah Jenis Font HTML dengan CSS (font-family)

Property font-family, membatasi jenis font yang dapat dipilih kedalam beberapa font umum yang terinstall di
dalam komputer.
body { font-family: Arial; }
p { font-family: Courier, monospace; }

div { font-family: Duru Sans, Verdana, sans-serif; }
<style>
Dalam memberikan nilai untuk nama font, terdapat beberapa aturan penulisan. Aturan tersebut adalah sebagai
berikut:
o Untuk setiap penulisan nama font, huruf pertama pada tiap kata harus
menggunakan huruf besar, contohnya: penulisan font arial harus ditulis
menjadi Arial. Tetapi aturan ini tidak berlaku untuk font
generik seperti monospace dan sans-serif.
o Untuk memisahkan antara satu font dengan font lainnya, gunakan tanda koma.
o Jika nama font memiliki spasi, maka harus ditulis didalam tanda kutip, seperti:
Times New Roman.
Menggunakan Font External dengan CSS (@font-face)

Cara Menggunakan Font External dalam CSS
- Letakkan font di dalam folder yang sama dengan kode HTML
- instruksi kepada CSS untuk menggunakan font external dengan perintah @font-face.
@font-face {
font-family: "Font Digital";
src: url('DIGITAL-7_2.TTF');
}
- Untuk dapat menggunakan font external, dibutuhkan pemanggilan property CSS dengan kode:
.digital {
font-family: "Font Digital";
}
Mengatasi keterbatasan dukungan format Font
Untuk keperluan ini, terpaksa membuat kode CSS dengan menggunakan semua format font yang ada.
@font-face {
font-family: 'Font Digital';
src: url('digital-7_2-webfont.eot');
src: url('digital-7_2-webfont.eot?#iefix') format('embedded-opentype'),
url('digital-7_2-webfont.woff') format('woff'),
url('digital-7_2-webfont.ttf') format('truetype'),
url('digital-7_2-webfont.svg') format('svg');
}
Untuk menkonversi berbagai format font, bisa menggunakan aplikasi dari:
http://www.fontsquirrel.com/tools/webfont-generator.
Menggunakan Google Font dengan CSS

Google Font adalah salah satu layanan yang disediakan Google untuk memudahkan web developer dalam
menghasilkan desain yang menarik dengan meyediakan font-font gratis. alamat: https://www.google.com/fonts.
Tutorial Memilih Font dari Google Font
1. buka situs Google Font di alamat: https://www.google.com/fonts.
2. klik tombol Add to Collection pada font yang diinginkan.
3. klik tombol Use yang berada di pojok kanan bawah.
4. akan menemunkan 4 opsi untuk mengatur cara penggunaan font.
a. Opsi pertama adalah memilih jenis-jenis huruf untuk font. Apakah font yang ingin digunakan
mencakup tulisan tebal (bold), miring (italic), atau keduanya (bold dan italic).
b. Opsi ke-dua adalah memilih karakter-set. Jika tidak membuat web yang akan menggunakan
huruf china atau jepang, biarkan pilihan ini sesuai dengan defaultnya (latin).
c. Opsi ke-tiga adalah memilih cara menghubungkan Google font dengan halaman HTML kita.
Google menyediakan 3 cara, yakni dengan menggunakan tag <link>, perintah CSS
@import, dan dengan JavaScript. Tinggal copy paste kode tersebut ke halaman HTML.
d. Opsi ke-empat adalah petunjuk cara penggunaan font tersebut di dalam CSS.
NB : Menggunakan google font, maka font hanya tampil ketika halaman HTML terkoneksi dengan internet.
Property CSS Font
Font Properties
o Font Family
o Font Size
o Font Style
o Font Variant
Layout
Unordered List
o Mengubah Tampilan Unordered List
Ordered List
o Mengubah Tampilan Ordered List
Posisi Teks List (Ordered dan Unordered)
Penggabungan Properti List
Definition List
Nested List
List Sebagai Menu
Warna Latar Belakang

Gambar Latar Belakang
o Perulangan Gambar Latar
o Posisi Gambar Latar
Penulisan Singkat Properti Background
Penggabungan Gambar Latar
Gradien
List
Box Model
o Properti Height dan Width
o Properti Margin dan Padding
Border
Penyusunan Elemen
o Penampungan Elemen
o Floating Element
o Pembangunan Layout Web Dasar
o Clear Fix
Grid
Pembuatan Grid
Background
o Font Weight
o Line Height
o Penulisan Singkat Properti Font
Text Properties
o Text Align
o Text Decoration
o Text Indent
o Text Shadow
o Text Transform
o Letter Spacing dan Word Spacing
Web Safe Font
Web Font
Elemen Navigasi
Menu Vertikal Menggunakan List
Menu Horizontal Menggunakan List
Menu Horizontal dengan Display:Inline
Menu Horizontal dengan Float
Multimedia
Menambahkan Gambar
o Mengubah Ukuran Gambar
o Perubahan Posisi Gambar
Menambahkan Suara (Audio)
o Sumber Suara Tambahan
Menambahkan Video
Elemen Figure dan Caption
Tabel
Form
Pembuatan Tabel
o Header dari Tabel
o Pembatas (Border) Tabel
o Menggabungkan Beberapa Sel
Struktur Tabel
o Table Caption
o Table Head, Body, dan Foot
Inisialisasi Form
Elemen Masukan Form
o Elemen Masukan Teks: TextField dan TextArea
o Elemen Pemilihan: Radio Button, Checkbox, dan Dropdown
o Elemen Tersembunyi
Tombol pada Form
o Tombol Pengiriman
o Tombol Penghapus Input
Organisasi Elemen Form
o Label
o Fieldset
o Legend
Validasi Masukan pada Form
Mengubah Tampilan Form
Memilih Elemen Berdasarkan Atribut pada CSS

Mengubah Tampilan Validasi Elemen Form
Mengubah Tampilan Elemen yang Sedang Diisikan Pengguna
Demo Perubahan Tampilan Form
==================================================================
JAVASCRIPT
Java script:
Penulisan Pada Tag
Penulisan Dengan Tag <Script>
Tipe Data
Variabel
Operator, If dan Perulangan

==================================================================
PHP
Pengenalan PHP
Tahukah Anda, PHP itu.....
1. Merupakan singkatan recursive dari PHP : Hypertext Prepocessor
2. Pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1994.
3. Harus ditulis di antara tag :
- <? dan ?>
- <?php dan ?>
- <script language=php> dan </script>
- <% dan %>
4. Setiap satu statement (perintah) biasanya diakhiri dengan titik-koma (;)
5. CASE SENSITIVE untuk nama identifier yang dibuat oleh user (berupa variable, konstanta, fungsi dll), namun
TIDAK CASE SENSITIVE untuk identifier built-in dari PHP. Jadi :
- $nama $Nama $NAMA
- hitungLuas() HitungLuas()
6.
- echo = ECHO
- while = WHILE
Mudah dipelajari.
Contoh Script PHP

<?php
echo "Saya Belajar PHP";
?>
Komentar dalam PHP

Seperti halnya bahasa pemrograman yang lain, komentar dalam suatu kode PHP tidak akan dieksekusi. Terdapat dua cara
memberikan komentar dalam PHP, yaitu:
- Diberikan tanda // di depan teks komentar. Perintah ini hanya bisa berlaku untuk komentar dalam satu baris
- Diberikan tanda /* di depan teks komentar dan diakhiri dengan */. Perintah ini dapat digunakan untuk komentar
yang terdiri lebih dari satu baris.
Contoh:
<?php
echo "Hello World!"; // Ini akan mencetak Hello World!
?>
<?php
/* Berikut ini adalah perintah
untuk menuliskan Hello World */
echo "Hello World!";
?>
Mengenal Variabel pada PHP

Variabel adalah suatu lokasi penyimpanan (di dalam memori komputer) yang berisikan data sementara yang nilainya
akan berubah-ubah setiap kali program dijalankan.
Mendefenisikan Variabel dalam PHP
$nama_variabel = nilai;
1.
Berikut ini adalah beberapa aturan penulisan nama variabel:

- Diawali dengan dollar sign atau tanda dollar ($)
- Nama variabel harus diawali dengan huruf atau underscore (_)
- Nama variabel hanya boleh dituliskan dengan alpha numeric a-z, A-Z, 0-9 dan underscore
- Nama variabel yang terdiri lebih dari satu kata, dapat dipisahkan dengan underscore (tidak boleh
menggunakan spasi)
- Nama variabel bersifat case sensitif, membedakan huruf besar dengan huruf kecil, jadi $nama dengan
$NaMa dianggap variabel yang berbeda
- Tidak harus dideklarasikan terlebih dahulu
2.
Menampilkan variable
<?php
$string_ku = "Hello.. Nama saya: ";
echo $string_ku;
?>
Berikut ini contoh menampilkan gabungan suatu nilai dari variabel yang berupa string.
<?php
$string_ku = "Hello. Nama saya: ";
$baris_baru = "<br>";
echo $string_ku."Ari".$baris_baru;
echo "Hi, Nama saya Ari. Kamu siapa? ".$string_ku.$baris_baru;
echo "Hi, Nama saya Ari. Kamu siapa? ".$string_ku."Amalia";
?>
NB : Untuk menggabungkan beberapa string menjadi satu digunakan operator dot (.)
Mengenal Konstanta dalam PHP

Konstanta (constant) adalah suatu lokasi penyimpanan (dalam memory) yang berisikan suatu nilai yang sifatnya tetap.
Mendefenisikan Konstanta dalam PHP
1. Menggunakan kata kunci (keyword) const.
const nama_konstanta = nilai_konstanta;
2. Menggunakan fungsi define.
define("nama_konstanta",nilai_konstanta);
NB : kata kunci const hanya dapat digunakan pada top-level scope, yakni harus dalam lingkungan global PHP. Sehingga
kita tidak bisa menggunakan const di dalam fungsi, loop, atau kondisi if. Jika butuh membuat konstanta di dalam sebuah
fungsi, maka harus menggunakan define.
Aturan penulisan Konstanta
- Konstanta php bersifat case sensitif
- Nama konstanta harus diawali dengan huruf atau underscore (_)
- Nama konstanta hanya boleh dituliskan dengan alpha numeric a-z, A-Z, 0-9 dan underscore
- Nama konstanta yang terdiri lebih dari satu kata, dapat dipisahkan dengan underscore (tidak boleh menggunakan
spasi)
- Nilai konstanta php tidak dapat diubah
- Konstanta hanya dapat berisi tipe data tertentu, yakni: boolean, integer, float dan string
contoh penulisan konstanta dalam PHP:
<?php
const situs = "www.google.com";
define("NAMA_ADMIN", "andre");
const _CITA2 = "Programmer Web";
define("GaJi", 5000000);
echo
echo
echo
echo
?>
situs; echo "<br />"; // www.google.com

NAMA_ADMIN; echo "<br />"; //andre
_CITA2; echo "<br />"; // Programmer Web
GaJi; echo "<br />"; // 5000000
Type Data dalam PHP

PHP mendukung delapan tipe data, yaitu:
Tipe data scalar

Scalar Type adalah tipe data yang hanya memuat satu data dalam variabel. Tipe Data yang termasuk kedalam Tipe Scalar
adalah:
Boolean
Tipe data boolean ini hanya memiliki 2 nilai, yaitu true (benar) dan false (salah).
Konversi tipe data lain menjadi boolean
- Integer 0, dianggap sebagai false
- Float 0.0, dianggap sebagai false
- String kosong () dan string 0 dianggap sebagai false
- Array tanpa elemen, dianggap sebagai false
- Objek dengan tanpa nilai dan fungsi, dianggap sebagai false
- Nilai null, dianggap sebagai false
Selain 6 kondisi diatas, sebuah variabel akan dikonversi menjadi true.
contoh penulisan tipe data boolean:
<?php
$benar=true;
$salah=false;
echo "benar = $benar, salah = $salah";
// hasil output: benar = 1, salah =
?>
Integer
Tipe data integer adalah tipe data yang berupa angka bulat. Nilai integer dapat bernilai positif (+) maupun negatif (-).
Jika tidak diberi tanda, maka diasumsikan nilai tersebut adalah positif.
contoh penulisan bilangan integer dalam PHP:
<?php
$umur=21;
$harga=15000;
$rugi=-500000;
echo $umur; //21
echo "<br />";
echo $harga; //15000

echo "<br />";
echo $rugi; //-500000
?>
Selain digunakan untuk menampung angka dengan base 10 (disebut juga angka desimal), tipe data integer digunakan
juga untuk menampung angka base 16 (hexadesimal), base 8 (octal), dan base 2 (binary).
Penulisan Angka Hexadesimal
Angka heksadesimal (atau hexadecimal) adalah angka khusus yang bilangan penyusunnya terdiri dari 16 digit, yaitu
angka 0-9, dan huruf A-F. Untuk membuat sebuah variabel integer berisi angka heksadesimal, sebelum karakter angka
didahului 0x. Karakter 0x ini menginstruksikan kepada PHP bahwa angka setelahnya adalah heksadesimal.
contoh penulisan bilangan integer heksadesimal dalam PHP:
<?php
$angka_desimal= 31;
$angka_heksadesimal=0x1F; //1F heksadesimal = 31 desimal
echo $angka_desimal; //31
echo "<br />";
echo $angka_heksadesimal; //31
?>
Penulisan Angka Oktal
Bilangan oktal adalah bilangan yang terdiri dari 8 digit, yaitu karakter 0-7. Untuk menuliskan bilangan oktal ke dalam
variabel PHP, kita menggunakan tanda 0 diawal angka.
contoh penulisan bilangan integer oktal dalam PHP:
<?php
$angka_desimal= 511;
$angka_oktal=0777; //777 oktal = 511 desimal
echo "<br />";
echo $angka_oktal; //511
?>
Penulisan Angka Biner
Bilangan biner (atau binary) adalah bilangan yang terdiri dari 2 digit saja, yaitu 0 dan 1. Di dalam PHP, angka integer
biner ditulis dengan awalan 0b (angka nol, dan huruf b).
contoh penulisan bilangan integer biner dalam PHP:
<?php
$angka_desimal= 222;
$angka_biner=0b11011110; //11011110 biner = 222 desimal
echo "<br />";
echo $angka_biner; //222
?>
NB : Pada contoh diatas, variable $angka_desimal dan $angka_heksadesimal, $angka_oktal, $angka_biner samasama ditampilkan dengan nilai desimal (PHP secara tidak langsung mengkonversi nilai $angka_heksadesimal menjadi
nilai desimal).
Floating-point
Tipe data Float (disebut juga tipe data floating point, atau real number) adalah tipe data angka yang memiliki bagian
desimal di akhir angka, atau memiliki floating point (floating point adalah istilah dalam bahasa inggris untuk menyebut
tanda titik yang menandakan bilangan desimal).
Penulisan Tipe Data Float
PHP mendukung 2 cara penulisan tipe data float, yang pertama yaitu penulisan desimal sehari-hari, seperti 0.17 atau
9.47 dan yang kedua berupa penulisan format scientific notation, seperti 0.314E1, atau 12.0E-3. Penggunaan scientific
notation digunakan untuk menyederhanakan penulisan, 0.314E1 adalah sama dengan 0.314*10^1 atau 3.14, dan 12.0E3 sama dengan 12.0*10^(-3), atau 0.012.
contoh penulisan bilangan float dalam PHP:
<?php
$angka_float1= 0.78;
$angka_float2= 14.99;
$angka_scientific1=0.314E1;
$angka_scientific2=0.3365E-3;
echo
echo
echo
echo
echo
echo
echo
?>
$angka_float1; // 0.78
"<br />";
$angka_float2; //14.99
"<br />";
$angka_scientific1; //3.14
"<br />";
$angka_scientific2; //0.0003365
String
Tipe data string adalah tipe data yang berupa kumpulan dari beberapa karakter. PHP menyediakan 4 cara penulisan tipe
data string, yakni Single Quoted, Double Quoted, Heredoc, dan Nowdoc.
Penulisan Tipe Data String dengan Single Quoted (Tanda Petik Satu)
Untuk string yang didalamnya juga terdapat tanda petik satu, kita harus mendahuluinya dengan karakter backslash (\)
agar tidak dianggap sebagai penutup string. Dan jika di dalam string anda ingin menulis tanda backslahs, kita harus
menulisnya dengan 2 kali (\\).
contoh penulisan tipe data string menggunakan metode single quoted:
<?php
$string1='Ini adalah string sederhana';
$string2='Ini adalah string
yang bisa memiliki beberapa
baris';
$string3='Dia berkata: "I\'ll be back"';
$string4='Anda telah berhasil menghapus C:\\xampp\\htdoc';
$string5='Kalimat ini tidak akan pindah ke: \n baris baru';
$string6='Variabel juga tidak otomatis ditampilkan $string1 dan $string3';
echo
echo
echo
echo
echo
echo
?>
$string1;
$string2;
$string3;
$string4;
$string5;
$string6;
echo
echo
echo
echo
echo
"<br>";
"<br>";
"<br>";
"<br>";
"<br>";
Penulisan Tipe Data String dengan Double Quoted (Tanda Petik Dua)
Dengan double quoted, kita bisa menulis karakter khusus seperti carriage return (\n), dan karakter tab (\t) dan diproses
dalam PHP. Metode double quoted akan memproses setiap variabel (ditandai dengan tanda $ didepan kata), dan
menampilkan nilai dari variabel tersebut.
Di karenakan metode double quoted melakukan pemrosesan terlebih dahulu, maka untuk menampilkan karakter khusus
seperti tanda petik (karakter ),tanda dollar (karakter $) dan tanda-tanda khusus lainnya, kita harus menggunakan
tanda backslash (karakter \).
Berikut adalah tabel karakter khusus untuk double quoted string:
Cara Penulisan String Karakter Yang Ditampilkan
\"
Karakter Tanda petik dua
\n
Karakter Newline
\r
Karakter Carriage return
\t
Karakter Tab
\\
Karakter Backslash
\$
Karakter Dollar Sign
\{
Karakter Pembuka Kurung Kurawal
\}
Karakter Penutup Kurung Kurawal
\[
Karakter Pembuka Kurung Siku
\]
Karakter Penutup Kurung Kurawal
\0 sampai \777
Karakter ASCII menggunakan nilai oktal
\x0 sampai \xFF
Karakter ASCII menggunakan nilai heksadesimal
Contoh penulisan tipe data string menggunakan metode double quoted:

<?php
$string1="Ini adalah string sederhana";
$string2="Ini adalah string
yang bisa memiliki beberapa
baris";
$string3="Dia berkata: \"I'll be back\"";
$string4="Anda telah berhasil menghapus C:\\xampp\\htdoc";
$string5="Kalimat ini akan akan pindah ke: \n baris baru";
$string6="Variabel akan otomatis ditampilkan: $string1 dan $string3";
echo
echo
echo
echo
echo
echo
?>
$string1;
$string2;
$string3;
$string4;
$string5;
$string6;
echo
echo
echo
echo
echo
"<br
"<br
"<br
"<br
"<br
\>";
\>";
\>";
\>";
\>";
Penulisan Tipe Data String Dengan Heredoc

Fitur ini digunakan untuk membuat tipe data string yang dapat berisi beberapa baris kalimat. Karakter khusus dan
variabel akan diproses oleh PHP, atau mirip dengan double quoted string.
Contoh penulisan tipe data string dengan heredoc:
<?php
$IPK=3.9;
$string1 = <<<end
Saya sedang belajar PHP
di duniailkom.com <br />
Kali ini tentang pembahasan
mengenai "PHP", <br /> dan berharap
bisa dapat IPK $IPK :)
end;
echo $string1;
?>
Seperti yang terlihat dari contoh diatas, fitur Heredoc ditandai dengan tanda <<< untuk memulai string, lalu diikuti
dengan karakter penanda akhir string. Dari contoh tersebut kata end pada awal string adalah penanda akhir string.
Anda bebas mengganti kata end dengan kata atau karakter lain, sepanjang kata tersebut tidak akan muncul didalam
string.
Setelah karakter penanda string ini, baris pertama setelahnya adalah awal dari string. String ini dapat mencakup beberapa
baris, sampai ditemukan karakter penanda string yang kita definisikan di awal (yaitu kata end).
Setelah ditemukan karakter penanda akhir string, maka fitur heredoc berakhir.
NB : tanda penututup heredoc (di dalam contoh diatas adalah kata end) dan tanda titik koma ; tidak
boleh ada spasi atau karakter apapun. Jika anda menuliskan seperti berikut ini: end ;
PHP akan mengeluarkan error: Parse error: syntax error, unexpected end of file.
Penulisan Tipe Data String Dengan Nowdoc
Fitur ini hampir sama dengan fitur Heredoc, namun dengan pengecualian karakter khusus dan variabel tidak akan
diproses oleh PHP, atau mirip dengan single quoted string.
contoh penulisan tipe data string menggunakan metode Nowdoc:
<?php
$IPK=3.9;
$string1 = <<< selesai
Saya sedang belajar PHP
di \n duniailkom.com <br />
Kali ini tentang pembahasan
mengenai "PHP", <br /> dan berharap
bisa dapat IPK $IPK :)
selesai;
echo $string1;
?>
Tipe data compound

Compound Type adalah Tipe Data yang dapat mempunyai lebih dari satu element. Tipe Data yang termasuk kedalam Tipe
Compound adalah:
Array
Array adalah sebuah tipe data bentukan yang terdiri dari kumpulan tipe data lainnya. Menggunakan array akan
memudahkan dalam membuat kelompok data, serta menghemat penulisan dan penggunaan variabel.
Object
Tipe Data ini adalah tipe data baru pada PHP yang dapat digunakan untuk membangun suatu program web yang
berbasiskan object oriented. Isi dari Tipe Data ini bisa berupa Fungsi dan Variabel dan bisa terdiri dari beberapa
element.
Tipe data khusus

Resource
Tipe Data Spesial yang satu ini di khususkan untuk menyimpan resource, sumber atau alamat. Variabel tersebut hanya
dapat diciptakan oleh suatu fungsi khusus yang mengembalikan nilai berupa resource seperti penggunaan fungsi fopen,
opendir, mysql_connect, mysql_query dan semacamnya.
Null
NULL adalah Tipe Data yang tidak memuat apapun. Setiap Variabel yang diset menjadi Tipe Data NULL ini akan
menjadikan Variabel tersebut kosong, seperti dalam penggunaan fungsi unset(). Cara untuk menset Variabel menjadi
NULL adalah dengan memasukan nilai NULL pada variabel yang dimaksud.
Contoh:
<?php
# Nilai awal $foo adalah 10
$foo = 10;
# $foo akan menjadi NULL
$foo = NULL;
?>
# Sama dengan memanggil unset()

unset($foo);
Pengertian Operand dan Operator
o Operand, adalah nilai asal yang digunakan didalam proses operasi.

o Operator, adalah instruksi yang diberikan untuk mendapatkan hasil dari proses operasi.
Contoh : operasi: 5+2. Angka 5 dan 2 adalah operand, sedangkan tanda tambah (karakter +) adalah operator.
Jenis Operator Berdasarkan Jumlah Operand

o
o
o
Operator unary, adalah operator yang hanya memiliki 1 operand, contohnya karakter (tanda minus). Tanda minus
digunakan membuat sebuah angka menjadi negatif, contohnya: -5, atau karakter + untuk menegaskan nilai positif,
contohnya: +5.
Operator binary, adalah operator yang memiliki 2 operand. Operator jenis ini adalah yang paling banyak digunakan,
misalkan 52, atau 10/3.
Operator Ternary, adalah operator yang memiliki 3 operand. Didalam PHP hanya dikenal 1 operator ternary, yaitu
operator kondisi (? :).
(expr1) ? (expr2) : (expr3)
Cara penggunaan ternary operator adalah membandingkan expr1 dan menghasilkan expr2 jika benar, atau menghasilkan
expr3 jika salah.
Contoh:
$nilai = 85;
echo $nilai > 70 ? 'Benar' : 'Salah'; //hasil Benar
Urutan Prioritas Operator dalam PHP

Associativity
Non-associative
Kiri
Kanan
Non-associative
Kanan
Kiri
Operator
Clone New
[] Array()
++ ~ (int) (float) (string) (array) (object) @
instanceof
!
* / %
Keterangan
Pembuatan object
Pembuatan array
Penambahan / pengurangan dan Casting type data
Testing type data
Logika
Aritmatika
Kiri
Kiri
Non-associative
Non-associative
Kiri
Kiri
Kiri
Kiri
Kiri
Kiri
Kanan
Kiri
Kiri
Kiri
Kiri
+ .
<< >>
< <= > >=
== != === !== <>
&
^
|
&&
||
? :
= += -= *= /= .= %= &= |= ^= <<= >>= =>
And
Xor
Or
,
Aritmatika dan String

Bitwise
Perbandingan
Perbandingan
Bitwise dan Referensi
Bitwise
Bitwise
Logika
Logika
Ternary
Assignment
Logika
Logika
Logika
Berbagai fungsi
NB : Kolom Associativity digunakan untuk melihat bagaimana arah proses operator dijalankan.
o kiri, contoh : operasi 5 3 1 diproses dari kiri ke kanan. 5 3 1 diproses menjadi (5 3) 1, dan hasilnya adalah 1.
o kanan, contoh : $a = $b = $c, akan diproses dari kanan terlebih dahulu, menjadi $a = ($b = $c).
o Non-associative, berarti operator itu tidak bisa digunakan secara berdampingan. Contoh : 4 < 6 > 2, tidak dapat
diproses, namun 1 <= 1 == 1 bisa diproses karena operator == memiliki urutan prioritas lebih rendah daripada <=.
Fungsi var_dump() dalam PHP

Karena sifat variabel dalam PHP yang tidak bertipe (Loosely Typed Language), dalam pembuatan program PHP sebuah
tipe variabel dapat berubah menjadi tipe lainnya. Proses konversi ini dilakukan secara otomatis oleh PHP, sehingga kita
memerlukan sebuah fungsi untuk menyetahui secara lebih detail tipe data dan nilai sebuah variabel. Untuk keperluan
inilah PHP menyediakan fungsi var_dump().
Cara Penulisan Fungsi var_dump()
Fungsi var_dump membutuhkan inputan variabel yang akan diperiksa.
Contoh:
$a= 5; $b=8; $c=4.5;
$hasil1=$a+$b;
$hasil2=$a+$c;
$hasil3=$a.$b;
echo "\$hasil1:"; var_dump($hasil1);."<br \>"; //int(13)
echo "\$hasil2:"; var_dump($hasil2);."<br \>"; //float(9.5)
echo "\$hasil3:"; var_dump($hasil3); //string(2) "58"
Dari tampilan hasil kode PHP tersebut, fungsi var_dump() selain menampilkan hasil variabel, juga memperlihatkan
jenis tipe dari variabel tersebut.
Operator Aritmatika pada PHP

Operator Aritmatika adalah operator matematis yang terdiri dari operator penambahan, pengurangan, perkalian,
pembagian, modulus, plus, dan minus.
Contoh
$a + $b
$a $b
$a * $b
$a / $b
$a % $b
Nama
Penjumlahan
Pengurangan
Perkalian
Pembagian
Modulus
Hasil
Jumlah $a dan $b.
Selisih $a dan $b.
Perkalian $a dan $b.
Pembagian $a dan $b.
Sisa $a dibagi $b.
Operator String dalam PHP

Dalam PHP, hanya terdapat 1 jenis operator String, yakni operasi penyambungan (concatenation) string. Operator ini
menggunakan karakter titik (.). Operator penyambungan string ini membutuhkan 2 inputan yang bertipe data string.
<?php
$a = "Hello ";
$hasil = $a . "World!";
echo $hasil; // Hello World!
echo "<br />";
$a = "belajar ";
$b = "PHP ";
$c = "di Duniailkom.com";
$hasil= "Saya sedang ".$a.$b.$c;

echo $hasil; // Saya sedang belajar PHP di Duniailkom.com
?>
Cara Alternatif: Penyambung string dengan kurung kurawal { }
<?php
$a = "Hello ";
$hasil = "{$a} World!";
echo $hasil; // Hello World!
echo "<br />";
$a = "belajar ";
$b = "PHP ";
$c = "di Duniailkom.com";
$hasil= "Saya sedang {$a}{$b}{$c}";
echo $hasil; // Saya sedang belajar PHP di Duniailkom.com
?>
Contoh diatas memanfaatkan sifat pendefenisian string menggunakan tanda kutip dua (double quote). Namun
kita tidak bisa menulis :
$hasil= "Saya sedang $a$b$c"; //akan menghasilkan error
Karena yang akan diproses PHP adalah 1 variabel saja, yakni $a$b$c. sehingga kita perlu menambahkan tanda
kurung kurawal (karakter { dan }) untuk memisahkan ketiga string menjadi {$a}{$b}{$c}.
Operator Bitwise dalam PHP

Operator bitwise (Bitwise Operators) adalah operator khusus yang disediakan PHP untuk menangani proses logika untuk
bilangan biner. Bilangan biner atau binary adalah jenis bilangan yang hanya terdiri dari 2 jenis angka, yakni 0 dan 1. Jika
operand yang digunakan untuk operator ini bukan bilangan biner, maka akan dikonversi secara otomatis oleh PHP
menjadi bilangan biner.
Contoh
$a & $b
$a | $b
$a ^ $b
~ $a
$a << $b
$a >> $b
Nama
And
Or
Xor
Not
Shift Left
Shift right
Hasil
Bit di set 1 jika kedua-duanya, yaitu $a dan $b bernilai 1.
Bit di set 1 jika nilai salah satu dari $a dan $b bernilai 1.
Bit diset 1 jika kedua nilai dari $a dan $b memiliki perbedaan.
Bit akan diset 1 jika $a bernilai 0 dan diset 0 jika $a bernilai 1.
Geser bit $a sebanyak $b langkah kekiri (setiap langkah berarti kalikan dengan dua)
Geser bit $a sebanyak $b langkah kekanan (setiap langkah berarti dibagi dengan dua)
Contoh:
<?php
$a=0b10110101;
$b=0b01101100;
echo "\$a = 10110101 = $a"; echo "<br />";
echo "\$b = 01101100 = $b"; echo "<br />";
echo "<br />";
echo "==Hasil Bitwise=="; echo "<br />";
$hasil = $a & $b;
echo "1. \$a & \$b = $hasil"; echo "<br />";
$hasil = $a | $b;
echo "2. \$a | \$b = $hasil"; echo "<br />";
$hasil = $a ^ $b;
echo "3. \$a ^ \$b = $hasil"; echo "<br />";
echo "4. ~\$a = ".~$a; echo "<br />";
$hasil = $a >> 1;
echo "5. \$a >> 1 = $hasil"; echo "<br />";
$hasil = $b << 2;
echo "6. \$b << 2 = $hasil"; echo "<br />";
?>
Berikut perhitungan bitwise and:

$a =
10110101
$b = 01101100
-------$a & $b = 00100100 = 36 (desimal)
Berikut perhitungan bitwise or:
$a =
10110101
$b = 01101100
-------$a | $b = 11111101 = 253 (desimal)
Berikut perhitungan bitwise xor:
$a =
10110101
$b = 01101100
-------$a ^ $b = 11011001 = 217 (desimal)
Berikut perhitungan bitwise Shift right:
$a = 10110101 = 181
$a >> 1 = 1011010 = 90 (desimal)
Operator shift right menggeser nilai biner variabel $a ke arah
kanan, dan digit paling kanan akan dihapus. Operator shift right ini
akan menghasilkan nilai asal / 2. Dalam contoh, hasilnya adalah
180/2 = 90 (dibulatkan).
Berikut perhitungan bitwise Shift left:
$b
= 01101100 = 108
$b << 2 = 0110110000 = 432 (desimal)

Perhitungan bit not ini sedikit membingungkan, karena jika kita hanya membalikkan seluruh bitnya saja, hasilnya tidak sesuai dengan apa
yang dihitung oleh PHP, seperti contoh perhitungan berikut:
$a = 10110101
-------------------------~$a = 01001010 = 74 (desimal) ==> salah ???
Dari hasil menjalankan program, dapat dilihat bahwa ~$a = -182, darimanakah angka ini?
Hal ini terkait dengan cara PHP menyimpan angka biner dengan 32 bit. PHP menyimpan bit dalam perhitungan matematis komputer yang
di sebut dengan Twos complement
Cara perhitungan singkatnya adalah sebagai berikut:
$a = 00000000000000000000000010110101 (32 bit)
-----------------------------------------------------------------~$a = 11111111111111111111111110110101 (32 bit negative)
Flip & -1 = 00000000000000000000000010110101 - 1
~$a = -182 (desimal) ==> benar
Karena PHP memproses menggunakan 32 bit, maka kita harus mengikutkan seluruh bit 0 yang berada di depan angka biner dengan
total 32 digit, lalu menegatifkannya. Jika angka paling kiri terdapat angka 1, maka ini adalah instruksi kepada PHP bahwa hasilnya akan
negatif, dan hasil negatif di flip (dinegatifkan kembali), lalu dikurang 1, sehingga menjadi -182 dalam desimal.
Operator Assignment pada PHP

Operator assignment adalah operator untuk menambahkan, atau memasukkan sebuah nilai kedalam variabel. PHP
memiliki 3 jenis operator assigment, yaitu :
Assignment by Value, adalah proses pemberian nilai kedalam sebuah variabel dengan meng-copy nilai atau
value dari variabel lain. PHP menggunakan tanda sama dengan (=) untuk Assignment by Value. Contoh :
<?php
$a = 20;
$b = 15;
$c = 5;
echo "\$a = $a, \$b = $b, \$c = $c";
echo "<br />";
// hasil proses: $a = 20, $b = 15, $c = 5
$a = $b = $c+5;
echo "\$a = $a, \$b = $b, \$c = $c";
// hasil proses: $a = 10, $b = 10, $c = 5
?>
$a = 20, $b = 15, $c = 5
$a = 10, $b = 10, $c = 5
Assigment array, adalah operator assigment untuk menginput nilai kedalam array. Operator ini menggunakan
tanda panah (=>).
Assignment by Reference, adalah operator assigment khusus yang digunakan untuk men-copy nilai referensi
dari sebuah variabel. Assignment by Reference dalam PHP menggunakan operator (= &). Contoh :
<?php
$a = 20;
$b = &$a;
echo "\$a = $a, \$b = $b";
echo "<br />";
// hasil proses: $a = 20, $b = 20
$a = $a + 5;
echo "\$a = $a, \$b = $b";
echo "<br />";
// hasil proses: $a = 25, $b = 25
$b = $b + 10;
echo "\$a = $a, \$b = $b";
// hasil proses: $a = 35, $b = 35
?>
Saya mendefenisikan 3 variabel: $a, $b, dan

$c dengan operator assigment by value.
Perhatikan pada baris terakhir, dimana saya
menuliskan kode $a = $b = $c+5, yang
urutan pemrosesannya di mulai dari kanan
ke kiri, sehingga yang diproses oleh PHP
menjadi:$a = ($b = ($c+5)).
Operator Gabungan Assignment
Saya membuat 2 buah variabel, $a dan $b. Variabel $a saya

input dengan nilai 20, sedangkan variabel $b men-copy nilai
referensi dari variabel $a. Selanjutnya saya tampilkan kedua
variabel tersebut menggunakan perintah echo.
Pada baris ke-9 saya menambahkan nilai variabel $a dengan
5, lalu menampilkan hasil kedua variabel tersebut.
Selanjutnya pada baris ke-14 saya menambahkan $b dengan
10, lalu menampilkan hasilnya :
$a = 20, $b = 20
$a = 25, $b = 25
$a = 35, $b = 35
Seperti yang dapat dilihat, bahwa kedua variabel ($a dan $b),
seolah-olah saling terikat, sehingga ketika sebuah variabel
diubah nilainya, variabel yang lain juga ikut berubah.
Operator gabungan assigment adalah cara penulisan singkat operator dengan menggunaan sebuah operatror assigment
secara bersamaan dengan operator lainnya.
Assignment
x += y
x -= y
x *= y
x /= y
x %= y
a .= b
x ^= y
x &= y
x |= y
Hasil
x=x+y
x=xy
x=x*y
x=x/y
x=x%y
a=a.b
x=x^y
x=x&y
x=x|y
Nama
Plus-Equals
Minus-Equals
Multiply-Equals
Devide-Equals
Modulus-Equals
Concatenate-Equals
Bitwise-XOR-Equals
Bitwise-AND-Equals
Bitwise-OR-Equals
Contoh:
<?php
$b = 10;
$b += 5; // sama dengan $b = $b + 5;
$b -= 10;// sama dengan $b = $b - 10;
echo "\$b = $b";
?>
Operator Perbandingan pada PHP

Sesuai dengan namanya, operator perbandingan membandingkan nilai dari 2 operand. Hasilnya selalu salah satu dari
TRUE atau FALSE. Hasil perbandingan akan bernilai TRUE jika kondisi perbandingan tersebut benar, atau FALSE jika
kondisinya salah.
Operator ini membuat anda bisa melakukan pembandingan apakah beberapa elemen sama, identik, kurang dari atau lebih
besar dari yang lain.
Contoh
$a == $b
$a === $b
Name
Sama dengan
Identik
$a != $b
$a <> $b
$a !== $b
Tidak sama dengan

Tidak sama dengan
Tidak identik
$a < $b
$a > $b
$a <= $b
$a >= $b
Kurang dari
Lebih besar dari
Kurang dari atau sama dengan
Lebih besar dari atau sama dengan
Result
BENAR jika $ a sama dengan $b.
BENAR jika $a sama dengan $b, dan keduanya memiliki tipe yang
sama.
BENAR jika $a tidak sama dengan $b.
BENAR jika $a tidak sama dengan $b.
BENAR jika $a tidak sama dengan $b, atau tidak memiliki tipe yang
sama.
BENAR jika $a kurang dari $b.
BENAR jika $a lebih besar dari $b.
BENAR jika $a kurang dari atau sama dengan $b.
BENAR jika $a lebih besar dari atau sama dengan $b.
Contoh:
<?php
echo "1. 12 < 14 = "; var_dump(12<14); // bool(true)
echo "<br />";
echo "2. 14 < 14 = "; var_dump(14<14); // bool(false)
echo "<br />";
?>
Operator Logika pada PHP

Operator Logika adalah operator yang digunakan untuk membandingkan 2 kondisi logika, yaitu logika benar (TRUE)
dan logika salah (FALSE). Operator logika sering digunakan untuk kodisi IF, atau untuk keluar dari proses perulangan
(looping).
Contoh
$a and $b
$a or $b
$a xor $b
! $a
$a && $b
$a || $b
Nama
And
Or
Xor
Not
And
Or
Hasil
BENAR jika baik $a dan $b keduanya BENAR.
BENAR jika salah satu dari $a atau $b BENAR.
BENAR jika salah satu dari $a atau $b BENAR, tetapi tidak keduanya.
BENAR jika $a tidak BENAR.
BENAR jika baik $a dan $b keduanya BENAR.
BENAR jika salah satu dari $a atau $b BENAR.
Contoh:
<?php
$hasil1 = true and false;
echo '$hasil1 = ';
echo var_dump($hasil1)."<br/>"; // $hasil1 = bool(true)
$hasil2 = (true and false);
echo '$hasil2 = ';
echo var_dump($hasil2)."<br/>"; // $hasil2 = bool(false)
?>
Mengubah Tipe Data PHP (Type Juggling dan Type Casting)
Type Juggling, adalah sebuah proses untuk menentukan jenis tipe data yang cocok dengan operasi saat itu,
dan PHP akan menkonversinya secara langsung secara otomatis.
Contoh:
<?php
<?php
$a=12;
$a=12;
$b="9 kucing";
$b="9 kucing";
echo $a+$b; // 21
echo $a AND $b;
?>
?>
Dalam kode diatas, mendefenisikan variabel $a sebagai Operator AND membutuhkan 2 inputan bertipe
integer (angka) dan variabel $b sebagai string. Operasi boolean, yakni nilai TRUE atau FALSE. Namun karena
penambahan seharusnya membutuhkan 2 inputan menggunakan tipe integer 12 dan type string 9
berupa angka, namun seperti yang terlihat ketika kucing, maka kedua operand ini akan dikonversi
program dijalankan, PHP dengan senang hati akan menjadi TRUE. Maka hasil $a AND $b pada contoh
menjalankan perintah tersebut tanpa mengeluarkan program diatas adalah TRUE. Dan PHP akan
error. 12+9 kucing akan menghasilkan nilai 21.
mengkonversi boolean TRUE menjadi string 1.
Type Casting, adalah proses perubahan type data secara manual dengan menggunaan instruksi di dalam kode
program.
Contoh:
<?php
$a=12;
$b="9 kucing";
echo $b;
//9 kucing
echo "<br />";
echo (integer) $b; //9
echo "<br />";
echo (boolean) $b; //1
?>
Pada baris ke 6, echo (integer) $b, perintah ini adalah men-casting tipe data yang ada didalam variabel $b (apapun
tipe datanya) menjadi integer. Dan pada baris ke 8. Adalah perintah untuk meng-casting tipe data $b menjadi
boolean.
Jenis-jenis perintah casting yang ada dalam PHP adalah sebagai berikut:
o (int), (integer)
: mengubah tipe data menjadi integer
o (bool), (boolean)
: mengubah tipe data menjadi boolean
o (float), (double), (real) : mengubah tipe data menjadi float
o (string)
: mengubah tipe data menjadi string
o (array)
: mengubah tipe data menjadi array
o (object)
: mengubah tipe data menjadi object
o (unset)
: mengubah tipe data menjadi NULL (PHP 5)
Aturan konversi data dalam PHP
o Konversi menjadi Integer
- Jika tipe data asal adalah float, maka perubahan menjadi integer akan membuang tanda
desimal dari float. Contohnya, 3.94 akan menjadi integer 3.
- Jika tipe data asal adalah boolean, maka nilai TRUE akan menjadi 1, dan FALSE manjadi 0.
- Jika tipe data asal adalah string, maka string akan dipotong pada angka terakhir yang
ditemukan, mulai dari awal string. Namun jika diawal string tidak terdapat angka, maka string
akan dikonversi menjadi 0. Contohnya, 9 Kucing akan menjadi integer 9, 999 kucing
akan menjadi integer 999. kucing 99 akan menjadi 0, 14,5 kali gaji akan menjadi integer
14 (karena desimal akan dibuang dari string)
- Jika tipe data asal adalah array kosong (tanpa data) maka jika dikonversi menjadi integer
akan menghasilkan 0, namun array dengan isi data minimal 1, akan dikonversi menjadi 1.
o Konversi menjadi float
Secara garis besar, konversi menjadi float hampir sama dengan konversi menjadi integer,
dengan perbedaan jika tipe asal adalah string, maka angka desimal akan diperhitungkan,
misalnya 14,5 kali gaji akan dikonversi menjadi float 14,5.
Konversi menjadi boolean
- Jika tipe data asal adalah integer, maka angka 0 akan dikonversi menjadi FALSE, selain itu,
akan dikonversi menjadi TRUE. Contohnya 0 -> FALSE, 1 -> TRUE, -1 -> TRUE.
- Jika tipe data asal adalah float, maka angka 0.0 akan dikonversi menjadi FALSE, selain itu,
akan dikonversi menjadi TRUE. Contohnya 0.0 -> FALSE, 1,9 -> TRUE, -1,6 -> TRUE.
- Jika tipe data asal adalah string, maka string (tanpa karakter) akan dikonversi menjadi
FALSE, string 0 (string dengan karakter nol) akan dikonversi menjadi FALSE, selain itu
akan dikonversi menjadi TRUE. Contohnya: -> FALSE, ->TRUE (karakter spasi), 0
-> FALSE.
- Jika tipe data asal adalah array, maka array kosong (tanpa data) akan dianggap FALSE, selain
itu array akan dikonversi menjadi TRUE.
Mengenal Bersyarat IF & CASE pada PHP

Statement IF pada PHP
Hanya mengeksekusi kode HANYA JIKA kondisi bernilai true.
if (kondisi) {
// Tulis kode yang ingin anda eksekusi jika kondisi benar di sini
}
Contoh:
<?php
$WarnaKesukaan = "biru";
if ($WarnaKesukaan == "biru") {
print ("Saya juga suka warna biru lho!");
}
?>
Statement Else
Mengeksekusi sebagian kode yang berada pada kondisi true, dan beberapa kode lain pada kondisi false.
if (kondisi) {
// Tulis kode yang ingin anda eksekusi jika kondisi benar di sini
} else {
// Tulis kode yang ingin anda eksekusi jika kondisi salah di sini
}
Contoh:
<?php
$WarnaKesukaan = "kuning";
} else {
print ("Anda tidak suka biru?! Dasar!");
}
?>
Statement ElseIF
Mengerjakan beberapa blok kode untuk di eksekusi secara langsung sesuai dengan hasil kondisi yang ada.
if (kondisi) {
// Tulis
} elseif {
// Tulis
} else {
// Tulis
}
Contoh:
<?php
$WarnaKesukaan
kode yang ingin anda eksekusi jika kondisi benar

kode yang ingin anda eksekusi jika kondisi pertama salah di sini
kode yang ingin anda eksekusi jika semua kondisi salah di sini
= "biru";

} elseif ($WarnaKesukkan == "kuning") {
print ("Anda menyukai warna kuning");
} else {
print ("Anda tidak suka biru?! Dasar!");
}
?>
Statement Switch
Mengerjakan 1 pekerjaan yang bernilai true dari beberapa blok kode untuk di eksekusi.
switch (n){
case label1:
//kode yang akan dijalankan jika n=label1;
break;
case label2:
break;
case label3:
break;
...
default:
//kode yang akan dijalankan jika n berbeda dari semua label;
}
Contoh:
<?php
$favcolor="merah";
switch ($favcolor) {
case "merah":
echo "Warna favoritmu adalah merah!";
break;
case "biru":
echo " Warna favoritmu adalah biru!";
break;
case "hijau":
echo " Warna favoritmu adalah hijau!";
break;
default:
echo " Warna favoritmu adalah tidak merah, biru, atau hijau!";
}
?>
NB : Penggunaan option DEFAULT pada SWITCH adalah optional. Bisa untuk tidak memberikan DEFAULT jika
memang tidak diperlukan.
Mengenal Looping pada PHP

Penjelasan parameter :
o Inisiasi
: sebagai kondisi awal dari perulangan, digunakan untuk menge-set penghitung / pembilang.
o Kondisi
: kondisi yang harus dipenuhi agar perulangan dijalankan, kondisi ini akan diperiksa pada tiap
perulangan. Selama kondisi bernilai TRUE, maka perulangan akan terus dilakukan, dan hanya jika hasilnya FALSE,
maka proses perulangan berhenti.
o Counter
: digunakan untuk melakukan penambahan atau pengurangan hingga tercapainya kondisi.
o Statement
: bagian kode program yang akan diproses secara terus-menerus selama proses perulangan berlangsung.
NB : Parameter inisiasi dan penambahan bisa saja kosong atau bisa juga berisi banyak ekspresi yang di pisahkan dengan tanda
koma.
Jenis-jenis looping
Infinity loop
: perulangan dengan kondisi akhir tidak pernah terpenuhi, maka perulangan akan akan memproses
secara terus menerus. Infinity loop ini kadang diperlukan untuk kasus-kasus tertentu, namun kebanyakan kita akan
menghindari perulangan jenis ini.
Nested Loop
: perulangan di dalam perulangan (perulangan bersarang). Nested loop ini biasanya digunakan dalam
program yang membutuhkan pengaksesan kompleks, seperti array 2 atau 3 dimensi.
Perulangan While
inisiasi;
while (kondisi){
statement;
counter;
}
Perulangan while untuk situasi dimana kita membutuhkan kondisi perulangan yang tidak dapat dipastikan berapa kali
perulangan akan dilakukan.
Contoh:
<?php
$i = 1;
while($i <= 5){
echo "Perulangan ke " . $i . "<br/>";
$i++;
}
?>
Alternatif penulisan perulangan While

<?php
$i=1;
while ($i <= 10):
echo "$i";
echo "<br />";
$i=$i+1;
endwhile;
?>
Perbedaan dengan penulisan while dengan kurung kurawal adalah penanda awal blok yang menggunakan
tanda titik dua (:) dan pada akhir blok dengan perintah endwhile.
Nested loop dalam perulangan While

<?php
$i=0;
while ($i < 10){
$j=0;
while ($j < 10){
echo $i;
$j++;
}
echo "<br />";
$i++;
}
?>
Perulangan Do..while
inisiasi;
do {
statement;
counter;
} while (kondisi);
Statement do while hampir mirip dengan while , baris kode dalam do while akan dieksekusi terlebih dahulu sebanyak
satu kali baru kemudian melihat kondisi, bila kondisi true maka perulangan akan terus dilakukan.
Contoh:
<?php
$i = 1;
do {
echo "$i ";
$i+=2;
} while ($i <= 20);
?>
Nested loop dalam perulangan Do..While

<?php
$i = 0;
do {
$j = 0;
do {
echo "$i ";

$j++;
} while ($j < 10);
echo "$i "."<br />";
$i++;
} while ($i < 10);
?>
Perulangan For
for(inisiasi; kondisi; counter;){
statement;
}
Instruksi for membutuhkan syarat yaitu kita telah mengetahui berapa kali perulangan akan dilakukan pada saat penulisan
program. Untuk situasi dimana kita membutuhkan kondisi perulangan yang tidak dapat dipastikan berapa kali perulangan
akan dilakukan, maka kita tidak bisa menggunakan perulangan for.
Contoh:
<?php
for($x=1; $x<=5; $x++){
echo "Pengulangan ke " . $x . "<br/>;
}
?>
Alternatif penulisan perulangan For

<?php
for ($i= 1; $i <= 15; $i++) :
echo $i;
echo "<br />";
endfor;
?>
Perbedaan dengan penulisan for dengan kurung kurawal adalah penanda awal blok yang menggunakan tanda
titik dua (:) dan pada akhir blok dengan perintah endfor.
Infinity Loop dalam perulangan For

<?php
for ($i= 20; $i >= 1; $i++){
echo $i;
echo "<br />";
}
?>
Kesalahan dari struktur for tersebut adalah pada kondisi akhir dari
perulangan, dimana saya membuat $i >= 1, sehingga ketika nilai
awal variabel counter $1 adalah 20, dan dalam tiap perulangan $i
ditambah 1, maka nilai $i akan selalu lebih besar dari 1, sehingga
kondisi akhir tidak akan pernah terpenuhi, dan $i >= 1 akan selalu
benar.
Nested loop dalam perulangan For

<?php
for ($i=0; $i <10; $i++){
for ($j=0; $j <10; $j++){
echo $i;
}
echo "<br />";
}
?>
Perulangan Foreach
foreach ($nama_array as $value){
foreach ($nama_array as $key => $value){
statement (...$value...)
statement ($key...$value...)
}
}
Penjelasan:
o $nama_array adalah nama dari array yang telah didefenisikan sebelumnya.
o $value adalah nama variabel perantara yang berisi data array pada perulangan tersebut. Anda bebas
memberikan nama untuk variabel perantara ini.
o $key ini menampung nilai key dari array.
<?php
Struktur foreach biasanya digunakan untuk melakukan perulangan berdasarkan isi suatu array. Perulangan akan berakhir
jika isi array telah habis.
Contoh:
<?php
$nama = array("Andri","Joko","Sukma","Rina","Sari");
foreach ($nama as $val){
echo "$value";
echo "<br />";
}
?>
$nama = array(
1=>"Andri",
6=>"Joko",
12=>"Sukma",
45=>"Rina",
55=>"Sari");
foreach ($nama as $kunci =>$isi){
echo "Urutan ke-$kunci adalah $isi";
echo "<br />";
}
?>
Perintah Break dan Continue Dalam Perulangan PHP
Break, berfungsi sebagai perintah kepada web server untuk menghentikan perulangan secara prematur, yaitu
menghentikan perulangan di luar dari yang direncanakan.
Contoh:
<?php
<?php
for ($i=0; $i <100; $i++){
$i=0;
if ($i==13){
while ($i < 100){
break;
$i++;
}
if ($i==13){
echo $i;
break;
echo "<br />";
}
?>
echo $i;
echo "<br />";
}
?>
Contoh dalam penggunaan nested loop:
<?php
for ($i=0; $i <10; $i++){
for ($j=0; $j <10; $j++){
if ($i==4){
break;
}
echo $i;
}
echo "<br />";
}
Jika kita membuat perintah break pada perulangan $j
(inner loop), maka yang akan dihentikan hanya perulangan
$j saja, seperti pada contoh program diatas.
<?php
for ($i=0; $i <10; $i++){
for ($j=0; $j <10; $j++){
if ($i==4){
break 2;
}
echo $i;
}
echo "<br />";
}
Angka 2 bertujuan untuk memberitahu PHP bahwa
perintah break ditujukan untuk 2 level perulangan
diatasnya.
NB : Angka 2 bertujuan untuk memberitahu PHP bahwa perintah break ditujukan untuk 2 level perulangan
diatasnya. Jika membuat nested loop dengan 3 tingkatan, atau 3 level, maka menggunakan perintah break 3
untuk keluar dari perulangan terdalam.
Continue, hanya akan menghentikan perulangan untuk 1 iterasi saja, lalu proses perulangan akan dilanjutkan.
Contoh:
<?php
<?php
for ($i=0; $i <10; $i++){
$i=0;
if ($i==7){
while ($i < 100){
continue;
$i++;
}
if ($i==13){
echo $i;
continue;
echo "<br />";
}
}
echo $i;
echo "<br />";
}
Arti dari continue ini adalah sebuah instruksi kepada PHP untuk melewati sisa perintah dalam perulangan, dan
langsung lompat ke nilai counter berikutnya, yakni 8. Dari hasil program, anda tidak akan melihat angka 7
ditampilkan.
Contoh dalam penggunaan nested loop:
<?php
for ($i=0; $i <10; $i++){

for ($j=0; $j <10; $j++){
if ($i==4){
continue 2;
}
echo $i;
}
echo "<br />";
}
Dalam contoh diatas, perintah continue 2 akan menginstruksikan kepada PHP untuk tidak mengeksekusi
perulangan for pada perulangan terluar, yakni jika $i sama dengan 4, dan melanjutkan kedalam iterasi selanjutnya,
yakni $i=5.
Array di PHP
Pada bahasa pemrograman PHP ada tiga buah tipe array, diantaranya adalah :
o Array Berindeks
: Sebuah array yang memiliki index berupa angka.
o Array Asosiatif
: Sebuah array yang memiliki index berupa key yang terkait dengan nilai.
o Array Multidimensional : Sebuah array yang memiliki satu (atau lebih) array didalamnya.
Array Berindeks
Proses Pengisian Data
$kota = array("Jakarta", "Bandung", "Surabaya");
Dimana index akan terbentuk secara otomatis (index akan selalu dimulai dari 0). ATAU, index bisa di-set secara manual
seperti berikut :
$kota[0] = "Jakarta";
$kota[1] = "Bandung";
$kota[2] = "Surabaya";
Proses Menampilkan Data
Tanpa Perulangan
<?php
$jumlah = count($kota);
echo "Saya pernah ke " . $jumlah . " kota di Indonesia. Yaitu kota
" . $kota[0] . ", " . $kota[1] . " dan kota " . $kota[2];
?>
Menggunakan Perulangan
<?php
$jumlah = count($kota);
for($i = 0; $i < $jumlah; $i++){
echo $kota[$i] . "<br/>";
}
?>
Array Asosiatif
$umur = array(
"Budi"
"Toni"
"Susan"
);
=> "20",
=> "25",
=> "22"
$umur["Budi"] = "20";
$umur["Toni"] = "25";
$umur["Susan"] = "22";

Tanpa Perulangan
echo Umur Budi : . $umur[Budi]. <br/> ;
Dengan Perulangan
foreach($umur as $nama=>$umr) {
echo "Si " . $nama . " umurnya " . $umr . "<br/>";
}
Array Multidimensional
<?php
$kelas = array(
"1A" => array(
"Joko",
"Joni",
"Toni"
),
"1B" => array(
"Susan",
"Soni",
"Surti"
),
"1C" => array(
"Dono",
"Kasino",
"Indro"
)
);
?>
Tanpa Perulangan
echo "Siswa bernama " . $kelas["1C"][1] . " Berada di kelas 1C.";
Dengan Perulangan
<?php
while (list($indeks1, $nilai1) = each($kelas)){
printf("Kelas $indeks1 : <br>\n");
$nomor=1;
while (list($indeks2, $nilai2) = each($nilai1)){
printf("$nomor.$nilai2 <br>\n");
$nomor++;
}
}
?>
Berikut ini beberapa fungsi PHP untuk array:

Fungsi
array ()
array_change_key_case ()
array_chunk ()
array_column ()
array_combine ()
array_count_values ()
array_diff ()
array_diff_assoc ()
array_diff_key ()
array_diff_uassoc ()
array_diff_ukey ()
array_fill ()
array_fill_keys ()
array_filter ()
array_flip ()
array_intersect ()
array_intersect_assoc ()
array_intersect_key ()
array_intersect_uassoc ()
array_intersect_ukey ()
array_key_exists ()
array_keys ()
array_map ()
array_merge ()
array_merge_recursive ()
array_multisort ()
array_pad ()
Keterangan
Menciptakan sebuah array
Mengubah semua key dalam array ke huruf kecil atau huruf besar.
Membagi array menjadi potongan array
Mengembalikan nilai dari satu kolom dalam array masukan
Menciptakan sebuah array dengan menggunakan unsur-unsur dari satu "kunci" array dan satu "nilainilai" array
Menghitung semua nilai dari array
Membandingkan array, dan mengembalikan perbedaan (membandingkan nilai saja)
Membandingkan array, dan mengembalikan perbedaan (membandingkan kunci dan nilai)
Membandingkan array, dan mengembalikan perbedaan (membandingkan kunci saja)
Membandingkan array, dan mengembalikan perbedaan (membandingkan kunci dan nilai, menggunakan
fungsi kunci perbandingan yang ditetapkan oleh pengguna)
Membandingkan array, dan mengembalikan perbedaan (membandingkan kunci, menggunakan fungsi
kunci perbandingan yang ditetapkan oleh pengguna)
Mengisi array dengan beberapa nilai
Mengisi array dengan nilai lalu menentukan kunci
Memfilter nilai dari sebuah array menggunakan fungsi callback
Membalikkan / mengubah kunci dengan nilai-nilai yang terkait dalam array
Membandingkan array, dan mengembalikan pertandingan (membandingkan nilai saja)
Membandingkan array dan mengembalikan pertandingan (membandingkan kunci dan nilai-nilai)
Membandingkan array, dan mengembalikan pertandingan (membandingkan kunci saja)
Membandingkan array, dan mengembalikan pertandingan (membandingkan kunci dan nilai,
menggunakan fungsi kunci perbandingan yang ditetapkan oleh pengguna)
Membandingkan array, dan mengembalikan pertandingan (membandingkan kunci, menggunakan fungsi
Memeriksa apakah kunci tertentu ada dalam array
Mengembalikan semua kunci array
Mengirim setiap nilai array ke fungsi buatan pengguna yang mengembalikan nilai-nilai baru
Menggabungkan satu atau lebih array menjadi satu array
Menggabungkan satu atau lebih array ke dalam satu array rekursif
Mengurutkan beberapa array atau multi-dimensi array
Menyisipan sejumlah item tertentu dengan nilai tertentu ke dalam array
array_pop ()
array_product ()
array_push ()
array_rand ()
array_reduce ()
array_replace ()
array_replace_recursive ()
array_reverse ()
array_search ()
array_shift ()
array_slice ()
array_splice ()
array_sum ()
array_udiff ()
array_udiff_assoc ()
array_udiff_uassoc ()
array_uintersect ()
array_uintersect_assoc ()
array_uintersect_uassoc ()
array_unique ()
array_unshift ()
array_values ()
array_walk ()
array_walk_recursive ()
arsort ()
asort ()
compact ()
count ()
current ()
each ()
end ()
extract ()
in_array ()
key ()
krsort ()
ksort ()
list ()
natcasesort ()
natsort ()
next ()
pos ()
prev ()
range ()
reset()
rsort ()
shuffle ()
sizeof ()
sort ()
uasort ()
uksort ()
usort ()
Menghapus elemen terakhir dari array

Menghitung produk dari nilai-nilai dalam array
Menyisipan satu atau lebih elemen ke akhir array
Mengembalikan satu atau lebih kunci acak dari array
Mengembalikan sebuah array sebagai string, menggunakan fungsi yang ditetapkan pengguna
Menggantikan nilai-nilai dari array pertama dengan nilai-nilai dari array berikutnya
Menggantikan nilai-nilai dari array pertama dengan nilai-nilai dari array rekursif berikutnya
Mengembalikan sebuah array dalam urutan terbalik
Mencari array untuk nilai yang diberikan dan mengembalikan kunci
Menghapus elemen pertama dari array, dan mengembalikan nilai dari elemen yang dihapus
Mengembalikan bagian tertentu dari array
Menghapus dan menggantikan elemen tertentu dari sebuah array
Mengembalikan hasil penjumlah nilai dalam array
Membandingkan array, dan mengembalikan perbedaan (membandingkan nilai saja, menggunakan fungsi
fungsi built-in untuk membandingkan kunci dan fungsi yang ditetapkan pengguna untuk
membandingkan nilai)
dua fungsi kunci perbandingan yang ditetapkan pengguna)
Membandingkan array, dan mengembalikan pertandingan (membandingkan nilai saja, menggunakan
fungsi kunci perbandingan yang ditetapkan oleh pengguna)
menggunakan fungsi built-in untuk membandingkan kunci dan fungsi yang ditetapkan pengguna untuk
membandingkan nilai)
menggunakan dua fungsi kunci perbandingan yang ditetapkan pengguna)
Menghapus nilai ganda dari array
Menambahkan satu atau lebih elemen ke awal array
Mengembalikan semua nilai dari array
Menerapkan fungsi pengguna untuk setiap anggota array
Menerapkan fungsi pengguna secara rekursif untuk setiap anggota array
Mengurutkan array asosiatif descending berdasarkan nilai
Mengurutkan array asosiatif ascending berdasarkan nilai
Membuat array yang berisi variabel dan nilai-nilai array tersebut
Mengembalikan jumlah elemen dalam array
Mengembalikan elemen saat ini dalam array
Mengembalikan pasangan kunci dan nilai sekarang dari array
Mengatur pointer internal array pada elemen terakhir
Mengimpor variabel ke dalam tabel simbol current dari array
Memeriksa apakah nilai tertentu ada dalam array atau tidak
Mengambil kunci dari array
Mengurutkan array asosiatif descending berdasarkan kunci
Mengurutkan array asosiatif ascending berdasarkan kunci
Menetapkan variabel jika mereka bedara dalam sebuah array
Mengurutkan array menggunakan algoritma "natural order" case sensitif
Mengurutkan array menggunakan algoritma "natural order"
Memajukan posisi pointer didalam array
Alias dari current ()
Memundurkan posisi pointer didalam array
Menciptakan sebuah array yang berisi berbagai elemen
Mengatur pointer internal array pada elemen pertama
Mengurutkan array terindeks dalam urutan descending
Mengacak array
Alias dari count ()
Mengurutkan array terindeks dalam urutan ascending
Mengurutkan array berdasarkan nilai fungsi perbandingan yang dibuat oleh pengguna
Mengurutkan array berdasarkan kunci fungsi perbandingan yang dibuat oleh pengguna
Mengurutkan array menggunakan fungsi perbandingan yang dibuat oleh pengguna
Berikut merupakan beberapa contoh penggunaan fungsi-fungsi pada array:

asort() dan arsort()
Fungsi asort mengurutkan nilai array secara ascending (dari kecil ke besar), dengan mempertahankan nilai
indexnya. Sebaliknya fungsi arsort mengurutkan nilai array secara descending (dari besar ke kecil).
Berikut adalah contoh dari fungsi asort():

Contoh program
<?php
$x = array(
"d" => "1",
"c" => "3",
"b" => "0",
"a" => "5",
"e" => "9" );
asort($x);
foreach ($x as $key => $val) {
echo "[ $key ] = $val<br/>";
}
?>
Output yang dihasilkan

[b]=0
[d]=1
[c]=3
[a]=5
[e]=9
ksort() dan krsort()

ksort merupakan fungsi yang mengurutkan array pada PHP berdasarkan nilai pada indexnya, urut secara
ascending (dari kecil ke besar). Sedangkan krsort merupakan fungsi yang mengurutkan array pada PHP
berdasarkan nilai pada indexnya secara descending (dari besar ke kecil).
Contoh dari ksort():
<?php
[a]=5
$x = array(
[b]=0
"d" => "1",
[c]=3
"c" => "3",
[d]=1
"b" => "0",
[e]=9
"a" => "5",
"e" => "9" );
ksort($x);
}
?>
sort() dan rsort()

Fungsi sort() mengurutkan nilai pada array dengan tidak mempertahankan hubungan index dengan nilainya,
urut ascennding, dari nilai kecil ke besar. sedangkan rsort() merupakan kebalikan sort() yaitu mengurutkan
secara descending, dari besar ke kecil.
Contoh dari sort():
<?php
[0]=0
$x = array(
[1]=1
"d" => "1",
[2]=3
"c" => "3",
[3]=5
"b" => "0",
[4]=9
"a" => "5",
"e" => "9" );
sort($x);
}
?>
shuffle(), mengacak nilai pada array.

Contoh:
<?php
$x = array(
"d" => "1",
"c" => "3",
"b" => "0",
"a" => "5",
"e" => "9" );
shuffle($x);
}
?>
[0]=9
[1]=3
[2]=0
[3]=5
[4]=1
unset(), fungsi unset digunakan untuk menghapus array tertentu.

Contohnya:
<?php
[0]=1
$x = array( 1, 3, 0, 5, 9 );
[1]=3
unset($x[2]);
[3]=5
[4]=9
}
?>
array_values(), fungsi array_values() digunakan untuk menyusun kembali array yang ada (merapikan array).
Contoh:
<?php
[0]=1
$x = array( 1, 3, 0, 5, 9 );
[1]=3
unset($x[2]);
[3]=5
[4]=9
dengan fungsi array_values() menjadi
}
[0]=1
echo "dengan fungsi array_values() [ 1 ] = 3
menjadi <br/>";
[2]=5
$x=array_values($x);
[3]=9
}
?>
max() dan min()

fungsi max() dan min() digunakan untuk mencari nilai terbesar dan terkecil pada array.
Contoh:
<?php
Array ( [0] => 1 [1] => 3 [2] => 0 [3] => 5 [4] => 9 )
$x = array( 1, 3, 0, 5, 9 );
nilai max = 9, nilai min = 0
print_r($x);
$min = min($x);
$max = max($x);
echo "<br/>nilai max = $max, nilai
min = $min";
?>
array_search()
fungsi array_search() digunakan untuk melakukan pencarian terhadap index dari suatu array berdasarkan nilai.
Contoh:
<?php
Array ( [0] => 1 [1] => 3 [2] => 0 [3] => 5 [4] => 9 )
$x = array( 1, 3, 0, 5, 9 );
nilai max = 9, nilai min = 0
print_r($x);
index max = 4, index min = 2
$min = min($x);
$max = max($x);
echo "<br/>nilai max = $max, nilai
min = $min";
$index_min = array_search($min,$x);
$index_max = array_search($max,$x);
echo "<br/>index max = $index_max,
index min = $index_min";
?>
array_unique()
fungsi array_unique digunakan untuk memastikan nilai array bersifat unik atau tidak ada nilai kembar pada
array tersebut.
Contoh:
<?php
Array ( [0] => 1 [1] => 5 [2] => 0 [3] => 5 [4] => 1 )
$x = array( 1, 5, 0, 5, 1 );
dengan array_unique
print_r($x);
Array ( [0] => 1 [1] => 5 [2] => 0 )
$y = array_unique($x);
echo "<br/>dengan array_unique<br/>";
print_r($y);
?>
count(), fungsi count() digunakan untuk menghitung jumlah array yang ada.
Contoh:
<?php
Array ( [0] => 1 [1] => 5 [2] => 0 [3] => 5 [4] =>
$x = array( 1, 5, 0, 5, 1, 7, 3, 2 );
1 [5] => 7 [6] => 3 [7] => 2 )
print_r($x);
jumlah array x adalah = 8
$y = count($x);
echo "<br/>jumlah array x adalah = $y";
?>
Function di PHP
Fungsi (atau Function) dalam bahasa pemograman adalah kode program yang dirancang untuk menyelesaikan sebuah tugas
tertentu, dan merupakan bagian dari program utama. Fungsi dipanggil dengan menulis nama dari fungsi tersebut, dan diikuti
dengan argumen (jika ada). Argumen ditulis di dalam tanda kurung, dan jika jumlah argumen lebih dari satu, maka diantaranya
dipisahkan oleh karakter koma.
o
o
Agrumen, adalah sebutan untuk inputan fungsi pada saat pemanggilan fungsi.
Parameter, adalah sebutan untuk inputan fungsi pada saat pendefenisian fungsi tersebut.
Cara Penulisan Fungsi dalam PHP

Menggunakan Return
Tanpa Menggunakan Return
function
nama_fungsi
($parameter1, function
nama_fungsi
($parameter1,
$parameter2){
$parameter2){
// kode program fungsi
// kode program fungsi
return $nilai_akhir
}
}
Penjelasan:
- Kata function adalah instruksi kepada PHP bahwa kita akan membuat fungsi
- nama_fungsi adalah nama dari fungsi yang akan ditulis
- $parameter1, $parameter2 adalah variabel perantara yang akan menyimpan inputan yang diperlukan dalam
pemrosesan fungsi (argumen). Tergantung kebutuhan, anda bebas merancang seberapa banyak parameter yang
dibutuhkan.
- return adalah perintah khusus untuk fungsi, dimana kata return menginstruksikan kepada PHP bahwa pemrosesan
fungsi telah selesai. return $nilai_akhir berarti bahwa fungsi akan mengembalikan $nilai_akhir sebagai hasil dari
fungsi.
NB : Setelah memproses nilai inputan, hampir semua fungsi akan memberikan nilai hasil pemrosesan tersebut (walaupun
ada fungsi yang tidak memberikan nilai). Cara fungsi memberikan nilainya ini sering disebut dengan mengembalikan
nilai (return a value). Nilai yang dikembalikan oleh sebuah fungsi dapat ditampung ke dalam variabel, atau langsung
ditampilkan ke web browser.
Cara Pemanggilan Fungsi dalam PHP
Dengan Menggunakan Return by Value
$varibel_hasil_fungsi = nama_fungsi(argumen1, argumen2, argumen3);
nama_fungsi(argumen1, argumen2, argumen3);
Penjelasan:
- $varibel_hasil_fungsi adalah variabel yang akan menampung hasil pemrosesan fungsi. Tergantung fungsinya,
hasil dari sebuah fungsi bisa berupa angka, string, array, bahkan objek.
- nama_fungsi adalah nama dari fungsi yang akan dipanggil
- argumen1, argumen2 adalah nilai inputan fungsi. Banyaknya argumen yang dibutuhkan, tergantung kepada
fungsi tersebut. Jika sebuah fungsi membutuhkan argumen 2 buah angka, maka kita harus menginputnya sesuai
dengan aturan tersebut, atau jika tidak, PHP akan mengeluarkan error.
Contoh Pembuatan Fungsi PHP
Dengan Menggunakan Return by Value
<?php
//pembuatan fungsi
function perkalian($a, $b){
$hasil = $a*$b;
return $hasil;
}
<?php
//pemanggilan fungsi
echo "Luas Lingkaran dgn r = 7cm = ".luas(7);
$hasil = perkalian(4,5);
echo "Hasil 4 x 5 adalah $hasil";
echo "<br />";
echo "7 x 2 = ".perkalian(7,2);
?>

<?php
$x = 12;
//pembuatan fungsi
function fungsiku(){
global $x;
echo ($x * 2);
}
fungsiku();
?>
//pembuatan fungsi
function luas ($jari2){
return 3.14*$jari2*$jari2;
}
?>
<?php
//pembuatan fungsi
function perkalian($a, $b){
global $c;
$c= $a*$b;
}
perkalian(4,5);
echo "Perkalian 4 x 5 adalah $c";
echo "<br />";
echo "Perkalian 7 x 2 adalah ".perkalian(7,2)."$c";
?>
Pengecekan Tipe Data Argumen

Tergantung tujuannya, sebuah fungsi umumnya hanya memperbolehkan tipe data tertentu sebagai argumen. Misalnya,
untuk fungsi yang berhubungan dengan matematika, biasanya hanya membutuhkan argumen dengan tipe data angka
(integer atau float). Jika tipe data parameter tidak sesuai, maka fungsi tidak akan berjalan sebagaimana mestinya, dan
biasanya PHP akan mengeluarkan pesan error.
List fungsi pengecekan tipe data dalam PHP:
o is_array($var)
: fungsi pengecekan apakah tipe data adalah array
o is_bool($var)
: fungsi pengecekan apakah tipe data adalah boolean
o is_double($var)
: fungsi pengecekan apakah tipe data adalah float
o is_float($var)
o is_int($var)
: fungsi pengecekan apakah tipe data adalah integer
o is_integer($var)
o is_long($var)
o is_null($var)
: fungsi pengecekan apakah tipe data adalah null
o is_numeric($var)
: fungsi pengecekan apakah tipe data adalah angka (integer dan float)
o is_object($var)
: fungsi pengecekan apakah tipe data adalah objek
o is_real($var)
o is_resource($var)
: fungsi pengecekan apakah tipe data adalah resource (seperti variable untuk koneksi
ke database)
o is_scalar($var)
: fungsi pengecekan apakah tipe data adalah scalar (scalar adalah penyebutan untuk
tipe data dasar, seperti integer, float, string atau boolean. Array, object dan resource bukan scalar)
o is_string($var)
: fungsi pengecekan apakah tipe data adalah string
Contoh:
<?php
function pangkat($nilai, $pangkat){
if (is_numeric($nilai) AND is_int($pangkat)){ //pengecekan tipe data argument
//Jika argumen sesuai, maka jalankan proses fungsi
$hasil=1;
for ($i=1;$i<=$pangkat;$i++){
$hasil=$hasil*$nilai;
}
return $hasil;
} else{
//Bagian ini akan dijalankan jika tipe data argumen bukan angka
return "Tipe data argumen harus berupa angka";
}
//Test beberapa kasus inputan untuk fungsi pangkat()

echo pangkat(5,2);
echo "<br />";
echo pangkat(5.6,2);
echo "<br />";
echo pangkat(2,8);
echo "<br />";
echo pangkat(5,2.9);
echo "<br />";
echo pangkat("lima",2);
echo "<br />";
?>
Variabel Local Scope, Variabel Global Scope, dan Variabel Static Scope
Variabel Local Scope, adalah sebuah variabel yang di deklarasikan dalam suatu fungsi hanya bisa di akses
dalam fungsi tersebut.
Contoh:
<?php
<?php
$a = 5;
$b = 7;
function coba(){
$a=10;
$b=7;
}
function coba(){
$a=10;
echo $a;
echo $b;
}
coba();
echo $a; // 5
echo $b; // error:notice
?>
Setelah memanggil fungsi coba(). Dan ternyata nilai $a adalah 5, bukan
10. Dan ketika mengakses variabel $b, PHP akan mengeluarkan
peringatan bahwa variabel $b belum di defenisikan.
Hal ini terjadi karena variabel $a dan $b berada di dalam fungsi coba()
yang merupakan variabel yang berbeda dengan variabel $a yang berada
diluar fungsi. Jangkauan variabel $a dan $b hanya berada di dalam
fungsi.
coba();
?>
Pada program kali ini, mencoba
mengakses variabel $b dari dalam
fungsi coba(), namun PHP tidak
menemukan adanya variabel $b.
Variabel $b hanya dapat diakses
dalam ruang lingkup di luar fungsi
coba().
Variabel Global Scope, semua variabel yang di definisikan diluar fungsi / function. Variabel yang bersifat
global scope bisa di akses oleh semua bagian dari script diluar fungsi / function. Untuk mengakses variabel
global scope dalam suatu fungsi maka bisa digunakan kata kunci global.
Contoh:
<?php
<?php
$x = 12;
$a = 7;
function fungsiku(){
global $x;
echo ($x * 2);
}
fungsiku();
?>
function coba(){
global $a;
global $b;
$b=15;
echo $a; //7
echo $b; //15
}
coba();
echo $a; //7
echo $b; //15
?>
Kata kunci global membuat fungsi dapat mengakses variabel yang didefenisikan diluar fungsi.
Variabel Static Scope, atau variabel statis adalah jenis variabel yang mempertahankan nilainya pada setiap
pemanggilan fungsi (untuk variabel normal, nilai dari variabel tersebut akan secara otomatis dihapus pada saat
fungsi selesai dijalankan, dan akan dibuat ulang pada saat fungsi dipanggil). Namun jika sebuah variabel
dinyatakan sebagai static variabel, maka nilai variabel tersebut akan tetap dipertahankan walaupun fungsi telah
selesai dijalankan. Biasanya fungsi ini dimanfaatkan jika kita ingin menghitung berapa kali sebuah fungsi
dipanggil.
Contoh:
<?php
function coba(){
static $a=0;
$a=$a+1;
return "Ini adalah pemanggilan ke-$a fungsi coba() <br />";
}
echo coba();
echo coba();
echo coba();
echo coba();
?>
Jika keyword static pada baris ke-4 dihapus, maka variabel $a akan selalu bernilai 0, karena nilainya akan
dihapus pada setiap kali pemanggilan fungsi coba().
Variable Parameter
Variable Parameter adalah sebuah fitur dalam PHP dimana kita bisa membuat fungsi dengan jumlah parameter yang
bisa berubah-ubah (variable). PHP menyediakan 3 fungsi tambahan untuk mengakses argumen yang diinput pada saat
fungsi dipanggil. Ketiga fungsi ini digunakan secara bersamaan, yaitu:
o func_num_args()
: fungsi ini akan mengembalikan banyaknya jumlah argumen dalam
pemanggilan fungsi, apakah 1 argumen, 3 argumen, atau 10 argumen.
o func_get_args()
: fungsi ini akan mengembalikan seluruh nilai argumen dalam sebuah
fungsi. Hasilnya dalam bentuk array.
o func_get_arg(no_urut_argumen) : fungsi ini akan mengembalikan nilai dari argumen pada nomor urut yang
diberikan kepadanya.
NB : func_get_arg(no_urut_argumen) menghitung nomor urut argument dimulai dari index ke 0, sehingga
argumen kedua berada di index ke 1.
Contoh:
Untuk mengetahui fungsi dari setiap fungsi yang digunakan
<?php
function penambahan(){
//ambil variable parameter
$array_argumen = func_get_args();
$jumlah_argumen = func_num_args();
$nilai_argumen_ke_2 = func_get_arg(1); //index dimulai dari 0
//tampilkan hasil variable parameter
echo "Jumlah argumen: $jumlah_argumen";
echo "<br />";
echo "Nilai argumen ke-2: $nilai_argumen_ke_2";
echo "<br />";
echo "Array Argumen: ";
var_dump($array_argumen);
echo "<br />";
echo "<br />";
return;
}
echo "Rincian dari fungsi penambahan(1,2) : ";
echo "<br />";
penambahan(1,2);
echo "Rincian dari fungsi penambahan(5,4,3,2,1) : ";
echo "<br />";
penambahan(5,4,3,2,1);
echo "Rincian dari fungsi penambahan(0,6,8,19) : ";
echo "<br />";
echo penambahan(0,6,8,19);
?>
Code program yang sesungguhnya
<?php
function penambahan(){
//ambil variable parameter
$array_argumen = func_get_args();
$jumlah_argumen = func_num_args();
//proses penambahan
$nilai=0;
for ($i = 0; $i < $jumlah_argumen; $i++){
$nilai += func_get_arg($i);
}
return $nilai;
}
echo "penambahan(1,2) = ".penambahan(1,2);
echo "<br />";
echo "penambahan(5,4,3,2,1) = ".penambahan(5,4,3,2,1);
echo "<br />";
echo "penambahan(0,6,8,19,20,44,21) = ".penambahan(0,6,8,19,20,44,21);
?>
Include & Require
include(), digunakan untuk menyertakan suatu file kedalam proses yang sedang berjalan. Dibutuhkan satu
argumen yang akan menjadi string ke path file yang ingin disertakan. Kode dalam file yang disertakan akan
dijalankan ketika fungsi Include dipangil.
Aturan penulisan :
include "halaman_utama.php";
Contoh:
include index.php;
$inc = include(index.html);
var_dump($inc);
include_once(), sama seperti fungsi include, namun dijalankan hanya satu kali pemanggilan.
Aturan penulisan :
include_once "halaman_utama.php";
Contoh:
include_once index.php;
$inc = include_once (index.html);
var_dump($inc);
require(), digunakan untuk menyertakan dan menjalankan suatu file, namun melakukan validasi terhadap
sumber dan menghentikan proses jika ditemukan kesalahan.
Aturan penulisan :
require "halaman_utama.php";
Contoh:
require index.php;
$req = require(index.html);
var_dump($req);
require_once(), sama seperti fungsi require, namun dijalankan hanya satu kali pemanggilan.
Aturan penulisan :
require_once "halaman_utama.php";
Contoh:
require_once index.php;
$req = require_once (index.html);
var_dump($req);
Manajemen Session
Session adalah komponen atau fungsi pada PHP yang digunakan untuk menyimpan informasi sementara sebelum
browser ditutup atau user meninggalkan situs web. Session bekerja dengan membuat sebuah ID Unik yang disebut juga
session_id untuk setiap pengunjung dan menyimpan variable berdasarkan ID tersebut.
Kegunaan session:
Mencegah user mengakses halaman yang sifatnya private tanpa melakukan login.
Menjaga atau memelihara informasi akses dari seseorang pengakses atau pengguna aplikasi web.
Memungkinkan pelacakan akses pengguna.
Pengaturan pemakaiaan aplikasi oleh pengguna.
Meningkatkan layanan situs web.
Fungsi fungsi sesion PHP:

o session_start(), membuat sebuah session atau melanjutkan session sebelumnya berdasarkan pada
pengidentifikasi session via GET atau POST atau cookie.
o session_destroy(), berguna untuk menghapus dan mengakhiri session, sekaligus menghapus semua elemen yang
ada (melakukan reset).
o session_unset(), untuk menghapus elemen-elemen dari session, tetapi tanpa membuang atau mengakhiri session
itu sendiri.
o session_isset(), untuk memeriksa apakah sebuah variable sudah pernah diset atau belum / sudah memiliki value
atau belum.
o session_id(), untuk mendapatkan atau memberi nilai id pada saat session saat setiap kali pengunjung membuka
website, akan diberikan identifikasi session yang bersifat unik atau berbeda di setiap id session yang terbentuk.
o session_name(), untuk memperoleh atau memberikan nilai terhadap sebuah session. Nama session secara
standar adalah PHPSESSID. jika diinginkan nama lain, bisa ditulis dengan pendeklarasian session_name().
o session_register(), untuk mendaftarkan nilai session terhadap setiap variabel session yang akan menyimpan
nilai tersebut.
o session_unregister(), berfungsi untuk menghapus suatu variable yang disimpan di session.
o session_is_registered(), berfungsi untuk memeriksa apakah suatu variable ada / terdaftar dalam session.
NB : untuk membuat session dalam php harus menuliskan session_start() di page paling atas atau sebelum output yang
di tampilkan ke browser.
Konsep OOP ( Object Oriented Programming ) Pada PHP

Pemrograman Berbasis Objek atau Object Oriented Programming (OOP) adalah sebuah tata cara pembuatan
program (programming paradigm) dengan menggunakan konsep objek yang memiliki data (atribut yang menjelaskan
tentang objek) dan prosedur (function) yang dikenal dengan method. OOP adalah konsep pembuatan program dengan
memecah permasalahan program dengan menggunakan objek. Istilah Objek dalam Objek Oriented Programming
(OOP), sebenarnya terdiri dari class, property, method dan object.
Class, Object, Property, dan Method

Class
Class adalah cetak biru atau blueprint dari object. Class digunakan hanya untuk membuat kerangka dasar.
Yang akan kita pakai nantinya adalah hasil cetakan dari class, yakni object. Di dalam PHP, penulisan class
diawali dengan keyword class, kemudian diikuti dengan nama dari class. Aturan penulisan nama class sama
seperti aturan penulisan variabel dalam PHP.
Berikut adalah contoh penulisan class dalam PHP:
<?php
class laptop { //mendefeinisikan class dengan nama laptop
// isi dari class laptop...
}
?>
Property
Property (atau disebut juga dengan atribut) adalah data yang terdapat dalam sebuah class. Property ini
sebenarnya hanyalah variabel yang terletak di dalam class. Seluruh aturan dan tipe data yang biasa diinput
kedalam variabel, bisa juga diinput kedalam property. Aturan tata cara penamaan property sama dengan aturan
penamaan variabel.
Berikut adalah contoh penulisan class dengan penambahan property:
<?php
class laptop {
var $pemilik; //property
var $merk; //property
var $ukuran_layar; //property
// lanjutan isi dari class laptop...
}
?>
Keterangan:
Dari contoh diatas, $merk, $ukuran_layar dan $jenis_processor adalah property dari class laptop. Sebuah
class tidak harus memiliki property.
Method
Method adalah tindakan yang bisa dilakukan didalam class. Method pada dasarnya adalah function yang
berada di dalam class. Seluruh fungsi dan sifat function bisa diterapkan kedalam method, seperti
argumen/parameter, mengembalikan nilai (dengan keyword return), dan lain-lain.
Berikut adalah contoh penulisan class dengan penambahan method:
<?php
class laptop {
function hidupkan_laptop() {
//... isi dari method hidupkan_laptop
}
function matikan_laptop() {
//... isi dari method matikan_laptop
}
... //isi dari class laptop
}
?>
Keterangan:
Dari contoh diatas, function hidupkan_laptop() dan function matikan_laptop() adalah method dari class
laptop. Sebuah class tidak harus memiliki method.
Object
Object atau Objek adalah hasil cetak dari class, atau hasil konkrit dari class. Proses mencetak objek dari
class ini disebut dengan instansiasi (atau instantiation dalam bahasa inggris). Pada PHP, proses instansiasi
dilakukan dengan menggunakan keyword new. Hasil cetakan class akan disimpan dalam variabel untuk
selanjutnya digunakan dalam proses program.
Pendeklarasian Objek pada PHP:
$variable = new nama_class();
Contoh:
<?php
class laptop {
//... isi dari class laptop
}
$laptop_andi = new laptop(); //objek
$laptop_anto = new laptop();
?>
Keterangan:
Dari contoh diatas, $laptop_andi dan $laptop_anto merupakan objek dari class laptop. Kedua objek ini akan
memiliki seluruh property dan method yang telah dirancang dari class laptop.
Membuat Method dalam Pemrograman Objek PHP

Membuat Method dengan Argumen/Parameter
hak_akses nama_method ($argumen1, argumen2, dst...)
{
//... isi dari method
}
Contoh:
public hidupkan_laptop($pemilik, $merk)
{
//... isi dari method
}
Contoh saat dipanggil dari objek:
$laptop_andi(Andi,Lenovo);
Membuat Argumen dalam Method Class

Contoh:
class laptop {
private $pemilik="Anto";
private $merk="Acer";
public function hidupkan_laptop($pemilik,$merk) {
return "Hidupkan Laptop $merk punya $pemilik";
}
public function hidupkan_laptop_anto() {

return "Hidupkan Laptop $this->merk punya $this->pemilik";
}
}
$laptop_andi= new laptop();
echo $laptop_andi->hidupkan_laptop("Andi", "Lenovo");
echo $laptop_andi->hidupkan_laptop_anto();
Default Parameter
Contoh:
class laptop {
public function hidupkan_laptop($pemilik="Joko",$merk="Samsung") {
return "Hidupkan Laptop $merk punya $pemilik";
}
}
echo $laptop_andi->hidupkan_laptop();
echo $laptop_andi->hidupkan_laptop("Andi", "Lenovo");
Ketika method tersebut dipanggil tanpa menambahkan argumen, nilai Joko dan Samsung akan digunakan
sebagai nilai default, namun jika argumen ditulis, nilai argumen yang diinput akan menimpa nilai default ini.
Mengakses Objek dalam PHP

Contoh:
<?php
// buat class laptop
class laptop {
// buat property untuk class laptop
$pemilik;
// buat method untuk class laptop
function hidupkan_laptop() {
return "Hidupkan Laptop";
}
}
// buat objek (instansiasi)
$laptop_saya = new laptop();
// set property
$laptop_saya->pemilik="Saya";
// tampilkan property
echo $laptop_saya->pemilik; // Saya
echo "<br />";
// tampilkan method
echo $laptop_saya->hidupkan_laptop();
echo "<br />";
?>
Pendefenisian sebuah class dengan nama laptop.

Pendefenisian variabel class, atau dikenal dengan property.
Property tidak lain hanya variabel biasa yang berada di dalam
class.
Pendefinisian method dari class, kedua contoh ini hanyalah
fungsi (function) biasa yang akan mengembalikan nilai
berupa string.
Perintah untuk pembuatan objek dari class laptop (dikenal
dengan proses instansiasi). Variabel $laptop_saya saat ini
berisi objek dari class laptop. Mengakses property dan
method class laptop melalui objek $laptop_saya ini.
Cara untuk men-set nilai kedalam property dari objek
$laptop_saya. Perhatikan bahwa kita menggunakan tanda
panah (->) untuk mengakses property dari objek. Tanda
panah ini adalah operator khusus objek yang dikenal dengan
istilah Object Operator. Penulisan nama property juga
dilakukan tanpa menggunakan tanda $, sehingga property
$pemilik, diakses dengan:
$laptop_saya->pemilik.
Menampilkan nilai property dari objek $laptop_saya yang
sebelumnya telah di-set nilainya. Sama seperti pada saat menset nilai property, perlu juga menggunakan tanda panah (->),
kemudian diikuti nama property tanpa tanda $.
Pemanggilan method dari objek $laptop_saya. Cara
pengaksesannya sama dengan cara mengakses property,
namun karena method adalah fungsi, perlu menambahkan
tanda kurung () diakhir pemanggilan fungsi.
Inheritance (Pewarisan) dalam OOP

Inheritance atau Pewarisan/Penurunan adalah konsep pemrograman dimana sebuah class dapat menurunkan property
dan method yang dimilikinya kepada class lain. Konsep inheritance digunakan untuk memanfaatkan fitur code reuse
untuk menghindari duplikasi kode program.
Pendeklarasian Inheritance:
class induk {
//...isi class induk
}
class anak extends induk

{
//... class anak bisa mengakses
//... property dan method class induk
}
Penggunaan Inheritance dalam PHP

class komputer {
protected function beli_komputer() {
return "Beli komputer baru";
}
}
class laptop extends komputer {
protected function beli_laptop() {
return "Beli laptop baru";
}
}
class chromebook extends laptop {
protected function beli_chromebook() {
return "Beli chromebook baru";
}
public function beli_semua(){
$a = $this->beli_komputer();
$b = $this->beli_laptop();
$c = $this->beli_chromebook();
return "$a <br /> $b <br /> $c";
}
}
Mengakses Property dan Method Parent Class

Penurunan class ini akan memberikan permasalahan tersendiri ketika terdapat property atau method dengan nama yang
sama pada parent class dan child class, atau dikenal dengan istilah overridden property dan overridden method.
NB : Di dalam PHP, ketika nama property atau nama method child class memiliki nama yang sama dengan parent class,
maka yang dijalankan adalah property atau method milik child class.
Scope Resolution Operator PHP

Scope Resolution Operator adalah operator khusus di dalam PHP yang memungkinkan untuk mengakses
informasi khusus (overridden property atau overridden method, static property atau static method, serta
constanta class) dari dalam class. Scope Resolution Operator ditulis dengan tanda dua kali titik dua (double
colon), yakni ::. Untuk mengakses property dan method dari class induk, menggunakan perintah:
parent::nama_property;
parent::nama_method();
Contoh:
class komputer {
public $merk = "acer";
public $processor ="intel core i5";
public function lihat_spec() {
return "Spec Komputer: $this->merk,
$this->processor, $this->memory";
}
public function lihat_merk_komputer() {
return $this->merk;
}
}
public $merk = "asus";
public $processor ="intel core i3";
public function lihat_spec() {
return "Spec Laptop: $this->merk,
$this->processor, $this->memory";
}
public function lihat_spec_komputer() {
return parent::lihat_spec();
}
$gadget_baru = new laptop();
echo $gadget_baru->lihat_spec(), "<br />";
echo $gadget_baru->lihat_spec_komputer(), "<br />";
echo $gadget_baru->lihat_merk_komputer();
Enkapsulasi Objek (Public, Protected dan Private)

Enkapsulasi (encapsulation) adalah sebuah metoda untuk mengatur struktur class dengan cara menyembunyikan alur
kerja dari class tersebut. Struktur class yang dimaksud adalah property dan method. Dengan enkapsulasi, kita bisa
membuat pembatasan akses kepada property dan method, sehingga hanya property dan method tertentu saja yang bisa
diakses dari luar class. Enkapsulasi juga dikenal dengan istilah information hiding.
Untuk membatasi hak akses kepada property dan method di dalam sebuah class, Objek Oriented Programming
menyediakan 3 kata kunci, yakni Public, Protected dan Private.
Public
Ketika sebuah property atau method dinyatakan sebagai public, maka seluruh kode program di luar class bisa
mengaksesnya, termasuk class turunan.
Contoh:
public $pemilik;
public function hidupkan_laptop() {
}
Protected
Jika sebuah property atau method dinyatakan sebagai protected, berarti property atau method tersebut tidak
bisa diakses dari luar class, namun bisa diakses oleh class itu sendiri atau turunan class tersebut.
Contoh:
protected $pemilik;
protected function hidupkan_laptop() {
}
Private
Jika sebuah property atau method di-set sebagai private, maka satu-satunya yang bisa mengakses adalah class
itu sendiri. Class lain tidak bisa mengaksesnya, termasuk class turunan.
Contoh:
private $jenis_processor = "Intel Core i7-4790 3.6Ghz";
public function tampilkan_processor() {
return $this->jenis_processor;
}
Variabel $this dalam OOP

Variabel $this adalah sebuah variabel khusus dalam OOP PHP yang digunakan sebagai penunjuk kepada objek, ketika
kita mengaksesnya dari dalam class. Dalam manual PHP, $this disebut dengan istilah: pseudo-variable.
Contoh:
public $pemilik="Aku";
public function hidupkan_laptop() {
return "Hidupkan Laptop $this->pemilik";
}
public function restart_laptop() {
$hidupkan = $this->hidupkan_laptop();
$restart = $hidupkan;
return $restart;
}
Variabel $this merujuk kepada objek yang sedang menginstansiasi class.
Constructor dan Destructor
Constructor
Constructor adalah method khusus yang akan dijalankan secara otomatis pada saat sebuah objek dibuat
(instansiasi), yakni ketika perintah new dijalankan. Constructor biasa digunakan untuk membuat proses awal
dalam mempersiapkan objek, seperti memberi nilai awal kepada property, memanggil method internal dan
beberapa proses lain yang digunakan untuk mempersiapkan objek.
Destructor
Destructor adalah method khusus yang dijalankan secara otomatis pada saat sebuah objek dihapus. Di dalam
PHP, seluruh objek secara otomatis dihapus ketika halaman PHP dimana objek itu berada selesai diproses.
Tetapi kita juga dapat menghapus objek secara manual. Destructor biasanya digunakan untuk membersihkan
beberapa variabel, atau menjalankan proses tertentu sebelum objek dihapus.
Penggunaan Destructor dan Constructor

Contoh:
public function __construct(){
echo "Ini berasal dari Constructor Laptop";
}
public function hidupkan_laptop(){
return "Hidupkan Laptop $this->merk punya $this->pemilik";
}
public function __destruct(){
echo "Ini berasal dari Destructor Laptop";
}
echo $laptop_andi->hidupkan_laptop();
Keterangan:
Method __construct() merupakan constructor dari class laptop. Method ini akan dipanggil secara
otomatis ketika class laptop di instansiasi.
Method hidupkan_laptop() merupakan method biasa yang akan menampilkan hasil string. Untuk
menggunakan method ini, kita memanggilnya dari objek.
Method ketiga adalah __destruct() yang merupakan destructor dari class laptop. Method ini akan
dipanggil saat objek dihapus.
NB : Di dalam PHP, constructor dan destructor harus memiliki hak akses public. Jika mengubah hak akses
constructor atau destructor menjadi protected atau private, PHP akan mengeluarkan error.
Efek Inheritance dalam Constructor dan Destructor

Di dalam PHP, ketika child class memiliki constructor dan destructor sendiri, maka PHP akan melewatkan
constructor dan destructor parent class, kasus ini disebut dengan Overridden Constructor dan Overridden
Destructor. Dengan memanggil manual perintah parent::__construct() dan parent::__desctruct(), kita bisa
menjalankan seluruh constructor dan destructor dari parent class.
Contoh:
class laptop {
public function __construct() {
echo "Constructor dari class laptop <br />";
}
public function __destruct() {
echo "Destructor dari class laptop <br />";
}
}
class chromebook extends laptop {
public function __construct() {
parent::__construct();
echo "Constructor dari class chromebook <br />";
}
public function __destruct() {
echo "Destructor dari class chromebook <br />";
parent::__destruct();
}
}
$gadget_baru = new chromebook();
echo "Belajar OOP PHP <br />";
Constructor dan destructor parent class akan dijalankan jika child class tidak mendefenisikan constructor dan
destructor sendiri. Namun jika child class juga memiliki constructor dan desctructor, maka kita harus
memanggil constructor dan destructor parent class secara manual.
Static Property dan Static Method

Static property dan static method adalah property (variabel) dan method (function) yang melekat kepada class, bukan
kepada objek. Membuat static property dan static method dengan menambahkan keyword static setelah penulisan
akses level property atau method.
Contoh:
public static $harga_beli;
public static function beli_laptop() {
//...isi method
}
Karena static property dan static method adalah milik class, maka kita tidak perlu membuat objek untuk mengaksesnya,
tapi langsung menyebutkan nama class dan menggunakan operator ::.
Contoh:
echo laptop::$harga_beli;
echo laptop::beli_laptop();
Penggunaan Static Property dan Static Method

class laptop {
public $merk;
public $pemilik;
return "Beli Laptop";
}
}
laptop::$harga_beli=4000000;
echo "harga beli : Rp".laptop::$harga_beli;
echo "<br />";
Perhatikan cara mengkases keduanya tanpa membuat objek.
Mengakses Static Property dan Static Method Dari Class Itu Sendiri
Untuk mengakses static property dan static method, kita menggunakan keyword self::.
class laptop {
public $merk;
public $pemilik;

return "Beli laptop seharga Rp".self::$harga_beli;
}
laptop::$harga_beli=4000000;
Mengakses Static Property dan Static Method Parent Class

Untuk class dengan penurunan (inheritance), kita bisa menggunakan keyword parent::nama_property dan
parent::nama_method untuk mengakses static property dan static method dari parent class.
Contoh:
class komputer {
protected static function beli_komputer(){
return "Beli Komputer Baru";
}
}
class laptop extends komputer{
private static function beli_laptop(){
return "Beli Laptop Baru";
}
public static function beli_semua(){
echo parent::beli_komputer()."<br />";
echo self::beli_laptop();
laptop::beli_semua();
Konstanta Class dalam Pemrograman Objek

Konstanta Class atau class constant adalah konstanta yang berada di dalam class. Sebagaimana sifat konstanta
reguler, class constant juga tidak bisa diubah nilainya ketika sudah didefenisikan. Untuk membuat class constant di
dalam PHP, kita menggunakan perintah: const.
class nama_class {
const NAMA_KONSTANTA = nilai_konstanta;
}
Class constant seolah-olah berprilaku sebagai static property. Class constant juga terikat kepada class, bukan objek. Oleh
karena itu, untuk mengakses nilai konstanta, menggunakan double colon :: dengan perintah:
nama_class::nama_konstanta
Penulisan Konstanta Class dalam PHP

class laptop {
const DOLLAR = '12000';
}
echo "Harga dollar saat ini = Rp. ".laptop::DOLLAR;
PHP juga memiliki cara lain, yakni dengan mengakses constanta dari objek. Fitur ini hanya bisa digunakan
untuk PHP versi 5.3 keatas.
class laptop {
}
$laptop_baru = new laptop();
echo "Harga dollar saat ini = Rp ".$laptop_baru::DOLLAR;
PHP versi 5.3 keatas juga membolehkan pemanggilan property dengan nama class yang berada di dalam
variabel.
class laptop {
}
$nama = "laptop";
echo "Harga dollar saat ini = Rp. ".$nama::DOLLAR;
Mengakses Konstanta Class dari dalam Class itu Sendiri

Untuk mengakses class constant dari dalam class itu sendiri, PHP menggunakan cara yang sama dengan static
property, yaitu dengan perintah self::nama_konstanta.
Contoh:
class laptop {
public function beli_laptop($harga) {
return "Beli Komputer Baru, Rp. ".$harga*self::DOLLAR;
}
}
$laptop_baru=new laptop();
echo $laptop_baru->beli_laptop(400);
Mengakses Konstanta Class milik Parent Class

Pewarisan class (class inheritance) dari sebuah class kedalam class lain, juga akan menurunkan konstanta. Jika
kebetulan class yang diturunkan (child class) memiliki nama konstanta yang sama dengan parent class,
konstanta tersebut akan tertimpa. PHP menggunakan operator parent::nama_konstanta untuk mengakses
konstanta milik parent class.
Contoh:
class komputer {
}
public function beli_komputer($harga){

return "Beli Komputer Baru, Rp .".$harga*parent::DOLLAR;
}
public function beli_laptop($harga){
return "Beli Komputer Baru, Rp .".$harga*self::DOLLAR;
}
echo $laptop_baru->beli_laptop(400)."<br />";
echo $laptop_baru->beli_komputer(400);
Final Method dan Final Class

Dengan menambahkan keyword final kepada sebuah method, maka method tersebut tidak dapat didefenisikan ulang di
dalam child class. Dan jika sebuah class ditambahkan keyword final, maka class tersebut tidak bisa diturunkan sama
sekali.
Pendefinisian final method
Pendefinisian final class
final public function nama_method(){ final class nama_class {
//... isi method
//... isi class
}
}
Penggunaan Final Method dan Final Class dalam PHP

Contoh penggunaan final method
Contoh penggunaan final class
class komputer{
final public function lihat_spec(){
return "Lihat Spesifikasi Komputer";
}
}
public function lihat_spec(){
return "Lihat Spesifikasi Laptop";
}
}
// Fatal error: Cannot override
method komputer::lihat_spec()
// Fatal error: Class laptop may
inherit from final class (komputer)
not
final
Error ini menjelaskan bahwa kita tidak bisa menimpa

method lihat_spec() milik class komputer, karena
method tersebut telah di set sebagai final.
final class komputer{

function lihat_spec(){
return "Lihat Spesifikasi PC";
}
}
}
Dari hasil error yang didapat, PHP melarang kita

untuk menurunkan class komputer, karena telah di set
sebagai final class.
Abstract Class dan Abstract Method
Abstract class dan abstract method berfungsi untuk membuat kerangka bagi seluruh class dibawahnya.
Abstract Class
Abstract Class adalah sebuah class yang tidak bisa di-instansiasi (tidak bisa dibuat menjadi objek) dan
berperan sebagai kerangka dasar bagi class turunannya. Di dalam abstract class umumnya akan memiliki
abstract method. Abstract class digunakan di dalam inheritance (pewarisan class) untuk memaksakan
implementasi method yang sama bagi seluruh class yang diturunkan dari abstract class.
Contoh:
abstract class komputer {
// isi dari class komputer
}
o
Abstract Class Bisa Memiliki Property dan Method biasa

Sebuah abstract class bisa memiliki property dan method biasa layaknya sebuah class normal, namun
juga bisa memiliki abstract method. Dan hanya bisa mengakses property dan method ini dari class
turunan, karena abstract class tidak bisa diinstansiasi.
Contoh:
abstract class komputer{
abstract public function lihat_spec($pemilik);
public function hidupkan_komputer(){
echo "Hidupkan Komputer";
}
}
Class Turunan Harus Mengimplementasikan Abstract Method
Jika sebuah class diturunkan dari abstract class, maka class tersebut harus membuat ulang seluruh
abstract method yang terdapat dalam abstract class, dan juga harus sesuai dengan signature-nya.
Contoh:
abstract public function lihat_spec();
}
public function lihat_spec(){
return "Lihat Spec Laptop...";
}
public function beli_laptop(){
return "Beli Laptop...";
}
}
echo $laptop_baru->lihat_spec()."<br />";
echo $laptop_baru->beli_laptop();
o
Abstract Class Bisa Memiliki Static Method

Salah satu fitur khusus untuk abstract class di dalam PHP, adalah: abstract class bisa memiliki static
method.
Contoh:
abstract public function lihat_spec($pemilik);
public static function hidupkan_komputer(){
echo "Hidupkan Komputer";
}
}
echo komputer::hidupkan_komputer();
Abstract Method
Abstract Method adalah sebuah method dasar yang harus diimplementasikan ulang di dalam class anak
(child class). Abstract method ditulis tanpa isi dari method, melainkan hanya signature-nya saja. Signature
dari sebuah method adalah bagian method yang terdiri dari nama method dan parameternya (jika ada).
Contoh:
abstract class komputer {
}
Jika sebuah method dinyatakan sebagai abstract method, isi dari method tersebut harus dibuat dalam class
turunan. Abstract method harus berada di dalam abstract class.
Kita bisa membuat beberapa abstract method di dalam abstract class.
Contoh:
abstract public function lihat_processor();
abstract public function lihat_harddisk();
}
class
//
}
class
//
}
class
//
}
laptop extends komputer{

.. isi class laptop
pc extends komputer{
.. isi class pc
netbook extends komputer{
.. isi class netbook
Object Interface Dalam Pemrograman Berbasis Objek

Interface adalah perjanjian method, dimana jika sebuah class menggunakan interface, maka di dalam class tersebut
harus tersedia implementasi dari method tersebut. Sama seperti abstract class, interface juga hanya berisi signature dari
method, yakni hanya nama method dan parameter-nya saja (jika ada). Isi dari method akan dibuat ulang di dalam class
yang menggunakan interface. Interface lebih berperan untuk menyeragamkan method. Ia tidak masuk kedalam struktur
class seperti abstract class.
Untuk membuat Interface di dalam PHP, kita menulisnya mirip seperti membuat class, tetapi menggunakan keyword
interface.
interface nama_interfce {
//signature method
}
Untuk menggunakan method kedalam class, kita menggunakan keyword implements.
Contoh:
interface mouse{
public function klik_kanan();
public function klik_kiri();
}
class laptop implements mouse{
public function klik_kanan(){
return "Klik Kanan...";
}
public function klik_kiri(){
return "Klik Kiri...";
}
}
NB : Apabila kita tidak membuat ulang salah satu method yang ada di interface, PHP akan mengeluarkan error. Artinya
didalam class yang menggunakan interface harus mendefinisikan semua method yang ada di interface.
Method Interface Harus di set Sebagai Public

Method di dalam perancangan interface harus memiliki hak akses public, atau tidak ditulis sama sekali (dimana
PHP akan menganggapnya sebagai public). Jika kita mengubah hak akses method di dalam interface menjadi
private atau protected, PHP akan mengeluarkan error. Di dalam class yang menggunakan interface, method
yang berasal dari interface juga harus memiliki hak akses public.
Interface bisa di Turunkan (Inherit)

Di dalam PHP, interface bisa diturunkan kedalam interface lain. Prosesnya mirip dengan penurunan class, yakni
dengan menggunakan kata kunci extends.
Contoh:
interface mouse{
}
interface mouse_gaming extends mouse{
public function ubah_dpi();
}
Class yang menggunakan interface child, harus mendefinisikan semua method, termasuk method dari interface
parent.
Contoh:
class laptop implements mouse_gaming{
}
}
public function ubah_dpi(){
return "Ubah settingan DPI mouse";
}
}
Interface Bisa Memiliki Konstanta

interface mouse{
const JENIS = "Laser Mouse";
}
echo mouse::JENIS;
Untuk mengakses konstanta dari interface, kita menggunakan perintah:
nama_interface::nama_konstanta
Interface Tidak Bisa Memiliki Method normal

Salah satu yang membedakan interface dengan abstract class adalah kita tidak bisa membuat method biasa di
dalam Interface.
Sebuah Class Bisa Menggunakan Banyak Interface

Perbedaan lain antara Interface dengan Abstract Class adalah: Sebuah class bisa menggunakan lebih dari 1
interface, sedangkan untuk abstract class, kita hanya bisa menggunakan 1 abstract class dalam sekali
penurunan class.
Contoh:
interface mouse{
}
interface keyboard{
public function tekan_enter();
}
class laptop implements mouse, keyboard{
}
}
public function tekan_enter(){
return "Tekan Tombol Enter...";
}
}
echo $laptop_baru->tekan_enter();
Polimorfisme dalam Pemrograman Objek PHP

Di dalam pemrograman objek, polimorfisme adalah konsep dimana terdapat banyak class yang memiliki signature
method yang sama. Implementasi dari method-method tersebut diserahkan kepada tiap class, akan tetapi cara
pemanggilan method harus sama. Agar dapat memaksakan signature method yang sama pada banyak class, class
tersebut harus diturunkan dari sebuah abstract class atau object interface.
Contoh:
abstract public function booting_os();
}
public function booting_os(){
return "Proses Booting Sistem Operasi Laptop";
}
}
class pc extends komputer{
return "Proses Booting Sistem Operasi PC";
}
}
class chromebook extends komputer{
return "Proses Booting Sistem Operasi Chromebook";
}
}
$pc_baru = new pc();
$chromebook_baru = new chromebook();
function booting_os_komputer($objek_komputer){
return $objek_komputer->booting_os();
}
echo
echo
echo
echo
echo
booting_os_komputer($laptop_baru);
"<br />";
booting_os_komputer($pc_baru);
"<br />";
booting_os_komputer($chromebook_baru);
Konsep polimorfisme dari contoh diatas adalah, fungsi booting_os_komputer() akan selalu berhasil dijalankan, selama
argumen yang diberikan berasal dari class yang diturunkan dari class abstract komputer.
Peran Abstract Class dan Interface dalam Polimorfisme

Baik abstract class maupun interface bisa digunakan untuk membuat banyak class dengan method yang sama.
Bahkan keduanya sering digunakan secara bersama-sama.
Berikut adalah revisi kode program kita sebelumnya dengan menggunakan abstract class dan interface:
abstract public function booting_os();
}
interface mouse{
public function double_klik();
}
class laptop extends komputer implements mouse{
return "Proses Booting Sistem Operasi Laptop";
}
public function double_klik(){
return "Double Klik Mouse Laptop";
}
}
class pc extends komputer implements mouse{
return "Proses Booting Sistem Operasi PC";
}
return "Double Klik Mouse PC";
}
}
class chromebook extends komputer implements mouse{
return "Proses Booting Sistem Operasi Chromebook";
}
return "Double Klik Mouse Chromebook";
}
}
$pc_baru = new pc();
$chromebook_baru = new chromebook();
function booting_os_komputer($objek_komputer){
return $objek_komputer->booting_os();
}
function double_klik_komputer($objek_komputer){
return $objek_komputer->double_klik();
}
echo
echo
echo
echo
echo
echo
booting_os_komputer($laptop_baru)."<br />";
double_klik_komputer($laptop_baru)."<br />"."<br />";
booting_os_komputer($pc_baru)."<br />";
double_klik_komputer($pc_baru)."<br />"."<br />";
booting_os_komputer($chromebook_baru)."<br />";
double_klik_komputer($chromebook_baru);
==================================================================
MySQL
Pengertian SQL
SQL (Structured Query Language) adalah bahasa pemrograman khusus yang digunakan untuk memanajemen data
dalam RDBMS. SQL biasanya berupa perintah sederhana yang berisi instruksi-instruksi untuk manipulasi data. Perintah
SQL ini sering juga disingkat dengan sebutan query.
Jenis-jenis perintah SQL

Terdapat 3 jenis perintah dasar SQL:
o Data Definition Language (DDL) adalah jenis instruksi SQL yang berkaitan dengan pembuatan
struktur tabel maupun database. Termasuk diantaranya : CREATE, DROP, ALTER, dan RENAME.
o Data Manipulation Language (DML) adalah jenis instruksi SQL yang berkaitan dengan data yang
ada dalam tabel, tentang bagaiman menginput, menghapus, memperbaharui serta membaca data yang
tersimpan di dalam database. Contoh perintah SQL untuk DML : SELECT, INSERT, DELETE, dan
UPDATE.
o Data Control Language (DCL) adalah jenis instruksi SQL yang berkaitan dengan manajemen hak
akses dan pengguna (user) yang dapat mengakses database maupun tabel. Termasuk diantaranya :
GRANT dan REVOKE.
Selain ketiga jenis perintah SQL, terdapat juga 2 jenis SQL tambahan:
o Transaction Control Language (TCL) adalah perintah SQL untuk proses transaksi. Proses transaksi
ini digunakan untuk perintah yang lebih dari 1, namun harus berjalan semua, atau tidak sama sekali.
Misalnya untuk aplikasi critical seperti transfer uang dalam sistem database perbankan. Setidaknya
akan ada 2 perintah, yaitu mengurangi uang nasabah A, dan menambah uang nasabah B. Namun jika
terjadi kesalahan sistem, kedua transaksi ini harus dibatalkan. Tidak bisa hanya satu perintah saja.
Termasuk ke dalam TCL adalah perintah : COMMIT, ROLLCABK, dan SET TRANSACTION.
o Programmatic SQL berkaitan dengan sub program (stored procedure) maupun penjelasan mengenai
struktur database. Contoh perintah seperti : DECLARE, EXPLAIN, PREPARE, dan DESCRIBE.
Penulisan Query MySQL

Setiap perintah, atau sering juga disebut query didalam MySQL harus diakhiri dengan tanda titik koma ;. Selama
query MySQL belum diakhiri dengan ; maka itu dianggap masih dalam satu perintah.
Memulai Koneksi dengan MySQL Server
Jika MySQL Serve telah berjalan, baik sebagai service maupun langsung dengan mysqld.exe, kita bisa login ke dalam
Server dengan format perintah:
mysql -h host -u user p_password
Keterangan:
Mysql adalah program MySQL Client yang kita gunakan untuk mengakses server (file aslinya bernama:
mysql.exe).
h adalah kode untuk mysql bahwa perintah setelahnya adalah host. Host disini merupakan alamat IP dari
komputer server. Karena MySQL Server dijalankan pada komputer yang sama dengan MySQL Client, alamat IP
dari komputer kita adalah 127.0.0.1, atau sering juga disebut dengan localhost.
u adalah kode untuk mysql bahwa perintah setelahnya adalah inputan nama user. User adalah username
pengguna yang akan login ke MySQL server.
-p adalah kode untuk mysql bahwa perintah setelahnya adalah password dari user. Inputan password harus
langsung digabungkan dengan p. contohnya, dalam tutorial ini, saya menggunakan password qwerty untuk
user root. Maka penulisannya menjadi pqwerty.
Contoh untuk masuk pada localhost sebagai user root dengan password qwerty:
mysql -h localhost -u root pqwerty
Localhost adalah penyebutan untuk alamat komputer itu sendiri (bisa diganti dengan alamat IP komputer), dan oleh
karena itu, perintah h localhost juga dapat di tiadakan. Apabila MySQL Server berada di komputer lain, kita bisa
menggunakan alamat IP server tersebut.
Menulis password root secara langsung dianggap tidak aman. Sebagai solusinya, kita bisa menginput password user root
dengan lebih aman menggunakan perintah:
mysql -u root p
Tampilan cmd akan berhenti sesaat untuk menunggu penginputan password:
Enter password:*****
Setiap perintah di dalam Client MySQL akan di awali dengan tanda mysql>.
Untuk keluar dari Client, ketik perintah:
mysql> exit
Dasar Penulisan Query
Menjalankan Perintah (query) MySQL
Setiap perintah, atau sering juga disebut query didalam MySQL harus diakhiri dengan tanda titik koma ;
dan akan dieksekusi setelah tombol Enter ditekan. Selama query MySQL belum diakhiri dengan ; maka itu
dianggap masih dalam satu perintah. Selain menggunakan ;, query MySQL juga akan mengeksekusi perintah
juga diakhiri dengan tanda \g.
Jika ingin membatalkan perintah Query yang telah dibuat, dapat dilakukan dengan kode \c.
Contoh:
mysql> SELECT NOW(),
-> USER(),
-> \c
mysql>
Merubah Tampilan output MySQL
Untuk perintah MySQL (query MySQL) yang menghasilkan output yang panjangnya melebihi layar cmd, akan
sulit bagi kita dalam membacanya. Untuk merubah tampilan output MySQL menjadi baris, tambahkan tanda
\G (huruf G besar, bukan g kecil) setelah perintah query.
Contoh:
mysql> SELECT NOW(),USER(),VERSION()\G
*************************** 1. row ***************************
NOW(): 2014-11-13 09:23:41
USER(): root@localhost
VERSION(): 5.6.21-log
1 row in set (0.00 sec)
Aturan Penulisan huruf BESAR dan kecil dalam MySQL
MySQL tidak membedakan penulisan huruf besar maupun kecil (case insensitive) dalam penulisan fungsi dan
identifier. Namun untuk penulisan nama database dan nama tabel, MySQL akan mengikuti sistem operasi
dimana MySQL Server berjalan. Untuk Sistem Operasi Windows, nama database mahasiswa dianggap sama
dengan MaHaSIsWA, namun dalam MySQL Server yang berjalan pada Linux, kedua database tersebut
dianggap berbeda (case sensitive). Disarankan untuk menggunakan selalu huruf kecil dalam penulisan
database, tabe dan variabel dalam MySQL.
Perhatikan penggunaan tanda
Dalam beberapa kasus, sebuah query bisa saja menggunakan tanda baca selain angka dan huruf seperti : ,
(koma), \ (forward slash/garis miring depan), (tanda petik), dan (spasi). Misalnya untuk 123 dan 123,
12e + 14 dan 12e+14 akan memiliki arti berbeda dalam MySQL.
Membuat dan Menghapus Database
Membuat database MySQL

Untuk membuat database, format penulisan querynya adalah:
CREATE DATABASE [IF NOT EXISTS] nama_database
Melihat Daftar Database MySQL

Untuk melihat seluruh database yang berada pada MySQL Server, gunakan query:
SHOW DATABASES;
Memilih dan Menggunakan Database MySQL

Format query untuk memilih database ini adalah:
USE nama_database;
Menghapus Database MySQL

Format query untuk menghapus database:
DROP DATABASE [IF EXISTS] database_name;
NB : Tambahan query [IF NOT EXISTS] digunakan untuk membuat MySQL tidak menampilkan pesan error.
Contoh:
CREATE DATABASE [IF NOT EXISTS] mahasiswa
Format [IF NOT EXISTS] akan membuat database jika database itu belum ada sebelumnya. Jika sudah ada, query
CREATE DATABASE tidak akan menghasilkan apa-apa (database yang lama tidak akan tertimpa).
NB : Format perintah query yang terdapat di dalam kurung siku [] merupakan perintah optional, boleh diabaikan jika
tidak diperlukan.
Membuat dan Menghapus Tabel
Membuat Tabel MySQL

Format dasar query untuk membuat tabel adalah:
CREATE TABLE [IF NOT EXISTS] nama_tabel (daftar_kolom) [type=tipe_tabel];
o
o
o
o
Query opsional [IF NOT EXISTS] sama seperti pada query pembuatan database, digunakan untuk
membuat MySQL tidak menampilkan pesan error.
Nama_tabel adalah nama dari tabel yang ingin kita buat.
Daftar_kolom berisi definisi dari kolom-kolom yang akan kita buat untuk database ini.
Tipe_tabel adalah query opsional dimana kita dapat mendefinisikan tipe tabel untuk tabel yang akan
kita gunakan, seperti MyISAM maupun InnoDB.
Tipe Tabel di MySQL

o MyISAM
o InnoDB
o HEAP
o
Melihat Daftar Tabel dalam MySQL

Untuk melihat seluruh tabel yang ada pada database aktif saat ini, format querynya adalah:
SHOW TABLES;
Melihat Struktur Tabel MySQL

Untuk melihat struktur dari sebuah tabel, seperti nama kolom yang tersedia, dan tipenya, dapat dilihat dengan
format query:
DESCRIBE nama_tabel;
Menghapus Tabel MySQL

Format query untuk menghapus tabel adalah:
DROP TABLE[IF EXISTS] table_name [, table_name,...];
Tipe Data Numerik

Tipe Data Huruf (String)
Tipe Data Date (Tanggal)
Tipe Data ENUM dan SET
Atribut Tipe Data
Merubah Tabel (ALTER TABLE)
Menambahkan data (Query INSERT)
Menambahkan data dari File
Menampilkan Data MySQL (SELECT)
Pencarian Data MySQL (Query LIKE)
Pencarian Data Regular Expression
Menggabungkan Tabel (INNER JOIN)
Menghapus Baris (DELETE)
Update Tabel (UPDATE)
Menggunakan Alias (AS)
Menghapus Duplikasi (DISTINCT)
==================================================================
HTML + PHP + MySQL
HTML + PHP
Pembuatan, Pemrosesan dan Menampilkan Hasil Form PHP

Struktur Dasar Form HTML (atribut action dan method)
Contoh bentuk sederhana Form HTML:
<form action="proses.php" method="get">
Nama: <input type="text" name="nama" />
<br />
E-Mail: <input type="text" name="email" />
<br />
<input type="submit" value="Proses Data" >
</form>
Keterangan:
o Atribut action, atribut ini akan diisi dengan nilai berupa alamat halaman PHP yang dimana akan
memproses isi form tersebut.
o Atribut method, atribut inilah yang akan menentukan bagaimana cara form dikirim ke dalam halaman
proses.php. Nilai dari atribut method hanya bisa diisi dengan get atau post.
o Tag <input type=text>, yang akan menampilkan kotak isian form.
o Atribut name dari tag <input>, nilai dari name inilah yang menjadi penanda masing-masing objek
form agar dapat diproses dengan PHP.
o Atribut type=submit, tombol submit yang apabila di klik akan mengirimkan data dari form ke
halaman proses.php untuk diproses.
Menampilkan nilai Form HTML dengan PHP ($_GET dan $_POST)

Untuk mengambil nilai form HTML, PHP menyediakan 2 buah variabel global yaitu variabel $_GET dan
$_POST. Variabel $_GET digunakan jika pada saat pembuatan form menggunakan atribut method=get, dan
variabel $_POST digunakan jika form dibuat dengan method=post.
Contoh mengakses nilai Form HTML menggunakan variable $_GET:
$_GET[nama_objek_form].
Keterangan:
nama_objek_form adalah nilai dari atribut name di dalam form HTML.
Contoh:
Menggunakan variabel $_GET
Kode HTML
<form method="GET" action="proses.php">
<label> username </label>
<input type='text' name='user'>
</br>
<label> Password </label>
<input type='password' name='pass'>
</br>
<button type="submit">Submit</button>
</form>
Kode PHP
if($_GET){
$username=$_GET['user'];
$password=$_GET['pass'];
echo "Selamat datang $username";
}
Menggunakan variabel $_POST

Kode HTML
<form
method="POST"
action="proses.php">
<label> username </label>
<input type='text' name='user'>
<label> Password </label>
<input type='password' name='pass'>
<button type="submit">Submit
</button>
</form>
Kode PHP
if($_POST){
$username=$_POST['username'];
$password=$_POST['password'];
echo "Selamat datang $username";
}
Perbedaan Metode Pengiriman Form GET dan POST dalam PHP

Keunggulan dan Kelemahan Method Form GET
o Kelemahan
- Data yang dikirimkan bersifat terbuka.
- Tidak aman digunakan untuk data yang bersifat private.
- Nilai dari form dapat dilihat langsung di dalam URL yang dikirimkan.
- Karena sifat method=get yang harus menggunakan URL untuk mengirim data form, PHP
membatasi hanya bisa memproses 1024 karakter saja.
- Tidak bisa mengirimkan data binary seperti gambar atau dokumen word ke server.
o Kelebihan
- Dapat mengirim data bahkan tanpa melalui Form.
- Method=get sebaiknya digunakan untuk form yang mengambil data dari database.
- Karena variabel / alamat url nya lengkap maka metode ini berguna untuk 'bookmark' sebuah
halaman web.
- Data yang dikirimkan dapat di-index oleh search engine.
Keunggulan dan Kelemahan Method Form POST
o Kelemahan
- Tidak dapat di bookmark.
- Tidak dapat di-index oleh search engine.
o Kelebihan
- Isi dari form tidak ditampilkan di URL.
- Sesuai untuk data-data yang bersifat sensitif seperti username dan password.
- Method=post disarankan untuk form yang digunakan untuk menambah data (posting data)
atau sebuah proses yang akan mengubah isi database, seperti query Insert, Delete.
- Tidak ada batasan karakter yang akan dikirim.
- Dapat mengirimkan file (Multi-Part Binary) dan dapat mengirimkan data ukuran yang besar.
Variabel SuperGlobals $_GET, $_POST dan $_REQUEST

Variabel SuperGlobals adalah variabel khusus di dalam PHP yang bisa diakses dari halaman PHP manapun tanpa perlu
mendefinisikannya terlebih dahulu, dan untuk mengakses variabel ini juga tidak perlu menggunakan keyword global.
Variabel $_GET, $_POST dan $_REQUEST merupakan tipe data array, sehingga untuk mengakses nilainya,
menggunakan cara akses array yakni dengan menggunakan kurung siku seperti:
$_GET[nama]
Dimana nama adalah nilai dari atribut name pada objek form yang akan diakses.
Perbedaan variabel global $_GET, $_POST dan $_REQUEST
Variabel $_REQUEST menampung nilai form yang dikirim dengan method=get, maupun method=post secara
bersamaan. Jika dapat dipastikan bahwa form akan dikirim dengan method=get, maka gunakan variabel $_GET, jika
from menggunakan method=post, maka gunakan $_POST, namun jika metodanya tidak dapat dipastikan, variabel
superglobal $_REQUEST bisa menjadi solusi.
Selain menampung hasil form get dan post, variabel $_REQUEST juga menampung nilai dari cookie, atau variabel
superglobals $_COOKIE.
Register Global dan Register Long Array (deprecated)

Validasi Form PHP (fungsi isset dan empty)
Memeriksa Ketersediaan Variabel Form dengan Fungsi isset()
Proses memeriksa ketersediaan variabel ini menjadi penting karena PHP akan mengeluarkan pesan peringatan
jika kita mengakses nilai sebuah variabel yang belum didefenisikan terlebih dahulu. Untuk memeriksa apakah
sebuah objek form telah didefenisikan atau telah di-set sebelumnya, kita bisa menggunakan fungsi: isset().
Fungsi isset() akan menghasilkan nilai true jika sebuah variabel telah didefenisikan, dan false jika variabel
tersebut belum dibuat.
Contoh:
if (isset($_GET['nama']) AND isset($_GET['email'])) {
echo $_GET['nama'];
echo $_GET['email'];
}else {
echo "Maaf, anda harus mengakses halaman ini dari form.html";
}
Penjelasan:
Pada kode PHP diatas mengharuskan nilai $_GET[nama] dan $_GET[email] tersedia, baru nilai tampil,
namun jika tidak ada, akan ditampilkan pesan bahwa halaman ini hanya bisa diakses dari form.html.
Memeriksa Apakah Variabel Form Telah Diisi

Fungsi isset() tetap bernilai true meskipun user tidak mengisi form sama sekali (variabel form bernilai kosong,
namun variabel tersebut dianggap telah di-set). Untuk memeriksa apakah sebuah objek form telah diisi atau
tidak, bisa menggunakan fungsi: empty().
Fungsi empty() akan menghasilkan nilai false jika sebuah variabel telah diisi, dan bernilai true jika variabel
tersebut belum diisi.
Contoh:
If (isset($_GET['nama']) AND isset($_GET['email'])) {
$nama=$_GET['nama'];
$email=$_GET['email'];
}Else {
die("Maaf, anda harus mengakses halaman ini dari form.html");
}
If (!empty($nama)) {
echo "Nama: $nama <br /> Email: $email";
}Else {
die("Maaf, anda harus mengisi nama");
}
Penjelasan:
Pada logika IF kedua, PHP memeriksa apakah variabel $nama kosong atau tidak dengan fungsi !empty().
Fungsi !empty($nama) akan menghasilkan nilai true hanya jika variabel $nama tidak kosong (perhatikan
tanda ! sebagai pembalik logika empty()). Namun jika $nama ternyata kosong (tidak diisi), maka tampilkan
pesan kesalahan.
Menyeleksi Tipe Data Objek Form

Untuk mengecek tipe data sebuah variabel, PHP menyediakan beberapa fungsi tergantung tipe datanya, yakni
fungsi is_string(), is_int(), is_float(), is_numeric(), is_bool(), is_array(), dan is_object(). Sesuai dengan
namanya, masing-masing fungsi tersebut akan mengecek tipe data dari variabel yang ditest.
Contoh:
if (isset($_GET['nama']) AND isset($_GET['email'])){

}else{
}
if(empty($nama)){
}else{
if (is_numeric($nama)){
die("Maaf, nama harus berupa huruf");
}else{
}
}
NB : Untuk menfilter variabel $nama diatas, akan lebih cocok menggunakan regular expression daripada fungsi
is_numeric().
Validasi Form untuk Mencegah Cross-site Scripting & HTML injection

Cross-site Scripting atau sering disingkat dengan XSS adalah jenis serangan ke sebuah situs dengan cara menyisipkan
kode script (biasanya JavaScript) ke dalam sebuah situs. Hal ini hanya akan berhasil jika situs tersebut memiliki fitur
untuk menampilkan kembali isian form ke web browser, seperti form komentar.
Sedangkan HTML injection adalah istilah yang lebih spesifik kepada cara menyisipkan kode HTML kedalam sebuah
situs.
Cara Mencegah Cross-site Scripting dan HTML injection

Untuk keperluan ini, PHP memiliki fungsi htmlspecialchars() dan fungsi strip_tags(). Fungsi
htmlspecialchars() akan mengkonversi seluruh karakter khusus HTML menjadi named entity sehingga tidak
akan di proses oleh web browser. Sedangkan fungsi strip_tags() akan menghapus seluruh tag HTML dari
inputan user.
Contoh:
$nama=htmlspecialchars($nama);
$email=strip_tags($email);
}else{
}
if(empty($nama)){
}else{
if (is_numeric($nama))
{
die("Maaf, nama harus berupa huruf");
}else{
}
}
Validasi dengan htmlspecialchars atau strip_tags?

Fungsi strip_tags() memiliki argumen kedua yang bisa diisi dengan tag-tag HTML apa saja yang dibolehkan.
Jika kita membolehkan tag <a>, <b> dan tag <i> untuk variabel $komentar, maka penulisannya bisa dibuat
menjadi:
$komentar=strip_tags($komentar, '<a><b><i>')
Sedangkan untuk fungsi htmlspecialchars(), jika anda ingin karakter tanda kutip ( ) juga diubah menjadi
named entity, kita bisa menambahkan 1 parameter optional untuk fungsi htmlspecialchars(), dengan pilihan
ENT_QUOTES. Sehingga dalam contoh variabel $nama, kita bisa menulisnya menjadi:
$nama=htmlspecialchars($nama, ENT_QUOTES);
Mengirim Variabel (Pesan) Antar Halaman PHP

Redirect halaman dengan fungsi header(Location:)
Fungsi header() di dalam PHP digunakan untuk memproses HTTP header. Fungsi header() memiliki banyak fitur,
namun yang akan kita manfaatkan adalah fitur untuk mengirim user ke halaman lain atau dikenal dengan istilah:
redirect.
Contoh:
header("Location: http://www.duniailkom.com/pendaftaran.html")
Menampilkan Pesan Kesalahan Form
Menggunakan variabel $_GET
Kode pada file Form.php (halaman input data menggunakan form input)
<?php
if (isset($_GET['error'])){
$error=$_GET['error'];
}else{
$error="";
}
$pesan="";
if ($error=="variabel_belum_diset"){
$pesan="Maaf, anda harus mengakses halaman ini dari form.php";
}
if ($error=="nama_kosong"){
$pesan="Maaf, anda harus mengisi nama";
}
if ($error=="nama_harus_huruf"){
$pesan="Maaf, nama harus berupa huruf";
}
}else{
$nama="";
$email="";
}
?>
<html>
<head>
<title></title>
</head>
<body>
<form action="post_proses.php" method="get">
Nama: <input type="text" name="nama" value="<?php echo "$nama" ?>"/>
<? echo $pesan; ?><br />
E-Mail:<input type="text" name="email" value="<?php echo"$email" ?>"/>
<? echo $pesan; ?><br />
<input type="submit" value="Proses Data" >
</form>
</body>
</html>
Kode pada file Proses.php (untuk memroses data masukkan dari form input)
<?php
$nama=htmlspecialchars($nama);
$email=strip_tags($email);
$isi_form="&nama=$nama&email=$email";
}else{
header("Location:post_form.php?error=variabel_belum_diset");
}
if(empty($nama)){
header("Location:post_form.php?error=nama_kosong".$isi_form);
}else{
if (is_numeric($nama))
{
header("Location:post_form.php?error=nama_harus_huruf".$isi_form);
}else{
}
}
?>
Menggunakan variabel $_POST

Kode pada file Form.php (halaman input data menggunakan form input)
<?php
session_start();
if(isset($_SESSION['error'])){
$error = $_SESSION['error'];
$_POST = $_SESSION['post'];
unset($_SESSION['error']);
unset($_SESSION['post']);
}
?>
<html>
<head>
<title></title>
</head>
<body>
<form name="form-name" method="post" action="save-form.php">
<dl>
<dt>Nama:</dt>
<dd>
<input name="nama" id="nama" type="text" value="<?php
isset($_POST['nama']) ? $_POST['nama'] : '';?>" />
<?php echo isset($error['nama']) ? $error['nama'] : '';?>
</dd>
<dt>Email:</dt>
<dd>
<input name="email" id="email" type="text" value="<?php
isset($_POST['email']) ? $_POST['email'] : '';?>" />
<?php echo isset($error['email']) ? $error['email'] : '';?>
</dd>
<dt></dt>
<dd>
<input type="Submit" value="Proses Data" />
</dd>
</dl>
</form>
</body>
</html>
Kode pada file Proses.php (untuk memroses data masukkan dari form input)
<?php
session_start();
if($_POST){
$nama = $_POST['nama'];
$email = $_POST['email'];
$error = array();
if(empty($nama)){
$error['nama'] = 'Nama tidak boleh kosong';
}
if(empty($email)){
$error['email'] = 'Email tidak boleh kosong';
}
if(empty($error)){
}else{
$_SESSION['error'] = $error;
$_SESSION['post'] = $_POST;
header("location: contact-form.php");
}
?>
PHP + MySQL
echo
echo
Jenis Koneksi PHP MySQL: PDO, mysqli, dan mysql extension

MySQL Extentsion
Sekitar tahun 2008, untuk mengakses MySQL dari PHP, kita menggunakan fungsi-fungsi seperti
mysql_connect(), mysql_query(), dan mysql_fetch_array(). Fungsi-fungsi ini tergabung ke dalam mysql
extension. Namun saat ini, tepatnya mulai PHP versi 5.5.0, PHP memutuskan untuk membuat mysql extension
berstatus deprecated. Yang artinya pengaksesan database MySQL menggunakan fungsi mysql extension sudah
tidak disarankan lagi.
Contoh:
$link = mysql_connect("localhost", "root", "qwerty");
mysql_select_db("mahasiwa");
$result = mysql_query("SELECT * FROM mahasiswa");
$row = mysql_fetch_assoc($result);
MySQLI Extension
Sebagai pengganti mysql extension, PHP menyediakan mysqli extension (mysqli merupakan singkatan dari
MySQL Improved). Mysqli extension ini pada dasarnya adalah perbaikan dari mysql extension dan
dikembangkan untuk mendukung fitur-fitur terbaru pada versi MySQL 4.1 keatas. Hampir semua fungsi yang
ada pada mysql extension, juga tersedia pada mysqli.
Contoh:
$mysqli = new mysqli("localhost", "root", "qwerty", "mahasiswa");
$result = $mysqli->query("SELECT * FROM mahasiswa");
$row = $result->fetch_assoc();
PDO
PDO (PHP Data Objects), adalah extension atau penambahan fitur dalam PHP yang dirancang sebagai interface
universal untuk pengaksesan berbagai jenis database (tidak hanya MySQL). Contohnya, jika kita menggunakan
PDO dalam menulis kode pemograman, lalu suatu saat website kita bertukar database dari MySQL ke Oracle,
maka kita tidak perlu mengubah semua kode program, cukup mengubah cara pemanggilan PDO diawal program
saja.
Contoh:
$pdo = new PDO('mysql:host=localhost; dbname=mahasiswa', 'root', 'qwerty');
$statement = $pdo->query("SELECT * FROM mahasiswa");
$row = $statement->fetch(PDO::FETCH_ASSOC);
Koneksi MySQL dengan mysql extension

$link = mysql_connect(host, 'username', 'password');
Koneksi MySQL dengan mysqli extension

// mysqli, Cara Prosedural
$mysqli = mysqli_connect('host','username','password','database');
// mysqli, Cara Berorientasi objek
$mysqli = new mysqli('host','username','password','database');
Koneksi MySQL dengan PDO (PHP Data Objects)

$pdo = new PDO("mysql:host=host;dbname=database", 'username', 'password');
HTML + PHP + MySQL + CSS + JavaScript
HTML + CSS + JavaScript

HTML + PHP + MySQL + CSS + JavaScript
Materi Tambahan
Wordpress

Materi Pembelajaran Web Design Dan Programming

Diunggah oleh

Informasi Dokumen

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

Materi Pembelajaran Web Design Dan Programming

Diunggah oleh

Hak Cipta:

Format Tersedia

Materi Pembelajaran Web Design Dan Programming

Konsep Dasar Web Design:

(terdapat pada awal dan akhir dari file HTML)

/> untuk membuat garis pembatas horizontal

: menentukan ukuran font

akan memberikan garis pembatas pada tabel.

LayOut with Table

Jenis File Image

Create Image Map

x1,y1 : sudut kiri atas, x2,y2 : sudut kanan bawah

URL/ Halaman web

Link Relatif (Membuat Link Dari Satu Page ke Page Lainnya)

Link ke Bagian Lain Dalam Dokumen Yang Sama

Mendefinisikan kumpulan frame

<frame> : mendefinisikan frame yang terdapat dalam frameset.

Karakter yang tidak diperbolehkan: \ / : * ? " < > |

Dokumen Tata Letak

_blank : halaman yang dipanggil akan muncul pada jendela baru

Home Page Berbingkai

Ordered List & Unordered List

Ordered List <ol>

List huruf besar

List huruf kecil

List type circle

Nested List : List item dapat digunakan secara bersarang.

List romawi besar

List type square

List romawi kecil

Menggunakan Forms & Fields:

<form action="#" method="post">

Elemen Masukan Form < textarea >

Pengenalan Komponen Forms

<textarea name="textarea" cols="100" rows="5"></textarea>

Form Methode (Get, Post)

<form id="FCONTOH" name="CONTOH" method="get"

<form id="FCONTOH" name="CONTOH" method="post"

Aturan dan Cara Penulisan Kode CSS

font-family: calibri, helvetica, sans-serif;

Cara Penggunaan Selector CSS

Urutan Prioritas Selector CSS (Specificity)

Sifat Penurunan Dalam CSS (Inheritance)

Penulisan Kode Warna pada CSS (Model Warna RGB)

Pengertian Attribute Selector dalam CSS

Attribute Selector: [attr=value]

Attribute Selector: [attr^=value]

<a href="http://www.duniailkom.com">Link ke http://www.duniailkom.com</a>

Attribute Selector: [attr$=value]

Attribute Selector: [attr~=value]

Attribute Selector: [attr|=value]

Attribute Selector: [attr*=value]

Pengertian Pseudo-class dan Pseudo-element CSS

Pengertian Child Selector CSS

Property pada CSS

Mengontrol tenggelamnya sebagian dari huruf awal

Menentukan posisi bawah elemen 3D

Jenis-jenis Value pada CSS

Property Dan Values Pada Font

Selector Pada Link

Property Dan Value Pada Position

Property Dan Value Pada Margin Dan Padding

Property CSS & HTML

Prinsip Utama Tipografi

Sistem Pengukuran Huruf

Property CSS Font