BAB III PERANCANGAN SISTEM · Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4...

12
14 BAB III PERANCANGAN SISTEM Pada bab ini dijelaskan perancangan sistem. Bab 3.1 menjelaskan diagram sistem secara umum, dilanjutkan dengan Bab 3.2 yang menjelaskan perancangan sistem pada aplikasi Android. Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4 menjelaskan perancangan database yang akan digunakan. Sedangkan Bab 3.5 menjelaskan perancangan penyimpanan gambar untuk menyimpan bukti barang reject. 3.1 Diagram Sistem Secara Umum Pada bagian ini dijelaskan mengenai perancangan sistem yang secara umum dapat dilihat pada Gambar 3.1 Gambar 3.1 Diagram Sistem Aplikasi mobile berbasis Android bekerja melalui Internet untuk mengakses data pada Firebase untuk proses login. Setelah berhasil login maka aplikasi akan mengakses web service ketika menampilkan report. Selanjutnya web service akan mengakses database dengan mengirimkan query. DBMS (Database Management System) akan mengirim dataset, hasilnya akan diubah dalam format JSON pada webservice dan dikirimkan ke aplikasi.

Transcript of BAB III PERANCANGAN SISTEM · Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4...

Page 1: BAB III PERANCANGAN SISTEM · Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4 menjelaskan perancangan database yang akan digunakan. Sedangkan Bab 3.5 menjelaskan

14

BAB III

PERANCANGAN SISTEM

Pada bab ini dijelaskan perancangan sistem. Bab 3.1 menjelaskan diagram sistem secara

umum, dilanjutkan dengan Bab 3.2 yang menjelaskan perancangan sistem pada aplikasi

Android. Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4 menjelaskan

perancangan database yang akan digunakan. Sedangkan Bab 3.5 menjelaskan perancangan

penyimpanan gambar untuk menyimpan bukti barang reject.

3.1 Diagram Sistem Secara Umum

Pada bagian ini dijelaskan mengenai perancangan sistem yang secara umum dapat

dilihat pada Gambar 3.1

Gambar 3.1 Diagram Sistem

Aplikasi mobile berbasis Android bekerja melalui Internet untuk mengakses data

pada Firebase untuk proses login. Setelah berhasil login maka aplikasi akan mengakses

web service ketika menampilkan report. Selanjutnya web service akan mengakses

database dengan mengirimkan query. DBMS (Database Management System) akan

mengirim dataset, hasilnya akan diubah dalam format JSON pada webservice dan

dikirimkan ke aplikasi.

Page 2: BAB III PERANCANGAN SISTEM · Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4 menjelaskan perancangan database yang akan digunakan. Sedangkan Bab 3.5 menjelaskan

15

3.2 Aplikasi Android

Pada bagian ini dijelaskan perancangan aplikasi Android. Aplikasi android

memiliki user interface yang terdiri dari beberapa bagian utama diantaranya, login activity,

main menu activity, submenu activity dan function menu activity

1. Login Activity

Login Activity berfungsi untuk keamanan aplikasi supaya tidak semua user

dapat mengakses aplikasi tersebut, hanya user yang memiliki hak akses yang dapat

mengakses aplikasi tersebut.

Gambar 3.2 Diagram Alir Algoritma Login Activity

Login activity akan muncul ketika pertama kali aplikasi mobile dijalankan. Hal

ini untuk menjaga keamanan aplikasi. User memasukkan autentikasi id dan password

pada halaman login activity. Selanjutnya id dan password yang sudah dimasukkan akan

dicek di Firebase. Setelah berhasil dicek aplikasi mobile akan berpindah ke halaman

menu activity.

Page 3: BAB III PERANCANGAN SISTEM · Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4 menjelaskan perancangan database yang akan digunakan. Sedangkan Bab 3.5 menjelaskan

16

2. Main Menu Activity

Main Menu Activity berfungsi untuk tempat pemilihan sub menu activity yang

ingin dijalankan berdasarkan kebutuhan.

Gambar 3.3 Diagram Alir Algoritma Main Menu Activity

Pada halaman main menu activity, user dapat memilih sub menu activity sesuai

kebutuhan.

3. Sub Menu Activity

