Mitschrift 09.05.2014

TAG 2

Wiederholung von gestern:
dynamische website: php und mysql - dafür brauchen wir lokalen Webserver XAMPP - auf den Computer runterladen.
Einstellungen in XAMPP - mit dem Control Panel statern wir jeden Morgen das System - Apache (php) und MySQL

php = Programmiersprache - php.ini-Datei mit individuellen Einstellungen ersetzen.
Bearbeitungszeiten wurden darin geändert, weil wir noch länger brauchen!

Achtung: zu Hause Skyope und Teamviewer beenden, bevor wir XAMPP starten.

Typo3.org-Seite hatten wir uns gestern angesehen.
Association in der Schweiz - bietet verschiedene Releases an, welche auch supported und upgedated werden. Wir haben mit der 6.1 gestartet.

Unterscheidung der verschiednen Packages:
Kopmplettumgebungen - Intorduction
Governement für Deutsche Verwaltung
Source = php.-Umgebung und Dummy die Testumgebung
Blank package

Alles entpacken und in das Verzeichnis einlegen

Das üben wir dann nochmal und legen einen tag02 in htdocs an.

Hinweis!!!!
dann die typo3 source+dummy-zip Datei in den neuen Ordner ziehen (Achtung nicht copy&past!!!) Mit der Maus rüberziehen, da es eine visuelle Entpackung ist (über drag & drop).
2. Hinweis: nicht von einem Tag in den anderen kopieren! Denn dann haben wir die gleiche Datenbank und das ist schlecht, da dann, wenn ich eine Seite lösche, sie in beiden Ordnern gelöscht wird.

So, dann haben wir die Sache entpackt.
Diese Version hat noch keine Datenbank. Die Datenbank ist nicht in dem htdocs Ordner, sondern in einem anderen Ordner abgespeichert - wie wir die Datei mitnehmen können und lokal abspeichern, erfahren wir am Montag
ERGO: PHP und Datenbank sind an zwei verscheidenen Orten gespeichetr!

Jetzt beginnen wir die Installation:
Im Browser: localhost/tag02 angeben
ENABLE_INSTALL_TOOL als Sicherungsdatei zum Hacherschutz im htdocs Ordner in den typo3conf-Ordner kopieren
(Es ist immer die gleiche Datei, aber die Erstellungszeit ist wichtig! localhost/tag01/typo3/install nach jeweils einer Studne, muss ich eine neue enable Datei zur Sicherung einfügen!!!!)

Jetzt Browser aktualisieren
auf button Continue

Dann Username: root
Passwort: leer lassen
Host; localhost

Continue-Button

(Hinweisbeim Login in die Datenbank als Admin: Login: Admin & Passwort: password)

Dann Datenbank im zweiten Schritt anlegen:
erster Radiobutton: tag02 (also namen des Verzeichnisses eingeben)
und Continue
Dann kommt schon die Congratulations.

Installationsbereich anschauen: Configure typo3

Basic Configuration oben links

Alle grünen Infos sind super!

Die Schrift im gelben Feld muss im Kasten sein, wenn sie außerhalb des Kastens ist, dann muss ich eine ander Schrift(größe) wählen.
Die gelbe Warnung "no ImageMagick Installation" hebeln wir später aus, es ist eine Info, dass wir eine Grafiksoftware installieren müssen - dazu im Verlauf des Kurses mehr.

Backend

wird standardmnäßig angegeben-
Dies ist unsere Hauptarbeitsumgebung!
Wir kommen auch ins Backend, wenn wir in den Browserr eingeben: http://localhost/tag02/typo3

Oder direkt in die Grund-Installation reinkommen:
http://localhost/tag02/typo3/install
um mit der Konfiguiration weiterzuarbeiten

jetzt als Passwort das markierte joh316 eingeben!

Sprache des Backends verändern:
Language: German und dann update

Frontend ist im Gegensatz dazu, das, was der User sieht

Sprachpaket_ Odener l10n - hier werden alle Sprachpakete angezeigt:

Also Backend - User Tool - language - german und auf Diskette speichern

Über F5 komm ich dann wieder auf die Startseite des Backends - öffnet den kompletten Refresh des Users! - Immer bei neuen Einstellungen F5 drücken!

Warum Sprachen auswählen - Wenn ich verschiedene Redakteure habe, dann kann ich die Sprachen eingeben, damit sie das backend in ihrer Sprache bedienen können.

Nebeninfo - typo3 - certified integrator - Prüfung durch die Association

=> Seite:
dreigeteilter Bereich
1) Modul-/Werkzeugbereich (links)
2) Strukturbereich/Navigationsbereich (Mitte)
3) Arbeitsbereich/Detailbereich (rechts)

jeder menüpunkt wird eine Seite sein - hier wird ein Baum entsetehen
Strukturbereich in der Mitte , in dem ich über drap&drop die Elemente aus der Leiste verschieben kann - Tooltipps geben weitere Infos.
Wir legen einen Seitenbaum an:

Das rote Schild an der Seite, das aussieht, wie ein Stopschild, bedeutet, dass die Seiten verborgen sind - im Frontend nicht zu sehen - also angelegt, aber nicht ansteuerbar.
wie mache ich die Sieten sichtbar?

auf das symbol klicken und die Seite aktivieren
oder Seitenb direkt so anlegen, dass sie sichtbar sind - das wird uns später gezeigtr

Die Homeseite wird keine Ansteuerbare Siete sein, sondern nur zur administration sein - alle Seiten sind Unterseiten zu Home und alles Standardseiten

Home vererbt alle Eigenschaften und ist daher für die konfiguiraztion aler Seiten wichtig
Eine Siete mit Unterseiten kann ich nicht in den Papierkorb ziehen. - Recursives Löschen - man kann diese Schutzfunkltion in den persönlichen Einstellungen
(Reiter - Bearbeiten und erweiterte funltionen - Rekrusives löschen) deaktivieren und dann auf die Diskette klicken zum Speichern

Mit F5 die Änderung speichern!!!

Wenn wir jetzt mal schauen wollen, wie es im Frontend aussieht
KLick auf das Icon - Blatt mit dem Auge

Template - Wir können eine Konfiguration in Typoskript erstellen.
Das ist ne Mustervorlage, die wir vervielfältigen
Wir erhalten eine umgebung, mit der wir einen bestimmten wiederkehrenden bereich im frontend herstellen.

Setup auswählen und man klann eingeben

TYPOSkript

Buch Seite 121 - 164

Typoskript ist eine Konfigurationssprache, keine Programmiersprache

es kann keine komplexen Programmabläufe darstellen
Verändert nur konkreten Eigenschaften

(wie CSS bei HTML)
Folgende Fehlermedlung kommt jetzt beim Klick auf das Blatt mit dem Auge

Uncaught TYPO3 Exception

#1294587217: The page is not configured! [type=0][]. This means that there is no TypoScript object of type PAGE with typeNum=0 configured. (More information)

TYPO3\CMS\Core\Error\Http\ServiceUnavailableException thrown in file
C:\xampp\htdocs\tag02\typo3\sysext\frontend\Classes\Controller\TypoScriptFrontendController.php in line 2368.

2 TYPO3\CMS\Frontend\Controller\TypoScriptFrontendController::getConfigArray()

C:\xampp\htdocs\tag02\typo3\sysext\cms\tslib\index_ts.php:

00167: // Get config if not already gotten
00168: // After this, we should have a valid config-array ready

00169: $TSFE->getConfigArray();

00170: // Setting language and locale
00171: $TT->push('Setting language and locale', '');

1 require("C:\xampp\htdocs\tag02\typo3\sysext\cms\tslib\index_ts.php")

C:\xampp\htdocs\tag02\index.php:

00039:  ->redirectToInstallToolIfLocalConfigurationFileDoesNotExist();
00040:

00041: require(PATH_tslib . 'index_ts.php');

00042: ?>

page = PAGE (Abbild) => Computersprache: Instanz
Alles was wir machen, beruht nun auf dieser Page!

Aus einer KLasse entsteht ein Objekt (Objekte immer groß schreiben!!! und sie müssen blau erscheinen)

Was ist Objekt PAGE?
page.10 = TEXT
page.10.value = Hallo Feld!

HTML-Grundgerüst: HTML, HEAD, BODY wird mit dem Page erzeugt! :)

Warum 10?
Damit wir noch Puffer davor und danach haben - wenn ich nachher was eingfügen möchte.
Wir erzeuigen eine Struktur, die immer wieder zu öffnen ist

Typo3-Basics:
Kommentierungsmöglichkeiten im SCKRIPT:
# Einen einzeiligen Kommentar

