Perancangan Media Pembelajaran Bahasa Korea Berbasis ...repository.uksw.edu/bitstream/123456789/11241/2/T1_672010014_Full... · fasilitas belajar menulis huruf Korea, sehingga pengguna

i

Perancangan Media Pembelajaran Bahasa Korea Berbasis

Website menggunakan Teknologi HTML5

Artikel Ilmiah

Diajukan kepada

Fakultas Teknologi Informasi

untuk memperoleh Gelar Sarjana Komputer

Peneliti:

Fransisca Angelia Kristiani (672010014)

Adi Nugroho, ST., MMSI.

Mila Chrismawati Paseleng, S.Si., M.Pd.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

September 2015

ii

iii

iv

VvV1 v

vi

vii

Perancangan Media Pembelajaran Bahasa Korea Berbasis

Website menggunakan Teknologi HTML5

1) Fransisca Angelia Kristiani,

2) Adi Nugroho,

3) Mila C. Paseleng

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, Indonesia

Email: 1) [email protected],

2) [email protected],

3) [email protected]

Abstract

Korean language learning media nowadays is still not interactive enough that it

doesn’t really catch people attention. This happened because the expense and facility

of learning Korean language with book, course, or internet was limited and it makes

learning Korean language hard for most of people that interested in it. The purpose

of this research is to create Korean language learning media based on website with

HTML5 technology. This research was conducted in 5 steps, that is analysis and

datas collecting, application designing, appication production, application testing,

and research report and scientific articles writing. The result of this research is a

website that can be used as Korean language learning media. This website displays

materials in form of Hangeul letters that equipped with spelling sounds of every

letter, conversations in Korean language dan Korean letter writing exercises. Test

result shows that this website is very useful for many users in learning Korean

language. Keywords: Korea, Learning Media, Website, HTML5

Abstrak Media pembelajaran bahasa Korea saat ini masih kurang interaktif sehingga kurang menarik

perhatian dari masyarakat. Hal ini dikarenakan keterbatasan biaya dan sarana dalam

pembelajaran bahasa Korea melalui buku, kursus maupun internet membuat sebagian besar

masyarakat peminat bahasa Korea menjadi sulit untuk mempelajari bahasa Korea. Tujuan

penelitian ini adalah merancang media pembelajaran bahasa Korea berbasis website dengan

teknologi HTML5. Penelitian ini dilakukan dalam lima tahapan, yaitu analisis dan

pengumpulan data, perancangan aplikasi, pembuatan aplikasi, pengujian aplikasi dan

penulisan laporan penelitian dan artikel ilmiah. Hasil yang didapatkan dari penelitian ini

adalah sebuah website yang dapat digunakan sebagai media pembelajaran bahasa Korea.

Website ini menyajikan materi berupa huruf Hangeul yang dilengkapi dengan suara pelafalan

setiap huruf, percakapan dalam bahasa Korea dan latihan menulis huruf Korea. Hasil

pengujian menunjukkan bahwa website ini bermanfaat bagi pengguna dalam mempelajari

bahasa Korea.

Kata Kunci : Korea, Media Pembelajaran, Website, HTML5

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

Wacana Salatiga. 2)

Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga. 3)

Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.

1

1. Pendahuluan

Saat ini, budaya Korea sedang berkembang dengan pesat, salah satunya di

Indonesia. Tayangan hiburan berupa film, serial dan lagu-lagu Korea sangat digemari

oleh masyarakat Indonesia. Kuatnya karakter dan identitas para artis Korea mampu

membuat mereka menjadi trendsetter baru dalam dunia musik, seni akting, fashion

dan gaya hidup. Akibatnya terjadi proses pengimitasian identitas diri pada remaja.

Fenomena ini disebut dengan Korean Wave (K-Wave). Anggota komunitas penyuka

budaya Korea mengaplikasikan budaya Korea dengan cara mengimitasi budaya

tersebut dalam kehidupan sehari-hari seperti penampilan (gaya rambut, gaya pakaian

dan make up), penggunaan bahasa Korea, dan penggunaan produk Korea. Hal

tersebut mempunyai sisi positif yaitu rasa ingin tahu remaja untuk belajar bahasa

asing [1]

Bahasa Korea di Indonesia beberapa tahun lalu bukanlah sesuatu yang

menarik, tetapi seiiring gencarnya serangan ekonomi dan Hallyu (Korean Wave)

membuat bahasa Korea menjadi bahasa yang banyak diminati dan diperhitungkan

[2]. Namun, media pembelajaran bahasa Korea saat ini masih kurang interaktif

sehingga kurang menarik perhatian dari masyarakat. Hal ini dikarenakan

keterbatasan biaya dan sarana dalam pembelajaran bahasa Korea melalui buku,

kursus maupun internet membuat sebagian besar masyarakat peminat bahasa Korea

menjadi sulit untuk mempelajari bahasa Korea [3].

Berdasarkan penelitian awal yang dilakukan didapatkan informasi bahwa buku

pembelajaran bahasa Korea tergolong mahal dan susah untuk didapatkan. Untuk

buku pembelajaran bahasa korea hanya berupa teks-teks, dan itu tidak terlalu

mendetail pembelajarannya. Dan untuk kursus bahasa korea juga tergolong mahal.

Terdapat beberapa website yang menyediakan sarana pembelajaran bahasa Korea,

namun materi yang berasal dari website tersebut juga masih sebatas materi bahasa

Korea dalam bentuk teks dan dirasa kurang interaktif, belum ada sarana yang

memungkinkan pengguna untuk berinterasi dengan website, misal untuk belajar

menulis huruf Korea di website ini secara langsung. Oleh karena itu dibutuhkanlah

media pembelajaran alternatif dalam bentuk website interaktif yang dibangun

menggunakan teknologi HTML5, di mana selain menampilkan materi dalam bentuk

teks, website tersebut juga dapat menyediakan materi percakapan melalui video dan

audio serta menyediakan sarana untuk belajar penulisan huruf Korea, sehingga

pengguna dapat berinteraksi langsung dengan website tersebut (lebih interaktif).

Aplikasi berbasis website juga memungkinkan pengguna untuk mengakses website di

manapun dan kapanpun, selama masih ada koneksi internet.

Untuk mengatasi masalah tersebut, dibuatlah suatu alat bantu yang dapat

digunakan untuk membantu dalam mempelajari bahasa Korea, yaitu penggabungan

antara pelajaran bahasa Korea dan program aplikasi dalam bentuk website. Aplikasi

dirancang untuk menampilkan level paling dasar bahasa Korea, menampilkan cara

penulisan, kosa kata, dan bagaimana cara berbicaranya. Aplikasi dibuat

menggunakan teknologi HTML5. Komponen HTML5 yang digunakan pada website

yang dibuat adalah komponen canvas. Komponen canvas ini akan digunakan untuk

fasilitas belajar menulis huruf Korea, sehingga pengguna dapat belajar menulis di

website ini dengan bantuan mouse komputer. Website ini juga dibuat responsive

2

supaya dapat diakses dalam berbagai ukuran layar device. Untuk membuat website

menjadi responsive digunakan teknologi Bootstrap.

2. Kajian Pustaka

Penelitian terdahulu yang pertama berjudul Pengembangan Aplikasi Mobile

Web Percakapan Bahasa Korea Berbasis Lokasi menggunakan Foursquare API.

Aplikasi pada penelitian ini dibuat menggunakan Ruby in Rails framework,

Foursquare API, HTML5, dan JavaScript. Sistem yang dihasilkan diuji dengan

dua metode, yaitu Black Box Test dan Alpha Test. Hasil dari penelitian ini adalah

sebuah aplikasi percakapan bahasa Korea berbasis mobile web dengan

memanfaatkan Foursquare API, GPS dan geo location yang dapat mendeteksi

koordinat pengguna smartphone. Aplikasi ini membantu pengguna untuk mengetahui

percakapan dan kosakata bahasa Korea berdasarkan lokasi serta dapat

mendengarkan cara pengucapannya [4].

Penelitian terdahulu yang kedua adalah penelitian dengan judul Pembuatan

Media Pembelajaran Dasar Bahasa Korea Menggunakan AndEngine Berbasis

Android. Penelitian ini membahas tentang pembuatan media pembelajaran dasar

bahasa Korea pada platform Android mobile. Pembelajaran bahasa Korea yang

dibuat meliputi pembelajaran tentang huruf-huruf Korea (Hangul), Batchim, dan

Batchim Gabungan. Pada aplikasi ini juga terdapat mini game yang digunakan

sebagai latihan dalam pemahaman huruf Korea. Dengan adanya aplikasi ini, para

user bisa belajar berbagai macam huruf bahasa Korea dan cara membacanya [5].

Pada penelitian terdahulu yang pertama, aplikasi difokuskan dalam

pembelajaran percakapan bahasa Korea berdasarkan lokasi percakapan. Namun,

materi percakapan disajikan dalam bentuk tulisan-tulisan, bukan melalui suara.

Sedangkan pada penelitian yang dibuat ini, selain terdapat materi percakapan juga

terdapat materi-materi dasar seperti huruf dasar Korea dan didukung juga dengan

fasilitas belajar menulis huruf korea. Materi percakapan pada penelitian ini

dikembangkan tidak hanya dalam bentuk tulisan namun juga dalam bentuk suara dan

video.

Pada penelitian terdahulu yang kedua, aplikasi dikembangkan dalam bentuk

aplikasi mobile, sehingga pengguna harus menginstal aplikasi di dalam device

Android. Materi yang disajikan sebatas materi huruf dasar Korea, yaitu Hangeul,

