Kapitel 16

Das gesamte Joomla! 1.5 Buch ist jetzt online lesbar, die Kapitel 13-17 beschäftigen sich mit dem Ausbau von Joomla!. Eigene Templates, Komponenten, Module, Plugins und eine komplette Website mit Joomla! von A-Z wird beschrieben!

Die Website hier wird auch langsam entdeckt.

Hier ein paar Screenshots aus Google Analytics vom 7.1.2008

Zugriffe der letzten zwei Wochen

aus Deutschland

aus Österreich

aus der Schweiz

Die Seite ist online. Es hat tatsächlich nur zwei Tage gedauert.

Die nächsten zwei Wochen verbringt Herr Bertrand damit, die Bilder der Weinlese einzupflegen und an den Texten zu feilen. Er spricht Bekannte an, sich doch mal als Benutzer zu registrieren und er erhält sogar eine Bestellung über sein neues System.

Der Provider hat eine Weile mit Herrn Bertrand über die Update-Problematik von Joomla! gesprochen, und Herr Bertrand hat einen Wartungsvertrag abgeschlossen. Immer, wenn eine neue Joomla!-Version auf den Markt kommt, wird der Provider das Update einspielen.

Die Seite ist relativ einfach auf dem aktuellen Stand zu halten, da sie den Standardumfang von Joomla! nutzt und die Exposé-Galerie in einem HTML-iframe läuft, also ähnlich wie bei der Wrapper-Komponente.

Herr Bertrand ist froh, dass er die Arbeit mit den Updates und mit dem Template ausgelagert hat.

Falls Sie auch Bedarf an Gestaltung haben, setzen Sie sich doch einfach mit Ruth in Verbindung: Ruth Prantz, Diplom Designerin (http://www.ateliersite.de).

16.7.1 Und wie ist das in Wirklichkeit?

Viele Entstehungsgeschichten von kleineren Websites laufen genau so ab wie bei Herrn Bertrand. Ich habe es oft selbst erlebt. Die größeren Websites starten meistens auch so, die Firmen geben es aber nicht offen zu.

In größeren Projekten ist der Weg prinzipiell der gleiche. Eine grafische Agentur übernimmt die Gestaltung und eine technische die Programmierung und Entwicklung. Oft gibt es Fachabteilungen für die Texte, die Corporate Identity und die Sicherheit der Website. Das Hosting muss auch geklärt werden.

Aber ansonsten passt das schon. :-)

Der nächste Morgen ist da, das Weinfest ist vorbei, Didier und Marlene haben viel fotografiert. Herr Bertrand hat die Website zu seiner Zufriedenheit fertig gestellt und auch schon die PDFs eingebunden.

Die PayPal-Anbindung funktioniert.

Man trifft sich zum Frühstück, und Ruth ist mittlerweile fertig mit dem Template. Sie bringt die fertige Komponente auf einem USB-Stick mit und erzählt eine Stunde lang über ihre Erlebnisse mit dem Template.

16.6.1 Installation des Templates

Herr Bertrand überträgt die Template-Dateien per FTP in das Verzeichnis /httpddocs/ templates/tmpl_bertrand und /httpddocs/templates/tmpl_bertrand_shop. Im Menü Erweiterungen - Templates macht er das neue Template tmpl_bertrand zum Standard (Abbildung 16.60).

Abbildung 16.60: Neues Template im Template-Manager

Das Template tmpl_bertrand_shop ordnet er im Bearbeitungsmodus den Weinseiten zu. Damit ist sichergestellt, dass der Kunde bemerkt, dass er jetzt im Shop-Bereich ist (Abbildung 16.61).

Abbildung 16.61: Spezielles Template für den Shop-Bereich

16.6.2 Das Template

Das Template ist von Ruth nach folgenden Gesichtspunkten gestaltet worden:

Pflege

Da Herr Bertrand die Seite weiter pflegen will, hat sie ein möglichst einfaches und übersichtliches Gestaltungsraster zu Grunde gelegt. Herr Bertrand kann die Bilder im oberen Bereich später leicht durch neue ersetzen.

Layout

Ruth erklärt ihre Arbeit so:

Es gibt viele Wege, eine Website gestalterisch umzusetzen.

Herr Bertrand will Wein verkaufen.

Das bedeutet, sein Template braucht die optische Ausstattung eines traditionellen, qualitätsbewussten Winzers, bei dem man gern guten Wein einkaufen möchte.

Eine High-Tech-Ausstattung im Metallic-Look wäre einfach unpassend, auch wenn sie gerade modern ist.

Nein, in diesem Fall geben Wein, Trauben und Erde der Seite das Look and Feel. Getragen wird dies durch die Farbeinstellungen wie durch das Fotomaterial.

Ein optisches Erscheinungsbild setzt sich aus mehreren wichtigen Elementen zusammen. Zu ihnen gehören: Logo, Farben, Foto- und Grafikstil (mit Grafiken sind alle Bildelemente gemeint, die nicht Fotografien sind, beispielsweise Buttons und Symbole), Schriftarten.

Zusätzlich wirken Raumaufteilung und Proportion.

All das muss auf einer Website zueinander passen, wenn der optische Eindruck stimmig sein soll. Am besten sollte nur eine Schriftart verwendet werden. Mit fetten und kursiven Schnitten der gleichen Schrift kann man sehr gut Unterschiede hervorheben.

Im Bertrand-Template habe ich für die Überschriften nicht eine besonders originelle, sondern eine sehr klassische Schrift gewählt, die einen seriösen Eindruck hinterlässt. Es ist die klassische Times, ähnlich den Überschriften überregionaler Zeitungen. Gestaltung muss nicht immer besonders originell sein, es ist ausreichend, wenn es einfach gut passt.

Ein Porträt

Während des Frühstücks und beim Telefongespräch, als Ruth Herrn Bertrand die CSS-Technik erklärte, hat sie nebenbei ein wenig gezeichnet. Sie schickt ihr Werk per E-Mail an Herrn Bertrand, und der baut es gleich mit in die Bildergalerie ein.

Abbildung 16.62: Herr Bertrand

16.3.4 Shop

Um den Kunden eine Online-Bezahlmöglichkeit zu bieten, muss ein Warenkorbsystem auf der Website installiert werden. Zum jetzigen Zeitpunkt gibt es allerdings noch keine Shop-Komponente, die mit Joomla! 1.5 funktioniert, und Herr Bertrand möchte auch möglichst wenig Zusatzkomponenten installieren, um die Pflege und die Update-Häufigkeit nicht zu aufwändig zu gestalten.

Sein Sohn Didier hat die Idee, einfach einen Einkaufskorb von PayPal einzubinden. PayPal ist das weltgrößte Online-Bezahlsystem⁵ und gehört zu eBay⁶. Es bietet zahlreiche Händlertools an, unter anderem auch ein Warenkorbsystem. Herr Bertrand erstellt sich ein Benutzerkonto bei PayPal. Außer PayPal gibt es auch andere Systeme wie beispielsweise WorldPay⁷ und viele andere, die ähnliche Features anbieten.

Er verkauft momentan drei Produkte:

• Einen Weißwein zu 10 Euro die Flasche
• Einen Roséwein zu 10 Euro die Flasche
• Einen Rotwein zu 12 Euro die Flasche

PayPal bietet die Möglichkeit, Buttons zu erzeugen, die auf die spezifischen Produkte passen. Bei einem Klick auf diese Buttons wird der Artikel in den PayPal-Warenkorb gelegt. Dabei ist es möglich, Versandkosten und Steuern zu berücksichtigen (Abbildung 16.28).

Abbildung 16.28: Schaltflächen des Shops

Auf der Website baut Herr Bertrand die Schaltflächen in die Beiträge Weißwein, Rotwein und Roséwein ein. Er entschließt sich dazu, ein eigenes Modul zu erstellen. Unter Erweiterungen Module klickt er auf das Icon Neu und wählt ein HTML Modul aus. Er fügt den PayPal-Code in der HTML-Ansicht des Editors (Button HTML) ein. Um sich die Arbeit zu erleichtern, kann er den Editor auch im Menü Site - Konfiguration deaktivieren. Er positioniert das Modul auf der linken Seite unter dem Hauptmenü und wählt die Seiten aus, bei denen es angezeigt werden soll (Abbildung 16.29).

Abbildung 16.29: Neues »Shop«-Modul

Im Falle von PayPal wird die E-Mail-Adresse von Herrn Bertrand im Quellcode benötigt. Das standardmäßige Plugin Email Cloaking maskiert diese E-Mail-Adresse, so dass PayPal nicht den richtigen Warenkorb findet. Er deaktiviert das Plugin im Menü Erweiterungen - Plugins. Die Website sieht jetzt aus wie in Abbildung 16.30.

Abbildung 16.30: Shop-Buttons auf der Website

Klickt nun ein Benutzer auf die Buttons, wird ein PayPal-Einkaufswagen erstellt. Er kann mehrere Artikel in den Einkaufswagen legen und die Mengen verändern (Abbildung 16.31).

Abbildung 16.31: PayPal-Warenkorb

Wenn der Kunde über ein PayPal-Konto verfügt, kann er sofort damit bezahlen. Die Chance, dass Menschen, die online Wein kaufen, ein PayPal-Konto haben, ist relativ hoch, und die Tendenz ist stark steigend.

16.3.5 Die Impressionen

Um den Besuchern der Website ein Gefühl für die Umgebung zu geben, aus der seine Weine stammen, möchte Herr Bertrand Bilder und Videos auf der Website einbinden. Er installiert die Exposé Gallery wie in Kapitel 12.3 auf Seite 237 beschrieben. Er legt sich ein Album Weinlese mit einem Unteralbum 2007, ein Album Weinfest mit dem Unteralbum 2007 und ein Album Produktion mit ein paar Bildern an (Abbildung 16.27). Weitere Bilder soll sein Sohn Didier nach und nach einfügen.

Abbildung 16.32: Album Manager

Über Menüs - Main Menu - Neu fügt er den Link zur Exposé-Komponente dem Menü hinzu. In der Menülink-Bearbeitungsmaske gibt er dem Link noch den Titel Impressionen. Nach dem ersten Abspeichern kann er den Link im Menü an der richtigen Stelle positionieren. Auf der Website erscheinen jetzt die Bilder hinter dem Link Impressionen (Abbildung 16.33).

Abbildung 16.33: Impressionen auf der Website

16.3.6 Der Benutzerbereich

Im Bereich für die registrierten Benutzer sollen diese eine Seite mit besonderen Wein-Angeboten finden sowie einen Downloadbereich mit als PDF angebotenen Artikeln, Zertifikaten, Bodenuntersuchungen und Ähnlichem.

Das Benutzermenü

Herr Bertrand legt einen nicht-kategorisierten Beitrag mit der Überschrift Angebote an. Der Beitrag wird veröffentlicht, nicht auf der Startseite angezeigt und ist nur für registrierte Benutzer zugänglich (Abbildung 16.34).

Abbildung 16.34: Angebote Beitrag

Im Menü Menüs Neu erstellt er sich ein Benutzermenü (Abbildung 16.35).

Abbildung 16.35: Benutzermenü erstellen

Das Benutzermenü positioniert er in Erweiterungen Module auf der linken Seite, aktiviert es und setzt die Berechtigung auf registrierte Benutzer (Abbildung 16.36).

Abbildung 16.36: Benutzermenü im Modulbereich

Er fügt den Beitrag dem neuen Benutzermenü hinzu und setzt die Zugriffsebene auf Registriert (Abbildung 16.37).

Abbildung 16.37: Benutzermenülink

Auf der Website kann sich Herr Bertrand jetzt anmelden. Er nimmt sein admin-Benutzerkonto und stellt erfreut fest, dass außer seinem eben erstellten Benutzermenü neben jeder Überschrift ein Bleistift-Icon angezeigt wird (Abbildung 16.38).

Abbildung 16.38: Benutzermenü auf der Website

Durch einen Klick auf das Bleistift-Icon gelangt er in die Bearbeitungsmaske eines Beitrags. Hier kann er den Text des Artikels und auch die Parameter und die Metadaten verändern. Beim Bearbeiten der Beiträge fällt ihm auf, dass der Button Abmelden aus dem Login-Modul nur auf der Startseite angezeigt wird. Er geht ins Menü Erweiterungen - Module und ändert im Login-Modul im Bereich Seiten/Beiträge die Ansicht auf Alle.

Der Downloadbereich

Als Letztes möchte er noch einen Downloadbereich für seine eingescannten Dokumente haben. Kleine Grafiken der Zertifikate möchte er in den Lagen-Beschreibungen anzeigen, die ausführlichen Dokumente im Bereich für registrierte Benutzer. Dazu benutzt er die Weblinks-Komponente aus Joomla!.

Er wechselt in den Bereich Erweiterungen - Weblinks - Kategorien und legt drei Kategorien an:

• Veröffentlichungen
• Zertifikate
• Bodenuntersuchungen

Zu jeder Kategorie fügt er eine kleine Beschreibung hinzu und will später auch noch ein Bild zuordnen. Die Kategorien sollen nur für registrierte Benutzer sichtbar sein (Abbildung 16.39).

Abbildung 16.39: Link-Kategorien

Die PDFs sollen in einem speziellen Verzeichnis im Medienbereich (Site - Medien) gespeichert werden. Er fügt in das Feld neben der Pfadangabe den Verzeichnisnamen pdf ein und klickt auf den Button Ordner erstellen (Abbildung 16.40).

Abbildung 16.40: PDF-Verzeichnis

Jetzt kann er alle PDFs in Joomla! laden. Er könnte die Dateien auch über einen Datei-Manager in das lokale XAMPP lite-Verzeichnis C:/xampplite/htdocs/bertrand/images/pdfkopieren oder später per FTP auf den Server hochladen (Abbildung 16.41).

Abbildung 16.41: Hochgeladene PDFs

Jetzt muss er die URLs der PDFs noch als Links im Menü Komponenten - Weblinks - Neu einpflegen. In dieser Maske müssen im Internet gültige URLs eingegeben werden (Abbildung 16.42). Außerdem wählt er die Kategorie aus und legt als Ziel nach einem Klick ein Neues Browserfenster ohne Navigation fest, in dem das PDF erscheinen soll. Da Herr Bertrand momentan lokal arbeitet, beziehen sich die URLs auf http://localhost/bertrand/. Wenn Herr Bertrand die Website auf seinen Server überträgt, muss er diese Werte auf seinen zukünftigen Domainnamen anpassen oder bereits jetzt den richtigen Domainnamen eingeben.

Abbildung 16.42: Weblink einfügen

Nach etwas Tipparbeit hat Herr Bertrand neun Links zu verschiedenen PDFs eingepflegt (Abbildung 16.43).

Abbildung 16.43: Fertige Linksammlung

Jetzt muss die Linksammlung noch ins Benutzermenü. Herr Bertrand ruft Menü Benutzermenü Neu auf, wählt im Menüeintragsassistent die Weblinks und dort die Kategorieliste Layout aus (Abbildung 16.44).

Abbildung 16.44: Downloadbereich einbinden

In der anschließenden Bearbeitungsmaske trägt er noch eine Überschrift für den Bereich ein (Downloadbereich). Zugriff sollen nur registrierte Benutzer haben. Er speichert den Link und positioniert ihn unterhalb des Angebots-Links. Auf der Website erscheint der Link wie gewünscht. Die drei Kategorien werden angezeigt. Nach einem Klick auf eine der Kategorien wird eine Tabelle mit den PDFs angezeigt (Abbildung 16.45).

