Tag 01

Montag, 23.04.2018, 08.30 - 16.00 Uhr

• Orientierungsphase, Teilnehmer-Themen, Pausenregelung / Seminarablauf
  Cobra-Shop: gesponserte Software für IT-Teilnehmer bei VHS-EDV-Seminaren;
  Buchempfehlungen: meine "persönliche aktuelle Bibliothek" werde ich im Seminar vorlegen;
  die digitalen Daten der Woche stehen den TN am Freitag im Netz zur Verfügung
• Software- und Grundeinrichtung PCs
  Reborn-Card bzw. Software-Absicherungen der Seminar-PCs beachten:
  wir arbeiten in den BU-Profilen ohne Rücksetzung von Laufwerk C: (Bezeichner: Windows 10 BU)
  Programme / Software: (sind auch in meinem aktuellem XAMPP-CMSOD in portabler Version eingebunden)
  Packer: 7-Zip als Tool zum Packen/Entpacken
  Browser: Mozilla Firefox, Chrome, Opera, Safari (IE-Alternativen und Developer-Tools)
  Editor: Notepad++, PsPad (multifunktionaler Editor mit Erweiterungsmöglichkeiten / PlugIns)
  Software nutzen:
  

  Variante A	PortableApps aus XAMPP-CMSOD nutzen Anm.: bitte nicht aktualisieren!
  Variante B	lokal installierte Windows-Programme nutzen Anm.: bei Notepad++ bitte die 32-Bit-Version nutzen, damit die optimale PlugIn-Unterstützung gewährleistet ist!

  Und bitte nicht gleichzeitig die PortableApp und die installierte Version nutzen!
  Explorer konfigurieren (Win + E): Dateiendungen nicht mehr Ausblenden lassen (bzw.: versteckte und Systemdateienen einblenden)
  Windows Vista / 7 / 8 / 10: Organisieren - Ordner- und Suchoptionen - Register Ansicht ...
  Alternativ bei Windows XP: Menü Extras - Ordneroptionen
  Grund: Dateien heißen bild.jpg oder bild.jpeg oder bild.JPG - wir müssen das genau wissen!
• Client-Server-Prinzip für WWW
  WWW - World Wide Web; Internet "Dienstleistung / Service / engl. Daemon - siehe angehängtes "d" bei httpd für Apache-Server-Software"
  Web-Client: genannt Browser, die über ein Protokoll (http, https) vom Server Daten abfragen (request)
  Browser-Software: Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari, Opera, ...
  Web-Server: "Dienstleister"-Software - Apache ("A Patchy Server" - historisches Wortspiel für alten NCSA Webserver Mosaic, der durch "Flicken" verbessert und dann eigenständig entwickelt wurde)
  Alternative Web-Server-Software: IIS (Internet Information Server von Microsoft); nginx von Firma NGINX, LIGHTTPD, ab PHP 5.4 ist in der Skriptsprache PHP auch ein "Server" eingebaut (Link)!
  Zusammenspiel: "Kopiermaschine" - Client fragt nach Webdokument - Server bereitet Daten auf und kopiert an Client
  Wichtig: unsere serverseitigen PHP-Dokumente müssen immer über eine http-Url im Browser aufgerufen werden und die Dokumente sollten immer über die Dateiendung php verfügen
• XAMPP-CMSOD installieren
  Vorgehensweise im  "Windows"-Seminar (XAMPP-Server  für Windows):
  Ich stelle als Trainer ein fertiges selbstentpackendes XAMPP-Archiv bereit, das bereits für die CMSOD-Seminare vorkonfiguriert ist und auch Beispielinstallationen enthält!
  Das Archiv wird wieder mit der Notwendigkeit zu PHP Version 7.2 aktualisiert (siehe TYPO3 v9 - Version 9)!
  

  Archivname:	xampp-cmsod-TEILNEHMER-20171015-1630.exe
  MD5-Prüfsumme:	b939515595f0e4d6685996a0386f2ecd

  1) XAMPP-Archiv auf TN-PC kopieren über Netzwerkfreigabe oder von bereitgestellter Trainer-CD
  2) Selbstentpackendes 7z-Archiv mit Doppelklick "öffnen/entpacken"
  3) Zielordner: C:\xampp-cmsod angebeben (Anm.: Entpacken in Zielpfad  C:\xampp-cmsod  ist wichtig!)
  Grund: alle eingebauten CMSOD-Techniken und Tools auf dieses lokale Verzeichnis optimiert wurden.
  Tipp: eigene XAMPPs kann man dann einfach in anderen Verzeichnissen wie C:\xampp unterbringen.
  4) Starten / Doppelklicken  xampp-control.exe (Kontrollcenter) und
  5) Starten der nötigen Server mit Hilfe des Kontrollcenters:
  → Apache Webserver und
  → MySQL Datenbankserver per Schaltflächen "Starten" im Kontrollcenter
  Anm.: die Nachfragen der Windows-Firewall bei den Dienste-Starts können abgebrochen werden, da wir keine Zugriffe auf unsere lokalen Testinstallationen über das Netzwerk wünschen. Die Aktionen zum Starten Webservice Apache und Datenbankserver MySQL (bzw. MariaDB) sollten wir täglich (also jeweils bei Bedarf) durchführen.
  Empfehlung: von einer automatischen Bereitstellung des XAMPP-Server über (automatisch startende) Services (Dienste) rate ich ab!
  6) Browser / Webclient - Starten des für Webentwicklung CMSOD optimierten Firefox über Schaltfläche "Admin" im Kontrollcenter bei Webserver Apache
  Hinweis: dieser portable Firefox hat bereits Standard-AddOns installiert und nutzt z.B. auch keinen Browser-Cache; Sie können einen installierten und diesen mobilen Firefox nicht gleichzeitig nutzen!
  

  die vorbereitete Umgebung:

  Technik	Info	Bemerkung
  XAMPP	C:\xampp-cmsod\	Basispfad des XAMPP-CMSOD
  Tools / Software	C:\xampp-cmsod\_tools	Software, PortableApps
  Web-Dokumente	C:\xampp-cmsod\htdocs\typo3\...	mit Unterordnerstrukturen
  Apache	C:\xampp-cmsod\apache\conf\httpd.conf	Konfigurationsdatei Webserver
  PHP	C:\xampp-cmsod\php\php.ini	Konfigurationsdatei PHP

  Für Technik- und CMSOD-Zertifikat-Interessierte befindet sich unter
  (URL) http: //localhost/cmsod-overview  eine Website mit Infos rund um den CMSOD
  und die genutzten Techniken und Konfigurationen.

• LAMPP

• Serverumgebung XAMPP - Seminar-Version: XAMPP 7.1.8 mit PHP 7.1.8
  X - Betriebssysteme Linux (L), Windows (W), MacOS (M) oder Sun Solaris;
  A - Apache (Webserver),
  M - MariaDB / MySQL (Datenbankserver),
  P - PHP (serverseitige Skriptsprache)
  P - Projekt;
  bei Hostern:
  klassisches LAMP-System (Linux - Apache - MySQL/MariaDB - PHP)
  oder auch mal als WAMPP mit einer Windows Server Betriebssystem Basis und dem IIS (Internet Information Server) als Webserver und dem MSSQL-Server als Datenbankserver
  Hier eine kleine Übersicht/Zusammenfassung zur genutzten AMP-Umgebung:
  

  AMP	A - Apache	M - MySQL / MariaDB	P - PHP
  Technik	Web-Server	Datenbank-Server	serverseitige Skriptsprache
  Web (URL)	httpd.apache.org (Projekt Apache Foundation)	www.mysql.com (bzw. .de) mariadb.org	www.php.net (bzw. de.php.net)
  Konfigurationen	httpd.conf	my.ini (bzw. my.cnf)	php.ini
  XAMPP Versionen	2.4.27	10.1.26-MariaDB mit PhpMyAdmin 4.7.0	7.1.8

  Im Seminar werden einfache Konfigurationsbeispiele dargestellt.
• Web-Dokumente-Ordner
  Erkenntnis: XAMPP-Verzeichnis: c:\xampp-cmsod\htdocs (entspricht der Request-URL: http://localhost/)
  

  Übungsordner	C:\xampp-cmsod\htdocs\phpmysql\phpmysql-seminar
  URL	http://localhost/phpmysql/phpmysql-seminar

  Bitte erstellen Sie sich im Dateimanager (Windows Explorer - Win + E) und in Ihrem Browser die nötigen Favoriten (Bookmarks / Verknüpfungen / Schnellzugriffe), um die Aufrufen der URLs und das Auffinden der PHP-Dokumente zu beschleunigen.
  Wichtige Empfehlungen:
  keine Umlaute, keine Sonderzeichen, Groß- und Kleinschreibung beachten (also Empfehlung: alles klein schreiben), keine Leerzeichen!
  Bei Anfrage von Verzeichnissen (ohne Webdokument) gibt XAMPP ein Inhaltsverzeichnis (Index) zurück!
  Standarddokumente sind mit Reihenfolge in Konfigurationsdatei httpd.conf des Webservers hinterlegt (z.B. index.php index.html index.htm index.php3 ...)
  Das ist auf Produktionssystemen (also beim Live-Hosting) nicht gewünscht und entsprechend dort auch anders konfiguriert.
• Notepad++ Tipps - Standardeditor für das Seminar
  Anm.: in XAMPP-CMSOD PortableApps eingebaut - bitte 32-Bit-Variante nutzen wegen PlugIns
  Hilfe PHP: Cursor in PHP-Technikwort und Online-Hilfe mit Alt + F1 aufrufen
  Code-Completion (Codevervollständigung) mit Strg + Leertaste
  Zoomfaktor/Schriftanzeigengröße mittels Strg + Rollrad-Maus oder Strg + "+" (oder -) auf Nummernblock
  Für sauberes Syntax-Highlighting und Codecompletion benötigt Notepad++ Datei mit gespeichertem Dateiformat (Menü Sprachen)
  Tipp: Über Kontextmenü auf PHP-Datei den portablen Editor Notepad++ als Standardprogramm zum Öffnen einstellen
  Pfad: C:\xampp-cmsod\_tools\_portable\PortableApps\Notepad++Portable\Notepad++Portable.exe
  oder natürlich den in Windows installierten Notepad++-Programme-Pfad!
• Zeichencodierungen
  die IT-Systeme kennen nur 0 und 1, also verwendet man "Tabellen", die 0/1-Kombinationen dann Zeichen zuordnen
  Beispiele: ASCII, ANSI, ISO-8859, UTF-8 (und andere UTF-Varianten; auch als Unicode bezeichnet);
  nur in 7 Bit also den ersten 128 Zeichen sind diese "Nachschlagetabellen" gleich
  Empfehlung: bitte in UTF-8 bzw. UTF-8 ohne BOM speichern mit Notepad++ ;
  gerne zusammen mit sauberem HTML-Header (<meta charset="utf-8">)
  Hinweis zu CMS Joomla: dort sollten alle Konfigurationsdateien (*.ini) unbedingt mit UTF-8 ohne BOM gespeichert werden
• PHP-Hilfe nutzen
  Aufruf der Online-Hilfe von PHP-Webportal php.net mittels Cursor in PHP-Wort und Alt + F1
  Übung: Bereitstellung der PHP-Hilfe als CHM-Datei - wichtig: CHM-Dateien müssen seit Windows XP SP2 erst in Kontextmenü "zugelassen" werden
  Link zu (deutschen) PHP-Dokumentationen
• Mischung von HTML und PHP
  letztendlich wollen wir natürlich komplette Webseiten an den Client ausliefern - also benötigen wir HTML-Gerüste und bringen dort unsere PHP-Skriptzeilen unter; das werden wird aber nur erst mal ausprobieren und verstehen und uns dann wieder auf PHP konzentrieren
  Anm.: in vielen Beispielen werden zur schnellen Verdeutlichung direkte Styles in HTML verdrahtet - also ohne saubere CSS Stylings; das muss natürlich später sauber gemäß der Techniken aus "HTML & CSS" codiert werden!
  Für das Einfügen von PHP beschreibt das PHP-Handbuch unterschiedliche, technische Möglichkeiten. Auszug aus der PHP-Hilfe: "...Es gibt vier unterschiedliche Paare öffnender und schließender Tags, die in PHP verwendet werden können.
  Empfehlung: <?php ?>
  Die Einbindung mit <script>-Tag ist mit PHP7 nicht mehr gewünscht. Die anderen Varianten sind Short-Tags und ASP-Tags, die über das php.ini-Konfigurationsfile ein- und ausgeschaltet werden können. ..." (Link)
  Tipp für komplettes HTML5-Gerüst:  html:5  (dann Strg + , ← Tastenkombination mit Strg und Komma; Erkl.: Erweiterung Emmet in Notepad++)
• Kommentare in PHP
  Einzeilig mit //, mehrzeilig mit /* ... */,
  spezielle Kommentartechniken mit automatischen Dokumentationserstellungen (siehe phpDoc)
  Nutzen zum Auskommentieren von Zeilen - also Testzwecken - oder natürlich der Erläuterung von Code im Skript (wichtig für spätere Nachvollziehbarkeit und Analyse / Anpassung)
• PHP-Status (Version) und Konfigurationen ermitteln - phpinfo() - unser erstes Skript (Link php.net)
  Ein kleines Skript erledigt die Arbeit
  

  <?php
      // Kommentar: Wir wollen die PHP-Server-Konfiguration auslesen!
      phpinfo();
  ?>

  Achten Sie bei Ausdrücken/Anweisungen in Skriptsprachen generell auf das hier auch abschließende "; (Semikolon)
• echo (Sprachkonstrukt zur Übergabe von Strings an Browser - Link php.net)
  Ausgabe von Text und Variablen (beginnen immer mit $), Konstanten werden mit define vereinbart
  bei Verwendung von doppelten Anführungszeichen (double quotes) werden integrierte Variablen in der Ausgabe (im String) ausgewertet
  die einfachen Anführungszeichen (single quotes) erlauben die Verschachtelung mit doppelten Anführungszeichen (siehe HTML-Code class="top" oder ähnliche Syntax;
  außerdem kann man Texte / Strings über den Operator "." aneinderheften oder über Kommas einfach nacheinander aufzählen
  Alternative: print  - mit dieser Funktion kann man auch gleichzeitig Zuweisungen erstellen:
  $var = print("Text");   // Zuweisung und Ausgabe - print arbeitet auch ohne Klammern
• vordefinierte PHP-Konstanten ("magische" PHP-Konstanten - Link php.net)
  __LINE__, __FILE__, PHP_VERSION, PHP_OS
  Nutzung für "Debugging" und Analyse von PHP-Skripten
• date (Datumsfunktionen - Link php.net)
  Recherche mit PHP-Hilfe;
  Übung mit Augabe (echo) des aktuellen Datums in der Form "2014-06-02"
  $heute = date("Y-m-d"); // gibt das gewünschte Datum und Format aus
  Funktion zum Erstellen von Datumswert: mktime   (Link php.net - bitte die Reihenfolge Monat, Tag beachten!)
  Hinweis: DATETIME Formatierung mittels Formatierungsstring "Y-m-d H:i:s";
  später für MySQL-Datenbank wichtig!
• $_SERVER[...] (Link php.net)
  technisch: Superglobales Array für die Nutzung von Server-Variablen
  wie HTTP_USER_AGENT, SERVER_NAME und natürlich PHP_SELF
  Aufruf mittels $_SERVER['PHP_SELF']  (wichtig für dynamische Website - Hauptseite ruft sich selbst immer wieder auf...)
• Arrays (erste Annäherung - Funktion array Link php.net)
  2-dimensionale Tabellen mit Spalte für Index und Spalte für Inhalt / Wert,
  bei nummerischen Arrays laufen die Indizes von 0, 1, 2, ...
  bei assoziativen Arrays (Hash-Tabellen) werden Begriffe / Bezeichner für die Indizes genutzt,
  Definition von Array mit Hilfe von PHP-Aufruf array(...) und Zuweisung mittels "=>"
• Arrayfunktionen - array() - foreach() - Beispiele und Übungen
  Beispiel (assoziatives Array):  $arr = array( "Nr" => 12345, "Name" => "Meier", ...)
  Beispiel (nummerisches Array):  $arr2 = array( "Auto", "Bahn", "Fahrrad")
  Definierten Wert mit Klammerschreibungen:   $arr['Nr']   bzw.    $arr2[2] 
  Funktion count($arr) ergibt die Anzahl von Werten im Array
  Neuen Wert in nummerischem Array einfügen:  $arr[] = "Flugzeug" 
  Ausgabe (zu Testzwecken) von Arrays mit Funktionen print_r und var_dump  
  Tipp: Einschachtelung in pre-Tags für formatierte Ausgabe im Browser (im Quellcode immer gut lesbar)
  Automatische Schleifenfunktion für das Handling von Arrays: foreach 
  Arrays sind nur 2-dimensional (nur 2 Spalten) können aber auch noch verschachtelt werden!
• Escape-Sequenzen (Link php.net)
  Kennungen im PHP-Code für Spezialformate und Nutzung von sonst unerlaubten Zeichen
  \n  -  Zeilenumbruch (im Quellcode)
  \t  -  Tabulatorsprung (im Quellcode)
  \"  -  Nutzung von doppelten Anführungszeichen; z.B. für Zuweisungnen wie class=\"styling\" 
• Verschachtelte Arrays
  Arrays (hier in PHP ja nur 2-dimensional / 2-spaltig) lassen sich gerne verschachteln
  Übung:
  

  Länder	Hauptstadt	Währung	Sprache
  Deutschland	Berlin	Euro	deutsch
  Japan	Tokio	Yen	japanisch
  England	London	Pfund	englisch

  Fortsetzung der Übung zu verschachtelten Arrays und Ausgaben mit unterschiedlichen Techniken möglich:
  1) foreach verschachteln (nur bei vielen "Dimensionen nötig)
  2) Funktion list nutzen, um aus dem Detaill-Array die gewünschten Variablen mit Funktion list  zuzuweisen
  

  foreach ($laender as $country => $countryinfos) {
      // mit Befehl list die Variablen hauptstadt, waehrung und sprache zuweisen:
      list ($hauptstadt, $waehrung, $sprache) = $countryinfos;
      // einfache Ausgabe von Land, Hauptstadt, Währung:
      // echo $country, " ", $hauptstadt, " ", $waehrung, "<br>\n";
      echo "<tr class=\"row\">
              <td class=\"col\">$country</td>
              <td class=\"col\">$hauptstadt</td>
              <td class=\"col\">$waehrung</td>
              <td class=\"col\">$sprache</td>
          </tr>";
  }

  Anm.: Bei umfangreicheren Codes wurde den TN der Code "fertig" zur Verfügung / zum Testen bereitgestellt.
• Wichtige Anmerkung des Trainers zu den "Stylings" in den PHP-Codes:
  Es wird häufig einfaches (physikalisches) HTML-Styling direkt in den Tags verwendet, statt sauberer CSS-Klassen und Definitionen.
  Das geschieht, um die PHP-Codes einfach und übersichtlich zu halten. Später bitte natürlich saubere und professionelle Trennung von Layout (HTML-Struktur) und Styling (CSS) wie auf csszengarden.com ;-)

• Array - verschachtelt
• echo - Sourcecode
• Hilfen
• $_SERVER
• Array - Übung
• phpinfo()