You are on page 1of 95

Ministry of Higher Education.

Higher Technological Institute 10th of Ramadan.

Computer Science Department.

Smart Broker

Prepared by

Ahmed Salah Abd elfadiel 42019019


Eslam Abd AL Rahman Ramadan 42019045
Khaled Abd elfataah Ismail 42019074
Nassar Mohamed Nassar 42019199

Supervised by: Prof. Wael Abd AL Rahman.

2023
I
ACKNOWLEDGEMENT

We want to thank all who supported us through this graduation project and was
source of inspiration for us in gaining more experience.

In addition, we would like to express our deep gratitude to all our professors in
HTI, who guided us through this Project. We respect the work which done every
day by engineers in our department thanks for them all.

In addition, we want to thank Prof. Wael Abd Al Rahman to provide us with a


good information and guide us to the right way. We want to thank all those who
supported us in this project who gives us the Questionnaires materials that help us
to complete this project and thanks to all doctors for their great supervising efforts
to make us gain the most experience and efforts to make us understand the meaning
of this graduation project.

II
ABSTRACT

The graduation project is a cornerstone of the academic life, and professional career, of many
students, and so whatever time is invested in such a project is truly worthwhile. Furthermore,
students’ extending themselves beyond their limitations in this endeavor is essential to
enhancing the concepts, they learned in previous courses. However, managing these
poses real challenges for them, their supervisors, and the members of the graduation project
committee. The purpose of this project is to improve the ability of all these parties to manage
the projects through the use of software that will allow students to organize their tasks and
deadlines with minimum effort, enable supervisors to easily keep track of students and them
progress, and ultimately permit graduation project committee members to monitor all
processes taking place to ensure that all is well.

Graduation projects are projects that challenge seniors to showcase one's academic knowledge
about what is learned throughout university. These projects are extremely important because
they show that the seniors are prepared for the future out in the workforce.

Nowadays, these days, it is difficult to find comfortable housing that meets the person’s
requirements. Therefore, the journey of searching for a comfortable home requires many
steps and difficulties, whether for the seller or the buyer. Therefore, we wanted the
graduation project to be about real estate in order to provide a place that facilitates the
buyer’s access to suitable housing and communication with the seller with ease.

III
TABLE OF CONTENTS
Content Page NO.
Acknowledgement……………………………………………………………………………… II
Abstract…………………………………………………………………………………………. III
Table of Figures………………………………………………………………………………… V
Table of Tables ………………………………………………………………………………... VI
Chapter One:
Introduction

1. Introduction…………………………………………………………………………. 1
1.1. Problem Definition…………………………………………………………………... 3
1.2. System Analysis……………………………………………………………………... 4
1.3. Agile Model…………………………………………………………………………. 5
1.4. Architecture Pattern…………………………………………………………………. 8
1.5. Use Cases & Sequence Diagrams……………………………………………………. 9
Chapter Two:
Web Design……………………………………………………………………………………. 16
2. angular………………………………………………………………...………. 17
2.1. Website UI…………………………………………………………………………………. 22
Chapter Three:
Back-end Development………………………………………………………………………. 38
3. Back-end Framework (Laravel)………………………………………………………….… 39
3.1. Lifecycle Overview………………………………………………………………….……… 39
Chapter Four:
Database……………………………………………………………………………………… 47
4. Database…………………………………………………………………………………… 48
4.1. Relational Diagrams………………………………………………………………….…… 49

Chapter Five:
API……………………………………………………………………………………………… 53
5. What is API?............................................................................................................................ 54
5.1. What are the types of APIs?.................................................................................................... 54
5.1.1. Libraries and frameworks……………………………………………………….............. 54
5.1.2. Operating systems……………………………………………………………….............. 55

IV
5.1.3. Remote APIs…………………………………………………………………….............. 55

5.1.4. Web APIs……………………………………………………………….….…......55


5.2. Design……………………………………………………………………………….56
5.3. Security……………………………………………………………………………..56
Chapter Six:
Flutter……………………………………………………………………………………….... 58
6. What is Flutter?................................................................................................................59
6.2 What is Components of Flutter?......................................................................................59
6.3 Dart Language…………………......................................................................................59
Conclusion…………………………………………………………………………....…….60
References…………………………………………………………………………….…… 61
Appendix………………………………………………………………………………… 62

V
FIGURES & TABLES
Figure 1 SDLC Phases ....................................................................................................................................... 4

Figure 2 SDLC-Agile Iterations......................................................................................................................... 5

Figure 3 MVC-Architecture ............................................................................................................................... 7

Figure 4 Guest Use case ..................................................................................................................................... 9

Figure 5 user Use Case .................................................................................................................................... 10

Figure 6 owner Use Case ................................................................................................................................. 11

Figure 7 Admin user case ................................................................................................................................ 12

Figure 8 adding property to favorite ................................................................................................................ 13

Figure 9 Request to contact with owner .......................................................................................................... 13

Figure 10 receiving user’s request ................................................................................................................... 14

Figure 11 adding property details .................................................................................................................... 14

Figure 12 login page ........................................................................................................................................ 22

Figure 13 sign in page ...................................................................................................................................... 22

Figure 14 landing-space page (1) ..................................................................................................................... 23

Figure 15 landing-space page (2) ..................................................................................................................... 23

Figure 16 landing-space page (3) ..................................................................................................................... 24

Figure 17 booking page (1) .............................................................................................................................. 24

Figure 18 property details (1) .......................................................................................................................... 25

Figure 19 property details (2) .......................................................................................................................... 25

Figure 20 my estate page ................................................................................................................................. 26

Figure 21 add estate step (1) ............................................................................................................................ 27

Figure 22 add estate step (2) ............................................................................................................................ 27

Figure 23 add estate step (3) ............................................................................................................................ 28

Figure 24 add estate step (4) ............................................................................................................................ 28

Figure 25 favorite page .................................................................................................................................... 29

Figure 26 owner request page .......................................................................................................................... 29


VI
Figure 27 services page (1) .............................................................................................................................. 30

Figure 28 services page (2) .............................................................................................................................. 30

Figure 29 services page (3) .............................................................................................................................. 31

Figure 30 login page ........................................................................................................................................ 31


Figure 31 sign in page ...................................................................................................................................... 32

Figure 32 request page ..................................................................................................................................... 32

Figure 33 add estate step (1) ............................................................................................................................ 33

Figure 34 add estate step (2) ............................................................................................................................ 33

Figure 35 add estate step (3) ............................................................................................................................ 34

Figure 36 add estate step (4) ............................................................................................................................ 34

Figure 37 my estates page ................................................................................................................................ 35

Figure 38 favorite page .................................................................................................................................... 36

Figure 39 property details page........................................................................................................................ 36

Figure 40 client request page ........................................................................................................................... 37

Figure 41 owner request page .......................................................................................................................... 37

Figure 42 schema ............................................................................................................................................. 52


Table of Tables:

Table 1 Quest Scenario……………………………………………………………………………………….10

Table 2 User Scenario ...................................................................................................................................... 11

Table 3 Owner Scenario................................................................................................................................... 12

Table 3 Admin Scenario……………………………………………………………………………………...13

VII
Chapter One
Introduction

1
1. Introduction

Our graduation project website makes it easier for People to buy and sell them property and look for the best
property for them and allows owners to manage them properties on one place.
Guest View:

 The Guest side let him/her first allows the guest to enter the website or the application without
having an account, second search for property using filter without having an account but can’t ask
for deal with owners and can’t add properties to favorites or can’t add his property. The guest can
search on home and booking pages.
Owner view:

 The user when add property for see he/she becomes owner.

 The owner side allow him/her, he could offer his property for sale by complete the 3 steps by
