Modul Pemrograman Web

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 tag biasanya berupa suatu pasangan tag, meskipun ada juga yang satu tag. Contohnya
this is paragraph
, merupakan suatu html tag yang diawali dengan openig tag
dan closing tag
. Berbeda dengan contoh berikut:
this is first line
and this is second line
, tag
adalah opening tag sekaligus closing tag. Berikut contoh struktur dasar HTML tag yang membentuk sebuah halaman web:

My First Heading

My first paragraph.

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 , , <em> dsb. Berikut beberapa tag-tag html yang disebut dengan formatting tag TAG

DESCRIPTION

Defines bold text

Defines big text

<em>

Defines emphasized text

Defines italic text

<small>

Defines small text

<strong> Defines strong text <sub>

Defines subscripted text

<sup>

Defines superscripted text

Defines inserted text

<del>

Defines deleted text

4.3 HTML Tabel Table di HTML di definisikan dengan tag . Table terbagi dalam baris/rows dengan tag , dan tiap baris terbagi lagi dalam kolom dengan tag
untuk data atau untuk header. Di dalam tag dapat berisi text atau tag-tag html lain seperti link, image, list, form, dll.

row 1, cell 1 row 1, cell 2


Kita dapat juga mengganti ke untuk header

10 HTML

Header 1 Header 2


Di dalam tabel cell kita dapat juga menggabungkan kolom dengan atribut colspan atau menggabungkan baris dengan atribut rowspan

row 1 cell 1 row 1 cell 2

row 2 cell 1

row 1 cell 1 row 1 cell 2

row 2 cell 2

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

Coffee

Milk

Tea

Coffee

Milk

Tea

Dan berikut contoh untuk ordered list, di ordered list kita dapat menambahkan atribut start untuk memulai awalan list

Coffee

Milk

Tea

Coffee

Milk

Tea

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
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 defines a one-line input field that a user can enter text 2. Password Field defines a password field 3. Radio Buttons defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices 4. Checkboxes 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> defines a option select. Textarea defines a input field for rich text. File defines a input field for upload files. Submit Button defines a submit button.

First Name:
Last Name:

Gender::
Male
Female

Please choose Favourite foods::
Steak
Pizza
Chicken

Select a Level of Education::
<select name="education">

Upload foto:

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.
Good eats for hungry geeks

Our fresh pizzas, hearty pasta dishes, and succulent desserts are sure to please. And don't forget about our daily chalkboard specials!

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) <style type="text/css"> h2 { color: red; } p { color: gray; } .info {background:#cccccc; border:1px} .label {margin:5px; color:#efefef}

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.
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; }
Iam Heading Text

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)
The quick brown fox jumps over the lazy dog

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). <script type="text/javascript"> ...

6.1.2 Penulisan pada bagian Body Skrip akan dieksekusi ketika halaman di-load sampai di bagian . Ketika menempatkan skrip pada bagian berarti antara isi dan JavaScript dijadikan satu bagian. JumlahJavaScript di dan yang ditempatkan pada dokumen kita tak terbatas.

19 Javascript <script type="text/javascript"> ...

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. <script type="text/javascript" src="xxx.js"> ...

Contoh Javascript sederhana untuk menampilkan text di browser <script type="text/javascript"> Document.write("ini ditulis dgn javascript");

Contoh Javascript sederhana menampilkan alert di halaman web <script type="text/javascript"> alert("ini ditulis dgn javascript");

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

6.2.2

Fungsi dengan parameter

<script type="text/javascript">

20 Javascript function showMsg(txt){ alert(txt); }

6.2.3

Fungsi yang mengembalikan nilai

<script type="text/javascript"> function jml(a,b){ return a+b; } <script type="text/javascript"> document.write(jml(4,7));

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

<script type="text/javascript"> function displayDate() { document.getElementById("demo").innerHTML=Date(); }

21 Javascript

My First Web Page

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


The user moves the mouse away from the object.

onMouseOver


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


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


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

DOM Tutorial

23 HTM L DOM
DOM Lesson one

Hello world!

Dari contoh dokumen HTML diatas, dapat kita ambil kesimpulan    

Node root adalah element node mempunyai 2 child yaitu node dan node mempunyai child <body> node mempunyai 2 child <h1> dan <p><br /> <br /> Perlu diperhatikan bahwa Text node selalu tersimpan diantara node atau html element, dan HTML DOM dapat mengakses value dari text tersebut menggunakan properti innerHTML.<br /> <br /> 7.1 HTML DOM Properties Some DOM properties:      <br /> <br /> 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<br /> <br /> Note: In the list above, x is a node object (HTML element).<br /> <br /> 7.2 HTML DOM Methods Some DOM methods:    <br /> <br /> 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<br /> <br /> Note: In the list above, x is a node object (HTML element). <html> <body><br /> <br /> <p id="intro">Hello World!</p><br /> <br /> <script type="text/javascript"> txt = document.getElementById("intro").innerHTML; document.write("<p>The text from the intro paragraph: " + txt + "</p>");<br /> <br /> 24 HTM L DOM </script><br /> <br /> </body> </html><br /> <br /> 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><br /> <br /> <p>Hello World!</p> <p>Hello Dab!</p><br /> <br /> <script type="text/javascript"> x = document.getElementsByTagName("p"); y = x[0].innerHTML;<br /> <br /> document.write(y); </script><br /> <br /> </body> </html><br /> <br /> 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><br /> <br /> <p id="p1">Hello World!</p><br /> <br /> <script type="text/javascript"> document.getElementById("p1").innerHTML="New text!";<br /> <br /> 25 HTM L DOM </script><br /> <br /> </body> </html><br /> <br /> 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><br /> <br /> <p id="p1">Hello World!</p><br /> <br /> <input type="button" onclick="document.getElementById('p1').innerHTML='New text!';" value="Abrakadabra" /> </body> </html><br /> <br /> 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><br /> <br /> <body> <p id="p1">Hello world!</p> <input type="button" onclick="change()" value="Abakadabra" /> </body> </html><br /> <br /> Konsep HTML DOM ini akan kita gunakan untuk menggunakan AJAX atau Jquery di pembahasan selanjutnya..<br /> <br /> 26 AJAX<br /> <br /> 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:    <br /> <br /> 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)<br /> <br /> 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");<br /> <br /> dan selain itu menggunakan new XMLHttpRequest();<br /> <br /> 2. Mengirim request ke Server, disini digunakan 2 fungsi, yaitu : open(method, url, async) dan send() xmlhttp.open("GET","data.txt",true); xmlhttp.send();<br /> <br /> 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<br /> <br /> DESCRIPTION<br /> <br /> onreadystatechange<br /> <br /> Stores a function (or the name of a function) to be called automatically each time the readyState property changes<br /> <br /> readyState<br /> <br /> 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<br /> <br /> status<br /> <br /> 200: 404: Page not found<br /> <br /> “OK”<br /> <br /> 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; } }<br /> <br /> 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><br /> <br /> 28 JQUERY <body><br /> <br /> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button><br /> <br /> </body> </html><br /> <br /> 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><br /> <br /> 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(){ });<br /> <br /> 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(){ }) });<br /> <br /> 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><br /> <br /> 29 JQUERY <div id="title">HTC Desire S Review</div> <img src="img/htc-desire-s.jpg" alt="Desire S Image" /><br /> <br /> Diatas adalah contoh konsep penulisan jquery, untuk lebih detail dalam menggunakan fitur-fitur yang ada di jquery bisa langsung menuju ke dokumentasi jquery<br /> <br /> 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!!'); }); });<br /> <br /> 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!!'); }); });<br /> <br /> 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><br /> <br /> 30 JQUERY <p id="result"></p> $(document).ready(function(){ $('#select').mouseover(function(){ $('#result').text('yeeeaah, you got it!!'); });<br /> <br /> $('#select').mouseout(function(){ $('#result').text(''); }); });<br /> <br /> 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); }); });<br /> <br /> 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); }); });<br /> <br /> Script diatas melakukan event trigger saat user menuliskan karakter di textfield dan var count akan menghitung jumlah karakter yang sudah dituliskan.<br /> <br /> 31 JQUERY<br /> <br /> 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); });<br /> <br /> 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); }); });<br /> <br /> 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'); });<br /> <br /> 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'); });<br /> <br /> 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'); }); });<br /> <br /> 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.<br /> <br /> 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.<br /> <br /> 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><br /> <br /> Aturan penamaan element di dokumen XML    <br /> <br /> 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<br /> <br /> Beberapa karakter yang tidak boleh digunakan untuk atribut text atau elemen text data     <br /> <br /> < > & ' "<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/modul-pemrograman-webeffc25612358c245b5672d185401609e13094" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Modul Pemrograman Web"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright © 2024 ADOC.PUB. All rights reserved. <div class="pull-right"> <span><a href="https://adoc.pub/about">About Us</a></span> | <span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> | <span><a href="https://adoc.pub/term">Terms of Service</a></span> | <span><a href="https://adoc.pub/copyright">Copyright</a></span> | <span><a href="https://adoc.pub/contact">Contact Us</a></span> | <span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span> </div> </div> </footer>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://adoc.pub/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember me </label> <label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177279549-1'); </script> <script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://adoc.pub/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function( event, ui ) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script>  <div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a> </div> <script> function accept_ADOCPUB_cookie_box() { document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/"; hide_ADOCPUB_cookie_box(); } function hide_ADOCPUB_cookie_box() { var cb = document.getElementById('ADOCPUB_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var ADOCPUB_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('ADOCPUB_cookie_box_viewed'); if (ADOCPUB_cookie_box_viewed) { hide_ADOCPUB_cookie_box(); } })(); </script>  </body> </html>

Modul Pemrograman Web

Recommend Documents

My First Heading

Good eats for hungry geeks

My First Web Page

DOM Lesson one