Musthopz's Site

Share Everything.

Cara Membuat Aplikasi Browser Tabbed


Disini saya akan membagi cara atau tutorial agar kita bisa membuat software atau aplikasi browser sendiri dengan cara yang sangat mudah dan sangat sederhana. Sebelumnya saya sudah memposting tutorial membuat aplikasi browser sederhana, maka kali ini saya akan memberikan tutorial membuat aplikasi browser yang sedikit lebih rumit.

Dengan menggunakan Bahasa Pemrograman visual basic, kita bisa membuat sebuah aplikasi browser yang memiliki fitur add tab dengan begitu kita dapat mengunjungi situs lebih dari satu halaman.

Untuk lebih memahami dalam browser internet, ikuti langkah-langkah sebagai berikut:

  1. Buka Applikasi Visual Studio 2010,
  2. Buat Project Baru dengan mengklik New Project atau dengan memilih menu File > New Project .
  3. Maka akan muncul tampilan New Project seperti pada gambar berikut, pada templates pilih visual basic, dan pilih Windows Form Application
  4. Jika sudah, isikan kolom Name dengan Application Browser II
  5. Jika anda sudah membuat form project “Aplikasi Browser II”, pada ‘toolbox’ siapkan komponen yang di butuhkan seperti 6 button, 1 tab control, 1 combo box.
  6. Susun semua komponen satu persatu sesuai dengan gambar berikut agar dapat mempermudah anda dalam hal penyelesaiannya
  7. Klik Form1 lalu Properties, Ubah Properties menjadi seperti ini
BackColor Window
FormBorderStyle Sizable
Icon (import icon wb pada file download)
StartPosition Center Screen
Text Musthopz Browser

8. Kemudian Kosongkan Text dan beri gambar pada Button1 melalui Properties

Image (import icon b pada file download)
Text (kosongkan)

9. Lalu Double klik Button1 dan masukkan list code seperti ini

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
WB.GoBack()

End Sub

10. Kemudian Kosongkan Text dan beri gambar pada Button2 melalui Properties

Image (import icon f pada file download)
Text (kosongkan)

11. Lalu Double klik Button2 dan masukkan list code seperti ini

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click

Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
WB.GoForward()

End Sub

12. Kemudian Kosongkan Text dan beri gambar pada Button3 melalui Properties

Image (import icon r pada file download)
Text (kosongkan)

13. Lalu Double klik Button3 dan masukkan list code seperti ini

Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click

Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
WB.Refresh()

End Sub

14. Kemudian Kosongkan Text dan beri gambar pada Button4 melalui Properties

Image (import icon s pada file download)
Text (kosongkan)

15. Lalu Double klik Button4 dan masukkan list code seperti ini

Private Sub Button4_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button4.Click

Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
WB.Stop()

End Sub

16. Kemudian Kosongkan Text dan beri gambar pada Button5 melalui Properties

Text Add Tab

17. Lalu Double klik Button5 dan masukkan list code seperti ini

Private Sub Button5_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button5.Click

AddTab(“about:blank”, TabControl1)

End Sub

18. Kemudian Kosongkan Text dan beri gambar pada Button6 melalui Properties

Text Start Browsing

19. Lalu Double klik Button6 dan masukkan list code seperti ini

Private Sub Button6_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button6.Click

Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
WB.Navigate(Me.ComboBox1.Text)

End Sub

20. Jika Sudah, maka Tambahkan :

#Region “CustomBrowser Navigation”

#End Region

21. Dan tempatkan sebelum codingan Button1 dan di akhir Button6

22. Kemudian tambahkan Region Tabs setelah Public Class dan sebelum region CustomBrowser Navigation

23. Jika sudah, klik TabControl1 dan aturlah pengaturan Properties TabControl1

Anchor Top, Bottom, Left, Right
TabPage Collection

24. Kemudian Pilih Browse collection maka akan muncul TabPage Collection Editor seperti gambar berikut, Remove TabPage1 dan TabPage2 lalu > OK.

25. Kemudian double klik TabControl1 dan masukkan list code ini

Private Sub TabControl1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TabControl1.SelectedIndexChanged

Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
Me.ComboBox1.Text = WB.Url.ToString

End Sub

26. Jika sudah, Buatlah Class baru dengan nama Class CustomBrowser di akhir class sebelumnya

Jika sudah maka tinggal tahan yang terakhir, yaitu mengecek program tersebut sudah bisa di jalankan atau tidak dengan menekan tombol F5 pada keyboard atau pilih debug pada menu, lalu pilih start debugging

Berikut adalah codingan dari awal sampai akhir dalam form tersebut

Public Class Form1
#Region “Tabs”

Public Sub AddTab(ByRef URL As String, ByRef TabControl As TabControl)
Dim NewBrowser As New CustomBrowser
Dim NewTab As New TabPage
NewBrowser.Tag = NewTab
NewTab.Tag = NewBrowser
TabControl.TabPages.Add(NewTab)
NewTab.Controls.Add(NewBrowser)
NewBrowser.Dock = DockStyle.Fill
NewBrowser.Navigate(URL)
End Sub

#End Region

#Region “CustomBrowser Navigation”
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
WB.GoBack()

End Sub
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click

Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
WB.GoForward()

End Sub
Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click

Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
WB.Refresh()

End Sub
Private Sub Button4_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button4.Click

Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
WB.Stop()

End Sub
Private Sub Button5_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button5.Click

AddTab(“about:blank”, TabControl1)

End Sub
Private Sub Button6_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button6.Click

Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
WB.Navigate(Me.ComboBox1.Text)

End Sub
#End Region
Private Sub TabControl1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TabControl1.SelectedIndexChanged

Dim WB As CustomBrowser = Me.TabControl1.SelectedTab.Tag
Me.ComboBox1.Text = WB.Url.ToString

End Sub
Public Class CustomBrowser
Inherits WebBrowser

Public Sub New()
Me.ScriptErrorsSuppressed = True
End Sub

Private Sub DocCompleted() Handles Me.DocumentCompleted
Dim TP As TabPage = Me.Tag
If Me.DocumentTitle.Length > 15 Then
TP.Text = Me.DocumentTitle.Substring(0, 14) & “…”
Else
TP.Text = Me.DocumentTitle
End If
End Sub
End Class
End Class

 

Single Post Navigation

9 thoughts on “Cara Membuat Aplikasi Browser Tabbed

  1. GAN,BISA BUAT PROJECT APLIKASI BROWSER TABBED,SOALNYA AQ PERLU KLI NI..!!! AQ TUNGGU BLSAN NYA YACH..!!

  2. aq perlu utuk bahan kuliah aq jurusan informatika di suruh buat program vb browser dan vb aq lgi rusak pla karena komponenya kena virus tolong buatkann project nya lah gan plizzz bantu saya ya taruh aja download projectnya di bawah posting inni ya aku tunggu blz san mu

  3. kalo erornya kaya gini di apain ya gan??

    • terkadang memang seperti itu, coba agan mulai buat dari awal dengan mengurangi kesalahan2 dalam pengetikan kode sampai selesai. biasanya dia agak sensitif kalo ada kesalahan pertama kedua dll jadinya programnya ga bisa di jalanin gan.

  4. Amar Ma'ruf on said:

    Ada kode untuk vb 6 gak?
    Soalnya aku butuh pakai vb6

Tinggalkan Jejak anda

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: