MODUL PEMBELAJARAN

REKAYASA PERANGKAT LUNAK

PEMROGRAMAN WEB
Modul I Introduction

Mengetahui konsep website

Sistem informasi

merupakan

suatu aplikasi

yang menjembatani

kebutuhan user terhadap data. Data yang diperoleh melalui system informasi
bermacam. Dalam sistem informasi ini terkadang dapat diakses melalui
offline(aplikasi desktop) maupun aplikasi online(aplikasi jaringan). Untuk
aplikasi desktop dapat dipelajari melalui pemrograman desktop seperti halnya
Java, C++, VB maupun pemrograman yang lain.
Pemrograman online cara kerjanya sedikit berbeda dengan kinerja
pemrograman

desktop.

Pemrograman

online

melibatkan

server

yang

memproses kode pemrograman. Server bisa melalui koneksi internet ataupun

dengan menginstall aplikasi server seperti xampp, wamp, ataupun aplikasi
lain yang menyediakan server ofline alias tanpa koneksi dengan jaringan.
Hasil dari pemrograman online adalah berupa situs atau website.
Website

dibentuk

berdasarkan

bahasa

pemrograman

script.

Bahasa

pemrograman yang digunakan adalah dalam bentuk HTML (Hyper Text

Markup Language). Hasil dari bentuk pemrograman ini adalah dalam bentuk
situs statis atau sebuah halaman web yang disimpan pada server dengan
format tertentu untuk dikirim pada browser client.

Tugas
1. Jelaskanl bagaimana perbedaan antara pemrograman online dinamis
maupun statis !
2. Buatlah flowchart dan dfd untuk membangun aplikasi sesuai dengan
tugasnya masing-masing yang sudah ditentukan sebelumnya(toko,
rental mobil, perpustakaan).
Modul II pembelajaran PHP
Dalam pemrograman situs dinamis dapat menggunakan PHP(PHP
Hypertext Preprocessor) adalah bahasa pemrograman berbasis server side.

Server side adalah suatu prinsip kerja, dimana untuk mengeksekusi atau
menjalankan bahasa pemrograman dibutuhkan web server dalam hal ini php
menggunakan Apache. Dalam menginstall apache kita dapat meinstall secara
terpisah dan dapat juga include kedalam suatu software semacam xampp,
yang menyediakan aplikasi web server sekaligus protokol transfer datanya.
Dalam mengaktifkan dan mengeksekusi php akan disandingkan
dengan database MySQL. Berikut akan kita install terlebih dahulu xampp
untuk mengaktifkan web server.
Instalasi xampp
Xampp tidak saja mencakup PHP, mySQL, dan Apache web server tetapi juga
kelengkapan pendukung lainnya seperti phpMyAdmin, dan FileZilla FTP Server.
Sebelum membahas lebih lanjut mengenai tata cara install xampp, sangat
disarankan untuk menyiapkan file Installer xampp terlebih dahulu sehingga
dapat langsung dipraktekkan. Saat tulisan ini dibuat, installer Xampp for
windows tersedia dalam versi 1.6.8 dan berukuran sekitar 38 MB, serta dapat
diperoleh secara gratis dengan mendownloadnya melalui Menu Download di
apachefriends.org.
Setelah siap, lakukan install xampp dengan cara seperti berikut:
1. Klik dua-kali file XAMPP yang telah Kita download (contoh yang dipakai di
sini adalah xampp-win32-1.7.0-installer.exe, yaitu XAMPP versi 1.7.0). Bila Kita
mendapati versi XAMPP yang berbeda, cara instalasi kurang lebih masih sama.

2. Berikutnya klik saja [OK] untuk pilihan bahasa, English.

3. Klik [Next] pada jendela Setup Wizard yang muncul.

4. Berikutnya Kita diminta memilih folder tempat XAMPP dipasang. Untuk

mudahnya pilih saja di c:\, seperti default-nya dan klik [Next].

5. Pada jendela yang muncul berikutnya, klik saja [Install], dimana shortcut
untuk menjalankan XAMPP akan ada di desktop dan di menu Start.

6. Tunggu beberapa menit sementara XAMPP diinstal.

7. Klik [Finish] setelah XAMPP selesai diinstal.

8. Kita akan mendapati tawaran, apakah akan menjalankan XAMPP Control

Panel sekarang atau lain kali. Klik [Yes] bila Kita akan menjalankannya.

9. Setiap kali Kita akan mengelola situs Web Kita di PC lokal, Kita harus
menjalankan XAMPP. Menjalankan XAMPP berarti memfungsikan PC Kita
sebagai server Web. Untuk menjalankannya, klik ikon XAMPP dan Kita
dihadapkan pada XAMPP Control Panel.

10. Klik [Start] masing-masing untuk Apache dan MySql, sehingga muncul
tkita Running untuk keduanya. PC lokal Kita kini sudah menjadi server Web
lokal.

11. Apakah server Web Kita benar-benar jalan? Coba jalankan browser Kita
(misalnya Internet Explorer) dan ketikkan: http://localhost. Bila muncul
tampilan seperti di bawah ini, berarti PC Kita sudah berfungsi sebagai server
Web. Klik [English] untuk memilih bahasa Inggris.

12. Dari tampilan yang muncul Kita dapat melakukan berbagai administrasi
untuk server Kita termasuk membuat database SQL untuk WordPress.

13. Kita tinggal menutup browser untuk menutup tampilan di atas. Untuk
menonaktifkan server lokal Kita, keluar dari XAMPP Control Panel. Caranya,
pada XAMPP Control Panel, klik [Stop] pada masing-masing [Apache] dan
[MySql], lalu tutup jendela kontrol panel (klik X pada pojok kanan atas).
PHP
Diatas telah dijelaskan bahwa bahasa pemrograman PHP adalah bahasa
scripting alias bahasa yang dijalankan berdasarkan server side. Setelah kita
menginstall XAMPP dan telah berjalan dengan baik maka kita bisa belajar PHP.
Jika instalasi web server masih belum berjalan dengan baik lakukan lagi cara
install XAMPP yang benar.
Struktur Script PHP
Untuk memulai belajar PHP alangkah baiknya kita mengetahui struktur
penulisan kode untuk PHP. Berikut adalah struktur didalam penulisan
programnya:

<?php....code program...?>

<?....code program...?>

<script language=PHP>...code program...</script>

