Pengembangan Website Interaktif Penulisan Hanzi Dan Audio Pronounciation Dengan Metode Prototyping

Ulinnuha Maulaya; Anisa  Lutfiyani

doi:10.69693/ijmst.v4i2.9673

Authors

Ulinnuha Maulaya Universitas Ma’arif Nahdlatul Ulama
Anisa Lutfiyani Universitas Ma’arif Nahdlatul Ulama

DOI:

https://doi.org/10.69693/ijmst.v4i2.9673

Keywords:

Website Interaktif, Hanzi, HTML5 Canvas, Audio Pronunciation, Laravel, Prototyping

Abstract

Perkembangan teknologi informasi mendorong terciptanya media pembelajaran berbasis web yang lebih interaktif dan responsif terhadap kebutuhan pengguna. Dalam pembelajaran bahasa Mandarin, khususnya penulisan hanzi, masih terdapat keterbatasan media yang mampu mengintegrasikan latihan menulis karakter dan pelafalan dalam satu platform. Penelitian ini bertujuan mengembangkan website interaktif penulisan hanzi dan audio pronunciation berbasis web menggunakan metode prototyping. Sistem dikembangkan dengan framework Laravel, memanfaatkan HTML5 Canvas sebagai media latihan menulis karakter Mandarin secara langsung pada browser, serta mengintegrasikan fitur audio pronunciation untuk membantu pengguna memahami pelafalan yang benar. Metode prototyping diterapkan melalui tahapan analisis kebutuhan, perancangan sistem, pembuatan prototype, evaluasi prototype, implementasi, dan pengujian sistem. Pengujian dilakukan menggunakan metode Black Box Testing untuk mengevaluasi fungsionalitas sistem, serta usability testing terhadap 10 responden yang sedang mempelajari bahasa Mandarin untuk mengukur tingkat kemudahan penggunaan dan kenyamanan pengguna. Hasil penelitian menunjukkan bahwa sistem berhasil mengintegrasikan fitur input karakter hanzi, media penulisan berbasis canvas, audio pronunciation, dan navigasi sistem dalam satu platform pembelajaran berbasis web. Berdasarkan hasil Black Box Testing, seluruh fitur utama sistem berjalan sesuai dengan kebutuhan dan rancangan yang telah ditetapkan. Selain itu, hasil usability testing menunjukkan bahwa sistem memiliki tingkat kemudahan penggunaan, interaktivitas, dan kenyamanan yang baik. Implementasi HTML5 Canvas memberikan pengalaman belajar yang lebih aktif dan interaktif, sedangkan fitur audio pronunciation membantu pengguna dalam memahami pelafalan karakter Mandarin dengan lebih efektif. Dengan demikian, website yang dikembangkan dapat menjadi media pembelajaran alternatif yang mendukung proses belajar penulisan dan pelafalan hanzi secara lebih interaktif, efektif, dan mudah diakses.

References

Aryani, Y., Aqil, I., & Paramita, B. (2025). Penerapan Unified Modeling Language (UML) pada Digitalisasi Sistem Informasi Perpustakaan. Digital Transformation Technology, 4(2), 1032–1040. https://doi.org/10.47709/digitech.v4i2.5153

asrianda,+2.+Veri+Ilhadi+dan+Rijalul+Arif. (n.d.).

Astuti, L., Wihardi, Y., & Rochintaniawati, D. (2020). The Development of Web-Based Learning using Interactive Media for Science Learning on Levers in Human Body Topic. Journal of Science Learning, 3(2), 89–98. https://doi.org/10.17509/jsl.v3i2.19366

Aurellia, A. (2025). PEMANFAATAN UML DALAM PERANCANGAN SISTEM INFORMASI PRODUK KREATIF DAUR ULANG SAMPAH BERBASIS WEB. Jurnal Informatika Dan Teknik Elektro Terapan, 13(3S1). https://doi.org/10.23960/jitet.v13i3S1.8073

Fajaria, M., & Ditha Tania, K. (2023). EVALUASI USER EXPERIENCE DAN USABILITY SISTEM INFORMASI AKADEMIK MENGGUNAKAN METODE USER EXPERIENCE QUESTIONNAIRE DAN SYSTEM USABILITY SCALE. JOISIE Journal Of Information System And Informatics Engineering, 7(2), 204–213.

Giyanti, A. R., Harlita, H., & Sugiharto, B. (2022). Pengembangan media website interaktif berbasis keterampilan proses sains pada materi animalia untuk kelas x sekolah menengah atas. BIO-PEDAGOGI, 10(2), 101. https://doi.org/10.20961/bio-pedagogi.v10i2.56522

Hidayat, T., & Putri, H. D. (2019). Pengujian Portal Mahasiswa pada Sistem Informasi Akademik (SINA) menggunakan Black Box Testing dengan Metode Equivalence Partitioning dan Boundary Value Analysis. JUTIS, 7(1). www.ccssenet.org/cis

Himmah, E. F., Astutik, S., & Aristya, P. D. (2024). Development of HTML5-Based Mobile Learning Media to Enhance Critical Thinking Skills of Elementary School Students in IPAS Learning. Jurnal Paedagogy, 11(4), 836. https://doi.org/10.33394/jp.v11i4.13065

Hitesh, & Sahil-Khan. (2049). DEVELOPING A WEB-BASED MUSIC PLAYER WITH ENHANCED USER EXPERIENCE AND HIGH-QUALITY AUDIO. Www.Irjmets.Com @International Research Journal of Modernization in Engineering. www.irjmets.com

Huda, M. N., Burhan, M., Satibi, A., Pradita, H. A., Saifudin, A., & Kusyadi, I. (2022). Implementasi Black Box Testing pada Aplikasi Sistem Kasir dengan Menggunakan Teknik Equivalence Partitions. Jurnal Teknologi Sistem Informasi Dan Aplikasi, 5(2), 120. https://doi.org/10.32493/jtsi.v5i2.17645

Iman Nugraha, N., Cristiano Rabika, J., Rangkuti Bagas Muzaqi, A., Andisa, G., & Marsha Adzani, R. (2025). Aditya Wicaksono 6 ) , Gema Parasti Mindara 7 ) 1,2,3,4,5,6) Teknologi Rekayasa Perangkat Lunak, Sekolah Vokasi, IPB University 7) Teknologi Rekayasa Komputer, Sekolah Vokasi. IPB University Jl. Kumbang No, 20(1), 1–10.

Indah Melyani, R., & Aji, S. (2023). Pengembangan Sistem Informasi Penggajian Berbasis Web Menggunakan Framework Laravel dengan Metode Agile Software Development. Jurnal Sistem Informasi Akuntansi), 03(01). http://jurnal.bsi.ac.id/index.php/jasika

Jamaludin, J. (2024a). Perancangan Arsitektur Sistem Informasi Inventory Management System dalam Mendukung Smart Economy Kabupaten Sukabumi. Jurnal Teknologi Sistem Informasi Dan Aplikasi, 7(3), 1363–1378. https://doi.org/10.32493/jtsi.v7i3.31441

Jamaludin, J. (2024b). Perancangan Arsitektur Sistem Informasi Inventory Management System dalam Mendukung Smart Economy Kabupaten Sukabumi. Jurnal Teknologi Sistem Informasi Dan Aplikasi, 7(3), 1363–1378. https://doi.org/10.32493/jtsi.v7i3.31441

Kridatama, J., & Dan Teknologi Perancangan, S. (n.d.). Perancangan Sistem Informasi Perpustakaan SMA Negeri 1 Gombong Berbasis Web Menggunakan Hypertext Preprocessor (PHP) dan MySQL (Vol. 6).

Macklon, F., Viggiato, M., Romanova, N., Buzon, C., Paas, D., & Bezemer, C.-P. (2024a). A Taxonomy of Testable HTML5 Canvas Issues. https://doi.org/10.1109/TSE.2023.3270740

Macklon, F., Viggiato, M., Romanova, N., Buzon, C., Paas, D., & Bezemer, C.-P. (2024b). A Taxonomy of Testable HTML5 Canvas Issues. https://doi.org/10.1109/TSE.2023.3270740

Macklon, F., Viggiato, M., Romanova, N., Buzon, C., Paas, D., & Bezemer, C.-P. (2024c). A Taxonomy of Testable HTML5 Canvas Issues. https://doi.org/10.1109/TSE.2023.3270740

Maliki, I., Jaya, K., Lestari, G. C., Irawan, D., & Wasid, A. (n.d.). PERANCANGAN SISTEM INFORMASI BERBASIS WEB PADA BIMBINGAN BELAJAR (BIMBEL) “BNF.” Jurnal Informatika & Komputasi, 18.

Marifatulloh, S., & Fajarina, M. (2022). Pengembangan E-Learning Berbasis WEB Untuk Pembelajaran Bahasa Inggris. Sukma: Jurnal Pendidikan, 6(1), 17–34. https://doi.org/10.32533/06102.2022

Menrisal, M., Rezi, F., & Rahmadhani, P. (2022). Pengembangan E-Learning Menggunakan PHP Native pada SMK Muhammadiyah 1 Padang. JURNAL PTI (PENDIDIKAN DAN TEKNOLOGI INFORMASI) FAKULTAS KEGURUAN ILMU PENDIDIKAN UNIVERSITA PUTRA INDONESIA “YPTK” PADANG, 25–30. https://doi.org/10.35134/jpti.v9i1.106

Mustaqbal, M. S., Firdaus, R. F., & Rahmadi, H. (2015). PENGUJIAN APLIKASI MENGGUNAKAN BLACK BOX TESTING BOUNDARY VALUE ANALYSIS (Studi Kasus : Aplikasi Prediksi Kelulusan SNMPTN). In Jurnal Ilmiah Teknologi Informasi Terapan: I (Issue 3).

Nurvidia, D. S., & Yulianto, S. (2024). Developing Digital Pocketbook Interactive Based on HTML-5 to Improve Mathematics Learning Outcomes. Journal of Integrated Elementary Education, 4(2), 207–221. https://doi.org/10.21580/jieed.v4i2.21789

Rahardian, R. L., Khodijah, S., & Rizki, C. A. (2025). Evaluation of the Usability of the Academic Information System Using the System Usability Scale (SUS) Method. Journal of Computer Science Artificial Intelligence and Communications, 2(2), 62–66. https://doi.org/10.64803/jocsaic.v2i2.62

Rahdiyatmi, S., Jatilinuar, K., Widyastuti, I., & Karawitan, J. (n.d.). PENGEMBANGAN WEBSITE BERBASIS GOOGLE SITE SEBAGAI MEDIA PEMBELAJARAN BLENDED LEARNING KARAWITAN MELALUI FITUR INTERAKTIF. 27.

Rahmawati, L., & Sumarsono, S. (2024). Desain Pengembangan Website dengan Arsitektur Model View Controller pada Framework Laravel. Jurnal Teknologi Dan Sistem Informasi Bisnis, 6(4), 785–790. https://doi.org/10.47233/jteksis.v6i4.1497

Riyan Maulana, M., Rizky Putra Aji Utama, M., & Nurdiana, D. (2023). Jurnal Teknologi Sistem Informasi dan Aplikasi Uji Usability dan User Experience Website Sistem Informasi Akademik Universitas Terbuka (SIA UT) Berdasarkan Perspektif Mahasiswa Menggunakan Metode USE Questionnaire dan Cognitive Walkthrough. 6(4), 713–729. https://doi.org/10.32493/jtsi.v6i3.34189

Rizal, D. F., & Nuryasin, I. (2025). Implementasi Blackbox Testing Pada Sistem Informasi Sirkulasi Perpustakaan Berbasis Website dengan Teknik Equivalence Partitioning. Decode: Jurnal Pendidikan Teknologi Informasi, 5(1), 65–78. https://doi.org/10.51454/decode.v5i1.1052

Sari, I. P., Jannah, A., Meuraxa, A. M., Syahfitri, A., & Omar, R. (2022). Perancangan Sistem Informasi Penginputan Database Mahasiswa Berbasis Web. Hello World Jurnal Ilmu Komputer, 1(2), 106–110. https://doi.org/10.56211/helloworld.v1i2.57

Septianti, R., & Firdaus, T. (2024). Development of Website-Based Interactive Learning Media Using Google Sites on Sound Wave Material. Islamic Journal of Integrated Science Education (IJISE), 3(1), 25–36. https://doi.org/10.30762/ijise.v3i1.2631

Setiawan, I. M. D. (2024). Pengembangan Sistem E-Learning berbasis Website di SD Negeri 3 Sesetan. PENDIPA Journal of Science Education, 8(1), 103–107. https://doi.org/10.33369/pendipa.8.1.103-107

Suria, O. (2024). Assessing Financial Information System Usability Using System Usability Scale (SUS) and Usability Metric for User Experience-Lite (UMUX-Lite). Jurnal Teknologi Sistem Informasi Dan Aplikasi, 7(2), 538–547. https://doi.org/10.32493/jtsi.v7i2.38723

Syafitri1, A. R., Angraeni2, A., & Wibowo, A. (n.d.). IKN: Jurnal Informatika dan Kesehatan Sistem Informasi Manajemen Perpustakaan Digital Berbasis Web Menggunakan Framework Laravel. Retrieved https://jurnal.unw.ac.id/index.php/IKN

Wayahdi, M. R., & Ruziq, F. (2023). Pemodelan Sistem Penerimaan Anggota Baru dengan Unified Modeling Language (UML) (Studi Kasus: Programmer Association of Battuta). Jurnal Minfo Polgan, 12(1), 1514–1521. https://doi.org/10.33395/jmp.v12i1.12870

Yanto, W., Alhaq, H., Syofiana Sari, R., & Juanda, M. (2025). Impression: Jurnal Teknologi dan Informasi Implementasi UML dalam Desain Sistem Informasi Program Studi SI di Universitas Merangin. In Jurnal Teknologi dan Informas (Vol. 4, Issue 2).

Zahra, A. P., Wardani, R. B., & Bernardo, R. K. (2025). Development of Interactive Learning Media Using the Canva Website on the Topic of Elasticity and Hooke’s Law. Jurnal Literasi Pendidikan Fisika (JLPF), 6(1), 42–49. https://doi.org/10.30872/jlpf.v6i1.4316

Zidni Ilman, M., & Ardian Pramana, D. (2025). Sistem Informasi Pelayanan Desa Berbasis Website dengan Framework Laravel (Studi Kasus : Desa Penggarutan Kecamatan Bumiayu). In Jurnal Sistem Informasi dan Teknologi Peradaban (JSITP) (Vol. 6, Issue 2). www.journal.peradaban.ac.id

Zulkarnain, Z., Utami, L. S., Sabaryati, J., Islahudin, I., Subhan, S., & Arisandi, D. (2024). Design of virtual laboratory media based on HTML 5 Canvas and graphical user interface in physics learning. Journal of Instructional and Development Researches, 4(6), 477–485. https://doi.org/10.53621/jider.v4i6.405