Aplikasi Web Browser
Internet dalam kehidupan kita sudah tidak asing lagi bukan? Terutama di kalangan para pelajar dan mahasiswa yang sangat sering menggunakan fasilitas ini untuk mencari ilmu. Salah satu komponen penting dalam internet adalah Web Browser. Web Browser adalah tool atau aplikasi untuk melihat suatu halaman web. Salah satu contoh web browser adalah Internet Explorer dan Mozilla Firefox. Pada latihan ini, kita akan belajar membuat aplikasi web browser dari hal yang sederhana hingga yang lebih kompleks.
5.1 Web Browser Sederhana Web Browser sederhana merupakan halaman yang digunakan untuk menjelajah situs-situs internet dengan tampilan halaman secara sederhana, yaitu hanya dengan Address bar yang digunakan untuk menuliskan alamat internet disertai dengan tombol Forward dan Back. Untuk lebih jelasnya, ikutilah langkah-langkah berikut ini secara lengkap: 1. Bukalah proyek baru menggunakan Standar.Exe. 2. Dari menu utama, pilih menu Project Æ Components. Kemudian aktifkan Check Box pada menu Microsoft Internet Control.
39
Gambar 5.1 Jendela Components 3. Tambahkan objek TextBox, objek CommandBuntton, dan objek WebBrowser ke dalam form. Berikut contoh desain formnya.
Gambar 5.2 Desain form Web Browser sederhana 4. Atur tampilan form di atas dengan aturan tabel berikut. Tabel 5.1 Pengaturan form Web Browser sederhana Komponen Form Text
40
Properti
Nilai
Name
FmWeb
Caption
Web Browser
Name
TxtUrl
CommandButton1 CommandButton2 CommandButton3 WebBrowser
Name
TbBack
Caption
< Back
Name
TbForword
Caption
Forword >
Name
TbGo
Caption
Go
Name
WebBrowser
5. Setelah selesai, ketikkan kode program berikut ini secara lengkap. Private Sub TbBack_Click() On Error Resume Next WebBrowser.GoBack End Sub Private Sub TbForword_Click() On Error Resume Next WebBrowser.GoForward End Sub Private Sub TbGo_Click() WebBrowser.Navigate TxtUrl.Text End Sub Private Sub TxtUrl_KeyDown(KeyCode As Integer, _ Shift As Integer) WebBrowser.Navigate TxtUrl.Text End Sub
6. Setelah selesai, jalankan program dengan menekan tombol F5.
41
Gambar 5.3 Contoh tampilan Web Browser setelah dijalankan
5.2 Web Browser Lanjutan Jika Anda telah berhasil menjalankan Latihan 5.1, pada latihan ini Anda diminta untuk menambahkan beberapa tool yang sudah ada pada latihan tersebut. Untuk lebih jelasnya, ikutilah langkah-langkah berikut ini: 1. Bukalah proyek baru menggunakan Standar.Exe. 2. Tambahkan beberapa macam objek ke dalam form, yaitu objek CommandButton, objek TextBox, dan objek WebBrowser.
Gambar 5.4 Desain form Web Browser 42
3. Dari desain form di atas, berikut aturan tabelnya. Tabel 5.2 Pengaturan pada form Web Browser Komponen
Properti
Nilai
Form
Name
FmWeb
Text CommandButton1
Caption
30 Second WebBrowser
Name
TxtUrl
Text
http://
Name
CmdBack
Caption CommandButton2 CommandButton3 CommandButton4 CommandButton5 WebBrowser
Back
Name
CmdForward
Caption
Forward
Name
CmdGo
Caption
Go
Name
CmbRefresh
Caption
Refersh
Name
CmdHome
Caption
Home
Name
HalWeb
4. Setelah selesai mendesain form dan mengatur propertinya, masuklah pada halaman kode, lalu tulis kode program berikut secara lengkap. Private Sub cmdBack_Click() HalWeb.GoBack End Sub Private Sub cmdForward_Click() HalWeb.GoForward End Sub Private Sub cmdGo_Click() HalWeb.Navigate TxtUrl.Text End Sub Private Sub cmdHome_Click() HalWeb.GoHome End Sub
43
Private Sub cmdRefresh_Click() HalWeb.Refresh End Sub Private Sub cmdStop_Click() HalWeb.Stop End Sub Private Sub Form_Load() HalWeb.GoHome End Sub
5. Setelah selesai, jalankan dengan menekan tombol F5.
Gambar 5.5 Tampilan program Web Browser setelah dijalankan
5.3 Web Browser dengan Fasilitas Simpan Pada latihan ini, kita akan menambahkan aplikasi yang ada pada Latihan 5.2. Namun, pada latihan ini akan ditambahkan fasilitas yang tidak ada pada Latihan 5.2, yaitu menyimpan halaman web, mencetak halaman web, dan mengatur halaman web yang akan dicetak. Untuk lebih jelasnya, ikutilah langkah-langkah berikut ini: 1. Bukalah proyek baru dengan Standar.Exe 44
2. Tambahkan objek CommandButton, objek TextBox, dan objek WebBrowser ke dalam form. Berikut contoh tampilannya.
Gambar 5.6 Desain form Web Browser 3. Dari desain form di atas, berikut adalah tabel aturannya. Tabel 5.3 Pengaturan pada form Web Browser Komponen
Properti
Nilai
Form
Name
FmWeb
Caption
Web Browser
Text CommandButton
Name
TxtUrl
Text
http://
Name
CmdBack
Caption CommandButton CommandButton CommandButton
Name
Back CmdForward
Caption
Forward
Name
CmdGo
Caption
Go
Name
CmbRefresh
Caption
Refersh
45
CommandButton WebBrowser
Name
CmdHome
Caption
Home
Name
HalWeb
4. Dari menu utama, pilih menu Tools Æ Menu Editor.
Gambar 5.7 Jendela Menu Editor Tabel 5.4 Pengaturan Menu Editor pada form Web Browser Caption Level 1
Name
Level 2
File
MuFile Save Page
SmSavePage
Print Page
SmPrintPage
Page Setup
SmPageSetup
Exit
SmExit
-
Batas1
5. Setelah selesai mendesain form dan memasukkan menu dari Menu Editor, masuklah ke halaman kode program dan ketikkan kode program berikut secara lengkap. Private Sub cmdBack_Click() HalWeb.GoBack
46
End Sub Private Sub cmdForward_Click() HalWeb.GoForward End Sub Private Sub cmdGo_Click() HalWeb.Navigate TxtUrl.Text End Sub Private Sub cmdHome_Click() HalWeb.GoHome End Sub Private Sub cmdRefresh_Click() HalWeb.Refresh End Sub Private Sub cmdStop_Click() HalWeb.Stop End Sub Private Sub Form_Load() HalWeb.GoHome End Sub Private Sub SmPagePreview_Click() On Error Resume Next HalWeb.ExecWB OLECMDID_PRINTPREVIEW, _ OLECMDEXECOPT_DODEFAULT End Sub Private Sub SmPageSetup_Click() On Error Resume Next HalWeb.ExecWB OLECMDID_PAGESETUP, _ OLECMDEXECOPT_DODEFAULT End Sub Private Sub SmPrintPage_Click() On Error Resume Next HalWeb.ExecWB OLECMDID_PRINT, _ OLECMDEXECOPT_DODEFAULT End Sub Private Sub SmSavePage_Click() On Error Resume Next HalWeb.ExecWB OLECMDID_SAVEAS, _ OLECMDEXECOPT_DODEFAULT End Sub
6. Setelah selesai, jalankan dengan menekan tombol F5. Berikut contoh menu File Æ Print Page. 47
Gambar 5.8 Program Web Browser setelah dijalankan
48
