Prof. Dr. Claus Brell Die eigene interaktive Internetseite...

Prof. Dr. Claus Brell Die eigene interaktive Internetseite – von Null auf Hundert Dienstag und Mittwoch 10. und 11.09.2013

Die eigene interaktive Internetseite – von Null auf Hundert Programm Eine eigene Seite im Internet aufbauen und mit interaktiven Komponenten anreichern: das kann man in zwei Tagen lernen. Im Vordergrund steht das praktische Einüben und Erproben an einfachen Beispielen. Die Grundlagen werden in jeweils sehr kurzen Vorträgen vermittelt. Das Seminar richtet sich in erster Linie an Personen aus Nicht-Informatik-Fachrichtungen. Zur Teilnahme sollten lediglich folgende Kenntnisse bereits mitgebracht werden:

Die Teilnehmer können einen Windows-PC mit Maus und Tastatur bedienen. Die Teilnehmer können mit dem Windows-Explorer Dateien von einem Ordner

in einen anderen verschieben und wiederfinden. Die Teilnehmer haben schon einmal mit einem Texteditor (Notepad …) oder

einer Textverarbeitung (Word …) gearbeitet. Die Teilnehmer können mit Google etwas im Internet finden. Die Teilnehmer stehen technischen Aspekten grundsätzlich offen gegenüber.

Am ersten Tag geht es um die Basics. Es werden einfache Internetseiten (HTML und CSS) erstellt. (Dieser Tag wäre für Einsteiger auch alleine sinnvoll):

Wie funktioniert das Internet – elementare Grundkenntnisse der Datenkommunikation.

Was benötige ich, um einfache Internetseiten zu erstellen – Tools und Methoden.

Wie finde ich einen Provider – wohin mit meinen Seiten. Wie fange ich an – meine erste Seite in HTML. Tabellen, Listen, Überschriften – strukturieren von Internet-Seiten Bilder einbinden und Seiten verlinken. Seiten gestalten mit CSS. Welche Schritte sind erforderlich, wenn die eigene Seite umfangreicher wird

– Content-Management und Co. Am zweiten Tag sollen die ersten interaktiven Programme entstehen. Dazu sind die Inhalte des ersten Tages Voraussetzung. Es werden Formulare in HTML und Scripte in der einfach zu erlernenden Internet-Programmiersprache PHP erstellt.

Wie funktionieren Formulare? Wie kann ich fertige Internetprogramme einsetzen – Google-Suche auf

meiner Seite. Welche Möglichkeiten der Realisierung für interaktive Webseiten gibt es –

von Javascript bis PHP. Erste Gehversuche in PHP. Interaktive Seite am Beispiel eines bmi-Rechners (Body Mass Index) Wie mache ich allein weiter – Tipps und Tricks Implementierung einer eigenen Testumgebung – XAMP. „Betreutes Spielen“ mit PHP

Inhalt:

1. Organisation

2. Internet

3. HTML

4. CSS

5. Provider finden

6. CMS und Co

7. Javascript (kurz)

8. Webserver aufsetzen

9. PHP

Sommerakademie 2013

Die eigene Internetseitevon Null auf Hundert

Prof. Dr. rer. nat. Claus Brell

10.09.2013

Folien unter: http://claus-brell.de

Organisation und Einstimmung

Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik

Claus Brell - zur Person 2

Physikstudium (angewandte Physik, Oberflächen und dünne Schichten)Universität Düsseldorf

Anwendungsentwicklung und DV-OrganisationKKB Lebensversicherung, KKB Bank

Vernetzung und Internet in der Landesverwaltung, zentrale DatenbankdiensteLandesamt für Datenverarbeitung und Statistik NRW (jetzt IT.NRW)

Projektorientierte und institutionelle Forschungsförderung (WGL-Institute, Fachhochschulen)Informationsmanagement und OrganisationWissenschaftsministerium NRW

Promotion in der Physikdidaktik zum Dr. rer. nat.Universität Bremen

Professur Hochschule NiederrheinLehrgebiete Wirtschaftsinformatik und Statistik

bis 1989

bis 1991

bis 2001

bis 2012

bis 2008

ab 2012


Überblick 3

1. Organisation heute und morgen, Themen2. Vorgehen, Zeitplan Pausen3. Benötigte Technik (Editor, Webserver mit PHP zum selber Experimentieren)

Weitere Foliensätze:- Wie funktioniert HTML, HTTP, Internet und Co?- HTML Einführung- CSS Einführung- Content Management Systeme- Internet Content Provider finden- Eigenen Testserver aufsetzen- Javascript – ein ultrakurzer Streifzug- PHP Einführung


Literatur 4

Münz, Stefan; Nefzger , Wolfgang: HTML 4.0 Handbuch. Franzis´, Poing, 1999, 3 Auflage

Krause, Jörg: PHP 5 - Webserverprogrammierung unter Windows und Linux. Hanser, München, 2005, 2 Auflage, Bibliothekssignatur TYD Krau


Internet-Quellen 5

Editor Notepad++: http://www.notepad-plus-plus.org/

Webserver Komplettsystem XAMPP: http://www.xampp.de

HTML lernen: http://de.selfhtml.org

CSS lernen: http://www.css4you.de

Javascript lernen: http://www.kostenlose-javascripts.de/tutorials/tutorials.htmlhttp://wiki.selfhtml.org/wiki/JavaScript/Tutorial

PHP lernen: http://www.selfphp.de

„Ihr bester Freund ist ….. Google.Ihr zweitbester Freund ist die Hochschulbibliothek.“


Organisation 6

Empfohlen:Zwei Personen arbeiten an einem Rechner und unterhalten sich über das, was sie tun.

Einloggen:Nutzer: - wird im Kurs mitgeteilt -Kennwort: - wird im Kurs mitgeteilt -

Pausen: nach Absprache


Vorgehen 7

Erarbeiten der Kenntnisse („Kennen“) undFähigkeiten („Können“) in kleinen Schritten.

1. Kurze Darstellung auf den Folien2. Nacharbeiten am PC3. „Betreutes Spielen“ zur Vertiefung


Benötigte Software: Notepad++ 8

Für die Erstellung von (einfachen) Internet-Seiten wird lediglich ein Texteditor benötigt.

Notepad (als Windows Bordmittel) wäre völlig ausreichend .

Ein Editor mit Syntax-Highlighting, z.B. Notepad++, ist bequemer und man kann schneller arbeiten.

Nächster Schritt: Installation von Notepad++.


Benötigte Software: Notepad++ 9

Notepad++ für zuhause:Download von http://notepad-plus-plus.org/download/v6.4.5.htmlWählen Sie:Notepad++ zip package : Don't want to use installer? Check this one (zip format).Vorteil: funktioniert auch auf USB-Stick.

Notepad hier: von gemeinsamen Laufwerk.

Arbeitsschritte (wird vorgeführt):1. Verzeichnis Daten auf c:\ anlegen. (Dann können Sie

alles auf USB-Stick mitnehmen)2. Verzeichnis notepad++ auf c:\Daten anlegen.3. Datei npp.6.4.5.bin.zip von gemeinsamen Laufwerk auf

c:\Daten\notepad++ kopieren.4. npp.6.4.5.bin.zip öffnen und in c:\Daten\notepad++

entpacken.5. c:\Daten\notepad++\notepad++.exe starten.6. Settings | Preferences | Language | English auf German

umstellen.


Notepad++ 10

So ähnlich sollte Notepad++ bei Ihnen aussehen.

Arbeitsauftrag:1.) Richten Sie nun Notepad++ auf Ihrem Rechner ein.2.) Schreiben Sie „Ich bin ein einfacher Text“in Zeile 1 und Ihre Vornamen in Zeile 23.) Speichern Sie unter c:\Daten\HTML\033\text.html3.) Doppelklicken Sie auf c:\Daten\HTML\033\text.html (sollte mit Browser geöffnet werden.)

c:\Daten\HTML\33\text.html


Arbeitsumgebung im Internet 11

Zum Ausprobieren (funktioniert auch von Zuhause) gibt es für jede Gruppe ein Verzeichnis auf einem Internet-Server:- wird im Kurs mitgeteilt -….Die jeweilige Nummer 001….. wird Ihnen bekannt gegeben.

Sie können Dateien hochladen und löschen. Dazu rufen Sie in Ihrem Internet-Verzeichnis das Unterverzeichnis ADM auf, z.b.- wird im Kurs mitgeteilt -

Arbeitsauftrag:1.) Laden Sie nun Ihre Datei text.html auf Ihr Internet-Verzeichnis hoch.2.) Testen Sie Datei mit dem Browser. Geben Sie in die Bearbeitungszeile- wird im Kurs mitgeteilt -ein


Weitere Foliensätze 12

Sie können nun HTML-Seiten erstellen und im Internet ablegen.Für die nächsten Schritte benötigen Sie ein wenig Grundverständnis über die Funktionsweise des Internet. Damit Ihre Internetseiten Struktur und Aussehen bekommen, benötigen Sie Kenntnisse in HTML und in CSS.

Die nachfolgende Anleitung für die Einrichtung eines eigenen Webservers benötigen Sie erst für den zweiten Tag, nicht jetzt.

Wenn Sie Ihre eigene Internet-Seite aufsetzen wollen, benötigen Sie außerdem einen Internet-Provider.

Wenn Sie viele gleichartige Seiten erstellen wollen oder im Team an einer Website arbeiten, werden Sie ein sogenanntes Content Management System (CMS) einsetzen. Joomla, Contao, Typo3, NPS5, Drupal, Wordpress sind solche Systeme.


Am 2. Tag: Webserver mit PHP (als Testsystem) einrichten 13

Warum eigener Webserver?

1. Erstellung interaktiver Internetseiten via Versuch&Irrtum geht schnell und macht Spaß.

2. HTML-Seiten können im lokalen Dateisystem getestet werden, Scriptebenötigen den Webserver.

3. Jedes mal zum Test das Script auf den Server im Internet hochladen ist lästig.

4. Lokal einen Webserver haben macht es noch schneller und macht noch mehr Spaß.

Welcher Webserver?

1. Wer Webadministrator werden will: verschiedene Webserver und Scriptsprachenversionen und Datenbankmanagementsysteme manuell einrichten.

2. Wer schnell „im Rennen“ sein möchte: vorkonfiguriertes Paket nehmen.3. XMAPP bietet Leistungen, die den gängigen Leistungen der Provider

entsprechen => zum Testen XAMPP installieren.


XAMPP einrichten in drei Minuten 14

Zuhause:

1. http://www.xampp.de aufrufen.2. XAMPP portable lite als .zip-Datei herunterladen (127 MB)3. .zip-Datei öffnen, das darin vorhandene Verzeichnis „xampp“ in des

Wurzelverzeichnis eines Laufwerks (c:\, oder USB-Stick…) ziehen.4. Xampp-control.exe starten.5. Apache starten.

HIer:

1. .zip-Datei von gemeinsamen Laufwerk auf c:\Daten kopieren.2. Dann wie oben.



So sollte es dann aussehen:



Testen Sie den Webserver mit dem Browser.Tagen Sie in die Browserzeile http://localhost oder http://127.1.1.1 ein.Das Ergebnis sollte so aussehen:

Klick auf Deutsch.


XAMP einrichten in drei Minuten 17

Unterhalb des Verzeichnisses c:\xampp sollte es so aussehen:

In das Verzeichnis „htdocs“ richten Sie ein weiteres Verzeichnis „www“ ein –dort speichern Sie Ihre HTML-Dateien und PHP-Scripte.


Einrichtung testen 18

Arbeitsauftrag:1.) Richten Sie auf dem PC vor Ihnen XAMPP ein wie auf den Folien beschrieben.2.) Kopieren Sie Ihre Dateien (HTML-Dateien, Bilder) vom Vortag in das Verzeichnis c:\xampp\htdocs\www.3.) Testen Sie mit dem Browser. Geben Sie in die Bearbeitungszeilehttp://localhost/www/bild.html oder http://127.1.1.1/www/bild.html ein.4.) ermitteln Sie Ihre IP-Adresse in der DOS-Box (CMD) mit dem Aufruf „ipconfig /all“.5.) Bitten Sie Ihren Nachbarn, auf Ihren Webserver mithttp://IPADRESSE/www/ zugreifen.

Sommerakademie 2013



10.09.2013


Wie funktioniert HTML, HTTP, Internet und Co?


Wofür benötigt man HTML? 2

Eine einfache Textseite ist eine einfache Textseite ist eine einfache Textseite…

Eine Informationsseite im Internet soll- Strukturiert sein.- Grafische Elemente enthalten.- Eine positive Anmutung haben.

Lösung:HTML Hypertext Markup LanguageHTML ist eine Seitenbeschreibungssprache mit sogenannten Tags.HTML gibt dem Browser Anweisungen zur Darstellung der Inhalte.HTML kann Texte strukturieren und Bilder hinzuladen.

HTML-Dateien können mit einem einfachen Texteditor erstellt werden.HTML-Dateien haben die Dateiendung .html oder .htm.


Anzeige eine HTML-Seite auf dem eigenen Rechner im Browser 3

Mein Rechner

Festplatte c:\

index.html

Verzeichnis \Daten\033\

Browser:

file://


Netz, Internet

Anzeige eine HTML-Seite im Internet / im lokalen Netz 4

Mein Rechner

Browser:

http://

Rechner im InternetFestplatte

index.html

Verzeichnis \Daten\033\

Webserver


Internet-Grundlagen (unpräzise, dafür kurz & knapp) Merksätze 5

Das Internet besteht aus vernetzten Rechnern (Großrechner, Notebooks, Smartphones…).

Anwendungen (Computerprogramme, Apps) auf diesen vernetzten Rechnern kommunizieren miteinander über das netzorientierte Protokoll TCP/IP.

Das World Wide Web (WWW) ist die Gesamtheit von Webservern im Internet, auf die mit Webbrowsern (IE, Firefox, Safari) zugegriffen werden kann.

Webserver und Webbrowser benötigen zusätzlich zum netzorientierten Protokoll TCP/IP das anwendungsorientiertes Protokoll HTTP (Hypertext Transfer Protocol).

HTTP unterstützt die Anfragen von Browsern nach Dateien, auf die der Webserver Zugriff hat.

Browser können Textdateien, die mit HTML strukturiert sind, auf dem Bildschirm darstellen („rendern“).

HTML unterstützt den Verweis auf andere Dateien im Internet („Links“).


Internet-Grundlagen (unpräzise, dafür kurz & knapp) Grafik 6

Rechner im InternetProvider: Hosteurope Festplatte

index.html(HTML)

Verzeichnis ….\Daten\033\

Webserverclaus-brell.de

Internet

LokalesNetz derHochschule

Router

Ihr Rechner

Browser:

TCP/IP

TCP/IP

TCP/IP

HTTP


HTML-Dateien im Internet 7

Damit der Browser Ihre Dateien darstellen / rendern kann, müssen die Dateien in der Beschreibungssprache HTML vorliegen.

Wenn nur Sie die Dateien sehen wollen, können diese auf Ihrer eigenen Festplatte liegen.

Wenn andere das auch auf ihren Rechnern sehen sollen, müssen die Dateien auf einen Rechner im Internet, der einen Webserver hat, übertragen werden.

nächster Schritt:

Erstellen von HTML-Dateien und Transfer der Dateien auf einen Webserver im Internet.

Sommerakademie 2013



10.09.2013


HTML Einführung


Wofür benötigt man HTML? 2

Eine einfache Textseite ist eine einfache Textseite ist eine einfache Textseite…