Praktek
1. buatlah folder baru pada C:\Xampp\htdocs\PHP untuk menampung
semua jenis file php kita.
2. Bukalah notepad atau phpEditor atau Dreamweaver lalu ketikkan
source code berikut :
<html><body>
<!--script php yang pertama dan bagian ini tidak dikompile-->
<?php echo Belajar PHP simpel dan mudah.; ?>
</body></html>
3. Simpan file kode pada folder langkah 1 diatas dengan nama terserah
disertai extension .php, sebagai contoh latihan1.php.
4. Buka browser dan ketikkan http://localhost/PHP/latihan1.php. dan akan
menampilkan tulisan Belajar PHP simpel dan mudah.pada layar
browser kita.
Variabel, Operator dan Expresi
Penulisan dalam setiap pemrograman haruslah memiliki ciri khas
tersendiri dengan perbedaan terhadap baris dan menjoroknya baris. Karena
setiap aturan adalah dipakai untuk membedakan kode program mana yang
sedang berjalan untuk memudahkan ketika kita melakukan perbaikan. Seperti
contoh berikut :
<?php
//an expression statement
2 + 3;
//another expression statement
print("PHP!");
//a control statement
if(3 > 2)
{
//an assignment statement
$a = 3;
}
?>
Penulisan kode program diatas jelas, memiliki perbedaan mana yang
anggota IF dan mana yang bukan atau mana fungsi untuk mencetak. Dan juga
tingkat spasinya.

Variabel
Untuk beroperasi menggunakan tipe data string, integer, float, char,
boolean, kita memerlukan kehadiran sebuah variabel. Dengan adanya variabel
tersebut kita dapat menggunakannya untuk melakukan proses perhitungan
maupun proses logika lainnya. Berikut penamaan yang benar untuk suatu
variabel pada pemrograman PHP.
Table 2.3. Contoh Penamaan Variabel
Nama

Validita

Variabel

Valid

Keterangan
Satu huruf seperti ini bagus untuk proses sementara,
contoh untuk looping

Invalid

Salah karena bukan angka

_1

Valid

Masih diperbolehkan karena adanya tkita Underscore

firstName

Valid

Variabel seperti ini dapat mempermudah kita untuk

bekerja, karena jelas fungsinya

7Lucky

Invalid

Pada awal karakter nama tidak boleh angka

~password

Invalid

Karakter pertama tidak boleh

Last!Visit

Invalid

Gunakan saja underscore karena tkita ! tidak

termasuk kedalam karakter alpha..

Compute-

Invalid

- tidak diperbolehkan dalam php

Mean
Berikut adalah contoh tabel penamaan dan penugasan pada variabel.
Table 2.4. Contoh penamaan variabel
String Constants

Integer Constants

Double Constants

$myString = "leon";

$myInteger = 1;

$myDouble = 123.456;

$myString = "\n";

$myInteger = -256;

$myDouble = -98.76e5;

Contoh penggunaan variabel adalah :

<?php
//create variable
$result = 2 + 5;
//create another variable
$doubleResult = $result * 2.001;
//print the second variable

print($doubleResult);
?>
Contoh pencampuran variabel :
<?php
$name = "toyib";
//toyib
print("Hoooooiiiii, $name!\n");
//toyib lagi
print <<< EOD
Hoooii piye belajari again, $name!
EOD;
?>
Untuk membebaskan variabel pada memori haruslah diberikan perintah
tambahan sebagai berikut : null, unset,isset, empty. Berikut adalah contoh
variabel yang dimasukkan kedalam variabel lain :
<?php
//create variable
$a = "Apple";
//assign $a to $b
$b = $a;
//change $a
$a = "Ball";
//prints Apple
print($b);
?>
Untuk menghapus memori variabel pada komputer, seperti contoh berikut :
<?php
//create variable
$a = "Apple";

//create references
$b = &$a;
//change value of both $a and $b
$a = "Ball";
//remove $a
unset($a);
//prints Ball
print($b);
?>
Berikut contoh untuk mengganti sebuah string perkarakter :
<?php
//mengganti spasi dengan underscore
$s = "a string";
$s{1} = "_";
print($s);
?>
Konstanta
Dalam pemrograman akan dijumpai konstanta pada php, berikut adalah
contohnya :
<?php
define("STKITARD_GREETING", "Hello, World!");
print(STKITARD_GREETING);
?>
konstanta adalah variabel yang tidak dapat diubah oleh user.
Operator
Operator dapat difungsikan ketika kita melakukan fungsi aritmetika. Berikut
tabel operator yang diijinkan pada php.
Table 2.6. Operator Arimatika
Operator
+

Operation It Performs
Addition

Example
12 + 43
+13

Table 2.6. Operator Arimatika

Operator

Operation It Performs

Example

Explicit positive sign

-

Subtraction

100 - 50
-3

Negation
*

Multiplication

3*4

Division

5/2

Modulo division

5%2

++

Post-increment

$a++
++$a

Pre-increment
--

Post-decrement

$a---$a

Pre-decrement
Contoh Penggunaan operator pada PHP :
<?php
//prints 6 (not 8!)
print(2 + 2 * 2);
print("<br>\n");
//prints 2.5
print(5 / 2);
print("<br>\n");
//prints 1
print(5 % 2);
print("<br>\n");
//prints 35
print(" 7 little Indians" * 5);
print("<br>\n");
?>
Berikut adalah contoh penggunaan dan perbedaan increment dan decrement.
Simpan hasilnya untuk dibuat dalam laporan.

<?php
$VisitorsToday = 1;
//prints 1
print($VisitorsToday++);
//VisitorsToday is now 2
print("<br>\n");
//prints 3
print(++$VisitorsToday);
print("<br>\n");
//prints 4.14
$pi = 3.14;
$pi++;
print($pi);
print("<br>\n");
//prints PHQ
$php = "PHP";
$php++;
print($php);
print("<br>\n");
//prints PHP
$php = "PHP";
$php--;
print($php);
print("<br>\n");
?>
Berikut adalah tabel untuk penugasan operator

Table 2.7. Penugasan Operator

Operato

Arti operator

Contoh

r
=

Assign right side to left side

$a = 13

+=

Add right side to left side

$a += 2

-=

Subtract right side from left side

$a -= 3

*=

Multiply left side by right side

$a *= 5

/=

Divide left side by right side

$a /= 4

%=

Set left side to left side modulo right side

$a %= 2

&=

Set left side to bitwise-AND of left side and right $a &= $b

side

|=

Set left side to bitwise-OR of left side and right

$a |= $b

side
^=

Set left side to bitwise-XOR of left side and right $a ^= $b

side

.=

Set left side to concatenation of left side and

right side
Contoh penggunaan dari tabel diatas :
<?php
//Add 5 to Count
$Count = 0;
$Count = $Count + 5;
//Add 5 to Count
$Count = 0;
$Count += 5;
//prints 13
print($a = $b = 13);
print("<br>\n");
//prints 7
$Count = 2;
print($Count += 5);
print("<br>\n");
?>
Tugas Praktikum :

$a .= "more text"

1. Praktikkanlah semua contoh yang telah diberikan dan buatlah

laporan modulnya.
2. Buatlah dengan pemrograman PHP untuk menghitung luasan
dan volume dibawah dengan variabel yang telah didefinisikan :

Luas segitiga

Luas persegi panjang

Volume balok

Volume kubus

Dan buatlah laporan hasil praktikumnya.

Pernyataan Control
Pernyataan IF
If adalah pernyataan yang dipakai untuk mempresentasikan logika jika
...maka...., lihatlah contoh berikut :
if(expression1)
{
//berisi kode apabila pernyataan if bernilai benar
}
elseif(expression2)
{
//Pernyataan ini bersambung dengan diatas jika salah maka dikerjakan if
berikutnya jika benar.
}
else
{
//blok ini dikerjkana jika kedua pernyataan diatas salah.
}
Contoh if sederhana :
<?php
if(date("D") == "Mon")
{
print("Remember to put the trash out.");
}
?>
Berikut adalah contoh dalam pemrograman php. Menggunakana representasi
if-else-if.

Contoh :
<?php
$name = "Leon";
if($name == "")
{
print("You have no name.");
}
elseif(($name == "leon") OR ($name == "Leon"))
{
print("Hello, Leon!");
}
else
{
print("Your name is '$name'.");
}
?>
Contoh complex if-else-if-else :
<?php
/*
** Get today's weekday name
*/
$englishDay = date("l");
/*
** Find the today's German name
*/
if($englishDay == "Monday")
{
$deutschDay = "Montag";
}
elseif($englishDay == "Tuesday")
{
$deutschDay = "Dienstag";
}
elseif($englishDay == "Wednesday")

{
$deutschDay = "Mittwoch";
}
elseif($englishDay == "Thursday")
{
$deutschDay = "Donnerstag";
}
elseif($englishDay == "Friday")
{
$deutschDay = "Freitag";
}
elseif($englishDay == "Saturday")
{
$deutschDay = "Samstag";
}
else
{
// It must be Sunday
$deutschDay = "Sonntag";
}
/*
** Print today's English and German names
*/
print("<h2>German Lesson: Day of the Week</h2>\n" .
"<p>\n" .
"In English: <b>$englishDay</b>.<br>\n" .
"In German: <b>$deutschDay</b>\n" .
"</p>\n");
?>
Operator Tkita Tanya ?
Selain menggunakan operator IF, kita juga perlu mengenal fungsi dari
operator ? agar kita dapat menggunakannya pada saat yang tepat dan pada
kondisi yang pas. Operator tersebut berguna untuk dibandingkan dan mencari
kondisi yang memenuhi persyaratan yang diminta sistem. Cara kerjanya
seperti orang bertanya, apabila kondisi terpenuhi maka jawaban apa yang
harus dikerjakan. Berikut syntax penulisannya.

Kondisi yang dicari ? kondisi bila benar : kondisi bila salah;

($clientQueue > 0) ? serveClients() : cleanUp();
Ekspresi ? tersebut sama halnya dengan ekspresi if berikut :
if($clientQueue > 0)
serveClients();
else
cleanUp();
Tetapi dari kondisi tersebut dapat dibedakan, sebagai contoh
print(true ? "it's true" : "it's false");
dari syntax tersebut akan menghasilkan keluaran its true sama halnya
ketika kita menuliskan print (its true);. Cara seperti ini tidak bias dilakukan
oleh kondisi IF.
Pernyataan Switch
Untuk menangani kondisi if-else-if-else dibutuhkan baris dan waktu
yang banyak. Cara tersebut dapat digantikan dengan menggunakan operator
SWITCH.

Operator tersebut artinya apabila kondisi terpenuhi maka yang

dikerjakan adalah kondisi satu, dua, atau tiga dan seterusnya. Berikut contoh
pemrogramannya.
<?php
/*
** Get today's weekday name
*/
$englishDay = date("l");
/*
** Find the today's German name
*/
switch($englishDay)
{
case "Monday":
$deutschDay = "Montag";
break;
case "Tuesday":

$deutschDay = "Dienstag";
break;
case "Wednesday":
$deutschDay = "Mittwoch";
break;
case "Thursday":
$deutschDay = "Donnerstag";
break;
case "Friday":
$deutschDay = "Freitag";
break;
case "Saturday":
$deutschDay = "Samstag";
break;
default:
// It must be Sunday
$deutschDay = "Sonntag";
}
/*
** Print today's English and German names
*/
print("<h2>German Lesson: Day of the Week</h2>\n" .
"<p>\n" .
"In English: <b>$englishDay</b>.<br>\n" .
"In German: <b>$deutschDay</b>\n" .
"</p>\n");
?>
Operator LOOP
Opeator LOOP artinya perulangan, artinya dengan adanya loop ini kita
mengulang baris sebanyak yang ditentukan atau sebanyak kondisi yang
terulang menjadi terpenuhi.
Berikut adalah syntax dalam penanganan switch :
while(expression)
{
Zero or more statements

}
Sebagai contoh kita menggunakan logika switch untuk mencetak nama
hari. Kode programnya adalah sebagai berikut :
<?php
//get the current date in number of seconds
$currentDate = time();
//print some text explaining the output
print("Days left before Friday:\n");
print("<ol>\n");
while(date("l", $currentDate) != "Friday")
{
//print day name
print("<li>" . date("l", $currentDate) . "</li>\n");
//add 24 hours to currentDate
$currentDate += (60 * 60 * 24);
}
print("</ol>\n");
?>
Apabila terjadi perulangan terus menerus maka itu disebut infinte
loops. Dalam pemrograman php apabila itu terjadi dapat diatur dan dibatasi
dengan menggunakan set_time_limit, tetapi php akan dengan otomatis
mematikan apabila 30 detik.
Break
Pernyataan break terletak didalam switch sebagai pemberhenti dari
proses perulangan dan beralih ke proses lainnya.
Contoh break sederhana :
<?php
while(TRUE)
{
print("This line is printed.");
break;
print("This line will never be printed.");
}

