Exciting things

Aptana + PHP = Dreamweaver

 

We’re fan of free tools. We asked our HTML team to use Aptana as the IDE instead of Adobe Dreamweaver. However, from feedbacks of the team:

Aptana does not allow them to manage common HTML pieces => So, in case there are 10 HTML components used for 10 pages – if they need to change 1 component, they need to copy/paste the HTML piece on 10 pages.

This is a critical problem in efficiency. So, we need to find the solution.

One of the solution we find:

Using PHP syntax (include) for embedding common HTML parts in different pages. By this way, we need to change in the common HTML component in 1 file and it will affect to everywhere.

I did setting up a small skeleton PHP project for this purpose. Below is what we’re applying.

1. The PHP project skeleton

  • Common HTML components are put into component folder.
  • Master template pages are put at the root.
  • css/js/images are on the same hierachy level.

2. The .htaccess file

—————————————————————————————

RewriteEngine on

#Rewrite rule to make nice “html” file path
RewriteRule ^(.*).html$ $1.php [nc]

#Allow css files to be processed by the php engine.

<FilesMatch “.(css|style)$”>
 SetHandler application/x-httpd-php
</FilesMatch>

—————————————————————————————

Why we need css files processed by PHP engine? => for solving the editing conflicts in collaboration working on SVN.

In case we use only 1 css file for working among >=2 developers, they often have conflicts when updating the file from SVN. To pass this issue + increase more the efficiency in working – we proposed the component approach.

3. Component approach

An HTML page should be separated into 2 main concepts:

+ The layout: this is the structure of a HTML page – which defines main zones of a page.

+ Components: HTML pieces that are displayed on zones. They can be used commonly in different pages.

So, for styling the layout + components, developers can work on different css files. However, when all css files for components are finished => they need to be merged into 1 file.

4. How we mix layout + component css files into 1 file?

On the merged css file, we put below script:

—————————————————————————————

<?php
    //Override the header Content-Type. Without this line, the browser
    //thinks this is a text file => no css effect.
    header(“Content-Type: text/css”);
    include(“index-layout.css”); //layout css file.
    include(“menu.css”); //component css file
    include(“post.css”); //component css file
   
 ?>

—————————————————————————————

I did a try with a template on this skeleton project and see it’s working so great!

Will apply this one to the team from next week. Wait’n see.

Leave a Reply

Your email address will not be published. Required fields are marked *