Institutional Repository | Satya Wacana Christian University: Perancangan dan Implementasi HTML 5 Dalam Media Pembelajaran Bahasa Arab

Perancangan dan Implementasi HTML 5 Dalam Media

Pembelajaran Bahasa Arab

Artikel Ilmiah

Diajukan kepada Fakultas Teknologi Informasi

untuk memperoleh Gelar Sarjana Komputer

Oleh:

Ihsan Ardiyan Syahfrudin NIM: 672010074

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Perancangan dan Implementasi HTML 5 Dalam Media

Pembelajaran Bahasa Arab

1) _{Ihsan Ardiyan Syahfrudin,} 2) _{Christ Rudianto,} 3) _Dharmaputra

Taludangga Palekahelu

Fakultas Teknologi Informasi Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50771, Indonesia

Email: 1) xrudianto@yahoo.com, 2) dpalekahelu@yahoo.com, 3) Ihsan.ardiyan@gmail.com

Abstract

The development of technology todays especially technology website has been very rapid the example is HyperText Markup Language 5 or known by the name of HTML 5. HTML 5 is a markup language for structuring and presenting content on the World Wide Web, which is a core technology of the Internet. Learning using the internet media is one of the examples of applications that can be created using HTML 5. In this study, quizzes, interactive learning video also used as a means of learning pronunciation and conversational Arabic. The results of the application of learning in the form of HTML 5 video media and interactive quiz. With the use of these technologies, it can be concluded that the use of HTML 5 in addition to useful technology to support learning and interactive quizzes are also useful as a substitute for the function of most of the plugin.

Key words : HTML 5,pembelajaran, bahasa arab

Perkembangan teknologi dewasa ini terutama teknologi website sudah sangatlah pesat salah satu contohnya adalah HyperText Markup Language 5 atau yang sering dikenal dengan nama HTML 5. HTML 5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, yaitu sebuah teknologi inti dari Internet. Media pembelajaran dengan menggunakan internet merupakan salah satu contoh aplikasi yang dapat dibuat dengan menggunakan HTML 5. Dalam penelitian ini kuis pembelajaran interaktif dan juga video digunakan sebagai sarana pembelajaran pelafalan dan percakapan bahasa arab. Hasil dari pengaplikasian HTML 5 berupa pembelajaran dengan media video dan kuis interaktif. Dengan penggunaan teknologi tersebut maka dapat disimpulkan bahwa penggunaan teknologi HTML 5 selain berguna sebagai penunjang pembelajaran dan kuis interaktif juga berguna sebagai pengganti fungsi sebagian plugin.

Kata kunci : HTML 5, pembelajaran, bahasa arab

1) _{Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas Kristen Satya}

Wacana Salatiga.

1. Pendahuluan

Perkembangan teknologi informasi saat ini mulai mendapat sambutan positif dari masyarakat. Informasi yang terintegrasi, cepat, dan akurat semakin penting dalam mendukung untuk berbagai jenis kegiatan dan tidak terkecuali untuk pembelajaran. Belajar adalah suatu bentuk kegiatan yang kompleksyang di tunjukkan pada hasil pembelajaran perubahan dari belum tahu menjadi lebih tahu. Hal ini tampak pada diri seseorang dimana dia belajar maka responnya akan menjadi lebih baik daripada dia tidak belajar. Salah satu media informasi yang menyediakan itu semua adalah melalui media website. Hal ini diperkuat dari hasil survei yang dilakukan sebelumnya, yang menyebutkan bahwa rata rata responden

tertarik belajar menggunakan media website di internet. Bahasa Arab merupakan bahasa yang digunakan di kitab suci agama

Islam, bahasa komunikasi dan informasi umat Islam. Dalam fase perkembangannya, yakni pada tahun 1973, bahasa arab telah dijadikan sebagai bahasa resmi dalam lingkungan Perserikatan Bangsa-bangsa (PBB) yang sekaligus meningkatkan kedudukan bahasa Arab itu sendiri. Sebab itulah tidak berlebihan jika pengajaran bahasa Arab sekarang ini perlu mendapatkan penekanan dan perhatian seksama, mulai dari tingkat dasar sampai pada lembaga pendidikan tinggi, baik negeri maupun swasta, umum maupun agama, untuk digalakkan dan diajarkan. Dalam pengajarannya tentunya harus disesuaikan dengan taraf kemampuan dan perkembangan siswa. Pada umumnya metode pengajaran pelajaran bahasa arab dilakukan dengan metode ceramah. Metode ceramah adalah penerangan secara lisan atas bahan pembelajaran kepada sekelompok pendengar untuk mencapai tujuan tertentu dalam jumlah yang

relative besar. Bahasa Arab sendiri mempunyai beberapa kesulitan diantaranya tulisan, dan pelafalan atau cara baca.Pendapat tersebut juga diperkuat dari keterangan siswa dan juga guru yang menyatakan bahwa memang terdapat beberapa kesulitan dalam pembelajaran bahasa arab tersebut diantarannya yaitu penulisan, dan pelafalan karena dalam standart kompetensi yang diharpkan yaitu siswa mampu memahami dan menerapkan materi yang ada pada mata pelajaran bahasa arab. Berdasarkan alas an tersebut maka ditemukan pilihan alternative

untuk pembelajaran bahasa arab salah satunya dengan memanfaatkan media internet.

Banyak alasan mengapa internet dipilih sebagai sarana belajar salah satunya karena memungkinkan user dapat memberikan pemaham yang lebih terhadapa sesuatu yang sedang dibahas[1]. Alasan lain yang menjadi sebab mengapa internet dijadikan sebagai media pembelajaran adalah mutimedia. Musik, game, gambar merupakan salah satu metode dalam pembelajaran agar para pengguna lebih tertarik untuk mempelajari suatu hal. Selain hal tersebut

interface juga menjadi faktor penting yang digunakan dalam menarik keinginan pengguna untuk menggunakan sebuah website.

Sebagai media pembelajaran tentunya dituntut dengan interface dan mutimedia yang mendukung karena hal tersebut sangat diperlukan sebagai pendukung media pembelajaran. Sebuah pilihan menarik ketika HTML 5 atau

yang mendukung terhadap fungsi fungsi multimedia yang dibutuhkan para pengembang website agar dapat membuat aplikasi multimedia tanpa tergantung sepenuhnya dengan plugin dikarenakan sudah banyaknya fitur fitur dari plugin

yang sudah terdapat di dalam HTML 5.

Dengan adanya teknologi HTML 5 muncul keinginan mengaplikasikan teknologi HTML 5 ke dalam media pembelajaran bahasa arab yang nantinya teknologi tersebut berguna untuk membantu dalam proses pembelajaran khususnya untuk menyelesaikan masalah dalam pembelajaran yang sering dikeluhkan oleh siswa. Dalam hal ini untuk acuan pembuatan media pembelajaran yang akan dibuat adalah dengan mengambil acuan materi pembelajaran bahasa arab yang digunakan oleh SMP Islam Al - Azhar 18 Salatiga.

2. Tinjauan Pustaka

Sudah banyak contoh penelitian tentang pemanfaatan teknologi HTML 5 atau

HyperText Markup Language 5 diantarannya seperti pembuatan run and jump game menggunakan HTML5 canvas oleh Ainurrofiq Alfaiz pada penelitian tersebut dijelaskan bahwa canvas yang dimiliki HTML 5 dapat digunakan sebagai media pembuatan game yang bertujuan untuk mengasah keterampilan dan refleks anak [2]. Pemanfaatan HTML 5 lainnya yaitu implementasi media pembelajaran interaktif sekolah dasar kelas 5 IPA dan IPS menggunakan HTML 5 oleh Sunardy Iwan Sahputra Sinurat pada pengaplikasian tersebut didaptkan hasil bahwa penggunaan HTML 5 sebagai pendukung media pembelajaran dapat diterima oleh sebagian besar siswa [3]. Implentasi game edukasi untuk media pembelajaran matematika berbasis HTML 5 pada web browser oleh Mukhammad Bagus Muslim adalah penelitian ketiga yang menggunakan HTML 5, dari penelitian tersebut didaptkan hasil bahwa dengan menggunakan fitur multimedia dapat meningkatkan minat siswa terhadap satu pelajaran [4] . Penggunaan HTML 5 pada ketiga penelitian tersebut dapat membuktikan bahawa penggunaan multimedia dalam media pembelajaran dapat membantu dalam proses belajar selain itu multimedia juga dapat meningkatkan minat siswa terhadap satu mata pelajaran.HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru. HTML 5 memiliki penambahan pemanambahan fitur diantaranya :

- Dukungan yang lebih baik untuk penyimpanan secara offline

- Elemen konten yang lebih spesifik, seperti artikel, footer, header, navigation, dan section

- Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Adapun kelebihan HTML5 sendiri adalah :

CSS atau Cascading Style Sheets adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan tata letak sebuah halaman web. CSS ini bersifat embeded pada tag HTML yang artinya menempel atau melekat pada tag HTML. CSS3 merpukan generasi ke-3 dari perkembangan CSS sebelumnya. Jadi pada dasarnya, pengertian CSS3 sama saja dengan pengertian CSS generasi paling awal. Hanya saja terdapat beberapa standar baru untuk CSS3 menggantikan CSS2.[6]

3. Metode dan Perancangan

Penelitian yang dilakukan, diselesaikan melalui tahapan penelitian yang terbagi dalam empat tahapan, yaitu Tahap Identifikasi Masalah dan Pengumpulan Data, Perancangan Sistem, Implementasi Sistem Pengujian serta analisis hasil pengujian.

Gambar 2 Tahapan Penelitian

Gambar 2 menjelaskan tentang tahapan penelitian, tahap pertama yaitu identifikasi masalah dan pengumpulan data. Pada tahap ini dilakukan proses pengidentifikasian masalah yaitu, membuat alternative pembelajaran bahasa arab menggunakan media website untuk kemudian dilakukan proses pengumpulan data yang berhubungan dengan masalah pembuatan media pembelajaran bahasa arab menggunakan HTML 5. Selanjutnya adalah tahap kedua dimana dilakukan proses perancangan sistem yang nantinya akan diterapkan pada permasalahan yang ada. Langkah ketiga merupakan implementasi HTML 5 pada masalah yang sudah ditentukan. Langkah terakir dalam penyelesaian penelitian ini adalah pengujian serta analisis hasil pengujian yang ditujukan untuk mengetahui hasil dari perancangan aplikasi pembelajaran bahasa arab dengan menggunakan HTML 5 ini setelah diterapkan pada permasalahan tersebut.

Identifikasi masalah dan pengumpulan data

Perancangan Sistem

Implementasi Sistem

Metode pengembangan sistem yang akan digunakan dalam penelitian ini adalah prototyping model. Prototyping model merupakan sebuah proses untuk membangun sebuah model dari sebuah sistem berdasarkan dari kebutuhan user, dengan kondisi user tidak memberikan detail input, proses dan detail output. Bagan prototype dapat dilihat pada Gambar 1.

Gambar 3 Model Prototyping [7].

Prototyping melewati tiga proses, yaitu pengumpulan kebutuhan,

perancangan, dan evaluasi Prototype. Pada tahap pengumpulan kebutuhan digunakan beberapa teknik dalam pengumpulan data diantarannya yaitu wawancara, angket (kuesioner) dan dokumen. Pada proses pengumpulan kebutuhan Metode pengumpulan data yang dilakukan dalam penelitian ini yaitu menggunakan sumber data primer dan sumber data sekunder, berikut penjelasannya :

1. Sumber Data Primer

Data primer adalah data yang di kumpulkan oleh penulis secara langsung melalui objek penelitian, yaitu dengan cara observasi dan wawancara

a. Observasi, adalah suatu cara untuk mengumpulkan data dengan melakukan penelitian secara langsung datang ke SMP Islam Al Azhar, Kemudian setelah selesai proses pengamatan maka dilakukan pembagian angket untuk mengetahui perbedaan kesimpulan oleh pengumpul dan siswa. b. Wawancara, adalah suatu cara pengumpulan data secara langsung antara

pengumpul data dengan beberapa siswa dan guru, proses ini digunakan sebagai pembuat rancangan aplikasi sementara.

2. Sumber Data Sekunder

Pada kasus ini hasil data sekunder yaitu berupa dokumen yang digunakan oleh SMP Islam Al Azhar 18 Salatiga.

Pada proses perancangan membutuhkan kode program HTML5 dan CSS 3 kode program ini ditujukan untuk pembuatan desain user interface dan multimedia yang ditujukan kepada siswa dan juga digunakan sebagai pengganti

plugin. Hasilnya berupa animasi dalam pergantian halaman dan juga

aplikasi websitepembelajaran. perancangan ini ditujukan pada pengguna aplikasi yaitu siswa. Perancangan desain apikasi website ini masih dibuat dalam bentuk yang sederhana. Dasar dari pembuatan prototype tahap kedua ini berasal dari kekurangan prototype tahap pertama yaitu belum dibuatnya bentuk desain aplikasi website. Sedangkan kekurangan pada prototype tahap kedua yaitu belum ada implementasi fungsi-fungsi dari tiap bagian desain akan diperbaiki pada

prototype tahap ketiga. Perancangan dilakukan cepat dan rancangan mewakili semua aspek sistem yang diketahui, dan rancangan ini menjadi dasar pembuatan

prototype. Evaluasi Prototype merupakan proses terakhir dimana proses ini Kustomer melakukan evaluasi prototype dengan cara mengulang proses satu sampai dengan tiga yang sudah dibuat dan digunakan untuk memperjelas kebutuhan software. Perulangan dari ketiga proses tadi dilakukan terus menerus hingga semua kebutuhan terpenuhi. Perancangan sistem pada penelitian ini dibuat dengan menggunakan Data Flow Diagram (DFD) yang merupakan alat pembuatan model yang memberikan penekanan hanya pada fungsi sistem. Data flow diagram ini merupakan alat perancangan sistem yang berorientasi pada alur data dengan konsep dekomposisi dapat digunakan untuk penggambaran analisa maupun rancangan[8].

Gambar 4 DFD (data flow diagram) level 0

Gambar 5 DFD (data flow diagram) materi level 1

Gambar 5 menjelaskan tentang DFD dari sub menu pembelajaran bahasa arab pada level satu. Gambar 5 menjelaskan tentang konsep relasi pada proses materi, evaluasi, database dan juga user, dimana semua proses ini saling berketautan antara satu dan yang lainnya. Pertama siswa dapat request data materi dan direspon dengan menmpilkan data materi yang selanjutnya dapat dipelajari oleh siswa. Sedangkan dari admin, admin dapat request data materi yang kemudian direspon dengan pemberian data materi dan data evaluasi yang kemudian bisa diolah dengan memasukan, meng-update, dan juga menghapus data di tampilkan hasilnya sebagai respon berupam view data.

Gambar 6 DFD (data flow diagram) kuis level 1

Gambar 7 Relation Tabel

Gambar 7 merupakan hubungan atar tabel yang digunakan dalam aplikasi ini. Tbkelas atau tabel kelas mempunyai dua entity didalamnya yaitu id_kelas sebagai primary key dan nama_kelas, kemudian ada tbkuis yang didalamnya memiliki sembilan entity yaitu id_kuis sebagai primary key,

id_kelas sebagai foreign key, pertanyaan, name, jawaban_1, jawaban_2, jawaban_3, jawaban_4 dan kunci. Sedangkan tbmateri memiliki id_materi sebagai primary key, id_kelas sebagai foreign key, nama_materi, mater, url_gambar dan name. Tbsoal mempunyai delapan entity diantaranya adalah id_soal yang merupakan primary key, nama_materi sebagai foreign key,

pertanyaan, j1, j2, j3, j4, dan kunci. Tabel terakhir yaitu tblogin, tblogin mempunyai tiga entity yaitu id_user sebagai primary key, username, dan

password.

Gambar 8 menjelaskan tentang entity relationship[10]. Pada aplikasi ini terdiri lima proses yaitu kuis, kelas, materi, soal, dan login. Kuis, kelas, materi dan soal saling berhubungan, kuis dipilih berdasarkan pada kelas, kemudian setiap kelas mempunyai kategori materi, dan dari materi yang ada menjadi soal.

4. Hasil dan Pembahasan

Pemilihan kelas terdapat pada halaman utama, pada pemilihan kelas nantinya digunakan sebagai kriteria sebelum masuk ke sub menu yang ada, contohnya jika ingin memilih kuis, maka langkah pertama adalah memilih kelas kemudian akan ditampilkan pertanyaan sesuai dengan kelas yang dipilih sebelumnya, proses yang sama ketika ingin memilih materi, setelah pemilihan kelas maka akan ditampilkan materi sesuai dengan kelas masing masing seperti yang ditunjukan pada Gambar 9.

Gambar 9 Pemilihan Kelas

Gambar 9 merupakan tampilan saat pemilihan kelas sebelum masuk ke materi, terdapat tiga kelas yang ada dalam applikasi ini yaitu kelas tujuh, delapan, dan sembilan. Setelah pemilihan kelas maka muncul proses pemilihan kategori materi sesuai dengan kelas, proses pemilihan kategori seperti pada kode program 2

Kode Program 1 Perintah untuk Pemilihan kategori materi sesuai dengan kelas

Kode Program 1 menjelaskan pemanggilan kategori materi sesuai dengan kelas, pengambilan data kategori materi ini kemudian ditampilkan di halaman baru bernama detail. Proses setelah pemilihan kategori materi adalah menampilkan materi yang ada.berikut adalah perintah untuk mengambil data materi dari database.Tampilan pada saat pemilihan kategori materi dapat dilihat di Gambar10.

Gambar 10 Kategori Materi

Setelah memilih materi maka akan dimunculkan isi dari materi yang sudah dipilih dan pada kode program 2 dijelaskan tentang bagaimana memilih materi sesuai dengan kategori materi yang telah dipilih, dan Gambar 11 adalah tampilan saaat materi dimunculkan.

Kode Program 2 Perintah menampilkan isi materi

Gambar 11 Isi dari Materi yang Dipilih

1.echo"<div><h4>".$nama_materi."</h4></div>"; 2.echo"<a href='#'>

3.<img src='admin/gmb/".$name."' alt='' width='53' height='65' /></a>"; 4.echo"</div>";

5.echo"<div class='produk1'>"; 6.echo"<table>";

7.echo"<tr>

8.<td>".$id_kelas."</td> 9.</tr>";

10.echo"<tr>

Gambar 12 Evaluasi Materi

Gambar 12 merupakan tampilan saat evaluasi dijalnkan, evaluasi ini adalah proses setalah melakukan pembelajaran dengan melihat materi yang sudah ditampilkan sebelumnya.

Gambar 13 Tampilan Kuis

Gambar 13 adalah tampilan kuis setipa kelas, pada kuis tersebut berisi pertanyaan dari setiap kategori berdasarkan kelas.

Gambar 14 merupakan tampilan video yang terdapat pada halaman awal applikas, video tersebut digunakan sebagai penungjang proses pembelajaran .Terdapat beberapa proses perubahan selama proses pembuatan aplikasi ini salahsatunya adalah tampilan aplikasi yang dapat dilihat pada Gambar 15, Gambar 16, dan juga Gambar 17. Gambar 15 merupakan tampilan pertama kali namun karena dirasa kurang cocok maka tampilan pun berubah menjadi seperti Gambar 16. Gambar 17 merupakan hasil akhir dari tampilan yang digunakan dalam aplikasi.

Gambar 15 Tampilan Pertama

Gambar 17 Tampilan Final Setelah Revisi Kedua

