Web Client

Dasar Pemrograman Web Client

Materi Bisa Download DISINI

Kompetensi Dasar:

3.8 Memahami client side scripting dalam pemrograman web

4.8 Mempresentasikan client side scripting dalam pemrograman web

Materi Pokok :

1. Konsep Client Side Dalam Pemrograman Web.

2. Macam-macam aplikasi client side programming.

3. Struktur Program Client Side.

4. Penulisan Fungsi Pada JavaScript.

Konsep Client Side Dalam Pemrograman Web

Secara umum, jenis pemrograman web dibagi menjadi Server Side Scripting dan Client Side Scripting. Perbedaan dari keduanya dapat dilihat dari cara kerja dan pemrosesannya dilakukan di mana Server Side Scripting adalah bahasa pemrograman web yang pengolahannya dilakukan di sisi server (Arif,2011). Server Side Scripting inilah yang memungkinkan untuk menghasilkan halaman web yang dinamis.

Sedangkan untuk Client Side Scripting adalah bahasa pemrograman web yang pengolahannya dilakukan di sisi client (Arif,2011). Bahasa pemrograman yang digunakan untuk mengaplikasikannya tidak memerlukan web server cukup menggunakan web browser.

Client Side Programming

Client Side merupakan teknologi webpage yang menerapkan jenis-jenis pemrograman web dimana semua sintaks & perintah program dijalankan di web browser. Ketika client meminta dokumen yang mengandung script (client side scripting), script tersebut akan diambil dari web server kemudian dijalankan de web browser yang bersangkutan.

Ada pun cara kerja client side yaitu, pengunjung web meng-klik salah 1 link dari web & browser membaca perintah pengunjung untuk memanggil alamat web yang dituju. Setelah itu browser akan mengalihkan ke halaman yang ditjuju oleh pengunjung web.

Contoh aplikasi yang digunakan dalam pemrograman client side, antara lain :

Javascript

CSS

HTML

Sebelumnya kita sudah mempelajari tentang Bahasa Pemrograman HTML dan CSS pada pemrograman web, untuk kali kita bahas aplikasi atau bahasa pemrograman Javascript yang tidak beda jauh dengan bahasa pemrograman HTML maupun CSS.

Konsep Dasar Javascript

Javascript adalah bahasa pemrograman (skrip) yang ditempelkan pada kode HTML & proses disisi klien. Dengan adanya bahasa ini, kemempuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan Javascript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke server.

Javascrip bukanlah bahasa Java & merupakan 2 bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram & hasil kompilasinyalah yang dijalankan oleh klien.

Kode javascript biasa dituliskan dalam bentuk fungsi (function) yang ditaruh di bagian dalam tag <head> yang dibuka dengan tag <script language=”javascript”>. Javascript adalah bahasa script yang populer di internet dan dapat bekerja di sebagian besar penjelajah web browser seperti Internet Explorer, Mozilla Firefox, Netscape, Opera, Google Chrome, dan web browser lainnya.

Tag Dalam Javascript

Ada 3 macam cara penulisan tag javascript, yaitu :

1) Menuliskan tag dengan diawali <script type=”text/javascript”> dan diakhiri dengan </script>.

Atribut yang menginformasikan kepada browser bahwa program script yang ada dalam tag tersebut adalah javascript dalam format text.

2) Menuliskan tag dengan diawali <script language=”javascript”> dan diakhiri dengan </script>.

Atribut ini digunakan dengan tujuan untuk menentukan versi javascript yang digunakan, sebagai contoh: <script language=”javascript1.2”> menyatakan bahwa javascript yang digunakan adalah versi 2.1.

3) Menuliskan tag dengan diawali <script language=”javascript”> dan diakhiri dengan </script>.

Cara campuran ini yaitu penulisan lama dan penulisan baru disatukan. Dilakukan untuk mengantisipasi pengakses halaman web yang masih menggunakan web browser yang mendukung javascript, tetapi belum mendukung HTML.

Struktur Program Client Side

Struktur Penulisan Javascript

Ada 2 jenis bagaimana Javascript dibuat, pertama Javascript ditulis dalam file yang terpisah dengan HTML, ke 2 Javascript ditulis dalam HTML. Javascript yang ditulis diluar HTML disebut External Javascript dengan ekstensi file .js.

Dalam HTML, penulisan script diawali dengan <script>…</script>. Script yang akan dijalankan harus diletakkan diantara <script> & </script>. Tag <script> mempunyai beberapa atribut namun yang terprnting adalah atribut language & type.

Karena Javascript bukan satu-satunya bahasa scripting, maka sangatlah perlu untuk memberitahukan kepada browser bahwa bahasa script yang digunakan adalah Javascript & selanjutnya browser akan menjalankan modul pendukung Javascript untuk memprosesannya.

Sehingga untuk Javascript, pada tag <script> perlulah ditambah atribut berikut ini :

<script language=”Javascript” type=”text/javascript”>

Contoh 1:

Script dapat diletakkan di tag <body> & / di tag <head> pada bagian halaman HTML.

<html> <head> <title> Alert Box </title> </head> <body> <script language=”Javascript” type=”text/javascript”> alert(“Siswa kelas X RPL sedang belajar Javascript”); </script> </body> </html>

Contoh 2:

Sript ditulis pada bagian body :

<html> <body> <script language=”Javascript” type=”text/javascript”> document.write (“<h1> Berikut ini adalah contoh penulisan dokumen menggunakan JavaScript </h1>”)

Penulisan Fungsi Pada JavaScript

Penulisan JavaScript didalam tag <head>
Dalam contoh berikut, script java diletakkan di tag <head> pada halaman HTML. Fungsi akan dipanggil ketika tombol diklik.

Contoh :

<html> <head> <script language=”JavaScript” type=”text/javascript”> Function cobafungsi ( ) { document.getElementByld(“coba”) .innerHTML=”Kali ini saya belajar membuat fungsi dalam JavaScript.”; } </script> </head> <body> <h1> Halaman Web RPL </h1> <p id=”coba”> A Paragraph </p> <button type=”button” onclick=”cobafungsi ( )”> Coba Fungsi </button> </body> </html>

Penulisan JavaScript didalam tag <body>

Didalam contoh berikut, fungsi javascript diletakkan di tag <body> pada halaman HTML. Fungsi akan dipanggil ketika tombol diklik.

Contoh :

<html <body> <h1> Halaman Web RPL </h1> <p id=”coba”> PORTAL RPL </p> <button type=”button” onclick=”cobafungsi ( )”> Coba Fungsi </button> <script language=”JavaScript” type=”text/javascript”> Function coba fungsi ( ) { document.getElementByld(“coba”) .inner HTML=”Kali ini script saya letakkan diantara tag body.” } </script> </body> </html>

Memberi Komentar Pada JavaScript

Komentar pada suatu script tidak akan dieksekusi oleh Javascript. Komentar ditambahkan pada script untuk memberikan penjelasan script / membuat script tidak dieksekusi. Untuk memberikan komentar yang hanya 1 baris gunakan //.

Contoh :

//Ini adalah bagian heading : document.getElementByld(“My H1”).innerHTML=”Selamat datang di Home page saya.”; Atau Var x = 5 ; // mendeklarasikan x & memasangkannya dengan 5. Var y = x+12 ; // mendeklarasikan y & memasangkannya dengan x+2.

Sedangkan untuk memberikan komentar lebih dari 1 baris gunakan /* & */. Jadi script yang terletak antara /* & */ akan dianggap sebagai komentar. Berikut contoh komentar yang lebih dari 1 baris :

Contoh :

/*Kode berikut akan ditulis ke heading & paragraph. Dan akan menampilkan halaman home page.*/ document.getElemenetByld(“my H1”).innerHTML=”Selamat datang di Home Page saya.”; document.getElementByld(“my P”).innerHTML=”Ini adalah paragraph saya.”;

TUGAS SISWA

Buatlah halaman website terkait formulir pendaftaran kemudian setelah mengisikan formulir pendaftaran, akan muncul hasilnya dengan menggunakan javascript untuk mendukung pemrograman HTML !