Praktikum WEB

2011
MODUL
PRAKTIKUM
Teknik Perangkat Lunak
Universitas PGRI
Ronggolawe
Tuban
PEMROGRAMAN
WEB
OLEH :
AMALUDIN ARIFIA, S.Kom
UNIVERSITAS PGRI RONGGOLAWE TUBAN
2010
MODUL I
Tugas Pendahuluan
1. Apa yang anda ketahui Tentang HTML ?

2. Jelaskan sejarah sejarah singkat perkembangan Internet !
3. Jelaskan perkembangan HTML dan bagaimana perkembangan HTML selanjutnya
4. Dengan menggunakan HTML tampilkan Halaman berikut :
Halaman Home.htm
Jika Surabaya diklik maka akan Link ke halaman Surabaya.htm

Jika Tuban diklik maka akan aka Link ke Halaman Tuban.HTML
Jika Back diklik akan kembali ke halaman Home.html
Web Statis HTML
 Bentuk Format Dasar Dokument HTML

<HTML>
<head> <title>judul halaman </title></head>
<body>
Isi document yang akan ditampilkan di browser
</body>
</HTML>
1 Tag - Tag Dasar HTML
Start Tag Kegunaan
<html> Mendefinisikan sebuah dokumen html
<body> Mendefinisikan isi/badan suatu dokumen
<h1>-<h6> Mendefinisikan heading ke 1 s/d heading ke 6
<p> Mendefinisikan sebuah paragraph
<br> Menyisipkan sebuah line break
<hr> Mendefinisikan sebuah garis horizontal
<!--> Mendefinisikan komentar dalam kode sumber HTML
2 Tag untuk Pemformatan Teks

Start Tag Kegunaan
<b> Mendefinisikan teks tebal
<em> Mendefinisikan teks yang dimiringkan
<i> Mendefinisikan teks yang dimiringkan
<sub> Defines subscripted text
<sup> Mendefinisikan teks yang posisinya lebih ke atas
<u> Mendefinisikan teks yang bergaris bawah
<pre> Mendefinisikan teks preformatted
<html>
<head><title> Halaman Pertamaku</title></head><body>
<h1>ini adalah heading 1</h1>
<h2><font color=”blue”>ini adalah heading 2</font></h2>
<h2>ini adalah heading 2 </h2>
<p>ini adalah paragraph akan ditampilkan terus menerus secara otomatis terpengaruh browser anda tidak
terpengaruh spasi otomatis akan teratur sendiri<br>
ganti baris<br>ganti baris <br>ganti baris.<br>
<hr>
<! Komentar tidak ditampilkan di browser>
</body>
</html>
<html>
<head><title>Pemformatan teks</title></head>
<body bgcolor=”green”>
<h1 align="center"> <font color="red">KOMPUTER</font></h1>
<p>Sebenarnya computer berasal dari bahasa latin yaitu <b>compute</b>
yang artinya menghitung atau <i> to copmpute</i> yang sekarang menjadi<u>
computer</u> dasar kerjanya yaitu sebagai alat hitung, jadi dahulu kalkulator juga
termasuk computer:<br> <br></p>
contoh spesifikasi computer : <br>
<pre>
Prosesor Pentium 4
HDD 20 gb
RAM 512
MOBO Asus </pre><br>
<p> <font color="red" size="4">keterangan tag pre akan <sup>ditampilkan </sup>apa
adanya di <sub>browser
<body>
</html>
3. Tag List
Start Tag Kegunaan
<ol> Mendefinisikan sebuah list ordered
<ul> Mendefinisikan sebuah list unordered
<li> Mendefinisikan sebuah item dalam list
<dl> Mendefinisikan sebuah list definisi
<html> <h4>List dengan angka romawi:</h4>

<body><title>List </title> <ol type="I">
<h4>List bernomor:</h4> <li>Apel</li>
<ol> <li>Pisang</li>
<li>Apel</li> <li>Lemon</li>
<li>Pisang</li> <li>Jeruk</li>
<li>Lemon</li> </ol>
<li>Jeruk</li> <h4>List dengan angka romawi
kecil:</h4>
</ol>
<h4>List dengan huruf:</h4> <ol type="i">
<li>Apel</li>
<ol type="A">
<li>Apel</li> <li>Pisang</li>
<li>Lemon</li>
<li>Pisang</li>
<li>Lemon</li> <li>Jeruk</li>
<li>Jeruk</li> </ol>
</ol> </body>
<h4>List dengan huruf kecil:</h4> </html>
<ol type="a">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
HTML
(LINK, FRAME, DAN TABEL)

