.jpeg)
Teknologi Informasi dan Komunikasi tidak dapat dihindari
dengan adanya jaringan lokal maupun jaringan global. Sebuah
informasi yang diberikan tidak terlepas dari adanya sebuah
teknologi berbasis web. Teknologi berbasis web dapat dirancang
sedemikian rupa agar pengguna mendapat kemudahan pelayanan
yang diberikan oleh sebuah website untuk mendapatkan informasi
yang dibutuhkan. Banyak aplikasi yang dapat digunakan untuk
membangun sebuah website, namun pada buku ini membahas
bagaimana cara membuat program dengan bahasa pemrograman
PHP bagi pemula dengan menggunakan text editor notepad++.
Tampilan sebuah halaman website pada dasarnya terjadi karena
adanya urutan perintah text yang berada di dalam File yang
digunakan hingga perintah tersebut menjadi sebuah tampilan yang
mudah dipahami pengunjung website. Penulis selalu mengharapkan
adanya kritik dan saran agar apa yang disampaikan memberikan
kepahaman bagi para web programmer tingkat pemula, semoga apa
yang penulis sajikan dalam buku ini dapat membantu pembaca.
HTML (HYPERTEXT MARKUP LANGUAGE)
A. World Wide Web
Internet merupakan sistem global dari seluruh jaringan
komputer yang saling terhubung. TCP/IP menjadi protocol
penghubung antara jaringan-jaringan yang beragam di seluruh
dunia untuk dapat berkomunikasi. World Wide Web (WWW)
merupakan bagian dari internet yang paling cepat berkembang dan
paling populer. WWW bekerja berdasarkan pada tiga mekanisme
berikut:
Protocol
Standard aturan yang digunakan untuk
berkomunikasi pada komputer networking, Hypertext
Transfer Protocol (HTTP) yaitu protocol untuk WWW.
Address
WWW memiliki aturan penamaan alamat web yaitu
URL (Uniform Resource Locator) yang digunakan sebagai
standard alamat internet.
3
HTML
HTML Digunakan untuk membuat dokumen yang bisa
diakses melalui web.
B. HTML
Hypertext Markup Language (HTML) merupakan bahasa
pemrograman web berupa suatu format data yang digunakan untuk
membuat dokumen hypertext yang dapat dibaca, diinterpretasikan
dari satu platform komputer ke platform komputer lainnya tanpa
perlu melakukan suatu perubahan apapun, yang dilakukan dengan
HTML yaitu:
Mengontrol tampilan dari web page dan contentnya.
Mempublikasikan dokumen secara online sehingga bisa
diakses dari seluruh dunia.
Membuat online form yang bisa digunakan untuk
menangani input data, transaksi secara online.
Menambahkan object-object seperti image, audio, video
dan juga java applet dalam dokumen HTML.
C. Browser dan Editor
Browser
Browser merupakan software yang diinstall di mesin
client yang berfungsi untuk menterjemahkan tag-tag
4
HTML menjadi halaman web. Browser yang sering
digunakan seperti Mozilla Firefox, Internet Explorer,
Netscape Navigator dan masih banyak yang lainya.
Editor
Program yang digunakan untuk membuat dokumen
HTML, contoh HTML editor yang digunakan diantaranya:
Ms FrontPage, Dreamweaver, Notepad, Notepad ++.
D. Basic Tag HTML
1) Struktur HTML Dokumen
Dokumen HTML bisa dibagi mejadi tiga bagian utama:
HTML
Setiap dokumen HTML harus diawali dan ditutup dengan
tag HTML
<HTML> </HTML>
HEAD
Bagian header dari dokumen HTML diapit oleh tag
<HEAD></HEAD> di dalam bagian ini biasanya dimuat
tag TITLE yang menampilkan judul dari halaman pada
judul browser. Header juga memuat tag META yang
biasanya digunakan untuk menentukan informasi tertentu
mengenai dokumen HTML, untuk menentukan author
5
name, keywords, dan lainnya bisa dilakukan pada tag
META.
BODY
Dokumen body digunakan untuk menampilkan text,
image link dan semua yang akan ditampilkan pada web
page.
2) Basic HTML Element
Block Level Element
Block level element yang sering digunakan : Heading (H1
sampai H6)
List Item(LI)
List item digunakan untuk mengelompokkan data
baik berurutan (ordered list) maupun yang tidak berurutan
(unordered list). Ada dua macam list pada HTML:
Unordered List (Bullet)
Ordered List (Numbering)
Contoh :
Tag Attribute Description Contoh
Value
<UL> type Bullet Kotak
Bullet Titik
type
=”SQUARE”
6
Tag Attribute Description Contoh
Value
Bullet
Lingkaran
type =”DISC”
type
=”CIRCLE”
<OL> type Upper
Roman
Lower
Roman
Upercase
Lowercase
type =”I”
type =”i”
type =”A”
type =”a”
<OL> start Begin
Number
start=”N”
Contoh:
DAFTAR MATA KULIAH
<ol type="disc">
<li>Algoritma Pemrograman</li>
<li>Jaringan Komputer</li>
<li>Sistem Operasi</li>
</ol>
7
Definition List (DL)
Elemen ini digunakan untuk menerapkan glossary
atau untuk menampilkan metadata. Definition List diapit
oleh tag <DL> … </DL> dan <DT> tag menentukan
definition term serta <DD> tag menentukan definition itu
sendiri. Contoh:
<dl>
<dt>linux</dt>
<dd> yaitu nama yang diberikan kepada
sistem operasi komputer bertipe Unix.
Linux merupakan salah satu contoh
hasil pengembangan perangkat lunak
open source
</dd>
<!-- other terms and definitions --
>
</dl>
8
Horizontal Rules (HR)
Horizontal Rule tag digunakan untuk menggambar
garis horizontal dalam dokumen HTML.
Attribute Description Contoh Value
align Menetukan posisi dari
garis
Align=”center”
Align=”right”
Align=”left”
width Untuk menentukan
panjang garis.
Width=60%
size Untuk menentukan tebal
dari garis dalam pixel
Size=2px
Noshade Efek bayangan. Noshade=
“noshade”
Color Untuk menentukan warna
garis
Color=”Red”
Color=”
#4D6D3B”
Contoh:
<hr align="left" color="#4D6D3B"
size="5px" width="500px">
3) Pemformatan Page Break
Tag <BR> digunakan untuk memulai baris baru pada dokumen
HTML.
9
Font
Tag <FONT> digunakan untuk menentukan format
tampilan font dalam dokumen HTML seperti color, size,
style dan lainya.
Attribute Description Contoh Value
color Untuk menentukan
warna font, untuk
menentukan warna bisa
menggunakan nama
warna atau hexadecimal
(#000000 - #ffffff)
color =”Red”
color =”#
A8253E”
size Untuk menentukan
ukuran dari font 1 – 7
size=”1”
size=”2”
size=”3”
size=”4”
size=”5”
size=”6”
size=”7”
face
Untuk menentukan jenis
font dalam satu list ada
beberapa font dan akan
dibaca mulai dari yang
paling kiri.
face=”mistral”
face=”courier
new”
face=”arial”
10
Contoh:
<font color="blue" face="mistral"
size="4">
Selamat Datang
</font>
Color
Color merupakan attribute yang bisa ditambahkan
pada beberapa element seperti body, font, link dan lainya.
Color dibagi dalam tiga ketegori warna primer yaitu Red,
Green dan Blue. Masing-masing color didefinisikan dalam
dua digit hexadecimal number.
Alignment
Align attribute digunakan untuk menentukan
perataan object dalam dokumen HTML baik berupa text,
object, image, paragraph, division dan lain-lain.
Value Description
Left Rata kiri
Right Rata kanan
Center Rata tengah
Justify Rata kanan kiri
11
Format text
Physical Formatting
Tag Description
<B>...</B> Bold text (tebal)
<I>...</I> Italic text (miring)
<U>...</U> Underline Text (garis
bawah)
<TT>...</TT> Untuk Menampilkan
seperti huruf pada
mesin ketik
<BIG>...</BIG> Untuk ukuran yang
lebih besar dari
normal
<SMALL>...</SMALL> Untuk ukuran yang
lebih kecil dari normal
<STRIKE>...</STRIKE> Untuk memberi garis
di tengah text
<SUP>...</SUP> Superscript text
<SUB>...</SUB> Subscript text
<CENTER>...</CENTER> Center dokumen
Logical Formatting
Tag Description
<EM>...</EM> Text miring / <I>
<STRONG>...</STRONG> Text tebal / <B>
<DEL>...</DEL> Mencoret text /
<STRIKE>
<INS>...</INS> Underline text / <U>
<CUTE>...</CUTE> (Citation) digunakn
untuk menandai suatu
12
Tag Description
kutipan.
<CODE>...</CODE> Untuk menampilkan
code- pemogrman
misalkan PHP.
<KBD>...</KBD> untuk menguatkan
makna teks khusus
yang dimaksudkan
sebagai keterangan
tombol tertentu di
keyboard (papan
ketik) komputer.
<SAMP>...</SAMP> Untuk menandai suatu
teks yang
dimaksudkan sebagai
contoh.
<VAR>...</VAR> untuk menampilkan
nama variable.
<DFN>...</DFN> untuk menandai
sebuah subdefinisi
dari daftar definisai.
Preformatted text (PRE)
Tag PRE digunakan untuk menampilkan text sesuai dengan
format aslinya.
Contoh:
<!-- Some example CSS code -->
<pre>
body {color:blue;}
</pre>
13
Hyperlink
Link Address
Absolute Address
Merupakan full internet address (URL)
yang meliputi protocol, network location, path
dan nama file.
Relatif Addres
Merupakan URL yang tidak menyebutkan
protocol dan network locationnya (hanya path
dan nama filenya).
Anchor
Anchor tag <A> untuk menentukan
hyperlink dalam dokumen HTML. HREF
property digunakan untuk menentukan tujuan dari
hyperlink tersebut. Contoh :
<a href="URL">Hypertext</a>
4) Table
Membuat table
Tag <TABLE> digunakan untuk membuat tabel
dalam dokumen HTML, bagian pokok dari tabel yaitu
cell yang didefinisikan dengan menggunakan tag <TD>.
14
Berikutnya untuk membuat beberapa baris cell dalam tabel
menggunakan tag <TR>.
Menambahkan heading cell
Untuk menambahkan heading pada tabel tambahkan
tag <TH> pada tabel yang sudah dibuat.
Pemformatan table
Untuk mengatur format perataan text di dalam tabel
bisa menggunakan attribute Align dan Valign (vertical
Alignment).
Attribute Description Contoh Value
align Digunakan untuk
mengatur posisi
text secara
horisontal
align=”Center”
align=”justify”
align=”left”
align=”right”
valign Digunakan untuk
mengatur posisi
text secara
vertikal
valign=”baseline”
valign=”Top”
valign=”Bottom”
valign=”Middle”
Merge cell
Tag <TD> memiliki atribut colspan untuk merge
column dan rowspan untuk merge baris.
15
Contoh :
<table border=”1” width=”300px”>
<tr>
<td>Nim<td>
<td>Nama<td>
<tr>
<tr>
<td>B14098<td>
<td>Sudjana<td>
<tr>
</table>
5) Image
Format Image
Tag untuk menampilkan gambar <img src="url">.
Berikut ini atribut untuk tag <img>
Attribute Description Contoh Value
Align top, bottom,
middle digunakan
untuk menentukan
posisi image
terhadap text
Left, right, center
untuk menentukan
posisi image di
dokumen
align=”center”
align=”justify”
align=”left”
align=”right”
align=”baseline”
align=”top”
align=”bottom”
align=”middle”
Alt Menunjukkan
sebuah alternate
Alt=”Gambar tidak
bisa dibuka”
16
text (teks
pengganti) yang
akan muncul
apabila gambar
tidak dapat
ditampilkan.
crossorigin Mengijinkan
website pihak
ketiga untuk
memperbolehkan
akses cross-origin
yang dapat
digunakan kembali
didalam element
<canvas>
crossorigin=”anony
mous”
crossorigin=”use-
credentials”
Height Digunakan untuk
menentukan tinggi
gambar
height=”100px”
width Digunakan untuk
menentukan lebar
gambar
width=”100px”
Src Menentukan lokasi
gambar yang akan
ditampilkan
src="gambar/foto-
profil.jpg
6) Form
Fungsi Form
Form digunakan sebagai tempat untuk input data oleh
pengguna.
17
Form Element
Tag <form> digunakan untuk membuat form dalam
dokumen HTML.
Attribute Description Contoh Value
accept Mendefinisikan
MIME yang
diizinkan oleh
server yang
memuat script
untuk memproses
form.
accept="internet
media type"
method Menentukan
bagaimana data
akan dikirim ke
server. GET – data
akan dikirim
dengan
menggunakan
query string pada
URL.
POST – data akan
dikirim ke server
sebagai block data
ke script.
method=”GET”
method=”POST”
action Menentukan lokasi
dari script yang
akan memproses
data dari form.
Action=”proses.p
hp”
18
7) Contoh
Dasar-Dasar Html
Syntak HTML, bagian-bagian HTML, penggunaan
komentar dan tag <BR> untuk mulai baris baru.
<html>
<head>
<title>contoh html</title>
</head>
<!—ini yaitu komentar -->
<body>
selamat pagi !!!!!<br>
semoga kesuksesan menyertai anda!
</body>
</html>
Menggunakan tag <P> untuk membuat paragraph,
tag judul <H1> s/d <H6> untuk mengatur ukuran huruf.
<html>
<head>
<title>contoh membuat
paragraph</title>
</head>
<body>
<h1 align = "center"> kita selalu
bersama kawan </h1><p>
sedih, sunyi, canda, tawa kita
lewati bersama <br>
kemanapun bagai tali yang telah
diikat kuat, yang tidak dapat
dilepas <br>
kau hibur aku disaat gundah dan
19
kuhibur kau disaat kau membutuhkan
<br>
kita saling melengkapi satu sama
lain
</body>
</html>
Membuat garis horizontal <HR>.
<html>
<head>
<title>contoh penggunaan hr</title>
</head>
<body>
<h1>PT. Anugerah Mitra Abadi</h1>
<hr size = "10" noshade>
Jl. Slamet Riyadi KM 104<br>
Jawa Tengah <br>
Indonesia<br>
</body>
</html>
Menggunakan tag <div> untuk mengelompokkan
sejumlah baris teks yang memiliki karakteristik sama.
<html>
<head>
<title>contoh tag div</title>
</head>
<body>
<div align = "left">
<h1><u>PT. Anugerah Mitra
Abadi</u></h1>
<h2>Jl. Slamet Riyadi 104</h2>
20
<h2>Jawa tengah</h2>
</div>
<hr>
</body>
</html>
Pengaturan Teks
Penggunaan <PRE> untuk menampilkan teks apa adanya.
<html>
<head>
<title>contoh penggunaan pre
</title>
</head>
<body>
<h2>daftar menu:</h2>
<pre>
ayam goreng....12.000
bebek goreng...16.000
steak ayam.....26.000
</pre>
</body>
</html>
Pengaturan Font : Face (jenis Font), Size (ukuran Font),
Color (warna).
<html>
<head>
<title>jenis font</title>
</head>
<body>
21
normal: 012345abcd<br>
<font color="blue" face =
"arial">contoh font arial</font>
<br>
<font color="green" face = "courier"
size="5"> courier: contoh font
courier</font>
<br>
</body>
</html>
Pengaturan warna pada background : bgcolor.
<html>
<head>
<title>contoh penggunaan
bgcolor</title>
</head>
<body bgcolor = "black" text =
"gray"> normal<br>
<font color =
"blue">biru</font><br>
<font color =
"green">hijau</font><br>
<font color =
"red">merah</font><br>
<font color =
"yellow">kuning</font><br>
<font color =
"brown">cokelat</font><br>
<font color =
"#1e00ff">biru</font><br>
<font color =
"#ff0000">merah</font><br>
</body>
22
</html>
Menampilkan Daftar Item (List)
Penggunaan tag <ul> untuk daftar list yang tidak
diberi nomor; tag <li> untuk daftar item yang diberi
bulatan.
<html>
<head>
<title>contoh pemakaian tag ul dan
li</title>
</head>
<body>
<h2>daftar menu :</h2>
<ul>
<li>sop ayam </li>
<li>garang asem </li>
<li>sayur kangkung</li>
<li>gudeg</li>
<li>pecel</li>
</ul>
23
</body>
</html>
Penggunaan tag <ol> untuk menampilkan daftar item
dengan nomor urut.
<html>
<head>
<title>contoh tag ol dengan
type</title>
</head>
<body>
<b>dengan huruf kapital:</b>
<ol type = "a">
<li>yogya<br>
<li>solo<br>
</ol>
<hr>
<b>dengan angka romawi:</b>
<ol type = "i">
<li>yogya<br>
<li>magelang<br>
</ol>
</body>
</html>
Penggunaan tag <dl>, <dt>, <dd> untuk
menampilkan daftar khusus dengan tampilan menjorok ke
kanan.
24
<html>
<head>
<title>daftar definisi</title>
</head>
<body>
<b>visi dan misi</b>
<dt>visi</dt>
<dd>menjadi universitas yang mandiri,
inovatif, terkemuka di tingkat
nasional dan internasional,
pelopor pengembangan ilmu
pengetahuan, teknologi,
humaniora, dan seni berdasarkan
moral agama.</dd>
<dt>misi</dt>
<dd>menyelenggarakan pendidikan
akademik, vokasional dan
profesi;</dd>
</body>
</html>
Menampilkan Gambar
Penggunaan <body background> untuk
menampilkan background dan <img src> untuk
menampilkan gambar.
<html>
<head>
<title>menampilkan gambar</title>
</head>
<body background = "foto01.jpg">
gambar komputer terbaru
<img src = "foto02" align = "middle">
25
</body>
</html>
Pengaturan ukuran gambar dengan atribut height
dan weight, serta penggunaan atribut border untuk
memberi bingkai gambar.
<html>
<head>
<title>contoh penggunaan img</title>
</head>
<body>
<img src = "../foto01.jpg"
height = "150" width = "150"
border="2">
<br>
<img src = "../foto02.jpg"
height = "50" width = "50"
border="3">
</body>
</html>
Tabel
Tag-tag yang digunakan:
<table> untuk pembuatan tabel, dengan atribut border
untuk memberi bingkai.
<caption> menentukan judul tabel
<tr> membuat baris dalam tabel
<th> membuat judul kolom
26
<td> membuat sebuah cell data (baris)
<html>
<head>
<title>contoh tabel dengan garis</title>
</head>
<body>
<table border = "2">
<caption>data guru</caption>
<tr><th>nama</th><th>alamat</th></tr>
<tr><td>hendarso</td><td>jakarta</td></tr>
<tr><td>wiguna</td><td>bekasi</td></tr>
<tr><td>endang</td><td>pondok
ungu</td></tr>
<tr><td>indarto</td><td>cibitung</td></tr>
</table>
</body>
</html>
Menggabungkan cell dengan tag <rowspan> dan
<colspan>
Atribut rowspan ditempatkan pada tag <td>
<html>
<head>
<title>penggunaan rowspan</title>
</head>
<body>
<table border = "1">
<caption>struktur
organisasi</caption>
<tr>
27
<td rowspan = "3">guru kelas</td>
<td>hendarso</td>
</tr>
<tr><td>endang</td></tr>
<tr><td>mulyana</td></tr>
<tr>
<td rowspan = "2">pustakawan</td>
<td>wiwik</td>
<tr><td>sucipto</td></tr>
</tr>
</table>
</body>
</html>
Atribut colspan bisa ditempatkan pada tag <td> atau
<th>
<html>
<head>
<title>contoh penggunaan
colspan</title>
</head>
<body>
<table border = "1">
<caption>struktur
organisasi</caption>
<tr>
<th colspan = "3">data pribadi</th>
</tr>
<tr><td>nama</td><td>alamat</td><td>umur<
/td></tr>
<tr><td>jhonny</td><td>tangerang</td><td>
28
25</td></tr>
<tr><td>faza</td><td>banten</td><td>21</t
d></tr>
<tr><td>lukman</td><td>cibinong</td><td>2
2</td></tr>
</table>
</body>
</html>
Pengaturan jarak dalam tabel :
cellspacing digunakan untuk mengatur jarak bagian
sel terhadap tepi dalam bingkai tabel.
cellpadding digunakan untuk mengatur jarak teks
terhadap tepi kiri.
<html>
<head>
<title>contoh tabel dengan pengaturan
jarak menggunakan cellpadding dan
cellspacing</title>
</head>
<body>
<table border = "2" cellpadding="7"
cellspacing="10">
<caption>data guru</caption>
<tr><th>nama</th><th>alamat</th></tr>
<tr><td>hendarso</td><td>jakarta</td></tr
>
29
<tr><td>wiguna</td><td>bekasi</td></tr>
<tr><td>endang</td><td>pondok
ungu</td></tr>
<tr><td>indarto</td><td>cibitung</td></tr
>
</table>
</body>
</html>
Link
Berikut contoh penggunaan tag <a href>:
<html>
<head>
<title>halaman utama</title>
</head>
<body>
<a href="tujuan.html">klik disini
untuk menuju halaman selanjutnya </a>
</body>
</html>
Berikut contoh menggunakan bookmark pada suatu
halaman web yang panjang:
<html>
<head>
<title>contoh bookmark</title>
</head>
<body>
30
<center>
<h1>langkah-langkah install
jdk</h1>
<a href = "#langkah1">langkah
1</a><br>
<a href = "#langkah2">langkah
2</a><br>
<a href = "#langkah3">langkah
3</a><br>
<hr>
<a name = "#langkah1">
<h2>langkah 1</h2>
...<br>
...<br>
<hr>
<a name = "#langkah2">
<h2>langkah 2</h2>
...<br>
...<br>
<hr>
<a name = "#langkah3">
<h2>langkah 3</h2>
...<br>
...<br>
<hr>
</center>
</body>
</html>
Form
Berikut contoh input data dengan form:
<html>
<head>
<title>contoh penggunaan
31
formulir</title>
</head>
<body>
<form action = "proses.html" method =
"post">
nama :
<input type = "text" name = "nama"
size = "40"
maxlength = "20">
<br>
alamat :
<textarea name = "alamat" rows = "5"
cols = "40">
</textarea>
</form>
</body>
</html>
Berikut contoh penggunaan tipe checkbox:
<html>
<head>
<title>contoh penggunaan formulir
(checkbox)</title>
</head>
<body>
<form>
hobi<br>
<input type = "checkbox" name =
"musik" checked>musik<br>
<input type = "checkbox" name =
"memancing">memancing<br>
</form>
</body>
32
</html>
Berikut contoh penggunaan tipe radio:
<html>
<head>
<title>contoh penggunaan formulir
(radio)</title>
</head>
<body>
<form>
jenis kelamin:<br>
<input type = "radio"
name = "sex" checked>pria<br>
<input type = "radio"
name = "sex">wanita<br>
</form>
</body>
</html>
Berikut contoh penggunaan dengan select:
<html>
<head>
<title>contoh select</title>
</head>
<body>
<form method="post"
action="proses.PHP">
agama<br>
<select name = "agama">
33
<option value =
"islam">islam</option>
<option value =
"kristen">kristen</option>
<option value =
"katholik">katholik</option>
<option value =
"hindu">hindu</option>
<option value =
"buddha">buddha</option>
</select>
</form>
</body>
</html>
Tag Meta
Tag Meta diletakkan dalam bagian header setelah
</title>. Digunakan untuk menyimpan sejumlah
informasi.
Contoh :
Jika membuat dokumen HTML melalui FrontPage
2000 akan muncul tag meta sebagai berikut :
<meta name="generator"
content="microsoft frontpage 4.0">
Agar halaman web yang dibuat disertakan ketika
mesin pencari web (missal Google) melakukan
34
pencarian, gunakan atribut keywords, semakin banyak
keywords yang dimasukkan, akan semakin besar
kesempatan halaman web ditampilkan dalam hasil
pencarian.
<meta name="keywords"
contents="informatika, internet,
online">
Berikut contoh perintah untuk mengarahkan suatu
halaman ke halaman lain:
<head>
<title>pengalihan halaman</title>
<meta http-equiv = "refresh" content =
"3; url = next.html">
</head>
<body>
halaman akan arahkan ke halaman next.html
dalam 3 detik</body>
</body>
Buat file next.html:
<html>
<head>
<title>halaman baru</title>
</head>
<body>
selamat datang!!!!!.......
</body>
</html>
35
BAB II
CSS (CASCADING STYLE SHEET)
A. Pengenalan Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS) merupakan file yang berisi
rangkaian intruksi untuk mengatur komponen dalam sebuah
halaman web sehingga akan lebih terstruktur dan rapi. Meskipun
bukan merupakan suatu keharusan dalam membuat halaman web,
akan tetapi penggunaan style sheets merupakan kelebihan
tersendiri. Suatu style sheet merupakan tempat untuk mengontrol
dan mengatur style-style yang ada. Style sheet mendeskripsikan
bagaimana tampilan dokumen HTML di layar. CSS dapat
mengendalikan ukuran gambar, warna teks, warna tabel, ukuran
border, warna border, warna hyperlink, warna mouse over, spasi
antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan
parameter lainnya. CSS terdiri dari Selektor, deklarasi, Properti
dan Nilai. Seperti pada HTML, PHP dan bahasa pemrograman
lainnya, CSS juga memiliki aturan yang menulis itu sendiri.
36
Selector {property: value;}
Contoh:
#header{Width : 100px;Height : 100px;}
B. Metode Penempatan File CSS
Menempatkan style CSS dalam dokumen web yang dibuat
dalam bahasa html dapat dilakukan dengan beberapa cara dan
tingkatan yang berbeda sesuai dengan keinginan. Cara penempatan
dalam HTML yaitu dengan menggunakan beberapa cara,
diantaranya yaitu menggunakan Inline Style, Internal Style,
External style, dan juga teknik Importing dengan Internal Style.
Inline Style
Merupakan teknik menempatkan CSS dalam sebuah
tag HTML yang hanya berlaku untuk dokumen yang
ditempati tersebut. Teknik ini digunakan untuk mengatur
elemen HTML dan tidak digunakan untuk mengatur seluruh
Selektor Deklarasi
Property Value Property Value
37
elemen dalam dokumen web. Contohnya yaitu sebagai
berikut:
<html>
<head>
<title>Contoh Penerapan Inline
Style</title>
</head>
<body>
<font style="font-family:mistral;
font-size: 15px; background-
color:green">Penerapan Inline Style
</font>
</body>
</html>
Internal Style
yaitu cara embeding CSS dengan menulis
langsung di dalam file html yang ingin diatur tampilannya.
Penulisan ini disisipkan diantara tag head juga dengan diapit
oleh tag style. Berikut ini contohnya:
<head>
<style type="text/css">
hr {color:red;}
p {margin-left:40px;}
body {background-
image:url("gambar/foto.jpg");}
</style>
</head>
38
Embedded Style Sheet
Dengan menggunakan teknik ini dapat memanggil
style CSS pada file CSS yang diinginkan dengan
menggunakan perintah “Link rel” yang berfungsi untuk
menghubungkan kedalam sebuah style CSS eksternal
dengan nama yang telah ditentukan seperti terlihat pada
contoh:
<link rel="stylesheet" type="text/css"
href="style.css>
Dalam contoh diatas dapat menghubungkan sebuah
dokumen html dengan sebuah style eksternal dengan nama
style.css yang telah dibuat sedemikian rupa sehingga style
tersebut dihubungkan untuk memformat tampilan dalam
dokumen html tersebut.
Dalam mengimport file CSS, dapat langsung
mengimport beberapa file CSS sekaligus dalam sebuah
dokumen agar memperkaya tampilan dokumen seperti
terlihat pada contoh berikut:
<link rel="stylesheet" type="text/css"
href="style1.css">
<link rel="stylesheet" type="text/css"
39
href="style2.css">
<link rel="stylesheet" type="text/css"
href="style3.css">
C. Atribut Pada CSS
Berikut ini adala contoh beberapa atribut yang terdapat pada CSS:
Attribute Description Contoh Value
font-size untuk mengubah ukuran font font-
size:large
font- family untuk mengubah jenis
tulisan
font-family:
Geneva, Arial,
Helvetica,
sans-serif;
line-height
untuk menentukan line
spacing (jarak vertikal antara
baris)
line-
height:1.5 em;
text-align untuk mengatur perataan
text
text-
align:left;
text-
align:right;
text-
align:center;
text-
align:justify;
Border
untuk memberi garis/batas
pada kotak/bidang HTML
border:double;
width
untuk menentukan
lebar kotak/bidang HTML
width:30px;
height
untuk menentukan tinggi
kotak/bidang HTML
width: 10px;
40
Attribute Description Contoh Value
margin untuk pemberian jarak di
luar kotak/bidang HTML
margin: 20px;
Padding untuk mengatur jarak di
dalam kotak/bidang HTML
padding:15px;
opacity
untuk membuat suatu
element CSS terlihat
transparan
opacity : 0,1;
opacity : 0,2;
opacity : 0,3;
opacity : 0,9;
text-
decoration
untuk memberi dekorasi
pada text.
Underline
text-
transform
untuk mengatur jenis teks
pada suatu element.
text-
transform:
capitalize
text-
transform:
lowpercase
text-
transform:
uppercase
Background-
color
untuk mengatur latar
belakang.
Background-
color: red;
Background-
image.
Untuk memberikan gambar
pada latar belakang
Background-
image:
url(foto.jpg);
41
BAB III
PENGANTAR WEB SERVER DAN PHP
A. Web Server
Web server merupakan software yang memberikan layanan
data yang berfungsi menerima permintaan HTTP atau HTTPS dari
klien yang dikenal dengan browser web dan mengirimkan kembali
hasilnya dalam bentuk halaman - halaman web yang umumnya
berbentuk dokumen HTML. Web server menunggu permintaan dari
client yang menggunakan browser seperti Netscape Navigator,
Internet Explorer, Mozilla, dan program browser lainnya. Jika ada
permintaan dari browser, maka web server akan memproses
permintaan itu kemudian memberikan hasil prosesnya berupa data
yang diinginkan kembali ke browser. Data ini mempunyai format
yang standar, disebut dengan format SGML (Standar Generalized
Markup Language). Data yang berupa format ini kemudian akan
ditampilkan oleh browser sesuai dengan kemampuan browser
tersebut. Web server untuk berkomunikasi dengan client (web
browser) mempunyai protokol sendiri, yaitu HTTP (hypertext
transfer protocol). Dengan protokol ini, komunikasi antar web
server dengan client-nya dapat saling dimengerti dan lebih mudah.
42
B. PHP
PHP (Hypertext Preprocessor) yaitu bahasa pemrograman
yang digunakan secara luas untuk penanganan pembuatan dan
pengembangan sebuah situs web dan bisa digunakan bersamaan
dengan HTML. PHP bersifat serverside, artinya bahasa berbentuk
script yang disimpan dan dijalankan di komputer server
(WebServer) sedang hasilnya yang dikirimkan ke komputer client
(WebBrowser) dalam bentuk script HTML (Hypertext Mark up
Language).
C. Tag PHP
Berikut ini merupakan tag yang digunakan untuk menandai
awal dan akhir PHP:
<?php
............
............
?>
<?
............
............
?>
<%
............
............
%>
<script
language=“PHP”>
............
............
<script>
43
D. Menampilkan Data
Untuk menampilkan data pada web browser dapat
menggunakan perintah echo atau print.
Echo
Sintaks:
echo "tulisan yang akan ditampilkan";
atau
echo tulisan yang akan ditampilkan;
Contoh:
<?php
echo "Haloooo.., Apa Kabar ? ";
?>
Atau:
<?php
Echo Haloooo.., Apa Kabar ?;
?>
Sintaks:
echo "tulisan yang akan ditampilkan";
atau
echo data yang akan ditampilkan
Contoh:
44
<?php
print "Haloooo.., Apa Kabar ?
";
?>
E. Komentar
Komentar yaitu catatan yang ditulis pada kode dengan
tujuan sebagai bahan dokumentasi. Teks tersebut bukan bagian dari
program dan tidak mempengaruhi jalannya program. Pada PHP,
ada 3 macam cara penulisannya :
/* komentar */
Tulisan apapun yang berada di antara ’/*’ dan ’*/’
akan dianggap sebagai komentar. Cara seperti ini sangat
berguna dan efisien untuk pemberian komentar yang berada
dalam banyak baris.
<?php
/* ini merupakan komentar,
Sehingga tidak dieksekusi*/
?>
45
// komentar
Tulisan di baris yang sama setelah ’//’ akan
dianggap sebagai komentar. Cara ini digunakan untuk
pemberian komentar singkat yang tidak lebih dari 1 baris.
<?php
// ini merupakan komentar,
// Sehingga tidak dieksekusi
?>
# komentar
Sama seperti ’//’, tulisan di baris yang sama setelah
’#’ akan dianggap sebagai komentar. Cara ini digunakan
untuk pemberian komentar singkat yang tidak lebih dari 1
baris.
<?php
# ini merupakan komentar,
# Sehingga tidak dieksekusi
?>
F. Variabel
Variabel merupakan suatu tempat untuk menampung data
yang nilainya bisa diubah. Untuk mendefinisikan variabel, diawali
dengan simbol karakter dollar(‘$’) dan diikuti oleh nama
variabel.
$nama_variabel = nilai;
46
Adapun aturan dalam menyusun variabel :
1. Dapat terdiri dari huruf besar dan kecil, angka, garis
bawah “_”.
2. Tidak boleh mengandung spasi
3. Karakter pertama variabel harus dari karakter huruf atau
garis bawah.
Dalam PHP, tidak diperlukan deklarasi variabel dengan tipe
datanya seperti bahasa pemrograman pascal maupun java. Setiap
variabel yang terbentuk dalam program dianggap bertipe variant,
dengan kata lain dapat menampung tipe data dengan jenis apapun.
G. Operator
Operator yaitu suatu symbol yang berfungsi untuk
menyusun sebuah ekspresi maupun operasi. Sedangkan yang
dioperasikan operator disebut dengan operand. Adapun macam –
macam operator yaitu :
Operator Aritmetika
Operator aritmatika merupakan operator untuk
melakukan operasi matematis. Adapun macam‐macam
operatornya dapat dilihat pada tabel berikut:
47
Operator Deskripsi Penggunaan
+ Penjumlahan A + B
- Pengurangan A – B
* Perkalian A * B/
/ Pembagian A / B
% Sisa Pembagian A % B
++ Menambahkan nilai 1
pada operand
A++
-- Mengurangi nilai 1
pada operand
A--
Operator Perbandingan
Merupakan simbol - simbol operator untuk melakukan
pembandingan antara dua buah operand. Hasil
pembandingan bernilai boolean.
Operator Penggunaan Keterangan
> a > b a lebih besar dari b
>= a >= b a lebih besar atau sama
dengan b
< a < b a lebih kecil b
<= a <= b a lebih kecil atau sama
dengan b
== a = = b a sama dengan b
!= a != b a tidak sama dengan b
48
Operator Logika
Merupakan simbol-simbol operator untuk menyusun
kalimat ekspresi/ungkapan logika. Hasil operasi ini akan
didapatkan nilai boolean.
Operator Deskripsi
AND atau && Operasi logika And
OR atau || Operasi logika Or
XOR Operasi logika Ekslusif Or
! Negasi / Ingkaran
Tabel Logika And (AND atau &&)
A B Hasil
1 1 1
1 0 0
0 1 0
0 0 0
Tabel Logika Or (OR atau ||)
A B Hasil
1 1 1
1 0 1
0 1 1
0 0 0
49
Tabel Logika XOR (XOR atau ^)
A B Hasil
1 1 0
1 0 1
0 1 1
0 0 0
Tabel Logika Negasi/ Ingkaran ( ! )
A Hasil
1 0
0 1
H. Operator String
Dalam PHP juga tersedia operator string, yaitu operasi
untuk menggabungkan teks. Adapun symbol yang digunakan yaitu
berupa karakter titik/point (.).
Contoh:
<?php
$a="Selamat ";
$b="Pagi ";
$c= $a.$b;
echo $c;
?>
50
I. Pernyataan Seleksi
Pernyataan seleksi merupakan suatu mekanisme suatu
pernyataan akan dikerjakan atau tidak, hal tergantung pada kondisi
yang dirumuskan. Dalam PHP atau bahasa pemrograman lainnya
pernyataan seleksi diterapkan dengan menggunakan statement :
If
If - Else
If - Else - If
Switch
Pernyataan If
Pernyataan dieksekusi bila kondisi bernilai true. Bila
pernyataan lebih dari satu baris, maka semua pernyataan
ditulis dalam tanda {}. Sintaks dari pernyataan seleksi
kondisi if:
if (kondisi)
pernyataan;
atau
if (kondisi) {
pernyataan;
}
Pernyataan If - Else
Instruksi if - else digunakan untuk memilih alternatif
berdasarkan suatu persyaratan. Apabila persyaratan
51
dipenuhi maka suatu alternatif dikerjakan dan bila tidak
dipenuhi maka alternatif lain yang dikerjakan. Sintaks dari
pernyataan seleksi kondisi if - else:
if (kondisi)
pernyataan 1;
else
pernyataan 2;
atau
if (kondisi) {
pernyataan 1;
}else{
pernyataan 2;
}
Contoh:
<?php
$a= 43;
$b= 12;
if ($a == $b){
echo "a sama dengan b";
}else{
echo "a tidak sama dengan b";
}
?>
52
Pernyataan If – Else If
Instruksi if - else - if digunakan untuk memilih
alternatif berdasarkan suatu persyaratan. Kondisi bisa lebih
dari 1 (ada beberapa kondisi). Suatu alternatif dikerjakan
berdasarkan dengan kondisi yang sesuai. Sintaks dari
pernyataan seleksi kondisi if‐else if:
if (kondisi 1)
pernyataan 1;
else if (kondisi 2)
pernyataan 2;
else
pernyataan 3;
atau
if (kondisi 1) {
pernyataan 1;
}else if (kondisi 2) {
pernyataan 2;
}else{
pernyataan 3;
}
Contoh:
<?php
$juara = 1;
if ($juara == 1) {
echo "Sangat Bagus!";
}else if($juara == 2) {
echo "Bagus!";
}else if($juara == 3) {
53
echo "Cukup!";
}else {
echo "Buruk!";
}
?>
Pernyataan Switch
Selain bentuk if-else PHP juga menyediakan
instruksi switch yang memperkenankan lebih dari dua
alternatif sehingga bisa disebut sebagai instruksi
multialternatif. Sintaks dari pernyataan switch:
switch (ekspresi) {
case nilai 1:
pernyataan 1;
break;
case nilai 2:
pernyataan 2;
break;
default:
pernyataan 3;
break;
}
Contoh:
<?php
$juaraKe =1;
switch($juaraKe) {
54
case 1:
echo"Hadiah = Mobil";
break;
case 2:
echo"Hadiah = Sepeda";
break;
default:
echo"Maaf anda belum
beruntung!";
}
?>
J. Looping / Perulangan
Looping atau yang biasa disebut dengan perulangan
merupakan proses yang dilakukan secara berulang-ulang sampai
batas yang sudah ditentukan. Jika dalam perulangan tersebut tidak
disertakan batas maka komputer akan error karena proses itu akan
berulang terus sampai tidak terhingga sementara variabel dalam
komputer masih terbatas. Looping ditangani oleh fungsi for, while,
do while. Perbedaan dari ketiganya yaitu pada syntax dan
penggunaannya.
For merupakan pernyataan pengulangan yang jumlah
pengulangannya telah ditentukan. Pengecekannya dilakukan
di awal. Menggunakan 3 buah parameter. Berikut syntax
untuk perulangan dengan menggunakan For :
55
for (inisialisasi; kondisi; iterasi) {
pernyataan;
}
Keterangan :
Inisialisasi inisialisasi nilai variabel yang digunakan
untuk membuat perulangan. Inisialisasi dieksekusi
hanya satu kali.
Kondisi ekpresi boolean. Selama kondisi bernilai
true maka pernyataan dieksekusi. Pernyataan kondisi
dieksekusi sebelum pernyataan dieksekusi.
Iterasi perubahan nilai variabel yang suatu saat
harus menyebabkan kondisi bernilai false, sehingga
perulangan berhenti. Iterasi dieksekusi setelah
pernyataan dieksekusi.
Contoh:
<?php
for ($i=1; $i<=5; $i++) {
echo $i;
}
?>
While merupakan pernyataan perulangan yang akan
melakukan pengulangan selama suatu kondisi memenuhi
syarat. While digunakan untuk mengulang suatu proses yang
56
belum diketahui jumlahnya. Pengecekan kondisi akan
dilakukan terlebih dahulu. Jika kondisi masih bernilai true,
maka perulangan akan terus berlanjut. Berikut syntax untuk
perulangan dengan menggunakan While :
while (kondisi) {
pernyataan;
}
Keterangan:
Kondisi merupakan ekspresi boolean.
Selama kondisi bernilai true, maka pernyataan
dieksekusi.
Harus ada pernyataan yang suatu saat menyebabkan
kondisi bernilai false
sehingga perulangan berhenti.
Contoh:
<?php
i=0
while (i<10)
{
Echo $i;
i++;
}
?>
57
Do-While hampir sama dengan while, tetapi pada do-while
pengecekan terjadi pada akhir blok, sedangkan while terjadi
pada awal. Perulangan do-while memiliki urutan yang
terbalik dibandingkan dengan while dan memiliki perbedaan
utama yaitu pada do-while pernyataan dijalankan terlebih
dahulu kemudian melakukan pemeriksaan kondisi syarat.
Berikut syntax untuk perulangan dengan menggunakan do-
while:
do {
pernyataan;
} while( kondisi );
Keterangan:
Pernyataan dalam blok do‐while dieksekusi terlebih
dahulu.
Bila kondisi bernilai true maka pernyataan akan
dieksekusi kembali hingga kondisi bernilai false.
Tanda “;” setelah kondisi harus dituliskan.
<?php
$i = 1;
do {
echo $i;
$i++;
}
while ($i<=10);
?>
58
Contoh
Contoh 1. Perulangan for dengan increment:
<?php
for( $a = 0; $a <= 5; $a++ ){
echo "$a<br>";
}
?>
Contoh 2. Perulangan for dengan decrement:
<?php
for( $a = 5; $a >= 0; $a-- ){
echo "$a<br>";
}
?>
Contoh 3. Perulangan for dengan 2 variabel:
<?php
for( $a=10, $b=0; $b<$a; $a--, $b++ ){
echo "nilai a = $a, nilai b = $b
<br>";
}
?>
Contoh 4. Perulangan while dengan increment:
<?php
$a=0;
while ($a<5) {
echo "$a<br>";
$a++;
}
59
?>
Contoh 5 . Perulangan while dengan decrement:
<?php
$a=5;
while ($a>0) {
echo "$a<br>";
$a--;
}
?>
Contoh 6 . Perulangan do while dengan increment:
<?php
$a = 0;
do {
echo "$a<br>";
$a++;
} while ($a<5);
?>
Contoh 7. Perulangan do while dengan decrement:
<?php
$a = 5;
do {
echo "$a<br>";
$a--;
} while ($a>0);
?>
60
K. Array
Array merupakan bentuk struktur data dimana beberapa
data sejenis dikumpulkan dalam satu nama variabel. Sebuah array
akan menyimpan beberapa item data yang memiliki tipe data sama
didalam sebuah blok memori yang berdekatan yang kemudian
dibagi menjadi beberapa slot. Setiap elemen data diidentifikasi
melalui indeks dari variabel larik tersebut. Array mempunyai
panjang elemen yang tetap dan ditentukan ketika array dibuat.
array digunakan untuk mengidentifikasi variabel yang memiliki
jumlah data yang lebih dari satu, tetapi memiliki nama variabel
yang sama.
Keterangan:
Nama Array = namaSiswa
Panjang Array (Length) = 3
Isi Array = array ke-0 = Budi
array ke-1 = Dadang
array ke-2 = Made
61
L. Assignment Array
Ada beberapa cara yang bisa digunakan untuk membuat
data array dalam program PHP. Cara yang pertama yaitu
memasukkan nilai dari array itu sendiri secara langsung dengan
menyebutkan indeks, seperti berikut ini.
Cara 1:
$namaSiswa[0] = "Budi";
$namaSiswa[1] = "Dadang";
$namaSiswa[2] = "Made";
Cara yang kedua yaitu memasukkan nilai dari array secara
langsung dengan tidak menyebutkan indeks. Cara ini PHP secara
otomatis akan memberi indeks sesuai nilai indeks terakhir dari
array. Maka pada variabel $namaSiswa indeks 0 berisi “Budi”,
indeks 1 berisi “Dadang” dan indeks 2 akan berisi “Made”.
Cara 2:
$namaSiswa[] = "Budi";
$namaSiswa[] = "Dadang";
$namaSiswa[] = "Made";
Cara yang ketiga yaitu dengan menggunakan fungsi
array(). Pada contoh ini, suatu array dideklarasikan dengan
62
memberi nilai secara langsung. Hasilnya akan sama dengan contoh-
contoh sebelumnya.
Cara 3:
$namaSiswa = array("Budi", "Dadang", "Made");
<?php
$namaSiswa[0] = "Budi";
$namaSiswa[1] = "Dadang";
$namaSiswa[2] = "Made";
echo "Nama Siswa :
".$namaSiswa[0]."<br>";
echo "Nama Siswa :
".$namaSiswa[1]."<br>";
echo "Nama Siswa :
".$namaSiswa[2]."<br>";
?>
<?php
$namaSiswa[0] = "Budi";
$namaSiswa[1] = "Dadang";
$namaSiswa[2] = "Made";
for($i=0;$i<count($namaSiswa);$i++){
echo "Nama Siswa :
".$namaSiswa[$i]."<br>";
}
?>
63
M. Array Asosiatif
Array asosiatif merupaka array yang tidak menggunakan
integer sebagai indeks, namun menggunakan string sebagai indeks.
Contoh 1:
$alamat["Budi"] = "Ciasem";
$alamat["Dadang"] = "Bogor";
$alamat["Made"] = "Kalimalang";
Contoh 2:
$alamat = array("Budi" => "Ciasem", "Dadang" =>
"Bogor", "Made" => "Kalimalang");
<?php
$alamat["Budi"] = "Ciasem";
$alamat["Dadang"] = "Bogor";
$alamat["Made"] = "Kalimalang";
echo "Alamat Budi :
".$alamat["Budi"]."<br>";
echo "Alamat Dadang :
".$alamat["Dadang"]."<br>";
echo "Alamat Made :
".$alamat["Made"]."<br>";
?>
64
N. Array Multidimensi
Array multidimensi diimplementasikan sebagai array di
dalam array. Array multidimensi bisa memudahkan untuk
membuat suatu program karena beberapa array dapat dibuat
sekaligus dan beberapa perintah operasi bisa diringkas. Berikut
contoh array multidimesi.
<?php
$dataKaryawan = array
(
array("Ivan","Supervisor",30),
array("Made","Kepala Cabang",33),
array("Langgeng","HRD",32),
array("Mulyana","Bendahara",32)
);
echo $dataKaryawan[0][0]." Sebagai
".$dataKaryawan[0][1].", Umur:
".$dataKaryawan[0][2]."<br>";
echo $dataKaryawan[1][0]." Sebagai
".$dataKaryawan[1][1].", Umur:
".$dataKaryawan[1][2]."<br>";
echo $dataKaryawan[2][0]." Sebagai
".$dataKaryawan[2][1].", Umur:
".$dataKaryawan[2][2]."<br>";
echo $dataKaryawan[3][0]." Sebagai
".$dataKaryawan[3][1].", Umur:
".$dataKaryawan[3][2]."<br>";
?>
<?php
$dataKaryawan = array
65
(
array("Ivan","Supervisor",30),
array("Made","Kepala Cabang",33),
array("Langgeng","HRD",32),
array("Mulyana","Bendahara",32)
);
for($i=0;$i<=3;$i++){
echo $dataKaryawan[$i][0]."
Sebagai ".$dataKaryawan[$i][1].",
Umur: ".$dataKaryawan[$i][2]."<br>";
}
?>
O. Session
Session merupakan perintah untuk pendeklarasian variabel
global yang akan memanggil nilai dari variabel tersebut. Untuk
mengakhiri atau menghapus semua variabel session, dengan
menggunakan fungsi session_destroy(). Fungsi session destroy
tidak memerlukan argumen dalam penggunaanya.
Pada PHP ada beberapa perintah untuk Session:
Memulai PHP – Session
Untuk menyimpan data dalam session, terlebih
dahulu harus memulai session. Untuk memulai session,
perintahnya yaitu : session_start().
66
Mengisi Data ke dalam Session
Untuk menyimpan data ke dalam session, digunakan
perintahnya $_SESSION['nama_session'] = data Selain itu
ada perintah lain seperti
session_register(“nama_session_(sesuai_nama_data)”).
Memanggil Data yang Tersimpan dalam Session
Setelah data disimpan dalam session, selanjutnya
dapat dipanggil kembali apabila diperlukan. Untuk
memanggil data dalam session, caranya dengan menuliskan
$_SESSION['nama_session'].
Menghapus Data Session
Untuk menghapus data tertentu yang tersimpan
dalam suatu session, digunakan perintah
unset($_SESSION['nama_session']). Namun jika ingin
menghapus semua session sekaligus, dapat dilakukan
dengan memberikan perintah session_destroy(). Biasanya
menghapus data session yang terkait dengan username
diterapkan pada proses logout. Dengan proses logout, maka
username yang telah tersimpan dalam session akan
terhapus.
67
Memeriksa keberadaan suatu session
Untuk mengecek keberadaan session, dapat digunakan
perintah isset($_SESSION['nama_session']), atau bisa juga
dengan pengeceken lainnya seperti !empty(), dll dimana
akan menghasilkan nilai TRUE apabila session sudah ada,
dan akan menghasilkan nilai FALSE apabila session tidak
ada.
P. Cookies
Cookies merupakan mekanisme penyisipan sebuah variabel
data dengan waktu tertentu pada sisi client (browser). Data pada
cookies itulah yang pertama kali akan dikirimkan ke server, yang
kemudian disimpan dalam browser web. Cookies memiliki
kemampuan untuk menyimpan serta memanggil kembali data yang
ada di hardisk client.
Cara penulisan yang lengkap:
SetCookie (string name, string value, int expire, string path,
string domain, int secure)
Fungsi cookies:
Membantu web site untuk mengingat identitas user dan
mengatur preferences yang sesuai sehingga apabila user
68
kembali mengunjungi web site tersebut akan langsung
dikenali.
Menghilangkan kebutuhan untuk me-register ulang di web
site tersebut saat mengakses lagi tersebut (site tertentu saja),
cookies membantu proses login user ke dalam web server
tersebut.
Memungkinkan web site untuk menelusuri pola web surfing
user dan mengetahui situs favorit yang sering
dikunjunginya.
Jenis Cookies:
Non persistent (session) cookies.
Suatu cookie yang akan hilang sewaktu user
menutup browser dan biasanya digunakan pada ‘shopping
carts’ di toko belanja online untuk menelusuri item-item
yang dibeli,
Persistent cookies.
Diatur oleh situs-situs portal, banner / media iklan
situs dan lainnya yang ingin tahu ketika user kembali
mengunjungi site mereka. (misal dengan cara memberikan
opsi “Remember Me” saat login). File file ini tersimpan di
hardisk user.
69
Kedua tipe cookies ini menyimpan informasi mengenai
URL atau domain name dari situs yang dikunjungi user dan
beberapa kode yang mengindikasikan halaman apa saja yang sudah
dikunjungi. Cookies dapat berisi informasi pribadi user, seperti
nama dan alamat email, Akan tetapi dapat juga user memberikan
informasi ke website tersebut melalui proses registrasi. Dengan
kata lain, cookies tidak akan dapat mengambil nama dan alamat
email kecuali diberikan oleh user. Namun demikian, ada kode
tertentu (malicious code) yang dibuat misalnya dengan ActiveX
control, yang dapat mengambil informasi dari PC tanpa
sepengetahuan user.
Cookies umumnya kurang dari 100 bytes sehingga tidak
akan mempengaruhi kecepatan browsing. tetapi karena umumnya
browser diatur secara default untuk menerima cookies maka user
tidak akan tahu bahwa cookies sudah ada di komputer. Cookies
dapat berguna terutama pada situs yang memerlukan registrasi,
sehingga setiap kali mengunjungi situs tersebut, cookies akan me-
login-kan user tanpa harus memasukkan user name dan password
lagi.
70
Contoh deklarasi cookie:
setcookie("nama_pengguna","budi", time() + 3600
* 1);
Keterangan dari contoh diatas:
Nama cookie : nama_pengguna
Isi cookie : budi
Waktu aktif : 3600 * 1
Contoh cara mengambil nilai cookie
echo $_COOKIE['nama_pengguna'];
Q. Cache
Suatu tempat untuk menyimpan sesuatu secara sementara,
mekanisme untuk mempercepat transfer data dengan cara
menyimpan data yang telah diakses di suatu buffer, dengan harapan
jika data yang sama akan diakses, akses akan menjadi lebih cepat.
Dalam Internet sebuah proxy cache dapat mempercepat proses
browsing dengan cara menyimpan data yang telah diakses di
komputer yang berjarak dekat dengan komputer pengakses. Jika
kemudian ada user yang mengakses data yang sama, proxy cache
akan mengirim data tersebut dari cache-nya, bukan dari tempat
71
yang lama diakses. Dengan mekanisme HTTP, data yang diberikan
oleh proxy selalu data yang terbaru, karena proxy server akan
selalu mencocokkan data yang ada di cache-nya dengan data yang
ada di server luar. Dalam terminologi hardware, istilah ini biasanya
merujuk pada memory berkecepatan tinggi yang menjembatani
aliran data antara processor dengan memory utama (RAM) yang
biasanya memiliki kecepatan jauh lebih rendah. Penggunaan cache
ditujukan untuk meminimalisir terjadinya bottleneck dalam aliran
data antara processor dan RAM. Sedangkan dalam terminologi
software, istilah ini merujuk pada tempat penyimpanan sementara
untuk beberapa file yang sering diakses (biasanya diterapkan dalam
network) Berasal dari kata cash, dipergunakan untuk meningkatkan
kecepatan transfer data baik secara sementara maupun permanent.
72
BAB IV
FUNCTION STRING
Function String merupakan sebuah fungsi yang digunakan
untuk mengolah karakter atau kata dalam bahasa pemrograman
PHP. Berikut ini beberapa contoh function pada string:
A. echo()
Function echo() digunakan untuk menampilkan satu atau lebih
string.
Contoh:
<?php
echo "terima kasih telah hadir pada acara
kami ";
?>
Output dari program diatas:
terima kasih telah hadir pada acara kami
B. print()
Sama dengan function echo(), function print() juga
digunakan untuk menampilkan satu atau lebih string.
73
Contoh:
<?php
print "terima kasih telah hadir pada acara
kami";
?>
Output dari program diatas:
terima kasih telah hadir pada acara kami
C. strlen()
Function strlen() merupakan fungsi dalam PHP yang
digunakan untuk mendapatkan nilai panjang / jumlah karakter suatu
string, dimana jumlah karakter yang akan dihitung dalam bentuk
string.
Sintaks dasar fungsi strlen() dalam pemrograman PHP
yaitu sebagai berikut :
strlen("string")
atau
strlen($variabel_string)
Keterangan sintaks:
String / $variabel_string merupakan strimg yang
akan dihitung jumlah karakternya.
74
Contoh:
<?php
echo strlen("Negara Indonesia");
?>
Keterangan:
Output dari contoh diatas: 16
Spasi dihitung sebagai karakter
D. addslashes()
Fungsi Addcslashes( ) digunakan untuk memberikan tanda
slash “ \ “ pada karakter tertentu.
Sintaks dasar:
Addcslashes(String,Parameter)
Keterangan sintaks:
String yaitu argument yang menunjukkan data
awal yang akan diproses.
Parameter yaitu argument yang menunjukkan
parameter filter.
Contoh:
<?php
$kalimat_semula="belajar pemrograman web
itu menyenangkan";
75
$kalimat=Addcslashes($kalimat_semula,'ai')
;
echo $kalimat;
?>
Output dari program diatas:
bel\aj\ar pemrogr\am\an web \itu menyen\angk\an
E. addslashes()
Function addslashes() digunakan untuk mengembalikan
sebuah string dengan tanda backslash atau garis miring (/) sebelum
karakter single quote (‘), double quote (“), dan backslash (/).
Sintaks dasar fungsi addslashes():
addslashes($string)
Contoh:
<?php
$nama = "Ma'ruf";
echo addslashes($nama);
?>
Output dari program diatas:
Ma\’ruf
76
F. trim()
Function trim() digunakan untuk menghilangkan spasi di
bagian kiri dan kanan teks.
Sintaks dasar function trim():
trim($string)
Contoh:
<?php
$data = " Indonesia ";
echo strlen($data);
echo "<br>";
$data = trim($data);
echo $data;
echo "<br>";
echo strlen($data);
?>
Output dari program diatas:
11
Indonesia
9
G. rtrim()
Function rtrim() digunakan untuk menghilangkan spasi dari kanan.
Sintaks dasar function rtrim():
rtrim($string)
77
Contoh:
<?php
$data = " Indonesia ";
echo strlen($data);
echo "<br>";
$data = rtrim($data);
echo $data;
echo "<br>";
echo strlen($data);
?>
Output dari program diatas:
11
Indonesia
9
H. ltrim()
Function ltrim() digunakan untuk menghilangkan spasi dari kiri.
Sintaks dasar function ltrim():
ltrim($string)
Contoh:
<?php
$data = " Indonesia ";
echo strlen($data);
echo "<br>";
$data = ltrim($data);
echo $data;
echo "<br>";
78
echo strlen($data);
?>
Output dari program diatas:
11
Indonesia
9
I. explode()
Function explode() digunakan untuk mengekstrak atau split
sebuah string menjadi array.
Sintaks dasar function explode():
explode($delimiter, $string)
Keterangan sintaks:
$delimiter merupakan pembatas/pemisah
Contoh:
<?php
$hari="senin-selasa-rabu-kamis-jumat-
sabtu-minggu";
$hari=explode("-",$hari);
echo $hari[0];
echo "<br>";
echo $hari[1];
echo "<br>";
echo $hari[2];
echo "<br>";
echo $hari[3];
echo "<br>";
79
echo $hari[4];
echo "<br>";
echo $hari[5];
echo "<br>";
echo $hari[6];
echo "<br>";
?>
Output dari program diatas:
senin
selasa
rabu
kamis
jumat
sabtu
minggu
J. implode()
Function implode() merupakan kebalikan dari fungsi
explode, yaitu digunakan untuk menggabungkan elemen-elemen
array menjadi string dengan karakter penggabung.
Sintaks dasar function implode():
implode($delimiter, $string)
Keterangan sintaks:
$delimiter merupakan pembatas/pemisah
80
Contoh:
<?php
$hari=array("senin","selasa","rabu","kamis","jumat"
,"sabtu","minggu");
echo implode("-",$hari);
?>
Output dari program diatas:
senin-selasa-rabu-kamis-jumat-sabtu-minggu
K. substr()
function substr() digunakan untuk memotong string/
mengambil string berdasarkan kriteria tertentu.
Sintaks dasar fungsi substr():
implode($string,$mulai,$panjang)
Keterangan sintaks:
$mulai merupakan posisi awal string yang akan diambil
$panjang merupakan banyaknya karakter string yang
akan diambil
81
Contoh:
<?php
$kalimat="Desember";
echo substr($kalimat,1,4);
?>
Output dari program diatas:
Esem
Keterangan :
Karakter pertama merupakan urutan ke 0 sehingga:
Desember
Urutan ke - 1 : karakter D
Urutan ke - 2 : karakter e
Urutan ke - 3 : karakter s
Urutan ke - 4 : karakter e
Urutan ke - 5 : karakter m
Urutan ke - 6 : karakter b
Urutan ke - 7 : karakter e
Urutan ke - 8 : karakter e
82
L. stripslashes()
Function stripslashes() digunakan untuk menghilangkan
slash atau garis miring (/) sebelum tanda kutip pada string.
Sintaks dasar fungction stripslashes():
stripslashes($string)
Contoh:
<?php
$hari = "Jum'\at";
echo stripslashes($hari);
?>
Output dari program diatas:
Jum'at
M. number_format()
Function number_format() digunakan untuk format angka
dalam bentuk ribuan.
Sintaks dasar fungsi number_format():
number_format($number, $decimals)
atau
number_format($number, $decimals = 0, $dec_point = ‘.’,
$thousands_sep = ‘,’)
83
Contoh:
<?php
$angka = 256000000;
echo number_format($angka, 2, ',', '.');
?>
Output dari program diatas:
256.000.000,00
N. chr()
Function chr() digunakan untuk mengembalikan karakter
yang spesifik berdasarkan kode ASCII.
Sintaks dasar function chr():
chr($ascii)
Contoh:
<?php
echo chr(75);
?>
Output dari program diatas:
K
84
O. ord()
Function ord() digunakan untuk mengembalikan nilai ASCII suatu
karakter.
Sintaks dasar function ord():
ord($string)
Contoh:
<?php
echo ord('K');
?>
Output dari program diatas:
K
P. md5()
Function md5() digunakan untuk mengenkripsi suatu string
dengan enkripsi md5. Biasanya digunakan untuk mengenkripsi
password.
Sintaks dasar function md5():
md5($string)
85
Contoh:
<?php
$password = '123456789';
echo md5($password);
?>
Output dari program diatas:
25f9e794323b453885f5181f1b624d0b
Q. nl2br()
Function nl2br() digunakan untuk menyisipkan HTML <br
/> pada setiap baris baru dalam string.
Sintaks dasar function nl2br():
nl2br($string)
Contoh:
<?php
$str = "Fakultas: Sains dan Teknologi \n
Jurusan: Matematika";
echo nl2br($str);
?>
Output dari program diatas:
Fakultas: Sains dan Teknologi
Jurusan: Matematika
86
R. strtolower()
Function strtolower() digunakan untuk mengkonversi string
dengan format huruf kecil.
Sintaks dasar fungsi strtolower():
strtolower($string)
Contoh:
<?php
$bulan = "DEseMber";
echo strtolower($bulan);
?>
Output dari program diatas:
Desember
S. strtoupper()
Fungsi strtoupper() digunakan untuk mengkonversi string
dengan format huruf kecil menjadi huruf besar atau kapital.
Sintaks dasar function strtoupper():
strtoupper($string)
Contoh:
<?php
87
$bulan= "DEseMber";
echo strtoupper($bulan);
?>
Output dari program diatas:
DESEMBER
T. ucfirst()
Functioni ucfirst() digunakan untuk mengkonversi karakter
pertama pada string dengan format huruf kapital .
Sintaks dasar function ucfirst():
ucfirst($string)
Contoh:
<?php
$bulan= "desember";
echo ucfirst($bulan);
?>
Output dari program diatas:
Desember
88
U. ucwords()
Function ucwords() digunakan untuk mengkonversi setiap
awal kata dalam string dengan format huruf kapital.
Sintaks dasar function ucwords():
Ucwords($string)
Contoh:
<?php
$kalimat= "Padamu negeri kami Berjanji";
echo ucwords($kalimat);
?>
Output dari program diatas:
Padamu Negeri Kami Berjanji
89
BAB V
DATABASE MYSQL
A. MySQL
MySQL yaitu sebuah perangkat lunak open source untuk
sistem manajemen basis data SQL (database management system)
atau DBMS yang multithread, multi-user. Berikut keunggulan yang
dimiliki oleh basis data MySQL:
Portabilitas.
MySQL dapat berjalan stabil pada berbagai sistem
operasi seperti Windows, Linux, FreeBSD, Mac Os X
Server, Solaris, Amiga, dan lain sebagainya.
Open Source
MySQL didistribusikan sebagai perangkat lunak
sumber terbuka, dibawah lisensi GPL sehingga dapat
digunakan secara gratis.
Multiuser
MySQL dapat digunakan oleh beberapa pengguna
dalam waktu yang bersamaan tanpa mengalami masalah
atau konflik.
90
Performance tuning
MySQL memiliki kecepatan yang menakjubkan
dalam menangani query sederhana, dengan kata lain dapat
memproses lebih banyak SQL per satuan waktu.
Ragam tipe data
MySQL memiliki ragam tipe data yang sangat kaya,
seperti signed / unsigned integer, float, double, char, text,
date, timestamp, dan lain-lain.
Perintah dan Fungsi
MySQL memiliki operator dan fungsi secara penuh
yang mendukung perintah Select dan Where dalam perintah
(query).
Security
MySQL memiliki beberapa lapisan keamanan
seperti level subnetmask, nama host, dan izin
akses user dengan sistem perizinan yang mendetail serta
sandi terenkripsi.
Skalabilitas dan Pembatasan
MySQL mampu menangani basis data dalam skala
besar, dengan jumlah rekaman (records) lebih dari 50 juta
dan 60 ribu tabel serta 5 milyar baris. Selain itu batas indeks
91
yang dapat ditampung mencapai 32 indeks pada tiap
tabelnya.
Konektivitas
MySQL dapat melakukan koneksi dengan klien
menggunakan protokol TCP/IP, Unix soket (UNIX),
atau Named Pipes (NT).
Lokalisasi
MySQL dapat mendeteksi pesan kesalahan pada
klien dengan menggunakan lebih dari dua puluh bahasa.
Meski pun demikian, bahasa Indonesia belum termasuk di
dalamnya.
Interface
MySQL interface terhadap berbagai aplikasi dan
bahasa pemrograman dengan menggunakan fungsi API
(Application Programming Interface).
Klien dan Peralatan
MySQL dilengkapi dengan berbagai tool yang dapat
digunakan untuk administrasi basis data, dan pada setiap
peralatan yang ada disertakan petunjuk online.
Struktur tabel
92
MySQL memiliki struktur tabel yang lebih fleksibel
dalam menangani ALTER TABLE, dibandingkan basis data
lainnya semacam PostgreSQL ataupun Oracle.
B. PHPMyAdmin
Contoh Membuat Program Login:
Membuat database dengan PHPMyAdmin
Berikut ini tabel yang akan digunakan untuk membuat
program login:
Field Type Length extra
id_admin Integer 11 Auto
increment
Nama Varchar 50
Username Varchar 50
Password Varchar 50
Koneksi dengan Database
Untuk membuat koneksi dengan database, maka
harus menyebutkan di dalam script yang dibuat informasi
mengenai host, username, password, dan database yang
ingin dikoneksikan.
<?php
$server = "localhost";
$username = "root";
$password = "";
93
$database = "data";
mysql_connect($server,$username,$password) or
die("Koneksi gagal");
mysql_select_db($database) or die("Database
tidak bisa dibuka");
?>
secara default konfigurasi untuk database di PHPMyAdmin
nya yaitu :
host : localhost
username : root
password : [kosong]
username dan password diisi sesuai username dan password
dalam database MySQL. Simpan kode diatas dengan nama
koneksi.PHP
Membuat Form Login
<html>
<head></head>
<body>
<table>
<form method="POST"
action="proses_login.PHP">
<tr>
<td>User Name</td>
<td><input type="text"
name="username"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password"
94
name="password"/></td>
</tr>
<tr>
<td></td>
<td><input type=submit
value="Login"></td>
</tr>
</form>
</table>
</body>
</html>
Simpan dengan nama file index.PHP
Proses Login
<?php
session_start();
include"koneksi.PHP";
$username = $_POST['username'];
$password = $_POST['password'];
if ( ($username != "") && ($password != "") )
{
$sql=mysql_query("SELECT * FROM admin
WHERE username='".$username."'
AND password='".$password."'");
$data=mysql_num_rows($sql);
if ($data>0){
session_register("username");
session_register("password");
$_SESSION['username'] =
$username;
$_SESSION['password'] =
$password;
header("location:home.PHP");
}else
{
echo "User Name atau Password tidak
ditemukan";
}
95
}
else
{
echo "input kosong";
}
?>
Simpan dengan nama file proses_login.PHP
Halaman utama (Home)
<?php
session_start();
if (($_SESSION[username]!='') AND
($_SESSION[password]!='')){
echo "SESSION USERNAME =
".$_SESSION[username];
echo"<br>";
echo "SESSION PASSWORD =
".$_SESSION[password];
echo"<br><a
href='proses_logout.PHP'>LOGOUT</a>";
}else{
echo "HALAMAN TIDAK BISA DIAKSES
KARENA BELUM LOGIN ";
}
?>
Simpan dengan nama file home.PHP
Proses Logout
<?php
96
session_start();
session_destroy();
header("location:index.PHP");
?>
Simpan dengan nama file proses_logout.PHP
Tampilan:
97
GLOSARIUM
ASCII : (American Standard Code for
Information Interchange) merupakan
suatu standar internasional dalam kode
huruf dan simbol seperti Hex dan
Unicode tetapi ASCII lebih bersifat
universal.
Array asosiatif : Jenis array yang menggunakan nama
sebagai pengganti index untuk menunjuk
data yg disimpan.
Array : Himpunan data sejenis yang disimpan
dalam suatu variabel dengan index untuk
mengakses setiap data yang tersimpan.
Boolean : Merupakan tipe untuk mewakili data
dengan format benar atau salah (True or
False).
Border : Batas yang menglilingi padding dan
content.
CSS : (Cascading Style Sheet) merupakan
standar yang digunakan untuk mengatur
tampilan suatu halaman HTML.
Domain : Pola penamaan host di Internet.
Embedded style sheet : CSS yang ditempatkan dalam tag.
Enkripsi : Proses mengamankan suatu informasi
dengan membuat informasi tersebut
98
tidak dapat dibaca tanpa bantuan
pengetahuan khusus.
File : kumpulan byte-byte yang disimpan
dalam media penyimpanan. Merupakan
komponen yang bertipe data sama, yang
jumlahnya tidak tentu, yang dapat
ditambah atau dikurangi jika dibutuhkan.
HTML : Hyper Text Markup Language, sebuah
bahasa markup yang digunakan untuk
membuat sebuah halaman web.
HTTP : Hyper Text Transfer Protocol, tata cara
komunikasi untuk mentransfer Web dari
server ke komputer lain.
Protocol : Protocol yaitu suatu paket system yang
mengatur komunikasi – komunikasi
antara satu computer ke computer lain
dalam suatu jaringan. Protocol sendiri
mempunyai karakteristik dari suatu
jaringan seperti : tipe cabling, kecepatan
transfer data
Proxy : suatu server yang menyediakan layanan
untuk meneruskan setiap permintaan
klien kepada server lain di internet
Server : Komputer yang memberikan layanan di
jaringan.
Tag HTML : Kata kunci (nama tag) yang dikelilingi
oleh kurung sudut seperti <html>
99
Web browser : Sebuah perangkat lunak aplikasi yang
memungkinkan pengguna mengakses
Web atau Server di jaringan.
WWW : World Wide Web sering disingkat Web.
.jpeg&description=PHP bersama Mysql. 2){kind=link}