4. Tag TYPO3, DO 13.11.2014

TYPO 3
Burkard Balzer


Wir starten die xampp-Verknüpfung auf dem Desktop, legen im Ordner htdocs den neuen Ordner "tag03" an, entpacken die typo3_src-6.2.6.zip und ziehen die Dateien in den Ordner tag03 und geben dann im Browser localhost/tag03/ und gehen durch die Installation von typo3
1) contigue
2) Username: root, kein Passwort vergeben - contigue
3) Or create a new database: tag04 - contigue
4) Username: admin, Passwort: , Haken bei show passwort setzen - contigue
5) Haken lassen bei Yes, download the list of distribution (vorgefertige Seiten) - open the backend - Login und erscheint Oberfläche/Backend von TYPO3
im linken Bereich Werkzeuge - Admin tools - Language - bei german Haken setzen und update from repository anklicken und es wird rechts alles durchgelaufen, Meldung ok und dann in User Tools unter User settings oben auf admin klicken und in der Dateimaske die Spreche auf german umstellen und speichern (Diskette), den Browser neu laden (klick auf den runden Pfeil oder F5)

unter Template eine neue Seite anlegen mit Namen home und rechte Maustaste aktivieren,
Template für neue Website erstellen  anklicken, oben im Menüpunkt umstellen auf info/bearbeiten anklicken, auf den Bleistift Setup klicken, oben im Bearbeitungsbereich den Button "Web-Seite anzeigen" anklicken und neues Browserfeld erscheint mit der Website (Frontend), mit der rechten Maustaste Seitenquelltext anzeigen lassen und sieht die Eingaben.

über links Funktionen - rechte Seite mehrere Seiten erzeugen umstellen und dann unter home
Seite 1: start
Seite 2: unter uns
Seite 3: neues
Seite 4: kontakt
Standard lassen und Seiten anlegen und erscheinen die Seiten wurden erzeugt!
unter dem Button home erscheinen die Unterseiten
(von links nach rechts) bei Template und home und "edit the whole template record" anklicken, unter verfügbare Objekte: CSS Styled Content (css styled content) auswählen, Button Datei speichern und schliessen,
aus dem download-Ordner die ernerald2.zip-Datei entpacken und öffnen Ordner htdocs/tag04/filedamin  und neuen Ordner "templates" anlegen und die Dateien einfügen, dann in typo3 unter template (links) - home (mittig) im Setup (rechts) einsetzen:
# Default PAGE object:
page = PAGE

page.stylesheet = fileadmin/templates/style.css

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

im htdocs-Ordner/tag04/fileadmin/templates die index.html-Datei mit rechter Maustaste und "edit with notepad" öffnen und  in der Zeile 23 einfügen: <!-- ###DOCUMENT### begin --> sowie Zeile 111: <!-- ###DOCUMENT### end --> speichern und Datei schließen  
= Subpart für Orientierung von - bis
dann in typo3 unter Template/home/setup-Bereich einfügen:
page.10.workOnSubpart = DOCUMENT, speichern und im Browser ansehen

im htdocs-Ordner/tag04/fileadmin/templates die index.html-Datei mit rechter Maustaste und "edit with notepad" öffnen  im Bereich: <div id="content"> die Zeile 45 bis 73 löschen und neu in Zeile 45  zwischen <div id="content">  (Zeile 44) und </div> (Zeile 46) eingeben und strg+s abspeichern:  
 ###CONTENT###     = setzen eines Markers
dann in typo3 unter Template/home/setup-Bereich einfügen:
page.10.marks.CONTENT < styles.content.get, speichern und im Browser die start-Seite ansehen

im htdocs-Ordner/tag04/fileadmin/templates die index.html-Datei mit rechter Maustaste und "edit with notepad" öffnen und die Zeilen 49 bis 98 löschen, und in der Zeile 49 eingeben: vor <div id="sidebar"> ###SIDEBAR### und nach </div>, speichern und Datei speichern
dann in typo3 unter Template/home/setup-Bereich einfügen:
page.10.marks.SIDEBAR < styles.content.getRight, speichern und im Browser die start-Seite ansehen

in Template/home umstellen auf Template-Analyse und die EXT:css styled content/static/-Datei ansehen und dazu bis zum Setup-Bereich runterscrollen

Einstellung auf Seite/home button oben im Bearbeitungsmenü "Seiteneigenschaften bearbeiten" anklicken und dann den Typ: Standard auf Verweis setzen, speichern, unter Verweismodus:
erste Untereite der aktuellen Seite einstellen, speichern und schließen

im htdocs-Ordner/tag04/fileadmin/templates die index.html-Datei mit rechter Maustaste und "edit with notepad" öffnen und das Menü auskommentieren:
<div id="menu">
           <!-- <ul>
                <li class="current_page_item"><a href="#">Homepage</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Photos</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>-->
        </div>
und Marker setzen dh. einfügen unterhalb von <div id="menu">:  ###MENU###, speichern und in typo3 oben rechts neben admin den Blitz-Button und "Flush general caches" anklicken und browser neu laden und kontrollieren

dann in typo3 unter Template/home/setup-Bereich im oberesten Bereich einfügen:
lib.menu = HMENU
lib.menu {
  1 = TMENU
  1 {
    wrap = <ul> | </ul>
    NO.wrapItemAndSub = <li> | </li>
  }
}
und unten einsetzen zwischen:
page.10.workOnSubpart = DOCUMENT

page.10.marks.MENU < lib.menu

page.10.marks.CONTENT < styles.content.get

dann in typo3 unter Template/home einen neuen Ordner oben im Bearbeitungsbutton anklicken und runterziehen auf NEW Typo3 site und mit Namen "TS" (Typosricpt) versehen, im rechten Bereich "klicken Sie hier um ein Erweiterungstemplate zu erstellen. 
im Home - Setup den Bereich markieren und strg+x = ausschneiden, speichern und im TS - Setup-Bereich mit Leertaste und strg+v einfügen, speichern und schließen
lib.menu = HMENU
lib.menu {
  1 = TMENU
  1 {
    wrap = <ul> | </ul>
    NO.wrapItemAndSub = <li> | </li>
  }
}
im TS-Ordner unter title den Namen ergänzen: "+ext menu" und speichern;
im rechten Bereich unter enthält gibt es unten links "+templates" anklicken und öffnet sich Menü mit Seitenbaum die "-ext menu anklicken

abändern den Pfad in der html-Datei (Zeile 41 und 55):
<div><img src="fileadmin/templates/images/img03.png" width="1000" height="40" alt="" /></div> 
<div class="container"><img src="fileadmin/templates/images/img03.png" width="1000" height="40" alt="" /></div>
alle caches löschen in typo3 und im browser die Startseite neu laden und kontrollieren, ob sich die Balken gebogen haben!

Das Wrap-Prinzip:
Die Anweisung WRAP ermöglicht es, einen vordefinieten Text an eine bestimmte Position in einem anderen Element einzufügen ( einzubinden). An die Stelle, an die eingefügt werden soll, wird mit dem Symbol "|" definiert.

im Browser localhost/ eingeben und erscheint Seite XAMPP für Windows
erst Sprache eingeben, und dann durchsehen
phpMyAdmin = Datenbank, die wir schon erstellt haben von den einzelnen Tagen
Was ist eine Datenbank?
als erstes Tabelle erstellen zB. Orte/Standorte ist gleich je eine Zeile
zweite Tabelle: Kurse und diese durchnommieren
dritte Tabelle: Kursteilnehmer
könnte man auch mit Excel machen - aber nächste Tabelle würde schon Probleme machen:
vierte Tabelle: 2(Standort)  1(Teilnehmer) 1(Kursnr.) - diese Nummern dienen als Orientierung
Vorteil einer Datenbank: es wird alles zentral in einem Datensatz verwaltet!
(Zeitersparnis, Vermeidung Fehler und Anlage von doppelten Daten)
und nutzen noch die Programmumgebung (PHP)

Typo3 = Datenbank und PHP