MODUL

WEB PROGRAMING II

Disusun Oleh:
Feri Prasetyo H, Rosi Kusuma Serli, Ahmad Fauzi, Prayogi
i
Page

i
 Kata Pengantar

Puji Syukur kehadirat Tuhan Yang Maha Esa karena atas limpahan rahmat-Nya sehingga
kami dapat menyelesaikan modul Web Programing II Untuk matakuliah Web Programing II.
Dimana Mahasiswa dapat mengoperasikan beberapa aplikasi dengan Xampp : versi 1.7 sampai
versi 1.8, penggunaan Adobe/ Macromedia Dreamweaver CS .XX atau editor sejenisnya untuk
pembelajaran menggunakan tools yang memiliki bagian views dan code untuk memudahkan
dalam medesain, Penggunaan Browser Google chrome , mozilla, Opera, Safari yang update agar
mensupport fungsi HTML5

Kami menyadari masih banyak kekurangan dalam penyusunan modul ini. Oleh karena
itu, kami sangat mengharapkan kritik dan saran demi perbaikan dan kesempurnaan modul ini.

Kami mengucapkan terima kasih kepada berbagai pihak yang telah membantu proses
penyelesain modul ini, Semoga modul ini dapat bermanfaat bagi kita semua, khususnya para
peserta didik.

Penulis

ii
Daftar Isi

Kata Pengantar .................................................................................................................... ii

Bab 1 ................................................................................................................................... 1

Penggunaan Tools ................................................................................................................. 1

Bab 2 ................................................................................................................................... 2

Manipulasi String dan Data Base ........................................................................................... 2

Latihan Manupulasi String ................................................................................................... 4

Bab 3 ....................................................................................................................................... 18

Folder Fungsi ......................................................................................................................... 32

Folder Perintah ...................................................................................................................... 37

Bab 4 ..................................................................................................................................... 59

Login Admin .......................................................................................................................... 59

Kelola Berita ........................................................................................................................ 60

Kelola Iklan ............................................................................................................................. 65

Kelola anggota ........................................................................................................................ 66

Folder Tampilan ..................... ................................................................................................ 65

Menu admin .......................................................................................................................... 67

Kelola Berita ......................................................................................................................... 67

Tambah Berita ........................................................................................................................ 60

Kelola Iklan ............................................................................................................................. 73

Tambah Iklan ... .................................................................................................................... 74

Edit Iklan .............................................................................................................................. 76

Kelola Anggota ........................................................................................................................ 80

iii

File Admin ................................................................................................................................ 81

Page

iii
Latihan .................................................................................................................................. 82

Bab 5 ..................................................................................................................................... 83

Pengenalan jquery ............................................................................................................... 83

Datar Pustaka ..................................................................................................................... 92

iv
 BAB 1 Penggunaan Tools

Tools yang dipergunakan untuk materi web programming 2 ini antara lain :Xampp
menggunakan software XAMPP. Untuk lebih lanjut mengenai berbagai produk xampp,
silahkan kunjungi situs https://www.apachefriends.org/index.html. Xampp merupakan
suatu tools yang bersifat open: versi 1.7 sampai versi 1.8, Adobe/ Macromedia Dreamweaver
CS .XX atau editor sejenisnya (untuk pembelajaran kita gunakan tools yang memiliki bagian
views dan code untuk memudahkan dalam medesain), Browser Google chrome , mozilla,
Opera, Safari yang update agar mensupport fungsi HTML5 source yang sering
dipergunakan untuk pengembangan aplikasi berbasis website yang didalamnya sudah
menyediakan paket seperti Apache, MySQL, MariaDB, PHP, phpMyAdmin, FileZilla,
Tomcat, Xampp Control Panel

Referensi
1. Buku Pintar HTML5 + CSS3 + DreamWeaver CS6,Jubilee
Enterprise,2012, Elex Media Komputindo
2. Membangun website dinamis interaktif dengan php mysql, Mohamad Sukarno, 2006.eska
media
3. Buku Pintar Jquery Dan Php Untuk Pemula, Abdul Kadir,2011. Bukuseru
4. http://ekajogja.com/jquery-definisi-fitur-penggunaan-jquery-dalam-pengembangan-website/ 4.
w3shools .com
5. http://php.net/manual/en/

1
 BAB 2
Manipulasi String Dan Data Base
1. latihan manipulasi String : tujuannya untuk menyeragamkan data yang diinput
(masuk ke database), data yang diproses, dan data yang tampil.
Contohnya adalah
a. Di database : field array_hari -> senin;selasa;rabu;kamis;jumat;sabtu
b. Di proses, data array akan dipecah berdsarkan titik koma (;) : $exlode[0], $explode[1],
$explode[2], $explode[3], $explode[4], $explode[5], $explode[6]
c. Di data yang akan tampil misalnya SENIN : strtoupper($explode[0])

begitu pula dengan contoh lain, misalnya format tanggal, format rupiah dll.

2. Latihan operasi : tujuannya untuk melatih kalkulasi terhadap data yang akan tampil.
Misalkan :
a. 2 hari lagi dari hari senin adalah hari apa.
b. menentukan ongkos kirim barang yang
total beratnya 1,25 kg dll.

3. Latihan proses : tujuannya untuk melatih analisa aliran data. Misalnya :

a. misalkan di keranjang belanja tersimpan di tabel temporary, pada saat
konsumen checkout, data masuk ke tabel transaksi dan tabel detail, tabel
temporary akan terhapus

A. Buat database dg nama : materi_web2

B. Buat tabel dengan nama table_1. Strukturnya seperti berikut

2
Isilah record sbb :

3
c. Buatlah tabel dengan nama table_2

C. buat table dengan nama table_3 dengan struktur yang sama persis dengan table_2 (boleh di
duplicate)

4
 1. Latihan memanipulasi string

Latihan string ini penting untuk menyeragamkan nilai yang akan dikirim ataupun yang ditampilkan
a. Strtouuper
b. strtolower
c. Ucwords
d. substr

buat folder latihan_pra_uts di

htdocs buat file koneksi.php

Buat file lat_string1.php

Outputnya adalah :

5
Latihan selanjutanya :

Masih di lat_string1.php
Bagaimana menampilkan Rosi (di urutan 4 record) dg dua cara.

Menggunakan php dan dengan query sql

Cara 1. Dengan array php:

6
Cara 2. Menggunakan query sql :
Anda tinggal tambahkan skrip limit 3,1 pada baris ke 3 dari skrip
lat_string1.php. “select a_nama1 from table_1 limit 3,1”
Artinya, mengambil 1 nilai dari field a_nama1 dari table_1 diambil dari index ke-3 (posisi ke-4)

Latihan lanjutan (untuk mhs) :

1. Buat output untuk menampilkan tulisan Ogi
2. Buat output untuk menampilkan tulisan Yog
3. Buat output untuk menampilkan tulisan Gigi

Dengan menggunkan substr,ucword

Buat file lat_string2.php

Outputnya :

Latihan :
Latihan lanjutan (untuk MHS):

7
 1. Buat output untuk menampilkan tulisan Rosi K.S (R=huruf capital, K=capital, S=Kapital )
2. Buat output untuk menampilkan tulisan Serly, Rosi Kusuma

Dengan menggunkan explode,substr,ucword

Buat lat_string3.php

8
Outputnya :

Latihan lanjutan (untuk mhs) :

Buat tampilan seperti berikut :

1.

Keterangan :
a. Hari disusun dari field d_array_hari , di table_1
b. Setelah tersusun ke dalam bentuk list. Huruf pertama menjadi capital

2.

9
Keterangan :
a. Tgl default diambil dari field b_tgl1
b. Format tgl menggunakan perintah substr, dan logical (if/switch case)
2. Latihan Operasi

a. Mengenai function dan Class

Function adalah kumpulan perintah yg dimuat ke dalam suatu alias. Dimana perintah yg sudah
menjadi alias tersebut dapat dipanggil di halaman yg sama, ataupun halaman lain. Function
dapat menerima , mengolah parameter serta mengubahnya, sebagai contoh adalah sbb :

a. Buat halaman dg nama fungsi_waktu.php

10
 b. Buat halaman dg nama fungsi_nominal.php

c. Buat halaman lat_operation1.php

Pada contoh diatas kita dapat temukan , kata new.

New disini adalah penggunaan Class . yaitu sekumpulan dari function (dalam kasus ini, class dan
function2-nya sudah disediakan oleh PHP5, jadi tidak perlu membuat function lagi ).

10
11
Outputnya adalah sbb :

Latihan untuk mahasiswa :

Buat halaman baru dengan nama lat_operation2.php
1. Buat tampilan seperti lat_operation1.php
Namun nilai yang ditampilkan adalah
a. Tanggal paling awal dari b_tgl1,
b. Tanggal paling akhir dari b_tgl2.
c. Hitung jaraknya, dan hitung biayanya (biaya menggunakan b_tgl1 di record pertama)
d. Tanggal yang tampil di perulangan bentuknya adalah d-m-YYYY

12
 Outputnya :

Clue : gunakan query query (max, min)

13
Buat halaman baru dengan nama lat_process1.php Pada latihan ini , kita akan mempelajari
pola/skema aliran data.

Kita akan memasukan data di tabel_2 (tabel summary) dari tabel_1. Bentuknya adalah
a) C_rupiah di table_2 adalah seluruh c_rupiah di table_1
b) C_jml di table_2 adalah seluruh c_jml di table_1
c) C_tot_jml adalah summary dari perkalian c_jml*c_rupiah di table1
d) C_tgl_pindah adalah tgl terakhir data berubah
e) Pada saat bersamaan terjadi 2 proses, proses penyimpanan/update ke tabel_2, dan
proses insert ke table_2

1) Sebelum data masuk ke table 2 , dilakukan pengecekan terlelebih dahulu, jika belum ada
data maka sistemnya adalah meng-insert, jika belum, maka update

2) Data akan terus mengisi ke table_3 (tabel history)

a) C_rupiah di table_2 adalah c_rupiah di table_1
b) C_jml di table_2 adalah c_jml di table_1
c) C_tot_jml adalah perkalian c_jml*c_rupiah di table1
d) C_tgl_pindah adalah tgl terakhir terisi data

a. tampilan sebelum diklik update

14
b. tampilan setelah diklik update

Ket :
Jumlah : total jumlah = 2+1 di tabel_1
Rupiah = 30.000+70.000
Summary total = 30.000*2+ 70.000*1

Jawaban :
Buat halaman lat_process1.php

15
Buat halaman update.php

17
 Bab 3
CRUD (create, read, update, delete)

Masyarakat kini mulai sadar bahwa penggunaan teknologi informasi sangatlah

berperan dalam menopang roda bisnis. Utamanya dalam penyajian informasi bisa
menjadi lebih cepat, akurat dan luas. Bahkan, kini masyarakat sudah sangat akrab
dengan teknologi web. Setiap hari bahakn setiap menit masyarakat (khususnya di
kota-kota besar) pasti membuka website. Baik untuk berbelanja, bisnis,ataupun untuk
sekedar iseng mengunjungi situs jejaring sosial. Itulah yang membuat bahasa
pemrogramman web berkembang dengan sangan cepat. Kalau dulu, di era 80-an kita
hanya mengenal web dengan konten statis menggunakan HTML, di era 90-an atau
sepuluh tahun berikutnya kita sudah mengenal, web dinamis dengan PHP.Dan di era
saat ini, kita dapat lihat web yang tak hanya dinamis, namun responsif dengan
bantuan CSS, Jquery, AJAX, dan dengan jenis pertukaran data yang beragam pula
(contohnya XML dan JSON).

 Para Pekerja yang bergelut di bidang web dapat dispesialisasikan lagi, kita
dapat kenal dengan istilah-istilah berikut :

1) Web Programmer : Orang yang membuat/menangani sistem yang

menggunakan pemrograman web

2) Web disigner : orang yang khusus untuk membuat tampilan website menjadi lebih
menarik

3) Web administrator : orang khusus mengelola konten/isi dari web

 diperkirakan, pemrograman web di tahun-tahun ke depan akan terus

berkembang. Salah satu alasannya adalah karena pemorograman web
bersipat lintas sistem operasi (cross platform). Namun janganlah khawatir
apalagi kalau materi yang sedang anda pelajari saat ini sudah ketingglan
zaman. Kami membuat materi yang dapat dengan mudah anda pelajari. Dan
jika anda sudah menyukai webprogramming anda akan cepat faham dan
mudah beradaptasi dengan perkembangan web programing.Ingatlah bahwa
seberagam apapun bahasa pemrograman yang ada, yang utama adalah
bagaimna cara/logika kita menangani studi kasus dengan menggunakan
script yang dikuasai

18
  Bila di Web Programming I anda sudah menjumpai penggunaan skrip PHP
untuk CRUD (create, read, update, delete), maka di Web Programming II ini
anda tidak akan terlalu sulit mempelajarinya lagi. Di materi ini , kita akan
mempelajari contoh maupun studi kasus yang familier dengan anda.
Mahasiswa akan dilatih membuat projek yang struktur filenya terpipisah
antara script tampilan dengan script untuk eksekusi. Dibiasakan juga dengan
penggunaan function agar skrip yang dikembangkan bisa lebih ringkas (tidak
terlalu panjang) dan mudah digunakan kembali (re-usable), serta script
menjadi lebih tersusun rapi.

 Contoh yang akan kami ambil adalah website portal berita. Alasan memilih
