Modul Pemrograman Web I - 3

Modul Pemrograman Web I | Rizqa Raaiqa Bintana – Universitas Jambi
BAB 1 HTML
1.1 TUJUAN
Pada bab ini mahasiswa diharapkan mampu memahami bagaimana memulai membuat
skrip HTML menggunakan beberapa aplikasi text editor dan bantuan aplikasi Browser seperti
Internet Explorer, Mozilla, Google Chrome dan lainnya untuk menjalankan outputnya.
1.2 DASAR HTML

HTML merupakan dasar atau tulang punggung dalam pembuatan sebuah Web. Dalam
setiap file HTML akan selalu didahului dengan tag <HTML>. Tag ini akan membuat web browser
untuk membaca file yang ada di dalam tag tersebut untuk ditampilkan dalam web browser. Pada
akhir baris jangan lupa Anda harus selalu mengakhiri tag <HTML> dengan </HTML>. Sehingga
akan kelihatan bahwa pada setiap tag HTML akan selalu :
<HTML>
...
</HTML>
Penulisan Tag HTML adalah incase sensitive, artinya <HTML> akan sama dengan <html> atau
<Html>. Untuk selanjutnya akan dibagi menjadi 2 seksi: head dan body.
1.3 HEAD
Header akan berfungsi sebagai tanda pengenal pada halaman yang akan Anda buat. Untuk
mendefinisikan header dalam tag HTML maka anda harus menambahkan <HEAD> dan
</HEAD> tag di bawah tag <HTML> dan akan menjadi seperti berikut :
<HTML>
<HEAD>
...
</HEAD>
</HTML>
1
1.4 BODY
Bagian body merupakan bagian dimana Anda dapat menuliskan berbagai text atau isian
web yang ingin Anda tampilkan pada halaman web. Untuk mendefinisikan body harus diketikan
tag <BODY> dan ditutup dengan tag </BODY> di bawah tag header, sehingga akan terlihat :
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
1.5 LATIHAN 1. JUDUL HALAMAN WEB

Untuk menamai atau memberikan judul pada halaman web yang akan Anda buat maka
digunakan tag <TITLE> dan </TITLE>. Judul ini akan terlihat pada sudut kiri atas pada halaman
web. Tag <TITLE> akan berada di dalam tag <HEAD>. Kini saatnya Anda membuat halaman
web Anda yang pertama. Bukalah Text Editor (Sublime Text, Notepad++) dan ketikkan kode html
di bawah ini, kemudian simpanlah di C:\My Documents atau di drive manapun yang Anda
inginkan. Namun, jika Anda telah menginstal XAMPP, disarankan untuk menyimpan kode html
tersebut di C:\xampp\htdocs. Ingat! Nama filenya adalah hello.html, bukanlah hello.html.txt
atau hello.txt. Disini Anda boleh membuat folder khusus untuk menyimpan file Anda agar rapi,
misalkan Anda membuat folder baru dengan nama BelajarHTML di drive C:\xampp\htdocs.
Sehingga penyimpanan file hello.html akan disimpan di C:\xampp\htdocs\BelajarHTML.
<HTML>
<HEAD>
<TITLE>Selamat Datang di HomePage Saya</TITLE>
</HEAD>
<BODY>
Halo semua, bagaimana kabar Anda ?
Ini halaman pertama saya.
</BODY>
</HTML>
2
Gambar 1-1. Cara menyimpan file yang telah dibuat
Kemudian, aktifkan web server Anda yaitu Apache web server melalui jendela XAMPP Control
Panel.
Gambar 1-2. Mengaktifkan Apache web server
3
bukalah browser Anda dan ketikkan alamat localhost/BelajarHTML/ di browser Anda atau
127.0.0.1/BelajarHTML/. Klik file hello.html. Maka akan terlihat output seperti berikut :
Gambar 1-3. Cara membuka file html yang telah dibuat melalui localhost
Gambar 1-4. Output file html yang telah dibuat
4
BAB 2
TEXT PADA WEB
2.1 TUJUAN
Mahasiswa mampu memahami tata cara pembuatan tulisan pada Web, yang nantinya akan
ditampilkan di Browser. Text yang dipelajari dapat membuat mahasiswa belajar dalam mengatur
format penulisan yang akan ditampilkan di halaman website.
2.2 HEADING
Merupakan sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen
HTML. HTML menyediakan enam tingkat heading.
<HTML>
<HEAD>
<TITLE>Heading</TITLE>
</HEAD>
<BODY>
<H1>Heading level 1</H1>
</BODY>
</HTML>
Berikut adalah output yang dihasilkan :
5
Gambar 2-1. Output file heading.html yang telah dibuat
2.3 PEMBUATAN PARAGRAF

Untuk dapat membuat paragraph dalam HTML, Anda bisa menggunakan tag <P> dan
diakhiri dengan </P>. Anda bisa mengatur paragraph yang Anda buat dengan menggunakan
atribut ALIGN dengan diikuti posisi yang Anda inginkan, LEFT untuk rata kiri, CENTER untuk
rata tengah, dan RIGHT untuk rata kanan.
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN="right">Dalam perancangan suatu antarmuka terdapat akses-
akses penting yang harus diperhatikan. Aspek-aspek tersebut akan sangat
menunjang dalam hasil dari perancangan perangkat lunak tersebut. Aspek
yang harus diperhatikan tidak hanya dipandang dari satu sisi programnya
saja, tetapi juga dari aspek manusianya yang merupakan pengguna dari
perangkat lunak </P>
<P ALIGN="center">Dalam perancangan suatu antarmuka terdapat akses-
<P ALIGN="left">Dalam perancangan suatu antarmuka terdapat akses-
</BODY>
</HTML>
6
Berikut adalah output yang dihasilkan :
Gambar 2-2. Output file paragraf.html yang telah dibuat
2.4 BLOCKQUOTE
Tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan menggunakan tag
ini maka Anda akan mendapati browser menampilkan teks yang menjorok ke dalam
(mengidentifikasi teks). Diawali dengan <blockquote> dan diakhiri dengan </blockquote>.
Contoh :
<HTML>
<HEAD>
<TITLE>Blockquote</TITLE>
</HEAD>
<BODY>
<H2>Aspek dalam Interface</H2><BLOCKQUOTE>Dalam perancangan
suatu antarmuka terdapat akses-akses penting yang harus diperhatikan.
Aspek-aspek tersebut akan sangat menunjang dalam hasil dari perancangan
perangkat lunak tersebut.</BLOCKQUOTE>
</BODY>
</HTML>
2.5 PREFORMATED TEXT

Digunakan untuk menampilkan teks sama seperti yang Anda ketikkan dalam dokumen
HTML. Browser akan menampilkan dalam font monospace (biasanya courier new). Diawali
dengan <pre> dan diakhiri dengan </pre>. Contohnya :
7
<HTML>
<HEAD>
<TITLE>performatted text</TITLE>
</HEAD>
<BODY>
<PRE>Dalam perancangan suatu antarmuka terdapat akses-akses
penting yang harus diperhatikan. Aspek-aspek tersebut akan sangat
menunjang dalam hasil dari perancangan perangkat lunak tersebut.</PRE>
</BODY>
</HTML>
2.6 BEGIN ROW

Digunakan untuk menulis teks pada baris berikutnya. Tag <BR> akan membuat baris baru
tanpa memberikan ruang kosong di bawahnya, berfungsi sebagai Enter dalam file HTML.
Contohnya :
<HTML>
<HEAD>
<TITLE>Begin Row</TITLE>
</HEAD>
<BODY>
<P>Dalam perancangan suatu antarmuka terdapat <BR> akses-akses
penting yang harus diperhatikan.<BR> Aspek-aspek tersebut akan sangat
menunjang <BR> dalam hasil dari perancangan perangkat lunak tersebut.</P>
</BODY>
</HTML>
2.7 UKURAN FONT
Untuk mengatur huruf pada HTML, Anda menggunakan tag <FONT SIZE>. Tag ini
memiliki atribut untuk mengatur ukuran huruf. Diawali dengan <font size=”5”> dan diakhiri
dengan </font>. Contohnya :
<HTML>
<HEAD>
<TITLE>Font Size</TITLE>
</HEAD>
<BODY>
<FONT SIZE="1">ukuran font 1</FONT>
</BODY>
</HTML>
8
2.8 JENIS FONT

Untuk mengatur jenis huruf yang digunakan, Anda bisa menggunakan atribut FACE yang
harus diisi dengan string jenis font seperti arial, verdana, Tahoma dan lainnya. Diawali dengan
<font face=”verdana”> dan diakhiri dengan </font>. Contoh :
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE="4">
<P><FONT FACE="ARIAL"> Arsenal, contoh font arial </FONT></P>
<P><FONT FACE="VERDANA"> Arsenal, contoh font verdana </FONT></P>
<P><FONT FACE="TAHOMA"> Arsenal, contoh font tahoma </FONT></P>
</FONT>
</BODY>
</HTML>
2.9 WARNA FONT

