ADVANCE CLIENT SIDE REPORT

ADVANCE CLIENT SIDE
DEVELOPMENT AND USER
EXPERIENCE REPORT
28-April-2015
PROPERTIES IN
IRELAND
Website for customers
to buy, rent and sell
property in Ireland for
best price.
JYOTI TYAGI
X01318374

ADVANCE CLIENT SIDE DEVELOPMENT AND USER EXPERIENCE REPORT JYOTI TYAGI
1TECHNICAL REPORT
PROPERTIES IN IRELAND
1. OVERVIEW
In today’s global business environment, customer’s expectations are
increasing with the advent of technology and brand loyalty is hard to achieve. So,
it’s difficult to convince users to use ordinary websites. More the user friendly
interface is, more the customer would be pleased to use applications. Rich Internet
Applications (RIA) can make useful user engaging interaction, provides responsive
and friendly interface while building applications.
“Properties in Ireland” is a Rich Internet Application (RIA), developed using HTML5,
CSS3, JavaScript, Ajax, jQuery and Bootstrap. It provides a platform for user to buy,
to rent and to sell Ireland’s properties online in best price. Customers using this
website can easily find suitable houses or places according to their choice and
which is within their budget. Moreover, it offer customers to give free online
advertisement for their property which they want to rent or sale.
The important aspect which differentiates this website from other available
website is the API’s consumed in it. User interface is attractive, well designed and
interactive. It offers rich, responsive and more engaging experience. Furthermore,
it has better visual effects through jQuery plugins and offers more interactivity than
traditional browser applications which only users HTML and HTTP. This application
also contains a mashup of multiple APIs on single platform. It has multiple login
functionality which allow user to either login through Facebook and Twitter’s
credential or to create a new account for user. It provides user’s current location
which helps customer to search nearby place for stay. User can easily get the full
description, google map location and contact details for interested property.
Moreover, customer can buy housewares according to reviews. Besides, new user
can read recent updates of website’s page available on Facebook. APIs provided by
Facebook allow users to share and like any property on their Facebook page.
This single page application is developed using advanced client side jQuery effects
and animated features which makes it even more attractive. The design and tools
used to create this application are explained in following section. In addition,
further sections also entails the literature review and discusses various articles used
to design and implement this application.

2TECHNICAL REPORT
2. MOTIVATION
“Properties in Ireland” is a smart way of buying and selling properties which
require customers to only visit the website and search property according to their
choice. The next section will elaborate more on project’s scope and area of
contribution.
2.1 project Scope
This single page application is an online real estate space specially designed
for house owners, real estate agents and builders to rent and sell their properties
available in Ireland. It also offers a rich interface feature for property buyers to
search and find properties that match their requirement. Free online
advertisement feature attracts lots of user to post their ads without any cost and
consume the application. Therefore, this platform has been designed to benefit
customers in terms of choice, money and time.
In this application, one can directly contact the person who wants to sell or buy.
Thus, online booking is possible while sitting at home. It also provides galore of
options to look at. User can go through all the pictures of properties without
moving from his place. Moreover, user can narrow down its choice by selecting
location, area, other specifications and pricing details. Not only this, user can
compare two properties as per his requirement and then can take buying decision.
2.2 Area of Contribution
In this fast pace world where time is a significant constraint and everything
is available just a click away. Those days are gone where online shopping is
considered as a platform to buy only clothes and accessories. Online shopping is
getting popular for other categories as well like books, properties, housewares etc.
Earlier properties are bought in a very different way like firstly arranging meetings

3TECHNICAL REPORT
with agent and property dealers and then buying according to their advice.
However, through this way customer can come under the trap of fraud people who
can manipulate innocent customers while dealing with property price. This could
also waste customer’s time in travelling if he/she doesn’t like the location,
surroundings or any other features of property. But currently, with increasing
internet connectivity where people are more familiar and active, online booking
and buying property has found great recognition in market.
This online property portal offers great variety of choice for both renting and buying
properties. User doesn’t have to worry about his current location, no matter where
user is present as user can easily browse through results from all across the world
and make decisions. Further, this application offers great deals and discounts on
properties and houseware products. So, offers available on online booking can save
huge amount of money. Customers can pick their favorites property and can share
them with their Facebook friends in a single click. New users can login using
Facebook credentials without creating registering themselves. The important
feature of this application is friendly and understandable interface. The dashboard
of “properties in Ireland” portal is easy to use, responsive and understandable. The
application created works fine in all devices irrespective of their screen size, for
instance mobiles, tablets and laptops.
3. STATE OF THE ART REVIEW
The web development has rapidly evolved in building Rich Internet
Applications to comfort user consuming applications. Rich & interactive interface,
fast processing, minimal time for sending and retrieving response for user’s request
are few significant characteristics which are considered while designing this
application “Properties in Ireland”.
Rich Internet Applications (RIAs) deliver responsive user interface and richer
interactive capabilities which creates an illusion among users that interaction is
dynamic and continuous such that users do not have to wait or refresh the page for
server response. These capabilities make application easier to use and more
functional, thus enhance user experience. Earlier, web applications exhibited
various issues related to user interactivity and performance specially if compared

