Month: December 2014

Zend 1.X web apps – Part 1 Adding Twitter Bootstrap

ZendFramework-logo

As 2014 comes to a close, it is time to ramp up to ZF2 (Zend Framework 2).  To close out this chapter in my PHP career, I am writing all the “best” of my Zend Framework 1 ideas into a few final Zend Framework 1 example applications, with the hope of porting all these ideas into ZF2 applications.

Getting Started

Create a new Zend Framework 1 project, you can find instructions at: http://framework.zend.com/manual/1.12/en/learning.quickstart.create-project.html

Or use Zend Studio’s built in “File->New->Local PHP Project” and include the “Zend Framework 1 [built-in]” library.

Or you can just follow along at https://github.com/jstormes/bootzf1.

Adding Twitter Bootstrap

Not to be confused with the application/Bootstrap.php file, Twitter Bootstrap is “the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.”  To add Twitter Bootstrap to the application, we will need to build a layout file.

Creating the default layout file

The layout is a template that is applied to most of the pages of your application.  It is a elegant place to manage the boilerplate HTML that appears on most of your webpages.  It has placeholders for things like the page title, JavaScript, CSS, etc… that can be filled in programmatically by the application.

application/layout/scripts/layout.phtmlStart by creating a directory called layouts in the application directory.  In layouts credit a directory called scripts.

You should have the path application/layout/scripts in your project now.  This is where the layout php files will go.

Next create the file layout.phtml in the scripts directory and copy the Twitter Bootstrap template from http://getbootstrap.com/getting-started/#template into it.

Adding the placeholders into the layout.phtml file

Replace the lines below to “cut out” the places in the layout for the Title, CSS, JavaScript and content to appear.  The layout.phtml should look like the second file when you are done.

[pastacode lang=”markup” message=”application/layout/scripts/layout.php as copied from Twitter Bootstrap’s template” highlight=”7,9,10,20,22,23,24,25″ provider=”manual”]

[/pastacode]

[pastacode lang=”php” message=”application/layout/scripts/layout.php With ‘cut outs'” highlight=”8,9,11,12,14,15,26,28,29″ provider=”manual”]

[/pastacode]

What we have just done is “punch out” places in the template file for Zend to insert content.  This will be in almost every page of our website, giving us one pace to make changes that need to affect every page.

Telling Zend 1 to use the layout

To get the framework to use the template by default we need to edit the application.ini file in the configs directory.

Right below the last line in the production section add the indicated lines:

[pastacode lang=”php” message=”application.ini changes for a default layout” highlight=”11,12,13,14″ provider=”manual”]

[/pastacode]

Setting the Title, adding CSS and JavaScript

In application/Bootstrap.php, add:

[pastacode lang=”php” message=”Changes to Bootstrap.php for adding CSS and JavaScript to the layout” highlight=”” provider=”manual”]

[/pastacode]

Testing the new layout

Open your browser to the index page and view source, you should see the new layout surrounding the standard “Welcome to the Zend Framework!” sample page, with “<title>The Last Zend 1 Apps</title>” for the title.  The CSS referenced in the Bootstrap.php file should also appear under the “<!– CSS Files –>” comment. The JavaScript files should appear under the last “<!– JavaScript –>” comment.

Summary

These changes are the blending of the “Stock” Zend Framework 1 application code with the “Stock” Twitter Bootstrap code.  This is a light weight starting point for writing Zend Framework 1 applications that include Bootstrap themes, components and JavaScript Plugins.

Next Adding a Twitter Bootstrap Navbar.

Last Thoughts

Still there, wow I have one follower, cool!  My last thoughts are about some implied structures and patterns this post eludes to.

If you think about the applicaiton.ini, layout.phtml and Bootstrap.php files respectively as a Model, View and Controller, you can visualize these components as a “Super MVC” surrounding your normal MVC components.  This is how I sometimes like to think about these files, with Bootstrap.php being both a Super Controller and Super Constructor of the application.

While you don’t need to “port” Twitter Bootstrap into the boilerplate ZF2 application code, it’s already there, I want to understand how these ideas of the Super MVC/Super Constructor relate from Zend Framework 1 to ZF2.

See you next time.  Same Bat time, same Bat channel.

References

http://framework.zend.com/manual/1.12/en/learning.quickstart.create-project.html

http://www.bootstrapcdn.com/

https://code.jquery.com/