Modul Pemrograman Web - E
advertisement
1
Modul Pemrograman Web
Arif Dwi Laksito. S.Kom
Table of Contents
1
2
Konsep Dasar Web .............................................................................................................................. 3
1.1
Hypertext .................................................................................................................................... 3
1.2
HTTP ............................................................................................................................................ 3
Sejarah Internet .................................................................................................................................. 3
2.1
Tiga teknologi penting yang menyebabkan internet bisa berkembang seperti saat ini : ............ 4
2.2
Perkembangan Internet dikelompokkan dalam 4 periode perkembangan, yaitu : ..................... 4
2.3
Perkembangan Internet di indonesia .......................................................................................... 4
2.4
Manfaat Internet:........................................................................................................................ 5
2.5
Penyalahgunaan/Kejahatan Internet .......................................................................................... 5
3
PERKEMBANGAN WEB ........................................................................................................................ 5
4
HTML................................................................................................................................................... 7
5
4.1
HTML Element ............................................................................................................................. 8
4.2
HTML Text Formatting ................................................................................................................ 9
4.3
HTML Tabel ................................................................................................................................. 9
4.4
HTML List .................................................................................................................................. 10
4.5
HTML Form ............................................................................................................................... 11
CSS (Cascade Style Sheet) ................................................................................................................. 12
5.1
Inline Style................................................................................................................................. 13
5.2
Embedded Style Sheets ............................................................................................................. 13
5.3
External Style Sheets ................................................................................................................. 14
5.4
CSS Selector .............................................................................................................................. 14
5.4.1
Id Selector ......................................................................................................................... 14
5.4.2
Class Selector .................................................................................................................... 14
5.5
Contoh CSS ................................................................................................................................ 15
5.5.1
CSS Background ................................................................................................................. 15
5.5.2
CSS Table ........................................................................................................................... 16
2
6
Javascript .......................................................................................................................................... 18
6.1
6.1.1
Diletakkan di bagian Head ................................................................................................. 18
6.1.2
Penulisan pada bagian Body .............................................................................................. 18
6.1.3
Penulisan di External File................................................................................................... 19
6.2
Fungsi di Javascript.................................................................................................................... 19
6.2.1
Fungsi tanpa parameter .................................................................................................... 19
6.2.2
Fungsi dengan parameter ................................................................................................. 19
6.2.3
Fungsi yang mengembalikan nilai...................................................................................... 20
6.3
7
Penulisan Javascript .................................................................................................................. 18
Javascript Event......................................................................................................................... 20
HTM L DOM ...................................................................................................................................... 22
7.1
HTML DOM Properties .............................................................................................................. 23
7.2
HTML DOM Methods ................................................................................................................ 23
8
AJAX .................................................................................................................................................. 26
9
JQUERY.............................................................................................................................................. 28
9.1
9.1.1
.click() ................................................................................................................................ 29
9.1.2
.mouseover() ..................................................................................................................... 29
9.1.3
.mouseout()....................................................................................................................... 29
9.1.4
.focus() .............................................................................................................................. 30
9.1.5
.keyup() ............................................................................................................................. 30
9.2
10
Jquery Event .............................................................................................................................. 29
Jquery Effect ............................................................................................................................. 31
9.2.1
.fadeIn() ............................................................................................................................. 31
9.2.2
.fadeOut() .......................................................................................................................... 31
9.2.3
.toggle() ............................................................................................................................. 31
9.2.4
.fadeToggle() ..................................................................................................................... 32
9.2.5
.animate() .......................................................................................................................... 32
XML ............................................................................................................................................... 32
3 Konsep Dasar Web
1 KONSEP DASAR WEB
World Wide Web, Adalah suatu ruang informasi dimana sumber-sumber daya yang berguna
diidentifikasikan oleh pengenal global yang disebut Uniform Resource Identifier (URI).
URI, Terdiri dari string karakter yang digunakan untuk identifikasi atau memberi suatu nama
resource(sumberdaya) di Internet.
URL (Uniform Resource Locator), URL digunakan oleh browser untuk mengidentifikasi sumberdaya di
Internet yang dituliskan dalam satu baris teks. URL dapat dikatakan sebagai bagian dari URI. Ex.
http://www.amikom.ac.id/index.php
1.1 Hypertext
Suatu informasi yang dapat kita baca melaui Web Browser(IE, Firefox, Chrome, Opera, dll)
Kita dapat mengikuti link di setiap halaman untuk pindah ke dokumen lain atau bahkan mengirim
informasi kembali kepada server untuk berinteraksi.
Aktifitas tsb disebut Surfing(berselancar). Halaman web biasanya diatur dalam koleksi material yang
saling terkait, yang disebut Website
1.2 HTTP
Adalah standard request/response antara sebuah client dan server.
Client(web browser) akan mulai melakukan permintaan(request) ke server. Server tersebut akan
menerima request dari client dan akan mengembalikan jawaban(response) ke client yang dapat berupa
pesan error atau informasi lainnya.
2 SEJARAH INTERNET
Internet adalah jaringan komunikasi global yang terbuka dan menghubungkan jutaan jaringan komputer,
melalui sambungan telepon umum maupun pribadi. Secara individu, jaringan komponennya dikelola
oleh agen-agen pemerintah, universitas, organisasi komersial, maupun sukarelawan, Menurut McBride
dlm bukunya, The Internet. Secara harfiah, Internet (kependekan dari interconnected-networking) ialah
sistem global dari seluruh jaringan komputer yang saling terhubung menggunakan standar Internet
Protocol Suite (TCP/IP) untuk melayani miliaran pengguna di seluruh dunia. Cara menghubungkan
rangkaian dengan kaedah ini dinamakan internetworking, Menurut Wikipedia Indonesia.
4 Sejarah Internet
2.1 Pengguna Internet Dunia
2.2 Pengguna Internet Asia
2.1 Tiga teknologi penting yang menyebabkan internet bisa berkembang
seperti saat ini :
Teknologi Paket Switching (60-an)
Protokol TCP/IP (awal 80-an)
Standar HTML (awal 90-an)
2.2 Perkembangan Internet dikelompokkan dalam 4 periode perkembangan,
yaitu :
Periode pertama : Packet switching (1961-1972)
Periode kedua : Internetworking (1972-1980)
Periode ketiga : Protokol Baru dan pertumbuhan jaringan (1980-1990)
Periode keempat : komersialisasi, Website dan aplikasi baru (1990-2000an)
2.3 Perkembangan Internet di indonesia
Berawal dari BPPT – UI – LAPAN di tahun 1992
Terbentuk Paguyuban – teknologi packet radio sebagai basis untuk network regional
5 PERKEMBANGAN WEB
1994 – Indointernet sebagai ISP komersil pertama
1996 – paling tidak 20 ISP komersil & 40 ISP menunggu ijin operasi
World Wide Web Consortium(W3C): Bertanggung jawab terhadap perkembangan dari berbagai
protokol dan standar yang terkait dengan web. Misalnya standarisasi HTML, XHTML, dan CSS
diatur oleh W3C.
The Internet Assigned Authority (IANA) & Internet Network Information Center (InterNIC): Kelompok ini
bertanggung jawab terhadap alokasi alamat IP dan nama domain.
2.4 Manfaat Internet:
Banyak resource yang gratis dan mudah diakses
Koneksitas Many-to-many dengan siapapun dimanapun
Informasi yang melimpah (abundant)
Informasi yang terdistribusi luas (widely distributed)
2.5 Penyalahgunaan/Kejahatan Internet
Virus
Spam mail (mail bomb)
Hacking (masuk ke jaringan lain)
Copying ilegal : konten, software. dll
Pemalsuan Naskah, tandatangan (Forgery)
Penggunaan Resource orang lain tanpa ijin
3 PERKEMBANGAN WEB
Di awal tahun 90-an telah dikenal sebuah teknologi informasi dan komunikasi khususnya dalam bidang
website. Pada tahun itu sangat membantu dalam komunikasi antar manusia di dunia karena dalam
website tersebut user bisa melihat informasi yang ditampilkan oleh pemilik website. Informasi yang
berupa tulisan dapat diakses dari seluruh dunia.
6 PERKEMBANGAN WEB
3.1 Web Amikom Januari Tahun 2001
Kira-kira pada Tahun 1997 sudah semakin berkembang untuk tampilan sebuah website. Desain web
menjadi lebih menarik dengan menggunakan CSS atau Javascript untuk memperindah tampilan. User
pengguna lebih banyak berinteraksi di web, seperti search, input form, FAQ, forum atau buku tamu di
web.
Dan sekitar tahun 2000-an tampilan web menjadi lebih interaktif, yang sebelumnya animasi hanya
menggunakan javascript dan java applet, kini digunakan flash dan sudah dapat menggunakan movie
atau sound yang tersaji di halaman web.
Boleh dikatakan bahwa website di era ’90 an merupakan website 1.0 dan di era 2000-an merupakan era
website 2.0. Kalau kita lihat ada banyak sekali perkembangan yang terjadi. Misalnya saja kalau jaman
dahulu di website 1.0 user hanya bisa melihat informasi saja, kalau di jaman sekarang website 2.0 user
bisa berkomunikasi dengan lebih fleksibel.
Dari sisi teknologi HTML mulai berkembang menjadi XHTML dan lebih kuat di CSS untuk design Web,
kemudian muncul juga RSS Feed dalam format XML yang dapat digunakan untuk selalu update informasi
web tersebut tanpa harus membuka web tersebut, tetapi harus menggunakan RSS Reader yang dapat di
develop menggunakan berbagai bahasa pemrograman, sehingga memungkinkan dapat diakses melalui
aplikasi-aplikasi dalam bentuk selain website.
Teknologi javascript juga mulai dikembangkan menjadi AJAX, yang merupakan perpaduan antara
Javascript dan XML yang memungkinkan meload/mengambil kontent dari suatu web tanpa harus
melakukan refresh/berpindah halaman.
7 HTML
Pada era tahun 2007 Social Networking mulai berkembang dan menjadi tren dalam teknologi informasi
khususnya web site. Disini aplikasi tersebut menyediakan interaksi antar user untuk share comment,
photo atau data-data yang lain.
Aplikasi web di era ini juga menjadi sebuah platform baru, yaitu dari pihak lain dapat mengembangkan
aplikasi(plugin) untuk dapat digunakan di web tersebut.
Sejak saat itu, muncul juga teknologi Web Service yang memungkinkan aplikasi lain mengakses datadata dari penyedia layanan untuk digunakan. Aplikasi ke-3 tersebut tidak hanya dapat membaca datadata saja, tetapi bisa juga melakukan update terhadap data-data tersebut.
3.2 Web Twitter Tahun 2012
Dan di era 2010 sampai sekarang, teknologi web lebih ke arah Web Cerdas atau Web dengan Engine
Kecerdasan Buatan, yang lebih memudahkan user dalam berinteraksi.
Teknologi Web Semantik dan Cloud Computing mulai dikenalkan di era web versi 3.0 ini
4 HTML
HTML adalah bahasa untuk membentuk sebuah halaman web, dan html bukan sebuah bahasa
pemrograman melainkan bahasa markup (markup language). Markup language terdiri dari sekumpulan
markups tag. HTML adalah suatu singkatan dari Hyper Text Markup Language, jadi html menggunakan
markups tag untuk membentuk sebuah halaman web.
8 HTML
HTML markups tag biasa juga disebut HTML tag, html tag adalah suatu text/keyword yang di apit oleh
suatu tag seperti <html>. Html tag biasanya berupa suatu pasangan tag, meskipun ada juga yang satu
tag. Contohnya <p>this is paragraph</p>, merupakan suatu html tag yang diawali dengan openig tag
<p> dan closing tag </p>. Berbeda dengan contoh berikut: <p>this is first line <br /> and this is second
line</p>, tag <br /> adalah opening tag sekaligus closing tag.
Berikut contoh struktur dasar HTML tag yang membentuk sebuah halaman web:
<html>
<head></head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
4.1 HTML Element
Sebelum memulai menuliskan tag html, kita perlu persiapkan text editor dan web browser. Untuk
pemula disarankan jangan menggunakan Adobe Dreamweaver karena sudah banyak tools instant yang
bisa digunakan, silahkan gunakan Notepad++ atau Aptana.
Sebuah tag html ada yang mempunyai attribute atau tidak, attribute tsb digunakan sbg tambahan
informasi di dalam elemen html. Attribute tsb dituliskan di dalam opening tag html, dan attribute
mempunyai name dan value. Penulisan atara nama attribute dan value attribute dipisahkan dengan
tanda = dan di value harus selalu menggunakan quote(”).
Penulisan semua elemen html termasuk tag dan attribute harus menggunakan lower-case.
4.1 Struktur element HTML
9 HTML
4.2 HTML Text Formatting
Beberapa tag html digunakan untuk melakukan formatting terhadap text, seperti <b>, <i>, <em> dsb.
Berikut beberapa tag-tag html yang disebut dengan formatting tag
TAG
DESCRIPTION
<b>
Defines bold text
<big>
Defines big text
<em>
Defines emphasized text
<i>
Defines italic text
<small>
Defines small text
<strong> Defines strong text
<sub>
Defines subscripted text
<sup>
Defines superscripted text
<ins>
Defines inserted text
<del>
Defines deleted text
4.3 HTML Tabel
Table di HTML di definisikan dengan tag <table>. Table terbagi dalam baris/rows dengan tag <tr>, dan
tiap baris terbagi lagi dalam kolom dengan tag <td> untuk data atau <th> untuk header.
Di dalam tag <td> dapat berisi text atau tag-tag html lain seperti link, image, list, form, dll.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Kita dapat juga mengganti <td> ke <th> untuk header
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
10 HTML
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Di dalam tabel cell kita dapat juga menggabungkan kolom dengan atribut colspan atau menggabungkan
baris dengan atribut rowspan
<table border="1">
<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td colspan="2">
row 2 cell 1
</td>
</tr>
</table>
<table>
<tr>
<td rowspan="2">
row 1 cell 1
</td>
<td>
row 1 cell 2
</td>
</tr>
<tr>
<td>row 2 cell 2</td>
</tr>
</table>
4.4 HTML List
List di HTML dapat berupa list berurutan (ordered list) atau list tidak berurutan (unordered list). Ordered
list dapat menampilkan list seperti anga 1, huruf a, romawi I. Sedangkan untuk unordered list dapat
menampilkan list seperti disk(dot), lingkaran(circle), persegi(square).
11 HTML
Berikut contoh untul Unordered list
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<ul type="disc">
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
Dan berikut contoh untuk ordered list, di ordered list kita dapat menambahkan atribut start untuk
memulai awalan list
<ol>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>
<ol type="I">
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>
4.5 HTML Form
Form digunakan untuk berkomunikasi antar pengguna web dengan server, atau untuk mengirim data ke
server untuk di proses. Form menggunakan tag <form> yang mempunyai content di dalamnya beberapa
tag-tag input yang dapat digunakan untuk interaksi user dengan server.
Berikut beberapa element yang digunakan sebagai input di dalam form :
1. Text Fields <input type=”text” /> defines a one-line input field that a user can enter text
2. Password Field <input type=”password” /> defines a password field
3. Radio Buttons <input type=”radio” /> defines a radio button. Radio buttons let a user select
ONLY ONE of a limited number of choices
4. Checkboxes <input type=”checkbox” /> defines a checkbox. Checkboxes let a user select ONE or
MORE options of a limited number of choices.
12 CSS (Cascade Style Sheet)
5.
6.
7.
8.
Option <select><option value=”1″>Value 1</option></select> defines a option select.
Textarea <textarea></textarea> defines a input field for rich text.
File <input type=”file” /> defines a input field for upload files.
Submit Button <input type=”submit” /> defines a submit button.
<form method="post" action="">
First Name:<input type="text" size="12" maxlength="12" name="fname"><br />
Last Name:<input type="text" size="12" maxlength="36" name="lname"><br />
Gender::<br />
<input type="radio" value="male" name="gender"> Male<br />
<input type="radio" value="female" name="gender"> Female<br />
Please choose Favourite foods::<br />
<input type="checkbox" value="Steak" name="food[]"> Steak<br />
<input type="checkbox" value="Pizza" name="food[]"> Pizza<br />
<input type="checkbox" value="Chicken" name="food[]"> Chicken<br />
<textarea rows="5" cols="20" name="quote" wrap="physical"></textarea><br />
Select a Level of Education::<br />
<select name="education">
<option value="junior">Jr.High</option>
<option value="high">HighSchool</option>
<option value="college">College</option></select><br />
Upload foto: <br />
<input type="file" name="foto" /><br />
<input type="submit" value="Simpan" />
<input type="reset" value="Reset" />
</form>
5 CSS (CASCADE STYLE SHEET)
CSS (Cascade Style Sheet) digunakan untuk dapat menambahkan style halaman kita, meningkatkan dan
memperbaiki penyajian isi halaman. CSS juga dapat bertindak sebagai lapisan yang mempengaruhi
13 CSS (Cascade Style Sheet)
presentasi dari elemen XHTML yang diberikan. Warna, font, text size, background, susunan elemen pada
halaman dan seluruh aspek presentasi isi, dikontrol oleh CSS.
CSS dibangun berdasarkan aturan-aturan yang berisi set intruksi yang dapat memerintahkan browser
mengikuti aturan untuk mengubah penampilan elemen XHTML didasarkan pada nilai-nilai yang
diberikan.
1 CSS Rule
Untuk dapat menggunakan CSS kita harus menghubungkan style sheet ke dokumen HTML kita. Cara
menggabungkan CSS ke dokumen HTML ada 3 cara, yaitu:
Inline Style
Embedded Style Sheets
External Style Sheets
5.1 Inline Style
Kita dapat memasukkan deklarasi CSS dalam gaya opsional atribut sari setiap elemen dan markup. Tidak
dibagun sebagai aturan, dan tidak ada selector karena properti dan nilainya melekat langsung pada
elemen.
<h2 style="color: red; border-bottom: 1px">
Good eats for hungry geeks
</h2>
<p style="color: gray; margin-left: 10px">
Our fresh pizzas, hearty pasta dishes, and succulent desserts are sure to please.
And don't forget about our daily chalkboard specials!
</p>
5.2 Embedded Style Sheets
Kita dapat menanamkan aturan CSS dalam elemen head dari dokumen, yan gaturan tersebut dapat
digunakan pada dokumen yang sama dimana dideklarasikan. Embedded style sheet (kadang disebut
internal style sheet).
14 CSS (Cascade Style Sheet)
<head>
<style type="text/css">
h2 { color: red; }
p { color: gray; }
.info {background:#cccccc; border:1px}
.label {margin:5px; color:#efefef}
</style>
</head>
5.3 External Style Sheets
Model ini adalah yang terbaik yaitu menempatkan aturan CSS terpisah dengan dokumen XHTML, style
sheet external langsung terhubung dengan dokumen. Kode CSS tersebut disimpan dalam file yang
terpisah dengan extensi .css.
Pendekatan ini benar-benar memisahkan antara presentasi dan isi dan struktur. Sebuah dokumen
XHTML menghubungkan ke external style sheet melalui elemen head.
<head>
<link rel="stylesheet"
type="text/css" href="styles.css" />
</head>
5.4 CSS Selector
Selain menggunakan style format untuk tiap elemen tag di html, di CSS kita dapat juga menetapkan
seleksi tag-tag html menggunakan “id” atau “class”.
5.4.1 Id Selector
Id Selector digunakan untuk menambahkan style di elemen html tunggal yang unik. Id Selector
menggunakan atribut id elemen html, dan didefinisikan dengan “#”. Cara pemanggilan di dalam tag html
adalah dengan menambahkan atribut id dan values nama elemen id tersebut.
#head{
text-align:center;
color:red;
}
<div id="head">Iam Heading Text</div>
5.4.2 Class Selector
Class Selector digunakan untuk menentukan style untuk sekelompok elemen html. Berbeda dengan id
selector, pemilih kelas yang paling sering digunakan pada beberapa elemen. Hal ini memungkinkan
untuk menggunakan style tertentu untuk elemen html dengan banyak kelas yang sama. Class Selector
menggunakan atribut id elemen html, dan didefinisikan dengan “.” Cara pemanggilan di dalam tag html
adalah dengan menambahkan atribut class dan values nama elemen class tersebut.
.center {text-align:center;}
15 CSS (Cascade Style Sheet)
<p class="center">The quick brown fox jumps over the lazy dog</p>
5.5 Contoh CSS
5.5.1 CSS Background
Untuk memperindah tampilan halaman suatu web kita dapat menggunakan background yang di
definisikan di CSS dengan menggunakan warna atau image atau kombinasi dari warna dan image. Untuk
penggunaan background tidak hanya dapat digunakan dalam tag body di halaman web saja, kita dapat
menggunakan di selector (ID dan CLASS) untuk layout tertentu dari bagian halaman web.
1. Background Colour
body
{
background: #e5e500;
}
2. Background Image
body
{
background: url('path-to-the-image');
}
3. Repeat Background Image
body
{
background: url('path-to-the-image') repeat-x; /* repeat horizontal */
background: url('path-to-the-image') repeat-y; /* repeat vertical */
}
4. Background Image Position
body
{
background: url('path-to-the-image') 0px 100px;
background: url('path-to-the-image') top center;
}
5. Background colour dan Image
body
{
background: #f5f5f5 url('path-to-the-image') no-repeat top left;
}
16 CSS (Cascade Style Sheet)
5.1 Tampilan Web dengan CSS Background
5.5.2 CSS Table
Dalam mendesign halaman web, tabel sering kita gunakan untuk menampilkan data-data berurutan
dalam jumlah yang banyak. Untuk memudahkan user melihat data tersebut dan mempercantik
tampilan, tabel tersebut dapat kita tambahkan CSS
Contoh script css sebagai berikut
h1{
font: 18px/24px Verdana, Arial, Helvetica, sans-serif;
}
table {
font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 600px;
}
17 CSS (Cascade Style Sheet)
th {
padding: 0 0.5em;
text-align: left;
border-top: 1px solid #FB7A31;
border-bottom: 1px solid #FB7A31;
background: #FFC;
}
td {
border-bottom: 1px solid #CCC;
padding: 0 0.5em;
}
td:first-child {
width: 10px;
text-align:center
}
tr:hover{
background:#e5e5e5;
}
tr:nth-child(odd)
{
background-color:#f5f5f5;
}
tr:nth-child(even)
{
background-color:#fff;
}
18 Javascript
5.2 Tampilan Web dengan CSS Table
6 JAVASCRIPT
JavaScript didesain untuk menambah interaktif suatu halaman Web dan merupakan suatu bahasa
Scripting (bahasa pemrograman ringan). JavaScript berisi baris kode yg dijalankan di web browser dan
biasanya disisipkan (embedded) dalam halaman Web, javaScript juga merupakan bahasa interpreter
(script di eksekusi tanpa kompilasi)
Penulisan JavaScipt pada halaman web ada 3 cara, yaitu:
1. Diletakkan di Head
2. Ditulisakan di Body
3. External File
6.1 Penulisan Javascript
6.1.1 Diletakkan di bagian Head
Skrip ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan
trigger pada event tertentu. Peletakan skrip di head akan menjamin skrip di-load terlebih dahulu
sebelum digunakan (dipanggil).
<head>
<script type="text/javascript"> ... </script>
</head>
6.1.2 Penulisan pada bagian Body
Skrip akan dieksekusi ketika halaman di-load sampai di bagian <body>. Ketika menempatkan skrip pada
bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian. JumlahJavaScript di<head>
dan<body> yang ditempatkan pada dokumen kita tak terbatas.
<html>
19 Javascript
<head></head>
<body>
<script type="text/javascript"> ... </script>
</body>
</html>
6.1.3 Penulisan di External File
Terkadang kita ingin menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang
berbeda, tetapi tidak mau disibukkan jika harus menulis ulang skrip yang diinginkan di setiap halaman.
<body>
<script type="text/javascript" src="xxx.js"> ... </script>
</body>
Contoh Javascript sederhana untuk menampilkan text di browser
<body>
<script type="text/javascript"> Document.write("ini ditulis dgn javascript");
</script>
</body>
Contoh Javascript sederhana menampilkan alert di halaman web
<body>
<script type="text/javascript"> alert("ini ditulis dgn javascript"); </script>
</body>
6.2 Fungsi di Javascript
Seperti di pemrograman lainnya, Fungsi di javascript di gunakan untuk mempaket baris-baris kode yang
sering kita gunakan dengan tujuan menyederhanakan penulisan script itu sendiri.
Biasanya penulisan Javascript di External File banyak menggunakan fungsi, berikut beberapa macam
penulisan fungsi di Javascript :
1. Fungsi tanpa parameter
2. Fungsi dengan parameter
3. Fungsi yang mengembalikan Nilai
6.2.1
Fungsi tanpa parameter
<script type="text/javascript">
function showMsg(){
alert("Hello World"); }
</script>
6.2.2
Fungsi dengan parameter
<script type="text/javascript">
20 Javascript
function showMsg(txt){
alert(txt); }
</script>
6.2.3
Fungsi yang mengembalikan nilai
<head>
<script type="text/javascript">
function jml(a,b){
return a+b;
}
</script>
</head>
<body>
<script type="text/javascript"> document.write(jml(4,7)); </script>
</body>
6.3 Javascript Event
Adalah suatu aksi di web browser yang dapat dikenali oleh Javascript. Setiap elemen di dalam tag-tag
html mempunyai event yang dapat dikenali untuk diteruskan ke proses-proses menggunakan javascript.
Sebagai contoh event onClick pada elemen html yang akan mengakses fungsi-fungsi tertentu saat user
melakukan klik di elemen tersebut.
Beberapa events yang dapat dikenali olehJavascript:
1.
2.
3.
4.
5.
6.
A mouse click
A web page or an image loading
Mousing over a hot spot on the web page
Selecting an input field in an HTML form
Submitting an HTML form
A keystroke
Contoh script penggunaan Events
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
21 Javascript
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
Event
Applies To:
Triggered When:
onClick
Button, Document, Checkbox,
The object is clicked on.
Link, Radio, Reset, Submit
onChange
FileUpload, Select, Text, TextArea
The user types anything on
the control.
onSubmit
Form
The form’s Submit button is
clicked.
onMouseDown Button, Document, Link
The user presses a mouse
button.
onMouseMove
Image (NOT NS4), Link ,span,div
The user moves the mouse.
onMouseOut
Image (NOT NS4), Link ,span,div
The user moves the mouse
away from the object.
onMouseOver
Image (NOT NS4), Link ,span,div
The user moves the mouse
over the object.
onMouseUp
Button, Document, Link ,span,div
The user releases a mouse
button.
onMove
Window
The user moves the browser
window or frame.
onFocus
Button, Checkbox, FileUpload,
The object in question gains
Layer, Password, Radio, Reset,
focus (e.g. by clicking on it or
Select, Submit, Text, TextArea,
pressing the TAB key).
Window
onBlur
Button, Checkbox, FileUpload, The object in question loses
Layer, Password, Radio, Reset, focus (e.g. by clicking outside
22 HTM L DOM
Select, Submit, Text, TextArea, it or pressing the TAB key).
Window
onKeyDown
Document, Image, Link, TextArea
The user presses a key.
onKeyPress
Document, Image, Link, TextArea
The user presses or holds
down a key.
onDblClick
Document, Link
The object is double-clicked
on.
onDragDrop
Window
An icon is dragged and
dropped into the browser.
onError
Image, Window
A JavaScript error occurs.
onKeyUp
Document, Image, Link, TextArea
The user releases a key.
onLoad
Image, Window
The whole page has finished
loading.
onReset
Form
The user clicks the form’s
Reset button.
onResize
Window
The user resizes the browser
window or frame.
onSelect
Text, Textarea
The user selects text within
the field.
onAbort
Image
The loading of the image is
cancelled.
onUnload
Window
The user leaves the page.
7 HTM L DOM
The W3C Document Object Model (DOM) adalah standard bagaimana mengambil, update,
menambahkan atau menghapus element di HTML. Menurut DOM, segala sesuatu yang terdapat di
dokumen HTML adalah node.
Seluruh dokumen HTML adalah dokumen node
Setiap HTML element adalah element node
Text diantara HTML element adalah text node
Setiap atribut di HTML element adalah atribut node
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
23 HTM L DOM
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
Dari contoh dokumen HTML diatas, dapat kita ambil kesimpulan
Node root adalah element <html>
<html> node mempunyai 2 child yaitu node <head> dan <body>
<head> node mempunyai child <title>
<body> node mempunyai 2 child <h1> dan <p>
Perlu diperhatikan bahwa Text node selalu tersimpan diantara node atau html element, dan HTML DOM
dapat mengakses value dari text tersebut menggunakan properti innerHTML.
7.1 HTML DOM Properties
Some DOM properties:
x.innerHTML – the text value of x
x.nodeName – the name of x
x.nodeValue – the value of x
x.parentNode – the parent node of x
x.childNodes – the child nodes of x
x.attributes – the attributes nodes of x
Note: In the list above, x is a node object (HTML element).
7.2 HTML DOM Methods
Some DOM methods:
x.getElementById(id) – get the element with a specified id
x.getElementsByTagName(name) – get all elements with a specified tag name
x.appendChild(node) – insert a child node to x
x.removeChild(node) – remove a child node from x
Note: In the list above, x is a node object (HTML element).
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
txt = document.getElementById("intro").innerHTML;
document.write("<p>The text from the intro paragraph: " + txt + "</p>");
24 HTM L DOM
</script>
</body>
</html>
Dari contoh script diatas, variabel txt menampung text node dari element <p>. Saat kita ganti Hello
World! dengan text lain, maka variabel txt akan ikut berubah.
Kita dapat mengganti properties innerHTML menjadi nodeName untuk mengetahui nama element html
yang menpunyai atribut “intro” tersebut.
<html>
<body>
<p>Hello World!</p>
<p>Hello Dab!</p>
<script type="text/javascript">
x = document.getElementsByTagName("p");
y = x[0].innerHTML;
document.write(y);
</script>
</body>
</html>
Dari contoh script diatas, variabel x menampung text dari node <p>. Karena menggunakan method
getElementsByTagName, kemungkinan adanya tag <p> lebih dari satu sangat memungkinkan, maka kita
gunakan variabel baru untuk menampung data tersebut dengan menyebutkan index array dan
menggunakan properties innerHTML.
Bisa dicoba dengan mengubah index array dari 0 ke 1, maka akan terihat perubahan text node yang
tampil.
Sekarang kita coba untuk melakukan update/perubahan text node di html element.
<html>
<body>
<p id="p1">Hello World!</p>
<script type="text/javascript">
document.getElementById("p1").innerHTML="New text!";
25 HTM L DOM
</script>
</body>
</html>
Dari script diatas, dapat kita lihat browser menampilkan New text! di dalaman element <p>, tidak text
Hello World! seperti pada source code. Disini kita melakukan perubahan text node di elemen <p>
tersebut dengan properties innerHTML.
Kita dapat juga melakukan perubahan text node saat event tertentu, misalkan kita gunakan button
dengan event onclick untuk merubah text node, perhatikan script berikut:
<html>
<body>
<p id="p1">Hello World!</p>
<input type="button" onclick="document.getElementById('p1').innerHTML='New text!';"
value="Abrakadabra" />
</body>
</html>
Contoh diatas kita hanya merubah 1 text node saja, jika perubahan lebih dari 1 akan lebih mudah kita
gunakan function untuk mengatasi hal tersebut seperti contoh berikut:
<html>
<head>
<script type="text/javascript">
function change()
{
document.getElementById("p1").innerHTML="New text!";
document.body.style.backgroundColor="lavender";
}
</script>
</head>
<body>
<p id="p1">Hello world!</p>
<input type="button" onclick="change()" value="Abakadabra" />
</body>
</html>
Konsep HTML DOM ini akan kita gunakan untuk menggunakan AJAX atau Jquery di pembahasan
selanjutnya..
26 AJAX
8 AJAX
AJAX(Asynchronous Javascript and XML) bukan merupakan bahasa pemrogrman baru, tetapi merupakan
suatu cara menggabungkan antara Javascript dan XML. Konsep AJAX adalah melakukan pertukaran data
ke server dan melakukan update di sebagian halaman web tanpa melakukan reload/refresh seluruh
halaman.
AJAX menggunakan standard Internet, yaitu:
XMLHttpRequest object (to exchange data asynchronously with a server)
JavaScript/DOM (to display/interact with the information)
CSS (to style the data)
XML (often used as the format for transferring data)
Langkah-langkah Pemrograman AJAX
1. XMLHttpRequest Object, disini digunakan sebagi object untuk pertukaran data ke server.
Dibedakan menjadi 2 jenis, yaitu untuk IE 6 kebawah menggunakan
new ActiveXObject("Microsoft.XMLHTTP");
dan selain itu menggunakan
new XMLHttpRequest();
2. Mengirim request ke Server, disini digunakan 2 fungsi, yaitu : open(method, url, async) dan
send()
xmlhttp.open("GET","data.txt",true);
xmlhttp.send();
3. Onreadystatechange Event, digunakan untuk mengambil data setiap request ke server dan
server siap mengembalikan response. Di function ini digunakan readyState dan Status untuk
melakukan pengecekan
PROPERTY
DESCRIPTION
onreadystatechange
Stores a function (or the name of a function) to be called automatically
each time the readyState property changes
readyState
Holds the status of the XMLHttpRequest. Changes from 0 to 4:
0:
request
not
initialized
1:
server
connection
established
2:
request
received
3:
processing
request
4: request finished and response is ready
status
200:
404: Page not found
“OK”
27 AJAX
4. Callback Function, digunakan untuk melakukan update terhadap element HTML yang kita
inginkan dengan
5. kembalian data dari Server.
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
Berikut code lengkap jika kita ingin mengambil data dari Server, di code tersebut kita akan mengambil
data.txt dari server web, maka kita harus siapkan web server(dapat menggunakan XAMPP) dan letakkan
file data.txt di htdocs.
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://localhost/data.txt",true);
xmlhttp.send();
}
</script>
</head>
28 JQUERY
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
9 JQUERY
jquery merupakan library javascript yang lebih memudahkan kita dalam develop tampilan web supaya
lebih interaktif. Untuk menggunakan jquery kita harus menyertakan file library jquery tsb di dalam
halaman web.
<script type="text/javascript" src="jquery.js"></script>
Beberapa fitur yang disediakan jquery antara lain: HTML element selections, HTML element
manipulation, CSS manipulation, HTML event functions, JavaScript Effects and animations, HTML DOM
dan AJAX.
Kerangka awal struktur coding penggunaan jquery adalah sbb:
$(document).ready(function(){
});
Contoh script diatas adalah jika tidak ada event tertentu, maka script javascript bisa di letakkan di dalam
kerangka tersebut, sedangkan jika terdapat event maka coding menyesuaikan setelah event , contoh:
$(document).ready(function(){
$("#menu").click(function(){
})
});
Contoh script jquery dengan event click dan menampilkan effect slide toggle pada image
<script type="text/javascript">
$(document).ready(function(){
$('img').hide();
$('#title').click(function(){
$('img').slideToggle(500);
});
});
</script>
29 JQUERY
<div id="title">HTC Desire S Review</div>
<img src="img/htc-desire-s.jpg" alt="Desire S Image" />
Diatas adalah contoh konsep penulisan jquery, untuk lebih detail dalam menggunakan fitur-fitur yang
ada di jquery bisa langsung menuju ke dokumentasi jquery
9.1 Jquery Event
Di artikel kali ini saya akan mencoba menjelaskan tentang event di jQuery, event disini maksudnya
pemicu untuk memulai fungsi-fungsi yang akan dikerjakan saat terjadi event tersebut.. *kurang lebih
seperti itu*
Banyak sekali event yang sudah tersedia di jQuery, tapi saya akan jelaskan sebagian saja yang sering
digunakan.
9.1.1 .click()
Fungsi-fungsi akan dijalankan jika kita menekan tombol kiri dari mouse di element tertentu yang telah
kita definisikan (selector, HTML DOM).
<p id="select">Click me if you can</p>
<p id="result"></p>
$(document).ready(function(){
$('#select').click(function(){
$('#result').text('yeeeaah, you got it!!');
});
});
Contoh script diatas saat element p dengan id select di kenakan event click, maka element p yang lain
dengan id result akan di sisipkan text diantara element p tersebut.
9.1.2 .mouseover()
Event akan menjalankan fungsi-fungsi saat pointer mouse melewati element tertentu yang telah kita
definisikan.
<p id="select">Click me if you can</p>
<p id="result"></p>
$(document).ready(function(){
$('#select').mouseover(function(){
$('#result').text('yeeeaah, you got it!!');
});
});
9.1.3 .mouseout()
Merupakan lawan/kebalikan dari event .mouseover(), fungsi-fungsi akan di jalankan saat pointer mouse
meninggalkan element yang telah kita definisikan.
<p id="select">Click me if you can</p>
30 JQUERY
<p id="result"></p>
$(document).ready(function(){
$('#select').mouseover(function(){
$('#result').text('yeeeaah, you got it!!');
});
$('#select').mouseout(function(){
$('#result').text('');
});
});
9.1.4 .focus()
Event yang biasa digunakan untuk textfield di form, fungsi-fungsi akan dijalankan saat focus keyboard
atau mouse berada di dalam element textfield tersebut.
<input type="text" id="select" />
<p id="result"></p>
$(document).ready(function(){
$('#select').focus(function(){
$('#result').text('yeeeaah, you got it!!').fadeOut(2000);
});
});
Saat mouse atau cursor keyboard masuk ke dalam textfield, maka element p dengan id result akan
menampilkan text dan saat tambahkan effect .fadeOut() yang akan menghilangkan text dalam rentang
waktu 2000ms(2dtk).
9.1.5 .keyup()
Event ini sering digunakan di textfield pada form juga, tetapi fungsi-fungsi dijalankan saat kita
mengetikkan karakter melalui keyboard pada element textfield tersebut.
<input type="text" id="select" />
<p id="result"></p>
$(document).ready(function(){
$('#select').keyup(function(){
var isi = $('#select').val();
$('#result').text(isi);
});
});
Script diatas melakukan event trigger saat user menuliskan karakter di textfield dan var count akan
menghitung jumlah karakter yang sudah dituliskan.
31 JQUERY
9.2 Jquery Effect
Terdapat juga beberapa effect yang dapat kita gunakan dalam develop jQuery, effect tersebut akan
membuat tampilan di halaman web lebih interaktif. Beberapa effect tersebut dapat kita gunakan
langsung atau dengan perpaduan effect yang lain.
Berikut contoh Effect yang sering kita gunakan di jQuery
9.2.1 .fadeIn()
Menampilkan effect memudar dari element yang disembunyikan menjadi tampil, kita dapat mengisi
parameter “slow”, “fast” atau menggunakan satuan milisecond.
<button id="select">hello</button><br />
<p id="rst"></p>
$('#rst').hide();
$('#select').click(function(){
$('#rst').text('ok, you got it!!').fadeIn(3000);
});
9.2.2 .fadeOut()
Merupakan Effect yang berlawanan dari .fadeIn(), effect tersebut akan memudarkan element menjadi
hilang, parameter dapat menggunakan “slow”, “fast” atau menggunakan satuan milisecond
<button id="select">hello</button><br />
<p id="rst"></p>
$('#rst').hide();
$('#select').click(function(){
$('#rst').text('ok, you got it!!').fadeIn(3000, function(){
$('#rst').fadeOut(2000);
});
});
9.2.3 .toggle()
Effect yang digunakan untuk menampilkan dan menyembunyikan element secara bergantian berdasar
pointer mouse, parameter dapat menggunakan “slow”, “fast” atau menggunakan satuan milisecond.
<button id="select">hello</button><br />
<p id="rst"></p>
$('#rst').hide();
$('#select').click(function(){
$('#rst').text('ok, you got it!!').toggle('fast');
});
32 XML
9.2.4 .fadeToggle()
Sama seperti effect .toggle() dengan tambahan animasi membaur, parameter dapat menggunakan
“slow”, “fast” atau menggunakan satuan milisecond.
<button id="select">hello</button><br />
<p id="rst"></p>
$('#rst').hide();
$('#select').click(function(){
$('#rst').text('ok, you got it!!').slideToggle('fast');
});
9.2.5 .animate()
Merupakan effect yang dapat kita custom sendiri sesuai dengan CSS, parameter yang kita gunakan
adalah menggunakan beberapa properties CSS, satuan waktu saat animasi berjalan dan fungsi setelah
animasi selesai.
<button id="select">hello</button><br />
<p id="rst">ok, you got it!!</p>
$('#select').click(function(){
$("#rst").animate({
marginLeft: "20px"
}, 1000, function(){ $(this).fadeOut('2000'); });
});
10 XML
XML adalah suatu format dokumen yang digunakan untuk penyimpanan data, berbeda dengan fungsi
HTML yang lebih fokus pada tampilan. Format penulisan elemen di XML mirip dengan di HTML, tetapi di
XML kita dapat mendefinisikan sendiri elemen-elemen yang akan kita gunakan.
Tujuan pembuatan dokumen XML adalah untuk menyimpan data yang bersifat global, jadi dari berbagai
platform bisa membaca ataupun bisa saling bertukar informasi melalui dokumen XML tersebut.
Bahkan di Android menggunakan dokumen XML untuk menyimpan konfigurasi dan untuk menyimpan
file setting aplikasi
Berikut beberapa konsep dalam XML :
1. Dokumen XML diawali dengan header <?xml version=”1.0″ encoding=”ISO-8859-1″?>
2. Setiap dokumen XML harus mempunyai “root element”, element ini merupakan parent dari
semual elemen.
33 XML
3. Elemen di XML merupakan Tree Element, yaitu : parent element bisa mempunyai “child”, child
bisa mempunyai child lagi, dst
4. Child yang mempunyai level sama disebut “siblings”
5. Setiap elemen harus mempunyai closed tags
6. Setiap element bisa mempunyai attribut atau tidak
7. Attribut text dalam elemen harus menggunakan quotes(‘)
8. Setiap element bisa mempunyai text data
9. XML Tags bersifat case-sensitif
Contoh dokumen XML
<?xml version="1.0" encoding="UTF-8"?>
<team name="arsenal">
<name>Arsenal</name>
<nick>The Gunners</nick>
<est>1886</est>
<stadium>Emirates Stadium</stadium>
</team>
Aturan penamaan element di dokumen XML
Dapat terdiri dari angka, huruf atau karakter lain
Tidak dapat diawali dengan angka
Tidak boleh diawali dengan kata xml, XML atau XML
Tidak boleh menggunakan karakter spasi
Beberapa karakter yang tidak boleh digunakan untuk atribut text atau elemen text data
<
>
&
'
"
