BAB III ANALISA DAN PERANCANGAN

Transkripsi

1 BAB III ANALISA DAN PERANCANGAN 3.1 TENTANG LAPANGAN TENA FUTSAL Lapangan TENA futsal berdiri pada tanggal 12 Juli tahun Lapangan ini berlokasi di kawasan Teluknaga, Tangerang. Lapangan TENA futsal hadir melayani member atau pun non member yang hendak menyewa lapangan futsal.memiliki lapangan yang berstandar Internasional ukuran: panjang m x lebar m dan fasilitas yang nyaman bagi para penyewa lapangan. Dengan lokasi strategis, berada di daaerah Teluknaga dan baru ada 1 lapangan di Teluknaga menjadi keunggulan lapangan TENA futsal. Tak hanya sebagai penyewa lapangan futsal ajah, tapi TENA futsal juga kadang mengadakan tournament futsal umum. Untuk memperkuat strategi pemasarannya, TENA futsal melakukan diskon bagi yang bermain 4 kali di lapangan TENA Futsal dan mendapatkan potongan harga sebesar Rp

2 ANALISIS MASALAH Analisa Kondisi Terkini Pada saat ini, sistem pemasaran iklan TENA futsal belum memiliki media pemasaran online dan fasilitas penghubung antara penyewa dan karyawan lapangan menjadi hal utama permasalahan yang ada. Sehingga dalam proses pemasaran lapangan seharihari masih dalam mulut kemulut atau informasi dari orang ke orang Analisa Pembuatan Sistem Sistem yang akan dibangun pada TENA futsal berbasiskan web dan SMS Gateway, nantinya akan digunakan sebagai media pemasaran sekaligus mempromosikan lapangan yang dikelola pengurus atau karyawan TENA futsal. Nantinya penyewa lapangan akan mengakses situ sweb TENA futsal untuk melakukan registrasi sebagai member, kemudian melakukan penyewaan lapangan futsal dengan menggunakan fasilitas kirim SMS dengan bantuan SMS Gateway Analisa Pengguna No. Pengguna Deskripsi 1 Admin pengguna yang memiliki hak untuk melihat lapangan yang di sewa, mengelola pesan, member, kontak, dan mengubah password. 2 Penyewa penyewa yang memiliki hak untuk mengedit profil, menyewa lapangan, mengatur jadwal sewa lapangan, dan mengubah password.

3 Analisa Kebutuhan Perangkat Lunak Perangkat lunak merupakan kebutuhan yang harus dipenuhi dalam merancang atau membangun suatu sistem, Sehingga dapat tercapainya tujuan dari sistem yang dibangun tersebut. Aplikasi informasi penyewaan lapangan berbasis web dan SMS Gateway ini membutuhkan beberapa perangkat lunak sebagai media penunjang berjalannya aplikasi sesuai dengan fungsinya. Beberapa kebutuhan tersebut adalah : 1. Antarmuka Pengguna Sebagai media penunjang berjalannya antar muka, dibutuhkan web browser untuk mengakses situs web TENA futsal seperti Mozilla Firefox, Google Chrome, Internet Explorer, dan lainnya. 2. Aplikasi Server Web server menggunakan aplikasi XAMPP dan database server menggunakan phpmyadmin dan MySQL 5.0 yang berfungsi mengirimkan permintaan dari penyewa ke server dan sebaliknya. 3. Aplikasi SMS Gateway Kebutuhan perangkat lunak untuk pengiriman SMS berbasis web ketelepon seluler menggunakan aplikasi Gammu sebagai service pengiriman SMS.

4 PERANCANGAN SISTEM Berdasarkan analisa penulis pada pembuatan aplikasi informasi penyewaan lapangan berbasis web dan SMS Gateway tersebut, agar lebih mudah dimengerti maka penulis akan menjelaskan dan menggambarkan dalam bentuk diagram pemodelan yang terdiri dari, diagram use case, diagram sequence, dan diagram activity Pemodelan Diagram Use Case Diagram use case digunakan untuk menganalisa kebutuhan dari aplikasi informasi penyewaan lapangan berbasis web dan SMS Gateway yang akan dibangun. Diagram use case menunjukkan fungsi dari suatu system dan bagai mana actor berinteraksi dengan sistem. Pemodelan use case pada aplikasi ini dapat dilihat pada gambar 3.1 berikut.

5 28 Managemen Data Login Admin Registrasi Cari Jadwal Sewa Lapangan Penyewa Kirim SMS Gambar 3.1 Diagram Use Case Aplikasi

6 29 Dateng ke lapangan Cari Jadwal lapangan Penyewa Admin Sewa lapangan Gambar 3.2 Diagram Use Case Pemesanan di tempat Skenario Use Case dari Sisi Penyewa Tabel 3.1 Deskripsi Use Case Cari Jadwal Nama Use Case : Cari jadwal jadwal Aktor : Penyewa Deskripsi : Penyewa dapat mencari jadwal lapangan yang di inginkan dengan memasukkan kata kunci di form pencarian

7 30 Tabel 3.2 Deskripsi Use Case Registrasi Nama Use Case : Registrasi Aktor : Penyewa Deskripsi : Penyewa dapat mendaftar menjadi member dengan mengisi data pada form registrasi Tabel 3.3 Deskripsi Use Case Penyewaan Lapangan Nama Use Case : Penyewaan Lapangan Aktor : Penyewa Deskripsi : Penyewa dapat melakukan penyewaan lapangan kepada admin Tabel 3.4 Deskripsi Use Case Kirim SMS Nama Use Case : Kirim SMS Aktor : Penyewa Deskripsi : Penyewa dapat mengirim SMS langsung yang akan di proses melalui web Tabel 3.5 Deskripsi Use Case Datang Ke Lapangan Nama Use Case : Datang Ke Lapangan Aktor : Penyewa Deskripsi : Penyewa dapat melakukan penyewaan lapangan dengan datang langsung ke lapangan

8 31 Tabel 3.6 Deskripsi Use Case Cari Jadwal Lapangan Pemesanan Di Tempat Nama Use Case : Cari Jadwal Lapangan Pemesanan Di Tempat Aktor : Penyewa Deskripsi : Penyewa dapat melakukan Cari Jadwal Lapangan Pemesanan Di Tempatpenyewaan lapangan Di Tempat Tabel 3.7 Deskripsi Use Case Penyewaan Lapangan Di Tempat Nama Use Case : Penyewaan Lapangan Di Tempat Aktor : Penyewa Deskripsi : Penyewa dapat melakukan penyewaan lapangan kepada admin di tempat Skenario Use Case dari Sisi Admin Tabel 3.8 Deskripsi Use Case Manajemen Data Nama Use Case : Manajemen Data Aktor : Admin Deskripsi : Admin dapat mengelola penyewa, pesan, member, kontak dan password.

9 Pemodelan Diagram Activity Diagram activity registrasi penyewa Pilih menu daftar member Manampilkan form registrasi Memasukan data penyewa Validasi data penyewa Tidak Ya Menyimpan data ke databse Menampiilkan pesan sukses daftar Gambar 3.3 Activity Diagram Registrasi penyewa Tabel 3.9 Deskripsi Diagram Activity Registrasi Penyewa Nama Activity Diagram aktifitas registrasi Penyewa Aktor Penyewa Deskripsi Admin memasukkan data Penyewa Prakondisi - Tindakan Memasukkan data di form registrasi Pasca Kondisi Data di simpan ke dalam database jika pendaftaran sukses dan menampilkan pesan sukses daftar, jika data belum lengkap maka Penyewa harus mengisi form daftar kembali

10 Diagram activity login Penyewa Pilih menu login Manampilkan form login Memasukan username & Password Validasi data Tidak Ya Validasi data Menampiilkan halaman utama penyewa Gambar 3.4 Activity Diagram Login Penyewa Nama Activity Aktor Deskripsi Tabel 3.10 Deskripsi Diagram Activity Login Penyewa Prakondisi - Tindakan Pasca Kondisi Diagram aktifitas login Penyewa Penyewa Penyewa memasukkan username & password penyewa Memasukkan data username & password penyewa Sistem menampilkan halaman utama penyewa jika login gagal maka penyewa harus login kembali

11 Diagram activity cari Jadwal Pilih menu beranda Manampilkan halaman beranda Memasukan keyword Validasi data di database Ya Tidak Melihat detail informasi Menampilkan hasil pencarian Menampilkan pesan data tidak di temukan Gambar 3.5 Activity Diagram Cari Jadwal Tabel 3.11 Deskripsi Diagram Activity Cari Jadwal Nama Activity Diagram aktifitas cari jadwal Aktor Penyewa Deskripsi Penyewa melakukan pencarian jadwal Prakondisi - Tindakan Memasukkan keyword pada form pencarian Pasca Kondisi Penyewa melihat detail informasi hasil pencarian, jika data tidak ditemukan maka system menampilkan pesan data tidak ditemukan

12 Diagram Activity Boking Lapangan Pilih menu login Manampilkan halaman login Memasukan username & passsword Validasi data Tidak Ya Menampilkan halaman utama Memilih menu pesan Menampilkan halam pesan Mengirim pesan Menyimpan pesan ke database Menampilkan pesan sukses kirim pesan Gambar 3.6 Activity Diagram Penyewaan Lapangan Tabel 3.12 Deskripsi Diagram Activity Sewa Lapangan Nama Activity Diagram aktifitas sewa Lapangan Aktor Penyewa Deskripsi Penyewa mengirim pesan sewa lapangan Prakondisi - Tindakan Pasca Kondisi Memilih menu booking Sistem menyimpan pesan ke database dan menampilkan pesan sukses kirim pesan

13 Diagram Activity Kirim SMS Pilih menu login Manampilkan halaman login Memasukan username & passsword Validasi data Tidak Ya Menampilkan halaman utama Memilih menu kirim SMS Menampilkan halaman kirim SMS Mengirim SMS Menyimpan pesan ke database Menampilkan pesan sukses kirim SMS Gambar 3.7 Activity Diagram Kirim SMS Tabel 3.13 Deskripsi Diagram Activity Kirim SMS Nama Activity Diagram aktifitas kirim SMS Aktor Penyewa Deskripsi Penyewa mengirim SMS ke admin Prakondisi - Tindakan Memilih menu kirim SMS Pasca Kondisi Sistem menyimpan SMS ke database dan menampilkan pesan sukses kirim SMS

14 DiagramActivity Login Admin Akses halaman login admin Manampilkan form login Memasukan username & password Validasi data Tidak Ya Menyimpan data ke databse Menampilkan halaman utama admin Gambar 3.8 Activity Diagram Login Admin Tabel 3.14 Deskripsi Diagram Activity Login Admin Nama Activity Diagram aktifitas login admin Aktor Admin Deskripsi Admin memasukkan username & password Prakondisi - Tindakan Memasukkan data username & password admin PascaKondisi Sistem menampilkan halaman utama admin, jika login gagal maka admin harus login kembali

15 Diagram Activity Manajemen Data Admin Akses halaman login admin Manampilkan form login Memasukan username & password Validasi data Tidak Ya Menampilkan halaman utama admin Mengelola data admin Gambar 3.9 Activity Diagram Manajemen Data Admin Tabel 3.15 Deskripsi Diagram Activity Manajemen Data Admin Nama Activity Diagram aktifitas manajemen data admin Aktor Admin Deskripsi Admin melakukan manajemen data Prakondisi - Tindakan Mengelola data admin PascaKondisi Data dikelola admin

16 Diagram Activity Datang Ke Lapangan Gambar 3.10 Activity Diagram Datang Ke Lapangan Tabel 3.16 Deskripsi Diagram Activity Datang Ke Lapangan Nama Activity Diagram aktifitas datang ke lapangan Aktor Penyewa Deskripsi Penyewa melakukan datang ke lapangan Prakondisi - Tindakan Datang ke lapangan PascaKondisi Datang ke lapangan

17 Diagram Activity Cari Jadwal Lapangan Di Tempat Gambar 3.11 Activity Diagram Cari Jadwal Lapangan Di Tempat Tabel 3.17 Deskripsi Diagram Activity Cari Jadwal Lapangan Di Tempat Nama Activity Diagram aktifitas cari jadwal di tempat Aktor Penyewa Deskripsi Penyewa melakukan cari jadwal di tempat Prakondisi - Tindakan Cari jadwal di tempat PascaKondisi Cari jadwal di tempat

18 Diagram Activity Sewa Lapangan Di Tempat Konfirmasi Kasir Cari Lapangan Sewa Lapangan Gambar 3.12 Activity Diagram Sewa Lapangan Di Tempat Tabel 3.18 Deskripsi Diagram Activity Sewa Lapangan Di Tempat Nama Activity Diagram aktifitas sewa lapangan di tempat Aktor Penyewa Deskripsi Penyewa melakukan sewa lapangan di tempat Prakondisi - Tindakan Sewa lapangan di tempat PascaKondisi Sewa Lapangan di tempat

19 Pemodelan Diagram Sequence Diagram sequence registrasi penyewa Beranda Beranda Form Registrasi Form Registrasi Database Penyewa mulai pilih menu daftar member Mengisi data data valid Data tidak valid simpan selesai Gambar 3.13 Diagram Sequence Registrasi Penyewa Gambar 3.13 menggambarkan scenario registrasi penyewa dimana admin harus memasukkan data, jika data valid maka data akan disimpan ke database tetapi jika data tidak valid maka penyewa harus memasukkan data kembali di form registrasi.

20 Diagram sequence login penyewa Home Form Login Beranda About Us Booking Info Fasilitas Logout PenyewaMulai Input Username & Password Valid Data Tidak Valid Masuk Menu Selesai Masuk Menu Selesai Masuk Menu Selesai Masuk Menu Selesai Masuk Menu Penyewa Keluar Gambar 3.14 Diagram Sequence Login Penyewa Gambar 3.14 menggambarkan proses login penyewa dimana sebelum masuk kehalaman beranda, penyewa harus memasukkan username dan password. Jika data valid maka pengguna akan masuk kehalaman penyewa, tetapi jika tidak valid penyewa akan kembali kehalaman login.

21 Diagram sequence cari about us Home Form Login About Us About Us Penyewa Mulai Input Username & Password Valid Data Tidak Valid Lihat About Us Penyewa Keluar Gambar 3.15 Diagram Sequence Login Penyewa About Us Gambar 3.15 diatas menggambarkan proses login penyewa about us yang dilakukan penyewa, dimana penyewa harus memasukkan keyword pada form pencarian yang nantinya hasil pencarian akanditampilkan oleh sistem.

22 Diagram sequence login boking Home Form Login Booking Booking Penyewa Mulai Input Username & Password Valid Data Tidak Valid Lihat About Us Penyewa Keluar Gambar 3.16 Diagram Sequence Penyewa Login Boking Gambar 3.16 diatas menggambarkan skenario penyewa login boking yang dilakukan penyewa. Penyewa harus memasukkan pada form boking yang tersedia dan data akan disimpan ke dalam database.

23 Diagram sequence login penyewa lihat info Home Form Login Info Info PenyewaMulai Input Username & Password Valid Data Tidak Valid Lihat Info Penyewa Keluar Gambar 3.17 Diagram Sequence Login Penyewa Lihat Info Gambar 3.17 diatas menggambarkan skenario penyewa lihat info yang dilakukan oleh penyewa. Penyewa terlebih dahulu harus melakukan login untuk dapat melakukan lihat info, jika login tidak valid maka penyewa harus memasukkan username dan password kembali.

24 Diagram sequence login penyewa lihat fasilitas Home Form Login Fasilitas Fasilitas PenyewaMulai Input Username & Password Valid Data Tidak Valid Lihat Fasilitas Penyewa Keluar Gambar 3.18 Diagram Sequence Login Penyewa Lihat Fasilitas Gambar 3.18 diatas menggambarkan skenario lihat fasilitas yang dilakukan oleh penyewa kepada admin. Penyewa terlebih dahulu harus melakukan login untuk dapat melakukan lihat fasilitas, jika login tidak valid maka penyewa harus memasukkan username dan password kembali.

25 Diagram sequence login admin Form Login Beranda Member Jadwal Lapangan A & B Data Booked & Laporan Logout Admin Input Username & Password Valid Masuk Menu Input Username & Password Masuk Menu Data Tidak Valid Selesai Selesai Masuk Menu Selesai Masuk Menu Admin Keluar Gambar 3.19 Diagram Sequence Login Admin Gambar 3.19 diatas menggambarkan skenario login yang dilakukan admin. Admin harus memasukkan username dan password. Jika data valid maka pengguna akan masuk kehalaman Beranda, tetapi jika tidak valid admin akan kembali kehalaman login.

26 Diagram sequence login admin lihat beranda Form Login Beranda Beranda Admin Input Username & Password Valid Input Username & Password Lihat Beranda Data Tidak Valid Admin Keluar Gambar 3.20 Diagram Sequence Login Admin Lihat Beranda Gambar 3.20 diatas menggambarkan skenario admin lihat beranda yang dilakukan oleh admin. Admin terlebih dahulu harus melakukan login untuk dapat melakukan lihat beranda, jika login tidak valid maka admin harus memasukkan username dan password kembali.

27 Diagram sequence login admin lihat member Form Login Beranda Member Admin Input Username & Password Valid Input Username & Password Lihat Member Data Tidak Valid Admin Keluar Gambar 3.21 Diagram Sequence Login Admin Lihat Member Gambar 3.21 diatas menggambarkan skenario admin lihat member yang dilakukan oleh admin. Admin terlebih dahulu harus melakukan login untuk dapat melakukan lihat member, jika login tidak valid maka admin harus memasukkan username dan password kembali.

28 Diagram sequence admin lihat jadwal lapangan A Form Login Beranda Jadwal Lapangan A Admin Mulai Input Username & Password Valid Data Tidak Valid Masuk Menu Mengelola Lapangan A Admin Keluar Gabar 3.22 Diagram Sequence Login Admin Lihat Jadwal Lapangan A Gambar 3.22 diatas menggambarkan skenario admin lihat jadwal lapangan A yang dilakukan oleh admin. Admin terlebih dahulu harus melakukan login untuk dapat melakukan lihat jadwal lapangan A, jika login tidak valid maka admin harus memasukkan username dan password kembali.

29 Diagram sequence admin lihat jadwal lapangan B Form Login Beranda Jadwal Lapangan B Admin Mulai Input Username & Password Valid Data Tidak Valid Masuk Menu Mengelola Lapangan B Admin Keluar Gambar 3.23 Diagram Sequence Login Admin Lihat Jadwal Lapangan B Gambar 3.23 diatas menggambarkan skenario admin lihat jadwal lapangan B yang dilakukan oleh admin. Admin terlebih dahulu harus melakukan login untuk dapat melakukan lihat jadwal lapangan B, jika login tidak valid maka admin harus memasukkan username dan password kembali.

30 Diagram sequence login admin lihat data booked Form Login Beranda Data Booked Admin Mulai Input Username & Password Valid Data Tidak Valid Masuk Menu Mengelola Data Booked Admin Keluar Gambar 3.24 Diagram Sequence Login Admin Lihat Data Booked Gambar 3.24 diatas menggambarkan skenario admin lihat data booked yang dilakukan oleh admin. Admin terlebih dahulu harus melakukan login untuk dapat melakukan lihat data booked, jika login tidak valid maka admin harus memasukkan username dan password kembali.

31 Diagram sequence login admin lihat data laporan Form Login Beranda Data Laporan Admin Mulai Input Username & Password Valid Data Tidak Valid Masuk Menu Mengelola Data Laporan Admin Keluar Gambar 3.25 Diagram Sequence Login Admin Lihat Laporan Gambar 3.25 diatas menggambarkan skenario admin lihat data laporan yang dilakukan oleh admin. Admin terlebih dahulu harus melakukan login untuk dapat melakukan lihat data laporan, jika login tidak valid maka admin harus memasukkan username dan password kembali.

32 Diagram sequence datang ke lapangan Berangkat Ke Lapangan Sampai Lapangan Penyewa Mulai Jalan Gambar 3.26 Diagram Sequence Datang Ke Lapangan Gambar 3.26 diatas menggambarkan skenario penyewa datang langsung ke lapangan untuk penyewaan lapangan. Penyewa harus terlebih dahulu berangkat ke lapangan hingga sampai ke lapangan.

33 Diagram sequence cari jadwal lapangan di tempat Cari Jadwal Lapangan Meja Kasir Dapat Jadwal Penyewa Mulai Tanya Cari Gambar 3.27 Diagram Sequence Cari Jadwal Lapangan Di Tempat Gambar 3.27 diatas menggambarkan skenario penyewa cari jadwal di tempat atau langsung ke lapangan untuk pencarian jadwal lapangan. Penyewa harus terlebih cari jadwal melalui meja kasir sehingga mendapatkan jadwal lapangan.

34 Diagram sequence Sewa Lapangan Di Tempat Konfirmasi Kasir Cari Lapangan Sewa Lapangan Penyewa Mulai Tanya Cari Gambar 3.28 Diagram Sequence Sewa Lapangan Di Tempat Gambar 3.28 diatas menggambarkan skenario penyewa sewa lapangan di tempat atau langsung di lapangan. Penyewa harus terlebih dahulu menkonfirmasi untuk menanyakan jadwal kemudian penyewa mencari jadwal yang di inginkan sehingga bisa sewa lapangan di tempat.

35 PERANCANGAN BASIS DATA Untuk kebutuhan dalam pengolahan data, maka diperlukan file-file yang berfungsi untuk menyimpan data-data. File database yang dibuat dengan menggunakan phpmyadmin dan MySQL ini memiliki spesifikasi data sebagai berikut: Struktur Tabel Struktur tabel adalah deskripsi atau gambaran mengenai penjelasan dari tabel, field, tipe data dan ukuran data. Struktur tabel digunakan untuk menjelaskan kedudukan sebagai tempat penyimpanan data. Tabel- tabel yang penulis gunakan dalam aplikasi informasi agent property berbasis web dan SMS Gateway adalah: 1. Tabel t_admin Tabel ini digunakan untuk menyimpan data admin, tabel ini terdiri dari id_admin, username dan password. Tabel 3.19 Field-field pada tabel t_admin Nama Field Tipe Data Panjang Keterangan id_admin Integer 11 Primary key username Varchar 50 password Varchar Tabel t_booking Tabel ini digunakan untuk menyimpan data sewaan, tabel ini terdiri dari id_booking, id_master, id_member, no_hp, nama_lap, tgl, jam, harga, status.

36 59 Tabel 3.20 Field-field pada tabel t_booking Nama Field Tipe Data Panjang Keterangan id_booking Varchar 5 Primary key id_master Varchar 5 Primary key id_member Varchar 5 Primary key no_hp Varchar 30 nama_lap Varchar 15 tgl Varchar 15 jam Varchar 10 harga Varchar 15 status Varchar Tabel t_lap_a Tabel ini digunakan untuk menyimpan data lapangan A, tabel ini terdiri dari id_lap_a, user, nama_lap, tgl, jam, harga. Tabel 3.21 Field-field pada tabel t_lap_a Nama Field Tipe Data Panjang Keterangan id_lap_a Varchar 5 Primary key User Varchar 15 nama_lap Varchar 30 Tgl Varchar 15 Jam Varchar 10 harga Varchar 15

37 60 4. Tabel t_lap_b Tabel ini digunakan untuk menyimpan data lapangan B, tabel ini terdiri dari id_lap_b, user, nama_lap, tgl, jam, harga Tabel 3.22 Field-field pada tabel t_lap_b Nama Field Tipe Data Panjang Keterangan id_lap_b Varchar 5 Primary key User Varchar 15 nama_lap Varchar 30 Tgl Varchar 15 Jam Varchar 10 harga Varchar Tabel t_master_lap Tabel ini digunakan untuk menyimpan data master lapangan, tabel ini terdiri dari id_master, id_lap, user, nama_lap, tgl, jam, harga, status. Tabel 3.23 Field-field pada tabel t_master_lap Nama Field Tipe Data Panjang Keterangan id_master Integer 3 Primary key id_lap Integer 5 User Varchar 15 nama_lap Varchar 30 Tgl Varchar 15 Jam Varchar 10 Harga Varchar 15 Status Varchar 10

38 61 6. Tabel t_member Tabel ini digunakan untuk menyimpan data member, tabel ini terdiri dari id_member, password, nama, tgl_join, , no_hp, foto. Tabel 3.24 Field-field pada tabel t_member Nama Field Tipe Data Panjang Keterangan id_member Varchar 5 Primary key password Varchar 50 nama Varchar 30 tgl_join Varchar 15 Varchar 30 no_hp Varchar 15 Foto Varchar 100

39 ENTITY RELATIONSHIP DIAGRAM Pesan m Kirim 1 penyewa m Kirim SMS I admin 1 Punya m Pesan m Punya 1 lapangan 1 Punya m jadwal Gambar 3.29 Entity Relationship Diagram

40 Detail Atribut ERD Tabel 3.25 Detail Atribut ERD Nama Entitas Atribut Admin id_admin, username, password Booking id_booking, id_master, id_member, no_hp, nama_lap, tgl, jam, harga, status Lapangan A id_lap_a, user, nama_lap, tgl, jam, harga Lapangan B id_lap_b, user, nama_lap, tgl, jam, harga Master Lapangan id_master, id_lap, user, nama_lap, tgl, jam, harga, status Member id_member, password, nama, tgl_join, , no_hp, foto.

41 RANCANGAN ANTARMUKA Struktur Tampilan Halaman Penyewa Halaman Utama About us Booking Info Fasilitas Home Gambar 3.30 Struktur Tampilan Halaman Penyewa Struktur Tampilan Halaman Admin Halaman Admin Beranda Member Jadwal Data Logout Gambar 3.31 Struktur Tampilan Halaman Admin

42 Rancangan Antarmuka Halaman Utama Situs dan Penyewa HEADER About US Booking Info Fasilitas Home Login Page ID Member Password Slider Masuk Sign Up Lupa Password KALENDER ISI SLIDE TENA FUTSAL PETA Social Media Gambar 3.32 Rancangan Halaman Utama Penyewa Gambar 3.32 Rancangan Halaman Utama Penyewa Gambar 3.32 adalah perancangan antar muka halaman pengunjung yang berisikan About Us, booking, info, fasilitas, home disertai slider, isi slide TENA Futsal, peta/lokasi TENA Futsal, login member, kalender dan social media.

43 Rancangan Antarmuka Halaman Fasilitas HEADER About Us Booking Info Fasilitas Home Login page ID Member Password GAMBAR 1 GAMBAR 2 GAMBAR 3 GAMBAR 4 Masuk Sign Up Lupa Password GAMBAR 5 GAMBAR 6 GAMBAR 7 GAMBAR 8 KALENDER Social Media Gambar 3.33 Rancangan Halaman penyewa/pengunjung Fasilitas Gambar 3.33 adalah perancangan antar muka halaman fasilitas yang berisikan menu home, fasilitas, info, booking, About Us disertai animasi gif, kalender, social media login penyewa, gambar 1, gambar 2, gambar 3, gambar 4, gambar 4, gambar 5, gambar 6, gambar 6, gambar7, gambar 8.

44 Rancangan Antar muka Halaman Penyewa/Pengunjung Info HEADER About US Booking Info Fasilitas Home Login page ID Member INFO Password Masuk Sign Up Lupa Password Info harga lapangan Book via SMS Book via website Info Lap A Info Lap B KALENDER Social Media Gambar 3.34 Rancangan Halaman penyewa/pengunjung Info Gambar 3.34 adalah perancangan antar muka halaman penyewa info yang berisikan menu home, fasilitas, info, booking, About Us, info harga, booking via SMS, booking via website, kalender, social media login penyewa.

45 Rancangan Antarmuka Halaman About Us HEADER About US Booking Info Fasilitas Home Login page ID Member Password Masuk Sign Up Lupa Password ISI TENA FUTSAL VISI KALENDER MISI Social Media Gambar 3.35 Rancangan Halaman Penyewa/Pengunjung About Us Gambar 3.35 adalah perancangan antar muka halaman About Us yang berisikan menu home, fasilitas, info, booking, About Us, kalender, social media login penyewa, isi Tena futsal, visi, misi.

46 Rancangan Antar muka Halaman Admin HEADER Beranda Member Jadwal Data Logout Masukan kata kunci Cari berdasarkan Search Gambar 3.36 Rancangan Halaman Admin Gambar 3.36 adalah perancangan antar muka halaman admin yang berisikan menu Beranda, member, jadwal, data, logout, Masukan kata kunci, cari berdasarkan, search.

47 Rancangan Antar muka Halaman Admin/admin jadwal HEADER Beranda Member Jadwal data Logout Lapangan A Lapangan B JADWAL ID User Nama Lapangan Tanggal *Masukan jadwal untuk admin Jam main Harga lapangan/ jam Submit NO ID Nama lap Tanggal Jam Harga lap/jam Harga lap/jam User Action Edit Delete Edit Delete Gambar 3.37 Rancangan Halaman Admin/admin jadwal Gambar 3.37 adalah perancangan antar muka halaman admin jadwal yang berisikan menu Beranda, member, jadwal, lapangan A, lapanagan B, data, logout, ID, user, nama lapangan, tanggal, jam main, harga lapangan/jam, submit dan table jadwal input.

48 Rancangan Antar muka Halaman Admin/data booked HEADER Beranda Member Jadwal data Logout Booked Laporan Data Booked NO ID Booking ID Master ID Member Nama Tanggal Jam Change Status Action Gambar 3.38 Rancangan Halaman Admin/data booked Gambar 3.38 adalah perancangan antar muka halaman admin data booked yang berisikan menu Beranda, member, jadwal, data, booked, laporan, logout, dan table input data booked.

49 Rancangan Antar muka Halaman Admin/data laporan HEADER Beranda Member Jadwal data Logout Booked Laporan Data Laporan NO ID Booking ID Master ID Member Nama Tanggal Jam Change Status Action Gambar 3.39 Rancangan Halaman Admin/data laporan Gambar 3.39 adalah perancangan antar muka halaman admin data laporan yang berisikan menu Beranda, member, jadwal, data, booked, laporan, logout, dan table input data laporan.