Futsal field and Gym finder system

Mubarak Ahmed Khalil

Elteyab Ali Hassan

B.Sc. in computer science

Future University
March, 2018

1
 Futsal field and Gym finder system

By:
Mubarak Ahmed Khalil
Elteyab Ali Hassan

RESRACH SUBMITTED IN FULFILMENT OF THE

REQUIREMENT FOR THE B.Sc.
Faculty of Computer Science
FUTURE UNIVERSITY
SUDAN
March, 2018

2
 Copyright

The copyright of this research belongs to the author under the terms of the
Copyright Act of the Future University Intellectual Property Regulations. Due
acknowledgment shall always be made of the use of any material contained in, or derived
from, this research.

©
Mubarak Ahmed Khalil
Elteyab Ali Hassan ,2018
All rights reserved

3
 Declaration

I hereby declare that the work has been done by myself and no portion of the work
contained in this research has been submitted in support of any application for any other
degree or qualification of this or any other university or institute of learning.

_______________________

Mubarak Ahmed Khalil

Elteyab Ali Hassan

4
 Acknowledgment

We would like to express our thanks and appreciation to our supervisor, Dr.
Ahmed Sayed Ahmed Alageed, for overseeing the completion of the project and its
valuable observations on the work of the project. We also thank the International Garden
Management for its cooperation in providing the required information in the project. We
do not forget to thank the College of Computer Science at the University for providing
time and assistance in programming techniques to complete the project in the best way
possible.

5
 Dedication

I dedicate this humble work to

My family
For all their love, patience, kindness and support .

My friends
Who never stop giving me their advice and encouraging me to believe in myself to get a
success .

My teachers
In all my academic stages I appreciate your efforts in my life.

6
 ‫الخالصة‬

‫تعتبر تطبيقات الهاتف مفيده جدا في حياتنا النها تقلل الزمن والتكلفه علي مستخدميها ‪ .‬هذا البحث‬
‫يهدف الي حل المشاكل التي تواجه مالك الصاالت الرياضيه والمستحدمين من ايجاد الماكن والحجز والزمنـ‬
‫المتاح ‪ .‬في هذا البحث استخدمنا ايونك وكرودوفا لتحويل الكود ليعمل علي كل المنصات مثل اندويدـ وااليفونـ‬
‫‪.‬‬
‫يمكن تطوير هذا تطوير ها النظام ليعمل علي جميع المجاالت وتحول عملية دفع العربون من تحويل الرصيد‬
‫الي الدفع االلكتروني ‪.‬‬

‫‪7‬‬
 Abstract

Mobile applications are very useful in our lives because they reduce the time and
cost to its users. This research solves the problems that manager and user to finding
places ,reservation and available time .in this research we user ionic and Cordova to
transform Html and Scss code to make it work on multiple platforms like Android and
Ios
This system can be developed to operate in all fields and the payment process is
transferred from the balance transfer to electronic payment.

Table of content
Page Number
Copyright iii
Declaration iv
Acknowledgment v
Dedication vi
‫الخالصة‬ vii
Abstract viii
Chapter One 1
Introduction 1
1.1 Introduction: 1
1.2 Site of project: 1
1.3 Problems and Objectives: 1
1.3.1 Problems: 1
1.3.2 Objectives: 2
1.4 Project Nature: 2
Chapter Two 3

8
Literature Review 3
2.1 Introduction: 3
2.2 Definition of key words: 3
Web Server : 4
System : 4
Gps : 4
2.3 Pervious study: 4
2.3.1 Web site of Mubaratna: 4
2.3.1.2 Summary: 8
2.3.2 Application of weekend: 8
2.3.2.1 Summary: 10
2.3.3 Summary about previous studies: 10
2.4About software and hardware: 10
2.4.1 About software: 10
2.4.2 About hardware: 11
Chapter Three 12
Research method 12
3.1 Introduction: 12
3.2 Methodologies: 12
3.2.1 Advantages of Incremental model: 13
3.3 Data analysis collection: 13
3.3.1 Data gathering: 13
Survey : 13.
Interview: 20
3.3.3 Description of current system: 23
3.3.4 Model of current system: 23
3.3.4.1 Usecase diagram: 23
3.3.4.1.2 Use case documentation: 24
3.3.5 Requirement Specification: 28
3.3.5.1 Functional requirement: 28
3.3.5.2 Non Functional requirement: 28
3.3.6 Model of new system: 29
3.3.7.2 Sequence diagram 35
Figure ( ) Sequence diagram 35
3.3.7.3 Class diagram: 35
3.3.7.5 Database diagram: 37

9
Chapter Four 38
Research design 38
4.1 Introduction: 38
4.2 Data flow diagram 39
4.2.1 Data flow diagram level: 39
4.2.2 Data flow diagram level 1: 39
4.4 Users of application: 41
4.5 Database design: 42
4.5.1 Data dictionary: 43
Chapter Five 131
Conclusion 131
5.1 Conclusion: 131
5.2 Recommendation: 131
6.1Appendix 132
6.1.1 User manual : 132
Document : 147
Code:: 149

Table of Figures
Name of Figures Page No
Figure (2.1) interface about Mubaratna 5
Figure (2.2) interface about Mubaratna 6
Figure (2.3) interface about Mubaratna 7
Figure (2.4) interface about Mubaratna 9
Figure (3.1) incremental model 12
Figure (3.2) survey 16
Figure (3.5 ) usecase diagram 24
Figure (3.6 ) Use case Documentation 24
Figure (3.7 ) Use case Documentation 25
Figure (3.8 ) Use case Documentation 25
Figure (3.9 ) Sequence diagram 26
Figure (3.10 ) Activity diagram 27
Figure (3.11)sequence diagram 29
Figure (3.12 ) Use case Documentation 29

10
Figure ( 3.13 ) Use case Documentation 30
Figure (3.14 ) Use case Documentation 30
Figure ( 3.15) Use case Documentation 31
Figure (3.16 ) Use case Documentation 31
Figure ( 3.16 ) Use case Documentation 32
Figure (3.17 ) Use case Documentation 32
Figure (3.18 ) Use case Documentation 33
Figure ( 3.19 ) Use case Documentation 33
Figure (3. 20 ) Use case Documentation 34
Figure (3.21) Use case Documentation 34
Figure (3.22) Use case Documentation 34
Figure (3.23) Sequence diagram 35
Figure (3.24) Class diagram: 36
Figure (3.25) database diagram 37
Figure (4.2) data flow diagram 39
Figer (4.3) user interface 40
Figer (4.4) user interface 40
Figer (4.5) user interface 41
Figure (4.6) Database design 42
Figure (4.7) home Activity 48
Figure (4.8) login activity 52
Figure (4.9) registration Activity 56
Figure (4.10) Activity list 59
Figure (4.11) map Activity 62
Figure (4.12) map Activity 66
Figure (4.13)search activity 69
Figure (4.14) contact activity 73
Figure (4.15) side menu activity 76
Figure (4.16) Futsal and Gym list 78
Figure (4.17) booking information activity 83
Figure (4.18) Bill information activity 88

11
Figure (4.19) successful booking 92
Figure (4.20) search activity 94
Figure (4.21) home page 99
Figure (4.22) reservation page 102
Figure (4.23) view reservation page 105
Figure (4.24) category page 108
Figure (4.25) create new category page 110
Figure (4.26) animate page 115
Figure (4.27) List of category 115
Figure (4.28) add all category page 116
Figure (4.29) list futsal page 117
Figure (4.30) edit Futsal page 119
Figure (4.31) create new offer page 123
Figure (4.32) home page 123
Figure (4.33)report check in page 124
Figure (4.34) report check out page 124
Figure (4.35) report check in page 125
Figure (4.36) manager list Admin page 125
Figure (4.37) manager list customers page 126
Figure (4.38) Admin setting page 127
Figure (4.39)Admin profile page 128
Figure (4.40) login activity 129
Figure (6.1) home activity 132
Figer (6.2) login activity 133
Figure (6.3) activity list 134
Figure(6.4) Futsal details 135
Figure (6.5) map activity 136
Figure (6.6) search activity 137
Figure(6.7) contact activity 138
Figure (6.8)side menu activity 139
Figure (6.9) futsal list activity 140

12
Figure (6.10) futsal list activity 141
Figure (6.11) booking information 142
Figure (6.12) bill information 143
Figure (6.13) booking success 144
Figure (6.14) search activity 145
Figure (6.15) registration form 146

13
 Chapter One

Introduction

1.1 Introduction:
Recently Futsal fields and Gym are spreading all around the country and smart
phone market are growing exponentially which lead us to the idea of using a smart phone
application to solve a real-life problem.
In our case the problem is related to the reservation of Futsal fields and Gym, such as
availability of days and times, location, and price.
The proposed solution makes it easy to overcome the mentioned problem for the users
and the manager with the least cost and response time.
Other applications waste time, whereas our application will insure that time is save as
much as possible.
Our application will show available time without any need to contact the manager and
being able to pay from your mobile phone.

1.2 Site of project:

The site of this project is located in Africa Street, Khartoum, Sudan. The
International Park foundation is an aged foundation and its managed by Alsadaga
council .it started out with farming .Then they expanded to the sports niche late in
2012 .By adding Gym Futsal and other activities

1.3 Problems and Objectives:

1.3.1 Problems:
1- Customers don’t know the current offers or discounts provided by Futsal field and
Gym.
2- There is no definite price for Futsal fields and Gym
3- Wasting time to reserve fields.

14
 4- Customers have difficulties on locating the nearest Futsal field and Gym
5- Difficulties on comparing the Futsal field and Gym regarding cost, facilities,
location and working house.

1.3.2 Objectives:
1- To ensure that regular customer will receive the best offers and discounts, the
application will make report in general.
2- To guarantee that no customers are discriminated each field will have an un
changing price.
3- To save time for the customer in reserving Futsal field and Gym, the application
will be fast and straight forward.
4- To establish a system to identify the nearest Futsal field and Gym for the user
using the technique of GPS or depending on the region.
5- To ease the search process, the application will cross-reference search for: cost,
facilities, locations and working house.

1.4 Project Nature:

The nature of our Futsal Field and Gym finder system will be a mobile application
the owner and user could be easy and efficient to use.
`

15
 Chapter Two

Literature Review

2.1 Introduction:
Most Futsal fields and Gyms in country are using paper sin registrations and
bookings which are not efficient as the papers of some users may be lost and this might
cause your user trust.
The purpose of this system is to solve the problem of searching, reservations and nearest
location of Futsal field and Gym.
In the past, the sport in Sudan has been focusing only on increasing the number of Futsal
fields and Gym to match the numbers of users.
In the present, it focused on increasing the number of fields and using technology to
reach the fields and reserve them in the easiest way
And the first to focus on using the application in the mobile in the reservation and
knowledge of the fields are the international park, which international park is different
places and will make it easier for everyone to know the Futsal fields and Gym and
available times and the best offers.

2.2 Definition of key words:

Futsal field:
Futsal is played between two teams of five players each, one of whom is the
goalkeeper and unlimited substitutions are permitted.

Admin
Is the person responsible for managing all or part of system and data. Set of connecting
things or parts forming a complex whole.

16
 Web Server :
Web server is a program that, using the client/server model and the Worldwide Web's Hypertext
Transfer Protocol (HTTP).

System :
Set of connecting things or parts forming a complex whole.

Gps :
Which stander for global positing system, is a radio navigation system that allows land, sea and
airborne users to determine their exact location, velocity and time 24 hours a day in all
weather conditions, anywhere in the world?

2.3 Pervious study:

2.3.1 Web site of Mubaratna:

Mubaratna is a project in cooperation between Ministry of State for Youth Affairs

and Cooperative Societies and the ministry of education for the exploitation of
playgrounds of schools (Ministry of Education) during the evening, in order to allow the
greatest possible number of young people to practice football.

17
Figure (2.1) interface about Mubaratna

18
Figure (2.2) interface about Mubaratna

19
Figure (2.3) interface about Mubaratna

20
2.3.1.2 Summary:
Webpage of Mubaratna is outside the Sudan is located in the state of Kuwait they
had one problem which is payment method.

2.3.2 Application of weekend:

Weekend Application to booking the places and stadiums and display their locations on
the map in addition to some of the picture showed her and whether it can be booked
through the service request from the manager.

21
Figure (2.4) interface about Mubaratna

22
2.3.2.1 Summary:
Application Weekend is application outside Sudan its problem is location and
reservation places and stadiums.

2.3.3 Summary about previous studies:

There are a few smart application in Sudan and is previous studies, the biggest
problem for business manager is the problem of booking fields and locating them.
Our system is the first program to reserve fields in Sudan and we have eliminated the
problem of paying using transfer balance form user to manager of the deposit and use
GPS to find the field locations accurately.

2.4About software and hardware:

2.4.1 About software:

Ionic framework

Ionic was founded in 2012, when using web technologies as a means to build native
apps was still in its infancy. When we started, we just wanted to create a better way for
web developers to use their existing skillsets to build apps for the app stores.

Today, Ionic is the world's most popular cross-platform mobile development technology
stack, powering fast growing startups to some of the biggest companies in the world.

(Ionic Framework, 2017)

Cordova:
Apache Cordova (formerly Phone Gap) is a mobile application development
framework originally created by Nit obi. Adobe Systems purchased Nit obi in 2011,
rebranded it as Phone Gap, and later released an open source version of the software
called Apache Cordova. Apache Cordova enables software programmers to build
applications for mobile devices using CSS3, HTML5, and JavaScript instead of relying
on platform-specific APIs like those in Android, IOS, or Windows Phone. It enables
wrapping up of CSS, HTML, and JavaScript code depending upon the platform of the
device.

23
(cordova, 2018)

TypeScript is an open-source programming language developed and maintained by

Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing
to the language. Anders Hejlsberg, lead architect of C# and creator of Delphi and Turbo
Pascal, has worked on the development of TypeScript. TypeScript may be used to
develop JavaScript applications for client-side or server-side (Node.js) execution.
(TypeScript - wikipedia, 2018)

Laravel
Laravel is a free, open-source PHP web framework, created by Taylor Otwell and
intended for the development of web applications following the model–view–controller
(MVC) architectural pattern. Some of the features of Laravel are a modular packaging
system with a dedicated dependency manager, different ways for accessing relational
databases, utilities that aid in application deployment and maintenance, and its orientation
toward syntactic sugar.

As of March 2015, Laravel is regarded as one of the most popular PHP frameworks,
together with Symfony, Zend, CodeIgniter, Yii2 and others.
(Laravel - wikipedia, 2018)

2.4.2 About hardware:

Devise About
Computer Minim devise cor-i3 -Ram 1GB HHD
150 GB
Maximum : devise cor-i7– Ram 6GB HHD
250GB
Phone Minim – ram 260mb memory :1 G

24
 Chapter Three

Research method

3.1 Introduction:
Most of Futsal field and Gym in Sudan using manual system to manage their work and
customers booking .

3.2 Methodologies:
Incremental method:
In incremental model the whole requirement is divided into various builds.
Multiple development cycles take place here, making the life cycle a waterfall cycles. 
Cycles are divided up into smaller, more easily managed modules. Incremental model is a
type of software development model.

Diagram of Incremental model:

Figure (3.1) incremental model

25
3.2.1 Advantages of Incremental model:

● Generates working software quickly and early during the software life cycle.
● This model is more flexible – less costly to change scope and requirements.
● It is easier to test and debug during a smaller iteration.
● In this model customer can respond to each built.
● Lowers initial delivery cost.
● Easier to manage risk because risky pieces are identified and handled during it’d
iteration.

3.3 Data analysis collection:

3.3.1 Data gathering:

There are several methods that can be used to gathering all the needed
information that help us in creating new, usable system, such as SURVEY allow analyst
to collect information from many people in relatively short amount of time, when using
survey the questions should be focused and organized by a feature or project objective,
survey should not be too long to ensure that the users will complete them. INTERVIEW
the word interview refers to one_ on _one conversation with one person acting in the role
of the interviewer and the other of the interviewee the interviewer ask questions
interviewee responds, HARD DOCUMENT hard document analyzing existing
document can prove to be a useful technique that help the analyst to the current system
and situation of current document .

Survey:
1. Gander
o Male

26
 o Female
2. Do you use the Internet to reserve any of the services (hotel - apartments -
aviation)
o yes
o no
o Sometimes

3. Do you play football in the pentathlon?

o Yes
o No

4. If you are using pentacles - you suffer from the booking method by going to the
stadium site
o Yes
o No

5. Do you prefer booking the previous way or prefer a simpler way to order online
Best via internet
o Yes
o No

6. If you have tried to book online - The result was good?

o Yes
o No

I did not try

7. Can you get information about the stadium before you go to it (type of ground -
lighting - accompanying services?)
o Yes
o No

8. Do you know all the stadiums (pentagons) around your area?

o Yes

27
 o No

9. Do you need to be reminded before your appointment?

o Yes
o No

10. If you cannot attend your appointment at the stadium, do you want to cancel your
appointment?
o Yes
o No

28
Figure (3.2) survey

29
30
31
32
Interview:

Future University
Final Project
Interview No.1
Interviewee
Name ManjdyKamal
Position Manager of futsal field no 1

Interviewer

Name Mubarak Ahmed

Eltayeb Ali

Interview
Date Place
23/9/2017 International Park

Time
12:12 PM To 1:00
Interview purpose
To know how the current system is work

Summery :
Problems in booking fields.
Loss of confidence of some users.

33
 Future University
Final Project
Interview No.2
Interviewee
Name Khalid Ahmed

Position Manager of Gym

Interviewer

Name Mubarak Ahmed

Eltayeb Ali

Interview
Date Place
23/9/2017 Afara Moil.
Time
07:30 to 9:00 P.M.

Interview purpose
Problems between the users and the manager.
Summary
Not knowing all the players.
The players are not committed to be the specific time.

Future University

34
 Final Project
Interview No.3

Interviewee
Name Mustafa Mohammed
Position Manager of Zumba...

Interviewer
Name Mubarak Ahmed
Eltayeb Ali

Interview
Date Place
10/9/2017 Roomba
Time
06:00 to 6:30 P.M.

Interview Purpose
To know how user know location of Futsal
Summary
From advertising.

35
3.3.3 Description of current system:
The development of new system involves several different but related activities
usually include planning, analysis, design, implementation and Maintenance.
System analysis is the process of studying procedures in order to identify it goal and
purpose to create system that will achieve them in efficient way. The site of the futsal
field that the system created for located in International Park, Africa Street.
Futsal field information system is a manual system that is used manual way to store
or save, retrieves and represents data. The process of storing the data of futsal field either
customers information or the data of futsal field done by writing information on
papers, , then update , delete or represent data and reserve or booking to customers by the
same process done on step of storing reservation .

3.3.4 Model of current system:

3.3.4.1 Usecase diagram:

Usecase diagram at its simplest is a representation of a user's interaction with the

system that shows the relationship between the user and the different use cases in which
the user is involved. A use case diagram can identify the different types of users of a
system and the different use cases and will often be accompanied by other types of
diagrams as well.

36
 Figure (3.5 ) usecase diagram

3.3.4.1.2 Use case documentation:

Use case number 01

Use case name Request reservation

Overview The user request anew booking .

Actor User

Precondition Need to know location of the field ,go to the

field and meet the manager.
Scenario flow Go to the field , meet manager , determine the
appointment and leave a deposit with manager.
Alternative flow Looking for an alternative date.

Post condition The request is recorded.

Figure (3.6 ) Use case Documentation

37
 Use case number 02

Use case name Check time

Overview The manager check out time is available or not.

Actors Manager

Precondition Need to check the schedule of the futsal .

Scenario flow Check the time and give approval.

Alternative flow Give an alternative time or search for another

site .
Post condition Change the daily schedule of the field .

Figure (3.7 ) Use case Documentation

Use case number 03

Use case name Reservation

Overview The manager will confirm the booking

Actors Manager

Precondition Need time review

Scenario flow Check the time ,approval ,write user evidence

and receive the deposit .
Alternative flow There is an alternative warranty from the user

Figure (3.8 ) Use case Documentation

3.3.4.2 Sequence diagram

38
 Figure (3.9 ) Sequence diagram

3.3.4.3 Activity diagram

39
Figure (3.10 ) Activity diagram

40
3.3.5 Requirement Specification:

3.3.5.1 Functional requirement:

The official definition of a function requirements is that it essentially specifies
something the system should do.
Typically functional requirements will specify a behavior or function.

● User shall be able to registers and login in mobile application.

● User shall be able to view app and search available time.
● User shall be able to select data and time.
● User shall be able to view booking.
● Manger shall be able to view request, acceptant decline.
● Manger shall be able to manage field (update, delete and add).
● Manger shall be able to view report.
● Owner field shall be able to manage fields.

3.3.5.2 Non Functional requirement:

The definition for a non-functional requirement is that in it essentially specifies
how the system should behave and that it is a constraint upon the systems
behavior .One could also think of non-functional requirements as quality
attributes for of a system
● Speed of reservation and retrieving information.
● Availability of each report customers
● Security of files for users.

41
3.3.6 Model of new system:

3.3.6.1 Use case diagram:

Figure (3.11)sequence diagram

Use case documentation:

Use case number 01

Use case name Register

Overview User register in system

Actors User

Scenario flow user write the name and last name and password
and Gmail to register in application
Post condition user take username and password to open
application in any time ,

Figure (3.12 ) Use case Documentation

42
Use case number 02

Use case name Login

Overview User login in system

Actors User

Pre-condition Register in application

Scenario flow User write the username and password to login

in application.
Post condition User login in application

Figure ( 3.13 ) Use case Documentation

Use case number 03

Use case name Search available time and field .

Overview User search available time and field.

Actors User

Pre-condition Login in application.

Scenario flow User search time and field to booking,

Alternative flow Change time and place.

Post condition User find the good time and place

Figure (3.14 ) Use case Documentation

43
Use case number 04

Use case name Select date select date and time.

Overview User select date and time.

Actors User

Pre-condition User found the good time and place

Scenario flow User after the find good need to select time and.

Alternative flow If user is cannot time available can be change

the time and place.
Post condition User booking field

Figure ( 3.15) Use case Documentation

Use case number 05

Use case name Booking

Overview Booking the field

Actors User

Pre-condition Select date and time

Scenario flow Booking the futsal field ,gem and Zumba and
send request for the manger and push deposit from
the reservation and can be view the reserve or
update or delete or .
Post condition Reservation.

Figure (3.16 ) Use case Documentation

Use case number 06

44
Use case name View request.

Overview View request for user send.

Actors Field owner

Pre-condition User send request ,

Scenario flow Owner field view request

Figure ( 3.16 ) Use case Documentation

Use case number 07

Use case name Accept and decline.

Overview Accept or decline reservation.

Actors Owner field

Pre-condition User send request

Scenario flow Owner view all the request from request.

Post condition User send deposit.

Figure (3.17 ) Use case Documentation

Use case number O8

Use case name View report

45
Overview Report for all field

Actors Owner field

Scenario flow Owner need report for know any thin about
filed
Figure (3.18 ) Use case Documentation

Use case number 09

Use case name Accept and decline

Overview Manager field c accept or decline the owner

field.
Actors Manger

Pre-condition Owner field send request.

Scenario flow Manager field c accept or decline the owner

field to add field .
Post condition Owner add field.

Figure ( 3.19 ) Use case Documentation

Use case number 10

Use case name Manger field

Overview Manger can be add or view or update.

46
 Actors Manager

Scenario flow Manager add or view or update field

Post condition Added or view field.

Figure (3. 20 ) Use case Documentation

Use case number 11

Use case name Approve

Overview Manger need approve.

Actors Manager

Pre-condition Manager send request

Figure (3.21) Use case Documentation

Use case number 12

Use case name View reports

Overview Report for the field and owner field

Actors Manager

Scenario flow Manager need reports for the field or owners

Figure (3.22) Use case Documentation

3.3.7.2 Sequence diagram

Sequence diagrams describe interactions among classes in terms of an exchange of

messages over time. They're also called event diagrams. A sequence diagram is a good

way to visualize and validate various runtime scenarios. These can help to predict how a

47
system will behave and to discover responsibilities a class may need to have in the

process of modeling a new system.

Figure (3.23) Sequence diagram

3.3.7.3 Class diagram:

A class diagram is an illustration of the relationships and source code dependencies
among classes in the Unified Modeling Language (UML). In this context, a class defines
the methods and variables in an object, which is a specific entity in a program or the unit
of code representing that entity. Class diagrams are useful in all forms of object-oriented
programming (OOP). The concept is several years old but has been refined as OOP
modeling paradigms have evolved.

48
Figure (3.24) Class diagram:

49
3.3.7.5 Database diagram:

Figure (3.25) database diagram

50
 Chapter Four

Research design
4.1 Introduction:

Software design is the process by which an agent creates a specification of

a software artifact, intended to accomplish goals, using a set of primitive components and
subject to constraints. Software design may refer to either "all the activity involved in
conceptualizing, framing, implementing, commissioning, and ultimately modifying
complex systems or the activity following requirements specification and
before programming, as ... [in] a stylized software engineering process.

Software design usually involves problem solving and planning

a software solution. This includes both a low-level component and algorithm design and a
high-level, architecture design.

(Software design, 2018)

51
4.2 Data flow diagram

4.2.1 Data flow diagram level 0:

4.2.2 Data flow diagram level 1:

Figure (4.2) data flow diagram

4.3 User interface design:

52
 Figer (4.3) user interface

The above figure is the login screen and is the most important screen for the user and
consists of a username and password and login registration.

Figer (4.4) user interface

The above figure is the map screen that it benefit the user to identify places

53
 Figer (4.5) user interface

The figure above show my activity screen that identify the time of user login, logout,
date, deposit and the ability of canceling reservation .

4.4 Users of application:

This application can be used by all groups of society interested in sports for both
genders, to increase the category used for this application we designed to allocate
gyms(Zomba) for females that have recently spread in the community.

54
4.5 Database design:

Figure (4.6) Database design

55
4.5.1 Data dictionary:

Booking
Field name Field Type Field width Field description
Id Number 11 Primary Key,The order number
for the order of bookings to be
added and given a special
number automatically, in order
to facilitate reference
user_ id Number 11 Index ,Table In order to save the
number of users who request a
reservation based on the futsals
table, it is easy to know who is
requesting the reservation
futsal_ id Number 11 Index,A table for keeping and
arranging according to the Futsal
that was booked is based on the
table of futsal
status_ id Number 11 A field showing the status of the
booking, such as 1 if reservation
request, 2 is currently busy, 5 is
logged out.
check_ in Data 10 Field to save the date of booking
that adding by the user
check_ in_ time Time 5 The reservation time saved field
is selected by the user.
Presence Number 2 Field the number of attendees
Bill Double Double Field to specify the reservation
width value to be paid
created_ at Time And Date 18 A field created automatically at
each modification within the

56
 table helps arrange reservations
by date created.
updated_ at Time And Date 18 A field created automatically at
each modification within the
table helps arrange reservations
by the date of the last
modification.
Table (4.1) data dictionary

Users:
Field name Field Type Field Field description
Width
Id Number 11 Primary Key,A field is created automatically
at each new add-on process that makes sorting
and sorting easier
Fname VarChar 191 The field to save the names of the members
entered in the registration process.
Username VarChar 50 Field Save the nickname Members entered in
the registration process.
Contact VarChar 10 The field saves the phone numbers of the
members entered in the registration process.
Email VarChar 191 The field to save the email members involved
in the registration process.
Password VarChar 191 Password save field for members entered in
the registration process, after encryption
process
role_ id Number 11 Field to save the status of registered members,
such as 1 from the supervisory and
management team, and the normal status of
members is 2.
remember_ Token VarChar 191 Optional field to prolong login and session

57
 status within the server.
status_ id Number 11 A field that determines the status of members
whether they are allowed to book or not.
update_ at Time And 18 A field created automatically at each
Date modification within the table helps arrange
reservations by date created.
created_ at Time And 18 A field created automatically at each
Date modification within the table helps arrange
reservations by the date of the last
modification.
Table (4.2) data dictionary

Category
Field name Field Type Field Field description
Width
Id Number 11 Primary Key,A number is automatically
created to facilitate the saving and sorting of
a category
Category Name VarChar 50 Field, store Category names
Description VarChar 191 Field, stores a simplified explanation about
the category
Table (4.3) data dictionary

Futsal info :
Field name Field Type Field Field description
Width
category_ id Number 11 Index, A field, used to link the table of topics with
the Futsals table, makes it easy to sort by type
(Futsal Or Gym).
futsal_ Number 11 Field, saves the numbers of Gym & Futsal and

58
number enters the manually at each new addition.
futsal_ name VarChar 191 Field, which stores the names of Futsal & Gym at
each add. It is the name that appears to users and
manager.
futsal_ VarChar 191 Field, which stores the geographical titles of the
address Gym & Futsal,
It shows the user, helps to know the address.
futsal_ city VarChar 30 Field, which stores the geographical name of each
of the Futsal Gym.
Latitude Double Double Field, which stores Latitude, for Gps in map.
Longitude Double Double Field, which stores Longitude, for Gps in map.
Price AM Double Double Field, which is used to store the price in the
morning time for each Futsal & Gym
Price PM Double Double Field, which is used to store the price in the evening
time for each Futsal & Gym
Note Futsal VarChar 191 Field, which is used to store information and notes
for each Futsal Gym.
Number VarChar 10 Field, which is used to store information and pay-
Deposit per-Futsal Gym.
user_ id Number 11 Field, which is used to store the manager number
for each Futsal Gym.
status_ id Number 11 Field, which is used to store the booking status for
each Futsal Gym.

Table (4.4) data dictionary

Amenities:
Field name Field Type Field Width Field description

59
Id Number(10) 11 Primary Key
Amenities name VarChar 191
Price Double Double
Quantity Number 11
Table (4.10) data dictionary
Records:
Field name Field Type Field Width Field description
Id Number 11 Primary Key, field,
that is automatically
generated in each
validation process is
performed by the
Owner
User_ ID Number 11 Index, Field, which is
used to store the owner
number that he has
confirmed.
Futsal id Number 11 Index, The field, which
is used to store the
Futsal & Gym number
for which payment has
been verified.
Status id Number 11 Index, The field, which
is used to store the
Futsal & Gym status
for which payment has
been confirmed.
Table (4.5) data dictionary

4.6 Implementation:

60
 Figure (4.7) home Activity

<ion-header>

61
<ion-navbar class="card-header-ios-light" color="primary">
<button ion-button menuToggle>
<ion-icon class="ion-icon" name="apps"></ion-icon>
</button>
<ion-title>Home</ion-title>

<ion-buttons end>
<button ion-button icon-only >
<ion-icon class="ion-icon" name="alert"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>

<ion-content class="card-background-page">
<div padding>
<ion-segment>
<ion-segment-button value="" (click)="MapFutsal()">
<ion-icon name="md-map"></ion-icon>
</ion-segment-button>

<ion-segment-button value="" (click)="Find()">

<ion-icon name="md-search"></ion-icon>
</ion-segment-button>

<ion-segment-button value="" (click)="mySetting()">

<ion-icon name="md-settings"></ion-icon>
</ion-segment-button>
<ion-segment-button value="" (click)="myReserve()">
<ion-icon name="md-cart"></ion-icon>
</ion-segment-button>

62
</ion-segment>
</div>
<ion-card *ngFor="let one of cat" (click)="clickCat(one.id,one.price)">
<imgsrc="assets/img/bk.jpg"/>
<div class="card-title"> {{one.category_name}}</div>
<div class="card-subtitle , text2">{{one.description}}</div>
<h2><ion-icon name="md-alarm" >Show</ion-icon></h2>
</ion-card>
</ion-content>

TypeScript Code:
ionViewDidEnter(){
this.futprov.getCategory().subscribe(cat=>{
});
this.futprov.getCategory().subscribe(cat => {
this.cat = cat.data;
});
}
clickCat(id, price){
this.navCtrl.push(CatFutsalPage, {param1: id, param2: price});

myReserve(){
if(localStorage.getItem("token") == "" || localStorage.getItem("token") == null){
this.navCtrl.push(LoginPage);

}else{
this.navCtrl.push(MyreservePage);

63
 }

mySetting(){
if(localStorage.getItem("token") == "" || localStorage.getItem("token") == null){
this.navCtrl.push(LoginPage);

}else{
this.navCtrl.push(SettingsPage);
}

Find(){
this.navCtrl.push(SearchPage);
}

MapFutsal(){
this.navCtrl.push(SearchFutsalPage);
}

64
Figure (4.8) login activity

65
<ion-content padding class="ion-content">
<p text-center><imgsrc="assets/img/person.png" width="120px"></p>
<ion-item class="ion-item">
<ion-label floating>Username</ion-label>
<ion-input type="text" [(ngModel)]="username" required></ion-input>
</ion-item>

<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" [(ngModel)]="password" required></ion-input>
</ion-item>

<button ion-button block (click)="clickSubmit()">Sign In</button>

<button ion-button block color="primary2" (click)="clickRegister()">Sign Up</button>
</ion-content>

TypeScript Code:
clickSubmit(){
if (this.username == null || this.password == null){
returnthis.showError();
}
this.futsalProv.userLogin(this.username, this.password).subscribe(log => {
console.log(this.log = log);

if(this.log.status == true){
localStorage.setItem("token", this.log.key);
this.navCtrl.setRoot(HomePage, this.log.key);
}else if(this.log.status == false){ this.showAlert();
}
});

66
 }
showAlert() {
let alert = this.alertCtrl.create({
title: 'Error!!',
subTitle: 'You have enter invalid username or password',
buttons: ['OK']
});
alert.present();
}
showError() {
let alert = this.alertCtrl.create({
title: 'waring !!',
subTitle: 'All field are Require! ',
buttons: ['OK']
});
alert.present();
}

clickRegister(){
this.navCtrl.push(RegisterPage)}
Backend Code :
public function login(Request $request)
{
$this->validate($request, [
'username' => 'required|max:20',
'password' => 'required|max:25'
]);

$data = $request->only('username', 'password');

try {
if (!$token = JWTAuth::attempt($data)) {

67
return response()->json(['status' => false]);
}
} catch (JWTException $e) {
return response()->json(['error' => $e], 500);
}

return response()->json(['key' => $token, 'status' => true]);

}

68
Figure (4.9) registration Activity

69
<ion-content padding color="primary">
<ion-item>
<ion-label floating>Full Name</ion-label>
<ion-input type="text" [(ngModel)]="fname" maxlength=20 minlength=3></ion-input>
</ion-item>

<ion-item>
<ion-label floating>Contact</ion-label>
<ion-input type="text" [(ngModel)]="contact" maxlength=10 minlength=10></ion-
input>
</ion-item>

<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="email" [(ngModel)]="email" maxlength=30></ion-input>
</ion-item>

<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text" [(ngModel)]="username" maxlength=12 minlength=5></ion-
input>
</ion-item>

<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" [(ngModel)]="password" maxlength=30
minlength=6></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Repeat Password</ion-label>
<ion-input type="password" [(ngModel)]="repeat_password" maxlength=30

70
minlength="6"></ion-input>
</ion-item>
<button ion-button block color="primary2" (click)="clickSubmit()">Submit</button>
</ion-content>
BackEnd Code
public function signme(Request $request)
{
$this->validate($request, [
'fname' => 'required|max:40',
'email' => 'required|max:80',
'username' => 'required|max:12',
'password' => 'required|max:20',
'repeat_password' => 'required|same:password',
'contact' => 'required|max:10'
]);
$user = new User;
$user->fname = $request->input('fname');
// $user->lname = $request->input('lname');
$user->email = $request->input('email');
$user->username = $request->input('username');
$user->password = bcrypt($request->input('repeat_password'));
$user->contact = $request->input('contact');
$user->role_id = 2;
$user->status_id = 1;
$user->save();

if ($user) {
return response()->json(['status' => true]);
}
return response()->json(['status' => false]);
}

71
Figure (4.10) Activity list

72
<ion-content padding>
<div *ngIf="activity">
<ion-card *ngFor="let act of activity.activity">
<ion-card-header>
<h2 text-center><strong>{{act.room.category.category_name}}</strong></h2>
</ion-card-header>
<ion-card-content>
<ion-item>Check-in time: {{act.check_in_time}}</ion-item>
<ion-item>Check-in date: {{act.check_in}}</ion-item>
<ion-item>Check-out date: {{act.check_out}}</ion-item>
<ion-item>Price: {{act.bill}}</ion-item>
<ion-item>Date: {{act.created_at}}</ion-item>
<ion-item>Bill: {{act.bill}}</ion-item>
<button ion-button block color="D" (click)="clickCancel(act.id)">Cancel</button>
</ion-card-content>
</ion-card>
</div>
</ion-content>

TypeScript Code:

ionViewDidEnter() {
this.futsalProv.getActivity().subscribe(activity => {
console.log(this.activity = activity);
});
}
showConfirm(id) { let confirm = this.alertCtrl.create({
title: 'Are you sure to cancel?',
message: 'Futsal Football Finder(FFF) whill miss you!',
buttons: [
{

73
text: 'Disagree',
console.log('Disagree clicked');
handler: () => {
} },
{ text: 'Agree', handler: () => {
this.futsalProv.deleteActivity(id).subscribe(del => {
console.log(this.del = del);
}) } } ] });
confirm.present();
}
clickCancel(id){
this.showConfirm(id);
console.log(id);
}
public function index()
{
if(! $user = JWTAuth::parseToken()->authenticate()){
return response()->json(['message'=> 'invaild user']);
}
$activity = Booking::where('user_id', $user->id)->orderBy('id','desc')->get();
foreach($activity as $vity){ $vity->room = $vity->room->category; }return response()-
>json(['activity'=> $activity]);
}

74
Figure (4.11) map Activity

75
<ion-header>
<ion-navbar color="primary">
<ion-title> {{futsal.futsal_city}}</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<ion-card padding>
<h3>Futsal name : {{futsal.futsal_name}}</h3>
<p>City : {{futsal.futsal_city}}</p>
<p>Notes : {{futsal.noteFutsal}}</p>
<p>Address : {{futsal.futsal_address}}</p>
<p>a Deposit : {{futsal.aDeposit}}</p>

<div #map id="map"></div>

</ion-card>
</ion-content>

TypeScript Code:

@ViewChild('map') mapContainer: ElementRef;

map: any;
futsal = {} as Futsal;
price :any;

constructor(public navCtrl: NavController, public navParams:

NavParams,publicgeolocation: Geolocation) {
this.futsal = navParams.get('futsal');
}

ionViewDidLoad(){

76
this.displayGoogleMap();
console.log("All Data :",this.futsal);
}

displayGoogleMap() {
letlatLng = new google.maps.LatLng(this.futsal.latitude, this.futsal.longitude);
letmapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);

let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
icon: { url : 'assets/img/map.png' },
position: latLng
});
this.addInfoWindow(marker, this.futsal.futsal_name +'\n '+
this.futsal.futsal_city + ' \n ' +
this.futsal.futsal_address + " \n "+
this.futsal.noteFutsal + '\n '+' \n'+' <button ion-button ion-button icon-right
(click)="Book(futsal.room_number)">Booking </button>' );
}

addInfoWindow(marker, content){
letinfoWindow = new google.maps.InfoWindow({
content: content

77
 });
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(this.map, marker);
});
}

Book (id){
if(localStorage.getItem("token") == "" || localStorage.getItem("token") == null){
this.navCtrl.push(LoginPage);

}else{
this.navCtrl.push(BookinfoPage, {futsal: id, futsal2: this.price});
}
}}

78
Figure (4.12) map Activity

79
<ion-content padding>
<div #map id="map"></div>
</ion-content>

Typescript code :
export class AllFutsalPage {
@ViewChild('map') mapContainer: ElementRef;
map: any;
futsalList = [];

constructor(public navCtrl: NavController, public navParams: NavParams, public

geolocation: Geolocation, public http: Http) {
this.futsalList = navParams.get('futsalList');
console.log(this.futsalList);
}

ionViewDidLoad() {
this.displayGoogleMap();
this.getMarkers();
}

displayGoogleMap() {
letlatLng = new google.maps.LatLng(15.5500457, 32.5537455);

letmapOptions = {
center: latLng,
disableDefaultUI: true,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP

80
 };
this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);
}

getMarkers() {
for (let _i = 0; _i<this.futsalList.length; _i++) {
if(_i> 0 )
this.addMarkersToMap(this.futsalList[_i]);
}
}

addMarkersToMap(futsal) {
let position = new google.maps.LatLng(futsal.latitude, futsal.longitude);
letfutsalMarker = new google.maps.Marker({position: position, title: futsal.name,

icon: { url : 'assets/img/map.png' }});

futsalMarker.setMap(this.map);
}

81
Figure (4.13)search activity

82
<ion-content padding>
<ion-input type="text" placeholder="Search Futsal..."
(input)="searchMaps($event)"></ion-input>

<ion-list *ngIf="!isfiltered">
<ion-item *ngFor="let futsal of futsalList" (click)="itemTapped($event, futsal)">
<h2><ion-icon ios="ios-pin" md="md-pin"></ion-icon>{{futsal.futsal_name}}</h2>
<p>State name: {{futsal.futsal_city}}</p>
<p>Address: {{futsal.futsal_address}}</p>
</ion-item>
</ion-list>

<ion-list *ngIf="isfiltered">
<ion-item *ngFor="let futsal of filteredFutsal" (click)="itemTapped($event, futsal)">
<h2><ion-icon ios="ios-pin" md="md-pin"></ion-icon>{{futsal.futsal_name}}</h2>
<p>State name : {{futsal.futsal_city}}</p>
<p>Address : {{futsal.futsal_address}}</p>
<p>Notes : {{futsal.noteFutsal}}</p>
</ion-item>
</ion-list>
</ion-content>

TypeScript Code:

futsalList = [];
filteredFutsal = [];
isfiltered: boolean ;

constructor(private http:Http, public navCtrl: NavController, public navParams:

NavParams, futsalPRov : ConationProvider) {

83
this.isfiltered = false;
// this.http.get('assets/data/museum.json')
this.http.get(futsalPRov.UrlMaps)
.map(res =>res.json())
.subscribe(data => {
this.futsalList = data.futsal;
},
err => console.log("error is "+err), // error
() =>console.log('read Futsal data Complete '+ this.futsalList) // complete
);
}

searchMaps(event) {
// if(event.target.value.length> 2) {
// this.movieService.searchMovies(event.target.value).subscribe(
// data => {
if(event.target.value.length> 2) {
letfilteredJson = this.futsalList.filter(function (row) {
if (row.futsal_city.indexOf(event.target.value) != -1) {
return true
} else {
return false;
}
});
this.isfiltered = true;
this.filteredFutsal = filteredJson;
}
}

itemTapped(event, futsal) {
this.navCtrl.push(FutsalFuDetailPage, {

84
futsal:futsal
});
}

allMuseumMap(){
this.navCtrl.push(AllFutsalPage, {
futsalList: this.futsalList
});
}

85
 Figure (4.14) contact activity

<ion-header>
86
<ion-navbar color="primary">
<ion-title text-md-center>Contact</ion-title>

<button ion-button menuToggle>

<ion-icon class="ion-icon" name="apps"></ion-icon>
</button>

<ion-buttons end>
<button ion-button icon-only >
<ion-icon class="ion-icon" name="alert"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>

</ion-header>

<ion-content padding>

<ion-card class="ion-card">
<h1>Futsal & Gym Finder System </h1>
<br>
<hr>
<p>
Phone Number : 0924104253
</p>
<br>
<hr>
<p>

87
<a href="http://Futsal.sd" > Futsal WebSite</a>
</p>
</ion-card>

<ion-card class="ion-card">
<h2 align-items-center>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>

</h2>
</ion-card>

</ion-content>

88
Figure (4.15) side menu activity

89
<ion-menu type="push" [content]="content" >
<ion-header type="push" side="rigth">
<ion-toolbar type="push" side="rigth" color="primary">
<ion-title>Futsal&Gym</ion-title>
</ion-toolbar>
</ion-header>
<ion-content type="push" side="rigth" class="content">
<ion-list class="content">
<button class="content" menuClose icon-right ion-item *ngFor="let p of pages"
(click)="openPage(p)">
<ion-icon name="{{p.icon}}"></ion-icon>
&nbsp; {{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --
>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

TypeScript Code:
constructor(public platform: Platform,
publicstatusBar: StatusBar,
publicsplashScreen: SplashScreen) {
this.initializeApp(); this.pages = [
{ title: 'Home', component: HomePage, icon: "md-home"},
{ title: 'Login/SignUp', component: LoginPage, icon: "md-person" },
{ title: 'Contact', component: ContactsPage,icon:"md-mail"},
{ title: 'LogOut.', component: LogoutPage ,icon: "md-log-out" },
];

90
Figure (4.16) Futsal and Gym list

91
<ion-card *ngFor="let one of rooms.data">
<ion-card-header text-center>
<div item-start *ngIf="one.futsal_number< 4">
<imgsrc="assets/img/bk.jpg">
</div>
<div item-start *ngIf="one.futsal_number>= 4">
<imgsrc="assets/img/Gm.jpg">
</div>
<h2>Futsal: {{one.futsal_number}}</h2>
<h2>Futsal: {{one.futsal_name}}</h2>
<h2>Futsal: {{one.futsal_address}}</h2>
<h2>Deposit No. : {{one.numberDeposit}}</h2>
<p>A Deposit
<ion-icon ios="ios-usd" md="md-usd"></ion-icon>
{{one.aDeposit}}
</p>
<p>
<ion-icon name="usd"> Price AM: {{one.priceAM}}</ion-icon>
</p>

<p>
<ion-icon name="usd"> Price PM: {{one.pricePM}}</ion-icon>
</p>

</ion-card-header>
<ion-card-content text-center>

<rating [(ngModel)]="rate" readOnly="false" max="5" emptyStarIconName="star-

outline"

92
halfStarIconName="star-half" starIconName="star" nullable="false"
(ngModelChange)="onModelChange($event)">
</rating>

<button ion-button round color="primary"

(click)="clickBook(one.futsal_number)">Booking</button>
</ion-card-content>
</ion-card>
</div>

<div *ngIf="rooms">
<ion-list *ngFor="let one of rooms.data">
<ion-item-sliding>
<ion-item>
<ion-avatar item-start *ngIf="one.futsal_number< 4">
<imgsrc="assets/img/bk.jpg">
</ion-avatar>

<ion-avatar item-start *ngIf="one.futsal_number>= 4">

<imgsrc="assets/img/Gm.jpg">
</ion-avatar>
<h2>{{one.futsal_name}}</h2>
</ion-item>
<ion-item-options side="left">
<button ion-button color="primary">
<ion-icon name="text"></ion-icon>
Text
</button>

<button ion-button color="primary" (click)="clickBook(one.futsal_number)">

<ion-icon name="book"></ion-icon>

93
BooKing
</button>

<button ion-button color="secondary">

<ion-icon name="call"></ion-icon>
Deposit No. : {{one.numberDeposit}}
</button>
</ion-item-options>
<ion-item-options side="right">
<button ion-button color="primary">
<ion-icon name="mail"></ion-icon>
Address : {{one.futsal_address}}
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</div>

TypeScript Code:

clickBook(id) {
if (localStorage.getItem("token") == "" || localStorage.getItem("token") == null) {
this.showAlert();
this.navCtrl.push(LoginPage);

} else {
this.presentLoading();
this.navCtrl.push(BookinfoPage, {param1: id});
}

94
presentLoading() {
let loader = this.loadingCtrl.create({
content: "Please wait...",
duration: 1000
});
loader.present();
}

onModelChange($event) {
this.Rating();
}

Backend Code:

public function index()

{
$cats = Category::all();
return response()->json(['data'=>$cats]);
}

95
Figure (4.17) booking information activity

96
<ion-content padding>
<ion-item>
<ion-label text>Check-in Time</ion-label>
<ion-input type="time" [(ngModel)]="check_in_time"></ion-input>
</ion-item>
<ion-item>
<ion-label text>Check-in</ion-label>
<ion-datetimedisplayFormat="MMM DD, YYYY " [(ngModel)]="check_in"
min="{{min}}"></ion-datetime>
</ion-item>
<ion-item>
<ion-label floating>Attendees No.</ion-label>
<ion-input type="number" [(ngModel)]="presence" maxlength=2 minlength=1
required></ion-input></ion-item>
<p text-center>
<button ion-button (click)="clickCalculate()">Confirm</button>
</p>
<h3 text-center>List of amenities</h3>
<ion-list>
<ion-item-sliding *ngFor="let one of amenities">
<ion-item>
<ion-avatar item-start>
<imgsrc="assets/img/person.png">
</ion-avatar>
<h2>{{one.amenities_name}}</h2>
<h4>{{one.quantity}}</h4>
</ion-item>
<ion-item-options side="left">
<button ion-button color="primary">
<ion-icon name="text"></ion-icon>
More

97
</button>
<button ion-button color="secondary">
<ion-icon name="call"></ion-icon>
Less
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<ion-list>
<ion-item>
</ion-item>
</ion-list>
</ion-content>

Typescript Code:
this.FutsalProv.getAmenity().subscribe(amenities => {
this.amenities = amenities.data;
});
this.FutsalProv.getFutsl2(this.futsal_id).subscribe(futsal => {
console.log(this.futsal = futsal);
for (let i of this.futsal.data) {
console.log(this.pAM = i.priceAM);
console.log(this.pPM = i.pricePM);
console.log("dee=: ",this.aDeposit = i.aDeposit)

}
});

}
clickCalculate() {

98
console.log(this.check_in);
if (this.presence == null || this.check_in == null || this.check_in_time == null) {
returnthis.showErr();
}

console.log("hor: ",this.check_in_time);

if (this.check_in_time<= "15:00" ) {
this.price = this.pAM;
console.log("in if 1"+this.price);
this.sendDep = bilDeposit(this.price,this.aDeposit);
console.log("SendDep in if 1",this.sendDep);

}
else if (this.check_in_time>= "16:00") {
this.price = this.pPM;
console.log("in if 2: "+this.price);
this.sendDep = bilDeposit(this.price,this.aDeposit);
console.log("SendDep in if 2",this.sendDep);
}
functionbilDeposit(bill,price){
return bill - price;
}

this.navCtrl.push(BillPage,
{
param1: this.check_in,
param2: this.sendDep,
param3: this.days,

99
 param4: this.price,
param5: this.futsal_id,
param6: this.check_in_time,
param7: this.presence,
param8: this.aDeposit
});
}

100
Figure (4.18) Bill information activity

101
public function book(Request $request)
{
if (!$user = JWTAuth::parseToken()->authenticate()) {
return response()->json(['status' =>false]);
}
$this->validate($request, [
'check_in' =>'required|max:25',
'presence' =>'required|max:25',
'bill' =>'required|max:25',
'check_in_time' =>'required|max:25',
"futsal_id" =>'required|max:10'
]);

$time = DB::table('bookings')->whereTime('check_in_time',
'=', $request->check_in_time)
->whereDate('check_in', '=', $request->check_in)-
>count();
if ($time == 0) {
$book = new Booking;
$book->user_id= $user->id;
$book->status_id= 1 or 2;
$book->futsal_id= $request->input('futsal_id');
$book->check_in_time= $request->input('check_in_time');
$book->check_in= $request->input('check_in');
$book->presence = $request->input('presence');
$book->bill = $request->input('bill');
$book->save();
return response()->json(['status' =>true]);
} elseif($time <= 1) {
return response()->json(['status' =>false]);

102
Front End Code :

<ion-content padding>
<h4 text-center>Fusal No: {{futsal}}</h4>

<ion-list>
<ion-item>Check-in Time: {{check_in_time}}</ion-item>
<ion-item>Check-in: {{check_in}}</ion-item>
</ion-list>

<ion-list>
<ion-item>presence: {{presence}}</ion-item>
<ion-item>Price: {{aDeposit}}</ion-item>
<ion-item>Total Payment: {{bill}}</ion-item>
<ion-item>you most send {{Adposit}}</ion-item>
</ion-list>

<ion-footer>
<ion-toolbar>
<button ion-button block (click)="clickSubmit()">SUBMIT</button>
</ion-toolbar>
</ion-footer>

</ion-content>
TypeScript Code :
clickSubmit() {

if (this.days>2) {

103
return this.errDays();
}
this.FutsalProv.userBook(this.check_in, this.futsal_id, this.bill, this.presence,
this.check_in_time).subscribe(booking => {
console.log(this.booking= booking);

if (this.booking.status== true) {
this.bookSuccess();
this.navCtrl.setRoot(HomePage);
} else {
this.BookFailed();
}
});

104
 Figure (4.19) successful booking
bookSuccess() {
let alert = this.alertCtrl.create({
title: 'Booking Success!!',

105
subTitle: 'Thank you for choosing us, hope to see you here.',
buttons: ['OK']
});
alert.present();
}

106
Figure (4.20) search activity

107
<ion-content class="card-background-page">

<ion-card>

<ion-grid>
<ion-card>
<ion-row>
<ion-col col-sm-6>
<ion-item>
<ion-label>
<ion-icon color="primary" name="map">City</ion-icon>
</ion-label>
<ion-select [(ngModel)]="city">
<ion-option value="khartoum">Khartoum</ion-option>
<ion-option value="bhri">Bhri</ion-option>
<ion-option value="omdurman">Omdurman</ion-option>

</ion-select>
</ion-item>
</ion-col>

<ion-col col-sm-6>
<ion-item>
<ion-label placeholder>
<ion-icon color="primary" ios="logo-usd" md="logo-usd"></ion-icon>
</ion-label>
<ion-input type="text" [(ngModel)]="price"></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-card>

108
</ion-grid>

<ion-grid>
<ion-card>
<ion-row>
<ion-col col-sm-6>
<ion-item>
<ion-label text>
<ion-icon color="primary" name="md-clock">From</ion-icon>
</ion-label>
<ion-datetimedisplayFormat="MMM DD, YYYY" [(ngModel)]="date1"
min="{{min}}"></ion-datetime>
</ion-item>
</ion-col>

<ion-col col-sm-6>
<ion-item>
<ion-label text>
<ion-icon color="primary" name="md-time">To</ion-icon>
</ion-label>
<ion-datetimedisplayFormat="MMM DD, YYYY" [(ngModel)]="date2"
min="{{min}}"></ion-datetime>
</ion-item>
</ion-col>
</ion-row>
</ion-card>
</ion-grid>

109
<ion-grid>
<ion-card>
<ion-row>
<ion-col col-md-6>
<ion-item>
<ion-label>
<ion-icon color="primary" name="alarm">Start Time</ion-icon>
</ion-label>
<ion-datetimedisplayFormat="h:mm A" pickerFormat="h mm A"
[(ngModel)]="time"></ion-datetime>
</ion-item>
</ion-col>
</ion-row>
</ion-card>
</ion-grid>

<ion-card>
<ion-row>
<ion-col style="text-align: center">
<button class="button" color="#FFFF" ion-button icon-only align-items-center
(click)="clickSubmit()">
<ion-icon class="ion-icon" name="search"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-card>

</ion-card>
<!--Sowes-->
<ion-card>
<div class="h5">

110
<ion-label text-center color="primary"><h5 color="primary2">Offers and
Discounts</h5></ion-label>

</div>

<div *ngIf="Result">
<ion-list *ngFor="let rooms of rooms">
<ion-item-sliding>
<ion-item>
<ion-avatar item-start *ngIf="rooms.room_number< 4">
<imgsrc="assets/img/bk.jpg">
</ion-avatar>

<ion-avatar item-start *ngIf="rooms.room_number>= 4">

<imgsrc="assets/img/Gm.jpg">
</ion-avatar>
<h2>{{rooms.futsal_name}}</h2>
</ion-item>
<ion-item-options side="left">
<button ion-button color="primary"
(click)="clickBook(rooms.room_number)">
<ion-icon name="text"></ion-icon>
Booking
</button>
<button ion-button color="secondary">
<ion-icon name="call"></ion-icon>
Deposit No. : {{rooms.numberDeposit}}
</button>
</ion-item-options>
<ion-item-options side="right">
<button ion-button color="primary">

111
 <ion-icon name="mail"></ion-icon>
Address : {{rooms.futsal_address}}
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</div>
</ion-card>
<!--End Sowh-->
</ion-content>

Figure (4.21) home page

<title>Fast Failed Finder</title>

<link rel="stylesheet" type="text/css"
href="{{URL::to('user/style.css')}}">
</head>
<body>
<header>
<h2>Futsal Field & Gym Finder System </h2>
</header>

112
<aside>
<h2>Price Start from</h2>
<div id="tbl">
<table>
<tr>
<td>Fields 8 AM to 4 PM</td>
<td>250.0</td>&nbsp; <td> SDG</td>
</tr>
<br>
<tr>
<td>Fields 5 PM to 12 AM</td>

<td>250.0</td>&nbsp; <td> SDG</td>

</tr>

<tr>
<td>Gym per day Start from</td>
<td>100.0</td>&nbsp;<td> SDG</td>
</tr>
</table>
</div>

@if(Auth::check())
@if(Auth::user()->role_id== 2)
<div id="main">
<a href="{{route('customer_logout')}}">LOG OUT</a>
</div>
@endif

113
 @else
<div id="main">
<a href="{{route('register')}}">REGISTER</a>
<a href="{{route('login')}}">SIGN IN</a>
<div class="clearer"></div>
</div>
@endif

</aside>

<section>
<nav>
<a href="{{url('/')}}" class="active">DASHBOARD</a>
{{--<a href="{{route('rooms')}}" >VIEW Fields</a>--}}
{{--<a href="{{route('tariff')}}" >TARIFF
RATES</a>--}}

@if(Auth::check())
<a href="{{route('customer_activity')}}">MY ACTIVITY</a>
@endif

</nav>

<imgsrc="{{URL::to('image/2.png')}}" alt="Backgound Image">

</section>

<div class="clearer"></div>
</body>
</html>

114
 Figure (4.22) reservation page

<div id="page-wrapper">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="text-center">Manager List of Request</h3>
</div>
<div class="panel-body">
@if(Session::has('cancel'))
<div class="alert alert-info alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">&times;</a>
<strong>Information!</strong>{{Session::get('cancel')}}
</div>
@endif

@if(Session::has('paid'))
<div class="alert alert-success alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">&times;</a>
<strong>Information!</strong>{{Session::get('paid')}}
</div>
@endif
<table class="table">
<thead>
115
<tr>
<th>Name</th>
<th>Fields Type</th>
<th>Fields #</th>
<th>Status</th>
<th>Date of Transaction</th>
<th>Actions</th>

</tr>
</thead>

<tbody>
@foreach($futsalsas $room)
<tr>
<td>{{$room->user->fname}} {{$room->user->lname}}</td>
<td>{{$room->room->category->category_name}}</td>
<td>{{$room->room_id}}</td>
<td>
@if($room->status_id== 1)
<strong>Reserve</strong>
@elseif($room->status_id== 5)
<strong>Paid</strong>
@elseif($room->status_id== 2)
<strong>Check-In</strong>
@endif
</td>
<td>{{$room->created_at->toDayDateTimeString()}}</td>
<td>
<a href="{{route('approve', ['id'=>$room->id])}}"
class="btnbtn-success btn-xs">Approve</a>
<a href="{{route('cancel', ['id'=>$room->id])}}"
class="btnbtn-danger btn-xs{{$room->status_id!= 1 ?

116
'disabled' : ''}}">Cancel</a>
<a href="{{route('info', ['id'=>$room->id])}}"
class="btnbtn-info btn-xs">View</a>

</td>
</tr>

@endforeach

</tbody>
</table>
</div>
</div>

</div>

</div>

</div>

$futsals= Booking::where('status_id', 1)->

// where('user_id', $user->id)->
orwhere('status_id', 5)->
orwhere('status_id', 2)->
orderBy('id', 'desc')->get();
// print $futsals;
return view('admin.main', compact('futsals'));

117
 Figure (4.23) view reservation page

<div id="page-wrapper">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="text-center">View Reservation Details</h3>
</div>
<div class="panel-body">

@if(Session::has('yes'))
<div class="alert alert-info alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Information!</strong>{{Session::get('yes')}}
</div>
@endif

<div class="row">
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item">Name: {{$find->user->fname}} </li>
<li class="list-group-item">contact: {{$find->user->contact}}</li>
<li class="list-group-item">Fields Type:{{$find->room->category->category_name}}

118
</li>
<li class="list-group-item">{{$find->room->category->category_name}} No#: {{$find-
>futsal_id}}</li>
<li class="list-group-item">The Presence : {{$find->presence - $find->room->category-
>person}} </li>
</ul>

<table class="table table-striped">

<thead>
<tr>
<th>Amenity Name</th>
<th> Start Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
@foreach($amenities as $am)
<tr>
<td>{{$am->amenity->amenities_name}}</td>
<td>{{$am->amenity->price}}</td>
<td>{{$am->quantity}}</td>

</tr>
@endforeach
</tbody>
</table>

</div>

119
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item"><h3>Bill : </h3> {{$find->bill}}</li>
<li class="list-group-item">Check-in-time: {{$find->check_in_time}}</li>
<li class="list-group-item">Check-in-date: {{$find->check_in}}</li>
</ul>
</div>

</div>

<div class="row">
<div class="col-md-6">
<h3 class="text-center">Proof of Payment</h3>
@if($find->proof)
@if($find->proof->image == "0")
<h3 class="text-center">Walk-In</h3>
<h3 class="text-center">CASH</h3>
@else
<center><imgsrc="data:image/png;base64,{{$find->proof->image}}"></center>

@endif
@endif
</div>
<div class="col-md-6">
<a href="{{route('admin_set_check_in',['id'=> $find->id])}}" class="btnbtn-success btn-
block {{$find->status_id == 2 ? 'disabled': ''}}" >CHECK-IN</a>
<a href="{{route('admin_set_check_out',['id'=> $find->id])}}" class="btnbtn-danger btn-
block {{$find->status_id != 2 ? 'disabled': ''}}" >CHECK-OUT</a>
</div>
</div>

120
</div>
</div>

</div>

</div>

</div>

Figure (4.24) category page

<thead>
<tr>
<th>Image</th>
<th>Fields Type</th>
<th>Available</th>
<th>Reserved</th>
<th>Occupied</th>

</tr>
</thead>

121
<tbody>
@foreach($cats as $cat)
<tr>
<td><imgsrc="{{URL::to('image/'.$cat->id)}}.png" width="80px" alt="Image
Here"></td>
<td>{{$cat->category_name}}</td>
<td>
<strong>{{$cat->numAvailable($cat->id)}}</strong>
</td>
<td>
<strong>
@foreach($cat->aweew($cat->id) as $aw)
{{$aw->single}}
@endforeach
</strong>

</td>
<td>
<strong>
@foreach($cat->aweew2($cat->id) as $aw)
{{$aw->single}}
@endforeach
</strong>

</td>

</tr>
@endforeach
</tbody>
</table>
</div>

122
 Figure (4.25) create new category page

<div class="panel panel-default">

<div class="panel-heading">

</div>
<div class="panel-body">
<div class="col-md-6">
@if(Session::has('info'))
<div class="alert alert-info alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Information!</strong>{{Session::get('info')}}
</div>
@endif
<h3>Create Fields Type</h3>
<form action="{{route('admin_create_check')}}" method="POST">
<div class="form-group">
<label>Fields Type</label>

123
<input type="text" name="room_type" class="form-control" required="">
</div>
<div class="form-group">
<label>Description</label>
<textarea name="room_desc" class="form-control" required=""></textarea>
</div>

<button type="submit" class="btnbtn-primary">Submit</button>

{{csrf_field()}}
</form>
</div>

<div class="col-md-6">
@if(Session::has('info2'))
<div class="alert alert-info alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Information!</strong>{{Session::get('info2')}}
</div>
@endif
<h3>New Fields</h3>
<form action="{{route('admin_room_in_cat')}}" method="POST">
<div class="form-group">
<select name="room_type" class="form-control" required="">
@foreach($cats as $cat)
<option value="{{$cat->id}}">{{$cat->category_name}}</option>
@endforeach
</select>
</div>

<div class="row">
<div class="col-sm-4" style="background-color:lavender;"><label>Fields

124
Number</label>
<input type="number" name="futsal_number" class="form-control" required="">
</div></div>

<div style="background-color:lavender;">
<label>Fields Name</label>
<input type="text" name="futsal_name" class="form-control" required="">
</div>

<div style="background-color:lavender;">
<label>Fields Address</label>
<input type="text" name="futsal_address" class="form-control" required="">
</div>

<div style="background-color:lavender;">
<label>Fields City</label>
<input type="text" name="futsal_city" class="form-control" required="">
</div>

{{--//star--}}

<div class="row">
<div class="col-sm-4" style="background-color:lavender;"><label>Latitude</label>
<input type="text" name="latitude" class="form-control" required=""></div>
<div class="col-sm-4" style="background-color:lavenderblush;"><div>
<label>Longitude</label>
<input type="text" name="longitude" class="form-control" required="">
</div></div>
</div>
{{--//End--}}

125
<div class="row">
<div class="col-sm-4" style="background-color:lavender;"><label>Price AM</label>
<input type="text" name="PriceAM" class="form-control" required="" maxlength=3
minlength=2></div>
<div class="col-sm-4" style="background-color:lavenderblush;"><div>
<label>Price PM</label>
<input type="text" name="PricePM" class="form-control" required="" axlength=3
minlength=2>
</div></div>
</div>
<div style="background-color:lavender;">
<label>Futsal Noutes</label>
<input type="text" name="Nouts" class="form-control" required="">
</div>
<div style="background-color:lavender;">
<label>Futsal Deposit Number</label>
<input type="text" name="deposit" class="form-control" required="" axlength=10
minlength=10>
</div>
<div style="background-color:lavender;">
<label>A deposit</label>
<input type="text" name="adeposit" class="form-control" required="" axlength=4
minlength=1>
</div>
{{Form::hidden('user_id',Auth::user()->id)}}
<button type="submit" class="btnbtn-primary">Submit</button>
{{csrf_field()}}
</form>
</div>
</div>
</div>

126
</div>
</div>

public function admin_rooms_create()

{
$cats = Category::all();
return view('admin.room.create', compact('cats'));
}

Figure (4.26) animate page

public function admin_amenities()

{
$cat = Amenity::all();
return view('admin.report.amenities', compact('cat'));
}

127
 Figure (4.27) add new animate page

public function admin_add_amenities(Request $request)

{

$ams= new Amenity;

$ams->amenities_name= $request['am_name'];
$ams->price = $request['am_price'];
$ams->quantity = $request['am_quantity'];
$ams->save();

return redirect()->back()->with('yes', 'New Customer has

been added successfully!!');

Figure (4.27) List of category

128
public function admin_rate()
{
$cat = Category::all();
return view('admin.report.rate', compact('cat'));
}

Figure (4.28) add all category page

public function admin_rate_update(Request $request, $id)

{
$this->validate($request, [
'category_name' =>'required|max:50',
'description' =>'required|max:190',
]);

$update = Category::where('id', $id)-

>update(['category_name' =>$request['category_name'],
'description' =>$request['description'],]);
if ($update) {
return redirect()->back()->with('update', 'Category Type has
been updated successfully!');

129
 }
}

Figure (4.29) list futsal page

id="printHotel"></i></button>
<table class="table">
<thead>
<tr>
<td>Fields Name</td>
<td>Fields Address</td>
<td>Futsal Deposit Number</td>
<td>A deposit</td>
<td>Price AM</td>
<td>Price PM</td>
<td>Owner ID</td>
</tr>
</thead>

<tbody>
@foreach($cats as $ca)
<tr>
<td>{{$ca->futsal_name}}</td>
<td>{{$ca->futsal_address}}</td>

130
<td>{{$ca->numberDeposit}}</td>
<td>{{$ca->aDeposit}}</td>
<td>{{$ca->numberDeposit}}</td>
<td>{{$ca->priceAM}}</td>
<td>{{$ca->pricePM}}</td>
<td>{{$ca->user_id}}</td>
<td>
<form action="{{route('admin_futsal_delete', ['id'=> $ca->id])}}" method="get"
id="formDel{{$ca->id}}">
<button type="button" value="{{$ca->id}}" class="btnbtn-danger btn-xsdelMe"><i
class="glyphiconglyphicon-trash"></i></button>
<a href="{{route('admin_futsal_edit', ['id'=> $ca->id])}}" class="btnbtn-info btn-xs"><i
class="glyphiconglyphicon-pencil"></i></a>
</form>

</td>
</tr>
@endforeach
</tbody>
</table>

131
 Figure (4.30) edit Futsal page

<div class="panel panel-default">

<div class="panel-body">
<div class="col-md-6 col-md-offset-3">
@if(Session::has('update'))
<div class="alert alert-info alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Information!</strong>{{Session::get('update')}}
</div>
@endif

<h3>Edit {{$fut->futsal_name}}</h3>
<form action="{{route('admin_futsal_update', ['id'=> $find->id])}}" method="POST"
id="updateForm"><div class="form-group">

132
<select name="room_type" class="form-control" required="">
@foreach($cats as $cat)
<option value="{{$cat->id}}">{{$cat->category_name}}</option>
@endforeach
</select>
</div>

<div class="row">
<div class="col-sm-4" style="background-color:lavender;"><label>Fields
Number</label>
<input type="number" name="futsal_number" class="form-control" required=""
value="{{$fut->futsal_number}}">
</div>
</div>

<div style="background-color:lavender;">
<label>Fields Name</label>
<input type="text" name="futsal_name" class="form-control" required=""
value="{{$fut->futsal_name}}">
</div>

<div style="background-color:lavender;">
<label>Fields Address</label>
<input type="text" name="futsal_address" class="form-control" required=""
value="{{$fut->futsal_address}}">
</div>

<div style="background-color:lavender;">
<label>Fields City</label>
<input type="text" name="futsal_city" class="form-control"
required="" {{$fut->futsal_city}}>

133
</div>

{{--//star--}}

<div class="row">
<div class="col-sm-4" style="background-color:lavender;"><label>Latitude</label>
<input type="text" name="latitude" class="form-control"
required="" {{$fut->latitude}}></div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div>
<label>Longitude</label>
<input type="text" name="longitude" class="form-control"
required="" {{$fut->longitude}}>
</div>
</div>
</div>
{{--//End--}}

<div class="row">
<div class="col-sm-4" style="background-color:lavender;"><label>Price AM</label>
<input type="text" name="PriceAM" class="form-control" required="" maxlength=3
minlength=2 {{$fut->PriceAM}}></div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div>
<label>Price PM</label>
<input type="text" name="PricePM" class="form-control" required="" axlength=3
minlength=2 {{$fut->PricePM}}>
</div>
</div>
</div>

134
<div style="background-color:lavender;">
<label>Futsal Noutes</label>
<input type="text" name="Nouts" class="form-control" required="" {{$fut->Nouts}}>
</div>

<div style="background-color:lavender;">
<label>Futsal Deposit Number</label>
<input type="text" name="deposit" class="form-control" required="" axlength=10
minlength=10 {{$fut->deposit}}>
</div>

<div style="background-color:lavender;">
<label>A deposit</label>
<input type="text" name="adeposit" class="form-control" required="" axlength=4
minlength=1 {{$fut->adeposit}}>
</div>

{{Form::hidden('user_id',Auth::user()->id)}}
<button type="submit" class="btnbtn-primary">Submit</button>
{{csrf_field()}}
</form>

135
 Figure (4.31) create new offer page

/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
Offer::create($request->all());
return redirect()->back()->with('info', 'New Offer added successfully!');
}

Figure (4.32) home page

136
public function admin_reports()
{
$cat = Booking::where('status_id', 1)->get();
return view('admin.report.reports', compact('cat'));
}

Figure (4.33)report check in page

public function admin_checkin()

{
$cat = Booking::where('status_id', 2)->get();
return view('admin.report.checkin', compact('cat'));
}

Figure (4.34) report check out page

public function admin_checkout()

{
$cat = Booking::where('status_id', 3)->get();
return view('admin.report.checkout', compact('cat'));
}

137
 Figure (4.35) report check in page

public function admin_cancel()

{
$cat = Booking::where('status_id', 4)->get();
return view('admin.report.cancel', compact('cat'));
}

Figure (4.36) manager list Admin page

public function admin_users()

{
$users = User::where('role_id', 1)->get();
return view('admin.users.users', compact('users'));
}

138
 Figure (4.37) manager list customers page

public function admin_customers()

{
$users = User::where('role_id', 2)->get();
return view('admin.users.customer', compact('users'));
}

public function admin_new_user(Request $request)

{
$this->validate($request, [
'fname' =>'required|max:60',
'contact' =>'required|max:10|unique:users',
'email' =>'required|email|max:80|unique:users',
'username' =>'required|max:25|unique:users',
'password' =>'required|max:30'
]);

$user = new User;

139
$user->fname= $request['fname'];
$user->contact = $request['contact'];
$user->email = $request['email'];
$user->username = $request['username'];
$user->role_id= 1;
$user->status_id= 1;
$user->password = bcrypt($request['password']);
$user->save();

return redirect()->back()->with('yes', 'New Customer has

been added successfully!!');

Figure (4.38) Admin setting page

public function admin_password_change(Request $request)

{
$this->validate($request, [
'password' =>'required',
'new_password' =>'required|max:12',
'retype_password' =>'required|same:new_password'

140
]);

if (Auth::attempt(['password' =>$request['password']])) {
$change = User::where('id', Auth::id())->update(['password'
=>bcrypt($request['retype_password'])]);
if ($change) {
return redirect()->back()->with('change', 'Password has been
change successfully!!');
}
} else {
return redirect()->back()->with('no', 'Old Password Do not
match!');
}
}

Figure (4.39)Admin profile page

public function admin_profile()

{
return view('admin.setting.profile');
}

Test login screeen :

141
Figure (4.40) login activity

142
Test login screeen
Test cases Data System Output Test result
Username and Username: Ahmed Show main activity Pass
password correct Password :123456
Username correct Username: Ahmed Error you have Pass
and password Password :123 enter invalid
incorrect username or
password .
Incorrect username Username: Ali Error you have Pass
and password Password :123456 enter invalid
correct username or
password .
Incorrect username Username: Ali Error you have Pass
and password Password :123 enter invalid
incorrect username or
password .
Table (4.7) test screen login

143
 Chapter Five

Conclusion

5.1 Conclusion:
This project is a good example of the importance of technology and how it can be
used in various aspects of our lives.
As a result of interviewing several managers of Futsal fields and Gym centers, there is a
real problem in reservation and its related issues such as special offers and promotions.
In this project, all these problems have been solved by using the proposed mobile
application. Throughout this project many techniques are used to produce successful
product for the market.

5.2 Recommendation:
1_In-order to continue making the project better, it’s recommended to use Native Hyper
application technology instead of Hyper application .
_2 Include all Futsal fields and Gym centers.
_3To use E-Payment method instead of mobile credit transfer

144
 6.1Appendix

6.1.1 User manual :

Figure (6.1) home activity

Name Description
Home Home page of app in which the user can
view futsal field and gym and navigate to
maps, search, setting and order.

145
 Figer (6.2) login activity

Name Description
Login Login page user enter his or her username
and password and click sign in to enter app

146
 Figure (6.3) activity list

Name Description
My activity list My activity list page view for user his
check-in time and check-in date and his
check-out date and his price date of activity
and bill.

147
 Figure(6.4) Futsal details
Name Description
Maps Map page showing for the user the futsal
name and notes also showing address in
text and map form.

148
 Figure (6.5) map activity

Name Description
Maps Enlarged map showing the location of
futsal fields and gyms around Khartoum

149
 Figure (6.6) search activity
Name Description
Futsal&gym Futsal&gym page showing a search bar by
which the user can use to search for field or
gym name or address.

150
 Figure(6.7) contact activity
Name Description
Contact Contact page showing the number of the
field or gym manager number

151
 Figure (6.8)side menu activity
Name Description
Slide menu Slide menu showing navigation buttons
such as home, login/signup, contact, logout

152
 Figure (6.9) futsal list activity

Name Description
Futsal list Futsal list page showing all futsal
fieldswith description such as futsal
number, futsal name, deposit no, deposit
paid, price at morning and prices at
afternoon.

153
 Figure (6.10) futsal list activity

Name Description
Futsal list Futsal list page showing all futsal gyms
with description such as futsal number,
futsal name, deposit no, deposit paid, price
at morning and prices at afternoon.

154
 Figure (6.11) booking information
Name Description
Booking information Booking information page allowing user to
choose check in time, check in date,
number of attendees and confirm his
booking.

155
 Figure (6.12) bill information

Name Description
Bill information Bill information page showing futsal
number, check-in time check in date,
presence, price, total payment, and amount
left to send.

156
 Figure (6.13) booking success
Name Description
Home Home page showing dialogue approving
booking success!

157
 Figure (6.14) search activity

Name description
Search Search page user search for city, price, time
from, time till, and starting time.

158
 Figure (6.15) registration form

Name description
Registration form Registration form page in which the user
enter his or her information such as full
name, contact, email, username, password,
repeat password.

Document :

159
160
Code::
<div class="panel panel-default">
<div class="panel-heading">

</div>
<div class="panel-body">
<div class="col-md-6">
@if(Session::has('info'))
<div class="alert alert-info alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Information!</strong>{{Session::get('info')}}
</div>
@endif
<h3>Create Fields Type</h3>
<form action="{{route('admin_create_check')}}" method="POST">
<div class="form-group">
<label>Fields Type</label>
<input type="text" name="room_type" class="form-control" required="">
</div>
<div class="form-group">
<label>Description</label>
<textarea name="room_desc" class="form-control" required=""></textarea>
</div>

<button type="submit" class="btnbtn-primary">Submit</button>

{{csrf_field()}}
</form>
</div>

<div class="col-md-6">
@if(Session::has('info2'))

161
<div class="alert alert-info alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Information!</strong>{{Session::get('info2')}}
</div>
@endif
<h3>New Fields</h3>
<form action="{{route('admin_room_in_cat')}}" method="POST">
<div class="form-group">
<select name="room_type" class="form-control" required="">
@foreach($cats as $cat)
<option value="{{$cat->id}}">{{$cat->category_name}}</option>
@endforeach
</select>
</div>

<div class="row">
<div class="col-sm-4" style="background-color:lavender;"><label>Fields
Number</label>
<input type="number" name="futsal_number" class="form-control" required="">
</div></div>

<div style="background-color:lavender;">
<label>Fields Name</label>
<input type="text" name="futsal_name" class="form-control" required="">
</div>

<div style="background-color:lavender;">
<label>Fields Address</label>
<input type="text" name="futsal_address" class="form-control" required="">
</div>

162
<div style="background-color:lavender;">
<label>Fields City</label>
<input type="text" name="futsal_city" class="form-control" required="">
</div>

{{--//star--}}

<div class="row">
<div class="col-sm-4" style="background-color:lavender;"><label>Latitude</label>
<input type="text" name="latitude" class="form-control" required=""></div>
<div class="col-sm-4" style="background-color:lavenderblush;"><div>
<label>Longitude</label>
<input type="text" name="longitude" class="form-control" required="">
</div></div>
</div>
{{--//End--}}

<div class="row">
<div class="col-sm-4" style="background-color:lavender;"><label>Price AM</label>
<input type="text" name="PriceAM" class="form-control" required="" maxlength=3
minlength=2></div>
<div class="col-sm-4" style="background-color:lavenderblush;"><div>
<label>Price PM</label>
<input type="text" name="PricePM" class="form-control" required="" axlength=3
minlength=2>
</div></div>
</div>
<div style="background-color:lavender;">
<label>Futsal Noutes</label>
<input type="text" name="Nouts" class="form-control" required="">
</div>

163
<div style="background-color:lavender;">
<label>Futsal Deposit Number</label>
<input type="text" name="deposit" class="form-control" required="" axlength=10
minlength=10>
</div>
<div style="background-color:lavender;">
<label>A deposit</label>
<input type="text" name="adeposit" class="form-control" required="" axlength=4
minlength=1>
</div>
{{Form::hidden('user_id',Auth::user()->id)}}
<button type="submit" class="btnbtn-primary">Submit</button>
{{csrf_field()}}
</form>
</div>
</div>
</div>
</div>
</div>

public function admin_rooms_create()

{
$cats = Category::all();

<div class="panel panel-default">

<div class="panel-body">
<div class="col-md-6 col-md-offset-3">
@if(Session::has('update'))

164
<div class="alert alert-info alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Information!</strong>{{Session::get('update')}}
</div>
@endif

<h3>Edit {{$fut->futsal_name}}</h3>
<form action="{{route('admin_futsal_update', ['id'=> $find->id])}}" method="POST"
id="updateForm"><div class="form-group">
<select name="room_type" class="form-control" required="">
@foreach($cats as $cat)
<option value="{{$cat->id}}">{{$cat->category_name}}</option>
@endforeach
</select>
</div>

<div class="row">
<div class="col-sm-4" style="background-color:lavender;"><label>Fields
Number</label>
<input type="number" name="futsal_number" class="form-control" required=""
value="{{$fut->futsal_number}}">
</div>
</div>

<div style="background-color:lavender;">
<label>Fields Name</label>
<input type="text" name="futsal_name" class="form-control" required=""
value="{{$fut->futsal_name}}">
</div>

<div style="background-color:lavender;">

165
<label>Fields Address</label>
<input type="text" name="futsal_address" class="form-control" required=""
value="{{$fut->futsal_address}}">
</div>

<div style="background-color:lavender;">
<label>Fields City</label>
<input type="text" name="futsal_city" class="form-control"
required="" {{$fut->futsal_city}}>
</div>

{{--//star--}}

<div class="row">
<div class="col-sm-4" style="background-color:lavender;"><label>Latitude</label>
<input type="text" name="latitude" class="form-control"
required="" {{$fut->latitude}}></div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div>
<label>Longitude</label>
<input type="text" name="longitude" class="form-control"
required="" {{$fut->longitude}}>
</div>
</div>
</div>
{{--//End--}}

<div class="row">
<div class="col-sm-4" style="background-color:lavender;"><label>Price AM</label>
<input type="text" name="PriceAM" class="form-control" required="" maxlength=3
minlength=2 {{$fut->PriceAM}}></div>

166
<div class="col-sm-4" style="background-color:lavenderblush;">
<div>
<label>Price PM</label>
<input type="text" name="PricePM" class="form-control" required="" axlength=3
minlength=2 {{$fut->PricePM}}>
</div>
</div>
</div>

<div style="background-color:lavender;">
<label>Futsal Noutes</label>
<input type="text" name="Nouts" class="form-control" required="" {{$fut->Nouts}}>
</div>

<div style="background-color:lavender;">
<label>Futsal Deposit Number</label>
<input type="text" name="deposit" class="form-control" required="" axlength=10
minlength=10 {{$fut->deposit}}>
</div>

<div style="background-color:lavender;">
<label>A deposit</label>
<input type="text" name="adeposit" class="form-control" required="" axlength=4
minlength=1 {{$fut->adeposit}}>
</div>

{{Form::hidden('user_id',Auth::user()->id)}}
<button type="submit" class="btnbtn-primary">Submit</button>
{{csrf_field()}}

167
</form>

<ion-header>
<ion-navbarclass="card-header-ios-light" color="primary">
<buttonion-buttonmenuToggle>
<ion-icon
name="menu"></ion-icon>
</button>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>

<ion-contentclass="card-background-page">

<ion-card *ngFor="let one of cat" (click)="clickCat(one.id,one.price)">

<imgsrc="assets/img/bk.jpg"/>
<divclass="card-title"> {{one.category_name}}</div>
<divclass="card-subtitle">{{one.description}}</div>
<br>
<ion-badge><ion-iconname="alarm">show</ion-icon></ion-badge>
</ion-card>
</ion-content>

<ion-footer>
<ion-toolbarcolor="primary">
<ion-buttonsstart>
<buttonion-buttonicon-onlycolor="royal" (click)="myReserve()">
Activity
<ion-iconname="md-cart"></ion-icon>
</button>

168
</ion-buttons>

<ion-buttonsend (click)="mySetting()">
<buttonion-buttonicon-rightcolor="royal">
Settings
<ion-iconname="md-settings"></ion-icon>
</button>
</ion-buttons>

<ion-buttonsend (click)="Find()">
<buttonion-buttonicon-rightcolor="royal">
Find
<ion-iconios="ios-search" md="md-search"></ion-icon>
</button>
</ion-buttons>

<ion-buttonsend (click)="MapFutsal()">
<buttonion-buttonicon-rightcolor="royal">
<ion-iconios="ios-map" md="md-map"></ion-icon>
</button>
</ion-buttons>

</ion-toolbar>
</ion-footer>

TypeScript
import{ SettingsPage }from'../settings/settings';
import{ ConationProvider }from'../../providers/conation/conation';
import{ Component }from'@angular/core';

169
import{ NavController, NavParams }from'ionic-angular';
import{ CatFutsalPage }from'../cat-futsal/cat-futsal';
import{ LoginPage }from'../login/login';
import{ MyreservePage }from'../myreserve/myreserve';
import{SearchFutsalPage}from"../search-futsal/search-futsal";
import{SearchPage}from"../search/search";
@Component({
selector:'page-home',
templateUrl:'home.html'
})
exportclassHomePage{

cat :any;
hotel :any;

constructor(publicnavCtrl:NavController,publicfutprov:ConationProvider,publicnavPara
ms:NavParams){

this.hotel ="futsal";
}

ionViewDidEnter(){
this.futprov.getCategory().subscribe(cat=>{

});

this.futprov.getCategory().subscribe(cat=>{

console.log(this.cat = cat.data);
});

170
}

clickCat(id,price){
this.navCtrl.push(CatFutsalPage,{param1: id, param2: price});

logout(){
if(localStorage.getItem("token") ==""|| localStorage.getItem("token") ==null){
this.navCtrl.push(LoginPage);

}else{
localStorage.setItem('token','');
this.navCtrl.setRoot(LoginPage);
}

myReserve(){
if(localStorage.getItem("token") ==""|| localStorage.getItem("token") ==null){
this.navCtrl.push(LoginPage);

}else{
this.navCtrl.push(MyreservePage);
}

mySetting(){
if(localStorage.getItem("token") ==""|| localStorage.getItem("token") ==null){
this.navCtrl.push(LoginPage);

171
}else{
this.navCtrl.push(SettingsPage);
}

Find(){
this.navCtrl.push(SearchPage);
}

MapFutsal(){
this.navCtrl.push(SearchFutsalPage);
}

<ion-content class="card-background-page">

<ion-card>

<ion-grid>
<ion-card>
<ion-row>
<ion-col col-sm-6>
<ion-item>
<ion-label>

172
<ion-icon color="primary" name="map">City</ion-icon>
</ion-label>
<ion-select [(ngModel)]="city">
<ion-option value="khartoum">Khartoum</ion-option>
<ion-option value="bhri">Bhri</ion-option>
<ion-option value="omdurman">Omdurman</ion-option>

</ion-select>
</ion-item>
</ion-col>

<ion-col col-sm-6>
<ion-item>
<ion-label placeholder>
<ion-icon color="primary" ios="logo-usd" md="logo-usd"></ion-icon>
</ion-label>
<ion-input type="text" [(ngModel)]="price"></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-card>
</ion-grid>

<ion-grid>
<ion-card>
<ion-row>
<ion-col col-sm-6>
<ion-item>
<ion-label text>
<ion-icon color="primary" name="md-clock">From</ion-icon>

173
</ion-label>
<ion-datetimedisplayFormat="MMM DD, YYYY" [(ngModel)]="date1"
min="{{min}}"></ion-datetime>
</ion-item>
</ion-col>

<ion-col col-sm-6>
<ion-item>
<ion-label text>
<ion-icon color="primary" name="md-time">To</ion-icon>
</ion-label>
<ion-datetimedisplayFormat="MMM DD, YYYY" [(ngModel)]="date2"
min="{{min}}"></ion-datetime>
</ion-item>
</ion-col>
</ion-row>
</ion-card>
</ion-grid>

<ion-grid>
<ion-card>
<ion-row>
<ion-col col-md-6>
<ion-item>
<ion-label>
<ion-icon color="primary" name="alarm">Start Time</ion-icon>
</ion-label>
<ion-datetimedisplayFormat="h:mm A" pickerFormat="h mm A"
[(ngModel)]="time"></ion-datetime>

174
</ion-item>
</ion-col>
</ion-row>
</ion-card>
</ion-grid>

<ion-card>
<ion-row>
<ion-col style="text-align: center">
<button class="button" color="#FFFF" ion-button icon-only align-items-center
(click)="clickSubmit()">
<ion-icon class="ion-icon" name="search"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-card>

</ion-card>
<!--Sowes-->
<ion-card>
<div class="h5">
<ion-label text-center color="primary"><h5 color="primary2">Offers and
Discounts</h5></ion-label>

</div>

<div *ngIf="Result">
<ion-list *ngFor="let rooms of rooms">
<ion-item-sliding>
<ion-item>
<ion-avatar item-start *ngIf="rooms.room_number< 4">

175
<imgsrc="assets/img/bk.jpg">
</ion-avatar>

<ion-avatar item-start *ngIf="rooms.room_number>= 4">

<imgsrc="assets/img/Gm.jpg">
</ion-avatar>
<h2>{{rooms.futsal_name}}</h2>
</ion-item>
<ion-item-options side="left">
<button ion-button color="primary" (click)="clickBook(rooms.room_number)">
<ion-icon name="text"></ion-icon>
Booking
</button>
<button ion-button color="secondary">
<ion-icon name="call"></ion-icon>
Deposit No. : {{rooms.numberDeposit}}
</button>
</ion-item-options>
<ion-item-options side="right">
<button ion-button color="primary">
<ion-icon name="mail"></ion-icon>
Address : {{rooms.futsal_address}}
</button>

: Reference
1. Gamma, E., 1994. Design Patterns: Elements of Reusable Object-Oriented
Software. Addison-Wesley.

2. C., R., 2008. Clean Code: A Handbook of Agile Software Craftsmanship (Robert
C. Martin Series). Prentice Hall.

176
3. Apache Cordova - Wikipedia. 2018. Apache Cordova - Wikipedia. [ONLINE]
Available at: https://en.wikipedia.org/wiki/Apache_Cordova. [Accessed 28 March
2017].

4. TypeScript - Wikipedia. 2018. TypeScript - Wikipedia. [ONLINE] Available at:

https://en.wikipedia.org/wiki/TypeScript. [Accessed 28 March 2018].

5. MySQL — Wikipédia. 2018. MySQL — Wikipédia. [ONLINE] Available at:

https://en.wikipedia.org/wiki/MySQL. [Accessed 28 March 2017].

6. Taylor Otwell. 2018. Laravel - The PHP Framework For Web Artisans.
[ONLINE] Available at: https://laravel.com/. [Accessed 28 March 2018].

7. Ionic. 2018. Build Amazing Native Apps and Progressive Web Apps with Ionic
Framework and Angular. [ONLINE] Available at: https://ionicframework.com/.
[Accessed 28 March 2017].

177