bab 4-rekabentuk antaramuka pengguna bagi aplikasi...

Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web

43

BAB

4REKABENTUK ANTARAMUKA PENGGUNA BAGIAPLIKASI BERASASKAN WEB

4.1 Pengenalan

Secara umumnya rekabentuk keseluruhan aplikasi biasa (standalone) dan

aplikasi berasaskan web adalah berbeza. Aplikasi berasaskan web lebih mirip kepada

aplikasi pelayan/pelanggan dimana ianya melibatkan persekitaran rangkaian (network).

Namun demikian terdapat perbezaan yang ketara antara aplikasi web dan aplikasi

pelayan/pelanggan iaitu:

1. Aplikasi pelayan/pelanggan biasanya beroperasi dalam persekitaran LAN yang

melibatkan penggunaan protokol seperti IPX/SPX, NetBui atau TCP/IP manakala

aplikasi berasaskan web biasanya beroperasi dalam persekitaran WAN yang

menggunakan sepenuhnya protokol TCP/IP (Internet/Intranet) melalui

perkhidmatan HTTP (WWW).

2. Dalam aplikasi pelayan/pelanggan pembangun mungkin terpaksa menulis sendiri

samada aplikasi pelayan atau aplikasi pelanggan atau kedua-duanya sekali yang

mana memerlukan kemahiran dalam bidang pengaturcaraan rangkaian. Untuk

aplikasi berasaskan web pula pembangun tidak perlu melakukan perkara tersebut

kerana aplikasi pelayan/pelangan telah disediakan melalui penggunaan pelayan

web (Apache, Web Site, IIS) dan browser (Netscape atau Internet Explorer). Apa

yang perlu dilakukan hanyalah penyediaan logik bagi aplikasi untuk dilaksanakan

oleh pelayan web (CGI/ASP) serta medium persembahan untuk dipaparkan oleh

browser (dokumen HTML).


44

Rajah di bawah dapat mengambarkan dengan lebih jelas rekabentuk asas serta

perlaksanaan operasi bagi sebuah aplikasi berasaskan web konvensional.

1. Client browser send a request for HTML document to web server

2. Web server try to find and read the document at server directory

3. Web server send the HTML document to the client browser

4. User may click a submit button in the HTML form that make a call to web server

to run CGI program at server directory

5. If CGI program is exist, web server will try to invoke the OS to run it

6. CGI program may make a connection to database application to retrieve data

7. CGI program then pass any data requested by user to the Web server

8. Web server send the data to client browser

Kesemua perkara yang dinyatakan di atas seperti penggunaan persekitaran rangkaian

serta dokumen HTML akan mempengaruhi teknik rekabentuk GUI bagi aplikasi

berasaskan web.


45

4.2 Isu-Isu Dalam Rekabentuk Antaramuka Pengguna Bagi Aplikasi Web.

Masalah utama penyediaan GUI bagi aplikasi berasaskan web ialah komponen

piawai (form) yang disediakan adalah terhad dan tidak bersifat dinamik. Ia akan

menghadkan kebolehan aplikasi untuk memenuhi keperluan pengguna. Masalah ini

dapat diselesaikan melalui penggunaan client script seperti JavaScript atau VB Script.

Client script ini biasanya ditulis dalam bentuk fungsi pada bahagian header di dalam

sesebuah dokumen HTML. Penggunaan client script dapat memberikan lebih kawalan

kepada komponen-komponen GUI (terutamanya form) bagi sesebuah aplikasi

berasaskan web.

Namun, masih terdapat masalah sekiranya aplikasi web yang bakal

dibangunkan memerlukan penggunaan komponen GUI secara lebih intensif.

Contohnya, aplikasi yang berbentuk saintifik seperti visualisasi dan simulasi atau

aplikasi grafik. Adalah mustahil untuk menbangunkan aplikasi-aplikasi tersebut dalam

persekitaran web dengan hanya menggunakan komponen-komponen piawai yang

disediakan dalam dokumen HTML.

Penggunaan Java applet adalah salah satu penyelesaian bagi masalah di atas.

