Bab 4-Rekabentuk Antaramuka Pengguna Bagi Aplikasi...
Transcript of 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).
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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.
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna 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.
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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.
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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:
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
48
Contoh:
www.jobstreet.com.my
Contoh:
www.hotmail.com
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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>
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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:
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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:
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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:
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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>
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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">
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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:
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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:
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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>
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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)
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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>
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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)
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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.
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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.
Antaramuka Pengguna Bergrafik (DCG2103)-Bab 4, Rekabentuk Antaramuka Pengguna Bagi Aplikasi Berasaskan Web
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).