109
f. Sequence Diagram Scan QR Code
Gambar 4.19.
Sequence DiagramScan QR Code
Sequence diagram yang digambarkan pada gambar 4.19.menjelaskan
tentang proses
scaning QR Code, menampilkan data rinci informasi bus. Aktor yang berperan
adalah Operator Teknik dan Karyawan Biasa. Untuk menscanQR Code, terlebih dahulu Operator Teknik dan
Karyawan masuk kedalam menu Scan. Maka akanmuncul tampilanscaningyang diarahkan pada QR Code yang terdapat
pada badan bus yang diinginkan informasinya. Kemudian setelah di scanmaka akan didapatkan informasi bus yang
diinginkan dan ditampilkan pada layar perangkat aplikasi.
110
g. Sequence Diagram Update Data Maintenance
Gambar 4.20.
Sequence DiagramUpdate Data Maintenance
Sequence diagram yang digambarkan pada gambar 4.20.menjelaskan tentang proses update data maintenance,
yaitu menambah data perbaikan bus. Aktor yang berperan adalah Operator Teknik.
Ketika ingin mengupdate data perbaikan suatu bus maka operator teknik mengklik tombol nextpada halaman informasi
bus yang sebelumnya didapatkan pada proses scanning, kemudian akan tampil form keterangan perbaikan bus, dan
operator teknikdiminta untuk menginput datakondisi bus. Jika
111
data yang dimasukan benar, maka proses selanjutnya operator teknikmengklik tombol next untuk mengisiupdate maintenance
detail, kemudian akan tampil form perbaikan-perbaikan bus, dan operator teknikdiminta untuk menginput dataperbaikan
yang diperlukan dan yang akan dilakukan pada bus. Jika data yang dimasukan benar, maka proses berikutnya adalah
penyimpanan data dengan mengklik tombol [save]data tersebut akan langsung tersimpan didalam database.
5. Class Diagram
Class Diagram menggambarkan kelas-kelas objek yang menyusun sebuah sistem dan juga hubungan antara kelas objek
yang terjadi di dalam aplikasi
Gambar 4.21.
Class Diagram
112
4.5.2. Perancangan Tabel Database
Berikut ini merupakan tabel-tabel yang dipergunakan pada web administrator PT. Pahala Kencana
1. Tabel Admin File Name : Admin
Type of File :Master File Primary Key :id_admin
Foreign Key : -
Tabel 4.12. Tabel Admin
No Field
Type Size Null
Keterangan 1. id_admin
Varchar 8
No Kode ID Admin
2. username Varchar
20 No
Username Admin 3. password
Varchar 8
No Password Admin
4. telepon Varchar
15 No
Telepon Admin 5. email
Varchar 50
No Email Admin
6. gambar Varchar
50 No
Foto Admin 7. status
Enum‘Y’,’T’ No
Status Admin aktiftidak
2. Tabel Bus File Name : bus
Type of File : Master File Primary Key : no_polisi
Foreign Key : -
Tabel 4.13. Tabel Bus
No Field
Type Size Null
Keterangan 1.
no_polisi varchar 9
No Nomor Polisi Bus
2. ht
int 11
No Nomor Badan Bus
3. seat
int 11
No Jumlah Kursi Bus
4. no_rangka
varchar 20 No
Nomor Rangka Bus
113
5. no_mesin
varchar 20 No
Nomor Mesin Bus 6.
tahun_chasis year
4 No
Tahun Chasis Bus 7.
merk varchar 20
No Merk Kendaraan Bus
8. karoseri
varchar 30 No
Karoseri Bus 9. kapasitas_tangki int
11 No
Kapasitas Tangki Bus 10.
driver1 varchar 50
No Nama Supir Pertama
11. driver2
varchar 50 No
Nama Supir Kedua 12.
driver3 varchar 50
No Nama Supir Cadangan
13. helper1
varchar 50 No
Nama Kondektur Pertama 14.
helper2 varchar 50
No Nama Kondektur Kedua
15. qrcode
varchar 200 No
Gambar QR Code Bus
3. Tabel Maintenance Bus File Name : maintenance_bus
Type of File : Master File Primary Key : mntc_id
Foreign Key : no_polisi, operator_id
Tabel 4.14. Tabel Maintenance Bus
No Field
Type Size Null
Keterangan 1.
mntc_id Int
11 No
Kode ID Maintenance 2.
no_polisi varachar 9
No Nomor Polisi Bus
3. operator_id
varchar 10
No Kode ID Operator
4. tanggal_masuk date No
Tanggal Bus Masuk Pool 5. target_selesai
date No
Target Tanggal Penyelesaian Perbaikan
6. Status
varchar 50
No Status Bus Saat Masuk
7. Kilometer
int 11
No Kilometer Bus Saat Masuk
8. Keterangan
text No
Informasi Tambahan
4. Tabel Maintenance Detail File Name : maintenance_detail
Type of File : Master File Primary Key : mntc_detail_id
114
Foreign Key : mntc_id
Tabel 4.15. Tabel Maintenance Detail
No Field
Type Size
Null Keterangan
1. mntc_detail_id int 8
No Kode ID Maintenance
2. mntc_id
int 8
No Kode ID Maintenance
3. perbaikan
text No
Jenis Perbaikan
5. Tabel Operator File Name : operator
Type of File : Master File Primary Key : operator_id
Foreign Key : -
Tabel 4.16. Tabel Operator
No Field
Type Size Null
Keterangan 1.
operator_id varchar 10
No Kode ID Operator
2. username
varchar 20 No
Username Operator 3.
password varchar 20
No Password Operator
4. nama
varchar 50 No
Nama Lengkap Operator 5.
telepon varchar 20
No Nomor Telepon Operator
6. foto
varchar 500 No
Foto Operator 7.
jabatan varchar 50
No Jabatan Operator
8. keterangan
text No
Informasi Tambahan
4.5.3. Perancangan User Interface
Menggambarkan tampilan halaman antarmuka yang akan dirancang sebagai alat bantu bahasa visual bagi pengguna program
dan aplikasi. Terdapat 2 kelompok rancangan antarmuka yang dibuat yaitu rancangan untukweb administrator dan aplikasi pada
android. Berikut rancangan tampilan pada web administrator :
115
1. Tampilan Halaman Login User
Form Login merupakan tampilan untuk login. Pengguna yang telah terdaftar diharuskan untuk mengisikan username dan
passwordnya untuk dapat masuk ke dalam sistem, seperti yang ditunjukkan pada gambar 4.22. dibawah ini.
Login Form
Username Password
Logo Perusahaan
Login
Gambar 4.22. Rancangan Halaman Login Web Administrator
2. Perancangan Halaman Utama
Form Home merupakan tampilan utama berisi informasi dan fungsi aplikasi. Terdapat 2 tampilan home pada penelitian ini yaitu
home pada web administrator yang didalamnya terdapat 6 tombol utama dan home pada aplikasi android yang didalamnya terdapat 4
tombol utama. 6 tombol utama pada home web administrator masing-masing
mempunyai fungsi sebagai berikut :
116
MenuAdmin : Untuk menampilkan data diri admin, merubah data admin, menghapus admin dan menambahkan admin baru
MenuOperator : Untuk menampilkan data diri operator, merubah data operator, menghapus operator dan menambahkan
operator baru MenuBus : Untuk menampilkan daftar semua bus, merubah
data bus, menghapus bus dan menambahkan bus baru sekaligus mendapatkan QR Code
MenuMaintenance Bus : Untuk menampilkan semua data mengenai maintenance dari setiap unit bus beserta data
maintenance detail nya, merubah data maintenance, menghapus dan menambah data maintenance
Menu Logout : Untuk keluar dari program
HEADER
FOOTER HOME
Admin Operator
Bus Maintenance Bus
PHP QR Code Generate Logout
Gambar 4.23. Rancangan Halaman Utama Web Administrator
117
3. Perancangan HalamanAdmin
HEADER
FOOTER
Admin Operator
Bus Maintenance Bus
PHP QR Code Generate Logout
No. Admin ID
Username Telepon
Email Menu
Button Tambah Admin
Gambar 4.24. Rancangan Halaman Admin
4. Perancangan HalamanTambah dan Edit Admin
HEADER
FOOTER
Admin Operator
Bus Maintenance Bus
PHP QR Code Generate Logout
ID Admin
Username Password
Telepon Email
Status Author
Admin Utama
Simpan Batal
Gambar 4.25. Rancangan Halaman Tambah dan Edit Admin
118
5. Perancangan HalamanOperator
HEADER
FOOTER
Admin Operator
Bus Maintenance Bus
PHP QR Code Generate Logout
Operator ID
Username Password
Telepon Foto
Jabatan
Simpan Batal
Keterangan Button Choose File
No. ID Operator
Username Password Telepon
Foto Jabatan
Keterangan Menu
Gambar 4.26. Rancangan HalamanOperator
6. Perancangan Halaman Bus
HEADER
Admin Operator
Bus Maintenance Bus
PHP QR Code Generate Logout
No. Polisi
No. Rangka No. Mesin
HT Seat
Tahun Chasis
Simpan Batal
Merk
No. Informasi Bus
QR Code Menu
Karoseri Kapasitas Tangki
Driver Helper
Gambar 4.27. Rancangan HalamanBus
119
7. Perancangan Halaman Maintenance Bus
HEADER
Admin Operator
Bus Maintenance Bus
PHP QR Code Generate Logout
Maintenance ID
No. Polisi Operator ID
Tanggal Masuk Target Selesai
Status
Simpan Batal
Kilometer
No. Informasi Maintenance Bus
Menu
Keterangan
FOOTER
Gambar 4.28. Rancangan Halaman Maintenance Bus
8. Perancangan Halaman Maintenance Detail Bus
HEADER
Admin Operator
Bus Maintenance Bus
PHP QR Code Generate Logout
Maintenance ID Maintenance ID
No. Polisi Tanggal Masuk
Target Selesai Perbaikan
No. Polisi Kilometer
Tanggal Masuk
Simpan Batal
Kilometer Target Selesai
No. Informasi Perbaikan Bus
Menu
FOOTER
Gambar 4.29. Rancangan Maintenance Detail Bus
120
Sebagaimana dijelaskan sebelumnya bahwa terdapat 2 kelompok tampilan rancangan antarmuka yang dibuat, yaitu
rancangan tampilan untuk web administrator dan aplikasi android. Berikut rancangan tampilan pada aplikasi android :
1. Tampilan Halaman Login User
Form Login merupakan tampilan untuk login. Pengguna telah terdaftar diharuskan untuk mengisikan username dan passwordnya.
Login
Username Password
Login
Back
Gambar 4.30. Rancangan Halaman LoginAplikasi Android
2. Tampilan Halaman Utama
Form Home merupakan tampilan utama berisi informasi dan fungsi aplikasi. Home pada aplikasi android terdapat 4 tombol
utama.
121
4 tombol utama pada home aplikasi android masing-masing mempunyai fungsi sebagai berikut :
Scan QR Code : Untuk menscan QR Code yang terdapat pada bus sekaligus menampilkan data informasi bus
About Application : Untuk menampilkan informasi mengenai aplikasi
LoginOperator : Untuk mengisi form berisi username dan password dari operator teknik
Exit : Untuk keluar dari aplikasi
Image Button Image Button
Image Button Image Button
Scan QR Code About Application
Login Exit
Gambar 4.31. Rancangan Halaman Utama Aplikasi Android
122
3. Tampilan Halaman Scan QR Code
Gambar 4.32. Rancangan Halaman Scan QR Code
4. Tampilan Halaman Informasi Bus
Menu Informasi Bus
Image Button
HOME
No. Polisi No. Rangka
No. Mesin HT
Seat Tahun Chasis
Merk Karoseri
Kapasitas Tangki Driver
Helper
Gambar 4.33. Rancangan Halaman Informasi Bus
123
5. Tampilan Halaman About Application
Menu Historical Maintenance Update
Image Button
BACK
Penjelasan Mengenai Aplikasi Yang Dibuat
Gambar 4.34. Rancangan Halaman About Application
6. Tampilan Halaman Update Maintenance
Menu Historical Maintenance Update
Image Button
NEXT
Status
Tanggal Masuk Tanggal Target Penyelesaian
Keterangan Kilometer
Image Button
BACK
Gambar 4.35. Rancangan Halaman Update Maintenance
124
7. Tampilan Halaman Update Maintenance Detail
Menu Historical Maintenance Update
Image Button
SAVE
Perbaikan
Image Button
BACK
1. 2.
3. 4.
5.
Gambar 4.36. Rancangan Halaman Update Maintenance Detail
4.6. Fase Konstruksi
Pada fase ini merupakan presentasi dari hasil perancangan ke dalam program kemudian melakukan pengkodean. Dalam tahap ini penulis
menggunakan bahasa pemrograman .Java, XML, .PHP dan database My SQL.Dengan kode sumber pada javayang digunakan pada software eclipse
untuk pembuatan aplikasi android adalah sebagai berikut:
Proses Parsing integrasi pada database
publicclass
parsing{
public parsing{}
public String getIp{
String ip=
http:192.168.43.138pahalakencanaaksesorisandroid ;
return ip;
}
125
public String getImage{
String ip=
http:192.168.43.138pahalakencanaimages ;
return
ip; }
public ArrayListObject ParseString input{
ArrayListObject output = new
ArrayListObject;
int pointer = 0;
String data = ;
while pointer = input.length-1{
if input.charAtpointer ==
] {
output.adddata; data =
; pointer++;
}
if
pointer input.length{data+= input.charAtpointer;}
pointer++; }
return output;
}
public
ArrayListObject ParseGraphString input{ ArrayListObject output =
new
ArrayListObject;
int
pointer = 0; String data =
;
while pointer = input.length-1{
if input.charAtpointer ==
{ output.adddata;
data = ;
pointer++; }
if pointer input.length{data+=
input.charAtpointer;} pointer++;
}
return output;
}
public ArrayListObject ParseMulString
input{ ArrayListObject output =
new
ArrayListObject;
int pointer = 0;
String data = ;
while
pointer = input.length-1{
if input.charAtpointer ==
{ output.adddata;
data = ;
pointer++;
126 }
if pointer
input.length{data+= input.charAtpointer;} pointer++;
}
return output;
}
public String fetchString url{
HttpClient httpclient = new
DefaultHttpClient; HttpRequestBase httpRequest =
null
; HttpResponse httpResponse =
null ;
InputStream inputStream = null
; String response =
; StringBuffer buffer =
new StringBuffer;
httpRequest = new
HttpGeturl;
try {httpResponse =
httpclient.executehttpRequest; }
catch ClientProtocolException e1
{e1.printStackTrace;}
catch
IOException e1 {e1.printStackTrace;}
try {inputStream =
httpResponse.getEntity.getContent;}
catch
IllegalStateException e {e.printStackTrace;}
catch IOException e {
e.printStackTrace;}
byte [] data =
newbyte [512];
int len = 0;
try {
while
-1 = len = inputStream.readdata {
buffer.append new
Stringdata, 0, len;
} }
catch IOException e {e.printStackTrace;}
try {inputStream.close;}
catch IOException e {e.printStackTrace;}
response = buffer.toString;
return response;
} }
Proses Scan QR Code
publicvoid onClickView arg0 {
Intent intent = new
Intent com.google.zxing.client.android.SCAN
;
127 intent.putExtra
SCAN_MODE ,
QR_CODE_MODE ;
startActivityForResultintent, 0; };
publicvoid onActivityResult
int requestCode,
int resultCode,
Intent intent {
if requestCode == 0 {
if resultCode ==
RESULT_OK {
String contents = intent.getStringExtra
SCAN_RESULT ;
String format = intent.getStringExtra
SCAN_RESULT_FORMAT ;
qr =contents;
vpesancontents,format; }
elseif resultCode ==
RESULT_CANCELED {
qr =
; salah;
} }
}
publicvoid vpesanString psn,String format{
new AlertDialog.Builder
this
.setTitle Proses Scan Data
+format .setMessagepsn
.setNeutralButton Lanjutkan
, new
DialogInterface.OnClickListener {
publicvoid onClickDialogInterface dlg,
int sumthin {
Intent i= new
Intentmenu. this
, informasibus.
class
; i.putExtra
qr ,
qr ;
startActivityi; }}
.show; }
4.7. Implementasi Sistem
Kategori