1
1. Pendahuluan
Saat ini sudah banyak orang melakukan pengaksesan internet tidak hanya melalui penggunaan komputer saja, tetapi juga melalui berbagai macam device,
salah satu contohnya penggunaan smartphone. Dengan keadaan yang seperti ini, mau tidak mau pemilik website harus memiliki website yang bisa diakses melalui
beberapa device tertentu. Berdasarkan data dari penelitian Ni elsen’s Managing
Director, Konsumen di Asia Tenggara dengan cepat mengadopsi teknologi baru seperti smartphone dan tablet yang dapat menyediakan akses internet di mana
saja. 48 pengguna internet di Indonesia mengakses internet melalui handphone dan selain melalui handphone, terdapat 13 pengguna internet di Indonesia yang
mengakses internet melalui perangkat mobile non handphone seperti tablet. Angka yang cukup besar ini memperlihatkan seberapa besar tinggi akses internet
mobile di Indonesia. Diprediksikan dalam 12 bulan kedepan pengguna internet di Indonesia akan mengakses internet melalui handphone meningkat sebesar 53
dan 30 mengaksesnya melalui tablet [1].
Tampilan website yang muncul biasanya tidak beraturan karena tidak sesuai dengan ukuran layar tampilan dan biasanya harus melakukan scroll kesamping
untuk mendapatkan hasil yang optimal. Permasalahan yang terjadi adalah semua perangkat tersebut memiliki layar dengan resolusi yang berbeda-beda, sehingga
jika pengguna membuka sebuah situs di dalam smartphone dengan layar yang kecil, maka isi content yang ditampilkan akan terlihat kecil sulit dibaca atau jika
ingin tampilan content terlihat, mungkin pengguna akan direpotkan dengan aktivitas zoom-in dalam membaca content, disinilah dibutuhkan solusi untuk
menangani masalah tersebut. Responsive Web Design merupakan suatu teknik perancangan tampilan website yang akan menyesuaikan layar browser untuk
menampilkan sebuah website yang terdiri dari 3 fitur yaitu flexible grid, flexible image dan media queries. flexible grid ditujukan agar width dan layout pada suatu
situs dapat beradaptasi secara otomatis dan fleksibel mengikuti width dari device yang digunakan. Pada bagian ini semua lebar elemen yang bertipe pixel px akan
diubah menjadi ekstensi persen, flexible image ditujukan agar dapat mesinkronisasikan ukuran gambar yang besar agar tidak dapat melewati batas
kontainernya. Komponen ini tidak hanya ditujukan untuk gambar, tetapi objek lainnya seperti audio, video. Media queries ditujukan agar tampilan yang
dirancang dapat mengikuti ukuran resolusi browser device [2].
Responsive Web Design merupakan teknik yang dapat membuat proses perancangan aplikasi dan situs web untuk berbagai jenis perangkat menjadi lebih
mudah. Hal ini dikarenakan bahwa dengan menggunakan responsive design, perancang dimungkinkan untuk dapat menerapkan solusi bagi berbagai resolusi
layar, density, dan rasio aspek pada banyak jenis perangkat [3].
Pendidikan merupakan salah satu jendela pembelajaran yang dilakukan dan bertujuan untuk mengasah aspek kognitif dan intelektual yang dimiliki agar lebih
sempurna mendekati kodrat manusia yang ideal. Sejalan dengan perkembangan teknologi informasi yang berkembang pesat, maka peran guru serta pihak pengajar
semakin dibutuhkan untuk menghadirkan sebuah sistem pembelajaran yang menggunakan media elektronik atau lebih dikenal dengan istilah e-learning. E-
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