Modul Praktikum Pemrograman Web I

MODUL PRAKTIKUM
PEMROGRAMAN WEB – I
Tonni Limbong, S.Kom.,M.Kom
Program Studi Sistem Informasi

FAKULTAS ILMU KOMPUTER
UNIVERSITAS KATOLIK SANTO THOMAS
MEDAN
2016
KATA PENGANTAR
Puji Syukur Penulis panjatkan kepada Tuhan Yang Maha Esa, atas berkat dan
karunia-Nya, Modul Praktikum Pemrograman Web - I ini dapat diselesaikan dan
sampai kepada para pengguna. Modul ini sangat singkat dan sederhana, hanya
membahas masalah dasar-dasar pembuatan web yang meliputi HTML, PHP,
Cascading Style Sheet (CSS), Javascript dan juga Database MySQL, yang sangat
berhubungan erat dengan mata kuliah Permograman Web II di semester
berikutnya.
Penulis juga sangat menyadari akan kelemahan dan kekurangan sebagai manusia
yang tak pernah luput dari kesilapan dan kekurangan pada penulisan dan
pembuatan modul ini, untuk itu dengan berlapang dada penulis dangat
mengharapkan saran-saran dan kritik yang sifatnya membangun dan demi
kesempurnaan modul ini terlebih dahulu penulis ucapkan terimakasih.
Disamping itu modul ini juga tidak akan pernah sampai kepada tangan pembaca
tanpa bantuan dan dukungan dari berbagai pihak, oleh karena itu penulis
mengucapkan dengan tulus terimakasih yang sebanyak-banyaknya bagi semua
pihak. Semoga bantuan dan kerja sama yang diberikan kepada penulis selama ini
semoga mendapatkan pahala dari Tuhan Yang Maha Pemurah dan Penyayang,
Amin.
Medan, September 2016

Penulis,
Tonni Limbong, S.Kom.,M.Kom
Sahabat paling baik dari kebenaran adalah waktu, musuhnya yang paing besar
adalah prasangka, dan pengiringnya yang paling setia adalah kerendahan hati.
(Caleb Charles Colton)
Kegagalan dapat dibagi menjadi dua sebab. Yakni, orang yang berpikir tapi tidak
pernah bertindak dan orang yang bertindak tapi tidak pernah berpikir. (W.A.
Nance)
Copy Right : Tonni Limbong, S.Kom,M.Kom i

DAFTAR ISI
Halaman
Kata Pengantar .......................................................................................... i
Daftar Isi ................................................................................................... ii
Modul 1 : HTML (HYPERTEXT MARKUP LANGUAGE) ..................................... 1
Modul 2 : LANJUTAN HTML (TABEL, FORM DAN FRAMESET) ......................... 8
Modul 3 : PHP (Hypertext Preprocessor) ...................................................... 19
Modul 4 : DECISION IF, CASE, INCLUDE DAN REQUIRE ................................ 29
Modul 5 : CASCADING STYLE SHEET (CSS) .................................................. 36
Modul 6 : JAVASCRIPT ................................................................................ 40
Modul 7 : DATABASE MYSQL ....................................................................... 45
Modul 8 : KONEKSI DATABASE MYSQL DENGAN PHP........................................ 52
Modul 9 : MERANCANG LAYOUT DESAIN WEBSITE ....................................... 59
Modul 10 : CONTOH WEBSITE SEDERHANA ................................................. 68
Daftar Pustaka ........................................................................................... L1
Modul Praktikum Pemrograman Web - I Unika ST. Thomas Medan
MODUL 1
HTML (HYPERTEXT MARKUP LANGUAGE)
1. ELEMEN DASAR HTML
<html>
<head>
<title>Judul Website</title>
<body>
Bagian untuk menuliskan Isi Program Web
</body>
</head>
</html>
2. <BODY>
Untuk mendesain body website (warna dan gambar) .
Atribut:
• Bgcolor (Warna)
• background (Gambar)
Contoh 1:
<html>
<head>
<body bgcolor=”Cyan”>
Ini menggunakan bgcolor
</body>
</head>
</html>
Contoh 2:
<html>
<head>
<body background=”coba1.jpg”>
Ini menggunakan background
</body>
</head>
</html>
3. <BR>
Untuk membuat baris baru gunakan <br>, spasi lebih dari satu akan
diabaikan.
Contoh:
<html>
<head>
Oleh : Tonni Limbong, S.Kom,M.Kom 1

<body>
Ini Baris Pertama <br>
Ini Baris Kedua
</body>
</head>
</html>
4. <P></P>
Digunakan untuk membuat paragraf, jika tanpa tag penutup hasilnya
seperti menggunakan 2 kali <br>
Atribut:
• align
Contoh:
<html>
<head>
<body>
<p align=”left”>Ini Rata Kiri </p>
<p align=”right”>Ini Rata Kanan</p>
<p align=”center”>Ini Rata Tengah </p>
<p align=”justify”>Ini Rata Kiri dan Kanan</p>
</body>
</head>
</html>
5. <HR>
Horizontal Line (Garis horizontal)
Atribut:
• Width
• Align
• Color
Contoh:
<html>
<head>
<title>Horizontal Line</title>
<body>
Ini Judul
<hr size=”4” color=”red”>
Selamat Datang di Website
</body>
</head>
</html>
6. <FONT></FONT>
Tag ini dapat digunakan untuk mengatur ukuran, warna dan jenis huruf
Atribut:

• Size
• Color
• Face
Contoh:
<html>
<head>
<title>Format FONT</title>
<body>
<Font color=”blue” size=”4” face =”arial narrow”>Aku Warna Biru
</Font><br>
<Font color=”blue” size=”6” face =”Tahoma”>Aku Warna Biru
</Font>
</body>
</head>
</html>
7. <H1></H1> …. <H6></H6>
Untuk membuat heading yang memberikan baris baru
Contoh:
<html>
<head>
<title>Heading</title>
<body>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
</body>
</head>
</html>
8. <B></B> atau <STRONG></STRONG>

Membuat huruf tebal.
Contoh:
<html>
<head>
<title>Huruf Tebal</title>
<body>
<B>HURUF TEBAL</B>
<STRONG>SAYA TEBAL JUGA</STRONG>
SAYA BIASA SAJA
</body>
</head>
</html>
9. <I></I> atau <EM></EM>

Membuat huruf miring
Contoh:
<html>

<head>
<title>Huruf Miring</title>
<body>
<i>HURUF MIRING</i>
<em>SAYA HURUF MIRING JUGA</em>
SAYA BIASA SAJA
</body>
</head>
</html>
10. <U></U>
Membuat huruf dengan garis bawah
Contoh:
<html>
<head>
<title>Huruf Underline</title>
<body>
<u>HURUF UNDERLINE</u>
SAYA BIASA SAJA
</body>
</head>
</html>
11. <IMG>
Menampilkan gambar
Atribut:
• src (letak sumber file gambar diambil)
• align (posisi letak gambar)
• width (lebar gambar dlm persen atau pixel)
• height (tinggi gambar dlm persen atau pixel)
• alt (keterangan gambar)
Contoh:
<html>
<head>
<title>Pemanggilan dan Penggunaan Gambar</title>
<body>
<img src=”coba1.jpg” width=”300” height=”300” alt=”gambar
bagus”><BR>
#Jika Gambar ada dalam Folder : GAMBAR
<img src=”gambar/coba1.jpg” width=”300” height=”300”
align=”center”>
</body>
</head>
</html>
12. <A></A>
Untuk membuat link
Atribut:

• href
• name
Contoh:
<html>
<head>
<title>Fungsi LINK</title>
<body>
<a href=”coba1.html”> Ke Halaman Coba 1</a>
<a href=”coba2.html”> Ke Halaman Coba 2</a>
</body>
</head>
</html>
Untuk bisa menjalankan Fungsi Link ini sebaiknya dibuat dulu file
coba1.html dan coba2.html dan disimpan dalam satu folder (folder yang
sama)
Memanggil Email.
<html>
<head>
<title>Fungsi Email</title>
<body>
<a href=”mail to : tonni.budidarma@gmail.com”> Kirim Ke Email
Tonni</a>
</body>
</head>
</html>
Menggunakan Anchor.
<html>
<head>
<title>Anchor</title>
<body>
<a name =”atas”>ke Atas
</a><br><br><br><br><br><br><br><br>
<a href =”#atas”>ke Atas </a>
</body>
</head>
</html>
13. <DIV></DIV> Membuat blok paragraph dengan baris baru pada akhir
paragraf (pengganti <p>, digunakan pada css)
Atribut:
• align (perataan paragraf) nilai left, right, center, justify
Contoh:
<html>

<head>
<title>Penggunaan DIV</title>
<body>
<div align=”justify”>Tonni Limbong, Web Server merupakan sebuah
perangkat lunak dalam server yang berfungsi menerima permintaan
(request) berupa halaman web melalui HTTP atau HTTPS dari klien yang
dikenal dengan browser web dan mengirimkan kembali (response) hasilnya
dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen
HTML. </div>
</body>
</head>
</html>
14. <SPAN></SPAN> Digunakan pada css untuk memberikan format pada

teks yang diblok, tanpa membuat baris baru.
<html>
<head>
<title>Penggunaan SPAN</title>
<body>
Lembaga<span style=”font:italic;color:red”>Pendidikan
Tinggi<span>KOMPUTER
</body>
</head>
</html>
15. <OL></OL> Order list (biasa dikenal dengan numbering)

Atribut:
• Type (jenis numbering), nilai: 1, A, a, I, i
Contoh
<html>
<head>
<title>Penggunaan Ordered List</title>
<body>
<ol type=”1”>
<li>Mangga
<li>Manggis
<li>Pisang
<li>Salak
</ol>
</body>
</head>
</html>
16. <UL></UL> Unorder List, biasa kita kenal dengan Bullet

Atribut:

• type (jenis bullet), nilai: disc, square, circle

<html>
<head>
<title>Penggunaan Unordered List</title>
<body>
<UL type=”disc”>
<li>Mangga
<li>Manggis
<li>Pisang
<li>Salak
</UL>
</body>
</head>
</html>

MODUL 2
LANJUTAN HTML (TABEL, FORM DAN FRAMESET)
1. <TABLE></TABLE>
Membuat table
Atribut pada Tabel <table></table>
• border
• align (perataan table)
• width
• height
• bgcolor
• cellpadding
• cellspacing
• background
Atribut pada Baris <tr></tr>

• align
• bgcolor
• width
• height
• rowspan (menggabungkan baris)
Atribut pada Kolom <td></td>

