Template

Probleme mit dem Template tmpl_bertrand

Verfasst von DeniseH. am 21. November 2008 - 9:50

Hallo zusammen,

Ich habe mit der Video2Brain CD von Herrn Graf noch in der Beta Phase von Joomla angefangen. Inzwischen bin auf die Stable-Version von Joomla 1.5.8 umgestiegen und wollte nun das sehr schöne Template tmpl_bertrand verwenden. Habe mir auch hier das aktuelle Template runtergeladen.

Auf meiner Seite habe ich nun schon einige Texte drin nur leider werden zwischendrin immer wieder die Leerzeichen zwischen den Wörtern nicht dargestellt. Wenn ich umschalte auf das Standart-Template von Joomla dann wird der Text korrekt dargestellt.

Wenn ich den Text markiere und und in z.B ein Textdokument einfüge sind die Leeerzeichen auch da.

Hat jemand vieleicht ähnliche Probleme und schon eine Lösung dafür gefunden?

Hier ein Link zu meiner Testseite: http://www.sardia.de/joomla_stable/

 

Ich hoffe es kann mir jemand weiterhelfen.

 

Grüße

Denise

»

Eigenes Template, Problem mit Bildergalerie

Verfasst von LexBeer am 17. November 2008 - 20:15

Erstmal's ein Hallo an alle!

Vor ca. 2 Monaten habe ich mir das Buch Joomla 1.5 gekauft und habe es komplett durchgearbeitet! Jetzt habe ich mich an meinem eigenem Template versucht... bis jetzt hat alles funktioniert, bis ich eine Bildergalerie eingebunden habe!

Diese wird entweder überhaupt nicht (bei Expose4) oder in einer langen Reihe nach unten (bei Phoca) dargestellt!

Ok, da liegt der Fehler bei Dir dachte ich... und machte das nächste Tutorial von Joomla-Tipps.net durch!

Hier Habe ich das gleiche Problem, dass die Galerien nicht richtig dargestellt werden!
Was mache ich Falsch bzw. welche Joomla-Klassen muss ich über das CSS ansprechen?

Ich ich mache hier noch einen link auf meinen Forenbeitrag auf  joomlaportal.de

Sollte auch jemand interesse haben drauf zu sehen, habe ich die Möglichkeit meinen lokalen Server ans Netz zu lassen! Erfolg aber nur auf Rücksprache!

Kann mir hier jemand weiterhelfen!

 

Gruß Alex

»

A.3 Template - Einschübe

Verfasst von Hagen Graf am 7. January 2008 - 17:28

Das <jdoc>-Element bietet Ihnen die Möglichkeit, dynamische Bereiche in Ihren Templates anzusprechen, ohne auch nur einen einzigen PHP-Befehl zu benutzen (siehe Tabelle A.2).

Template-Code

Wirkung

  

<jdoc:comment>
Ihr kommentar
</jdoc:comment>

Kommentarzeile

  

<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>

<!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" xml:lang="<?php
echo $this->language; ?>" lang="<?php echo $this->language; ?>"
dir="<?php echo $this->direction; ?>" >

Dokumententyp-Deklaration (XHTML-Header)

  

HEAD

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

Angabe des korrekten Inhaltstyps

  

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/
templates/system/css/system.css" type="text/css" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/
templates/system/css/general.css" type="text/css" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/
templates/<VERZEICHNIS_DES_TEMPLATES_/css/template.css" type="text/css" />

Setzen der CSS-Datei

 

<?php if($this->direction == 'rtl') : ?>

<link href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/template_rtl.css" rel="stylesheet" type="text/css" />

<?php endif; ?>

Setzen der CSS-Unterstützung für »rechts-nach-links«-Sprachen

  

BODY

<jdoc:include type="message" />

Joomla!-Systemnachrichtenanzeige

  

<jdoc:include type="modules" name="[position]" style="[Stil]" />

Laden des Moduls an der
Position [position]. [Stil]:

(siehe Kapitel 13)

  

<?php if($this->countModules('left')) : ?>

<?php endif; ?>

Bedingungsanweisung: Wenn es an der Stelle
left-Module gibt, lade sie
in das Template.

  

<jdoc:include type=component />

Anzeigen der Komponente. Der Name der Komponente ergibt sich aus der URL.

  

Tabelle A.2: <jdoc:...>-Einschübe in der index.php eines Templates

»

A.4 Wie tausche ich ein Bild (Logo) im Template aus?

Verfasst von Hagen Graf am 7. January 2008 - 17:18

Um ein Logo auszutauschen, müssen Sie sich zunächst den Quellcode des entsprechenden Templates ansehen. Grafiken und Bilder können in der HTML- und in der CSS-Struktur definiert werden. Grafiken haben meist eine auf das Template abgestimmte Größe.

Wenn Sie nun Bilder tauschen wollen, so können Sie das über mehrere Methoden realisieren.

Variante 1

  • Erstellen Sie sich von der Auflösung und der Dateigröße her passende Grafiken.
  • Laden Sie die Grafiken in den Mediabereich von Joomla!.
  • Klicken Sie auf die Grafik, um den Link zur Grafik zu erhalten.
  • Ändern Sie im Quellcode Ihres Templates das entsprechende <img src="">-Tag auf das neue Bild.

Variante 2

  • Erstellen Sie die neuen Grafiken unter demselben Namen wie die Grafiken in Ihrem Template.
  • Überschreiben Sie einfach die alten Grafiken mit den neuen.

 

»

17.2 Unternehmen

Verfasst von Hagen Graf am 7. January 2008 - 17:09

In der Wirtschaft ist ein Unternehmen eine rechtlich, wirtschaftlich und finanziell selbstständige Wirtschaftseinheit mit einer eigenen Unternehmensleitung. Mit Unter­nehmen ist das aber immer so eine Sache. Ziel des Wirtschaftens ist normalerweise die Erzielung monetärer Gewinne. Dabei wird viel Wert auf Seriösität gelegt, um Ver­trauen beim Kunden zu wecken. Abhängig vom Produkt muss die Seriösität beim Betrachten der Website in kürzester Zeit im Kopf des Kunden verankert werden. Die Umsetzung dieser Seriösität auf Websites beschäftigt tausende Agenturen täglich und sicherlich noch auf Jahrzehnte hinaus.

Einen Ansatz zur Umsetzung dieses Anspruchs finden Sie im Template von Andy Miller!

17.2.1 Andy Miller

Andy Miller ein Programmierer und Webdesigner mit mehr als 10 Jahren Erfahrung in der professionellen Webanwendungsentwicklung.

Er ist Mitglied des Joomla! Development Teams und war bereits im Mambo Team. Bei der Joomla!-Entwicklung ist er hauptsächlich verantwortlich für die Benutzerschnitt­stelle, das Design und die Barrierefreiheit.

Andy hat sehr tiefgehende Erfahrungen mit Joomla!, besonders im Bereich der Tem­­plate-Entwicklung. Alle standardmäßig in Mambo und Joomla! ausgelieferten Admi­nistrator- und Frontend-Templates waren und sind von ihm (Benutzername rhuk)4.

Andy ist außerdem Gründer der Firma RocketTheme5. RocketTheme bietet in einem Abo-Modell monatliche neue Templates und eine Community zur Pflege und Weiter­entwicklung der vorhandenen Templates an. Die Foren dort können auch von »Nicht-Abonnenten« gelesen werden.

Versatility II von Andy Miller
Abbildung 17.2: Versatility II von Andy Miller

Das Versatility II Template ist eine Weiterentwicklung des Versatility-Templates und technisch sehr ausgereift. Es bietet beispielsweise 15 Modulpositionen an, die alle natürlich nur dann auf der Website erscheinen, wenn die entsprechenden Module vorhanden sind. Durch diese Aufteilung ist das Template extrem flexibel.

Das Template hat vier verschiedene Menü-Optionen:

  • SplitMenu,
  • SuckerFish,
  • drop-down menu,
  • SuperSucker menu.

Außerdem können eigene oder Third Party-Menüsysteme über den Mechanismus eingebunden werden. In Abbildung 17.3 sehen Sie ein Beispiel mit dem Standard Joomla!-Menüsystem.

Menüsystem in Versatility II
Abbildung 17.3: Menüsystem in Versatility II

Die Breite von Versatility II Template lässt sich in drei Stufen dynamisch von den Gäs­ten der Website verändern.

Die Schriftgröße von Versatility II Template lässt sich ebenfalls in drei Stufen dyna­misch von den Gästen der Website verändern.

»

17.1 Das World Knowledge-Template

Verfasst von Tom Bohacek am 7. January 2008 - 17:08

»Die Idee war, ein schlichtes Template zu entwickeln, welches den wechselhaften Informationsständen und vielseitigen Informationsquellen einer NGO gerecht wird.

World Knowledge-Template
Abbildung 17.1: World Knowledge-Template

Hierzu wurde exemplarisch die imaginäre NGO World Knowledge erdacht, die sich dem Erhalt kultureller Wissensschätze und ihrer Verwahrung verschrieben hat.

17.1.2 Gestalterischer Ansatz

»Grau, teurer Freund, ist alle Theorie«. Mit diesem Goethe-Zitat im Rücken wurde ein freundliches Farbschema entwickelt, welches an Pergament erinnert und mit Biblio­theken, also Wissen assoziiert werden soll. Für wichtige Elemente und Orientierungs­hilfen wurde ein helles Türkis der Palette hinzugefügt. Diese im Layout heraus­­ragende Farbe symbolisiert das Wissen als solches und wird symbolisch in der Buchfarbe der jungen Frau im Headerbereich aufgegriffen.

Da NGOs häufig interkulturell agieren, ist das Layout nüchtern und übersichtlich gehal­ten. So bleibt gewährleistet, dass sich Menschen verschiedener Länder schnell zurecht­finden.

Als Schriftart wurde die Helvetica-Familie gewählt, welche nicht nur seit dem Web2.0-Hype wieder sehr populär ist, sondern auch für Kompetenz und Klarheit steht und auf fast allen Systemen vorhanden ist.

17.1.3 Struktureller Ansatz

Das Layout der Website gliedert sich in vier Teile. Den Headerbereich, die Naviga­­tionsleiste und den zweigeteilten Content-Bereich. Dieser beinhaltet neben den Arti­keln einen Bereich, in dem Bilder und kontextbezogene Informationen bzw. relevante Links enthalten sind.

Die linke Navigation enthält keine zweite Navigationsebene. Sie kann jedoch aus mehre­ren Navigationsbereichen zusammengesetzt sein (im Beispiel Present und Future). Um das Anliegen der Organisation direkt zu kommunizieren, wird direkt auf eine Seite ver­wiesen, welche den Menüpunkt als Artikel bzw. Blog vertieft. Alle tiefergehenden Informationen werden über kontextabhängige Links neben den Artikeln dargestellt bzw. direkt im Artikel verlinkt. So bleibt gewährleistet, dass die Navigation eine bestän­dige Struktur vorweist, während einzelne Artikel einer starken Dynamik ausgesetzt sein können.«

Tom Bohaček (http://www.bohacek.de)

»

16.6 Design

Verfasst von Hagen Graf am 1. January 2008 - 21:05

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).

Neues Template im Template-Manager


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).

Spezielles Template für den Shop-Bereich
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.

Herr Bertrand
Abbildung 16.62: Herr Bertrand

»

16.3 Technische Umsetzung - Teil 1

Verfasst von Hagen Graf am 1. January 2008 - 17:01

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).

Joomla!-Installation – Konfiguration
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).

Website ohne Beispieldaten
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).

Aktiviertes Modul
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).

Neue Module erzeugen
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).

Erstellen einer Nachricht
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).

Startseite mit drei Beiträgen in beez
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).

Konfiguration der Inhalte
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).

Einbinden eines Newsfeeds in Firefox
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).

Die Beiträge als Feed in der Lesezeichen-Symbolleiste
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 ist3.

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.4

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)

Ein Beitrag in das Menü bringen
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).

Erstellung des Impressum-Links
Abbildung 16.13: Erstellung des Impressum-Links

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

Auswahl des Beitrages für den Menülink
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).

Impressum im Menübereich
Abbildung 16.15: Impressum im Menübereich

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

Impressum auf der Website
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).

Feinheiten im Impressum
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.

Modul Anmeldung erstellen
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).

Links auf der zweiten Menüebene
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ü.

Baumartige Struktur der Menüs
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).

Neue Kontaktkategorie
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).

Neuer Kontakt
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).

Kontakt Menülink
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).

Neues Menü erstellen
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).

Positionierung des neuen Menüs
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).

Menüeinträge kopieren
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).

Menüeintragstyp ändern
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.

4 Genau genommen gibt es hier noch einige andere Pflichteinträge – aber das lesen Sie am besten unter http://de.wikipedia.org/wiki/Impressum#Impressum_im_Internet nach und entscheiden selbst, was für Sie zutrifft.

»

15.2 Beispiel-Komponente auto

Verfasst von Hagen Graf am 1. January 2008 - 16:53

Jetzt einen großen Sprung nach vorn in Richtung Komplexität. Wir wollen eine sehr einfache Gebrauchtwagen-Liste erstellen, die über den Administrationsbereich gepflegt werden kann.

Sie benötigen dazu:

  • eine neue Frontend-Komponente,
  • eine Backend-Komponente,
  • eine spezielle Tabelle in der Datenbank,
  • (optional) ein zusätzliches Modul zur Anzeige der Einträge auf der Website und
  • (optional) ein Such-Plugin, um Ihre neuen Inhalte durchsuchen zu können.

Damit Sie eine Vorstellung bekommen, worauf ich hinaus möchte und wie die Liste auf der Website aussehen soll, hier das fertige Beispiel. Installieren Sie sich einfach die Komponente com_auto.zip, um es selbst nachvollziehen zu können.

Auf der Website soll eine Liste von Autos mit einem kleinen Foto erscheinen. Klickt man auf das Foto, öffnet sich ein Fenster mit einem größeren Foto. Außerdem gibt es noch ein Modul mit einer Auflistung der Autos (Abbildung 15.5).

Eigene Komponente auf der Website
Abbildung 15.5: Eigene Komponente auf der Website

Diese Liste enthält in unserem Falle Autotypen. Sie können das Beispiel auch mit anderen Daten füllen (Niederlassungen, Angebote etc.). Für den Besucher der Website reicht es meistens aus, eine solche Liste zu sehen. Er muss die Einträge nicht bearbeiten können.

Der Administrator dagegen muss die Liste verwalten.

Verwalten bedeutet in diesem Zusammenhang:

  • Neue Einträge aufnehmen
  • Vorhandene Einträge ändern
  • Vorhandene Einträge löschen

Um das Beispiel nicht zu verkomplizieren, zeigen und bearbeiten wir vier Felder. Zwei Felder für den Text (Typ, Hersteller) und zwei Felder für die Fotos (URL zum Foto, klein und groß). Das Prinzip der Programmierung einer Komponente in Joomla! wird so deutlich, und Sie können das Beispiel leicht um mehrere Felder erweitern. Die Komponente soll sich in die vorhandene Administrationsstruktur einfügen. Die Verwaltungsoberfläche im Administrationsbereich soll aussehen wie in Abbildung 15.6. Es soll möglich sein, die oben genannten Funktionen auszuführen. Außerdem benötigen Sie natürlich eine spezielle Toolbar für die Listenanzeige und eine für den Editier-Modus. Sie benötigen eine Möglichkeit, die Einträge zu veröffentlichen und zu sperren, und Sie wollen die Funktionen Veröffentlichen und Löschen natürlich auch in einer Mehrfachverarbeitung haben, indem Sie die Checkboxen vor den Einträgen ankreuzen und dann beispielsweise mehrere Einträge auf einmal veröffentlichen.

Eigene Komponente in der Joomla!-Administration als Liste
Abbildung 15.6: Eigene Komponente in der Joomla!-Administration als Liste

Außer der Liste benötigen Sie natürlich noch ein Formular für das Ändern und Neuanlegen eines Eintrags (Abbildung 15.7).

Eigene Komponente in der Joomla!-Administration als Formular
Abbildung 15.7: Eigene Komponente in der Joomla!-Administration als Formular

Beginnen wir mit der Komponente. Ich nenne sie com_auto. Um die Ausführungen hier nachvollziehen zu können, sollten Sie sich das fertige Beispiel herunterladen1 und wie jede Komponente installieren. Sie können diese Komponente dann per Hand ändern. Das Ändern und Umbauen hat den Vorteil, dass Sie nach und nach die Strukturen durchschauen und vielleicht Lust auf mehr bekommen. Ich gebe zu, dass komplexere Code-Beispiele schnell unübersichtlich werden. Ich habe aber in diesem Fall versucht, die Dateien so kurz wie möglich zu gestalten, ohne wichtige Dinge wegzulassen.

15.2.1 Die MySQL-Tabelle

Die Komponente nutzt eine Tabelle in MySQL, um die Autos zu speichern. Die Tabelle wird automatisch bei der Installation angelegt. Die SQL-Befehle finden Sie nach der Installation in der Datei /administrator/com_auto/install.sql. Analog dazu gibt es eine Datei uninstall.sql, die bei der Deinstallation der Komponente die Tabelle wieder löscht.

Wenn Sie http://localhost/phpmyadmin aufrufen, können Sie sich die Tabelle jos_auto ansehen (Abbildung 15.8).

Auto-Tabelle in MySQL
Abbildung 15.8: Auto-Tabelle in MySQL

Das Präfix jos_ wird vom Installer vergeben, abhängig von den Angaben in Ihrer Joomla!-Konfiguration. Das Feld published enthält entweder den Wert 1 (veröffentlicht) oder 0 (nicht veröffentlicht). Die beiden Fotos enthalten einen Pfad, den Sie vermutlich anpassen müssen. Das können Sie in der Administration tun. Die Bilder sind ebenfalls auf der dem Buch beiliegenden CD enthalten.

15.2.2 Das Frontend

Wir beginnen mit der Liste der Autos im Frontend. Wie bereits bei der hallo-Komponente benötigen Sie die folgenden Dateien:

  • /components/com_auto/auto.php
  • /components/com_auto/controller.php
  • /components/com_auto/views/auto/view.html.php
  • /components/com_auto/views/auto/tmpl/default.php
  • /components/com_auto/models/auto.php

Wie Sie sehen, existiert dieses Mal ein model, wir benötigen ja Daten aus einer Datenbank.

Der Einstiegspunkt (/components/com_auto/auto.php)

Auch gibt es einen Einstiegspunkt. Die Datei /components/com_auto/auto.php sammelt alles zusammen und delegiert die Aufgaben (Listing 15.6).

<?php
// kein direkter Zugriff
defined('_JEXEC') or die('Restricted   access');
// laden des Joomla! Basis Controllers
require_once   (JPATH_COMPONENT.DS.'controller.php');
// Erzeugen eines   Controllers 
$controller = new AutoController(); 
// den   request task   auslesen
$controller->execute(JRequest::getCmd('task'));
// Redirect aus dem controller
$controller->redirect();
?>

Listing 15.6: /components/com_auto/auto.php

Der Code ist fast der gleiche wie in der com_hallo-Komponente (Stichwort Wiederverwendbarkeit) (Listing 15.7).

Der Controller (/components/com_auto/controller.php)

Auch hier alles bekannte Dinge aus der com_hallo-Komponente:

<?php
defined('_JEXEC')   or die();
jimport('joomla.application.component.controller');
class   AutoController extends JController{
  function display(){
    parent::display();
  }
}

Listing 15.7: /components/com_auto/controller.php

Der View (/components/com_auto/views/auto/view.html.php)

Hier finden sich erste Unterschiede. Wir benötigen natürlich Daten für die Liste (Listing 15.8).

<?php
jimport('joomla.application.component.view');
class AutoViewAuto extends JView {
  function display($tpl = null){
    $model =   &$this->getModel();
    $rows =   $model->getAutoList();
    $this->assignRef('rows'   , $rows);
    parent::display($tpl);
  }    
}
?>

Listing 15.8: /components/com_auto/views/auto/view.html.php

$model = &$this->getModel();

Das Modell wird instanziert und steht als Objekt in der Variable $model zur Verfügung

$rows = $model->getAutoList();

Die Methode getAutoList wird im Objekt aufgerufen und liefert ein Array $rows (Zeilen) zurück.

$this->assignRef('rows', $rows);
parent::display($tpl);

Die Ergebniszeilen werden zugewiesen und an das Template weitergegeben.

Das Template (/components/com_auto/views/auto/tmpl/default.php)

Im Standard-Template werden die Zeilen in der Variable $rows durch eine for-Schleife geschickt, in eine einzelne $row verwandelt und dann einzeln ausgegeben (Listing 15.9)

<?php 
defined('_JEXEC') or die('Restricted access'); 
?>
<script type="text/javascript">
function FensterOeffnen   (Adresse) {
  MeinFenster = window.open(Adresse, "Auto", 
     "width=400,height=300,left=100,top=200");
  MeinFenster.focus();
}
</script>
<h1><?php echo "&Uuml;berschrift"; ?></h1>
<ul>
  <?php
  // Auslesen der Datensätze im Array
  foreach ($this->rows as $row) {
  ?>
  <li>
  <?php echo $row->text; ?>
  <small><em>(<?php echo   $row->hersteller; ?>)
  </em></small><br>
  <a href="<?php echo $row->photo_gross; ?>"   
     onclick="FensterOeffnen(this.href); return false">
  <img src=<?php echo $row->photo_klein; ?>></a>
  </li>
  <?php
}
?>
</ul>

Listing 15.9: /components/com_auto/views/auto/tmpl/default.php

foreach($this->rows as $row){
  ?>
  <li>
  <?php echo $row->text; ?>
  <?php echo $row->hersteller; ?>
  <?php echo $row->photo_klein;   ?>
  </li>
  <?php
} 
?>

Diese Schleife ist das eigentlich Wichtige an diesem Template. Die restliche Formatierung mit HTML oder wie im Besipielcode mit JavaScript zum Öffnen des Popup-Fensters können Sie beliebig verkomplizieren, mit Lightbox-Effekten versehen und alles, was beispielsweise Dreamweaver, MooTools und Ihre Kreativität hergeben, einbauen. Dieser Teil der Formatierung ist in der Version Joomla! 1.5 jetzt eigenständig, bis auf die Variable $rows.

Model (/components/com_auto/models/auto.php)

Da war doch noch etwas – das Modell! Wie kommen wir an die Daten? (Listing 15.10)

<?php
defined('_JEXEC') or die();
jimport('joomla.application.component.model');
class   AutoModelAuto extends JModel{
  function _getAutoQuery( &$options ){
    $db = JFactory::getDBO();
    $id =   @$options['id'];
    $select = 'a.*';
    $from = '#__auto   AS a';
    $wheres[] = 'a.published = 1';
    $query = "SELECT   " . $select .
             "\n   FROM " . $from .
             "\n   WHERE " . implode( "\n  AND ", $wheres );
    return $query;
  }
  function getAutoList( $options=array() ){
    $query = $this->_getAutoQuery( $options );
    $result = $this->_getList( $query );
    return @$result;
  }
}
?>

Listing 15.10: /components/com_auto/models/auto.php

Es gibt zwei wichtige Methoden im Modell. Das ist zum einen die Methode _getAutoQuery, die den Zugriff auf die Daten realisiert und den SQL-Befehl beinhaltet, und zum anderen die Methode getAutolist, die diesen Zugriff steuert und das Resultat zurückgibt. Sie können sich sicherlich noch an die Datei views.html.php erinnern. Dort gibt es diese Zeile:

$rows = $model->getAutoList();

Sie greift auf das Objekt des Modells zu und speichert das Ergebnis in $rows. Innerhalb der Klasse AutoModelAuto wird diese Rückgabe durch die Methode getAutoList realisiert.

Fazit

Es ist an der Zeit, sich mit PHP und objektorientierter Programmierung zu befassen. Ohne das Wissen um Klassen, Methoden, Vererbung und ähnlichen Dingen sind sie nicht unbedingt verloren, aber doch vermutlich verwirrt.

Wenn man sich aber erst mal auf den MVC-Pfad von Joomla! einlässt, sieht man schnell Zusammenhänge. Wenn Sie beispielsweise die com_hallo-Komponente mit diesem Teil der com_auto-Komponente vergleichen, so waren eigentlich 80% des Codes identisch (bis auf das Modell).

15.2.3 Die com_auto-Administration

War das reine Anzeigen der Daten auf der Website noch verhältnismäßig einfach, so ist das Verwalten der Daten naturgemäß ein wenig aufwändiger. Hier müssen Sie die Daten als Administrator anzeigen, ändern, neu einfügen, löschen und veröffentlichen können – also erheblich mehr Interaktivität als in der einfachen Liste auf der Website.

Die Komponenten-Tabelle

Joomla! verwaltet übrigens alle Menüeinträge der Komponenten in der Tabelle [prefix]components. Auch die Menüeinträge aller Komponenten im Administrationsbereich müssen hier vermerkt werden. Die com_auto-Komponente wurde dort auch eingetragen (Abbildung 15.9).

Die components Tabelle in phpMyAdmin
Abbildung 15.9: Die components Tabelle in phpMyAdmin

Außerdem wird dort eine Grafik vermerkt, die links neben dem Menü erscheinen soll ('js/ThemeOffice/component.png'). Die Grafiken finden Sie im Ordner [PfadzuJoomla]/includes/js/ThemeOffice. (Abbildung 15.10).

Grafik neben den Menüeinträgen
Abbildung 15.10: Grafik neben den Menüeinträgen

Um die Administrationskomponente zu erstellen, benötigen Sie mehrere Dateien. Im Verzeichnis [PfadzuJoomla]/administration/components/com_auto/ finden Sie:

  • /administration/components/admin.auto.php
  • /administration/components/controller.php
  • /administration/components/controllers/auto.php
  • /administration/components/views/autos/view.html.php
  • /administration/components/views/autos/tmpl/default.php
  • /administration/components/views/auto/view.html.php
  • /administration/components/views/auto/tmpl/form.php
  • /administration/components/tables/auto.php
  • /administration/components/install.sql
  • /administration/components/uninstall.sql

Der Einstieg (/administration/components/admin.auto.php)

Auch im Administrationsbereich gibt es natürlich einen Einstieg (Listing 15.11).

<?php
defined('_JEXEC') or die('Restricted access');
$controller = JRequest::getVar('controller', 'auto'); 
require_once(JPATH_ADMINISTRATOR.DS.'controllers'.DS.$controller.'.php';
$classname = 'AutosController'.$controller;
$controller = new $classname();
$controller->execute( JRequest::getVar('task'));
$controller->redirect();
?>

Listing 15.11: /administration/components/admin.auto.php

Als Spezialist für Einstiege stellen wir fest, dass uns das schon sehr bekannt vorkommt. Bis auf die if-Abfrage, in der nach zusätzlichen Controllern gesucht wird, ist uns alles vertraut.

Controller (/administration/components/controller.php)

Auch der Basis Controller kommt uns bekannt vor (Listing 15.12):

<?php
jimport('joomla.application.component.controller');
class   AutosController extends JController{
  function display(){
    parent::display();
  }
}
?>

Listing 15.12: /administration/components/controller.php

Noch ein Controller (/administration/components/controllers/auto.php)

Jetzt ändert sich etwas. Wir haben einen zusätzlichen Controller, und der hat es auch gleich in sich (Listing 15.13):

<?php
defined('_JEXEC')   or die();
class AutosControllerAuto extends AutosController{
  function __construct(){
    parent::__construct();
    $this->registerTask( 'add', 'edit' );
    $this->registerTask(   'unpublish', 'publish');
  }
  function edit(){
    JRequest::setVar( 'view', 'auto' );
    JRequest::setVar(   'layout', 'form'  );
    JRequest::setVar('hidemainmenu', 1);
    parent::display();
  }
  function save(){
    $model = $this->getModel('auto');
    if($model->store($post)) {
      $msg = JText::_( 'Auto Saved!'   );
    }
    else{
      $msg = JText::_( 'Error Saving Auto' );
    }
    $link = 'index.php?option=com_auto';
    $this->setRedirect($link, $msg);
  }
  function remove(){
    $model = $this->getModel('auto');
    if(!$model->delete()){
      $msg = JText::_( 'Error: One or more Autos could not be   Deleted' );
    }
    else {
      $msg =   JText::_( 'Auto(s) Deleted' );
    }
    $this->setRedirect(   'index.php?option=com_auto', $msg );
  }
  function publish(){
    $this->setRedirect( 'index.php?option=com_auto' );
    $db =& JFactory::getDBO();
    $user =&   JFactory::getUser();
    $cid = JRequest::getVar( 'cid',   array(), 'post', 'array' );
    $task = JRequest::getCmd(   'task' );
    $publish = ($task == 'publish');
    $n =   count( $cid );
    if (empty( $cid )) {
      return   JError::raiseWarning( 500, JText::_( 'No items selected' ) );
    }
    JArrayHelper::toInteger( $cid );
    $cids = implode(   ',', $cid );
    $query = 'UPDATE #__auto'
           . ' SET published = ' . (int) $publish
           . ' WHERE id IN ( '. $cids .' )';
    $db->setQuery( $query );
    if (!$db->query())   {
      return JError::raiseWarning( 500,   $row->getError() );
    }
    $this->setMessage(
         JText::sprintf( $publish ? 
                'Items published' : 
                'Items unpublished', $n ) );
  }
  function cancel(){
    $msg =   JText::_( 'Operation Cancelled' );
    $this->setRedirect(   'index.php?option=com_auto', $msg );
  }
}
?>

Listing 15.13: /administration/components/controllers/auto.php

Dieser Controller implementiert die Methoden edit, save, remove, publish und cancel. Innerhalb dieser Methoden wird das Modell instanziert und je nach Bedarf beispielsweise die store-Methode im Modell aufgerufen. Mit den statischen Klassen JText und JError werden Nachrichten über den Erfolg oder Misserfolg ausgegeben (Abbildung 15.11).

Meldungsfenster JText
Abbildung 15.11: Meldungsfenster JText

View für die Liste (/administration/components/views/autos/view.html.php)

Diesmal ist der View ein wenig größer, weil die Toolbar noch eingefügt werden muss (Listing 15.14).

<?php
defined('_JEXEC')   or die();
jimport( 'joomla.application.component.view' );
class   AutosViewAutos extends JView{
  function display($tpl = null){
    JToolBarHelper::title(   JText::_( 'Auto Manager' ),   'generic.png' );
    JToolBarHelper::publishList();
    JToolBarHelper::unpublishList();
    JToolBarHelper::deleteList();
    JToolBarHelper::editListX();
    JToolBarHelper::addNewX();
    $items = &$this->get( 'Data');
    $this->assignRef('items',    $items);
    parent::display($tpl);
  }
}

Listing 15.14: /administration/components/views/autos/view.html.php

Toolbar in der Liste der Autos
Abbildung 15.12: Toolbar in der Liste der Autos

Die Toolbar-Helper-Klasse übernimmt die Anzeige (Abbildung 15.12).

Template Liste (/administration/components/views/autos/tmpl/default.php)

Die Liste muss natürlich auch formatiert werden, und so wird hier das entsprechende Standard-Template bereitgestellt (Listing 15.15).

<?php   
defined('_JEXEC') 
or die('Restricted access');
?>
<form action="index.php" 
      method="post"
      name="adminForm">
<div id="editcell">
<table class="adminlist">
<thead><tr>
<th width="5">
<?php echo JText::_( 'NUM' ); ?>
</th>
<th width="20">
<input  type="checkbox" 
        name="toggle" 
        value="" 
        onclick="checkAll(<?php  
           echo count( $this->items ); ?>);" />
</th>
<th class="title">
<?php echo JHTML::_('grid.sort', 'Auto', 'a.text', 
      @$lists['order_Dir'], @$this->lists['order'] ); 
?>
</th>
<th width="5%" align="center">
<?php echo JHTML::_('grid.sort','Published', 
   'a.published', @$this->lists['order_Dir'], 
    @$this->lists['order'] ); ?>
</th>
<th width="1%" nowrap="nowrap">
<?php echo JHTML::_('grid.sort', 'ID', 'a.id', 
    @$this->lists['order_Dir'],
    @$this->lists['order'] ); ?></th>
</tr>
</thead>
<?php
$k = 0;
for ($i=0, $n=count($this->items); $i < $n; $i++){
  $row = &$this->items[$i];
  $published = JHTML::_('grid.published', $row, $i );
  $link = JRoute::_(
    'index.php?option=com_auto&controller=auto&task=edit&cid[]='. 
    $row->id );
  ?>
  <tr class="<?php echo "row$k"; ?>">
  <td></td>
  <td></td>
  <td>
  <a href="<?php echo $link; ?>">
  <?php echo   $row->text; ?></a>
  </td>
  <td align="center"><?php echo $published;?></td>
  <td align="center"><?php echo $row->id;   ?></td>
  </tr>
  <?php 
  $k = 1 -   $k;
}
?>
</table>
</div>
<input type="hidden" name="option" value="com_auto" />
<input type="hidden" name="task"   value="" />
<input type="hidden" name="boxchecked" value="0" />
<input type="hidden" name="controller" value="auto"   />
</form>

Listing 15.15: /administration/components/views/autos/tmpl/default.php

Dieses Template besteht aus eher »schlichtem« HTML, eingepackt in ein Formular. Es sorgt für die Darstellung der Tabelle (Abbildung 15.13).

Tabelle der Autos
Abbildung 15.13: Tabelle der Autos

View Formular (/administration/components/views/auto/view.html.php)

Auch die Einzelansicht der Autos muss geregelt werden. Achten Sie auf den Namen des Unterverzeichnisses. Hier befinden wir uns im Ordner Auto, die Liste ist im Ordner Autos angesiedelt (Listing 15.16).

<?php
defined('_JEXEC')   or die();
jimport( 'joomla.application.component.view' );
class   AutosViewAuto extends JView{
  function display($tpl = null){
    $auto =& $this->get('Data');
    $isNew =   ($auto->id < 1);
    $text = $isNew 
            ? JText::_( 'New' )
            : JText::_( 'Edit' );
    JToolBarHelper::title(JText::_( 'Auto'   ).': 
            <small>[ ' . $text.' ]</small>' );
    JToolBarHelper::save();
    if ($isNew)  {
      JToolBarHelper::cancel();
    }
    else {
      JToolBarHelper::cancel(   'cancel', 'Close' );
    }
    $this->assignRef('auto', $auto);
    parent::display($tpl);
  }
}

Listing 15.16: /administration/components/views/auto/view.html.php

Im Listing wird die Toolbar für die Einzelansicht aufgebaut (Abbildung 15.14). Dieser View ist verwendbar für das Hinzufügen und das Ändern von Datensätzen. In der Variable $isNew wird zwischen beiden Fällen unterschieden.

Toolbar für das Formular
Abbildung 15.14: Toolbar für das Formular

Template Formular (/administration/components/views/auto/tmpl/form.php)

In diesem Standard-Template wird das Formular für die Einzelansicht aufgebaut (Listing 15.17)

<?php 
defined('_JEXEC') 
or die('Restricted access'); ?>
<script language="javascript"
        type="text/javascript">
... Eingabeüberprüfung ...
</script>
<form action="index.php" 
      method="post" 
      name="adminForm"
      id="adminForm">
<div>
<fieldset class="adminform">
<legend>
  <?php echo   JText::_( 'Details' ); ?>
</legend>
<table class="admintable">
<tr>
<td width="110" class="key">
<label for="title">
  <?php echo JText::_( 'Text' ); ?>:
</label>
</td>
<td>
<input class="inputbox" 
       type="text" 
       name="text"
       id="text"
       size="60"
       value="<?php 
      echo $this->auto->text; ?>"   />
</td>
</tr>
<tr>
...   weitere Felder ...
</tr>
<tr>
<td width="120" class="key">
<?php echo JText::_( 'Published' ); ?>:
</td>
</tr>
</table>
</fieldset>
</div>
<div class="clr"></div>
<input type="hidden"   
       name="option" 
       value="com_auto" />
<input type="hidden" 
       name="id" value="<?php echo $this->auto->id; ?>" />
<input type="hidden"   
       name="task" value="" />
<input type="hidden" 
       name="controller" value="auto"   />
</form>

Listing 15.17: /administration/components/views/auto/tmpl/form.php

Das Formular besteht wieder aus reinem HTML mit PHP-Variablen ($this->auto->id) und statischen Klassenaufrufen (JText). Das Ergebnis sehen Sie in Abbildung 15.15.

Auto-Datensatz – Änderungsformular
Abbildung 15.15: Auto-Datensatz – Änderungsformular

Tabelle auto (/administration/components/tables/auto.php)

Last, but not least, hier die Tabellen-Klasse. Irgendwie muss das Modell ja wissen, mit welchen Daten es eigentlich zu tun hat. Die JTable-Klasse erleichtert den Zugriff und das Verändern von Daten ungemein. Sie ist eine abstrakte Klasse (ein Interface), die es abgeleiteten Klassen ermöglicht, mit ihren Methoden die Struktur zu benutzen. Im Konstruktor werden der Tabellenname und der Primärschlüssel angegeben (Listing 15.18).

<?php
defined('_JEXEC') or die('Restricted access');
class TableAuto extends JTable{
  var $id = 0;
  var $text = '';
  var $hersteller =   '';
  var $photo_klein = '';
  var $photo_gross = '';
  var $published =   0;
  function TableAuto(& $db)   {
    parent::__construct('#__auto',   'id', $db);
  }
}
?>

Listing 15.18: /administration/components/tables/auto.php

Installation (/administration/components/install.sql) und Deinstallation (/administration/components/uninstall.sql)

Bei der Installation/Deinstallation muss der Joomla!-Installer die benötigten Tabellen und Datensätze anlegen bzw. löschen. Hierzu werden zwei Dateien mitgegeben (Listing 15.19 und 15.20):

DROP TABLE IF EXISTS `#__auto`;

CREATE TABLE `#__auto` (
  `id`   int(11) NOT NULL auto_increment,
  `text` text character set utf8 NOT NULL,
  `hersteller` varchar(100) character set utf8 NOT NULL,
  `photo_gross` varchar(200) character set utf8 NOT NULL,
  `photo_klein` varchar(200) character set utf8 NOT NULL,
  `published` tinyint(1) NOT NULL,
   PRIMARY KEY  (`id`)
   )
   ENGINE=MyISAM  AUTO_INCREMENT=5 ;

INSERT INTO `#__auto` (`id`, `text`, `hersteller`, 
         `photo_gross`, `photo_klein`, `published`)
  VALUES
  (2, 'Smart fortwo', 'Smart',  
'http://localhost/joomla150/images/stories/com_auto/smart_gross.jpg',
'http://localhost/joomla150/images/stories/com_auto/smart_klein.jpg',
  1),
  (4, 'Roadster', 'Smart',
'http://localhost/joomla150/images/stories/com_auto/roadster_gross.jpg',
'http://localhost/joomla150/images/stories/com_auto/roadster_klein.jpg',
  1);

Listing 15.19: /administration/components/install.sql

DROP TABLE IF EXISTS `#__auto`;

Listing 15.20: administration/components/uninstall.sql

15.2.4 Test

Nachdem Sie alle Dateien durchgesehen haben, können Sie die Komponente testen und die Datensätze komplett über die Joomla!-Administration verwalten. Sie können neue Texte anlegen, vorhandene löschen, ändern und veröffentlichen. Durch ein vorheriges Ankreuzen der Einträge können Sie beim Veröffentlichen bzw. beim Löschen mehrere Einträge auf einmal bearbeiten. Versuchen Sie ein paar Dinge zu verändern und zu erweitern. Es ist gar nicht so schwer.

15.2.5 Installationspaket erstellen

Um ein Installationspaket für Ihre neue Komponente zu schnüren, benötigen Sie außer den beschriebenen Tabellen noch die obligatorische XML-Datei mit den Metadaten.

auto.xml

Hier beschreiben Sie Ihre neue Komponente gegenüber dem Joomla!-Installer. Sie müssen alle Informationen wie Metadaten und alle Dateinamen in XML-Tags einschließen. Der Joomla!-Installer liest diese Datei aus, erzeugt neue Unterverzeichnisse, kopiert die Dateien an den richtigen Platz und legt die benötigten Tabellen an (Listing 15.21).

<?xml   version="1.0" encoding="utf-8"?>
<!DOCTYPE install SYSTEM 
  "http://dev.joomla.org/xml/1.5/component-install.dtd">
<install type="component" version="1.5.0">
<name>Auto</name>
<creationDate>November 2007</creationDate>
<author>Hagen Graf</author>
<authorEmail>hagen.graf@gmail.com</authorEmail>
<authorUrl>http://www.cocoate.com</authorUrl>
<copyright>All rights reserved</copyright>
<license>GNU/GPL</license>
<version>Component Version String</version>
<description>Beschreibung der Komponente ...</description>
<files folder="site">
  <filename>index.html</filename>
  <filename>auto.php</filename>
  <filename>controller.php</filename>
  <filename>views/index.html</filename>
  <filename>views/auto/index.html</filename>
  <filename>views/auto/view.html.php</filename>
  <filename>views/auto/tmpl/index.html</filename>
  <filename>views/auto/tmpl/default.php</filename>
  <filename>models/auto.php</filename>
</files>
<install>
<sql>
  <file charset="utf8" driver="mysql">install.sql</file>
</sql>
</install>
<uninstall>
<sql>
  <file charset="utf8" driver="mysql">uninstall.sql</file>
</sql>
</uninstall>
<administration>
 <menu>Joomla! 1.5 Buch Auto</menu>
 <files folder="admin">
   <filename>index.html</filename>
   <filename>admin.auto.php</filename>
   <filename>controller.php</filename>
   <filename>controllers/auto.php</filename>
   <filename>controllers/index.html</filename>
   <filename>models/auto.php</filename>
   <filename>models/autos.php</filename>
   <filename>models/index.html</filename>
   <filename>views/autos/view.html.php</filename>
   <filename>views/autos/index.html</filename>
   <filename>views/autos/tmpl/default.php</filename>
   <filename>views/autos/tmpl/index.html</filename>
   <filename>views/auto/view.html.php</filename>
   <filename>views/auto/tmpl/form.php</filename>
   <filename>views/auto/index.html</filename>
   <filename>views/auto/tmpl/index.html</filename>
   <filename>tables/auto.php</filename>
   <filename>tables/index.html</filename>
   <filename>install.sql</filename>
   <filename>uninstall.sql</filename>
 </files>
</administration>
</install>

Listing 15.21: auto.xml

Um das Installationspaket zu erzeugen, müssen Sie alle erstellten Dateien in ein Verzeichnis kopieren und dieses Verzeichnis zu einem ZIP-Paket mit dem Namen der Komponente, in unserem Fall com_auto.zip, verpacken. Die Dateien für das Frontend kommen in einen Ordner site, die für den Administrationsbereich in einen Ordner admin (Abbildung 15.16).

Dateien der Komponente com_auto
Abbildung 15.16: Dateien der Komponente com_auto

Die zip-Datei können Sie jetzt mit dem Joomla!-Installer wie gewohnt installieren und, wenn Sie wollen, zum Download für andere Anwender bereitstellen. Bevor Sie das in Ihrer eigenen Installation tun, sollten Sie die per Hand erstellte Variante über den Joomla!- Installer deinstallieren. Klicken Sie dazu auf Erweiterungen - Installieren/Deinstallieren, markieren Sie Ihre Komponente und klicken Sie auf das Icon Deinstallieren.

»

15.1 Beispiel-Komponente hallowelt

Verfasst von Hagen Graf am 1. January 2008 - 16:52

Bevor wir richtig loslegen, aber erst mal ein einfacher »Hallo Welt«-Start. Komponenten teilen sich in Frontend- und Backend-Komponenten. Frontend-Komponenten werden auf Ihrer Website angezeigt, Backend-Komponenten werden für den Administrationsbereich entwickelt, meist um die Frontend-Komponenten zu verwalten. Aus der Sicht eines Besuchers Ihrer Website erkennen Sie eine Komponente an der Art des Aufrufs einer Joomla!-Seite:

Die URL

http://localhost/joomla150/index.php?option=com_contact

ruft beispielsweise die Frontend-Komponente com_contact auf.

Wenn Sie jetzt in Ihr Dateisystem schauen, finden Sie im Unterverzeichnis