Typo3

Installation

1. Typo3 Source-Paket herunter laden
2. (evtl. Dummy-Website bei Neuinstallation herunter laden)
3. Dateien ins htdocs (oder entsprechendes) Verzeichnis kopieren
4. im Backend einloggen mit admin:password -> Passwort ändern unter User->Setup
5. Install-Tool Passwort ändern unter Tools->Install->10:About
6. ImageMagick 4.2.9 installieren, wenn noch nicht auf dem Rechner vorhanden (nur 1x per Rechner)
7. Install-Tool->5:All Configuration
   - [GFX][gdlib_2] => 1
   - [GFX][im] => 1
   - [GFX][im_path] = /xampp/ImageMagick/
   - [GFX][TTFdpi] = 96
   - [SYS][sitename] = MyFirst
   - [SYS][ddmmyy] = d.m.Y
   - [SYS][setMemoryLimit] = 32
   - [BE][warning_email_addr] = .... (Email-Adresse des Administrators)
   - [BE][forceCharset] = utf-8
   - [BE][loginLabels] = Benutzername|Passwort|Interface|Anmelden|Abmelden|Backend,Front End|Administration Login on ###SITENAME###|(Notiz: Cookies und JavaScript müssen aktiviert sein!)|Wichtige Nachrichten:|Die Anmeldung ist fehlgeschlagen. Achten Sie auf richtige Schreibweise, Groß- und Kleinschreibung.

1-2-3 Install Tool

- nach dem Kopieren der Dateien: http://Domain(/Verzeichnis)/

- Install-Tool startet automatisch, da Typo3 noch nicht installiert wurde

- 1: DB-Zugang angeben

- 2: neue DB anlegen

- 3: Beispiel-Tabellen oder Dummy-Website-Tabellen importieren

Typo3-Configuration (Install-Tool im nomal-mode)

- Install-Tool Passwort ändern!!! (10: About)

- Encryption Key festlegen (1: Basic Configuration)

- Weitere Konfigurationen und Tests.. 

Typo3-Backend (Administration der Inhalte)

- Kategorie->User->Setup->"new password" 2 mal eingeben!!!

Vergessenes admin-Passwort wieder herstellen

- MySql: Tabelle be_users Feld password ändern -> neues Passwort eintagen

- MySql: UPDATE be_users SET password=md5(password) WHERE username='admin'

Backend auf Deutsch umstellen

1. einloggen im Backend
2. deutsche Spracherweiterung installieren
   - Extension Manager
   - Dropdown "Menu:" -> Translation handling
   - "German" auswählen
   - [Save selection]
   - [Check Status ...]
   - wenn keine Fehler auftraten -> [Update from Repository]
3. User->Setup
   - "Backend-Sprache:" -> Deutsch [German]
4. Cache löschen -> Browser aktualisieren

Redaktion im Backend

Dateiliste zum Download (Typ: Dateiverweise)

1. neues Inhaltselement -> Dateiverweise (Filelinks)
2. Abschnitt "Dateien:" -> Ordnersymbol für Elementbrowser
   - Ordner wählen / evtl. neu anlegen
   - evtl. Dateien hochladen
   - gewünschte Dateien durch das +Zeichen zur Liste hinzufügen
   - Elementbrowser schließen
3. Dateiliste wie gewünscht sortieren
   - zu verschiebende Datei auswählen
   - durch Pfeile neben der Liste nach oben bzw. unten bewegen
   - falls Datei aus der Liste entfernt werden soll -> Papierkorb neben der Liste
4. "zeige Dateigröße" falls gewünscht
5. "Beschreibungen:" zu jeder Datei hinzufügen
   - jede Zeile in dem Textfeld ist einer Datei im Dateifeld zugeordnet
   - zeilenweise Reihenfolge ist für die Zuordnung verantwortlich

Datentabelle (Typ: Tabelle)

1. neues Inhaltselement -> Tabelle (Table)
2. Speichern ohne Schließen
3. Tabellenassistent öffnen (Table wizard) neben dem Feld "Text:"
4. [  ] kleine Felder evtl. deaktivieren -> speichern
5. Zellen füllen / Zeilen u. Spalten anlegen oder löschen / Zeilen u. Spalten verschieben
6. Speichern und Schließen (des Tabellenassistenten)
7. Speichern des Inhaltselementes

Mail-Formular (Typ: Formular)

1. neues Inhaltselement -> Formular
2. Speichern ohne Schließen
3. Formularassistent öffnen (Forms wizard) neben dem Feld "Text:"
   - jede Zeile im Assistenten entspricht genau einem Formularfeld
   - Felder anlegen, löschen oder verschieben
   - Details einstellen - abhängig von gewähltem "Typ:"
   - Absendeschaltfläche beschriften
   - Festlegung, ob HTML-Mail oder nicht
   - Betreff festlegen
   - Empfängeradresse für die Formulardaten festlegen
   - Formularassistent speichern und schließen
4. Zielseite im Elementbrowser wählen
   - diese erscheint im Browser nach dem Absenden des Formulars,
   - muss evtl. vorher angelegt und mit Inhalt (z. B. "Vielen Dank...") gefüllt werden

Template anlegen

1. Seite anlegen, falls noch nicht geschehen
2. Modul Web->Templates
   -> Wurzelseite auswählen (von dieser Seite aus abwärts werden alle Seiten dieses Template ebenfalls verwenden. Vererbung)
3. (kein Standard-Template auswählen) [Create Template for a new Site]

Konstanten (Constants)

Konstanten sind Elemente, die innerhalb der Website mehrfach vorkommen können. Z. B. Telefonnummern, Namen u.s.w. Konstanten werden im Constants-Editor bearbeitet.

1. Modul Web->Template
2. Seite auswählen, in der das Template angelegt wurde, dessen Konstanten geändert werden sollen
3. Dropdown rechts oben muss auf "Info/Modify" stehen (Liste der Template Elemente sollte zu sehen sein)
4. Stift vor Konstanten (Constants) anklicken zum Bearbeiten der Konstanten

Setup (TypoScript-Template) bearbeiten

1. Modul Web->Template
2. Seite auswählen, in der das Template angelegt wurde, dessen Setup geändert werden soll
3. Dropdown rechts oben muss auf "Info/Modify" stehen (Liste der Template Elemente sollte zu sehen sein)
4. Stift vor Setup anklicken zum Bearbeiten des TypoScript-Templates

Setup in einer externen Datei bearbeiten

TypoScript

Kommentare

/  ... einzeiliger Kommentar

# ... einzeiliger Kommentar

/* ~~~~ */ mehrzeiliger Kommentar

Seiten-Objekt

PAGE: erzeugt eine Seite, hier liegen alle Elemente, die auf der Seite angezeigt und verwendet werden sollen

Inhalts-Objekte

TEXT: stellt Funktionen zur Ausgabe von einfachem Text zur Verfügung

seite = PAGE

seite.10 = TEXT

seite.10.value = Hallo Welt!

seite.10.wrap = <p>|</p>

HTML: stellt Funktionen zur Ausgabe von HTML zur Verfügung

seite = PAGE

seite.10 = HTML

seite.10.value= Hallo Welt!

seite.10.value.wrap = <p>|</p>

GIFBUILDER: stellt Funktionen zur erzeugung von Bildern mit Text zur Verfügung

seite = PAGE

seite.10 = IMAGE

seite.10.file = GIFBUILDER

seite.10.file {

   XY = 200,150

   format = jpg

   quality = 90

   10 = IMAGE
   10.file = fileadmin/bilder/blume2.gif

}

Eigenschaften des GIFBUILDER-Objektes:

1,2,3,... => Ebenen im Gesamtbild

XY => Abmessungen des Gesamtbildes

format => Grafikformat des Gesamtbildes (gif, jpg, png)

transparentBackground => 1/0 Hintergrund wird bei GIF-Grafiken transparent gesetzt

transparentColor => 1/0 Farbe am Pixel der Position 0,0 wird als transparent gesetzt

quality => 0..100 JPG-Qualität

backColor => #000000...#FFFFFF Hintergrundfarbe des Bildes

maxWidth => maximale Breite des Gesamtbildes

maxHeight => maximale Höhe des Gesamtbildes

In den Ebenen können nun weitere Objekte platziert werden. Das können Objekte der folgenden Typen sein:

TEXT => Text-Ebene

BOX => ein Rechteck

IMAGE => Bild-Ebene

Eigenschaften von TEXT des GIFBUILDER-Objektes:

text => Text, der im Bild geschrieben werden soll

textMaxLength => max. erlaubte Buchstabenzahl

maxWidth => max. erlaubte Länge des Textes in Pixel

fontSize => Schriftgröße

fontColor => #000000...#FFFFFF Schriftfarbe

fontFile => Schriftartendatei z. B. fileadmin/fonts/kartika.ttf

angle => Ausgabe-Winkel

align => left, center, right  horizontale Ausrichtung

niceText => 1/0 Glättung des Textes durch Weichzeichnen

antiAlias => 1/0 Glättung des Textes durch Antialiasing

offset => Positionierung gegenüber der 0,0 Koordinate des Gesamtbildes (die Schrift 0,0-Koordinate ist links unten, die des Bildes links oben)

shadow => Schattenefekt

Eigenschaften von IMAGE des GIFBUILDER-Objektes:

file => Dateiname der Bilddatei

offset => Position des Bildes innerhalb des Gesamtbildes (x,y)

tile => Kachelung des Bildes im Gesamtbild (x,y : Anzhal der Kacheln in horizontaler und vertikaler Richtung)

align => (vert, horiz) Ausrichtung innerhalb des Geamtbildes: horizontal l,c,r  -  vertikal t,c,b

Designvorlage

Designvorlage aufbauen

• in HTML geschrieben
• enthält Platzhalter (Marker, Subparts)

Marker: für kleine Platzhalter

 - in der Design-Vorlage: ###MARKERNAME###

 - Ansprechen im TS: ...marks.MARKERNAME...

Subparts: für größere Platzhalter-Bereiche

 - in der Design-Vorlage:

   Start-Element: <!-- ###SUBPARTNAME### Start -->

   Blindtext: Zum Simulieren der Inhalte, die später ersetzt werden durch die Inhalte aus der Datenbank

   Ende-Element: <!-- ###SUBPARTNAME### Ende -->

 - Ansprechen im TS: ...subparts.SUBPARTNAME...

spezieller Subpart für den Bereich, auf den das TS-Template angewendet werden soll

 <body>

 <!-- ###MEINDOK### -->

     ... auf diesen Bereich wird das TS-Template angewendet...

 <!-- ###MEINDOK### -->

 </body>

Alles(!) rundherum - auch die body-Tags werden aus dieser Datei entfernt und Typo3 setzt hier eigene Elemente ein, um die HTML-Seite komplett zu erstellen.

Dem TS-Template muss noch mitgeteilt werden, wie der Dokumentbereich in der Designvorlage heißt:

seite = PAGE

seite.10 = TEMPLATE

seite.10.template = FILE
seite.10.template.file = fileadmin/templates/tmpl-05/design-template.html
seite.10.workOnSubpart = DOKUMENT

...

Datenbank-Inhalte am Marker einfügen

Voraussetzung: Installation der Erweiterung "css-styled-content"

- Modul -> Template -> Template-Seite öffnen

- "Info/Modify"

- "Click here to edit whole template record"

   - Bereich: "Include static (from extensions):"

   - CSS Styled Content muss in der linken Box gelistet sein

   - anklicken, wenn nicht vorhanden

   - wenn auch in der rechten Box nicht vorhanden, dann als Erweiterung nachinstallieren

Verwendung von css_styled_content im TS-Template:

- ...subparts.SUBPARTNAME < styles.content.get

Menüs generieren

Menü-Element

HMENU

- als Element für das gesamte Menü

- enthält weitere Definitionen für die Unterpunkte

Option-Split

In einem Menü und anderen Elementen, entstehen automatisch mehrere Teilelemente - die Menüpunkte zum Beispiel.

...wrap = Erstes |*| ALLE Mittleren |*| Letztes

...wrap = &lt; | &#124; |*| | &#124; |*| | &gt;

erzeugt ein Menü bei dem jeder Menüpunkt durch ein Pipe-Symbol (&#124;) vom anderen getrennt ist. Der erste Menüpunkt hat links ein Kleiner-als-Zeichen (&lt;) und der letzte Menüpunkt hat rechts ein Größer-als-Zeichen (&gt;)

Volltextsuche

Suchseite einrichten

Die Volltextsuche wird über eine Extension realisiert. Folgende Schritte sind zur fertigen Suche notwendig:

1. Installation der Extension "Indexed Search Engine"
2. Anlegen einer Suchseite
3. Anlegen eines Content-Elements
   - Typ: "General Plugin"
   - Plugin: "Indexed search"
4. Einschalten der Indizierung im Template
   - TS: im Seiten-Element (z. B. "seite") den Eintag hinzufügen: seite.config.index_enebale = 1
5. evtl. Rules deaktivieren:
   - TS: außerhalb des Seiten-Elements den Eintrag hinzufügen: plugin.tx_indexedsearch.show.rules = 0
   

Suchfeld im Design-Template

HTML: Formular einfügen
<form action="index.php?tx_indexedsearch[sword]">
  <input name="id" value="23" type="hidden" />
  <input name="tx_indexedsearch[sword]" type="text" />
  <input type="submit" />
</form>

23 ist die ID der Seite, in der das Such-Plugin enthalten ist.

Mehrsprachigkeit einrichten

Um mehrere Sprachen verwenden zu können, müssen folgende Schritte durchgeführt werden:

1. gewünschte Sprache zur Verwendung freigeben
2. Alternative Seitenvarianten für die neue Sprache anlegen
3. Standard-Inhalte auf die neue Seite kopieren und übersetzen
4. Sprachmenü einrichten im TS und im HTML-Design (falls noch nicht geschehen)
    -> neue Sprache als Menüpunkt hinzufügen
   

1. gewünschte Sprache zur Verwendung freigeben

• Typo3-Wurzel-Element (Erdkugel) -> new Language

• Sprache benennen

• Flagge wählen

2. Alternative Seitenvariante für jede Seite anlegen

• Seite aufrufen
• Dropdown rechts oben ändern zu "Languages/Sprachen"
• Dropdown hinter "Make new translation of this page: " auf neue Sprache einstellen
• Grundeinstellungen für die neue Sprache dieser Seite eintragen
• speichern, schließen

3. Standard-Inhalte auf die neue Sprache kopieren

• "Copy default content elements"
• kopierte Original-Inhalte übersetzen

4. Sprachmenü einrichten

• TS und Designtemplate bearbeiten

Benutzer verwalten

Benutzergruppen

Benutzergruppen dienen der Festlegung von allgemeinen Regeln, die für eine Gruppe von Benutzern gelten.

Benutzergruppe anlegen

1. Auf T3-Wurzel (Erdkugel) klicken -> New

2. "Backend usergroup"

3. Details festlegen
   - Name der Benutzergruppe
   - [x] Include Access Lists
   - detaillierte Berechtigungen festlegen
   - speichern

Alle Benutzergruppen gemeinsam sind aufgelistet unter dem Modul "List" bei Klick auf die T3-Wurzel

Eigene PHP-Scripte in Typo3

Zur Nutzung eines eigenen PHP-Scripts müssen folgende Schritte abgearbeitet sein:

1. Sicherstellen, dass Inhalts-Typ Script vorhanden ist
   wenn nicht, dann folgendes ändern:
   - Datei "typo3/sysext/css_styled_content/pageTSconfig.txt"
     => auskommentieren: #CType.removeItems = div,rte,script,splash
2. PHP-Script muss vorhanden sein
   Inhalt, der in der T3-Website erscheinen soll muss in der Variable $content abgelegt werden
3. Extension-Template in der gewünschten Seite oder höher
   T3-Menü -> Web -> Template
   -> Seite im Seitenbaum anklicken
   -> "Click here to create an extension template"
   Setup:
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   tt_content.script = CASE
   tt_content.script {
     key.field = select_key
     HALLOMARKER = PHP_SCRIPT_EXT
     HALLOMARKER.file = fileadmin/myscripts/myshop-produkte/produkte.php
   }
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   => HALLOMARKER ist frei wählbar
4. neues Inhaltselement anlegen vom Typ "Script"
   - im Feld CODE muss der Name des oben gewählten Markers eingetragen werden

Frontend-Benutzer (website user)

Frontend-Benutzer sind Besucher der Website, die sich mit ihrem Benutzernamen einloggen können und dadurch Zugriff auf Bereiche der Website bekommen, die anderen verborgen sind.

Frontend-Benutzer einrichten

1. neue Seite einfügen an beliebiger Stelle einfügen (am besten direkt als Unterseite der Seite, die das Root-Template enthält)
2. Seiteneigenschaften:
   - Type: "SysFolder"
   - Contains plugin: "Website users"
   - speichern und schließen
3. Übergeordnetes Template -> Constants öffnen
   -> "styles.content.loginform.pid = 27" (27 ist die id des SysFolders, der die FE-User enthält)
4. gute Übersicht über alle Website user und Website usergroups -> Modul:List des SysFolders
5. im SysFolder einen neuen Datensatz anlegen -> Website usergroup (wenn noch nicht geschehen)
6. im SysFolder einen neuen Datensatz anlegen -> Website user

Eine Seite inkl. Unterseiten nur einer bestimmten Website-Usergroup freigeben

1. Seiteneigenschaften der zu versteckenden Seite

2. General Options (continued) -> Usergroup wählen, für die dieser Bereich offen sein soll

3. nun sehen nur noch die entsprechenden User dieser Gruppe den Link und diese Seite