4TECHNICAL REPORT
with desktop applications. Paulson, G. L. (2005) says that in typical web
applications, users waste their time waiting for entire web pages to reload, even
for minor updates. As a result, customer’s loyalty is difficult to obtain as customers
are getting too demanding while accessing web applications.
Lawton, G. (2008) says RIA offers improved applications, greater user interaction,
quality web experience and responsive user interface which makes it significantly
important and popular. Generally, user-interface activities are monitored by clients
in RIA where the application server processes the client request and sends the
updated data back to the client as a response. This approach, in turn reduces the
workload on server resources, allowing the server to manage more clients
concurrently. This results in less client-server traffic and better performance.
Therefore, “Properties in Ireland” is developed with increased responsiveness as
users do not have to wait for data exchange between server and client. This occurs
due to asynchronous communication where client’s engine hits server without
even waiting for any user-activity to happen such as clicking link.
Orbital et al (2007) state that designing interface is not an easy task as
complications begins when developers try to embed functional and non-
functionality requirements. As a result, author suggests an object oriented
approach of Abstract-Data-View (ADV) for data handling and Model-View-
Controller (MVC) architecture for other functionalities. So, user interface design of
this application uses MVC architecture.
Our application “properties in Ireland” require frequent requests to the server for
required results, thus making AJAX call using JSON objects is considered as suitable
option. Moreover, Fernandes et al (2012) think that JavaScript and AJAX can
retrieve the content from the web server without refreshing web page. Lawton, G.
(2008) assert that applications implementing Ajax usually, contains asynchronous
JavaScript code written in HTML page that runs within browser engine. The engine
is responsible for receiving user input and presenting the appropriate data
requested by the client side. Further, if data required by user is not found on the
client side, then it send requests to server to provide the data, fetch the data from
server and update the current web page assessed by user without reloading all
contents again. So, this allows the client to continue interaction with improved
performance and responsiveness.

5TECHNICAL REPORT
Figure 1. In (a) a traditional Web application, user actions trigger an HTTP request to a web server,
which processes the request and returns an HTML page to the client. Additional requests lock up
the application until the system updates the page. (b) Ajax applications create a JavaScript-based
engine that runs on the browser. The engine intercepts user inputs, displays requested material,
and handles many interactions on the client side. If the engine needs more data, it requests
material from the server in the background, while letting the user continue to interact with the
application. (Paulson, G.L. (2005))
This application is developed using various APIs of Facebook, Google Map, YouTube
and Amazon’s S3. Despite the fact of integrating multiple APIs within application,
performance of application is not degraded as every individual component runs
independently. Moreover, Browser side operations are efficiently controlled by
JavaScript functions which perform numerous actions on user’s request. In addition

6TECHNICAL REPORT
to this, JQuery, Hein, R. (2012) explains how JQuery makes everything simpler to
develop eye catching menus with advanced effects. Both JQuery and JavaScript
functionalities are added to ensure single page application. This application used
carousel JQuery slider in houseware section to display different and most popular
images of properties. JQuery provides reduce complexity by numerous functions to
achieve advance effects for animation. This application has a YouTube videos
embedded which plays on the same page even after clicking the other videos link.
Security concerns are also taken care of while developing the web application using
AJAX and JavaScript. Few measure are implemented like encryption of credential
and data stored in S3, validation on textbox while user entering inputs and many
more.
4. APPLICATION URL
URL: http://propertiesinireland.s3-website-eu-west-1.amazonaws.com/
Figure2: Home Page of application

7TECHNICAL REPORT
5. DESIGN
5.1 Approach for design
“Properties in Ireland” has been designed and developed in several phases.
Model which has been used in this app development is Spiral software
development life cycle.
Figure3: Spiral Model
Application has been developed using this model at various stages with inclusion
of different APIs consumed and components added. Timely based modifications
has been done in design, implementation and documentation of project.
5.1.1 Requirement Gathering:
In this phase, the specifications and the requirements for the developed application
are gathered. In order to develop a RIA, the libraries for JavaScript, JQuery and
bootstrap theme are decided. Various personas are created from different people
according to the application’s requirement. Wireframes are also designed for
application development.

