02'8/

'(9(/23(5
3(052*5$0$1:(%/$1-87$1
DAFTAR ISI
PELATIHAN DEVELOPER
(PEMROGRAMAN WEB - LANJUTAN)

Modul 1 Pengenalan Web

Modul 2 Gambaran HTML

Modul 3 Overview PHP

Modul 4 Overview Database

Modul 5 Object Oriented Programming (OOP)

Modul 6 Magic Method

Modul 7 Inheritance dan Scope

Modul 8 JQuery

Modul 9 Membangun Website dengan Menggunakan OOP

Pelatihan Developer
(Pemrograman Web - Lanjutan)
Local Training for IT Capacity Building
for Central and Local Government
 Local Training for IT Capacity Building
for Central & Local Government

Pengenalan Web

Pemrograman Web - Lanjutan

MODUL 1

Ikhtisar Modul

Gambaran Aplikasi Web

Arsitektur Aplikasi Web
Teknologi Web

2
Pentingnya Web Development

Internet ada dimana-mana

–Dapat diakses melalui mobile dan desktop
–Konsumen/pengguna mempunyai kebutuhan untuk mencari bisnis anda
–Membangun kepercayaan dalam organisasi Anda dan meningkatkan
reputasi Anda
–Website anda adalah marketing anda yang pertama (first round-the-clock
sales person)!
Website
–Membuat jejak pertama kali dari bisnis anda
–Membuat hal tersebut sesuai dengan kebutuhan dari target sasaran anda
–Mencerminkan keahlian dan reputasi anda
–Dapat membawa bisnis ke beberapa bagian dunia
–Ajakan Anda untuk bertindak - Mendorong pengguna untuk memberikan
bisnis

Evolusi Web

Halaman web statik

–Halaman web statik menguasai dunia. Kami menyukainya dan
membuat DotCom berkembang pesat.

4
Evulusi Web

Website interaktif
–Website interaktif memungkinkan pengguna dapat berkomunikasi
dengan sites dengan memasukkan konten.

Evolusi Web

Website Reaktif (Reactive Web Application)

–Aplikasi web reaktif dapat berinteraksi dengan pengguna dan
menyesuaikan diri dengan kebutuhan resolusi dan ukuran layar

6
Aplikasi Web

Sebuah aplikasi web adalah aplikasi yang diakses oleh

pengguna melalui jaringan seperti internet atau intranet. Ini bisa
menjadi situs web, platform messaging, mesin pencari, layanan
web, dll
Terdapat dua jenis yang serupa tetapi dua jenis tersebut
mendenifinisikan jenis web aplikasi:

Aplikasi Web

8
Aplikasi Web

Arsitektur Web

Web merupakan sebuah arsitektur dua-tier.

–Sebuah web browser menampilkan konten informasi
–Sedangkan sebuah server yang melakukan transfer informasi ke
client.

10
Ekstensi Arsitektur Web

CGI extends arsitektur three-

tier dengan menambahkan
back-end server yang
menyediakan layanan ke
server Web.

11

Arsitektur Website Database-driven

12
Proses di sisi Server

Pemrosesan yang dilakukan oleh Web server:

–Penerima permintaan halaman web dinamis
–Melakukan semua pemrosesan yang diperlukan untuk membuat
halaman web dinamis
–Mengirimkan halaman web yang sudah selesai di proses ke client dan
di tampilkan pada browser di client

13

Pemrosesan di sis Client

Pemrosesan di sisi client

–Beberapa proses membutuhkan untuk dieksekusi oleh browser, Some
processing needs to be “executed” by the browser, baik untuk
membentuk permintaan untuk halaman Web dinamis atau untuk
membuat atau menampilkan halaman Web dinamis.
–Seperti, kode Javascript untuk memvalidasi inputan user

14
Server dan Client side processing

Server-side processing Client-side processing

–PHP –CSS
–ASP
–ASP.NET
–HTML
–Perl –JavaScript
–J2EE –Adobe Flex
–Python, e.g. Django
–Ruby, e.g. Ruby on Rails
–Microsoft Silverlight
–ColdFusion

15

Teknologi Web

16
AJAX

Ajax bukan hanya sebuah teknologi. Namun terdiri dari

beberapa teknologi, dimana tiap teknologi berkembang pesat
didalam dirinya sendiri, dan datang secara bersamaan dengan
cara baru yang powerful. Ajax mencakup:
–XHTML dan CSS;
–Document Object Model;
–XML and XSLT;
–XMLHttpRequest;
–JavaScript

17

JQuery

jQuery merupakan sebuah libraray javascript.

jQuery sangat menyederhanakan pemrograman javascript.
jQuery mudah untuk dipelajari.

18
Web Framework

Sebuah web framework atau web application framework

merupakan sebuah software framework yang didesain untuk
mendukung pembangunan aplikasi web termasuk web services,
web resources dan web API.
Web frameworks bertujuan untuk meringankan overhead yang
terkait dengan kegiatan umum dilakukan dalam pengembangan
web.
Sebagai contoh, banyak framework web menyediakan library
untuk akses database, framework template dan manajemen
sesi, dan mereka sering mempromosikan penggunaan kembali
kode.
Meskipun mereka sering menargetkan pengembangan website
dinamis, mereka juga berlaku untuk website statis.

19

Web Services

Web Service adalah sistem perangkat lunak yang dirancang untuk

mendukung interaksi mesin-ke-mesin melalui jaringan.
Web service seringkali hanya Internet Application Programming
Interfaces (API) yang dapat diakses melalui jaringan.
Web Service merupakan platform-independen dan bahasa-independen,
karena mereka menggunakan bahasa XML standar.
Kebanyakan Web Services menggunakan HTTP untuk transmisi pesan
(seperti permintaan layanan dan respon).
Style yang digunakan
–RPC
–SOAP
–REST

20
XML (eXtensible Markup Language)

XML merupakan sebuah kesepakatan universal markup meta-language

yang utamanya digunakan untuk pertukanran informasi
Dua blok utama yang membangun XML adalah elemen dan atribut
– Elemen merupakan tag dan memiliki nilai
– Elemen merupakan struktur sebagai sebuah pohon
– Alternatifnya, elemen mungkin memiliki atribut yang berperan juga sebagai data
– Atribut membantu anda untuk memberikan lebih banyak makna dan
menggambarkan elemen anda lebih efisien dan jelas.

21

JSON (JavaScript Object Notation)

JSON merupakan sebuah lightweight computer data

interchange format.
JSON berlandaskan pada sebuah subset dari bahasa
pemrograman javascript
Hal ini dianggap sebagai format data bahasa-
independen.
Ini berfungsi sebagai alternatif penggunaan format XML

22
Akhir Modul 1
 Local Training for IT Capacity Building
for Central & Local Government

Gambaran HTML

Pemrograman Web - Lanjutan

MODUL 2

Ikhtisar Modul

Dasar HTML
Membuat halaman HTML sederhana

2
 HTML

HTML – Hyper Text Markup Language

HTML dokumen yang menggambarkan halaman web (Halaman

Web Statis)

Tag HTML adalah kata kunci dikelilingi oleh sudut kurung seperti
<html>

Tag HTML biasanya datang berpasangan seperti <b> dan </ b>

Tag pertama dalam pasangan adalah tag awal (membuka tag),

tag kedua adalah tag akhir (closing tag)

Implementasi

Dimana kita bisa menulis kode :

–Editor Teks
• Wordpad (di Windows OS)
• Gedit Text Editor (Ubuntu di LINUX)
–FrontPage atau Dreamweaver

Dimana mengeksekusinya:
–Klik dua kali file HTML. (atau)
–Klik Kanan – Buka dengan Internet Explorer

4
 Kode Sederhana - 1

<html>

<body>

<h1>First Planet</h1> First Planet

<h6>First Planet</h6>
First Planet
</body>

</html>

<html> .... </html> Menjelaskan halaman web

<body> ..... </body> merupakan konten halaman yang akan terlihat

Tag Link
Html Links :
Html links didefinisikan dengan tag <a>
Sintak : <a href="http://www.gmil.com">Gmail</a>
Contoh :
<html>
<body>

<a
href="http://www.gmail.com">Gmail</a
>

</body>
</html>
Jika anda klik link ini akan
Gmail merujuk ke account gmail

6
 Tag Image

Gambar HTML :
Gambar HTML didefinisikan dengan tag <img>.
Sintak : <img src "123.jpg" width="104" height="142" />
Contoh :
<html>
<body>

<img src="word.jpg" width="104" height="142" />

</body>
</html>

HTML Garis
HTML Rules (Lines) :
tag <hr /> digunakan untuk membuat garis horizontal.

Contoh:

<html><body>
Exnora
<h3>Exnora</h3>
<hr />
Safety Exnora
<h3>Safety Exnora</h3>

</body></html>

8
 Komentar HTML
Komentar HTML :
Komentar dapat disisipkan pada kode HTML agar lebih mudah dibaca dan dipahami.
Komen akan diabaikan oleh browser dan tidak akan ditampilkan.

Sintak : <!-- some text →

Contoh :

<html><body> Plant Trees

<!--It will not be displayed-->
<h3>Plant Trees </h3>

</body></html>

Format Text HTML

• Beberapa tag format teks diantaranya:
1. b-Bold,
<html>
2. i-Italic, <body>
3. code-Computer code, <b>Confidence</b><br />
4. sub-Subscript <big>Hardwork</big><br />
5. sup-Superscript <i>Preseverance</i><br />
<code>Samsung CRT</code><br />
This is_subscript<br />
This is^superscript
</body>
</html>

10
 Sytle Atribut HTML
Tag Deskripsi
–<center> –Mendefinisikan konten ke tengah
–<font> –Mendefinisikan font HTML
–<s> and <strike> –Mendefinisikan teks strikeout
–<u> –Mendefinisikan teks garis bawah
Atribut Deskripsi Atribut
–Align –Mendefinisikan alignment teks
–Bgcolor –Mendefinisikan warna background
–Color –Mendefinisikan warna

11

Contoh Style
<html>
<body style="background-color:yellow">
<h1 style="text-align:center">NATURE</h1>

<p style="font-family:Purisa;color:red">Plant Tree</p>

<p style="font-family:times;color:red">Save Our Generation</p>

<p style="font-size:40">Value Our Environment</p>

</body>
</html>

12
Tabel HTML
Tabel didefinisikan dengan tag <table>.
Sebuah tabel dibagi dalam beberapa baris (dengan tag <tr>),
Tiap baris dibagi kedalam cell data (dengan tag <td>). Huruf td
kependekan dari "table data," yang merupakan isi sel data.
Heading pada sebuah tabel didefinisikan dengan tag <th>.

<table border="1">
<tr> <td>row 1, cell 1</td> row1,cell1 row1,cell2
<td>row 1, cell 2</td> </tr>
<tr> <td>row 2, cell 1</td>
row2,cell1 row2,cell2
<td>row 2, cell 2</td></tr>
</table>

13

Fitur Tabel
1.Tabel dengan sebuah caption :

<caption>My Caption</caption>

2. Sel tabel yang mencakup lebih dari satu baris / kolom:

<th colspan="2">Telephone</th>

<th rowspan="2">Telephone:</th>

3.Cell padding :

<table border="1" cellpadding="10">

4.Cell spacing :

<table border="1" cellspacing="10">

5.Menambahkan sebuah warna background atau sebuah gambar

background pada sebuah tabel :

<table border="1" bgcolor="red">

14
Daftar HTML
HTML mendukung urutan, tidak berurutan dan daftar definisi.

Ordered Lists :

Ordered list juga daftar item. Daftar item ditandai dengan angka.

Sebuah ordered list dimulai dengan tag<ol>. Tiap item list dimulai
dengan tag <li>.

Unordered Lists :

Unordered list adalah daftar item. Daftar item ditandai dengan

bullet (biasanya lingkaran hitam kecil)..

Unordered list dimulai dengan tag <ul>. Setiap item daftar dimulai
dengan tag <li> .

15

Definition Lists :

Sebuah daftar definisi bukan merupakan sebuah daftar dari satu item. Ini adalah daftar item (
istilah ) , dengan deskripsi setiap item ( istilah ) .
Sebuah daftar definisi dimulai dengan sebuah tag <dl> (definition list).

Tiap istilah dimulai dengan sebuat tag <dt> (definition term).

Tiap deskripsi dimulai dengan sebuah tag <dd> tag (definition description).

Unordered List : Ordered List : Definition List :

1.Fail
ThinkPositve Success
2.Work Hard Fail First,
Never Depressed Happy
3.Win Smile Always
Keep Smiling
4.Teach

16
Form HTML
Form HTML digunakan untuk memilih berbagai jenis input pengguna.

Sebuah form merupakan sebuah area yant terdiri dari elemen form.

Elemen form merupakan elemen yang mengijinkan user untuk

memasukkan informasi seperti,

1. text fields,

2. textarea fields,

3. drop-down menus,

4. radio buttons,

5. checkboxes,

6. Action Attribute dan Submit Button,dll.

17

Text Field

Text field digunakan ketika pengguna mengetikkan huruf, angka dll di dalam
sebuah form
Contoh
<form>

First name: <input type="text" name="firstname" /> <br />

Last name: <input type="text" name="lastname" />

</form>

Hasil : First name :

Last name :

18
 Radio & Check Box
Radio Buttons :

<form> Male

<input type="radio" name="sex" value="male" /> Male <br /> Female

<input type="radio" name="sex" value="female" /> Female

</form>

Checkboxes :

<form>

Bike: <input type="checkbox" name="vehicle" value="Bike"/> <br />

Car: <input type="checkbox" name="vehicle" value="Car"/><br />

</form> Bike

Car
19

Form Action Attribute

Action Attribute dan Submit Button :

–Ketika user menekan tombol submit, conten dari form akan dikirim ke server

–When the user clicks on the "Submit" button, the content of the form is sent to
the server.

–Form action atribut mendefiniskan nama sebuah file dimana konten tersebut
akan dikirim

–Hal tersebut tergantung dengan file PHP

Contoh:
<form name="input" action="html_form_submit.phpp" method="get">

Username:<input type="text" name="user"/>

<input type="submit" value="Submit" />

</form>

20
Layout HTML

Sebuah bagian dari halaman diformat dengan dua kolom

seperti halnya halaman pada koran
Trik tersebut menggunakan sebuat tabel tanpa bingkai,
dan mungkin dengan sedikit ekstra cell-padding
Tidak peduli sebanyak apa teks yang ada di halaman
tersebut, akan tetap berada di dalam bingkai kolom

21

Contoh: Layout HTML

<table border="0" width="100%" cellpadding="10">
<tr>
<td width="50%" valign="top">
This is the Time to save Our Earth to Our Future Generation.So everybody
shoud be a Volunteer.
</td>
<td width="50%" valign="top">
For smooth relationship between to us & nature We should do some
activities to Preserve our Earth.
</td>
</tr>
</table>

This is the Time to save Our For smooth relationship between to us

Earth to Our Future & nature We should do some
Generation.So everybody shoud activities to Preserve our Earth.
be a Volunteer.

22
 Frame HTML

Dengan frame, anda dapat menampilkan lebih dari satu dokumen HTML di
jendela browser yang sama
Tiap dokumen HTM di panggil pada sebuah frame, dan tiap frame berdiri
sendiri dari lainnya
Tag Frameset
–Tag <frameset> mendefinisikan bagaimana membagi jendela dalam frame

–Tiap frameset mendefinisikan sekumpulan baris atau kolom

–Nilai dari baris/kolom mengindikasikan jumlah dari area tampilan tiap baris atau kolom
yang menempati.

23

Frameset Vertical & Horizontal

<html>
<frameset cols="30%,40%,30%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>

<html>
<frameset rows="30%,40%,30>
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>

24
Membuat Halaman HTML Sederhana

Menggunakan Dasar HTML, sekarang anda dapat membuat

sebuah halaman HTML sederhana. Ikuti skrip HTML dibawah
ini !
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<hr>
<p>Paragraph 1 this is content. this is content.this is content.this is content.this
is content.this is content.this is content.this is content.this is content.this is
content.this is content.this is content.this is content.</p>
<p>Paragraph 2 this is content. this is content.this is content.this is content.this
is content.this is content.this is content.this is content.this is content.this is
content.this is content.this is content.this is content.</p>
</body>
</html>

25

Akhir Modul 2
 Local Training for IT Capacity Building
for Central & Local Government

Overview PHP

Pemrograman Web - Lanjutan

MODUL 3

Ikhtisar Modul

Dasar PHP
Variabel dan Konstanta
PHP Flow Control
Array

2
Three-tiered Web Site: LAMP

Client example request

Server
User-agent: Firefox GET / HTTP/1.1 Apache HTTP Server
Host: www.tamk.fi
User-Agent: Mozilla/5.0 (Mac..)
...

response PHP

Database
MySQL

Teknik Server Side

Server side scripting membutuhkan instalasi pada sisi server

Biasanya disisi client hanya xhtml dan tidak pedulu apakan xhtml
diproduksi oleh sisi server
Tidak membutuhkan instalasi atau add-ons pada client

4
Teknik Server Side

PHP
Java EE: Servlet, JSP
.NET
CGI / Perl (Very old)
Ruby
…

Teknik Client Side

Membutuhkan dukungan teknik di sisi client

JavaScript, Applet, Flash…

6
Pengenalan PHP

PHP merupakan sebuah bahasa scripting.

Awalnya didesain untuk memproduksi halaman web dinamis
Muncul pada tahaun 1995
Group PHP bertanggung jawab untuk bahasa, tanpa spesifikasi
normal
Free software
Berjalan hampir di semua platform dan sistem operasi
URL: http://www.php.net

Response

8
Pengenalan Sintak PHP

PHP memiliki sintak yang sangat mudah, jika anda sudah biasa
dengan bahasa C
Memiliki struktur yang sama dengan bahasa pemrograman lain yang
anda gunakan
PHP didesain untuk ditampilkan ke browser, tetapi memungkinkan
juga dilakukan di aplikasi CLI

Contoh

<?php
print "What is your name?\n";
$name = trim(fgets(STDIN));
print "Hello " . $name;
?>

10
Variabel

Variabel di php direpresentasikan dengan sebuah tanda dolar

PHP medukung delapan tipe
–boolean, integer, float, double, array, object, resource dan NULL

11

Contoh
<?php
$a_bool = TRUE; // a boolean
$a_str = "foo"; // a string
$a_str2 = 'foo'; // a string
$an_int = 12; // an integer

echo gettype($a_bool); // prints out: boolean

echo gettype($a_str); // prints out: string

// If this is an integer, increment it by four

if (is_int($an_int)) {
$an_int += 4;
}

// If $bool is a string, print it out

// (does not print out anything)
if (is_string($a_bool)) {
echo "String: $a_bool";
}
?>

12
Penamaan Variabel

Case-sensitivity
Diawali dengan hrufu atau _
Setelah itu anda dapat memberikan angka, huruf dan _
–$var = 'Bob';
–$Var = 'Joe';
–print "$var, $Var";
–$4site = 'not yet';
–$_4site = 'not yet';

13

Konstanta

Anda tidak dapat merubah nila konstanta setalah dideklarasikan

–define(CONSTANT, "value");
–print CONSTANT;

14
Magic Constants

PHP memiliki banyak cara mendefinisikan variabel

Dan juga pendefinisian konstanta:
–__LINE__
–__FILE__
–__FUNCTION__
–__CLASS__
–__METHOD__

Referensi:
http://fi.php.net/manual/en/language.constants.predefi
ned.php

15

Scope

<?php
$a = "Pekka";
print ”My name is " . $a;
?>

16
Scope

<?php
$a = "Pekka";
function Test() {
print $a;
}
print ”My name is ”;
Test();
?>

17

Scope

<?php
$a = "Pekka";
function Test() {
global $a;
print $a;
}
print ”My name is ”;
Test();
?>

18
Struktur Kontrol

If, else, elseif, switch

while, do-while, for
foreach
break, continue

19

Strings

Kutip satu: 'this is a $variable'

Kutip dua: "this is a $variable"
Heredoc:
–$str = <<<EOD
–Example of string
–spanning multiple lines
–using heredoc syntax.
–EOD;

20
Memodifikasi String

$mj = "moi";
print $mj[0];
$mj[0] = 'x';
print $mj;
$mj = $mj . " hei";
print $mj;
$mj .= " terse";
print $mj;

21

Fungsi String

Referensi fungsi string…

–http://www.php.net/manual/en/ref.strings.php

22
Statements

Setiap statement diakhiri dengan tanda titik koma (;)

–$a = 5;
–$a = function();
–$a = ($b = 5);
–$a++; ++$a;
–$a += 3;

23

Operators

Aritmatika: +,-,*,%
Setting variabel: =
Bit: &, |, ^, ~, <<, >>
Perbandingan: ==, ===, !=, !==, <, > <=, >=

24
Ternary Operator

$variable = (1 < $x) ? 'value1' : 'value2';

Equals
if(1 < $x) {
$variable = 'value1';
}
else {
$variable = 'value1';
}

25

Operator Eksekusi

Mengeksekusi command di shell

–$result = `ls -al`;
–print $result;

Melakukan hal yang sama dengan fungsi shell_exec() -

26
Operator Logika

$a and $b
$a or $b
$a xor $b
!$a;
$a && $b;
$a || $b;

27

Operator String

Dua operator untuk string : '.' dan '.='

'.' – Menggabungkan String.
'.=' – menambahkan string di akhir.
Contoh:
$v= "Hello" . $b;
$v.= "Hello";

28
Struktur Kontrol

29

IF
<?php
if ($a > $b) {
echo "a is bigger than b";
} else {
echo "a is NOT bigger than b";
}
if ($a > $b) {
echo "a is bigger than b";
} elseif ($a == $b) {
echo "a is equal to b";
} else {
echo "a is smaller than b";
}
?>

30
While dan Do-While
<?php
$a=0;
while($a<10){
print $a; $a++;
}

$i = 0;
do {
print $i;
} while ($i > 0);
?>

31

For

for ($i = 1; $i <= 10; $i++) {

print $i;
}

32
Foreach

$arr = array(1, 2, 3, 4);

foreach ($arr as $value) {
echo $value;
}

33

Switch

switch ($i) {
case 0:
echo "i equals 0";
break;
case 1:
echo "i equals 1";
break;
case 2:
echo "i equals 2";
break;
}

34
Array

Sebuah array dapat menyimpa satu atau lebih nilai

dalam satu variabel
Tiap elemen didalam array ditetapkan ID sendiri
sehingga dapat dengan mudah diakses

$array[key] = value;

35

Jenis Array

Array Numerik
Array Asosiatif
Array Multidimensi

36
Array Numerik

- Sebuah array numerik menyimpan tiap elemen dengan

sebuah ID Key Numerik
- Tiga cara untuk menulis sebuah array numerik

37

Contoh

Otomatis
$names = array("Peter","Quagmire","Joe");
Manual
$names[0] = "Peter”;
$names[1] = "Quagmire”;
$names[2] = "Joe";

38
Contoh di PHP Script

<?php
$names[0] = "Peter";
$names[1] = "Quagmire";
$names[2] = "Joe";

echo $names[1] . " and " . $names[2] .

" are ". $names[0] . "'s neighbors";
?>

39

Array Asosiatif

Sebuah asosiatif array, setiap ID Key diasosiasikan

dengan sebuah nilai.
Ketika menyimpan data dengan nilai nama yang
ditetapkan, sebuah array numerik tidak selalu
menjadi cara terbaik untuknya.
Dengan array asosiatif kita dapat gunakan nilainya
sebagai key dan memberinya nilai.

40
Contoh

Menggunakan sebuah array untuk memberikan usia pada tiap

orang.

$ages = array(”Brent"=>42, ”Andrew"=>25, "Joshua”16=>);

$ages[’Brent'] = ”42";
$ages[’Andrew'] = ”25";
$ages['Joshua'] = ”16";

41

Contoh di PHP Script

<?php
$ages[‘Brent’] = ”42";
$ages[‘Andrew’] = ”25";
$ages[‘Joshua’] = ”16";

echo Brent is " . $ages[‘Brent’] . " years old.";

?>

42
Array Multidimensi

Pada sebuah array multidimensi, tiap elemen di array

utama dapat juga berupa array
Dan tiap elemen dalam sub-array dapat berupa sebuah
array dan seterusnya

43

Contoh
$families = array
(
"Griffin"=>array
(
"Peter",
"Lois",
"Megan" ),
"Quagmire"=>array ( "Glenn" ),
"Brown"=>array
(
"Cleveland",
"Loretta",
"Junior"
)
);

44
Hasil
Array
(
echo "Is " . $families['Griffin'][2] .
[Griffin] => Array
" a part of the Griffin family?";
(
[0] => Peter
[1] => Lois
[2] => Megan
Is Megan a part of the Griffin
)
[Quagmire] => Array family?
(
[0] => Glenn
)
[Brown] => Array
(
[0] => Cleveland
[1] => Loretta
[2] => Junior
)
)

45

Akhir Modul 3
 Local Training for IT Capacity Building
for Central & Local Government

Overview Database

Pemrograman Web - Lanjutan

MODUL 4

Ikhtisar Modul

Overview MySQL
DDL & DML
Koneksi Database

2
Konsep Database

Entitas: sebuah objek, konsep atau event.

Field (Kolom): mendekripsikan sebuah karakteristik tunggal
dari sebuah entitas.
Record (baris): sekumpulan dari field (karakteristik) yang
menjelaskan tiap entitas.
Tabel: Kumpulan dari record untuk sebuah entitas tertentu.
Database: Kumpulan dari tabel.

MySQL

MySQL merupakan relasional database manajemen sistem yang

open source
Website : www.mysql.com
Mendukung Structured Query Language (SQL) – sebuah
standarisasi untuk berkomunikasi dengan database.

4
Navigasi di MySQL

Mendapatkan daftar database yang sudah ada:

mysql> show databases;

Menentukan database untuk digunakan:

mysql> use mysql;

Mendapatkan daftar tabel dalam sebuah database\:

mysql> show tables;

Menjabarkan sebuah tabel:

mysql> describe user;

Operasi CRUD MySQL

Membuat sebuah database baru:

mysql> CREATE DATABASE cis;
Membuat sebuah tabel baru:
mysql> use cis;
-> CREATE TABLE vehicles
-> (VIN varchar(17), Year int(4), Make varchar(20),
-> Model varchar(20), Mileage int(10));
Memasukkan data kedalam tabel:
mysql> INSERT INTO vehicles (VIN, Year, Make, Model, Mileage)
-> VALUES ('8YTR754', 2002, 'Ford', 'Mustang', 21000);
Membuat sebuah Skrip SQL untuk mendeskripsikan database:
C:\mysql\bin> mysqldump –u root –p cis > cis.sql
Membuat sebuah database dan data menggunakan skrip SQL:
mysql> source C:\mysql\bin\cis.sql (NOTE: tanta titik koma)

6
Operasi CRUD MySQL

Mendapatkan semua data dari sebuah tabel:

mysql> SELECT * FROM vehicles;
+----------+-------+-----------+----------+----------+
| VIN | Year | Make | Model | Mileage |
+----------+-------+-----------+----------+----------+
| 8YTR754 | 2002 | Ford | Mustang | 21000 |
| 4GKU390 | 2001 | Chevrolet | Corvette | 35000 |
| 92A84UJ | 1998 | Dodge | Viper | 89256 |
+----------+-------+-----------+----------+----------+

Memilih sebuah baris data yang sudah ditentukan:

mysql> SELECT * FROM vehicles WHERE VIN = '8YTR754';
+----------+-------+-----------+----------+----------+
| VIN | Year | Make | Model | Mileage |
+----------+-------+-----------+----------+----------+
| 8YTR754 | 2002 | Ford | Mustang | 21000 |
+----------+-------+-----------+----------+----------+

Operasi CRUD MySQL

Update semua record dalam sebuah tabel:

mysql> UPDATE vehicles SET Mileage = 25000;

Update record tertentu:

mysql> UPDATE vehicles SET Mileage = 25000
-> WHERE VIN = '8YTR754';

Update multi kolom dengan record yang sudah ditentukan:

mysql> UPDATE vehicles
-> SET Mileage = 25000, LastServiceDate = '08/30/2003'
-> WHERE VIN = '8YTR754';

8
Operasi CRUD MySQL

Hapus semua baris dalam sebuah tabel (tidak akan menghapus

tabel)
mysql> DELETE FROM vehicles;

Hapus baris yang sudah ditentukan dalam sebuah tabel

mysql> DELETE FROM vehicles
-> WHERE VIN = '8YTR754';

Menghapus tabel (menghilangkan dari database)

mysql> DROP TABLE vehicles;

Structured Query Language (SQL)

SQL merupakan sebuah standar bahasa untuk mengakses

database
Pada bagian ini akan dibahas bagaimana menggunakan SQL
untuk mengakses dan memanipulasi data seperti: MySQL, SQL
Server, Access, Oracle, Sybase, DB2, dan database system
lainnya.
Keduanya sebagai bahasa DDL dan DML.
–DDL (Data Definition Language): mendefinisikan schema dari
database.
–DML (Data Manipulation Language): didukung perintah untuk
memanipulasi databse (query, insert, update, delete).

10
Structured Query Language (SQL)

Berdasarkan aljabar relasional, tetapi tidak sepenuhnya identik.

–Relations Tables
–Tuples Rows
–Attributes Columns
Tidak seperti sebuah relasi, sebuah tabel bukan merupakan
sebuah kumpulan. Duplikat tidak secara otomatis dihilangkan.
–Hal ini untuk alasan praktis. Eliminasi duplikat tidak efisien dalam
implementasinya.
Seperti relasi, urutan baris dalam tabel tidak relevan.

11

Data Definition Language (DDL)

DDL (Data Definition Language): mendefinisikan schema dari

suatu database.
Perintah dasar DDL dalam SQL
–CREATE: untuk mendefinisikan tabel baru (untuk mendefinisikan
relasi schema)
–DROP: untuk menghapus definisi tabel (untuk menghapus relasi dari
schema)
– ALTER: untuk merubah definisi dari tabel yang sudah ada (untuk
merubah relasi schema)
–Fitur lain dari DDL
• Menentukan referensial integritas constraint (FK/ Foreign Key)
• Menentukan definisi user attributes constraints

12
Data Manipulation Language (DML)

DML (Data Manipulation Language): Mendukung perindah untuk

memanipulais database (query, insert, update, delete).
Dasar Perintah DML
– INSERT: untuk memasukkan record ke tabel
– UPDATE: untuk merubah “status” (nilai) dari baris
– DELETE: untuk menghapus baris
– SELECT: sebuah perintah query yang menggunakan relasi aljabar
seperti ekspressi
– Berbagai macam opsi disediakan untuk menghandle
penegakan/pelanggaran dari integritas constraints

13

Berbagai macam perintah SQL di MySQL

show databases;
–Menampilkan semua database pada server
show tables;
–Menampilkan semua tabel yang tersedia pada database yang terpilih
show columns from table EMPLOYEE;
drop table t_name;
–Menghapus tabel t_name
drop database db_name;
–Menghapus database db_name
load data infile f_name into table t_name;

14
Koneksi Database

Dengan PHP, anda dapat menghubungkan dan memanipulasi

database.
MySQL merupakan database yang paling populer digunakan
oleh PHP.
PHP yang digabungkan dengan MySQL merupakan cross-
platform (anda dapat mengembangkannya di windows atau
pada platform unix)

15

Koneksi PHP ke MySQL

PHP 5 dan setelahnya dapat bekerja dengan database MySQL

menggunakan:
MySQLi extension ("i" kependekan dari improved)
PDO (PHP Data Objects)
Pada versi sebelumnya PHP menggunakan ekstensi MySQL
extension. Namun, ekstensi ini sudah ditinggalkan pada tahun
2012

16
Gunakan MySQLi atau PDO?

Keduanya MySQLi dan PDO memiliki keuntungan masing-masing:

PDO dapat bekerja pada 12 database system yang berbeda, sedangkan
MySQLi hanya akan bekerja pada database MySQL
Sehingga, jika anda akan merubah project untuk menggunakan database
lain PDO mempermudah prosesnya. Anda hanya merubah string koneksi
dan sedikit query. Dengan MySQLi anda akan membutuhkan penulisan
kode ulang termasuk query
Keduanya adalah berorientasi objek, tetapi MySQLi juga menggunakan
sebuah prosedur API
Keduanya mendukung Prepared Statement. Prepared Statement
melindungi dari SQL Injection dan sangat penting untuk keamanan
aplikasi web

17

Sintak MySQLi dan PDO

Terdapat tiga cara untuk bekerja dengan PHP dan MySQL:

–MySQLi (object-oriented)
–MySQLi (procedural)
–PDO

18
Membuka Koneksi ke MySQL

MySQLi Object-Oriented

19

Membuka Koneksi ke MySQL

Catatan pada contoh berorientasi objek di atas: $connect_error

rusak sampai PHP 5.2.9 dan 5.3.0. Jika Anda perlu untuk
memastikan kompatibilitas dengan versi PHP sebelum 5.2.9
dan 5.3.0, menggunakan kode berikut sebagai gantinya:

20
Membuka Koneksi ke MySQL

MySQLi Procedural

21

Membuka Koneksi ke MySQL

PDO

22
Membuka Koneksi ke MySQL

Perhatikan bahwa dalam contoh di atas PDO kami juga telah

ditentukan database (myDB). PDO membutuhkan database
yang valid untuk terhubung ke. Jika ada database yang
ditentukan, eksepsi dilemparkan.
Satu manfaat besar dari PDO adalah bahwa ia memiliki kelas
pengecualian untuk menangani masalah yang mungkin terjadi
dalam query database kami. Jika eksepsi dilemparkan dalam
try {} blok, script berhenti mengeksekusi dan mengalir langsung
ke tangkapan pertama () {} blok.

23

Menutup Koneksi MySQL

Sambungan akan ditutup secara otomatis ketika script berakhir.

Untuk menutup sambungan sebelumnya, gunakan berikut:
MySQLi Object-Oriented

MySQLi Procedural

PDO

24
Akhir Modul 4
 Local Training for IT Capacity Building
for Central & Local Government

Object Oriented Programming (OOP)

Pemrograman Web - Lanjutan

MODUL 5

Ikhtisar Modul

Teori Object Oriented Programming (OOP)

Class dan Object
Properti Object
Method/Fungsi

2
Apa Object Oriented Programming ?

• Object-Oriented Programming (OOP)/ Pemrograman Berorientasi

Objek merupakan sebuah teknik pendekatan untuk membangun
Software.
• Berdasarkan pada konsep dari class dan objek yang digunakan untuk
memodelkan entitas sebenarnya pada dunia nyata.
• Object Oriented Program
• Terdiri dari sebuah group dari objek
• Objek bertukar pesan, dengan tujuan untuk mencapai tujuan bersama
• Diimplementasikan dalam bahasa berorientasi objek

OOP dalam sebuah Nutshell

• Sebuah program model dunia dari interaksi objek

• Objek membuat objek lain dan mengirimkan pesan ke yang lainnya
• Setiap Objek memiliki sebuah class
• Sebuah class mendefinisikan properti dari objek
• Tipe data dari sebuah objek adalah class tersebut

• Programmer menulis class (dan menggunakan kembali class

yang sudah ada)

4
Apa yang OOP klaim untuk ketenarannya ?

• Lebih cocok untuk team development

• Memfasilitasi utilisasi dan membuat komponen software
dapat digunakan kembali
• Lebih Mudah untuk Pemrograman GUI
• Lebih Mudah Perawatan Software

• Semua bahasa pemrograman modern berorientasi objek:

Java, C#, PHP, Perl, C++, ...

OOP di PHP

OOP pertama kali dikenalkan pada PHP3, tetapi dengan fitur

yang sangat dasar.
PHP4 diluncurkan, Fitur Object Oriented lebih matang dengan
peningkatan performansi.
Tetapi, kemudian team inti PHP menulis ulang inti engine dan
mengeluarkan PHP5 dengan lebih lengkap dengan model objek
baru

6
 Gaya Coding Procedural vs OO

<?php <?php
$user_input = $POST[„field‟]; $input_filter = new filter();
$filtered_content = filter($user_input); //user $input_filter ->filter_user_input();//filter the
input filtering) user inputs
Mysql_connect(“dbhost”,”dbuser”,”dbpassw $db = new dal(“mysql”); //data access layer
ord”);//database
$db->connect($dbconfig); //we wre using
Mysql_select_db(“dbname”); mysql
$sql = “some query”; $result = $db->execute($sql);
$result = mysql_query($sql); ReportGenerator::makereport($result);
//process data
While ($data = mysql_fetch_assoc())
$model = new Postmodel($filter-
{
>get_filtered_content());
Process($data);
$model->insert();
}
?>
process($data);
?>

Keuntungan dari OOP

Reusability
Refactoring
Extensible
Maintenance
Efficiency

8
Perbedaan dari OOP dalam PHP4 dan PHP5

Dalam PHP4 semuanya terbuka, anda tidak dapat menggunakan

public, private atau protected.
Dalam PHP4 anda dapat mencari interface tetapi tidak kata kunci
abstract atau final.
Dalam PHP4 disana tidak ada multi inheritance untuk interface.
Dalam PHP4, hampir semuanya statis.
Tidak ada berbasis class konstanta dalam PHP4. Tidak ada statik
properti di objek pada PHP4, dan tidak ada destructor dalam objek
PHP4.
Setiap kali sebuah objek di copy, hal itu salinan biasa dari objek
tersebut. Tetapi di PHP5 salinan biasa memungkinkan hanya
menggunakan kata kunci clone

Perbedaan dari OOP dalam PHP4 dan PHP5

Tidak ada pengecualian objek di PHP4. Tetapi di PHP4

manajemen eksepsi merupakan fitur tambahan yang besar
Terdapat beberapa fungsi untuk investigasi method dan properti
dari sebuah class di PHP4, tetapi di PHP5 selain fungsi
tersebut, sebuah powerful set dari API (refleksi API) dikenalkan
untuk tujuan ini
Method Overloding menggunakan magic method seperti __get()
dan __set() tersedia di PHP5. Ada juga banyak built-in objek
untuk membuat hidup Anda lebih mudah.
Tetapi hampir semuanya, merupakan peningkatan performansi
yang besar di PHP5 untuk OOP

10
Beberapa Istilah Dasar Object Oriented

Class
–Sebuah class merupakan sebuah template untuk sebuah objek. Sebuah class
terdiri dari kode yang mendefinisikan bagaimana sebuah object akan dimiliki
dan berinteraksi antara satu dengan lainnya atau dengan dirinya sendiri.
Setiap waktu anda membuat objek di PHP, anda sebenarnya membuat class
Property
–Properti adalah sebuah wadah di dalam class yang dapat mempertahankan
beberapa informasi. Tidak seperti bahasa lain, PHP tidak memeriksa jenis
variabel properti. Properti A bisa diakses hanya dalam class itu sendiri, oleh
subclass-nya, atau oleh semua orang. Pada dasarnya, sebuah properti adalah
variabel yang dideklarasikan di dalam class itu sendiri, tapi tidak di dalam
setiap fungsi di class
Method
–Method merupakan fungsi dalam sebuah class. Seperti properti, method dapa
juga diakses seperti halnya tiga tipe dari user.

11

Beberapa Istilah Dasar Object Oriented

Encapsulation
–Encapsulapsi adalah mekanisme untuk mengikat kode secara bersamaan
dan memanipulasinya dan menjaga keduanya agar aman dari interfensi
luar dan pelanggaran.
–Encapsulation is the mechanism that binds together code and the data it
manipulates, and keeps both safe from outside interference and misuse.
Pembungkusan dari data dan methode ke dalam satu unit (disebut class)
hal ini disebut dengan encapsulasi. Manfaat dari enkapsulasi adalah
bahwa ia melakukan tugas di dalam tanpa membuat Anda khawatir.
Polymorphism
–Objek bisa dari jenis apa pun. Sebuah objek diskrit dapat memiliki sifat
diskrit dan metode yang bekerja secara terpisah ke objek lain. Namun
satu set objek dapat diperoleh dari induknya dan mempertahankan
beberapa sifat dari class induk. Proses ini disebut polimorfisme. Sebuah
objek bisa berubah menjadi beberapa objek lainnya mempertahankan
beberapa perilakunya

12
Beberapa Istilah Dasar Object Oriented

Inheritance
–Proses kunci berasal objek baru dengan memperluas objek lain
disebut inheritance. Bila Anda mewarisi sebuah objek dari objek lain,
subclass (yang mewarisi) berasal semua properti dan metode dari
superclass (yang diwariskan). Sebuah subclass kemudian dapat
memproses setiap metode superclass pula (yang disebut overloading)
Coupling
–Coupling adalah perilaku bagaimana class tergantung pada satu
sama lain. Loosely coupled architecture banyak digunakan kembali
daripada tightly coupled objects. Coupling adalah kekhawatiran yang
sangat penting untuk merancang objek yang lebih baik

13

Beberapa Istilah Dasar Object Oriented

Design Patterns
–Pertama kali ditemukan oleh "Gang of Four", pola desain hanya trik dalam
pemrograman berorientasi objek untuk memecahkan set yang sama masalah
dengan pendekatan yang lebih cerdas. Menggunakan pola desain (DP) dapat
meningkatkan kinerja seluruh aplikasi Anda dengan kode minimal ditulis oleh
pengembang. Kadang-kadang tidak mungkin untuk merancang solusi optimal
tanpa menggunakan DP. Tapi penggunaan yang tidak perlu dan tidak
direncanakan DP juga dapat menurunkan kinerja aplikasi Anda
Subclass
–Sebuah istilah yang sangat umum di OOP, dan kita menggunakan istilah ini
seluruh buku ini. Ketika sebuah benda berasal dari benda lain, yang berasal
disebut subclass dari mana ia berasal.
Superclass
–Sebuah class merupakan superclass untuk sebuah objek jika objek tersebut
berasal darinya. Untuk memudahkan, ketika anda memperluas sebuah objek,
objek yang diperluas merupakan superclass dai sebuah extended objek baru.

14
Beberapa Istilah Dasar Object Oriented

Instance
–Ketika anda membuat objek dengan memanggilnya constructor, ha ini
akan disebut sebagai instance. Untuk memudahkannya, ketika anda
menulis sesuatu seperti $var = new Object(); sebenarnya anda
membuat sebuat instance dari class objek

15

Class dan Object

Class adalah tipe data yang programmer definisikan, yang mencakup

fungsi lokal serta data lokal. Anda dapat menganggap class sebagai
template untuk membuat banyak contoh dari jenis yang sama (atau
class) dari objek.
–Class merupakan sebuah deskripsi dari sebuah objek
–User mendefinisikan tipe data yang berisikan variabel, properti dan
method didalamnya.
–Class tidak pernah dieksekusi.
– Memungkinkan untuk membuat unlimited instance dari sebuah class
Objek merupakan sebuah individual instance dari struktur data yand
didefinisikan dengan sebuah class. Anda dapat mendefinisikan sebuah
class satu kali dan membuat objek dengannya. Objek juga disebut
desebagai instance
–Objek mereupakan sebuah instance dari sebuah class.
–Hal ini merupakan copy-an eksekusi dari sebuah class.

16
Class dalam PHP

Dasar pendefinisian class dimulai dengan kata kunci class, diikuti

dengan nama class, diikuti sepasang tanda kurung yang
menyertakan definisi dari properti dan method pada class
Nama class dapat berupa label yang valid, asalkan itu bukan kata-
kata yang terdapat dalam PHP. Sebuah nama class yang valid
dimulai dengan huruf atau underscore, diikuti oleh sejumlah huruf,
angka, atau garis bawah. Sebagai ekspresi reguler, itu akan
dinyatakan demikian: ^ [a-zA-Z_ \ x7f- \ xff] [a-zA-Z0-9_ \ x7f- \ xff]
* $.
Sebuah class mungkin terdiri dari konstatanya sendiri, variabel
(disebut dengan properti), dan fungsi (disebut dengan method)

17

Mendefinisikan Class

Alih-alih memiliki banyak fungsi, variabel dan kode mengambang sekitar

mau tak mau, untuk merancang script php Anda atau kode librari cara
OOP, Anda harus mendefinisikan / membuat class anda sendiri.
Anda mendefinisikan class dengan dimulai dengan katakunci class diikuti
dengan nama yang ingin anda berikan untuk class baru.

<?php
class person {
// Defined properties here
// Defined methods here
}
?>

18
Menambahkan Data ke class

Class merupakan brlueprint untuk objek PHP dan lebih untuk selanjutnya.
Satu dari perbedaan yang besar dari fungsi dan class adalah sebuah
class terdiri dari keduanya data (variabel) dan fungsi dari sebuah paket
yang disebut dengan: „objek‟
Data/variabel didalam sebuah class(contoh: var $name;) disebut dengan
„properti‟

<?php
class person {
var $name;
// defined method here
}
?>

19

Function/ Method dalam Class

Dengan cara yang sama bahwa variabel mendapatkan nama yang
berbeda ketika dibuat di dalam class (mereka disebut: properti) fungsi
juga disebut (oleh nerd) dengan nama yang berbeda ketika dibuat di
dalam class - mereka disebut 'method'.
Sebuah method class digunakan untuk memanipulasi datanya sendiri /
properti
<?php
class person {
var $name;
function set_name($new_name) {
$this->name = $new_name;
}
function get_name() {
return $this->name;
}
}
?>

20
Variabel “$this”

$this merupakan sebuah variabel built-in (built kedalam semua

objek) yang menunjuk ke objeknya. Atau dalam kata lain, $this
merupakan sebuah variabel spesial self-referencing.
Anda dapat menggunakan $this untuk mengakses properties
dan memanggil method lain dari class tersebut

21

Instansiasi / Membuat Objek

<?php
class person {
var $name;
function set_name($new_name) {
$this->name = $new_name;
}
function get_name() {
return $this->name;
}
}
$stefan = new person();
?>
Instansiasi merupakan proses dari pembuatan sebuah instance dari
sebuah objek di memory
Variabel $stefan menjadi sebuah handle/reference ke objek person yang
baru dibuat. Saya memanggil $stefan sebuah „handle‟, karena kita akan
menggunakan $stefan untuk mengontrol dan menggunakan objek person

22
Kata Kunci “new”

Untuk membuat sebuah objek keluar dari sebuah class, anda

perlu menggunakan kata kunci „new‟.
Ketika membuat/ instansiasi sebuah class, anda dapat secara
opsional menambahkan kurung kurawal pada nama class,
seperti contoh dibawah ini.
Untuk membersihkan, anda dapat melihat kode dibawah ini
bagaimana membuat multi objek dari class yang sama.

23

Contoh Instansiasi Objek

<?php
class person {
var $name;
function set_name($new_name) {
$this->name = $new_name;
}
function get_name() {
return $this->name;
}
}
$stefan = new person();
$jimmy = new person();
$stefan->set_name("Stefan Mischook");
$jimmy->set_name("Nick Waddles");
?>

24
Akses Sebuah Data Objek

Sekarang kita gunakan method getter untuk mengakses data

dalam objek anda.
Hal ini sama dengan memasukan data kedalam objek
menggunakan method setter.
Ketika mengakses method dan properties dari sebuah class,
anda dapat menggunakan operator anak panah (->)
Operator anak panah (->) tidak sama dengan operator yang
digunakan untuk assosiatif array:=>

25

Contoh Akses Data

<?php
class person {
var $name;
function set_name($new_name) {
$this->name = $new_name;
}
function get_name() {
return $this->name;
}
}
//Instantiate object
$stefan = new person();
$jimmy = new person();

//set object properties

$stefan->set_name("Stefan Mischook");
$jimmy->set_name("Nick Waddles");

//accessing object data

echo "Stefan's full name: " . $stefan->get_name();
echo "Nick's full name: " . $jimmy->get_name();
?>

26
Akses Properti Secara Langsung

Anda tidak memiliki method yang digunakan untuk mengakses

properti objek, anda dapat mengaksesnya secara langsung
menggunakan operator anak panah (->) dan nama dari
variabelnya

27

Contoh Akses Properti Secara Langsung

<?php
class person {
var $name;
function set_name($new_name) {
$this->name = $new_name;
}
function get_name() {
return $this->name;
}
}
//Instantiate object
$stefan = new person();
$jimmy = new person();

//set object properties

$stefan->set_name("Stefan Mischook");
$jimmy->set_name("Nick Waddles");

//accessing object data

echo "Stefan's full name: " . $stefan->name;
echo "Nick's full name: " . $jimmy->name;
?>

28
Akhir Modul 5
 Local Training for IT Capacity Building
for Central & Local Government

Magic Method

Pemrograman Web - Lanjutan

MODUL 6

Ikhtisar Modul

Constructor
Destructor
Access Modifier

2
Magic Method

Fungsi PHP yang diawali dengan sebuah garis bawah “_”

ganda “__” disebut dengan fungsi magic (dan/atau method) di
PHP
Fungsi-fungsi tersebut biasanya didefinisikan didalam class,
dan tidak dapat berdiri sendiri (diluar class) fungsi.
Beberapa magic function yang tersedia di PHP diantaranya:
__construct(), __destruct(), __call(), __callStatic(), __get(),
__set(), __isset(), __unset(), __sleep(), __wakeup(),
__toString(), __invoke(), __set_state(), __clone(), and
__autoload().

Daftar dari Magic Method

4
Constructor

Semua objek dapat memiliki sebuah method build-in spesial

yang disebut dengan “constructor”. Constructor mengijinkan
anda untuk menginisialisasi properti objek anda (dalam arti
memberi nilai properti anda) ketika anda melakukan instansiasi
(membuat) sebuah objek
Jika anda membuat sebuah fungsi __construct(), PHP akan
secara otomatis memanggil method/fungsi __consturct() ketika
anda membuat sebuah objek dari class anda
Method “construct” diawali dengan dua garis bawah (__) dan
kata “construct”

Contoh : Constructor
<?php
class person {
var $name;
function __construct($persons_name) {
$this->name = $persons_name;
}

function set_name($new_name) {
$this->name = $new_name;
}

function get_name() {
return $this->name;
}
}
?>

6
Membuat Objek Dengan Sebuah Constructor

Sekarang kita memiliki sebuah method constructor, kita dapat

didukung sebuah nilai untuk properti $name ketia kita membuat
objek person
Anda “memberi makan” method constructor dengan didukung
sebuah daftar dari argumen (seperti yang anda lakukan dengan
sebuah fungsi) setelah nama class
Contoh :
$stefan = new person("Stefan Mischook");
Ini menghemat kita dari harus memanggil set_name () metode
mengurangi jumlah kode program.
Constructors biasanya dan kadang digunakan di PHP, Java dll.

Contoh : Membuat Objek dengan sebuah Constructor

<?php
class person {
var $name;
function __construct($persons_name) {
$this->name = $persons_name;
}

function set_name($new_name) {
$this->name = $new_name;
}

function get_name() {
return $this->name;
}
}
//Create object with a constructor
$stefan = new person("Stefan Mischook");
echo "Stefan's full name: ".$stefan->get_name();
?>

8
Destructor

Seperti sebuah fungsi constructor anda dapat mendefinisikan

sebuah fungsi destructor. Penggunaan fungsinya __destruct().
Anda dapat melepaskan semua resource dengan sebuah
destructor.
Destructor merupakan method/fungsi yang akan dijalankan
ketika objek tersebut berakhir.

Contoh : Destructor
<?php
class person{
var $name;

function __construct($persons_name){
$this->name = $persons_name;
}

function __destruct(){
echo "<br>".$this->name ."is no more \n";
}

function set_name($new_name){
$this->name = $new_name;
}
function get_name() {
return $this->name;
}
}

$stefan = new person("Stefan Mischook");

echo "Stefan's full name: " . $stefan->get_name()."<br>" ;
?>

10
Access Modifiers (Visibilitas)

Satu dari prinsip dasar dari OOP adalah encapsulasi. Idenya

adalah membuat kode anda lebih baik dan bersih, jika anda
mencegah akses ke struktur data (properti) dalam objek anda.
Anda mencegah akses ke properti class menggunakan sesuatu
yang disebut dengan “access modifier”
Terdapat 3 macam access modifier :
1. public
2. private
3. Protected

11

Public

“Public” merupakan default modifier.

Properti yang dideklarasiakan sebagai „public‟ tidak memiliki
access restriction, artinya siapapun dapat mengaksesnya.
Ketika anda mendeklarasikan sebuah properti dengan kata
kunci „var‟, hal itu dianggap public.

12
Contoh : Public modifier
<?php
class person {
var $name;
public $height; // public modifier
protected $social_insurance;
private $pinn_number;

function __construct($persons_name) {
$this->name = $persons_name;
}

function set_name($new_name) {
$this->name = $new_name;
}

function get_name() {
return $this->name;
}
}
?>

13

Private

Ketika anda mendeklarasikan sebuah properti sebagai „private‟,

hanya class yang sama yang dapat mengakses propertinya

14
Contoh : Private Modifier
<?php
class person {
var $name;
public $height; // public modifier
protected $social_insurance;
private $pinn_number; //private modifier

function __construct($persons_name) {
$this->name = $persons_name;
}

function set_name($new_name) {
$this->name = $new_name;
}

function get_name() {
return $this->name;
}
}

$stefan = new person("Stefan Mischook");

echo "Stefan's full name: " . $stefan->get_name() ;
//$pinn_number was declared private, this line of code will generate an error.
echo "Tell me private stuff: ".$stefan->pinn_number;
?>

15

Contoh : Private Modifier

Jika anda mencoba untuk mengakses sebuah properti private

dari luar class anda akan mendapatkan pesan sbb:

Fatal error: Cannot access private property person::$pinn_number in

….

16
Protected

Ketika sebuah properti dideklarasikan „protected‟, hanya dari

class yang sama dan turunannya yang dapat mengakses
propertinya, hal ini ada hubungannya dengan inheritance
(pewarisan)

17

Contoh :Protected Modifier

<?php
class person {
var $name;
public $height; // public modifier
protected $social_insurance; //protected modifier
private $pinn_number; //private modifier

function __construct($persons_name) {
$this->name = $persons_name;
}

function set_name($new_name) {
$this->name = $new_name;
}

function get_name() {
return $this->name;
}
}

$stefan = new person("Stefan Mischook");

echo "Stefan's full name: " . $stefan->get_name() ;
//$social_insurance was declared protected, this line of code will generate an error.
echo "Tell me Social insurace: ".$stefan->social_insurance;
?>

18
Contoh :Protected Modifier

Jika and mencoba mengakses sebuah protected

properti/variabel dari luar class, maka anda akan mendapatkan
pesan sbb:

Fatal error: Cannot access protected property

person::$social_insurance in….

19

Akhir Modul 6
 Local Training for IT Capacity Building
for Central & Local Government

Inheritance dan Scope

Pemrograman Web - Lanjutan

MODUL 7

Ikhtisar Modul

Inheritance
Method Overidding dan Overloading
Polymorphism
Abstract dan Interface

2
Inheritance

Inheritance adalah proses dimana objek dari satu kelas

memperoleh sifat-sifat objek dari kelas lain.
Prinsip di balik semacam ini divisi adalah bahwa masing-
masing berasal berbagi karakteristik umum class dengan class
dari mana ia berasal.
Dalam OOP konsep inheritance memberikan ide usabilitas.
Ini berarti bahwa kita dapat menambahkan fitur tambahan untuk
class yang ada tanpa memodifikasi itu.

Inheritance

Kekuatan sebenarnya dari mekanisme inheritance yang

memungkinkan programmer untuk menggunakan kembali class
yang hampir tapi tidak persis, apa yang dia inginkan, dan untuk
menyesuaikan class sedemikian rupa bahwa itu tidak
memperkenalkan efek samping yang tidak diinginkan ke dalam
sisa class.

4
Inheritance

Dampak dari inheritance adalah class anak (atau subclass atau

class turunan) memiliki karakteristik seperti
–Secara otomatis memiliki semua deklarasi variabel anggota dari class
induk.
–Secara otomatis memiliki semua fungsi anggota sama dengan induk,
yang (secara default) akan bekerja dengan cara yang sama seperti
fungsi-fungsi di induk.

Jenis Inheritance

Single Inheritance
Hierarchical Inheritance
Multi Level Inheritance
Hybrid Inheritance
Multiple Inheritance

6
Single Inheritance

Ketika sebuah class turunan tunggal dibuat dari class dasar

tunggal maka inheritance disebut sebagai Sinlge Inheritance.

Hierarchical Inheritance

Bila lebih dari satu class turunan dibuat dari classdasar tunggal,
maka inheritance yang disebut sebagai hierarchical inheritance.

8
Multilevel Inheritance

Ketika class turunan dibuat dari class lain berasal, maka

inheritance yang disebut sebagai multilevel inheritance.

Hybrid Inheritance

Kombinasisingle, hierarchical dan multilevel inheritance disebut

sebagai hybrid inheritance.

10
Multiple Inheritance

Ketika kelas turunan dibuat dari lebih dari satu clas dasar maka
inheritance yang disebut sebagai multiple inheritance.

11

Single Inheritance
<?php
class parentclass
{
public function sum($a,$b)
{
echo $a+$b;
}
}
class childclass extends parentclass
{
public function diff($a,$b)
{
echo $a-$b;
}
}
$obj1=new childclass();
$obj1->sum(4,5);
echo "<br />";
echo "<br />";
$obj1->diff(8,3);
?>

12
Hierarchical Inheritance
<?php
class a
{
public function function_a()
{
echo "classA";
}
}
class b extends a
{
public function function_b()
{
echo "classB";
}
}
class c extends a
{
public function function_c()
{
echo "classC";
}
}

13

echo c::function_c();
echo "<br />";
echo c::function_a();
echo “<br />
echo b::function_a();

?>

14
Multilevel Inheritance
<?php
class a
{
public function function_a()
{
echo 'classa';
}
}
class b extends a
{
public function function_b()
{
echo 'classb';
}
}
class c extends b
{
public function function_c()
{
echo 'classc';
}
}

15

echo c::function_c();
echo "<br />";
eCho c::function_b();
echo "<br />";
echo c::function_a();

?>

16
Polymorphism

Poly means many,morphism means forms.

Polymorphism feature enables classes to provide different
implementation of methods having the same name.
Two types of polymorphism
–Compile time(overloading)
–Runtime(overriding)

17

Overriding

Ketika kita membuat fungsi di kelas turunan dengan signature

yang sama (dengan kata lain fungsi memiliki nama yang sama,
jumlah yang sama dari argumen dan jenis yang sama
argumen) sebagai fungsi dalam class induknya maka disebut
method overriding.

18
Contoh
<?php
class Shap
{
function draw(){}
}
class Circle extends Shap
{
function draw()
{
print "Circle has been drawn.</br>";
}
}
class Triangle extends Shap
{
function draw()
{
print "Triangle has been drawn.</br>";
}
}
class Ellipse extends Shap
{
function draw()
{
print "Ellipse has been drawn.";
}
}

19

$Val=array(2);
$Val[0]=new Circle();
$Val[1]=new Triangle();
$Val[2]=new Ellipse();
for($i=0;$i<3;$i++)
{
$Val[$i]->draw();
}
?>

20
Overloading

Method overloading berarti memiliki dua atau lebih metode

dengan nama yang sama tetapi berbeda signature dalam
lingkup yang sama. Kedua metode mungkin ada di class yang
sama atau satu sama lain dalam class dasar dan satu lagi di
class turunan.

21

Contoh

<?php
function findSum()
{
$sum = 0;
foreach (func_get_args() as $arg)
{
$sum += $arg;
}
return $sum;
}
echo findSum(1, 2), '<br />';
echo findSum(10, 2, 100), '<br />';
echo findSum(10, 22, 0.5, 0.75, 12.50), '<br />';
?>

22
Data Abstraction

Representasi data di mana rincian pelaksanaan

tersembunyi (abstracted).
Abstraksi data mengacu pada, memberikan informasi
hanya penting untuk kata luar dan menyembunyikan
rincian latar belakang mereka yaitu. untuk mewakili
informasi yang diperlukan dalam program tanpa
menyajikan rincian
Mereka menyediakan metode umum yang cukup untuk
dunia luar untuk bermain dengan fungsi objek dan untuk
memanipulasi data objek yaitu. kondisi tanpa benar-benar
mengetahui bagaimana class telah diimplementasikan
secara internal.

23

Abstract Class

Class abstrak adalah salah satu yang tidak bisa diinstansiasi,

hanya inherited. Anda mendeklarasikan sebuah class abstrak
dengan kata kunci abstract
Ketika mewarisi dari class abstrak, semua metode yang
ditandai abstract dalam deklarasi class induk harus
didefinisikan oleh anak;

24
Contoh Abstract
<?php
abstract class One
{
abstract function disp();
}
class Two extends One
{
public function disp()
{
echo "Inside the child class<br/>";
}
}
class Three extends One
{
public function disp()
{
echo "Inside the child class 2<br/>";}
}

25

$two=new Two();
echo "<b>Calling from the child class Two:</b><br/>";
$two->disp();
echo "<b>Calling from the child class Three:</b><br/>";
$three=new Three();
$three->disp();
?>

26
Interface

Interface adalah class khusus yang digunakan seperti

template untuk sekelompok class dengan fungsi yang sama,
yang harus menentukan struktur tertentu method.
Hal ini dapat berisi konstanta dan deklarasi method, tetapi
bukan tubuh method

27

Contoh Interface
<?php
interface testdrive
{

function drive();
function stop();
}
class vehicle implements testdrive
{
public function __construct()
{
echo 'About this Vehicle.<br />';
}
public function drive()
{
echo 'VRRROOOOOOM!!!';
}

public function stop()

{
echo 'SSSCCRRREEEEEECCHH!!!<br />';
}
}

28
$object = new vehicle;
$object->drive();
$object->stop();
?>

29

Abstract vs Interface

ABSTRACT CLASS INTERFACE

Metode Abstrak dapat Semua method dideklarasikan dalam
mendeklarasikan dengan modifier sebuah interface harus public.
Access seperti public,private,
protected. Ketika menerapkan di
subclass method ini harus
didefinisikan dengan sama (atau
kurang terbatas) visibilitas.
Class abstract dapat terdiri dari Interfaces tidak dapat berisikan
variabel dan concrete methods. variabel dan concrete methods kecuali
konstanta.
Sebuah class dapat mewarisi hanya Sebuah class dapat
satu class abstract dan Multiple diimplementasikan banyak interface
inheritance tidak memungkinkan untuk dan memungkinkan Multiple interface
Abstract class. inheritance.

30
Akhir Modul 7
 Local Training for IT Capacity Building
for Central & Local Government

JQuery

Pemrograman Web - Lanjutan

MODUL 8

Ikhtisar Modul

Pengenalan JQuery
JQuery Selector
JQuery dan DOM
JQuery dan Event
JQuery dan Ajax
JQuery Plugin
JQuery UI

2
Apa itu jQuery

Library Javascript
Cepat dan ringkas
Menyederhanakan interaksi antara HTML dan JavaScript

Kenapa jQuery?

Ringan : 19KB dalam ukuran (Minified dan Gzipped)

CSS1 - 3 Penyesuaian
Lintas Browser
–(IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)

Great Community Plugins

Tutorials TestCoverage

Open (free) license Books

4
Contoh Sebuah ajax dan manipulasi DOM

if (!document.ELEMENT_NODE) { document.ELEMENT_NODE = 1;
document.ATTRIBUTE_NODE = 2; document.TEXT_NODE = 3;
document.CDATA_SECTION_NODE = 4; document.ENTITY_REFERENCE_NODE = 5;
document.ENTITY_NODE = 6; document.PROCESSING_INSTRUCTION_NODE = 7;
document.COMMENT_NODE = 8; document.DOCUMENT_NODE = 9;
document.DOCUMENT_TYPE_NODE = 10; document.DOCUMENT_FRAGMENT_NODE = 11;
document.NOTATION_NODE = 12; } document._importNode = function(node,
allChildren) { switch (node.nodeType) { case document.ELEMENT_NODE: var
newNode = document.createElement(node » .nodeName); /* does the node have
any attributes to add? */ if (node.attributes && node.attributes »
.length > 0) for (var i = 0; il = node.attributes.length; » i < il)
newNode.setAttribute(node.attributes » .nodeName,
node.getAttribute(node.attributes[i++] » .nodeName)); /* are we going
after children too, and does » the node have any? */ if (allChildren &&
node.childNodes && » node.childNodes.length > 0) for (var i = 0; il =
node.childNodes.length; » i < il)
newNode.appendChild(document._importNode » (node.childNodes[i++],
allChildren)); return newNode; break; case document.TEXT_NODE: case
document.CDATA_SECTION_NODE: case document.COMMENT_NODE: return
document.createTextNode(node.nodeValue); break; } };

Ini hanya satu baris di jQuery

$(“#content”).load(“page.html #content”);

6
Siapa Menggunakan jQuery?

http://docs.jquery.com/Sites_Using_jQuery

Dominasi di Dunia

Google trends perbandingan dari JS framework selama 12

bulan terakhir

http://www.google.com/trends?q=jQuery%2C+prototype%2C+yui%2C+dojo%2C+mootools&ctab=0&geo=all&date=ytd
&sort=0

8
Let’s Start

Download jQuery
http://docs.jquery.com/Downloading_jQuery

Menanamkan Dalam Halaman Anda

<html>
<head>
<script src=“path/to/jquery-
x.x.js"></script>
</head>
<body> … </body>
</html>

10
Menanamkan Dalam Halaman Anda

<html>
<head>
<script src="path/to/jquery-x.x.js"></script>
<script>
$(document).ready(function(){
// Start here
});
</script>
</head>
<body> … </body>
</html>

11

Filosopi jQuery

Mencari Elemen

Melakukan Sesuatu dengannya

12
Sebuah Contoh Dasar

<body>
<div>
<p>I m a paragraph 1</p>
<p>I m a paragraph 2</p>
</div>
<p>I m another paragraph</p>
</body>

13

Sebuah Contoh Dasar

Pilih semua paragraf.

$(“p”)
<body>
<div>
<p>I m a paragraph 1</p>
<p>I m a paragraph 2</p>
</div>
<p>I m another paragraph</p>
</body>

14
Sebuah Contoh Dasar

Pilih semua paragraf. Tambahkan sebuah class ke mereka.

$(“p”).addClass(“red”);

<body>
<div>
<p class=“red”>I m a paragraph -1</p>
<p class=“red”>I m a paragraph -2</p>
</div>
<p class=“red”>I m another paragraph</p>
</body>

15

Dasar Selector

Hanya lewati sebuah selector ke $()

Apa itu selector?

Gunakan setiap CSS selector

16
Dasar Selector

Berpikir tentang file CSS sederhana

#header{
margin : 0 auto;
}
div{
margin : 0px;
padding : 0px
}
ul.menu li{
…..
}

17

Dasar Selector

Item Warna merah merupakan selectors

#header{
margin : 0 auto;
}
div{
margin : 0px;
padding : 0px
}
ul.menu li{
…..
}

18
Dasar Selector

Memilih menggunakan selectors

Memilih berdasarkan Id
–$(“#header”)

19

Dasar Selector

Memilih menggunakan selectors

Memilih berdasarkan Id
–$(“#header”)
Memilih berdasarkan Class
–$(“.updated”)

20
Dasar Selector

Memilih menggunakan selectors

Memilih berdasarkan Id
–$(“#header”)
Memilih berdasarkan Class
–$(“.updated”)
Memilih berdasarkan nama tag
–$(“table”)

21

Dasar Selector

Memilih menggunakan selectors

Memilih berdasarkan Id
–$(“#header”)
Memilih berdasarkan Class
–$(“.updated”)
Memilih berdasarkan nama tag
–$(“table”)
Menggabungkannya
–$(“table.user-list”)
–$(“#footer ul.menu li”)

22
Contoh Selector

This is my page

<body>
<div id=“header”>
<span id=“logo”>Logo here…</span>
<ul class=“menu”>
<li>user name</li>

…..
<li>logout</li>
</ul>
</div>
……
</body>

23

Contoh Selector

$(“#header”)

<body>
<div id=“header”>
<span id=“logo”>Logo here…</span>
<ul class=“menu”>
<li>user name</li>

…..
<li>logout</li>
</ul>
</div>
……
</body>

24
Contoh Selector

$(“ul.menu”)

<body>
<div id=“header”>
<span id=“logo”>Logo here…</span>
<ul class=“menu”>
<li>user name</li>

…..
<li>logout</li>
</ul>
</div>
……
</body>

25

Contoh Selector

$(“ul.menu li”)

<body>
<div id=“header”>
<span id=“logo”>Logo here…</span>
<ul class=“menu”>
<li>user name</li>

…..
<li>logout</li>
</ul>
</div>
……
</body>

26
Menggunakan Filter untuk pemilihan

Filter Dasar
–:first, :last, :even, :odd, …...

27

Contoh Filter Dasar

Tabel daftar murid. Mari buat seperti zebra.

Name Class Roll No. Comment

Raju XII 2 Good
Masud IX 1 Good
Apu XII 3
Mizan XII 5
Karim VI 2 Satisfactory

28
Contoh Filter Dasar

$(“#students tr:even”).css(“background-color”, “#dde”)

Name Class Roll No. Comment

Raju XII 2 Good
Masud IX 1 Good
Apu XII 3
Mizan XII 5
Karim VI 2 Satisfactory

29

Menggunakan Filter untuk pemilihan

Filter Dasar
–:first, :last, :even, :odd, …...
Filter Konten:
–:empty , :contains(text), :has(selector), …..

30
Contoh Filter Konten

$(“#students tr:even”).css(“background-color”, “#dde”);

$(“#students td.comment:empty”).text(“No Comment”);

Name Class Roll No. Comment

Raju XII 2 Good
Masud IX 1 Good
Apu XII 3 No Comment

Mizan XII 5 No Comment

Karim VI 2 Satisfactory

31

Menggunakan Filter untuk pemilihan

Filter Dasar
–:first, :last, :even, :odd, …...
Filter Konten:
–:empty , :contains(text), :has(selector), …..
Filter Atribut:
–[attribute], [attribute=value], [attribute!=value], …..

32
Contoh Filter Atribut

$(“#students tr:even”).css(“background-color”, “#dde”);

$(“#students td.comment:empty”).text(“No Comment”);
$(“#students td[align=„center']").addClass(“ocean”);

Name Class Roll No. Comment

Raju XII 2 Good
Masud IX 1 Good
Apu XII 3 No Comment

Mizan XII 5 No Comment

Karim VI 2 Satisfactory

33

Menggunakan Filter untuk pemilihan

Filter Dasar
–:first, :last, :even, :odd, …...
Filter Konten:
–:empty , :contains(text), :has(selector), …..
Filter Atribut:
–[attribute], [attribute=value], [attribute!=value], …..
Form
–:input, :text, :submit, :password, …..
–:enabled, :disabled, :checked, …..

34
Contoh Selector Form

$(":submit").click(function(e){ … });

$("input:disabled").val(“You cannot change me");

$(“#form-id input:checked”).addClass(“selected”);

35

Method jQuery

Manipulasi DOM
–before(), after(), append(), appendTo(), …..

36
Contoh Manipulasi DOM

Pindahkan semua paragraf di div dengan id "contents"

$(“p”)

<body>
<h1>jQuery</h1>
<p>jQuery is good</p>
<p>jQuery is better</p>
<div id=“contents”></div>
<p>jQuery is the best</p>

</body>

37

Contoh Manipulasi DOM

Pindahkan semua paragraf dalam div dengan id

“contents”

$(“p”).appendTo(“#contents”);

<body>
<h1>jQuery</h1>
<div id=“contents”>
<p>jQuery is good</p>
<p>jQuery is better</p>
<p>jQuery is the best</p>
</div>
</body>

38
Contoh Manipulasi DOM

Pindahkan semua paragraf dalam div dengan id

“contents”

$(“p”).appendTo(“#contents”);
$(“h1”).append(“ Dom Manipulation”);

<body>
<h1>jQuery Dom Manipulation</h1>
<div id=“contents”>
<p>jQuery is good</p>
<p>jQuery is better</p>
<p>jQuery is the best</p>
</div>
</body>

39

Method jQuery

Manipulasi DOM
–before(), after(), append(), appendTo(), …..
Attribut
–css(), addClass(), attr(), html(), val(), …..

40
Contoh Atribut

Buat teks dari paragraf terakhir bold

$(“#contents p:last”).css(“color”, “green”);

<body>
<h1>jQuery Dom Manipulation</h1>
<div id=“contents”>
<p >jQuery is good</p>
<p>jQuery is better</p>
<p style=“color:green”>jQuery is the
best</p>
</div>
</body>

41

Contoh Atribut

Setting

$(“img.logo”).attr(“align”, “left”);
$(“p.copyright”).html(“&copy; 2009
ajaxray”);
$(“input#name”).val(“Spiderman”);

42
Contoh Atribut

Setting

$(“img.logo”).attr(“align”, “left”);
$(“p.copyright”).html(“&copy; 2009 ajaxray”);
$(“input#name”).val(“Spiderman”);

Getting

var allignment = $(“img.logo”).attr(“align”);

var copyright = $(“p.copyright”).html();
var username = $(“input#name”).val();

43

Method jQuery

Manipulasi DOM
–before(), after(), append(), appendTo(), …..
Atribut
–css(), addClass(), attr(), html(), val(), …..
Event
–click(), bind(), unbind(), live(), …..

44
Contoh Event

Mulai ketika DOM dalam keadaan siap

$(document).ready(function(){

$(selector).eventName(function(){…});

});

45

Contoh Event

Ikat semua interaksi pada events.

$(document).ready(function(){

$(“#message”).click(function(){
$(this).hide();
})

});

<span id=“message” onclick=“…”> blah blah

</span>

46
Contoh Event

Anda dapat menghentikan event secara manual.

$(document).ready(function(){

$(“span#message”).click(function(){
$(this).hide();
})

$(“#form-id:reset”).click();

});

47

Method jQuery

Manipulasi DOM
–before(), after(), append(), appendTo(), …..
Attribut
–css(), addClass(), attr(), html(), val(), …..
Event
–click(), bind(), unbind(), live(), …..
Effect
–hide(), fadeOut(), toggle(), animate(), …..

48
Contoh Effect

Ketika link “show-cart” di klik, slide up/down “cart” div.

$(“a#show-cart”).click(function(){
$(“#cart”).slideToggle(“slow”);
})

49

Contoh Effect

Bangun animasi kustom anda

$(“a#show-cart”).click(function(){
$(“#cart”).slideToggle(“slow”);
})

$("#showdown").click(function(){
$("#my-div").animate({
width: "70%",
opacity: 0.4,
fontSize: "3em“
}, 1200 );
});

50
Method jQuery

Manipulasi DOM
–before(), after(), append(), appendTo(), …..
Attribut
–css(), addClass(), attr(), html(), val(), …..
Event
–click(), bind(), unbind(), live(), …..
Effect
–hide(), fadeOut(), toggle(), animate(), …..
Ajax
–load(), get(), ajax(), getJSON(), …..

51

Contoh Ajax

Memuat sebuah halaman dalam sebuah kontainer

$(“#comments”).load(“/get_comments.php”);

$(“#comments”).load(“/get_comments.php”, {max
: 5});

52
Contoh Ajax

Mengirim permintaan ajax dengan data

$.get(“/edit_comment.php",
{id: 102, comment: “I m edited"}
);

53

Contoh Ajax

Anda dapat mengirimkan form serial sebagai data

$.get(“/edit_comment.php",
$(“#edit-comment”).serialize()
);

id=102&comment=I+m+edited

54
Contoh Ajax

Menset sebuah fungsi callback untuk menangani response

data

$.get(“edit_comment.php",
$(“form#cmm-edit”).serialize(),
function(data){
if(data == “success”)
alert(“Comment Edited!”);
}
);

55

Method Chaining

Kebanyakan method jQuery mengembalikan objek jQuery

Anda bisa merangkainya bersamaan

56
Method Chaining

Kebanyakan method jQuery mengembalikan objek jQuery

Anda bisa merangkainya bersamaan

$(“#deleted”).addClass(“red”).fadeOut(“slow”);
$(“:button”).val(“Click
Me”).click(function(){…})

57

Method Chaining
Kebanyakan method jQuery mengembalikan objek jQuery
Anda bisa merangkainya bersamaan

$(“#deleted”).addClass(“red”).fadeOut(“slow”);
$(“:button”).val(“Click
Me”).click(function(){…})
This will not work -

$(“:button”).val().click(function(){…})

This method will return string

58
Plugin jQuery

jQuery adalah extensible.

59

Plugin jQuery

jQuery lightBox

http://leandrovieira.com/projects/jquery/lightbox/

60
Plugin jQuery

Slider Plugins

http://www.hieu.co.uk/blog/index.php/imageswitch/
http://medienfreunde.com/lab/innerfade/

61

Plugin jQuery

Dan banyak lagi lainnya…

http://plugins.jquery.com/

62
jQuery UI

Membangun aplikasi web yang sangat interaktif

63

jQuery UI – Interaksi

(Draggale, Droppable, Resizable, Selectable, Sortable)

64
jQuery UI – Contoh Penyortiran

$("#items").sortable();

65

jQuery UI – Widgets

(Accordion, Datepicker, Dialog, Progressbar, Slider, Tabs)

66
jQuery UI – Contoh Datepicker

$("#date").datepicker();

67

Mana yang cocok dengan website anda?

68
Desain sebuah jQuery UI theme - Themeroller

http://ui.jquery.com/themeroller

69

Akhir Modul 8
 Local Training for IT Capacity Building
for Central & Local Government

Membangun Website dengan

Menggunakan OOP

Pemrograman Web - Lanjutan

MODUL 9

Buat Layout sederhana dengan HTML dan CSS

Layout Login

Header

Login Area
Username
Welcome Content Password
Submit
Register

Footer

2
Area User

Header

Menu Main Area

Footer

Panduan Project

Project ini terdiri dari sebuat folder dan beberapa file php dengan
struktur sebagai berikut:
login.php
registration.php
home.php
Include
–functions.php
–config.php

4
Membuat Database

Contoh database, tabel users dengan kolom uid, username,

passcode, name dan email.
CREATE TABLE users
(
uid INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(30) UNIQUE,
password VARCHAR(50),
name VARCHAR(100),
email VARCHAR(70) UNIQUE
);

functions.php

Terdiri dari kode PHP class User{} terdiri functions/methods.

<?php
include_once 'config.php';
class User
{
//Database connect
public function __construct()
{
$db = new DB_Class();
}
//Registration process
public function register_user($name, $username, $password, $email)
{
$password = md5($password);
$sql = mysql_query("SELECT uid from users WHERE username = '$username' or email = '$email'");
$no_rows = mysql_num_rows($sql);
if ($no_rows == 0)
{
$result = mysql_query("INSERT INTO users(username, password, name, email) values ('$username',
'$password','$name','$email')") or die(mysql_error());
return $result;
}
else
{
return FALSE;
}
}

6
functions.php
// Login process
public function check_login($emailusername, $password)
{
$password = md5($password);
$result = mysql_query("SELECT uid from users WHERE email = '$emailusername' or username='$emailusername'
and password = '$password'");
$user_data = mysql_fetch_array($result);
$no_rows = mysql_num_rows($result);
if ($no_rows == 1)
{
$_SESSION['login'] = true;
$_SESSION['uid'] = $user_data['uid'];
return TRUE;
}
else
{
return FALSE;
}
}

function.php
// Getting name
public function get_fullname($uid)
{
$result = mysql_query("SELECT name FROM users WHERE uid = $uid");
$user_data = mysql_fetch_array($result);
echo $user_data['name'];
}
// Getting session
public function get_session()
{
return $_SESSION['login'];
}
// Logout
public function user_logout()
{
$_SESSION['login'] = FALSE;
session_destroy();
}

}
?>

8
registration.php

disini $user = new User(); merupakan class User{} object

menggunakannya dengan memanggil method $user->register_user{} dan
memasukkan nilainya.
<?php
include_once 'include/functions.php';
$user = new User();
// Checking for user logged in or not
if ($user->get_session())
{
header("location:home.php");
}

if ($_SERVER["REQUEST_METHOD"] == "POST")
{
$register = $user->register_user($_POST['name'], $_POST['username'], $_POST['password'], $_POST['email']);
if ($register)
{
// Registration Success
echo 'Registration successful <a href="login.php">Click here</a> to login';
} else
{
// Registration Failed
echo 'Registration failed. Email or Username already exits please try again';
}
}
?>

registration.php
//HTML Code
<form method="POST" action="register.php" name='reg' >
Full Name
<input type="text" name="name"/>
Username
<input type="text" name="username"/>
Password
<input type="password" name="password"/>
Email
<input type="text" name="email"/>
<input type="submit" value="Register"/>
</form>

10
login.php

Memanggil method $user->check_login{} untuk verifikasi data.

<?php
session_start();
include_once 'include/functions.php';
$user = new User();
if ($user->get_session())
{
header("location:home.php");
}

if ($_SERVER["REQUEST_METHOD"] == "POST")
{
$login = $user->check_login($_POST['emailusername'], $_POST['password']);
if ($login)
{
// Login Success
header("location:login.php");
}
else
{
// Login Failed
$msg= 'Username / password wrong';
}
}
?>

11

login.php
//HTML Code
<form method="POST" action="" name="login">
Email or Username
<input type="text" name="emailusername"/>
Password
<input type="password" name="password"/>
<input type="submit" value="Login"/>
</form>

12
home.php
<?php
session_start();
include_once 'include/functions.php';
$user = new User();
$uid = $_SESSION['uid'];
if (!$user->get_session())
{
header("location:login.php");
}
if ($_GET['q'] == 'logout')
{
$user->user_logout();
header("location:login.php");
}
?>
//HTML Code
<a href="?q=logout">LOGOUT</a>
<h1> Hello <?php $user->get_fullname($uid); ?></h1>

13

config.php

Konfigurasi database class DB_class() function __construct() merupakan nama

method untuk konstruktor.

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
class DB_Class
{
function __construct()
{
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or
die('Oops connection error -> ' . mysql_error());
mysql_select_db(DB_DATABASE, $connection)
or die('Database error -> ' . mysql_error());
}
}
?>

14
Bagaimana menambah Fungsi/ Method baru

Sebagai contoh, jika anda ingin mendapatkan nilai email. Cukup

masukkan fungsi berikut dalam class User{}
public function get_email($uid)
{
$result = mysql_query("SELECT email FROM users WHERE uid = $uid");
$user_data = mysql_fetch_array($result);
echo $user_data['email'];
}

Print nilai email.

<?php $user->get_email($uid); ?>

15

Lanjutkan Program Anda

Kembangkan kode program anda sendiri !

16
Akhir Modul 9