Perl und CGI Workshops HTML Templates + Platzhalter Ersetzungen

CGI/Perl Workshops HTML Templates + Platzhalter Ersetzungen

Inhaltsverzeichnis/Workshops Übersichtsseite/HTML Templates + Platzhalter Ersetzungen

Hier in diesem Workshop will ich zeigen wie man HTML Templates in seinen Scripten nutzt und die darin enthaltenen Platzhalter mit vom Script gelieferten Variablen ersetzt. Diese vorgehensweise bietet sich insbesondere dann an wenn z.B. mehrere Leute an einem Projekt arbeiten. So der Webdesigner und der Scriptprogrammierer. Oder aber wenn man mehrere Layouts für ein Script verwenden möchte und/oder das Gestalten solcher Layouts auch unerfahrenen Personen möglich machen will.

1. Kleines Funktionsbeispiel

1. Das Script:

#!/usr/bin/perl

# Variablen die im Template ersetzt werden sollen
# Diese können natürlich auch in einer externen 
# Variablen Datei stehen und per require eingebunden werden

$hp = "http://www.inspire-net.de";
$banner = "http://www.inspire-net.de/inspire.gif";

#############################################################
# Hier wird die layout.html geöffnet und mittels einer
# foreach Schleife die Datei nach den Platzhaltern durchsucht.

# Platzhalter <%%hp%%> und <%%banner%%>

open(FILE,"layout.html");
foreach $i (<FILE>){
$i =~ s/<%%hp%%>/$hp/g;
$i =~ s/<%%banner%%>/$banner/g;
$layout .= $i;
}
close(FILE);

#############################################################
# Hier nun wird die Datei ausgegeben an den Browser 

print "Content-Type: text/html\n\n";
print $layout;

2. Die layout.html

<html>
<head>
<title>Layoutdatei</title>
</head>

<body>
<a href="<%%hp%%>">Homepage</a><br><br>

<img src="<%%banner%%>"><br><br>

</body>
</html>

Erläuterungen dazu:

Die Platzhalter können durchaus abweichend von dem hier vorgestellten Format sein. Wichtig ist das diese mit < > eingeschlossen sind. Möglich wäre auch eine solche Schreibweise <_hp_> oder nur <_hp>

Natürlich können diese Codes auch in Subroutinen notiert werden. So kann man Header, Scriptausgabe und Footer voneinander trennen.

1.1. Erweitertes Beispiel

Hier an diesem Beispiel will ich das ganze etwas ausführlicher darstellen.

1. Das Script:

#!/usr/bin/perl

# Scriptvariablen

$hp = "http://www.inspire-net.de";
$banner = "http://www.inspire-net.de/inspire.gif";
$tabellenrandfarbe = "#000000";
$tabellenfarbe = "#DFDFDF";
# Subroutine Datum
$datum = &datum;
# Eine TXT Datei per Subroutine ausgeben
$info = &info;

##################################

# Header HTML Datei
open(FILE,"header.html");
foreach $i (<FILE>){
$i =~ s/<%%tabellenrandfarbe%%>/$tabellenrandfarbe/g;
$i =~ s/<%%tabellenfarbe%%>/$tabellenfarbe/g;
$i =~ s/<%%banner%%>/$banner/g;
$header .= $i;
}
close(FILE);
print "Content-Type: text/html\n\n";
print $header;

# Body HTML Datei
open(FILE,"body.html");
foreach $i (<FILE>){
$i =~ s/<%%tabellenrandfarbe%%>/$tabellenrandfarbe/g;
$i =~ s/<%%tabellenfarbe%%>/$tabellenfarbe/g;
$i =~ s/<%%datum%%>/$datum/g;
$i =~ s/<%%info%%>/$info/g;
$body .= $i;
}
close(FILE);
print $body;

# Footer HTML Datei

open(FILE,"footer.html");
foreach $i (<FILE>){
$i =~ s/<%%tabellenrandfarbe%%>/$tabellenrandfarbe/g;
$i =~ s/<%%tabellenfarbe%%>/$tabellenfarbe/g;
$i =~ s/<%%hp%%>/$hp/g;
$footer .= $i;
}
close(FILE);
print $footer;

##################################
# Subroutinen
##################################

sub datum {
# Datumsroutine

@tage = ('Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag');
@monate = ('Januar','Februar','Maerz','April','Mai','Juni','Juli','August',
'September','Oktober','November','Dezember');
($sec, $min, $stunde, $mtag, $mon, $jahr, $tag, $nr_tag, $isdst) = localtime(time);
if($stunde < 10) { $stunde = "0$stunde"; }
if ($min < 10) { $min = "0$min"; }
if ($sec < 10) { $sec = "0$sec"; }
$jahr = 1900 + $jahr;
$datum = "$tage[$tag], $mtag. $monate[$mon] , $jahr";
}

sub info {
open(FILE,"<info.txt");
@info = <FILE>;
close(FILE);
return "@info";
}

2. Die Dateien die das Layout bestimmen

1. header.html

<html>
<head>
<title>Layoutdatei</title>
</head>

<body>
<div align="center">
<table bgcolor="<%%tabellenrandfarbe%%>" width="700" 
cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table width="100%" cellspacing="1" cellpadding="2" border="0">
<tr>
<td bgcolor="<%%tabellenfarbe%%>" align="center">
<img src="<%%banner%%>"></td>
</tr>
</table></td></tr></table><br>

2. body.html

<table bgcolor="<%%tabellenrandfarbe%%>" width="700" 
cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table width="100%" cellspacing="1" cellpadding="2" border="0">
<tr>
<td bgcolor="<%%tabellenfarbe%%>" align="center">
<%%datum%%><br><br><%%info%%>
</td>
</tr>
</table></td></tr></table><br>

3. footer.html

<table bgcolor="<%%tabellenrandfarbe%%>" width="700" 
cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table width="100%" cellspacing="1" cellpadding="2" border="0">
<tr>
<td bgcolor="<%%tabellenfarbe%%>" align="center">
<a href="<%%hp%%>">Homepage</a></td>
</tr>
</table></td></tr></table>
</div>
</body>
</html>

Erläuterungen dazu:

Script Demo: ansehen

Wie jeder sehen wird habe ich im ersten Scriptabschnitt die drei HTML-Templates aufgerufen und ausgeben lassen. Neu in dem Script hier ist das ich unterhalb zwei Subroutinen definiert habe die dann innerhalb des body Templates ausgeführt werden.

Man beachte die return "@info"; Anweisung. Hier kann man nicht print notieren, dies würde dazu führen das die Datei irgendwo, aber bestimmt nicht an der Stelle wo sie hinsoll, ausgegeben würde. return gibt das zwar auch aus, wir können dies aber an die Stelle der$info Variable "printen" lassen.

Um das Layout zu ändern braucht also der Benutzer nicht mehr in das Script selbst eingreifen. Es reicht wenn die HTML Templates bearbeitet werden.

Zum Inhaltsverzeichnis/Workshops Übersichtsseite/HTML Templates + Platzhalter Ersetzungen

Autor: Helmut Walter Homepage Inspire-world Fragen, Anregungen und Hinweise bitte in das Forum