?>
Contoh break bersarang :
<?php
while(TRUE)
{
while(TRUE)
{
print("This line is printed.");
break 2;
}
print("This line will never be printed.");
}
?>
Continue
Pernyataan continue adalah pernyataan dimana setelah adanya
break aka dilakukan kondisi berikutnya yaitu setelah pernyataan continue.
Berikut contoh dari operator tersebut :
Contoh continue
<?php
/*
** get ten random numbers,
** each greater than the next
*/
//init variables
$count = 0;
$max = 0;
//get ten random numbers
while($count < 10)
{
$value = rand(1,100);
//try again if $value is too small
if($value < $max)
{
continue;
}

$count++;
$max = $value;
print("$value <br>\n");
}
?>
DoWhile
Selain while terdapat jenis perulangan dimana dalam kondisi
perulangan tersebut dikerjakan, lalu diperiksa apakah kondisinya masih
memenuhi persyaratan, jika masih memenuhi memenuhi maka do dikerjakan
sampai kondisi dinyatakan salah.
Contoh dowhile
<?php
/*
** get the current date in number of seconds
*/
$currentDate = time();
//print some text explaining the output
print("Days left before next Friday:\n");
print("<ol>\n");
do
{
/*
** print day name
*/
print("<li>" . date("l", $currentDate) . "</li>\n");
/*
** add 24 hours to currentDate
*/
$currentDate += (60 * 60 * 24);
}
while(date("l", $currentDate) != "Friday");

print("</ol>\n");
?>
For
Perulangan menggunakan for adalah digunakan ketika perulangan
tersebut memiliki batas yang jelas dan batas yang telah ditentukan oleh
programmer.
Berikut adalah syntax program for :
for(initialization; continue; increment)
{
Zero or more statements
}
Contoh For Sederhana
<?php
for($counter = 1; $counter <= 10; $counter++)
{
print("counter is $counter<br>\n");
}
?>
Contoh For mencetak hari
<?php
/*
** print some text explaining the output
*/
print("Days left before Friday:\n");
print("<ol>\n");
for($currentDate = date("U");
date("l", $currentDate) != "Friday";
$currentDate += (60 * 60 * 24))
{
/*
** print day name
*/

print("<li>" . date("l", $currentDate) . "</li>\n");

}
print("</ol>\n");
?>
Foreach
Pernyataan yang digunakan untuk perulangan dengan kondisi array.
Berikut adalah syntax programnya :
foreach(array as key=>value)
{
Zero or more statements
}
Tugas Praktikum :
1. Praktikkanlah semua contoh yang telah diberikan dan buatlah
laporan modulnya.
2. Buatlah

dengan

pemrograman

PHP

untuk

mengerjakan

pemrograman berikut :

Cetak
*
**
***
Sampai 10 kali

Cetak hasil dari 25 dengan menggunakan logika FOR

Cetak $a =$a * 23 sampai $>1000, jika $a lebih dari

1000 maka looping selesai.

Gunakan swtich...case untuk mencetak nama hari.

Dan buatlah laporan hasil praktikumnya.

Modul III Pembangunan aplikasi berbasis web
Penentuan flowchart
Dalam Pembuatan suatu aplikasi diperlukan adanya planning atau
perencanaan yang matang. Perencanaan tersebut meliputi sistem, alur kerja,
segala sesuatu yang dibutuhkan untuk menyelesaikan sebuah sistem.

Perencanaan dan alur kerja diperlukan agar sistem dapat selesai tepat waktu,
dan dengan kondisi sesuai yang diinginkan.
Dalam

pembuatan

sistem

aplikasi

berbasis

website,

selain

menggunakan flowchart dan algoritma juga diperlukan adanya sitemap.

Sitemap ini menekankan pada halaman atau form apa saja yang dibutuhkan
dalam pembuatan suatu aplikasi.
Contoh sitemap adalah sebagai berikut :

Sistem Informasi Rental Mobil

Registrasi

Pemesanan

Pilih Mobil

Masukkan ID

Pengembalian

Gambar 1. contoh sitemap untuk sistem informasi rental online

Sistem Informasi dkdkdkdkdfdddjdjkjkdjfkdjkddkkddjddddkdoidkdoiddkddkdkdkjiumshOpPppPerPerPerpustakaan

Registrasi

Peminjaman

Pengembalian

Masukkan ID

Pencarian

Gambar 2. contoh sitemap untuk sistem informasi perpustakaan online

Sistem Informasi Toko

Registrasi

Pembelian

Stok barang

Masukkan ID

Penjualan

Gambar 3. contoh sitemap untuk sistem informasi toko

Setelah kita menentukan pembuatan sitemap, itu berarti kita sudah
ada gambaran tampilan interface yang akan kita buat nantinya. Tampilan
interface dapat kita buat menggunakan bahasa pemrograman html atau
sejenisnya. Dalam menangani event yang terjadi pada form tampilan tersebut
dapat menggunakan script php atau javascript. Selain itu untuk operasi
database dapat digunakan database mysql.

Pembangunan aplikasi

Gambar 4. mendesain tampilan situs menggunakan Dreamweaver

Pada gambar diatas adalah salah satu contoh langkah untuk membuat
halam depan situs. Pembuatan tersebut dapat menggunakan kombinasi
antara photoshop dan dreamweaver. Bukalah photoshop dan buat file baru
dengan menerapkan lebar(width) dan panjang(heigh) bergantung pada
kesukaan. Untuk contoh kasus berikut adalah menggunakan lebar 900 dan
panjang 600.
Untuk desain photoshop :
1. mendesain background

Gambar

mendesain
background melalui photoshop

2. mendesain footer(catatan kaki), header(kepala situs)

Gambar mendesain footer(catatan kaki)

Catatan

kaki

itu

juga

termasuk

penting

karena

dengan

kita

memberikan catatan kaki, maka kita memberitahukan identitas siapa yang

telah memiliki hak dalam sistem informasi web tersebut.
3. mendesain isi

Gambar mendesain bagian isi

Dalam website terdapat bagian halaman yang harus memang diisi oleh
badan dari sebuah sistem. Biasanya terdapat pada sisi sebelah kanan atau sisi
sebelah kiri, dan tengah. Untuk kasus contoh diatas kita menggunakan letak
sebelah kiri untuk menampung isi dari sebuah website.
4. menggunakan teknik slicing(pemotongan gambar dan save as web)

slicing

Gambar menggunakan fasilitas slice tools

Fasilitas berupa slice tools diatas dipakai untuk memotong gambar
yang telah diseleksi. Setelah memotong beberapa bagian file yang ada pada
gambar tersebut, langkah berikutnya adalah klik file save as web untuk
kemudian

memilih

potongan

tersebut

menjadi

bagian

dari

website.

Pembuatan halaman muka index.php dapat dilakukan dengan mempraktekkan

file tutorial yang telah saya berikan.
Tugas Praktikum :
1. Buatlah halaman index.php yang menampung semua menu transaksi
sesuai dengan jenis tugas kelompok yang saya berikan. Kumpulkan satu
minggu setelah file ini diberikan.
Modul IV Koneksi Database
Suatu aplikasi membutuhkan simpanan data yang terorganisir agar
tidak terjadi redundancy(data gkita), data teratur, dapat di manfaatkan
kapanpun dan keadaan bagaimanapun, mengurangi kehilangan data. Dari
beberapa keuntunngan pemakaian data dalam bentuk digital maka database
akan sangat membantu mencapainya.
Aplikasi sistem informasi akan menjadi powerful apabila disandingkan
dengan pemakaian sistem database yang memadahi. Untuk itu kita perlu

membuat dan manajemen basisdata yang bagus. Pertanyaan akan muncul

untuk mencapainya. Pada pembuatan database diperlukan penyesuaian
terhadap

kondisi

aplikasi

yang

akan

dibuat.

Misalnya

apabila

kita

menggunakan aplikasi desktop maka manajemen sistem basis data yang

cocok dapat menggunakan SQL Server atau Microsoft Access. Dan apabila kita
membuat sistem aplikasi berbasis php atau aplikasi online lain sebaiknya
menggunakan MySQL.

Pembuatan database sesuai sitemap

Sesuai dengan tujuan kita dari awal, untuk membuat sistem informasi
berbasis php maka kita akan menggunakan database MySQL. Karena memang
mudah dan diperuntukkan dalam pemakaian database aplikasi online. Terlebih
dahulu kita harus menginstall software XAMPP sebagai server ofline. Dengan
menggunakan software tersebut biasanya dengan otomatis akan terinstall
tempat untuk menyimpan dan memproses database secara online.
Pada sitemap yang telah dibuat perlu diberikan rincian data dalam
bentuk database. Sitemap tersebut dapat dijadikan sebagai langkah acuan
dalam membuat database.
Langkah dalam menentukan database adalah :
1. Tentukan jenis transaksi yang ada
2. Tentukan dalam transaksi tersebut membutuhkan data apa saja.
Misalnya dalam transaksi login kita perlu identitas user dan password.
Atau pada saat persewaan, peminjaman, pembelian kita membutuhkan
data apa saja.
3. Setelah didefinisikan barulah kita menentukan akan membuat tabel
database seperti apa. Pada contoh diatas terdapat form login yang
membutuhkan identitas user untuk memasuki wilayah admin misalnya.
Maka dalam hal ini kita akan membuat tabel dengan nama user yang
isi field-nya adalah sebagai berikut : nama, password, level, alamat, id.
Pada pembuatan tabel diata kita menentukan nama dengan tipe data
(varchar). Selanjutnya seperti tabel dibawah.
Tabel User
Nama variabel
Nama
Password
Level
Id

Type data
Varchar(40)
Varchar(12)
Varchar(10)
Varchar(5)Primary key

4. Setelah membuat tabel untuk keseluruhan data maka langkah

berikutnya

adalah

membuat

form

pada

file.php.

Untuk

menghubungkan database dengan user maka diperlukan sebuah

interface sebagai pengantar transaksi data. Untuk itu kita harus
membuat masing-masing halaman situs diisi dengan form. Form
tersebut harus sesuai dengan tabel secara keseluruhan. Sebagai
contoh untuk membuat interface dari user diatas maka kita akan
membuat

file

tersebut

menggunakan

dreamweaver.

Jalankan

dreamweaver lalu klik file new pilih php letakkan kursor

didalam tag body pilih menu insert form. Seperti pada contoh
gambar dibawah, lakukan hal yang sama pada keseluruhan tabel.

Gambar membuat interface untuk tabel user

Tugas Praktikum :
1.

Buatlah keseluruhan tabel database yang kita perlukan (sesuai

tugas kelompok : toko, rental, perpustakaan). Untuk membuatnya
kita

dapat

membuka

browser

lalu

ketikkan

pada

localhost/phpmyadmin.
2.

Buatlah keseluruhan interface sesuai tabel.

Tugas dikumpulkan pada saat tatap muka dan diperiksa bersama.

address

Database dengan mysql

Agar kita semakin paham mengenai database mysql maka tidak ada
salahnya kita belajar mysql dan menjalankannya. Berikut akan disajikan kasus
pada pembuatan katalog buku perpustakaan.
KASUS 1
Kasus berikut membahas tentang operasi dasar pada mysql dengan
php, menggunakan studi kasus operasi buku. Perhatikan dan ikuti dengan baik
ulasan berikut akan memberikan tentang teori dasar mysql.
MySQL

adalah

database

yang

menghubungkan

script

PHP

menggunakan perintah query dan escaps character yang sama dengan PHP.
MySQL

mempunyai

tampilan

client

yang

mempermudah

Kita

dalam

mengakses database.

Gambar 1 Logo MySQL

Pada kasus berikut akan diberikan contoh tentang operasi pada buku
dengan memberi nam database maxi. Berikut langkah-langkah dalam studi
kasus ini, semoga bermanfaat.
1. Pastikan Kita masih berada pada halaman phpMyAdmin. Lihat Gambar 7.

Gambar 7 Halaman phpMyAdmin

2. Untuk membuat database baru, caranya pada kotak teks Ciptakan database
baru Kita ketik nama maxi setelah itu klik tombol Ciptakan. Lihat Gambar 8.