Java applet mempunyai kebolehan untuk menyediakan komponen-komponen GUI

seperti yang terdapat pada aplikasi biasa (standalone). Tetapi perkara yang harus

dipertimbangkan ialah Java applet biasanya bersaiz lebih besar daripada dokumen

HTML dan memerlukan masa yang lebih lama untuk dipindahturunkan ke komputer

pengguna. Selain daripada itu perlaksanaannya pada komputer pengguna juga adalah

dalam persekitaran yang terhad. Sebagai contoh, browser tidak akan membenarkan

applet untuk menulis fail ke dalam cakera keras komputer pengguna.


46

4.3 Dokumen HTML

Dokumen HTML merupakan medium utama bagi persembahan/penyediaan

komponen-konmponen GUI bagi sesebuah aplikasi berasaskan web. Di bawah

merupakan contoh paling ringkas bagi sebuah dokumen HTML.

<html>

<head>

<title>Simple HTML</title>

</head>

<body>

Hello World

</body>

</html>

Secara umumnya dokumen HTML boleh dibahagikan kepada 2 bahagian utama

iaitu bahagian header dan body. Kedua-dua bahagian ini akan diletakan diantara dua

simbol tag (<html>...</html>) untuk menandakan bahawa ianya adalah sebuah

dokumen HTML. Bahagian header akan dimulakan dengan simbol tag <head> dan

diakhiri dengan simbol tag </head>. Begitu juga dengan bahagian body akan dimulai

dengan simbol tag <body> dan diakhiri dengan simbol tag </body>.

Bahagian header biasanya diletakan tajuk bagi dokumen HTML tersebut

contohnya ialah seperti dokumen HTML diatas (<title>Simple HTML</title>).

Bahagian body pula adalah untuk memaparkan teks serta lain-lain objek HTML seperti

hypertext link, form dan image.


47

4.4 Kawalan-kawalan Antaramuka Pengguna Dalam Dokumen HTML

Image

? Tag: <img … … ..>

Contoh:<html><head><title>Laman WebGUI</title></head><body><img src="logo.jpg" height=32 width=32>………..………………….</body></html>

Output:


48

Contoh:

www.jobstreet.com.my

Contoh:

www.hotmail.com


49

Link

? Tag: <a … ..> … ..</a>

? Link can be applied as:

- text to other document

- text to other part of text in the same document

- text to image

- image to, image, other document, other part of text in the same document

- image or text to CGI script

Contoh:

? Two HTML document (document1.html & document2.html) with hypertext link to

each other

document1.html<html>

<head>

<title>document1</title>

</head>

<body>

This is a document 1

<p>Click<a href="document2.html">here</a> to go to document 2</a>

</body>

</html>

document2.html

<html>

<head>

<title>document2</title>

</head>

<body>

This is a document 2

<p>Click<a href="document1.html">here</a> to go to

document 1

</body>

</html>


50

Table

? Tag: <Table … .>… ..</Table>, <TR… >… .</TR>, … .<TD … >… ..</TD>

? Digunakan untuk menyusun teks, grafik atau kawalan-kawalan antaramuka

pengguna lain.

Contoh:<html><head><title>James Bond</title></head><body><table BORDER COLS=2 WIDTH="100%"><tr><td ALIGN=RIGHT WIDTH="100">Name :</td><td>James Bond </td></tr> <tr><td ALIGN=RIGHT>Date of birth:</td><td>07-12-1960</td></tr> <tr><td ALIGN=RIGHT>Occupation:</td><td>British Intelligance Agent</td></tr></table></body></html>

Output:


51

? Setiap table dipecah-pecahkan mengikut baris-demi-baris. Setiap baris pula

dipecahkan secara lajur-demi-lajur.

? Biasanya table-dalam-table digunakan, untuk menghasilkan susun-atur yang lebih

kemas dan teratur serta mudah dikawal. Sub-table diletakkan pada bhg <TD>.

