BAB III ANALISA DAN PERANCANGAN SISTEM. 3.1 Objek Penelitian Sejarah Singkat Bengkel Berkah Maju Motor

Transkripsi

1 BAB III ANALISA DAN PERANCANGAN SISTEM 3.1 Objek Penelitian Sejarah Singkat Bengkel Berkah Maju Motor Bengkel motor merupakan tempat untuk melakukan pembuatan, perbaikan, penyimpanan dan perawatan berbagai mesin motor. Bengkel Berkah Maju Motor didirikan pada tahun 2012 yang berlokasi di Jalan Hos Cokroaminoto No. 8b Ciledug Tangerang. Berkah Maju Motor merupakan suatu perusahaan jasa yang bergerak dibidang perbengkelan yaitu memperbaiki kendaraan roda dua dan juga menjual spare part maupun peralatan untuk kendaraan roda dua. Berkah Maju Motor dipimpin oleh Sarimanto sekaligus sebagai pendirinya. Pada awal berdirinya bengkel hanya memiliki 2 orang pegawai dan hanya 1 orang mekanik, hingga sampai saat ini Sarimanto sudah memiliki 6 orang karyawan dan 4 orang diantaranya sebagai mekanik. Masing-masing karyawan memiliki tugas sesuai dengan bagian-bagiannya Struktur Organisasi Bagi setiap perusahaan, struktur organisasi mempunyai arti yang penting. Karena dengan mengetahui struktur organisasi, maka dapat diperoleh gambaran mengenai bagian-bagian yang ada dalam perusahaan tersebut, dan sampai sejauh mana wewenang dan tanggung jawab bagian-bagian tersebut dapat melaksanakan tugasnya. Dengan demikian, akan dapat diketahui siapa yang akan dapat bertanggung jawab dan kepada siapa harus bertanggung jawab atas suatu pekerjaan yang telah dilakukan maupun yang sedang dilakukan. Dalam mencapai sasaran dan tujuan perusahaan dibutuhkan suatu organisasi atau kesatuan kerja sumber daya manusia yang berada di dalamnya agar dapat bekerja sama dalam mencapai tujuan perusahaan tersebut. Adapun struktur organisasi Bengkel Berkah Maju Motor dapat dilihat pada gambar berikut 28

2 29 Gambar 3.1 Struktur Organisasi Berkah Maju Motor Adapun berikut ini adalah keterangan dari tugas-tugas dan wewenang bagianbagian yang ada pada Bengkel Berkah Maju Motor sesuai dengan struktur organisasi: 1. Pemilik Bengkel a. Mengelola dan bertanggung jawab atas aktivitas yang dilaksanakan oleh bengkel secara keseluruhan. 2. Kepala Bengkel a. Bertanggung jawab atas segala sesuatu yang terjadi di bengkel. b. Mengatur segala kegiatan bengkel. c. Mengadakan pemilihan pegawai. 3. Kasir a. Memposting transaksi sesuai dengan kredit. b. Membuat laporan sesuai dengan tugas dan dilaporkan pada kepala bengkel. c. Bertanggung jawab atas segala kekurangan dan kelebihan yang ada.

3 30 d. Membuat laporan keuangan berupa pengeluaran untuk pembelian/belanja, serta hasil pemasukan dari bengkel untuk kemudian diserahkan kepada kepala bengkel. Mekanik a. Merawat dan memperbaiki sepeda motor konsumen yang masuk ke bengkel. b. Memberikan kualitas terbaik dalam melakukan service motor. c. Memberikan penjelasan kepada konsumen tentang kerusakankerusakan yang terjadi pada sepeda motor konsumen. 3.2 Analisis Sistem Berjalan Berkah Maju Motor merupakan bengkel atau usaha yang berjalan di bidang otomotif dan aksesoris motor dimana sistem perawatan atau jasa service motor yang melakukan perawatan motor di bengkel. Untuk melakukan service pelanggan harus terlebih dahulu mendaftarkan sepeda motornya dan menemui mekanik apabila ada keluhan dan gangguan teknis. Setelah mendaftar pelanggan menunngu antrian untuk layanan service. Setelah sepeda motor selesai di service pelanggan melakukan pembayaran ke kasir. Analisis sistem yang sedang berjalan ini divisualisasikan dan didokumentasikan dengan alat bantu UML melalui diagram use case, skenario use case, dan aktifitas diagram. Analisis sistem yang sedang berjalan pada Berkah Maju Motor adalah sebagai berikut:

4 Use Case Diagram Sistem Yang Berjalan Skenario use case service motor yang berjalan di bengkel berkah maju motor melibatkan 3 aktor yaitu mekanik, kasir, dan pelanggan. Berikut diagram use case sistem berjalan di bengkel berkah maju motor. Sistem Daftar Pelanggan Permintaan Service Mekanik Service Melakukan Pembayaran Kasir Gambar 3.2 Use Case Diagram sistem yang sedang berjalan

5 Identifikasi Aktor Tabel 3.1 Definisi Aktor dalam sistem yang sedang berjalan No Aktor Deskripsi 1. Pelanggan Pelanggan melakukan pendaftaran ke kasir lalu permintaan service kepada mekanik tentang keluhan atau masalah yang terjadi pada sepeda motor. 2. Mekanik Merupakan petugas yang melakukan pemeriksaan kondisi motor pelanggan. 3. Kasir Merupakan petugas yang melakukan proses pendaftaran, penjualan, dan pembayaran. 3.3 Perancangan Sistem yang Diusulkan Tujuan dari perancangan sistem adalah untuk memenuhi kebutuhan pelanggan dan bengkel mengenai gambaran yang jelas tentang perancangan sistem yang akan dibuat serta diimplementasikan. Untuk memulai membangun suatu program yang berupa Aplikasi Bengkel Panggilan Berbasis Android, maka terlebih dahulu merencanakan alur kerja berdasarkan kebutuhan user yang akan menggunakan aplikasi bengkel panggilan berbasis Android ini dengan menggunakan diagram UML Gambaran Umum Sistem yang Diusulkan Aplikasi yang akan dibangun ini digunakan untuk melakukan aktifitas service motor dengan penuntun jalan menuju lokasi user atau pelanggan yang mengalami masalah pada sepeda motornya. Dalam pembuatan Aplikasi Bengkel

6 33 Panggilan Berbasis Android dibutuhkan fitur Location-Based-Service (LBS) yang dapat berfungsi sebagai layanan untuk mengidentifikasi lokasi dari seseorang atau suatu objek tertentu. Dalam aplikasi ini dititik beratkan pada pengambilan koordinat bumi perangkat mobile. Sistem yang diusulkan untuk Aplikasi Bengkel Panggilan Berbasis Android adalah dengan menggunakan konsep Client-Server, untuk client menggunakan perangkat mobile berbasis android dan server menggunakan PHP dan MySql dan dilakukan secara online, dimana user atau client dapat mengakses aplikasi ini dengan menggunakan akses internet dari provider internet ataupun menggunakan wifi connection. 1. Request Bengkel Pelanggan 5. Konfirmasi Request Goggle Maps Web Server 4. Menampilkan Data Mekanik Database Gambar 3.3 Gambaran Umum Sistem yang Diusulkan Perancangan Prosedur Yang Diusulkan Perancangan prosedur yang diusulkan akan berorientasi objek dengan menggunakan diagram UML sebagai alat bantu dalam mendokumentasikan dan memvisualisasikan aplikasi yang akan dibangun.

7 Use Case Diagram Diagram use case ini menggambarkan aplikasi yang akan dibangun, bagaimana seseorang atau aktor akan menggunakan dan memanfaatkan dari aplikasi yang dibangun. Sasaran pemodelan use case ini mendefinisikan kebutuhan fungsional dan operasional sistem dengan mendefinisikan skenario dari aplikasi yang akan dibangun. Pendefinisian ini meliputi identifikasi use case dan skenario dari aplikasi yang akan dibangun. Sistem Register Konfirmasi Request <<extend>> <<include>> Request Bengkel <<include>> Login Login <<include>> Batalkan Request <<include>> <<include>> Admin Pelanggan Menampilkan Lokasi Cek Status Menampilkan Rute <<include>> Login Mekanik Gambar 3.4 Use Case Diagram aplikasi bengkel panggilan berbasis android

