A web-based system for notifying environment violation.doc

A web-based system for notifying environment violation

Table of Contents

Chapter 1 1

Introduction 1

1.1 Introduction 1

1.2 Our approach 2

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

References 49

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 satisfytheir needs It produces consequently destructive effects to the environment In thereverse direction, environmental changes affect human being deeply, such as forestdestroyed, the global warming, etc It is the ring alarm about World Environmentwhich is in danger nowadays

The importance of environmental protection was realized and mentioned manyyears ago In November 11th, 1997, Kyoto Protocol[1] of reducing Greenhouse wasagreed, covers more than 170 countries in practical actions According to WordResources Institute, over 10000 non-governmental organizations which work inenvironment 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’spopulation is raising up very rapidly People with their activities such as consuming,producing, building and so on harm the environment daily Unfortunately, almost ofthem ignore or do not realize it The perceptive ones do not know the best way to sharewith others, to react for better place

Modern technologies with their innovative products such as Internet, WorldWide Web and Mobile Phone are powerful tools which can help to solve all problemsabove

GreenPeace is an instance of these solutions, a web-based system for community

to incorporate to monitor and notify all environments problems to government andcorresponding offices With GIS built in, it is the open information channel for all ofpeople to join in monitoring environment

In next chapters, we will explain in details the structure and works ofGreenPeace

1.2 Our approach

This web-based application changes the way people get and share environmentalinformation, in which users can submit or get environmental information about everyplace all over the world with the use of modern communication technologies such asInternet and mobile network An exciting looked, GIS-based digital map Virtual Earthempowered with productive database platform SQL Server, and comprehensive datacommunication component Windows Communication Foundation, allows information

to be updated immediately, visually and easily In case of emergency, the processingspeed of GreenPeace is a key factor which helps people, Government and relatedorganization together react sudden environmental problems efficiently

On the other hands, GreenPeace also supports people in notifying environmentalhazards as well as in searching not only the information but also the solution forproblems from professional resources Every individual can contribute effort to reactenvironmental events happening around us

By making a social network, GreenPeace improves the quantity and quality ofmembers who take part in protecting environment campaign People will raise theirperception 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 andimplementation

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.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 Thereare 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 pageare not changed The contents of these pages are no more than just informationpresented on HTML tags The contents of these pages are predefined, cannot bechanged 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 correspondingcontents

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 ontheir 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 webengine to identify user input, process information and restructure output to user Webengine 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 correspondingcontents

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 correspondingresponse

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 manycomponents which work separately at cross platform, such as user interface, functionallogic process, data access For easy development and management, this system isdivided into multi tiers, each tier has spectacular function and works independently assingle 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 presentationcode does not change All of tiers are linked together to make web system worksproperly

Typically, dynamic web-based system has three main components: the userinterface often runs on desktop personal computer or work station using graphical userinterface, the business logic may consist of one or more separate modules running onapplication server, and a Relational database management system (RDBMS) ondatabase server contains data logic of application This is called “Three-tierarchitecture”.

2.3.1 Three-tier architecture

Figure 2.3: Three-tier architectureThree-tier architecture consists of three main tier of dynamic web-basedsystem:

2.3.1.1 Presentation tier

This tier is the top most level of system This tier displays the contents andrelated information on screen, often web browser It may send requests to lower tier bycollecting data input and display results by getting and processing responses

The simplest way to implement presentation tier is using HTML HypertextMarkup 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 themand display on screen.

The code snippet below show a simple HTML page:

- Adobe Flash: Provide high quality user interface with animations andbehaviors 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”) toperform 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 binarycodes may be downloaded to browser before processing

- Microsoft Silverlight: The newest web platform from Microsoft to performlogic process inside the web browser Like Adobe Flash, Silverlight’s user interfaceand logic behaviors can be programmatic It also needs a Silverlight plug-in to run onweb browser

The appearance of high interactive embedded object inside HTML page willincrease 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 frompresentation tier, processes them and responses the results It can control theapplication by performing detailed processing in specified scripts

Business logic tier is web scripting or web engine, often hosted inside a webserver Web server receives requests from client, and then calls the appropriate webengine module to process these requests

There are some web servers available, all of them are free to use: Apache webserver (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 asPHP, ASP/ASP.Net, JSP, ColdFusion There are some kinds of combination witheach type of web server with each type of web engine, the most popular ones areApache/PHP and IIS/ASP/ASP.Net

Web engine has two separated functions:

- Perform input/output processing: parse the input form, such as textboxcontents, process it and response the corresponding HTML contents

- Access database server to query information: use the database connectionprovided by the language platform to access database, manipulate it for expected logicdata

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 higherperformance

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, MicrosoftSQL Server, Oracle, PostgreSQL All of theirs have a free edition for personal orsmall business web application All of theirs are cross platform, so there is no clearlydifferent between them to choose

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 engineplatform must enable to provide a database connection, as example below for SQLServer:

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 clientdesign and rich client design[3] Each has special characteristics, thus developers mustconsider 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 noadd-on required on the user’s PC except for the web browser A thin client should becompletely browser independent, and not require a specific vendor’s browser oroperating 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 clientscreens

- 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 richinformation 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 isperformed at both client side and server side, this means it can reduce the overload ofserver 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 communitybecause 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 Webtechnology and web design that aims to enhance creativity, information sharing, and,most notably, collaboration among users[4] These concepts have led to thedevelopment and evolution of web-based communities and hosted services, such associal-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

 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 webbased system, we look in the web based system with three-tier model and itsadvantages 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 highlyinteractive user interface, as we use in our system below

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 allowpeople to see the environmental information on any specified location in the Earth, ormay 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 datarepresentation 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 smallestunit, each digital image is a set of pixels Raster data is stored in matrix consisted ofrows and columns, each cell of matrix is a pixel which has a discrete value, such asRed-Green-Blue (RGB) value to represent a discrete color Raster data can be saved invarious format, from file-standard based such as JPEG, PNG to binary large object(BLOB) stored in relational database management system, such as Microsoft SQLServer

Figure 3.1: Raster map image

- Vector data type: can be used to store digital image as a set of geometricalshapes, such as points, lines and polygons Each of these elements is linkedtogether to describe the attribute and the relationship between each part ofobject

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 forsynthesizing information

- Address Geocoding/ Reverse Geocoding: Address Geocoding/ ReverseGeocoding is the term of translation between named address (street, city and state,country) to coordinate address For example: address named “Hanoi” can be translatedinto coordinate system with latitude 21.03217406 and longitude 105.8481450, it iscalled Address Geocoding The Reverse Geocoding is the reverse translation fromcoordinate 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 deliveringremote data logic This makes that kind of GIS application hard to delivery (with bigsize of database), maintain and update

Web-based GIS may solve all problems Conforming client/server model, based GIS application can increase the value of itself:

web No more extra installation required: Because of webweb based system, the onlytool user needs is web browser that is included in operating system

- Easy to manage, update database: Database is located at dedicated server thatmanagers can maintain and update it easily

- Quick delivery: web-based model make it portable to be delivered quickly andeasily

Like other dynamic web-based system, web-based GIS system has three-tiercomponents 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-basedsystem, which is the Map Server Map Server may contain additional and major datalogic about geography, such as coordinate system, the geometric shapes of specifiedland, 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 spatiallyreferenced data dynamically from geographic information This is the middle layerbetween client and map server or database server, which represents map data logic asrendered 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 mapinformation 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, andMicrosoft Virtual Earth All of them are free, easy to use, and fun to developapplication

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 realphotographs 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 fordifferent 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 ofthe 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 accessWeb 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 aboutthe Earth Web-based GIS system has many advantages, becomes the leading platformfor GIS application Microsoft Virtual Earth is one of web-based GIS system canprovide 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 tobuild a web-based GIS system for virtual community to notify and monitor allenvironmental problems Our idea is building a web-based system applying the GISfeatures 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 peopleand the government, provide the referenced information about environment to thegovernment

This system is a web application with rich client which using web services forcommunication between client and server We will explain on detail the description ofrequirements, 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 ispolluted

- Allow user create new report and location visually by dragging and droppingicon 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 ofdanger, status of environment, video or images for illustration etc by to clickinto its icon on the map

- Synthesize information and submit as email to government or correlativeorganization

4.2.1 Non-functional requirements

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

- Flexibility: easy user tool box to help users

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

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

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

- Compatibility: cross-platform, cross-browser, no extra software installationrequired

- 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 thatare supplied according its permission

4.3 System architecture

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

GreenPeace applied almost top features of Web 2.0, such as tagging, onlinecommunity, content management with blocking… It builds elegant user interface withsimplicity, clarity and interactivity by using JavaScript interaction with SilverlightControl and built in Virtual Earth Map Control It has a intelligent business logic usingASP.Net and productive database Server using SQL Server

The following diagram describes the system architecture with all componentsincluded:

Figure 4.1: System Architecture

4.3.1 Presentation tier

Presentation tier is based on Silverlight control and JavaScript for buildinginteractive user interface It also makes connection to send Web Service’s requests toserver and process server’s responses Browser has to install Silverlight 2.0 Beta 1runtime, JavaScript has to be enabled in order to enjoy application Presentation tierhas two main components:

4.3.1.1 Virtual Earth map control

- Virtual Earth Map Control (VEMap) loads image data from digital map VirtualEarth and displays on screen VEMap support many display type with manyamazing useful features: