pembelajaran bhs ing uksw

19
3 1. Pendahuluan Perkembangan dan pengembangan website saat ini sangat cepat. Website dikembangankan dari berbagai sisi seperti bentuk, tamplate, desain editor dan tampilan. Bahasa pemrograman yang digunakan juga mengalami perubahan seperti HTML (Hypertext Markup Language). Saat ini W3C (World Wide Web Consorsium) sedang dalam proses pembangunan HTML5. HTML5 menggantikan standardisasi bahasa HTML, XHTML, dan HTML DOM.[1] Keistimewaan HTML5 antara lain adalah fitur canvas yang berfungsi untuk menggambar dengan menggunakan javascript, tanpa menggunakan plug-ins[2]. Fitur canvas dari HTML5 tidak membutuhkan instalasi perangkat pihak ketiga. Selain itu, HTML5 juga memiliki fitur untuk melakukan drag-and-drop, serta memainkan musik dan video. Dengan perkembangan teknologi ini juga mengakibatkan pembelajaran Bahasa Inggris dasar tidak lagi dilakukan oleh anak-anak dengan mengikuti sistem pembelajaran yang konvensional, yang mengharuskan untuk hadir di kelas pada jam-jam tertentu tapi lebih fleksibel karena pembelajaran bahasa inggris sudah bersifat online atau berbasis web.[3]. Faktanya anak usia pre-school saat ini sudah menggunakan tablet Pc seperti ipad yang memudahkan mereka untuk melakukan proses pembelajaran bahasa inggris dasar tanpa dibatasi ruang dan waktu. Masalah lain yang ada yaitu banyak website yang tidak interaktif dan kurang menarik, yang biasanya hanya berupa tulisan-tulisan yang dapat membuat siswa jenuh. Sebuah website sebagai media pembelajaran membutuhkan tampilan yang lebih animatif, menarik dan dapat membantu siswa memahami materi khususnya Bahasa Inggris dasar dengan benar dan cepat. Pengoprasian pembelajaran bahasa inggris dasar berbasis web juga harus mudah karena penggunanya adalah anak pre-school. Untuk itu penulis menggunakan HTML5 dalam membangun sebuah media pembelajaran bahasa inggris dasar berbasis web, karena keunggulan HTML5 dengan fitur canvas-nya dalam pembuatan animasi , tidak tergantung pada plug-ins dalam pengoprasiannya, serta dapat di jalankan di berbagai tablet Pc dan smartphone dan diberbagai browser. 2. Tinjauan Pustaka 2.1 Penelitian Terdahulu Media pembelajaran asinkronus berbasis web sebagai media alternatif pembelajaran matematika dijenjang sekolah dasar merupakan hasil penelitian dari I Nyoman Sukajaya yang mengimplementasikan rancangan pembelajaran matematika SD kelas 4 menggunakan skrip ASP dengan bahasa pemrograman Visual Basic 6.0. Pengimplementasian perangkat lunak pembelajaran matematika berbasis web yang dibangun, bertujuan untuk menghasilkan rancangan dan implementasi media alternatif pembelajaran matematika di SD yang mampu mengatasi hambatan klasik pada pembelajaran tradisional, yakni dimensi ruang dan waktu. Rancangan pembelajaran ini menganut sistem basis data sebagai pusat

Upload: alfisyah-liasari-haha

Post on 23-Oct-2015

32 views

Category:

Documents


2 download

TRANSCRIPT

3

1. Pendahuluan

Perkembangan dan pengembangan website saat ini sangat cepat. Website

dikembangankan dari berbagai sisi seperti bentuk, tamplate, desain editor dan

tampilan. Bahasa pemrograman yang digunakan juga mengalami perubahan

seperti HTML (Hypertext Markup Language). Saat ini W3C (World Wide Web

Consorsium) sedang dalam proses pembangunan HTML5. HTML5 menggantikan

standardisasi bahasa HTML, XHTML, dan HTML DOM.[1] Keistimewaan

HTML5 antara lain adalah fitur canvas yang berfungsi untuk menggambar dengan

menggunakan javascript, tanpa menggunakan plug-ins[2]. Fitur canvas dari

HTML5 tidak membutuhkan instalasi perangkat pihak ketiga. Selain itu, HTML5

juga memiliki fitur untuk melakukan drag-and-drop, serta memainkan musik dan

video. Dengan perkembangan teknologi ini juga mengakibatkan pembelajaran

Bahasa Inggris dasar tidak lagi dilakukan oleh anak-anak dengan mengikuti

sistem pembelajaran yang konvensional, yang mengharuskan untuk hadir di kelas

pada jam-jam tertentu tapi lebih fleksibel karena pembelajaran bahasa inggris

sudah bersifat online atau berbasis web.[3]. Faktanya anak usia pre-school saat ini

sudah menggunakan tablet Pc seperti ipad yang memudahkan mereka untuk

melakukan proses pembelajaran bahasa inggris dasar tanpa dibatasi ruang dan

waktu. Masalah lain yang ada yaitu banyak website yang tidak interaktif dan

kurang menarik, yang biasanya hanya berupa tulisan-tulisan yang dapat membuat

siswa jenuh. Sebuah website sebagai media pembelajaran membutuhkan tampilan

yang lebih animatif, menarik dan dapat membantu siswa memahami materi

khususnya Bahasa Inggris dasar dengan benar dan cepat. Pengoprasian

