PENERAPAN FRAMEWORK LARAVEL PADA MEDIA …library.palcomtech.com/pdf/5556.pdf · SKRIPSI PENERAPAN...

PROGRAM STUDI SISTEM INFORMASI

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

PALCOMTECH

SKRIPSI

PENERAPAN FRAMEWORK LARAVEL

PADA MEDIA PEMBELAJARAN

Diajukan Oleh :

RAYNANDA GUNAWAN

021110205

Untuk Memenuhi Sebagian Dari Syarat-Syarat

Guna Mencapai Gelar Sarjana Komputer

PALEMBANG

(2015)

ii



PALCOMTECH

HALAMAN PERSETUJUAN PEMBIMBING SKRIPSI

NAMA : RAYNANDA GUNAWAN

NOMOR POKOK : 021110205

PROGRAM STUDI : SISTEM INFORMASI

JENJANG PENDIDIKAN : STRATA SATU (S1)

KONSENTRASI : PEMROGRAMAN & DESAIN

JUDUL LAPORAN : PENERAPAN FRAMEWORK LARAVEL


Tanggal : 02 September 2015 Mengetahui,

Dosen Pembimbing, Ketua,

Dini Hari Pertiwi, S.Kom., M.Kom. Benedictus Effendi, S.T., M.T.

NIDN: 0219078701 NIP: 09.PCT.13

iii



PALCOMTECH

HALAMAN PENGESAHAN PENGUJI SKRIPSI

NAMA : RAYNANDA GUNAWAN

NOMOR POKOK : 021110205

PROGRAM STUDI : SISTEM INFORMASI

JENJANG PENDIDIKAN : STRATA SATU (S1)

KONSENTRASI : PEMROGRAMAN & DESAIN

JUDUL LAPORAN : PENERAPAN FRAMEWORK LARAVEL


Tanggal : 02 September 2015 Tanggal : 02 September 2015

Penguji 1 Penguji 2

Atin triwahyuni, S.T., M.Eng. Salimin Bahar, S.Kom.

NIDN: 0215028002 NIDN: 0215106902

Menyetujui,

Ketua,

Benedictus Effendi, S.T., M.T.

NIP: 09.PCT.13

iv

MOTTO :

Musuh yang paling berbahaya di atas dunia ini

adalah penakut dan bimbang. Teman yang paling

setia, hanyalah keberanian dan keyakinan yang

teguh.

(Andrew Jackson)

Kupersembahkan kepada :

- Ayahanda dan Ibunda Tercinta

- Saudara-saudaraku tersayang

- Para Pendidik yang kuhormati

v

KATA PENGANTAR

Teknologi pembuatan sistem informasi berbasis website berkembang

sedemikian cepatnya, penggunaan bahasa PHP sebagai bahasa pemograman

melahirkan Framework yang memiliki tujuan untuk menyederhanakan proses

pembangunan, dengan adanya framework proses pembuat website dapat lebih

cepat dan pemeliharaan website menjadi lebih mudah untuk dipelihara. Setiap

framework memiliki aturan mengenai cara pemakaian Framework yang

digunakan, dan setiap framework terdapat kekurangan dan kelebihan seperti

kemudahan penggunaan dan penerapan kedalam website yang akan di buat.

Laravel merupakan framework yang menyediakan teknologi baru dalam

membangun aplikasi web yaitu composer yang bergunsi berfungsi sebagai

penginstall third-party plugin.

Dengan kemudahan dan kenyamanan dalam membuat sebuah website,

berbagai media kini sudah berbasis online seperti media pembelajaran. Media

pembelajaran yang kini berbasis online meberikan kemudahkan masyarakat untuk

belajar, karena dapat belajar dimana saja selagi terhubung ke internet tanpa

terbatas waktu karena bekerja atau kesibukkan lainnya. Kenyataan diatas

merupakan salah satu factor yang mendorong Penulis untuk membuat dan

mengangkat judul Penerapan framework Laravel pada Media Pembelajaran.

Penulis ingin mengucapkan terima kasih kepada Ibu Dini Hari Pertiwi,

S.Kom., M.Kom., selaku dosen pembimbing atas kesediaan beliau memberi

masukan dan saran dalam penyempurnaan skripsi ini. Ucapan terima kasih juga

vi

penulis haturkan kepada Ketua STMIK PalComTech Bapak Benedictus Effendi,

M.T., kepada Ketua Program Studi Sistem Informasi, Andri Saputra, S.Kom.,

M.Kom., seluruh staf pengajar PalComTech yang telah memberikan bantuan

pelayanan yang memuaskan untuk kelancaran dalam penyelesaian studi ini.

Demikian kata pengantar dari Penulis, dengan harapan semoga skripsi ini

dapat bermanfaat dan berguna bagi para pembaca, dengan kesadaran Penulis

bahwa dalam penulisan skripsi masih mempunyai banyak kekurangan dan

kelemahan sehingga membutuhkan banyak saran dan kritik yang membangun

untuk menghasilkan sesuatu yang lebih baik. Terima kasih.

Palembang, Agustus 2015

Penulis

vii

DAFTAR ISI Halaman

HALAMAN JUDUL …………………………………………………... i

HALAMAN PERSETUJUAN PEMBIMBING SKRIPSI ………....... ii

HALAMAN PENGESAHAN PENGUJI SKRIPSI ..……………...... iii

HALAMAN MOTTO DAN PERSEMBAHAN ………..……..…...... iv

KATA PENGANTAR …………..…………………………….…….... v

DAFTAR ISI …………………….………………………………..…... vii

DAFTAR GAMBAR …………..…………………………………...... xi

DAFTAR TABEL ……………..………………………………….….. xv

DAFTAR LAMPIRAN ……...………………………………….......... xvii

ABSTRAK ...……………………………………………………….… xviii

BAB I PENDAHULUAN

1.1 Latar Belakang Penelitian ...…………………………………….. 1

1.2 Perumusan Masalah …….………………………………………. 3

1.3 Batasan Masalah ………………………………………………... 3

1.4 Tujuan Penelitian ………………………….................................. 4

1.5 Manfaat Penelitian ……………………………….…………….. 4

1.5.1 Manfaat Bagi Mahasiswa .................................................... 4

1.5.2 Manfaat Bagi Akademik ..................................................... 5

1.5.3 Manfaat Bagi Masyarakat ................................................... 5

1.6 Sistematika Penulisan ……………….....……………………….. 5

viii

BAB II GAMBARAN UMUM PERANGKAT LUNAK YANG

DIKEMBANGKAN

2.1 Fenomena Perangkat Lunak yang Dikembangkan …………….. 7

BAB III TINJAUAN PUSTAKA

3.1 Teori Pendukung ……………………………………………….. 9

3.1.1 Framework ………………………………………...……… 9

3.1.2 MVC (Model View Controller) ...................……….…….. 10

3.1.3 Website ...........…………………………………................ 12

3.1.4 Media Pembelajaran ...……………………………...……. 12

3.1.5 Javascipt ..…………………………….……...................... 13

3.1.6 PHP (Hipertext PreProcessor) ……………………….…... 14

3.1.7 MySQL ……………………………………………………. 15

3.1.8 CSS (Cascading Style Sheet) ……………………………… 17

3.2 Hasil Penelitian Terdahulu ……………………………………... 18

BAB IV METODE PENELITIAN

4.1 Jenis Data …..…………………………………..……………….. 21

4.1.1 Data Primer ………………………………..………........… 21

4.1.2 Data Sekunder ………………………………......………... 21

4.2 Teknik Pengumpulan Data ……………………………………. 22

4.2.1 Observasi ………………………………………………… 22

ix

4.2.2 Studi Pustaka ………………………………………….….. 22

4.3 Alat dan Pengembangan Sistem ……….………………….….... 23

4.3.1 Alat Pengembangan Sistem .………………………….…... 23

4.3.2 Teknik Pengembangan Sistem ……………………....……. 30

4.4 Alat dan Teknik Pengujian Perangkat Lunak ..………................. 33

BAB V HASIL DAN PEMBAHASAN

5.1 Hasil ……………………………………………………………. 35

5.1.1 Costumer Communication ….…………………………….. 35

5.1.2 Planning …………………………………………………... 35

5.1.3 Modeling …………………………………………………... 38

5.1.3.1 Analysis Modeling ……………………..………… 38

5.1.3.2 Design Modeling ………………………...……….. 50

5.1.4 Construction …………………………………………….... 84

5.1.4.1 Pembuatan Database ……………………..…..…. 86

5.1.4.2 Pembuatan Interface ………………...…………… 96

5.1.5 Deployment ………………………………………………. 115

5.2 Pembahasan …………………….……………………………… 122

x

BAB VI PENUTUP

6.1 Simpulan ………………………………………………..………. 127

6.2 Saran …………………………………………………..………... 128

DAFTAR PUSTAKA

HALAMAN LAMPIRAN

xi

DAFTAR GAMBAR

Halaman

Gambar 3.1. Model Hubungan MVC ................................................... ........10

Gambar 4.1 Tahapan – tahapan Web Engineering ....................................... 31

Gambar 5.1 State Transition Diagram Website ........................................... 40

Gambar 5.2 Use case pengguna media (frontend) ....................................... 45

Gambar 5.3. Use case administrator (backend) ........................................... 47

Gambar 5.4. Class Diagram......................................................................... 47

Gambar 5.5. Activity Diagram Pengguna Media ......................................... 49

Gambar 5.6. Activity Diagram Administrator .............................................. 50

Gambar 5.7. Design halaman home ............................................................. 61

Gambar 5.8. Design halaman courses .......................................................... 62

Gambar 5.9. Design halaman online test ..................................................... 63

Gambar 5.10. Design halaman forum .......................................................... 64

Gambar 5.11. Design halaman register ....................................................... 65

Gambar 5.12. Design halaman login ............................................................ 65

Gambar 5.13. Design halaman home (dashboard) ...................................... 66

Gambar 5.14. Design halaman courses ........................................................ 67

Gambar 5.15. Design halaman online test ................................................... 68

Gambar 5.16. Design halaman forum .......................................................... 69

Gambar 5.17. Design halaman create courses ............................................. 70

Gambar 5.18. Design halaman create topic ................................................. 70

Gambar 5.19. Design halaman create online test ........................................ 71

xii

Gambar 5.20. Design halaman create question ........................................... 72

Gambar 5.21. Design halaman create topic forum ...................................... 73

Gambar 5.22. Design halaman settings tab account, picture, password. .... 73

Gambar 5.23. Design halaman dashboard. .................................................. 75

Gambar 5.24. Design halaman management courses. ................................. 76

Gambar 5.25. Design halaman management online test. ............................. 77

Gambar 5.26. Design halaman management forum. .................................... 78

Gambar 5.27. Design halaman management achievement........................... 79

Gambar 5.28. Design halaman management category................................. 80

Gambar 5.29. Design halaman management user frontend. ........................ 81

Gambar 5.30. Design halaman management administrator ........................ 81

Gambar 5.31. Design halaman settings tab website, general, picture,

maintenance. ................................................................................................ 83

Gambar 5.32. Model data kursus.................................................................. 84

Gambar 5.33. Controller topik kursus ......................................................... 85

Gambar 5.34. View pilihan ganda ................................................................ 86

Gambar 5.35. Command create table data_userlogin .................................. 86

Gambar 5.36. Stuktur migration tabel data_userlogin ................................. 87

Gambar 5.37. Command php migrate tabel data_userlogin ......................... 88

Gambar 5.38. Tabel data_userlogin ............................................................. 89

Gambar 5.39. Tabel data_userdata ............................................................... 89

Gambar 5.40. Tabel data_subkategori ......................................................... 90

Gambar 5.41. Tabel data_soal ...................................................................... 90

xiii

Gambar 5.42. Tabel data_settings ................................................................ 91

Gambar 5.43. Tabel data_prestasi ................................................................ 91

Gambar 5.44. Tabel data_pesertakuis .......................................................... 92

Gambar 5.45. Tabel data_notifikasi ............................................................. 92

Gambar 5.46. Tabel data_kursustopik ......................................................... 93

Gambar 5.47. Tabel data_kursus .................................................................. 93

Gambar 5.48. Tabel data_kuis ..................................................................... 94

Gambar 5.49. Tabel data_kategori ............................................................... 94

Gambar 5.50. Tabel data_jawaban ............................................................... 95

Gambar 5.51. Tabel data_historykursus....................................................... 95

Gambar 5.52. Tabel data_forumkomentar ................................................... 96

Gambar 5.53. Tabel data_forum .................................................................. 96

Gambar 5.54. Gambar kode memanggil file css dan gambar ...................... 97

Gambar 5.55. Gambar kode memanggil file topik kursus ........................... 97

Gambar 5.56. Gambar kode menampilkan soal ........................................... 98

Gambar 5.57. Tampilan halaman home landing .......................................... 99

Gambar 5.58. Tampilan halaman courses .................................................. 100

Gambar 5.59. Tampilan halaman online test ............................................. 100

Gambar 5.60. Tampilan halaman forum .................................................... 101

Gambar 5.61. Tampilan halaman register.................................................. 102

Gambar 5.62. Tampilan halaman login ...................................................... 102

Gambar 5.63. Tampilan halaman home frontend ....................................... 103

Gambar 5.64. Tampilan halaman courses .................................................. 104

xiv

Gambar 5.65. Tampilan halaman online test ............................................. 104

Gambar 5.66. Tampilan halaman forum .................................................... 105

Gambar 5.67. Tampilan halaman create courses ....................................... 105

Gambar 5.68. Tampilan halaman create topic ........................................... 106

Gambar 5.69. Tampilan halaman create online test .................................. 106

Gambar 5.70. Tampilan halaman create question ..................................... 107

Gambar 5.71. Tampilan halaman create topic forum ................................ 108

Gambar 5.72. Tampilan halaman settings .................................................. 109

Gambar 5.73. Tampilan halaman dashboard admin .................................. 110

Gambar 5.74. Tampilan halaman management courses ............................ 110

Gambar 5.75. Tampilan halaman management online test ........................ 111

Gambar 5.76. Tampilan halaman management forum ............................... 111

Gambar 5.77. Tampilan halaman management achievement ..................... 112

Gambar 5.78. Tampilan halaman management category........................... 112

Gambar 5.79. Tampilan halaman management user frontend ................... 113

Gambar 5.80. Tampilan halaman management

backend (administrator) ............................................................................. 113

Gambar 5.81. Tampilan halaman management settings ............................ 115

Gambar 5.82. Tampilan halaman data kursus ............................................ 124

Gambar 5.83. Tampilan halaman data kuis ................................................ 125

Gambar 5.84. Tampilan halaman data forum............................................. 126

xv

DAFTAR TABEL

Halaman

Tabel 3.1 Hasil Penelitian Terdahulu ................................................... ........18

Tabel 4.1 Simbol – Simbol Use Case .......................................................... 24

Tabel 4.2. Simbol Activity Diagaram .......................................................... 29

Tabel 5.1 Definisi Aktor .............................................................................. 41

Tabel 5.2 Definisi Use case ......................................................................... 42

Tabel 5.3. Desain Tabel Data_settings ......................................................... 51

Tabel 5.4. Desain Tabel Data_userlogin ...................................................... 52

Tabel 5.5. Desain Tabel Data_userdata........................................................ 52

Tabel 5.6. Desain Tabel Data_kategori ........................................................ 53

Tabel 5.7. Desain Tabel Data_subkategori .................................................. 53

Tabel 5.8. Desain Tabel Data_kursus .......................................................... 54

Tabel 5.9. Desain Tabel Data_kursustopik .................................................. 55

Tabel 5.10. Desain Tabel Data_historykursus ............................................. 55

Tabel 5.11. Desain Tabel Data_kuis ............................................................ 56

Tabel 5.12. Desain Tabel Data_soal ............................................................ 56

Tabel 5.13. Desain Tabel Data_pesertakuis ................................................. 57

Tabel 5.14. Desain Tabel Data_jawaban...................................................... 58

Tabel 5.15. Desain Tabel Data_forum ......................................................... 58

Tabel 5.16. Desain Tabel Data_forumkomentar .......................................... 59

Tabel 5.17. Desain Tabel Data_prestasi ....................................................... 59

xvi

Tabel 5.18. Desain Tabel Data_notifikasi .................................................... 60

Tabel 5.19. Hasil pengujian login .............................................................. 115

Tabel 5.20. Hasil pengujian register .......................................................... 116

Tabel 5.21. Hasil pengujian forget password ............................................ 117

Tabel 5.22. Hasil pengujian reset password .............................................. 118

Tabel 5.23. Hasil pengujian kursus ............................................................ 118

Tabel 5.24. Hasil pengujian topik .............................................................. 119

Tabel 5.25. Hasil pengujian kuis ................................................................ 119

Tabel 5.26. Hasil pengujian soal ................................................................ 120

Tabel 5.27. Hasil pengujian forum dan komentar forum ........................... 120

Tabel 5.28. Hasil pengujian settings profile .............................................. 121

Tabel 5.29. Hasil pengujian achievement .................................................. 121

Tabel 5.30. Hasil pengujian settings website ............................................. 122

xvii

DAFTAR LAMPIRAN

