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

SK T5 : BAB 3 : BAHASA PENSKRIPAN KLIEN (isihan, carian, nilai maksimum, minimum, mean dan count, QUEUE)

NOTA

3.1.2 BAHASA PENSKRIPAN KLIEN 
BT ms132

1. Contoh Aturcara Penskripan Klien:

• proses pengisihan
• pencarian
• mencari nilai maksimum dan nilai minimum
• mengira purata serta bilangan unsur dalam senarai

2. Suatu senarai unsur diisih untuk memudahkan carian.

3. ISIHAN ada 2 : Isihan Buih & Isihan Pilih 

4. ISIHAN BUIH:

• membandingkan unsur-unsur bersebelahan dan akan menukar kedudukan (swap)
• Ada 2 proses perbandingan:

• banding adakah unsur pertama > unsur kedua, jika YA.. tukar tempat! (Ini untuk turutan menaik, sebab kita bandingkan no[j]>no[j+1].. dan tukar kedudukan)
• Senarai belum diisih [5,1,4,3,2] akan menjadi [1,2,3,4,5] setelah diisih

• banding adakah unsur pertama < unsur kedua, jika Ya.. tukar tempat! (Ini untuk urutan menurun, sebab kita bandingkan no[j[<no[j+1]?.. dan tukar kedudukan)
• Senarai belum diisih [2,4,1,5,8] akan menjadi [8,5,4,2,1] setelah diisih

• Kebaikan:
• lebih mudah dibina dan lebih mudah difahami
• sesuai untuk bilangan unsur yang sedikit kerana perlu membuat perbandingan satu per satu unsur hingga akhir senarai.
• Contoh untuk menyusun buku-buku di rak yang kecil.

##maaf, terdapat kesilapan dalam nota tulisan pen ini,...document.write(no) hanya wujud sekali sahaja, iaitu setelah keluar terus dari gelung luar..  (BUKANnya pada setiap kali keluar gelung luar!)

##maaf, terdapat kesilapan dalam nota tulisan pen ini,...document.write(no) hanya wujud sekali sahaja, iaitu setelah keluar terus dari gelung luar..  (BUKANnya pada setiap kali keluar gelung luar!)

##maaf, terdapat kesilapan dalam nota tulisan pen ini,...document.write(no) hanya wujud sekali sahaja, iaitu setelah keluar terus dari gelung luar..  (BUKANnya pada setiap kali keluar gelung luar!)

##maaf, terdapat kesilapan dalam nota tulisan pen ini,...document.write(no) hanya wujud sekali sahaja, iaitu setelah keluar terus dari gelung luar..  (BUKANnya pada setiap kali keluar gelung luar!)

##Sepatutnya document.write(no) hanya wujud di akhir sekali, dengan jawapan 1,2,3,4,5..

4. ISIHAN PILIH:

• membandingkan satu  unsur dengan unsur terkecil/terbesar daripada unsur lain dalam senarai, seterusnya tukar kedudukan jika urutan salah.
• Ada 2 proses perbandingan:
• banding unsur sama ada  lebih besar daripada unsur terkecil (Untuk urutan menaik)  
• banding unsur sama ada lebih kecil daripada unsur terbesar (Untuk urutan menurun)
• Kebaikan:
• sesuai untuk isihan  jika bilangan unsur adalah sedikit
• Contoh untuk menyusun murid mengikut ketinggian semasa beratur  dalam kelas.

5. CARIAN PERDUAAN / CARIAN BINARI

• digunakan untuk bilangan data yang banyak dan telah diisih
• Ada 3 proses perbandingan:
• bandingkan adakah unsur di tengah = unsur yang dicari?
• bandingkan adakah unsur di tengah < unsur yang dicari?
• bandingkan adakah unsur di tengah > unsur yang dicari?

6. Mendapatkan nilai Maksimum

• Nilai maksimum ialah nilai terbesar dalam senarai
• Proses kerja:
• beri nilai awal maksimum
• banding nilai dalam senarai dengan nilai awal maksimum
• Dapat nilai maksimum terkini
• Sesuai juga untuk mencari  nilai bangunan tertinggi dan jarak terpanjang.

7. Mendapatkan nilai Minimum

• Nilai minimum ialah nilai terkecil dalam senarai
• Proses kerja:
• beri nilai awal minimum
• banding nilai dalam senarai dengan nilai awal minimum
• Dapat nilai minimum terkini
• Sesuai juga untuk mencari  nilai kotak paling ringan dan sungai terpendek

8. Mendapatkan nilai Mean @ purata

• Mean ialah purata nilai dalam senarai
• Proses kerja:
• jumlahkan nilai-nilai dalam senarai
• dapatkan bilangan nilai dalam senarai
• Nilai mean dikira dengan membahagikan jumlah dengan bilangan (Mean = jumlah unsur/bilangan unsur)

9. Mendapatkan nilai Count

• Count mengira bilangan nilai dalam senarai
• Proses kerja:
• gunakan satu perwakilan sebagai pembilang dan beri nilai awal pembilang = 1
• count dikira dengan menambah  pembilang dengan 1 bagi setiap nilai yang dirujuk (pembilang = pembilang +1)
• memaparkan nilai akhir pembilang, iaitu nilai count

10. Pengumpukan nilai dalam struktur giliran(Queue)

• Queue ialah struktur data linear, iaitu pengumpukkan nilai dalam ruang ingatan secara teratur.
• Queue boleh membuang nilai lama, iaitu nilai terawal yang dimasukkan. Kaedah ini dipanggil FIFO (First In, First Out)
• Ada 2 operasi queue:
• enqueue - memasukkan data ke dalam queue
• dequeue - membuang data lama dalam queue
• Operasi queue menggunakan fungsi:
• push() - memasukkan nilai, dari arah belakang ke dalam queue
• shift() - mengeluarkan nilai terawal yang dimasukkan (dikeluarkan melalui depan,sebab dah lama masuk melalui belakang, dan dah tergerak ke depan...)
• unshift() - memasukkan nilai dari arah hadapan ke dalam queue
• pop() - mengeluarkan nilai terawal yang dimasukkan(dikeluarkan melalui belakang sekali, sebab dah lama masuk melalui depan, dan dah tergerak ke belakang...)
• Kebaikan fungsi-fungsi push(), shift(), unshift() dan pop()
• sangat mudah digunakan kerana hanya perlu panggil sahaja fungsi-fungsi tersebut
• Kekangan:
• fungsi-fungsi tidak sesuai digunakan jika saiz  queue adalah besar
• nilai-nilai perlu digerakkan kedudukannya setiap kali fungsi shift() dipanggil dan digunakan.

 

ASK T3 : LATIHAN CARIAN DAN ISIHAN

LATIHAN

1. _________ __________ ialah teknik yang mendapatkan item dalam senarai tanpa perlu diisih terlebih dahulu.
2. Teknik ___________ ___________lebih efisien dan menjimatkan masa untuk mencari item dalam senarai yang banyak. Ia melibatkan keputusan dwipilihan.
3. ____________ _____________ digunakan untuk mengisih item dalam senarai yang sedikit.
4. Teknik ___________  _____________ : item-item dalam senarai diasingkan ke dalam bakul terlebih dahulu, kemudian diisih dalam bakul itu dan disusun semula ke dalam senarai.
5. _________________ bertujuan untuk mencari item tertentu dalam senarai.
6. _________________ bertujuan mengisih  atau menyusun item-item dalam senarai mengikut urutan menaik atau menurun.
7. Dalam Carian ____________, nilai carian akan dibandingkan dengan nilai yang berada di tengah-tengah senarai.
8. Isihan ________________ sesuai digunakan pada senarai yang mempunyai bilangan item yang banyak.

ASK T3 : BAB 3 : CARIAN DAN ISIHAN

1. CARIAN - proses mendapatkan satu item tertentu dalam senarai.

2. ISIHAN - proses mengisih atau menyusun item dalam senarai mengikut tertib menaik atau menurun.

3. Carian terbahagi kepada 2 :

    a) Carian Linear

• mudah dan sesuai untuk senarai yang tidak diisih.
• berkesan pada senarai yang mempunyai bilangan item yang sedikit
• Keburukan :- Kurang sesuai digunakan untuk bilangan item yang banyak kerana perlu menyemak semua item dalam senarai dari mula satu persatu.
• Cara kerja:

1. Carian dimulai dengan membandingkan item carian dengan item pertama dalam senarai. Adakah item carian sama dengan item pertama? Jika Ya, maka carian dijumpai.
2. Jika tidak, carian diteruskan ke item kedua dan ketiga dan seterusnya.
3. Jika  di akhir senarai, item carian masih tidak sama dengan item dalam senarai, maka Carian tamat tanpa hasil.

    b) Carian Binari

