Zur Navigation springen Zum Inhalt springen

Standort:
Das nierentischförmige Emblem der TYPO3 Stammtisch Ruhr-Website

Weiter zu Marginalien

Die Newlogin-Box

Ziel ist es, nicht alleine eine Loginbox zu installieren, sondern diese Loginbox auch auf jeder einzelnen Seite zur Verfügung stehen zu haben und darüber hinaus an das eigene Design anpassen zu können. In diesem Beispiel wird die Extension „New front end login box (newloginbox) verwendet.

 

1. Einfügen der entsprechenden Extension

  • Im Menü den Extension Manager anklicken.
  • Im Inhaltsbereich oben im Klappmenü „Import Extensions“ auswählen.
  • Unter „List or look up reviewed (bzw. all) extensions“ „newloginbox“ eingeben und über „look up“ danach suchen lassen.
  • Es werden mehrere Versionen aufgelistet (Alpha, Beta und Stable). Wir wollen natürlich die aktuellste (also Stable). Zum Herunterladen ganz links in der Zeile auf das Bildchen klicken. (Beim Darüberfahren mit der Maus erscheint Text in der Art wie „import this extension to…“)
  • Wenn das geschehen ist, erscheint im Inhaltsbereich ein bisschen Text und unter anderem der Link „install Extension“. Dort drauf klicken. Gegebenenfalls will er anschließend auch noch Ordner anlegen, um existieren zu können: ebenfalls akzeptieren.
  • Wenn man nun wieder oben in der Liste auf „Loaded Extensions“ klickt, müsste die Newloginbox aktiviert angezeigt werden.

 

2. Benutzerdaten anlegen

Die Leute, die sich einloggen wollen, müssen angelegt und verwaltet werden. Dazu wird eine eigene Seite benötigt, auf der man dann zunächst eine Benutzergruppe* definiert und anschließend die Benutzer selbst. Da später noch die ID dieser Seite benötigt wird, kann man sie sich gleich merken, wo man schon mal hier ist.

 

  • Im Menü „page“ („Seite“) auswählen.
  • Im Seitenbaum oben auf die Weltkugel klicken und „new“ („neu“) auswählen.
  • Im Inhaltsbereich auf „page (inside)“ („Seite (in)“) klicken.
  • „Hide page“ („Seite verstecken“): Häkchen herausnehmen.
  • Als Seitentyp „sysfolder“ („SysOrdner“) einstellen.
  • abspeichern
  • Im Inhaltsbereich unten „create new record“ („neuen Datensatz anlegen“) anklicken
  • Auf der neu erscheinenden Seite „website usergroup“ („Website Benutzergruppe“) auswählen. Einen
  • Namen vergeben und abspeichern.
  • Wieder „create new record“ („neuen Datensatz anlegen“) anklicken.
  • Nun „website user“ („Website Benutzer“) auswählen und für den entsprechenden Benutzer Name, Passwort, Benutzergruppe(n) und ggf. weitere Daten angeben.
  • Im Seitenbaum über das Bildchen neben dem Namen der Seite fahren und die dort angezeigte Seiten-ID merken.

 

* Hintergrund für das Anlegen der Benutzergruppe: Seiten sind (sofern nicht generell als versteckt markiert) zunächst einmal für alle Leute sichtbar. Möchte man einige Inhalte aber nur bestimmten Leuten zugängig machen, gibt man auf der Inhaltsseite unten unter „Genereal options (continued)“ („Allgemeine Optionen (Fortsetzung)“) die jeweiligen Benutzergruppen an, die diese Seite sehen dürfen. Im rechten Feld werden alle Benutzergruppen angezeigt, die irgendwann einmal angelegt wurden und von denen man eine oder mehrere auswählen kann, die dann im linken Feld („selected“ bzw. „ausgewählt“) angezeigt wird/werden.

 

3. Vorbereitung für die spätere Designbeeinflussung

Die Loginbox ist in Aussehen und Struktur in einer bestimmten Art und Weise vom Template vorgegeben. Zur Zeit besteht die Anordnung von Benutzername und Passwort zu den jeweiligen Eingabefeldern z. B. aus Tabellen, was aber womöglich nicht in das eigene Design passt bzw. generell nicht gewollt ist. Um das später ändern zu können, muss man auf die entsprechende HTML-Datei zugreifen. Das könnte man direkt in der heruntergeladenen Datei machen, aber sicherer ist es, ihren Inhalt zu kopieren, an anderer Stelle einzufügen und dort die gewünschten Änderungen vorzunehmen. Dann wird auch im Falle eines Updates die eigene Änderung nicht einfach überschrieben. In den Template-Angaben wird dann später darauf hingewiesen, dass nicht die ursprüngliche, sondern die geänderte Datei verwendet werden soll. Details dazu im Schritt 8; jetzt erst einmal Hinweise zum Kopieren der Datei:

 

  • Im „Extension Manager“ oben „Loaded extensions“ auswählen, sofern man sich nicht bereits dort befindet.
  • Auf den Text „New front end login box“ klicken. Es öffnen sich die Details zu dieser Extension.
  • Oben rechts in der Auswahlbox „edit files“ auswählen. Es geht um die Datei newloginbox_00.html.
  • Wenn gefunden, in der Zeile ganz rechts auf „edit file“ klicken. Der Inhalt der HTML-Datei wird nun angezeigt.
  • Den gesamten Inhalt der Datei markieren und in die Zwischenablage kopieren.
  • Im Menü „filelist“ („Dateiliste“) auswählen und anschließend im Seitenbaum den gewünschten Ordner anklicken, in dem die HTML-Kopie abgelegt werden soll. (Wir haben template-stammtisch genommen.)
  • Im Inhaltsbereich erscheint nun, was bereits in diesem Ordner enthalten ist sowie unten zwei Klickmöglichkeiten für „upload files“ und „new“, wobei Letzteres zum Erzeugen einer neuen Datei genutzt wird.
  • Auf der nun neuen Seite bei „create new textfile“ („Textdatei erzeugen“) einen Dateinamen angeben. Die Bezeichnung ist prinzipiell egal, wichtig ist nur, dass sie mit .html endet und sinnvoll wäre natürlich, dass man später auch noch weiß, was sich dahinter verbirgt. Mit einem Klick auf „create file“ („Datei erzeugen“) wird das neue Dokument angelegt.
  • Um den Inhalt aus dem Zwischenspeicher in diese neu angelegte Datei zu bekommen, wieder im Seitenbaum auf den Ordnernamen klicken, damit im Inhaltsbereich seine Inhalte angezeigt werden. Links neben dem Dateinamen auf das Bildchen klicken und aus dem Auswahlmenü „edit“ („bearbeiten“) auswählen. Die Datei geht auf und der Inhalt kann eingefügt werden.
  • Speichern nicht vergessen. :-)

 

4. Eine Seite zum Integrieren der Loginbox

Würden wir die Loginbox nur auf einer Seite benötigen, könnte man den Login auf der entsprechenden Seite einfach einbinden und alles wäre für’s Erste in Ordnung. Aber die Box soll ja permanent angezeigt werden, egal auf welcher Seite man sich befindet. Aus diesem Grund, wird die Box zunächst auf einer eigenen Seite abgelegt und später durch Angaben im Template eingebunden.

 

  • Im Menü „page“ („Seite“) anwählen.
  • Im Seitenbaum oben auf die Weltkugel klicken und „new“ („neu“) auswählen.
  • Im Inhaltsbereich auf „page (inside)“ („Seite (in)“) klicken.

 

Der Seitentyp ist relativ egal. In unserem Beispiel wird „sysfolder“ („SysOrdner“) ausgewählt, es könnte aber genauso gut eine normale Seite sein, die versteckt oder im Menü nicht angezeigt wird. Es geht lediglich darum, dass die Loginbox irgendwo abgelegt wird und alleine für sich nicht sichtbar ist, was beim Sysfolder automatisch der Fall ist.

 

5. Die Loginbox als Seiteninhalt einfügen und ihre ID herausfinden

In die eben erzeugte Seite muss nun das Plugin eingefügt werden. Darüber hinaus wird demnächst die ID des Inhaltselementes benötigt, um es direkt ansprechen zu können, so dass man sie am besten jetzt schon einmal feststellt, wo man gerade hier ist.

 

  • Im Inhaltsbereich „Create page content“ („Seiteninhalt erstellen“) anklicken
  • Dort im Bereich „Plugin“ die „Better login box“ („Besseres Anmeldeformular“) auswählen
  • Speichern
  • Es gibt noch diverse Einstellmöglichkeiten insbesondere unter „Plugin options“ („Plugin Optionen“), z. B. Text der angezeigt werden soll, wenn ein Fehler auftritt oder wenn man sich erfolgreich eingeloggt hat, ein Link für den Fall, dass man das Passwort vergaß und dergleichen mehr. Darauf wird hier jetzt aber nicht weiter eingegangen.
  • Um die ID des Inhaltselements herauszufinden (Achtung: des Inhaltselements, nicht die ID der Seite, auf der es gespeichert ist!), im Seitenbaum die Seite anwählen, in die man eben die Loginbox integriert hat. Im Inhaltsbereich erscheint daraufhin eine Inhaltsübersicht. Dort neben „Default insert plugin“ („Standard Plugin einfügen“) mit der Maus über das nebenstehende Bildchen fahren, dann wird die ID des Inhaltselements angezeigt.

 

6. Die Loginbox in der Grundstruktur verankern

Noch wird auf den Webseiten gar nichts angezeigt, was daran liegt, dass die Loginbox noch nicht in der Grundstruktur verankert wurde. Dazu wird ein Marker bzw. Subpart in der entsprechenden Datei (bzw. den entsprechenden Dateien, falls es mehrere gibt *) angelegt.

 

  • Im Menü „filelist“ („Dateiliste“) anwählen
  • Im Seitenbaum den Ordner auswählen, in dem die Dateien mit der Grundstruktur abgelegt sind.
  • Im Inhaltsbereich auf das Bildchen neben der entsprechenden Datei klicken und „edit“ („bearbeiten“) auswählen.
  • An die gewünschte Stelle im html-Dokument den Marker (z. B. ###LOGINBOX###) oder einen Subpart angeben, sofern man damit arbeitet.
  • Speichern

 

* Wir im Stammtisch haben zwei Dateien, für die einspaltige und für die zweispaltige Darstellung des Inhalts.

 

7. Visualisieren der Loginbox im Design

Nun sieht man auf der Webseite immerhin schon einmal den Marker oder den Text, den man eventuell zwischen den Subparts als Info eingab. Um die Loginbox zu erblicken, muss der Marker bzw. Subpart noch im Template spezifiziert werden.

 

  • Im Menü „template“ auswählen.
  • Im Seitenbaum ggf. die Grundseite auswählen, der das gesuchte Template zugeordnet wurde. (Im Stammtisch liegt das benötigte Template in einem eigenen Ordner namens „ts-Templates“ mit weiteren Templates)
  • Im Inhaltsbereich den Bleistift bei „setup“ anklicken. (Falls mehrere Templates vorhanden sind, zuerst oben im Klappmenü das entsprechende heraussuchen.)
  • Innerhalb von „page.10 { }“ (oder welche Zahl man auch immer statt der 10 gewählt hat, bzw. statt „subparts“ „marks“, falls man Marker verwendet hat) eingeben:
    subparts.LOGINBOX = RECORDS
    subparts.LOGINBOX.tables = tt_content
    subparts.LOGINBOX.source = 109

 

RECORDS verweist darauf, dass Datensätze gesucht werden in diesem Fall aus der Tabelle tt_content. Die Zahl bei source ist die ID des Inhaltselements, die man sich im Schritt 5 gemerkt hat.

 

8. Inhaltliche Verknüpfungen bilden

Nun kann man sich das Eingabefeld auf den Webseiten anschauen, allerdings ist es noch nicht möglich, sich einzuloggen, denn es wurde dem System noch nicht gesagt, wo es die Benutzerdaten überhaupt mit den Passwörtern überprüfen kann. Und vom Design her wird nach wie vor auf die Datei newloginbox_00.html zugegriffen, was ebenfalls noch geändert werden muss, da ja später noch Änderungen an der Präsentation vorgenommen werden sollen. Damit sich das ändert, müssen noch folgende Angaben im Template ergänzt werden.

 

plugin.tx_newloginbox_pi1 {
    templateFile = fileadmin/template-stammtisch/newloginbox.html
    storagePid = 34
}

 

templateFile gibt den Pfad zur html-Datei an, die statt newloginbox_00.html verwendet werden soll. storagePid enthält die ID der sysfolder-Seite, auf der die Login-Daten der Benutzer gespeichert sind, was man sich im Schritt 2 gemerkt hat.

 

9. Das eigene Design integrieren

Die im Schritt 3 kopierte html-Datei muss nun noch bearbeitet werden, damit das Anmeldeformular auch so aussieht, wie man das im eigenen Design haben möchte. Dazu in die entsprechende Datei gehen und die jeweiligen Bereiche, die anders gestaltet sein sollen, bearbeiten. Es gibt verschiedene Bereiche für die einzelnen „Zustände“, z. B.:

 

  • „noch nicht eingeloggt“ zwischen den Subpartmarkierungen <!--###TEMPLATE_LOGIN###-->
  • „erfolgreiches Eingeloggt-Haben“ zwischen den Subpartmarkierungen <!--###TEMPLATE_SUCCESS###--> (Im Ur-Zustand wird z. B. noch kein Logout-Knopf angezeigt, dafür ein Hallo und Willkommen.)
  • „Logout-Knopf“ zwischen den Subpartmarkierungen <!--###TEMPLATE_LOGOUT###-->
  • Falls der „Passwort vergessen?“-Knopf angezeigt wird: zwischen den Subpartmarkierungen <!-- ###TEMPLATE_FORGOT###-->
  • usw.

Weiter im Inhalt

 
 
 

„TYPO3“ ist © 2005 – 2011 TYPO3 Association.