MasterPage using HTML::Template

Can we create single master page which includes header,footer and left-right panel ?  Absolutely yes yes !!! Since morning I was working on it and finally Eureka !!!

Note: It can be achieved by filter parameter of  HTML::Template, we are going to see in below example

Let me start with step by step

Create Masterpage: /html/masterpage.tmpl

<html>
<body>
<div style=”background:red;width:100%;height:100px”>
Header Section
</dvi>
<div style=”background:white;width:100%;margin-top:200px” id=”content”>
<tmpl_include name=”childpage”>
</div>
<div style=”background:green;width:100%;height:100px;margin-top:200px”>
Footer Section
</div>
</body>
</html>

Create Page Module: /cgi-bin/lib/Page.pm

package Page;
use CGI;
use HTML::Template;

BEGIN {
my $query = CGI->new();
print $query->header();
}

sub output  {
my $hash = pop @_;

my $childpage = $hash->{‘childpage’};
my $filter = sub {
my $text_ref = shift;
$$text_ref =~ s/childpage/$childpage/
};

my $template = HTML::Template->new(filename => $hash->{‘masterpage’},filter => $filter);
print $template->output();
}
1;

Create Child Pages: /html/ index.tmpl, /html/login.tmpl

index.tmpl

This is the home page or index page of website

login.tmpl

<form>
<table>
<tr><td>Username:</td><td><input type=’text’ /></td></tr>
<tr><td>Password:</td><td><input type=’text’ /></td></tr>
<tr><td colspan=”2″><input type=’submit’ /></td></tr>
</table>
</form>

Create CGI pages:  /cgi-bin/cgi/index.cgi,  /cgi-bin/cgi/login.cgi

1)  index.cgi

#!c:\perl\bin\perl.exe -w
use CGI::Carp qw(fatalsToBrowser);
use lib “./../lib/”;
use Page;

Page->output({
‘masterpage’ => ‘../../html/masterpage.tmpl’,
‘childpage’ => “index.tmpl”,
});

2)  login.cgi

#!c:\perl\bin\perl.exe -w
use CGI::Carp qw(fatalsToBrowser);
use lib “./../lib/”;
use Page;

Page->output({
‘masterpage’ => ‘../../html/masterpage.tmpl’,
‘childpage’ => “login.tmpl”,
});

Call CGI page:

http://localhost/cgi-bin/index.cgi

http://localhost/cgi-bin/login.cgi

Please contact me you want any query or want .rar file of this example.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s