Batchim dan Bachim Gabungan. Sedangkan pada penelitian ini, aplikasi dibuat

dalam bentuk website, sehingga pengguna tidak perlu menginstal di dalam device.

Aplikasi tidak hanya sebatas menyajikan huruf dasar Korea, namun juga

menampilkan materi percakapan dalam bentuk video dan pengguna dapat belajar

menulis huruf Korea.

Bahasa Korea adalah bahasa yang paling luas digunakan di Korea, dan

merupakan bahasa resmi Korea Selatan dan Korea Utara. Sistem penulisan bahasa

Korea yang asli, disebut juga Hangul, merupakan sistem yang silabik dan fonetik.

Hangeul diciptakan oleh raja ke-4 di masa kerajaan Chosun, Raja Agung Sejong di

tahun 1443, hingga diamanatkan pada tahun 1446. Huruf Korea terdiri dari 14 huruf

konsonan dan 10 huruf vokal yang digabung untuk membentuk suku kata [6]. Huruf

Korea dibagi menjadi empat bagian, yaitu huruf vokal, huruf konsonan, huruf

gabungan vokal, dan huruf gabungan konsonan. Pada awal penciptaan huruf ini

3

memang hanya terdiri dari vokal dan konsonan saja. Tetapi kemudian pada

perkembangannya ditambahkan lagi huruf gabungan vokal dan huruf gabungan

konsonan.

Media pembelajaran secara umum adalah alat bantu dalam proses belajar-

mengajar. Jenis media pembelajaran dapat di kalasifikasikan secara umum menjadi

media visual, media audio dan media audio-visual [7]. Media visual terbagi dalam 2

jenis yaitu media yang tidak dapat diproyeksikan dan media yang dapat

diproyeksikan. Media yang tidak dapat di proyeksikan adalah media yang tidak

membutuhkan alat bantu seperti proyektor atau layar untuk menyampaikan materi.

Ada banyak media yang tidak dapat diproyeksikan contohnya media benda nyata,

media model dan media visual. Transparansi OHP atau proyektor merupakan contoh

dari media yang dapat di proyeksikan dimana kedua alat ini membutuhkan alat bantu

seperti layar dan proyektor dalam menyampaikan materi.

Secara terminologi, website adalah kumpulan dari halaman-halaman situs, yang

biasanya terangkum dalam sebuah domain atau subdomain, yang tempatnya berada

di dalam World Wide Web (WWW) di Internet [8]. Sebuah halaman web adalah

dokumen yang ditulis dalam format HTML (Hyper Text Markup Language), yang

hampir selalu bisa diakses melalui HTTP, yaitu protokol yang menyampaikan

informasi dari server website untuk ditampilkan kepada para pemakai melalui web

browser. Semua publikasi dari website-website tersebut dapat membentuk sebuah

jaringan informasi yang sangat besar.

Pembelajaran berbasis web merupakan suatu kegiatan pembelajaran yang

memanfaatkan media situs web yang bisa di akses melalui jaringan internet.

Pembelajaran berbasis web merupakan salah satu jenis penerapan dari pembelajaran

e-learning [9].

HTML5 yaitu adalah sebuah bahasa markah untuk menstrukturkan dan

menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet.

HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun

1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011

masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk

memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru,

mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Hingga kini,

HTML5 masih dikembangkan dan sepertinya tidak akan pernah berhenti berkembang

[10].

Manfaat dari pembelajaran berbasis website adalah: 1) Access is available

anytime, anywhere, around the globe. Artinya adalah dengan adanya internet sebagai

sarana komunikasi 2 arah yang banyak digunakan, saat ini seorang peserta didik

memiliki akses yang besar terhadap informasi apapun, termasuk informasi

pembelajaran. Dengan adanya koneksi internet pada laptop, komputer, telepon

genggam, atau koneksi internet di sarana umum, siswa dapat melakukan

pembelajaran di mana saja, 2) Pre-student equipment cost are affordable. Artinya

dari segi biaya, biaya operasional dari setiap siswa untuk mengikut kegiatan

pembelajaran menjadi lebih terjangkau, 3) Student tracking is made easy. Melalui

pembelajaran berbasis web, segala aktifitas pembelajaran siswa akan dicatat dalam

sebuah database yang tersimpan di server. Administrator, guru, orang tua dan siswa

sendiri dapat melihat data-data akademik dari siswa. Hak akses terhadap informasi

4

akademik bisa diatur seusai kebutuhan, 4) Possible “Learning Object” architecture

support on demand, personalized learning. Ini berarti bahwa siswa dapat melakukan

pembelajaran yang lebih terporsonalisasi. Siswa dapat mengakses meteri apa saja

yang harus dipelajari tanpa harus menunggu guru menjelaskan di ruang kelas, 5)

Content is easily updated. Poin terakhir ini merupakan keunggulan terbesar dari

pembelajaran berbasis web. Dengan materi yang sangat cepat berubah-rubah,

