Modul P PBW

1
Modul 1 HTML dan CSS

A. Materi Penunjang
1. HTML
Kriteria:
 HTML adalah dokumen web (web page)
 HTML adalah bahasa markup “<”,”>” (bukan bahasa pemrograman)
 HTML terdiri dari sekumpulan tag, setiap tag harus diapit dengan tanda “<”
dan “>”
 Beberapa tag harus ditutup, misalnya <html> ditutup dengan </html>
 Web browser akan menerjemahkan setiap tag ke bentuk tampilan.
Struktur penulisan HTML:

<html>
<head>
<!—Terdiri dari elemen-elemen yang mendeklarasikan
konten sebagai pendukung
lingkungan seperti title, meta dokumen, CSS, Java Script
-->
</head>
<body>
<!—Terdiri dari elemen-elemen yang diinterpretasikan
sebagai tampilan web -->
</body>
</html>
1.1. Tag HTML dasar

Tag Fungsi
<html></html> Mendefinisikan sebuah dokumen HTML
<body></body> Mendefinisikan isi/badan dokumen
<h1>-<h6> Mendefinisikan heading ke-1 s/d ke-6
<p></p> Mendefinisikan sebuah paragraf
<br> Menyisipkan sebuah line break
<hr> Mendefinisikan sebuah garis horisontal

</body>
</html>
Pemformatan teks dan Preformat

Agar penulisan kode HTML web ditampilkan di web browser seperti dengan
format penulisan apa adanya maka digunakan tag <pre>.
<html>
<head><title>Tes Preformat</title></head>
<body>
Preformat
<pre>
for(int i=0;i<10;i++){
System.out.println("ke-"+(i+1));
}
</pre>
</body>
</html>
5
Unordered List, ordered list, definition list, daftar menu

Unordered list digunakan untuk menandai setiap item dari daftar/list
menggunakan bullet berupa tiga symbol: disk(cakram), circle(lingkaran),
square(kotak)
Penulisan unordered list diawali tag <ul> serta diikuti <li> dan ditutup dengan
</li></ul>.
Ordered list digunakan untuk menandai item dari daftar menggunakan nomor.
Cara menggunakan ordered list sama dengan unordered list tapi tag <ul>
diganti dengan tag <ol>.
Definition list untuk memberi keterangan pada item dari daftar. Definition list
diawali tag <dl> serta diikuti tag <dt> dan ditutup dengan tag <dd> dan tag
</dl>.
Daftar menu digunakan untuk membuat daftar menu dengan menggunakan
tag <menu> dengan diikuti tag </menu>.
<html>
<head><title>Tes List</title></head>
<body>
<ul>
<li>list a</li>
<li>list b</li>
<li>list c</li>
</ul>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>Tampilan</dd>
<dt>PHP</dt>
<dd>Proses</dd>
</dl>
</body>
</html>
Membuat Link
Agar halaman web dapat mengakses ke halaman lain, HTML menyediakan
tag <a> disertai atribut href dan link juga bisa ditambah dengan title untuk
memberikan informasi tentang link yang dibuat, title ini akan muncul saat link
disorot.
<html>
<head><title>Tes Link</title></head>
<body>
<a href="http://www.google.com" title="Search
Engine">Google</a>
</body>
6
</html>
Membuat table
Untuk membuat tabel kita menggunakan tag <table>, <tr> dan <td>. Ketiga
tag tersebut saling berhubungan, tag <tr> digunakan untuk membuat baris
dalam tabel, dan tag <td> digunakan untuk membuat kolom dalam tabel.
<html>
<head><title>Tes Tabel</title></head>
<body>
<table border='1'>
<tr>
<th>NIM</td><th>Nama</td>
</tr>
<tr>
<td>10650031</td><td>Ahmad Wahyu
Rosyadi</td>
</tr>
<tr>
<td>10650015</td><td>Ahmad Wahyu</td>
</tr>
</table>
</body>
</html>
DIV
Tag <div> mempunyai perbedaan dengan tag <p> yaitu div tidak membuat
paragraph baru hanya melakukan pergantian baris terhadap kalimat. Div
dapat membuat dokumen berada di posisi left, right, center, dan justify
terhadap layar web browser dengan menggunakan atribut align pada tag div
yang diinginkan. Dengan ditambahkan atribut CSS tag div ini biasanya juga
digunakan untuk desain layout website yang akan dibuat.
<html>
<head><title>Tes Paragraf</title></head>
<body>
<p>Paragraf</p>
<div align='center'>PHP adalah bahasa programan
untuk membangun sebuah website dinamis. PHP
meupakan kependekan dari PHP:Hypertext Preprocessing. Pada
Juni 2004 PHP versi 5.0
telah dirilis dan mengalami perubahan besar. Pada versi
ini PHP memasukkan model
pemrograman berorientasi objek. Sintak dasar program PHP yang
sering digunakan seperti
dibawah ini</div>
</body>
</html>
7
2. CSS
Syntax/kalimat CSS adalah aturan atau kaidah penulisan text CSS.
2.1. Format penulisan CSS

Selector {property: value}
Selector berfungsi untuk menunjukkan bagian mana yang hendak diatur.
Property untuk menunjukkan bagian dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
<html>
<head><title>Tes CSS</title></head>
<style>
h1{color:green}
</style>
<body>
<h1>Warna Ijo</h1>
</body>
</html>
2.2. Pengelompokkan selector

Digunakan untuk menggabungkan beberapa selector yang memiliki
pengaturan yang sama.
<html>
<style>
h1,h2{color:green}
</style>
<body>
<h1>Warna Ijo</h1>
<h2>Warna Ijo</h2>
</body>
</html>
2.3. Pengaturan banyak property

Digunakan jika terdapat banyak property yang akan diatur.
<html>
<style>
h1,h2{
color:green;
font-family:Arial;
}
</style>
<body>
<h1>Warna Ijo</h1>
<h2>Warna Ijo</h2>
</body>
</html>
8
2.4. Komentar pada CSS

Untuk memberikan keterangan atau komentar yang tidak akan
ditampilkan di layar, maka digunakan karakter /*komentar*/.
<html>
<style>
h1,h2{
color:green; /*ijo*/
font-family:Arial;
}
</style>
<body>
<h1>Warna Ijo</h1>
<h2>Warna Ijo</h2>
</body>
</html>
2.5. Penempatan kode CSS

Untuk menambahkan kode CSS kita dapat menggunakan beberapa cara,
seperti: Inline CSS, Embed CSS, link ke external CSS.
- Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang akan diformat.
Penulisan dengan cara seperti ini tidak membutuhkan selector dalam kode
CSS. Cara ini sebaiknya hanya digunakan jika Anda ingin memformat suatu
elemen satu kali saja.
Contoh: <p style=”color:green”>Isi paragraph</p>
- Embed CSS
Anda bisa meletakkan kode CSS diantara tag <head> atau bisa juga
diantara tag <body>. Penulisan seperti ini diawali dengan tag <style> dan
diakhiri dengan tag </style>.
- External CSS
Dengan menggunakan cara seperti ini kita dapat memanggil style CSS
pada file CSS yang kita inginkan dengan menggunakan perintah “Link rel”
yang berfungsi menghubungkan ke dalam sebuah style CSS eksternal
dengan nama yang telah kita tentukan.
Contoh:
<link rel=”stylesheet” type=”text/css” href=”nama.css”>
2.6. Penamaan selector CSS

Selector CSS bisa diberi nama dengan tag HTML atau selain tag HTML.
Ketentuan nama:
1. Penamaan dengan tag HTML:
- Harus dinamai dengan tag yang tersedia di HTML.
- Akan merubah tampilan tag HTML yang sama dengan nama selector CSS.
2. Penamaan dengan nama selain tag HTML:
- Harus didahului dengan karakter “.”, “#”. Contoh: .ijo{}, #biru{}
9
- Pemanggilan selector menggunakan class untuk “.”, dan id untuk “#”.