Gambar 8 Membuat database baru

3. Apabila proses pembuatan database berhasil, maka akan tercipta database
baru pada phpMyAdmin seperti pada Gambar 9.

Gambar 9 Pembuatan database berhasil

Membuat Tabel
Setelah Kita membuat database. Tahap selanjutnya adalah membuat table .
Table ini nantinya akan digunakan untuk menyimpan data - data yang akan
ditampilkan pada halaman web. Adapun cara-cara pembuatan table adalah
sebagai berikut.
1. Pastikan Kita telah membuka halaman phpMyAdmin dan mengaktifkan
database maxi. Perhatikan Gambar 10.

Gambar 10 Halaman phpMyAdmin

2. Perhatikan Gambar 11. Klik pada tab SQL ,kemudian akan tampil area input
perintah SQL. Ketiklah perintah di bawah ini , setelah itu klik tombol Go.
CREATE TABLE buku (
id INT NOT NULL primary key auto_increment,
judul VARCHAR ( 50 ) NOT NULL ,
pengarang VARCHAR ( 50 ) NOT NULL ,
penerbit VARCHAR ( 30 ) NOT NULL ,
tahun INT ( 4 ) NOT NULL
);

Keterangan Kode :
Baris 1 - 2 Perintah di atas akan membuat tabel dengan nama buku, field
pertama yaitu field id. field ini adalah field sebagai primary key ( unik) dengan
auto_increment ( penomoran secara otomatis ).
Baris 3 - 5 Perintah berikutnya akan membuat field judul dengan tipe data
varchar ( 50 ) , field pengarang tipe data varchar (50) , penerbit tipe data
varchar ( 30 ) dan not null ( tidak boleh kosong ) .
Baris 6 - 7 Perintah berikutnya membuat field tahun dengan tipe int dan not
null ( tidak boleh kosong).
3. Untuk melihat hasil pembuatan tabel , Kita dapat melihat penambahan
tabel di bawah combo database. Perhatikan Gambar 12. Klik buku.

4.Struktur tabel yag Kita buat akan tampil pada halaman phpMyAdmin. Lihat
Gambar 13.

Gambar 11 Membuat tabel dengan perintah SQL

Gambar 12 Melihat tabel buku

Gambar 13 Menampilkan hasil pembuatan tabel

Menambah data pada tabel
a. Perintah INSERT
Setelah Kita membuat tabel, Kita akan menggunakan perintah INSERT untuk
menambah data baru ke dalam tabel. Sintaks:
INSERT INTO nama_tabel ( fields) VALUES ( nilai_fields);
1. Buka jendela browser Kita, ketik http://localhost/phpmyadmin pada textbox
address.
2. Aktifkan database maxi, kemudian aktifkan tab SQL dan ketiklah perintah di
bawah untuk menambah data ke dalam tabel buku dan klik tombol Go.
Perhatikan
14.
INSERT INTOGambar
buku values
(1,pemrograman java,Irawan,maxikom,2009),
(2, pemrograman Visual Basic, M.Sadeli, maxikom,
2009),
(3, Manipulasi Photoshop CS4, Jayan, maxikom, 2009),
(4, Pemrograman PHP, Rulianto Kurniawan, maxikom,
2009),
(5, Desain Grafis, Fandi, maxikom, 2009) ;

Keterangan Kode :
Baris 1 Perintah Insert di atas adalah menyisipkan atau menambah data
pada tabel buku.
Baris 2 Menambahkan record atau data dengan id 1.
Baris 3 - 4 Menambahkan record atau data dengan id 2.
Baris 5 Menambahkan record atau data dengan id 3.
Baris 6 -7 Menambahkan record atau data dengan id 4.
Baris 8 Menambahkan record atau data dengan id 5.
3. Untuk melihat hasil peng-inputan data, klik tabel buku. Setelah itu , klik tab
Browse .Lihat Gambar 15.

Gambar 14 Perintah memasukkan data

Gambar 15 Hasil memasukkan data

Menghubungkan script php ke mysql
A. MEMBUKA KONEKSI KE SERVER
Untuk melakukan koneksi ke server, Kita perlu membuat file khusus yang
berfungsi sebagai panghubung antara script dan database. Untuk membuka

koneksi ke server Kita harus memerlukan alamat server , username dan

password. Adapun langkah-langkahnya adalah sebagai berikut:
1. Kita buka aplikasi Macromedia Dreamweaver 8 . Klik Tombol Start pada
Start menu. Kemudian Kita pilih menu All Programs > Macromedia >
Macromedia Dreamweaver 8.
2. Setelah tampil jendela Start page Kita Klik icon dengan tulisan PHP ,
Perhatikan Gambar 16.
3. Setelah diklik icon maka akan tampil jendela dokumen baru seperti Gambar
17.

Gambar 16 Memilih PHP

Gambar 17 Tampilan Jendela dokumen PHP

4. Selanjutnya Kita pastikan tab yang aktif pada Code . Lihat Gambar 18.

Gambar 18 Mengaktifkan tab Code

5. Kemudian Kita hapus semua kode, lalu ketikkan kode di bawah ini.
<?php
$host = localhost;
$user = root;
$pass = ;
$koneksi = mysql_connect($host, $user,
$pass);
if (!$koneksi) {
echo Koneksi ke database gagal;
};
?>

Keterangan Kode :
Baris 1 Awal tag PHP.
Baris 2 - 6 Variabel host , user , password pada server dan koneksi.
Baris 7 -9 Jika koneksi database gagal , maka akan tampilkan pesan bahwa
koneksi ke database gagal.
Baris 10 Akhiri Tag PHP.
6. Simpan ke dalam lokasi c:/xampp/htdocs/xampp, lalu Kita buat folder baru
dengan nama koneksi_PHP dan simpan file dengan nama koneksi.php. Per
hatikan Gambar 19.

Gambar 19 Menyimpan dengan nama file koneksi.php

B. MENYELEKSI DATABASE
Setelah

data

terhubung

ke

dalam

Server,

Kita

diizinkan

untuk

menghubungkan databse yang akan digunakan. Perintah untuk menyeleksi

