MODUL PRAKTIKUM

WEB PROGRAMMING I

Esty Purwaningsih, M.Kom

AMIK BSI Tangerang
Jl. Letnan Sutopo BSD Serpong, Bumi Serpong Damai
Sektor XIV Blok C1/1, Tangerang Selatan
 KATA PENGANTAR

Alhamdulillah, penulis panjatkan kehadirat Allah SWT, yang telah

melimpahkan rahmat dan karunia-Nya, sehingga pada akhirnya penulis dapat
menyelesaikan modul praktikum Web Programming 1 ini dengan baik. Dimana
modul praktikum ini penulis sajikan dalam bentuk buku yang sederhana.
Sebagai bahan penulisan diambil dari beberapa sumber literatur yang
mendukung penulisan ini. Modul pratikum Web Programming 1 dibuat untuk
mempermudah dalam mempelajari web programming I sebagai dasar
pembelajaran web. Penulis menyadari bahwa tanpa arahan dan dorongan dari
berbagai pihak, maka penulisan modul praktikum ini tidak akan lancar.
Penulis menyadari bahwa penulisan modul praktikum ini masih jauh dari
sempurna, untuk itu penulis mohon kritik dan saran yang bersifat membangun
demi kesempurnaan penulisan dimasa yang akan datang.
Akhir kata semoga modul praktikum ini dapat berguna bagi penulis
khususnya dan bagi para pembaca yang berminat pada umumnya.

Tangerang, 06 September 2017

Penulis,

Esty Purwaningsih, M.Kom

Modul Praktikum Web Programming I Page ii

 DAFTAR ISI

Halaman

BAB I PENGENALAN HTML ................................................................ 1

1.1.Pengertian HTML (Hypertext Markup Language) .................... 1
1.2 Struktur Dasar HTML................................................................ 1
1.3.Pembuatan Tabel Menggunakan HTML.................................... 5

BAB II PENGENALAN PHP ................................................................... 7

2.1. Pengertian PHP (PHP Hypertext Preprocessor) ...................... 7
2.2. Memasukkan Kode PHP ........................................................... 7

BAB III DASAR-DASAR PHP ................................................................. 9

3.1. Variabel ..................................................................................... 9
3.2. Tipe Data................................................................................. 10
3.3. Konstanta ................................................................................ 11
3.4. Komentar................................................................................. 11

BAB IV OPERATOR............................................................................... 12
4.1. Mengenal Operator ................................................................. 12
4.2. Jenis Operator ......................................................................... 12

BAB V PENGENALAN FORM.............................................................. 16

5.1. Komponen Form..................................................................... 16
5.2. Pengolahan Data Dari Form.................................................... 17

BAB VI PERCABANGAN ...................................................................... 22

6.1. Logika IF ................................................................................. 22
6.2. Switch Case ............................................................................. 26

BAB VII DATABASE MYSQL .............................................................. 29

7.1. Definisi Database .................................................................... 29
7.2. Mengenal MySQL ................................................................... 29
7.3. PHP Dengan MySQL.............................................................. 29
7.4. Membuat Database MySQL Menggunakan PHPMyAdmin... 30

BAB VIII CONTOH STUDI KASUS (GuestBook)............................... 33

BAB IX LATIHAN STUDI KASUS (News) .......................................... 43

DAFTAR REFERENSI ............................................................................. 44

Modul Praktikum Web Programming I Page iii

 BAB I
PENGENALAN HTML

1.1. Pengertian HTML (Hypertext Markup Language)

Hypertext Markup Language (HTML) adalah sekumpulan simbol-simbol

atau tag-tag yang dituliskan dalam sebuah file yang digunakan untuk
menampilkan halaman pada web browser (Anhar, 2010:40). HTML dibuat di
dalam text editor atau web editor, sedangkan hasilnya ditampilkan pada browser.
Editor merupakan program yang digunakan untuk menulis kode HTML.
.

1.2. Struktur Dasar HTML

Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen
dan tag akhir. Tag berakhir termasuk simbol/diikuti oleh tipe elemen, misalnya
</HEAD>. Sebuah elemen HTML dapat bersarang di dalam elemen lainnya.
Sebuah dokumen HTML standar terlihat seperti ini:

Keterangan :

1. Tag HTML secara default dimulai dari <HTML> dan diakhiri dengan
</HTML>.
2. Tag <HEAD> … </HEAD> merupakan tag kepala sebelum badan. Tag kepala
ini akan terlebih dulu dieksekusi sebelum tag badan. Di dalam tag ini
berisi tag <META> dan <TITLE>. Tag <META> merupakan informasi atau
header suatu dokumen HTML. Atribut yang dimiliki oleh tag ini antara lain:
a. HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen
HTML secara otomatis dalam jangka waktu tertentu.
b. CONTENT, atribut ini berisi informasi tentang isi document HTML
yang akan dipanggil.
c. NAME, atribut ini merupakan identifikasi dari meta itu sendiri. Tag
<META> dalam suatu document HTML boleh ada maupun tidak.
3. Tag <TITLE> … </TITLE> adalah tag judul. Sebaiknya setiap halaman
web memiliki judul, dan judul tersebut dituliskan di dalam <TITLE> …
</TITLE>. Judul ini akan muncul dalam titlebar dari browser.
4. Tag <BODY> … </BODY> adalah tag berisi content dari suatu halaman web.

Modul Praktikum Web Programming I Page 1

Contoh penggunaan script HTML

Buat lembar baru pada PHP Coder, kemudian ketikkan perintah di bawah
ini. Simpan dengan nama contoh1.php

Perintah diletakkan diantara

<body> dan </body>

Kemudian simpan file diatas di dalam folder c:\xampp\htdocs\ buat folder

baru untuk menyimpan file di dalam folder htdocs. Simpan file dengan nama
contoh1.php. Pembuatan nama file pada saat penyimpanan harus diakhiri dengan
extention “.php”

Untuk melihat hasil dari file di atas dapat menggunakan browser Mozilla,
google chrome, internet explorer atau jenis browser lain. Ketikkan pada address
bar “localhost\nama_folder_penyimpanan\”, kemudian pilih file contoh1.php

Lihat gambar di bawah ini :

Ketikkan localhost dan

nama folder

Klik pada nama file

contoh1.php

Hasilnya :

Modul Praktikum Web Programming I Page 2

 Kode-kode dalam HTML biasanya disebut TAG. Tag adalah sesuatu yang
digunakan untuk menandai elemen-elemen dalam suatu dokumen HTML. Tag
dalam HTML terdiri dari tanda lebih kecil ( < ), tanda lebih besar ( > ), dan
garismiring ( / ). Biasanya Tag dituliskan secara berpasangan, misanya <h1>
dan </h1>.

Tag yang tidak menggunakan garis miring ( / ) adalah Tag pembuka atau
awal elemen. Sedangkan yang Tag yang mengandung garis miring ( / ) adalah
penutup elemen atau akhir elemen. Namun, ada juga Tag yang dalam
pemakaiannya tidak berpasangan, diantaranya adalah :
a. Tag untuk ganti paragraph yaitu <p>
b. Tag untuk ganti baris atau line break yaitu <br>
c. Tag untuk garis datar yaitu <hr>
d. Tag list item yaitu <li>

Untuk tag yang tidak berpasangan diatas, sebaiknya tetap ditulis

menggunakan pasangannya. Hal ini dilakukan untuk mengantisipasi standar
rekomendasi HTML kedepannya. Penulisan untuk semua Tag bebas, maksudnya
kita bisa menggunakan huruf besar, huruf kecil, bahkan dicampur ( tidak case
sensitive ). Tapi untuk mengantisipasi standar penulisan Tag, sebaiknya kita
menggunakan huruf kecil semua.

Jenis – jenis tag dalam HTML, diantaranya:

<!-- --> Memberi komentar atau keterangan. Kalimat yang terletak pada tag
kontiner ini tidak akan terlihat pada browser
<a href> Membuat link ke halaman lain atau ke bagian lain dari halaman
tersebut
<a name> Membuat nama bagian yang didefinisikan pada link pada halaman
yang sama
<applet> Sebagai awal dari Java applets
<area> Mendefinisikan daerah yang dapat diklik (link) pada image map
<b> Membuat teks tebal
<basefont> Membuat atribut teks default: jenis,ukuran dan warna font
<bgsound> Memberi (suara latar) background sound pada halaman web
<big> Memperbesar ukuran teks sebesar satu point dari defaultnya
<blink> Membuat teks berkedip
<body> Tag awal untuk melakukan berbagai pengaturan terhadap text,
warna link & visited link
<br> Pindah baris
<caption> Membuat caption pada tabel
<center> Untuk perataan tengah terhadap teks atau gambar
<comment> Meletakkan komentar pada halaman web tidak tidak akan nampak
pada browser
<dd> Indents teks
<div> Represents different sections of text.
<embed> Menambahkan sound or file avi ke halaman web
<fn> Seperti tag <a name>
<font> Mengganti jenis,ukuran, warna huruf yang digunakan utk teks

Modul Praktikum Web Programming I Page 3

<form> Mendefinisikan input form
<frame> Mendefinisikan frame
<frameset> Mendefinisikan atribut halaman yang akan menggunakan frame
<h1> ... <h6> Ukuran font
<head> Mendefinisikan head document.
<hr> Membuat garis horizontal
<html> Berarti dokumen html
<i> Membuat teks miring
<img> Image, imagemap atau an animation
<input> Mendefinisikan input field pada form
<li> Membuat bullet point atau baris baru pada list (berpasangan
dengan tag <dir>, <menu>, <ol> and <ul> )
<map> Mendefinisikan client-side map
<marquee> Membuat scrolling teks (teks berjalan)
<nobr> Mencegah ganti baris pada teks atau images
<noframes> Jika browser user tidak mendukung frame
<ol> Mendefinisikan awal dan akhir list
<p> Ganti paragraf
<pre> Membuat teks dengan ukuran huruf yg sama
<script> Mendefinisikan awal script
<table> Membuat tabel
<td> Kolom pada tabel
<title> Mendefinisikan title
<tr> Baris pada tabel
<u> Membuat teks bergaris bawah

Contoh script penggunaan Tag HTML

Buat lembar baru pada macromedia dreamweaver, kemudian ketikkan perintah di
bawah ini dan simpan dengan nama contoh2.php

Hasil Tampilan

Modul Praktikum Web Programming I Page 4

1.3. Pembuatan Tabel Menggunakan HTML

Tabel penting peranannya dalam halaman Web, selain untuk

menampilkan teks atau gambar dalam format lajur dan kolom bias juga
menggunakan tabel untuk membantu me-layout tampilan halaman.
Tabel merupakan sebuah kotak yang terdiri atas baris/row dan
kolom.column. Untuk membuat tabel, anda menggunakan tag <table> dan
menutupnya dengan tag </table>. Anda bisa juga menambahkan atribut lain
di tag <table> pembuka. Misalnya menentukan warna, border, dan sebagainya.
Di dalam tag <table> ada beberapa tag lain yang perlu dipahami, yaitu :
a. Tag <tr>
Artinya tag untuk menuliskan baris biasa di tabel. “<tr>” singkatan dari
Table Row.
b. Tag <td>
Artinya tag untuk menuliskan kotak di dalam baris, makanya tag
<td> ada di dalam tag <tr>. “<td>” singkatan dari Table Data.
c. Tag <th>
Artinya tag untuk menuliskan kotak biasa seperti <td>, namun
untuk header tabel. “<th>” singkatan dari Table Header.

Contoh script pembuatan table

Buat lembar baru pada macromedia dreamweaver, kemudian ketikkan
perintah di bawah ini dan simpan dengan nama contoh3.php

Modul Praktikum Web Programming I Page 5

Jika dilihat di browser, maka terlihat sebagai berikut :

Latihan:

Buat script HTML untuk bentuk tampilan di bawah ini :

Modul Praktikum Web Programming I Page 6

 BAB II
PENGENALAN PHP

2.1. Pengertian PHP (PHP Hypertext Preprocessor)

Pengertian PHP menurut Kadir (2008:358) ”PHP merupakan bahasa

pemrograman skrip yang diletakkan dalam server yang biasa digunakan untuk
membuat aplikasi web yang bersifat dinamis”. Berbeda dengan HTML yang
hanya bias menampilkan konten statis, PHP bisa berinteraksi dengan database, file
dan folder, sehingga membuat PHP bisa menampilkan konten yang dinamis dari
sebuah website. Dengan menggunakan PHP maka maintenance suatu situs web
menjadi lebih mudah. Proses Update data dapat dilakukan dengan menggunakan
aplikasi yang dibuat dengan menggunakan script PHP.

2.2. Memasukkan Kode PHP

Tidak seperti halaman HTML biasa, kode PHP tidak akan diberikan
oleh server secara langsung ketika ada permintaan dari client (browser), namun
melalui pemrosesan dari sisi server, makanya PHP disebut skrip server-side.
Kode PHP dimasukkan ke dalam kode HTML dengan cara menyelipkannya
di dalam kode HTML. Untuk membedakan kode PHP dengan kode HTML, di
depan kode PHP tersebut diberi tag pembuka dan diakhir kode PHP diberi tag
penutup.
Dengan adanya kode PHP, sebuah halaman web bisa melakukan banyak hal
yang dinamis, seperti mengakses database, membuat gambar, membaca dan
menulis file, dan sebagainya. Hasil akhir pengolahan kode PHP akan
dikembalikan lagi dalam bentuk kode HTML untuk ditampilkan di browser.
Ada 4 jenis tag yang bisa digunakan untuk memasukkan kode PHP.

Tabel III.1
Jenis-jenis Tag PHP
Jenis Tag Tag Pembuka Tag Penutup
Tag Standar <?php ?>
Tag Pendek <? ?>
Tag ASP <% %>
Tag Script <script language = “php”> </script>

Yang dapat langsung diterapkan disemua platform adalah tag standard dan
tag script. Di dalam modul praktikum ini bahasa pemrograman yang digunakan
adalah PHP Versi 5 sehingga jenis tag yang harus digunakan adalah tag standar.
Untuk tag lainnya perlu penyetingan di server oleh administrator server.

Modul Praktikum Web Programming I Page 7

Contoh Script PHP
Buka file baru di PHP Coder. Kemudian ketikkan script seperti di bawah ini :

Simpan file dengan nama contoh4.php

Untuk melihat hasilnya buka browser masuk ke dalam localhost dan

folder penyimpanan. Pilih file contoh4.php maka akan tampil hasilnya
seperti ini :

contoh4.php merupakan contoh script php yang berdiri sendiri tanpa

ada tambahan script yang lain. Perintah echo merupakan perintah yang
digunakan untuk mencetak. Script PHP bisa juga digabung dalam tag
HTML.

Modul Praktikum Web Programming I Page 8

 BAB III
DASAR-DASAR PHP

3.1. Variabel

Variabel merupakan sebuah istilah yang menyatakan sebuah tempat

yang menampung nilai-nilai tertentu di mana nilai di dalamnya bisa
diubah-ubah. Variable penting karena tanpa adanya variable tidak bisa
menyimpan nilai tertentu untuk diolah.
Variabel ditandai dengan adanya tanda dolar ($) yang kemudian bisa
diikuti dengan angka, huruf, dan underscore. Namun variable tidak bisa
mengandung spasi. Berikut ini contoh pendefinisian variable. Untuk
mendefinisikan variable, hanya perlu menuliskannya maka otomatis
variable dikenali oleh PHP.
$nama
$no_telp
$_pekerjaan

Adapun aturan dalam membuat variabel :

a. Tersusun dari karakter huruf, angka dan underscore(_)
b. Tidak boleh mengandung spasi
c. Karakter pertama nama pengenal harus dari karakter huruf/underscore.
d. Huruf kecil dan besar dibedakan

Buat script PHP seperti dibawah ini dan simpan dengan nama contoh5.php:

Modul Praktikum Web Programming I Page 9

Hasil tampilan:

3.2. Tipe Data

Berbeda dengan bahasa pemrograman lain, variable di PHP lebih

fleksibel. Ada 6 variabel dasar yang dapat diakomodasi di PHP, seperti
terlihat di tabel.

Tabel IV.1.
Jenis-jenis tipe data
Tipe Contoh Penjelasan
Integer 1500 Semua angka bukan pecahan
Double 186,78 Nilai pecahan
String “Khayla” Kumpulan karakter
Boolean False Salah satu nilai True atau False
Object Sebuah instance dari class
Array Larik

Misalnya untuk mengubah variable menjadi string, kita dapat menggunakan

perintah:
$var_string = (string) $angka;

contoh6.php:

Modul Praktikum Web Programming I Page 10

Hasil Tampilan :

3.3. Konstanta

Selain variable, sebuah program umumnya juga memungkinkan

adanya konstanta. Konstanta fungsinya sama seperti variable namun
nilainya statis/konstan dan tidak bisa berubah. Cara untuk mendefinisikan
konstanta adalah :

Define (“NAMA_KONSTANTA”, nilai_konstanta);

Setelah didefinisikan, kita dapat langsung menggunakannya dengan

mengetikkan nama konstanta tersebut. Nama konstanta umumnya diketik
menggunakan huruf besar.

3.4. Komentar

Program merupakan kegiatan menuliskan bahasa yang dipahami

oleh mesin. Walaupun bahasa yang digunakan adalah bahasa tingkat tinggi,
namun tent masih tidak semudah dipahami oleh bahasa biasa. Untuk itu
kita bisa menggunakan komentar. Berikut ini contoh pembuatan komentar
di php.
//komentar satu baris
#ini juga komentar satu baris
/*komentar
Banyak baris
Kode di sini tidak
Dieksekusi oleh parser */

Modul Praktikum Web Programming I Page 11

 BAB IV
OPERATOR

4.1. Mengenal Operator

Suatu simbol yang berfungsi untuk menyusun sebuah ekspresi maupun

operasi. Sedangkan yang dioperasikan operator disebut dengan operand.

4.2. Jenis Operator

1. Operator Aritmatika
Operator ini digunakan untuk melakukan perhitungan matematika,
sebagian berikut :
Tabel IV.1
Operator Aritmatika
Operator Fungsi
+ Penambahan
- Pengurangan
/ Pembagian
* Perkalian
% Sisa Pembagian
++ Inkremen/Penaikan
-- Dekremen/Penurunan

Buat script dengan menggunakan Operator Aritmatika dan simpan dengan

contoh7.php:

Hasil Output:

Modul Praktikum Web Programming I Page 12

2. Operator Perbandingan
Operator perbandingan digunakan untuk menghasilkan 2 nilai yang
hasil akhirnya adalah nilai Boolean true dan false. Operator ini
sangat berguna dalam pemrograman karena bisa menentukan arah
pemrograman. Operator perbandingan di PHP adalah :

Tabel IV.2
Operator Pembanding
Operator Nama Contoh Hasil
== Sama dengan 6==6 False
!= Tidak sama dengan 3!=3 False
> Lebih besar 1>5 False
>= Lebih besar atau sama dengan 3>=4 False
< Lebih kecil 2<4 True
<= Lebih kecil atau sams dengan 5<=4 False

Buat script seperti dibawah ini dan simpan dengan nama contoh8.php

Hasil tampilan:

Modul Praktikum Web Programming I Page 13

3. Operator Logika
Operator untuk menyusun kalimat ekspresi/ungkapan logika. Hasil operasi
ini akan didapatkan nilai satu jika benar dan nol jika salah.

Tabel IV.3
Operator Logika
Operator Fungsi
AND atau && Operasi logika AND
OR atau || Operasi logika OR
XOR Operasi logika eksklusife OR
! Ingkaran/negasi

Buat script seperti dibawah ini, dan simpan dengan nama contoh9.php

Hasil Output :

Modul Praktikum Web Programming I Page 14

4. Operator String
Dalam PHP juga tersedia operator string, yaitu digunakan untuk
operasi penggabungan teks. Adapun symbol yang digunakan yaitu
berupa karakter titik (.)

Buat script seperti dibawah ini dan simpan dengan nama contoh10.php

Hasil tampilan:

Latihan Operator

Buat script menggunakan bahasa pemrograman PHP untuk menghitung

luas lingkaran menggunakan fungsi operator aritmatika dan operator string
dengan ketentuan phi=3,14 jari-jari=14. Hitung Luas Lingkaran=phi * jari-jari *
jari-jari
Buat variable teks1 yang berisi = “Mari Berhitung”, variable teks2 yang
berisi = “Luas Lingkaran” ,variable teks3 yang berisi = “Selamat Berhitung”.
Buat perintah untuk menggabungkan nilai dari variable teks1, teks2 dan teks3
menggunakan operator string.

Outputnya sebagai berikut :

Modul Praktikum Web Programming I Page 15

 BAB V
