T1 672008096 Full Text
5
1. Pendahuluan
Belajar suatu bahasa asing membutuhkan pemahaman dan teknik yang memadai. Pada pembelajaran bahasa Mandarin, anak-anak diharapkan mampu mengucapkan setiap kosa kata dengan baik dan benar agar mampu berkomunikasi dalam bahasa Mandarin. Hal utama yang harus diperhatikan dalam pembelajaran
bahasa Mandarin adalah hànyǔ pīnyīn (汉 语 拼 音) yang merupakan cara
pengucapan yang baik dan benar sesuai dengan tinggi rendahnya nada baca. Bahasa Mandarin juga memiliki keunikan dalam penulisan hurufnya (atau yang
lebih dikenal dengan huruf hànzì (汉字)) karena harus dilakukan sesuai dengan
aturan yang sudah dibakukan (bĭshùn (笔顺)). Hal – hal tersebut dirasakan akan menambah kesulitan bagi anak-anak.
Salah satu contoh sekolah yang memasukkan bahasa Mandarin ke dalam kurikulum pendidikan adalah SD Xaverius 3 Bandar Lampung. Proses pembelajaran bahasa Mandarin yang terjadi di SD Xaverius 3 adalah dengan cara para siswa dituntut untuk membaca buku atau materi dalam bentuk cetak yang diberikan oleh guru sehingga di sini hanya terjadi komunikasi 1 (satu) arah tanpa melibatkan interaksi langsung dengan para siswa. Berdasarkan wawancara dengan beberapa murid di SD Xaverius 3, hal ini menyebabkan mereka menjadi bosan dan pada akhirnya mengalami kesulitan dalam memahami setiap materi yang diajarkan.
Perkembangan teknologi di berbagai bidang terutama bidang pendidikan sangat membantu proses belajar mengajar menjadi lebih bervariasi. Salah satu
teknologi yang digunakan dalam proses belajar mengajar adalah e-learning
system. E-learning saat ini mengarah pada penyediaan suatu situs (website) yang
berisi konten materi yang diajarkan dan dapat diakses dari manapun oleh para peserta didik.
Hal ini menjadi dasar bagi penulis untuk membuat suatu aplikasi pembelajaran yang dapat membantu anak-anak di SD Xaverius 3 agar bisa memahami pengenalan dasar-dasar bahasa Mandarin lebih interaktif dengan menggunakan komputer. Di dalam program ini berisi konten-konten selain gambar, disertai pula animasi yang menggunakan efek suara yang mempermudah
pemahaman anak mempelajari nada, pelafalan dan huruf hànzì. Dukungan
teknologi untuk dapat menyediakan situs seperti itu adalah dengan menerapkan HTML5. Teknologi HTML5 memiliki keunggulan dalam penyediaan modul animasi, kanvas maupun video-audio, sehingga dengan kombinasi antara situs
dengan HTML5, diharapkan aplikasi pembelajaran bahasa Mandarin ini dapat
meningkatkan minat belajar siswa.
2. Tinjauan Pustaka
Penelitian sebelumnya yang terkait dengan topik penelitian ini adalah dengan judul “Aplikasi Pembelajaran Bahasa Mandarin untuk Anak-Anak Sekolah Dasar dengan Menggunakan Swish Max dalam Bentuk CD Interaktif”, pada penelitian tersebut dijelaskan bahwa siswa – siswi disediakan sarana pembelajaran pendidikan bahasa yang inovatif dan interaktif untuk dapat mempelajari Bahasa Mandarin dengan baik dan benar menggunakan program aplikasi Swish Max yang
(2)
6
Adobe Photoshop untuk mengedit gambar-gambar yang digunakan dalam aplikasi interaktif tersebut [1].
Perbedaan penelitian sebelumnya dengan penelitian ini adalah terletak pada teknologi yang digunakan dan media penyampaian materi. Teknologi yang digunakan adalah penerapan HTML5 pada konten audio, yang dapat
diimplementasikan pada website tanpa perlu menambahkan plug-in pihak ketiga
seperti Flash. Penyampaian materi pembelajaran bahasa Mandarin ini dapat diakses oleh para peserta didik dari manapun dan kapanpun, sehingga para siswa dapat memahami secara lebih mendalam mengenai materi yang diberikan.
Bahasa Mandarin
Bahasa Mandarin mencakup tiga materi dasar yaitu cara pelafalan, cara
membedakan nada, dan cara menggores sebuah huruf hànzì. Tiga hal tersebut
merupakan suatu dasar yang harus dimengerti untuk mempelajari bahasa Mandarin lebih lanjut. Pada pelafalannya, bahasa Mandarin memiliki suku kata untuk melambangkan bunyi-bunyi dalam Mandarin atau disebut Bopomofo, terbagi atas pelafalan huruf mati (konsonan) dan huruf hidup (vokal).
Contoh pelafalan pada huruf mati : b (dibaca po), p (dibaca pho), d (dibaca te), t (dibaca the), g (dibaca ke), k (dibaca khe) dan lain – lain. Contoh pelafalan pada huruf hidup : ai (dibaca ay), ei (dibaca ey), ou (dibaca ou), ü (dibaca iu,
posisi gigi seperti ingin mengucapkan i, tapi mulut melafalkan huruf u) [2].
Setiap suku kata bahasa Mandarin tidak hanya terdiri dari vokal dan konsonan saja, tetapi juga memiliki nada. Ada 4 nada dan 1 nada netral dalam bahasa Mandarin. Nada dalam bahasa Mandarin memiliki fungsi untuk membedakan makna kata. Setiap kata dalam bahasa Mandarin dengan cara pengucapan yang sama, namun jika terdapat perbedaan nada, maka makna yang terkandung dalam setiap kata tersebut akan berbeda [3].
Contoh: 妈mā(ibu), 麻má(bintik/serat), 马mǎ(kuda), 骂mà(marah)
Selain belajar pelafalan dan nada, siswa juga mempelajari cara menulis huruf
hànzì dengan benar. Huruf hànzì harus selalu ditulis dengan cara yang sama dan
setiap huruf terdiri dari satu atau lebih guratan. Ada beberapa aturan dasar untuk menulis huruf hànzì. Arah utamanya adalah dari atas ke bawah dan dari kiri ke kanan [4].
Media Pembelajaran
Pembelajaran adalah sebuah proses komunikasi antara pembelajar, pengajar, dan bahan ajar. Komunikasi tidak akan berjalan tanpa bantuan sarana penyampai
pesan atau media. Proses pembelajaran mencakup tiga komponen, yaitu input,
proses dan output. Contoh komponen input antara lain bahan pelajaran yang
cukup relevan dan up-to-date, serta alat atau media belajar. Contoh komponen proses antara lain strategi pembelajaran, pemanfaatan media pembelajaran.
Sedangkan komponen output adalah hasil dari pembelajaran seperti prestasi
(3)
7
HTML 5
HTML (Hyper Text Markup Language) adalah file teks yang berisi
instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis
dari sebuah halaman web. Di dalam file HTML terdapat beberapa tag atau
kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar
monitor. File HTML dapat dibuat dengan aplikasi text editor apapun di sistem operasi apapun, antara lain : Notepad di Windows, emasc atau vi di Unix atau
SimpleText di Macintosh. File HTML ini juga bisa dibuat di aplikasi word
processor apapun asalkan saat menyimpan file tersebut disimpan dengan format
text-only. Salah satu kelebihan file HTML adalah cross platform, artinya file
HTML dapat ditampilkan di beberapa Operating System (OS) yang berbeda dan
memiliki tampilan yang sama walaupun saat pembuatannya menggunakan satu OS tertentu saja.
HTML5 adalah revisi yang dibangun oleh W3C (World Wide Web
Consortium) untuk dimasukkan sebagai perubahan besar berikutnya pada standar
HTML. Perkembangan web yang sangat cepat mendorong para pengembang W3C
yang bekerjasama dengan WHATWG (Web Hypertext Application Technology
Working Group) meluncurkan HTML5 guna memperbaiki HTML versi
sebelumnya sekaligus untuk mempermudah pengembangan website. Standar ini
memperkenalkan fitur baru seperti memutar audio dan video tanpa plug-in
tambahan (seperti Flash).
Adapun beberapa alasan penggunaaan HTML5 adalah [7] :
- Fiturnya masih berdasarkan pada HTML, CSS, DOM, dan JavaScript.
- Mengurangi penggunaan plug-in dari pihak ketiga (Seperti Flash dan
Microsoft Silverlight).
- Penanganan kesalahan lebih mudah diatasi.
- Lebih Markup dan Scripting.
- Lebih Independent.
- Pengembangan ke publik yang lebih baik.
PHP
PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan
pada server side. Artinya semua sintaks yang kita berikan akan sepenuhnya
dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya
saja. (Anon Kuncoro Widigdo).[8]
3. Metode Penelitian
Metode perancangan sistem pada penelitian ini menggunakan model proses
prototyping model. Gambar 1 menjelaskan langkah-langkah dari tahapan metode
(4)
8
Gambar 1 Metode Prototyping Model [9]
a. Listen to Customer
Mengumpulkan kebutuhan - kebutuhan pengguna (user) secara
lengkap kemudian melakukan analisa terhadap kebutuhan tersebut untuk mencari solusi dengan mengimplementasikan fungsi-fungsi di dalam aplikasi. Penulis melakukan pengumpulan kebutuhan dengan melakukan observasi dan wawancara kepada guru-guru bahasa Mandarin di SD Xaverius 3 Bandar Lampung guna mengetahui bagaimana proses pembelajaran yang terjadi dan untuk mengetahui masalah-masalah yang dihadapi dalam proses belajar mengajar selama ini serta memberikan pemecahan masalah melalui aplikasi pembelajaran yang akan dibangun dengan menerapkan teknologi HTML5.
b. Build or Revise Mockup
Merancang aplikasi pembelajaran bahasa Mandarin dengan menerapkan teknologi HTML5 dengan menggunakan alat bantu
perancangan sistem yaitu bahasa Unified Modelling Language (UML),
melakukan perancangan database, dan merancang tampilan antar muka
pengguna (user interface).
c. Customer Test Drives Mockup
Tahapan akhir dari metode prototyping model adalah menerapkan
aplikasi sistem pembelajaran bahasa Mandarin di SD Xaverius 3 Bandar Lampung dengan memperhatikan kebutuhan perangkat lunak dan perangkat keras sesuai standarisasi kebutuhan aplikasi. Pada tahapan ini juga dilakukan pengujian secara bertahap yaitu dengan melakukan:
Black-box testing terhadap aplikasi yang telah diimplementasikan
guna mengetahui apakah semua fungsi yang ada sudah berjalan dengan baik dan dapat digunakan oleh guru, siswa, maupun administrator di SD Xaverius 3 Bandar Lampung.
Pengujian dengan membandingkan nilai test siswa antara pembelajaran
secara konvensional dan pembelajaran menggunakan aplikasi pembelajaran melalui media komputer.
Perancangan Sistem
Perancangan aplikasi yang dilakukan oleh penulis yaitu dengan
menggunakan Unified Modelling Language (UML). Perancangan dimulai
(5)
9
pembuatan aplikasi. Setelah membuat alur atau use case tersebut maka langkah
selanjutnya adalah membuat aplikasi yang sesuai dengan use case yang telah
dibuat.
1. Use Case Diagram Sistem
Hapus Member Manajemen Member
Manajemen Home Admin
Manajemen About
<<extend>> Melihat Latihan
Melihat Materi Belajar Akses Data Member
Lihat Skor
Melihat Konten Home
Pengguna
Melihat Konten About <<extend>>
<<extend>>
<<extend>>
<<extend>>
Latihan Bopomofo Latihan Nada Latihan Hanzi
<<extend>> <<extend>> <<extend>>
Belajar Bopomofo Belajar Nada Belajar Hanzi
<<extend>>
<<extend>> <<extend>>
Gambar 2 Use Case Diagram Sistem
Pada Gambar 2 dijelaskan bahwa terdapat 2 aktor dalam sistem pembelajaran bahasa Mandarin yaitu Pengguna dan Admin. Masing-masing aktor memiliki interaksi dengan sistem melalui use case - use case. Aktor Admin dalam sistem ini mewakili guru atau administrator sekolah, dimana Admin dapat melakukan
Manajemen Member, Manajemen Home, dan Manajemen About. Sedangkan aktor
Pengguna dalam sistem ini yaitu para siswa atau peserta didik yang belajar bahasa Mandarin. Aktor Pengguna dapat melakukan Registrasi Awal, Melakukan Belajar
Nada, Belajar Bopomofo, dan Belajar Hanzi, Melakukan Latihan Nada, Latihan
Bopomofo, dan Latihan Hanzi, dan Melihat Score masing-masing. Berdasarkan
use case diagram sistem ini, kemudian dijabarkan lagi ke dalam proses bisnis
(6)
10
2. Activity Diagram Siswa
Mulai
Melakukan Login
Memilih Menu Pembelajaran
Melihat Hasil Score
Logout
Selesai
Input Username dan Password
Cek User
Membuka Halaman Home
Salah
Benar
Pilih Menu
Belajar/Latihan
Nada Hanzi Bopomofo
Proses Perhitungan Score
Menampilkan Score
Keluar dari Sistem
Sistem Sisw a
Gambar 3 Activity Diagram Siswa
Activity Diagram pada Gambar 3 menggambarkan bagaimana proses bisnis
yang terjadi dalam sistem pembelajaran bahasa Mandarin. Proses bisnis ini merupakan aktivitas yang terjadi di dalam sistem dimana antara aktor akan melakukan interaksi dengan sistem. Siswa akan melakukan login terlebih dahulu untuk kemudian dapat masuk ke dalam sistem. Di dalam sistem, siswa dapat memilih menu Belajar atau Latihan. Pada setiap menu tersebut, siswa diberikan
pilihan mengenai Belajar Nada, Belajar Bopomofo, maupun Belajar Hanzi. Setiap
materi yang dipelajari terdapat berbagai jenis soal latihan. Pada akhirnya, siswa dapat melihat score berdasarkan hasil latihan yang diikuti.
(7)
11
3. Class Diagram Sistem
AdminModel username password update_entry() check_exists() AdminController index() konten_home() konten_about() member() member_delete() logout() konten_home_update_entry() konten_about_update_entry() MemberModel id nama username password sekolah kelas insert_entry() update_entry() delete_entry() select_entry() select_entry_by_username() select_all_entry() check_exists() MemberController index() latihan() latihan_bopomofo() latihan_nada() latihan_hanzi() latihan_hanzi_insert() latihan_nada_insert() latihan_bopomofo_insert() skor() logout() SkorModel id id_member jenis_latihan tanggal skor insert_entry() select_all_entry() GuestController index() about() login() signup() signup_entry() login_entry() KontenModel home about insert_entry() update_entry() update_home_entry() update_about_entry() select_entry()
Gambar 4 Class Diagram Sistem
Class diagram pada Gambar 4 menunjukkan relasi antar objek yang terdapat
dalam sistem pembelajaran bahasa Mandarin. Objek-objek tersebut yaitu Registrasi, Belajar, dan Latihan, dimana seluruh objek tersebut memiliki class
boundary sebagai user interface, class controller sebagai method atau fungsi, dan
class entity sebagai database-nya.
Perancangan Database
Merupakan tahapan perancangan terhadap database sesuai dengan data-data
yang terlibat dengan proses yang terjadi pada aplikasi pembelajaran ini.
Keterkaitan antar data-data yang terlibat dituangkan dalam bentuk database.
1. tbl_administrator
Tabel 1 Tabel Administrator
Nama_Kolom Tipe_data
Username varchar (100)
(8)
12
Tabel administrator (Tabel 1) adalah tabel yang digunakan untuk menyimpan
username dan password administrator. Tabel ini terdiri dari kolom username dan
password.
2. tbl_konten
Tabel 2 Tabel Konten
Nama_Kolom Tipe_data
Home Text
About Text
Tabel Konten (Tabel 2) adalah tabel yang digunakan untuk menyimpan kata – kata dari home dan about. Tabel ini terdiri dari kolom home dan about.
3. tbl_member
Tabel 3 Tabel Member
Nama_Kolom Tipe_data
Id int (11)
Nama varchar (255)
Username varchar (255)
Password varchar (255)
Sekolah varchar (255)
Kelas varchar (3)
Tabel Member (Tabel 3) adalah tabel yang digunakan untuk menyimpan nama-nama member. Tabel ini terdiri dari beberapa kolom yaitu id, nama,
username, password, sekolah, dan kelas.
4. tbl_skor
Tabel 4 Tabel Skor
Nama_Kolom Tipe_Data
Id int (11)
id_member int (11)
jenis_latihan varchar (255)
Tanggal Datetime
Skor int (11)
Tabel Skor (Tabel 4) adalah tabel yang digunakan untuk menyimpan skor latihan dari member yang telah mengerjakan latihan. Tabel ini terdiri dari beberapa kolom yaitu id, id_member, jenis_latihan, tanggal, dan skor.
4. Hasil dan Pembahasan
Pada tahapan ini aplikasi pembelajaran bahasa Mandarin diimplementasikan berdasarkan pada rancangan yang telah dilakukan pada tahapan sebelumnya.
Berikut ini akan dibahas mengenai implementasi tampilan halaman website (form)
(9)
13
Gambar 5 Halaman Belajar Bopomofo
Gambar 5 menunjukkan tampilan dari halaman belajar bopomofo yang ketika diklik akan mengeluarkan suara sesuai hurufnya. [10]
Kode Program 1 Potongan Kode Belajar Bopomofo
Kode Program 1 adalah kode program yang digunakan untuk membuat animasi di dalam canvas. Pada baris 1 sampai dengan baris 8 merupakan kode
program untuk menangani ketika dilakukan event mouseup. Maka akan di cek
pada setiap box huruf bopomofo jika mengenai akan dibunyikan sesuai dengan
sound yang ada di dalam box. Sedangkan baris 10 sampai dengan baris 22
merupakan kode program untuk menangani event mousemove. Ketika user
melakukan event mouse move maka perlu dicatat posisi x dan y cursor user.
1. canvas.onmouseup = function(e) { 2. for (i=0;i<boxes.length;i++) {
3. if (x >= boxes[i].x && x <= boxes[i].x + 60 4. && y >= boxes[i].y && y <= boxes[i].y + 60) { 5. boxes[i].sound.play();
6. } 7. } 8. }; 9.
10.canvas.onmousemove = function(e) { 11. var targ;
12. if (!e)
13. e = window.event; 14. if (e.target) 15. targ = e.target; 16. else if (e.srcElement) 17. targ = e.srcElement;
18. if (targ.nodeType == 3) // defeat Safari bug 19. targ = targ.parentNode;
20. x = e.pageX - $(targ).offset().left;
21. y = e.pageY - $(targ).offset().top; 22.};
(10)
14
Gambar 6 Halaman Belajar Nada
Gambar 6 menunjukkan tampilan dari halaman belajar nada. Ketika kata – kata diklik akan mengeluarkan suara sesuai huruf dan nadanya. [11]
Kode Program 2 Potongan Kode Belajar Nada
Kode Program 2 adalah potongan kode program yang digunakan untuk membuat suara pada halaman belajar nada. Pada baris 1 sampai dengan baris 26 merupakan kode program untuk membuat tabel yang masing – masing baris berisi link suara.
1. <table width="80%" border="1" rules="all"> 2. <tr>
3. <th>Nada 1</th><th>Nada 2</th><th>Nada 3</th><th>Nada 4</th><th>Nada 4. Netral</th>
5. </tr>
6. <tr>
7. <th><img src="<?php echo base_url(); ?>img/nada1.png" /></th> 8. <th><img src="<?php echo base_url(); ?>img/nada2.png" /></th> 9. <th><img src="<?php echo base_url(); ?>img/nada3.png" /></th> 10.<th><img src="<?php echo base_url(); ?>img/nada4.png" /></th> 11.
12. </tr>
13. <tr>
14. <td><a href="#" onclick="ba_play(1);return false;">Ba</td> 15. <td><a href="#" onclick="ba_play(2);return false;">Ba</td> 16. <td><a href="#" onclick="ba_play(3);return false;">Ba</td> 17. <td><a href="#" onclick="ba_play(4);return false;">Ba</td> 18. <td><a href="#" onclick="ba_play(0);return false;">Ba</td>
19. </tr>
20. <tr>
21. <td><a href="#" onclick="cai_play(1);return false;">Cai</td> 22. <td><a href="#" onclick="cai_play(2);return false;">Cai</td> 23. <td><a href="#" onclick="cai_play(3);return false;">Cai</td> 24. <td><a href="#" onclick="cai_play(4);return false;">Cai</td> 25. <td><a href="#" onclick="cai_play(0);return false;">Cai</td>
(11)
15
Gambar 7 Halaman Belajar Hanzi
Gambar 7 menunjukkan tampilan dari halaman belajar hanzi. Ketika gambar
diklik akan masuk ke halaman sesuai bab yang dipilih. Setiap bab berisi materi
bacaan, kosakata dan goresan huruf hanzinya.
Kode Program 3 Potongan Kode Belajar Hanzi
Kode Program 3 adalah potongan kode program yang digunakan untuk membuat tabel pada halaman belajar hanzi. Pada baris 1 sampai dengan baris 24
merupakan kode program untuk membuat tabel yang masing – masing berisi link
gambar materi huruf hanzi.
1. <table width="700px" border="0" rules="all" >
2. <tr>
3. <th colspan="3">Pilih Bab</th>
4. </tr>
5. <tr>
6. <td><?php echo anchor('guest/belajar_hanzi_bab1','<img
7. src="'.base_url().'resources/hanzi_revisi/bab1.png" height="180px" 8 8. width="150px" />'); ?></td>
9. <td><?php echo anchor('guest/belajar_hanzi_bab2','<img
10. src="'.base_url().'resources/hanzi_revisi/bab2.png" height="180px" 11. width="150px" />'); ?></td>
12. <td><?php echo anchor('guest/belajar_hanzi_bab3','<img
13. src="'.base_url().'resources/hanzi_revisi/bab3.png" height="180px" 14. width="150px" />'); ?></td>
15. </tr>
16. <tr>
17. <td><?php echo anchor('guest/belajar_hanzi_bab4','<img
18. src="'.base_url().'resources/hanzi_revisi/bab4.png" height="180px" 19. width="150px" />'); ?></td>
20. <td><?php echo anchor('guest/belajar_hanzi_bab5','<img
21. src="'.base_url().'resources/hanzi_revisi/bab5.png" height="180px" 22. width="150px" />'); ?></td>
23. </tr>
(12)
16
Gambar 8 Halaman Latihan Bopomofo
Gambar 8 menunjukkan tampilan dari halaman latihan bopomofo. Ketika link
klik diklik akan mengeluarkan suara. Suara yang keluar merupakan sebuah soal yang harus dipilih jawabannya sesuai pilihan jawabannya.
Kode Program 4 Potongan Kode Hitung Skor Latihan Bopomofo
Kode Program 4 adalah potongan kode program yang digunakan untuk menyimpan hasil pengerjaan soal latihan bopomofo. Hasil pengerjaan akan ditangkap oleh program seperti pada baris 5 sampai dengan baris 14. Kemudian dihitung benar-salah jawaban pengguna seperti pada baris 17 sampai dengan baris 26. Kemudian hasil skor akan dimasukkan ke dalam basis data seperti pada baris 27.
1. $this->id_member = $_POST['id_member'];
2. $this->jenis_latihan = $_POST['jenis_latihan']; 3. $this->tanggal = date('Y-m-d H:i:s');
4.
5. $a1 = $_POST["a1"]; 6. $a2 = $_POST["a2"]; 7. $a3 = $_POST["a3"]; 8. $a4 = $_POST["a4"]; 9. $a5 = $_POST["a5"]; 10. $a6 = $_POST["a6"]; 11. $a7 = $_POST["a7"]; 12. $a8 = $_POST["a8"]; 13. $a9 = $_POST["a9"]; 14. $a10 = $_POST["a10"]; 15.
16. $this->skor = 0;
17. if ($a1 == "c") $this->skor += 10; 18. if ($a2 == "b") $this->skor += 10; 19. if ($a3 == "b") $this->skor += 10; 20. if ($a4 == "a") $this->skor += 10; 21. if ($a5 == "c") $this->skor += 10; 22. if ($a6 == "a") $this->skor += 10; 23. if ($a7 == "c") $this->skor += 10; 24. if ($a8 == "a") $this->skor += 10;
(13)
17
Gambar 9 Halaman Skor Member
Gambar 9 menunjukkan tampilan dari halaman skor member, dimana akan tampil nilai – nilai ketika member telah mengerjakan soal latihan.
Kode Program 5 Potongan Kode Skor Member
Kode Program 5 adalah potongan kode program yang digunakan untuk membuat tabel pada halaman skor member. Pada baris 5 sampai dengan baris 15 merupakan kode program untuk menampilkan skor member yang diambil dari database.
Tahapan berikutnya adalah membahas uji coba dan evaluasi aplikasi pembelajaran bahasa Mandarin. Aplikasi akan diuji coba dari segi fungsionalitas dan performa dengan berbagai macam skenario berdasarkan implementasi yang dilakukan. Tujuan dilakukannya uji coba ini adalah untuk melakukan verifikasi dan validasi terhadap semua fitur dan fungsi dari aplikasi apakah telah sesuai dengan kebutuhan pengguna atau belum sehingga nantinya perlu dilakukan pengembangan sistem lebih lanjut. Pengujian pada aplikasi pembelajaran bahasa
Mandarin dilakukan dengan menggunakan metode blackbox testing.
1.<table border="1" rules="all" width="80%">
2. <tr><th colspan="4">SKOR MEMBER</th></tr>
3. <tr><th>No.</th><th>Tanggal</th><th>Jenis Latihan</th><th>Skor</th></tr>
4. <?php
5. $no = 1;
6. foreach ($skor as $s) {
7. echo "<tr>";
8. echo "<td>$no</td>";
9. echo "<td>$s->tanggal</td>";
10. echo "<td>$s->jenis_latihan</td>";
11. echo "<td align='center'>$s->skor</td>";
12. echo "</tr>";
13. $no++;
14. }
15. ?>
(14)
18
Hasil dari pengujian blackbox yang telah dilakukan yaitu menguji fungsi dari
login user, logout, member registration, dan login admin. Pada fungsi login user,
jika username dan password yang dimasukkan benar, maka hasil uji berhasil dan
status uji dikatakan valid. Tetapi jika username dan password yang dimasukkan
salah, maka hasil uji gagal dan status uji dikatakan valid. Pada fungsi logout, jika
mengklik tombol logout akan keluar dari aplikasi dan harus login kembali untuk masuk, maka hasil uji berhasil dan status uji dikatakan valid.
Pada fungsi member regristration, jika kolom Nama, Username, Password,
Sekolah, dan Kelas diisi, maka hasil uji berhasil dan status uji dikatakan valid. Tetapi jika salah satu dari kelima kolom atau semua kolom tidak diisi, maka hasil uji gagal dan status uji dikatakan valid. Pada fungsi login admin jika username
dan password yang dimasukkan benar, maka hasil uji berhasil dan status uji
dikatakan valid. Tetapi jika username dan password yang dimasukkan salah,
maka hasil uji gagal dan status uji dikatakan valid.
Setelah melakukan pengujian sistem dengan metode blackbox testing,
dilakukan juga pengujian dengan membandingkan nilai test antara pembelajaran secara konvensional dan pembelajaran menggunakan aplikasi pembelajaran melalui media komputer.
Uji coba dilakukan di SD Xaverius 3 Bandar Lampung pada 10 siswa kelas V tahun ajaran baru yang belum mendapatkan mata pelajaran bahasa Mandarin dan dikelompokkan menjadi 5 siswa pada kelompok A dan 5 siswa pada kelompok B. Terdapat tiga materi pelajaran yang diberikan, yaitu “Nada” sebagai materi satu, “Pelafalan” sebagai materi dua, dan “Hanzi” sebagai materi tiga. Kelompok A diajarkan dengan aplikasi komputer dan kelompok B diajarkan secara konvensional.
Pada kelompok A, ketiga materi diajarkan kepada siswa dengan menggunakan aplikasi komputer. Setiap materi yang diajarkan disertai dengan mengerjakan latihan soal sesuai dengan materi yang disampaikan. Pada kelompok B, ketiga materi diajarkan kepada siswa secara konvensional dan siswa juga diminta untuk mengerjakan latihan soal sesuai materi yang disampaikan.
Nilai kelompok A dan kelompok B dibandingkan. Nilai siswa yang lebih tinggi antara menggunakan aplikasi model pembelajaran dengan cara konvensional memperlihatkan apakah proses pemahaman mengenai materi yang menggunakan aplikasi model pembelajaran lebih baik dari pada proses pemahaman materi secara konvensional.
SD Xaverius 3 menetapkan bahwa para siswa, khususnya kelas V, harus mengikuti pelajaran bahasa Mandarin selama 90 menit dalam satu minggu. Dalam belajar mengajar, satu jam pelajaran memiliki waktu 45 menit. Pembelajaran bahasa Mandarin pada kelompok A dan B akan diadakan masing – masing tiga kali yaitu untuk membahas satu materi setiap satu pertemuan.
(15)
19
Tabel 6 Tabel Catatan Waktu Pembelajaran Siswa Kelompok A
No. Nama Waktu
Materi 1 Materi 2 Materi 3
1. Grace 90 menit 90 menit 90 menit
2. Yohanes 90 menit 90 menit 90 menit
3. Kevin 90 menit 90 menit 90 menit
4. Sinta 90 menit 90 menit 90 menit
5. Bobby 90 menit 90 menit 90 menit
Tabel 7 Tabel Catatan Waktu Pembelajaran Siswa Kelompok B
No. Nama Waktu
Materi 1 Materi 2 Materi 3
1. Marcel 90 menit 90 menit 90 menit
2. Surya 90 menit 90 menit 90 menit
3. Lita 90 menit 90 menit 90 menit
4. Amel 90 menit 90 menit 90 menit
5. Adi 90 menit 90 menit 90 menit
0 20 40 60 80 100
M at eri 1 M at eri 2 M at eri 3
Perbandingan Nilai Rata - Rat a Hasil Pembelajaran dengan Aplikasi dan Pembelajaran secara Konvensional
Aplikasi Konvensional
Gambar 10 Grafik Nilai Rata – Rata
Gambar 10 menunjukkan bahwa terjadi perbedaan, rata – rata nilai tes pada masing – masing kelompok dalam pembelajaran menggunakan aplikasi lebih tinggi, dibandingkan dengan nilai tes yang mengunakan pembelajaran secara konvensional. Setelah melakukan pengujian dapat disimpulkan bahwa sistem pembelajaran bahasa Mandarin untuk pemula, dapat digunakan sebagai media pembelajaran oleh para siswa dan ataupun pemula.
5. Simpulan
Berdasarkan hasil dan pembahasan yang dilakukan, dapat disimpulkan bahwa penerapan HTML5 untuk konten audio pada alat bantu pembelajaran bahasa Mandarin dapat berjalan dengan baik dan dapat digunakan untuk pembelajaran
(16)
20
berdasarkan besarnya minat dan ketertarikan siswa dalam menggunakan aplikasi pembelajaran pada komputer. Untuk pengembangan aplikasi yang telah dibangun dapat ditambahkan materi dan variasi contoh soal pada pelajaran bahasa Mandarin agar siswa memiliki pemahaman tentang bahasa Mandarin secara lebih mendalam.
6. Pustaka
[1] Lina, Ida Astuti, 2007, Jurnal : Aplikasi Pembelajaran Bahasa Mandarin
untuk Anak – Anak Sekolah Dasar Dengan Menggunakan Swish Max
dalam Bentuk CD Interaktif, Jakarta : Universitas Gunadarma.
[2] Li, Sofia, 2011, 注音字母 zhuyin zimu (pelafalan lama) dan 拼音 pinyin
(pelafalan baru).
[3] Adelia, 2010, Mempelajari Nada dalam bahasa Mandarin.
[4] Scurfield, Elizabeth, dan Song Lianyi, 2000, Bahasa Mandarin untuk
Pemula, Jakarta : Grasindo.
[5] Swaristika, Andriana, 2011, Skripsi: Perancangan Aplikasi Pembelajaran
Bahasa Inggris “Telling the Time” Berbasis Multimedia, Jakarta :
Universitas Pembangunan Nasional “Veteran”.
[6] Achmad, M. Alwi, 2003, Skripsi : Penggunaan media visual dalam
proses belajar mengajar, Makasar : Universitas Negri Makasar.
[7] Khafidli, M. Firgiawan, 2011, Trik Menguasai HTML5, CSS, PHP
APLIKATIF, Yogyakarta : Lokomedia.
[8] Widigdo, A.K, 2003, Modul: Dasar Pemrograman Php dan MySql,
IlmuKomputer.
[9] Sommerville, Ian, 2000, Software Engineering (Rekayasa Perangkat
Lunak), Jakarta: Erlangga.
[10] Izzyc53, 2008, Mandarin Chinese Pronounciation, Better Chinese.
(1)
15
Gambar 7 Halaman Belajar Hanzi
Gambar 7 menunjukkan tampilan dari halaman belajar hanzi. Ketika gambar diklik akan masuk ke halaman sesuai bab yang dipilih. Setiap bab berisi materi bacaan, kosakata dan goresan huruf hanzinya.
Kode Program 3 Potongan Kode Belajar Hanzi
Kode Program 3 adalah potongan kode program yang digunakan untuk membuat tabel pada halaman belajar hanzi. Pada baris 1 sampai dengan baris 24 merupakan kode program untuk membuat tabel yang masing – masing berisi link
gambar materi huruf hanzi.
1. <table width="700px" border="0" rules="all" > 2. <tr>
3. <th colspan="3">Pilih Bab</th> 4. </tr>
5. <tr>
6. <td><?php echo anchor('guest/belajar_hanzi_bab1','<img
7. src="'.base_url().'resources/hanzi_revisi/bab1.png" height="180px" 8 8. width="150px" />'); ?></td>
9. <td><?php echo anchor('guest/belajar_hanzi_bab2','<img
10. src="'.base_url().'resources/hanzi_revisi/bab2.png" height="180px" 11. width="150px" />'); ?></td>
12. <td><?php echo anchor('guest/belajar_hanzi_bab3','<img
13. src="'.base_url().'resources/hanzi_revisi/bab3.png" height="180px" 14. width="150px" />'); ?></td>
15. </tr> 16. <tr>
17. <td><?php echo anchor('guest/belajar_hanzi_bab4','<img
18. src="'.base_url().'resources/hanzi_revisi/bab4.png" height="180px" 19. width="150px" />'); ?></td>
20. <td><?php echo anchor('guest/belajar_hanzi_bab5','<img
21. src="'.base_url().'resources/hanzi_revisi/bab5.png" height="180px" 22. width="150px" />'); ?></td>
23. </tr> 24. </table>
(2)
16
Gambar 8 Halaman Latihan Bopomofo
Gambar 8 menunjukkan tampilan dari halaman latihan bopomofo. Ketika link
klik diklik akan mengeluarkan suara. Suara yang keluar merupakan sebuah soal yang harus dipilih jawabannya sesuai pilihan jawabannya.
Kode Program 4 Potongan Kode Hitung Skor Latihan Bopomofo
Kode Program 4 adalah potongan kode program yang digunakan untuk menyimpan hasil pengerjaan soal latihan bopomofo. Hasil pengerjaan akan ditangkap oleh program seperti pada baris 5 sampai dengan baris 14. Kemudian dihitung benar-salah jawaban pengguna seperti pada baris 17 sampai dengan baris 26. Kemudian hasil skor akan dimasukkan ke dalam basis data seperti pada baris 27.
1. $this->id_member = $_POST['id_member'];
2. $this->jenis_latihan = $_POST['jenis_latihan']; 3. $this->tanggal = date('Y-m-d H:i:s');
4.
5. $a1 = $_POST["a1"]; 6. $a2 = $_POST["a2"]; 7. $a3 = $_POST["a3"]; 8. $a4 = $_POST["a4"]; 9. $a5 = $_POST["a5"]; 10. $a6 = $_POST["a6"]; 11. $a7 = $_POST["a7"]; 12. $a8 = $_POST["a8"]; 13. $a9 = $_POST["a9"]; 14. $a10 = $_POST["a10"]; 15.
16. $this->skor = 0;
17. if ($a1 == "c") $this->skor += 10; 18. if ($a2 == "b") $this->skor += 10; 19. if ($a3 == "b") $this->skor += 10; 20. if ($a4 == "a") $this->skor += 10; 21. if ($a5 == "c") $this->skor += 10; 22. if ($a6 == "a") $this->skor += 10; 23. if ($a7 == "c") $this->skor += 10; 24. if ($a8 == "a") $this->skor += 10;
(3)
17
Gambar 9 Halaman Skor Member
Gambar 9 menunjukkan tampilan dari halaman skor member, dimana akan tampil nilai – nilai ketika member telah mengerjakan soal latihan.
Kode Program 5 Potongan Kode Skor Member
Kode Program 5 adalah potongan kode program yang digunakan untuk membuat tabel pada halaman skor member. Pada baris 5 sampai dengan baris 15 merupakan kode program untuk menampilkan skor member yang diambil dari
database.
Tahapan berikutnya adalah membahas uji coba dan evaluasi aplikasi pembelajaran bahasa Mandarin. Aplikasi akan diuji coba dari segi fungsionalitas dan performa dengan berbagai macam skenario berdasarkan implementasi yang dilakukan. Tujuan dilakukannya uji coba ini adalah untuk melakukan verifikasi dan validasi terhadap semua fitur dan fungsi dari aplikasi apakah telah sesuai dengan kebutuhan pengguna atau belum sehingga nantinya perlu dilakukan pengembangan sistem lebih lanjut. Pengujian pada aplikasi pembelajaran bahasa Mandarin dilakukan dengan menggunakan metode blackbox testing.
1.<table border="1" rules="all" width="80%">
2. <tr><th colspan="4">SKOR MEMBER</th></tr>
3. <tr><th>No.</th><th>Tanggal</th><th>Jenis Latihan</th><th>Skor</th></tr>
4. <?php
5. $no = 1;
6. foreach ($skor as $s) {
7. echo "<tr>";
8. echo "<td>$no</td>";
9. echo "<td>$s->tanggal</td>"; 10. echo "<td>$s->jenis_latihan</td>"; 11. echo "<td align='center'>$s->skor</td>"; 12. echo "</tr>";
13. $no++;
14. }
15. ?>
(4)
18
Hasil dari pengujian blackbox yang telah dilakukan yaitu menguji fungsi dari
login user, logout, member registration, dan login admin. Pada fungsi login user,
jika username dan password yang dimasukkan benar, maka hasil uji berhasil dan status uji dikatakan valid. Tetapi jika username dan password yang dimasukkan salah, maka hasil uji gagal dan status uji dikatakan valid. Pada fungsi logout, jika mengklik tombol logout akan keluar dari aplikasi dan harus login kembali untuk masuk, maka hasil uji berhasil dan status uji dikatakan valid.
Pada fungsi member regristration, jika kolom Nama, Username, Password, Sekolah, dan Kelas diisi, maka hasil uji berhasil dan status uji dikatakan valid. Tetapi jika salah satu dari kelima kolom atau semua kolom tidak diisi, maka hasil uji gagal dan status uji dikatakan valid. Pada fungsi login admin jika username
dan password yang dimasukkan benar, maka hasil uji berhasil dan status uji dikatakan valid. Tetapi jika username dan password yang dimasukkan salah, maka hasil uji gagal dan status uji dikatakan valid.
Setelah melakukan pengujian sistem dengan metode blackbox testing, dilakukan juga pengujian dengan membandingkan nilai test antara pembelajaran secara konvensional dan pembelajaran menggunakan aplikasi pembelajaran melalui media komputer.
Uji coba dilakukan di SD Xaverius 3 Bandar Lampung pada 10 siswa kelas V tahun ajaran baru yang belum mendapatkan mata pelajaran bahasa Mandarin dan dikelompokkan menjadi 5 siswa pada kelompok A dan 5 siswa pada kelompok B. Terdapat tiga materi pelajaran yang diberikan, yaitu “Nada” sebagai materi satu, “Pelafalan” sebagai materi dua, dan “Hanzi” sebagai materi tiga. Kelompok A diajarkan dengan aplikasi komputer dan kelompok B diajarkan secara konvensional.
Pada kelompok A, ketiga materi diajarkan kepada siswa dengan menggunakan aplikasi komputer. Setiap materi yang diajarkan disertai dengan mengerjakan latihan soal sesuai dengan materi yang disampaikan. Pada kelompok B, ketiga materi diajarkan kepada siswa secara konvensional dan siswa juga diminta untuk mengerjakan latihan soal sesuai materi yang disampaikan.
Nilai kelompok A dan kelompok B dibandingkan. Nilai siswa yang lebih tinggi antara menggunakan aplikasi model pembelajaran dengan cara konvensional memperlihatkan apakah proses pemahaman mengenai materi yang menggunakan aplikasi model pembelajaran lebih baik dari pada proses pemahaman materi secara konvensional.
SD Xaverius 3 menetapkan bahwa para siswa, khususnya kelas V, harus mengikuti pelajaran bahasa Mandarin selama 90 menit dalam satu minggu. Dalam belajar mengajar, satu jam pelajaran memiliki waktu 45 menit. Pembelajaran bahasa Mandarin pada kelompok A dan B akan diadakan masing – masing tiga kali yaitu untuk membahas satu materi setiap satu pertemuan.
(5)
19
Tabel 6 Tabel Catatan Waktu Pembelajaran Siswa Kelompok A
No. Nama Waktu
Materi 1 Materi 2 Materi 3
1. Grace 90 menit 90 menit 90 menit
2. Yohanes 90 menit 90 menit 90 menit
3. Kevin 90 menit 90 menit 90 menit
4. Sinta 90 menit 90 menit 90 menit
5. Bobby 90 menit 90 menit 90 menit
Tabel 7 Tabel Catatan Waktu Pembelajaran Siswa Kelompok B
No. Nama Waktu
Materi 1 Materi 2 Materi 3
1. Marcel 90 menit 90 menit 90 menit
2. Surya 90 menit 90 menit 90 menit
3. Lita 90 menit 90 menit 90 menit
4. Amel 90 menit 90 menit 90 menit
5. Adi 90 menit 90 menit 90 menit
0 20 40 60 80 100
M at eri 1 M at eri 2 M at eri 3 Perbandingan Nilai Rata - Rat a Hasil
Pembelajaran dengan Aplikasi dan Pembelajaran secara Konvensional
Aplikasi Konvensional
Gambar 10 Grafik Nilai Rata – Rata
Gambar 10 menunjukkan bahwa terjadi perbedaan, rata – rata nilai tes pada masing – masing kelompok dalam pembelajaran menggunakan aplikasi lebih tinggi, dibandingkan dengan nilai tes yang mengunakan pembelajaran secara konvensional. Setelah melakukan pengujian dapat disimpulkan bahwa sistem pembelajaran bahasa Mandarin untuk pemula, dapat digunakan sebagai media pembelajaran oleh para siswa dan ataupun pemula.
5. Simpulan
Berdasarkan hasil dan pembahasan yang dilakukan, dapat disimpulkan bahwa penerapan HTML5 untuk konten audio pada alat bantu pembelajaran bahasa Mandarin dapat berjalan dengan baik dan dapat digunakan untuk pembelajaran
(6)
20
berdasarkan besarnya minat dan ketertarikan siswa dalam menggunakan aplikasi pembelajaran pada komputer. Untuk pengembangan aplikasi yang telah dibangun dapat ditambahkan materi dan variasi contoh soal pada pelajaran bahasa Mandarin agar siswa memiliki pemahaman tentang bahasa Mandarin secara lebih mendalam. 6. Pustaka
[1] Lina, Ida Astuti, 2007, Jurnal : Aplikasi Pembelajaran Bahasa Mandarin untuk Anak – Anak Sekolah Dasar Dengan Menggunakan Swish Max dalam Bentuk CD Interaktif, Jakarta : Universitas Gunadarma.
[2] Li, Sofia, 2011, 注音字母 zhuyin zimu (pelafalan lama) dan 拼音 pinyin (pelafalan baru).
[3] Adelia, 2010, Mempelajari Nada dalam bahasa Mandarin.
[4] Scurfield, Elizabeth, dan Song Lianyi, 2000, Bahasa Mandarin untuk Pemula, Jakarta : Grasindo.
[5] Swaristika, Andriana, 2011, Skripsi: Perancangan Aplikasi Pembelajaran Bahasa Inggris “Telling the Time” Berbasis Multimedia, Jakarta :
Universitas Pembangunan Nasional “Veteran”.
[6] Achmad, M. Alwi, 2003, Skripsi : Penggunaan media visual dalam proses belajar mengajar, Makasar : Universitas Negri Makasar. [7] Khafidli, M. Firgiawan, 2011, Trik Menguasai HTML5, CSS, PHP
APLIKATIF, Yogyakarta : Lokomedia.
[8] Widigdo, A.K, 2003, Modul: Dasar Pemrograman Php dan MySql, IlmuKomputer.
[9] Sommerville, Ian, 2000, Software Engineering (Rekayasa Perangkat Lunak), Jakarta: Erlangga.
[10] Izzyc53, 2008, Mandarin Chinese Pronounciation, Better Chinese. [11] David Qing, 2011, Chinese Tones, Mandarin Impossible.