oder: Wie man ein CMS benutzt und administriert. Wordpress 4.0 oder: Wie man ein CMS benutzt und administriert.
HTML & CSS <!DOCTYPE ... > <html> <head> Der Browser fragt beim Server nach der Datei “meinCSS.css”, und bekommt diese: <!DOCTYPE ... > <html> <head> <link rel="stylesheet" href="meinCSS.css" type="text/css" /> </head> <body> <h1>Hallo</h1> ... </body> </html> h1 { color: orange; font-weight: bold; } Bevor er die grosse Überschrift darstellt, schaut der Browser in “meinCSS.css” nach, ob hier ein bestimmtes Aussehen für h1-Elemente definiert ist – es ist, also wird “Hallo” orange und fett dargestellt
HTML & CSS <!DOCTYPE ... > <html> <head> <link rel="stylesheet" href="meinCSS.css" type="text/css" /> </head> <body> <div id="nav"> <ul> <li><a href="home.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </body> </html> Noch immer wird “meinCSS.css” benutzt: ... #nav { width: 60%; float: right; } Wenn der Browser sieht, dass dieser ganze Abschnitt (div) die id “nav” hat, schaut er in “meinCSS.css” nach, was das für die Darstellung bedeutet – in diesem Fall, dass der Abschnitt mit den drei Links die rechten 60% der Seite einnehmen soll
Inhalt | Struktur | Layout <div id=„chat“> Hallo! </div> Statische Webseite Der Webdesigner erstellt die Dateien (HTML, ggf. CSS separat), die der Host dann im Internet für die Clienten (Browser) bereit stellt. Also sieht jeder dieselbe, unveränderliche Webseite, die der Webdesigner gestaltet hat. Layout der Seite (CSS, ggf. separate Datei) Inhalt der Seite (Buchstaben, ...) Struktur der Seite (HTML)
Inhalt | Struktur | Layout <div id=„chat“> Hallo! </div> Dynamische Webseite: Der Webdesigner schreibt ein Programm (in PHP), das die benötigten Dateien (HTML, ggf. CSS) produziert. Deshalb kann die Seite unterschiedlich aussehen, in Abhängigkeit von Rechten oder Verhalten des Benutzers. Layout der Seite (CSS, ggf. separate Datei) Inhalt der Seite (Buchstaben, ...) Struktur der Seite (HTML)
Inhalt | Struktur | Layout <div id=„chat“> Hallo! </div> WEB2.0 / CMS: Die einzubeziehenden Inhalte werden in einer Datenbank gespeichert. Daher können sie flexibel benutzte/geordnet und sogar online geändert werden (mit den entsprechenden Rechten). Layout der Seite (CSS, ggf. separate Datei) Inhalt der Seite (Buchstaben, ...) Struktur der Seite (HTML)
Ein Anwendungsbeispiel Frontend: vom Client auszuführender Code was der Endbenutzer zu sehen bekommt Backend: vom Server auszuführender Code (inkl. Einstellungen) bestimmen das Ergebnis im Frontend
Content Management System Die gängigsten kostenlosen CMS sind: WordPress Joomla Drupal Typo3 Bei einem Content Management System – kurz CMS – geht es darum, den Inhalt einer Webseite, also den Content, zu verwalten. Im Gegensatz zu statischen Webseiten, deren Inhalt sich nicht oder nur selten ändert, werden CMS für dynamische Webseiten mit wechselndem Inhalt eingesetzt. Mit Hilfe von CMS ist es möglich, Inhalte ohne Programmierkenntnisse zu erstellen. Außerdem lassen sich Benutzer in Gruppen organisieren, denen wiederum unterschiedliche Rechte vergeben werden können. So lässt sich ziemlich genau einstellen, welcher Benutzer was darf. Bild: www.rackspace.com/blog/choosing-an-open-source-content-management-system-infographic/ Text: Lars Becker; http://www.wp-campus.de/content-management-system-kurz-erklaert/#prettyPhoto
Infografic: http://www. cms2cms
Also los: WordPress installieren Der Host ist bereits angemietet, die zu WordPress 4.0 gehörenden Dateien sind auf den Server geladen, die Datenbank ist angelegt, und das für jede(n) von ihnen. Jetzt müssen sie ihre WP-Version nur noch installieren: http://www.nksainf.ch/nicolasruh/wp-admin/install.php hier sollte natürlich ihr Name stehen, siehe Zettel
Wird im header angezeigt, hat nichts mit der URL zu tun. vornamenachname Passwort bitte merken! geben sie eine funktionierende Adresse an Häkchen entfernen !
hier geht’s zum administrator-login
Einloggen: http://www.nksainf.ch/nicolasruh/wp-admin/
Backend: http://www.nksainf.ch/nicolasruh/wp-admin/
Frontend: http://www.nksainf.ch/nicolasruh/
Der Beitrag... ist die Grundeinheit eines Blogs (WP kennt auch Seiten, aber damit beschäftigen wir uns später)
http://www. topwebhostinggeek http://www.topwebhostinggeek.com/how-to-use-wordpress-features-and-functionalities-infographic.htm
Aufgaben Zunächst sorgen sie für ein wenig Inhalt: Erstellen und Veröffentlichen sie > 5 Beispiel-Beiträge Experimentieren sie auch mit Bildern, Videos, Links, ... Machen sie sich mit der Text-Ansicht des Editors vertraut Setzen sie Beitragsbilder, Schlagwörter und Kategorien ein Überprüfen sie das Ergebnis im Frontend Machen sie sich weiter mit dem Backend vertraut: schauen sie sich an, welche Einstellungen man vornehmen kann probieren sie Verschiedenes aus, z.B. neues Theme installieren, Theme anpassen, Kommentare moderieren Aber Achtung! Sie sind der Administrator und müssen Dinge ggf. auch wieder in Ordnung bringen
Die grosse Aufgabe Sie haben jetzt ihre eigene WordPress-Seite. Auf dieser Seite sollen im Laufe der Zeit möglichst viele Informationen aufgeschaltet werden, die ihnen bei der Vorbereitung der Abschlussprüfung helfen können (Binf und/oder andere Fächer) Als Admin sorgen sie dafür, dass die Inhalte der Seite sinnvoll ausgewählt und inhaltlich korrekt sind, die Sprache klar und richtig ist und nötige Quellen angegeben sind die Strukturierung von Seite und Inhalten es Besuchern einfach macht, Relevantes zu finden das Layout der Seite einheitlich und ansprechend gestaltet ist und die Ordnung klar transportiert Ihre Seite wird gegen Ende des SJ anhand diese Kriterien bewerten (ganze Note, Kriterien bekommen sie noch genauer)
Die letzten 15 Minuten... Erstellen sie mindestens einen Beitrag, mit ab jetzt immer Erstellen sie mindestens einen Beitrag, mit Gut gewähltem Titel Sauber formuliertem Text (ca. 5 – 10 Sätze) Beitragsbild, z.B. Screenshot Kategorie(en) & Tag(s) – sobald wir das eingeführt haben Inhaltlich soll es in diesem Beitrag darum gehen, was sie heute im BInf (neues) gelernt haben. Heute könnten sie z.B. einen Beitrag zu Frontend/Backend schreiben, oder erklären, was ein CMS ist.
(Repetieren und Vertiefen) HTML & CSS (Repetieren und Vertiefen)
HTML & CSS seite.html <!DOCTYPE ... > <html> <head> <link rel="stylesheet" href=”style.css" type="text/css" /> </head> <body> <div class=”site-header"> </div> <div class=”site-main"> <div class=”site-footer"> </body> </html> style.css ... .site-header { width: 100%; height: 48px; } Das Beispiel, das uns jetzt eine Weile beschäftigen wird Sehr nah am WordPress Standard-Aussehen (nur etwas vereinfacht und nicht mehr dynamisch)
HTML & CSS seite.html style.css ... .post { margin: 2px 18px; <article id="post-4" class="post "> <header class="entry-header"> <h1 class="entry-title">Ein Beitrag</h1> </header><!-- .entry-header --> <div class="entry-content"> Text Text Text Text Text Text Text </div><!-- .entry-content --> </article><!-- #post-## --> <article id="post-1" class="post "> <h1 class="entry-title">Noch ein Beitrag</h1> Text Text Text Text Text Text Text Text </article><!-- #post-## style.css ... .post { margin: 2px 18px; color: #002AFF; } seite.html enthält zwei Beispiel-Beiträge In Teil 1 des Arbeitsblatts geht es darum, die Details der Formatierung diese Beiträge anzupassen
HTML & CSS seite.html <!DOCTYPE ... > <html> <head> <link rel="stylesheet" href=”style.css" type="text/css" /> </head> <body> <div class=”site-header”> </div> <div class=”site-main"> <div class=”main-content"> <div class=”post”> </div> <div class=”post”> </div> </div> <div id=”secondary"> </div> <div class=”site-footer"> </div> </body> </html> style.css ... .main-content { float: right; } #secondary { float: left; site.html enthält drei Hauptcontainer, der (mittlere) Hauptinhaltsbereich ist weiter unterteilt In Teil 2 des Arbeitsblatts geht es darum, diese Container zu positionieren, um bestimmte Layouts zu erreichen
Typisches Layout mit float
Layout-Variationen Das Grundgerüst kann man sich erstellen lassen, z.B. von diesem Layout-Generator: http://csscreator.com/version2/pagelayout.php
3. ggf. weitere Dateien nachladen Statische Webseite www-Server: Speichert Dateien (HTML, CSS, JS, ...) und stellt sie auf Anfrage bereit Client/Browser: Erfragt Dateien (per URL) und stellt sie dar. 1. Http-Request an URL 2. HTML-Datei schicken 3. ggf. weitere Dateien nachladen HTML, CSS, JS, ... Dateien schreiben Host mieten und einrichten Dateien hochladen (per FTP)
3. ggf. weitere Dateien nachladen Dynamische Webseite www-Server: Speichert PHP-Skripte, die bei Anfrage ausgeführt werden und HTML-Dateien produzieren Client/Browser: Erfragt Dateien (per URL) und stellt sie dar. 1. Http-Request an URL 2. HTML-Datei schicken 3. ggf. weitere Dateien nachladen PHP, CSS, JS, ... Dateien schreiben Host mieten und einrichten Dateien hochladen (per FTP)
CMS (content management system) www-Server: Erfragt Inhalte der Seite aus einer Datenbank (SQL), baut diese dann mit PHP in HTML-Datei ein Client/Browser: Erfragt Dateien (per URL) und stellt sie dar. 1. Http-Request an URL 2. HTML-Datei schicken 3. ggf. weitere Dateien nachladen erfragt Daten gibt Daten zurück Zu Beginn: CMS (inkl. Datenbank) installieren Dann: Interaktion wie normaler Client, aber als admin eingeloggt Seite verändern über Backend
Auf einen Blick: Browser WWW-Server Zeitachse statische Webseiten dynamische Webseiten WWW-Server JavaScript Datenbank Server WWW-Server Browser weiss, wie man WWW-Server findet, versteht HTML & CSS (und JavaScript), kümmert sich um die Darstellung, kann Parameter übergeben (POST/GET) weiss, wie man mit Datenbank Server spricht, kann Parameter auswerten und PHP verarbeiten, gibt HTML-Code an Browser weiter kann mySQL Anfragen beantworten und Daten dauerhaft (= Persistenz) speichern, kümmert sich um die Verwaltung der Daten HTML-Dateien (CSS, JavaScript) Client Server PHP mySQL Client Server
Datenbanken DB-Anfragen mit mySQL
Wozu Datenbanken? Daten / Werte Lösung Abfrage benötigt Wo Gespeichert? wenige Variablen Name Arbeitsspeicher (des laufenden Programms) einige Datenstrukturen (z.B. Arrays) Name[Index] viele Datenbank SQL Tabellenname, Attribute, ggf. Filter Datenbankserver (zentral, persistent, multiuser) sehr viele extrem viele Datenbank(en)
Datenbanksystem (DBS) Die Grundidee Anwender, Anwendungen Antwort (Tabelle) Abfrage (SQL) ID String Zahl Datum 1 xxx 324 1.2.2013 3 LoL 17 3.6.1989 Datenbanksystem (DBS)
Fachbegriffe: (DBS = DB + DBMS) Anwendungen Schnittstelle: Structured Query Language (SQL) Datenbanksystem (DBS) Datenbank (DB) Datenbank Management System (DBMS)
Die Fundbüro Analogie Kunden Fundbüro Verwalter Fundstücke Schnittstelle??? Fundbüro Fundstücke Verwalter
Definition Ein Datenbanksystem (DBS) ist eine Zusammenfassung von strukturierten Daten (Datenbank, DB), die von einer speziellen Software (Data Base Management System, DBMS) verwaltet und über eine definierte Schnittstelle vielen Nutzern oder Anwendungen gleichzeitig und kontrolliert zur Verfügung gestellt werden.
Datenbanksysteme Vorteile Nachteile Dauerhafte Speicherung von großen Datenbeständen Redundanz und Inkonsistenz vermeiden durch die zentrale Datenverwaltung Effiziente Verwaltung von großen Datenbeständen (Speicherplatz, Zugriffsgeschwindigkeit) Einheitliche Schnittstelle (Anfragesprache) für den Zugriff auf Daten Regelt den gleichzeitigen Zugriff durch mehrere Benutzer oder Anwendungen Ermöglicht zentrale Backup-Strategien nur noch indirekter Zugriff auf Daten zusätzliche Abstraktionsebene zusätzlicher Aufwand (Datenbankserver bereitstellen, extra Anfragesprache lernen)
Wer benutzt ein DBS? und warum (nicht)? Amazon? iTunes? Wikipedia? iPhoto? Ryanair? Picasa? Ihre Bank? Flickr? Ein Chat? Google? Ein Blog? Windows? Ihr E-mail Client?
Datenbanksysteme benutzen Anwender, Anwendungen Antwort (Tabelle) Abfrage (SQL) ID String Zahl Datum 1 xxx 324 1.2.2013 3 LoL 17 3.6.1989 Datenbanksystem (DBS)
Was für Daten werden in einem DBS verwaltet? Was ist überhaupt ein Datum? Welche Datenformate werden unterstützt? In welcher Form existieren die Daten in der Datenbank? Fundstücke Fundbüro Kunden Verwalter
Die „strukturierten Daten“ ... stellt man sich am besten als Regale oder Tabellen vor In welcher Form die Daten tatsächlich (physikalisch) gespeichert sind, ist unerheblich, da sie sowieso nur über die Schnittstelle (Abfragesprache SQL) zugänglich sind Land LNR Name Einwohner Hauptstadt Kontinent DK Dänemark 5.16 Kopenhagen Europa D Deutschland 81.34 Berlin Europa IND Indien 761.00 Delhi Asien RWA Rwanda 6.30 Kigali Afrika … … … … …
Elemente einer Tabelle Tabelle, Entitätsmenge Zeile, Datensatz, Entität Eigenschaftswerte ~ Domain Attribute, Eigenschaften Schlüsselattribut, Hauptschlüssel Tabellenname Fundstücke Nummer Art Farbe Funddatum Fundort Finder 14555 Schirm Blau 08.13.2000 Bus Nr.12 Stalder Roger Wichleren 8779 Neuhausen 14556 Schlüssel - 09.12.2000 Bahnhof Hegi Roger Brandweg 12 9876 Zuchwil 14557 ...
ER-Diagramm Tabelle, Entitätsmenge Nummer Fundort Fundstücke Farbe Zeile, Datensatz, Entität Eigenschaftswerte Schlüsselattribut, Hauptschlüssel Tabellenname Attribute, Eigenschaften Fundstücke Farbe Finder Art Fundort Nummer Funddatum
Schnittstelle SQL SELECT [Attribute] FROM [Tabelle] WHERE [Bedingung]; SQL = Structured Query Language. Bezeichnet eine Sprache zur Kommunikation mit Datenbanken. Ist international genormt und wird von vielen DBS verstanden. Wird im Folgenden zur Formulierung von Abfragen eingesetzt. Syntax einer (einfachen) SQL-Abfrage: SELECT [Attribute] FROM [Tabelle] WHERE [Bedingung]; Die WHERE-Klausel ist optional, aber oft wichtig (= Filter) Es gibt noch einige weitere optionale Klauseln, z.B. zum Ordnen oder Zusammenfassen der Antwort-Tabelle Tabelle anzeigen SQL wird schon ausgegeben.
Datenbankzugriff - Ein erstes Beispiel SELECT Name, Einwohner, Kontinent FROM Land WHERE Einwohner > 10 Länder mit über 10 Mio. Einwohner Land LNR Name Einwohner Hauptstadt Kontinent DK Dänemark 5.16 Kopenhagen Europa D Deutschland 81.34 Berlin Europa IND Indien 761.00 Delhi Asien RWA Rwanda 6.30 Kigali Afrika … … … … … Diese Tabelle stellen wir uns vor, eigentlich müssen wir aber gar nicht wissen, wie die Daten intern strukturiert sind Ergebnistabelle Name Einwohner Kontinent Deutschland 81.34 Europa Indien 761.00 Asien … … … Diese Tabelle bekommen wir als Antwort geschickt, sie enthält den zur Anfrage passenden Teil des Datenbestands
http://dev.mysql.com/doc/refman/5.5/en/select.html
SQL-Abfrage Üben SQLTutorial.zip entpacken index.html (im entpackten Ordner) mit Browser öffnen Kapitel 1 & 2 machen (Lektion & Übung, probenrelevant)
Exkurs: Datenbanken im Internet Das Internet wird interaktiver: WEB 2.0 Inhalte (z.B. Text, Bilder, Daten,...) einer Seite werden separat gespeichert, als Datensätze in einem DBS, und erst beim Aufruf der Seite dynamisch (meist per PHP) in ein HTML-Gerüst eingebaut Damit kann der Inhalt einer dynamischen Webseite vom Benutzer abhängig gemacht werden (Identität, Rechte, Verhalten, ...)
Benutzen Sie diese Elemente Benutzen Sie diese Elemente* um mithilfe eines Schaubilds zu erklären, wie ein Gästebuch (online) funktioniert * es müssen nicht alle Elemente benutzt werden, manche werden mehrfach gebraucht Zeitachse HTML Anfrage Browser statische Webseiten PHP Verarbeitung dynamische Webseiten WWW-Server mySQL Auswertung CSS Server Darstellung Datenbank Server POST/GET Client Parameterübergabe Formulare Codeübergabe
Meine Lösung Browser WWW-Server Zeitachse statische Webseiten Browser dynamische Webseiten WWW-Server Datenbank Server WWW-Server Browser weiss, wie man WWW-Server findet, versteht HTML (+ Formulare) & CSS, kümmert sich um die Darstellung, kann Parameter übergeben (POST/GET) weiss, wie man mit Datenbank Server spricht, kann Parameter auswerten und PHP verarbeiten, gibt HTML-Code an Browser weiter kann mySQL Anfragen beantworten und Daten dauerhaft speichern, kümmert sich um die Verwaltung der Daten HTML-Dateien, PHP Client Server mySQL Client Server
Forms (HTML) <html><body> <form> <select> <option>Paint</option> <option>Brushes</option> <option>Erasers</option> </select> Quantity: <input type="text" /> <input type="submit" /> </form> </body></html> dde dde dde
HTML PHP http://www.mywebsite.ch/process.php?item=##&quantity=##" <html><body> <form action="process.php" method="get"> <select name="item"> <option>Paint</option> <option>Brushes</option> <option>Erasers</option> </select> Quantity: <input name="quantity" type="text" /> <input type="submit" /> </form> </body></html> dde dde dde http://www.mywebsite.ch/process.php?item=##&quantity=##"
PHP SQL HTML <html><body> <?php $quantity = $_GET['quantity']; $item = $_GET['item']; $result = mysql_query("SELECT price FROM goods WHERE item=$item") $price = ... echo "You ordered ". $quantity . " " . $item . ".<br />"; echo "Total price: ". $quantity*$price.<br />"; ?> </body></html>
Wo wohnen die Daten? Zeitachse Browser WWW-Server statische Webseiten dynamische Webseiten WWW-Server Datenbank Server DB DBS DBMS WWW-Server Browser HTML kann Daten enthalten, alle vom Browser dargestellten Daten müssen letztendlich in HTML eingebunden sein PHP kann Daten enthalten PHP kann auch Daten lokal lesen oder speichern, z.B. CSV, XML die Datenbank ist speziell darauf ausgerichtet Daten zu speichern und zu verwalten Darstellung: statisch Verarbeitung: dynamisch Bereitstellung: persistent Dateien, PHP Client Server mySQL Client Server
Wie funktioniert das Internet?
Wir spielen Internet IPvS(imple)
IPvS(imple) Rollen Router A MAC: IP: 1.2.3.9 3.3.3.1 Ziel Maske IP: 1.2.3.9 3.3.3.1 Ziel Maske Gateway Schnittstelle 1.2.3.1 9.9.9.0 1.2.3.9 3.3.3.1 4.5.6.1 3.3.3.2 8.8.8.1 3.3.3.3 1.1.1.1 0.0.0.0 Client MAC: IP: 1.2.3.4 DNS: 4.5.6.4 Gateway: 1.2.3.9 Router B MAC: IP: 4.5.6.9 3.3.3.2 Ziel Maske Gateway Schnittstelle 4.5.6.1 9.9.9.0 4.5.6.9 3.3.3.1 3.3.3.2 1.2.3.1 8.8.8.1 3.3.3.3 1.1.1.1 0.0.0.0 DNS-Server MAC: IP: 4.5.6.4 DNS: 4.4.4.4 Gateway: 4.5.6.9 Router C MAC: IP: 3.3.3.3 8.8.8.1 Ziel Maske Gateway Schnittstelle 3.3.3.1 9.9.9.0 3.3.3.3 8.8.8.1 1.2.3.1 1.2.3.9 4.5.6.1 4.5.6.9 7.8.9.1 7.8.9.9 1.1.1.1 0.0.0.0 8.8.8.9 WWW-Server MAC: IP: 7.8.9.4 DNS: 4.4.4.4 Gateway: 7.8.9.9 Router D MAC: IP: 8.8.8.2 7.8.9.9 Ziel Maske Gateway Schnittstelle 8.8.8.1 9.9.9.0 8.8.8.2 7.8.9.1 7.8.9.9 3.3.3.1 1.1.1.1 0.0.0.0
IPvS(imple) Daten HTTP-Request des Clients: GET /index.html HTTP/1.1 Host: www.beispiel.ch index.html auf WWW-Server: <!DOCTYPE ... > <html> <head> <title>Beispiel Webseite</title> <link rel="stylesheet" type="text/css" href="css/beispiel.css"> ... </head> <body> <h1>Hallo</h1> <img src="bilder/bild.jpg" alt="Bild“ /> </body> </html> DNS-Request des Clients: URL IP www.beispiel.ch ? Lookup-liste auf DNS-Server: URL IP www.beispiel.ch 7.8.9.4 www.leo.org 9.8.7.6 ...
ARP-Request
IPvS(imple) Topologie DNS-Server: 4.5.6.4 Client: 1.2.3.4 3.3.3.2 4.5.6.9 1.2.3.9 3.3.3.1 3.3.3.3 8.8.8.1 8.8.8.2 7.8.9.9 WWW-Server: 7.8.9.4
Übersicht Ausprobieren: http://www3.rad.com/networks/2005/clieserv/ClieServ.swf WIKI: TCP_IP_Applet.zip entpacken startApplet.html öffnen Übersicht