BAB III PERANCANGAN SISTEM

(1)

15

BAB III

PERANCANGAN SISTEM

3.1 Analisis Sistem

Adapun dalam penelitian ini terdapat aplikasi serupa yang bernama Futsaloka, namun memiliki beberapa perbedaan dalam prosesnya. Berikut adalah perbandingannya.

Tabel 3.1 Analisis sistem

No Fitur Futsaloka Penelitian ini

1

Proses pemilihan jadwal

Memilih jadwal yang kita inginkan terlebih dahulu, lalu sistem akan memunculkan lapangan yang tersedia pada jadwal tersebut.

Memilih lapangan terlebih dahulu, lalu akan masuk ke tampilan selanjutnya yaitu memilih jadwal yang diinginkan.

2 Tampilan sadwal sewa

Hanya menampilkan jam sewa yang kosong.

Menampilkan seluruh jadwal sewa yang ada termasuk yang sudah disewa.

3 Fasilitas Lapangan

Hanya terdapat Gambar dan beberapa fasilitas lapangan.

Terdapat Gambar, Fasilitas, alamat, dan peta lokasi lapangan.

3.2 Kebutuhan Fungsional

Adapun kebutuhan fungsional dalam merancang sistem ini, Yaitu dengan menggunakan Unified Modeling Language (UML).

3.2.1 Struktur Menu

Adapun Struktur Menu dari aplikasi ini. Berikut adalah Struktur Menunya.

(2)

Gambar 3.1 Struktur Menu Aplikasi

3.2.2 Use Case Diagram

Use case adalah deskripsi fungsi dari sebuah sistem dari perspektif pengguna. Use case bekerja dengan cara mendeskripsikan tipikal interaksi antar user (pengguna) sebuah sistem dengan sistemnya sendiri melalui sebuah cerita bagaimana sebuah sistem dipakai[11]. Use Case aplikasi ini terdapat pada Gambar 3.2.

Gambar 3.2 Use Case Diagram

(3)

1. Definisi Aktor

Adapun Definisi Aktor Pada Aplikasi ini. Terdapat pada Tabel 3.2.

Tabel 3.2 Definisi Aktor

No Aktor Deskripsi

1 Pemilik Orang yang memiliki lapangan yang dapat menerima pesanan, konfirmasi pesanan, dan membatalkan pesanan.

2 Penyewa Orang yang menyewa lapangan yang dapat melakukan edit akun, melihat list lapangan, melihat detail lapangan, dan menyewa lapangan.

2. Definisi Use Case

Adapun Definisi setiap Use Case Pada Aplikasi ini. Terdapat pada Tabel 3.3.

Tabel 3.3 Definisi Use Case

No Use Case Deskripsi

1 Register Proses pendaftaran akun baru penyewa.

2 Login Penyewa Proses untuk melakukan login Penyewa menuju halaman list lapangan.

3 Login Pemilik Proses untuk melakukan login Pemilik menuju halaman list pesanan.

4 Edit Akun Proses merubah data akun.

5 Melihat List Lapangan Proses untuk melihat list lapangan yang akan disewa.

(4)

6 Melihat List Pesanan Proses untuk melihat pesanan-pesanan yang sudah dilakukan.

7 Batalkan Pesanan Proses pembatalan pesanan.

8 Konfirmasi Pesanan Proses untuk Pemilik lapangan mengkonfirmasi pesanan penyewa.

9 Melihat Detail Lapangan Proses untuk melihat detail lapangan yang dipilih.

10 Melihat Jadwal Lapangan Proses untuk melihat dan memilih jadwal lapangan yang akan disewa.

11 Memesan Lapangan Proses untuk melakukan pemesanan jadwal lapangan yang dipilih.

12 Melihat Detail Pesanan Proses untuk melihat detail pesanan yang yang dipilih.

13 Pilih Metode Bayar Proses pemilihan metode pembayaran ketika melakukan pemesanan.

14 COD Merupakan pilihan metode pembayaran secara COD.

15 Transfer Merupakan pilihan metode pembayaran secara transfer.

3. Use Case Scenario

Use Case Scenario merupakan deskripsi langkah-langkah setiap use case yang ada pada aplikasi ini. Berikut adalah skenarionya.

1. Nama Use Case : Register

Deskripsi : Proses pendaftaran akun baru penyewa.

Aktor : Penyewa

(5)

Tabel 3.4 Use Case Scenario register

Aksi Aktor Reaksi Sistem

1. Mengklik “di sini”

2. Menampilkan Halaman register

3. Memasukan data registrasi akun

4. Menyimpan data registrasi akun

2. Nama Use Case : Login Penyewa

Deskripsi : Proses login Penyewa menuju halaman list lapangan

Aktor : Penyewa

Tabel 3.5 Use Case Scenario login penyewa

Skenario normal

1. Memasukkan email dan password

2. Validasi email dan password 3. Menampilkan halaman list lapangan

Skenario Alternatif

2. Validasi email dan password

3. Menampilkan pesan bahwa email dan/atau password salah

(6)

3. Nama Use Case : Login Pemilik

Deskripsi : Proses login Pemilik menuju halaman list pesanan

Aktor : Pemilik

Tabel 3.6 Use Case Scenario login pemilik 4. Memasukkan email dan password

5. Validasi email dan password 6. Menampilkan halaman list lapangan

Skenario normal

2. Validasi email dan password 3. Menampilkan halaman list pesanan

Skenario Alternatif

2. Validasi email dan password

3. Menampilkan pesan bahwa email dan/atau password salah

5. Validasi email dan password 6. Menampilkan halaman list pesanan

(7)

4. Nama Use Case : Edit Akun

Deskripsi : Proses merubah data akun

Aktor : Penyewa

Tabel 3.7 Use Case Scenario Edit Akun

1. Mengklik menu option

2. Menampilkan menu option

3. Pilih edit akun

5. Nama Use Case : Melihat List Lapangan

Deskripsi : Proses melihat list lapangan yang akan disewa

Aktor : Penyewa

Tabel 3.8 Use Case Scenario Melihat List Lapangan

1. Melakukan login

2. Menampilkan halaman list lapangan

6. Nama Use Case : Melihat List Pesanan

Deskripsi : Proses melihat list pesanan yang sudah dilakukan Aktor : Penyewa, Pemilik

(8)

a. Penyewa

Tabel 3.9 Use Case Scenario Penyewa Melihat List Pesanan

1. Mengklik menu option

3. Pilih pesanan saya

4. Menampilkan list pesanan

b. Pemilik

Tabel 3.10 Use Case Scenario Pemilik Melihat List Pesanan

1. Melakukan login

2. Menampilkan halaman list pesanan

7. Nama Use Case : Batalkan Pesanan

Deskripsi : Proses pembatalan pesanan.

Aktor : Penyewa, Pemilik

Tabel 3.11 Use Case Scenario Batalkan Pesanan

1. Klik salah satu pesanan

2. Menampilkan detail pesanan

(9)

3. Klik batalkan pesanan

4. Pesanan dihapus dari database

8. Nama Use Case : Konfirmasi Pesanan

Deskripsi : Proses pembatalan pesanan

Aktor : Pemilik

Tabel 3.12 Use Case Scenario Konfirmasi Pesanan

3. Klik Konfimasi pesanan

4. Pesanan diubah status menjadi

“diterima”

9. Nama Use Case : Melihat Detail Lapangan

Deskripsi : Proses untuk melihat detail lapangan yang dipilih

Aktor : Penyewa

Tabel 3.13 Use Case Scenario Melihat Detail Lapangan

1. Melakukan login

2. Menampilkan halaman list lapangan

3. Klik salah satu lapangan

(10)

4. Menampilkan halaman detail lapangan

10. Nama Use Case : Melihat Jadwal Lapangan

Deskripsi : melihat dan memilih jadwal lapangan.

Aktor : Penyewa

Tabel 3.14 Use Case Scenario Melihat Jadwal Lapangan

1. Klik salah satu lapangan

2. Menampilkan halaman detail lapangan

3. Klik “lanjutkan ke pemilihan jadwal”

Proses untuk melakukan pemesanan jadwal lapangan yang dipilih.

4. Menampilkan halaman Jadwal lapangan

