EKSPLORASI HTML5 DENGAN STUDI KASUS JEJARING SOSIAL UNTUK PEMBELAJARAN KOLABORATIF

Transkripsi

1 1 EKSPLORASI HTML5 DENGAN STUDI KASUS JEJARING SOSIAL UNTUK PEMBELAJARAN KOLABORATIF Hapsoro Adi Permana, Umi Laili Yuhana, dan Daniel Oranova Siahaan Jurusan Teknik Informatika, Fakultas Teknologi Informasi, Institut Teknologi Sepuluh Nopember (ITS) Jl. Arief Rahman Hakim, Surabaya Abstrak HTML merupakan standar yang digunakan untuk menampilkan aplikasi web. Kemudian muncul teknologi pendukung HTML, yakni Javascript dan CSS. Seiring berjalannya waktu, muncul kebutuhan-kebutuhan akan teknologi baru yang tidak dapat diakomodasi oleh HTML, javascript, dan CSS pada saat itu. Kemudian W3C mengumumkan konsep HTML5 dengan fitur-fitur antara lain drag-and-drop, penyimpanan lokal, basisdata web, geolocation, dan kanvas. Namun konsep HTML5 belum sepenuhnya disetujui dan dapat digunakan pada berbagai perambah web modern. Penelitian ini dibuat dengan tujuan eksplorasi dan implementasi fitur-fitur yang terdapat pada teknologi HTML5. Sesuai dengan hasil pengujian yang dilakukan pada Penelitian ini, kanvas, penyimpanan lokal, serta geolocation dapat berjalan pada kelima perambah modern Chrome, Firefox, IE, Opera, dan Safari. Dragand-drop dan basisdata web masih belum didukung oleh beberapa. Kesimpulan yang dapat ditarik dari Penelitian ini adalah bahwa fitur-fitur HTML5 tersebut dapat diimplementasi dengan menggunakan javascript dan hampir seluruh perambah web modern yang ada saat ini sudah mendukung fitur-fitur HTML5 tersebut. Kata Kunci HTML5, Jejaring Sosial, Pembelajaran Kolaboratif. I. PENDAHULUAN TML merupakan standar yang digunakan untuk Hmenampilkan aplikasi web. Dalam dekade 1990, standarstandar baru untuk HTML muncul dari tahun ke tahun. Pada tahun-tahun tersebut dunia web bergeliat ditandai dengan munculnya banyak situs-situs web baru. Dari waktu ke waktu tersebut pula lahir kebutuhan untuk menciptakan halaman web dengan tampilan yang lebih baik. CSS (Cascading Style Sheets) muncul sebagai solusi kebutuhan tersebut. Di samping itu juga muncul Javascript yang memperkaya perangai halaman web. Pada Juli 1997 muncul HTML4 yang merupakan penyempurnaan dari standar-standar HTML sebelumnya. Dengan menggunakan HTML versi 4 serta teknologi javascript, pada dekade 2000 mulai banyak bermunculan aplikasi web. Selama perkembangannya, muncul kebutuhankebutuhan baru yang teridentifikasi. Kebutuhan-kebutuhan baru tersebut belum dapat diakomodasi oleh teknologi HTML4. Oleh karena tidak mampunya HTML4 dalam mengakomodasi kebutuhan-kebutuhan tersebut, perusahaanperusahaan perangkat lunak menciptakan komponenkomponen pendukung untuk membantu jalannya aplikasi web. Beberapa komponen pendukung aplikasi web yang terkenal adalah Adobe Flash Player, QuickTime, serta Microsoft Silverlight. Ketiga komponen tersebut membantu menampilkan konten multimedia. Sebelum pengguna dapat menggunakan aplikasi web tertentu, pengguna terlebih dahulu harus memasang komponen tambahan tertentu pada komputernya. Hal ini dirasa sangat merepotkan karena konsep aplikasi web sebenarnya digagas untuk tidak merepotkan pengguna dengan berbagai instalasi program maupun komponen. Dengan munculnya berbagai kebutuhan baru tersebut, World Wide Web Consortium (W3C) mencetuskan konsep HTML5. Secara resmi rancangan HTML5 diumumkan oleh W3C pada tahun Sampai pada saat ini konsep HTML5 belum disetujui secara keseluruhan. Berbagai teknologi yang muncul pada HTML5 ini antara lain adalah drag-and-drop, penyimpanan lokal, basisdata web, akses terhadap berkas lokal, geolocation, dan kanvas. Dengan munculnya konsep HTML5 diharapkan penggunaan komponen tambahan untuk membuka aplikasi web diharapkan dapat berkurang atau bahkan tidak diperlukan. Penelitian ini dibuat dengan tujuan eksplorasi dan implementaasi fitur-fitur yang terdapat pada teknologi HTML5. Studi kasus yang digunakan dalam penelitian ini adalah jejaring sosial untuk pembelajaran kolaboratif. II. METODOLOGI A. Studi Literatur Pada tahap ini dilakukan pengumpulan informasi yang diperlukan untuk perancangan sistem. Informasi tersebut dapat diperoleh dari literatur, makalah, maupun buku-buku terkait dengan perancangan maupun pembangunan perangkat lunak. Literatur yang dipakai berkaitan dengan hal-hal sebagai berikut. HTML5 Konsep HTML5 pertama kali dikemukakan pada tahun

2 oleh sekelompok peneliti dalam bidang teknologi informasi yang tergabung dalam organisasi Web Hypertext Application Technology Working Group (WHATWG). Spesifikasi HTML5 mereka yang mereka tulis ditujukan untuk menjadikan HTML sebagai aplikasi komputer yang berbasis web. Setelah dikeluarkannya konsep HTML5 oleh WHATWG muncul istilah Web 2.0, di mana web berisi konten dinamis. W3C menyusul dalam penyusunan spesifikasi HTML5 pada tahun Fitur-fitur HTML5 yang dieksplorasi pada Penelitian ini adalah: drag-and-drop, web storage, web SQL, dan Kanvas HTML5. HTML5 Drag-And-Drop Fitur drag and drop merupakan fitur HTML5 di mana JavaScript dapat menangani berkas atau bagian halaman web yang digeser. Sebuah elemen halaman web dapat menerima penggeseran jika elemen tersebut memiliki atribut draggable bernilai true [1]. Sebuah elemen pada halaman web dapat menerima event pada awal serta akhir proses drag. Untuk menerima event tersebut, event listener harus dideklarasi serta diregistrasi. Untuk melakukan registrasi event listener, pengguna perlu menentukan event apa yang akan diberi event listener. Registrasi event listener dilakukan dengan cara memanggil fungsi addeventlistener. Fungsi tersebut memiliki tiga buah parameter yang harus dipenuhi. Ketiga parameter tersebut adalah: (1) nama event; (2) fungsi yang menangani event; serta (3) boolean. Event yang dapat diberi listener antara lain adalah: Dragstart, Dragenter, Dragover, Dragleave, Drop, serta Dragend. Penyimpanan Lokal (Local Storage) Terdapat dua jenis penyimpanan web, yakni penyimpanan sesi dan penyimpanan lokal. Perbedaan di antara keduanya adalah pada usia data yang disimpan. Penyimpanan sesi bertahan selama pengguna berada pada satu halaman web. Sementara itu penyimpanan lokal memiliki usia yang lebih panjang. Walaupun perambah web ditutup dan komputer dimatikan data tetap tersimpan [2]. Penyimpanan lokal dan penyimpanan sesi bekerja layaknya kelas Dictionary pada pemrograman C# yang memiliki indeks dan konten yang disimpan. Variabel Key merupakan indeks sementara Value berisi data yang disimpan. Pada saat ini, penyimpanan lokal dan sesi hanya dapat menyimpan data bertipe data string. Web SQL Pada HTML5 diperkenalkan fitur basisdata yang berada pada sisi client. Basisdata ini diatur oleh perambah web yang digunakan oleh pengguna. Web SQL merupakan Application Proramming Interface (API) yang dapat diimplementasi pada Google Chrome, Opera, serta Safari. SQL yang dipakai menyerupai SQL yang dipakai pada berbagai basisdata lain pada umumnya. Untuk membuka basisdata Web digunakan fungsi opendatabase dengan empat parameter, yakni: (1) nama basisdata, (2) nomor versi basisdata, (3) teks deskripsi basisdata, dan (4) estimasi ukuran basisdata. Pada saat akhir menggunakan basisdata ini, pengguna tidak perlu melakukan penutupan koneksi karena secara otomatis penutupan koneksi ditangani oleh perambah web. Kanvas Kanvas HTML5 merupakan area bitmap yang dapat dimanipulasi dengan menggunakan JavaScript. Kanvas HTML5 memiliki konteks penggambaran yang dapat digunakan untuk menggambar berbagai bangun, menggambar teks, serta menampilkan gambar secara langsung pada sebuah area pada halaman web [3]. Pembelajaran Kolaboratif Pembelajaran kolaboratif merupakan metode pembelajaran yang dapat memudahkan peserta belajar dalam bekerja sama, saling membina, belajar dan berubah bersama. Dengan menyatukan berbagai individu dengan pemahaman yang berbeda-beda terhadap sebuah permasalahan, diharapkan dengan metode ini muncul sebuah gagasan baru akan permasalahan tersebut. Pembelajaran kolaboratif dengan model diskusi dapat meningkatkan partisipasi anggota belajar [4]. Dan dengan ukuran grup diskusi yang tidak terlalu besar, tingkat partisipasi peserta diskusi akan meningkat [5]. DreamShare Dreamshare merupakan aplikasi desktop pembelajaran kolaboratif learning yang menggunakan peta pikiran sebagai media pembelajarannya [6]. Aplikasi Dreamshare merupakan aplikasi pembuat dan penyunting peta pikiran yang dapat berjalan tanpa koneksi internet jika pengguna tidak ingin untuk menjalankan sesi kolaborasi. Pengguna Dreamshare dapat mengajak pengguna lain untuk bertukar pendapat pada sesi kolaborasi dengan memberikan undangan kepada pengguna lain. Pengguna aplikasi Dreamshare dapat saling berkomunikasi pada saat sesi kolaborasi berjalan. B. Analisis dan Perancangan Sistem Deskripsi Umum Pada Penelitian ini dibangun sebuah sistem jejaring sosial untuk pembelajaran kolaboratif yang diberi nama DreamSocial. Fitur utama dalam sistem yang akan dibangun adalah berbagi hasil diskusi. Arsitektur Sistem Penelitian ini dibangun menggunakan kerangka kerja ASP.NET MVC3. Kerangka kerja tersebut memiliki arsitektur tiga tingkat, yakni Model-View-Controller (MVC) [7]. Sistem pada penelitian ini terdiri atas tingkat presentasi, aplikasi, layanan web, model data, serta infrastruktur. Tingkat presentasi berfungsi sebagai penampil ke pengguna. Tingkat aplikasi memiliki fungsi sebagai tingkat yang mengatur logika bisnis aplikasi. Tingkat layanan web berfungsi

