Implementation eines kompletten Hauptmenüs: Unterschied zwischen den Versionen

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche
 
(→‎Erstellen des Navigationsmenüs: Infobox-Templates eingefügt)
 
(26 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
−
== Einleitung ==
+
[[Kategorie:Integration in eine Webseite]]
−
In den vorangegangenen Kapiteln haben Sie gelernt wie man DynPG in seine Seite integriert und es entsprechend anpasst. Ausgerüstet mit diesem Wissen wollen wir uns nun an eine wichtige Aufgabe machen: Die Erstellung eines '''''Seitenhauptmenüs'''''. Fangen wir also an. Als erstes benötigen wir eine leere '''''index.php''''', d.h. nicht ganz leer, sie enthält natürlich das Html-Grundgerüst. Außerdem erstellen wir uns eine CSS-Datei namens '''''style.css''''' mit der unser Menü optisch auf Vordermann gebracht werden soll. Das Grundgerüst könnte wie folgt aussehen:  
+
{{Dynamische Navigation}}
−
<code>[php,N]
+
 
 +
In diesem Artikel werden wir eine Webseite mit einem ''dynamischen Navigationsmenü'' und einer Inhaltsanzeige erstellen.
 +
 
 +
== Das Grundgerüst ==
 +
Als erstes benötigen wir eine neue Datei <tt>index.php</tt> mit einem HTML-Grundgerüst. Außerdem erstellen wir eine CSS-Datei namens <tt>style.css</tt> mit der wir das Aussehen des Menüs anpassen werden. Das Grundgerüst, in dem wir zunächst erst einmal nur [[DynPG in eine Webseite einbinden|DynPG einbinden]], könnte wie folgt aussehen:  
 +
<code>[html,N]
 
<?php
 
<?php
−
    require 'cms/getcontent.php'; //DynPG-Funktionalität einbinden
+
  require '../dynpg/getcontent.php';                   //DynPG-Funktionalität einbinden
−
$DynPG->SetParam_PathToRoot('cms/'); //DynPG-Pfad setzen
+
  $GLOBALS["DynPG"]->SetParam_PathToRoot('../dynpg/'); //DynPG-Pfad setzen
 
?>
 
?>
−
 
+
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
−
<head>
+
<head>
−
<title>Hauptmenue-Tutorial</title>
+
  <title>Seite mit dynamischen Navigationsmenü</title>
 +
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  
−
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
+
  <link rel="stylesheet" type="text/css" href="style.css" />  <!--eigene style.css einbinden-->
 +
</head>
 +
 
 +
<body>
 +
  <h1>Seite mit dynamischen Navigationsmenü</h1>
  
−
<?php $DynPG->Write_CSS_JS_Header(); ?>       <!--Standard-Css von DynPG einbinden-->
+
  <div id="navigation">
 +
    <!-- hier kommt die dynamische Navigation hin -->
 +
  </div>
 +
   
 +
  <div id="inhalt">
 +
    <!-- hier kommt die Inhaltsanzeige hin -->
 +
  </div>
 +
</body>
 +
</html>
 +
</code>
  
−
<link rel="stylesheet" type="text/css" href="style.css" /> <!--eigene style.css einbinden-->
+
In den Spalten <tt>navigation</tt> und <tt>inhalt</tt> sollen das Hauptmenü bzw. die eigentlichen Artikel, Artikellisten und Gruppenlisten angezeigt werden.
−
</head>
+
  
 +
== Erstellen des Navigationsmenüs ==
 +
Bevor wir nun den eigentlichen Code schreiben, müssen wir in das DynPG Backend und einen Artikel erstellen, der die dynamische Navigation enthält. Die Schritte hierzu können Sie ggf. im Artikel zum [[DynPG Module einbinden|Einbinden von DynPG Modulen]] nachlesen. Navigieren Sie im Backend zu diesem Artikel und merken Sie sich die ''ID''. Diese werden wir im folgenden Snippet brauchen. Gehen wir also wieder in unsere <tt>index.php</tt> und fügen im div <tt>navigation</tt> folgendes ein:
  
−
<body>
+
<code>[php,N]
−
<h1>Hauptmenue-Tutorial</h1>
+
<div id="navigation">
−
 
+
  <?php
−
<table  border="0">
+
  $GLOBALS["DynPG"]->SetParam_A_Anytime(true);            // dynamische Navigation immer anzeigen
−
<tr valign="top">
+
  $GLOBALS["DynPG"]->SetParam_A_Article(1);                // Artikelnummer der dynamischen Navigation
−
<th align="left" style="width:230px" id="hauptmenue">
+
  $GLOBALS["DynPG"]->SetParam_A_ArticleHeader(false);      // Artikelkopf (Titel, Lead-Bild und Lead-Text) ausblenden
−
<div style="border: 3px black solid">
+
  $GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(false); // Kategorienavigation (Gruppe > Untergruppe > Artikel) ausblenden
−
<?php
+
  $GLOBALS["DynPG"]->SetParam_A_PrintNavigation(false);    // Drucken-Link ausblenden
−
//hier soll das Hauptmenü hin
+
  $GLOBALS["DynPG"]->Write_Article();                      // dynamische Navigation ausgeben
−
?>
+
  ?>
−
</div>
+
</div>
−
</th>
+
−
 
+
−
<th id="anzeige">
+
−
<div style="border: 3px black solid">
+
−
<?php
+
−
//hier sollen die anzuzeigenden Artikel und Gruppen hin
+
−
?>
+
−
</div>
+
−
</th>
+
−
</tr>
+
−
</table>
+
−
</body>
+
−
 
+
−
</html>
+
 
</code>
 
</code>
  
−
In den Spalten '''''hauptmenue''''' und '''''anzeige''''' sollen das Hauptmenü bzw. die eigentlichen Artikel, Artikellisten und Gruppenlisten angezeigt werden. Bevor wir nun den eigentlichen Code schreiben, müssen wir in das DynPG Backend und einen Artikel erstellen, nämlich den Artikel der das Hauptmenü tragen soll. Ja richtig, das Hauptmenü ist nämlich auch ein Artikel, nur eben ein etwas spezieller! Loggen Sie sich mit ihrem Account in das DynPG-Backend ein und gehen Sie in die Sektion '''''Artikelbezogene Texte'''''. Nun haben Sie schon einen neuen Artikeltext vor sich und müssen nur noch auf das '''''Dynamisches Menü einfügen''''' - Symbol über dem Textfeld klicken und just in diesem Moment müsste eine blaue Grafik mit der Bezeichnung "dynamisches Menü" im Textfeld erscheinen. Nun, das war es auch schon fast, drücken Sie nun den Knopf '''''Erstellen'''''.  
+
{{Caution
 +
|Sie müssen in Zeile 2 den Parameterwert durch die ID des Artikels ersetzen, der die dynamische Navigation enthält.}}
  
−
[[Image:create_article.jpg|thumb|Abbildung 2.3. Artikel für das Hauptmenü erstellen]]
+
In der ersten Zeile weisen wir DynPG an, dass der folgenden Artikel immer angezeigt werden soll, da es sich sich um das Navigationsmenü der Webseite handelt. In der zweiten Zeile muss <tt>ID</tt> durch die ID des Artikels ersetzt werden, der die dynamische Navigation enthält. Die folgenden Zeilen verändern die Ansicht so, dass wirklich nur die Navigation angezeigt wird und sonst nichts.
  
−
Der Hauptmenü-Artikel müsste nun darunter in der Liste '''''"Texte / Text-Gruppen"''''' angezeigt werden. Schauen Sie wo er sich dort befindet und merken Sie sich die '''''ID'''''. Mit der werden wir den Artikel nämlich jetzt anzeigen lassen. Gehen wir also wieder in unsere "index.php" und fügen in der '''''Spalte hauptmenue''''' folgendes ein:  
+
== Erstellen der Inhaltsanzeige ==
 +
Nun müssen wir uns noch um die Darstellung der Listen und Artikel kümmern. Dazu fügen wir in der Spalte <tt>inhalt</tt> folgendes ein:  
  
−
<code>[php,Y]
+
<code>[php,N]
−
<?php
+
<div id="inhalt">
−
$DynPG->SetParam_A_Anytime(true); //nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt!
+
  <?php
−
$DynPG->SetParam_A_Article(15);
+
  $GLOBALS["DynPG"]->Write_AllGroups();         // Gruppenlisten-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext)
−
$DynPG->Write_Article();
+
  $GLOBALS["DynPG"]->SetParam_AA_Maxview(10);  // Maximal zehn Einträge in Artikellisten anzeigen
−
?>
+
  $GLOBALS["DynPG"]->Write_AllArticles();      // Artikelliste-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext)
 +
  $GLOBALS["DynPG"]->SetParam_A_Anytime(false); // Parameter wieder auf false setzen (wurde bei der Navigation auf true gesetzt)
 +
  $GLOBALS["DynPG"]->Write_Article();           // Artikel-Detailansicht ausgeben
 +
  ?>
 +
</div>
 
</code>
 
</code>
  
−
Was genau passiert da? Nun in der 1. Zeile sagen wir DynPG, dass es den folgenden Artikel immer anzeigen soll, kontextunabhängig also. Das macht auch Sinn, denn es handelt sich hier schließlich um unser Hauptmenü und das ist sozusagen omni-präsent. Bei mir wurde dem Menü-Artikel die ID 15 zugewiesen, deshalb verwende ich beim Setzen des Artikels in Zeile 2 auch diese Nummer. Mit Zeile 3 wird dann das Menü angezeigt.  
+
Hier werden alle [[Die drei Ansichten von DynPG|drei Ansichten]] erzeugt und einige Parameter gesetzt. Zeile 2 gibt z.B. an wie lang eine Artikelliste sein darf, bevor sie der Übersicht halber auf mehreren Seiten dargestellt werden (wobei automatisch eine Seitennavigation im unteren Bereich der Webseite angezeigt wird).
  
−
Nun müssen wir uns noch um die anzuzeigenden Artikel kümmern die man über das Menü erreichen kann, dazu fügen wir in der '''''Spalte anzeige''''' folgendes ein:
+
Beachten Sie, dass wir die Parameter <tt>$GLOBALS["DynPG"]->SetParam_AG_Anytime(false)</tt> und <tt>$GLOBALS["DynPG"]->SetParam_AA_Anytime(false)</tt> nicht setzen, da diese bereits standardmäßig den Wert <tt>false</tt> haben. Dadurch zeigen die Gruppen- und Artikelliste den Inhalt abhängig vom [[Der Navigationskontext|Navigationskontext]] an. Wir müssen hier aber  die Funktion <tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(false)</tt> aufrufen, da wir diesen Parameter für die Artikel-Detailansicht zuvor beim Einbinden der Navigation auf <tt>true</tt> gesetzt haben. Dadurch werden nun alle drei Sichten abhängig vom Navigationskontext angezeigt.
  
−
<code>[php,Y]
+
== Anpassen des Layouts mittels CSS ==
−
<?php
+
Im Syle Sheet werden wir nun folgende Angaben machen:  
−
$DynPG->SetParam_A_Anytime(false); //nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt!
+
−
$DynPG->SetParam_AA_Maxview(10);  //Maximal zehn Einträge in Artikellisten
+
−
$DynPG->Write_AllArticles();
+
−
$DynPG->Write_Article();
+
−
?>
+
−
</code>
+
−
 
+
−
Zeile 1 funktioniert analog zu obigem Code. Die Zeilen 3 und 4 bewirken, dass sowohl Artikellisten (wenn im Menü auf eine Gruppe geklickt wird) als auch einzelne Artikel (wenn auf einen Artikel geklickt wird) angezeigt werden. Zeile 2 gibt an wie lang die Artikellisten sein dürfen, bevor sie der Übersicht halber auf mehreren Seiten (mit Navigation) dargestellt werden.
+
−
 
+
−
Für das Beispiel werden wir die style.css wie folgt füllen:  
+
  
 
<code>[css,N]
 
<code>[css,N]
−
/*alle Links schwarz*/
+
/* Navigation */
−
a{color: black;}
+
div#navigation{
 +
  /* Angaben für ein zweispaltiges Layout */
 +
  float: left;
 +
  width:150pt;
 +
  margin-left:5pt;
 +
  margin-right:5pt;
  
−
#hauptmenu p{
+
  border:1px solid black;
−
text-align: left;
+
 
}
 
}
  
−
/*Navigation, Print-Button und Artikelheader unsichtbar machen*/
+
/* Inhalt */
−
#dynpg_A_breadcrumb{display: none;}
+
div#inhalt {
−
+
  /* Angaben für ein zweispaltiges Layout */
−
#dynpg_AA_breadcrumb_navi{display: none;}
+
  margin-left:165pt;
−
#dynpg_AA_breadcrumb_pages{display: none;}
+
  margin-right:5pt;
 +
}
  
−
#dynpg_A_btnprint{display: none;}
+
/* In allen divs innerhalb des Navigationsmenüs wird der Inhalt um 10 pt
 +
  nach rechts verschoben. Durch die Verschachtelung von divs innerhalb des
 +
  Menüs erhalten wir so eine Einrückung gemäß der Hierarchie-Ebene. */
 +
div#course_categories_menu  div  {
 +
  padding-left:10pt;
 +
}
  
−
#dynpg_A_header{display: none;}
+
/* Alle Links innerhalb des Navigationsmenüs */
 +
div#course_categories_menu  a {
 +
  text-decoration:none;
 +
}
 
</code>
 
</code>
  
−
Hier werden die Artikel-Navigation (dynpg_A_breadcrumb), der Artikel- Printbutton (dynpg_A_btnprint) sowie der Artikelkopf (dynpg_A_header) ausgeblendet.
+
== Ausgabe ==
−
 
+
Nun kann die Seite bereits angezeigt werden und sieht dann folgendermaßen aus. Natürlich variiert diese Ansicht je nachdem welche Gruppen und Artikel Sie im Backend erstellt haben.  
−
Nun kann das ganze sogar schon ausgeführt werden und sieht bei mir folgendermaßen aus:
+
−
 
+
−
[[Image:first_look.jpg|200px|Abbildung 2.4. ein erstes funktionierendes Hauptmenü]]
+
−
 
+
−
Freilich variiert diese Ansicht, denn es werden natürlich immer die Gruppen und Artikel angezeigt die man im Backend definiert hat. Hier habe ich größtenteils alles so gelassen wie man es nach der Installation von DynPG mit den Beispieldaten vorfindet. Nun kann man daran gehen eigene Artikel/Gruppen zu erzeugen, die dann natürlich auch im Menü auftauchen werden.  
+
  
−
Das Menü, so wie es jetzt erscheint, ist rein optisch noch etwas rudimentär, daher werden wir nun daran gehen das ganze ein bisschen aufzupeppen indem wir Grafiken für die einzelnen Menüpunkte einfügen.
+
[[Image:Implementation eines kompletten Hauptmenüs.png]]

Aktuelle Version vom 26. September 2011, 16:24 Uhr

Note.png Dieser Artikel ist Teil einer Reihe von Artikeln über die dynamische Navigation von DynPG

Dynamisches Navigationsmenü und Inhaltsanzeige | Der Navigationskontext | Implementation eines kompletten Hauptmenüs | Anpassen des Navigationsmenüs | Moduldokumentation: Dynamische Navigation | Einführungsartikel ...

zurück zu Kategorie:Integration in eine Webseite

In diesem Artikel werden wir eine Webseite mit einem dynamischen Navigationsmenü und einer Inhaltsanzeige erstellen.

Das Grundgerüst

Als erstes benötigen wir eine neue Datei index.php mit einem HTML-Grundgerüst. Außerdem erstellen wir eine CSS-Datei namens style.css mit der wir das Aussehen des Menüs anpassen werden. Das Grundgerüst, in dem wir zunächst erst einmal nur DynPG einbinden, könnte wie folgt aussehen: 

<?php
  require '../dynpg/getcontent.php';                   //DynPG-Funktionalität einbinden
  $GLOBALS["DynPG"]->SetParam_PathToRoot('../dynpg/'); //DynPG-Pfad setzen
?>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
  <title>Seite mit dynamischen Navigationsmenü</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 
  <link rel="stylesheet" type="text/css" href="style.css" />  <!--eigene style.css einbinden-->
</head>
 
<body>
  <h1>Seite mit dynamischen Navigationsmenü</h1>
 
  <div id="navigation">
    <!-- hier kommt die dynamische Navigation hin -->
  </div>
 
  <div id="inhalt">
    <!-- hier kommt die Inhaltsanzeige hin -->
  </div>
</body>
</html>

In den Spalten navigation und inhalt sollen das Hauptmenü bzw. die eigentlichen Artikel, Artikellisten und Gruppenlisten angezeigt werden.

Erstellen des Navigationsmenüs

Bevor wir nun den eigentlichen Code schreiben, müssen wir in das DynPG Backend und einen Artikel erstellen, der die dynamische Navigation enthält. Die Schritte hierzu können Sie ggf. im Artikel zum Einbinden von DynPG Modulen nachlesen. Navigieren Sie im Backend zu diesem Artikel und merken Sie sich die ID. Diese werden wir im folgenden Snippet brauchen. Gehen wir also wieder in unsere index.php und fügen im div navigation folgendes ein: 

