Web 2.0 technologies in web application development Francisc SISAK
Dominic Mircea KRISTALY
Ion TRUICAN
Transilvania University of Brasov M. Viteazu Street, no. 5 500174, Brasov, Romania +40 268418836
Transilvania University of Brasov M. Viteazu Street, No. 5 500174, Brasov, Romania +40 268418836
Transilvania University of Brasov M. Viteazu Street, No. 5 500174, Brasov, Romania +40 268418836
[email protected]
[email protected]
[email protected]
Sorin-Aurel MORARU
Florin SANDU
Transilvania University of Brasov Politehnicii Street, No. 1 500024, Brasov, Romania +40 268474718
Transilvania University of Brasov Politehnicii Street, No. 1 500024, Brasov, Romania +40 268474718
[email protected]
[email protected] using the rules of the XHTML standard.
ABSTRACT The World Wide Web today has been flooded with many new web-oriented applications that changed the role of the user, from spectator to actor. The websites / web-applications became friendlier, more stylish, with many new useful features and a high level of interactivity. New web-programming techniques were developed on the existing HTTP protocol, the old ones were reinterpreted, to offer to the user exciting, new experiences. The most complex web applications, in terms of programming challenges, are content management systems. A Content management system, thanks to its modularity and scalability, permits a rapid development of complex, but very easy to maintain and manage web-oriented applications (websites). The existing content management systems, however, are somewhat limited when it comes to the graphical interface with the user. Also, they impose restrictions and a creative developer must use all sorts of tricks to achieve his vision. This paper is set to present the architecture for a web-based content management system that uses the new concepts and techniques introduced by WEB 2.0.
Categories and Subject Descriptors D.1.m [Programming techniques]: Using AJAX techniques in achieving the goals set for Web 2.0 applications. D.3.2 [PHP]: Usage of the PHP language to create web applications. I.7.2 [Markup languages]: Developing web 2.0 applications Permission to make digital or hard copies of part or all of this work or personal or classroom use is granted without fee provided that copies are not made or distributed for profit or Permission toadvantage make digital or that hard copies copies of all or part of thisand work commercial and bear this notice thefor personal or on classroom is granted without fee provided that copies are full citation the firstuse page. To copy otherwise, to republish, made distributed forredistribute profit or commercial advantage and that tonot post onorservers, or to to lists, requires prior copies bear this notice and the full citation on the first page. To copy specific permission and/or a fee. otherwise, orJuly republish, post on serversGreece. or to redistribute to lists, PETRA'08, 15-19,to2008, Athens, requires prior specific and/or a fee. $5.00 Copyright 2008 ACM permission 978-1-60558-067-8... PETRA 2008, July 15-19,2008, Athens, Greece. Copyright 2008 ACM XXXXXXXXX…$5.00.
I.7.2 [Markup languages]: Use of JavaScript code in web HTML documents to implement Web 2.0 features in web applications.
General Terms Algorithms, Theory, Standardization, Experimentation.
Keywords web, website, cms, ajax, butterfly.
1. INTRODUCTION The term Web 2.0 stirred a lot of controversy in various circles of developers and experts, regarding its true meaning. Although there are hundreds of articles written on this subject, none of them seems to cover all its aspects, or clear the fog surrounding the phrase “Web 2.0”. The first conference concerning Web 2.0 was held in 2004 by O’Reilly Media, the same entity that coined the phrase one year earlier, and presented the term as a new way to look at existing web related/oriented technologies rather than a technical evolution of the World Wide Web (WWW). The phrase Web 2.0 was actually used before and it was synonymous with Semantic Web, a concept presented by the director of W3C (World Wide Web Consortium), Sir Tim BernersLee, which envisioned the future of WWW as the universal medium for data, information and knowledge exchange. The main idea behind the Semantic Web it’s the creation of web content using, beside natural language, a form that can be understood by software agents in order to allow them to find, share or integrate information more easily, fulfilling the first important step towards intelligent applications. Web 2.0, as described by Tim O’Reilly, refers to web-oriented application and services that use the internet as a platform, with its unique features, relying on its strengths rather than trying to make the internet suit a particular application. Web 2.0 should change the way the web it’s seen and used by developers and users alike. Stephen Fry describes the concept, as “Web 2.0 is an idea in people’s heads rather than a reality. It’s actually an idea that the reciprocity between the user and the
provider is what’s emphasized. In other words, genuine interactivity if you like, simply because people can upload as well as download". The recent programming techniques and services that made their appearance on the web are used to develop web applications (websites) that are very similar, as interaction and features, with desktop, stand alone applications. The idea of a presentation-only website, with rigid layout and styles and many limitations regarding the content and interactivity has been replaced with that of web-oriented application, or short – web application. A web application offers to its users a high level of interactivity, a dynamic environment, customizable views and the possibility to intervene on content level. The figure 1, constructed by Markus Angermeier, highlights graphically the concepts, ideas, techniques and technologies behind Web 2.0.
2. CONTENT MANAGEMENT SYSTEMS FOR WEB A content management system (CMS) is an application that allows the user to manage data and information from a system, through a user-friendly interface, usually a GUI (Graphic User Interface). A web-oriented CMS manages the content of a website. There are specialized CMSs, that manages only a part of the data present on the website (i.e. the products of an online store, user data, feedback from users) and general-purpose content management systems that manages all the information contained in a website. The latter are complex systems that manage not only the data, but the structure of pages from a site, the templates (the look-and-feel) and the features they are providing. These CMSs are usually modular and offer APIs (Application Programming Interface) for developing new modules to suite every developer’s needs. But their complexity determines some drawbacks when it comes to the look-and-feel of the website – not all templates can be applied as they were designed. Also, writing new modules can prove to be quite complicated and for the majority of existing CMSs there is no complete documentation available. The lack of documentation is also the reason for the long time needed to learn to program – or better said to configure – such a CMS. The web-oriented CMSs come with many built-in features that do not use the latest web technologies or techniques, so using them on a website can be prove to be difficult, if not impossible.
3. BUTTERFLY – A BETTER WEBORIENTED CMS Butterfly is the name of a web-oriented CMS which is being developed by the Automatics Department of “Transilvania” University of Braşov, and set its goal to offer a framework for complex web-application for the Electrical Engineering and Computer Science faculty. Figure 1. The mind-map pictured above summarizes the concepts, techniques and technologies of Web 2.0, with example-sites and attached services [Markus Angermeier].
This CMS will have the following features [1][3][4][5]: • •
In conclusion, some of the most important concepts in Web 2.0 are [2]:
•
• •
•
• • •
usability: the application must be easy (natural) to use; standardization: compliance with current standards in web applications development (i.e. XHTML for source code, WAI for accessibility, etc.); design: a web-application must have a pleasant, yet practical, look-and-feel for its user-interface; participation: the application allows the user to intervene at content level (i.e. edit, tagging, sharing, etc.); convergence: the web-application makes use of many different technologies, yet it must present to the user a unique, coherent interface.
• • • • • • •
easy to use for users and developers alike: it will make use of Web 2.0 technologies; error-proof and error-safe: every possible error must be taken into account and ; security: it will define an authentication mechanism for the users (administrators or editors); XHTML compatible: the HTML pages generated by the CMS must be compliant with the XHTML standard; WYSIWYG (What You See Is What You Get) editor for the HTML content; page scheduler: the website’s pages can be programmed to be displayed for a given period of time; includes a tool for management of pages: the website’s pages can be added in a tree-like structure; offers an in-place editor for the content of the pages; includes a template editor (using a script language or a web interface): the look-and-feel; offers a search engine: all the content of the site will be search-able; offers a programming API: offers objects and functions for developers to use when writing new extensions;
•
• • • • • • • • • •
support for multilingual sites: the CMS must offer a simpleto-use mechanism to create sites in more than one language, without the need of duplicating the structure and the content of the site; platform-neutral: must be portable on different operating systems; scalable in term of content: the content must be easy to insert into the website’s pages; management of files: uploads and downloads; offer support for extensions (plug-ins) that can be developed using a script language: the CMS will be able to accept new extensions, for new features; integrated statistics, as number of visitors per page or per site; rights management: it will define access rights based on user’s categories; support for graphic files creation: it will be able to create graphic files from texts, to generate charts based on sets of data; support for RSS feeds: it will provide news through RSS feeds; support for metadata: it will contain additional information about the pages of the contained website; offers documentation for users and developers: user and developer manuals will be created.
3.2 Involved technologies The CMS is organized as a three layered application: server, client and data layer (as shown in figure 2). The server side uses the PHP script language, running on an Apache web server, to generate the (D)HTML content that will be sent to the client. On client side, HTML and JavaScript it’s used (so DHTML). The client is a web browser (i.e. Internet Explorer, Mozilla Firefox, Opera etc). The styles, on the client side, will all be controlled by CSS files (Cascaded Stylesheet), so the “look” of the managed sites is unitary and could be changed very quickly and easily.
3.1 Implementation overview
Figure 2. The layers of the Butterfly CMS
The Butterfly CMS will have two sections: • •
the frontend – designed for the users of the website, and the backend – used only by the administrators and editors.
The frontend’s look-and-feel is controlled by a configurable XHTML template. The CMS will have a built-in search engine that can be added to the template (to the frontend) using a script language or a graphical interface. The access to the backend will be granted after an authentication process based on username and password. The template will be a XHTML file with special markings in the places where content elements will be inserted, each marking baring a name that is used when content of pages is created, to identify the sections. The web pages are generated accordingly to the template, from one or more articles. Each article is composed from content elements positioned according to a customizable layout. The content elements can be any type of HTML elements: formatted text, tables, images, flash movies, java applets, multimedia files. Each of the content element types is managed by one content extension – a module of the CMS. Where needed, the formatted text is edited by a WYSIWYG (What you see is what you get) editor. An extension registry keeps track of all the installed extensions in the CMS. All the extensions offer backend and frontend means to edit and render the content. Each page can be scheduled to be visible in the website in a time interval or for a specific type of frontend users. The pages can have multiple versions for each language supported by the developed website.
The data layer is composed of XML files and one relational database. The database management system (DBMS) used is MySQL, for it is free and can cope with the CMS’ needs. The most part of the HTTP requests will be made through AJAX technique (using the XMLHttpRequest object, from the JavaScript code).
3.3 Implementation details The most important element of the CMS is the extensions registry: this is a table in the database that keeps track of all the extensions installed into the content management system. An extension is a small application designed to work with some specific data. For example, an extension could facilitate the insertion of HTML code into a web page; another one can insert a Flash animation in a specific place of the web page. Each extension must expose an interface to some standard facilities: • • • • • • • •
installation of the extension: copying the files used by that particular extension – PHP code, HTML files, style files, language files etc; upgrade of the database (where needed): the SQL commands to upgrade the database; setting-up the extension; search in the extension’s content for some words; help for the extensions; un-install for the extension; backend interface: what the administrator and editor will see when logged into the backend; frontend interface: what a user will see on the managed website.
The CMS will “know” how to use these facilities of the interface by following strict procedures. The search interface, for example, will receive a query string containing the words or phrases given by the users and will return a boolean value of true if the words can match the content of the object.
The backend and frontend interfaces will generate (D)HTML code that will be used by the CMS to render its graphic interface for the users.
Figure 3. The Butterfly CMS’ modules Figure 3 presents the modules of the Butterfly CMS. This diagram shows how the modules interact.
After that, the page generator will retrieve the articles and insert them into the sections of the template.
The Items are instances of extensions; each instance, called object, will have an id in the table, so all the references to a particular object will be done through this number.
The articles are obtained based on the layout template (stored in the article’s data) and the ids of the objects.
The CMS will know precisely how to instantiate an extension using the extension’s interface, these rules being built-in the CMS. The Layout Templates will contain predefined layouts for positioning the items. Based on these layouts and the items, the CMS will create Articles, which are HTML blocks that are ready to be sent to the client. The articles will be inserted into a template file (a HTML file), obtained from the Templates Registry through a number id. The HTML template will contain marked sections where the articles will be inserted. The Pages Registry will contain information regarding the relation between the sections of the template and the articles and their ordering. Also, this registry will offer the hierarchy of the pages (the websites map). Each page will be identified by both a string and number id. The Page generator will be the only page of the website. This PHP file will build the output for the client.
3.4 Frontend page generation When a users requests for a page (providing a page id), the page generator will identify the page from the Pages registry. Having the data related to that particular page, it will ask the Templates Registry to provide the HTML code of the template used by the page.
The objects are generated using the frontend interface of the extension used. The obtained HTML file will be sent to the client.
4. STATUS AND FURTHER DEVELOPMENT The development of the Butterfly CMS is in progress. The whole architecture (concept) is finished and the development is underway. The definition of the interface for the extensions remained to be finished.
5. REFERENCES [1] Fritz, R.; Hinderink, D. & Altmann, W., 2002. Typo3: Enterprise Content Management, Electronic format [2] http://www.w3.org/ [3] http://www.cmswiki.com/ [4] http://www.cmsreview.com/ [5] http://www.roxen.com [6] http://www.typo3.org/