8 Skenario Use Case Skenario Use Case digunakan untuk memudahkan dalam menganalisa skenario yang akan kita gunakan pada fase-fase selanjutnya dengan melakukan penilaian terhadap skenario tersebut. Berikut skenario use case yang diusulkan: Tabel 3.2 Skenario Use Case Registrasi User Nama Use Case Aktor Description Pre-Condition Scenario Registrasi User atau Pelanggan Lakukan registrasi untuk membuat akun pada aplikasi bengkel panggilan User mengisi username, password, , telepon User mengisi dan mengirim data yang telah diisi agar bisa terdaftar ke dalam sistem. Alternative Flow - Post-Condition Data yang dikirim masuk kedalam sistem Tabel 3.3 Skenario Use Case Login Nama Use Case Aktor Description Pre-Condition Scenario Login Pelanggan, Mekanik, dan Admin Login terlebih dahulu agar dapat menggunakan aplikasi bengkel panggilan User menginput username dan password Jika username dan password yang dimasukan benar maka sistem akan menampilkan halaman request Alternative Flow bengkel Jika username dan password yang dimasukan salah maka sistem tidak bisa melanjutkan ke halaman selanjutnya Post-Condition Sistem menampilkan halaman selanjutnya

9 36 Tabel 3.4 Skenario Use Case Request Bengkel Nama Use Case Aktor Description Pre-Condition Scenario Request Bengkel Pelanggan Input data kendaraan dan memilih titik lokasi yang digunakan sebagai informasi untuk bengkel melakukan service Pelanggan memilih lokasi dan input data Pelanggan input data kendaraan dan titik lokasi Alternative Flow - Post-Condition Data yang di input masuk kedalam database Tabel 3.5 Skenario Use Case Batalkan Request Nama Use Case Aktor Description Pre-Condition Scenario Batalkan Request Pelanggan Input id dan nomor polisi kendaraan untuk membatalkan request Pelanggan input id dan nomor polisi Pelanggan membatalkan request Alternative Flow - Post-Condition Request dibatalkan Tabel 3.6 Skenario Use Case Cek Status Nama Use Case Aktor Description Pre-Condition Cek Status Pelanggan Cek status request bengkel Pelanggan melakukan request Scenario Pelanggan cek status request apakah sudah dikonfirmasi atau belum Alternative Flow - Post-Condition Menampilkan status request

10 37 Tabel 3.7 Skenario Use Case Konfirmasi Request Nama Use Case Aktor Description Pre-Condition Scenario Konfirmasi Request Admin Konfirmasi Request dari pelanggan yang mengalami masalah pada kendaraannya Admin memastikan apakah lokasi pelanggan terjangkau Admin konfirmasi request dan mengetahui lokasi dari pelanggan yang melakukan request Alternative Flow - Post-Condition Data yang diinput masuk kedalam database Tabel 3.8 Skenario Use Case Menampilkan Lokasi Nama Use Case Aktor Description Pre-Condition Menampilkan Lokasi Admin Menampilkan lokasi pelanggan Menampilkan google maps Scenario Admin melihat lokasi pada google maps dengan marker Alternative Flow - Post-Condition Menampilkan lokasi pelanggan dengan google maps Tabel 3.9 Skenario Use Case Menampilkan Rute Nama Use Case Aktor Description Pre-Condition Scenario Menampilkan Rute Mekanik Melihat lokasi pelanggan yang ditampikan melalui google maps Mekanik memilih id pelanggan Mekanik melihat data lokasi pelanggan yang ditampilkan pada google map Alternative Flow - Post-Condition Tampilkan google maps dengan rute lokasi pelanggan

11 Activity Diagram Activity diagram menggambarkan urutan aktivitas untuk suatu proses tertentu. Berdasarkan use case yang ada, dibuat activity diagram untuk masingmasing use case. Berikut ini adalah diagram aktivitas aplikasi bengkel panggilan. User Sistem Membuka Aplikasi Menapilkan Halaman Login Memilih Menu Registrasi Input Nama, Jenis Kelamin, Alamat, Telepon, , dan Password Menapilkan Form Registrasi Gagal Berhasil Input Username dan Password Menapilkan Form Login Gagal Berhasil Menapilkan Halaman Utama Gambar 3.5 Activity Diagram Registrasi dan Login Pada Gambar 3.5 di atas aktivitas dimulai jika user sudah membuka aplikasi bengkel panggilan lalu sistem akan menampilkan form login. User melakukan registrasi terlebih dahulu, kemudian sistem menyimpan data user. Setelah registrasi lalu user melakukan login, sistem akan memvalidasi username dan password sesuai dengan database, apabila benar sistem akan menampilkan halaman utama, dan jika salah sistem akan kembali ke halaman login. Setelah user berhasil melakukan login sistem akan menapilkan halaman utama.

