1

TAJUK PROJEK

WEB BROWSER (PELAYAR WEB)

PENSYARAH

NIK ISROZAIDI NIK

AHLI KUMPULAN

MIOR MOHD SHUKRI BIN TAN ZALILAH

sx132576csrf04

Web Designer/ WebMaster

MOHD FADLI BIN JAAFAR

sx132582csrf04

Software engineer/ Test engineer

AHMAD RAZIF ABDUL RAZAK

sx130231csrf04

Project Manager/ software engineer

AHMAD ADNIN BERAHIM

sx132704csjf04

business analyst/ architect

WEB ADRESS :

www.de-yop.net

2

ISI KANDUNGAN

BAB 1 – PENDAHULUAN 3 - 6

1.1 PENGENALAN KEPADA PROJEK

1.2 LATAR BELAKANG PROJEK

1.3 OBJEKTIF PROJEK

1.4 SASARAN PENGGUNA

BAB 2 – KAJIAN KES 7 - 12

2.1 PERMASALAH YANG TIMBUL

2.2 PERBANDINGAN PROJEK DGN PELAYAR WEB LAIN

2.3 PERISIAN YANG DIPERLUKAN

2.3.1 MICROSOFT VISUAL BASIC 6.0

2.3.2 ADOBE PHOTOSHOP

2.4 PERKAKASAN DAN PERALATAN

BAB 3 – METHODOLOGI 13 - 21

3.1 PROJEK PROPOSOL

3.2 TASK ANALYSIS

3.3 CONCEPTUAL DESIGN

3.4 DESIGN SKETCHES

3.5 PAPER PROTOTYPING

3.6 COMPUTER PROTOTYPING

3.7 EVOLUTION

BAB 4 - REKABANTUK DAN HASIL PROJEK 22 - 24

BAB 5 - RUMUSAN DAN KESIMPULAN 25 - 26

3

BAB 1 - PENDAHULUAN

1.1 PENGENALAN KEPADA PROJEK

Web browser(Pelayar Web) atau penyemak imbas adalah pakaj perisian yang

membolehkan pengguna untuk memapar dan berinteraksi dengan dokumen

yang telah diprogram oleh pelayan web. Pelayar merupakan jenis agen

pengguna paling biasa digunakan. Jaringan besar dokumen berkat ini dikenali

sebagai World Wide Web. Pelayar web berkomunikasi dengan pelayan web

terutamanya dengan menggunakan hypertext transfer protocol ( HTTP) untuk

mengambil laman web HTTP membenarkan pelajar untuk menghantar maklumat

kepada pelayan web dan juga mencapai paparan muka web dari mereka.

Ketika ini, HTTP yang paling biasa digunakan adalah 1.1 yang ditakrifkan

sepenuhnya di Request for Comments (RFC) 2616. HTTP 1.1 mempunyai

piawaian sendiri yang tidak disokong sepenuhnya oleh Internet Explorer, tetapi

disokong oleh kebanyakan pelayar web generasi sekarang. Muka web dijumpai

melalui Uniform Resource Locator (URL) yang dianggap sebagai alamat bermula

dengan http untuk capaian HTTP. Kebanyakan pelayar turut menyokong

pelbagai jenis URL dan protokol seumpamanya seperti ftp untuk File Transfer

Transfer Protocol (FTP) gopher untuk Gopher protocol dan https untuk HTTPS

(SSL versi tersulit HTTP). Format fail untuk muka web biasanya hyper-text

markup language (HTML) dan dikenal pasti melalui protokol HTTP dengan

menggunakan jenis kandungan MIMIE.

Kebanyakan pelayar tempatan menyokong pelbagai format sebagai tambahan

kepada HTML seperti format imej JPEG, PNG dan GIF dan boleh dikembangkan

untuk menyokong lebih banyak lagi melalui penggunaan palam masuk – (plugin)

Gabungan spesifikasi protokol jenis kandungan HTTP danURL membenarkan

pereka muka web untuk memasukkan imej, animasi, video, bunyi dan media

aliran kepada muka web atau membolehkan mereka dicapai mlalui muka web.

4

Pelayar web awal menyokong hanya versi ringkas HTML. Perkembangan pesat

pelayar web properties mendorong kepada pembangunan dialek tidak piawaian

HTML membawa kepada masalah interoperasi dengan Jaring. Pelayar jarring

moden seperti Mozilla Suite, Firefox, Opera dan Safari mennyokong HTML dan

XHTML berasaskan piawaian (bermula dengan HTML 4.01) yang sepatutnya

dipaparkan dalam bentuk yang sama dikesemua pelayar. Internet Explorer tidak

menyokong HTML 4.01 dan XHTML 1.x sepenuhnya lagi.

Masa kini, banyak tapak jaring direka dengan menggunakan perisian penjana

HTML WYS/WYS seperti Macromedia Dreamweaver atau Microsoft Frontpage.

Ini sering kali menghasilkan HTML tidak piawaian secara ingkar menghalang

kerja W3C untuk membangunkan piawaian khususnya dengan XHTML dan

cascading style sheets (CSS) digunakan bagi aturletak muka. Sesetengah

pelayar popular termasuk komponen tambahan bagi menyokong berita Usernet.

Internet relay chat (IRC) dan e-mail. Protokol yang mungkin disokong termasuk

metwork news transfer protocol (NNTP), simple mail transfer protocol (SMTP).

Internet message acess protocol (IMAP) dan post office protocol (POP).

1.2 LATAR BELAKANG PROJEK

Aplikasi ini dibangunkan dengan menggunakan perisian Visual Basic 6.0,

Adobe Photoshop CS3 dan Web Builder 5.5.5. Hampir 85 peratus penggunaan

Visual Basic 6.0 bagi tujuan perlaksanaan pembangunan sistem ini. Untuk grafik

sistem ini kami menggunakan perisian Adobe Photoshop dan bertujuan untuk

mewujudkan paparan antaramuka yang lebih baik dan menarik. Web Builder

5.5.5 digunakan untuk menghasilkan rekaan laman web yang mampu dipapar

dalam apa jua resolusi saiz paparan monitor dan mampu menghasilkan

antaramuka yang berkualiti.

5

1.3 OBJEKTIF PROJEK

Bagi memastikan hasil yang dicapai sama dengan apa yang telah ditetapkan

semasa perancangan dan memenuhi kehendak. Objektif merupakan perkara

penting yang utama dalam sesebuah proses dalam membangunkan projek.

Antara objektif utama projek ini ialah : -

I. Mencipta suatu perisian mudah alih (portable).

Dengan adanya sistem mudah alih yang tidak memerlukan

pemasangan pada sistem dapat memudahkan pengguna

membawa perisian kemana-mana sahaja.

II. Penggunaan perisian yang mudah.

Kebanyakan web browser terlalu kompleks yang menyebabkan

sesetengah pengguna berasa susah untuk mengendalikannya.

Dengan wujudnya sistem ini dapat membantu pengguna

menggunakannya dengan lebih efisyen.

III. Mengurangkan pembaziran masa.

Dengan penambahan beberapa lagi perisian dapat

menyenangkan pengguna menggunakan aplikasi ini tanpa terlebih

dahulu memeriksa perisian yang terdapat dalam sesebuah

komputer telah di install perisian yang dikehendaki atau sebaliknya.

IV. Membantu mencipta produk yang relevan pada zaman ini.

Ciptaan demi ciptaan dihasilkan bagi mempertingkatkan kualiti

produk yang sedia ada dari semasa ke semasa. Ini mengikut

kehendak pengguna yang mahu produk dinaiktaraf untuk

pendapatkan hasil terbaik.

V. Untuk meminimumkan penggunaan memori didalam sistem operasi.

6

Penggunaan memori yang minimum dapat mempertingkatkan

prestasi sesebuah komputer dan tidak menganggu perisian yang

lain dan ini merupakan kelebihan yang paling penting sebelum

perlaksanaan perancangan membuat sesuatu produk.

VI. Mengatasi kelemahan sistem yang sedia ada.

Kajian dan penyelidikan perlulah dilakukan bagi mengenalpasti

masalah dan kekurangan pada setiap produk yang dihasilkan

sebelumnya. Ini untuk menghasilkan produk yang berkualiti dan

mesra pengguna.

1.4 SASARAN

Produk ini lebih kepada konsep mesra pengguna. Pengguna dapat

menggunakan produk dengan lebih mudah dan ringkas. Oleh sebab itu, produk

ini dicipta bagi pengguna menggunakan produk secara global tidak mengira

setiap lapisan masyarakat. Untuk permulaan, sasaran bagi penggunaan produk

ini adalah :

1) Para Pelajar IPTA/IPTS

2) Pelajar Sekolah

3) Guru-guru

7

BAB 2 - KAJIAN KES

2.1 PERMASALAHAN YANG TIMBUL

Kebanyakkan sistem pelayar web yang direka masih terdapat kekurangan dari

setiap sudut. Berdasarkan pemantauan dan kajian, produk yang dicipta

selalunya perlu diinstall terlebih dahulu bagi menyimpan keseluruhan ke dalam

konfigurasi system komputer. Hal ini banyak mempengaruhi ruang storan yang

kadang kala menyebabkan sistem komputer beroperasi perlahan atau tergendala.

Ini boleh menjejaskan pengoperasian sistem secara berpanjangan. Sesetengah

sistem tidak dapat dibawa kemana-mana kerana memerlukan konfigurasi tetapi

tidak bagi produk yang akan dihasilkan ini kerana ianya dapat dibawa ke mana –

mana dengan saiz yang kecil dan penggunaan yang mudah dan ringkas.

Perisian ini dipanggil ‘Portable’ kerana ciri-ciri yang dimilikinya. Ini memberi

impak yang besar pada produk-produk lain untuk mencipta produk yang mesra

pengguna.

2.2 PERBANDINGAN REDHORSE WEB BROWSER DENGAN PRODUK LAIN

Dilihat dari perbagai sudut, web browser ini mempunyai perisian tambahan yang

tidak terdapat di dalam mana web browser lain antaranya seperti

1. Music Player,

2. Alarm Clock,

3. send Message dan

4. Fungsi restart, shutdown, log off.

5. saiz aplikasi web browser ini adalah ringan dengan berkapasiti 3.77 MB

Maka ini merupakan kelebihan yang terdapat pada web browser ini. Disamping

sangat mesra pengguna dan tidak menyukar proses penggunaannya.

Untuk melayari internet, pengguna tidak memerlukan konfigurasi terlebih

dahulu sebaliknya hanya terus menggunakanya. Ia sesuai untuk disimpan di

dalam external storage seperti ThumbDrive. Pengguna boleh setting masa untuk

melayari internet dengan menggunakan aplikasi Alarm Clock. Konsep ini

8

menyebabkan ianya adalah satu perisian mudah alih yang canggih dengan ciri-

ciri teknologi baru.

Pengguna boleh menggunakan pada bila-bila masa di mana sahaja. Ia

tidak membebankan memori komputer pengguna sebaliknya membantu

meminimum penggunaan memori pada komputer walaupun terdapat dua aplikasi

tambahan. Secara keseluruhannya, ciptaan ini mampu menyaingi perisian web

browser yang lain.

2.3 PERISIAN

Bagi mencipta sesuatu Sistem seperti pelayar web in, sesuatu aplikasi perisian

diperlukan dan kami mengunakan 2 perisian iaitu Microsoft Visual Basic 6.0 dan

Adobe Photoshop

2.3.1 MICROSOFT VISUAL BASIC 6.0

Visual BASIC (Beginners All-Purpose Symbolic Instruction Code) merupakan

sebuah bahasa pemrograman yang dapat digunakan untuk membuat suatu

aplikasi dalam Microsoft Windows. Visual BASIC menggunakan Graphical User

Interface (GUI) dalam pembuatan program aplikasi (project). Dalam Visual

BASIC, pembuatan program aplikasi harus dikerjakan dalam sebuah project.

Sebuah Project dapat terdiri dari File Project (.vbp), File Form (.frm), File data

binary (.frx), Modul Class (.cls), Modul Standar (.bas), dan file resource tunggal

(.res). Bahasa yang digunakan adalah bahasa BASIC yang sangat popular pada

era sistem operasi DOS. Visual Basic 6.0 menawarkan kepada anda untuk

membuat User Interface (antarmuka pengguna) anda dalam tempoh yang

singkat. Dengan melalui Visual Basic 6.0, konsep pembangunan aplikasi akan

dimulai dengan pembentukkan user interface, kemudian mengatur properties

dari objek-objek yang digunakan dalam user interface seperti command button,

check button, option button, textbox, dan lain-lain lagi. Kemudian baru dilakukan

penulisan kod aturcara aplikasi untuk mengarahkan aplikasi ini berfungsi dengan

sempurna. Visual Basic 6.0 biasanya didalam satu pakej bersama Visual Studio

6.0. Dengan menggunakan Visual Basic 6.0 kita boleh menghasilkan berbagai-

bagai jenis program aplikasi.

9

Pada kotak dialog tersebut terdapat 3 buah tab yang terdiri dari:

New (menampilkan daftar pilihan untuk membuat project baru)

Existing (untuk browsing dan membuka project)

Recent (untuk membuka project yang sering digunakan).

a) Label

Digunakan untuk menambahkan teks pada saat perancangan form

10

b) Combobox

Untuk membolehkan pengguna memasukkan URL yang ingin dilayari

c) WebBrowser

Untuk memaparkan HTML atau laman web pengguna yang ingin dilayari.

d) ProgressBar

Untuk memaparkan proses semasa pelayar web sedang mencapai maklumat

untuk mengeluarkan output pada skrin tersebut.

e) Menu Bar

Menampilkan daftar menu yang berisi daftar perintah-perintah yang dapat

digunakan saat bekerja pada Visual BASIC. Terdiri dari menu File, Edit, View,

Project, Format, Debug, Run, Query, Diagram, Tools, Add-Ins, Window dan Help.

f) Toolbar

Digunakan untuk mengakses perintah-perintah dalam menu yang sering dipakai

secara cepat. Untuk membina butang-butang pada antaramuka pelayar web

seperti butang next, back, refresh, home dan lain-lain.

g)Toolbox

Merupakan daftar komponen-komponen yang dapat digunakan untuk mendesain

tampilan program aplikasi yang akan dibuat.

h) Project Explorer

Menampilkan daftar form dan module yang ada dalam project yang sedang aktif.

i) Property Window

Digunakan untuk mengatur properti dari komponen-komponen yang sedang

diaktifkan. Property merupakan karakteristik dari sebuah objek.

11

j) Text box

Digunakan sebagai sarana untuk mendapatkan input data dari user (pengguna)

dengan mengetikkan teks atau angka pada text box.

Form Designer

Merupakan jendela yang digunakan untuk melakukan perancangan tampilan dari

aplikasi yang akan dibuat.

Code Window

Merupakan jendela yang digunakan untuk menuliskan kod program.

Visual Component Library

Pada pemrograman visual, pemrograman dilakukan dengan menggunakan

komponen-komponen yang tersedia pada toolbox.

2.3.2 ADOBE PHOTOSHOP CS3

Rajah 2.4.1.2

12

Paparan Antaramuka Adobe Photoshop CS3

Adobe Photoshop merupakan sebuah perisian yang digunakan untuk

merekabentuk grafik di mana ia membolehkan sesuatu imej, gambar atau bahan

visual diubahsuai mengikut kreativiti seseorang pengguna. Ianya merupakan

antara perisian pengubahsuaian imej yang popular dikalangan pereka grafik dan

pembangunan perisian multimedia. Adobe Photoshop CS3 bukan hanya

menyediakan kemudahan untuk mengubahsuai imej untuk kegunaan cetakan

dan persembahan multimedia sahaja, malah ianya juga membenarkan sesuatu

imej khas untuk kegunaan web dibina dan diubahsuai menerusi aplikasi Adobe

ImageReady.

2.4 PERALATAN & PERKAKASAN

Perisian

Sistem Pengoperasian Windows XP SP2 dan keatas

Web Builder 5.5.5

Spesifikasi Komputer

BIL PERKAKASAN KUANTITI

1 AMD TURION x2 2.0Ghz 1

2 Hard Disk 120 GB 1

3 RAM - DDR2 - 1GB 1

4 Speaker 1

Jadual 2.4

Jadual 3.1 Spesifikasi Komputer yang diperlukan untuk melaksanakan projek.

13

BAB 3 - METHODOLOGI

3.1 PROJEK PROPOSOL

TAJUK PROJEK

Web Browser (RedHorse Web Browser)

Task:

Pencarian Maklumat, Music Player

Sasaran Penguna:

Pelajar Sekolah, Pelajar IPT, Pengguna awal & pelayar web

Step :

buka browser, masukan maklumat, tekan butang carian, Pilih Maklumat

3.2 TASK ANALYSIS

a)Maklumat Pengguna 1

Nama: Suraini Samsu

No IC:780910025806

umur: 36

Lokasi: Bandar Saujana Putra, 42610, jenjarom Selangor

Pekerjaan: Guru Sekolah

Tempoh Penggunaan: 1 Bulan

b)Maklumat Pengguna 2

Nama: Muhamad Fadhil Jaafar

No IC: 920911105201

umur: 22

Lokasi: Pekan Pasir Panjang,45400 Sekinchan Selangor

Pekerjaan: Perniaga Makanan

Tempoh Penggunaan: 1 Bulan

14

c) Maklumat Pengguna 3

Nama: Muhamad Nur Afiq B. Muhamad Najib

No IC: 920920016497

umur: 22

Lokasi: Kg Melayu Ampang, 68000 ampang Selangor

Pekerjaan: Pelajar IPTA

Tempoh Penggunaan: 1 Bulan

ANALISIS TUGAS (TASK)

Melayari internet, penghantaran Email, Music Player, Alam / Peringatan

3.3 CONCEPTUAL DESIGN

Task 1: Pelayar Web (Pencarian Maklumat)

Tuturutan/fungsi :

a)salin (Copy Pelayar Web) / Muat turun (download) Pelayar Web

Kedalam Komputer

b)Klik Pada ikon Pelayar Web.

c)Masukan Maklumat Yang Dicari kedalam Ruangan disediakan

15

d)klik Enter

Kekangan : Komputer Mesti Mempunyai Capaian internet

Task 2: Membaca & Mehantar Email

Tuturutan/fungsi :

a) Klik Pada Ikon (shotcut) Email Di Pelayar Web

b) Register Kata Nama (Login) & Kata laluan (Password) & Maklumat

Berkaitan

c) klik Hantar

d) Masukan Nama & Kata laluan yang telah didaftarkan dalam ruangan

disediakan

e) klik Masuk (Enter)

f) Pilih Ruangan Email Baru

g) Masukan isi Kandungan Email yang hendak dihantar

h) klik Hantar (Send)

Kekangan : Database

Task 3: Muzik Player

Tuturutan/fungsi :

a) Klik Pada Ikon (shotcut) Muzik Di Pelayar Web

b) Plih Lagu

c) Klik Play

Kekangan : Database untuk menyimpan fail-fail Muzik

Tuturutan/fungsi :

a) Klik Pada Ikon (shotcut) Alam Di Pelayar Web

b) Tentukan Masa alam

c) klik Ok

16

3.4 DESIGN SKETCHES

3.5 PAPER PROTOTYPES

17

18

3.6 COMPUTER PROTOTYPES

Address Video Lihat di Blog : http://de-yop.net/hci-project/project-

assigment-6-computer-prototyping/

Address Video lihat di Toutube :

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

19

3.6 EVALUTION

Kami mengategorikan soalaan dalam 5 kategori iaitu “System

Capabilities”,”Understanding the Apps”, “Interface of the Apps”,

“Terminology and System Information” dan “Overall Reaction of the

Apps.” Hasil dari survey selama 2 minggu kami memperolehi 23

