M18: NOTA PdPR 28 Mei 2021 (KHAMIS): BAHASA PENSKRIPAN PELAYAN

3.2.1 Pembangunan Laman Web dengan Menggunakan Bahasa Penskripan Pelayan 
(MS 224)

Keperluan Laman Web Antara Pengguna dengan Sistem Dalam Rangkaian 

Sebelum laman web dibina, seseorang pereka web harus merancang terlebih dahulu bagaimanakah sesuatu laman web tersebut dipersembahkan. Hal ini dikatakan demikian kerana setiap laman web yang dibangunkan itu akan menjadi perantara yang akan menentukan cara pengguna akan berinteraksi dengan sistem yang digunakan. 


Setiap laman web akan mengehendaki pengguna memasukkan input yang berbeza bagi membenarkan sistem memaparkan maklumat mengikut keperluan pengguna tersebut. 

Cuba anda bayangkan tanpa laman web, bagaimanakah anda akan berinteraksi dengan sistem perbankan, enjin carian ataupun media sosial? Mampukah anda berinteraksi dengan sistem?

Oleh sebab itu, sebelum sesuatu laman web dibina, kita perlu terlebih dahulu mengenal pasti, apakah tujuan laman web itu dibina. Perkara ini dikatakan demikian kerana paparan dalam laman web akan menentukan cara seseorang pengguna itu dapat memanipulasikan maklumat dalam sesebuah sistem dan menentukan sejauh manakah capaian pengguna terhadap sistem tersebut.

Klien ialah apa-apa mesin atau proses yang memohon servis yang spesifik daripada pelayan

Pelayan ialah mesin atau proses yang memberikan servis kepada klien. Proses klien dan pelayan ini boleh berlaku dalam satu sistem komputer yang sama atau dalam sistem komputer yang berbeza yang dihubungkan melalui rangkaian. 

Dalam persekitaran Internet dan rangkaian, pelayar web akan bertindak sebagai klien web manakala pelayan web pula adalah sebagai pelayan. 

Bahasa Penskripan Pelayan 

Bahasa penskripan pelayan ialah program yang dilaksanakan di sebelah pelayan atau pelayan web yang melatari pembangunan web. 

Salah satu fungsi bahasa penskripan pelayan ialah mengakses data daripada pangkalan data. Sekiranya pengguna memohon suatu laman web dipaparkan dengan menggunakan pelayar, permintaan tersebut akan dihantar kepada pelayan web. Kemudian, pelayan web akan mencari laman web yang dikehendaki dan memindahkan laman web tersebut kepada pelayar untuk diterjemahkan dan dipaparkan kepada pengguna. 


Antara sebab utama penskripan pelayan diperlukan ialah bahasa penskripan pelayan tidak bergantung pada pelayar. Jika dibandingkan dengan penskripan klien yang bergantung pada pelayar, isu akan timbul apabila penskripan klien yang digunakan tidak disokong oleh pelayar. 

Keadaan ini berbeza dengan penskripan pelayan yang kesemua pemprosesan dilakukan di sebelah pelayan, maka isu pemprosesan disekat oleh pelayar tidak akan timbul. Namun begitu, kadangkala bahasa penskripan pelayan tidak begitu selamat memandangkan penskripan pelayan boleh digunakan untuk menggodam laman web. 

Oleh sebab itu, laman web yang bagus perlu menggunakan kedua-dua jenis bahasa penskripan klien dan pelayan bagi menyokong proses pengesahan di sebelah klien dan juga disebelah pelayan untuk tujuan keselamatan laman web tersebut. 

Memandangkan penskripan pelayan berupaya untuk memberikan respons mengikut kehendak pengguna, bahasa penskripan pelayan digunakan bagi aplikasi seperti yang berikut: 

• Papan pesanan 
• Buku pelawat blog 

Terdapat banyak pilihan bahasa penskripan pelayan yang boleh digunakan oleh laman web bagi menyokong interaksi dengan pelayan web untuk memanipulasikan data. Antara bahasa penskripan pelayan adalah seperti yang berikut: 

• ASP 
• JavaScript 
• PHP 
• Python 
• Perl

Untuk kefahaman lebih jelas sila tonton video melalui pautan teks di bawah

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

Untuk kefahaman lebih jelas tentang konsep klien-pelayan (client-server) sila tonton video melalui pautan teks di bawah

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

LINK VIDEO BUBBLE SORT DAN SELECTION SORT

 SIMULASI BUBBLE SORT

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

SIMULASI SELECTION SORT

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

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

M17: LAMAN WEB INTERAKTIF: AKTIVITI MEMBINA NOTA DAN LATIHAN 1 PdPR 20 MEI 2021