12 39 Berikut ini adalah diagram aktivitas untuk Request Bengkel dari aplikasi bengkel panggilan. Pelanggan Sistem Pilih Menu Request Bengkel Pilih Lokasi & Input Data Menapilkan Menu Request Bengkel Gagal Berhasil Menyimpan data dan Lokasi User Gambar 3.6 Activity Diagram Request Bengkel Pada Gambar 3.6 di atas aktivitas dimulai jika pelanggan sudah masuk ke menu utama. Setelah pelanggan memilih request bengkel, sistem akan menampilkan menu request bengkel, setelah itu pelanggan diminta untuk mengisi data dan lokasi. Seteah user mengisi data sepeda motor dan sistem akan menyimpan data lokasi pelanggan, apabila gagal sistem akan kembali ke menu request bengkel..

13 40 Admin Sistem Memilih Menu Request Menampilkan Data Pelanggan Melihat Lokasi Pelanggan Konfirmasi Request Tidak Ya Merubah status Pelanggan Gambar 3.7 Activity Diagram Konfirmasi Request Pada Gambar 3.7 di atas aktivitas dimulai jika admin sudah melakukan login. Setelah pelanggan melakukan request bengkel, sistem akan mengirim request bengkel ke admin, setelah itu admin memilih menu request untuk melihat data pelanggan. Sistem akan menampilkan lokasi pelanggan, apabila admin konfirmasi request sistem akan merubah status pelanggan dari tidak konfirmasi menjadi konfirmasi.

14 41 Pelanggan Sistem Memilih Menu Batalkan Request Menampilkan Halaman Batal Request Memasukkan id dan nomor polisi Membatalkan Request Gambar 3.8 Activity Diagram Batalkan Request Pada Gambar 3.8 di atas aktivitas dimulai jika pelanggan sudah melakukan request bengkel. Pelanggan memilih menu batalkan request dan memasukkan id dan nomor polisi pelanggan. Pelanggan Sistem Memilih Menu Cek Status Menampilkan Status Request Gambar 3.9 Activity Diagram Cek Status

15 42 Pada Gambar 3.9 di atas aktivitas dimulai jika pelanggan sudah melakukan request bengkel. Pelanggan memilih menu cek status dan sistem akan menampilkan status pelanggan. Sistem Mekanik Memilih ID Pelanggan Menampilkan Rute Lokasi Pelanggan Menuju Lokasi Pelanggan Gambar 3.10 Activity Diagram Menampilkan Rute Pada Gambar 3.10 di atas aktivitas dimulai jika admin sudah konfirmasi request bengkel. Setelah dikonfirmasi mekanik memilih id pealnggan, sistem akan menampilkan rute lokasi pelanggan, setelah itu mekanik menuju lokasi pelanggan yang melakukan request bengkel Sequence Diagram Sequence diagram digunakan untuk mengambarkan perilaku pada sebuah skenario. Diagram ini menunjukan sejumlah contoh objek dan message (pesan) yang diletakan diantara obyek-obyek ini di dalam use case. Sequence diagram menggambarkan interaksi antar objek di dalam dan disekitar sistem (termasuk pengguna, display, dan sebagainya) berupa pesan yang digambarkan terhadap waktu.

16 43 FormRegister JsonParser Login User 1: Input Data User() 2: Register() 3: Validasi Data() 4: Registrasi gagal 5: Registrasi Berhasi;() 6: Tampil Halaman Login Gambar 3.11 Sequence Diagram Registrasi User Pada Gambar 3.11 di atas menggambarkan proses yang sedang terjadi saat user melakukan registrasi pada aplikasi bengkel. Prosesnya dimulai saat user memilih menu register dan kemudian user mengisi data pada form register, apabila gagal sistem akan kembali ke form register, dan jika berhasil sistem akan menampilkan halaman login.

17 44 FormLogin JsonParser Halaman Utama User 1: Login() 2: Username, Password() 3: Validasi user() 4: Username, Password salah() 5: Username, Password benar() 7: Menampilkan Halaman Utama 6: Menampilkan Halaman Utama Gambar 3.12 Sequence Diagram Login User Pada Gambar 3.12 di atas menggambarkan proses yang sedang terjadi saat user melakukan login pada aplikasi bengkel. Prosesnya dimulai saat user membuka aplikasi dan menampilkan halaman login, kemudian user mengisi username dan password pada form login, sistem akan memvalidasi username dan password, apabila benar sistem akan menampilkan halaman utama, dan jika salah sistem akan menampilkan pesan login gagal. Setelah user berhasil melakukan login sistem akan menapilkan halaman utama.

18 45 Form Request Bengkel Send Request Notifikasi User 1:Input data & Lokasi() 2: Send request() 3: Validasi() 4: Request gagal() 5: Berhasil Request() 7: Notifikasi: Request Anda Berhasil 6: Menampilkan Notifikasi Gambar 3.13 Sequence Diagram Request Bengkel Pada Gambar 3.13 di atas menggambarkan proses yang sedang terjadi saat pelanggan melakukan request bengkel. Prosesnya dimulai setelah pelanggan memilih menu request bengkel, pelanggan mengisi data dan lokasi pada form request, apabila request gagal sistem menampilkan notifikasi gagal request, jika berhasil sistem akan menyimpan data pelanggan, dan menampilkan notifikasi request berhasil.

19 46 Pelanggan Form Batal Request Request ConfirmBatal 1: Input id, no polisi() 2: Menampilkan() 3: Menampilkan Request 4: Konfirmasi() 5: Request Berhasil dibatalkan Gambar 3.14 Sequence Diagram Batalkan Request Pada Gambar 3.14 di atas menggambarkan proses yang sedang terjadi saat pelanggan membatalkan request. Prosesnya dimulai saat pelanggan menginput id dan nomor polisi pada halaman batalkan request, kemudian sistem menampilkan request. Setelah menampilkan request, pelanggan melakukan konfirmasi dan sistem menampilkan pesan berhasil dibatalkan ke pelanggan. Pelanggan Cek Status 1: Memilih menu cek status() 2: Menampilkan status Gambar 3.15 Sequence Diagram Cek Status

20 47 Pada Gambar 3.15 di atas menggambarkan proses yang sedang terjadi saat pelanggan melakukan cek status. Prosesnya dimulai saat pelanggan memilih menu cek status dan sistem akan menampilkan status pelanggan. Menu Request Database Konfirmasi Request Admin Pelanggan 1: Memilih Menu Requesti() 2: Cek Data User() 3: Menampilkan Data User() 4: Konfirmasi Request() 5: Menampilkan Konfirmasi() Gambar 3.16 Sequence Diagram Konfirmasi Request Pada Gambar 3.16 di atas menggambarkan proses yang sedang terjadi saat admin melakukan konfirmasi request. Prosesnya dimulai saat admin memilih menu request pada halaman admin, kemudian admin cek data user. Setelah cek data user, admin melakukan konfirmasi dan sistem menampilkan konfirmasi ke pelanggan.

21 48 Id Pelanggan Maps Mekanik 1: Memilih Id Pelanggan() 2: Menampilkan Lokasi Pelanggan() 3: Menampilkan Rute Lokasi pelanggan() Gambar 3.17 Sequence Diagram Menampilkan Rute Pada Gambar 3.17 di atas menggambarkan proses yang sedang terjadi saat mekanik memilih id pelanggan. Prosesnya dimulai saat mekanik memilih id pada halaman mekanik. Setelah itu Google Maps menampilkan rute lokasi pelanggan Class Diagram Class diagram menggambarkan keadaan (atribut/properti) suatu sistem, sekaligus menawarkan layanan untuk memanipulasi keadaan tersebut (metode/fungsi). Class diagram menggambarkan struktur dan deskripsi class, package dan objek beserta hubungan satu sama lain seperti containment, pewarisan, dan asosiasi.

22 49 Admin User +id_user : int +username : varchar +nama : varchar +alamat : varchar +password : varchar +telepon : varchar +jenkel : varchar +register() +login() +sendrequest() 1 1 Request +id_request : int +no_polisi : varchar +id_member : varchar +telepon : varchar +keluhan : varchar +status : varchar +tipe : varchar +latfld : float +lngfld : float +getlocation() +confirm() * 1 1 -username : varchar -password : varchar -nama_lengkap : varchar - varchar -no_telp : varchar -level : varchar +update() +confirmrequest() +delete() 1 Mekanik +id_mekanik : int +username : varchar +password : varchar +selectidpelanggan() +viewlocation()() Gambar 3.18 Class Diagram Aplikasi Bengkel Rancangan Database Tabel 3.10 Tabel User No Nama Field Tipe Data Panjang Keterangan 1. id_user Int 3 Primary Key 2. username Varchar 30 user 3. nama Varchar 30 Nama User 4. alamat Varchar 30 Alamat User 5.. password Varchar 20 Password User 6. telepon Varchar 14 Telepon User 5. jenkel Varchar 1 Jenis Kelamin User