pembelajaran bahasa inggris dasar berbasis web juga harus mudah karena

penggunanya adalah anak pre-school. Untuk itu penulis menggunakan HTML5

dalam membangun sebuah media pembelajaran bahasa inggris dasar berbasis web,

karena keunggulan HTML5 dengan fitur canvas-nya dalam pembuatan animasi ,

tidak tergantung pada plug-ins dalam pengoprasiannya, serta dapat di jalankan di

berbagai tablet Pc dan smartphone dan diberbagai browser.

2. Tinjauan Pustaka

2.1 Penelitian Terdahulu

Media pembelajaran asinkronus berbasis web sebagai media alternatif

pembelajaran matematika dijenjang sekolah dasar merupakan hasil penelitian dari

I Nyoman Sukajaya yang mengimplementasikan rancangan pembelajaran

matematika SD kelas 4 menggunakan skrip ASP dengan bahasa pemrograman

Visual Basic 6.0. Pengimplementasian perangkat lunak pembelajaran matematika

berbasis web yang dibangun, bertujuan untuk menghasilkan rancangan dan

implementasi media alternatif pembelajaran matematika di SD yang mampu

mengatasi hambatan klasik pada pembelajaran tradisional, yakni dimensi ruang

dan waktu. Rancangan pembelajaran ini menganut sistem basis data sebagai pusat

4

pengetahuan yang diimplementasikan melalui simulasi client-server pada sebuah

Personal Computer. Basis data pengetahuan dikelola melalui paket aplikasi

Microsoft Acces. [4]

Penelitian terbaru dari Strategy Analytics, menyatakan bahwa penjualan

smartphone yang mengadopsi HTML5 akan terus meningkat pada tahun 2011

sampai 2013 mendatang. HTML5 telah dengan cepat menjadi teknologi tinggi

yang membantu pertumbuhan smartphone, fitur ponsel, tablet, notebook, PC

desktop, televisi dan kendaraan. Pertumbuhan untuk HTML5 didorong oleh

permintaan yang kuat dari beberapa vendor hardware dan pengembang perangkat

lunak di Amerika Utara, Eropa dan Asia yang ingin mengembangkan layanan

media yang kaya di beberapa platform, termasuk perusahaan seperti Adobe,

Apple, Google dan Microsoft." Salah satu smartphone yang mengusung teknologi

HTML5 adalah iPone 4S. [5]

Dari dua penelitian terdahulu yang sudah ada, muncul pemikiran untuk

menggabungkan antara HTML5 dengan media pembelajaran berbasis web, karena

melihat media pembelajaran berbasis web masih dibangun dengan menggunakan

visual basic 6.0. Media pembelajaran yang dipilih untuk menunjang penggunaan

HTML5 yang dapat dijalankan disemua platform yang ada, adalah media

pembelajaran bahasa inggris dasar. Media pembelajaran bahasa inggris berbasis

web yang dibangun menggunakan HTML5 akan memberikan kemudahan dalam

pembuatan web maupun kemudahan dalam pengoprasiannya.

2.2 Konsep Dasar Web

Secara terminology ,website adalah kumpulan dari halaman-halaman situs

yang biasa terrangkum dari sebuah domain atau subdomain, yang tempatnya

berada di World Wide Web di internet.[6]

Website merupakan kumpulan halaman yang menampilkan informasi data,

teks, gambar, data animasi, suara dan gabungan dari semuanya, baik yang bersifat

dinamis maupun yang bersifat statis yang membentuk suatu rangkaian bangunan

yang saling terkait dengan jaringan-jaringan halaman atau Hyperlink.

2.3 Media Pembelajaran

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.

5

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.

Media audio terbagi menjadi 2 jenis yaitu radio dan kaset-audio. Radio

merupakan perlengkapan elektronika yang dapat digunakan untuk mendengarkan

berita yang bagus dan aktual dan dapat mengetahui beberapa kejadian dan

peristiwa-peristiwa penting dan baru.

Kaset Audio yang sering digunakan di sekolah memiliki keuntungan yaitu

merupakan media yang ekonomis karena biaya pengadaan dan perawatan murah.

Media Audio-Visual adalah media yang paling baru dan paling efektif dan

efisien karena menggabungan media audio dan visual.Media ini terbagi menjadi 2

yaitu media video dan media komputer. Media video berupa film banyak

dikembangkan untuk keperluan pembelajaran dan biasa dikemas dalam bentuk

VCD.

Media komputer dan internet memiliki kelebihan yaitu mampu

menampilkan teks, gerak, suara dan gambar, komputer juga dapat digunakan

secara interaktif dalam dua arah, bahkan komputer yang terhubung dengan

internet dapat memberikan keleluasaan dan pemahaman tentang materi yang lebih

baik dan cepat.

2.4 Pembelajaran Bahasa Inggris Dasar Pre-school

Pre-school bukan hanya dapat dilakukan di sekolah, tetapi dapat juga di

lakukan di rumah. Maria Herlina Limyati, M.Si, P.Si, dalam salah satu

pernyataannya yang di muat di situs lifestyle.okezone.com menyatakan bahwa

seorang anak sesungguhnya dapat merasakan suasana pre-school di dalam rumah.

Ada pendekatan pembelajaran yang dapat dilakukan oleh orang tua yaitu

pendekatan montessori dan high.[8]

Montessori mengajarkan kepada anak pentingnya semua makhluk hidup. Selain

membaca , bahasa dan matematika, anak juga diajarkan budaya, binatang, dan

tumbuhan. Pendekatan montessori cocok untuk anak yang ingin merasakan

lingkungan belajar sesuai yang dibutuhkan mereka. Ada 5 fokus tentang

pendekatan montessori seperti:

a. Kehidupan Praktis adalah mengajarkan bagaimana anak menjalani

kehidupan sehari-harinya. Contohnya mengikat sepatu, menyiapkan

makan dan minum dan mandi.

b. Kesiapan indra adalah mengajarkan anak berlatih panca indranya,

contohnya mengajarkan anak di luar rumah.

c. Bahasa dan seni adalah mengajarkan anak tentang penguasaan bahasa dan

seni. Fokus ini dapat dilakukan dengan mendengarkan musik kepada anak,

dan untuk mengasah kemampuan bahasanya bisa dimulai dengan

6

memperkenalkan dengan kosa kata yang dapat disajikan dalam bentuk

permainan gambar dan kata.

d. Matematika dilakukan dengan mengenalkan angka. Selain di ajarkan

dengan gambar dan permainan. Pembelajaran dapat dilakukan dengan

mengajak anak beraktifitas di luar.

e. Budaya mengajarkan tentang budasa bangsa kepada anak pre-school. Ini

dapat dilakukan dengan mendengarkan musik daerah kepada anak dan

juga dapat dilakukan dengan memutar film animasi yang bertemakan

cerita rakyat Indonesia.

2.5 Pembelajaran Berbasis Web

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]. Fungsi dan manfaat dari pembelajaran berbasis web

antara lain:

a. Access is available anytime, anywhere, around the globe. Artinya adalah

dengan adanya internet sebagai sarana komunikasi 2 arah yang sangat banyak

digunakan, saat ini seorang peserta didik memiliki akses yang besar terhadapt

informasi apapun, termasuk informasi pembelajaran. Dengan adanya koneksi

internet pada laptop, komputer, telepon genggam, atau koneksi internet di

sarana umum, siswa dapat melakukan pembelajaran dimana saja.

b. Pre-student equipment cost are affordable. Artinya dari segi biaya, biaya

oprasional dari setiap siswa untuk mengikut kegiatan pembelajaran menjadi

lebih terjangkau.

c. 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 akademik

bisa diatur seusai kebutuhan.

d. 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.

e. 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 mebuatan ulang.

7

2.6 Teknologi HTML5

HTML5 memiliki banyak fitur baru yang dapat membuat HTML lebih unggul

dan cocok untuk membentuk aplikasi yang berbasis web yang di pakai untuk

menunjang pembuatan media pembelajaran Bahasa Inggris berbasis website.[10]

Beberapa fitur baru HTML5 antara lain:

Native Video and Audio adalah tag yang berfungsi untuk menyisipkan file

audio dan video tertentu. Berbeda dengan versi HTML sebelumnya yang harus

menyisipkan flash untuk memutar audio dan video. HTML5 akan mudah

menyisipkan file multimedia kedalam web.

Canvas Drawing API adalah fitur baru yang berfungsi untuk menggambar

menggunakan JavaScript. Canvas berfungsi untuk membuat web yang

interaktif tanpa membutuhkan plug-in seperti flash.

Local Storage berfungsi untuk menggantikan cache sebagai penyimpanan

history halaman web. Memungkinkan web untuk menyimpan data cache lebih

besar di tempat pemyimpanan lokal daripada cache pada browser biasa.

Web Worker adalah threading pada saat komputer melambat yang disebabkan

javascript. Sehingga ketika JavaScript melakukan banyak aktifitas sekaligus,

kinerjanya tidak akan terhambat dan lambat. Semantics adalah fitur yang sering digunakan untuk web developers untuk

membuat web lebih dinamis dan menarik.

2.7 Arsitektur HTML5

Arsitektur dasar dari HTML5 sebenarnya sama dengan versi HTML

sebelumnya, karena HTML5 merupakan hasil upgrade dari HTML sebelumnya,

dan tidak ada perubahan arsitektur dari HTML versi sebelumya. HTML5 dibuat

untuk mengatasi masalah yang di alami oleh HTML versi sebelumnya yakni

masalah ketergantungan terhadap plug-in yang dapat membuat kinerja dari CPU

menjadi lambat.

HTML5 merupakan sebuah Bahasa standar pemrograman pembuatan

website, yang nanti akan dibaca oleh web browser. HTML5 memberikan

dukungan standar untuk beberapa fitur yang sebelumnya tidak mungkin bisa

digunakan tanpa adanya plug-in, misalnya ada beberapa API untuk drawing, dan

soket, sedangkan tidak semua browser mendukung plug-in. Plug-in biasa di blok

dan di-disable oleh komputer, serta bisa menjadi sasaran hacking.

Spesifikasi HTML5 tidak hanya memberikan perintah apa yang seharusnya

browser lakukan ketika mereka melakukan proses, tetapi juga memberikan

fasilitas kepada browser untuk dapat langsung menjalankan atau mengeksekusi

perintah. Dengan adanya HTML5 pembuat web browser dapat lebih menghemat

waktu dalam menghadapi kesalahan sintaks.

8

3. Metode Penelitian