<div id="navigation">
  <?php
  $GLOBALS["DynPG"]->SetParam_A_Anytime(true);             // dynamische Navigation immer anzeigen
  $GLOBALS["DynPG"]->SetParam_A_Article(1);                // Artikelnummer der dynamischen Navigation
  $GLOBALS["DynPG"]->SetParam_A_ArticleHeader(false);      // Artikelkopf (Titel, Lead-Bild und Lead-Text) ausblenden
  $GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(false); // Kategorienavigation (Gruppe > Untergruppe > Artikel) ausblenden
  $GLOBALS["DynPG"]->SetParam_A_PrintNavigation(false);    // Drucken-Link ausblenden
  $GLOBALS["DynPG"]->Write_Article();                      // dynamische Navigation ausgeben
  ?>
</div>
Caution.png Achtung: Sie müssen in Zeile 2 den Parameterwert durch die ID des Artikels ersetzen, der die dynamische Navigation enthält.

In der ersten Zeile weisen wir DynPG an, dass der folgenden Artikel immer angezeigt werden soll, da es sich sich um das Navigationsmenü der Webseite handelt. In der zweiten Zeile muss ID durch die ID des Artikels ersetzt werden, der die dynamische Navigation enthält. Die folgenden Zeilen verändern die Ansicht so, dass wirklich nur die Navigation angezeigt wird und sonst nichts.

Erstellen der Inhaltsanzeige

Nun müssen wir uns noch um die Darstellung der Listen und Artikel kümmern. Dazu fügen wir in der Spalte inhalt folgendes ein: 

<div id="inhalt">
  <?php
  $GLOBALS["DynPG"]->Write_AllGroups();         // Gruppenlisten-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext)
  $GLOBALS["DynPG"]->SetParam_AA_Maxview(10);   // Maximal zehn Einträge in Artikellisten anzeigen
  $GLOBALS["DynPG"]->Write_AllArticles();       // Artikelliste-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext)
  $GLOBALS["DynPG"]->SetParam_A_Anytime(false); // Parameter wieder auf false setzen (wurde bei der Navigation auf true gesetzt)
  $GLOBALS["DynPG"]->Write_Article();           // Artikel-Detailansicht ausgeben
  ?>
</div>

Hier werden alle drei Ansichten erzeugt und einige Parameter gesetzt. Zeile 2 gibt z.B. an wie lang eine Artikelliste sein darf, bevor sie der Übersicht halber auf mehreren Seiten dargestellt werden (wobei automatisch eine Seitennavigation im unteren Bereich der Webseite angezeigt wird).

Beachten Sie, dass wir die Parameter $GLOBALS["DynPG"]->SetParam_AG_Anytime(false) und $GLOBALS["DynPG"]->SetParam_AA_Anytime(false) nicht setzen, da diese bereits standardmäßig den Wert false haben. Dadurch zeigen die Gruppen- und Artikelliste den Inhalt abhängig vom Navigationskontext an. Wir müssen hier aber die Funktion $GLOBALS["DynPG"]->SetParam_A_Anytime(false) aufrufen, da wir diesen Parameter für die Artikel-Detailansicht zuvor beim Einbinden der Navigation auf true gesetzt haben. Dadurch werden nun alle drei Sichten abhängig vom Navigationskontext angezeigt.

Anpassen des Layouts mittels CSS

Im Syle Sheet werden wir nun folgende Angaben machen: 

/* Navigation */
div#navigation{
  /* Angaben für ein zweispaltiges Layout */
  float: left;
  width:150pt;
  margin-left:5pt;
  margin-right:5pt;
 
  border:1px solid black;
}
 
/* Inhalt */
div#inhalt {
  /* Angaben für ein zweispaltiges Layout */ 
  margin-left:165pt;
  margin-right:5pt;
}
 
/* In allen divs innerhalb des Navigationsmenüs wird der Inhalt um 10 pt
   nach rechts verschoben. Durch die Verschachtelung von divs innerhalb des
   Menüs erhalten wir so eine Einrückung gemäß der Hierarchie-Ebene. */
div#course_categories_menu  div  {
  padding-left:10pt;
}
 
/* Alle Links innerhalb des Navigationsmenüs */
div#course_categories_menu  a {
  text-decoration:none;
}

Ausgabe

Nun kann die Seite bereits angezeigt werden und sieht dann folgendermaßen aus. Natürlich variiert diese Ansicht je nachdem welche Gruppen und Artikel Sie im Backend erstellt haben.

Datei:Implementation eines kompletten Hauptmenüs.png

Von „http://wiki-de.dynpg.org/wiki_de/index.php?title=Implementation_eines_kompletten_Hauptmenüs&oldid=3398“