Client-Side Scripting

AGUS NUGRAHA, S.KOM – PWPB XI RPL

 Tujuan Pembelajaran
1. Peserta didik dapat memahami client side scripting dalam
pemerograman web
2. Peserta didik dapat Menerapkan client side scripting pada
halaman web interaktif
3. Peserta didik dapat membuat halaman web interaktif
menggunakan konsep client side scripting
 PENGANTAR

• Sistem Berbasis Web atau Aplikasi Berbasis Web adalah sebuah sistem
yang dibangun dengan konsep rekayasa web (web engineering) dan
diaplikasikan secara online melalui media internet.
• Web engineering adalah suatu proses yang digunakan untuk menciptakan
suatu sistem aplikasi berbasis web dengan menggunakan ilmu rekayasa,
prinsip-prinsip manajemen dan pendekatan sistematis sehingga dapat
diperoleh sistem dan aplikasi web dengan kualitas tinggi. Tujuannya
untuk mengendalikan pengembangan, meminimalisasi resiko dan
meningkatkan kualitas sistem berbasis web (kmrg.itb.ac.id, 2005).
Dasar-dasar Pemrograman Berbasis Web

Beberapa konsep dasar pemrograman berbasis web (Hariyanto, 2004),

yaitu :
• Komunikasi antara web browser dan web server berdasarkan protocol HTTP.
• Dokumen dan semua sumber daya apapun di jaringan yang dikehendaki
diidentifikasi dengan Universal Resource Locator (URL).
• Dokumen web ditulis berdasarkan standar HTML.
• Pemrograman sisi klien (client-side scripting) dan Java.
• Pemrograman sisi server (server-side scripting/programming).
Dasar-dasar Pemrograman Berbasis Web

Beberapa konsep dasar pemrograman berbasis web (Hariyanto, 2004),

yaitu :
• Komunikasi antara web browser dan web server berdasarkan protocol HTTP.
• Dokumen dan semua sumber daya apapun di jaringan yang dikehendaki
diidentifikasi dengan Universal Resource Locator (URL).
• Dokumen web ditulis berdasarkan standar HTML.
• Pemrograman sisi klien (client-side scripting) dan Java.
• Pemrograman sisi server (server-side scripting/programming).
 APERSEPSI

Secara umum jenis pemrograman web terbagi menjadi 2, yaitu Client Side
Scripting dan Server Side Scripting.

Perbedaan kedua jenis script ini adalah pada bagaimana cara kerjanya dan
pemrosesannya dilakukan dimana.

Aplikasi berbasis web adalah aplikasi yang arsitekturnya berbasis client-side,

Maksudnya adalah aplikasi web dapat diolah disisi client dan di sisi server.
 CLIENT SIDE SCRIPTING

Client Side Scripting adalah salah satu jenis bahasa pemrograman web yang proses pengolahannya
dilakukan di sisi client atau browser. Proses ini dilakukan oleh browser yang bertindak sebagai client
nya. Di dalam web browser terdapat library yang mempu menterjemahkan semua perintah di halaman
web yang menggunakan client side scripting.

Library ini secara teknis disebut sebagai web engine. Masing-masing web browser memiliki web
engine yang berbeda-beda di web browser yang berbeda, karena masing-masing web engine
menggunakan metode penterjemah yang sedikit berbeda.
 CLIENT SIDE SCRIPTING

Sederhananya : Client side scripting merupakan Bahasa pemrograman untuk mengaplikasikannya

tidak memerlukan web server, atau bahasa pemrograman yang berjalan di sisi client.

Contoh :

HTML
JavaScript
CARA KERJA CLIENT SIDE SCRIPTING

• Client/user melakukan request untuk mengakses sebuah dokumen web melalui web browser yang ada di
komputernya. Request user tersebut akan dicari di web server, tempat dokumen web tersebut tersimpan. Lokasi
web server mungkin saja berada di internet atau di komputer lokal (localhost). Secara logik pencariannya dengan
cara memanggil domain/url dari web server tersebut

• Jika web server tempat dokumen tersebut tersimpan sudah ditemukan, maka web server akan melakukan
pengecekan terhadap dokumen web yang di-request oleh user. Jika dokumen tersebut di dalamnya berisikan client
side scripting maka web server tidak akan melakukan pemrosesan apapun terhadap dokumen web tersebut.

• Dokumen web tersebut langsung dikembalikan ke client dalam format halaman HTML, untuk selanjutnya diproses
di sisi client (browser).