responden dan 4 jenis persetujuan iaitu “Strongly Disagree”, ” disagree”,

“Agree”, dan “strongly Anggre”

20

21

22

BAB 4 - REKABENTUK DAN HASIL PROJEK

Redhorse Web Browser merupakan pelayar web yang dicipta untuk

menyediakan kemudahan untuk melayari internet . Ia dilengkapi dengan aplikasi

Music Player, Alarm Clock, Send Message dan Sistem tambahan restart,

shutdown, log off. Dengan saiz kurang dari 4 MB maka ia sesuai digunakan

sebagai perisian mudah alih yang semakin popular pada masa kini.

RedHorse Web Browser

Gambarajah 4.4 antaramuka RedHorse Web Browser

Paparan diatas merupakan Web Browser yang telah disambungkan ke Server

Web Hosting iaitu Bravehost.com. Melalui tapak RedHorse Web Site ini, maka

pengguna boleh mencari maklumat-maklumat dan data-data terus menerus

melalui ‘Redhorse Search!!’. Ia juga dipasangkan dengan berapa

pintasan(shortcut) bagi menyenangkan pengguna beralih ke web site yang dituju.

23

Untuk membuka music player, alarm dan send message hanya perlu

menekan button diatas sebelah kiri anda. Penggunaan warna perak

adalah bertujuan untuk menghidupkan warna korporat sejajar dengan

interface yang dibina.

Gambarajah 4.5 antaramuka Muzik Player

Gambarajah diatas merupakan muzik player yang terdapat didalam web

browser . Ia boleh memainkan lagu dan video yang berformat(.mp3, .wav, .avi,

cd audio, .dvd) dan boleh mempamerkan gambar/ imej berformat (.jpg, .bmp, .gif)

Gambarajah 4.6 antaramuka Alarm

Alarm diatas merupakan aplikasi yang sesuai dikombinasi didalam RedHorse

Web Browser dan ianya ringan dan tidak menjejaskan memori didalam PC

Komputer. Berasaskan nada “Beep” adalah default asal didalam sistem.

Gambarajah 4.7 antaramuka Message Sender

24

Ini adalah message sender bagi menghantar maklumat atau data ke email

menggunakan Microsoft Outlook. Dengan pintasan ini pengguna dapat

mengekses Outlook dengan lebih pantas dan cepat.

25

BAB 5 –RUMUSAN DAN KESIMPULAN

5.1 RUMUSAN

Sebelum sesebuah sistem yang menggunakan aturcara ini dibangunkan. Saya

perlu memahami teknologi serta konsep asas dalam pembangunan sesebuah

sistem. Dengan perkembangan teknologi pada masa kini, sistem boleh

dibangunkan sengan lebih mudah dengan perisian Microsoft Visual Basic 6.0

Setelah perbincangan dibuat dan dilihat kembali pelayar web yang telah dibina

ini, terdapat beberapa cadangan untuk memajukan lagi pelayar web ini.

Cadangan yang perlu dibuat :

1. Menambah perlarasan volume yang tidak terdapat dalam projek ini.

Kajian jangka panjang perlu dilakukan untuk mendapatkan kod aturcara

yang bersesuaian dan tiada ralat.

2. Menggunakan button tab yang dilihat mempunyai ciri yang baik dan

menarik.

3. Menambahkan satu filter untuk mengawal atau tidak membenarkan laman

web tertentu dilayari boleh pengguna.

4. Menambahkan beberapa aplikasi yang ringan dan berguna seperti

penggunaan kalkulator dan sebagainya.

26

5.2 KESIMPULAN

Sesebuah aplikasi perisian apa pun akan berfungsi dengan baik apabila

pengguna memahami objektif pembangunan dan penggunaan yang betul,

sesuatu aplikasi yang baik belum tentu sesuai dengan pengguna dalam

kelompok atau bidang yang lain, seperti murid sekolah tidak perlukan aplikasi

yang sukar dan rumit difahamminya tetapi di masa yang sama aplikasi tersebut

amat mudah dan senang digunakan oleh pembangun system web atau pekerja

dalam bidang ICT.