database adalah mysql_select_db( ). Adapun langkah-langkahnya adalah
sebagai berikut;
1. Pastikan jendela Dreamweaver Kita masih aktif. Buatlah halaman PHP yang
baru.
2. Ketiklah perintah di bawah ini untuk menyeleksi database maxi yang telah
Kita buat sebelumnya.
<?php
include (koneksi.php);
$database = maxi;
$selek_db = mysql_select_db ($database);
if (!$selek_db) {
die (Database tidak terseleksi);
}
?>

Keterangan Kode :

Baris 1 Awal tag PHP.

Baris 2 Memanggil file koneksi.php.
Baris 3-4 Variabel database diisi dengan nama database yang akan dipanggil
dan variabel unutk penyeleksian database.
Baris 5-7 Jika Penyeleksian database tidak berhasil maka tampilkan pesan
Databse tidak terseleksi.
Baris 8 Akhiri Tag PHP.
3. Simpan ke dalam lokasi c:/xampp/htdocs/xampp/koneksi_PHP dan simpan
file dengan nama seleksi_db.php. Perhatikan Gambar 20.

Gambar 21 Menyimpan file dengan nama seleksi_db.php

C. MENAMPILKAN HASIL QUERY
Untuk menampilkan seluruh data di dalam tabel. Kita dapat menampilkannya
melalui halaman PHP yang akan Kita buat. Adapun langkah-langkahnya adalah
sebagai berikut;
1. Bukalah Program Dreamweaver Kita dan pilihlah jenis halaman PHP.
2. Kemudian ketiklah perintah di bawah ini untuk menampilkan semua data
pada tabel buku.
<html>
<title>Menampilkan data ke dalam tabel</title>
<body>
<table border=1>
<tr>
<th>Kode Buku</th>
<th>Judul Buku</th><th>Pengarang<th>
<th>Penerbit</th><th>tahun</th>
</tr>
<?php
include (koneksi.php);
include (seleksi_db.php);
$seleksi = SELECT * FROM buku;
$hasil_seleksi = mysql_query ($seleksi);
if (!$hasil_seleksi){
echo Proses penyeleksian tabel
buku gagal !!!;
} else {
while ($baris = mysql_fetch_
array ($hasil_seleksi)) {
echo <tr>
<td>$baris[id]</td>
<td>$baris[judul]</td>
<td>$baris[pengarang]</td>
<td>$baris[penerbit]</td>
<td>$baris[tahun]</td>
<tr>;
};
Keterangan
Kode :
};
?>
</table>
</body>
</html>

 Baris 1-2 Awal tag HTML dan membuat title atau judul halaman.
Baris 3 - 9 Pada bagian body, dibuat perintah pembuatan tabel dengan tag
<th> untuk memasukkan judul masing-masing kolom.
Baris 10 - 13 Awal tag PHP, perintah Include akan menghubungkan dan
menyeleksi database dengan memanggil file koneksi.php dan seleksi_db.php
yang telah Kita buat sebelumnya.
Baris 14 Variabel $seleksi diisi dengan perintah untuk menyeleksi seluruh
data di dalam tabel buku, sedangkan variabel $hasil_seleksi diisi dengan
perintah untuk meng-eksekusi query penyeleksian tabel.
Baris 15 - 29 Apabila proses penyeleksian gagal , maka akan ditampilkan
pesan bahwa proses penyeleksian tabel gagal dan apabila berhasil dilakukan
perintah pengulangan WHILE sebanyak baris yang terdapat di dalam tabel
buku. Kemudian, hasil dari perintah
mysql_fetch_array ditampilkan ke dalam tabel. Penulisan nama array harus
sesuai dengan nama field yang terdapat pada tabel buku.
Baris 30 Akhiri dan tutup tag PHP.
Baris 31-33 Akhiri tag tabel body dan HTML.
3. Simpan ke dalam lokasi c:/xampp/htdocs/xampp/koneksi_PHP dan simpan
file dengan nama index.php. Perhatikan Gambar 21.

Gambar 21 Menyimpan file dengan nama index.php

Setelah itu Kita Ketik dialamat address pada browser Mozila Firefox yaitu
http:/Localhost/xampp/koneksi_PHP lalu tekan Enter,

KASUS 2
Adapun langkah-langkah untuk membuatnya adalah sebagai berikut.
1. Terlebih dahulu Kita buka Web browser yang ada pada komputer
caranya klik Start | Programs | Internet Explorer atau web browser
lain seperti Mozila Firefox atau opera.
2. Kemudian pada kotak alamat address. Kita ketik
http://localhost/phpmyadmin, lalu tekan Enter pada keyboard.
3. Maka akan tampil halaman phpMyAdmin seperti pada Gambar 1.

Gambar 1 Halaman phpMyAdmin

4. Apabila Halaman phpMyAdmin tidak muncul seperti gambar
di atas maka Kita harus mengeceknya dengan cara Klik Start |
All Programs | Apache Friends | XAMPP | XAMPP Control Panel.
Perhatikan Gambar 2.

Gambar 2 Membuka Aplikasi xampp control panel

5. Selanjutnya Kita Klik Start pada bagian Apache dan MySQL , maka
akan tampil status menjadi running. Lihat Gambar 6.

Gambar 3 Apache dan MySQL telah diaktifkan

Membuat Database
1. Pastikan Kita masih berada pada halaman phpMyAdmin. Lihat
Gambar 4.

Gambar 4 Halaman phpMyAdmin

2. Untuk membuat database baru, caranya pada kotak teks
Ciptakan database baru Kita ketik nama katalog setelah itu klik
tombol Ciptakan. Lihat Gambar 5.

Gambar 5 Membuat database baru

3. Apabila proses pembuatan database berhasil, maka akan tercipta
database baru pada phpMyAdmin seperti pada Gambar 6.

Gambar 6 Pembuatan database berhasil

Membuat Tabel
Setelah Kita membuat database. Tahap selanjutnya adalah
membuat table . Table ini nantinya akan digunakan untuk menyimpan

data - data yang akan ditampilkan pada halaman web.

Adapun cara-cara pembuatan table adalah sebagai berikut.
1. Pastikan Kita telah membuka halaman phpMyAdmin dan
mengaktifkan database katalog. Perhatikan Gambar 7.

Gambar 7 Halaman phpMyAdmin

