## SMATIKA : STIKI Informatika Jurnal Vol. 12, No. 1, Juni 2022, pp. 1~6 ISSN: 2087-0256, e-ISSN: 2580-6939

## Integrasi Visualisasi Sintak Bahasa Pemrograman PHP dengan Learning Management Systems (LMS)

## Syntax Visualization Integration of PHP Programming Language with Learning Management Systems
Akhmad Zaini 1*
Hestiningtyas Yuli Pratiwi 2
1 Teknik Informatika, Universitas PGRI Kanjuruhan Malang, Indonesia 2 Pendidikan Fisika, Universitas PGRI Kanjuruhan Malang, Indonesia 1 zaini@unikama.ac.id, 2 hesti@unikama.ac.id
*Penulis Korespondensi:
Akhmad Zaini zaini@email.ac.id Riwayat Artikel: Diterima : 15 Desember 2021 Direview : 17 Januari 2022 Disetujui : 18 Maret 2022 Terbit : 13 Juni 2022

## Abstrak
Salah satu permasalahan yang sering dihadapi para pemula dalam mempelajari bahasa pemrograman adalah rumitnya sintak yang harus dipelajari. Pustaka Blockly merupakan solusi yang bisa ditempuh untuk mengurangi kesalahan penulisan sintak bahasa pemrograman. Blockly memungkinkan penggunanya untuk menulis sintaks bahasa pemrograman secara visual, pengguna cukup menata puzzle kemudian susunan puzzle dapat dibangkitkan secara otomatis menjadi skrip bahasa pemrograman. Namun demikian, pustaka Blockly hanyalah sebatas tools untuk penyunting. Blockly belum dilengkapi dengan fitur alur pembelajaran, agar materi dapat tersampaikan ke pengguna, kita harus mengatur alur pembelajaran yang baik. Learning Management System (LMS) merupakan sistem pengolah konten pembelajaran yang telah menyediakan fitur alur pembelajaran. Penelitian ini bertujuan untuk menggabungkan kelebihan yang dimiliki pustaka Blockly dengan kelebihan yang dimiliki oleh sistem LMS sehingga menjadi sebuah media pembelajaran bahasa pemrograman yang baik. Alur pembelajaran disusun dengan mengutamakan pemahaman pola penulisan sintak melalui serangkaian simulasi, baru kemudian diikuti penjelasan teori dan diskusi. Hasil tanggapan pengguna terhadap media pembelajaran ini menunjukkan efektifitas sebesar 79%, kemenarikan 81 % dan efisiensi sebesar 81%. Kata Kunci: bahasa pemrograman, sintak PHP, LMS , Blockly , puzzle

## Abstract
One of the problems that are often faced by beginners in learning programming languages is the complexity of the syntax that must be learned. The Blockly library is a solution that can be taken to reduce programming language syntax errors. With this library, users can simply arrange puzzles and then the puzzle arrangements can be generated automatically into programming language scripts. However, the Blockly library is only a tool for programming penyunting s. For the material to be conveyed to users, we must arrange a good learning path. In order for the material to be structured into a good learning path, we need a learning content processing system or LMS. This study aims to integrate the advantages of the Blockly library with the advantages of the LMS system so that it becomes a good programming language learning medium. The learning path is structured by prioritizing the understanding of syntax writing patterns through a series of simulations, followed by theoretical explanations and discussions. The results of user responses to this learning media show effectiveness of 79%, attractiveness of 81% and efficiency of 81%.
Keywords: programming language, PHP syntax, LMS , Blockly, puzzle

## 1. Pendahuluan
Cara berpikir komputasional merupakan cara berpikir yang banyak dibutuhkan pada abad ini [1]. Salah satu aspek dalam cara berpikir komputasional adalah penyelesaian masalah dengan menggunakan algoritma [2]. Algoritma dapat diimplementasikan melalui Bahasa pemrograman [3]. Oleh karena itulah saat ini Bahasa pemrograman tidak hanya diberikan pada mahasiswa pada jurusan IT saja. Bahasa pemrograman sudah mulai diperkenalkan pada jurusan-jurusan non komputer, khususnya jurusan-jurusan Science, technology, engineering, and mathematics (STEM) [4]. Selain sebagai sarana dalam mengimplementasikan algoritma, bahasa pemrograman juga memiliki cakupan manfaat yang cukup luas seperti pembuatan sistem informasi, menciptakan simulasi maupun pemodelan [5] sampai dengan menciptakan sebuah machine learning [6].
Sampai dengan saat ini, bahasa pemrograman masih menjadi momok yang menakutkan bagi beberapa mahasiswa. Tingginya tingkat kegagalan mahasiswa dalam menguasai bidang ini menjadi salah satu permasalahan yang penting untuk diselesaikan [7]. Salah satu tingginya kegagalan dalam memahami bahasa pemrograman adalah komplektsitas komponen yang harus dikuasai oleh mahasiswa [8].
Secara sederhana, saat seorang mahasiswa mempelajari bahasa pemrograman, terdapat dua bagian penting yang harus dikuasai yakni bagian sintak dan bagian algoritma. Bagian sintak merupakan bagian yang mengatur tata cara penulisan script bahasa pemrograman [9], sedangkan bagian algoritma adalah bagian yang mengatur pola pikir atau sistematika dalam menyelesaikan sebuah permasalahan.
Bagian sintak pada bahasa pemrograman dapat dipermudah melalui penggunaan puzzle [10] secara visual. Penggunaan puzzle dapat memudahkan para pemula untuk menghindari kesalahan dalam penulisan sintak. Kemudahan dalam bentuk visualisasi ini diciptakan untuk para pemula agar mereka tidak kehilangan motivasi belajar, dan pada akhirnya dapat mengurangi kegagalan dalam mempelajari bahasa pemrograman [9]. Pustaka puzzle yang telah dikembangkan selama ini telah mampu membantu para pemula [8][10], namun beberapa pustaka ini masih belum berfokus pada proses pembelajaran karena pengembangan masih berfokus pada penyunting Bahasa pemrograman saja.
Sebuah media pembelajaran yang baik harus disajikan dengan alur pembelajaran yang sistematis serta dilengkapi interaksi yang baik pula [11], hal ini bertujuan agar mahasiswa dapat memahami materi dengan maksimal. Learning Management Systems (LMS) merupakan solusi yang bisa kita gunakan dalam rangka menyajikan konten pembelajaran daring agar dapat tersaji secara sistematis [12]. Penggabungan kelebihan-kelebihan, baik yang dimiliki oleh LMS maupun penyunting puzzle diharapkan dapat menghasilkan sebuah media pembelajaran bahasa pemrograman bagi pemula yang bersifat asistif dan dapat membantu bila dibandingkan dengan belajar melalui MOOC pada umumnya atau melalui penyunting berbasis puzzle secara konvensional. Evaluasi keberhasilan media pembelajaran berbasis web dapat dilakukan dengan mengukur 3 parameter dasar yakni efektifitas, kemenarikan dan efisiensi [13].

## 2. Metode Penelitian
Penelitian dimulai dengan sebuah survei yang ditujukan untuk mendapatkan informasi mengenai gambaran topik apa saja yang akan disajikan pada media pembelajaran. Survei dilakukan pada 46 mahasiswa program studi Teknik Infromatika Universitas PGRI Kanjuruhan Malang. Mayoritas responden merupakan mahasiswa yang telah menyelesaikan perkuliahan bahasa pemrograman dan hanya terdapat 5% responden yang belum menyelesaikan perkuliahan tersebut.
Seluruh pertanyaan dalam kuesioner survei adalah pertanyaan yang berhubungan dengan analisis sintak. Responden tidak diminta untuk menuliskan script sama sekali. Responden hanya
perlu memilih salah satu jawaban yang paling tepat menurut mereka. Tingkat ketepatan responden dalam memahami sintak bila dilihat berdasarkan topik bisa dilihat pada Tabel I.
Tabel I. Tingkat Pemahaman Responden pada Masing-masing Topik Topik Ketepatan Operator 89 % Tipe data 37 % Output 47 % Senarai 37 % Ekspresi Logika 50 % Loop 58 % Kombinasi loop dan logika 11 % Rata-rata 47 % Berdasarkan survei permulaan, topik yang digunakan dalam media pembelajaran adalah :
 Variabel dan tipe data
 Senarai
 Logika dan Ekspresi Logika
 Perulangan
Media pembelajaran harus tersusun dengan cara yang sangat mudah bagi pemula. Oleh karena itu media tidak diawali dengan teori, melainkan para peserta akan diberikan serangkaian tutorial dan simulasi terlebih dahulu, baru kemudian diberikan teori. Mekanisme penyajian seperti ini bertujuan untuk memberikan gambaran kepada peserta terhadap pola penulisan sintak bahasa pemrograman. Sistematika penyajian materi pada tiap-tiap topik adalah sebagai berikut :
 Ruang simulasi.
 Penjelasan Teori.
 Unduhan bahan tayang.
 Evaluasi.
 Ruang diskusi.
 Umpan balik.
Media pembelajaran yang telah dihasilkan perlu diukur kualitasnya, untuk keperluan ini, dilakukan pengujian secara terbatas pada 90 peserta yang merupakan gabungan dari mahasiswa Program Studi Teknik Informatika maupun Non Informatika. Pelibatan terhadap responden Non Informatika bertujuan untuk mendapatkan gambaran yang lebih luas, bila produk disebarkan secara publik. Aspek yang diukur pada pengujian adalah efektifitas, kemenarikan dan efisiensi [13].
3. Hasil dan Pembahasan Hasil dari desain integrasi penyunting puzzle dengan sistem LMS dapat dilihat pada beberapa aspek, antara lain :

## Aspek Teknologi
Teknologi visualisasi bahasa pemrograman PHP disajikan pada sebuah penyunting khusus yang telah dilengkapi pustaka Blockly . Penyunting puzzle ini diletakkan pada server khusus yang didalamnya terdapat node js. Hal ini diperlukan mengingat pustaka Blockly memerlukan node js agar dapat berjalan dengan baik. Penyunting puzzle tidak secara langsung ditayangkan ke peserta. Pengguna yang masih pemula memerlukan sistematika pembelajaran yang baik, sehingga materi dapat diserap dengan baik pula oleh peserta. Sistematika pembelajaran yang baik, dapat disajikan pada sistem LMS, oleh karena itu penyunting puzzle ini ditempelkan pada
sebuah sistem LMS. Sistem LMS yang telah dilengkapi penyunting puzzle dapat diakses secara publik oleh peserta melalui tautan https://asistif.id/ . Gambar 1 menunjukkan skema penerapan integrasi teknologi visualisasi puzzle dengan sistem LMS.

## Gambar 1. Desain teknologi
Dengan mekanisme ini, peserta hanya perlu membuka 1 tautan saja, yakni tautan LMS ( https://asistif.id ). Penyunting puzzle yang ditempelkan pada LMS juga telah dilengkapi dengan lingkungan virtual yang dapat secara langsung digunakan oleh peserta untuk menjalankan script PHP. Dengan cara ini peserta tidak perlu lagi berpindah halaman untuk menyusun puzzle , melihat script dan mengeksekusinya secara langsung. Kemudahan-kemudahan ini akan membuat peserta tidak kehilangan motivasi dalam mempelajari bahasa pemrograman. Penyunting puzzle untuk peserta dapat dilihat pada gambar 2.

## Gambar 2. Penyunting puzzle yang telah dilengkapi lingkungan virtual

## Aspek Konten
Format penyajian materi yang digunakan pada sistem LMS lebih banyak mendahulukan ruang simulasi, baru kemudian diikuti oleh aktivitas lainnya seperti penjelasan teori, evaluasi dan lain sebagainya. Teknik ini bertujuan untuk memberikan gambaran kepada peserta terlebih dahulu mengenai pola penulisan sintak pemrograman sebelum mereka mempelajari teorinya. Rincian pola penyajian materi pada tiap-tiap topik adalah sebagai berikut :
 Ruang Simulasi : Bagian ini merupakan bagian utama dari media pembelajaran yang berisi video tutorial dan penyunting puzzle .
 Penjelasan Teori : Setelah mengikuti serangkaian simulasi, peserta dapat melanjutkan aktivitas dengan menyimak video teori. Video teori yang disajikan dibuat sesederhana mungkin dan sifatnya menjelaskan bagian-bagian yang telah dilakukan oleh mahasiswa selama melakukan simulasi.
 Unduhan Bahan Tayang : Bagian ini merupakan aktivitas yang berisi unduhan bahan tayang yang digunakan pada video penjelasan teori (ppt).
 Evaluasi : Bagian ini berisi latihan-latihan tugas dan kuis yang dapat dikerjakan oleh mahasiswa untuk mengukur tingkat pemahaman mereka.
 Ruang Diskusi : Selama melakukan simulasi dan menyimak teori, tentunya peserta akan mengalami kendala. Berbagai kendala dan pertanyaan dapat mereka sampaikan pada bagian ini. Selain itu pencatatan ruang diskusi juga berguna untuk memberikan pemahaman bagi peserta lain yang mengalami permasalahan serupa.
 Umpan Balik : Bagian ini merupakan aktivitas pendukung yang dapat digunakan sebagai dasar perbaikan dalam penyajian materi agar semakin baik kedepannya.
Tanggapan Pengguna
Hasil survei dalam pengukuran kualitas media pembelajaran dapat dilihat pada tabel 2.
Tabel 2. Hasil tanggapan pengguna No Bagian Kategori Prosentase penilaian 1 Efektifitas Tujuan 75% Isi 82% Teknologi 80% Desain pesan 80% Rata-rata efektifitas 79% 2 Kemenarikan Tujuan 75% Isi 84% Teknologi 80% Desain pesan 83% Rata-rata kemenarikan 81% 3 Efisiensi Tujuan 82% Isi 74% Teknologi 84% Desain pesan 82% Rata-rata efisiensi 81%
Hasil survei menunjukkan rata-rata efektifitas, kemenarikan dan efisiensi masih berada di atas 75 %. Efektifitas menjadi aspek yang memiliki penilaian terendah. Hal ini disebabkan karena terdapat beberapa peserta yang sama sekali belum mengenal bahasa pemrograman, sehingga berpotensi mengalami kesulitan ketika langsung berhadapan dengan sistem LMS.

## 4. Penutup
Integrasi teknologi visualisasi pemrograman PHP dengan sistem LMS mampu menghasilkan sebuah media pembelajaran yang dapat memudahkan peserta. Penyajian bahan ajar yang lebih mengutamakan pendekatan pemahaman pola kemudian diikuti dengan penjelasan teori menghasilkan efektifitas sebesar 79% , kemenarikan sebesar 81 % dan efisiensi 81%.
Keunggulan lain yang diperoleh melalui penyuntingan bahasa pemrograman secara visual adalah penggunaan lingkungan virtual. Penyunting puzzle telah dilengkapi dengan lingkungan virtual, dimana dengan lingkungan tersebut, media pembelajaran sangat dimungkinkan untuk bisa dipelajari oleh peserta yang belum memiliki PHP pada perangkatnya. Kondisi ini sangat
sesuai apabila media ingin diterapkan kepada peserta yang masih awam dengan teknologi pemrograman.
Pengembangan media pembelajaran bahasa pemrograman yang telah dilengkapi penyunting puzzle masih memiliki peluang yang sangat luas. Penggunaan berbagai teknologi asistif untuk individu dengan keterbatasan khusus sampai dengan penggunaan pendekatan berbasis ubiqutos learning dalam penyajian kontennya dapat dilakukan dalam rangka meningkatkan kualitas dari media pembelajaran ini.

## 5. Referensi
[1] D. Pérez-Marín, R. Hijón-Neira, A. Bacelo, and C. Pizarro, “Can computational thinking be improved by using a methodology based on metaphors and scratch to teach computer programming to children?,” Comput. Human Behav. , vol. 105, 2020, doi: 10.1016/j.chb.2018.12.027.
[2] C. Angeli et al. , “A K-6 computational thinking curriculum framework: Implications for teacher knowledge,” Educ. Technol. Soc. , vol. 19, no. 3, pp. 47–57, 2016.
[3] A. Vahldick, P. R. Farah, M. J. Marcelino, and A. J. Mendes, “A blocks-based serious game to support introductory computer programming in undergraduate education,” Comput. Hum. Behav. Reports , vol. 2, no. November, p. 100037, 2020, doi: 10.1016/j.chbr.2020.100037.
[4] M. Thuné and A. Eckerdal, “Analysis of Students’ learning of computer programming in a computer laboratory context,” Eur. J. Eng. Educ. , vol. 44, no. 5, pp. 769–786, 2019, doi: 10.1080/03043797.2018.1544609.
[5] D. Brandstetter, X. Yang, D. Lüftner, F. S. Tautz, and P. Puschnig, “kMap.py: A Python program for simulation and data analysis in photoemission tomography,” Comput. Phys. Commun. , vol. 263, p. 107905, 2021, doi: 10.1016/j.cpc.2021.107905.
[6] K. Gao, G. Mei, F. Piccialli, S. Cuomo, J. Tu, and Z. Huo, “Julia language in machine learning: Algorithms, applications, and open issues,” Comput. Sci. Rev. , vol. 37, p. 100254, 2020, doi: 10.1016/j.cosrev.2020.100254.
[7] K. Adu-ManuSarpong, J. Kingsley Arthur, and P. Yaw Owusu Amoako, “Causes of Failure of Students in Computer Programming Courses: The Teacher Learner Perspective,” Int. J. Comput. Appl. , vol. 77, no. 12, pp. 27–32, 2013, doi: 10.5120/13448-1311.
[8] N. L. Mingoc and E. L. R. Sala, “Design and development of learn your way out: A gamified content for basic Java computer programming,” Procedia Comput. Sci. , vol. 161, pp. 1011– 1018, 2019, doi: 10.1016/j.procs.2019.11.211.
[9] M. S. Naveed, M. Sarim, and K. Ahsan, “Learners Programming Language a Helping System for Introductory Programming Courses,” Mehran Univ. Res. J. Eng. Technol. , vol. 35, no. 3, pp. 347–358, 2016, doi: 10.22581/muet1982.1603.05.
[10] D. Weintrop and U. Wilensky, “How block-based, text-based, and hybrid block/text modalities shape novice programming practices,” Int. J. Child-Computer Interact. , vol. 17, pp. 83–92, 2018, doi: 10.1016/j.ijcci.2018.04.005.
[11] D. E. Yawson and F. A. Yamoah, “Understanding satisfaction essentials of E-learning in higher education: A multi-generational cohort perspective,” Heliyon , vol. 6, no. 11, p. e05519, 2020, doi: 10.1016/j.heliyon.2020.e05519.
[12] L. Abazi-Bexheti, A. Kadriu, M. Apostolova-Trpkovska, E. Jajaga, and H. Abazi-Alili, “LMS Solution: Evidence of Google Classroom Usage in Higher Education,” Bus. Syst. Res., vol. 9, no. 1, pp. 31–43, 2018, doi: 10.2478/bsrj-2018-0003.
[13] G. V. Davidson-Shivers, K. L. Rasmussen, and P. R. Lowenthal, Web-based learning: Design, implementation and evaluation: Second edition . 2017.