20
3.2 Gambaran Umum Rancangan Web Browser
Web browser merupakan program aplikasi yang memungkinkan pengguna untuk menayangkan dan berinteraksi dengan tulisan, gambar, video, musik dan berbagai
informasi lainnya yang terdapat pada halaman web di sebuah situs di world wide web atau di jaringan LAN lokal.
Dalam merancang aplikasi ini penulis menggunakan Visual Basic 6.0. Langkah awal yang penulis lakukan adalah merancang form aplikasi serta
memasukkan kontrol-kontrol yang dibutuhkan. Langkah ke dua yang penulis lakukan adalah memasukkan kode program pada jendela code editor. Selanjutnya
penulis menguji program aplikasi yang telah dibuat. Perancangan aplikasi dilakukan sebagai bahan pembelajaran bagi penulis
dan untuk membuat sebuah web browser yang nantinya akan digunakan untuk mencari halaman web. Untuk menggunakan aplikasi ini sangat mudah, komputer
pengguna hanya cukup terkoneksi dengan internet.
3.3 Stuktur Perancangan Aplikasi Web Browser
Stuktur adalah alur dari suatu web browser. Pada tahap ini berisikan gambaran sebuah web browser secara konseptual mengenai menu apa saja yang akan
ditentukan untuk dapat ditampilkan pada aplikasi web browser tersebut. Tujuannya agar menu-menu yang dibuat dapat disusun dengan baik dan teratur,
serta untuk memudahkan dalam pemahaman spesifikasi mengenai aplikasi web
Universitas Sumatera Utara
21
browser yang dirancang. Berikut Gambar 3.1 stuktur perancangan aplikasi web browser:
Gambar 3.1 Stuktur Web Browser
3.4 Perancangan Form 1 satu Aplikasi Web Browser
Perancangan web browser ini menggunakan Microsoft Visual Basic 6.0 sebagai berikut:
1. Bukalah Microsoft Visual Basic 6.0 lalu buat proyek baru
menggunakan Standar.Exe.
2. Dari menu utama pilih menu Project dan pilih Component, kemudian
aktifkan Check Box pada menu Microsoft HTML Object Library dan Microsoft Internet Control. Berikut adalah tampilan Gambar 3.2
seperti di bawah ini: Web Browser
Menu Edit
Tombol Go Menu File
Tombol Back Menu View
Tombol Stop Tombol Foward
Universitas Sumatera Utara
22
Gambar 3.2 Jendela Component
3. Setelah itu tambahkan beberapa macam objek ke dalam form, yaitu
objek Text Box, objek CommandButton1, CommandButton2, CommandButton3,
CommandButton4, CommandButton5,
CommandButton6, CommandButton7, CommandButton8, dan objek WebBrowser. Berikut adalah tampilan Gambar 3.3:
Universitas Sumatera Utara
23
Gambar 3.3 Desain Web Browser
4. Dari rancangan form pada gambar 3.3p, berikut aturan masing-masing
objek seperti Tabel 3.1 di bawah ini:
Tabel 3.1 Pengaturan properti pada United Browser Komponen
Properti Nilai
Form Name
Form1 Caption
United Browser Text Box
Name Text1
Caption
CommandButton1 Name
CommandButton1
Caption
CommandButton2 Name
CommandButton2
Caption
CommandButton3 Name
CommandButton3
Caption
CommandButton4 Name
CommandButton4
Caption
CommandButton5 Name
CommandButton5
Caption
CommandButton6 Name
CommandButton6
Caption
CommandButton7 Name
CommandButton7
Caption
CommandButton8 Name
CommandButton8
Caption
WebBrowser Name
WebBrowser1
Universitas Sumatera Utara
24
Berikut adalah kegunaan dari objek-objek yang dipakai: a.
TextBox dalam web browser ini digunakan sebagai tempat untuk
meletakkan alamat
website misalnya:
http:www.google.com yang akan dikunjungi pengguna. b.
CommandButton1 yaitu Back dalam web browser ini
digunakan sebagai tombol yang akan mengembalikan halaman web ke halaman sebelumnya.
c.
CommandButton2 yaitu Forward dalam web browser ini
digunakan sebagai tombol yang akan mengembalikan halaman web ke halaman.
d.
CommandButton3 yaitu Refresh dalam web browser ini
digunakan sebagai tombol yang akan merefresh halaman web yang sedang dikunjungi.
e.
CommandButton4 yaitu Stop dalam web browser ini
digunakan sebagai tombol yang menghentikan proses pencarian halaman website.
f.
CommandButton5 yaitu Go dalam web browser ini digunakan
sebagai tombol yang akan menampilkan halaman website yang dikunjungi pengguna.
g.
CommandButton6 yaitu Home dalam web browser ini
digunakan sebagai tombol yang akan mengembalikan halaman website ke halaman awal.
Universitas Sumatera Utara
25
h.
CommandButton7 yaitu Print dalam web browser ini
digunakan sebagai tombol untuk menyetak halaman website. i.
CommandButton8 yaitu Save dalam web browser ini
digunakan sebagai tombol untuk menyimpan halaman website. j.
WebBrowser digunakan untuk menampilkan halaman website yang dikunjungi pengguna.
5. Setelah selesai, buat icon pada masing-masing command sehingga
kelihatan lebih menarik kemudian jalankan progam dengan menekan tombol Run pada toolbar Visual Basic 6.0 atau tekan tombol F5.
Berikut tampilan Gambar 3.4:
Gambar 3.4 Tampilan Gambar Setelah di Run
Catatan: Karena saat program web browser di Run tidak terkoneksi dengan internet, hasil tampilannya adalah seperti Gambar 3.4.
6.
Setelah itu penulis menambahkan beberapa menu, seperti menu File, Edit,
dan View. Untuk menambahkan beberapa menu ini
Universitas Sumatera Utara
26
menggunakan Menu Editor. Untuk membukanya pilih menu Tools lalu pilih Menu Editor. Berikut tampilan Gambar 3.5:
Gambar 3.5 Tampilan Menu Editor Tabel 3.2 Pengaturan Menu Editor
Caption Name
Menu Sub Menu
File mFile
New Window mNewWindow
Open mOpen
Save mSave
Save As mSaveAs
SelectAll mSelectAll
Exit mExit
View mView
Fullscreen mFullscreen
Page mPage
Page Source mPageSource
Properties mProperties
Edit Print
mPrint
Universitas Sumatera Utara
27
Pada submenu Open penulis menambahkan objek CommonDialog1.
CommonDialog digunakan untuk membuat program yang mampu membuka file. Berikut adalah Gambar 3.6 Icon CommonDialog:
Gambar 3.6 Icon CommonDialog
7. Gambar 3.7 adalah tampilan rancangan web browser setelah
ditambahkan beberapa menu:
Gambar 3.7 Tampilan Web Browser dengan tambahan menu
Universitas Sumatera Utara
28
8. Tambahkan ProgressBar untuk melihat loading web browser saat
browsing dengan cara menambahkan component Microsoft Windows Common Control 6.0.
Gambar 3.8 Tampilan Microsoft Windows Common Control 6.0
Setelah ditambahkan Progressbar maka tampilan web browser menjadi seperti berikut:
Universitas Sumatera Utara
29
Gambar 3.9 Tampilan setelah Progressbar ditambah
9. Setelah rancangan dan pengaturan propertinya selesai, Eksekusilah
program. Kliklah Menu Open akan muncul tampilan seperti Gambar 3.10 berikut:
Gambar 3.10 Tampilan Kotak Open
Universitas Sumatera Utara
30
Kliklah tombol Open untuk melihat tampilan HTML yang dibukapada
web browser. Berikut adalah tampilan Gambar 3.11:
Gambar 3.11 Tampilan File HTML
3.5 Perancangan Form 2 dua Aplikasi Web Browser
Kategori