Contoh: <div class=”ijo”>, <div id=”biru”>
B. TUGAS
1. Buatlah tampilan web seperti di bawah ini dengan menggunakan HTML,
CSS, dan tag <div>
2. Huruf: Century Gothic

3. Menu sebelah kiri ketika di atasnya ada mouse HARUS bisa berubah warna.
Contoh:
Sebelum: Sesudah:
10
MODUL 2 JAVASCRIPT
2.1. Javascript
Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada
fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet
bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah
bahasa pemrograman untuk memberikan kemampuan tambahan
terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah
perintah di sisi user, yang artinya di sisi browser bukan di sisi server web.
Javascript bergantung kepada browser(navigator) yang memanggil
halaman web yang berisi
skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen
HTML. Javascript juga tidak memerlukan kompilator atau penterjemah
khusus untuk menjalankannya (pada kenyataannya kompilator Javascript
sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan
bahasa “Java” (dengan mana JavaScript selalu di banding bandingkan)
yang memerlukan kompilator khusus untuk menterjemahkannya di sisi
user/klien.
2.2. Penulisan Java Script

Kode Java Script dituliskan pada file HTML.Terdapatdua cara untuk
menuliskan kode-kode Java Script agar dapat ditampilkan pada halaman
HTML, yaitu :
a. Java script ditulis pada file yang sama
Untuk penulisan dengan cara ini, perintah yang digunakan adalah
<SCRIPT LANGUANGE =”JavaScript” >program java script disini</SCRIPT>.
Perintah tersebut biasanya diletakkan diantara Tag <BODY>…</BODY>
Contoh Penulisan :
<HTML>
<HEAD><TITLE>……….</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”Javascript”>
kode javascript disini
</SCRIPT>
kode HTML disini
</BODY>
</HTML>
b. Javascript ditulis pada file terpisah

Kode Javascript bisa juga kita buat dalam file terpisah dengan tujuan agar
dokumen HTML isinya
tidak terlalu panjang. Atribut yang digunakan adalah
<SCRIPT SRC=”namafile.js”>…</SCRIPT>
11
Diantara tag <SCRIPT………> dan <SCRIPT> tidak diperlukan lagi kode

Javascriptnya karena
sudah dibuat dalam file erpisah. File yang mengandung kode Javascript
berekstensi .js
2.3. Program Pertama Javascript

Pada bagian ini kita akan membuat program dengan menggunakan
Javascript. Program ini akan menampilkan teks “ Belajar Pemrograman
Javascript”
<HTML>
<BODY>
<SCRIPT language="JavaScript">
document.write("Belajar Pemrograman Javascript!");
</SCRIPT>
</BODY>
</HTML>
Berikut diberikan contoh Program Javascript yang diletakkan di file lain dan
dipanggil melalui suatu file HTML
File isi.js
document.writeln("<CENTER>");
document.writeln("<HR WIDTH=600 COLOR=Black>");
document.writeln("<H1>SEKOLAH TINGGI TEKNIK QOMARUDDIN</H1>");
document.writeln("<H2>FAKULTAS TEKNIK<H2>");
document.writeln("<H3>JURUSAN TEKNIK INFORMATIKA<H3>");
document.writeln("<HR WIDTH=600 COLOR=Black>");
document.writeln("</CENTER>");
File js.html
<HTML>
<BODY>
<B>Contoh ini menggunakan Javascript yang diambil dari File
lain..</B>
<P>
<SCRIPT language="JavaScript" SRC="isi.js"></SCRIPT>
</BODY>
</HTML>
2.4. Variabel Dalam JavaScript
Variabel adalah tempat dimana kita menyimpan nilai-nilai atau informasi-
informasi pada JavaScript. Variabel yang dideklarasikan dapat di isi
dengan nilai apa saja. Dalam JavaScript pendeklarasian sebuah variabel
sifatnya opsional, artinya anda boleh mendeklarasikan atau tidak hal tersebut
tidak menjadi masalah. Jika anda memberi nilai pada variabel, maka
dalam JavaScript dianggap bahwa anda telah mendeklarasikan variabel
tersebut. Aturan penamaan variabel :
• Harus diawali dengan karakter (huruf atau baris bawah)
12
• Tidak boleh menggunakan spasi

• Huruf Kapital dan kecil memiliki arti yang berbeda
• Tidak boleh menggunakan kata-kata yang merupakan perintah dalam
JavaScript.
Deklarasi Variabel
Var nama_variabel = nilai
Atau
Nama_variabel = nilai
Contoh :
var nama;
var nama = ” Ahmad Wahyu R”
var X = 1992;
var Y;
Nama = ”Ahmad Widianto”
X = 1992;
Y = 08170223513
2.5. Tipe Data

Tidak seperti bahasa pemrograman lainnya, JavaScript tidak memiliki tipe
data secara explisit. Hal
ini dapat dilihat dari beberapa contoh variabel diatas. Anda
mendeklarasikan variabel tapi tidak menentukan tipenya. Meskipun
JavaScript tidak memiliki tipe data secara explisit. JavaScript mempunyai
tipe data implisit. Terdapat empat macam tipe data implisit yang dimiliki oleh
JavaScript yaitu :
• Numerik, seperti : 0222532531, 1000, 45, 3.146789 dsb
• String, seperti : “Hallo”, “April”, “Jl. Setiabudi No 17A”, “Cece Kirani” dsb
• Boolean, bernilai true atau false
• Null, variabel yang tidak diinisilisasi
- Tipe Numerik
Pada dasarnya JavaScript hanya mengenal dua macam tipe numerik, yaitu
bilangan bulat (integer) dan bilangan pecahan(real/float). Untuk bilangan
bulat, kita dapat merepresentasikan dengan basis desimal, oktal atau
heksadesimal.
Contoh :
var A = 100;
var B = 0x2F;
untuk pendeklarasian tipe bilangan real, dapat menggunakan tanda titik
atau notasi ilmiah (notasi E).
Contoh :
var a = 3.14533567;
var b = 1.23456E+3;
13
- Tipe String
Untuk mendeklarasikan tipe string dapat dilakukan dengan cara
menuliskan string diantara tanda petik tunggal (‟) atau tanda petik ganda
(”) Contoh:
var str =‟Contoh deklarasi string‟;
var str1 = ”cara ini juga bisa untuk menulis string”;
- Tipe Boolean
Tipe boolean hanya mempunyai nilai True atau False.Tipe ini biasanya
digunakan untuk mengecek
suatu kondisi atau keadaan. Contoh :
var X = (Y > 90);
contoh diatas menunjukkan bahwa jika Y lebih besar dari 90 maka X akan
bernilai True.
- Tipe Null
Tipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai
awal (inisialisasi).
2.6. Operator
Operator pada JavaScript terbagi menjadi enam, yaitu :
• Aritmatika
• Pemberian nilai (Assign)
• Pemanipulasian bit (bitwise)
• Pembanding
• Logika
• String
a. Operator Aritmatika
Digunakan untuk operan beripe numerik. Ada dua macam operator aritmatik,
yaitu operator numerik tunggal dan operator aritmatik biner. Perbedaan
kedua operator terletak pada jumlah operan yang harus dioperasikan.
Operator Tunggal/Biner Keterangan
b. Operator Pemberian Nilai

Digunakan untuk memberikan nilai ke suatu operan atau mengubah nilai
suatu operan. Operator keterangan Contoh Ekuivalen
14
c. Operator Manipulasi Bit

Operasi ini berhubungan dengan pemanipulasian bit pada operan bertipe
bilangan bulat.
d. Operator Pembanding
Digunakan untuk membandingkan dua buah operan. Operan yang dikenal
operator ini dapat bertipe string, numerik, maupun ekspresi lain.
e. Operator Logika
Digunakan untuk mengoperasikan operan yang bertipe boolean.
f. Operator String
Selain operator pembanding, operator string pada JavaScript juga mengenal
satu operator lagi yang bernama PENGGABUNGAN. Operator ini digunakan
untuk menggabungkan beberapa string menjadi sebuah stringyang lebih
panjang.
Contoh :
nama = ”Java” + ”Script”;
akan menghasilkan ”JavaScript” pada variabel nama
15
Contoh Program JavaScript

<HTML>
<HEAD><TITLE>Operasi Aritmatika</TITLE></HEAD>
<BODY>
<P><SCRIPT language="JavaScript">

</SCRIPT></P>
</BODY>
</HTML>
2.7. Memasukkan Data

Untuk memasukkan data dari keyboard dapat dilakukandengan
menggunakan perintah input. Contoh Program JavaScript
<HTML>
<HEAD><TITLE>Memasukkan Bilangan</TITLE></HEAD>
<BODY>
<P><SCRIPT language="JavaScript">
</SCRIPT></P>
<FORM NAME ="fform">
<H1><BR>Memasukkan Data Lewat Keyboard</H1>
<PRE>
16
Bilangan Pertama :<input type="text" size="11"

name="bilangan1">
Bilangan Kedua :<input type="text" size="11" name="bilangan2">
</PRE>
<P>
<INPUT TYPE="button" value="Jumlahkan" onclick="jumlah()">
<INPUT TYPE="reset" value="Ulang">
</FORM>
</BODY>
</HTML>
2.8. Objek Untuk memasukkan Data

Terdapat beberapa objek yang dapat digunakan untuk memeasukkan
data. Objek-objek tersebut biasanya terdapat dalam suatu form. Adapun
objek-objek tersebut meliputi Objek Text, Objek Radio, Objek Checkbox,
Objek Textarea, dan Objek Select.
Objek Text
Untuk menginputkan data kita dapat menggunakan komponen/objek
text. Contoh penggunaannya dapat kita lihat pada contoh berikut :
<html>
<head><title>Latihan Dengan Objek Text</title></head>
<body>
<script languange ="JavaScript">

</script>
<form name ="fform">
<H1> Memasukkan Data Dengan Objek Teks</H1><hr>
<PRE>
Nama Anda : <input type="text" size="11" name="nama">
Alamat : <input type="text" size="25" name="alamat">
</PRE>
<BR>
<input type="button" value="kirim" onclick="tekan()">
<input type="reset" value="ulang">
<H3>Output</H3>
<PRE>
Jadi Nama Anda adalah :<input type="text"
size="11"name="onama">
17
Alamat Anda di :<input type="text" size="25" name="oalamat">

</form>
</body>
</html>
2.9. Percabangan
Untuk membuat suatu halaman yang dinamis dan interaktif, perancang
halaman Web membutuhkan perintah-perintah yang dapat mengatur aliran
dari informasi. Berdasarkan hasil komputasi yang telah dilakukan, JavaScript
akan membuat keputusan jalur mana yang akan dieksekusi. Pada
dasarnya dalam JavaScript terdapat dua macam pernyataan percabangan
yaitu if..else dan switch
- If..Else
Pernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian
mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi, dan
mengeksekusi pernyataan lain bila kondisi tersebut tidak terpenuhi.
if (kondisi)
{
//pernyataan1 dieksekusi
//bila kondisi terpenuhi
}
else
{
//bila kodisi tidak terpenuhi
}
kondisi adalah ekspresi JavaScript yang mana hasil evaluasinya memiliki nilai
Boolean true atau false. Untuk kasus yang melibatkan lebih banyak kondisi,
maka kita dapat meletakkan pernyataan if lain setelah else
if (kondisi1)
{
//bila kondisi1 terpenuhi
}
else if (kondisi2)
{
//bila kodisi1 tidak terpenuhi
}
else
{
//bila kodisi2 tidak terpenuhi
}
18

<HTML>
<HEAD><TITLE>Percabangan IF-ELSE</TITLE></HEAD>
<BODY>
</SCRIPT>
<H2><BR>Transalate Angka</H2>
Masukkan Bilangan(0,1,2) :<input type="text" size="11"
name="bilangan">
<P>
<INPUT TYPE="button" value="Tanya" onclick="tanyabilangan()">
<INPUT TYPE="reset" value="Ulang"> </p>
</FORM>
</BODY>
</HTML>
- Switch
Selain menggunakan if..else, percabangan juga dapatditangani dengan
perintah switch. Dengn kata lain pernyataan switch digunakanuntuk
menyederhanakan pernyataan if..else yang terlalu banyak. Contoh Program
JavaScript:
<HTML>
<HEAD><TITLE>Percabangan Switch</TITLE></HEAD>
<BODY>
</SCRIPT>
<H2>Penggunaan Percabangan Switch</H2><HR>
<PRE>
Masukkan Nomor Bulan [1-12] :<input type="text" size="2"
name="ibulan">
<INPUT TYPE="button" value="Hitung"
onclick="tanyabulan()"><INPUT
TYPE="reset" value="Ulang">
</PRE>
</FORM>
</BODY>
</HTML>
2.10. Perulangan
Untuk mengulang kejadian beberapa kali maka kita membutuhkan
proses perulangan. Pada
JavaScript dikenal beberapa metode/cara perulangan.
5.2 Perulangan For
Digunakan untuk mengeksekusi pernyataan-pernyataan beberapa kali.
Perulangan For paling sering dipakai, jika anda sudah tahu akhir dari
perulangan tersebut. Perintah for mengulang suatu loop sampai kondisi
menghasilkan evaluasi true atau loopkeluar dengan perintah break.
20
Contoh :
for (nilai awal;kondisi;penambahan)
{
ulang pernyataan ini;
}
Contoh dalam program :
For(x=1;x<=10;x++)
{
document.writeln(”Belajar JavaScript Yuuuuu..”);
}
Contoh Program JavaScript:
<HTML>
<HEAD><TITLE>Latihan Perulangan I</TITLE></HEAD>
<SCRIPT LANGUAGE="JavaScript">
 Kuadrat: " +sq +
"<BR>");
document.writeln("</PRE>");
}
document.writeln("---------------------------------------------
---");
// akhir dari penyembunyian -->
</SCRIPT>
<BODY>
</BODY>
</HTML>
2.11. Kejadian (Event)

Even adalah sesuatu yang terjadi pada halaman HTML. Berikut ini
terdapat beberapa bentuk kejadian yaitu jika pengguna memuat
dokumen, pengguna memasukkan data, pengguna mengklik tombol dan
sebagainya. Hal-hal tersebut diatur oleheven. Semua kejadian pada
Javascript dapat anda tangani dengan menentukan kejadiannya. Biasanya
kejadian(even) adalah sebuah fungsi, tetapi pada beberapa kasus, kita
dapat menuliskan pernyataan-pernyataannya secara langsung. Berikut ini
adalah daftar kejadian(even) pada JavaScript :
21
2.12. Penanganan Kejadian (Event)

Berikut ini akan diberikan beberapa contoh program-program yang
menggunakan kejadian-kejadian dalam aplikasinya. Contoh program yang
menggunakan even OnClick :
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function warna(pilihan)
{
alert("Anda Memilih Warna " + pilihan);
document.bgColor=pilihan;
}
</SCRIPT>
<h1 align="center">Latihan Event OnClick</h1>
<hr width="500" color="black" noshade>
<h3 align="center">Pilih warna favorit anda.</h3>
<CENTER>
<FORM>
<INPUT TYPE="button" VALUE="Biru" onClick="warna('lightblue')">
22
<INPUT TYPE="button" VALUE="Pink" onClick="warna('pink')">

<INPUT TYPE="button" VALUE="Coklat"
onClick="warna('burlywood')">
<INPUT TYPE="button" VALUE="Kelabu"
onClick="warna('darkgray')">
<INPUT TYPE="button" VALUE="Oranye"
onClick="warna('peachpuff')">
<INPUT TYPE="button" VALUE="Putih" onClick="warna('white')">
</FORM>
<FORM>
<IMG NAME="coolfan" SRC="fanoff.gif" width=61
height=72><BR><BR>
<INPUT TYPE=BUTTON VALUE=" Off " onClick="coolfan.src =
'fanoff.gif'">
<INPUT TYPE=BUTTON VALUE=" On " onClick="coolfan.src =
'fanon.gif'">
</FORM>
</CENTER>
<hr width="500" color="black" noshade>
</BODY>
</HTML>
2.13. TUGAS
Buatlah halaman web untuk pembayaran SPP dengan kriteria sebagai berikut:
1. Menggunakan HTML+Javascript
2. Form harus bisa menentukan pembayaran menjadi LUNAS atau KURANG
3. Jika pembayaran lunas maka form juga menampilkan nominal kembalian
4. Jika pembayaran kurang maka form juga menampilkan nominal
kurangnya
5. Tagihannya adalah 100.000 per bulan
23
24
MODUL 3 PHP
3.1. PHP
PHP adalah bahasa programan untuk membangun sebuah website
dinamis. PHP merupakan kependekan dari PHP:Hypertext Preprocessing.
Pada Juni 2004 PHP versi 5.0 telah dirilis dan mengalami perubahan
besar. Pada versi ini PHP memasukkan model pemrograman berorientasi
objek. Sintak dasar program PHP yang sering digunakan seperti dibawah ini:
<?php
Isi program
?>
PHP sebagai bahasa pemrograman web memiliki beberapa kelebihan,

diantaranya
1. 'Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak
melakukan sebuah kompilasi dalam penggunaannya.'
2. 'Web Server yang mendukung PHP dapat ditemukan dimana-mana dari
mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relatif
mudah.'
3. 'Dalam sisi pengembangan lebih mudah, karena banyaknya milis-milis dan
developer yang siap membantu dalam pengembangan.'
4. 'Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling
mudah karena memiliki referensi yang banyak.'
5. 'PHP adalah bahasa open source yang dapat digunakandi berbagai
mesin (Linux, Unix,
6. Macintosh, Windows) dan dapat dijalankan secara runtime melalui
console serta juga dapat menjalankan perintah-perintah system.'
3.2. Struktur penulisan PHP

1. Diapit tanda “<?php” dan “?>”
2. Contoh penulisan:
<?php echo “Hello World”;?>
3.3. Identifier
Identifier dalam PHP terdiri dari fungsi, variable dan classes. Aturan dalam
identifier yang diperuntukkan pada PHP adalah:
- Tidak boleh menggunakan tanda baca dalam mendefinisikan sebuah
identifier.
- Fungsi, variable, dan class harus dimulai dengan huruf atau under_score
“_”
- Variable selalu diawali dengan tanda $(dollar)
25
- Nama fungsi yang dibuat tidak boleh sama dengan nama fungsi yang
telah tersedia dalam bahasa PHP
- Nama variable seharusnya tidak boleh sama dengan nama fungsi yang
telah ditetapkan dalam PHP
- Fungsi, variable, dan class tidak boleh mengandung spasi, jika ingin dipisah
bisa dipisah dengan tanda “_”.
Benar Salah
sttq -sttq
_angkatan -angkatan
ac_milan ac Milan
Kelas1a 1akelas
Contoh:
<?php
$nama=”Wahyu”;
$alamat=”Gresik”;
$gender=”laki-laki”
echo(“Nama: ”.$nama.”<br/>”);
echo(“Alamat: ”.$alamat.”<br/>”);
echo(“Gender: ”.$gender.”<br/>”);
?>
3.4. Tipe data

PHP mengenal beberapa tipe data. Tipe data tersebut merupakan sebuah
variable yang dapat ditentukan secara otomatis oleh PHP yang tergantung
pada operasi yang sedang dilakukan menggunakan variable tersebut. Tipe
data tersebut adalah: Integer, floating point, double, string, object, Boolean.
Berikut ini tipe konversi data pada PHP.
Contoh:
<?php
$nama="Ahmad";
$nilai_pbw=9;
$nilai_ppbw=10;
$ket=true;
echo("Nama: ".$nama."<br/>");
echo("Nilai PBW: ".$nilai_pbw."<br/>");
echo("Nilai P. PBW: ".$nilai_ppbw."<br/>");
26
if($ket==true){
echo("boolean menunjukkan nilai ".$ket."<br/>");
}
$nilai_pbw=(float)$nilai_pbw;
echo("Nilai PBW setelah dikonversi ke float:
".$nilai_pbw."<br/>");
?>
3.5. Penggunaan Form

Untuk selanjutnya kita akan membahas penggunaan Form dengan PHP,
dengan tujuan agar terbiasa dengan penggunaan form serta mengenal
poperasi yang ada ketika menggunakan form untuk proses input data. Berikut
beberapa macam komponen form yang perlu diketahui:
1. Form
2. Textfield/input
3. Button/submit
4. Combobox
5. Radio button
6. Text area
7. Checkbox
Sifat dari form adalah apabila sebuah form di-submit, maka variable dalam
form (didefinisikan name sebagai nama variablenya dan value sebagai nilai
variablenya) akan secara otomatis berlaku di dalam program PHP yang
dituju.
Contoh form:
<form name="f" method="POST" action="aksi.php">
Nama:<input type="text" name="nama"><br/>
NIM:<input type="text" name="nomer"><br/>
<input type="submit" name="ok" value="Lanjut">
</form>
Kemudian file aksi diberi nama aksi.php

<?php
$nama=$_POST['nama'];
$nim=$_POST['nomer'];
echo("Nama: ".$nama."<br/>");
echo("NIM: ".$nim."<br/>");
?>
3.6. Pembahasan Form

- Form
Method: mendefinisikan jenis variable yang disubmit, dibedakan menjadi 2:
POST dan GET. Pengambilan data dengan cara=$_GET[„nama_variable‟],
$_POST[„nama_variable‟].
27
Action: mendefinisikan halaman yang akan dituju ketika form disubmit, dan
variable dalam form tersebut akan dikirimkan ke file action ini. Dalam hal ini
terdapat kode
<form name=”form_input” method=”post” action=”input.php”>
- Input
<input type=”text” name=”nama”>
Penjelasan:
Name= memberikan nama dari komponen form yang dibuat, name ini
nantinya dikenali sebagai nama variable. Dengan pemanggilan datanya
sesuai dengan nama methodnya.
Contoh:
File_form (POST): <input type=”text” name=”nama”>
File_aksi: $nama=$_POST[„nama‟]
3.7. Struktur control

Struktur control(statement) yang dimiliki PHP berfungsi hamper sama dengan
statement program lainnya yaitu berfungsi sebagai rangka badan program
yang mengatur aliran program. Rangkaian program yang ditulis harus
memenuhi kondisi sebagai berikut:
- Melanjutkan sebuah pernyataan bila kondisi terpenuhi
- Mengulang suatu perintah bila kondisi telah terpenuhi
- Memiliki sebuah pilihan dari beberapa alternatif bila kondisi telah
terpenuhi.
1. Statement if-else
<?php
$nilai_pbw=90;
If($nilai_pbw>70){
Echo “Lulus”;
}else{
Echo”Gagal”;
}
?>
2. Statement switch
<?php
$angka=1;
$huruf=””;
switch($angka){
case 1: $huruf=”Satu”;
break;
case 2: $huruf=”Dua”;
break;
case 3: $huruf=”Tiga”;
break;
}
echo($huruf);
?>
28
3.8. Perulangan
Loop merupakan proses eksekusi operasi program secara berulang-ulang
sampai ketemu kondisi untuk mengakhiri eksekusi tersebut. Dalam hal ini kita
tidak perlu menulis ulang sebuah perintah sebanyak pengulangan yang
diinginkan.
1. For
For difungsikan untuk mengulangi perintah dengan jumlah perulangan
yang sudah ditentukan. Pada perintah ini kita tidak perlu menuliskan
sebuah kondisi untuk diuji. Kita hanya menuliskan nilai awal dan akhir
variable perhitungan. Nilai ini akan secara otomatis bertambah dan
berkurang tiap kali sebuah pengulangan dilaksanakan.
for(nilai_awal, nilai_akhir/syarat perulangan, peningkatan/penurunan){
pernyataan yang akan dijalankan
}
Contoh:
for($i=0;$i<10;$i++){
echo “Loop-”.$i.”<br/>”;
}
2. Foreach
Perintah ini digunakan untuk melakukan iterasi pada sebuah nilai array.
foreach(ekspresi_array as $nilai){
operasi program;
}
Contoh:
<?php
$nama=array("Ahmad","Muhammad");
foreach($nama as $individu){
print($individu."<br/>");
}
?>
3. While
Untuk mengulangi sebuah perintah sampai pada jumlah tertentu. Untuk
menghentikan pengulangan digunakan suatu kondisi tertentu. Nilai kondisi
ini memiliki hasil akhir berupa false dan true seperti layaknya perintah
if…else. Pengulangan akan terus berlanjut jika kondisi masih menunjukkan
nilai benar.
Contoh:
<?php
$i=1;
while($i<10){
echo $i."<br/>";
$i++;
}
?>
29
4. Do-while
Pada prinsipnya, metode menggunakan do…while dengan while hampir
sama. Tetapi yang membedakannya adalah terletak pada eksekusi
operasi program. Pada pernyataan while, maka persyaratan terlebih
dahulu diperiksa. Tetapi proses do…while adalah operasi program
dieksekusi terlebih dahulu baru kemudian persyaratannya diperiksa.
<?php
$i=1;
do{
echo $i."<br/>";
$i++;
}
while($i<10);
?>
3.9. Fungsi (Function) dalam PHP

Dalam merancang kode program, kadang kita sering membuat kode yang
melakukan tugas yang sama secara berulang-ulang, seperti membaca tabel
dari database, menampilkan penjumlahan, dan lain-lain. Tugas yang sama ini
akan lebih efektif jika dipisahkan dari program utama, dan dirancang
menjadi sebuah fungsi.
Fungsi (atau Function) dalam bahasa pemograman adalah kode program
yang dirancang untuk menyelesaikan sebuah tugas tertentu, dan merupakan
bagian dari program utama. Kita dapat membuat fungsi sendiri, atau
menggunakan fungsi yang dibuat oleh programmer lain.
Contoh:
<?php
function kampus(){
echo "STTQ";
}
kampus();//pemanggilan fungsi
?>
Fungsi ada yang memiliki nilai dan ada pula yang tidak memiliki nilai. Fungsi
yang memiliki nilai bisa digunakan seperti variable. Contoh:
<?php
function nilai(){
$nilai=10;
return $nilai; //wajib ada bagi fungsi yang memiliki
nilai
}
$io=7+nilai(); //pemanggilan fungsi
echo $io;
?>
30
3.10. dengan argument atau parameter

Argument merupakan suatu nilai yang dimasukkan ke dalam fungsi. Secara
default sebuah arguman bersifat pass by value. Artinya adalah nilainya saja
yang dibutuhkan sehingga nilai pada variable tersebut tidak mengalami
perubahan.
Contoh:
<?php
function nilai($x,$y){
$nilai=$x+$y;
return $nilai;
}
echo nilai(7+20);
?>
3.11. Fungsi include(), require(), include_once() dan require_once()

PHP memiliki kemampuan untuk menyertakan file php lainnya ke dalam suatu
program PHP. Tentunya kemampuan ini sangat berguna bagi programmer
karena tidak perlu menuliskan suatu perintah yang diperlukan di setiap file
berulang kali, cukup ditulis di satu file dan disertakan di file yang
memerlukannya. Contoh bagian dari program PHP yang biasanya dituliskan
di file terpisah dan disertakan di file-file lainnya adalah potongan program
untuk melakukan koneksi ke database. Kita tentu sudah memahami bahwa
koneksi ke database harus dilakukan terlebih dahulu sebelum kita berurusan
dengan data yang disimpan di database.
Terkait dengan hal tersebut, PHP memiliki beberapa fungsi untuk menyertakan
suatu file yaitu include(), require(), include_once() dan require_once().
- Perbedaan Fungsi include() dan require()

Terkait dengan fungsi include(), manual PHP menyatakan bahwa “The
include statement includes and evaluates the specified file”. Artinya fungsi
include() akan menyertakan dan mengevaluasi seluruh program yang ada di
file yang disertakan. Jika terdapat error pada program yang disertakan, maka
error akan ditampilkan di layar. Dan jika file yang disertakan ternyata tidak
ditemukan (mungkin karena lokasi yang salah atau memang file tidak ada),
maka program selanjutnya (setelah include) akan tetap dijalankan walaupun
ditampilkan error.
Contoh:
<?php
include "conn/koneksi.php";
echo "Program setelah koneksi";
?>
Kemudian jalankan dan hasilnya akan seperti di bawah ini:

31
Perintah require() pada dasarnya sama dengan perintah include().

Perbedaannya hanya terletak pada saat file yang disertakan tidak
ditemukan, maka perintah-perintah selanjutnya tidak akan dijalankan.
Perhatikan program test.php di atas. Jika perintah include pada baris ke-2
diganti dengan perintah “require” dan program koneksi.php tidak ditemukan,
maka teks “Program setelah koneksi” tidak akan ditampilkan, melainkan
hanya menampilkan error. Berikut ini contoh tampilannya.
- Perbedaan Antara *_once dan Tanpa “once”

Penambahan akhiran _once baik pada include maupun require akan
memastikan bahwa file yang disertakan hanya dieksekusi sekali saja,
walaupun file disertakan beberapa kali. Sebaliknya tanpa akhiran _once
penyertaan file yang sama beberapa kali mungkin akan menyebabkan error.
Contoh:
File foo.php:
<?php
class Foo {
var $bar = 10;
function getBar() {
return $bar;
}
}
?>
File lain.php
<?php
require "foo.php";
require "foo.php";
echo "Program setelah pemanggilan";
?>
Maka hasilnya akan seperti di bawah ini:
Pada saat program lain.php di atas dicoba, maka akan terjadi error akibat
penyertaan file foo.php sebanyak dua kali, sehingga dianggap bahwa
pendefinisian class Foo terjadi dua kali. Mendefinisikan suatu class dengan
nama yang sama lebih dari satu kali akan mengakibatkan error.
32
untuk menghindari error di atas, kita dapat menambahkan akhiran once di

fungsi include maupun require sehingga program hanya akan mengeksekusi
penyertaan file sebanyak sekali. Silahkan ganti fungsi require pada baris 2 dan
3 program lain.php di atas dengan fungsi require_once dan cobalah kembali
program test2.php. Tidak akan terjadi error.
3.12. Tugas
1. Buat form penilaian seperti di bawah ini dengan menambahkan CSS:
Hasil:
2. Buat rata-rata dari nilai PBW dan P.PBW kemudian dari rata-rata tersebut
tentukan keterangannya, dengan kriteria:
a. 0-30=Buruk
b. 31-60=Kurang
c. 61-70=Bagus
d. 71-90=Bagus Sekali
e. 91-100=Sempurna
3. Gunakan method GET!
33
MODUL 4 DATABASE
4.1. Mysql
Adalah salah satu database server yang sangat terkenal. Mysql
menggunakan bahasa sql untuk mengakses databasenya. Selain mudah
Mysql juga salah satu database server yang open source dengan kata lain
kita tidak perlu membayar sejumlah uang apabila akan menggunakannya.
4.2. PHP dan Mysql

Untuk dapat terhubung dan berinteraksi antara database Mysql dengan
program PHP kita, dibutuhkan koneksi antara database dengan program.
Berikut sintaks koneksi PHP dengan database Mysql yang kita buat:
<?php
$url="127.0.0.1";
$user="root";
$password="password";
mysql_connect($url,$user,$password);
mysql_select_db("prak");
?>
- Localhost/127.0.0.1 merupakan alamat dari host database. root adalah
sebagai nama user dan password adalah password dari database.
- Prak adalah nama database yang ingin diakses.
Untuk latihan kita pakai program PHP nilai mahasiswa yang telah kita buat
pada pertemuan sebelumnya.
Kemudian kita membuat tabel yang kita butuhkan:
Nama field Tipe field
Nim Integer primary key
Nama Varchar(155)
Pbw integer
Ppbw integer
Ket Varchar(17)
SQL:
create table nilai (nim int primary key, nama varchar(155), pbw int, ppbw int,
ket varchar(17))
Kemudian kita buat file koneksi.php

<?php
$url="127.0.0.1";
$user="root";
$password="qwerty";
mysql_connect($url,$user,$password);
mysql_select_db("p_pbw");
?>
34
Kemudian kita edit file aksi:

include_once("koneksi.php");
mysql_query("insert into nilai values($nim,'$nama',$pbw,$ppbw,'$ket')");
mysql_query digunakan melaksanakan perintah query sql ke database.
kemudian kita akan melakukan perintah select data dan menampilkan ke
dalam halaman php dengan menggunakan salah satu fungsi di bawah ini:
1. mysql_fetch_array():Array asosiatif dan Array numerik
Fungsi mysql_fetch_array() merupakan salah satu fungsi yang banyak
digunakan dalam proses pengambilan data MySQL. Fungsi ini akan
menangkap data dari hasil perintah query dan membentuknya ke dalam
array asosiatif dan array numerik. Jadi, fungsi mysql_fetch_array()
menawarkan kemudahan dan fleksibilitas dalam mengakses data.
Namun demikian, penggunaan fungsi ini dianggap kurang efektif dari sisi
performa karena terlalu “boros” penyimpanan.
Array hasil mysql_fetch_array:
Contoh:
$sql=mysql_query("select * from nilai");
echo"<br/>Array<br/>";
while ($baris = mysql_fetch_array($sql)) {
print_r($baris['nim']." ".$baris['nama']."<br/>");
}
2. mysql_fetch_assoc():Array asosiatif saja
Fungsi ini menghasilkan array asosiatif yang mana index-nya sesuai
dengan nama kolom yang diseleksi. Mudahnya, tidak tergantung pada
urutan kolom, yang penting index-nya sesuai.
35
Array hasil mysql_fetch_assoc:
Contoh:
echo"Assoc<br/>";
while ($baris = mysql_fetch_assoc($sql)) {
print_r($baris['nim']." ".$baris['nama']."<br/>");
}
3. mysql_fetch_row():Array numerik saja
Seperti assoc tapi row menggunakan numeric untuk nomer indeksnya.
Array hasil mysql_fetch_row:
Contoh:
echo"Row<br/>";
while ($baris = mysql_fetch_row($sql)) {
print_r($baris[0]." ".$baris[1]."<br/>");
}
36
4. mysql_fetch_object():Gaya object-oriented
Fungsi mysql_fetch_object() akan menyajikan hasil perintah query dalam
gaya penulisan object oriented. Sama seperti mysql_fetch_assoc(), fungsi
ini menjadikan nama kolom hasil perintah query menjadi property dari
obyek. Contoh penggunaannya tampak pada program 4 di bawah ini.
Penggunaan fungsi ini sebaiknya dihindari untuk keperluan mendatang
karena fungsi ini akan deprecated pada versi PHP 5.5.0 dan akan
dihilangkan pada versi selanjutnya.
Array hasil mysql_fetch_object:
Contoh:
echo"Object<br/>";
while ($baris = mysql_fetch_object($sql)) {
print_r($baris->nim." ".$baris->nama."<br/>");
}
4.3. Delete data

Untuk hapus data kita rubah menjadi:
mysql_query("delete from nilai where nim=$nim");
4.4. Update data

- Buat halaman view data nilai:
Sintaks:
<table width="350px" align="center">
<tr>
37
<th>NIM</th><th>Mahasiswa</th><th>PBW</th><th>P.PBW</th
><th>Keterangan</th><th>Aksi</th>
<tr/>
<?php
include_once('koneksi.php');
while ($baris = mysql_fetch_assoc($sql)) {
$nim=$baris['nim'];
$nama=$baris['nama'];
$pbw=$baris['pbw'];
$ppbw=$baris['ppbw'];
$ket=$baris['ket'];
?>
<tr>
<td><?php echo $nim;?></td><td><?php echo
$nama;?></td>
<td><?php echo $pbw;?></td><td><?php echo
$ppbw;?></td>
<td><?php echo $ket;?></td><td>
<a href="edit.php?id=<?php echo $nim;?>">Edit</a>
<a href="hapus.php?id=<?php echo $nim;?>">Hapus</a>
</td>
</tr>
<?php }
?>
</table>
- Buat file edit.php:

<form name="form1" action="edit.php" method="POST">
<?php
$id=$_GET['id'];
?>
<input type="hidden" name="nim" value="<?php echo $id;?>">
<table width="350px" align="center">
<tr>
<th colspan='2'>Mahasiswa</th>
<tr/>
<tr>
<td>Nama</td><td>: <input type="text"
name="nama"></td>
</tr>
<tr>
<th colspan='2'>Nilai</th>
<tr/>
<tr>
<td>PBW</td><td>: <input type="text"
name="pbw"></td>
38
</tr>
<tr>
<td>Praktikum PBW</td><td>: <input type="text"
name="ppbw"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="ok"
value="Simpan"> <input type="reset" name="reset"
value="Reset"></td>
</tr>
</table>
</form>
<?php
if($_POST['ok']){
include_once("koneksi.php");
$nama=$_POST['nama'];
$nim=$_POST['nim'];
$pbw=$_POST['pbw'];
$ppbw=$_POST['ppbw'];
$k=mysql_query("update nilai set nama='$nama',pbw=$pbw,
ppbw=$ppbw where nim=$nim");
if($k){
header("location:view.php");
}
}
?>
- Kemudian jalankan file view.
4.5. Tugas
1. Buat program sesuai yang dijelaskan di pertemuan ini!
2. Tambahkan fitur delete mahasiswa!
39
MODUL 5 MANAJEMEN SESSION,

COOKIE, UPLOAD FILE, KONSEP
MODUL
5.1. Session
Session adalah cara yang digunakan untuk menyimpan informasi pada
komputer server untuk digunakan pada beberapa halaman termasuk
halaman itu sendiri. Session menyimpan informasi ke dalam bentuk variabel
super global $_SESSION.Variabel ini disimpan pada komputer server dan
dapat digunakan oleh semua halaman pada website tempat Session dimulai.
Session berbeda dengan cookie yang menyimpan informasi pada komputer
client (pengguna). Session bisa untuk mengambil informasi siapa yang
menjalankan aplikasi, dan lain sebagainya.
Data yang disimpan pada session bersifat sementara dan berlaku pada
jangka waktu tertentu jika diset. Session akan hilang jika waktu session
berakhir, session dimusnahkan dan atau saat server direstart. Jika ingin
menyimpan variabel yang sifatnya permanen sebaiknya gunakan
penyimpanan dengan database.
Untuk memulai session digunakan fungsi session_start(). Penulisan fungsi
session_start() harus berada paling atas kode PHP aktif, dalam hal ini
komentar tidak dihitung.
Contoh:
<?php
session_start();
?>
Untuk menyimpan informasi pada session digunakan variabel super global

$_SESSION dengan menyertakan atribut nama session dan isi value-nya.
Contoh penggunaan fungsi ini adalah untuk menyimpan informasi pengguna
jika berhasil login.
$_SESSION["nama_session"]=value;
Contoh:
<?php
session_start();
$_SESSION["user"] = "Ahmad";
$_SESSION["warna"] = "merah";
$_SESSION["hewan"] = "kucing";
?>
40
Untuk mengambil informasi dari session, cukup dengan memanggil variabel

$_SESSION beserta atributnya.
Contoh:
<?php session_start(); ?>
<html>
<body>
<?php
// Menampilkan informasi yang disimpan pada Session

echo "Nama saya " . $_SESSION["user"] . ".<br>";
echo "Warna baju saya " . $_SESSION["warna"] . ".<br>";
echo "Hewan peliharaan saya " . $_SESSION["hewan"] . ".";
?>
</body>
</html>
Untuk mengubah informasi dari variabel Session cukup dengan mengisinya

dengan data baru seperti saat menulis pertama kali.
Contoh:
<?php
// Memulai session
session_start();
// mengubah informasi pada session

$_SESSION["warna"] = "hijau";
$_SESSION["hewan"] = "kelinci";
?>
Untuk mengakhiri Session digunakan fungsi session_unset() dan untuk

memusnahkan Session digunakan fungsi session_destroy(). Fungsi
session_unset() akan membuang semua variabel Session. Biasanya fungsi ini
dipakai saat pengguna melakukan logout terhadap sebuah aplikasi PHP.
Contoh:
<?php session_start(); ?>
<html>
<body>
<?php
// membuang semua variabel session
session_unset();
// memusnahkan session
session_destroy();
?>
</body>
</html>
41
5.2. Cookies
Dengan PHP kita bisa membuat, menghapus, menyimpan dan mengambil
serta mengubah data pada Cookies. Cookies digunakan untuk menyimpan
informasi yang dibutuhkan sebuah website dan ditaruh pada komputer client.
Singkatnya Cookies ini mirip dengan Session namun tidak disimpan pada
server melainkan pada komputer client.
Cookies adalah informasi yang berupa file kecil yang ditanam pada
komputer client. Cookies biasanya digunakan oleh sebuah website untuk
mengidentifikasi data pengguna. Data yang disimpan pada Cookies dikirim
bersamaan dengan request yang dilakukan oleh browser terhadap suatu
halaman website.
Karena tersimpan pada client makan data pada Cookies harus bersifat
sekunder dan publik akses, tidak boleh berupa data primer dan rahasia
seperti nama user dan password. Hal ini karena selain tidak aman jika dilihat
oleh client juga Cookies bisa dinonaktifkan oleh pengguna, jadi bisa
mengganggu proses kerja website jika data pada Cookies bersifat primer.
Contoh pemakaian Cookies yang paling sering kita temui misalnya pada
website toko online dengan sistem cart (keranjang belanja). Saat pengguna
memilih-milih barang dan memasukknanya kedalam keranjang belanja maka
data ini akan disimpan pada cookies. Dengan demikian server tidak
terbebani jika ada banya user yang sedang berbelanja online.
Untuk membuat Cookies digunakan fungsi setcookie(). Saat dijalankan, fungsi
setcookie() mengirim HTTP cookie ke komputer client. Cookie ini berupa
variabel yang di kirim oleh server ke browser. Cookie biasanya berupa file text
kecil yang ditanam pada komputer pengguna.
Cara penulisan:
setcookie(name, value, expire, path, domain, secure);
Keterangan Parameter:
 name, wajib diisi, merupakan nama dari cookie
 value, wajib diisi, merupakan nilai dari cookie
 expire, opsional, merupakan batas waktu expired cookie
 path, opsional, merupakan path server sebuah cookie
 domain, opsional, merupakan nama domain sebuah cookie
 secure, opsional, merupakan tanda kalau cookie harus dikirim melalui
protokol HTTPS
Untuk mengambil data dari Cookie digunakan variabel super global

$_COOKIE dengan atribut nama Cookie.
Contoh:
<?php
if(!isset($_COOKIE["cart"])) {
echo "Cookie tidak ditemukan!";
42
} else {
echo "Nilai untuk Cookie dengan nama cart = ".
$_COOKIE["cart"];
}
?>
Untuk mengubah data dari Cookie bisa dilakukan dengan memakai cara
yang sama saat membuat Cookie, yaitu menggunakan fungsi setcookie().
setcookie("cart", "3" , time() + (86400 * 30), "/");
Sebetulnya Cookie akan otomatis terhapus setelah waktu expired tercapai.

Namun untuk menghapus cookie sewaktu-waktu bisa dilakukan dengan cara
merubah isi di cookies menjadi NULL.
Contoh:
setcookie("cart", "" , time() + (86400 * 30), "/");
5.3. Upload file

Halaman upload:
<form action="upload3.php" method="POST" name="form1"
enctype="multipart/form-data">
<input type="file" name="file"><br/>
<input type="submit" name="ok" value="Upload">
</form>
Aksi upload:
<?php
if($_FILES['file']['error']>0){
echo "Error: ".$_FILES['file']['error']."<br/>";
}else{
echo "Upload: ".$_FILES['file']['name']."<br/>";
echo "Type: ".$_FILES['file']['type']."<br/>";
if(file_exists("file/".$_FILES['file']['name'])){
echo $_FILES['file']['name']." sudah ada.";
}else{
move_uploaded_file($_FILES['file']['tmp_name'],
"file/".$_FILES['file']['name']);
}
}
?>
5.4. Modul
Modul sebenarnya bukan suatu fungsi atau kode special dalam bahasa PHP,
namun modul ini lebih mengarah ke teknik memprogram, yaitu teknik
menampilkan suatu halaman yang akan diincludekan berdasarkan suatu
43
parameter variable URL yang biasanya diterapkan dalam pembuatan menu

pada suatu halaman.
Contoh:
1. Buat folder modul di htdocs
2. Buat file style.css yang isinya sama seperti file css pada tugas modul
pertama dan index.php yang isinya sama dengan file untuk tampilan html
pada tugas modul pertama sehingga tampilan menjadi seperti ini:
3. Rubah a href untuk list/menu kota menjadi seperti di bawah ini:

<li><a href="index.php?hal=gresik">Gresik</a></li>
<li><a href="index.php?hal=london">London</a></li>
<li><a href="index.php?hal=paris">Paris</a></li>
<li><a href="index.php?hal=tokyo">Tokyo</a></li>
4. Hapus isi di bagian content menjadi dan ganti menjadi seperti ini:
<?php include("modul.php");?>
5. Buat file modul.php:
<?php
error_reporting(0);
$hal=$_GET['hal'];
switch($hal){
case "gresik": include('gresik.php');
break;
case "london": include('london.php');
break;
case "paris": include('paris.php');
break;
case "tokyo": include('tokyo.php');
break;
default: include("gresik.php");
break;
44
}
?>
5.5. Tugas
1. Buatlah sebuah halaman login untuk bisa mengakses halaman modul di
atas.
2. Setelah login berhasil simpan data login dengan session dan tampilkan di
div footer.
45
Modul 6 JQUERY
6.1. JQuery
jQuery adalah Javascript Library atau kumpulan kode/fungsi Javascript
siap pakai, sehingga mempermudah kita untuk membuat kode
Javascript. Atau dalam kesimpulannya jQuery menyederhanakan kode
Javascript. Hal ini sesuai dengan slogannya “Write less, do more”.
6.2. Kemampuan JQuery

Berikut beberapa kemampuan yang dimiliki yang dapat membuat kita
berdecak kagum:
- Mempermudah akses dan manipulasi elemen tertentu pada dokumen.
- Mempermudah modifikasi/perubahan tampilan halaman web.
- Mempersingkat Ajax (Asynchronous Javacsript and XML).
- Memiliki API (Application Programming Interface).
- Mampu merespon interaksi antara user dengan halaman web dengan lebih
cepat.
- Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.
6.3. cara kerja jQuery

1. jQuery akan memastikan bahwa semua elemen atau elemen yang
diinginkan sudah ditampilkan semua di halaman web, fungsi yang
digunakan adalah:
$(document).ready(function(){
// baris kode jQuery akan dijalankan
// apabila semua elemen sudah ditampilkan semua
});
2. Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih
elemen berdasarkan class atau id yang telah didefinisikan. Dalam hal ini,
jQuery menggunakan fungsi Selector.
$("#foto")
$(".sembunyi")
$(".tampil")
3. Setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi
terhadap elemen yang sudah dipilih. Misalnya tombol yang akan
menyembunyikan dan memunculkan kembali gambar.
$(".sembunyi").click(function(){
$("#foto").hide("slow");
)};
Contoh:
- Menampilkan alert ketika document selesai dimuat
1. Download file jquery terbaru, kemudian letakkan file tersebut ke dalam
folder baru di htdocs untuk latihan jquery.
46
2. Buat file baru.php:

<html>
<head>
<script type="text/javascript" src="../jquery-
1.11.1.js"></script>
<script type="text/javascript">
$("document").ready(function(){
alert ("Selamat datang");
});
</script>
</head>
<body>
3. Jalankan dan hasilnya seperti di bawah ini:
- Menampilkan alert ketika button diklik

<html>
<head>
$("#klik").click(function(){
alert("hello jquery!");
});
});
</script>
</head>
<body>
<input type="submit" id="klik" value="Klik Saya"/>
</body>
</html>
, diklik=>
- Teks ganti warna ketika button diklik

<html>
<head>
47

$("#teks").css("color","cyan");
$("#teks").css("font-family","Century Gothic");
});
});
</script>
</head>
<body>
<input type="submit" id="klik" value="Ganti Warna"/>
<h1 id="teks">Heading Siap Ganti Warna</h1>
</body>
</html>
Hasil:
Setelah Diklik:
- Mengganti style css

