Templates & themes for CodeIgniter


One of the biggest drawbacks of a framework is the absence of built in theming functionality. CodeIgniter is no exception to that rule. Although there are quite a few libraries out there which aim to provide theming support, they don’t feel like being part of the framework. I was annoyed with having to use anything which looks like an ugly hack so I created a library which supports themes in CodeIgniter in a native style.

Templates for CodeIgniter

First of all let’s see how this baby works:

Using themes:

$this->load->theme('demo');
$this->load->view('home');

Loading CSS and Javascript files from within your views:

$this->load->css('/themes/demo/css/styles.css');
$this->load->js('/themes/demo/js/javascript.js');

Yes that was all. It is that simple.

 

Structure of your files

In the same path as your application folder create a theme folder and inside it a folder with the theme’s name. Also create a folder with the theme’s name inside views.

Inside the download you will see how the demo theme is structured.

/application/views/demo/...    (Your views go here)
/themes/demo/css/...           (CSS files)
/themes/demo/js/...            (Javascript files)
/themes/demo/theme.php         (The theme file itself)

 

Bonus: Caching control

Have you noticed that sometimes when you update your css or javascript files the changes don’t take effect until the browser empties it’s cache ? This library supports a suffix for all css and javascript files which allows you to control the caching of your files by the browser. Inside the config folder you will find a file mainframe.php. Make sure you autoload it and set a version for your files.

$config['cjsuf'] = '0.1';

When you change that version to say 0.2, browsers will be forced to reload them since they think it is a different file.

 

Inside the download there is a demo theme to get you started

Download it here

 

This is why I avoid Greek internet


They say that one image is one thousand words and in this case it’s true. I won’t say much, the image speaks for itself. This is a screenshot from the most popular Greek site. I followed this link from twitter. The article I was looking for was buried deep and I had to scroll, and scroll and scroll.

As you can see the article takes up 5% of the page (counted in pixels). The rest 95% is ads, menus, ads, offers, ads and some ads.

Visual note taking


Most people I know use a piece of paper or a word document to take quick notes on things to be done in a web project. For me nothing is more to the point than handwritten notes on a screenshot of your app.

Visual note taking

When you keep your notes on a text file, you will eventually have to get back to your application to remember what “background of sidebar on tasks overview page” actually refers to. When you take your notes on a screenshot, the word “grey” right above the sidebar does the trick. Visual note taking saves you from the annoying back and forth between your notes and your application. It’s like a post it with the text “buy milk” on your fridge.

Oh, so you are tired of Steve Jobs news ?


Of all the CEOs ever retired, Steve Jobs caused the greatest noise on the blogosphere and social media. A couple of days ago when his resignation was announced, my twitter timeline was literally full of Steve Jobs tweets. Only one out of about 20 tweets had a different subject. This effect caused a lot of people to express their annoyance on the overload of Steve Jobs news on online media.

Steve Jobs portrait

One of the things I dislike on people, is impiety. So I’d like to take a couple of minutes to remind you who is Steve Jobs and why all this fuss is taking place.

  • At the age of 21 and without having any money at all, he co-founded the company that popularized personal computing.
  • He popularized the mouse. Did he not, our computers could be still running some weird text based OS like windows 2.0
  • His company NeXT created NeXTSTEP which later became OSx. The worlds most popular UNIX desktop operating system and till now the only viable competitor of Microsoft Windows. If Jobs had not created NeXT, our computers could be still running Windows 95.
  • He popularized the touch screen interface on mobile devices. Otherwise, instead of the mobile revolution we are witnessing these days, we could be still stuck with some lame Nokia running Symbian.
  • He turned tablet computing from a theoretical and experimental concept to the next generation of computing with the revolution called iPad.
  • At the moment of his resignation Apple INC was the most valuable company in the world.

Now forget what you just read and consider that the large majority of people younger than 40 is spending more than 12 hours a day in front of a computer screen, either at work or at home. And for the rest of the day most of us use frequently a smartphone with a touch screen.

So if we put technology aside for a moment and try to think in absolute terms, it’s no exageration to say that Steve Jobs shaped the way our generation will spend half of it’s entire life. He literally helped to turn the information age from an intellectual conversation topic, to a day to day life reality for everyone. If that’s not enough for a media flood, then I don’t know what is.

And before you call me a fanboy, I should point out that I’ve never owned an apple device in my entire life. Not even an iPod.

Multisite CodeIgniter with sessions preserved across subdomains using virtual hosts


As I’m creating the mobile version of deskhot as well as some new accompanying apps I came across the need to have a single multisite codeigniter base where I can do all the development instead of multiple installations.

What I needed and what this post covers:

  • Multiple web applications running from a single codeigniter instance.
  • Each application must have it’s own subdomain. For example deskhot.com, m.deskhot.com, pilot.deskhot.com and so on.
  • When a user logs in, in one application, he must be logged in, in all applications. So all applications must share the same session data.
  • Only one codeigniter system folder so upgrades can done once for all applications/subdomains.
    But also having the flexibility to have a certain application using an older system folder if I see fit in the future.

ipad iphone mac devices

So let’s get into action

1. Add the subdomains in your hosts file

All operating systems have a hosts file which helps map ip addresses to domains. Of course you should add all the subdomains in your hosts file. Here is the location of the hosts file for each operating system.

This is how my hosts file looks like

127.0.0.1        deskhot.d
127.0.0.1        m.deskhot.d
127.0.0.1        pilot.deskhot.d

 

2. Add a server alias in the apache config

The next step is configuring your virtual hosts so you can have apache know about your subdomains. In my system the vhosts file is located in /apache/conf/extra/httpd-vhosts.conf. This will be different in your system so just do a search and you’ll find it. There will be some default configuration for localhost already there.

Add the following in the end of the file:

<VirtualHost *:80>
    DocumentRoot "/path-to-your-document-root/your-domain.tld"
    ServerName domain.tld
    ServerAlias *.domain.tld
</VirtualHost>

For example my vhosts file looks like this (in a windows system)

<VirtualHost *:80>
    DocumentRoot "/Users/Username/www/DemianLabs/Deskhot.com"
    ServerName deskhot.d
    ServerAlias *.deskhot.d
</VirtualHost>

As you have guesses I access my development version through http://deskhot.d. You need to change the path and domain in the above lines to suit your own configuration.

 

3. Create your applications

Grab a fresh CodeIgniter and drop it in the folder where you would normaly do your single site development. Then make a copy of application folder for each of your subdomains. A tidy way to name all those application folders is to follow the patern application_subdomain. So for example my folders look like this:

/application                  // for the main site: deskhot.d
/application_m                // for m.deskhot.d
/application_pilot            // for pilot.deskhot.d
/system                       // the system folder
/user_guide                   // the user guide
/index.php
/license.txt

Once again change deskhot to your desired domain.

Next we need to tell CodeIgniter which application folder will be active depending on the url. To do that, open the index.php file and find the line containing $application_folder = ‘application'; and replace it with the following code:

switch ($_SERVER['HTTP_HOST']){
        case 'm.deskhot.d':
            $application_folder = 'application_m';
        break;

        case 'pilot.deskhot.d':
            $application_folder = 'application_pilot';
        break;

        default :
            $application_folder = 'application';
}

Once again change deskhot to your desired domain.

 

4. Configure all applications to share the same cookie domain

In each application folder find the file config/config.php and find the line $config[‘cookie_domain’]    = “”;. It’s around line 260.

Replace it with something like this depending on your domain:

$config['cookie_domain']    = ".deskhot.d";

Notice that this must be the same line in all config/config.php files in all application folders. This will ensure that all applications will read the same cookie and therefore use the same session data.

 

5. Specify a different system folder for each application (optional)

We can do the same trick we did in step 3 for the system folder as well. So for example we can have the following folders:

/system             // The latest CodeIgniter
/system_201         // Version 2.0.1
/system_202         // Version 2.0.2
.... and so on

To do that open index.php again and delete the line (around 65) $system_path = ‘system';

Then change the code we used in step 3 to look like this:

switch ($_SERVER['HTTP_HOST']){
        case 'm.deskhot.d':
            $application_folder = 'application_m';
            $system_path = 'system';
        break;

        case 'pilot.deskhot.d':
            $application_folder = 'application_pilot';
            $system_path = 'system_201';
        break;

        default :
            $application_folder = 'application';
            $system_path = 'system';
 }

In this example all applications use the system folder except pilot, which is using system_201. This way you can upgrade CodeIgniter to a new version only for a specific application and leave the other ones using an older version. This can be handy when you want to do your post-upgrade testing in stages.

 

If you have any comments or questions I’d be glad to hear them on twitter or google+.
In a few days I’ll be writting a new post about how you can make all the applications share some common resources like helpers.