Situs web biasanya tidak hanya terdiri atas 1 halaman saja (homepage, halaman awal/
pembuka). Bila suatu situs terdiri atas lebih dari 1 halaman, situs tersebut pasti
menggunakan hyperlink.
1. Link
Start Tag Kegunaan
<a> Mendefinisikan sebuah anchor
Atribut Target Kegunaan
target="_blank" Memuat dokumen baru ke dalam window baru yang kosong
Memuat dokumen baru ke dalam window yang sama dengan anchor

target="_self"
(default)
Memuat dokumen baru ke dalam parent frame (bila menggunakan

target="_parent"
frame)
Memuat dokumen baru ke dalam keseluruhan window browser

target="_top"
(cara yang umum digunakan untuk keluar dari frame)
2. Frame
Start Tag Kegunaan
<frameset> Mendefinisikan sebuah himpunan frame
<frame> Mendefinisikan sebuah sub window (sebuah frame)
Mendefinisikan sebuah bagian noframe untuk browser yang tidak

<noframes>
dapat menangani frame
Frameset (horisontal dan vertikal)
<html>
<frameset rows="50%,50%">
<frame src="frame1.htm">
<frameset cols="25%,75%">
</frameset>
</frameset>
</html>
3. Table
Start Tag Kegunaan
<table> Mendefinisikan sebuah table
<th> Mendefinisikan sebuah header table
<tr> Mendefinisikan suatu barisan dalam table
<td> Mendefinisikan suatu sel dalam table
<caption> Mendefinisikan sebuah caption untuk table
<colgroup> Mendefinisikan sekelompok kolom dalam table
Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam

<col>
sebuah table
<thead> Mendefinisikan suatu head table
<tbody> Mendefinisikan suatu badan tabel
<tfoot> Mendefinisikan suatu footer tabel

<html> <table border="15">
<body> <tr>
<p> <td>100</td>
Setiap tabel dimulai dengan tag table. <td>200</td>
Setiap baris tabel dimulai dengan tag tr. <td>300</td>
Setiap data dalam tabel dimulai dengan </tr>

tag td.
<tr>
</p>
<td>400</td>
<h4>Satu baris satu kolom dengan
border normal:</h4> <td>500</td>
<table border="1"> <td>600</td>
<tr> </tr>
<td>100</td> </table>
</tr> <h4>Tabel ini tidak memiliki

border:</h4>
</table>
<table border="0">
<h4>Satu baris dan tiga kolom dengan
border tebal:</h4> <tr>
<table border="8"> <td>100</td>
<tr> <td>200</td>
<td>100</td> </tr>
<td>200</td> <tr>
<td>300</td> <td>300</td>
</tr> <td>400</td>
</table> </tr>
<h4>Dua baris dan tiga kolom dengan </table></body></html>

border sangat tebal:</h4>
Tugas Praktikum
1. Dengan menggunakan HTML Buat tampilan dibawah ini:
Keterangan :
 Frame terdiri dari 3 bagian
 Masing- masing bagian terhubung oleh halaman lain
 Jika bagian kiri frame diklik akan menampilkan halaman pada bagian kanan fame.
MODUL II
Tugas Pendahuluan
1. Lakukan semua percobaan Dibawah Tunjukkan Outputnya (image bebas)!!!

2. Beri penjelasan pada source yang anda kerjakan
HTML
Menyisipkan gambar
Start Tag Kegunaan
<img> Mendefinisikan sebuah gambar
<map> Mendefinisikan sebuah image map (peta gambar)
<area> Mendefinisikan sebuah area di dalam suatu image map
Insert Image
<html>
<body background="background.jpg">
<h3>Lihatlah, ada gambar latar belakang!</h3>
<p>Baik file gambar dengan format gif maupun jpg dapat digunakan sebagai latar belakang
HTML.</p>
<p>Bila gambar yang digunakan lebih kecil dari halaman situs, gambar akan ditampilkan berulang-
ulang.</p>
<p>
Sebuah gambar dari folder lokal:
<img src="gambar1.gif" width="144" height="50">
</p>
<p>
Gambar dari folder lain:
<img src="../images/gambar2.gif" width="33" height="32">
</p>
</body>
</html>
Mengatur posisi gambar
<html>
<body>
<p>
Sebuah gambar
<img src ="../images/contoh.gif" align="bottom" width="100" height="50">
di antara teks
</p>
<p>
Sebuah gambar
<img src ="../images/contoh.gif" align="middle" width="100" height="50">
di antara teks
</p>
<p>
Sebuah gambar
<img src ="../images/contoh.gif" align="top" width="100" height="50">
di antara teks
</p>
<p>Perhatikan bahwa default pengaturan adalah bottom (diletakkan di bagian bawah)</p>

