Perancangan dan Implementasi Aplikasi Media...

Jurnal Teknologi Informasi-Aiti, Vol. 11. No.2, Agustus 2014 : 101 - 202

120

Perancangan dan Implementasi Aplikasi MediaPembelajaran Bahasa Pemrograman Pascal pada

Platform Android

1)Andhika Hartono, 2)Hindriyanto Dwi Purnomo, 3)Yos Richard Beeh

Fakultas Teknologi InformasiUniversitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, IndonesiaEmail: 1)[email protected], 2)[email protected],

3)[email protected]

Abstract

Pascal programming language is widely used in various applications.Currently, web articles, books and videos are the main learning media forlearning the language. The advanced development of mobile devicesbrings the opportunity to create more interactive learning media forlearning Pascal programming language. In this paper, an application oflearning tools for Pascal programming language based on Android platformis proposed. Prototyping model is implemented to build the application.The prototype model of the application enable its users to show the tutorial,modified and execute the code as well as show error message if error isfound.

Keywords: Learning Media, Pascal Programming Language, Android

1. Pendahuluan

Perkembangan teknologi sangatmembantu masyarakat mengatasi berbagaipermasalahan yang dihadapi dalam kehidupan sehari-hari, seperti penggunaan pirantimobile untuk mendukung aktivitas sehari-hari. Android merupakan sistem operasimobile yang paling banyak digunakan di seluruh dunia dan terus berkembang setiapbulannya [1]. Selain itu, banyak perangkat mobile Android yang memiliki hargaterjangkau. Oleh karena itu banyak pengembang yang membuat aplikasi berbasisAndroid untuk mengatasi masalah sehari-hari, termasuk untuk media pembelajaran.

Bahasa pemrograman Pascal merupakan bahasa pemrograman yang banyakdigunakan untuk belajar di Universitas untuk mempelajari logika dan strukturpemrograman karena tergolong tidak memerlukan persyaratan khusus untukmempelajarinya, mudah dipelajari bagi pemula sebelum mereka mempelajari bahasapemrograman yang lain, bahasa yang digunakan sudah terstruktur (structuredlanguage) dan prosedural [2]. Media pembelajaran yang sering dipakai dalammempelajari pemrograman Pascal adalah artikel tutorial di web, buku-buku teksserta video tutorial. Perkembangan teknologi mobile memiliki potensi yang sangatbesar sebagai alternatif media pembelajaran yang lebih interaktif. Selain sudah

121

digunakan secara luas, piranti mobile juga memiliki aksesbilitas yang lebih tinggidibandingkan media lainnya.

Berdasarkan hal tersebut, dalam penelitian ini dibuat aplikasi mediapembelajaran bahasa pemrograman Pascal menggunakanPlatform Android. Mediapembelajaran bahasa pemrograman Pascal dikembangkan untuk platform Androidkarena Android merupakan sistem operasi mobile yang paling banyak digunakan didunia. Kemudahan yang diberikan oleh media pembelajaran bahasa pemrogramanPascal pada platform Android adalah pengguna tidak perlu belajar menggunakanPC maupun laptop, karena pengguna hanya perlu membuka aplikasi mediapembelajaran melalui mobile phone maupun tablet.Selain kemudahan, penggunajuga dapat mengakses media pembelajaran tersebut kapan saja. Pengguna dapatlangsung mempelajarikonsep-konsep pada bahasa pemrograman Pascal dan langsungmencoba contoh kode program pada aplikasi tanpa harus menjalankan compiler/interpreter Pascal pada PC maupun laptop sehingga dapat menambah akses belajarpengguna. Pemberian interpreter pada mobile phone berfungsi untuk menambahakses latihan mahasiswa untuk mempelajari bahasa pemrograman Pascal, sehinggamahasiswa dapat menggunakan aplikasi ini sebagai media yang variatif.

2. Kajian Pustaka

Aplikasi mobile berkembang sangat pesat dalam beberapa tahun terkahir.Surya [3] mengembangkan sebuah aplikasi mobile menggunakan teknologi Java 2Micro Edition untuk mempelajari bahasa Jawa sebagai kebudayaan Indonesia yangharus dilestarikan. Aplikasi mobile ini dibuat agar ketertarikan untuk mempelajaribahasa Jawa bisa meningkat, dan memudahkan siapa saja untuk belajar bahasaJawa. Surya menyimpulkan bahwa penggunaan aplikasi mobile sebagai mediapembelajaran lebih efektif, efisien, dan dapat diakses kapan saja [3].

Lisa [4] mengembangkan sebuah aplikasi mobile berbasis Android yang dapatmemberikan alternatif pembelajaran kepada siswa selain pembelajaran konvensionalsebagai media bantu untuk mendukung Ujian Nasional Tingkat SMP di SMP N 1Klaten. Lisa menyimpulkan bahwa implementasi sistem mobile learning di SMP N1 Klaten efektif, dapat meningkatkan efisiensi dan efektifitas belajar siswa dalammempersiapkan ujian nasional kelas sembilan dalam hal latihan soal agar dapatmembantu dalam proses belajar [4].

