7 - Zusammenfassung
Mit Tutorial 4 hast du Page-Typen für Header und Footer entwickelt, die nicht direkt zur Anzeige gelangen und auch nicht in der Navigation erscheinen. Diese Page-Typen werden zur Bewirtschaftung ihrer Angaben in der Datenbank benutzt. Diese Datensätze werden durch den Page-Controller in allen Seiten angezeigt. Du hast also mit einer zusätzlichen Mysql-Query einen eigenen Datensatz zur Anzeige gebracht.
In diesem Beispiel vermischen sich das Arbeiten mit einem Framwork und einem CMS. Das eigentliche Lernziel dieses Tutorials zeigt sich bei der Durchsicht von Mysql-Query und Debugging-Anzeige.
Ein Modell anlegen (DB erstellen) - einen Controller für die Ausgabe der Datensätze - Anzeige in allen Seiten
HeaderPage.php 1
Der Pagetyp um die Inhalte für den Header zu bewirtschaften:
<?php
class HeaderPage extends Page {
private static $has_one = array(
'Photo' => 'Image'
);
static $defaults = array (
'ShowInMenus' => false,
'ShowInSearch' => false
);
private static $icon = "themes/meintemplate/images/ico-header.png";
public function getCMSFields() {
$fields = parent::getCMSFields();
$fields->addFieldToTab("Root.Hintergrundbild", new UploadField('Photo'));
return $fields;
}
}
class HeaderPage_Controller extends Page_Controller {
}
FooterPage.php 2
Der Pagetyp um die Inhalte für den Footer zu bewirtschaften:
<?php
class FooterPage extends Page {
private static $db = array(
'SocialFacebook' => 'Text',
'SocialTwitter' => 'Text',
'SocialRssFeed' => 'Text'
);
static $defaults = array (
'ShowInMenus' => false,
'ShowInSearch' => false
);
private static $icon = "themes/meintemplate/images/ico-footer.png";
public function getCMSFields() {
$fields = parent::getCMSFields();
$fields->addFieldToTab('Root.Main', new TextField('SocialFacebook', 'Link Facebook-Adresse:'), 'Content');
$fields->addFieldToTab('Root.Main', new TextField('SocialTwitter', 'Link Twitter-Adresse:'), 'Content');
$fields->addFieldToTab('Root.Main', new TextField('SocialRssFeed', 'Link RSS-Feed bestellen:'), 'Content');
return $fields;
}
}
class FooterPage_Controller extends Page_Controller {
}
Modell für Page.php 3 - Debugging Anzeige mit print_r() 3 Query
Der Vergleich einer Mysql-Query in Silverstripe oder konventionellem Mysql-Statement. Du kannst jeden Datensatz abholen und zur Anzeige bringen.
Ein wichtiges Hilfsmittel ist es, mit print_r() einen Datensatz zuerst mal ins Browserfenster zu bringen und danach zu filtern. Diese Aufgabe stellt sich in jedem Projekt ganz individuell dar. Es ist daher sinnvoll, sich grundlegend mit dem Datanbankmodell von Silverstripe auseinander zu setzen.
Anleitung: Mysql-Query und Debugging in Tutorial 4
Datamodel: Silverstripe Documentation
Den Page-Controller erweitern 4
In der Datei Page.php wirde der Controller um die beiden Funktionen HeaderContent() und FooterContent() erweitert.
public function FooterContent() {
return FooterPage::get()->First();
}
public function HeaderContent() {
return HeaderPage::get()->First();
}
Das Template für den Header 5
Die Anzeige für den Header wurde (optional) in die Datei Header.ss ausgelagert.
<% loop $HeaderContent %>
<div class="HeaderImage">
$Photo.SetWidth(600)
</div>
<div class="HeaderContent">
$Content
</div>
<% end_loop %>
Die CSS-Stile:
header {
width:100%;
}
.header .HeaderImage {position:relative;}
.header img {width:100%;height:auto;}
.HeaderContent {
position: absolute;
top: 0;
margin:80px 0 0 200px;
color:#ccc;
}
Das Template für den Footer 6
Die Anzeige für den Footer wurde (optional) in die Datei Footer.ss ausgelagert.
<% loop $FooterContent %>
<div class="left">
$Content
</div>
<div class="right">
<p><a href="$SocialFacebook" target="_blank">
<img src="$ThemeDir/images/facebook.png" alt="Facebook" width="30" />
</a></p>
<p><a href="$SocialTwitter" target="_blank">
<img src="$ThemeDir/images/twitter.png" alt="Facebook" width="30" />
</a></p>
<p><a href="$SocialRssFeed" target="_blank">
<img src="$ThemeDir/images/rss.png" alt="RSS Feed" width="30" />
</a></p>
<p><a href="javascript:window.print()">
<img src="$ThemeDir/images/printer.png">
</a></p>
</div>
<% end_loop %>
Die CSS-Stile für den Footer:
footer {
width: 100%;
background-color: #66CC99;
clear: both;
overflow:hidden;
}
footer div.left {padding: 10px;float:left;}
footer div.right {padding: 10px;float:right;}
footer div.left p {padding: 0 12px;margin:0;}
footer div.right p {padding: 0 12px;margin:0;}