Materi PWPB XI Client Side Scripting Dalam Pemrograman Web

BAB VI

STYLE HALAMAN WEB DAN

CLIENT SIDE SCRIPTING

 

KOMPETENSI INTI

3.      Memahami, menerapkan, menganalisis, dan mengevaluasi tentang pengetahuan faktual, konseptual, operasional dasar, dan metakognitif sesuai dengan bidang dan lingkup kerja Rekayasa Perangkat Lunak pada tingkat teknis, spesifik, detail, dan kompleks, berkenaan dengan ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam konteks pengembangan potensi diri sebagai bagian dari keluarga, sekolah, dunia kerja, warga masyarakat nasional, regional, dan internasional.

4.      Melaksanakan tugas spesifik dengan menggunakan alat, informasi, dan prosedur kerja yang lazim dilakukan serta memecahkan masalah sesuai dengan bidang kerja Rekayasa Perangkat Lunak. Menampilkan kinerja di bawah bimbingan dengan mutu dan kuantitas yang terukur sesuai dengan standar kompetensi kerja. Menunjukkan keterampilan menalar, mengolah, dan menyaji secara efektif, kreatif, produktif, kritis, mandiri, kolaboratif, komunikatif, dan solutif dalam ranah abstrak terkait dengan pengembangan dari yang dipelajarinya di sekolah, serta mampu melaksanakan tugas spesifik di bawah pengawasan langsung. Menunjukkan keterampilan mempersepsi, kesiapan, meniru, membiasakan, gerak mahir, menjadikan gerak alami dala ranah konkret terkait dengan pengembangan dari yang dipelajarinya di sekolah serta mampu melaksanakan tugas spesifik di bawah pengawasan langsung.

 

KOMPETENSI DASAR

3.8 Memahami client side scripting dalam pemrograman web

4.8 Mempresentasikan client side scripting dalam pemrograman web

 

APERSEPSI

Mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan bahasa pemrograman. Pada umumnya, CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran borders. warna border, warna hyperlink, warna mouse over, spasi antarparagraf, spasi antarteks, margin kiri, kanan, atas, bawah, dan parameter lainnya, Dalam hal ini, layout berkaitan dengan tata cara  penataan elemen-elemen dalam sebuah halaman dengan benar. Dengan desain halaman web yang baik dan tepat akan membuat pengunjung (visitor) merasa nyaman dengan tampilan (layout) halaman web tersebut dan tetap dapat fokus pada isi (content).

MENGAMATI

Pelajarilah buku teks maupun sumber lain tentang style halaman web dan client side scripting dengan baik dan benar!

 

AYO PAHAMI

CLIENT SIDE SCRIPTING DALAM PEMROGRAMAN WEB

Client Side Scripting yang paling mudah adalah Cascading Style Sheet atau lebih sering disebut dengan CSS sebagai salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website. CSS bukanlah sebuah bahasa pemrograman, melainkan sebuah aturan untuk mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur, seragam, dan mudah dalam pengaturan saat pendesain sebuah halaman web.

1.        Konsep Client Side Programming

Jika dalam HTML dikenal ada tag-tag yang menyusun sebuah dokumen HTML,dalam CSS juga dikenal dengan sebutan selector. CSS memiliki aturan tersendiri dalam penulisan sintaks. Format penulisan dari CSS dapat dituliskan: Selector { Property : value; }. Bagian-bagian utama dari sebuah CSS itu terdiri atas tiga bagian sebagai berikut.

a.      Selector merupakan nama-nama yang diberikan untuk style-style yang berbeda, baik itu style internal maupun eksternal, bagian elemen HTML yang akan ditunjuk untuk mengatur style, dan dapat berupa class dan ID

b.      Property digunakan untuk mengatur CSS dalam mengubah selector yang dipilih, mempunyai nilai yang disebut dengan value, dan berada dalam tanda { }.

c.       Value merupakan nilai dari property CSS.

Secara mendasar cara kerja CSS (Cascading Style Sheet) dimulai saat deklarasi style yang diinginkan dengan menulis style (selector, id, dan class) yang secara otomatis style tersebut akan bekerja pada dokumen HTML. Dengan mengatur selector, id, dan class, untuk selanjutnya id dan class tersebut disesuaikan dan terapkan pada kode HTML. Secara otomatis pula CSS itu akan bekerja pada file HTML. Perhatikan prosedur yang menggunakan selector class dan selector ID sebagai berikut.

 

<html>

<head>

<title>Contoh selector kelas dan ID</title>

<style type="text/css">

  .kotak {border: solid; padding: 5px;}

  #jawa {background-color: #ccff66; }

  #inggris {font-weight: bold; font-size: 1.2em;}

</style>

</head>

<body>

  <div id="Indonesia" class="kotak">Selamat Pagi ....!</div>

  <div id="Jawa">Sugeng Enjing</div>

  <div id="inggris" class="kotak">Good Morning ....!</div>

</body>

</html>

 

Berdasarkan letak style-nya, penerapan CSS pada sebuah halaman web dapat dilakukan dalam beberapa alternative sebagai berikut.

