RANCANG BANGUN APLIKASI INFORMASI DI JURUSAN
TEKNIK INFORMATIKA UMM MENGGUNAKAN
TEKNOLOGI IONIC
TUGAS AKHIR
Diajukan Untuk Memenuhi
Persyaratan Guna Meraih Gelar Sarjana Strata 1
Teknik Informatika Universitas Muhammadiyah Malang
Oleh:
A. Fauzan Mahben
201110370311210
JURUSAN INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH MALANG
2015
i
LEMBAR PERSETUJUAN
RANCANG BANGUN APLIKASI INFORMASI DI JURUSAN TEKNIK
INFORMATIKA UMM MENGGUNAKAN TEKNOLOGI IONIC
TUGAS AKHIR
Sebagai Persyaratan Guna Meraih Gelar Sarjana Strata I
Teknik Informatika Universitas Muhammadiyah Malang
A. Fauzan Mahben
201110370311210
ii
LEMBAR PENGESAHAN
RANCANG BANGUN APLIKASI INFORMASI DI JURUSAN TEKNIK
INFORMATIKA UMM MENGGUNAKAN TEKNOLOGI IONIC
TUGAS AKHIR
Sebagai Persyaratan Guna Meraih Gelar Sarjana Strata I
Teknik Informatika Universitas Muhammadiyah Malang
Disusun Oleh:
A. Fauzan Mahben
201110370311210
Tugas Akhir ini telah diuji dan dinyatakan lulus melalui sidang majelis penguji
iii
LEMBAR PERNYATAAN
Yang bertanda tangan di bawah ini:
NAMA : A. Fauzan Mahben
NIM : 201110370311210
FAK./JUR. : TEKNIK/TEKNIK INFORMATIKA
Dengan ini penulis menyatakan bahwa Tugas Akhir dengan judul “RANCANG
BANGUN APLIKASI INFORMASI DI JURUSAN TEKNIK INFORMATIKA UMM MENGGUNAKAN
TEKNOLOGI IONIC” beserta seluruh isinya adalah karya penulis sendiri bukan merupakan karya
tulis orang lain, baik sebagian maupun seluruhnya, kecuali dalam bentuk kutipan yang telah
disebutkan sumbernya.
Demikian surat pernyataan ini penulis buat dengan sebenar-benarnya. Apabila kemudian
ditemukan adanya pelanggaran terhadap etika keilmuan dalam karya penulis, atau ada klaim dari
pihak lain terhadap keasliannya maka penulis siap menanggung segala bentuk resiko/sangsi yang
berlaku.
iv
LEMBAR PERSEMBAHAN
Sembah sujud serta syukur rasanya teramat pantas diberikan kepada sang penguasa alam,
pemilik serta sumber segala macam ilmu Allah SWT. Karena Taburan cinta dan kasih sayang-Mu
telah memberikanku kekuatan, membekaliku dengan ilmu serta memperkenalkanku dengan cinta.
Atas karunia serta kemudahan yang Engkau berikan akhirnya skripsi yang sederhana ini dapat
terselesaikan. Sholawat dan salam selalu terlimpahkan keharibaan Rasullah Muhammad SAW.
Karya sederhana ini kupersembahkan kepada yang sangat kukasihi dan kusayangi. Jika ada kata
yang lebih dalam dan bermakna dari terima kasih, maka kata itu akan penulis khaturkan kepada
Ayahanda H Mahben Alimuddin dan Ibunda Hj Siti Fatimah AB, yang telah mendidik dengan penuh
kasih, memotivasi dengan sepenuh hati, serta mendo’akan dengan penuh keikhlasan, dan dengan
besar hati membiayai pendidikan penulis sedari dulu hingga perguruan tinggi. Datang dari tempat
yang sama, terima kasih yang tidak kalah besarnya diberikan kepada sosok – sosok saudara(i)
penulis yaitu kk Fauziyah, kk Mad, kk Asma, dan kk Ikram yang terhimpun menjadi kakak penulis.
Terima kasih atas segala macam bentuk dukungan, motivasi, semangat, serta do’anya. Terima
kasih pula karna telah menghadirkan ponakan – ponakan lucu yang hanya dengan mendengar
suaranya mampu memberikan semangat serta hiburan tersendiri untuk penulis dikala lel ah
melanda. Terima kasih juga untuk ke empat ipar penulis yang selama ini telah mendoakan penulis
dalam menyelesaikan tugas akhir ini, Terima kasih juga kepada saudara seperjuangan Julan,
Fadlun, Nizam, Dayat (hugos), Ghandi, Irfan, Rido, Naim, Madi, Al, Huda, Beni, Danar, Rizqy,Yuli,
Putri, Fara, dan semua warga yang bernaung dibawah atap kost 58 B, terima kasih atas canda,
tawa, tangis dan air matanya. Rasa dari masakan kita akan tetap ada didalam jiwa :D terima kasih
atas kerja samanya yah :D
Seluruh angkatan informatika, Az, Putri, Maulida, dan semua sahabat sekelas lainnnya, yang telah
memberikan bantuan dan semangat dalam pengerjaan tugas akhir.
v
KATA PENGANTAR
Puji dan syukur patulah selalu haturkan kehadirat Allah SWT karena atas limpah dan
rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan tugas akhir penulis yang berjudul
: “RANCANG BANGUN APLIKASI INFORMASI DI JURUSAN TEKNIK INFORMATIKA UMM
MENGGUNAKAN TEKNOLOGI IONIC”.
Dalam tugas akhir ini penulis mengembangkan sistem informasi yang menggunakan
metode IONIC yaitu metode yang dapat di kembangkan ke semua platform. Penulis menyadari
sepenuhnya bahwa dalam penulisan tugas akhir ini masih banyak kekurangan dan keterbatasan.
Oleh karena itu peneliti mengharapkan saran yang membangun agar tulisan ini bermanfaat bagi
perkembangan ilmu pengetahuan ke depan.
Akhir kata penulis mengucapkan terimakasih kepada semua pihak yang telah membantu
hingga tugas akhir ini dapat terselesaikan.
Malang, Oktober 2015
Penulis
A. Fauzan Mahben
NIM: 201110370311210
vi
DAFTAR ISI
LEMBAR PERSETUJUAN..........................................................................i
LEMBAR PENGESAHAN ..........................................................................ii
LEMBAR PERYATAAN............................................................................iii
ABSTRAK ...................................................................................................iv
ABSTRACT...................................................................................................v
LEMBAR PERSEMBAHAN .....................................................................vi
KATA PENGANTAR ...............................................................................vii
DAFTAR ISI .............................................................................................viii
DAFTAR GAMBAR ...................................................................................ix
DAFTAR TABEL ........................................................................................x
BAB I PENDAHULUAN ............................................................................1
1.1. Latar Belakang ..............................................................................1
1.2. Perumusan Masalah .....................................................................2 1.3. Batasan Masalah ..........................................................................2
1.4. Tujuan Penulisan..........................................................................3 1.5. Manfaat Penelitian ........................................................................3 1.6 Metode Penelitian ........................................................................3
1.7. Sistem Penulisan ...........................................................................7
BAB II TINJAUAN PUSTAKA ................................................................8
2.1. Sistem Informasi .........................................................................8
2.1.1. Pengertian Sistem Informasi .............................................8
2.1.2. Konsep Sistem Informasi...................................................9
2.1.3. Komponen Iistem Informasi ..............................................9
2.1.4. Pengertian sistem informasi akademik (SIA) .................10
2.2. Web Service ...............................................................................10
2.2.1. Pengertian Web Service ..................................................11
2.2.2. Arsitektur Dari Web Service ...........................................12
2.3. Rest ............................................................................................13
2.4. Ionic ..........................................................................................15
vii
2.4.1. Arsitektur IONIC .............................................................15
2.4.2. Apache Cordova ..............................................................15
2.4.2.1. HTML5 ................................................................16
2.4.2.2. CSS ......................................................................17
2.4.2.3. JavaSript ..............................................................18
2.5. Android .....................................................................................19
2.5.1. Arsitektur Android ..........................................................20
2.5.1.1. Linux Kernel........................................................20
2.5.1.2. Android Runtime .................................................21
2.5.1.3. Libraries...............................................................21
2.5.1.4. Application Framework .......................................21
2.5.1.5. Aplication ............................................................21
2.5.2. Komponen Aplikasi Android.......................................... 21
BAB III ANALISA DAN PERANCANGAN SISTEM ..........................24
3.1. Analisa Kebutuhan Sistem ........................................................24
3.1.1. Kebutuhan Sistem ............................................................27
3.1.2. Kebutuhan Fungsional .....................................................27
3.1.3. Kebutuhan non Fungsional ..............................................28
3.1.4. Use Case ..........................................................................30
3.2. Perancangan Sistem ...................................................................31
3.2.1. Activity Diagram .............................................................31
3.2.2. Sequence Diagram ...........................................................45
3.2.3. Class Diagram..................................................................57
3.3. Entity Relationship Diagram (ERD) ..........................................58
3.3.1. Conseptual Data Model (CDM).......................................58
BAB IV IMPLEMENTASI DAN PENGUJIAN ......................................60
4.1. Implementasi ..............................................................................60
viii
4.1.1. Kebutuhan Implementasi .................................................60
4.1.2. Implementasi User ...........................................................60
4.1.2.1. Fitur Login User ..................................................61
4.1.2.2. Implementasi Chatting.........................................64
4.1.3. Implementasi Admin .......................................................66
4.1.3.1. Fitur Login Admin...............................................66
4.1.3.2. Fitur Add Pengumuman ......................................67
4.1.3.3. Fitur Add User .....................................................71
4.2. Pengujian....................................................................................74
4.2.1. Kebutuhan Pengujian .......................................................74
4.2.2. Skenario Pengujian ..........................................................74
4.2.2.1. Aplikasi Mahasiswa atau Dosen..........................74
4.2.2.2. Sistem Server .......................................................75
4.2.3. Hasil Pengujian ................................................................75
4.2.3.1. Pengujian Aplikasi Mahasiswa atau Dosen.........75
4.2.3.2. Pengujian Sistem Server ......................................78
BAB V KESIMPULAN DAN SARAN......................................................81
5.1. Kesimpulan ...............................................................................81
5.2. Saran..........................................................................................81
DAFTAR PUSTAKA..................................................................................82
ix
DAFTAR GAMBAR
Gambar 1.1 Diagram perancangan sistem ......................................................5
Gambar 2.1 arsitektur dari web service ........................................................13
Gambar 2.2 arsitektur web servis yang menggunakan REST API ...............15
Gambar 2.3 arsitektur ionic ..........................................................................15
Gambar 2.4 arsitektur cordova API ..............................................................16
Gambar 2.5 Proses Kerja CSS ......................................................................18
Gambar 2.6 Implementasi JavaScript ...........................................................19
Gambar 2.7 Arsitektur Android ....................................................................20
Gambar 3.1 Topologi Jaringan Sistem Informasi Akademik Di Jurusan Teknik Informatika
UMM ............................................................................................................25
Gambar 3.2 Cara kerja dari Jaringan Sistem Informasi Akademik Di Jurusan
Teknik Informatika UMM ............................................................................26
Gambar 3.3 Use Case Aplikasi Sistem Informasi Akademik Di Jurusan Teknik Informatika
UMM ............................................................................................................30
Gambar 3.4 activity diagram loding .............................................................31
Gambar 3.5 Activity diagram melihat pengumuman ...................................32
Gambar 3.6 Activity diagram chatting .........................................................32
Gambar 3.7 Activity diagram login .............................................................33
Gambar 3.8 Activity diagram melihat pengumuman ..................................34
Gambar 3.9 Activity diagram chatting .........................................................34
Gambar 3.10 Activity diagram login ............................................................35
Gambar 3.11 Activity diagram melihat status manage dosen ......................36
Gambar 3.12 Activity diagram manage pengumuman .................................36
Gambar 3.13 Activity diagram melihat pengumuman .................................37
Gambar 3.14 Activity diagram manage data mahasiswa..............................38
Gambar 3.15 Activity diagram view data mahasiswa ..................................38
x
Gambar 3.16 Activity diagram update data mahasiswa ...............................39
Gambar 3.17 Activity diagram insert data user ............................................40
Gambar 3.18 Activity diagram delet data mahasiswa .................................41
Gambar 3.19 Activity diagram manage data dosen ......................................41
Gambar 3.20 Activity diagram view data dosen ..........................................42
Gambar 3.21 Activity diagram update data dosen........................................43
Gambar 3.22 Activity diagram insert data dosen .........................................44
Gambar 3.23 Activity diagram delet data mahasiswa .................................45
Gambar 3.24 sequence diagram login ..........................................................46
Gambar 3.25 Sequence diagram melihat pengumuman ...............................46
Gambar 3.26 Sequence diagram melihat status dosen..................................47
Gambar 3.28 Sequence diagram login ..........................................................47
Gambar 3. 29 Sequence diagram chating .....................................................48
Gambar 3.30 Sequence diagram view pengumuman ...................................49
Gambar 3.31 Sequence diagram login ..........................................................49
Gambar 3.32 Sequence diagram melihat pengumuman ...............................50
Gambar 3.33 Sequencediagram up date pengumuman.................................50
Gambar 3.34 Sequence diagram insert pengumuman ..................................51
Gambar 3.35 Sequence diagram view pengumuman ...................................51
Gambar 3.36 Sequence diagram delete pengumuman..................................52
Gamabar 3.37 Sequence diagram manage data mahasiswa..........................52
Gambar 3.38 Sequence diagram up date data mahasiswa ............................53
Gambar 3.39 Sequence diagram insert data mahasiswa ...............................53
Gambar 3.40 Sequence diagram view data mahasiswa ................................54
Gambar 3.41 Sequence diagram delete data mahasiswa ..............................54
Gamabar 3.42 Sequence diagram manage data dosen ..................................55
Gambar 3.43 Sequence diagram up date data dosen ....................................55
xi
Gambar 3.44 Sequence diagram insert data dosen .......................................56
Gambar 3.45 sequence diagram view data dosen .........................................56
Gambar 3.46 sequence diagram delete data dosen .......................................57
Gambar 3.47 Class diagram..........................................................................58
Gambar 3.48 Conseptual Data Model ERD Sistem......................................59
Gmbar 4.1 Halaman Tampilan Login User ..................................................57
Gambar 4.2 halaman tampilan login untuk mahasiswa (a) dan dosen (b) ....57
Gambar 4.2 source code halaman login.......................................................58
Gambar 4.3 Tampilan halam chatting mahasiswa ke Dosen (a) dan dosen ke mahasiswa (b)......... 59
Gambar 4.4 tampilan halaman chating .........................................................59
Gambar 4.5 source code chating mahasiswa dan dosen...............................60 Gambar 4.6 tampilan halaman login admin..................................................61
Gambar 4.7 source code login admin ...........................................................62
Gambar 4.8 Tampilan halaman add pengumuman .......................................62
Gambar 4.9 source code halaman penambahan pengumuman.....................63
Gambar 4.10 Tampilan Add User .................................................................64
Gambar 4.11 source code halaman penambahan user..................................64
xii
DAFTAR TABEL
Tabel 2.1 CRUD correspondence with HTTP methods ...............................14
Tabel 3.1 Kebutuhan Fungsional ..................................................................27
Tabel 3.2 Kebutuhan Non-Fungsional..........................................................29
Tabel 4.1 Pengujian login .............................................................................75
Tabel 4.2 Pengujian pengiriman pesan .........................................................76
Tabel 4.3 Pengujian View Pengumuman......................................................77
Tabel 4.4 pengujian logout pada aplikasi user .............................................77
Tabel 4.5 Pengelolaan Data User .................................................................78
Tabel 4.6 Pengujian Penyimpanan Chat.......................................................79
Tabel 4.7 Pengujian Penyimpanan Pengumuman ........................................80
xiii
DAFTAR PUSTAKA
[1] Mujab Syarifl, Satoto Imam Kodrat, Martono Teguh Kurniawan. Perancangan Sistem
Informasi Akademik Berbasis Mobile Web Studi Kasus Di Program Studi Sistem
Komputer Universitas Diponegoro.
[2] Nuari, Novi. 2013 Pontianak. Perancangan Aplikasi Layanan Mobile Informasi
Administrasi Akademik Berbasisandroid Menggunakan Web Service (Studi Kasus
Reg.B Universitas Tanjungpura)
[3] Renia, Yunita. 2008 Palembang, Sistem Informasi Akademik Pada SMA Yanitas
Palembang
[4] Siswoutomo, Wiwit. Agustus 2004 Yogyakarta. Membangun Webservice Open
Source Menggunakan PHP
[5] Fauziah, Yuli. Januari 2013 Yogyakarta. Aplikasi Iklan Baris Online Menggunakan
Arsitektur REST Web Service
[6] Ravulavaru, Arvind. Learning Ionic
[7] Phan, Hoc. Full-stack mobile app with ionic framework 2014
[8] Winarno, Edy ST,M,Eng. Desember 2014. Grafik Dan Animasi Web Dengan
HTML5. PT ELEX MEDIA KOMPUTINDO
[9] Madcoms. Yogyakarta :Andi 2013
[10] Alfikri, Dzani, Muhammad. Mei 2015. Rancangan Bangun Aplikasi Monitoring
Karyawan Berbasis Android