Development of Multiplatform CMS System with              Zend Framework                            S. Vuković*, M. Löberb...
B. Models                                                       A. Responsive design in action   Almost every application ...
the frameworks mentioned follow the MVC pattern.Making multiplatform based sites in this way is easier.    In the realizat...
REFERENCES                                  [2]           ...
Upcoming SlideShare
Loading in …5

Development of Multiplatform CMS System with Zend Framework


Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Development of Multiplatform CMS System with Zend Framework

  1. 1. 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, Serbia,,, misa.ivkovic@gmail.comAbstract –This paper presents the use of the Zend familiar with the rules and conventions of the usedframework in the realization of a CMS system that can framework.generate multiplatform web content in a responsive webdesign approach.Use of a framework can help developers A. Zend Frameworktocreate better web applications, which are easier to Zend Framework is an open source framework for themaintain, faster to build, multifunctional and multiplatform development of web applications and it is based on thebased. The Zend framework provides an implementation of PHP programming language. It contains a group of toolsthe MVC pattern. for design and implementation. Each tool contains built-in functions for input and validation of data, caching, I. INTRODUCTION security and so forth. Unlike other frameworks, Zend uses The emergence of the Internet has led to changes in a so-called "Looselycoupled" architecture. This means thatmany aspects of human activity. The biggest impact the although the framework includes a number ofInternet has, is the development of the global business components, these components are the most independentenvironment. The second impact is happing right now, of each other and have a minimum interconnection.and that is the emergence of smart phones. Today, Zend Framework also provides a completeincreasing numbers of people access the Internet via their implementation of the Model-View-Controller (MVC)mobile device instead of a PC. The number of mobile pattern. MVC is a widely recognized design pattern thatdevices in use has already surpassed the number of separates our database and business logic from thepersonal computers. It is estimated that the difference presentation layer (in this case, the (X)HTML). Separationbetween these two numbers will only increase in the years of presentation and logic aids in maintainability, byto come [1]. When programmers are building web producing clean and understandable code. Furthermore, itapplications they have to think not only about user means that the developer can update the layout and designexperience on desktop computers but also have to think of a site without having to worry about wading throughabout user experience on tablet and mobile devices. PHP script tags. The Zend controller is an implementationBecause of the great penetration of smart handheld of the MVC design pattern (Figure 1). When the browserdevices it is necessary to build multiplatform and sends a request, the dispatcher searches the accordingmultifunctional web applications. controller to handle the request. II. FRAMEWORK Software design patterns are a standard solution to Using frameworks in the world of software common problems. This means that althoughdevelopment has long been known. However, in the world implementations and solutions are different, the conceptof web development it is new. A software framework is a of problem solving is the same.set of libraries, and an execution environment that allowsprogrammers to develop web applications faster and moreorganized. The main idea of the framework is observedafter the use of frequently used functions and basicstructures upon which programmers can develop theirapplications. Most experienced developers have their ownlibraries, which are used on a project basis for fastergrowth. However, the development of web applicationsbased on open-source frameworks has its apparentadvantages. In addition, an open-source framework ismore reliable, because it is tested and used by manyprogrammers. The biggest advantage of using frameworksis that all developers in a team working on a projectshould follow the same rules and conventions when Figure 1. Design of theMVC pattern in Zend, which shows the threedeveloping web applications. This allows easy integration main parts of a web applicationof new developers to work on the project if they are
  2. 2. B. Models A. Responsive design in action Almost every application has its own database, The idea is to first code the Default layout (width ofregardless of whether it is something as simple as a 992px), and then use CSS3 media queries to code severalusername and password or as complex as an online shop. child layouts: 768px, 480px and 320px width. The DefaultIn MVC, the data are layered and presented with one or layout will be served to any browsers that do not supportmore models. The models provide tools to download, media queries, whereas the child layouts will be served, asread, delete, and in general manipulate data. This layer is appropriate, to browsers that do. They will also inherit allcompletely ignorant of how data are displayed to the user. styles given to the Default layout, so coding them is veryIt provides an independent logical interface for the fast. To break it down, recent versions of Firefox,manipulation of application data. Chrome, Safari, Opera, Nokia Webkit, WebOS, Blackberry OS, as well as Internet Explorer 9, AndroidC. View Webkit, and Mobile Safari (all iPhones, iPads, and iPod The view is the logical display of an application. For Touches) will use the layout most appropriate to them.web applications it is mainly HTML code that makes a Internet Explorer 6–8 and most old mobile devices willweb application, but other types of code can be included, only use the Default layout.for example XML, which is used for RSS feeds. Also, ifthe site allows data export to CSV format, the generation The goal is to make building websites with multipleof such a file would be the job of the browser. Viewers are layouts efficient, and to make the layouts feel consistent.also known as the templates because they allow displaying Since every layout is based on the same grid, elementsthe data generated in the model. It is also common that the used in one layout can often be reused in the othersmore complex templates transfer in the so-called without changing them. For example, simply adjusting theViewHelper. They help for better exploitation of code. width or font-size of an element in one layout is often enough to make it work in another. And even if moreD. Controller changes are re-quired, the common baseline grid and type The controller is the code that makes the rest of the presets will make the element fit in. Figure 2 shows theapplication. For web applications, the controller is the main page of the CMS implementation, which uses thisone who decides what will be executed based on the approach.user‟s current request. For Zend applications, thecontroller is based on a design pattern known as FrontController that uses a handler calledZend_Controller_Frontas a command for action(Zend_Controller_Action) working in tandem. The frontcontroller accepts all server requests and runs theappropriate action. This process is known as the routingand dispatching. III. RESPONSIVE DESIGN Most often we have seen that there is no optimizationand adaptation of existing sites or new sites for mobileusers. The web content might be too wide to fit the screenof mobile device – user equipment. Often, web pages thathave been initially designed for desktop computers are tooencumbered with content so they are practically unsuitablefor users accessing them via mobile devices [1]. A solution for this problem is to use some kind ofdetection and adaptation. In the development of this CMS Figure 2. Main page shown on mobile devicesystem a responsive design approach is used. Responsiveweb design is the approach that suggests that design and IV. IMPLEMENTATION OF CMS SYSTEMdevelopment should respond to the user‟s behavior andenvironment based on screen size, platform and The reason why PHP is growing so rapidly as a server-orientation. The practice consists of a mix of flexible grids side scripting language is that it is easy to learn. Manyand layouts, images and an intelligent use of CSS media functions are included without needing any sort ofqueries. As a user switches from his laptop to his iPad, the namespace importing, and programmers don‟t even havewebsite should automatically switch to accommodate for to write object oriented code if they don‟t want to.resolution, image size and scripting abilities. In other Variables are weakly typed and the syntax is fairlywords, the website should have the technology to familiar. But PHP‟s ease of use is also its downfall.automatically respond to the user‟s preferences [2]. This Because there are fewer restrictions on the structure of theapproach could be used if developers are confident that written code, it‟s much easier to write bad code.the access devices fully support the filtering of media and PHP frameworks like CakePHP, CodeIgniter and thewhen a mobile website is dedicated to a specific group of Zend Framework provide a solid structure for code whilstusers who have devices with the possibility of filtering also offering some extra functionality that would be muchmedia [1]. harder to replicate on its own. It‟s important to note that
  3. 3. the frameworks mentioned follow the MVC pattern.Making multiplatform based sites in this way is easier. In the realization of thisCMS system the followingtechnologies are used: HTML5, CSS3, JavaScript, AJAX,jQuery, PHP and MySQL database. This CMS system is divided into front-enddevelopment (public) and back-end development(administration). The public part is more focused oninteractivity, 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 theplace where we want to segregate important informationor parts of our site. The blog section consists of articles,which can be filtered by categories or tags. A singleselected article contains headline, date created, categorythat belongs to, body text, social widgets, tags, relatedposts and facebook comment. The gallery consists of Figure 5. Section for adding postsalbums. While pages are used for creating independentpages like „about us‟, „contact‟ etc. Figure 3. Index page in public section Figure 6. Menu management section The administration part is protected and only two The gallery section consists of albums and images.types of users can access it – administrators and writers. Uploading multiple images is done with the UploadifyDepending on the role some parts of the administrative script, which uses a combination of flash and javascript toarea are not accessible. This panel consists of dashboard, upload images; once an image is uploaded it is passed tousers, categories, posts, pages, menusection, gallery, and PHP to do the rest.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 Figure 7. Uploaded images in selected album A blog post consists of a headline, a slug (friendlyURL), a category list, a headline image, the body text, and V. CONCLUSIONtags. Pages are similar to blog post, except theydon‟t need Developing web applications with frameworks reducesa headline image and tags. development time and increases maintainability. Using responsive design increases the support for multiplatform Menu management gives dynamism to our system. with a minimum effort and with only a single design. TheWith this, we can easily maintain our main menu. main disadvantage of optimization based on CSS media queries is that only a small number of old devices support it.
  4. 4. REFERENCES [2] responsive-web-design/[1] Čović, Z., Ivković, M., Radulović, B., „Mobile Detection [3] Vikram, V., „Zend framework: a beginner‟s guide”, 2010. Algorithm in Mobile Device Detection and Content Adaptation”, Acta Polytechnica Hungarica (2012). Volume 9, Number 2, ISSN: 1785-8860,pp. 95-113