Trennung von Code und Layout - oder geht's einfacher?

Fragen zum Thema HTML, JavaScript, PHP
Antworten
Glocke
Beiträge: 332
Registriert: Fr Okt 26, 2012 8:39 am

Trennung von Code und Layout - oder geht's einfacher?

Beitrag von Glocke » 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 :D 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 :cry:

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>
Von meinem alten Browsergame-Projekt (Python)

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>&mdash; Pentagramm ({{player.character.place}}) &mdash;</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
LG Glocke

GilbertDur
Beiträge: 105
Registriert: Fr Mär 01, 2013 10:31 am

Re: Trennung von Code und Layout - oder geht's einfacher?

Beitrag von GilbertDur » Do Mär 28, 2013 4:10 pm

Hmm, was hast du gegen Smarty? Ich kenne mich mit Smarty zwar nicht übermäßig aus, aber es sieht besser aus, als der "normale" Ansatz. Ansonsten gibt es Frameworks, die dabei helfen, Code von Layout zu trennen (Zend, CakePHP). Allerdings ist das in deinem Fall wohl wie mit Kanonen auf Spatzen zu schießen :D
Grundsätzlich ist als Programmieransatz zur Trennung von UI-Sachen auch immer MVC (Model View Controller) zu empfehlen, so wie es auch in Ruby gemacht wird. In Verbindung damit könntest du dir das Template-View-Pattern ansehen:

http://css.dzone.com/books/practical-ph ... patterns-9
http://www.rvdavid.net/template-view-an ... ns-in-php/

Ich denke XML und XSLT helfen dir bei deinem Problem nicht so sehr weiter. Damit kann man zwar Daten und Layout, aber nicht unbedingt Logik und Layout trennen.

PS: Warum bist du eigentlich nicht bei Python geblieben? Ist doch viel schöner als PHP :mrgreen:

Glocke
Beiträge: 332
Registriert: Fr Okt 26, 2012 8:39 am

Re: Trennung von Code und Layout - oder geht's einfacher?

Beitrag von Glocke » Fr Mär 29, 2013 1:54 pm

GilbertDur hat geschrieben:Hmm, was hast du gegen Smarty? Ich kenne mich mit Smarty zwar nicht übermäßig aus, aber es sieht besser aus, als der "normale" Ansatz. Ansonsten gibt es Frameworks, die dabei helfen, Code von Layout zu trennen (Zend, CakePHP). Allerdings ist das in deinem Fall wohl wie mit Kanonen auf Spatzen zu schießen :D
Ich muss mir Smarty nochmal genau angucken - kp warum es mich noch nicht überzeugt hatte :D
GilbertDur hat geschrieben:Grundsätzlich ist als Programmieransatz zur Trennung von UI-Sachen auch immer MVC (Model View Controller) zu empfehlen, so wie es auch in Ruby gemacht wird. In Verbindung damit könntest du dir das Template-View-Pattern ansehen:

http://css.dzone.com/books/practical-ph ... patterns-9
http://www.rvdavid.net/template-view-an ... ns-in-php/
Naja prinzipiell habe ich schon eine Trennung in der Art des MVC Pattern: Für meine Datenbankkommunikation verwende ich eigene Klasse, die auf mysqli basieren und effektiv Methoden haben, die select, insert, update und delete umsetzen - nur relativ sicher (relativ ^^) Meine Programmlogik ist von den Templates komplett getrennt - hatte ich ja oben schon beschrieben (controller.php). Ich schau mir die Links mal an, danke!
GilbertDur hat geschrieben:Warum bist du eigentlich nicht bei Python geblieben? Ist doch viel schöner als PHP :mrgreen:
Finde mal einen Python-Freehoster der nicht nur CGI unterstützt ... ^^ Eigentlich hab ich zwei Lieblingssprachen: C++ und Python. Die Frage ist daher absolut passend: Warum bin ich eigentlich nicht bei Python geblieben? :D

LG Glocke

Benutzeravatar
darksider3
Beiträge: 347
Registriert: Fr Sep 14, 2012 6:26 pm
Wohnort: /dev/sda1
Kontaktdaten:

Re: Trennung von Code und Layout - oder geht's einfacher?

Beitrag von darksider3 » Do Apr 04, 2013 9:53 pm

Weil Du es liebst, schnell große Applikationen auf die Beine stellen zu können? :mrgreen:
effizienz ist, wenn ich ein loch bohre und hinterher mein nachbar auch ein bild aufhängen kann... ^^
Meine Homepage und der Microblog von mir :)
Live Life dont let Life Live You!
Am meisten Aktiv in Webentwicklung und PHP im Wiki

Antworten