Aplikasi Web Browser

Transkripsi

1 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

2 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 Properti Nilai Form FmWeb Caption Web Browser Text TxtUrl 40

3 CommandButton1 TbBack Caption < Back CommandButton2 TbForword Caption Forword > CommandButton3 TbGo Caption Go WebBrowser WebBrowser 5. Setelah selesai, ketikkan kode program berikut ini secara lengkap. Private Sub TbBack_Click() WebBrowser.GoBack Private Sub TbForword_Click() WebBrowser.GoForward Private Sub TbGo_Click() WebBrowser.Navigate TxtUrl.Text Private Sub TxtUrl_KeyDown(KeyCode As Integer, _ Shift As Integer) WebBrowser.Navigate TxtUrl.Text 6. Setelah selesai, jalankan program dengan menekan tombol F5. 41

4 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. 42 Gambar 5.4 Desain form Web Browser

5 3. Dari desain form di atas, berikut aturan tabelnya. Tabel 5.2 Pengaturan pada form Web Browser Komponen Properti Nilai Form FmWeb Caption 30 Second WebBrowser Text TxtUrl Text CommandButton1 CmdBack Caption Back CommandButton2 CmdForward Caption Forward CommandButton3 CmdGo Caption Go CommandButton4 CmbRefresh Caption Refersh CommandButton5 CmdHome Caption Home WebBrowser 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 Private Sub cmdforward_click() HalWeb.GoForward Private Sub cmdgo_click() HalWeb.Navigate TxtUrl.Text Private Sub cmdhome_click() HalWeb.GoHome 43

6 Private Sub cmdrefresh_click() HalWeb.Refresh Private Sub cmdstop_click() HalWeb.Stop Private Sub Form_Load() HalWeb.GoHome 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

7 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 FmWeb Caption Web Browser Text TxtUrl Text CommandButton CmdBack Caption Back CommandButton CmdForward Caption Forward CommandButton CmdGo Caption Go CommandButton CmbRefresh Caption Refersh 45

8 CommandButton CmdHome Caption Home WebBrowser 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 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. 46 Private Sub cmdback_click() HalWeb.GoBack

9 Private Sub cmdforward_click() HalWeb.GoForward Private Sub cmdgo_click() HalWeb.Navigate TxtUrl.Text Private Sub cmdhome_click() HalWeb.GoHome Private Sub cmdrefresh_click() HalWeb.Refresh Private Sub cmdstop_click() HalWeb.Stop Private Sub Form_Load() HalWeb.GoHome Private Sub SmPagePreview_Click() HalWeb.ExecWB OLECMDID_PRINTPREVIEW, _ OLECMDEXECOPT_DODEFAULT Private Sub SmPageSetup_Click() HalWeb.ExecWB OLECMDID_PAGESETUP, _ OLECMDEXECOPT_DODEFAULT Private Sub SmPrintPage_Click() HalWeb.ExecWB OLECMDID_PRINT, _ OLECMDEXECOPT_DODEFAULT Private Sub SmSavePage_Click() HalWeb.ExecWB OLECMDID_SAVEAS, _ OLECMDEXECOPT_DODEFAULT 6. Setelah selesai, jalankan dengan menekan tombol F5. Berikut contoh menu File Print Page. 47

10 48 Gambar 5.8 Program Web Browser setelah dijalankan