Metode perancangan sistem menggunakan metode Waterfall. Metode

waterfall adalah metode yang sifatnya sistematik dan sekuensial, dimana tiap

tahap yang dilalui harus menanti tahap yang sebelumnya selesai dikerjakan.

Metode waterfall merupakan metode yang sesuai dengan kasus yang dibahas,

yakni dalam Perancangan Media Pembelajaran Bahasa Inggris Dasar berbasis

Website Menggunakan HTML5. Metode ini dipilih dengan beberapa alasan

karena sifatnya sistematik dan sekuensial. Keuntungan dari model waterfall ini,

yaitu setiap tahapan akan dievaluasi secara teliti untuk mendapatkan hasil yang

maksimal.

Gambar 1 Struktur Metode waterfall [11]

Tahapan-tahapan dari metode waterfall adalah tahapan requirements yang

berfungsi untuk mengumpulkan data dan menganalisa kebutuhan sistem yang

dikembangkan berdasarkan permintaan pengguna sistem. Kegiatan dari tahapan

requirements dalam penelitian adalah pengumpulan data secara langsung dengan

metode wawancara kepada narasumber yang berkompeten di bidang pembelajaran

Bahasa Inggris dasar dan juga metode kepustakaan untuk menunjang data yang

diperoleh dari hasil wawancara. Proses wawancara dilakukan dengan mendatangi

sebuah pre-school di kota Solo, yang bernama “Smart” Pre-school. Proses

wawancara di lakukan terhadap bapak Willy Setiawan.S.Pd selaku kepala sekolah.

Pokok wawancara yang di tanyakan adalah materi apa yang di berikan di pre-

school dan bagaimana cara penyajian materi bahasa inggris dasarnya. Dari

wawacara yang sudah dilakukan hasilnya adalah materi yang disampaikan adalah

kosa kata yang mencakup dari dasar bahasa inggris seperti warna, huruf, angka,

dan bentuk. Dan juga dijelaskan bahwa proses pembelajaran dilakukan dengan

menggunakan textbook atau alat peraga. Selain wawancara, dilakukan studi

kepustakaan dimana untuk menunjang penggunaan HTML5 dalam membuat

rancang bangun media pembelajaran bahasa inggris dasar berbasis web

menggunakan HTML5. Tahap kedua adalah tahapan analysis sistem yang

berfungsi untuk mendapatkan gambaran sistem yang akan dikembangkan sesuai

keinginan penguna. Kegiatan yang dilakukan pada tahapan ini dilakukan

perancangan proses sistem dan perancangan antar muka atau interface. Setelah

9

merancang proses sistem dan interface selesai, akan dilakukan evaluasi terhadap

hasil rancangan. Tahap ketiga adalah tahapan implementation and unit testing

yang berfungsi untuk membuat dan menguji coba aplikasi. Kegiatan yang

dilakukan pada tahapan ini yaitu mulai membuat hasil rancangan dari tahapan

sebelumnya dengan menggunakan HTML5. Pada tahapan ini juga dilakukan

proses uji coba, untuk mengetahui apakah aplikasi ini memiliki kesalahan dalam

pembuatannya. Tahap keempat adalah tahapan integration and system testing

yang berfungsi untuk menyatukan program dan melakukan pengujian sistem,

apakah benar-benar memberikan manfaat serta memudahkan pengguna dalam

pemakaiannya sehingga bisa menciptakan sebuah sistem yang terkomputerisasi

dengan baik. Pengujian dilakukan secara langsung terhadap siswa di “SMART”

pre-school, selain itu pengujian dilakukan pengujian secara tidak langsung, yaitu

user atau pengguna bisa melakukan pembelajaran dimana saja. Tahapan terakhir

yaitu operation and maintenance yang berfungsi menjaga dan merawat, serta

terus dievaluasi kelemahan-kelemahan yang ada untuk mendapatkan hasil yang

maksimal.

3.1 Perancangan Sistem

Gambar 2 Use Case Diagram Sistem

Gambar 2 merupakan gambaran use-case dari sistem pembelajaran Bahasa

Inggris berbasis website menggunakan HTML5. Use-case di atas memiliki dua

actor yaitu admin dan user. Admin memiliki fungsi lebih dibanding dengan

dengan user. Admin dapat melakukan login ke dalam database yang ada,

sedangkan user hanya dapat melakukan proses pembelajaran saja. User harus

melakukan proses registrasi untuk dapat melakukan kegiatan pembelajaran

Bahasa Inggris. Seorang administrator dapat melakukan pengolahan database

hasil quiz, dan database user, sedangkan user dapat melakukan proses

pembelajaran Bahasa Inggris seperti: pembelajaran bentuk, pembelajaran huruf,

pembelajaran angka, dan pembelajaran warna. User juga dapat mengikuti quiz

10

yang ada dalam setiap proses pembelajaran, serta dapat melihat hasil dari pada

quiz yang sudah di ikuti.

3.2 Perancangan Basis Data

Dalam perancangan aplikasi pembelajaran bahasa inggris dasar diperlukan

sebuah media penyimpanan berupa basis data. Basis data akan digunakan sebagai

media penyimpanan data yang ada dalam aplikasi pembelajaran bahasa inggris

dasar. Aplikasi ini membutuhkan dua tabel masing-masing adalah tabel member

dan tabel test.

Tabel member berfungsi untuk menyimpan informasi data member yang

