Template Blocks

Some of this information may be different depending on the platform you are working (Windows, Linux, Mac OS). In any case you will need Apache installed and running beforehand.

To access Template Blocks locally you will need to map a domain name to point to its location. That way you won’t have to install Template Blocks on the root of your server or fight with custom paths that may cause glitches to the engine. Instead you can work with Template Blocks on a top domain level, wherever it is on the local server.

Setting up a VistualHost in Apache

Go to where your Apache is installed and find to the “conf/extra” sub-folder. Open “httpd-vhosts.conf” in a text editor. You’ll find some commented examples how to setup a VirtualHost entry - write at the bottom of the file your own. These are the ones I use on my setup:

NameVirtualHost 127.0.0.1
 
<VirtualHost 127.0.0.1>
  DocumentRoot "C:\Server\htdocs"
  ServerName localhost
</VirtualHost>
 
<VirtualHost 127.0.0.1>
  DocumentRoot "C:\Server\htdocs\templateblocks"
  ServerName templateblocks.dev
</VirtualHost>

Note that you should change the IP (127.0.0.1) if your server has another one and the document path and domain name as suited.

For Windows users

Additionally you’ll have to tell windows to redirect the domain name (templateblocks.dev) to the local server and not make a DNS look up for it online.

For this go to “C:\WINDOWS\system32\drivers\etc\” and open the “hosts” file in a text editor. There you will possibly find a line already redirecting yo your local server, mine is:

127.0.0.1       localhost

Under that line make a new line for your custom domain (templateblocks.dev)

127.0.0.1       templateblocks.dev

Save that file. Now when you enter “templateblocks.dev” from a browser windows knows to redirect it to your local server and your local server knows to redirect it to the appropriate folder.

Re-start Apache and load a web browser to you new a top level domain.

Enjoy working with Template Blocks offline.

<?php
/**
 * TEMPLATE BLOCKS
 * Copyright (C) 2008 Makis Tracend
 * 
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * http://www.gnu.org/licenses/gpl-2.0.txt
 * 
 * Class: MODx
 * 
*************************************************************************
	MODx Content Management System and PHP Application Framework 
	Managed and maintained by Raymond Irving, Ryan Thrash and the
	MODx community
*************************************************************************
* Known Limitations: 
* - This class only works on MODx setup with MySQL 
* - Only one MODx installation per website is supported 
* - You need to insert the database information to connect to MODx manually
*/
 
 
/* Variables (PLEASE CHANGE AS SUITED) */
$_TEMPLATE_VARS['modx_root'] = '/'; 
$_TEMPLATE_VARS['database_server'] = '';
$_TEMPLATE_VARS['database_name'] = '';
$_TEMPLATE_VARS['database_user'] = '';
$_TEMPLATE_VARS['database_password'] = '';
$_TEMPLATE_VARS['table_prefix'] = '';
 
 
class MODx{
  # Define class varriables
  private $dbhost;
  private $dbuser;
  private $dbpass;
  private $dbname;
  private $prefix;
  private $connection;
  private $settings;
 
  # Call constructor
  function __construct() {
    global $_TEMPLATE_VARS;
 
    $this->dbhost = $_TEMPLATE_VARS['database_server'];
    $this->dbname = $_TEMPLATE_VARS['database_name'];
    $this->dbuser = $_TEMPLATE_VARS['database_user'];
    $this->dbpass = $_TEMPLATE_VARS['database_password'];
    $this->prefix = $_TEMPLATE_VARS['table_prefix'];
 
	$this->openConnection();
  }
 
  function openConnection(){
 
    $this->connection = @mysql_connect($this->dbhost, $this->dbuser, $this->dbpass) or die('Could not connect: ' . mysql_error());
	//Select the database connection for use
	mysql_select_db($this->dbname, $this->connection) or die('could not select database'); 
  }
 
