Perancangan Aplikasi Pembelajaran Berbasis Responsive …...memudahkan dalam mencari . bugs....

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

i

Perancangan Aplikasi Pembelajaran Berbasis Responsive

Web Desain Studi Kasus pada Universitas Tadulako

Artikel Ilmiah

Diajukan kepada


untuk memperoleh gelar Sarjana Komputer

Peneliti:

James Stevan K. Songko (672009153)

Teguh Wahyono, S.Kom., M.Cs.

Program Studi Teknik Informatika


Universitas Kristen Satya Wacana

Salatiga

Desember 2014

viii

Perancangan Aplikasi Pembelajaran Berbasis Responsive Web Design

Studi Kasus Universitas Tadulako

1)James Stevan K. Songko, 2)Teguh Wahyono


Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, Indonesia

Email: 1)[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.

mailto:[email protected]

1

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

2

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

3

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]

4

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

5

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.

6

Kumpul Tugas Matkul

Lihat Materi

Lihat Nilai

Melakukan Test OnlineMahasiswa

Forum

Kelola Nilai

Kelola Test

Kelola MateriDosen

Kelola Tugas Matkul

Logout

Login

Menu Utama

Forum Melakukan

Test Online

Melihat Materi Melihat Nilai Mengumpulkan

Tugas

invalidvalid

SistemUser

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.

Gambar 4 Activity Diagram Mahasiswa

7

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 kelas-

kelas 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.

8

Tabel 1 Perancangan Model

Model Perancangan

Banksoal.php 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

Daftarnilai.php Berisi query yang terhubung dengan tabel

daftarnilai untuk fungsi tampilkan nilai per

mahasiswa dan tampilkan nilai mahasiswa per

id ujian

Daftarujian.php Berisi query yang terhubung dengan tabel

daftarujian untuk fungsi tampilkan jadwal ujian

per mahasiswa, exam registration, dan cek

exam reg

Jadwalujian.php 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

Jenissoal.php Berisi query yang terhubung dengan tabel jenis

soal untuk fungsi ambil soal

Logindata.php Berisi query yang terhubung dengan tabel

logindata untuk fungsi ambil id login, add

login data, hapus login Data, dan cek login

data

Materi.php Berisi query yang terhubung dengan tabel

materi untuk fungsi ambil materi per id,

tampilkan semua, tampilkan materi per dosen,

add materials, dan hapus materials

Tugas.php Berisi query yang terhubung dengan tabel

tugas dengan fungsi ambil tugas per id,

tampilkan semua, tampilkan tugas per dosen,

add assignments, dan hapus assignments

Tugasmhs.php Berisi query yang terhubung dengan tabel

tugasmhs dengan fungsi tampilkan tugas per

dosen, tampilkan tugas per mahasiswa, add

assignments, dan hapus assignments

User.php Berisi query yang terhubung dengan tabel user

dengan fungsi ambil user, cek register user,

tampilkan dosen, add user,

Tabel 2 Perancangan View

Package View Keterangan

Dosen

Index.phtml Menampilkan halaman awal ketika

login sebagai Dosen

Addmaterials.phtml Menampilkan form tambah materi

perkuliahan

Addassignments.phtml Menampilkan form tambah tugas

matakuliah

Assignments.phtml Menampilkan daftar tugas

9

matakuliah

Forum.phtml

Materials.phtml Menampilkan materi perkuliahan

Matkul.phtml Menampilkan daftar matakuliah

Onlinetest.phtml Menampilakan test online

Studentlist.phtml Menampilkan list mahasiswa

Updatequestion.phtml Menampilkan form update

pertanyaan

Updateschedule.phtml Menampilkan form update jadwal

Mahasiswa

Index.phtml Menampilkan halaman awal ketika

login sebagai mahasiswa

Addassignments.phtml Menampilkan form tambah tugas

Assignments.phtml Menampilkan tugas

Forum.phtml Menampilkan forum

Materials.phtml Menampilkan materi

Matkul.phtml Menampilkan matakuliah

Onlinetest.phtml Menampilkan online test

Tabel 3 Controller

Controller Keterangan

indexController.php Berisi fungsi index untuk menampilkan

halaman awal dari web. Login berfungsi agar

pengguna dapat mengakses data

DosenController.php 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

MahasiswaController.php Berisi fungsi lihat materi, lihat tugas, tambah

tugas, forum, lihat test, mengikuti test

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 E-

Learning berbasis responsive web design dijelaskan sebagai berikut. Kode program 1 kode program implementasi flexible grid

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

1. .header { float: left;width: 100%;padding: 1% 0;} 2. .wrap {float: left;width: 96%; margin: 0 2%;} 3. .main{ float: left;width: 100%;padding: 1.5% 0; margin: 0;} 4. .footer{width: 100%; padding:3% 0;}

10

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

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

@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%; }

11

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. } 24. - 25. - 26. - 27. }

12

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

13

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.

14

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.

15

Kode Program 4 Perintah Kumpul Tugas

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

1. $id_user = $dataDosen->nomorinduk; 2. $dosen = new Application_Model_DbTable_User(); 3. $this->view->assign("user", $dosen->ambilUser($id_user)); - 4. - 5. - 6. - 7. $tugas = new Application_Model_DbTable_Tugas(); 8. $tugasmhs = new Application_Model_DbTable_Tugasmhs(); 9. $this->view->assign('tugas', $tugas-

>tampilkanTugasPerDosen($dataDosen->nomorinduk));

10. $this->view->assign('tugasmhs', $tugasmhs->tampilkanTugasPerDosen($id_user));

16

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

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.

1. $request = $this->getRequest(); 2. - 3. - 4. - 5. $tugas->addassignments($judultugas, $kelas, $filetugas3, $iddosen,

$tanggalupload);

6. $this->view->sendMessage = "Assignments successfully uploaded"; 7. return; 8. $this->_redirect('/dosen/addassignments');

17

Kode Program 6 Perintah untuk Menghapus data Tugas Matakuliah

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

1. public function deleteassignmentsAction() { 2. $request = $this->getRequest(); 3. $idtugas = $request->getParam('idtugas'); 4. $storageDosen = new Zend_Auth_Storage_Session(); 5. $dataDosen = $storageDosen->read(); 6. if ($dataDosen->role != "DOSEN") { 7. $this->_redirect('/'); 8. $tugas = new Application_Model_DbTable_Tugas(); 9. $tugas->hapusassignments($idtugas); 10. $this->_redirect('/dosen/assignments'); }

}

18

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 Rating scale

Sangat Setuju 201 – 250

Setuju 151 – 200

Normal 101 – 150

Tidak setuju 51 – 100

Sangat Tidak Setuju 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 Tabel 2 Hasil Pengisian Kuisioner

No Pernyataan STS TS N S SS Total

1 Tampilan Web mengikuti besarnya layar

smartphone 2 8

10

2 Aplikasi ini dapat mempermudah dalam

proses belajar mengajar 4 3 3

10

3 Aplikasi ini mudah untuk digunakan 5 3 2

10

19

4 Aplikasi E-Learning ini bermanfaat dalam


10

5 Aplikasi E-Learning ini dibuat sesuai

dengan kebutuhan 3 3 4

10

Tabel 3 Hasil Perhitungan Kuisioner

No Pernyataan STS TS N S SS Total

1 Tampilan Web mengikuti besarnya layar

smartphone 6 32

38

2 Aplikasi ini dapat mempermudah dalam


39

3 Aplikasi ini mudah untuk digunakan 15 12 10 37

4 Aplikasi E-Learning ini bermanfaat dalam


38

5 Aplikasi E-Learning ini dibuat sesuai

dengan kebutuhan 9 12 20

41

Total 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 E-

Learning 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

20

[3] Curteanu, Mihai, 2010, Using the Model-View-Controller for Creating

Applications for Project Management. http://www.opensourcejournal.ro/2010-

Volume02/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.

http://www.opensourcejournal.ro/2010-Volume02/number04/paper011-fullpaper.pdfhttp://www.opensourcejournal.ro/2010-Volume02/number04/paper011-fullpaper.pdf

Perancangan Aplikasi Pembelajaran Berbasis Responsive …...memudahkan dalam mencari . bugs....

Documents

Transcript of Perancangan Aplikasi Pembelajaran Berbasis Responsive …...memudahkan dalam mencari . bugs....