Tutorial - Aufbau einer einfachen Webseite

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche

Note.png Dieser Artikel ist Teil der Tutorialreihe "Erstellen einer einfachen Webseite".

Teil 1: Planung und Erstellung der Webseite im Backend | Teil 2: Aufbau einer einfachen Webseite | Teil 3: Anpassen des dynamischen Menüs | Teil 4: Einbau einer Sitemap | Teil 5: Meta-Daten und dynamische Seitentitel | Teil 6: Die dynamische Suche | Teil 7: Der Home-View

Einführung

Die eigentliche Erstellung der Webseite, d.h. so wie diese im Browser erscheinen wird, geschieht mit Hilfe des Frontends. Damit bezeichnen wir alle PHP Dateien, die den Code für die Darstellung der Inhalte des Backends enthalten. Neben normalem HTML und CSS für das Layout der Webseite brauchen wir dazu auch noch einige Befehle, die DynPG uns bereitstellt. Mit diesen Methoden wollen wir uns in diesem und den folgenden Tutorials befassen.

Zuerst müssen wir uns Gedanken über das Layout der Seite machen. Natürlich erheben wir nicht den Anspruch, mit diesen Tutorials eine Einführung in HTML oder PHP zu geben, daher beschränken wir uns hier auf das Wesentliche. Wir wollen eine Webseite mit einem einfachen zweispaltigen Layout erstellen. In der ersten Spalte soll das dynamische Menü erscheinen und in der Zweiten der entsprechende ausgewählte Inhalt. Schematisch soll das etwa folgendermaßen aussehen:

Simple Website Layout.png

Beispiel-Code

Diesem Layout entsprechend haben wir bereits eine Vorlage erstellt, die Sie zum nachvollziehen der folgenden Schritte verwenden können:

Download: Einfache Webseite

Note.png Bemerkung: Beachten Sie bitte die Hinweise zur Konfiguration des Beispiel-Codes.

Sie können sich aber auch ohne diese Dateien selbst eine Webseite anhand der Beschreibungen erstellen.

Aufbau

Index.php

Grundsätzlich soll unsere Webseite aus einer index.php bestehen, die der Übersichtlichkeit halber den restlichen Code nur includiert. Der Code sieht folgendermaßen aus: 

<?php
    require('../dynpg/getcontent.php');
    $DynPG->SetParam_PathToRoot('../dynpg/');
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <title>Simple Website</title>
 
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="copyright" content="" />
    <meta name="author" content="" />
 
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <!-- header -->
    <div id="header">
        <?php include("inc/header.php"); ?>
    </div>
 
    <!-- navigation -->
    <div id="navigation">
        <?php include("inc/navigation.php"); ?>
    </div>
 
    <!-- content -->
    <div id="content">
        <?php include("inc/content.php"); ?>  
    </div>
 
    <!-- footer -->
    <div id="footer">
        <?php include("inc/footer.php"); ?>
    </div>
</body>
</html>

So weit, so gut. Mit ein wenig HTML und PHP Kenntnissen sollten hier keine Überraschungen auftreten, da wir hier mit Ausnahme der ersten Zeilen noch keinen DynPG spezifschen Code sehen. Diese ersten Zeilen geben lediglich den relativen Pfad zum Ordner an, in den DynPG installiert ist um dessen Funktionen überhaupt nutzen zu können.

In der Datei "style.css" können nun leicht die div-Elemente angepasst werden, um dem obigen Layout zu entsprechen.

Navigation.php

Jetzt wird es interessanter. In der navigation.php bringen wir den Code für das dynamische Menü unter. 

<?php
    // DynPG menu settings
    $DynPG->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
    $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
    $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
    $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
 
    $DynPG->SetupTemplate('uneditable');
    $DynPG->SetParam_A_Anytime(TRUE);                             // always show navigation
    $DynPG->SetParam_A_CategoryNavigation(FALSE);                 // no breadcrumb navigation
    $DynPG->SetParam_A_PrintNavigation(FALSE);                    // no print button
    $DynPG->SetParam_A_ArticleHeader(FALSE);                      // no article header
    $DynPG->SetParam_A_Article(/*<Artikel-ID der Navigation>*/);  // set article which contains the dynamic menu
 
    $DynPG->Write_Article();
    $DynPG->SetupTemplate('default');                             // always set template back to default if you changed it before
?>

In der drittletzten Zeile müssen wir hier noch etwas hinzufügen. Dabei handelt es sich um die ID des Artikels, die das dynamische Menü enthält. Diesen Artikel müssen wir nun ggf. noch anlegen. Erstellen Sie dazu im Backend einen Artikel, der nur den Platzhalter für das Menü enthält. Dieser Platzhalter wird mit einen Klick auf das entsprechende Symbol in der Werkzeugleiste hinzugefügt. Nähere Informationen und eine bebilderte Anleitung dazu finden Sie im Artikel über die Dynamische Navigation. Es empfiehlt sich diesen Menü-Artikel einer unsichtbaren Gruppe zuzuordnen (z.B. "Other" aus dem vorhergehenden Teil des Tutorials). Sollten Sie sich den Beispielcode heruntergeladen haben, dann finden Sie an dieser Stelle im Code bequemerweise eine Variable vor, die Sie in der Datei config.php nur noch zu setzen brauchen.

Content.php

Hier zeigen wir nun die Artikelliste oder den Artikel der ausgewählten Gruppe an. Da das dynamische Menü aber erst nach einem Klick auf einen Menüpunkt auch wirklich einen Artikel oder eine Artikelliste anzeigt, müssen wir hier ein wenig tricksen. Sofern eine Gruppe oder ein Artikel ausgewählt ist, zeigen wir den/die Artikel ganz normal mit der Artikelsicht oder Artikellistensicht an. Beim Betreten der Webseite ist aber zum Beispiel noch kein Menüpunkt ausgewählt und deshalb zeigen wir dann einfach den "Home" Artikel an, also z.B. einen Text zur Begrüßung oder mit Informationen über die Webseite. Der Code sieht folgendermapen aus: 

<?php
    if (isset($_GET['read_group']) || isset($_GET['read_article']))
        include("contents/article_views.php");
    else include("contents/home.php");
?>

Das ist zwar nicht sehr elegant, wird aber für's erste genügen, solange unsere Webseite noch nicht sonderlich groß ist.

In der article_views.php wird dann endlich unser Inhalt angezeigt. Dazu verwenden wir entsprechend der drei Sichten von DynPG die Artikelliste für die Anzeige des Inhalts von Gruppen und die Artikel-Detailsicht für die Anzeige der Artikeltexte. Eine Gruppenliste brauchen wir nicht, da diese bereits im Menü vorhanden ist. Der folgende Code implementiert die beiden Sichten: 

<?php
    $DynPG->SetParam_AA_Anytime(FALSE);               // show article list according to context
    $DynPG->SetParam_AA_Order( Array('DATE_FROM') );  // order by date
    $DynPG->SetParam_AA_Sort( Array('DESC') );        // order descending
    $DynPG->SetParam_AA_Maxview(10);                  // max. articles per page
    $DynPG->Write_AllArticles();
 
    $DynPG->SetParam_A_Anytime(FALSE);                // show article according to context
    $DynPG->Write_Article();
?>

Die home.php zeigt entsprechend den ausgewählten Home-Artikel an. Auch hier finden Sie im Beispiel-Code eine Variable vor, welche Sie in der config.php setzen können.

Ergebnis

Nun haben wir eine erste einfache aber voll funktionsfähige Webseite, welche z.B. folgendermaßen aussehen kann:

Tutorial Simple Website 1.png
Von „http://wiki-de.dynpg.org/wiki_de/index.php?title=Tutorial_-_Aufbau_einer_einfachen_Webseite&oldid=3424“