APLIKASI E-LEARNING BERBASIS WEB PADA MATA

PELAJARAN MULTIMEDIA DI SMK NEGERI 1 TAPALANG

SKRIPSI

OLEH

NURDIANSYAH
20160510081

PRODI SISTEM INFORMASI

FAKULTAS ILMU KOMPUTER
UNIVERSITAS AL ASYARIAH MANDAR
TAHUN 2020

i
 PERSETUJUAN

SKRIPSI

APLIKASI E-LEARNING BERBASIS ANIMASI PADA MATA PELAJARAN

MULTIMEDIA SMK 1 NEGERI TAPALANG

Yang dipersiapkan dan disusun oleh :

NURDIANSYAH

20160510081

Telah disetujui oleh Dosen Pembimbing

Pada tanggal …………….

Pembimbing I Pembimbing II

Muhammad Assidiq S, E., M. Pd Basri, S. Kom., M. T

NIDN: 0924127801 NIDN: 0905078702

ii
 KATA PENGANTAR

Segala Puji dan Syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa

yang sampai detik ini masih memberikan rahmat serta hidayah kepada penulis,

sehingga penulis dapat menyelesaikan skripsi tentang “Aplikasi E-Learning Berbasis

Web Pada Mata Pelajaran Multimedia Smk Negeri 1 Tapalang” ini dengan baik.

skripsi ini disusun sebagai salah satu syarat yang harus ditempuh dalam kelulusan

mahasiswa tingkat strata 1.

Selama penulis menyusun Skripsi ini penulis banyak mendapat bantuan,

dukungan serta bimbingan dari berbagai pihak. Untuk itu penulis mengucapkan

banyak terima kasih kepada semua pihak yang tidak bias kami tuliskan satu persatu,

dan ucapan terima kasih kepada:

1. Ibu Dr. Chuduriah Sahabuddin, M. Si selaku Rektor Universitas Al Asyariah

Mandar

2. Bapak Muhammad Sarjan, SE., M.Si., Akt Selaku Dekan Fakultas Ilmu Komputer

Universitas Al Asyariah Mandar

3. Bapak Muhammad. Assiddiq, SE., M. Pd selaku Wakil Dekan Fakultas Ilmu

Komputer Universitas Al Asyariah Mandar Sekaligus Pembimbing I dan Basri S.

Kom., M.T Program Studi Teknik Informatika sekaligus Pembimbing II

Universitas Al Asyariah Mandar

4. Bapak A. Ahmad Qaslim S. Kom., M. Kom Selaku Kepala Program Studi Sistem

Informasi dan Bapak Basri S. Kom., M. T Program Studi Teknik Informatika

sekaligus Pembimbing II Universitas Al Asyariah Mandar

5. Bapak dan Ibu Dosen beserta Staf di Universitas Al Asyariah Mandar

iii
6. Semua Mahasiswa Jurusan Sistem Informasi Universitas Al Asyariah Mandar

beserta semua pihak yang telah membantu penulis hingga selesainya Skripsi ini.

Penulis menyadari bahwa penulisan skripsi ini masih jauh dari kesempurnaan,

untuk itu penulis sangat mengharapkan kepada semua pihak yang terkait untuk

memberikan kritik dan saran yang bersifat membangun demi kesempurnaan dalam

penulisan skripsi ini.

Penulis berharap semoga Skripsi ini dapat bermanfaat bagi para pembacanya

dalam menambah perbendaharaan kata dan perluasan pandangan serta pengetahuan

untuk meningkatkan prespektif baru.

Atas kritik dan sarannya penulis ucapkan terima kasih

Malunda, 2020

Nurdiansyah

iv
 DAFTAR ISI

HALAMAN JUDUL ....................................................................................... i

LEMBAR PERSETUJUAN ............................................................................ ii

KATA PENGANTAR .................................................................................... iii

DAFTAR ISI ................................................................................................... v

DAFTAR GAMBAR ...................................................................................... vii

DAFTAR TABEL ........................................................................................... viii

BAB I PENDAHULUAN ............................................................................... 1

1.1. Latar Belakang ........................................................................... 1

1.2. Rumusan Masalah ....................................................................... 5

1.3. Batasan Malasah.......................................................................... 5

1.4. Tujuan Penelitian ........................................................................ 5

1.5. Manfaat Penelitian ...................................................................... 6

1.6. Penelitian Terkait ........................................................................ 6

BAB II LANDASAN TEORI .......................................................................... 10

2.1. Kerangka Teori ........................................................................... 10

2.1.1. E-learning ........................................................................ 10

2.1.2. Pengertian E-learning ...................................................... 11

2.1.3. Komponen E-learning ..................................................... 12

2.1.4. Konsep Model Pembelajaran E-learning ........................ 14

2.1.5. Bahasa Pemprograman Php Dan Data Base Mysql ........ 19

2.1.6. Internet Dan Web ............................................................ 20

2.1.7. Flowchart ........................................................................ 21

v
 2.1.8. Metode Pengembangan Sistem ....................................... 22

2.2. Kerangka Pikir ............................................................................ 24

BAB III KETODE PENELITIAN ................................................................... 26

3.1. Alat dan Bahan Penelitian ........................................................... 26

3.1.1. Perangkat Keras (Hardware) ......................................... 26

3.1.2. Perangkat Lunak (Software)............................................ 26

3.2. Tempat Dan Waktu Penelitian .................................................... 27

3.2.1. Tempat Pelaksanaan ........................................................ 27

3.2.2. Waktu penelitian ............................................................. 27

3.3. Tahapan Penelitian ...................................................................... 27

3.4. Teknik Pengumpulan Data.......................................................... 29

3.4.1. Kusioner ......................................................................... 29

3.4.2. Observasi ........................................................................ 29

3.4.3. Studi Pustaka .................................................................. 29

3.4.4. Wawancara ..................................................................... 30

3.5. Teknik Analisis Data ................................................................. 30

3.6. Kerangka Sistem ......................................................................... 32

3.7. Analisis Dan Perancanaan Sistem............................................... 33

3.7.1. Alur Sistem Yang Berjalan ............................................ 34

3.7.2. Alur Sistem Yang Diusulkan ......................................... 35

3.7.3. Pra Rancangan Input Output .......................................... 36

3.7.4. From Tampilan Utama .................................................... 36

3.7.5. From Input Materi Multimedia ...................................... 36

vi
BAB IV HASIL PENELITIAN DAN PEMBAHASAN

4.1 Hasil Penelitian............................................................................ 35

4.1.1 Uji Coba Sistem dan Program......................................... 35

4.1.2. Pengujian WhiteBox.......................................................... 35

4.1.3. Hasil Pengujian WhiteBox Pembahasan.......................... .36

4.2.1. Form Guru........................................................................ 45

4.2.2. Form Tampilan Beranda siswa......................................... 46

4.2.3. Form Materi..................................................................... 46

4.2.4. Form Nilai......................................................................... 47

4.2.5. Form Materi....................................................................... 47

4.2.6. From Admin....................................................................... 48

4.2.7. Tampilan Data pengajar.................................................... 48

4.2.8. Tampilan Data siswa.......................................................... 49

4.2.9. Tampilan data kelas........................................................... 49

4.2.10. Tampilan Jenis ujian.......................................................... 50

4.2.11. Pembahasan Code Program...............................................50

BAB V KESIMPULAN DANSARAN............................................ 80

5.1 Kesimpuan.................................................................................. 80

5.2 Saran........................................................................................... 80

DAFTAR PUSTAKA.. .................................................................................... 81

vii
 DAFTAR GAMBAR

Gambar 2.1 Kerangka Pikir................................................................................. 24

Gambar 3.1 Tahapan Penelitian ......................................................................... 28

Gambar 3.2. Kerangka Sistem ........................................................................... 33

Gambar 3.2 Diagram Alurr Sistem Yang sedang berjala ................................... 34

Gambar 3.3 Diagram Alurr Sistem Yang diusulkan .......................................... 35

Gambar 3.5. From Tampilan Utama .................................................................. 36

Gambar 3.6. From Input Kata/Rekan Suara ....................................................... 36

Gambar 4.3 : Flowchart Beranda.........................................................................38

Gambar 4.4 : Flowgraph Beranda........................................................................38

Gambar 4.5 : Flowchart Tugas Kuis....................................................................40

Gambar 4.6 : Flowgraph Tugas Kuis...................................................................40

Gambar 4.7 : Flowchart Nilai..............................................................................40

Gambar 4.8 : Flowgraph Nilai.............................................................................42

Gambar 4.21 : Form Admin.................................................................................45

Gambar 4.22: Form Beranda siswa......................................................................46

Gambar 4.23: Tugas materi..................................................................................46

Gambar 4.24 : Form Nilai....................................................................................47

Gambar 4.25: Materi............................................................................................47

Gambar 4.27 : admin............................................................................................48

Gambar 4.28: Tampilan data pengajar.................................................................48

Gambar 4.29. tampilan data siswa.......................................................................49

Gambar 4.30. tampilan data kelas........................................................................49

viii
 DAFTAR TABEL

Tabel 2.1. Simbol dan fungsi Flowchart .............................................................. 22

Tabel 3.1. Jadwal Pelaksanaan Penelitian ............................................................ 27

Tabel 3.2. Tabel Kerangka Pikir .......................................................................... 32

Tabel 4.1 Hasil Pengujian Whitebox...........................................................................40

ix
 BAB I

PENDAHULUAN

1.1. Latar Belakang

Permasalahan didunia pendidikan meliputi kualitas pendidikan dan

kuantitas pendidikan. Kualitas pendidikan terkait dengan mutu pendidikan

yang diharapkan oleh masyarakat sedangkan kuantitas pendidikan terkait

dengan pemerataan memperoleh akses pendidikan tanpa ada kesenjangan

dan pengecualian. Kondisi geografis menjadikan tantangan bagi kementrian

pendidikan indonesia untuk memberikan layanan yang bermutu dan merata

untuk semua khalayak masyarakat. Solusi yang bisa dikembangkan adalah

optimalisasi peran Teknologi Informasi dan Komunikasi (TIK) dalam dunia

pendidikan pendidikan diwujudkan dengan pengembangan pembelajaran

online (e-learning). Pada penelitian ini, e-learning dikembangkan berfokus

pada Sekolah Menengah Atas. Aplikasi e-learning dikembangkan dengan

teknologi web. Aktor yang terlibat meliputi admin, guru dan siswa. Fitur

yang diberikan meliputi upload materi, upload tugas, diskusi, dan quiz

online. Pada aplikasi ini juga ditambahkan fitur absensi ibadah sholat jum’at

bagi siswa yang beragama islam. Pengujian dilakukan dengan teknik

pengujian black box. Dari hasil pengujian black box dihasilkan bahwa

semuai fungsional aplikasi e-learning telah berjalan sesuai dengan

perancangan (Hartatik, 2017).

Media belajar juga dapat membantu siswa dalam menambah minat

belajar dan menambah pengetahuan. Menurut Egita Octaviana (2007)

1
tentang pengembangan media pembelajaran berbantuan komputer

menyatakan bahwa media tersebut layak digunakan dengan presentase

penilaian guru 90,1% dan ahli media menunjukan presentase 83,6% dan

juga keefektifan media dengan presentase jawaban “ya “ sebesar 86,4% dan

jawaban tidak sebesar 13,5% sedangkan observasi aktivitas siswa dengan

presentase “tidak aktif” mencapai 6,4% “aktif” sebesar 63,5% dan “sangat

aktif” sebesar 30% kemudian penilaian hasil tes presentase belajar yang

dicapai siswa dengan taraf signifikansi sebesar 0,05 maka pembelajaran

dengan media tersebut dapat meningkatkan kompetensi siswa serta

penilaian respon siswa menunjukkan presentase rata – rata sebesar 81% (Tri

Sutrisno, 2016).

Penelitian pengembangan media pembelajaran e-learning berbasis

animasi ini bertujuan untuk menghasilkan media pembelajaran e-learning

berbasis animasi yang digunakan sebagai media pembelajaran untuk mata

pelajaran memahami model atom bahan semikonduktor, dan mengetahui

respon siswa terhadap media pembelajaran e-learning berbasis animasi pada

mata pelajaran memahami model atom bahan semikonduktor. Jenis

penelitian ini adalah menggunakan penelitian pengembangan metode model

Research & Development (R&D) dalam bidang pendidikan. Pengembangan

media ini ditujukan untuk mengembangkan media pembelajaran yang

bermanfaat untuk proses belajar mengajar. Pengembangan akan difokuskan

pada media pembelajaran e-learning berbasis animasi pada kompetensi

dasar memahami model atom bahan semikonduktor. Hasil penelitian ini

2
menunjukkan bahwa Media pembelajaran e-learning berbasis animasi pada

kompetensi dasar memahami model atom bahan semikonduktor di SMK

Negeri 1 Jetis Mojokerto dinyatakan sangat baik, dengan hasil rating

82,26%. Dengan rata-rata hasil rating penilaian validasi terhadap media

pembelajaran e-learning berbasis animasi sebesar 82,26% dinyatakan

sangat baik. Berdasarkan penelitian respon siswa terhadap media

pembelajaran e-learning berbasis animasi pada kompetensi dasar

memahami model atom bahan semikonduktor mendapat respon positif dari

siswa. Dengan rata-rata hasil rating respon siswa sebesar 83.30% yang

dikategorikan sangat baik (Benny Widiantoro, 2015).

Pembelajaran elektronik atau e-Learning telah dimulai pada tahun

1970-an (Waller and Wilson, 2001). Konsep Pembelajaran Berbasis

Komputer dan Jaringan adalah suatu bentuk model pembelajaran dengan

memanfaatkan teknologi web dan internet, konsep belajar dan mengajar ini

sebenarnya bukanlah barang baru, bukan juga ide ataupun pemikiran baru,

bahkan sudah berkembang sejak beberapa dasawarsa lalu. Berbagai istilah

digunakan untuk mengemukakan pendapat/gagasan tentang pembelajaran

elektronik, antara lain adalah: on-line learning, internet-enabled learning,

virtual learning, atau web-based learning. web based distance education, e-

Learning, web based teaching and learning. Yang perkembangannya pada

dunia pendidikan formal baru terjadi pada akhir 90 an. Secara global

Konsep Pembelajaran Berbasis Komputer dan Jaringan seringkali diartikan

hanya sebagai e-Learning atau Distance Learning. Perkembangan Konsep

3
ELearning ini ditandai dengan munculnya situs-situs yang melayani proses

belajar mengajar dengan berbasiskan komputer dan jaringan sejak era 15

tahun yang lalu di seluruh pelosok Internet dari yang gratis maupun yang

komersial (Rabiah Adawi, 2019).

Dalam kegiatan pembelajaran dikelas, siswa menggunakan satu

komputer client untuk mengakses e-learning berbasis moodle yang telah

diinstall pada komputer server. Kegiatan pembelajaran menjadi terpusat

pada siswa dan siswa dapat berinterakasi secara langsung dengan e-

learning. Media pembelajaran berbasis Animasi ini membuat siswa lebih

aktif dan mandiri. Media pembelajaran berbasis Animasi yang akan

dikembangkan, berisi multimedia pokok bahasan desain sederhana yang

sesuai dengan permasalahan pembelajaran bagi siswa yang dilengkapi teks,

gambar dan animasi. Media dibuat lebih interaktif agar siswa mudah dalam

memahami materi pelajaran dan mempunyai gambaran yang lebih kokret

mengenai materi multimedia sederhana. Selain itu, materi pelajaran

dilengkapi dengan soal evaluasi untuk mengetahui tingkat pemahaman

siswa terhadap materi yang telah dipelajari. Permasalahan inilah yang

kemudian penulis angkat dalam skripsi pengembangan dengan judul,

“Aplikasi E-Learning Berbasis Web Pada Mata Pelajaran Multimedia Smk

Negeri 1 Tapalang”

4
1.2. Rumusan Masalah

Berdasarkan latar belakang yang telah dijelaskan, maka rumusan

permasalahan yang dihadapi adalah bagaimana Rancang Bangun ” Aplikasi

E-Learning Berbasis Web Pada Mata Pelajaran Multimedia Smk Negeri 1

Tapalang” ?

1.3. Batasan Masalah

Agar permasalahan yang di bahas tidak meluas, maka penyusun

membatasi permasalahan dalam tugas akhir ini sebagai berikut :

1. Mata pelajaran yang digunakan dalam ujicoba ini ada adalah

Pengenalan Perangkat Keras Komputer”, “Pemasangan motherboard

pada casing komputer” dan juga “Testing hardware motherboard,

memory dan processor”.

2. Adapun jenis file multimedia yang digunakan dalam uji coba ini adalah

file video yang diambil dari situs Youtube dan juga file animasi flash.

1.4. Tujuan Penelitian

Adapun tujuan dari pembuatan tugas akhir ini adalah sebagai berikut:

Perancangan Sistem Aplikasi E-learning Berbasis Animasi Pada Mata

Pelajaran Multemedia Di SMK Negeri 1 Tapalang

5
1.5. Manfaat Penelitian

Manfaat dengan dilakukannya peneltian ini adalah :

1. Bagi siswa, penerapan e-Learning berbasis Animasi diharapkan mampu

menjadi wahana baru dalam proses meningkatkan keaktifan dan prestasi

belajar siswa.

2. Bagi guru, penerapan e-Learning berbasis Animasi diharapkan menjadi

suatu pengalaman bagi guru dalam meningkatkan aktivitas pembelajaran

bagi peserta didiknya.

3. Bagi Peneliti, sebagai pengembangan pengetahuan tentang penelitian

tindakan kelas dalam meningkatkan kualitas pembelajaran Multimedia.

1.6. Penelitian Terkait

Penelitian serupa sudah pernah dilakukan di tempat lain menggunaan

metode yang berbeda. Untuk menghindari Plagiarisme penulis

mencantumkan beberapa penelitian serupa sebagai berikut:

1. Rohma Eka Indri Ahadiah, 2016, Pengembangan Media Pembelajaran

Berbasis E-Learning Pada Mata Pelajaran Teknik Listrik Di Smk Negeri 3

Surabaya Tujuan dari penelitian ini adalah untuk mengembangkan media

pembelajaran berbasis e-learning pada mata pelajaran teknik listrik. Lebih

lanjut tujuan khusus dari penelitian ini adalah mendeskripsikan validitas,

keefektifan, dan kepraktisan media pembelajaran yang dikembangkan.

Penelitian ini merupakan penelitian pengembangan dengan menggunakan

tahapan yang ada pada Research and Development (R&D), dengan subyek

penelitian pada penelitian ini adalah siswa kelas X TAV 2 dan X TAV 3

6
 Jurusan Teknik Audio Video SMK Negeri 3 Surabaya. Pada penelitian ini

rancangan ujicoba yang digunakan adalah static-group pretest-postest

design.

2. Devita Mustika Weni, 2016 Meningkatkan Hasil Belajar Siswa dengan

Pengembangan Media Pembelajaran E-Learning Berbasis Blog, SMKN

(Sekolah Menengah Kejuruan Negeri) 1 Turen merupakan salah satu SMK

negeri di Turen Kabupaten Malang. Sekolah ini memiliki beberapa Program

Keahlian antara lain APK (Administrasi Perkantoran), Akuntansi,

Pemasaran, TKJ (Teknik Komputer dan Jaringan), Jasa Boga, dan Tata

Busana. Berdasarkan hasil observasi awal yang dilakukan peneliti pada

tanggal 13 September 2014, SMKN 1 Turen sebenarnya sudah memiliki

fasilitas yang dapat menunjang proses pembelajaran, seperti komputer, lab

pada masing-masing program keahlian yang sudah memadai, dan wifi yang

dapat diakses dengan mudah di lingkungan sekolah. Namun dalam

pemanfaatan fasilitas tersebut, belum semua guru memanfaatkannya secara

maksimal dalam proses pembelajaran.

3. G. N. Pardomuan, Ketut Agustini, 2017 Desain Sistem Personalisasi E-

Learning Berbasis Felder Silverman Model Untuk Materi Animasi 2

Dimensi di SMK Negeri Singaraja, E-learning menjadi semakin adaptif

(menyesuaikan) dengan adanya personalisasi e-learning yang dapat

mendeteksi karakteristik dan kebutuhan individu dari siswa. Dengan tujuan

menciptakan sebuah personalisasi elearning untuk lingkungan sekolah

menengah kejuruan, dikembangkanlah personalisasi e-learning yang

7
 mengadopsi dimensi visual/verbal dari Felder Silverman. Sistem memiliki

sebuah algoritma yang dapat menentukan tipe materi pembelajaran

(visual/verbal) yang dapat yang sesuai dengan gaya belajar siswa. Setelah

tahapan pengembangan sistem, sistem diujicobakan ke siswa di SMK

Negeri Singaraja. Kuisioner disebar ke seluruh partisipan termasuk guru

dan dosen sebagai ahli untuk mengetahui tingkat kelayakan dan kepuasan

dari sistem yang diusulkan, untuk digunakan sebagai media yang

mendukung pembelajaran di sekolah.

4. Numiek Sulistyo Hanum, 2013 Keefektifan E-Learning Sebagai Media

Pembelajaran (Studi Evaluasi Model Pembelajaran E-Learning Smk

Telkom Sandhy Putra Purwokerto) penelitian menunjukkan bahwa

pelaksanaan pembelajaran e-learning di SMK Telkom Sandhy Putra

Purwokerto sesuai dengan standar mutu pelaksanaan e-learning pada

komponen perencanaan pembelajaran cukup efektif dengan kecenderungan

77,57%; komponen perancangan dan pembuatan materi cukup efektif

dengan kecenderungan 75,14%; komponen penyampaian pembelajaran e-

learning cukup efektif dengan kecenderungan 75%; komponen interaksi

pembelajaran cukup efektif dengan kecenderungan 66,10%; dan komponen

evaluasi pelaksanaan pembelajaran e-learning cukup efektif dengan

kecenderungan 69,01%. Secara keseluruhan dapat disimpulkan bahwa

pelaksanaan pembelajaran e-learning sebagai media pembelajaran di SMK

Telkom Sandhy Putra Purwokerto cukup efektif dengan tingkat

kecenderungan 77,27%. Hal ini menunjukkan bahwa pelaksanaan

8
 pembelajaran e-learning di SMK Telkom Sandhy Putra Purwokerto tidak

sepenuhnya efektif bagi semua guru di SMK Telkom Sandhy Putra

Purwokerto, dikarenakan beberapa faktor dari pelaksanaannya yang belum

optimal.

5. Diana Ariani, 2018 Komponen Pengembangan E-Learning, Sebagai sebuah

sistem, e-learning membutuhkan seluruh komponen yang bertugas

mendukung pengembangannya. Selain dari sisi intruksional, maka perlu

pula dipertimbangkan kendala-kendala yang mungkin muncul dari

pelaksanaan sebuah elearning. Selain itu komponen insfrakstruktur dan

komponen Sumber Daya Manusia jarang sekali dipertimbangkan dalam

sebuah proses pengembangan e-Learning, hal ini sangat disayangkan

mengingat tanpa adanya kelengkapan komponen tersebut, maka

pelaksanaan pembelajaran dengan e-Learning tidak dapat optimal. Pada

artikel ini akan dibahas secara mendetail kebutuhan apa saja yang berasal

dari komponen insfrakstruktur atau saran dan prasarana serta kebutuhan dari

komponen Sumber Daya Manusia.

Dalam penelitian ini, penulis sendiri akan melakukan penelitian

tentang Aplikasi E-Learning Berbasis Web Pada Mata Pelajaran

Multimedia Smk Negeri 1 Tapalang, Dengan sistem ini maka proses belajar

mengajar dapat lebih diefesienkan serta lebih menarik perhatian para siswa

siswi untuk melakukan kegiatan proses belajar mengajar di SMK Negeri 1

Tapalang.

9
 BAB II

TINJAUAN PUSTAKA

2.1. Kerangka Teori

2.1.1. E-Learrning

E-Learning adalah sistem pembelajaran dengan memanfaatkan

teknologi sistem informasi computer yaitu Teknologi Web. Dengan

demikian orang dapat belajar secara online dimana saja dengan

menggunakan perangkat komputer ataupun android. Sistem pengajaran

berbasis video tentang pelajaran Matematika khusus untuk anak- anak,

metode tampilan video pun tidak banyak yang sesuai karena

memerlukan animasi yang menarik seperti pada film kartun. Pada

penelitian ini mengkombinasikan teknologi 4.0 yaitu animasi komputer

untuk mata pelajaran matematika. Hasil akhir dari video animasi

pelajaran matematika tersebut menjadi video tutorial atau yang kita

sebut E-Learning. Pelajaran Matematika adalah salah satu mata

pelajaran yang paling sulit dim engerti, terutama anak- anak. Dimana

orang perlu mengikuti penjelasan pelajaran ini secara berulang- ulang.

Demikian dengan adanya E-Learning maka orang dapat mengikuti isi

tutorial dalam Website tersebut secara berulang-ulang sampai mereka

mengerti isi dari tutorial pelajaran tersebut. Untuk membuat suatu E-

Learning tutorial pelajaran Matematika berupa animasi film kartun,

maka diperlukan suatu Tools yang dapat menghasilkan video tutorial

animasi berbasis Web. Adobe Premiere adalah salah satu tools aplikasi

10
 animasi yang mudah digunakan saat ini. Dengan tools aplikasi ini kita

dapat membuat suatu E-Learning berbasis Web mata pelajaran

Matematika dalam bentuk animasi kartun yang mudah dimengerti oleh

anak- anak (Imriani Moroki, 2019)

2.1.2.Pengertian E-Learning

E-learning adalah teknologi informasi dan komunikasi untuk

mengaktifkan siswa untuk belajar kapanpun dan dimanapun

(Dahiya,2012). Pembelajaran elektronik atau e-learning telah dimulai

pada tahun 1970-an (Waller and Wilson, 2001). Berbagai istilah

digunakan untuk mengemukakan pendapat/gagasan tentang

pembelajaran elektronik, antara lain adalah: onlinelearning, internet-

enabled learning, virtual learning, atau web-based learning. Ada 3 (tiga)

hal penting sebagai persyaratan kegiatan belajar elektronik (e-learning),

yaitu: (a) kegiatan pembelajaran dilakukan melalui pemanfaatan

jaringan, dalam hal ini dibatasi pada penggunaan internet, (b)

tersedianya dukungan layanan belajar yang dapat dimanfaatkan oleh

peserta belajar, misalnya External Harddisk, Flaskdisk, CD-ROM, atau

bahan cetak, dan (c) tersedianya dukungan layanan tutor yang dapat

membantu peserta belajar apabila mengalami kesulitan.

Di samping ketiga persyaratan tersebut di atas masih dapat

ditambahkan persyaratan lainnya, seperti adanya: (a) lembaga yang

menyelenggarakan dan mengelola kegiatan e-learning, (b) sikap positif

dari peserta didik dan tenaga kependidikan terhadap teknologi komputer

11
 dan internet, (c) rancangan sistem pembelajaran yang dapat dipelajari

dan diketahui oleh setiap peserta belajar, (d) sistem evaluasi terhadap

kemajuan atau perkembangan belajar peserta belajar, dan (e) mekanisme

umpan balik yang dikembangkan oleh lembaga penyelenggara.

Istilah e-learning banyak memiliki arti karena bermacam

penggunaan elearning saat ini. Pada dasarnya, e-learning memiliki dua

tipe yaitu synchronous dan asynchronous. Synchronous berarti pada

waktu yang sama. Proses pembelajaran terjadi pada saat yang sama

antara pendidik dan peserta didik. Hal ini memungkinkan interaksi

langsung antara pendidik dan peserta didik secara on line. Dalam

pelaksanaan, synchronous training mengharuskan pendidik dan peserta

didik mengakses internet secara bersamaan. Pendidik memberikan

materi pembelajaran dalam bentuk makalah atau slide presentasi dan

peserta didik dapat mendengarkan presentasi secara langsung melalui

internet. Peserta didik juga dapat mengajukan pertanyaan atau komentar

secara langsung ataupun melalui chat window. Synchronous training

merupakan gambaran dari kelas nyata, namun bersifat maya (virtual)

dan semua peserta didik terhubung melalui internet. Synchronous

training sering juga disebut sebagai virtual classroom (Wiwin Hartanto)

2.1.3.Komponen E-Learrning

Sama halnya dengan metodologi dan teknologi e-learning yang

terus dikembangkan, komponen - komponen e-learning yang disebutkan

di bawah ini dapat dimodifikasi dan mungkin memerlukan komponen

12
baru. Untuk menjadikan system e-learning lebih fungsional dan beguna

maka kita harus melakukan integrase yang disesuaikan dengan

perancangan material dan bahan-bahan pelajaran (Homa. P. Harahap,

2008). Adapun komponen - komponen e-learning adalah:

1. Perancangan material dan bahan pelajaran (Instructiona l Design)

a. Teori, materi dan bahan-bahan belajar

b. Strategi dan teknik belajar

2. Komponen-komponen multimedia (Multimed ia Component)

a. Tulisan dan gambar / graphis (Text and Image / grap hics)

b. Suara dan visual (Audio and Video streaming)

3. Pendukung protokol komunikasi (Internet protocol)

a. Communication tools

b. Remote access tools

c. Internet navigation tools

d. Search tools

4. Komputer dan media penyimpanan (Computer and Storage devices)

a. Sistem operasi (GUI based system operation); Windows, Unix, Mac,

Linux atau Dos

b. Kamera, CD ROMs, DVD, Card Interface

5. Layanan koneksi (Connection Services Prvider)

a. Modem

b. ADSL (Asymmetric Digital Subscriber Line)

c. Teknologi jaringan (LAN, WAN, WWAN)

13
2.1.4.Konsep Model Pembelajaran E-Learrning

Model pembelajaran pada dasamya merupakan suatu proses

komunikasi antara guru, struktur dan siswa, baik komunikasi secara

langsung dalam kegiatan tatap muka maupun tidak langsung

menggunakan media. Menurut R. Ibrahim, (2002:85) model

pembelajaran pada dasamya merupakan pengelolaan dan

pengembangan yang dilakukan terhadap komponen pembelajaran.

Menurut Joice dan Will (Winataputra, 2001:3) bahwa model

pembelajaran diartikan sebagai kerangka konseptual yang melukiskan

prosedur sistematis yang mengorganisasikan pengalaman belajar

tertentu dan berfungsi sebagai pedoman bagi perancang pembelajaran

dan para pengajar dalam merencanakan' dan melakukan aktivitas

belajar. Berdasarkan pengertian diatas dapat disimpulkan bahwa model

pembelajaran adalah suatu pedoman atau salah satu alat yang digunakan

oleh guru dalam melaksanakan kegiatan pembelajaran sehingga siswa

dapat melaksanakan kegiatan belajamya untuk mencapai tujuan dan

proses belajar mengajar.

Rencana Model Pembelajaran E-Learning dalam Meningkatkan

Kretifitas dan Minat Belajar Mahasiswa Pembelajaran dengan

menggunakan teknologi informasi dan komunikasi khususnya internet/

situs web/ homepage menuntut kreativitas, minat dan kemandirian diri

sehingga memungkinkan mahasiswa untuk mampu mengembangkan

semua potensi yang dimilikinya. Kreativitas dari segi kognitif

14
merupakan kemampuan berfikir yang memiliki kelancaran, keluwesan,

keaslian, dan perincian. Sedangkan dari segi afektifnya kreativitas

ditandai dengan motivasi yang kuat, rasa ingin tahu, tertarik dengan

tugas majemuk, berani menghadapi resiko, tidak mudah putus asa,

menghargai keindahan, memiliki rasa humor, selalu ingin mencari

pengalaman baru, menghargai diri sendiri dan orang lain. Karya-karya

kreatif ditandai dengan orisinalitas, memiliki nilai, dapat

ditransformasikan, dan dapat dikondensasikan. Minat Merupakan suatu

keadaan mental yang menghasilkan respon terarah terhadap suatu

situasi/obyek tertentu yang menyenangkan dan memberikan kepuasan

kepadanya. Minat seseorang ditandai dengan adanya ketertarikan yang

menyebabkan timbulnya perhatian secara khusus, dan sumber tenaga

yang mendorong individu berhadapan dengan suatu obyek.

Pembelajaran dengan dukungan TIK memungkinkan dapat

menghasilkan karya-karya baru yang orsinil, memiliki nilai yang tinggi,

dan dapat dikembangkan lebih jauh untuk kepentingan yang lebih

bermakna. Melalui TIK mahasiswa akan memperoleh berbagai

informasi dalam lingkup yang Iebih luas dan mendalam sehingga

meningkatkan wawasannya. Hal ini merupakan rangsangan yang

kondusif bagi berkembangnya kemandirian anak terutama dalam hal

pengembangan kompetensi, kreativitas, minat, kendali diri, konsistensi,

dan komitmennya baik terhadap diri sendiri maupun terhadap pihak lain

(B. Lena Nuryanti, 2004).

15
2.1.5.Action Script

ActionScript adalah bahasa pemrograman yang dibuat berdasarkan

ECMA Script, digunakan dalam pengembangan situs web dan

perangkat lunak menggunakan platform Adobe Flash Player (Radion,

2012). Actionscript merupakan suatu programming language (bahasa

pemrograman) yang dapat ditambahkan pada dokumen Flash (baik itu

pada frame, movie clip, atau button) untuk dapat membuat suatu animasi

yang lebih interaktif. Seperti halnya pada pemrograman C, C++ dan

Java, Action Script memiliki sifat yang sangat sensitif (case-sensitive)

artinya penulisan huruf sangat berpengaruh (Winda Angela Hamka,

Abdu Gani, 2016).

2.1.6.Bahasa Pemrograman Php Dan Data Base Mysql

a. Bahasa Pemrograman PHP

PHP adalah singkatan dari Perl Hypertext Preprocessor

adalah kode/skrip yang akan akan di eksekusi pada server side (Deni

Sutaji, 2012). Sifat server side pengerjaan skrip dilakukan pada di

server, baru kemudian hasilnya dikirimkan ke browser. Bahasa

Pemrograman PHP adalah bahasa pemrograman yang bekerja dalam

sebuah web server.

b. XAMPP

XAMPP merupakan tool yang menyediakan paket perangkat

lunak ke dalam satu buah. Dengan menginstall XAMPP maka tidak

perlu lagi melakukan instalasi dan konfigurasi web server Apache,

16
 PHP dan MySQL secara manual. XAMPP akan menginstalisasi dan

mengkonfigurasinya secara otomatis untuk anda atau auto

konfigurasi. (Suryatiningsih, 2009)

c. MySQL

MySQL merupakan turunan dari salah satu konsep utama

dalam basisdata sejak lama, yaitu (Structured Quary language)

SQL. SQL adalah sebuah konsep pengoperasian basis data terutama

untuk proses seleksi, pemasukan, pengubahan, dan penghapusan

data yang dimungkinkan dapat dikerjakan dengan mudah dan

otomatis. (Deni Sutaji, 2012)

2.1.7.Intrnet dan Web

a. Internet

Internet dapat dikatakan sebagai suatu jaringan komunikasi

yang berkembang dari teknologi komputer dan telekomunikasi.

Internet memiliki jangkauan jaringan yang sangat luas hingga lintas

benua. Internet merupakan jaringan komunikasi tanpa batas yang

melibatkan jutaan komputer yang tersebar diseluruh dunia. Jaringan

internet menggunakan banyak media dalam menyebarluaskan

jaringannya tersebut diantaranya menggunakan sarana telepon

(kabel) serta menggunakan satelit (Wireless). Agar suatu komputer

dapat terhubungan dalam jaringan internet maka komputer tersebut

harus memiliki sebuah sistem yang terstruktur yang berfungsi

sebagai pengatur dari keluar masuknya data pada komputer tersebut.

17
 Sistem tersebut terdiri dari aplikasi-aplikasi serta perangkat keras

(hardware) tert entu.

b. World Wide Web (WWW)

Web adalah pelayanan terbaru Internet, yang dikembangkan

di CERN, laboratorium Fisika Partikel Eropa yang didasarkan pada

teknologi hypertext. Mulamula web dikembangkan sebagai sarana

pertukaran informasi/ dokumen diantara para ilmuan. Dengan

menggunakan web, pengaksesan berbagai macam sumber informasi

dan layanan di Internet misal, ftp, mail, gopher dan lain sebagainya

dapat dilakukan melalui satu cara yang general. Pada prinsipnya,

web bekerja dengan cara menampilkan file-file HTML yang berasal

dari server web pada program client khusus, yaitu browser web.

Program browser pada client mengirimkan permintaan (request)

kepada server web, yang kemudian akan dikirimkan oleh server

dalam bentuk HTML. File HTML ini berisi instruksi-instruksi yang

diperlukan untuk membentuk tampilan. Perintah HTML ini

kemudian diterjemahkan oleh browser web sehingga isi informasi

dapat ditampilkan secara visual kepada pengguna di layar computer

(Sarifuddin Madenda, Tommy F. R.).

2.1.8.Flowchart

Bagan alur atau Flowchart adalah bagan (chart) yang

menunjukkan alir (flow) di dalam program atau prosedur sistem

18
 secara logika. Bagan alir (flowchart) digunakan terutama untuk alat

bantu komunikasi dan untuk dokumentasi.

Bagan alur proses (process flowchart) merupakan bagan alir

yang banyak digunakan di teknik industri. Bagan alir ini juga berguna

bagi analis sistem untuk menggambarkan proses dalam suatu

prosedur.

Tabel 2.1. Simbol dan fungsi Flowchart

No. Simbol Nama Keterangan

1 2 3 4

Menunjukkan arah aliran

1. Garis Alir algoritma, dari satu proses ke
proses berikutnya.

Menunjukkan awal atau akhir

2. Terminal
sebuah proses.

Menyatakan kegiatan yang akan

3. Proses terjadi dalam diagram alir.

Proses / langkah di mana perlu

adanya keputusan atau adanya
kondisi tertentu. Di titik ini selalu
4. Titik Keputusan
ada dua keluaran untuk
melanjutkan aliran kondisi yang
berbeda.

Digunakan untuk mewakili data

5. Input/ Output
masuk atau data keluar.

19
 Digunakan untuk menunjukan
Proses
6. suatu proses yang begitu
terdefenisi
kompleks.

Menunjukkan operasi yang tidak

memiliki efek khusus selain
Inisialisasi/ mempersiapkan sebuah nilai
7.
Persiapan untuk langkah / proses
berikutnya.

Menunjukkan penginputan data

8. Input Manual secara manual memakai alat -
alat komputer.

Menunjukkan operasi secara

9. Operasi Manual
manual.

Menunjukkan dokumen yang

10. Dokumen datanya di input atau output dari
suatu aliran program / dokumen.

Menunjukkan dokumen
11. Multi Dokumen berangkap dari suatu aliran
program / dokumen.

Menunjukkan penyimpanan atau

12. Arsip
pengarsipan dokumen.

Menunjukkan penyimpanan /
13. File pengambilan data ke / dari suatu
file dengan tipe apapun.

Menunjukkan hubungan aliran

Penghubung
14. program / dokumen pada
sehalaman
halaman yang sama.

20
 Menunjukkan hubungan aliran
Penghubung
15. program / dokumen pada
beda halaman
halaman yang berbeda.

Simbol untuk keluar/masuk

16 Simbol Off-line prosedure atau proses dalam
lembar / halaman yang lain.

2.1.9. Metode Pengembangan Sistem

Metode Pengembangan adalah sebuah cara yang tersistem atau

teratur yang bertujuan untuk melakukan analisa pengembangan suatu sistem

agar sistem tersebut dapat memenuhi kebutuhan (Pressman, 2010)

Dibawah ini beberapa model/metode pengembangan system :

1. Model Air Terjun (Waterfall)

Gambar dibawah merupakan tahap-tahap pada model waterfall.

Model air terjun ini merupakan paradigma tertua untuk rekayasa

perangkat lunak. Permasalahan yang sering dijumpai saat model air

terjun diterapkan adalah sebagai berikut:

- Proyek perangkat lunak yang nyata jarang mengikuti aliran

sekuensial seperti yang dilakukan pada tahap air terjun.

- Seringkali sulit bagi para pelanggan untuk menetapkan semua

spesifikasi kebutuhan secara eksplisit.

- Pelanggan harus memiliki kesabaran karena pelanggan baru bisa

melihat hasilnya setelah semua tahap terselesaikan dengan baik.

21
 Gambar 2.2 Model Waterfall

2.2. Kerangka Pikir

Sebuah badan usaha diharapkan berjalan secara efektif tentunya harus

selalu melakukan kegiatan–kegiatan operasiaonalnya secara efesien dan

efektif. Dalam hal ini adalah dari segi waktu, tenaga yang di gunakan. Dalam

upaya mengelola suatu system informasi yang akurat dalam sebuah organisasi

maka di butuhkan suatu system informasi yang mampu mengatasi masalah –

masalah yang di hadapi oleh badan usaha tersebut, bentuk kerangka pikir

dapat di lihat pada gambar 2.2. Kerangka Pikir:

22
 1. Pembelajaran di SMK Negeri 1 Tapalang masih
konvensional padahal sarana dan prasana sudah
mendukung.
2. Pembelajaran masih berorientasi pada hasil belajar
saja sedangkan proses pembelajaran belum terlalu
diperhatikan.

1. Membangun sistem pembelajaran online dengan

pengembangan elearning.
2. Mempermudah dan mengefesienkan proses belajar
mengajar.

TOOL SUMBER DATA METODE PENGEMBANGAN

SISTEM

Xampp Wawancara
Adobe Flash Observasi
Waterfall
Adobe Dreamweaver Studi Pustaka
Chrome Kusioner

TUJUAN
APLIKASI E-LEARNING
Gambar BERBASIS
2.2 Kerangka Pikir WEB PADA
MATA PELAJARAN MULTIMEDIA DI SMK NEGERI 1
TAPALANG
SEBAGAI ALAT BANTU PENINGKATAN PROSES
BELAJAR DAN MENGAJAR

Gambar 2.2 Kerangka Pikir

23
 BAB III

METODE PENELITIAN

3.1. Alat dan Bahan Penelitian

Adapun alat dan bahan yang digunakan dalam pembuatan “Aplikasi E-

Learning Berbasis Web Pada Mata Pelajaran Multimedia Smk Negeri 1

Tapalang” ini yaitu:

3.1.1. Perangkat Keras (Hardware)

Kebutuhan hardware dalam penelitian ini adalah kebutuhan

perangkat keras digunakan untuk merancang Aplikasi E-Learning

Berbasis Web Pada Mata Pelajaran Multimedia Smk Negeri 1

Tapalang adapun alat atau hardware yang digunakan yaitu

komputer/laptop yang spesifikasinya minimal memiliki processor

Intel(R) Pentium(R), Memori 2 GB, Hardisk 500 GB.

3.1.2. Perangkat Lunak (Software)

Kebutuhan software yang akan di inplementasikan pada

Aplikasi E-Learning Berbasis Animasi Pada Mata Pelajaran

Multimedia SMK Negeri 1 Tapalang adalah software yang

digunakan komputer dekstop pada umumnya namun ketika sistem

telah benar-benar berjalan tidak menutup kemungkinan spesifikasi

software akan berubah mengikuti kebutuhan sistem penelitian ini

membutuhkan sistem operasi Windows 10 Pro, Xampp, Adobe

Dreamweaver, Chrome, Adobe Flash digunakan membuat Aplikasi.

24
3.2. Tempat Dan Waktu Penelitian

3.2.1. Tempat Pelaksanaan

Tempat pelaksanaan penelitian adalah Sekolah SMK Negeri

1 Tapalang di Daerah Kabupaten Mamuju, Provinsi Sulawesi Barat

3.2.2. Waktu penelitian

Waktu yang dibutuhkan selama melakukan penelitian adalah

2 bulan terhitung dari bulan Januari 2020 s.d Maret 2020 Pada Tabel

3.1. Jadwal Pelaksanaan.

Tabel 3.1. Jadwal Pelaksanaan

Uraian januari Februari maret

NO
Kegiatan 1 2 3 4 1 2 3 4 1 2 3 4
Investigasi
1
Masalah
Studi
2
Literatur
Perancangan
3
Sistem
Pengumpulan
4
Data
Revisi
6
Sistem
Infografik
7
Aplikasi
Penyusunan
8 Laporan
Akhir

3.3. Tahapan Penelitian

Tahapan penelitian memuat informasi mengenai apa saja yang akan

dilakukan selama penelitian, bagian ini tentunya sama dengan uraian

kegiatan pada Gambar 3.1. jadwal pelaksanaan kegiatan.

25
 Menentukan Sistem Pembelajaran Multimedia Sebagai
Investigasi
Objek Penelitian

Riviu Jurnal, Penelitian Terdahulu, Buku, Studi

Studi Literatur
Lapangan untuk menentukan kreteria usability

Penentuan model Menentukan model pengukuran dan konteks pengguna

penguskuran dan sampel atau subjek manusia sebagai responden

Evaluasi Dilakukan pada Sekolah SMK Negeri 1 Tapalang

Pengumpulan data Kuesioner, Observasi, Studi Pustaka, wawancara

Pengelolaan dan Pengelola data LISREAL dan Analisis Deskriptif untuk

analisis data analisi data

Hasil Validasi data berupa nilai masing-masing kreteria, dimasukkan

Infografis Aplikasi kedalam sistem Pembelajaran Multimedia untuk menampilkan
dashboard laporan aveluasi

Laporan evaluasi berupa dashboard tinggkat kualitas

Laporan Evaluasi
Sistem Pembelajaran Multimedia dan Rekomendasi

Gambar 3.1 Tahapan Penelitian

Pada gambar diatas menjelaskan bahwa (1) langkah pertama yang

dilakukan adalah mencari masalah penelitian yang akan diangkat yaitu

tentang Aplikasi E-Learning Berbasis Animasi Pada Mata Pelajaran

Multimedia SMK Negeri 1 Tapalang, (2) mencari referensi dari jurnal, buku,

artikel dari internet dan referensi yang lainnya, (3) merancang sistem yang

akan dibuat dari referensi-referensi yang ada, (4) mengambil data dari hasil

penelitian pada tempat Dinas Pendidikan, (5) memperbaiki kembali sistem

yang sudah dibuat, (6) menyelesaikan sistem yang dirancang dari awal dan

26
 dibuat dalam bentuk apk untuk client serta website untuk admin, (7) membuat

laporan akhir berupa skripsi.

3.4. Teknik Pengumpulan Data

Pada tahap ini dilakukan proses pengumpulan data dengan berbagai

metode antara lain dengan wawancara. Pada penelitian ini juga dilakukan

observasi langsung untuk melakukan pengamatan dan analisa objek

penelitian sehingga mendapatkan data dan informasi yang dibutuhkan oleh

peneliti. Jenis-jenis metode penelitian dapat dilihat sebagai berikut :

3.4.1. Kuesioner

Metode ini dilakukan dengan metode wawancara langsung

baik secara terbuka maupun tertutup terhadap responden.

3.4.2. Observasi

Yaitu metode untuk mendapatkan data dengan melakukan

pengamatan langsung dan pencatatan secara sistematis terhadap

gejala atau fenomena yang terkait tanpa mengajukan pertanyaan.

3.4.3. Studi Pustaka

Merupakan cara pengumpulan data dengan mempelajari

literatur, paket modul dan panduan, buku-buku pedoman, buku-

buku perpustakaan dan segala kepustakaan lainnya yang dianggap

perlu dan mendukung.

27
 3.4.4. Wawancara

Metode ini dilakukan kepada narasumber dengan cara

mengajukan pertanyaan – pertanyaan yang mendukung permasalahan.

Wawancara dilakukan pada narasumber ataupun ahli yang

mendukung permasalahan.

3.5. Teknik Analisis Data

Sesuai dengan dua instrumen pokok yang digunakan dalam

penelitian ini, yakni kuesioner, maka peneliti menggunakan teknik

analisis data skor kuesioner.

Dalam teknik analisis data ini, digunakan lima katagori pernyataan,

yaitu : (1) Sangat Baik (SB) = 5, (2) Baik (B) = 4, (3) Cukup (C) = 3,

(4) Kurang (K) = 2, dan (5) Sangat Kurang (SK) = 1. Dengan

mengadopsi model konversi skor aktual menjadi nilai skala 5 yang

dikemukakan oleh Sukardjo (2005: 52-53), dasar penentuan kelima

katagori tersebut adalah jika skor aktual (X)

X >Mi + 1,8 SBi = Sangat Baik

Mi + 0,6 SBi < X ≤ Mi + 1,8 SBi = Baik

Mi – 0,6 SBi < X ≤ Mi + 0,6 SBi = Cukup

Mi – 1,8 SBi <X ≤ Mi – 0,6 SBi = Kurang

X ≤ Mi – 1,8 SBi =Sangat Kurang

Dengan keterangan :

- X = skor aktual (empiris)

- Mi = mean ideal, dihitung dengan menggunakan rumus :

28
 - SBi = simpangan baku ideal, ditentukan dengan rumus :

Dari skala 5 tersebut di atas diketahui bahwa skor maksimal ideal = 5 dan

skor minimal ideal = 1, sehingga diperoleh perhitungan Mi dan SBi

sebagai berikut :

- Mi = ½ (5+1) = 3

- SBi = 1/6 (5-1) = 0,67

Mi = ½ (skor maksimal ideal + skor minimal ideal)

SBi = 1/6 (skor maksimal ideal – skor minimal ideal)

Berdasarkan ketentuan tersebut, diperoleh hasil perhitungan skala 5

sebagaimana dapat dilihat pada tabel berikut ini :Analisa dan Perancangan

Sistem.

Tabel: Konversi Data Kuantitatif Menjadi data Kualitatif EAP

29
3.6. Kerangka Sistem

Kerangka terdiri dari input, proses dan output dalam aplikasi yang

akan dibuat seperti pada gambar 3.4 berikut ini :

Input Proses Output

Siswa

Login halaman utama

Input id siswa Xampp Nilai
Informasi materi Mysql

Admin

Data id Input id
siswa siswa
Login Admin Data materi Info materi
Data id siswa
Data Materi Multimedia Tingkat
Kualitas Siswa

Gambar 3.2. Kerangka Sistem

30
 Input Proses Output
Dapat Login Basis Data merupakan Setelah data
halaman utama, gudang Penyimpanan diolah di database,
Memasukan data diri Data yang akan diolah siswa akan
Calon
Setelah itu Mysql lebih lanjut. Basis Data menerima hasil
Siswa
memasukkan atau menjadi penting karena evaluasi dalam
Baru
menyeleksi data dapat mengorganisasi bentuk informasi
untuk selanjutnya Data, menghindari nilai
diproses duplikasi Data, hubungan
antar data yang tidak Setelah data
Dapat login aplikasi
jelas dan juga update diolah di database,
e-learning berbasis
yang rumit. Relasiunal admin akan
animasi, melakukan
admin table-tabel yang berada menerima laporan
pembaharuan dan
dibasis Data dapat tingkat kualitas
mengolah data
dihubungkan satu dengan siswa.
materi multimedia.
lainnya.

Tabel 3.2 Tabel Kerangka Pikir

3.7. Analisa dan Perencanaan Sistem

3.7.1. Alur Sistem Yang Sedang Berjalan

Dari hasil pengamatan awal yang telah dilakukan oleh

penulis, maka penulis dapat menggambarkan sistem yang sedang

berjana sekarang ini dalam diagram alur sistem sebagai berikut:

31
 Input Proses Output

siswa
Mulai
Hasil
-laporan
multimedia

Materi multi
Kualitas
media animasi penyajian
materi

Selesai
Ketepatan
cakupan
materi

Gambar 3.3 Alur Sistem Yang sedang berjalan

32
3.7.2 Alur Sistem yang diusulkan

Input Proses Output

Mulai Data siswa

Laporan Data
perkembangan
Peserta
-laporan
Siswa multimedia

DB

Selesai

Proses

Laporan Data
perkembangan
Peserta

Gambar 3.4. Alur Sistem Yang Diusulkan

Dengan melihat diagram alur yang diusulkan tersebut,

maka sebagaimana diusulkan dalam perancangan sistem tersebut

menggunakan database sebagai tempat penyimpanan data input ke

dalam sistem, yang nantinya data-data tersebut siap di proses untuk

keperluan informasi sebagai hasil akhir dari tahapan seleksi dalam

penyajian informasi.

33
3.1.1. Pra Rancangan Input Output

3.7.2 From Tampilan Utama

HOMEPAGE

SELAMAT DATANG
USERNAME

PASSWORD

LOGIN

Gambar 3.5. From Tampilan Utama

3.7.3 From Input Materi Multimedia

home page Materi Agenda

Propil

Mata Pelajaran

Catatan

Gambar 3.6. From Input Kata/Rekam Suara

34
 BAB IV

HASIL PENELITIAN DAN PEMBAHASAN

4.1 Hasil Penelitian

Berdasarkan hasil analisa dan desain yang telah dilakukan pada bab III,

maka pada bab ini akan mengimplementasikan hasil rancangan tersebut

menjadi sebuah program Aplikasi E-Learning Berbasis Web Pada Mata

Pelajaran Multimedia Smk Negeri 1 Tapalang yang dibangun dengan

menggunakan bahasa pemprograman PHP dan XAMP, Program yang dibuat

harus sesuai dengan desain yang telah dirancang sehingga dapat memenuhi

pemakai sistem. Pada tahap ini desain sistem diterjemahkan kedalam kode-

kode dengan menggunakan bahasa pemprograman yang sudah ditentukan.

4.1.2 Uji Coba Sistem dan Program

Program yang dibangun kemudian diuji. Untuk menguji

program aplikasi yang telah dirancang penulis menggunakan bahasa

pendekatan White Box merupakan salah satu metode pengujian yang

menggunakan struktur kontrol design procedure untuk mendapatkan

kesalahan sebanyak-banyaknya, dapat meningkatkan mutu atau

kualitas dari sistem yang dirancang. Jadi, dengan menggunakan

metode ini, perancang dapat mengetahui cara kerja dari system yang

dirancang secara terperinci sesuai spesifikasinya dan menilai apakah

setiap fungsi atau prosedur yang dirancang sudah berjalan dengan

baik dan benar. Sebagaimana yang dijelaskan berikut ini :

35
 4.1.2. Pengujian WhiteBox

A. Flowchart dan Flowgraph Menu Login

Mulai

Username
Password

Ya
Pil 1 Login

Tidak

Ya Salah
Pil 2
Keluar Pil 3

Benar

Selesai

Gambar 4.1 : Flowchart Menu Login

2
R1
R2 R4
3 4

R3
7 5 6

Gambar 4.2 : Flowgraph Menu Login

36
Perhitungan Cyclomatic Complexity dari Flowgraph di atas memiliki

Region = 4

1. Menghitung Cyclomatic Complexity dari Egde danNode

Dengan Rumus : V (G) = E – N + 2

Dimana : E (jumlah edge pada flowgraph) = 10

N (jumlah node pada flowgarph) = 8

Penyelesaian : V (G) = 10 – 8 + 2

V (G) = 4

Jadi jumlah path dari flowgraph di atas sebanyak 4 path.

2. Menghitung Cyclomatic Complexity dari P

P adalah jumlah titik yang menyatakan logika dalam diagram alir

dengan rumus V (G) = P + 2 dimana P = 2

Penyelesaian : V (G) = 2 + 2

V (G) = 4

3. Independent Path pada flowgarph di atas adalah :

Path 1 = 1 – 2 – 3 – 5 - 8

Path 2 = 1 – 2 – 3 – 4 – 6 – 8

Path 3 = 1 – 2 – 3 – 4 – 6 – 1

Path 4 = 1 – 2 – 3 – 5 – 7 - 8

37
B. Flowchart dan Flowgraph Beranda

Mulai

- Dasboard
- My propil
- Materi
- Tugas
-Evaluasi

Pil 1 Dasboard
YES

NO

Pil 2 Mypropil
YES

NO

Pil 3 Materi

Pil 4 Tugas

Selesai
Pil 5 Materi

Selesai

Gambar 4.3 : Flowchart Beranda

3 4

5 6

7 8

9 10

11

38
 Gambar 4.4 : Flowgraph Beranda

Perhitungan Cyclomatic Complexity dari Flowgraph di atas

memiliki Region = 5

1. Menghitung Cyclomatic Complexity dari Egde dan Node

Dengan Rumus : V (G) = E – N + 2

Dimana : E (jumlah edge pada flowgraph) = 8

N (jumlah node pada flowgarph) = 7

Penyelesaian : V (G) = 11 – 14 + 2

V (G) = 5

Jadi jumlah path dari flowgraph di atas sebanyak 5 path.

2. Menghitung Cyclomatic Complexity dari P

P adalah jumlah titik yang menyatakan logika dalam diagram alir

dengan rumus V (G) = P + 1 dimana P = 2

Penyelesaian : V (G) = 2 + 1

V (G) = 3

3. Independent Path pada flowgarph di atas adalah :

Path 1 = 1 – 2 – 3 – 4 – 7

Path 2 = 1 – 2 – 3 – 5 – 6 – 7

Path 3 = 1 – 2 – 3 – 5 – 7

39
C. Flowchart dan Flowgraph Tugas Kuis

Mulai

Tugas Kuis

- Lihat Kuis
- Jenis Mata Pelajaran

Pil 1 Kuis
YES

NO

Pil 2 mata pelajaran

YES

NO

Selesai

Gambar 4.5 : Flowchart Tugas Kuis

4 5

6 7

Gambar 4.6 : Flowgraph Tugas Kuis

40
 Perhitungan Cyclomatic Complexity dari Flowgraph di atas

memiliki Region = 3

1. Menghitung Cyclomatic Complexity dari Egde dan Node

Dengan Rumus : V (G) = E – N + 2

Dimana : E (jumlah edge pada flowgraph) = 8

N (jumlah node pada flowgarph) = 7

Penyelesaian : V (G) = 8 – 7 + 2

V (G) = 3

Jadi jumlah path dari flowgraph di atas sebanyak 3 path.

2. Menghitung Cyclomatic Complexity dari P

P adalah jumlah titik yang menyatakan logika dalam diagram alir

dengan rumus V (G) = P + 2 dimana P = 2

Penyelesaian : V (G) = 2 + 1

V (G) = 3

3. Independent Path pada flowgarph di atas adalah :

Path 1 = 1 – 2 – 3 – 4 – 7

Path 2 = 1 – 2 – 3 – 5 – 6 - 7

Path 3 = 1 – 2 – 3 – 5 – 7

41
D. Flowchart dan Flowgraph Nilai

Mulai

Tugas Kuis

- Lihat Kuis
- Jenis Mata Pelajaran

Pil 1 Kuis
YES

NO

Pil 2 mata pelajaran

YES

NO

Selesai

Gambar 4.7 : Flowchart Nilai

4 5

6 7

Gambar 4.8 : Flowgraph Nilai

42
 Perhitungan Cyclomatic Complexity dari Flowgraph di atas

memiliki Region = 3

1. Menghitung Cyclomatic Complexity dari Egde dan Node

Dengan Rumus : V (G) = E – N + 2

Dimana : E (jumlah edge pada flowgraph) = 8

N (jumlah node pada flowgarph) = 7

Penyelesaian : V (G) = 8 – 7 + 2

V (G) = 3

Jadi jumlah path dari flowgraph di atas sebanyak 3 path.

2. Menghitung Cyclomatic Complexity dari P

P adalah jumlah titik yang menyatakan logika dalam diagram alir

dengan rumus V (G) = P + 2 dimana P = 2

Penyelesaian : V (G) = 2 + 1

V (G) = 3

3. Independent Path pada flowgarph di atas adalah :

Path 1 = 1 – 2 – 3 – 4 – 7

Path 2 = 1 – 2 – 3 – 5 – 6 - 7

Path 3 = 1 – 2 – 3 – 5 – 7

43
 4.1.4. Hasil Pengujian WhiteBox

Tabel 4.1 Hasil Pengujian Whitebox

Independent Kompleksitas
No. Flowgraph Region
path Siklomatis

1 2 3 4 5

1 Form Menu Login 4 4 4

2 Form Menu Utama 3 3 3

3 Form Data Master 4 4 4

4 Form User Manage 2 2 2

5 Form Tambah 3 3 3

6 From Set Aplikasi 3 3 3

7 Form Validasi 4 4 4

8 Form Data Guru 4 4 4

9 From Data Siswa 4 4 4

Jumlah 31 31 31

Berdasarkan tabel hasil pengujian whitebox diatas maka

disimpulkan bahwa program aplikasi yang dirancang dianggap tidak valid.

Dalam hal ini program dinyatakan telah bebas dari error dan kesalahan

logika dengan beberapa asumsi sebagai berikut:

44
 a. Dapat menjamin seluruh Independet Path didalam modul yang

dikerjakan sekurang-kurangnya satu kali.

b. Dapat mengerjakan seluruh keputusan logika dan seluruh loop yang

sesuai dengan batasannya, juga dapat mengerjakan seluruh struktur

dasar internal yang menjamin validitas.

4.2 Pembahasan

4.2.12. Form Guru

Pada form Guru memiliki fungsi untuk Login Masuk ke from akun, akun

pengajar, sebagai berikut :

Gambar 4.21 : Form Admin

45
4.2.13. Form Tampilan Beranda siswa

Pada form beranda siswa ini menunjukan beberapa sub sub sebagai berikut

Gambar 4.22: Form Beranda siswa

4.2.14. Form Materi

Pada form tugas materi ini memiliki fungsi untuk melihat materi siswa yang

dikirim pada sistem sebagai berikut:

Gambar 4.23: Tugas materi

46
4.2.15. Form Nilai

Pada form nilai memiliki fungsi untuk menampilkan nilai Peserta sebagai

berikut :

Gambar 4.24 : Form Nilai

4.2.16. Form Materi

Pada form materi memiliki fungsi untuk melihat materi yang telah di upload

pada pemateri yang bersangkutan sebagai berikut :

Gambar 4.25: Materi

47
4.2.17. From Admin

Gambar 4.27 : admin

4.2.18. Tampilan Data pengajar

Gambar 4.28: Tampilan data pengajar

48
4.2.19. Tampilan Data siswa

Gambar 4.29. tampilan data siswa

4.2.20. Tampilan data kelas

Gambar 4.30. tampilan data kelas

49
4.2.21. Tampilan Jenis ujian

Gambar 4.31. Tampilan jenis ujian

4.2.22. Pembahasan Code Program

Code program adalah bagian back office yang bertugas mengatur apa yang

harus dilakukan oleh sebuah program untuk menuliskan Code, visual Code

menggunakan antar muka tersendiri yang terpisah dengan bagian desain visual dari

program tersebut.

1. Login

Sebuah code program dimulai dari teks public dan diakhiri dengan teks end

sub ini menunjukkan pendekatan visual code yang menggunakan pendekatan

pemograman berorientasi objek. untuk menuliskan sebuah kode program agar

terkoneksi kedalam database, maka diperlukan perintah seperti yang terlihat di

bawah ini

<?php

50
@session_start();

$db = mysqli_connect("localhost", "root", "", "elearning");

?>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1" />

<title>Login E-Learning</title>

<link rel="icon" type="image/png" href="img/favicon.ico">

<link href="style/assets/css/bootstrap.css" rel="stylesheet" />

<link href="style/assets/css/font-awesome.css" rel="stylesheet" />

<link href="style/assets/css/style.css" rel="stylesheet" />

</head>

<body>

<header>

<div class="container">

<div class="row">

<div class="col-md-12">

Anda belum punya akun ? Silahkan <a href="./?hal=daftar" class="btn

btn-xs btn-primary">Daftar</a>

</div>

51
 </div>

</div>

</header>

<div class="navbar navbar-inverse set-radius-zero">

<div class="container">

<div class="navbar-header">

<a class="navbar-brand" href="./">

<img src="style/assets/img/logo.png" />

</a>

</div>

<div class="left-div">

<div class="user-settings-wrapper">

<ul class="nav">

<li class="dropdown">

</li>

</ul>

</div>

</div>

</div>

</div>

52
 <section class="menu-section">

<div class="container">

<div class="row">

<div class="col-md-12">

<div class="navbar-collapse collapse ">

<ul id="menu-top" class="nav navbar-nav navbar-right">

<li><a <?php if(@$_GET['page'] == '') { echo 'class="menu-top-

active"'; } ?> href="./">Login</a></li>

<li><a <?php if(@$_GET['page'] == 'berita') { echo

'class="menu-top-active"'; } ?> href="?page=berita">Informasi</a></li>

</ul>

</div>

</div>

</div>

</div>

</section>

<div class="content-wrapper">

<div class="container">

<?php

if(@$_GET['page'] == '') { ?>

<div class="row">

<div class="col-md-12">

53
 <h4 class="page-head-line">Silahkan login untuk masuk ke e-

learning</h4>

</div>

</div>

<div class="row">

<div class="col-md-6">

<?php

if(@$_POST['login']) {

$user = @mysqli_real_escape_string($db, $_POST['user']);

$pass = @mysqli_real_escape_string($db, $_POST['pass']);

$sql = mysqli_query($db, "SELECT * FROM tb_siswa WHERE

username = '$user' AND password = md5('$pass')") or die ($db->error);

$data = mysqli_fetch_array($sql);

if(mysqli_num_rows($sql) > 0) {

if($data['status'] == 'aktif') {

@$_SESSION['siswa'] = $data['id_siswa'];

echo "<script>window.location='./';</script>";

} else {

echo '<div class="alert alert-warning">Login gagal, akun

Anda sedang tidak aktif</div>';

} else {

54
 echo '<div class="alert alert-danger">Login gagal, username /

password salah, coba lagi!</div>';

} ?>

<h4><i>Masukkan username dan password Anda dengan benar

:</i></h4>

<form method="post">

<label>Username :</label>

<input type="text" name="user" class="form-control" required />

<label>Password : </label>

<input type="password" name="pass" class="form-control"

required />

<hr />

<input type="submit" name="login" value="Login" class="btn

btn-info" />

<input type="reset" class="btn btn-danger" />

</form>

</div>

<div class="col-md-6">

<div class="alert alert-danger col-md-12">

Untuk menggunakan layanan e-learning ini kalian harus login

terlebih dahulu.

</div>

55
 </div>

</div>

<?php

} else if(@$_GET['page'] == 'berita') {

include "inc/berita.php";

} ?>

</div>

</div>

<footer>

2. Coding Index

Adapun komponen penting yang lain untuk menjalankan sebuah program

dengan perintah yaitu menggunakan komponen tombol button yang terdapat pada

komponen visual code, adapun contoh perintah dapat dilihat sebagai berikut

<?php

@session_start();

include "+koneksi.php";

if(!@$_SESSION['siswa']) {

if(@$_GET['hal'] == 'daftar') {

include "register.php";

} else {

include "login.php";

56
 }

} else { ?>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1" />

<title>E-Learning</title>

<link rel="icon" type="image/png" href="img/favicon.ico">

<link href="style/assets/css/bootstrap.css" rel="stylesheet" />

<link href="style/assets/css/font-awesome.css" rel="stylesheet" />

<link href="style/assets/css/style.css" rel="stylesheet" />

</head>

<body>

<script src="style/assets/js/jquery-1.11.1.js"></script>

<script src="style/assets/js/bootstrap.js"></script>

<?php

$sql_terlogin = mysqli_query($db, "SELECT * FROM tb_siswa JOIN tb_kelas ON

tb_siswa.id_siswa = '$_SESSION[siswa]' AND tb_kelas.id_kelas =

tb_siswa.id_kelas") or die ($db->error);

$data_terlogin = mysqli_fetch_array($sql_terlogin);

57
?>

<header>

<div class="container">

<div class="row">

<div class="col-md-12">

Selamat datang, <u><?php echo

ucfirst($data_terlogin['nama_lengkap']); ?></u>. &nbsp;<a onclick="return

confirm('Yakin ingin keluar?');" href="inc/logout.php?sesi=siswa" class="btn btn-

xs btn-primary">Logout</a>

</div>

</div>

</div>

</header>

<!-- HEADER END-->

<div class="navbar navbar-inverse set-radius-zero">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse"

data-target=".navbar-collapse">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

58
 <a class="navbar-brand" href="./">

<img src="style/assets/img/logo.png" />

</a>

</div>

<div class="left-div">

<div class="user-settings-wrapper">

<ul class="nav">

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#"

aria-expanded="false">

<span class="glyphicon glyphicon-user" style="font-size:

25px;"></span>

</a>

<div class="dropdown-menu dropdown-settings">

<div class="media">

<a class="media-left" href="#">

<img src="img/foto_siswa/<?php echo

$data_terlogin['foto']; ?>" class="img-rounded" />

</a>

<div class="media-body">

59
 <h4 class="media-heading"><?php echo

$data_terlogin['nama_lengkap']; ?></h4>

<h5>Kelas : <?php echo $data_terlogin['nama_kelas'];

?></h5>

</div>

</div>

<hr />

<center><a href="?hal=detailprofil" class="btn btn-info btn-

sm">Detail Profile</a> <a href="?hal=editprofil" class="btn btn-primary btn-

sm">Edit Profile</a></center>

</div>

</li>

</ul>

</div>

</div>

</div>

</div>

<section class="menu-section">

<div class="container">

<div class="row">

60
 <div class="col-md-12">

<div class="navbar-collapse collapse ">

<ul id="menu-top" class="nav navbar-nav navbar-right">

<li><a <?php if(@$_GET['page'] == '') { echo 'class="menu-top-

active"'; } ?> href="./">Beranda</a></li>

<li><a <?php if(@$_GET['page'] == 'quiz') { echo 'class="menu-

top-active"'; } ?> href="?page=quiz">Tugas / Quiz</a></li>

<li><a <?php if(@$_GET['page'] == 'nilai') { echo 'class="menu-

top-active"'; } ?> href="?page=nilai">Nilai</a></li>

<li><a <?php if(@$_GET['page'] == 'materi') { echo

'class="menu-top-active"'; } ?> href="?page=materi">Materi</a></li>

<li><a <?php if(@$_GET['page'] == 'berita') { echo

'class="menu-top-active"'; } ?> href="?page=berita">Informasi</a></li>

</ul>

</div>

</div>

</div>

</div>

</section>

<div class="content-wrapper">

<div class="container" id="wadah">

<?php

61
 if(@$_GET['page'] == '') {

include "inc/beranda.php";

} else if(@$_GET['page'] == 'quiz') {

include "inc/quiz.php";

} else if(@$_GET['page'] == 'nilai') {

include "inc/nilai.php";

} else if(@$_GET['page'] == 'materi') {

include "inc/materi.php";

} else if(@$_GET['page'] == 'berita') {

include "inc/berita.php";

} ?>

</div>

</div>

<footer>

<div class="container">

<div class="row">

<div class="col-md-12">

&copy; <?= date('Y') ?> E-Learning || Develop By Budi Sanjaya

</div>

</div>

</div>

62
 </footer>

</body>

</html>

<?php

?>

3. Coding soal

Adapun komponen penting yang lain untuk menjalankan sebuah program

dengan perintah yaitu menggunakan komponen yang terdapat pada komponen

visual code, adapun contoh perintah ubah data dapat dilihat sebagai berikut .

<?php

@session_start();

include "+koneksi.php";

$id_tq = @$_GET['id_tq'];

$no = 1;

$no2 = 1;

$sql_tq = mysqli_query($db, "SELECT * FROM tb_topik_quiz JOIN tb_mapel

ON tb_topik_quiz.id_mapel = tb_mapel.id WHERE id_tq = '$id_tq'") or die ($db-

>error);

63
 $data_tq = mysqli_fetch_array($sql_tq);

?>

<script src="style/assets/js/jquery-1.11.1.js"></script>

<script src="style/assets/js/bootstrap.js"></script>

<script>

var waktunya;

waktunya = <?php echo $data_tq['waktu_soal']; ?>;

var waktu;

var jalan = 0;

var habis = 0;

function init(){

checkCookie();

mulai();

function keluar(){

if(habis==0){

setCookie('waktux',waktu,365);

}else{

setCookie('waktux',0,-1);

function mulai(){

64
 jam = Math.floor(waktu/3600);

sisa = waktu%3600;

menit = Math.floor(sisa/60);

sisa2 = sisa%60

detik = sisa2%60;

if(detik<10){

detikx = "0"+detik;

}else{

detikx = detik;

if(menit<10){

menitx = "0"+menit;

}else{

menitx = menit;

if(jam<10){

jamx = "0"+jam;

}else{

jamx = jam;

document.getElementById("divwaktu").innerHTML = jamx+" Jam :

"+menitx+" Menit : "+detikx +" Detik";

waktu --;

65
 if(waktu>0){

t = setTimeout("mulai()",1000);

jalan = 1;

}else{

if(jalan==1){

clearTimeout(t);

habis = 1;

document.getElementById("kirim").click();

function selesai(){

if(jalan==1){

clearTimeout(t);

habis = 1;

function getCookie(c_name){

if (document.cookie.length>0){

c_start=document.cookie.indexOf(c_name + "=");

if (c_start!=-1){

c_start=c_start + c_name.length+1;

c_end=document.cookie.indexOf(";",c_start);

66
 if (c_end==-1) c_end=document.cookie.length;

return unescape(document.cookie.substring(c_start,c_end));

return "";

function setCookie(c_name,value,expiredays){

var exdate=new Date();

exdate.setDate(exdate.getDate()+expiredays);

document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" :

";expires="+exdate.toGMTString());

function checkCookie(){

waktuy=getCookie('waktux');

if (waktuy!=null && waktuy!=""){

waktu = waktuy;

}else{

waktu = waktunya;

setCookie('waktux',waktunya,7);

</script>

<script type="text/javascript">

67
 window.history.forward();

function noBack(){ window.history.forward(); }

</script>

<?php

if(@$_SESSION['siswa']) { ?>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1" />

<title>Ujian Online E-Learning</title>

<link href="style/assets/css/bootstrap.css" rel="stylesheet" />

<link href="style/assets/css/font-awesome.css" rel="stylesheet" />

<link href="style/assets/css/style.css" rel="stylesheet" />

<style type="text/css">

.mrg-del {

margin: 0;

padding: 0;

</style>

68
 </head>

<body onload="init(),noBack();" onpageshow="if (event.persisted) noBack();"

onunload="keluar()">

<div class="navbar navbar-inverse set-radius-zero">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-

target=".navbar-collapse">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="./">

<img src="style/assets/img/logo.png" />

</a>

</div>

<div class="left-div">

<div class="user-settings-wrapper">

<ul class="nav">

<li class="dropdown">

69
 <a class="dropdown-toggle" data-toggle="dropdown" href="#"

aria-expanded="false">

<span class="glyphicon glyphicon-user" style="font-size:

25px;"></span>

</a>

</li>

</ul>

</div>

</div>

</div>

</div>

<div class="content-wrapper">

<div class="container">

<div class="row">

<div class="col-md-12">

<h4 class="page-head-line">Test : <u><?php echo

$data_tq['judul']; ?></u><br />Mapel : <u><?php echo $data_tq['mapel'];

?></u></h4>

</div>

</div>

<div class="row">

70
 <div class="col-md-4">

<div class="panel panel-default">

<div class="panel-heading"><b>Info <small>(Sisa waktu

Anda)</small></b></div>

<div class="panel-body">

<h3 align="center"><span

id="divwaktu"></span></h3>

</div>

</div>

</div>

<div class="col-md-8">

<form action="inc/proses_soal.php" method="post">

<?php

$sql_soal_pilgan = mysqli_query($db, "SELECT * FROM

tb_soal_pilgan WHERE id_tq = '$id_tq' ORDER BY rand()") or die ($db->error);

if(mysqli_num_rows($sql_soal_pilgan) > 0)

?>

<div class="panel panel-default">

<div class="panel-heading"><b>Soal Pilihan Ganda</b></div>

<div class="panel-body">

<div class="table-responsive">

71
 <?php

while($data_soal_pilgan =

mysqli_fetch_array($sql_soal_pilgan)) { ?>

<table class="table">

<tr>

<td

width="10%">( <?php echo $no++; ?> )</td>

<td><b><?php echo

$data_soal_pilgan['pertanyaan']; ?></b></td>

</tr>

<?php if($data_soal_pilgan['gambar'] != '') { ?>

<tr>

<td></td>

<td>

<img width="220px"

src="admin/img/gambar_soal_pilgan/<?php echo $data_soal_pilgan['gambar'];

?>" />

</td>

</tr>

<?php } ?>

<tr>

<td></td>

<td>

72
 <div class="radio mrg-del">

<label>

<input type="radio"

name="soal_pilgan[<?php echo $data_soal_pilgan['id_pilgan']; ?>]" value="A" />

A. <?php echo $data_soal_pilgan['pil_a']; ?>

</label>

</div>

</td>

</tr>

<tr>

<td></td>

<td>

<div class="radio mrg-del">

<label>

<input type="radio"

name="soal_pilgan[<?php echo $data_soal_pilgan['id_pilgan']; ?>]" value="B" />

B. <?php echo $data_soal_pilgan['pil_b']; ?>

</label>

</div>

</td>

</tr>

<tr>

<td></td>

73
 <td>

<div class="radio mrg-del">

<label>

<input type="radio"

name="soal_pilgan[<?php echo $data_soal_pilgan['id_pilgan']; ?>]" value="C" />

C. <?php echo $data_soal_pilgan['pil_c']; ?>

</label>

</div>

</td>

</tr>

<tr>

<td></td>

<td>

<div class="radio mrg-del">

<label>

<input type="radio"

name="soal_pilgan[<?php echo $data_soal_pilgan['id_pilgan']; ?>]" value="D" />

D. <?php echo $data_soal_pilgan['pil_d']; ?>

</label>

</div>

</td>

</tr>

<tr>

74
 <td></td>

<td>

<div class="radio mrg-del">

<label>

<input type="radio"

name="soal_pilgan[<?php echo $data_soal_pilgan['id_pilgan']; ?>]" value="E" />

E. <?php echo $data_soal_pilgan['pil_e']; ?>

</label>

</div>

</td>

</tr>

</table>

<?php

} ?>

<input type="hidden" name="jumlahsoalpilgan"

value="<?php echo mysqli_num_rows($sql_soal_pilgan); ?>" />

</div>

</div>

</div>

<?php

75
 $sql_soal_essay = mysqli_query($db, "SELECT * FROM

tb_soal_essay WHERE id_tq = '$id_tq' ORDER BY rand()") or die ($db->error);

if(mysqli_num_rows($sql_soal_essay) > 0) {

?>

<div class="panel panel-default">

<div class="panel-heading"><b>Soal Essay</b></div>

<div class="panel-body">

<div class="table-responsive">

<?php

while($data_soal_essay =

mysqli_fetch_array($sql_soal_essay)) { ?>

<table class="table">

<tr>

<td width="10%">( <?php echo $no2++; ?> )</td>

<td><b><?php echo $data_soal_essay['pertanyaan'];

?></b></td>

</tr>

<?php if($data_soal_essay['gambar'] != '') { ?>

<tr>

<td></td>

<td>

76
 <img width="220px"

src="admin/img/gambar_soal_essay/<?php echo $data_soal_essay['gambar']; ?>"

/>

</td>

</tr>

<?php } ?>

<tr>

<td>Jawab</td>

<td>

<textarea name="soal_essay[<?php echo

$data_soal_essay['id_essay']; ?>]" class="form-control" rows="3"></textarea>

</td>

</tr>

</table>

<?php

} ?>

</div>

</div>

</div>

<?php

} ?>

77
 <input type="hidden" name="id_tq" value="<?php echo $id_tq; ?>"

/>

<div class="panel panel-default">

<div class="panel-heading">

<div>

<a id="selesai" class="btn btn-info">Selesai</a>

<input type="reset" value="Reset Jawaban" class="btn btn-

danger" />

</div>

<div id="konfirm" style="display:none; margin-top:15px;">

Apakah Anda yakin sudah selesai mengerjakan soal dan akan

mengirim jawaban? &nbsp; <input onclick="selesai();" type="submit" id="kirim"

value="Ya" class="btn btn-info btn-sm" />

</div>

<script type="text/javascript">

$("#selesai").click(function() {

$("#konfirm").fadeIn(1000);

});

</script>

</div>

</div>

</form>

78
 </div>

</div>

</div>

</div>

<footer>

<div class="container">

<div class="row">

<div class="col-md-12">

&copy; <?= date('Y') ?> E-Learning || Develop By Budi Sanjaya

</div>

</div>

79
 BAB V

KESIMPULAN DAN SARAN

5.3 Kesimpulan

Kesimpulan dari skripsi yang berjudul: “Aplikasi E-Learning

Berbasis Web Pada Mata Pelajaran Multimedia Smk Negeri 1 Tapalang”

adalah dengan adanya Sistem Pembelajaran Multimedia Online Berbasis

WEB dapat membantu dalam proses belajar dan memberi kemudahan pada

guru dan admin dalam melakukan proses belajar mereka serta memberi

kemudahan dalam penyajian laporan.

5.4 Saran

Dalam pembuatan Aplikasi E-Learning Berbasis Web Pada Mata

Pelajaran Multimedia Smk Negeri 1 Tapalang ini masih banyak hal yang

dapat dikembangkan, seperti, Sistem pembelajaran yang sudah dibangun

bisa dikembangkan ke arah jaringan client server sehingga bisa

mempercepat proses mengajar dan pemberian soal/kuis pada siswa.

Demikian saran yang dapat penulis berikan, semoga saran tersebut bisa

dijadikan sebagai bahan masukan untuk penelitian berikutnya.

80
 DAFTAR PUSTAKA

Ariani, d. (2018). Jurnal pembelajaran inovatif komponen pengembangan e-learning.

Blog, e. B., & weni, d. M. (2008). Meningkatkan hasil belajar siswa dengan
pengembangan media pembelajaran.
Journal, n.d.)aktivitas, v., organ, s., berbasis, t., & dan, w. E. B. (n.d.). Visualisasi
aktivitas sistem organ tubuh berbasis web dan multimedia : aplikasi e-
learning sarifuddin madenda, tommy f. R.
Elektro, p. T., elektro, t., teknik, f., surabaya, u. N., hapsari, r., & agustin, p. (2015).
Pengembangan media pembelajaran berbasis e-learning pada mata pelajaran
teknik listrik di smk negeri 3 surabaya rohma eka indri ahadiah abstrak.
Elektro, p. T., teknik, f., surabaya, u. N., elektro, j. T., teknik, f., & surabaya, u. N.
(2013). Pengembangan media videoscribe berbasis e-learning pada mata
pelajaran komunikasi data dan interface di smk sunan
Hanum, n. S. (2013). Keefektifan e-learning sebagai media pembelajaran ( studi
evaluasi model pembelajaran e-learning smk telkom sandhy putra purwokerto
Harahap, p. (n.d.). Membangun sistem e - learning berbasis. e-learning instructional
model insmk telkom sandhy putra.
Hartanto, w. (n.d.). Penggunaan e-learning sebagai media pembelajaran. ) the
effectiveness of e-learning as instructional media ( evaluation study of
Journal, i. I. (n.d.). Ijis indonesian journal on information system. drajat lamongan tri
sutrisno yudha anggana agung abstrak.
Kuliah, m., operasi, s., & android, b. (2013). No title.
Maret, u. S., cahyaningsih, i. J., maret, u. S., purnomo, a., maret, u. S., hartono, r.,
maret, u. S., alim, s., bawono, t., & maret, u. S. (2017). Pengembangan
aplikasi e-learning sekolah menengah atas.
Medan, u. N. (2009). Layanan pembelajaran berbasis e-learning. Majalah ilmiah
pembelajaran.
Mojokerto, n. J., widiantoro, b., elektro, t., teknik, f., & surabaya, u. N. (n.d.).
Pengembangan media pembelajaran e-learning berbasis schoology pada
kompetensi dasar memahami model atom bahan semikonduktor di smkn lusia
rakhmawati abstrak abstract.
No title. (2015).
Pardomuan, g. N., & agustini, k. (2017). Desain sistem personalisasi e-learning
berbasis felder silverman model untuk materi animasi 2 dimensi di smk negeri
singaraja. September.

81
Pendidikan, s. N., moroki, i., & wauran, a. S. (2019). Perancangan e-learning untuk
pelajaran matematika. 44–51.
Vol, j. S. (2014). No title. 8(1), 13–29.
(aktivitas et al., n.d.; ariani, 2018; blog & weni, 2008; elektro et al., 2015, 2013;
hanum, 2013; harahap, n.d.; kuliah et al., 2013; maret et al., 2017; mojokerto
et al., n.d.; no title, 2015; pardomuan & agustini, 2017; pendidikan et al.,
2019; vol, 2014)(hartanto, n.d.; medan, 2009)

82