Eine Informationsseite im Internet soll• Strukturiert sein.• Grafische Elemente enthalten.• Eine positive Anmutung haben.

Lösung:• HTML Hypertext Markup Language• HTML ist eine Seitenbeschreibungssprache mit sogenannten Tags.• HTML gibt dem Browser Anweisungen zur Darstellung der Inhalte.• HTML kann Texte strukturieren und Bilder hinzuladen.

HTML-Dateien können mit einem einfachen Texteditor erstellt werden.HTML-Dateien haben die Dateiendung .html oder .htm.

Grundgerüst einer HTML-Seite 3

<html><head><title>Ich bin eine einfache Seite</title>

</head><body><h1>Ich bin eine Überschrift</h1>Ich bin einfacher Text<br>Claus Brell, 03.09.2013

</body></html>

Grundgerüst


Regeln und Tipps für HTML-Tags 4

HTML-Tags sind von spitzen Klammern eingeschlossen: <body>

Viele Tags haben ein Ende Tag: </body>

Tags können sauber geschachtelt werden, wie Matroschka- oder Fukurokuju-Puppen.

Inhalte stehen zwischen Tag und Ende-Tag: <li>ich bin ein Listeneintrag.</li>.

Sinnvoll: geschachtelte Tags im Editor einrücken.

Sinnvoll: Nicht mehrere Tags in einer Zeile.

HTML dient dazu, Struktur in ein Dokument zu bringen. Das Aussehen sollte über CSS (eigener Foliensatz) gesteuert werden.

Wichtige Internet-Quellen zum HTML-lernen:• http://de.selfhtml.org/• Google.


Erste HTML Tags 5

<html> Damit startet ein HTML-Dokument, endet mit </html><head> Kopfteil des HTML-Dokuments, für Metainformationen, endet mit</head><body> ab hier erfolgt der eigentliche Inhalt, endet mit </body><h1> Überschrift der Ebene 1, endet mit </h1><h2> Überschrift der Ebene 2, endet mit </h2><hr> horizontale Linie<br> Zeilenumbruch<ol> geordnete Liste<ul> ungeordnete Liste<table> Tabelle<tr> Tabellenzeile<td> Tabellenfeld

Mit folgenden HTML-Tags können Sie bereits gut strukturierte Informationsseiten im Internet aufbauen:


Erste strukturierte Seite 6

Arbeitsauftrag:1.) Erzeugen Sie mit Notepad++ eine Datei erste_seite.html mit dem unten gezeigten Inhalt.2.) Testen Sie die Datei mit dem Browser.3.) Laden Sie die Datei auf den Internet-Server und testen Sie dort mithttp://claus-brell.de/nullhundert/033/erste_seite.html


Spielen mit Tabellen 7

Arbeitsauftrag:1.) Erzeugen Sie mit Notepad++ eine Datei geschachtelte_tabelle.html mit dem unten gezeigten Inhalt.2.) testen Sie und laden Sie hoch.


Bilder einbinden 8

Beschreibung auf selfhtml: http://de.selfhtml.org/html/grafiken/einbinden.htm#referenz

Mit <img …> können Bilder in HTML-Seiten eingebunden werden.

Funktionsweise:1. Der Browser fordert die HTML-Datei vom Webserver an.2. Der Browser rendert die HTML-Datei und stößt auf das img-Tag.3. Der Browser wertet das img-Tag aus und fordert in einem zweiten

Übertragungsschritt die darin benannte Datei vom Webserver an.

Browser Webserver bild.html1

23


Bilder einbinden 9

Arbeitsauftrag:1.) Erzeugen Sie mit Notepad++ eine Datei bild.html mit dem unten gezeigten Inhalt.2.) Kopieren Sie vom gemeinsamen Laufwerk die Datei bild.jpg in Ihr Verzeichnis, testen Sie und laden Sie hoch.


Internetseiten vernetzen 10

Vorteil des WWW: Es kann in einer HTML-Datei auf eine andere Datei verwiesen werden. Damit werden Dokumente untereinander vernetzt.

Verweise in HTML-Dokumente heißen Links, die Adressen, die in den Links angegeben werden, heißen URL (Unique Request Locator).

So funktioniert es:



So sieht es aus:

Nachlesen bei selfhtml.org:http://de.selfhtml.org/html/verweise/definieren.htm#beispieleoder auchhttp://de.selfhtml.org/navigation/html.htm#verweise



Arbeitsauftrag:1.) Erzeugen Sie mit Notepad++ eine Datei uebersicht.html mit Verweisen auf Ihre Dateien bild.html, geschachtelte_tabelle.html, erste_seite.html.2.) Versehen Sie die Seite mit einer Überschrift, bringen Sie die Verweise in eine Tabelle oder eine Liste.3.) Testen Sie lokal, laden Sie hoch und testen Sie erneut.

So kann Ihr Ergebnis aussehen, muss aber nicht so aussehen:


Formulare 13

Mit Formularen können Daten in HTML-Seiten erfasst und an ein Programm auf dem Webeserver übermittelt werden.Das Programm auf dem Webserver verarbeitet die Daten und erzeugt eine HTML-Seite, die dann zum Browser übertragen und angezeigt wird.

Webbrowser Google1. http request

Webbrowser Google2.

Webbrowser Google3.

Google stelltErgebnisseite

zusammen

http://www.google.de/search?q=http

Ergebnisseite im Browseranzeigen

http response

Beispiel: Google Suche


Formulare, Google Suche 14

Probieren vor Studieren…..

Arbeitsauftrag:1.) Fügen Sie mit Notepad++ in Ihrer Datei bild.html den unten gezeigten Quelltextschnipsel für die Google-Suche ein.2.) Versehen Sie die Seite mit einer neuen Überschrift.3.) Testen Sie lokal, laden Sie hoch und testen Sie erneut.


Formulare, einfache Beispiele 15

<form method="get" action="antwort.php" enctype="multipart/form-data">Text in Zeile eingeben:<br><input type="text" name="TEXT" size="30"><br><input type="submit" name="L" value="Absenden"></form>


Formulare, einfache Beispiele 16

<textarea name="TEXT" cols=45 rows=5/></textarea>

<input type="submit" name="L" value="Absenden">


Formulare - Grundgerüst 17

<form method="get" action="antwort2.php" >…..Verschiedene Eingabefelder, Führungstexte etc……</form>

Auswertungsscript

Hier: Methode GET, es gibt auch noch POST, HEAD….


Formulare - Checkboxen 18

<form method="get" action="antwort2.php" >Eine oder mehrere Möglichkeiten in den Checkboxen auswählen:<br>

<input type="checkbox" name="AUSWAHL1" value="1">erste Auswahlmöglichkeit<br>

<input type="checkbox" name="AUSWAHL2" value="2">zweite Auswahlmöglichkeit<br>

<br><input type="submit" name="L" value="Absenden"></form>

Vorbelegung einer Checkbox mit: checked=„checked“.


Formulare - Radiobuttons 19

<form method="get" action="antwort2.php" >Genau eine M&oumlglichkeit in den Radiobuttons auswählen:<br>

<input type="radio" name="AUSWAHL" value="a">erste Auswahlmöglichkeit<br>

<input type="radio" name="AUSWAHL" value="b" checked="checked">zweite Auswahlmöglichkeit<br>

<br><input type="submit" name="L" value="Absenden"></form>

Beispiele unterhttp://....................../formulartest2.htm


Formulare, eigene entwerfen 20

Spielen ist wichtig…..

Arbeitsauftrag:1.) Erstellen Sie mit Notepad++ eine Datei meinformular.html mit einem Textfeld und einem weiteren Eingabefeld. 2.) Testen Sie lokal, laden Sie hoch und testen Sie erneut. Achten Sie auf die Eingabezeile im Browser….Verwenden Sie:<form method="get" action=„http://claus-brell.de/nullhundert/033/antwort2.php“ >


Fazit 21

Sie können:

• Einfache Internet-Seiten erstellen,• Bilder in Internet-Seiten einbinden,• Seiten mit Überschriften, Listen, Tabellen strukturieren,• Formulare für fertige Programme entwerfen.

Sie kennen:

• Funktionsweise des Zusammenspiels Browser - Webserver,• Editor für HTML-Seiten,• Informationsseiten im Internet, um selber weiter zu experimentieren.

Üben und Spielen mit HTML wird empfohlen.

Nächster Schritt:

Gestalten von Internetseiten mit CSS.

Sommerakademie 2013



10.09.2013


CSS Einführung


Wofür benötigt man CSS und wo finde ich Informationen? 2

HTML beschreibt die Struktur einer Internet-Seite.

CSS (Cascading Style Sheets) steuert das Aussehen der HTML-Elemente.

Zur Einstimmung:http://de.selfhtml.org/css/intro.htm

CSS-Tags können direkt in HTML-Seiten geschrieben werden.CSS-Tags können als separate Dateien für mehrere HTML-Dateien geschrieben werden (empfohlen für größere Projekte).

Wichtige Internet-Quellen zum CSS-lernen:• http://www.css4you.de• http://de.selfhtml.org/• Google.


CSS Beispiel 3

Drei Möglichkeiten, CSS-Tags mit HTML-Tags zu verbinden.• Im head• Im HTML-Tag• Als separate CSS Datei (nächste Folie)


CSS Beispiel 4

CSS als separate Datei.Vorteil: Mit der Änderung eines Stylesheets kann das Aussehen von allen HTML-Seiten geändert werden.Nachlesen: http://de.selfhtml.org/css/formate/einbinden.htm#separat


CSS, eigene Experimente 5

Arbeitsauftrag a:1.) Erzeugen Sie mit Notepad++ eine Datei meincss.css mit z.B. dem unten gezeigten Inhalt.2.) Binden Sie die Datei in zwei Ihrer HTML-Dateien ein3.) Testen Sie nur lokal.

Arbeitsauftrag b:1.) Fügen Sie mit Notepad++ in meincss.css zwei weitere Tags hinzu.2.) Speichern Sie und testen Sie die Auswirkungen af beide Dateien3.) Testen Sie nur lokal.


CSS, Hinweise 6

Ein mächtiges Instrument ist das HTML Statement <div>.Es dient dazu, ganze Bereiche zu kennzeichnen und einheitlich mit CSS zu formatieren.

Siehe dazu:http://de.selfhtml.org/html/text/bereiche.htm#blockhttp://www.css4you.de/wslayout1/index.html

Beispiel:<div style="text-align:center; padding:20px; border:thin solid red; margin:25px"><h1>Alles zentriert</h1><ul><li>alles zentriert</li><li>alles?</li><li><span style="font-weight:bold; color:red">alles!</span></li></ul></div>


Fazit 7

Sie können:

• Internet-Seiten Ihren Farb- und Größenvorstellungen anpassen.,

Sie kennen:

• Möglichkeiten, ganze Bereiche einheitlich zu formatieren,• Informationsseiten im Internet, um selber weiter zu experimentieren.

Üben und Spielen mit CSS wird empfohlen.

Nächster Schritt:

Internet-Provider finden.

Sommerakademie 2013



10.09.2013


Provider finden


Wofür benötigt man einen Provider? 2

Browser WebserverInternet

• Wer stellt die Hardware bereit?• Wer stellt die Internetanbindung

bereit?• Wer administriert den Webserver?• Wer besorgt die Internet-Adresse?• Wer kümmert sich um das Backup

der Datenbanken?

• Wer stellt die Internet-Anbindung bereit?

Siehe auch:http://de.wikipedia.org/wiki/Internetdienstanbieter

Liste von Diensteanbietern z.B. unterhttp://www.toptenhostlist.net/topten_web.php


Leistungen des Providers / Auswahlkriterien 3

Preis: Setup-Gebührenmonatliche Kostenversteckte Kosten

Leistungsumfang:Domains (Anzahl, Domainendung)Datenbank (MySQL, Version?)Programmiersprachen (PHP, Version?)Speicherplatz für ContentSpeicherplatz für MailTraffic-Grenzenvorinstallierte Software (CMS, Forum…)htaccess-DateienDatensicherung / BackupZertifikate (für https…)

Verfügbarkeit: 99% heißt, fällt an drei Tagen im Jahr aus.

Vertragslänge

Support / Service / Ansprechpartner


Beispiel 4

Domain Factory, abgerufen am 04.09.2013

Angebot mit einer Domain, 3 MySQL Datenbanken, PHP und Perl

Tipp: 1.) Besser klein anfangen als gar nicht.2.) Besser kurze Kündigungszeiten.3.) Provider ist kein Ehepartner – bei Mißfallen zügig wechseln


Provider suchen 5

Arbeitsauftrag:1.) Rücken Sie in Ihrer Reihe zusammen und2.) bearbeiten Sie gemeinsam:Produktrecherche:Reihe 1: 1&1 oder TelekomReihe 2: Host Europe oder VodafoneReihe 3: Strato oder O2Reihe 4: Freenet oder Netbeat

Ermitteln Sie die monatlichen Kosten für zwei Domains, 1 MySQL-Datenbank, PHP kein Traffic-Limit, min. 5GB Speicherplatz.


Fazit 6

Sie können:

• Provider im Internet finden,• Kriterien für die Auswahl aufstellen,• Kosten für das Hosting ermitteln.

Sie kennen:

• Einige Provider,• Deren Leistungen,• Deren Kosten.

Anfangen wird empfohlen.Achtung: gesetzliche Regelungen beachten(TMG: Impressumspflicht, Haftung für Inhalte, Haftung für Links, allgemeine Sorgfaltspflichten)

Nächster Schritt:

Nutzung von fertigen Softwarepaketen (Forum, CMS, Wiki).

Sommerakademie 2013



10.09.2013


CMS und Co.


Wofür benötigt man fertige Websoftware, z.B. CMS? 2

Wenn man alleine wenige individuelle Internetseiten aufbauen möchte:HTML-Seiten mit Texteditor.

Wenn man im Team umfangreiche gleich gestaltete Internetseiten aufbauen möchte:Content Management System (CMS)

Beispiele:• Hochschule Niederrhein nutzt Typo3.• Manche NRW- Behörden nutzen NPS6.• TV Schiefbahn e.V. nutzt Contao,

Triathlonabteilung nutzt Joomla.• Dann gibt es noch

- Drupal- Wordpress- …

Eine lange Liste von CMS:http://www.contentmanager.de/produkte/content_management_systeme.html


Was leistet ein CMS? 3

Aus der Wikipedia:Ein Content-Management-System (kurz: CMS, deutsch „Inhaltsverwaltungssystem“) ist eine Software zur gemeinschaftlichen Erstellung, Bearbeitung und Organisation von Inhalten (Content) …. Ein Autor mit Zugriffsrechten kann ein solches System in vielen Fällen mit wenig Programmier-oder HTML-Kenntnissen bedienen, da die Mehrzahl der Systeme über eine grafische Benutzeroberfläche verfügen.

Content Management Systeme trennen Aussehen und Inhalt, die Autoren pflegen die Inhalte, die zentrale Administration legt Verhalten und Aussehen fest.


Weitere Websoftware 4

Sammeln und vernetzen von Wissensschnipseln so wie Wikipedia:Wiki-Software:http://mediawiki.de

Weitere Wiki-Software:Confluence, DokuWiki, DrupalWiki, Foswiki, TikiWiki und TWiki.Kurzbeschreibungen unterhttp://blog.seibert-media.net/2011/08/03/studie-wiki-software-vergleich/

Diskussionsforen:PhpBB https://www.phpbb.com/Vergleich siehe z.B. http://forensoftware.de/

Groupware-Software (z. B. BSCW)Lernplattform (z.B. Moodle)Shop-Software (noch keine erprobt)….

Sommerakademie 2013



10.09.2013


Javascript Kurzeinführung


Dynamische Inhalte mit Javascript? 2

Aus der Wikipedia (verkürzt):JavaScript (JS) ist eine Skriptsprache, um Benutzerinteraktionen in HTML-Seiten auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS zu erweitern. Heute findet JavaScript auch außerhalb von Browsern Anwendung, so etwa auf Servern und in Microcontrollern.


Javascript läuft im Browser („Client-basiert“).Javascript kann direkt in HTML eingebettet werden (wie CSS)Javascript kann in eigene Dateien aufgelagert werden (wie CSS, empfohlen)


Ein einfaches Beispiel: BMI-Rechner 3


Vorteile und Nachteile von Javascript 4

Vorteile:• Kann ohne Webserver getestet werden.• Javascript ist stabil und wird weiterentwickelt.• Es gibt viele fertige Scripte (Google ist Ihr Freund).• Man kann sich schrittweise an Javascript herantasten und bestehende

HTML-Seiten um Dynamik erweitern.• Geeignet für GUI-Effekte: Popup-Fenster und Reiter und Reiter in

Webseiten und ….

Nachteile:• Nicht alle Browser interpretieren Javascript gleich.• Javascript kann im Browser ausgeschaltet sein.• Aus Sicherheitsgründen kann im Firmennetz / Verwaltungsnetz

Javascript ausgeschaltet sein.• In Javascript werden immer wieder Sicherheitslücken entdeckt.• Daten speichern über die aktuelle Sitzung hinaus ist so direkt nicht

möglich.• Quelltext ist einsehbar, Sie können kein Know How verstecken.

Folgerung:• Javascript kann eine sinnvolle Ergänzung zu serverbasierte Scripten sein.• Der Einsatz in „kritischen“ Projekten muss wohl überlegt werden.


5

Arbeitsauftrag:1.) Erzeugen Sie mit Notepad++ eine Datei bmirechner.html mit eingebettetem Javascript wie im Beispiel.2.) Testen Sie lokal, laden Sie hoch und testen Sie erneut.3.) Erweitern Sie das Programm so, das die Nachkommastellen abgeschnitten werden (Tipps: Math.round, Google Suche nach anderen BMI-Rechnern)


Fazit 6

Sie können:

• Interaktive Element mit Javascript in Internet-Seiten einbinden,

Sie kennen:

• Eine clientbasierte Scriptsprache, die mit dem Browser ausgeführt und getestet werden kann,

• Vor und Nachteile von Javascript.

Nächster Schritt:

Einrichten einer Testumgebung für serverbasierte ScriptsprachenUnd erste Experimente mit PHP.

Sommerakademie 2013



10.09.2013


PHP


Dynamische Inhalte mit PHP? 2

Aus der Wikipedia (verkürzt):PHP wird auf etwa 244 Millionen Websites eingesetzt (Stand: Januar 2013) und wird auf etwa 80 % aller Websites als serverseitige Programmiersprache verwendet (Stand: Juni 2013) und ist damit die am häufigsten verwendete Sprache zum Erstellen von Websites, Tendenz steigend. Zudem ist sie bei den meisten Webhostern vorinstalliert.


PHP läuft auf dem Webserver(„Server-basiert“).PHP kann direkt in HTML eingebettet werden (wie CSS).PHP kann als Programmiersprache auch außerhalb des Webservers eingesetzt werden.

Manche Informatiker sagen, PHP ist gar keine richtige Programmiersprache….Was kümmert es die Eiche, wenn sich die Sau ihr schrubbt?


Was ist ein Programm? 3

Arbeitsdefinition:Ein Programm (= Computerprogramm) ist die computergerechte Umsetzung einer genauen Vorschrift (Algorithmus), wie mittels eine Abfolge von Befehlen ein Aufgabe zu bewältigen ist.

Beispiel: Berechnung des größten gemeinsamen Teilers:Sei A die größere der beiden Zahlen A und B (gegebenenfalls vertauschen).2. Setze A := A - B.3. Wenn A und B ungleich sind, dann mit Schritt 1 fortfahren;

wenn sie gleich sind, dann den Algorithmus beenden:Diese Zahl ist der größte gemeinsame Teiler.

A=6, B=8, tauschen, A=8, B=6.A = 8-6 = 2. A<>B, also tauschen A=6, B=2.A = 6-2 = 4. A<>B, A=4, B=2.A = 4-2 = 2. A=B. fertig, A = kleinster gemeinsamer Teiler


Beispiel für ein Programm, programmiert in der Sprache PHP 4

Berechnung des größten gemeinsamen Teilers

while ($A != $B){if ($B > $A)

{$H=$B; $B=$A; $A=$H;}$A=$A-$B;}

echo $A;


Wie führt ein Computer ein Programm aus? 5

Ein Computer kann ein Programm nur ausführen, wenn es in einer geeigneten Form vorliegt:• Als digitale binäre Daten auf dem Datenträger (Festplatte, USB-Stick …)• Mit Befehlen, die die CPU kennt.

Programm.exe

Festplatte RAM(Hauptspeicher)

CPU(Prozessor)

stark vereinfacht:

0110 0010 1110 11..


Wie bekommt man ein Programm in eine computerausführbare Form? 6

Zwei von drei Möglichkeiten:1. Compiler: Quelltexte werden in ausführbare Form umgewandelt.2. Interpreter: Quelltexte werden zur Laufzeit in ausführbare Form umgewandelt. (PHP macht das so…)

QuellcodeProgramm.phpFestplatte

Interpreter

Interpreter stark vereinfacht:

Texteditor

echo "Hallo Welt!\n";

InterpreterPhp.exe

Hallo Welt


PHP-Script in der DOS-Box ausführen 7

PHP-Script

Nur zur Vereinfachung:.bat Datei um Script aufzurufen


PHP-Script im Webserver ausführen 8

PHP-Script im Verzeichnisc:\xammp\htdocs\www speichern

Arbeitsauftrag:1.) Erzeugen Sie mit Notepad++ eine Datei ganzeinfach.php.2.) Testen Sie lokal, laden Sie hoch und testen Sie erneut.3.) Für Ambitionierte: Erweitern Sie das Programm so, dass die Variablen $A und $B auch ausgegeben werden. Tipp: www.selfphp.de

Das folgende Vorgehen führt zu einem nicht richtigen und unschönen PHP-Script, funktioniert aber trotzdem…


Script verbessern 9

Unschön:1. Nicht jeder Browser (Handy) wird die Ausgabe des Webservers erkennen

und richtig ausgeben. 2. Um andere Zahlen zu multiplizieren, muss das Script geändert werden.

Lösung:1. in schönes HTML einbetten.

2. Variablen $A und $B über Formular betanken.


Script verbessern 10

Arbeitsauftrag:1.) Erzeugen Sie mit Notepad++ eine Datei multiplikatorformular.html mit Formular.2.) Testen Sie mit Antwortscript antwort2.php3.) Erzeugen Sie mit Notepad++ eine Datei multiplikator.php mit Auswertescript und stellen Sie das Formular um.3.) Testen Sie lokal, laden Sie hoch und testen Sie erneut.4.) Für Ambitionierte: Bauen Sie das Programm so um, dass es als BMI-Rechner funktioniert. Tipp: www.selfphp.de, $bmi=$kg/($cm*$cm/100/100);


Script verbessern 11

Unschön:1. Fehleingaben werden nicht abgefangen, das Programm ist unsicher.2. Formular und Auswertung sind getrennt.3. Es fehlen noch ein paar Servicefunktionen (Datumsausgabe etc.)4. Die Daten werden nicht gespeichert.

Lösung:1. Fehleingaben: Vollständige Kontrolle sehr umfangreich.2. Formular und Auswertung in ein HTML-Dokument / Script packen.3. Servicefunktionen hinzufügen.4. Speicherung der Daten in Textdatei (csv-Format), um Programm als

„Diätbegleiter“ nutzen zu können.


Formular und Auswertung in ein HTML-Dokument / Script packen. 12


Formular und Auswertung in ein HTML-Dokument / Script packen. 13

Arbeitsauftrag:1.) Erzeugen Sie mit Notepad++ eine Datei bmirechner.php.2.) Testen Sie lokal, laden Sie hoch und testen Sie erneut.

So sollte das Ergebnis aussehen:


Mit Servicefunktionen anreichern. 14

Arbeitsauftrag:1.) Erzeugen Sie mit Notepad++ eine Datei bmirechner2.php mit Hilfe Ihrer alten Datei bmirechner.php.2.) Testen Sie lokal, laden Sie hoch und testen Sie erneut.


Daten speichern. 15

Arbeitsauftrag:1.) Erzeugen Sie mit Notepad++ eine Datei bmirechner3.php mit Hilfe Ihrer alten Datei bmirechner2.php.2.) Testen Sie lokal, laden Sie hoch und testen Sie erneut. Schauen Sie sich mit dem Browser http://localhost/www/bmirechner3.csv an.


Fazit 16

Sie können:

• Interaktive Seiten mit PHP programmieren,• Daten in Formularen erfassen und mit PHP-Scripten auswerten,• Daten in Dateien speichern

Sie kennen:

• Quellen im Internet, um eigenständig vertieft PHP zu lernen.

Empfohlen:Regelmäßig kleine Scripte bauen und neue Funktionen ausprobieren.

Sie kennen noch nicht:

• Objektorientierte Programmierung mit PHP.• Nutzung der Grafikfunktionen von PHP• Einbindung umfangreicher Bibliotheken (für Statistik etc.)• Anbindung an relationale Datenbanken.


Betreutes Spielen: Funktionen definieren 17

Funktionen

<?php$x=5;$y=6;$z=multipliziere($x,$y);echo "Ergebnis: ".$z;function multipliziere($a,$b){

$c=$a*$b;echo "ich arbeite\n";return $c;

}?>


Betreutes Spielen: Auslagern von Programmteilen. 18

auslagern

Teile des Programmcodes können ausgelagert werden.<?php

include("INC/multipliziere.php");$x=5;$y=6;$z=multipliziere($x,$y);echo "Ergebnis: ".$z;

?>

Datei multipliziere.php<?php

function multipliziere($a,$b){

$c=$a*$b;echo "ich bin ausgelagert. schade.\n";return $c;

}?>

Prof. Dr. Claus Brell Die eigene interaktive Internetseite...

Documents

Transcript of Prof. Dr. Claus Brell Die eigene interaktive Internetseite...