23 50 Tabel 3.11 Tabel Admin No Nama Field Tipe Data Panjang Keterangan 1. username Varchar 20 Primary Key 2.. password Varchar 20 Password Admin 3. nama_lengkap Varchar 30 Nama Admin 4. Varchar 30 Admin 5. no_telp Varchar 14 Telepon Admin 6. level Varchar 5 Level : Admin Tabel 3.12 Tabel Request No Nama Field Tipe Data Panjang Keterangan 1. id_request Int 3 Primary Key 2. no_polisi Varchar 15 Nomor Polisi Pelanggan 3. id_member Varchar 30 Pelanggan 4. telepon Varchar 15 Telepon Pelanggan 5. keluhan Varchar 30 Keluhan Pelanggan 6. status Varchar 25 Status Request 7. tipe Varchar 20 Tipe Kendaraan 8. latfld Float 10,6 Lattitude User 9. lngfld Float 10,6 Longitude User

24 51 Tabel 3.13 Tabel Mekanik No Nama Field Tipe Data Panjang Keterangan 1. id_mekanik Int 1 Id Mekanik 2. username Varchar 20 Username Mekanik 3. password Varchar 20 Password Mekanik 3.3 Struktur Menu Gambar 3.19 Struktur Menu 3.5 Rancangan Antar Muka Perancangan tampilan aplikasi merupakan rancangan dari desain aplikasi yang akan dibangun, desain ini akan menentukan sebuah karakteristik dari aplikasi yang di bangun, serta memperlihatkan di lingkungan seperti apa aplikasi nanti akan di tempatkan. Berikut ini desain tampilan dari aplikasi yang akan di bangun:

25 Rancangan Halaman Login Pada halaman ini berisikan rancangan tampilan halaman login Aplikasi Bengkel Panggilan Berbasis Android yang terdiri dari tiga tombol button dan dua textfield untuk username dan password, berikut tampilan rancangan: Gambar 3.20 Rancangan Halaman Login Pada Gambar 3.20 dijelaskan dari fungsi textfield dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Textfield Berfungsi untuk memasukkan user. b. Password Field: Berfungsi untuk memasukkan password user dengan karakter yang disamarkan dengan bulatan. c. Button Login: Berfungsi untuk melakukan login. d. Button Register: Berfungsi untuk melakukan register. e. Button Mekanik: Berfungsi untuk melakukan login mekanik.

26 Rancangan Halaman Register Pada halaman ini berisikan rancangan tampilan halaman register user. Berikut tampilan rancangan: Gambar 3.21 Rancangan Halaman Register Pada Gambar 3.21 dijelaskan dari fungsi pada halaman register. penjelasannya: Berikut a. Textfield Nama: Berfungsi untuk memasukkan nama user. b. Radio Button Jenis Kelamin: Berfungsi untuk memilih salah satu jenis kelamin user. c. Textfield Alamat: Berfungsi untuk memasukkan alamat user. d. Textfield Telepon: Berfungsi untuk memasukkan telepon user. e. Textfield Berfungsi untuk memasukkan user. f. Textfield Nama: Berfungsi untuk memasukkan password user.

27 54 g. Button Daftar: Berfungsi untuk melakukan register jika semua data sudah terisi Rancangan Halaman Utama Pada halaman ini berisikan rancangan tampilan halaman utama Aplikasi Bengkel Panggilan Berbasis Android. Halaman menu utama adalah halaman yang dapat diakses setelah pengguna melakukan login, berikut tampilan rancangan: Gambar 3.22 Rancangan Halaman Utama Pada Gambar 3.22 dijelaskan dari fungsi pada halaman utama. penjelasannya: Berikut a. Button Tentang: Berfungsi sebagai informasi tahun pembuatan, logo aplikasi, versi aplikasi, nama pembuat aplikasi, dan nama Universitas Mercu Buana.