1. Lampiran 1. Form Pengajuan Topik dan Judul Skripsi.

2. Lampiran 2. Form konsultasi bimbingan Skripsi.

3. Lampiran 3. Surat Pernyataan

4. Lampiran 4. Form Revisi Ujian Pra Sidang

5. Lampiran 5. Form Revisi Ujian Kompre

6. Lampiran 6. Tahapan Install Laravel

6. Lampiran 7. Listing Code

xviii

ABSTRACT

Web-based programming techniques are now highly developed, such as the PHP

web programming language has spawned Framework, one of which is Laravel

who use technology like the Command Line Composer dam is equipped with

Blade Templating. Technology making a website highly developed is offset by the

development of the Internet so that various media have been based online sites

such as instructional media, it's been quite a lot of sites instructional media on the

internet, quality materials and the teaching force experienced make us have to

spend quite costly. Therefore Websites media with free material is certainly very

helpful the community who want to develop their knowledge. The study produced

an instructional media website created using Laravel framework with features

courses, online test, and forums. The method used is a web engineering and

device modeling using UML (Unified Modeling Language).

Keywords : Website, PHP, Framework, Laravel, Media Education

xix

ABSTRAK

Tehnik pemrograman berbasis website kini sudah sangat berkembang, seperti PHP

sebagai bahasa pemograman website telah melahirkan Framework, salah satunya

adalah Laravel yang menggunakan teknologi Composer layaknya Command Line

dam dilengkapi dengan Blade Templating. Teknologi pembuatan website yang

sudah sangat berkembang ini diimbangi dengan perkembangan internet sehingga

berbagai media sudah berbasis online seperti situs media pembelajaran, saat ini

sudah cukup banyak situs media pembelajaran di internet, materi yang berkualitas

dan tenaga pengajar berpengalaman membuat kita harus mengeluarkan biaya yang

cukup mahal. Oleh karena itu Website media pembelajaran dengan materi gratis

tentunya sangat membantu masyrakat yang ingin mengembangkan

pengetahuannya. Penelitian ini menghasilkan sebuah website media pembelajaran

yang dibuat menggunakan framework Laravel dengan fitur kursus, online test, dan

forum. Metode yang digunakan adalah web engineering dan perangkat pemodelan

menggunakan UML (Unified Modeling Language).

Kata kunci : Website, PHP, Framework, Laravel, Media Pembelajaran

xx

DAFTAR PUSTAKA

Hasan, M. Iqbal.2013.Pokok-Pokok Materi Statistik 1. Jakarta: Bumi Aksara.

Hidayat, Rahmat.2010. Cara Praktis Membangun Website Gratis.Jakarta:

PT.Elex Media Komputindo.

Indrajani. 2011. Perancangan Basis Data dalam All in 1, Elex Media

Komputindo : Jakarta.

Jogiyanto. 2005. Analisis & Desain Sistem Informasi Pendekatan Terstruktur

Teori dan Praktik Aplikasi Bisnis, Andi : Yogyakarta.

Kristanto, Andri. 2010. Kupas Tuntas PHP & MYSQL. Klaten: Cable Book.

Kurniawan, Erick. 2012. Pemograman Web Dinamis dengan ASPN.Net 4.5.

Andi Offset. Yogyakarta.

Linda Marlinda, Abdul Hamid. 2014. Sistem Informasi Budi Daya Jamur

Menggunakan Metode Web Engineering. Jurnal Seminar Nasional

Sains dan Teknologi. 12 November 2014. ISSN : 2407 – 1846

Puspitasari, A.Heni. 2011. Pemograman Web Database Dan Mysql Tingkat

Lanjut. Yogyakarta: Skripta

Shalahuddin, Rosa A.S. 2014. Rekayasa Perangkat Lunak Terstruktur dan

Berorintasi Objek. Bandung: Informatika.

Simamora, Roymond H. 2010. Buku Ajar Pendidikan dalam Keperawatan

Jakarta: Buku Kedokteran EGC.

Sunyoto, Andi. 2007. Ajax Membangun Web dengan Teknologi Asynchoronous

JavaScript dan XML. Yogyakarta : Andi Offset.

xxi

Wardana. 2010. Menjadi Master PHP dengan Framework CodeIgniter.Jakarta:


Zaki, Ali. 2008. 36 Menit Belajar Komputer PHP dan MySQL. Jakarta:


________. 2011. Mastering CMS Programming with PHP dan MySQL. Edisi 1.

Yogyakarta : Andi Offset.

_________. 2010. Membangun Webiste Tanpa Modal. Yogyakarta : Andi Offset.

_________. 2010. Mendesain Website Dinamis dan Menarik dengan Adobe

Dremaweaver CS4. Yogyakarta: Andi Offset.

________. 2010. Panduan Belajar MySQL Database Server. Jakarta:

TransMedia.

1

BAB I

PENDAHULUAN

1.1 Latar Belakang Penelitian

Penggunaan bahasa PHP sebagai bahasa pemograman untuk membuat

suatu website, melahirkan berbagai macam Framework yang memiliki tujuan

untuk menyederhanakan proses pembangunan sehingga mempercepat proses

pembuatan, dan menjadikan website lebih mudah untuk dipelihara

dikarenakan adanya aturan mengenai cara pemakaian Framework yang

digunakan. Dibalik berbagai macam framework tersebut, terdapat kekurangan

dan kelebihan seperti kemudahan penggunaan dan penerapan kedalam website

yang akan kita buat.

Laravel merupakan framework yang menyediakan teknologi baru untuk

memudahkan developer membangun aplikasi web berbasis bahasa

pemrograman PHP, Laravel telah menggunakan teknologi Composer.

Composer adalah fitur (dependency) tambahan untuk PHP yang memiliki

basis layaknya Command Line, dan berfungsi sebagai penginstall third-party

plugin untuk aplikasi web secara cepat dan dapat mengupdate aplikasi yang

dikembangkan dengan mudah, Laravel juga dilengkap dengan Blade

Templating yang memungkinkan developer untuk membuat web yang lebih

terstruktur dan dinamis.

Teknologi pembuatan website yang kini sudah sangat berkembang

diimbangi dengan perkembangan internet, sehingga berbagai media sudah

2

berbasis online seperti situs media pembelajaran yang memudahkan

masyarakat untuk belajar, peserta didik dapat belajar dimana saja selagi

terhubung ke internet tanpa terbatas waktu karena bekerja atau kesibukkan

lainnya. Tidak hanya perkembangan internet, dunia IT (Information

Technology) saat ini sangat pesat perkembangannya, untuk mereka yang ingin

belajar tentang dunia IT (Information Technology) akan terbantu dengan

adanya media pembelajaran ini, karena dunia IT (Information Technology)

tidak cukup di pelajari hanya di ruang lingkup kuliah, sekolah, ataupun tempat

kursus, maka dari itu media pembelajaran dengan basis online sangat

membantu para mahasiswa yang membutuhkan pendidikan diluar jam kuliah

ataupun para pekerja yang terbentur waktu untuk memperoleh pendidikan.

Media pembelajaran merupakan perantara dalam proses belajar mengajar

yang berguna dalam memudahkan dan mengefektifkan komunikasi antara

pengajar dan peserta didik, sehingga dapat membantu peserta didik untuk

menerima dan memahami pelajaran. Dengan pemakaian media pembelajaran

dapat membangkitkan motivasi, keinginan, serta membawa pengaruh

psikologis terhadap peserta didik, media yang dimanfaatkan dapat berupa

video tutorial, online test, slide, ataupun grafik. Saat ini sudah cukup banyak

beredar situs media pembelajaran di internet, materi yang berkualitas dan

tenaga pengajar dengan pengalaman tinggi, serta sistem web yang mendukung

kita dapat belajar melalui smartphone, laptop atau komputer, karena hal

tersebut untuk mendapatkan materi belajarnya kitapun harus mengeluarkan

biaya yang cukup mahal.

3

Berdasarkan latar belakang diatas penulis tertarik untuk menerapkan

Laravel dalam membangun sebuah web media pembelajaran dimana pengguna

lah yang bertindak sebagai pelajar ataupun pengajar. Pengguna dapat berbagi

materi belajar dalam bentuk video dan audio yang bersifat gratis, tidah hanya

materi tapi juga terdapat online test untuk menguji pengetahuan, serta

menyediakan forum tanya jawab antar pengguna jika memiliki kendala atau

kesulitan saat belajar. Pada alinea sebelumnya penulis sudah memaparkan

masalah yang ada, untuk itu penulis tertarik untuk mengangkat topik tugas

akhir dengan judul “Penerapan Framework Laravel pada Media

Pembelajaran”.

1.2 Perumusan Masalah

Berdasarkan latar belakang di atas, maka dapat ditarik rumusan

masalah sebagai berikut : Bagaimana menerapkan framework Laravel kedalam

website media pembelajaran ?

1.3 Batasan Masalah

Dalam pengerjaan “Penerapan Framework Laravel pada Media

Pembelajaran” ini, sudah ditetapkan ruang lingkup yang akan dikaji dan

dilaksanakan yaitu :

1. Versi Laravel yang digunakan adalah Laravel 5.0

2. Penerapan framework Laravel untuk :

a. Menampilkan video dan audio,

4

b. Online test dengan tipe soal pilihan ganda,

c. Form tanya jawab antar user.

3. Perangkat Pemodelan menggunakan UML (Unified Modeling

Language). UML yang digunakan meliputi Use Case, Class

Diagram, dan Activity Diagram

4. Bahasa pemrograman menggunakan PHP versi 5.5.19 dan Basis

data menggunakan MySQL 5.6.21

1.4 Tujuan Penelitian

Adapun tujuan yang ingin dicapai dari penelitian ini adalah

memberikan pengetahuan bagaimana menerapkan framework Laravel dalam

membuat website media pembelajaran, sehingga diharapkan dapat membantu

masyarakat yang ingin belajar mengenai Laravel dan memberikan suatu

website media pemebelajaran bagi masyarakat yang ingin mencari informasi,

atau ingin mengembangkan potensi diri dan belajar. Materi belajar yang terdiri

dari video dan audio, dilengkapi forum tanya jawab diharapkan dapat

memudahkan dan mengefektifkan proses belajar.

1.5 Manfaat Penelitian

1.5.1 Manfaat Bagi Mahasiswa

Sebagai penerapan dan perkembangan teori yang telah diperoleh

dibangku perkuliahan terutama mata kuliah pemrograman.

5

1.5.2 Manfaat Bagi Akademik

Sebagai bahan referensi bagi penulis lain untuk dijadikan

perbandingan dalam menyusun proposal penelitian selanjutnya.

1.5.3 Manfaat Bagi Masyarakat

Penerapan framework Laravel pada Website media pembelajaran

ini diharapkan dapat bermanfaat bagi mereka yang ingin belajar tentang

Laravel dan dunia Information Technology (IT).

1.6 Sistematika Penulisan

Untuk mempermudah pembahasan dan penyusunan penulisan laporan

skripsi ini menjadi lebih mudah dipahami dan terarah, dimana penulisan

menjabarkan dalam 6 bab permasalahan dan masing-masing bab akan

diuraikan menjadi beberapa sub bab. Sistematika laporan skripsi diuraikan

sebagai berikut :

BAB I PENDAHULUAN

Pada bab ini berisikan latar belakang, perumusan masalah,

batasan masalah, tujuan penelitian, manfaat penelitian, dan

sistematika penulisan.

BAB II GAMBARAN UMUM PERANGKAT LUNAK

Pada bab ini penulis akan membahas tentang perangkat

lunak yang akan dikembangkan.

6

BAB III TINJAUAN PUSTAKA

Pada bab ini akan diuraikan teori-teori yang mendukung

yang terkait dengan penelitian.

BAB IV METODE PENELITIAN

Pada bab ini diuraikan jenis data, teknik pengumpulan data,

jenis penelitian, alat dan teknik pengembangan system serta alat

dan teknik pengujian.

BAB V HASIL DAN PEMBAHASAN

Pada bab ini dilaporkan hasil-hasil yang diperoleh dalam

penelitian dan pembahasan terhadap hasil yang telah dicapai dan

uji coba website. Hasil dan pembahasan disesuaikan dengan

teknik pengembangan sistem yang digunakan.

BAB VI PENUTUP

Pada bab ini memberikan kesimpulan secara umum dari apa

yang telah dibahas.

7

BAB II

GAMBARAN UMUM PERANGKAT LUNAK YANG

DIKEMBANGKAN

2.1 Fenomena Perangkat Lunak yang Dikembangkan.

Website media pembelajaran terdiri dari 3 halaman akses yaitu

landing, frontend dan backend. Halaman landing adalah halaman utama saat

website dikunjungi yang menampilkan data kursus, kuis, dan forum yang

ada pada database namun untuk mengakses kursus, kuis, dan forum harus

login terlebih dahulu. Ketika pengunjung memiliki kursus, kuis, dan forum

akan diarahkan ke halaman login untuk mengakses halaman frontend.

Halaman frontend adalah halaman pengguna setelah berhasil login, pada

halaman frontend pengguna dapat membuat atau mengikuti kursus dan kuis,

serta bertanya di forum. Semua data website dikelola oleh administrator di

halaman backend, untuk mengakses halaman backend dapat menggunakan

form login seperti pengguna frontend. Pada halaman backend administrator

dapat mengelola kursus, kuis, forum, prestasi, data user frontend, data user

backend, serta merubah dan mengganti data website seperti nama, logo, atau

informasi website.

Website media pembelajaran yang dibuat akan memiliki fitur kursus,

kuis, dan forum. Penjelasannya sebagai berikut :

8

1. Kursus (Courses)

Kursus terdiri dari topik kursus, sehingga kursus akan aktif jika

terdapat data topik. Topik kursus terdiri dari format .mp3 dan .mp4,

untuk membat kursus pengguna harus memiliki minimal satu topic

kursus.

2. Kuis (Online Test)

Kuis terdiri dari soal, sehingga kuis akan aktif jika terdapat data

soal. Soal yang digunakan adalah pilihan ganda, soal terdiri dari empat

pilihan yaitu a,b,c,d, dan kunci jawab, pengguna juga harus memberikan

penjelasan atas jawaban yang benar.

3. Forum

Forum merupakan fitur yang dapat pengguna gunakan untuk

bertanya jika memiliki masalah dalam belajar atau ingin berbagi

informasi.

9

BAB III

TINJAUAN PUSTAKA

3.1 Teori Pendukung

3.1.1 Framework

Menurut Wardana (2010:3), Framework adalah kumpulan perintah

atau fungsi dasar yang membentuk aturan-aturan tertentu dan saling

berinteraksi satu sama lain, sehingga dalam pembuatan aplikasi website

harus mengikuti aturan dari framework tersebut. Dengan framework

(dalam hal ini framework PHP), kita tidak perlu memikirkan kode

perintah/fungsi dasar karena hal-hal penunjang lainnya seperti koneksi

database, validasi form, GUI, dan kemanan telah disediakan oleh

framework. Keuntungan yang dapat diperoleh dari penggunaan framework

adalah :

1. Waktu pembuatan aplikasi kita jauh lebih singkat.

2. Kode aplikasi website menjadi lebih mudah dibaca, karena sedikit dan

sifatnya pokok. Detailnya adalah kode dari framework dan ini mungkin

tidak perlu dipikirkan, terjamin.

3. Website menjadi lebih mudah diperbaiki, karena tidak perlu fokus ke

semua komponen kode website, terutama kode system framework.

4. Kita tidak perlu lagi membuat kode penunjang aplikasi website seperti

koneksi database, validasi form, GUI, dan keamanan.

10

5. Pikiran menjadi lebih terfokus ke kode alur permasalahan website, apa

yang ditampilkan dan layanan apa saja yang diberikan dari aplikasi

website tersebut.

6. Jika dikerjakan team work, makan akan lebih terarah karena system

framework, mengharuskan adanya keteraturan peletakan kode. Seperti

bagian pengambilan database terpisah .

3.1.2 MVC (Model View Controller)

Menurut Wardana (2010:52), MVC adalah sebuah pola

pemrograman yang bertujuan memisahkan logika bisnis, logika data, dan

logika tampilan (interface), atau secara sederhana memisahkan antara

proses, data dan tampilan. MVC mengatur arsitektur sebuah aplikasi.

Keuntungan dari MVC adalah kemudahan maintenance, dan

pengembangan aplikasi tersebut.

Sumber : Wardana (2010:53)

Gambar 3.1 Model Hubungan MVC

11

Berikut penjelasan dari model hubungan MVC diatas menurut Wardana

(2010:53) :

1. View adalah komponen dari MVC yang bertugas menampilkan apa

yang harus ditampilkan ke pengunjung website. Isinya dapat berupa

form, table, gambar, animasi ataupun lainnya yang boleh dilihat user

(pengunjung).

2. Model adalah komponen MVC yang bertugas mengambil data dari

database dan juga memasukkan data ke database. Isi umumnya

berupa perintah SQL. Hasilnya dikirimkan ke Controller.

3. Controller adalah komponen MVC yang bertugas mengirim perintah

ke model untuk mendapatkan data yang diinginkan. Controller tidak

mengetahui bagaimana data tersebut diambil dari database, karena

