Trennung von Code und Layout - oder geht's einfacher?
Verfasst: Do Mär 28, 2013 3:38 pm
Hi, ich bin 2008 das erste mal mit PHP im Kontakt gekommen. Die Trennung von Code und Layout ist eine Sache die mir immer wieder Kopfschmerzen bereitet. Inzwischen gliedere ich mein aktuelles PHP-Projekt (Webseite meiner Band) folgendermaßen:
In der index.php prüfe ich (anhand von GET- und POST-Parametern), auf welcher Unterseite ich mich befinde. Für jeden Gliederungspunkt gibt es einen eigenen Ordner, der eine controller.php (mit der Programmlogik: Daten aus GET/POST lesen, mit Datenbank arbeiten, Template-Files inkludieren). Dazu gibt es diverse .js, .css und .php Dateien (letztere für "Templates"). Um den JavaScript-Code so knapp wie möglich zu halten, setze ich auf jQuery und ein paar eigene kleine Funktionen. Trotzdem bereitet mir der Aufbau meiner Templates Kopfzerbrechen. Für gemeinsame Template-Teile (Header, Navigation usw.) verwende ich bereits ausgelagerte Templates. Meine eigentlichen Templates sind aber trotzdem ein Gewirr aus öffnenden und schließenden PHP-Tags, massenhaft Schleifen, Verzweigungen und Print-Anweisungen, und stellenweise (außerhalb der PHP-Tags) auch normaler HTML-Code.
Ich befürchte zwar, dass das das gängige Problem bei der Webentwicklung mit PHP ist, habe aber trotzdem noch einen letzten Funken Hoffnung
Ich war 2010 gegen Ende meiner Ausbildung über den Begriff XSLT gestolpert. Lässt sich durch gezielte Verwendung von XML das Problem mit der Vermischung von Code und Layout in den Templates verringern? Ich hatte mir auch einige Template Engines (namentlich ist mir nur Smarty im Kopf geblieben) experimentiert. Dabei hatte mich aber keine so richtig überzeugt, so dass ich bei den üblichen auf-allen-vieren-Templates geblieben bin.
Zum Glück sind meine Templates nicht zu lang (i.d.R. <200 Zeilen). Trotzdem ärgerlich
Vor einiger Zeit hatte ich mit Python "webentwickelt" (Bottle Framework). Da waren die Templates irgendwie wesentlich übersichtlicher. Hier mal ein Beispiel:
Von meiner Bandhomepage (PHP)
Von meinem alten Browsergame-Projekt (Python)
LG Glocke
In der index.php prüfe ich (anhand von GET- und POST-Parametern), auf welcher Unterseite ich mich befinde. Für jeden Gliederungspunkt gibt es einen eigenen Ordner, der eine controller.php (mit der Programmlogik: Daten aus GET/POST lesen, mit Datenbank arbeiten, Template-Files inkludieren). Dazu gibt es diverse .js, .css und .php Dateien (letztere für "Templates"). Um den JavaScript-Code so knapp wie möglich zu halten, setze ich auf jQuery und ein paar eigene kleine Funktionen. Trotzdem bereitet mir der Aufbau meiner Templates Kopfzerbrechen. Für gemeinsame Template-Teile (Header, Navigation usw.) verwende ich bereits ausgelagerte Templates. Meine eigentlichen Templates sind aber trotzdem ein Gewirr aus öffnenden und schließenden PHP-Tags, massenhaft Schleifen, Verzweigungen und Print-Anweisungen, und stellenweise (außerhalb der PHP-Tags) auch normaler HTML-Code.
Ich befürchte zwar, dass das das gängige Problem bei der Webentwicklung mit PHP ist, habe aber trotzdem noch einen letzten Funken Hoffnung
Ich war 2010 gegen Ende meiner Ausbildung über den Begriff XSLT gestolpert. Lässt sich durch gezielte Verwendung von XML das Problem mit der Vermischung von Code und Layout in den Templates verringern? Ich hatte mir auch einige Template Engines (namentlich ist mir nur Smarty im Kopf geblieben) experimentiert. Dabei hatte mich aber keine so richtig überzeugt, so dass ich bei den üblichen auf-allen-vieren-Templates geblieben bin.Zum Glück sind meine Templates nicht zu lang (i.d.R. <200 Zeilen). Trotzdem ärgerlich
Vor einiger Zeit hatte ich mit Python "webentwickelt" (Bottle Framework). Da waren die Templates irgendwie wesentlich übersichtlicher. Hier mal ein Beispiel:
Von meiner Bandhomepage (PHP)
Code: Alles auswählen
<div class="center">
<?php
$value = $data['date'];
if ($data['sid'] != null) {
print '<div style="float:right;"><input type="button" onClick="javascript:redirect(\'/dates/'.$data['sid'].'/add/\');" value="Termin hinzufügen" /></div>';
}
print '<div class="dates_view">';
print '<div class="head transparent rounded"><div class="title">'.$data['title'].'</div>';
print '<div class="date">'.$data['timestring'].' Uhr</div>';
print '<div class="place">'.($data['date']->place).'</div>';
print '<div class="bands"><b>Bands:</b><br />'.$data['date']->bands.'</div>';
if ($data['sid'] != null) {
print '<div class="author">von '.$data['author'][0] . ' <a href="/dates/'.$data['sid'].'/edit/';
print ($value->id).'/"><img src="/core/edit.png" class="icon" /></a>';
print '<a href="javascript:del(\''.$data['sid'].'\', '.($value->id).'">';
print '<img src="/core/delete.png" class="icon" /></a></div>';
}
print '</div>';
print '<div class="detail_description rounded">';
$flyerAlign = "flyerLeft";
if (rand(0, 1) == 1) {
$flyerAlign = "flyerRight";
}
if (isset($data['date']->flyer) && ($data['date']->flyer != "")) {
print '<a href="'.$data['date']->flyer.'" target="_blank"><img class="'.$flyerAlign.'" src="'.$data['date']->flyer.'" /></a>';
}
print $data['description'] . '</div>';
?>
</div>
</div>Code: Alles auswählen
%include header
%include game/banner player=player, ingame_time=ingame_time, sid=sid, app_version=app_version
%include game/menu player=player, sid=sid
<script type="text/javascript">
<!--
function teleport() {
var target = $('#teleport-target').val();
$('#response').html('<img src="/static/load.gif" alt="Laden ..." />');
$.post('/game/pentagram/{{sid}}/', {
current: '{{player.character.place}}',
target: target
}, function(data) {
if (data == '') {
window.location.reload();
} else {
$('#response').html(data);
}
});
}
//-->
</script>
%from random import randrange
%filename = 'day' if ingame_time.daytime() else 'night'
<div class="left" id="wrapper" style="background-image: url('/static/{{player.character.place}}/{{filename}}{{randrange(5)+1}}.jpg');"><div id="scrollable">
<div class="left" id="overview">
<h1>— Pentagramm ({{player.character.place}}) —</h1>
<!-- Pentagramm -->
<fieldset class="radiused left" id="normal">
<p class="center"><span class="capital">E</span>s ist {{ingame_time.time()}}. {{player.name}} kann heute noch {{player.character.actions}} Aktionen durchführen.</p>
<p class="center">
<span class="capital">I</span>hr seht ein Pentagramm auf dem Steinboden. Als Ihr näher tretet, beginnen seine Linien zu leuchten. Mithilfe des Pentagrams könnt Ihr ohne Zeitverlust zu bereits besuchten Orten zurückkehren.</p>
<fieldset class="radiused center" style="width: 250px;">
<select id="teleport-target" tabindex="1">
%for p in player.character.pentagram_list:
%if p.region != player.character.place:
<option value="{{p.region}}">{{p.region}}</option>
%end if
%end for
</select>
</fieldset>
<br />
<div id="response"></div>
<br />
<a class="button" href="javascript:teleport()" tabindex="2">Teleportieren</a>
<a class="button" href="/game/overview/{{sid}}/" tabindex="3">Verlassen</a>
</fieldset>
</div>
</div></div>
%include footer