• diguna pada senarai yang sudah diisih
• sesuai untuk senarai yang mempunyai bilangan item yang banyak.
• lebih menjimatkan masa kerana tidak perlu menyemak semua item dalam senarai.
• Kebaikan :- Lebih efisien untuk bilangan item yang banyak.
• Cara kerja:

1. Teknik ini mencari nilai item tengah dalam senarai... [formula = (indeks awal + indeks akhir)/2] Item carian akan dibandingkan dengan item tengah itu... 
2. Semakan dilakukan sama ada item carian sama dengan item tengah itu? Jika sama; Carian dijumpai
3. Jika item carian lebih besar dari item tengah, maka item tengah dan semua item yang kurang daripadanya akan dibuang. 
4. Jika item carian lebih kecil dari item tengah, maka item tengah dan semua item yang lebih besar akan dibuang.
5. Ulang Proses 2 hingga 4 sehingga item dijumpai.

4. Isihan terbahagi kepada 2:

    a) Isihan Buih

• diguna pada senarai yang mempunyai item yang sedikit.
• Cara kerja:

1. Bandingkan item pertama dan item kedua dalam senarai
2. Jika kedua-dua item tidak mengikut urutan, tukar kedudukan!
3. Ulang langkah 1 hingga 2 untuk item kedua dan ketiga, ketiga  dan keempat dan seterusnya hingga akhir senarai.
4. Semak senarai untuk memastikan semua item berada dalam urutan kedudukan yang betul.
5. Ulang proses 1 hingga 5 sehingga semua item dalam senarai diisih ukit urutan.

     b) Isihan Baldi

