4
E-learning berasal dari dua kata yaitu “e” yang merupakan kependekan dari
“electronic” dan “learning” atau “pembelajaran”. Jadi e-learning adalah pembelajaran yang menggunakan jasa elektronika [4]. E-learning dibedakan
menjadi dua jenis, yaitu Synchronous dan Asynchronous. Synchronous Training adalah tipe pelatihan dimana guru dan murid berada pada waktu yang sama dalam
suatu proses pembelajaran, sehingga interaksi antara guru dan murid sangat dimungkinkan. Intinya, e-learning jenis ini mirip dengan pembelajaran dikelas-
kelas seperti biasa, hanya saja kelasnya bersifat maya. Salah satu contohnya: penggunaan web conference dalam proses pembelajaran.
Asynchronous Training Asynchronous Training adalah tipe pelatihan dimana guru dan murid berada pada waktu yang berbeda dalam suatu proses
pembelajaran, sehingga siswa dapat mengakses materi dan melakukan kegiatan pembelajaran setiap saat. E-learning jenis ini memang tidak memungkinkan
interaksi langsung antara siswa dengan pengajar seperti halnya Synchronous Training, namun interaksi tersebut masih dapat dimungkinkan dengan cara tidak
langsung seperti misalnya dengan email ataupun forum [6].
3. Metode Penelitian
Penelitian ini dilakukan dan diselesaikan melalui tahapan penelitian yang terbagi dalam empat tahapan, yaitu analisis kebutuhan dan pengumpulan data,
perancangan sistem, implementasi dan pengujian aplikasi serta analisis hasil pengujian, dan yang terakhir adalah penulisan laporan hasil penelitian.
Gambar 1 Tahapan Penelit ian [7]
Tahapan penelitian pada Gambar 1 dapat dijelaskan sebagai berikut : Tahap pertama merupakan tahapan analisis kebutuhan dan pengumpulan data, yakni
melakukan analisa terhadap apa saja yang dibutuhkan untuk membuat sebuah situs e-learning berbasis Responsive Web Design. Penelitian diawali dengan
melakukan wawancara terhadap Teguh Sugiarto selaku wakil kepala sekolah SMPN 3 Salatiga dan pembagian kuesioner. Dari kedua proses tersebut didapati
bahwa selama ini penguna smartphone ketika mengakses sebuah situs web masih
5
merasa kurang nyaman, dikarenakan isi dari tampilan web tersebut kecil sehingga pengguna perlu melakukan zoom-in dan scroll-horizontal seperti web profil dari
SMPN 3 Salatiga. Selanjutnya proses pembelajaran disekolah masih manual, salah satunya pada pemberian tugas pekerjaan rumah maupun materi siswa
masih harus menulis manual dikertas yang diberikan oleh pengajar melalui media lcdpapan tulis. Selain melakukan wawancara, juga dilakukan studi literatur untuk
mendapatkan data-data valid untuk mengimplementasikan Responsive Web Design pada e-learning SMPN 3 Salatiga. Pustaka yang diambil sebagai referensi
berasal dari jurnal-jurnal penelitian sebelumnya tentang e-learning, jurnal- jurnal dengan topik Responsive Web Design dan e-learning.
Tahap kedua adalah perancangan sistem yang meliputi perancangan proses
menggunakan metode Waterfall terdiri dari diagram Unified Modelling Language UML, perancangan database serta perancangan antarmuka berbasis Responsive
Web Design.
Gambar 2 Pe modelan Waterfall [8]
Gambar 2 adalah perancangan metodologi waterfall. Pada tahapan analisis kebutuhan, dilakukan pengumpulan kebutuhan secara lengkap kemudian
dianalisis dan didefinisikan kebutuhan yang harus dipenuhi oleh aplikasi yang akan dibangun.
Pada tahapan desain sistem dan perangkat lunak akan dilakukan perancangan tampilan user interface berbasis Responsive Web Design, dan
perancangan desain sistem. Tahapan Implementasi dan unit pengujian merupakan tahapan penerapan design sistem ke dalam aplikasi. Bentuk implementasi dari
sistem bisa berupa penulisan program dan pembuatan basis data serta dokumentasi setelah aplikasi selesai dibuat. Tahapan integrasi dan uji coba sistem
adalah tahapan untuk melakukan uji coba sistem secara menyeluruh. Tahapan operasi dan pemeliharaan merupakan langkah terakhir dari metode waterfall yaitu
pemeliharaan sistem dengan tujuan memantau kegunaan dari sistem dan proses sistem secara periodik sesuai dengan kebutuhan user yang semakin berkembang.
Bahasa pemodelan yang digunakan dalam perancangan sistem aplikasi adalah Unified Modeling Language UML. UML adalah notasi grafis berupa
meta- model, yang membantu pendeskripsian dan desain sistem perangkat lunak, khususnya sistem yang dibangun menggunakan pemograman berorientasi objek
[9]. Use case diagram menjelaskan keseluruhan kerja sistem serta merepresentasikan interaksi antara aktor-aktor dengan sistem aplikasi yang akan
dibangun serta menggambarkan fungsionalitas yang dapat diberikan sistem
6
kepada user. Use case diagram dari sistem e-learning ini dapat dilihat pada Gambar 3.
Gambar 3 Use Case Diagram E-learning
Gambar 3 merupakan use case diagram e-learning terdapat 3 aktor, diantaranya: siswa, pengajar dan administrator. Seorang siswa memiliki hak akses
mengolah forum seperti membuat thread, menghapus thread dan mengedit thread, selanjutnya dapat download materi, download tugas, serta mengikuti tes
yang diberikan pada pengajar. Pada hak akses seorang pengajar dapat mengolah forum seperti mengedit thread, membuat thread, selanjutnya dapat mengolah
tugas seperti meng-upload tugas, menghapus tugas, meng-edit tugas, setelah itu dapat mengolah materi seperti menghapus materi, meng-edit materi, meng-upload
materi. Pengajar juga dapat mengolah tes seperti menghapus tes, meng-edit tes, menambah soal tes dan melihat nilai tes. Untuk hak akses seorang administrator
dapat memiliki hak akses seperti layaknya pengajar.
Gambar 4 Activity Diagram Pengaksesan Aplikasi
7
Gambar 4 menggambarkan bagaimana tampilan situs e-learning dari SMPN 3 Salatiga jika ditinjau dari segi perangkat yang digunakan. User yang masuk
pada situs, sebelumnya situs akan mengecek browser dari perangkat apakah sudah mendukung dengan CSS3 media-query dan flexible image, jika mendukung
maka kemudian akan diperiksa jenis perangkat yang digunakan oleh user. Setelah itu, aplikasi akan menyesuaikan layar tampilan dari situs tersebut berdasarkan
rancangan Responsive Web Design yang diterapkan sesuai dengan jenis perangkat yang digunakan oleh user. Salah satu contohnya jika membuka menggunakan
smartphone, tampilan desain yang akan ditampilkan yaitu smartphone. Jika browser perangkat tidak mendukung CSS3 maka tampilan desain yang
ditampilkan berantakan, salah satu contohnya gambar tidak telihat secara optimal.
Gambar 5 Sequence Diagram Siswa Mengikut i Tes
Gambar 5 merupakan keterangan sequence diagram siswa mengikuti tes
dimana pada aktor siswa harus memilih tes terlebih dahulu pada view daftar tes, selanjutnya setelah sudah memilih tes, view akan memangil fungsi getTes pada
controller yang didalam fungsi controller tersebut terdapat pemanggilan fungsi selectTest, setelah itu data tes akan ditampilkan.
Gambar 6 Sequence Diagram Membuat Thread Diskusi
8
Gambar 6 merupakan keterangan sequence diagram siswa membuat thread
diskusi dimana pada aktor siswa harus memasukan data thread terlebih dahulu pada view tambahkan thread, selanjutnya akan memangil fungsi savedataThread
pada controller yang didalam fungsi controller tersebut terdapat pemanggilan fungsi insertThread, setelah itu data akan tersimpan.
Gambar 7 Sequence Diagram Membalas Thread Diskusi
Gambar 7 merupakan keterangan sequence diagram siswa membalas thread
diskusi dimana pada aktor siswa harus memasukan data thread komentar terlebih dahulu pada view tambahkan komentar, selanjutnya akan memangil fungsi
saveDataThread pada controller yang didalam fungsi controller tersebut terdapat pemanggilan fungsi insertComment, setelah itu data komentar thread
akan tersimpan.
Gambar 8 Sequence Diagram Pengajar Menambahkan Materi
Gambar 8 merupakan keterangan sequence diagram pengajar dalam
menambahkan materi, dimana pada aktor pengajar harus memasukan data materi terlebih dahulu pada view tambahkan materi, selanjutnya akan memangil fungsi
saveDataMateri pada controller yang didalam fungsi controller tersebut terdapat pemanggilan fungsi insertMateri, setelah itu data materi akan tersimpan.
9
Gambar 9 Sequence Diagram Pengajar Menambahkan Tugas
Gambar 9 merupakan keterangan sequence diagram pengajar dalam
menambahkan tugas, dimana pada aktor pengajar harus memasukan data tugas terlebih dahulu pada view tambahkan tugas, selanjutnya akan memangil fungsi
saveDataMateri pada controller yang didalam fungsi controller tersebut terdapat pemanggilan fungsi insertTugas, setelah itu data tugas akan tersimpan.
Gambar 10 Class Diagram E-Learning SMPN 3 Salat iga
10
Pada gambar 10 merupakan gambar class diagram dari e-learning SMPN 3 Salatiga yang terbagi menjadi 3 bagian, yaitu model, view dan controller yang
saling berhubungan. Salah satu contohnya adalah materiUI yang berhubungan dengan materi controller dimana hubunganya One to One, jadi satu halaman view
materi dapat memakai satu fungsi materi controller. Hubungan materi controller dan materi entity adalah One to Many, dimana satu fungsi controller dapat
memakai banyak fungsi pada materi entity.
Gambar 11 Rancangan User Interface Da ftar Thread
Gambar 11 merupakan sebuah perancangan halaman user interface thread berbasis responsive web design untuk semua jenis user, dimana perancangan
halaman ini terbagi menjadi 3 bagian. Pertama 1: merupakan gambar tampilan untuk layar minimal 1024 pixel. Kedua 2: merupakan gambar tampilan untuk
layar maksimal 1023 pixel. Ketiga 3; merupakan gambar tampilan untuk layar maksimal 480 pixel. Pada halaman daftar thread ini terdapat header yang berupa
informasi tanggal, informasi user, logo, nama SMP serta alamat. Selanjutnya pada bagian menu terdapat menu management forum, materi, tugas, tes, gambar dan
layanan. Pada menu management forum, terdiri dari 3 submenu, yaitu: daftar thread, buat thread dan thread saya. Pada menu management materi hanya
terdapat 1 submenu, yaitu: daftar materi sama halnya dengan menu management tugas. Selanjutnya, pada menu management tes terdapat 2 submenu, yaitu: daftar
tes dan nilai tes. Pada menu management gambar terdapat 2 submenu, yaitu: tambah gambar dan daftar gambar. Pada menu management layanan terdapat 2
submenu, yaitu: ubah password dan ubah foto.
Pada isi konten terdapat tabel yang dimana terdapat 6 kolom, yaitu: kolom nomor, thread, komentar terakhir, dibalas,
dilihat dan detail. Tetapi, jika diakses melalui ukuran layar maksimal 480 pixel maka isi konten hanya terlihat 3 kolom saja, yaitu: kolom nomor, thread dan
detail. Pada bagian terakhir, yaitu bagian footer terdapat informasi dari kepemilikan website.
11
Gambar 12 Rancangan User Interface Da ftar Tugas
Gambar 12 merupakan sebuah perancangan halaman user interface daftar tugas berbasis responsive web design untuk jenis user siswa, dimana perancangan
halaman ini terbagi menjadi 3 bagian. Pertama 1: merupakan gambar tampilan untuk layar minimal 1024 pixel. Kedua 2: merupakan gambar tampilan untuk
layar maksimal 1023 pixel. Ketiga 3; merupakan gambar tampilan untuk layar maksimal 480 pixel. Pada halaman daftar thread ini terdapat header yang berupa
informasi tanggal, informasi user, logo, nama SMP serta alamat. Selanjutnya pada bagian menu terdapat menu management forum, materi, tugas, tes, gambar dan
layanan. Pada menu management forum, terdiri dari 3 submenu, yaitu: daftar thread, buat thread dan thread saya. Pada menu management materi hanya
terdapat 1 submenu, yaitu: daftar materi sama halnya dengan menu management tugas. Selanjutnya, pada menu management tes terdapat 2 submenu, yaitu: daftar
tes dan nilai tes. Pada menu management gambar terdapat 2 submenu, yaitu: tambah gambar dan daftar gambar. Pada menu management layanan terdapat 2
submenu, yaitu: ubah password dan ubah foto.Pada isi konten terdapat tabel yang dimana terdapat 7 kolom, yaitu: kolom nomor, Mata pelajaran, kategori, tanggal
upload, berkas, pengajar, dan download. Tetapi, jika diakses melalui ukuran layar maksimal 480 pixel maka isi konten hanya terlihat 4 kolom saja, yaitu: nomor,
kolom mata pelajaran, kategori dan download. Pada bagian terakhir, yaitu bagian footer terdapat informasi dari kepemilikan website.
Gambar 13 Rancangan User Interface Mengikuti Tes
Gambar 13 merupakan sebuah perancangan halaman user interface ikut tes berbasis responsive web design untuk jenis user siswa, dimana perancangan
halaman ini terbagi menjadi 3 bagian. Pertama 1: merupakan gambar tampilan untuk layar minimal 1024 pixel. Kedua 2: merupakan gambar tampilan untuk
12
layar maksimal 1023 pixel. Ketiga 3; merupakan gambar tampilan untuk layar maksimal 480 pixel. Pada halaman daftar thread ini terdapat header yang berupa
informasi tanggal, informasi user, logo, nama SMP serta alamat. Selanjutnya pada bagian menu terdapat menu management forum, materi, tugas, tes, gambar dan
layanan. Pada menu management forum, terdiri dari 3 submenu, yaitu: daftar thread, buat thread dan thread saya. Pada menu management materi hanya
terdapat 1 submenu, yaitu: daftar materi sama halnya dengan menu management tugas. Selanjutnya, pada menu management tes terdapat 2 submenu, yaitu: daftar
tes dan nilai tes. Pada menu management gambar terdapat 2 submenu, yaitu: tambah gambar dan daftar gambar. Pada menu management layanan terdapat 2
submenu, yaitu: ubah password dan ubah foto. Pada isi konten terdapat informasi tes yaitu informasi tipe ulangan, durasi waktu, mata pelajaran dan kelas. Pada
bagian terakhir, yaitu bagian footer terdapat informasi dari kepemilikan website.
Tahap keempat tahap implementasi dan pengujian serta analisis hasil pengujian akan dibahas pada bagian bab 4 yaitu hasil dan pembahasan. Tahap
kelima adalah melakukan penulisaan laporan berupa hasil penelitian yang dilakukan mulai dari saat penelitian dilakukan.
4. Hasil dan Pe mbahasan
