Defi Ayu Lestari: 2016

MERANGKUM MODUL PEMROGRAMAN WEB KB. GENAP

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>

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

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 dapatdigunakanuntukmemformat border ataugaristepidarisebuahtabel.Format yang dapatdilakukanmeliputijenisgaris (dotted, solid, dan lain-lain), warna border, ketebalangaristepidansebagainya. Demikian pula warnadarisebuahsel, dapatdiaturdengan CSS.

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

3) Pengaturanlebardantinggitabel

Lebardantinggidarisebuahtabeldidefinisikandalam property width dan height Contohberikutinimengaturlebartabel 100% dantinggidarielementhadalah

50px.

table

{width:100%; }

{ height:50px; }

4) Pengaturan text-align padatabel

Teksdalamtabeldiaturdenganproperti.text-align dan vertical-align .Nilaidariproperti text-align untuk horizontal alignment adalah left, right, atau center.

{ text-align:right; }

Nilaidariproperti text-align untuk horizontal alignment adalah top, bottom, or middle.

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

5) Pengaturan padding tabel

Padding adalahjarakantaraisiatau content, berupateksataupungambardenganbatasdalamdariseltersebut. Style padding inidapatditerapkanpadaelemen HTML <td> (kolom). Ukuran yang digunakandapatberupa cm, ataupx (piksel). Property style untukpengaturan padding yang mengelilingi content adalahtd{ padding:15px; }

Padding dapat pula diaturuntukbagiantertentusaja, misalnyaadalah :

- padding- top

- padding- bottom

- padding- left

- padding-right jarak dari kanan sel.

6) Pengaturanwarnapada table

Pewarnaanpadatabeldapatdigunakanuntukmengaturwarnapadateks,backgroundmaupun border.

table, td, th

{ border:1px solid green; }

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

KegiatanBelajar8 :PengenalanJavascript

a. TujuanPembelajaran.

Setelahmengikutikegiatanbelajar 8 inisiswadiharapkandapat :

1) Mengetahuibahasapemrogramanpadahalaman web klien

2) Memahamipembuatandokumenjavascript

b. UraianMateri.

PengenalanJavascript

Javascriptadalahbahasa yang berbentukkumpulanskrip yang berjalanpadasuatudokumen HTML. Sepanjangsejarah internet bahasainiadalahbahasaskrippertamauntuk web. Bahasainiadalahbahasapemrogramanuntukmemberikankemampuantambahanterhadapbahasa HTML denganmengijinkanpengeksekusianperintahperintah di sisi user, yang artinya di sisi browser bukan di sisi server web.

Javascriptdiperkenalkanpertama kali oleh Brendan Eich yang bekerja di Netscape padatahun 1995. Padaawalnyabahasainidinamakan “LiveScript” yang berfungsisebagaibahasasederhanauntuk browser Netscape Navigator 2. Padamasaitubahasainibanyak di kritikkarenakurangaman, pengembangannya yang terkesanburuburudantidakadapesankesalahan yang di tampilkansetiap kali kitamembuatkesalahanpadasaatmenyusunsuatu program. Kemudiansejalandengansedanggiatnyakerjasamaantara Netscape dan Sun (pengembangbahasapemrograman “Java” )padamasaitu, maka Netscape memberikannama “Javascript” kepadabahasatersebutpadatanggal 4 desember 1995.

Padasaat yang bersamaan Microsoft sendirimencobauntukmengadaptasikanteknologiini yang merekasebutsebagai “Jscript” di browser Internet Explorer 3. Versiterakhirdaribahasainiadalahversi 1.8.5 yang dirilistanggal 22 Maret 2011.

Javascript	Java
Bahasa yang dijalankanlangsung oleh browser	Bahasa yang dijalankanoleh program eksternal (Java Virtual Machine) diintegrasikankedalam browser
Didefinisikandengan tag <script>padahalaman HTML	Didefinisikandengan tag <applet>
Kode program bersifatterbukadandapatdibacamelalui browser	Kode program dapatbersifattertutup
Tidakmemerlukan proses kompilasimenjadi file lainnya	Perlukompilasiuntukmenghasilkan file .class

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

PenulisanKodeJavascript

Ada beberapacarauntukmenuliskankodeJavascript di dalamdokumen/halaman HTML, yaknimenggunakan tag <script>, menggunakan file eksternal, danmelalui event tertentu.

Menggunakan tag <SCRIPT>

Kodejavascriptdalam HTML dituliskandenganmenggunakan tag <script>dengan format sebagaiberikut :

......

</script>

Dokumentasi Program

Sepertidalambanyakbahasapemrogramanlainnya, sangatdianjurkanuntukmenambahkankomentar-komentar di dalamskripataukode program yang dibuatuntukkeperluandokumentasipengembangan. Hal inibergunaantaralain :

a. sebagaipengingatbagian-bagiankhusus di dalamskriptersebut, jikaakanmerubahsesuatu di dalamnya, mungkinbeberapabulankemudiansudahtidakingatlagidengan detail danalurdariskriptersebut.

b. untukmembuat orang yang tidaktahu program yang dibuatjadimengertidenganmembacapetunjuk-petunjuk yang dibuatmelaluikomentar-komentar.

Penulisankomentar di Javascript, kitabisamenggunakancara yang samadenganaturan yang ada di bahasa C/C++ ataupun Java.

a. Untukmenuliskomentardalamsatubariskitagunakankaraktergaris miring ganda (//).

// semuakarakter di belakang

// tidakakan di eksekusi

b. Untukmenuliskomentar yang terdiridaribeberapabariskitagunakankarakter /* dan */

/* Semuabarisantara 2 tandatersebut.

Alat Bantu Pengembangan

Dalammengembanganaplikasi web adabeberapapersiapan yang perludilakukan, diantaranyaadalahmenentukan browser dan editor yang akandigunakan. Saatinisudahbanyakbermunculanvarian browser, yang paling umumdiantaranya Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Opera, dan Apple Safari.

KegiatanBelajar10 :MemahamiPenggunaan Array

a. TujuanPembelajaran.

Setelahmengikutikegiatanbelajar 10 inisiswadiharapkandapat :

1) Mengetahuikeberadaannilaijamakdalamsuatu program

2) Memahamipenggunaan array dalam program

b. UraianMateri.

Variabel-variabel di JavaScript hanyabisamenyimpansatu data padasuatusaat. Adanyakecenderungan yang besaruntukmemanipulasisejumlah data dalamsatuvariabelmembuatkonsepvariabeltersebutmenjaditidakcukup. Sebagaisolusinya, JavaScript menghadirkanstruktur data yang memungkinkanmenyimpanhimpunan/kelompok data dalamsatuvariabelkhusus yang disebut Array.

Array, adalahsatuvariabel yang dapatberisibanyak data yang independent. Data yang disimpandiberikanindekstertentuataumenggunakannomerurutmulaidari 0.Indeks ininantinyadapatdigunakanuntukmengakses data yang disimpandalam 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

Terdapatbeberapacara yang dapatdigunakanuntukmembuat array di Javascript.

varTabelKu = ["data 1", "data 2", "data 3", "data 4"];

varTabelKu = 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 denganmenuliskannamatabeldiikutitandakurungsiku yang berisiindeksdarielemen.

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

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

//hasil: "elemenke 4 dari array adalahSinga"

MENYIMPAN DATA PADA ARRAY

Penyimpanan data dalam array dilakukandenganmenuliskannama array, di ikutidengannamaindeksdalamkurung, danmemasukkannilaidatanya, seperticontohberikut.

arrayTes[0] = "Hallo";

arrayTes["Andry"] = 10;

arrayTes["Sandra"] = 47;

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.

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

Pada script diatas akan menampilkan

Defi Ayu Lestari

Wednesday, 8 June 2016

Resum Pemrogaman Web Genap