PENGENALAN FORM

5.1. Komponen Form

Sebuah website dinamis seringkali memerlukan interaksi antara browser

client dan server bisa berupa pemasukan data teks, angka, atau upload file untuk
diproses oleh server. Untuk mewadahi suatu data yang dikirimkan oleh browser
client, dibutuhkan adanya FORM HTML. Penggunaan form misalnya untuk
pendaftaran keanggotaan, pemasukan kode kartu kredit, login user, transaksi
perbelanjaan, dan upload file.

Dalam FORM HTML terdapat beberapa komponen yang bisa

digunakan, antara lain :
a. Form

<FORM ACTION=action METHOD=method ENCTYPE=media type>

</FORM>

b. Text Box

Text box : untuk menginput data string ataupun angka.

<INPUT TYPE=TEXT NAME=”nama_variabel” VALUE=”value”>

c. Text Area

Text area : untuk menginput string ataupun angka yang terdiri atas banyak
baris.

<textarea rows=” ” cols=” ” name=”nama_variabel”> </textarea>

d. Radio buton

Radio buton : untuk memilih satu pernyataan dari beberapa

pernyataan yang disediakan.

<input type=”radio” name=”nama_variabel” value=” ”>Isi_Radio

Modul Praktikum Web Programming I Page 16

e. Combo Box
Combo box untuk menampilkan daftar data.

<select name=”nama_variabel” value=” “>

<option>Combo1</option>
<option>Combo2</option></select>

f. Check Box
Check box untuk memilih satu atau lebih pernyataan dari beberapa
pernyataan yang disediakan.

<input type=”checkbox” name=”nama_variabel” value=”ON” checked>

g. Submit
Submit untuk mengirimkan semua variable data pada komponen-
komponen form yang ada.

<input type=”submit” name=”submit” value=”submit”>

h. Reset
Reset untuk membatalkan semua penginputan yang telah dituliskan.

<input type=”reset” name=”reset” value=”reset”>

5.2. Pengolahan Data Dari Form

Form di HTML dikenal dengan adanya tag <FORM> dan ditutup dengan
tag </FORM>. Di dalam tag pembuka <FORM> diikuti dengan atribut
action dan method.
Action menjelaskan ke halaman yang digunakan untuk memproses
input, sementara method digunakan untuk mengatur cara mem-parsing konten
Web menerima input dari user atau pengunjung menggunakan metode GET dan
POST.
GET akan mengirimkan data bersama dengan URL, sedangkan POST
akan mengirimkannya secara terpisah. User mengirimkan data input dengan
mengisi teks atau pilihan pada attibut form html.

Modul Praktikum Web Programming I Page 17

 Proses Form menggunakan Metode GET dan simpan dengan nama:
methodget.php

Hasilnya :

Buat file untuk memproses variable yang diberikan oleh file

methodget.php, beri nama file : prosesget.php

Data dikirimkan bersama dengan

Hasil Tampilan: URL, karena adanya penggunaan
method GET

Modul Praktikum Web Programming I Page 18

 Proses Form menggunakan Metode POST dan simpan dengan nama:
methodpost.php

Hasil Tampilan:

Buat file untuk memproses variable yang diberikan oleh file

methodpost.php, beri nama file : prosespost.php

Data tidak dikirimkan ke URL URL,

karena menggunakan method POST
Hasil Tampilan:

Modul Praktikum Web Programming I Page 19

Latihan Pembuatan Form

1. Buat form seperti dibawah ini dan simpan dengan nama: data_diri.php

2. Buat tampilan dibawah ini dan simpan dengan nama: cetak_biodata.php

Modul Praktikum Web Programming I Page 20

1. Script form input : data_diri.php

2. Script tampilan output: cetak_biodata.php

Modul Praktikum Web Programming I Page 21

 BAB VI
PERCABANGAN

Pada dasarnya pernyataan seleksi adalah suatu mekanisme yang

menjelaskan apakah pernyataan akan dikerjakan atau tidak, hal ini tergantung
kondisi yang dirumuskan. Dalam bahasa pemrograman PHP pernyataan
seleksi diterapkan dengan menggunakan statement IF dan Switch Case.

6.1. Logika IF

a. If Tunggal
Perintah akan dikerjakan apabila kondisi bernilai TRUE atau benar,
sedangkan jika kondisi FALSE/salah maka statement tidak akan
dikerjakan.
Bentuk umum:

if (kondisi)
pernyataan;

b. IF dan Else
Pernyataan ELSE merupakan bagian dari pernyataan if. Else digunakan
untuk memberikan alternative perintah apabila kondisi bernilai salah /
FALSE.
Bentuk umum :

If (kondisi)
Pernyataan 1;
else
Pernyataan 2;

Contoh script If Tunggal, simpan dengan nama: iftunggal.php

Modul Praktikum Web Programming I Page 22

 Hasil output If Tunggal:

c. IF Majemuk (If, ElseIf dan Else)

Jika pernyataan else memberikan alternative pilihan kedua, maka
untuk pernyataan ElseIf dapat digunakan untuk meumuskan
banyak alternative pilihan (lebih dari dua pilihan).

Bentuk umum :

If (kondisi 1)
Pernyataan 1;
ElseIf (kondisi 2) Untuk kondisi yang hanya
Pernyataan 1; mempunyai 1 pernyataan
Else
Pernyataan n;

Atau

If (kondisi 1)
{
Pernyataan 1.1;
Pernyataan 1.n;
}
ElseIf (kondisi 2)
{
Pernyataan 2.1; Untuk kondisi yang pernyataannya
Pernyataan 2.n; lebih dari 1 pernyataan
}
Else
{
Pernyataan n.1;
Pernyataan n.n;
}

Modul Praktikum Web Programming I Page 23

 Contoh If Majemuk:
a. Buat form seperti dibawah ini dan simpan dengan nama: kursus_in.php

b. Buat tampilan dibawah ini dan simpan dengan nama: kursus_out.php

Script dari contoh If Majemuk:

a. Script form kursus_in.php
<html>
<head>
<title>Kursus Program</title>
</head>
<body>
<form method=post action=kursus_out.php>
<h2>Pendaftaran Kursus Program</h2><pre>
Nama :<input type=text name=nama><br>
Alamat :<textarea name=alamat rows=5 cols=40></textarea><br>
Jenis Kelamin :<input type=radio name=jk value=Lelaki>Laki-laki
<input type=radio name=jk value=Perempuan>Perempuan<br>
Pilihan Kursus :<select name=kursus>
<option value=Web>Web Programming</option>
<option value=Delphi>Borland Delphi</option>

Modul Praktikum Web Programming I Page 24

 <option value=Linux>Linux</option>
<select><br>
Jenis Bayar :<input type=radio name=jenis value=Cash>Cash
<input type=radio name=jenis value=Cicilan>Cicilan<br>
<input type=submit value=Proses> <input type=reset value=Batal>
</pre>
</form>
</body>

b. Script untuk tampilan kursus_out.php

<html>
<head>
<title>Output Kursus </title>
</head>
<body>
<h2> DATA PENDAFTAR KURSUS </h2>

<?
if ($kursus=="Web")
$biaya=400000;
elseif ($kursus=="Delphi")
$biaya=425000;
else
$biaya=500000;

if($jenis=="Cash")
$potongan=0.02*$biaya;
else
$potongan=0;
$total=$biaya-$potongan;

echo "<pre>";
echo "Nama Peserta :$nama<br>";
echo "Alamat :$alamat<br>";
echo "Jenis Kelamin :$jk<br>";
echo "Pilihan Kursus :$kursus<br>";
echo "Biaya :$biaya<br>";
echo "Jenis Bayar :$jenis<br>";
echo "Potongan :$potongan<br>";
echo "Total Bayar :$total<br>";
echo "</pre>";
?>
<a href=kursus_in.php>Kembali</a>
</body>

Modul Praktikum Web Programming I Page 25

6.2. Switch Case
Statement untuk pengatur alur program berikutnya adalah switch. Salah
satu keuntungan switch adalah ada bisa langsung mengevaluasi satu statement
dan memerintahkan aksi dalam jumlah yang lebih banyak.

Bentuk umum :

switch (nilai_ekspresi)
{
case nilai_1 : statement_1; break;
case nilai_2 : statement_2; break;
default :
statement_n;
}

Contoh Switch Case:

a. Buat form seperti dibawah ini dan simpan dengan nama: kalkulator_in.php

b. Buat tampilan dibawah ini dan simpan dengan nama: kalkulator_out.php

Script dari contoh Switch Case:

a. Script form kalkulator_in.php

<html>
<head>
<title>Kalkulator Sederhana</title>
</head>
<body>
<form action=kalkulator_out.php method=post>
<h2>**** KALKULATOR SEDERHANA*** </h2>
<pre>

Modul Praktikum Web Programming I Page 26

 Nilai A : <input type=text name=a>
Nilai B : <input type=text name=b>
Operator : <select name=operasi>
<option value=1>Tambah</option>
<option value=2>Kurang</option>
<option value=3>Kali</option>
<option value=4>Bagi</option>
</select>
<br>
<input type=submit value=Proses> <input type=reset value=Batal>
</pre>
</form>
</body>
</html>

b. Script tampilan kalkulator_out.php

<html>
<head>
<title>Kalkulator</title>
</head>
<body>
<?
switch($operasi)
{
case 1:
$c=$a+$b;
$ope='+';
break;
case 2:
$c=$a-$b;
$ope='-';
break;
case 3:
$c=$a*$b;
$ope='*';
break;
case 4:
$c=$a/$b;
$ope='/';
break;
}
echo "Hasil dari : $a $ope $b adalah $c <br>";
?>
<a href="kalkulator_in.php"> Kembali </a>
</body>
</html>

Modul Praktikum Web Programming I Page 27

Latihan Percabangan
1. Buat form seperti dibawah ini dan simpan dengan nama: input_gaji.php

2. Buat tampilan dibawah ini dan simpan dengan nama: slip_gaji.php

3.950.000

Ketentuan Soal:

a. Textbox NIP, Nama Pegawai diinput.

b. Pilih Combobox Jabatan, tampil Gaji Pokok
Jabatan Gaji Pokok
Manajer 5.000.000
Sekretaris 2.000.000
Staf 1.500.000
c. Gaji Bersih = Gaji Pokok – PPh
d. Klik Button Proses, tampil Slip Gaji
e. Klik Back to input, kembali ke form input data penggajian.

Modul Praktikum Web Programming I Page 28

 BAB VII
