Gives an overview of web based system

List of FiguresFigure 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 systemFigure

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

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 systemFigure 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 boxFigure 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 ServerTable 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 controlTable 5.6 GeoRSS generator

Table 5.7 WCF Service declaration

Table 5.8 WCF Service implementation

Table 5.9 Statistic web service implementationTable 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

Modern technologies with their innovative products such as Internet, World Wide Web and Mobile Phone are powerful tools

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

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

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:

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 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:

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 web contents:

Table 2.1: ASP.Net simple codeThis 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

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 architectureThree-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:

- 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 based Java binary codes may be downloaded to browser before processing

web 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:

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(),

- 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

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 (http://www.google.com)

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

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 (http://silverlight.net/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:

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 Atomfeeds

server-side

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

GIS technology can be used for scientific investigations, resource

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

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

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:

Figure 3.3: Three-tier model in Web GIS systemThere 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

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.

Figure 3.4: Virtual Earth in actionFor developers, Virtual Earth is good platform for web-based GIS application development It has a built-in API library code written

in JavaScript language to access Web Map Service (WMS), so it is easy to integrate with any website without any concernment about Web Map Service There are various (about 35) controls of the map which developers can use to customize their own web-based GIS

application

3.4 Summary

The GIS system and web-based GIS system provide overall, high quality about the Earth Web-based GIS system has many advantages, becomes the leading platform for GIS application Microsoft Virtual Earth is one of web-based GIS system can provide the good API to developers integrate into their own website with less efforts

Chapter 4:

GreenPeace system 4.1 Introduction

This chapter describes how to combine the technologies mentioned above to build a web-based GIS system for virtual community to notify and monitor all environmental problems Our idea is building a web-based system applying the GIS features to show all information about environmental violation around us The content

of this system is created by users, we make a virtual community so that people can join in to share, monitoring about all environmental problems It will connect the people and the government, provide the referenced information about environment to the government

This system is a web application with rich client which using web services for communication between client and server We will explain on detail the description of requirements, the components of it and the principle for implementation

4.2 Functional and non-functional requirements

4.2.1 Functional requirements

- Show the content in blocks that can be hidden or minimized

- Show the content users submitted directly on the map

- Allow user create reports about the new place at which the environment is polluted

- Allow user create new report and location visually by dragging and dropping icon from toolbox to the map directly

- Update immediately hot news about the environment through Footer tools to provide hit information

- Allow user get more statistics information about a place such as ranking of danger, status of environment, video or images for illustration etc by to click into its icon on the map.

- Synthesize information and submit as email to government or correlative organization

4.2.1 Non-functional requirements

- Sparkling graphic user interface makes the people feel friendly and comfortable with the environment around

- Flexibility: easy user tool box to help users

- Extensibility: application was built base on the Web Service so that new services can be integrated into it

- Sharing ability: application contains many Web services so the third party application can use these services

- Dynamic content: the information is updated immediately by the community

- Compatibility: cross-platform, cross-browser, no extra software installation required

- Effectiveness: take short time to load data from the system because only a part of web page is updated It does not need to load entire web page

- Access management: each user can access content and use many features that are supplied according its permission

4.3 System architecture

GreenPeace applied the three-tier architecture for dynamic web based system It combines rich client design and web-based GIS system at presentation tier, using ASP.Net for business logic and using Microsoft SQL Server for database storage Especially GreenPeace uses Windows Communication Foundation for client/server asynchronous communication

GreenPeace applied almost top features of Web 2.0, such as tagging, online community, content management with blocking… It builds elegant user interface with simplicity, clarity and interactivity

by using JavaScript interaction with Silverlight Control and built in Virtual Earth Map Control It has a intelligent business logic using ASP.Net and productive database Server using SQL Server

The following diagram describes the system architecture with all components included: