SKRIPSI
IMPLEMENTASI SISTEM PERMINTAAN SUKU CADANG KENDARAAN PADA GUDANG DINAS LINGKUNGAN HIDUP KABUPATEN SLEMAN DENGAN PROGRESSIVE WEB APPS (PWA)
FARIDHOTUL KHASANAH Nomor Mahasiswa : 175410026
PROGRAM STUDI INFORMATIKA
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AKAKOM
YOGYAKARTA 2021
i SKRIPSI
HALAMAN JUDUL
IMPLEMENTASI SISTEM PERMINTAAN SUKU CADANG KENDARAAN PADA GUDANG DINAS LINGKUNGAN HIDUP KABUPATEN SLEMAN DENGAN PROGRESSIVE WEB APPS (PWA)
Diajukan sebagai salah satu syarat untuk menyelesaikan studi jenjang strata satu (S1)
Program Studi Informatika
Sekolah Tinggi Manajemen Informatika dan Komputer AKAKOM
Yogyakarta
Disusun Oleh
FARIDHOTUL KHASANAH Nomor Mahasiswa : 175410026
PROGRAM STUDI INFORMATIKA
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AKAKOM
YOGYAKARTA 2021
ii
iii
iv
PERSEMBAHAN
Pertama-tama, saya ucapkan terimakasih kepada Allah SWT yang telah melimpahkan segala rahmatNya sehingga saya dapat menyelesaikan penelitian ini dengan baik. Saya persembahkan skripsi ini untuk :
1. Ibunda saya tercinta, Ibu Indarsih, wanita terhebat dan tersabar didunia, yang tak pernah lelah mendoakan saya disetiap sujudnya, yang selalu memberikan pelukan hangatnya, yang selalu memberikan suntikan semangat saat saya berada di titik terendah.
2. Ayahanda saya tercinta, Ayah Kistopo, cinta pertama saya didunia, lelaki terhebat dan tertangguh yang pernah saya punyai. Yang selalu memberikan bahunya untuk saya bersandar, yang selalu memberikan pembelajaran kepada saya agar menjadi perempuan yang kuat, yang selalu ada setiap saat. 3. Alm. Kakak saya, Isnan Fajar Romadhon, yang memberikan dorongan ke
saya sebelum beliau meninggal untuk terus semangat menjalani hidup, terus berjuang dan jangan pernah menyerah serta harus melanjutkan kuliah. Kakak yang raganya sudah tidak bersama kami, akan tetapi jiwanya selalu bersama kami dimanapun kami berada. Al-Fatihah.
4. Yang terkasih, mas Arvian Eka Saputra, yang sedang bersama-sama berjuang menyelesaikan penelitian dan berjuang menjadi lebih baik kedepannya.
5. Dosen Pembimbing saya, Bapak Edi Faizal,S.T.,M.Cs. yang membimbing saya dan membantu terselesaikannya penelitian ini.
v
7. Mentor coding saya, Abdul Rohman Wahid yang telah mengajari dan membantu saya sehingga penelitian ini dapat terselesaikan.
8. Mentor perserveran saya, Bapak Wahyu Bimo Sukarno yang telah mengajari dan membantu saya sehingga sistem saya dapat berjalan di server. 9. Andrianto Nur Anggoro, Muhammad Najib dan Arief Maulana Ikhsan yang
telah membantu saya dalam menyelesaikan penelitian ini.
10. Lukman Surya Laksana, teman satu angkatan dan satu bimbingan yang sedang bersama-sama berjuang untuk menyelesaikan penelitian ini.
11. Teman – teman satu angkatan 2017 yang telah berjuang bersama hingga selesai penelitian ini.
12. Nurul Badriyah dan Lilik Faizah yang sangat menginspirasi saya untuk lulus hanya dalam waktu 7 semester saja walaupun kerja sambil kuliah.
13. Kucing saya momo, yang selalu setia menemani saya saat sedang lembur menyelesaikan penelitian ini maupun menyelesaikan pekerjaan lain. 14. Semua orang yang tidak tersebut namanya di halaman ini yang membantu
vi MOTTO
Berbuat baiklah seburuk apapun respon orang lain
Tetaplah menjadi baik
Jangan menuntut orang lain melihat kebaikan kita
Arogan jatuhnya
Lapangkan dadamu
Luaskan sabarmu
Sampai orang lain bosan dengan kebaikanmu
ِت ٰرـ ۡيـَخ ۡلا اوُقِبَت ۡساَف
-Fastabiqul Khoirot-
Berlomba-lombalah dalam kebaikan (QS.Al-Ma'idah : 48)vii INTISARI
Penggunaan kertas pada instansi pemerintah belum sepenuhnya bisa terkendali serta masih ada banyak pekerjaan yang dilakukan dengan cara manual. Contohnya pada salah satu instansi pemerintah di Kabupaten Sleman yaitu Dinas Lingkungan Hidup Kabupaten Sleman, permintaan suku cadang kendaraan dilakukan dengan cara manual atau belum terdigitalisasi. Pekerjaan ini selain memakan waktu yang lama juga menggunakan kertas dalam jumlah yang sangat banyak. Saat ini pembuatan sistem informasi berbasis web maupun mobile untuk menggantikan kebiasaan secara manual seperti pada contoh diatas sudah banyak dijalani oleh instansi pemerintah lainnya. Penelitian dengan judul “Implementasi Sistem Permintaan Suku Cadang Kendaraan pada Gudang Dinas Lingkungan Hidup Kabupaten Sleman dengan Progressive Web Apps (PWA)”, memiliki rumusan masalah bagaimana mengurangi penggunaan kertas serta membangun aplikasi untuk mempercepat proses permintaan suku cadang pada Gudang Dinas Lingkungan Hidup Kabupaten Sleman. Tujuan penelitian ini adalah untuk membangun sistem yang akan digunakan dalam mempercepat proses permintaan suku cadang kendaraan.
Sistem Permintaan Suku Cadang adalah sistem yang digunakan untuk mengubah kebiasaan permintaan suku cadang secara manual menjadi terdigitalisasi. Sistem ini dibangun dengan menggunakan metode Progressive Web Apps (PWA) dengan Push Notification. Bahasa pemrograman yang digunakan dalam penelitian ini adalah Javascript. Teknologi yang dipakai dalam melakukan pembuatan sistem ini yaitu menggunakan framework Nuxt.js untuk membangun frontend dan Express.js untuk membangun backend. Sedangkan Runtime yang digunakan adalah Node.Js. Untuk duplikasi database menggunakan MySQL. Serta Nginx sebagai Web Server yang digunakan dalam melakukan implementasinya. Dalam pembuatan Push Notification, Runtime yang digunakan adalah Socket.io.
Berdasarkan analisa data yang dilakukan, sehingga diperoleh hasil yaitu sistem dapat mempermudah melakukan manajemen data suku cadang kendaraan keluar dan masuk. Kepala bengkel (admin) dapat memasukkan data master dan dapat melakukan persetujuan atau penolakan serta akan menerima notifikasi apabila terdapat permintaan masuk. Sedangkan pengemudi (peminta) dapat melakukan permintaan suku cadang darimana saja dan dapat melihat riwayat permintaannya serta dapat menerima notifikasi apabila terdapat permintaan yang sudah dilakukan persetujuan atau penolakan.
Kata kunci : Express.Js, Node.Js, Nuxt.Js, Progressive Web Apps, Push Notification, Socket.io
viii
KATA PENGANTAR
Puji syukur saya panjatkan kehadirat Allah SWT yang telah melimpahkan rahmat, hidayah serta inayah-Nya sehingga saya dapat menyelesaikan penelitian yang berjudul “Implementasi Sistem Permintaan Suku Cadang Kendaraan pada Gudang Dinas Lingkungan Hidup Kabupaten Sleman dengan Progressive Web Apps (PWA)”. Tak lupa sholawat serta salam senantiasa tercurah kepada junjungan kita Nabi Agung Muhammad SAW yang selalu kita nantikan syafaatnya.
Penelitian ini disusun sebagai salah satu syarat untuk menyelesaikan Studi Strata Satu di STMIK AKAKOM Yogyakarta, dengan harapan sistem pada penelitian ini dapat berguna dan berkembang lebih baik kedepannya.
Dalam penyusunan penelitian ini mungkin tidak akan terlaksana tanpa dukungan, bimbingan dan petunjuk dari semua pihak yang telah membantu sehingga penelitian dapat terselesaikan dengan baik. Untuk itu saya ingin mengucapkan terimakasih sebesar-besarnya kepada :
1. Kedua orang tua saya, Bapak Kistopo dan Ibu Indarsih yang tak henti-hentinya menengadah kepada Gusti Allah untuk seluruh kebaikan saya sekarang maupun kedepannya, yang telah memberikan seluruh jiwa raganya dan waktunya untuk mendukung dan berkerja keras demi saya. 2. Bapak Ir. Totok Suprawoto, M.M., M.T. selaku Ketua STMIK
AKAKOM Yogyakarta.
3. Ibu Dini Fakta Sari, S.T., M.T., selaku Ketua Program Studi Teknik Informatika STMIK AKAKOM Yogyakarta.
ix
4. Bapak Edi Faizal, S.T., M.Cs., selaku dosen pembimbing saya dalam penyusunan penelitian ini.
5. Seluruh dosen dan keluarga besar STMIK AKAKOM Yogyakarta. 6. Teman-teman satu angkatan 2017 yang telah membantu dalam
penyelesaian penelitian ini.
7. Semua pihak yang telah mendukung saya untuk menyelesaikan studi di STMIK AKAKOM Yogyakarta yang tidak dapat disebutkan satu-persatu.
Saya menyadari bahwa penelitian ini jauh dari kata sempurna, sehingga kritik dan saran yang bersifat membangun sangat diperlukan. Akhir kata semoga penelitian ini dapat memberikan banyak manfaat bagi kita pembacanya.
Sleman, Januari 2021
x DAFTAR ISI
HALAMAN JUDUL ... i
HALAMAN PERSETUJUAN ... ii
HALAMAN PENGESAHAN ... iii
PERSEMBAHAN ... iv
MOTTO ... vi
INTISARI ... vii
KATA PENGANTAR ... viii
DAFTAR ISI ... x
DAFTAR TABEL ... xiii
DAFTAR GAMBAR ... xiv
BAB 1 PENDAHULUAN ... 1 1.1 Latar Belakang ... 1 1.2 Rumusan Masalah ... 3 1.3 Ruang Lingkup ... 4 1.4 Tujuan Penelitian ... 5 1.5 Manfaat Penelitian ... 5 1.6 Sistematika Penulisan ... 6
xi
2.1 Tinjauan Pustaka ... 7
2.2 Dasar Teori ... 10
BAB 3 METODE PENELITIAN... 12
3.1 Bahan ... 12
3.2 Peralatan ... 12
3.3 Prosedur dan Pengumpulan Data ... 13
3.4 Analisis dan Rancangan Sistem... 13
3.4.1 Arsitektur Sistem ... 14
3.4.2 Rancangan Proses... 16
3.4.3 Rancangan Prosedur ... 31
3.4.4 Rancangan Data ... 32
3.4.5 Rancangan AntarMuka... 35
BAB 4 IMPLEMENTASI DAN PEMBAHASAN SISTEM ... 41
4.1 Implementasi Sistem ... 41
4.1.1 Koneksi Database ... 41
4.1.2 Login ... 42
4.1.3 Tambah Suku Cadang ... 45
4.1.4 Tambah Suku Cadang Masuk ... 47
4.1.5 Tambah Suku Cadang keluar ... 48
xii
4.1.7 Tambah Permintaan ... 51
4.1.8 Persetujuan Permintaan ... 52
4.1.9 Push Notification ... 55
4.1.10 Progressive Web Apps (PWA) ... 60
4.2 Pembahasan Sistem ... 61
4.2.1 Permintaan dengan Push Notification ... 62
4.2.2 Progressive Web Apps (PWA) ... 65
4.2.3 Suku Cadang ... 69
4.2.4 Suku Cadang Masuk ... 69
4.2.5 Suku Cadang Keluar ... 70
4.2.6 Kendaraan ... 71 4.2.7 Laporan Masuk-Keluar ... 72 BAB 5 PENUTUP ... 73 5.1 Kesimpulan ... 73 5.2 Saran ... 74 DAFTAR PUSTAKA ... 75 LAMPIRAN
xiii
DAFTAR TABEL
Tabel 2.1 Tabel Perbandingan Penelitian... 7
Tabel 3.1 Struktur Tabel User ... 32
Tabel 3.2 Struktur Tabel Suku Cadang ... 32
Tabel 3.3 Struktur Tabel Suku Cadang Masuk ... 33
Tabel 3.4 Struktur Tabel Suku Cadang Keluar ... 34
Tabel 3.5 Struktur Tabel Kendaraan ... 34
xiv
DAFTAR GAMBAR
Gambar 3.1 Arsitektur Sistem ... 14
Gambar 3.2 Use Case Diagram Sistem Informasi Suku Cadang ... 16
Gambar 3.3 Activity Diagram Input Data Suku Cadang ... 17
Gambar 3.4 Activity Diagram Input Data Suku Cadang Masuk ... 18
Gambar 3.5 Activity Diagram Input Data Suku Cadang Keluar ... 19
Gambar 3.6 Activity Diagram Input Data Kendaraan ... 20
Gambar 3.7 Activity Diagram Permintaan Suku Cadang ... 21
Gambar 3.8 Activity Diagram Approval Suku Cadang ... 22
Gambar 3.9 Activity Diagram Laporan ... 23
Gambar 3.10 Sequence Diagram Input Data Suku Cadang ... 24
Gambar 3.11 Sequence Diagram Input Data Suku Cadang Masuk ... 25
Gambar 3.12 Sequence Diagram Input Data Suku Cadang Keluar ... 26
Gambar 3.13 Sequence Diagram Input Data Kendaraan ... 27
Gambar 3.14 Sequence Diagram Permintaan Suku Cadang ... 28
Gambar 3.15 Sequence Diagram Approval Suku Cadang ... 29
Gambar 3.16 Sequence Diagram Laporan ... 30
Gambar 3.17 Rancangan Prosedur ... 31
Gambar 3.18 Halaman Data Suku Cadang ... 35
Gambar 3.19 Halaman Inputan Data Suku Cadang ... 36
Gambar 3.20 Halaman Data Suku Cadang Masuk... 36
Gambar 3.21 Halaman Inputan Data Suku Cadang Masuk ... 36
xv
Gambar 3.23 Halaman Inputan Data Suku Cadang Keluar ... 37
Gambar 3.24 Halaman Data Kendaraan... 38
Gambar 3.25 Halaman Inputan Data Kendaraan ... 38
Gambar 3.26 Halaman Data Permintaan Suku Cadang ... 39
Gambar 3.27 Halaman Inputan Permintaan Suku Cadang ... 39
Gambar 3.28 Halaman Laporan ... 40
Gambar 4.1 Koneksi Database ... 41
Gambar 4.2 Halaman Login ... 42
Gambar 4.3 Penambahan user dan tipe user ... 43
Gambar 4.4 Cek Tipe User ... 43
Gambar 4.5 Validasi login ... 44
Gambar 4.6 Controller ... 44
Gambar 4.7 Routes ... 44
Gambar 4.8 Pengecekan Login ... 45
Gambar 4.9 Controller Suku Cadang ... 46
Gambar 4.10 Routes ... 46
Gambar 4.11 Tambah Suku Cadang ... 46
Gambar 4.12 Controller Suku Cadang Masuk ... 47
Gambar 4.13 Routes Suku Cadang Masuk ... 47
Gambar 4.14 Tambah Suku Cadang Masuk ... 48
Gambar 4.15 Controller Suku Cadang Keluar ... 48
Gambar 4.16 Routes Tambah Suku Cadang Keluar ... 49
xvi
Gambar 4.18 Controller Kendaraan ... 50
Gambar 4.19 Routes Tambah Kendaraan... 50
Gambar 4.20 Tambah Kendaraan ... 50
Gambar 4.21 Controller Tambah Permintaan ... 51
Gambar 4.22 Routes Permintaan ... 51
Gambar 4.23 Permintaan ... 52
Gambar 4.24 Controller Persetujuan Permintaan ... 53
Gambar 4.25 Mengubah Status Permintaan ... 54
Gambar 4.26 Fungsi Perubahan Status ... 54
Gambar 4.27 Hidden Icon Edit dan Hapus ... 55
Gambar 4.28 Install Socket.io ... 55
Gambar 4. 29 Penambahan pada modules ... 56
Gambar 4.30 Pendefinisian io ... 56
Gambar 4.31 ProxyHeaders ... 56
Gambar 4.32 Penambahan pada proxy ... 56
Gambar 4.33 Pendefinisian variable ... 57
Gambar 4.34 methods notifsetup dan notifRequestAndShowPermission ... 57
Gambar 4.35 methods notifConnectSocket ... 58
Gambar 4.36 notifShow ... 58
Gambar 4.37 Pemanggilan method notifsetup ... 59
Gambar 4.38 Setting Halaman Permintaan ... 59
Gambar 4.39 Setting Halaman Suku Cadang Keluar ... 60
xvii
Gambar 4.41 Insert Modul PWA ... 61
Gambar 4. 42 Modul PWA pada Nuxt.js ... 61
Gambar 4.43 Permintaan Suku Cadang ... 62
Gambar 4.44 Tambah Permintaan... 63
Gambar 4.45 Push Notification Permintaan ... 64
Gambar 4.46 Push Notification Persetujuan ... 65
Gambar 4.47 Add to home screen ... 66
Gambar 4. 48 Sikudang pada iOS ... 67
Gambar 4.49 Sikudang Pada Windows ... 68
Gambar 4.50 Suku Cadang ... 69
Gambar 4.51 Suku Cadang Keluar... 70
Gambar 4.52 Suku Cadang Keluar... 71
Gambar 4.53 Kendaraan... 71
