Tutorial membuat Web Browser pada Andoid ini juga kita integrasikan dengan tutorial Part 1: Mengenal Intent dan Kegunaannya (Praktek Interaksi antar Activity dalam satu aplikasi) dan part – part berikutnya.
Web Browser apa yang anda gunakan untuk browsing web di Android? Opera, Firefox, Chrome ataukah Browser bawaan Android? Yang pasti bukan IE :P,
Nah, anda bisa membuat sendiri web browser untuk Android. Selain bisa meng-koding dengan skill kita sendiri, Android API pun menyediakan komponen yang bisa kita gunakan untuk berkreasi membuat Web Browser, yaitu WebView Component. Kita akan membahas tentang WebView ini dan praktek membuat aplikasi Web Browser sederhana, dan anda harus mengembangkannya sendiri. :)
Bila anda menggunakan Android Studio seperti yang saya gunakan, anda bisa melihat komponen WebView pada Pallete Window.
Lihat gambar 1:
Untuk menambahkan komponen ini pada Aplikasi yang anda buat, tinggal drag and drop saja pada tab design. Mudah bukan?
Nah, pada project kali ini saya menambahkan beberapa komponen yang kita gunakan untuk membuat Web Browser ini, yaitu:
-Komponen EditText dengan id urlTxt, -> digunakan untuk mengetikkan alamat url web yang ingin dibuka.
-Komponen Button dengan id btnGo, -> digunakan untuk membuka alamat url.
-Komponen WebView dengan id myWebView, -> digunakan untuk menampilkan halaman web yang akan dibuka.
Tampilan design kita seperti terlihat pada gambar dibawah ini, silahkan color/warna anda berikan sendiri dari Properties Window yang ada di Android Studio. Mudah bukan? Anda bisa memberi background color sendiri kan?
Lihat gambar 2:
Supaya lebih rapi, saya menggunakan Linear Layout (Horizontal) untuk meletakkan komponen EditText dan komponen Button. Yang belum tahu linear layout (horizontal) silahkan browsing di Google :P
Setelah kita menata sedemikan rupa komponen – komponen kita, saatnya kita memberikan method onclick pada komponen Button yang sudah kita berikan id btnGo tadi. Anda sudah tahu caranya kan?
Yup, tinggal berikan method pada properties window. Nah, disini saya berikan saja method gotoUrl.
Lihat gambar 3:
Nah, saya yakin, bila sudah familiar dengan Android Studio bisa langsung membuat method yang belum ada ke MainActivity.java kita. Ingat, onclick adalah merujuk pada method yang kita masukan, bila method tidak ditemukan maka Android Studio secara otomatis akan menginformasikan kepada kita bahwa method belum ada. Silahkan pilih option untuk membuat method baru dari gambar bola lampu yang muncul :P , hayo masihkan anda ingat kode xml ini di tab apa?? :P
Lihat gambar 4:
Ok, Android Studio akan membuat method gotoUrl(View view){} secara otomatis di MainActivity.java, nah, sekarang sementara biarkan method ini, yuk kita lihat dulu ke method lain,,,
Coba perhatikan MainActivity.java , ini adalah satu – satu nya Activity pada project kita. Yuk, kita tambahkan variable ,
Lihat gambar 5:
Perhatikan, saya membuat sebuah variable theUrl yang bertipe String. Variable inilah yang nantinya kita gunakan untuk menampung url yang dimasukkan dari komponent EditText yang sudah kita beri id urlTxt tadi.
Nah, berikutnya saya membuat sebuah object dengan nama webBrowserKu yang merupakan tipe dari WebView.
Loh, ada pertanyaan, apa mau bikin komponen WebView lagi??? :P
Bukan, simak terus nanti dibawah,
Sekarang, yuk kita lihat method onCreate(), ini adalah method yang di panggil saat Android App kita terloading. Nah, kita tambahkan kodenya seperti berikut ini,
Lihat gambar 6:
Perhatikan kode:
webBrowserKu = (WebView)findViewById(R.id.myWebView);
Nah, itulah apa yang akan kita lakukan pada object webBrowserKu yang baru saja kita buat tadi. Object tersebut kita assign dengan komponen myWebView. Bisa dimengerti? Bila belum mengerti, coba stop sampai disini dan amati kembali :)
Lajuttt...
Ehm, ada sedikit kelemahan dari komponen WebView , mudah – mudahan di Android API yang akan datang kelemahan ini bisa ditambal. Saat tutorial ini ditulis, saya menggunakan Android API 21 dentan minSdk API 15.
Kelemahannya adalah, ketika ada sebuah link dari website yang sudah kita buka, kemudian kita membuka link tersebut, maka link tidak membuka di WebView kita, melainkan akan memanggil aplikasi Web Browser default pada Android System anda. Maka dari itu untuk mensiasatinya, kita menggunakan kode yang kedua:
webBrowserKu.setWebViewClient(new WebViewClient());
Mudah bukan?
Bukan hanya itu saja, secara default, komponen WebView men-disable Javascript, maka dari itu, kita pun harus meng-enable Javascript tersebut dengan kode berikutnya:
WebSettings theWebSetting = webBrowserKu.getSettings();
theWebSetting.setJavaScriptEnabled(true);
Ada kesulitan sampai disini?
Lanjutttt....
Kita akan melihat kode method gotoUrl(){} yang baru saja kita buat tadi, perhatikan gambar,
Lihat gambar 7:
Intinya, kita akan membuat object EditText yang diberi nama theEditText kemudian mengambil value dari komponen EditText yang kita beri nama urlTxt tadi. Kemudian kita memanggil salah satu method dari object webBrowserKu yaitu method loadUrl. Nah, sampai disini bisa diikuti kan? Yes, kita sudah selesai membuat browser sendiri untuk Android, silahkan run atau debug pada Emulation anda.
Sebetulnya, komponen WebView memiliki banyak sekali method dan properties nya, anda bisa melihat documentasi dari Class WebView pada http://developer.android.com/docs/reference/android/webkit/WebView.html
Meskipun memiliki banyak sekali method dan properties yang membantu kita, namun hanya beberapa saja yang akan saya gunakan di tutorial ini, yaitu:
loadUrl();
reload();
stopLoading();
goBack();
goForward();
untuk pengembangan selanjutnya, silahkan anda coba sendiri :)
Cukupkah sampai disini?
Belum, kita harus memberikan permission kepada aplikasi kita supaya diizinkan oleh Android System untuk konek ke Internet, kita menambahkan permission nya pada AndroidManifest.xml, perhatikan kode di bawah,,,
Lihat gambar 8:
Nah, adakah yang belum tahu kegunaan AndroidManifest.xml? Bila ada yang belum tahu, silahkan browsing :P
Terakhir, yuk kita berikan menu,,, menu ini kita tambahkan pada ActionBar. Anda sudah tahu kan tentang ActionBar??? :P bila belum, silahkan browsing di Google :P
Kita akan menambahkan menu untuk Refresh, Stop, Back dan Forward serta menu ini kita letakkan di ActionBar. Untuk membuatnya sangat mudah, silahkan buka menu_main.xml yang sudah otomatis tersedia di struktur folder Android Project anda.
Lihat gambar 9:
Sekarang, buka menu_main.xml dan tambahkan beberapa kodenya seperti berikut,
Lihat gambar 10:
Mudah bukan cara menambahkannya, hanya tinggal menambahkan
Sebetulnya, untuk hal ini, id tidak penting, yang penting adalah title dan onClick. Title nanti akan muncul pada menu, sedangkan onClick adalah method yang dipanggil saat menu tersebut dipilih.
Eits, jangan senang dulu karena bikin menu nya sangat amat mudah sekali, coba arahkan mouse anda pada onClick value di setiap item, nah,,, bisa keliatan errornya kan??
Lihat gambar 11:
Inti dari problem adalah bahwa, method yang dipanggil saat onClik belum kita buat di MainActivity.java, cobalah membuat method secara otomatis dengan mengarahkan mouse pada gambar bola lampu tersebut, bisa kan anda membuat method nya??? :P
//break :)
Bila anda cukup pinter, pasti untuk membuat method pada setiap item bisa dilakukan dengan mudah...
Nah, sekarang buka MainActivity.java, dan lengkapilah method anda dengan mengetikan kode seperti berikut ini,
Lihat gambar 12:
Perhatikan kodenya, mudah bukan??? Yup, tutorial ini memang dibuat sedemikian mudahnya untuk dimengerti... :)
Ok, sekarang cobalah run kode anda dan bereksperimen lah.
Semoga bermanfaat,
Salam,
Hasil akhir, lihat gambar 13:
KODE – KODE LENGKAP:
MainActivity.java
AndroidManifest.xml
menu_main.xml
activity_main.xml
Lihat gambar 1:
Untuk menambahkan komponen ini pada Aplikasi yang anda buat, tinggal drag and drop saja pada tab design. Mudah bukan?
Nah, pada project kali ini saya menambahkan beberapa komponen yang kita gunakan untuk membuat Web Browser ini, yaitu:
-Komponen EditText dengan id urlTxt, -> digunakan untuk mengetikkan alamat url web yang ingin dibuka.
-Komponen Button dengan id btnGo, -> digunakan untuk membuka alamat url.
-Komponen WebView dengan id myWebView, -> digunakan untuk menampilkan halaman web yang akan dibuka.
Tampilan design kita seperti terlihat pada gambar dibawah ini, silahkan color/warna anda berikan sendiri dari Properties Window yang ada di Android Studio. Mudah bukan? Anda bisa memberi background color sendiri kan?
Lihat gambar 2:
Supaya lebih rapi, saya menggunakan Linear Layout (Horizontal) untuk meletakkan komponen EditText dan komponen Button. Yang belum tahu linear layout (horizontal) silahkan browsing di Google :P
Setelah kita menata sedemikan rupa komponen – komponen kita, saatnya kita memberikan method onclick pada komponen Button yang sudah kita berikan id btnGo tadi. Anda sudah tahu caranya kan?
Yup, tinggal berikan method pada properties window. Nah, disini saya berikan saja method gotoUrl.
Lihat gambar 3:
Nah, saya yakin, bila sudah familiar dengan Android Studio bisa langsung membuat method yang belum ada ke MainActivity.java kita. Ingat, onclick adalah merujuk pada method yang kita masukan, bila method tidak ditemukan maka Android Studio secara otomatis akan menginformasikan kepada kita bahwa method belum ada. Silahkan pilih option untuk membuat method baru dari gambar bola lampu yang muncul :P , hayo masihkan anda ingat kode xml ini di tab apa?? :P
Lihat gambar 4:
Ok, Android Studio akan membuat method gotoUrl(View view){} secara otomatis di MainActivity.java, nah, sekarang sementara biarkan method ini, yuk kita lihat dulu ke method lain,,,
Coba perhatikan MainActivity.java , ini adalah satu – satu nya Activity pada project kita. Yuk, kita tambahkan variable ,
Lihat gambar 5:
Perhatikan, saya membuat sebuah variable theUrl yang bertipe String. Variable inilah yang nantinya kita gunakan untuk menampung url yang dimasukkan dari komponent EditText yang sudah kita beri id urlTxt tadi.
Nah, berikutnya saya membuat sebuah object dengan nama webBrowserKu yang merupakan tipe dari WebView.
Loh, ada pertanyaan, apa mau bikin komponen WebView lagi??? :P
Bukan, simak terus nanti dibawah,
Sekarang, yuk kita lihat method onCreate(), ini adalah method yang di panggil saat Android App kita terloading. Nah, kita tambahkan kodenya seperti berikut ini,
Lihat gambar 6:
Perhatikan kode:
webBrowserKu = (WebView)findViewById(R.id.myWebView);
Nah, itulah apa yang akan kita lakukan pada object webBrowserKu yang baru saja kita buat tadi. Object tersebut kita assign dengan komponen myWebView. Bisa dimengerti? Bila belum mengerti, coba stop sampai disini dan amati kembali :)
Lajuttt...
Ehm, ada sedikit kelemahan dari komponen WebView , mudah – mudahan di Android API yang akan datang kelemahan ini bisa ditambal. Saat tutorial ini ditulis, saya menggunakan Android API 21 dentan minSdk API 15.
Kelemahannya adalah, ketika ada sebuah link dari website yang sudah kita buka, kemudian kita membuka link tersebut, maka link tidak membuka di WebView kita, melainkan akan memanggil aplikasi Web Browser default pada Android System anda. Maka dari itu untuk mensiasatinya, kita menggunakan kode yang kedua:
webBrowserKu.setWebViewClient(new WebViewClient());
Mudah bukan?
Bukan hanya itu saja, secara default, komponen WebView men-disable Javascript, maka dari itu, kita pun harus meng-enable Javascript tersebut dengan kode berikutnya:
WebSettings theWebSetting = webBrowserKu.getSettings();
theWebSetting.setJavaScriptEnabled(true);
Ada kesulitan sampai disini?
Lanjutttt....
Kita akan melihat kode method gotoUrl(){} yang baru saja kita buat tadi, perhatikan gambar,
Lihat gambar 7:
Intinya, kita akan membuat object EditText yang diberi nama theEditText kemudian mengambil value dari komponen EditText yang kita beri nama urlTxt tadi. Kemudian kita memanggil salah satu method dari object webBrowserKu yaitu method loadUrl. Nah, sampai disini bisa diikuti kan? Yes, kita sudah selesai membuat browser sendiri untuk Android, silahkan run atau debug pada Emulation anda.
Sebetulnya, komponen WebView memiliki banyak sekali method dan properties nya, anda bisa melihat documentasi dari Class WebView pada http://developer.android.com/docs/reference/android/webkit/WebView.html
Meskipun memiliki banyak sekali method dan properties yang membantu kita, namun hanya beberapa saja yang akan saya gunakan di tutorial ini, yaitu:
loadUrl();
reload();
stopLoading();
goBack();
goForward();
untuk pengembangan selanjutnya, silahkan anda coba sendiri :)
Cukupkah sampai disini?
Belum, kita harus memberikan permission kepada aplikasi kita supaya diizinkan oleh Android System untuk konek ke Internet, kita menambahkan permission nya pada AndroidManifest.xml, perhatikan kode di bawah,,,
Lihat gambar 8:
Nah, adakah yang belum tahu kegunaan AndroidManifest.xml? Bila ada yang belum tahu, silahkan browsing :P
Terakhir, yuk kita berikan menu,,, menu ini kita tambahkan pada ActionBar. Anda sudah tahu kan tentang ActionBar??? :P bila belum, silahkan browsing di Google :P
Kita akan menambahkan menu untuk Refresh, Stop, Back dan Forward serta menu ini kita letakkan di ActionBar. Untuk membuatnya sangat mudah, silahkan buka menu_main.xml yang sudah otomatis tersedia di struktur folder Android Project anda.
Lihat gambar 9:
Sekarang, buka menu_main.xml dan tambahkan beberapa kodenya seperti berikut,
Lihat gambar 10:
Mudah bukan cara menambahkannya, hanya tinggal menambahkan
Sebetulnya, untuk hal ini, id tidak penting, yang penting adalah title dan onClick. Title nanti akan muncul pada menu, sedangkan onClick adalah method yang dipanggil saat menu tersebut dipilih.
Eits, jangan senang dulu karena bikin menu nya sangat amat mudah sekali, coba arahkan mouse anda pada onClick value di setiap item, nah,,, bisa keliatan errornya kan??
Lihat gambar 11:
Inti dari problem adalah bahwa, method yang dipanggil saat onClik belum kita buat di MainActivity.java, cobalah membuat method secara otomatis dengan mengarahkan mouse pada gambar bola lampu tersebut, bisa kan anda membuat method nya??? :P
//break :)
Bila anda cukup pinter, pasti untuk membuat method pada setiap item bisa dilakukan dengan mudah...
Nah, sekarang buka MainActivity.java, dan lengkapilah method anda dengan mengetikan kode seperti berikut ini,
Lihat gambar 12:
Perhatikan kodenya, mudah bukan??? Yup, tutorial ini memang dibuat sedemikian mudahnya untuk dimengerti... :)
Ok, sekarang cobalah run kode anda dan bereksperimen lah.
Semoga bermanfaat,
Salam,
Hasil akhir, lihat gambar 13:
KODE – KODE LENGKAP:
MainActivity.java
AndroidManifest.xml
menu_main.xml
activity_main.xml