A web-based system for notifying environment violation.doc

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.................................................................................................................................................1
1.3. Thesis structure..............................................................................................................................................2
Chapter 2..........................................................................................................................3
Web-based system: model, architecture.......................................................................3
2.1. Introduction ..................................................................................................................................................3
2.2. Web-based system model...............................................................................................................................3
2.2.1. Static web model....................................................................................................................................3
2.2.2. Dynamic web model..............................................................................................................................4
2.3. Dynamic web-based system architecture.......................................................................................................6
2.3.1. Three-tier architecture...........................................................................................................................7
2.3.2. Client design: Thin client and rich client.............................................................................................10
2.4. Web 2.0 and virtual community....................................................................................................................11
2.5. Summary......................................................................................................................................................12
Chapter 3: .....................................................................................................................13
Web-based Geographic Information System.............................................................13
3.1. Geographic Information System overview....................................................................................................13
3.1.1. Definition.............................................................................................................................................13
3.1.2. Data representation in GIS system......................................................................................................13
3.1.3. Other terms in GIS system...................................................................................................................15
3.2. Web-based Geographic Information System................................................................................................15
3.3. Microsoft Virtual Earth................................................................................................................................17
3.4. Summary......................................................................................................................................................18

Chapter 4:......................................................................................................................19
GreenPeace system........................................................................................................19
4.1. Introduction.................................................................................................................................................19
4.2. Functional and non-functional requirements...............................................................................................19
4.2.1. Functional requirements......................................................................................................................19
4.2.1. Non-functional requirements...............................................................................................................20
4.3. System architecture......................................................................................................................................20
4.3.1. Presentation tier...................................................................................................................................21
4.3.2. Business logic tier................................................................................................................................22
4.3.3. Data access tier....................................................................................................................................23
4.4. Summary......................................................................................................................................................23
Chapter 5:......................................................................................................................24
GreenPeace implementation........................................................................................24
5.1. Introduction.................................................................................................................................................24
5.2. Virtual Earth map control............................................................................................................................24
5.2.1. Properties.............................................................................................................................................24
5.2.2. Methods...............................................................................................................................................25
5.2.3. Events..................................................................................................................................................25
5.3. Silverlight control........................................................................................................................................27
5.3.1. Host control.........................................................................................................................................28
5.3.2. Popup control.......................................................................................................................................29
5.4. GeoRSS data collection................................................................................................................................30
5.5. Windows Communication Foundation web services....................................................................................31
5.6. RSS Feed with proxy....................................................................................................................................35
5.7. Database access...........................................................................................................................................37
5.8. Summary......................................................................................................................................................38
Chapter 6: .....................................................................................................................39
Demonstration...............................................................................................................39
6.1. System Requirements....................................................................................................................................39
6.1.1. Client Side...........................................................................................................................................39

6.1.2. Server Side...........................................................................................................................................39
6.2. Use cases.....................................................................................................................................................39
6.2.1. First look at GreenPeace......................................................................................................................39
6.2.2. Sign in..................................................................................................................................................40
6.2.3. Work with GreenPeace........................................................................................................................40
6.2.3.1. Home menu.......................................................................................................................................41
6.2.3.2. Features menu...................................................................................................................................42
6.2.3.2. Services menu...................................................................................................................................43
6.2.4. Context menu.......................................................................................................................................45
6.3. Application evaluation.................................................................................................................................47
6.3.1. Benefits of application.........................................................................................................................47
6.3.2. Application scopes...............................................................................................................................47
Chapter 7:......................................................................................................................48
Conclusion.....................................................................................................................48
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 System Architecture
Figure 5.1 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 11
th
, 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 21
th
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.
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
1
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 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.
2
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:
3
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
- 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
4
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:
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.
5
Here is the code sample of ASP.NET, using to create the dynamic web contents:
Table 2.1: ASP.Net simple code
This code will generate output like that
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.
6
<html>
<head>
<title><% Response.Write("Welcome to ASP.NET") %></title>
</head>
<body>
<% Response.Write("ASP.NET code is embedded inside HTML tags")%>
</body>
</html>
<html>
<head>
<title>Welcome to ASP.NET</title>
</head>
<body>
ASP.NET code is embedded inside HTML tags
</body>
</html>
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”.
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 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:
7
<html>
<head>
<title>Welcome to HTML</title>
</head>
<body>
<p> This is a paragraph</p>
</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 web-based. Java binary
codes may be downloaded to browser before processing.
- 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.
8
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:
- 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.
9
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(),
In order to access to database server and make SQL command, web engine
platform must enable to provide a database connection, as example below for SQL
Server:
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
10
- Limited access to services on user’ s machine
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 web-based communities and hosted services, such as social-networking
sites, wikis, blogs, and folksonomies.
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
11
• 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.
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.
12
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.
13
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.
Figure 3.2: Vector map image
14
3.1.3. Other terms in GIS system
- Map overlay: Map overlay is the definition of overlaying many layers of map,
each layer contains spectacular field of information, such as water resource, the depth of
ground, etc. When showing map, one or more layer can be hidden or overlaid for
synthesizing information
- Address Geocoding/ Reverse Geocoding: Address Geocoding/ Reverse
Geocoding is the term of translation between named address (street, city and state,
country) to coordinate address. For example: address named “Hanoi” can be translated
into coordinate system with latitude 21.03217406 and longitude 105.8481450, it is
called Address Geocoding. The Reverse Geocoding is the reverse translation from
coordinate system 21.03217406 and 105.8481450 to named address “Hanoi”.
3.2. Web-based Geographic Information System
There are many kinds of GIS applications: desktop-based GIS, web-based GIS,
and mobile-based GIS. The most popular GIS applications are desktop-based, almost of
them have database included. It does not consist of network model for delivering remote
data logic. This makes that kind of GIS application hard to delivery (with big size of
database), maintain and update.
Web-based GIS may solve all problems. Conforming client/server model, web-
based GIS application can increase the value of itself:
- No more extra installation required: Because of web-based system, the only tool
user needs is web browser that is included in operating system.
- Easy to manage, update database: Database is located at dedicated server that

managers can maintain and update it easily.
- Quick delivery: web-based model make it portable to be delivered quickly and
easily.
Like other dynamic web-based system, web-based GIS system has three-tier
components as shown in diagram below:
15
Figure 3.3: Three-tier model in Web GIS system
There is a little different between web-GIS system and another web-based
system, which is the Map Server. Map Server may contain additional and major data
logic about geography, such as coordinate system, the geometric shapes of specified
land, etc. It also may contain server side script that performs detailed processing.
One of the most popular Map Server is called Web Map Service (WMS)[6].
WMS is introduced by Open Geospatial Consortium, produces maps of spatially
referenced data dynamically from geographic information. This is the middle layer
between client and map server or database server, which represents map data logic as
rendered images.
A standard WMS can do three operations:
- Returns service-level data logic.
- Returns a map with well-defined geographic and dimensional parameters.
- Returns information about particular features shown on a map.
With WMS and predefined map data logic, the most used method to access map
information is using web services to get rendered images and display them on screen. It
helps developers can develop web-based GIS application with low cost and time. There
are some popular web-based GIS systems: Google Maps, Yahoo! Maps, and Microsoft
Virtual Earth. All of them are free, easy to use, and fun to develop application.
16
3.3. Microsoft Virtual Earth
Microsoft Virtual Earth is free, easy to use product for anybody who has a
computer and internet connection could travel all around the world with high resolution
imagery. Virtual Earth has two editions: desktop edition and web edition. The web

edition - web-based GIS application – is not only a product, it is also a platform with
rich resources to disseminate knowledge. These image resources are real photographs
taken from satellites in the space. The imagery is associated with names of places, cities
towns, political borders, etc. in some select countries Virtual Earth also provides street
level imagery, which has the street names, names of important buildings landmarks, etc.
Moreover, Virtual Earth provides different types of images. There are many
different kind of images such as satellite imagery, bird’s eye view, aerial, etc. Images
are not all that Virtual Earth provides. It also provides very useful and relevant data for
different places on earth. The data like names, coordinate data, and different types of
listings is very useful.
Virtual Earth is designed for common usage, it is very easy to user even at the
first time. It is also fully interactive program. While viewing first you will see a map of
the whole world, then with the help of simple controls you can focus and zoom in at any
place to get the details. When you are at a higher zoom level only some important places
are market however when you focus at a particular point you get the detailed images for
that place. In this way, the screen never gets crowded with names and details and even
then, Virtual Earth provides you fine details for each region on the map.
17