Jurnal Aksara Komputer Terapan Politeknik Caltex Riau Vol. 2, No. 1, Tahun Jurnal Aksara Komputer Terapan. Politeknik Caltex Riau

Jurnal Aksara Komputer Terapan Politeknik Caltex Riau Vol. 2, No. 1, Tahun 2013

189

Jurnal Aksara Komputer Terapan Politeknik Caltex Riau Website : https://jurnal.pcr.ac.id/index.php/jakt/about Email : [email protected]

Virtual Classroom Menggunakan HTML5 Canvas Untuk Pembelajaran Jarak Jauh Pada Politeknik Caltex Riau Ikramatun Nafsiyah1) Ardianto Wibowo2) Erwin Setyo Nugroho3) 1)

Program Studi Teknik Informatika, Politeknik Caltex Riau, email: [email protected] 2)Program Studi Sistem Informasi, Politeknik Caltex Riau, email: [email protected] 3)Program Studi Teknik Informatika, Politeknik Caltex Riau, email: [email protected]

Abstrak Pembelajaran saat ini tidak hanya terbatas melakukan tatap muka langsung dalam kelas, melainkan dapat dilakukan dari jarak jauh. Pada Politeknik Caltex Riau (PCR) sistem pembelajaran jarak jauh berupa e-learning yang dapat digunakan oleh dosen dan mahasiswa untuk mengunggah (upload) tugas, mengunduh (download) materi, serta chatting. Dengan perkembangan teknologi dari segala sisi memungkinkan untuk membuat sistem pembelajaran jarak jauh berbasis web yang interaktif berbentuk virtual classroom menggunakan HTML 5 canvas dan teknologi websocket sehingga dapat menambahkan fitur whiteboard yang dapat tampil secara real-time. Web ini dirancang untuk digunakan sebagai pembelajaran jarak jauh pada Politeknik Caltex Riau. Dengan adanya Pembelajaran Jarak Jauh berbasis web ini diharapkan memberikan alternatif serta kemudahan untuk melakukan pembelajaran tanpa bertatap muka langsung dengan pengajar. Berdasarkan pengujian menggunakan metode Cyclometic Complexity Number(CCN) yang di lakukan pada flow chart Administrator, flow chart Canvas. Di peroleh hasil bahwa semua pengujian berhasil sehingga aplikasi web ini disimpulkan berjalan sesuai dengan perancangan yang telah di lakukan sebelumnya. Kata kunci: HTML 5 canvas, web, virtual classroom, websocket.

Abstract learning today is not just limited to conduct face-to-face in the classroom, but can be done remotely. at polytechnic caltex riau (pcr) system of distance learning in the form of e-learning that can be used by faculty and students to upload assignments, download materials, and chat. with the development of technology allowing all sides to make the distance learning system in the form of interactive web-based virtual classroom using the html 5 canvas and websocket technology so it can add a whiteboard feature that can be performed in real-time. web is designed to be used as a distance learning at the polytechnic caltex riau. with the web-based distance learning is expected to provide an alternative and easy to do without face to face learning with teachers. based on testing using the method cyclometic complexity number (ccn) will be undertaken in the flow chart administrator, canvas flow charts. obtained results that all

Virtual Classroom Menggunakan HTML5 Canvas untuk Pembelajaran Jarak Jauh Pada Politeknik Caltex Riau Ikramatun Nafsiyah, Ardianto Wibowo, Erwin Setyo Nugroho

Jurnal Aksara Komputer Terapan Politeknik Caltex Riau Vol. 2, No. 1, Tahun 2013

190

tests successfully concluded that this web application run in accordance with the design that has been done before. Keywords: html 5 canvas, web, virtual classroom, websocket.

