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