<html>
<head>
$("#teks").addClass("ganti1");
});
});
</script>
<style>
.ganti1{
color:white;
background-color:green;
font-family:Century Gothic;
}
</style>
</head>
48
<body>
<input type="submit" id="klik" value="Ganti Warna"/>
</body>
</html>
Hasil:
Setelah diklik:
6.4. Events
1. Event Click, contohnya seperti contoh di atas.
2. Event dblclick, dijalankan setelah terjadi klik 2x pada suatu elemen
yang telah ditentukan. Contoh:
Ganti perintah click pada contoh sebelumnya menjadi dblclick
3. Event mouseover
dijalankan ketika kursor mouse melewati elemen yang ditentukan
4. Event mouseleave
Event mouseleave akan dijalankan ketika kursor mouse meninggalkan
elemen yang ditentukan
Contoh untuk nomer 3 dan 4:
<html>
<head>
$("#teks").mouseover(function(){
$(this).removeClass("ganti2").addClass("ganti1");
});
$("#teks").mouseleave(function(){
$(this).removeClass("ganti1").addClass("ganti2");
});
});
</script>
<style>
.ganti1{
color:white;
background-color:green;
49
}
.ganti2{
color:black;
background-color:white;
}
</style>
</head>
<body>
</body>
</html>
Hasil:
Over:
Leave:
6.5. JQuery UI
jQuery UI (user interface merupakan plugin yang paling populer di
kalangan programmer jQuery. Karena sampai-sampai dijadikan satu
manual dengan manual jQuery di website resminya. jQuery UI dibuat oelh
Paul Bakaus yang bekerja sama dengan stefan Petre untuk menciptakan
efek-efek yang canggih dan komponen librari pelengkap jQuery,
diantaranya :
- Accordion
- Datepicker
- Tabs
- Dialog
- Progressbar
- Slider
- Effect/animasi
- Drag and Drop
- Dan lain-lain
6.6. Instalasi JQuery UI

Download jQuery UI di http://jquery.com/ maka akan tampil halaman
downloadnya, klik aja langsung link (stable), maka file jQuery UI rar akan
tersimpan di komputer Anda. Kemudian ekstrak file tersebut dan buka
index.html. Dan selamat mencoba…
50
DAFTAR PUSTAKA
Widodo, Gianto. 2012. Modul Praktikum Pemrograman Website. Malang:

Universitas Islam Negeri Maulana Malik Ibrahim Malang
Zainudin, Ahmad. 2014. Praktikum Pemrograman Internet HTML5, PHP5 dan CSS3.
Surabaya: Politeknik Elektronika Negeri Surabaya
Modul Praktikum Pemrograman Web Mengunakan PHP. Yogyakarta: Sekolah
Tinggi Manajemen Informatika Dan Komputer Akakom
https://tienythea.wordpress.com/
https://muningmini.wordpress.com/
http://achmatim.net/
http://www.nulis-ilmu.com/

Modul P PBW

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul P PBW

Diunggah oleh

Hak Cipta:

Format Tersedia

1

Modul 1 HTML dan CSS

Struktur penulisan HTML:

1.1. Tag HTML dasar

1.2. Tag performatan teks dasar

<del> Mendefinisikan teks yang hendak dihapus

1.3. Tag untuk list

1.4. Tag untuk tabel

1.5. Tag Form

1.6. Tag div

1.7. Tag link

1.8. Contoh penggunaan tag-tag HTML

Horisontal dan Komentar Tersembunyi

Pemformatan teks dan Preformat

Unordered List, ordered list, definition list, daftar menu

2.1. Format penulisan CSS

2.2. Pengelompokkan selector

2.3. Pengaturan banyak property

2.4. Komentar pada CSS

2.5. Penempatan kode CSS

2.6. Penamaan selector CSS

- Pemanggilan selector menggunakan class untuk “.”, dan id untuk “#”.

2. Huruf: Century Gothic

2.2. Penulisan Java Script

b. Javascript ditulis pada file terpisah

Diantara tag <SCRIPT………> dan <SCRIPT> tidak diperlukan lagi kode

2.3. Program Pertama Javascript

• Tidak boleh menggunakan spasi

2.5. Tipe Data

b. Operator Pemberian Nilai

c. Operator Manipulasi Bit

Contoh Program JavaScript

2.7. Memasukkan Data

Bilangan Pertama :<input type="text" size="11"

2.8. Objek Untuk memasukkan Data

Alamat Anda di :<input type="text" size="25" name="oalamat">

Contoh Program JavaScript

2.11. Kejadian (Event)

2.12. Penanganan Kejadian (Event)

<INPUT TYPE="button" VALUE="Pink" onClick="warna('pink')">

PHP sebagai bahasa pemrograman web memiliki beberapa kelebihan,

3.2. Struktur penulisan PHP

3.4. Tipe data

3.5. Penggunaan Form

Kemudian file aksi diberi nama aksi.php

3.6. Pembahasan Form

3.7. Struktur control

3.9. Fungsi (Function) dalam PHP

3.10. dengan argument atau parameter

3.11. Fungsi include(), require(), include_once() dan require_once()

- Perbedaan Fungsi include() dan require()

Kemudian jalankan dan hasilnya akan seperti di bawah ini:

Perintah require() pada dasarnya sama dengan perintah include().

- Perbedaan Antara *_once dan Tanpa “once”

Maka hasilnya akan seperti di bawah ini:

untuk menghindari error di atas, kita dapat menambahkan akhiran once di

4.2. PHP dan Mysql

Kemudian kita buat file koneksi.php

Kemudian kita edit file aksi:

Array hasil mysql_fetch_assoc:

4.3. Delete data

4.4. Update data

- Buat file edit.php:

MODUL 5 MANAJEMEN SESSION,