entering the name, the phone number (won’t be shown to other users), location and property type this
the first step, the second step is to add the property details like the number of bed rooms and bath
room single and double bed sofa bed the kinds of furniture like number of air condition, Wi-Fi,
heating TV the third step to add photos the first photo the user add will be the view of property. The
user can add any number of properties and can delete photos.
user view:
 The user side allow him/her to buy properties, add properties to favorite, but he can’t access to client
request, he has an account.
Admin view:

 The admin side allow him/her to control the website. The user can delete properties and users and edit
on the website and application information.

The benefit of our project:

- It is to make it easier for the People to manage their properties.


- Help People to look for properties.
- AI help owners to detect property details.
- Security for users’ information.
- Ease of use

- Usage stability for the website and application.


2
1.1. Problem Definition

• The way the owner will add the property to provide a real information about the property.

• It’s hard for the users to look for a specific property with the details the users want.
• Who can sell properties and who can buy.
• The way the user can communicate with the owner.
• The way the order could be shown to the owner.
• How can anyone have not an account can search for property.

• Suggested Solutions:

The user side allow him/her, he could offer his property for sale by complete the 3 steps by entering
the name, the phone number (won’t be shown to other users), location and property type this the first
step, the second step is to add the property details like the number of bed rooms and bath room single
and double bed sofa bed the kinds of furniture like number of air condition, Wi-Fi, heating TV the
third step to add photos the first photo the user add will be the view of property. The user can add
any number of properties and can delete photos.
• We added a filter for choose the specific details that the user wants on the property like the price, the
size, the property type, the number of bedrooms, the number of bathrooms.
• We suggested that the user can have one account can use it as owner and client at the same time.

• If a client wants to buy a property the client should deal with the owner of the property so we add
different ways like whatsapp, phone call, zoom.

• We add a Request department that shows the Requests that the clients do.

 allows the guest to enter the website or the application without having an account, search for
property using filter without having an account but can’t ask for deal with owners and can’t add
properties to favorites or can’t add his property. The guest can search on home and booking pages.

3
1.2. SYSTEM ANALYSIS

- What is the system analysis?

Systems Analysis and Design is an active field in which analysts repetitively learn new approaches and
different techniques for building the system more effectively and efficiently. The primary objective of systems
analysis and design is to improve organizational systems.
A person who analyzes system is known as analyst. Often systems analysts employed by organization of
businesses to help them improve their system and so became more efficient and for businesses, more
profitable.
- The systems development life cycle (SDLC):

The software development life cycle (SDLC) is a framework defining tasks performed at each step in the
software development process.
SDLC is a structure followed by a development team within the software organization. It consists of a detailed
plan describing how to develop, maintain and replace specific software.

Figure 1 SDLC Phases

4
1.3. Agile MODEL

Agile SDLC model is a combination of iterative and incremental process models with focus on process
adaptability and customer satisfaction by rapid delivery of working software product.
Agile Methods break the product into small incremental builds.

These builds are provided in iterations. Each iteration typically lasts from about one to three weeks. Every
iteration involves cross functional teams working simultaneously on various areas like: -
• Planning

• Requirements Analysis

• Design

• Coding

• Unit Testing

• Acceptance Testing.

At the end of the iteration, a working product is displayed to the customer and important stakeholders.

- What is Agile?

Agile model believes that every project needs to be handled differently and the existing methods need to be
tailored to best suit the project requirements. In Agile, the tasks are divided to time boxes (small time frames)
to deliver specific features for a release. Iterative approach is taken and working software build is delivered
after each iteration.
Each build is incremental in terms of features; the final build holds all the features required by the customer.
Here is a graphical illustration of the Agile Model – The Agile thought process had started early in the software
development and started becoming popular with time due to its flexibility and adaptability. The most popular
Agile methods include Rational Unified Process (1994), Scrum (1995), Crystal Clear, Extreme Programming
(1996), Adaptive Software Development, Feature Driven Development, and Dynamic Systems Development
Method (DSDM) (1995).
These are now collectively referred to as Agile Methodologies, after the Agile Manifesto was published in
2001.

Figure 2 SDLC-Agile Iterations

5
- Agile principles: -

• Individuals and interactions − In Agile development, self-organization and motivation are important, as
are interactions like co-location and pair programming.
• Working software − Demo working software is considered the best means of communication with the
customers to understand their requirements, instead of just depending on documentation.
• Customer collaboration − As the requirements cannot be gathered completely in the beginning of the
project due to various factors, continuous customer interaction is very important to get proper product
requirements
• Responding to change − Agile Development is focused on quick responses to change and continuous
development.
- The advantages of the Agile Model are as follows: -

• Is a very realistic approach to software development.

• Promotes teamwork and cross training.

• Functionality can be developed rapidly and demonstrated.

• Resource requirements are minimum.

• Suitable for fixed or changing requirements

• Delivers early partial working solutions.

• Good model for environments that change steadily.

• Minimal rules, documentation easily employed.

• Enables concurrent development and delivery within an overall planned context.

• Little or no planning required.

• Easy to manage.

• Gives flexibility to developers.

- The disadvantages of the Agile Model are as follows: -

• Not suitable for handling complex dependencies.

• More risk of sustainability, maintainability and extensibility.

• An overall plan, an agile leader and agile PM practice is a must without which it will not work.

• Strict delivery management dictates the scope, functionality to be delivered, and adjustments to meet the

6
deadlines.
• Depends heavily on customer interaction, so if customer is not clear, team can be driven in the wrong
direction.
• There is a very high individual dependency, since there is minimum documentation generated.

• Transfer of technology to new team members may be quite challenging due to lack of documentation

7
1.4. ARCHITECTURE PATTERN:

- THE MODEL-VIEW-CONTROLLER (MVC):

is an architectural pattern that separates an application into three main logical components: -

1. model

2. view

3. controller

Each of these components are built to handle specific development aspects of an application.

MVC is one of the most frequently used industry standard web development framework to create scalable and
extensible projects.
• Model: The Model component corresponds to all the data-related logic that the user works with. This
can represent either the data that is being transferred between the View and Controller components or
any other business logic-related data. For example, a Customer object will retrieve the customer
information from the database, manipulate it and update its data back to the database or use it to render
data.
• View: The View component is used for all the UI logic of the application. For example, the Customer
view will include all the UI components such as text boxes, dropdowns, etc. that the final user interacts
with.
• Controller: Controllers act as an interface between Model and View components to process all the
business logic and incoming requests, manipulate data using the Model component, and interact with
the Views to render the final output. For example, the Customer controller will handle all the
interactions and inputs from the Customer View and update the database using the Customer Model.
The same controller will be used to view the Customer data.

Figure 3 MVC-Architecture

8
- user requirement

1. System Allow to Login as: user

2. System checks where is the account-email is valid or invalid.

3. Store the user data in database.

4. Enable the user to ask for support.

5. the website is more secure.

- System requirement

Guest:
1. allows the guest to enter the website or the application without having an account

2. search for property using filter without having an account but can’t ask for deal with owners and can’t
add properties to favorites or can’t add his property. The guest can search on home and booking pages.
owner:

1. user can log in with his own email.

2. Can added properties for sale, add properties to favorites, can buy properties.

3. The database will save the user information so all the operations the user do will be saved.
user:

1. user can log in with his own email.

2. Can add properties to favorites, can buy properties.

3. The database will save the user information so all the operations the user do will be saved.

Admin:

1. Admin can control all users and properties.

9
1.5. Use Cases & Sequence
Diagrams:Use Case – Guest

Figure 4 Guest Use case

System Enter the site/app permissions


Use case Guest Permissions
Actors Guests
Description
search for property using filter without having an account but can’t ask for
deal with owners and can’t add properties to favorites or can’t add his
property. The guest can search on home and booking pages.

Action Browse and create account on the site/app


Data
Response Browsing site/app
Table 1 Guest permissions Scenario

10
Use Case: user

Figure 5 user Use Case

System Enter the site/app permissions


Use case user permissions
Actors users
Description
user can log in with his own email.

Can add properties to favorites, can buy properties.


Action Add to favorite, request to contact with owner
Data Username, Password, favorites, requests
Response Buy property
Table 2 user Permissions Scenario

11
Use Case: owner permissions:

Figure 6 owner Use Case

System Owner permissions


Use case owner Panel
Actors owner
Description
user can log in with his own email.

Can added properties for sale, add properties to favorites, can buy
properties.
Action Add property, add to favorite, request to contact with
owner
Data Username, Password, properties, favorites, requests
Response Summary of Projects
Table 3 owner Scenario

12
Use Case: admin permissions:

Figure 7 owner Use Case

System admin permissions


Use case admin Panel
Actors admins
Description Admin can control all users and properities
Action Control
Data Username, Password
Response Summary of Properties
Table 3 owner Scenario

13
Sequence Diagram: favorite Page – Add the property to favorite

Figure 8 Adding property to favorite

Sequence Diagram: Request Page – request contact with user

Figure 9 request contact with user Sequence

14
Sequence Diagram: Request Page-receiving user request

Figure 10 receiving user request

Sequence Diagram: request page-adding property details

Figure 11 adding property details

15
Chapter Two
Web Design

16
1- Why is web design important?

website design is important because your customers care about design. Whether consciously or not, we all
react to visuals, and people are naturally drawn to good design. When it comes to your website design, studies
have shown again and again that users quickly judge your business based on visuals alone, and will often stop
using your site if it’s poorly designed.

2. Angular

Angular is a Typescript-based, free and open-source web application framework led by the Angular Team at
Google and by a community of individuals and corporations. Angular is a complete rewrite from the same
team that built AngularJS.

The rewrite of AngularJS was called "Angular 2", but this led to confusion among developers. To clarify,
the Team announced that separate names should be used for each framework with "AngularJS" referring to
the

1.X versions and "Angular" without the "JS" referring to versions 2 and up.

Version 10

Angular 10 was released on 24 June 2020.

• New Date Range Picker (Material UI library)

• Warnings about CommonJS imports

• Optional Stricter Settings

• Keeping Up to Date with the Ecosystem

• New Default Browser Configuration

Deprecations and removals


1- What are the elements of web design?

1.1. Navigation:

The website design should be easy to navigate and the menu items should easily accessible from any page.
The viewer should always know exactly where they are on the website and have easy access to where they
would like to be. A site map is a great idea and will be used if available. This sounds elementary but most
websites could be improved in this area. Remember, there is a fine line between an interactive menu and an
annoying one, so functionality should be the idea.

17
1.2. Visual Design:

People are visually oriented creatures, and utilizing great graphics is a good way to make your website more
appealing. Your website has about 1/10th of a second to impress your visitor - and potential customer - and
let them know that your website - and business (by proxy) - is trustworthy and professional. However, it's
important not to go overboard with too much. Scrolling text, animation, and flash intros should be used
sparingly in your web design and only to emphasize a point for maximum effect.
1.3. Content:

This is the backbone of your website. Not only does your content play a major role in your search engine
placement, it is the reason most visitors are seeking from your website in the first place. Your website text
should be informative, easy to read, and concise. Well thought out web content and copy will do more than
anything else to make your website design engaging, effective and popular.
1.4. Web Friendly:

No matter how informative, beautiful, and easy to use your website design is, it's useless unless it's web-
friendly. It is important that your web designers know the keys to making your website work on all the major
browsers, and that they utilize meta tags, alt tags, are fully versed in SEO (Search Engine Optimization). Many
factors effect your search engine placement and visual appearance of your site, so make sure your web
designers know their stuff.
1.5. Interaction:

A truly effective website design engages your visitors immediately and continues to hold their
attention through EVERY page, as well as influences them to contact you. This is called
'conversion’ and is probably your website's ultimate goal. Again, there is a fine line between
interaction and annoyance, so the level of interaction should never outweigh the benefit.
1.6. Information Accessibility:

Not all visitors to your website are interested in or have the time to peruse the entire site. They may need to
access only a phone number or address, or just a certain bit of info. For this reason it’s important to place key
information in plain site, in an area that’s easily accessible. We’ve all had the experience of not being able to
locate some needed information on a website, and the result is always a frustrated visitor. The experience is
annoying at best, and a disgruntled visitor won’t stay on your site very long and is unlikely not to return, much
less do business with you.

18
1.7. Intuitiveness:

A great website anticipates what your visitor is thinking and caters directly to their needs, and has elements
arranged in a way that makes sense. If a visitor is searching for one of your products or services on a search
engine or directory where your site is listed, it's important that your website have a landing page that is directly
relevant to what they searched for rather than forcing them to filter through all your information. Remember,
the shortest distance between two points is a straight line.
1.8. Branding:

Your website should be a direct reflection of your business and your brand. Your visitor should immediately
make a visual connection between your logo, print material, and brick-and-mortar location. A website that
does this not only contributes to the memorability of your branding but adds a level of credibility and
enhanced image of that of your overall business.
1.9. Turnaround Time:

The number one complaint of website design customers is the time it takes to get the site up and running.
Unfortunately, a firm that takes unusually long to complete your website is par for the course. The longer it
takes to complete the website, the more business - and value - you lose. A website that isn’t on the web isn’t
and working properly isn't going to bring you any business!
1.10. Conversion:

Your website can be the most important client generator your business can have and must place the primary
emphasis on bringing in new clients and making additional services available to existing clients through
increased awareness of all the services you offer. Providing them with the tools they need to do business with
you in an easy.
1.11. The layout:

of the website is how the material is displayed on a page. Choosing the layout is an essential task for the
designer. It should be simple, intuitive, and accessible. Web designers can use blank areas called white
spacesto organize the elements of the site with grid-based designs to keep them in order.
1.12. Images:

are illustrations, graphics, photographs, icons, and others used to provide supplementary information to the
text. To create the effect desired, designers can pick images that complement each other and the brand that the
website represents. -Fonts: The use of various fonts can enhance a website design. Most web browsers can
only read a select number of fonts, known as "we safe fonts", so your designer will generally work within this
widely accepted group.

19
1.13. The color:

scheme is a combination of colors that is in harmony with the brand and industry it represents. To achieve
this, they will pick a dominant color and a few others to create a palette. A color palette can be monochromatic
(different shades of the same color), analogous (colors close to each other) or complimentary. Designers also
account for what colors users are more likely to be attracted to.
2- Technologies and programming languages:
 HTML.
 CSS3.
 Bootstrap.
 JavaScript.
 jQuery.
 Angular
1. HTML:
HTML (Hypertext Markup Language): is the code that is used to structure a web page and its content. For example,
content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the
title suggests, this article will give you a basic understanding of HTML and its functions. HTML consists of a series of
elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way or act a
certain way. The enclosing tags can make a word or image hyperlink tosomewhere else, can italicize words, can make
the font bigger or smaller, and so on.
2. Cascading Style Sheets (CSS):

is a stylesheet language used to describe the presentation of a document written in HTML or XML (including
XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen,
on paper, in speech, or on other media. CSS is among the core languages of the open web and is standardized
across Web browsers according to W3C specifications. Previously, development of various parts of CSS
specification was done synchronously, which allowed versioning of the latest recommendations. You might
have heard about CSS1, CSS2.1, CSS3. From CSS3, the scope of the specification increased significantly and
the progress on different CSS modules started to differ so much, that it became more effective to develop and
release recommendations separately per module.
3. JavaScript or JS for short:

is a high-level programming language used primarily in web browsers to create more interactive pages. It is currently
being developed by Mozilla Corporation. The JavaScript language was intended for amateur and non-professional
programmers, but increased interest in it and attracted the interest of professional programmers after adding new
technologies such as the spread of AJAX technology, which led to a speed in the interaction between the server and
the client. JavaScript is used to create interactive web pages and to provide web applications including games; It is
used by the majority of websites and is supported by almostall browsers without the need for third-party add-ons.

20
4. jQuery:

is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and
manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a
multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that
millions of people write JavaScript. jQuery is a framework built with JavaScript. It helps web developers to
add extra functionalities to their websites. It is the most popular JavaScript library used to traverse and
manipulate the HTML DOM tree. Also, it simplifies event handling, CSS animation, and Ajax.
5. Bootstrap:

is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It
contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation,
and other interface components. Bootstrap is an HTML, CSS & JS Library that focuses on simplifying the
development of informative web pages (as opposed to web apps). The primary purpose of adding it to a web
project is to apply Bootstrap's choices of color, size, font and layout to that project. As such, the primary factor
is whether the developers in charge find those choices to their liking. Once added to a project, Bootstrap
provides basic style definitions for all HTML elements. The result is a uniform appearance for prose, tables
and form elements across web browsers. In addition, developers can take advantage of CSS classes defined in
Bootstrap to further customize the appearance of their contents.
6. Web Application (mask) Screens:
 User interface:
In this section, we will talk about everything related to the front end of the project, The project contains many
pages. The most important pages will be listed and the most important screens that focus on the idea or purpose
of the application will be listed, as follows:
- Home Page:

Using the web technologies, which we mentioned above we have used these technologies to create our web
application project, starting from the home page of our website, The first page of the site which consists of:
1) navbar: include the pages title and log in, sign up button.
2) Header of the page contains pictures of the mask and simple intro.
3) About as: some information about website.
4) Service: our mask website service and technology.
5) tools: some tools used us website to.
6) testimonial: what our client says.

7) service: all service in application.

8) Footer: include the social media icon and pages link.


21
2.1. Website UI:

login page:

Figure 12 login page

- Check validation of email and password.

- Allow making a new account.

Sign in page

- checks input validation.


- Allow logging in if the user has an account.

22

figure 13 sign in page


- landing space (1):

Figure 14 landing-space page (1)

Landing space (2):

Figure 15 landing-space page (1)

- Show services of project.

23
Landing space (3)

Figure 16 landing-space page (2)

- Show future services of project.


- Allow making comment.

Booking Page (1):

Figure 17 booking page (1)

- Allow searching for property.

- Allow filtering Result.

- Add Property to favorite.

24
Property Details (1):

Figure 18 property details (1)

- Allow Requesting with the Owner.

- Allow filtering Result.

- Add Property to favorite.

- Rate the Property.

- Rate the owner.

25
MY Estates:

Figure 20 my estates page

- Allow Editing on the property.

- Delete the property.

- Show the property details.

26
Adding Property setps (1):

Figure 21 add estate step (1)

- Add property to estates.


- Add property details.

Adding Property steps (2):

Figure 22 add estate step (2)

27
- Adding Property details.

Adding Property setps (3):

Figure 23 add estate step (3)

- What is the room containing?

Adding Property steps (4):


Figure 24 add estate step (4)

- Adding Property photos.

28
Favorite:

Figure 25 favorite page

- Favorite page containing Properties that the user adds.

Owner Request:

Figure 26 owner request page

- Shows the user’s Request to owner.

29
APP UI:
SERVICES PAGE (1)
- SHOW APP SERVICES

SHOW APP SERVICES

Figure 27 services page (1)

SERVICES PAGE (2)

FIGURE 28 SERVICES PAGE (2)

30
SERVICES PAGE (3)

- SHOW APP SERVICES

Figure 29 services page (3)

LOGIN PAGE

- CHECK LOGIN VALIDITION

- ALLOW MAKING AN ACCOUNT.

Figure 30 login pag

31
SIGN IN PAGE

- CHECK SIGN IN INPUTS VALIDITION

- ALLOW TO LOGIN IF THE USER HAS ACCOUNT.

Figure 31 sign in page

REQUEST A MEETING

FIGURE 32 REQUEST A MEETING

32
ADD PROPRETY STEPS (1)

- WHAT IS THE PROPERTY CONTAIN?

Figure 33 add estate step (1)

ADD PROPRETY STEPS (3)

- WHAT IS EACH ROOM CONTAIN?

Figure 34 add estate step (2)

33
ADD PROPRETY STEPS (3)

- ADD PROPERTY PHOTOS.

Figure 35 add estate step (3)

BOOKING PAGE

- Search by location.
- Using filter to detect the searching.
- Show all properties satisfy the search.

Figure 36 booking page

34
MY ESTATES PAGE

- Allow Editing on the property.


- Delete the property.
- Show the property details.

Figure 37 my estates

35
PROPERTY DETAILS

- Show property information.


- Show property map.
- Request to contact with owner.

Figure 38 property details page

FAVORITE PAGE

- Add property to favorite.


- Delete the property from favorite.

FIGURE 39 FAVORITE PAGE

36
CLIENT REQUEST PAGE

- Show the client’s Request to owner.

Figure 40 owner request page

OWNER REQUEST PAGE

- Show the owner Request to user.

Figure 41 client request page


37
Chapter Three
Back-end Development

38
3. Back-end framework (Laravel):

When using any tool in the "real world", you feel more confident if you understand how that tool works.
Application development is no different. When you understand how your development tool’s function, you
feel more comfortable and confident using them.
The goal of this document is to give you a good, high-level overview of how the Laravel framework works.

3.1. Life Cycle overview

1- First Things

The entry point for all requests to a Laravel application is the public/index.php file. All requests are directed
file doesn't contain much
to this file by your web server (Apache / Nginx) configuration. The index.php
code. Rather, it is a starting point for loading the rest of the framework.
The index.php file loads the Composer generated autoloader definition, and then retrieves an instance of the

Laravel application from bootstrap/app.php script. The first action taken by Laravel itself is to create an

instance of the application / service container.

2- HTTP / Console Kernels

Next, the incoming request is sent to either the HTTP kernel or the console kernel, depending on the type of
request that is entering the application. These two kernels serve as the central location that all requests flow
through. For now, let's just focus on the HTTP kernel, which is located in app/Http/Kernel.php.
The HTTP kernel extends the Illuminate\Foundation\Http\Kernel class, which defines an array

of bootstrappers that will be run before the request is executed. These bootstrappers configure error

handling, configure logging, detect the application environment, and perform other tasks that need to be
done before the request is actually handled.
The HTTP kernel also defines a list of HTTP middleware that all requests must pass through before being

handled by the application. These middleware handle reading and writing the HTTP session, determining if
the application is in maintenance mode, verifying the CSRF token, and more.
The method signature for the HTTP kernel's handle method is quite simple: receive a Request and return

a Response. Think of the Kernel as being a big black box that represents your entire application. Feed it
HTTP requests and it will return HTTP responses.
3- Service Providers

One of the most important Kernel bootstrapping actions is loading the service providers
All of the service providers for the application are configured in the config/app.php
39
for your application.configuration
file's providersarray. First, the register method will be called on all providers, then, once all providers have

been registered, the boot method will be called.

Service providers are responsible for bootstrapping all of the framework's various components, such as the
database, queue, validation, and routing components. Since they bootstrap and configure every feature

offered by the framework, service providers are the most important aspect of the entire Laravel
bootstrapprocess.
1- patch Request