pembelajaran yang bersifat konvensional yang menggunakan buku, CD-ROM, tidak

bisa di peraharui dengan mudah, melainkan harus melalui proses revisi cetak ulang

atau pembuatan ulang [9].

3. Metode dan Perancangan Sistem

Penelitian ini diselesaikan melalui tahapan penelitian yang terbagi dalam lima

tahapan, yaitu: (1) Analisis kebutuhan dan pengumpulan data, (2) Perancangan

sistem, (3) Perancangan aplikasi/program, (4) Implementasi dan pengujian sistem,

serta analisis hasil pengujian, (5) Penulisan laporan hasil penelitian.

Gambar 3.1 Tahapan Penelitian (Hasibuan, 2007)

Gambar 1 Tahapan Penelitian

Tahapan penelitian pada Gambar 1, dapat dijelaskan sebagai berikut. Tahap

pertama: analisis kebutuhan dan pengumpulan data, yaitu melakukan analisis

kebutuhan apa saja yang dibutuhkan oleh user. User yang dimaksud dalam penelitian

ini adalah orang-orang yang akan belajar bahasa Korea. Analisis kebutuhan dan

pengumpulan data dilakukan dengan membagikan daftar pertanyaan yang berkaitan

dengan pembelajaran bahasa Korea. Hasil dari daftar pertanyaan ini yang dijadikan

acuan dalam membangun website yang akan dibuat. Berdasarkan daftar pertanyaan

yang dibagikan, didapatkan informasi bahwa dibutuhkan media pembelajaran

alternatif dalam bentuk website yang dapat digunakan untuk belajar bahasa Korea.

Selain itu, pengumpulan data juga dilakukan dengan mengamati beberapa website

pembelajaran bahasa Korea. Website yang dijadikan acuan tersebut adalah

http://lei.snu.ac.kr, http://world.kbs.co.kr dan http://www.seoulina.com. Untuk

analisis materi dilakukan pembahasan dengan orang-orang yang sudah ahli dalam

bidang bahasa korea, seperti guru les bahasa korea, dan orang korea sendiri ikut

Perancangan Aplikasi meliputi Perancangan Proses (UML)

dan Perancangan Antarmuka

Analisis Kebutuhan dan Pengumpulan Data

Pembuatan Aplikasi/Program

Implementasi dan Pengujian Aplikasi,

serta Analisis Hasil Pengujian

Penulisan Laporan Hasil Penelitian

5

membantu. Website tersebut menyediakan sarana untuk belajar bahasa Korea, namun

pengguna merasa kurang nyaman dengan website tersebut karena belum memiliki

fitur responsive, sehingga jika dibuka dalam media dengan ukuran layar yang

berbeda, tampilan website tersebut tidak bisa menyesuaian, sehingga pengguna

merasa tidak nyaman.

Tahap kedua: perancangan sistem yang meliputi perancangan proses

menggunakan diagram Unified Modelling Language (UML) misalnya perancangan

use case diagram, activity diagram, sequence diagram, dan class diagram. Pada

tahap ini juga dirancangan tampilan antar muka website yang akan dibuat.

Tahap ketiga, pembuatan aplikasi/program yaitu membuat aplikasi/program

sesuai kebutuhan sistem berdasarkan perancangan sistem yang telah dilakukan

sebelumnya. Aplikasi yang dibuat dalam bentuk website ini dibuat menggunakan

bahasa pemrograman HTML4, HTML5 dan PHP. Untuk pengkodeannya digunakan

framework CodeIgniter. Metode pengembangan sistem yang digunakan adalah

metode Prototyping.

Tahap keempat: implementasi dan pengujian aplikasi, serta analisis hasil

pengujian, yaitu mengimplementasikan aplikasi yang sudah dibuat kemudian

dilakukan pengujian. Pengujian dilakukan dengan pengujian black box untuk

mengetahui fungsionalitas aplikasi sudah valid atau belum dan selanjutnya dilakukan

pengujian beta untuk mengetahui manfaat aplikasi dari sisi pengguna melalui

pengisian angket. Proses selanjutnya adalah melakukan analisis untuk melihat

apakah aplikasi yang telah dibuat sudah sesuai dengan yang diharapkan atau tidak,

jika belum sesuai maka akan dilakukan perbaikan; dan tahap kelima, penulisan

laporan hasil penelitian, yaitu mendokumentasikan proses penelitian yang sudah

dilakukan dari tahap awal hingga akhir ke dalam tulisan, yang nantinya akan menjadi

laporan hasil penelitian dan artikel ilmiah.

Proses metode yang digunakan adalah metode Prototyping. Metode

Prototyping dapat dilihat pada Gambar 2.

Gambar 2 Metode Prototype

Pada proses metode ini, pengujian aplikasi/program kepengguna dilakukan

secara berulang-ulang sebanyak tiga kali, untuk mendapatkan hasil yang diinginkan

