Magento's Architecture: Part 1

Exclusive offer: get 50% off this eBook here
Magento 1.3: PHP Developer's Guide

Magento 1.3: PHP Developer's Guide — Save 50%

Design, develop, and deploy feature-rich Magento online stores with PHP coding

$23.99    $12.00
by Jamie Huskisson | January 2010 | MySQL e-Commerce Open Source PHP

Magento has a wonderful architecture behind its system. It's a very strict architecture that relies on us knowing where the files should be placed and how to structure our templates and modules. But this is part of what makes Magento a great system, in that it enforces these standards.

Here in this two-part article by Jamie Huskisson, we will learn about this architecture and how it applies to development with Magento. We will learn:

  • Where everything is within Magento
  • What all the base directory files and folders do
  • The basics of how the template system works
  • How modules work within the system
  • How the Zend Framework fits into the equation
  • The best methods for backing up Magento

Magento's base structure

The fundamental knowledge of Magento's architecture begins with its file structure. It's important to know what goes where by default, so that we may position our new files accordingly, especially in terms of ensuring that our development doesn't overwrite core files.

Base directory

The default installation contains the following files and directories in the base directory:

  • .htaccess
  • .htaccess.sample
  • 404 (directory)
  • app (directory)
  • cron.php
  • downloader (directory)
  • favicon.ico
  • index.php
  • index.php.sample
  • js (directory)
  • lib (directory)
  • LICENSE_AFL.txt
  • LICENSE.txt
  • media (directory)
  • pear
  • pkginfo (directory)
  • report (directory)
  • skin (directory)
  • var (directory)

Each of these files and directories has a different purpose. We'll go through them to ensure that we understand the function of each. This will help us later, if ever we need to find something specific, or when developing. It will also be helpful when we'll be looking to place the files coming out of our new module into the appropriate directory.

The function of each of the files in the base directory

The following is a run through of all the files in the base directory, to show us what they do:

  • .htaccess—This file controls mod_rewrite for fancy URLs and sets configuration server variables (such as memory limit) and PHP maximum execution time, so that Magento can run better.
  • .htaccess.sample—Works as a backup for .htaccess, so that we know the default .htaccess file (if ever we edit it and need to backtrack).
  • cron.php—The file that should be executed as a cron job every few minutes to ensure that Magento's wide caching doesn't affect our server's performance.
  • favicon.ico—Magento's default favicon; it's the small icon that appears in the toolbar of our browser.
  • index.php—The main loader file for Magento and the file that initializes everything.
  • index.php.sample—The base template for new index.php files, useful when we have edited the index.php file and need to backtrack.
  • LICENSE_AFL.txt—It contains the Academic Free License that Magento is distributed under.
  • LICENSE.txt—It contains the Open Software License that Magento is distributed under.
  • pear—This controls all automatic updating via the downloader and SSH. This file is initialized and handles the updating of each individual module that makes up Magento.
  • php.ini—A sample php.ini file for raw PHP server variables recommended when setting up Magento on our server. This should not be used as a complete replacement, but only as a guide to replace certain lines of the php.ini server file. It is useful when overriding these variables when .htaccess isn't enabled on our server.

The function of each of the folders in the base directory

The following is a run through of all the folders in the base directory to show us their contents:

  • 404—The default 404 template and skin storage folder for Magento.
  • app—All code (modules), design (themes), configuration, and translation files are stored in this directory. This is the folder that we'll be working in extensively, when developing a Magento powered website. Also contained in this folder are the template files for the default administration theme and installation.
  • downloader—The web downloader for upgrading and installing Magento without the use of SSH.
  • js—The core folder where all JavaScript code included with the installation of Magento is kept. We will find all pre-compiled libraries of JavaScript here.
  • lib—All PHP libraries used to put together Magento. This is the core code of Magento that ties everything together. The Zend Framework is also stored within this directory.
  • media—All media is stored here. Primarily for images out of the box, this is where all generated thumbnails and uploaded product images will be stored. It is also the container for importing images, when using the mass import/export tools.
  • pkginfo—Short form of package information, this directory contains text files that largely operate as debug files to inform us about changes when modules are upgraded in any way.
  • report—The skin folder for the reports that Magento outputs when any error occurs.
  • skin—All assets for themes are stored within this directory. We typically find images, JavaScript files, CSS files, and Flash files relating to themes, in this directory. However, it can be used to store any assets associated with a theme. It also contains the skin files for the installation of skins and administration templates.
  • var—Typically where we will find all cache and generated files for Magento. We can find the cache, sessions (if storing as files), data exports, database backups, and cached error reports in this folder.

The template system architecture

The template architecture is broken into three areas—two for development of the theme and one for the containment of the assets:

  • /app/design/frontend/default/<template_name>/
    • layout/—For all the XML files declaring which module tied functions should be called to which template files
    • template/—For all the templates processing the output that is passed from functions called from layout/ and structured into the final output to the user.
  • /skin/frontend/default/<template_name>/—For the containment of all assets relating to our template, images, CSS, Flash, and JavaScript.

Structural blocks and content blocks

Each theme contains structural and content blocks. Structural blocks are the ones that lay out the theme into sections. Let's take a look at a three-column layout. The following are the structural blocks in a three-column layout:

  • header
  • left
  • content
  • right
  • footer

Here's a visual representation of those structural blocks laid over the Magento demo store:

Magento 1.3: PHP Developer's Guide

In each of the structural blocks, we then have content blocks that give each structural block its content for output to the browser. Let's take the right column; our content blocks set for this column on a standard theme could be:

  • mini cart
  • recently viewed products
  • newsletter subscription block
  • poll
Magento 1.3: PHP Developer's Guide Design, develop, and deploy feature-rich Magento online stores with PHP coding
Published: January 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Here we have a visual representation of these content blocks on top of the Magento demo store:

Magento 1.3: PHP Developer's Guide

On receiving a request from a user connecting to our site to view the page:

  1. Magento will load the structural areas
  2. Each structural area will be processed through
  3. Magento will gather the content blocks assigned to each structural area
  4. It will then progress through the content block template for each structural area, to process the output
  5. It sends all of this back as final output to the user, who then views the Magento page that was requested

XML layout files

To assign blocks to each of these structural blocks, Magento loads an XML layout file for each request. This XML layout file is called by the URL that the user is accessing on the site. It declares all modules that are to be loaded in each structural area of the site. On top of this, we have a page.xml file, which is the default loader for all pages on the site.

A layout XML file is typically structures as follows:

<default>
<reference name="header">
<block type="page/html_header" name="header" as="header">
<block type="page/template_links" name="top.links"
as="topLinks"/>
<block type="page/switch" name="store_language"
as="store_language"
template="page/switch/languages.phtml"/>
<block type="core/text_list" name="top.menu" as="topMenu"/>
</block>
</reference>
</default>

In the above code, we have:

  • <default>—The handler for the URL, in this case default will load no matter what other handler is being initialized
  • <reference>—The reference structure which calls the blocks in our theme
  • <block>—A content block which defines the type of block and the template which will process the block's outgoing data in the system

In addition to this, Magento uses actions within blocks for functions which need to process the data that is input to them, for example adding CSS stylesheets:

<block type="page/html_head" name="head" as="head">
<action method="addCss">
<stylesheet> css/menu.css </stylesheet>
</action>
<action method="addCss">
<stylesheet> css/clears.css </stylesheet>
</action>
<action method="addItem">
<type>js</type>
<name>varien/iehover-fix.js</name>
<params/>
<if>lt IE 7</if>
</action>
<action method="addCss">
<stylesheet>css/print.css</stylesheet>
<params>media="print"</params>
</action>
<action method="addCss">
<stylesheet> css/print.css </stylesheet>
<params> media="print" </params>
</action>
</block>

We'll notice that there are several tags within the action method tag. These are processed into an array and then passed through the action method="" parameter, in this case addCss. This function then places the input into an output, ready for its appropriate template.

Layouts are fully explained online in Magento's designer guide: http://www.magentocommerce.com/design_guide/articles/intro-to-layouts.

Hierarchical file processing

When creating new themes, we do not have to worry about copying all the theme and skin files from the default theme over to our new one. Let's presume that we have an additional theme called new_theme, alongside our default theme. Our theme calls files called logo.gif and image.gif on one of its pages.

The themes that we have contain the following files in their skin's images directory:

default

 

new_theme

 

logo.gif

 

logo.gif

 

image.gif

 

 

test.gif

 

 

Magento would process this main requesting logo.gif and image.gif. As new_theme is our current active theme, it will pull logo.gif from there., However, as image.gif does not exist in new_theme, Magento would grab that from default. So now, it works like this:

Requested file

Theme it will come from

logo.gif

new_theme

image.gif

default

Similarly, if test.gif were called in our template then it would come from the default theme. If we upload an image called test.gif to the image directory of new_theme, then it would immediately come from there instead.

This applies to all files for themes in Magento, which include the following:

  • Templates
  • Layout XML files
  • Anything in the theme skin folders

Magento's template architecture and hierarchy is also explained online in the designer's guide to Magento: http://www.magentocommerce.com/design_guide.

>> Continue Reading Magento's Architecture: Part 2

 

[ 1 | 2 ]

If you have read this article you may be interested to view :

Magento 1.3: PHP Developer's Guide Design, develop, and deploy feature-rich Magento online stores with PHP coding
Published: January 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Jamie Huskisson

A passionate 23-year old freelance developer from Nottingham, Jamie Huskisson has been working with Magento for the past two years since the very early Beta versions. His development client list features names such as the NHS, Volkswagen, and Nike building everything from web applications to e-commerce stores and small business sites. He also trains groups of developers and provides consulting on adopting open source technologies over closed systems for clients when required.

Books From Packt

AJAX and PHP: Building Modern Web Applications 2nd Edition
AJAX and PHP: Building Modern Web Applications 2nd Edition

TYPO3 4.3 Multimedia Cookbook
TYPO3 4.3 Multimedia Cookbook

WordPress MU 2.8: Beginner's Guide
WordPress MU 2.8: Beginner's Guide

WordPress 2.8 Theme Design
WordPress 2.8 Theme Design

Python Testing: Beginner's Guide
Python Testing: Beginner's Guide

Building Telephony Systems with OpenSIPS 1.6
Building Telephony Systems with OpenSIPS 1.6

CodeIgniter 1.7
CodeIgniter 1.7

Moodle 1.9 Teaching Techniques
Moodle 1.9 Teaching Techniques

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software