SK T5 : BAB 3 : KEPERLUAN BAHASA PENSKRIPAN KLIEN DALAM LAMAN WEB

NOTA

3.1.1 KEPERLUAN BAHASA PENSKRIPAN KLIEN DALAM LAMAN WEB
BT ms124


HTML

1. HTML (Hypertext Markup Language)  - digunakan untuk membangunkan laman web. (@ menerbitkan dokumen dalam talian)
2. Dokumen HTML ialah konsep bagaimana elemen teks, audio, video serta grafik disusun supaya mudah dibaca dan difahami oleh pelayar laman web.(@ konsep bagaimana dokumen dipaparkan pada laman web)
3. Dalam HTML, kod HTML atau elemen HTML digunakan. 
4. Elemen terdiri daripada 2 tag yang kebiasaannya berpasangan, iaitu start tag dan close tag. Di tengah-tengah antara start tag dan close tag ialah kandungan yang akan dipaparkan.
5. Semua elemen HTML mempunyai atribut. 
6. Atribut ialah maklumat tambahan bagi setiap elemen HTML dan biasanya ditempatkan di start tag. Terdapat 2 jenis atribut:

• Atribut nama  : contohnya a href
• Atribut nilai : contohnya www.google.com

CSS

1. CSS (Cascading Style Sheet) ialah bahasa pengaturcaraan yang merupakan tambahan kepada HTML.
2. CSS membenarkan perubahan kepada gaya / style sesuatu lama web dan menerangkan persembahan sesuatu dokumen HTML

Javascript

1. Interaksi merujuk permohonan untuk mendapatkan sesuatu maklumat dari laman web.

2. Bahasa pengaturcaraan akan memproses permohonan (request) klien melalui laman web.

3. Bahasa yang digunakan dikenali sebagai bahasa penskripan. Antara bahasa penskripan ialah:

• Javascript
• PHP
• ASP

4. Javascript menyediakan keupayaan memproses sesuatu tugas berdasarkan permohonan klien.
5. Kod Javascript akan ditulis bersama-sama kod HTML.
6. Kod Javascript ditulis antara tag <script> dengan </script>

7. Ada 2 cara kod Javascript ditulis dalam HTML:

• Explicit embedding
• Implicit embedding

Konsep Aplikasi Pelanggan/Pelayan (Client/Server)

1. Rekabentuk laman web dibangunkan berteraskan pelanggan/pelayan.
2. Pelanggan  (Client) = pelayar/browser
3. Aplikasi pelayan (Server) berada di mana-mana di seluruh dunia dan berfungsi untuk memproses permintaan daripada klien @ menghantar laman web yang diminta oleh klien.
4. Pangkalan data digunakan untuk menyimpan data.

Bahasa Penskripan

1. Terdapat 2 jenis laman web:

• laman web statik -  laman web yang direka menggunakan HTML sahaja.
• laman web dinamik - laman web yang direka menggunakan penskripkan pelayan seperti PHP dan ASP. Kebaikannya : pemilik laman web boleh kemaskini kandungan laman web dengan mudah.

Perbezaan Laman Web Statik vs Laman Web Dinamik:

Laman Web Statik	Laman Web Dinamik
Dibina menggunakan HTML sahaja	Dibina menggunakan penskripkan pelayan seperti ASP dan PHP
Kandungan paparan mengikut tag HTML yang digunakan	Kandungan paparan boleh dipanggil dari pangkalan data atau mengikut tindakan pengguna
Contohnya :  laman web yang memaparkan latar belakang organisasi	Contohnya : Aktiviti akan datang yang dipaparkan di laman utama yang berubah mengikut tarikh kalendar

2. Penskripan dilaksanakan berdasarkan interaksi pengguna dengan laman web
3. Penskripan ditempatkan di 2 bahagian:

• Penskripan Klien (di sebelah pelanggan - bekerja di bahagian hadapan pembangunan web dan dilaksanakan oleh pelayar web)
• Penskripan Pelayan (di sebelah pelayan - bekerja di bahagian belakang pembangunan web dan dilaksanakan oleh pelayan web)

4. Proses kerja:

1. Pengguna taip alamat URL di browser (klien)
2. Browser/Klien hantar URL ke server untuk diproses
3. Server memproses permintaan Klien menggunakan bahasa  penskripan pelayan
4. Server menghantar laman web kepada klien **langkah 3 dan 4 berlaku di belakang laman web, dan dilaksanakan oleh pelayan web(server)
5. Klien/Pelayar terjemah dan laksanakan HTML termasuk penskripan klien  untuk dipaparkan kepada pengguna. **langkah 5 bekerja di bahagian depan dan dilaksanakan oleh pelayar web(klien) - dipapar pada skrin pengguna

Untuk bacaan lanjut, rujuk : https://www.computerhope.com/jargon/s/server-side-scripting.htm

Perbezaan Bahasa Penskripan Klien vs Bahasa Penskripan Pelayan

Bahasa Penskripan Klien	Bahasa Penskripan Pelayan
Dilaksanakan dibahagian klien atau web browser / pelayar	Dilaksanakan di bahagian back end server /pelayan web
Contoh HTML, CSS, Javascript	Contoh PHP, Python, Java, Ruby, ASP
Keselamatan data kurang terjamin	Keselamatan data lebih terjamin.

Bahasa Penskripan Klien (BPK)

1. Bahasa Penskripan Klien - program komputer dalam web yang dilaksanakan oleh komputer klien.
2. Program ini memanipulasi dan memapar kandungan laman web yang telah dimuat turun dalam komputer klien.
3. BPK memberi keupayaan laman web untuk menukar @ beri respon kepada kandungan web mengikut input yang dberikan oleh pengguna dengan lebih pantas.
4. Contoh  kegunaan BPK:

• proses pengesahan input yang dimasukkan oleh pengguna apabila mengisi borang dalam talian
• melaksanakan tugas-tugas mudah seperti menukar elemen, seperti jenis font, warna latar web yang tidak melibatkan pelayan.
• penggunaan  shopping cart dalam laman web yang menawarkan pembelian secara atas talian. Cth kita ingin menambah atau mengurangkan item belian, maka jumlah kos  akan berubah secara automatik.

      5. Walaubagaimana pun, tugas-tugas yang melibatkan pangkalan data pada bahagian pelayan atau capaian ke atas fail sistem yang terdapat dalam pelayan web ialah contoh tugasan yang tidak mampu dilaksanakan oleh BPK.

Kesimpulannya.........

Kelebihan Bahasa Penskripan Klien:

1. menjadikan laman web lebih interaktif (web more interactive)
2. meningkatkan kebolehgunaan web bagi browser yang support banyak jenis BPK. (web more practical)
3. Perlaksanaan tugas jadi lebih pantas, kerana tidak melibatkan komputer server. (more faster)
4. Pembangun laman web berupaya menentukan reka bentuk dan ciri-ciri web. (web designer more capable to create awesome web  with added value)

Pautan yang bagus untuk pemahaman :

https://www.youtube.com/watch?v=eh2D7ZePkss

https://www.youtube.com/watch?v=UejPmosrdCs

https://www.youtube.com/watch?v=BlczPOPpS3M