• align
• bgcolor
• width
• height
• Colspan (menggabungkan kolom)
Contoh 1:
<html>
<head><title>Penggunaan Tabel</title></head>
<body>
<table>
<tr><td>baris 1 kolom 1</td><td>baris 1 Kolom2</td></tr>
<tr><td>baris 1 kolom 1</td><td>baris 1 Kolom2</td></tr>
</table>
</body>
</html>
Contoh 2:
<html>
<head><title>Penggunaan Tabel Lanjut</title></head>
<body bgcolor="black">

<center>
<table border="1" cellspacing="0" cellpadding="1" width="70%"
bgcolor="yellow">
<tr bgcolor="cyan"><td rowspan="2">Nomor</td>
<td rowspan="2">Nama Dosen</td>
<td colspan="2" align="center">Pendidikan</td></tr>
<tr bgcolor="cyan"><td align="center">Sarjana</td>
<td>Magister</td></tr>
<tr><td>1</td>
<td>Tonni Limbong</td>
<td>Ada</td>
<td>Ada</td></tr>
<tr><td>2</td>
<td>Budi Raharjo</td>
<td>Ada</td>
<td>Tidak Ada</td></tr>
</table>
</center>
</body>
</html>
2. <FORM></FORM> Digunakan sebagai blok dari elemen-elemen form

seperti text,texarea.
Untuk mendesain sebuah form dapat menggunakan fungsi Table
agar semua element pada form dapat disusun dengan rapi
Atribut:
- name (nama form)
- action (file tujuan dimana form dikirim, digunakan pada server side)
- method (metode pengiriman, digunakan pada server side) nilai post,
get
3. ELEMENT PADA FORM

Tag ini teletak didalam blok tag form
Atribut:
- Type (jenis input) nilai text, checkbox, radio, hidden, button,
submit, reset, file, image
- Name (nama elemen)
- Value (nilai isian)
Contoh:
a. Input Text
Atribut:
- name

- type
- value (memasukkan data ke objek)
- size (panjang objek input text)
- maxlength (panjang character)
Contoh :
<html>
<head><title>Penggunaan Form</title></head>
<center>
<form name="inputdata" action="#simpan_dosen.php"
method="POST">
bgcolor="yellow">
<tr bgcolor="cyan">
<td colspan ="2" align="center">FORM INPUT DATA DOSEN</td>
</tr>
<tr><td Align="right">Nama Dosen :</td>

<td><input type="text" name="xnama" size="30"
maxlength="25"></td></tr>
</table>
</center>
</body>
</html>
b. Radio
Atribut:
- select (awal penggunaan pilihan radio)
- name
- size
- option (pilihan)
Contoh :
<html>
<center>
method="POST">
bgcolor="yellow">

<tr bgcolor="cyan">
</tr>
<tr><td Align="right">Pendidikan :</td>

<td><select size="1" name="xpend" size="1">
<option>Diploma</option>
<option>Sarjana </option>
<option>Magister</option>
<option>Doktor </option> </select>
</td></tr>
</table>
</center>
</body>
</html>
c. Check Box
Atribut:
- name
- type
- value
Contoh:
<html>
<center>
method="POST">
bgcolor="yellow">
<tr bgcolor="cyan">
</tr>
<tr><td Align="right">Pendidikan :</td>

<td><input type="checkbox"

name="xpend"value="Diploma">Diploma<br>
<input type="checkbox" name="xpend"
value="Sarjana">Sarjana<br>
<input type="checkbox" name="xpend"
value="Magister">Magister<br>
<input type="checkbox" name="xpend" value="Doktor">Doktor
</td></tr>
</table>
</center>
</body>
</html>
d. Hidden
Atribut:
- name
- type
- value
Contoh :
<html>
<center>
method="POST">
bgcolor="yellow">
<tr bgcolor="cyan">
</tr>
<tr><td Align="right">Ini Tidak Kelihatan :</td>

<td><input type="hidden" name="xlihat"value="Nilai Tidak
Terlihat">
</td></tr>
</table>
</center>
</body>
</html>

e. Button
Atribut:
- name
- type
- value
Contoh:
<html>
<center>
method="POST">
bgcolor="yellow">
<tr bgcolor="cyan">
</tr>
<tr><td Align="right">Klik Tombol</td>

<td><input type="button" name="xlihat"value="Kirim">
</td></tr>
</table>
</center>
</body>
</html>
f. Submit
Atribut:
- name
- type
- value
Contoh:
<html>
<center>


method="POST">
bgcolor="yellow">
<tr bgcolor="cyan">
</tr>

<td><input type="submit" name="xsubmit"
value="Submit">
</td></tr>
</table>
</center>
</body>
</html>
g. Reset
Atribut:
- name
- type
- value
Contoh :
<html>
<center>
method="POST">
bgcolor="yellow">
<tr bgcolor="cyan">
</tr>

<td><input type="reset" name="xreset" value="Reset">

</td></tr>
</table>
</center>
</body>
</html>
h. Textarea
Atribut:
- name
- rows
- cols
- value
Contoh :
<html>
<center>
method="POST">
bgcolor="yellow">
<tr bgcolor="cyan">
</tr>
<tr><td Align="right">Alamat :</td>

<td><textarea name="xalamat" cols="40"
rows="4"></textarea>
</td></tr>
</table>
</center>
</body>
4. <FRAMESET></FRAMESET> Membagi satu halaman web menjadi

beberapa halaman, halaman yang dibagi masih bisa dibagi lagi baik
berdasarkan baris maupun berdasarkan baris.

Atribut:
- name
- rows
- cols
- src
- target
- bordercolor
- frameborder
- marginheight
- marginwidth
- noresize
- scrolling
- src
Contoh:
Judul
Menu Link1
ISI WEB Link2
Footer
Untuk melengkapi desain di atas, harus dibutuhkan file antara lain :

1. index.html (sebagai layout utama yang dibuat dari frame)
2. Menu.html
3. judul.html
4. Footer.html
5. Link.html
Lalu yang dijalankan adalah index.html
Source code:
1. Index.html
<html>
<head><title>Pembuatan Frame</title></head>
<frameset rows="15%,70%,15%">
<frame name="atas" src="judul.html" frameborder="no">
<frameset cols="15%,70%,15%">
<frame name="kiri" src="menu.html" noresize scrolling="no" frameborder="no">
<frame name="isi" src="isi.html" noresize scrolling="no" frameborder="no">
<frame name="kanan" src="linku.html" noresize scrolling="no"
frameborder="no">
</frameset>
<frame name="bawah" src="footer.html" noresize scrolling="no"
frameborder="no">
</frameset>

</html>
2. menu.html
<html>
<head><title>Menu</title></head>
<body bgcolor="pink">
<table border="1" cellpadding="0" cellspacing="0" bgcolor="yellow">
<tr bgcolor="blue"><td align="center">
<font color="white" size="5"><b>MENU</b></font></td></tr>
<tr><td align="center"><a href="judul.html"
target="isi">Judul</td></tr>
<tr><td align="center"><a href="menu.html"
target="isi">Menu</td></tr>
<tr><td align="center"><a href="isi.html" target="isi">Isi</td></tr>
<tr><td align="center"><a href="footer.html"
target="isi">bawah</td></tr>
</table>
</body>
</html>
3. judul.html
<html>
<head><title>Pembuatan Frame</title></head>
<body bgcolor="yellow">
<font color="red" size="7">Website --KU</font>
</body>
</html>
4. footer.html
<html>
<marquee>Selamat Datang di Website ini. Copyright: tonnilimbong,
2016</marquee>
</body>
</html>
5. linku.html
<html>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="yellow">
<tr><td align="center"><a href="www.google.com" target="isi">Google</td></tr>
<tr><td align="center"><a href="www.ristekdikti.go.id" target="isi">RISTEK DIKTI</td></tr>
<tr><td align="center">
<a href="www.unimed.ac.id" target="isi">Univ. Negeri Medan</td></tr>
<tr><td align="center"><img src="tonni.jpg" width="100%" height="40%"></td></tr>
</table>
</body>
</html>

Hasilnya akan seperti berikut ini :

MODUL 3
PHP (Hypertext Preprocessor)
1. Dasar Penulisan PHP

Penulisan php diawali oleh boleh diletakkan dimana saja pada halaman html.
Penulisan lazimnya ditulis diantara blok
Bentuk Umum
<?php
…
?>
Contoh :
<html>
<head><title>Belajar PHP</title></head>
<body>
<?php
echo "Selamat Datang, Saya dengan Tonni Limbong";
?>
</body>
</html>
Hasilnya :
2. Variabel
Dengan variabel kita dapat menyimpan nilai atau informasi kedalam memori.
Variabel dapat kita gunakan berkali-kali sesuai kebutuhan dan nilainya dapat
kita ganti. Nama variable diawali tanda $. Misal $nama, $alamat. Nama
variable case sensitif (tidak mengenal perbedaan huruf besar dan kecil). $A
tidak sama dengan $a. Jenis variable bisa berupa bolean (true atau false)
string (huruf, angka dan karakter), integer (angka bulat), float atau double
(angka desimal/pecahan), array, object, NULL. Variabel string bisa diapit
tanda petik dua, atau petik satu.

Contoh :
<html>
<head>
<title> variabel dalam php </title>
</head>
<body>
<?
$variabel=1;
echo ("nilai variabel = $variabel<br>"); //variabel bertipe integer
$variabel=1+3.5;
echo ("nilai variabel = $variabel<br>"); //variabel bertipe double
$variabel="selamat datang di php";
echo ("nilai variabel = $variabel<br>"); //variabel bertipe string
?>
</body>
</html>
Variabel Angka
<html>
<head>
</head>
<body>
<?
$a=10;
$b=5;
Echo "hasilnya : ",$a+$b;
?>
</body>
</html>
3. Tanda Sambung
Untuk menyambung antara variabel yang satu dengan yang lain, atau
menggabungkan teks gunakan tanda titik.
<html>
<head>
</head>
<body>
<?
$nilai=10;

Echo “Nilai : “.$nilai;

?>
</body>
</html>
4. Operator
a. Operator Aritmatika
Operator aritmatika adalah operator yang digunakan untuk melakukan fungsi
matematika. Operator aritmatika dalam PHP :
Operator Operasi Penggunaan

+ Penjumlahan $a+$b
- Pengurangan $a-$b
* Perkalian $a*$b
/ Pembagian $a/$b
% Modulus $a%$b
++ Increment Penambahan 1
-- Decrement Pengurangan 1
Contoh:
<html>
<head>
<title> Operator Matematika </title>
</head>
<body>
<?
$x=10;
$y=2;
echo $x+$y."<br>";
echo $x*$y."<br>";
echo $x/$y."<br>";
echo $x%$y."<br>";
?>
</body>
</html>
b. Operator String
Hanya ada satu operator string, yaitu operator concatenation ( . ).
Contoh:
<?php
$a=”Hallo”;
$b= $a . “Selamat Datang di PHP”;
//$b berisikan “Hallo Selamat datang di PHP”
?>

c. Operator Bitwise
Operator bitwise dapat digunakan untuk membuat bit tertentu dari suatu
integer menjadi 1 atau 0.
Contoh Nama Hasil

$a & $b And Bit yang bernilai 1 pada $a dan $b akan diset 1
$a | $b Or Bit yang bernilai 1 pada $a atau $b akan diset 1
$a ^ $b Xor Bit yang bernilai 1 pada $a atau $b tetapi tidak
pada keduanya akan diset 1
~ $a Not Bit yang bernilai 1 pada $a akan diset 0, dan
sebaliknya.
$a << Shift Geser bit $a sebanyak $b langkah ke kiri (setiap
$b Left langkah berarti “kalikan dengan dua”).
$a >> Shift Geser bit $a sebanyak $b langkah ke kanan (setiap
$b right langkah berarti “bagikan dengan dua”).
Contoh :
<html>
<head>
<title> Operator Matematika </title>
</head>
<body>
<?
$x=2;
$y=2;
echo ($x==8) & ($y==2),"<br>";
echo ($x==8) | ($y==2),"<br>";
echo (~$x=1),"<br>";
echo ($x<<$y),"<br>";
?>
</body>
</html>
d. Operator Perbandingan
Contoh Nama Hasil

$a > $b Lebih dari True jika $a lebih besar dari $b
$a <= $b Kurang dari atau sama True jika $a lebih kecil dari $b atau $a
dengan sama dengan $b
< Kurang dari True jika $a lebih kecil dari $b
$a >= $b Lebih besar atau sama True jika $a lebih besar dari $b atau $a
dengan sama dengan $b

$a == $b Sama dengan True jika $a sama dengan $b

$a != $b Tidak sama dengan True jika $a tidak sama dengan $b
Operator perbandingan lainnya adalah operator trinary “?:” yang memiliki

bentuk : (ekspresi) ? (jika benar) : (jika salah);
Contoh :
<html>
<head>
<title> Operator Perbandingan </title>
</head>
<body>
<?
$x=2;
$y=3;
echo ($x<$y),"<br>";
echo ($x<=$y),"<br>";
echo ($x!=$y),"<br>";
echo ($x==$y),"<br>";
?>
</body>
</html>
e. Operator Logika
Contoh Nama Hasil

$a and $b And True jika $a sama dengan $b
$a && $b
$a or $b Or True jika salah satu $a atau $b adalah benar
$a || $b
$a xor $b Exclusive True jika salah satu $a atau $b adalah benar
Or dan tidak keduanya
!$a Not True jika $a tidak benar
Contoh:
<html>
<head>
<title> Operator Perbandingan </title>
</head>
<body>
<?
$x=2;
$y=2;
echo ($x==2) or ($y==3),"<br>";

echo ($x==2) and ($y==2),"<br>";
?>
</body>
</html>
F. Operator Persamaan
Operator Contoh Sama dengan
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
5. Perulangan
Perulangan berfungsi untuk mengulang alur program, misal kita bisa
membuat nomor dari 1 sampai 100 dengan perulangan tanpa mengetikan
satu persatu. Ada beberapa macam perulangan yaitu for, while, do..while,
foreach
Setiap bahasa pemrograman pasti memiliki mekanisme untuk melakukan

looping (perulangan) dalam code-nya. Bagaimana dengan PHP? PHP Sebagai
bahasa pemrograman tentu saja juga memiliki mekanisme ini. Statemen-
statemen looping pada PHP bertujuan untuk mengeksekusi suatu blok kode
yang sama selama beberapa kali dan bisa ditentukan perulangannya.
PHP memiliki beberapa statemen yang digunakan untuk operasi looping

yaitu:
1. While, yaitu perulangan pada suatu blok kode selama kondisi tertentu
masih terpenuhi.
2. Do...While, yaitu perulangan yang selalu dijalankan minimal sekali dan
baru kemudian mengulangi blok kode nya selama suatu kondisi terpenuhi.
3. For, yaitu perulangan yang sifatnya pasti pada suatu blok kode tertentu
dan sudah ditentukan sebanyak jumlah tertentu.
4. Foreach, yaitu perulangan khusus yang digunakan pada array.
a. WHILE
Statemen while akan mengeksekusi suatu blok kode "jika dan selama" suatu
kondisi looping terpenuhi.
Sintaks :
while (kondisi)
kode yang akan dieksekusi;
Contoh 1:

Berikut akan menunjukkan suatu looping yang akan selalu berjalan selama
nilai i adalah kurang dari atau sama dengan 5. Nilai i akan di-increase
dengan 1 selama looping berjalan.
<html>
<body>
<?php
$i=1;
while($i<=5)
{
echo "Angka : " . $i . "<br />";
$i++;
}
?>
</body>
</html>
Contoh 2:
<html>
<head><title>Looping dan Tabel</title></head>
<body>
<table border="1">
<?php
$i=1;
while($i<=5)
{
echo "<tr><td>Angka : " . $i . "</td></tr>";
$i++;
}
?>
</table>
</body>
</html>
b. DO … WHILE
Statemen do..while akan mengeksekusi suatu blok kode "minimal sekali"
dalam perjalanan looping dan kemudian akan berulang "selama" suatu
kondisi looping masih terpenuhi.
Sintaks :
do
{
kode yang di eksekusi;
}
while (kondisi);

Contoh 1 :
Berikut ini akan meng-increase nilai i minimal satu kali, dan kemudian akan
lanjut increment nilai i selama nilai i masih lebih kecil dari 5.
<html>
<body>
<?php
$i=0;
do
{
$i++;
echo "Angka : " . $i . "<br />";
}
while ($i<5);
?>
</body>
</html>
Contoh 2:
<html>
<body>
<table border="1">
<?php
$i=0;
do
{
$i++;
echo "<tr><td>Angka : " . $i . "</td></tr>";
}
while ($i<5);
?>
</table>
</body>
</html>
c. FOR
Statemen for digunakan ketika Anda mengetahui dengan pasti jumlah
perulangan yang harus dilakukan pada blok kode Anda.
Sintaks :
for (inisialisasi; kondisi; increment)
{
code yang hendak dieksekusi;
}

Statemen for memiliki tiga parameter. Parameter pertama digunakan untuk

inisialisasi variabel. Parameter kedua digunakan sebagai tempat menulis
kondisi loop dan parameter ketiga berisi increment yang diperlukan dalam
loop. Jika lebih dari satu variabel yang disertakanpada bagian inisialisasi atau
pada bagian increment maka hal tersebut harus dipisahkan dengan tanda
koma. Parameter kondisi harus mengevaluasi apakah kondisi terpenuhi atau
tidak.
Contoh :
Berikut adalah akan menampilkan string "Tonni Limbong” sebanyak 3 kali:
<html>
<body>
<?php
for ($i=1; $i<=3; $i++)
{
echo "Tonni Limbong <br />";
}
?>
</body>
</html>
d. Foreach
Statemen foreach digunakan untuk melakukan looping pada elemen-elemen
pada suatu array.
Sintaks :
foreach (ekspresi_array as $value)
{
kode yang hendak dieksekusi;
}
Contoh :
<html>
<body>
<?php
$arr = array("one", "two", "three");
reset ($arr);
while (list(, $value) = each ($arr)) {
echo "Value: $value<br>\n";
}
foreach ($arr as $value) {
echo "Value: $value<br>\n";
}
?>

</body>
</html
6. ARRAY
Dengan array, kita bisa membuat variabel dengan tipe yang dinamis, dimana
kita bisa menyimpan banyak data dalam satu variabel array.
Contoh:
<html>
<head><title>Array</title></head>
<body>
<?
$jen_kel=array(“Laki-laki”,”Perempuan”);
$status=array(“Tetap”,”Honor”);
$gol=array(“I”,”II”,”III”);
echo $jen_kel[0].”<br>”;
echo $status[1].”<br>”;
echo $gol[2].”<br>”;
?>
</body>
</html>

Modul Praktek Pemrograman Web-I Unika ST. Thomas Medan
MODUL 4
DECISION IF, CASE, INCLUDE DAN REQUIRE
a. Decision IF
Fungsi IF ini merupakan blok dari kode program yang dirancang untuk
melaksanakan tugas khusus. Fungsi banyak dilibatkan dalam pembuatan
suatu program, dengan tujuan :
1. Program menjadi lebih terstruktur, sehingga mudah dipahami dan mudah
dikembangkan
2. Dapat mengurangi pengulangan kode.
Bentuk IF ini juga ada beberapa macam, seperti banyak kondisi satu
keputusan , satu kondisi banyak keputusan dan banyak kondisi banyak
keputusan.
Contoh:
1. Banyak kondisi satu keputusan;
Jika Golongan=1 dan Status=Tetap maka Gaji_Pokok = 600000
Atau:
If (($gol==1)&&($status==”Tetap”))
{$gapok=600000;}
2. Satu kondisi Banyak keputusan;

Jika Golongan=1, maka Gaji_Pokok = 600000,Bonus=10% x Gaji
Pokok
Atau:
If ($gol==1)
{$gapok=600000;
$bonus=0.1*$gapok;}
3. Banyak kondisi Banyak keputusan;
Jika Golongan=3 atau Status=Tetap, maka Gaji_Pokok =
900000,Bonus=15% x Gaji Pokok,tunjangan=10% x Gaji Pokok
Atau:
If (($gol==3)||($status==”Tetap”))
{$gapok=900000;
$bonus=0.15*$gapok;
$tunjangan=0.1*$gapok;}
Contoh 1 : coba1.php
<form name="uji" action=’<?$php_self;?>’ method="post" >
<center>
<table border="0" width="50%" bgcolor="pink">
<tr bgcolor="cyan"><td colspan="3">
<p align="center"><b><font size="6">PROGRAM
IF</font></b></td></tr>

<tr><td width="25%" align="right">Kode Barang :</td>

<td width="25%"><input type="text" name="xkode" size="6"
value="<? echo("$xkode");?>"></td>
</tr>
<tr> <td width="25%" align="right">Jumlah :</td>
<td width="25%"><input type="text" name="xjlh" size="4"
value="<? echo("$xjlh");?>"></td>
</tr>
<tr><td width="50%" colspan="2" align="center"><input
type="submit" value="proses"name="uji"></td> </tr>
<?
if ($uji)
{ if ($xkode=="A001" )
{ $nama="Televisi";
$harga=1500000;
$a="bliss.jpg";}
Else if ($xkode=="A002" )
{ $nama="Kulkas";
$harga=1500000;
$a="azul.jpg"; }
$total=$harga*$xjlh;
} ?>
<tr> <td width="25%" align="right">Nama Barang :</td>
<td width="25%"><input type="text" name="xnama"
value="<?echo("$nama");?>" size="25"></td>
</tr>
<tr><td width="25%"align="right">Harga :</td>
<td width="25%"><input type="text" name="xharga" size="10"
value="<?echo("$harga");?>"></td>
</tr>
<tr><td width="25%" align="right">Total Harga :</td>
<td width="25%"><input type="text" name="xtotal"
size="xtotal" value="<?echo("$total");?>" ></td>
</tr>
<table border="1">
<tr><td>
<img src="c:\windows\web\wallpaper\<?echo("$a");?>"
width="300" height="200"> </td></tr>
</table>
</table>
</center>
</form>
b. Switch … Case…. Break

Switch…case … break memiliki fungsi hampir sama dengan fungsi IF

bedanya saat di IF kondisi bisa diberikan lebih dari satu sedangkan pada
case tidak bisa.
Bentuk Umum :
Switch ($variabel)
{case nilai_1:
{keputusan_1;
Keputusan_2;}
-
-
default :
{keputusan_1;
Keputusan_2;}
}
Contoh : coba2.php:
<form name="uji" action="<?$php_self;?>" method="post" >
<center>
CASE</font></b></td></tr>
value="<? echo("$xkode");?>"></td>
</tr>
<tr><td width="25%" align="right">Jumlah :</td>
</tr>
type="submit"
value="proses" name="uji"></td> </tr>
<?
if ($uji)
{switch ($xkode)
{case "A001" :
{ $nama="Televisi";
$harga=1500000;
$a="bliss.jpg";
break; }
case "A002" :
{ $nama="Kulkas";
$harga=1500000;

$a="azul.jpg";
break; }}
}
?>
<tr><td width="25%" align="right">Nama Barang :</td>
</tr>
value="<?echo("$harga");?>" ></td>
</tr>
size="xtotal" value="<?echo("$total");?>" </td>
</tr>
<table border="1">
<tr><td>
<img src="c:\windows\web\wallpaper\<?echo("$a");?>"
</table>
</table>
</center></form>
c. Include.
Include dipergunakan untuk memanggil sebuah file dari sebuah file yang lain
guna untuk dijalankan secara bersama-sama dalam satu page (halaman)
lebih mirip dengan sebuah procedure dengan tujuan untuk memecah
program menjadi beberapa bagian program untuk lebih mudah melihat
kesalahan pada sebuah program yang dirancang.
Statement Include akan menyertakan isi suatu file tertentu. Include dapat
diletakkan didalam suatu looping misalkan dalam statement for atau while.
Bentuk Umum:
Include (“nama_file.php”);
Contoh:
<?php
echo(“--------------------------------------<br>”);
echo(“PHP adalah bahasa scripting<br>”);
echo(“--------------------------------------<br>”);
echo(“<br>”);
?>

Contoh :
<?php
for ($b=1; $b<5; $b++)
{
include(“contoh1.php”);
}
?>
Untuk fungsi include biasanya File yang dibutuhkan ada minimal 2 buah file
dapat disimpan dalam 1 folder, khusus untuk contoh ini file disimpan dalam 1
folder.
1. bawah .php
2. coba.php
a. Source code Bawah.php

<hr size="20" color="gold">
<font color="red" size="7" face="arial narrow">
TONNI LIMBONG,S.KOM,M.KOM</FONT>
b. Source code coba2.php

<form name="uji" action="<?$php_self;?>" method="post"
><center>
CASE</font></b></td></tr>
value="<? echo("$xkode");?>"></td> </tr>
<tr><td width="25%" align="right">Jumlah :</td>
</tr>
type="submit"
value="proses" name="uji"></td> </tr>
<?
if ($uji)
{switch ($xkode)
{case "A001" :
{ $nama="Televisi";
$harga=1500000;
$a="bliss.jpg";
break; }
case "A002" :

{ $nama="Kulkas";
$harga=1500000;
$a="azul.jpg";
break; }}
}
?>
<tr><td width="25%" align="right">Nama Barang :</td>
</tr>

value="<?echo("$harga");?>" ></td>
</tr>
size="xtotal"value="<?echo("$total");?>" </td>
</tr>
<table border="1">
<tr><td> <img src="c:\windows\web\wallpaper\<?echo("$a");?>"
</table></table>
<? include("bawah.php"); ?>
</center></form>
d. Require
Statement Require digunakan untuk membaca nilai variable dan fungsi-
fungsi dari sebuah file lain. Cara penulisan statement Require adalah:
require(namafile);
Statement Require ini tidak dapat dimasukkan didalam suatu struktur looping
misalnya while atau for. Karena hanya memperbolehkan pemangggilan file
yang sama tersebut hanya sekali saja.
Contoh1.php:
<?php
$a=”Saya sedang belajar PHP”;
function tulistebal($teks)
{
echo(“<b>$teks</b>”);
}
?>

Contoh2.php:
<?php
require(“contoh9.php”);
tulistebal(“Ini adalah tulisan tebal”);
echo(“<br>”);
echo($a);
?>
Latihan :
PENJUALAN TIKET FILM
Kode Tiket : (Input)

Jumlah : (Input)
Nama Studio : (OTOMATIS)
Kelas : (OTOMATIS)
Harga : (OTOMATIS)
Total Harga : 999999999999 (OTOMATIS)
Diskon : 999999999999 (OTOMATIS)
Total Bayar : 999999999999 (OTOMATIS)
Programmer By : Nama Anda (panggil dengan fungsi Include)
Ketentuan Soal:
1. Harga, Nama Studio dan Kelas didapatkan dari Kondisi berikut:
Kode_Tiket Nama_Studio Kelas Harga
A11 Studio 1 Eksekutif 70000
A12 Studio 2 Bisnis 60000
A13 Studio 3 Ekonomi 50000
A14 Studio 4 Super 40000
Ekonomi
2. Total Harga = Harga x Jumlah
3. Diskon didapat dari:
Jika Jumlah >10 maka diskon 10% x harga x jumlah selainnya=0
4. Total Bayar = Total Harga - Diskon

MODUL 5
CASCADING STYLE SHEET (CSS)
Sebelum mempelajari CSS anda harus mengetahui HTML DASAR terlebih

dahulu. CSS singkatan dari Cascading Style Sheet. CSS merupakan sebuah
bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-
komponen web yang beragam sesuai dengan keinginan kita .
Syntax CSS
CSS memiliki dua bagian utama: pemilih (Selector), dan satu atau lebih
deklarasi (Declaration).
• Selector adalah HTML element yang ingin dibuat style nya.

• Declaration merupakan isi dari property dan nilai dari CSS.
• Pemberian nilai dari property digunakan titik dua (:), akhir dari property
digunakan titik koma (;)
Yang perlu diperhatikan:

1. Tiap deklarasi properti selalu diakhiri tanda ‘;’ (semi kolon) dan
pemberian nilai value pada properti diberi tanda ‘:’ (titik dua) sebagai
pengganti ‘=’ (sama dengan)
2. Jika nilai dari value terdiri 2 kata pergunakan tanda petik ganda “
value value”.
3. kumpulan properti ditandai dengan ’{‘ dan ‘}’
4. deklarasi CSS ini diletakkan diatas tag <body> jika digabungkan
dengan html atau php
5. jika di file css nya dibuat dalam satu file (murni css semua) disimpan
dengan nama file yang ekstentionnya ‘.css’.
1. Penulisan Pada Tag Dengan Atribut Style

Contoh:
<html>
<head><title>Penggunaan CSS</title></head>
<body>
<div style=”font-size:10pt”>Ukuran huruf 10 pooint</div>
</body>
</html>

2. Penulisan Pada Head
<html>
<head><title>Penggunaan CSS</title>
<style type=”text/css”>
body{color:blue;font-family:tahoma}
p {color:red}
h1,h2,h3,h4,h5,h6 {color:green}
</style>
</head>
<body>
Jenis huruf saya tahoma warna saya biru<br>
<p> warna saya merah </p>
<h1> saya hijau</h1>
</body>
</html>
3. Penulisan Dengan Class

<html>
<style>
div.biru {color:blue }
div.merah {color:merah }
.hijau {color:green}
</style>
</head>
<body>
<div class=”biru”>Saya berwarna Biru</div>
<div class=”merah”>Saya berwarna Merah</div>
<div class=”hijau”>Saya berwarna Hijau</div>
</body>
</html>
4. Penulisan Dengan Id
<html>
<style>
div#biru {color:blue }
div#merah {color:merah }
#hijau {color:green}
</style>
</head>

<body>
<div id=”biru”>Saya berwarna Biru</div>
<div id=”merah”>Saya berwarna Merah</div>
<div id=”hijau”>Saya berwarna Hijau</div>
</body>
</html>
5. Navigasi Bar.
Memiliki mudah menggunakan navigasi adalah penting untuk setiap situs
web. Dengan CSS Anda dapat mengubah menu HTML membosankan
menjadi tampan bar navigasi.
Navigation Bar = Daftar Link.

Sebuah bar navigasi yang standar HTML sebagai dasar. Dalam contoh, kita
akan membangun panel navigasi dari daftar HTML standar.
Sebuah bar navigasi pada dasarnya adalah daftar link, sehingga

menggunakan <ul> dan elemen
Contoh 1 :
ul
{
list-style-type:none;
margin:0;
padding:0;
}
<li> masuk akal:
<ul>
<li><a href=”default.asp”>Home</a></li>
<li><a href=”news.asp”>News</a></li>
<li><a href=”contact.asp”>Contact</a></li>
<li><a href=”about.asp”>About</a></li>
</ul>
Contoh 2 :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

a:link, a:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
LATIHAN :
Rancang tampilan web berikut dengan menggunakan CSS. Jika diklik salah
satu menu warna background dan font berubah warna dan style nya bold
(tebal) menggunakan fungsi hover.
Home Profile Gallery
MENU
Menu 1
Menu 2
Menu 3

MODUL 6
JAVASCRIPT
1. PENULISAN PADA TAG

Contoh:
2. PENULISAN DENGAN TAG <SCRIPT>
Contoh:
3. TIPE DATA
Tipe-tipe data pada javascript yaitu: string, number, boolean, null, object
dan function
4. VARIABEL
Dengan variabel kita dapat menyimpan informasi pada memori dan dapat
kita pergunakan berkali-kali. Untuk membuat variabel ketik awalan var atau
bisa juga langsung dengan nama variabel tersebut.
Contoh:
var namaKu = “Fansyah”
atau
namaKu = “Fansyah”
40
5. OPERATOR, IF DAN PERULANGAN

Operator pada javascritp mirip dengan operator pada php, lihat pada bagian
PHP untuk mempelajari operator matematika, perbandingan dan logika.
Begitu juga dengan sintak if dan perulangan.
Contoh operator matematika:
Contoh if:
41
Contoh perulangan dengan for:
Contoh penulisan function:
LATIHAN :
1. Form Input
<html>
<head> </head>
42
<SCRIPT language="Javascript">
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>
2. Form Button
<html>
<head>
<title>objek document</title>
</head>
<body>
<script language = "javascript">

</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 language = "javascript">

</script>
</body>
</html>

MODUL 7
DATABASE MYSQL
Database adalah kumpulan dari tabel-tabel, dan tabel merupakan

kumpulan dari beberapa Field atau column. Untuk membuat suatu
table maka seorang user harus membuat database terlebih dahulu.
Dengan mengaktifkan database yang dibuat tersebut.
Contoh abstraksi database.
Kampus Database
Mahasiswa Dosen Matakuliah Nilai Tabel
Struktur tabel Dosen

Field Name Type Length
Kode_Dosen varchar 8
Nama_Dosen varchar 20
Tempat_lhr varchar 15
Tgl_lhr date
Pendidikan varchar 15 Field /
kolom
Tampilan Fisik dari Tabel Dosen

Kode_Dosen Nama_Dosen Tempat_lahir Tgl_Lahir Pendidikan
K02TI TONNI LIMBONG PANANGGAHAN 18-12-1978 S2 record/
K20TI HARVEI DESMON P. SIANDOMANG 11-02-1984 S1
tupel/baris
Gambar 7.1 Struktur Database dan Tabel
Database : Kumpulan dari Tabel (entity) yang saling berhubungan dan

terintegrasi
Tabel : Kumpulan dari record dan field yang saling berhubungan
Record : Baris pada tabel yang memiliki type data yang satu tipe
atau berbeda tipe
Field : Kolom pada tabel yang terdiri dari type data yang sama.
2. Sub Bahasa Structure Query Language (SQL)

Secara umum bahasa SQL dibagi menjadi tiga bagian:
1. DDL (Data Definition Language) yang digunakan untuk membangun
objek-objek dalam database seperti tabel.

2. DML (Data Manipulation Language) yang digunakan dalam

memanipulasi suatu tabel didalam database (menambah,
mengedit, mencari dan menghapus)
3. DCL (Data Control Language) yang digunakan untuk
menangani masalah keamanan dalam database server
Ketiga komponen ini bisa digunakan setelah suatu database di aktifkan.

A. DDL (Data Definition Language)
Terdiri atas : Create, Alter, Drop
a. Membuat Tabel
Setelah menciptakan suatu database dan mengaktifkan database
tersebut maka dapat dilakukan perintah pembuatan tabel
BU : CREATE TABLE Nm_Tabel (Nm_Kolom1 tipe data([ukuran]),nm_kolom2

tipe data ([ukuran])….. nm_kolom_n tipe data ([ukuran]));
Untuk bentuk tipe data yang digunakan anda dapat merujuk ke manual
MySQL atau mengunjungi manual di http://mysql.com.
Contoh :
create table berita (tanggal date, berita text);
BU : CREATE Database Nm_Database;

Contoh :
mysql> create database Praktikum;
Query OK, 1 row affected (0.11 sec)
b. Melihat seluruh daftar database dalam server MySql

BU: SHOW Databases;
mysql> show databases;
+-------------- +
| Database |
+-------------- +
| adminks |
| A1 |
| bahasa |
| catalog |
| praktikum |
| sample |
| survey |
| tracking |
|u |
+--------------+
9 rows in set (0.27 sec)

Gambar 7.2 Daftar Database di Server Apache
c. Mengaktifkan/Menggunakan Database
Sebelum pembuatan tabel dan operasi-operasi yang berhubungan
dengan tabel maka database harus di aktifkan/digunakan.
BU : USE Nm_Database
Contoh :
mysql> use praktikum;
Database changed
d. Menghapus Database dari Server

BU : Drop Database Nm_Database
Contoh :
mysql> drop database praktikum;
Query OK, 0 rows affected (0.11 sec)
Aturan penamaan dalam pembuatan database :

1. Jangan menggunakan spasi dan spesial karakter dalam
pembuatan nama database
2. Jangan menggunkan angka pada awal pembuatan nama database
e. Melihat Struktur Tabel

BU: describe nama_tabel;
digunakan untuk melihat struktur tabel yang telah dibuat. Namun
sebelumnya, sudah berada pada database yang mempunyai
tabel tersebut.
Contoh :
mysql>describe produk;
+----------+------------------+--------+-------+-----------+------+
| Field | Type | Null | Key | Default | |
+----------+------------------+--------+-------+-----------+------+
| nama | varchar(25) | YES | | NULL | |
| harga | bigint | YES | | NULL | |
+----------+------------------+--------+-------+-----------+------+
2 ROWS IN SET (0.10 SEC)
Gambar 7.3 Menampilkan Struktur Tabel
f. Mengubah Struktur Tabel

Ada empat macam perubahan dalam struktur tabel, yaitu :
a. Perubahan nama field/kolom
Perubahan yang terjadi hanya pada nama field/kolom saja. Nama
field/kolom lama diganti dengan nama field/kolom yang baru.
BU : alter table nama_tabel change nama_field_lama nama_field_baru

tipe_data;

Contoh :
mysql>alter table toko change buku nama varchar(25);
b. Perubahan tipe data

Perubahan yang terjadi hanya pada tipe data yang digunakan oleh
field/kolom tertentu. Tipe data baru langsung disebutkan
dibelakang nama field/kolom, tanpa harus menyebutkan tipe data
lama.
BU : Alter table nama_tabel modify nama_field tipe_data_baru;

Contoh :
mysql>alter table toko modify nama longtext;
c. Penambahan field
Struktur tabel akan berubah dengan bertambahnya field/kolom
baru didalamnya.
BU : Alter table nama_tabel add nama_field tipe_data_baru;
Contoh :
mysql>alter table supermarket add stok int;
d. Penghapusan field
Struktur tabel mengalami perubahan akibat berkurangnya
field/kolom tertentu.
BU : Alter table nama_tabel drop column nama_field;
Contoh :
mysql>alter table supermarket drop column stok;
g. Mengganti Nama Tabel

Penggantian nama tabel meliputi nama tabel itu sendiri.
BU : Alter table nama_tabel_lama rename nama_tabel_baru;
Contoh :
mysql>alter table toko rename supermarket;
h. Menghapus Tabel
Tabel dapat saja dihapus karena sudah tidak dibutuhkan lagi,atau terjadi
kesalahan.
BU : Drop table nama_tabel;
Contoh :

mysql>drop table supermarket;
i. Kekangan Nilai Pada Data

1. Menentukan Kunci Primer (Primary Key)
Secara sederhana kunci primer digunakan untuk menyatakan bahwa
suatu nilai tidak boleh ada yang sama dan nilai tersebut harus diisi
(NOT NULL).
Penetapan kunci primer dibuat pada saat pembuatan tabel:
mysql> create table siswa (NIM varchar(10) not null primary
key,Nama
varchar(25),SEX char(1),Alamat varchar(35));
2. Memberikan nilai bawaan (Default)

Jika tidak memberikan suatu nilai dalam kolom tertentu maka oleh
system secara otomatis diisi dengan nilai NULL. Oleh karena itu
pada saat perancangan table field tersebut defaultnya diisi dengan
tetapan yang dikehendaki.
mysql> create table MatKul (KD_MK varchar(10) not null
primary key,nama_MK varchar(20),SKS int default 0);
B. DML (Data Manipulation Language)

Perintah DML Terdiri dari SELECT, INSERT, UPDATE dan DELETE
a. Memasukkan Data (Insert)
Ada dua cara yang dapat digunakan untuk memasukkan data
kedalam tabel, yaitu:
1. insert into nama_tabel values (isi_field_2,…,isi_field_n);
Contoh : insert into produk values (‘SG 100’,2500);
2. insert into nama_tabel (nama_field_1,

nama_field_2,…,nama_ field_n) values (isi_field_1,
isi_field_2,…,isi_field_n);
Contoh : Insert into produk (kode,harga) values (‘SG 100’,25000);
b. Menampilkan Data (Select)

Berikut ini perintah untuk menampilkan data :
BU : Select [fields] from [nama_tabel] Where [kondisi] Order
by [nama_field] Group by [nama_field] asc / desc
Contoh :
a. Select kode from produk;
b. Select kode,harga from produk;
c. Select * from produk;
Note :
Setelah penulisan select, [fields] dapat diganti dengan
menyebutkan satu nama field saja atau beberapa field
sekaligus yang dipisah dengan tanda koma (,). Penulisan

field-field tersebut digunakan untuk memunculkan data dari kolom

mana saja yang akan ditampilkan. Jika seluruh kolom akan
ditampilkan dapat menggunakan tanda asterik (*) untuk
mewakilinya.
c. Mengurutkan Tampilan
Klausa ORDER BY digunakan untuk mengurutkan hasil. Jika
menginginkan data ditampilkan urut berdasarkan pada urutan
terkecil ke besar, dapat menggunakan ASC (ascending).
Sedangkan untuk mengurutkan data berdasarkan yang
terbesar ke kecil, dapat menggunakan DESC (descending).
mysql> select * from siswa order by NIM desc;

+-----------------+--------------------+----------------+-------+
| NIM | Nama | alamat | Sex |
+----------------+--------------------+-----------------+-------+
| 09.11.100 | Leon Auman | Jl. Bebek |P |
| 09.11.101 | Annisa Akhwat | Jl. Mawar |W |
| 09.11.102 | Abu Bakar | Jl. Tunjung | P |
| 09.11.104 | Laksmi dewi | Jl. Balapan | W |
| 09.11.106 | Budi R | Jl. Mawar |P |
+---------------+---------------------+------------------+------+
5 rows in set (0.11 sec)
Gambar 7.4 Menampilkan isi tabel di urutkan berdasarkan NIM
d. Mengubah Data (Update)

Jika data sudah kadaluarsa, berikut perintah digunakan untuk
merubah data.
BU : Update nama_tabel set nama_field_1=isi_baru_1,
nama_field_2= isi_baru_2,…, nama_field_n=isi_baru_n Where
kriteria;
Contoh : Update produk set harga=3000 where nama=’Sikat Gigi’;
E. Membackup File
Dipergunakan untuk membackup file database kedalam sebuah
directory/folder bisa type txt atau sql dan sebagainya.
B.U : mysqldump -u root -p uu>d:\coba.txt
Contoh :
C:\apache\mysql\bin>mysqldump -u root -p uu>d:\coba.txt
Contoh Kasus (Latihan):

Nama database : MyToko
Nama Tabel : Barang
Tabel 7.1. Tabel barang

Kode_brg Nama_brg Harga Jumlah

AAA TELEVISI 234000 2
BBB VCD 350000 7
CCC TELEVISI 1800000 12
DDD MINI 900000 4
COMPO
Perintah-Perintahnya:
1. Tampilkan nama_brg , harga pada tabel barang
2. Tampilkan semua data_barang dengan nama_brg diurutkan secara
Ascending
3. Tampilkan semua data_barang dengan harga diurutkan secara
Descending
4. Tambahkan field total int(10) setelah field jumlah
5. Tambahkan nomor int(1) pada awal field (sebelum kode_brg)
6. Ubah data nama_brg menjadi Kipas Angin untuk kode_brg = BBB
7. Tampilkan semua data pada tabel barang
8. Ganti Field Total menjadi Total_Harga pada tabel barang
9. Isikan total_harga= harga x jumlah untuk semua data barang
10. Hapus data barang yang berkode CCC
Catatan :
Pembuatan Variabel (field name) harus memenuhi syarat seperti pembuatan
nama database dan nama tabel seperti : tidak boleh ada spasi, jangan
menggunakan angka murni, jangan menggunakan bahasa inggris yang
merupakan perintah komputer

MODUL 8
KONEKSI DATABASE MYSQL DENGAN PHP
PHP memiliki banyak fungsi berbeda yang telah built-in untuk

manipulasi database. Berikut ini adalah fungsi-fungsi built-in, dan kita pasti akan
menemukan ketika membuat aplikasi yang berhubungan dengan PHP dan MySQL:
Skrip PHP
mysql_connect()
mysql_select_db()
mysql_close()
Seperti yang telah disebutkan, sebelum merubah isi tabel dari database, pertama
yang harus kita mulai adalah membuat skrip agar terhubung ke database.
Fungsi mysql_connect(), seperti namanya, digunakan untuk menghubungkan
ke database MySQL.
Contoh :
<?php
$user_name = "root";
$password = "";
$database = "barang";
$host_name = "localhost";
mysql_connect($host_name, $user_name, $password);
echo "Koneksi Terbuka";
?>
Sintaks :
Baris Skrip PHP di atas digunakan untuk terhubung dengan database dan
umumnya berisi tiga parameter termasuk nama host, username dan
password database yang baru saja kita isi sebelumnya pada variabel.
Jika tidak ingin menggunakan variabel, maka kita bisa langsung menggunakan
nilai tersebut seperti yang ditunjukkan di bawah ini:
Sintaks :
mysql_connect('localhost','root','');
Pada kode yang telah ditunjukkan di atas, kita telah menyatakan

variabel $database berisi nama database yang kita tuju. Mari kita menggunakan
variabel tersebut untuk cek apakah database tersebut tersedia atau tidak.
Contoh :
<?php

$password = "";
mysql_select_db($database);
echo "Koneksi Terbuka";
?>
Contoh :
<?php
$password = "";
$connect_db=mysql_connect($host_name, $user_name, $password);
$find_db=mysql_select_db($database);
if ($find_db) {
echo "Database Ada";
}else {
echo "Database Tidak Ada";
}
?>
Dalam PHP, mysql_close() digunakan untuk menutup koneksi ke

server database MySQL. Kita dapat menggunakan skrip berikut untuk
menutup koneksi:
Sintaks:
mysql_close($connect_db)
Mari kita tambahkan skrip diatas, sehingga skrip akhir menjadi seperti ini.
Contoh :
<?php
$password = "";
$connect_db=mysql_connect($host_name, $user_name, $password);
$find_db=mysql_select_db($database);
if ($find_db) {
echo "Database Ada";
mysql_close($connect_db);
}
else {

echo "Database Tidak Ada";

mysql_close($connect_db);
}
?>
1. Menampilkan isi Tabel dari Database MySQL PHP
Contoh :
<table border="0" align="Center">
<tr bgcolor="cyan">
<td>Kode Barang </td><td>Nama Barang</td><td>Harga</td>
<td>Jumlah</td><td>Proses</td></tr>
<?php
mysql_connect("127.0.0.1","root","");
mysql_select_db("indomaret");
$perintah="Select * from barang order by Kode_brg ASC";

$hasil=mysql_query($perintah);
if ($hasil)
{
while($baris=mysql_fetch_row($hasil))
{echo ("<tr bgcolor=yellow>
<td><p>$baris[0]</p></td>
<td> [<a href='Form_Input.php'>Tambah</a>]

[<a href='Form_edit.php?id=$baris[0]'>Edit</a>]
[<a href='hapus.php?id=$baris[0]'>Hapus</a>]
</td></tr>");
}
}
?>
</table>
</body>
2. Input Data (Simpan.php)

Untuk melakukan penambahan data harus menggunakan satu form input
(file_input.php) dan satu lagi untuk proses editnya (file_simpan.php)
a. Form Input Data

<form name="xtambah" action="Proses_simpan.php" method="post">
<table border="0" align="center" width="50%" bgcolor="lime">
<tr bgcolor="pink"><td colspan="2" align="center"><font size="5">Data
Barang</font></td></tr>

<tr><td align="right">Kode Barang</td>

<td><input type="text" name="xkode" id="xkode" size="10"
<tr><td align="right">Nama Barang</td>
<tr><td align="right">Harga</td>
<td><input type="text" name="xharga" size="10"
<tr><td align="right">Jumlah</td>
<td><input type="text" name="xjumlah" size="4"
<tr><td align="right"><input type="submit"

name="xsimpan"value="Simpan"></td>
<td><input type="submit" name="xhapus"value="Reset"></td></tr>
</form></table><BR/>
<?
include ("tampil.php");
?>
b. Proses simpan.php
<?php
{ $id=$_REQUEST[id];
$kode=$_REQUEST[xkode];
$nama=$_REQUEST[xnama];
$harga=$_REQUEST[xharga];
$jumlah=$_REQUEST[xjumlah];
$perintah=("insert into barang

(Kode_brg,Nama_brg,harga,jumlah ) values
('$kode','$nama','$harga','$jumlah')");
$hasil=mysql_query($perintah); }
include ("Form_input.php");
?>
3. Menghapus Data (hapus.php)

Untuk melakukan perbaikan data harus menggunakan satu file untuk proses
hapus datany (file_hapus.php)

<?php
mysql_select_db("webku");
$kategori=$_REQUEST[xkategori];
$har_bel=$_REQUEST[xhb];
$har_ju=$_REQUEST[xhj];
$stok=$_REQUEST[xstok];
$perintah=("delete from barang where Id_barang='$id'");

include ("input.php");
?>
NB : Khusus perintah untuk hapus.php tidak ada yang ditampilkan karena isinya
hanya sebatas perintah, jadi hapus.php akan melaksanakan perintah hapus
jika di klik tulisan Hapus yang ada pada Tampil.php
4. Mengedit/mengubah Data (Proses_edit.php)

Untuk melakukan perbaikan data harus menggunakan satu form input
(file_input.php) dan satu lagi untuk proses editnya (file_proses.php)
a. proses_edit.php
<?php
$harga=$_REQUEST[xharga];
$jumlah=$_REQUEST[xjumlah];
$perintah="update barang set Kode_brg='$kode',Nama_brg='$nama',

harga='$harga',jumlah='$jumlah' where kode_brg='$id'";
include ("Form_input.php");
?>
b. Form Edit.php
<html>
<head><title> form</title></head>

<?php
$id=$_REQUEST[id];
$perintah="Select * from barang where kode_brg='$id'";
$hasil=mysql_query($perintah);
$baris=mysql_fetch_row($hasil)
?>
<form name="xtampil" action="editbarang.php">

<table border="0" align="center" bgcolor="yellow">
<tr><td colspan="2" align="center" bgcolor="blue"><font size="5"

color="White">Data Barang</font></td></tr>
<tr><td>Kode</td>
<td><input type="text" name="xkode" value="<?=$baris[0]?>" size="20"
maxlength="8">
<input type="hidden" name="id" value="<?=$baris[0]?>" size="20"
<tr><td>Nama Barang</td>
<td><input type="text" name="xnama" value=<?=$baris[1]?> size="30"
<tr><td>Harga Barang</td>
<td><input type="text" name="xharga" value=<?=$baris[2]?> size="10"
<tr><td>Jumlah</td>
<td><input type="text" name="xjumlah" value=<?=$baris[3]?> size="6"
<tr><td align="Right"><input type="submit" name="xedit"value="Edit"></td>

<td><input type="reset" name="xreset"value="Reset"></td></tr>
</form>
</table><br><br>
<?php
include("tampil.php");
?>
</body></html>
Perhatikan tampilan berikut ini :

Gambar 8.1. Kerangka jumlah File php yang terhubung Untuk Mengolah Satu
Tabel

Modul Teori Pemrograman Web - I Unika ST. Thomas Medan
MODUL 9
MERANCANG LAYOUT DESAIN WEBSITE
Desain utama adalah sebuah halaman untuk induk dari program bentuknya
standarnya, terdiri dari Header, Footer, Menu Kiri, Isi (utama) dan Link Kanan),
seperti tampilan di bawah ini :
Biasanya tampilan sebuah website dibagi dalam 2 bagian yaitu : untuk
Administrator dan untuk User Umum
Misalnya seperti tampilan berikut:
Gambar 9.1. Menu Utama Website

Yang dibutuhkan:
a. Menu (Pilihan Program)
b. Tempat link aplikasi (ISI)
c. Judul / Header Web (berbentuk gambar dan Tulisan, bisa juga animasi)
d. Footer (Keterangan)
e. Atribut pelengkap yang lain (Form Login, kalender, link ke situs lain, jumlah
pengunjung/counter, dsb)
Dengan gambaran ilustrasi, apapun yang akan diklik pada menu disebelah kiri, maka
progam akan berjalan atau tampil di kolom / cell isi Tampilan Link.
Dari gambar output diatas dapat kita susun dengan menggunakan bantuan tabel
Seperti berikut:
gambar
Judul
dsfdsfdsfdsfdsfd
Menu
Program Objek lain
seperti jam
Dan link ke
situs lain
Isi web
Footer (Keterangan)
Gambar 9.2. Desain Kerangka MenuUtama Website
Untuk itu pada cell isi Tampilan Link, ketikkan source Code Berikut pada halaman
utama bisanya diberi nama file Index.php:
<td width="60%" valign="top">

<?
$slink=$_REQUEST['slink'];
if(isset($slink)) {
include "$slink" ;
} else {
include"profil.php";
}
?>
</td>
Setelah itu pada source code untuk menu.php, ketikkan source code berikut :
a. Tabel utama diatas disimpan dengan nama Index.php
<html>
<title>Percobaan</title>
<body bgcolor="Black">
<center>
<table border="1" width="90%" height="90%" bgcolor="cyan" cellpadding="0"
cellspacing="0">
<tr>

<td colspan="2" height="20%"

background="./gambar/header.jpg">sssss</td>
<td width="15%">ssss</td>
</tr>
<tr>
<td colspan="3" height="5%" bgcolor="yellow">
<?php include "tulisan.php"; ?></td>
</tr>
<tr>
<td width="15%" valign="top"><?php include "menu.php"; ?> <br>
<?php include "login.php"; ?></td>
<td valign="top"><?
$slink=$_REQUEST['slink'];
if(isset($slink)) {
include "$slink" ;
} else {
include"profile.php";
}
?>
</td>
<td valign="top"><object classid="clsid:166B1BCA-3F9C-11CF-8075-
444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.
cab#version=8,5,0,0" width="100%" align="middle">
<param name="src" value="JAM.SWF">
<embed src="JAM.SWF" width="100%" align="middle"
pluginspage="http://www.macromedia.com/shockwave/download/"></embed>
</object></td>
</tr>
<tr>
<td colspan="3" height="5%" bgcolor="blue">sssss</td>
</tr>
</table>
</center>
</body>
</html>
b. Untuk Menu Program (menu.php)

<table border="1" width="100%" bgcolor="white">
<tr><td bgcolor="blue" align="center"><b>
<font size="5">MENU UTAMA</font></b></td></tr>
<tr><td align="center"><a href="index.php?slink=ganjil.php&act=info">Ganjil /
Genap</a></td></tr>

<tr><td align="center"><a href="index.php?slink=segi.php&act=info">Segi

Panjang</a></td></tr>
<tr><td align="center"><a
href="index.php?slink=namafile3.php&act=info">Menu3</a></td></tr>
<tr><td align="center"><a
href="index.php?slink=namafile4.php&act=info">Menu4</a></td></tr>
</table>
c. Profile (Profie.php)
<?php
echo "Selamat datang di Situs kami, semoga bermanfaat!!!";
?>
d. Tulisan berjalan (tulisan.php)

<marquee behovior="alternate">Selamat Datang di Situs Kami</Marquee>
e. Login dan Password (Login.php)

<html>
<center>
<table border="0" cellpadding="0"cellspacing="0" width="100%">
<tr> <td colspan="2" align="center">
<b><u><font color="#FF0000" size="5">Login User</font></b></u></td>
</tr>
<tr><td>&nbsp</td></tr>
<form method="POST" action="ganjil.php">
<tr><td align="right"> Login : </td>
<td><input type=text name=xbil size=20 maxlength=20 > </td> </tr>
<tr><td align="right"> Pasword : </td>
<td><input type=text name=xbil size=20 maxlength=20 > </td> </tr>
<tr><td colspan="2" align="center"><input type="submit" value="Proses"

name="xuji">
<input type="reset" value="Reset" name="xreset"></td> </tr>
</form>
</table></center>
</body>
</html>
f. Program Segi Panjang (segi.php)

<html>
<head><title>Persegi Panjang</title></head>
<center><form method="POST" action="proses2.php">
<table bgcolor="blue" width="100%">
<tr><td colspan="2" bgcolor="white"><b><font color="#FF0000" size="5">
Menghitung Luas Persegi Panjang</font></b></td</tr>
<tr><td align="right">Masukkan Panjang : </td>

<td><?php
echo ("<input type=text name=xpjg size=4 maxlength=4 value='$xpjg'>");
?> </td></tr>
<tr><td align="right">Masukkan Lebar :</td>

<td> <?php
echo ("<input type=text name=xlbr size=4 maxlength=4 value='$xlbr'>");
?></td></tr>
<tr><td colspan="2"><p align="center"><input type="submit" value="Hitung"

name="xhitung">
<input type="reset" value="Reset" name="xreset"></p></td></tr>
<tr><td align="right">Maka Luas Persegi Panjang : </td>

<td> <?php
echo ("<input type=text name=xluas size=6 maxlength=6 value='$xluas'>");
?></td></tr>
</table><center>
</form>
</body>
</html>
g. Program Ganjil genap (ganjil.php)
<html>
<head><title>Bilangan Ganjil / Genap</title></head>
<center>
<table border="0" cellpadding="0"cellspacing="0" width="100%">
<tr> <td colspan="2" align="center">
<b><u><font color="#FF0000" size="5">Menentukan Bilangan Ganjil dan
Genap</font></b></u></td>
</tr>
<tr><td>&nbsp</td></tr>
<form method="POST" action="ganjil.php">
<?php
$xbil = $_POST['xbil'];
?>
<tr><td align="right"> Masukkan Bilangan : </td>
<td> <?php
echo ("<input type=text name=xbil size=4 maxlength=4 value='$xbil'>");
?> </td> </tr>
<?php
$hsl=$xbil%2;
if ($hsl==0)
$xket="Bilangan Genap";
else
$xket="Bilangan Ganjil";
?>
<tr><td colspan="2" align="center"><input type="submit" value="Proses"
name="xuji">
<input type="reset" value="Reset" name="xreset"></td> </tr>
<tr> <td align="right">Keterangan :</td>

<td>
<?php
echo ("<input type=text name=xluas size=25 maxlength=25 value='$xket'>");
?>
</td> </tr>
</form>
</table></center>
</body>
</html>
Outputnya sebagai Berikut:

Gambar 9.3. Hasil running dari kumpulan file php di atas
Biasanya tampilan web dibagi dalam 2 bagian yaitu : Administrator dan User
Umum
a. Yang dibutuhkan untuk Admin:
Seorang administrator sebaiknya dapat menambah, mengedit, melihat,
mencetak dan menghapus data. Maka untuk itu diperlukan halaman index
sendiri (Index_Admin.php) dan biasanya halaman ini identik dengan user
(login dan Password)
A. Rancangan Database
Nama database : toko.sql
Nama tabel : USER
Tabel 9.1. Deskripsi Tabel User
Field Jenis
login varchar(15)
password varchar(15)
Telp varchar(13)
Tabel 9.2.Tampilan data tabel user

login password telp
admin najmi 12345
B. Rancangan Form
1. Form Login

Rancang Form login (frm_login.php) untuk dipakai dalam menu utama sistem
seperti berikut ini :
Gambar 9.4. Form Login User
User name : admin

Password : najmi
Source codenya :
<H2>Login User </H2>

<?
echo "
<form method=post action=proseslogin.php>
<table border=0 cellpadding=0 cellspacing=0 align=center>
<tr>
<td >User Name </td><td> : </td>
<td><input type=text name=user size=20>
<tr>
<tr>
<td>Password </td><td> : </td>
<td><input type=password name=pass size=20>
<tr>
<tr> <td colspan=3> <input type=submit name=simpan value=\"
Login \"> <tr>
</table>
</form>
";
?>
Jika diklik tombol login maka akan mengerjakan action = proseslogin.php, dengan
sourcode dibawah ini :
2. Proses Login
<?php
include("koneksi.php");
$user = $_REQUEST["user"];
$pass = $_REQUEST["pass"];
$query = "Select * from user where login='$user' and password = '$pass'";

$login=mysql_query($query);
$baris = mysql_fetch_array($login);
if($baris[login] ==$user)
{
setcookie("reg_admin","admin");
header("location: index_admin.php");
}
else
{
header("location: index.php");
}
?>
3. koneksi.inc.php atau koneksi.php

<?php
mysql_connect("localhost","root","");
mysql_select_db("Toko");
?>
4. Logout
Perintah diperlukan agar begitu logout sistem menghapus riwayat koneksi dengan
menggunakan cookie, sourcode berikut :
<?
SetCookie("puser");
SetCookie("ppass");
include("frmlogin.php");
?>
========================
NB :
Pada index_admin hilangkan include frm_login.php, Gantikan dengan
<a href="index.php?slink=logout.php&act=info">Logout</a></td>

MODUL 10
CONTOH WEBSITE SEDERHANA
A. RANCANGAN DATABASE
Nama Database : Tokoku
Nama Tabel : barang
Dengan struktur tabel sebagai berikut:
Gambar 10.1 Desain Database dan Tabel
Browse Tabel barang
Gambar 10.2 Browse Tabel Barang
B. RANCANGAN WEB UTAMA

1. Menu Utama (index)

Gambar 10.3. Desain Kerangka Menu Utama Website
2. Tampilan List Barang (user)
Gambar 10.4. List Barang (user)
3. Form Login

Gambar 10.5. Form Login
4. Tampilan Index Admin
Gambar 10. 6. Index Admin

5. Tampilan List Barang Admin
Gambar 10.7 List Data Barang Admin
6. Tampilan Edit Barang Admin
Gambar 10.8. Form Edit Barang

7. Tampilan Input Barang Admin
Gambar 10.9 Form Input Barang
5. Tampilan Logout Admin
Gambar 10.10. Form Logout

DAFTAR PUSTAKA
1. Abdul Kadir, Pemrograman WEB mencakup HTML, CSS, Java Sript dan PHP,
Penerbit Andi Jogjakarta, Edisi I tahun 2003.
2. Adhi Rachdian & AndySikumbang , Mastering CMS dengan Mambo / Joomla,
PT. Elex Media Komputindo, Jakarta, 2005
3. Betha Sidik, IR, Pemrograman Web dengan PHP, Penerbit Informatika
Bandung, Cetakan I Agustus 2004.
4. Sugiri,A.Md., S.Pd., Budi Kurniawan, S.Kom, Desain WEB menggunakan HTML
+ CSS, Penerbit Andi Jogjakarta Edisi I Agustus 2007.
5. Sebesta, R.W., Programming the World Wide Web, Addison Wesley, 2002
6. Hall, M.,Core Web Programming, Prentice Hall, 1998
7. Staab, Steffen, Semantic Web and Peer to Peer, Springer-Verlag, Berlin, 2006
8. http://www.ilmukomputer.com
9. https://alimisyarirasyid.wordpress.com/2012/10/17/industri-kreatif/
10. http://vokasi.hostoi.com/vokasi-industri-kreatif-IT.html
11. http ://php.net
12. http://mysql.com
13. http://www.press.umich.edu
L-1
SATUAN ACARA PERKULIAHAN
Mata Kuliah : Praktikum Pemrograman Web I
Fakultas : Ilmu Komputer
Jurusan : S1-Teknik Informatika dan S1-Sistem Informasi
Perte Pokok Sub Pokok Teknik Media Tugas Refe

muan Bahasan Bahasan Pembelajara Pembe rensi
Ke Dan TIU dan TIK n lajaran
1 Pendahu Ruang lingkup Ceramah dan OHP Silabus
luan mata kuliah Diskusi dan
Sasaran SAP
Tujuan
Kompetensi
lulusan
2 Dasar- - Konsep dasar Ceramah dan OHP - Tugas 11

dasar Web Web Diskusi men-
dan HTML - Arsitektur Web downlo
- HTTP ad dan
TIU: - Client Side mengin
Mahasiswa Programming stalasi
dapat - Server Side salah
mengetahui Programming satu
dan - Web Server web
memahami Software server
dasar-dasar (PHPTriad, softwar
Web dan XAMPP) e dan
HTML - Konsep HTML contoh
progra
TIK: m
- Mahasiswa
dapat
menerangkan
konsep dasar web
dan arsitektur
web.
- Mahasiswa
dapat menyebut
dan
menerangkan
pengertian HTTP
dan
penggunaannya.
- Mahasiswa
dapat
menerangkan
client side dan
server side
programming dan
fungsinya.
- Mahasiswa
dapat
menyebutkan
contoh web
server dan
melakukan
instalasi.
- Mahasiswa
dapat
menerangkan
definisi HTML.
3 HTML -Tag dasar HTML Ceramah dan OHP - 11
Lanjutan Diskusi Latihan
• Basic text - Tugas
TIU: formatting membu
Mahasiswa • Identifying at web
dapat resources sederh
mengetahui • Using graphic ana
dan images -
memahami basics
HTML o Background
images
- HTML
Intermediate
• Formatting
with Tables,
Frames
• Collecting
information
from the user
using Forms
TIK:
• Mahasiswa
dapat
membuat
contoh
sederhana
menggunakan
format teks
dasar, URL,
link, image.
• Mahasiswa
dapat
membuat
tabel, frame
dan form.
4 dan 5 PHP - Dasar PHP Ceramah dan OHP -
- Variabel PHP - Diskusi Latihan
TIU: Operator- Kontrol - Tugas
Mahasiswa - Fungsi- Form- membu
dapat Time dan Date at web
mengetahui sederh
dan TIK: ana
memahami - Mahasiswa
pemrogram dapat
an web menerangkan
dengan elemen-elemen
PHP dasar
pemrograman
web dengan PHP
serta membuat
contoh aplikasi
sederhana
dengan
menggunakan
elemen-elemen
dasar tsb.
6 Cascading • Konsep dasar Ceramah dan OHP • Lati

Style Sheet CSS Diskusi han
(CSS) • CSS property • Tug
as
TIU: TIK: me
Mahasiswa • Mahasiswa mb
dapat dapat uat
mengetahui menerangkan des
dan definisi dan ain
memahami kegunaan layo
CSS CSS ut
• Mahasiswa
dapat
menerangkan
CSS property
dan
menggunakan
nya.
7 JavaScript Object Oriented Ceramah dan OHP • Lati
Programming Diskusi han
TIU: Language • Tug
Mahasiswa (OOPL),Data as
dapat types: Literals, me
mengetahui Operators, mb
dan Statements, uat
memahami Object di pro
JavaScript JavaScript dan gra
HTML, Classes m
dan Objects, sed
Properties erh
Methods Events, ana
Fungsi, (me
parameter, Event ngg
Handling una
kan
TIK : for
- Mahasiswa m)
dapat
menerangkan
konsep OOPL,
Object, fungsi,
parameter,event
handling pada
JavaScript
8 dan 9 Database - Konsep Basis Ceramah dan OHP -
MySQL Data Diskusi Latihan
- Server Basis - Tugas
TIU: Data dan memba
Mahasiswa Installasi ngun
mengetahui - MySQL databa
dan -Perintah DDL, se dari
memahami DML dan DCL MySQL
Perintah
Dasar TIK:
MySql - Mahasiswa
dapat
menerangkan
pembuatan basis
data dengan
MySQL
10 dan Koneksi - Koneksi Ceramah dan OHP -
11 MySQL Database Diskusi Latihan
dengan MYSQL dengan - Tugas
PHP PHP membu
- Koneksi ke at web
TIU: Basis Data sederh
Mahasiswa dengan PHP ana
mengetahui yang
dan TIK: sudah
memahami - Mahasiswa mengg
konsep dapat unakan
pengaksesa menerangkan databa
n database pembuatan basis se
PHP dalam data dengan
pemrogram MySQL serta
an web pengaksesannya
dengan dengan PHP
PHP serta membuat
contoh aplikasi
sederhana yang
menggunakan
database.
12 Desain - Menu utama Ceramah dan OHP -

Layout (header, footer Diskusi Latihan
Website dan body web)
- User
TIU: - Link dan
Mahasiswa Target
mengetahui
dan TIK:
memahami Mahasiswa dapat
konsep menerangkan
desain pembuatan
sebuah tampilan umum
website standard sebuah
yang website yang
dinamis dilengkapi
dengan link dan
juga target serta
membuat menu
13 dan CONTOH Pembuatan Web Ceramah dan OHP -
14 WEBSITE sederhana Diskusi Latihan
SEDERHAN - Tugas
A TIK: membu
- Mahasiswa at web
TIU: dapat progra
Mahasiswa menerangkan m
dapat membuat lengkap
mengetahui halaman web yang
dan untuk modul termas
memahami admin dan user uk
web umum progra
sederhana m
untuk
admin
Referensi :
1. Adhi Rachdian & AndySikumbang , Mastering CMS dengan Mambo / Joomla,
PT. Elex Media Komputindo, Jakarta, 2005
2. Bradley, N., The XML Companion 2/e, Addison-Wesley, 2000
3. Bradley, N., The XML Companion, Addison-Wesley, 2000
4. Deitel, H.M. et.al., XML How To Program 2/e, Prentice Hall, 2002
5. Sebesta, R.W., Programming the World Wide Web, Addison Wesley, 2002
6. Hall, M.,Core Web Programming, Prentice Hall, 1998
7. Staab, Steffen, Semantic Web and Peer to Peer, Springer-Verlag, Berlin, 2006
8. http ://php.net
9. http://mysql.com
10. http://w3c.org
11. http://www.press.umich.edu
12. http://en.wikipedia.org/wiki/World_Wide_Web
14. http://id.wikipedia.org/wiki/Web

Modul Praktikum Pemrograman Web I

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 Praktikum Pemrograman Web I

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL PRAKTIKUM

Tonni Limbong, S.Kom.,M.Kom

Program Studi Sistem Informasi

Medan, September 2016

Tonni Limbong, S.Kom.,M.Kom

Copy Right : Tonni Limbong, S.Kom,M.Kom i

1. ELEMEN DASAR HTML

Oleh : Tonni Limbong, S.Kom,M.Kom 1

Oleh : Tonni Limbong, S.Kom,M.Kom 2

8. <B></B> atau <STRONG></STRONG>

9. <I></I> atau <EM></EM>

Oleh : Tonni Limbong, S.Kom,M.Kom 3

Oleh : Tonni Limbong, S.Kom,M.Kom 4

Oleh : Tonni Limbong, S.Kom,M.Kom 5

14. <SPAN></SPAN> Digunakan pada css untuk memberikan format pada

15. <OL></OL> Order list (biasa dikenal dengan numbering)

16. <UL></UL> Unorder List, biasa kita kenal dengan Bullet

Oleh : Tonni Limbong, S.Kom,M.Kom 6

• type (jenis bullet), nilai: disc, square, circle

Oleh : Tonni Limbong, S.Kom,M.Kom 7

Atribut pada Baris <tr></tr>

Atribut pada Kolom <td></td>

Oleh : Tonni Limbong, S.Kom,M.Kom 8

2. <FORM></FORM> Digunakan sebagai blok dari elemen-elemen form

3. ELEMENT PADA FORM

Oleh : Tonni Limbong, S.Kom,M.Kom 9

<tr><td Align="right">Nama Dosen :</td>

Oleh : Tonni Limbong, S.Kom,M.Kom 10

<tr><td Align="right">Pendidikan :</td>

<tr><td Align="right">Pendidikan :</td>

Oleh : Tonni Limbong, S.Kom,M.Kom 11

<tr><td Align="right">Ini Tidak Kelihatan :</td>

Oleh : Tonni Limbong, S.Kom,M.Kom 12

<tr><td Align="right">Klik Tombol</td>

Oleh : Tonni Limbong, S.Kom,M.Kom 13

<form name="inputdata" action="#simpan_dosen.php"

<tr><td Align="right">Klik Tombol</td>

<tr><td Align="right">Klik Tombol</td>

Oleh : Tonni Limbong, S.Kom,M.Kom 14

<td><input type="reset" name="xreset" value="Reset">

<tr><td Align="right">Alamat :</td>

4. <FRAMESET></FRAMESET> Membagi satu halaman web menjadi

Oleh : Tonni Limbong, S.Kom,M.Kom 15

Untuk melengkapi desain di atas, harus dibutuhkan file antara lain :

Lalu yang dijalankan adalah index.html

Oleh : Tonni Limbong, S.Kom,M.Kom 16

Oleh : Tonni Limbong, S.Kom,M.Kom 17

Hasilnya akan seperti berikut ini :

Oleh : Tonni Limbong, S.Kom,M.Kom 18

1. Dasar Penulisan PHP

Oleh : Tonni Limbong, S.Kom,M.Kom 19

Oleh : Tonni Limbong, S.Kom,M.Kom 20

Echo “Nilai : “.$nilai;

Operator Operasi Penggunaan

Oleh : Tonni Limbong, S.Kom,M.Kom 21

Contoh Nama Hasil

Contoh Nama Hasil

Oleh : Tonni Limbong, S.Kom,M.Kom 22

$a == $b Sama dengan True jika $a sama dengan $b

Operator perbandingan lainnya adalah operator trinary “?:” yang memiliki

Contoh Nama Hasil

Oleh : Tonni Limbong, S.Kom,M.Kom 23

echo ($x==2) and ($y==2),"<br>";