Hallo!
Matthias Edler-Golla
matthias.edler-golla@hm.edu
http://matthias-edler-golla.de
PHP
A popular general-purpose scripting language that is especially suited to web development. Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.
Die Skriptsprache ist schon mehr als 25 Jahre alt, freie Software, wird regelmäßig aktualisiert – und ist noch super weit verbreitet. Viele Content Management Systeme wie z.B. Wordpress, Drumla oder Typo3 nutzen PHP.
Die Abkürzung PHP stand am Anfang für „Personal Home Page Tools“, aktuell für „PHP: Hypertext Preprocessor“.
Scriptsprache auf dem Server
PHP benötigt einen Server, um ausgeführt werden zu können.
Deswegen installieren wir uns auf den Laptops Lavarel Herd (nächste Slides), der local einen Server erzeugt.
PHP-Code direkt in HTML einfügen
Benennt man eine .html-Datei (index.html) in eine .php-Datei (index.php) um, kann man direkt in die HTML-Datei PHP-Code einfügen und ausführen lassen – allerdings muss die Datei dafür einem Server liegen…
PHP
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>PHP Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="author" content="Matthias Edler-Golla" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Verdana, sans-serif;
}
main {
width: clamp(300px, 80%, 960px);
margin: 2% auto;
}
span {
color: red;
}
</style>
</head>
<body>
<main>
<h2>Überschrift</h2>
<p>ganz normales HTML</p>
<h3>Datum und Uhrzeit</h3>
<p>automatisch via PHP eingefügt…</p>
<!-- PHP eingefügt! -->
<p><span><?php echo date("d.m.Y, H:i:s"); ?></span>, Matthias Edler-Golla</p>
</main>
</body>
</html>Online
Schaut Euch die Seite an – und auch den Source-Code. Im Source-Code ist die PHP-Anweisung für Datum und Uhrzeit nicht sichtbar…
Das Content Management System „Kirby“
Kirby ist ein Datei-basiertes Content Management System – es wird keine Datenbank benötigt!
Damit läuft Kirby auf allen Servern, auf denen PHP installiert ist – die Hosting-Kosten sind sehr günstig…
Download
Bitte ladet Kirby herunter
Arbeits-Ordner
Legt Euch einen Ordner an, in den Ihr die Kirby-Installation dann verschiebt. Bitte verwendet dazu nicht den Desktop!
Bei mir liegt die Kirby-Demo bei HM/25SoSe/Projekt/05_Kirby_Demos
Entpackt dort die Datei main.zip
Lavarel Herd und Kirby installieren
Bitte installiert Lavarel Herd auf Euren Macs oder PCs – die Software ist kostenlos!
Bitte schaut Euch das Video an!
Startet Herd – in der Menüleiste wird das entsprechende Symbol sichtbar
Settings von Herd
Hier den Ordner auswählen, in dem sich das starterkit-main befindet.
Wenn Ihr wollt, könnt Ihr dort auch gleich festlegen, dass Ihr mit VSCode die Dateien bearbeiten möchtet.
Kirby bei Lavarel Herd starten
Ihr könnt direkt auf http://starterkit-main.test klicken, um die Site im Browser zu starten
Kirby im Browser starten
Alternativ könnt Ihr im Browser die Adresse eingeben:
Tip
Wie Ihr seht, habe ich im Ordner noch zwei weitere Ordner (php-datum sowie plainkit-main), auch diese könnt Ihr einfach im Browser starten:
Kirby Ordner Struktur
Kirby hat eine sehr logische Ordner-Struktur – heute schauen wir uns nur zwei wichtige Ordner an:
Ordner „assets“
Die gezeigten CSS-Dateien könnt Ihr genauso bearbeiten wie Ihr es im Webkurs gelernt habt…
Ordner „content“
Aufgabe
Ändert mal die Nummerierung der Ordner bei content und ladet die Site im Browser neu – was ändert sich?
Neuen Ordner und neue Datei bei „content“ anlegen
Den Ordner könnt Ihr direkt im Finder anlegen, die Text-Datei z.B. in VS-Code
Inhalt der Text-Datei
Title: Testseite
----
Text:
Hier etwas **toller** TextSchaut Euch die Site wieder im Browser an – das sollte dann in etwas so aussehen:
Auszeichnungssprache Markdown
Markdown ist eine vereinfachte Auszeichnungssprache, die von John Gruber entworfen und im Dezember 2004 mit Version 1.0.1 spezifiziert wurde.
Markdown macht es viel einfacher und schneller, beispielsweise HTML-Code zu schreiben.
Diese Auszeichnungssprache ist sowohl von Menschen als auch Maschinen ziemlich einfach zu lesen – und ist deswegen super weit verbreitet.
Syntax Beispiele
# h1 Überschrift
## h2 Überschrift
### h3 Überschrift
Ein Absatz mit *kursiv* geschriebener Text
Und ein anderes Absatz mit **fett** geschriebenem Text
Man kann auch **fett und *kursiv* kombinieren**
# Listen
## Ungeordnete Listen
* Item 1
* Item 2
* Item 3
* Item 4
* Item 4a
* Item 4b
## Geordnete Liste
Beachtet die Nummerierung – kann immer "1." bleiben!
1. Item 1
1. Item 2
1. Item 3
1. Item 3a
1. Item 3b
## Links
Schaut euch mal die [Süddeutsche Zeitung](https://www.sueddeutsche.de/) an…Aufgabe
Fügt den oben aufgeführten Text in der Datei default.txt unterhalb von Text: ein und ändert dort auch den Title zu Markdown-Test
Was seht Ihr, wenn Ihr Euch jetzt die Site anseht? – wie schaut der Source-Code der Seite aus?
KirbyText
KirbyText can be used in your content in addition to Markdown tags to simplify common tasks like inserting links, emails, images, etc.
Mit KirbyText könnt Ihr einfacher als mit Markdown häufig benutzete Elemente einfügen – hier ein paar Beispiele:
Der Editor kam völlig durcheinander, als ich das als Code zeigen wollte – deswegen hier der Screenshot!
Referenz-Seite
vielleicht bookmarked Ihr Euch die Referenz-Seite zu KirbyText? Da sind noch einige andere praktische Sachen aufgelistet…
Kirby Panel
Das Kirby Panel ist das Backend von Kirby, in dem Ihr (oder Eure Kunden) Inhalte editieren könnt, ohne HTML zu können…
Das Panel erreicht Ihr immer, wenn Ihr im Browser an die URL Eurer Kirby-Website "/panel" anhängt – hier also
http://starterkit-main.test/panel/
Passwort geschützter Bereich
Das Panel ist logischerweise Passwort-geschützt. Bitte gebt dort Eure bevorzugte eMail-Adresse und ein Passwort ein.
Merkt Euch die Kombination bitte gut!
Kirby Tutorials auf YouTube
Sehr übersichtlich gemachte Videos der Macher von Kirby…
Bitte schaut Euch auch dort mal um!