Modul Praktikum: Pemrograman Internet

1
 MODUL
1
(Variabel, Type Data,
dan Array)

1. Pendahuluan
PHP (Hypertext Preprocessor) merupakan bahasa
pemrograman yang digunakan untuk membangun website
dinamis. PHP adalah salah satu bahasa pemrograman yang
dikelompokkan dalam SSP (Server Side Programming) yang
berjalan pada sisi server. Dengan demikian, setiap menjalankan
kode php wajib membutuhkan server.

2. Bahanbahan yang digunakan dalam praktikum

Untuk pelaksanaan praktikum mata kuliah pemrograman web
lanjut, dibuhkan perangkat lunak sebagai berikut:
Teks Editor : Notepad, Notepad++, Adobe
DreamWeaver
Software Paket : XAMPP (Php, Apache, MySQL).
Web Browser : Mozila Firefox, Safari,
Internet Explorer, dll. Sebelum memulai penulisan kode
php, terlebih dahulu anda membuat New
Folder pada direktori C:/XAMPP/htdocs
*) Folder tersebut diberi nama dengan nim anda masing
masing.

3. Variabel
Dalam bahasa pemrograman istilah variabel dapat
didefinisikan sebagai tempat penyimpanan data secara
sementara yang memiliki nilai yang dapat berubahubah. Variabel
dalam bahasa pemrograman akan hilang setelah program
selesai dieksekusi. Setiap bahasa pemrograman menyediakan
variabel untuk menyimpan data secara sementara dan
pemberian nama sebuah variabel memiliki aturan masing
masing. Pada bahasa pemrograman PHP pemberian nama
sebuah variabel diawali dengan tanda $, beberapa aturan
penamaan variabel pada PHP adalah sebagai berikut:
penamaan diawali dengan tanda $
nama variabel terdiri angka, huruf dan underscore
pemberian nama setelah tanda $ tidak diperbolehkan
menggunakan angka

Modul Praktikum: Pemrograman Web Lanjut

2
 bersifat case sensitif (huruf kapital dan nonkapital
dibedakan)
tidak mengandung spasi
type variabel tidak perlu dideklarasi.

Modul Praktikum: Pemrograman Web Lanjut

3
 Contoh Program (simpan dengan nama variabel.php)
<?
$nama='YUSUF';
$Nama='ELI';
$ket='Adalah teman sekelas';
echo $nama "<br>";
echo $Nama "<br>";
echo $ket;
?>

Simpan kode tersebut dengan nama

variabel.php pada directori
C:/XAMPP/htdocs/nimanda
Untuk melihat hasil dari variabel.php dapat
dilakukan dengan cara sebagaia berikut:
Buka salah satu web browser anda
Pada adressbar web browser ketik:
localhost/directorinimanda/variabel.php
Seperti pada gambar berikut:

Gambar 1: Adress bar frefox

Tekan Enter,

4. Type Data
Merupakan jenis atau model data yang akan ditampung oleh
sebuah variabel. type data dalam bahasa PHP tidak
dedefniskan oleh programmer, akan tetapi secara otomatis
akan ditentukan oleh interprete php itu sendiri. Bahasa
pemrograman PHP mendukung jenis type data primitif yang
umum digunakan dalam berbagai macam bahasa
pemrograman lain, antara lain type data primitif tersebut
adalah boolean, integer, float, string, array, object,
resource, dan NULL.
 Contoh Program
<?
$nim ='750405512';
$nama ='Syahrullah';
$prodi ='Sistem Informasi';
$umur =22;
$nilai =98.25;
echo "Nim :".$nim."<br>";
echo "Nama :".$nama."<br>";
echo "Prodi :".$prodi."<br>";
print "Umur :".$umur."<br>";
printf "Nilai: %.3f <br>",$nilai;
?>
(Simpan dengan nama typedata.php)

5. Konstanta
Merupakan nilai ketetapan yang tidak dapat dirubah. Untuk
mendeklarasikan sebuah konstanta dapat menggunakan perintah
define(), sebagai contoh:

define("nama_konstantan", nilai);

Contoh Program
<?php
define("phi",3.14) ;
$r = 5;
$luas = phi * $r * $r ;
echo "Luas = $luas" ;
?>

6. Array
Merupakan larik atau variabel berindeks, atau dapat
dikatakan data yang dikelompokkan yang memiliki urutan.
contoh:
hewan : kambing,
kerbau, sapi, anoa unggas
: itik, bebek, ayam, merpati

Bentuk Umum
$variabel = array(nama array 1,nama array 2,dst);

Contoh penulisan pada bahasa PHP:

$unggas = array(ayam,bebek,itik,merpati);
 atau boleh juga memberikan nomor urut seperti
berikut:
Untuk memberikan nomor urut data dumulai dari angka satu
adalah sebagai berikut :

$variabel=array(nama1=>urut1,nama2=>2,dst=>urutn);

sebagai contoh :

$unggas=array(Ayam=>1,bebek=>2,itik=>3);

Contoh
Program
<?php
$unggas=array(ayam,bebek,itik,merpati);
echo Array ke-3 adalah.$unggas[2];
?>
 MODUL
2
(Kontrol Program menggunakan Kondisional dan
Perulangan)

Pendahuluan
Dalam membangun sebuah aplikasi baik berbasis web
maupun desktop, sering ditemui perintah statemen kondisional
dan perulangan. Perintah kondisional berfungsi untuk
melakukan tes atau memeriksa kondisi serta melakukan evaluasi
terhadap nilai suatu data/variabel untuk menentukan keputusan.
Sedangkan perulangan adalah suatu bentuk perintah yang
berfungsi untuk melakukan perulangan hingga batas nilai N
yang telah ditentukan.

A. Kondisional
1. IF
Kondisional IF pada umumnya memiliki 2 jenis yaitu if
1 pernyataan dan banyak pernyataan IF ... ELSE
IF satu Pernyataan

bentuk umum
IF (syarat){
pernyataan jika syarat terpenuhi;
}

contoh program
<?
$nilai=70;
if ($nilai>=80){
echo "Anda Lulus";
}
?>

IF banyak
pernyataan
bentuk umum
IF (syarat1){
pernyataan jika syarat 1 terpenuhi;
}elseif(syrat2){
pernyataan jika syarat 2 terpenuhi;
}elseif(syarat..n){
pernyataan jika syarat n terpenuhi;
}else{
jika semua syarat tidak dipenihi (pilihan
alternatif);
}
 contoh program
<?php
$nilai=78;
if ($nilai>=80){
echo "Nilai A";
}
elseif ($nilai>=70){
echo "Nilai B";
}
elseif ($nilai>=60){
echo "Nilai C";
}
elseif ($nilai>=50){
echo "Nilai D";
}
else{
echo "Nilai E";
}
?>

2. SWITCH...CASE
Peritah SWITCH..CASE sama dengan perintah IF..ELSE,
namun terdapat perbedaan antara keduanya antara lain
Switch dinyatakan dalam bentuk bilangan bulat atau
karakter/string,
Sedangkan IF dinyatakan dalam bentuk operasi
perbandingan atara lain
== Sama dengan
=== Identik
!= atau <> Tidak sama dengan
!== Tidak identik
< Kurang dari
> Lebih dari
<= Kurang dari sama dengan
>= Lebih dari sama dengan
And
DAN Or
ATAU
Xor Salah satu benar
! NOT
Tidak ada konstanta (nilai tetap) yang sama dalam
sebuah SWITCH
 Bentuk Umum SWICTH..CASE

