Frau Kalke's Blog - Comcave: CMS (TYPO3) - Kurs Tag 3

Mitschrift 12.05.2014

TAG 3

Wiederholung der grundlegenden Infos:

XAMPP herunterladen und installieren.
wir müssen die php.ini ändern

nicht selbst im Einzelnen sondern
eine von burkard bearbeitet ini-Datei runterladen und ersetzen
ist Steuerdatei für Apache und PHP, die auf dem Rechner installiert ist.
Windows-Explorer installieren

c-Verzeichnis > xampp > php.ini-Datei ersetzen!
Sonst bekommen wir Timeout nach 30 Sekunden angezeigt - wir sind eben noch Anfänger und einige Anwednungen brauchen länger als 30 Sekunden.

Dann das xampp Control Panel öffnen und Apache und MySQL starten, warten, bis sie grün markiert sind.

wenn apache nicht grün, sondern gelb markiert bleibt, dann evtl skype schließen - diese beiden Programme kollidieren.

typo3.org öffnen, und typo3 kostenlos downloaden

Seite öffnen
auf Download klicken (hier sind verschiedene Releases - ältere und neuere)
wir nehmen nicht die ganz neue, sondern 6.1 als Einstiegsversion - dieses ähnelt den älteren Systemen, die bei den meisten Unternehmen Anwendung finden
Source+Dummy-Paket runterladen (zip-Datei) = Basiseinstellungen und Startumgebung
Wie installieren wir das?

windows-Explorer > xampp > htdocs Ordner in Favoriten schieben
> rechte Maustaste und neuer Ordner tag03 anlegen
die Dateien aus dem typo3-Zip-Ordner in den tag03-Ordner ziehen bzw. speichern
dann in den Browser: localhost/tag03 eingeben
Es folgt eine Fehlermeldung - um dies zu lösen, im htdocs-Ordner > tag03 > typos conf-Ordner eine textdatei anlegen, die ENABLE_INSTALL_TOOL heißt - dazu bitte dann .txt, also die Endung löschen. Diese Datei ist eine Sicherungsdatei, die vor Hackerangriffe schützt. ACHTUNG: Immer ohne Dateiendung!

Jetzt kann ich den Browser aktualisieren: localhost/tag03 und die 3 Schritte-Installation der Database durchgehen:

continue-Button im 1. Schritt klicken
Username: root // password: leer lassen // Host: localhost (Zugriff auf Datenbank eingestellt)
Schritt 2: Create new Database - tag03
continue-Button

wenn ich hier was falsches eingebe und eine Fehlermeldung kommt, dann wieder auf die 1 drücken und die Seite aktualisieren!!!

Schritt 3: Default Typo3 Tables
Import-Button klicken
Congratulations! :)

Jetzt auf Configure Typo3

Security-Warning, dass wir kein Passwort vergeben haben ist erstmal nicht wichtig, da wir ja erstmal nicht im WWW sind, sondern alles erstmal auf dem localen Rechner abgeht.
Basic Configuration:

gelbe Fehlermeldungen beachten - aber an sich ist das Meiste grün ;)
Site Name angeben (dieser erscheint im Browser oben als Reitername

und dann noch (0) GIF zu (1) PNG ändern
und speichern

Jetzt auf den Backend admin-Link gehen und wir sind im Backend, um zu konfigurieren :)

admin & password eingeben, login-klicken und wir sind bereit :)- > Rohinstallation des Typo3!

Hinweis: localhost/tag03/typo3/install -> so komme ich direkt zu der Login-Seite!

Spracheinstellungen im Backend ändern auf deutsch.
Language - German anklicken > update repository klicken
Usersetting -personal data - language zu deutsch ändern - mit der Diskette abspeichern & F5 drücken.

So laden wir Sprachpakete ins Typo3 rein - standardmäßig ist nur Englisch vorinstalliert.
Pfad: htdocs - tag03 - typo3conf - l10n -> hierein werden die Sprachpakete geladen.

=> Unsere Grundinstallation ist durcgeführt

Template: Home - Konfiguration des Typo3 ändern/einstellen.
Vorlage - immer wiederkehrende Einstllungen einzustellen - standardisiert und zusammengefasst, für eine gleichmäßige Darstellung im Frontend

Was macht Typo3: Stellt Inhalte bereit - es verwaltet Inhalte (redaktionelle Beiträge)
So werden sie in eine fertige HTML-Umgebung eingegeben. Es positionbiert an der richtigen Stelle
Dies geschieht durch:

KonfigurationsMenü
Typoskript

Es ist ein Verwaltungswerkzeug, kein Designerwerkzeug!

Home ist ganz wichtig für uns - es enthält die grundlegende Konfiguration, aber enthält keinen Inhalt!!! Default Root Template!!!

Jetzt haben wir die Möglichkeit im Setup unser Typoskript einzustellen!

Was haben wir im Typoskript gemacht:

Kommentare eingeben

# für einzeilige Kommentare
/*
mehrzeilige
Kommentare
*/
Tipp: Immer eine neue Zeile beginnen, bei Neueingaben

Page (Schrank)

wir verändern Eigenschaften
Hund und Wauzi beispiel - Hund hat ein Fell und Wauzi hat die Felleigenschaft Farbe = braun
Unser Schrankelement gibt uns die Möglichkeit Schubladen zu füllen
mit page wird eine Struktur aufgebaut
page = PAGE
Schubladen werden in 10er-Schritten genutzt, damit man Änderungen dazwischen eingeben kann
TEXT und value
Wertebeschreibung wie in HTML
Tabelle aufgebaut mit Verschachtelung - 2 Schreibweisen (COA)- Sammlung von Unterstrukturen

verkürzte Schreibweise durch Klammern oder
Schreibweise wie in HTML mit tr und td

#Das PAGE-Objekt erstellt das HTML-Grundgerüst und muss instanziert
#werden.
#Ohne PAGE wird nur eine Fehlermeldung angezeigt
page = PAGE

#Die Eigenschaft der Nummerierung "10, 20 etc" aus dem PAGE-Objekt
#ermöglicht es uns in weiteren Ebenen zusätzliche Obejekte zu
#instanzieren
page.10 = TEXT
#Es können nun die Eigenschaften aus "TEXT" genutzt werden (value, wrap)
#"value" bietet die Möglichkeit Werte zu übernehmen
#"wrap" umschließt dann den value-Wert mit einer HTML-Struktur
page.10.value = Hallo Feld!
page.10.wrap = <p>T3-Begrüßung: | </p>

page.20 = TEXT
page.20.value = Das ist Typoscript!
page.20.wrap = <h1> | </h1>

#Die Nummerierung ist für den sequentiellen Aufbau des HTMLs verantwortlich
page.5 = TEXT
page.5.value = Ein Beispiel!
page.5.wrap = <p><b> | </b></p>

#Die "COA" bietet die Möglichkeit über ein Array eine Verschachtelung
#in verschiedenen Ebenen aufzubauen
#Jede Ebenenvertiefung wird durch einen Trennpunkt erzeugt
page.30 = COA
page.30.wrap = <table border="1" width="150"> | </table>

page.30.10 = COA
page.30.10.wrap = <tr> | </tr>

page.30.20 = COA
page.30.20.wrap = <tr> | </tr>

page.30.10.10 = TEXT
page.30.10.10.value = A
page.30.10.10.wrap = <td> | </td>

page.30.10.20 = TEXT
page.30.10.20.value = B
page.30.10.20.wrap = <td> | </td>

#Wenn gleiche Ebenen angesprochen werden, können sie ausgeklammert
#werden. Es muss aber in der geschweiften Klammer eine Zuweisungs-
#instanz vorhanden sein:
# "10" = TEXT
page.30.10 {
10 = TEXT
10.value = A
10.wrap = <td> | </td>

20 = TEXT
20.value = B
20.wrap = <td> | </td>
}

page.30.20 {
10 = TEXT
10.value = C
10.wrap = <td> | </td>

20 = TEXT
20.value = D
20.wrap = <td> | </td>
}
#Der Kopierenoperator erstellt eine selbständige Kopie der
#kompletten Umgebung. Nachträgllich Änderungen im Original wirken sich nicht
#in der Kopie aus.
page.40 < page.30

#In der Kopie können dann einzelne Zeilen geändert werden
page.40.10 {
10.value = die
20.value = Kopie
}