3.3.1 Prinsip Reka Bentuk Laman Web (MS 274)

Prinsip merujuk asas yang menjadi dasar kepada perkembangan atau pembinaan sesuatu benda. 

Reka bentuk pula merujuk susunan atau struktur dalam proses pembinaan sesuatu perkara. 

Oleh sebab itu, mereka bentuk laman web boleh diibaratkan seperti proses merancang, membina dan mengubah suai serta menata hias kediaman rumah. Setiap ruang yang dibina dalam kediaman memainkan fungsi yang berlainan. Lantaran itu, struktur pembinaan dan corak tatahias bagi setiap ruang juga akan berbeza mengikut kesesuaian fungsinya. Konsep, saiz dan kedudukan setiap ruang kediaman seperti ruang tamu, dapur dan juga bilik tidur akan ditentukan terlebih dahulu semasa fasa perancangan mengikut jenis kediaman yang dibina seperti banglo, kondominum atau rumah teres.


Dalam proses mereka bentuk laman web, terdapat beberapa prinsip atau elemen reka bentuk laman web yang perlu diberi perhatian agar laman web yang dibina tidak kelihatan pelik atau memberikan pengalaman yang tidak menyenangkan kepada pengguna. 

Hal ini dikatakan demikian  kerana elemen-elemen tersebut mampu memberikan pengalaman yang berbeza dan mempengaruhi kepuasan pengguna untuk melayari laman web yang dibina.


Antara prinsip asas yang harus diambil kira semasa mereka bentuk laman web adalah seperti yang ditunjukkan dalam Rajah 3.3.2.

Jenis Persekitaran Web yang Dibina 

Sebelum sesuatu laman web dibina, kita harus memahami persekitaran laman web tersebut. Persekitaran laman web ini merangkumi beberapa faktor teknikal seperti yang berikut: 

• Kesesuaian penggunaan pelbagai jenis pelayar 
• Kelajuan capaian Internet 
• Keperluan perisian sokongan untuk paparan 
• Kepelbagaian sistem komputer dan peranti mudah alih yang digunakan oleh pengguna 
• Kepelbagaian saiz paparan monitor yang digunakan 

Penekanan Maklumat dalam Web 

Prinsip penekanan merujuk maklumat atau kandungan yang ingin diberikan perhatian dalam laman web tersebut. 

Dalam setiap laman web yang dibina, pereka web perlu menentukan maklumat atau kandungan penting yang harus diberi penekanan dan teknik atau kaedah yang sesuai yang perlu digunakan untuk menarik perhatian pengguna laman web. 

Terdapat beberapa cara yang boleh digunakan untuk menarik perhatian pengguna. Antara caranya adalah seperti yang berikut: 

• Penggunaan kesan khas seperti drop shadow, tekstur atau cahaya dan bentuk. 
• Penggunaan ruang putih untuk menjadikan elemen-elemen kelihatan lebih terserlah 
• Penggunaan fungsi bold, italic, warna yang berbeza dan border.

Perbezaan Elemen dalam Web

Konsep perbezaan digunakan untuk menghasilkan tarikan visual terhadap suatu elemen yang ingin ditekankan dalam laman web. Semakin besar perbezaan suatu elemen yang ingin ditonjolkan berbanding dengan elemen lain di persekitarannya, maka elemen tersebut akan kelihatan lebih berbeza. 

Penggunaan konsep perbezaan ini juga mampu menghasilkan sistem navigasi yang lebih mudah dan dapat memandu pelawat untuk mencapai maklumat yang dikehendaki atau mengarah mereka ke tempat yang  ingin ditujui. Antara kaedah perbezaan yang boleh digunakan adalah yang seperti berikut:

• Penggunaan label dan pautan yang berbeza. 
• Penggunaan border, warna yang berbeza dan juga kesan khas. 
• Penggunaan ruang putih, teks terbalik, teks berhuruf condong (italic) dan saiz teks yang berbeza. 
• Penggunaan prinsip perbezaan warna dalam memberikelainan
• pada butang login 

Typography 

Prinsip typography merujuk penyusunan teks yang dipaparkan dalam laman web. Penyusunan teks yang baik memudahkan pemahaman dalam proses pembacaan dan juga meningkatkan elemen mesra pengguna dalam laman web. 

Penggunaan grafik dan teks yang saling melengkapi mampu membentuk imej dalam minda pembaca. Selain itu, typography juga mampu menyampaikan mesej atau idea pereka web yang mungkin bersifat profesional kepada pembacanya dengan lebih baik. 

Terdapat beberapa corak penyusunan teks bagi laman web. Corak penyusunan ini boleh digunakan mengikut gaya pembacaan pengguna. Corak penyusunan teks lain yang mengikut gaya pembacaan pengguna adalah seperti yang berikut: 