DATABASE MySQL

7.1. Definisi Database

Menurut Fathansyah (2015:3) bahwa Database atau basisdata didefinisikan

sebagai kumpulan data yang saling berhubungan yang disimpan secara bersama
sedemikian rupa tanpa pengulangan (redudansi) yang tidak perlu, untuk
memenuhi berbagai kebutuhan. Basisdata atau database adalah kumpulan
file/tabel/arsip yang saling berhubungan yang disimpan dalam media
penyimpanan elektronis.
Bahasa database/basisdata dikelompokkan menjadi dua, yaitu: Data
Definition Language (DDL) dan Data Manipulation Language (DML). DML
biasa juga disebut sebagai Query Language. Kata query tidak hanya merujuk pada
proses pencarian tapi juga pemilihan dan penayangan data.
Perintah Data Definition Language (DDL) terdiri dari create, alter, drop
(Indrajani, 2014:99). Sedangkan perintah Data Manipulation Language (DML)
terdiri dari select, insert, update, delete (Indrajani, 2014:149).

7.2. Mengenal MySQL

Salah satu fitur unggulan PHP adalah kemudahannya untuk diintegrasikan

dengan database. Di PHP, sangat mudah mengkoneksikan diri dengan database.
Database paling lazim yang digunakan untuk dipadukan dengan PHP adalah
MySQL.
Keuntungan menggunakan database MySQL :
1. Gratis dan Open Source
2. Ada versi komersialnya juga, digunakan jika ingin memberikan
dukungan teknis
3. Biaya yang harus dikeluarkan jauh lebih murah dibandingkan merek lainnya
4. Tersedia di banyak platform
5. Menggunakan standar penulisan SQL ANSI.

7.3. PHP Dengan MySQL

PHP-MySql adalah suatu fungsi yang menjembatani antara PHP

sebagai programming web server dan mysql sebagai database, sehingga
data-data yang terdapat pada database mysql dapat ditampilkan pada
browser.

Fungsi-fungsi dalam mysql diantaranya adalah :

1. MYSQL-CONNECT()
Menghubungkan ke server mysql. Fungsi ini merupakan fungsi awal yang
akan dijalankan sebelum melakukan fungsi-fungsi lain.
Bentuk umum :
Mysql_connect (host, user, password)

Modul Praktikum Web Programming I Page 29

2. MYSQL_CREATE_DB()
Fungsi yang sangat jarang di gunakan karena pada umumnya setiap
programmer web, lebih cenderung dalam membuat database pada console
atau phpmyadmin pada browser. Fungsi ini untuk membuat database baru.
Bentuk umum:
Mysql_create_db(nama_database)

3. MYSQL_SELECT_DB()
Fungsi ini untuk mengaktifkan database yang telah tersedia pada
mysql server.
Bentuk umum:
Mysql_select_db(nama_database)

4. MYSQL_QUERY()
Fungsi ini memasukkan perintah-perintah SQL.
Bentuk umum:
Mysql_query(perintah_SQL)

5. MYSQL_NUM_ROWS()
Fungsi ini untuk mengetahui berapa jumlah record terkini. Fungsi ini berguna
apabila akan membuat tabel yang bercorak.
Bentuk umum:
Mysql_num_rows(variabel)

6. MYSQL_FETCH_ROWS()
Fungsi ini untuk mengambil data per record atau per baris dalam suatu tabel,
berdasarkan sistem urutan nomor index field.
Bentuk umum:
Mysql_fetch_rows(variabel)

7. MYSQL_FETCH_ARRAY()
Fungsi ini memiliki fungsi yang sama dengan mysql_fetch_row() yaitu
mengambil data per record. Yang membedakan adalah jika
mysql_fetch_row() mengambil data berdasarkan nomor urut index sedangkan
fungsi ini adalah nama fieldnya.
Bentuk umum:
Mysql_fetch_array(variabel)

7.4. Membuat Database MySQL Menggunakan PHPMyAdmin

Untuk mengakses database MySQL digunakan software MySQL Client.

Ada banyak MySQL Client, dari mulai yang berbasis command line, aplikasi
GUI hingga berbasis web. PHPMyAdmin adalah MySQL Client yang
berupa aplikasi web dan umumnya tersedia di server PHP seperti XAMPP
maupun server komersial lainnya.

Modul Praktikum Web Programming I Page 30

 Berikut ini cara mengakses PHPMyAdmin :
1. Buka browser kemudian ketikkan alamat URL :
http://localhost/phpmyadmin. halaman ini bisa diakses menggunakan
webserver local.

2. Untuk membuat database baru. Klik tab database. Kemudian ketikkan

nama database di kolom “Create Database”. Nama database : db_news

3. Setelah membuat database, langkah berikutnya adalah pembuatan tabel.

Buat tabel dengan nama tabel “guestbook” di kolom Create Table dan
number of columns : 4. Jika sudah diinput, klik tombol GO

4. Isikan data untuk struktur tabel artikel sebagai berikut :

Field Name Type Data Length Keterangan
id_guestbook Int 3 Auto Increment, Primary Key
nama Varchar 50
email Varchar 30
pesan Varchar 100

Modul Praktikum Web Programming I Page 31

