IT-Projekt ( ITP WS2012 00.pdf) - fh-dortmund.de · IT-Projekt (_ITP_WS2012_00.pdf) Prof. Dr. Kai Luppa Fachhochschule Dortmund Wintersemester 2012

IT-Projekt (_ITP_WS2012_00.pdf)

Prof. Dr. Kai Luppa

Fachhochschule Dortmund

Wintersemester 2012

Inhaltsverzeichnis

1 Informationen

2 Einleitung

3 Erstes Beispiel

4 HTML

5 CSS

6 JavaScript/jQuery

7 PHP

Inhaltsverzeichnis

1 Informationen1.1 Organisatorisches1.2 Fachliche Motivation

2 Einleitung

3 Erstes Beispiel

4 HTML

5 CSS

6 JavaScript/jQuery

7 PHP

Informationen Einleitung Erstes Beispiel HTML CSS JavaScript/jQuery PHP

Lernziele

Den Prozess der Verbrauchsdatenerfassung elektrischer Energieerklären können

Die Begriffe automatische Zählerauslesung und Lastgangerklären können

Das eigene Thema des IT-Projekts einordnen und erklärenkönnen

Prof. Dr. Kai Luppa Fachhochschule Dortmund



Organisatorisches

Veranstaltungen

Gruppen 39 - 43:Montags, 14:55 - 18:25 Uhr (08 - 11 Stunde)Raum A113

Gruppen 34 - 38:Mittwochs, 08:15 - 11:45 Uhr (01 - 04 Stunde)Raum A113

Abschluss:Präsentation (30 Min)Ausarbeitung (15 - 20 Seiten)ECTS-Punkte: 7




Organisatorisches

Spielregeln für eine gute Zusammenarbeit und einerfolgreiches IT-Projekt

Meine Annahme: Sie sind freiwillig und aus Interesse hier ;-)

Die Veranstaltungen beginnen pünktlich:Montags um 14:55 UhrMittwoch um 08:15 Uhr

Handys sind lautlos oder aus - im Raum A113 wird nichttelefoniert

Im Raum A113 wird nicht gegessen

Konstruktive Kritik zur Veranstaltung und zum Skript isterwünscht




Organisatorisches

Literaturempfehlung

Münz, Stefan; Gull, Clemens: HTML5 Handbuch. Franzis VerlagOnline verfügbar unter:http://webkompetenz.wikidot.com/docs:html-handbuch

Vollendorf, Maximilian; Bongers, Frank: jQuery - DasPraxishandbuch. Galileo Press

Reimers, Stefan; Thies Gunnar: PHP 5.4 & MySQL 5.5 - Dasumfassende Handbuch. Galileo Press

Spiering Markus; Haiges Sven: HTML5-Apps für iPhone undAndroid. Franzis Verlag




Fachliche Motivation

Verbrauchsdatenerfassung elektrischer Energie





Verbrauchsdatenerfassung mit Smart Metering





Verbrauchsdatenerfassung - Lastgang





Gruppen und Themen

Gruppe Thema

34 Entwurf und Implementierung einer Web-Anwendung zur Eingabe vonVerbrauchsdaten (kWh)

35 Entwurf und Implementierung einer serverseitigen Geschäftslogik zur Ver-arbeitung von Verbrauchsdaten (kWh)

36 Entwurf und Implementierung einer grafischen Darstellung von Ver-brauchsdaten (kWh)

37 Entwurf und Implementierung eines zeitvariablen Tarifsystems38 Entwurf und Implementierung eines Tarifrechners39 Entwurf und Implementierung einer Zählerstandsgangauslesung (SML-

Protokoll)40 Entwurf und Implementierung eines MSCONS (EDIFACT Messwerte)-

Konverter41 Entwurf und Implementierung einer Energiekostenabrechnung als PDF42 Entwurf und Implementierung einer Energiekostensimulation43 Entwurf und Implementierung eines Kundenportals für Energielieferanten



Inhaltsverzeichnis

1 Informationen

2 Einleitung2.1 HTML, CSS, JavaScript & PHP2.2 Client-Server-Modell2.3 HTML-Basiswissen

3 Erstes Beispiel

4 HTML

5 CSS

6 JavaScript/jQuery

7 PHP


Lernziele

Technologien und (Programmier-) Sprachen der Webentwicklungnennen und erklären können

Den Aufbau einer Webanwendung und die Begriffe statische unddynamische Webseite erklären können

Erklären können woraus ein HTML-Dokument aufgebaut ist




HTML, CSS, JavaScript & PHP


Technologien für die Webanwendungs-Entwicklung

HTML - Hypertext Markup Language: Auszeichnungssprachezur Strukturierung von Webseiten

CSS - Cascading Style Sheets: Sprache zur Beschreibung derPäsentation von HTML-Dokumenten

JavaScript: Skriptsprache zur Programmierung desclientseitigen Verhaltens von HTML-Dokumenten

PHP - Hypertext Preprocessor: serverseitige Technologie undSkriptsprache zur Erstellung dynamischer Webseiten undWebanwendungen (erzeugt HTML-Dokumente)





Webseiten und -anwendungen

Eine Webseite / Webanwendung kann aus verschiedenenRessourcen bestehen

mindestens einer HTML- oder PHP-Seite (alternativeTechnologien)einem oder mehreren sogenannten Cascading Style Sheet(s)einem oder mehreren JavaScript(en)einer oder mehreren Bild-, Audio- und / oder Videodatei(en)einem oder mehreren PDF-Dokument(en)

Angefordert wird wird immer eine HTML- oder PHP-Seite(alternative Technologien), die o.g. Ressourcen sind dann mit derSeite verknüpft

Beim Aufruf einer WWW-Adresse ohne explizite Seitenangabe(z. B. www.fh-dortmund.de), wird eine Default-Seite (typischeBezeichnungen: index.html / index.php) aufgerufen





Ebenenmodell für statische Webseiten

Webseiten und -anwendungen werden nicht mit einerTechnologie oder Programmiersprache entwickelt, sonderngreifen für die Teilbereiche Strukturierung, Präsentation und Verhaltenauf unterschiedliche Sprachen (HTML, CSS, JavaScript) zurück.

Die HTML-Struktur bildet die Basis(ebene), auf der diedarüberliegenden Ebenen CSS und JavaScript aufsetzen

Der Browser liest zunächst die HTML-Struktur ein, die eranschließend gemäß den CSS-Anweisungen darstellt undschließlich mit mit dem, in JavaScript beschriebenen Verhaltenausstattet





Ebenenmodell für statische Webseiten

HTML

JavaScript

CSS

Struktur

Abarbeitung im Browser

Präsentation

Verhalten




Client-Server-Modell


Das Client-Server-Modell ist das Standardkonzept für dieVerteilung von Aufgaben (innerhalb eines Netzwerks).

Ein Server ist ein Programm, das einen Dienst (Service)anbietet. Ein Server ist in Bereitschaft, um jederzeit Anfragenvon Clients entgegen zu nehmen und zu beantworten. DerServer verhält sich passiv und wartet auf Anforderungen durchdie Clients

Ein Client ist ein Programm, welches einen Dienst (Service)von einem Server in Anspruch nimmt. Ein Client ist aktiv undfordert von einem Server einen Dienst an





Webseiten aufrufen

Ein Webclient ist beispielsweise ein Webbrowser (Mozilla Firefox,Google Chrome, Microsoft Internet Explorer, Apple Safari). EineWebseite wird von einem Webbrowser angefordert. Dieangeforderte Webseite ist der Dienst

Zum Aufruf einer Webseite wird in das Adressfeld desWebbrowser eine URL (Uniform Resource Locator) eingegeben

Der Server wartet permanent auf Anfragen und liefert bei einerAnfrage Dateien seiner Festplatte an den Client zurück





Statische Webseiten (HTML) anfordern

html

Webbrowser(Client)

Webserver(Server)

Seite ausliefern

Seite anfordern





Statische und dynamische Webseiten

Eine statische Webseite liegt vor, wenn der Server dieangefragten Dateien (HTML) an den Client zurücksendet wie siesind

Eine dynamische Webseite liegt vor, wenn die angefragtenDateien (z. B. PHP) bevor sie an den Client zurückgesendetwerden durch einen Parser bearbeitet werden