contoh ini karena website portal berita cukup populer dan studi kasusnya
mudah difahami.

User Requirements

Hal yang dibutuhkan dan disediakan oleh sistem

1. Sistem memuat konten berita yang dipisahkan berdasarkan kategori dan

dapat dikelola oleh admin (tambah, edit, hapus)

2. Untuk memperoleh laba, perusahaan menyediakan fasilitas layanan iklan.

Dimana siapapun dapat beriklan dan ditampilkan di kolom yang disediakan
dalam jangka waktu tertentu (sesuai permintaan). Perusahaan dapat melihat
laporan keuntungan yang diperoleh dari iklan

3. Iklan yang tampil adalah iklan yang belum lewat masa aktifnya, jika sudah
lewat tanggal akhir, maka iklan akan nonaktif dengan sendirinya
4. Jadikan Kategori yang ada di halaman depan, sebagai menu utama, selain
home (satu baris dengan home) dengan format huruf kapital semua

5. Untuk konten / isi berita :

a. judul huruf besar di awal kata

b. Tampil nama admin dan tanggal posting dengan huruf kecil berbahasa indonesia

6. Pengunjung dapat memberikan komentarnya terhadap berita , dengan syarat harus

menjadi
anggota terlebih dahulu

19
Dari user requirement diatas, kita dapat membentuk suatu database dengan tabel-
tabel seperti berikut

1. Buat database dengan nama : materi_portalberita

2. Buat tabel kategori dengan struktur sebagai berikut

Isilah tabel kategori seperti berikut

NB : perhatikan huruf yang digunakan huruf kecil semua (lowercase)

20
3. Buat tablel berita dengan struktur seperti di bawah ini

Isi tabel berita sebanyak 3 record dengan masing-

masing kategori Contohnya :

21
4. Buat tabel admin sebagai berikut

Isi tabel admin dengan record berikut

Password nilainya kita enkripsi dengan bantuan fungsi md5

5. buat tabel anggota dengan struktur sebagai berikut :

22
Isi tabel anggota

7. Tabel Komentar

Ket : tabel ini berguna untuk menampilkan komentar . pengunjung yang dapat
mengirim komentar harus login terlebih dahulu

23
8. Tabel iklan

Isi lah tabel iklan sebanyak 2 record dengan

ketentuan Isi reord bebas, kecuali :

 record diisi tgl_awal =saat ini, tgl_akhir=saat ini, lamasewa=1 hari,

hargasewa=15000, totalharga=15000, aktif=1

 record diisi tgl_awal =tgl_kemarin, tgl_akhir=tgl_kemarin, lamasewa=1 hari,

hargasewa=15000, totalharga=15000,aktif=1. (pada saat website di-load,
posisi aktif akan menjadi 0 karena lewat dari tgl sekarang)

 Untuk gambar, pastikan ektensi gambarnya ikut disebutkan, sebagai contoh, seperti
berikut

 Pastikan gambar dengan nama dan ekstensinya yang sama, di-simpan di folder
gambar

24
Relasinya adalah sebagai berikut :

25
Langkah awal pembuatan web

1. Download file dg nama materi_web2.zip . di elibrary.bsi.ac.id/room/

2. Ekstrak file tersebut lalu taruh di htdocs/

Didalamnya terdapat folder:

Aset : tempat untuk menaruh file css, atau jquery. Yang mana file-file tersebut berguna
untuk memakimalkan tampilan antarmuka pengguna

Fungsi : tempat untuk menaruh file php yang mana berisi kumpula n function yang
dapat dipergunakan di folder perintah ataupun tampilan.

Gambar : tempat untuk menaruh gambar

Pengaturan : berisi file php yang berkenaan dengan aturan-aturan keselurahan dari
web, semisal. Jam server, koneksi database dll.

Perintah : berisi file php yang bertugas untuk melakukan eksekusi terhadap perintah.
Misalkan tampil,simpan, hapus atau edit,

Tampilan : berisi file tampilan dari konten

26
Tampilan yang diharapkan adalah sebagai berikut :

A. Halaman Depan

Gambar 1 . Halaman Depan

Keteranga

n1:

Menu :

a. home, kategori berita, dan layanan iklan

2. Berita terbaru, sampai posting saat ini (hari, tanggal)

27
3. Slider berita yang juga main conten, bila menu dipilih maka, bagian ini-lah yang akan
diganti

4. List berita populer (berdasarkan banyaknya dilihat)

5. Pencarian judul berita,

6. Status login anggota

7. Iklan yang masa tayangnya belum habis

B. Halaman Layanan Iklan

Gambar 2 . Layanan Iklan

28
C. Halaman Mendaftar

Gambar 3 . Mendaftar

Ket : form daftar, terdafpat kode yang harus diinput dimana kode tersebut terbentuk secara
acak

29
D. Halaman Detail Berita

Gambar 4 . Detail berita

Ket : setelah login , anggota dapat mengirim komentarnya

30
A. Folder Pengaturan

1. Isi file koneksi.php adalah sebagai berikut

2. Isi file waktu.php adalah sebagai berikut

31
B. Folder fungsi

1. isi dengan file fungsi.php. Kegunaan dari file ini adalah untuk memeringkas script
yang anti dipergunakan dihalaman lain.

$data=mysql_fetch_array(mysql_query(" nama_lengk
select ap

echo
"<script>window.alert('$msg');window.location=('$url');</script>"

header("location:$url

32
//fungsi untuk menampilkan status

function status($parameter){

if($parameter==1)

$status="Aktif";

else

$status="Non Aktif";

return $status;

//membuat angka menjadi format

rupiah function

rupiah($parameter){

$rupiah="^Rp".number_format($parameter,

0,',','.'); return $rupiah;

function selisihwaktu($waktupembuatan){ //memasukan parameter waktupembuatan

$waktusekarang=date("Y-m-d h:i:s");

$datetime1 = new DateTime($waktusekarang); //penggunaan class Datetime yg

sudah ada di php 5

$datetime2 = new DateTime($waktupembuatan);

$interval = $datetime1->diff($datetime2);

return $selisih; //mengubah nilai parameter menjadi nilai selisih

}
33
function tgl_ina($parameter){ //ini untuk mengubah format 2015-06-15 ke dalam
format 15 Juni 2015
$thn=substr($parameter,0,4); //menngambil 4 digit dari kiri, 0 adalah index pertama
dari tahun (angka 2 dari 2015), 4 banyaknya digit yg diambil
$b=substr($parameter,5,2); //mengambil 2 digit, index 5 adalah angka 0 dari 06

$tgl=substr($parameter,-2); //mengambil 2 digit

dari kanan if($b==1) {$bln="Januari";}
else if($b==2)
{$bln="Februari";} else
if($b==3) {$bln="Maret";}
else if($b==4)
{$bln="April";} else
if($b==5) {$bln="Mei";}
else if($b==6)
{$bln="Juni";} else
if($b==7) {$bln="Juli";}
else if($b==8)
{$bln="Agustus";} else
if($b==9)
{$bln="September";} else
if($b==10){$bln="Oktober";}
else
if($b==11){$bln="November";
} else
if($b==12){$bln="April";}
$tanggal=$tgl . " ".$bln ."
".$thn; return $tanggal;
}

function tgl_ina2($parameter1){ //ini untuk mengubah format 2015-06-15 17:00:00

ke dalam format 15/06/2015 >> 17:00:))

$parameter2=substr($parameter1,0,10); //10 digit dari kiri,ini untuk peroleh nilai

2015-06-15 dari nilai 2015-06-15 17:00:00

$parameter3=substr($parameter1,-8); //10 digit dari kanan,ini untuk peroleh 17:00:00 dari

nilai

34
2015-06-15 17:00:00
$thn=substr($parameter2,2,2); //menngambil 2 digit dari kiri, 2 adalah index ketiga
dari tahun (angka 1 dari 2015), 2 banyaknya digit yg diambil

$bln=substr($parameter2,5,2);
$tgl=substr($parameter2,-2); //mengambil 2 digit dari kanan
$tanggal=$tgl . "/".$bln ."/".$thn ;
$jam=$parameter3;
$waktu=$tanggal . " .:::. ".

$jam; return $waktu;

}
// copy-paste-edit dari yg atas, kegunaaan dari function ini adalah untuk

penyusunan laporan function tgl_ina3($parameter){

$thn=substr($parameter,2,2);

$bln=substr($parameter,5,2);

$tgl=substr($parameter,-2);

$tanggal=$tgl . "/".$bln ."/".$thn ;

$waktu=$tangga

l; return

$waktu;

//mengubah hari bahasa inggiris ke dalam bahasa

indonesia function hari_ina($day)

if ($day=="Monday")

{$hari="Senin";}

35
else if ($day=="Tuesday")

{$hari="Selasa";}

else if ($day=="Wednesday")

{$hari="Rabu";}

else if ($day=="Thursday")

{$hari="Kamis";}

else if ($day=="Friday")

{$hari="Jumat";}

else if ($day=="Saturday")
{$hari="Sabtu";}
else if ($day=="Sunday")
{$hari="Minggu

";} return $hari;

function jangkawaktu($waktu1,$waktu2){
$start_date = new DateTime($waktu1);

$end_date = new DateTime($waktu2);

$interval = $start_date->diff($end_date);

$selisih= $interval->d;
$jangkawaktu= $selisih+1; // ditambah 1 karena yg dihitung bukan selisih hari,
//tapi jangka waktu, dari tgl 11 sampai 13 adalah 3 hari.

//bukan 13-11= 2 hari

return $jangkawaktu;

36
C. Folder perintah

1. Buat file tampilkonten.php. Fungsi dari halaman ini adalah menampilkan

halaman yg diminta oleh menu/ halaman lainnya dg metode $_GET[„variabel‟].

include "tampilan/detailberita.php";

include "tampilan/cariberita.php";

37
break;
case "login":
include "tampilan/login.php";

break;

case "daftar":
include "tampilan/daftar.php";

break;

case "kelola_berita":

include "tampilan/kelola_berita.php";

break;

case "tambah_berita":

include

"tampilan/tambah_berita.php";

break;

case "edit_berita":

include

"tampilan/edit_berita.php";

break;

case "kelola_iklan":

include "tampilan/kelola_iklan.php";

break;

38
include

"tampilan/tambah_iklan.php";

break;

include "tampilan/edit_iklan.php";

break;

include

"tampilan/kelola_anggota.php";

break;

2. Buat file login.php .fungsi dari halaman ini adalah untuk melakukan pengecekan
anggota. Jika benar anggota , maka akan diberi variabal global ($_SESSION)

39
$_SESSION['nama_lengkap']=$anggota['nama_leng
kap'];

$_SESSION['login']=1;

header('location:../');

3. Buat halaman logout. Fungsi dari halaman ini adalah mencabut (unset) nilai sesi
variabel global yg sudah diset , dan membersihkannya (destroy)

40
4. buat halaman daftar.php

$simpan=mysql_query("inse anggota(nama_lengkap,email,password,ak
rt
values('$nama','$email','$password',1)"); tif)

41
D. Folder tampilan

Semua file yg ada di folder ini berguna untuk view atau tampilan

1. Buat halaman home.php

42
while($berita=mysql_fetch_array($querynews)){ //memulai

perulangan

43
</li

>

2. Buat halaman layananiklan.php

<h3>Kirimka
n
href="mailto:[email protected]">[email protected]</a>
</h3>

3. Buat halaman tampiliklan.php

44
while($iklan=mysql_fetch_array($query)

){

4. Buat halaman statuslogin.php

placeholder="Password"

45
<hr>
</form>
</fieldset>
<?php
} //tutup jika belum login
else{ //selain itu, atau kecuali (jika sudah login). maka

$personal=mysql_fetch_array(mysql_query("select*from anggota
where
id_anggota='$id_anggota'"));

?>
<fieldset>
<legend><h2> Status</h2></legend>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><?php echo $personal['nama_lengkap']; ?></td>
</tr>
<tr>
<td><?php echo $personal['email']; ?></td>
</tr>
<tr>
<td><a href="perintah/logout.php"><button>Logout</button></a></td>

</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</fieldset>

<?php } //tutup jika sudah login ?>

46
5. Buat halaman menu.php

$query=mysql_query("select*from kategori");

href='index.php?tampilan=kategori&id_kategori=$kategori[id_kategori]&kategori=$kat
egori[kate

6. buat halaman cariberita.php

$jmlkomen=mysql_num_rows(mysql_query("select*
from

47
7. buat halaman beritapopuler.php

48
8. Buat halaman detailberita.php

class='small'>".tgl_ina2($berita['tgl_posting'])."<br>Diposting

49
<br

>

a.id_komentar a.tgl_komentar
, ,
a.isi_komentar,b.nama_lengkap,b.em

while($komen=mysql_fetch_array($querykome
n))

class='small' $komen[nama_lengka ($komen[email]

>
".tgl_ina2($komen['tgl_komentar'])."</div>" p] )

9. Buat halaman kategori.php

50
$jmlkomen=mysql_num_rows(mysql_query("select*fro komentar
m

<a
href='index.php?tampilan=detailberita&id_berita=$populer[id_berita]'>

51
E. Buka halaman index.php

Ini adlaah halaman utama yg statis

Klik klik code pada toolbar sehingga menjadi full script

Taruh lah skrip ini pada masih2 blok (yang sudah disediakan)

1. Skrip 1 halaman index.php

52
 2. Skrip 2 halaman index.php

3. Skrip 3 halaman index.php

4. Skrip 4 halaman index.php

5. Skrip 5 halaman index.php

6. skrip 6 halaman index.php

Sekarang, dapat anda preview hasilnya di browser

58
 Bab 4
Pembuatan Admin

Admin portal berita

Admin portal berita melakukan pengelolaan data /modul

a. Berita (lihat, tambah, edit, hapus)

b. Iklan (lihat, tambah edit, hapus)

c. Anggota (lihat, edit status)

ket : Pada halaman ini, Admin dapat melakukan entry iklan , sekaligus juga
menentukan tanggal mulainya iklan dan kapan berakhirnya, sekaligus
menentukan harga per hari iklan yg ditampilkan sehingga dapat diketahui jumlah
keutungan yang diperoleh

tampilan yg diharapkan adalah sebagai berikut

ket :

1 adalah tgl perdana iklan

2. adalah tgl berakhirnya penayangan iklan

59
3. harga iklan tayang perhari

4. adalah masa/ tempo dimana iklan tayang sampai berakhir

5. adalah biaya/ subtotal

6. masih aktif/tidak. Jika sudah lewat tanggal, secar otomatis menadi tidak aktif

skema halaman yang akan dibuat adalah

lihat $module -> Edit $module / Tambah $module / Hapus $Module

A. folder perintah

1. Buat halaman loginadmin.php

59
header('location:../admin.php?tampilan=kelola_berita');

2. buat halaman kelola_berita.php

session_start();

60
$sumber_gambar=$_FILES['gambar']['tmp_name'];

$id_admin=$_SESSION['id_admin'];
$aksi=$_GET['aksi'];

if($aksi=="tambah")
{

$simpan=mysql_query("insert into
berita(judul,id_kategori,teks_berita,gambar,id_admin,tgl_posting)
values('$judul','$kategori','$teks','$gambar','$id_admin',now())");

move_uploaded_file($sumber_gambar,"../gambar/".$gambar); // dipindahkan
dari sumber ke folder gambar di server dengan nama yg sama seperti nama
aslinya

if($simpan)

msgbox("berhasil dibuat","../admin.php?tampilan=kelola_berita"); //redirect ke

index.php dg cara naik 1 folder

else

msgbox("Gagal terdafar","../admin.php?tampilan=kelola_berita"); //redirect ke

index.php?tampilan=daftar dg cara naik 1 folder

else if($aksi=="edit")

$id_berita=$_POST['id_berita'];
if(empty($gambar)) // kalo gambarnya gak dipilih/ gak dirubah

61
{

$simpan=mysql_query("update berita set judul='$judul',

id_kategori='$kategori', teks_berita='$teks' where
id_berita='$id_berita'");

else

$berita=mysql_fetch_array(mysql_query("select gambar from

berita where id_berita='$id_berita'"));

unlink('../gambar/'.$berita['gambar']); //menghapus file gambar di folder gambar

$simpan=mysql_query("update berita set judul='$judul',

id_kategori='$kategori', teks_berita='$teks', gambar='$gambar'
where id_berita='$id_berita'");

move_uploaded_file($sumber_gambar,"../gambar/".$gambar);

if($simpan)

msgbox("berhasil dibuat","../admin.php?tampilan=kelola_berita"); //redirect ke

index.php dg cara naik 1 folder

else
msgbox("Gagal terdafar","../admin.php?tampilan=kelola_berita"); //redirect ke
index.php?tampilan=daftar dg cara naik 1 folder
}
else if($aksi=="hapus")

$id_berita=$_GET['id_berita'];

$berita=mysql_fetch_array(mysql_query("select gambar from

berita where id_berita='$id_berita'"));

62
rdir("../admin.php?tampilan=kelola_berit

a"); else

rdir("../admin.php?tampilan=kelola_berit

a");

3. Buat halaman kelola_iklan.php

session_start();

63
$gambar=$_FILES['gambar']['name'];

$sumber_gambar=$_FILES['gambar']['tmp_name'];

$id_admin=$_SESSION['id_admin'];

$aksi=$_GET['aksi'];

if($aksi=="tambah")

$simpan=mysql_query("insert into
iklan(nm_perusahaan,email,link,gambar,isi_iklan,tgl_mulai,tgl_akhir,hargasewa,lama
sewa, totalharga, aktif,id_admin)
values('$nm_perusahaan','$email','$link','$gambar','$teks_iklan','$tgl_mulai','$tgl_akhir','$
hargas ewa','$lamasewa','$totalharga','0','$id_admin')");

move_uploaded_file($sumber_gambar,"../gambar/".$gambar); // dipindahkan
dari sumber ke folder gambar di server dengan nama yg sama seperti nama
aslinya

if($simpan)

msgbox("berhasil dibuat","../admin.php?tampilan=kelola_iklan"); //redirect ke

index.php dg cara naik 1 folder

else

msgbox("Gagal terdafar","../admin.php?tampilan=kelola_iklan"); //redirect ke

index.php?tampilan=daftar dg cara naik 1 folder

else if($aksi=="edit")
{
$id_iklan=$_POST['id_iklan'];

if(empty($gambar)) // kalo gambarnya gak dipilih/ gak dirubah

64
$simpan=mysql_query("update iklan set nm_perusahaan='$nm_perusahaan',
email='$email',
isi_iklan='$teks_iklan',link='$link',tgl_mulai='$tgl_mulai',tgl_akhir='$tgl_akhir
', hargasewa='$hargasewa',lamasewa='$lamasewa',totalharga='$totalharga'
where id_iklan='$id_iklan'");

else

$berita=mysql_fetch_array(mysql_query("select gambar from iklan where id_iklan

='$id_iklan'")); unlink('../gambar/'.$berita['gambar']); //menghapus file gambar di

folder gambar

$simpan=mysql_query("update iklan set nm_perusahaan='$nm_perusahaan',

email='$email',
isi_iklan='$teks_iklan',link='$link',tgl_mulai='$tgl_mulai',tgl_akhir='$tgl_akhir',
hargasewa='$hargasewa',lamasewa='$lamasewa',totalharga='$totalharga',
gambar='$gambar' where id_iklan='$id_iklan'");

move_uploaded_file($sumber_gambar,"../gambar/".$gambar);
}
if($simpan)

msgbox("berhasil dibuat","../admin.php?tampilan=kelola_iklan"); //redirect ke

index.php dg cara naik 1 folder

else
msgbox("Gagal terdafar","../admin.php?tampilan=kelola_iklan"); //redirect ke
index.php?tampilan=daftar dg cara naik 1 folder

else if($aksi=="hapus")

65
rdir("../admin.php?tampilan=kelola_iklan"

); else

rdir("../admin.php?tampilan=kelola_iklan"

);

4. Buat halaman kelola_anggota.php

session_start();

66
rdir("../admin.php?tampilan=kelola_anggota

");

rdir("../admin.php?tampilan=kelola_anggota

");

rdir("../admin.php?tampilan=kelola_anggota

");

67
B.folder tampilan

1. Buat halaman menuadmin.php

2. buat halaman kelola_berita.php

<td width="6%" bgcolor="#CCCCCC">Kategori</td>

<td width="5%" bgcolor="#CCCCCC">Gambar</td>

68
<?php

$n=1;

$query=mysql_query("select* from berita inner join kategori

on berita.id_kategori=kategori.id_kategori order by
berita.id_berita desc");
while($berita=mysql_fetch_array($query)){

$jmlkomen=mysql_num_rows(mysql_query("select*from komentar where

id_berita='$berita[id_berita]'"));
?>

<tr>

<td><?php echo $n; ?></td>

<td><?php echo $berita['judul']; ?></td>

<td><?php echo $berita['kategori']; ?></td>

<td><?php echo "<img src=gambar/$berita[gambar] width='300px'>"; ?></td>

<td><?php echo tgl_ina2($berita['tgl_posting']); ?></td>

<td><?php echo $berita['dilihat']; ?></td>

<td><?php echo $jmlkomen; ?></td>

<td width="18%"><?php echo "<a

href=admin.php?tampilan=edit_berita&id_berita=$berita[id_berita]> <button> Edit
</button></a>"; ?></td>

<td width="18%"><?php echo "<a

href=perintah/kelola_berita.php?aksi=hapus&id_berita=$berita[id_berita]> <button>
Hapus
</button></a>"; ?></td>

</tr>
<?php
$n++; }
?>
</table>

69
3. Buat halaman tambah_berita.php

<form action="perintah/kelola_berita.php?aksi=tambah"
method="post"

70
4. Buat halaman edit_berita.php

<form action="perintah/kelola_berita.php?aksi=edit" method="post"

enctype="multipart/form-

71
 <td> <select name="kategori"> <option value="">-pilih</option><?php
$query=mysql_query("select*from kategori");

while($kategori=mysql_fetch_array($query)){
if($berita['id_kategori']==$kategori['id_kategori'])
{$status="selected";}

else {$status="";}

echo "<option value='$kategori[id_kategori]'

$status>$kategori[kategori]</option>";

?></select></td>
</tr>
<tr>
<td>Gambar</td>
<td> <img src="gambar/<?php echo $berita['gambar']; ?>" width="70"
height="50"><input type="file" name="gambar"></td>

</tr>
<tr>
<td>Teks</td>
<td><textarea name="teks"><?php echo $berita['teks_berita']; ?></textarea></td>
</tr>
<tr>
<td><button type="submit"> Simpan </button></td>
<td><button type="button"
onClick="location=('admin.php?tampilan=kelola_berita')"> Kembali
</button></td>
</tr>
</table>

72
5. Buat halaman kelola_iklan.php

73
$n=1;

$query=mysql_query("select* from iklan order by

id_iklan desc");

while($iklan=mysql_fetch_array($query)){

?>

<tr>
<td><?php echo $n; ?></td>
<td><?php echo $iklan['nm_perusahaan']; ?></td>
<td><?php echo $iklan['isi_iklan']; ?></td>
<td><?php echo "<img src=gambar/$iklan[gambar] width='300px'>"; ?></td>
<td><?php echo $iklan['email']; ?></td>
<td><?php echo $iklan['link']; ?></td>
<td><?php echo tgl_ina3($iklan['tgl_mulai']); ?></td>
<td><?php echo tgl_ina3($iklan['tgl_akhir']); ?></td>
<td><?php echo rupiah($iklan['hargasewa']); ?></td>
<td><?php echo $iklan['lamasewa'] . " hari"; ?></td>
<td><?php echo rupiah($iklan['totalharga']); ?></td>
<td><?php echo status($iklan['aktif']); ?></td>
<td width="18%"><?php echo "<a
href=admin.php?tampilan=edit_iklan&id_iklan=$iklan[id_iklan]> <button> Edit
</button></a>";
?></td>
<td width="18%"><?php echo "<a
href=perintah/kelola_iklan.php?aksi=hapus&id_iklan=$iklan[id_iklan]> <button> Hapus
</button></a>"; ?></td>
</tr>

<?php
$total=$total+$iklan['totalharga'];

74
6. Buat halaman tambah_iklan.php

<form action="perintah/kelola_iklan.php?aksi=tambah"
method="post"

75
</tr>
<tr>
<td>Link</td>
<td><input type="text" name="link" value="http://" required></td>
</tr>
<tr>
<td>Teks Iklan</td>
<td><label>
<textarea name="teks_iklan" id="textarea" cols="45" rows="5"
required></textarea>
</label></td>
</tr>
<tr>
<td>Tgl Mulai</td>
<td><label>
<input type="date" name="tgl_mulai" id="tmulai" placeholder='yyyy-mm-dd'
required>

</label></td>
</tr>
<tr>
<td>Tgl Akhir</td>
<td><input type="date" name="tgl_akhir" id="takhir"
placeholder='yyyy-mm-dd' required></td>

</tr>
<tr>
<td>Harga Sewa</td>

76
7. Buat halaman edit_iklan.php

<form action="perintah/kelola_iklan.php?aksi=edit" method="post"

enctype="multipart/form-

77
<table width="50%" border="1" cellspacing="0" cellpadding="0">

<tr>

<td>Nama perusahaan</td>

<td><input type="text" name="nm_perusahaan" required value="<?php echo

$iklan['nm_perusahaan']; ?>"></td>

</tr>

<tr>

<td>Email</td>

<td><input type="email" name="email" required value="<?php echo

$iklan['email']; ?>"></td>

</tr>

<tr>

<td>Link</td>

<td><input type="text" name="link" required value="<?php echo $iklan['link']; ?>"

></td>

</tr>
<tr>
<td>Teks Iklan</td>
<td><label>
<textarea name="teks_iklan" id="textarea" cols="45" rows="5" required><?php
echo
$iklan['isi_iklan']; ?></textarea>
</label></td>
</tr>
<tr>
<td>Tgl Mulai</td>
<td><label>

78
 <input type="date" name="tgl_mulai" id="tmulai" placeholder='yyyy-
mm-dd' required value="<?php echo $iklan['tgl_mulai']; ?>">

</label></td>
</tr>
<tr>
<td>Tgl Akhir</td>
<td><input type="date" name="tgl_akhir" id="takhir" placeholder='yyyy-
mm-dd' required value="<?php echo $iklan['tgl_akhir']; ?>"></td>

</tr>
<tr>
<td>Harga Sewa</td>
<td><input type="text" name="hargasewa" required value="<?php echo
$iklan['hargasewa'];
?>" ></td>
</tr>
<tr>
<td>Gambar</td>
<td> <img src="gambar/<?php echo $iklan['gambar']; ?>" width="70"
height="50"> <input type="file" name="gambar"></td>

</tr>
<tr>
<td><button type="submit"> Simpan </button></td>
<td><button type="button"
onClick="location=('admin.php?tampilan=kelola_iklan')"> Kembali
</button></td>
</tr>

79
 8. Buat halaman kelola_anggota.php

if($anggota['aktif']=='1')

href=perintah/kelola_anggota.php?aksi=blokir&id_anggota=$anggota[id_anggota]
> <button>

href=perintah/kelola_anggota.php?aksi=aktifkan&id_anggota=$anggota[id_anggota]>
<button>

80
B. File admin.php

Tulislah skrip berikut pada bloknya masing-masing :

1. Skrip 1 halaman admin.php

error_reporting(0);

$id_admin=$_SESSION['id_admin'];

2. Skrip 2 halaman admin.php

3. skrip 3 halaman admin.php

4. Skrip 4 halaman admin.php

Sekarang, preview di browser dg mengetik portalberita/loginadmin.php

81
PR/Quiz/Latihan/

Dari menu admin, buatlah module

kategori Dimana admin dapat melakukan

1. kelola kategori (tambah, lihat, edit, hapus)

82
 Bab 5
Pengenalan Jquery

1. Pengenalan jquery
jQuery adalah library JavaScript yang paling populer saat ini. jQuery merupakan
sebuah perangkat lunak bebas sumber terbuka yang berada di bawah lisensi MIT.
Sintaks jQuery dirancang sedemikian rupa untuk memudahkan pengembang website
dalam menavigasi dokumen, menyeleksi elemen-elemen DOM, menerapkan animasi,
mengaplikasikan events, serta membangun aplikasi AJAX.
jQuery juga memampukan developer menciptakan berbagai plugin berbasis library
JavaScript. Dengan plugin-plugin tersebut, pengembang situs web mampu menyusun
sejumlah abstraksi untuk interaksi dan animasi sederhana, juga beberapa efek yang
cukup kompleks dan berbagai widget yang dapat dikonfigurasikan.
Karakter library JavaScript yang modular mendukung pengembangan laman web
dinamis dengan berbagai fitur dan aplikasi berbasis web (web app).
Fitur-fitur inti jQuery – meliputi penyeleksian, traversal, dan manipulasi elemen-
elemen DOM – dimampukan oleh sebuah selector engine (dinamai Sizzle mulai versi
1.3), telah mewujudkan suatu gaya pemrograman baru yang memadukan antara
algoritma dan struktur data DOM. Gaya ini telah mempengaruhi arsitektur dari
framework JavaScript lainnya seperti YUI v3 dan Dojo, dan di kemudian
menstimulasi pengembangan Selectors API standar.

Microsoft dan Nokia membundel jQuery pada platform mereka. Microsoft

memasukkannya dalam Visual Studio untuk digunakan dalam framework ASP.NET
AJAX dan ASP.NET MVC, sedangkan Nokia mengintegrasikannya dalam platform
pengembangan widget Web Run-Time. jQuery juga mulai dipakai pada MediaWiki
sejak versi 1.16.
Situs resmi jQuery beralamat di jquery.com. Pengembangannya dikelola oleh jQuery
Foundation yang berada di jquery.org. Library ini bisa diunduh di
laman jquery.com/download, atau diterapkan melalui sejumlah CDN termasuk
Google jQuery CDN.

83
 jQuery, pada intinya, adalah sebuah library yang berfungsi untuk memanipulasi
DOM. DOM merupakan representasi struktural dari seluruh elemen pada sebuah
laman web.
Keberadaan jQuery menjadikan kerja pencarian, penyeleksian, dan manipulasi
elemen-elemen DOM menjadi simpel dan mudah. Sebagai contoh, jQuery bisa
dipergunakan untuk menemukan sebuah elemen dalam dokumen yang memiliki
properti tertentu (misalnya: elemen dengan tag `h1`), kemudian mengubah satu atau
beberapa atributnya (misalnya: warna, visibilitas), atau menjadikan elemen tersebut
responsif terhadap suatu event (misalnya: klik mouse).
Selain penyeleksian dan manipulasi DOM dasar, jQuery menyajikan sebuah
paradigma baru pada penanganan event oleh JavaScript. Penugasan event dan
pendefinisian fungsi event callback dapat dilakukan dengan satu langkah dalam satu
lokasi di dalam kode.
jQuery juga dikembangkan untuk mendayagunakan berbagai fungsionalitas
JavaScript yang paling sering dipakai (misalnya: fade in atau fade out ketika
menentukan visibilitas elemen, juga bermacam animasi yang dimunculkan dengan
memanipulasi properti-properti CSS).

Keuntungan dari pemanfaatan jQuery antara lain:

 Memisahkan JavaScript dan HTML → Tanpa menggunakan atribut-atribut HTML

untuk memanggil fungsi Javascript dalam penanganan event, jQuery bisa
dipergunakan untuk menangani event dengan script JS saja.

 Singkat dan Jelas → jQuery mengutamakan penulisan kode yang singkat dan jelas
melalui berbagi fitur seperti fungsi-fungsi yang dapat dirangkaikan (chain-able) dan
nama-nama fungsi yang pendek.

 Mengatasi masalah kompatibilitas antar-browser → JavaScript engine pada

berbagai browser memiliki perbedaan satu sama lain, sehingga script yang berjalan
pada suatu browser bisa gagal pada browser lainnya. jQuery mengatasi segala
inkonsistensi antar-browser tersebut dan menyajikan antarmuka yang konsisten
bekerja pada semua browser.
 Ekstensibel → jQuery menjadikan pengembangan framework sangat simpel.
Berbagai event, elemen, dan metode baru dapat dengan mudah ditambahkan dan
digunakan ulang sebagai plugin.

84
Untuk menautkan file jQuery pada server lokal, gunakan kode berikut:
<script src="jquery.js"></script>

Untuk menggunakan CDN, sisipkan kode berikut:

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

2. Gaya Penggunaan
jQuery memiliki dua gaya penggunaan:

Via fungsi $ → adalah factory method untuk obyek jQuery. Fungsi-fungsi semacam
ini, kerap disebut sebagai commands (perintah), dapat dirangkaikan (chainable) sebab
masing-masing menyajikan obyek.
Via fungsi $.-prefiks → fungsi-fungsi utilitas yang tidak dijalankan secara langsung
pada obyek.

Pada penggunaan tipikal, akses dan manipulasi atas simpul-simpul DOM diawali dengan
pemanggilan fungsi $ menggunakan string selektor CSS. Metode ini menghasilkan
sebuah obyek jQuery yang merujuk pada elemen-elemen HTML yang sesuai.

Sebagai contoh, $(“div.namaclass”) akan menghasilkan obyek dengan tipe “div” dan class
“namaclass”. Simpul ini dapat dimanipulasi dengan menyambungkan satu atau
beberapa fungsi jQuery di belakangnya

$(“button”) = menandakan semua tag button

$('button[name="x"]').= manandakan tag button dengan nama x

$(“.coba”) = titik menandakan class = misalnya, <button class=’coba’> </button>

$(“#coba”) manendakan id=misalnya, <button id=’coba’> </button>

85
Lat_jquery1.php

<!DOCTYPE html>

<html>

<head>

<script src="jquery-2.1.4.js"></script> <!-- library dari jquery -->

<script>

$(document).ready(function(){ //memulai jquery

$("#sembunyi").click(function(){ //jika elemen dg id=sembunyi diklik

$("p").hide(200); //maka tag p akan tersembunyi , dg waktu 0,2 detik

});

$("#tampil").click(function(){ //jika elemen dg id=tampil diklik maka

$("p").show(200); // maka tag p akan tampil

});

});

</script>
</head>

<body>

<p> Belajar Jquery </p> <!-- ini elemen yg menjadi objek untuk
disembunyikan/dtampilkan --
>

<button id="sembunyi"> Sembunyik an</button>

<button id="tampil"> Tampilkan !</button>

</body>

</html>

86
Latihan 2

Lat2_jquery.ph

<!DOCTYPE html>

<html>

<head>

<script src="jquery-2.1.4.js"></script> <!-- library dari jquery -->

<script>

//pada saat tag button di klik maka, akan muncul alert yg isinya itu dari id=’test’

$(document).ready(function(){

$("button").click(function(){ // bila tag button diklik , maka

alert("Nama: " + $("#test").val()); // akan memunculkan pesan yg isinya adalah isi

dari elemen dg id=test

});

});

</script>

</head>

<body>

<p>Nama: <input type="text" id="test" value="Bang Yogi "></p>

<button>Tampilkan</button>

</body>

</html>

87
Lat3_jquery.php

<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.4.js"></script> <!-- library dari jquery -->
<script>
$(document).ready(function(){ //buka jquery
$("#mulai").click(function(){ // bila id mulai diklik
$("div").animate({ // maka elemen dg tag div akan

berubah left: '250px', // kekiri sebesar 250px

opacity: '0.5',

//transparansi height:

'150px', //tinggi 150px

width: '150px' // lebar 150

px

});
});
// ini tombol kedua
$("#lagi").click(function(){ // bila id mulai diklik
$("div").animate({ // maka elemen dg tag div akan

berubah left: '350px', // kekiri sebesar 250px

opacity: '0', //transparansi, gambarnya tidak

terlihat height: '100px', //tinggi 100px

width: '100px' // lebar 100 px

});
});
});
</script>
</head>

88
<body>
<button id="mulai">Mulai</button>

<button id="lagi">Lagi</button>
<div
style="background:#FF0000;height:100px;width:100px;position:absolute;"
>Lihat aku</div>
</body>

</html>

Lat4._jquery.php

<!DOCTYPE html>

<html>

<head>

<script src="jquery-2.1.4.js"></script> <!-- library dari jquery -->

<script>

$(document).ready(function(){ // memulai jquery

$("#mulai").click(function(){ // pada saat objek dg id mulai diklik

$("#p1").css("color", "red").slideUp(2000).slideDown(2000); // objek dg id=p akan

berubah warna menjadi merah, naik keatas selama 2 detik dan turun lagi 2 detik

});

});

</script>

</head>

<body>

<p id="p1">Jquery itu menyenangkan lhoooo ! </p>

<button id="mulai">Mulai</button>

</body>

</html>

89
Lat5_jquery.php

<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.4.js"></script> <!-- library dari jquery -->
<script>
$(document).ready(function(){
//// penambahan
$("#tambah").click(function(){ // bila tag tambah diklik ,

maka var nila=$("#nila").val();

var

nilb=$("#nilb").val();

var nilc;

nilc = eval(nila)+ eval(nilb); // konversi dari string ke angka

$("#hasil").val(nilc);

});

////////////// tutup penambahan

// ini buat perkalian
$("#kali").click(function(){ // bila tag tambah diklik ,

maka var nila=$("#nila").val();

var

nilb=$("#nilb").val();

var nilc;

nilc = eval(nila)*eval(nilb);

$("#hasil").val(nilc);
});
////////////// tutup perkalian
//// ulang

90
 $("#ulang").click(function(){ // bila tag tambah diklik , maka

$("#nila").val(''); // membersihkan nilai pada form

$("#nilb").val('');

$("#hasil").val('');

});

////////////// tutup ulang

});

</script>

</head>

<body>

Input nilai A : <input type="number" name="nila" id="nila" autofocus>

<br> Input nilai B : <input type="number" name="nilb" id="nilb">

<button id="tambah">tambah</button>

<button id="kali">Kali</button>

<button id="ulang">ulang</button>

<hr>

Hasil <input type="number" name="hasil" id="hasil">

</body>

91
Daftar Pustaka

Jubilee Enterprise ,2012 Buku Pintar HTML5 + CSS3 + DreamWeaver CS6, , Elex Media
Komputindo
Sukarno Mohamad , 2006Membangun website dinamis interaktif dengan php mysql, .eska
media
Kadir Abdul 2011 Buku Pintar Jquery Dan Php Untuk Pemula, bukuseru
http://ekajogja.com/jquery-definisi-fitur-penggunaan-jquery-dalam-pengembangan-website/ 4.
w3shools .com
http://php.net/manual/en/

92