Nghi [5] pada penelitiannya menuliskan bahwa belajar pemrograman sangatsulit dilakukan, staf pengajar lebih sering gagal dalam mengajarkan mahasiswa lebihyang dari mereka harapkan, banyak mahasiswa pada tahun pertama mereka masihbelum mengetahui bagaimana cara pemrograman. Hal ini disebabkan karenapemrograman merupakan cabang matematika terapan yang paling sulit danpemrograman sangat sulit dipelajari juga tidak dapat dipelajari tanpa latihan.Mahasiswa IT sangat sulit untuk melakukan setting pada compiler, menggunakanprogramming editor, dan mengetahui konsep abstrak dari pemrograman.Berdasarkan masalah tersebut Nghi memberikan solusi dengan membuatenvironment pemrograman berbasis web yang interaktif dan konstruktif untukmembantu programmer yang masih belajar untuk mempelajari bahasa high level,

Perancangan dan Implementasi Aplikasi (Hartono, dkk)


122

object-oriented programming seperti Java dan C#. Aplikasi web ini dapatmemberikan feedback dari hasil analisis framework kepada pengguna saatmenjalankan kode program. Hasil latihan menggunakan aplikasi ini menambahperhatian mahasiswa dalam membaca kode program dan kemampuan pemahamanmereka dibandingkan dengan cara tradisional. Aplikasi ini juga membuat mahasiswauntuk berkonsentrasi pada dimensi yang kritis dari masalah untuk diselesaikan danmengurangi kompleksitas dalam membuat sebuah program [5].

Media Pembelajaranmerupakan suatu teknologi pembawa pesan yang dapatdigunakan untuk keperluan pembelajaran; media pembelajaran merupakan saranafisik untuk menyampaikan materi pelajaran. Media pembelajaran merupakan saranakomunikasi dalam bentuk cetak maupun pandang dengar termasuk teknologiperangkat keras. Hakikatnya media pembelajaran sebagai wahana untukmenyampaikan pesan atau informasi dari sumber pesan diteruskan pada penerima.Pesan atau bahan ajar yang disampaikan adalah materi pembelajaran untuk mencapaitujuan pembelajaran atau sejumlah kompetensi yang telah dirumuskan, sehingga dalamprosesnya memerlukan media sebagai alat bantu. Pemanfaatan media harus terencanadan sistematik sesuai dengan tujuan pembelajaran. Kehadiran media sangat membantusiswa untuk memahami suatu konsep tertentu yang sulit dijelaskan dengan bahasaverbal, dengan demikian pemanfaatan media sangat tergantung pada karakteristikmedia dan kemampuan pengajar maupun siswa memahami cara kerja media tersebut,sehingga pada akhirnya media dapat dipergunakan dan dikembangkan sesuai dengantujuan pembelajaran yang diharapkan [6].

Bahasa pemrograman Pascal adalah bahasa tingkat tinggi (high-levellanguage) yang bisa diterapkan di banyak hal awalnya dikembangkan oleh NiklausWirth pada awal 1970. Bahasa pemrograman Pascal dikembangkan untuk keperluanmengajar mata pelajaran sistematik dan membuat program yang efisien dan dapatdiandalkan. Bahasa pemrograman Pascal merupakan bahasa Algol-based danmenyertakan banyak konsep dari Algol. Bahasa pemrograman Pascal menawarkanbeberapa tipe data dan struktur pemrograman dalam pembuatan program yang mudahdipahami dan dipelihara. Bahasa Pemrograman Pascal sangat populer untukkeperluan mengajar dan akademis karena: (1) Mudah dipahami; (2) Merupakanbahasa terstruktur (structured language); (3) Menciptakan program yang transparan,efisien dan dapat diandalkan; (4) Dapat di compile pada bermacam-macam platformkomputer (Windows, Mac OS, dan beberapa versi dari UNIX/LINUX) [2].

Android adalah sistem operasi bersifat open source yang didesain untukperangkat mobile. Android disebarluaskan oleh Google dan dimiliki oleh OpenHandset Alliance. Tujuan dari Open Handset Alliance adalah mempercepat inovasipada mobile dan menawarkan konsumen lebih banyak, lebih murah, dan pengalamanyang lebih baik dalam penggunaan perangkat mobile. Android juga melakukanrevolusi dalam perangkat mobile. Untuk pertama kali, Android merupakan openplatform yang memisahkan hardware dan software yang berjalan didalamnya.Hal ini mengakibatkan banyak device untuk menjalankan aplikasi yang sama danmembuat ekosistem yang lebih kaya untuk developer dan konsumen [7].