Dynamische Webseite mit PHP

php

Webbrowser(Client)

Webserver(Server)

Seite ausliefern

Seite anfordern

html

Parser




HTML-Basiswissen

Webseiten basieren auf HTML

HTML ist eine Auszeichnungssprache (markup language)basierend auf normalen Text

bei HTML wird nicht zwischen Groß- und Kleinschreibungunterschieden

HTML-Dokumente sind Teil einer Webseite / Webanwendung

HTML-Dokumente haben die Dateiendung *.html

Der Inhalt von HTML-Dokumenten steht in HTML-Elementen




HTML-Basiswissen

Elemente

HTML-Elemente werden durch sogenannte Tags markiert

Tags werden in spitzen Klammern notiert (<>)

Die meisten Tags werden durch ein öffnendes (<...>) und einschließendes Tag (</...>) markiert (der Inhalt steht dazwischen)

Standalone-Tags haben keinen Inhalt und bestehen nur auseinem Tag (<...>)




HTML-Basiswissen

Dokumententyp-Deklaration (Doctype)

Die Dokumententyp-Deklaration muss in der ersten Zeile derHTML- oder PHP-Datei stehen

Die HTML5 Dokumententyp-Deklaration ist:<!DOCTYPE html>

Was steckt hinter dem Doctype?

Hinter jeder Dokumenttyp-Deklaration stecken so genannteDokumenttyp-Definitionen (DTD). In den Dokumenttyp-Definitionenfür HTML ist geregelt, welche Elemente ein Dokument vom TypHTML enthalten darf, welche Elemente innerhalb von welchenanderen vorkommen dürfen, welche Attribute zu einem Elementgehören, ob die Angabe dieser Attribute Pflicht ist oder freiwillig usw.




HTML-Basiswissen

Verschachtelung von Elementen

HTML-Elemente können in einander verschachtelt werden

Komplexe HTML-Dokumente bestehen aus einer hierarchischenStruktur verschachtelter Elemente

Regel für die Verschachtelung von Elementen

Elemente müssen in umgekehrter Reihenfolge geschlossen werden,in der sie geöffnet wurden.

Zu erst wird das innerste Element geschlossen, zum Schlussdas äußerste




HTML-Basiswissen

DOM - Document Object Model

Die Verschachtelungsstruktur eines HTML-Dokuments wird intern alsBaustruktur abgebildet, diese wird als DOM (Document ObjectModel) bezeichnet




HTML-Basiswissen

Attribute

Einleitende Tags und Standalone-Tags können Attribute besitzen

Alle Werte, die Attributen zugewiesen werden stehen in oberenAnführungszeichen ("...")

Folgende Arten von Attributen sind in HTML möglichAttribute mit vordefinierten Wertzuweisungen, z. B.<input type="button">Attribute mit freien Wertzuweisungen, wobei jedoch ein bestimmterDatentyp oder eine bestimmte Konvention erwartet wirdAttribute mit freier Wertzuweisung



Inhaltsverzeichnis

1 Informationen

2 Einleitung

3 Erstes Beispiel3.1 1. Schritt: HTML-Struktur3.2 2. Schritt: CSS-Präsentation3.3 3. Schritt: JavaScript- & jQuery-Verhalten

4 HTML

5 CSS

6 JavaScript/jQuery

7 PHP


Lernziele

Die grundsätzliche Struktur eines HTML-Dokuments erklärenkönnen

Den Begriff Link und die Elemente ul und li erklären können

Eine externe CSS-Datei und ein externes JavaSkript in einHTML-Dokument einbinden können

CSS-Selektoren und Deklarationen erklären und Beispielenennen können

Den Rumpf eines JavaScript/jQuery-Scripts erklären können

Argumente der $()-Funktion erklären können

Den Begriff anonyme Funktion erklären können

Eine eigene Webseite erstellen können




1. Schritt: HTML-Struktur

HTML-Struktur

<!DOCTYPE html><html>

<head><title>Meine erste HTML-Seite</title>

</head><body>

Was für eine tolle Seite!!!</body>

</html>





Anzeige im Browser





Verwendete HTML-Elemente (1)

<html>...</html>Definiert das Wurzelelement eines HTML-Dokuments

<head>...</head>Definiert den Kopfbereich des Dokuments für Titel (Element title) undMetadaten

<title>...</title>Definiert den Titel der Webseite wie er im Browser angezeigt wird

<body>...</body>Definiert den Dokumentenkörper: die sichtbare Struktur der Webseite





HTML-Struktur erweitern (im body-Element)

<body><header>

<nav><ul>

<li><a href="#">Über mich</a></li><li><a href="#">Mein Studium</a></li><li><a href="#">Meine Links</a></li>

</ul></nav>

</header><div>

<p>Was für eine tolle Seite!!!

</p></div><footer>

© Max Mustermann 2012</footer>

</body>





Anzeige im Browser






<header>...</header>Definiert den Kopfbrereich der Webseite. Semantisch sinnvolle Inhaltesind Name des Anbieters, Corporate-Logo oder eine Top-Navigation

<footer>...</footer>Definiert den Fußbereich der Webseite. Semantisch sinnvolle Inhaltesind Hinweise zur Lizenzform, Impressum und Geschäftsbedingungen

<div>...</div>Definiert einen allgemeinen Bereich (div = division). Hier könnenmehrere Inhalte wie Text, Grafiken, Tabellen und andere Elemente ineinem Bereich zusammengefasst werden

<p>...</p>Definiert einen Textabsatz (p = paragraph)






<nav>...</nav>Definiert einen Navigationsbereich, der sinnvollerweise HTML-Kode füreine Liste mit Hyperlinks enthält. Im Beispiel wird eine ungeordneteListe ul verwendet

<ul>...</ul>Definiert eine ungeordnete Liste (ul = unordered list). Die Liste enthälteinen oder mehrere Listeneinträge li

<li>...</li>Definiert einen neuen Listeneintrag (li = list entry) in einer geordneten(ol) oder ungeordnete (ul) Liste






<a>...</a>Definiert einen Anker (a = anchor). Damit ein Verweis aus diesemElement wird, ist das Attribut href erforderlich (href = hyper reference).Der Wert des href-Attributs ist das gewünschte Verweisziel. Als Inhaltdes a-Elements, also zwischen <a> und </a>, wird dem Anwender einHinweis zum Verweis angeboten

Beispiele:<a href="http://www.fh-dortmund.de">Meine FH</a><ahref="http://localhost:8888/fhdo01/seite01.html">Meine erste Seite</a>




2. Schritt: CSS-Präsentation

CSS-Link im head-Element einfügen

<head><link rel="stylesheet" href="stylesheet01.css" type="text/css" /><title>Meine erste HTML-Seite</title>

</head>





Anzeige im Browser





Ein externes Stylesheet (CSS-Datei) einbinden

<link>...</link>Definiert eine Link-Relation: Attribut rel. <link rel="stylesheet">

dient dazu, auf CSS-Regeln zu verweisen, die in einer eigenen Dateigespeichert sind

Attribute:rel="stylesheet" Verweis auf eine CSS-Dateihref= <Pfad/Datei>-Angabe der CSS-Dateitype="text/css" MIME-Typ ("Stylesheet-Sprache")





Das verwendete Style Sheet (separate CSS-Datei)

nav {margin: 0px 0px 20px 0px; padding: 5px 3px 3px 3px;width: 700px; font-family: "Helvetica"; font-size: 14px;background-color: lightgray; border-color: lightgray;border-style: solid; border-width: 1px;

}nav ul li {

display: inline;}nav ul li a {

text-decoration: none; padding: 3px 10px 3px 10px;}nav ul li a:link, nav ul li a:visited {

color: white;}nav ul li a:link:hover, nav ul li a:visited:hover {

color: orange;}div p {

color: red; font-family: "Helvetica"; font-size: 20px;}





Cascading Style Sheet

CSS-Kode

Selektor {Deklarationsblock}

Der Selektor steht vor dem Deklarationsblock und gibt an aufwas der Deklarationsblock angewendet werden soll

Der Deklarationsblock legt fest was mit dem Element auf das erangewendet wird geschieht. Er besteht aus einer Listeverschiedener Deklarationen, die durch einen Semikolon (;)getrennt sind





Verwendete CSS-Selektoren

(verschachtelte) HTML-Elemente als Selektorennavnav ul linav ul li adiv p

Pseudo-Elemente als Selektorennav ul li a:linknav ul li a:visitednav ul li a:link:hovernav ul li a:visited:hover

Pseudo-Elemente

sind Klassifizierungen, die einen Teil eines Elements beschreiben."Pseudo" heißen sie deshalb, weil es sich dabei nicht um ein"echtes" Element handelt.





Ausgewählte verwendete CSS-Deklarationen (1a)Außen- und Innenabstände

margin: ...;Definiert den Außenabstand

padding: ...;Definiert den Innenabstand

für magin und padding können folgende Werte angegebenwerden:

margin: oben rechts unten links;margin: oben rechtsundlinks unten;margin: obenundunten rechtsundlinks;





Ausgewählte verwendete CSS-Deklarationen (1b)Außen- und Innenabstände





Ausgewählte verwendete CSS-Deklarationen (2)Schriftformatierungen

color: ...;Definiert die Textfarbe. Die Farben können aus der bekanntenFarbauswahl z. B. red oder hexadezimal nach dem Schema #RRGGBB

angeben werden. R ist der Rotwert, G der Grünwert und B der Blauwertder Farbe

font-family: ...;Definiert eine oder mehrere Schriftarten. Bei mehreren angegebenenSchriftarten ist die Reihenfolge der Angabe entscheidend: ist die ersteangegebene Schriftart verfügbar, wird diese verwendet. Ist sie nichtverfügbar, wird die zweite Schriftart verwendet, falls diese verfügbar istusw.

font-size: ...;Definiert die Schriftgröße




3. Schritt: JavaScript- & jQuery-Verhalten

jQuery-Bibliothek und JavaScript-Kode imhead-Element einfügen

<head><link rel="stylesheet" href="stylesheet01.css" type="text/css" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="script01.js"></script><title>Meine erste HTML-Seite</title>

</head>





Anzeige im Browser





Externe JavaSkript-Dateien einbinden

<script>...</script>Bindet JavaScript-Kode in HTML ein. Wenn keine Quellkodeangabeüber das Attribut src erfolgt, wird das JavaScript direkt in denHTML-Kode (im head-Tag) implementiert. Das Attribut src bindetexternes JavaScript in das HTML-Dokument ein

Attribute:

type="text/javascript" MIME-Typ ("JavaScript-Sprache")

src= <Pfad/Datei>-Angabe (source) der JavaScript-Datei





jQuery: The Write Less, Do More, JavaScript Library

jQuery

ist ein JavaScript-Framework. Ein Framework ist eine Werkzeug-sammlung, das die Arbeit erleichtert und eine Gesamtheitkooperierender Methoden in einer zusammenhängenden Strukturdarstellt.

http://jquery.com - Download der jQuery-Basisbibliothek

Die jQuery-Basisbibliothek besteht aus einer JavaScript-Datei;Um jQuery benutzen zu können, muss man es in eineHTML-Datei einbinden

Die Factory-Funktion $() erzeugt neue jQuery-Objekte;Argumente der $()-Funktion sind u. a. CSS-Selektoren





Das verwendete JavaScript / jQuery

$(document).ready(function() {$("div p").mouseover(function() {

$("div p").append("<br> Was für eine tolle Seite!!!");});

});





Die ready()-Funktion

Grundsätzlich wird der gesamte JavaScript/jQuery-Kode in derready()-Funktion implementiert.

$(document).ready(...);

Die Kurzschreibweise ist:

$(...);

Die ready()-Funktion führt die Skripte aus, sobald das HTML in denBrowser geladen wurde: JavaScript kann eine Webseite sofortmanipulieren, ohne auf langsam ladende Bilder oder Filme zu warten.





Anonyme Funktionen

In JavaScript/jQuery ist es üblich -insbesondere bei derEreignisverarbeitung- mit anonymen Funktionen zu arbeiten.

ready()

$(document).ready(function() {...

});

mouseover()

$("div p").mouseover(function() {...

});



Inhaltsverzeichnis

1 Informationen

2 Einleitung

3 Erstes Beispiel

4 HTML4.1 Meta-Angaben4.2 Formulare4.3 Canvas

5 CSS

6 JavaScript/jQuery

7 PHP


Lernziele

Meta-Angaben erklären und Beispiele zu name undhttp-equiv angeben können

HTML-Formulare definieren können

HTML-Formularelemente kennen und anwenden können,insbesondere das Input-Element

Grafische Darstellungen über das Canvas-Element inHTML-Seiten einbetten können

Über JavaScript auf das Canvas-Element zugreifen können




Meta-Angaben

Das Meta-Element

Meta-Angaben

werden im Kopfbereich zwischen <head> und </head> mit Hilfe desStandalone-Tags <meta> notiert. Es können beliebig vieleMeta-Elemente verwendet werden.

Meta-Angaben enthalten nützliche Anweisungen für Webserver,Browser und Suchmaschinen

Meta-Angaben können Hinweise zum Autor und zum Inhalt derWebseite enthalten

Meta-Angaben können HTTP (Hypertext Transfer Protocol)-Kommandos absetzen (z. B. automatische Weiterleitungen)




Meta-Angaben

Attribute des Meta-Tags

Ein gewöhnliches Meta-Tag hat zwei Attribute:

1 name oder http-equiv

Mit dem Attribut name wird eine Eigenschaft angegeben

Meta-Angaben mit http-equiv werden als Pragma-Direktivenbezeichnet und sind ursprünglich für den Webserver gedacht

2 content

Mit dem Attribut content wird der, unter name=Eigenschaftangegeben Eigenschaft ein Wert zugewiesen

Mit dem Attribut content werden bei http-equiv Anweisungenfür die Pragma-Direktive angegeben




Meta-Angaben

Meta-Tags Beispiele

Ab HTML5 kann mit <meta charset="..."> eine gewünschteZeichenkodierung angegeben werden. Dadurch entfallenumständliche HTML-Kodierungen von beispielsweise deutschenUmlauten (ü = ü).

Die Meta-Angabe für den UTF-8 Zeichensatz ist:<meta http-equiv="content-type" content="text/html; charset=utf-8">

Inhaltlich verantwortliche Autoren werden mit name="author"angegeben:

<meta name="author" content="Kai Luppa">

Und zum ausprobieren:<meta http-equiv="refresh"

content="5; URL=http://www.fh-dortmund.de">




Formulare

Das Form-Element

Das Form-Tag (form = Formular)

<form> ... </form> definiert ein HTML-Formular. Alles, wasdazwischen steht, gehört automatisch zum Formular. Das sindbeispielsweise Formularelemente wie Eingabefelder, Auswahllistenoder Buttons. Weiter sind Beschriftungstexte, Hilfetexte inklusiveGrafiken und Multimedia-Elemente als Elementinhalte möglich.

Das Attribut action gibt die URL-Adresse an, die beimAbsenden des Formulars aufgerufen werden soll

Das Attribut method legt die HTTP-Request-Methode fest, diebei serverseitiger Verarbeitung verwendet werden soll




Formulare

Ein Formularbeispiel


<head><title></title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head><body>

<form action="kontakt.php" method="post"><fieldset><legend>Absender</legend>

<p><label for="vorname">Vorname:</label><br><input type="text" size="40" name="vorname" id="vorname"></p><p><label>Zuname:<br><input type="text" size="40" name="zuname"></label></p>

</fieldset><fieldset><legend>Absenden</legend>

<input type="submit" value="absenden"></fieldset>

</form></body>

</html>




Formulare

Anzeige im Browser




Formulare

Ausgewählte Formularelemente (1)

<label>...</label>Definiert ein Label-Element für Beschriftungen weitererFormularelemente. Das Label-Element kann explizit oder implizitdefiniert werden

Explizite Definition: Mit dem Attribut for wird der Bezug zumgewünschten Element hergestellt

<p><label for="vorname">Vorname:</label><br><input type="text" size="40" name="vorname" id="vorname"></p>

Implizite Definition: Das Label-Element schließt das zugehörigeFormularelement mit ein

<p><label>Zuname:<br><input type="text" size="40" name="zuname"></label></p>




Formulare


<fieldset>...</fieldset>Definiert eine zusammengehörige Gruppe von Formularelementen

<legend>...</legend>Definiert einen Gruppeüberschriftstext (im Zusammenhang mit demFieldset-Element)




Formulare


<input>Das Standalone-Element input definiert ein Formularfeld. Dabei kannes sich um sehr unterschiedliche Feldtypen handeln. Das Input-Elementerzeugt keine neue Zeile im Textfluss.

Attribute:

type="..." Bestimmt den Typ des Input-Elements (Textfeld,Button, Checkbox, Schieberegler, Datumsauswahl, ...)

id="..." Eindeutiger Name für JavaScript/jQuery und CSS

name="..." Eindeutiger Name für die Auswertung in einemPHP-Skript

...




Formulare

Beispiele für das Input-Element

<p><label>type="text"<input type="text" id="text1" name="text1" value="hallo Welt">

</label></p><p><label>type="checkbox"

<input type="checkbox" name="checkbox1"></label></p><p><label>type="file"

<input type="file" name="file1"></label></p><p><label>type="button"

<input type="button" value="Klick hier!" name="button1"></label></p><p><label>type="date"

<input type="date" id="date1" name="date1"></label></p><p><label>type="range"

<input type="range" min="0" max="10" step="1" value="5" name="range1"></label></p>




Formulare

Anzeige im Browser




Canvas

Das Canvas-Element

Das Canvas-Tag (canvas = Leinwand)

<canvas> ... </canvas> definiert vereinfacht einprogrammierbares Bild, auf das mit Hilfe von JavaScript gezeichnetwerden kann.

In HTML wird nur das Canvas-Element mit den Attributen id,width und height angegeben

<canvas id="canvas1" width="300" height="300"></canvas>

JavaScript (und auch CSS) greifen über das Attribut id auf dasCanvas-Element zu




Canvas

Canvas-Koordinaten




Canvas

Canvas Beispiel (1): die HTML-Seite


<head><title></title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="stylesheet07canvas.css" type="text/css" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="script07canvas.js"></script>

</head><body>

<canvas id="canvas1" width="300" height="300">Der Browser unterstuetzt HTML5 / Canvas nicht!

</canvas><form>

<input type="button" id="button1" value="aktualisieren"></form>

</body></html>




Canvas

Canvas Beispiel (2): das Stylesheet

#canvas1 {border-color: black;border-style: solid;border-width: 2px;background-color: lightgray;

}




Canvas

Canvas Beispiel (3): das JavaScript/jQuery

$(function() {$("#button1").click(function() {

myCanvas();});

});

function myCanvas() {var c = document.getElementById("canvas1");if (c.getContext) {

var ctx = c.getContext(’2d’);ctx.clearRect(0, 0, c.width, c.height);var bars = 10;for (var i = 0; i < bars; i++) {

var yOff = i*(c.height/bars);var w = Math.random()*c.width;var h = c.height/bars*0.8;ctx.fillRect(0, yOff, w, h);ctx.strokeRect(0, yOff, w, h);

}}

}




Canvas

Anzeige im Browser



Inhaltsverzeichnis

1 Informationen

2 Einleitung

3 Erstes Beispiel

4 HTML

5 CSS5.1 CSS-Selektoren (id, class)5.2 Das Boxmodell

6 JavaScript/jQuery

7 PHP


Lernziele

CSS-Kenntnisse vertiefen

CSS-Selektoren (insbesondere unter Verwendung von id- undclass-Attributen) erklären und anwenden können

Das Boxmodell erklären können

Den Unterschied zwischen Block- und Inline-Elemente erklärenkönnen




CSS-Selektoren (id, class)

Wiederholung: CSS-Kodierung

CSS-Kode

Selektor {Deklarationsblock}

Der Selektor steht vor dem Deklarationsblock und gibt an aufwas der Deklarationsblock angewendet werden soll

Der Deklarationsblock legt fest was mit dem Element auf das erangewendet wird geschieht. Er besteht aus einer Listeverschiedener Deklarationen, die durch einen Semikolon (;)getrennt sind





id- und class-Attribut

id class

HTML <xxx id="idName"> <xxx class="className">

CSS #idName { ... } .className { ... }

id kennzeichnet ein HTML-Element innerhalb einesHTML-Dokuments eindeutig und darf deshalb nur einmalverwendet werden

class definiert Schablonen (Klassen/Typen) und kann/sollmehrfach verwendet werden - in CSS primär mitKlassendefinitionen arbeiten





Selektoren: Element, Id und Klasse

Selektor HTML CSS

Element <header> ... </header> header { ... }

id-Attribut <div id="mnu"> ... </div> #mnu { ... }

class-Attribut <p class="box"> ... </p> .box { ... }




Das Boxmodell

Grafisches Darstellung des Boxmodells




Das Boxmodell

Block- und Inline-Elemente (1)

Block-Elemente

nehmen, wenn nichts anderes erzwungen wird, in der Breite so vielRaum wie möglich und in der Höhe so viel Raum wie erforderlich ein.

Block-Elemente erzeugen im Textfluss eine neue Zeile (auchwenn ihre Breite durch z. B. width: 50% reduziert wird)

Block-Elemente dürfen sowohl weitere Block-Elemente als auchInline-Elemente enthalten

Mit CSS können Eigenschaften von Block-Elemente (Außen- undInnenabstände, Breite, Höhe, Rahmen, ...) vereinbart werden




Das Boxmodell


Inline-Elemente

nehmen, wenn nichts anderes erzwungen wird, sowohl in der Breiteals auch in der Höhe nur so viel Raum wie erforderlich ein.

Inline-Elemente dürfen nicht direkt innerhalb des body-Elementsliegen, sondern müssen immer innerhalb von Block-Elementenliegen

Inline-Elemente starten nicht auf einer neuen Zeile. Höhe,Zeilenhöhe, top-margin und bottom-margin von Inline-Elementenkönnen nicht geändert werden

Inline-Elemente können keine Block-Elemente enthalten




Das Boxmodell


Block-Elemente sind beispielsweise:<address>, <blockquote>, <br />, <div>, <form>, <h1>, <p>,<ul>, <ol>, ...

Zu Block-Elementen zählen beispielsweise ebenfalls (da sieselber wieder Block-Elemente enthalten können):<frameset>, <li>, <tbody>, <thead>, <th>, <td>, ...

Inline-Elemente sind beispielsweise<a>, <b>, <i>, <em>, <sub>, <sup>, <input>, ...




Das Boxmodell

Beispiel


<head></head><body>

<div><h1 style="background-color: orange; color: black;">

Das IT-Projekt ist toll</h1><p>

In diesem Semester mache ich<em style="background-color: orange; color: black;">

ein tolles IT-Projekt</em> an der FH Dortmund

</p></div>

</body></html>




Das Boxmodell

Anzeige im Browser




Das Boxmodell

Umwandlung Block- in Inline-Elemente und Inline- inBlock-Elemente

Block-Element { display: inline; }

Erzwingt die Anzeige im Text

Das Element wird im laufenden Textfluss angezeigt

siehe: Erstes Beispiel, Navigations-und Listen-Element (Menü)

Inline-Element { display: block; }

Erzwingt einen Block

Das Element erzeugt eine neue Zeile



Inhaltsverzeichnis

1 Informationen

2 Einleitung

3 Erstes Beispiel

4 HTML

5 CSS

6 JavaScript/jQuery6.1 Grundlegende Sprachkonstrukte6.2 jQuery6.3 Ereignisverarbeitung

7 PHP


Lernziele

JavaScript- und jQuery-Wissen intensivieren

Variablendeklarationen, Arrays, bedingte Anweisungen,Schleifen in JavaScript kennen und programmieren können

JavaScript-Kode mit Hilfe von Funktionen strukturieren können

Signaturen und Parameter der $()-Funktion kennen undanwenden können

HTML-Inhalte, CSS-Eigenschaften und Werte vonFormularelementen auslesen und überschreiben können

(Anonyme) Funktionen als Event-Handler entwickeln können

Mit dem Event-Objekt als Parameter eines Event-Handlersarbeiten können




Grundlegende Sprachkonstrukte

Variablen

Variablenwerden (explizit) mit dem Schlüsselwort var deklariert

werden ohne Datentyp deklariert, JavaScript ist typlos

können mit der Deklaration initialisiert werden

Mehrere Variablen können hintereinander (durch Komma getrennt)in einer Zeile deklariert und initialisiert werden

Variablennamenmüssen mit einem Buchstaben, $ oder _ beginnen

dürfen nicht mit einer Zahl oder einem Interpunktionszeichenbeginnen

dürfen nur Buchstaben, $ oder _ enthalten

werden nach Groß- und Kleinschreibung unterschieden (casesensitive)





Variablen und Datentypen

Zahlen

var i, erg;i = 101;var f = 99.12345;erg = i * f;

Strings

var vorName = "Kai";var nachName = "Luppa";var name = vorName + " " + nachName;

Boolsche Werte

var istStudent = false;





Arrays

Array-Deklaration mit dem Array-Literal: [ ]

var arrayName_1 = [<elem_0>, ... , <elem_(n-1)>];var arrayName_2 = []; // leeres Array

Array-Deklaration über ein Array-Objekt: new Array()

var arrayName_3 = new Array(<elem_0>, ... ,<elem_(n-1)>);

var arrayName_4 = new Array(); // leeres Array

Bei einfachen Arrays erfolgt der Zugriff auf die Elemente über den Index(0, ... , n-1)

Bei assoziativen Arrays (Schlüssel-Werte-Paare) erfolgt der Zugriff aufdie Elemente über den Schlüssel





Bedingte Anweisungen (1)

If-Anweisung

if (<bedingung>) {...

}else if (<bedingung2>) {

...}else {

...}






Switch-Anweisung

switch (<variable>) {case <wert_1>:

...break;

...case <wert_n>:

...break;

default:...

}





Schleifen

While-Schleife

while (<bedingung>) {...

}

Do-While-Schleife

do {...

} while (<bedingung>);

For-Schleife

for (var i = <uGrenze>; i < <oGrenze>; i++) {...

}





Funktionen

Funktionsdeklaration mit Parametern und Rückgabewert

function <funktionsName>(<para_1>, ..., <para_n>) {...return <rueckgabeWert>

}

Parameter und Rückgabewert von Funktionen sind optional

Parameter und Funktion werden typlos deklariert





Beispiel: Binär2Dezimal-Umrechner (1)Anzeige im Browser





Beispiel: Binär2Dezimal-Umrechner (2)HTML-Kode


<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="script08jsgrundlagen.js"></script>

</head><body>

<form><p>

<label>Binaerzahl:</label><br><input type="checkbox" value="1" id="b7">...<input type="checkbox" value="1" id="b0">

<br><label>Dezimalzahl:</label><br><input type="text" value="0" id="dez">

</p></form>

</body></html>





Beispiel: Binär2Dezimal-Umrechner (3)JavaScript/jQuery-Kode (script08jsgrundlagen.js)

$(function() {for (var i = 0; i < 8; i++) {

$("#b" + i).click(htmlEinAusgabe);}

});function htmlEinAusgabe() {

var bin = new Array();for (var i = 0; i < 8; i++) {

bin[i] = 0;if ($("#b" + i + ":checked").val() == "1")

bin[i] = 1;}$("#dez").val(bin2dez(bin));

}function bin2dez(bin) {

var dez = 0;for (var i = 0; i < 8; i++)

dez = dez + bin[i] * Math.pow(2, i);return dez;

}




jQuery

"Sauberes" HTML

"Unobtrusive JavaScript"

(unaufdringliches JavaScript, auch: barrierefreies JavaScript)vermeidet die Anwendung von JavaScript innerhalb von HTML-Dokumenten. Insbesondere werden Event-Handler aus HTML-Kodeentfernt und nachträglich (und ausserhalb der HTML-Dokumente)hinzugefügt.

Ziel ist Folgendes es zu vermeiden:

<p onclick="meinHandler(this)">Ein Absatz</p>




jQuery

Wiederholung: Download, Einbindung, $()

http://jquery.com - Download der jQuery-Basisbibliothek

jQuery (hier jquery.js) wird in ein HTML-Dokumenteingebunden:

<script type="text/javascript" src="jquery.js"></script>

Weitere Skripte, die JavaScript/jQuery verwenden, werden nachder jQuery-Basisbibliothek eingebunden

Sobald das HTML-Dokument fertig geladen wurde führt$(function() {

...});

die dort vorgemerkten (anonymen) Funktionen aus. $() ist dieKurzschreibweise für $(document).ready()




jQuery

Die Funktion $() und ihre Signatur (1)

$()

gibt in allen Fällen ein jQuery-Objekt zurück!

Elementknoten als Argument: $(elem)$(dokument.forms[0]).addClass("formclass");

jQuery-Objekt als Argument: $(jQuery)var obj = $("#container");$(obj).addClass("classname");

Callback-Funktion als Argument: $(fn)$(function() { ... });




jQuery

Die Funktion $() und ihre Signatur (2)

HTML-String als Argument: $(htmlString)$("<p>Hallo Welt</p>").appendTo("#container");

CSS-Selektor als Argument: $(sel)$(".meineKlasse");$("#meineID");




jQuery

HTML-Inhalte lesen und verändern (1)

Mit Hilfe von jQuery können HTML-Inhalte zur Laufzeit dynamischmanipuliert werden. Hierzu stehen verschiedene Methoden zurVerfügung.

HTML-Inhalt auslesen mit .html():

var htmlInhalt = $("#fehler").html();

Liest den Inhalt des HTML-Elements mit der ID fehler

HTML-Inhalt ersetzen mit .html():

$("#fehler").html("<p>Achtung Fehler!</p>");

Ersetzt das gesamte HTML im Element mit der ID fehler




jQuery

HTML-Inhalte lesen und verändern (2)

Anfügen von HTML-Inhalt mit .append():

$("#fehler").append("<p>Achtung Fehler!</p>");

Fügt HTML (hier einen Paragraph) als letztes Kindelement desausgewählten Elements (hier: ID fehler) ein

Anfügen von HTML-Inhalt mit .prepend():

$("#fehler").prepend("<p>Achtung Fehler!</p>");

Die Methode .prepend() arbeitet genau wie .append(), fügtdas HTML allerdings direkt nach dem öffnenden Tag derAuswahl ein




jQuery

CSS-Eigenschaften lesen und verändern (1)

Mit Hilfe der jQuery-Methode .css() können CSS-Eigenschaftenzur Laufzeit gelesen und dynamisch manipuliert werden.

Schriftfarbe auslesen:

var cssColor = $("#container").css("color");

Schriftfarbe setzen:

$("#container").css("color", "green");




jQuery

CSS-Eigenschaften lesen und verändern (2)

Mehre Werte können unter Anwendung eines Objektliterals an dieMethode .css() übergeben werden. Ein Objektliteral ist eine Listevon Namen/Werte-Paaren. Jedes Namen/Werte-Paar wird durch einKomma getrennt.

Mehrere CSS-Eigenschaften mit einem Objektliteral setzen:

$("#container").css({"color": "green","font-size": "20px","background-color": "orange"

});




jQuery

Formularwerte lesen und schreiben (1)

Die Methode .val() wird zum Auslesen des Wertes einesEingabefeldes eingesetzt, kann diesen aber auch schreiben. Eineweitere Einsatzmöglichkeit von .val() ist das Auslesen vonCheckboxen, Radiobuttons oder Optionen eines Select-Feldes.

Auslesen eines Formularelements:

var meinWert = $("#meinInput").val();

Schreiben eines Formularelements:

$("#meinOutput").val(meinWert);




jQuery

Formularwerte lesen und schreiben (2)

<input type="checkbox" id="cbx" value="checked">

Auslesen der Checkbox:

if($("#cbx:checked").val() == "checked")$("#cbxval").val("checked");

else$("#cbxval").val("undefined");

Wert der Checkbox überschreiben:

$("#cbx").val("checkxxx");




Ereignisverarbeitung

Begriffe

Evert-Listener

bemerken das Auftreten (Feuern) von Ereignissen. Es muss bekanntsein, um was für ein Ereignis es sich handelt, an welchem Elementund bei welchen Koordinaten es auftritt. Diese Daten werden inJavaScript in dem Event-Objekt gespeichert.

Evert-Handler

ist eine an ein Ereignis (Event) gebundene Funktion. Diese wird,wenn das Ereignis ausgelöst (gefeuert) wird, durch den Event-Listener gestartet und behandelt das Ereignis (Ereignisbehandler).Das Event-Objekt (s. o.) wird immer dem Event-Handler übergeben.





Event-Handler (1)

$("#menue").mouseover(zeigeUntermenue);

Selektor Ereignis Funktion, die mit dem Ereignis verknüpft werden soll

Ende der Anweisung

Ende der mouseover()-Funktion





Event-Handler (2)

1 Ein Element (Event-Listener) auswählen (jQuery, ID-Selektor):$("#menue")

2 Ein Event auswählen:$("#menue").mouseover();

3 Eine Funktion als Event-Handler hinzufügen, Funktionsnameohne Klammern ():$("#menue").mouseover(zeigeUntermenue);

4 Die Funktion muss existieren und ausprogrammiert sein:function zeigeUntermenue() {

$("#untermenue").show();}





Event-Handler mit anonymen Funktionen (1)

$("#menue").mouseover(function() { …});

Selektor Ereignis Anonyme Funktion

Ende der AnweisungEnde der mouseover()-Funktion

Ende der anonymen Funktion





Event-Handler mit anonymen Funktionen (2)

1 Ein Element (Event-Listener) auswählen (jQuery, ID-Selektor):$("#menue")

2 Ein Event auswählen:$("#menue").mouseover();

3 Eine anonyme Funktion als Event-Handler hinzufügen:$("#menue").mouseover(function() {

...});

4 Den Event-Handler ausprogrammieren:$("#menue").mouseover(function() {

$("#untermenue").show();});





Ausgewählte Ereignisse (1)

Ereignis Erläuterung

.click(fn(e)) Bindet einen Handler fn an das Click-Event.Es wird gefeuert, wenn mit der Maus auf eineStelle im Browser geklickt wird

.mouseover(fn(e)) Bindet einen Handler fn an das Mouseover-Event. Es wird gefeuert, wenn mit der Mausüber die Browseroberfläche gefahren wird

.keydown(fn(e)) Bindet einen Handler fn an das Keydown-Event. Es wird gefeuert, wenn eine Eingabeauf der Tastatur getätigt wird





Ausgewählte Ereignisse (2)

Ereignis Erläuterung

.hover(fnI(e), fnO(e)),

.hover(fnIO(e))Bindet einen Handler fn an das Hover-Event. Es wird gefeuert, wenn mit derMaus ein Objekt betreten und verlas-sen wird und ist eine Kombination ausMouseenter- und Mouseleave-Event

.toggle(fn1(e), fn2(e),

... fnN(e))Bindet einen Handler fn an das Toggle-Event. Es wird gefeuert, wenn mit derMaus ein Objekt geklickt wird. Die NEvent-Handler werden der Reihe nachausgeführt





Event-Objekt

Evert-Objekt

Immer wenn ein Browser ein Event feuert, zeichnet er Informationenüber das Event auf und speichert diese im sog. Event-Objekt.

Das Event-Objekt steht dem Event-Handler zur Verfügung

Das Event-Objekt wird als Argument an den Event-Handlerübergeben

Für den Zugriff auf das Event-Objekt muss der Event-Handlereinen Parameter erhalten





Eigenschaften des Event-Objekts

Eigenschaft Erläuterung

.pageX /

.pageYDer Abstand (in Pixel) des Mauszeigers vom linken / obe-ren Rand des Browserfensters

.screenX /

.screenYDer Abstand (in Pixel) des Mauszeigers vom linken / obe-ren Rand des Monitors

.shiftKey Ist true, wenn die Umschalt-Taste beim Auftreten desEvents gedrückt war

.which Liefert in Verbindung mit dem keydown-Event den nume-rischen Kode für die gedrückte Taste

.type Die Art des Ereignisses





Beispiele zu ausgewählten Ereignissen / Event-Objekt

$(function() {$(document).mousemove(function(e) {

$("#x").val(e.pageX);$("#y").val(e.pageY);

});

$("#keytest").keydown(function(e) {$("#key").val(e.which);

});

$("#menue").hover(mnuShow, mnuHide);});

function mnuShow(e) {$("#untermenue").show();

}

function mnuHide() {$("#untermenue").hide();

}



Inhaltsverzeichnis

1 Informationen

2 Einleitung

3 Erstes Beispiel

4 HTML

5 CSS

6 JavaScript/jQuery

7 PHP7.1 Einführung und erste Beispiele7.2 Grundlagen Sprachkonstrukte und Objektorientierung7.3 Verschiedene Themen (IT-Projekt)


Lernziele (1)

Die Verwendung von PHP innerhalb einer HTML-Seite kennenund anwenden können

PHP-Ausgabefunktionen kennen

Die Arrays $_POST und $_GET kennen und anwenden können

Variablen und Arrays deklarieren und mit entsprechendenDatentypen initialisieren können

Bedingte Anweisungen und Schleifen kennen und anwendenkönnen

Funktionen programmieren und anwenden können

Die grundlegenden objektorientierten Konzepte von Klassen(abstrakten Klassen) und Vererbung in PHP kennen undanwenden sowie Objekte instantiieren können




Lernziele (2)

Textdateien mit Hilfe von PHP sequentiell auslesen können

Dateien von einer Webseite mit Hilfe von PHP auf einen Serverladen können

Unter Anwendung der objektorientierten Klassenbibliothek FPDFserverseitig mit PHP PDF-Dokumente erstellen können

Mit PHP eine Verbindung zu einer MySQL-Datenbankaufnehmen und einfache SQL-Abfragen durchführen können




Einführung und erste Beispiele

PHP

PHP - Hypertext Preprocessor ist eine serverseitigeTechnologie und Skriptsprache zur Erstellung dynamischerWebseiten und Webanwendungen (erzeugt HTML-Dokumente)

PHP-Dateien haben die Dateiendung *.php(x), optional Version x

PHP läuft immer auf einem Server und nicht, wieJavaScript/jQuery, auf einem Client (Browser)

PHP ist eine (objektorientierte) Skriptsprache und wird immerdurch die Markierungen <?php ... ?> gekennzeichnet

PHP kann in HTML eingesetzt werden, PHP kann aber auchHTML-Ausgaben erzeugen<body>

<?php echo "<p>Hallo PHP</p>" ?></body>





PHP ist objektorientiert

Seit PHP 5 ist PHP objektorientiert und kann auch mit Hilfe derUML (Unified Modelling Language) modellgetrieben entwickeltwerden

PHP unterstützt die wichtigen objektorientierten KonzepteVerkapselungVererbungPolymorphie

class SmartMeter extends Meter implements Modem {private $comPort;...function getComPort() { ... }...

}





Ausgaben

echo Gibt alle Parameter aus und erzeugt eine Ausgabe. Ist einSprachkonstrukt, weshalb () zur Parameterübergabe nicht not-wendig (aber auch nicht falsch) ist

print Identisch wie echo, in PHP üblich ist echo

print_r() Gibt ein Array oder ein Objekt mit allen Bestand-teilen aus. Zeigt mit PHP 5 auch private und geschützteEigenschaften von Objekten an

var_dump() Gibt strukturierte Informationen über einen odermehrere Ausdrücke aus, darunter auch den entsprechenden Typund Wert. Arrays und Objekte werden rekursiv durchlaufen unddie jeweiligen Werte eingerückt dargestellt, um die Struktur zuverdeutlichen. Zeigt mit PHP 5 auch private und geschützteEigenschaften von Objekten an





Benutzereingaben an PHP übergeben (1)Die Arrays $_POST und $_GET

HTML-Formulare werden mit den HTTP-Methoden POST oder GETübertragen. Je nach verwendeter Übertragungsmethode können dieInhalte der Formular-Elemente an PHP über die sogenannten Super-globalen Arrays $_POST oder $_GET übergeben werden.

HTML-Formular:<form action="postandget.php" method="POST">

<input type="text" name="zuname">...

</form>

PHP-Skript (postandget.php):print_r($_POST);echo $_POST["zuname"];





Benutzereingaben an PHP übergeben (2)Die Arrays $_POST und $_GET

Bei der GET-Methode werden die Parameter (z. B. Elementinhalte)zusammen mit der URL an den Server übermittelt. Diese, alsAbfragestring bezeichnete URL-Ergänzung folgt der Form:?<param_1> = <wert_1>&<param_2> = <wert_2>Dieser kann auch direkt in die Adresszeile des Browsers eingegebenwerden!





Einführungsbeispiel (1)

<form ac

tion="ei

nausgabe

01.php"

method="

get">





Einführungsbeispiel (2)Die HTML-Seite


<head> ... </head><body>

<form action="einausgabe01.php" method="post">...

</form><form action="einausgabe01.php" method="get">

<fieldset><legend>GET</legend><p><label for="vorname">Vorname:</label><br><input type="text" size="40" name="get_vorname"></p><p><label>Zuname:<br><input type="text" size="40" name="get_zuname"></label></p>

</fieldset><fieldset><legend>Absenden</legend>

<input type="submit" value="Absenden"><input type="reset" value="Abbrechen">

</fieldset></form>

</body></html>





Einführungsbeispiel (3)Die PHP-Seite


<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head><body>

<?phpecho "var_dump: ";var_dump($_POST); echo "<br>";echo "print_r: ";print_r($_POST); echo "<br>";echo "POST: " . $_POST["vorname"] . " " . $_POST["zuname"];echo "<br>"; echo "<br>";echo "var_dump: ";var_dump($_GET); echo "<br>";echo "print_r: ";print_r($_GET); echo "<br>";echo "GET: " . $_GET["get_vorname"] . " " . $_GET["get_zuname"];

?></body>

</html>





Ajax

Was ist Ajax?

Ajax steht für Asynchronous JavaScript and XML. Mit Ajax kann eineWebseite eine Antwort von einem Webserver anfordern undempfangen und sich damit selbst aktualisieren, ohne eine neue Seiteladen zu müssen.

Deutlich interaktivere Webseiten mit kurzen Reaktionszeiten

Beispiel Google Maps

jQuery bietet einfach Funktionen, in denen Ajax-Aufrufegekapselt sind





PHP-Beispiel mit Ajax (1)

$.get("zaehl

erdaten01.ph

p" ,anz , my

Canvas);

Mit der .get()-Methode wird ein Request mit dem Abfragestring (anz) an die Datei zaehlerdaten01.php gesendet.

Das Ergebnis wird an die Callback-Funktion myCanvas übergeben,die das Canvas-Objektaktualisiert.





PHP-Beispiel mit Ajax (2)Die HTML-Seite


<head><title></title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="zaehlerdaten01.css" type="text/css" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="zaehlerdaten01.js"></script>

</head><body>

<canvas id="canvas1" width="300" height="300">Der Browser kann Canvas nicht!

</canvas><form>

<input type="text" id="anzahl" value="10" maxlength="3"><br><input type="button" id="button1" value="Aktualisieren">

</form></body>

</html>





PHP-Beispiel mit Ajax (3)Das PHP-Skript

<?php$anz = $_GET["Anzahl"];$zaehler = new Zaehler($anz);$zp = $zaehler->getWirkBezug();$s = $zp[0];for ($i = 1; $i < count($zp); $i++) {

$s = $s .";" . $zp[$i];}echo $s;

class Zaehler {private $wirkBezug = array();public function __construct($anzMw = 10) {

for ($i = 0; $i < $anzMw; $i++)$this->wirkBezug[$i] = rand(0, 100) / 100;

}public function getWirkBezug() {

return $this->wirkBezug;}

}?>





PHP-Beispiel mit Ajax (4)Das JavaScript/jQuery-Skript

$(function() {$("#button1").click(function() {

var anz = "Anzahl=" + $("#anzahl").val();$.get("zaehlerdaten01.php" ,anz , myCanvas);

});});function myCanvas(daten) {

zaehlerdaten = daten.split(";");zdAnzahl = zaehlerdaten.length;var c = document.getElementById("canvas1");if (c.getContext) {

var ctx = c.getContext(’2d’);ctx.clearRect(0, 0, c.width, c.height);for (var i = 0; i < zdAnzahl; i++) {

var yOff = i * (c.height / zdAnzahl);var w = zaehlerdaten[i] * c.width;var h = c.height / zdAnzahl * 0.8;ctx.strokeRect(0, yOff, w, h);

}}

}




Grundlagen Sprachkonstrukte und Objektorientierung

Variablen

Variablenwerden über das Dollarzeichen ($) deklariert

werden ohne Datentyp deklariert, PHP ist typlos

sollten mit der Deklaration initialisiert werden

Jede Variablendeklaration (und Initialisierung) wird mir demSemikolon (;) abgeschlossen

Variablennamennach der Deklaration mit dem Dollarzeichen folgt zwingend einUnterstrich oder ein Buchstabe, danach kann der Name einebeliebige Abfolge von Buchstaben, Zahlen und Unterstrichenenthalten

werden nach Groß- und Kleinschreibung unterschieden (casesensitive)





Variablen und Datentypen (1)

Zahlenwerden unterschieden in ganzzahlige Werte (Integer) undFließkommazahlen (Float/Double)

$i = 101;$f = 99.12345;$erg = (float)$i * $f;var_dump(is_int($erg)); //false

Boolsche Werte

$istStudent = false;var_dump($istStudent); //false





Variablen und Datentypen (2)

Strings

$vorName = "Kai";$nachName = "Luppa";$name = $vorName . " " . $nachName;var_dump(is_string($name)); //true

Eine Zeichenkette in einfachen Anführungszeichen (’...’) wirdohne Verarbeitung ausgegeben, eine Zeichenkette in doppeltenAnführungszeichen ("...") wird verarbeitet

$s = "test";echo "Ausgabe einer $s-Variablen";echo ’Ausgabe einer $s-Variablen’;





Arrays

Arrays werden mit dem Sprachkonstrukt array() deklariert

$a1 = array();$a1[3] = "James";$a1[5] = "007";$a1[7] = 7;var_dump($a1);// array(3) { [3]=> string(5) "James"// [5]=> string(3) "007" [7]=> int(7) }

Arrays können bei ihrer Deklaration initialisiert werden

$a3 = array(1, 2.2, true);var_dump($a3);// array(3) { [0]=> int(1)// [1]=> float(2.2) [2]=> bool(true) }






If-Anweisung

if (<bedingung>) {...

}elseif (<bedingung2>) {

...}else {

...}






Switch-Anweisung

switch (<variable>) {case <wert_1>:

...break;

...case <wert_n>:

...break;

default:...

}





Schleifen

While-Schleife

while (<bedingung>) {...

}

Do-While-Schleife

do {...

} while (<bedingung>);

For-Schleife

for ($i = <uGrenze>; $i < <oGrenze>; $i++) {...

}





Funktionen

Funktionsdeklaration mit Parametern und Rückgabewert

function <funktionsName>(<para_1>, ..., <para_n>) {...return <rueckgabeWert>

}

Parameter und Rückgabewert von Funktionen sind optional

Parameter können mit einem Defaultwert belegt werden

function verdopple($parameter = 10) {return $parameter * 2;

}echo verdopple(); //20

Parameter und Funktion werden typlos deklariert





Klassen (1)

+getTyp+getIstGeschwindigkeit+fahreSchneller(geschwindigkeit)+fahreLangsamer(geschwindigkeit)

#typ#istGeschwindigkeit#maxGeschwindigkeit

Pkw{abstract}

UML: Klasse

Eine Klasse definiert einenBauplan für Objekte undkapselt private undgeschützte MitgliederAttribute und Operationen(Mitglieder) sind in einerKlasse zusammengefasstMit der Sichtbarkeit wird dieZugriffsmöglichkeit auf dieMitglieder definiertAbstrakte Klassen sindVorlagen für erbende Klassen





Klassen (2)