SWITCH (variabel){
case 1:
pernyataan 1;
break;
case 2:
pernyataan 2;
break;
case 3:
pernyataan 2;
break;
Default:
pernyataan default;
break;
}

Contoh Progran

<?php
$angka=2;
SWITCH ($angka){
case 0:
echo 'ini dalah Angka Nol';
break;
case 1:
echo 'ini dalah Angka Satu';
break;
case 2:
echo 'ini dalah Angka Dua';
break;
}
?>

Tuga
s:
Buatlah contoh program untuk menentukan nilai,
A,B,C,D,E menggunakan
SWITCH
CASE

B. Perulangan (Looping)
Merupakan suatu bentuk perintah yang digunakan untuk
melakukan proses perulangan (iterasi) terhadap suatu nilai
variabel dengan batas nilai awal dan akhir telah
ditentukan. terdapat jenis prulangan (looping) yang
umum digunakan dalam bahasa pemrograman PHP
antara lain adalah sebagai berikut:
1. FOR
Merupakan bentuk perulangan yang jumlah iterasinya telah
ditentukan diawal perulagan.

Bentuk Umum

for ($nilai_awal; $Batas_akhir; $langkah){

pernyataan;
}

Contoh Program

<?php
for ($i=1;$<=5;$i++)
{
echo "$i";
}
?>

2. WHILE
Merupakan bentuk perulangan yang tidak ditentukan di
awal perulangan, dengan kata lain, while akan memeriksa
nilai variabel terlebih dahulu, dan jika kondisi nilai variabel
tersebut masih masih terpenuhi, maka perulangan akan
dilakukan secara terus menerus hingga nilai variabel bernilai
salah.

Bentuk
Umum

WHILE (kondisi){
perintah/pernyataan jika kondisi benar dan terpenuhi.
}

Contoh Program

<?php
$nilai=0;
while($nilai<=5){
echo $nilai;
$nilai++;
}
?>
3. DO..WHILE
Merupakan bentuk perulangan yang modifikasi dari
perulangan while, hanya yang membedakan adalah do..while
akan melaksanakan (do) terlebih dahulu dan memerikasa
nilai variabel diakhir melalui (while). jika nilai do memenuhi
syarat maka while akan dilaksanakan, dan berhentika
jika nilai do tidak memenuhi.

Bentuk
Umum:
DO{
perintah yang akan diulang;
}WHILE (kondisi);

Contoh Progam
<?php
$i=0;
Do{
$i++;
echo $i;
}while($i<5)
?>
 MODUL
4
TAG HTML Pada
PHP

1. TEKS LAYOUT
Dalam bahasa pemrograman PHP juga dapat disisipkan
script bahasa lain, seperti javascrip, css style dan tag html,
Layout teks merupakan suatu teknik dalam bahasa pemrograman
web yang digunakan untuk merubah format teks dari format
standar, berikut adalah contoh beberapa format teks layout HTML
dalam php:
A. Tag Paragraf <p> ... </p>
Tag paragraf merupakan jenis tag yang digunakan
untuk mengatur posisi perataan tulisan/paragraf pada
halaman web. Terdapat 4 (empat) jenis perataan tulisan
paragraf terdiri dari: 1). Perataan Kiri (left); 2). Perataan Kanan
(Right); 3). Perataan Tengah (Center); dan, 4). Perataan
sejajar antara kiri dan kanan (Justify).
Bentuk Umum:
<p align="jenis
perataan">
. . . isi paragraf . . .
</p>

Contoh Penerapan
<?php
Echo "<p align=left>
Kekhawatiran itu akhirnya benar-benar terjadi. Real
Madrid resmi mengumumkan hasil pemeriksaan medis bintang
mereka Cristiano Ronaldo. Dan, sang bintang
dipastikan mengalami cedera pada paha bagian kanannya.
</p><br>

<p align=center>
Cristiano Ronaldo baru saja melakukan tes di Rumah Sakit
Universitas Sanitas La Morajela, Ronaldo didiagnonis
mengalami cedera otot pada paha kanannya, pernyataan
Madrid di laman resmi klub
</p><br>

<p align=right>
Waktu pemulihannya masih dalam tahap penilaian tim
medis," sambungnya.
</p><br>

<p align=justify>
Sebelumnya, Ronaldo terlihat mendapatkan masalah pada
paha kanannya pada laga kontra Villarreal. Eks
pemain Manchester United tersebut terlihat
meninggalkan lapangan sebelum pertandingan usai. Saat
keluar dari lapangan, Ronaldo terlihat kesakitan
sambil memegang paha kanannya
 </p>";
?>

B. Format Teks (Bold, Italic, Underline, Strike,

Super Script, dan Sub
Script)
Tag Bold <b>Untuk tulisan Tebal
Bentuk Umum:
<b
>
... Tulisan ...

</b>

Contoh Program:
<?php
echo "ini adalah tulisan <b>tebal</b>";
?>

Tag Italic <i> Untuk tulisan miring

Bentuk Umum:
<i>
... tulisan ...

</i>

Contoh Program:
<?php
echo "Ini adalah tulisan <i>MIRING</i>";
?>

Tag Underline <u> Untuk tulisan digaris

bawah
Bentuk Umum:
<u>
... tulisan ...

</u>

Contoh Program:
<?php
echo"ini adalah tulisan yang <u>digaris
bawah</u>";
?>
 Tag Strike <strike> Untuk tulisan coret
Bentuk Umum:
<strike>
... tulisan ...
</strike>

Contoh Program:
<?php
echo "ini adalah tulisan <strike> Coret
Strike</strike>";
?>

Tag Super Script <sup> Untuk Tulisan Super

Bentuk Umum:
^{... tulisan ...}

Contoh Program:
<?php
Echo " 2X² +4X³";
?>

Tag Sub Script <sub> Untuk tulisan sub

Bentuk Umum:
_{... tulisan ...}

Contoh Program:
<?php
echo "Lambang Kimia dari Oksigen adalah
O₂";
?>

C. Format Teks Lanjutan (Font Face, size, dan

Color)
Tag <font> yang berfungsi sebagai pengatur jenis
huruf, tag <font> memiliki atribut seperti face (jenis
huruf), size (ukuran huruf), dan color (warna huruf).

Modul Praktikum: Pemrograman Web Lanjut

13
 Bentuk Umum:
<font face="jenis huruf" size="ukuran"
color="warna">
.. Tuilisan ...
</font>

Contoh Program:
<?php
Echo"<font face='arial' size='+1'
color='#0000FF'> Nama Saya Amel
</font><br>

<font face='tahoma' size='+3'

color='#FF0000'> Nama Saya Aulia
</font><br>

<font face='times new roman' size='+4'

color='#FFFF00'> Nama Saya Ima
</font><br>
<font face='verdana' size='+6'
color='#00FF00'> Nama Saya Ani
</font>";
?>

D. Tag Heading
Merupakan tag yang disediakan untuk membuat
tulisan dengan 6 (enam) tingkat ukuran yaitu <h1> ...
</h1> sampai <h6> ... </h6>. Pada penerapannya
tag heading digunakan untuk membuat judul, sub judul,
atau teks dengan ukuran yang berbeda dengan yang lain
pada tulisan.
Bentuk umum:
<h size>
... Tulisan ...
</h size>

Contoh Program:
<?php
echo "<h1>Tulisan Heading 1</h1>
<h2>Tulisan Heading 2</h2>
<h3>Tulisan Heading 3</h3>
<h4>Tulisan Heading 4</h4>
 <h5>Tulisan Heading 5</h5>
<h6>Tulisan Heading 6</h6>";
?>
2. BULLET DAN NUMBER
Bullet dan Number merupakan tag yang digunakan untuk
membuat sebuah urutan menggunakan simbol (Bullet)
dan penguratan secara berurutan menggunakan nomor 1 ...
9, abjad A ... Z, a ... z, bilangan romawi (I, II,III, dst).
A. Bullet UL
Secara standard, pengurutan menggunakan bullet
menyediakan dalam
disc, square, dan cirle. dengan bentuk umum sebagai
berikut:
<ul type="jenis">
<li>List 1</li>
<li>list 2</li>
<li>list seterusnya</li>
</ul>

Contoh Program
<?php
Echo"Top Score La Liga Spanyol 2015 2016:
<ul type=disc>
<li>Luis Suarez, 37 Gol</li>
<li>Cristiano Ronaldo, 33 Gol</li>
<li>Lionel Messi, 26 Gol </li>
<li>Karim Benzema, 24 Gol</li>
<li> Neymar Jr, 24 Gol</li>
</ul>";
?>

B.
Number OL
Bentuk
Umum:
<ol type="jenis">
<li>List 1</li>
<li>list 2</li>
<li>list seterusnya</li>
</ol>

Contoh Program:
<?php
 Echo"Top Score La Liga Spanyol 2015 2016:
<ul type=disc>
<li>Luis Suarez, 37 Gol</li>
<li>Cristiano Ronaldo, 33 Gol</li>
<li>Lionel Messi, 26 Gol </li>
<li>Karim Benzema, 24 Gol</li>
<li> Neymar Jr, 24 Gol</li>

</ul>";
?
>

3. TABEL
Tabel merupakan gabungan antara baris (horizontal) dan
kolom (Vertical) yang tersusun secara teratur dan rapi. Tabel
memiliki fungsi dan kegunaan tersendiri dalam menyusun baris
dan kolom secara teratur dan rapi dimana antara baris dan kolom
memiliki area dan batasan tertentu dalam menempatkan isi.
Pada halaman website sering dijumpai penggunaan tabel untuk
menampilkan informasi. Pada PHP dapat menyisipkan tag
<table> HTML beserta komponennya untuk menyusun baris dan
kolom, mengatur jarak antar baris dan kolom, mengatur
margin, menyatukan baris dan kolom, dan lain sebagainya.
Adapun bentuk umum dari tag <table> adalah sebagai berikut:
Bentuk Umum:
<tabl
e>
<tr><th>... Tabel Head ...</th></tr>
<tr>
<td>... Tabel Data ...</td>
</tr>
</table
>
Ke
t:

1. <th> (Table Header): berfungsi untuk

mendefnisikan/membuat tabel header
2. <tr> (Table Row): berfungsi untuk membuat baris baru
3. <td> (Table Data): berdungsi untuk membuat kolom
4.
Contoh Program:
<?php
echo"<table border=1 align='center'>
<tr>
<th> No. </th>
<th> Nim </th>
<th> Nama </th>

</tr>
<tr>
<td> 1. </td>
<td> 001 </td>
<td> Nur Amalia Syakira </td>

</tr>
<tr>
<td> 2. </td>
<td> 002 </td>
<td> Putri Nur Aulia </td>

</tr>";
?
>

A. Menyatukan Kolom
Menyatukan kolom pada tabel menggunakan colspan
<?php
Echo"table border=1 align=center width=400>
<tr><th colspan=3>Daftar Mahasiswa</th></tr>
<th width=46>No.</th>
<th width=120>Nim</th>
<th width=212>Nama</th>
<tr>
<td>1.</td>
<td>001</td>
<td> Nur Amalia Syakira</td>
</tr>
<tr>
<td>2.</td>
<td>002</td>
<td> Putri Nur Aulia</td>
</tr>
</table>";
?>

B. Menyatukan Baris
 Menyatukan bari pada tabel menggunakan rowspan
<?php
Echo"<table border=1 align=center width=400>
<tr>
<th colspan=3>Daftar Mahasiswa</th>
</tr>
<tr>
<th width=46 rowspan=2>No.</th>
<th width=120 colspan=2>Mahasiswa</th>
</tr>
<tr>
<td>NIM</td>
<td>NAMA LENGKAP</td>
</tr>
<tr>
<td>1.</td>
<td>001</td>
<td> Nur Amalia Syakira</td>
</tr>
<tr>
<td>2.</td>
<td>002</td>
<td> Putri Nur Aulia</td>
</tr>
</table>";
?>

4. FORM
Form atau yang lebih dikenal dengan Formulir, sering kita
jumpai dalam kehidupan seharihari, ketika melengkapi isian
kertas yang disediakan, maka pada saat itulah kita berinteraksi
dengan form isian. Form dapat didefnisikan sebagai media
yang digunakan sebagai saran input, form dapat menerima
data melalui method (GET) dan mengirim data melalui method
POST pada saat action submit (kirim) ke webserver
berdasarkan nilai/nama variable untuk diproses, Tag HTML Form
memiliki atribut yang mendukung fungsi dan kegunaan sebuah
form, antara lain adalah:
1. Method : Merupakan metode untuk mengirim data
melalui POST atau GET
2. Action : Adalah aksi yang akan dilakukan form untuk
dapat mengirim
(submit) data untuk diproses melalui
webserver
3. Name : Merupakan pemberian nama identitas dari
form
4. Enctype : Merupakan jenis model data yang akan
dikirim berupa teks/plain,
beserta fle/berkas lain, maupun aplikasi.
Bentuk Umum:
<form name='form1' method='post' action=' '>
.....
</form>

Elemen Form
Dalam membangun sebuah form baik untuk menerima dan
atau mengirim data ke webserver, form memiliki Elemen
elemen pendukung antara lain yang umum digunakan adalah
sebagai berikut:
1. Elemen Input
merupakan elemen form yang berfungsi untuk membuat
text, submit, reset, password, hidden, file, radio, button, dan
checkbox. Elemen input dapat menerapkan
atribut sesuai dengan kebutuhan pada elemen itu sendiri
seperti name, id, class, value, size.

Contoh Program:
<?php
Echo"<form name='form1' method='post'
action= ' '> Input Type Teks:
<input type='text' name='teks'>
<br><
br> Type
File:
<input type='fle' name='fle'>
<br><br
> Type
Password :
<input type='password' name='pass'>
<br><
br> Type
Radio:
<input type='radio' name='radio1'>Pilihan 1
<input type='radio' name='radio1'>Pilihan 2
<br><br
> Type
CheckBox :
<input type='checkbox' name='cek1'
value='pil1'> Cek 1
<input type='checkbox' name='cek1'
value='Pil2'> Cek 2
<br><br>

<input type='submit' value='Kirm'>

<input type='reset' value='Batal'>
</form>";
?>

2. Elemen Select
Merupakan elemen form yang berfungsi untuk membuat
combo box. Elemen input dapat menerapkan atribut sesuai
dengan kebutuhan pada elemen itu sendiri seperti name, id,
class, value.

Contoh Program:
<?php
Modul Praktikum: Pemrograman Web Lanjut
19
Echo"<form name='form1' method='post'
action= ' '> Combo Box Select:
<select name=combo>
<option value=Pilihan 1 selected>Pilihan 1</option>
<option value=Pilihan 2 >Pilihan 2</option>
<option value=Pilihan 3 >Pilihan 3</option>

Modul Praktikum: Pemrograman Web Lanjut

20
 </select>
</form>";
?>

3. Elemen TextArea
Merupakan elemen form yang dapat digunakan sebagai feld
input dengan menampung dalam bentuk paragraf. Atribut yang
dapat digunakan pada <textarea> adalah name, cols, rows.

Contoh Program:
<?php
Echo"<form name='form1'
method='post' action=' '>
Penggunaan Teks Area:<br>
<textarea name='teks' cols='35'
rows='5'></textarea>
</form>";
?>
 MODUL
4
DATABASE DAN TABEL MYSQL PADA
PHPMYADMIN

A. Persiapan
Pastikan Database MYSQL, Web Server Apache telah
dijalankan melalui
XAMPP Control Panel, seperti gambar dibawah ini.

Gambar 2: XAMPP Control

Panel

B. Menciptakan Database Baru

Untuk menciptakan database baru pada phpmyadmin dapat
dilakukan dengan langkahlangkah sebagai berikut:
Buka web browser anda dan masuk ke alamat:
localhost/phpmyadmin
sehingga akan tampil halaman web phpmyadmin sebagai
berikut:

Modul Praktikum: Pemrograman Web Lanjut

21
 Gambar 3: Tampilan halaman
localhost/phpmyadmin

Buatlah database baru dengan nama "dbmahasiswa"

seperti gambar berikut:

Gambar 4: Area untuk menciptakan

database baru

Setelah database dibuat, maka halaman phpmyadmin

akan menuju ke halaman pengelolaan database
dbmahasiswa seperti terlihat pada gambar berikut:
 Gambar 5: Tampilan halaman database
dbmahasiswa.

3. Membuat tabel baru

Setelah database dbmahasiswa sukses dibuat, maka
langkah selanjutnya adalah membuat tabel tbmahasiswa
pada database dbmahasiswa, adapun langkahlangkah untuk
membuat tabel adalah sebagai berikut:
Pada area kanan halaman utama manajemen database
dbmahasiswa terlihat
bagian halaman seperti gambar berikut:

Gambar 6: Area create new tabel

Pada field name diisi dengan nama tabel yaitu

tbmahasiswa dan pada field
Number of fields diisi dengan jumlah kolom yaitu 5, lalu
tekan Go
Sehingga akan muncul gambar berikut:
 Gambar 7: Tampilan halaman pengaturan kolom tabel
tbmahasiswa

Isi feldfeld tersebut seperti terlihat pada gambar berikut:

Gambar 8: filed struktur tabel

mahasiswa

Atur idmhs sebagai primary key dan auto_increment

Tekan tombol Save untuk melengkapi pembuatan tabel
tbmahasiswa

atau dengan perintah sebagai

berikut:

CREATE TABLE tbmahasiswa(

idmhs INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
nim VARCHAR( 10 ) NOT NULL ,
nama VARCHAR( 35 ) NOT NULL ,
prodi VARCHAR( 25 ) NOT NULL ,
jnk ENUM( 'L', 'P' ) NOT NULL
);
Struktur tabel tbmahasiswa akan terlihat seperti gambar
berikut:
 Gambar 9: tampilan struktur tabel mahasiswa

Isilah 5 data pada tabel tersebut

 MODUL
5
CREATE, READ, UPDATE, DELETE (CRUD) PADA
PHP

Sebelum membangun sebuah aplikasi yang dapat

melakukan operasi CRUD, terlebih dahulu memastikan bahwa
MySQL database dan web server Apache dalam posisi telah
dijalankan melalui XAMPP Control Penel seperti pada gambar
berikut:

Gambar 10: Tampilan XAMPP Control Panel

Langkahlangkah untuk membagun operasi CRUD pada

PHP
1. Pastikan sudah directori fle pada
C/XAMPP/htdocs/nimanda
(Sebelumnya telah dibuat)
2. Buatlah script berikut:
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "dbmahasiswa";
// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or
die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak
bisa dibuka");
Modul Praktikum: Pemrograman Web Lanjut
26
 ?>
Simpan dengan nama koneksi.php

Penjelasan Kode:
$Server : adalah varibel yang digunakan untuk
memberikan nama host

Modul Praktikum: Pemrograman Web Lanjut

27
 $username: Adalah variabel yang digunakan untuk
penamaan variabel user yang ada pada user
database MySQL
$password : Adalah variabel yang digunakan untuk
penamaan password yang
dimiliki oleh user database MySQL
$database : Merupakan variabel yang digunakan untuk
penamaan database yang berada pada mysql. (database yg
telah dibuat).

mysql_connect($server,$username,$password) or
die("Koneksi gagal");
Perintah tersebut diatas adalah perintah yang digunakan
untuk mencoba melakukan koneksi ke database mysql.

mysql_select_db($database) or die("Database tidak bisa

dibuka");
Sedang perintah ini digunakan untuk memilih database yang
akan digunakan pada aplikasi yang anda buat.

3. Menguji koneksi database

Untuk menguji koneksi diatas silahkan buka web browser anda
dan ketik:

localhost/nimanda/koe
nksi.php

4. Jika hasil pengujian tersebut menampilkan pesan seperti pada

gambar berikut adalah terjadi kesalahan pada parameter
mysql_connect($server,$username,$password).
Gambar 11: Error Koneksi karena kesalahan penulisan pada
$username="rot"

Untuk mengatasi hal tersebut perhatikan:

$server = "localhost";
$username = "root";
 $password = "";
*)Pemberian password terhadap user juga akan
mempengaruhi terhadap code tersebut.

5. Jika hasil pengujian menampilkan pesan seperti pada

gambar berikut adalah terjadi kesalahan pada paramater
mysql_select_db($database).

Gambar 12: Error koneksi pada kesalahan penulisan nama

database pada $database

Untuk mengatasi hal tersebut maka perhatikan pada:

$database=
"dbmahasiswa";

*) Sesuaikan nama database pada MySQL

dbmahasiswa dan isi
$database="dbmahasiswa"

Modul Praktikum: Pemrograman Web Lanjut

28
A. Membaca data / Operasi READ pada tabel
tbmahasiswa
<?php
include "koneksi.php";
echo"<table border=1 align=center width=600px>";
//mengambil data dari mysql

