2
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].
S MPN 3 Salatiga merupakan salah satu sekolah Madrasah yang
mengandalkan kinerja pendidikannya untuk mendidik siswa-siswi menuju masa depan yang jauh lebih berprestasi. Berdasarkan hasil kuesioner yang dibagikan
kepada 25 orang siswa di SMPN 3 Salatiga, didapati sudah 88 memiliki smartphone dan sebanyak 70 siswa menggunakanya untuk mengakses website,
tetapi dalam mengakses website melalui smartphone 60 siswa mengalami kesulitan, karena tulisan terlihat kecil dan harus melakukan zoom-in. Efisiensi
pembelajaran siswa di SMPN 3 Salatiga masih kurang efektif, dikarenakan Interaksi antara siswa dan guru mengenai materi pembelajaran masih minim,
padahal terdapat banyak siswa yang masih kurang paham terhadap materi yang disampaikan oleh pengajar tetapi malu untuk bertanya. Siswa masih harus menulis
secara manual dikertas untuk mendapatkan materi dan tugas yang diberikan oleh pengajar melalui media lcdproyektor maupun papan tulis, selain itu siswa juga
masih melakukan tindak kecurangan dalam pelaksanaan tes.
Rumusan masalah dalam penelitian ini adalah bagaimana menerapkan suatu teknologi Responsive Web Design yang secara otomatis dapat beradaptasi pada
perangkat tanpa harus membuat lebih dari satu program yang diimplementasikan pada e-learning SMPN 3 Salatiga.
Penelitian ini bertujuan untuk menganalisis sistem belajar-mengajar di SMPN 3 Salatiga, merancang aplikasi e-learning yang sesuai bagi SMPN 3
Salatiga untuk
menunjang proses
pembelajaran yang
ada dan
mengimplementasikan rancangan sistem ke dalam aplikasi. Penelitian ini bermanfaat dalam mempermudah siswa untuk mendapatkan materi dan tugas
tanpa terbatas jarak dan waktu, memberikan wadah tempat bertemunya guru dan murid di luar sekolah. Batasan masalah dari penelitian ini adalah tidak
membandingkan aplikasi cms e-learning seperti Moodle, library javascript yang digunakan ialah jquery serta tidak membahas keamanan konten dari website.
2. Kajian Pustaka
Dalam penelitian pertama yang berjudul “Microlab E-learning Berbasis
Web ” pada tugas akhir ini dibahas mengenai aplikasi yang digunakan untuk
mempermudah pengajar dalam mengawasi serta memberikan materi pembelajaran yang diberikan kepada siswa. Kelebihan dari penelitian ini dapat diakses oleh
pengunjung umum, materi pdf bisa dilihat tanpa harus di download, menampilkan video, terdapat fasilitas mading untuk mengapresiasikan bakat siswa
serta tes online, tetapi belum sepenuhnya didukung untuk diakses dari telepon seluler [4].
Dalam penelitian kedua yang berjudul “Web Responsive Design untuk Situs
Berita Menggunakan Framework CodeIgniter ” skripsi ini menjelaskan bagaimana
menerapkan teknologi Responsive Web Design pada sebuah situs berita, sehingga dapat diakses berbagai perangkat tetapi masih belum begitu memperhatikan
tingkat keamanan situs. [1].
3
Dari kedua penelitian tersebut dapat memberikan referensi bagaimana cara mengimplementasikan teknologi Responsive Web Design pada situs e-learning
SMPN 3 Salatiga. Perbedaan penelitian ini dengan penelitian terdahulu yang pertama adalah pada penelitian yang pertama belum menerapkan teknologi
Responsive Web Design. Sedangkan perbedaan dengan penelitian yang kedua adalah pengimplementasian teknologi Responsive Web Design pada situs berita
serta penggunaan HTML 5.
Jika dibandingan aplikasi ini dengan aplikasi moodle, untuk versi moodle 2.4 penerapan Responsive Web Design hanya diterapkan pada perangkat mobile
dan tablet. Sedangkan pada moodle 2.5 yang dirilis pada tanggal 14 mei 2013. Moodle versi 2.5 ini sudah menerapkan teknologi Responsive Web Design pada
keseluruhan sistemnya, yang dapat diakses disegala jenis perangkat.
Web Responsive Design pada dasarnya menunjukkan bahwa situs web dibuat menggunakan W3C CSS3 media dengan cairan proporsi berbasis grid,
untuk beradaptasi tata letak dengan melihat lingkungan platform dan gambar fleksibel sebagai hasilnya, pengguna di berbagai platform dan browser akan
memiliki akses ke satu sumber konten, ditata sehingga mudah dibaca dan navigasi dengan minimal mengubah ukuran, panning dan scrolling [1].
Web Responsive Design muncul dari kebingungan para web designer untuk memecahkan masalah perkembangan platform dengan variasi layar yang berbeda-
beda untuk mengakses satu konten dari halaman yang sama dengan mengutamakan tingkat kenyamanan membaca konten disetiap ukuran layar yang
berbeda. Responsive web design adalah sebuah cara agar hasil desain yang dibuat dapat menyesuaikan lebar maupun posisi di sebagian atau semua resolusi dari
perangkat yang digunakan. Fungsi dari media adalah untuk menetapkan browser membaca ukuran layar yang akan ditampilkan [1].
Istilah Responsive Web Design sendiri pertama kali diperkenalkan oleh Ethan Marcotte dalam bukunya yang berjudul “Responsive Web Design”. Dibahas
mengenai 3 teknik yang digunakan dalam membangun sebuah Responsive Web Design, yaitu: flexible grid layout, flexible images dan media queries. Flexible
grid yaitu sebuah konsep ukuran elemen halaman dengan pilihan satuan persen daripada satuan absolut seperti pixel atau point, flexible images yaitu sebuah
teknik mencegah agar media gambar, video, object, tidak melewati batas dari elemen container, media queries merupakan modul CSS3 memungkinkan render
konten untuk beradaptasi dengan kondisi seperti resolusi.
Sebuah media queries terdiri dari jenis media dan 1 atau lebih ekspresi. Hasil dari media queries
dinyatakan benar, jika perangkat dalam media queries sesuai maka, stylesheet yang sesuai akan diterapkan [2].
CodeIgniter merupakan framework yang akan dapat digunakan untuk pengembangan proyek pembuatan situs web dengan cara penggunaan kode
program secara manual, dengan menyediakan banyak sekali pustaka yang dibutuhkan dalam pembuatan situs web, dengan antarmuka yang sederhana dan
struktur logika untuk mengakses pustaka yang dibutuhkan. CodeIgniter membiarkan kita untuk memfokuskan diri pada pembuatan situs web dengan
meminimalkan pembuatan kode untuk berbagai tujuan pembuatan situs web [5].
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