abstract class Pkw {protected $typ;protected $istV;protected $maxV;public function getTyp() {

return $this->typ;}public function getIstV() {

return $this->istV;}public function fahreSchneller($v) {

if ($v >= 0 && $v > $this->istV) {if ($v > $this->maxV)

$this->istV = $this->maxV;else

$this->istV = $v;}

}public function fahreLangsamer($v) {

...}

}





Vererbung (1)

Pkw{abstract}

AudiTt VwCaddy

UML: Vererbung

Die Vererbung ist eineist-ein-Beziehung: zwischender Ober- und derUnterklasse besteht eineVererbungshierarchie

Die Unterklasse wird auch oftals Spezialisierung und dieOberklasse alsGeneralisierung bezeichnet

Die spezialisierte Klasse erbtalle Attribute und Operationenihrer Oberklasse





Vererbung (2)

class AudiTt extends Pkw {public function __construct($maximalV = 250) {

$this->typ = "Audi TT";$this->istV = 0;$this->maxV = $maximalV;

}}

class VwCaddy extends Pkw {public function __construct($maximalV = 150) {

$this->typ = "VW Caddy";$this->istV = 0;$this->maxV = $maximalV;

}}





Objekte (1)

<<instance of>>

$tt: AudiTt AudiTt

UML: Objekt-Klasse

Ein Objekt ist ein konkretesAbbild einer Klasse, es wirderzeugt (instantiiert) und oftauch als Instanz bezeichnet

Von abstrakten Klassenkönnen keine Objekteinstantiiert werden

Ein Objekt wird an einerVariablen vom Typ der Klasseinstantiiert, beim Instantiierenwird der Konstruktoraufgerufen





Objekte (2)

$tt = new AudiTt();echo $tt->getTyp() . "<br>";$tt->fahreSchneller(220);echo $tt->getIstV() . "<br>";

$caddy = new VwCaddy(160);echo $caddy->getTyp() . "<br>";$caddy->fahreSchneller(180);echo $caddy->getIstV() . "<br>";




Verschiedene Themen (IT-Projekt)

Externe PHP-Dateien einbinden

Mit include <pfad>:include ’meineErsteKlasse.php’;

Mit require(<pfad>);:require (’meineErsteKlasse.php’);





Textdateien sequentiell auslesen (1)

Mit Hilfe der Funktion fopen(<Pfad/Datei>, <Modus>) wirdeine Textdatei geöffnet:

<Pfad/Datei> gibt den Namen und den Pfad der Textdatei an

<Modus> gibt den Öffnungsmodus an: r für read, w für write, afür append

Der Rückgabewert ist ein sogenannter Dateizeiger

Vor Öffnen einer Datei sollte man prüfen, ob diese auchvorhanden istif (file_exists(<Pfad/Datei>) {

...}






Mit Hilfe der Funktion fgets(<Dateizeiger>, <Länge>)liest eine Zeichenkette aus einer Textdatei:

<Dateizeiger> ist die zuvor zum Lesen geöffnete Textdatei

<Länge> ist optional und gibt die Länge der einzulesendenZeichen an. Wird der Parameter weggelassen, wird zeilenweisegelesen

Nach dem Auslesen einer Textdatei wird diese wiedergeschlossenfclose(<Dateizeiger>);






Eine Textdatei mit Daten (15-Minuten-Messwerten):2012-11-23_07:00; 4444444.1232012-11-23_07:15; 5555555.1232012-11-23_07:30; 6666666.1232012-11-23_07:45; 7777777.123

Auslesen der Textdatei:if (file_exists("messwerte.txt")) {

$datei = fopen ("messwerte.txt", "r");$messwerte = array();while (!feof($datei)) {

$row = fgets($datei);$buffer = split(";", $row);$messwerte[$buffer[0]] = $buffer[1];

}echo $messwerte["2012-11-23_07:30"];echo "<br>";var_dump($messwerte);fclose ($datei);

}





Dateien auf den Server laden (1)

Mit Hilfe des Superglobalen Arrays $_FILES können Datei an denServer geschickt und mit Hilfe der Funktionmove_uploaded_file(<UploadDatei>, <Ziel>) auf diesemgespeichert werden.

HTML-Formular:<form action="dateilesen02.php" method="post"

enctype="multipart/form-data"><input type="file" name="uploadFile"><input type="submit" value="Upload">

</form>





Dateien auf den Server laden (2)

Die Funktion move_uploaded_file(<UploadDatei>, <Ziel>)verschiebt die, unter "tmp_name" liegende und an den Serverübertragene Datei nach <Ziel>. Das Verzeichnis von <Ziel> mussSchreibrechte haben.

PHP-Skript (dateilesen02.php):$uploadFile = $_FILES["uploadFile"];move_uploaded_file($uploadFile["tmp_name"],

"uploads/mw01.txt");if (file_exists("uploads/mw01.txt")) {

...}





PDF-Dokumente erstellen (1)

FPDFPDF-Dateien können u. a. mit der freien Bibliothek FPDF erzeugtwerden. FPDF ist eine objektorientierte Klassenbibliothek. In dieserKlassenbibliothek, die sich in der Datei fpdfx.x.php befindet und überinclude oder require eingebunden wird, existiert die Klasse FPDF(x.x kennzeichnet die Version der Bibliothek). Von der Klasse FPDFwird ein Objekt erzeugt und mit Hilfe dessen das PDF-Dokumenterstellt.

Die Bibliothek FPDF, Dokumentation und Beispiele sindverfügbar unter www.fpdf.de






FPDF-Bibiothek einbinden:require("<Pfad>/fpdf.php");

Ein Objekt der Klasse FPDF erzeugen:$pdf = new FPDF();

Ein PDF-Dokument erzeugen:$pdf->AddPage();

Das erzeugte PDF-Dokument ausgeben:$pdf->Output();






Ein einfaches Beispiel:

include ’./fpdf.php’;

$pdf = new FPDF();$pdf->AddPage();

$pdf->SetFont("Arial", "B", 16);

$text = utf8_decode("dies ist ein Textder sich uebermehrere Zeilen erstreckt ...");$pdf->Cell(40,10,’Hello World!’);$pdf->Ln();$pdf->Write(10, $text);

$pdf->Output(’test.pdf’,I);





MySQL Grundlagen (1)

Viele über Webseiten präsentierte Daten sind in Datenbankengespeichert

Im Zusammenhang mit PHP wird häufig mit MySQL-Datenbanken gearbeitet

MySQL ist eine Open-Source-Datenbank, die in der Regelgemeinsam mit dem Apache-Webserver installiert wird (XAMPP)

Über das Administrationswerkzeug phpMyAdmin(http://localhost:<port>/phpMyAdmin/index.php) könnenDatenbanken verwaltet und Datensätze angelegt sowie editiertwerden

PHP bietet komfortable Funktionen zum Zugriff auf MySQL-Datenbanken






Struktur der Testdatenbank:






Testdatensätze:






Mit einem MySQL-Server Verbindung aufnehmen:mysql_connect(<Server>, <Benutzer>, <Passwort>)

Mit einer MySQL-Datenbank verbinden:mysql_select_db(<Datenbank>)

Eine SQL-Abfrage ausführen:<SQL-Erg.> = mysql_query(<SQL-Abfrage>)

Ein Datensatz des SQL-Ergebnisses in ein assoziatives Feldschreiben, Datensatzzeiger auf das nächste Ergebnis setzenwhile (<Assoz.-Feld> = mysql_fetch_assoc(<SQL-Erg.>)) {

...}






Ein einfaches Beispiel:

$mysqlhost = "localhost";$mysqluser = "kai";$mysqlpwd = "1234";

$con = mysql_connect($mysqlhost, $mysqluser, $mysqlpwd);

if ($con) {mysql_select_db("Messwerte", $con);$sql = "select Datum, Messwert from Wirkenergie_Bezug";$res = mysql_query($sql);while ($dsatz = mysql_fetch_assoc($res)) {

echo $dsatz["Datum"] . ": " . $dsatz["Messwert"] . "<br>";}

}



Documents

IT-Projekt ( ITP WS2012 00.pdf) - fh-dortmund.de · IT-Projekt (_ITP_WS2012_00.pdf) Prof. Dr. Kai Luppa Fachhochschule Dortmund Wintersemester 2012