Sub Menu Activity berfungsi untuk filter data yang ingin ditampilkan ke

function menu activity.

Gambar 3.4 Diagram Alir Algoritma Sub Menu Activity

Pada halaman sub menu activity, user dapat memilih fillter data digunakan

untuk menampilkan data sesuai kebutuhan user.

Page 4: BAB III PERANCANGAN SISTEM · Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4 menjelaskan perancangan database yang akan digunakan. Sedangkan Bab 3.5 menjelaskan

17

4. Function Menu Activity

Function Menu Activity terdiri dari 2 fungsi utama, pengambilan data dan

mengirim data ke database.

Gambar 3.5 Diagram Alir Algoritma Pengambilan Data

Pada proses pengambilan data, aplikasi mobile passing query sesuai kebutuhan

ke webservice. Selanjutnya webservice passing query ke database server. Setelah

passing query, webservice akan menerima respon dari database server dan respon

tersebut dipassing kembali ke aplikasi mobile untuk diolah sesuai fungsinya.

Gambar 3.6 Diagram Alir Algoritma Pengiriman Data

Page 5: BAB III PERANCANGAN SISTEM · Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4 menjelaskan perancangan database yang akan digunakan. Sedangkan Bab 3.5 menjelaskan

18

Pada proses pengiriman data, user memilih gambar yang akan dikirim. Selanjutnya

gambar akan diubah menjadi byte array yang digunakan untuk passing data ke webservice.

Webservice mengubah byte array yang telah dipassing menjadi gambar kembali, selanjutnya

webservice passing ke folder penyimpanan melalui FTP. Setelah passing ke FTP, aplikasi

mobile akan menerima respon yang dikirim melalui webservice.

3.3. Web service

Web service digunakan untuk melakukan pertukaran data antar aplikasi atau sistem

dan melakukan pertukaran data antara database dengan mobile app. Web Service yang

digunakan skripsi ini dibagi menjadi 4 fungsi, mengunggah gambar, mengunduh gambar,

menghapus gambar dan mengambil data.

Gambar 3.7 Diagram Alir Mengunggah Gambar

Page 6: BAB III PERANCANGAN SISTEM · Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4 menjelaskan perancangan database yang akan digunakan. Sedangkan Bab 3.5 menjelaskan

19

Pada Gambar 3.7 proses mengunggah gambar pada webservice, webservice

menerima parameter berupa byte array dan nama file dari aplikasi mobile. Selanjutnya

webserivce mengonversi byte array menjadi sebuah gambar. Setelah itu webservice

menyimpan gambar pada folder penyimpanan melalui FTP dan passing query ke database

server untuk menulis tanggal upload. Aplikasi mobile menerima respon yang dikirimkan

oleh webservice.

Gambar 3.8 Diagram Alir Mengunduh Gambar

Page 7: BAB III PERANCANGAN SISTEM · Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4 menjelaskan perancangan database yang akan digunakan. Sedangkan Bab 3.5 menjelaskan

20

Pada Gambar 3.8 proses mengunduh gambar pada webservice, webservice

menerima parameter nama file yang ingin diunduh. Selanjutnya webservice mengakses

folder di server melalui FTP dan mengambil gambar sesuai parameter. Setelah itu

gambar diubah menjadi byte array dan dikirimkan ke aplikasi mobile.

Gambar 3.9 Diagram Alir Menghapus Gambar

Page 8: BAB III PERANCANGAN SISTEM · Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4 menjelaskan perancangan database yang akan digunakan. Sedangkan Bab 3.5 menjelaskan

21

Pada Gambar 3.9 proses menghapus gambar pada webservice, webservice

menerima parameter nama file yang ingin dihapus. Selanjutnya webservice mengakses

folder melalui FTP dan menghapus gambar sesuai parameter. Setelah itu webservice

passing query ke database server untuk menghapus data sesuai parameter. Aplikasi

mobile akan menerima respon setelah semua fungsi dijalankan dari webservice.

Gambar 3.10 Diagram Alir Mengambil Data

Pada Gambar 3.10 proses mengambil data pada webservice, webservice akan

menerima parameter id dan password untuk proses autentikasi pada webservice dan

query berupa array. Selanjutnya webservice akan mengakses database server dan

