1

Modul Pemrograman Web

Arif Dwi Laksito. S.Kom

Table of Contents
1 Konsep Dasar Web .............................................................................................................................. 3 1.1 1.2 2 Hypertext .................................................................................................................................... 3 HTTP ............................................................................................................................................ 3

Sejarah Internet .................................................................................................................................. 3 2.1 2.2 2.3 2.4 2.5 Tiga teknologi penting yang menyebabkan internet bisa berkembang seperti saat ini : ............ 4 Perkembangan Internet dikelompokkan dalam 4 periode perkembangan, yaitu : ..................... 4 Perkembangan Internet di indonesia .......................................................................................... 4 Manfaat Internet:........................................................................................................................ 5 Penyalahgunaan/Kejahatan Internet .......................................................................................... 5

3 4

PERKEMBANGAN WEB ........................................................................................................................ 5 HTML................................................................................................................................................... 7 4.1 4.2 4.3 4.4 4.5 HTML Element ............................................................................................................................. 8 HTML Text Formatting ................................................................................................................ 9 HTML Tabel ................................................................................................................................. 9 HTML List .................................................................................................................................. 10 HTML Form ............................................................................................................................... 11

CSS (Cascade Style Sheet) ................................................................................................................. 12 5.1 5.2 5.3 5.4 Inline Style................................................................................................................................. 13 Embedded Style Sheets ............................................................................................................. 13 External Style Sheets ................................................................................................................. 14 CSS Selector .............................................................................................................................. 14 Id Selector ......................................................................................................................... 14 Class Selector .................................................................................................................... 14

5.4.1 5.4.2 5.5

Contoh CSS ................................................................................................................................ 15 CSS Background ................................................................................................................. 15 CSS Table ........................................................................................................................... 16

5.5.1 5.5.2

2 6 Javascript .......................................................................................................................................... 18 6.1 Penulisan Javascript .................................................................................................................. 18 Diletakkan di bagian Head ................................................................................................. 18 Penulisan pada bagian Body .............................................................................................. 18 Penulisan di External File................................................................................................... 19

6.1.1 6.1.2 6.1.3 6.2

Fungsi di Javascript.................................................................................................................... 19 Fungsi tanpa parameter .................................................................................................... 19 Fungsi dengan parameter ................................................................................................. 19 Fungsi yang mengembalikan nilai...................................................................................... 20

6.2.1 6.2.2 6.2.3 6.3 7

Javascript Event......................................................................................................................... 20

HTM L DOM ...................................................................................................................................... 22 7.1 7.2 HTML DOM Properties .............................................................................................................. 23 HTML DOM Methods ................................................................................................................ 23

8 9

AJAX .................................................................................................................................................. 26 JQUERY.............................................................................................................................................. 28 9.1 Jquery Event .............................................................................................................................. 29 .click() ................................................................................................................................ 29 .mouseover() ..................................................................................................................... 29 .mouseout()....................................................................................................................... 29 .focus() .............................................................................................................................. 30 .keyup() ............................................................................................................................. 30

9.1.1 9.1.2 9.1.3 9.1.4 9.1.5 9.2

Jquery Effect ............................................................................................................................. 31 .fadeIn() ............................................................................................................................. 31 .fadeOut() .......................................................................................................................... 31 .toggle() ............................................................................................................................. 31 .fadeToggle() ..................................................................................................................... 32 .animate() .......................................................................................................................... 32

9.2.1 9.2.2 9.2.3 9.2.4 9.2.5 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 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 <b> <big> <em> <i> <small> DESCRIPTION Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text

<strong> Defines strong text <sub> <sup> <ins> <del> Defines subscripted text Defines superscripted text Defines inserted text 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" </head> type="text/css" href="styles.css" />

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

Fungsi yang mengembalikan nilai

<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 onClick onChange onSubmit

Applies To:

Triggered When:

Button, Document, Checkbox, The object is clicked on. Link, Radio, Reset, Submit FileUpload, Select, Text, TextArea Form The user types anything on the control. The forms Submit button is clicked. The user presses a mouse button. The user moves the mouse. The user moves the mouse away from the object. The user moves the mouse over the object. The user releases a mouse button. The user moves the browser window or frame.

onMouseDown Button, Document, Link onMouseMove onMouseOut onMouseOver onMouseUp onMove Image (NOT NS4), Link ,span,div Image (NOT NS4), Link ,span,div Image (NOT NS4), Link ,span,div Button, Document, Link ,span,div Window

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 Button, Checkbox, FileUpload, The object in question loses Layer, Password, Radio, Reset, focus (e.g. by clicking outside

onBlur

22 HTM L DOM

Select, Submit, Text, TextArea, it or pressing the TAB key). Window onKeyDown onKeyPress onDblClick onDragDrop onError onKeyUp onLoad onReset onResize onSelect onAbort onUnload Document, Image, Link, TextArea Document, Image, Link, TextArea Document, Link Window Image, Window Document, Image, Link, TextArea Image, Window Form Window Text, Textarea Image Window The user presses a key. The user presses or holds down a key. The object is double-clicked on. An icon is dragged and dropped into the browser. A JavaScript error occurs. The user releases a key. The whole page has finished loading. The user clicks the forms Reset button. The user resizes the browser window or frame. The user selects text within the field. The loading of the image is cancelled. 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.
<html> <head> <title>DOM Tutorial</title> </head> <body>

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

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 onreadystatechange DESCRIPTION Stores a function (or the name of a function) to be called automatically each time the readyState property changes 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 200: 404: Page not found OK

readyState

status

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 < > & ' "