Willkommen zum letzten Teil der aktuellen Serie „Das eigene kleine Portfolio mit dem Slim Framework, RainTPL & Co.“ – Zum Abschluss werde ich kurz zeigen, wie sich mit Hilfe der POST-Routen des Slim Frameworks und jQuery einfache Ajax Abfragen erstellen lassen.

Zu diesem Zweck erstellen wir eine neue Route:

$app->post('/project/:project', function ($project) use ($app) {
    // ":project" ist ein Platzhalter in der URL, dessen Wert als Parameter übergeben wird.
})->name('gallery');

Hier benutzen wir eine neue Methode: name(). Diese Methode wird benutzt um Routen einen Namen zu geben, damit wir diese später mit Hilfe vom sogenannten „reverse Routing“ im Frontend nutzen können.

Reverse Routing?

Dieses Feature bieten auch andere Frameworks wie Beispielsweise Kohana – Es ermöglicht uns, URLs mit Hilfe definierter Routen automatisch zu erstellen. In der Praxis sieht das ganze etwa so aus:

// Zuerst definieren wir eine Route.
$app->get('/project/:project', function ($project) use ($app) {
    // ...
})->name('gallery');

// Mit der Methode "urlFor" können wir uns die URL einer beliebige Route erstellen lassen.
echo $app->urlFor('gallery'); // "/project/:project"
echo $app->urlFor('gallery', array('project' => 'demo-project')); // "/project/demo-project"

Sinn und Zweck des ganzen ist folgender: Nehmen wir einmal an, wir möchten die Route irgendwann mal ändern… Ohne reverse Routing müssten wir alle Stellen, an denen wir die URL verwenden, im Quelltext suchen und händisch anpassen – Verwenden wir allerdings das reverse Routing müssen wir uns darum keine Gedanken machen! Super, oder?

Weiter im Text…

Unsere POST-Route haben wir zwar definiert, doch damit wir sie im Frontend nutzen können, müssen wir sie noch als Variable an das Template übergeben:

$app->get('/', function () use ($app) {
    $structure = Structure::factory($app->view())
        ->add('text', array( /*...*/ )
        ->add('bars', array( /*...*/ )
        ->add('gallery', array( /*...*/ );
    
    // ...
    
    $app->render('_base', array('content' => $structure, 'ajax_url' => $app->urlFor('gallery')));
});

Anpassungen am Template

Bevor wir das Javascript für den Ajax-Request runtertippen können, müssen wir erst dem „Gallery“-Template eine Sache hinzufügen… Wir benötigen ein data-Attribut um per Javascript auf die „Gallery Bild-Nr.“ zuzugreifen – Diese benutzen wir als Parameter für :project.

<!-- "gallery" Template -->
<section class="gallery">
    {if="$headline"}<h2>{$headline}</h2>{/if}
    {loop="$paragraphs"}<p>{$value}</p>{/loop}
    {loop="$images"}
    <div class="threecol" style="background:url('tpl/projects/thumb_{$value.image}.jpg');"><div>
        <img src="images/zoom.png" alt="zoom" data-image="{$value.image}" />{$value.description}
    </div></div>
    {/loop}

    <br class="cb" />
</section>

Der Bild-Name steht nun also im data-image Attribut unseres Lupen-Icons - Hier können wir sowohl Zahlen als auch Strings einsetzen. Diese sollten nur idealerweise URL-Konform sein (keine Leerzeichen, Umlaute, Sonderzeichen, ...):

Klicken wir auf das Icon, soll der Ajax-Request abgeschickt werden um mehr Informationen zum Bild zu laden... Damit kommen wir zum Javascript und der Nutzung unserer reverse Routing URL!

// Weiter unten im "_base" Template ...

$('img.zoom').on('click', function () {
    $.ajax({
        type: "POST",
        url: '{$ajax_url}'.replace(':project', $(this).data('image')),
        done: function (html) {
            // Response verarbeiten.
        }
    });
});

Und so schnell haben wir einen funktionierenden Ajax Aufruf mit Hilfe unserer POST-Route und jQuery. Wie wir mit dem Ergebnis des Requests umgehen möchte ich jedem selbst überlassen...

Offene Punkte

• Ursprünglich hatte ich geplant die Funktion für Übersetzungen auszuformulieren, doch diese ist durch die Structure Klasse etwas überflüssig geworden - Immerhin können wir nun direkt im Controller die Texte (übersetzt) an das Template übergeben... Das ist sehr viel einfacher und schneller als das ganze separat im Template zu erledigen (Dadurch könnte ich das Projekt theoretisch auf RainTPL v2 umschreiben).
• Eine Demo-Installation wäre vielleicht ganz nett - Einerseits zum testen des Responsive Verhalten, andererseits um sich das CSS mal genauer anzusehen. Dies werdet ihr nachholen können wenn ich...
• ... das Projekt auf GitHub veröffentliche. Ich hatte in den letzen Wochen angekündigt dieses Projekt parallel auf github zu veröffentlichen, doch derzeit habe ich etwas Probleme mit meinem Client (Ich probiere derzeit "github:windows" aus), weshalb sich das ganze verzögern wird.

Fazit

Was haben wir gelernt? Durch das "späte" einbauen der Structure Klasse konnte ich mir zwar etwas arbeit ersparen und die einzelnen Teile der Seite dynamisieren, doch ich bin unnötigerweise auf RainTPL v3 umgestiegen und musste dadurch etwas mehr Zeit in die Templates stecken - RainTPL v3 verfügt (noch) nicht über eine eigene ausführliche Dokumentation.
Auch die Implementation von LessCSS war nicht nötig, da kaum von den Features Gebrauch gemacht wurde.

Kurz und Knapp

Ich habe es schon oft geschrieben, doch halte mich selbst nicht immer dran: Lieber etwas mehr Zeit mit der sauberen Planung verbringen als während der Entwicklung neue Entscheidungen treffen und sich dadurch ggf. selbst Steine in den Weg legen!

Mit diesen Worten möchte ich mich für diese Woche von euch verabschieden und wünsche euch viel Erfolg mit den eigenen Projekten!