a.      Inline Style Sheet

CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style=”….” dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan dan tidak akan memengaruhi tag HTML yang lain.

b.      Embedded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag <style> ….</style> di atas tag <body>, lebih tepatnya di dalam tag <head>. Dibagian body terdapat penerapan CSS dengan cara memanggil nama class-nya.

c.       External Style Sheet

CSS didefinisikan secara terpisah pada file yang berbeda. Selanjutnya, file atau halaman web yang ingin menerapkan style pada file CSS tinggal memanggil file CSS tersebut. Cara ini umumnya digunakan pada satu aplikasi berbasis web sehingga tampilan antar halaman akan terlihat konsisten. File yang berisi style CSS disimpan dalam format *.css. Berikut ini bentuk penulisan file .css.

 

input.btn

{color: #fff;

background: #ffa20f;

font-family: "calibri", Times, serif;

font-size: 14px;

font-weight: bold;

width: auto;}

 

Listing kode diatas disimpan dengan nama style.css dan selanjutnya akan dipanggil pada file html seperti pada contoh berikut.

 

<html>

<head>

    <title>Sistem informasi SMK KORPRI MAJALENGKA</title>

    <style type="text/css"></style>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <table>

    <tr>

      <td>

        <form>

          <p><label for="nama">Nama User</label>

          <input type="text" id="nama" />

          </p>

          <p><label for="KTP">Kata Sandi</label>

          <input type="text" id="KTP" />

          </p>

          <p>

            <input type="submit" value="Login" class="btn">

          </p>

        </form>

      </td>

    </tr>

  </table>

</body>

</html>

 

Jika listing kode di atas dijalankan, akan menghasilkan tampilan sebagai berikut.

2.        Macam-Macam Aplikasi Client Side Programming

Client side scripting sebagai salah satu jenis bahasa pemrograman web yang proses pengolahannya dilakukan di Sisi client (komputer pengguna). Proses pengolahannya dilakukan oleh web browser sebagai client-nya. Di dalam web browser sudah terdapat library yang mampu menerjemahkan semua perintah di halaman web yang menggunakan client side scripting. Library ini juga disebut web engine yang dimiliki setiap web browser. Namun, web engine yang berbeda-beda terkadang membuat tampilan layout web sering berbeda di setiap browser. Contoh dari client side scripting ini, antara lain HTML, XHTML, CSS, JavaScript, XML, dan JQUERY.

a.      Javascript

Javascript diperkenalkan pertama kali oleh Brendan Eich pada tahun 1995. Pada awalnya, bahasa ini dinamakan "LiveScript" yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Bahasa ini awalnya dikritik karena kurang aman, pengembangan yang buruburu, dan tidak ada pesan kesalahan yang ditampilkan setiap kali membuat kesalahan saat menyusun suatu program. Selanjutnya, terjadi kerja sama antara Netscape dan Sun (pengembang bahasa pemrograman "Java") sehingga Netscape memberikan nama "Javascript" kepada bahasa tersebut pada tanggal 4 Desember 1995. Di saat yang bersamaan, Microsoft mencoba mengadaptasikan teknologi mereka  yang disebut "Jscript" di browser Internet Explorer 3. Versi terakhir dari   bahasa ini adalah versi 1.8.5 yang dirilis tanggal 22 Maret 2011. Pada akhimya, distandarkan dengan nama ECMAScript oleh Netscape melalui Organisasi Internasional ECMA. Standar ini dipublikasikan pertama kali pada bulan Juni 1997 dengan nama dokumen spesifikasi ECMA-262. Melalui publikasi tersebut, semua implementasi Javascript pada tiap browser memiliki standar penerapan (pengodean) yang sama. Setiap browser memiliki implementasi sendiri-sendiri untuk ECMAScript. Internet Explorer dengan Jscript, Opera dengan ECMAScript, scrta Mozilla Firefox, Google Chrome, dan Safari dengan nama Javascript.

Bahasa pemrograman Javascript memberikan kemampuan tambahan terhadap bahasa HTML dengan mengizinkan eksekusi perintah di Sisi user, yang artinya di Sisi browser bukan di Sisi server web. Javascript adalah bahasa yang berbentuk kumpulan skrip yang berjalan pada suatu dokumen HTML. Sepanjang sejarah internet, Javascript adalah bahasa skrip per-tama untuk web. Javascript termasuk jenis "case sensitive", artinya membedakan penamaan variabel dan fungsi menggunakan hut-uf besar dan huruf kecil, misalnya variabel dengan nama TEST berbeda dengan variabel dengan nama test. Setiap instruksi dapat diakhiri dengan karakter titik koma (;). Javascript bergantung pada browser (navigator) yang memanggil dan menampilkan halaman web yang tidak hanya berisi HTML, tetapi juga dapat berisi skrip-skrip Javascript. Javascript juga tidak memerlukan penerjemah khusus untuk menjalankannya karena sudah disediakan sendiri oleh browser yang digunakan. Lain halnya dengan bahasa "Java" yang memerlukan penerjemah khusus untuk menjalankannya di Sisi klien.

b.      VBScript

VBScript (Visual Basic Script) sebagai bahasa pemrograman yang dikembangkan oleh Microsoft Corporation pada tahun 1996. Perintahperintah pada VBScript pada dasarnya sama dengan perintah Visual Basic. Hanya saja, untuk VBScript mengandalkan sebuah Notepad dan dapat dibuka dengan Internet Explorer. Dalam penulisan program VBScript, script yang akan dituliskan selalu diawali <script language="VBScript"> ..... </script>. Jika ingin menuliskan sesuatu, tambahkan di tengah-tengah.

3.        Struktur Program Client Side

Cara kerja Client Side Scripting adalah client/user melakukan request untuk mengakses sebuah dokumen web melalui web browser yang ada di komputer. Request tersebut akan dicari di web server di mana dokumen tersebut disimpan. Lokasi web server bisa berupa internet atau di komputer (localhost). Secara logika, pencarian dengan cara memanggil domain/url dari web server tersebut. Jika web server tempat dokumen tersebut tersimpan sudah ditemukan, web server akan melakukan pengecekan terhadap dokumen web yang di-request oleh user. Jika di dalamnya berisi Client Side Scripting, web server tidak akan melakukan pemrosesan apa pun terhadap dokumen tersebut, tetapi langsung dikembalikan ke client dalam format HTML untuk selanjutnya di proses disisi client (web browser). Komponen yang berfungsi me-nerjemahkannya adalah komponen script interpreter (web engine) dengan hasil pemrosesan dokumen berbentuk halaman web dalam format HTML. Selanjutnya, halaman web yang telah selesai diproses akan dikembalikan ke client dalam format halaman HTML yang dapat dilihat di halaman utama web browser.

a.      Menuliskan Kode Javascript

Beberapa cara untuk menuliskan kode Javascript di dalam halaman HTML, yaitu menggunakan tag <script>, menggunakan file eksternal, dan melalui event tertentu.

1)      Menggunakan tag <SCRIPT>

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

<script language="javascript”>

………

………

<script>

Atribut language di dalam tag <SCRIPT> menunjukkan jenis bahasa yang digunakan dan versinya, misalnya "Javascript", "Javascript1.1 Javascript1.2" untuk bahasa Javascript. Jika ingin menggunakan beberapa versi Javascript di dalam satu halaman HTML, hanya perlu meletakkan kode-kode Javascript tersebut (berdasarkan versinya) ke dalam beberapa tag <SCRIPT> dengan mencantumkan versi Javascript-nya.

2)      Menggunakan file eksternal

Menuliskan kode program Javascript dalam suatu file teks dan kemudian file teks yang berisi kode Javascript dipanggil dari dalam dokumen HTML. Berikut ini kode yang disisipkan dalam dokumen HTML.

 

<script language="javascript" src="lokasi/file.js"></script>

 

Lokasi dan nama file .js berisi kode Javascript. Jika perintah tambahan SRC tidak disertakan, tag Script akan mencari kode yang  terletak di dalam tag Script.

3)      Melalui event tertentu

Event adalah sebutan dari satu aksi yang dilakukan oleh user, misalnya klik tombol mouse. Kodenya dapat ditulis sebagai berikut.

<tag eventHandler="kode Javascript yang akan dimasukan">

b.      Dokumentasi Program

Dokumentasi pengembangan berguna sebagai pengingat pada bagian-bagian khusus di dalam skrip tersebut. Jika akan mengubah sesuatu di dalamnya, mungkin beberapa bulan kemudian sudah tidak ingat lagi dengan detail dan alur dari skrip tersebut. Sementara itu, orang yang tidak tahu program dapat mengerti dengan cara membaca petunjuk-petunjuk yang dibuat melalui komentar-komentar. Penulisan komentar di Javascript bisa menggunakan cara yang sama dengan aturan yang ada di bahasa C/C++ ataupun Java.

4.        Penyisipan Script Client Side dalam HTML

Dengan menambahkan atau menyisipkan Javascript pada sebuah halaman HTML, halaman bisa menjadi lebih dinamis dan interaktif. Berikut ini beberapa perintah yang digunakan untuk penyisipan Javascript dalam HTML.

a.      Tag <script>

Tag <script> digunakan untuk mendefinisikan sebuah client side script. Tag jenis ini berisi kumpulan script dalam tag itu sendiri, atau bisa mengimpor script dari file lain, dengan menamahkan atribut src.

b.      Tag <noscript>

Tag <noscript> digunakan untuk alternatif jika Javascript yang dibuat tidak bisa ditampilkan, misalnya karena browser yang digunakan tidak mendukung.

 

MENGEKSPLORASI

Buatlah sebuah kelompok kemudian kumpulkan informasi client side scripting   dalam pemrograman web terutama tentang penerapan CSS pada sebuah halaman web!

Lihat Materi Versi PDF

Download Materi

Assessmen !

Klik Link Berikut Ini