sudah melakukan registrasi, sehingga user dapat melakukan proses login ke dalam

aplikasi. Id merupakan primary key dimana tidak ada user yang mempunyai id

yang sama. Informasi lain dari Tabel member dapat dilihat pada Tabel 1.

Tabel 1 Tampilan dari tabel member

Tabel test berfungsi untuk menyimpan informasi data hasil test yang sudah

di lakukan oleh user di aplikasi proses pembejaran bahasa inggris dasar berbasis

web. Id_member dalam tabel merupakan primary key dimana id_member ini

adalah id yang di miliki oleh user yang sudah melakukan proses registrasi.

Informasi lain dari Tabel test dapat dilihat pada Tabel 2.

Tabel 2 Tampilan dari tabel test

Nama Kolom Tipe Data Lebar Data

ID Int 11

ID_member Int 11

Quiz Varchar 255

Tanggal Datetime

Jumlah Int 11

Berhasil Int 11

Nilai Int 11

.

Nama Kolom Tipe Data Lebar Data

ID Int 11

Nama Varchar 255

Umur Int 11

Alamat Text

Sekolah Varchar 255

Username Varchar 255

Password Varchar 255

11

JUDUL WEB

Home Pembelejaran Login Register

GAMBAR

Pengantar Media Pembelajaran Bahasa Inggris Dasar Berbasis Website Menggunakan HTML5

Tabel member dan tabel tes memiliki hubungan atau relasi.Relasi antara tabel

member dan tabel test adalah one to many. Setiap ID dapat memiliki banyak ID

tabel test. Penghubung antara tabel member dan tabel tes adalah ID pada tabel

member sebagai primary key dan ID_member pada tabel tes sebagai foraign key

Relasi dari tabel member dan tabel test dapat dilihat di Gambar 5

Gambar 3 Tampilan relasi tabel

3.3 Perancangan Antar Muka

Perancangan antar muka merupakan langkah akhir yang dilakukan dalam

tahap perancangan. Perancangan antar muka ini memberi gambaran bagaimana

tampilan antar muka yang akan digunakan dalam pengembangan aplikasi media

pembelajaran Bahasa Inggris berbasis website menggunakan HTML5.

Perancangan antar muka merupakan media berkomunikasi antara user dan

aplikasi.

Gambar 4 Rancangan Halaman Home

Tabel Member

ID Nama Umur

Alamat Sekolah

Username Password

Tabel Member

ID

..ID_member

Quiz Tanggal Jumlah Berhasil

Nilai

12

Gambar 3 merupakan rancangan untuk halaman Home. Halaman ini

memberikan tampilan berupa pengantar dari aplikasi pembelajara Bahasa Inggris

dasar dan menjelaskan apa saja yang bisa dilakukan user dalam aplikasi ini. User

yang sudah memiliki password dan username, dapat melakukan login dan masuk

ke halaman pembelajaran, sedangkan user yang belum memiliki password dan

username dapat melakukan proses registrasi untuk mengakses ke halaman

selanjutnya.

JUDUL WEB Home Pembelajaran Login Register

Form Registrasi Member Baru

Gambar 5 Rancangan Halaman Register

Gambar 4 merupakan rancangan untuk halaman Register. Halaman ini

menyediakan form dimana user baru dapat mengimput data agar dapat menjadi

member dan dapat melakukan proses login ke dalam aplikasi. User telah mengisi

form registrasi dapat melakukan penyimpanan data dengan menekan tombol

“daftar”.

JUDUL WEB Home Pembelajaran Login Register

Belajar Warna

Belajar Bentuk

Belajar Huruf

Belajar Angka

Gambar 6 Rancangan Halaman Login

13

Gambar 6 merupakan rancangan untuk halaman Pembelajaran. Halaman ini

menampilkan jenis-jenis pembelajaran yang dapat di ikuti oleh user.

Halaman pembelajaran menampilkan 4 jenis pembelajaran yang dapat di

pilih oleh user yaitu pembelajaran warna, pembelajaran bentuk, pembelajaran

huruf, dan pembelajaran angka. Setiap pembelajaran memiliki dua level

berdasarkan tingkat kesuliatan. Setiap media pembelajaran yang ada di halaman

pembelajaran, sudah terhubung dengan halaman pembelajaran masing-,masing.

Halaman-halaman yang digunakan untuk melakukan proses pembelajaran Bahasa

Inggris dasar berbasis website menggunakan HTML5 adalah sebagai berikut:

- Halaman Belajar Warna level 1, merupakan halaman yang digunakan oleh

user untuk belajar warna-warna dasar yaitu red, green, blue(RGB).

- Halaman Belajar Warna level 2, merupakan halaman yang digunakan oleh

user untuk belajar warna-warna yang lebih banyak, lebih interaktif dan lebih

nyata.

- Halaman Belajar Bentuk level 1, merupakan halaman yang digunakan oleh

user untuk belajar bentuk-bentuk dasar dua dimensi seperti lingkaran(circle),

persegi(rectangle ), belah ketupat(diamond).

- Halaman Belajar Bentuk level 2, merupakan halaman yang digunakan oleh

user untuk belajar bentuk-bentuk dari bangun ruang seperti kubus(cube),

limas(pyramid), dan tabung(tube)

- Halaman Belajar Huruf level 1, merupakan halaman yang digunakan oleh

user untuk belajar huruf-huruf sesuai abjat. Dari huruf “A” sampai dengan

huruf “Z”

- Halaman Belajar Huruf level 2, merupakan halaman yang digunakan oleh

user untuk belajar kata yang kata depannya didasarkan sesuai dengan abjat

dari abjat “A” sampai abjat “Z”.

- Halaman Belajar Angka level 1, merupakan halaman yang digunakan oleh

user untuk belajar angka sederhana, dari angka “0”(zero) sampai angka

“9”(nine).

- Halaman Belajar Angka level 2, merupakan halaman yang digunakan oleh

user untuk belajar angka yang lebih kompleks yaitu angka-angka yang

memiliki dua digit angka.

4. Hasil dan Pembahasan

4.1 Proses Sistem

Komponen yang dibutukan yaitu web server, PHP5, web browser, dan yang

paling penting adalah HTML5. Proses sistem ini akan menunjukan proses dari

fitur dari HTML5 terutama canvas, serta proses-proses lain yang menunjang

untuk membuat aplikasi media pembelajaran Bahasa Inggris dasar berbasis

website menggunakan HTML5.

14

Kode Program 1 Perintah mouse click

Kode Program 1 merupakan baris perintah yang digunakan untuk

melakukan proses mouse click. Fungsi ini adalah fungsi saat user mengklik mouse

pada objek yang diinginkan. Sehingga sistem merespon dengan memberikan

frame baru yang menunjukan objek yang di pilih beserta suara sesuai objek yang

di klik. Hasil dari proses mouse click dapat dilihat pada Gambar 8

Gambar 7 Frame Mouse Click

Gambar 7 merupakan hasil dari proses mouse click. Output yang terjadi

setelah mouse click adalah gambar objek yang dipilih beserta suara dari objek

yang dipilih.

1. function MouseDown(e)

