WebKit (Web Browser)
Nama: I Putu Yudha Yarcana
NIM: 1519551011
Universitas/Fakultas/Jurusan:
Universitas Udayana/Teknik/Teknologi Informasi
Mata Kuliah: Pemrograman
Mobile
Kode Mata Kuliah: TI024330
Dosen: I Putu Agus Eka
Pratama, ST. MT.
1. 1. WebKit
WebKit adalah sebuah Mesin
Layout yang didesain agar browser dapat merender halaman web. Webkit adalah
komponen dasar dari peramban web Apple Safari dan Google Chrome. Pada bulan
juli 2012, berdasarkan StatCounter - webkit mendapatkan lebih dari 40 % kue di
pasar penjelajah web. Webkit menjadi dasar utama pada browser default di iOS,
Android, Tablet Blackberry, dan sistem operasi webOS. Webkit menyediakan
sekumpulan kelas untuk menampilkan isi pada jendela dan menerapkannya pada
fitur penjelajah web, misalnya : mengikuti tautan ketika di-klik oleh pengguna,
mengatur daftar kembali-maju, dan rekaman halaman yang baru saja dikunjungi.
Kode Webkit's HTML dan
javascript berawal dari forking proyek pustaka KHTML dan KJS di KDE. Saat ini
Webkit telah dikembangkan secara pribadi oleh KDE, Apple, Nokia, Google,
Bitstream, RIM, Samsung, Igalia, dan lainnya. Mac OS X, Windows, GNU/Linux, dan
berbagai sistem operasi mirip Unix didukung oleh proyek Webkit. Komponen
Webkit's WebCore dan JavascriptCore tersedia di bawah lisensi GNU LGPL, sisanya
tersedia di bawah lisensi BSD-Form.
2. 2. Implementasi
Web Kit pada Android Studio
Implementasi dari WebKit
pada Android Studio ialah 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. Berikut merupakan
langkah – langkah dalam membangun aplikasi tesebut.
1.
Pertama – tama buka aplikasi android studio yang telah terinstal
sebelumnya lalu mulailah dengan membuat project baru seperti pada gambar di
bawah ini.
2.
Setelah selesai membuat project baru dengan nama aplikasi “Buka Web”
dilanjutkan klik next maka akan kluar tampilan pada gambar di bawah ini lalu
dilanjutkan dengan memilih “phone and tablet” seperti pada gambar di bawah ini
lanjut klik next.
3.
Pada tahap selanjutkan menentukan desain awal dari aplikasi “Buka Web”
yang dimana Android Stuidio telah memberikan kemudahan dengan memberikan banyak
pilihan tampilan awal tapi untuk kali ini kita pilih Empty Activity seperti
pada gambar di bawah ini.
4.
Dilanjutkan dengan menentukan nama dari activity name dan layout name
yang dimana activity name nantinya akan menjadi file .java dan layout name akan
menjadi file .xml seperti pada gambar di bawah ini sudah menentukan nama
activity name dan layout name aplikasi tersebut.
5.
Setelah semua tahap di atas terpenuhi secara otomatis sistem akan
mengarahkan ketampilan awal yang dimana berisi BukaWeb.java dan bukaweb.xml
6.
Pada file BukaWeb.java masukannya source code seperti berikut.
package com.yarcanandroid.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.bukaweb);
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.layout.bukaweb, menu);
return true;
}
}
|
7.
Serta masukan source code pada file bukaweb.xml seperti berikut.
<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>
|
8.
Kemudian pada
AndroidManifest.xml tambahkan sourcode berikut.
<uses-permission
android:name="android.permission.INTERNET" />
|
Isikan tambahan baris sourcode
diatas pada bagian sebelum penutup yaitu di atas </manifest> seperti pada gambar berikut.
sourcode tersebut berfungsi
untuk memberikan permission (hak akses) kepada emulator Android (AVD) agar
dapat menggunakan koneksi internet yang ada di komputer anda.
9.
Setelah semua perintah sebelumnya telah di lakukan dengan baik maka
langsung running program dengan emulator yang telah terinstall sebelumnya dan
cobalah untuk memasukan alawat sebuah website seperti apda gambar di bawah ini
mengambil contoh website https://www,google.co.id maka akan
muncul tampilan seperti berikut.
Sumber : Modul Pembelajaran
Pemrograman Aplikasi Berbasis Android || I
Putu Agus Eka Pratama, ST.MT.
Komentar
Posting Komentar