modul pemrograman web -...

1

Modul Pemrograman Web

Arif Dwi Laksito. S.Kom

Table of Contents 1 Konsep Dasar Web .............................................................................................................................. 3

1.1 Hypertext .................................................................................................................................... 3

1.2 HTTP ............................................................................................................................................ 3

2 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

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

5 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 Penulisan Javascript .................................................................................................................. 18

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 Javascript Event......................................................................................................................... 20

7 HTM L DOM ...................................................................................................................................... 22

7.1 HTML DOM Properties .............................................................................................................. 23

7.2 HTML DOM Methods ................................................................................................................ 23

8 AJAX .................................................................................................................................................. 26

9 JQUERY .............................................................................................................................................. 28

9.1 Jquery Event .............................................................................................................................. 29

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 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

10 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 data-

data dari penyedia layanan untuk digunakan. Aplikasi ke-3 tersebut tidak hanya dapat membaca data-

data 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>


</tr>

<tr>



</tr>

</table>

Kita dapat juga mengganti <td> ke <th> untuk header

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

http://www.w3schools.com/tags/tag_font_style.asp


http://www.w3schools.com/tags/tag_phrase_elements.asp



http://www.w3schools.com/tags/tag_phrase_elements.asp

http://www.w3schools.com/tags/tag_sup.asp

http://www.w3schools.com/tags/tag_sup.asp

http://www.w3schools.com/tags/tag_ins.asp

http://www.w3schools.com/tags/tag_del.asp

10 HTML

<tr>



</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>


</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>


</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. Option <select><option value=”1″>Value 1</option></select> defines a option select.

6. Textarea <textarea></textarea> defines a input field for rich text.

7. File <input type=”file” /> defines a input field for upload files.

8. 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


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).


<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;}


<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;

}


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;

}


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


20 Javascript

function showMsg(txt){

alert(txt); }

</script>

6.2.3 Fungsi yang mengembalikan nilai

<head>


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. A mouse click

2. A web page or an image loading

3. Mousing over a hot spot on the web page

4. Selecting an input field in an HTML form

5. Submitting an HTML form

6. A keystroke

Contoh script penggunaan Events

<html>

<head>


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,

Link, Radio, Reset, Submit The object is clicked on.

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,

Layer, Password, Radio, Reset,

Select, Submit, Text, TextArea,

Window

The object in question gains

focus (e.g. by clicking on it or

pressing the TAB key).

onBlur Button, Checkbox, FileUpload,

Layer, Password, Radio, Reset,

The object in question loses

focus (e.g. by clicking outside

22 HTM L DOM

Select, Submit, Text, TextArea,

Window

it or pressing the TAB key).

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>


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>


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>


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>


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: “OK”

404: Page not found

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>


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:


$("#menu").click(function(){

})

});

Contoh script jquery dengan event click dan menampilkan effect slide toggle pada image



$('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>


$('#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="result"></p>


$('#select').mouseover(function(){


});

});

9.1.3 .mouseout()

Merupakan lawan/kebalikan dari event .mouseover(), fungsi-fungsi akan di jalankan saat pointer mouse

meninggalkan element yang telah kita definisikan.


30 JQUERY

<p id="result"></p>


$('#select').mouseover(function(){


});

$('#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>


$('#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>


$('#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();


$('#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


<p id="rst"></p>

$('#rst').hide();


$('#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.


<p id="rst"></p>

$('#rst').hide();


$('#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.


<p id="rst"></p>

$('#rst').hide();


$('#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.


<p id="rst">ok, you got it!!</p>


$("#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

<

>

&

'

"

modul pemrograman web -...

Documents