Compiler merupakan program yang dapat membaca sebuah program di dalamsatu bahasa (source language) dan menerjemahkannya ke dalam bahasa lain (target

123

language). Peranan penting dari sebuah compiler adalah melaporkan error di dalamsource program yang ditemui saat penterjemahan. Jika target program merupakanprogram bahasa mesin yang dapat dieksekusi, maka target program dapat dipanggiluntuk memproses input dan menghasilkan output [8]. Gambar 1 menjelaskan carakerja compiler dalam mengolah source program.

Gambar 1 Cara Kerja Compiler [8]

Interpreter adalah contoh lain dari pengolah bahasa. Interpreter berbedadengan compiler yang menghasilkan target program sebagai hasil terjemahan,interpreter langsung melakukan eksekusi dari operasi yang diberikan pada sourceprogram untuk menghasilkan output [8]. Gambar 2 menjelaskan cara kerjainterpreter dalam mengolah source program.

Gambar 2 Cara Kerja Interpreter [8]

Lexical Analysisatau scanning adalah tahap pertama dari compiler yangmembaca input karakter-karakter source program dan membagi karakter menjadiurutan yang disebut lexeme, dan menghasilkan output urutan token dari setiaplexeme di dalam source program. Kumpulan token akan dikirim oleh parser untukanalisa syntax. Lexical analyser dapat berhubungan juga dengan symbol table,contohnya ketika lexical analyser menemukan sebuah lexeme yang menyatakanidentifier, maka lexical analyser akan membaca lexeme tersebut di dalam symboltable. Karena lexical analyser adalah bagian dari compiler yang membaca sourcetext, lexical analyser dapat memiliki fungsi lain selain mengidentifikasi lexeme.Contoh fungsi lain adalah menghilangkan komentar dan whitespace (blank, newline,tab, atau mungkin karakter lain yang digunakan untuk membagi token di dalaminput). Fungsi lainnya adalah menyimpan baris yang dapat digunakan untukmemberikan pesan error [8]. Gambar 3 menjelaskan cara kerja lexical analyserdalam mengolah token.

Aplikasi Media Pembelajaran Bahasa Pemrograman Pascal pada PlaformAndroidPendekatan ilmiah yang dipakai dalam penelitian ini adalah pendekatan teknik(engineering approach), dimana penekanannya adalah membangun produk [9],



124

dalam hal ini adalah aplikasi media pembelajaran bahasa pemrograman Pascal padaplatform Android. Metode penelitian yang dipakai adalah metode forward engineeringdimana tahapan penelitian dilakukan dari perencanaan, perancangan, pembuatandan penerapan.

Gambar 3 Lexical Analyser [8]

Metode pengembangan perangkat lunak yang dipakai dalam penelitian iniadalah modelprototyping. Model prototypingadalah salah satu metodepengembangan perangkat lunak yang dibuat dengan pendekatan aspek desain, fungsidan user-interface. Penentuan tujuan umum dilakukan oleh developer dan useruntuk mengetahui gambaran dan kebutuhan pada perangkat lunak yang akandibangun. Bagan mengenai prototype model dapat dilihat pada Gambar 4.

Gambar 4 Bagan Prototype Model [10]

Tahap-tahap dalam protoype model adalah sebagai berikut: (1) Listen toCustomer, (2) Build, dan (3)Customer Test. Dari tahap pertama didapatkan bahwakebutuhan dari sistem adalah sebagai berikut: aplikasi menampilkan menu utamamateri bahasa pemrograman pascal yang terdiri dari kategori dan sub kategori, setelahmemilih materi aplikasi akan menampilkan materi yang dipilih berserta contoh kodeprogram yang dapat dijalankan langsung di dalam aplikasi. Tahap build meliputitahap perancangan dan pengimplementasian aplikasi. Perancangan MediaPembelajaran Bahasa Pemrograman Pascal menggunakan pendekatan ObjectOriented. Sedangkan aplikasi diimplementasikan menggunakan bahasa pemrogramanJava. Tahap pengujian prototype dilakukan dengan melakukan pengujian blackboxtesting untuk melihat fungsionalitas dari aplikasi yang dibuat. hasil pengujian dipakai

125

untuk menyempurnakan aplikasi yang dibuat. Aplikasi akhir kemudian diuji cobakanpada calon pengguna potensial, dalam hal ini adalah mahasiswa di Fakultas TeknologiInformasi, Universitas Kristen Satya Wacana.

Aplikasi media pembelajaran bahasa pemrograman Pascal pada platformAndroid dirancang untuk memiliki perbedaan dengan sistem lain yang sudah ada,perbedaan yang dimiliki antara lain: (1) Sistem dapat mengeksekusi contoh kodeprogram pada materi secara langsung pada sistem menggunakan interpreter; (2)Sistem dapat mengeksekusi contoh kode program yang dirubah dan menampilkanhasil sesuai dengan perubahan yang diberikan; (3) Sistem dapat mendeteksi errorpada kode program jika terjadi kesalahan pada kode program; (4) Interpreterpada sistem memiliki fungsi refractor yang berfungsi untuk memudahkan dalamproses pengecekan error dan eksekusi program; (5) Interpreter pada sistem tidakdapat menangani input dari user. Cara kerja Interpreter yang dirancang pada sistemditunjukkan pada Gambar 5.

Gambar 5 Cara Kerja Interpreter pada Sistem

Aplikasi media pembelajaran bahasa pemrograman Pascal pada platformAndroid dirancang dengan menggunakan UML (Unified Modelling Language)yang terdiri dari use case diagram, activity diagram, sequence diagram, danclass diagram.

Pada use case diagram, user dapat memilih materi bahasa pemrogramanPascal, setelah user memilih materi yang diinginkan sistem akan membuka materibeserta contoh kode program yang sesuai dengan materi yang dipilih, user dapatmencoba contoh kode program yang diberikan sistem dan melihat output dari contohkode program di dalam sistem. Secara umum gambaran sistem dan fungsionalitasnyadalam bentuk Use Case Diagram ditunjukkan pada pada Gambar 6.

Gambar 6 Use Case Diagram

Class diagram menggambarkan package dan class yang digunakan dalampembuatan sistem. Aplikasi yang dibuat memiliki class diagram seperti yang terlihatpada Gambar 7.



126

Gambar 7 Class Diagram

Pada aplikasi media pembelajaran Pascal, terdapat tiga package utama yangdidalamnya terdapat beberapa class. Di dalam package model terdapat tiga class,yaitu: (1) Class ByteKeyword yang berfungsi sebagai kumpulan data bertipe databyte yang merepresentasikan keyword pada bahasa pemrograman Pascal; (2) ClassRefactorSourceCode yang berfungsi untuk menyimpan kode program yang telahdiubah menjadi byte; (3) Class Variabel yang berfungsi untuk menyimpan id, nama,tipe data, dan nilai dari variabel.

Di dalam packagecontroller terdapat empat class, yaitu: (1) Class Refactoryang berfungsi untuk mengubah format inputan kode program Pascal menjadi kodeprogram yang lebih mudah untuk dieksekusi, class Refactor juga memiliki sebuahattribute berupa list object dari class RefactorSourceCode yang berguna untukmenyimpan data yang sudah diubah; (2) Class UbahKeByte yang berfungsi untukmengubah kode program Pascal yang telah diubah di dalam class Refactor menjadibyte, class UbahKeByte juga memiliki sebuah attribute berupa list object dariclass RefactorSourceCode yang berguna untuk menyimpan data yang sudah diubahmenjadi byte; (3) Class PengencekanError berfungsi untuk melakukan pengecekanerror dari byte yang sudah tersimpan, class ini juga berfungsi untuk menyimpanvariabel yang ditemukan selaa proses pengecekan error ke dalam list object dariclass Variabel; (4) Class Eksekusi berfungsi untuk melakukan eksekusi dari byteprogram yang telah dilakukan pengecekan error, class ini akan mengambil databyte dari class RefactorSourceCode dan mengambil variabel dari class Variabeljika ditemukan variabel didalam proses eksekusi.

127

Di dalam package view terdapat 2 class, yaitu: (1) Class MainActivity adalahclass utama yang akan dijalankan aplikasi, di dalam class ini akan menampilkanmenu pilihan materi-materi bahasa pemrograman Pascal; (2) Class MateriActivityadalah class yang akan dijalankan setelah materi di class MainActivity dipilih, classini akan menampilkan materi tentang bahasa pemrograman Pascal sesuai pilihan diclass MainActivity. Di dalam class ini juga menampilkan contoh kode program daribeberapa materi, sesuai dengan materi yang telah dipilih sebelumya. Keempat classdi dalam package controller akan dijalankan di class MateriActivity saat contohkode program yang ada didalam materi dicoba.

Activity diagram menjelaskan aktivitas user dan aplikasi saat pertama kaliaplikasi dijalankan hingga selesai. Tahap awal saat aplikasi dijalankan adalah aplikasimenampilkan materi-materi yang berkaitan tentang bahasa pemrograman Pascal.Setelah itu, user dapat memilih materi apa yang akan dibuka yang kemudian aplikasiakan menampilkan materi tersebut. Setelah user membuka materi, terdapat jugacontoh kode program bahasa pemrograman Pascal yang dapat dicoba oleh user.Jika user mencoba kode program dan aplikasi mendeteksi adanya kesalahan darikode program, maka aplikasi akan menampilkan kesalahan dari kode program danuser harus memperbaiki kode program dan mencoba menjalankan kembali. Jikadidalam kode program tidak terdapat kesalahan maka aplikasi akan menampilkanoutput dari kode program yang dijalankan. Secara umum gambaran sistem danfungsionalitasnya dalam bentuk Activity Diagram ditunjukkan pada pada Gambar8.

Gambar 8 Activity Diagram

