rancang bangun aplikasi portofolio mahasiswa...

16
RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA MENGGUNAKAN FRAMEWORK LARAVEL (STUDI KASUS JURUSAN TEKNIK INFORMATIKA UNIVERSITAS MUHAMMADIYAH MALANG) TUGAS AKHIR Diajukan Untuk Memenuhi Persyaratan Guna Meraih Gelar Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang Novan Alkaf Bahraini Saputra 201110370311056 JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH MALANG 2015

Upload: others

Post on 15-Nov-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil

RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA

MENGGUNAKAN FRAMEWORK LARAVEL

(STUDI KASUS JURUSAN TEKNIK INFORMATIKA UNIVERSITAS

MUHAMMADIYAH MALANG)

TUGAS AKHIR

Diajukan Untuk Memenuhi

Persyaratan Guna Meraih Gelar Sarjana Strata 1

Teknik Informatika Universitas Muhammadiyah Malang

Novan Alkaf Bahraini Saputra

201110370311056

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH MALANG

2015

Page 2: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil
Page 3: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil
Page 4: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil
Page 5: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil

LEMBAR PERSEMBAHAN

Selesainya tugas akhir ini tidak terlepas dari bantuan berbagai pihak,

sehingga pada kesempatan ini penulis dengan segala kerendahan hati mengucapkan

terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil

secara langsung maupun tidak dalam proses penyusunan tugas akhir ini hingga

selesai. Terima kasih kepada :

1. Orang Tua saya, Bapak Ir. H. Syahrul dan Ibu Hj. Djubaidah , atas segala

dukungan, bimbingan dan nasehat yang membangun serta doa yang selalu

bapak dan ibu selipkan disetiap waktu untuk saya. Semoga dengan

menyelesaikan Tugas Akhir ini dapat memberikan kebahagiaan untuk

bapak dan ibu.

2. Dosen pembimbing saya, bapak Maskur, S.Kom., M.kom dan Bapak Ilyas,

S.Kom, M.Kom yang sudah memberikan waktunya untuk membimbing dan

memberi masukan terkait tugas akhir saya. Terima kasih atas kata-kata

penyemangatnya disetiap saya bimbingan pak!.

3. Rektor beserta pembantu rektor I, II, III UMM yang telah mengapresiasi

saya melalui beasiswa prestasi selama 3 semester.

4. Yulida Khairunnisa , perempuan yang selalu memberi semangat untuk

dapat menyelesaikan tugas akhir ini. Terima kasih telah menemani disaat

senang maupun duka. Akhirnya kita dapat wisuda bareng

5. PSM “GITASURYA” UMM / Gitasurya Student Choir, keluarga serta

rumah kedua saya ,juga sebagai tempat untuk menggali pengalaman

bermusik. Terima kasih atas apapun yang saya dapat selama saya berada di

Gitasurya. Sampai kapanpun Gitasurya adalah rumah dan keluarga bagi

saya

6. Kifuh Family, Para sahabat SMA yang selalu memberi semangat! See you

on top guys!

7. Badar, Usman, Scot, Ridha, Khafiz, Toriq. Terima kasih atas persahabatan

yang luar biasa serta bantuan apapun di masa perkuliaha, kalian awesome

guys! Sukses buat kalian semua!

8. Seluruh teman-teman kelas IT-B 2011, sukses selalu untuk kita semua!

Page 6: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil

KATA PENGANTAR

Bismillaahhirrahmaanirrahiim

Alhamdulillah, puji syukur penulis panjatkan kepada Allah SWT yang telah

memberi kekuatan yang pada akhirnya penulis mampu menyelesaikan skripsi ini.

Penulisan skripsi ini diajukan untuk memenuhi salah satu syarat kelulusan

dalam jenjang perkuliahan Strata 1 Teknik Informatika Universitas

Muhammadiyah Malang. Dalam penulisan skripsi ini tidak lepas dari kekurangan,

baik aspek kualitas maupun kuantitas dari materi penelitian yang disajikan, maka

penulis membutuhkan kritik dan saran yang bersifat membangun untuk kemajuan

pendidikan di masa yang akan datang.

Malang, 17 Oktober 2015

Penulis

Page 7: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil

DAFTAR ISI

ABSTRAK ........................................................................................................... i

ABSTRACT .......................................................................................................... ii

KATA PENGANTAR ....................................................................................... iii

DAFTAR ISI ...................................................................................................... iv

DAFTAR GAMBAR ........................................................................................ vii

DAFTAR TABEL ............................................................................................... x

BAB I PENDAHULUAN .................................................................................. 1

1.1 Latar Belakang ........................................................................................ 1

1.2 Rumusan Masalah .................................................................................. 2

1.3 Batasan Masalah ...................................................................................... 2

1.4 Tujuan ...................................................................................................... 2

1.5 Metodologi .............................................................................................. 3

1.5.1 Studi Literatur ........................................................................................ 3

1.5.2 Analisa dan Perancangan Sistem ........................................................... 3

1.5.3 Implementasi ......................................................................................... 3

1.5.4 Uji Coba dan Evaluasi ........................................................................... 3

1.5.5 Penyusunan Laporan ............................................................................. 4

1.6 Sistematika Penulisan............................................................................... 4

BAB II LANDASAN TEORI ........................................................................... 5

2.1 Portofolio ................................................................................................. 5

2.1.1 Pengertian Portofolio ............................................................................. 5

2.1.2 Manfaat Portofolio ................................................................................ 6

2.2 PHP .......................................................................................................... 7

2.3 Framework .............................................................................................. 8

2.3.1 Pengertian Framework .......................................................................... 8

2.3.2 Kelebihan Penggunaan Framework ....................................................... 9

2.4 Laravel ..................................................................................................... 9

2.4.1 Sejarah Laravel .................................................................................... 11

2.4.2 Arsitektur Laravel ................................................................................ 13

2.4.3 Fitur Laravel ........................................................................................ 15

2.4.4 Penerapan Laravel Pada Aplikasi Portofolio ....................................... 16

2.5 Bootstrap ............................................................................................... 17

Page 8: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil

2.6 Basis Data .............................................................................................. 17

2.6.1 Relational Database Management System (RDBMS) ........................ 18

2.7 MySql .................................................................................................... 18

2.7.1 Kelebihan dan Kekurangan MySql ..................................................... 19

2.8 UML (Unified Modeling Language) ..................................................... 19

BAB III ANALISIS DAN PERANCANGAN SISTEM ............................... 21

3.1 Analisa ................................................................................................... 21

3.1.1 Analisa dan Gambaran Umum ............................................................ 21

3.1.2 Analisa Kebutuhan Fungsional ........................................................... 22

3.1.3 Analisa Kebutuhan Non-Fungsional ................................................... 23

3.1.4 Usecase ................................................................................................ 23

3.1.5 Skenario Usecase ................................................................................ 24

3.2 Perancangan .......................................................................................... 31

3.2.1 Activity Diagram ................................................................................. 31

3.2.2 Sequence Diagram ............................................................................. 40

3.2.3 Class Diagram ..................................................................................... 49

3.2.4 Entity Relationship Diagram ............................................................... 50

3.2.5 Design Interface Aplikasi .................................................................... 50

BAB IV IMPLEMENTASI DAN PENGUJIAN .......................................... 55

4.1 Implementasi ......................................................................................... 55

4.1.1 Lingkungan Pengembangan Sistem .................................................... 55

4.1.2 Implementasi Interface ........................................................................ 55

4.1.2.1 Implementasi Aplikasi ................................................................. 55

4.1.2.2 Implementasi Artikel ................................................................... 59

4.1.2.3 Implementasi Profile ................................................................... 62

4.1.2.4 Implementasi Cetak Portofolio .................................................... 64

4.1.2.5 Implementasi Hapus Member ...................................................... 65

4.1.2.6 Implementasi Registrasi............................................................... 65

4.1.2.7 Implementasi Login ..................................................................... 66

4.1.2.8 Implementasi Komentar dan Rating ............................................ 67

4.1.2.9 Implementasi Pencarian ............................................................... 68

Page 9: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil

4.1.2.10 Implementasi Download ............................................................ 69

4.1.2.11 Implementasi Notifikasi ............................................................ 69

4.1.2.12 Implementasi Timeline .............................................................. 70

4.2 Pengujian ............................................................................................... 71

4.2.1 Pengujian Fungsionalitas ......................................................................... 71

4.2.2 Pengujian Framework Laravel ................................................................. 80

BAB V PENUTUP ........................................................................................... 83

5.1 Kesimpulan ............................................................................................ 83

5.2 Saran ...................................................................................................... 83

DAFTAR PUSTAKA ..................................................................................... 84

Page 10: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil

DAFTAR GAMBAR

Gambar 2.1 Popularitas Framework PHP Dalam Lingkup Kerja ..................... 11

Gambar 2.1 Popularitas Framework PHP Dalam Personal Project .................. 11

Gambar 3.1 Usecase Diagram ......................................................................... 23

Gambar 3.2 Activity Diagram Upload Aplikasi ................................................ 32

Gambar 3.3 Activity Diagram Edit Aplikasi ..................................................... 32

Gambar 3.4 Activity Diagram Delete Aplikasi ................................................. 33

Gambar 3.5 Activity Diagram Buat Artikel (User dan Admin) ........................ 33

Gambar 3.6 Activity Diagram Edit Artikel (User dan Admin) ......................... 34

Gambar 3.7 Activity Diagram Delete Artikel (User dan Admin) ..................... 34

Gambar 3.8 Activity Diagram Buat Profile ...................................................... 35

Gambar 3.9 Activity Diagram Edit Profile ....................................................... 35

Gambar 3.10 Activity Diagram Cetak Portofolio .............................................. 36

Gambar 3.11 Activity Diagram Hapus Member ............................................... 36

Gambar 3.12 Activity Diagram Regitrasi .......................................................... 37

Gambar 3.13 Activity Diagram Login ............................................................... 37

Gambar 3.14 Activity Diagram Komentar dan Rating ...................................... 38

Gambar 3.15 Activity Diagram Pencarian ........................................................ 38

Gambar 3.16 Activity Diagram Download ....................................................... 39

Gambar 3.17 Activity Diagram Notifikasi ........................................................ 39

Gambar 3.18 Activity Diagram Timeline .......................................................... 40

Gambar 3.19 Sequence Diagram Upload Aplikasi ........................................... 40

Gambar 3.20 Sequence Diagram Edit Aplikasi ................................................ 41

Gambar 3.21 Sequence Diagram Hapus Aplikasi............................................. 41

Gambar 3.22 Sequence Diagram Buat Artikel ................................................. 42

Gambar 3.23 Sequence Diagram Edit Aplikasi ................................................ 42

Gambar 3.24 Sequence Diagram Hapus Artikel ............................................... 43

Gambar 3.25 Sequence Diagram Buat Profile .................................................. 43

Gambar 3.26 Sequence Diagram Edit Profile ................................................... 44

Gambar 3.27 Sequence Diagram Cetak Portofolio ........................................... 44

Gambar 3.28 Sequence Diagram Hapus Member............................................. 45

Gambar 3.29 Sequence Diagram Registrasi ..................................................... 45

Gambar 3.30 Sequence Diagram Login ............................................................ 46

Page 11: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil

Gambar 3.31 Sequence Diagram Komentar dan Rating ................................... 46

Gambar 3.32 Sequence Diagram Pencarian...................................................... 47

Gambar 3.33 Sequence Diagram Download ..................................................... 47

Gambar 3.34 Sequence Diagram Notifikasi ..................................................... 48

Gambar 3.35 Sequence Diagram Timeline ....................................................... 48

Gambar 3.36 Class Diagram ............................................................................. 49

Gambar 3.37 ERD Diagram .............................................................................. 50

Gambar 3.38 Tampilan Login ........................................................................... 50

Gambar 3.39 Tampilan Register ....................................................................... 51

Gambar 3.40 Tampilan Home ........................................................................... 51

Gambar 3.41 Tampilan Halaman Member........................................................ 52

Gambar 3.42 Tampilan About........................................................................... 53

Gambar 3.43 Tampilan Halaman Admin .......................................................... 53

Gambar 3.44 Tampilan Form Upload Aplikasi................................................. 54

Gambar 4.1 Interface Form Upload Aplikasi ................................................... 56

Gambar 4.2 Potongan Kode Fungsi Untuk Upload Aplikasi ........................... 56

Gambar 4.3 Interface Edit Aplikasi .................................................................. 57

Gambar 4.4 Potongan Kode Fungsi Untuk Edit Aplikasi ................................. 57

Gambar 4.5 Interface Hapus Aplikasi (User) .................................................... 58

Gambar 4.6 Potongan Kode Fungsi Untuk Hapus Aplikasi (User) .................. 58

Gambar 4.7 Interface Hapus Aplikasi (Admin) ................................................ 58

Gambar 4.8 Potongan Kode Fungsi Untuk Hapus Aplikasi (Admin) ............... 59

Gambar 4.9 Interface Buat Artikel .................................................................... 59

Gambar 4.10 Potongan Kode Fungsi Untuk Buat Artikel ................................ 60

Gambar 4.11 Interface Edit Artikel ................................................................... 60

Gambar 4.12 Potongan Kode Fungsi Untuk Edit Artikel ................................ 61

Gambar 4.13 Interface Hapus Artikel (User) .................................................... 61

Gambar 4.14 Potongan Kode Fungsi Untuk Hapus Artikel (User) ................. 61

Gambar 4.15 Interface Hapus Artikel (Admin) ................................................ 62

Gambar 4.16 Potongan Kode Fungsi Untuk Hapus Artike (Admin) ................ 62

Gambar 4.17 Interface Buat Profile .................................................................. 62

Page 12: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil

Gambar 4.18 Potongan Kode Fungsi Untuk Buat Profile ................................. 63

Gambar 4.19 Interface Edit Profile ................................................................... 63

Gambar 4.20 Potongan Kode Fungsi Untuk Edit Profile .................................. 64

Gambar 4.21 Interface Cetak Portfolio ............................................................. 64

Gambar 4.22 Potongan Kode Fungsi Untuk Cetak Portofolio .......................... 65

Gambar 4.23 Interface Hapus Member ............................................................. 65

Gambar 4.24 Potongan Kode Fungsi Untuk Hapus Member ........................... 65

Gambar 4.25 Interface Registrasi ...................................................................... 65

Gambar 4.26 Potongan Kode Fungsi Untuk Registrasi .................................... 66

Gambar 4.27 Interface Login ........................................................................... 66

Gambar 4.28 Potongan Kode Fungsi Untuk Login ........................................... 67

Gambar 4.29 Interface Komentar dan Rating ................................................... 67

Gambar 4.30 Potongan Kode Fungsi Untuk Komentar dan Rating .................. 67

Gambar 4.31 Interface Pencarian ...................................................................... 68

Gambar 4.32 Potongan Kode Fungsi Untuk Pencarian .................................... 68

Gambar 4.33 Interface Download ..................................................................... 69

Gambar 4.34 Potongan Kode Fungsi Untuk Download.................................... 69

Gambar 4.35 Interface Notifikasi ...................................................................... 69

Gambar 4.36 Potongan Kode Fungsi Untuk Notifikasi .................................... 70

Gambar 4.37 Interface Timeline ....................................................................... 70

Gambar 4.38 Potongan Kode Fungsi Untuk Timeline ...................................... 70

Gambar 4.39 Hasil Pengujian Keamanan ......................................................... 81

Page 13: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil

DAFTAR TABEL

Tabel 3.1 Kebutuhan Fungsional ...................................................................... 22

Tabel 3.2 Kebutuhan Non Fungsional .............................................................. 23

Tabel 3.3 Skenario Aplikasi (User) ................................................................... 24

Tabel 3.4 Skenario Aplikasi (Admin) ............................................................... 25

Tabel 3.5 Skenario Artikel (User) ..................................................................... 25

Tabel 3.6 Skenario Artikel (Admin) ................................................................. 26

Tabel 3.7 Skenario Profile................................................................................. 26

Tabel 3.8 Skenario Cetak Portofolio ................................................................ 27

Tabel 3.9 Skenario Hapus Member ................................................................... 27

Tabel 3.10 Skenario Registrasi ......................................................................... 28

Tabel 3.11 Skenario Login ................................................................................ 28

Tabel 3.12 Skenario Komentar dan Rating ....................................................... 29

Tabel 3.13 Skenario Pencarian .......................................................................... 29

Tabel 3.14 Skenario Download ......................................................................... 30

Tabel 3.15 Skenario Notifikasi ......................................................................... 31

Tabel 3.16 Skenario Timeline ........................................................................... 31

Tabel 4.1 Pengujian Fungsionalitas .................................................................. 71

Tabel 4.2 Hasil Pengujian Aspek Kecepatan .................................................... 80

Tabel 4.3 Hasil Pengujian Aspek Performa ...................................................... 81

Page 14: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil

DAFTAR PUSTAKA

[1] http://www.smashingmagazine.com/2009/02/26/10-steps-to-the-perfect-

portfolio-website/ (diakses tanggal 25 Februari 2015, pada pukul 15.23 )

[2] http://www.roberthalf.com/creativegroup/building-an-online-portfolio/

(diakes tanggal 25 Februari 2015, pada pukul 15.25)

[3] http://laravel.com/ (diakses tanggal 25 Februari 2015, pada pukul 15.30)

[4] Alatas Husein, “RESPONSIVE WEB DESIGN dengan PHP dan

BOOTSTRAP” , Yogyakarta: Lokomedia, 2013

[5] Hakim Lukmanul , “PROYEK WEBSITE SUPER WOW! DGN PHP DAN

JQUERY” , Yogyakarta: Lokomedia, 2013

[6] https://rahmatulhayati.wordpress.com/2012/01/16/penilaian-portofolio

(diakses tanggal 2 mei 2015, pada pukul 19.22)

[7] https://lubisgrafura.wordpress.com/2007/09/07/portofolio-sebagai-

asesmen-otentik (diakses tanggal 2 mei 2015, pada pukul 19.26)

[8] http://linguasphereus.blogspot.com/2011/05/pengertian-penilaian-

portofolio.html (diakses tanggal 2 mei 2015, pada pukul 19.30)

[9] http://penelitiantindakankelas.blogspot.com/2009/03/manfaat-penggunaan-

penilaian-portofolio.html (diakses tanggal 2 mei 2015, pada pukul 19.33)

[10] https://sheteeguh.wordpress.com/materi-matematika/framework-php

(diakses tanggal 4 mei 2015, pada pukul 13.24)

[11] Awaludin Rahmat,Menyelami framework laravel,2015

[12] https://en.wikipedia.org/wiki/Laravel (diakses tanggal 4 mei 2015, pada

pukul 13.26)

[13] http://kursusyogyakarta.com/fitur-fitur-andalan-framework-laravel/

(diakses tanggal 4 mei 2015, pada pukul 13.28 )

[14] https://id.wikipedia.org/wiki/MySQL (diakses tanggal 4 mei 2015 pada

pukul 13.31)

[15] http://id.wikipedia.org/wiki/Basis_data ( diakses tanggal 4 mei 2015, pada

pukul 13.30 )

[16] http://www.diwarta.com/2012/06/29/pengertian-mysql-dan-beberapa-

kelebihan-pada-mysql.html (diakses tanggal 4 mei 2015, pada pukul 13.33)

Page 15: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil

[17] http://www.bangpahmi.com/2015/03/pengertian-mysql-menurut-para-

fakar.html (diakses tanggal 4 mei 2015, pada pukul 13.36)

[18] http://albert.mausharing.com/tag/pengertian-uml/ ( diakses tanggal 2 mei

2015, pada pukul 13.42)

[19] http://www.bangpahmi.com/2015/03/pengertian-bahasa-pemrograman-

php.html (diakses tanggal 4 mei 2015, pada pukul 13.58)

Page 16: RANCANG BANGUN APLIKASI PORTOFOLIO MAHASISWA …eprints.umm.ac.id/22939/1/jiptummpp-gdl-novanalkaf... · terima kasih kepada semua pihak yang telah memberikan bantuan moril dan materil

BIOGRAFI PENULIS

Novan Alkaf Bahraini Saputra dilahirkan

di Balikpapan, Kalimantan Timur pada tanggal 10

November 1993. Penulis dengan konsentrasi

rekayasa perangkat lunak jurusan Teknik

Informatika Universitas Muhammadiyah Malang

tahun 2011 ini berasal dari Banjarmasin,

Kalimantan Selatan yang beralamat di Jl.Meranti

II No. 43 Kayutangi. Jika ada pertanyaan dan saran

terkait dengan tugas akhir ini dapat menulis pesan

melalui email : [email protected].