11. Nama Use Case : Memesan Lapangan

Deskripsi : Pemesanan jadwal lapangan yang dipilih.

Aktor : Penyewa

Tabel 3.15 Use Case Scenario Memesan Lapangan

1. Klik “lanjutkan ke pemilihan jadwal”

(11)

3. Menentukan waktu yang akan disewa

4. Klik tombol lanjutkan

5. Menampilkan halaman Pilih Metode Bayar

6. Memilih metode bayar

7. Pesanan disimpan ke database

12. Nama Use Case : Melihat Detail Pesanan

Deskripsi : melihat detail pesanan yang yang dipilih Aktor : Penyewa, Pemilik

Tabel 3.16 Use Case Scenario Melihat Detail Pesanan

13. Nama Use Case : Pilih Metode Bayar

Deskripsi : Pemilihan metode pembayaran ketika memesan

Aktor : Penyewa

Tabel 3.17 Use Case Scenario Pilih Metode Bayar

(12)

Aksi Aktor Reaksi Sistem 1. Klik “lanjutkan ke pemilihan

jadwal”

3. Menentukan waktu yang akan disewa

4. Klik tombol lanjutkan

5. Menampilkan halaman Pilih Metode Bayar

3.2.3 Activity Diagram

Activity Diagram adalah teknik untuk mendeskripsikan logika prosedural, proses bisnis dan aliran kerja dalam banyak kasus. Activity diagram mempunyai peran seperti halnya flowchart, tetapi perbedaannya dengan flowchart adalah activity diagram bisa mendukung perilaku paralel sedangkan flowchart tidak bisa[11]. Berikut adalah Activity Diagram pada aplikasi ini.

1. Activity Diagram Login

Activity diagram login dibagi menjadi dua, yaitu activity untuk penyewa dan pemilik.

a. Penyewa Lapangan

Di bawah ini adalah Activity Digram Login untuk penyewa.

(13)

Gambar 3.3 Activity Diagram Login Penyewa

(14)

b. Pemilik Lapangan

Adapun Activity diagram untuk pemilik lapangan.

Gambar 3.4 Activity Diagram Login Pemilik

2. Activity Diagram Register

Sebelum melakukan login, pengguna harus memiliki akun terlebih dahulu dengan mendaftarkan diri di halaman register. Berikut adalah activity-nya.

(15)

Gambar 3.5 Activity Diagram Register

(16)

3. Activity Diagram Edit Akun

Di bawah ini adalah activity untuk pengguna mengatur akunnya.

Gambar 3.6 Activity Diagram Edit Akun

(17)

4. Activity Diagram Melihat List Lapangan

Adapun activity untuk melihat List lapangan. Berikut adalah activity-nya.

Gambar 3.7 Activity Diagram Melihat List Lapangan

5. Activity Diagram Melihat List Pesanan

Activity Diagram Melihat List pesanan dibagi menjadi dua activity, yaitu untuk penyewa dan pemilik lapangan.

(18)

a. Penyewa Lapangan

Di bawah ini adalah activity untuk melihat list pesanan untuk penyewa.

Gambar 3.8 Activity Diagram Penyewa Melihat List Pesanan

(19)

b. Pemilik Lapangan

Di bawah ini adalah activity untuk pemilik lapangan.

Gambar 3.9 Activity Diagram Pemilik Melihat List Pesanan

6. Activity Diagram Batalkan Pesanan

Activity Diagram ini dibagi menjadi dua bagian, yaitu untuk penyewa dan pemilik lapangan.

(20)

a. Penyewa Lapangan

Berikut adalah Activity untuk penyewa.

Gambar 3.10 Activity Diagram Penyewa Batalkan Pesanan

(21)

b. Pemilik Lapangan

Berikut adalah Activity untuk pemilik lapangan.

Gambar 3.11 Activity Diagram Pemilik Batalkan Pesanan

(22)

7. Activity Diagram Konfirmasi Pesanan

Di ini adalah Activity Diagram Konfirmasi Pesanan untuk penyewa.

Gambar 3.12 Activity Diagram Konfirmasi Pesanan

(23)

8. Activity Diagram Melihat Detail Lapangan

Adapun Activiy Diagram Melihat Detail Lapangan untuk penyewa.

Gambar 3.13 Activity Diagram Melihat Detail Lapangan

(24)

9. Activity Diagram Melihat Jadwal Lapangan

Adapun Activity Diagram Melihat Jadwal Lapangan untuk penyewa.

Gambar 3.14 Activity Diagram Melihat Detail Lapangan

(25)

10. Activity Diagram Memesan Lapangan

Adapun activity Diagram Memesan Lapangan untuk penyewa.

Gambar 3.15 Activity Diagram Memesan Lapangan

(26)

11. Activity Diagram Melihat Detail pesanan

Untuk Actvity ini terdapat dua bagian, yaitu untuk penyewa dan pemilik lapangan.

a. Penyewa Lapangan

Berikut adalah Activity untuk penyewa.

Gambar 3.16 Activity Diagram Penyewa Memesan Lapangan

(27)

b. Pemilik Lapangan

Berikut adalah Activity untuk pemilik lapangan.

Gambar 3.17 Activity Diagram Pemilik Memesan Lapangan

(28)

3.2.4 Sequence Diagram

Adapun Sequence Diagram pada aplikasi ini. Perilaku objek pada Use Case digambarkan pada diagram ini dengan mendeskripsikan waktu hidup dan pesan yang dikirim dan diterima antar objek[11]. Berikut adalah Sequence Diagram-nya.

1. Sequence Diagram Register

Gambar 3.18 Sequence Diagram Register

(29)

2. Sequence Diagram Login Penyewa

Gambar 3.19 Sequence Diagram Login Penyewa

(30)

3. Sequence Diagram Login Pemilik

Gambar 3.20 Sequence Diagram Login Pemilik

(31)

4. Sequence Diagram Edit Akun

Gambar 3.21 Sequence Diagram Edit Akun

(32)

5. Sequence Diagram Melihat List Lapangan

Gambar 3.22 Sequence Diagram Melihat List Lapangan

(33)

6. Sequence Diagram Penyewa Melihat List Pesanan

Gambar 3.23 Sequence Diagram Penyewa Melihat List Pesanan

(34)

7. Sequence Diagram Pemilik Melihat List Pesanan

Gambar 3.24 Sequence Diagram Pemilik Melihat List Pesanan

(35)

8. Sequence Diagram Penyewa Batalkan Pesanan

Gambar 3.25 Sequence Diagram Penyewa Batalkan Pesanan

(36)

9. Sequence Diagram Pemilik Batalkan Pesanan

Gambar 3.26 Sequence Diagram Pemilik Batalkan Pesanan

10. Sequence Diagram Konfirmasi Pesanan

Gambar 3.27 Sequence Diagram Konfirmasi Pesanan

(37)

11. Sequence Diagram Melihat Detail Lapangan

Gambar 3.28 Sequence Diagram Melihat Detail Lapangan

(38)

12. Sequence Diagram Melihat Jadwal Lapangan

Gambar 3.29 Sequence Diagram Melihat Jadwal Lapangan

(39)

13. Sequence Diagram Memesan Lapangan

Gambar 3.30 Sequence Diagram Memesan Lapangan

(40)

14. Sequence Diagram Penyewa Melihat Detail Pesanan

Gambar 3.31 Sequence Diagram Penyewa Melihat Detail Pesanan

(41)

15. Sequence Diagram Pemilik Melihat Detail Pesanan

Gambar 3.32 Sequence Diagram Pemilik Melihat Detail Pesanan

(42)

16. Sequence Diagram Pilih Metode Bayar

Gambar 3.33 Sequence Diagram Pilih Metode Bayar

(43)

3.2.5 Class Diagram

Di bawah ini adalah Gambar Class Diagram dari aplikasi ini.

Gambar 3.34 Class Diagram

(44)

3.2.6 Entity Relation Diagram

Adapun Entity Relation Diagram dari aplikasi ini. Entity Relation Diagram (ERD) merupakan sebuah diagram yang menggambarkan hubungan setiap tabel database. Gambarnya Terdapat pada gambar 3.36.

Gambar 3.35 Entity Relationship Diagram

