X TKJ COMMUNITY: RESUMAN PEMROGAMAN WEB

MERESUME MODUL PEMROGRAMAN WEB
KELAS 10 SEMESTER 2 KB. GENAP

1. Kegiatan Belajar 2 : Menyajikan Komponen Entri Pilihan :

a. Tujuan Pembelajaran.

Siswa dapat Memahami komponen entri pilihan dan Menyajikan komponen entri pilihan ke dalam sebuah halaman Web.

b. Uraian materi.

Form HTML digunakan untuk memilih berbagai macam inputan yang

disediakan. Data bisa diinputkan dalam komponen entri pilihan, diantaranya

input file, radio button, chexbox, select serta datalist.

ð Komponen input file

Komponen input file berfungsi untuk memasukan data file yang dibutuhkan

kedalam sistem web yang dibuat.

Tagnya : <input type=file name=name accept=mime type list>

ð Komponen radio button

Pada form input radio button hanya ada satu pilihan yang terseleksi,tidak bisa

digunakan untuk multiple answer. Format umum tag HTML dari Form Input

Radio Button adalah sebagai berikut :

ð Komponen chexbox

Komponen chexbox memiliki fungsi yang hampir sama dengan radio button,

yaitu untuk menentukan pilihan. Namun pada chexbox dapat digunakan untuk

memilih lebih dari satu jawaban (multi answer). Format tag HTML-nya adalah sebagai berikut :

ð Komponen Input Image

Komponen input image bertujuan untuk memasukan file gambar yang

dibutuhkan oleh sistem web, misalnya saja file gambar foto.jpg. Format tag

HTML dengan atribut image adalah sebagai berikut :

ð Komponen select

Komponen input dengan tipe ‘select’ adalah komponen input dengan banyak

pilihan nilai dan hanya memungkinkan untuk memilih 1 alternatif opsi pilihan.

Istilah lain dari bentuk komponen ini adalah combo box atau list box. Contoh

penggunaan komponen ini adalah pemilihan data agama, jurusan, pekerjaan,

dan sebagainya. Format umum Penulisan komponen select adalah sebagai

berikut :

<option value="nilai1"> nilai1 </option>

<option value=" nilai2"> nilai2 </option>

<option value=" nilai3"> nilai3 </option>

ð Komponen datalist

Komponen datalist merupakan elemen form baru pada HTML5. Datalist

digunakan untuk membuat daftar list. Komponen datalist memberikan dukungan

autocomplete dasar untuk pilihan pada field input. Komponen datalist

merupakan pengabungan antara list dan field input dengan atribut

autocomplete. Saat membuat pilihan pada datalist, bila terdapat huruf/item

yang sama dengan data pada data list maka akan muncul item yang cocok

(fungsi autocomplete bekerja).

Format umum Penulisan komponen datalist adalah sebagai berikut :

</datalist>

ð Contoh Pembuatan Form dengan elemen entri pilihan

Berikut adalah listing kode untuk membuat form menggunakan elemen entri

pilihan, textarea

<!DOCTYPE html >

<html>

<head>

</head>

<body>

<tr><td><form id="form1" name="form1" method="post"

action="">

<tr>

<td height="24" colspan="3"

align="center"><B>PENDAFTARAN</td>

</tr>

<tr>

<td>Nama Pengguna</td>

<input type="text" name="textfield" id="textfield"

/></td>

</tr>

<tr>

<td>Sandi</td>

<input type="text" name="textfield2" id="textfield2"

/></td>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td><input type="checkbox" name="checkbox" id="checkbox"

<label for="checkbox">Pria

Wanita</label></td>

</tr>

<tr>

<td>Tanggal lahir</td>

</select>

<option>Januari</option>

<option>Februari</option>

<option>Maret</option>

<option>April</option>

<option>Agustus</option>

<option>September</option>

<option>Oktober</option>

<option>November</option>

<option>Desember</option>

</select>

</select></td>

</tr>

<tr>

<td><input type="submit" name="button" id="button"

Pemrograman Web

Page | 35

value="Simpan" />

<input type="reset" name="button2" id="button2"

value="Batal" /></td>

</tr>

</table>

</td></tr></table>

</form>

</body>

</html>