Once the application has been bootstrapped and all service providers have been registered, the Request will
be handed off to the router for dispatching. The router will dispatch the request to a route or controller, as
well as run any route specific middleware.
2- Authorization

In addition to providing built-in authentication services, Laravel also provides a simple way to authorize

user actions against a given resource. For example, even though a user is authenticated, they may not be
authorized to update or delete certain Eloquent models or database records managed by your application.
Laravel's authorization features provide an easy, organized way of managing these types of authorization
checks.
Laravel provides two primary ways of authorizing actions: gates and policies. Think of gates and policies

like routes and controllers. Gates provide a simple, closure-based approach to authorization while policies,
like controllers, group logic around a particular model or resource. In this documentation, we'll explore gates
first and then examine policies.
You do not need to choose between exclusively using gates or exclusively using policies when building an
application. Most applications will most likely contain some mixture of gates and policies, and that is
perfectly fine! Gates are most applicable to actions that are not related to any model or resource, such as
viewing an administrator dashboard. In contrast, policies should be used when you wish to authorize an
action for a particular model or resource.
3- Authentication

Laravel makes implementing authentication very simple. In fact, almost everything is configured for you out
of the box. The authentication configuration file is located at config/auth.php, which contains several well
documented options for tweaking the behavior of the authentication services.
At its core, Laravel's authentication facilities are made up of "guards" and "providers". Guards define how
session
40
users are authenticated for each request. For example, Laravel ships with a guard which maintains
state using session storage and cookies.
Providers define how users are retrieved from your persistent storage. Laravel ships with support for
retrieving users using Eloquent and the database query builder.

4- Database Considerations

By default, Laravel includes an App\User Eloquent model in app directory. This model may be used with
the default Eloquent authentication driver.
When building the database schema for the App\User model, make sure the password column is at least 60
characters in length. Maintaining the default string column length of 255 characters would be a good choice.
Also, you should verify that users (or equivalent) table contains a nullable, string remember_token column
of 100 characters. This column will be used to store a token for users that select the "remember me" option
when logging into your application.
Authentication Quickstart

Laravel ships with several pre-built authentication controllers, which are located in
App\Http\Controllers\Auth RegisterController
the namespace. The handles new user registration,
the LoginController handles authentication, the ForgotPasswordController handles e-mailing links for
resetting passwords, and the ResetPasswordController contains the logic to reset passwords. Each of these

controllers uses a trait to include their necessary methods. For many applications, will not need to modify
these controllers at all.
5- Routing

Laravel provides a quick way to scaffold all of the routes and views need for authentication using one simple
command:
Php artisan make:auth

This command should be used on fresh applications and will install a layout view, registration and login
HomeController
views, as well as routes for all authentication end-points. A will also be generated to handle
post-login requests to application's dashboard.
9- Views

As mentioned in the previous section, the php artisan make:auth command will create all of the views need
for authentication and place them in the resources/views/auth directory.
The make:auth command will also create a resources/views/layouts directory containing a base layout for
your application. All of these views use the Bootstrap CSS framework, but you are free to customize them
41
however wish.
10- Authenticating

Now that have routes and views setup for the included authentication controllers, are ready to register and
authenticate new users for application! You may access application in a browser since the authentication
controllers already contain the logic to authenticate existing users and store new users in the database.
When a user is successfully authenticated, they will be redirected to the /home URI.
Username Customization
By default, Laravel uses the email field for authentication.

4. Guard Customization

may also customize the "guard" that is used to authenticate and register users. To get started, define a guard
method on your LoginController, RegisterController, and ResetPasswordController.
5. Storage Customization

To modify the form fields that are required when a new user registers with application, or to customize how
new users are stored into your database, you may modify the RegisterController class. This class is
responsible for validating and creating new users of your application.
The validator method of the RegisterController contains the validation rules for new users of the application.
The create method of the RegisterController is responsible for creating new App\User records in database
using the Eloquent ORM.
6. Protecting Routes

Route middleware can be used to only allow authenticated users to access a given route. Laravel ships with
an auth middleware, which is defined at Illuminate\Auth\Middleware\Authenticate. Since this middleware is
already registered in HTTP kernel
7. Manually authentication users

The attempt method accepts an array of key / value pairs as its first argument. The values in the array will be
used to find the user in your database table. So, in the example above, the user will be retrieved by the value
of the email column. If the user is found, the hashed password stored in the database will be compared with
the password value passed to the method via the array. You should not hash the password specified as
the value, since the framework will automatically hash the value before comparing it to the hashed
password
password in the database. If the two hashed passwords match an authenticated session will be started for the
user.
The method will return if authentication was successful. Otherwise, will be returned.
attempt true false
The intended method on the redirector will redirect the user to the URL they were attempting to access
before being intercepted by the authentication middleware. A fallback URI may be given to this method in
case the intended destination is not available.
42
8. Logging Out

To log users out of application, you may use the logout method on the Auth facade.

Remembering Users

when would like to provide "remember me" functionality in application, may pass a boolean value as the
second argument to the attempt method, which will keep the user authenticated indefinitely, or until they
manually logout. users table must include the string remember_token column, which will be used to store
the "remember me" token.
9. HTTP Basic Authentication

HTTP Basic Authentication provides a quick way to authenticate users of application without setting up a
dedicated "login" page. To get started, attach the auth.basic middleware to your route. The auth.basic
middleware is included with the Laravel framework
10. Database

MySQL is a database management system.

A database is a structured collection of data. It may be anything from a simple shopping list to a picture
gallery or the vast amounts of information in a corporate network. To add, access, and process data stored in
a computer database, you need a database management system such as MySQL Server. Since computers are
very good at handling large amounts of data, database management systems play a central role in computing,
as standalone utilities, or as parts of other applications.
MySQL databases are relational.

A relational database stores data in separate tables rather than putting all the data in one big storeroom. The
database structures are organized into physical files optimized for speed. The logical model, with objects
such as databases, tables, views, rows, and columns, offers a flexible programming environment. You set up
rules governing the relationships between different data fields, such as one-to-one, one-to-many, unique,
required or optional, and “pointers” between different tables. The database enforces these rules, so that with
a well-designed database, your application never sees inconsistent, duplicate, orphan, out-of-date, or missing
data.
MySQL Server works in client/server or embedded systems.

The MySQL Database Software is a client/server system that consists of a multithreaded SQL server that
supports different back ends, several different client programs and libraries, administrative tools, and a wide
range of application programming interfaces (APIs).

• Top Reasons to Use MySQL

1. Scalability and Flexibility


43
The MySQL database server provides the ultimate in scalability, sporting the capacity to handle deeply
embedded applications with a footprint of only 1MB to running massive data warehouses holding terabytes
of information. Platform flexibility is a stalwart feature of MySQL with all flavors of Linux, UNIX, and
Windows being supported. And, of course, the open-source nature of MySQL allows complete
customization for those wanting to add unique requirements to the database server.
2. High Performance

A unique storage-engine architecture allows database professionals to configure the MySQL database server
specifically for particular applications, with the end result being amazing performance results. Whether the
intended application is a high-speed transactional processing system or a high-volume web site that services
a billion queries a day, MySQL can meet the most demanding performance expectations of any system.
With high-speed load utilities, distinctive memory caches, full text indexes, and other performance-
enhancing mechanisms, MySQL offers all the right ammunition for today's critical business systems.
3. High Availability

Rock-solid reliability and constant availability are hallmarks of MySQL, with customers relying on MySQL
to guarantee around-the-clock uptime. MySQL offers a variety of high-availability options from high-speed
master/slave replication configurations, to specialized Cluster servers offering instant failover, to third party
vendors offering unique high-availability solutions for the MySQL database server.
4. Robust Transactional Support

MySQL offers one of the most powerful transactional database engines on the market. Features include
complete ACID (atomic, consistent, isolated, durable) transaction support, unlimited row-level locking,
distributed transaction capability, and multi-version transaction support where readers never block writers
and vice-versa. Full data integrity is also assured through server-enforced referential integrity, specialized
transaction isolation levels, and instant deadlock detection.
5. Web and Data Warehouse Strengths

MySQL is the de-facto standard for high-traffic web sites because of its high-performance query engine,
tremendously fast data insert capability, and strong support for specialized web functions like fast full text
searches. These same strengths also apply to data warehousing environments where MySQL scales up into
the terabyte range for either single servers or scale-out architectures. Other features like main memory
tables, B-tree and hash indexes, and compressed archive tables that reduce storage requirements by up to
eighty percent make MySQL a strong standout for both web and business intelligence applications.
6. Strong Data Protection

Because guarding the data assets of corporations is the number one job of database professionals, MySQL
offers exceptional security features that ensure absolute data protection. In terms of database authentication,

44
MySQL provides powerful mechanisms for ensuring only authorized users have entry to the database server,
with the ability to block users down to the client machine level being possible. SSH and SSL support are
also provided to ensure safe and secure connections. A granular object privilege framework is present so that
users only see the data they should, and powerful data encryption and decryption functions ensure that
sensitive data is protected from unauthorized viewing. Finally, backup and recovery utilities provided
through MySQL and third-party software vendors allow for complete logical and physical backup as well as
full and point-in-time recovery.
7. Comprehensive Application Development

One of the reasons MySQL is the world's most popular open-source database is that it provides
comprehensive support for every application development need. Within the database, support can be found
for stored procedures, triggers, functions, views, cursors, ANSI-standard SQL, and more. For embedded
applications, plug-in libraries are available to embed MySQL database support into nearly any application.
MySQL also provides connectors and drivers (ODBC, JDBC, etc.) that allow all forms of applications to
make use of MySQL as a preferred data management server. It doesn't matter if it's PHP, Perl, Java, Visual
Basic, or .NET, MySQL offers application developers everything they need to be successful in building
database-driven information systems.
8. Management Ease

MySQL offers exceptional quick-start capability with the average time from software download to
installation completion being less than fifteen minutes. This rule holds true whether the platform is
Microsoft Windows, Linux, Macintosh, or UNIX. Once installed, self-management features like automatic
space expansion, auto-restart, and dynamic configuration changes take much of the burden off already
overworked database administrators. MySQL also provides a complete suite of graphical management and
migration tools that allow a DBA to manage, troubleshoot, and control the operation of many MySQL
servers from a single workstation. Many third-party software vendor tools are also available for MySQL that
handle tasks ranging from data design and ETL, to complete database administration, job management, and
performance monitoring.
9. Open-Source Freedom and 24 x 7 Support

Many corporations are hesitant to fully commit to open-source software because they believe they can't get
the type of support or professional service safety nets they currently rely on with proprietary software to
ensure the overall success of their key applications. The questions of indemnification come up often as well.
These worries can be put to rest with MySQL as complete around-the-clock support as well as
indemnification is available through MySQL Enterprise. MySQL is not a typical open-source project as all
the software is owned and supported by Oracle, and because of this, a unique cost and support model are
available that provides a unique combination of open source freedom and trusted software with support.

45
10. Lowest Total Cost of Ownership

By migrating current database-drive applications to MySQL, or using MySQL for new development
projects, corporations are realizing cost savings that many times stretch into seven figures. Accomplished
through the use of the MySQL database server and scale-out architectures that utilize low-cost commodity
hardware, corporations are finding that they can achieve amazing levels of scalability and performance, all
at a cost that is far less than those offered by proprietary and scale-up software vendors. In addition, the
reliability and easy maintainability of MySQL means that database administrators don't waste time
troubleshooting performance or downtime issues, but instead can concentrate on making a positive impact
on higher level tasks that involve the business side of data.

46
Chapter Four
Database

47
4. Database:

4.1. Database defined

A database is an organized collection of structured information, or data, typically stored electronically in a


computer system. A database is usually controlled by a database management system (DBMS). Together,
the data and the DBMS, along with the applications that are associated with them, are referred to as a
database system, often shortened to just database.
Data within the most common types of databases in operation today is typically modeled in rows and
columns in a series of tables to make processing and data querying efficient. The data can then be easily
accessed, managed, modified, updated, controlled, and organized. Most databases use structured query
language (SQL) for writing and querying data.
What is Structured Query Language (SQL)?

SQL is a programming language used by nearly all relational databases to query, manipulate, and define
data, and to provide access control. SQL was first developed at IBM in the 1970s with Oracle as a major
contributor, which led to implementation of the SQL ANSI standard, SQL has spurred many extensions
from companies such as IBM, Oracle, and Microsoft. Although SQL is still widely used today, new
programming languages are beginning to appear.
Evolution of the database

Databases have evolved dramatically since their inception in the early 1960s. Navigational databases such as
the hierarchical database (which relied on a tree-like model and allowed only a one-to-many relationship),
and the network database (a more flexible model that allowed multiple relationships), were the original
systems used to store and manipulate data. Although simple, these early systems were inflexible. In the
1980s, relational databases became popular, followed by object-oriented databases in the 1990s. More
recently, NoSQL databases came about as a response to the growth of the internet and the need for faster
speed and processing of unstructured data. Today, cloud databases and self-driving databases are breaking
new ground when it comes to how data is collected, stored, managed, and utilized.
What’s the difference between a database and a spreadsheet?

Databases and spreadsheets (such as Microsoft Excel) are both convenient ways to store information. The
primary differences between the two are:
• How the data is stored and manipulated

• Who can access the data

• How much data can be stored

Spreadsheets were originally designed for one user, and their characteristics reflect that. They’re great for a
single user or small number of users who don’t need to do a lot of incredibly complicated data manipulation.
48
Databases, on the other hand, are designed to hold much larger collections of organized information—

massive amounts, sometimes. Databases allow multiple users at the same time to quickly and securely
access and query the data using highly complex logic and language.
Types of databases

There are many different types of databases. The best database for a specific organization depends on how
the organization intends to use the data.
 Relational databases

Relational databases became dominant in the 1980s. Items in a relational database are organized as a set of
tables with columns and rows. Relational database technology provides the most efficient and flexible way
to access structured information.
 Object-oriented databases

Information in an object-oriented database is represented in the form of objects, as in object-oriented


programming.
 Distributed databases

A distributed database consists of two or more files located in different sites. The database may be stored on
multiple computers, located in the same physical location, or scattered over different networks.
 Data warehouses

A central repository for data, a data warehouse is a type of database specifically designed for fast query and
analysis.
 NoSQL databases

A NoSQL, or nonrelational database, allows unstructured and semi structured data to be stored and
manipulated (in contrast to a relational database, which defines how all data inserted into the database must
be composed). NoSQL databases grew popular as web applications became more common and more
complex.
 Graph databases

A graph database stores data in terms of entities and the relationships between entities.

OLTP databases. An OLTP database is a speedy, analytic database designed for large numbers of
transactions performed by multiple users.
These are only a few of the several dozen types of databases in use today. Other, less common databases are
tailored to very specific scientific, financial, or other functions. In addition to the different database types,
changes in technology development approaches and dramatic advances such as the cloud and automation are
propelling databases in entirely new directions. Some of the latest databases include

49
 Open-source databases

An open-source database system is one whose source code is open source; such databases could be SQL
orNoSQL databases.
 Cloud databases
A cloud database is a collection of data, either structured or unstructured, that resides on a private, public, or
hybrid cloud computing platform. There are two types of cloud database models: traditional and database as
a service (DBaaS). With DBaaS, administrative tasks and maintenance are performed by a service provider.
 Multimodal database
Multi model databases combine different types of database models into a single, integrated back end.
Thismeans they can accommodate various data types.
 Document/JSON database
Designed for storing, retrieving, and managing document-oriented information, document databases are a
modern way to store data in JSON format rather than rows and columns.
 Self-driving databases
The newest and most groundbreaking type of database, self-driving databases (also known as autonomous
databases) are cloud-based and use machine learning to automate database tuning, security, backups,
updates, and other routine management tasks traditionally performed by database administrators.
What is database software?

Database software is used to create, edit, and maintain database files and records, enabling easier file and
record creation, data entry, data editing, updating, and reporting. The software also handles data storage,
backup and reporting, multi-access control, and security. Strong database security is especially important
today, as data theft becomes more frequent. Database software is sometimes also referred to as a “database
management system” (DBMS).
Database software makes data management simpler by enabling users to store data in a structured form and
then access it. It typically has a graphical interface to help create and manage the data and, in some cases,
users can construct their own databases by using database software.
What is a database management system (DBMS)?

A database typically requires a comprehensive database software program known as a database management
system (DBMS). A DBMS serves as an interface between the database and its end users or programs,
allowing users to retrieve, update, and manage how the information is organized and optimized. A DBMS
also facilitates oversight and control of databases, enabling a variety of administrative operations such as
performance monitoring, tuning, and backup and recovery.

Some examples of popular database software or DBMSs include MySQL, Microsoft Access, Microsoft SQL
Server, FileMaker Pro, Oracle Database, and dBASE.

50
What is a MySQL database?

MySQL is an open-source relational database management system based on SQL. It was designed and
optimized for web applications and can run on any platform. As new and different requirements emerged
with the internet, MySQL became the platform of choice for web developers and web-based applications.
Because it’s designed to process millions of queries and thousands of transactions, MySQL is a popular
choice for ecommerce businesses that need to manage multiple money transfers. On-demand flexibility is
the primary feature of MySQL.
MySQL is the DBMS behind some of the top websites and web-based applications in the world, including
Airbnb, Uber, LinkedIn, Facebook, Twitter, and YouTube.
Using databases to improve business performance and decision-making

With massive data collection from the Internet of Things transforming life and industry across the globe,
businesses today have access to more data than ever before. Forward-thinking organizations can now use
databases to go beyond basic data storage and transactions to analyze vast quantities of data from multiple
systems. Using database and other computing and business intelligence tools, organizations can now
leverage the data they collect to run more efficiently, enable better decision-making, and become more agile
and scalable. Optimizing access and throughput to data is critical to businesses today because there is more
data volume to track. It’s critical to have a platform that can deliver the performance, scale, and agility that
businesses need as they grow over time.
The self-driving database is poised to provide a significant boost to these capabilities. Because self-driving
databases automate expensive, time-consuming manual processes, they free up business users to become
more proactive with their data. By having direct control over the ability to create and use databases, users
gain control and autonomy while still maintaining important security standards.
How autonomous technology is improving database management

Self-driving databases are the wave of the future—and offer an intriguing possibility for organizations that
want to use the best available database technology without the headaches of running and operating that
technology.
Self-driving databases use cloud-based technology and machine learning to automate many of the routine
tasks required to manage databases, such as tuning, security, backups, updates, and other routine
management tasks. With these tedious tasks automated, database administrators are freed up to do more
strategic work. The self-driving, self-securing, and self-repairing capabilities of self-driving databases are
poised to revolutionize how companies manage and secure their data, enabling performance advantages,
lower costs, and improved security.

51
4.2. Entity Relation Diagrams:

Figure 42 Schema

52
Chapter Five
Application Programming Interface (API)

53
5. What is API?

API is the acronym for Application Programming Interface, which is a software intermediary that allows
two applications to talk to each other.
It is a type of software interface, offering a service to other pieces of software. A document or standard that
describes how to build or use such a connection or interface is called an API specification. A computer
system that meets this standard is said to implement or expose an API. The term API may refer either to the
specification or to the implementation.
In contrast to a user interface, which connects a computer to a person, an application programming interface
connects computers or pieces of software to each other. It is not intended to be used directly by a person (the
end user) other than a computer programmer who is incorporating it into the software. An API is often made
up of different parts which act as tools or services that are available to the programmer. A program or a
programmer that uses one of these parts is said to call that portion of the API. The calls that make up the
API are also known as subroutines, methods, requests, or endpoints. An API specification defines these
calls, meaning that it explains how to use or implement them.
One purpose of APIs is to hide the internal details of how a system works, exposing only those parts a
programmer will find useful and keeping them consistent even if the internal details later change. An API
may be custom-built for a particular pair of systems, or it may be a shared standard allowing interoperability
among many systems.
The term API is often used to refer to web APIs, which allow communication between computers that are
joined by the internet. There are also APIs for programming languages, software libraries, computer
operating systems, and computer hardware. APIs originated in the 1940s, though the term did not emerge
until the 1960s and 1970s. Recent developments in utilizing APIs have led to the rise in popularity of
microservices, which are ultimately loosely coupled services accessed through public APIs.
In building applications, an API simplifies programming by abstracting the underlying implementation and
only exposing objects or actions the developer needs. While a graphical interface for an email client might
provide a user with a button that performs all the steps for fetching and highlighting new emails, an API for
file input/output might give the developer a function that copies a file from one location to another without
requiring that the developer understand the file system operations occurring behind the scenes.
5.1. What are the types of APIs?

5.1.1. Libraries and frameworks

The interface to a software library is one type of API. The API describes and prescribes the "expected
behavior" (a specification) while the library is an "actual implementation" of this set of rules.
A single API can have multiple implementations (or none, being abstract) in the form of different libraries
that share the same programming interface.

54
The separation of the API from its implementation can allow programs written in one language to use a
library written in another. For example, because Scala and Java compile to compatible bytecode, Scala
developers can take advantage of any Java API.
API use can vary depending on the type of programming language involved. An API for a procedural
language such as Lua could consist primarily of basic routines to execute code, manipulate data or handle
errors while an API for an object-oriented language, such as Java, would provide a specification of classes
and its class methods. Hyrum's law states that "With a sufficient number of users of an API, it does not
matter what you promise in the contract: all observable behaviors of your system will be depended on by
somebody." Meanwhile, several studies show that most applications that use an API tend to use a small part
of the API. API use actually varies depending on the number of users, as well as on the popularity of the
API.
Language bindings are also APIs. By mapping the features and capabilities of one language to an interface
implemented in another language, a language binding allows a library or service written in one language to
be used when developing in another language.
Tools such as SWIG and F2PY, a Fortran-to-Python interface generator, facilitate the creation of such
interfaces.
An API can also be related to a software framework: a framework can be based on several libraries
implementing several APIs, but unlike the normal use of an API, the access to the behavior built into the
framework is mediated by extending its content with new classes plugged into the framework itself.
Moreover, the overall program flow of control can be out of the control of the caller and in the framework's
hands by inversion of control or a similar mechanism.
5.1.2. Operating systems

An API can specify the interface between an application and the operating system. POSIX, for example,
specifies a set of common APIs that aim to enable an application written for a POSIX conformant operating
system to be compiled for another POSIX conformant operating system.
Linux and Berkeley Software Distribution are examples of operating systems that implement the POSIX
APIs.
Microsoft has shown a strong commitment to a backward-compatible API, particularly within its Windows
API (Win32) library, so older applications may run on newer versions of Windows using an executable-
specific setting called "Compatibility Mode".
An API differs from an application binary interface (ABI) in that an API is source code based while an ABI
is binary based. For instance, POSIX provides APIs while the Linux Standard Base provides an ABI.

55
5.1.3. Remote APIs