passing query sesuai parameter yang diterima. Setelah itu webservice akan menerima

respon dari database dan mengirimkan respon ke aplikasi mobile.

3.4 Database

Pada bagian ini dijelaskan mengenai perancangan database. Database yang

digunakan skripsi ini dibagi menjadi 2 bagian database, Firebase dan MSSQL.

Page 9: BAB III PERANCANGAN SISTEM · Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4 menjelaskan perancangan database yang akan digunakan. Sedangkan Bab 3.5 menjelaskan

22

3.4.1 Firebase

Firebase digunakan untuk menyimpan data user digunakan untuk proses

autentikasi ketika masuk aplikasi Android. Pada Gambar 3.11 (a) menunjukkan

struktur data pada Firebase. Sedangkan Gambar 3.11 (b) menunjukkan rancangan

database user

(a) (b)

Gambar 3.11 (a) Rancangan pada Firebase (b) Rancangan Database User

Pada Gambar 3.11 (a) setiap user memiliki 6 atribut :

Apk berfungsi sebagai flag user untuk menentukan user terdaftar pada

aplikasi tertentu, karena pada perusahaan memiliki 3 aplikasi mobile

yang berbeda.

Email berfungsi sebagai ID user yang digunakan untuk login apk dan

untuk ubah kata sandi.

Name berfungsi menunjukan nama user yang terdaftar.

Password berfungsi sebagai password yang digunakan untuk login apk.

Phone berfungsi untuk informasi no handphone user.

Role berfungsi sebagai flag user untuk menentukan hak akses dari user

tersebut.

Page 10: BAB III PERANCANGAN SISTEM · Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4 menjelaskan perancangan database yang akan digunakan. Sedangkan Bab 3.5 menjelaskan

23

3.4.2 Perancangan Database relasi

Database ini digunakan untuk menyimpan data perusahaan yang meliputi

penjualan, retur, produksi dan barang reject. Gambar 3.12 merupakan ERD (Entity

Relationship Diagram) database dan tidak semua atribut ditulis, hanya atribut yang

digunakan pada skripsi ini saja.

Gambar 3.12 ERD untuk Laporan Omzet dan Retur

3.5 PLC

Pada bagian ini dijelaskan mengenai pengambilan data pada PLC yang digunakan

untuk menentukan boros atau irit ketika melakukan proses produksi. Pada Gambar 3.14

dijelaskan cara kerja dari pengambilan data dari PLC.

Page 11: BAB III PERANCANGAN SISTEM · Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4 menjelaskan perancangan database yang akan digunakan. Sedangkan Bab 3.5 menjelaskan

24

Gambar 3.13 Diagram Alir Pengambilan Data dari PLC

Pada Gambar 3.13 proses pengambilan data dari PLC, PLC menerima trigger

untuk proses penyimpanan data pemakaian bahan pada proses produksi. Selanjutnya data

akan disimpan ke database server. Pada saaat query maka, data dikirimkan ke

webservice. Setelah itu data dari webservice dikirimkan ke aplikasi mobile dan data yang

telah diterima ditampilkan pada aplikasi mobile.

Page 12: BAB III PERANCANGAN SISTEM · Bab 3.3 menjelaskan perancangan sistem pada webservice dan Bab 3.4 menjelaskan perancangan database yang akan digunakan. Sedangkan Bab 3.5 menjelaskan

25

3.6. Perancangan penyimpanan gambar

Tempat penyimpanan gambar adalah folder yang berada di server untuk

menyimpan bukti barang reject berupa gambar yang diambil dari kamera

handphone. Nama file gambar yang disimpan disesuaikan dengan nomor surat jalan.

Gambar 3.14 dijelaskan cara menyimpan di FTP Folder dan menulis tanggal

pengambilan foto pada table mJLFoto.

Gambar 3.14 Diagram Alir Penyimpanan Gambar

Pada Gambar 3.14 proses penyimpanan gambar , gambar disimpan pada folder

yang berada di server melalui FTP dan nama file yang disimpan disesuaikan dengan no

surat jalan yang sudah dipilih. Selanjutnya setelah melakukan penyimpanan gambar

mengirimkan respon pada webservice.