Atribut COLOR bisa digunakan untuk mengatur warna font. Ada 2 cara untuk memberi
warna pada atribut color. Cara yang pertama dengan menuliskan nama warna yang ingin
digunakan seperti: red, blue, yellow, dan lainnya. Cara yang kedua dengan menggunakan nilai
RGB. Diawali dengan <font color=”red”> dan diakhiri dengan </font>. Contohnya :
<HTML>
<HEAD>
<TITLE>Warna Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE="4">
<P><FONT COLOR="BLUE"> Manchester United, Juara piala FA</FONT></P>
<P><FONT COLOR="#FF0000"> Manchester United, The Best</FONT></P>
<P><FONT COLOR="#00FF00"> Manchester United, Top Banget</FONT></P>
</FONT>
</BODY>
</HTML>
2.10 LINK
Perintah anchor <A> digunakan untuk membuat link. Dan digunakan tag <A HREF =
“alamat_dokumen”> teks pada browser </A>. Untuk membuat link dalam sebuah dokumen
9
HTML perlu disiapkan nama anchor lokasi tujuan link tersebut. Nama anchor dibuat dengan
menambahkan atribut NAME pada tag <A>. Contohnya :
<!—contoh.html -->
<HTML>
<HEAD>
<TITLE>Link</TITLE>
<HEAD>
<BODY>
Ada beberapa jenis bentuk Heading.
<BR> <A HREF = “heading.html”>Info selengkapnya</A>
</BODY>
</HTML>
Karena file heading.html berada di folder yang sama dengan file contoh.html ini, maka alamat
dokumen cukup ditulis heading.html. Namun jika file heading.html berada di folder atau di drive
yang berbeda, Anda harus menuliskan alamat lengkap (lokasi drive) dimana file heading.html
tersebut disimpan.
10
BAB 3
HTML TINGKAT LANJUT
3.1 TUJUAN
Pada bahasan ini akan dilanjutkan bagaimana menggunakan gambar dalam halaman web.
Tabel merupakan salah satu yang akan digunakan dalam pembuatan web. Dan dalam pembuatan
tabel nanti Anda akan mempelajari bagian yang penting dalam pembuatan web yang dinamis
yaitu tabel dan form.
3.2 ORDERED LIST

Digunakan untuk membuat daftar, dimana tiap bagian memiliki nomor secara berurut. Tag
ini menggunakan tag <OL> dan diakhiri dengan </OL>. Sedangkan untuk tiap bagiannya
digunakan tag <LI>. Ketika menggunakan OL ini maka penomoran dimulai 1,2,3,… dst, namun
hal ini dapat diubah dengan menggunakan atribut TYPE pada tag <OL>
TYPE=1; daftar berurut dengan 1, 2, 3
TYPE=I; daftar berurut dengan I, II, III
TYPE=a; daftar berurut dengan a, b, c
Contoh :
<HTML>
<HEAD>
<TITLE>Ordered List</TITLE>
</HEAD>
<BODY>
Urutan mobil berdasar peminat :
<OL type="a">
<LI>Mercedes Benz</LI>
<LI>BMW</LI>
<LI>Honda</LI>
<LI>Hyundai</LI>
</OL>
</BODY>
</HTML>
11
3.3 UNORDERED LIST

Dalam unordered list, tidak dijumpai urutan dalam suatu daftar. Setiap bagian dari
unordered list ditandai dengan bullet yang merupakan default dari unordered list. Untuk
membuat tag ini digunakan tag <UL> dan diakhiri dengan </UL> dan tiap bagiannya digunakan
<LI>. Juga bisa digunakan tanda cakram/disk, lingkaran, dan lainnya.
Contoh :
<HTML>
<HEAD>
<TITLE>Ordered List</TITLE>
</HEAD>
<BODY>
Urutan mobil berdasar peminat :
<UL style="list-style-type:square;>
<LI>Mercedes Benz</LI>
<LI>BMW</LI>
<LI>Honda</LI>
<LI>Hyundai</LI>
</UL>
</BODY>
</HTML>
3.4 GAMBAR DALAM HALAMAN WEB

Dalam HTML digunakan tag <IMG> untuk menampilkan gambar dalam halaman web.
Format gambar yang paling sering digunakan dalam halaman web yaitu GIF dan JPEG, dengan
format penulisan : <IMG SRC=”file_gambar” ALT=”nama_alternatif”>. Atribut SRC digunakan
untuk menentukan sumber gambar. Sedangkan ALT digunakan sebagai teks pengganti gambar.
Ada beberapa atribut dalam tag <IMG> yaitu :
 BORDER: memberikan suatu batas atau border pada gambar, defaultnya=0
 HEIGHT,WEIGHT: menentukan tinggi dan lebar gambar dalam pixel
 HSPACE, VSPACE: menentukan jarak spasi horizontal dan spasi vertical antara gambar
dengan obyek sekitarnya
 ALIGN: mengatur perataan gambar terhadap obyek disekelilingnya
3.5 TABLE
Tabel dapat Anda gunakan karena dapat menampilkan informasi dalam bentuk yang
ringkas dan mudah dibaca. Tag awal yang digunakan adalah <TABLE> dan tag penutupnya
</TABLE>.
Tag <TABLE> mewakili beberapa bagian penting :
12
 <CAPTION> …</CAPTION> digunakan untuk membentuk judul table. Judul table akan
terletak di luar table di bagian atas atau di bagian bawah
 <TH>…</TH> digunakan untuk meletakkan judul table di bagian paling atas atau bagian
paling kiri dari table
 <TD> …</TD> digunakan sebagai tempat menulis data atau informasi dalam table
Contoh :
<html>
<head>
<title>Tabel</title>
</head>
<body>
<table border=”1”>
<caption>Seputar Liga Italia</caption>
<tr>
<th>Nama Club</th>
<th>Berita</th>
</tr>
<tr>
<td>AC Milan</td>
<td>Milan mengalahkan Intermilan di semifinal liga
champion</td>
</tr>
<tr>
<td>Juventus</td>
<td>Juventus juara liga italia musim 2002/2003</td>
</tr>
<tr>
<td>Roma</td>
<td>Roma akan berhadapan dengan Milan di final</td>
</tr>
</table>
</body>
</html>
3.6 TABLE ALIGN DAN WIDTH

Dalam perataan horizontal menggunakan atribut ALIGN, dimana bisa bernilai left untuk
perataan kiri, right untuk perataan kanan. Untuk perataan vertical Anda dapat menggunakan
VALIGN, bernilai TOP untuk perataan atas, bernilai MIDDLE untuk perataan tengah dan
BOTTOM untuk perataan bawah. Sedangkan untuk WIDTH digunakan untuk mengatur lebar
table biasanya dinyatakan dalam (%) atau dinyatakan dengan pixel yang berarti ukuran
sesungguhnya.
13
Contoh :
<html>
<head>
<title>Tabel dengan width & align</title>
</head>
<body>
<table border=”1” width=”88%” height=”200”>
<tr>
<td width=”30%” height=200” valign=”top”>AC Milan</td>
<td width=”70%” height=”200” valign=”middle”>Milan
mengalahkan Intermilan di semifinal liga champion</td>
</tr>
</table>
</body>
</html>
3.7 TABLE CELLSPACING DAN CELLPADDING

Atribut CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara
dua buah cell. CELLPADDING digunakan untuk mengatur jumlah spasi yang terdapat antar
batas/border dengan isi atau teks di dalam cell tersebut.
Contohnya dapat dilihat pada script berikut :
<html>
<head>
<title>cellspacing dan cellpadding</title>
</head>
<body>
<table width="85%" border="3" cellspacing="9" cellpadding="5">
<tr>
<td width="43%">baris 1, kolom 1</td>
</tr>
<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>
3.8 TABLE COLSPAN DAN ROWSPAN

Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi 1 kolom.
ROWSPAN digunakan untuk menghubungkan beberapa baris menjadi satu.
14
Contoh :
<html>
<head>
<title>colspan dan rowspan</title>
</head>
<body>
<table width="85%" border="3" cellspacing="5" cellpadding="5">
<tr>
<td width="43%" rowspan="2">baris 1, kolom 1 <p>baris 2,
kolom 1</td>
</tr>
<tr>
</tr>
<tr>
<td width="100%" colspan="2">baris 3, kolom 1 & kolom
2</td>
</tr>
</table>
</body>
</html>
3.9 TABLE COLOR

Selain warna pada background, border juga bisa ditentukan warnanya. Untuk background
digunakan atribut BGCOLOR dan untuk memberi warna pada border digunakan atribut
BORDER COLOR. Contoh :
<html>
<body>
<table width="100%" border="3" cellpadding="5" cellspacing="5"
bordercolor="#FF0000">
<tr>
<td width="50%" bgcolor="#808080"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%" bgcolor="#008080"> </td>
</tr>
</table>
<br> <br> <br>
<table width="100%" border="3" cellpadding="5" cellspacing="5"
bordercolorlight="008080" bordercolordark="800080">
<tr>
<td width="100%"> </td>
</tr>
</table>
</body>
</html>
15
3.10 FORM
Tag <FORM> dan <INPUT> digunakan bersama-sama untuk meminta masukan dari user
untuk dikirim ke server. Tag <FORM> membuat kerangka dan tag <INPUT> menyediakan
elemen antarmuka dengan user. Untuk standar penulisan form adalah sebagai berikut :
<FORM METHOD = “POST/GET” ACTION = “URL”>

...
...
...
</FORM>
Atribut METHOD memiliki 2 nilai POST dan GET. Metode GET mengirimkan data pada server
dengan cara meletakkan data pada bagian akhir URL yang ditunjuk. Metode POST mengirimkan
datanya secara terpisah. Jika masukan banyak maka disarankan Anda menggunakan POST.
ACTION akan berisi URL dari program yang dipanggil form tersebut, biasanya URL sebuah
halaman program yang nantinya akan mengolah data dari inputan form. Ketika Anda membuat
tampilan form, selalu mulai dengan tag <FORM> dan akhiri form Anda dengan tag </FORM>.
3.11 INPUT TEKS

