Pemrograman Mobile : Web Kit
Nama : Dw Gde Eka
Krisna Adinatha
NIM : 1519551016
Universitas Udayana
Fakultas Teknik
Teknologi Informasi
Universitas Udayana
Fakultas Teknik
Teknologi Informasi
Pemrograman Mobile
(TI024330)
I Putu Agus Eka
Pratama, ST. MT.
A. Penjelasan Web Kit
Webkit adalah
sebuah mesin layout yang diesain agar browser dapat merender halaman web yang
dikembangkan oleh Apple, KDE dan perusahaan lainnya. Webkit kini menjadi
komponen dasar dari penjelajah web browser seperti Apple safari dan Google
Chrome.
Awalnya webkit
dimulai pada tahun 1998 sebagai proyek KDE sebagai mesin rendering KHTML dan
digabungkan dengan proyek KDE javascript engine (KJS). Kemudian proyek Webkit
dimulai oleh Don Melton dari Apple pada tanggal 25 juni 2001 sebagai
pengembangan lanjutan atas proyek sebelumnya yaitu KHTML dan KJS. Selanjutnya
pada tahun 2007 mereka mulai mengimplementasikan CSS pada Webkit dengan
menyertakan transmisi animasi 2d dan 3d. Disaat yang sama mereka mengumumkan
bahwa Webkit kini mendukung untuk HTML5.
Pada 8 april
2010 mereka mengumumkan bahwa webkit mempunyai versi baru yaitu Webkit2.
Webkit2 dirancang dari bawah untuk mendukung proses SPLIT (pemisahan) dimana
konten web (JS, HTML) dijalankan melalui proses yang berbeda dari proses
induknya agar lebih mudah digunakan.
B. Penerapan Web Kit pada Android
Android
Webkit adalah salah satu toolkits GUI dimana kita diperbolehkan menggunakan
format html untuk menampilkannya dibrowser atau yang lebih dikenal dengan
istilah embedding. Web browser dapat dijadikan sebagai widgets didalam sebuah
activity utnuk menampilkan format html. Web browser di android dikenal dengan
istilah Webkit.
Class di Android
Webkit sangat banyak seperti diantaranya WebView, WebStroge, WebSetting,
WebChromeClient, URLUtil, WebViewClient, WebViewDatabase, dll. Class yang
paling banyak dipakai adalah WebView.
Pada penerapan
web kit di android akan di aplikasikan untuk memanfaatkan webkit dengan studi
kasus sebuah URL internet jika diketikan pada aplikasi webkit Buka Web maka program
akan menampilkan web dari URL yang di masukan.
1. Pertama buka terlebih dahulu
android studio, lalu buat New project > Lalu pada application name berikan
judul BukaWeb kemudian next saja biarkan seperti biasa kemudian pilih empty activity
kemudian next kemudian pada activity name berikan nama bukaweb dan layout name
akan otomatis terisi biarkan saja lalu finish.
2. Masukan sourcode berikut pada
BukaWeb.java.
package
com.example.krisnaadinatha.bukaweb;
import
android.app.Activity;
import
android.graphics.Bitmap;
import
android.os.Bundle;
import
android.view.Menu;
import
android.view.View;
import
android.view.View.OnClickListener;
import
android.webkit.WebView;
import
android.webkit.WebViewClient;
import
android.widget.Button;
import
android.widget.EditText;
public class
BukaWeb extends Activity { private
WebView webView; private EditText
urlEditText;
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.buka_web);
urlEditText = (EditText)
findViewById(R.id.urlField);
webView = (WebView)
findViewById(R.id.webView);
Button openUrl = (Button)
findViewById(R.id.goButton);
openUrl.setOnClickListener(new
OnClickListener() {
@Override
public void onClick(View view) {
String url =
urlEditText.getText().toString();
if(validateUrl(url)){
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(url);
}
}
private boolean
validateUrl(String url) {
return true;
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu
menu) {
getMenuInflater().inflate(R.menu.buka_web, menu);
return true;
}
}
|
3. Kemudian masukan sourcode berikut pada bukaweb.xml.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" tools:context=".bukaweb" >
<LinearLayout
android:id="@+id/urlContainer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="@+id/urlField"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3"
android:hint="Enter URL to
open" />
<Button
android:id="@+id/goButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Open"
/>
</LinearLayout>
<WebView
android:id="@+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="@id/urlContainer" />
</RelativeLayout>
|
4. Kemudian pada AndroidManifest.xml tambahkan sourcode
berikut.
<?xml
version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.krisnaadinatha.bukaweb">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".BukaWeb">
<intent-filter>
<action
android:name="android.intent.action.MAIN" />
<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-permission
android:name="android.permission.INTERNET" />
</manifest>
|
Isikan tambahan
baris sourcode diatas pada bagian bawah sebelum penutup yaitu di atas
</manifest> . sourcode tersebut berfungsi untuk memberikan
permission (hak akses) kepada emulator Android (AVD) agar dapat menggunakan
koneksi internet yang ada di komputer anda.
5. Kemudian
setelah selesai dan tidak ada error jalankan project via emulator dan coba
mengetikan URL pada aplikasi BukaWeb misalnya disini saya ketikan URL https://www.google.com maka program
akan menampilkan website Universitas Udayana sesuai dengan URL yang dimasukan.
Sumber : Modul
Pembelajaran Pemrograman Aplikasi Berbasis Android // I Putu
Agus Eka Pratama, ST.MT.