#Beim Referenzieren "=<" bleibt eine Verknüpfung zu dem Original
#vorhanden
page.50 =< page.30
#Nur manuelle Veränderungen in der referenzierten Instanz lösen
#diese Verknüpfung und unterbinden so die Weiterreichung der
#späteren Originaländerung.
page.50.20 {
10.value = Neuer
20.value = Wein
}
#Ein nachträglich Änderung wirkt sich auch auf die neue Instanz aus
page.30.10{
10.value = Alter
20.value = Schlauch
}

page.30.20{
10.value = jetzt
20.value = leer
}
#Das Löschen ">" eines Objektes löscht alle, damit verbundenen,
#Darstellung asu dem Arbeitsspeicher. Eine weitere Darstellung
#des Originals und der Referenz ist nicht mehr möglich
page.30>

Zuweisungsoperatoren page = , value, wrap
Kopieren-Operator (<):

wir erschaffen gleiche Strukltur und können werte überschreiben

Referenzieren-Operator (=<):

der Zusammenhang bleibt und so verändern sich die Eingaben entsprechend gleich wie Geschwisterelemente
Nehme ich also Änderungen am Original vor, so verändert sich das referenzierte Geschwisterelement entsprechend.

Löschenoperator (>)

hier wird auch nochmal ein Unterschied zwischen kopier- und referenzier-Operatoren sichtbar:

kopierte Elemente werden nicht mitgelöscht, sondern bleiben erhalten
referenzierte Geschwisterelemente werden mit der Löschung des referenzierten Originalelements auch gleich mitgelöscht.

Wie arbeitet ein Redakteur:
Neue Seite anlegen:
Standardelement unter Home einfügen (rechte Maustaste - aktivieren, Doppelklick: Name ändern)

Artikel eingeben
links: Seite
mitte: start
rechts:Spalte Normal:

Mausklick auf das grüneymbol und es öffnet sich ein neues Fenster - Es werden uns Inhaltseölemente angezeigt
Wir klicken das textelement an: geben Überschrift und Text ein und speichern es.
Damit wird es als Datensatz in der Datenbank gespeichert
Ergebnis: Fehlermeldung, da Typoskript herausgenommen ist - erst die Typoeinstellungen vornehmen:
Home - Template - Home - Info/ Bearbeiten auswählen - Setup - Hier können wir das Typoskript eingeben und das Erlernte einsetzen:
page = PAGE (wir legen von unserem Grundobjekt eine Instanz an und füllen die Schubladen:

page = PAGE

page.10< styles.content.get

Wenn wir dann im Browser: localhost/tag03 öffnen, erscheint eine weiße Seite und der Seitenquelltext zeigt ein Grundgerüst:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<!-- 
 This website is powered by TYPO3 - inspiring people to share!
 TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
 TYPO3 is copyright 1998-2013 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
 Information and contribution at http://typo3.org/
-->



<title>Home</title>
<meta name="generator" content="TYPO3 6.1 CMS">

<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_8b9c2e8d89.css?1399883031" media="all">


</head>
<body>

</body>
</html>

Warum sehen wir denn eine weiße Seite und keinen text?
Weil wir noch weitere Schritte vorgeben müssen:
Es müssen weitere 2200 Zeilen geschrieben werden,damnit IOnhalt gelesen werden kann.
Wir binden aber jetz tfertige Typoskript inhalte ein:
Vollständigen Template-Datensatz bearbeiten
Reiter: Enthält
CSS Styles Content - schreibt automatisch 2200 Zeilen!

Hinweis: Manchmal muss man alle Caches löschen - dazu gibt es oben in der Leiste einen Blitz!

Hinweis: Wenn ich aus Versehen ein Root-Template für eine Unterseite angelegt habe (dieses überschreibt das Originaltemplate von Home), kann ich es über den Menüpunkt "Liste" löschen!

-> Fehler verhindern: Immer von links über die Mitte nach rechts gehen - in den 3 Eingabenereichen

Template-Analyse über Template - Home - Default Root Template - EXT:css_styled_content/static/ -hier sehen wir, was schon alles geschrieben ist!

-> Alles das wird über styles.content.get im Frontend sichtbar gemacht!!!

Zusammenhang einer Datenbank

Die Seite ist wie eine Tabelle aufgebaut.

Entities: Maskierungen für Sonderzeichen in HTML

Inhalte sichtbar machen:

So - jetzt tragen mal in alle Bereice der Seite was ein.
also links, mitte, rechts und Rand

Eine Layout-Template einfügen:

emerald2.zip (diese Datei haben wir vom Dozenten erhalten)
Was ist da drin?
Ein einfach strukturiertes Template: Images, index.html lizenzbedingungen...

Pfad: Computer - xampp - htdocs - tag03 - fileadmin - templates (diesen Ordner erstellen wir neu)
Hier können wir externe Dateien aufnehmen - ordner erstellen und templates nennen.

jetzt ziehen wir die emerald2-zip Inhalte in den neuen Ordner, um das Layout zu übernehmen
-> wir haben ein indivuduelles Designtemplate (von freecss heruntergeladen)

Einbinden des gespeicherten Layouts

in unseren Schrank einbauen: Template - Home - Setup
page = PAGE

page.10 = TEMPLATE (Objekt - wir können ein Template einbinden in die Umgebung)
page.10.template (dazugehörige Eigenschaft)

haben wir ein Template

aus CSS oder
ein externes?

Es ist ein externes, also:
Eigenschaft: externe Datei:

page = PAGE

page.10 = TEMPLATE
page.10.template = FILE (für externe Dateien)
page.10.template.file = fileadmin/templates/index.html (Pfadangabe) (Eigenschaft: file)

- > bei der Ausgabe sind wir in der HTML-Umgebung, wir haben keine CSS-Angaben gemacht.

Also müssen wir jetzt die CSS-Datei einbinden.
Die Darstellungseinstellungen sind nicht im Schrank (also body)
CSS-Angaben kommen in den Kopf (head)

Also auf den Schrank legen: unter page stylesheet einfügen:
(Eigenschaft aus page)
page = PAGE

page.stylesheet = fileadmin/templates/style.css

page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/templates/index.html

Fehler - Grundgerüst doppelt:

Wenn ich mir jetzt den Seitenquelltext anzeigen lasse, stelle ich fest, dass er zweimal das Grundgerüst html, head, body drin hat...
Lösung:
typo3-konform: Template bietet für diesen Fall eine eigene Eigenschaft an!
Camelcase - jedes neue Wort wird mit einem Großbuchstaben geschrieben!

page = PAGE

page.stylesheet = fileadmin/templates/style.css

page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/templates/index.html

page.10.workOnSubpart = DOCUMENT

jetzt die Index-html mit Notepad++ öffnen
Cursor hinter dem öffnenden Body platzieren (weil das Grundgerüst sonst doppelt ist) und folgendes einfügen:
 !!!Unbedingt mit C schreiben!
### interessieren Typo3 sehr - das sind Subparts, die TYPO3 lesen kann!
Dies ist das Zeichen für Typo3, dass es ab hier lesen soll. (Bereichskennzeichnung)
Jetzt noch das Gleiche vor das schließende Body.Tag, dann haben wir einen Bereich gekennzeichnet!

Achtung: manchmal können auch Darstellungsfehler behoben werden, wenn man den Cache löscht.

Jetzt den Firebug installieren, falls das noch nicht geschehen ist!!!

Google - firebug - addons - modzilla und dann installieren und aktivieren

Jetzt wollen wir unsere Inhalte sichtbar machen!

Dazu nutzen wir den Firebug

Im <div id="content"> setzte der Designer den Text ein - das müssen wir jetzt in der index.html suchen.

Dann den Inhalt des div-Containers con unten nach oben markieren (von oben nach unten, weil dann die Orientierung besser ist.
Und löschen mit Entfernen
Und dann eingerückt ###CONTENT### (Platzhalter, der später mit unseren Inhalten ersetzt werden soll = Marker!!!) eingeben
Hinweis: groß schreiben - dann findet man die TYPO3 Sachen besser

Jetzt wirder in das Typoskript rein:
page = PAGE

page.stylesheet = fileadmin/templates/style.css

page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/templates/index.html

page.10.workOnSubpart = DOCUMENT
page.10.marks.CONTENT < styles.content.get

hier haben wir dann styles.content.get kopiert!!!

Wenn wir jetzt nicht unsere Texte sehen, dann liegt es evtl daran, dass wir uns die Home und nicht die start-Seite ansehen ;)