• Corak paparan berasaskan kertas 
• Corak paparan secara Z-shaped 
• Corak paparan secara F-shaped

Warna dan Grafik 

Penggunaan warna dan grafik dalam laman web mampu menonjolkan imej dan identiti sesebuah laman web. Penggunaan warna yang bijak mampu menarik perhatian pelawat serta meningkatkan kebolehbacaan mereka. 

Penggunaan warna latar belakang dan teks yang senada mampu memberikan pengalaman yang kurang menyenangkan dalam kalangan pengguna. Hal ini dikatakan demikian kerana keadaan ini menyukarkan proses pembacaan mereka. 

Penggunaan warna yang agak berwarnawarni juga mampu membuatkan pembaca berasa serabut dan kehilangan fokus.

Navigasi 

Navigasi merujuk struktur laman web yang akan memudahkan seseorang pengguna melayarinya. Konsep navigasi web ini memberikan pengalaman kepada pelawat laman web untuk mengemudi laman web tersebut mengikut kecekapan masing-masing. 

Navigasi web yang bagus seharusnya memberikan petunjuk kepada pelawat laman web tentang kedudukan atau lokasi semasa pengguna. 

Pereka web biasanya akan menggunakan pelbagai teknik navigasi dalam laman web mereka mengikut kesesuaian. Antaranya adalah seperti yang berikut: 

• Bar navigasi
• Breadcrumbs
• Site map 
• Menu Drop-down
• Pautan menggunakan grafik

Keseimbangan Visual 

Keseimbangan visual pula merujuk gabungan elemen visual seperti garisan, imej, teks, bentuk, dan warna dalam laman web. Bagi menentukan corak gabungan semua elemen visual tersebut, pereka web juga perlu peka tentang pengguna sasaran laman web tersebut. 

Sebagai contoh, sekiranya laman web tersebut dibina untuk golongan kanak-kanak, elemen teks yang banyak perlu dielakkan kerana kanak-kanak tidak cenderung untuk membaca. Sebaliknya penggunaan unsur grafik dan imej mesti dilebihkan kerana elemen tersebut mampu menarik minat mereka untuk terus melayari laman web

Aktiviti Nota

Salin semula peta i-think dalam rajah 3.3.2 di atas dan kembangkan setiap prinsip dengan memberikan contoh 

Latihan (Sila klik)

M17: PRINSIP ASAS REKA BENTUK LAMAN WEB: LATIHAN 2 PdPR 20 MEI 2021

 Sila klik untuk latihan tersebut

PdPR SK T5 6 MEI 2021: SOALAN OBJEKTIF PENGATURCARAAN HTML

 

1. HTML Merupakan singkatan dari
a. Hyper Link Markup Leaguage
b. Hyper Text Markup Laguage
c. Hyper Tool Markup Laguage
d. Hyper Test Markup Laguage

2. Berikut ini yang menjadi standard Web
a. ECMAN (uropean Computer Manufacturers Association)
b. W3C (World Wide Web Consortium)
c. Google
d. PSR (PHP Standars Recommendation)

3. Berikut ini tag untuk membuat heading, kecuali
a. <h4>
b. <h5>
c. <h6>
d. <h7>

4. Untuk membuat baris baru menggunakan tag ?
a. <br>
b. <newline>
c. <break>
d. <hr>

5. Tag untuk membuat garis datar (horizontal)?
a. <br>
b. <newline>
c. <break>
d. <hr>

6. Sintak yang benar untuk menambah warna latar belakang?
a. <body =’background:green’>
b. <body style=’background-color:green’>
c. <body color=’green’>
d. <background>green</background>

7. Tag untuk membuat huruf tebal adalah
a. <bold>
b. <b>
c. <i>
d. <important>

8. Karakter yang digunakan untuk tag akhir ?
a. <>
b. /
c. *
d. \

9. Untuk membuat tabel menggunakan tag ?
a. <table>
b. <tables>
c. <tb>
d. <tab>

10. Saat membuat tabel tag <tr> berfungsi untuk ?
a. Membuat baris
b. Membuat kolom
c. Membuat header tabel
d. membuat body tabel

11. Tag <ol> digunakan untuk membuat list ?
a. List terurut
b. List Tidak terurut
c. List Tunggal
d. List Jamak

12. Terdapat 2 jenis list di HTML yaitu order list dan unordered list!
a. Benar
b. Salah
c. Jawaban a dan b benar
d. Semua jawaban salah

13. Untuk membuat checkbox menggunakan sintak?
a. <checkbox>
b. <input type=’checkbox’>
c. <input type=’check’>
d. <input type=’check_box’>