28 55 b. Button Request Bengkel: Berfungsi unuk masuk ke dalam menu request bengkel. c. Button Lokasi Bengkel: Berfungsi sebagai informasi lokasi bengkel. d. Button Bantuan: Berfungsi sebagai petunjuk menggunkan aplikasi. e. Button Exit: Berfungsi untuk keluar dari aplikasi Rancangan Halaman Request Bengkel Pada halaman ini berisikan rancangan tampilan halaman request bengkel. Halaman request bengkel halaman yang berisikan menu pilihan, apakah pengguna ingin melakukan request bengkel, atau ingin melihat status request, atau ingin membatalkan request, dan kembali ke halaman utama. Berikut tampilan rancangan: Gambar 3.23 Rancangan Menu Request Bengkel Pada Gambar 3.23 dijelaskan dari fungsi pada halaman request bengkel. Berikut penjelasannya:

29 56 a. List Menu Request Bengkel: Berfungsi untuk menampilkan halaman reques. b. List Menu Batalkan Request: Berfungsi untuk menampilkan halaman batalkan request. c. List Menu Cek Status: Berfungsi untuk menampilkan halaman cek status. d. List Menu Keluar: Berfungsi untuk kembali ke menu utama Rancangan Halaman Request Pada halaman ini berisikan peta dan form untuk user melakukan request. User menunentukan lokasinya dengan mengklik pada peta, dan mengisi form tentang data kendaraan. Berikut tampilan rancangan: Gambar 3.24 Rancangan Halaman Request Pada Gambar 3.24 dijelaskan dari fungsi pada halaman request bengkel. Berikut penjelasannya:

30 57 a. Textfield Nomor Polisi: Berfungsi untuk memasukkan nomor polisi user. b. Textfield Tipe Kendaraan: Berfungsi untuk mengisi tipe kendaraan user. c. Textfield Keluhan: Berfungsi untuk mengisi keluhan yang terjadi pada sepeda motor user. d. Textfield Berfungsi untuk mengisi pada saat login. e. Google Maps: Fungsi klik untuk menentukan lokasi user. f. Button Send Request: Berfungsi untuk mengirim request bengkel. g. Button Cancel: Berfungsi untuk membatalkan request Rancangan Halaman Status Pada halaman ini berisikan status request yang telah dilakukan oleh user. Berikut tampilan rancangan: Gambar 3.25 Rancangan Halaman Status

31 58 Pada halaman ini menjelaskan tentang status request yang telah dilakukan. Berisi id, nomor polisi, , telepon, keluhan, dan status. Status akan berubah menadi dikonfirmasi apabila admin mengkonfirmasi request tersebut Rancangan Halaman Batalkan Request Pada halaman ini berisikan rancangan tampilan halaman batalkan request. Berikut tampilan rancangan: Gambar 3.26 Rancangan Halaman Batalkan Request Pada Gambar 3.26 dijelaskan dari fungsi pada halaman batalkan request. Berikut penjelasannya: a. Textfield ID: Untuk mengisi id request, id dilihat pada halaman cek status.. b. Textfield Nomor Polisi: Untuk mengisi nomor polisi kendaraan user. c. Button OK: Berfungsi untuk melakukan pembatalan request ke tahap selanjutnya.

32 Rancangan Halaman Konfirmasi Batal Request Pada halaman ini berisikan rancangan tampilan halaman konfirmasi batal request. Berikut tampilan rancangan: Gambar 3.27 Rancangna Halaman Konfirmasi Batal Pada Gambar 3.27 dijelaskan dari fungsi pada halaman konfirmasi batal. Berikut penjelasannya: a. Text View: Berisi status request. b. Button Ya: Berfungsi untuk melakukan konfirmasi pembatalan. c. Button Tidak: Berfungsi untuk menggagalkan konfirmasi pembatalan.

33 Rancangan Halaman Lokasi Bengkel Pada halaman ini berisikan rancangan tampilan halaman lokasi. Berikut tampilan rancangan: Gambar 3.28 Rancangan Halaman Lokasi Bengkel Pada Gambar 3.28 menjelaskan alamat lokasi bengkel. Berisi peta dengan marker lokasi bengkel Rancangan Halaman Bantuan Pada halaman ini berisikan rancangan tampilan halaman bantuan dan cara menggunakan aplikasi. Berikut tampilan rancangan:

34 61 Gambar 3.29 Rancangan Halaman Bantuan Pada Gambar 3.29 menjelaskan tentang cara menggunakan aplikasi. Berisi langkahlangkah untuk user menggunakan aplikasi dan melakukan request bengkel Rancangan Halaman Tentang Pada halaman ini berisikan rancangan tampilan halaman tentang. Berikut tampilan rancangan:

35 62 Gambar 3.30 Rancangan Halaman Menu Tentang Pada Gambar 3.30 menjelaskan tentang halaman yang berisikan informasi tentang bengkel dan aplikasi bengkel Rancangan Halaman Mekanik Pada halaman ini berisikan rancangan tampilan halaman mekanik, yaitu rute menuju lokasi pelanggan. Berikut tampilan rancangan:

36 63 Gambar 3.31 Rancangan Halaman Mekanik Pada Gambar 3.31 menjelaskan tentang halaman yang berisikan rute menuju lokasi pelanggan. Mekanik memilih id pelanggan terlebh dahulu, setelah memilih pelanggan klik button menuju lokasi untuk menampilkan rute lokasi pelanggan Rancangan Halaman Login Admin Pada halaman ini berisikan rancangan tampilan halaman login admin. Berikut tampilan rancangan:

37 64 Gambar 3.32 Rancangan Halaman Login Admin Pada Gambar 3.32 dijelaskan dari fungsi textfield dan button yang memiliki fungsi masing-masing. Berikut penjelasannya: a. Textfield Username: Berfungsi untuk memasukkan admin. b. Password Field: Berfungsi untuk memasukkan password admin dengan karakter yang disamarkan dengan bulatan. c. Button Login: Berfungsi untuk melakukan login Rancangan Halaman Utama Admin Pada halaman ini berisikan rancangan tampilan halaman utama admin. Terdiri dari beberapa menu yaitu home, user, request, lokasi dan ganti password. Berikut tampilan rancangan:

38 65 Gambar 3.33 Rancangan Halaman Utama Admin Pada Gambar 3.33 dijelaskan dari fungsi pada halaman utama admin. Berikut penjelasannya: a. Menu Home: Berfungsi untuk menampilan halaman utama admin. b. Menu User: Berfungsi untuk menampilkan halaman user. c. Menu Request: Berfungsi untuk menampilkan halaman request. d. Menu Lokasi: Berfungsi untuk menampilkan lokasi user. e. Menu Ganti Password: Berfungsi untuk menampilkan halaman ganti password admin. f. Menu Logout: Berfungsi untuk keluar aplikasi Rancangan Halaman Request Admin Pada halaman ini berisikan data request user. Terdiri dari id, , telepon dan status request. Berikut tampilan rancangan:

39 66 Gambar 3.34 Rancangan Halaman Request Admin Pada Gambar 3.34 dijelaskan dari fungsi pada halaman request admin. Berikut penjelasannya: a. ID Request: Id request user. b. user yang melakukan request. c. Telepon: Nomor telepon user. d. Combo box Status Request: Berfungsi untuk merubah status request, dari belum konfirmasi menjadi konfirmasi atau tidak konfirmasi Rancangan Halaman Lokasi Pada halaman ini berisikan lokasi user. Terdiri dari peta dengan mareker yang berisi id, , dan nomor polisi. Berikut tampilan rancangan:

40 67 Gambar 3.35 Rancangan Halaman Lokasi Rancangan Halaman Edit User Pada halaman ini berisikan rancangan tampilan halaman edit user. Terdiri dari beberapa field yaitu nama, alamat, telepon, jenis kelamin, username dan password. Berikut tampilan rancangan: Gambar 3.36 Rancangan Halaman Edit User

41 68 Pada Gambar 3.36 dijelaskan dari fungsi pada halaman edit user. Berikut penjelasannya: a. Textfield Nama: Berfungsi untuk mengganti nama user. b. Radio Button Jenis Kelamin: Berfungsi untuk memilih salah satu jenis kelamin user. c. Textfield Alamat: Berfungsi untuk mengganti alamat user. d. Textfield Telepon: Berfungsi untuk mengganti telepon user. e. Textfield Berfungsi untuk mengganti user. f. Textfield Nama: Berfungsi untuk mengganti password user. g. Button Simpan: Berfungsi untuk menyimpan perubahan pada data user. Button Kembali: Berfungsi untuk kembali ke menu utama admin.