Frau Kalke's Blog - Comcave: CMS (TYPO3) - Kurs Tag 9 - Datenbank online stellen, BigDump, Inhaltselemente (Bilder, Aufzählungen, Tabellen)

Mitschrift 20.05.2014

TAG 9

Vorbereitung für den Tag:

XAMPP starten
Customizer machen 2 Projekte tag09a & tag09b
Anwender spielen ein System aus der Sicherungskopie auf - tag09

Farben für die beiden Kurse

Customizer
Anwender:
Alle Teilnehmer

Was machen wir heute?

Wiederholung
Inhaltselement (Text und Bild) als Wiederholung
Wir gehen online!

Dozent hat vorbereitet - User angelegt / vorbereitet
weiteres Inhaltselement kennenlernen
Aufzählung und Tabellen

Wiederholung

Inhaltselemente:

Inhaltselemente sind statische Elemente (werden eingestellt und bleiben an der Stelle stehen)
Inhaltselemente sind nötig, um im Friontend das zeigen zu können, was der Redakteur im Backend schreibt

Text und Bilder - das häufigst genutzte Inhaltselement

Man kann Texte und Bilder in Spalten setzen
Text und Bilder - neuer Reiter Bilder, der die Bilder einfügt, die rein sollen

Bild-Metadaten - wichtiger Bereich für Barrierefreiheit und SEO

(Beschreibung, Titel, Alternativer Text)

Reiter Erscheinungsbild:

Bildausrichtung - Es gibt Konstanten, die wir hiermit temporär verändern können. Wenn wir die Konstanten ändern wollen, dann müssen wir über Templ

Exkurs Lightbox

Bsp Lightbox

Bild, wird bei Klick vergrößert und der Hintergrund verdunkelt - kann man auch eine Bildergalerie draus machen - hierzu findet man auch die Konstanteneinstellungen im Konstanten-Editor - dafür müssen wir später mal ein weiteres Tool runterladen und einspielen

GraphiksMagick:

externes Tool, weil Typo3 selbst keine Bilder klein rechnen kann.
wandelt die Bilder vorher in PNG um, damit keine Verluste durch Komprimierung entstehen können

Wo werden die Bilder zwischengespeichert?
Typo3temp - processed oder gileadmin - processed - Das sind die beiden Ordner, in denen die Bilder abgelegt werden, damit sie temporät geöffnet werden können - die Bildgröße eines jeden Bildes von ca 8kb ;) WEIL: Es wird in PNG umgewandelt, dann kleingerechnet und für die Ausgabe wieder großgerechnet - so haben wir keinen Qualitätsverlust

Wie kann ich Bilder hochladen:
direkt aus dem Inhaltselement - Text und Bilder - Bilder - entweder Durchsuchen auf meinem PC oder bereits hochgeladenen Bilder verwenden

Fileserver einstellen in Typo3:
Liste - Tag08 - Dateispeicher - Reiter: Allgemein, Configuration, Access

Strato:
Hosting ( = Aufteilung auf mehrere Server) vs Server (Eigener/Dedicated Server, VServer, Managed Server)

Was brauchen wir, wenn wir unsere Domain haben?

Datenbank
Verzeichnisstruktur

für jedes Projekt ein eigenes Verzeichnis

FTP-Zugang

für jedes Projekt einen eigenen FTP-Zugang
Filezilla als Beispiel FTP-Client

Zugang über IP/Domain, Benutzername, Passwort

Neue Domains:

Es gibt neuerding neue Domains, wie.berlin, .mail, .web, .gmbh, .bayern
nur sinnvoll, wenn ich es in der Suchmaschine zur Optimierung nutzen kann.
Kostet aber Geld - kostenpflichtig
genau, wie Umlaute, die mittlerweile in den Domains genutzt werden können - sie werden selten in die Suchmaschine/Browserfenster eingegeben.

=> Also Sinnigkeit hinterfragen
=> Entwicklung beobachten

Bigdump = gezipte php.-Datei von Alexander Ozerov

Mit BigDump kann ich größere Dateieingaben machen
File...if-Schleife
SQL-Datei wird abgearbeitet, statt importieren, kommt die Schleife.

Öffnen der bigdump.php, um Einstellungen zu ändern:
Änderung mit der zusätzlichen Null am Ende, um die Range größer zu stellen : Parameter größer gesetzt, damit wir größere Datenmengen hochladen können (Einsetzen der Parameter für störungsfreien Ablauf):

Lines per Session: 300 anstatt 300
max_query_lines : Abfrage: 3000 statt 300
Länge einer Abfrage: define ('DATA CHUNK LENGTH', 163840);

Ich kann mehr Daten einspielen, als ursprünglich vorgesehen.

Weitere Einstellungen tätigen:

Zeile 45-48:

db_server, db_name, db_username, db_passsword (man kann nicht auf alles Einfluss nehmen, Passwort natürlich ;) )
= Zugangsdaten zu unserer Website/ Onlinesystem - so erreichen wir die entsprechende Datenbankenumgebung (nicht localhost, sondern eben vom Webhost vergeben - leider nicht standardisiert, da sie keinen localhost haben, sondern auf viele schwarze Kisten verteilt sind)
Bei Fragen die Hotline des Anbieters anrufen

bigdump.php ist Transportdatei, mit der ich meine Daten in die Datenbank einspielen kann

Dazu braucht man die entsprechende sql-Datei, weil wir mit bigdump uns der sql-Datei bedienen - die Daten auslesen, daher muss sie im gleichen Verzeichnis sein. im gleichen Verzeichnis, wie fileadmin - also keine Überordner mehr!

Einspielen einer bigdumpdatei:
kurs05.burkard-balzer.de/bigdump.php
Benutzername.domain/bigdump.php ins Browserfenster eingeben
Und start

Das ist jetzt bigDump:

BigDump

Bigdump - Start

Wer mehr über BigDump wissen will, kann das folgende Zitat lesen:

Eine SQL-Datei mit BigDump importieren
Wenn beim Hochspielen Ihrer MySQL Datenbank die Fehlermeldung "CPU Limit reached" oder "Maximale Ausführungszeit erreicht" erscheint, dann ist Ihre Datenbank zu groß für das Einspielen via phpMyAdmin (je nach Tarif bis zu 8 MB) oder beim Entpacken auf dem Server.

Die Lösung:
Spielen Sie die MySQL Datenbank mit Bigdump ein:

Zuerst müssen Sie sich Bigdump von Alexey Ozerov runterladen:
http://www.ozerov.de/bigdump.zip

Die ZIP-Datei muss z.B. mit WinZIP oder WinRAR entpackt werden. Nach dem Entpacken erhält man die Datei "bigdump.php". Diese Datei öffnen Sie mit einem Editor Ihrer Wahl, z.B. mit dem Windows Editor "Notepad".

Folgende Zeilen müssen im Bigdump-Skript angepasst werden (Zeilen ohne Änderung wurden der Übersichtlichkeit halber ausgelassen):

_{// MySQL 4: 127.0.0.1:3306 oder MySQL 5: 127.0.0.1:3307
$db_server='127.0.0.1:Port';

// Hier muss der Name Ihrer Datenbank stehen.
$db_name='DB-Name';

// Hier muss Ihr Benutzername für die Datenbank stehen.
$db_username="DB-User";

// Hier muss das Passwort für Ihren Benutzer der Datenbank stehen.
$db_password="DB-Passwort";

// Dateiname der Backupdatei
$filename="namedersqldatei.sql";

// Anzahl der Zeilen die in einer Session verarbeitet werden sollen.
// (Nur anpassen, falls Bigdump den Import abbricht)
$linespersession=3000;

// Zeit in Millisekunden, die Bigdump zwischen zwei Sessions warten soll.
// Funktioniert nur, wenn JavaScript aktiviert ist.
// (Nur anpassen, falls Bigdump den Import abbricht)
$delaypersession=0;}

Speichern Sie die vorgenommen Änderungen ab und laden Sie die Datei "bigdump.php" zusammen mit Ihrer sql-Datei per FTP hoch. Beide müssen im gleichen Ordner liegen.

Jetzt muss die Datei "bigdump.php" nur noch per Browser aufgerufen werden (z.B. http://www.domain-bei-profihost.de/verzeichnis/bigdump.php ) und auf "Start Import" geklickt werden.

Der Import wurde erfolgreich abgeschlossen, wenn "Congratulations: End of file reached, assuming OK" angezeigt wird.´

Sollten Sie hier eine Fehlermeldung angezeigt bekommen, finden Sie auf http://www.ozerov.de/ zahlreiche Hinweise aufgelistet. Meist muss man in der bigdump.php nur ein Kommentarzeichen rauslöschen um einen Import erfolgreich abschließen zu können.

Bitte löschen Sie nach der erfolgreichen Durchführung Ihre sql-Datei auf Ihrem Webspace und die Datei "bigdump.php".

An sich haben wir gerade Omas geschenk ausgepackt, nur nicht lokal, sondern online:
Verknüpfung der Datenbank mit dem php-Sytsem:
kurs05.burkard-balzer.de/typo3/install

Jetzt dem Typo3 sagen, dass es eine online-Datenbank gibt -
Enable_INSTALL_TOOL kopieren und in typo3conf ein - rechte Maus in die Server-Umgebung: Neue Datei erstellen und reinkopieren

Browserfenster aktualisieren - password: joh316

!!! Folgende Veränderungen vornehmen: Passwort ändern!!!!

Basic Configuration
Einstellmöglichkeiten für die Datenbanken

Username
Password
Host (vom Host vorgegeben - nur auf eigenem Server localhost möglich)
site Name (steht oben im Reiter drin

Update Configuration!

Mit den Zugangsdaten hat sich jetzt auch die Database geöffnet
Database kann jetz ausgewählt werden

Update Configuration

und Einloggen über Backend Admin-Link

admin & password zum Login

Als Erstes folgendes tun!!! - Passwort vergeben
Liste - Kurs05 - User anlegen - Mit dem User neu einloggen, damit der Admin verschwindet
Reiter Allgemein:
Username und Passwort in Kleinbuchstaben vergeben:
Wichtig: Haken bei Admin! Dann haben wir einen user mit allen Fähigkeiten ausgestattet, der genauso, wie ein Admin vorgehen kann.

Erst testen, ob der Admin-berechtigte User sich einloggen kann, dann erst den admin rauslöschen!
über liste - Tag05 (oberste Ebene) admin ab in den Papierkorb

-> JETZT IST DAS SYSTEM sicher!

Wir haben nun ein Online-System, von dem sich jeder Berechtigte von der ganzen Welt aus einloggen kann.

-> Es kostet bis hierhin nur 3€ für das Hostingpaket im Monat

Bau ich mir die Website direkt online auf oder vorher lokal auf dem Rechner?
Vorarbeit geschieht meist lokal auf XAMPP - oder direkt online mit vorgelagerte Subdomain: subdomain.domain.de
Denn die Suchmaschinen vernachlässigen Subdomains

Aufgaben:
Dozent hat uns alle angelegt:
nord05.burkard-balzer.de
süd05.burkard-balzer.de

Customizer:

bitte die Anwender anlegen

Im System die anwender so etablieren, dass sie arbeiten können

Aufgaben:

1 Seiten und Verzeichnisse anlegen

5 Verzeichnisfreigaben

3 Gruppen anlegen

2 Kategorien & Plugins

4 User anlegen

Anwender:

Xampp - tag08a

Wir lernen verschiedene weitere Inhaltselemente kennen:

Inhaltselemente:

Zwei Wege der Eingabe:

über Seite - neues - Spalte auswählen und Inhaltselement auswählen

bleibt immer an der gleichen Stelle stehen

über Nachrichten - DatensatzNews (tt_news)

das aktuellste steht immer ganz oben
ergo verschwindet meine Nachricht irgendwann, weil sie durch neuere nachrichten

=> Inhaltselement: Nur Bilder

Seite - karla - normal - neuen Datensatz hinzufügen
Inhaltselement auswählen: Nur Bilder
Unterschied: Keine Texte mehr ;)
Z.B. für Bildgalerien

Reiter Allgemein:
Überschrift = Überschrift über allen Bildern

Reiter Bilder - Bilder auswählen

Wenn ich eine Galerie erstellen möchte:
Alle Bilder auswählen über: Auswahl umkehren ;) und Auswahl importieren
und die Metadaten pflegen!!!

Titel = Tooltipp und wird vorgelesen bei Screenreadern
Alternativer Text - steht dann, wenn das Bild nicht geladen werden kann
Beschreibung = quasi Untertitel des Bildes

SEO-Tipp gegen überflüssigen Seitenquelltext:
Wenn man keine beschreibung haben möchte, dann bitte die Haken rausnehmen, denn dann wird der Seitenquelltext auch nicht mit leeren Feldern belastet - das ist gut für die Suchmaschinenoptimierung!!!

Reiter Erscheinungsbild:
Einstellung von:
Höhe, Spaltenanzahl, Ausrichtung

Wenn ich jetzt einen Text dazu haben möchte, dann wähle ich unter Seite - karla - normal ein Inhaltselement Text :)

Ich hab also viele gestaltungsmöglichkeiten - kann mehrere Inhaltselemente wählen - im Frontend sieht man nicht mehr, aus wie vielenInhaltselementen die Seite besteht ;)

Wechsel der Inhaltselemente innerhalb eines Datensatzes (ist möglich :) )
TIPP: Wir können aber auch den Typ des Inhaltselementes von Nur Bilder auf text und Bild ändern, falls wir nachträglich uns dazu entschließen, doch noch Text zu meiner Bildgalerie zu schreiben.
Hinweis: Selbst wenn ich von Text und Bild zu Nur Bild wechsel, dann geht mir der Text nicht verloren! :) - Ich könnte also auch wieder den Text später einspielen - vorausgesetz, ich habe zwischendurch gespeichert ;)

=> Inhaltselement: Aufzählung

-> sowas ähnliches haben wir auch schon im Inhaltselement: Text erstellt :)
Hier haben wir ettliche Möglichkeiten zu formatieren, aber die Gefahr ist auch groß, dass dann immer anders formatiert ist auf der Seite

Mit dem Inhaltselement Aufzählung können wir es getrennt customizen und bestimmte Formatierungen mitgeben, so dass alle Aufzählungen auf der Inet-Seite gleich aussehen
Das lernen wir später - also wie wir die Aufzählungen customizen können.
Dann wird uns auch der Vorteil klar, denn leider können wir hier keine Gliederungen machen!

Reiter Allgemein:

Überschrift
Aufzählung

Reiter Erscheinungsbild

Hinweis: Wir können auch über die Glühbirne Datensätz ein und ausblenden, um sie im Frontend sichtbar zu machen oder zu verbergen

Möglichkeit in typo3 Datensätze zu verbergen

=> Inhaltselement: Tabelle

Anhand der Bundesligatabelle etablieren :)
Seite - regionen - normal - Datensatz hinzufügen - Tabelle

Reiter Allgemein: ähnlich, wie bei den anderen Inhaltselementen

Reiter Tabelle:

Ersteinmal abspeichern, dann erscheint in diesem Reiter ein Tabellenassistent

Auf dem schwarzen Plus kann ich dann weitere Spalten hinzufügen

Erweiterungsoptionen:
Reiter Barrierefreiheit

Tabellenbeschriftung
Tabellenzusammenfassung (erscheint nur als summary im Quelltext, wird aber teilweise von den Suchmaschinen ausgelesen - SEO!!!

thead: Position der Kopfzeile erstellt die Tabellenüberschrift in fett!
tfoot: (Aktivieren oder nicht durch Haken) Tabellenfuß, also die letzte Tabellenzeile kann auch nochmal extra formatiert werden
tbody: alles was zwischen den beiden Zeilen (erste und letzte Zeile der Tabelle) steht

Zusätzliche CSS-Klasse
(setzt Attribut in die HTML-table, die später mit CSS gesondert formatiert werden kann)
mit diesem Feld kann ich in meiner table noch ne class eingeben, damit das CSS die Tabelle extraordinär formatieren könnte
-> <table class="meinetabelle">

Tabelle - Erweiterungsoptionen - Reiter Barrierefreiheit

Exceltabellen in Typo3 verwenden

Reiter CSV-Analyse (unter Seite - regionen - normal - Inhaltselement Tabelle - Reiter Tabelle - Erweiterungsoptionen - Reiter CSV-Analyse)

Aber an sich ist doch excel viel besser für schöne Tabellen! Wenn ich meine Tabelle aus excel in typo3 übernehmen möchte, geht das :)

Dafür muss ich meine Exceltabelle als Dateityp: CSD Trennzeichen getrennt anzeigen!

Dann im Windowsexplorer die Tabellendatei mit dem Notepad++ öffnen und Quelltext kopieren und in den Text der Tabelle einfügen!

Meine Tabelle im Quelltext des Notepad++
Pl;;Verein;Spiele;TD;Pkt;
1;;FC Bayern;34;71;90;
2;;Borussia Dortmund;34;42;71;
3;;Schalke 04;34;20;64;
4;;Bayer 04;34;19;61;
5;;VfL Wolfsburg;34;13;60;
6;;Borussia M'gladbach;34;16;55;
7;;Mainz 05;34;-2;53;
8;;FC Augsburg;34;0;52;
9;;1899 Hoffenheim;34;2;44;
10;;Hannover 96;34;-13;42;
11;;Hertha BSC;34;-8;41;
12;;SV Werder;34;-24;39;
13;;Eintracht Frankfurt;34;-17;36;
14;;SC Freiburg;34;-18;36;
15;;VfB Stuttgart;34;-13;32;
16;;Hamburger SV;34;-24;27;
17;;1. FC Nürnberg;34;-33;26;
18;;Eintracht Braunschweig;34;-31;25;

Jetzt den zweitern Reiter: CSV-Analyse
wählen und den Feldbegrenzer Semikolon auswählen, dann kann typo3 meine Tabelle auslesen und darstellen!