A web-based system for notifying environment violation.doc

A web-based system for notifying environment violation

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

4.3.2 Business logic tier 22

4.3.3 Data access tier 23

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

List of Figures

Figure 2.1 Static web modelFigure 2.3 Three-tier architectureFigure 3.1 Raster map imageFigure 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 ArchitectureFigure 5.1 Web service model

Figure 5.2 Database diagram

Figure 6.1 Full view of GreenPeaceFigure 6.2 Sign in form

Figure 6.3 Docklet menuFigure 6.4 Image viewerFigure 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 resultFigure 6.10: Routing on the map

List of Tables

Table 2.1 ASP.Net simple codeTable 2.2 ASP.Net outputTable 2.3 Simple HTML code

Table 2.4 ASP.Net code to query SQL ServerTable 5.1 GeoRSS format

Table 5.2 VEMap event handlerTable 5.3 Silverlight declarationTable 5.4 Silverlight event handler

Table 5.5 WCF proxy at Silverlight controlTable 5.6 GeoRSS generator

Table 5.7 WCF Service declarationTable 5.8 WCF Service implementation

Table 5.9 Statistic web service implementationTable 5.10 Proxy implementation

Table 5.11 GeoRSS formatTable 5.12 RSS Feeder

Notions and Abbreviations

GIS Geographic Information SystemSMS Short Message Service

RSS Really Simple SyndicationHTML Hypertext Markup LanguageASP Active Server Page

JSP Java Server Page

XML Extensible Markup Language

WCF Windows Communication FoundationSOAP Simple Object Access Protocol

GeoRSS Geographically Encoded Objects for RSS feeds

Chapter 1Introduction1.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 communityto 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 informationto 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.

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 requestsfrom users all over the world In this chapter, we explore the development of the webbased 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 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.

<title><% Response.Write("Welcome to ASP.NET") %></title></head>

<title>Welcome to ASP.NET</title></head>

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

</html>

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 architecture

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

<title>Welcome to HTML</title></head>

<p> This is a paragraph</p> </body>

Table 2.3: Simple HTML code

HTML has less interactive with user, so many platforms are built to integrateinto HTML as embedded object There are some popular embedded objects:

- Adobe Flash: Provide high quality user interface with animations andbehaviors The user interface and logic process can be programmatic When browsinga 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 likea 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 onlyon 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=.\\

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, becauseit 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 processingis 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 depthof 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, almostof 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 system

There 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 action

For 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 system4.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 contentof this system is created by users, we make a virtual community so that people can joinin 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 requirements4.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 installation

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: