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 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 11th, 1997, Kyoto Protocol[1] of reducing Greenhouse was agreed, covers more than 170 countries in practical actions. According to Word Resources Institute, over 10000 non-governmental organizations which work in environment preserving field were established up to first decade of 21th century. Regardless all protective activities, the global environment is getting worse, because the efforts to fight for environmental protection is too small while the world’s population is raising up very rapidly. People with their activities such as consuming, producing, building and so on harm the environment daily. Unfortunately, almost of them ignore or do not realize it. The perceptive ones do not know the best way to share with others, to react for better place. Modern technologies with their innovative products such as Internet, World Wide Web and Mobile Phone are powerful tools which can help to solve all problems above. 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 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 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 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. 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:
 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. 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. 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 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 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 inte