/*
Längerer Kommentar, wie im CSS
Alles muss eine Eigene Zeile haben!!!Sonst gibt es Probleme
*/
Auch kann ich keinen Kommentar in eine Zeile schreiben, die Schon ein Objekt beinhaltet

Quelltext des TYPOscripts

# Einen einzeiligen Kommentar

/*
Längerer Kommentar, wie im CSS
Alles muss eine Eigene Zeile haben!!!
*/

page = PAGE

page.10 = TEXT
page.10.value = Hallo Feld!

page.20 = TEXT
page.20.value = Das ist Typoscript!

Ausgabe:
Hallo Feld!Das ist Typoscript!

Die Reuihenfolge im Quelltext ist egal, es geht nach der Nummerierung!

Wir wollen einen zeilenumbruch erzeugen.
Wir setzen einen Paragraphen - Wrap = Leinwand, die estwas umschließt.
Das Pipezeichen | (ALT Gr und < drücken )ist der Platzhalter für den Value, was dort stehen soll
HTML-Quelltext:

Ein Beispiel<p>T3-Begrüßung:Hallo Feld!</p>Das ist Typoscript!

Wie bekomme ich ein Leerzeichen?
Über non breaking space:   (entities = Sonderzeichen)
page.10 = TEXT
page.10.value = Hallo Feld!
page.10.wrap = <p>T3-Begrüßung:  | </p>

Wie bekomme ich eine h1 hin?
page.20 = TEXT
page.20.value = Das ist Typoscript!
page.20.wrap = <h1>|</h1>

Und jetzt noch page.5 in einen paragraph und bold:
page.5 = TEXT
page.5.value = Ein Beispiel
page.5.wrap = <p><b>|</b></p>

Quelltext:

<p><b>Ein Beispiel</b></p><p>T3-Begrüßung:&nbsp;Hallo Feld!</p>

<h1>Das ist Typoscript!</h1>

Tabelle erstellen:
neue Schublade öffnen:
COA = Content Object Array (Inhalts Objekte Array)
Alsi Plastiktüte (für Klausur!)

Um werte einzugeben, setzen wwir die nöchste WEbene ein - wir beginnen z uverschachteln!
Quelltext - Taposkript
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>

Ein Beispiel
T3-Begrüßung: Hallo Feld!

Ausgabe:

Das ist Typoscript!

Nun sollen wir diese Tabelle nachbauen:
Ein Beispiel
T3-Begrüßung: Hallo Feld!

Das ist Typoscript!

A	C
D	B

Typoskript:
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 = C
page.30.10.20.wrap = <td> | </td>

page.30.20.10 = TEXT
page.30.20.10.value = D
page.30.20.10.wrap = <td> | </td>

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

2 Schreibweisen für die Tabelle:
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 = C
page.30.10.20.wrap = <td> | </td>

page.30.20.10 = TEXT
page.30.20.10.value = D
page.30.20.10.wrap = <td> | </td>

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

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>
}

Die blaue Variante ist die Variante, die anfangs leichter erscheint, da sie sich ans HTML lehnt
Die grüne Variante ist die Variante, die leichter zu kopieren und abzuändern ist

Kopieren-Operator: <
Also bspw. eine Tabelle kopieren:
page.40 > page.30
Ausgabe:
Ein Beispiel
T3-Begrüßung: Hallo Feld!

Das ist Typoscript!

A	B
C	D

A	B
C	D

Und Werte verändern: (TippEx verwenden ;) )
Da alles kopiert wurde, kann ich jetzt einzelnd die Zeile überschreiben.
Ich verändere jetzt also die Zeilen mit den Werten:
page.40 < page.30

page.40.10 {
10.value = die
20.value = Kopie
}

A	B
C	D

die	Kopie
C	D

=< ist ein Referenzieren-Operator

Ergo page.50 merkt, dass page.30 sich verändert hat!
page.50 =< page.30
page.50.20 {
10.value = Neuer
20.value = Wein
}

page.30.10 {
10.value = Alter
20.value = Schlauch
}

Alter	Schlauch
C	D

die	Kopie
C	D

Alter	Schlauch
Neuer	Wein

Allerdings: Wenn ich jetzt was in

Was machen wir heute:
Wir werden heute unser erstes Typoscript schreiben und erfahren wie ein Redakteur arbeitet und warum so ein CMS wirklich wichtig ist!

Klausur: Einfach: Multiple Choice

http://wiki.typo3.org/De:Ts45min