Institutional Repository | Satya Wacana Christian University: Perancangan Aplikasi Pembelajaran Berbasis Responsive Web Desain Studi Kasus pada Universitas Tadulako
Perancangan Aplikasi Pembelajaran Berbasis Responsive
Web Desain Studi Kasus pada Universitas Tadulako
Artikel Ilmiah
Peneliti:
James Stevan K. Songko (672009153)
Teguh Wahyono, S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen SatyaWacana
Salatiga
Desember 2014
Perancangan Aplikasi Pembelajaran Berbasis Responsive
Web Desain Studi Kasus pada Universitas Tadulako
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh gelar Sarjana Komputer
Peneliti:
James Stevan K. Songko (672009153)
Teguh Wahyono, S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Desember 2014
i
ii
iii
iv
v
vi
vii
Perancangan Aplikasi Pembelajaran Berbasis Responsive Web Design
Studi Kasus Universitas Tadulako
1)James
Stevan K. Songko, 2)Teguh Wahyono
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50711, Indonesia
1)
Email: [email protected], 2)[email protected]
Abstract
The information technology is growing as time passes starting from accessing
web pages using a desktop computer or laptop to the present using tablet devices and
smartphones. The purpose of this paper create responsive web design that can
display pages E-Learning in accordance with the screen size of the device or
platform. E-Learning is to support the implementation of the lecture Online. This can
save time teaching and learning process, reducing travel costs and train college
students to be more independent students in gaining knowledge.
Keywords: E-Learning, Responsive Web Design
Abstrak
Teknologi dan informasi semakin berkembang seiring waktu berjalan dimulai
dari mengakses halaman web menggunakan dekstop komputer ataupun laptop hingga
sekarang menggunakan perangkat tablet dan smartphone. Tujuan penulisan ini
membuat web responsive design yang dapat menampilkan halaman E-Learning
sesuai dengan ukuran layar perangkat atau platform. E-Learning ini untuk
mendukung pelaksanaan kuliah secara Online. Hal ini dapat menghemat waktu proses
belajar mengajar, mengurangi biaya perjalanan mahasiswa ke kampus dan melatih
mahasiswa lebih mandiri dalam mendapatkan ilmu pengetahuan.
Kata Kunci: E-Learning, Responsive Web Design
1)
Mahasiswa Fakultas Teknologi Informasi Program Studi Teknik Informatika, Universitas Kristen
Satya Wacana Salatiga.
2)
Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.
viii
1.
Pendahuluan
Memasuki era globalisasi saat ini, pemakaian teknologi komputer dalam
segala bidang kehidupan sehari-hari tidak akan dapat dihindari. Bahkan,
penggunaan teknologi komputer tersebut akan menjadi syarat utama untuk
menunjukkan kualitas sesuatu bidang dan menjadi modal terpenting dalam
memenangkan persaingan.
Di Universitas Tadulako sering kali timbul masalah, seperti kurang
efektifnya proses belajar mengajar di dalam kelas, keterbatasan materi kuliah
yang diperoleh oleh mahasiswa apabila sedang berhalangan untuk mengikuti
perkuliahan karena beberapa hal, dan begitu pula dari pihak pengajar sendiri.
Dengan kondisi tersebut maka Universitas Tadulako membutuhkan sebuah
sistem E-Learning yang dapat digunakan untuk mendukung pelaksanaan kuliah
secara Online. Hal ini dapat menghemat waktu proses belajar mengajar,
mengurangi biaya perjalanan mahasiswa ke kampus dan melatih mahasiswa
lebih mandiri dalam mendapatkan ilmu pengetahuan.
Penyajian sebuah sistem pembelajaran mandiri berbasis web (E-Learning)
perlu memperhatikan keberagaman perangkat yang digunakan untuk
menampilkan halaman tersebut. Tampilan pada desktop web (website) dan
mobile web mempunyai ukuran serta kemampuan yang berbeda. Responsive
Web Design adalah sebuah teknik yang digunakan untuk membuat layout web
menyesuaikan dengan tampilan device atau perangkat yang digunakan
pengunjung web baik ukuran maupun orientasi tampilan secara tegak atau
portrait dan tampilan secara mendatar atau landscape.
Kemampuan komunikasi antara satu bidang dengan bidang lainnya di
tempat yang berbeda (terpisah pada jarak yang jauh) merupakan salah satu ciri
era globalisasi. Berawal dari komputer hingga laptop lalu handphone dan
sekarang sudah banyak menggunakan tablet untuk mengakases internet.
Oleh karena itu dengan memanfaatkan E-Learning berbasis Responsive
Web Design ini diharapkan mahasiswa Universitas Tadulako lebih menguasai
dan lebih mandiri lagi dalam mendapatkan ilmu pengetahuan dan lebih
mempermudah mahasiswa Universitas Tadulako dalam melakukan aktifitas
belajar mengajar.
Dengan latar belakang seperti di atas, maka dilakukan penelitian dengan
judul Perancangan Aplikasi Pembelajaran Berbasis Responsive Web Design
Studi Kasus pada Universitas Tadulako yang bertujuan untuk membantu dalam
proses belajar mengajar secara Online dan dapat diakses diberbagai macam
platform.
2.
Tinjauan Pustaka
Pada kajian terdahulu sebagai referensi skripsi ini mengacu pada tugas
akhir dengan judul “Perencanaan Sistem E-Learning AMIK Harapan Medan”.
Pada tugas akhir tersebut dibahas tentang aplikasi untuk mempermudah pengajar
dalam mengawasi kegiatan yang dilakukan mahasiswa, dalam mengelompokkan
1
mahasiswa untuk mengerjakan tugas kelompok, serta mempermudah mahasiswa
dalam mengumpulkan tugas. Pada banyak kesibukan seorang dosen sehingga
tidak bisa selalu datang untuk mengajar atau melakukan tatap muka di kelas dan
terkadang karena adanya faktor kesehatan seorang mahasiswa terkadang tidak
dapat menghadiri kuliah dalam jangka waktu tertentu.[1]
Pada jurnal yang berjudul “Web Responsive Design Untuk Situs Berita
Menggunakan Framework Codeigniter”. Disebutkan bahwa situs berita yang
menampilkan isi berita tidak bisa mengikuti ukuran layar dari perangkat atau
platform yang digunakan oleh pengakses situs berita, perbedaan ukuran layar
yang ditampilkan oleh situs berita dengan layar platform akan menghasilkan
pembacaan berita kurang nyaman karena harus menggeser layar kesamping.
Dengan menggunakan teknologi baru yaitu web responsive design maka
tampilan layar situs berita bisa menyesuaikan dengan layar perangkat atau
platform pengakses situs berita.[2]
Pada saat sekarang sudah banyak aplikasi-aplikasi LMS (Learning
Management System) yang dapat ditemukan, salah satunya adalah Moodle. Jika
dibandingkan dengan penelitian sebelumnya, sistem E-Learning pada penelitian
kali ini adalah sistem E-Learning yang nantinya bisa diakses bukan hanya dari
komputer atau laptop saja melainkan bisa juga dari handphone. Sehingga para
mahasiswa nantinya lebih mudah lagi dalam mengakses E-Learning ini.
Sebuah pendekatan yang menunjukkan bahwa desain dan pengembangan
harus menanggapi perilaku dan lingkungan pengguna berdasarkan pada ukuran,
platform dan orientasi layar. Praktik ini meliputi penggunan perpaduan grid
fleksibel dan layout, gambar dan CSS media query. Sebagaimana pengguna saat
ini yang beralih dari laptop ke tablet, website secara otomatis harus
menyesuaikan resolusi, ukuran gambar dan kemampuan scriptingnya. Dengan
kata lain, website harus memiliki teknologi untuk secara otomatis merespon
preferensi pengguna yang didasarkan pada resolusi layar gadget yang digunakan
(komputer pc, laptop, netbook, tablet, smartphone dan mobile phone). Web
responsive design pertama kali diperkenalkan oleh Ethan Marcotte pada
artikelnya yang sangat inspiratif Web Responsive Design.
E-Learning merupakan singkatan dari Elektronic Learning, merupakan
cara baru dalam proses belajar mengajar yang menggunakan media elektronik
khususnya internet sebagai sistem pembelajarannya. E-Learning merupakan
dasar dan konsekuensi logis dari perkembangan teknologi informasi dan
komunikasi. E-Learning merupakan suatu jenis belajar mengajar yang
memungkinkan tersampaikannya bahan ajar ke siswa dengan menggunakan
media internet, intranet atau media jaringan komputer lain. [4]
Sistem yang dihasilkan dalam penelitian ini, dibangun dengan
memanfaatkan teknologi Framework Zend. Pada akhir tahun 2005 Zend
Technologies, sebuah perusahaan spesialis PHP memulai sebuah proyek untuk
meningkatkan kinerja dari PHP. Proyek itu menghasilkan 3 hasil, yaitu Eclipse
2
IDE plugin yang bernama PDT, Framework Zend dan sebuah website Zend
Developer Zone. Beberapa kelebihan yang dimiliki oleh Framework Zend:
1. Everything in the box. Di dalam Framework Zend sudah terdapat segala
sesuatu yang dibutuhkan dalam membangun suatu aplikasi berbasis web.
Antara lain modul untuk autentifikasi, searching, pembuatan dokumen PDF,
email, web services dan modul lainnya.
2. Desain yang modern. Framework Zend ditulis dalam object oriented PHP 5
menggunakan teknik perancangan modern yang dikenal sebagai design
patterns.
3. Mendukung Model View Controller (MVC). Framework Zend menggunakan
arsitektur pemrograman Model View Controller yang berguna untuk
memisahkan bagian-bagian dalam aplikasi sehingga mempermudah dalam
pengembangan dan pemeliharaan aplikasi (Gambar 1).
4. Mudah dipelajari. Framework Zend sangat modular dan sangat mudah untuk
dipelajari.
5. Didukung pustaka yang lengkap. Framework Zend merupakan framework
open source sehingga banyak sekali pustaka yang dapat dipelajari untuk
mengembangkan suatu aplikasi.
6. Mudah dikembangkan. Seperti yang sudah diketahui bahwa salah satu
keunggulan PHP adalah memberikan kemudahan dalam mengembangkan
suatu web dinamis. Begitu pula dengan Framework Zend yang dirancang
untuk memudahkan para pengembang baik pemula maupun profesional dalam
mengembangkan suatu web yang dinamis.
7. Terstruktur. Dengan dipisahkannya bagian model, view dan controller maka
dapat membuat suatu program menjadi lebih terstruktur. Hal inilah yang
memudahkan dalam mencari bugs. Keuntungan lainnya adalah saat ingin
menambahkan sebuah fitur baru pada bagian display, pihak pengembang
hanya perlu mencari file yang berhubungan dengan display logic-nya.
Framework Zend juga memungkinkan para web developer untuk membuat
kode dengan berbasis object oriented sehingga memudahkan dalam proses
maintenance.
Gambar 1 Alur Proses MVC di dalam Framework Zend [5]
3
Gambar 1 menunjukkan alur proses MVC di dalam Framework Zend. Request
dari browser diterima oleh Router, Router bertugas untuk menentukan Controller
mana yang sesuai dengan permintaan browser. Pada Request dari browser terdapat
obyek-obyek yang ikut serta dikirimkan. Obyek ini ditangani oleh Dispatcher.
Setelah Router berhasil menentukan Controller yang sesuai, maka proses diarahkan
ke Controller tersebut bersama dengan obyek-obyek hasil proses dari Dispatcher.
Oleh Controller dilakukan proses yang melibatkan Model, dan kemudian hasil proses
ditampilkan pada View, dan dikirimkan ke browser dalam bentuk Response.
Bootstrap merupakan sebuah framework CSS, yang menyediakan kumpulan
komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian
rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga
menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta
modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang
dikembangkan senada dengan komponen-komponen lainnya.
3. Metode dan Perancangan Sistem
Metode yang akan digunakan pada penelitian ini untuk perancangan sistem
adalah Prototype Model, yang merupakan metode perancangan dengan
melakukan pendekatan dari sisi kebutuhan pengguna sistem.
Gambar 2 Metode Prototype [6]
Tahap-tahap yang ada pada Gambar 2 adalah listen to customer dimana
dilakukan wawancara dengan user untuk mengumpulkan kebutuhan-kebutuhan
yang diperlukan dalam pembuatan sistem. Wawancara dilakukan dengan bapak
Prof. H. Hasan Basri, M.A., Ph.D selaku dekan fakultas keguruan dan ilmu
pendidikan untuk mendapatkan data dan kebutuhan sistem yang diperlukan. Data
yang dimaksud adalah data mahasiswa, data dosen, data matakuliah.
Berdasarkan data dan kebutuhan sistem yang telah dikumpulkan lalu
dilakukan build/revise mock-up. Tahap selanjutnya adalah melakukan customer
test-drives mock-up dimana dilakukan evaluasi oleh user terhadap sistem yang
telah dibuat. Hasil dari evaluasi yang dilakukan terdapat perubahan pada
4
tampilan web, dimana pada tampilan sebelumnya terlihat kurang menarik
sehingga diperlukan perubahan pada tampilan sistem E-Learning ini.
Berdasarkan hasil evaluasi pertama lalu dilakukan kembali listen to
customer untuk mendapatkan kebutuhan tambahan yang diperlukan oleh sistem.
Kebutuhan yang dimaksud adalah siapa saja yang dapat melakukan E-Learning
dan apa saja yang dapat dilakukan oleh pihak dosen dan mahasiswa. Berdasarkan
data yang telah dikumpulkan lalu dilakukan kembali build/revise mock-up
dimana dilakukan perancangan kembali dan melakukan perubahan pada sistem
sesuai dengan rancangan yang ada. Perubahan yang dilakukan adalah, dengan
mengubah tampilan sistem menjadi lebih menarik, menambahkan fungsi dari
pengguna yang melakukan proses E-Learning. Setelah sistem berhasil
diperbaiki, dilakukan kembali customer test-drives mock-up. User yang
melakukan evaluasi adalah dosen dan mahasiswa, dan hasil dari evaluasi yang
dilakukan terdapat perubahan fungsi test online.
Berdasarkan hasil evaluasi kedua, dilakukan kembali listen to customer
untuk mendapatkan kebutuhan yang diinginkan. Kebutuhan yang dimaksud
adalah bagaimana agar dosen dapat melihat nilai. Berdasarkan data yang telah
dikumpulkan, dilakukan kembali build/revise mock-up dimana dilakukan
perancangan kembali dan dilakukan perubahan pada sistem sesuai rancangan
yang ada. Setelah sistem berhasil diperbaiki, dilakukan kembali customer
test/drives mock-up. User yang melakukan evaluasi adalah dosen dan hasil dari
evaluasi terdapat penambahan fitur untuk mengatur user dan hak akses dari user
yang dapat menggunakan sistem.
Berdasarkan hasil evaluasi ketiga, dilakukan kembali listen to customer
untuk mendapatkan kebutuhan yang diinginkan. Kebutuhan yang dimaksud
adalah data apa saja yang terdapat pada sistem, apa yang dapat dilakukan pada
data tersebut, dan lain-lain. Berdasarkan data yang telah dikumpulkan maka
dilakukan kembali build/revise mock-up dimana dilakukan perancangan kembali
dan penambahan fitur pada sistem sesuai dengan rancangan yang ada.
Penambahan yang dilakukan adalah sebuah fungsi untuk menambah, mengubah,
dan menghapus data tersebut. Setelah sistem berhasil diperbaiki, dilakukan
kembali customer test-drives mock-up. User yang melakukan evaluasi adalah
dosen dan hasil dari evaluasi yang dilakukan tidak ada perubahan dan siap
digunakan. Berdasarkan evaluasi yang terakhir karena tidak ada perubahan maka
sistem telah selesai dibuat dan siap digunakan.
Use case diagram merupakan sebuah diagram yang mendeskripsikan
interaksi-interaksi antara sistem. Yang ditekankan oleh use case diagram adalah
apa yang diperbuat sistem, dan bukan bagaimana sistem itu melakukannya.
Dalam sistem E-Learning, use case diagram akan dibagi menjadi dua bagian
yaitu use case diagram dosen dan use case diagram mahasiswa.
5
Kumpul Tugas Matkul
Kelola Tugas Matkul
Forum
Melakukan Test Online
Mahasiswa
Lihat Materi
Dosen
Kelola Materi
Kelola Nilai
Lihat Nilai
Kelola Test
Gambar 3 Use Case Diagram User
Use Case Diagram user pada Gambar 3, memiliki dua actor yang berperan
dalam sistem yaitu dosen dan mahasiswa. Actor dosen memiliki hak untuk
mengelola informasi tentang perkuliahan, matakuliah yang yang diampu,
mengelola materi kuliah, mengelola tugas kuliah yang telah dikumpulkan
mahasiswa, mengelola test online, mengelola nilai, dan forum. Actor mahasiswa
menggambarkan mahasiswa memiliki hak akses terhadap materi kuliah.
Mahasiswa juga dapat mengelola tugas kuliah yaitu dengan melakukan upload
file tugas kuliah, kemudian mahasiswa dapat mengikuti test online, dapat melihat
nilai test online, dan forum.
Activity Diagram adalah representasi grafis dari alur kerja tahapan aktifitas.
Diagram ini mendukung pilihan tindakan, iterasi dan concurrency. Activity
diagram juga dapat menggambarkan proses paralel yang mungkin terjadi pada
saat eksekusi.
User
Sistem
Login
valid
invalid
Menu Utama
Forum
Melakukan
Test Online
Melihat Materi
Melihat Nilai
Logout
Gambar 4 Activity Diagram Mahasiswa
6
Mengumpulkan
Tugas
Gambar 4 menunjukkan activity diagram yang terjadi untuk mahasiswa.
Proses dimulai dari login dengan memasukkan username dan password
kemudian akan dicek apakah data yang dimasukkan sudah benar atau belum. Jika
salah maka akan kembali lagi ke login. Jika benar maka akan diarahkan ke
halaman utama.
Class Diagram adalah suatu diagram yang memperlihatkan atau
menampilkan struktur dari sebuah sistem,sistem tersebut akan menampilkan
kelas,atribut dan hubungan antara kelas dari suatu sistem yang akan dibuat.
Tujuan perancangan class diagram ini adalah untuk merepresentasikan kelaskelas perangkat lunak yang ada di dalam sistem E-Learning yang akan dibuat
.
Gambar 5 Class Diagram
Gambar 5 adalah diagram hubungan antara kelas, dimana terdapat
keterangan untuk setiap tabel yang digunakan pada aplikasi E-Learning, dalam
sebuah kelas terdapat sebuah atribut yang mewakili identitas kelas dan beberapa
fungsi.
Aplikasi ini dirancang dengan menggunakan konsep Model View Controller.
Perancangan Model View Controller pada aplikasi ini dapat dilihat pada Tabel 1,
Tabel 2, dan Tabel 3.
7
Tabel 1 Perancangan Model
Perancangan
Berisi query yang terhubung dengan tabel
banksoal untuk fungsi ambil soal, ambil Soal
by id, tampilkan daftar soal by dosen, add
question, edit question, dan hapus soal
Berisi query yang terhubung dengan tabel
daftarnilai untuk fungsi tampilkan nilai per
mahasiswa dan tampilkan nilai mahasiswa per
id ujian
Berisi query yang terhubung dengan tabel
daftarujian untuk fungsi tampilkan jadwal ujian
per mahasiswa, exam registration, dan cek
exam reg
Berisi query yang terhubung dengan tabel
jadwal ujian untuk fungsi ambil Jadwal by dd,
tampilkan jadwal ujian, tampilkan jadwal ujian
by dosen, add exam schedule, dan edit jadwal
ujian
Berisi query yang terhubung dengan tabel jenis
soal untuk fungsi ambil soal
Berisi query yang terhubung dengan tabel
logindata untuk fungsi ambil id login, add
login data, hapus login Data, dan cek login
data
Berisi query yang terhubung dengan tabel
materi untuk fungsi ambil materi per id,
tampilkan semua, tampilkan materi per dosen,
add materials, dan hapus materials
Berisi query yang terhubung dengan tabel
tugas dengan fungsi ambil tugas per id,
tampilkan semua, tampilkan tugas per dosen,
add assignments, dan hapus assignments
Berisi query yang terhubung dengan tabel
tugasmhs dengan fungsi tampilkan tugas per
dosen, tampilkan tugas per mahasiswa, add
assignments, dan hapus assignments
Berisi query yang terhubung dengan tabel user
dengan fungsi ambil user, cek register user,
tampilkan dosen, add user,
Model
Banksoal.php
Daftarnilai.php
Daftarujian.php
Jadwalujian.php
Jenissoal.php
Logindata.php
Materi.php
Tugas.php
Tugasmhs.php
User.php
Package
Dosen
Tabel 2 Perancangan View
View
Keterangan
Menampilkan halaman awal ketika
Index.phtml
login sebagai Dosen
Menampilkan form tambah materi
Addmaterials.phtml
perkuliahan
Menampilkan form tambah tugas
Addassignments.phtml
matakuliah
Assignments.phtml
Menampilkan
daftar
tugas
8
matakuliah
Forum.phtml
Materials.phtml
Matkul.phtml
Onlinetest.phtml
Studentlist.phtml
Updatequestion.phtml
Updateschedule.phtml
Index.phtml
Mahasiswa
Addassignments.phtml
Assignments.phtml
Forum.phtml
Materials.phtml
Matkul.phtml
Onlinetest.phtml
Menampilkan materi perkuliahan
Menampilkan daftar matakuliah
Menampilakan test online
Menampilkan list mahasiswa
Menampilkan
form
update
pertanyaan
Menampilkan form update jadwal
Menampilkan halaman awal ketika
login sebagai mahasiswa
Menampilkan form tambah tugas
Menampilkan tugas
Menampilkan forum
Menampilkan materi
Menampilkan matakuliah
Menampilkan online test
Tabel 3 Controller
Controller
indexController.php
Keterangan
Berisi fungsi index untuk menampilkan
halaman awal dari web. Login berfungsi agar
pengguna dapat mengakses data
Berisi fungsi tambah materi, tambah tugas
matakuliah, tambah soal test, hapus tugas
matakuliah, hapus materi, tambah schedule,
ubah schedule, lihat nilai, hapus soal test,
hapus schedule, forum
Berisi fungsi lihat materi, lihat tugas, tambah
tugas, forum, lihat test, mengikuti test
DosenController.php
MahasiswaController.php
4.
Hasil dan Pembahasan
Tiga kriteria sebuah web dikatakan responsive adalah dengan adanya Flexible
Image, Flexible Grid dan Media Query. Tetapi pada aplikasi ini tidak diperlukan
Flexible Image karena tidak memiliki banyak gambar. Hasil dari perancangan
dan implementasi sistem mengenai uji implementasi dari hasil perancangan ELearning berbasis responsive web design dijelaskan sebagai berikut.
Kode program 1 kode program implementasi flexible grid
1.
2.
3.
4.
.header { float: left;width: 100%;padding: 1% 0;}
.wrap {float: left;width: 96%; margin: 0 2%;}
.main{ float: left;width: 100%;padding: 1.5% 0; margin: 0;}
.footer{width: 100%; padding:3% 0;}
Kode program 1 merupakan penerapan flexible grid dalam user interface
halaman utama dosen. Pada baris 1 merupakan pengaturan selector class header
menu, dimana value property width diatur 100% atau setara dengan 1200 pixel
dan padding 1%. Pada baris 2 merupakan pengaturan selector class wrapp
9
dimana property width diatur 96% dan value property float di atur left. Pada
baris ke 3 selector class main value property float diatur left dan value property
width diatur 100% . pada baris ke 4 class main footer value property width diatur
100% atau setara dengan 1200 pixel
Kode program 2 kode program desain website lebar maksimal 1600 pixel
@media (max-width:1600px){
1. .tablelogin5 {float:left;width: 50%;margin:2% 25% 0;}
2. .tablelogin3 {float: left;width: 60%; margin: 2% 0 0;}
3. .bebas {width: 5%}
4.
.bebas2 {width: 7%;}.matpel {width: 17%;}
5. .pertanyaan { width: 33%;}
6.
.pilihan {width: 8%;}
7. .pilihan1 { width: 6%; }
Kode program 2 merupakan perintah untuk menampilkan desain website dalam
aturan lebar maksimal 1600 pixel. Dalam kode program tersebut pada baris 1
merupakan penulisan syarat untuk ukuran lebar browser maksimal. Pengaturan lebar
width dalam tiap masing-masing selector class berfungsi untuk menyesuaikan lebar
dari container
Gambar 6 Halaman Login pada laptop
10
Gambar 7 Halaman Login pada handphone
Gambar 6 dan Gambar 7 menunjukkan antarmuka halaman login pada laptop
maupun dari handphone, dimana User harus memasukkan username dan password
terlebih dahulu. Jika login berhasil maka akan masuk ke halaman utama, jika gagal
maka akan kembali ke halaman login. Perintah yang digunakan dapat dilihat pada
Kode Program 3.
Kode Program 3 Pengecekkan Proses Login
public function loginAction() {
1. $this->view->judul = "Login";
2. if ($this->getRequest()->isPost()) {
3. $request = $this->getRequest();
4. $nomorinduk = $request->getParam('nomorinduk');
5. $password = $request->getParam('password');
6. $role = $request->getParam('role');
7. 8. 9. 10. if (($value['role'] == "MAHASISWA") || ($role == "MAHASISWA")) {
11. $data = $authAdapter->getResultRowObject(null, 'nomorinduk');
12. $auth->getStorage()->write($data);
13. $data2 = $authAdapter2->getResultRowObject(null, 'password');
14. $auth->getStorage()->write($data2);
15. $this->_redirect('./mahasiswa/');
16. } else if (($value['role'] == "DOSEN") || ($role == "DOSEN")) {
17. $data = $authAdapter->getResultRowObject(null, 'nomorinduk');
18. $auth->getStorage()->write($data);
19. $data2 = $authAdapter2->getResultRowObject(null, 'password');
20. $auth->getStorage()->write($data2);
21.
$this->_redirect('./dosen/');
22.
}
23.
}
11
24. 25. 26. 27. }
Gambar 8 Halaman Awal Dosen pada laptop
Gambar 9 Halaman Awal Dosen pada handphone
Gambar 8 dan 9 menunjukkan antarmuka halaman setelah dosen berhasil
dalam melakukan proses login. Pada halaman ini user dapat melakukan proses
penambahan tugas matakuliah, materi kuliah, online test¸ dan forum
12
Gambar 10 Halaman Materi Dosen pada laptop
Gambar 11 Halaman Materi Dosen pada handphone
Gambar 10 dan 11 menunjukkan antarmuka halaman ketika dosen memilih
menu materi kuliah. Pada halaman ini dosen dapat melakukan proses penambahan
materi kuliah.
13
Gambar 12 Halaman Tugas pada laptop
Gambar 13 Halaman Tugas pada handphone
Gambar 12 dan Gambar 13 menunjukkan antarmuka halaman ketika dosen memilih
menu tugas kuliah. Pada halaman ini dosen dapat melakukan proses upload tugas
kuliah dan juga melalukan proses download tugas yang telah dikumpulkan oleh
mahasiswa.
14
Kode Program 4 Perintah Kumpul Tugas
1.
2.
3.
4.
5.
6.
7.
8.
9.
$id_user = $dataDosen->nomorinduk;
$dosen = new Application_Model_DbTable_User();
$this->view->assign("user", $dosen->ambilUser($id_user)); $tugas = new Application_Model_DbTable_Tugas();
$tugasmhs = new Application_Model_DbTable_Tugasmhs();
$this->view->assign('tugas', $tugas>tampilkanTugasPerDosen($dataDosen->nomorinduk));
10.
$this->view->assign('tugasmhs', $tugasmhs>tampilkanTugasPerDosen($id_user));
Kode Program 4 merupakan perintah untuk melihat tugas kuliah yang telah di upload
mahasiswa kepada dosen. Pertama diambil id mahasiswa, kemudian data yang
ditampilkan tugas sesuai id mahasiswa.
Gambar 14 Halaman Penambahan Tugas Matakuliah pada laptop
15
Gambar 15 Halaman Penambahan Tugas Matakuliah pada handphone
Gambar 14 dan 15 merupakan tampilan dari halaman tambah data tugas matakuliah,
dimana terdapat 3 text field yaitu, subject class, dan file.
Kode Program 5 Perintah Untuk Tambah Data Tugas Matakuliah
1.
2.
3.
4.
5.
6.
7.
8.
$request = $this->getRequest();
$tugas->addassignments($judultugas, $kelas, $filetugas3, $iddosen,
$tanggalupload);
$this->view->sendMessage = "Assignments successfully uploaded";
return;
$this->_redirect('/dosen/addassignments');
Kode Program 5 merupakan perintah untuk melakukan proses tambah data tugas
matakuliah. Pertama akan dikirimkan request dari setiap data yang diisikan.
Kemudian dilakukan pengisian nama tugasnya, jika sudah terisi semua maka
dipanggil fungsi yang ada pada model, yaitu tugasmhs untuk menyimpan data dan
muncul pemberitahuan bahwa tugas telah diupload.
16
Kode Program 6 Perintah untuk Menghapus data Tugas Matakuliah
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
public function deleteassignmentsAction() {
$request = $this->getRequest();
$idtugas = $request->getParam('idtugas');
$storageDosen = new Zend_Auth_Storage_Session();
$dataDosen = $storageDosen->read();
if ($dataDosen->role != "DOSEN") {
$this->_redirect('/');
$tugas = new Application_Model_DbTable_Tugas();
$tugas->hapusassignments($idtugas);
$this->_redirect('/dosen/assignments');
}
}
Kode Program 6 merupakan perintah untuk hapus data tugas. Controller
memanggil fungsi yang ada pada model tugas, kemudian fungsi yang ada pada
deleteassignmentsAction mencari data sesuai dengan id yang dipilih. Jadi data dengan
id yang dipilih akan dihapus dari database.
Gambar 16 Halaman Test Online pada laptop
17
Gambar 17 Halaman Test Online pada handphone
Gambar 16 dan Gambar 17 menunjukkan antarmuka halaman ketika dosen memilih
menu test online. Pada halaman ini dosen dapat melakukan proses penambahan soal
dan schedule test.
Pengujian berikutnya adalah pengujian responden/pengguna sistem. Pengujian
dilakukan kepada 10 responden. Pilihan jawaban pada kuesioner yang diberikan
terdiri atas 5 pilihan jawaban, antara lain: sangat setuju dengan 5 point, setuju dengan
4 point, normal dengan 3 point, tidak setuju dengan 2 point, dan sangat tidak setuju
dengan 1 point . Rating scale didapatkan dengan cara mengalikan point dari pilihan
jawaban dengan jumlah pertanyaan dan responden dapat dilihat pada Tabel 1.
Tabel 1 Rating Scale
Pilihan jawaban
Sangat Setuju
Setuju
Normal
Tidak setuju
Sangat Tidak Setuju
Rating scale
201 – 250
151 – 200
101 – 150
51 – 100
1 – 50
Untuk mendapatkan nilai masing-masing pilihan jawaban dihitung dengan
mengalikan point dari pilihan jawaban dengan jumlah pertanyaan dan responden.
Hasil pengisian dan hasil perhitungan kuesioner mahasiswa dapat dilihat pada Tabel
2 dan tabel 3
No
1
2
3
Tabel 2 Hasil Pengisian Kuisioner
Pernyataan
STS TS
N
Tampilan Web mengikuti besarnya layar
2
smartphone
Aplikasi ini dapat mempermudah dalam
4
proses belajar mengajar
Aplikasi ini mudah untuk digunakan
5
18
S
SS
8
3
3
3
2
Total
10
10
10
4
5
No
1
2
3
4
5
Aplikasi E-Learning ini bermanfaat dalam
proses belajar mengajar
Aplikasi E-Learning ini dibuat sesuai
dengan kebutuhan
3
6
1
3
3
4
S
SS
Tabel 3 Hasil Perhitungan Kuisioner
Pernyataan
STS TS
N
Tampilan Web mengikuti besarnya layar
6
smartphone
Aplikasi ini dapat mempermudah dalam
12
proses belajar mengajar
Aplikasi ini mudah untuk digunakan
15
Aplikasi E-Learning ini bermanfaat dalam
9
proses belajar mengajar
Aplikasi E-Learning ini dibuat sesuai
9
dengan kebutuhan
Total
32
12
15
12
10
24
5
12
20
10
10
Total
38
39
37
38
41
193
Berdasarkan hasil perhitungan kuesioner didapat nilai 193 yang berarti
aplikasi sudah memenuhi kebutuhan pada Fakultas Keguruan dan Ilmu Pendidikan.
Dapat disimpulkan bahwa sebagian besar responden setuju aplikasi yang dibuat
sesuai dengan kebutuhan.
5.
Simpulan
Berdasarkan penelitian, pengujian dan analisis terhadap sistem, maka dapat
diambil kesimpulan bahwa sistem ini dapat digunakan untuk membantu proses
belajar mengajar ketika dosen tidak dapat mengajar di dalam kelas. Sistem ELearning memiliki beberapa fasilitas yang dapat membantu dosen untuk
menjalankan perkuliahan seperti kelola materi kuliah, kelola tugas kuliah, dan
test online. Melalui beberapa fasilitas tersebut dosen dapat memberikan materi
kuliah, mengelola tugas kuliah mahasiswa, memberikan test online meskipun
dosen tidak bisa hadir dalam proses perkuliahan. Web yang didesain
menggunakan Responsive Web Design dapat beradaptasi dengan optimal dalam
perangkat apapun yang digunakan untuk mengaksesnya, penyesuaian ukuran web
terhadap ukuran layar perangkat yang digunakan memberikan kenyamanan
pengguna pada saat mengakses web tersebut.
6.
Daftar Pustaka
[1] Tanjung, Zulfirman, 2009, Perancangan Sistem E-Learning AMIK Harapan
Medan. Medan: Universitas Sumatera Utara
[2] Herbowo., Agus Rahmat, 2012, Web Responsive Design Untuk Situs Berita
Menggunakan Framework Codeigniter. Universitas Gunadarma
19
[3] Curteanu, Mihai, 2010, Using the Model-View-Controller for Creating
Applications for Project Management. http://www.opensourcejournal.ro/2010Volume02/number04/paper011-fullpaper.pdf. Diakses tanggal 23 Oktober 2014.
[4] Darin E. Hartley Selling E-Learning, American Society for Training and
Development. 2001
[5] Pressman, Roger, 2001. Software Engineering a Practitioner’s Approach. New
York : McGraw-Hill Higher Education.
20
Web Desain Studi Kasus pada Universitas Tadulako
Artikel Ilmiah
Peneliti:
James Stevan K. Songko (672009153)
Teguh Wahyono, S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen SatyaWacana
Salatiga
Desember 2014
Perancangan Aplikasi Pembelajaran Berbasis Responsive
Web Desain Studi Kasus pada Universitas Tadulako
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh gelar Sarjana Komputer
Peneliti:
James Stevan K. Songko (672009153)
Teguh Wahyono, S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Desember 2014
i
ii
iii
iv
v
vi
vii
Perancangan Aplikasi Pembelajaran Berbasis Responsive Web Design
Studi Kasus Universitas Tadulako
1)James
Stevan K. Songko, 2)Teguh Wahyono
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50711, Indonesia
1)
Email: [email protected], 2)[email protected]
Abstract
The information technology is growing as time passes starting from accessing
web pages using a desktop computer or laptop to the present using tablet devices and
smartphones. The purpose of this paper create responsive web design that can
display pages E-Learning in accordance with the screen size of the device or
platform. E-Learning is to support the implementation of the lecture Online. This can
save time teaching and learning process, reducing travel costs and train college
students to be more independent students in gaining knowledge.
Keywords: E-Learning, Responsive Web Design
Abstrak
Teknologi dan informasi semakin berkembang seiring waktu berjalan dimulai
dari mengakses halaman web menggunakan dekstop komputer ataupun laptop hingga
sekarang menggunakan perangkat tablet dan smartphone. Tujuan penulisan ini
membuat web responsive design yang dapat menampilkan halaman E-Learning
sesuai dengan ukuran layar perangkat atau platform. E-Learning ini untuk
mendukung pelaksanaan kuliah secara Online. Hal ini dapat menghemat waktu proses
belajar mengajar, mengurangi biaya perjalanan mahasiswa ke kampus dan melatih
mahasiswa lebih mandiri dalam mendapatkan ilmu pengetahuan.
Kata Kunci: E-Learning, Responsive Web Design
1)
Mahasiswa Fakultas Teknologi Informasi Program Studi Teknik Informatika, Universitas Kristen
Satya Wacana Salatiga.
2)
Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.
viii
1.
Pendahuluan
Memasuki era globalisasi saat ini, pemakaian teknologi komputer dalam
segala bidang kehidupan sehari-hari tidak akan dapat dihindari. Bahkan,
penggunaan teknologi komputer tersebut akan menjadi syarat utama untuk
menunjukkan kualitas sesuatu bidang dan menjadi modal terpenting dalam
memenangkan persaingan.
Di Universitas Tadulako sering kali timbul masalah, seperti kurang
efektifnya proses belajar mengajar di dalam kelas, keterbatasan materi kuliah
yang diperoleh oleh mahasiswa apabila sedang berhalangan untuk mengikuti
perkuliahan karena beberapa hal, dan begitu pula dari pihak pengajar sendiri.
Dengan kondisi tersebut maka Universitas Tadulako membutuhkan sebuah
sistem E-Learning yang dapat digunakan untuk mendukung pelaksanaan kuliah
secara Online. Hal ini dapat menghemat waktu proses belajar mengajar,
mengurangi biaya perjalanan mahasiswa ke kampus dan melatih mahasiswa
lebih mandiri dalam mendapatkan ilmu pengetahuan.
Penyajian sebuah sistem pembelajaran mandiri berbasis web (E-Learning)
perlu memperhatikan keberagaman perangkat yang digunakan untuk
menampilkan halaman tersebut. Tampilan pada desktop web (website) dan
mobile web mempunyai ukuran serta kemampuan yang berbeda. Responsive
Web Design adalah sebuah teknik yang digunakan untuk membuat layout web
menyesuaikan dengan tampilan device atau perangkat yang digunakan
pengunjung web baik ukuran maupun orientasi tampilan secara tegak atau
portrait dan tampilan secara mendatar atau landscape.
Kemampuan komunikasi antara satu bidang dengan bidang lainnya di
tempat yang berbeda (terpisah pada jarak yang jauh) merupakan salah satu ciri
era globalisasi. Berawal dari komputer hingga laptop lalu handphone dan
sekarang sudah banyak menggunakan tablet untuk mengakases internet.
Oleh karena itu dengan memanfaatkan E-Learning berbasis Responsive
Web Design ini diharapkan mahasiswa Universitas Tadulako lebih menguasai
dan lebih mandiri lagi dalam mendapatkan ilmu pengetahuan dan lebih
mempermudah mahasiswa Universitas Tadulako dalam melakukan aktifitas
belajar mengajar.
Dengan latar belakang seperti di atas, maka dilakukan penelitian dengan
judul Perancangan Aplikasi Pembelajaran Berbasis Responsive Web Design
Studi Kasus pada Universitas Tadulako yang bertujuan untuk membantu dalam
proses belajar mengajar secara Online dan dapat diakses diberbagai macam
platform.
2.
Tinjauan Pustaka
Pada kajian terdahulu sebagai referensi skripsi ini mengacu pada tugas
akhir dengan judul “Perencanaan Sistem E-Learning AMIK Harapan Medan”.
Pada tugas akhir tersebut dibahas tentang aplikasi untuk mempermudah pengajar
dalam mengawasi kegiatan yang dilakukan mahasiswa, dalam mengelompokkan
1
mahasiswa untuk mengerjakan tugas kelompok, serta mempermudah mahasiswa
dalam mengumpulkan tugas. Pada banyak kesibukan seorang dosen sehingga
tidak bisa selalu datang untuk mengajar atau melakukan tatap muka di kelas dan
terkadang karena adanya faktor kesehatan seorang mahasiswa terkadang tidak
dapat menghadiri kuliah dalam jangka waktu tertentu.[1]
Pada jurnal yang berjudul “Web Responsive Design Untuk Situs Berita
Menggunakan Framework Codeigniter”. Disebutkan bahwa situs berita yang
menampilkan isi berita tidak bisa mengikuti ukuran layar dari perangkat atau
platform yang digunakan oleh pengakses situs berita, perbedaan ukuran layar
yang ditampilkan oleh situs berita dengan layar platform akan menghasilkan
pembacaan berita kurang nyaman karena harus menggeser layar kesamping.
Dengan menggunakan teknologi baru yaitu web responsive design maka
tampilan layar situs berita bisa menyesuaikan dengan layar perangkat atau
platform pengakses situs berita.[2]
Pada saat sekarang sudah banyak aplikasi-aplikasi LMS (Learning
Management System) yang dapat ditemukan, salah satunya adalah Moodle. Jika
dibandingkan dengan penelitian sebelumnya, sistem E-Learning pada penelitian
kali ini adalah sistem E-Learning yang nantinya bisa diakses bukan hanya dari
komputer atau laptop saja melainkan bisa juga dari handphone. Sehingga para
mahasiswa nantinya lebih mudah lagi dalam mengakses E-Learning ini.
Sebuah pendekatan yang menunjukkan bahwa desain dan pengembangan
harus menanggapi perilaku dan lingkungan pengguna berdasarkan pada ukuran,
platform dan orientasi layar. Praktik ini meliputi penggunan perpaduan grid
fleksibel dan layout, gambar dan CSS media query. Sebagaimana pengguna saat
ini yang beralih dari laptop ke tablet, website secara otomatis harus
menyesuaikan resolusi, ukuran gambar dan kemampuan scriptingnya. Dengan
kata lain, website harus memiliki teknologi untuk secara otomatis merespon
preferensi pengguna yang didasarkan pada resolusi layar gadget yang digunakan
(komputer pc, laptop, netbook, tablet, smartphone dan mobile phone). Web
responsive design pertama kali diperkenalkan oleh Ethan Marcotte pada
artikelnya yang sangat inspiratif Web Responsive Design.
E-Learning merupakan singkatan dari Elektronic Learning, merupakan
cara baru dalam proses belajar mengajar yang menggunakan media elektronik
khususnya internet sebagai sistem pembelajarannya. E-Learning merupakan
dasar dan konsekuensi logis dari perkembangan teknologi informasi dan
komunikasi. E-Learning merupakan suatu jenis belajar mengajar yang
memungkinkan tersampaikannya bahan ajar ke siswa dengan menggunakan
media internet, intranet atau media jaringan komputer lain. [4]
Sistem yang dihasilkan dalam penelitian ini, dibangun dengan
memanfaatkan teknologi Framework Zend. Pada akhir tahun 2005 Zend
Technologies, sebuah perusahaan spesialis PHP memulai sebuah proyek untuk
meningkatkan kinerja dari PHP. Proyek itu menghasilkan 3 hasil, yaitu Eclipse
2
IDE plugin yang bernama PDT, Framework Zend dan sebuah website Zend
Developer Zone. Beberapa kelebihan yang dimiliki oleh Framework Zend:
1. Everything in the box. Di dalam Framework Zend sudah terdapat segala
sesuatu yang dibutuhkan dalam membangun suatu aplikasi berbasis web.
Antara lain modul untuk autentifikasi, searching, pembuatan dokumen PDF,
email, web services dan modul lainnya.
2. Desain yang modern. Framework Zend ditulis dalam object oriented PHP 5
menggunakan teknik perancangan modern yang dikenal sebagai design
patterns.
3. Mendukung Model View Controller (MVC). Framework Zend menggunakan
arsitektur pemrograman Model View Controller yang berguna untuk
memisahkan bagian-bagian dalam aplikasi sehingga mempermudah dalam
pengembangan dan pemeliharaan aplikasi (Gambar 1).
4. Mudah dipelajari. Framework Zend sangat modular dan sangat mudah untuk
dipelajari.
5. Didukung pustaka yang lengkap. Framework Zend merupakan framework
open source sehingga banyak sekali pustaka yang dapat dipelajari untuk
mengembangkan suatu aplikasi.
6. Mudah dikembangkan. Seperti yang sudah diketahui bahwa salah satu
keunggulan PHP adalah memberikan kemudahan dalam mengembangkan
suatu web dinamis. Begitu pula dengan Framework Zend yang dirancang
untuk memudahkan para pengembang baik pemula maupun profesional dalam
mengembangkan suatu web yang dinamis.
7. Terstruktur. Dengan dipisahkannya bagian model, view dan controller maka
dapat membuat suatu program menjadi lebih terstruktur. Hal inilah yang
memudahkan dalam mencari bugs. Keuntungan lainnya adalah saat ingin
menambahkan sebuah fitur baru pada bagian display, pihak pengembang
hanya perlu mencari file yang berhubungan dengan display logic-nya.
Framework Zend juga memungkinkan para web developer untuk membuat
kode dengan berbasis object oriented sehingga memudahkan dalam proses
maintenance.
Gambar 1 Alur Proses MVC di dalam Framework Zend [5]
3
Gambar 1 menunjukkan alur proses MVC di dalam Framework Zend. Request
dari browser diterima oleh Router, Router bertugas untuk menentukan Controller
mana yang sesuai dengan permintaan browser. Pada Request dari browser terdapat
obyek-obyek yang ikut serta dikirimkan. Obyek ini ditangani oleh Dispatcher.
Setelah Router berhasil menentukan Controller yang sesuai, maka proses diarahkan
ke Controller tersebut bersama dengan obyek-obyek hasil proses dari Dispatcher.
Oleh Controller dilakukan proses yang melibatkan Model, dan kemudian hasil proses
ditampilkan pada View, dan dikirimkan ke browser dalam bentuk Response.
Bootstrap merupakan sebuah framework CSS, yang menyediakan kumpulan
komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian
rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga
menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta
modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang
dikembangkan senada dengan komponen-komponen lainnya.
3. Metode dan Perancangan Sistem
Metode yang akan digunakan pada penelitian ini untuk perancangan sistem
adalah Prototype Model, yang merupakan metode perancangan dengan
melakukan pendekatan dari sisi kebutuhan pengguna sistem.
Gambar 2 Metode Prototype [6]
Tahap-tahap yang ada pada Gambar 2 adalah listen to customer dimana
dilakukan wawancara dengan user untuk mengumpulkan kebutuhan-kebutuhan
yang diperlukan dalam pembuatan sistem. Wawancara dilakukan dengan bapak
Prof. H. Hasan Basri, M.A., Ph.D selaku dekan fakultas keguruan dan ilmu
pendidikan untuk mendapatkan data dan kebutuhan sistem yang diperlukan. Data
yang dimaksud adalah data mahasiswa, data dosen, data matakuliah.
Berdasarkan data dan kebutuhan sistem yang telah dikumpulkan lalu
dilakukan build/revise mock-up. Tahap selanjutnya adalah melakukan customer
test-drives mock-up dimana dilakukan evaluasi oleh user terhadap sistem yang
telah dibuat. Hasil dari evaluasi yang dilakukan terdapat perubahan pada
4
tampilan web, dimana pada tampilan sebelumnya terlihat kurang menarik
sehingga diperlukan perubahan pada tampilan sistem E-Learning ini.
Berdasarkan hasil evaluasi pertama lalu dilakukan kembali listen to
customer untuk mendapatkan kebutuhan tambahan yang diperlukan oleh sistem.
Kebutuhan yang dimaksud adalah siapa saja yang dapat melakukan E-Learning
dan apa saja yang dapat dilakukan oleh pihak dosen dan mahasiswa. Berdasarkan
data yang telah dikumpulkan lalu dilakukan kembali build/revise mock-up
dimana dilakukan perancangan kembali dan melakukan perubahan pada sistem
sesuai dengan rancangan yang ada. Perubahan yang dilakukan adalah, dengan
mengubah tampilan sistem menjadi lebih menarik, menambahkan fungsi dari
pengguna yang melakukan proses E-Learning. Setelah sistem berhasil
diperbaiki, dilakukan kembali customer test-drives mock-up. User yang
melakukan evaluasi adalah dosen dan mahasiswa, dan hasil dari evaluasi yang
dilakukan terdapat perubahan fungsi test online.
Berdasarkan hasil evaluasi kedua, dilakukan kembali listen to customer
untuk mendapatkan kebutuhan yang diinginkan. Kebutuhan yang dimaksud
adalah bagaimana agar dosen dapat melihat nilai. Berdasarkan data yang telah
dikumpulkan, dilakukan kembali build/revise mock-up dimana dilakukan
perancangan kembali dan dilakukan perubahan pada sistem sesuai rancangan
yang ada. Setelah sistem berhasil diperbaiki, dilakukan kembali customer
test/drives mock-up. User yang melakukan evaluasi adalah dosen dan hasil dari
evaluasi terdapat penambahan fitur untuk mengatur user dan hak akses dari user
yang dapat menggunakan sistem.
Berdasarkan hasil evaluasi ketiga, dilakukan kembali listen to customer
untuk mendapatkan kebutuhan yang diinginkan. Kebutuhan yang dimaksud
adalah data apa saja yang terdapat pada sistem, apa yang dapat dilakukan pada
data tersebut, dan lain-lain. Berdasarkan data yang telah dikumpulkan maka
dilakukan kembali build/revise mock-up dimana dilakukan perancangan kembali
dan penambahan fitur pada sistem sesuai dengan rancangan yang ada.
Penambahan yang dilakukan adalah sebuah fungsi untuk menambah, mengubah,
dan menghapus data tersebut. Setelah sistem berhasil diperbaiki, dilakukan
kembali customer test-drives mock-up. User yang melakukan evaluasi adalah
dosen dan hasil dari evaluasi yang dilakukan tidak ada perubahan dan siap
digunakan. Berdasarkan evaluasi yang terakhir karena tidak ada perubahan maka
sistem telah selesai dibuat dan siap digunakan.
Use case diagram merupakan sebuah diagram yang mendeskripsikan
interaksi-interaksi antara sistem. Yang ditekankan oleh use case diagram adalah
apa yang diperbuat sistem, dan bukan bagaimana sistem itu melakukannya.
Dalam sistem E-Learning, use case diagram akan dibagi menjadi dua bagian
yaitu use case diagram dosen dan use case diagram mahasiswa.
5
Kumpul Tugas Matkul
Kelola Tugas Matkul
Forum
Melakukan Test Online
Mahasiswa
Lihat Materi
Dosen
Kelola Materi
Kelola Nilai
Lihat Nilai
Kelola Test
Gambar 3 Use Case Diagram User
Use Case Diagram user pada Gambar 3, memiliki dua actor yang berperan
dalam sistem yaitu dosen dan mahasiswa. Actor dosen memiliki hak untuk
mengelola informasi tentang perkuliahan, matakuliah yang yang diampu,
mengelola materi kuliah, mengelola tugas kuliah yang telah dikumpulkan
mahasiswa, mengelola test online, mengelola nilai, dan forum. Actor mahasiswa
menggambarkan mahasiswa memiliki hak akses terhadap materi kuliah.
Mahasiswa juga dapat mengelola tugas kuliah yaitu dengan melakukan upload
file tugas kuliah, kemudian mahasiswa dapat mengikuti test online, dapat melihat
nilai test online, dan forum.
Activity Diagram adalah representasi grafis dari alur kerja tahapan aktifitas.
Diagram ini mendukung pilihan tindakan, iterasi dan concurrency. Activity
diagram juga dapat menggambarkan proses paralel yang mungkin terjadi pada
saat eksekusi.
User
Sistem
Login
valid
invalid
Menu Utama
Forum
Melakukan
Test Online
Melihat Materi
Melihat Nilai
Logout
Gambar 4 Activity Diagram Mahasiswa
6
Mengumpulkan
Tugas
Gambar 4 menunjukkan activity diagram yang terjadi untuk mahasiswa.
Proses dimulai dari login dengan memasukkan username dan password
kemudian akan dicek apakah data yang dimasukkan sudah benar atau belum. Jika
salah maka akan kembali lagi ke login. Jika benar maka akan diarahkan ke
halaman utama.
Class Diagram adalah suatu diagram yang memperlihatkan atau
menampilkan struktur dari sebuah sistem,sistem tersebut akan menampilkan
kelas,atribut dan hubungan antara kelas dari suatu sistem yang akan dibuat.
Tujuan perancangan class diagram ini adalah untuk merepresentasikan kelaskelas perangkat lunak yang ada di dalam sistem E-Learning yang akan dibuat
.
Gambar 5 Class Diagram
Gambar 5 adalah diagram hubungan antara kelas, dimana terdapat
keterangan untuk setiap tabel yang digunakan pada aplikasi E-Learning, dalam
sebuah kelas terdapat sebuah atribut yang mewakili identitas kelas dan beberapa
fungsi.
Aplikasi ini dirancang dengan menggunakan konsep Model View Controller.
Perancangan Model View Controller pada aplikasi ini dapat dilihat pada Tabel 1,
Tabel 2, dan Tabel 3.
7
Tabel 1 Perancangan Model
Perancangan
Berisi query yang terhubung dengan tabel
banksoal untuk fungsi ambil soal, ambil Soal
by id, tampilkan daftar soal by dosen, add
question, edit question, dan hapus soal
Berisi query yang terhubung dengan tabel
daftarnilai untuk fungsi tampilkan nilai per
mahasiswa dan tampilkan nilai mahasiswa per
id ujian
Berisi query yang terhubung dengan tabel
daftarujian untuk fungsi tampilkan jadwal ujian
per mahasiswa, exam registration, dan cek
exam reg
Berisi query yang terhubung dengan tabel
jadwal ujian untuk fungsi ambil Jadwal by dd,
tampilkan jadwal ujian, tampilkan jadwal ujian
by dosen, add exam schedule, dan edit jadwal
ujian
Berisi query yang terhubung dengan tabel jenis
soal untuk fungsi ambil soal
Berisi query yang terhubung dengan tabel
logindata untuk fungsi ambil id login, add
login data, hapus login Data, dan cek login
data
Berisi query yang terhubung dengan tabel
materi untuk fungsi ambil materi per id,
tampilkan semua, tampilkan materi per dosen,
add materials, dan hapus materials
Berisi query yang terhubung dengan tabel
tugas dengan fungsi ambil tugas per id,
tampilkan semua, tampilkan tugas per dosen,
add assignments, dan hapus assignments
Berisi query yang terhubung dengan tabel
tugasmhs dengan fungsi tampilkan tugas per
dosen, tampilkan tugas per mahasiswa, add
assignments, dan hapus assignments
Berisi query yang terhubung dengan tabel user
dengan fungsi ambil user, cek register user,
tampilkan dosen, add user,
Model
Banksoal.php
Daftarnilai.php
Daftarujian.php
Jadwalujian.php
Jenissoal.php
Logindata.php
Materi.php
Tugas.php
Tugasmhs.php
User.php
Package
Dosen
Tabel 2 Perancangan View
View
Keterangan
Menampilkan halaman awal ketika
Index.phtml
login sebagai Dosen
Menampilkan form tambah materi
Addmaterials.phtml
perkuliahan
Menampilkan form tambah tugas
Addassignments.phtml
matakuliah
Assignments.phtml
Menampilkan
daftar
tugas
8
matakuliah
Forum.phtml
Materials.phtml
Matkul.phtml
Onlinetest.phtml
Studentlist.phtml
Updatequestion.phtml
Updateschedule.phtml
Index.phtml
Mahasiswa
Addassignments.phtml
Assignments.phtml
Forum.phtml
Materials.phtml
Matkul.phtml
Onlinetest.phtml
Menampilkan materi perkuliahan
Menampilkan daftar matakuliah
Menampilakan test online
Menampilkan list mahasiswa
Menampilkan
form
update
pertanyaan
Menampilkan form update jadwal
Menampilkan halaman awal ketika
login sebagai mahasiswa
Menampilkan form tambah tugas
Menampilkan tugas
Menampilkan forum
Menampilkan materi
Menampilkan matakuliah
Menampilkan online test
Tabel 3 Controller
Controller
indexController.php
Keterangan
Berisi fungsi index untuk menampilkan
halaman awal dari web. Login berfungsi agar
pengguna dapat mengakses data
Berisi fungsi tambah materi, tambah tugas
matakuliah, tambah soal test, hapus tugas
matakuliah, hapus materi, tambah schedule,
ubah schedule, lihat nilai, hapus soal test,
hapus schedule, forum
Berisi fungsi lihat materi, lihat tugas, tambah
tugas, forum, lihat test, mengikuti test
DosenController.php
MahasiswaController.php
4.
Hasil dan Pembahasan
Tiga kriteria sebuah web dikatakan responsive adalah dengan adanya Flexible
Image, Flexible Grid dan Media Query. Tetapi pada aplikasi ini tidak diperlukan
Flexible Image karena tidak memiliki banyak gambar. Hasil dari perancangan
dan implementasi sistem mengenai uji implementasi dari hasil perancangan ELearning berbasis responsive web design dijelaskan sebagai berikut.
Kode program 1 kode program implementasi flexible grid
1.
2.
3.
4.
.header { float: left;width: 100%;padding: 1% 0;}
.wrap {float: left;width: 96%; margin: 0 2%;}
.main{ float: left;width: 100%;padding: 1.5% 0; margin: 0;}
.footer{width: 100%; padding:3% 0;}
Kode program 1 merupakan penerapan flexible grid dalam user interface
halaman utama dosen. Pada baris 1 merupakan pengaturan selector class header
menu, dimana value property width diatur 100% atau setara dengan 1200 pixel
dan padding 1%. Pada baris 2 merupakan pengaturan selector class wrapp
9
dimana property width diatur 96% dan value property float di atur left. Pada
baris ke 3 selector class main value property float diatur left dan value property
width diatur 100% . pada baris ke 4 class main footer value property width diatur
100% atau setara dengan 1200 pixel
Kode program 2 kode program desain website lebar maksimal 1600 pixel
@media (max-width:1600px){
1. .tablelogin5 {float:left;width: 50%;margin:2% 25% 0;}
2. .tablelogin3 {float: left;width: 60%; margin: 2% 0 0;}
3. .bebas {width: 5%}
4.
.bebas2 {width: 7%;}.matpel {width: 17%;}
5. .pertanyaan { width: 33%;}
6.
.pilihan {width: 8%;}
7. .pilihan1 { width: 6%; }
Kode program 2 merupakan perintah untuk menampilkan desain website dalam
aturan lebar maksimal 1600 pixel. Dalam kode program tersebut pada baris 1
merupakan penulisan syarat untuk ukuran lebar browser maksimal. Pengaturan lebar
width dalam tiap masing-masing selector class berfungsi untuk menyesuaikan lebar
dari container
Gambar 6 Halaman Login pada laptop
10
Gambar 7 Halaman Login pada handphone
Gambar 6 dan Gambar 7 menunjukkan antarmuka halaman login pada laptop
maupun dari handphone, dimana User harus memasukkan username dan password
terlebih dahulu. Jika login berhasil maka akan masuk ke halaman utama, jika gagal
maka akan kembali ke halaman login. Perintah yang digunakan dapat dilihat pada
Kode Program 3.
Kode Program 3 Pengecekkan Proses Login
public function loginAction() {
1. $this->view->judul = "Login";
2. if ($this->getRequest()->isPost()) {
3. $request = $this->getRequest();
4. $nomorinduk = $request->getParam('nomorinduk');
5. $password = $request->getParam('password');
6. $role = $request->getParam('role');
7. 8. 9. 10. if (($value['role'] == "MAHASISWA") || ($role == "MAHASISWA")) {
11. $data = $authAdapter->getResultRowObject(null, 'nomorinduk');
12. $auth->getStorage()->write($data);
13. $data2 = $authAdapter2->getResultRowObject(null, 'password');
14. $auth->getStorage()->write($data2);
15. $this->_redirect('./mahasiswa/');
16. } else if (($value['role'] == "DOSEN") || ($role == "DOSEN")) {
17. $data = $authAdapter->getResultRowObject(null, 'nomorinduk');
18. $auth->getStorage()->write($data);
19. $data2 = $authAdapter2->getResultRowObject(null, 'password');
20. $auth->getStorage()->write($data2);
21.
$this->_redirect('./dosen/');
22.
}
23.
}
11
24. 25. 26. 27. }
Gambar 8 Halaman Awal Dosen pada laptop
Gambar 9 Halaman Awal Dosen pada handphone
Gambar 8 dan 9 menunjukkan antarmuka halaman setelah dosen berhasil
dalam melakukan proses login. Pada halaman ini user dapat melakukan proses
penambahan tugas matakuliah, materi kuliah, online test¸ dan forum
12
Gambar 10 Halaman Materi Dosen pada laptop
Gambar 11 Halaman Materi Dosen pada handphone
Gambar 10 dan 11 menunjukkan antarmuka halaman ketika dosen memilih
menu materi kuliah. Pada halaman ini dosen dapat melakukan proses penambahan
materi kuliah.
13
Gambar 12 Halaman Tugas pada laptop
Gambar 13 Halaman Tugas pada handphone
Gambar 12 dan Gambar 13 menunjukkan antarmuka halaman ketika dosen memilih
menu tugas kuliah. Pada halaman ini dosen dapat melakukan proses upload tugas
kuliah dan juga melalukan proses download tugas yang telah dikumpulkan oleh
mahasiswa.
14
Kode Program 4 Perintah Kumpul Tugas
1.
2.
3.
4.
5.
6.
7.
8.
9.
$id_user = $dataDosen->nomorinduk;
$dosen = new Application_Model_DbTable_User();
$this->view->assign("user", $dosen->ambilUser($id_user)); $tugas = new Application_Model_DbTable_Tugas();
$tugasmhs = new Application_Model_DbTable_Tugasmhs();
$this->view->assign('tugas', $tugas>tampilkanTugasPerDosen($dataDosen->nomorinduk));
10.
$this->view->assign('tugasmhs', $tugasmhs>tampilkanTugasPerDosen($id_user));
Kode Program 4 merupakan perintah untuk melihat tugas kuliah yang telah di upload
mahasiswa kepada dosen. Pertama diambil id mahasiswa, kemudian data yang
ditampilkan tugas sesuai id mahasiswa.
Gambar 14 Halaman Penambahan Tugas Matakuliah pada laptop
15
Gambar 15 Halaman Penambahan Tugas Matakuliah pada handphone
Gambar 14 dan 15 merupakan tampilan dari halaman tambah data tugas matakuliah,
dimana terdapat 3 text field yaitu, subject class, dan file.
Kode Program 5 Perintah Untuk Tambah Data Tugas Matakuliah
1.
2.
3.
4.
5.
6.
7.
8.
$request = $this->getRequest();
$tugas->addassignments($judultugas, $kelas, $filetugas3, $iddosen,
$tanggalupload);
$this->view->sendMessage = "Assignments successfully uploaded";
return;
$this->_redirect('/dosen/addassignments');
Kode Program 5 merupakan perintah untuk melakukan proses tambah data tugas
matakuliah. Pertama akan dikirimkan request dari setiap data yang diisikan.
Kemudian dilakukan pengisian nama tugasnya, jika sudah terisi semua maka
dipanggil fungsi yang ada pada model, yaitu tugasmhs untuk menyimpan data dan
muncul pemberitahuan bahwa tugas telah diupload.
16
Kode Program 6 Perintah untuk Menghapus data Tugas Matakuliah
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
public function deleteassignmentsAction() {
$request = $this->getRequest();
$idtugas = $request->getParam('idtugas');
$storageDosen = new Zend_Auth_Storage_Session();
$dataDosen = $storageDosen->read();
if ($dataDosen->role != "DOSEN") {
$this->_redirect('/');
$tugas = new Application_Model_DbTable_Tugas();
$tugas->hapusassignments($idtugas);
$this->_redirect('/dosen/assignments');
}
}
Kode Program 6 merupakan perintah untuk hapus data tugas. Controller
memanggil fungsi yang ada pada model tugas, kemudian fungsi yang ada pada
deleteassignmentsAction mencari data sesuai dengan id yang dipilih. Jadi data dengan
id yang dipilih akan dihapus dari database.
Gambar 16 Halaman Test Online pada laptop
17
Gambar 17 Halaman Test Online pada handphone
Gambar 16 dan Gambar 17 menunjukkan antarmuka halaman ketika dosen memilih
menu test online. Pada halaman ini dosen dapat melakukan proses penambahan soal
dan schedule test.
Pengujian berikutnya adalah pengujian responden/pengguna sistem. Pengujian
dilakukan kepada 10 responden. Pilihan jawaban pada kuesioner yang diberikan
terdiri atas 5 pilihan jawaban, antara lain: sangat setuju dengan 5 point, setuju dengan
4 point, normal dengan 3 point, tidak setuju dengan 2 point, dan sangat tidak setuju
dengan 1 point . Rating scale didapatkan dengan cara mengalikan point dari pilihan
jawaban dengan jumlah pertanyaan dan responden dapat dilihat pada Tabel 1.
Tabel 1 Rating Scale
Pilihan jawaban
Sangat Setuju
Setuju
Normal
Tidak setuju
Sangat Tidak Setuju
Rating scale
201 – 250
151 – 200
101 – 150
51 – 100
1 – 50
Untuk mendapatkan nilai masing-masing pilihan jawaban dihitung dengan
mengalikan point dari pilihan jawaban dengan jumlah pertanyaan dan responden.
Hasil pengisian dan hasil perhitungan kuesioner mahasiswa dapat dilihat pada Tabel
2 dan tabel 3
No
1
2
3
Tabel 2 Hasil Pengisian Kuisioner
Pernyataan
STS TS
N
Tampilan Web mengikuti besarnya layar
2
smartphone
Aplikasi ini dapat mempermudah dalam
4
proses belajar mengajar
Aplikasi ini mudah untuk digunakan
5
18
S
SS
8
3
3
3
2
Total
10
10
10
4
5
No
1
2
3
4
5
Aplikasi E-Learning ini bermanfaat dalam
proses belajar mengajar
Aplikasi E-Learning ini dibuat sesuai
dengan kebutuhan
3
6
1
3
3
4
S
SS
Tabel 3 Hasil Perhitungan Kuisioner
Pernyataan
STS TS
N
Tampilan Web mengikuti besarnya layar
6
smartphone
Aplikasi ini dapat mempermudah dalam
12
proses belajar mengajar
Aplikasi ini mudah untuk digunakan
15
Aplikasi E-Learning ini bermanfaat dalam
9
proses belajar mengajar
Aplikasi E-Learning ini dibuat sesuai
9
dengan kebutuhan
Total
32
12
15
12
10
24
5
12
20
10
10
Total
38
39
37
38
41
193
Berdasarkan hasil perhitungan kuesioner didapat nilai 193 yang berarti
aplikasi sudah memenuhi kebutuhan pada Fakultas Keguruan dan Ilmu Pendidikan.
Dapat disimpulkan bahwa sebagian besar responden setuju aplikasi yang dibuat
sesuai dengan kebutuhan.
5.
Simpulan
Berdasarkan penelitian, pengujian dan analisis terhadap sistem, maka dapat
diambil kesimpulan bahwa sistem ini dapat digunakan untuk membantu proses
belajar mengajar ketika dosen tidak dapat mengajar di dalam kelas. Sistem ELearning memiliki beberapa fasilitas yang dapat membantu dosen untuk
menjalankan perkuliahan seperti kelola materi kuliah, kelola tugas kuliah, dan
test online. Melalui beberapa fasilitas tersebut dosen dapat memberikan materi
kuliah, mengelola tugas kuliah mahasiswa, memberikan test online meskipun
dosen tidak bisa hadir dalam proses perkuliahan. Web yang didesain
menggunakan Responsive Web Design dapat beradaptasi dengan optimal dalam
perangkat apapun yang digunakan untuk mengaksesnya, penyesuaian ukuran web
terhadap ukuran layar perangkat yang digunakan memberikan kenyamanan
pengguna pada saat mengakses web tersebut.
6.
Daftar Pustaka
[1] Tanjung, Zulfirman, 2009, Perancangan Sistem E-Learning AMIK Harapan
Medan. Medan: Universitas Sumatera Utara
[2] Herbowo., Agus Rahmat, 2012, Web Responsive Design Untuk Situs Berita
Menggunakan Framework Codeigniter. Universitas Gunadarma
19
[3] Curteanu, Mihai, 2010, Using the Model-View-Controller for Creating
Applications for Project Management. http://www.opensourcejournal.ro/2010Volume02/number04/paper011-fullpaper.pdf. Diakses tanggal 23 Oktober 2014.
[4] Darin E. Hartley Selling E-Learning, American Society for Training and
Development. 2001
[5] Pressman, Roger, 2001. Software Engineering a Practitioner’s Approach. New
York : McGraw-Hill Higher Education.
20