Controller tidak berisi kode perintah SQL. Karena itu adalah tugas

model, Controller mengolah data dari inputan user dan data dari

model kemudian data olahan tersebut dikirimkan ke view untuk

ditampilkan sesuai aturan Controller. Controller merupakan

penghubung antara model dan view dan mengatur hubungan tersebut.

12

3.1.3 Website

Menurut Hidayat (2010:2), Website atau situs dapat diartikan

sebagai kumpulan halaman-halaman yang digunakan untuk menampilkan

informasi teks, gambar diam atau gerak, animasi, suara, dan atau gabungan

dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk

satu rangkaian bangunan yang saling terkait , yang masing-masing

dihubungkan dengan jaringan-jaringan halaman. Menurut No Name

(2010:1). Website merupakan sebuah halaman berisi informasi yang dapat

dilihat jika komputer Anda terkneksi dengan internet.

Dari definisi di atas dapat disimpulkan bahwa webiste adalah

halaman-halaman yang digunakan untuk menampilkan informasi yang

dapat dilihat saat anda terkoneksi dengan internet.

3.1.4 Media Pembelajaran

Menurut Roymond (2009:65), Media adalah alat yang berfungsi

menyampaikan pesan (Bovee,1997). Media pembelajaran adalah alat yang

berfungsi menyampaikan pesan pembelajaran. Pembelajaran merupakan

sebuah proses komunikasi antara peserta didik, pendidik, dan bahan ajar.

Komunikasi tidak akan berjalan tanpa bantuan sarana penyampai pesan

atau media. Syarat- syarat media pembelajaran yang baik adalah :

1. Media pembelajaran harus meningkatkan motivasi peserta didik,

2. Menstimulus peserta didik mengingat apa yang sudah dipelajari

selain memberikan stimulasi belajar baru,

13

3. Menstimulus peserta didik dalam memberikan tanggapan, umpan

balik, dan juga mendorong mereka untuk melakukan praktik dengan

benar.

3.1.5 Javascript

Menurut Ali Zaki (2008:26), Javascript adalah skrip program

berbasis client yang dieksekusi oleh browser sehingga membuat halaman

web bias melakukan tugas-tugas tambahan yang tidak bisa dilakukan oleh

skrip HTML biasa. Kode Javascript dituliskan dalam bentuk fungsi yang

ditaruh di tag <head> yang dibuka dengan tag <script

type=”text/javascript”>. Kode Javascript juga bisa diletakkan di file

tersendiri yang berekstensi .js. Menurut Sunyoto (2007:10), ada beberapa

hal tentang Javascript yaitu :

1. Javascript didesain untuk menambah interaktif suatu web,

2. Javascript merupakan sebuah bahasa scripting,

3. Bahasa scripting merupakan bahasa pemrograman yang ringan,

4. Javascript berisi baris kode yang dijalankan dikomputer (web

browser),

5. Javascript biasanya disisipkan (embedded ) dalam halaman HTML,

6. Javascript adalah bahasa interprenuer (yang berarti skrip dieksekusi

tanpa proses kompilasi),

7. Setiap orang dapat menggunakan Javascript tanpa membayar

lisensi.

14

3.1.6 PHP (Hypertext PreProcessor)

Menurut No Name (2011:3), PHP (Hypertext Preprocessor) adalah

bahasa pemrograman berbasis web yang memiliki kemampuan untuk

memproses dan mengolah data secara dinamis. PHP dapat dikatakan

sebagai sebuah server-side embedded script language, artinya semua

sintaks dan perintah program yang anda tulis akan sepenuhnya dijalankan

oleh server, tetapi dapat disertakan pada halaman HTML biasa. Pada pada

umumnya , semua aplikasi yang dibangun menggunakan PHP akan

memberikan hasil pada web browser, tetapi prosesnya secara keseluruhan

dijalankan pada server.

Kelebihan-kelebihan PHP :

PHP bersifat open source. PHP adalah aplikasi bahasa web yang

diperoleh secara gratis.

1. PHP mudah dipelajari dibandingkan produk lain yang mempunyai

fungsi yang sama, seperti : Java Server Page atau C-based CGI.

PHP mempunyai sintaks yang sangat mudah dan user-friendly.

2. PHP bersifat embedded. Penulisan script PHP dan HTML menyatu

sehingga mudah dalam pembuatannya.

3. PHP dapat dijalankan di banyak Platform, seperti : UNIX dan

WINDOWS.

4. PHP meningkatkan kecepatan dari proses script.

15

5. PHP mempunyai fleksibilitas yang tinggi, menyamai high level

proggaming language seperti bahasa C.

6. Life Cyle yang singkat, sehingga PHP selalu up to date mengikuti

perkembangan teknologi internet.

3.1.7 MySQL

MySQL merupakan database server opens source yang cukup

popular keberadaanya. Dengan berbagi keunggulan yang dimiliki,

membuat sofware database ini banyak digunakan oleh para praktisi untuk

membangun suatu project. Wahana Komputer (2010:02).

Menurut Kristanto (2010:12), MySQL adalah sebuah perangkat

lunak sistem manajemen basis data SQL atau DBMS yang multithread dan

multi-user. MySQL adalah Relational Database Management System

(RDBMS) yang didistribusikan secara gratis dibawah lisensi GPL

(General Public License). Setiap Orang bebas untuk menggunakan

MySQL.

Berdasarkan definisi diatas dapat disimpulkan bahwa MySQL

adalah database server open soruce atau sistem manajemen database

(DBMS) yang digunakan untuk membangun sebuah project dengan

menggunakan bahasa pemograman.

Menurut Puspitasari (2011:19), MySQL memiliki beberapa

kelebihan, antara lain :

16

1. Multiuser. MySQL dapat digunakan oleh beberapa user dalam waktu

yang bersamaan tanpa mengalami masalah.

2. Performance tuning. MySQL memiliki kecepatan bagus dalam

menagani query sederhana, yaitu dapat memproses lebih banyak SQL

per satuan waktu.

3. Jenis Kolom. MySQL memiliki tipe kolom yang kompleks, seperti

signed/unsigned integer, float, double, char, text, date, timestamp, dan

masih banyak lagi.

4. Perintah dan Fungsi. MySQL memiliki operator dan fungsi secara

penuh dan mendukung perintah Select dan Where dalam perintah

query.

5. Keamanan. MySQL memiliki keamanan yang bagus karena beberapa

lapisan keamanan seperti level subnetmask, nama host, dan izin akses

user dengan sistem perizinan yang lengkap serta sandi terenkripsi.

6. Skalabilitas dan pembatasan. MySQL mampu menangani basis data

dalam skala besar, dengan jumlah rekaman (records) lebih dari 50 juta

dan 60 ribu tabel serta 5 milyar baris. Selain itu, batas indeks yang

dapat ditampung mencapai 32 indeks pada tiap tabelnya.

7. Konektivitas. MySQL dapat melakukan koneksi dengan klien

menggunakan protocol TCP/IP. Unix soket (UNIX), atau Named Pipes

(NT).

8. Lokalisasi. MySQL dapat mendeteksi pesan kesalahan pada klien

dengan menggunakan lebih dari dua puluh bahasa.

17

9. Antar Muka. MySQL memiliki interface terhadap berbagai aplikasi

dan bahasa pemrograman dengan menggunakan fungsi API

(Application Programming Interface).

10. Portabilitas. MySQL dapat berjalan stabil pada berbagai sistem

operasi seperti Windows, Linux, FreeBSD, Mac OS X Server, Slolaris,

Amiga dan masih banyak lagi.

11. Open Source. MySQL didistribusikan secara open source, dibawah

lisensi GPL sehingga dapat digunakan secara gratis.

12. Klien dan Peralatan. MySQL dilengkapi dengan berbagai peralatan

yang dapat digunakan untuk administrasi basis data, dan pada setiap

peralatan yang ada disertakan petunjuk online.

13. Struktur tabel. MySQL memiliki struktur tabel yang lebih fleksibel

dalam menangani ALTER TABLE, dibandingkan basis data lainnya,

misalnya Oracle.

3.1.8 CSS (Cascading Style Sheets)

Menurut Kurniawan (2012:58), CSS adalah teknologi standar yang

digunakan oleh hampir semua browser modern saat ini.CSS tidak hanya

dapat digunakan untuk memformat tampilan halaman seperti warna font,

warna background, ll, tapi CSS juga dapat digunakan untuk mengubah

layout/tata letak halaman.

Dari definisi diatas dapat disimpulkan bahwa CSS adalah suatu bahasa

teknologi standar yang digunakan untuk mengatur layout dan

18

memperindah tampilan layout atau website ditulis dengan mendefinisikan

ulang tag-tag HTML.

3.2 Hasil Penelitian Terdahulu

Tabel 3.1 Hasil Penelitian Terdahulu

JUDUL NAMA HASIL PENELITIAN

PEMANFAATAN

TEKNOLOGI

INFORMASI DAN

KOMUNIKASI

SEBAGAI MEDIA

PEMBELAJARAN DI

SMP NEGERI 1

GEGER MADIUN

(2013)

Sujoko

Pemanfaatan Teknologi

Informasi dan Komunkasi

(TIK) sebagai media

pembelajaran cukup

maksimal, Kendalanya:

belum semua ruang

pembelajaran dilengkapi

dengan perangkat komputer

dan LCD, adanya guru yang

kurang terampil

memanfaatkan TIK sebagai

media pembelajaran dan

belum terbiasa menulis pada

WEB sekolah, serta belum

memanfaatkan email yang

dimiliki sebagi media

pembelajaran. Solusinya:

berusaha melengkapi setiap

rung pembelajaran dengan

perangkat komputer dan

LCD, memfasilitasi guru-

guru untuk meningkatkan

ketrampilan dalam

memanfaatkan Teknologi

Informasi dan Komunkasi

(TIK) sebagai media

pembelajaran,memfasilitasi

guru untuk menulis pada web

sekolah dan Menyarankan

emiliki alamat E-mail pribadi

serta memanfaatkannya

sebagai sarana media

pembelajaran.

19

PENGEMBANGAN

MEDIA

PEMBELAJARAN

DREAMWEAVER

MODEL TUTORIAL

PADA MATA

PELAJARAN

MENGELOLA ISI

HALAMAN WEB

UNTUK SISWA

KELAS XI

PROGRAM

KEAHLIAN

MULTIMEDIA DI

SMK NEGERI 3

SINGARAJA

(2013)

Gd Tuning

Somara Putra,

Made Windu

Antara Kesiman,

S.T., M.Sc.,

I Gede Mahendra

Darmawiguna,S.

Kom.,M.Sc

Pengembangan media

pembelajaran dreamweaver

model tutorial pada mata

pelajaran mengelola isi

halaman web untuk siswa

kelas XI program keahlian

multimedia di SMK Negeri 3

Singaraja dikembangkan

dengan menggunakan

Macromedia Flash 8, serta

beberapa software

pendukung seperti Photoshop

untuk membuat dan mengedit

gambar, Cool Edit Pro 2

untuk pengolahan

suara, dan Adobe Premiere

Pro1.5, Adobe Dreamweaver

Cs3, Macromedia

Dreamweaver, Xampp, dan

Camtasia Studio 7 untuk

mengedit video. Media


model tutorial ini

memungkinkan siswa untuk

belajar mandiri dan

mempraktekan langsung

tahap demi tahap pembuatan

halaman web yang

diinginkan sesuai dengan

media. Respon siswa dan

guru terhadap pengembangan

media pembelajaran

dreamweaver model tutorial

pada mata pelajaran

mengelola isi halaman web,

yaitu siswa dengan kategori

sangat positif 2,77%, siswa

dengan kategori positif

97,23% dan guru dengan

kategori sangat positif 100%.

Sehingga media


model tutorial ini layak

diujikan secara ekperimen.

20

Kesimpulan :

Berdasarkan hasil penelitian diatas terdapat perbandingan dengan

penelitian penulis yaitu sebagai berikut :

1. Media pembelajaran sama-sama berbasis website namun yang akan penulis

buat pada penelitian ini tidak hanya untuk suatu organisasi atau perusahaan

atau sekolah, tetapi terbuka untuk umum dimana semua user yang telah

mendaftar tidak hanya mengikuti video pembelajaran yang ada tapi dapat

upload video tutorial atau video pembelajaran yang mereka miliki.

2. Website media pembelajaran yang akan penulis buat juga tidak hanya

terdapat video pembelajaran tapi juga dilengkapi dengan kuis pilihan

ganda dan forum tanya jawab antar user.

Teknologi yang digunakanpun berbeda karena website media pembelajaran

yang dibuat akan support di smartphone, notebook, laptop, komputer,

sehingga lebih memudahkan user untuk mengikuti pembelajaran.

21

BAB IV

METODE PENELITIAN

4.1 Jenis Data

4.1.1 Data Primer

Data primer adalah data yang diperoleh atau dikumpulkan

oleh orang yang melakukan penelitian atau yang bersangkutan yang

memerlukannya. (Hasan, 2003:33). Dalam penulisan ini data primer

didapat oleh penulis melalui kegiatan mengamati website media

pembelajaran yang sudah ada sepertyi lynda.com dan udemy.com,

data yang diamati seperti bagaimana mengikuti pembelajaran, layout

website, navigasi, dan kategori dari website media pembelajaran itu.

4.1.2 Data Sekunder

Data sekunder adalah data yang diperoleh atau dikumpulkan

dari sumber-sumber yang telah ada. (Hasan, 2003:33). Dalam

penulisan ini data sekunder didapat oleh penulis dari laporan-laporan

penelitian terdahulu, penulis juga menggunakan referensi buku dan

jurnal-jurnal penelitian.

22

4.2 Teknik Pengumpulan Data

4.2.1 Observasi

Menurut Indrajani (2011:5), observasi adalah salah satu

teknik pencarian data paling efektif untuk pemahaman suatu

sistem. Menurut Jogiyanto (2005:623), observasi adalah

pengamatan langsung suatu kegiatan yang sedang dilakukan.

Teknik observasi dilakukan bersama-sama dengan

pengumpulan kebutuhan sistem yang lain. Penulis mengamati situs

pembelajaran lynda.com, udemy.com, coursera.com, adapaun yang

penulis amati adalah sebagai berikut :

1. Cara penyajian konten video learning

2. Sistem pembelajaran mulai dari register, login, profil

member

3. Design tampilan atau layout dari website

4.2.2 Studi Pustaka

Menurut Indrajani (2011:1), studi pustaka merupakan

metode yang dilakukan dengan cara mengumpulkan, membaca,

dan mempelajari data-data yang ada dari berbagai media, seperti

buku-buku, hasil karya tulis, jurnal-jurnal penelitian atau artikel-

artikel dari internet yang berhubungan dengan masalah yang

dibahas. Dalam hal ini penulis mengumpulkan data dari buku

23

tentang framework laravel, buku-buku yang ada diperpustakaan,

dan jurnal dari internet.

4.3 Alat dan Pengembangan Sistem

4.3.1 Alat Pengembangan Sistem

Menurut Rosa dan Shalahuddin (2014:137), UML merupakan

bahasa visual untuk pemodelan dan komunikasi mengenai sebuah

sistem dnegan menggunakan diagram dan teks-teks pendukung.

UML hanya berfungsi untuk melakukan pemodelan. Jadi

penggunaan UML tidak terbatas pada metodologi tertentu, meskipun

pada kenyataannya UML paling banyak diguakan pada metodologi

berorientasi objek.

4.3.1.1. Model Proses

a. Use Case Diagram

Menurut Rosa dan Shalahuddin (2014:155), Use case

atau diagram use case merupakan pemodelan untuk kelakukan

(behavior) sistem informasi yang akan dibuat. Use case

mendeskripsikan sebuah interaksi antara satu atau lebih aktor

dengan sistem informasi yang akan dibuat. Secara kasar, use

case digunakan untuk mengetahui fungsi apa saja yang ada

didalam sebuah sistem informasi dan siapa saja yang berhak

menggunakan fungsi-fungsi itu.

24

Syarat penamaan pada use case adalah nama

didefenisikan sesimpel mungkin dan dapat dipahami. Ada dua

ahal utama pada use case yaitu pendefinisisan apa yang disebut

aktor dan use case.

1. Aktor merupakan orang, proses, atau sistem lain yang

berinteraksi dengan sistem informasi yang akan dibuat

diluar sistem informasi yang akan dibuat itu sendiri, jadi

walaupun simbol dari aktor adalah gambar orang, tapi

aktor belum tentu merupakan orang.

2. Use case merupakan fungsionalitas yang disediakan

sistem sebagai unit-unit yang saling bertukar pesan antar

unit atau aktor.

Berikut simbol-simbol use case menurut (Rosa dan

Shalhuddin, 2014: 156):

Tabel 4.1 Simbol – Simbol Use Case

Nama

Komponen

Simbol

Keterangan

Use Case

Fungsionalitas yang

disediakan sistem sebagai

unit-unit yang saling bertukar

pesan antar unit atau aktor,

biasanya dinyatakan dengan

menggunakan kata kerja

diawal frase nama use case

25

Nama

Komponen

Simbol

Keterangan

Actor

Orang, proses, atau sistem

lain yang berinteraksi dengan

sistem informasi yang akan

dibuat diluar sistem informasi

yangakan dibuat itu sendiri,

jadi walaupun simbol dari

aktor adalah gambar orang,

tapi aktor belum tentu

merupakan orang, biasanya

dinyatakan menggunakan kata

benda diawal frase nama

aktor.

Association

Komunikasi antara aktor dan

use case yang berpartisipasi

pada use case atau use case

memiliki interaksi pada aktor.

wEktensi /

extend

<<extend>>

Relasi use case tambahan

kesebuah use case diaman use

case yang ditambahkan dapat

berdiri sendiri walaupun tanpa

use case tambahan itu mirip

dengan prinsip inheritance

pada pemograman

berorientasi objek, biasanya

use case tambahan memiliki

nama dapan yang sama

dengan use case yang

tambahkan.

26

Nama

Komponen

Simbol

Keterangan

Generalisasi /

generalization

Hubungan generalisasi dan

spesialisasi (umum-khusus)

antara dua buah use case

dimana fungsi yang satu

adalah fungsi yang lebih

umum dari yang lainnya.

Include <<Include>>

Relasi use case tambahan ke

sebuah use case dimana use

case yang ditambahkan

memerlukan use case ini

untuk menjalankan fungsinya

atau sebagai syarat dijalankan

use case ini.

Sumber: Rosa dan Shalahuddin (156:2014)

b. Class Diagram

Menurut Rosa dan Shalahuddin (2014:141), Diagram kelas

atau class diagram menggambarkan struktur sistem dari segi

pendefinisian kelas-kelas yang akan dibuat untuk

membangun sistem. Kelas memiliki apa yang disebut atribut

dan metode atau operasi.

1. Atribut merupakan variabel-variabel yang dimiliki oleh

suatu kelas.

27

2. Operasi atau metode adalah fungsi-fungsi yang dimiliki

oleh suatu kelas.

Kelas-kelas yang ada pada struktur sistem harus dapat

melakukan fungsi-fungsi sesuai dengan kebutuhan sistem.

Susunan struktur kelas yang baik pada diagram kelas

sebaiknya memiliki jenis-jenis kelas berikut ini :

1. Kelas main

Kelas yang memiliki fungsi awal dieksekusi ketika

sistem dijalankan.

2. Kelas yang menangani tampilan sistem

Kelas yang mendefinisikan dan mengatur tampilan ke

pemakai

3. Kelas yang diambil dari pendahuluan use case

Kelas yang menagani fungsi-fungsi yang harus ada di

ambil dari pendefinisian use case.

4. Kelas yang diambil dari pendefinisian data

Kelas yang digunakan untuk memegang atau

membungkus data menjadi sebuah kesatuan yang

diambil maupun akan disimpan ke basis data.

Jenis-jenis kelas diatas juga dapat digabungkan satu

sama lain sesuai dengan pertimbangan yang dianggap baik

28

asalkan fungsi-fungsi yang sebaiknya ada pada struktur kelas

tetap ada.

c. Activity Diagram

Menurut Rosa dan Shalahuddin (2014: 161), Diagram

aktivitas atau activity diagram mengambarkan workflow

(aliran kerja) atau aktivitas dari sebuah ssitem atau proses

bisnis yang ada pada perangkat lunak. Yang perlu

diperhatikan disini adalah bahwa diagram aktivitas

menggambarkan aktivitas sistem bukan apa yang dilakukan

aktor, jadi aktivitas yang dapat dilakukan oleh sistem.

Diagram aktivitas juga banyak digunakan untuk

mendefinisikan hal – hal berikut :

1. Rancangan proses bisnis dimaan setiap urutan aktivitas

yang digambarkan merupakan proses bisnis sistem yang

didefinisikan.

2. Urutan atau pengelompokkan tampilan dari sistem / user

interface dimana setiap aktivitas dianggap memiliki

sebuah rancangan antaruka tampilan.

3. Rancangan pengujian dimana setiapa aktivitas dianggap

memerlukan sebuah pengujian yang perlu didefinisikan

kasus ujinya.

4. Rancangan menu yang ditampilkan pada perangkat.

29

Berikut adalah simbol-simbol yang ada pada diagram aktivitas:

Tabel 4.2. Simbol Activity Diagaram

Nama

Komponen

Simbol

Keterangan

Status awal

Status awal aktivitas sistem,

sebuah diagram aktivitas

memiliki sebuah status

awal.

Aktivitas

Aktivitas yang dilakukan

sistem, aktivitas biasanya

diawali dengan kata kerja.

Percabangan /

decision

Asosiasi percabangan

dimana jika ada pilihan

aktivitas lebih dari satu.

Penggabungan

/ join Asosiasi penggabungan

dimana lebih dari satu

aktivitas digabungkan

menjadi satu.

Status akhir Status akhir yang dilakukan

sistem, sebuah diagram

aktivitas memiliki sebuah

setatus akhir.

Swimlane Memisahkan organisasi

bisnis yang bertanggung

jawab terhadap aktivitas

yang terjadi

Sumber: Rosa dan Shalahuddin (162:2014)

Nama swimlane

30

4.3.2 Teknik Pengembangan Sistem

Teknik yang digunakan untuk mengembangkan sistem

adalah Web Engineering. Menurut Linda Marlinda dan Abdul

Hamid (2014:2), Web Engineering (WE) merupakan rekayasa web

yang mengadaptasi rekayasa perangkat lunak dalam hal konsep

dasar yang menekankan pada aktifitas teknis dan manajemen.

Pengembangan Sitem bertujuan menyusun sitem baru untuk

menggantikan sistem lama yang secara keseluruhan atau

memperbaiki sistem yang telah berjlaan. Metode ini memerlukan

pendekatan yang sistematik dan sekuensial yang mulai pada tingkat

dan kemajuan sistem pada setiap tahapan (Turban, 1999).

Metode web engineering terdapat 5 (lima) tahpaan untuk

dapat mengembangkan suatu perangkat lunai seperti gambar

dibawah ini :

31

Sumber : Linda Marlina,Abdul Hamid (2:2014)

Gambar 4.1. Tahapan-tahapan Web Engineering

1. Customer Communication

Komunikasi dalam hal ini terutama terkonsentrasi pada

dua hal, analisa bisnis dan perumusan. Analisa bisnis akan

mendefinisikan hal-hal apa saja yang akan termuat di dalam

aplikasi web, misalnya pengguna web yang akan dibangun,

perubahan potensial dalam lingkungan bisnis, integrasi antara

web yang akan dibangun dengan situasi bisnis perusahaa,

maupun database perusahaan. Perumusan adalah pengupulan

informasi tentang hal-hal yang akan dimuat dalam web yang

melibatkan semua calon pengguna.

32

2. Planning

Perencanaan proyek pengembangan aplikasi web

kemudian ditentukan, perencanaan akan terdiri dari

pendefinisian pekerjaan dan target waktu atas pekerjaan maupun

sub pekerjaan yang ditentukan tersebut.

3. Modeling

Tujuan dari aktivitas ini adalah unutk menjelaskan hal-

hal apa saja yang memang diperlukan / dibutuhkan pada aplikasi

yang akan dibangun dan solusi yang akan ditawarkan d yang

diharapkan dapat menjawab apa yang tersirat dari hasil-hasil

analisa dan pengumpulan data.

4. Construction

Pembangunan aplikasi web memadukan antara

perkembangan teknologi dengan tools pengembangan web yang

telah ada, artinya memilih tools yang efektif namun tetap dapat

menyesuaikan dengan teknologi yang berkembang saat ini.

5. Deployment

Aplikasi web diciptakan untuk dapat berguna bagi

kebutuhan pekerjaan, dapat dioperasi oleh end-user, dan

kemudian dilakukan evaluasi secara berkala, emmberi masukan-

33

masukan kepada tema pengembang dan apabila diperlukan akan

dilakukan modifikasi pada aplikasi web tersebut.

Alasan penulis menggunakan metode ini, karena metode ini

cukup efektif sebagai paradigma dalam rekayasa perangka lunak,

karena mendapatkan kebutuhan dan aturan yang jelas, dalam

pembuatan perangkat lunak bisa dilakukan secara cepat dan

memungkinkan untuk merubah kembali perangkat lunak agar

sesuai dengan kebutuhan.

4.4 Alat dan Teknik Pengujian Perangkat Lunak

Penguian perangkat lunak sebagai suatu elemen kritis dari jaminan

kualitas perangkat lunak dan mempresentasikan kajian pokok dari spesifikasi,

desain, dan pengkodean. Adapun teknik yang digunakan oleh penulis adalah

pengujian Black-Box.

Pengujian Black-Box berfokus pada penyerahan fungsional perangkat

lunak dengan demikian pengujian Black-Box memungkinkan perekayasa

perangkat lunak mendapatkan serangkaian kondisi input yang sepenuhnya

dengan menggunakan semua peryaratan fungsional untuk satu program.

Pengujian Black-Box merupakan alternatif dari teknik White Box, tetapi

merupakan pendekan komplementer yang kemungkinan besar mampu

mengungkapkan kelas kesalahan dari pada metode White Box.

34

Pengujian Black-Box berusaha menemukan kesalahan dalam kategori

sebagai berikut:

a. Fungsi-fungsi yang tidak benar atau hilang.

b. Kesalahan interface.

c. Kesalahan dalam struktur data atau akses database eksternal.

d. Kesalahan lahan kinerja.

e. Inisialisasi dan kesalahan terminasi.

Pengujian Black-Box adalah pengujian aspek fundamental sistem

tanpa memperhatikan struktur logika internal perangkat lunak. Metode ini

digunakan untuk mengetahui apakah perangkat lunak berfungsi dengan

benar. Pegujian Black-Box merupakan metode perancangan data uji yang

didasarkan pada spesifikasi perangkat lunak. Data uji dibangkitkan,

dieksekusi pada perangkat lunak dan kemudian keluaran dari perangkat lunak

dicek apakah telah sesuai dengan yang diharapkan.

35

BAB V

HASIL DAN PEMBAHASAN

5.1 Hasil

5.1.1 Customer Communication

Website media pembelajaran yang akan dibuat dengan menggunakan

framework Laravel ini terdiri dari fitur kursus dimana pengguna dapat

mengupload video atau audio sesuai dengan kategori dan subkategori yang

dibentuk sebagai topik dari kursus tersebut, sehingga pada media

pembelajaran ini pengguna dapat bertindak secara aktif, selain itu terdapat

fitur kuis yang dapat dibuat oleh pengguna dan dapat diikuti oleh pengguna

lainnya sehingga terdapat interaksi antar pengguna, dilengkapi dengan fitur

forum yang dapat membantu pengguna jika mendapat kendala atau

mempunyai pertanyaan dapat berdiskusi melalui forum.

Dari penjelasan di atas maka dapat di tarik kesimpulan pada

framework Laravel dibutuhkan folder untuk menampung topik dan cover

kursus, serta folder untuk menampung cover kuis.

5.1.2 Planning

Tahap planning dimulai dengan menganalisa kebutuhan fungsional

sistem pada website media pembelajaran yang akan dibuat dengan

menggunakan Laravel, seperti berikut :

36

1. Sistem harus dapat melakukan pendataan kursus.

a. Pengguna media bisa memasukkan berbagai kursus sesuai dengan

kategori dan subkategori yang tersedia, sedangkan administrator tidak

dapat memasukkan data kursus namun dapat melihat kursus yang

telah dimasukkan oleh pengguna media, mengedit, serta menghapus

kursus tersebut jika tidak sesuai dengan ketentuan website media

pembelajaran.

b. Pengguna media dapat mengedit dan menghapus data kursus

c. Kursus terdiri dari topik, pengguna media bisa memasukkan topik

kursus dengan format video .mp4 atau audio dengan format .mp3

d. Pengguna media dapat mencari dan mengikuti kursus yang telah di

buat oleh pengguna lain

e. Pengguna media dapat melihat history apa saja kursus yang telah ia

ikuti

2. Sistem dapat melakukan pendataan kuis

a. Pengguna media dapat membuat kuis sesuai dengan kategori dan

subkategori yang telah ada beserta cover dari kuis tersebut dan

menetapkan waktu serta soal yang tampil saat pengerjaan kuis, ,

sedangkan administrator tidak dapat memasukkan data kuis namun

dapat melihat kuis yang telah dimasukkan oleh pengguna media,

mengedit, serta menghapus kuis tersebut jika tidak sesuai dengan

ketentuan website media pembelajaran.

37

b. Pengguna media dapat mengedit dan menghapus kuis yang telah ia

buat

c. Pengguna media dapat memasukkan soal pada kuis yang telah ia buat

dengan jenis soal pilihan ganda

d. Pengguna media dapat melihat data peserta yang telah mengikuti kuis

yang ia buat

e. Pengguna media dapat mengikuti kuis yang telah dibuat oleh

pengguna media lainnya

3. Sistem dapat melakukan pendataan forum

a. Pengguna media dapat bertanya kepada pengguna media lainnya jika

terdapat kendala atau masalah baik dalam proses belajar di website

atau di luar website ada forum tanya jawab yang telah disediakan

sesuai dengan kategori dan subkategori yang ada

b. Pengguna media dapat mengedit atau menghapus topik yang telah ia

input atau tanyakan di forum

c. Pengguna dapat memberikan jawaban atau komentar pada forum

Framework Laravel memiliki stuktur folder, maka dari itu untuk

menerapkan hasil analisa di atas berikut adalah Folder pada framework

Laravel yang digunakan :

38

1. /app, digunakan untuk menyimpan model, controller, dan fungsi yang

sudah ditulis.

2. /public, folder ini berhubungan langsung dengan interface, didalamnya

berisi file css, javascript dan komponen pendukung dari website media

pembelajaran. Pada folder inilah data kursus, kuis, dan forum disimpan.

3. /resources, digunakan untuk menyimpan view dari website media

pembelajaran.

4. /database, digunakan untuk menyimpan file migrasi database yang

berisikan struktur tabel.

5. /config/database.php, digunakan untuk menyimpan koneksi ke

database.

6. /config/mail.php, digunakan untuk menyimpan konfigurasi pengiriman

email.

5.1.3 Modeling

5.1.3.1 Analysis Modeling

A. Analysis Content

Informasi - informasi yang akan disampaikan kepada

pengguna adalah informasi kursus, kuis, forum, dan komentar.

B. Analysis Interaction

Interaksi yang dilakukan pengguna terhadap website media

pembelajaran diatur dengan middleware pada framework Laravel,

39

interaksi dikelompokan menjadi 2 kategori yaitu pengguna yang

memiliki akses sebagai pengguna biasa atau disini penulis sebut

sebagai pengguna media dapat berinteraksi pada halaman pengguna

media yang dapat mengelola kursus, mengelola kuis, dan mengelola

forum. Pengguna yang memiliki akses sebagai administrator dapat

berinteraksi pada halaman backend yang dapat mengelola seluruh

website seperti pengaturan website, kategori dan subkategori,

mengelola pengguna biasa, mengelola kuis, mengelola kursus, serta

forum, yan telah dibuat pengguna media.

C. Analysis function

Pada tahapan ini pengguna dapat melihat informasi berdasarkan

aksesnya, maka pada routing Laravel halaman akan dibagi menjadi

group menggunakan middleware, bagi pengguna biasa atau pengguna

media hanya dapat melihat informasi yang ada pada halaman

pengguna media. Administrator dapat dapat melihat semua

informasi pada website media pembelajaran. Informasi yang

disampaikan kepada pengguna tersebut setelah pengguna

melakukan proses login sesuai hak aksesnya, seperti berikut :

1. Pengguna Media (User Frontend)

Pengguna media hanya dapat mengakses halaman kursus,

kuis, serta forum dan memiliki hak penuh untuk mengedit dan

40

menghapus terhadap kursus, kuis, atau topik pada forum yang

telah ia input. Pengguna media dapat mengelola data komentar

pada topik di forum.

2. Administrator (User Backend)

Administrator tidak dapat menginput kursus, kuis, ataupun

topik forum, namun dapat mengedit atau menghapus semua data

kursus, kuis, topik forum serta data komentar yang telah diinput

oleh pengguna media. Administrator dapat mengelola user

backend, dan semua informasi pada website media pembelajaran

seperti logo, nama website, pengaturan email dan data dari

website media pembelajaran ini.

Berikut adalah hasil perancangan atau simulasi yang akan

diterapkan :

Gambar 5.1 State Transition Diagram Website

41

D. Analysis Configuration

Website media pembelajaran ini dibuat dengan menggunakan

framework Laravel akan diakses melalui world wide web (www) yang

digunakan pada jaringan internet dan memiliki database yang

menyimpan data informasi untuk disampaikan pada pengguna saat

mengakses website ini. Konfigurasi akan database disimpan pada file

config/database.php dan .env pada folder root website.

Berikut adalah use case diagram, class diagram, dan activity

diagram yang menjelaskan struktur database dan aktifitas dari

pengguna website media pembelajaran.

1. Use case diagram

a. Definisi Aktor

Berikut adalah deskripsi pendefinisian actor pada website

media pembelajaran :

Tabel 5.1 Definisi Aktor

No Aktor Deskripsi