Dari gambar di atas, terdapat beberapa tabel dari database aplikasi ini. Setiap tabel akan diperjelas kembali ke dalam struktur tabel. Berikut adalah struktur tabelnya.

1. Struktur Tabel User(Penyewa)

Dibawah ini adalah struktur tabel User yang terdiri dari 5 field dan “Id_User”

sebagai Primary Key-nya.

Tabel 3.18 Struktur Tabel User

Field Type Length Keterangan

Id_User Int 4 Primary Key

Nama Varchar 40

(45)

Email Varchar 30

Telp Varchar 13

Password Varchar 60

2. Struktur Tabel Admin(Pemilik)

Dibawah ini adalah struktur tabel Admin yang terdiri dari 12 field, “Id_Admin”

sebagai Primary Key-nya.

Tabel 3.19 Struktur Tabel Admin

Id_User Int 4 Primary Key

Telp Varchar 13

Email Varchar 25

Password Varchar 60

Alamat Text

Latitude Varchar 30

Longitude Varchar 30

Bank Varchar 30

Nama_Rekening Varchar 50

No_Rekening Varchar 30

Jam_Buka Time

(46)

Jam_Tutup Time

3. Struktur Tabel Fasilitas

Dibawah ini adalah struktur tabel Fasilitas yang terdiri dari 2 field,

“Id_Fasilitas” sebagai Primary Key-nya.

Tabel 3.20 Fasilitas

Id_Fasilitas Int 4 Primary Key

Nama Varchar 100

4. Struktur Tabel Lapangan

Dibawah ini adalah struktur tabel Lapangan yang terdiri dari 5 field,

“Id_Lapangan” sebagai Primary Key-nya dan Id_Admin sebagai foreign Key-nya.

Tabel 3.21 Struktur tabel Lapangan

Id_Lapangan Int 4 Primary Key

Id_Admin Int 4 Foreign Key

Nama Varchar 45

Harga Varchar 6

Foto Varchar 255

deleted_at timestamp

(47)

5. Struktur Tabel Fasilitas Lapangan

Dibawah ini adalah struktur tabel Fasilitas lapangan yang terdiri dari 3 field,

“Id_Fasilitas Lapangan” sebagai Primary Key-nya dan “Id_Fasilitas” dan

“Id_Lapangan” sebagai foreign Key-nya.

Tabel 3.22 Struktur Tabel Fasilitas Lapangan

Id_Fasilitas_Lapangan Int 4 Primary Key

Id_Fasilitas Int 4 Foreign key

Id_Lapangan Int 4 Foreign Key

6. Struktur Tabel pesanan

Dibawah ini adalah struktur tabel Pesanan yang terdiri dari 6 field,

“Id_Pesanan” sebagai Primary Key-nya dan “Id_User” dan “Id_Lapangan” sebagai foreign Key-nya.

Tabel 3.23 Strutur Tabel Pesanan

Field Type Lengt

h

Keteranga n

Id_ Pesanan Int 4 Primary

Key

Id_User int 4 Foreign

Key

Id_Lapangan int 4 Foreign

Key

(48)

Waktu_Pilih Datetime

Metode_baya r

Enum(“COD”,”Transfer”)

Status Enum(“Belum”,”Sudah”,”Batal”,”Kadaluarsa

”)

3.2.7 Rancangan Antarmuka

Adapun antarmuka dari penelitian ini. Berikut adalah gambaran antarmukanya:

a. Tampilan awal saat membuka aplikasi (form login)

Saat pertama kali membuka aplikasi, pengguna diharuskan untuk masuk terlebih dahulu, seperti yang ditunjukkan pada gambar 1.

Gambar 3.36 Form Login

Keterangan:

1. Logo aplikasi.

2. Masukkan username .

(49)

3. Masukkan password.

4. Tombol login untuk masuk ke halaman utama.

5. Link menuju form pendaftaran.

b. Tampilan registrasi akun

Jika pengguna belum memiliki akun, perlu membuat akun terlebih dahulu dengan menekan "daftar" di sudut kanan bawah layar. Dan akan memasuki layar entri data seperti yang ditunjukkan pada Gambar 2.

Gambar 3.37 Registrasi Akun

Keterangan:

1. Masukkan nama yang akan didaftarkan.

2. Masukkan username yang akan didaftarkan.

3. Masukkan password yang akan didaftarkan.

4. Masukkan konfirmasi password untuk menyesuaikan masukkan password sebelumnya.

5. Tombol submit untuk menyelesaikan pendaftaran akun.

6. Tombol kembali untuk membatalkan pendaftaran akun dan kembali ke halaman login.

(50)

c. Tampilan halaman utama dengan kategori terdekat

Setelah memiliki akun lalu melakukan login, Anda dapat segera mencari lapangan futsal yang diinginkan. Seperti pada Gambar 3.

Gambar 3.38 Halaman Utama Kategori Terdekat

(51)

Keterangan:

1. Foto pemilik akun.

2. Tombol untuk menampilkan pilihan menu pengaturan akun, daftar pesanan, dan logout.

3. Tombol untuk menampilkan deretan lapangan futsal dimulai dari harga yang termurah

4. Tombol untuk menampilkan deretan lapangan futsal dimulai dari yang sering dipesan.

5. Tombol untuk menampilkan deretan lapangan futsal dimulai dari lokasi terdekat.

6. Kotak dialog yang menampilkan detail singkat dan gambar lapangan. klik kotak ini apabila ingin melihat lebih detail dari lapangan dan melanjutkan ke pemesanan.

7. Foto lapangan.

d. Tampilan halaman utama dengan kategori terlaris

Gambar 3.39 Halaman Utama Kategori Terlaris

(52)

e. Tampilan halaman utama dengan kategori termurah

Gambar 3.40 Halaman Utama Kategori Termurah

f. Tampilan detail lapangan (alamat, lokasi, dan foto lapangan)

Setelah memilih tempat, kemudian akan memasuki tampilan rinci lapangan futsal. Seperti pada Gambar 4.

Gambar 3.41 Detail Lapangan

(53)

Keterangan:

1. Tombol untuk kembali ke halaman utama.

2. Foto lapangan.

3. Peta lokasi lapangan.

4. Tombol untuk melanjutkan ke pemesanan jadwal.

g. Tampilan Jadwal lapangan

Pada Gambar 4, di bawah terdapat tombol untuk melanjutkan ke pembayaran.

Saat ditekan, akan memasuki tampilan jadwal pemesanan. Dalam tampilan ini, kita memilih jadwal yang akan dipesan. Seperti pada Gambar 5.

Gambar 3.42 Jadwal Lapangan

Keterangan:

1. Tombol untuk kembali ke halaman detail lapangan.

2. Masukkan tanggal untuk menentukan tanggal pesanan.

3. Checkbox untuk menandai jam yang akan dipesan.

4. Tanda bahwa jam ini sudah tersewa dan tidak bisa dipesan.

5. Tombol untuk melanjutkan ke pembayaran.

(54)

h. Tampilan detail pembayaran

Setelah memilih jadwal dan menekan tombol pembayaran di bawah layar, itu akan memasuki tampilan detail pesanan seperti yang ditunjukkan pada gambar 6.

Gambar 3.43 Detail Pembayaran

Keterangan:

1. Tombol untuk lanjut ke penyelesaian pesanan.

2. Tombol untuk membatalkan pesanan dan langsung menuju tampilan detail lapangan.

(55)

i. Tampilan akhir pemesanan

Setelah mengklik tombol "Lanjut", akan memasuki tampilan akhir dari proses pemesanan dan memberikan pilihan metode pembayaran. Dan seperti pada Gambar 7.

Gambar 3.44 Tampilan Akhir Pemesanan

Keterangan:

1. Tombol untuk menyelesaikan pesanan.

(56)

j. Tampilan daftar pesanan

Setelah melakukan pemesanan, kita bisa melihat daftar pemesanan yang telah dilakukan. Seperti pada Gambar 8.

Gambar 3.45 Daftar Pesanan

Keterangan:

1. Kotak dialog yang menampilkan detail singkat pesanan. Dan bisa diklik untuk menampilkan lebih detail tentang pesanan.

2. Tombol untuk membatalkan pesanan.

3. Tombol kembali ke halaman utama

(57)