HTML Dasar

MODUL 1
DASAR-DASAR HTML
A. Tujuan Praktikum
1. Mampu memahami struktur dokumen HTML
2. Mampu membuat web sederhana dengan menggunakan HTML
B. Alokasi waktu : 1 x pertemuan = 120 menit
C. Dasar Teori
Hypertext Markup Language (HTML) merupakan dasar untuk membuat sebuah
halaman website. Dokumen dan aplikasi yang dapat berjalan di atas web browser
umumnya memiliki format hypertext markup language (HTML). Meskipun sekarang
terdapat banyak tool atau software yang dapat digunakan untuk merancang sebuah
halaman secara WYSIWYG (what you see is what you get), jadi apa yang anda lihat
itulah yang akan anda dapatkan seperti frontpage, dreamweaver, adobe golive, dll.
Namun anda harus tetap menguasai HTML karena HTML merupakan dasar apabila
Anda ingin mempelajari dan lebih mendalami tentang web programming. Hal ini
menunjukan bahwa sangat pentingnya mempelajari dasar-dasar HTML. Karena itu
untuk dapat melakukan pemrograman aplikasi di atas web anda harus terlebih dahulu
menguasai HTML.
1. Struktur Dokumen HTML

Secara sederhana, HTML terdiri dari dua bagian yaitu Header dan Body. Struktur
HTML diapit oleh tag awal <HTML> dan tag akhir </HTML>. Standar penulisannya
adalah:
<HTML>
<HEAD>
<title>judul yang ingin ditampilkan pada title bar web\ browser</title>
</HEAD>
<BODY>
pada bagian ini dapat berisikan perintah-perintah
untuk menampilkan : Text, gambar, suara dan lain-lain.
</BODY>
</HTML>
Langkah-langkah pembuatan aplikasi program :

a. Ketikkan script program dengan menggunakan notepad sebagai editor.
b. Simpan file dengan ekstensi : *.html. Contoh : Prakt1.html
c. Buka web browser Microsoft Internet Explorer, Netscape dan sebagainya
d. Pada address ketikkan situs yang telah dibuat.
Program 1.1 : Struktur dokumen HTML
<HTML>
<HEAD>
<TITLE> Struktur dokumen HTML</TITLE>
</HEAD>
<BODY>
Haloooo….
</BODY>
</HTML>
Tag HTML umumnya berupa tag yang berpasang-pasangan dan diapit dengan simbol <
dan >. Pasangan atau penutup perintah dari sebuah tag ditandai dengan tanda / . misalnya
pasangan dari tag <example> adalah </ example >. Sebagian tag telah digunakan pada
contoh kode HTML di atas. Sekarang marilah kita kenali berbagai hal yang mendasar
tentang tag. Setiap tag memiliki nama, nama tag ditulis dalam tanda < dan >. Antara nama
tag dan tanda < ditulis tanpa spasi sama sekali. Nama tag dapat ditulis dengan huruf kecil,
Modul Praktikum Pemrograman Web 1

Prodi Teknik Informatika UPN “Veteran” Yogyakarta
Dasar-Dasar HTML
kapital maupun campuran. Beberapa tag ada yang menggunakan atribut di dalamnya.
Contoh : <P align=”center”>, pada contoh ini P adalah nama tag, sedangkan align adalah
nama atribut dan center adalah nilai atribut.
2. Heading
Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu
dokumen HTML. HTML menyediakan enam tingkatan heading.
Program 1.2 : Heading.html
<HTML>
<HEAD>
<TITLE> Heading</TITLE>
</HEAD>
<BODY>
<H1>Heading level 1</H1>
</BODY>
</HTML>
3. BR
Tag ini digunakan untuk menurunkan teks sebanyak yang kita inginkan, dengan kata
lain satu tag <BR> sama dengan anda menekan tombol Enter satu kali. Untuk lebih
jelas sekarang perhatikan contoh berikut ini :
Program 1.3 : br.html

<HTML>
<HEAD>
<TITLE> Line Break </TITLE>
</HEAD>
<BODY>
<P>Fakultas teknologi industri terdiri dari 3 jurusan :
<BR> Teknik Kimia
<BR> Teknik Industri
<BR> Teknik Informatika
</P>
</BODY>
</HTML>
4. Paragraf
Tag <P> berguna untuk membuat paragraf. Jarak paragraf/tek pertama dengan
paragraf/tek kedua sama dengan anda menggunakan tag <br> dua kali . Untuk
mengatur posisi paragraph menggunakan atribut ALIGN yang diikuti dengan posisi
yang diinginkan : left, center atau right.
Program 1.4 : Paragraf.html
<HTML>
<HEAD>
<TITLE> Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN=”right”>
Haloo
<P ALIGN=”center”>
Haloo
<P ALIGN=”left”>
Haloo
</P>
Senja Telah Tiba<p>
Mentari kian temaram<br>
Samar disela-sela daun cemara<br>
Angin mulai berhembus dari samudera<br>
Pertanda malam telah tiba
</BODY>
</HTML>
2 Modul Praktikum Pemrograman Web

Dasar-Dasar HTML
5. Blockquote
Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan
perintah ini browser akan menampilkan teks menjorok ke dalam
(mengidentifkasikan teks) atau menampilkan teks dalam bentuk huruf miring.
Program 1.5 : Blockquote.html

<HTML>
<HEAD>
<TITLE> Blockquote</TITLE>
</HEAD>
<BODY>
<H3>BLOCKQUOTE</H3>
<BLOCKQUOTE>
Semakin banyak berlatih, akan semakin mematangkan pemahaman kita.
</BLOCKQUOTE>
</BODY>
</HTML>
6. Penggunaan Tag Center

Untuk meratakan teks ketengah, kita juga bisa menggunakan tag <Center>. Dan
untuk mengakhiri penengahan teks (yakni agar teks berikutnya tidak terletak
ditengah), kita perlu menambahkan tanda penutup berupa tanda slash (/), cara
penulisannya adalah : </center>. Untuk jelasnya perhatikan latihan di bawah ini :
Program 1.6 : pre.html

<HTML>
<HEAD>
<TITLE>belajar tag center </TITLE>
</HEAD>
<BODY>
<CENTER>
Addres :
<HR>
Teknik Informatika<br>
<hr size = 5 width = 25% align = center noshade>
Tambakbayan<br>
Sleman<br>
Yogyakarta</center>
</body>
</html>
7. Preformatted Text
Preformatted Text (PRE) digunakan untuk menampilkan teks sama persis seperti
yang diketikkan dalam dokumen HTML.
Program 1.7 : pre.html

<HTML>
<HEAD>
<TITLE> Preformatted Text </TITLE>
</HEAD>
<BODY>
<PRE>
H I M A T I F
himaitif@himatif.or.id
</PRE>
</BODY>
</HTML>
8. Font
Untuk mengatur huruf dokumen HTML digunakan Tag <FONT>. Tag ini memiliki
beberapa atribut, yaitu :

Dasar-Dasar HTML
 Tag <SIZE>
Digunakan untuk mengatur ukuran huruf
 Tag <FACE>
untuk mengatur jenis huruf
 Tag <COLOR>
untuk mengatur warna huruf.
Program 1.8 : font.html

<HTML>
<HEAD>
<TITLE> FONT </TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT FACE =”arial”>
<FONT COLOR=”blue”>Syifaun Nafisah<P>
<FONT COLOR=”#FF0000”>Erza Farrandy<P>
</BODY>
</HTML>
9. Link
Perintah Anchor (A) digunakan untuk membuat suatu link.
 Untuk membuat link ke dokumen HTML lain digunakan perintah <A HREF =
“nama_dokumen”> Teks pada browser</A>.
Contoh :
<A HREF = “himatif.html”> Silahkan klik</A>
 Untuk membuat link dalam sebuah dokumen HTML dilakukan dengan
menambahkan atribut NAME.
Contoh :
<A NAME = “himatif”>H I M A T I F</A>
Program 1.9 : Link

File : link1.html
<HTML>
<HEAD>
<TITLE> LINK </TITLE>
</HEAD>
<BODY>
<A NAME=”lengkap”>Materi PHP</A>
<BLOCKQUOTE>
<P> <A HREF=”Bockquote.html”>Blockquote disini</A>
<P> <A HREF=”Font.html”>Font</A>
</BLOCKQUOTE>
<P><A HREF=”br.html”>Break</A>
</BODY>
</HTML>
10. Tabel
Untuk membuat tabel menggunakan tag <TABLE> … </TABLE>. Dalam tabel
komponen pembentuknya adalah baris dan kolom. Pembuatan baris baru dengan
tag <TR> …</TR>. Untuk mendefinisikan data pada tiap kolom digunakan tag
<TD> … </TD>.
Penulisan:
<TABLE BORDER=b > … </TABLE>

a = bilangan tebal border dalam pixel (BORDER=0 atau atribut ini tidak
disertakan artinya tanpa border)

Dasar-Dasar HTML
Program 1.10 : tabel.html

<HTML>
<HEAD>
<TITLE>latih6</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD>No</TD>
<TD>Komoditi</TD>
<TD>Produksi</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Padi</TD>
<TD>1000</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Jagung</TD>
<TD>2000</TD>
</TR>
<TR>
<TD>3</TD>
<TD>Kedelai</TD>
<TD>3000</TD>
</TR>
</TABLE>
</BODY>
</HTML>
11. Frame
Ide dasar penggunaan frame adalah untuk membagi-bagi jendela browser menjadi
beberapa bagian (frame) dimana bagian itu mengandung dokumen HTML yang
berbeda. Dengan cara ini kita dapat menampilkan beberapa dokumen HTML
sekaligus dalam jendela browser yang sama. Untuk membuat (mendefinisikan)
frame digunakan tag <FRAMESET> … </FRAMESET>. Pemakaian tag ini tidak
bisa digabung dengan pemakaian tag <BODY> … </BODY>.
Penulisan:
<FRAMESET ROWS=a> isi frame </FRAMESET> atau

<FRAMESET COLS=a> isi frame </FRAMESET>
a = bilangan ukuran baris/kolom dalam pixel/persen.
a. ISI FRAME
Untuk mengisi frame yang telah didefinisikan dengan dokumen HTML disediakan
fasilitas tag <FRAME SRC=url>.
Penulisan:
<FRAME SRC=url NAME=a MARGINHEIGHT=b MARGINWIDTH=c SCROLLING=d
NORESIZE>
url = universal resources locator