14. Untuk membuat radio button mengunakan sintak?
a. <radio>
b. <input type=’radio_button’>
c. <input type=radio’>
d. <radio_button>

15. Untuk membuat drop-down list menggunakan tag?
a. <input type=’drop-down’>
b. <drop-down>
c. <select>
d. <list>

16. Text area dapat dibuat menggunakan tag?
a. <textarea>
b. <input type=’textarea’>
c. <text>
d. Semua jawaban salah

17. Sintak yang benar untuk memasukan gambar adalah
a. <img href=’https://kelasprogrammer.com’ alt=’Kelas Programmer’>
b. <img src=’kelasprogrammer.png’ alt=’Kelas Programmer’>
c. <image src=’kelasprogrammer.jpg’ alt=’Kelas Programmer’>
d. <img type=’kelasprogrammer.gif’>

18. Atribut alt pada tag <img> berfungsi untuk?
a. Menampilkan alternatif teks ketika gambar tidak bisa ditampilkan
b. Membuat gambar dengan animasi
c. Mengatur ukuran gambar
d. Mengatur jarak gambar dengan elemen lain

19. Untuk membuat komentar di HTML adalah
a. dimulai dengan <!– diakhiri dengan –>
b. dimulai dengan <? diakhiri dengan ?>
c. dimulai dengan // diakhiri dengan *//
d. dimulai dengan # diakhiri dengan #

20. Untuk mendefinisikan judul menggunakan tag?
a. <head>
b. <body>
c. <footer>
d. <title>

21. Elemen HTML untuk memutar video adalah
a. <video>
b. <input type=’video’>
c. <media>
d. <canvas>

22. Elemen HTML untuk memutar suara adalah
a. <audio>
b. <sound>
c. <video>
d. <mp3>

23. Di dalam HTML onfocus merupakan bagian dari atribut?
a. atribut style
b. atribut event
c. atribut media
d. atribut html

24. Elemen <canvas> digunakan untuk?
a. Manipulasi data
b. Menampilkan jenis huruf
c. Membuat grafis
d. Memampilkan gambar dinamis

25. Atribut yang digunakan pada field untuk membuat aturan field tersebut harus diisi adalah atribut
a. validate
b. required
c. name
d. value

26. Untuk membuat navigasi link menggunakan tag?
a. <nav>
b. <navigation>
c. <navbar>
d. <panel>

27. Untuk membuat paragraf menggunakan tag?
a. <p>
b. <paragraf>
c. <i>
d. <italic>

28. Atribut utuk mengatur panjang dan lebar suatu elemen adalah
a. width dan height
b. width dan value
c. value dan height
d. style dan value

29. Didalam penggunaan tabel terdapat atribut colspan yang berfungsi untuk
a. Menggabungkan beberapa cell baris
b. Menggabungkan beberapa cell kolom
c. Memisahkan beberapa cell baris
d. Memisahkan beberapa cell kolom

30. Dalam atribut style properti yang digunakan untuk menentukan jenis huruf adalah
a. font-size
b. font-family
c. text-align
d. background-color

31. Untuk memerikan nilai pada suatu elemen HTML menggunakan atribut?
a. name
b. size
c. value
d. placeholder

32. Berikut ini atribut yang digunakan dalam form kecuali
a. method
b. name
c. action
d. placeholder

33. Dalam tag <form>terdapat dua jenis method yaitu?
a. GET dan HTTP
B. GET dan POST
c. POST dan SELF
D. HTTP dan SELF

34. CSS dapat ditambahkan dalam elemen HTML degan 3 cara kecuali
a. Inline
b. Outline
c. Internal
d. External

35. Untuk membuat tombol (button) menggunakan tag?
a. <button>
b. <input type=’button’>
c. Jawaban a dan b benar
d. Semua jawaban salah

36. Penulisan DOCTYPE yang benar dalaman HTML 5 adalah
a. <html>
b. <DOCTYPE>
c. <!DOCTYPE HTML>
d. <!DOCTYPE HTML5>

37. Grafik yang di buat dengan SGV menggunakan format?
a. HTML
b. XML
c. CSS
d. JS

38. Untuk memasukan kode javascript dalam dokumen HTML menggunakan tag?
a. <script>
b. <javascript>
c. <js>
d. Jawaban a, b dan c benar semuanya

39. Setiap elemen HTML hanya dapat memiliki satu atribut ID tunggal (unik)!
a. benar
b. salah
c. jawaban a dan b benar
d. jawaban a dan b salah

40. HTML merupakan bahasa markup yang pemprosesannya berada di sisi?
a. client side
b. server side
c. local side
d. eksternal side