3 3 Gambar 2. Drag Foto Teman ke Kotak drop. diunggah secara otomatis setelah diskusi berakhir. C. IMPLEMENTASI Gambar 1. Diskusi Setelah Diunggah ke DreamSocial dari aplikasi desktop Dreamshare. untuk menyediakan layanan untuk digunakan oleh sistem DreamShare. Dengan menggunakan layanan ini, diskusi yang dilakukan dari sistem DreamShare dapat diunggah ke sistem DreamSocial. Tingkat model data merupakan tingkat di mana disimpan model data berupa kelas-kelas yang memiliki hubungan dengan logika bisnis. Pada tingkat ini terdapat kelaskelas yang juga menyediakan persistensi dari model data ke basisdata. Tingkat infrastruktur berisi kelas-kelas yang dasar untuk model data dan persistensi. Deskripsi Singkat Aplikasi Sistem jejaring sosial pada penelitian ini dibangun dengan memiliki beberapa fungsi yang dapat membantu mewujudkan kegiatan pembelajaran kolaboratif. Seperti jejaring sosial yang sudah ada pula, jejaring sosial ini memiliki fungsi pertemanan. Fungsi-fungsi selengkapnya dijelaskan sebagai berikut. Fungsi pertemanan merupakan penghubung antar pengguna yang menjadi jembatan komunikasi utama. Dengan adanya pertemanan, pengguna dapat saling berbagi hasil diskusi. Seorang pengguna sistem dapat menciptakan diskusi dengan memberikan judul serta deskripsi diskusi. Fitur berdiskusi memungkinkan pengguna aplikasi untuk dapat berdiskusi dengan pengguna lain. Pengusul diskusi dapat mengundang pengguna-pengguna lain untuk berdiskusi serta dapat mengunggah gambar diskusi. Diskusi dapat dilakukan dengan menggunakan aplikasi Dreamshare [5] yang kemudian hasilnya diunggah ke Dreamsocial. Agar sebuah diskusi berjalan efisien dan tingkat partisipasi tinggi, maka peserta untuk satu topik diskusi dibatasi sebanyak 20 pengguna. Pengguna dapat melihat kesimpulan-kesimpulan diskusi yang pernah berlangsung, baik diskusi yang diikuti oleh pengguna tersebut maupun yang tidak diikuti oleh pengguna lain. Pengguna sistem dapat mengubah data diri yang ditampilkan ke pengguna-pengguna lain. Diskusi yang dilakukan dengan menggunakan aplikasi Dreamshare dapat Implementasi Unggah Diskusi Unggah diskusi diimplementasi dengan menggunakan web service. Web service yang disediakan adalah untuk log in, untuk mendapatkan daftar teman pengguna, menciptakan diskusi, serta untuk mengunggah pesan-pesan diskusi. Gambar 1 menunjukkan hasil pengunggahan diskusi dari Dreamshare ke DreamSocial. Implementasi Drag-and-Drop Drag-and-drop diimplementasi pada sisi client dilakukan dengan mendaftarkan event listener untuk tiap-tiap foto pengguna. Gambar 2 menunjukkan contoh proses drag foto pengguna. Tiap-tiap foto pengguna dilingkungi oleh tag <div> yang memiliki kelas user_badge. Dengan menggunakan kode javascript ditambahkan event listener. Event yang didaftarkan adalah dragstart serta dragend. Sementara pada kotak yang menerima drop foto pengguna didaftarkan event listener untuk event drop. Implementasi Kanvas Implementasi canvas dan file access diletakkan pada halaman-halaman penciptaan diskusi, halaman berdiskusi, serta halaman pengunggah foto profil. Gambar 3 menunjukkan halaman pengunggahan foto profil di mana pengguna dapat memotong gambar yang hendak diunggah ke sistem. Untuk menampilkan gambar yang hendak diunggah digunakan javascript. Berkas gambar yang dipilih dibaca dengan menggunakan FileAccess dan diubah menjadi URL data. Dari URL data, gambar diubah ke kelas Image yang kemudian ditampilkan ke kanvas. Implementasi Desktop Notification Implementasi dekstop notification pada sistem DreamSocial dilakukan pada fitur notifikasi ajakan diskusi. Jika terdapat ajakan diskusi baru, maka sistem akan menampilkannya dalam bentuk desktop notification yang berisi berita ajakan diskusi serta siapa yang mengajak.