<p>
Sebuah gambar
<img src ="../images/contoh.gif" width="100" height="50">
di antara teks
</p>
<p>
Sebuah gambar di depan teks
</p>
<p>
Sebuah gambar di belakang teks
</p>
</body>
</html>
Menampilkan teks alternatif untuk gambar
<html>
<body>
<img src="../images/gambar.gif" alt="Keterangan" width="32" height="32">
<p>
Browser text-only hanya akan menampilkan teks dalam atribut "alt", yaitu Keterangan".
Perhatikan bahwa bilamana Anda membawa pointer mouse di atas gambar tersebut maka teks
alternatif akan ditampilkan.
</p>
</body></html>
Latar belakang dengan warna teks yang sesuai
<html>
<body bgcolor="#d0d0d0">
<p>
Paragraf ini terlihat enak dibaca karena menggunakan kombinasi warna latar belakang dan warna
teks yang sesuai.
</p>
</body>
</html>
Latar belakang dengan warna teks yang buruk
<html>
<body bgcolor="#ffffff" text="yellow">
<p>
Paragraf ini terlihat tidak nyaman dibaca karena menggunakan kombinasi warna latar belakang dan
warna teks yang tidak sesuai.
</p>
</body>
</html>
Tugas Praktikum
1. Buat Halaman web tentang penjualan online ada list harga dan barang, minimal ada 5 halaman
yang saling berhubungan.
MODUL III
Tugas pendahuluan :
1. Apa yang anda ketahui tentang php ?

2. Apa perbedaan clien side dan server side beserta contoh aplikasinya ?
3. Bagaimanakah sejarah php dari php versi awal sampai php versi terbaru ?
4. Tulis syntax singkat php ?
5. Apa kelebihan dan kelemahan php ?
Web Dinamis PHP
 Penggunaan Script PHP
Blok scripting PHP selalu dimulai dengan <? Php dan diakhiri dengan?>. Blok scripting PHP dapat
ditempatkan di manapun dalam dokumen. Pada server dengan dukungan singkatan diaktifkan, Anda
bisa memulai blok scripting dengan <? dan diakhiri dengan?>. Untuk kompatibilitas maksimal, kami
sarankan Anda menggunakan bentuk standar (<?Php)
<? Php
?>
Sebuah file PHP secara normal berisi tag HTML, seperti file HTML, dan beberapa kode scripting PHP. Di
bawah ini, kita memiliki contoh script PHP sederhana yang mengirimkan teks "Hello World" ke browser:
<html>
<body>
<? Php
echo "Hello World";
?>
</ Body>
</ Html>
Setiap baris kode PHP harus diakhiri dengan titik koma. titik koma adalah pemisah dan digunakan untuk
membedakan satu set instruksi dari yang lain. Ada dua pernyataan dasar untuk teks output dengan PHP:
echo dan print. Pada contoh di atas kita telah menggunakan echo pernyataan ke output teks "Hello
World". Catatan: File ini harus memiliki ekstensi php.. Jika file tersebut memiliki ekstensi. Html, kode
PHP tidak akan dieksekusi.
 Komentar dalam PHP
Dalam PHP, kita menggunakan / / untuk membuat komentar baris tunggal atau / * dan * / untuk
membuat blok komentar yang besar.
<html>
<body>
<? Php
/ / Ini adalah komentar
/*
Ini adalah
komentar
blok
*/
?>
</ Body>
</ Html>
Tugas Praktikum :
1. Gunakan notepad atau editor yang lain sebagai editor php !
a. Dengan menggunakan perintah print atau echo tampilkan halaman web sebagai berikut
b. Tabel
c. Garis dan Tulisan
2. Tulislah langkah membuat program php sampai menampilkan di Browser.

MODUL IV
Tugas Pendahuluan
1. Sebutkan jenis komentar dalam php !