• sesuai untuk senarai yang mempunyai bilangan item yang banyak.
• Cara kerja:

1. Asingkan item-item dalam senarai mengikut urutan tertentu dan masukkan ke dalam beberapa baldi
2. Seterusnya item dalam baldi diisih dan disusun semula dalam  bentuk senarai.
3. *Bilangan baldi yang diperlukan bergantung kepada pengaturcara dan bilangan item dalam senarai yang perlu diisih.

Perbezaan dan Persamaan Carian dan Isihan:

CARIAN (SEARCH)	ISIHAN (SORT)
mencari item tertentu dalam senarai	mengisih atau menyusun item-item dalam senarai mengikut urutan menaik atau menurun
memerlukan suatu senarai memerlukan algoritma Carian Linear dan Isihan Buih = sesuai untuk senarai yang bilangan itemnya sedikit Carian Binari dan Isihan Baldi = sesuai untuk senarai yang bilangan itemnya banyak

ASK T3 : BAB 4 : PELBAGAI CONTOH PROCEDURE LIRIK "SEJAHTERA MALAYSIA", "SING A SONG OF SIXPENCE"

Contoh aturcara 1:

Rujuk lirik di sini : https://www.youtube.com/watch?v=HOtZKnhOSqg

Output:

Contoh 2:

Rujuk lagu di sini..... https://www.youtube.com/watch?v=Wu4D3IuQDO4

Output:

Copy dan paste kod aturcara ini ke dalam IDLE Python untuk belajar tentang Procedure:

#LAGU SING A SONG OF SIXPENCE

def start():
    print("Sing a song of sixpence,")
    print("A pocket full of rye,")
    print("Four and twenty blackbirds")
    print("Baked in a pie.")
    print()

def pie():
    print("When the pie was opened")
    print("The birds began to sing—")
    print("Wasn't that a dainty dish")
    print("To set before the king?")
    print()

#Aturcara Utama
print("NURSERY RHYME : SING A SONG OF SIXPENCE")
print("Songwriters: Chris Harriott\n")
print("3 KRK!! Jom nyanyi sama-sama\n\n")

start()
pie()

print("The king was in the counting-house")
print("Counting out his money,")
print("The queen was in the parlor")
print("Eating bread and honey,")
print()

print("The maid was in the garden")
print("Hanging out the clothes.")
print("Along came a blackbird")
print("And snipped off her nose.")
print()

start()
pie()

#LAGU HAPPY BIRTHDAY

def lagu(nama):
    print("Happy Birthday to you!")
    print("Happy Birthday to you!")
    print("Happy Birthday, dear " + nama + ".")
    print("Happy Birthday to you!")

def nyanyi():
    pengguna = input("Masukkan nama pengguna : ")
    lagu(pengguna)

nyanyi()

ASK T2 : LATIHAN SUMATIF BAB 3 : KOD ARAHAN

LATIHAN SUMATIF BAB 3

ASK T1 : BAB 2 : SUBTOPIK 2.2 AUDIO DIGITAL (LATIHAN FORMATIF)

BAB 2: PERWAKILAN DATA

LATIHAN
2.2 Audio Digital

I Am Kalam Full Movie | Hindi Motivational Movie | Gulshan Grover Movie ...

A very Inspirational Must-Watch-Movie..
Go to youtube to watch...

I Am Kalam Full Movie | Hindi Motivational Movie | Gulshan Grover Movie ... Hindi Motivational Movie I Am Kalam (2011) Starring: Gulshan Grover, Harsh Mayar, Hussan Saad, Beatrice Ordeix, Pitobash. Director : Nila Madhab Panda, Producer: Shantanu Mishra

ASK T2 ;ATURCARA PYTHON

Gelung FOR untuk menjumlahkan semua nombor dalam senarai yang diberi.

Gelung WHILE untuk menjumlahkan dari 1 sehingga nombor yang dimasukkan pengguna.

ASK T3 : BAB 4 : LATIHAN PENGENALAN PANGKALAN DATA

LATIHAN

BAB 4: KOD ARAHAN

4.1.1à 4.1.6  Pangkalan Data

12. Tuliskan pertanyaan SQL untuk menghasilkan output seperti di bawah:

a) 

b) 

c) 

d) 

e)