1 Administrator Orang yang bertugas dan memiliki hak akses

untuk mengelola semua informasi pada

website.

2 Pengguna Media Pengguna media merupakan user frontend

yang diperbolehkan untuk mengelola kursus,

kuis, dan forum

b. Definisi Use case

Berikut adalah deskripsi pendefinisian use case pada website

media pembelajaran :

42

Tabel 5.2 Definisi Use case

No Use case Deskripsi

1 Validasi Merupakan proses pengecekan hak

akses siapa yang berhak mengakses

mengolah data halaman.

Login wajib untuk fungsi-fungsi yang

berkaitan dengan pengubahan ke basis

data, oleh karena itu harus mengecek

validasi user yang mengakses jika

belum terdaftar akan di arahkan ke

halaman register (pengguna media).

Validasi merupakan generalisasi dari

proses login, logout, register, lupa

password dan memeriksa status login

2 Login Merupakan proses untuk masuk ke

akun.

3 Logout Merupakan proses untuk keluar dari

akun.

4 Register Merupakan proses daftar untuk

mendapatkan akun

5 Lupa Password Merupakan proses untuk setel ulang

kata sandi di basis data

6 Memeriksa Status Login Merupakan proses untuk memeriksan

apakah pengguna sudah melakukan

login atau belum dan cek akses akun.

7 Mengelola forum Mengelola forum merupakan proses

generalisasi yang meliputi lima buah

proses pengelolaan data forum yaitu

melihat topik forum, menambah topik

forum, mengubah topik forum,

menghapus topik forum, mencari

topik forum.

8 Melihat topik Forum Merupakan proses menampilkan data

topik forum yang ada di basis data

9 Menambah topik forum Merupakan proses memasukkan data

topik forum ke dalam di basis data

10 Mengubah topik forum Merupakan proses megubah data topik

forum yang ada di basis data

11 Menghapus topik forum Merupakan proses mengapus data

topik forum yang ada di basis data

12 Mencari topik forum Merupakan proses mencari data topik

forum yang ada di basis data

13 Mengelola komentar

forum

Mengelola komentar forum

merupakan proses generalisasi yang

meliputi empat buah proses

pengelolaan data komentar forum

yaitu melihat komentar forum,

menambah komentar forum,

mengubah komentar forum,

menghapus komentar forum.

14 Melihat komentar forum Merupakan proses menampilkan data

komentar forum yang ada di basis data

15 Menambah komentar Merupakan proses memasukkan data

43


forum komentar forum ke dalam di basis data

16 Mengubah komentar

forum

Merupakan proses megubah data


17 Menghapus komentar

forum

Merupakan proses mengapus data


18 Mencari komentar forum Merupakan proses mencari data

komentar forum yang ada pada basis

data

19 Mengelola kuis Mengelola kuis merupakan proses


proses pengelolaan data kuis yaitu

melihat kuis, menambah kuis,

mengubah kuis, menghapus kuis,

mencari kuis.

20 Melihat kuis Merupakan proses menampilkan data

kuis yang ada di basis data

21 Menambah kuis Merupakan proses memasukkan data

kuis ke dalam di basis data

22 Mengubah kuis Merupakan proses megubah data kuis

yang ada di basis data

23 Menghapus kuis Merupakan proses mengapus data kuis


24 Mencari kuis Merupakan proses mencari data kuis


25 Mengelola soal kuis Mengelola soal kuis merupakan proses


proses pengelolaan data soal kuis

yaitu melihat soal kuis, menambah

soal kuis, mengubah soal kuis,

menghapus soal kuis, mencari kuis.

26 Melihat soal kuis Merupakan proses menampilkan data

soal kuis yang ada di basis data

27 Menambah soal kuis Merupakan proses memasukkan data

soal kuis ke dalam di basis data

28 Mengubah soal kuis Merupakan proses megubah data soal


29 Menghapus soal kuis Merupakan proses mengapus data soal


30 Mencari soal kuis Merupakan proses mencari data soal


31 Melihat peserta kuis Merupakan proses menampilkan data

peserta kuis yang ada di basis data

32 Mengikuti kuis Mengikuti kuis merupakan proses

mendaftarkan akun ke dalam basis

data

33 Mendaftarkan akun Merupakan proses memasukkan data

akun ke dalam basis data

34 Menjawab soal kuis Menjawab soal kuis merupakan proses

generalisasi yang meliputi 3 buah

proses pengelolaan soal kuis yaitu

Memasukkan jawaban, Mengubah

jawaban, dan Melihat jawaban

Melihat history kuis Merupakan proses menampilkan data

44


history dari kuis yang diikuti yang ada

di basis data

35 Memasukkan jawaban Merupakan proses memasukkan

jawaban ke dalam di basis data

36 Mengubah jawaban Merupakan proses megubah jawaban


37 Melihat jawaban Merupakan proses menampilkan

jawaban yang ada di basis data

38 Melihat notifikasi Merupakan proses menampilkan

notifikasi yang ada di basis data

39 Mengelola kursus Mengelola kursus merupakan proses


proses pengelolaan data kursus yaitu

melihat kursus, menambah kursus,

mengubah kursus, menghapus kursus,

mencari kursus.

40 Melihat kursus Merupakan proses menampilkan data

kursus yang ada di basis data

41 Menambah kursus Merupakan proses memasukkan data

kursus ke dalam di basis data

42 Mengubah kursus Merupakan proses megubah data


43 Menghapus kursus Merupakan proses mengapus data


44 Mencari kursus Merupakan proses mencari data


45 Melihat history kursus Merupakan proses menampilkan data

history dari kursus yang diikuti yang

ada di basis data

46 Mengelola topik kursus Mengelola topik merupakan proses


proses pengelolaan data topik yaitu

melihat topik kursus, menambah topik

kursus, mengubah topik kursus,

menghapus topik kursus, mencari

topik kursus.

47 Melihat topik kursus Merupakan proses menampilkan data

topik kursus yang ada di basis data

48 Menambah topik kursus Merupakan proses memasukkan data

topik kursus ke dalam di basis data

49 Mengubah topik kursus Merupakan proses megubah data topik


50 Menghapus topik kursus Merupakan proses mengapus data

topik kursus yang ada di basis data

51 Mencari topik kursus Merupakan proses mencari data topik


52 Mengelola settings Mengelola settings merupakan proses

generalisasi yang meliputi dua buah

proses pengelolaan data settings yaitu

mengubah settings dan melihat

settings.

53 Mengubah settings Merupakan proses megubah data

settings yang ada di basis data

45


54 Melihat settings Merupakan proses menampilkan data

settings yang ada di basis data

55 Mengelola pengguna

media

Mengelola pengguna media

merupakan proses generalisasi yang

meliputi lima buah proses pengelolaan

data pengguna media yaitu melihat

pengguna media, menambah

pengguna media, mengubah pengguna

media, menghapus pengguna media,

mencari pengguna media.

56 Melihat pengguna media Merupakan proses menampilkan data

pengguna media yang ada di basis

data

57 Menambah pengguna

media

Merupakan proses memasukkan data

pengguna media ke dalam di basis

data

58 Mengubah pengguna

media

Merupakan proses megubah data


data

59 Menghapus pengguna

media

Merupakan proses mengapus data


data

60 Mencari pengguna media Merupakan proses mencari data


data

Mengelola prestasi Mengelola prestasi merupakan proses


proses pengelolaan data prestasi yaitu

melihat prestasi, menambah prestasi,

mengubah prestasi, menghapus

prestasi, mencari prestasi.

61 Melihat prestasi Merupakan proses menampilkan data

prestasi yang ada di basis data

62 Menambah prestasi Merupakan proses memasukkan data

prestasi ke dalam di basis data

63 Mengubah prestasi Merupakan proses megubah data


64 Menghapus prestasi Merupakan proses mengapus data


65 Mencari prestasi Merupakan proses mencari data


66 Mengelola kategori Mengelola kategori merupakan proses


proses pengelolaan data kategori yaitu

melihat kategori, menambah kategori,

mengubah kategori, menghapus

kategori, mencari kategori.

67 Melihat kategori Merupakan proses menampilkan data

kategori yang ada di basis data

68 Menambah kategori Merupakan proses memasukkan data

kategori ke dalam di basis data

69 Mengubah kategori Merupakan proses megubah data

46



70 Menghapus kategori Merupakan proses mengapus data


71 Mencari kategori Merupakan proses mencari data


72 Mengelola subkategori Mengelola subkategori merupakan

proses generalisasi yang meliputi lima

buah proses pengelolaan data

subkategori yaitu melihat subkategori,

menambah subkategori, mengubah

subkategori, menghapus subkategori,

mencari subkategori.

73 Melihat subkategori Merupakan proses menampilkan data

subkategori yang ada di basis data

74 Menambah subkategori Merupakan proses memasukkan data

subkategori ke dalam di basis data

75 Mengubah subkategori Merupakan proses megubah data


76 Menghapus subkategori Merupakan proses mengapus data


77 Mencari subkategori Merupakan proses mencari data


78 Mengelola administrator Mengelola administrator merupakan

proses generalisasi yang meliputi lima

buah proses pengelolaan data

administrator yaitu melihat

administrator, menambah

administrator, mengubah

administrator, menghapus

administrator, mencari administrator.

79 Melihat administrator Merupakan proses menampilkan data

administrator yang ada di basis data

80 Menambah administrator Merupakan proses memasukkan data

administrator ke dalam di basis data

81 Mengubah administrator Merupakan proses megubah data


82 Menghapus administrator Merupakan proses mengapus data


84 Mencari administrator Merupakan proses mencari data


c. Diagram Use case

Berikut adalah diagram use case dari website media

pembelajaran yang terdiri dari use case administrator (backend)

dan use case pengguna media (frontend).

47

Gambar 5.2. Use case pengguna media (frontend)

Gambar 5.3. Use case administrator (backend)

48

2. Class diagram

Berikut adalah diagram kelas yang akan diterapkan pada website

media pembelajaran dengan menggunakan framework Laravel .

Gambar 5.4. Class Diagram

49

PENGGUNA MEDIA SISTEM

Login

cek

user

ada

tidak ada

Menampilkan Menu

Menjawab Soal Kuis

Mengelola Kursus

Mengelola Forum

Mengelola Kuis

Melihat Prestasi

Mengelola Topik Kursus


Mengelola Soal Kuis

Melihat History Kuis

Log Out

Register

Melihat History Kursus

Mengikuti Kuis

Melihat Notifikasi

Melihat History Kursus

Mengikuti Kursus

3. Activity diagram

Berikut adalah diagram aktivitas dari website media pembelajaran

yang diterapkan dengan menggunakan framework Laravel :

Gambar 5.5. Activity Diagram Pengguna Media

50

ADMINISTRATOR SISTEM

Login

cek

user

ada

tidak ada

Menampilkan Menu

Mengelola Settings

Mengelola Kategori

Mengelola Administrator

Mengelola Kursus

Mengelola Forum

Mengelola Kuis

Mengelola Prestasi

Mengelola Topik Kursus


Mengelola Soal Kuis

Mengelola Subkategori

Log Out

Gambar 5.6. Activity Diagram Administrator

5.1.3.2 Design Modeling

A. Design Database

Design database adalah menentukan struktur dari tabel-

tabel yang akan dibuat berisikan nama-nama field, type field dan

ukurannya, dimana tabel-tabel tersebut digunakan untuk

menampung data. Adapun Desain tabel Penerapan Framework

Laravel Pada Website Media pembelajaran pada gambar 5.3.

51

1) Tabel data_settings

Tabel data_settings digunakan untuk menampung data umum dari

website media pembelajaran yang meliputi nama website, kontak,

logo, dsb.

Primary Key : idSettings

Tabel 5.3. Desain Tabel Data_settings

No Nama Field Tipe Data Keterangan

1 idSettings Numeric Id Settings

2 nmWeb String Nama website

3 eMail String Email website

4 Alp String Telephone website

5 alamat String Alamat website

6 about String Tentang website

7 privacyPolicy String Kebijakan

8 termsCondition String Istilah kondisi

9 contactUs String Kontak website

10 documentation String Dokumentasi

11 logo String Logo webite

12 favicon String Favicon website

13 maintenance String Status Maintenance

14 IPMaintenance String IP maintenance

15 created_at Date Tanggal dibuat

16 updated_at Date Tanggal dirubah

2) Tabel data_userlogin

Tabel data_userlogin digunakan untuk menampung data login dari

user website media pembelajaran.

Primary Key : idUser

52

Tabel 5.4. Desain Tabel Data_userlogin


1 idUser Numeric Id User

2 userName String Username login

3 passWord String Password login

4 eMail String Email user

5 tglDaftar Date Tanggal daftar

6 Status Numeric Status user

7 Akses String Akses user

8 userModified String User yang proses

9 remember_token String Token


11 update_at Date Tanggal dirubah

3) Tabel data_userdata

Tabel data_userdata digunakan untuk menampung data umum dari

user website media pembelajaran yang meliputi nama lengkap,

tanggal lahir, alamat, dsb.

Primary Key : idData

Foreign Key : idUser

Tabel 5.5. Desain Tabel Data_userdata


1 idData Numeric Id Data


3 namaLengkap String Nama lengkap

4 jenisKelamin String Jenis Kelamin

5 tglLahir Date Tanggal Lahir

6 Alamat String Alamat

7 Telp String Telephone

8 point Numeric Point prestasi

9 prestasi Numeric Id Prestasi

10 profil String Profil

53




4) Tabel data_kategori

Tabel data_kategori digunakan untuk menampung data kategori

dari website media pembelajaran.

Primary Key : idKategori

Tabel 5.6. Desain Tabel Data_kategori


1 idKategori Numeric Id Kategori

2 nmKategori String Nama kategori

3 status String Status

4 userModified String User proses



5) Tabel data_subkategori

Tabel data_subkategori digunakan untuk menampung data

subkategori dari website media pembelajaran.

Primary Key : idSubkategori

Foreign Key : idKategori

Tabel 5.7. Desain Tabel Data_subkategori


1 idSubkategori Numeric Id Subkategori

2 idKategori Numeric Id Kategori

3 nmSubkategori String Nama Subkategori

4 status String Status

5 userModified String User proses

54



6) Tabel data_kursus

Tabel data_kursus digunakan untuk menampung data kursus yang

dibuat oleh pengguna di website media pembelajaran.

Primary Key : idKursus

Foreign Key : idSubkategori, idUser

Tabel 5.8. Desain Tabel Data_kursus


1 idKursus Numeric Id Kursus



4 nmKursus String Nama kursus

5 jmlTopik Numeric Jumlah topik

6 Viewer Numeric Jumlah user yang lihat

7 Status Numeric Status




7) Tabel data_kursustopik

Tabel data_kursustopik digunakan untuk menampung data topik

kursus yang dibuat oleh pengguna di website media pembelajaran.

Primary Key : idTopik

Foreign Key : idKursus

55

Tabel 5.9. Desain Tabel Data_kursustopik


1 idTopik Numeric Id Topik


3 NmTopik String Nama topik

4 Deskripsi String Deskripsi topik

5 TipeFile String Tipe file

6 Status String Status kursus




8) Tabel data_historykursus

Tabel data_historykursus digunakan untuk menampung data

history kursus pengguna di website media pembelajaran.

Primary Key : idHistory

Foreign Key : idUser,idKursus,idTopik

Tabel 5.10. Desain Tabel Data_historykursus


1 idHistory Numeric Id Topik



4 idTopik Numeric Id Topik



9) Tabel data_kuis

Tabel data_kuis digunakan untuk menampung data kuis yang


Primary Key : idKuis

56

Foreign Key : idSubkategori, idUser

Tabel 5.11. Desain Tabel Data_kuis


1 idKuis Numeric Id Kuis



4 nmKuis String Nama kuis

5 tampilSoal Numeric Soal yang tampil

6 jumlahSoal Numeric Jumlah soal

7 Waktu Numeric Waktu pengerjaan

8 Peserta Numeric Peserta kuis

9 Status String Status kuis




10) Tabel data_soal

Tabel data_soal digunakan untuk menampung data soal yang


Primary Key : idSoal

Foreign Key : idKuis

Tabel 5.12. Desain Tabel Data_soal


1 idSoal Numeric Id Soal


3 Soal String Soal

4 A String Jawaban A

5 B String Jawaban B

6 C String Jawaban C

7 D String Jawaban D

8 Penjelasan String Penjelasan jawaban

9 Kunci String Kunci jawaban

57


10 status String Status soal




11) Tabel data_pesertakuis

Tabel data_pesertakuis digunakan untuk menampung data peserta

yang mengikuti kuis di website media pembelajaran.

Primary Key : idPeserta

Foreign Key : idKuis, idUser

Tabel 5.13. Desain Tabel Data_pesertakuis


1 idPeserta Numeric Id Peserta


3 idUser Numeric Id Soal

4 sisaWaktu Numeric Sisa waktu

5 Soal Numeric Id Soal

6 Nilai Numeric Nilai

7 status String Status peserta



12) Tabel data_jawaban

Tabel data_jawaban digunakan untuk menampung data jawaban

peserta yang mengikuti kuis di website media pembelajaran.

Primary Key : idJawaban

