tajuk projek web browser (pelayar web) … · 1 tajuk projek web browser (pelayar web) pensyarah...
Post on 05-Aug-2019
242 Views
Preview:
TRANSCRIPT
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
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”
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.
top related