<table BORDER=”0” WIDTH="700"> <tr> <td ALIGN=RIGHT WIDTH="100"> <table width=”100%”> <tr> <td>……….</td> </tr> </table> </td> </tr></table>

Contoh:


52

Form

? HTML menyediakan objek Form untuk mengendalikan interaktiviti dan

mendapatkan input daripada pengguna.

? Secara umumnya, sintaks form adalah seperti berikut::

<form method="POST" name="form_name" action="location _of_ CGI_script” >. . .form object components/controls. . .</form>

Contoh:<FORM enctype="multipart/form-data" action=”http://gmm.fsksm.utm.my/~gui/cgi-bin/upload.cgi” method=”POST”><b>Fail: </b> <input size=40 type="file" name="fail" value=""><br><b>Keterangan:</b><input size=40 type="text" name="keterangan" value=""><br><b>Kategori:</b> <select name="kategori" align=left> <option value="Nota">Nota</option> <option value="Material">Material</option> <option value="Contoh">Contoh</option> <option value="Kerja Kursus">Kerja Kursus</option> <option value="Lain-lain">Lain-lain</option> </select> <br><input type="submit" name="upload" value="Upload"></FORM></TABLE>

Output:

? Single HTML document may contains more than one form object

? Form object components:


53

Kawalan-kawalan Antaramuka Pengguna Dalam Form

? Text Field

Single line textbox

<INPUT NAME="name" TYPE="text" value=”Text Field” SIZE="25">

? Password Field

Single line textbox

<INPUT NAME="password" TYPE="password" SIZE="25">

? Hidden Field

Window browser do not display it as GUI component

<INPUT NAME="current_user" TYPE="hidden" SIZE="25">

? TextArea element

Multiline textbox

<TEXTAREA NAME="address" ROWS="5" COLS="23">

default textarea value

</TEXTAREA>


54

? Combo Box

Only one item selection permitted

<SELECT NAME="creditCardType">

<OPTION SELECTED VALUE="mc">MasterCard

<OPTION VALUE="visa">VISA

<OPTION VALUE="amex">American Express

</SELECT>

? List Box

Multiple item selection permitted

<SELECT NAME="language" MULTIPLE>

<OPTION SELECTED VALUE="c">C

<OPTION VALUE="c++">C++

<OPTION VALUE="java">Java

</SELECT>

? Radio Button

Only one item selection permitted

<INPUT TYPE="RADIO" NAME="creditCard" VALUE="mc" CHECKED>MasterCard

<INPUT TYPE="RADIO" NAME="creditCard" VALUE="visa">VISA

<INPUT TYPE="RADIO" NAME="creditCard" VALUE="amex">American Express


55

? Check Box

Multiple item selection permitted

<INPUT TYPE="CHECKBOX" NAME="chk1" value="c" CHECKED>Chicken

<INPUT TYPE="CHECKBOX" NAME="chk2" value="f" CHECKED>Frog

<INPUT TYPE="CHECKBOX" NAME="chk3" value="s" CHECKED>Snail

? Submit Buttons

Make a call (execute) CGI script defined in form object action attribute

<INPUT NAME="submit" TYPE="submit" VALUE="Submit">

? Buttons

Can’t automatically make a call to CGI script. Any action must base on specific

event handler.

<INPUT NAME="submit" TYPE="button" VALUE="Submit">

? Reset Buttons

Reset value of all other form object components

<INPUT NAME="reset" TYPE="reset" VALUE="Reset">


56

Window and Frame object in HTML documents

? Sometimes it is useful to have more than one document in one browser window

? We can use frame object to display multiple HTML doccument simultaneously

in the same browser window

? It is useful because the ability to provide permanent navigation menu

A simple frame example:

Contoh:

By_Rows.html<html>

<head>

<title>By_Rows</title>

</head>

<frameset rows="20%,*">

<frame src="document1.html" name="top_frame">

<frame src="document2.html" name="bottom_frame">

</frameset>

</html>

Output:


57

Contoh:

By_Columns.html<html>

<head>

<title>By_Columns</title>

</head>

<frameset cols="50%,*">

<frame src="document1.html" name="left_frame">

<frame src="document2.html" name="right_frame">

</frameset>

</html>

Output:


58

More complex example:

header.html<html>

<head>

<title>header</title>

</head>

<body>

<h2>Welcome to ABC Restaurant</h2>

</body>

</html>

menu.html<html>

<head>

<title>menu</title>

</head>

<body>

<h3>Menu</h3>

<ul>

<li><a href="Order_Food.html" target="info">Order Food</a></li>

<li><a href="Order_Drink.html" target="info">Order Drink</a></li>

</ul>

</body>

</html>

info.html<html>

<head>

<title>info</title>

</head>

<body>

Please select menu at the right side.

</body>

</html>


59

? We can arrange all the documents above by using nested frame like below:

Main_Page.html<html><head><title>main_page</title></head><frameset rows="20%,*"> <frame src="header.html" name="header"> <frameset cols="20%, *"> <frame src="menu.html" name="menu"> <frame src="info.html" name="info"> </frameset></frameset></html>

? The hierarchy of frame object will look like this:

Output:

top(Main_Page.html)

header(header.html)

menu(menu.html)

info(info.html)


60

? We can also arrange the nested frame like below:

Main_Page.html<html>

<head>

<title>Main_Page</title>

</head>

<frameset rows="20%,*">

<frame src="header.html" name="header">

<frame src="frame2.html" name="frame2">

</frameset>

</html>

? Additionally we have to write frame2.html as below:

frame2.html<html>

<head>

<title>frame2</title>

</head>

<frameset cols="20%, *">

<frame src="menu.html" name="menu">

<frame src="info.html" name="info">

</frameset>

</html>


61

? The output in browser window still the same but the hierarchy of frame object will

look like this:

Output:

top(Main_Page.html)

header(header.html)

menu(menu.html)

frame2(frame2.html)

info(info.html)


62

4.5 Panduan rekabentuk GUI dalam persekitaran web

Panduan yang terdapat dalam heuristik serta kitar hayat kejuruteraan

kebolehgunaan sememangnya perlu untuk merekabentuk GUI bagi sesebuah aplikasi

berasaskan web. Namun terdapat beberapa perkara tambahan yang perlu

dipertimbangkan, berdasarkan kepada beberapa perkara yang telah dibincangkan

dalam bahagian masalah utama rekabentuk GUI bagi aplikasi web iaitu:

? Komponen piawai yang disediakan oleh objek form dalam dokumen HTML adalah

terhad dari segi bilangan dan kawalan interaksi terhadapnya

? Aplikasi web dilaksanakan dalam persekitaran rangkaian dimana berkemungkinan

masalah bandwidth akan menjadi salah satu isu utama dalam proses pembangunan

aplikasi

Selain daripada dua perkara utama diatas beberapa perkara lain yang harus

dipertimbangkan adalah:

? Aplikasi web biasanya akan melibatkan sistem pelayaran (navigation system)

menggunakan hypertext link object. Penggunaannya memberikan dimensi baru

dalam rekabentuk GUI dan metodologi pembangunan perisian.

? Berbeza dengan aplikasi biasa (standalone) yang mana pembangunannya boleh

dilakukan dalam persekitaran yang bersepadu (IDE), aplikasi web biasanya terdiri

daripada beberapa entiti yang berbeza seperti pelayan web, browser, dokumen

HTML, client script, aturcara CGI / ASP, applet serta aplikasi pangkalan data.

? Setiap jenis browser yang berlainan contohnya Netscape dan Internet Explorer

akan memaparkan setiap komponen di dalam dokumen HTML dengan cara

persembahan yang berbeza.


63

Berdasarkan kepada perkara-perkara diatas, berikut merupakan beberapa panduan

tambahan yang boleh digunakan untuk merekabentuk GUI bagi sesebuah aplikasi

berasaskan web:

1. Seboleh-bolehnya hanya gunakan komponen piawai HTML

Sekiranya sesuatu masalah keperluan pengguna dapat dipenuhi dengan hanya

