Ilovepdf Merged

Week 01
Konsep Dasar Pemrograman Web
World Wide Web (WWW/Web)

“Suatu ruang informasi di mana sumber-sumber daya yang berguna diidentifikasi oleh
pengenal global yang disebut Uniform Resource Identifier (URI)”
Web Agents:
Orang atau perangkat lunak yang mengambil peran di dalam ruang informasi (Web)
 User Agent; user
 Software Agent; Servers, proxies, spiders, browsers, dan multimedia players.
Uniform Resource Identifier (URI)

Terdiri atas string karakter yang digunakan untuk identifikasi atau memberi nama suatu
resource (sumberdaya) di internet. Identifikasi tersebut memungkinkan interaksi dengan
representasi dari resouce melalui network (jaringan) dengan menggunakan protokol
tertentu.
Uniform Resource Name : Name

Uniform Resource Locator : Address
1 Pemrograman Berbasis Web:

Dasar-dasar Web dan HTML
Week 01
Hypertext
Hypertext dapat dilihat dengan sebuah program bernama web browser yang mengambil
informasi (dokumen/halaman web) dari web server dan menampilkannya, biasanya di
sebuah monitor.
Kita lalu dapat mengikuti link (pranala) di setiap halaman untuk pindah ke dokumen lain
atau bahkan mengirim informasi kembali kepada server untuk berinteraksi.
Aktifitas ini disebut Surfing (berselancar). Halaman web biasanya diatur dalam koleksi
material yang saling terkait, yang disebut Website.
RFC
Sebuah memorandum yang dikeluarkan oleh IETF (Internet Engineering Task Force), yang
menggambarkan metode, perilaku, riset, atau inovasi yang dapat diterapkan ke dalam
tata kerja internet dan Internet-connected systems.
Hypertext Transfer Protocol (HTTP)

Protokol yang dipergunakan untuk melakukan transfer dokumen dalam World Wide Web
(WWW). Protokol ini adalah protokol ringan, tidak berstatus dan generik yang dapat
dipergunakan berbagai macam tipe dokumen.
Pengembangan HTTP dikoordinasi oleh World Wide Web Consortium (W3C) dan grup
bekerja Internet Engineering Task Force (IETF), bekerja dalam publikasi satu seri RFC, yang
paling terkenal RFC 2616, yang menjelaskan HTTP/1,1, versti HTTP yang umum digunakan
sekarang ini.
HTTP adalah sebuah atandar request/response antara sebuah client dan sebuah server.
Sebuah Client HTTP seperti web browser, biasanya memulai permintaan dengan
membuat hubungan TCP/IP ke sebuah port tertentu di host (biasanya port 80).
Sebuah server HTTP yang mendengarkan di port tersebut menunggu client mengirim
kode permintaan (request), seperti "GET / HTTP/1.1" (yang akan meminta halaman yang
sudah ditentukan), diikuti dengan pesan MIME yang memiliki beberapa informasi header
code yang menjelaskan aspek dari permintaan tersebut, diikut dengan body dari data
tertentu.
Begitu menerima kode permintaan (dan pesan, bila ada), server mengirim kembali kode
jawaban, seperti " HTTP/1.1 200 OK ", dan sebuah pesan yang diminta, atau sebuah pesan
error atau pesan lainnya.

Week 01
Sejarah
 Protokol HTTP pertama kali dipergunakan dalam WWW pada tahun 1990. Pada saat
tersebut yang dipakai adalah protokol HTTP versi 0.9. Versi 0.9 ini adalah protokol
transfer dokumen secara mentah, maksudnya adalah data dokumen dikirim sesuai
dengan isi dari dokumen tersebut tanpa memandang tipe dari dokumen.
 Kemudian pada tahun 1996 protokol HTTP diperbaiki menjadi HTTP versi 1.0.
Perubahan ini untuk mengakomodasi tipe-tipe dokumen yang hendak dikirim
beserta encoding yang dipergunakan dalam pengiriman data dokumen.
 Sesuai dengan perkembangan infrastruktur internet maka pada tahun 1999
dikeluarkan HTTP versi 1.1 untuk mengakomodasi proxy, cache dan koneksi yang
persistent.
Contoh Transaksi
S = Server
C = Client
C : (Inisialisasi koneksi)
C : GET /index.htm HTTP/1.1
C : Host: www.wikipedia.org
S : 200 OK
S : Mime-type: text/html
S:
S : -- data dokumen --
S : (close connection)
Client-side Programming
Secara umum, suatu client adalah satu aplikasi komputer, seperti web browser yang
berjalan pada satu komputer lokal dari pengguna atau workstation, dan terhubung ke
suatu server. Client-side programming adalah program komputer pada web yang
dijalankan pada sisi client, oleh web browser; Hal ini berlawanan arti dengan Server-side
scripting.
Operasi dapat dilakukan oleh client-side karena operasi tersebut membutuhkan akses ke
informasi atau fungsi yang tersedia pada client tetapi tidak pada server, karena pengguna
membutuhkan observasi terhadap operasi tersebut atau menyediakan input, atau server
kekurangan kekuatan pememrosesan untuk melakukan operasi yang tepat waktu untuk
seluruh client yang harus dilayaninya.
Sebagai tambahan, jika operasi dapat dilakukan oleh client tanpa mengirim data melalui
jaringan, maka hal itu memakan waktu lebih sedikit, menggunakan lebih kecil bandwidth
dan mengurangi resiko keamanan.

Week 01
Client-side Script seringkali dimasukkan (embedded) di dalam dokumen HTML, tetapi

dapat juga berada di dalam file terpisah, yang direferensikan oleh dokumen yang
menggunakannya. Atas sebuah request, file yang diperlukan dikirimkan oleh web server
kepada komputer user.
Web browser milik user melakukan eksekusi terhadap Script, lalu menampilkan dokumen,
termasuk output yang dapat terlihat dari Script. Client-side Script juga dapat berisikan
perintah yang harus diikuti oleh web browser jika user berinteraksi dengan dokumen
dengan cara tertentu, contohnya klik sebuah tombol.
Server-side Programming
Terminologi Server-side memiliki arti operasi yang dilakukan oleh server didalam sebuah
client-server relationship.
Umumnya, sebuah server adalah program, seperti web server, yang berada pada sebuah
remote server, yang dapat dijangkau oleh komputer lokal milik user.
Operasi dilakukan pada sisi Server, karena memerlukan akses atas informasi atau fungsi
yang tidak tersedia pada client, atau pada aplikasi yang tidak dapat dilakukan pada Client-
side.
Operasi Server-side juga meliputi proses dan penyimpanan data dari client ke suatu
server, yang dapat dilihat oleh sekelompok Client.
Server-side Scripting adalah teknologi Web Server dimana request oleh user dipenuhi
dengan cara menjalankan script langsung pada web server untuk menghasilkan halaman
HTML dinamis. Umunya menyediakan website interaktif pada database dan penyimpanan
data lainnya.
Keuntungan utama dari Server-side Script adalah kemampuan untuk mengatur response
berdasarkan keperluan user, hak akses, atau query ke dalam data store.

Week 01
Contoh Teknologi Server-side Programming

 ASP
Microsoft designed solution allowing various languages (though generally VBscript
is used) inside a HTML-like outer page, mainly used on Windows but with limited
support on other platforms.
 ColdFusion
Cross platform tag based commercial server side scripting system.
 JSP
A Java-based system for embedding code in HTML pages.
 Lasso
A Datasource neutral interpreted programming language and cross platform server.
 SSI
A fairly basic system which is part of the common apache web server. Not a full
programming environment by far but still handy for simple things like including a
common menu.
 PHP
Common opensource solution based on including code in its own language into an
HTML page.
 Server-side JavaScript
A language generally used on the client side but also occasionally on the server
side.
 SMX
Lisplike opensource language designed to be embedded into an HTML page.
Perangkat Lunak Web Server
Web Server adalah sebuah perangkat lunak server yang berfungsi menerima permintaan
HTTP atau HTTPS dari Client yang dikenal dengan web browser dan mengirimkan kembali
hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML.
Server web yang terkenal diantaranya adalah:
 Apache, web server antar platform
XAMPP
PHPTriad; discontinued
Apache2Triad
 Internet Information Service (IIS), hanya dapat berjalan di sistem operasi MS
Windows

Week 01
Hypertext Markup Language (HTML)
Adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan
menampilkan berbagai informasi di dalam sebuah Web Browser.
Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan
percetakan yang disebut dengan SGML, HTML adalah sebuah standar yang digunakan
secara luas untuk menampilkan halaman web dan HTML kini merupakan standar Internet
yang saat ini dikendalikan oleh World Wide Web Consortium (W3C).
Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTML
yang merupakan pengembangan dari HTML.
HTML berupa kode-kode tag yang menginstruksikan web browser untuk menghasilkan
tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat
dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet
Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan
program lain yang memiliki kemampuan browser.
Secara garis besar, terdapat 4 jenis elemen dari HTML:

1. Structural
Tanda yang menentukan level atau tingkatan dari sebuah teks (contoh,
<h1>Golf</h1> akan memerintahkan browser untuk menampilkan "Golf" sebagai
teks tebal besar yang menunjukkan sebagai Heading 1
2. Presentational.
Tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari
teks tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda
presentational saat ini sudah mulai digantikan oleh CSS dan tidak
direkomendasikan untuk mengatur tampilan teks.
3. Hypertext
tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke
dokumen lain (contoh, <a href="http://www.wikipedia.org/">Wikipedia</a> akan
menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu),
4. Elemen widget, yang membuat objek-objek lain seperti tombol (<button>), list
(<li>), dan garis horizontal (<hr>).

1
Cascading Style Sheets
Definisi
 Adalah suatu teknologi yang digunakan untuk memperindah halaman website
(situs);, dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan
tampilan yang ada di situs kita sekaligus memformat ulang situs kita.
 CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk
digunakan di web browser.
Keuntungan
 Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan
sebuah style-sheet global yang berisi aturan-aturan CSS tersebut untuk diterapakan
pada seluruh dokumen-dokumen HTML pada halaman situs kita.
 User yang berbeda dapat mempunyai style-sheet yang berbeda pula.
 Ukuran dan kompleksitas document code dapat diperkecil.
Brief Intro
A. Sebuah style sheet terdiri dari beberapa aturan (Rules)
B. Masing-masing aturan terdiri dari satu atau lebih Selector dan sebuah Declaration
Block
C. Sebuah declaration block terdiri dari beberapa Declaration yang dipisahkan oleh
titik koma (;)
D. Masing-masing declaration terdiri dari Property, Colon (:), dan Value.
PBW : Week 03 (CSS)

2
Font Properties
Font Family
Syntax:
font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Possible Values:
<family-name>
 Any font family name may be used
<generic-family>
 serif (e.g., Times)
 sans-serif (e.g., Arial or Helvetica)
 cursive (e.g., Zapf-Chancery)
 monospace (e.g., Courier)
Font Style
Syntax:
font-style: <value>
Possible Values:
normal | italic | oblique
Font Variant
Syntax:
font-variant: <value>
Possible Values:
normal | small-caps
Font Weight
Syntax:
font-weight: <value>
Possible Values:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Font Size
Syntax:
font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Possible Values:
 <absolute-size>
 xx-small | x-small | small | medium | large | x-large | xx-large
 <relative-size>
 larger | smaller
 <length>
 <percentage> (in relation to parent element)
PBW : Week 03 (CSS)

3
Font
Syntax:
font: <value>
Possible Values:
[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Contoh:
P { font: italic bold 12pt/14pt Times, serif }
Color & Background Properties
Color
Syntax:
color: <color>
Nilai (value) dari color adalah sebuah keyword atau sebuah kode RGB.
16 keyword diambil dari palette Windows VGA:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,
white, and yellow.
Ada 4 cara dalam menuliskan warna menggunakan kode RGB:

• #rrggbb (e.g., #00cc00)
• #rgb (e.g., #0c0)
• rgb(x,x,x) dimana x adalah integer antara 0 dan 255 (e.g., rgb(0,204,0))
• rgb(y%,y%,y%) dimana y is nomor antara 0.0 dan 100.0 (e.g., rgb(0%,80%,0%))
Semua contoh di atas digunakan untuk menuliskan warna yang sama.
Untuk menghindari konflik dengan style sheets pengguna, properti background dan color
sebaiknya ditulis bersamaan.
Background Color
Syntax:
background-color: <value>
Possible Values:
<color> | transparent
Background
Syntax:
background: <value>
Possible Values:
<background-color> || <background-image> || <background-repeat> ||
<background-attachment> || <background-position>
PBW : Week 03 (CSS)

4
Text Properties
Text Alignment
Syntax:
text-align: <value>
Possible Values:
left | right | center | justify
Box Properties
Bottom Border Width

Syntax:
border-bottom-width: <value>
Possible Values:
thin | medium | thick | <length>
Width
Syntax:
width: <value>
Possible Values:
<length> | <percentage> | auto
Height
Syntax:
height: <value>
Possible Values:
<length> | auto
Border Style
Syntax:
border-style: <value>
Possible Values:
[ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
PBW : Week 03 (CSS)

5
Classification Properties
Display
Syntax:
display: <value>
Possible Values:
block | inline | list-item | none
Properti Display digunakan untuk mendefinisikan sebuah elemen dengan salah satu dari
nilai berikut ini:
 block (a line break before and after the element)
 inline (no line break before and after the element)
 list-item (same as block except a list-item marker is added)
 none (no display)
Whitespace
Syntax:
white-space: <value>
Possible Values:
normal | pre | nowrap
Properti white-space akan menenetukan bagaimana spaces akan diperlakukan didalam
element. Salah satu nilai yang mungkin:
 normal (collapses multiple spaces into one)
 pre (does not collapse multiple spaces)
 nowrap (does not allow line wrapping without a <BR> tag)
List Style Type

Syntax:
list-style-type: <value>
Possible Values:
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
List Style Image

Syntax:
list-style-image: <value>
Possible Values:
<url> | none
List Style Position

Syntax:
list-style-position: <value>
Possible Values:
inside | outside
Properti ini memiliki dua value, yaitu inside dan outside, dimana default value adalah
outside. Properti ini menentukan letak marker atas list item. Jika menggunakan value
‘inside’, garis tidak akan diindentasi, melainkan akan wrap di bawah marker.
PBW : Week 03 (CSS)

6
List Style
Syntax:
list-style: <value>
Possible Values:
<list-style-type> || <list-style-position> || <url>
URLs
A URL value is given by url(foo), where foo is the URL. The URL may be optionally quoted
with either single (') or double (") quotes and may contain whitespace before or after the
(optionally quoted) URL.
Parentheses, commas, spaces, single quotes, or double quotes in the URL must be
escaped with a backslash. Partial URLs are interpreted relative to the style sheet source,
not to the HTML source.
Examples:
BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */
PBW : Week 03 (CSS)

Pertemuan ke 5
Pengantar Common Gateway

Interface (CGI) dan Perl
- Konsep CGI dan Perl
- Lingkungan variabel di Perl
- Metode POST dan GET
Konsep CGI dan Perl
Definisi
CGI adalah suatu bentuk komunikasi dimana client
(browser) dapat mengirimkan suatu masukan kepada
server, dan server mengolah masukan tersebut serta
mengembalikannya kepada client (browser)
Program CGI adalah program yang didisain untuk
menerima dan mengembalikan data sesuai dengan
spesifikasi CGI. Program tersebut dapat ditulis
menggunakan bahasa pemrograman seperti C, Perl,
Java atau Visual Basic.
Pemrograman Web/TI/ AK 045216/2 sks

Konsep CGI dan Perl
Perl
Perl merupakan singkatan dari Practical Extraction and
Report Language, dibuat oleh Larry Wall.
Perl adalah bahasa interpreter sekaligus kompiler, artinya

Perl akan mendeteksi setiap baris untuk mencari syntax
error sebelum program dijalankan.

Variabel di Perl
• Perl memiliki tiga tipe data: skalar, array, dan hash.

• Skalar menyimpan nilai tunggal, array menyimpan kumpulan skalar dengan
urutan tertentu, sedangkan hash menyimpan kumpulan skalar berpasangan.
• Sebuah variabel dinyatakan dengan tanda awalan tertentu yang merujuk pada
tipe data yang dikandungnya, serta nama yang berfungsi sebagai pengenal.
• Tanda pengenal adalah $ untuk skalar, @ untuk array, dan % untuk hash.
• Nama variabel terdiri atas huruf dan angka, disebut juga alfanumerik (karakter
“_” dihitung sebagai huruf).
• Nama variabel tidak boleh dimulai dengan angka.
• Tidak ada ketentuan mengikat mengenai berapa panjang nama variabel yang
boleh digunakan.

Variabel di Perl
Skalar
Variabel skalar menyimpan unit data yang paling mendasar. Apa yang dikandung skalar, itu
jugalah yang bisa dikandung oleh array dan hash. Sebuah skalar hanya mengandung string
atau angka. Ini juga berarti bahwa semua informasi—dari manapun asalnya—akan
diperlakukan sebagai string atau angka. String dikutip menggunakan kutip ganda atau kutip
tunggal. Angka bisa berupa bilangan bulat, oktal, heksadesimal, maupun pecahan desimal.
$nama = „hasan‟;
$_nama2 = $nama . „t‟; # hasant
$tahun = 2001;
$satu_dollar = 8500.43;
$dua_tahun_lalu = $tahun - 2; # 1999
Untuk memasukkan kutip tunggal dalam string yang dikutip tunggal digunakan \ (garis miring
terbalik) di depannya. Begitupun untuk memasukkan kutip ganda dalam string yang dikutip
ganda. Dan untuk memasukkan \ itu sendiri, tambahkan \ satu lagi. Ini disebut meng-escape
character.
$putih = „#FFFFFF‟;
$body = “<body bgcolor=\”$putih\”>”;
$dialog = „”Dia t\‟lah pergi,” katanya‟;
Variabel di Perl
Array
Array didefinisikan dengan memasukkan elemen-elemennya ke dalam tanda kurung dan dipisahkan dengan ,
(koma). Koma tidak wajib diletakkan pada elemen terakhir. Di Perl, ini sebenarnya sebuah konstruksi data yang
disebut list.
@minuman = (‟kopi‟, „teh‟, „air‟);
Kadang-kadang kedua istilah ini, array dan list, bisa dipertukarkan, dan memiliki makna yang sama. Namun,
harus disadari bahwa keduanya tetap berbeda secara logik. Array adalah jenis variabel, sementara list adalah
konstruksi data. Dalam pengertian singkat, bisa dikatakan bahwa array adalah list yang bernama. Semua array
berisi list, tapi tidak semua list berupa array. Dengan pengertian ini kita bisa mendefinisikan sekumpulan
variabel skalar dalam list.
($satu, $dua, $tiga) = (1, 2, 3);
Elemen array diakses dengan sintaks $array[0], angka di dalam “[]” menujukkan indeks elemen dimulai dari 0,
yang berarti elemen pertama. Indeks negatif (dimulai dari -1) menghitung elemen dari belakang.
$minuman[0] # berisi “kopi”
$minuman[2] # berisi “air”
$minuman[-1] # sama, berisi air
Jika kebetulan semua elemen array tidak ada yang mengandung spasi, maka kita bisa mendefinisikan sebuah
array tanpa menggunakan tanda kutip dan koma. Sebagai gantinya kita menggunakan operator qw().
@minuman = qw(kopi teh air);

Variabel di Perl
Hash
Definisi hash mirip dengan array. Setiap elemen hash terdiri atas pasangan indeks (key) dan nilai
(value). Berbeda dengan array, indeks di hash menggunakan string, dan nilainya bisa diakses dengan
sintaks $hash{‟indeks‟}.
%aplikasi = (
„bahasa‟, „perl‟,
‟server‟, „apache‟,
„teks‟, „vim‟,
);
print $aplikasi{‟bahasa‟}; # perl
Indeks yang mengandung karakter sederhana tidak perlu dikutip karena otomatis dianggap sebagai
string. Namun jika indeks mengandung karakter selain huruf dan angka, kutip harus digunakan. Hal ini
juga berlaku ketika mengakses elemen. Jadi, $aplikasi{‟bahasa‟} bisa ditulis sebagai $aplikasi{bahasa}.
Benar dan Salah. Kadang-kadang Anda tidak ingin mengetahui nilai kembalian dari sebuah ekspresi,
baik string maupun angka, Anda hanya ingin tahu benar atau salah. Perl tidak punya jenis data boolean
khusus. Nilai sebuah ekspresi adalah salah satu dari: tak terdefinisi (undefined), benar (true), atau,
salah (false). Untuk memudahkan urusan, selanjutnya saya akan menyebut “tak terdefinisi” dengan
“undef”. Aturan Perl sederhana, semua nilai benar, kecuali yang undef, string kosong (“” atau „‟), angka
0, dan string “0″.

Metode POST dan GET
Tag <FORM> dan <INPUT> digunakan bersama-sama untuk meminta
masukan dari user untuk dikirim ke server. Tag <FORM> membuat kerangka dan
tag <INPUT> menyediakan elemen antarmuka dengan user. Untuk standar
penulisan form adalah sebagai berikut :
<FORM METHOD =”POST/GET” ACTION =”URL”>
…
…
…
</FORM>
Atribut METHOD memiliki 2 nilai POST dan GET. Metode GET mengirimkan data
pada server dengan cara meletakkan data pada bagian akhir URL yang ditunjuk.
Metode POST mengirimkan datanya secara terpisah. Jika masukan banyak maka
disarankan menggunakan POST. ACTION akan berisi URL dari program yang
dipanggil form tersebut.
Daftar Pustaka
Sayid Munawar, “Menjadi WebProgrammer HTML, PHP & MySQL, Dasar
dan Aplikasi ”, 2003. http://cici-tresnawati.tripod.com/Cici.htm.html
http://www.lies.com/begperl/
http://www.ezscripting.com/pathtoperl/

Pertemuan ke 6
JAVASCRIPT
Pemrograman Web/TI/ AK045216/2 sks

Pengantar JavaScript
• JavaScript digunakan pada Web pages untuk meningkatkan design,

validate forms, detect browsers, create cookies, GUI dsb
• JavaScript adalah bahasa scripting yang paling populer di internet

dan bekerja pada banyak browser seperti Internet Explorer, Mozilla,
Firefox, Netscape, Opera.
• Menggunakan sintaks seperti C++/Java
• Lihat di http://www.w3schools.com/js/

Apa itu JavaScript?
• JavaScript dirancang untuk menambah interaktif HTML pages
• JavaScript adalah bahasa scripting (bahasa scripting adalah sebuah
lightweight programming language)
• JavaScript terdiri dari baris-baris code executable computer
• JavaScript biasanya embedded secara langsung pada HTML pages
• JavaScript adalah interpreted language (artinya bahwa scripts dijalankan
tanpa di kompile terlebih dahulu)
• Setiap orang dpt menggunakan JavaScript tanpa harus membeli license

Apakah Java dan JavaScript sama ?
• Java dan JavaScript adalah dua bahasa yang berbeda baik dari sisi konsep
maupun dari sisi desain
• Java (dikembangkan oleh Sun Microsystems) adalah sebuah bahasa

pemrograman yang powerful & sangat kompleks – sama dengan C & C++.

Apa yang dapat dilakukan JavaScript ?
• JavaScript dapat bereaksi terhadap events - JavaScript dapat di-set untuk menjalankan saat
terjadi sesuatu, seperti sebuah page telah selesai dipanggil atau saat seorang user meng-klik pada
HTML element
• JavaScript dapat membaca dan menulis HTML elements - JavaScript dapat membaca dan
mengubah isi dari HTML element
• JavaScript dapat digunakan untuk mem-validasi data - JavaScript dapat digunakan untuk
mem-validasi form data sebelum di-submitted ke server, hal ini akan mengamankan server dari
pemrosesan extra
• JavaScript dapat digunakan untuk mendeteksi browser pengunjung - JavaScript dapat

digunakan untuk mendeteksi browser pengunjung dan – memanggil page lain yang secara specifik
didesain untuk browser tersebut
• JavaScript dapat digunakan untuk membuat cookies - JavaScript dapat digunakan untuk
menyimpan dan memanggil informasi di komputer pengunjung
Pemrograman Client-Side
• HTML cocok untuk mengembangkan static pages
 Dapat digunakan membuat text/image layout, presentation, links, …
 Web page tampak sama setiap kali diakses
 Untuk mengembangkan interactive/reactive pages, harus diintegrasikan dengan programming
• Pemrograman client-side
 Programs ditulis dalam bahasa pemrograman yang terpisah
contoh : JavaScript, JScript, VBScript
 Programs diembedded pada HTML Web page, untuk mengidentifikasi komponen program
Contoh : <script type="text/javascript"> … </script>
 Untuk menjalankan program guna menampilkan page digunakan browser, yang
mengintegrasikan dynamic output dengan static content dari HTML

Scripts vs. Programs
• Bahasa scripting adalah simple, termasuk bahasa pemrograman interpreted
scripts di-embedded sebagai plain text, interpreted by application
 simpler execution model : tidak membutuhkan compiler / development environment
 saves bandwidth : source code di-download, tidak mengcompile executable
 platform-independence : kode di terjemahkan oleh banyak script-enabled browser
 Tetapi : lebih lambat daripada compiled code, tidak powerful/full-featured
JavaScript: adalah Web scripting language pertama, yang dikembangkan oleh Netscape pada
tahun 1995. Mirip dengan Java/C++, tetapi lebih sederhana dan lebih fleksibel (loose typing,
dynamic variables, simple objects)
JScript: adalah JavaScript versi Microsoft, diperkenalkan tahun 1996 core language yang sama,
tetapi beberapa browser-specific seperti, IE & Netscape umumnya dapat menangani
JavaScript & JScript
VBScript: adalah client-side scripting versi Microsoft Visual Basic

Common Scripting Tasks
• Menambahkan dynamic features pada Web pages
 validation of form data  image rollovers
 time-sensitive or random page elements  handling cookies
• Mendefinisikan programs dengan Web interfaces

 Menggunakan buttons, text boxes, clickable images, prompts, frames
• Keterbatasan dari client-side scripting

 Karena script code di-embedded dalam page, maka script dapat dilihat
 Untuk alasan keamanan, apa yang dapat dilakukan oleh script dibatasi
Contoh : tidak dapat mengakses hard drive client
 Karena dirancang untuk berbagai platform, maka script tidak berisi perintah khusus untuk
setiap platform
 Script languages tidak full-featured
Contoh : Objek JavaScript tidak cocok untuk pengembangan proyek yg besar

Sintaks JavaScript
• Program JavaScript dituliskan pada file HTML (.html atau .htm) menggunakan tag <SCRIPT>
• Output dari program JavaScript ditampilkan secara langsung seolah-oleh dimasukkan dalam HTML
<HTML>
<HEAD>
<SCRIPT language=“javascript”>

</SCRIPT>
</HEAD>
</HTML>

Contoh Program JavaScript
<html>
<!–- COMP519 js01.html 7.09.2005 -->
document.write menampilkan teks dalam
<head> page
<title>JavaScript Page</title>
</head> Teks yang ditampilkan dapat termasuk
HTML tags
<body>
<script type="text/javascript">
tags diterjemahkan oleh browser saat teks
// silly code to demonstrate output
ditampilkan
document.write(“<FONT COLOR=‘GREEN'>
Hello world!</FONT>"); Seperti pada C++/Java, statement diakhiri
document.write("<p>How are <br/>" +
dengan ;
"<i>you</i>?</p>");
</script> Komentar pada JavaScript sama dengan
C++/Java
<p>Here is some static text as well.
</p> // awal satu baris komentar
/*…*/ akhir dari beberapa baris komentar
</body>
</html>
Tipe Data dan Variabel JavaScript
• JavaScript hanya mempunyai 3 tipe data primitive
String : "foo" 'howdy do' "I said 'hi'." ""
Number : 12 3.14159 1.5E6
Boolean : true false
<html>
<!–- COMP519 js02.html 07.09.2005 --> Inisialisasi seperti pada C++/Java
message = "howdy";
<head> pi = 3.14159;
<title>Data Types and Variables</title>
</head>
Nama variable terdiri dari letters, digits, dan
<body> underscores: diawali dengan letter
var x, y;
x= 1024; Nama variables adalah case-sensitive
y=x; x = "foobar";
document.write("<p>x = " + y + "</p>");
you don't have to declare variables, will be
document.write("<p>x = " + x + "</p>"); created the first time used, but better if you
</script> use var statements
</body> var message, pi=3.14159;
</html>

Operator & Statement Kontrol
<html>
<!–- COMP519 js03.html 7.09.2005 --> Operator standard dan statement kontrol
pada C++/Java sama seperti pada
<head> JavaScript
<title>Folding Puzzle</title>
</head> • +, -, *, /, %, ++, --,
…
<body>
• ==, !=, <, >, <=, >=
distanceToSun = 93.3e6*5280*12; • &&, ||, !,===,!==
thickness = .002;
• if-then, if-then-else, switch
foldCount = 0; • while, for, do-while, …
while (thickness < distanceToSun) {
thickness *= 2;
foldCount++;
}
document.write("Number of folds = " +
foldCount);
</script>
</body>
</html>

Operator & Statement Kontrol (lanj)
Script di bawah ini adalah contoh penggunaan if - else.
<SCRIPT LANGUAGE="JavaScript">
function tanya()
{ var jawab=" "
var jawab=prompt("Anda senang bikin hompej ?")
var JAWAB = jawab.toUpperCase()
var tampil="Jawab dong, ya/yup atau tidak/nggak"
if ( JAWAB == "YA" || JAWAB == "YUP")
{ var tampil="Sama dong, saya juga :D" }
if(JAWAB == "TIDAK" || JAWAB == "NGGAK")
{ var tampil="Iya euy, bikin suntuk tuh (_ _)Zz..“ }
alert(tampil)
} </SCRIPT> <b>Hobi</b>
<FORM> <INPUT TYPE="button" VALUE="polling" onClick="tanya()"> </FORM>

Operator & Statement Kontrol (lanj)
Penggunaan if dapat digantikan dengan "switch".
function tanya()
{ var jawab=" “
var jawab=prompt("Anda senang bikin hompej ?")
var JAWAB = jawab.toUpperCase()
switch(JAWAB)
{
case "YA" : var tampil="Sama dong, saya juga :D"
break;
case "YUP" : var tampil="Sama dong, saya juga :D"
break;
case "TIDAK" : var tampil="Iya euy, bikin suntuk tuh (_ _)Zz.."
break;
case "NGGAK" : var tampil="Iya euy, bikin suntuk tuh (_ _)Zz.."
break;
default : var tampil="Jawab dong, ya/yup atau tidak/nggak"
break;
}
alert(tampil)
}
</SCRIPT> <b>Hobi</b>
<FORM> <INPUT TYPE="button" VALUE="polling" onClick="tanya()"> </FORM>
Loop For dan While
Adalah perintah untuk melakukan iterasi (loop) atau melakukan pengulangan.
<b>Kita cuman menghitung dari 1 sampai 7:</b><br>

<script language="JavaScript">
for (i=1; i<=7; i=i+1)
{
document.write("Ini angka " + i + "<BR>");
}
</SCRIPT>
Script di atas hanya akan memberikan hasil seperti di bawah ini.

Kita cuman menghitung dari 1 sampai 7:
Ini angka 1
Ini angka 2
Ini angka 3
Ini angka 4
Ini angka 5
Ini angka 6
Ini angka 7

Loop For dan While (lanj)
• Sedangkan contoh penggunaan while untuk output yang sama adalah sebagai berikut :
iterasi=7
i=1
while (i <= iterasi)
{
document.write("Ini angka " + i + "<BR>");
i=i+1
}
</SCRIPT>
• Hasilnya seperti di bawah ini.

Ini angka 1
Ini angka 2
Ini angka 3
Ini angka 4
Ini angka 5
Ini angka 6
Ini angka 7

Memonitor User Events
• Bermacam-macam onXxx Attributes
- onClick - onBlur
- onLoad - onSubmit
- onMouseOver - onSelect
- onMouseOut - onFocus

Event Handler onClick
• Biasanya digunakan untuk menampilkan pesan singkat jika seseorang melakukan tindakan
tertentu. Dengan pesan tersebut, maka user akan tahu akibat dari tindakannya.
• Misal peringatan dengan Tombol. Penekanan dengan tombol sering digunakan untuk memberikan
efek interaktif dengan user
<HTML> <HEAD>
<TITLE>Simple JavaScript Button</TITLE>
<SCRIPT TYPE=“text/javascript">

</SCRIPT> </HEAD>
<BODY BGCOLOR=“WHITE”>
<H1>Simple JavaScript Button</H1>
<FORM>
<INPUT TYPE=“BUTTON”
VALUE=“Don‟t Click Me” onClick=“alert(„hey…I said don‟t click me‟); return value”>
</FORM>
</BODY></HTML>
Event Handler onMouseOver
Event handler onMouseOver ini gunanya untuk mengatur apa yang akan terjadi saat mouse kita
gerakkan ke atasnya.
<A HREF="http://xxx.com" onMouseOver="window.status='Ke Menu Utama'; return true">
Klik di sini</A>
Dengan menggunakan onMouseOver juga dapat mengubah property lain. Misalnya akan mengubah
warna latar dokumen, yaitu dengan menggunakan document.bgColor .
<A HREF="http://xxx.com" onMouseOver="document.bgColor= '#ffcc99'; return true">
Klik di sini</A>
Untuk menggabung dua efek di atas, perubahan window.status dan document.bgColor - hmm tidak
terlalu sulit, cukup memisahkan kedua efek tersebut dengan koma (,) seperti script berikut.
Perintah onMouseOver yang kedua berada di antara tanda petik (") untuk membuat efeknya terjadi
secara simultan.
<A HREF="http://xxx.com" onMouseOver="document.bgColor='#ffcc99',

onMouseOver=window.status='Ke Menu Utama'; return true">Klik di sini</A>

Event Handler onMouseOver & onMouseOut
• Untuk membuat gambar yang bisa berubah saat didekati mouse, cukup menggunakan script
sederhana seperti di bawah ini.
<A HREF="http://xxx.com/" onMouseOver="document.

gambarku.src='gambar1.gif'" onMouseOut="document.gambarku.src='gambar2.gif'">
<IMG SRC="gambar2.gif" BORDER=0 NAME="gambarku"></a>
Saat mouse mendekati gambar, onMouseOver aktif, sehingga gambar yang muncul adalah
gambar2.gif.
Sedang saat mouse menjauh, onMouseOut aktif, dan gambar yang muncul adalah
gambar1.gif.

Event Handler onFocus dan onBlur
• Event handler onFocus ini bekerja saat user terfokus pada sebuah item.
<FORM>
<INPUT TYPE="text" SIZE="30" onFocus="window.status='Anda sekarang siap mengisi kotak';">
</FORM>
• Event handler onBlur adalah kebalikan dari onFocus.

<FORM>
<INPUT TYPE="text" SIZE="40" VALUE="Tulis nama anda, kemudian pindahkan kursor dari
kotak ini" onBlur="alert('Anda telah mengedit isi kotak, bener nih nggak nyesel ?');">
</FORM>

Event Handler onSelect dan onSubmit
•Event handler ini bekerja saat user memilih (memblok) isi kotak.
<FORM>
<INPUT TYPE="text" SIZE="40" VALUE="Tulis nama anda, kemudian pindahkan kursor
dari kotak ini" onSelect="alert('Hehehe, gagal deh ngeblok');">
</FORM>
•Event Handler onSubmit, bekerja saat user mengklik tombol submit.

<FORM onSubmit="alert('Anda yakin mau mengirim data ?')";>
<INPUT TYPE="submit Query">
</FORM>

User-Defined Classes
• Dapat mendefinisikan class baru, tetapi dengan notasi yang awkward
 Pendefinisian sederhana sebuah fungsi yang bertindak sebagai constructor
 Menentukan data fields & methods menggunakan this
 Tidak ada data yang disembunyikan : tidak dapat melindungi data atau methods
// COMP519 Die.js 09.09.2005//

// Die class definition define Die function (i.e.,
//////////////////////////////////////////// constructor)
function Die(sides)
{
inisialisasi data fields pada
this.numSides = sides; fungsi, diawali dengan this
this.numRolls = 0;
this.Roll = Roll; similarly, assign method to
}
separately defined function
function Roll() (which uses this to access
{ data)
this.numRolls++;
return Math.floor(Math.random()*this.numSides) + 1;
}

Object dan Class
• Dapat menggunakan Notasi Literal
- Objek dat dibuat menggunakan notasi “literal” pada form
{ field1:val1, field2:val2, …, fieldN:valN }
- Sebagai contoh, berikut ini memberikan nilai equivalent pada object1 dan
object2
var object1 = new Object();
object1.x =3;
object1.x =4;
object1.x =5;
object2.x = { x:3, y:4, z:5};

Object dan Class
Methods adalah Function-Valued Properties
• Tidak ada sintaks khusus untuk mendefinisikan method dari object
• Berikutnya adalah property yang dimiliki oleh document yaitu seperti pada script berikut:
<SCRIPT LANGUAGE="javascript">
var bgc = document.bgColor; var fgc = document.fgColor;
var lc = document.linkColor; var al = document.alinkColor;
var vlc = document.vlinkColor; var url = document.location;
var ref = document.referrer; var t = document.title;
var lm = document.lastModified;
document.write("Warna latar (background color) halaman ini <B>" +bgc+ "</B>.")
document.write("<BR>Warna teksnya (mmm foreground color) <B>" +fgc+ "</B>.")
document.write("<BR>Warna link adalah <B>" +lc+ "</B>.")
document.write("<BR>Kalau warna link yang aktif <B>" +al+ "</B>.")
document.write("<BR>Dan warna link yang telah dikunjungi <B>" +vlc+ "</B>.")
document.write("<BR>Alamat URL halaman ini <B>" +url+ "</B>.")
document.write("<BR>Halaman yang anda lihat sebelum melihat halaman ini <B>" +ref+ "</B>.")
document.write("<BR>Judul halaman ini (title lah kalau nggak ngerti judul) <B>" +t+ "</B>.")
document.write("<BR>Dokumen ini terakhir diedit: <B>" +lm+ "</B>.")
</SCRIPT>
Object dan Class (lanj)
• Script di atas akan memberikan hasil berikut:
Warna latar (background color) halaman ini #ffffff.

Warna teksnya (mmm foreground color) #000000.
Warna link adalah #0000ff.
Kalau warna link yang aktif #0000ff.
Dan warna link yang telah dikunjungi #800080.
Alamat URL halaman ini file:///F:/14.Ngajar/Web%20Programming/javascript4.htm.
Halaman yang anda lihat sebelum melihat halaman ini .
Judul halaman ini (title lah kalau nggak ngerti judul) Tutorial - Java Script.
Dokumen ini terakhir diedit: 08/29/2006 10:29:36.
Script di atas menjelaskan tentang kegunaan tiap property dari document.

Interactive Pages menggunakan Prompt
<html>
<!–- COMP519 js05.html 08.09.2005 -->
<head>
<title>Interactive page</title> 1st argument: prompt message
</head> tampak pada dialog box
<body>
<script type="text/javascript"> 2nd argument: default value
userName = prompt("What is your name?", ""); akan muncul pada kotak
userAge = prompt("Your age?", "");
userAge = parseFloat(userAge);
3rd Fungsi mengembalikan nilai
yang dimasukkan oleh user ke
document.write("Hello " + userName + ".") dalam dialog box
if (userAge < 18) {
document.write(" Do your parents know " +
"you are online?"); Jika value adalah sebuah
} number, harus menggunakan
</script> parseFloat untuk
<p>The rest of the page...
mengubahnya
</body>
</html>

Deklarasi Fungsi
- Function dideklarasikan menggunakan reserved word
- Nilai yang dikembalikan tidak dideklarasikan, begitu juga tipe dari argumentasi
- Contoh :
function square(x) {
return(x * x); }
function factorial(n) {
if (n <=0) {
return(1);
} else {
return(n * factorial(n-1));
}
}

User-Defined Functions
• Pendefinisian fungsinya sama seperti pada C++/Java, kecuali :
 Tidak ada return type untuk fungsi (karena variabelnya adalah loosely typed)
 Tidak ada types untuk parameters (karena variabelnya adalah loosely typed)
 by-value parameter passing only (parameter gets copy of argument)
function isPrime(n)
// Assumes: n > 0
can limit variable scope
// Returns: true if n is prime, else false
{ Jika penggunaan pertama dari variable
if (n < 2) { diawali dengan var, maka variabel
return false;
tersebut adalah local pada fungsi
}
else if (n == 2) {
return true; Untuk modularity, sebaiknya dibuat
} semua variabel ada pada sebuah
else {
for (var i = 2; i <= Math.sqrt(n); i++) {
fungsi local
if (n % i == 0) {
return false;
} }
return true;
} }

Contoh Fungsi
<html>
<!–- COMP519 js06.html 08.09.05 -->
<head> <title>Prime Tester</title>
Definisi fungsi
function isPrime(n)
// Assumes: n > 0 dimulai pada HEAD
// Returns: true if n is prime
{
// CODE AS SHOWN ON PREVIOUS SLIDE
} HEAD dipanggil
</script> </head> pertama, jadi fungsi
didefinisikan
<body>
<script type="text/javascript"> sebelum code
testNum = parseFloat(prompt("Enter a positive integer", "7")); dalam BODY
dijalankan
if (isPrime(testNum)) {
document.write(testNum + " <b>is</b> a prime number.");
}
else {
document.write(testNum + " <b>is not</b> a prime number.");
}
</script>
</body> </html> Pemrograman Web/TI/ AK045216/2 sks
Date Class
• String & Array adalah class yg paling sering digunakan pada JavaScript
 special purpose classes & objects juga ada
• Date class dapat digunakan untuk mengakses date dan time

 Utk membuat Date object, gunakan new & supply year/month/day/… yg diinginkan
today = new Date(); // sets to current date & time
newYear = new Date(2002,0,1); //sets to Jan 1, 2002 12:00AM
 methods yang termasuk adalah :

newYear.getYear()
newYear.getMonth()
newYear.getDay() dapat mengakses komponen
newYear.getHours() individual dari sebuah date
newYear.getMinutes()
newYear.getSeconds()
newYear.getMilliseconds()

Contoh Date (1)
Script kedua yang akan kita coba adalah menampilkan waktu seperti di bawah ini:
Hari ini 3-9-2006, jam: 7:16.40
Untuk menampilkan waktu seperti di atas kita dapat menggunakan script berikut:
<html>
<!–- COMP519 js11.html 09.09.2005 -->
<head> <title>Time page</title> </head>
<body>
Time when page was loaded:
<SCRIPT LANGUAGE="JavaScript"> //Script tentang waktu
Sekarang = new Date();
document.write("Hari ini " + Sekarang.getDate() + "-" +
(Sekarang.getMonth()+1)+ "-" + Sekarang.getFullYear() + ",
jam: " + Sekarang.getHours() + ":" + Sekarang.getMinutes() +
"." + Sekarang.getSeconds())
</SCRIPT>
</body> </html>

Contoh Date (2)
<html>
<!–- COMP519 js11.html 09.09.2005 -->
<head> <title>Time page</title> </head> Secara default, date akan ditampilkan
<body> secara penuh,
Time when page was loaded:
<script type="text/javascript"> Sun Feb 03 22:55:20 GMT-
now = new Date(); 0600 (Central Standard
document.write("<p>" + now + "</p>"); Time) 2002
time = "AM";
hours = now.getHours();
if (hours > 12) {
hours -= 12;
time = "PM" Dapat pula hanya menampilkan sebagian
} dari date yang diinginkan menggunakan
else if (hours == 0) { methods
hours = 12;
}
document.write("<p>" + hours + ":" + here, determine if "AM" or "PM" and
now.getMinutes() + ":" + adjust so hour between 1-12
now.getSeconds() + " " +
time + "</p>");
</script> 10:55:20 PM
</body> </html>
Contoh Class
<html>
<!–- COMP519 js15.html 09.09.2005 --> create a Die object using new
<head>
<title>Dice page</title> (similar to String and Array)
<script type="text/javascript"
src="Die.js"> here, the argument to Die
</script> </head>
<body>
initializes numSides for that
<script type="text/javascript"> particular object
die6 = new Die(6);
die8 = new Die(8); each Die object has its own
roll6 = -1; // dummy value to start loop properties (numSides &
roll8 = -2; // dummy value to start loop numRolls)
while (roll6 != roll8) {
roll6 = die6.Roll();
roll8 = die8.Roll(); Roll(), when called on a
document.write("6-sided: " + roll6 + particular Die, accesses its
" " + numSides property and
"8-sided: " + roll8 + "<br />"); } updates its NumRolls
document.write("<br />Number of rolls: " +
die6.numRolls);
</script>
</body> </html>
JavaScript untuk membuat Page Dynamic
Membuat Password
• Password adalah system pengamanan untuk pencegahan hal-hal yang tidak diinginkan dari
pihak luar.
• Penerapan password dapat dilakukan dengan berbagai cara.
• Misalnya dari jumlah karakter password yang harus terdidi dari jumlah karakter tertentu,
password dengan enkripsi atau pembatasan pemasukan password
• Password terbatas untuk membatasi proses pengisian password yang berulang kali

JavaScript untuk membuat Page Dynamic (lanj)
<HTML> <SCRIPT language=“JavaScript”>
Function InputPassword()
{ coba=1;
var Pass
do { Pass=prompt(„Masukkan password !‟)
if (Pass==“Hanya Aku Yang Tahu”)
{ alert(“Hai..Selamat datang !!”);
window.open(„coba1.htm‟);
break; }
else { alert(“Password nggak cocok !! Ulangi lagi !!”);
if (coba==3)
{ alert(“Maaf sudah 3x !!”);
history.go(-1); }
coba=coba+1; } }
While (coba<=3)
}
</script> <form method=“POST”>
<p><input type=button value=“Password” name=“B3” onClick=“Input Password()”> </p>
</form> </html>
Membuat Form Interaktif (1)
function warna(pilihan)
{ alert("Wah ternyata kamu suka " + pilihan + " toh.")
document.bgColor=pilihan }
</SCRIPT> <h3>Pilih warna favorit anda.</h3>
<FORM>
<INPUT TYPE="button" VALUE="Biru" onClick="warna('lightblue')">
<INPUT TYPE="button" VALUE="Pink" onClick="warna('pink')">
<INPUT TYPE="button" VALUE="Coklat" onClick="warna('burlywood')">
<INPUT TYPE="button" VALUE="Kelabu" onClick="warna('darkgray')">
<INPUT TYPE="button" VALUE="Oranye" onClick="warna('peachpuff')">
<INPUT TYPE="button" VALUE="Putih" onClick="warna('white')">
</FORM>

Membuat Form Interaktif (2)
Script untuk membuat mesin pencari seperti di atas dapat anda lihat berikut ini.
<SCRIPT LANGUAGE="JavaScript"> function cari()
{ var kata = document.formcari.keyword.value;
{ var hasil = "http://www.google.com/search?q=" + kata ;
window.open(hasil, 'google', config='height=500,width=750 scrollbars=yes
location=yes')
}
}
•</SCRIPT>
•<FORM NAME="formcari" onSubmit="cari()"> Cari pakai Google:
<INPUT NAME="keyword" SIZE="40" TYPE="text">
<INPUT TYPE="submit" VALUE="Cari .. !!"> </FORM>

JAVA
1
Language Features
Simple
Sintaks berdasar pada C++ (transisi lebih mudah bagi programmer)
Menghilangkan feature yang jarang dipakai
contoh : explicit pointers, operator overloading, automatic coercions
Penambahan memory management (mengacu pada count/garbage collection hybrid)
Object-oriented
Fasiltas OOP mirip dengan C++
OOP murni – seluruhnya adalah class, tidak ada independent functions
Robust
ketiadaan pointers dan memori manajemen menghindari banyak error
*libraries of useful, tested classes increases level of abstraction
arrays & strings are ADTs, well-defined interfaces
Portable
byte kode akan run pada versi manapun dari Java Virtual Machine (JVM)
2
Language Features
• Platform independence
Dapat menjalankan Java code pada multiple platforms
Netralitas dicapai dengan mencampur compilation & interpretation
Java programs diterjemahkan ke dalam byte code oleh Java compiler
– byte code is a generic machine code
byte code kemudia dieksekusi oleh interpreter (Java Virtual Machine)
– must have a byte code interpreter for each hardware platform
Sebuah Applet adalah sebuah special form dari Java application
byte code di download pada page, JVM di-embedded pada browser
• Architecture-neutral
Tidak ada implementation bergantung pada features (contoh : size dari primitive types)
• High-performance
Lebih cepat daripada traditional interpretation karena byte code mendekati native code
Masih sedikit lebih lambat daripada compiled language (contoh : C++)
3
Language Features
Distributed
Extensive libraries untuk mengatasi TCP/IP protokol seperti HTTP & FTP
Aplikasi Java dpt mengakses remote URL'S sama seperti halnya mengakses file lokal
Multi-threaded
Sebuah thread seperti sebuah program terpisah, dijalankan secara berbarengan
Dapat menulis program Java dimana beberapa pekerjaan dpt dilakukan sekaligus dgn
mendefinisikan multiple threads (same shared memory, but semi-independent execution)
Threads penting untuk multi-media, web applications
Secure
Aplikasi Java applications tidak dapat langsung mengakses ke lokasi memory
¾ Akses memory adalah virtual, dipetakan oleh JVM ke lokasi fisik
¾ Downloaded appletstidak dapat membuka, membaca atau menyalin local files
JVM memeriksa autentifikasi dari class juga memeriksa autentifikasi dari class yg di-load
Sun meng-klaim: Model execution memungkinkan virus-free*, tamper-free* systems
4
Bagaimana Java Bekerja…!
Compile-time Environment Compile-time Environment
Class
Loader Java
Class
Bytecode Libraries
Java Verifier
Source
(.java)
Just in
Java Java
Time
Bytecodes Interpreter Java
Compiler
move locally Virtual
or through machine
Java network
Compiler
Runtime System
Java Operating System

Bytecode
(.class )
5
Hardware
Bagaimana Java Bekerja …!
Java independent hanya untuk satu alasan :
Hanya bergantung pada Java Virtual Machine (JVM),
Code dikompiled ke bytecode, yang di-interpreted oleh resident JVM,
JIT (just in time) compilers mencoba untuk meningkatkan kecepatan.
6
Keamanan - Java
• Pointer denial – mengurangi kesempatan virulent programs merusak host
• Applets lebih terbatas lagi -

Tidak bisa
Menjalankan local executables,
Read atau write ke local file system,
Berkomunikasi dengan beberapa server lain selain dengan originating server.
7
Object-Oriented
• Java mendukung OOD
Polymorphism
Inheritance
Encapsulation
• Program Java berisi tak lain hanya definisi dan instantiation dari class
Semuanya di-encapsulate dalam sebuah class!
8
Keuntungan Java
• Portable - Write Once, Run Anywhere
• Keamanannya sudah dipikirkan secara matang
• Memory management sempurna
• Didesain untuk network programming
• Multi-threaded (berbagai tugas simultaneous)
• Dynamic & extensible (loads of libraries)
Class disimpan pada file yang terpisah
Loaded hanya jika dibutuhkan
9
Java Programming Models
• Java applications are stand-alone programs
Harus dikompile menjadi Java byte code dengan Java compiler
Dieksekusi oleh sebuah interpreter (Java Virtual Machine)
• Java applets provide for client-side programming

dikompile menjadi Java byte code, kemudian di-downloaded sebagai bagian dari
sebuah Web page
Dieksekusi oleh JVM embedded dalam Web browser
Tidak seperti JavaScript, Java full-featured dengan extensive library support

Java dan APIs-nya telah menjadi standard industri
¾ Pendefinisian language dikontrol oleh Sun, untuk meyakinkan compatibility
¾ Applications Programming Interfaces standardize the behavior of useful
classes and libraries of routines*
• Java servlets provide similar capabilities on the server-side

Merupakan alternative dari CGI programs, lebih terintegrated dengan Web server
10
Java Applets
• Important point : Java applets & applications look different!
Jika ingin mendefinisikan stand-alone application, buat sebuah aplikasi
membutuhkan public static void main function, sama dengan C++ main
Jika ingin meng-embed code pada sebuah Web page, buat sebuah applet
membutuhkan public void paint, public void init, …
• As with JavaScript, security is central

Ketika sebuah Java applet di-downloaded, pemeriksa bytecode dari JVM memeriksa
agar dapat melihat pada saat bytecode berisi byte yang terbuka, terbaca dan tertulis
dalam lokal disk.
Java applet dapat membuka sebuah window baru dengan Java logo untuk pencegahan,
yaitu dengan menyembunyikan system windows (contohnya: pencurian passwords)
Java applet tidak membolehkan untuk terhubung ke server lain kecuali ke host.
Kondisi yang aman/secure ini disebut sand box model
11
First Java Applet
import java.awt.*;
import java.applet.*;
/**
* This class displays "Hello world!" on the applet window. */
public class HelloWorld extends Applet
{ public void paint(Graphics g)
{g.drawString("Hello world!", 10, 10); // writes starting 10 pixels over & down
}
}
libraries: Java menyediakan provides extensive library support dalam bentuk class
Library dipanggil menggunakan import (mirip dengan #include di C++)
java.awt: berisi contains Abstract Window Toolkit (untuk GUI classes & routines)
java.applet: berisi definisi applet class
Comments : // dan /* */ berfungsi sama seperti pada C++

/** */ menandakan komentar
12
First Java Applet
import java.awt.*;
/**
{ g.drawString("Hello world!", 10, 10); // writes starting 10 pixels over & down
}
}
Pendefinisian class di Java

Sama dengan pada C++ (tetapi tidak ada titik koma di akhir)
Dapat berisi instance variables (data fields) & methods(member functions)
Didahului dengan pendefinisian class & method dengan public untuk membuatnya
tersedia bagi semua program
Tidak ada fungsi stand-alone di Java*
Harus disimpan pada sebuah file dengan nama yang sama dengan ekstension .java
Contoh : HelloWorld.java
13
First Java Applet
import java.awt.*;
/**
{ g.drawString("Hello world!", 10, 10); // writes starting 10 pixels over & down
}
}
Seluruh applets mewarisi dari Applet class (pada java.applet)

default methods termasuk :
init(): memanggil saat page di-load untuk membuat/inisialisasi variables
by default, does nothing
paint(Graphics g): called to draw (after init) or redraw (after being obscured)
here, the paint method is overridden to display text on the applet window
14
Embedding Applet di HTML
to include an applet in a Web page, use either
APPLET tag (deprecated)
CODE menentukan applet name, HEIGHT dan WIDTH menentukan window size
text antara APPLET tags ditampilkan jika tidak dapat dieksekusi (e.g., Java not enabled)
OBJECT tag
Lebih dipilih HTML 4, tetapi tidak secara universal mendukung
<html>
<!– COMP519 hello1.html 18.09.2005 -->
<head> <title>Hello World Page</title> </head>
<body>
<p>
<applet code="HelloWorld.class" height=100
width=100>
You must use a Java-enabled browser to view this
applet.
</applet>
</p>
</body> </html>
15
HTML & Applets
<html>
<!– COMP519 hello2.html 18.09.2005 -->
Sebuah applet dapat di-
<head> embedded dalam HTML
<title>Hello World Page</title> elements seperti element
</head>
<body> lainnya
<p> Berguna untuk format dan
<div align="center"> layout
<table border=1>
<tr><td>
<applet code="HelloWorld.class" height=200

width=200>
You must use a Java-enabled browser to view this
applet.
</applet>
</td></tr>
</table>
</div>
</p>
</body>
</html>
16
Parameters di HTML
<html>
<!– COMP519 hello3.html 18.09.2005 -->
<head> Dapat menentukan
<title>Hello World Page</title> parameter APPLET
</head>
<body>
ketika di-embedded di
<p> HTML
<div align="center">
<table border=1>
<tr><td> • setiap parameter
<applet code="HelloWorld1.class" height=35 width=300> harus mempunyai
<param name="name" value="Chris">
<param name="age" value=20>
PARAM tag sendiri
You must use a Java-enabled browser to view this applet. dalam APPLET
</applet> element
</td></tr>
</table> • Menentukan
</div>
</p>
parameter name
dan value
</body> </html>
17
Applet Parameters
import java.awt.*;
/**
* This class displays a message based on parameters. */
public class HelloWorld1 extends Applet
{ String userName = getParameter("name");
int userAge = Integer.parseInt(getParameter("age"));
String message1 = "Hello " + userName + ".";

String message2 = "On your next birthday, you will be " +
(userAge+1) + " years old.";
g.drawString(message1, 10, 10);

g.drawString(message2, 10, 30);
}
}
can access parameters passed in from the HTML document

getParameter mengakses nilai dari parameter (must know its name)
Jika parameter ditunjukkan angka, harus parseInt atau parseFloat
18
Java Constructs
• Akan dikenali oleh C/C++ programmers
• Tipe nama yang indentik; Tipe yang dijamin untuk diartikan secara benar dan teliti
• Source dalam .java files, compiled code dalam .class files; downloaded (biasanya)
dalam .jar files (Java archive)
Java Development
• Langkah-langkah Pengembangan
Buat source files di editor
Kompile menggunakan javac
Jalankan/test menggunakan java
19
Primitive Types dan Variables
• Boolean, char, byte, short, int, long, float, double dsb.
• Tipe dasar ini adalah satu-satunya tipe yang bukan objects
• Ini berarti bahwa kita tidak menggunakan operator baru untuk membuat primitive variable.
• Pendeklarasian primitive variables:
float initVal;
int retVal, index = 2;
double gamma = 1.2, brightness
boolean valueOk = false;
20
Initialisation
• Jika tidak ada nilai di berikan sebelumnya untuk digunakan, compiler akan memberikan
kesalahan
• Java men-set primitive variables menjadi zero atau false pada kasus dari sebuah boolean
variable
• Seluruh object references awalnya di-set null
• Sebuah array adalah sebuah object
Set null pada deklarasi
Elements to zero false or null on creation
21
Declarations
int index = 1.2; // compiler error
boolean retOk = 1; // compiler error
double fiveFourths = 5 / 4; // no error!
float ratio = 5.8f; // correct
double fiveFourths = 5.0 / 4.0; // correct
• 1.2f adalah float value akurasi sampai 7 decimal places.
• 1.2 adalah double value akurasi sampai 15 decimal places.
22
Assignment
• All Java assignments are right associative

int a = 1, b = 2, c = 5
a=b=c
System.out.print(
“a= “ + a + “b= “ + b + “c= “ + c)
• What is the value of a, b & c

• Done right to left: a = (b = c);
23
Basic Mathematical Operators
• * / % + - are the mathematical operators
• * / % have a higher precedence than + or -
double myVal = a + b % d – c * d / b;
• Is the same as:
double myVal = (a + (b % d)) – ((c * d) / b);
Statements & Blocks

• Sebuah statement sederhana adalah pernyataan yang diakhiri titik koma A :
name = “Fred”;
• Sebuah block adalaj gabungan pernyataan yang ditutup dalam tanda kurung kurawal :
{
name1 = “Fred”; name2 = “Bill”;
}
• Blocks dapat terdiri dari beberapa blocks
24
Flow of Control
• Java menjalankan satu statement berurutan sesuai urutan penulisan
• Beberapa statement Java adalah statement flow of control :
Alternation : if, if else, switch
Looping : for, while, do while
Escapes : break, continue, return
If – The Conditional Statement

• Statement if meng-evaluasi sebuah expression & jika evaluasi benar maka tindakan
tertentu akan dijalankan. Misal jika nilai dari x lebih kecil dari 10, maka x sama dengan 10
if ( x < 10 ) x = 10;
• Hal ini dapat ditulis seperti :
if ( x < 10 )
x = 10;
• Atau, alternative lain :
if ( x < 10 ) { x = 10; }
25
Relational Operators
== Equal (careful) != Not equal
>= Greater than or equal <= Less than or equal
> Greater than < Less than
If… else
• The if … else statement evaluates an expression and performs one action if that
evaluation is true or a different action if it is false.
if (x != oldx) {
System.out.print(“x was changed”);
}
else {
System.out.print(“x is unchanged”);
}
26
Nested if … else
if ( myVal > 100 ) {
if ( remainderOn == true) {
myVal = mVal % 100;
}
else {
myVal = myVal / 100.0;
}
}
else
{
System.out.print(“myVal is in range”);
}
27
else if
• Berguna untuk memilih beberapa alternative :

if ( n == 1 ) {
// execute code block #1
}
else if ( j == 2 ) {
}
else {
// if all previous tests have failed, execute
code block #3
}
28
Peringatan…
WRONG!
if( i == j )
if ( j == k )
System.out.print(“i equals k”);
else
System.out.print(“i is not equal to j”);
CORRECT!
if( i == j ) {
if ( j == k )
System.out.print(“i equals k”);
}
else
System.out.print(“i is not equal to j”); // Correct!
29
Switch Statement
switch ( n ) {
case 1:
break;
case 2:
break;
default:
// if all previous tests fail then
//execute code block #4
break;
}
30
for loop
• Loop n times
for ( i = 0; i < n; n++ )
{
// this code body will execute n times
// ifrom 0 to n-1
}
• Nested for:
for ( j = 0; j < 10; j++ ) {
for ( i = 0; i < 20; i++ ){
// this code body will execute 200 times
}
}
31
while loops
while(response == 1) {
System.out.print( “ID =” + userID[n]);
n++;
response = readInt( “Enter “);
}
do {… } while loops
do {
System.out.print( “ID =” + userID[n] );
n++;
response = readInt( “Enter ” );
} while (response == 1);
Berapa kali paling sedikit loop di-executed?

Berapa kali paling banyak loop di-executed?
32
Break
• Break statement menyebabkan keluar dari innermost yg berisi while, do, for or switch statement.
for ( int i = 0; i < maxID, i++ ) {
if ( userID[i] == targetID ) {
index = i;
break;
}
} // program jumps here after break
Continue
• Hanya dapat digunakan dengan while, do atau for.
• Continue statement menyebabkan innermost loop mulai perulangan berikutnya
for ( int i = 0; i < maxID; i++ ) {
if ( userID[i] != -1 ) continue;
System.out.print( “UserID ” + i + “ :” + userID);
}
33
Classes ARE Object Definitions
• OOP - object oriented programming
• code dibangun dari object-object
• Java seperti ini disebut classes
• Setiap pendefinisian class di-codekan dalam file .java yang berbeda
• Nama dari setiap object harus sama dengan nama class/object
34
Tiga Prinsip OOP
• Encapsulation
Object menyembunyikan fungsi mereka
(methods) dan data (instance variables)
• Inheritance
Setiap subclass mewarisi seluruh
variable dari superclass-nya
car Super class
• Polymorphism manual
auto-
matic Subclasses
Interface sama menghubungkan tipe data
berbeda
draw() draw()
35
Class dan Method Sederhana
Class Fruit {
int grams;
int cals_per_gram;
int total_calories() {
return(grams*cals_per_gram);
}
}
36
Methods
• Suatu method adalah suatu urutan code yang diberi nama yang dapat dilibatkan
oleh Java code lain
• Suatu metoda mengambil beberapa parameter, melaksanakan beberapa
perhitungan dan kemudian secara bebas mengembalikan nilai ( atau obyek).
• Methods dapat digunakan sebagai bagian dari statement expression.
public float convertCelsius(float tempC) {

return( ((tempC * 9.0f) / 5.0f) + 32.0 );
}
37
Method Signatures
• Sebuah method signature menentukan :
Nama dari method.
Type dan nama dari setiap parameter.
Type dari value (atau object) yang dikembalikan oleh method.
Bermacam-macam method modifiers.
modifiers type name ( parameter list ) [throws exceptions ]
public float convertCelsius (float tCelsius ) {}
public boolean setUserInfo ( int i, int j, String name ) throws
IndexOutOfBoundsException {}
38
Public/private
• Methods/data dapat dideklasikan public atau private yang artinya method/data tersebut
dapat atau tidak dapat diakses oleh code pada class lain …
• Good practice:
keep data private
keep most methods private
• Interface yang didefinisikan dengan baik antar class – menolong menghilangkan error
Using objects
• Code pada sebuah class akan membuat sebuah instance dari class lain …
Fruit plum=new Fruit();
int cals;
cals = plum.total_calories();
• Dot operator membolehkan kita untuk mengakses (public) data/methods dalam Fruit class
39
Constructors
• The line
plum = new Fruit();
• invokes sebuah constructor method dimana kita dapat men-set initial data dari sebuah object
• Kita dapat memilih beberapa type yg berbeda dari constructor dgn argument lists yg berbeda
eg Fruit(), Fruit(a) ...
Overloading
• Dapat memiliki beberapa versi dari sebuah method dalam class dengan
tipe/jumlah arguments yang berbeda
Fruit() {grams=50;}
Fruit(a,b) { grams=a; cals_per_gram=b;}
• Dengan memperhatikan pada argument, Java memutuskan versi mana

yang digunakan
40
Java Development Kit
• javac - The Java Compiler
• java - The Java Interpreter
• jdb - The Java Debugger
• appletviewer - Tool to run the applets
• javap - to print the Java bytecodes

• javaprof - Java profiler
• javadoc - documentation generator
• javah - creates C header files
41
Java vs. C++
Sintaks Java meminjam dari C++ (dan C)
primitive types : sama seperti C++, tetapi sizes
byte (8 bits) char (16 bits) short (16 bits) int (32 bits)
long (64 bits) float (32 bits) double (64 bits) boolean
variables, assignments, arithmetic & relational operators : sama seperti C++
control structures : sama seperti C++, kecuali goto
Functions : mirip dengan C++, tetapi harus class & harus ditentukan public/private
in Java, every variable & method belongs to a class
Seperti di C++, dengan default setiap object mempunyai salinan data fields sendiri sehingga
dikenal sebagai instance variables
Seperti di C++, sebuah variables dideklarasikan static bersama dengan seluruh class objects
sehingga dikenal sebagai class variables
Hal yang sama, terjadi pada sebuah static method (class method)
Hanya dapat dioperasikan pada class variables, diakses dari class itu sendiri
class Math
{ public static final double PI = 3.14159; // access as Math.PI
public static double sqrt(double num) { . . . } // access as in Math.sqrt(9.0)
. . . }
42
Primitive vs. Reference Types
primitive types are handled exactly as in C++
space untuk sebuah primitive object secara implisit dialokasikan
Æ variable mengacu pada actual data (disimpan pada stack)
reference types (classes) are handled differently
space untuk sebuah reference object secara eksplisit dialokasikan menggunakan new
Æ variable mengacu pada sebuh pointer ke data (dimana disimpan pada heap)
Note: tidak seperti C++, programmer tidak bertanggung jawab untuk menghapus dynamic objects
JVM melaksanakan automatic garbage collection untuk mereklamasi memory yang tidak digunakan
Java only provides by-value parameter passing

Tetapi mengacu pada object yang diimplementasikan sebagai pointers ke
dynamic memory
Menghasilkan behavior mimics by-reference
public void Init(int[] nums)
{ for (int i = 0; i < nums.length; i++) {
nums[i] = 0; }
}
_____________________________ _
int nums[] = new int[10];

Init(nums);
43
Java Libraries
• String class (secara otomatis di-load dari java.lang)
int length()
char charAt(index)
int indexOf(substring) String str = "foo"
String substring(start, end) String str = new String("foo");
String toUpperCase()
boolean equals(Object)
...
• Array class (secara otomatis di-load dari java.lang)

int length instance variable
Type [](index) operator
String toString()
... int[] nums = {1,2,3,4,5};
int[] nums = new int[10];
• Java provides extensive libraries of data structures & algorithms
java.util Æ Date Random Timer
ArrayList LinkedList Stack
TreeSet HashSet
TreeMap HashMap
44
Applet Behavior
• recall
init method dipanggil saat applet diload pertama
Berguna untuk initializing variables & objects
paint method dipanggil segera setelah init, dan kapanpun applet perlu menggambar (
contoh : setelah window resized )
• when paint is called, it is given the default Graphics object

Graphics methods termasuk :
void drawString(String msg, int x, int y)
void setColor(Color color)
Color class is predefined, constants include:

Color.red, Color.blue, Color.black, . . .
45
import java.awt.*;
import java.util.Random; Hello Again
/**
* This class displays lots of "Hello world!"s on the applet
window.
*/
{ store colors in an array
private static final int NUM_WORDS=100;
private static final Color[] colors =
• pick random index and
{Color.black,Color.red,Color.blue,Color.green, change color using
Color.yellow};
private static Random randy; setColor
private int RandomInRange(int low, int high)
{
return (Math.abs(randy.nextInt()) % Random class provides
(high-low+1)) + low;
} methods for generating
public void init() random values
{
randy = new Random();
}
override init method to
public void paint(Graphics g)
{ allocate & initialize (similar
for (int i = 0; i < NUM_WORDS; i++) {
int x = RandomInRange(1, 140);
to a constructor)
int y = RandomInRange(10, 200);
g.setColor(colors[RandomInRange(0,4)]);
g.drawString("Hello world!", x, y);
}
}
} <applet code="HelloWorld2.class" height=200 width=200>
You must use a Java-enabled browser to view this applet. view page
</applet> 46
Parameters & Applet Dimensions
recall:
Dapat menentukan parameters di HTML document menggunakan <PARAM> tags
Akses nilai parameter values (berdasar pada nama) menggunakan getParameter method
can also access the dimensions of an applet using a Dimension object

Dimension dim = getSize(); // stores applet dimensions
dapat mengakses applet height melalui dim.height

dapat mengakses applet width melalui dim.width
47
import java.awt.*;
import java.util.Random;
Adaptive Hello
/**
* This class displays lots of "Hello world!"s on the applet window.
*/
{
private static final Color[] colors =
{Color.black,Color.red,Color.blue,Color.green,Color.yellow};
private static Random randy; getParameter
accesses the values of
private Dimension dim;
private int numReps;
private int RandomInRange(int low, int high) the parameters

{
return (Math.abs(randy.nextInt()) % (high-low+1)) + low;
}
here, specify number
public void init()
{ of reps in Web page
dim = getSize();
numReps = Integer.parseInt(getParameter("reps"));
}
public void paint(Graphics g) uses getSize to

{
for (int i = 0; i < numReps; i++) { get dimensions, pick
random coords for text
int x = RandomInRange(1, dim.width-60);
int y = RandomInRange(10, dim.height);
g.setColor(colors[RandomInRange(0,4)]);
g.drawString("Hello world!", x, y); within the applet
}
}
}
<applet code="HelloWorld3.class" height=300 width=400>
<param name="reps" value=200>
You must use a Java-enabled browser to view this applet. view page48
</applet>
Applet Graphics
• in addition to displaying text
Dapat juga menggambar memperhitungkan Object Graphics
void drawLine(int x1, int y1, int x2, int y2)
void drawRect(int x, int y, int width, int height)

void fillRect(int x, int y, int width, int height)
void drawOval(int x, int y, int width, int height)

void fillOval(int x, int y, int width, int height)
• EXAMPLE: draw a red circle inscribed in a square, then draw random

dots (dart pricks)
Dengan menghitung banyaknya jumlah titik di dalam vs. di luar lingkaran, dapat
memperkirakan nilai dari π
π = 4 * (area of circle/area of square)
49
public class Monte1 extends Applet
{
private static Random randy;
private int NUM_POINTS;
Graphical Applet
private int SIZE;
private int RandomInRange(int low, int high) { CODE OMITTED }

private double distance(int x1, int y1, int x2, int y2) { CODE OMITTED }
public void init()

{ init method creates random
number generator & gets
NUM_POINTS = Integer.parseInt(getParameter("points"));
Dimension dim = getSize(); parameters
SIZE = Math.min(dim.width, dim.height);
}
public void paint(Graphics g) paint method draws a circle

{
g.setColor(Color.red); and a bunch of random points
g.fillOval(0, 0, SIZE, SIZE);
for (int i = 0; i < NUM_POINTS; i++) {
int x = RandomInRange(0, SIZE);
int y = RandomInRange(0, SIZE);
if (distance(x, y, SIZE/2, SIZE/2) < SIZE/2) {
g.setColor(Color.white);
}
else { <applet code="Monte1.class" height=300 width=300>
g.setColor(Color.black); <param name="points" value=20000>
} You must use a Java-enabled browser...
g.drawLine(x, y, x, y); </applet>
}
} view page 50
}
Double Buffering
• note: paint is called every time the page is brought to the front
Pada versi saat ini dari Monte, hal ini berarti titik-titik baru digambar setiap saat setiap kali page
tak dikenali dan kemudian membawanya dari belakang ke depan
Æ Membuang waktu menggambar ulang
Æ Titik-titik berbeda setiap kali applet digambar
• the double buffering approach works by keeping an off-screen image

Pada init method (yang dipanggil saat page di-load):
draw the figures on a separate, off-screen Graphics object
Pada paint method (yang dipanggil kapanpun page di tampilkan ke depan):
simply display the off-screen image on the screen
51
{
. . .
private Image offScreenImage;
Buffered Applet
private Graphics offScreenGraphics;
init method is called when

. . .
public void init()
{
page is loaded
Dimension dim = getSize();
SIZE = Math.min(dim.width, dim.height); does drawing to a separate,
offScreenImage = createImage(SIZE, SIZE); off-screen Graphics object
offScreenGraphics = offScreenImage.getGraphics();
offScreenGraphics.setColor(Color.red);
offScreenGraphics.fillOval(0, 0, SIZE, SIZE); paint is called after
init
for (int i = 0; i < NUM_POINTS; i++) { and whenever the applet is
int x = RandomInRange(0, SIZE);
int y = RandomInRange(0, SIZE); revisited
offScreenGraphics.setColor(Color.white);
}
else {
Note: don’t see image in
offScreenGraphics.setColor(Color.black); progress
}
offScreenGraphics.drawLine(x, y, x, y);
} <applet code="Monte2.class" height=300 width=300>
} <param name="points" value=20000>
You must use a Java-enabled browser...
public void paint(Graphics g)
</applet>
{
g.drawImage(offScreenImage, 0, 0, null);
} view page 52
}
{
. . .
public void init() {
Better buffering
Dimension dim = getSize();
SIZE = Math.min(dim.width, dim.height); if want to see image as it is
drawn, must be done in
}
public void paint(Graphics g) {
if (offScreenImage == null) { paint
offScreenImage = createImage(SIZE, SIZE);
offScreenGraphics = offScreenImage.getGraphics();
offScreenGraphics.setColor(Color.red);
g.setColor(Color.red); when first loaded, have
offScreenGraphics.fillOval(0, 0, SIZE, SIZE);
g.fillOval(0, 0, SIZE, SIZE); paint draw on the graphics
int x = randomInRange(0, SIZE);
int y = randomInRange(0, SIZE);
screen and also to an off-
offScreenGraphics.setColor(Color.white);
screen buffer
}
else {
offScreenGraphics.setColor(Color.black);
g.setColor(Color.black);
on subsequent repaints,
}
offScreenGraphics.drawLine(x, y, x, y);
simply redraw the contents of
}
g.drawLine(x, y, x, y); the off-screen buffer
}
else {
g.drawImage(offScreenImage, 0, 0, null);
}
} <applet code="Monte3.class" height=300 width=300>
} <param name="points" value=20000>
</applet>
view page 53
GUI Elements pada Applets
• Java mempunyai extensive library yang mendukung GUIs (Graphical
User Interfaces)
Mempunyai element yang sesuai dengan HTML buttons, text boxes, text areas, …
• Setiap element harus dibuat dan secara eksplisit ditambahkan ke applet

nameLabel = new Label("User's name");
add(nameLabel);
nameField = new TextField(20);

nameField.setValue("Dave");
add(nameField);
• Java menyediakan beberapa class untuk mengontrol layout

FlowLayout adalah default
BorderLayout membolehkan penempatan element di sekitar borders applet
Sebuah Panel dapat berisi banyak element
54
Text Boxes
public class Monte4 extends Applet public void paint(Graphics g)
{ {
. . . . . .
insideField.setText("0");
private Label insideLabel; outsideField.setText("0");
private TextField insideField; . . .
private Label outsideLabel; if (distance(x, y, SIZE/2, SIZE/2) <
private TextField outsideField; SIZE/2) {
public void init()
int value =
{
Integer.parseInt(insideField.getText())+1
NUM_POINTS = ;
Integer.parseInt(getParameter("points"));
Dimension dim = getSize(); insideField.setText(""+value);
SIZE = Math.min(dim.width, dim.height); }
else {
setLayout(new BorderLayout()); g.setColor(Color.black);
int value =
Panel p = new Panel();
insideLabel = new Label("Inside:"); Integer.parseInt(outsideField.getText())+
p.add(insideLabel); 1;
insideField = new TextField(5); outsideField.setText(""+value);
p.add(insideField); }
outsideLabel = new Label("Outside:");
p.add(outsideLabel);
. . .
outsideField = new TextField(5);
}
p.add(outsideField);
}
add(p, BorderLayout.SOUTH);
}
<applet code="Monte4.class" height=335 width=300>
<param name="points" value=20000>
view page </applet> 55
Event Handling
• in order to handle events (e.g., text changes, button clicks), can use the event
delegation model
Harus menentukan bahwa class meng-implementasikan the ActionListener interface
public class Monte5 extends Applet implements ActionListener
Setiap source dari events harus didaftarkan dalam applet

dotButton = new Button("Click to generate dots");
dotButton.addActionListener();
Harus mempunyai sebuah actionPerformed method untuk menangani events
public void actionPerformed(ActionEvent e)

{
if (e.getSource() == dotButton) {
drawDots();
}
}
56
ActionListener
import java.awt.*; public void drawCircle()
import java.applet.*; {
import java.awt.event.*; CODE FOR DRAWING CIRCLE
import java.util.Random; }
public class Monte5 extends Applet public void drawDots()

implements ActionListener {
{ drawCircle();
. . .
private Button dotButton; Graphics g = getGraphics();
public void init() CODE FOR DRAWING DOTS
{ }
randy = new Random(); }
NUM_POINTS =
Integer.parseInt(getParameter("points")); public void paint(Graphics g)
Dimension dim = getSize(); {
SIZE = dim.width; g.drawImage(offScreenImage, 0, 0, null);
}
setLayout(new BorderLayout());
dotButton = public void actionPerformed(ActionEvent e)
new Button("Click to generate dots"); {
dotButton.addActionListener(this); if (e.getSource() == dotButton) {
add(dotButton, BorderLayout.SOUTH); drawDots();
}
drawCircle(); }
} }
<applet code="Monte5.class" height=325 width=300>

view page <param name="points" value=20000>
</applet> 57
MySQL
Sumber :
Buku “Database Relational dengan MySQL”,
Bunafit Nugroho,
Tutorial “Dasar Pemrograman PHP MySQL”,
Anon Kuncoro Widigdo, Kuliah Umum
IlmuKomputer.Com,
Tutorial “PHP Programming Fundamental
dan MySQL Fundamental”, Endy
Pemrograman Web/MI/D3 sks 1

PENDAHULUAN
• Menyimpan data dalam file biasa memiliki banyak
keterbatasan. Semakin besar ukuran file, pencarian data
menjadi lebih sulit. File biasa juga tidak memiliki kemampuan
utk mengolah data, mis. menghitung total nilai, rata-rata, dsb
• Adanya keterbatasan untuk mengendalikan akses terhadap
data. Kita tidak dapat menentukan siapa yang boleh dan
siapa yang tidak boleh mengakses data.
• Karena itu, sekarang kita akan menggunakan media
penyimpanan data yang lebih mutakhir, yaitu database.
Operasi data dalam database umumnya mengikuti pola yang
sama, yaitu melalui rangkaian langkah sebagai berikut :
􀂉 Membuka sambungan dengan database server
􀂉 Memilih dan membuka database yang diinginkan
􀂉 Mengirim perintah utk
mengambil/mengubah/menghapus.
􀂉 Mengakses hasil Pemrograman
pengambilan data
Web/MI/D3 sks 2
􀂉 Mengakhiri sambungan
PENDAHULUAN
• Dalam bahasa SQL pada umumnya informasi tersimpan
dalam tabel-tabel yang secara logik merupakan struktur
dua dimensi terdiri dari baris (row atau record) dan kolom
(column atau field). Sedangkan dalam sebuah database
dapat terdiri dari beberapa table.
• Beberapa tipe data dalam MySQL yang sering dipakai:

MEMBUAT DATABASE DAN TABLE
• Untuk masuk ke dalam program MySQL pada prompt
jalankan perintah berikut ini:
C:\> MYSQL (Enter)
• Kemudian akan masuk kedalam MySQL seperti tampilan
dibawah :
Welcome to the MySQL monitor. Commands and with ; or \g.
Your MySQL connection id is 2 to server version:3.23.47-nt
Type ‘help;’ or ‘\h’ for help. Type ‘\c’ to clear the buffer.
mysql>
• Bentuk prompt “mysql>” adalah tempat menuliskan perintah-
perintah MySQL. Setiap perintah SQL harus diakhiri dengan
tanda titik-koma “;” .

• Cara untuk membuat sebuah database baru adalah
dengan perintah:
create database namadatabase;
Contoh: create database privatdb;
• Untuk membuka sebuah database dapat
menggunakan perintah berikut ini:
use namadatabase;
Contoh: use privatdb;
• Perintah untuk membuat tabel baru adalah:
create table namatabel
(
struktur
);
Contoh:
• Misalkan kita ingin menyimpan data anggota
yaitu: nomor, nama, email, alamat, kota.
Sedangkan strukturnya seperti tabel dibawah ini:

• Perintah MySQL utk membuat tabel seperti diatas adalah:
create table anggota(
nomor int(6) not null primary key,
nama char(40) not null,
email char(255) not null,
alamat char(80) not null,
kota char(20) not null);
• Untuk memasukkan sebuah baris (record) kedalam tabel
MySQL adalah sebagai berikut:
insert into namatabel values(kolom1, kolom2,
kolom3,…);
Contoh:
insert into anggota values(„1‟,‟Arini Nurillahi‟,
‟arini@hotmail.com‟, ‟Jl.Lebak Rejo 7‟,‟Surabaya‟);
MENAMPILKAN ISI TABLE
• Isi tabel dapat ditampilkan dengan menggunakan perintah
SELECT, cara penulisan perintah SELECT adalah:
select nm_kolom from namatable;

MENGHAPUS RECORD
• Untuk menghapus suatu record dengan

kriteria tertentu digunakan perintah
sebagai berikut:
delete from namatabel where kriteria;
• Contoh: Menghapus record dari tabel
anggota yang bernomor „3‟
delete from anggota where nomor=‟3‟;

MEMODIFIKASI RECORD
• Untuk memodifikasi (merubah) isi record
tertentu adalah dengan menggunakan perintah
sebagai berikut:
update namatabel set kolom1=nilaibaru1,
kolom2=nilaibaru2 … where kriteria;
• Contoh:Merubah e-mail dari anggota yang
bernomor 12 menjadi „supri@yahoo.com‟ dalam
tabel anggota.
update anggota set email=‟supri@yahoo.com‟
where nomor=‟12‟;

MENGHUBUNGKAN PHP DGN MySQL
• Agar script PHP yang kita buat dapat berhubungan dengan
database dari MySQL dpt menggunakan fungsi berikut ini:
• File utama.php:
<?php
function open_connection()
{ $host=”localhost”;
$username=”root”;
$password=””;
$databasename=”privatdb”;
$link=mysql_connect($host,$username,$password) or
die ("Database tidak dapat dihubungkan!");
mysql_select_db($databasename,$link);
return $link; }
?>
• Isi variabel $host,$username,$password & $databasename
dapat disesuaikan dgn setting pd MySQL server yang ada.
MENGHUBUNGKAN PHP DGN MySQL
• Contoh: Menampilkan data anggota yang telah dibuat
dengan menggunakan script PHP.
• File contoh13.php:
<?php
// ----- ambil isi dari file utama.php
require("utama.php");
// ----- hubungkan ke database
$link=open_connection();
// ----- menentukan nama tabel
$tablename="anggota";
// ----- perintah SQL dimasukkan ke dalam variable string
$sqlstr="select * from $tablename";
// ------ jalankan perintah SQL
$result = mysql_query ($sqlstr) or die ("Kesalahan pada
perintah SQL!"); Pemrograman Web/MI/D3 sks 12
// ------ putus hubungan dengan database
mysql_close($link);
// ------ buat tampilan tabel
echo("<table width=100% cellpadding=2 bgcolor=#000000>");
echo("<tr><td bgcolor=#CCCCCC>No</td><td
bgcolor=#CCCCCC>Nama</td><td
bgcolor=#CCCCCC>E-Mail</td><td
bgcolor=#CCCCCC>Alamat</td><td
bgcolor=#CCCCCC>Kota</td></tr>");
// ------ ambil isi masing-masing record
while ($row = mysql_fetch_object ($result))
{
// ----- mengambil isi setiap kolom
$nomor=$row->nomor;
$nama=$row->nama;
$email=$row->email;
$alamat=$row->alamat;
$kota=$row->kota; Pemrograman Web/MI/D3 sks 13
// ------ menampilkan di layar browser
echo("<tr><td bgcolor=#FFFFFF>$nomor</td><td
bgcolor=#FFFFFF>$nama</td><td
bgcolor=#FFFFFF>$email</td><td
bgcolor=#FFFFFF>$alamat</td><td
bgcolor=#FFFFFF>$kota</td></tr>");
}
echo("</table>");
?>

MEMBUAT TABEL DI PHP
<? $user="username";
$password="password";
$database="database";
mysql_connect(localhost,$user,$password);
@mysql_select_db($database) or die("Unable select database");
$query="CREATE TABLE contacts
(id int(6) NOT NULL auto_increment,
first varchar(15) NOT NULL,last varchar(15) NOT NULL,
phone varchar(20) NOT NULL,mobile varchar(20) NOT NULL,
fax varchar(20) NOT NULL,
email varchar(30) NOT NULL,
web varchar(30) NOT NULL,
PRIMARY KEY (id),UNIQUE id (id),KEY id_2 (id))";
mysql_query($query);
mysql_close();
?> Pemrograman Web/MI/D3 sks 15
MENYISIPKAN DATA
First : John
Last : Smith
Phone : 01234 567890
Mobile : 00112 334455
Fax : 01234 567891
E-mail : johnsmith@gowansnet.com
Web : http://www.gowansnet.com
This will all be put in with one command:
$query = "INSERT INTO contacts VALUES
('','John','Smith','01234 567890',
'00112 334455','01234567891',
'johnsmith@gowansnet.com','http://www.gowansnet.com')";

MENCARI DATA
<? $username="username";
$database="your_database";
$first=$_POST['first'];
$last=$_POST['last'];
$phone=$_POST['phone'];
$mobile=$_POST['mobile'];
$fax=$_POST['fax'];
$email=$_POST['email'];
$web=$_POST['web'];
mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die(“Unable select database");
$query = "INSERT INTO contacts VALUES
('','$first','$last','$phone','$mobile','$fax','$email','$web')";
mysql_query($query);
mysql_close();
?>
MENAMPILKAN DATA
<? $username="username";
$database="your_database";
mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM contacts";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
echo "<b><center>Database Output</center></b><br><br>";
$i=0;
while ($i < $num) {
$first=mysql_result($result,$i,"first");
$last=mysql_result($result,$i,"last");
$phone=mysql_result($result,$i,"phone");
$mobile=mysql_result($result,$i,"mobile");
$fax=mysql_result($result,$i,"fax");
$email=mysql_result($result,$i,"email");
$web=mysql_result($result,$i,"web");
echo "<b>$first $last</b><br>Phone: $phone<br>Mobile:
$mobile<br>Fax: $fax<br>E-mail: $email<br>Web: $web<br><hr><br>";
$i++; }
?>
MEMFORMAT TAMPILAN DATA
<table border="0" cellspacing="2" cellpadding="2">
<tr> <th><font face="Arial, Helvetica, sans-serif">Name</font></th>
<th><font face="Arial, Helvetica, sans-serif">Phone</font></th>
<th><font face="Arial, Helvetica, sans-serif">Mobile</font></th>
<th><font face="Arial, Helvetica, sans-serif">Fax</font></th>
<th><font face="Arial, Helvetica, sans-serif">E-mail</font></th>
<th><font face="Arial, Helvetica, sans-serif">Website</font></th> </tr>
<? $i=0;
while ($i < $num) { $first=mysql_result($result,$i,"first");
$last=mysql_result($result,$i,"last");
$phone=mysql_result($result,$i,"phone");
$mobile=mysql_result($result,$i,"mobile");
$fax=mysql_result($result,$i,"fax");
$email=mysql_result($result,$i,"email");
$web=mysql_result($result,$i,"web");
?> <tr>
<td><font face="Arial, Helvetica"><? echo $first." ".$last; ?></font></td>
<td><font face="Arial, Helvetica"><? echo $phone; ?></font></td>
<td><font face="Arial, Helvetica"><? echo $mobile; ?></font></td>
<td><font face="Arial, Helvetica"><? echo $fax; ?></font></td>
<td><a href="mailto:<? echo $email; ?>">E-mail</a></td>
<td><a href="<? echo $web; ?>">Website</a></font></td>
</tr> $i++; } Pemrograman Web/MI/D3 sks 19
echo "</table>";
PHP
PHP
PHP Dasar
PHP merupakan bahasa script server-side untuk pemrograman web.
PHP/FI merupakan nama awal dari PHP. Dibuat pertama kali oleh Rasmus
Lerdoff. Awalnya merupakan program CGI yang dikhususkan untuk
menerima input melalui form yang ditampilkan dalam web browser.
PHP secara resmi merupakan singkatan dari PHP-Hypertext Pre-processor

PHP
PHP Dasar
PHP
PHP Dasar
<html>
<head>
<title>My First PHP Script</title>
</head>
<body>
<h4>Example One</h4>
<p><?php echo "Hello World"; ?></p>
</body>
</html>
PHP
Variabel dan Tipe data
Variabel didalam PHP diawali dengan karakter $ dan diikuti dengan huruf
sebagai karakter pertama, kemudian dapat diikuti dengan kombinasi
huruf dan angka.
Tidak boleh ada spasi dan tanda baca, kecuali _ (garis bawah/
underscore)
contoh :
$nama
$a1
$nilai_uts
PHP
Variabel dan Tipe data
Tipe data yang dikenal dalam PHP adalah :

integer, double, boolean, string, array dan objek
contoh :
PHP
Operator
Jenis operator dalam PHP:

• Operator Aritmetika (+, -, *, /, %)
• Operator String (.)
• Operator Increment/Decrement (++, --)
• Operator Bitwise
• Operator Perbandingan
• Operator Ternary
• Operator Kontrol Error
• Operator Eksekusi
• Operator Logika
• Operator Asssignment
PHP
Struktur Kontrol
Struktur Kontrol dalam PHP:

If else elseif
switch
while
do … while
for
foreach
break
continue
PHP
Database yang didukung oleh PHP antara lain :
• dBase
• Informix
• DB2
• MySQL
• Oracle
• PostgreSQL
• sybase
XML
1
XML
• Apakah XML
• XML vs HTML
• XML Struktur
• DTD
• XLST
2
Apakah XML ?
• eXtensible Markup Language adalah meta-language yang

menerangkan tentang isi dari suatu document (self describing data)
Java = Portable Program

XML = Portable Data
• XML tidak menerangkan tag-set atau gramar dari XML itu sendiri
• Menggunakan DTD ( Document Type Definition ) untuk
menerangkan data
• XML bukan pengganti HTML
3
XML vs HTML ?
Kenapa tidak HTML ? , karena HTML :
• Tidak memberikan “informasi” tentang isi dari sebuah halaman page

• Tampilan tidak bisa di parsing, dan tidak bisa digunakan kembali
• Terbatas hanya untuk melakukan format tampilan pada web
browser
4
Aplikasi XML
• Konfigurasi File :
– Arsitektur J2EE
• Media untuk pertukaran data
• B2B transaksi
– Electronics Bussines Order (ebXML)
– Financial Exchange (IFX)
– Messaging Exchange (SOAP)
5
XML Element
XMLElements
• Menggunakan building block yang sama seperti HTML :

Element,Attribute dan Value
• Sebuah element mengandung tag pembuka dan tag penutup :
Contoh : <animal>Lion</animal>
• <animal class=“mammals”>Lion</animal>,
maka : animal adalah element, class adalah attribute dan mammals
adalah nilai dari attribute
6
Aturan XML
• Dokumen XML harus “well-formed” yang artinya harus
memenuhi aturan2 sebagai berikut :
– Harus mempunya sebuah root element yang
berisikan element2 lainnya.
– Semua elemen harus diakhiri dengan tag penutup,
Contoh :
<picturefile=“test.jpg”/>
<name>Lion</name>
– Element tidak boleh overlaping
7
Aturan XML
– XML bersifat case sensitive
– Untuk nilai harus berada dalam kutip satu (‘) atau
kutip dua (“)
– Simbol2 special harus dideklarasikan pada DTD
8
Aturan XML
Pendeklarasian file sebagai sebuah file XML :

<?xml version=“1.0” ?>
Penulisan komentar pada file xml :

9
DTD
• DTD berfungsi untuk menjelaskan spesifikasi dan aturan terhadap
element2 dan atrributes yang harus di miliki oleh sebuah xml
dokument.
• Kumpulan dari aturan2 tersebut disebut dengan SCHEMA
• SCHEMA tidak wajib dimiliki, tetapi di perlukan untuk memastikan

konsistensi dokumen
10
DTD
Mendefinisikan elemen pada DTD :

• <!ELEMENT animal (lion)> : element animal hanya boleh
memiliki satu elemen lion.
• <!ELEMENT picture EMPTY> : element picture tidak mempunyai
elemen lain.
• <!ELEMENT animal ANY> : element animal dapat berisikan
element lainnya.
Mendefinisikan element yang berisikan text
<!ELEMENT name(#PCDATA)>
11
DTD
Mendefinisikan element yang mempunyai beberapa element
<!ELEMENT animal(name, weight)>
Berdasarkan aturan diatas maka element harus mempunyai element

nama dan weight :
<animal>
<name>lion</name>
<weight>350 pounds</weight>
</animal>
12
DTD
Mendefinisikan element dengan beberapa pilihan element
<!ELEMENT animal ((name, weight) | (picture)>
Berdasarkan aturan diatas maka element animal harus mempunyai elemen
name dan weight atau hanya punya element picture.
Pendefinisian Unit pada element :

<!ELEMENT animal (name+, weight?, picture, subspecies*)
Artinya :
• name harus tampil setidak nya satu kali
• weight dapat tampil sekali atau tidak tampil sama sekali
• picture hanya harus tampil sekali
• subspecies dapat tampil beberapa kali pun atau tidak tampil sama sekali
13
Attribute
• Terkadang penggunaan attribute dapat lebih berarti dari pada
memecah element menjadi sub-sub element.
• Kedua element ini berarti sama :
– <population animal=“lion”>80</population>
– <population><animal>lion</animal><quantity>80</
quantity></population>
• Attribute harus dideklarasikan juga pada DTD untuk dapat di
pergunakan
– <!ELEMENT population (#PCDATA)>
<!ATTLIST population year CDATA #IMPLIED>
14
Attribute
• Mendefinisikan Attribute wajib (Required Attribute) :
<!ELEMENT population (#PCDATA)>
<!ATTLIST population year (2000 | 2001) #REQUIRED>
Berarti : element populasi harus mempunyai attribute year yang bernilai
2000 atau 2001
<population year=“2000”>80</population>
• Mendefinisikan Attribute default (Default Attribute) :

<!ATTLIST population year CDATA “2000”>
15
Attribute
• Mendefinisikan Attribute default (Default Attribute) :
<!ATTLIST population year CDATA #FIXED “2000”>
Invalid : <population year=“2001”>80</population>
Valid : <population year=“2000”>80</population>
Valid : <population>80</population>
• Mendefinisikan Unique Attribute :
<!ELEMENT animal (name)>
<!ATTLIST animal code ID #REQUIRED>
16
Deklarasi DTD
Internal :
<?xml version=“1.0”?>
<!DOCTYPE animal [ ]>
<animal> </animal>
- animal is the root element
- The DTD berada dalam kurung “ [ ]” brackets pada “DOCTYPE”
Eksternal :
<?xml version=“1.0”?>
<!DOCTYPE animal SYSTEM “http://www.animals.com/xml/animal.dtd”>
17
Pengantar Common Gateway
Interface (CGI) dan Perl
- Konsep CGI dan Perl
- Lingkungan variabel di Perl
- Metode POST dan GET
1
Konsep CGI dan Perl
Definisi
CGI adalah suatu bentuk komunikasi dimana client
(browser) dapat mengirimkan suatu masukan kepada
server, dan server mengolah masukan tersebut serta
mengembalikannya kepada client (browser)
Program CGI adalah program yang didisain untuk
menerima dan mengembalikan data sesuai dengan
spesifikasi CGI. Program tersebut dapat ditulis
menggunakan bahasa pemrograman seperti C, Perl,
Java atau Visual Basic.
2
Konsep CGI dan Perl
Perl
Perl merupakan singkatan dari Practical Extraction and
Report Language, dibuat oleh Larry Wall.
Perl adalah bahasa interpreter sekaligus kompiler, artinya

Perl akan mendeteksi setiap baris untuk mencari syntax
error sebelum program dijalankan.
3
Variabel di Perl
• Perl memiliki tiga tipe data: skalar, array, dan hash.

• Skalar menyimpan nilai tunggal, array menyimpan kumpulan skalar dengan
urutan tertentu, sedangkan hash menyimpan kumpulan skalar berpasangan.
• Sebuah variabel dinyatakan dengan tanda awalan tertentu yang merujuk pada
tipe data yang dikandungnya, serta nama yang berfungsi sebagai pengenal.
• Tanda pengenal adalah $ untuk skalar, @ untuk array, dan % untuk hash.
• Nama variabel terdiri atas huruf dan angka, disebut juga alfanumerik (karakter
“_” dihitung sebagai huruf).
• Nama variabel tidak boleh dimulai dengan angka.
• Tidak ada ketentuan mengikat mengenai berapa panjang nama variabel yang
boleh digunakan.
4
Variabel di Perl
Skalar
Variabel skalar menyimpan unit data yang paling mendasar. Apa yang dikandung skalar, itu
jugalah yang bisa dikandung oleh array dan hash. Sebuah skalar hanya mengandung string
atau angka. Ini juga berarti bahwa semua informasi—dari manapun asalnya—akan
diperlakukan sebagai string atau angka. String dikutip menggunakan kutip ganda atau kutip
tunggal. Angka bisa berupa bilangan bulat, oktal, heksadesimal, maupun pecahan desimal.
$nama = ‘hasan’;
$_nama2 = $nama . ‘t’; # hasant
$tahun = 2001;
$satu_dollar = 8500.43;
$dua_tahun_lalu = $tahun - 2; # 1999
Untuk memasukkan kutip tunggal dalam string yang dikutip tunggal digunakan \ (garis miring
terbalik) di depannya. Begitupun untuk memasukkan kutip ganda dalam string yang dikutip
ganda. Dan untuk memasukkan \ itu sendiri, tambahkan \ satu lagi. Ini disebut meng-escape
character.
$putih = ‘#FFFFFF’;
$body = “<body bgcolor=\”$putih\”>”;
$dialog = ‘”Dia t\’lah pergi,” katanya’;
5
Variabel di Perl
Array
Array didefinisikan dengan memasukkan elemen-elemennya ke dalam tanda kurung dan dipisahkan dengan ,
(koma). Koma tidak wajib diletakkan pada elemen terakhir. Di Perl, ini sebenarnya sebuah konstruksi data yang
disebut list.
@minuman = (’kopi’, ‘teh’, ‘air’);
Kadang-kadang kedua istilah ini, array dan list, bisa dipertukarkan, dan memiliki makna yang sama. Namun,
harus disadari bahwa keduanya tetap berbeda secara logik. Array adalah jenis variabel, sementara list adalah
konstruksi data. Dalam pengertian singkat, bisa dikatakan bahwa array adalah list yang bernama. Semua array
berisi list, tapi tidak semua list berupa array. Dengan pengertian ini kita bisa mendefinisikan sekumpulan
variabel skalar dalam list.
($satu, $dua, $tiga) = (1, 2, 3);
Elemen array diakses dengan sintaks $array[0], angka di dalam “[]” menujukkan indeks elemen dimulai dari 0,
yang berarti elemen pertama. Indeks negatif (dimulai dari -1) menghitung elemen dari belakang.
$minuman[0] # berisi “kopi”
$minuman[2] # berisi “air”
$minuman[-1] # sama, berisi air
Jika kebetulan semua elemen array tidak ada yang mengandung spasi, maka kita bisa mendefinisikan sebuah
array tanpa menggunakan tanda kutip dan koma. Sebagai gantinya kita menggunakan operator qw().
@minuman = qw(kopi teh air);
6
Variabel di Perl
Hash
Definisi hash mirip dengan array. Setiap elemen hash terdiri atas pasangan indeks (key) dan nilai
(value). Berbeda dengan array, indeks di hash menggunakan string, dan nilainya bisa diakses dengan
sintaks $hash{’indeks’}.
%aplikasi = (
‘bahasa’, ‘perl’,
’server’, ‘apache’,
‘teks’, ‘vim’,
);
print $aplikasi{’bahasa’}; # perl
Indeks yang mengandung karakter sederhana tidak perlu dikutip karena otomatis dianggap sebagai
string. Namun jika indeks mengandung karakter selain huruf dan angka, kutip harus digunakan. Hal ini
juga berlaku ketika mengakses elemen. Jadi, $aplikasi{’bahasa’} bisa ditulis sebagai $aplikasi{bahasa}.
Benar dan Salah. Kadang-kadang Anda tidak ingin mengetahui nilai kembalian dari sebuah ekspresi,
baik string maupun angka, Anda hanya ingin tahu benar atau salah. Perl tidak punya jenis data boolean
khusus. Nilai sebuah ekspresi adalah salah satu dari: tak terdefinisi (undefined), benar (true), atau,
salah (false). Untuk memudahkan urusan, selanjutnya saya akan menyebut “tak terdefinisi” dengan
“undef”. Aturan Perl sederhana, semua nilai benar, kecuali yang undef, string kosong (“” atau ‘’), angka
0, dan string “0″.
7
Metode POST dan GET
Tag <FORM> dan <INPUT> digunakan bersama-sama untuk meminta
masukan dari user untuk dikirim ke server. Tag <FORM> membuat kerangka dan
tag <INPUT> menyediakan elemen antarmuka dengan user. Untuk standar
penulisan form adalah sebagai berikut :
<FORM METHOD =”POST/GET” ACTION =”URL”>
…
…
…
</FORM>
Atribut METHOD memiliki 2 nilai POST dan GET. Metode GET mengirimkan data
pada server dengan cara meletakkan data pada bagian akhir URL yang ditunjuk.
Metode POST mengirimkan datanya secara terpisah. Jika masukan banyak maka
disarankan menggunakan POST. ACTION akan berisi URL dari program yang
dipanggil form tersebut.
8
Cascading Style Sheets (CSS)
Daftar Pustaka
Sayid Munawar, “Menjadi WebProgrammer HTML, PHP & MySQL, Dasar
dan Aplikasi ”, 2003. http://cici-tresnawati.tripod.com/Cici.htm.html
http://www.lies.com/begperl/
http://www.ezscripting.com/pathtoperl/
9
Semantic Web
1
Definisi Semantic Web
Semantic web adalah sebuah visi: ide atau pemikiran dari
bagaimana memiliki data pada web yang didefinisikan dan
dihubungkan dengan suatu cara dimana dapat digunakan
oleh mesin tidak hanya untuk tujuan display, tetapi untuk
otomatisasi, integrasi dan penggunaan kembali data diantara
berbagai aplikasi.
Semantic web adalah sebuah web dari data, seperti layaknya

sebuah database global. Pendekatan semantic web
mengembangkan bahasa untuk mengekspresikan informasi
dalam bentuk yang dapat diproses oleh mesin (machine
processable).
2
Definisi Semantic Web
(Lanjutan)
Semantic Web (SW) adalah sebuah abstrak

representasi pada WWW yang berbasiskan pada
sebuah standard yang didefinisikan (RDF, OWL).
Ide dasarnya adalah untuk membawa Web memiliki
definisi dan link data sehingga dapat digunakan
lebih efektif untuk mencari, otomasi, integrasi dan
re-use informasi pada berbagai aplikasi. [W3C]
3
Apa itu Data dari suatu Web ?
Kembali sebentar ke
circa 1993
FTP, Gopher dan

Archie: sangat
populer untuk sharing
sumber daya pada
Internet
Berhenti pada file level

4
(Lanjutan)
Kembali sebentar ke ...
circa 1994
HTML dan URIs
Markup language dan berarti

untuk menghubungkan
sumberdaya
Di bawah file level
Berhenti pada text level
5
(Lanjutan)
Dan sekarang
XML, RDF, OWL dan URIs
Markup language dan berarti

menghubungkan sumberdaya
Di bawah file level
Di bawah text level
Pada data level
6
Komponen Semantik Web
Sumber W3C
7
Ontology
Ontology merupakan suatu teori tentang makna dari

suatu obyek, properti dari suatu obyek, serta relasi
obyek tersebut yang mungkin terjadi pada suatu
domain pengetahuan.
Ontology adalah sebuah spesifikasi dari sebuah

konseptual, dengan kata lain ontology adalah
penjelasan dari sebuah konsep dan
keterhubunganya dari sebuah ilmu tertentu.
8
Semantic Web dan Ontology
• Ontology sebagai katalog dalam

Semantic Web
• Schema Matching mengunakan
Ontology
9
Bahasa dan Tool
• Resource Description Framework (RDF)

• DARPA Mark-up Language + Ontology
Layer Language (DAML + OIL)
• Ontology Web Language (OWL)
• Protege
10
RDF
• RDF adalah layer untuk merepresentasikan
semantik dari isi halaman tersebut
• RDF merupakan sebuah model sederhana

untuk mendeskripsikan hubungan antara
sumber-sumber daya yang merupakan
properties dan values.
11
RDF (lanjutan)
Model RDF adalah suatu triple yang dinamakan
statement: satu sumber daya (subject) yang
dihubungkan ke sumberdaya yang lain atau satu
literal (object) melalui satu arc dari sumberdaya ke
tiga,predikat.
Satu statement dapat didefinisikan sebagai :

<subject> mempunyai satu property <predicate>
yang bernilai<object>. Gambar 1 memperlihatkan
contoh dari statement RDF.
12
RDF (lanjutan)
Gambar 1. Subject - Predicate - Object
13
DAML + OIL
DAML adalah usaha untuk menyediakan
primitif pemodelan yang lebih kaya daripada
RDF dan RDF schema. Kemudian digabung
dengan group lain, dinamakan Ontology
Inference Language (OIL), yang berusaha
untuk menyediakan kalsifikasi yang lebih
baik dengan menggunakan konstruksi dari
kecerdasan buatan yang berbasis frame.
14
OWL
OWL diharapkan untuk mempertemukan kebutuhan
untuk bahasa ontologi di web [8], sehingga perintah
perntah dasarnya akan lebih baik dari RDF dan
RDF schema.
OWL mempunyai beberapa tujuan model desain,

yaitu: shared ontologies, ontology evolution,
ontology inconsistency detection, balance of
expressivity dan scalability, ease of use, XML
syntax, dan internationalization.
15
Protégé
Protégé adalah sebuah alat bantu yang berbentuk perangkat
lunak yang digunakan untuk pengembang sistem untuk
mengembangkan Knowledge-Base System. Aplikasi yang
dikembangkan dengan Protégé digunakan dalam
pemecahan masalah dan pembuat keputusan dalam sebuah
domain.
Protégé dikembangkan oleh sebuah organisasi yang

bernaung di bawah Standford, yang mengambil spesialisasi
dibidang ontology. Segala sesuatu yang berhubungan
dengan Protégé dapat dilihat pada alamat
http://Protege.stanford.edu/, termasuk tutorial dan komunitas
pengguna Protégé.
16
Protégé
Protégé merupakan sebuah alat yang digunakan
untuk membuat sebuah domain ontology,
menyesuaikan form untuk entry data, dan
memasukan data.
Berbagai format penyimpanan seperti OWL, RDF,

XML, dan HTML. Protégé menyediakan
kemudahan plug and play yang membuatnya
fleksibel untuk pengembangan prototype yang
berkembang.
17
1
PBW: Week 02 (HTML)

2
PBW: Week 02 (HTML)

3
PBW: Week 02 (HTML)

4
PBW: Week 02 (HTML)

5
PBW: Week 02 (HTML)

6
PBW: Week 02 (HTML)

7
PBW: Week 02 (HTML)

8
PBW: Week 02 (HTML)

9
PBW: Week 02 (HTML)

10
PBW: Week 02 (HTML)

11
List
 Ordered List
 Unordered List
 Directory List
 Menu List
 Definition List
 Ordered List
Digunakan untuk membuat daftar dimana tiap bagiannya memiliki nomor
secara berurut.
Diawali dengan Tag <OL> dan diakhiri dengan Tag </OL>.

Untuk menyatakan tiap bagiannya digunakan Tag <LI> dan tidak diperlukan
tag penutup.
Contoh :
<HTML>
<HEAD>
<TITLE>Ordered List</Title>
</HEAD>
<BODY>
Contoh Penggunaan Ordered List
<OL>
<LI>Ini adalah nomor pertama
<LI>Ini adalah nomor Kedua
<LI>Ini adalah nomor Ketiga
<LI>Ini adalah nomor Keempat
<LI>Ini adalah nomor Kelima
</OL>
</BODY>
</HTML>
Hasil :
PBW: Week 02 (HTML)

12
Untuk mengganti default dari ordered list digunakan atribut TYPE pada tag
<OL>
Daftar Atribut TYPE :

 TYPE =1  1,2,3 (Default)
 TYPE = I  I,II,III
 TYPE = i  i.ii.iii
 TYPE = A  A,B,C
 TYPE = a  a,b,c
Selain itu disdiakan pula Atribut Start untuk menentukan nilai awal
penomoran.
Contoh :
<HTML>
<HEAD>
<TITLE>Ordered List</Title>
</HEAD>
<BODY>
<OL TYPE = A>
Contoh Penggunaan Ordered List Dengan Atribut
<OL TYPE = 1>
<LI>Ini adalah nomor pertama
<LI>Ini adalah nomor Kedua
<LI>Ini adalah nomor Ketiga
<LI>Ini adalah nomor Keempat
<LI>Ini adalah nomor Kelima
</OL>
<OL TYPE = B>
Sambungan Dari Contoh Di Atas
<OL TYPE =1 START=6>
<LI>Ini adalah nomor Keenam
<LI>Ini adalah nomor Ketujuh
<LI>Ini adalah nomor Kedelapan
</OL>
PBW: Week 02 (HTML)

13
</OL>
</BODY>
</HTML>
Hasil :
 Unordered List
Setiap bagian dari unordered list ditandai dengan tanda Bullet. Diawali
dengan Tag <UL> dan diakhiri dengan Tag </UL>. Untuk menyatakan tiap
bagiannya digunakan Tag <LI> dan tidak diperlukan tag penutup.
Contoh :
<HTML>
<HEAD>
<TITLE>UnOrdered List</Title>
</HEAD>
<BODY>
Contoh Penggunaan UnOrdered List
<UL TYPE=CIRCLE>
<LI>Ini adalah Bullet pertama
<LI>Ini adalah Bullet Kedua
<LI>Ini adalah Bullet Ketiga
<LI>Ini adalah Bullet Keempat
<LI>Ini adalah Bullet Kelima
</UL>
</BODY>
</HTML>
Hasil :
PBW: Week 02 (HTML)

14
Selain tanda bullet anda bisa menngunakan atribut TYPE pada tag <UL>,
atribut TYPE yang disediakan adalah :
 TYPE = CIRCLE
 TYPE = DISK
 TYPE = SQUARE
Grafik dalam halaman Web
Digunakan Tag <IMG> untuk menampilkan gambar, standar penulisannya

adalah :
<IMG SRC=”File_gambar” ALT=”nama_alternatif”>
Contoh :
<HTML>
<HEAD>
<TITLE>Grafik</Title>
</HEAD>
<BODY>
<P ALIGN="LEFT">Contoh Penggunaan Grafik</P>
<P ALIGN="LEFT">
<IMG SRC="syd18.jpg"
ALT="Alternatif image"></P>
</BODY>
</HTML>
Hasil :
PBW: Week 02 (HTML)

15
Atribut yang dapat digunakan :
Border : Memberikan batas pada gambar (default = 0)

Height, Width : Menetukan tinggi dan lebar suatu gambar dalam
ukuran pixel
HSPACE, VSPACE : Menentukan jarak spasi horizontal dan spasi vertical
antara gambar dengan objek disekitarnya
ALIGN : Mengatur perataan gambar terhadap objek
disekelilingnya (Left,Right,Center,Top,Bottom and
middle)
PBW: Week 02 (HTML)

Content Management System
Apa itu CMS ?

Mengapa Perlu CMS ?
Content and Design
Bagan CMS Basic
Keuntungan CMS
Fasilitas Dasar CMS
Penggunaan Joomla sebagai salah satu CMS
1
Apa itu CMS ?
•CMS adalah software yang digunakan untuk membuat, mengubah

dan mempublikasikan content ke dalam sebuah website.
•Fasilitas yang umumnya terdapat dalam CMS sangat banyak,

terutama yang berkaitan dengan publikasi isi website, pengaturan
halaman, pengubahan isi, pencarian dan lain-lain.
•Sebuah CMS, dapat berbentuk program yang sederhana, atau dapat

juga merupakan suatu program kompleks yang terdiri dari berbagai
modul-modul sesuai dengan fasilitas yang terdapat didalamnya
2
Mengapa perlu CMS ?
Karena para pengelola atau pemilik website yang tidak

mahir dalam menggunakan kode HTML dapat melakukan
pembuatan, pengubahan dan publikasi content terhadap
website-nya sendiri.
CMS menyediakan framework manajemen proses yang

dibutuhkan dalam pengembangan website yang
menghendaki pengelolaan yang sering / dalam frekuensi
yang tinggi.
3
Content dan Design
Content
Providers
CMS
Design
Template
4
CMS Basic
5
Web CMS
6
Keuntungan CMS
•Konsistensi design website dapat dijaga

•Tidak diperlukan keahlian khusus untuk pengelolaan website
•Content yang dikehendaki dapat dipublikasikan tanpa pengeditan
oleh orang lain
•Menghemat biaya untuk mempekerjakan web specialist
•Notifikasi otomatis kepada pemilik website jika ada content yang
sudah kadaluarsa
•Memungkinkan kerjasama yang baik antar pengelola suatu website.
•Mengurangi kompleksitas dalam pengelolaan informasi ke website.
7
Fasilitas Dasar CMS
1. Content Authoring, Editing and Management

2. Workflow, Collaboration, and Security
3. Publishing
4. Standards Support
5. Technical specifications
8
1. Content Authoring, Editing
and Management
• Web-based interface
• Content stored and managed in database repository
• XML and XSLT stylesheet templates
• Document upload, drag ‘n drop
• WYSIWYG editing
• Desktop application integration (e.g. Office, Photoshop,
Excel, etc…)
• Document comparison and content versioning
• Content preview and staging
• Content re-use in a one or more websites
• Accessibility compliance
• Spell check
9
2. Workflow, Collaboration,
and Security
• Workflow management
• User and group permissions
• Document check-in/check-out
• Authentication (Active Directory, LDAP, ect…)
• Rollback
• Full content search
• Scheduled backup of all site content (including documents
and images)
• Archiving
• Change tracking and auditing
• Metadata management (content categorization)
• IM, email, forums, notification, approval process
• Task management
10
3. Publishing
• Scheduled and manual publishing

• Multi-site publishing
• Publish to external database
• Friendly URLs
• Printer friendly pages
• Native content syndication (RSS, NewsML, etc…)
11
4. Standars Support
• Section 508-A compliance

• Web services support (WSDL, SOAP, ect…)
• Support for common scripting languages (ASP, JSP,
PHP, CFM)
12
5. Technical Specifications
• Dedicated CMS server (CMS Administrator)

• Dedicated Database server (DB Administrator)
• Dedicated Web Server (Developer)
13
Kolaborasi di CMS
1. Department/Division Project Manager
o Bertanggung jawab terhadap website, pemimpin projek, kontak
personal terhadap projek, membuat jadwal pengerjaan dll
2. Content Specialist
o Membuat/mengedit content, reporter, interviewer, dll.
3. Technical Lead/Web Developer

o CMS Administrator
o Database Administrator
o Web Developer / Designer
14
Kolaborasi di CMS
• Server/CMS Administrator
• Bertanggung jawab dalam install dan konfigurasi CMS (termasuk
module), patch/update, membuat account pengguna CMS dan hak-hak-
nya, memantau performance server dan CMS.
• Database Administrator
• Mengelola dan membuat account pengguna database, backup data,
memantau performace server.
• Web Developer / Designer
• Mengelola scripting program CMS, menambah module, membuat
design template baru.
15
Joomla !
• Joomla! adalah CMS open source yang dapat digunakan secara

bebas.
• Joomla! dibuat oleh ‘Open Source Matters’, yang merupakan tim

pengembang CMS pendahulunya, Mambo CMS.
• Info lebih lengkap dapat dilihat di http://www.joomla.org
16
Tampilan
Backend Joomla
17
Media Manager
18
Pembuatan Content
19
Pemilihan Template
20
Contoh Frontend Joomla
21

Ilovepdf Merged

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Ilovepdf Merged

Diunggah oleh

Hak Cipta:

Format Tersedia

Week 01

Konsep Dasar Pemrograman Web

World Wide Web (WWW/Web)

Uniform Resource Identifier (URI)

Uniform Resource Name : Name

1 Pemrograman Berbasis Web:

Hypertext Transfer Protocol (HTTP)

2 Pemrograman Berbasis Web:

3 Pemrograman Berbasis Web:

Client-side Script seringkali dimasukkan (embedded) di dalam dokumen HTML, tetapi

4 Pemrograman Berbasis Web:

Contoh Teknologi Server-side Programming

Perangkat Lunak Web Server

5 Pemrograman Berbasis Web:

Hypertext Markup Language (HTML)

Secara garis besar, terdapat 4 jenis elemen dari HTML:

6 Pemrograman Berbasis Web:

Cascading Style Sheets

PBW : Week 03 (CSS)

PBW : Week 03 (CSS)

Color & Background Properties

Ada 4 cara dalam menuliskan warna menggunakan kode RGB:

PBW : Week 03 (CSS)

Bottom Border Width

PBW : Week 03 (CSS)

List Style Type

List Style Image

List Style Position

PBW : Week 03 (CSS)

PBW : Week 03 (CSS)

Pengantar Common Gateway

Pemrograman Web/TI/ AK 045216/2 sks

Perl adalah bahasa interpreter sekaligus kompiler, artinya

Pemrograman Web/TI/ AK 045216/2 sks

• Perl memiliki tiga tipe data: skalar, array, dan hash.

Pemrograman Web/TI/ AK 045216/2 sks

Pemrograman Web/TI/ AK 045216/2 sks

Pemrograman Web/TI/ AK 045216/2 sks

Pemrograman Web/TI/ AK 045216/2 sks

Pemrograman Web/TI/ AK045216/2 sks

• JavaScript digunakan pada Web pages untuk meningkatkan design,

• JavaScript adalah bahasa scripting yang paling populer di internet

Pemrograman Web/TI/ AK045216/2 sks

Pemrograman Web/TI/ AK045216/2 sks

• Java (dikembangkan oleh Sun Microsystems) adalah sebuah bahasa

Pemrograman Web/TI/ AK045216/2 sks

• JavaScript dapat digunakan untuk mendeteksi browser pengunjung - JavaScript dapat

Pemrograman Web/TI/ AK045216/2 sks

VBScript: adalah client-side scripting versi Microsoft Visual Basic

• Mendefinisikan programs dengan Web interfaces

• Keterbatasan dari client-side scripting

Pemrograman Web/TI/ AK045216/2 sks

Pemrograman Web/TI/ AK045216/2 sks

Pemrograman Web/TI/ AK045216/2 sks

Pemrograman Web/TI/ AK045216/2 sks

Pemrograman Web/TI/ AK045216/2 sks

<b>Kita cuman menghitung dari 1 sampai 7:</b><br>

Script di atas hanya akan memberikan hasil seperti di bawah ini.

Pemrograman Web/TI/ AK045216/2 sks

• Hasilnya seperti di bawah ini.

Pemrograman Web/TI/ AK045216/2 sks

Pemrograman Web/TI/ AK045216/2 sks

<A HREF="http://xxx.com" onMouseOver="document.bgColor='#ffcc99',

Tidak seperti JavaScript, Java full-featured dengan extensive library support