1. Content Management

    WS 2022/2023 — 03/13 (27. Oktober 2022)

  2. Kollaborative Notizen

  3. Agenda 03/13 (27.10.2022)

    Grundlagen
    • Auffrischung HTML / CSS
    • Grundlagen PHP
  4. HTML

    • »HyperText Markup Language«
    • Deklarative Auszeichnungssprache
    • Interpretiert vom Browser
    • Bringt Struktur und Semantik
    • Typischerweise Dateien mit der Endung .html oder .htm
  5. HTML: Elemente

    • Element (»Tag«): z.B. <p>…</p>
    • Markiert einen Inhalt und schreibt ihm Bedeutung zu, z.B. »Absatz«
    • Elemente haben einen Start- und Endteil
    • Ausnahmen: inhaltsfreie Elemente, z.B. <br/>
    • HTML5: »Self-closing elements« erlauben das Weglassen des schließenden Teils, z.B. <br>
  6. HTML: Attribute

    • Attribut: z.B. <a href="https://example.de">…</a>
    • Liefert zusätzliche Details zu einem Element
    • Markiert Elemente für die Nutzung per CSS: class="myclass"
    • Binäre Attribute: der Wert ist unwichtig, nur die Anwesenheit zählt; z.B. <input required>
  7. HTML: Dokument (Minimalaufbau)

    <!DOCTYPE html>
    <html lang="de">
        <head>
            <meta charset="UTF-8">
            <title>Dokumenttitel</title>
        </head>
        <body>
            <!-- … -->
        </body>
    </html>
    
  8. HTML: Dokument (Landmarks 1/2)

    Hauptregionen eines Dokuments

    <body>
        <header> … </header>
        <main> … </main>
        <footer> … </footer>
    </body>
    
  9. HTML: Dokument (Landmarks 2/2)

    Weitere Landmarks (Auszug):

    • <header> (optional): Einstiegsbereich eines Dokuments oder Abschnitts
    • <main> (Pflicht): Hauptinhalt eines Dokuments
    • <footer> (optional): Abschlussbereich eines Dokuments oder Abschnitts
    • <nav> (optional): Abschnitt mit Navigation
    • <aside> (optional): Ergänzende, nicht-essenzielle Informationen
  10. HTML: Sectioning Elements

    • Alle Landmark-Elemente
    • <section>: Abschnitt mit enthaltener Überschrift (»Kapitel«)
    • <article>: In sich geschlossener Abschnitt, der auch außerhalb des Kontexts funktionieren würde
  11. HTML: Block & Inline

    • »Block Level Elements«

      • Standardmäßig immer volle Breite
      • »Stapeln« sich in Dokumentrichtung (vertikal in westlichen Systemen)
    • »Inline Level Elements«

      • »Stapeln« sich in Zeilenrichtung (horizontal in westlichen Systemen)
    • Immer nur Gewschwister vom selben Typ zulässig!

    • Blocks dürfen Inline-Elemente enthalten, nicht umgekehrt (Ausnahmen per CSS)

  12. HTML: Block-Elemente

    • Alle Landmarks und Sectioning Elements
    • Überschriften <h1> - <h6>
    • Absätze <p>
    • Formulare <form>
    • Neutrale Container <div>
    • u.v.m.
  13. HTML: Inline-Elemente

    • Hervorhebungen <strong> und <em>
    • Formularelemente <input type="text">
    • Bilder <img src="…">
    • Neutrale Container <span>
    • u.v.m.
  14. CSS

    • »Cascading Style Sheets«
    • Deklarative Auszeichnungssprache
    • Interpretiert vom Browser
    • Bringt Design
    • Typischerweise Dateien mit der Endung .css
  15. CSS: Einbindung

    • Kann inline in ein HTML-Dokument eingebettet sein: <style> … </style>
    • Kann extern referenziert werden: <link href="…" rel="stylesheet">
      • Vorteil: Wird vom Browser zwischengespeichert (»gecached«)
  16. CSS: Rules

    Stylesheets enthalten beliebig viele »Rules«:

    selector {
        property: value;
    }
    
  17. CSS: Selector

    Der Selector wählt HTML-Elemente aus, die beeinflusst werden sollen:

    • per CSS-Klasse: .myclass { … }
    • per Attribut: [type=text] { … } oder [type] { … }
    • per Element-Name: p { … }
    • per Element-ID: #myelement { … }
  18. CSS: Eigenschaften & Werte

    CSS-Regeln enthalten beliebig viele Eigenschaft-Werte-Paare, die die ausgewählten Elemente beeinflussen, z.B.:

    .myclass {
        color: red;
        font-weight: bold;
    }
    
  19. PHP

    • Ursprünglich »Personal Home Page Tools«
    • Heute rekursives Akronym: »PHP: Hypertext Preprocessor«
    • Skriptsprache, d.h. es ist ein Parser / Interpreter notwendig
    • Verschiedene Server APIs (SAPI)
      • Apache-Modul
      • CGI / FastCGI (Common Gateway Interface)
      • FPM (FastCGI Pool Manager)
      • CLI (Command Line Interface)
  20. Einsatzgebiete

    • Berechnungen
    • Datenbankoperationen
    • Nachrichtenversand
    • Erzeugung von Ausgaben (z.B. HTML / Text, Binärdaten)
    • »Templating« (Verarbeiten von Vorlagen + Daten / Variablen zu Ausgabeergebnissen)
    • Seltener: Langlaufende Prozesse, z.B. Serveranwendungen
  21. Ausführung

    • Serverseitige Programmausführung, d.h. es kommt kein PHP-Code in der Ausgabe an
    • PHP ist »stateless«
      • »Request« definiert den Lebenszyklus eines PHP-Programms
      • Je Request: Interpreter wird gestartet, Programm wird abgearbeitet, Prozess wird beendet
      • Ohne Hilfsmittel keine Statusübergabe zwischen Requests
      • Hilfsmittel: Dateien, Datenbanken, Arbeitsspeicher
  22. Pro & Contra

    Pro
    • Extrem weit verbreitet, gängig bei allen Hostern
    • Flache Lernkurve, sehr schnell sichtbare Ergebnisse
    • Sehr effizient für Request-basierte Aufgaben
    Contra
    • Zumindest in den Anfängen: Spaghetti-Code, schwache Typen, viel Murks
    • Nicht ideal für langlaufende Prozesse
  23. PHP 7 → PHP 8 (Ende 2020)

    • Viele Geschwindigkeitsoptimierungen
    • »Just In Time«-Compiler (JIT)
  24. Erste Schritte

  25. PHP-Dateien

    • PHP-Code ist einfacher Text
    • Bearbeitung mit jedem Texteditor möglich
    • PHP-Dateien haben üblicherweise die Dateiendung .php
    • Zum Ausführen wird der PHP-Interpreter benötigt:
    php beispiel.php
    
  26. PHP-Verarbeitung

    • Der PHP-Interpreter nutzt Dateien als Eingabe (HTMP + PHP), arbeitet sie von oben nach unten durch und produziert eine Ausgabe (üblicherweise HTML)
    • Beim Ausführen können Berechnungen stattfinden, Datenbanken abgefragt werden, usw.
    • In der Ausgabe ist kein PHP-Code mehr enthalten, er wurde unterwegs interpretiert und entfernt
    • <?php aktiviert den Interpreter: »Achtung, ab hier folgt Programmierung!«
    • ?> deaktiviert den Interpreter: »Ab hier bitte alles einfach ausgeben!«
    • Es können beliebig viele Wechsel zwischen Interpeter- & Ausgabemodus in einer Datei stattfinden
  27. Im Web: PHP + HTML

    <p>
        <?php echo "Hallo Welt!"; ?>
    </p>
    

    Wird zu:

    <p>
        Hallo Welt!
    </p>
    
  28. Variablen

    • Variablen (wie in Mathe) beginnen mit $, gefolgt von einem Variablennamen
    • Zusweisung von Werten mit =
    $x = 1;
    $y = 'Text';
    $active = true; 
    
  29. Datentypen

    • Ganzzahlen (Integer)
    • Fließkommazahlen (Float)
    • Zeichenketten (String)
    • Boolsche Werte TRUE / FALSE (Boolean)
    • Null-Wert NULL
    • Objekte (Object)
    • Listen (Array)
  30. Operatoren

    • Arithmetische Operatoren: +, -, *, /, %, **
    • Bit-Operatoren &, |, ^, ~, >>, <<
    • Vergleichsoperatoren ==, ===, !=, !==, <, >, >=, <=
    • Zeichenketten verknüpfen mit .
    • Logische Operatoren in Bedingungen: && (UND), || (ODER)
  31. Beispiel: Summe

    $x = 1;
    $y = 2;
    $sum = $x + $y;
    echo $sum;
    

    ergibt:

    3
    
  32. Beispiel: Text

    $name = 'Joschi';
    echo 'Mein Name ist ' . $name;
    
    

    echo "Mein Name ist $name";

    ergibt beides:

    Mein Name ist Joschi
    
  33. Listen (Arrays)

    Definition von Listen mit []

    $obst = ['Apfel', 'Banane', 'Orange'];
    
    • Listen sind Paare aus Schlüsseln und Werten
    • Wenn nicht explizit angegeben, sind Schlüssel automatisch numerisch (mit 0 als Basis). Das obige Beispiel ist gleichwertig mit:
    $obst = [0 => 'Apfel', 1 => 'Banane', 2 => 'Orange'];
    
  34. Listenzugriff

    Zugriff auf Listenelemente mit [<schluessel>]:

    $obst = ['Apfel', 'Banane', 'Orange'];
    
    

    echo $obst[1];

    ergibt:

    Banane
    
  35. Assoziative Listen

    Listen mit Zeichenketten als Schlüssel

    $person = [
        'vorname'  => 'Joschi,
        'nachname' => 'Kuphal, 
    ];
    
    

    echo 'Hallo ' . $person['vorname'] . ' ' . $person['nachname'];

    ergibt:

    Hallo Joschi Kuphal
    
  36. Objekte

    • Objekte sind Datenstrukturen, die anhand von Vorlagen (Klassen) erzeugt werden
    • Alle Objekte einer Klasse haben dieselben Methoden (sie »können« etwas), aber ggf. individuelle Eigenschaften (sie »haben / sind« etwas)
    • Zugriff auf Objekteigenschaften & -methoden per ->
  37. class Person {
        public $vorname;
        public $nachname;
        
        public function __construct($vorname, $nachname) {
            $this->vorname = $vorname;   
            $this->nachname = $nachname;   
        }
    
        public function vollerName() {
            return $this->vorname . ' ' . $this->nachname;
        }
    }
    
    $joschi = new Person('Joschi', 'Kuphal');
    
    echo $joschi->vorname;
    echo $joschi->vollerName();
    
    Joschi
    Joschi Kuphal
    
  38. Fallunterscheidungen

    Wenn … Dann (… Sonst)

    if ($x == 1) {
        // Code, der ausgeführt wird, wenn die Variable $x den Wert 1 hat
    
    

    } else { // Code, der in allen anderen Fällen ausgeführt wird }

  39. Komplexer …

    switch ($x) {
        case 1:
            // Code, der ausgeführt wird, wenn die Variable $x den Wert 1 hat
            break;
        case 2:
            // Code, der ausgeführt wird, wenn die Variable $x den Wert 2 hat
            break;
        case 3:
            // Code, der ausgeführt wird, wenn die Variable $x den Wert 3 hat
            break;
        default:
            // Code, der in allen anderen Fällen ausgeführt wird
    }
    
  40. Schleifen (Teil 1)

    Z.B. Durchlaufen einer Liste von Werten

    $obst = ['Apfel', 'Banane', 'Orange'];
    
    

    foreach($obst as $frucht) { echo $frucht . ' - '; }

    ergibt:

    Apfel - Banane - Orange -
    
  41. Schleifen (Teil 2)

    … oder Durchlaufen, so lange eine Bedingung erfüllt ist

    $x = 0;
    
    

    while ($x < 5) { echo $x . ' - '; $x = $x + 1; }

    ergibt:

    0 - 1 - 2 - 3 - 4 -
    
  42. Typkonvertierung

    Implizite Umwandlung von Datentypen

    echo 1 + TRUE;
    echo 2 . 'Bananen';
    echo 0 == NULL;
    echo 1 == '1';
    echo 1 === '1';
    

    ergibt:

    2
    2Bananen
    TRUE
    TRUE
    FALSE
    
  43. Aufgabe bis 3.11.2022

    • Durcharbeiten des PHP-Online-Tutorials unter https://www.learn-php.org
    • Inklusive der interaktiven Übungen am Ende jedes Schritts