• Dokumen tersebut diterjemahkan oleh client/web browser, komponen yang berfungsi menterjemahkannya adalah
komponen script intepreter yang biasa disebut web engine.

• Halaman web yang telah selesai diproses akan dikembalikan kembali ke client dalam
format halaman HTMl yang dapat dilihat di halaman utama web browser. Halaman
web dalam format HTML.
 Kelebihan Client Side Scripting

Berikut adalah beberapa alasan kelebihan jika menggunakan client side scripting :

• Mudah untuk dipelajari dan digunakan, artinya untuk mempelajari client side scripting cukup mudah

• Tidak membutuhkan pengetahuan pemgrograman yang cukup tinggi

• perubahan dan pemrosesan kode nya lebih cepat karena dilakukan langsung disisi client

• Mampu menampilkan layout dan desain halaman web yang lebih intensif dan user friendly.
 Kelemahan Client Side Scripting

• Kode programnya dapat dilihat melalui web browser, sehingga bisa dikatakantidak aman

• Karena semua pemrosesannya dilakukan di sisi client/komputer host maka semua sumber
data yang ada di komputer host tersebut (memory, cpu usage) akan digunakan secara
maksimal.

• Masalah kompabilitas web browser menjadi isu yang perlu diperhatikan

• Minim fitur untuk pengaksesan ke sumber daya komputer.

 server-side scripting

• Pemrograman web sisi server

• Bahasa pemrograman untuk mengaplikasikannya memerlukan
web server, atau bahasa pemrograman yang berjalan di sisi
server.
• Contoh :
– ASP, memerlukan web server IIS.
– PHP, memerlukan web server Apache.
 HTML
HTML (Hypertext Markup Language) merupakan bahasa yang digunakan untuk membangun
halaman website.

HyperText: Text yang ditampilkan pada komputer atau alat elektronik lainnya dengan merujuk ke
text lainnya yang dapat diakses, biasanya dengan mengeklik mouse atau menekan tombol tertentu.
HyperText tidak terbatas pada text, tapi juga dapat berisi tabel atau gambar. HyperText merupakan
dasar dari struktur web.
(http://en.wikipedia.org/wiki/Hypertext )

Markup: Kode yang diperlukan agar dapat dibaca oleh browser.

(Intro To HTML 4.01, Dawn Friedman)
Elemen dan Tag HTML

<title>This is a title</title>
Contoh elemen HTML
Elemen dan Tag HTML
Ini merupakan isi/konten

<title>This is a title</title>

Ini merupakan Tag Awal Ini merupakan tag

akhir/tag penutup
 Elemen dan Tag

Tag penutup tidak harus selalu ada, terutama untuk tag-tag yang tidak memiliki konten teks. Contohnya:

<img />, tag untuk menampilkan gambar

<hr />, tag untuk membuat garis horizontal
<br />, tag untuk loncat ke baris baru
 Struktur HTML
<!DOCTYPE html>
<html>
<head>
<title>Halaman 1</title>
</head>
<body>
<!– comment -->
<h1>Judul</h1>
<hr />
</body>
</html>
 Struktur HTML

Doctype digunakan untuk menginformasikan browser, HTML versi apa yang digunakan.
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML Basic 1.1 (quick reference):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-
basic11.dtd">
HTML 5
<!DOCTYPE HTML>
Sumber doctype di atas bisa dilihat di http://www.w3.org/QA/2002/04/valid-dtd-list.html dan
http://www.w3schools.com/tags/tag_DOCTYPE.asp
 Struktur HTML

<html> merupakan root atau induk dari seluruh tag html.

<head> ,merupakan kepala dari halaman html, pada bagian ini biasanya
digunakan untuk elemen-elemen yang tidak ditampilkan oleh browser.
<body>, merupakan isi dari halaman website, apa pun yang akan
ditampilkan oleh browser, ditempatkan di bagian ini.
HTML
HTML
 Struktur file HTML
Suatu dokumen HTML juga mempunyai aturan dalam penulisannya,
ada beberapa tag yang harus anda tuliskan dan sudah menjadi
ketentuan. Jika kita perbaiki latihan kita sebelumnya menjadi
dokumen HTML yang benar maka kodenya menjadi seperti berikut:
 Latihan

<html>
<head>
<title>Web Pertama</title>
</head>
<body>
<h1>Web Pertama Saya</h1>
<h2>Aplikasi IT-1</h2>
</body>
</html>

Simpan dengan nama latihan1.html

Tag Heading

<h1>Text</h1>
<h2>Text</h2>
<h3>Text</h3>
<h4>Text</h4>
<h5>Text</h5>
<h6>Text</h6>
 Tag Paragraph

<p>Dari 66.778 desa yang tersebar di Indonesia, baru sekitar 24.000 atau 36% di
antaranya yang sudah terjangkau layanan telekomunikasi. Sedangkan sisanya,
42.778 desa atau sekitar 64% di antaranya, masih dalam tahap rencana
pembangunan.</p>

<p>Demikian dipaparkan Eddy Kurnia, Head of Corporate Communication Telkom.

Rencana pembangunan ini akan digarap Telkom bersama anak perusahaan
selulernya, Telkomsel, dalam program Universal Service Obligation (USO).</p>
Dalam HTML dapat digunakan simbol tertentu yang dapat
digunakan untuk mewakili/mengganti suatu karakter.

Sebagai contoh, tag html menggunakan karakter < dan >.

Maka, agar browser dapat menampilkan karakter tersebut,
digunakan simbol khusus, yaitu &lt; untuk karakter < dan &gt; untuk
karakter >
Contoh Karakter Khusus

<p>Dalam matematika, tanda lebih besar diwakili oleh simbol &gt; dan
tanda lebih kecil diwakili oleh simbol &lt;.</p>
Cascading Style Sheet (CSS) adalah suatu bahasa yang bekerja sama dengan dokumen HTML untuk
mendefinisikan cara bagaimana suatu isi halaman web ditampilkan atau dipresentasikan. Presentasi ini meliputi
style atau gaya teks, link, maupun tata letak (layout) halaman. Dengan adanya teknologi seperti ini, kita dapat
memilah atau memisahkan antara kode untuk isi halaman web dan kode yang diperlukan khusus untuk
menangani tampilan.
 Pengenalan JavaScript

Asal mula nama JavaScript adalah LiveScript, dikembangkan pertama kali pada tahun
1995 di Netscape Communications.
Hasil kolaborasi antara Netscape dan Sun (pengembang bahasa pemrograman “Java” )
memberikan nama baru “JavaScript” pada tanggal 4 desember 1995.
Bahasa ini dikenali pada browser Netscape Navigator mulai versi di atas 2.0. ,sedangkan
Microsoft melengkapi Internet Explorer dengan JavaScript mulai versi 3.0 ke atas.
JavaScript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses pada
sisi klien, sehingga kemampuan dokumen HTML menjadi lebih luas.
JavaScript memungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum
dikirim ke server
JavaScript dapat mengimplementasi permainan interaktif
Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang
berisi skrip skrip dari Javascript yang terselip di dalam dokumen HTML.
Javascript tidak memerlukan kompilator atau penterjemah khusus untuk
menjalankannya
Perbedaan JavaScript dan
Pemrograman Java

JavaScript sendiri merupakan bahasa yang mudah dipahami, karena memiliki kemiripan
dengan konsep bahasa pemrograman visual, maupun Java ataupun C.
JavaScript adalah bahasa yang “case sensitive” artinya membedakan penamaan variabel
dan fungsi yang menggunakan huruf besar dan huruf kecil.
Seperti bahasa Java ataupun C, setiap instruksi dalam JavaScript diakhiri dengan
karakter titik koma (;).

36
Operator Matematika
<HTML>
<HEAD>
<TITLE>Operasi Matematika</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("20 + 3 = " + (20 + 3) );
document.write("<BR>");
document.write("20 + 3 = " + (20 - 3) );
document.write("<BR>");
document.write("20 * 3 = " + (20 * 3) );
document.write("<BR>");
document.write("20 / 3 = " + (20 / 3) );
document.write("<BR>");
document.write("20 % 3 = " + (20 % 3) );
document.write("<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>
37
 Contoh CLIENT SIDE SCRIPTING :

Codingan Index

38
PROJECT MEMBUAT PORTOFOLIO DI HALAMAN WEB

Codingan Index

39
PROJECT MEMBUAT PORTOFOLIO DI HALAMAN WEB

Codingan Index

40
PROJECT MEMBUAT PORTOFOLIO DI HALAMAN WEB

1. Apa perbedaan paling mendasar dari server side scripting dengan Client Side Scripting?
2. Bagaimana cara kerja dari Client Side Scripting?
3. Apa Kelebihan Client Side Scripting ?
4. Apa yang Dimaksud dengan system WEB ?
5. Buatlah desain portofolio menggunakan Css, Java script Dan Html Semenarik mungkin !

41
THANK YOU