eChallenges e-2009 Conference Proceedings Paul Cunningham and Miriam Cunningham (Eds) IIMC International Information Management Corporation, 2009 ISBN: 978-1-905824-13-7
An Approach to Web-Based System Construction Balancing Smooth Interaction, Safety and Budget Hosting Andrzej P. URBAŃSKI, Adam WOJCIECHOWSKI, Jędrzej MUSIA Institute of Computing Science Poznań University of Technology, Poznań, 60-965, Poland, Tel. +48 602 125 075, Fax: +48 61 877 1525, Email:
[email protected] Abstract: A common interface for accessing network applications is web browser. However, the beginnings of web-based applications were strongly limited in interaction. In the paper technologies for obtaining smooth interactions in standard browsers are sketched, and then roots and architecture of our solution are presented. It is shown how AJAX technology is incorporated to obtain smooth interaction and preserve many-pages site, and on the other side how to make web page always up-todate from the database on the server perspective. We also discuss our solution in the context of safety problems, and our way of interaction with external web services. Almost all these features are included in our social literacy site www.piszmy.pl.
1.
Introduction
History of computing machines programming began over sixty years ago. The beginnings of software design were focused on number and characters processing in batch mode. In early 70’s the human-computer interface was shifting to processing in more and more interactive manner with graphics and sound used to ease and attract communication. Currently, a common interface for accessing network applications is web browser. However, the beginnings of web-based applications were strongly limited in interaction. User-pull data access paradigm required users to trig all the actions that were computed/performed at server side. User’s screen could be changed only in response to user’s action (clicking an interactive object, sending a query etc.). Moreover, when user performs an action web-browser window becomes empty until web-server produces textual response and than new content begins to load. Interaction with such an application does not go smooth from user’s perspective. One should notice that the drawbacks or limitations of HTTP technology mentioned above were not considered very annoying to users until a new smoother communication technique was proposed. Functionality of web services improving over the years [4] and comfort of interaction with a system available via WWW interface got a speed-up impulse when asynchronous updates of user’s window modules became possible by using AJAX technology [3]. The objective of this paper is to prepare basic software and methodology which enables to obtain smooth interaction of complex web-based systems in web browsers in as much as possible general, cheap and safety manner. In section 2 technologies for obtaining smooth interactions in standard browsers are presented. Sec.3 contains roots of our solution, while in sec.4 we provide well known starting point architecture also used in our system. In sec.5 it is presented how AJAX technology is incorporated to obtain smooth interaction and preserve many-pages site, while in sec.6 we discuss how to make web page always up-todate and sensitive to changes and updates made in the database on the server. Sec.7 contains our solutions to safety issues, and in sec.8 we provide our way of interaction with external web services. Paper is finished with conclusions collected in sec.9. Copyright © 2009 The Authors
www.eChallenges.org
Page 1 of 7
2.
How to Obtain Smooth Interaction in a Standard Web Browsers
Some time ago new software technologies named “Rich Internet Applications”(RIA for short) appeared on the market. Using the technology, when brand new, was costly because of price of the first tools, like Macromedia FLEX 1.0. Currently, programmers have wider choice of alternatives and open source products are available. Unfortunately, many of them are based on JAVA servlets, which makes their hosting difficult and costly. Another approach to allow asynchronous bidirectional data exchange between user and software located on web-server is using AJAX [3] framework. This free technology makes it possible to allow interaction similar to operating stand-alone applications. High efficiency merged with low price of AJAX technology makes it a good alternative even for budget projects. However, designing applications according to AJAX standard requires new skills from programmers. Possibly the need to learn new technology is the reason why applications which utilize the full potential from this approach making web applications as smooth as possible are rare. Most applications, even pioneer solutions developed by the leader – Google, have many points in their interaction schema where application reloads content of web-viewer creating non-elegant drop-outs. Another reason why AJAX approach may be not the preferred solution is marketing requirement, which force software designers to have each web page (each piece of content) addressable-accessible from Internet under unique URL. One should notice that AJAX applications in general do not change the address of the document loaded into web-browser, while user’s screen changes. A separate source of concern is software and user safety. Plenty of web applications use approach based on state identification (multi-character session key generated by web server) to control sequence of user’s actions. If a user or the application does not finish the interaction in a way where the application kills (clears) this state it can be used by another person and introduce the risk of unauthorized access to resources. Another problem when using session identifiers comes from the fact that after some period of time server automatically clears session keys. The practice, focused on user safety, has a drawback: after defined period of time user needs to re-login into the application to continue the work with the same application. Apart from other difficulties that it may cause at software design stage, it is not comfortable for user. A source of risk is also sending non-encrypted login and password through Internet to the server, which is a common practice in web-based applications.
3.
Our Solution Roots
In the paper we present selected functional and implementation details of our web 2.0 [2] application engine. The software was used to run social application: www.piszmy.pl. It is a virtual place for literacy writers which use cooperative manner for more fun and educational reasons. In this practical example we solve step by step all the drawbacks mentioned in section 2. Work on www.piszmy.pl dates back to April 2006. The application was completely redesigned to benefit from AJAX technology in July 2007. In subsequent months we improved the application engine functionality in interactive manner. New changes are planned to be introduced to the engine and functionality in order to use the software to build another web application which will be financially supported by European Project PG 8.01. It is considered that the PHP coded engine will also be available as an open source. Our system is based on PHP/MySQL/JavaScript technologies. The reason for such choice was easily available cheap hosting. Application’s screen is divided into parts which are not changed during a session, may be changed on user’s request or changed every minute. It both optimize data exchange and add smooth interaction to the system. Without any intentional action user of this web2.0 application can observe and trace the following Copyright © 2009 The Authors
www.eChallenges.org
Page 2 of 7
events: other users login and logout to this application, actions the other users perform now (i.e. which story or user profile is inspected), but without naming who is doing this. User can also immediately publish advertisement of his story, which will be seen on each logged user’s screen in a moment from publishing. Our software is currently used to drive web 2.0 application i.e. social web site where many people interactively exchange resources. The site is unique in such a way that it enables people to try writing literacy stories in cooperation with each other. It makes smooth interaction almost a must. We have following higher level communication tools available to all users: stories joined by many users enabling each to write in the same time, comments to these stories with the possibility to make rating of corresponding part of the story, interactive chat with optimized communication, internal web service messages enabling fast and ease communication, lists of contacts requiring mutual acceptance, list of bookmarks of stories. Like many web 2.0 sites we use points (as an internal currency) to enable easy management of resources. Our users earn points even from logging every day, from extending a story and also can pay via: mobile phones, PayPal or bank transfer to buy points (more information on web-payment may be found in [5]). Users spend their points on buying avatars, starting new stories, and advertising them. Our team has also a tools which ease the work to manage and moderate texts. It provides administrator with the possibility to check every new text inserted into the system by the users. It also supports distribution of points and managing users registered in the system. We plan to preserve social character of the web sites using this software, but we work on a novel approach, which ease earning money on such a web site popularity and usage.
4.
Obtaining Common Menu in Whole Web Service
One of the common properties of almost all web-pages is that the menu collecting the most significant functions is always available. However, if somebody wants to build such a system in HTML it should be discovered soon that it is impossible without repeating portions of code representing this common menu in different contexts. When such a menu grows as the systems includes more and more functions, keeping all the instances of the menu consistent may be a problem for programmer. A solution to the consistency problem could be in a special designer tool, which repeats inclusion of one source code of common menu in different HTML files or, more popular, to dynamically include common menu during processing on the server request of a certain web page. In PHP for instance “include” instruction can be used for this purpose. But firstly we should build a framework for all areas where particular screen modules will be loaded. If we use tags to build tables it could be done as given on Figure 1:
| Upper left menu | Upper central menu | Upper right menu |
| Middle left menu | Middle central working area | Middle right menu |
| Bottom left menu | Bottom central menu | Bottom right menu | Copyright © 2009 The Authors
www.eChallenges.org
Page 3 of 7
Figure 1. Code Framework of the Whole Web Page Prepared to Enable Independent Updates of Particular Cells (Modules) on User’s Screen.
HTML structure given on fig. 1. when displayed in a web-browser produces a table like the one shown on fig. 2. Upper left menu Middle left menu Bottom left menu
Upper central menu Middle central working area Bottom central menu
Upper right menu Middle right menu Bottom right menu
Figure 2 Overview of the Whole Web Page
In this framework only “Middle central working area” should contain different contents in different contexts. Moreover it will be the core of each file while the rest will be taken from files containing menus. We need at least two such files i.e.: top-left and bottom-right.
| Upper left menu | Upper central menu | Upper right menu |
| Middle left menu | Figure 3 Top-Left File
| Middle right menu |
| Bottom left menu | Bottom central menu | Bottom right menu |
Figure 4 Bottom-Right File
Include”top-left.php”; Middle central working area Include”bottom-right.php”; Figure 5 Central File Skeleton Upper left menu Middle left menu Bottom left menu
Upper central menu Middle central working area Bottom central menu
Upper right menu Middle right menu Bottom right menu
Figure 6 Overview of the Whole Web Page Distingushing Different Source Files
5.
Adding AJAX Power to Common Menu Framework Saving Web Marketing Possibilities
If we look at Figure 6 we can easy notice the following ineffectiveness: entire page is sent from server via Internet to client machine on every action, but only part “middle central Copyright © 2009 The Authors
www.eChallenges.org
Page 4 of 7
working area” is changing. It is impossible to eliminate sending it when standard HTMLbased reload method is used for web-browser windows update. But if we go into Java Script details we find an simple instruction which enables taking contents form the server without any change in web browser widow. When requested portion of content arrives Java Script code could use this data to change contents of web browser in an incremental manner. It is quite easy to write an engine which will only change “Middle central area” leaving all menus unchanged. This technique will not only shorten processing the action trigged by each click, but also make user’s overview of the system much more stable, making his work more comfortable. This sort of programming techniques is called AJAX, but most applications use it to do an ad hoc small work on traditionally reloaded pages. The reason not to use full power of AJAX in current applications is that in many cases it will lead to non-addressable site pages, which means that user will browse the site, but URL address in the browser window will not change. Finally, it can lead to a situation that web-sites have pages non-addressable from the Internet, which will make site less visible by web search engines like Google, Yahoo, etc. Particular parts of content may be impossible to reach from an URL, but they can be accessed by user’s sequence of actions performed after loading a web-page with AJAX enabled window update. In our solution we obtain both full AJAX power, but we preserve addressability of all our web sites pages. We obtained unique addressing by dynamic switching off loading of constant parts of web page when AJAX call is used. It is done by upgrading contents of files with common menu i.e.: top-left and bottom-right with conditional statement checking if it is reloading call or AJAX call. if(!isset($ajax)){ ?> //will be executed only if no AJAX call
| Upper left menu | Upper central menu | Upper right menu |
| Middle left menu | //will be executed only if no AJAX call | Middle right menu |
| Bottom left menu | Bottom central menu | Bottom right menu |
