CMS (TYPO3) - Kurs Tag 4 - Menüsteuerung, DatenbankDump (phpMyAdmin), Übertragung von Datenbank & Verzeichnis

Mitschrift 13.05.2014

TAG 4

Was machen wir heute?

• Wiederholung
• Menü steuern
• Typo3-System installieren (für Oma als Geschenk) - was können wir schon...
• Am Ende des Tages haben wir Basis 1,2 durchgearbeitet :)

Wiederholung:

• Xampp bietet uns die Möglichkeit die Umgebung für unser typo3 zu starten.
• browser: local/host/tag03/typo3
• Bis zu der Stelle von gestern, ist unser System schon 300/400€ wert :) - wir können schon was :)
• Typoskript haben wir gestern auf HOME eingestellt - damit können wir viel steuern.
• Wir wollten das HTML und CSS-Skript von einem anderen Designer einbinden
• eigenes Verzeichnis in htdocs>tag?> fileadmin> templates
• hier könnten wir die zip-Datei emerald2.zip speichern
• subpart sind Marker, die dann die Texte ersetzen - also hier soll der Text hin (wie ein Platzhalter)
• die index-html liefert das GRundgerüst in HTML mit diversen Containern
• wir können dann die vorgegebenen Textbereiche durch unsere Texte ersetzt werden.
• HTML ist das Grundgerüst
• CSS ist die Formatierung/ das Design - das haben wir im Tposkript eingebunden
• wir müssen also sagen, was wir aus index.html gebrauchen können. Dazu öffnen wir die index-Datei mit dem Notepad++ (wenn rote Zeilen im notepad++ angezeigt werden, heißt es, dass etwas doppelt ist
• wir müssen zunächst den umschließenden Subpart suchen (der Teil zwischen dem öffnenden und schließendem body-Tag
• diesen Bereich kennzeichnen wir mit <!-- DOCUMENT --> an den beiden genannten Stellen.
• page.10.workOnSubpart = DOCUMENT im Typoskript eingeben und speichern und im Frontend checken (Seitenquelltext anzeigen - die roten Doppelungen sind weg)
• ACHTUNG: Jetzt aber auf der Start-Seite ansehen! Auf der Home -Seite darf der Redakteur nichts eingeben
• Dann binden wir die CSS Styled Content über Template - Home -  Info/Bearbeitern / Vollständigen Template-Datensatz bearbeiten - Reiter Enthält - CSS Styled Content css styled content  (2200 Zeilen) - ohne das sehen wir keine Inhalte!
• Jetzt setzen wir Marker: styles.content.get (damit laden wir uns 2200 Zeichen Typoskript ein)
• Nun wollen wir unseren Text einsetzen. dazu suchen wir über den Firebug den gewünschten Bereich
• gehen ins Notepad, suchen die entsprechende Stelle, löschen den Inhalt aus dem Element und schreiben in die html-Datei an der Stelle ###CONTENT### (oder SIDEBAR oder oder oder, Hauptsache '### INGROSSBUCHSTABEN###' in den entsprechenden div-Container oder das entsprechende html-Element
• page.10.marks.CONTENT < styles.content.get
• page.10.marks.SIDEBAR < styles.content.getRight
• -> Woher weiß ich, wie das heißt?
• über: Template - Home - Template-Analyse - EXT:css_styled_content/static/  - Global...
• = Wir sagen, wo (in welchem Bereich) in der index.html Datei wir unseren Text platzieren wollen.
• Somit haben wir die Struktur des Designers übernommen mit den dazugehörigen CSS- Formatierungen
• -> HTML & CSS macht unsere Texte hübsch - wir stellen als Redakteure einfach ein. 
• Wann schreibe ich styles.content.get, styles.content.getLeft, styles.content.getRight, styles.content.getBorder?
• hiermit (be-)schreibe ich, aus welcher Spalte meines Typoskriptes sich der Browser für die Ausgabe bedienen soll. Ich kann also über die Marker im html zuweisen, dass mein Text rechts im Browserefenster eines div-Containers gesetzt werden soll und dann den Content aus meiner linken Spalte einfügen über styles.content.getLeft - es ist möglich, aber sinnig ist das nicht - Sinnig wäre, die Inhalte, die rechts hinkommen sollen in der Ausgabe, auch in die rechte Spalte schreibe, content.getRight zuweise.
• ACHTUNG. Wenn wir was im HTML ändern, müssen wir die Caches löschen!
• Mögliche Fehler:
• OBJEKTE müssen immer groß geschrieben werden

Menüsteuerung

Mehrere Seiten anlegen

Funktionen - Home - Mehrere Seiten erzeugen

Klick auf Seiten anlegen
Dann sind direkt mehrere Seiten angelegt

Startseite benennen (da Home ja nur für Einstellungen/ Konfigurationen ist)

Das machen wir mit Hilfe eines Verweises:
Eigenschaften verändern über:

So kann ich alternativ Seiten anzeigen:
Home - Bearbeiten - Typ - Verweis

Verweismodus (Wo soll der User landen? erste Unterseite der aktuellen Seite) und Verweisziel

Zur Überprüfung: 
Seite  - Home - Blatt mit Auge und Tadaaaa - wir landen auf der nächsten Unterseite - der start-Seite :)

Menü erstellen

Wir sagen dem typoskript - bitte baue mir ein Menü
Ulli-Struktur - unordered List mit Listenelementen
<ul> <li></li> </ul>

Wir bauen diese Struktur mit Links auf
Ab ins Typoskript - template - home - info/bearbeiten - setup

Wir bekommen wir so eine Struktur/ Menü hin?
Die Erweiterung lagern wir vor - also vor page = PAGE

Die Erweiterungen nennt man Library (Begriff aus IT)
lib.menu = HMENU (Objekt: hierarchisches Menü - in Bezug auf die Baumstruktur und deren Reihenfolge - über- und untergeordnete Seiten in einer Hierarchie)

Eigenschaften vergeben:
lib.menu {
 1
}
Ausklammerfunktion mit der geschweiften Klammer: { - Bitte darauf achten, dass man die Klammern in eigene Zeilen setzt und Einrückungen zur besseren Übersicht verwenden)

Hinweis: Unser Ausgangspunkt ist Home - daher ist die Sichtweise von Home aus eine Ebene tiefer zu sehen: Daher tragen wir die 1 für eine Ebene tiefer ein.

Unsere Menüpunkte bestehen aus Texten, nicht aus Grafiken, also:

1 = TMENU


jetzt beginnen wir mit dem Aufbau des Menüs - umschließend - also wrap:

lib.menu = HMENU
lib.menu {
 1 = TMENU
  1{
    wrap = <ul> | </ul>
    NO
  {
}

Da wo das PIPe-Zeichen ist, kommen die Listenelemente hin.
NO steht für Normalzustand - so sieht sie standardmäßig aus (es gibt noch current & active)
-> Unterscheidung ist eine Klassenzuordnung

Ankertag in einer Li und das Word soll auch dargestellt werden:
Dafür gibt es einen speziellen wrap (NO.wrapItemAndSub), der das alles erkennt und kann :) Dieser ist intelligent und wird angewiesen die folgenden Schritte zu tätigen:

• Durchlaufe den gesamten Baum auf dieser Ebene
• schaue nach, welche Seiten es gibt
• für jede Seite lege mir einen Ankertag an (mit der zugehörigen ID)
• und schreibe mir das auf einen Namen
• Wenn ich auf den Namen klicke, dann zeige mir die Seite an

Wow - der kann aber viel!

Aber was macht er nicht? Das Li - müssen wir selber machen!

So - das ist die Angabe für unser Komplettes Menü:
lib.menu = HMENU
lib.menu {
 1 = TMENU
  1{
    wrap = <ul> | </ul>
    NO.wrapItemAndSub = <li> | </li>
  }
}

-> der ist so schlau, dass er auch Untermenüpunkte erstellen kann.

Wie machen wir es jetzt sichtbar?
htdocs - tag03 - fileadmin - templates - index.html
über einen Marker in der html-Datei baue ich es später ins template rein.
Also einen Marker hinter <div id="menu"> (da steht derzeit eine UL drin)




und tragen dann noch ins Typoskript ein:
lib.menu = HMENU
lib.menu {
 1 = TMENU
  1{
    wrap = <ul> | </ul>
    NO.wrapItemAndSub = <li> | </li>
  }
}

Das wrapItemAndSub ist selbst so schlau, dass es die Anzahl der Lis automatisch im HTML ergänzt.
lib.menu = HMENU
lib.menu {
 1 = TMENU
  1{
    wrap = <ul> | </ul>
    NO.wrapItemAndSub = <li> | </li>
  }
}

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.MENU < lib.menu
page.10.marks.CONTENT < styles.content.get
page.10.marks.SIDEBAR < styles.content.getRight


Wir haben es MENU genannt und dann kopieren wir einfach unsere definierte Library da rein.

Breite des Containers reicht nicht für die Anzeige des Menüpunktes "Impressum":
Dann wird uns das Menü angezeigt, aber für das Impressum ist kein Platz mehr - also die Breite des Menü-Divs vergrößern - width = 600px - das muss in Style.css verändert werden.

Lösung:
 htdocs - tag03 - fileadmin - templates - style.css - edit with notepad - Zeile 171 :)
 -> Änderung der width vornehmen, speichern, Cache in Typo3 löschen - speichern und anzeigen

Jetzt haben wir noch das alte Menü im html-Code drin - das ist HTML-Schrott -
falls wir es später nochmal brauchen einfach durch Kommentare ausklammern.

Also ab in die index.html und ausklammern.

Tipp für Shortcuts im HTML: Ausklammern
auszuklammernden Bereich markieren und Steuerung + Shift + Q = Shortcut zum Ausklammern in HTML ;)
 - Steuerung + Shift + K - Klammerung rausnehmen - auskommentieren.

Alle Caches im Typo3 löschen - im Firebug kontrollieren, ob es geklappt hat.

Weiterer Darstellungsfehler der Designvorlage

Hinweis: Wenn mir die Designvorlage Bilder mitgibt, muss ich im Nachgang in meiner index.php die Pfade aller Bilder anpassen!!!

So - jetzt haben wir festgestellt, dass der Schatten des Kopfbereiches fehlt
htdocs - tag03 - index.php (dies ist meine von typo3 gesteuerte Startseite!

Der Pfad ist nicht korrekt - die index.php liegt nicht im fileadmin-Ordner unter templates, sondern im tag03 Ordner - also müssen wir den Pfad anpassen.

Auszug aus dem html-Text - Pfad zum Bild weiter angeben:
        <li><a href="#">Contact</a></li>
            </ul> -->
        </div>
    </div>
    <div><img src="fileadmin/templates/images/img03.png" width="1000" height="40" alt="" /></div>
    </div>
    <!-- end #header -->
    <div id="page">
        <div id="content">
             ###CONTENT###
        </div>
        <!-- end #content -->

Übertragung von Datenbank (DatenbankDump) & Verzeichnis

oder Jetzt wollen wir die Seite an Oma schenken

Diese Darstellung liegt lokal auf unserem Server - Oma hat nen eigenen Server.
Wie können wir jetzt die Seite auf einen anderen Rechner übertragen?
Wir müssen Oma ein Paket mit allen nötigen Dateien und Verzeichnissen packen.

Was brauchen wir?

• Das Verzeichnis und
• die Datenbank - php my Admin

Datenbanken-Dump

Definition bei Wikipedia
localhost/ - Deutsche Umgebung auswählen  Dann sind wir hier
tools - phpmyadmin = Synonym für Datenbanken!

Das ist das Backend unserer phpmyadmin-Seite

tag03 - ttcontent - anzeigen - dann sieht man unsere Seite in einer Tabelle abgelegt.

Wie komme ich wieder zurück in die Homeansicht des Backends?

Wie kann ich jetzt die Datenbank transportieren?
Einfach kopieren geht nicht, sondern man muss was generelleres erstellen - also
Datenbank auswählen (tag03 - klick auf Exportieren - SQL-Format - OK ) Datei Speichern
Dann haben wir tag03.sql auf unserem Rechner - Die Datei liegt in unserem Download-Bereich

Was steckt in der Datei? Mit Notepad öffnen - sie ist in SQL geschrieben (= strukturierte Abfragesprache mit Befehlen)

Rekonstruktion unserer Datenbank dürch aneinandergereihte SQL-Befehle, wie:
CREATE TABLE IF NOT EXISTS `backend_layout`
INSERT INTO `be_sessions` (`ses_id`, `ses_name`, `ses_...

Dies ist explizitier als die Kopie einer Datei, da portierbar, versionsunabhängig & menschenlesbar

Was machen wir mit der Programmumgebung - dem Verzeichnis?
Source+ Dummy können wir nicht nehmen - da wir verändert haben .

Also rechter Mausklick auf mein verzeichnis tag03 - Senden an - Zip-komprimierter Ordner
-> dann habe ich wie die Source+Dummy-zip-Datei eine Verzeichniskopie von meiner Seite erstellt.
Der Zip-Ordner liegt jetz in meinem htdocs-Ordner, wie auch mein tag03-Ordner

Also packen wir unser Päckchen:
Jetzt legen wir alles in einen Ordner:
Dokumente - neuer Ordner - stick - neuer Unterordner - omas Geschenk - in diesen ordner packen wir die zip-Datei tag03.zip

Und nun  noch die tag03.sql-Datei aus dem Download-Ordner ausschneiden und in den Geschenkeordner packen.

Installation der transportierten Datenbank

Zur Übung spielen wir nun diese Datenbank für uns neu ein und speichern es als tag04 :)

• neuen Ornder in htdocs: omasgeschenk
• jetzt die zip-Datei aus dem Ordner stick - omas Geschenk in den neuen Ordner omasgeschenk in htdocs ziehen
• Oma braucht aber einen Xampp
• Ach ja und die php.ini-Datei! Die muss noch ins php-Verzeichnis

Und wie bekommen wir die Datenbank rein?
Wir müssen sie über phpmyAdmin importieren!

Wir müssen eine neue Datenbank anlegen - also phpmyadmin - Startseite -- Datenbanken - manuell auf dem Localhost - datenbanken anlegen (hat sonst dummypaket gemacht) - omasgeschenk

Jetzt haben wir eine leere Datenbank, in die wir unsere Datenbank (sql-Datei importioeren müssen.)
Also nun auf omasgeschenk in der linken Menüleiste klicken, dann importieren, dann durchsuchen - die sql-Datei vom Stick auswählen und ok drücken

Importieren der geschenkten sql-Datenbank

Wir sind noch nicht fertig - Datenbank korigieren in den Basic Configuration

Eine installation in der Basic Configuration sagt mir, wozu diese Datenbank gehört
Database - muss omageschenk heißen
Also in den Browser - localhost/omasgeschenk/typo3/install eingeben

Dann ENABLE_INSTALL_TOOL Datei in den typo3conf-Ordner in htdocs eingeben

Wir sind am Tor der Installation: Nun wählen wir die Basic Installation an
Wählen die Database omasgeschenk aus
Ändern den site name und
klicken auf Update Configuration

Jetzt müssen wir noch die php.ini in C - xampp - php - php.ini ersetzen (durch die, die wir vom Dozenten bekommen haben)

FERTIG :)

Zum Nachlesen:

• Buch ab Seite 571: Backup mit phpMyAdmin
• Tutorial: backup1.pdf - Wie kann ich Systeme mitnehmen, installieren und konfigurieren

Am Nachmittag machen sie noch ne Datenbanksicherung