Foreign Key : idPeserta, idSoal

58

Tabel 5.14. Desain Tabel Data_jawaban


1 idJawaban String Id jawaban

2 idPeserta String Id peserta

3 idSoal String Id soal

4 Urutan String Urutan soal

5 Jawaban String Jawaban

6 TF String Benar atau salah



13) Tabel data_forum

Tabel data_forum digunakan untuk menampung data forum yang


Primary Key : idForum

Foreign Key : idSubkategori, idSoal

Tabel 5.15. Desain Tabel Data_forum


1 idForum Numeric Id forum

2 idSubkategori Numeric Id subkategori

3 idUser Numeric Id user

4 topikForum String Topik forum

5 isiTopik String Isi topic

6 jmlKomen Numeric Jumlah komentar

7 status String Status forum




59

14) Tabel data_forumkomentar

Tabel data_forumkomentar digunakan untuk menampung data

komentar yang dibuat oleh pengguna di website media

pembelajaran.

Primary Key : idFKomen

Foreign Key : idForum,idReply,idUser

Tabel 5.16. Desain Tabel Data_forumkomentar


1 idFKomen Numeric Id forum komentar

2 idForum Numeric Id forum

3 idReply Numeric Id balasan


5 Komentar String Komentar

6 Status String Status komentar




15) Tabel data_prestasi

Tabel data_prestasi digunakan untuk menampung data prestasi

yang dibuat oleh administrator di website media pembelajaran.

Primary Key : idPrestasi

Tabel 5.17. Desain Tabel Data_prestasi


1 idPrestasi Numeric Id Prestasi

2 nmPrestasi String Nama prestasi

3 Point Numeric Point prestasi

4 Status String Status prestasi


60




16) Tabel data_notifikasi

Tabel data_notifikasi digunakan untuk menampung data notifikasi

untuk pengguna di website media pembelajaran.

Primary Key : idNotifikasi

Foreign Key : idUser

Tabel 5.18. Desain Tabel Data_notifikasi


1 idNotifikasi Numeric Id notifikasi


3 forUser Numeric Untuk user

4 tipeNotif String Tipe notifikasi

5 url String url

6 Baca String Status baca



A. Design Interface

Design interface adalah menentukan rancangan tampilan

atau layout dari halaman website yang akan dibuat, rancangan tampilan

ini terdiri dari halaman landing, halaman frontend, dan halaman

backend yang akan disimpan pada folder resources/views.

1. Halaman Landing

Halaman landing adalah halaman utama atau halaman pertama yang

akan pengunjung lihat saat mengunjungi website media

61

LOGINREGISTERFORUMONLINE TESTCOURSESHOMELOGO

[email protected] 9999-9999999

GAMBAR

Cover kursus

Nama kursus

Nama author

Cover kursus

Nama kursus

Nama author

Cover kursus

Nama kursus

Nama author

Cover kursus

Nama kursus

Nama author

Cover kursus

Nama kursus

Nama author

Cover kuis

Nama kuis

Nama author

Cover kuis

Nama kuis

Nama author

Cover kuis

Nama kuis

Nama author

Cover kuis

Nama kuis

Nama author

Cover kuis

Nama kuis

Nama author

Contact

xxxxxxxx

xxxxxxxx

----------------------------------

999-9999999

[email protected]

Information

About Us

Contact Us

Privacy Policy

Terms & Conditions

Documentation

Register Now

xxxxxxxxxx SUBMIT

LOGO

Profil author

Topik forum

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Deskrisi topik forum





Komentar : 999

99

xxx

dd

mm

Nama author

Profil author

Topik forum







Komentar : 999

99

xxx

dd

mm

Nama author

pembelajaran yang terdiri dari menu home, courses, online test,

forum,login, register, dsb. berikut adalah design interface halaman

landing.

a. Halaman Home

Halaman home merupakan halaman yang terdiri kursus

terbaru, kuis yang terbaru, dan forum topik.

Gambar 5.7. Design halaman home

b. Halaman Courses

Halaman courses merupakan halaman yang

menampilkan data kursus yang ada pada basis data.

62



COURSES

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Contact

xxxxxxxx

xxxxxxxx

----------------------------------

999-9999999

[email protected]

Information

About Us

Contact Us

Privacy Policy

Terms & Conditions

Documentation

Register Now

xxxxxxxxxx SUBMIT

LOGO

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

Cover kursus

xxxxxxxxxx

xxxxxxxxxx

search

All courses

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

« 1 2 ... 999 »

Gambar 5.8. Design halaman courses

c. Halaman Online test

Halaman online test merupakan halaman yang

menampilkan data kuis yang ada pada basis data.

63



ONLINE TEST

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Contact

xxxxxxxx

xxxxxxxx

----------------------------------

999-9999999

[email protected]

Information

About Us

Contact Us

Privacy Policy

Terms & Conditions

Documentation

Register Now

xxxxxxxxxx SUBMIT

LOGO

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

Cover kuis

xxxxxxxx

xxxxxxxxxxxxx

search

All Online Test

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

« 1 2 ... 999 »

Gambar 5.9. Design halaman online test

d. Halaman Forum

Halaman forum merupakan halaman yang menampilkan

data forum yang ada pada basis data.

64



Contact

xxxxxxxx

xxxxxxxx

----------------------------------

999-9999999

[email protected]

Information

About Us

Contact Us

Privacy Policy

Terms & Conditions

Documentation

Register Now

xxxxxxxxxx SUBMIT

LOGO

search

All Topic

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

Kategori

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

- xxxxxxxxxxxxx

Profil author

Topik forum



xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx





Komentar : 999

99

xxx

dd

mm

Nama author

« 1 2 ... 999 »

Profil author

Topik forum








Komentar : 999

99

xxx

dd

mm

Nama author

Profil author

Topik forum








Komentar : 999

99

xxx

dd

mm

Nama author

Profil author

Topik forum








Komentar : 999

99

xxx

dd

mm

Nama author

Profil author

Topik forum








Komentar : 999

99

xxx

dd

mm

Nama author

Gambar 5.10. Design halaman forum

e. Halaman Register

Halaman register merupakan halaman yang berisikan

form pendaftaran sebagai user.

65



Contact

xxxxxxxx

xxxxxxxx

----------------------------------

999-9999999

[email protected]

Information

About Us

Contact Us

Privacy Policy

Terms & Conditions

Documentation

Register Now

xxxxxxxxxx SUBMIT

LOGO

New User

Full Name :

xxxxxxxxxxxxxxxxxxxxxxxx

E-Mail :

[email protected]

Username :


Password



Gambar



Contact

xxxxxxxx

xxxxxxxx

----------------------------------

999-9999999

[email protected]

Information

About Us

Contact Us

Privacy Policy

Terms & Conditions

Documentation

Register Now

xxxxxxxxxx SUBMIT

LOGO

I'M ALREADY REGISTERED

Username :


Password


Gambar

Gambar 5.11. Design halaman register

f. Halaman Login

Halaman login merupakan halaman yang berisikan form

untuk masuk ke sistem website sesuai dengan akses sebagai

pengguna atau administrator.

Gambar 5.12. Design halaman login

66

LOGO Home Courses Online Test Forum Gambar Create999

gambar xxxxxxxxxx

Statistik

TodayMY TRAFFIC

Courses

Your recent courses that you take

My Account

Course

999Online Test

999

Achievement

You have 999 pointVIEW ALL

gambar gambar gambar gambar gambar

Forum Activity

Latest forum topics & comments

gambarTopik Forum : xxxxxxxxx

Dibuat oleh : xxxxxxxx

99 days ago



99 days ago



99 days ago



99 days ago



99 days ago




VIEW ALL

Online TestYour recent test that you take

xxxxxxxxxxxxxxxxxxxxxxxxx

Author : xxxxxxxxxxx





999

xxxxx

999

xxxxx

999

xxxxx

Dashboard

My Courses

My Online Test

My Traffic

Settings

Logout

VIEW ALL

Recommended

Gambarxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxx

Learning.balonbox © Copyright 2015

2. Halaman Frontend

Halaman frontend adalah halaman untuk akses pengguna

yang terdiri dari menu home, courses, online test, forum. Pada

halaman frontend pengguna dapat mengikuti kursus, kuis, dan

forum, pengguna juga dapat membuat kursus, membuat kuis, dan

bertanya pada forum topic dari menu create. Berikut adalah design

interface halaman frontend.

a. Halaman Home

Halaman home merupakan dashboard pengguna yang

terdiri dari informasi prestasi, kursus, kuis, dan forum serta data

statistik pengguna. Berikut rancangannya :

Gambar 5.13. Design halaman home (dashboard)

67


balonbox.learning © Copyright 2015

Lesson : xxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx



Gambar

xxxxxxxxxxxxxxxxxxx

instructor

Cover kursusxxxxxxxxxxxxxx

xxxxxxxxxxxxxx

99 week ago

Instuctor : xxxxxxxxx

Viewer : 999

Lesson Topic : 999

LESSON TOPIC

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx




mp4

mp3

mp4

mp3

Resources

Course library

Course forum

Take online test

b. Halaman Courses

Halaman courses merupakan halaman belajar pengguna

yang menampilkan data kursus yang ada pada basis data, pada

halaman ini pengguna dapat memilih kursus yang ingin diikuti

lalu akan tampil halaman topik kursus. Berikut rancangannya :

Gambar 5.14. Design halaman courses

c. Halaman Online Test

Halaman online test merupakan halaman pengguna

untuk mengikuti kuis, pengguna akan memilih data kuis yang

ada maka akan tampil soal-soal yang ada basis data. Berikut

rancangannya :

68



xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx



Gambar

xxxxxxxxxxxxxxxxxxx

instructor

Cover kursusxxxxxxxxxxxxxx

xxxxxxxxxxxxxx

Question

Your Answer

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx




Answer

Gambar 5.15. Design halaman online test

d. Halaman Forum

Halaman forum terdiri data forum yang ada pada basis

data, pengguna dapat memberikan komentar atau tanggapan

pada topik forum yang ada. Berikut rancangannya :

69


Forum


Gambar

Xxxxxxxxxxxxxxxxxx

xcreated 99 days ago

Navigation

Course library

Online test

Make a Forum Topic

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx comment

profil

reply

xxxxxxxxxxxxxx – 99 days ago

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


profil

reply

xxxxxxxxxxxxxx – 99 days ago – edit – delete

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


profil

reply

xxxxxxxxxxxxxx – 99 days ago



profil

reply

xxxxxxxxxxxxxx – 99 days ago – edit – delete



POST A COMMENT

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

POST

Gambar 5.16. Design halaman forum

e. Halaman Create Courses

Halaman create courses merupakan halaman untuk

membuat kursus, pengguna dapat membuat kursusnya sendiri

sesuai dengan kategori yang disediakan dari sistem. Berikut

rancangannya :

70


gambar xxxxxxxxxx


MAKE A NEW COURSES


Select Category

gambar

submit


Course name

Select picture

Course cover (240x135)


xxxxxxxxxx

Gambar profil

xxxxxxxxxxxxxxxxxx

ADD COURSE TOPIC


Topic Name


Description


Browse Video or Audio Lesson (Format .mp4 or .mp3)

SUBMIT

ADD TOPIC

EDIT COURSE

MY COURSE

Browse


Gambar 5.17. Design halaman create courses

f. Halaman Create Topic

Halaman create topic merupakan halaman untuk

membuat topik dari kursus yang telah dibuat sebelumnya,

format file untuk topic yang diijinkan adalah .mp3 dan .mp4.

Berikut rancangannya :

Gambar 5.18. Design halaman create topic

71


gambar xxxxxxxxxx


MAKE A NEW TEST


Select Category

gambar

submit


Test name

Select picture

Course cover (240x135)

9999999

Questions ( max:99 )

999999

Duration ( minutes )

g. Halaman Create Online Test

Halaman create online test merupakan halaman untuk

membuat kuis, pengguna dapat membuat kuisnya sendiri sesuai

dengan kategori yang disediakan dari sistem. Berikut

rancangannya :

Gambar 5.19. Design halaman create online test

h. Halaman Create Question

Halaman create question merupakan halaman untuk

membuat soal dari kuis yang telah dibuat, tipe soal yang

disediakan adalah pilihan ganda. Berikut rancangannya :

72


xxxxxxxxxx

Collections of questions


Gambar profil

xxxxxxxxxxxxxxxxxx

ADD QUESTION

EDIT TEST

MY TEST

ADD QUESTION Question #999


Question


Option A


Option B


Option C


Option D


Explanation

Gender xxxxxxx

SUBMIT

Gambar 5.20. Design halaman create question

i. Halaman Create Topic Forum

Halaman create topic forum merupakan halaman untuk

pengguna bertanya di forum, pengguna dapat bertanya sesuai

dengan kategori yang disediakan dari sistem. Berikut

rancangannya :

73


Forum


ADD TOPIC


Topic Title :


Topic Category


Deskripsi Topik

submit


gambar xxxxxxxxxx

My Account

Dashboard

My Courses

My Online Test

My Traffic

Settings

Logout


Account Picture Password

Full name xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Username xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

E-Mail [email protected]

Date of birth

Gender

Address

99 xxxxxxx 9999

xxxxxxx

Telephone 99999999999999999999999999

submit

Gambar 5.21. Design halaman create topic forum

j. Halaman Settings

Halaman settings merupakan halaman pengaturan

informasi pribadi pengguna, yang terdiri dari 3 tab yaitu

account, picture, dan password. Berikut rancangannya :

74


gambar xxxxxxxxxx

My Account

Dashboard

My Courses

My Online Test

My Traffic

Settings

Logout



Profil Picture

gambar

Select picture

Profil Picture (300x300)

submit


gambar xxxxxxxxxx

My Account

Dashboard

My Courses

My Online Test

My Traffic

Settings

Logout



New Password xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Confirm New Password xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

submit

Gambar 5.22. Design halaman settings tab account, picture, password.

3. Halaman Backend

Halaman backend adalah halaman yang dapat diakses oleh

administrator, pada halaman ini administrator dapat melakukan

management semua data pada sistem, seperti kursus, kuis, forum,

prestasi, kategori, subkategori, pengguna, dan menambah user

administrator itu sendiri. Administrator dapat melakukan perubahan

data website seperti nama website logo, kontak, dsb. Berikut adalah

rancangan halaman backend :

75

LOGO Gambar xxxxx

Gambar

xxxxxxxxxxxxx

Dashboard

Management Courses

Management Online Test

Management Forum

Management Achievement

Management Category

Management User

Settings

Logout


Dashboard

Welcome to administrator.

999 courses

999 Lesson999 test

999 QuestionForum discussion

999 TopicsMedia users

999 Users

5 Top CoursesCourses with the most views







999

xxxxx

999

xxxxx

999

xxxxx

Data courses





999

xxxxx

999

xxxxx

5 Top Online TestOnline test with the most participant







999

xxxxx

999

xxxxx

999

xxxxx

Data test





999

xxxxx

999

xxxxx

Forum TopicForum topic often discussed

Data topic

xxxxxxxxxxxxxxxxxxxx

By : xxxxxxxxxxxxxxxxxx

Komentar 99



Komentar 99



Komentar 99



Komentar 99



Komentar 99

CommentsLatest forum comments


Topic : xxxxxxxxxxxxxxxxxx

view



view



view



view



view

a. Dashboard

Halaman dashboard berisikan informasi website seperti

jumlah topic kursus, soal kuis, topik forum, dan jumlah

pengguna. Pada halaman dashboard administrator dapat melihat

5 top kuis dan kursus, komentar forum terakhir, dan topic forum

yang sedang hangat di bicarakan. Berikut adalah rancangannya :

Gambar 5.23. Design halaman dashboard.

b. Halaman Management Courses

Halaman management courses merupakan halaman yang

digunakan administrator untuk mengelola data kursus yang

dimiliki oleh pengguna, seperti melihat topik kursus, merubah

76

LOGO Gambar xxxxx

Gambar

xxxxxxxxxxxxx

Dashboard

Management Courses


Management Forum


Management Category

Management User

Settings

Logout


Courses

Management Courses.

xxxxxxxxxSearch : 999Show Entries

Course name Author

xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx








Showing 1 to 999 of 999 entries Previous 999 Next

NO

999

999

999

999

999

999

999

999

Category

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

Status

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

Action

+ + +

+ + +

+ + +

+ + +

+ + +

+ + +

+ + +

+ + +

topik kursus, menghapus topik kursus, edit kursus, dan

menghapus kursus. Berikut adalah rancangannya :

Gambar 5.24. Design halaman management courses.

c. Halaman Management Online Test

Halaman management online test merupakan halaman

yang digunakan administrator untuk mengelola data kuis yang

dimiliki oleh pengguna, seperti melihat peserta kuis, soal kuis,

menghapus soal kuis, merubah soal kuis, merubah kuis, dan

menghapus kuis. Berikut adalah rancangannya :

77

LOGO Gambar xxxxx

Gambar

xxxxxxxxxxxxx

Dashboard

Management Courses


Management Forum


Management Category

Management User

Settings

Logout


Online Test

Management Online Test.


Online Test Author










NO

999

999

999

999

999

999

999

999

Category

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

Status

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

Action

+ + +

+ + +

+ + +

+ + +

+ + +

+ + +

+ + +

+ + +

+

+

+

+

+

+

+

+

Gambar 5.25. Design halaman management online test.

d. Halaman Management Forum

Halaman management forum merupakan halaman yang

digunakan administrator untuk mengelola data forum yang

dimiliki oleh pengguna, seperti melihat komentar, merubah

komentar, menghapus komentar, merubah topik forum, melihat

topik forum, dan menghapus topik forum. Berikut adalah

rancangannya :

78

LOGO Gambar xxxxx

Gambar

xxxxxxxxxxxxx

Dashboard

Management Courses


Management Forum


Management Category

Management User

Settings

Logout


Forum

Management Forum.


Topic Forum User










NO

999

999

999

999

999

999

999

999

Category

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

Status

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

Action

+ + +

+ + +

+ + +

+ + +

+ + +

+ + +

+ + +

+ + +

Gambar 5.26. Design halaman management forum.

e. Halaman Management Achievement

Halaman management achievement merupakan halaman

yang digunakan administrator untuk mengelola data prestasi,

seperti menambah data prestasi, merubah data prestasi,

menghapups data prestasi. Berikut adalah rancangannya :

79

LOGO Gambar xxxxx

Gambar

xxxxxxxxxxxxx

Dashboard

Management Courses


Management Forum


Management Category

Management User

Settings

Logout


Achievement

Management Achievement.


Achievement Point

xxxxxxxxxxxxxxxxxx 999









NO

999

999

999

999

999

999

999

999

Status

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

Action

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

Gambar 5.27. Design halaman management achievement.

f. Halaman Management Category

Halaman management category merupakan halaman yang

digunakan administrator untuk mengelola data kategori, seperti

menambah data kategori, merubah data kategori, menghapups

data kategori. Berikut adalah rancangannya :

80

LOGO Gambar xxxxx

Gambar

xxxxxxxxxxxxx

Dashboard

Management Courses


Management Forum


Management Category

Management User

Settings

Logout


Category

Management Category.


Category

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx


NO

999

999

999

999

999

999

999

999

Status

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

Action

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

New Category

+

+

+

+

+

+

+

+

Gambar 5.28. Design halaman management category.

g. Halaman Management User

Halaman management user digunakan oleh

administrator untuk mengelola data pengguna seperti melihat

informasi pengguna, mengubah informasi pengguna, dan

menghapus pengguna. Pada halaman ini administrator dapat

menambah user administrator, merubah, dan menghapus user

administrator. Berikut adalah rancangannya :

81

LOGO Gambar xxxxx

Gambar

xxxxxxxxxxxxx

Dashboard

Management Courses


Management Forum


Management Category

Management User

Settings

Logout


User Frontend

Management User Frontend.


Full Name Username










NO

999

999

999

999

999

999

999

999

E-Mail

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

Status

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

Action

+

+

+

+

+

+

+

+

LOGO Gambar xxxxx

Gambar

xxxxxxxxxxxxx

Dashboard

Management Courses


Management Forum


Management Category

Management User

Settings

Logout


Administrator

Management Administrator.


Full Name Username










NO

999

999

999

999

999

999

999

999

E-Mail

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

Status

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxx

Action

+

+

+

+

+

+

+

+

CREATE USER

Gambar 5.29. Design halaman management user frontend.

Gambar 5.30. Design halaman management administrator.

82

LOGO Gambar xxxxx

Gambar

xxxxxxxxxxxxx

Dashboard

Management Courses


Management Forum


Management Category

Management User

Settings

Logout


Settings

Website management

Website General Picture

Website name xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

E-Mail [email protected]

Address

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Telephone 99999999999999999999999999

submit

Maintenance

LOGO Gambar xxxxx

Gambar

xxxxxxxxxxxxx

Dashboard

Management Courses


Management Forum


Management Category

Management User

Settings

Logout


Settings

Website management


Documentationxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

submit

Maintenance

About usxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Contact usxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Privacy Policyxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Terms Conditionsxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

h. Halaman Settings

Halaman settings merupakan halaman yang digunakan

untuk merubah informasi website seperti nama website, logo,

dan kontak. Administrator juga dapat merubah status website

dari up ke down atau maintenance.

83

LOGO Gambar xxxxx

Gambar

xxxxxxxxxxxxx

Dashboard

Management Courses


Management Forum


Management Category

Management User

Settings

Logout


Settings

Website management


submit

Maintenance

Logo Website

gambar

Select picture

Logo (230x120)

Favicongambar

Select picture

Favicon (16x16)

LOGO Gambar xxxxx

Gambar

xxxxxxxxxxxxx

Dashboard

Management Courses


Management Forum


Management Category

Management User

Settings

Logout


Settings

Website management


submit

Maintenance

Maintenance Active

IP Maintenance 999.999.999.999

Gambar 5.31. Design halaman settings tab website, general, picture,

maintenance.

84

5.1.4 Construction

Pada tahapan ini merupakan proses pembuatan website media

pembelajaran dengan menggunakan framework Laravel, versi Laravel yang

digunakan adalah 5.0 untuk dapat menjalankan framework Laravel

dibutuhkan composer yang dapat di download di getcomposer.org.

1. Model

Model digunakan untuk menghubungkan sistem dengan database,

sehingga dapat memanipulasi data (insert, update, delete, search),

menangani validasi dari bagian controller. Berikut adalah model dari

data kursus :

Gambar 5.32 Model data kursus

Dalam Laravel untuk menggunakan model dibutuhkan Protected

$table yaitu nama table yang dihubungkan, dan Protected $primaryKey

yaitu primary key dari table tersebut

2. Contoller

Contoller digunakan untuk mengatur hubungan antara model dan

view, controller menerima request dan data dari user kemudian

85

menentukan apa yang akan diproses. Berikut adalah controller untuk

menampilkan data topik kursus :

Gambar 5.33 Controller topik kursus

Pada controller Laravel untuk memanipulasi data pada database

dapat menggunakan beberapa cara yaitu sebagai berikut :

1. get(), berfungsi untuk menampilkan semua data pada table

2. first(), untuk mengambil data pertama pada table

3. find($id), untuk mecari data pada table

4. destroy(), untuk menghapus data pada table

5. save(), untuk menyimpan data ke dalam table

6. update(), untuk memperbaharui data pada table

Sedangkan untuk menampilkannya pada view menggunakan

perintah return view, dan disertai with untuk mengirim hasil dari

perintah model.

86

3. View

View merupakan file template HTML, yang diatur oleh

controller. View berfungsi untuk menerima dan merepresentasikan data

kepada pengguna.

Gambar 5.34 View pilihan jawaban

Pada view untuk menampilkan data dari variable menggunakan