a = nama frame
b = bilangan ukuran margin atas/bawah teks dalam frame, dalam pixel.
c = bilangan ukuran margin kiri/kanan teks dalam frame, dalam pixel.
d = berisi nilai YES, NO atau AUTO (default) untuk menentukan apakah browser
menampilkan scroll bar

Dasar-Dasar HTML
NORESIZE : bila atribut ini disertakan berfungsi untuk mencegah pengakses web
mengubah ukuran frame.
Pada latihan ini kita ingin membuat dokumen web dengan tampilan frame seperti
berikut ini :
frame_isi
frame_menu frame_kaki
Langkah-langkah pembuatan Frame
(1) Buka Notepad dan ketikkan teks berikut ini :

Program 1.11 Index.html
<HTML>
<HEAD>
<TITLE>index</TITLE>
</HEAD>
<FRAMESET COLS="150,*">
<FRAME SRC="latih_a.htm" NAME="frame_menu" NORESIZE>
<FRAMESET ROWS="90%,10%">
<FRAME SRC="latih_b.htm" NAME="frame_isi" >
<FRAME SRC="latih_e.html" NAME="frame_kaki" >
</FRAMESET>
</FRAMESET>
</HTML>
(2) Save dan beri nama dokumen html tersebut index.html.

(3) Ketikkan teks berikut ini :
Program 1.12 : latih_a.html
<HTML>
<HEAD>
<TITLE>latih_a</TITLE>
</HEAD>
<BODY>
<H3>Menu</H3>
<A HREF=latih_b.htm TARGET="frame_isi">MENU-01</A>
<BR>
<A HREF=latih_c.htm TARGET="frame_isi">MENU-02</A>
<BR>
<A HREF=latih_d.htm TARGET="frame_isi">MENU-03</A>
<BR>
</BODY>
</HTML>
(4) Save dan beri nama dokumen html tersebut latih_a.html.


Dasar-Dasar HTML
Program 1.13 : latih_b.html

<HTML>
<HEAD>
<TITLE>latih_b</TITLE>
</HEAD>
<BODY>
<H3>Halaman Web MENU-01</H3>
Di buat dalam rangka Praktikum Pemrograman WEB.
</BODY>
</HTML>
(6) Save dan beri nama dokumen html tersebut latih_b.html.

Program1.14 :latih_c.html
<HTML>
<HEAD>
<TITLE>latih_c</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
(8) Save dan beri nama dokumen html tersebut latih_c.html.

Program 1.15 : latih_d.html

<HTML>
<HEAD>
<TITLE>latih_d</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
(10) Save dan beri nama dokumen html tersebut latih_d.html.

Program1.16 : latih e.html

<HTML>
<HEAD>
<TITLE>latih_e</TITLE>
</HEAD>
<BODY>
<CENTER>
Di buat oleh : Awang H Pratomo, MT.
</CENTER>
</BODY>
</HTML>
(12) Save dan beri nama dokumen html tersebut latih_e.html.

(13) Buka browser kemudian ketik index.html.
12. Gambar
Untuk menampilkan gambar pada halaman web menggunakan tag <IMG>.
Contoh : <IMG SRC=”gambar1.gif” ALT=”gambar1”>

Dasar-Dasar HTML
Perintah HTML diatas akan menampilkan gambar gambar1.gif dan menampilkan
teks “gambar 1” apabila browser mematikan fasilitas penampil grafik. Ekstensi
grafik yang biasa di tampilkan oleh HTML adalah GIF, JPG, dan BMP. Anda juga
dapat menggabungkan grafik dengan tag <A> untuk membuat link dari gambar
Anda.
<IMG SRC=”gambar1.gif” ALT=”gambar1” HREF=”www.yahoo.com”>
Atribut ALT dipakai untuk menampilkan teks pengganti gambar untuk browser yang
tidak mendukung penggunaan gambar atau apabila client sengaja mematikan
fasilitas tersebut. Anda juga dapat menggunakan atribut align untuk mengatur
posisi gambar terhadap teks yang bersebelahan. Perhatikan contoh berikut :
Program 1.17 : gambar.html

<HTML>
<HEAD>
<TITLE>gambar1.html</TITLE>
</HEAD>
<BODY>
<H1>Praktikum Pemrograman Web</H1>
<BR>Pergi ke web site <IMG SRC="sample.gif" ALIGN="MIDDLE">
<A HREF="www.ifupn.com">Situs Teknik Informatika UPN</A>
</BODY>
</HTML>
Pada contoh HTML di atas, align untuk gambar adalah tengah. Anda dapat
mencobanya untuk align danalign bottom untuk membandingkannya. Dengan
menambahkan atribut HSPACE dan VSPACE, Anda dapat mengatur frame yang
mengelilingi gambar.
Program 1.18 : gambar2.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<BR>Pergi ke web site <IMG SRC="sample.gif" ALIGN="MIDDLE" HSPACE=13
VSPACE=13> <A HREF="www.ifupn.com">Situs Informatika UPN</A>
</BODY>
</HTML>
Bila dirasa gambar Anda terlalu kecil atau terlalu besar, Anda dapat menentukan
sendiri lebar dan panjang gambar mengatur property WIDTH dan HEIGHT pada
tag <IMG>.
Program 1.19 : gambar3.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<BR>Pergi ke web site <IMG SRC="sample.gif" ALIGN="MIDDLE" WIDTG=50
HEIGHT=50> <A HREF="www.ifupn.com">Situs Informatika UPN</A>
</BODY>
</HTML>

Dasar-Dasar HTML
13. List
HTML menyediakan beberapa cara untuk membuat daftar/list, yaitu :
 Ordered List
Digunakan untuk membuat daftar dimana tiap bagian memiliki nomor secara
terurut. Ordered list dimulai dengan tag <OL> dan diakhiri dengan </OL>.
Untuk menyatakan bagiannya digunakan tag <LI>. Daftar atribut TYPE beserta
fungsinya yang dapat digunakan pada pembuatan ordered list dalam web
adalah :
Atribut Type
TYPE = 1 Penomoran list : 1,2,3
TYPE = I Penomoran list : I,II,III
TYPE = i Penomoran list : i,ii,iii
TYPE = A Penomoran list : A,B,C
TYPE = a Penomoran list : a,b,c
 Unordered List
Setiap penomoran pada list ini dengan menggunakan bullet. Penomoran ini
digunakan tag awal <UL> dan diakhiri </UL>. Daftar atribut TYPE beserta
fungsinya yang dapat digunakan pada pembuatan unordered list dalam web
adalah :
Atribut Type
TYPE = Circle Lingkaran
TYPE = disk Cakram
TYPE = square Kotak
Program 1.20 : list.html

<HTML>
<HEAD>
<TITLE>List</TITLE>
</HEAD>
<BODY>
<OL TYPE=A>
<LI>Daftar Praktikum
<OL TYPE=I>
<LI>Desain Web
<LI>Grafika Komputer
<LI>Kecerdasan Buatan
</OL>
</BODY>
</HTML>
14. Form dan Input

Tag <FORM> dan <INPUT> digunakan bersama-sama untuk meminta masukan
dari user untuk kemudian dikirim ke server. Tag <FORM> membuat kerangkanya
dan tag <INPUT> menyediakan elemen antarmuka dengan user.
Standar penulisan untuk FORM adalah :
<FORM METHOD=”POSTIGET” ACTION=”URL”)
…
…
</FORM>
Atribut METHOD memiliki dua nilai POST dan GET. Metode GET mengirimkan
data pada server dengan cara meletakkan data pada bagian akhir URL (Uniform
Resources Locator) yang ditunjuk, sedangkan POST mengirimkan data secara

Dasar-Dasar HTML
terpisah. Atribut ACTION berisi URL dari program yang dipanggil oleh form
tersebut.

Dasar-Dasar HTML
13.1. TextBox
Untuk membuat TextBox, HTML menyediakan tag <INPUT> dengan atribut :
 TYPE=”text”
untuk membuat kotak input. Jika TYPE diberi nilai text, maka masukan
hanya bisa menerima satu baris data. Untuk menyembunyikan tulisan
menggunakan TYPE=”password”.
 NAME
digunakan untuk memberi nama input tersebut
 VALUE
Digunakan untuk memberi nilai suatu input.
 SIZE
Digunakan untuk menentukan batas terpanjang sebuah masukan.
13.2. CheckBox
CheckBox digunakan agar user bisa memilih salah satu pilihan, lebih dari satu
pilihan atau tidak memilih sama sekali. Carannya yaitu dengan menggunakan
TYPE=”checkbox”
13.3. RadioButton
RadioButton digunakan apabila user harus memilih salah satu pilihan. Carannya
yaitu dengan menggunakan TYPE=”radio”. Untuk mengaktifkan pilihan digunakan
atribut CHECKED.
13.4. Submit dan Reset
Tombol Submit digunakan ketika user telah mengisi suatu formulir dan ingin
megirimkan ke server. Untuk membuatnya dengan menggunakan atribut
TYPE=”submit”.
Tombol reset digunakan ketika user ingin menghapus semua masukan yang telah
ditulis. Caranya dengan menggunakan atribut TYPE=”reset”.
Program 1.21 : form.html
<HTML>
<HEAD>
<TITLE>FORM</TITLE>
</HEAD>
<H3>
<P ALIGN=”center”>BUKU TAMU</P>
</H3>
<FORM METHOD=”POST” ACTION=”thank.html”>
<TABLE BORDER=”0” CELLPADING=”2” WIDTH=”100%”>
<TR>
<TD WIDTH=”8%”>Nama</TD>
<TD WIDTH=”4%”>:</TD>
<TD WIDTH=”88%”>INPUT TYPE=”text” NAME=”nama” SIZE=”20”></TD>
</TR>
<TR>
<TD WIDTH=”8%”>Asal</TD>
<TD WIDTH=”88%”>INPUT TYPE=”text” NAME=”asal” SIZE=”20”></TD>
</TR>