4 4 Tabel 1. Daftar Kolom Tabel Diskusi Pada Sisi Client No. Data Nama Tipe data kolom 1 Identitas (primary key) id INTEGER 2 Nomor identitas userid INTEGER pengguna 3 Judul diskusi title TEXT 4 Deksripsi diskusi desc TEXT 5 Waktu penyimpanan addedon DATETIME Gambar 3. Pemotongan Gambar pada Halaman Pengunggahan Foto Profil Implementasi Geolocation Implementasi fitur Geolocation HTML5 diletakkan pada halaman profil pengguna dan pada halaman utama. Pada halaman profil pengguna geolocation digunakan untuk memperbarui lokasi pengguna. Pada halaman utama, geolocation digunakan untuk fitur pencarian pengguna lain yang berada dekat dengan lokasi pengguna saat ini. Implementasi Local Storage Local storage pada situs DreamSocial diimplementasi untuk menyimpan tautan cepat ke diskusi yang diinginkan pengguna. Dalam implementasi di DreamSocial, pengguna dapat menyimpan hingga enam tautan. Penyimpanan tautan dilakukan dengan mengubah objek tautan menjadi string JSON terlebih dahulu sebelum disimpan ke local storage. Implementasi Web SQL Implementasi Web SQL dan Web Database diletakkan pada halaman penciptaan diskusi. Pada halaman penciptaan diskusi, pengguna dapat menyimpan draf dari diskusi pada sisi client. Tabel yang digunakan untuk menyimpan draf diskusi memiliki kolom-kolom identitas, nomor pengguna, judul serta deskripsi diskusi, serta waktu penyimpanan ditunjukkan pada Tabel 1. III. HASIL DAN DISKUSI A. Pengujian Pengujian Tambahkan Teman Pengujian untuk kasus penggunaan tambahkan teman dilakukan untuk menguji apakah jika seorang pengguna ditaruh di kotak drop di kanan atas halaman, permintaan pertemanan pengguna akan masuk. Pengujian tambahkan teman dilakukan dengan mencari pengguna terlebih dahulu. Kemudian dilakukan proses dragand-drop terhadap salah satu foto hasil pencarian pengguna. Skenario pengujian ditunjukkan pada Tabel 2. Pengujian Nomor Nama Tujuan Pengujian Kondisi awal Skenario Masukan Luaran yang diharapkan Hasil Pengujian Tabel 2. Skenario Uji Tambahkan Teman SUC-D001 tambahkan teman Mengecek apakah fungsi penambahan teman berjalan normal Pengguna masuk ke halaman pencarian pengguna (/Home/Search) 1. Pengguna mencari pengguna 2. Pengguna memasukkan gambar pengguna yang muncul dari hasil pencarian ke kotak drop tambahkan teman di kanan atas halaman. Foto pengguna hasil pencarian 1. Muncul pesan pengguna berhasil ditambahkan 2. Permintaan pertemanan masuk pada halaman daftar teman Berhasil tambahkan teman berjalan sesuai dengan skenario yang diharapkan. Pengujian Publikasi Diskusi Pengujian publikasi diskusi dilakukan untuk mengecek kebenaran implementasi kasus penggunaan publikasi diskusi. Fitur HTML5 yang diuji pada pengujian ini adalah Web SQL. Parameter keberhasilan dilihat dari tampil atau tidaknya diskusi ke halaman profil pengguna yang menerbitkan diskusi. Pengujian publikasi diskusi menghasilkan luaran sesuai harapan. Pengujian Berdiskusi Pengujian berdiskusi bertujuan untuk mengecek apakah obrolan diskusi masuk dan tersimpan di server sehingga dapat dibaca oleh pengguna lain. Kondisi awal yang harus dipenuhi dalam menjalankan pengujian ini adalah pengguna masuk ke halaman diskusi. Kemudian dilakukan pengiriman obrolan. Parameter keberhasilan pengujian ini adalah muncul atau tidaknya obrolan pada saat halaman diunduh ulang. Pengujian berdiskusi berjalan sebagaimana yang diharapkan. Pada pengujian ini fitur HTML5 yang terlibat adalah kanvas. Pengujian Ajak Diskusi Pengujian ajak diskusi adalah pengujian terhadap implementasi kasus penggunaan ajak diskusi. Skenario pengujian dimulai dengan pengguna membuka halaman berdiskusi, kemudian menambahkan pengguna lain sebagai

