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 dikenal
sebagai program pembuat animasi. Software pendukung lainnya adalah
5
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 peserta didik [5].

6
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
prototyping model [9].

7
 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 dengan membuat sebuah
alur dari model perangkat lunak yang sesuai dengan alur

8
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

Latihan Bopomofo Latihan Nada Latihan Hanzi

<<extend>> <<extend>> <<extend>>
<<extend>>

Manajemen Member Akses Data Member

<<extend>> <<extend>> Melihat Latihan

Admin Hapus Member Lihat Skor

Pengguna

<<extend>>
Manajemen Home Melihat Konten Home

<<extend>> Melihat Materi Belajar

Manajemen About Melihat Konten About <<extend>> <<extend>> <<extend>>

Belajar Bopomofo Belajar Nada Belajar Hanzi

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 sistem
yang digambarkan dengan activity diagram.

9
 2. Activity Diagram Siswa

Sisw a Sistem

Mulai
Melakukan Input Username

Login dan Password

Cek User
Salah

Benar

Memilih Menu Membuka

Pembelajaran Halaman Home

Pilih Menu

Belajar/Latihan

Nada
Hanzi Bopomofo

Proses Perhitungan
Score
Melihat Hasil Menampilkan

Score Score
Logout Keluar dari

Sistem
Selesai

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.

10
 3. Class Diagram Sistem

AdminController GuestController
MemberController

index() index() index()

konten_home() about() latihan()
konten_about() login() latihan_bopomofo()
member() signup() latihan_nada()
member_delete() signup_entry() latihan_hanzi()
logout() login_entry() latihan_hanzi_insert()
konten_home_update_entry()
latihan_nada_insert()
konten_about_update_entry() latihan_bopomofo_insert()
skor()
logout()

KontenModel MemberModel SkorModel

AdminModel
id id
username home
nama id_member
password about jenis_latihan
username
password tanggal
update_entry()
insert_entry() skor
sekolah
update_entry()
check_exists() update_home_entry()
kelas
insert_entry()
update_about_entry()
insert_entry() select_all_entry()
select_entry()
update_entry()
delete_entry()
select_entry()
select_entry_by_username()
select_all_entry()
check_exists()

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)
Password varchar (100)

11
 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) yang terdapat pada Aplikasi ini.

12
 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
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.};

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.

13
 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
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>
26. </tr>

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.

14
 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
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>

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.

15
 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
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;

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.

16
 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
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. ?>
16. </table>

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.

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

18
 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

Perbandingan Nilai Rata - Rata Hasil

Pembelajaran dengan Aplikasi dan
100
Pembelajaran secara Konvensional

80

60
Aplikasi
40
Konvensional
20

0
Materi 1 Materi 2 Materi 3

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

20