Sequence diagram menjelaskan interaksi antar object yang terjadi saat sistemmelakukan eksekusi kode program di dalam MateriActivity, saat pertama kalidijalankan object Refractor akan memanggil fungsi refractorSourceCode yang



128

berfungsi untuk mengubah kode program menjadi kode program baru yang akanlebih mudah didalam pengecekan error dan eksekusi program. Setelah itu akandikembalikan nilai yang disimpan dalam listobject yang akan diubah ke dalam bentukbyte dengan memanggil fungsi ubahByte yang terdapat pada object UbahKeByte,setelah itu akan dikembalikan nilai berupa kumpulan list objectbyte kode program.Hasil list object byte kode program akan dilakukan pengecekan error denganmemanggil fungsi cekError dari object PengecekanError. Fungsi cekError akanmengembalikan nilai berupa String yang berisi baris, kolom, dan keterangan errordari kode program. Object terakhir dari sistem adalah object dari class Eksekusiyang akan menjalankan byte kode program dan mengembalikan nilai berupa nilaiString dari output kode program. Secara umum gambaran sistem danfungsionalitasnya dalam bentuk Sequence Diagram ditunjukkan pada pada Gambar9.

Gambar 9 Sequence Diagram

Gambar 10 Flowchart ProsesMengubah Kode Program Menjadi OutputFlowchart pada Gambar 10 menjelaskan bagaimana proses dilakukan ketika

sistem mengolah kode program menjadi output. Pada awalnya input kode programakan diproses dahulu menjadi bentuk kode program refractor, proses ini perlu

129

dilakukan agar di dalam pengecekan error dan eksekusi program nantinya menjadilebih mudah. Setelah kode program telah menjalani proses refractor, maka prosesselanjutnya adalah mengubah kode program menjadi kumpulan byte. Setelah prosespengubahan menjadi byte, maka proses selanjutnya adalah melakukan pengecekanerror pada kode program yang telah menjadi byte. Jika di dalam proses pengecekanditemukan error pada kode program, maka proses akan kembali dilakukan darimelakukan input kode program. Tetapi jika dalam proses pengecekan tidakditemukan error pada kode program, maka kode program akan dieksekusiberdasarkan syntax yang terdapat pada kode program. Proses eksekusi akanmengembalikan nilai berupa output dari kode program.

Perancangan fungsi untuk proses refractor kode program diterapkan dalambentuk flowchart yang ditunjukkan pada Gambar 11.

Gambar 11 Flowchart Proses refractor Kode Program

Flowchart pada Gambar 11 menjelaskan bagaimana proses dilakukan ketikasistem melakukan refractor pada kode program menjadi output. Tahap pertamayang dilakukan adalah kode program yang menjadi inputan awal dipisah berdasarkanbaris baru. Setelah proses pemisahan berdasarkan baris baru, selanjutnya sistemakan melakukan pemisahan berdasarkan string atau biasa disebut dengan prosesstring tokenizer. Setelah kedua proses dilakukan maka program akan menyimpanbaris dan kode program yang disimpan dalam listobject yang akan berguna untukproses pengecekan error. Proses terakhir yang dilakukan adalah melakukanrefractor yang diperlukan pada kode program, sehingga nantinya lebih mudahdieksekusi.

Perancangan fungsi untuk proses pengecekan error pada kode programditerapkan dalam bentuk flowchart yang ditunjukkan pada Gambar 12.



130

Gambar 12 Flowchart Proses Pengecekan Error Kode Program

Flowchart pada Gambar 12 menjelaskan bagaimana proses dilakukan ketikasistem melakukan pengecekan error pada kode program. Input kode programyang telah dijadikan byte dilakukan pengecekan awal pada nama program, jikaditemukan error, maka program akan mengembalikan pesan error. Jika tidakditemukan, maka proses selanjutnya adalah mengecek variabel dan menyimpan nilaidari variabel tersebut, error yang dapat ditemukan pada pengecekan ini diantaranyaadalah kesalahan jika terdapat nama variabel yang sama maupun tidak dikenali tipedata dari variabel. Langkah berikutnya adalah melakukan pengecekan pada mainprogram sesuai dengan syntax yang ditemukan pada main program, pengecekanerror yang dilakukan antara lain: for, while, repeat, if, case, assign nilai, write,dan writeln. Perancangan fungsi untuk proses eksekusi kode program diterapkandalam bentuk flowchart yang ditunjukkan pada Gambar 13.

131

Gambar 13 Flowchart Proses Eksekusi Kode Program

Flowchart pada Gambar 13 menjelaskan bagaimana proses dilakukan ketikasistem melakukan eksekusi kode program menjadi output. Input kode programyang telah menjadi byte awalnya dicari index dari syntax “begin” untuk mengetahuimain program dari input kode program. Setelah proses pencarian index“begin”selanjutnya program akan melakukan pengecekan ke index berikutnya, jikaindex bukan berupa syntax “end.” maka sistem akan melakukan eksekusi sesuaidengan syntax yang ditemukan dari index tersebut dan menyimpan hasil eksekusike sebuah variabel. Proses berikutnya adalah sistem menentukan index berikutnyadan melakukan pengecekan kembali hingga ditemukan index “end.”. Setelah sistemmenemukan index dari “end.”, maka sistem akan mengembalikan hasil eksekusikode program.

4. Hasil dan Pembahasan

Cakupan dari aplikasi pembelajaran bahasa pemrograman Pascal meliputi :(1) Materi dan contoh kode program pada aplikasi hanya terbatas pada materi dankode program dasar, yaitu: tentang bahasa pemrograman Pascal, Hello World padaPascal, variabel dan tipe data, pemberian nilai dan operasi, percabangan if,percabangan case, perulangan for, perulangan while, dan perulangan repeat;(2)Aplikasi tidak dapat menangani kode program yang bersifat nested; (3) Materidi dalam aplikasi hanya menggunakan Bahasa Indonesia.

Proses mengubah kode program menjadi byte dilakukan untuk mengubahkode program yang berbentuk string menjadi kode program dalam bentuk byte.Kode program yang telah dilakukan proses refractor dibagi menjadi tokenmenggunakan fungsi split. Tiap token dari kode program akan dijadikan byte, dalamproses ini akan dibuat sebuah object dari class ByteKeyword yang berfungsi untukmengambil byte dari referensi list byte yang dibuat di class tersebut. Byte kode



132

program ini kemudian akan digunakan dalam proses pengecekan error dan eksekusikode program. Kode Program 1 menunjukkan proses yang dilakukan pada prosesmengubah kode program menjadi byte.

Kode Program 1 Fungsi Ubah Kode Program Menjadi Byte

