May22

Themes management system with symfony - step by step tutorial

After many many busy days, I finally have the time to write something usefull for all the symfony comunity and for all the programmers trying to learn this fantastic php5 framework.

This tutorial explains how to develop a themes management system in wordpress style with symfony.

My purpose is to give you a base and some ideas; so I haven’t written an heavy and very difficult to read tutorial but a very simple, step by step tutorial, from which you can learn and get ideas.

You can also download this modified sf sandbox themes administration management in which is included:

- adminThemes ( a basic themes administration system that uses sfSetting plugin )
- the tutorial example
- 3 themes ( the tutorial theme + 2 Studio7designs templates themes )
- sfSettings plugin (last version)

In the sf_sandbox_theme_management, I included a rudimentary themes administration system that uses sfSettings and permit to choose a theme and watch a preview of your site in a prototype window.

For installation info read at the bottom of this tutorial.

Good read.

I hope many of you will send me critics, suggestions or ideas.

Mauro Casula
SymfonyFramework.com

THEMES MANAGEMENT SYSTEM IN SYMFONY

1. CREATE A SIMPLE MODULE/ACTION

1.1 Create a module in your frontend application.

In this tutorial I’ll suppose you have a frontend and the following module/action:
module: home
action: index
> symfony init-module frontend home

1.2 Customize the /apps/frontend/modules/home/templates/indexSuccess.php

<div id=”menu”>
<a href=”#”>Home</a>
<a href=”#”>Portfolio</a>
<a href=”#”>Contact</a>
</div>

<div id=”home_content”>
<h1>This is a very simple template example.</h1>
Text text text
</div>

1.3 Create a stylesheet

Create the following stylesheet: /web/css/style.css

body { color: white; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; margin: 30px; background-image: url(’/themes/tutorial_theme/images/back.jpg’); background-position: top left; background-repeat: repeat-x;}

#menu {width: 600px; padding: 5px;}

#menu A {text-decoration: none;font-weight: bold;}
#menu A:hover {text-decoration: none;font-weight: bold;color: yellow;}

#home_content { width: 600px;}

#home_content H1{ font-size: 16px; }

1.4 Customize /apps/frontend/modules/home/actions/action.class.php

<?php

class homeActions extends sfActions
{
/**
* Executes index action
*
*/
public function executeIndex()
{

}
}

2. THEME FOLDER STRUCTURE
The themes folder structure will be the following:

- A private folder in the root containing customized templates:
/themes/my_theme/layout.php
/themes/my_theme/modules/module_name/templateSuccess.php

- A public folder inside public web folder containing images and styles
/web/themes/my_theme/images
/web/themes/my_theme/css

2.1 Copy layout:

/apps/frontend/layout.php
in:
/themes/tutorial_theme/layout.php

2.2 Copy template:

/apps/frontend/modules/home/templates/indexSuccess.php
in: /themes/tutorial_theme/home/templates/indexSuccess.php

2.3 Copy style:

/web/css/style.css
in:
/web/themes/css/style.css

replace
background-image: url(’/images/back.jpg’)
with
background-image: url(’/themes/tutorial_theme/images/back.jpg’)

2.4 Copy images:

/web/images/…
in:
/web/themes/images/…

2.5 Modifiy all you prefere in theme template, layout, style..

Example:
Change body text color from white to black:
replace:
color: white;
with:
color: black;

You have sucessfully created a theme.

3. CREATE A FILTER FOR THEME ACTIVATION

This class extends the funcionalities of sfFilter Class.
If you don’t know what is a symfony filter, please first read here [].

ThemesFilter execute before the view render. It check if exists a defined theme in the system and if exists, overwrite layout, templates, style and images only if defined in the theme.

In my applications, I save in a SF_SETTING variable ( CURRENT_THEME ) the current theme and sfSettings plugin make the variable visible in all my application.

3.1 Create the filter class themesFilter.php

<?php
class themesFilter extends sfFilter
{
public function execute ($filterChain)
{

// take the theme from a constant or from where you want.
// i integrated theme administration with sf_settings plugin support
// i simply record in sf_settings a record with current selected theme
// and so sf_settings make visible a constant “current_theme” in all my symfony application
// but you can think to develop another type of theme administration

// $theme = CURRENT_THEME

$theme = “tutorial_theme”;

$actionEntry = $this->getContext()->getActionStack()->getLastEntry();

if($theme) {

$actionEntry->getActionInstance()->getResponse()->addStyleSheet(”/themes/”.$theme.”/css/style”);

$module = $this->getContext()->getModuleName();
$action = $this->getContext()->getActionName();

$template_folder = SF_ROOT_DIR.”/themes/”.$theme.”/modules/”;
// CHECK IF ALTERNATE TEMPLATE EXISTS
if ($actionEntry->getActionInstance()->getTemplate()) {
$theme_template = $template_folder . $actionEntry->getActionInstance()->getTemplate();
} else {
$theme_template = $template_folder . $module.”/”.$action;
}
// CHECK IF TEMPLATE FILE EXISTS IN THEME FOLDER
if (file_exists($theme_template.”Success.php”))
{
$actionEntry->getActionInstance()->setTemplate($theme_template);
}

$layout_folder = SF_ROOT_DIR.”/themes/”.$theme.”/layout/”;
// CHECK IF ALTERNATE LAYOUT EXISTS
if ($actionEntry->getActionInstance()->getLayout()) {
$layout = $layout_folder. $actionEntry->getActionInstance()->getLayout();
} else {
$layout = $layout_folder.”layout”;
}
// CHECK IF LAYOUT FILE EXISTS IN THEME FOLDER
if (file_exists($layout.”.php”))
{
$actionEntry->getActionInstance()->setLayout($layout);
}

}
else
{
$actionEntry->getActionInstance()->getResponse()->addStyleSheet(”style”);
}

$filterChain->execute();

}
}

3.2 Put this class file in application lib folder: /apps/frontend/lib.

3.3 Activate filter in your filters.yml file:

/apps/frontend/config/filters.yml

change it as follow:

rendering: ~
web_debug: ~
security: ~

themes:
class: themesFilter

cache: ~
common: ~
flash: ~
execution: ~

3.4 Clear the cache

Now you can appreciate that the aspect of your page have changed.
You can try to create another theme or to create more actions, add templates to the themes and modify them.

sf_sandbox_theme_management INSTALLATION INFO

In the sf sandbox themes administration management I included a rudimental theme administration system that uses sfSettings and permit to watch a preview of your site in a prototype window.

You only have to download it and:

- create a database

- configure database.yml and propel.ini

( make sure your propel.ini contain that lines: )

propel.database = mysql

propel.database.createUrl = mysql://localhost/
propel.database.url = mysql://username-here:[email protected]/your-db-here
propel.mysql.tableType = InnoDB

- build all ( >> symfony propel-build-all-load backend )

This will create a sf_setting table in your database and will load example data.

Now you can try:

- http://your-host/home <- frontend example

- http://your-host/backend.php/ <- backend themes administration system

Enjoy and remember to leave a comment ;)

Best regards.
Mauro Casula.
SymfonyFramework.com


10 Responses to “Themes management system with symfony - step by step tutorial”

You can leave a response, or trackback from your own site.

  1. May23

    Juan Carlos

    Said this at 12:53pm:

    Hi,
    thank you very much Mauro…
    have you planned to develop a plugin including these funcionalities?

    I think it may be a good idea.

    I’m trying themes management administration and i added the option to delete a theme.

    Give me a mail address and i will send you a zip archive.

    Best Regards.
    Juan Carlos

  2. May23

    admin

    Said this at 12:59pm:

    Hi Juan Carlos,
    I don’t have intention to develop a plugin in the immediate future.

    You can send me your modifications to:

    maurocasula ( AT ) gmail.com

    Thank you very much for the comment and for your collaboration.

    Best Regards
    Mauro Casula.

  3. May23

    zero0x

    Said this at 1:53pm:

    very nice and useful, thank you, I’m gonna need this this soon :)

  4. May25

    Frank Channy

    Said this at 2:43am:

    Thank you so much for sharing your methods with us and taking the time to create this excellent tutorial!
    I think this could be a very usefull plugin.
    I suggest: dwThemesPlugin :)

    Bye.
    Frank.
    Symfony developer.

  5. May25

    Paco

    Said this at 10:32pm:

    Thanks a lot for this tuto.

    two tiny workarounds for the sandbox :
    - sfSetting needs enabling in the settings.yml files (of each app)
    - ‘db_settings.yml’ is not included in the “_dev” versions of the front-controllers.

    Otherwise, works nicely… on IE. For a reason that puzzles me most, the themes changes are randomly (!) taken into account by Firefox ??? (with cache disabled of course). I guess it is due to some local setting within my Firefox…

  6. May26

    admin

    Said this at 3:02pm:

    Hi Paco,
    I will fix these problems this soon.

    I think one reason for your issue can be that, when you preview a page, I put in the session that theme in a variable called preview.
    Then, if you set a Theme as current theme, this is saved in the sf_setting table but is not cleared from session. ( I will fix that ).
    So, when you watch your page from the same browser, the theme doesnt change; you will see the last previewed theme.

    Best regards.
    Mauro Casula.

  7. May27

    Peter Van Garderen

    Said this at 3:30pm:

    Thanks for this great design pattern and your detailed explanation.

  8. Jun1

    rpsblog.com » A week of symfony #73 (19-&gt;25 may 2008)

    Said this at 2:04am:

    […] Themes management system with symfony - step by step tutorial […]

  9. Jun3

    To take away » Blog Archive » Themes management system with symfony - step by step tutorial

    Said this at 8:46am:

    […] Mauro Casula SymfonyFramework.com (more…) […]

  10. Oct14

    Alejandro

    Said this at 5:13am:

    Nice article, I beginning understand symfony, my firsts steps je, i wondering the way to customize the process (ORM-Propel) to generate the templates like indexsuccess.php in the process of ORM (propel), my idea its simple,use a php class for style of table, using jquery to change feel and look, if you help me , thanks (sorry for my english, its not my natural language)..

 

Leave a Reply

 

Recent Posts

Popular Categories

No categories

About

We are a group of programmers with the passion of Object Oriented Programming and PHP5… We hope to help the Symfony comunity to grow, we hope to help Php programmers to switch to MVC world and we wish you can find in this blog all you answers… Welcome to Symfony-Framework.com.

<<The Administrators>>