MODUL WEB PROGRAMING II - repository.bsi.ac.id · ii Kata Pengantar Puji Syukur kehadirat Tuhan...
92
i Pagei MODUL WEB PROGRAMING II Disusun Oleh: Feri Prasetyo H, Rosi Kusuma Serli, Ahmad Fauzi, Prayogi
Transcript of MODUL WEB PROGRAMING II - repository.bsi.ac.id · ii Kata Pengantar Puji Syukur kehadirat Tuhan...
i
Pag
ei
MODUL
WEB PROGRAMING II
Disusun Oleh:
Feri Prasetyo H, Rosi Kusuma Serli, Ahmad Fauzi, Prayogi
ii
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
iii
Pag
eiii
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
File Admin ................................................................................................................................ 81
iv
Latihan .................................................................................................................................. 82
Bab 5 ..................................................................................................................................... 83
Pengenalan jquery ............................................................................................................... 83
Datar Pustaka ..................................................................................................................... 92
1
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/
2
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
3
Isilah record sbb :
4
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)
5
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 :
6
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:
7
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):
8
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
9
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.
10
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 ).
11
12
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
13
Outputnya :
Clue : gunakan query query (max, min)
14
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
15
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
17
Buat halaman update.php
18
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
19
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
20
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)
21
3. Buat tablel berita dengan struktur seperti di bawah ini
Isi tabel berita sebanyak 3 record dengan masing-
masing kategori Contohnya :
22
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 :
23
Isi tabel anggota
7. Tabel Komentar
Ket : tabel ini berguna untuk menampilkan komentar . pengunjung yang dapat
mengirim komentar harus login terlebih dahulu
24
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
25
Relasinya adalah sebagai berikut :
26
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
27
Tampilan yang diharapkan adalah sebagai berikut :
A. Halaman Depan
Gambar 1 . Halaman Depan
Keteranga
n 1 :
Menu :
a. home, kategori berita, dan layanan iklan
2. Berita terbaru, sampai posting saat ini (hari, tanggal)
28
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
29
C. Halaman Mendaftar
Gambar 3 . Mendaftar
Ket : form daftar, terdafpat kode yang harus diinput dimana kode tersebut terbentuk secara
acak
30
D. Halaman Detail Berita
Gambar 4 . Detail berita
Ket : setelah login , anggota dapat mengirim komentarnya
31
A. Folder Pengaturan
1. Isi file koneksi.php adalah sebagai berikut
2. Isi file waktu.php adalah sebagai berikut
32
$data=mysql_fetch_array(mysql_query("select
nama_lengkap
echo "<script>window.alert('$msg');window.location=('$url');</script>"
header("location:$url
B. Folder fungsi
1. isi dengan file fungsi.php. Kegunaan dari file ini adalah untuk memeringkas script
yang anti dipergunakan dihalaman lain.
33
//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="<sup>Rp</sup>".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
}
34
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
35
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";}
36
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;
}
37
include "tampilan/detailberita.php";
include "tampilan/cariberita.php";
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‟].
38
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;
39
2. Buat file login.php .fungsi dari halaman ini adalah untuk melakukan pengecekan
anggota. Jika benar anggota , maka akan diberi variabal global ($_SESSION)
include
"tampilan/tambah_iklan.php";
break;
include "tampilan/edit_iklan.php";
break;
include
"tampilan/kelola_anggota.php";
break;
40
3. Buat halaman logout. Fungsi dari halaman ini adalah mencabut (unset) nilai sesi
variabel global yg sudah diset , dan membersihkannya (destroy)
$_SESSION['nama_lengkap']=$anggota['nama_lengkap'];
$_SESSION['login']=1;
header('location:../');
41
values('$nama','$email','$password',1)");
anggota(nama_lengkap,email,password,aktif)
$simpan=mysql_query("insert
4. buat halaman daftar.php
42
D. Folder tampilan
Semua file yg ada di folder ini berguna untuk view atau tampilan
1. Buat halaman home.php
43
while($berita=mysql_fetch_array($querynews)){ //memulai
perulangan
44
href="mailto:[email protected]">[email protected]</a></h3>
<h3>Kirimkan
2. Buat halaman layananiklan.php
3. Buat halaman tampiliklan.php
</li
>
45
placeholder="Password"
4. Buat halaman statuslogin.php
while($iklan=mysql_fetch_array($query)
){
46
<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> </td>
</tr>
</table>
</fieldset>
<?php } //tutup jika sudah login ?>
47
$query=mysql_query("select*from kategori");
href='index.php?tampilan=kategori&id_kategori=$kategori[id_kategori]&kategori=$kat
egori[kate
$jmlkomen=mysql_num_rows(mysql_query("select*from
5. Buat halaman menu.php
6. buat halaman cariberita.php
48
7. buat halaman beritapopuler.php
49
class='small'>".tgl_ina2($berita['tgl_posting'])."<br>Diposting
8. Buat halaman detailberita.php
50
9. Buat halaman kategori.php
".tgl_ina2($komen['tgl_komentar'])."</div>"
;
($komen[email])
$komen[nama_lengkap]
class='small'>
while($komen=mysql_fetch_array($querykomen))
a.tgl_komentar,
a.id_komentar,
a.isi_komentar,b.nama_lengkap,b.em
<br
>
51
<a href='index.php?tampilan=detailberita&id_berita=$populer[id_berita]'>
komentar $jmlkomen=mysql_num_rows(mysql_query("select*fro
m
52
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
58
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
59
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
60
session_start();
2. buat halaman kelola_berita.php
header('location:../admin.php?tampilan=kelola_berita');
61
$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
62
{
$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'"));
63
session_start();
3. Buat halaman kelola_iklan.php
rdir("../admin.php?tampilan=kelola_berit
a"); else
rdir("../admin.php?tampilan=kelola_berit
a");
64
$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
{
65
$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")
{
66
session_start();
4. Buat halaman kelola_anggota.php
rdir("../admin.php?tampilan=kelola_iklan"
); else
rdir("../admin.php?tampilan=kelola_iklan"
);
67
rdir("../admin.php?tampilan=kelola_anggota
");
rdir("../admin.php?tampilan=kelola_anggota
");
rdir("../admin.php?tampilan=kelola_anggota
");
68
<td width="6%" bgcolor="#CCCCCC">Kategori</td>
<td width="5%" bgcolor="#CCCCCC">Gambar</td>
B. folder tampilan
1. Buat halaman menuadmin.php
2. buat halaman kelola_berita.php
69
<?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>
70
<form action="perintah/kelola_berita.php?aksi=tambah"
method="post"
3. Buat halaman tambah_berita.php
71
<form action="perintah/kelola_berita.php?aksi=edit" method="post"
enctype="multipart/form-
4. Buat halaman edit_berita.php
72
<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>
73
5. Buat halaman kelola_iklan.php
74
$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'];
75
<form action="perintah/kelola_iklan.php?aksi=tambah"
method="post"
6. Buat halaman tambah_iklan.php
76
</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>
77
<form action="perintah/kelola_iklan.php?aksi=edit" method="post"
enctype="multipart/form-
7. Buat halaman edit_iklan.php
78
<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>
79
<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>
80
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>
81
error_reporting(0);
$id_admin=$_SESSION['id_admin'];
B. File admin.php
Tulislah skrip berikut pada bloknya masing-masing :
1. Skrip 1 halaman admin.php
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
82
PR/Quiz/Latihan/
Dari menu admin, buatlah module
kategori Dimana admin dapat melakukan
1. kelola kategori (tambah, lihat, edit, hapus)
83
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.
84
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.
85
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>
86
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>
87
Latihan 2
Lat2_jquery.ph
p
<!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>
88
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>
89
<!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>
Lat4._jquery.php
<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>
90
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
91
$("#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>
92
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/
