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

i

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

viii

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

Email: 1)james.songko91@gmail.com, 2)teguh.wahyono@staff.uksw.edu

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.

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

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]

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.

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.

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.

6

Melihat Materi Melihat Nilai Mengumpulkan Tugas invalid

valid

Sistem User

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.

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.

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

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

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

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() {

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);

12

Gambar 8 Halaman Awal Dosen pada laptop

Gambar 9 Halaman Awal Dosen pada handphone

13

Gambar 10 Halaman Materi Dosen pada laptop

Gambar 11 Halaman Materi Dosen pada handphone

14

Gambar 12 Halaman Tugas pada laptop

Gambar 13 Halaman Tugas pada handphone

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',

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;

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

3 Aplikasi ini mudah untuk digunakan

19 4 Aplikasi E-Learning ini bermanfaat dalam

proses belajar mengajar 3 6 1

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

4 Aplikasi E-Learning ini bermanfaat dalam

proses belajar mengajar 9 24 5

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

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