2. {

3. if (data.showHelp == 1) {

4. data.showHelp = 0;

5. } else {

6. if (data.animate_up == 1) {

7. data.global_alpha = 1.0;

8. data.animate_up = 0;

9. } else {

10. for (i=0; i<6; i++) {

11. if (mouseX >=

12. numbers[i+(page*6)].x &&

13. mouseX <=

14. numbers[i+(page*6)].x + numbers[i+(page*6)].w &&

15. mouseY >=

16. numbers[i+(page*6)].y &&

17. mouseY <=

18. numbers[i+(page*6)].y + numbers[i+(page*6)].h) {

19. sounds[i+(page*6)].play();

20. imgTemp =

21. numbers[i+(page*6)].img;

22. data.teks =

23. numbers[i+(page*6)].id;

24. data.global_alpha = 0.0;

25. data.animate_up = 1;

26. break;

27. }

28. }

15

Kode Program 2 Perintah Mouse Detection

Kode Program 2 merupakan baris perintah dari mouse detection. Proses

mouse detection ini merupakan proses yang akan membuat objek yang berada

dalam frame pembelajaran bereaksi pada saat kursor berada di atas objek. Objek

yang berada di bawah kursor akan terseleksi. Hasil interface dari mouse detection

dapat di lihat di gambar 10

1. function MouseMove(e)

2. {

3. var x;

4. var y;

5. if (e.offsetX) {

6. x = e.offsetX;

7. y = e.offsetY;

8. } else if (e.layerX) {

9. x = e.layerX;

10. y = e.layerY;

11. }

12.

13.

14. mouseX = x;

15. mouseY = y;

16.

17. startQuizOver = false;

18. if (mouseX >= 180 &&

19. mouseX <= 180+300 &&

20. mouseY >= 395 &&

21. mouseY <= 395+73) {

22. startQuizOver = true;

23. }

24.

25. startHelpOver = false;

26. if (mouseX >= 580 &&

27. mouseX <= 580+50 &&

28. mouseY >= 10 &&

29. mouseY <= 10+50) {

30. startHelpOver = true;

31. }

32.

33. anyOver = false;

34. for (i=0; i<6; i++) {

35. if (mouseX >= numbers[i+(page*6)].x &&

36. mouseX <= numbers[i+(page*6)].x +

37. numbers[i+(page*6)].w &&

38. mouseY >= numbers[i+(page*6)].y &&

39. mouseY <= numbers[i+(page*6)].y +

40. numbers[i+(page*6)].h) {

41. anyOver = true;

42. overIndex = i;

43. break;

44. }

45. }

46. }

16

Gambar 8 Frame Mouse Detection

Gambar 8 merupakan hasil output dari proses mouse detection. Pada

gambar 10 terlihat hasil seleksi yang terjadi di objek mobil yang berwarna merah.

Objek yang terseleksi adalah hasil ketika mouse berada di atas objek tersebut.

Kode Program 3 Perintah Load images and sounds

1. function Init() {

2. // load images

3. imgBgHelp.src = "img/help/help1A.jpg";

4. imgHelp.src = "img/others/help.png";

5. imgHelpOver.src = "img/others/help_over.png";

6. imgStartQuiz.src = "img/others/start_quiz.png";

7. imgStartQuizOver.src = "img/others/start_quiz_over.png";

8. imgFrame.src = "img/frame.png";

9. imgBg.src = "img/bg/bg4.png";

10. img0.src = "img/colors/red.png";

11. img0Over.src = "img/colors/red_over.png";

12.

13. snd0.src = "snd/colors/red.ogg";

14.

15. obj0 = {

16. img:img0,

17. imgOver:img0Over,

18. x:20,

19. y:50,

20. w:img0.width,

21. h:img0.height,

22. };

23.

24. colors[0] = obj0;

25.

26. sounds[0] = snd0;

27.

28. content = document.getElementById('content');

29.

30. // click event

31. eCanvas = document.getElementById('canvas');

32.

33. // timer loop

34. setInterval(Update,60);

35. }

17

Kode Program 3 merupakan baris perintah Load images and sounds.

Proses ini akan melakukan pemanggilan gambar dan suara yang sudah

dideklarasikan dalam proses variables declaration. Setelah melakukan loading,

proses ini akan mengklasifikasian gambar dan suara yang sama ke dalam objek-

objek. Contoh dari proses ini dapat dilihat di baris coding 15-21. Di baris tersebut

menjelaskan penggabungan image dan audio disatukan ke dalam sebuah objek.

Kode Program 4 Perintah Drawing Animation

Kode Program 4 merupakan baris perintah dari Drawing animation. Proses

ini melakukan penggambaran animasi dalam website dengan menggunakan fitur

canvas HTML5. Baris 2-5 merupakan elemen dasar dari canvas HTML5.

1. function Draw() {

2. eCanvas = document.getElementById('canvas');

3. canvasOffsetLeft = eCanvas.offsetLeft;

4. canvasOffsetTop = eCanvas.offsetTop;

5. g = eCanvas.getContext('2d');

6. g.drawImage(imgBg,0,0);

7.

8. if (data.showHelp == 1) {

9. g.drawImage(imgBgHelp,0,0);

10. } else {

11. if (data.animate_up == 1) {

12. g.globalAlpha = data.global_alpha;

13. g.drawImage(imgFrame,10,40);

14. g.drawImage(imgTemp,320-

15. imgTemp.width/2,150);

16. g.fillStyle = "black";

17. g.font = "bold 40px sans-serif";

18. g.fillText(data.teks,180,350);

19. } else {

20. if (startHelpOver)

21. g.drawImage(imgHelpOver,580,10);

22. else g.drawImage(imgHelp,580,10);

23.

24. if (startQuizOver)

25. g.drawImage(imgStartQuizOver,180,330);

26. else g.drawImage(imgStartQuiz,180,330);

27.

28. for (i=0; i<3; i++) {

29. if (anyOver && overIndex == i)

30. g.drawImage(colors[i].imgOver, colors[i].x, colors[i].y);

31.

32. else g.drawImage(colors[i].img,

33. colors[i].x, colors[i].y);

34. }

35. }

36. }

37.}

18

4.1 Pengujian dengan Metode Blackbox

Blackbox testing terfokus pada spesifikasi fungsional dari perangkat lunak.

Tester dapat mendefinisikan kumpulan kondisi input dan melakukan pengetesan

pada spesifikasi fungsional program. Blackbox testing dilakukan untuk

menemukan fungsi-fungsi yang tidak benar, kesalahan antarmuka, dan kesalahan

basis data. [12] Berikut ini adalah tabel pengujian dari sistem yang dibuat seperti

yang terlihat pada tabel 2 setelah diujicobakan kepada 10 siswa di “SMART” pre-

school .

Tabel 3 Black Box Aplikasi

Nama Modul : REGISTRASI

Test Case : Input Data User

Input: Mengisi kolom yang ada di dalam halaman registrasi

yaitu, nama lengkap, umur, alamat, sekolah,

username, password, ulangi password.

Output : Mendapatkan password dan username untuk login

Hasil : Sesuai dengan yang diharapka.

Nama Modul : LOGIN

Test Case : Validasi User Input : Memasukan username dan password

Output : Jika username dan password valid, login sukses.

Hasil : Sesuai dengan yang diharapkan.

Nama Modul : PEMBELAJARAN

Test Case : Memilih jenis pembelajaran Bahasa Inggris dasar. Input : Memilih jenis pembelajaran yang akan dilakukan

yaitu pembelajaran warna, pembelajaran huruf,

pembelajaran bentuk, dan pembelajaran angka.

Output : User langsung bisa melakukan proses pembelajaran

Bahasa Inggris dasar

Hasil: Sesuai dengan yang diharapkan.

Nama Modul : PROSES BELAJAR

Test Case : Proses belajar warna, bentuk, huruf, angka. Input : User memilih dengan cara mengklik objek

Output : Pembesaran gambar objek dan suara objek

Hasil: Sesuai dengan yang diharapkan.

Nama Modul : PROSES QUIZ

Test Case : Proses quiz belajar warna, quiz belajar bentuk, quiz

belajar huruf, quiz belajar angka Input : - Memilih objek sesuai suara dari soal.

- Klik tombol more test untuk melanjutkan soal.

- Klik tombol save test untuk menyimpan hasil.

Output : - Gambar checklist jika benar dan gambar cross

19

jika jawaban salah.

- Test count bertambah

- Test success bertambah jika jawaban benar

- Dapat melihat review test yang sudah dilakukan

Hasil: Sesuai dengan yang diharapkan.

Nama Modul : TANPA PLUG-IN

Test Case Pengoprasian aplikasi di browser yang mendukung

HTML5 tanpa menggunakan plug-in

Input: Menjalankan aplikasi di browser yang mendukung

HTML5 tanpa meng-install plug-in.

Output : Aplikasi dapat berjalan dengan baik.

Hasil : Sesuai dengan yang diharapkan.

Dari pengujian blackbox yang sudah dilakukan, kesimpulannya adalah

aplikasi media pembelajaran Bahasa Inggris dasar berbasis website menggunakan

HTML5 sudah berjalan sesuai yang diharapkan. Pengujian fungsi-fungsi dari

aplikasi ini sesuai dengan yang tujuan. Yang paling penting adalah aplikasi media

pembelajaran Bahasa Inggris berbasis website menggunakan HTML5 dapat

dijalankan pada browser yang medukung HTML5 tanpa menggunakan plug-in.

4.2 Pengujian HTML5

Tabel 4 Tabel pengujian terhadap piranti

Piranti Canvas 2d context Ogg vorbis support

Ipad

Galaxy Tab

Desktop Computer

Blackberry Smartphone x

Samsung Smartphone

Pengujian terhadap jenis-jenis piranti untuk membuktikan apakah rancang

bangun media pembelajaran bahasa inggris dasar berbasis web menggunakan

HTML5 dapat berjalan di semua jenis piranti terutama ipad, galaxy tab dan

smartphone yang sering digunakan anak usia pre-school dalam melakukan

pembelajaran bahasa inggris dasar. Parameter pengujian yang di ambil adalah

canvas 2d context dan ogg vorbis support. Canvas 2d context dijadikan parameter

pengujian karena elemen canvas ini yang digunakan dalam menggambar animasi,

sedangkan ogg vorbis adalah audio support dalam website media pembelajaran

bahasa inggris dasar. Dari pengujian di atas secara keseluruhan semua piranti

yang ada dapat menjalankannya dengan baik.

20

Tabel 5 Tabel pengujian terhadap browser

Browser Canvas 2d context Ogg vorbis support

Internet Explorer 6,7 &8 x x

Google Chrome 18

FireFox 11

Opera 11

Safari 5.1 x

Internet Explorer 9 x

Pengujian browser dilakukan untuk mengetahui apakah website media

pembelajaran bahasa inggris dapat berjalan diberbagai browser. Dengan

pengujian yang sudah dilakukan seperti dalam gambar 2. Hampir semua browser

dapat menjalankan animasi yang ada tanpa menggunakan plug-ins, tetapi masalah

yang masih di hadapi oleh HTML5 adalah masih banyak browser belum bisa

menjalankan audio file yang bertipe vorbis.

5. Simpulan

Perkembangan terknologi HTML yaitu HTML5 memberikan perubahan

yang sangat besar dalam membangun dan menjalankan sebuah website. Fitur

canvas HTML5 sangat membantu dalam membuat animasi tanpa menggunakan

plug-ins dalam pengoprasiannya. Sedangkan untuk anak usia pre-school, mereka

dapat mengakses aplikasi ini dimana saja dangan menggunakan piranti apa saja

seperti tablet Pc dan smartphone untuk melakukan proses pembelajaran bahasa

inggris dasar, tanpa harus belajar di ruang kelas yang menyita waktu dan biaya.

6. Daftar Pustaka

[1] Solusindo.2010. Perkembangan website.

http://www.smartsolutions.co.id/perkembangan-website (Diakses 8 April

2012).

[2] Heriyanto. 2010. Apa Kehebatan HTML5.

http://www.computesta.com/blog/2010/05/apa-kehebatan-

html5/#.T1DQW4caMx4 .(Diakses 7 Desember 2011).

[3] Bahri, Alim.2008. Pembelajaran Online Via Internet dan Intranet.

http://www.ubb.ac.id/menulengkap.php?judul=manfaat%20Elearning%20

/%20ELearning%20%20%20Pembelajaran%20Online%20via%20atau%

20intranet%20services// (Diakses 10 September 2011).

21

[4] Sukajaya,I. Nyoman. 2004. Media Pembelajaran Asinkronus Berbasis Web

sebagai Media Alternatif Pembelajaran Matematika dijenjang Sekolah

Dasar.

[5] Rizkia, Choiru. 2011. Riset,Penggunaan HTML5 Bakal Meningkat

Hingga 2013.

http://www.selular.co.id/berita/BNews/2011/12/368421985426/Riset-

Penggunaan-HTML5-Bakal-Meningkat-Hingga-2013 (Diakses 11 April

2011).

[6] Ahira, Anne.2011. Mengenal Pengertian Website.

http://www.anneahira.com/pengertian-website.htm (Diakses 15 Oktober

2011).

[7] Adriani. 2009. Berbagai Jenis Media Pembelajaran.

http://www.edu-articles.com/berbagai-jenis-media-pembelajaran/.

(Diakses 4 Januari 2012).

[8] Okezone, 2011. Ciptakan Pre-school Sendiri di Rumah.

http://www.lifestyle.okezone.com/read/2011/06/24/196/472413/ciptakan-

pre-school-sendiri-di-rumah. (Diakses 4 April 2012)

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

Indonesia

[10] Babtista,Reyva, 2011. HTML5, Apa Fitur Tambahannya?.

http://www.reybabtista.com/2011/12/html5-apa-fitur-tambahannya.html.

(Diakses 4 April 2012)

[11] Pressman, S. Roger. 1995. Software Engineering.

[12] Sukamto,Rosa.2009.Black-Box Testing.