Remote APIs allow developers to manipulate remote resources through protocols, specific standards for
communication that allow different technologies to work together, regardless of language or platform. For
example, the Java Database Connectivity API allows developers to query many different types of databases
with the same set of functions, while the Java remote method invocation API uses the Java Remote Method
Protocol to allow invocation of functions that operate remotely but appear local to the developer.
Therefore, remote APIs are useful in maintaining the object abstraction in object-oriented programming; a
method call, executed locally on a proxy object, invokes the corresponding method on the remote object,
using the remoting protocol, and acquires the result to be used locally as a return value.
A modification of the proxy object will also result in a corresponding modification of the remote object.

5.1.4. Web APIs

Web APIs are a service accessed from client devices (Mobile Phones, Laptop, etc.) to a web server using the
Hypertext Transfer Protocol (HTTP). Client devices send a request in the form of an HTTP request, and are
met with a response message usually in JavaScript Object Notation (JSON) or Extensible Markup Language
(XML) format. Developers typically use Web APIs to query a server for a specific set of data from that
server.
An example might be a shipping company API that can be added to an eCommerce-focused website to
facilitate ordering shipping services and automatically include current shipping rates, without the site
developer having to enter the shipper's rate table into a web database. While "web API" historically has been
virtually synonymous with web service, the recent trend (so-called Web 2.0) has been moving away from
Simple Object Access Protocol (SOAP) based web services and service-oriented architecture (SOA) towards
more direct representational state transfer (REST) style web resources and resource-oriented architecture
(ROA). Part of this trend is related to the Semantic Web movement toward Resource Description
Framework (RDF), a concept to promote web-based ontology engineering technologies. Web APIs allow the
combination of multiple APIs into new applications known as mashups.
In the social media space, web APIs have allowed web communities to facilitate sharing content and data
between communities and applications. In this way, content that is created in one place dynamically can be
posted and updated to multiple locations on the web, for example, Twitter's REST API allows developers to
access core Twitter data and the Search API provides methods for developers to interact with Twitter Search
and trends data.

56
5.2. Design

The design of an API has a significant impact on its usage. First of all, the design of programming interfaces
represents an important part of software architecture, the organization of a complex piece of software. The
principle of information hiding describes the role of programming interfaces as enabling modular
programming by hiding the implementation details of the modules so that users of modules need not
understand the complexities inside the modules. Aside from the previous underlying principle, other metrics
for measuring the usability of an API may include properties such as functional efficiency, overall
correctness, and learnability for novices. One straightforward and commonly adopted way of designing APIs
is to follow Nielsen's heuristic evaluation guidelines. The Factory method pattern is also typical in designing
APIs due to their reusable nature. Thus, the design of an API attempts to provide only the tools a user would
expect.
5.3. Security

API security is very critical when developing a public facing API. Common threats include SQL injection,
Denial-of-service attack (DoS), broken authentication, and exposing sensitive data. Without ensuring proper
security practices bad actors can get access to information they should not have or even gain privileges to
make changes to your server. Some common security practices include proper connection security using
HTTPS, content security to mitigate data injection attacks, having an updated Robots exclusion standard,
and requiring an API key to use your service. Many public facing API services require you to use an
assigned API key, and will refuse to serve data without sending the key with your request.

57
Chapter Six
Flutter

58
6. Flutter
6.1. What is Flutter?
Flutter is an open-source UI software development kit created by Google. It is used to develop cross-
platform applications for Android, iOS, Linux, macOS, Windows, Google Fuchsia, and the web from a
single codebase.
6.2.What are components of flutter?
Framework architecture
The major components of Flutter include:
- Dart platform
- Flutter engine
- Foundation library
- Design-specific widgets
- Flutter Development Tools (DevTools)
6.3.Dart Language
Flutter apps are written in the Dart language and make use of many of the language's more advanced
features.
While writing and debugging an application, Flutter runs in the Dart virtual machine, which features a
just-in-time execution engine. This allows for fast compilation times as well as" hot reload ,"with
which modifications to source files can be injected into a running application. Flutter extends this
further with support for stateful hot reload, where in most cases changes to source code are reflected
immediately in the running app without requiring a restart or any loss of state.
For better performance, release versions of Flutter apps on all platforms use ahead-of-time (AOT)
compilation, except for on the Web where code is transpiled to JavaScript.
Flutter inherits Dart's Pub
package manager and software repository, which allows users to publish and use custom packages as
well as Flutter-specific plugins.
Foundation library
The Foundation library, written in Dart, provides basic classes and functions that are used to construct
applications using Flutter, such as APIs to communicate with the engine
Design-specific widgets
The Flutter framework contains two sets of widgets that conform to specific design languages:
Material Design widgets implement Google's design language of the same name, and Cupertino
widgets implement Apple's iOS Human interface guidelines.

59
CONCLUSION

In conclusion, we provided this process as computer-based system represented in


a website and as a mobile application that helps people to choose the appropriate
property for them and helps the owners to organize their business
we would like to thank our helpful supervisor Prof. Wael Abd Al Rahman for
helping us finish the undergraduate graduation project under his helpful
supervision and guidance We are learning, and we would like to thank everyone
who helped us at our university journey.

60
REFERENCES
1- Laravel - The PHP Framework For Web Artisans. Retrieved 30 August 2022, from
https://laravel.com/docs/9.x
2- PHP: Documentation. Retrieved 30 August 2022, from https://www.php.net/docs.php

3- Judd, D. ‘Preprod’ A system for pre-production planning for project network analysis. International
Journal of Project Management, 6(2), 117-121. doi: 10.1016/0263-7863(88)90034-8
4- Al-Bashir, A. Applying Total Quality Management Tools Using QFD at Higher Education
Institutions in Gulf Area (Case Study: ALHOSN University). International Journal Of Production
Management And Engineering, 4(2), 87. doi: 10.4995/ijpme.2016.4599
5- Hegazi, F., & Gharib, K. The Effect of Knowledge Management Processes on Organizational
Business Processes’ and Employees’ Benefits in an Academic Institution's Portal Environment.
Communications Of The IBIMA, 1-32. Doi: 10.5171/2015.928262
6- Retrieved 21 NOV 2022, from
https://m.mu.edu.sa/sites/default/files/content/2017/11/Graduation%20Project%20Survey%20-
%20IT.pdf
7- Wagner, Michael (2010), SQL/XML:2006 – Evaluierung der Standardkonformität ausgewählter

Datenbanksysteme, Diplomica Verlag, ISBN

8- PHP: Runtime Configuration. PHP.net. Retrieved 2023-01-03.

9- docs.flutter.dev. Retrieved 2022-10-06.

10- flutter.dev. Retrieved 2022-12-13.

11- angular.io. Retrieved 2022-11-10.

12- Drag and Drop and more". Angular Blog. Retrieved 2019-06-07.

13- ^ Fluin, Stephen (2019-02-08). "A plan for version 8.0 and Ivy". Angular Blog. Retrieved 2019-06-07.

14- Version 6 of Angular Now Available | by Stephen Fluin | Angular Blog

15- oracle.com. Oracle Corporation. Archived from the original on 2021-06-05. Retrieved 2021-05-08.

16- "Benchmark.js". benchmarkjs.com. Archived from the original on 2016-12-19. Retrieved 2016-11-06.

17- Alexa Top 500 Global Sites". www.alexa.com. Retrieved 2015-11-04.

18- "APIs.json". apisjson.org. Retrieved 2016-03-14.

19- Business Analytics Definitions from TechTarget

61
APPENDIX
Mobile Application Code

62
63
64
65
66
67
Website Codes back-end

68
69
70
71
72
73
74
75
76
77
Website Front-End

78
79
80
81
82
83
84
85
86
87
88

You might also like