perintah {{ },, sedangkan untuk menampilkan variable yang

mengandung html_entities menggunakan {!! !!}.

5.1.4.1 Pembuatan Database

Pada tahapan construction, penulis menggunakan XAMPP sebagai

web server. Laravel memberikan fitur migrate untuk membuat tabel pada

database, berikut adalah tahapan pembuatan tabel data user login dengan

menggunakan migrate.

1. Migration.

Gambar 5.35. Command create tabel data_userlogin

87

Pada gambar 5.36 “create_data_userlogin” merupakan

nama file yang akan terbentuk, “—create=data_userlogin”

menentukan nama tabel yang dibuat maka akan terbentuk file

migration pada file /database/migration.

2. Struktur tabel dengan migration

Gambar 5.36. Stuktur migration tabel data_userlogin

Laravel memberikan fungsi untuk membuat tipe kolom

pada tabel seperti increments, string, dateTime,char atau enum.

Fungsi rememberToken() akan membentuk field remember_token

yang harus ada pada tabel login yang digunakan, karena jika tidak

akan mendapatkan error saat proses logout nantinya. Fungsi Dates()

88

akan membentuk otomatis field created_at dan updated_at yang

akan terisi atau update otomatis saat kita insert data atau update data.

3. Command migration

Gambar 5.37. Command php migrate tabel data_userlogin

Pada gambar 5.38 menjelaskan command untuk membuat

struktur tabel yaitu “php artisan migrate”, maka file migration yang

ada akan di execute.

Keuntungan dengan menggunakan fitur migrate pada Laravel 5

memberikan kemudahan jika terjadi hilang stuktur tabel atau rusak dan

tidak memiliki back up, website media pembelajaran memiliki backup pada

folder /database/migration. Berikut adalah struktur tabel pada database

website media pembelajaran yang dibuat dengan menggunakan fitur

migrate :

1. Tabel data_userlogin

Tabel data_userlogin memiliki field idUser, username,

password, eMail, tglDaftar, status, akses, userModified,

remember_token, created_at, dan updated_at. Berikut tampilan

databasenya :

89

Gambar 5.38. Tabel data_userlogin

2. Tabel data_userdata

Tabel data_userdata memiliki field idData, idUser

namaLengkap, jenisKelamin, tglLahir, alamat, telp, point, prestasi,

profil, userModified, created_at, updated_at. Berikut tampilan

databasenya :

Gambar 5.39. Tabel data_userdata

90

3. Tabel data_subkategori

Tabel data_userdata memiliki field idSubkategori, idKategori

nmSubkategori, status, userModified, created_at, updated_at. Berikut

tampilan databasenya :

Gambar 5.40. Tabel data_subkategori

4. Tabel data_soal

Tabel data_soal memiliki field idSoal, idKuis, soal, A, B, C, D,

penjelasan, kunci, status, userModified, created_at, updated_at. Berikut

tampilan databasenya :

Gambar 5.41. Tabel data_soal

91

5. Tabel data_settings

Tabel data_settings memiliki field idSettings, nmWeb, eMail,

tlp, alamat, about, privacyPolicy, termsConditions, contactUs,

documentation, logo, favicon, Maintenance, IPMaintenance, created_at,

updated_at. Berikut tampilan databasenya :

Gambar 5.42. Tabel data_settings

6. Tabel data_prestasi

Tabel data_prestasi memiliki field idPrestasi, nmPrestasi, point,

status, userModified, created_at, updated_at. Berikut tampilan

databasenya :

Gambar 5.43. Tabel data_prestasi

92

7. Tabel data_pesertakuis

Tabel data_pesertakuis memiliki field idPrestasi, idKuis, idUser,

sisaWaktu, soal, nilai, status, created_at, updated_at. Berikut tampilan

databasenya :

Gambar 5.44. Tabel data_pesertakuis

8. Tabel data_notifikasi

Tabel data_notifikasi memiliki field idNotifikasi, idUser,

forUser, tipeNotif, url, baca, created_at, updated_at. Berikut tampilan

databasenya :

Gambar 5.45. Tabel data_notifikasi

93

9. Tabel data_kursustopik

Tabel data_kursustopik memiliki field idTopik, idKursus,

nmTopik, deskripsi, tipeFile, status, userModified, created_at,


Gambar 5.46. Tabel data_kursustopik

10. Tabel data_kursus

Tabel data_kursus memiliki field idKursus, idSubkategori,

idUser, nmKursus, jmlTopik, viewer, status, userModified, created_at,


Gambar 5.47. Tabel data_kursus

94

11. Tabel data_kuis

Tabel data_kuis memiliki field idKuis, idSubkategori, idUser,

nmKuis, tampilSoal, jumlahSoal, waktu, peserta, status, userModified,

created_at, updated_at. Berikut tampilan databasenya :

Gambar 5.48. Tabel data_kuis

12. Tabel data_kategori

Tabel data_kategori memiliki field idKategori, nmKategori,

status, userModified, created_at, updated_at. Berikut tampilan

databasenya :

Gambar 5.49. Tabel data_kategori

95

13. Tabel data_jawaban

Tabel data_jawaban memiliki field idJawaban, idPeserta, idSoal,

urutan, jawaban, TF, created_at, updated_at. Berikut tampilan

databasenya :

Gambar 5.50. Tabel data_jawaban

14. Tabel data_historykursus

Tabel data_historykursus memiliki field idHistory, idUser,

idKursus, idTopik, created_at, updated_at. Berikut tampilan

databasenya :

Gambar 5.51. Tabel data_historykursus

15. Tabel data_forumkomentar

Tabel data_forumkomentar memiliki field idFKomen, idForum,

idReply, idUser, komentar, status, userModified, created_at,


96

Gambar 5.52. Tabel data_forumkomentar

16. Tabel data_forum

Tabel data_forum memiliki field idForum, idSubkategori,

idUser, topikForum, isiTopik, jmlKomen status, userModified,

created_at, updated_at. Berikut tampilan databasenya :

Gambar 5.53. Tabel data_forum

5.1.4.2 Pembuatan Interface

Pada tahapan ini merupakan proses pembuatan tampilan atau view

sesuai dengan rancangan interface yang terdiri dari halaman landing,

frontend, dan backend. Laravel memberikan kemudahan untuk memanggil

file atau membuat link, seperti memanggil file css atau images. Berikut

97

adalah gambar untuk memanggil file css dan images pada halaman

main.blade.php :

Gambar 5.54. Gambar kode memanggil file css dan gambar

Pada gambar diatas terdapat fungsi {{asset(‘’)}} yang jika

ditampilkan melalui web browser akan menjadi “http://alamatwebsite/”

sehingga file css akan dipanggil menjadi “http://alamatwebsite/style.css”

atau file gambar “http://alamatwebsite/images/favicon.png”.

Ketika pengguna website media pembelajaran mengikuti kursus

akan tampil topik dalam format .mp3 atau .mp4. Untuk menampilkan

format topik tersebut penulis menggunakan html5 dan file topik dipanggil

dengan menggunakan fungsi {{asset(‘’)}}, berikut adalah kode untuk

menampilkan topik kursus :

Gambar 5.55. Gambar kode memanggil file topik kursus

98

Sedangkan untuk kuis dan forum penulis menggunakan fungsi

Laravel {!! !!} untuk menampilkan soal, pilihan jawaban, topik forum, dan

komentar forum. Fungsi {!! !!} jika dijalankan pada server akan

menampilkan kode berikut “<?php echo html_entities(‘’) ?>”, sehingga

soal yang telah diinput melalui kode editor yang telah terkonversi menjadi

entitas html akan tampil menjadi kode html, berikut adalah kode untuk

menampilkan soal :

Gambar 5.56. Gambar kode menampilkan soal

File interface yang telah dibuat disimpan pada folder

/resources/views, berikut adalah hasil interface (tampilan) yang telah dibuat

dengan menggunakan framework Laravel :

A. Halaman Landing

1. Tampilan halaman home

Berikut tampilan halaman home yang telah dibuat oleh

penulis dengan menggunakan framework laravel.

99

Gambar 5.57. Tampilan halaman home landing

2. Tampilan halaman courses

Berikut tampilan halaman courses yang telah dibuat oleh


100

Gambar 5.58. Tampilan halaman courses

3. Tampilan halaman online test

Berikut tampilan halaman courses yang telah dibuat oleh


Gambar 5.59. Tampilan halaman online test

101

4. Tampilan halaman forum

Berikut tampilan halaman forum yang telah dibuat oleh


Gambar 5.60. Tampilan halaman forum

5. Tampilan halaman register

Berikut tampilan halaman register yang telah dibuat oleh


102

Gambar 5.61. Tampilan halaman register

6. Tampilan halaman login

Berikut tampilan halaman login yang telah dibuat oleh


Gambar 5.62. Tampilan halaman login

103

B. Halaman Frontend

1. Tampilan halaman home frontend

Berikut tampilan halaman home frontend yang telah dibuat

oleh penulis dengan menggunakan framework laravel.

Gambar 5.63. Tampilan halaman home frontend

2. Tampilan halaman courses

Berikut tampilan halaman course yang telah dibuat oleh


104

Gambar 5.64. Tampilan halaman courses

3. Tampilan halaman online test

Berikut tampilan halaman online test yang telah dibuat oleh


Gambar 5.65. Tampilan halaman online test

105

4. Tampilan halaman forum

Berikut tampilan halaman forum yang telah dibuat oleh


Gambar 5.66. Tampilan halaman forum

5. Tampilan halaman create courses

Berikut tampilan halaman create courses yang telah dibuat


Gambar 5.67. Tampilan halaman create courses

106

6. Tampilan halaman create topic

Berikut tampilan halaman create topic yang telah dibuat


Gambar 5.68. Tampilan halaman create topic

7. Tampilan halaman create online test

Berikut tampilan halaman create online test yang telah

dibuat oleh penulis dengan menggunakan framework laravel.

Gambar 5.69. Tampilan halaman create online test

107

8. Tampilan halaman create question

Berikut tampilan halaman create question yang telah dibuat


Gambar 5.70. Tampilan halaman create question

108

9. Tampilan halaman create topic forum

Berikut tampilan halaman create topic forum yang telah


Gambar 5.71. Tampilan halaman create topic forum

10. Tampilan halaman settings

Berikut tampilan halaman settings yang telah dibuat oleh


109

Gambar 5.72. Tampilan halaman settings

C. Halaman Backend

1. Tampilan halaman dashboard

Berikut tampilan halaman dashboard yang telah dibuat oleh


110

Gambar 5.73. Tampilan halaman dashboard admin

2. Tampilan halaman management courses

Berikut tampilan halaman management courses yang telah


Gambar 5.74. Tampilan halaman management courses

111

3. Tampilan halaman management online test

Berikut tampilan halaman management online test yang

telah dibuat oleh penulis dengan menggunakan framework laravel.

Gambar 5.75. Tampilan halaman management online test

4. Tampilan halaman management forum

Berikut tampilan halaman management online test yang


Gambar 5.76. Tampilan halaman management forum

112

5. Tampilan halaman management achievement

Berikut tampilan halaman management achievement yang


Gambar 5.77. Tampilan halaman management achievement

6. Tampilan halaman management category

Berikut tampilan halaman management category yang telah


Gambar 5.78. Tampilan halaman management category

113

7. Tampilan halaman management user

Berikut tampilan halaman management user yang telah


Gambar 5.79. Tampilan halaman management user frontend

Gambar 5.80. Tampilan halaman management backend (administrator)

114

8. Tampilan halaman settings

Berikut tampilan halaman settings yang telah dibuat oleh


115

Gambar 5.81. Tampilan halaman management settings

5.1.5 Deployment

Pada tahapan ini penulis melakukan pengujian dengan

menggunakan pengujian blackbox yang berfokus pada sisi fungsionalitas.

Pengujian black box adalah pengujian aspek fundamental sistem tanpa

memperhatikan struktur logika internal website. Metode ini digunakan

untuk mengetahui apakah website berfungsi dengan benar.

5.1.5.1 Pengujian fungsional login, register, forget password, dan reset

password

Tabel 5.19. Hasil pengujian login

No Skenario Pengujian Test case Hasil yang diharapkan Hasil

Pengujian Kesimpulan

1 Mengosongkan

semua isian data

dan klik tombol

login.

Username: -

Password: -

Sistem akan menolak dan

menampilkan pesan “The

username field is

required.” dan “The

password field is

required.”

Sesuai

Harapan valid

116



2 Mengisi data

username dan

mengosongkan data

password, dan klik

tombol login

Username:

beta

Password: -



password field is

required.”

Sesuai

Harapan

Valid

3 Mengosongkan data

username dan

mengisi data

password, dan klik

tombol login

Username: -

Password:

qwerty



username field is

required.”

Sesuai

Harapan

Valid

4 Mengisi data salah

username dan

mengisi data salah

password, dan klik

tombol login

Username:

coba

Password:

coba


menampilkan pesan

“Please check your

username and password.”

Sesuai

Harapan

Valid

5 Mengisi data

username dengan

simbol dan mengisi

data password, dan

klik tombol login

Username:

coba*&^!@

Password:

qwerty



username may only

contain letters, numbers,

and dashes..”

Sesuai

Harapan

Valid

Tabel 5.20. Hasil pengujian register



1 Mengosongkan

semua isian data

dan klik tombol

register.

Fullname :-

E-Mail:-

Username: -

Password: -

Confirm

password:-



name field is required.”,

“The email field is

required.”, “The

username field is

required.”, “The

password field is

required.”

Sesuai

Harapan

valid

2 Mengisi semua

isian data, namun

data e-mail diisi

dengan data yang

sudah ada di basis

data, dan klik

tombol register.

Fullname :

beta user

E-

Mail:idmusic9

[email protected]

Username:

betanew

Password:

qwerty



email has already been

taken.”

Sesuai

Harapan

valid

117



Confirm

password:qwe

rty

3 Mengisi semua

isian data, namun

data username diisi

dengan data yang

sudah ada di basis

data, dan klik

tombol register

Fullname :

beta user

E-

Mail:idmusic9

[email protected]

Username:

beta

Password:

qwerty

Confirm

password:qwe

rty



username has already

been taken.”

Sesuai

Harapan valid

4 Mengisi semua

isian data, namun

data password dan

confirm password

tidak sama, dan klik

tombol register

Fullname :

beta user

E-

Mail:idmusic9

[email protected]

Username:

beta

Password:

qwerty

Confirm

password:qwe

rto



password and password

confirm must match.”

Sesuai

Harapan valid

5 Mengisi semua

isian data, namun

data username diisi

dengan simbol, dan

klik tombol register

Fullname :

beta user

E-

Mail:idmusic9

[email protected]

Username:

@#$

Password:

qwerty

Confirm

password:qwe

rto


menampilkan pesan

“The username may only

contain letters, numbers,

and dashes.”

Sesuai

Harapan

valid

Tabel 5.21. Hasil pengujian forget password



1 Mengosongkan

isian data email dan

klik tombol send.

E-Mail: - Sistem akan menolak dan


email field is required.”

Sesuai

Harapan

valid

118



2 Mengisi isi data

email namun bukan

dengan format yang

benar dan klik

tombol send

E-Mail:

myemail



email must be a valid

email address.”

Sesuai

Harapan

valid

3 Mengisi isi data

email namun tidak

terdaftar di basis

data dan klik

tombol send

E-Mail:

myemail@ema

il.com


menampilkan pesan “No

account is linked to

[email protected].”

Sesuai

Harapan

Valid

Tabel 5.22. Hasil pengujian reset password



1 Mengosongkan

semua isian data

dan klik tombol

send.

New password

:-

Confirm new

password :-



password field is

required.”

Sesuai

Harapan

valid

2 Mengisi isi data

password dan

confirm password

berbeda dan klik

tombol send.

New password

:12345

Confirm new

password

:123456



password and password

confirm must be match.”

Sesuai

Harapan valid

5.1.5.2 Pengujian fungsional kursus dan topik.

Tabel 5.23. Hasil pengujian kursus



1 Mengosongkan

semua isian data

dan klik tombol

submit.

Category:-

Course name:-

Cover:-


menampilkan pesan

“Category is required.”,

“Course name is

required.”, “Cover

course is required.”

Sesuai

Harapan

valid

2 Mengisi semua data

namun tipe cover

bukan .jpg dan klik

tombol submit

Category:

Laravel

Course name:

Belajar

Laravel

Cover:

cover.png


menampilkan pesan

“Cover course must be

.jpg.”

Sesuai

Harapan

valid

119

Tabel 5.24. Hasil pengujian topik



1 Mengosongkan

semua isian data

dan klik tombol

submit.

Topic name:-

Description:-

File lesson:-


menampilkan pesan “You

must select at least 1 file

to upload. Please retry

your upload!”

Sesuai

Harapan

valid

2 Mengosongkan

semua isian data

kecuali file lesson

namun dengan tipe

file bukan .mp3

atau .mp4 dan klik

tombol submit.

Topic name:-

Description:-

File

lesson:gambar

.jpg


menampilkan pesan

“Invalid extension for file

"gambar.jpg". Only

"mp4, mp3" files are

supported.”

Sesuai

Harapan

valid

3 Mengosongkan

semua isian data

kecuali file lesson

namun dengan tipe

file bukan .mp3

atau .mp4 dan klik

tombol submit.

Topic name:-

Description:-

File lesson:

gambar.jpg


menampilkan pesan


"gambar.jpg". Only


supported.”

Sesuai

Harapan

valid

4 Mengisi semua

isian data namun

file lesson bukan

mp3 atau mp4 dan

klik submit

Topic name:

Nama topik

Description:

deksripsi

File lesson:

gambar.jpg


menampilkan pesan


"gambar.jpg". Only


supported.”

Sesuai

Harapan

valid

5 Mengosongkan

semua isian data

kecuali file lesson

namun dengan tipe

file .mp3 atau .mp4

dan klik tombol

submit.

Topic name:

Nama topik

Description:

deksripsi

File lesson:

Tutorial .mp4


menampilkan pesan

“Topic name is

required.”, “Description

is required.”.

Sesuai

Harapan

valid

5.1.5.3 Pengujian fungsional kuis dan soal.

Tabel 5.25. Hasil pengujian kuis



1 Mengosongkan

semua isian data

dan klik tombol

submit.

Category:-

Test name:-

Question:-

Duration:-

Cover


menampilkan pesan


“Test name is

required.”,”The number

Sesuai

Harapan valid

120



of question is

required”,”Duration is

required”, “Cover course

is required.”


namun question dan

duration diisi

dengan angka

kurang dari 1 dan

cover diisi dengan

tipe file selain .jpg

Category:

Laravel

Test name:

Test Laravel

Question:

0

Duration:

0

Cover:

Gambar.png


menampilkan pesan”The

question must be least

1”,”The duration must be

least 1”, “Cover course

must be .jpg.”

Sesuai

Harapan

valid

Tabel 5.26. Hasil pengujian soal



1 Mengosongkan

semua isian data

dan klik tombol

submit.

Question:-

Option A:-

Option B:-

Option C:-

Option D:-

Explanation:-

Answer key:-


menampilkan pesan

“Question is required.”,

“Option A is required.”,

“Option B is required.”,

“Option C is required.”,

“Option D is required.”,

“Please type your

explanation”,”Answer

key is required”.

Sesuai

Harapan valid

5.1.5.4 Pengujian fungsional forum dan komentar forum.

Tabel 5.27. Hasil pengujian forum dan komentar forum



1 Mengosongkan

semua isian data

dan klik tombol

submit.

Topic title:-

Category:-

Question:-


menampilkan pesan

“Topic title is required.”,


“Question is required.”

Sesuai

Harapan

valid

121



2 Mengosongkan

semua isian data

dan klik tombol

submit.

Commentar:- Sistem akan menolak dan

menampilkan pesan

“Please type your

commentar”

Sesuai

Harapan

valid

5.1.5.5 Pengujian fungsional settings profile.

Tabel 5.28. Hasil pengujian settings profile



1 Mengosongkan

semua isian data

yang wajib diisi dan

klik tombol submit.

Full name:-

Username:-


menampilkan pesan

“Please type your full

name”, “The username is

required”

Sesuai

Harapan

valid



mengganti data

username dengan

data yang sudah di

basis data

Full name:

NamaLengkap

Username:

Beta1



username has already

been taken”

Sesuai

Harapan

valid



mengisi data new

password dan

namun data confirm

password berbeda

Full name:

NamaLengkap

Username:

Beta5

New

Password:123

Confirm New

Password :

1234


menampilkan pesan “

Your new password must

be same with confirm

password.”

Sesuai

Harapan

valid

5.1.5.6 Pengujian fungsional achievement.

Tabel 5.29. Hasil pengujian achievement



1 Mengosongkan

semua isian data

dan klik tombol

submit.

Achievement:-

Point:-

Icon:-


menampilkan pesan

“Please type name of

achievement.”,”Please

type required point.”,”

The icon field is

Sesuai

Harapan

valid

122



required.”


namun nama

achievement sudah

ada di database dan

tipe file icon bukan

.png dan klik

tombol submit.

Achievement:

Rookie

Point:

100

Icon:

Icon.jpg


menampilkan pesan

“Achievement is already

exist in database.”,” The

icon must be a file of

type: png.”

Sesuai

Harapan

valid

5.1.5.7 Pengujian fungsional settings website.

Tabel 5.30. Hasil pengujian settings website



1 Mengosongkan

semua isian data


klik tombol submit.

Website Name

:-

Website E-

Mail:-

Website

phone:-

Website

officer address

:-


menampilkan pesan

“Please type website

name”,”Please type

website website e-

mail”,”Please type

website phone”,”Please

type website officer

address”

Sesuai

Harapan

valid

5.2 Pembahasan

5.2.1 Rangkuman masalah

PHP merupakan dasar bahasa pemrograman dalam membuat website,

Laravel sebagai framework PHP memiliki kelebihan dibandingkan

framework lainnya, yaitu sebagai berikut :

1. Composer

Laravel sudah menggunakan teknologi composer, untuk

menginstal Laravel dapat menggunakan composer yang aka

123

mendownload langsung dari server, dan ketika akan melakukan update

plugin akan lebih mudah.

2. Blade Templating

Laravel dilengkapi dengan blade templating, sehingga template

lebih terstuktur dan dinamis.

3. Migration

Laravel memberikan kemudahan dalam mengelola database, dan

dengan adanya migration sistem yang dibuat secara otomatis memliki

backup struktur table jika terdapat kendala pada tabel tersebut.

Berdasarkan kelebihan di atas, menjelaskan bahwa proses pembuatan

website kini semakin berkembang, di sertai teknologi internet. Sehingga

media pembelajaran yang dibutuhkan untuk mengembangkan ilmu

pengetahuan dapat diakses secara online dengan mudah. Ketika seseorang

belajar, maka dibutuhkan juga sesuatu untuk menguji hasil belajarnya seperti

test tertulis atau praktek, yang berguna sebagai tolak ukur hasil belajar.

Forum merupakan tempat berdiskusi yang memberikan kemudahan

saat kita mendapatkan kendala ketika belajar, contohnya belajar bahasa

pemrograman tidak jarang kita mendapatkan error, namun forum dapat

membantu kita memperbaiki error tersebut, jika forum dan website media

pembelajaran dijadikan dalam satu alamat akan lebih memudahkan

124

pengguna, jadi kursus, kuis, dan forum menjadi satu menu utama pada

website media pembelajaran.

5.2.2 Solusi Masalah

Berdasarkan rangkuman masalah diatas, penulisan memberikan

solusi untuk menerapkan framework Laravel dalam membuat sebuah

website media pembelajaran dengan fitur sebagai berikut :

1. Kursus (Courses)

Gambar 5.82. Tampilan halaman data kursus

Fitur kursus merupakan media pembelajaran utama pada

website, tabel pada basis data yang digunakan adalah data_user,

data_kursus, data_topikkursus, data_historykursus, dan

data_subkategori. Kursus terdiri dari topik kursus, topik kursus

dapat berupa video atau audio dengan format .mp4 atau .mp3.

125

Pengguna dapat membuat kursus sehingga dapat bermanfat bagi

pengguna lainnya, untuk membuat sebuah kursus pengguna harus

memiliki satu topik kursus agar kursus bisa aktif.

2. Kuis (Online Test)

Gambar 5.83. Tampilan halaman data kuis

Fitur kuis berguna untuk pengguna yang ingin menguji

kemampuannya atau ilmu yang ia miliki, tabel pada basis data

yang digunakan adalah data_user, data_kuis, data_soal,

data_pesertakuis, dan data_jawaban. Kuis terdiri dari soal, soal

kuis yang dibuat adalah pilihan ganda, soal kuis terdiri dari soal,

pilihan jawaban, kunci jawaban, dan penjelasan atas kunci

jawaban tersebut. Penggguna dapat membuat kuis dan pengguna

126

lain dapat mengikutinya, ketika membuat kuis pengguna harus

menentuka jumlah soal yang akan tampil dan waktu pengerjaan

kuis.

3. Forum

Gambar 5.84. Tampilan halaman data forum

Fitur forum berguna sebagai tempat diskusi antar

pengguna jika mendapatkan kendala atau ingin bertanya atau

berbagi informasi, tabel pada basis data yang digunakan adalah

data_forum, data_forumkomentar, data_user, dan data_jawaban .

Pengguna dapat memberikan komentar pada topik yang ada atau

membuat topik baru.

Dengan adanya tiga fitur diatas diharapkan dapat memberikan

kemudahan bagi pengguna untuk menggunakan website media

pembelajaran karena tiga fitur tersebut terdapat dalam satu menu.

127

BAB VI

PENUTUP

6.1 Kesimpulan

Berdasarkan pembahasan pada bab-bab sebelumnya terhadap

Penerapan Framework Laravel pada Website Media Pembelajaran. Penulis

dapat mengambil kesimpulan diantaranya :

1) Framework Laravel dapat diinstal dengan melalui command composer,

dengan menggunakan composer source yang di dapat langsung dari server

Laravel sehingga bebas dari malware.

2) Framework Laravel memberikan kenyamanan saat membuat database dan

3) Dengan adanya website media pembelajaran diharapkan dapat

memberikan kenyamanan kepada masyarakat yang ingin mengembangkan

ilmu pengetahuannya.

4) Media dengan jenis video dan audio diharapkan dapat mempermudah

pengguna dalam mengikuti kursus.

5) Kuis dengan pilihan ganda dan disertai dengan penjelasan terhadap

jawaban soal diharapkan dapat menambah wawasan pengguna.

6) Forum diskusi yang dapat diakses dengan satu alamat website diharapkan

dapat memberikan kenyamanan pengguna jika ingin berbagi informasi.

128

6.2 Saran

Berdasarkan permasalahan yang terjadi maka penulis memberikan

saran agar dapat bermanfaat untuk langkah pengembang selanjutnya, antara

lain sebagai berikut :

1) Ditambah tipe soal kuis seperti menyusun atau mencocokan karena tipe

soal yang tersedia saat ini hanya pilihan ganda.

2) Topik kuis yang tersedia saat ini video dan audio, diharapkan

pengembangan selanjutnya terdapat topik kuis dengan format .swf atau

flash sehingga terdapat interaksi antara pengguna dan topik kuis.

PENERAPAN FRAMEWORK LARAVEL PADA MEDIA …library.palcomtech.com/pdf/5556.pdf · SKRIPSI PENERAPAN...

Documents

Transcript of PENERAPAN FRAMEWORK LARAVEL PADA MEDIA …library.palcomtech.com/pdf/5556.pdf · SKRIPSI PENERAPAN...