5 5 peserta. Parameter keberhasilan pengujian dilihat dari muncul atau tidaknya notifikasi ajakan berdiskusi pada penggunapengguna yang diajak berdiskusi. Hasil pengujian ajak diskusi sesuai dengan yang diharapkan. Fitur HTML5 yang terlibat pada pengujian ini adalah drag-and-drop. Pengujian Sunting Profil Pengujian sunting profil merupakan pengujian terhadap fungsi penyuntingan profil pengguna. Keadaan awal yang dipenuhi pada pengujian ini adalah pengguna masuk ke halaman profil (/Profile). Pada halaman tersebut, nama, biografi, serta lokasi pengguna diperbaharui. Parameter keberhasilan pengujian ini adalah ketika halaman dimuat ulang, nama, biografi, serta lokasi pengguna sama seperti setelah diubah. Pengujian berjalan sesuai dengan yang diharapkan. Fitur HTML5 yang diuji pada penyuntingan profil adalah geolocation. [2] Förster, Klaus and Öggl, Bernd. HTML5 Guidelines for Web Developers. CrawfordsVille : Pearson, [3] Fulton, Steve and Fulton, Jeff. HTML5 Canvas. Sebastopol : O'Reilly, [4] Tomsic, Astrid and Suthers, Daniel D. Discussion Tool Effects on Collaborative Learning and Social Network. 2006, Educational Technology & Society, 9, hal [5] Blindley, Jane E., Walti, Christine and Blaschke, Lisa M. Creating Effective Collaborative Learning Groups in an Online Environment. 2009, The International Rev iew of Research in Open and Distance Learning, Vol 1 0, No 3. [6] Mandala, Yohanda. Rancang Bangun Aplikasi Dreamshare - Pembuat Mind Map Berbasis Collaborative Learning. Surabaya : s.n., [7] Freeman, Adam and Sanderson, Steven. Pro ASP.NET MVC 3 Framework. New York : Apress, B. Diskusi Berdasar pengujian yang dilakukan, Drag-and-drop bekerja dengan baik pada perambah web Chrome, Firefox, dan Opera. Kanvas bekerja dengan baik pada Chrome, Firefox, IE, Opera, dan Safari. Local storage berjalan dengan baik pada lima perambah web Chrome, Firefox, IE, Opera, dan Safari. Geolocation dapat bekerja dengan baik pada kelima perambah web yang diuji. Web SQL dan basisdata web dapat berjalan pada Chrome, Opera, dan Safari. IV. KESIMPULAN Kesimpulan yang bisa ditarik dari Penelitian ini adalah bahwa fitur-fitur HTML5 dapat diimplementasikan dengan menggunakan kode-kode Javascript pada sisi client. Local storage dapat digunakan untuk menyimpan string. Objekobjek lain dapat disimpan ke dalam local storage dengan cara diubah terlebih dahulu ke dalam format JSON string. Canvas dapat digunakan untuk memanipulasi gambar. Geolocation dapat mendeteksi lokasi pengguna, namun tidak dapat berjalan tanpa persetujuan pengguna. Drag-and-drop dapat dilakukan dengan baik sehingga data yang diinginkan mampu pindah ke tempat yang dimaksud saat drop dilakukan. Local storage, kanvas, dan geolocation didukung dengan baik pada perambah-perambah web modern. Sementara drag-and-drop dan Web SQL masih didukung sebagian besar perambah web modern. UCAPAN TERIMA KASIH Penulis H.A.P. mengucapkan terima kasih kepada Tuhan Yang Mahaesa, kedua orangtua dan keluarga penulis, dosen pembimbing, dosen dan kepala jurusan Teknik Informatika, kerabat-kerabat dekat, serta berbagai pihak yang telah membantu penulis dalam menyelesaikan penelitian ini. DAFTAR PUSTAKA [1] Bidelman, Eric. Native HTML5 Drag and Drop. HTML5 Rocks. [Online] 30 September [Dikutip: 6 Mei 2012.]