8TECHNICAL REPORT
5.1.2 Application Design:
In this phase we design the prototype of the application along with the architecture
of the application including all the components. In order to define the interface of
the user we use wireframes in the application. Any possible alterations or
corrections in the design are performed using the spiral model.
5.1.3 Development:
This phase focuses on the development of application by considering the
abstraction of data and various security measures required during the
development phase of the application.
5.1.4 Testing:
This phase includes the testing of the built application. Out of the several testing
approaches, unit and integration testing is chosen during the development phase.
In order to perform regression and functional testing, ad-hoc model is used to
perform the test cases with the use of spiral model.
5.2 User interface Design
This application enable user to perform various activities related to selling,
buying and renting properties in Ireland. It can accept multiple users at same time,
each performing different events.
Although, Admin can login into the application using registered credentials
or Google’s authentication and can manage other operations. Various
functionalities provided by the application are as follows:
1. Google and Twitter authentication
2. Sign up for new users
3. Valid input for choosing properties
4. Search functionality
5. More info button for details

9TECHNICAL REPORT
6. current location of user
7. property images from various views
8. Google map location of searched properties
9. Contact details for advisors
10. Buying houseware products
11. Sharing products or properties on Facebook
12. View property you tube videos
13. Free online advertisement of properties
14. Edit details of property
15. Contact form
5.2.1 UI Architecture
Figure: home page of application

10TECHNICAL REPORT
Figure: UML diagram of application
This RIA application has been developed by incorporating different components on
the same which makes it single page application. The JavaScript functions and the
JQuery existing libraries allow us to create this RIA.
a) Navigation:
This function allow the user to navigate from one page to another without
even refreshing the page. Home page of application contains all the pages in
the navigation bar. This bar displays the following div id tags when the page
loads. The hover function on the any div tag of navigation bar will highlight it
and click on the div will scroll down to the respective page.
1. Home page – welcome page

11TECHNICAL REPORT
2. For sale – user can buy properties
3. To let- user can rent properties
4. Houseware- user buy houseware
5. Service – post online free advertisement
6. Contact – user can send give feedback or message
b) Carousel function:
This function will enable the scrolling of the image in a web page which
makes page more attractive and user can view multiple images in few
seconds without clicking anything.
Figure: carousel function code

12TECHNICAL REPORT
Figure: houseware page
c) Sign up/ login:
Figure: user login
Anyone can login to the application through registering or Google
authentication. User’s credential will be saved in Amazon’s S3 in secure
manner. But if user login through Google, then personal details of will be
fetched from Google’s account.

13TECHNICAL REPORT
Figure: sign up with google
d) Search button and dropdown list:
After clicking the search button, the application will fetch the new
properties according to filtration and will replace the existing property ads
with search results ad on the same page.
For Sale page:
Figure: user input for searching properties

14TECHNICAL REPORT
Figure: search results for properties
Figure: detail of product for buying houseware/property
e) Current location:
User can find out their current location and the exact value of latitude and
longitude using Google Map APIs.

15TECHNICAL REPORT
Figure: User’s latitude and longitude
f) You tube videos:
This application displays few you tube videos links on the houseware page.
These videos are embedded to develop more interest in users for buying
properties. The Ajax function is called to change the src of the iframe to the
new video URL. On the click of the links, requested video run and stays on
the same page.

16TECHNICAL REPORT
Function: you tube video using Ajax (Houseware page)
Figure: you tube video using Ajax
g) Post online free Advertisement for property
In our application properties in Ireland, we used Amazon’s S3 which
provides us secure, durable and highly scalable object storage. We integrate
it with our web service interface to store the data need to upload on bucket
(jyotiwebservice) and then we provide the functionality to edit the data if
required by user. We also retrieved the data in a file by downloading the file

17TECHNICAL REPORT
from the S3 bucket. S3 provides durable and secured infrastructure to store
data in very low cost.
Figure: JSON data uploaded to S3 bucket (jyotiwebservice)
h) Facebook embedded posts
This API of Facebook allows us to put public post of a person or a page into
our website content or web page, but public posts of page or profile can be
embedded. This post will show the details of page, number of likes, provide
options to further share or comment on it. These posts will enable visitors
to follow or like our page directly from Facebook.