$datamhs=mysql_query("select * from tbmahasiswa ORDER BY

nama");

echo"<tr><th colspan=5>DAFTAR MAHASISWA </th></tr>

<tr>
<td>No.</td>
<td>NIM</td>
<td>NAMA</td>
<td>PRODI</td>
<td>JNK</td>
<td><a href='frminputmhs.php'>TAMBAH</a></td>
</tr>";
$no=1;
//lakukan looping untuk setiap data mahasiswa
while($m=mysql_fetch_array($datamhs)){
echo"<tr>
<td>$no</td>
<td>$m[nim]</td>
<td>$m[nama]</td>
<td>$m[prodi]</td>
<td>$m[jnk]</td>
<td align=center>
<a href='frmeditmhs.php?id=$m[idmhs]'> EDIT</a> |
<a href='hapusmhs.php?id=$m[idmhs]' onClick=\"
return confirm(Yakin Hapus Data.?')\" > HAPUS</a>
</td>
</tr>";
$no++;
}
echo"</table>";
?>
(simpan dengan nama
"dtmhs.php")

Untuk melihat hasil dari kode tersebut dapat dilakukan

melalui web browser pada
localhost/nimanda/dtmhs.php , dan hasilnya akan
terlihat seperti gambar berikut:
 Gambar 13: Tampilan data mahasiswa melalui web
browser

Penjelasan Kode Program

include ("koneksi.php");
Fungsi tersebut diatas adalah untuk menyertakan fle
koneksi.php

$datamhs=mysql_query("select * from tbmahasiswa ORDER

BY nama");
Kode tersebut digunakan untuk melakukan permintaan data
pada MySQL dan hasilnya akan disimpan pada varibel
$datamhs.

echo"<tr><th colspan=5>DAFTAR MAHASISWA </th></tr>

<tr>
<td>No.</td>
<td>NIM</td>
<td>NAMA</td>
<td>PRODI</td>
<td>JNK</td>
<td><a href='frminputmhs.php'>TAMBAH</a></td>
</tr>";
Kode tersebut berfungsi untuk membuat header tabel yang
akan ditampilkan pada web browser seperti terlihat pada
gambar berikut:

Gambar 14: tampilan data tabel mahasiswa melalui web

browser

$no=1;
while($m=mysql_fetch_array($datamhs)){
echo"<tr>
<td>$no</td>
<td>$m[nim]</td>
<td>$m[nama]</td>
<td>$m[prodi]</td>
<td>$m[jnk]</td>
 <td align=center>
<a href='frmeditmhs.php?id=$m[idmhs]'> EDIT</a> |
<a href='hapusmhs.php?id=$m[idmhs]' onClick=\"
return confirm(Yakin Hapus Data.?')\" > HAPUS</a>
</td>
</tr>";
$no++;
}

$no=1; diguanakan untuk memberikan nilai variabel no

yang diawali dengan nilai 1.

while($m=mysql_fetch_array($datamhs)){

Potongan baris perintah tersebut digunakan untuk

mengambil data dari variabel $datamhs dalam bentuk
array dna hasilnya disimpan pada variabel
$
m

<td>$no</td> :Untuk menampilkan

nomor
<td>$m[nim]</td> :Untuk menampilkan nim dari
variabel $m
<td>$m[nama]</td> :Untuk menampilkan nama dari
variabel $m
<td>$m[prodi]</td> :Untuk menampilkan prodi dari
variabel $m
<td>$m[jnk]</td> :Untuk menampilkan jnk dari
variabel $m
............................................................................................................
...............................................
<a href='frmeditmhs.php?id=$m[idmhs]'> EDIT</a>

Digunakan untuk mengirim data ke form edit

berdasarkan idmhs dan ditampilkan dalam bentuk form
yang nantinya untuk dapat melakukan UPDATE
.............................................................................................................
...............................................
<a href='hapusmhs.php?id=$m[idmhs]' onClick=\"
return confirm(Yakin Hapus Data.?')\" > HAPUS</a>

Digunakan untuk menghapus data

berdasarkan idmhs
............................................................................................................
...............................................
B. Form Tambah Data (CREATE) untuk add data
pada tabel tbmahasiswa
<?php
echo"<table border=0 cellpadding=1 cellspacing=1
align=center width=650px>
<form name=frminputmhs action=simpanmhs.php method=post>
<tr>
<td>NIM</td>
<td><input name=nim type=text size=40></td>
</tr>
<tr>
<td>NAMA</td>
<td><input name=nama type=text size=40></td>
</tr>
<tr>
<td>PROGRAM STUDI</td>
<td> <select name=prodi>
<option value='Pilih'>Pilih</option>
<option value='Sistem Informasi'>
Sistem Informasi
</option>
<option value='Teknik Informatika'>
Teknik Informatika
</option>
</select>
</td>
</tr>
<tr>
<td>JENIS KELAMIN</td>
<td> <select name=jnk>
<option value='Pilih'>Pilih</option>
<option value='L'>Laki</option>
<option value='P'>Perempuan</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<input type=submit value=SIMPAN>
<input type=reset value=BATAL
</td> onclick=self.history.back()>

</tr>

</form>
</table>";
?>
(simpan dengan nama "frminputmhs.php ")
C. Berikut adalah scrip action simpan yang
dibutuhkan oleh form input data
mahasiswa.Tuliskan scrip berikut untuk melakukan
aksi
<?php
include ("koneksi.php");
mysql_query("INSERT INTO tbmahasiswa(nim,nama,prodi,jnk)
VALUES('$_POST[nim]',
'$_POST[nama]',
'$_POST[prodi]',
'$_POST[jnk]')");
header('location:dtmhs.php');
?>
simpan (simpan dengan nama "
simpanmhs.php ")
Penjelasan Kode
Program:

mysql_query("INSERT INTO tbmahasiswa(nim,nama,prodi,jnk)

VALUES('$_POST[nim]',
'$_POST[nama]',
'$_POST[prodi]',
'$_POST[jnk]')");
Fungsi tersebut adalah untuk memerintah digunakan untuk
melakukan insert data ke tabel tbmahasiswa untuk
kolom nim, nama, prodi, jnk yang dilakukan secara
berurutan dari variabel $_POST[nim],
$_POST[nama],
$_POST[prodi], dan $_POST[jnk] yang dikirim pada
form frminputmhs.php
melalui
METHOD="POST".

header('location:dtmhs.php');
Baris perintah tersebut diatas berfungsi sebagai header atau
setelah program melaksanakan proses simpan, maka sistem
akan menuju ke file dtmhs.php

D. Form Edit Data Mahasiswa

<?php
include ("koneksi.php");
$edit=mysql_query("SELECT * FROM mahasiswa where
idmhs='$_GET[id]'");

$r=mysql_fetch_array($edit);
echo"<form method=POST action='editmhs.php'>";
echo"<table border=0 cellpading=1 cellspacing=1
align=center>
<input name=id type=hidden value='$r[idmhs]'>
<tr>
<td colspan=2 align='center'>FORM EDIT MAHASISWA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type=text name=nim value='$r[nim]'
size=40>
</td>
</tr>

<tr>
<td>NAMA</td>
<td><input type=text name=nama value='$r[nama]'
size=40>
</td>
</tr>

<tr>
<td>PROGRAM STUDI</td>
<td> <select name='prodi'>";
if ($r[prodi]=='SISTEM INFORMASI')
{
echo" <option value='SISTEM INFORMASI' selected>
SISTEM INFORMASI
</option>
<option value='TEKNIK INFORMATIKA'>
TEKNIK INFORMATIKA
</option>
<option value='Pilih' >Pilih</option>";
}
elseif($r[prodi]=='TEKNIK INFORMATIKA')
{ echo" <option value='SISTEM INFORMASI' >
SISTEM INFORMASI </option>
<option value='TEKNIK INFORMATIKA' selected >
TEKNIK INFORMATIKA</option>
<option value='Pilih' >Pilih</option>";
}
else
{
echo" <option value='SISTEM INFORMASI'
> SISTEM INFORMASI</option>
<option value='TEKNIK INFORMATIKA'>
TEKNIK INFORMATIKA</option>
<option value='Pilih' selected>Pilih</option>";
}
echo"</select>
 </td>
</tr>

<tr>
<td>JENIS KELAMIN</td>
<td><select name=jnk>";
if($r[jnk]=='L')
{
echo"<option value='L' selected>Laki</option>
<option value='P'>Perempuan</option>";
}
elseif($r[jnk]=='P')
{
echo"<option value='L'>Laki</option>
<option value='P' selected>
Perempuan</option>";
}
echo"</select></td>
</tr>

<tr>
<td>&nbsp;</td>
<td><input type=submit value=Simpan>
<Input type=reset value='Batal'
onclick=self.history.back()>
</td></tr>
</table>";
echo"</form>";
?>
(Simpan dengan nama
"frmeditmhs.php ")

E. Tuliskan script berikut untuk

melakukan aksi edit

<?php
include ("koneksi.php");
mysql_query("UPDATE tbmahasiswa SET
nim ='$_POST[nim]',
nama ='$_POST[nama]',
prodi ='$_POST[prodi]',
jnk ='$_POST[jnk]'
WHERE idmhs='$_POST[id]'");
header('location:dtmhs.php');
?>

(simpan dengan nama "editmhs.php")

F. Hapus Mahasiswa
script berikut digunakan untuk melakukan aksi hapus data
mahasiswa
<?php
include ("koneksi.php");
mysql_query("DELETE FROM mahasiswa where
nim='$_GET[id]'");
header('location:dtmhs.php');
?>
(simpan dengan nama "hapusmhs.php ")
 MODUL
6
Penerapan Session Pada
Form Login

1. Pendahuluan
Form login merupakan form yang berfungsi untuk membatasi
akses pengguna terhadap aplikasi yang dibuat, tujuannya adalah
untuk membatasi akses pengguna yang tidak berkepentingan.

2. Persiapan Software
Buatlah tabel user pada database dbmahasiswa dengan
struktur sebagai berikut:

Gambar 15. Struktur

tabel user atau dengan perintah sebagai

berikut:

CREATE TABLE users (

iduser INT(5) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
nmuser VARCHAR(15) NOT NULL ,
password VARCHAR(32) NOT NULL
);

isilah data pada tabel user tersebut sepeti gambar berikut:

 Gambar 16: insert data user pada

tabel user atau dengan menggunakan perintah

SQL sebagai berikut:

INSERT INTO users (nmuser, password)

VALUES (nuramalia,
MD5('wirosableng212')), (nuraulia,
MD5('pendekarnagageni212'));

*) MD5 merupakan salah satu fungsi SQL untuk melakukan

engkripsi data sebanyak
32 karakter.

3. Langkahlangkah
Pastikan fle koneksi.php telah dibuat, jika belum ada tuliskan
scrip berikut:
<?
$server = "localhost";
$username = "root";
$password = "";
$database = "dbmahasiswa";
// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or
die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak
bisa dibuka");
?>

Buat formlogin.php
merupakan tampilan form yang akan digunakan sebagai
interface login bagi user.
 <?php
echo"<table width='600' border='0' align='center'>
<form action='aksilogin.php' method='post'>
<tr>
<td colspan='2' align='center'>Login User</td>
</tr>
<tr>
<td>Nama User</td>
<td><input type='text' name='nmuser' /></td>
</tr>
<tr>
<td>Password</td>
<td><input type='password' name='pass' /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type='submit' value='Login' /></td>
</tr>
</form></table>";
?>

Tuliskan script
aksilogin.php
<?php
include "koneksi.php";
function anti_injection($data){
$filter =
mysql_real_escape_string(stripslashes(strip_tags(htmlspeci
alchars($data,ENT_QUOTES))));
return $filter;
}

$username = anti_injection($_POST['username']);
$pass=anti_injection(md5(sha1(md5($_POST['password']))));

// pastikan username dan password adalah berupa huruf atau

angka.
if (!ctype_alnum($username) OR !ctype_alnum($pass)){
echo "Ma'af User Name dan Password Anda Salah";
//include"error-login.php";
}
else{
$login=mysql_query("SELECT * FROM user WHERE
nmuser='$username' AND password='$pass'");
$ketemu=mysql_num_rows($login);
$r=mysql_fetch_array($login);
// Apabila username dan password ditemukan
if ($ketemu > 0){
session_start();
include "timeout.php";
$_SESSION[identitasuser] = $r[iuser];
$_SESSION[nama] = $r[namalengkap];
$_SESSION[login] = 1;
timer();
header('location:media.php?module=home');
}
else{
echo "Ma'af User Name dan Password Anda Salah";

}
}
?>
 MODUL
7
(PENERAPAN JQUERY PADA
WEB PHP)

A. Pendahuluan
JQUERY merupakan merupakan kumpulan/pustaka script
kode JavaScript lintas platform siap pakai yang didesain untuk
menyederhankan clintside scripting pada HTML. Sekitar 60 persen
dari 10000 situs web di dunia menggunakan jQuery. jQuery
bersifat open source (bebas sumber terbuka) dibawah lisensi
MIT, Sintaks pada jQuery didesain untuk memudahkan
dalam navigasi sebuah dokumen, pemilihan elemen DOM
(Document Object Model), pembuatan animasi,
penanganan event, dan pengembangan aplikasi berbasis Ajax.
jQuery juga menyediakan kemampuan bagi para pengembang
untuk dapat membuat plugin pada pustaka JavaScript. Ini
memungkinan mereka untuk membuat abstraksi pada interaksi
dan animasi tingkatrendah, efek lanjutan, serta tampilan
widget yang dapat dimodifkasi. Pendekatan modular pada jQuery
memungkinkan kita dalam pembuatan halaman Web yang
dinamis dan aplikasi berbasis Web yang ajib. (sumber:
https://id.wikipedia.org/wiki/JQuery)

Keuntungan menggunakan jQuery adalah:

Mendorong pemisahan antara JavaScript dan

HTML: Pustaka jQuery menyediakan sintaks yang
sederhana untuk penambahan penanganan event pada DOM
dengan hanya menggunakan JavaScipt, bukan justru
menambah event atribut HTML untuk memanggil
fungsi JavaScript. Inilah yang mendorong para
pengembang untuk memisahkan kode JavaScript dari
markup HTML
Keringkasan dan kejelasan: jQuery
mempromosikan keringkasan dan
kejelasan kode dengan ftur seperti chainable function dan
shorthand function names.
Mengeliminasi ketidak kompatibilitasan antar
peramban (browser): Engine JavaScript pada setiap
peramban pastilah sedikit berbeda antara satu dengan
yang lainnya, jadi kode JavaScript yang berjalan pada
sebuah peramban, bisa jadi tidak berjalan pada peramban
yang lainnya. Seperti toolkit JavaScript lainnya, jQuery
 menangani seluruh ketidak konsistenan antar peramban
dan menyediakan antarmuka konsisten yang dapat bekerja
pada berbagai peramban yang berbeda.
Ekstensibel: Event baru, elemenelemen, dan method
dapat dengan mudah ditambahkan dan kemudian dapat
digunakan ulang sebagai sebuah plugin. (Sumber:
https://id.wikipedia.org/wiki/JQuery)

Library jQuery dapat diunduh melalui:

http://docs.jquey.com/Downloading_jQuery
B. Membuat Animasi SlideShow
Animasi slide show merupakan sebuah efek untuk
mengganti tampilan dokumen kumpulan fle gambar/image secara
automatis yang ditampilkan dalam interval waktu tertentu, teknik
slide ini menarik untuk diterapkan pada sebuah web, karena akan
memberikan keindahan teradap tampilan dokumen berupa
gambar/image. Adapun langkahlangkah penerapannya adalah
sebagai berikut:
1. Buatlah folder dengan nama "slideNIMANDA"
2. Buat folder baru dengan nama "gambar" dalam folder
"slideNIMANDA"
3. Siapkan 5 (lima) file gambar dan simpan pada folder
"gambar" dengan nama
gbr1.jpg; gbr2.jpg; gbr3.jpg; gbr4.jpg; gbr5.jpg.
4. Copy File
jquery1.4.min.js
jqury.cycle.all.min.js

ke folder "slideNIMANDA"
5. Ketik scrip css berikut: simpan dengan nama
style.css pada folde
"slideNIMANDA"
#slideshow
{
Height : 255px;
Width : 255px;
Margin-top : 5px;
}

#slideshow img
{
Padding : 5px;
Border : 1px solid #ccc;
Background-color: #eee;
}

#nav a
{
Margin-right : 5px;
Padding : 3px 5px;
Border : 1px solid #CCCCCC;
Background : #666666;
Color : #ffffff;
Text-decoration :none;
}

#nav a.activeSlide
{
Background :#000000;
 Color :#ffffff;
}

6. Ketik scrip php berikut: simpan dengan nama

index.php pada folde
"slideNIMANDA"
<html>
<head>

<link rel="stylesheet" href="style.css" />

<script type="text/javascript" src="jquery-1.4.2.min.js">
</script>

<script type="text/javascript"
src="jquery.cycle.all.min.js"></script>

<script type="text/javascript">
$(document) .ready(function(){
$('#slideshow').before('<div id="nav">').
cycle({
fx : 'fade',
speed : 1000,
timeout : 5000,
pager :'#nav'
});
});
</script>

<title>Animasi Slide</title>
</head>

<body>
<?php
echo"<div id='slideshow'>
<img src='gambar/gbr1.jpg' width='250' height='250'>
<img src='gambar/gbr2.jpg' width='250' height='250'>
<img src='gambar/gbr3.jpg' width='250' height='250'>
<img src='gambar/gbr4.jpg' width='250' height='250'>
<img src='gambar/gbr5.jpg' width='250' height='250'>
</div>";
?>
</body>
</html>

Ket:

cycle({

});
 fx
: 'fade', speed
: 1000, timeout
: 5000, pager
:'#nav'

Bethod cycle() berfungsi untuk menjalankan

aksi slide show.
Parameter speed untuk mengatur kecepatan slide dalam
1000ms atau 1 detik. Parameter timeout mengatur
rentang waktu perubahan slide image 1 ke image lain.
Parameter fx adalah untuk mengatur jenis
efek animasi.
terdapat jenisjenis efek animasi yang dapat anda
terapkan antara lain:
blindX growX shuffle
blindY growY slideX uncove
wipe
blindZ scroolUp slideY zoom
cover scroolDown toss
curtainX scroolLeft turnUp
curtainY scroolRight turnDown
fade scrollHorz turnLeft
fadeZoom scroolVert turnRight

"SELAMAT MENCOBA"
C. Membuat Validasi Form
Pada model perancangan form aplikasi pada bahasa
pemrograman berbasis desktop disiapkan secara khusus aksi
untuk validasi pada sebuah form input, tujuannya adalah
untuk menjaga kemungkinan kesalahan dari pada pengguna.
Dengan adanya form validasi tersebut dapat meminimalisir
terjadinya kesalahan input, dimana setiap elemen input yang
kosong/belum, nomor telephon, numerik, mata uang, dll sesuai
dengan model validasi yang akan dibuat. terisi pada saat akan
diproses secara automatis komputer memberikan pesan
peringatan. Pada bahasa pemrograman Php memang belum
disediakan secara khusus, namun bahasa php dapat
dikolaborasikan dengan bahasa lain Javascript untuk menangani
hal tersebut melalui pemrosesan pada client. Pada jQuery telah
disiapkan secara khusus dan mudah untuk diterapkan melalui
plugin jQuery Validate. Adapun penerapan pada form validate
melalui php adalah sebagai berikut:
1. Buatlah folder dengan nama "ValidasiNIMANDA"
2. Copy file
jQuery.Validate.js
jQuery1.4.min.js
3. Ketik kode program berikut, simpan dengan nama
"Index.php"
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="jquery-1.4.2.min.js" type="text/javascript">
</script>

<script src="jquery.validate.js" type="text/javascript">

</script>

<script type="text/javascript">
$().ready(function() {
$("#form").validate({
rules: {
username: {
required: true,
minlength: 4
},
password: {
required: true,
minlength: 7
},
confirm_password: {
required: true,
equalTo: "#password"
},
email: {
 required: true,
email: true
},
homepage: {
required: true,
url: true
},
agree: "required"
},
messages: {
username: {
required: "Masukkan username",
minlength: "Username minimal 4 karakter"
},
password: {
required: "Masukkan password",
minlength: "Password terlalu pendek"
},
confirm_password: {
required: "Ulangi password",
equalTo: "Password tidak cocok"
},
email: {
required: "Masukkan email",
email: "Alamat email tidak valid"
},
homepage: {
required: "Masukkan alamat website",
url: "Url tidak valid"
},
agree: "Pastikan anda setuju"
}
});

});
</script>
<title>Form Validation</title>
</head>

<body>
<?
echo"<div>
<form id='form' method='get' action=''>
<fieldset>
<p>
<label for='username'>Username</label>
 <input id='username' name='username' />
</p>
<p>
<label for='password'>Password</label>
<input id='password' name='password' type='password' />
</p>

<p>
<label for='confirm_password'>Konfirmasi Password</label>
<input id='confirm_password' name='confirm_password'
type='password' />
</p>
<p>
<label for='email'>Email</label>
<input id='email' name='email' />
</p>

<p>
<label for='homepage'>Homepage</label>
<input id='homepage' name='homepage' />
</p>

<p>
<label for='agree'>Setuju</label>
<input type='checkbox' class='checkbox'
id='agree' name='agree' />
</p>

<p>
<input class='submit' type='submit' value='Kirim'/>
</p>

</fieldset>

</form>
</div>";
?>
</body>
</html>

4. Ketik kode program untuk mengatur style form,

simpandengan nama
"style.css"
body
{
font-family : Verdana, Arial, Helvetica;

}
}
#form
{
font-size
:12px;
Width : 550px;
Margin :0 auto;

fieldset { background-color: #E1E1E1;}

label
{
Width : 150px;
Display : inline-block;
line-height : 1.8;
vertical-align : top;
cursor : hand;
}

label.error {
margin-left : 10px;
width : auto;
display : inline;
color : red;
font-style : italic;
}

input.error { border-color:#FF0000; }

input.submit { margin-left: 150px; }

"SELAMAT MENCOBA"
D. Animasi Menu Dropdown

Sistem menu merupakan elemen yang sangat penting

dalam membagun website, dengan adanya sistem menu pada
website pengguna dapat berselancar atau dari halaman/modul
satu ke modul lainya. Sistem menu pada umumnya terdiri dari
dua jenis yaitu sistem menu tarik (dropdown menu) dan menu
datar (horizontal menu).

Gambar 17: contoh menu tarik (dropdown menu) pada

website

Gambar 18: contoh menu data (horizontal menu) pada

website

Pemilihan penerapan dari kedua jenis menu tersebut

tergantung pada penempatan dan fungsi menu serta struktur, Jika
pada sebuah website memiliki sub menu, alangkah bagus dan
terlihat elegant jika anda menggunakan menu tarik (sekdar
saran).
Dalam praktikum ini kita akan membahas tentang
penerapan plugin jQuery
untuk membangun sistem menu tarik (dropdown menu)
pada sebuh halaman website. Adapun langkahlangkanya adalah
sebagai berikut:

1. Buat folder baru dengan nama "MenuNIMANDA"

2. Buat folde baru pada MenuNIMANDA dengan nama image
3. Copy File image arrows.jpg ke folder imgae
4. Copy file berikut ke folde menuNIMANDA
jQuery1.4.2.min
 superfish
5. Ketik kode berikut, simpan dengan nama "index.php"

<html>
<head>
<link rel="stylesheet" href="stylemenu.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js">
</script>

<script type="text/javascript" src="superfish.js"></script>

<script type="text/javascript">
jQuery(function(){
jQuery('ul.menu').superfish({
animation: {opacity:'show',height:'show'},
speed: 'slow',
autoArrows: true
});
});
</script>

<title>Dropdown menu</title>
</head>
<body>
<?
echo"<ul class='menu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Profil</a>
<ul>
<li><a href='#'>Sambutan</a></li>
<li><a href='#'>Sejarah</a></li>
<li><a href='#'>Visi-Misi</a></li>
<li><a href='#'>Kelembagaan</a></li>
</ul>
</li>

<li><a href='#a'>Akademik</a>
<ul>
<li><a href='#'>Program Studi</a>
<ul>
<li><a href='#'>Sistem Informasi</a></li>
<li><a href='#'>Teknik Informatika</a></li>
</ul>
</li>
<li><a href='#'>Biro Administrasi</a>
<ul>
<li><a href='#'>BAAK</a></li>
<li><a href='#'>BAUK</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Fasilitas</a>
 <ul>
<li><a href='#'>Laboratorium</a>
<ul>
<li><a href='#'>Sofware</a></li>
<li><a href='#'>Mekantronika</a></li>
<li><a href='#'>Hardware</a></li>
</ul>
</li>
<li><a href='#'>Perpustakaan</a></li>
<li><a href='#'>Free Hotspot</a></li>
<li><a href='#'>Gedung Perkuliahan</a></li>
</ul>

<li><a href='#'>Gallery</a></li>
</ul>";
?>
</body>
</html>

6. ketik kode berikut, simpan dengan nama "stylemenu.css"

body {
font : 14px Helvetica, Sans-Serif;
}

.menu, .menu * {
Margin : 0;
Padding : 0;
list-style : none;
}

.menu {
line-height : 1.0;
}

.menu ul {
Position : absolute;
Width : 14em;
}

.menu ul li {
Width : 100%;
}
.menu li {
Float : left;
Position : relative;
}

.menu a {
Display : block;
Position : relative;
}
.menu li:hover ul, .menu li.sfHover ul {
Left : 0;
}

ul.menu li li:hover ul, ul.menu li li.sfHover ul {

left : 14em;
top : 0;
}

.menu { float : left; }

.menu a {
Padding : 0.5em 0.5em;
text-decoration : none;
}

.menu li {
Background : #000;
border-right : 1px solid #333;
}

.menu li li {
Background : #f6f6f6;
border-bottom : 1px solid #ccc;
border-right : none;
}

.menu li li li {
Background : #f6f6f6;
border-bottom : 1px solid #ccc;
border-right : none;
}

.menu li a, .menu li a:visited {

color: #fff;
font-weight : bold;
}

.menu li li a, .menu li li a:visited {

Color : #000;
font-weight : 100;
}

.menu li li li a, .menu li li li a:visited {

Color : #000;
font-weight : 100;
}

.menu li:hover, .menu li.sfHover, .menu a:focus, .menu

a:hover, .menu a:active {
Background : #F3D673;
Outline : 0;
}
 .menu a.sf-with-ul {
padding-right : 2.25em;
min-width : 1px;
}

.sf-sub-indicator {
Position : absolute;
Display : block;
Right : .75em;
Top : 1.05em;
Width : 10px;
Height : 10px;
text-indent : -999em;
overflow : hidden;
background : url('images/arrows.png') no-repeat -
10px - 100px;
}

a > .sf-sub-indicator {
top : .8em;
background-position : 0 -100px;
}
.menu ul a > .sf-sub-indicator {
background-position : 0 0;
}

"SELAMAT MENCOBA
SEMOGA SUKSES"
Daftar
Pustaka

1. Abdul Kadir, 2009. "Mastering Ajax dan PHP". Andi,

Yogyakarta.
2. Agus Saputra dan Feni Agustin, 2013. Menyelesaikan
Website 12 Juta Secara
Profesional
3. Ahmad Solichin, 2010. "MySQL 5. dari pemula hingga
mahir V.1". Ebook, Http://achmatim.net
4. Ahmad Solichin, "Pemrograman WEB dengan PHP dan
MySQL V.1". Ebook,
Http://achmatim.net
5. Agus Saputra, 2013. "Smarty PHP OOP Engine For PHP
Template, Elex Media
Komputindo", Jakarta.
6. Alan Nur Aditya, 2011. "Jago PHP dan MySQL". Dunia
Komputer, Bekasi.
7. Andhie Lala, 2004. "PHP & PostgreeSQL". Andi, Yogyakarta.
8. Anonimouse, 2003. "PHP Programming
Fundamental dan MySQL Fundamental". Ebook, artivisi
intermedia
9. Anonimouse, 2010. "Paling Dicari: PHP Source Code". Andi,
Yogyakarta.
10. Anonimouse, 2005. "Menjadi Seorang Desainer Web". Andi,
Yogyakarta.
11. Anonimouse, 2008. "Aplikasi Web Database
menggunakan Adobe
Dreamweaver CS3 & Pemrograman PHP+MySQL". Andi,
Yogyakarta
12. Andy Suyanto, 2007. "AJAX Membangun Web
dengan Teknologi
Asynchronouse JavaScript & XML". Andy, Yogyakarta.
13. Arif Ramadhan, 2007. "Pemrograman Web Database dengan
PHP dan MySQL".
Elex Media Komputindo, Jakarta.
14. Betha Sidik dan Husni Iskandar, 2012. Pemrograman
Web dengan HTML, Revisi Keempat. Informatika, Bandung.
15. David Sugianto., Dkk, 2003. "Langkah Demi Langkah
Membangun Website
dengan PHP". Datakom, Jakarta.
16. Didik Dwi Prasetyo, 2006. 101 TIP & TRIK Pemrograman
PHP,Elex Media
Komputindo, Jakarta.
17. Heri Kurniawan, 2011. "Trik Membuat Web Template dengan
PHP dan CSS".
Lokomedia, Yogyakarta
18. Wahana komputer, 2005. "Menjadi Seorang Desainer
Web". Penerbit Andi.
Yogyakarta
19. Yuniar Supardi, 2010, "16 Langkah Menjadi Web Master
PHP dan MySQL5".
Ardikom, Jakarta
20. www.ilmukomputer.com
21. www.ilmuwebsite.com/
22. www.id.wikipedia.org/wiki/Web
23. http://www.nurulimam.com/2013/10/membuataplikasi
pendaftaranonline
denganphp.html
24. http://www.nurulimam.com/2013/10/fungsidalamvariable
array.html (Materi
Array)