Desain dan Implementasi Aplikasi Pembelajaran Sejarah Menggunakan HTML5 Artikel Ilmiah Diajukan kepada Fakultas Teknologi Informasi untuk memperoleh Gelar Sarjana Komputer Peneliti: Yosep Budiyanto (672009245) Dr. Dharmaputra T. Palekahelu, M.Pd Ramos Somya, S.Kom., M.Cs. Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga Juni 2016
21
Embed
Desain dan Implementasi Aplikasi Pembelajaran Sejarah ...repository.uksw.edu/bitstream/123456789/11223/2/T1_672009245_Full...Berdasarkan hasil wawancara dengan siswa SMA Kanisius Ambarawa,
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Desain dan Implementasi Aplikasi Pembelajaran Sejarah
Menggunakan HTML5
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti:
Yosep Budiyanto (672009245)
Dr. Dharmaputra T. Palekahelu, M.Pd
Ramos Somya, S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Juni 2016
1
2
3
5
6
1. Pendahuluan
Pendidikan merupakan salah satu sistem dalam pemerintahan yang selalu
mengalami perubahan. Salah satu perubahan yang dilakukan pemerintah dari
waktu ke waktu adalah perubahan kurikulum. Pada saat ini di Indonesia
menggunakan kurikulum KTSP. Proses pembelajaran dalam kurikulum KTSP
diharuskan dapat berlangsung dengan tenang dan menyenangkan. Untuk
memenuhi kondisi tersebut pihak sekolah dapat memanfaatkan penggunaan
aplikasi dalam proses pembelajarannya. Salah satu aplikasi yang dapat
dimanfaatkan adalah aplikasi berbasis web. Dengan pemakaian aplikasi
pembelajaran menggunakan media web dapat megurangi suasana yang statis dan
dapat menciptakan proses pembelajaran yang efektif, tenang, menyenangkan dan
dapat juga membangkitkan minat belajar siswa.
Berdasarkan hasil wawancara dengan siswa SMA Kanisius Ambarawa,
menyatakan bahwa metode yang sering digunakan oleh pengajar adalah metode
konvensional di mana peserta didik lebih banyak mendengarkan penjelasan dari
guru di depan kelas dan melaksanakan tugas bila guru memberikan sedangkan
aplikasi yang sering digunakan oleh pengajar adalah aplikasi power point.
Observasi awal peneliti terhadap siswa kelas XI IPS di SMA Kanisius Ambarawa
menunjukkan bahwa seluruh siswa kelas XI di kelas tersebut menyatakan tidak
puas dengan metode mengajar yang dilakukan oleh para guru yang dianggap
monoton dan membosankan karena mereka hanya dituntut untuk mendengarkan
materi yang diberikan oleh pengajar sehingga membuat siswa kurang termotivasi
untuk belajar sedangkan aplikasi power point yang digunakan oleh pengajar
seringkali tampilannya kurang menarik dan membosankan. Didapatkan juga
pernyataan bahwa siswa merasa kesulitan pada mata pelajaran sejarah karena
banyak materi yang membicarakan sejarah masa lampau, para siswa merasa cepat
bosan ketika mendengar guru menyampaikan materi dan tidak dapat fokus dalam
menerima informasi yang diberikan oleh guru hal itu berdampak dengan hasil
nilai mereka pada mata pelajaran sejarah banyak dari siswa selalu melakukan
perbaikan nilai pada setiap tes yang dilakukan.
Aplikasi yang sering digunakan dalam proses pembelajaran sejarah antara
lain aplikasi berbasis flash, dimana aplikasi tersebut mempunyai fitur-fitur yang
dapat menarik perhatian para siswa untuk memperhatikan apa yang sedang
dijelaskan oleh para guru. Namun, aplikasi pembelajaran flash memiliki beberapa
kelemahan diantaranya pembuatan animasi pembelajaran yang cukup sulit,
menunya tidak user friendly, dalam menambah atau menghapus data
membutuhkan keahlian dalam pemprogaman, belum tersedia template
didalamnya. Hal ini menyulitkan pengguna pada saat ingin menggunakan aplikasi
pembelajaran flash mengingat pengguna belum tentu memiliki keahlian dalam hal
pemrograman.
Melihat permasalahan tersebut, maka diperlukan inovasi dari pengajar
dalam memberikan aplikasi pembelajaran yang menarik agar mampuh
membangkitkan minat siswa untuk belajar serta dapat membuat siswa dapat
menerima, memahami dan mengerti materi pembelajaran yang diberikan oleh
pengajar khususnya pada mata pelajan sejarah. Salah satu aplikasi pembelajaran
7
yang dapat digunakan oleh pengajar adalah aplikasi pembelajaran berbasis web.
Pada penelitian ini akan dibuat aplikasi pembelajaran khususnya dalam materi
sejarah tentang periodesasi pada zaman prasejarah, untuk mengetahui bagaimana
peran aplikasi pembelajaran secara spesisik dalam teknologi pendidikan serta
dapat meningkatkan minat siswa untuk belajar, dimana aplikasi akan dibangun
menggunakan fitur – fitur yang terdapat pada HTML5, sedangkan agar web dapat
berjalan dengan lebih dinamis dan iteraktif maka ditambahkan bahasa
pemrograman Hypertext Preprocessing (PHP). Pemilihan penggunaan HTML5
dalam membangun aplikasi karena dengan bantuan HTML5 memungkinkan
pengembangan aplikasi berbasis web yang tidak lagi bergantung sepenuhnya
kepada plugin karena untuk menanam video, audio, gambar berkualitas, grafik
dan banyak konten lainya tanpa menngunakan plugin dan progam pihak ketiga
sebagai fungsi dibangun ke browser.
2. Kajian Pustaka
Penelitian yang digunakan sebagai acuan dalam penelitian ini ada 2.
Penelitian terdahulu yang pertama dilakukan tahun 2010, yaitu pada penelitian
tersebut dilakukan pembuatan Aplikasi Pembelajaran Integral Berbasis Web.
Aplikasi ini menggunakan bahasa pemrograman PHP, MySQL sebagai database,
Dreamweaver, Macromedia Flash untuk animasi dan Photoshop sebagai desain
grafisnya. Aplikasi pembelajaran integral berbasis web ini terbagi menjadi dua
tampilan antarmuka yaitu antarmuka untuk umum dan antarmuka untuk admin.
[1].
Penelitian terdahulu dilakukan tahun 2014, yaitu pada penelitian tersebut
dilakukan pembuatan Membangun Media Pembelajaran Interaktif Berbasis Web
Untuk Anak Bergaya Belajar Visual Tingkat Sekolah Dasar. Agar media
pembelajaran terlihat menarik, maka aplikasi di bangun menggunakan teknologi
terbaru yaitu HTML5 dan metode pengembangan yang memadai. Metode
pengembangan perangkat lunak yang sesuai untuk perangkat lunak berbasis
multimedia adalah Multimedia Development Lifecycle (MDLC). Media
pembelajaran interaktif yang akan dibangun menggunakan HTML5, CSS3, dan
Javascript. Aplikasi ini dibuat dengan konsep multimedia interaktif sehingga
seseorang yang ingin belajar dapat memilih materi yang mereka ingin pelajari,
dalam penyampaian materi akan dikemas semenarik mungkin dan tidak
membosankan. Output dari tahap ini adalah mendefinisikan tujuan aplikasi,
kebutuhan sistem dan materi pembelajaran. [2].
Media dalam proses pembelajaran mempunyai peran sebagai alat perantara
dalam menyampaikan suatu informasi. kata media berasal dari bahasa latin yaitu
medium yang berati perantara. Media adalah berbagai jenis komponen dalam
lingkungan siswa yang dapat merangsangnya untuk belajar, jadi penggunaan
media sebagai perantara menyampaikan informasi antara guru dan siswa dalam
proses pembelajaran dapat mempengaruhi faktor internal siswa yaitu dalam hal
motivasi untuk belajar [3].
Pembelajaran adalah suatu kegiatan yang dilakukan secara sadar dan
sengaja. Tujuan pembelajaran bagi siswa supaya dapat memperoleh berbagai
pengalaman dan dengan pengalaman itu tingkah laku yang dimaksud meliputi
8
pengetahuan, ketrampilan, dan nilai atau norma yang berfungsi sebagai
pengendali sikap dan prilaku siswa. Tujuan pembelajaran menggambarkan
kemampuan atau tingkat penguasaan yang diharapkan dicapai oleh siswa setelah
mereka mengikuti suatu proses pembelajaran, jadi proses pembelajaran
merupakan proses melibatkan guru dengan semua komponen tujuan, bahan,
metode dan alat serta penilaian. Maka proses pembelajaran merupakan suatu
sistem yang saling terkait antar komponennya di dalam mencapai suatu tujuan
yang telah ditetapkan [4].
Web adalah sebuah aplikasi untuk menampilkan dokumen – dokumen
multimedia ( teks, gambar, animasi dan video ) didalamnya menggunakan
protokol HTTP dan untuk mengaksesnya menggunakan perangkat lunak yang
disebut browser. Browser adalah aplikasi yang mampu menjalankan dokumen-
dokumen web dengan cara diterjemahkan. Prosesnya dilakukan oleh komponen
yang terdapat didalam aplikasi browser yang biasa di sebut web engine [5].
Pembelajaran berbasis web merupakan salah satu kegiatan pembelajaran
yang memanfaatkan media situs yang kemudian dapat diakses melaui media
internet. Pembelajaran berbasis web adalah sebuah pengalaman belajar dengan
memanfaatkan jaringan internet untuk berkomunikasi dan menyampaikan
informasi pembelajaran [6].
Pembelajaran berbasis web seringkali mempunyai manfaat yang banyak
bagi peserta didiknya. Bila dirancang dengan baik dan tepat, maka pembelajaran
berbasis web bisa menjadi pembelajaran yang menyenangkan, memiliki unsur
interaktivitas yang tinggi menyebabkan peserta didik mengingat lebih banyak
materi pelajaran, serta mengurangi biaya operasional yang biasanya dikeluarkan
peserta didik untuk mengikuti pembelajaran [7]. Penelitian sejarah meliputi seluruh kehidupan manusia di masa lampau.
Masa lampau manusia meliputi masa sejak manusia pertama kali ada di bumi
sampai sekarang. Masa lampau manusia itu ada ketika yang meninggalkan bukti -
bukti tertulis dan ada yang tidak. Zaman prasejarah adalah zaman sebelum
manusia mengenal tulisan. Uraian mengenai kehidupan serta kebudayaan manusia
pada masa lampau sebelum ada bukti-bukti tertulis. Zaman prasejarah dibagi
menjadi dua yaitu zaman batu dan zaman logam. Zaman batu terjadi sebelum
logam dikenal dan alat-alat kebudayaan terutama dibuat dari batu di samping kayu
dan tulang. Zaman batu ini diperiodisasi lagi menjadi 4 zaman, antara lain zaman
batu tua (palaeolithicum), zaman batu madya (mesolithicum), zaman batu besar
(megalithicum), zaman batu muda (neolithicum) [8].
HTML ( Hyper Text Marcup Language ) dikembangkan pertamama kali
pada tahun 1989 oleh tim Bernes-lee. Bahasa skrip ini memungkinkan penyajian
informasi dalam bentuk teks dengan tautan yang bisa mengaitkan berbagai server.
HTML5 adalah pengembangan dari HTML yang dilakukan oleh badan lain yaitu
WHATMG ( Web Hypertext Application Technologi Working Group ) bahasa
skrip yang memungkinkan penyajian informasi dalam bentuk teks dengan tautan
yang bisa mengaitkan berbagai server. Pada HTML5 kekangan dalam menulis tag
dan atribut dalam menulis huruf kecil tidak ada lagi. Kita mempunyai kebebasan
untuk menggunakan huruf kecil, huruf kapital, atau kombinasinya. Bahkan nilai
suatu atribut mau diberi tanda petik atu tidak sama saja. Browser tidak lagi
9
memperdulikan hal-hal seperti itu. HTML5 menawarkan berbagai fitur menarik
yang tidak didukung oleh HTML sebelumnya. Berbagai fitur yang disediakan
HTML5 antara lain canvas, header, footer, time, audio dan video . Pada HTML5
membuat aplikasi tidak lagi tergantung sepenuhnya oleh plugin [9].
3. Metode dan Perancangan Sistem
Pada penelitian ini, akan dilakukan beberapa tahapan penelitian yang secara
garis besar terbagi ke dalam lima tahapan, yaitu : 1) Analisis kebutuhan dan
pengumpulan data dari narasumber. 2) Perancangan Sistem. 3) Perancangan
aplikasi. 4) Implementasi dan pengujian sistem, serta analisis hasil dari sistem. 5)
Penulisan laporan hasil penelitian [10]. Proses dari tahapan yang telah dilakukan
dalam penelitian ini dapat dilihat pada Gambar 1
Gambar 1 Tahapan Penelitian
Berdasarkan bagan pada Gambar 1 dapat dijelaskan bahwa tahapan
penelitian yang dilakukan adalah sebagai berikut Tahap pertama : analisis dan
pengumpulan kebutuhan dilakukan dengan melakukan pertemuan antara costumer
dan developer. Customer pada penelitian kali ini adalah seorang guru sejarah
SMA Kanisius Ambarawa yang sekaligus menjadi pembimbing lapangan dan
pengguna aplikasi pembelajaran ini. Sedangkan developer adalah peneliti sendiri
sebagai subjek yang melakukan penelitian. Pembahasan pada pertemuan awal
meliputi tujuan umum, kebutuhan yang sudah diketahui dan gambaran kebutuhan
yang akan diperlukan berikutnya. Tahap ini dilakukan dengan melakukkan
wawancara terhadap guru sejarah dan siswa SMA Kanisius Ambarawa hasilnya
didapatkan bahwa aplikasi dan metode yang selama ini digunakan pada
pembelajaran sejarah oleh guru tidak lagi dapat menarik perhatian para siswa
dikarenakan fitur-fitur yang tidak dapat di update dengan mudah. Tahap kedua,
ketiga dan keempat dilakukan perancangan Aplikasi Pembelajaran menggunakan
metode pengembangan sistem Prototype. Sedangkan tahap kelima dilakukan
penulisan laporan penelitian dan artikel ilmiah.
10
Dalam membangun sebuah sistem kita perlu merancang serta menganalisa
secara teliti apa saja yang perlu kita bangun atau kita perbaiki. Agar aplikasi yang
akan dibangun dapat memuaskan pengguna baik dalam hal kinerja aplikasi dan
tampilan yang disajikan oleh aplikasi. Dalam menganalisa sebuah sistem perlu
melibatkan komponen-komponen yang tergabung dalam hal ini siswa,
guru/admin, materi dan evaluasi. Supaya didapatkan sebuah sistem aplikasi
pembelajaran yang handal maka kita harus menganalisa secara menyeluruh dan
utuh untuk memberikan hasil yang baik.
Berdasarkan informasi yang di dapat melalui wawancara kepada guru
sejarah dan siswa di SMA Kanisius Ambarawa diperoleh untuk memenuhi
kebutuhan pengguna dalam penelitian ini adalah kebutuhan dari siswa dan guru.
Maka didapatkan bahwa dibutuhkan aplikasi yang dapat memenuhi kebutuhan
berikut. Kebutuhan guru mengharapkan aplikasi yang dapat menambah materi
sejarah, menghapus materi sejarah, dapat mengelola data user lain. Kebutuhan
siswa mengharapkan aplikasi yang menarik untuk dilihat serta dapat melihat
materi sejarah yang sedang diajarkan yaitu tentang periodesasi zaman prasejarah
dan dapat melihat video sejarah.
Analisis kebutuhan perangkat keras dan spesifikasi perangkat lunak yang
digunakan dalam membangun aplikasi pembelajaran ini yaitu: kebutuhan akan
perangkat keras sangat mendukung terlaksananya aplikasi media pembelajaran
perangkat keras yang dibutuhkan adalah Processor Intel Core i3, 220 GHz, RAM
2,00 GB, Hard Disk 500 GB, Input device (mouse dan keyboard), Output device
(Proyektor). Sedangkan kebutuhan akan perangkat lunak sangat mendukung
terlaksananya aplikasi pembelajaran perangkat lunak yang dibutuhkan adalah
Sistem Operasi Windows 7, Data Base MySQL, PHP designer 8, Paint, Browser
Mozilla Firefox, WampServer, Rational Rose untuk membuat UML sistem.
Perancangan sistem dalam penelitian ini dibuat dalam bentuk diagram
UML. Diagram UML meliputi diagram use case, diagram activity dan diagram
sequence. Berikut ini akan dijelaskan masing-masing diagram yang telah dibuat.
Gambar 2 Use Case Diagram Sistem
11
Gambar 2 merupakan diagram use case dari aplikasi yang dibuat. Terdapat
3 (tiga) aktor dalam aplikasi, yaitu admin, user dan pengunjung. Admin memiliki
hak tertingi yaitu dapat mengelola galeri dan mengelola user. Hak akses user
dapat mengelola galeri. Sedangkan pengunjung memiliki use case melihat
berbagai menu yang terdapat pada aplikasi media pembelajaran sejarah.
Gambar 3 Activity Diagram Tambah Data
Gambar 3 merupakan diagram activity untuk proses tambah data galeri yang
dilakukan oleh admin. Admin memilih menu upload pada halaman admin. Admin
selanjutnya mengisi data gambar yang akan ditambahkan. Data gambar ini berupa
judul, keterangan dan gambar. Data gambar selanjutnya akan disimpan dalam
basis data.
Gambar 4 Diagram Activity Tambah User Gambar 4 merupakan diagram activity untuk proses tambah user yang dilakukan
oleh admin. Admin memilih menu tambah user pada halaman admin. Admin
selanjutnya mengisi data user yang akan ditambahkan. Data user yang ditambah
berupa pass, status dan nama. Data user selanjutnya akan disimpan dalam basis
data.
12
Gambar 5 Sequence Diagram Tambah Data Galeri
Gambar 5 merupakan diagram sequence untuk proses tambah data galeri
yang dilakukan oleh admin. Pada sequence diagram admin mengisi data gambar
yang akan ditambahkan pada form upload, data yang diberikan berupa judul,
keterangan dan gambar yang disisipkan. Kontrol akan mengecek data yang
ditambahkan kemudian diteruskan ke database. Database akan menyimpan data
yang diberikan kemudian mengirimkan pesan kepada controler untuk diteruskan
kepada admin bahwa data telah tersimpan berhasil tersimpan,
Gambar 6 Sequence Diagram Tambah User
Gambar 6 diagram sequence untuk proses tambah user yang dilakukan oleh
admin. Pada sequence diagram admin mengisi data user yang akan ditambahkan
pada form tambah user data yang diberikan berupa pass, status dan nama. Kontrol
akan mengecek data yang ditambahkan kemudian diteruskan ke database.
Database akan menyimpan data yang diberikan.
Dalam proses evaluasi, ada beberapa hal yang akan dibahas diantaranya apa
bahan evaluasi, proses evaluasi, ketika evaluasi diadakan, mengapa harus ada
13
evaluasi, di mana proses evaluasi diadakan dan pihak yang terlibat. Evaluasi
tersebut perlu dilakukan untuk menghindari kesalahan perhitungan dalam
membangun aplikasi pembelajaran. Kesalahan tersebut dapat mengakibatkan
ketidak puasan pengguna dalam pemakaian aplikasi agar kesalahan tersebut tidak
terjadi maka diperlukan proses evaluasi yang jelas.
Model proses yang digunakan dalam penelitian kali ini adalah prototype
modeling, karena dalam pembuatan aplikasi pembelajaran ini pengguna aplikasi
terlibat langsung dalam proses perancangan aplikasi dengan melakukan
komunikasi yang intensif dengan pengguna aplikasi. Metode ini dilakukan secara
bertahap, yaitu setelah kebutuhan sistem terpenuhi maka tahap selanjutnya adalah
merancang prototype sistem. Perancangan mewakili keseluruhan aspek yang
sudah diketahui dan rancangan ini menjadi dasar dalam pembuatan prototype.
Customer mengevaluasi prototype yang telah dibuat dan digunakan untuk
memperjelas kebutuhan software. Ketiga proses diatas diulang secara terus
menerus sampai kustomer merasa puas dengan prototype yang telah dibuat.
Ketika customer telah merasa puas maka kebutuhan sistem telah tergambarkan
seluruhnya dan sistem siap dikembangkan menjadi perangkat lunak Prototype
yang telah diterima dari costumer dikembangkan dan disempurnakan menjadi
software. Software dibangun mengunakan php. Software yang dibangun berfungsi
sebagai aplikasi pembelajaran sejarah pada zaman batu untuk pelajar tingkat SMA
dimana dalam aplikasi media pembelajaran tersebut pelajar dapat melihat
gambaran umum pada zaman batu tersebut baik dalam bentuk tulisan, gambar dan
video [11].Tahapan yang telah di lalui dapat di lihat pada alur Gambar 2.
Gambar 7 Metode Prototyping [11]
Proses evaluasi prototyping dilakukan sebanyak dua kali dan dilakukan
dengan mendemokan aplikasi kepada pengguna aplikasi (guru dan siswa).
Penjelasan setiap tahap evaluasi prototyping adalah sebagai berikut : Evaluasi
pertama dilakukan dengan siswa dan guru SMA Kanisius Ambarawa. Pada
evaluai ini dilakukan pembangunan fitur-fitur yang akan dibangun pada aplikasi
pembelajaran sejarah bedasarkan hasil wawancara yang telah dilakukan untuk
merancang halaman home, halaman sejarah, halaman video dan halaman bantuan.
Hal ini berguna untuk memuaskan pengguna dalam penggunaan aplikasi
pembelajaran tersebut setelah hasil perancangan diserahkan kepada pengguna dan
pengguna merasa puas maka evaluasi masuk ketahap berikutnya. Evaluasi tahap
14
kedua dilakukan dengan memperbaiki kerja sistem yang masih belum valid seperti
data belum dapat mucul pada halaman galeri dan mengubah tampilan data agar
lebih rapi dan aplikasi dapat berjalan dengan sempurna.
4. Hasil Implementasi dan Pembahasan
Implementasi dari pembuatan aplikasi pembelajaran sejarah ini dibangun
menggunakan fitur yang terdapat pada HTML5 dan bahasa pemrograman PHP.
Terdapat beberapa pengaturan yang harus dilakukan pertama kali saat pembuatan,
yaitu pengaturan koneksi ke basis data MySQL. Pengaturan koneksi basis data
dilakukan pada file database yang terletak pada folder config. Pengaturan ini
ditunjukkan pada Kode Program 1. Kode Program 1 Koneksi ke database MySQ
Kode Program 1 merupakan perintah untuk melakukan pengaturan koneksi
untuk menghubungkan ke basis data MySQL. Pada pengaturan ini dilakukan
pengisian untuk hostname, username, password, dan nama dari basis data yang
digunakan. Sedangkan pengaturan untuk folder penyimpanan data berupa gambar
ditunjukkan pada Kode Program 2. Kode Program 2 Pengaturan tempat penyimpanan data gambar
Kode Program 2 berfungsi untuk tempat menyimpan data gambar yang
telah berhasil diupload. Baris ke 1 menunjukkan tempat dan nama folder gambar
yang akan disimpan sedangkan baris ke 2 menunjukkan alamat file gambar yang
telah disimpan.
Gambar 8 Halaman Home Aplikasi Pembelajaran Sejarah