  function getSettings(){
 
	//Run the query and store the results
	$data=mysql_query('SELECT * FROM ' . $this->prefix . 'system_settings')or die('query failed'. mysql_error());
 
	$numrows=mysql_num_rows($data);
 
	if( $numrows>0 ){
	  //Place all of the data into an array
	  for( $i=0; $i<$numrows; $i++ ){
	    $row = mysql_fetch_assoc($data);
	    $returndata[$row['setting_name']]=$row['setting_value'];
	  }
	  //Return the results
      $this->settings = $returndata;
    }
  }
 
  function findPage(){
    global $_TEMPLATE_VARS;
 
	// first parse the URL
	if ( $this->settings['friendly_urls'] ) {
	  // we have user friendly URLs
	  $urlparts = explode('/', $_SERVER['REQUEST_URI']);
	  $file = array_pop( $urlparts );
	  // for the case we are viewing a container of pages we need to go one level in
      if( $file=='' ){ $file = array_pop( $urlparts ); }
 
	  if ( $this->settings['use_alias_path'] ) {
	    $parent_alias = array_pop( $urlparts );
		if( $parent_alias ){
		  // now find the parent's id
	      $parent_data=mysql_query("SELECT id FROM " . $this->prefix . "site_content WHERE alias='" . $parent_alias . "'")or die('query failed'. mysql_error());
	      if( mysql_num_rows($parent_data) ){ $parent_array=mysql_fetch_assoc($parent_data); }
		  $parent_id = $parent_array['id'];
		}
	  }
	  $file_parts = array( $this->settings['friendly_url_prefix'], $this->settings['friendly_url_suffix'] );
	  if ( $this->settings['friendly_alias_urls'] ) {
		$page_alias = ( $file != '' ) ? str_replace( $file_parts, '', $file ) : 'index';
	  } else {
		$page_id = ( $file != '' ) ? str_replace( $file_parts, '', $file ) : '1';
	  }
	} else {
	  // we simple have an id variable in the URL let's parse that...
      import_request_variables("gp", "page_");
	  // a precaution so that the query doesn't return an error
	  if( !$page_id ){ $page_id = '1'; }
	}
 
	// compile the query 
	$query = "SELECT * FROM " . $this->prefix . "site_content WHERE ";
	if($page_alias){ $query .= "alias='" . $page_alias . "'"; }
	if($page_id){ $query .= "id=" . $page_id; }
	if($parent_id){ $query .= " AND parent=" . $parent_id; }
 
	$data=mysql_query( $query )or die('query failed'. mysql_error());
 
	if( mysql_num_rows($data) ){
	  // We only need one record so we won't loop through the $numrows
	  $returndata=mysql_fetch_assoc($data);
	  //Return the results
	  return $returndata;
	}
  }	
}
 
$modx = new MODx();
$modx->getSettings();
$modx_page = $modx->findPage();
 
$_TEMPLATE_VARS['page-title'] = ( $modx_page['longtitle'] ) ? $modx_page['longtitle'] : $modx_page['pagetitle'];
$page['title'] = $_TEMPLATE_VARS['page-title'];
 
unset($modx);
unset($modx_page);
 
?>

Instructions:
- Copy the above code and paste it in a text editor.
- Edit the top $_TEMPLATE_VARS variables (6 total). The information refers to your MODx installation.
- Save the text file as “MODx.php” and place it in the classes folder of your Template Blocks (default: ‘template/classes’)
- To use it, select it for a section, in the available classes list (edit screen) or refer to it from a PHP block with an include command.

Known Limitations:
- This class only works on MODx setup with MySQL.
- Only one MODx installation per website is supported.
- You need to insert the database information to connect to MODx manually.

Changelog:
v1.0 Initial Release - Web page title automatically embedded in the functionality.

<?php
 
$links = array( 'Home' => '/',
                'Features' => '/features.html',
                'Demo' => '/demo.html',
                'Download' => '/download.html',
                'Support' => '/support/',
                'About' => '/about.html'
               );
 
echo '  <ul id="toplinks">';
 
foreach( $links as $key => $value ){
  $selected = ($_SERVER['REQUEST_URI'] == $value) ? ' class="selected"' : '';
  echo '<li><a href="' . $value . '"' . $selected . '><span>' . $key . '</span></a></li>';
}
 
echo '  </ul>';
 
?>

Just replace the array at the top the with your URL list and menu titles. You might also need to make some modifications in the markup that is generated…

Bug fixes:
- Timed out sessions loaded the login screen within the admin pages.
- JavaScript blocks were linked falsely (with a .javascript extension instead of a .js)
- A section with static content could not be converted to a section of an external script.
- Setup process didn’t stop when you entered the wrong database information.
- In IE, blocks where loosing their coloring after some moving around in the template editing.
- Version number was erased after editing the website settings.
- Before loading a block for editing all the “\” characters where removed.

Improvements:
- Introduced loading screen to cover the delay when navigating through the admin pages.
- Moved classes folder outside the admin folder for a more logical structure.
- Removed the assets sub-folder so it doesn’t get confused with the user assets folder. All its contents are directly available in the admin folder.
- Moving the blocks around in the template layout used to have a few glitches. Now it’s more smooth and stable.
- Homepage now loads faster with the remote call for latest version converted to an Ajax call.
- The search engine friendly URLs are now parsed more properly. The parent element is considered to validate a URL. An ending slash with no filename redirects to the section with the same name as the folder.
- Feedback messages when editing the template do not fade out if they request an action from the user.
- Sections can be nested in more than two levels.

New features:
- More dynamic elements are displayed in the homepage (comments, repository).
- Now you can load custom classes for each external script you use, so you can connect to it for manipulating elements of the template like the page title.
- There is now an exception list in the settings page to insert all the URLs you specifically don’t want the template engine to process.

These and other smaller improvements have made the template engine more stable (especially for IE that had the most problems), more clean and more logically structured. Some of the new features (ex. the custom classes) need more explaining and you will find this information in the tutorial pages.

As always you can send in your comments and suggestions to make this a better engine than it is…

<?php
 
$items = $db->select( '*', $config['Sections'], false, 'id');
if( is_array($items) ){
  $children = array();
  foreach( $items as $k => $v ){
    preg_match('/(.*)\((.*)\)/', $v['position'], $matches);
 
    if($matches[2] == 'x') {
      array_push($children[$matches[1]], $v['id']);
    } else {
      $children[$matches[1]][$matches[2]] = $v['id'];
    }
  }
  $output = createOrder( $items, $children );
}
echo '<div id="topbar">';
echo $output;
echo '</div>';
 
function createOrder( $items, $order, $parent=0, $path='' ){
 
  ksort($order[$parent]); 
 
  $listings .= '<ul>';
 
  $middle = '</span></a>';
  $close = '</li>';
  foreach( $order[$parent] as $k => $v ){
    foreach( $items as $l => $w ){
      // now we can create the listings
      if( $w['id'] == $v ){
        $open = '<li><a href="/'. $path . $w['slug'] .'.html"><span>';
        // check for children in this branch
        if (array_key_exists($w['id'], $order)) {
		  $new_path = $path . $w['slug'] . '/';
	      $children = createOrder( $items, $order, $w['id'], $new_path );
	    } else {
	      $children = '';
	    }
	  $listings .= $open . $w['title'] . $middle .  $children . $close;
      }
    }
  }
  $listings .= '</ul>';
 
  return $listings;
}
 
?>

Instructions:
- Copy/paste the following code and save it as a PHP block
- Edit the $open , $close variables if needed for a custom layout…

Change log:
- v1.2 : Better linking of children. Proper order restored.
- v1.1 : Updated the ‘parent’ field to the new ‘position’ field. Additional tweaks.
- v1.0 : Initial release

Pop-up notes make up for the absence of a voice. Being a relatively easy process it doesn’t make that much of a difference anyway - in fact the text is better comprehended and memorized. Intended for first-time users and novice web developers.

- How does the “index.php” file in the root works?
The index.php handles all the redirection after the request passes from the .htaccess file. Based on the URL the sctipt will find the section name and the parent section name (if any) and submit that information to the “template/index.php” which resources the actual data. Note that the script can only handle pages created though the template engine’s administration interface. If the engine doesn’t find a section assigned to that request it will redirect the visitor to the index page.

- What is the .htaccess commands mean?
This is the code included in the .htaccess file

<IfModule mod_rewrite.c>
RewriteEngine On
 
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
 
</IfModule>

Basically it says that if a file or directory from the URL requested is not actually there then redirect to the index.php on the same level to handle the request. It’s the same code that Wordpress uses for its search engine friendly URLs…

- I can’t get the redirection to work! I’m only seeing the index page.
Make sure that mod_rewrite is loaded for your server setup. That’s the module the .htaccess file uses for the redirection commands. Go to where your Apache is installed and move to the “conf/” sub-folder. Open “httpd.conf” in a text editor.
Find the line

LoadModule rewrite_module modules/mod_rewrite.so

and make sure it’s uncommented (no # in front of it). Save the file. Re-start Apache. Now redirections should work.

- What information does the engine need for a redirection?
All information is passed through the URL, the section name and it’s parents in an hierarchical order. It will then compile all the right pieces and present the template automatically.

- Can I load the template manually?
To load a template from your script all you need to know is the section slug you have created in Template Blocks for that script. Then load it in the variable $GLOBALS[’section’] and include the ‘/template/index.php’ file. Now you have the template in two variables:
$GLOBALS[’template-pre’] - the template before the content
$GLOBALS[’template-post’] - the template after the content
It’s up to you to use the template however you want in your script.

- The variable $GLOBALS[’section’] is reserved by my script. What do I do?
In this case you can easily change it to anything else you want. Simply open “template/index.php” and replace the $GLOBALS[’section’] to $GLOBALS[’anything_you_want’]. Then assign to that variable the name of the slug for the section that is linked with the script.

I always intended to improve that engine as it lacked the basic user-friendly features (No SE-friendly URLs, no dynamic content and no AJAX administration) but never really found myself doing it, mostly because other work took up all my energy/time.

Fast forward to 2008 and after years of web designing the logic of a proper template engine matured in my head. To my surprise I didn’t find this logic implemented on any of the template engines I worked on till then. It finally hit me one day that this will never end. I would spend valuable hours of my life trying to work with inflexible engines unless I sit down and create what was in my head.

I wanted it primarily for my websites but thought I should release it to the open source since the goal to create a visual template engine is beyond my personal needs. At this point I have to redirect you to the About page for more info on the underlying ideas of this project.

Serious development begun on March 2008 and although the main parts where setup soon enough (within two weeks) I still managed to spend another month fine-tuning the administration interface and creating all the elements that would be appealing for the users: the official website, the setup procedure, the demo content…etc.

I’m releasing version 1.0 at this point so I can get some feedback from the users and according to that shape the direction I want to take for future releases of the engine. Above all this is a web designers tool and I feel that web designers should have the first word for improving it the way they like it.

There are a series of features and bugs already noted but left to be included on later versions (or not). In any case, one of my biggest concerns will be to optimize the back-end as well as the front-end, so you will always have a stable and user-friendly canvas to work on.

Even though it is the first release, it is a functional engine with many of the features advertised at perfect state. Your feedback and support will help it become a valuable tool for any web designer.

You can download this version of Template Blocks from the following sources:

Google Code

SourceForge.net

Cheers,
Makis

- How am I going to use Template Blocks offline?
Although Template Blocks can be used as a full-blown template engine - and many will prefer to use it as such, it was created with helping the web designer’s work in mind. In that regards t’s intended for use at the early stages of development where the user is forming the web templates from concept graphics. You’ll need to setup Linux with PHP and MySQL on your computer and setup a web server to work locally. Template blocks may not be a WYSIWYG editor and it’s certainly not a CMS but it can prove to be a valuable a web design tool.