18TECHNICAL REPORT
Figure: Embedded post of Facebook page
Figure: user saving property Ad on AMAZON’s S3

19TECHNICAL REPORT
Figure: Retrieving values from S3 storage.
Figure: text file created in bucket

20TECHNICAL REPORT
Contact page:
Figure: validated contact form
6 ARCHITECTURE
6.1 Application Architecture
Our application “Properties in Ireland” follows three tier client server
architecture for combining decoupled components. MVC architecture
separates the functionalities of model, view and presentation layer from
each other. The presentation layer will provide the view of the application
and the controller helps in routing the data from user to the model and finally
model perform all the updates and manipulation operation on the data.
Architecture of the application is designed in a way so that it’s easy to
integrate the new services through consuming other web services.
In the development of Rich internet application, we used HTML5, CSS3,
JavaScript, JQuery libraries, JSON objects, AJAX client side development
language. So, view of the application has kept the JavaScript, AJAX and
JQuery code separately from the controller and the model.

21TECHNICAL REPORT
Figure: Application Architecture of Properties in Ireland
Application allow any user to login and use this to buy or to rent properties. Any
user can buy houseware and can contact the seller or locate his current location on
Google map.
6.2 Security
Properties in Ireland aims to deliver the secure app to maintain the confidentiality
of user’s data and data displayed fetched from other web services. We have
implemented few measure to ensure the availability, integrity and confidentiality
of the user’s credential and other data. Credentials will be encrypted and stored in

22TECHNICAL REPORT
Amazon’s S3. We deployed this application on Amazon’s S3 to ensure high
availability.
Following are the steps that are carried out to ensure security
a) Identification of threats – finding vulnerabilities
b) Implementation of security –measures to eliminate threats
c) Testing for threats – multiple test to check performance & security
The login functionality is secured through credential’s encryption and Google
authentication. Following measure are implemented for different attacks.
1) SQL injection: the SQL injection attack prevention, we provide the
authentication token for each request.
2) Session expiry: this will prevent the cross side scripting attack due to setting
expiry time in our application.
3) User input validations: we have put validations in textboxes, email field, data
field etc. Therefore, input field will only accept the correct values.
4) Authentication: We used Google and Twitter login authentication as well as
new user can login to the application by registering. Username and password
will be save in Amazon’s S3 in encrypted format.

23TECHNICAL REPORT
6.3 Toolkits and Frameworks
Various tools and frameworks are used in the development of project to extend
the functionality of our application. These tools helps developers to reduce their
work by providing additional functionality of just using code from already compiled
libraries.
a) JQuery: we used JavaScript functions already written in JQuery library for
DOM manipulation, AJAX handling, and Lightweight animation effects and
for easy navigation. JSON data is efficiently handled using JavaScript.
Moreover, AJAX and JQuery usage reduce the loading of webpage
components on each user request.
b) Bootstrap: It’s a popular front end development framework as it helps in
developing rich internet applications quickly. This makes our application
more responsive and it can also work in mobile phones. It ensure consistency
and can be easily customizable through components provided. We used
Glyphicons, button groups, navbar, labels, jumbotron, dropdowns, carousal,
popovers, buttons etc.
c) Carousal function: In bootstrap theme, the carousel plugin is used to cycle
through different elements. This feature of adding moving images like
slideshow make RIA more attractive.
d) Google API: Users can securely sign in to our website using Google’s Sign-In
API for both authentication and authorization. Add a button “sign in with
Google” in your application. It’s mandatory to collect credentials from

24TECHNICAL REPORT
developer console and the client app can ask for Open ID connect and OAuth
2.0 access token from authorization server of Google which can be used
further for accessing Google API services.
e) Amazon API: In our application properties in Ireland, we used Amazon’s S3
which provides us secure, durable and highly scalable object storage. We
integrate it with our web service interface to store the data need to upload
on bucket (jyotiwebservice) and then we provide the functionality to edit the
data if required by user. We also retrieved the data in a file by downloading
the file from the S3 bucket.
6.4 Data transfer strategies
In this application we have used many strategies for data transfer.
a) Using AJAX request method: our application support Ajax events and data
Handling. AJAX sends the JSON data with either POST or GET method. We
can further parse the response retrieved from the request to ensure
success of event.
Figure: Ajax data transfer strategy
b) Uploading JSON data to S3 bucket:

25TECHNICAL REPORT
Figure: JSON data upload to S3
6.5 Evaluation and testing
Various types of testing has been performed during each phase of spiral
model to ensure the application functionality. We evaluated the
performance or progress of application through various test cases.
a) Unit testing: The test cases are required to check the functionality of
individual component. Testing of these web services was crucial and to
do so, we carried out testing of the web services application during
various phases of development. Repetitive testing of the application
ensured that the web services provided the expected results.
Figure: unit testing for contact form
b) Functional testing:
Functional testing is performed to check the functionality of various
individual components that may be affected by the web services. Data

26TECHNICAL REPORT
stored in Amazon S3 bucket would overwrite the files every time the data
was written. In order to overcome this problem, we wrote the data in
string format along with modifying the filename by appending the
username to create a new copy of the file every time.
c) Security testing :
Test Case 1: entering invalid input in Textbox – SQL injection
Steps: Special character are entered in textbox when new user registers
Result: Errors occurred when user try to enter invalid inputs
Figure: error generated
Test Case 2: Authentication verification
Steps: enter incorrect username and password
Result: unable to login “enter correct username and password”
d) Cross browser testing:
Functionalities of our applications have been verified on different
browser and on different OS. This testing is performed by running the
application on chrome, Mozilla and Internet Explorer.
e) Regression testing:
Regression testing is performed to ensure that all the modules work as
per the requirements after making modifications to the application
code. At the end of each phase of spiral model, we performed
regression testing to check the working of each and every component in
our project.
 Verify user Google profile information fetched.
 Verify user interface
 Validate the data retrieved from Amazon S3.
 Ensure synchronization of embedded post published on website’s
updates with Facebook page.
 Confirm the latitude and longitude of current location using
Google Maps.
 Verify the working of multiple You Tube videos

27TECHNICAL REPORT
 Verifying all components of bootstrap like buttons, jumbotron,
dropdowns etc.
6. SUMMARY
The development of “Properties in Ireland”, a RIA application using client side
scripting helped me in learning and nurturing knowledgeable growth towards
building next generation web application. Properties in Ireland is successfully
designed and developed for users to sell, buy and rent the properties in Ireland. In
order to achieve this, web services for various vendors have been implemented in
the project. This allowed us to learn and know the various APIs available for
development purposes. For any application development, we need to understand
the user’s interest and hobbies. Therefore, creating personas of different people
belonging to different age groups helps us to understand their perspective towards
buying property in Ireland. Further, wireframes are created for rough idea of user
interface web pages. In addition, MVC architecture assists us in combining the
loosely coupled components in application.
Dynamic lightweight web application has been developed using client side
development using existing libraries and web APIs. JavaScript is used to handle the
properties of different div id and classes. Additionally, JQuery is used to add many
animated features. Thus, makes application more attractive to user. Moreover,
asynchronous AJAX calls to the server are made without disturbing other
components of web application. These calls assists us to make many requests
without even refreshing web pages.
There are few limitations which we discovered within application, so there is
still scope for development like adding more events functionality. Other JQuery
plugins and AngularJs can be using for more attractive UI. The development of
“Properties in Ireland” has given an experience to work with multiple web services
while building Rich Internet Application. Apart from this, project helped us
understand various errors of web services and ways to troubleshoot these errors.
The application allows us to explore and examine various advance client side
technologies within application. In nutshell, application development has given me
perfect opportunity to make proper use of JavaScript, AJAX, JQuery and bootstrap
for RIA development.

28TECHNICAL REPORT
7. REFERENCES
Fernandes, N., Costa, D., Neves, S., Duarte, C. & Carri co, L. (2012), Evaluating the
accessibility of rich internet applications, in `Proceedings of the International
Cross-Disciplinary Conference on Web Accessibility', W4A '12, ACM, New York,
NY, USA, pp. 13:1{13:4. [Online]. Available from:
http://dl.acm.org/citation.cfm?id=2207019 [Accessed 29 April 2014].
Hein, R. (2012) ‘6 Things You Need to Know About jQuery’, CIO, 29 April. Available
at: http://www.cio.com/article/2394876/java/6-things-you-need-to-know-about-
jquery.html [29 April 2015]
Lawton, G. (2008) ‘New Ways to Build Rich Internet Applications’, Published by
the IEEE Computer Society, pp. 10-12
Paulson, G. L. (2005) ‘Building Rich Web Applications with Ajax’, Published by the
IEEE Computer Society, pp. 14-17

ADVANCE CLIENT SIDE REPORT

More Related Content

What's hot

Similar to ADVANCE CLIENT SIDE REPORT

ADVANCE CLIENT SIDE REPORT