1. Pendahuluan Pembelajaran Jarak Jauh (PJJ), merupakan sistem pembelajaran yang memiliki daya jangkau luas lintas ruang dan waktu, sistem ini membuka akses terhadap pendidikan dimana saja dan kapan saja. Sistem pembelajaran jarak jauh ini sering dianggap sebagai solusi terhadap berbagai masalah pendidikan, terutama yang berkaitan dengan jarak, dan waktu [3]. Sistem pembelajaran jarak jauh pada Politeknik Caltex Riau (PCR), berupa e-learning yang dapat digunakan untuk mengunggah (upload) tugas yang telah diberikan oleh dosen dan mengunduh (download) materi yang telah disediakan oleh dosen. Dalam proses belajar mengajar yang telah ditentukan waktunya, dosen dan mahasiswa dapat berinteraksi dengan fitur chat dan videocall, sehingga terjadi interaksi secara tidak langsung antara dosen dan mahasiswa. Perkembangan teknologi dari segala sisi memungkinkan untuk membuat sistem pembelajaran jarak jauh berbasis web yang menarik, cantik dan interaktif dengan mengeksplor teknologi web yang paling mutakhir saat ini yaitu HTML5 canvas sebagai interface dan menggunakan script PHP dan MySQL sebagai databasenya. Pembelajaran jarak jauh ini berupa virtual classroom yang mendukung interaksi virtual antara dosen dan mahasiswa dengan adanya whiteboard yang dapat ditulis oleh dosen maupun mahasiswa, fitur chat agar dapat berkomunikasi serta mahasiswa juga dapat melihat nilai yang di berikan dosen. Dengan adanya sistem pembelajaran jarak jauh ini akan memberikan sebuah alternatif dalam melakukan proses belajar mengajar jarak jauh yang efektif, menarik dan interaktif.

1.1

Permusan Masalah

Berdasarkan latar belakang di atas maka perumusan masalah dalam pembuatan proyek akhir ini adalah: 1. Bagaimana merancang dan membangun sebuah web virtual classroom menggunakan HTML5 canvas untuk pembelajaran jarak jauh pada Politeknik Caltex Riau. 2. Bagaimana membuat web yang interaktif

dengan

memanfaatkan

HTML 5 canvas. 1.2 Tujuan Tujuan dari penelitian ini adalah : 1. Merancang dan membangun sebuah web sebagai media pembelajaran jarak jauh pada Politeknik Caltex Riau dengan menggunakan HTML 5 canvas 2. Membuat web yang interaktif dengan memanfaatkan HTML 5 canvas.

2. Landasan Teori 2.1

Politeknik Caltex Riau

Politeknik Caltex Riau adalah salah satu Perguruan Tinggi Swasta di Riau yang didirikan atas kerja sama antara Pemerintah Provinsi Riau dan PT.Caltex Pacific Indonesia ( sekarang Chevron Pacific Indonesia). Kampus ini berdiri pada tahun 2001. Saat ini Politeknik Caltex Riau terdiri dari delapan jurusan, yaitu Teknik Elektronika, Teknik Komputer, Teknik Telekomunikasi, Teknik Mekatronika dan Akuntansi (Diploma 3) serta Sistem Informasi Industri, Teknik Informatika

Virtual Classroom Menggunakan HTML5 Canvas untuk Pembelajaran Jarak Jauh Pada Politeknik Caltex Riau Ikramatun Nafsiyah, Ardianto Wibowo, Erwin Setyo Nugroho

Jurnal Aksara Komputer Terapan Politeknik Caltex Riau Vol. 2, No. 1, Tahun 2013 Multimedia dan Teknik Telekomunikasi (Diploma 4).

2.2

Elektronika

Hypertext Markup Languange 5

191

halaman web standar menjadi bentuk web yang lebih indah dan menarik. [2]

2.6

MySQL

HyperText Markup Language merupakan bahasa pemograman terstruktur yang dikembangkan untuk berbagi informasi melalui internet. Dikembangkan oleh W3C(world wide web consortium) semenjak awal teknologi internet, HTML terus dikembangkan agar dapat menampilkan lebih banyak konten selain untuk menampilkan teks dan gambar. HTML 5 merupakan versi termutakhir dari HTML. Seperti layaknya buku, halaman web memiliki struktur seperti navigasi, konten, header, footer dan lain-lain, maka pada HTML 5 dapat menggunakan tag baru [2]

MySQL (My Structure Query Language) merupakan salah satu software manajemen database (DBMS) dari sekian banyak database lain seperti Oracle, MS SQL, PostgresSQL, dan lainnya. MySQL memiliki beberapa kelebihan yang menjadikannya salah satu software database yang paling banyak digunakan oleh pemakai di seluruh dunia. Kelebihan software database MySQL adalah : 1. MySQL merupakan perangkat lunak open source 2. MySQL mempunyai performa yang sangat cepat, dapat dan mudah digunakan

2.3

MySQL mempunyai besar software pendukung.

Hypertext Markup language 5 canvas

Dengan banyaknya hal-hal baru yang ditawarkan HTML 5, tag merupakan yang dapat digunakan untuk menggambar secara dinamis, untuk memanfaatkan canvas ini dibutuhkan javascript. Canvas dapat dianalogikan sebagai kanvas lukisan yang dapat digambar, diwarnai sesuai dengan keinginan peluksinya. Setiap canvas memiliki atribut atau properti yang disebut dengan 2D context [6] 2.4

Javascript

Javascript adalah sebuah bahasa scripting untuk sebuah web yang dijalankan dari sisi client. Kode Javascript biasa digabungkan dalam HTML. Untuk dapat menambahkan script Javascript ke dalam halaman HTML, maka diperlukan tag <script> 2.5

Cascading style sheet

Cascading Style Sheet (CSS) merupakan sebuah dokumen yang berguna untuk melakukan pengaturan pada komponen halaman web, inti dari dokumen ini adalah untuk mengatur tampilan

2.7

sejumlah

Web Sockets

Web Sockets merupakan teknologi baru yang belum sepenuhnya di terapkan pada semua browser, web socket ini merupakan teknologi komunikasi dua arah untuk aplikasi web yang beroperasi melalui single socket yang mengunakan JavaScript dan HTML 5 sebagai interface pada browser. WebSocket membangun "soket" hubungan antara web browser dan server. Dalam kata-kata sederhana: Ada koneksi yang terus menerus antara clien dan server, kedua belah pihak dapat mulai mengirim data setiap saat

2.8

PHP

Hypertext Preprocessor merupakan suatu bahasa pemrograman yang difungsikan untuk membangun suatu website dinamis. PHP menyatu dengan kode HTML, maksudnya adalah beda kondisi. HTML digunakan sebagai

Virtual Classroom Menggunakan HTML5 Canvas untuk Pembelajaran Jarak Jauh Pada Politeknik Caltex Riau Ikramatun Nafsiyah, Ardianto Wibowo, Erwin Setyo Nugroho

Jurnal Aksara Komputer Terapan Politeknik Caltex Riau Vol. 2, No. 1, Tahun 2013 pembangun atau pondasi dari kerangka layout web, sedangkan PHP difungsikan sebagai prosesnya sehingga dengan adanya PHP tersebut, web akan sangat mudah dimaintenance.

192 Gambar 3.2 Flow Chart Dosen

3. Metodologi Penelitian 3.1

Flowchart

Gambar 3.3 Flow Chart Kelas Virtual

Gambar 3.1 Flow Chart Mahasiswa

Pada gambar 3.1 merupakan flow chart pada mahasiswa yang menunjukkan alur proses mahasiswa.

Gambar 3.4 Flow Chart Canvas

4. Hasil dan Pembasan Tujuan dari pengujian tugas akhir ini adalah untuk mengetahui sejauh mana kinerja sistem yang telah dibuat dan untuk mengetahui penyebab-penyebab ketidak

Virtual Classroom Menggunakan HTML5 Canvas untuk Pembelajaran Jarak Jauh Pada Politeknik Caltex Riau Ikramatun Nafsiyah, Ardianto Wibowo, Erwin Setyo Nugroho

Jurnal Aksara Komputer Terapan Politeknik Caltex Riau Vol. 2, No. 1, Tahun 2013

193

sempurnaan alat serta menganalisa untuk perbaikan selanjutnya. Aplikasi web ini dijalankan dengan menggunakan browser Google Chrome dan dibuat dengan menggunakan pemrograman PHP. Adapun pengujian terfokus pada berjalannya fungsi-fungsi yang ada di dalam aplikasi dengan melakukan pengujian Cyclometic Complexity Number (CCN).

4.1

Pengujian User Pada pengujian ini menggunakan metode Cyclometic Complexity Number (CCN). 1.

Pengujian Canvas

Gambar 4. 1 Flowgraph canvas

5. Kesimpulan dan Saran 5.1

Adapun kesimpulan dari proyek akhir ini adalah : 1. Berdasarkan pengujian langsung pada mahasiswa Politeknik Caltex Riau, web ini dapat di gunakan untuk Pembelajaran Jarak Jauh pada Politeknik Caltex Riau. 2. Berdasarkan hasil kuesioner untuk pernyataan kemudahan untuk pelaksanaan pembelajaran jarak jauh pada Politeknik Caltex Riau, 84% responden mengatakan setuju. 3. Berdasarkan hasil kuesioner untuk pernyataan kelengkapan fitur dari aplikasi, 70% responden mengatakan setuju. 4. Berdasarkan hasil kuesioner untuk pernyataan kemudahan dalam pemakaian aplikasi, 76% responden mengatakan setuju. 5. Membuat web yang interaktif dengan memanfaatkan HTML 5 canvas telah berhasil di lakukan.

5.2

Canvas V(G) = E – N + 2

V(G) = 11 – 10 + 2 =3

Tabel 4. 1 Canvas

Kesimpulan

Saran

Adapun saran yang diajukan penulis untuk pengembangan aplikasi ini adalah : 1. Dapat dilakukan pengembangan aplikasi web ini dengan di tambahkannya

Virtual Classroom Menggunakan HTML5 Canvas untuk Pembelajaran Jarak Jauh Pada Politeknik Caltex Riau Ikramatun Nafsiyah, Ardianto Wibowo, Erwin Setyo Nugroho

Jurnal Aksara Komputer Terapan Politeknik Caltex Riau Vol. 2, No. 1, Tahun 2013

2.

3.

4.

fitur voice streaming yang berjalan secara real-time. Dapat dilakukan pengembangan dengan di buatnya kelas paralel agar kelas dapat di gunakan secara bersamaan Agar tidak terjadi kekacauan di dalam kelas, dosen dapat mengatur izin menulis papan tulis untuk mahasiswa apabila dalam proses belajar mengajar Perlu menerapkan dan uji coba dalam keamanan web.

[7]

194 Suyoto, Edy. (2002).E-Learning Mata Kuliah Pengantar Komputer Berbasis Teknologi Miltimedia.Universitas Atmajaya Yogyakarta Diambil pada file.upi.edu/.../Modul_Praktikum_HT ML5_Canvas_ver16Mei2012.openbr avo erp untuk implementasi pada UKM furniture. Diambil 11 november 2012 dari: http://www.pradnya.ac.id/lkppm/pag es/jurnal%20M.%20Hanif%20Fahmi %20156-175-no5.pdf

Daftar Pustaka [1]

[2] [3]

[4]

[5]

[6]

Irsyad, Riyadi.(2011). Perancangan E-Learning Virtual Classroom Menggunakan Multimedia Pembelajaran Interaktif Berbasis Flash. Jayan. (2012). Mengupas HTML 5 dan CSS3 (hal 1). Pennen, Paulina. Mustafa, Dina. Baskara. Hertono, Gatot F. Wibawanto, Hari. Satriyanto, Edi. (2011). Panduan Penyelenggaraan Model Pendidikan Jarak Jauh di Perguruan Tinggi. Kementrian Pendidikan Nasional. Diambil pada http:// luk.staff.ugm.ac.id/atur/PanduanPJJ2011.pdf. ] Purnomo, Vita Prihatoni. (2009). 100% Javascipt. Jakarta : Penerbit Dian Rakyat. Diambil pada http://www.uajy.ac.id/jurnal/jti/2002/ 6/3/doc/2002_6_3_6.doc. Solichin, Achmad. Diktat Kuliah Pemrograman Web 2 ver 1.0. Diambil pada https://webdosen.budiluhur.ac.id/dos en/050023/materi/pw2_pertemuan11. pdf Wibisono, Yudi. (2012). Modul Praktikum HTML5 Canvas. Universitas Pendidikan Indonesia.

Virtual Classroom Menggunakan HTML5 Canvas untuk Pembelajaran Jarak Jauh Pada Politeknik Caltex Riau Ikramatun Nafsiyah, Ardianto Wibowo, Erwin Setyo Nugroho