RANCANG BANGUN RESPONSIVE WEB DESIGN PEDAFTARAN MAHASISWA BARU UNIVERSITAS MUHAMMADIYAH MALANG UNTUK MENINGKATKAN USABILITY PENGGUNA (STUDI KASUS UPT.PMB UNIVERSITAS MUHAMMADIYAH MALANG)
TUGAS AKHIR
Sebagai Persyaratan Guna Meraih Gelar Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang
Oleh : FARKHAN AMINULLOH 09560172
JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH MALANG 2014 i
LEMBAR PERSETUJUAN Rancang Bangun Responsive Web Design Pedaftaran Mahasiswa Baru Universitas Muhammadiyah Malang Untuk Meningkatkan Usability Pengguna (Studi Kasus UPT. PMB Universitas Muhammadiyah Malang)
TUGAS AKHIR
Sebagai Persyaratan Guna Meraih Gelar Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang
Menyetujui,
Dosen Pembimbing I
Dosen Pembimbing II
Dr. Ir. Ermanu A.Hakim, MT NIP. 10891090233
Zamah Sari, MT NIDN. 0708087701
ii
LEMBAR PENGESAHAN
Rancang Bangun Responsive Web Design Pedaftaran Mahasiswa Baru Universitas Muhammadiyah Malang Untuk Meningkatkan Usability Pengguna (Studi Kasus UPT. PMB Universitas Muhammadiyah Malang) TUGAS AKHIR
Sebagai Persyaratan Guna Meraih Gelar Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang Disusun Oleh : Farkhan Aminulloh 09560172
Tugas Akhir ini telah diuji dan dinyatakan lulus melalui sidang majelis penguji pada tanggal 11 April 2014 Menyetujui, Penguji I
Penguji II
Yufis Azhar, S.Kom, M.Kom NIDN. 0728088701
Diah Risqiwaty, MT
Mengetahui, Ketua Jurusan Teknik Informatika
Yuda Munarko, S.Kom, M.Sc NIP. 10806110443 iii
LEMBAR PERNYATAAN
Yang bertanda tangan dibawah ini : NAMA
: FARKHAN AMINULLOH
NIM
: 09560172
FAK./JUR.
: TEKNIK/INFORMATIKA
Dengan ini saya menyatakan bahwa Tugas Akhir dengan judul “RANCANG BANGUN RESPONSIVE WEB DESIGN PEDAFTARAN MAHASISWA BARU UNIVERSITAS MUHAMMADIYAH MALANG UNTUK MENINGKATKAN USABILITY PENGGUNA (STUDI KASUS UPT. PMB UNIVERSITAS MUHAMMADIYAH MALANG)” beserta seluruh isinya adalah karya saya sendiri dan bukan merupakan karya tulis orang lain, baik sebagian maupun seluruhnya, kecuali dalam bentuk kutipan yang telah disebutkan sumbernya.
Demikian surat pernyataan ini saya buat dengan sebenar-benarnya. Apabila kemudian adanya pelanggaran terhadap etika keilmuan dalam karya saya ini, atau ada klaim dari pihak lain terhadap keaslian karya saya ini maka saya siap menanggung segala bentuk resiko/sanksi yang berlaku.
Mengetahui
Malang, 4 April 2014
Dosen Pembimbing
Yang Membuat Pernyataan
Dr. Ir. Ermanu A.Hakim, MT
Farkhan Aminulloh
NIP. 10891090233
iv
KATA PENGANTAR
Assalamu’alaikum Wr. Wb Dengan memanjatkan puji syukur kehadirat Allah SWT, atas limpahan rahmat dan hidayah-Nya serta salawat dan salam yang tercurahkan kepada junjungan nabi besar Muhammad SAW sehingga penulis dapat menyelesaikan Tugas Akhir yang DESIGN
berjudul “RANCANG BANGUN RESPONSIVE WEB
PEDAFTARAN
MAHASISWA
BARU
UNIVERSITAS
MUHAMMADIYAH MALANG UNTUK MENINGKATKAN USABILITY PENGGUNA
(STUDI
KASUS
UPT.PMB
UNIVERSITAS
MUHAMMADIYAH MALANG)” Penyusunan Laporan Tugas Akhir ini merupakan salah satu persyaratan untuk mencapai kelulusan dan memperoleh gelar Sarjana Teknik dalam Program Studi Teknik Informatika Program Strata I Jurusan Teknik Informatika, Fakultas Teknik, Universitas Muhammadiyah Malang. Di dalam tulisan ini disajikan pokok-pokok pembahasan yang meliputi pendahuluan, landasan teori, analisa dan perancangan sistem, implementasi dan pengujian sistem serta kesimpulan dan saran. Penulis menyadari sepenuhnya bahwa Laporan Tugas Akhir ini masih jauh dari kesempurnaan, oleh karena itu penulis sangat mengharapkan kritik dan saran yang membangun dari semua pihak sehingga di dalam pembuatan laporan yang akan datang akan jauh lebih sempurna. Akhir kata penulis berharap, semoga Laporan Tugas Akhir ini dapat bermanfaat bagi penulis khususnya dan para pembaca pada umumnya. Wassalamu’alaikum Wr. Wb. Malang, April 2014
Farkhan Aminulloh v
DAFTAR ISI
ABSTRAK .............................................................................................................. i ABSTRACT ........................................................................................................... ii LEMBAR PERSEMBAHAN ............................................................................... ii KATA PENGANTAR ......................................................................................... iv DAFTAR ISI ......................................................................................................... v DAFTAR GAMBAR ......................................................................................... viii DAFTAR TABEL ................................................................................................ ix BAB I ..................................................................................................................... 1 PENDAHULUAN .................................................................................................. 1 1.1
Latar Belakang ............................................................................................ 1
1.2
Rumusan Masalah ....................................................................................... 2
1.3
Batasan Masalah.......................................................................................... 2
1.4
Tujuan ......................................................................................................... 3
1.5
Metodologi ................................................................................................. 3
1.5.1 STUDI PUSTAKA DAN PENGUMPULAN DATA ......................................... 3 1.5.2 ANALIS DAN DESAIN SYSTEM ................................................................ 3 1.5.3 IMPLEMENTASI DESAIN SYSTEM ............................................................ 4 1.5.4 DEPLOYMENT DAN PENGUJIAN ............................................................... 4 1.6
Sistematika Penulisan ................................................................................. 5
BAB II .................................................................................................................... 7 LANDASAN TEORI............................................................................................. 7 2.1
Sistem Informasi Akademik........................................................................ 7
2.1.1 PENGERTIAN S ISTEM .............................................................................. 7 2.1.2 PENGERTIAN DATA ............................................................................... 10 2.1.3 PENGERTIAN INFORMASI ...................................................................... 10 2.1.4 PENGERTIAN S ISTEM INFORMASI ......................................................... 11 2.1.5 PENGERTIAN AKADEMIK ...................................................................... 12 vi
2.1.6 PENGERTIAN S ISTEM INFORMASI AKADEMIK ...................................... 12
2.2
Jenjang Data dan Pengertiannya ............................................................... 12
2.3
Responsive Web ......................................................................................... 14
2.4
Usability .................................................................................................... 16
2.5
HTML 5 ................................................................................................... 17
2.6
Database ................................................................................................... 24
2.6.1 KOMPONEN SISTEM DATABASE ............................................................. 24 2.7
Entity Relationship Diagram ( ERD) ........................................................ 25
2.8
System Development Life Cycle (SDLC) .................................................. 26
2.9
Alat yang Dipakai dalam Pengembangan Sistem ..................................... 28
2.9.1 PHP ....................................................................................................... 28 2.9.2 DATABASE MYSQL................................................................................. 28 BAB III ................................................................................................................. 31 ANALISA DAN PERANCANGAN SISTEM................................................... 31 3.1
Analisa Sistem........................................................................................... 31
3.1.1 DESKRIPSI S ISTEM ................................................................................ 33 3.1.2 ANALISA KEBUTUHAN FUNGSIONAL ................................................... 33 3.1.3 ANALISA KEBUTUHAN NON FUNGSIONAL ........................................... 34 3.1.4 USE CASE DIAGRAM ................................................................................ 34 3.2
Perancangan Sistem .................................................................................. 34
3.2.1 ACTIVITY DIAGRAM ................................................................................ 35 3.2.2 SEQUENCE DIAGRAM ............................................................................ 35 3.2.3 CLASS DIAGRAM ...................................................................................... 38 3.2.4 DESIGN INTERFACE ................................................................................ 38 3.3
Perancangan Pengujian ............................................................................. 40
BAB IV ................................................................................................................. 42 vii
IMPLEMENTASI DAN PENGUJIAN SISTEM ............................................. 42 4.1
Implementasi ............................................................................................. 42
4.1.1 PERANGKAT KERAS ............................................................................... 42 4.1.2 PERANGKAT LUNAK ............................................................................. 43 4.1.3 IMPLEMENTASI ANTARMUKA ............................................................... 43 4.1.4 IMPLEMENTASI KELAS .......................................................................... 49 4.2
Pengujian ................................................................................................... 52
4.2.1 HASIL P ENGUJIAN BLACKBOX ............................................................... 53 4.2.2 KESIMPULAN HASIL P ENGUJIAN B LACKBOX ........................................ 55 BAB V .................................................................................................................. 56 KESIMPULAN DAN SARAN ........................................................................... 56 5.1
Kesimpulan ............................................................................................... 56
5.2
Saran .......................................................................................................... 57
Daftar Pustaka ..................................................................................................... 58 Lampiran
viii
DAFTAR GAMBAR Gambar 2.1 Karekteristik Sistem ............................................................................ 8 Gambar 2.2 Pengolahan data menjadi informasi .................................................. 10 Gambar 2.3 Jenjang Data Menjadi Database ....................................................... 12 Gambar 2.4 Contoh Responsive Web ................................................................... 14 Gambar 2.5 Ukuran berbagai device .................................................................... 15 Gambar 2.6 SDLC Waterfall ................................................................................ 26 Gambar 3.1 Arsitektur Sistem ............................................................................... 31 Gambar 3.2 Flowchart Penerimaan Mahasiswa Baru .......................................... 32 Gambar 3.3 Use Case Diagram ............................................................................ 34 Gambar 3.4 Activity Diagram Tahap Pendaftaran Mahasiswa Baru .................... 35 Gambar 3.5 Sequence Diagram Tahap 1 ............................................................. 36 Gambar 3.6 Sequence Diagram Tahap 2 .............................................................. 36 Gambar 3.7 Sequence Diagram Tahap 3 .............................................................. 37 Gambar 3.8 Sequence Diagram Tahap 4 .............................................................. 37 Gambar 3.9 Class Diagram Penerimaan Mahasiswa Baru ................................... 38 Gambar 3.10 Interface Aplikasi Pendaftaran Mahasiswa Baru Versi Desktop .... 39 Gambar 3.11 Interface Aplikasi Pendaftaran Mahasiswa Baru Versi Mobile ..... 39 Gambar 4.1 Halaman Home Versi Desktop .......................................................... 43 Gambar 4.2 Halaman Home Versi Mobile ........................................................... 44 Gambar 4.3 Halaman Pengisian Data Tahap 1 Versi Desktop ............................. 44 Gambar 4.4 Halaman Pengisian Data Tahap 1 Versi Mobile ............................... 45 Gambar 4.5 Halaman Pengisian Data Tahap 2 Versi Desktop.............................. 45 Gambar 4.6 Halaman Pengisian Data Tahap 2 Versi Mobile ............................... 46 Gambar 4.7 Halaman Pengisian Data Tahap 3 Versi Desktop.............................. 46 Gambar 4.8 Halaman Pengisian Data Tahap 3 Versi Mobile ............................... 47 Gambar 4.9 Halaman Pengisian Data Tahap 4 Versi Desktop.............................. 47 Gambar 4.10 Halaman Pengisian Data Tahap 4 Versi Mobile ............................. 48 Gambar 4.11 Halaman Informasi Nomer Pendaftaran .......................................... 48 Gambar 4.12 Halaman Data Mahasiswa Masuk ke Server ................................... 49 ix
DAFTAR TABEL Tabel 2.1 Contoh sistem yang diterapkan ............................................................... 9 Tabel 2.2 Perbedaan Native Apps dan Responsive Web ...................................... 15 Tabel 2.3 Perbedaan HTML 5 dengan Gernerasi Sebelumnya ............................. 18 Tabel 3.1 Kebutuhan Fungsional dari Sistem ....................................................... 33 Tabel 3.2 Perancangan Pengujian Pengenalan Perangkat yang digunakan .......... 40 Tabel 3.3 Perancangan Pengujian Menu disetiap Tahap ...................................... 40 Tabel 3.4 Perancangan Pengujian Insert Databse................................................. 41 Tabel 3.5 Perancangan Pengujian Informasi Nomer Online ................................. 41 Tabel 4.1 Pengujian Pengenalan Perangkat yang digunakan ............................... 53 Tabel 4.2 Pengujian Menu disetiap Tahap ........................................................... 53 Tabel 4.3 Pengujian Insert Database ................................................................... 54 Tabel 4.4 Pengujian Informasi Nomor Online ..................................................... 55
x
Daftar Pustaka [1]
Mulyadi. 2001. Sistem Akuntansi, Edisi ke-tiga. Salemba 4, Jakarta.
[2]
Krismiaji. 2002. Sistem Informasi Akuntansi. Yogyakarta: Unit Penerbit dan Percetakan AMP YKPN
[3]
Jogiyanto, Hartono. 2005. Analisis dan Desain Sistem Informasi. Yogyakarta: Penerbit Andi
[4]
Al Fatta, Hanif. 2007. Analisis dan Perancangan Sistem Informasi. Yogyakarta: Penerbit Andi.
[5]
Jeffry, L. Whitten,et al. 2004. Metode Desain dan Analisis Sistem. Edisi I. Diterjemahkan oleh tim penerjemah Andi. Yogyakarta: Penerbit Andi Madcoms.
[6]
Cormedia. 2013. Mobile Internet. CoreMedia Asia Pacific. Coremedia.
[7]
Marcotte, Ethan. 2012. Responsive Web Design. Standford University.
[8]
Irhamullah. 2009. Unsur-Unsur HTML5. STIMIK Akakom. Yogyakarta.
[9]
Frain, Ben. 2012. Responsive Web Design with HTML5 dan CSS3. Birmingham. Mumbai
[10] Fisher, Andrew. 2013. Jump Start Responsive Web Design. Sitepoint. VIC Australia. [11] Yudhanto, Yudha. 2007. HTML5. Ilmu computer.com [12] Anonim. 2012. Analisa dan Perbandingan HTML 4.01 dan HTML 5. Universitas Kristen Satya Wacana. Jawa Tengah. Indonesia.
xi