Textbox adalah salah satu jenis kontrol untuk memasukkan data. HTML menyediakan tag
<INPUT> dengan atribut TYPE=”text” untuk membuat kotak input, misalkan dengan
menggunakan <input type=”text”>. Untuk atribut VALUE digunakan untuk memberi nilai input,
dan SIZE digunakan utuk menentukan batas terpanjang dari sebuah masukan.
16
Contoh :
<html>
<head>
<title>form input dengan textbox</title>
</head>
<body>
<p>Rancangan awal BUKU TAMU</p>
<form method="" action="">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="11%">Nama</td>
<td width="3%">:</td>
<td width="86"><input type="text" name="nama"
size="20"></td>
</tr>
<tr>
<td width="11%" height="22">Alamat</td>
<td width="86"><input type="text" value="jember"
name="alamat" size="20"></td>
</tr>
<tr>
<td width="11%">Sekolah</td>
<td width="86"><input type="text" name="sekolah"
size="20"></td>
</tr>
</table>
</form>
</body>
</html>
3.12 INPUT CHECKBOX

Anda juga bisa memberikan atribut TYPE dengan menggunakan Checkbox yang berfungsi
untuk memberikan user pilihan, misalkan dengan menggunakan <input type=”checkbox”>.
17
Contohnya :
<html>
<head>
<title>Check Box</title>
</head>
<body>
<p>Berikan polling !</p>
<p>Daftar mobil</p>
<p>
<input type="checkbox" name="c1" checked>mercedes<br>
<input type="checkbox" name="c2" checked>bmw<br>
<input type="checkbox" name="c3" checked>honda<br>
<input type="checkbox" name="c4" checked>Toyota
</p>
</body>
</html>
3.13 INPUT RADIO BUTTON

Jika atribut TYPE=”checkbox” diganti dengan TYPE=”radio”, maka user harus memilih
salah satu pilihan yang tersedia. User tidak bisa memilih lebih dari satu pilihan. Atribut
CHECKED digunakan memberi tanda bahwa pilihan tersebut sedang diaktifkan. Misalkan
dengan menggunakan <input type=”radio”>.
Contoh :
<html>
<head>
<title>Radio Button</title>
</head>
<body>
<p>berikan piihan Anda</p>
<p>Rentang Usia</p>
<p>
<input type="radio" value="v1" checked name="R1">15 tahun<br>
<input type="radio" value="v2" checked name="R1">15-19 thn<br>
</p>
</body>
</html>
18
BAB 4
CSS (CASCADING STYLE SHEETS)
4.1 TUJUAN
Mahasiswa dapat memahami konsep CSS dan cara membuat tampilan halaman web
dengan menggunakan larik CSS (Cascading Style Sheets).
4.2 CARA MENYISIPKAN CSS

Ada tiga cara menyisipkan style sheet ke dalam dokumen web, yaitu :
1) Inline CSS. Inline style dapat digunakan untuk menerapkan style unik untuk satu elemen.
Untuk menggunakan inline style, tambahkan atribut “style” ke elemen yang bersangkutan.
Atribut style dapat berisi properti CSS apa pun. Inline style didefinisikan dalam atribut
“style” pada elemen yang bersangkutan.
2) Internal CSS. Internal style sheet didefinisikan di dalam elemen <style>, di dalam bagian
head pada dokumen HTML dan hanya diterapkan untuk satu halaman HTML itu saja.
3) External CSS. Dengan external style sheet, mengubah tampilan seluruh situs web hanya
dengan mengubah satu file dokumen CSS saja. Dokumen CSS disimpan dengan ekstensi
.css dan tidak berisi tag HTML. Setiap halaman HTML harus menyertakan referensi ke file
external style sheet di dalam elemen <link>, di dalam bagian head pada dokumen HTML.
Jika terdapat lebih dari satu style yang digunakan untuk sebuah halaman HTML, maka prioritas
tertinggi adalah :
1. Inline style (di dalam elemen HTML)
2. External dan internal style sheet (dalam bagian head)
3. Browser default
Maka, inline style mempunyai prioritas tertinggi dan mengesampingkan external dan internal
style serta browser default.
19
4.3 CSS COMMENTS

Comment yang digunakan dalam CSS menggunakan :
/*This is a comment*/
p {
text-align: center;
color: black;
font-family: arial;
}
Contoh :
<html>
<head>
<style type="text/css">
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
Jadi penggunaan CSS ini dilakukan untuk mempercantik tampilan halaman web, sesuai dengan
apa yang kita inginkan.
4.4 STYLE CSS BACKGROUND

Terdapat beberapa bagian CSS yang dapat digunakan untuk mempercantik tampilan background.
1. Warna Background
Menggunakan tag body {background-color: #b0c4de;}. Untuk spesifikasinya dapat
dijelaskan berikut ini :
 Nama = sebuah warna nama, seperti: “red”
 RGB = digunakan sebagai nilai warna, seperti: “rgb(255,0,0)”
 Hex = sebuah nilai Hex, seperti: “#ff0000”
Contoh :
h1 {background-color: #6495ed;}
p {background-color: #e0ffff;}
div {background-color: #b0c4de;}
20
2. Gambar Background
Pada bagian gambar background yang menjadi tampilan background berupa gambar.
Contohnya dapat dilihat berikut ini :
body {background-image: url('paper.gif');}
Jika gambarnya vertikal dapat dilihat sebagai berikut :
body {
background-image: url('gradient2.png');
}
Jika gambarnya horizontal dapat ditambah (repeat-x) setelah tag sesudahnya, bisa dilihat
sebagai berikut :
body {
background-image: url('gradient2.png');
background-repeat: repeat-x;
}
3. Posisi Background
Untuk meletakkan dimana posisi background kita berada, dapat ditambahkan tag sebagai
berikut :
body {
background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: right top;
}
4.5 STYLE CSS TEXT

CSS juga dapat digunakan untuk membuat warna pada text dan mengatur semua format
text dalam satu sintaks CSS. Untuk spesifikasinya dapat dijelaskan berikut ini :
 Nama = sebuah warna nama, seperti: “red”
 RGB = digunakan sebagai nilai warna, seperti: “rgb(255,0,0)”
 Hex = sebuah nilai Hex, seperti; “#ff0000”
Contoh :
body {color: blue;}

h1 {color: #00ff00;}
h2 {color: rgb(255,0,0);}
21
1. Text Alignment
Text Alignment ini digunakan untuk mengatur letak posisi text, apakah letaknya di Margin
Kiri, Kanan, atau Tengah.
Contoh :
h1 {text-align: center;}
p.date {text-align: right;}
p.main {text-align: justify;}
2. Text Decoration
Text Decoration digunakan untuk menghapus underlines yang ada di link halaman Web.
Contoh : a {text-decoration: none;} atau menggunakan :
h1 {text-decoration: overline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: underline;}
h4 {text-decoration: blink;}
4.6 STYLE CSS FONT

CSS juga dapat digunakan untuk mengatur semua format font dalam sintaks CSS.
1. Font Family
Menggunakan model font apa yang disukai untuk menyamakan semua font yang ada di
halaman web. (p {font-family: “Times New Roman”, Times, serif;}).
Contoh :
<html>
<head>
<style type = “text/css”>
p.serif {font-family: “Times New Roman”, Times, serif;}
p.sansserif {font-family: Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class = “serif”>This is a paragraph, shown in the Times New
Roman font.</p>
<p class = “sanserif”>This is a paragraph, shown in the Arial
font.</p>
</body>
</html>
22
2. Font Style
Font style dapat digunakan untuk membuat tiga nilai yaitu text normal, text italic, dan text
oblique.
Contoh :
p.normal {font-style: normal;}

p.italic {font-style: italic;}
p.oblique {font-style: oblique;}
3. Font Size
Font size dapat digunakan untuk mengatur ukuran yang ada pada text.
Contoh :
h1 {font-size: 40px;}
h2 {font-size: 30px;}
p {font-size: 14px;}
4.7 STYLING CSS LINKS

Tampilan Links dapat digunakan dengan sejumlah CSS property (seperti: color, font-
family, background, dan lainnya).
Terdapat empat links statement :
 a:link = keadaan normal, link yang tidak dikunjungi
 a:visited = keadaan link saat dikunjungi
 a:hover = keadaan link ketika pengguna memindahkan mouse-nya
 a:active = keadaan dimana link tersebut telah di klik
Contoh :
a:link {color: #FF0000;}

a:visited {color: #00FF00;}
a:hover {color: #FF00FF;}
a:active {color: #0000FF;}
4.8 STYLING CSS LIST

Dalam Style CSS List dapat digunakan untuk membuat sebuah list dengan gaya yang
berbeda. Style List ini terdapat dua cara, dengan menggunakan style yang sudah ada di CSS atau
menggunakan gambar (image).
23
Untuk style CSS list yang tidak menggunakan gambar :
ul.a {list-style-type: circle;}

ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}
Untuk style CSS list yang menggunakan gambar :
ul {list-style-image: url(‘namafile’);}
Contoh :
<html>
<head>
<style type = “text/css”>
ul {
list-style-image: url(‘sqpurple.gif’);
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
4.9 STYLING CSS TABLE

Style CSS Table dapat digunakan untuk membuat tabel dalam beberapa tampilan.
a. Table Borders
table, th, td {
border: 1px solid black;
}
b. Collapse Borders
Digunakan untuk menggabungkan dua buah tabel jadi satu tabel. Contoh :
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
24
c. Table Width and Height

Digunakan untuk mengatur Lebar dan Tingginya tabel yang akan dibuat. Contoh :
table {
width: 100%;
}
th {
height: 50px;
}
d. Table Text Alignment

Digunakan untuk mengatur letak posisi text, apakah letaknya di Margin Kiri, Kanan,
Tengah, Atas, Bawah.
td {
text-align: right;
}
atau,
td {
height: 50px;
vertical-align: bottom;
}
e. Table Color
Digunakan untuk memberikan warna pada tabel yang akan dibuat. Contoh :
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
4.10 PENYISIPAN CSS KE DALAM DOKUMEN HTML

1. Inline CSS
Cara ini digunakan untuk menerapkan style untuk satu elemen. Untuk menggunakan inline
style, tambahkan atribut “style” ke elemen yang bersangkutan. Atribut style dapat berisi properti
CSS apa pun. Inline style didefinisikan dalam atribut “style” pada elemen yang bersangkutan.
Gambar 4-1 adalah contoh penggunaan CSS dalam dokumen HTML dengan cara Inline CSS
seperti yang disorot dalam kotak merah.
25
Gambar 4-1. Contoh Inline CSS
2. Internal CSS
Internal style sheet didefinisikan di dalam elemen <style>, di dalam bagian head pada
dokumen HTML dan hanya diterapkan untuk satu halaman HTML itu saja. Contoh pada subbab
4.3 merupakan kategori Internal CSS. Contoh lainnya seperti pada Gambar 4-2, script ini
rekonstruksi dari script pada Gambar 4-1 dan mencoba untuk menggunakan penamaan class =
“head” sehingga elemen apapun yang diberi nama class “head” akan merujuk kepada style yang
telah didefenisikan dalam elemen <style> bagian head dari HTML. Cara pendefinisian nama
class seperti di elemen <style>, dapat Anda pelajari di sub topik CSS Selector.
Gambar 4-2. Contoh Internal CSS
26
3. External CSS
Cara ini digunakan untuk mengubah tampilan seluruh situs web (yang terdiri dari beberapa
halaman HTML) hanya dengan mengubah satu file dokumen CSS saja. CSS dituliskan dalam
sebuah text editor dan disimpan dengan ekstensi .css, serta tidak berisi tag HTML. Setiap
halaman HTML harus menyertakan referensi ke file external style sheet di dalam elemen <link>,
di dalam bagian head pada dokumen HTML. Gambar 4-3 merupakan contoh penggunaan teknik
External CSS dalam dokumen HTML beserta dokumen CSS-nya seperti pada Gambar 4-4.
Contoh tersebut juga rekonstruksi dari script pada Gambar 4-1.
Gambar 4-3. Contoh External CSS
Gambar 4-4. Contoh Dokumen External CSS
Untuk pendalaman terkait CSS, Anda dapat memanfaatkan referensi lainnya untuk melihat
lebih banyak lagi contoh script CSS lainnya.
27
BAB 5
PHP: HYPERTEXT PREPROCESSOR
5.1 TUJUAN
Mahasiswa mampu memahami inisialisasi awal pemrograman PHP.
5.2 PENGANTAR PHP

PHP adalah bahasa script server (server-side) yang artinya script PHP dieksekusi di sisi
server dan HTML yang dihasilkan dikirim kembali ke browser (client). PHP adalah tool yang
powerful untuk membuat halaman Web yang dinamis dan interaktif. PHP banyak digunakan,
open source, free, dan efisien untuk pesaing seperti ASP Microsoft. PHP 7 adalah versi PHP
terbaru.
File PHP dapat berisi teks, HTML, CSS, JavaScript, dan kode PHP. Kode PHP dijalankan di
sisi server, dan hasilnya dikembalikan ke browser sebagai HTML. File PHP disimpan dengan
ekstensi “.php”.
Yang dapat dilakukan oleh PHP, yaitu :
 PHP dapat menghasilkan konten halaman web yang dinamis
 PHP dapat membuat, membuka, membaca, menulis, menghapus, dan menutup file di server
 PHP dapat mengumpulkan data form
 PHP dapat mengirim dan menerima cookies
 PHP dapat menambah, menghapus, mengubah data di dalam database
 PHP dapat digunakan untuk mengontrol akses pengguna (user-access)
 PHP dapat mengenkripsi data
PHP tidak membatasi output HTML, sehingga output HTML bisa berupa gambar, file PDF,
dan bahkan Flash movies, serta mengeluarkan teks apa pun, seperti XHTML dan XML. PHP
dapat berjalan di berbagai platform seperti Windows, Linux, Unix, dan Mac OS X. PHP juga
compatible dengan hampir sebagian besar server yang digunakan saat ini seperti Apache danIIS.
5.3 SINTAKS DASAR PHP

Script PHP dimulai dengan <?php dan diakhiri dengan ?>. sebuah file PHP biasanya berisi
script HTML dan script PHP. Berikut contoh dokumen hello.html yang berisi script PHP.
28
<html>
<head>
<title>Selamat Datang di HomePage Saya</title>
</head>
<body>
<h1>Halaman PHP pertama saya</h1>
<?php
echo “Halo semua, bagaimana kabar Anda? Ini halaman PHP pertama saya.”;
?>
</body>
</html>
5.4 KOMENTAR DI PHP

Komentar dalam kode PHP adalah baris yang tidak dieksekusi sebagai bagian dari program.
Tujuan satu-satunya adalah untuk dibaca oleh seseorang yang melihat kode tersebut atau sebagai
bagian dari dokumentasi dimana komentar dapat berisi penjelasan dari potongan kode PHP
tersebut.
Komentar dapat digunakan untuk :
 Mengizinkan orang lain memahami code yang Anda buat.
 Mengingatkan diri Anda tentang apa yang Anda kerjakan. Sebagian besar programmer
pernah mengalami kembali ke pekerjaan mereka satu atau dua tahun belakangan dan harus
memikirkan kembali apa yang telah mereka lakukan. Komentar dapat mengingatkan Anda
tentang apa yang Anda pikirkan saat menulis kode.
Beberapa cara berkomentar di PHP :

a) Single-line comments. Contoh :
<html>
<head>
</head>
<body>
<?php
// Ini adalah single-line comment
# Ini adalah single-line comment
echo “Halo semua, bagaimana kabar Anda? Ini halaman PHP pertama
saya.”;
?>
</body>
</html>
29
b) Multiple-line comments. Contoh :
<html>
<head>
</head>
<body>
<?php
/*
Ini adalah contoh
multiple-line comment
*/
echo “Halo semua, bagaimana kabar Anda? Ini halaman PHP pertama
saya.”;
?>
</body>
</html>
5.5 VARIABEL PHP

Dalam PHP, variabel diinisialisasi dengan symbol $ dan diikuti dengan nama variabel.
Ketentuan penamaan variabel :
 Harus dimulai dengan huruf atau karakter underscore ( _ ). Tidak dimulai dengan angka.
 Nama variabel hanya dapat mengandung alpha-numeric (A-z dan 0-9) dan karakter
underscore.
 Nama variabel bersifat case-sensitive ($nama berbeda dengan $Nama).
Contoh :
<?php
$text = "Contoh Variabel";
$a = 10;
$b = 6;
echo "<b>" . $text . "</b><br><br>";

echo "hasil dari $a + $b adalah ", $a+$b;
?>
Simpan file PHP tersebut di C:\xampp\htdocs\latihanPHP dengan nama “variabel.php”.

Elemen/tag HTML seperti <b>, </b>, dan <br> dapat disisipkan dalam file PHP.
30
BAB 6
KALIMAT BERSYARAT (CONDITIONAL STATEMENT)
6.1 TUJUAN
Mahasiswa mampu memahami konsep-konsep dasar dalam Pemrograman PHP dan dapat
membuat Program PHP.
6.2 PENGGUNAAN IF ... ELSE

Penggunaan if...else biasanya dilakukan ketika programmer akan membandingkan suatu
nilai dengan nilai lainnya, atau membandingkan suatu kondisi dengan kondisi lainnya. Sintaks
untuk menyatakan conditional statement dengan penggunaan if...else adalah sebagai berikut.
Cara 1 :
if (kondisi) {
code yang dieksekusi jika kondisi bernilai true;
} else {
code yang dieksekusi jika kondisi bernilai false;
}
Cara 2 :
if (kondisi 1) {
code yang dieksekusi jika kondisi 1 bernilai true;
} elseif (kondisi 2) {
code yang dieksekusi jika kondisi 2 bernilai true;
} else {
code yang dieksekusi jika kondisi bernilai false;
}
Contoh ifelse-1.php :
<?php
$x = 7;
if ($x % 2 == 0) {
echo "$x adalah bilangan genap";
} elseif ($x % 2 == 1) {
echo "$x adalah bilangan ganjil";
} else {
echo "$x bukan genap, bukan ganjil";
}
?>
31
Contoh ifelse-2.php :
<html>
<head>
<title>conditional statement</title>
</head>
<body>
<h1>Contoh Conditional Statement</h1>
<?php
$nilai = 76.5;
echo "Nilai Angka : " . $nilai . "<br>";

echo "Nilai Huruf : ";
if ($nilai >= 80) {
echo "A";
} elseif ($nilai >= 70 && $nilai < 80) {
echo "B";
echo "C";
echo "D";
} else {
echo "E";
}
?>
</body>
</html>
6.3 PENGGUNAAN SWITCH

Switch dan if...else mempunyai fungsi yang sama sebagai conditional statement. Namun
berbeda dalam bentuk sintaks penggunaannya. Berikut adalah sintaks untuk penggunaan switch.
switch (n) {
case label1:
code yang dieksekusi jika n=label1;
break;
case label2:
code yang dieksekusi jika n=label2;
break;
...
default:
code yang dieksekusi jika n berbeda dari label1 and label2;
}
32
Contoh switch-1.php :
<?php
$a = 5;
$b = 5;
switch (true) {
case ($a > $b):
echo "Nilai a > b <br/>";
echo "a = $a dan b = $b";
break;
case ($a == $b):

echo "Nilai a = b <br/>";
break;
default:
echo "Nilai a < b <br/>";
}
?>
Contoh switch-2.php :
<?php
$x = 7;
$hasil = $x % 2 ;
switch ($hasil) {
case 0:
echo "$x adalah bilangan genap";
break;
case 1:
echo "$x adalah bilangan ganjil";
break;
default:
echo "$x bukan bilangan genap, bukan bilangan ganjil";
}
?>
33
BAB 7
ARRAYS
7.1 TUJUAN
Mahasiswa mampu memahami konsep Array (larik) dan mampu membuat Program PHP
dengan menggunakan Array.
7.2 JENIS-JENIS ARRAY

Sebuah variabel hanya menyimpan satu nilai, sedangkan array dapat menyimpan banyak
nilai dalam satu variabel single. Array merupakan suatu kumpulan data variabel yang tersusun
secara index. Array dapat menampung variabel yang tipe datanya berbeda.
Ada tiga jenis array yang dikenal dalam PHP, yaitu numeric array, associative array, dan
multidimensional array. Numeric array merupakan sebuah array yang ID key-nya berupa
numeric (angka). Associative array adalah sebuah array dimana masing-masing ID key-nya dapat
diasosiasikan dengan sebuah nilai. Sedangkan multidimensional array merupakan sebuah array
yang dapat mengandung satu atau lebih array lagi.
7.3 NUMERIC ARRAYS (INDEXED ARRAYS)

Berikut beberapa contoh bentuk numeric array. Perhatikan contoh beserta penggunaan
perintah echo dan print_r.
34
Contoh numeric_array(1).php :
<?php
//contoh numeric array (1)
//create array
$mhs = array("sella", "didit", "yudi", "ari"); //array dimulai dari index
0
echo $mhs[0]."<br/>";
echo "<br/>";
echo "Panjang Array (jumlah elemen dalam array) = ".count($mhs);
echo "<br/><br/>";
//cara lain menampilkan nilai-nilai yang terdapat dalam array dengan

menggunakan perintah print_r
echo "Nilai-nilai yang ada di dalam Array (ditampilkan key beserta value
nya) : <br/>";
print_r($mhs);
?>
<?php
//create array
$mhs = array(1=>"sella", "didit", 7=>"yudi", "ari", "rima"); //array
dimulai dari index 1, lalu index 7
echo "<br/>";
echo "Panjang Array (jumlah elemen dalam array) = ".count($mhs);
echo "<br/><br/>";
//cara lain menampilkan nilai-nilai yang terdapat dalam array dengan

menggunakan perintah print_r
nya) : <br/>";
print_r($mhs);
?>
35
<?php
//create array
$mhs = array("sella", "didit", "yudi", "ari");
$length = count($mhs);
echo "<br>";
echo "Panjang Array (jumlah elemen dalam array) = $length";
echo "<br><br>";
echo "Nilai-nilai yang ada di dalam Array : <br>";

//cara lain menampilkan nilai-nilai dalam array dengan perulangan
for($x = 0; $x < $length; $x++) {
echo $mhs[$x];
echo "<br>";
}
?>
7.4 ASSOCIATIVE ARRAYS

Associative arrays adalah array dimana masing-masing ID key-nya dapat diasosiasikan
dengan sebuah nilai yang Anda tetapkan.
Contoh associative_array.php :
<?php
//contoh associative array
//create array
//index atau key array bukan dalam bentuk numerik, tetapi di-set dengan
sebuah nilai yang ditetapkan sendiri (key : sella, didit, yudi)
$umur = array("sella"=>20, "didit"=>21, "yudi"=>21);
echo $umur['sella']."<br/>";
echo $umur['didit']."<br/>";
echo $umur['yudi']."<br/>";
echo "<br/><br/>";
nya) :<br/>";
print_r($umur);
?>
36
7.5 MULTIDIMENSIONAL ARRAYS

Multidimensional array merupakan sebuah array yang dapat mengandung satu atau lebih
array lagi.
Contoh multidimensional_array.php :
<?php
//contoh multidimensional array
echo "<b>Contoh Multidimensional Arrays</b>";
echo "<br/><br/>";
//create multidimensional array

//array dua dimensi
$grup = array("grup1" => array("A", "B", "C"),
"grup2" => array("E", "F", "G"),
"grup3" => array("K", "L", "M")
);
//memanggil nilai dalam array "grup" dengan index (key-nya) adalah grup3,
dan index ke-1 dari grup3
echo $grup['grup3'][1]."<br/>"; //output L
echo $grup['grup2'][0]."<br/>"; //output E
echo $grup['grup1'][2]."<br/>"; //output C
echo $grup['grup3'][0]."<br/>"; //output K
echo "<br/><br/>";
print_r($grup);
?>
37
BAB 8
PERULANGAN (LOOPING)
8.1 TUJUAN
Mahasiswa mampu memahami konsep-konsep Perulangan dan mampu membuat program
PHP menggunakan perulangan (looping). Terdapat tiga jenis pengulangan yang paling sering
digunakan dalam PHP, pengulangan bentuk for, while, do...while, dan foreach (perulangan
untuk array).
8.2 FOR
Pengulangan for digunakan ketika kita telah mengetahui berapa kali script akan di-
running. Bentuk sintaks untuk for sebagai berikut :
for (init; condition; increment) {
code to be executed;
}
Contoh for-1.php :
<?php
for ($i=1; $i<=10; $i++) {
echo "angka ke-".$i."<br/>";
};
?>
Contoh for-2.php :
<?php
for ($i=10; $i>0; $i--) {
$y = $i - 1;
if ($y > 0) {
echo "anak ayam turun $i, mati 1 tinggal $y <br/>";
} else {
echo "anak ayam turun $i, mati 1 tinggal induk <br/>";
}
};
?>
38
Untuk mengetahui output dari kedua contoh script PHP perulangan for tersebut, silahkan
dipraktekkan di halaman kerja Anda.
8.3 WHILE
Perulangan while bekerja dengan mengeksekusi sebuah blok coding ketika kondisi bernilai
benar. Penulisan sintaks untuk perulangan while sebagai berikut :
while (condition) {
}
Contoh while-1.php :
<?php
$i = 1;
while ($i <= 5) {
echo "The number is " . $i . "<br />";
$i++;
}
?>
Contoh while-2.php :
<?php
$i = 20;
while ($i > 0) {
$y = $i - 1;
if ($y > 0) {
echo "anak ayam turun $i, mati 1 tinggal $y <br/>";
} else {
echo "anak ayam turun $i, mati 1 tinggal induk <br/>";
}
$i--;
};
?>
Untuk mengetahui output dari kedua contoh script PHP perulangan while tersebut, silahkan
dipraktekkan di halaman kerja Anda.
8.4 DO … WHILE
Pernyataan do...while akan mengeksekusi blok coding terlebih dahulu, lalu kemudian
mengecek kondisi dan mengulangi looping ketika kondisi bernilai benar. Berikut adalah sintaks
untuk penggunaan do...while :
39
do {
}
while (condition);
Contoh dowhile-1.php :
<?php
$i = 1;
do {
echo "The number is " . $i . "<br />";
$i++;
}
while ($i <= 5);
?>
8.5 FOREACH
Pengulangan foreach dikhususkan untuk array. Struktur foreach biasanya digunakan untuk
melakukan perulangan berdasarkan isi suatu array. Perulangan akan berakhir jika isi array telah
habis.
Berikut adalah sintaks untuk penggunaan foreach :
foreach ($array as $value) {
}
Contoh foreach.php :
<?php
$hari = array("minggu", "senin", "selasa", "rabu", "kamis",
"jumat", "sabtu");
echo "Menampilkan ID key beserta value yang tersimpan dalam array :<br/>";
foreach ($hari as $key => $value) {
echo "Hari ke-".$key." = ".$value."<br/>";
}
echo "<br/><br/><br/>";
echo "Hanya menampilkan value yang tersimpan dalam array :<br/>";
foreach($hari as $value) {
echo "Hari ".$value."<br/>";
};
?>
40
Untuk mengetahui output dari contoh-contoh script PHP tersebut, silahkan dipraktekkan di
halaman kerja Anda.
41
BAB 9
DATABASE
9.1 TUJUAN
Mahasiswa mampu memahami konsep-konsep Database dan mampu membuat program
PHP yang melibatkan Database di dalamnya.
9.2 PENGGUNAAN DATABASE DALAM PROGRAM PHP

Sintaks atau perintah-perintah yang biasa dipakai dalam penggunaan database dengan PHP
adalah sebagai berikut :
a. Koneksi ke Database
mysqli_connect(servername, username, password, database);
b. Menyisipkan data ke dalam tabel di database

INSERT INTO table_name VALUES (value1, value2, value3, ...)
c. Meng-update data dalam database

UPDATE table_name SET column1 = value1, column2 = value2, ...
WHERE some_column = some_value
d. Menghapus data dalam database

DELETE FROM table_name WHERE some_column = some_value
e. Select data dari sebuah tabel di database

SELECT column_name FROM table_name
Beberapa sintaks MySQL lainnya juga berlaku untuk dieksekusi dalam code PHP, seperti
penggunaan where, order by, dan lainnya.
9.3 LATIHAN MENGOLAH DATABASE DENGAN PHP

Berikut adalah contoh pengelolaan database dengan PHP untuk proses sederhana seperti
CRUD (create, read, update, delete) yang dimulai dari menginput data, membaca data, mengedit
data, dan menghapus data.
42
Pada contoh sederhana ini, penulis akan membuat sebuah sistem yang akan memproses,
menyimpan data dari form isian ke dalam database, melakukan edit data, dan delete data. Yang
dilakukan pertama kali adalah :
1. Penulis membuat satu folder bernama sistem_kemahasiswaan di dalam folder htdocs,
C:\xampp\htdocs\sistem_kemahasiswaan. Semua contoh file yang penulis buat di bab ini,
akan disimpan ke dalam folder sistem_kemahasiswaan.
2. Penulis membuat database baru bernama db_pkm di localhost/phpMyAdmin (buka
melalui browser). (Start-kan Apache dan MySQL melalui jendela XAMPP Control Panel).
3. Penulis membuat tabel baru bernama mahasiswa, dengan struktur tabel sebagai berikut.
4. Penulis membuat satu folder bernama Upload Foto di dalam folder

sistem_kemahasiswaan. Folder Upload Foto ini berfungsi untuk menyimpan file foto yang
diupload oleh pendaftar saat men-submit data.
Drive C:\xampp\htdocs\sistem_kemahasiswaan\Upload Foto
Setelah kebutuhan diatas diselesaikan, penulis melanjutkan pekerjaan dengan membuat code
PHP untuk men-develop ‘sistem kemahasiswaan’, dimulai terlebih dulu dengan membuat
koneksi ke database menggunakan code PHP.
43
a. koneksi.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "db_pkm";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>
Kemudian, dilanjutkan dengan membuat file halaman utama. Untuk file halaman utama,
sebaiknya diberi penamaan file dengan nama index.php. Nama file yang pertama kali akan
ditampilkan sebagai halaman depan haruslah index.* (index.htm, index.html, atau index.php).
Tanpa file index, halaman depan website atau sistem tidak akan muncul secara otomatis.
b. index.php
<html>
<body>
<h4>FORM REGISTRASI KEGIATAN PKM UNJA</h4>
<form method="POST" action="aksi_form.php" enctype="multipart/form-data">
<table>
<tr>
<td>NIM</td>
<td>:</td>
<td><input type="text" name="nim" /></td>
</tr>
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><input type="text" name="nama" /></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input type="radio" name="jk" value="P" checked />Pria
<input type="radio" name="jk" value="W" />Wanita
</td>
</tr>
44
<tr>
<td>Program Studi</td>
<td>:</td>
<td><select name="prodi">
<option value="Sistem Informasi">Sistem
Informasi</option>
<option value="Teknik Elektro">Teknik Elektro</option>
<option value="Teknik Lingkungan">Teknik
Lingkungan</option>
<option value="Matematika">Matematika</option>
<option value="Fisika">Fisika</option>
<select>
</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea name="alamat"></textarea></td>
</tr>
<tr>
<td>Upload Foto</td>
<td>:</td>
<td><input type="file" name="foto" id="foto"></td>
</tr>
<tr>
<td colspan="2"> </td>
<td><input type="reset" value="Reset" />
<input type="submit" value="Simpan" />
</td>
</tr>
</table>
</form>
</body>
</html>


<?php
include "koneksi.php";
$sql = "SELECT * FROM mahasiswa";

$hasil = mysqli_query($conn, $sql);
echo "<br/><h3>Data Mahasiswa Kegiatan PKM UNJA</h3>";

echo "<table border='1'>
<tr align='center'>
<th width='40'>No</th>
<th width='130'>NIM</th>
<th width='180'>Nama Lengkap</th>
<th width='120'>Jenis Kelamin</th>
<th width='180'>Program Studi</th>
45
<th width='250'>Alamat</th>
<th width='150'>Foto</th>
<th width='60'>Edit</th>
<th width='60'>Hapus</th>
</tr>";
$no = 1;
if (mysqli_num_rows($hasil) > 0) {
while($data = mysqli_fetch_array($hasil)) {
echo "<tr>
<td align='center'>$no</td>
<td>".$data['nim']."</td>
<td>".$data['nama']."</td>
<td align='center'>".$data['jenis_kelamin']."</td>
<td align='center'>".$data['prodi']."</td>
<td>".$data['alamat']."</td>
<td align='center'>".$data['foto']."</td>
<td align='center'><a href =
aksi_edit.php?nim=".$data['nim'].">Edit</td>
aksi_hapus.php?nim=".$data['nim'].">Hapus</td>
</tr>";
$no++;
} echo "</table>";
} else {
echo "<b>Data Kosong.</b><br>";
echo "<b>Tidak ada yang ditampilkan.</b>";
}
mysqli_close($conn);
?>
Dilanjutkan dengan membuat file yang berisi code untuk pemrosesan penyimpanan data
dari isian form ke dalam database. Pada tag form, terdapat atribut action, dimana atribut ini
mendefinisikan aksi yang akan dilakukan ketika form di-submit. Dalam contoh ini, aksi yang akan
dilakukan setelah form di-submit, yaitu menyimpan isian data form ke dalam database. Penulis
membuat satu file yang berisi code PHP untuk memproses penyimpanan data dari isian form ke
dalam database yang diberi nama aksi_form.php. Sehingga, atribut action pada tag form
registrasi tersebut diberi value ‘aksi_form.php’.
Di dalam form registrasi tersebut, penulis juga menambahkan isian data Upload Foto,
sehingga pendaftar dapat mengupload foto mereka. Maka, input-annya bertipe ‘file’ dan di dalam
tag form harus ditambahkan atribut enctype dengan value ‘multipart/form-data’ agar inputan
46
tipe ‘file’ untuk Upload Foto dapat terbaca dan diproses oleh form. Untuk menampung file foto
yang diupload oleh pendaftar, penulis telah membuat folder Upload Foto di dalam folder
sistem_kemahasiswaan pada langkah awal di bab ini.
c. aksi_form.php
<?php
$nim = $_POST['nim'];
$nama = $_POST['nama'];
$jk = $_POST['jk'];
$prodi = $_POST['prodi'];
$alamat = $_POST['alamat'];
$file_foto = $_FILES['foto']['name'];
$temp = $_FILES['foto']['tmp_name'];
$simpan = "Upload Foto/".$file_foto;
$error = $_FILES['foto']['error'];
if ($error > 0) {
echo "<script>alert('ERROR !'); document.location.href='index.php';
</script>";
} else {
move_uploaded_file($temp, $simpan);
$sql = "INSERT INTO mahasiswa(nim, nama, jenis_kelamin, prodi,
alamat, foto) VALUES('$nim', '$nama', '$jk', '$prodi', '$alamat',
'$file_foto')";
if ($hasil) {
echo "<script>alert('Data berhasil disimpan !');
document.location.href='index.php'; </script>";
} else {
echo "<script>alert('Data gagal disimpan. Silahkan ulangi !');
}
}
?>
Keterangan :
 Digunakan $_POST[ ] untuk menangkap data yang dikirim melalui form yang memiliki
method POST.
47
 $_FILES['foto']['name'], berfungsi untuk menangkap nama file foto yang sedang

diupload oleh pendaftar.
 $_FILES['foto']['tmp_name'], berfungsi untuk menangkap alamat sementara
(temporary) dimana file dilokasikan sebelum proses upload dilakukan.
 $_FILES['foto']['error'], berfungsi untuk mengetahui eror yang terjadi ketika file
sedang diupload.
 move_uploaded_file($temp, $simpan), berfungsi memindahkan file yang diupload ke
tujuan tempat penyimpanan.
Penggunaan $_FILES tidak hanya sebatas seperti tersebut diatas, tapi Anda juga bisa melakukan
hal lainnya seperti menentukan tipe file tertentu yang diizinkan untuk diupload [‘type’], juga limit
ukuran file yang diizinkan untuk diupload [‘size’]. Untuk mengetahui lebih lanjut tentang
$_FILES Array (HTTP File Upload variables) ini, Anda dapat mempelajarinya di banyak referensi
seperti PHP Manual dan w3schools.com.
Proses selanjutnya adalah mengedit data. Penulis membuat dua file php untuk pemrosesan
edit data, yaitu file aksi_edit.php dan file edit.php. File aksi_edit.php akan menampilkan form
edit data sesuai dengan pilihan data yang akan diedit. Aksi selanjutnya setelah data diubah
melalui form, yaitu men-submit data tersebut dengan cara membawa data form ke file edit.php
untuk diproses.
d. aksi_edit.php
<?php
$nim = $_GET['nim'];
$sql = "SELECT * FROM mahasiswa WHERE nim = '$nim'";
echo "<h4>FORM EDIT DATA MAHASISWA - KEGIATAN PKM UNJA</h4>";
while($data = mysqli_fetch_array($hasil)) {
echo "
<form method='POST' action='edit.php?nim=$nim'
enctype='multipart/form-data'>
<table>
<tr>
<td>NIM</td>
<td>:</td>
<td><input type='text' name='nim' value='".$data['nim']."'
/></td>
</tr>
48
<tr>
<td>:</td>
<td><input type='text' name='nama'
value='".$data['nama']."' /></td>
</tr>
<tr>
<td>:</td>
<td><input type='radio' name='jk' value='P'";
if($data['jenis_kelamin']=='P') echo "checked";
echo " />Pria
<input type='radio' name='jk' value='W'";
if ($data['jenis_kelamin']=='W') echo "checked";
echo " />Wanita</td>
</tr>
<tr>
<td>:</td>
<td><select name='prodi'>
<option value='Sistem Informasi'";
if ($data['prodi']=='Sistem Informasi') echo
"selected";
echo ">Sistem Informasi</option>
<option value='Teknik Elektro'";
if ($data['prodi']=='Teknik Elektro') echo
"selected";
echo ">Teknik Elektro</option>
<option value='Teknik Lingkungan'";
if ($data['prodi']=='Teknik Lingkungan') echo
"selected";
echo ">Teknik Lingkungan</option>
<option value='Matematika'";
if ($data['prodi']=='Matematika') echo "selected";
echo ">Matematika</option>
<option value='Fisika'";
if ($data['prodi']=='Fisika') echo "selected";
echo ">Fisika</option>
<select></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea
name='alamat'>".$data['alamat']."</textarea></td>
</tr>
49
<tr>
<td>:</td>
<td><input type='file' name='foto' id='foto'></td>
</tr>
<tr>
<td colspan='2'> </td>
<td><input type='submit' value='Simpan' /></td>
</tr>
</table>
</form>";
}
?>
Keterangan :
$_GET berfungsi untuk menangkap data yang ada di link browser. Dalam contoh ini, data yang
akan ditangkap adalah informasi nim yang dibawa oleh link. Sehingga digunakan $_GET[‘nim’]
untuk mendapatkan informasi tersebut.
e. edit.php
<?php
$nim_ = $_GET['nim'];
$nim = $_POST['nim'];
$nama = $_POST['nama'];
$jk = $_POST['jk'];
$prodi = $_POST['prodi'];
$alamat = $_POST['alamat'];
$file_foto = $_FILES['foto']['name'];
$temp = $_FILES['foto']['tmp_name'];
$simpan = "Upload Foto/".$file_foto;
$error = $_FILES['foto']['error'];
if ($error > 0) {
echo "<script>alert('ERROR !'); document.location.href='index.php';
</script>";
} else {
50
move_uploaded_file($temp, $simpan);
$sql = "UPDATE mahasiswa SET nim='$nim', nama='$nama',
jenis_kelamin='$jk', prodi='$prodi',
alamat='$alamat', foto='$file_foto' WHERE nim='$nim_'";
if($hasil) {
echo "<script>alert('Data Berhasil Diupdate !!');
} else {
echo "<script>alert('Data Gagal Diupdate !!');
}
}
?>
Proses selanjutnya adalah menghapus data. Penulis membuat satu file php yang
menghandle pemrosesan hapus data, yaitu file aksi_hapus.php. Penghapusan data dari tabel
dilakukan sesuai dengan data yang dipilih untuk dihapus.
f. aksi_hapus.php
<?php
$nim = $_GET['nim'];
$sql = "DELETE FROM mahasiswa WHERE nim='$nim'";

if ($hasil) {
echo "<script>alert('Data berhasil dihapus');
} else {
echo "<script>alert('Data gagal dihapus');
}
?>
51
Ketikkan localhost/sistem_kemahasiswaan di browser Anda, secara otomatis file index.php akan

dijalankan pertama kali. Output untuk pembahasan bab 9.
Penting !
Dalam contoh, diasumsikan semua isian data wajib diisi, baik itu ketika diinput untuk
pertama kali disimpan maupun ketika pengeditan (sehingga upload file juga harus dipilih ulang
ketika melakukan edit data). Untuk kedepannya, Anda bisa melakukan isian data wajib dan tidak
wajib sesuai dengan kebutuhan, artinya akan ada pengecekan/validasi di dalam form maupun
sistem ketika mulai proses penyimpanan data ke dalam tabel.
Anda juga bisa memberikan batasan terhadap tipe file tertentu dan ukuran file yang
diizinkan untuk diupload, seperti yang telah dijelaskan sebelumnya. Anda juga bisa mengganti
kata ‘Edit’ dan ‘Hapus’ dengan icon ‘pena/pensil’ dan ‘tong sampah’ untuk memberikan tampilan
interface yang lebih menarik dan tidak kaku. Jangan terpaku dengan contoh sederhana ini, Anda
bisa mengembangkan lebih banyak lagi sesuai dengan kebutuhan.
52
BAB 10
PAGING
10.1 TUJUAN
Mahasiswa mampu memahami konsep Paging dan mampu membuat program PHP untuk
Paging.
10.2 LATIHAN PEMBUATAN PAGING

Berikut adalah contoh pembuatan paging dengan bahasa pemrograman PHP. Code untuk
membuat paging ditambahkan pada file index.php yang sudah pernah dibuat pada bab 9,
sehingga paging akan muncul di halaman utama sistem atau website. Paging yang akan
dicontohkan pada bab ini adalah paging yang pembuatannya mengacu pada data yang ada di
dalam tabel.
index.php
<html>
<body>
<form method="POST" action="aksi_form.php" enctype="multipart/form-data">
<table>
<tr>
<td>NIM</td>
<td>:</td>
</tr>
<tr>
<td>:</td>
</tr>
<tr>
<td>:</td>
<td><input type="radio" name="jk" value="P" checked />Pria
</td>
</tr>
53
<tr>
<td>:</td>
Informasi</option>
<option value="Teknik Elektro">Teknik Elektro</option>
Lingkungan</option>
<select>
</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
</tr>
<tr>
<td>:</td>
</tr>
<tr>
</td>
</tr>
</table>
</form>
</body>
</html>

<?php

//PAGING
//Jumlah record
$total = mysqli_num_rows($hasil);
//Jumlah data yang akan ditampilkan per halaman

$dataPerPage = 3;
54
//Apabila no halaman sudah didefinisikan, gunakan nomor halaman tersebut.

Sedangkan apabila belum, nomor halamannya adalah 1.
if (isset($_GET['page'])) {
$noPage = $_GET['page'];
} else $noPage = 1;
//Perhitungan offset atau batas bawah

$offset = ($noPage - 1) * $dataPerPage;
//Query SQL untuk menampilkan data per halaman sesuai offset

$sql_2 = "SELECT * FROM mahasiswa LIMIT $offset, $dataPerPage";
$hasil_2 = mysqli_query($conn, $sql_2);

<tr align='center'>
</tr>";
if ($total > 0) {
$x = $offset;
while($data = mysqli_fetch_array($hasil_2)) {
$no = $x+1;
echo "<tr>
<td align='center'>".$data['jenis_kelamin']."</td>
</tr>";
$x++;
} echo "</table><br/><br/><br/>";
} else {
55

echo "<b>Tidak ada yang ditampilkan.</b><br/><br/>";
}
//Menentukan jumlah halaman yang muncul berdasarkan jumlah record

$jumPage = ceil($total/$dataPerPage);
//Menampilkan link previous

if ($noPage > 1){
echo "<a href='index.php?page=".($noPage-1)."'><< Prev</a>";
}
//Memunculkan nomor halaman dan linknya

for ($page = 1; $page <= $jumPage; $page++) {
if ($page == $noPage) {
echo " <b> ".$page."</b>";
} else
echo " <a href='index.php?page=".$page."'>".$page."</a>
";
}
//Menampilkan link next

if ($noPage < $jumPage){
echo "<a href='index.php?page=".($noPage+1)."'> Next >></a>";
}
?>
Tampilan halaman utama setelah diberikan paging.
56
Penting !
Logika dari pembentukan halaman (paging) sangatlah sederhana dimulai dari :
1. Membaca keseluruhan data yang ada di dalam tabel, gunakan perintah SELECT * FROM
nama_tabel.
2. Menghitung jumlah record/data yang ada di dalam tabel, gunakan perintah
mysqli_num_rows().
3. Tentukan jumlah data yang akan ditampilakan per halaman.
4. Cek nomor halaman apakah sudah didefenisikan atau belum, perhatikan link yang ada di
browser. Jika link tertulis seperti ini,
http://localhost/sistem_kemahasiswaan/index.php?page=2, artinya nomor halaman sudah
didefenisikan, yaitu halaman ke-2. Jika tidak ada pendefinisian nomor halaman, maka
nomor halamannya adalah 1 (halaman ke-1).
5. Lalu hitung offset/batas bawah untuk menentukan record ke berapa-kah yang akan mulai
ditampilkan di setiap halaman. Ingat, untuk record yang ada di dalam tabel, perhitungan
dimulai dari record ke-0 (sesuai dengan ketentuan array). Sehingga baris pertama di dalam
tabel akan dibaca sebagai record ke-0.
6. Anda bisa coba membayangkan sendiri langkah 1 – 5 dengan melihat code PHP yang telah
ditulis oleh penulis beserta rumusnya.
7. Lalu, tampilkan data per halaman dengan limit sesuai jumlah data yang telah ditentukan
untuk per halaman beserta offset yang telah dihitung.
8. Hitung jumlah halaman yang akan muncul berdasarkan jumlah record.
9. Buatlah link previous, nomor halaman beserta linknya, dan link next.
57
BAB 11
SESSION
11.1 TUJUAN
Mahasiswa mampu memahami konsep penerapan Session dalam sebuah sistem dan
mampu membuat program PHP untuk menerapkan Session ke dalam sistem yang dibangun.
11.2 PENGGUNAAN SESSION

Ketika website atau sistem yang Anda bangun menyediakan fasilitas login agar hanya
orang-orang tertentu saja yang bisa menggunakan menu atau fasilitas tertentu, maka Anda perlu
menggunakan session dan cookies untuk menyimpan identitas pengunjung yang login.
Contohnya, seperti ketika Anda login ke gmail, facebook, ataupun aplikasi lainnya yang
menyediakan fasilitas login. Ketika Anda berpindah halaman, informasi tentang data Anda tetap
ada di halaman manapun yang Anda buka. Inilah fungsi dari cookies maupun session,
menyimpan informasi atau identitas pengunjung yang login. Dua komponen yang akan disimpan
adalah username dan password.
Perbedaan cookies dan session adalah :
1. Cookies menyimpan informasi pengunjung di sisi client. Sedangkan session menyimpan
informasi pengunjung di sisi server, hal ini lebih aman.
2. Data yang disimpan ke dalam metode cookies dapat bertahan lebih lama dan dapat diatur
waktu expired-nya. Sedangkan session, setelah web browser client dimatikan maka data yang
disimpan metode session akan hilang dan waktu expired juga tidak dapat diatur.
Beberapa perintah yang umum dipakai dalam penggunaan session, diantaranya :

 session_start(), untuk memulai session pertama kali sebelum menyimpan informasi
pengguna di dalam session.
 session_register(“session_name”), untuk menyimpan informasi pengguna setelah
melakukan login.
 session_is_registered(“session_name”), untuk mengecek apakah ada informasi pengguna
yang sedang login.
58
 $_SESSION[], untuk bekerja dengan session PHP, digunakan untuk menampung informasi
pengunjung yang login.
 session_destroy(), digunakan untuk menghapus informasi pengguna atau data session yang
tersimpan (proses logout).
Dalam contoh bab ini, penulis meng-create satu tabel baru, yaitu tabel pengguna. Tabel ini
berisi data tentang username dan password yang akan digunakan sebagai informasi ketika proses
login. Diasumsikan bahwa data username dan password telah didaftarkan sebelumnya. Berikut
adalah struktur tabel pengguna dan data yang ditambahkan oleh penulis.
a. index.php
<?php
session_start();
if (!isset($_SESSION['userid'])) {
echo "
<form method = 'POST' action = 'cek_login.php'>
<table>
<tr>
<td>Username</td>
<td>:</td>
<td><input type='text' name='usernm' /></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type='password' name='pass' /></td>
</tr>
<tr>
<td colspan='2'> </td>
<td><input type='submit' value='Login' /></td>
</tr>
59
</table>
</form>";
} else {
?>
<html>
<body>
<p align="right"> <?php echo "Hai, ".$_SESSION['userid']; ?>
<a href='logout.php'>Logout</a></p>
<form method="POST" action="aksi_form.php" enctype="multipart/form-
data">
<table>
<tr>
<td>NIM</td>
<td>:</td>
</tr>
<tr>
<td>:</td>
</tr>
<tr>
<td>:</td>
<td><input type="radio" name="jk" value="P" checked
/>Pria
</td>
</tr>
<tr>
<td>:</td>
Informasi</option>
<option value="Teknik Elektro">Teknik
Elektro</option>
Lingkungan</option>
<select>
</td>
</tr>
60
<tr>
<td>Alamat</td>
<td>:</td>
</tr>
<tr>
<td>:</td>
</tr>
<tr>
</td>
</tr>
</table>
</form>
</body>
</html>

<?php

//PAGING
//Jumlah record
$total = mysqli_num_rows($hasil);
//Jumlah data yang akan ditampilkan per halaman

$dataPerPage = 3;
//Apabila no halaman sudah didefinisikan, gunakan nomor halaman

tersebut. Sedangkan apabila belum, nomor halamannya adalah 1.
if (isset($_GET['page'])) {
$noPage = $_GET['page'];
} else $noPage = 1;
//Perhitungan offset atau batas bawah

$offset = ($noPage - 1) * $dataPerPage;
//Query SQL untuk menampilkan data per halaman sesuai offset

$sql_2 = "SELECT * FROM mahasiswa LIMIT $offset, $dataPerPage";
$hasil_2 = mysqli_query($conn, $sql_2);
61

<tr align='center'>
</tr>";
if ($total > 0) {
$x = $offset;
while($data = mysqli_fetch_array($hasil_2)) {
$no = $x+1;
echo "<tr>
<td
align='center'>".$data['jenis_kelamin']."</td>
</tr>";
$x++;
} echo "</table><br/><br/><br/>";
} else {
echo "<b>Tidak ada yang ditampilkan.</b><br/><br/>";
}
//Menentukan jumlah halaman yang muncul berdasarkan jumlah record

$jumPage = ceil($total/$dataPerPage);
//Menampilkan link previous

if ($noPage > 1){
echo "<a href='index.php?page=".($noPage-1)."'><<
Prev</a>";
}
62
//Memunculkan nomor halaman dan linknya

for ($page = 1; $page <= $jumPage; $page++) {
if ($page == $noPage) {
echo " <b> ".$page."</b>";
} else
echo " <a
href='index.php?page=".$page."'>".$page."</a> ";
}
//Menampilkan link next

if ($noPage < $jumPage){
echo "<a href='index.php?page=".($noPage+1)."'> Next
>></a>";
}
}
?>
b. cek_login.php
<?php
session_start();
$user = $_POST['usernm'];
$pass = $_POST['pass'];
$sql = "SELECT * FROM pengguna WHERE user='$user' and pass='$pass'";

if ($hasil) {
$_SESSION['userid'] = $user;
echo "<script> document.location.href='index.php'; </script>";
} else {
}
?>
63
c. logout.php
<?php
session_start();
if ($_SESSION['userid']) {
session_destroy();
}
?>
Output yang dihasilkan dari contoh pada bab ini.
64

Modul Pemrograman Web I - 3

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Pemrograman Web I - 3

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul Pemrograman Web I | Rizqa Raaiqa Bintana – Universitas Jambi

1.2 DASAR HTML

1.5 LATIHAN 1. JUDUL HALAMAN WEB

Gambar 1-1. Cara menyimpan file yang telah dibuat

Gambar 1-2. Mengaktifkan Apache web server

Gambar 1-4. Output file html yang telah dibuat

Berikut adalah output yang dihasilkan :

Gambar 2-1. Output file heading.html yang telah dibuat

2.3 PEMBUATAN PARAGRAF

Berikut adalah output yang dihasilkan :

Gambar 2-2. Output file paragraf.html yang telah dibuat

2.5 PREFORMATED TEXT

2.6 BEGIN ROW

2.7 UKURAN FONT

2.8 JENIS FONT

2.9 WARNA FONT

3.2 ORDERED LIST

3.3 UNORDERED LIST

3.4 GAMBAR DALAM HALAMAN WEB

3.6 TABLE ALIGN DAN WIDTH

3.7 TABLE CELLSPACING DAN CELLPADDING

3.8 TABLE COLSPAN DAN ROWSPAN

3.9 TABLE COLOR

<FORM METHOD = “POST/GET” ACTION = “URL”>

3.11 INPUT TEKS

3.12 INPUT CHECKBOX

3.13 INPUT RADIO BUTTON

4.2 CARA MENYISIPKAN CSS

4.3 CSS COMMENTS

4.4 STYLE CSS BACKGROUND

body {background-image: url('paper.gif');}

Jika gambarnya vertikal dapat dilihat sebagai berikut :

4.5 STYLE CSS TEXT

body {color: blue;}

4.6 STYLE CSS FONT

p.normal {font-style: normal;}

4.7 STYLING CSS LINKS

a:link {color: #FF0000;}

4.8 STYLING CSS LIST

Untuk style CSS list yang tidak menggunakan gambar :

ul.a {list-style-type: circle;}

ol.c {list-style-type: upper-roman;}

Untuk style CSS list yang menggunakan gambar :

4.9 STYLING CSS TABLE

c. Table Width and Height

d. Table Text Alignment

4.10 PENYISIPAN CSS KE DALAM DOKUMEN HTML

Gambar 4-1. Contoh Inline CSS

Gambar 4-2. Contoh Internal CSS

Gambar 4-3. Contoh External CSS

Gambar 4-4. Contoh Dokumen External CSS

5.2 PENGANTAR PHP

5.3 SINTAKS DASAR PHP

5.4 KOMENTAR DI PHP

Beberapa cara berkomentar di PHP :

# Ini adalah single-line comment

b) Multiple-line comments. Contoh :

5.5 VARIABEL PHP

echo "<b>" . $text . "</b><br><br>";

Simpan file PHP tersebut di C:\xampp\htdocs\latihanPHP dengan nama “variabel.php”.

6.2 PENGGUNAAN IF ... ELSE

echo "Nilai Angka : " . $nilai . "<br>";

6.3 PENGGUNAAN SWITCH