oleh pengguna pengisian angket.

Perancangan proses pada penelitian ini dilakukan menggunakan UML

(Unified Modeling Language). Diagram use case aplikasi yang dibuat ditunjukkan

pada Gambar 3.

6

belajar huruf vokal dan konsonan

Hangul belajar huruf vokal ganda dan

konsonan ganda

belajar huruf konsonan akhir

belajar ungkapan hormat

belajar kata bantubelajar kalimat positif menyangkal

belajar keterangan waktu

mengakses materi dasar

belajar percakapan dasarbelajar percakapan masuk ke

negara Korea

belajar percakakan di kantor bea

cukai

belajar percakapan di dalam taksi

belajar percakapan di hotelbelajar percakapan di restoran

belajar percakapan menanyakan

jalan

belajar percakapan sewa mobilbelajar percakapan perkenalan diri

mengakses materi percakapanpengguna

mengakses cara penulisan

Gambar 3 Diagram Use Case

Pada diagram use case Gambar 3 terdapat 1 aktor yaitu pengguna website.

Terdapat 3 use case parent dalam diagram use case tersebut, yaitu use case

mengakses materi dasar, use case mengakses materi percakapan dan use case

mengakses cara penulisan. pada parent use case mengakses materi dasar terdapat 7

child use case, yaitu use case belajar huruf vocal dan konsonan hangul, belajar huruf

vocal ganda dan konsonan ganda, belajar huruf konsonan akhir, belajar ungkapan

hormat, belajar kata bantu, belajar kalimat positif menyangkal dan belajar keterangan

waktu. Pada parent use case mengakses materi percakapan terdapat 9 child use case

seperti ditunjukkan pada Gambar 3.

mulai

selesai

mengakses

halaman utama

memilih menu

materi dasar

menampilkan menu

materi dasar

memilih huruf vocal

dan konsonan hangul

menampilkan materi huruf

vocal dan konsonan hangul

halaman materi dasarhalaman utamapengguna

Gambar 4 Diagram Activity Belajar Huruf Vocal dan Konsonan Hangul

Gambar 4 merupakan diagram activity untuk proses belajar huruf vocal dan

konsonan hangul. Pengguna mengakses halaman utama website dan memilih menu

materi dasar. Website akan menampilkan halaman menu materi dasar yang berisi

materi-materi dasar yang disediakan, selanjutnya pengguna memilih menu huruf

vocal dan konsonan hangul. Website akan menyajikan halaman yang berisi materi

tentang huruf vocal dan konsonan Hangul.

7

mulai

selesai

mengakses

halaman utama

memilih menu

materi dasar

menampilkan menu

materi dasar

memilih materi huruf vokal

ganda dan konsonan ganda

menampilkan materi huruf vokal

ganda dan konsonan ganda

halaman materi dasarhalaman utamapengguna

Gambar 5 Diagram Activity Belajar Huruf Vocal Ganda dan Konsonan Ganda

Gambar 5 merupakan diagram activity untuk proses belajar huruf vocal ganda

dan konsonan ganda. Pengguna mengakses halaman utama website dan memilih

menu materi dasar. Website akan menampilkan halaman menu materi dasar yang

berisi materi-materi dasar yang disediakan, selanjutnya pengguna memilih menu

huruf vocal ganda dan konsonan ganda. Website akan menyajikan halaman yang

berisi materi tentang huruf vocal ganda dan konsonan ganda.

mulai

selesai

mengakses

halaman utama

memilih menu

materi dasar

menampilkan menu

materi dasar

memilih materi huruf

konsonan akhir

menampilkan materi huruf

konsonan akhir

halaman materi dasarhalaman utamapengguna

Gambar 6 Diagram Activity Belajar Konsonan Akhir

Gambar 6 merupakan diagram activity untuk proses belajar huruf konsonan

akhir. Pengguna mengakses halaman utama website dan memilih menu materi dasar.

Website akan menampilkan halaman menu materi dasar yang berisi materi-materi

dasar yang disediakan, selanjutnya pengguna memilih menu huruf konsonan akhir.

Website akan menyajikan halaman yang berisi materi tentang huruf konsonan akhir.

8

: pengguna

halaman materi

dasar UI

BabPertamaController halaman materi huruf vokal

dan konsonan Hangul

mengakses

memanggil

menampilkan

Gambar 7 Diagram Sequence Belajar Huruf Vocal dan Konsonan Hangul

Gambar 7 menggambarkan proses belajar huruf vocal dan konsonan Hangul.

Proses dimulai ketika pengguna website mengakses halaman materi dasar, bagian

controller BabPertama akan mengarahkan halaman untuk menampilkan halaman

materi huruf vocal dan konsonan hangul.

: pengguna

halaman materi

dasar UI

BabPertamaController halaman materi huruf vokal ganda

dan konsonan ganda

mengakses

memanggil

menampilkan

Gambar 8 Diagram Sequence Belajar Huruf Vocal Ganda dan Konsonan Ganda

Gambar 8 menggambarkan proses belajar huruf vocal ganda dan konsonan

ganda. Proses dimulai ketika pengguna website mengakses halaman materi dasar,

bagian controller BabPertama akan mengarahkan halaman untuk menampilkan

halaman materi huruf vocal ganda dan konsonan ganda.

: pengguna

halaman materi

dasar UI

BabPertamaController halaman materi huruf

konsonan akhir

mengakses

memanggil

menampilkan

Gambar 9 Diagram Sequence Belajar Huruf Konsonan Akhir

9

Gambar 9 menggambarkan proses belajar huruf konsonan akhir. Proses dimulai

ketika pengguna website mengakses halaman materi dasar, bagian controller

BabPertama akan mengarahkan halaman untuk menampilkan halaman materi

konsonan akhir.

4. Hasil Implementasi dan Pembahasan

Aplikasi dibuat dalam bentuk web dan akan menampilkan halaman utama

seperti Gambar 10. Halaman utama website terdiri dari beberapa bagian, yaitu menu

link pada bagian kanan atas, banner website dan di baris ketiga terdapat 3 buah menu

utama yaitu Materi Dasar, Percakapan dan Penulisan.

Gambar 10 Tampilan Halaman Utama Website

Materi dasar yang dipelajari dalam belajar bahasa Korea adalah huruf vocal

dan konsonan Hangul. Gambar 11 merupakan tampilan untuk belajar huruf vocal

dan konsonan Hangul.

Gambar 11 Tampilan Halaman Materi Huruf Vocal dan Konsonan Hangul

Setiap huruf vocal dan konsonan yang disajikan pada Gambar 11 dapat disorot

menggunakan mouse untuk mendengarkan cara pelafalannya. Perintah untuk

mendengarkan cara pelafalan ditunjukkan pada Kode Program 1.

10

Kode Prog

ram 1 Perintah Pelafalan Huruf Vocal dan Konsonan

Pelafalan huruf vocal dan konsonan dibuat menggunakan file small web format

(.swf) yang merupakan file Adobe Flash format. Pemanggilan file .swf ditunjukkan

pada Kode Program 1 pada baris ke-2 dan baris ke-5. Untuk menjalankan file

tersebut, pada browser harus sudah terinstal pluggin Adobe Flash Player. Alasan

mengapa digunakan file .swf karena file ini ringan untuk digunakan dan dimainkan

dalam halaman web. Jika menggunakan player HTML5, file yang digunakan harus

berekstensi .mp3 atau .mp4, di mana akan membuat website menjadi lambat dalam

menampilkan dan memainkan file tersebut.

Untuk belajar setiap percakapan, pengguna dapat memilih link yang tersedia.

Gambar 12 merupakan halaman untuk percakapan dasar.

Gambar 12 Tampilan Halaman Materi Percakapan Dasar

1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="<?= base_url(); ?>assets/swf/swflash" width="640"

height="100">

2. <param name="movie" value="<?= base_url();

?>assets/swf/in_vowels.swf" />

3. <param name="quality" value="high" />

4. <param name='wmode' value='transparent' />

5. <embed src="<?= base_url(); ?>assets/swf/in_vowels.swf"

quality="high"

pluginspage="http://www.macromedia.com/shockwave/download/inde

x.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-

shockwave-flash" width="640" height="100"> </embed>

6. </object>

11

Percakapan dasar yang disajikan pada materi percakapan dasar pada Gambar

12 adalah percakapan dasar dalam aktivitas sehari-hari, seperti mengucapkan salam,

terima kasih, menanyakan kabar, permintaan maaf dan beberapa percakapan dasar

lainnya. Kode Program 2 merupakan perintah untuk menjalankan percakapan dasar

tersebut. Kode Program 2 Perintah Memainkan File Percakapan Dasar

Perintah pada baris ke 2 merupakan perintah untuk memanggil dan memainkan

file percakapan dasar bahasa Korea. File tersebut disimpan dalam folder assets dalam

project. Selain percakapan dasar, pada website ini juga menyajikan percakapan lain,

seperti percakapan saat masuk ke negara Korea, percakapan di kantor bea cukai,

percakapan di dalam taksi, percakapan di hotel, percakapan di restoran, percakapan

menanyakan jalan, percakapan saat menyewa mobil percakapan untuk

memperkenalkan diri. Semua menu percakapan menggunakan file .swf dan

dimainkan dalam halaman website.

Materi ketiga yang disajikan dalam website ini adalah materi untuk belajar

menulis bahasa Korea. Gambar 13 merupakan halaman untuk belajar menulis huruf

Korea.

Gambar 13 Tampilan Halaman Materi Penulisan

1. <object type="application/x-shockwave-flash" data="<?=

base_url(); ?>assets/swf/i_01.swf" id="applicationID"

style="margin:0 10px; width:100%; height:100%;">

2. <param name="movie" value="<?= base_url();

?>assets/swf/i_01.swf" />

3. <param name="wmode" value="transparent" /> Or opaque, etc.

↓ Required paramter or not, depends on application

4. <param name="FlashVars" value="" />

5. <param name="quality" value="high" />

6. <param name="menu" value="false" />

7. </object>

12

Pengguna dapat belajar menuliskan huruf Korea melalui menu Penulisan

seperti terlihat pada Gambar 13. untuk menuliskan huruf Korea, pengguna dapat

menggunakan mouse. Fungsi untuk membuat media dalam menulis ini digunakan

HTML5 seperti ditunjukkan pada Kode Program 3. Kode Program 3 Perintah Menuliskan Huruf Korea

Baris ke-8 pada Kode Program 3 merupakan perintah atau tag HTML5 yang

digunakan dalam membuat media untuk belajar menulis huruf Korea. Komponen

HTML5 yang digunakan adalah komponen canvas. Perintah id=”simple_sketch”

merupakan perintah yang digunakan supaya pengguna dapat menggambar atau

menulis menggunakan mouse.

Kelebihan website ini salah satunya adalah mendukung fitur responsive,

sehingga tampilan website dapat menyesuaikan dengan layar di mana website ini

diakses. Gambar 14 merupakan tampilan website jika dibuka melalui browser

telepon selular.

Gambar 14 Tampilan Website Via Browser Telepon Selular

Pengujian sistem dilakukan dengan 2 (dua) cara, yaitu dengan alpha testing

dan beta testing. Uji alpha testing dilakukan dengan metode blackbox testing, yaitu

dengan cara menguji fungsionalitas aplikasi apakah sudah berjalan sesuai yang

dirancang atau belum. Hasil pengujian blackbox testing dapat dilihat pada Tabel 1.

1. <div class="tools">

2. <a href="#simple_sketch" data-tool="marker">Marker</a>

3. <a href="#simple_sketch" data-tool="eraser">Eraser</a>

4. <a class="popup" href="#!" data-link="<?= base_url();

?>babKetiga/video_1" data-title="Jawab">Jawab</a>

5. <a href="<?= base_url(); ?>babKetiga/index_2">Next</a>

6. </div>

7. <br />

8. <canvas style="border: 1px solid #000;" id="simple_sketch"

width="1100" height="300"></canvas>

9. <div id="video-view" style="height: 368px; width: 391px;">

10. </div> 11. </nav>

13

Tabel 1 Hasil Pengujian Blackbox Testing

No Poin Pengujian Hasil Aksi Hasil

1 Halaman Materi Dasar Jika kursor mouse

didekatkan ke huruf Korea,

maka akan keluar suara

pelafalan huruf tersebut.

Valid

2 Halaman Materi

Percakapan

Jika setiap materi

percakapan dipilih, maka

akan menampilkan video

beserta dengan tulisan dan

suara.

Valid

3 Halaman Penulisan Jika mouse digerakkan pada

daerah textarea, maka akan

muncul tulisan sesuai

gerakan mouse tersebut.

Valid

Berdasarkan pengujian blackbox testing pada Tabel 1, aplikasi dapat berjalan

dengan baik, di mana setiap menu yang telah dibuat dapat berjalan sesuai dengan

hasil perancangan. Pengujian dapat dilanjutkan ke tahap pengujian manfaat.

Pengujian manfaat dilakukan dengan cara wawancara dan penyebaran angket

untuk mengetahui apakah aplikasi yang dibuat bermanfaat untuk pengguna atau

tidak. Pengguna dalam pengujian manfaat ini dipilih secara acak, yaitu orang-orang

yang sedang belajar bahasa Korea dalam berbagai usia. Hasil pengisian angket

dirangkum dalam Tabel 2. Tabel 2 Hasil Angket Pengujian Manfaat

Indikator

Jawaban

Pertanyaan

Ya Cukup Kurang

Tampilan

aplikasi

1 30 0 0

2 26 4 0

Konten

pembelajaran

3 25 5 0

4 30 0 0

5 25 5 0

Pertanyaan nomor 1 yang ditanyakan adalah apakah setiap menu dalam website

ini dapat disajikan dengan jelas. 100% pengguna menjawab ya karena pengguna

merasa website ini menyajikan tata layout halaman web dengan baik, sehingga

pengguna tidak bingung dalam menggunakan setiap menu yang ada. Pertanyaan

nomor 2 adalah apakah tampilan website ini menarik. Sebanyak 86.67% pengguna

menjawab ya karena pengguna merasa bahwa website ini memiliki gambar, video

dan penggunaan warna yang menarik dan 13.33% pengguna menjawab cukup

karena ada beberapa pengguna yang merasa jumlah gambar yang disajikan kurang

banyak, terutama di bagian huruf Korea. Pertanyaan nomor 3 adalah apakah materi

