Gives an overview of web based system

Table of Contents
List of Figures..............................................................................................................v
List of Tables............................................................................................................... vi
Notions and Abbreviations........................................................................................vii
Geographically Encoded Objects for RSS feeds...............................................................................................vii

Chapter 1...................................................................................................................... 1
Introduction.................................................................................................................. 1
1.1. Introduction..................................................................................................................................................1
1.2. Our approach...............................................................................................................................................2
1.3. Thesis structure............................................................................................................................................3

Chapter 2...................................................................................................................... 4
Web-based system: model, architecture.....................................................................4
2.1. Introduction .................................................................................................................................................4
2.2. Web-based system model..............................................................................................................................4
2.2.1. Static web model...................................................................................................................................4
2.2.2. Dynamic web model.............................................................................................................................6
2.3. Dynamic web-based system architecture.....................................................................................................8
2.3.1. Three-tier architecture..........................................................................................................................9
2.3.2. Client design: Thin client and rich client............................................................................................13
2.4. Web 2.0 and virtual community.................................................................................................................14
2.5. Summary.....................................................................................................................................................16

Chapter 3: .................................................................................................................. 17
Web-based Geographic Information System...........................................................17
3.1. Geographic Information System overview.................................................................................................17
3.1.1. Definition............................................................................................................................................17
3.1.2. Data representation in GIS system.....................................................................................................17
3.1.3. Other terms in GIS system..................................................................................................................19

3.2. Web-based Geographic Information System..............................................................................................20
3.3. Microsoft Virtual Earth..............................................................................................................................22
3.4. Summary.....................................................................................................................................................24

Chapter 4:...................................................................................................................25
GreenPeace system.....................................................................................................25
4.1. Introduction................................................................................................................................................25
4.2. Functional and non-functional requirements.............................................................................................25
4.2.1. Functional requirements.....................................................................................................................25
4.2.1. Non-functional requirements..............................................................................................................26
4.3. System architecture....................................................................................................................................26
4.3.1. Presentation tier..................................................................................................................................28
4.3.2. Business logic tier...............................................................................................................................29
4.3.3. Data access tier...................................................................................................................................30
4.4. Summary.....................................................................................................................................................30

Chapter 5:...................................................................................................................31
GreenPeace implementation.....................................................................................31
5.1. Introduction................................................................................................................................................31
5.2. Virtual Earth map control..........................................................................................................................31
5.2.1. Properties............................................................................................................................................32
5.2.2. Methods..............................................................................................................................................32
5.2.3. Events.................................................................................................................................................33
5.3. Silverlight control.......................................................................................................................................35
5.3.1. Host control........................................................................................................................................36
5.3.2. Popup control......................................................................................................................................38
5.4. GeoRSS data collection..............................................................................................................................39
5.5. Windows Communication Foundation web services..................................................................................40

5.6. RSS Feed with proxy..................................................................................................................................44
5.7. Database access.........................................................................................................................................47
5.8. Summary.....................................................................................................................................................48

Chapter 6: .................................................................................................................. 50


Demonstration............................................................................................................50
6.1. System Requirements..................................................................................................................................50
6.1.1. Client Side..........................................................................................................................................50
6.1.2. Server Side..........................................................................................................................................50
6.2. Use cases....................................................................................................................................................50
6.2.1. First look at GreenPeace.....................................................................................................................50
6.2.2. Sign in.................................................................................................................................................51
6.2.3. Work with GreenPeace.......................................................................................................................51
6.2.3.1. Home menu......................................................................................................................................53
6.2.3.2. Features menu..................................................................................................................................53
6.2.3.2. Services menu..................................................................................................................................55
6.2.4. Context menu......................................................................................................................................56
6.3. Application evaluation...............................................................................................................................59
6.3.1. Benefits of application........................................................................................................................59
6.3.2. Application scopes..............................................................................................................................59

Chapter 7:...................................................................................................................61
Conclusion.................................................................................................................61


List of Figures
Figure 2.1

Static web model

Figure 2.3

Three-tier architecture

Figure 3.1

Raster map image

Figure 3.2

Vector map image

Figure 3.3

Three-tier model in Web GIS system

Figure 3.4

Virtual Earth in action

Figure 4.1
Figure 5.1

System Architecture
Web service model

Figure 5.2

Database diagram

Figure 6.1

Full view of GreenPeace

Figure 6.2

Sign in form

Figure 6.3

Docklet menu

Figure 6.4

Image viewer

Figure 6.5

Bookmark block

Figure 6.6

Tag block with information box

Figure 6.7

Events box

Figure 6.8

Statistic box

Figure 6.9:

Search Block and result

Figure 6.10: Routing on the map


List of Tables

Table 2.1

ASP.Net simple code

Table 2.2

ASP.Net output

Table 2.3

Simple HTML code

Table 2.4

ASP.Net code to query SQL Server

Table 5.1

GeoRSS format

Table 5.2

VEMap event handler

Table 5.3

Silverlight declaration

Table 5.4

Silverlight event handler

Table 5.5

WCF proxy at Silverlight control

Table 5.6

GeoRSS generator

Table 5.7

WCF Service declaration

Table 5.8

WCF Service implementation

Table 5.9

Statistic web service implementation

Table 5.10

Proxy implementation

Table 5.11

GeoRSS format

Table 5.12

RSS Feeder


Notions and Abbreviations

GIS

Geographic Information System

SMS

Short Message Service

RSS

Really Simple Syndication

HTML

Hypertext Markup Language

ASP

Active Server Page

JSP

Java Server Page

XML

Extensible Markup Language

WCF

Windows Communication Foundation

SOAP

Simple Object Access Protocol

GeoRSS

Geographically Encoded Objects for RSS
feeds

Chapter 1
Introduction

1.1. Introduction
The development of human society makes a change of
environment to satisfy their needs. It produces consequently
destructive effects to the environment. In the reverse direction,
environmental changes affect human being deeply, such as forest
destroyed, the global warming, etc. It is the ring alarm about World
Environment which is in danger nowadays.
The importance of environmental protection was realized and
mentioned many years ago. In November 11th, 1997, Kyoto
Protocol[1] of reducing Greenhouse was agreed, covers more than 170
countries in practical actions. According to Word Resources Institute,
over 10000 non-governmental organizations which work in
environment preserving field were established up to first decade of
21th century.
Regardless all protective activities, the global environment is
getting worse, because the efforts to fight for environmental protection
is too small while the world’s population is raising up very rapidly.
People with their activities such as consuming, producing, building
and so on harm the environment daily. Unfortunately, almost of them
ignore or do not realize it. The perceptive ones do not know the best
way to share with others, to react for better place.
Modern technologies with their innovative products such as
Internet, World Wide Web and Mobile Phone are powerful tools
which can help to solve all problems above.
1

GreenPeace is an instance of these solutions, a web-based system
for community to incorporate to monitor and notify all environments
problems to government and corresponding offices. With GIS built in,
it is the open information channel for all of people to join in
monitoring environment.
In next chapters, we will explain in details the structure and works
of GreenPeace.
1.2. Our approach
This web-based application changes the way people get and share
environmental information, in which users can submit or get
environmental information about every place all over the world with
the use of modern communication technologies such as Internet and
mobile network. An exciting looked, GIS-based digital map Virtual
Earth empowered with productive database platform SQL Server, and
comprehensive
data
communication
component
Windows
Communication Foundation, allows information to be updated
immediately, visually and easily. In case of emergency, the processing
speed of GreenPeace is a key factor which helps people, Government
and related organization together react sudden environmental
problems efficiently.
On the other hands, GreenPeace also supports people in notifying
environmental hazards as well as in searching not only the information
but also the solution for problems from professional resources. Every
individual can contribute effort to react environmental events

happening around us.
By making a social network, GreenPeace improves the quantity
and quality of members who take part in protecting environment

2


campaign. People will raise their perception and skills from other
friends, they also can help others.
In summary, GreenPeace supplies users a virtual visual
environment to preserve, lead to help people protect their live
environment.
1.3. Thesis structure
The rest of this thesis is organized as below:
Chapter 2: gives an overview of web based system.
Chapter 3: introduces the web-based GIS Virtual Earth.
Chapter 4: presents the GreenPeace system with system
architecture and implementation.
Chapter 5: demonstrate GreenPeace system with use cases.
Chapter 6: gives a summary and objectives in the future.

3


Chapter 2
Web-based system: model, architecture

2.1. Introduction
A web-based system is a client/server model, in which browser
is client connects to web server using Hyper Text Transfer Protocol

(HTML). Data transferred is often Hyper Text Markup Language
(HTML) page and related resources. Browser downloads all resources
then renders contents and displays them in user screen.
World Wide Web today is the most used communication channel
over internet. After ten years of development, World Wide Web has
grown to serve more requests from users all over the world. In this
chapter, we explore the development of the web based system model
and architecture.
2.2. Web-based system model
Web-based system nowadays has the traditional principle:
client/server model, in which client is web browser and server is web
server, using HTTP protocol. There are two kinds of web-based
system design: static web and dynamic web[2].
2.2.1. Static web model
Static web model is the model in which the contents and
resources of web page are not changed. The contents of these pages
are no more than just information presented on HTML tags. The
contents of these pages are predefined, cannot be changed or
customized.
This diagram below show how static web is served:

4


Figure 2.1: Static web model
1. Web browser sends a HTTP request for specified page to a web
host server.
2. Web Server searches the page on local directory containing the
corresponding contents.
3. Web Server collects all information needed before responding.

4. Web Server sends response to web browser for displaying contents
on screen.
Advantages of this model:
- Build web sites quickly and easily
- Decrease server processing
Disadvantages of this model:
- Difficult to maintain and develop large site
5


- Difficult to keep content consistent and up to date
2.2.2. Dynamic web model
Dynamic web model provides user ability to modify output
contents based on their input. Search engines, online shopping stores,
portals, etc. are all examples or dynamic web model. It is not possible
with HTML alone to build dynamic web model. Dynamic web model
is based on technology call “server-side” technology: Use web engine
to identify user input, process information and restructure output to
user. Web engine also utilize database to store and access data.
There are some technologies used for web engine: Active Server
Page (ASP), Hypertext Preprocessor (PHP), Java Server Page (JSP),
Python, Perl, etc.
The diagram below show how dynamic web page is served:

6


Figure 2.2: Dynamic web model
1. Web browser sends a HTTP request for specified page to a web
host server.

2. Web Server searches the page on local directory containing the
corresponding contents.
3. Web Server collects all codes and HTML contents needed before
responding.
4. Web Server call web engine to parse codes and process them to
corresponding response.
5. Web Server sends response to web browser for displaying
contents on screen.
Here is the code sample of ASP.NET, using to create the dynamic
<html>
web
contents:
<head>
<title><% Response.Write("Welcome to ASP.NET") %></title>
</head>
<body>
<% Response.Write("ASP.NET code is embedded inside HTML tags")%>
</body>
</html>

Table 2.1: ASP.Net simple code
This code will generate output like
<html>
<head>
<title>Welcome to ASP.NET</title>
</head>

that

<body>

ASP.NET code is embedded inside HTML tags
</body>
</html>
7


Table 2.2: ASP.Net output

2.3. Dynamic web-based system architecture
Dynamic web-based system is client/server architecture that
comprises many components which work separately at cross platform,
such as user interface, functional logic process, data access... For easy
development and management, this system is divided into multi tiers,
each tier has spectacular function and works independently as single
module in order that the change made in one module does not affect
the others, for example the web server are changed from Windows to
Unix, but the presentation code does not change. All of tiers are linked
together to make web system works properly.
Typically, dynamic web-based system has three main
components: the user interface often runs on desktop personal
computer or work station using graphical user interface, the business
logic may consist of one or more separate modules running on
application server, and a Relational database management system
(RDBMS) on database server contains data logic of application. This
is called “Three-tier architecture”.

8


2.3.1. Three-tier architecture

Figure 2.3: Three-tier architecture
Three-tier architecture consists of three main tier of dynamic
web-based system:
2.3.1.1. Presentation tier
This tier is the top most level of system. This tier displays the
contents and related information on screen, often web browser. It may
send requests to lower tier by collecting data input and display results
by getting and processing responses.
The simplest way to implement presentation tier is using HTML.
Hypertext Markup Language (HTML) is the markup language to

9


mark, format the contents of web pages. The web browser gets the
HTML contents from web server, renders them and display on screen.
The code snippet below show a simple HTML page:
<html>
<head>
<title>Welcome to HTML</title>
</head>
<body>

This is a paragraph

</body>
</html>

Table 2.3: Simple HTML code
HTML has less interactive with user, so many platforms are built
to integrate into HTML as embedded object. There are some popular

embedded objects:
- Adobe Flash: Provide high quality user interface with
animations and behaviors. The user interface and logic process can be
programmatic. When browsing a web page that includes Flash object,
browser may download the compile object (with .swf extension), then
call the corresponding interpreter (called “Flash plug-in”) to perform
its logic process.
- ActiveX: The Microsoft’s way to perform logic process.
ActiveX objects like a desktop application, but they base on web
platform with ActiveX plug-in.
- Java applet: A part of Java Platform that runs on the webbased. Java binary codes may be downloaded to browser before
processing.

10


- Microsoft Silverlight: The newest web platform from
Microsoft to perform logic process inside the web browser. Like
Adobe Flash, Silverlight’s user interface and logic behaviors can be
programmatic. It also needs a Silverlight plug-in to run on web
browser.
The appearance of high interactive embedded object inside
HTML page will increase the development of rich internet design, as
mentioning below.
2.3.2.2. Business logic tier
It is the core tier of dynamic web-based system. It receives
requests from presentation tier, processes them and responses the
results. It can control the application by performing detailed
processing in specified scripts.
Business logic tier is web scripting or web engine, often hosted

inside a web server. Web server receives requests from client, and
then calls the appropriate web engine module to process these
requests.
There are some web servers available, all of them are free to use:
Apache web server (can runs on Windows or Linux), Internet
Information Service (IIS - runs only on Windows).
Each web scripting or web engine processes the specified
language, such as PHP, ASP/ASP.Net, JSP, ColdFusion... There are
some kinds of combination with each type of web server with each
type of web engine, the most popular ones are Apache/PHP and
IIS/ASP/ASP.Net.
Web engine has two separated functions:

11


- Perform input/output processing: parse the input form, such as
textbox contents, process it and response the corresponding HTML
contents.
- Access database server to query information: use the database
connection provided by the language platform to access database,
manipulate it for expected logic data.
We will explain the business logic tier in the next chapters.
2.3.2.3. Data access tier
It consists of the database server that contains all logic data of
application. Separating logic data from application into it will make
program scalable and higher performance.
Most of web applications today use Relational Database
Management System (RDBMS) using Structure Query Language
(SQL) to store and manipulate data logic. There are many available

options to implement data access tier: MySQL, Microsoft SQL Server,
Oracle, PostgreSQL... All of theirs have a free edition for personal or
small business web application. All of theirs are cross platform, so
there is no clearly different between them to choose.
In order to access to database server and make SQL command,
web engine platform must enable to provide a database connection, as
string connectionString =
"Server=.\\SQLEXPRESS,Database=GP,Trusted_Connection=Yes,",
SqlConnection sqlConn = new SqlConnection(connectionString),
sqlConn.Open(),
string query = "select * from Locations",
SqlCommand cmd = new SqlCommand(query, sqlConn),
cmd.ExecuteNonQuery(),

example below for SQL Server:

12


Table 2.4: ASP.Net code to query SQL Server
2.3.2. Client design: Thin client and rich client
Presentation tier contributes the most value for successful web
system, because it interacts with user. There are two trends to design
the presentation tier: thin client design and rich client design[3]. Each
has special characteristics, thus developers must consider carefully for
appropriate requirements and purposes.
2.3.2.1. Thin client
Thin client is the pure browser-based solution. This means that
there will be no add-on required on the user’s PC except for the web
browser. A thin client should be completely browser independent, and

not require a specific vendor’s browser or operating system. Almost of
thin client page is pure HTML code, all logic processing is perform as
server side. One example of this kind is Google web search
().
Thin client has the following advantages:
- No add-on download or installation.
- Available from any PC with browser.
- Instant updates and revisions.
It also has the following disadvantages:
- Low level of interactivity
- May have to navigate multiple browser screens to emulate
current client screens.
- Must write to lowest common browser
- Limited access to services on user’ s machine

13


2.3.2.2. Rich client
Rich client is the system designated for the complex web
application with rich information and high interactivity. It often
represents for a windowed-like application. Almost of rich client is
browser dependent, and require browser to download the plug-in to
run the embedded application, such as Flash plug-in. The program
logic is performed at both client side and server side, this means it can
reduce the overload of server. One example of this kind is Silverlight
Showcase ( />Rich client design has the following advantages:
- Rich screen functionality, high level of interactivity
- Balance server side/client side load.
- More access to services on user’s machine.

- Support asynchronous network communication.
It also has the following disadvantages:
- Need extra plug-in downloaded into browser.
- The development of software is more complicated.
The rich client design is preferred to use in web 2.0 and virtual
community because of its advantages. We introduce web 2.0 and
virtual community below.
2.4. Web 2.0 and virtual community
Web 2.0 is a term describing the trend in the use of World Wide
Web technology and web design that aims to enhance creativity,
information sharing, and, most notably, collaboration among users[4].
These concepts have led to the development and evolution of webbased communities and hosted services, such as social-networking sites,
wikis, blogs, and folksonomies.
14


Web 2.0 websites typically include some of the following
features/techniques:
•

Folksonomies (collaborative tagging, social classification, social

indexing, and social tagging)
•

REST and/or XML- and/or JSON-based APIs

•

Rich Internet application techniques, often Ajax-based

•

Syndication, aggregation and notification of data in RSS or Atom
feeds

•

Mashups, merging content from different sources, client- and

server-side
•

Weblog-publishing tools

•

wiki or forum software, etc., to support user-generated content

•

Internet privacy, the extended power of users to manage their own

privacy in cloaking or deleting their own user content or profiles.
Web 2.0 focuses on the user generated contents, enhances the
user experience by providing high interactive user interface. It often
applies rich client application model, gathers all user generated
contents into a unified community, called “virtual community” or
“online social community”.
Online community is a group of people that primarily interact via

internet communication media rather than face to face, for social,
professional, educational or other purposes. It is becoming a
supplemental form of communication between people who know each
other primarily in real life. Online community generated the digital
contents faster than ever communication method in the history. It is
forming the new face of the internet and the communication.

15


2.5. Summary
In this chapter, we discover the comparison between static and
dynamic web based system, we look in the web based system with
three-tier model and its advantages to apply in the web application.
This model, using with rich client design, will be the good choice to
develop fully functional web application with highly interactive user
interface, as we use in our system below.

16


Chapter 3:
Web-based Geographic Information System
3.1. Geographic Information System overview
3.1.1. Definition
Geographic Information system (GIS) is any system integrates
hardware, software, and data for capturing, managing, analyzing, and
displaying all forms of geographically referenced information. [5]
GIS technology can be used for scientific investigations, resource
management, asset management, environmental impact assessment, urban

planning, cartography, criminology, history, sales, marketing, and logistics.
For example, GIS may allow people to see the environmental
information on any specified location in the Earth, or may allow
tourism to advertise about local location to worldwide.
3.1.2. Data representation in GIS system
A GIS system is often associated with a map. There are different
kinds of data representation on a map: raster data type and vector data
type.
- Raster data type: is any kind of digital image, in which a pixel
is the smallest unit, each digital image is a set of pixels. Raster data is
stored in matrix consisted of rows and columns, each cell of matrix is
a pixel which has a discrete value, such as Red-Green-Blue (RGB)
value to represent a discrete color. Raster data can be saved in various
format, from file-standard based such as JPEG, PNG to binary large
object (BLOB) stored in relational database management system, such
as Microsoft SQL Server.

17


Figure 3.1: Raster map image
- Vector data type: can be used to store digital image as a set of
geometrical shapes, such as points, lines and polygons. Each of
these elements is linked together to describe the attribute and the

relationship between each part of object.

18