2. Kegiatan Belajar 4 : Menyajikan Cascading Style Sheet untuk Memformat Tampilan Teks

a. Tujuan Pembelajaran.

Setelah mengikuti kegiatan belajar 4 diharapkan peserta didik dapat :

1) Memahami style-style dasar CSS untuk memformat tampilan teks

2) Menerapkan beberapa style untuk memformat tampilan teks.

3) Menyajikan CSS untuk memformat tampilan teks pada sebuah halaman

web

b. Uraian materi.

Agar lebih menarik, mudah dalam hal pengaturans serta editing, teks pada

sebuah halaman web dapat diberikan sytle dalam kemasan CSS. Pengaturan

style tersebut meliputi banyak properti, diantaranya adalah pewarnaan,

pemilihan font, spasi dan lain sebagainya

Properti Keterangan

Color Mengatur warna dari teks

Direction Menentukan arah tulisan/teks

letter-spacing Menambah ataupun mengurangi spasi antar karakter dalam teks

line-height Mengatur tinggi baris teks

text-align Menentukan batas teks secara horisontal

textdecoration Menentukan dekorasi/hiasan pada teks

text-indent Menentukan jarak inden dari baris pertama dalam teksblok

text-shadow Menentukan efek bayangan pada teks

texttransform Mengatur huruf besar-huruf kecil dari teks

unicode-bidi Untuk mengeset unicode

vertical-align Menentukan batas teks secara horisontal

white-space Menentukan penulisan white-space pada elemen

word-spacing Menambah ataupun mengurangi spasi antar kata dalam teks

1) Pengaturan warna pada teks/color

CSS dapat terapkan untuk mengatur warna dari teks. Pengaturan warna teks

dengan CSS dapat menggunakan nilai warna sebagai berikut :

ð nilai HEX : misalnya, "#ff0000"

ð nilai RGB : misalnya, "rgb(255,0,0)"

ð nama dari warna tersebutmisalnya "red"

Format penulisan untuk pemberian warna pada text menggunakan CSS adalah

selector {color:nilai warna}

2) Pengaturan spasi antar karakterf/letter-spacing

Salah satu style dari CSS adalah letter-spacing yang dapat digunakan untuk

memberikan jarak (spasi) antar karakter atau huruf. Format penulisan CSS

untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai

berikut :

selector { letter-spacing:nilai spasi;}

3) Pengaturan bentuk-bentuk teks/decoration

Pengaturan bentuk teks menggunakan properti text-decoration bertujuan untuk

mengatur atau menghapus dekorasi dari teks. Format penulisan CSS untuk

mengaturan dekorasi teks adalah sebagai berikut :

selector {text-decoration : nilai text-decoration }

Nilai dari text-decoration dapat berupa overline, line-through, underline dan

none yang berarti tanpa dekorasi .

4) Pengaturan spasi antar kata/word-spacing

Salah satu style dari CSS adalah word-spacing yang dapat digunakan untuk

memberikan jarak (spasi) antar kata. Format penulisan CSS untuk pengaturan

jarak (spasi) antar karakter atau huruf adalah sebagai berikut :

selector { word-spacing:nilai spasi;}

Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px.

5) Pengaturan jarak indentasi paragraph/text-indent

Text-indent menentukan jarak inden dari baris pertama dalam teks-blok,

sehingga teks pada baris pertama terlihat lebih menjorok kedalam dibanding

teks pada baris yang lain. Format penulisan untuk pengaturan jarak indentasi

text adalah sebagai berikut :

selector { text-indent:nilai indent}

Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px.

6) Pengubahan huruf besar dan huruf kecil dari sebuah teks/texttransform

Teks-transform properti digunakan untuk menentukan huruf besar dan kecil

dalam teks. Format penulisan CSS untuk pengaturan text indent adalah

sebagai berikut :

selector { text-transform:nilai text transform}

Nilai text transform dapat diisi dengan uppercase,lowercase, capital. Pada

listing kode berikut terlihat CSS dituliskan dalam bentuk CLASS p.besar, p.kecil

dan p.kapital. Hal ini bertujuan untuk memberikan pengaturan yang berbeda

pada paragrafnya.

7) Pemberian efek bayangan pada teks/Text shadow

Text-shadow digunakan untuk memberikan efek bayang pada sebuah teks.

Berikut adalah format penulisan CSS dengan text-shadow

Selector { text-shadow: koordinatX koordinatY

nilaiWarnaTeksBayangan;}

Contoh : penulisan text shadow

h1 { text-shadow: 2px 2px #ff0000; }

8) Pengaturan Text Alignment

Properti text-align digunakan untuk mengatur alignment horizontal teks. Teks

dapat ditulis rata kiri, rata kanan, rata kanan kiri ataupun ditulis center. Ketika

text-align diset “justify", setiap baris memiliki lebar yang sama, dan margin kiri

dan kanan lurus (seperti di majalah dan surat kabar). Format penulisan CSS

untuk text alignment

selector {text-align:nilai text-align;}

3. Kegiatan Belajar 6 : Penerapan CSS pada elemen tabel

a. Tujuan Pembelajaran.

Setelah mengikuti kegiatan belajar 6 diharapkan peserta didik dapat :

1) Memahami style-style dasar CSS untuk memformat tampilan tabel

2) Menerapkan beberapa style untuk memformat tampilan tabel

3) Menyajikan CSS untuk memformat tampilan tabel pada sebuah halaman

Web

b. Uraian materi.

1) Konsep dasar model box

Pada dasarnya elemen dari HTML adalah model box. Istilah model box ini

digunakan pada saat membahas desain dan layout. Model box memungkinkan

untuk membuat border disekeliling elemen dan space elemen yang saling

berhubungan.

Margin Daerah paling diluar yang membatasi dengan elemen HTML yang lainnya dan tidak berwarna

Border Border mengelilingi padding dan content. Garis yang mempunyai warna dan ketebalan

Padding Area yang mengelilingi content. Warna padding dipengaruhu oleh background dari box

Content Isi dari box, bisa berupa teks maupun gambar

2) Pengaturan border tabel

CSS dapat digunakan untuk memformat border atau garis tepi dari sebuah tabel.Format yang dapat dilakukan meliputi jenis garis (dotted, solid, dan lain-lain), warna border, ketebalan garis tepi dan sebagainya. Demikian pula warna dari sebuah sel, dapat diatur dengan CSS.

Berikut adalah contoh penerapan style border pada tabel dengan style sebagai berikut {border:1px solid black;}

3) Pengaturan lebar dan tinggi tabel

Lebar dan tinggi dari sebuah tabel didefinisikan dalam property width dan height Contoh berikut ini mengatur lebar tabel 100% dan tinggi dari elemen th adalah

50px.

table

{width:100%; }

{ height:50px; }

4) Pengaturan text-align pada tabel

Teks dalam tabel diatur dengan properti.text-align dan vertical-align . Nilai dari properti text-align untuk horizontal alignment adalah left, right, atau center.

{ text-align:right; }

Nilai dari properti text-align untuk horizontal alignment adalah top, bottom, or middle.

{ height:50px;vertical-align:bottom; }

5) Pengaturan padding tabel

Padding adalah jarak antara isi atau content, berupa teks ataupun gambar dengan batas dalam dari sel tersebut. Style padding ini dapat diterapkan pada elemen HTML <td> (kolom). Ukuran yang digunakan dapat berupa cm, atau px (piksel). Property style untuk pengaturan padding yang mengelilingi content adalah td{ padding:15px; }

Padding dapat pula diatur untuk bagian tertentu saja, misalnya adalah :

- padding- top

- padding- bottom

- padding- left

- padding-right jarak dari kanan sel.

6) Pengaturan warna pada table

Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada teks,background maupun border.

table, td, th

{ border:1px solid green; }

Style diatas akan memberikan efek warna green pada border table,data (td) dan header tabel (th).

4. Kegiatan Belajar 8 : Pengenalan Javascript

a. Tujuan Pembelajaran.

Setelah mengikuti kegiatan belajar 8 ini siswa diharapkan dapat :

1) Mengetahui bahasa pemrograman pada halaman web klien

2) Memahami pembuatan dokumen javascript

b. Uraian Materi.

Pengenalan Javascript

Javascript adalah bahasa yang berbentuk kumpulan skrip yang berjalan pada suatu dokumen HTML. Sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web.

Javascript diperkenalkan pertama kali oleh Brendan Eich yang bekerja di Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java” ) pada masa itu, maka Netscape memberikan nama “Javascript” kepada bahasa tersebut pada tanggal 4 desember 1995.

Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser Internet Explorer 3. Versi terakhir dari bahasa ini adalah versi 1.8.5 yang dirilis tanggal 22 Maret 2011.

Javascript	Java
Bahasa yang dijalankan langsung oleh browser	Bahasa yang dijalankan oleh program eksternal (Java Virtual Machine) diintegrasikan ke dalam browser
Didefinisikan dengan tag <script> pada halaman HTML	Didefinisikan dengan tag <applet>
Kode program bersifat terbuka dan dapat dibaca melalui browser	Kode program dapat bersifat tertutup
Tidak memerlukan proses kompilasi menjadi file lainnya	Perlu kompilasi untuk menghasilkan file .class

Javascript adalah bahasa yang “case sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil,

Penulisan Kode Javascript

Ada beberapa cara untuk menuliskan kode Javascript di dalam dokumen/halaman HTML, yakni menggunakan tag <script>, menggunakan file eksternal, dan melalui event tertentu.

Menggunakan tag <SCRIPT>

Kode javascript dalam HTML dituliskan dengan menggunakan tag <script> dengan format sebagai berikut :

......

</script>

Dokumentasi Program

Seperti dalam banyak bahasa pemrograman lainnya, sangat dianjurkan untuk menambahkan komentar-komentar di dalam skrip atau kode program yang dibuat untuk keperluan dokumentasi pengembangan. Hal ini berguna antara lain :

a. sebagai pengingat bagian-bagian khusus di dalam skrip tersebut, jika akan merubah sesuatu di dalamnya, mungkin beberapa bulan kemudian sudah tidak ingat lagi dengan detail dan alur dari skrip tersebut.

b. untuk membuat orang yang tidak tahu program yang dibuat jadi mengerti dengan membaca petunjuk-petunjuk yang dibuat melalui komentar-komentar.

Penulisan komentar di Javascript, kita bisa menggunakan cara yang sama dengan aturan yang ada di bahasa C/C++ ataupun Java.

a. Untuk menulis komentar dalam satu baris kita gunakan karakter garis miring ganda (//).

// semua karakter di belakang

// tidak akan di eksekusi

b. Untuk menulis komentar yang terdiri dari beberapa baris kita gunakan karakter /* dan */

/* Semua baris antara 2 tanda tersebut.

Alat Bantu Pengembangan

Dalam mengembangan aplikasi web ada beberapa persiapan yang perlu dilakukan, diantaranya adalah menentukan browser dan editor yang akan digunakan. Saat ini sudah banyak bermunculan varian browser, yang paling umum diantaranya Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Opera, dan Apple Safari.

5. Kegiatan Belajar 10 : Memahami Penggunaan Array

a. Tujuan Pembelajaran.

Setelah mengikuti kegiatan belajar 10 ini siswa diharapkan dapat :

1) Mengetahui keberadaan nilai jamak dalam suatu program

2) Memahami penggunaan array dalam program

b. Uraian Materi.

Variabel-variabel di JavaScript hanya bisa menyimpan satu data pada suatu saat. Adanya kecenderungan yang besar untuk memanipulasi sejumlah data dalam satu variabel membuat konsep variabel tersebut menjadi tidak cukup. Sebagai solusinya, JavaScript menghadirkan struktur data yang memungkinkan menyimpan himpunan/kelompok data dalam satu variabel khusus yang disebut Array.

Array, adalah satu variabel yang dapat berisi banyak data yang independent. Data yang disimpan diberikan indeks tertentu atau menggunakan nomer urut mulai dari 0.Indeks ini nantinya dapat digunakan untuk mengakses data yang disimpan dalam array tersebut.

JENIS-JENIS ARRAY

Array Multidimensi

Array yang hanya berisikan nilai-nilai tunggal disebut sebagai array monodimensi atau unidimensi. Berikut merupakan ilustrasi dari array monodimensi tersebut.

Indeks	0	1	2	3
Data	Nilai1	Nilai2	Nilai3	Nilai4

Perhatian :

Indeks ini akan diberikan secara otomatis oleh interpreter javascript, dimulai dari elemen/data pertama dengan indeks 0. Dalam suatu array dengan n elemen, maka elemen ke-n akan mempunyai indeks n-1.

Jika elemen suatu array berisikan array lainnya, maka array tersebut termasuk array multidimensi.

Array Asosiatif

Indek dalam array selain ditentukan secara otomatis oleh sistem dan selalu dimulai dari 0, juga dapat dimodifikasi dengan menggunakan kata (string) atau nilai tertentu. Tabel dengan indeks termodifikasi ini kita kenal dengan nama array asosiatif. Berikut adalah ilustrasinya.

Indeks	“USD”	“IDR”	“JPY”
Data	11918	1	114.29

PEMBUATAN ARRAY

Terdapat beberapa cara yang dapat digunakan untuk membuat array di Javascript.

var TabelKu = ["data 1", "data 2", "data 3", "data 4"];

var TabelKu = new Array("data 1", "data 2", "data 3", "data 4");

var TabelKu = new Array();

PENGAKSESAN DATA DALAM ARRAY

Pengaksesan data atau elemen di dalam tabel dapat dilakukan dengan menuliskan nama tabel diikuti tanda kurung siku yang berisi indeks dari elemen.

var arrayHewan = ["Buaya", "Harimau", "Gajah", "Singa", "Jerapah", "Zebra"];

document.write( "elemen ke 4 dari array adalah " + arrayHewan[3] );

//hasil: "elemen ke 4 dari array adalah Singa"

MENYIMPAN DATA PADA ARRAY

Penyimpanan data dalam array dilakukan dengan menuliskan nama array, di ikuti dengan nama indeks dalam kurung, dan memasukkan nilai datanya, seperti contoh berikut.

arrayTes[0] = "Hallo";

arrayTes["Andry"] = 10;

arrayTes["Sandra"] = 47;

12. Kegiatan Belajar 12 : Memahami Penerapan Struktur Kontrol Perulangan

Struktur Kontrol Perulangan

Perulangan dalam javascript memiliki tiga bentuk, yakni perulangan for, while dan

do-while.

o Perulangan for

Perulangan ini memiliki bentuk sebagai berikut :

for ( inisialisasi; kondisi; peubah ) {

baris program 1;

baris program 2;

…

}

o Perulangan while

Perulangan ini memiliki bentuk sebagai berikut :

while ( kondisi ) {

kode program yang ingin dijalankan berkali-kali;

}

o Perulangan do-while

Perulangan ini memiliki bentuk sebagai berikut :

do {

kode program yang ingin dijalankan berkali-kali;

} while( kondisi );

Cara kerja dari perulangan for tersebut dapat

digambarkan dengan menggunakan diagram alur berikut.

Secara umum untuk setiap kasus perulangan dapat diterapkan dengan menggunakan ketiga bentuk tersebut. Contohnya, kita dapat membuat perulangan untuk menampilkan pesan "Halo javascript" hingga 3 kali dengan menggunakan ketiga perulangan tersebut.

for (var i = 0; i < 3; i++) {

document.write("Halo javascript 1<br>");

}

var j = 0;

while ( j < 3 ) {

document.write("Halo javascript 2<br>");

j += 1;

}

var k = 0;

do {

document.write("Halo javascript 3<br>");

k++;

} while ( k < 3 );

Kegiatan Belajar 14 : Pemrograman Berorientasi Obyek

a. Tujuan Pembelajaran

Setelah mengikuti kegiatan belajar 14 ini siswa diharapkan dapat :
1) Mengetahui pemrograman berorientasi obyek pada web klien
2) Memahami penerapan pemrograman berorientasi obyek pada web klien

b. Uraian Materi.
Pemrograman Berorientasi Obyek (PBO)
Pemrograman berorientasi obyek adalah sebuah paradigma dalam pemrograman yang mengelompokkan fungsi, prosedur, variabel ataupun konstanta terkait dalam satu kesatuan (kelas) seperti obyek dalam dunia nyata.

Teknik-teknik dalam pemrograman ini merupakan pengembangan dari teknik sebelumnya seperti modularitas, polimorfisme, dan enkapsulasi.

Bahasa pemrograman yang telah mendukung pemrograman berorientasi obyek ini, seperti C++, C#, Java, Javascript, PHP, Python, Ruby, dan Objective C.

PBO: Pemrograman Berbasis Prototipe
Javascript menggunakan PBO dengan model pemrograman berbasis prototipe. Model ini tidak mengenal kelas, yang ada adalah obyek. Obyek dalam model ini dapat dimodifikasi secara runtime seperti penambahan variabel (properti) ataupun metode (fungsi/prosedur). Model ini juga dikenal dengan istilah pemrograman PBO tanpa kelas, berorientasi prototipe atau berbasis instan.

· Javascript Object Oriented Programming
Obyek Utama (Bawaan)
Javascript memiliki banyak obyek bawaan seperti Math, Array, String dan Object.
Setiap obyek dalam Javascript adalah instan dari obyek Object, sehingga
memiliki semua properti dan metode yang ada.

· Obyek Buatan
Javascript merupakan bahasa PBO yang menggunakan kata kunci function untuk
mendefinisikan suatu kelas. Oleh karena itu, pembuatan kelas sama dengan
pembuatan fungsi dalam Javascript. Berikut ini merupakan format yang dapat
digunakan untuk mendefinisikan kelas pada javascript.
function NamaKelas () {
}

Pembuatan obyek dari kelas yang telah didefinisikan diatas dapat dilakukan dengan menggunakan format berikut.
var namaObyek = new NamaKelas ( ) ;

Kemudian untuk mengakses properti ataupun metode yang dimiliki oleh suatu obyek dapat dengan menggunakan operator titik (.) setelah nama obyek diikuti nama properti atau metodenya.

Kegiatan Belajar 16 : Navigasi Halaman Web

a. Tujuan Pembelajaran

    Setelah mengikuti kegiatan belajar 16 ini siswa diharapkan dapat :
           1) Mengetahui sistem navigasi halaman web melalui kode program
           2) Memahami penerapan program navigasi pada halaman web

b. Uraian Materi.

Navigasi Halaman

Navigasi secara umum dapat digunakan untuk menunjukkan perpindahan dari
satu titik ke titik yang lain. Perancangan navigasi untuk suatu website dapat juga dikenal dengan istilah pembuatan sitemap. Penggambarannya dilakukan dengan terlebih dahulu menentukan halaman utama web, kemudian menentukan link-link apa saja dari yang ada di halaman tersebut dan mengaitkannya. Berikut ini merupakan salah
satu contoh bentuk rancangan sitemap.

Pembuatan sitemap ini dapat dilakukan dengan menggunakan aplikasi peta
pikiran seperti Freemind, XMind ataupun sejenisnya. Sitemap ini nantinya dapat
dijadikan panduan ataupun arah bagi programmer web dalam mengembangkan
aplikasinya. Sedangkan untuk user dapat memberikan gambaran secara
menyeluruh tentang web yang sedang dikunjungi. Terdapat sejumlah metode yang dapat digunakan
antara lain :

NAVIGASI DENGAN AJAX (MATERI TAMBAHAN)

Bentuk lain dari navigasi ini adalah dengan menggunakan obyek AJAX pada
Javascript. AJAX, Asynchronous Javascript and XML. AJAX bukan merupakan
bahasa pemrograman baru, melainkan kumpulan kelas Javascript yang dapat
digunakan salah satunya untuk menampilkan halaman lain tanpa merubah
keseluruhan halaman saat ini. Dengan obyek ini perpindahan halaman dapat dilakukan tanpa menghilangkan halaman yang sedang dibuka saat ini. Dimana pada saat menunggu
halaman yang akan ditampilkan, halaman saat ini tetap terlihat, karena
prosesnya terjadi dilatar dan tidak terlihat oleh user.

jQuery merupakan salah satu librari yang dapat digunakan untuk menerapkan
AJAX ini dengan perintah-perintah yang lebih sederhana. Librari disini
maksudnya adalah kumpulan kelas atau obyek yang didalamnya juga berisi
fungsi, variabel dan konstanta.

Kegiatan Belajar 18 : Penerapan Pustaka Eksternal

a. Tujuan Pembelajaran.

Setelah mengikuti kegiatan belajar 18 ini siswa diharapkan dapat :
1) Mengetahui pustaka eksternal pada skripting halaman web
2) Memahami penerapan pustaka eksternal pada halaman web

b. Uraian Materi.
Penerapan Pustaka Eksternal

pemrograman Javascript jugadimungkinkan untuk menggunakan pustaka dari pengembang (programmer) Javascript lainnya.

Pustaka eksternal sebenarnya adalah program Javascriptseperti umumnya yang dikembangkan oleh perorangan atau instansi agar dapat digunakan oleh orang atau instansi lainnya. Ada banyak pustaka Javascript yang telah dikembangkan, seperti Dojo, Ext JS, YUI, dan jQuery. Bentuknya ada yang bersifat terbuka dan tertutup tergantung dari pengembangnya.

Adanya penambahan pustaka eksternal ini akan dapat menambah fitur dari halaman web
yang dihasilkan. Selain itu juga dapat memberikan kemudahan dalam pengembangan karena adanya penyederhanaan sejumlah operasi umum dalam Javascript, seperti fungsi-fungsi untuk mengakses obyek ataupun menjaga kompatibilitas antar browser.

Contoh format perintah yang dapat digunakan untuk menyertakan pustaka eksternal tersebut ke dalam halaman web.
<script src=”lokasi/file/pustaka.js”></script>

pembahasan pustaka eksternal akan difokuskan pada penerapan pustaka jQuery.

jQuery saat ini telah sampai pada rilis 1.11.0 untuk yang versi 1 dan 2.1.0 untukversi 2. Pustaka ini dapat didownload pada alamat http://jquery.com. Ini merupakan salah satu pustaka yang banyak diterapkan saat ini dan memiliki sejumlah turunan, diantaranya adalah jQuery UI, jQuery Mobile dan Twitter Bootstrap. Perkembangan yang pesat dari jQuery ini dimungkinkan karena sifatnya yang terbuka.

Berikut ini merupakan beberapa contoh penerapan pustaka jQuery terkait fiturfitur diatas

MANIPULASI OBYEK HTML (DOM Traversal)
Mengakses obyek HTML melalui tag
1. <div>info 1</div>
2. <div>info 2</div>
3. <script src="jquery-2.0.3.js"></script>
4. <script>
5. $(document).ready(function(){
6. $('div').html('<u>info 2</u>');
7. });
8. </script>

Perintah pada baris 5 dan 7 pada skrip diatas digunakan sebagai perintah jquery untuk menangani event ready dari dokumen HTML. Event ready adalah event yang dikirimkan pada saat dokumen selesai di tampilkan oleh browser. Sedangkan perintah pada baris 6 digunakan untuk mengakses obyek HTML
dengan tag div, $(‘div’), dan mengisinya dengan HTML <ul>info 2</u>.

Mengakses obyek HTML melalui atribut id
1. <div>info 1</div>
2. <div id="info2">info 2</div>
3. <script src="jquery-2.0.3.js"></script>
4. <script>
5. $(document).ready(function(){
6. $('#info2').html('<u>info 2</u>');
7. });
8. </script>

Program Javascript pada contoh diatas ini mirip dengan contoh sebelumnya, bedanya pada baris 6, obyek HTML pada contoh ini diakses melalui atribud id yang ditambahkan pada tag div. Penunjukkan atribut id oleh jQuery dilakukan dengan menambahkan tanda pagar (#) diawal id dari tag yang akan diakses.
Penerapan atribut id tidak hanya dapat diberikan pada tag div namun juga untuk tag lainnya. Apabila dijalankan hanya tag dengan id info2 yang akan berubah tampilannya. Seperti ditunjukkan pada gambar berikut.

PENANGANAN EVENT
Pemberian event onclick pada obyek HTML
1. <div>info 1</div>
2. <div id="info2"><b>info 2</b></div>
3. <script src="jquery-2.0.3.js"></script>
4. <script>
5. $(document).ready(function(){
6. $('#info2').click(function(){
7. alert($('#info2').html());
8. });
9. });
10. </script>

X TKJ COMMUNITY

Rabu, 08 Juni 2016

RESUMAN PEMROGAMAN WEB

Tidak ada komentar:

Posting Komentar