Das große WoltLab Community Framework 1

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Das große WoltLab Community Framework 1

    Das große WoltLab Community Framework
    Schritt für Schritt

    Sehr geehrte Mitglieder,
    in diesem mehrteiligem Tutorial möchte ich step-by-step das WCF 1 näherbringen...

    Ich kenne es aus eigener Erfahrung... man kommt einfach nicht weiter... die Dokumentation spuckt nur Fachwörter raus, nichts, womit man etwas anfangen kann... und nun möchte ich mein bisher angeeignetes Wissen mit euch teilen...

    Ich kann noch längst nicht alles und traue mir auch noch nicht alles zu im Bezug auf das WCF 1 ... aber ich nehme Herausforderungen gerne an...

    Mit meinem Wissen habe ich folgende PlugIns bereits erstellt: Siehe mein Profil.

  • Teil 1: Eine "Hello World" - Seite als PlugIn

    Teil 1: Hello World - Page

    Als erstes... ich kann mir denken, dass ihr nun die Augen verdrehen werdet, kann ich euch folgendes nur empfehlen, wenn ihr euer PlugIn später anbieten wollt oder überhaupt ein "WCF-konformes"-PlugIn schreiben wollt: woltlab.com/forum/individuelle…164780-die-wcf-codebibel/

    Das möchten wir heute letztendlich erreichen:



    Um eine solch einfache statische Seite zu erstellen bedarf es 2 Dateien:
    • HelloWorldPage.class.php
    • helloWorld.tpl
    HelloWorldPage.class.php:
    Die "HelloWorldPage.class.php" hat sich im Ordner wcf/lib/page/ zu befinden.
    Letztendlich rufen wir die Seite dann wie folgt auf: doma.in/index.php?page=HelloWorld
    Im WCF gibt es 3 verschiedene, ich nenne es nun mal, "Page-Request"-Arten:
    • action
    • page
    • form
    Wie funktioniert ein Seitenaufruf?
    Das WCF holt sich also bei einem Seitenaufruf den $_GET - Parameter "page", "form" oder "action" und holt sich dann die entsprechende PHP-Datei, welche wiederrum alle nötigen Daten (falls welche benötigt werden) an das in der PHP-Datei definierte Template schicken und letztendlich wird das kompilierte Template dann ausgegeben/angezeigt.
    Eine "page", also eine Seite, deren Inhalt entweder statisch oder von Daten aus der Datenbank (o.a. Datenquellen) aufgebaut wird und kein Formular beinhaltet ist also der "Page-Request"-Art "page" anzuordnen. Bei Formularen auf der Seite handelt es sich um eine "form". Bei "Aktionen" um eine "action". Darauf komme ich später nochmal zu sprechen.
    ===>

    Wir haben nun also eine leere Datei namens "HelloWorldPage.class.php" im Ordner wcf/lib/page/.
    Diese PHP-Datei gilt es nun mit lediglich 7 Zeilen zu füllen.
    Als sagen wir, dass das ganze ein PHP-Dokument ist, also wie folgt:

    PHP-Quellcode

    1. <?php// späterer Inhalt
    2. ?>

    Nun benötigen wir eine Klasse, von welcher wir erben können... diese nennt sich in unserem Fall "AbstractPage" und ist unter dem WCF-Verzeichnis "lib/page/AbstractPage.class.php" zu finden. Wir nutzen also die Konstante "WCF_DIR" und "require_once'n" die Datei in Zeile 2:

    PHP-Quellcode

    1. <?php
    2. require_once(WCF_DIR.'lib/page/AbstractPage.class.php');
    3. ?>

    Anschließend erstellen wir die Klasse zur "HelloWorldPage":

    PHP-Quellcode

    1. <?php
    2. require_once(WCF_DIR.'lib/page/AbstractPage.class.php');
    4. class HelloWorldPage extends AbstractPage {
    5. }
    6. ?>

    Wie man sieht, erbt die "HelloWorldPage" von der "AbstractPage".
    Anschließend überschreiben wir die in der "AbstractPage" vorhandene "public" - Variable "templateName":

    PHP-Quellcode

    1. <?php
    2. require_once(WCF_DIR.'lib/page/AbstractPage.class.php');
    4. class HelloWorldPage extends AbstractPage {
    5. public $templateName = 'helloWorld';
    6. }
    7. ?>

    Und fertig sind wir mit unserem PHP-Teil...
    Wir haben nun also eine Klasse, welche aufgerufen wird, wenn es von der URL verlangt wird:
    ?page=HelloWorld
    und sich dann das Template "helloWorld" nimmt und ausgibt, wenn man so will.
    Das Template sieht ansich wie folgt aus:

    HTML-Quellcode

    1. {include file='documentHeader'}
    2. <head>
    3. <title>Hello World - {lang}{PAGE_TITLE}{/lang}</title>
    4. {include file='headInclude' sandbox=false}
    5. </head>
    6. <body{if $templateName|isset} id="tpl{$templateName|ucfirst}"{/if}>
    7. {include file='header' sandbox=false}
    8. <div id="main">
    10. </div>
    11. {include file='footer' sandbox=false}
    12. </body>
    13. </html>
    Alles anzeigen

    Das ist quasi das "Grundgerüst" welches ich auch jedes mal beim Erstellen eines Templates nutze.
    Darauf bauen wir nun auf:
    helloWorld.tpl:
    Das Template hat sich im Verzeichnis wcf/templates/ zu befinden und als Dateiendung ".tpl" zu tragen.

    Als erstes möchten wir die Breadcrumbs einfügen:

    Das sind Breadcrumbs.

    Das ganze machen wir wie folgt:

    HTML-Quellcode

    1. <ul class="breadCrumbs">
    2. <li><a href="index.php{@SID_ARG_1ST}"><img src="{icon}indexS.png{/icon}" alt="" /> <span>{lang}{PAGE_TITLE}{/lang}</span></a> &raquo;</li>
    3. <li><a href="index.php?page={@SID_ARG_2ND}"><img src="{icon}indexS.png{/icon}" alt="" /> <span>Hello World</span></a> &raquo;</li>
    4. </ul>


    Das erste Verzeichnis ist die Startseite (?page=Index), das zweite ist direkt die HelloWorld (?page=HelloWorld).
    Die in geschweiften Klammern und in Großbuchstaben stehenden Konstanten können immer in Templates aber auch in PHP-Dateien verwendet werden. Hinter "PAGE_TITLE" steckt z.B. das hier:


    Wie man später dann noch Variablen übergibt von der Klasse an das Template und diese dann anwendet ist eine andere Baustelle...

    Hinter {icon}indexS.png{/icon} wird z.B. folgendes:

    Quellcode

    1. icon/vCollection/indexS.png

    Dahinter steckt der aktive Iconpfad... je nachdem ob man nun die vCollection, MCollection, xCollection oder andere Icons nutzt... da kommt dann quasi der Pfad raus, den man im jeweiligen Stil angegeben hat...
    Ansonsten sieht man da schlichtes HTML, was ich nicht weiter erläutern mag, da hat Dennis nämlich ein wunderbares Tutorial zu gemacht.

    Weiter geht es zur "mainHeadline", das ist folgendes:
    Dahinter steckt nun auch wieder stinknormales HTML:

    HTML-Quellcode

    1. <div class="mainHeadline">
    2. <img src="{icon}indexL.png{/icon}" alt="" />
    3. <div class="headlineContainer">
    4. <h2>Hello World</h2>
    5. <p>Hello World: Beschreibung</p>
    6. </div>
    7. </div>

    Sollte sich soweit auch von selbst erklären...

    Nun fügen wir eine Zeile ein:

    HTML-Quellcode

    1. {if $userMessages|isset}{@$userMessages}{/if}

    Da erkennen wir nun erstes "PHP" drin, sagen wir mal so doof...
    Das, was ihr dort seht, ist eine Abfrage ob die Variable "userMessages gesetzt und damit einen Wert enthält. Ist dies der Fall wird der Inhalt ausgegeben.
    Das @ besagt, dass HTML-Tags berücksichtigt bzw. dargestellt werden.

    Fügen wir also die Zeile ein, kommt folgendes:

    Lassen wir sie weg, sind die Benachrichtigungen verborgen:


    Lassen wir nun das @ weg, sprich wir machen folgendes:

    HTML-Quellcode

    1. {if $userMessages|isset}{$userMessages}{/if}

    kommt folgendes bei raus:


    Wie ihr seht: Es wird kein HTML mehr "unterstützt". So ein @ macht also viel aus... ;)

    Kommen wir letztendlich zum letzten Teil den wir unter dem "main" einfügen:

    HTML-Quellcode

    1. <div class="border">
    2. <div class="container-1">
    3. Hello World!
    4. </div>
    5. </div>


    Dies gibt nun noch den Text dazu... ;)
    Da könnt ihr euch nun gerne erstmal mit austoben... ;)

    Letztendlich (sollte) euer Template dann wie folgt aussehen:

    HTML-Quellcode

    1. {include file='documentHeader'}
    2. <head>
    3. <title>Hello World - {lang}{PAGE_TITLE}{/lang}</title>
    4. {include file='headInclude' sandbox=false}
    5. </head>
    6. <body{if $templateName|isset} id="tpl{$templateName|ucfirst}"{/if}>
    7. {include file='header' sandbox=false}
    8. <div id="main">
    9. <ul class="breadCrumbs">
    10. <li><a href="index.php{@SID_ARG_1ST}"><img src="{icon}indexS.png{/icon}" alt="" /> <span>{lang}{PAGE_TITLE}{/lang}</span></a> &raquo;</li>
    11. <li><a href="index.php?page={@SID_ARG_2ND}"><img src="{icon}indexS.png{/icon}" alt="" /> <span>Hello World</span></a> &raquo;</li>
    12. </ul>
    14. <div class="mainHeadline">
    15. <img src="{icon}indexL.png{/icon}" alt="" />
    16. <div class="headlineContainer">
    17. <h2>Hello World</h2>
    18. <p>Hello World: Beschreibung</p>
    19. </div>
    20. </div>
    21. {if $userMessages|isset}{@$userMessages}{/if}
    22. <div class="border">
    23. <div class="container-1" style="padding-left: 5px; padding-right: 5px;">
    24. Hello World!
    25. </div>
    26. </div>
    27. </div>
    28. {include file='footer' sandbox=false}
    29. </body>
    30. </html>
    Alles anzeigen

    Sprachvariablen kommen als nächtes... ;)
    Das war unsere "HelloWorld"-Seite! :)
    Ich hoffe, das Tutorial war ein wenig helfend! :)