Membuat Web Browser Sederhana dengan GTK, Webkit dan C

Masih begitu asing bagi beberapa programmer, ketika mendengar kata Webkit dan GTK. Tapi karena blog ini sudah menyediakan sedikit tutorial pemrograman GTK, maka kita akan mengaitkan tutorial GTK terdahulu dengan webkit. Webkit sudah dikembangkan cukup lama. Menurut Wikipedia, sampai saat ini juga telah digunakan oleh beberapa web browser, seperti safari, opera dan google chrome.

Sudah agak lama webkit melintas di pikiran saya. Namun saya belum terlalu banyak menggalinya lebih jauh. Mengapa? Karena untuk melihat Webkit terinstall di windows tidak mudah. Ini mungkin waktu yang tepat untuk berbagi sedikit tentang WebKit, karena akhir-akhir ini sedang aktif menggunakan sistem GNU/Linux. Meski kita tahu GTK cross-platform, khusus untuk tutorial ini hanya ditujukan untuk programmer GTK yang berkutat di lingkungan sistem Linux saja, karena saya belum menemukan cara praktis untuk menginstall webkit di Windows.

Untuk melihat program GTK tampil dengan widget browser, pertama kita harus menginstall libwebkit2gtk beserta development packages-nya. Disini saya menggunakan distro Ubuntu, pengguna distro lain mungkin harus sedikit mengerahkan keringat untuk bertanya pada mbah google. Sebenarnya webkit ini terinstall otomatis saat saya menginstal development packages untuk GTK, namun untuk memastikannya gunakan perintah berikut.

apt-get install libwebkit2gtk-3.0 -0 libwebkit2gtk-3.0 -dev

Awalnya saya tidak sengaja melihat dokumentasi WebkitGtk terinstall di /usr/share/gtk-doc. Berbekal ini, akhirnya saya mencoba bereksperimen membuat program sederhana dengan memanfaatkan library webkit. Hasil programnya sederhana, tapi jika saya tidak segera menulisnya mungkin suatu saat saya harus membaca dari awal lagi untuk memahami baris kode tersebut, jadi saya putuskan untuk menulis dan membagikannya untuk teman-teman semua

Widget yang disediakan webkit dapat digunakan dengan mudah, selayaknya ketika kita membuat widget GTK pada umumnya. Jadi konsep-konsepnya tentu tidak akan saya jelaskan lagi. Yang saya jelaskan di tutorial ini hanyalah beberapa fungsi yang bisa anda gunakan sebagai eksperimen secara individu.

Kelas terpenting dalam Webkit2GTK adalah WebKitWebView. Kelas ini menyediakan widget untuk digunakan secara sinkon dengan GTK. Untuk membuat widget ini, kita cukup menggunakan fungsi seperti berikut.

GtkWidget *webkit_web_view_new (void);

Fungsi di atas akan membuat sebuah widget WebKitWebView baru, selanjutnya widget tersebut dapat kita tampilkan bersama dengan widget lainnya. Referensi yang berisi daftar API WebKitWebView lain juga bisa diakses di link ini.

Contohnya implementasinya seperti ini.

webkit.c

#include <gtk/gtk.h>
#include <webkit/webkit.h>

int main(int argc, char* argv[]){
    GtkWidget *window, *webkit;
   
    gtk_init(&argc, &argv);
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(window, "Browser Webkit");
    gtk_window_set_default_size(window,800,600);
    //membuat widget webkit
    webkit = webkit_web_view_new ();
    //pasang dan tampilkan
    gtk_container_add(GTK_CONTAINER(window), webkit);
    gtk_widget_show_all(window);
    //alamat protokol harus jelas.
    //misal, situs seperti FB, google, harus https://
    webkit_web_view_load_uri (webkit, "http://m.facebook.com");
    gtk_main();
}

Build source dengan perintah berikut.
gcc -o webkit webkit.c `pkg-config --libs --cflags gtk+-3.0 webkit2gtk-3.0`
Saat pertama kali tampil, kita hanya melihat bidang segi empat kosong. Dengan sedikit kreatifitas dan usaha, kita bisa membuatnya menampilkan homepage khusus saat pertama kali tampil. Hmm, tapi saya rasa pemikiran itu masih terlalu jauh untuk saat ini, jadi kita akan memulai semunya dengan membuka sebuah website di widget ini.

void webkit_web_view_load_uri (WebKitWebView *web_view, const gchar *uri);

Parameter uri menentukan alamat yang akan diakses. Penulisannya harus disertakan protokol yang jelas, misalnya http://, https://, ftp://, atau file://. Jika tidak, webkit tidak akan bisa menampilkannya.

Penasaran hasil eksperimen saya seperti apa? Ini dia..

Untuk daftar fungsi yang jelas, silahkan buka dokumentasi WebKit2GTK(link). Disana anda akan mengetahui fungsi-fungsi sederhana, namun tentu saja, powerful. Setelah anda membacanya, anda akan bisa membayangkan gambaran abstrak untuk membuat tombol back-forward-reload, save page, menampilkan progress, dan lain-lain.