Cient Side Scripting (Pengertian, konsep, macam dan jenis, struktur dan contoh penyisipan dalam html)

 Anak RPL tentu tidak asing dengna istilah client side scripting maupun server side scripting. Di artikel kali ini saya akan jelaskan secara panjang lebar apa itu client side scripting dari mulai pengertian, konsep jenis dan macam-macam client side scripting serta contoh penyisipan pada kode html.

Dalam pengembangan aplikasi berbasis web, ada lebih dari satu script yang harus digunakan hingga aplikasi web memiliki tampilan yang bagus, interaktif serta berfungsi dengan baik sebagaimana mestinya. Script tersebut adalah script client yang juga sering disebut (client side scripting) dan script server (server side scripting).

Pengertian Client Side Scripting vs Server side scripting

Client Side Scripting adalah script-script atau kode perintah untuk mengembangkan aplikasi web atau halaman website dimana script ini diproses dan diterjemahkan secara langsung oleh browser (mozila, google chrome dan lain sebagainya) menjadi tampilan halaman web. client side script tidak memerlukan web server karena dapat langsung diproses oleh web browser.

Sementara Server Side Scripting adalah kode atau script untuk mengembangkan aplikasi web yang hanya dapat diproses oleh web server( seperti apache yang dijalankan oleh xampp, glassfish dll) yang berjalan di komputer server (web hosting).

Script server side tersebut akan diproses dan diterjemahkan oleh server web tersebut ke dalam bentuk client side scripting  dalam bentuk intruksi HTML, kemudian hasil pemrosesan tersebut dikirimkan lewat jaringan ke komputer client, komputer client melalui web browser seperti mozila, google chrome akan menterjemahkan script tersebut menjadi sebuah tampilan halaman web.

Memahami Konsep Apliksi web

Untuk lebih jelas memahami tentang client side scripting, yang harus dipahami adalah konsep aplikasi web, bagaimana aplikasi web dapat berjalan dan tampil dengan baik pada saat seorang user mengaksesnya melalui web browser.

Ingat aplikasi web adalah, aplikasi yang dapat berjalan menggunakan bantuan web browser seperti mozila firefox, google chrome, safari dan lain sebagainya.

Bagaimana konsep aplikasi web tersebut sehingga bisa berjalan, dapat dilihat pada gambar sederhana di bawah ini:

Konsep Aplikasi Web

Coba lihat bagian server di sebelah kanan, server merupakan sebuah komputer yang menjalankan aplikasi  web server yang fungsinya untuk menyimpan file-file halaman web.

Dari gambar di atas bisa dijelaskan bahwa aplikasi web sebenarnya merupakan kompulan file-file seperti file-file gambar, music, suara, file-file script yang di dalamnya berisi gabungan script (script client dan script server) yang disimpan di dalam Mesin Komputer server yang sudah mengaktifkan web server di dalamnya.

lihat bagian CLient, pada bagian client pengguna menggunakan perangkat client smartphone atau juga komputer client yang sudah terpasang web browser, untuk menampilkan halaman web yang tersimpan di komputer server, maka pengguna harus menggunakan web borser pada mesin client (baik itu komputer maupun smartphone).

Melalui mesin client dan bantuan browser pengguna dapat mengetikan nama domain (contoh facebook.com, google.com, dll) untuk meminta mengakses halaman-halaman web yang dibutuhkan yang terdapat di mesin server melalui (HTTP Request).

Permintaan dari pengguna akan diproses oleh mesin server, apabila pada halaman yang diminta terdapat script server, maka mesin server akan memprosesnya terlebih dahulu menggunakan bantuan web server sehingga script server tersebut diterjemahkan menjadi script client, sementara jika pada file halaman yang diminta terdapat script client, maka server tidak akan menterjemahkannya.

hasil pemrosesan server tersebut yang berupa script client kemudian langsung dikirimkan ke mesin client (HTTP response). di mesin client respon dari komputer server akan dibaca dan diproses oleh web broser menjadi tampilan halaman web.

Macam-macam Client Side Scripting

 Setelah memahami pengertian client side scripting dan memahami konsep aplikasi web dengan baik, sekarang waktunya mengetahui macam-macam atau jenis client side scripting.

Macam-macam client side scripting atau script client adalah sebagai berikut:

1. HTML

HTML (Hyper Text Markup Language) merupakan script pokok dalam pengembangan aplikasi web, script html ini ibarat sebuah pondasi, tidak akan ada tampilan web jika tidak ada script html di dalamnya.

Script HTML berjalan disisi client dan akan langsung diterjemahkan oleh webbrowser, script HTML ini relatif sangat mudah untuk dipelajari oleh siapapun walaupun anda seorang pemula.

Script HTML di dalamnya terdiri dari kumpulan elemen-elemen HTML atau tag yang membentuk sebuah kerangka tampilan halaman web yang ingin dibuat.

2. CSS

CSS (Cascading Style sheet), ini merupakan script client yang berfungsi untuk mendekorasi dan mengatur tata letak halaman web.

CSS akan mendekorasi (mendesain) setiap elemen HTML sekaligus juga mengatur tata letaknya sehingga tampilan web sesuai dengan tampilan yang diinginkan.

Java script merupakan script client yaitu script yang dieksekusi atau diproses oleh web browser (mozila, google chrome dll) yang fungsinya untuk menambahkan unsur interaktif pada tampilan halaman web, ada aksi dari pengguna maka ada reaksi itu adalah peranan javascript, seperti misalnya muncul menu ketika sebuah link diklik, button berubah warna ketika mouse di arahkan di atasnya, membuat fitur drag drop pada halaman web dan lain sebagainya.

Java script tergolong cukup sulit untuk dipelajari, namun untungnya hari ini sudah banyak sekali framework-framework / library java script gratis siap pakai yang dapat mempermudah penulisan javascript sehingga siapapun akan lebih mudah memahaminya dan lebih mudah menambahkan unsur-unsur interaktif menggunakan javascript pada halaman web yang dibuatnya.

Script Server (Server Side Scripting)

Script server merupakan sebuah script yang hanya dapat diproses oleh web server, script ini akan diproses oleh web server kemudian diterjemahkan menjadi script cient berupa script HTML, yang akan dikirm ke mesin client sehingga mesin client akan menterjemahkan script client ini menjadi tampilan halaman WEB.

Ada banyak sekali script server diantaranya yang cukup populer adalah:

1. PHP

PHP cukup sulit dipelajari, untuk memahaminya anda harus belajar algoritma terlebih dahulu, tapi untungnya saat ini banyak sekali library PHP atau framework-framework PHP yang siap digunaakan sehingga pembuatan halaman web dengan PHP menjadi lebih mudah.

PHP dapat berjalan pada mesin server yang sudah mengaktifkan web server apache, apache akan memproses script PHP dan menterjemahkannya menjadi script client (HTML) yang akan dikirim ke mesin client untuk ditampilkan oleh web browser. 

PHP sangat populer, bahkan beberapa situs besar seperti facebook dll, menggunakan PHP untuk mengembangkannya. jika anda ingin mempelajari script server saya sangat merekomendasikan mempelajari PHP karena komunitas dan dukungannya sangat besar di seluruh dunia.

Beberapa framework PHP yang cukup populer yang bisa anda pelajari untuk mengembangkan aplikasi web diantaranya:

1. Code-Igniter

2. Laravel

dll.

2. Java Server Page (JSP)

Selain PHP, ada juga java server page yang menggunakan script java untuk mengembangkan aplikasi web, java server page dapat berjalan pada mesin server yang mengaktifkan web server glassfish.

dll.

Struktur dan Contoh Penulisan Client Side Scripting

Client side scripting seperti CSS atau javascript ada dan bisa disipkan pada script HTML, jadi CSS dan javascript bisa digunakan apabila sudah ada struktur HTMLnya.

CSS maupun javascript bisa disisipkan secara langsung pada bagian tag Head elemen HTML atau dibuat secara terpisah.

Cara menyisipkan CSS:

1. Internal CSS:

Internal CSS adalah cara menyisipkan file CSS langsung pada bagian Head dari elemen HTML

Contoh:

<html>

    <head>

        ......

        <style type="text/css">

            .......script CSS disisipkan disini

        <style>

    </head>

    <body>

        ........

    </body>

</html>

2. Ekternal CSS

Ekternal CSS adalah file intruksi CSS yang dibuat pada file terpisah dengan akhiran *.css, file tersebut kemudian dipanggil pada bagian tag head pada struktur HTML.

Contoh:

misal file css dengan nama contoh.css, untuk menggunakan css tersebut pada struktur html, pemanggilannya seperti di bawah ini:

<html>

    <head>

        ......

        <link rel="stylesheet" href="contoh.css">

    </head>

    <body>

        ........

    </body>

</html>

 Cara menyisipkan Javascript