Dasar-Dasar HTML
Lanjutan program 1.22
<TR>
<TD WIDTH=”8%”>Email</TD>
<TD WIDTH=”88%”>INPUT TYPE=”text” NAME=”email” SIZE=”20”></TD>
</TR>
<TR>
<TD WIDTH=”8%” VALIGN=”top”>Homepageku</TD>
<TD WIDTH=”4%” VALIGN=”top”>:</TD>
<TD WIDTH=”88%”>
<INPUT TYPE=”radio” VALUE=”V1” CHECKED NAME=”R1” >Bagus Sekali<BR>
<INPUT TYPE=”radio” VALUE=”V2” NAME=”R2” >Bagusi<BR>
<INPUT TYPE=”radio” VALUE=”V3” NAME=”R3” >Biasa <P> </TD>
</TR>
<TABLE>
<P><INPUT TYPE=”submit” VALUE=”Kirim” NAME=”B1”>
<INPUT TYPE=”reset” VALUE=”Batal” NAME=”B2”></P></TABLE></FORM>
</BODY>
</HTML>
Program 1.23 : thanks.html

<HTML>
<HEAD>
<TITLE>Terima Kasih</TITLE>
</HEAD>
<BODY>
<P>Anda dari halaman form.html</P>
</BODY>
</HTML>
D. Tugas Praktikum
1. Buat situs sederhana yang memuat data pribadi dimana pada situs-situs
tersebut menggunakan point-point yang telah dipelajari diatas.
2. Buatlah program yang menghasilkan output seperti dibawah :

Dasar-Dasar HTML

MODUL 2
CSS (Cascading Style Sheets)
A. Tujuan Praktikum
1. Mampu memahami dasar-dasar CSS.
2. Mampu mengenal lebih jauh properti CSS.
3. Dapat membuat program sederhana dengan menggunakan CSS.
B. Alokasi Waktu : 1 x pertemuan = 1 x 120 menit
C. Dasar Teori
1. Dasar-Dasar CSS
CSS (Cascading Style Sheets) digunakan dalam kode HTML untuk
menciptakan suatu kumpulan style yang terkadang dapat digunakan untuk
memperluas kemampuan HTML.sebagai contoh, kode HTML murni tidak
memungkinkan untuk menggunakan sebuah definisi font yang diterapkan pada setiap
sel dan bahkan tag <BASEFONT> pun tak berpengaruh pada sel-sel tabel. Misalnya
diinginkan untuk mengatur ukuran font pada setiap sel sebesar Dengan menggunakan
tag <FONT>, semua sel harus diformat dengan menggunakan <FONT SIZE = ’’2’’>.
CSS dapat menggunakan 2 metode penerapan.
a. Internal
CSS yang dibuat langsung diletakkan pada file yang sama dengan file yang hendak di
eksekusi.
Program 2.1 : lat_css.html
<HTML>
<TITLE>CSS Pertama</TITLE>
<STYLE TYPE = ”text/CSS”>
<!- -
H1 { font-size:14pt;
font-style: italic;
color: greEn; }
-->
</STYLE>
</HEAD>
<BODY>
<H1>CSS Pertamaku</H1>
Selamat mencoba CSS!
</BODY>
</HTML>
b. External
CSS dibuat terpisah dengan script yang akan dieksekusi dengan meggunakan metode
pemanggilan link.
Program 2.2 css external : style.css
H1 { font-size:14pt;
font-style: italic;
color: greEn; }
#Tebal { font-weight : bold;
color : blue; }
#Miring { font-style : italic;
color : pink;

Program 2.3 css external2 : external.html
<HTML>
<HEAD><link rel="stylesheet" type="text/css" href="style.css" />
<TITLE>atribut ID</TITLE>
</HEAD>
<BODY>
<H1>PANTUN</H1>
<H2 ID = ”Miring”>
Kalau ada jarum yang patah<BR>
Jangan disimpan dalam peti
</H2>
<H3 ID = ”Tebal”>
kalau ada kata yang salah<BR>
Jangan disimpam dalam hati
</H3>
</BODY>
</HTML>
<HTML>
<HTML>
<HEAD>
<HEAD>
<STYLE TYPE="text/css">
<STYLE
B { colorTYPE="text/css">
: green }
P {font-family: serif; font-style: italic} /* font italic */
</STYLE>
.tanya
</ HEAD> {color: red} /* classes tanya berwarna merah */
.jawab
<BODY> {color: blue} /* classes jawab berwarna biru */
<HTML><HEAD>
</STYLE>
<B> <TITLE>CSS Pertama</TITLE>
</HEAD>
P: Mengapa jika kita anggap
<link rel="stylesheet" <FONT SIZE="+1">suatu
type="text/css"
<BODY>
pekerjaan</FONT>href="style.css"
itu mudah />
<P
makaCLASS="tanya">
pekerjaan itu akan beneran menjadi lebih mudah?
</HEAD>
Q.
<P>Kenapa contoh yang diberikan tidak pernah diubah?
<BODY>
Modul Praktikum<PJ: CLASS="jawab">
Pemrograman
Karena Web
itu
<H1>CSS merupakan sugesti terhadap diri kita
Pertamaku</H1> 15
A. Karena
Prodi Teknik Informatika UPN si
sendiri</B> Abe
“Veteran”
Selamat sudah gak mau susah membuat contoh baru
Yogyakarta
mencoba CSS!
</BODY></BODY>
</HTML>
</HTML>
</HTML>
Akan membuat bingkai memiliki ketebalan 20 titik untuk semua sisi. Apabila
ketebalan sisi hendak diatur berbeda-beda, anda bisa memberikan nilai seperti
berikut: border-width: 10px 20px 30px 40px;
A:link {
color : white;
text-decoration: none;
background-image: url(”button.gif”)
50% 50% no-repeat;
padding: 0.5em;
margin: 0.5em;
display: block;
}
<html>
A:visited {
<head>
color : white; margin</title>
<title>pengaturan
text-decoration:
<style =”text/css”>none ;
background-image : url(”#button.gif”);
table.margin {margin-left:2cm}
<HTML>
padding: 0.5em;
</style>
<HEAD>
margin:
</head>0,5em;
<TITLE>Background-color</TITLE>
display: block;
<body>
</HEAD>
}<p>
<BODY>
A:active
paragraf{tidak di beri margin
<H2>
color : white;
</p>STYLE
<SPAN = ”color:
background-image white;
: url(”#button.gif”);
<table class=”margin” width=”50%”
background-color: border=”1” >
blue”;>
padding: 0.5em;
<tr>diatas biru<BR>
White
margin: 0,5em;
<td>perataan
</SPAN> margin kiri</td>
display:
</tr> block;
<SPAN STYLE =
text-decoration:”color:silver;
none}
<tr> background-color: black”:>
A:hover {
<td> </td>
Perak
color di atas hitam<BR>
16 </tr>: white;
</SPAN> Modul Praktikum Pemrograman Web
text-decoration:
</table> underline;
</H2>
color: red;
</body>
</BODY>
background-image : url(”#button.gif”);
</html>
</HTML>
}
<html>
<head>
<title>pengaturan pada from tombol</title>
4. Membuat
<style Formulir Cantik dengan Pengaturan pada Komponen Botton / Tombol untuk
=”text/css”>
membuat tombol Flat berwarna.
input.button
{Pengaturan warna latar belakang button sebelumnya yaitu menggunakan property
pewarnaan berupa backgrounnd-color, dan untuk memperoleh Tombol yang berbentuk
color:#000000;
flat/pipih kita akan
background: memanfaatkan Property pengaturan border dan pewarnaannya.
red;
border-color:white;
Contohnya adalah:
border-bottom-color:green;
border-top:2px
Program dotted;
2.9 : fm_btnflat.htm
border-bottom:1px dotted;
border-left: 1px dotted;
border-rigt:1px dotted;
font-family:verdana;
font-size:12px;
}
</style>
</head>
<body>
<form name ="form1" method="post" action="">
<table bordercolor="1">
<tr>
<td width="58">nama </td>
<td width="230" >:
<input type="text" name="nama">
</td>
</tr>
<td width="58">alamat</td>
<td width="230" >:
<input type="text" name="nama">
</td>
</tr>
<tr>
<td width=”58”>alamat</td>
<td width=”230” >:
<input type="text" name="alamat">
</td>
</tr>
<tr>
<td> </td>
<td>
<input class="button" type="submit" name="submit" value="simpan">
<input class="button" type="submit" name="submit2" value="submit">
</td>
</tr>
</table>
Modul </form>
Praktikum Pemrograman Web 17
</body>
</html>

E. TUGAS PRAKTIKUM
1. Program link_tbganti.css belumlah lengkap. Buatlah program bantuan sehingga
program pada link_tbganti.css dapat terlihat fungsinya.
Buatlah sebuah program modifikasi berupa sebuah form register dengan
penggunaan fungsi css secara maximal
2. Perbaiki coding dibawah ini hingga menjadi tampilan seperti gambar dibawah
ini !.
<HTML>
<HEAD>
<STYL TYPE=text/css>
.level1 {position: relative; top: 15; left: 25; z-index: 10; color:
#00000;
font-family: Arial; font-size:25pt}
.level2 {position: relative; top: -22; left: 28; z-index: 6; color:
#ADADAD; font-family: Arial; font-size:25pt
.level3 position: relative; top: -59; left: 29; z-index: 6; color:
#ADADAD; font-family: Arial; font-size:25pt}
<STYLE>
</HEAD>
<BODY>
<DIV CLASS=level1>Apakah Berbayang, huh?</DIV>
</BODY>
</HTML>


MODUL 3
DASAR-DASAR PHP
A. Tujuan Praktikum
1. Mengenal dan memahami bentuk script PHP.
2. Mengenal varibel-variabel PHP
3. Menggunakan statement kondisional dan pengulangan dengan PHP.
4. Mampu membuat desain web sederhana dengan PHP.
B. Alokasi Waktu : 1 x Pertemuan = 120 Menit
C. Dasar Teori
1. Struktur dasar PHP
PHP adalah bahasa server-side scripting yang menyatu dengan HTML untuk
membuat halaman web yang dinamik. Maksud dari server-side scripting adalah sintaks
dan perintah-perintah yang kita berikan akan sepenuhnya dijalankan di server tetapi
disertakan pada dokumen HTML biasa. Pembuatan web ini merupakan kombinasi
antara PHP sendiri sebagai bahasa pemrograman dan HTML sebagai pembangun
halaman web. Ketika pengunjung membuka halaman web, server akan memproses
perintah PHP dan lalu mengirimkan hasilnya ke browser pengunjung tersebut, seperti
juga pada ASP atau ColdFusion.
Tetapi tidak seperti ASP atau ColdFusion, PHP adalah merupakan software
yang Open Source dan mampu lintas platform. PHP mampu berjalan di Windows NT
dan beberapa versi UNIX, dan PHP dapat dibangun sebagai modul pada web server
Apache dan sebagai binary yang dapat berjalan sebagai CGI.
PHP dapat mengirim HTTP header, dapat mengeset cookies, mengatur
authentication dan redirect users. PHP menawarkan koneksitas yang baik dengan
beberapa basis data antara lain Oracle, Sybase, mSQL, MySQL, Solid, PostgreSQL,
Adabas, FilePro, Velocis, dBase, Unix dbm dan tak terkecuali semua database ber-
interface ODBC. Dan juga integrasi dengan beberapa library eksternal yang dapat
membuat anda melakukan segalanya dari dokumen PDF hingga mem-parse XML.
PHP juga mendukung komunikasi dengan layanan lain melalui protokol IMAP, SNMP,
NNTP, POP3 atau bahkan HTTP. Bila PHP berada dalam halaman web anda, maka
tidak lagi dibutuhkan pengembangan lingkungan khusus atau direktori khusus. Hampir
seluruh aplikasi berbasis web dapat dibuat dengan PHP. Namun kekuatan utama
adalah konektivitas basis data dengan web. Dengan kemampuan ini kita akan
mempunyai suatu sistem basis data yang dapat diakses dari web.
Ada tiga cara untuk menuliskan script PHP, yaitu :

1. <?
Script PHP anda
?>
2. <?php
Script PHP anda
?>
3. <script language = “php”>
Script PHP anda
</script>
Cara pertama akan sering digunakan karena lebih ringkas. Cara kedua digunakan
untuk kombinasi dengan XML, sebuah bahasa yang merupakan pengembangan dari
HTML. Cara yang ketiga digunakan untuk mengantisipasi editor-editor yang tidak
dapat menerima kedua cara diatas.
Berikut ini contoh sederhana pemakaian bahasa PHP dalam halaman web :

DASAR-DASAR PHP
Program 3.1 : coba.php
<html>
<head>
<title>Example</title>
</head>
<body>
<? Echo "Hi, I'm a PHP script!"; ?>
</body>
</html>
Berikut ini adalah beberapa contoh program yang dibuat dengan PHP. Sekedar
gambaran sebagian dari kemampuan bahasa PHP.
a. Mencetak Tanggal
Contoh berikut menggunakan fungsi date yang sudah tersedia dalam PHP dan
akan menampilkan tanggal pada saat ini (disesuaikan dengan kondisi timer
komputer pengolah PHP).
Program 3.2 : tanggal.php
<html>
<head><title>Tanggal</title></head>
<body>
Tanggal :
<?php
/* script untuk menuliskan tanggal */
print(date("d F Y "));
?>
</body>
</html>
b. Pengenalan Variabel
Script ini akan mengenalkan kepada anda penggunaan variabel. Perlu diingat
disini, variabel adalah case sensitive. Variabel dimulai dengan tanda dollar ($).
Program 3.3 : variabel.php

<?php
/* deklarasi variabel */
$Tanggal = date ("d F Y");
$Nama = "praktikan" ;
?>
<html>
<head><title>Variabel</title></head>
<body>
<?php
/*script pengenalan variabel*/
/*memanggil variabel Tanggal*/
print("$Tanggal<BR>\n");
/* memanggil variabel Nama */
print("$Nama, selamat datang di dunia webmaster");
?>
</body>
</html>
c. Menerima Masukan dari User

Contoh berikut terdiri dari dua file, yaitu script untuk menerima masukan dari user
dan script untuk penanganan masukan.

DASAR-DASAR PHP
Program 3.4 : masukan.php

<html>
<head><title>Masukan</title></head>
<body>
<FORM ACTION="keluaran.php" METHOD="post">
Nama Anda :<BR>
<INPUT TYPE="text" NAME="nama"><BR>
Kuliah di :<BR>
<INPUT TYPE="text" NAME="sekolah"><BR>
<INPUT TYPE="submit"><INPUT TYPE="reset">
</FORM>
</body>
</html>
program 3.5 : keluaran.php

<html>
<head><title>keluarannya</title></head>
<body>
<?php
print("Hai, $_POST[nama] <BR>\n");
print("$_POST[sekolah] memang top ");
?>
</body>
</html>
d. Kondisional
Script berikut ini akan mengenalkan ekspresi kondisional.
Program 3.6 : kondisi.php
<html>
<head><title>Kondisional</title></head>
<body>
<?php
$Hari = date(" l ");
if ($Hari == "Saturday")
{
print("Hari yang menyenangkan");
}
else
{
print("Hari yang melelahkan");
}
?>
</body>
</html>
e. Pengulangan
Script ini akan mengenalkan proses pengulangan. Contoh pengulangan dibawah
ini akan dilakukan sebanyak empat kali.
Program 3.7 : ulang.php
<?
$Tanggal = date ("d F Y");
?>
<html>
<head><title>Pengulangan</title></head>
<body>
<?php
/* script pengenalan pengulangan */
print("$Tanggal<BR>\n");
for ($count = 1 ; $count <= 4; $count++)
{
print("Anda adalah calon webmaster<BR>\n");
}
?>
</body>
</html>

DASAR-DASAR PHP
2. Tipe Data, Variable, dan Operator
a. Tipe Data
PHP mengenal 3 macam tipe data : Integer, String, Floating Point
b. Identifier
Identifier dalam php terdiri dari fungsi, variable dan clauses. Aturan
penulisannya adalah sebagai berikut :
 Harus dimulai dengan under_score ( _ ).
 Tidak boleh menggunakan tanda baca.
 Identifier adalah case sensitive, kecuali fungsi-fungsi yang telah
disediakan oleh php.
 Diawali tanda dolar ($).
 Nama fungsi tidak boleh sama dengan nama fungsi yang disediakan oleh
php.
 Nama variabel tidak boleh sama dengan nama fungsi yang disediakan oleh
php.
c. Variabel
Variabel adalah sebuah tempat untuk menyimpan data yang nilainya berubah-
ubah. Variabel dalam php tidak harus didefinisikan sebelum variable tersebut
digunakan. Dalam php, terdapat 2 jenis variable :
 Variabel global
Digunakan jika variable tersebut memberikan nilai yang sama dalam setiap
blok program.
 Variabel local
Digunakan apabila variable tersebut hanya akan berjalan dalam fungsi yang
mendeklarasikan variable tersebut.
Untuk memberi nilai variable digunakan tanda sama dengan (=).
Program 3.8. : lok_glo.php
<HTML>
<HEAD>
<TITLE>VARIABEL LOKAL DAN GLOBAL</TITLE>
</HEAD>
<BODY>
<?php
function printklub($NamaKlub)
{
print("Klub Sepak bola adalah $NamaKlub<BR>\n");
}
function MitraSby( )
{ /* Variabel Lokal */
$NamaKlub="Mitra Surabaya";
printKlub($NamaKlub);
}
function Persija( )
{ /* Variabel Lokal */
$NamaKlub="persija";
printKlub($NamaKlub);
}
function Forever( )
{ /* Variabel Global */
global $NamaKlub;
printKlub($NamaKlub); }
/* Variabel Global */
$NamaKlub="AC Milan";
Forever();
MitraSby();
Persija();
Forever();
?>
</BODY>
</HTML>

DASAR-DASAR PHP
d. Operator
Operator adalah symbol yang digunakan untuk memanipulasi data. Operator
dikategorikan menjadi 4 kategori :
 Aritmatika
Merupakan operator yang berhubungan dengan fungsi-fungsi matematik.
 Logika
Merupakan operator yang digunakan untuk membandingkan nilai TRUE dan
FALSE.
Tabel Kebenaran
 Bitwise
Digunakan untuk memanipulasi dari nilai-nilai data.
Hubungan bit dan hasilnya untuk operator bitwise :
 Operator lain
Beberapa operator lain yang dikenal oleh PHP adalah :
<HTML>
<HEAD> <TITLE>OPERATOR</TITLE> </HEAD>
<BODY>
<HTML>
<? $Harga = 100; $Pengunjung
<HEAD> <TITLE>EKSPRESI</TITLE> </HEAD> = 8;
<BODY> Print(“Jumlah pengunjung hari ini $Pengunjung<BR>\n”);
<? Print(“Total Pendapatan :”); Print($Harga*$Pengunjung);
?> Print((4+1*2) .”<BR>\n);
Modul Praktikum Pemrograman Web
</BODY> Print(((4+1)*2) .”<BR>\n); 25
Prodi Teknik Informatika UPN </HTML>
“Veteran”
?> Yogyakarta
</BODY>
</HTML>
DASAR-DASAR PHP
D. Tugas Praktikum
1. Buatlah program untuk mencetak bulan dari Januari sampai dengan Desember.
Jika angka 1 maka Bulan Januari. Jika angka 2 maka Bulan Februari dan
seterusnya..
2. Buatlah program untuk membuat kalkulator sederhana berisi operasi + , - , /, *
3. Perhatikan output dibawah ini :
Olahlah script program anda pada Tugas Praktikum pada Modul 1 no 2, sehingga
menghasilkan output seperti diatas

MODUL 4
PERCABANGAN, PERULANGAN, DAN ARRAY
A. Tujuan Praktikum
1. Mengenal perintah-perintah pengatur aliran program dalam PHP
2. Dapat memanfaatkan array dalam penyimpanan data dengan PHP
B. Alokasi Waktu : 1 x pertemuan = 2 x 60 Menit
C. Dasar Teori
1. Percabangan
Perintah percabangan adalah perintah yang memungkinkan pemilihan atas
perintah yang akan dijalankan sesuai dengan kondisi tertentu. Ada 3 macam
perintah percabangan dalam PHP, yaitu :
1.1. If
Perintah ini digunakan untuk menjalankan satu atau lebih perintah yang
menyatakan keadaan. Standar penulisannya :
If (kondisi)
{
Pernyataan akan dijalankan jika kondisi bernilai benar
}
Program 4.1 : if.php
<HTML>
<HEAD><TITLE> IF </TITLE>
<BODY>
<?php
$X=100;
$Y=50;
If ($X > $Y)
{
Print(“X Lebih besar dari Y”);
}
?>
</BODY>
</HTML>
1.2. If … Else
Perintah ini digunakan untuk menjalankan satu atau lebih perintah yang
menyatakan keadaan, tetapi digunakan untuk banyak blok perintah Standar
penulisannya :
If (kondisi 1)
{Pernyataan akan dijalankan jika kondisi bernilai benar}
else
{Pernyataan akan dijalankan jika kondisi 1 bernilai
salah}
Program 4.2 : ifelse.php
<HTML>
<HEAD><TITLE> IF ELSE </TITLE>
<BODY>
<?php
$X=100;
$Y=50;
If ($X > $Y)
{
Print(“X Lebih besar dari Y”);
}
else
{
Print(“X Lebih kecil dari Y”);
}
?>
</BODY>
</HTML>

1.3. Switch
Perintah ini digunakan sebagai pengganti If … else dengan else lebih dari
satu. Standar penulisannya :
Switch(kondisi)
{
case konstanta 1:
pernyataan 1;
break;
case konstanta 2:
pernyataan 2;
break;
default :
pernyataan default;
}
Program 4.3 : switch.php
<HTML>
<HEAD><TITLE> SWITCH </TITLE>
<BODY>
<?php
$English_day = date(“1”);
Switch($English_day)
{ case “Monday” :
$indonesian_day = “Senin”;
break;
case “Tuesday” :
$indonesian_day = “Selasa”;
break;
case “Wednesday” :
$indonesian_day = “Rabu”;
break;
case “Thursday” :
$indonesian_day = “Kamis”;
break;
case “Friday” :
$indonesian_day = “Jumat”;
break;
case “Saturday” :
$indonesian_day = “Sabtu”;
break;
default :
$indonesian_day = “Minggu”;
break; }
print(“Hari ini adalah hari $Indonesian_day”)
?>
</BODY>
</HTML>
2. Pengulangan
Struktur pengulangan digunakan untuk mengulang suatu perintah. Bahasa PHP
mengenal tiga jenis perintah pengulangan, yaitu :
2.1. FOR
Perintah FOR digunakan untuk mengulang perintah dengan jumlah
pengulangan telah diketahui. Standar penulisannya :
For (nilai awal; nilai akhir; peningkatan/penurunan)
{
Pernyataan yang akan dijalankan
}

<HTML>
<HEAD><TITLE>
<HEAD><TITLE>DO WHILE </TITLE>
WHILE </TITLE>
<BODY>
<HTML>
<?php
<HEAD><TITLE> FOR </TITLE>
<BODY> $i = 1;
<?php while
do ($i<=7)
{
For ($i=3; $i<=7;$i++)
<? { print(“$i<BR>”);
$nama_bulan=array("Januari","Februari","Maret","April","Mei","Juni",
$i++;
print(“<font size=$i> ERZA</FONT><BR>”);
Modul Praktikum Pemrograman Web }
"Juli","Agustus","September","Oktober","November","Desember");
} while ($i<=7) 29
Prodi Teknik Informatika$bulan_ini=$nama_bulan[date("m")-1];
UPN “Veteran”
?> ?> Yogyakarta
Echo"Sekarang
</BODY>
</BODY> Bulan <b>$bulan_ini</b>";
?> </HTML>
</HTML>
Program 4.8 : arraystring.php

<html>
<head>
<title>array urut</title>
</head>
<body>
<?php
$teks1 = "Pemrograman Web dengan PHP";
print("Teks Asli : $teks1 <br>");
$hasil = explode(" ",$teks1);
print("<b>Setelah explode:</b><br>");
print_r($hasil);
print("<br>");
$gabung1 = implode("-",$hasil);
$gabung2 = join("-",$hasil);
print("<b>Setelah implode:</b><br>");
print_r($gabung1);
print("<br>");
print("<b>Setelah join:</b><br>");
print($gabung2);
print("<br><br>");
$teks2 = "17.7.2005";
$apisah1 = split('[/.-]',$teks2);
print("Teks Asli: $teks2 <br>");
print_r($apisah1);
print("<br><br>");
$teks3 = "PEMROGRAMAN PHP";

$apisah2 = preg_split('//',$teks3,-1,PREG_SPLIT_NO_EMPTY);
$banyak = sizeof($apisah2);
print("Teks Asli: $teks3 <br>");

print("<b>Setelah preg_split:</b><br>");
$i=0;
while($i<=$banyak)
{
print($apisah2[$i]." ");
$i++;
}
?>
</body>
</html>

Program 4.9 : array_multidimensi.php

<?
$data = @array(
Array ( Judul =>"Keamanan Jaringan Internet",
Pengarang=>"Onno W Purbo",
),
Array (Judul =>"Pengenalan SQL",
Pengarang => "Sri Wahyuni",
),
Array (Judul =>"Network Security",
Pengarang =>"Tom Thomas",
)
);
Echo"Array multidimensi<br><br>";
Foreach ($data as $val)
{
Foreach($val as $key =>$data2)
{
Echo"$key : $data2<br>";
}
Echo"<br>";
}
?>
D. Tugas Praktikum
1. Korban gempa bumi yang terjadi di yogyakarta diberi bantuan oleh pemerintah
berdasrkan usia. Jika usia balita, biayanya adalah Rp.10.0000 per hari. Diatas
balita biaya Rp.20.000 perhari. Buatlah program untuk menentukan jumlah biaya
yang harus dikeluarkan pemerintah untuk satu keluarga yang beranggotakan 3
balita dan 2 diatas balita perbulan.
Buatlah sebuah program dengan menggunakan array untuk menghasilkan output
seperti dibawah

MODUL 5
KONEKSI PHP DENGAN MySQL
A. Tujuan Praktikum
1. Mengenalkan bagaimana melakukan koneksi database dari PHP ke MySql.
2. Membuat Database dengan menggunakan MySql.
3. Mengakses database menggunakan PHP.
4. Melakukan query data menggunakan PHP.
5. Membuat form dari PHP dan melakukan query ke MySql
6. Melakukan input data dari PHP ke MySql.
C. Dasar Teori
Pada bagian ini akan dibahas tentang langkah-langkah yang diperlukan untuk
melakukan akses ke basis data MySQL. Tapi sebagai catatan, PHP harus memiliki
ekstensi koneksi ke basis data MySQL agar dapat menggunakan fungsi-fungsi koneksi
ke basis data MySQL. Sebelum melakukan koneksi ke database, alangkah baiknya
terlebih dahulu membuat sebuah database.
mysql > create database bukutamu;

mysql > use database bukutamu
mysql > create table tamu (
-> no_tamu int(3) not null auto_increment primary key,
-> nama varchar(30) not null,
-> email varchar(40) not null,
-> pesan text not null);
mysql >insert into tamu values('','dudung','dung@yahoo.com','lewat
console');
mysql > insert into tamu values('','jojon','jon@yahoo.com','lewat
console');
1. Membuka koneksi ke basis data MySQL

Sebelum mampu mengakses basis data server, terlebih dahulu kita harus
membuka koneksi ke basis data. Untuk koneksi ke MySQL server, digunakan
perintah :
Program 5.1 : koneksi.php
<?php
$hostname = "localhost";//hostname
$username = "root"; //username untuk login ke mysql
$password = ""; //password untuk login ke mysql
$connect=mysql_connect($hostname, $username, $password);
if(connect){
echo “berhasil”;
}else{
echo “gagal”;}
?>
Buatlah sebuah file koneksi yang menghubungkan ke database bukutamu yang

telah dibuat.
Program 5.2 : koneksi_bukutamu.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("bukutamu");
?>

<?php
echo "<h3>Data Tamu</h3>";
include "koneksi_bukutamu.php";
$tampil=mysql_query("SELECT * FROM tamu ORDER BY no_tamu DESC");
<?
$total=mysql_num_rows($tampil);
while
If(!mysql_select_db($database,
($data=mysql_fetch_array($tampil))
$mysql_link))
{ {
echoecho
"<p>Nama
mysql_error();
: $data[nama]<br>";
echoexit;
"E-mail : $data[email]<br>";
echo
} "pesan : $data[pesan]<br>";?>
<a$myquery
href="update.php?no_tamu=
= "SELECT * FROM nama_tabel";
<?php echo $data[no_tamu];?>"> Update</a>
<?php
if (!$mysql_result = mysql_query($myquery, $mysql_link))
<html>
} {
<head>
34 ?> echo mysql_error(); Modul Praktikum Pemrograman Web
<title>Form Bukutamu</title>
<?php exit;
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
mysql_close();
}
</head>
?>
<?php
include "koneksi_bukutamu.php";
$nama=$_POST['nama'];
$email=$_POST['email'];
$pesan=$_POST['pesan'];
$input="INSERT INTO
tamu(nama,email,pesan)VALUES('$nama','$email','$pesan')";
$hasil=mysql_query($input);
<?php
if($hasil)
<body>
$myquery = " UPDATE nama_tabel SET field1=$field1, ";
<?php
{
<form method="post" action="input_tamu.php">
$myquery .= " field2=$field2, field3=$field3";
$myquery
echo
Nama "Proses
: <input =input
"DELETE FROMname="nama"
nama_tabel";
berhasil";
type="text" id="nama"></br>
$myquery .= " WHERE kriteria";
$myquery
echo
Email "ingin .=
: <input "WHERE
lihat kriteria";
hasil <a href='tampil_tamu_user.php'>disini</a>";
type="text" name="email" id="email"><br>
}
Pesan : <br><textarea name="pesan" id="pesan" rows="5"
if
if (!$mysql_result
else (!$mysql_result =
cols="25"></textarea><br> = mysql_query($myquery,
mysql_query($myquery, $mysql_link))
$mysql_link))
{
{ {
<input type="submit" name="submit" value="kirim">
Modul Praktikum Pemrogramanecho mysql_error();
Web 35
echoecho
</form> mysql_error();
"Proses Input gagal";
Prodi Teknik Informatika exit;
UPN “Veteran” Yogyakarta
} exit;
</body>
}
}
mysql_close();
</html>
?>
?>
Pada contoh diatas kita akan mengubah record ke tabel nama_tabel field1, field2
dan field3 dengan nilai variabel $field1, $field2 dan $field3 dan kriteria dijabarkan
dalam variabel kriteria. Biasanya variabel ini adalah variabel eksternal, misalnya
dari form HTML.
D. Latihan
Membuat Situs Rental DVD
1. Buat database dengan MySQL dengan nama toko_dvd
mysql > CREATE DATABASE toko_dvd;
2. Buat tabel film dalam database diatas dengan field-field

mysql > USE toko_dvd;
mysql > CREATE TABLE dvd
mysql > (
mysql > id_film INT (6) NOT NULL AUTO_INCREMENT,
mysql > judul CHAR (100),
mysql > jenis CHAR (20),
mysql > nama_gmb CHAR (200),
mysql > sutradara CHAR (30),
mysql > pemain_utama CHAR (30),
mysql > harga INT (6),
mysql > thn_terbit YEAR(4),
mysql > PRIMARY KEY (id_film)
mysql > );
3. Ketik ulang script_script berikut ini :

File basisdata.php
<?
$database = "toko_dvd";
$hostname = "localhost";
$username = "root";
$password = "";
//koneksi dengan server database mysql

$sambungan = mysql_connect($hostname, $username, $password);
//pilih database yang akan digunakan
mysql_select_db($database, $sambungan);
?>
File index.php
<html>
<head>
<title>toko film serba ada</title>
</head>
<body>
<center><h2>Selamat Datang di Toko Film Serba ada</h2><hr></center>
<p><h3>Pilih kategori film yang anda cari</h3></p>
<ul>
<?
//menyertakan isi dari suatu file
include ("basisdata.php");
//mengambil data
$query = "SELECT DISTINCT jenis FROM dvd";
$hasil_mysql = mysql_query($query, $sambungan);
//mengambil data setiap baris
while($baris = mysql_fetch_row($hasil_mysql))
{
$jenis = $baris[0];
print("<li> <a href=kategori.php?jenis=$jenis>$jenis</a>");
}
?>
</ul>
Lanjutan File index.php

<center>
<hr><a href=kelola01.php>pengelolaan</a><br>
Alamat : Jl. Pelan 2 Banyak Anak-Anak<br>
e-mail : <a href=mailto:dvdstore@serba-ada.com>dvdstore@ serba-
ada.com</a>
</center>
</body>
</html>
File kategori.php
<html>
<head>
</head>
<body>
<center><h2>Selamat Datang di Toko Film Serba ada </h2><hr></center>
<?
print("<h3>Berikut ini daftar film berdasarkan kategori
$jenis</h3>");
print("<table border=1>");
$query = "SELECT id_film,judul,nama_gmb,sutradara FROM dvd ";

$query .= "WHERE jenis='$jenis'";
{
$id_film = $baris[0];
$judul = $baris[1];
$nama_gmb = $baris[2];
$sutradara = $baris[3];
print("<tr><td><img src=./image/$nama_gmb height=50></td>");

print("<td><b><a href=detail.php?id=$id_film>$judul</a></b>
<br>$sutradara</td></tr>");
}
print("</table>");
?>
<center><hr>
ada.com</a>
</center>
</body>
</html>
File detail.php
<html>
<head>
</head>
<body>
<center><h2>Selamat Datang di Toko Film Serba Ada</h2><hr></center>
<h3>Berikut ini detail film yang anda pilih</h3>
<table border=1>
<?
$query = "SELECT * FROM dvd WHERE id_film=$id";


Lanjutan File detail.php

$baris = mysql_fetch_row($hasil_mysql);
$judul = $baris[1];
$jenis = $baris[2];
$pemain_utama = $baris[5];
$harga = $baris[6];
$sekilas = $baris[7];
$thn_terbit = $baris[8];
?>
<tr valign="top">
<td><img src=./image/<?print("$nama_gmb");?> height=150></td>
<td>
<p>JUDUL<br><i><b><?print("$judul");?></b></i></p>
<p><i><b><?print("$sekilas");?></b></i></p>
<p>JENIS<br><i><b><?print("$jenis");?></b></i></p>
<p>SUTRADARA<br><i><b><?print("$sutradara");?></b></i></p>
<p>PEMAIN UTAMA<br><i><b><?print("$pemain_utama");?></b></i></p>
<p>HARGA<br><i><b>Rp <?print("$harga");?></b></i></p>
<p>TAHUN TERBIT<br><i><b><?print("$thn_terbit");?></b></i></p>
</td>
</tr>
</table><br>
<center><hr>
ada.com</a>
</center>
</body>
</html>
File kelola01.php
<html>
<head>
<title>pengelolaan data toko film serba ada</title>
</head>
<body>
<center><h2>Pengelolaan Toko Film Serba Ada</h2><hr>
Lembar berikut digunakan untuk pengelolaan data Film.
Untuk menambah data tekan tombol <font
Color="#FF0000">TAMBAH</font>
sedangkan untuk mengubah atau menghapus suatu data pilih terlebih
dahulu data yang diinginkan kemudian baru tekan tombol <font
color="#FF0000">UBAH</font> atau <font
color="#FF0000">HAPUS</font>.</font>
<form action=kelola02.php method=post>

<select name=id size=6>
<?
include("basisdata.php");
$query = "SELECT * FROM dvd ORDER BY jenis";

{
$judul = $baris[1];
$jenis = $baris[2];
$pemain_utama = $baris[5];
$harga = $baris[6];

Lanjutan File kelola01.php

echo("<option value=$id_film>($jenis) $judul");
}
?>
</select><br><br>
<input name=action type=submit value=TAMBAH>
<input name=action type=submit value=UBAH>
<input name=action type=submit value=HAPUS>
</form>
<hr>
ada.com</a>
</center>
</body>
</html>
File kelola02.php
<html>
<head>
</head>
<body>
<center><h2>Pengelolaan Toko Film Serba Ada</h2><hr>
<h3><?print("$action");?> DATA FILM</h3></center>
<form method=post action=proses.php>

<?
if($action == "TAMBAH")
{
$id_film = "";
$judul = "";
$jenis = "";
$nama_gmb = "";
$sutradara = "";
$pemain_utama = "";
$harga = "";
$thn_terbit = "";
}
else
{
$query = "SELECT * FROM dvd WHERE id_film = '$id'";
$baris = mysql_fetch_row($hasil_mysql);
$judul = $baris[1];
$jenis = $baris[2];
$pemain utama = $baris[5];
$harga = $baris[6];
$sekilas = $baris[7];
}
print("<input type=hidden name=id_film value=$id>
<input type=hidden name=action value=$action>");
?>

Lanjutan File kelola02.php
Judul Film : <input type=text name=judul size="20" maxlength="30"
value="<?print("$judul");?>"><br>
Sekilas Isi : <textarea name=sekilas><?print("$sekilas");?>
</textarea><br>
Jenis Film : <input type=text name=jenis size="20" maxlength="20"
value="<?print("$jenis");?>"><br>
Nama File Gambar : <input type=text name=nama_gmb size="20"
maxlength="20" value="<?print("$nama_gmb");?>"><br>
Nama Sutradara : <input type=text name=sutradara size="30" maxlength="30"
value="<?print("$sutradara");?>"><br>
Nama Pemain_Utama : <input type=text name=penulis size="30"
maxlength="30" value="<?print("$pemain_utama");?>"><br>
Harga : Rp <input type=text name=harga size="20" maxlength="20"
value="<?print("$harga");?>"><br>
Tahun Terbit : <input type=text name=thn_terbit size="20" maxlength="20"
value="<?print("$thn_terbit");?>"><br>
<input type=submit value="PROSES" name="submit">
</form>
<center><hr>
ada.com</a>
</center>
</body>
</html>
File proses.php
<html>
<head>
</head>
<body>
<center><h2>pengelolaan data toko film serba ada</h2><hr></center>
<?
switch($action)
{
case "TAMBAH":
$query = "INSERT INTO dvd (judul,jenis,nama_gmb,sutradara,
pemain_utama,harga,sekilas,thn_terbit)";
$query .= "VALUES ('$judul','$jenis','$nama_gmb','$sutradara',
'$pemain_utama','$harga','$sekilas','$thn_terbit')";
$pesan = "data berhasil ditambahkan";
break;
case "UBAH":
$query = "UPDATE dvd SET judul='$judul',jenis='$jenis'";
$query .= "nama_gmb='$nama_gmb',sutradara='$sutradara',";
$query .= "pemain_utama='$pemain_utama',sekilas='$sekilas',";
$query .= "harga='$harga',thn_terbit='$thn_terbit' ";
$query .= "WHERE id_film like $id_film";
$pesan = "data berhasil diubah";
break;
case "HAPUS":
$query = "DELETE FROM dvd WHERE id_dvd like $id_dvd";
$pesan = "data berhasil dihapus";
break;
}
print("<h3>$pesan</h3>");
?>

Lanjutan File proses.php

<a href=index.php>kembali ke halaman muka</a>
<center>
<hr>
ada.com</a>
</center>
</body>
</html>
D. Tugas Praktikum
1. Buatlah latihan PHP diatas.
2. Dengan melanjutkan program 5.1 s/d 5.6 tersebut diatas, buatlah file ubah.php
dan hapus.php sehingga program tersebut menjadi lebih lengkap.
3. Buatlah halaman untuk pencarian data film berdasarkan kategori berikut ini :
a. Berdasar Bintang Film
b. Berdasar Pemain Utama
c. Berdasar Sutradara
d. Berdasar tahun terbit

MODUL 6
SESSION
A. Tujuan Praktikum
1. Mampu mengaplikasikan fungsi session dengan baik.
2. Mampu membuat halaman situs dengan mempergunakan fungsi session.
C. Dasar Teori
Session merupakan sesi pada saat user mengunjungi situs anda. Session
sendriri berupa sekumpulan variable dengan isi tertentu, yang akan terus ada selama
browser dibuka (atau dapat menghilangkannya jika diinginkan). Isi dari variable
tersebut dapat dimanfaatkan untuk berbagai kepentingan, misalnya sebagai penanda
bahwa user telah melakukan login sehingga ia berhak untuk membuka halaman-
halaman yang dikhususkan untuk member. Beberapa variabel yang dapat dijalankan
misalnya : session_start(), session_destroy(), session_register();
Ketika memulai sebuah session, yang dilakukan PHP adalah :
1. Menghasikan sederet angka yang disebut Session ID Number. Angka yang
dihasilkan sangat panjang dan kemungkinan sangat kecil untuk user dapat
menebaknya. Session ID Number ini disimpan dalam sebuah variable yang
bernama PHPSESSID.
2. Menyimpan variable yang anda inginkan selama sesi berlangsung kedalam sebuah
file di sever. Direktori penyimpanan dari file ini sesuai dengan yang tertulis pada
session.path_session, yang ada pada php.ini.
3. PHP mengirimkan Session ID Number kesemua halaman. Jika cookies yang ada di
user ON, PHP akan mengirimkan Session ID Number ini lewat cookies tersebut.
Jika cookies tidak aktif, maka pengiriman Session ID Number dilakukkan lewat
hidden variable dengan menggunakan method POST.
4. Mendapatkan variable-variabel yang ada dan meletakkannya ke dalam variable
$_SESSION.
Catatan penting : variabel session_start() harus diletakkan di awal script php
1. Menggunakan variable session_start()

Program 7.1 : session.php
<?php
session_start();
?>
<html>
<head>
<title>Halaman ini menggunakan fungsi session</title>
</head>
<body>
<?php
echo “<br>Selamat dating, ID session anda adalah :”.session_id();
?>
</body>
</html>
Berikut merupakan program session start dan memanfaatkannya pada

session2.php

Session
<?php
session_start();
?>
<html>
<head>
<?php
<title>Memulai Session</title>
session_start();
</head>
?>
<body>
<html>
<?php
<head>
$_SESSION['sukses'] = 'OK!';
<title>Session ke-2</title>
echo "Session telah dimulai!<br>";
</head>
echo "Isi dari variabel "."$"."_SESSION['sukses'] telah
<body>
diisi:".$_SESSION['sukses']."<br>";
<?php
CREATE DATABASE ini
echo "Session latihan1;
akan masih terus berlaku setelah Anda
USEecho "Jika
latihan1;
mengklik Anda memulai
button session
Ke halaman dari halaman mulaises.php, maka: <br>";
berikut<br>";
echo "Isi
CREATE TABLEdari variabel "."$"."_SESSION['sukses'] berisi: ".
members(
$_SESSION['sukses'];
idecho
int(4) NOT action='session2.php'
"<form NULL auto_increment, method='POST'>";
44 unset($_SESSION['sukses']);
username varchar(65),
echo "<input Modul Praktikum
type='submit' value='Ke Pemrograman
halaman Web
berikut'>";
password varchar(65),Prodi Teknik Informatika UPN “Veteran” Yogyakarta
?>
</body>
PRIMARY KEY (`id`));
</html>
Session
<html>
<body>
<table width="300" border="0" align="center" cellpadding="0"
cellspacing="1" bgcolor="#CCCCCC">
<tr>
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1"
bgcolor="#FFFFFF">
<tr>
<td colspan="3">
<strong>Member Login</strong>
</td>
</tr>
<tr>
<td width="78">Username
</td>
<td width="6">:</td>
<td width="294">
<input name="myusername" type="text" id="myusername">
</td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td>
<input name="mypassword" type="text" id="mypassword">
<?php
</td>
$host="localhost"; // Host name
</tr>
$username=""; // Mysql username
<tr>
$password=""; // Mysql password
<td> </td>
$db_name="latihan1"; // Database name
<td> </td>
$tbl_name="members"; // Table name
<td><input type="submit" name="Submit" value="Login">
// Connect to server and select databse.
</td>
mysql_connect("$host", "$username", "$password")or die("cannot connect");
</tr>
mysql_select_db("$db_name")or die("cannot select DB");
</table>
// username and password sent from signup form
</td>
$myusername=$_POST['myusername'];
</form>
$mypassword=$_POST['mypassword'];
</tr>
Modul Praktikum Pemrograman Web * FROM $tbl_name WHERE username='$myusername' and 45
$sql="SELECT
</table>
password='$mypassword'";
</body>
$result=mysql_query($sql);
</html>
Session
Lanjutan Program 7.5 : checklogin.php
// Mysql_num_row is counting table row
$count=mysql_num_rows($result);
// If result matched $myusername and $mypassword, table row must be 1 row

if($count==1){
//Register $myusername,$mypassword and redirect to
file //"login_success.php"
session_register("myusername");
session_register("mypassword");
header("location:login_success.php");}
else {echo "Wrong Username or Password";
}?>
Program 7.6 : login_success.php

<?php
session_start();
if(!session_is_registered(myusername)){
header("location:main_login.php");
}?>
<html>
<body>Login Successful
<a href="logout.php">logout</a></body></html>
Program 7. 7 : logout.php
<?php
session_start();
session_destroy();
?>
Langkah langkah kerja program 7.4 s.d 7.7

1. Menampilkan halaman login dari main_login.php
2. Jika usertelah login dengan ID dan password yang benar, lakukan pengaturan
variable session.
3. Ketika user mengunjungi halaman yang khusus member, dilakukan pengujian,
apakah variable session telah diatur dengan semestinya.
4. Jika ‘ya’ maka tampilkan halaman tersebut.
5. Jika ‘tidak’, maka kembali ke halaman login.
6. Setalah berhasil masuk ke halaman member, untuk keluar dengan cara
mengklik link ‘logout’, dengan begitu session akan ditutup.
D. Tugas
Buatlah form login untuk situs Rental DVD Latihan D pada Modul 5, kemudian berilah
fungsi session untuk tiap halamannya, sehingga jika ingin membuka halaman selain
halaman login akan ada perintah untuk login terlebih dahulu atau halaman akan
dialihkan ke halaman login

MODUL 7
JAVASCRIPT
A. Tujuan Praktikum
1. Memahami tentang struktur javascript
2. Memahami tentang pemrograman di javascript
3. Memahami tentang pemakaian obyek dan form
C. Dasar Teori
1. Sekilas tentang JavaScript
Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di
sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi
semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan
untuk memvalidasi masukanmasukan pada formulir sebelum formulir dikirimkan ke
server.
Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda.
Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien),
sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang
dijalankan oleh klien.
2. Struktur JavaScript
Struktur dari JavaScript adalah sbb :
<SCRIPT LANGUAGE = ”JavaScript”>
<!- -
Penulisan kode javascript
// - - >
</SCRIPT>
Keterangan :
Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak
mengenali JavaScript maka browser akan memperlakukannya sebagai komentar
sehingga tidak ditampilkan pada jendela browser.
3. Dengan menggunakan Tag <SCRIPT>

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

2
</SCRIPT>
</HEAD>
</HTML>
Contoh diatas menunjukkan program Javascript diketik diantara tag <HEAD> dan
</HEAD>.
Jika contoh JavaScript diatas diketikkan diantara tag <BODY>, juga akan memiliki
hasil yang sama. Tetapi karena bagian heading akan dibaca terlebih dahulu
dibandingankan dengan bagian <BODY>, menempatkan semua fungsi maupun
variabel global pada bagian heading adalah praktek pemrograman yang baik.

JAVASCRIPT
Perhatian : Tidak semua browser mampu memproses JavaScript, sehingga untuk
menghindari kesalahan penampilan pada browser tersebut, anda perlu
mengetikkan JavaScript diantara tag komentar HTML sebagai berikut :
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<SCRIPT language="Javascript">
function test (val1,val2)
{
document.write("<br>"+"Perkalian : val1*val2 "+"<br>")
document.write(val1*val2)
document.write("<br>"+"Pembagian : val1/val2 "+"<br>")
<HTML>
document.write(val1/val2)
<HEAD>
<HTML> document.write("<br>"+"Penjumlahan
<TITLE>Pemasukan
<TITLE>Skrip Data</TITLE>
JavaScript</TITLE>
: val1+val2 "+"<br>")
document.write(val1+val2)
<HEAD> </HEAD>
<HEAD>
document.write("<br>"+"Pengurangan : val1-val2 "+"<br>")
<BODY> <TITLE>Contoh Program
<BODY> <TITLE>Alert Javascript</TITLE>
Box</TITLE>
document.write(val1-val2)
</HEAD><SCRIPT
</HEAD>Percobaan
LANGUAGE memakai
= "JavaScript">
JavaScript:<BR>
<BODY> document.write("<br>"+"Modulus
<SCRIPT document.write("Semoga sukses!");
<BODY> </SCRIPT>
48 //--> //-->
</SCRIPT> Modul Praktikum Pemrograman Web
<input type="button" name="button1" value="arithmetic"
</BODY><BODY onload=pesan()>
</SCRIPT>
</SCRIPT> Prodi Teknik Informatika UPN “Veteran” Yogyakarta
</BODY>onclick=test(9,4)>
</HTML></BODY>
</BODY>
</HTML>
</HTML>
</HTML>
JAVASCRIPT
<HTML>
<HEAD>
</HEAD>
function test () {
val1=window.prompt("Nilai I :")
val2=window.prompt("Nilai II :")
document.write("<br>"+"val1==val2"+"<br>")
document.write(val1==val2)
document.write("<br>"+"val1!=val2"+"<br>")
document.write(val1!=val2)
document.write("<br>"+"val1&gtval2"+"<br>")
document.write(val1>val2)
document.write("<br>"+"val1&ltval2"+"<br>")
document.write(val1<val2) }
</SCRIPT>
<BODY>
Modul Praktikum Pemrograman Web type="button" name="button1" value="relational"
<input 49
Prodi Teknik Informatika UPN onclick=test()>
“Veteran” Yogyakarta
</BODY>
</HTML>
JAVASCRIPT
Seleksi kondisi (if..else)

<HTML>
<HEAD>
<TITLE>Contoh if-else</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">

</SCRIPT>
</BODY>
</HTML>
Penggunaan operator switch untuk seleksi kondisi

<HTML>
<HEAD>
</HEAD>
function test ()
{
val1=window.prompt("Input Nilai (1-5):")
switch (val1)
{
case "1" :
document.write("bilangan satu")
break
case "2" :
document.write("bilangan dua")
break
case "3" :
document.write("bilangan tiga")
break
case "4" :
document.write("bilangan empat")
break
case "5" :
document.write("bilangan lima")
break
default :
document.write("bilangan lainnya")
}
}
</SCRIPT>
<BODY>
<input type="button" name="button1" value="switch"
onclick=test()>
</BODY>
</HTML>

JAVASCRIPT
Pemakaian looping < for >

<HTML>
<HEAD>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>
Pemakaian looping < do..while >

<HTML>
<HEAD>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>
Pemakaian looping < while >

<HTML>
<HEAD>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>

JAVASCRIPT
3. PEMBUATAN FORM
Form input :
<html>
<head> </head>
function test () {
var val1=document.kirim.T1.value
if (val1%2==0)
document.kirim.T2.value="bilangan genap"
else
document.kirim.T2.value="bilangan ganjil"
}
</SCRIPT>
<body>
<form method="POST" name="kirim">
<p>BIL <input type="text" name="T1" size="20">
MERUPAKAN BIL <input type="text" name="T2" size="20">
</p>
<p><input type="button" value="TEBAK" name="B1" onclick=test()>
</p>
</form>
</body>
</html>
Form button :
<HTML>
<HEAD>
<TITLE>Objek document</TITLE>
</HEAD>
<BODY>

</SCRIPT>
<H1>TES</H1>
<FORM>
<INPUT TYPE = "BUTTON"
VALUE = "Latar Belakang Hijau"
onClick = "ubahWarnaLB('GREEN')">
VALUE = "Latar Belakang Putih"
onClick = "ubahWarnaLB('WHITE')">
VALUE = "Teks Kuning"
onClick = "ubahWarnaLD('YELLOW')">
VALUE = "Teks Biru"
onClick = "ubahWarnaLD('BLUE')">
</FORM>

</SCRIPT>
</BODY>
</HTML>

JAVASCRIPT
E. TUGAS :
1. Buat halaman html untuk mengkonversi nilai angka menjadi nilai huruf dengan
menggunakan javascript.
Konversi :
0-40 = E
41-55 = D
56-70 = C
71-80 = B
81-100 = A
2. Buat halaman html untuk menampilkan aplikasi program kalkulator sederhana

dengan menggunakan javascript.
Bil 1 dan Bil 2 merupakan text box, dapat diisi angka, bila tombol + atau – atau x
atau / ditekan, maka akan keluar bilangan pada text box hasil, dimana bilangan ini
merupakan operasi arithmetic sesuai dengan tombol yang ditekan

MODUL 8
AJAX
A. Tujuan Praktikum
1. Memahami tentang struktur Ajax
2. Memahami tentang pemrograman di Ajax
3. Memahami tentang pemakaian Ajax dalam Pemrograman Web
C. Dasar Teori
1. AJAX
AJAX adalah singkatan dari “Asynchronous JavaScript and XML”, yang dibuat dari
serangkaian teknologi dengan berbagai kemampuan : JavaScript, XML dan sebuah
method komunikasi asinkron antara client dan server. AJAX itu sendiri
diperkenalkan oleh seorang pakar pembuat program khususnya pemrograman
berbasis web. Orang yang sangat berjasa tersebut tidak lain dan tidak bukan
adalah Rasmus Lerdorf, dari tangan dingin Rasmus Lerdorf ini pulalah beberapa
waktu yang lalu lahirlah PHP.
Untuk mengaplikasikan AJAX dalam website, yang dibutuhkan adalah browser
yang menyediakan layanan Javascript, dan komponen XMLHTTP bagi pengguna
Internet Explorer (IE), dan XMLHttpRequest untuk Firefox, Safary, Opera dan
browser lainnya. Syarat-syarat tersebut hampir pasti sudah terpenuhi, mengingat
pengguna internet banyak yang menggunakan IE dan Firefox.
Sebenarnya tidak ada hal baru dalam AJAX, karena yang digunakan adalah
teknologi javascript, yang notabene sudah lama digunakan. Oleh karena itu, bagi
yang sudah terbiasa dengan javascript, akan mudah sekali mempelajari AJAX.
Pembahasan ini tidak menekankan pada salah satu teknologi (Javascript, AJAX,
HTML, PHP), akan tetapi keseluruhan dari hal tersebut. Hal ini karena
penggunaan AJAX tidak hanya pada sisi client (browser), tapi juga melibatkan
respon dari server.
Dengan menggunakan konsep ini, page HTML bisa membuat koneksi secara
asinkron ke server dengan cara mengambil XML atau dokumen text. Selanjutnya
XML atau dokumen text ini akan digunakan oleh javascript untuk meng-update
atau memodifikasi Document Object Model (DOM) pada page HTML.
Untuk selanjutnya teknologi ini juga dikenal web remoting atau remote scripting.
Developer Web dapat mengkombinasikan plug in, java applets atau hidden frame
untuk mengemulasikan interaksi antara page HTML dengan dokumen XML. Dalam
teknologi Javascript telah disediakan sebuah object yaitu XMLHTTPRequest.
Object ini sudah banyak disupport oleh banyak browser seperti Internet Explorer,
Firefox, Opera, Netscape dan lain sebagainya.

AJAX
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>AJAX - Demo 1</title>
<script language="javascript">
function createRequest(){
var oAJAX = false;
try {
oAJAX = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
oAJAX = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
oAJAX = false;
}
}
if (!oAJAX && typeof XMLHttpRequest !=
'undefined') {
oAJAX = new XMLHttpRequest();
}
if (!oAJAX){
alert("Error saat membuat XMLHttpRequest!");
}else{
alert("XMLHttpRequest sukses dibuat!");
}
return oAJAX;
}
</script>
</head>
<body onload="javascript:createRequest();">
Halaman ini memangil function pembuatan class object XMLHttpRequest
56 <br />Jika gagal atau punModul Praktikum
berhasil Pemrograman
akan Web Alert message.
di tampilkan
</body> Prodi Teknik Informatika UPN “Veteran” Yogyakarta
</html>
AJAX
<head>
8859-1" />
<title>AJAX - Demo 1</title>
<script language="javascript">
function createRequest(){
var oAJAX = false;
try {
oAJAX = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
oAJAX = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
oAJAX = false;
}
}
if (!oAJAX && typeof XMLHttpRequest != 'undefined') {
oAJAX = new XMLHttpRequest();
}
if (!oAJAX){
alert("Error saat membuat XMLHttpRequest!");
}
return oAJAX;
function requestContent(){
oRequest = createRequest();
var url = "dataLoad.html";
// Buka komunikasi dengan server
oRequest.open("GET", url, true);
// menunggu respon dari server
oRequest.onreadystatechange = function () {
document.getElementById("divContent").innerHTML=
"<div align='center'>Menunggu Respon server</div>";
if (oRequest.readyState == 4) {
Modul Praktikum Pemrograman Web // baca data respon dari server 57
document.getElementById("divContent").innerHTML =
response;
}
AJAX
Lanjutan contoh2-responText.html)
// Send the request

oRequest.send(null);
</script>
<style type="text/css">

</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0"
cellpadding="3">
<tr>
<td>
Pemanfaatan class object XMLHttpRequest untuk
berkomunikasi dengan server <br />
<a href="#" onclick="javascript:requestContent();">
Click disini untuk load Data</a>
</td>
</tr>
<tr>
<td>
<div id="divContent"></div>
</td>
</tr>
</table>
</body>
</html>
dataLoad.html
<head>
8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

AJAX
<body>
<table width="500" border="0" cellpadding="3"
cellspacing="0" class="table">
<tr>
<td><strong>File dataLoad.html</strong><br />
Apapun isi content dari file ini akan di load dan di
tampilkan pada lokasi DIV content yang di
tuju. <br />
<br />
File yang di load ini bisa berupa file statis biasa,
ataupun file berisi content yang di proses
terlebih dahulu oleh server. </td>
</tr>
</table>
</body>
</html>
D. Tugas Praktikum
Buat program diatas dan kembangkan program tersebut untuk aplikasi aplikasi yang
lain

MODUL 9
STUDI KASUS
Perhatikan relasi antar table dan struktur table dibawah !!

Relasi Antar Tabel
Tabel Kategori Table Berita
*no_kategori *no_berita
nama kategori **no_kategori
**username
judul_berita
headline_berita
isi_berita
hari
Tabel Reporter tgl_berita
jam_berita
*username
password
nama_lengkap
email
no_hp
Gambar Relasi antar table

Struktur table
Struktur table kategori
Filed Type Length Extra Keyname

no_kategori int 3 Auto_increment Primary Key
nama_kategori varchar 30
*nama_kategori : Hiburan, Teknologi, Olahraga, dll..
Struktur table reporter
Field Type Length Extra Keyname

username varchar 30 Auto_increment Primary Key
password varchar 30
nama_lengkap varchar 50
email varchar 50
no_tlp varchar 20
Struktur table berita

Studi Kasus

HTML Dasar

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

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

HTML Dasar

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL 1

B. Alokasi waktu : 1 x pertemuan = 120 menit

1. Struktur Dokumen HTML

Langkah-langkah pembuatan aplikasi program :

Modul Praktikum Pemrograman Web 1

Program 1.3 : br.html

2 Modul Praktikum Pemrograman Web

Program 1.5 : Blockquote.html

6. Penggunaan Tag Center

Program 1.6 : pre.html

Program 1.7 : pre.html

Modul Praktikum Pemrograman Web 3

Program 1.8 : font.html

Program 1.9 : Link

<TABLE BORDER=b > … </TABLE>

4 Modul Praktikum Pemrograman Web

Program 1.10 : tabel.html

<FRAMESET ROWS=a> isi frame </FRAMESET> atau

url = universal resources locator

Modul Praktikum Pemrograman Web 5

Langkah-langkah pembuatan Frame

(1) Buka Notepad dan ketikkan teks berikut ini :

<FRAME SRC="latih_a.htm" NAME="frame_menu" NORESIZE>

(2) Save dan beri nama dokumen html tersebut index.html.

(4) Save dan beri nama dokumen html tersebut latih_a.html.

6 Modul Praktikum Pemrograman Web

Program 1.13 : latih_b.html

(6) Save dan beri nama dokumen html tersebut latih_b.html.

(8) Save dan beri nama dokumen html tersebut latih_c.html.

Program 1.15 : latih_d.html

(10) Save dan beri nama dokumen html tersebut latih_d.html.

Program1.16 : latih e.html

(12) Save dan beri nama dokumen html tersebut latih_e.html.

Modul Praktikum Pemrograman Web 7

Program 1.17 : gambar.html

8 Modul Praktikum Pemrograman Web

Program 1.20 : list.html

14. Form dan Input

Modul Praktikum Pemrograman Web 9

10 Modul Praktikum Pemrograman Web

Modul Praktikum Pemrograman Web 11

Program 1.23 : thanks.html

12 Modul Praktikum Pemrograman Web

Modul Praktikum Pemrograman Web 13

B. Alokasi Waktu : 1 x pertemuan = 1 x 120 menit

Modul Praktikum Pemrograman Web 14

Program 2.3 css external2 : external.html

18 Modul Praktikum Pemrograman Web

Modul Praktikum Pemrograman Web 19

20 Modul Praktikum Pemrograman Web

B. Alokasi Waktu : 1 x Pertemuan = 120 Menit

Ada tiga cara untuk menuliskan script PHP, yaitu :

Modul Praktikum Pemrograman Web 21

Program 3.3 : variabel.php

c. Menerima Masukan dari User

22 Modul Praktikum Pemrograman Web

Program 3.4 : masukan.php

program 3.5 : keluaran.php

Modul Praktikum Pemrograman Web 23

24 Modul Praktikum Pemrograman Web

26 Modul Praktikum Pemrograman Web

Modul Praktikum Pemrograman Web 27