Development of Multiplatform CMS System with Zend Framework

S. Vuković*, M. Löberbauer**,Z. Čović *and M. Ivković***

*Subotica Tech – College of Applied Sciences/Department of Informatics, Subotica, Serbia** Institute for System Software, Johannes Kepler University, Linz, Austria

***University of Novi Sad, Technical Faculty “Mihajlo Pupin”/Department of Informatics, Zrenjanin, Serbiasinisa@vukovic.co, loeberbauer@ase.jku.at, chole@vts.su.ac.rs, misa.ivkovic@gmail.com

Abstract –This paper presents the use of the Zend framework in the realization of a CMS system that can generate multiplatform web content in a responsive web design approach.Use of a framework can help developers tocreate better web applications, which are easier to maintain, faster to build, multifunctional and multiplatform based. The Zend framework provides an implementation of the MVC pattern.

I. INTRODUCTION

The emergence of the Internet has led to changes in many aspects of human activity. The biggest impact the Internet has, is the development of the global business environment. The second impact is happing right now, and that is the emergence of smart phones. Today, increasing numbers of people access the Internet via their mobile device instead of a PC. The number of mobile devices in use has already surpassed the number of personal computers. It is estimated that the difference between these two numbers will only increase in the years to come [1]. When programmers are building web applications they have to think not only about user experience on desktop computers but also have to think about user experience on tablet and mobile devices. Because of the great penetration of smart handheld devices it is necessary to build multiplatform and multifunctional web applications.

II. FRAMEWORK

Using frameworks in the world of software development has long been known. However, in the world of web development it is new. A software framework is a set of libraries, and an execution environment that allows programmers to develop web applications faster and more organized. The main idea of the framework is observed after the use of frequently used functions and basic structures upon which programmers can develop their applications. Most experienced developers have their own libraries, which are used on a project basis for faster growth. However, the development of web applications based on open-source frameworks has its apparent advantages. In addition, an open-source framework is more reliable, because it is tested and used by many programmers. The biggest advantage of using frameworks is that all developers in a team working on a project should follow the same rules and conventions when developing web applications. This allows easy integration

of new developers to work on the project if they are familiar with the rules and conventions of the used framework.

A. Zend Framework

Zend Framework is an open source framework for the development of web applications and it is based on the PHP programming language. It contains a group of tools for design and implementation. Each tool contains built-in functions for input and validation of data, caching, security and so forth. Unlike other frameworks, Zend uses a so-called "Looselycoupled" architecture. This means that although the framework includes a number of components, these components are the most independent of each other and have a minimum interconnection.

Zend Framework also provides a complete implementation of the Model-View-Controller (MVC) pattern. MVC is a widely recognized design pattern that separates our database and business logic from the presentation layer (in this case, the (X)HTML). Separation of presentation and logic aids in maintainability, by producing clean and understandable code. Furthermore, it means that the developer can update the layout and design of a site without having to worry about wading through PHP script tags. The Zend controller is an implementation of the MVC design pattern (Figure 1). When the browser sends a request, the dispatcher searches the according controller to handle the request.

Software design patterns are a standard solution to common problems. This means that although implementations and solutions are different, the concept of problem solving is the same.

Figure 1. Design of theMVC pattern in Zend, which shows the three main parts of a web application

B. Models

Almost every application has its own database, regardless of whether it is something as simple as a username and password or as complex as an online shop. In MVC, the data are layered and presented with one or more models. The models provide tools to download, read, delete, and in general manipulate data. This layer is completely ignorant of how data are displayed to the user. It provides an independent logical interface for the manipulation of application data.

C. View

The view is the logical display of an application. For web applications it is mainly HTML code that makes a web application, but other types of code can be included, for example XML, which is used for RSS feeds. Also, if the site allows data export to CSV format, the generation of such a file would be the job of the browser. Viewers are also known as the templates because they allow displaying the data generated in the model. It is also common that the more complex templates transfer in the so-called ViewHelper. They help for better exploitation of code.

D. Controller

The controller is the code that makes the rest of the application. For web applications, the controller is the one who decides what will be executed based on the user’s current request. For Zend applications, the controller is based on a design pattern known as Front Controller that uses a handler called Zend_Controller_Frontas a command for action (Zend_Controller_Action) working in tandem. The front controller accepts all server requests and runs the appropriate action. This process is known as the routing and dispatching.

III. RESPONSIVE DESIGN

Most often we have seen that there is no optimization and adaptation of existing sites or new sites for mobile users. The web content might be too wide to fit the screen of mobile device – user equipment. Often, web pages that have been initially designed for desktop computers are too encumbered with content so they are practically unsuitable for users accessing them via mobile devices [1].

A solution for this problem is to use some kind of detection and adaptation. In the development of this CMS system a responsive design approach is used. Responsive web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As a user switches from his laptop to his iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences [2]. This approach could be used if developers are confident that the access devices fully support the filtering of media and when a mobile website is dedicated to a specific group of users who have devices with the possibility of filtering media [1].

A. Responsive design in action

The idea is to first code the Default layout (width of 992px), and then use CSS3 media queries to code several child layouts: 768px, 480px and 320px width. The Default layout will be served to any browsers that do not support media queries, whereas the child layouts will be served, as appropriate, to browsers that do. They will also inherit all styles given to the Default layout, so coding them is very fast. To break it down, recent versions of Firefox, Chrome, Safari, Opera, Nokia Webkit, WebOS, Blackberry OS, as well as Internet Explorer 9, Android Webkit, and Mobile Safari (all iPhones, iPads, and iPod Touches) will use the layout most appropriate to them. Internet Explorer 6–8 and most old mobile devices will only use the Default layout.

The goal is to make building websites with multiple layouts efficient, and to make the layouts feel consistent. Since every layout is based on the same grid, elements used in one layout can often be reused in the others without changing them. For example, simply adjusting the width or font-size of an element in one layout is often enough to make it work in another. And even if more changes are required, the common baseline grid and type presets will make the element fit in. Figure 2 shows the main page of the CMS implementation, which uses this approach.

Figure 2. Main page shown on mobile device

IV. IMPLEMENTATION OF CMS SYSTEM

The reason why PHP is growing so rapidly as a server-side scripting language is that it is easy to learn. Many functions are included without needing any sort of namespace importing, and programmers don’t even have to write object oriented code if they don’t want to. Variables are weakly typed and the syntax is fairly familiar. But PHP’s ease of use is also its downfall. Because there are fewer restrictions on the structure of the written code, it’s much easier to write bad code.

PHP frameworks like CakePHP, CodeIgniter and the Zend Framework provide a solid structure for code whilst also offering some extra functionality that would be much harder to replicate on its own. It’s important to note that

the frameworks mentioned follow the MVC pattern. Making multiplatform based sites in this way is easier.

In the realization of thisCMS system the following technologies are used: HTML5, CSS3, JavaScript, AJAX, jQuery, PHP and MySQL database.

This CMS system is divided into front-end development (public) and back-end development (administration). The public part is more focused on interactivity, design and optimization for mobile devices. The public part consists of amain page, ablog section, agallery, and pages. The main page or index page is the place where we want to segregate important information or parts of our site. The blog section consists of articles, which can be filtered by categories or tags. A single selected article contains headline, date created, category that belongs to, body text, social widgets, tags, related posts and facebook comment. The gallery consists of albums. While pages are used for creating independent pages like ‘about us’, ‘contact’ etc.

Figure 3. Index page in public section

The administration part is protected and only two types of users can access it – administrators and writers. Depending on the role some parts of the administrative area are not accessible. This panel consists of dashboard, users, categories, posts, pages, menusection, gallery, and settingspanel.

For creating a post we first have to create a category. Ordering categories is eased by drag’n’drop support.

Figure 4. Drag and drop support for ordering categories

A blog post consists of a headline, a slug (friendly URL), a category list, a headline image, the body text, and tags. Pages are similar to blog post, except theydon’t need a headline image and tags.

Menu management gives dynamism to our system. With this, we can easily maintain our main menu.

Figure 5. Section for adding posts

Figure 6. Menu management section

The gallery section consists of albums and images. Uploading multiple images is done with the Uploadify script, which uses a combination of flash and javascript to upload images; once an image is uploaded it is passed to PHP to do the rest.

Figure 7. Uploaded images in selected album

V. CONCLUSION

Developing web applications with frameworks reduces development time and increases maintainability. Using responsive design increases the support for multiplatform with a minimum effort and with only a single design. The main disadvantage of optimization based on CSS media queries is that only a small number of old devices support it.

REFERENCES

[1] Čović, Z., Ivković, M., Radulović, B., „Mobile Detection Algorithm in Mobile Device Detection and Content Adaptation”, Acta Polytechnica Hungarica (2012). Volume 9, Number 2, ISSN: 1785-8860,pp. 95-113

[2] http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

[3] Vikram, V., „Zend framework: a beginner’s guide”, 2010.