Post on 30-Jun-2020
transcript
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, claus.brell@hs-niederrhein.de, 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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
Ü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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.“
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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++.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
XAMPP einrichten in drei Minuten 15
So sollte es dann aussehen:
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
XAMPP einrichten in drei Minuten 16
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Die eigene Internetseitevon Null auf Hundert
Prof. Dr. rer. nat. Claus Brell
10.09.2013
Folien unter: http://claus-brell.de
Wie funktioniert HTML, HTTP, Internet und Co?
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
Anzeige eine HTML-Seite auf dem eigenen Rechner im Browser 3
Mein Rechner
Festplatte c:\
index.html
Verzeichnis \Daten\033\
Browser:
file://
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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“).
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Die eigene Internetseitevon Null auf Hundert
Prof. Dr. rer. nat. Claus Brell
10.09.2013
Folien unter: http://claus-brell.de
HTML Einführung
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
Grundgerüst einer HTML-Seite 3
<html><head><title>Ich bin eine einfache Seite</title>
</head><!-- ich bin ein Kommentar und werde nicht angezeigt --><body><h1>Ich bin eine Überschrift</h1>Ich bin einfacher Text<br>Claus Brell, 03.09.2013
</body></html>
Grundgerüst
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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:
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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:
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
Internetseiten vernetzen 11
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
Internetseiten vernetzen 12
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:
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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>
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
Formulare, einfache Beispiele 16
<textarea name="TEXT" cols=45 rows=5/></textarea>
<input type="submit" name="L" value="Absenden">
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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….
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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“.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
Formulare - Radiobuttons 19
<form method="get" action="antwort2.php" >Genau eine Möglichkeit 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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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“ >
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Die eigene Internetseitevon Null auf Hundert
Prof. Dr. rer. nat. Claus Brell
10.09.2013
Folien unter: http://claus-brell.de
CSS Einführung
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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)
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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>
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Die eigene Internetseitevon Null auf Hundert
Prof. Dr. rer. nat. Claus Brell
10.09.2013
Folien unter: http://claus-brell.de
Provider finden
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Die eigene Internetseitevon Null auf Hundert
Prof. Dr. rer. nat. Claus Brell
10.09.2013
Folien unter: http://claus-brell.de
CMS und Co.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Die eigene Internetseitevon Null auf Hundert
Prof. Dr. rer. nat. Claus Brell
10.09.2013
Folien unter: http://claus-brell.de
Javascript Kurzeinführung
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Browser WebserverInternet
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)
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
Ein einfaches Beispiel: BMI-Rechner 3
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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)
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Die eigene Internetseitevon Null auf Hundert
Prof. Dr. rer. nat. Claus Brell
10.09.2013
Folien unter: http://claus-brell.de
PHP
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Browser WebserverInternet
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?
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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;
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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..
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
PHP-Script in der DOS-Box ausführen 7
PHP-Script
Nur zur Vereinfachung:.bat Datei um Script aufzurufen
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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…
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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);
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
Formular und Auswertung in ein HTML-Dokument / Script packen. 12
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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:
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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;
}?>
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik
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;
}?>