Abbildung 16.45: Downloadbereich auf der Website

Herr Bertrand ist zufrieden. Es ist zwar keine wirkliche Dokumentenverwaltung, aber für seine Zwecke völlig ausreichend. In der Tabelle wird sogar die Häufigkeit der Klicks auf die einzelnen Dokumente angezeigt. Die Anzeige der Beschreibungen und die Darstellung der Tabelle sind ebenfalls in Menü - Benutzermenü - Download - Parameter einstellbar.

16.3.7 Benutzerdetails

Herr Bertrand erinnert sich daran, dass es in den Beispieldaten von Joomla! einen Link im Benutzermenü gab, mit dem der Benutzer seine Daten (E-Mail-Adresse, Passwort etc.) ändern konnte. So ein Link soll auch in das Benutzermenü seiner Website. Im Menüeintragsassistent wählt er Benutzer/Benutzerdetails/Ansicht. Jetzt enthält der Benutzerbereich den entsprechenden Link, und jeder registrierte Benutzer kann seine Daten ändern (Abbildung 16.46).

Abbildung 16.46: Benutzerkonto ändern

16.3.8 Erstes Fazit

Herr Bertrand ist positiv überrascht, wie schnell das alles ging. Er ruft Ruth an und berichtet vom Fortschritt seiner Arbeit. Ruth klingt ein wenig verzweifelt, da sie bisher Templates für die Version Joomla! 1.0.x erstellt hat und sich scheinbar doch eine Menge geändert hat. Sie ist aber zuversichtlich, dass sie das Template am nächsten Tag präsentieren kann.

Sie schickt per E-Mail schon mal zwei Screenshots ihrer Arbeit (Abbildung 16.47 und Abbildung 16.48).

Abbildung 16.47: Entwurf der Website

Abbildung 16.48: Entwurf des Shop-Bereichs

Bei der Einbindung in Joomla! 1.5 stellte Ruth schnell fest, dass sich im Vergleich zu Joomla! 1.0 die Namen vieler CSS-Klassen geändert haben.

Um einen Überblick über die CSS-Klassen und die anderen Parameter zu bekommen, benutzt Ruth die Firefox-Komponente Web Developer⁸ und hat so einen guten Überblick (Abbildung 16.49).

Abbildung 16.49: CSS-Klassen-Info per Firefox Web Developer

Ruth und Herr Bertrand verständigen sich darauf, dass Herr Bertrand die Website schon auf seinem Server installiert. Das Template werden sie nachträglich hinzufügen.

16.3.9 Herr Bertrand lernt CSS

Herr Bertrand ist jetzt schon ganz fit in HTML und möchte gerne wissen, wie sein Template funktioniert.

Es wird ein längeres Gespräch ...

Ruth erklärt ihm, dass das Aussehen des Templates durch zwei CSS-Dateien bestimmt wird, die dem Browser angeben, wie er die Website darstellen soll. Beispielsweise ob die Hintergrundfarbe Rot oder Braun ist, ob ein Bildelement eingefügt wird und vieles andere mehr.

Diese Angaben sind mit Cascading-Stylesheet-Befehlen geschrieben und in den CSS-Dateien template.css und joomlastuff.css hinterlegt.

Ruth hat diese Dateien für die gebräuchlichsten Browser Internet Explorer 6.0 und Firefox 1.5 unter Windows sowie Firefox 1.06 und Safari 2.03 unter Mac OS X 10.4 optimiert.

Um selbst sein Template ändern oder erstellen zu können, will Herr Bertrand CSS verstehen lernen.

Ruth erklärt das Prinzip von Cascading Stylesheets (CSS): Das Wort Cascading bedeutet, dass die Angaben der CSS-Formatierungen von den Browsern von oben nach unten gelesen werden, wie eine Kaskade. Schreibt man eine Angabe doppelt, überschreibt die untere die obere bzw. die letzte die davor liegenden. CSS-Angaben lassen sich an folgenden Stellen einbinden:

• in einer externen CSS-Datei,
• im Head einer HTML-Datei,
• direkt im betreffenden HTML-Tag.

CSS-Angaben, die direkt im betreffenden HTML-Tag gemacht werden, überschreiben die Formatierungen aus den externen CSS-Dateien. Das ist wichtig zu wissen, da die Bestandteile von Joomla! manchmal mit CSS-Formatierungen ausgegeben werden, die direkt in die jeweiligen HTML-Tags eingebunden sind.

Um das Stylesheet von Herrn Bertrands Template einfach zu halten, hat Ruth die Hierarchie der CSS genutzt.

So hat sie beispielsweise die Schriftgestaltung in den allgemeinen HTML-Tags: body, table, div, p und form festgelegt. Damit ist definiert, dass der gesamte Inhalt dieser Elemente in der Schriftart Verdana zu lesen ist, in einer bestimmten Größe dargestellt wird und grau ist.

Soll das an einer Stelle auf der Website geändert werden, muss man diesen HTML-Tags eine Klasse zuordnen. Zum Beispiel die Klasse

.grauetabelle

mit den Eigenschaften:

{ background-color: #333; }

Dies wird in das HTML-Gerüst eingebunden mit

<table class="grauetabelle">

So lassen sich mit CSS-Klassen einzelne Elemente anders steuern.

In Joomla! gibt es eine Menge solcher festgelegten Klassen, über die man ein eigenes Template leicht programmieren kann. Nehmen wir uns beispielsweise die Seitennavigation vor (Abbildung 16.50).

Abbildung 16.50: Ansicht Seitennavigation

Die Seitennavigation besteht aus drei Joomla!-Modulen:

• Main Menu/Hauptmenü
• User Menu/Benutzermenü
• User Login/Anmeldeformular

Ruth legt das Layout der Seitennavigation mit diesen Klassen fest (siehe Listing 16.1):

...
<div class="moduletable_menu">
<h3>Hauptmenü</h3>
<ul class="menu">
  <li id="current"
      class="active item1">
  <a href="http://localhost/bertrand/">Startseite</a>
  </li>
  <li class="parent item4">
  <a href="index.php?option=com_content...">Die Weine</a>
  </li>
  <li class="parent item8">
  <a href="index.php?option=com_content...">Terroir</a>
  </li>
  ...
</ul>
</div>
<div class="moduletable">
<h3>Anmeldung</h3>
<form action="index.php"
      method="post"
      name="login"
      id="form-login">
<fieldset class="input">
<p id="form-login-username">
<label for="modlgn_username">Benutzername</label><br>
<input id="modlgn_username"
       name="username"
       class="inputbox"
       alt="username"
       size="18"
       type="text">
</p>
...
</fieldset>
<ul>
<li>
<a href="index.php?option=com_user...">Passwort vergessen?</a>
</li>
...
</ul>
<input name="option"
       value="com_user"
       type="hidden">
...
</form>
</div>
<div class="clear"></div>
...

Listing 16.1: HTML-Code der Seitennavigation

Die Formatierung in Einzelschritten

Schema

Anhand des HTML-Codes lässt sich leicht ein Schema erkennen:

Ruth hat für ihr Layout in der index.php die Ausgabe der Module mit dem style="xhtml" angegeben.

Alle hier verwendeten Module werden bei dieser Einstellung und der Parameter-Einstellung der Module (Modulmanager) auf "list" in <div>-Tags ausgegeben. Diese <div>-Container enthalten eine mit dem HTML-Tag <h3> definierte Headline und Listen. In den Listen stehen die Links. Man hat hier viele Gestaltungsmöglichkeiten, denn alle HTML-Tags lassen sich entweder direkt oder mit den von Joomla! mitgebrachten Klassen programmieren.

Die Module haben einen ganz leicht sichtbaren Bildhintergrund, der bei allen Modulen hinterlegt ist und deswegen in dem sie umfassenden HTML-Tag definiert wurde. Alle Klassen, die Ruth für ihr HTML-Gerüst selbst erfunden hat, befinden sich in der Datei template.css. So auch die Hintergrundfarbe der durchgängigen Seitennavigation (Listing 16.2).

.naviside{
  background: 
    url(../images/naviseite_oben.jpg) 
    top left;
    /*Bildhintergrund*/
  width: 210px;
    /*Breite*/
  vertical-align: top;
    /*Ausrichtung der Inhalte am oberen Rand*/
  border: 0px;
    /*Rand*/
  padding: 0px;
    /*Innenabstände*/
  margin: 0px;
    /*Außenabstände*/
  background-color:   #fff;
    /*Hintergrundfarbe*/
  text-align: left; 
    /*Ausrichtung am linken Seitenrand*/
  float: left;
    /*Gesamtausrichtung innerhalb des Html-Gerüstes*/
}

Listing 16.2: CSS-Code .naviside

Ruth ordnet im nächsten Schrittt den <div>-Tags, die hier mit den Klassen moduletable_menu und moduletable (Login Form) angesprochen werden, Eigenschaften zu, die für alle Menüs gültig sein sollen:

Breite, Abstände voneinander und eine Farbe. Sie muss dafür nur die beiden Klassen .moduletable bzw. moduletable_menu kennen.

Die Klassen .moduletable und .moduletable_menu sind von Joomla! vorgegebene Klassen. Ruth hat eigens definierte und von Joomla! vorgegebene Klassen der Übersicht halber getrennt in den CSS-Dateien joomla_stuff.css und template.css angelegt.

.naviside .moduletable, .moduletable_menu{
  width: 210px;     /*Breite*/
  background: none; /*Hintergrund*/
  margin-top: 18px; 
    /*Abstand außerhalb der Module, nach oben*/
  text-align: left; /*linksbündig*/
  padding: 0px; 
    /*Keine Innenabstände vom Modulrand zum Inhalt*/
}

Listing 16.3: CSS-Code

Titel der Module

Einen Titel, der für alle Module gleich aussieht (Abbildung 16.51), kann man einfach erstellen, indem die Überschrift innerhalb des Moduls direkt mittels ihres HTML-Tags <h3> angesprochen wird.

Abbildung 16.51: Modultitel

Dazu gibt man in der CSS zuerst wieder die Klasse an, hier .navioben. Alle Module befinden sich innerhalb dieses <div>s mit der Klasse .navioben. Diese Angabe bewirkt, dass nur Überschriftenangaben innerhalb des Bereichs .navioben mit diesen CSS-Angaben formatiert werden. Nun wird noch das ausschlaggebende <h3>-Tag hinzugefügt. Ruth hat die Titel mit einem Hintergrundbild hinterlegt, um die Menüs etwas abwechslungsreicher zu gestalten (Listing 16.4).

/*Festlegung der Überschriften 
  der linksaufgeführten Module*/
.navioben h3 {
  font: 18px/18px Times New Roman, serif;  
    /*Schriftgröße/-Art*/
  font-weight: normal;
    /*Schriftstärke*/
  color:  #A49A66;
    /*Schriftfarbe*/
  background: url(../images/blatt.gif) 
              top left;  
    /*Hintergrundbild*/
  background-repeat: no-repeat;
    /*Wiederholung Hintergrundbild*/
  padding-left: 25px;
    /*Innenabstand linke Seite*/
  height: 25px;  /*div höhe*/
  width: 185px;  /*Breite*/
}

Listing 16.4: Modultitel

Menüeinträge

Nachdem der Titel fertig ist, müssen noch die in HTML-Listen angelegten Links formatiert werden (Abbildung 16.52).

Abbildung 16.52: Menü Einträge

Ruth wollte keine Punkte vor den Links stehen und die listenüblichen Einrückungen verschwinden lassen. Um die Liste anzusprechen, nimmt sie die von Joomla! vordefinierten CSS-Klassen: .menu bzw. .moduletable (Listing 16.5).

ul.menu, .naviside .moduletable ul {
  list-style: none; 
    /* Liste ohne Punkt*/ 
  display: block;  /* Blockelement, */
    /* als Kasten formatierbar */
  width:  210px;  /* Breite   */
  margin:   0px;  /* Außenabstände   */
  border:   0px;  /* Rand */
  padding:  0px;  /* Innenabstände */
}

Listing 16.5: Listenformatierung der Module

Trennungslinien

Ruth wollte die einzelnen Links durch Linien getrennt darstellen. Dazu werden die <li>-Tags der Listen gezielt angesprochen:

ul.menu li {
border-bottom: 1px dotted #ccc;
/* Unterer Rand */
}

Die Unterrubriken der Links kann man extra ansprechen, sie haben in diesem Beispiel einen Einzug am linken Rand (Listing 16.6).

/*Listenformatierung der Unterrubriken*/
ul.menu ul { 
  /* Außenabstand wirkt wie ein Texteinzug */
  margin-left: 10px;
  background-color: #EEE;
    /* andere Hintergrundfarbe */
  width: 200px;
    /* Geringere Breite */
}

Listing 16.6: Unterrubriken

Die Unterrubriken bekommen passend zur Hintergrundfarbe nochmals einen anders formatierten unteren Rand:

ul.menu ul li {
border-bottom: 1px solid #fff;
/* Unterer Rand */
}

Man könnte sogar jeden einzelnen Listenpunkt extra formatieren, da jedes <li>-Tag auch eine eigene Klasse besitzt.

level1 item1,
.level1 item2 parent,
.level1 item3 parent,
.level1 item4

Die eigentlichen Links

Nun zu den Links selbst. Die Formatierung spricht das <a>-Tag an, das in der Liste <ul> mit der Klasse .menu liegt.

Alle Links sollen so aussehen:

ul.menu a {
  text-decoration: none;
    /* Link ohne Unterstreichung */
  color: #6B5E588;
    /* Schriftfarbe */
  font-size: 11px;
    /* Schriftgröße */
  padding-left: 10px;
    /* Schriftabstand zum Rand */
}

Der hover-Effekt bewirkt, dass beim Überfahren mit der Maus der Hintergrund und/oder die Schriftfarbe des Links wechselt. Ruth hat diesen Fall folgendermaßen eingestellt:

ul.menu a:hover {
  color: #CAC303;
  text-decoration: none;
}

Zu guter Letzt wird mithilfe der folgenden Klasse der Link der gerade aktiven Seite besonders hervorgehoben:

.menu li#current a {
  color: #B22819; /* Schriftfarbe */?
}

... und fertig!

Herr Bertrand freut sich und findet die Formatierung mit CSS nach dieser Erklärung gar nicht mehr so schwer. Ihm raucht zwar noch der Kopf, aber Ruth gibt ihm noch den Link http://www.css4you.de. Das ist eine Website, auf der alle Eigenschaften, die man mit CSS zuordnen kann, gut beschrieben sind.

16.3.10 Das ist Ruth aufgefallen, während sie mit der neuen Joomla!-Version 1.5 arbeitete

Falls Sie bereits Templates unter Joomla! 1.0.x erstellt haben, zunächst mal eine gute Nachricht: Joomla! 1.5 ist im Legacy Mode abwärtskompatibel (siehe auch Kapitel 12)!

Ein paar Fallstricke gibt es aber für Template-Ersteller zu beachten. Die bisherigen mosload()-Befehle im PHP-Code sowie die alten CSS-Klassen der index.php eines Templates funktionieren an manchen Stellen nicht mehr, da sich Formatierungen geändert haben.

Änderungen an den Menüs

Die Formatierung der Module und Komponenten ist gegenüber den Joomla!1.0-Versionen um eine Vielzahl an Möglichkeiten erhöht worden. Waren die Module früher schon variabel steuerbar, indem man ihnen eigene CSS-Klassenerweiterungen zuordnen konnte, so ist nun noch hinzugekommen, dass sich ihre HTML-Ausgabe durch folgende Angaben in der Template-eigenen index.php steuern lässt.

Zur Auswahl stehen die Optionen:

• "table" (Default) – das Modul wird in einer Tabellenspalte dargestellt
• "horz" – das Modul wird horizontal angezeigt und in der Zelle einer umgebenden Tabelle ausgegeben.
• "xhtml" – das Modul wird in einem einfachen div-Element ausgegeben.
• "rounded" – die Ausgabe erfolgt in einem Format, das runde Ecken ermöglicht, dabei ändert sich der Name des <div> von moduletable zu module.
• "none" – das Modul wird ohne Formatierung ausgegeben

Ich finde das super! Lässt es doch zu, dass ein Joomla! sich ganz ohne Tabellen gestalten lässt und der Inhalt dadurch logisch gliederbar wird (Thema Barrierefreiheit).

Überhaupt kann man unter Verwendung des <div>-Tags in der Gestaltung wesentlich freier arbeiten als mit HTML-Tabellen, die ursprünglich für diesen Zweck auch nicht vorgesehen waren.

Jetzt haben Sie das Buch vielleicht bis hierher durchgelesen. Sie haben Dutzende von Administrationsseiten gesehen, Sie haben sich über Zusammenhänge von Webtechnologien und Strukturen von Joomla! den Kopf zerbrochen. Und wahrscheinlich brummt Ihnen schon der Schädel von Kürzeln wie HTTP, HTML, CSS, SQL, PHP, SEO, SEF, DIV, MVC etc.

Aber eigentlich wollen Sie doch nur eine Website! Vielleicht sind Sie ja gerade aus diesem Grunde zuerst in diesem Kapitel gelandet.

Egal wie – herzlich willkommen bei einem konkreten Projekt. Dieses Kapitel beschreibt den Aufbau einer Website mit Joomla!, von der Idee bis zur Realisierung.

Herr Bertrand hat die Website nun lokal etwa so, wie er sich das vorstellt. Er hat in den vergangenen Wochen nach einem Provider für seine Website Ausschau gehalten und ist nach langer Suche bei einer kleinen Firma in der Nähe Kunde geworden. Die Firma bietet Herrn Bertrand eine SSL-geschützte Administrationsoberfläche mit dem Namen Plesk für die Einstellungen an seinem Webserver, den Datenbanken, der E Mail-Konfigurationen etc. an (Abbildung 16.53).

Abbildung 16.53: Admin-Oberfläche Plesk

PHP läuft im Safe Mode⁹. Die Datenbank kann mit einem installierten phpMyAdmin bearbeitet werden. Herr Bertrand wollte gern eine webbasierte Verwaltung für seinen Server, weil er sich nicht mühselig in Konfigurationsdateien einarbeiten wollte.

16.4.1 Wie installieren?

In der lokalen Umgebung hat Herr Bertrand den Joomla!-Webinstaller genutzt, um das Programm zu installieren. Dann hat er einen Vormittag lang Daten eingegeben und möchte jetzt bei der Installation seine Daten nicht verlieren. Es gibt mindestens zwei Möglichkeiten:

• Er lädt alle Joomla!-Dateien per FTP auf den Server seines Providers, ändert per Hand die Konfigurationsdatei und importiert die Datenbank über phpMyAdmin.
• Er lädt eine Joomla!-Datei per FTP auf den Server des Providers, installiert sie mit dem Joomla!-Installer und importiert dann die Daten der Datenbank über phpMyAdmin.

Herr Bertrand entscheidet sich für die erste Variante. Um mit der Installation starten zu können, benötigt er Zugangsdaten für FTP, MySQL und natürlich den Domainnamen.

In seiner Verwaltungsoberfläche findet er die folgenden Zugangsdaten:

FTP

• Host: bertrand.cocoate.com
• User: fusfusfus
• Passwort: pwpwpw

MySQL

• Host: localhost
• User: dbusdbus
• Passwort: pwpwpwp
• Datenbank: dbdbdb

16.4.2 Installation von Joomla! beim Provider

Herr Bertrand startet sein FTP-Programm und gibt die notwendigen Daten ein. Das FTP-Programm hat er von seinem Provider kostenlos erhalten¹⁰.

Abbildung 16.54: FTP-Übertragung

Er überträgt seine bestehende Installation aus dem Unterverzeichnis c:\xampplite\ htdocs\bertrand per FTP in das Verzeichnis httpdocs auf dem Server seines Providers.

Die Datei configuration.php sichert er sich auf seinem PC und öffnet sie in einem Editor oder dem Programm WordPad.

Hier muss er ein paar Werte ändern, damit seine lokale Version auch auf dem Server läuft.

/* Database Settings */
...
var $host = 'localhost'; // normally set to localhost
var $user = '';         // MySQL username
var $password = '';     // MySQL password
var $db = '';           // MySQL database name

Nach der Änderung lädt er die Datei ebenfalls per FTP in das Verzeichnis httpdocs auf den Server und gibt ihr die Rechte chmod 0777. FTP-Programme können diesen Befehl ausführen und damit einem Verzeichnis und Dateien Zugriffsrechte zuweisen. Für die Verzeichnisse benötigt Joomla! mindestens chmod 755, für die Dateien reicht chmod 644 aus.

16.4.3 Importieren der Daten

Um die Daten in die MySQL-Datenbank des Providers importieren zu können, müssen sie zunächst aus der lokalen XAMPP lite-Version exportiert werden. Herr Bertrand ruft im Browser http://localhost/phpmyadmin auf, wählt die bertrand-Datenbank aus und klickt auf den Reiter Exportieren.

Er klickt auf Alle auswählen, um alle Tabellen für den Export auszuwählen.

• Im Bereich Struktur wählt er Struktur und Drop Table aus. Drop Table fügt einen zusätzlichen SQL-Befehl in die Export-Datei ein, der dafür sorgt, dass beim späteren Import der Daten eventuell vorhandene Tabellen mit gleichem Namen gelöscht werden. In seinem Fall ist das wichtig, da alle Tabellen durch die Web Installer-Installation vorhanden sind.
• Im Bereich Daten wählt er Daten und Erweiterte Inserts aus.
• Bei Kompression wählt Herr Bertrand den Radio-Button Zip-komprimiert, was die Übertragung etwas beschleunigen wird.
• Er wählt Senden aus, um die Daten als Datei via Download zu erhalten.

Anschließend klickt er auf den Button OK (Abbildung 16.54), und eine Datei bertrand.sql.zip wird ihm zum Download angeboten (Abbildung 16.56).

Abbildung 16.55: Exportieren der Daten

Abbildung 16.56: Herunterladen der Datei bertrand.sql.zip

In dieser Datei befinden sich alle Datenbankinhalte. Er speichert die Datei an einem Platz außerhalb des Joomla!-Verzeichnisses und entpackt sie, so dass er die Datei bertrand.sql erhält. In der Datei sind SQL-Befehle enthalten, die genau den Stand der Dinge in der lokalen Installation repräsentieren und die in einem anderem MySQL-System, der Reihe nach abgearbeitet, genau diesen Stand wiederherstellen.

Genau das will Herr Bertrand haben und ruft das phpMyAdmin auf dem Server seines Providers auf. Dort klickt er in seiner Datenbank (die coco_bertrand heißt) auf den Reiter Importieren. In der Maske klickt er auf den Button Durchsuchen und wählt die lokale bertrand.sql-Datei aus. Durch einen Klick auf den Button OK wird die Datei hochgeladen, die SQL-Befehle werden der Reihe nach ausgeführt, und seine Website auf dem Server des Providers ist jetzt eine Kopie seiner lokalen Version (Abbildung 16.57).

Abbildung 16.57: Importieren der SQL-Datei

Die Website sollte jetzt auf dem Server zur Verfügung stehen. In diesem Fall unter http://bertrand.cocoate.com (Abbildung 16.57).

Abbildung 16.58: Website auf http://bertrand.cocoate.com

16.4.4 Datei- und Verzeichnisrechte

Um einen normalen Betrieb von Joomla! zu ermöglichen, müssen die Rechte der Verzeichnisse angepasst werden. Im Menü Hilfe - Systeminfo kontrolliert Herr Bertrand die Einstellungen (Abbildung 16.59).

Abbildung 16.59: Verzeichnisrechte

Auf dem Server von Herrn Bertrands Provider läuft Linux. Unter Linux gibt es Benutzer und Benutzergruppen. Herr Bertrand hat einen Benutzer, und der Apache Webserver hat auch einen Benutzer. Je nach Konfiguration sind beide in einer Benutzergruppe oder in verschiedenen Benutzergruppen. Wenn sie in verschiedenen Benutzergruppen sind, müssen die Verzeichnisrechte auf chmod 0777 gesetzt werden.

In der Administration ändert Herr Bertrand noch das Passwort für die Exposé-Galerie. Es stand immer noch auf manager :-).

16.5 Suchmaschinen

Herr Bertrand will, solange seine Kinder mit dem Sammeln der Materialien unterwegs sind, schon mal die Struktur der Website vorbereiten.

16.3.1 Lokale Installation

Er installiert sich ein lokales Joomla! in einer XAMPP lite-Umgebung, wie in Kapitel 3 beschrieben. Diesmal nicht im Unterverzeichnis [PfadzuJoomla]/Joomla150, sondern im Unterverzeichnis [PfadzuJoomla]/bertrand.

Die Verbindungsdaten für den MySQL-Server sind:

• Hostname: localhost
• Benutzername: root
• Passwort: kein Passwort (leer lassen)
• Datenbankname: bertrand

Die Installation findet ohne Beispieldaten statt, da Herr Bertrand ja seine eigenen Inhalte einstellen will. Er lädt die Daten im sechsten Installationsschritt durch einen Klick auf den entsprechenden Button. Die Benutzerführung ist hier etwas missverständlich. Der Radio-Button neben der Schaltfläche Beispieldaten installieren ist standardmäßig aktiv. Ohne Klick auf den Button werden die Daten jedoch nicht installiert (Abbildung 16.3).

Abbildung 16.3: Joomla!-Installation – Konfiguration

Er klickt auf den Button Weiter. Der Installer erzeugt ein »leeres« Joomla!. In der Fenstertitelleiste sieht er bereits den Namen Les Vins de Bertrands (Abbildung 16.4).

Abbildung 16.4: Website ohne Beispieldaten

So ganz leer ist die Website noch nicht. Herr Bertrand wechselt jetzt in den Administrationsbereich in das Menü Erweiterungen - Module. Hier sieht er ein aktiviertes Modul mit dem Namen Main Menu (Abbildung 16.4).

Abbildung 16.5: Aktiviertes Modul

Herr Bertrand stellt sich sofort die Frage »Hm, wo sind denn die ganzen anderen Systemmodule, wie beispielsweise das Login-Modul?«. Ein kurzer Klick auf das Icon New beruhigt ihn wieder. Hier können diese Module bei Bedarf erzeugt werden (Abbildung 16.6).

Abbildung 16.6: Neue Module erzeugen

Spracheinstellungen

Herr Bertrand stellt die Sprache von Frontend und Backend auf Deutsch um, wie in Kapitel 4.1.1 auf Seite 87 beschrieben. Nach der Umstellung sind die statischen Texte auf der Website und im Administrationsbereich ins Deutsche übersetzt.

Die ersten Beiträge

Jetzt kommt die Struktur. Herr Bertrand möchte seine Nachrichten in Blogform auf der Startseite der Website haben. Er möchte zunächst drei Nachrichten anlegen, um zu sehen, wie es aussieht. Die Nachrichten müssen nicht kategorisiert werden. Er geht in das Menü Inhalt - Beiträge - Neu und legt drei Nachrichten an. Dort, wo der Weiterlesen-Link erscheinen soll, positioniert er den Cursor und klickt unter dem Editor auf den Button Weiterlesen. Eine rote Linie wird eingefügt. Bereich und Kategorie sind nicht kategorisiert, bei Frontpage kreuzt er Ja an (Abbildung 16.7).

Abbildung 16.7: Erstellen einer Nachricht

Die drei Nachrichten (Beiträge) erscheinen auf der Website und im Menüpunkt Inhalt Startseite Beiträge. Herr Bertrand schaltet mal das Beez-Template unter Erweiterungen Templates ein (Abbildung 16.8).

Abbildung 16.8: Startseite mit drei Beiträgen in beez

Herr Bertrand möchte unter der Überschrift nur das Datum der Erstellung der Nachricht haben. Den Namen des Erstellers und das Aktualisierungsdatum möchte er ausblenden. Da er bis auf Weiteres der Einzige sein wird, der hier Beiträge einstellt, ändert er die Einstellungen im Menü Inhalt Beiträge Voreinstellungen im Feld Autoren-Namen und in den beiden Datumsfeldern darunter (Abbildung 16.9).

Abbildung 16.9: Konfiguration der Inhalte

Die Startseite entspricht jetzt seinen Wünschen. Joomla! erstellt automatisch ein RSS-Newsfeed für diese Nachrichten und zeigt es im Internet Explorer ab der Version 7 und im Firefox-Browser im URL-Feld durch ein orangefarbenes Symbol an. Ein Klick auf dieses Symbol veranlasst Firefox, ein dynamisches Lesezeichen hinzuzufügen (Abbildung 16.10).

Abbildung 16.10: Einbinden eines Newsfeeds in Firefox

Immer wenn Herr Bertrand jetzt einen neuen Beitrag für die Startseite schreibt, taucht dieser Beitrag sofort in seinem Browser auf. Das funktioniert natürlich auch in beliebigen anderen Feedreader-Programmen. Mittlerweile setzt sich das Konzept der Feeds auch auf mobilen Geräten wie Telefonen und PDAs durch. Herr Bertrand hofft, dass viele Kunden seine Nachrichten abonnieren und dadurch auf seine Angebote aufmerksam werden (Abbildung 16.11).

Abbildung 16.11: Die Beiträge als Feed in der Lesezeichen-Symbolleiste

Impressum

In Deutschland ist das Impressum aus rechtlichen Gründen sehr wichtig. Laut Telemediengesetz vom März 2007 muss es verschiedene Informationen enthalten. Dem Besucher der Website muss es möglich sein, zu erkennen, wer inhaltlich für die Website verantwortlich ist³.

Im Falle von Herrn Bertrand sieht ein Impressum folgendermaßen aus:

Verantwortlich für den Inhalt dieser Seite:

Fa. Bertrand
Musterstraße 1
12345 Musterhausen
Musterland
E-Mail: bertrand@cocoate.com
Telefon: 0123 4567-89

Da die Seite gewerblich genutzt wird, muss er auch die Umsatzsteuer-Identifikationsnummer angeben.⁴

Er legt wieder einen nicht kategorisierten Inhalt über das Menü Inhalt - Beiträge - Neu an. Dieses Mal veröffentlicht er ihn nicht auf der Frontpage. Der Link zum Impressum muss jetzt ins Main Menu. Herr Bertrand geht ins Menü Menüs - Main Menu - Neu. Der Menüeintragsassistent startet. Er wählt Beitrag Standard Beitrag Layout aus (Abbildung 16.12)

Abbildung 16.12: Ein Beitrag in das Menü bringen

Herr Bertrand verzweigt in die Bearbeitungsmaske des neuen Menüeintrags, trägt den Namen des Links ein (Impressum) und muss jetzt noch in Menüeintrag Parameter den gewünschten Artikel auswählen (Abbildung 16.13).

Abbildung 16.13: Erstellung des Impressum-Links

Nach einem Klick auf den Button Auswahl erscheint ein Auswahlfenster mit allen Beiträgen (Abbildung 16.14).

Abbildung 16.14: Auswahl des Beitrages für den Menülink

Herr Bertrand klickt auf den Beitrag Impressum, das Auswahlfenster schließt sich, und der Menüeintrag ist komplett. Ein letzter Klick auf das Icon Speichern sorgt dafür, dass der Link auch im Menü landet. Jetzt muss Herr Bertrand noch darauf achten, dass der Link aktiviert ist (rotes Kreuz oder grüner Haken). Die Veröffentlichung bezieht sich hier auf den reinen Menülink, nicht auf den Beitrag. Mit den grünen Pfeiltasten kann der Link positioniert werden (Abbildung 16.15).

Abbildung 16.15: Impressum im Menübereich

Auf der Website sieht es dann aus wie in Abbildung 16.16.

Abbildung 16.16: Impressum auf der Website

Herr Bertrand möchte jetzt noch den Erstellungstag und die Druck-, PDF- und E Mail-Icons ausblenden. Dazu ruft er erneut den Impressum-Beitrag auf (Inhalt - Beiträge - Impressum) und ändert in den erweiterten Parametern die Werte für das PDF-, E-Mail- und Druck-Icon auf Verstecken (Abbildung 16.17).

Abbildung 16.17: Feinheiten im Impressum

Jetzt ist das Impressum komplett, und Herr Bertrand macht sich an die Struktur der Menülinks für die restlichen Seiten.

16.3.2 Menü- und Linknamen ändern, Modul erstellen

Momentan gibt es ein Menü mit dem Namen Main Menu mit einem Link Home und einem Link Impressum. Außerdem möchte Herr Bertrand noch einen Login-Bereich haben.

Aus Main Menu soll Hauptmenü werden, das Login-Formular soll Anmeldung heißen, und aus Home soll Startseite werden. Herr Bertrand ändert die Bezeichnungen für das Main Menu im Menü - Erweiterungen - Module - Main Menu und dort im Feld Titel. Das Login-Formular muss erst erstellt werden (Erweiterungen - Module - Neu – Abbildung 16.18). Den Titel des Login-Formular-Moduls ändert er gleich bei der Erstellung auf Anmeldung.

Abbildung 16.18: Modul Anmeldung erstellen

Den Titel des Home-Links ändert er in Menüs - Main Menu - Home. Bei der Gelegenheit fällt ihm auf, dass auf der Startseite immer noch Welcome to the Frontpage steht. Diesen Text blendet er erst mal unter den Systemparametern aus.

16.3.3 Menüstruktur

Herr Bertrand möchte drei Menüs haben. Ein Hauptmenü, ein oberes horizontales Menü und ein Benutzermenü für angemeldete Benutzer.

Struktur Hauptmenü

Im Hauptmenü soll die gesamte Struktur der Seite sichtbar sein:

- Startseite - Nachrichten
- Die Weine - Allgemeiner Text
-- Weißwein - Produktbeschreibung mit Kaufmöglichkeit
-- Rotwein - Produktbeschreibung mit Kaufmöglichkeit
-- Roséwein - Produktbeschreibung mit Kaufmöglichkeit
- Terroir - Allgemeiner Text
-- Am Hang – Beschreibung mit Link zum Wein
-- Am Meer – Beschreibung mit Link zum Wein
-- In der Ebene – Beschreibung mit Link zum Wein
- Impressionen – Galerie-Komponente mit Bildern der Weinlese
- Angebote – spezielle Angebote im Benutzerbereich
- Kontakt
- Impressum

Struktur Oberes Menü

Das obere Menü soll einen schnellen Zugriff auf die vier Kernthemen geben. Wenn jemand im oberen Menü auf einen Link klickt, sollen sich im Hauptmenü die zu diesem Link gehörenden Links ebenfalls öffnen.

- Weine - Allgemeiner Text
- Terroir - Allgemeiner Text
- Impressionen – Galerie-Komponente mit Bildern der Weinlese
- Kontakt

Struktur Benutzermenü

Nach einer Benutzerregistrierung und dem erfolgreichen Anmelden über das Login-Modul sollen registrierte Benutzer die Möglichkeit haben, spezielle Angebote wahrzunehmen. Hinter der Registrierung steckt die Idee, langfristig einen näheren Kundenkontakt aufzubauen. Angezeigt werden soll eine regelmäßig aktualisierte Seite mit einem günstigen Weinangebot und einer Kaufmöglichkeit. Über den Link Download will Herr Bertrand registrierten Benutzern Zugriff auf seine eingescannten Dokumente geben.

- Angebote
- Download
- Abmelden

Anlegen der Texte und der Menülinks im Hauptmenü

Alle Texte bis auf das Kontaktformular und die Galerie sind zunächst nicht-kategorisierte Inhalte, die Herr Bertrand im Menü Inhalt - Beiträge anlegt. Er achtet darauf, dass die Inhalte nicht auf der Startseite (Frontpage) angezeigt werden. Alle Beiträge sollen die drei Icons PDF, E-Mail und Druck anzeigen, nicht aber das Erstellungsdatum.

Nachdem er alle Beiträge angelegt hat, wechselt er zur Erstellung der Menülinks. Um Weißwein, Rotwein und Roséwein auf die zweite Menüebene zu bekommen, muss als übergeordneter Eintrag Die Weine ausgewählt werden (Abbildung 16.19).

Abbildung 16.19: Links auf der zweiten Menüebene

In Menüs - Main Menu sieht ein baumartiges Menü aus wie in Abbildung 16.20. Der Name Main Menu bleibt intern übrigens erhalten. Nur der Titel von Main Menu ist jetzt Hauptmenü.

Abbildung 16.20: Baumartige Struktur der Menüs

Kontaktlink

Herr Bertrand möchte die in Joomla! integrierte Kontakt-Komponente für sein Kontaktformular benutzen. Er benötigt zunächst eine Kategorie mit dem Namen Fa. Bertrand, die er über den Menüpunkt Komponenten - Kontakt - Kategorien anlegt (Abbildung 16.21).

Abbildung 16.21: Neue Kontaktkategorie

Im Reiter Kontakte legt er, wie in Kapitel 9.2 auf Seite 173 beschrieben, zunächst sich selbst als Kontakt an. Langfristig kommen hier vielleicht noch mehr Kontakte zusammen. Momentan sollte ein zentrales Formular ausreichen (Abbildung 16.22).

Abbildung 16.22: Neuer Kontakt

Jetzt fügt er noch den Kontaktlink in das Hauptmenü ein. Er klickt dazu auf Menüs - Main Menu - Neu. Im Menüeintragsassistent klickt Herr Bertrand auf Kontakte - Standard Kontakt Layout und landet in der Bearbeitungsmaske für den neuen Menüeintrag. Im Parameterbereich werden ihm jetzt die zur Verfügung stehenden Kontakte angezeigt. Momentan ist das natürlich nur er selbst. Er markiert seinen Namen und klickt auf das Icon Speichern (Abbildung 16.23).

Abbildung 16.23: Kontakt Menülink

Jetzt muss er in Menüs - Main Menu den Kontaktlink noch veröffentlichen und an der richtigen Stelle positionieren.

Auf der Website erscheinen jetzt hinter dem Link Kontakt die Daten von Herrn Bertrand und ein Formular, in das ein Besucher seine Frage schreiben kann.

Oberes Menü

Das Hauptmenü ist nun bis auf die Einbindung der Galerie-Komponente komplett. Jetzt erstellt sich Herr Bertrand ein »oberes Menü«. Im Menübereich wählt er Menüs aus und klickt auf das Icon Neu. Er nennt das neue Menü Top Menü (Abbildung 16.24).

Abbildung 16.24: Neues Menü erstellen

Das Menü muss jetzt noch unter Erweiterungen Module auf die Position user3 gesetzt und aktiviert werden. Herr Bertrand muss keine Rücksicht auf den Titel nehmen, da dieser bei den horizontalen Menüs in der Regel nicht angezeigt wird (Abbildung 16.25).

Abbildung 16.25: Positionierung des neuen Menüs

Die gewünschten Links kann er sich aus dem Main Menu in das Top Menü kopieren. Er geht dazu auf Menüs - Main Menu, markiert die Links Die Weine, Terroir und Kontakt und klickt auf das Icon Kopieren (Abbildung 16.26).

Abbildung 16.26: Menüeinträge kopieren

Die Links wurden kopiert. Er schaut schnell auf die Website, um das Ergebnis zu überprüfen. Die Links sind richtig auf der Website angekommen und werden im oberen Menü angezeigt. Wenn sie angeklickt werden, wird auch der richtige Beitrag angezeigt. Im Hauptmenü öffnet sich jedoch nicht das entsprechende Untermenü. Beim Ausprobieren bemerkt er in der URL unterschiedliche Werte für die ItemID. Wenn er den Wert für die ItemID aus dem Hauptmenü nimmt und per Hand in der URL im Browser verändert, verhält sich der Link wie gewünscht, und die untergeordneten Links werden im Hauptmenü sichtbar.

Herr Bertrand überlegt eine Weile und beschließt, die Top Menu-Links als URLs zu realisieren. Er will die zwei Links zu Die Weine und Terroir aus dem Hauptmenü ins Top Menu bringen.

Dazu geht er auf Menüs - Top Menu - Die Weine und klickt in der Bearbeitungsmaske auf den Button Typ ändern und im darauf folgenden Menüeintragsassistent auf Externer Link (Abbildung 16.27).

Abbildung 16.27: Menüeintragstyp ändern

Jetzt ist das Feld Link nicht mehr grau hinterlegt, sondern beschreibbar. Er fügt den entsprechenden Link ein. Bei Herrn Bertrand sind das für

• die Weine der Link index.php?option=com_content&view=article&id=5&Itemid=4 und für
• die Terroir der Link index.php?option=com_content&view=article&id=9&Itemid=8.

Vor index.php sollte kein / (Slash) stehen. In unserem Fall würde so das Dokumentenverzeichnis des Apache Webservers angesprochen, und die XAMPP lite-Startseite würde erscheinen. Ein relativer Link enthält nicht die vollständige Angabe des Links und wird immer in Ergänzung des jeweiligen Aufrufortes als Vervollständigung angesehen. Zieht man zum Beispiel einen Internetauftritt auf eine andere Domain um, stimmen alle relativen Links sofort wieder. Hätte man alle als absolute Links (mit Slash) geschrieben, müssten zuerst alle Links verändert werden. Die ItemIds können bei Ihnen natürlich andere Werte als bei Herrn Bertrand haben.

Um diese Anforderungen erfüllen zu können, bedarf es einiger Vorbereitungen.

16.2.1 Logo und Erscheinungsbild

Die Familie Bertrand trifft sich mit der befreundeten Designerin Ruth Prantz, um das Layout zu besprechen, und diskutiert auch über die Inhalte, die auf der Website publiziert werden sollen. Ruth fragt unter anderem, ob es bereits ein Logo und ein Erscheinungsbild im Printbereich gibt. Unter Printbereich versteht sie bereits vorhandene Prospekte, Flyer, Briefpapiere und auch beispielsweise ein Ladenschild.

Es gibt bereits ein Logo, das der Großvater Bertrand mal gezeichnet hat (Abbildung 16.1).

Abbildung 16.1: Großvater Bertrands Logo

Das Logo taucht in verschiedenen Zusammenhängen immer wieder bei der Familie Bertrand auf. Ein einheitliches Erscheinungsbild gibt es allerdings nicht. In verschiedenen Druckerzeugnissen wird mit unterschiedlichen Farben, Schriften und Foto- und Grafikstilen gearbeitet.

Außerdem möchte Ruth wissen, welche Ziele die Familie Bertrand mit der Website verfolgt und welche Zielgruppen angesprochen werden sollen.

Die Firma Bertrand ist ein ökologischer Betrieb, der sehr auf die Qualität des produzierten Weines achtet und damit auf einen Zeittrend setzt. Sie wollen über die Website etwa 5% ihres Weines verkaufen. Zielgruppe sind Weinliebhaber und deren Freunde ab ca. 35 Jahre aufwärts.

Um sich von seinen Konkurrenten deutlich abzugrenzen, rät Ruth Herrn Bertrand, das Logo, die Farben und die Schriften zeitgemäß zu überarbeiten.

Ein erster Entwurf, der nach einer halben Stunde auf ihrem Bildschirm sichtbar wird, sieht aus wie in Abbildung 16.2.

Abbildung 16.2: Großvater Bertrands Logo nach der Bearbeitung durch Ruth

Zum Erstellen dieses Logos benutzt Ruth hier das Programm Photoshop Elements¹. Viele Website-Provider legen dieses Programm als kostenlose Zugabe beim Abschluss eines Hosting-Vertrages bei. Sie können natürlich auch jedes andere Grafikprogramm benutzen, um ein Logo zu erstellen, beispielsweise das Open Source-Programm Gimp².

Der Familie Bertrand gefällt der Entwurf gut und Ruth verabschiedet sich, um ein Joomla!-Template auf dieser Basis in diesen Farben weiterzuentwickeln. Familie Bertrand will in der Zwischenzeit Materialien für die Website sammeln und die Struktur des Joomla!-Systems festlegen.

16.2.2 Fotos

Um einen Eindruck vom Wein, der Umgebung, den Reben, der Arbeit und der Familie zu bekommen, werden Fotos benötigt. Der Sohn Didier und die Tochter Marlene werden beauftragt, ihr umfangreiches Foto- und Videoarchiv nach brauchbarem Material zu durchsuchen und beim heutigen Weinfest zu fotografieren und zu filmen.

16.2.3 Texte

Um die Texte, die auf der Website erscheinen sollen, möchte sich Herr Bertrand persönlich kümmern. Er hat bereits zahlreiche Flyer in der Vergangenheit mit Texten versehen und Artikel in der lokalen Presse und in Fachzeitschriften geschrieben. Außerdem besitzt er viele Dokumente über Untersuchungen seines Landes und seines Weins. Diese Dokumente möchte er einscannen und als PDF im internen Bereich anbieten.

Die Website, die hier beschrieben wird, ist die Website der Winzerfamilie Bertrand. Pascal Bertrand betreibt Weinbau in dritter Generation. Er hat verschiedene Rebsorten und Jahrgänge Wein im Angebot.

Bisher liefert er seinen Wein an eine Winzerkooperative, und im Sommer verkauft er direkt an die Kunden. Jetzt möchte Herr Bertrand zusätzlich seinen Wein auch über das Internet verkaufen, natürlich mithilfe von Joomla!.

Die Website soll

• das Unternehmen Bertrand darstellen,
• Hintergründe über die Weinlagen und den Wein vermitteln,
• eine Online-Bestellmöglichkeit bieten,
• eine Möglichkeit für Herrn Bertrand bieten, Neuigkeiten auf der Website zu publizieren,
• eine Galerie mit Bildern und Videos von der Weinlese und Veranstaltungen enthalten,
• einen internen Bereich bieten, in dem registrierte Benutzer besondere Angebote und einen Newsletter erhalten,
• eine zentrale Kontaktmöglichkeit für Besucher bieten und
• die Einbindung von Newsfeeds aus der Weinbranche ermöglichen.

Die Realisierung der Website soll in zwei Tagen abgeschlossen sein.