REKABENTUK ANTARAMUKA PENGGUNA BAGI APLIKASI BERASASKAN WEB

Size: px

Start display at page:

Download "REKABENTUK ANTARAMUKA PENGGUNA BAGI APLIKASI BERASASKAN WEB"

Cori Sharp
6 years ago
Views:

1 43 BAB 4 REKABENTUK ANTARAMUKA PENGGUNA BAGI APLIKASI 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).

2 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.

3 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.

4 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. <title>simple HTML</title> <body> Hello World </body> 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 (...) untuk menandakan bahawa ianya adalah sebuah dokumen HTML. Bahagian header akan dimulakan dengan simbol tag dan diakhiri dengan simbol tag. 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.

5 Kawalan-kawalan Antaramuka Pengguna Dalam Dokumen HTML Image? Tag: <img..> Contoh: <title>laman WebGUI</title> <body> <img src="logo.jpg" height=32 width=32>... </body> Output:

6 48 Contoh: Contoh:

7 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 <title>document1</title> <body> This is a document 1 <p>click<a href="document2.html">here</a> to go to document 2</a> </body> document2.html <title>document2</title> <body> This is a document 2 <p>click<a href="document1.html">here</a> to go to document 1 </body>

8 50 Table? Tag: <Table.>..</Table>, <TR >.</TR>,.<TD >..</TD>? Digunakan untuk menyusun teks, grafik atau kawalan-kawalan antaramuka pengguna lain. Contoh: <title>james Bond</title> <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> </td> </tr> <tr> <td ALIGN=RIGHT>Occupation:</td> <td>british Intelligance Agent</td> </tr> </table> </body> Output:

9 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:

10 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= 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:

11 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>

12 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

13 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">

14 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 <title>by_rows</title> <frameset rows="20%,*"> <frame src="document1.html" name="top_frame"> <frame src="document2.html" name="bottom_frame"> </frameset> Output:

15 57 Contoh: By_Columns.html <title>by_columns</title> <frameset cols="50%,*"> <frame src="document1.html" name="left_frame"> <frame src="document2.html" name="right_frame"> </frameset> Output:

16 58 More complex example: header.html <title>header</title> <body> <h2>welcome to ABC Restaurant</h2> </body> menu.html <title>menu</title> <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> info.html <title>info</title> <body> Please select menu at the right side. </body>

17 59? We can arrange all the documents above by using nested frame like below: Main_Page.html <title>main_page</title> <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>? The hierarchy of frame object will look like this: top (Main_Page.html) header (header.html) menu (menu.html) info (info.html) Output:

18 60? We can also arrange the nested frame like below: Main_Page.html <title>main_page</title> <frameset rows="20%,*"> <frame src="header.html" name="header"> <frame src="frame2.html" name="frame2"> </frameset>? Additionally we have to write frame2.html as below: frame2.html <title>frame2</title> <frameset cols="20%, *"> <frame src="menu.html" name="menu"> <frame src="info.html" name="info"> </frameset>

19 61? The output in browser window still the same but the hierarchy of frame object will look like this: top (Main_Page.html) header (header.html) frame2 (frame2.html) menu (menu.html) info (info.html) Output:

20 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.

21 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.

22 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 komponenkomponen 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 bahagianbahagian 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).

Pengenalan Sistem Maklumat Dalam Pendidikan

Pengenalan Sistem Maklumat Dalam Pendidikan 1 RELATIONSHIP & QUERY DALAM MICROSOFT ACCESS Kandungan Definisi Relationship (Hubungan) Jenis Relationship Membina Relationship Definisi Query dan Fungsi Query