2. Ada berapa type data dalam php sebutkan dan jelaskan !
3. Buatlah script php yang menyatakan variable dan penggunaanya ,mengetahui tanggal sekarang
beserta outputnya ( Satu halaman )!
4. Apa yang dimaksud dengan konstanta ? berikan contoh program dan outputnya !
5. Sebutkan dan jelaskan fungsi-funsgi yang ada pada string !
Variabel dalam PHP
Variabel digunakan untuk menyimpan informasi Variabel digunakan untuk menyimpan nilai-nilai, seperti
teks, nomor string atau array. Ketika variabel dideklarasikan, dapat digunakan berulang-ulang dalam
naskah anda. Semua variabel dalam PHP dimulai dengan tanda simbol $. Cara yang benar
mendeklarasikan variabel di PHP:
$Var_name=nilai;
Beginer PHP programmer sering lupa tanda $ pada awal variabel. Dalam hal ini tidak akan bekerja. Mari
kita mencoba menciptakan sebuah variabel yang berisi string, dan variabel yang berisi nomor:
<? Php
$Txt = "Hello World!";
$X =16 ;
?>
Dalam PHP, variabel tidak perlu dideklarasikan sebelum menambahkan sebuah nilai. Dalam contoh di
atas, Anda melihat bahwa Anda tidak perlu memberitahu PHP yang tipe data variabel tersebut. PHP
secara otomatis mengkonversi variabel dengan jenis data yang benar, tergantung pada nilainya. Dalam
bahasa pemrograman sangat mengetik, Anda harus menyatakan (mendefinisikan) jenis dan nama variabel
sebelum menggunakannya. Dalam PHP, variabel dinyatakan secara otomatis saat Anda menggunakannya.
 Aturan untuk penamaan Variabel