Tipe-tipe data yang sering digunakan adalah :
a. INT untuk menyatakan data berupa angka.
b. VARCHAR untuk menyatakan data berupa karakter atau string (batasnya
sampai 255 karakter).
c. DATE untuk menyatakan data berupa tanggal.
d. TIME untuk menyatakan data berupa waktu.
e. TEXT untuk menyatakan data berupa karakter dalam jumlah yang banyak
(lebih dari 255 karakter) misalnya untuk isi berita dan pesan.
f. CHAR untuk menyatakan data berupa string yang tetap.

Modul Praktikum Web Programming I Page 32

 BAB VIII
CONTOH STUDI KASUS
(GuestBook)

1. Buat database dengan nama “dbnews”, dan buat tabel dengan nama:
guesbook

Field Name Type Data Length Keterangan

id_guestbook Int 3 Auto Increment, Primary Key
nama Varchar 50
email Varchar 30
pesan Varchar 100

2. Buat fom tambah buku tamu dengan nama: add_guestbook.php

Modul Praktikum Web Programming I Page 33

Script add_guestbook.php

Pemanggilan file
save_guestbook.php

Modul Praktikum Web Programming I Page 34

3. Agar data yang diinput dapat disimpan, buatlah script seperti dibawah ini
dan simpan dengan nama: save_guestbook.php

Menghubungkan ke server mysql

Bentuk umum:
mysql_connect (“host”,”username”,”password”)

Diambil dari name object yang ada di

form add_guestbook.php

Keterangan script:

a. mysql_connect digunakan untuk menghubungkan ke server mysql. Bentuk

umumnya adalah mysql_conncet (“host”,”username”,”password”).
Untuk username dan password diisi harus sesuai pada saat masuk ke dalam
PHPMyAdmin.
b. mysql_error digunakan untuk mendeteksi kesalahan yang terjadi pada saat
menghubungkan server ke mysql.
c. mysql_select_db (“db_news”) digunakan untuk mengaktifkan database yang
digunakan.
d. Fungsi $_POST digunakan untuk mengumpulkan nilai dari object judul dan isi
yang akan dikirimkan ke variable a dan b menggunakan method POST.
e. mysql_query yaitu script yang digunakan untuk menjalankan perintah SQL
yang ada di $perintah dan $koneksi yang disimpan ke dalam variable $simpan.
f. Script percabangan dengan kondisi variable $simpan jika dijalankan dan
berhasil maka akan memanggil kembali URL add_guestbook.php dan
menampilkan pesan Succesfully Save di URL.

g. Perintah untuk redirect atau pengalihan menggunakan HTTP, Untuk waktu

tunda pengalihan bisa diisi sesuai dengan waktu yang ingin diatur berapa detik
untuk bisa memanggil alamat yang tertera pada URL.

Modul Praktikum Web Programming I Page 35

4. Untuk melihat data guestbook yang sudah diinput, maka buat tampilan list
guestbook seperti dibawah ini:

Script view_guestbook.php

Koneksi ke
database dan tabel
guestbook untuk
menampilkan
data
dan menghitung
jumlah record

Modul Praktikum Web Programming I Page 36

 Script pengulangan untuk
menampilkan data yang ada di
table guestbook

Hyperlink untuk delete dan edit

guestbook

Menampilkan jumlah
record yang ada di
variable jumlah

5. Pada list guestbook, data dapat di Hapus dan di Edit, berikut tampilan dan
script hapus, edit dan update seperti dibawah ini:
a. Tampilan jika memilih action Hapus

Modul Praktikum Web Programming I Page 37

 Script hapus yang disimpan dengan nama: delete_guestbook.php

b. Tampilan jika memilih action Edit

Modul Praktikum Web Programming I Page 38

Script hapus yang disimpan dengan nama: edit_guestbook.php

Modul Praktikum Web Programming I Page 39

 c. Script update yang disimpan dengan nama: update_guestbook.php

6. Pada halaman muka perancangan website informasi berita, maka buat

tampilan seperti dibawah ini:

Modul Praktikum Web Programming I Page 40

 a. Script membuat index, simpan dengan nama: index.php

b. Script membuat index, simpan dengan nama: home.php

Modul Praktikum Web Programming I Page 41

 c. Script membuat index, simpan dengan nama: openfile.php

Modul Praktikum Web Programming I Page 42

 BAB IX

LATIHAN STUDI KASUS

(News)

1. Buat tabel pada database db_news dan simpan dengan nama tabel news.

Field Name Type Data Length Keterangan

idnews Int 3 Auto Increment, Primary Key
title Varchar 50
content Text
pic Varchar 50

2. Buat tampilan form add_news dan simpan dengan nama add_news.php

3. Buat script yang berfungsi untuk simpan data berita, lihat data berita, edit data
berita, update data berita dan hapus data berita.

Modul Praktikum Web Programming I Page 43

 DAFTAR REFERENSI

Anhar. 2010. Panduan Menguasai PHP & MySQL Secara Otodidak. Jakarta:
Mediakita.

Fathansyah. 2015. Basis Data Revisi Kedua. Bandung. Informatika Bandung.

Indrajani. 2014. Pengantar Sistem Basis Data Case Study All In One. Jakarta. PT
Elex Media Komputindo.

Kadir, Abdul. 2008. Tuntunan Praktis Belajar Database Menggunakan MySQL.

Yogyakarta: Andi

Modul Praktikum Web Programming I Page 44