1. public List<RefactorSourceCode>UbahByte(List<RefactorSourceCode> listRsc){2. ByteKeyword bk = new ByteKeyword();3. bk.tambahList();for (int i = 0; i < listRsc.size();i++) {4. String[] subStr =listRsc.get(i).getSourceCode().split(“\\s”);5. for (int j = 0; j < subStr.length; j++) {6. RefactorSourceCode rsc = new RefactorSourceCode();7. rsc.setBaris(listRsc.get(i).getBaris());8. rsc.setKolom(listRsc.get(i).getKolom());9. if (bk.getKeyword(subStr[j].toUpperCase()) != -1 ) {10.rsc.setBtyeKeywordPascal(bk.getKeyword(subStr[j].toUpperCase()));11. listByteCode.add(rsc);12. } else if(!subStr[j].isEmpty()){13.rsc.setBtyeKeywordPascal(bk.getKeyword(subStr[j].toUpperCase()));14. rsc.setSourceCode(subStr[j]);15. listByteCode.add(rsc);16. }17. }18. }19. return listByteCode;

Untuk mengubah kode program dari bentuk string menjadi byte terdapatfungsi yang berfungsi mengubah tiap token menjadi byte kode program. Untukmengubah menjadi byte fungsi akan mengecek pada list referensi byte dari syntaxtiap token tersebut. Tabel 1 menunjukkan contoh list dari byte syntax.

Tabel 1 Contoh Byte Syntax

133

List byte yang dihasilkan pada proses pengubahan menjadi byte tadi kemudiandilakukan pengecekan error. Didalam proses ini akan dilakukan pengecekan gram-mar dari syntax yang ditemukan. Didalam proses pengecekan terdapat fungsi-fungsiyang mengembalikan nilai bertipe data boolean, fungsi-fungsi ini akan mengeceksusunan grammar dari masing-masing syntax kode program. Jika grammar tidaksesuai dengan pengecekan didalam fungsi, maka fungsi akan mengembalikan nilaifalse beserta keterangan error. Kode Program 2 menunjukkan contoh pengecekanerror pada grammar pada syntax for.

Kode Program 2 Fungsi Pengecekan Error pada SyntaxFor

1. private boolean cekFor() {2. boolean cekFor = false;3. int indexVariabel;4. index++;5. if (listPengecekan.get(index).getBtyeKeywordPascal() ==-1) {6. if(cekNamaVariabel(listPengecekan.get(index).getSourceCode())== true) {7. .8. .9. .10. } else {11. ketError = “TIDAK DITEMUKAN VARIABEL SETELAH KEYWORD\’ FOR \’”;12. }13. return cekFor;14. }

Proses terakhir yang dilakukan sistem adalah melakukan eksekusi kode pro-gram sesuai dengan syntax yang ditemukan oleh sistem saat dilakukan eksekusi.Didalam proses eksekusi terdapat sebuah variabel bertipe data String yang berfungsiuntuk menyimpan hasil eksekusi kode program saat fungsi-fungsi yang dipanggilsesuai dengan syntax yang ditemukan saat proses eksekusi. Hasil akhir dari fungsieksekusi adalah mengembalikan nilai dari variabel yang menyimpan hasil eksekusiprogram. Kode program 3 menunjukkan contoh fungsi eksekusi kode program jikaditemukan syntaxfor.

Hasil dari metode prototyping pada penelitian ini menghasilkan tiga hasil pro-totype. Dari hasil protoype pertama, aplikasi masih diterapkan pada console danaplikasi hanya sampai tahap pengecekan error kode program.



134

Kode Program 3 Fungsi Eksekusi Syntax For

1. private void eksekusiFor() {2. PengecekanError pe = new PengecekanError();3. index++;4. int idxVarFor =cariNamaVar(listEksekusi.get(index).getSourceCode());5. index++;6. index++;7. int nilaiAwal;8. if(pe.isNumeric(listEksekusi.get(index).getSourceCode())) {9. nilaiAwal =Integer.parseInt(listEksekusi.get(index).getSourceCode());10. } else {11. int idx =cariNamaVar(listEksekusi.get(index).getSourceCode());12. nilaiAwal =Integer.parseInt(listVar.get(idx).getNilaiVariabel().substring(0,listVar.get(idx).getNilaiVariabel().indexOf(“.”)));13. }14. .15. .16. } else {17. int indexFor = index;18. if (listEksekusi.get(index).getBtyeKeywordPascal()== 27 || listEksekusi.get(index).getBtyeKeywordPascal() ==28) {19. for (int i = nilaiAwal; i <= nilaiAkhir; i++) {20. listVar.get(idxVarFor).setNilaiVariabel(i + “”);21. writeWriteln(indexFor);22. }23. }24. }25. }

Hasil prototype kedua, aplikasi sudah diterapkan pada platform Android,didalam aplikasi juga sudah terdapat pilihan materi bahasa pemrograman Pascal,didalam beberapa materi juga terdapat contoh kode program yang dapat dijalankandalam aplikasi. Aplikasi sudah dapat menjalankan eksekusi kode program saat usermenekan tombol run. Output program akan ditampilkan dibawah kode programsaat tidak ditemukan kesalahan, tetapi jika saat proses ditemukan kesalahan makaketerangan error akan ditampilkan didalam toast.

Hasil prototype ketiga, adalah prototype akhir yang didalamnya terdapatpenambahan fitur baru dan perubahan pada aplikasi. Penambahan yang dilakukanadalah memberikan tombol reset pada halaman materi yang terdapat kode program,tombol ini berfungsi untuk melakukan reset contoh kode program menjadi kembaliseperti semula sebelum contoh kode program diganti oleh user. Perubahan yangditerapkan pada aplikasi adalah keterangan error yang awalnya ditampilkan padatoast diubah menjadi ditampilkan dibawah kode program.

Gambar 14 menunjukkan tampilan menu program untuk memilih materi.

135

Tampilan menu dibagi menjadi menu yang didalamnya terdapat submenu. Menuyang terdapat antara lain: menu pertama adalah Pendahuluan yang didalamnya terdapatsubmenu: (1) Tentang Bahasa Pemrograman Pascal; (2) Hello World; (3) Variabeldan Tipe Data; (4) Pemberian Nilai dan Operasi. Menu kedua adalah Percabanganyang didalamnya terdapat submenu: (1) Percabangan IF; (2) Percabangan CASE.Menu terakhir adalah Perulangan yang didalamnya terdapat submenu: (1) PerulanganFOR .. DO; (2) Perulangan WHILE .. DO; (3) Perulangan REPEAT .. UNTIL.

Gambar 14 Tampilan Menu dan Submenu Program

Gambar 15 menunjukkan tampilan program setelah memilih materi. Materiyang dipilih tidak semuanya memiliki contoh kode program. Jika materi yang dipilihtidak terdapat contoh kode program, maka aplikasi hanya akan menampilkan materidan didalamnya tidak terdapat contoh kode program dan tombol untuk melakukanrun dan reset. Sedangkan jika didalam materi terdapat contoh kode program, makadidalam materi terdapat contoh kode program yang sudah disediakan dan dapatdiubah oleh user.

Gambar 15 Tampilan Menu Materi



136

Gambar 16 menunjukkan tampilan program yang menampilkan output darikode program yang dijalankan. Didalam materi yang terdapat contoh kode pro-gram, user dapat menjalankan kode program tersebut untuk mengetahui outputdengan cara menekan tombol run. Setelah tombol run ditekan, maka sistem akanmelakukan proses yang menghasilkan output maupun error yang ditampilkandibawah contoh kode program. Pada contoh kode program yang disediakan, userjuga dapat mengganti dan mencoba menjalankan untuk mengetahui perbedaan out-put jika mengganti kode program.

Berdasarkan hasil prototype ketiga dilakukan pengujian sistem menggunakanblack box testing untuk melakukan pengetesan fungsional program. Pengujian yangdilakukan antara lain: (1) Fungsi eksekusi kode program; (2) Fungsi reset kodeprogram; (3) Fungsi pengecekan error pada kode program. Tabel 2 menujukkanhasil black box testing.

137

Gambar 16 Tampilan Ouput Kode ProgramTabel 2 Hasil Black Box Testing

Pengujian ke pengguna dilakukan dengan membagi kuisioner kepada tiga puluhtiga responden mahasiswa FTI UKSW untuk mengetahui pendapat tentang aplikasimedia pembelajaran bahasa pemrograman Pascal. Kuisioner memiliki delapanpernyataan dalam skala Likert dengan lima skala yaitu Sangat Setuju (SS), Setuju(S), Netral (N), Tidak Setuju (TS), dan Sangat Tidak Setuju (STS). Dari hasilperhitungan skala Likert, dapat diperoleh kesimpulan bahwa aplikasi mediapembelajaran bahasa pemrograman Pascal pada platform Android dapatmemudahkan mahasiswa untuk belajar bahasa pemrograman Pascal. Tampilan pro-gram dapat dipahami dengan baik oleh user, materi dan contoh kode program yangterdapat didalam program juga mudah dipahami, dan contoh kode program yangdapat diubah oleh user juga membantu dalam memahami contoh kode program.Hasil perhitungan menggunakan skala Likert dapat dilihat pada Tabel 3

Tabel 3 Hasil Perhitungan Skala Likert



138

5. Simpulan

Dalam penelitian ini dibuat aplikasi pembelajaran bahasa pemrograman Pascalmenggunakanplatform Android dengan metode prototyping untuk merancanginterpreter yang dapat membaca kesalahan dan mengeksekusi kode program Pascal.Pada interpreter terdapat proses-proses yang dilakukan untuk mengubah kodeprogram menjadi output, di ataranya adalah proses refractor yang berfungsi untukmembuat kode program lebih mudah diproses, proses pengubahan kode programke byte, pengecekan error dari kode program, dan eksekusi kode program menjadioutput.

Berdasarkan hasil pengujian kepada pengguna terlihat bahwa aplikasi mediapembelajaran bahasa pemrograman Pascal pada platform Android dapatmemudahkan user dalam mempelajari bahasa pemrograman Pascal. Pemberiancontoh kode program yang memiliki fasilitas untuk diubah dapat membantu mahasiswauntuk lebih memahami bahasa pemrograman Pascal.

Pengembangan yang dapat dilakukan pada penelitian ini di kemudian hariadalah menambahkan materi bahasa pemrograman Pascal, menambahkan syntaxbahasa pemrograman Pascalyang dapat diproses oleh aplikasi, membuat generatorkode program untuk bahasa pemrograman Pascal, memperbaiki program jikaditemukan bug dan mengembangkan program media pembelajaran bahasapemrograman Pascal pada platform selain Android.

6. Daftar Pustaka

[1] Refsnes Data. 2014. Mobile Devices Statistics. http://www.w3schools.combrowsers/browsers_mobile.asp (diakses tanggal 13 April 2014).

[2] Abdel Azeem, Motaz. 2012. Start Programming using Object Pascal.Michigan : Creative Common.

139

[3] Dewi Adi Anugraheni, Surya. 2011. Aplikasi Mobile Sebagai MediaPembelajaran Bahasa Jawa Menggunakan Java 2 Micro Edition.Yogyakarta: Sekolah Tinggi Manajemen Informatika dan KomputerAMIKOM.

[4] Aprianti, Lisa. 2011. Implementasi Mobile Learning Sebagai Media BantuPembelajaran untuk mendukung Ujian Nasional Tingkat SMP BerbasisAndroid di SMP N 1 Klaten. Yogyakarta: Sekolah Tinggi TeknologiAdisutjipto.

[5] Truong, Nghi, 2007. A Web-Based Programming Environment for Nov-ice Programmers. Australia: Queensland University of Technology.

[6] Rusman, dkk. 2011. Pembelajaran Berbasis Teknologi Informasi danKomunikasi: Mengembangkan Profesionalitas Guru . Jakarta:RajaGrafindo Persada.

[7] Gargenta, Marko. 2011. Learning Android. Amerika Serikat: O’Reilly Me-dia.

[8] V. Aho, Alfred, dkk. 2007. Compilers: Principles, Techniques, and Tools2nd Edition. Boston: Pearson Education.

[9] Burstein, F., Gregor, S. 1999. The Systems Development or EngineeringApproach to Research in Information Systems: An Action Research Per-spective. In. Hope, B., Yoong, P. (eds) Proceeding of the 10th AustralianConference on Information Systems, pp. 122-134. Victoria University ofWellington, New Zealand.

[10] Pressman, Roger S., 2001,Software Engineering a Practitioner’s Ap-proach, New York : McGraw-Hill Higher Education


Perancangan dan Implementasi Aplikasi Media...

Documents

Transcript of Perancangan dan Implementasi Aplikasi Media...