2. Perhatikan Gambar 8. Klik pada tab SQL ,kemudian akan
tampil area input perintah SQL. Ketiklah perintah di bawah ini ,
setelah itu klik tombol Go.
CREATE TABLE IF NOT EXISTS katalog (
id int(27) NOT NULL PRIMARY KEY AUTO_INCREMENT,
foto varchar(100) DEFAULT NULL,
judul text NOT NULL
);
Keterangan kode diatas :
* Baris 1 - 2 Perintah di atas akan membuat tabel dengan nama
katalog, field pertama yaitu field id. field ini adalah field sebagai
primary key ( unik) dengan auto_increment ( penomoran secara
otomatis ).
* Baris 3 - 5 Perintah berikutnya akan membuat field Fotodengan
tipe data varchar ( 100 ) , field judul tipe data text dan not null (

tidak boleh kosong ) .

Gambar 8 Membuat tabel dengan perintah SQL

3. Untuk melihat hasil pembuatan tabel , Kita dapat melihat penambahan
tabel di bawah combo database. Perhatikan Gambar 9. Klik katalog.

Gambar 9 Tabel yang baru tercipta

4. Struktur tabel yag Kita buat akan tampil pada halaman phpMyAdmin. Lihat
Gambar 10.

Gambar 10 Struktur tabel katalog

Menambah Data
a. Perintah INSERT
Setelah Kita membuat tabel, Kita akan menggunakan perintah
INSERT untuk menambah data baru ke dalam tabel.
Sintaks:
INSERT INTO nama_tabel ( fields) VALUES ( nilai_fields);
1. Buka jendela browser Kita, ketik http://localhost/phpmyadmin
pada textbox address.
2. Aktifkan database katalog, kemudian aktifkan tab SQL dan ketiklah perintah
di bawah untuk menambah data ke dalam tabelkatalog dan klik tombol Go.
Perhatikan Gambar 11.

INSERT INTO katalog VALUES

(1, after.jpg, After Effect CS4 untuk Orang Awam),
(2, vb.jpg, Aplikasi Mini Market dengan Visual Basic
6.0),
(3, autocad.jpg, 7 Jam Belajar Interaktif AutoCAD 2009
untuk 3D),
(4, facebook.jpg, Facebook untuk Orang Awam),
(5, excel.jpg, Excel 2007 untuk Akuntansi );
Keterangan Kode :

Baris 1 Perintah Insert di atas adalah menyisipkan atau menambah

data pada tabel katalog.
Baris 2 Menambahkan record atau data dengan id 1.
Baris 3 - 4 Menambahkan record atau data dengan id 2.
Baris 5 Menambahkan record atau data dengan id 3.
Baris 6 -7 Menambahkan record atau data dengan id 4.
Baris 8 Menambahkan record atau data dengan id 5.

Gambar 11 Perintah memasukkan data

3. Untuk melihat hasil peng-inputan data, klik tabel buku. Setelah itu ,
klik tab Browse .Lihat Gambar 15.

Gambar 12 Hasil memasukkan data

Untuk melakukan koneksi ke server, Kita perlu membuat file khusus yang
berfungsi sebagai panghubung antara script PHP dan database. Untuk
membuka koneksi ke server Kita harus memerlukan alamat server , username
dan password.
Adapun langkah-langkahnya adalah sebagai berikut:
1. Kita buka aplikasi Macromedia Dreamweaver 8 . Klik Tombol Start pada
Start menu. Kemudian Kita pilih menu All Programs > Macromedia >
Macromedia Dreamweaver 8.Lihat Gambar 13.
2. Setelah tampil jendela Start page Kita Klik icon dengan tulisan PHP ,
Perhatikan Gambar 14.
3. Setelah diklik icon maka akan tampil jendela dokumen
baru seperti Gambar 15.

Gambar 13 Membuka Program aplikasi Macromedia Dreaweaver 8

Gambar 14 Memilih PHP

Gambar 15 Tampilan Jendela dokumen PHP

4. Selanjutnya Kita pastikan tab yang aktif pada Code . Lihat Gambar 16.

Gambar 16 Mengaktifkan tab Code

5. Kemudian Kita hapus semua kode, lalu ketikkan kode di bawah ini.
<?php
$q=$_GET[maxi];
$con = mysql_connect(localhost, root, );
if (!$con){ die(Koneksi gagal: . mysql_error());
}
mysql_select_db(katalog, $con);
$sql=SELECT * FROM katalog WHERE Id = .$q.;
$result = mysql_query($sql);
echo <table border=1>
<tr>
<th>Cover</th>
<th>Judul buku</th>
</tr>;
while($baris = mysql_fetch_array($result))
{
echo <tr>
<td><img src=\$baris[foto]\ /></td>
<td align=justify>$baris[judul]</
td><tr>;
}
echo </table>;
mysql_close($con);
?>
Keterangan kode :
Baris 1 - 3 Awal tag PHP, perintah berikutnya adalah variabel
get dengan nama maxi lalu membuat variabel untuk menghubungkan
koneksi database ke server
Baris 4 - 5 Suatu kondisi apabila gagal tampilkan pesan.
Baris 6 - 8 Perintah untuk menyeleksi data, kemudian membuat
variabel untuk menampilkan data dan variabel hasil query.
Baris 9 - 13 perintah untuk membuat tabel , kolom dan baris
dengan nama cover dan judul .
Baris 14 - 20 Perintah pengulangan WHILE sebanyak baris yang
terdapat di dalam tabel katalog. Kemudian, hasil dari perintah
mysql_fetch_array ditampilkan ke dalam tabel. Penulisan nama array
harus sesuai dengan nama field yang terdapat pada tabel katalog.

 Baris 21 -23 Akhiri tag tabel dan koneksi mysql kemudian tutup
tag php.
6. Simpan ke dalam lokasi c:/xampp/htdocs/xampp, lalu Kita buat folder baru
dengan nama ajax_database dan simpan file dengan nama get_katalog.php.
Perhatikan Gambar 17.

Gambar 17 Menyimpan dengan nama file get_katalog.php

Tugas Praktikum :
1. Buatlah form interface dan masukkan data kedalam semua tabel yang telah
kalian buat. Laporan dikumpulkan pada saat tatap muka untuk diperiksa.

DAFTAR PUSTAKA
[1]___Website. http://www.Cangkruk.com, diakses pada November 2010.

[2]___Katalog. http://www.wikipedia.com, diakses pada November 2010.

[3] Anas, Dedi. Database MySQL.Maxicom.2010
[4] Atkinson, Leon. Core PHP Programming, Third Edition. Prentice Hall
PTR.2003