dasar bahasa Korea yang disajikan dalam website ini dapat membantu Anda

mempelajari dasar bahasa Korea. Sebanyak 83% pengguna menjawab ya, karena

14

menurut pengguna, materi sudah mencakup materi-materi utama dalam belajar

bahasa Korea dan 17% pengguna menjawab cukup karena tidak adanya fitur untuk

latihan berbicara / speaking. Pertanyaan nomor 4 adalah apakah materi percakapan

yang disajikan dalam website ini bermanfaat bagi Anda dalam belajar percakapan

dengan bahasa Korea. Sebanyak 100% pengguna menjawab ya karena dengan

adanya materi percakapan dalam bentuk video membuat pengguna merasa mudah

belajar percakapan dengan bahasa Korea. Pertanyaan nomor 5 adalah apakah materi

penulisan huruf Korea dalam website ini bermanfaat bagi Anda dalam belajar

menulis huruf Korea. Sebanyak 83% pengguna menjawab ya karena pengguna

merasa senang dengan adanya fitur untuk menulis menggunakan mouse dalam

website ini dan 17% pengguna menjawab cukup karena ada beberapa pengguna yang

merasa fitur penulisan dalam website belum bisa mendeteksi tingkat kesalahan dalam

penulisan huruf Korea. Berdasarkan hasil daftar pertanyaan yang dibagikan

didapatkan bahwa website ini dapat memberikan manfaat bagi pengguna dalam

belajar bahasa Korea yang terdiri dari materi dasar bahasa Korea, percakapan sehari-

hari dan penulisan huruf Korea.

5. Simpulan

Berdasarkan penelitian yang telah dilakukan, dapat disimpulkan bahwa aplikasi

pembelajaran bahasa Korea dapat dikembangkan dalam bentuk website, yaitu dengan

menggunakan HTML4, HTML5 dan file .swf untuk menyajikan konten suara dan

video percakapan. HTML5 digunakan untuk menyediakan media dalam belajar

menulis huruf Korea. Kelebihan dari website ini adalah responsif. Hasil pengujian

menunjukkan bahwa website ini bermanfaat bagi pengguna dalam belajar bahasa

Korea yang terdiri dari belajar materi dasar bahasa Korea, percakapan dan belajar

menulis huruf Korea.

Namun, ada beberapa masukkan dari pengguna, yaitu untuk materi huruf dasar

Korea perlu dibuat lebih menarik, misal dengan menambahkan gambar-gambar. Jenis

materi juga perlu ditambah dengan materi speaking dari pengguna. Untuk materi

latihan penulisan huruf Korea juga perlu ditambahkan fitur untuk mendeteksi tingkat

kesalahan pengguna dalam belajar penulisan.

6. Pustaka

[1] Galih, Khairunnisa. 2013. Demam Korean Wave (K-WAVE) DI Kalangan

Remaja. Tesis. Purwokerto: Fakultas Ilmu Sosial dan Politik Universitas

Jenderal Soedirman.

[2] Lestari, Mustiana. 2011. Cepat Bicara Bahasa Korea Sehari-hari. Jakarta :

Indonesia Tera.

[3] Arifina, Bulkis Fadilah. 2011. Pembuatan Aplikasi Pengenalan Bahasa Korea

untuk Pemula dengan Menggunakan Android Versi 2.2 (Froyo).

http://library.gunadarma.ac.id/ (diakses tanggal 12 Maret 2015).

15

[4] Ardiansyah, Na’im, Rati Dian. 2013. Pengembangan Aplikasi Mobile Web

Percakapan Bahasa Korea Berbasis Lokasi menggunakan Foursquare API.

Yogyakarta.

http://ardiansyah.tif.uad.ac.id/publications/FullPaperArdiansyah_KauniaREVI

SED.pdf. (Diakses tanggal 10 Agustus 2015).

[5] Tjahjono, Valenciana. 2013. Pembuatan Media Pembelajaran Dasar Bahasa

Korea Menggunakan AndEngine Berbasis Android. Skripsi: Salatiga: Fakultas

Teknologi Informasi UKSW.

[6] Maharani, Kireina. 2010. Ngomong Korea Ala Orang Korea. Yogyakarta :

Fortressbooks.

[7] Adriani. 2009. Berbagai Jenis Media Pembelajaran. http://www.edu-

articles.com/berbagai-jenis-media-pembelajaran/. (Diakses 4 Maret 2014).

[8] Agung, Gregorius. 2000. Membuat Homepage Interaktif Dengan CGI/Perl.

Jakarta: PT. Elex Media Koputindo.

[9] Aripin, 2010. Pembelajaran Berbasis Web. Universitas Pendidikan Indonesia.

[10] Agung, Gregorius. 2012. Buku Pintar HMTL5+CSS3+Dreamweaver CS6.

Yogyakarta: Jubilee Enterprise.