• Nama variabel harus dimulai dengan huruf atau underscore "_"
• Nama variabel hanya dapat berisi karakter alfanumerik dan garis bawah (a-z, A-Z, 0-9, dan _ )
• Nama variabel tidak boleh berisi spasi. Jika nama variabel lebih dari satu kata, itu harus dipisahkan
dengan sebuah garis bawah ($my_string), atau dengan kapitalisasi ($myString) Variabel String di PHP
Variabel string digunakan untuk nilai-nilai yang mengandung karakter. Setelah kita membuat sebuah
string kita bisa memanipulasinya. string dapat digunakan secara langsung dalam fungsi atau dapat
disimpan dalam variabel.
Di bawah ini, script PHP memberikan teks "Hello World" ke variabel string bernama $txt
<? Php
$Txt = "Hello World";
echo $txt;
?>
Output dari kode di atas akan menjadi:
Hello World
<?php
$angka="469.80";
echo"angkanya adalah : $angka <br> ";
settype($angka,"Double");
print("type Double = $angka<br>");
settype($angka,"Integer");
print("type
Output : integer = $angka<br>");
?>
<html>
<head>
<title>Mendapatkan Variabel dalam HTML</title>
</head>
<body><form name="form1" method="post" action="post.php">
<table width="35%" border="0" align="center">
<tr>
<td colspan="2" bgcolor="#00FF00"> <div align="center">Masukkan

User And
Password</div></td>
</tr>
<tr bgcolor="#FF0000">
<td width="24%" height="38">USER</td>
<td> <input type="text" name="user"> </td>
</tr>
<tr>
<td height="40">PASSWORD</td>
<td> <input type="password" name="pswt" > </td>
</tr>
<tr bgcolor="#CCCCCC">
<td colspan="2">
<input type="submit" name="Submit2" value="Submit">
<input type="reset" name="Reset" value="Reset"> </td>
</tr>
</table>
</form>
</body>
</html>
Variabel melalui HTML (Get dan Post )
 Script dengan method Post
Keterangan : objek harus berada pada form dan penamaan objek harus diperhatikan
Script dengan mengambil variable html :
<?php Output : post.php
echo"<body bgcolor=#CCCCCC>";
echo"<font size = 4 color = red>Selamat Datang

<BR> Yang Anda kirimkan :<br></font>";
echo" Nama anda $_POST[user]<BR> Password

Anda $_POST[pswt]";
?>
Tugas Praktikum
1. Dengan menggunakan php buat program untuk menmpilkan halaman dibawah ini, memanfaatkan
fungsi String untuk mengmbil sebagian string :
Buat halaman questioner untuk mengirimkan data mahasiswa yang berkaitan dengan Fakultas dan Prodi
TPL Tampilkan hasil yang anda insertkan !
contoh :
Data_question.php
MODUL V
Tugas Pendahuluan
1. Apa perbedaan antara Konstanta dan variable

2. Berapa Jenis Operator yang ada pada PHP jelaskan
3. Apakah perbedaan perbedaan struktur kondisi if, if else dan if than else !
4. Dengan Memakai Wile tampilkan halaman browser sbb:
5. Buatlah file PHP untuk melakukan operasi penjumlahan. Tampilan awal adalah sebagai berikut :
Setelah dipilih tombol ”Hitung”, maka tampilannya menjadi seperti berikut:

Operator dan
Struktur Kontrol dalam PHP
 Operator
Aritmatika
Operator Description Example Result
+ Addition x=2 4
x+2
- Subtraction x=2 3
5-x
* Multiplication x=4 20
x*5
/ Division 15/5 3
5/2 2.5
% Modulus (division remainder) 5%2 1

10%8 2
10%2 0
++ Increment x=5 x=6

x++
-- Decrement x=5 x=4

x--
Penugasan
Operator Example Is The Same As
= x=y X=y
+= x+=y X=x+y
-= x-=y X=x-y
*= x*=y X=x*y
/= x/=y X=x/y
.= x.=y X=x.y
%= x%=y X=x%y
Perbandingan
Operator Description Example
== is equal to 5==8 returns false
!= is not equal 5!=8 returns true
<> is not equal 5<>8 returns true
> is greater than 5>8 returns false
< is less than 5<8 returns true
>= is greater than or equal to 5>=8 returns false
<= is less than or equal to 5<=8 returns true
Operator Logika
Operator Description Example
&& And x=6

y=3
(x < 10 && y > 1) returns true

|| Or x=6
y=3
(x==5 || y==5) returns false

! Not x=6
y=3
!(x==y) returns true

Struktur Kontrol
Pada dasarnya, program merupakan serangkaian pernyataan-pernyataan. Aliran kontrol, seperti

yang tersirat dari namanya, mengontrol bagaimana pernyataan-pernyataan tersebut dijalankan.
Biasanya aliran kontrol dibuat berdasarkan serangkaian kondisi yang ada.
Pernyataan if
Pernyataan if biasa digunakan untuk mengambil keputusan berdasarkan suatu kondisi. PHP
memiliki tiga macam bentuk if, yaitu if saja, if-else, dan if-elseif. Pada contoh berikut, kondisi
yang diujikan adalah “$a bernilai 10 ”.
if ($a == "10") {
// jalankan suatu kode
Setelah nilai $a dievaluasi, jika ternyata variabel tersebut bernilai 10 (berarti kondisi
terpenuhi/benar), maka kode yang terdapat di dalam kurung kurawal akan dijalankan. Namun,
jika ternyata variabel tersebut bernilai selain 10 (berarti kondisi tidak terpenuhi/salah), maka
kode di dalam kurung kurawal akan diabaikan dan eksekusi program akan berlanjut ke kode
berikutnya.
Untuk memberikan serangkaian pernyataan alternatif dimana nilai $a tidak harus memenuhi
kondisi bernilai 10, tambahkan sebuah pernyataan else pada aliran kontrol tersebut. Dengan
demikian bagian dari pernyataan yang lainnya akan dijalankan saat kondisi tidak terpenuhi.
if ($a == "10") {
echo "a bernilai 10";
} else {
echo "a tidak bernilai 10";
}
Pernyataan elseif dapat ditambahkan pada struktur untuk mengevaluasi sebuah kondisi alternatif
sebelum sampai pada pernyataan else yang terakhir. Sebagai contohnya, pada struktur berikut ini
pertama-tama mengevaluasi apakah $a bernilai 10. Jika kondisi if tersebut tidak terpenuhi
(salah), maka pernyataan elseif akan dievaluasi. Jika kondisi tersebut terpenuhi (benar), maka
kode yang terdapat di dalam kurung kurawal akan dijalankan. Jika ternyata pernyataan kondisi
tersebut masih belum benar, maka eksekusi program akan berlanjut hingga kepada pernyataan
else yang terakhir.
if ($a == "10") {
echo "a bernilai 10";
} elseif ($b == "8") {
echo "b bernilai 8";
} else {
echo "a tidak bernilai 10 and b tidak bernilai 8.";
Pernyataan while
Tidak seperti struktur if, dimana setiap kondisi dievaluasi sekali dan sebuah aksi dilakukan
berdasarkan pada nilai benar atau salahnya, pernyataan while akan me-loop hingga kondisinya
salah. Dengan kata lain, while loop berlanjut selama kondisinya terpenuhi/benar. Jika kondisi
tidak terpenuhi maka perintah dalam while sama sekali tidak di jalankan. Berbeda dengan While,
Do..While akan menjalankan perintah dalam while minimal 1 kali.
Sebagai contoh, while loop berikut ini, nilai variabel $a akan dicetak pada layar dan
ditambahkan satu selama nilai $a lebih kecil dari atau sama dengan 5.
$a = 0 // menentukan sebuah nilai permulaan
while ($a <= "5") {
echo "a sama dengan $a<br>";
$a++;
}
Berikut ini merupakan keluaran dari while loop tersebut :
 a sama dengan 0
 a sama dengan 1
 a sama dengan 2
 a sama dengan 3
 a sama dengan 4
 a sama dengan 5
Pernyataan for
Seperti halnya while loop, for loop mengevaluasi serangkaian pernyataan kondisi pada
permulaan tiap-tiap loop. Berikut ini merupakan syntax dari for loop :
for (expr1; expr2; expr3) {
// kode untuk dieksekusi
Pada permulaan setiap loop, ekspresi pertama dievaluasi, diikuti dengan ekspresi kedua. Jika
ekspresi kedua terpenuhi, maka loop akan berlanjut dengan pengeksekusian kode lalu
mengevaluasi ekspresi ketiga. Namun, jika ekspresi kedua tidak terpenuhi, maka loop tidak akan
berlanjut dan ekspresi ketiga tidak akan pernah dievaluasi.
Marilah kita ambil contoh yang telah digunakan pada while loop, lalu menulisnya kembali
dengan menggunakan sebuah for loop.
for ($a = 0; $a <= "5"; $a++) {
echo "a sama dengan $a<br>";
Keluaran yang diperoleh akan sama saja dengan keluaran yang dihasilkan pada penggunaan
while loop sebelumnya.
Pernyataan switch
Pernyataan switch merupakan sebuah cara sederhana untuk menampilkan tugas-tugas yang dapat
dilakukan dengan pernyataan dasar if. Tujuan dari pernyataan switch adalah memungkinkan
pihak pengembang untuk menempatkan sebuah blok kode pada masing-masing kasus (case)
yang berbeda. Berikut ini merupakan bentuk umum dari pernyataan switch :
switch($variable) {
[case <constant>:]
/* kode akan dijalankan jika $variable = 1 */
[break;]
[case <constant>:]
/* kode akan dijalankan jika $variable = 2 */
[break;]
...kasus tambahan
[default:]
/* kode akan dijalankan jika tdk ada kasus yg cocok */
Konstanta case tidak terbatas pada nilai integer sebagaimana pada bahasa lainnya seperti C. Pada
PHP, nilai konstanta dapat pula menggunakan string dan floating point number. Di dalam
penggunaannya, pernyataan switch menyediakan sebuah variabel tunggal yang nilainya akan
dibandingkan dengan nilai variabel – nilai variabel yang terdapat pada masing-masing
pernyataan kasus (case) secara individual. Pada kenyataannya, pernyataan switch serupa dengan
serangkaian pernyataan if.
Tugas Praktikum
1. Tampilkan halaman dibawah ini

2. Tampilkan halaman web sebagai berikut
<html>
<head><title>conntoh penggunaan if</title>
<font size="12"><B>Contoh penggunaan If</b><Hr><br>
<form method="Post" action="if.php">
<select name="mood">
<option value="0">Senang</option>
<option value="1">sedih</option>
<option value="2">Marah</option>
</select><input type="submit" value ="Mod saya !"></form>
<?php
if($_POST["mood"]==0)
{
Script_color.php
echo"Saya lagi <font color=blue>seneng</font>";
}
3. apa hasil Script_color.php, Operator apa yang digunakan dan berikan koment pada scriptnya !
elseif($_POST["mood"]==1)
echo"Saya lagi <font color=yellow>sedih</font>";
else
echo"Saya lagi <font color =red>marah</font>";
?>
</html>
MODUL VI
Tugas Pendahuluan
1. Apa yang dimaksud dengan Entitas, Atribut, Field, Record, Data, dan Dantum ?
2. Apa yang dimaksud dengan DBMS (Data Base Manajemen Sistem) ?
3. Sebutkan software DBMS yang anda ketahui ?
4. Buat Database dengan Nama Kampus :
 Buat table Mahasiswa
 Tampilkan Seluruh Mahasiswa tersebut
 Tampilkan Nama mahasiswa yang mengandung huruf ‘a’
MYSQL
Operasi Dasar Mysql
Masuk ke mysql :
1. Masuk ke folder ..\Xampp\mysql\bin

2. Ketik pada command prompt mysql –u root
Pastikan mysql dalam keadaan running.
3. Untuk melihat database pada mysql ketik show databases;
4. Untuk memilih database ketik use [databases];

5. Untuk melihat table yang ada pada database ketik show tables;
6. Untuk melihat desain view table ketik describe [table];
Lihat gambar :
 Membuat Database Baru

Create database nama_database;
 Create table
Masuk terlebih dahulu ke database yang dibuat dengan Sintak use [database];
create table nama_tabel ( Field1 Tipedata, Field2 Tipedata dst …..

PRIMARY KEY (Unique Field) );
 Insert Tabel
Insert into nama_tabel values (‘Field1’,’Field2’, ……);
Melihat seluruh isi table select * from nama_tabel ;
 Request dengan Where :
Menampilkan data dengan field Agama islam saja
 Update
update nama_tabel set Field1=values , Field2=values ….

Where klause ;
 Hapus
Delete from nama_tabel where klausa
Sebelum dihapus
Delete from karyawan where id_peg=’K0005’;
Setelah dihapus
Tugas Praktikum
1. Buat DataBase dengan nama Dataku

2. Buat tabel buku_telepon (Fieldnya dirancang sendiri) data diisi minimal 20 record
 Tampilkan nama,nomor_telepon dengan nomor jenis ‘simpati’
 Tampilkan nama, nomor_telepon dengan nomor jenis ‘XL’
 Tampilkan nama, nomor_telepon, alamat yang jenis kelaminya ‘Wanita’
3. Edit salah satu record yang ada .

4. Hapus record dengan Kriteria nomer_telepon = ‘IM3’
MODUL VII
Tugas Pendahuluan
1. Bagaimanakah sintaq sql untuk tambah data, edit, hapus, juga menampilkan data
2. Apa perbedaan menggunakan method get dan post
3. Lakukan semua percobaan diatas . . . .
Hasil dan scriptnya di Print out !!!
Database
mysql phpmyadmin
http://localhost//phpmyadmin
Create database TOKO_ONLINE

Buat table dan banyaknya field
Isikan field yang dbutuhkan
Tabel barang sudah terbentuk
Browse : Menampilkan record data
Structure : Menampilkan Struktur View dari table tersebut
SQL : Jika ingin menggunakan sintak sql untuk operasi database
Search : Pencarian record.
Insert : Insert data
Export : Export data ke extention yang lain.
Import : Import data dari extention lain ke mysql.
DST ………..
Koneksi
PHP Mysql
Untuk koneksi mysql dengan PHP
Menggunakan perintah :
mysql_connect(Server,User,Password);
Untuk Koneksi Database menggunakan :
mysql_select_db(‘data_base’);
Untuk perintah request dari mysql menggunakan :
mysql_query(“Sintaks_sql”);
Untuk menampung hasil queri menggunakan :
mysql_fetch_array();
Perhatikan Sintax dibawah ini !!!
Hasil:
Fakultas tidak ditampilkan Karena case sensitive seharusnya $hasil[FAKULTAS], sesuai dengan
field yang ada pada table mahasiswa
Tambahkan sintak membuat table pada Script supaya tampilanya menjadi lebih Jelas
Hasil:
Pakai include() untuk penghematan sintaks php
File konek.php
File Tampil_include.php
Hasil
File koneksi cukup dipanggil dengan include(‘Koneksi.php’); jika halaman yang kita koneksikan
dengan mysql banyak, kita tidak perlu mengetik ulang skrip koneksi tersebut .
Tambah Data
Script :
Semua objek yang akan dieksekusi terletak di <form></form> dengan menggunakan method
POST yang nanti inputan tersebut akan dikirim ke halaman exe_tambah.php <input name =
nama_objek> berfungsi sebagai objek untuk menginputkan data tertentu, supaya terlihat hasilnya
script header(‘location: …..’) akan manampilkan halaman Tampil_include.php yang berisi queri
untuk menampilkan data .
Exe_tambah.php
Tugas Praktikum
1. Buat halaman web tentang suatu produk. Halaman terdiri dari table inputan yang
terkoneksi dengan database. field terdiri dari kde_barang, nama_barang, Harga,
nama_suplier, dll …!! Lakukan tambah data dan tampilkan data tersebut.
2. Export data ke bentuk text.
MODUL VIII
Tugas Pendahuluan
1. Apa yang dimaksud dengan ERD, Relation, Primary key, Foreign key dalam Database
dan bagaimana Notasinya.
2. Buat suatu database tentang penjulan suatu produk, minimal ada 3 tabel.
Connect PHP
Mysql UPDATE, DELETE
Tugas Pendahuluan
1. Apa yang dimaksud dengan ERD, Relation, Primary key, Foreign key dalam Database
dan bagaimana Notasinya.
2. Buat suatu database tentang penjulan suatu produk, minimal ada 3 tabel.
Rancang Juga DFD nya !
 Edit
Buat halaman edit data
Edit.php
Tampilkan data data mahasiswa dan tambahkan link untuk edit data dengan method ‘get’ lihat
<a href=halaman_edit.php?NPM=$hsil[NPM]>Edit</a> akan menghubungkan dengan
halaman_edit.php dan menyimpan nilai dari NPM, yang nantinya akan digunakan pada
halaman_edit.php
Hasil :
Halaman_edit.php
Hasil:
Akan diedit menjadi :
Setelah edit di klik akan menghuungkan halaman exe_edit.php
Exe_edit.php
Hasil edit.php
NPM 460302031 telah berhasil di edit.
 Delete
Tambahkan script < a href=delet_mhs.php?NPM=$hasil[NPM] >

Script delet_mhs.php
Hasil:
Tugas Praktikum
1. Buat suatu table dengan operasi database insert,update dan delete !!

Praktikum WEB

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Praktikum WEB

Uploaded by

Copyright:

Available Formats

2011

AMALUDIN ARIFIA, S.Kom

UNIVERSITAS PGRI RONGGOLAWE TUBAN

1. Apa yang anda ketahui Tentang HTML ?

Jika Surabaya diklik maka akan Link ke halaman Surabaya.htm

 Bentuk Format Dasar Dokument HTML

2 Tag untuk Pemformatan Teks

<head><title> Halaman Pertamaku</title></head><body>

<h1>ini adalah heading 1</h1>

<h2><font color=”blue”>ini adalah heading 2</font></h2>

<h3>ini adalah heading 3</h3>

<h4>ini adalah heading 4</h4>

<h2>ini adalah heading 2 </h2>

<h1>ini adalah heading 1</h1>

<! Komentar tidak ditampilkan di browser>

<html> <h4>List dengan angka romawi:</h4>

<h4>List dengan huruf kecil:</h4> </html>

(LINK, FRAME, DAN TABEL)

Start Tag Kegunaan

<a> Mendefinisikan sebuah anchor

Atribut Target Kegunaan

target="_blank" Memuat dokumen baru ke dalam window baru yang kosong

Memuat dokumen baru ke dalam window yang sama dengan anchor

Memuat dokumen baru ke dalam parent frame (bila menggunakan

Memuat dokumen baru ke dalam keseluruhan window browser

Start Tag Kegunaan

<frameset> Mendefinisikan sebuah himpunan frame

<frame> Mendefinisikan sebuah sub window (sebuah frame)

Mendefinisikan sebuah bagian noframe untuk browser yang tidak

Frameset (horisontal dan vertikal)

Start Tag Kegunaan

<table> Mendefinisikan sebuah table

<th> Mendefinisikan sebuah header table

<tr> Mendefinisikan suatu barisan dalam table

<td> Mendefinisikan suatu sel dalam table

<caption> Mendefinisikan sebuah caption untuk table

<colgroup> Mendefinisikan sekelompok kolom dalam table

Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam

<thead> Mendefinisikan suatu head table

<tbody> Mendefinisikan suatu badan tabel

<tfoot> Mendefinisikan suatu footer tabel

Setiap tabel dimulai dengan tag table. <td>200</td>

Setiap baris tabel dimulai dengan tag tr. <td>300</td>

Setiap data dalam tabel dimulai dengan </tr>

<table border="1"> <td>600</td>

</tr> <h4>Tabel ini tidak memiliki

<table border="8"> <td>100</td>

<h4>Dua baris dan tiga kolom dengan </table></body></html>

1. Lakukan semua percobaan Dibawah Tunjukkan Outputnya (image bebas)!!!

Start Tag Kegunaan

<img> Mendefinisikan sebuah gambar

<map> Mendefinisikan sebuah image map (peta gambar)

<area> Mendefinisikan sebuah area di dalam suatu image map

<h3>Lihatlah, ada gambar latar belakang!</h3>

Sebuah gambar dari folder lokal:

<img src="gambar1.gif" width="144" height="50">

<img src="../images/gambar2.gif" width="33" height="32">

Mengatur posisi gambar

<img src ="../images/contoh.gif" align="bottom" width="100" height="50">

<img src ="../images/contoh.gif" align="middle" width="100" height="50">

<img src ="../images/contoh.gif" align="top" width="100" height="50">

<p>Perhatikan bahwa default pengaturan adalah bottom (diletakkan di bagian bawah)</p>

<img src ="../images/contoh.gif" width="100" height="50">