menggunakan komponen piawai HTML (seperti form HTML) adalah baik untuk

mengekalkannya tanpa perlu kepada penggunaan alternatif lain seperti Java applet.

Jika masalah tersebut tidak dapat diselesaikan barulah penggunaan applet boleh

dipertimbangkan. Jika perlu penggunaan applet adalah secara paling minimum

(mungkin melalui gabungan pengunaan form HTML dan Java applet). Ia adalah

bertujuan untuk mengurangkan saiz fail yang terlibat bagi persembahan GUI (dapat

mengurangkan penggunaan bandwidth). Selain itu pembangunan dan pengubahsuaian

applet sebenarnya adalah proses yang rumit serta memerlukan masa yang agak

panjang.

2. Ringkas serta utamakan kebolehfungsian

Sebarang perubahan bagi aplikasi web memerlukan kos masa dan tenaga yang

tinggi disebabkan entiti komponen aplikasi web yang berbeza. Sebagai contoh

perubahan rekabentuk mungkin akan melibatkan perubahan medium persembahan

GUI (dokumen HTML) dan logik aplikasi (CGI/ASP) secara serentak. Rekabentuk

GUI yang ringkas melalui penggunaan komponen-komponen piawai HTML adalah

mudah untuk diubahsuai sekiranya terdapat sebarang perubahan dalam rekabentuk.

Pembangun seterusnya dapat memberikan tumpuan kepada pembangunan logik serta

kebolehfungsian aplikasi. Peningkatan kualiti visual bagi GUI seperti penggunaan imej

yang menarik hanya boleh dilakukan sekiranya logik serta kebolehfungsian aplikasi

telah dapat memenuhi keperluan pengguna sepenuhnya.


64

3. Penguasaan terhadap bahasa pengaturcaraan client script (JavaScript / VB Script)

Bilangan komponen serta kawalan interaksi yang terhad bagi GUI dalam dokumen

HTML mungkin menyebabkan pembangun menghadapi masalah untuk menyediakan

kawalan aplikasi yang sebaiknya kepada pengguna. Penggunaan dan penguasaan

terhadap bahasa pengaturcaraan berbentuk client script ini penting untuk menambah

kawalan dan kebolehfungsian sesebuah GUI bagi aplikasi web. Sebagai contoh,

JavaScript boleh digunakan untuk menghubungkan applet dengan komponen-

komponen piawai HTML seperti form HTML.

4. Uji rekabentuk GUI dengan kesemua jenis browser dan saiz skrin bagi window

Persekitaran web yang melibatkan ramai pengguna dengan latarbelakang yang berbeza

akan menyebabkan perbezaan terutamanya dari segi jenis browser yang digunakan

serta saiz skrin bagi persekitaran window. Pengujian terhadap GUI yang dihasilkan

haruslah turut mempertimbangkan perkara tersebut. Jika perlu, untuk bahagian-

bahagian yang tertentu dalam aplikasi web, pembangun mungkin terpaksa

menyediakan beberapa set GUI untuk disesuaikan dengan jenis browser dan saiz skrin

window yang berlainan.

5. Kurangkan penggunaan fail imej yang bersaiz besar

Penggunaan imej sememangnya dapat meningkatkan kualiti visual GUI bagi sesebuah

aplikasi web. Namun penggunaannya harus jangan sampai menimbulkan masalah dari

segi bandwidth. Penggunaan format fail termampat seperti *.gif atau *.jpg adalah

sesuai untuk sesebuah aplikasi web. Penggunaan format fail imej tanpa sebarang

proses pemampatan seperti *.bmp adalah tidak digalakan. Pemilihan spesifikasi warna

seperti 16, 256 atau 16 million color juga haruslah dipertimbangkan. Sekiranya

penggunaan spesifikasi warna yang rendah (16 color) masih dapat memaparkan

sesuatu imej dengan menarik maka ianya haruslah dikekalkan (untuk mengecilkan saiz

fail bagi imej).

bab 4-rekabentuk antaramuka pengguna bagi aplikasi...

Documents