Pengujian aplikasi dilakukan untuk menguji fungsi-fungsi aplikasi hasil implementasi arsitektur dengan melihat DFD atau data flow diagram. Pengujian aplikasi menggunakan teknik black box, yaitu pengujian fungsional tanpa melihat alur eksekusi program, namun cukup dengan memperhatikan apakah setiap fungsi sudah berjalan dengan baik sesuai dengan yang diharapkan. Hal yang diuji dan hasil pengujian dapat dilihat pada Tabel 1.

Tabel 1. Hasil Pengujian Fungsionalitas Program Menggunakan Black Box

No Point Validasi

Berdasarkan hasil pengujian fungsionalitas program pada Tabel 1, dapat disimpulkan bahwa aplikasi pembelajaran bahasa arab dengan menggunakan HTML 5 untuk digunakan sebagai alat bantu pembelajaran atau aplikasi pembelajaran sebagai media sudah memenuhi tujuan penelitian.

Pengujian berikutnya adalah pengujian penerimaan penguna kepada guru. Pengujian dilakukan untuk mengetahui manfaat yang dihasilkan dari aplikasi yang telah dibuat. Pengujian dilakukan melalui kuisioner yang diberikan kepada guru setelah guru melakukan pengujian aplikasi secara langsung. Hasil dari pengujian ini dapat dilihat pada Tabel 2 yang merupakan tabel pengujian penerimaan pengguna kepada guru.

Tabel 2. Hasil Pengujian penerimaan penguna kepada guru

No pengujian SS S R TS

1 Aplikasi pembelajaran bahasa arab sudah berjalan dengan baik

25% 70% 5% 0%

2. Aplikasi pembelajaran bahasa arab sudah membantu proses pembelajaran

20% 78% 2% 0%

3 Aplikasi pembelajaran bahasa arab sudah membantu evalasuai materi

30% 65% 5% 0%

4 Materi yang ditampilkan sudah mewakili materi yang sesungguhnya

40% 60% 0% 0%

Tabel 2 menjelaskan tentang hasil pengujian penerima pengguna kepada guru, terdapar empat kriteria penilaian yang dilakuka oleh guru yaitu SS = Sangat Setuju, S = Setuju, R = Ragu Ragu, dan TS = Tidak Setuju. Berdasarkan Tabel 1 dapat disimpulkan bahwa penerapan HTML 5 dalam pembelajaran bahasa arab bisa dikatakan berhasil dan bisa digunakan sebagai alternatif pembelajaran bahasa arab.

5. Simpulan

6 . Daftar Pustaka

[1] Jaya, Roisu., 2010, Pemanfaatan internet sebagai media pembelajaran di SMPN 02 Malang , http://www.academia.edu/. Diakses tanggal 25 September 2014

[2] Alfaiz, Ainurrofiq, 2012, Pembuatan Run And Jump Game Menggunakan HTML 5 Canvas, http://digilib.uns.ac.id/. Diakses tanggal 9 January 2015

[3] Sinurat, Sunardy Iwan Sahputra, 2012, Implementasi media pembelajaran interaktif sekolah dasar kelas 5 IPA dan IPS menggunakan HTML 5 , http://aksara.pcr.ac.id/ . Diakses Tanggal 9 January 2015

[4] Muslim, Mukhammad Bagus, 2012 , Implentasi game edukasi untuk media pembelajaran matematika berbasis HTML 5 pada web browser , http://trunojoyo.ac.id . Diakses Tanggal 9 January 2015

[5] Kadir, Abdul , 2013, From Zero To a Pro , Yogyakarta : ANDI

[6] Nahasan, Jeanot , 2012 , Mengenal Pengertian dan Perkembangan CSS 3 , http://www.jeanotnahasan.com/ , diakses pada 9 January 2015

[7] Pressman, Roger, 2001, Rekayasa Perangkat Lunak Pendekatan Praktisi (Buku Satu), Yogyakarta: Andi

[8] David, 2003, Implementasi Customer Relationship Management (CRM) pada, 6:113 – 126, http://repository.maranatha.edu/ , Diakses tanggal 23 oktober 2014

[9] Nurwarsito, Heru, 2009, Sistem Informasi Jadwal Perkuliahan dengan Metode Sistem Pakar, 3 : 57 - 61