Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.

Computer AG

Schiller-Gymnasium

Witten

Thomas SchmidtJanuar 2008

Ziele der Computer-AG

• HTTP

• HTML

• JavaScript

• PHP

HTTP-Server

z.B: Apache,

z.B. Internet Information Server

HTML-Dateien

www.schiller-witten.de

HTTP - Browser und Server

http:

Protokoll

//www.schiller-witten.de

Server

/index.html

Datei

Hallo WeltIch bin eine Web-Seite

Zum Erlernen vom HTML arbeiten wir zunächst ohne HTTP Server

Lokale Festplatte

HTML-Dateien

C:\

meine-html-dateien

Arbeiten ohne HTTP-Server

file:/// c:/meine-html-dateien/ index.html

Hallo WeltIch bin eine Web-Seite von der lokalen Platte

HTTP - Zusammenfassung

• HTTP ist ein Protokoll, mit dem HTML-Dateien im Internet transportiert werden

• Zunächst arbeiten wir ohne HTTP auf der lokalen Platte

• Später - im Zusammenhang mit PHP - kommen wir auf HTTP zurück

HTML - Grundlagen - Kennung

• Eine HTML-Datei beginnt immer mit einer HTML-Kennung

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

HTML - Grundlagen - Tags


• Alle Informationen werden in Form sogenannter „Tags“ abgelegt

<tag> ... </tag>

HTML - Grundlagen - <html>



• Die gesamte HTML-Seite ist in das Tag-Paar <html> ... </html> eingefasst

<html> hier stehen alle Informationen der Seite...</html>

HTML - Grundlagen - <body> und <head>




• Jede Seite verfügt mindestens über die Tags <head> und <body>

<html> <head> ... Kopfinformation ... </head> <body> ... Seiteninformation ... </body></html>

HTML - Grundlagen - Dateiumbruch




• Jede Seite verfügt mindestens über die Tags <head> und <body>

• Zeilen haben keine Bedeutung – sie dienen nur der Lesbarkeit

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

ist gleichbedeutend mit

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html> <head> <title>Meine erste Seite</title> </head> <body> <h1>Überschrift</h1> Hier sehen wir den Text der ersten Webseite. </body></html>

Beispiel

Werkzeuge zur Erstellung von HTML-Seiten

• Zeileneditoren

• Anwendungen mit einer grafischen Oberfläche

• HTML Editoren

HTML-Kit

http://www.htmlkit.com/download/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Meine erste Seite</title> </head> <body> <h1>Überschrift</h1> Hier sehen wir den Text der ersten Webseite. </body></html>

Beispiel: Meine erste Seite

<body>

<h1>Bellum civile (Julius Caesar)</h1> <p> Anno 50, Pompeius ei pro consule exeunti ut Romam rediret et copias dimitteret imperavit. Senatus praeterea ei consulatum secundum in absentia petere interdixit. </p>

<p>Caesar cognovit se accusatum iri si Romam sine immunitate consulari aut viribus legionum rediisset. Senatum prohibuit quin pararet, fines Italiae per Rubiconem 10 Ianuarii anno 49 traiciendo, dicens alea iacta est.</p>

</body>

HTML - Absätze

<body> <h1>Zutaten für Zabajone</h1> <ul> <li>Marsala (Italienischer Süßwein)</li> <li>Eier</li> <li>Zucker</li> </ul> </body>

HTML - Listen

<body> <h1>Hervorhebungen im Text</h1> <ul> <li>Dieser Text ist <u>unterstrichen</u></li> <li>Dieser Text ist <b>fett</b></li> <li>Dieser Text ist <i>kursiv</i></li> <li>Dieser Text ist <i><u><b>alles</b></u></i></li> </ul> </body>

HTML - Hervorhebungen

<body> <h1>Bilder anzeigen</h1> <p> Außer Text kann ein Browser natürlich auch Bilder anzeigen. Bilder sind rechteckige Gebilde, die sich beim Formatieren wie große Buchstaben verhalten. Folgendes Bild zeigt eine Möhre: </p>

<img src=“moehre.jpg“> </body>

HTML - Bilder

<body> <img src="moehre.jpg"> <img src="moehre.jpg" title="Ich bin ein Tooltip"> <img src="moehre.jpg" title="Ich bin ein Tooltip" alt="Zeig mich wenn kein Bild da ist"> </body>

HTML - Tags mit Attributen

• Nahezu alle <Tags> können Attribute haben

• Attribute haben immer die Form: Name="Text "

• Mehrere Attribute trennt man durch Leerzeichen oder White-Space-Zeichen

• Fehlerhafte Attribute werden ignoriert

• Attribute die auf mehrere Tags anwendbar sind, heißen Universalattribute

Literaturhinweis

http://de.selfhtml.org/


Styles

HTML - Styles

• Schriften

• Farben

• Optische Gestaltung

• Positionierung

Styles dienen der optischen Gestaltung von Seiten

Styles haben keinen Einfluss auf Inhalte und Funktionen!

<body style="background-color:yellow"> ... </body>

HTML - Styles - Hintergrundfarbe

<body style="font-family:arial"> ... </body>

HTML - Styles - Schriftfamilien

<body style="font-family:arial; font-size:30px"> ... </body>

HTML - Styles - Schriftgrößen

<body style="font-family:arial; color:blue"> ... </body>

HTML - Styles - Schriftfarbe

HTML - Styles - Syntax

• Styles werden als Attribut <tag style="...... "> formuliert

• Jeder einzelne Style hat die Form: typ:wert

• Mehrere Styles werden durch Semikola getrennt

Beispiel:

<body style="font-family:arial; color:blue">

<body style="font-family: arial; color: white; background-image: url(moehre.jpg)"> ... </body>

HTML - Styles - Hintergrundbilder

<body style="background-image: url(moehre.jpg); background-repeat: repeat-x"> ... </body>

HTML - Styles - Bildwiederholung

repeat in beiden Richtungen wiederholen (Voreinstellung).repeat-x nur "eine Zeile lang" waagerecht wiederholen.repeat-y nur "eine Spalte lang" senkrecht wiederholen.no-repeat nicht wiederholen, nur als Einzelbild anzeigen.

<body style="background-image: url(verlauf.gif); background-repeat: repeat-y"> ... </body>

HTML - Styles - Verläufe

Ein Verlauf ist ein Bild, das nur ein Pixel hoch oder breit ist.

<body> <div style="position: absolute; left: 50px; top: 70px; height: 120px; width: 400px; background-color: yellow;"> </div>

</body>

HTML - Styles - Explizites Positionieren

<body>

<div style="position: absolute; left: 50px; top: 70px; height: 120px; width: 400px; background-color: yellow;">

<div style="position:absolute; left: 20px; top: 20px; height: 30px; width: 200px; background-color: red;"> </div>

</div>

</body>

HTML - Styles - Verschachteltes Positionieren

<div style="position:absolute; left:20; top:10; height:180; width:300; background-color:yellow; padding: 10px;>

....

</div>

HTML - Styles - Innenabstand

<div style="position:absolute; left:20; top:10; height:180; width:300; background-color:yellow; padding:10px; border-style: solid; border-width: 1px; border-color: green"> ....

</div>

HTML - Styles - Rahmen

HTML - Styles - Unterschiede in den Browsern

Internet Explorer: Innenabstand und Rahmen liegen innerhalb des durch height und width definierten Rechtecks.

Die Darstellung von Innenabstand und Rahmen ist abhängig vom Browser

Mozilla Firefox: Innenabstand und Rahmen werden zu height und width dazuaddiert.

Firefox verhält sich konform zum Standard

HTML - Styles - Überblick

• Schriften

• Hintergründe

• Innenabstände

• Rahmen

• Positionen

• Gestaltungen (z.B. Aufzählungszeichen)

Überblick über alle Gestaltungsmöglichkeiten mit Styles

Literatur über Styles: http://de.selfhtml.org/navigation/css.htm


HTML - Style-Klassen

Wenn man ein Design mehrfach benötigt,kann man verschiedene Styles zu einer Klasse gruppieren.

Beispiel

Klasse

Hintergrundfarbe Schriftart Innenabstand Rand

HTML - Style-Klassen - Definieren

Style-Klassen werden im <head> Tag defniert

<head> <style type="text/css"> .mybody {font-family:arial; font-color:black; font-size:16; background-color:lightyellow} </style></head>

Alle Definitionen werden zwischen <style> ... </style> abgelegt

Die Syntax ist: .klassenname {style1; style2; ...}

HTML - Style-Klassen - Definition und Verwendung

<head> <style type="text/css"> .box {background-color:yellow; position:absolute; padding:10px; border-style:solid; border-width:1; border-color:green} </style></head>

Definition

<body> <div class="box" style="left:20; top:10; height:180; width:300;"> </div></body>

Verwendung

<head> <style type="text/css"> .mybody {font-family:arial; font-color:black; font-size:16; background-color:lightyellow} .kasten {background-color:yellow; position:absolute; padding:10px; border-style:solid; border-width:1; border-color:green} .header {font-size:20;} </style></head>

HTML - Style-Klassen - Vererbung

<body class="mybody"> <div class="kasten" style="left:20; top:10; height:180; width:300;"> <div class="header">Die Made</div> Hinter eines Baumes Rinde<br>sitzt die Made mit dem Kinde.<br>Sie ist Wittwe denn der Gatte,<br>den sie hatte, </div><div class="kasten" style="left:340; top:10; height:180; width:300;"> <div class="header">Die Made (Fortsetzung)</div> fiel vom Blatte.<br>Diente so, auf diese Weise<br>einer Ameise als Speise </div></body>

HTML - Style-Klassen-Dateien

Wenn man Style-Klassen immer wieder benötigt,können diese in separaten Dateien verwaltet werden

Datei: mystyles.css.mybody {font-family:arial; font-color:black; font-size:16; background-color:lightyellow}.kasten {background-color:yellow; position:absolute; padding:10px; border-style:solid; border-width:1; border-color:green}.header {font-size:20;}

<head> <link rel="stylesheet" type="text/css" href= "mystyles.css"></head>

Verwendung der Klassendatei

HTML - Style-Klassen-Dateien - Nutzen

• Das komplette Design eines Web-Auftritts ist zentral definiert

• Das Design kann variiert werden, ohne Inhalte zu verändern

• Das Design kann auf einem ganz anderen Server liegen

• Designs können mehrfach verwendet werden

Worin liegt der Nutzen von Style-Klassen-Dateien

HTMLLinks

<body style="background-color: #99ccff">

<h1>Nützliche Links</h1>

<ul> <li><a href="http://www.schiller-witten.de">Schiller-Gymnasium</a></li> <li><a href="http://www.ruhr-gymnasium.de">Ruhr-Gymnasium</a></li> <li><a href="http://www.vfl-bochum.de">VfL Bochum</a></li> </ul>

</body>

HTML - Links


<a href="http://www.google.de"> <button>Geh zu Google</button> </a> </body>

HTML - Link als Button


<a href="http://www.google.de" style="text-decoration:none"> <button style="height:40px; width:200px">Geh zu Google</button> </a>

</body>

HTML - Link als Button mit Style

HTMLTabellen

<table border=1>

<tr> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr>

<tr> <td>Schmidt</td> <td>Thomas</td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr>

<table>

HTML - Tabellen

HTML - Tabellen - Titelzeile

<table border=1>

<tr style="font-weight:bold"> <td>Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr>


<table>

HTML - Tabellen - Innenabstand

<table border="1" cellpadding="6">



<table>

HTML - Tabellen - Größe und Ausrichtung

<table border="1" cellpadding="6" style="width:700px" align="center">



<table>

HTML - Tabellen - Prozentuale Größe

<table border="1" cellpadding="6" style="width:80%" align="center">



<table>

HTML - Tabellen - Zellengröße


<tr style="font-weight:bold"> <td style="width:50%">Name</td> <td>Vorname</td> <td>Straße</td> <td>Ort</td> </tr>


<table>

HTML - Tabellen - Zellenabstand

<table border="1" cellpadding="6" cellspacing= "0" style="width:100%" align="center">



<table>

cellspacing=0 cellspacing=10



<tr> <td>Schmidt</td> <td> </td> <td>Auf der Marta 1</td> <td>58452 Witten</td> </tr>

<table>

HTML - Tabellen - Leere Zellen

HTML - Tabellen - Übung

Wie programmiert man folgende alternierende Liste?

Tip: Style-Klassen verwenden

HTML - Strukturieren von Seiten mit Tabellen

HTMLFrames

HTML - Frames - Grundlagen

Kopfbereich

Restbereich

Menübereich

Info-Bereich

HTML - Frames - Vertikale Teilung

<html> <head> <title>Frames</title> </head>

<frameset rows="100px,*" frameborder="0" border="0" framespacing="0"> <frame name="head" src="frame-head.html" scrolling="no" frameborder="0"/> <frame name="info" src="head.html" scrolling="no" frameborder="0"/> </frameset>

</html>

HTML - Frames - Vertikale und horizontale Teilung

<frameset rows="100px,*" frameborder="0" border="0" framespacing="0"> <frame name="head" src="frame-head.html" scrolling="no" frameborder="0" >

<frameset cols="218,*" border="0" framespacing="0" rows="*" frameborder="0"> <frame name="menu" src="frame-menu.html" scrolling="no" frameborder="0" /> <frame name="info" src="frame-info.html" scrolling="yes" frameborder="0" /> </frameset></frameset>

HTML - Frames - Zielangabe bei Links

<a href="mein-link.html" target= "info"> Link </a>

Link

HTML - Frames - Alternative für Browser ohne Frames

<html> <head> ... </head>

<frameset> ... </frameset>

<noframes> <body bgcolor="white"> </body> </noframes>

</html>

HTML - Frames - Nutzen

• Seiten mit einem Corporate Design

• Seiten mit Menüführung

Frames: Worin liegt der Nutzen

HTML - Frames - Programmier-Tips

• Jeder Frame ist eine eigenständige HTML-Seite

• Quelltextanzeige zeigt aktuellen Frame

• Bei Links muss der Ziel-Frame definiert werden

Frames: Wichtig beim Programmieren

HTMLFormulare

HTML - Formulare - Eigenschaften

• Formulare sind interaktiv

• Formulare bestehen aus mehreren Eingabeelementen

<form>

... Formularbestandteile ...

</form>

HTML - Formulare

<form> ... </form> erzeugt eine Struktur – ist aber nicht sichtbar

<form> <div>Name</div> <input type="text" name="name" size="15" > </input>

<div>Vorname</div> <input type="text" name="vorname" size="15" />

</form>

HTML - Formulare - Eingabefelder

Die Längenangabe erfolgt in Zeichen

<div style="position:absolute; left:30px; top:20px"> Name<br> <input type="text" name="name" size="15" /></div>

<div style="position:absolute; left:160px; top:20px"> Vorname<br> <input type="text" name="vorname" size="15" /></div>

HTML - Formulare - Eingabefelder mit expliziter Position

<input type="checkbox" name="kleingedrucktes"/>Ich habe das Kleingedruckte gelesen

HTML - Formulare - Checkboxen

<input type="radio" name="geschlecht" value="m"/>männlich<br>

<input type="radio" name="geschlecht" value="w"/>weiblich<br>

HTML - Formulare - Radiobuttons

• Radiobuttons werden über den Namen assoziiert und gruppiert• Die Zuordnung eines Wertes erfolgt über das Attribut: value="Wert"

<input type="password" name= "kennwort" size="15" />

HTML - Formulare - Eingabefelder für Kennwörter

<select name="art" size="1" style="left:130px; top:20px; width:200">

<option> Bankeinzug </option> <option> Rechnung </option> <option> Kreditkarte </option> <option> Nachname </option>

</select>

HTML - Formulare - Comboboxen

<select name="art" size="1" style="left:130px; top:20px; width:200">

<option value="bank"> Bankeinzug </option> <option value="invoice"> Rechnung </option> <option value="creditcard"> Kreditkarte </option> <option value="cash"> Nachname </option>

</select>

HTML - Formulare - Comboboxen mit Werten

<select name="art" size= "4" style="left:130px; top:20px; width:200">

<option value="bank"> Bankeinzug </option> <option value="invoice"> Rechnung </option> <option value="creditcard"> Kreditkarte </option> <option value="cash"> Nachname </option>

</select>

HTML - Formulare - Listboxen

• Eingabefelder: <input type="text" name="name" value="Thomas" />

• Checkboxen: <input type="checkbox" name="kleingedrucktes" checked />

• Radiobuttons: <input type="radio" checked />

• Comboboxen: <option selected> Kreditkarte </option>

HTML - Formulare - Vorbesetzungen

HTML - Formulare - Übung

• Als Vorlage kann form-exercise-template.html verwendet werden ...

HTML - Formulare - Eingabeelemente

• Eingabefelder

• Checkboxen

• Radiobuttons

• Comboboxen

• Listboxen

Eingabeelemente

HTML - Formulare - Aktionselemente

• Buttons

• Abschicken

• Zurücksetzen

Aktionselemente

JavaScript

Javascript

• JavaScript ist eine Programmiersprache

• Java ist eine irreführende Namenskomponente

• Skriptsprachen dienen zur Steuerung von Anwendungen

<button style="height:100; width:200; font-size:20" onclick=" alert('hoho') "> Start</button>

Javascript - Aufruf

<button style="height:100; width:200; font-size:20" onclick=" meinscript() "> Start</button>

Javascript - Funktionen

function meinscript() { alert ("hoho"); }

<head> <script language="javascript">

</script>

</head>

Javascript - Funktionen

• Funktionsdefinitionfunction () { ..... Programmschritte ..... }

• Funktionsaufruffunction ();

• Jedes Statement endet mit einem Semikolonalert (“hallo“);

Funktionen

Javascript - Variablen

• Zuweisungzahl = 3;text = “ich bin ein text“;Die Zuweisung eines Wertes auf eine existente Variable überschreibt diese

Variablen

• Automatische DeklarationDie Zuweisung eines Werts auf eine nicht existente Variable legt diese an

• Variablen erhalten implizit einen TypDer Typ hängt vom zugewiesenen Wert ab

• Deklarationvar zahl;var zahl = 3;var text = “ich bin ein text“;

Javascript - Datentypen und Klassen

Datentypen und Klassen

• Eine Variable ist entweder ein einfacher Datentyp

Ganzzahl zahl = 345

Gleitkommazahl pi = 3.14159265

Text “ich bin ein text“

• Oder ein strukturiertes Objekt – eine sogenannte KlasseKlassen bestehen aus verschiedenen Komponenten (member)

Jedes member ist selbst wieder eine Variable

Die member werden durch klassenname.member angesprochen

Javascript - Beispiel für eine Klasse

Klasse: person

person.name = “schmidt“;

person.vorname = “thomas“;

person.alter = 53;

person.geschlecht = “m“;

person.groesse = 185;

person.gewicht = 98.5;

Klassen können auch Funktionen haben

var gewicht = person.berechneIdealGewicht ();

Javascript - Klasse - element

Klasse: element (Element der HTML-Seite)element.value = “anzeigetext“

element.style

style ist selbst wieder ein strukturiertes Objekt

Klasse: stylestyle.left

style.top

style.backgroundColor

Jede style-Eigenschaft wird durch ein eigenes member abgebildet

Javascript - Klasse - Verschachtelte Klassen

Verschachtelte Klassen element.style.backgroundColor = “yellow“

element.style.left = 100

element.style.top = 20

<button class="button" style="height:100; width:200" onclick=" paintrect() "> Start</button>

Javascript - HTML-Elemente modifizieren

function paintrect() { element = document.getElementById ("rect"); element.style.backgroundColor = "red"; }

Javascript Zusammenfassung

• Die Klasse die das HTML-Element rect abbildet wird ermitteltund der Variablen element zugewiesen

• Es wird eine Variable element angelegt

Was passiert hier?

element = document.getElementById ("rect"); element.style.backgroundColor = "red";

• element.style.backgroundColor wird eine neue Farbe zugewiesen

<button class="button" style="left: 20; top:20" onclick="paintrect ('red') "> Mach rot </button><button class="button" style="left:240; top:20" onclick="paintrect ('yellow')"> Mach gelb </button>

Javascript - Funktionen mit Parametern

function paintrect (farbe) { element = document.getElementById ("rect"); element.style.backgroundColor = farbe; }

Javascript - Übung: HTML-Elemente verschieben

function moverect (top) { ... Hier bitte eigenen Code erfinden ... }

• Als Vorlage kann js-exercize-move.html verwendet werden ...

<button class="button" style="left: 20; top: 20" onclick="moverect (20) "> Oben </button><button class="button" style="left: 20; top:130" onclick="moverect (130)"> Unten </button>

Javascript - Lösung: HTML-Elemente verschieben

function moverect (top) { element = document.getElementById ("rect"); element.style.top = top; }

Javascript - Zusammenfassung

• Definieren von Funktionen in <head>

• Aufrufen von Funktionen

• Funktionen mit Parametern

• Aufrufen von JavaScript bei dem Event: onclick

Was können wir bereits

Javascript - Events

• onclick• onmouseover• onmouseout • onfocus• onblur• onchange• onload• onunload

Welche Events gibt es noch?

<div id="rect" onmouseover="paintrect ('red')" onmouseout="paintrect ('yellow')"></div>

Javascript - Event - onmouseover

<button class="button" style="height:100; width:200" onclick= "outputText()"> Gib einen Text aus...</button>

Javascript - Textausgabe in einem DIV

function outputText () { var element = document.getElementById ("rect"); result = "Ich bin eine Textzeile."; element.innerHTML = result; }

Javascript - Mehrzeilige Textausgabe

function createOutput () { var element = document.getElementById ("rect"); result = "Ich bin eine Textzeile."; result = result + "<br>Ich bin auch eine Textzeile." result += "<br><i>Ich bin die dritte Zeile, aber kursiv.</i>" element.innerHTML = result; }

<div id="rect" onmouseover="paintrect ('red')" onmouseout="paintrect ('yellow')"></div>

Javascript - Event - onmouseover

Javascript - Ausgabe von Text

Ausgabe von Text in ein Rechteck

<button class="button" style="height:100; width:200" onclick= "outputText()"> Gib einen Text aus...</button>

Javascript - Textausgabe in einem DIV

function createOutput () { var element = document.getElementById ("rect"); var result = "Ich bin eine Textzeile."; element.innerHTML = result; }

Javascript - Operator +

Der Operator +

Addiert Zahlen var a = 3 + 5;

Addiert Zahlvariablen var a = 3; var b = 5; var c = a + b;

Verkettet Zeichenketten var a = “Ich bin ein text“ + “Ich auch“;

Javascript - Operator +=

Der Operator +=

Der Ausdruck var zahl = 3; zahl += 5;

Ist eine Abkürzung für var zahl = 3; zahl = zahl + 5;

Anhängen von Zeichenketten var text = “Ich bin ein Text“; text += “Ich werde angehängt“;

Javascript - Mehrzeilige Textausgabe

function createOutput () { var element = document.getElementById ("rect"); var result = "Ich bin eine Textzeile."; result += "<br>Ich bin auch eine Textzeile." result += "<br><i>Ich bin die dritte Zeile, aber kursiv.</i>" element.innerHTML = result; }

Javascript - while-Schleifen

Schleifen mit while

Ohne Schleifevar text = ““text += “Ich bin eine Zeile<br>“;text += “Ich bin eine Zeile<br>“;text += “Ich bin eine Zeile<br>“;

Mit Schleifevar text = ““;var count = 3;

while (count > 0) { text += “Ich bin eine Zeile<br>“; count = count – 1; }

Beide Segmente erzeugen einen dreizeiligen Text

Bedingung

Javascript - Bedingungen und Boolsche Werte

Bedingungen und Boolsche Werte

• Ein boolscher Wert ist entweder true oder false

• Eine Bedingung ist immer ein boolscher Wert

zahl < 3zahl <= 3zahl == 3zahl >= 3zahl > 3zahl != 3

• Insbesondere alle Vergleiche ergeben boolsche Werte

Javascript - for-Schleifen

Schleifen mit for

for-Schleifevar text = ““;var zahl;

for (zahl=1; zahl <= 3; zahl++) { text += “Ich bin eine Zeile<br>“; }

zahl++ ist eine Abkürzung für zahl = zahl + 1

Bedingungwhile-Schleifevar text = ““;var count = 3;

while (count > 0) { text += “Ich bin eine Zeile<br>“; count = count – 1; }

Zählen

Javascript - Schleifenvariable

Schleifenvariable

var text = ““;var zahl;

for (zahl=1; zahl <= 3; zahl++) { text += “Ich bin die Zeile Nummer “ + zahl + “<br>“; }

Die Schleifenvariable wird auch Schleifenindex genannt

Javascript - Anwendung einer for-Schleife

function createOutput () { var text = ““; var zahl;

for (zahl=1; zahl <= 20; zahl++) text += “Ich bin die Zeile Nummer “ + zahl + “<br>“;

var element = document.getElementById ("rect"); element.innerHTML = result; }

Rollbalkenstyle=“overflow:scroll“

Wenn die Schleife nur eine Zeile umfasst,Kann man { } weglassen

Javascript - Arithmetische Operatoren

Arithmetische Operatoren

Addieren wert = 3 + 5;

Subtrahieren wert = 3 - 5;

Multiplizieren wert = 3 * 5;

Dividieren wert = 3 / 5;

Rest beim Teilen wert = 32 % 5;Inkrementieren wert = wert++;

Dekrementieren wert = wert--;

Javascript - Quadratzahlen

function squareNumbers () { result = "<h3>Quadratzahlen von 1 bis 10</h3>"; var zahl;

for (zahl = 1; i <= 10; i++) result += zahl + "<sup>2</sup> = " + zahl*zahl + "<br>";


Javascript - if-Klausel

Die if-Klausel

if (betrag > 1000) { alert (“Die Summe ist zu hoch“); }

• Bedingte Ausführung von Programmschritten

Bedingung

Wenn die if-Klausel nur eine Zeile umfasst,Kann man { } weglassen

Javascript - Vielfache einer Zahl

function multiples (teiler) { result = "<h3>Vielfache von " + teiler + " zwischen 1 und 30</h3>"; for (zahl=1; zahl<=30; zahl++) if (zahl % teiler == 0) result += zahl + "<br>";

element = document.getElementById ("rect"); element.innerHTML = result; }

Javascript - Vielfache (Lösung mit Funktion)

for (zahl=1; zahl<=30; zahl++) if (istTeilbar (zahl, teiler)) result += zahl + "<br>";

Abfrage mittels einer Funktion

for (zahl=1; zahl<=30; zahl++) if (zahl % teiler == 0) result += zahl + "<br>";

Abfrage direkt

Function istTeilbar (zahl, teiler) { if (zahl % teiler == 0) return true; return false; }

Funktion, die true oder false zurückliefert

Javascript - Übungsaufgabe: Primzahlen

for (zahl=1; zahl<=30; zahl++) if (istPrim (zahl)) result += zahl + "<br>";

Abfrage mittels einer Funktion

Function istPrim (zahl) { ... return true oder false; }


Javascript - Übungsaufgabe: Primzahlen - Lösung

for (zahl=1; zahl<=30; zahl++) if (istPrim (zahl)) result += zahl + "<br>";

Abfrage mittels einer Funktionfunction istPrim(zahl) { for (k=2; k<zahl; ++k) if (zahl % k == 0) return false; return true; }


Javascript - Dynamisches Erzeugen von HTML

<div id="rect" class= "rect" style="left:20; top:20; height:400px; width:600px; background-color:white;">

<div class="rect" style="left: 10; top:10; height: 90; width:90;"></div> <div class="rect" style="left: 110; top:10; height: 90; width:90;"></div> <div class="rect" style="left: 210; top:10; height: 90; width:90;"></div> <div class="rect" style="left: 310; top:10; height: 90; width:90;"></div> <div class="rect" style="left: 410; top:10; height: 90; width:90;"></div>

</div>

Variante 1: Rechtecke statisch als HTML-Code

Javascript - Dynamisches Erzeugen von HTML

function ErzeugeQuadrate() { result = ""; result += "<div class='rect' style='left: 10; top:10; height:90; width:90;'></div>"; result += "<div class='rect' style='left:110; top:10; height:90; width:90;'></div>"; result += "<div class='rect' style='left:210; top:10; height:90; width:90;'></div>"; result += "<div class='rect' style='left:310; top:10; height:90; width:90;'></div>"; result += "<div class='rect' style='left:410; top:10; height:90; width:90;'></div>";


Variante 2: Erzeugen der Rechtecke mit JavaScript

Javascript - Taschenrechner - Motivation

• Anzeigeregister

• Ziffer-Tasten

• Operator-Tasten

• Gleich-Taste

Welche Elemente hat ein Taschenrechner

Javascript - Taschenrechner - Programmierung

Wir beginnen mit der Programmierung

.register { font-family:arial; font-color:black; font-size:20; background-color:lightgray; position:absolute; }

Style für Anzeigeregister

.button { font-family:arial; font-color:black; font-size:20; background-color:lightgray; position:absolute; }

Style für Buttons

Javascript - Taschenrechner - Übung

Übung 1: Gestaltung des Rechners

js-calc-exercise-hoch.html

js-calc-exercise-quer.html

Javascript - Taschenrechner - Entwicklungsschritte

• Anordnung der Bedienelemente• Design der Bedienelemente• Logik der Zifferntasten• Logik der Operationstasten (+, -, x, :)• Logik der Taste =• Logik der Tasten mit direkter Wirkung (C, CE, +/-)

Entwicklungsschritte

Wir setzen auf dem Template js-calc-workshop.html auf

Javascript - Taschenrechner - Ziffern

Wir aktivieren die Ziffer-Tasten

onclick = "Ziffer(1)";

Die Ziffer-Buttons erhalten einen onclick-Event.Dieser ruft eine Funktion Ziffer auf

function Ziffer(z) { // HTML-Objekt des Eingaberegisters beschaffen var element = document.getElementById ("register"); // An das Eingaberegister die Ziffer anhängen element.value += z; }

Die Funktion Ziffer hängt die übergebene Ziffer an das Anzeigeregister an

Javascript - Taschenrechner - Leeren der Anzeige

Nach bestimmten Operationen wird das Anzeige-Register

bei der Eingabe einer Ziffer zunächst gelöscht

• Nach jedem Drücken einer Rechenoperation (+, -, *, /)

• Nach jeder Berechnung (wenn = gedrückt wurde)


Wir führen eine Variable anzeigeLeeren ein

• true : die Anzeige wird bei der Eingabe einer Ziffer geleert • false: die Ziffer wird an die Anzeige angehängt

Die Variable ist global

Sie kann überall gesetzt werden

Sie „lebt“ solange, wie die Webseite existiert


function Ziffer(z) { // HTML-Objekt des Eingaberegisters beschaffen var element = document.getElementById ("register"); if (anzeigeLeeren) { Element.value = ""; anzeigeLeeren = false; // zurücksetzen – sonst wird die Anzeige immer leer gemacht }

// An das Eingaberegister die Ziffer anhängen element.value += z; }

Erweiterung der Funktion Ziffer

var anzeigeLeeren = true; // Initial ist die Variable mit true vorbesetzt

Deklaration der Variablen

Javascript - Taschenrechner - Funktion: LeseAnzeige

Wir erstellen eine Hilfsfunktion zum Lesen des Anzeigeregisters

function LeseAnzeige ()

{ // Lese Anzeige-Register als Text var text = document.getElementById ("register").value;

// Wandle den Text in eine Zahl um und liefere diese als Ergebnis return eval (text); }

Der Wert wird als Zahl zurückgeliefert

Javascript - Taschenrechner - Funktion: SetzeAnzeige

Wir erstellen eine Hilfsfunktion zum Setzen des Anzeigeregisters

function SetzeAnzeige (wert)

{ // Wandele den übergebenen Wert in eine Zeichenfolge um var text = wert.toString();

// Schreibe die Zeichenfolge in das Anzeigeregister document.getElementById ("register").value = text; }

Der Wert wird als Zahl übergeben

Javascript - Taschenrechner - Operationen

Wir aktivieren die Operations-Tasten (+, -, x, :)

onclick = "Operation (‘+‘)"

• Die Operations-Buttons erhalten einen onclick-Event.

• Dieser ruft eine Funktion Operation auf

• Die Operation wird als Parameter übergeben

Javascript - Taschenrechner - Funktion: Operation

function Operation (typ) { // Anzeigeregister in Speicher übernehmen speicher = LeseAnzeige(); // Setze Schalter, dass das Anzeige-Register bei der nächsten Zifferneingabe geleert wird anzeigeLeeren = true;

// Operation merken, um diese dann beim Drücken der Taste ‘=‘ auszurechnen operation = typ; }

Die Funktion Operation merkt sich die Art der Rechnung, führt sie aber noch nicht aus

Die Funktion Operation

speicher und operation sind globale Variablen

Javascript - Taschenrechner - Ergebnis berechnen

Berechnen des Ergebnisses (Taste ‘=‘)

onclick = "Gleich()"

Der Button = erhält einen onclick-Event der eine Funktion Gleich aufruft

Die Funktion Gleich

• Liest den Wert aus dem Anzeigeregister

• Wendet die Operation auf speicher und anzeige an

• Schreibt das Ergebnis zurück in Anzeige-Register

Javascript - Taschenrechner - Funktion: Gleich

function Gleich () { // Hole den Wert, der augenblicklich im Anzeige-Register steht (als Zahlenwert) var anzeige = LeseAnzeige();

// Lege eine variable für das Ergebnis an var ergebnis = anzeige;

// Führe die Operation aus und lege das Ergebnis auf der Variablen "ergebnis" ab. if (operation == "+") ergebnis = speicher + anzeige; if (operation == "-") ergebnis = speicher - anzeige; if (operation == "*") ergebnis = speicher * anzeige; if (operation == "/") ergebnis = speicher / anzeige;

// Schreibe das Ergebnis in das Anzeige-Register SetzeAnzeige (ergebnis);

// Speicher leeren und Operation neutralisieren speicher = 0; operation = "";

// Setze Schalter, dass Anzeige-Register bei der nächsten Zifferneingabe geleert wird anzeigeLeeren = true; }

Javascript - Taschenrechner - Taste CE

function ClearDisplay () { // Setze eine „0“ ins Anzeigeregister document.getElementById ("register").value = "0";

// Setze Schalter, dass die Anzeige bei der nächsten Zifferneingabe geleert wird anzeigeLeeren = true; }

Die Funktion ClearDisplay

Die Taste CE löscht das Anzeigereigster

onclick = "ClearDisplay()"

Der Button CE erhält einen onclick-Event der eine Funktion ClearDisplay aufruft

Javascript - Taschenrechner - Taste C

function Clear () { // Lösche Anzeigeregister ClearDisplay ();

// Lösche Speicher speicher = 0; }

Die Funktion Clear

Die Taste C löscht Anzeigereigster und Speicher

onclick = "Clear()"

Der Button C erhält einen onclick-Event der eine Funktion Clear aufruft

Javascript - Taschenrechner - Taste +/-

function PlusMinus () { // Schreibe den negativen Wert der Anzeige in die Anzeige SetzeAnzeige (-LeseAnzeige());


Die Funktion PlusMinus

Die Taste +/- wirkt nur auf das Anzeigeregister

onclick = "PlusMinus()"

Der Button +/- erhält einen onclick-Event der eine Funktion PlusMinus aufruft

Javascript - Taschenrechner - Basisversion ist fertig

Die Basisversion des Rechners ist fertig

• Zifferneingabe• Grundrechenarten• C und CE• Vorzeichenwechsel +/-

Javascript - Taschenrechner - Ausbaustufe Mathematik

Ausbaustufe Mathematik

• Quadratwurzel• Winkelfunktionen• Exponentialfunktion• Logarithmus• Umkehrfunktion• PI

Javascript - Taschenrechner - Anzeigeregister-Funktionen

Mathematische Funktionen wirken nur auf das Anzeigeregister

wert = LeseAnzeige();wert = TuWas (wert);SetzeAnzeige (wert);

SetzeAnzeige ( TuWas ( LeseAnzeige() );

Oder auch kurz

Javascript - Taschenrechner - Bibliothek „Math“

Matchematisch Bibliothek „Math“

Math.sin (y) Sinus

Math.cos (y) Cosinus

Math.tan (y) Tangens

Math.sqrt (y) Wurzel (square root)

Math.exp (y) Exponentialfunktion (ex)

Math.log (y) Natürlicher Logarithmus

Javascript - Taschenrechner - Wurzel

Beispiel: Quadratwurzel

function Quadratwurzel () { // Schreibe die Wurzel der Anzeige in die Anzeige SetzeAnzeige (Math.sqrt (LeseAnzeige());


Beispiel: Wurzel

onclick = "Quadratwurzel()"

Der Button sqrt erhält einen onclick-Event der eine Funktion Quadratwurzel aufruft

Javascript - Taschenrechner - Schleifarbeiten

Schleifarbeiten

• Dezimalkomma statt Dezimalpunkt

Javascript - Taschenrechner - Dezimalkomma statt Punkt

Dezimalkomma statt Dezimalpunkt

In der Funktion SetzeAnzeige wird der Punkt in ein Komma umgewandelt

function SetzeAnzeige (wert)

{ // Wandele den übergebenen Wert in eine Zeichenfolge um var text = wert.toString();

// Ersetze Punkte durch Kommata (hoffen wir, dass es nur einer ist) text = text.replace ("\." , ",");

// Schreibe die Zeichenfolge in das Anzeigeregister document.getElementById ("register").value = text; }



In der Funktion LeseAnzeige wird das Komma in einen Punkt zurückgewandelt

function LeseAnzeige ()

{ // Lese Anzeige-Register als Text var text = document.getElementById ("register").value;

// Ersetze , durch . text = text.replace ("," , ".");

// Wandle den Text in eine Zahl um und liefere diese als Ergebnis return eval (text); }



Der Button wird durch ersetzt

onclick = "Ziffer (',')";

Es wird ein Komma statt eines Punktes eingefügt

Javascript - Taschenrechner - Schleifarbeiten

Schleifarbeiten

• Dezimalkomma statt Dezimalpunkt

• Prüfen der Eingabe auf korrekte Zahlen• Division durch Null ablehnen

Javascript - Taschenrechner - Der Rechner ist fertig

Der Rechner ist fertig

Kleiner Ausblick

• Styles

• JavaScript

• HTML Web-Seiten

Was können wir bereits

Was kann man damit anfangen

• Interaktive Prozesse

• Gestaltung beliebiger statischer Web-Seiten

Was kann man damit anfangen

Was nicht?

• Speichern und Wiederverwenden von Informationen

www.meinserver.de

http://192.168.0.1

Browser

http://192.168.0.1/Index.html

Browser

http://192.168.0.1/Index.php

Browser

PHP - Dynamik ohne PHP

HTTP-Server

(Apache, IIS)

HTML Seite mit oder ohne JavaScript

Jegliche Dynamik passiert hier

192.168.0.1

HTTP-Server

(Apache, IIS)

PHP Script

Erzeugte HTML-Seite PHP Interpreter

macht aus PHP-Code HTML

CGI

PHP - Dynamische Seiten mit PHP

Browser

Browser

Browser

http://192.168.0.1/Index.phpindex.php

Dateien

Zugriff auf Speichermedien

Datenbank

PHP - Steckbrief

• Ist eine Skriptsprache, die HTML erzeugt

• Wird über das Common Gateway Interface (CGI) aufgerufen

• Kann auf das Dateisystem des Servers zugreifen

• Kann auf Datenbanken zugreifen (z.B. MySQL)

PHP

PHP - Einrichten

• Einrichten eines HTTP-Servers (Apache)

• Einrichten des PHP-Interpreters

• XAMPP

Einrichten eines Servers für PHP

X = Cross PlattformA = ApacheM= MySQL (Datenbank)P = PHPP = Pearl

192.168.0.1

PHP - Konfigurieren des Apache

Browser

http://192.168.0.1/Index.phpdatei-a.php

Z:\

Computer AG

php

datei-a.php

datei-b.php

datei-c.php

Festplatte des ServersHTTP-Server Apache

Konfigurationsdatei: httpd.conf

DocumentRoot: Z:/Computer AG/php

PHP - Funktionsprinzip

PHP-Datei PHP Interpreter HTML

Der PHP-Interpreter erzeugt HTML aus PHP

PHP - Eine statische HTML-Seite

PHP reicht reines HTML einfach durch

<html> <head> <title>Meine erste PHP-Seite</title> </head> <body> <h1>Meine erste PHP-Seite</h1> </body></html>

HTML-Seite ohne PHP

first.php

http://www.computer-ag.info/php/first.php

<html> <head> <title>Meine erste PHP-Seite</title> </head> <body> <? .... PHP Code .... ?> </body>

</html>

PHP - Einbetten von PHP-Code

PHP wird in <? .... ?> eingeklammert und in HTML eingebettet

PHP - Der Befehl: echo

Der Befehl: echo "..." erzeugt HTML

<html> <head> <title>Meine erste PHP-Seite</title> </head> <body> <? echo "<h1>Mein erster PHP-Befehl</h1>" ?> </body>

</html> echo.php

http://www.computer-ag.info/php/echo.php

PHP - Mischen von PHP und HTML

HTML und PHP können beliebig gemischt sein

<body>

<h1>Ich bin eine statische Überschrift</h1>

<? echo "<h1>Ich bin mit PHP erzeugt</h1>" ?>

<h1>Ich bin wieder eine statische Überschrift</h1> <? echo "<h1>Ich bin wieder mit PHP erzeugt</h1>" ?>

<h1>Zum Schluss noch eine statische Überschrift</h1>

</body>mix.php

http://www.computer-ag.info/php/mix.php

PHP - Der Befehl: phpinfo()

Die Funktion phpinfo() erzeugt Info-HTML-Code

<body>

<? phpinfo (); ?>

</body>phpinfo.php

http://www.computer-ag.info/php/phpinfo.php

PHP - Eigene Funktionen

Und dann in <body> aufgerufen<body>

<h1>Funktionen</h1>

<? myfunc(); myfunc(); myfunc(); ?>

</body>

Eigene Funktionen werden im <head> definiert<head>

<? function myfunc (); { echo "Hallo Welt <br>" ; } ?>

</head>functions.php

http://www.computer-ag.info/php/phpinfo.php

PHP - Übung: Tabelle

Funktion tabellenzeile function tabellenzeile(); { echo '<tr class="trow">'; echo '<td> Schmidt </td>'; echo '<td> Thomas </td>'; echo '<td> Auf der Marta 1 </td>'; echo '<td> 58452 </td>'; echo '<td> Witten </td>'; echo '<td> 0172-9849129 </td>'; echo '</tr>'; }

Funktionsaufruf

tabellenzeile(); tabellenzeile(); tabellenzeile(); tabellenzeile(); tabellenzeile();

.../php/meinname/table.php

http://www.computer-ag.info/php/table.php

PHP - Alternierende Tabelle

Zwei Styles definieren - einen für gerade Zeilen und einen für ungerade Zeilen

<style type="text/css"> .trow-even {background-color: lightyellow} .trow-odd {background-color: yellow} </style>

PHP - Alternierende Tabelle

Funktion tabellenzeile erweitern

function tabellenzeile(); {

// Globale Variable anlegen, auf der man sich merkt, ob die Zeile gerade oder ungerade ist global $geradezeile;

// Wenn es eine gerade Zeile ist, erzeugen wir eine tabellenzeile mit dem style "trow-even" // Sonst erzeugen wir eine Tabellenzeile mit dem style "trow-odd" if ($geradezeile) echo '<tr class="trow-even">'; else echo '<tr class="trow-odd">';

// Aus gerade wird ungerade - aus ungerade wird gerade $geradezeile = !$geradezeile;

...... }

PHP - Variablen in PHP

• Beginnen immer mit dem $-Zeichen

• Haben keinen Datentyp

Variablen in PHP

• Sind global, wenn Sie außerhalb einer Funktion angelegt werden

• Werden in Funktionen mit dem Schlüsselwort global deklariert

Globale Variablen

PHP - Tabelle mit Daten

Die Aufrufe von tabellenzeile übergeben die Daten

tabellenzeile ("Schmidt" , "Thomas" , "Auf der Marta 1" , "58452", "Witten" , "0172-9849129"); tabellenzeile ("Meier" , "Hugo" , "Im Westenfeld 13" , "44789", "Bochum" , "0234-123456" ); tabellenzeile ("Mustermann" , "Erwin" , "Planck Platz 1" , "10000", "Berlin" , "030-12345678"); tabellenzeile ("Zdebel" , "Thomas" , "Am Stadion 12" , "44799", "Bochum" , "0234-9988776"); tabellenzeile ("Datenschutz" , "Hans" , "Lange Leitung 23" , "22333", "Münster" , "0251-121212");

table-with-data.php

http://www.computer-ag.info/php/table-with-data.php

PHP - Tabelle mit echten Daten

Funktion tabellenzeile erhält Parameter

function tabellenzeile($name, $vorname, $strasse, $plz, $ort, $telefon); { ...... echo "<td> $name </td>"; echo "<td> $vorname </td>"; echo "<td> $strasse </td>"; echo "<td> $plz </td>"; echo "<td> $ort </td>"; echo "<td> $telefon </td>"; ...... }

table-with-data.php

http://www.computer-ag.info/php/table-with-data.php

PHP - Eine „echte“ Anwendung

Wie kann man die Tabellenanzeige real nutzen?

Frage ?

Daten aus einem wirklichen Datenbestand anzeigen

Antwort !

Was braucht man dazu ?

Zugriff auf eine Datenbank

Datenbanken

Kleiner Exkurs

Datenbanken - Tabellen

Daten in Datenbanken werden in Tabellen gespeichert

Name Vorname Strasse Ort

Schmidt Thomas Auf der Marta 1 Witten

Mustermann Hans Testweg 1 Beispielstadt

Tabelle

Feste Zahl benannter Spalten(werden beim Anlegen der Datenbank festgelegt)

beliebig viele

Datensätze

Datenbanken - Struktur

Eine Datenbank besteht aus einer oder mehreren Tabellen

Name Vorname Strasse OrtSchmidt Thomas Auf der Marta 1 WittenMustermann Hans Testweg 1 Beispielstadt

Personen

Benutzer PasswortSchmidt ThomasMustermann Hans

ZugängeName Branche UmsatzMicrosoft Software Sehr VielMustermann Hardware Normal

Firmen

Datenbank

Datenbanken - Abfragen

Datenbank-Abfragen erfolgen mittels eines SQL-Befehls

SELECT name,vorname FROM adressen




Schmidt Karl Klausweg 13 Wurstdorf

Müller Karsten Karlstraße 24 Meierstadt

Tabelle: adressen

Name Vorname

Schmidt Thomas

Mustermann Hans

Schmidt Karl

Müller Karsten

Ergebnismenge

Datenbanken - Abfragen - WHERE

Mit der WHERE-Klausel filtert man Datensätze heraus

SELECT name,vorname FROM adressen WHERE name=‘schmidt‘






Tabelle adressen

Name Vorname

Schmidt Thomas

Schmidt Karl

Ergebnismenge

Ohne WHERE-Klausel werden immer alle Sätze abgefragt

Datenbanken - Abfragen - ORDER BY

Mit der ORDER BY-Klausel sortiert man die Ergebnismenge

SELECT name,vorname FROM adressen WHERE name=‘schmidt‘ ORDER BY vorname






Tabelle adressen

Name Vorname

Schmidt Karl

Schmidt Thomas

Ergebnismenge

Datenbanken - Abfragen - Ergebnismenge

• ist wiederum eine Tabelle

• besteht aus einer oder mehreren Zeilen (Rows)

• wird auch RowSet genannt

Die Ergebnismenge einer Datenbankabfrage

Datenbanken - Auswahl eines Datenbanksystems

• Microsoft SQL Server

• Oracle

• MySQL

Auswahl eines Datenbanksystems

Datenbanken - Die Datenbank MySQL

• ohne Lizenzgebühren frei benutzbar

• optimal in PHP integriert

• wird mit XAMPP installiert

• verfügt über eine WEB-Schnittstelle fürs Design

Die Datenbank MySQL

Datenbanken - Wir richten eine Beispieldatenbank ein

computerag

Name Vorname Strasse PlzSchmidt Thomas Auf der Marta 1 58452Mustermann Hans Testweg 1 11223

adressenOrtWittenBeispielstadt

Telefon0172-98491290234-112233

index.php > MyPhpAdmin

PHP

zurück zu

PHP - Übung: Zugriff auf Datenbank

Übungsvorlage: .../php/meinname/adressen.php

<? // Der folgende PHP-Code erzeugt HTML-Tabellenzeilen // aus der Datenbank-Tabelle 'adressen' in der Datenbank 'computerag'?>

Den nachfolgenden Code wollen wir nun gemeinsam entwickeln

Zeile 70

PHP - Anmelden beim MySQL-Datenbanksystem

Anmelden beim MySQL-Datenbanksystem

// Stelle eine Verbindung zum MYSQL-Datenbanksystem her// Das Datenbanksystem ist auf dem Rechner 'localhost' // Der Benutzername ist 'root'// Der Benutzer 'root' hat kein Passwort

$dbconnect = mysql_connect ('localhost', 'root');

// Prüfen, ob die Verbindung hergestellt wurde// Im Fehlerfall eine Meldung ausgeben und abbrechen

if ($dbconnect == false) exit ("Verbindung zur Datenbank auf Rechner 'localhost' kann nicht hergestellt werden.");

PHP - Auswählen einer Datenbank

Auswählen der Datenbank computerag

// Selektiere die Datenbank 'computerag' als diejenige, mit der ab jetzt gearbeitet werden soll

$selected = mysql_select_db ('computerag', $dbconnect);

// Prüfe, ob das Selektieren geklappt hat// Im Fehlerfall eine Meldung ausgeben und abbrechen

if ($selected == false) exit ("Kann die Datenbank 'computerag' nicht selektieren.");

PHP - Datensätze abfragen

Abfragen aller Datensätze aus der Tabelle adressen

// Die Datenbankabfrage wird formuliert und auf der Variablen $sql gespeichert$sql = "SELECT name,vorname,strasse,plz,ort,telefon FROM adressen ORDER BY name";

// Ausführen der Datenbankabfrage$rowset = mysql_query ($sql, $dbconnect);

// Prüfe, ob die Abfrage geklappt hat// Im Fehlerfall eine Meldung ausgeben und abbrechen if ($rowset == false) exit ("Die Datenbankabfrage ist fehlgeschlagen" . mysql_error());

SELECT name,vorname,strasse,plz,ort,telefon FROM adressen ORDER BY name

Auf der Variaben $rowset ist die gesamte Ergebnismenge abgelegt

PHP - Ergebnismenge (Row Set) verarbeiten

Verarbeiten aller Datensätze der Ergebnismenge (RowSet)

// So wird die jeweils nächste Zeile aus der Ergebnismenge geholt$row = mysql_fetch_row ($rowset)

// Schleife über alle Datensätze der Ergebnismenge// Für jeden Datensatz wird die Funktion tabellenzeile aufgerufen.

while ($row = mysql_fetch_row ($rowset)) tabellenzeile ($row);

PHP - Modifizieren der Funktion tabellenzelie

Modifizieren der Funktion tabellenzeile

Die Funktion erhält als Parameter den Datensatz

Funktion tabellenzeile

function tabellenzeile ($row) { .....

echo '<td> $row [0] </td>'; // row [0] repräsentiert das erste Feld des Datensatzes echo '<td> $row [1] </td>'; // row [1] repräsentiert das zweite Feld des Datensatzes echo '<td> $row [2] </td>'; // row [2] repräsentiert das dritte Feld des Datensatzes echo '<td> $row [3] </td>'; echo '<td> $row [4] </td>'; echo '<td> $row [5] </td>';

.... }

PHP - Zugriff auf die Datenbank ist fertig

PHP - Filter für Datensatzabfrage

Abfragen aller Datensätze mit einem bestimmten Namen

// Erzeugen einer Variablen mit dem Suchnamen$filter = "Schmidt";

// Erzeugen der fertigen Datenbankanfrage$sql = "SELECT name,vorname,strasse,plz,ort,telefon FROM adressen WHERE name=$filter ORDER BY name";

SELECT ... FROM adressen WHERE name='schmidt' ORDER BY name

PHP - Übergeben des Filters in der URL

Filter in der URL als Parameter übergeben

// Erzeugen einer Variablen mit dem Suchnamen aus dem URL-Parameter name$filter = $_REQUEST ['name'];

www.computer-ag.info?name=schmidt

Zugriff auf die URL-Parameter

PHP - Wahlweise mit oder ohne Filter

Filter nur anwenden, falls vorhanden

// Lese Filter aus der URL$filter = $_REQUEST['name'];

// Erzeuge WHERE-Klausel nur, wenn ein Filter da istif (empty($filter)) $select = "SELECT ... FROM adressen ORDER BY name,vorname";else $select = "SELECT ... FROM adressen WHERE name='$filter' ORDER BY name,vorname";

PHP - Übung: Namensabfrage mittels Formular

Übungsvorlage: .../php/meinname/adressen-abfrage.php

Wir entwickeln zunächst den HTML-Code für das Formular• Beschriftung• Eingabefeld für den Namen• Absende-Button• Absende-Information

PHP - Formular für Namensfilter

<body>

<h1>Adressenabfrage</h1>

<form action="adressen-abfrage.php" method="get"> Name: <input type="text" name="name" value=""> <button type="submit"> Absenden </button> <input type="hidden" name="submitted" value="yes"> </form>

192.168.0.1/adressen-abfrage.php?name=schmidt&submitted=yes

Beim Absenden des Formulars wird folgende URL erzeugt

Man beachte: Die Seite ruft sich selbst wieder auf

PHP - Unterscheiden zwischen Erstaufruf und Folgeaufruf

<? // Wenn diese Seite das erste mal aufgerufen wird, sind wir hier fertig. $submitted = $_REQUEST['submitted']; if (empty ($submitted)) exit(); ?>

Unterscheidung durch Prüfen ob das Feld submitted leer ist

adressen-abfrage.php adressen-abfrage.php?name=abc&submitted=yes

Erstaufruf

Verstecktes Feld submitted ist leer

Folgeaufruf

Verstecktes Feld submitted ist yes

PHP - Beim Folgeaufruf Tabelle erzeugen

Die Funktion namenstabelle ist vorgegeben

Sie erzeugt die Überschrift: Liste aller Personen mit dem Namen abc

Sie erzeugt die HTML-Tabelle mit den Daten aus der Datenbank

<? // Wenn diese Seite das erste mal aufgerufen wird, sind wir hier fertig. if (empty ($_REQUEST['submitted'])) exit();

// Auswerten der in der URL übergebenen variablen $name = $_REQUEST['name']; // Namenstabelle erzeugen namenstabelle ($name); ?>

PHP Code

PHP - Filter erweitern auf Vorgabe des Namensanfangs

Abfrage auf genauen Namen schmidt

SELECT ... FROM adressen WHERE name='schmidt'

Abfrage auf Namen, die mit sch beginnen

SELECT ... FROM adressen WHERE name LIKE 'sch%'

PHP - Eintragen von Datensätzen

Übungsvorlage: .../php/meinname/adressen-eintragen.php

PHP - Das Formular

<form action="adressen-eintragen.php" method="get">

<div class="box" style="left:30; top:60; height:140; width:430; background-color:#ffff66">

<div class="prompt" style="left: 10; top:23; width:100">Name, Vorname</div> <div class="prompt" style="left: 10; top:48; width:100">Straße</div> <div class="prompt" style="left: 10; top:73; width:100">Plz, Ort</div> <div class="prompt" style="left: 10; top:98; width:100">Telefon</div>

<input class="edit" type="text" name="name" style="left:108; top:20; width:150"> <input class="edit" type="text" name="vorname" style="left:260; top:20; width:150"> <input class="edit" type="text" name="strasse" style="left:108; top:45; width:302"> <input class="edit" type="text" name="plz" style="left:108; top:70; width:50 "> <input class="edit" type="text" name="ort" style="left:160; top:70; width:250"> <input class="edit" type="text" name="telefon" style="left:108; top:95; width:302">

</div> <button type="submit"> Datensatz eintragen </button> <input type="hidden" name="submitted" value="yes">

</form>

Das Formular ist fertig vorgegeben

PHP - Code zum Eintragen des Datensatzes

if (empty ($submitted)) exit();

Im Fall des Erstaufrufs sind wir dann auch schon fertig

$name = $_REQUEST ['name']; $vorname = $_REQUEST ['vorname']; $strasse = $_REQUEST ['strasse']; $plz = $_REQUEST ['plz']; $ort = $_REQUEST ['ort']; $telefon = $_REQUEST ['telefon']; $submitted = $_REQUEST ['submitted'];

Als erstes werden all übergebenen URL-Variablen gespeichert

PHP - Verbindung zur Datenbank herstellen

// Stelle eine Verbindung zu MYSQL auf dem Rechner 'localhost' als Benutzer 'root' her $dbconnect = mysql_connect ('localhost', 'root'); if ($dbconnect == false) fehler ("Verbindung zur Datenbank kann nicht hergestellt werden.");

// Selektiere die Datenbank 'computerag' als diejenige, mit der jetzt gearbeitet werden soll $selected = mysql_select_db ('computerag', $dbconnect); if ($selected == false) fehler ("Kann die Datenbank 'computerag' nicht selektieren");

Verbindung zu MySQL herstellen und Datenbank 'computerag' selektieren

PHP - SQL-Befehl zum Eintragen eines Datensatzes

INSERT INTO adressen (name, vorname) VALUES ('Schmidt', 'Thomas')

SQL-Befehl

// Verfassen des SQL-Befehls, welcher den Datensatz einträgt $sql = "INSERT INTO adressen (name,vorname,strasse,plz,ort,telefon) VALUES ('$name', '$vorname', '$strasse', '$plz', '$ort', '$telefon')";

// Ausführen des SQL-Befehls $result = mysql_query ($sql, $dbconnect); if ($result == false) fehler ("Das Eintragen ist fehlgeschlagen. " . mysql_error());

Umsetzung in PHP

PHP - Prüfung auf unsinnige Eingaben

Prüfungen finden vor dem Eintragen statt

// Prüfen, dass der Name nicht leer ist if (empty ($name)) fehler ("Der Name darf nicht leer sein");

// Prüfen, dass der Vorname nicht leer ist if (empty ($vorname)) fehler ("Der Vorname darf nicht leer sein");

PHP - Absicherung durch Login

PHP - Login-Erweiterung für das Formular

<div class="box" style="left:460; top:60; height:140; width:240; background-color:#ff6666">

<div class="prompt" style="left: 10; top:23; width:100">Login</div> <div class="prompt" style="left: 10; top:48; width:100">Passwort</div>

<input class="edit" type="text" name="login" style="left:75; top:20; width:150"> <input class="edit" type="password" name="pw" style="left:75; top:45; width:150">

</div>

Das Formular wird um einen Login-Block erweitert

$login = $_REQUEST ['login']; $pw = $_REQUEST ['pw'];

Die Auswertung der URL-Variablen wird entsprechend erweitert

PHP - Prüfung des Logins vor dem Eintragen

Login mittels der Funktion CheckLogin prüfen

if (CheckLogin ($dbconnect, $login, $pw) == false) fehler ("Login unbekannt oder Passwort falsch");

Die Funktion CheckLogin stützt sich auf die Datenbanktabelle users

login password

thomas kristall

lennart lennart

simon simon

olli olli

jonas jonas

burcu burcu

Bitte in der Tabelle users jetzt die Logins und Passwörter eintragen

PHP - Die Funktion CheckLogin

// Die Funktion liefert true, wenn der übergebene login existiert und das Passwort zum login passt.// In allen anderen Fällen liefert die Funktion false

function CheckLogin ($dbconnect, $login, $pw) { // Selektiere das Passwort zum Login aus der Tabelle 'users‚ $select = "SELECT password FROM users WHERE login='$login' ";

// Ausführen der Datenbankabfrage. // Im Fehlerfall login verweigern $result = mysql_query ($select, $dbconnect); if ($result == false) return false;

// Lese passwort des users, falls der user existiert. // Wenn der user nicht existiert, login verweigern $row = mysql_fetch_row ($result); if ($row == false) return false;

// Vergleiche passwort des users mit dem übergebenen passwort. // Falls keine Übereinstimmung, login verweigern if ($row[0] != $pw) return false;

// Der Benutzer existiert und hat das angegebene Passwort return true; }

PHP - Entkoppeln der Benutzer

• Jeder Benutzer kann Adressen eintragen

• Es wird gespeichert wer welche Adresse eingetragen hat

• Jeder Benutzer kann nur seine eigenen Einträge sehen

Benutzerentkopplung

PHP - Login zusammen mit der Adresse speichern

INSERT INTO adressen (name, vorname, strasse, plz, ort, telefon, login) VALUES ('$name', '$vorname', '$strasse', '$plz', '$ort', '$telefon', '$login')

Beim Eintragen des Datensatzes das Feld login auch eintragen

Erweitern der Tabelle adressen um die Spalte loginName Vorname Strasse PlzSchmidt Thomas Auf der Marta 1 58452Mustermann Hans Testweg 1 11223

OrtWittenBeispielstadt

Telefon0172-98491290234-112233

logintsburcu

// Eigentlich kein Fehler, hier wird die Funktion fehler missbraucht ... fehler ("Der Datensatz wurde erfolgreich eingetragen");

Eine Erfolgsmeldung gibt beim Anwender ein gutes Gefühl

PHP - Login bei der Abfrage

PHP - Login bei der Abfrage - Codeerweiterung

<div class="box" style="left:10px; top:60px; height:85px; width:240px; background-color:#ffff99">

<div class="prompt" style="left: 10px; top:23px; width:100px">Name</div> <input class="edit" type="text" name="name" style="left:55; top:20; width:150px"> <button type="submit" style="position:absolute; left:55px; top:47px; width:150px"> Absenden </button> <input type="hidden" name="submitted" value="yes">

</div>

<div class="box" style="left:250px; top:60px; height:85px; width:240px; background-color:#bbffbb">

<div class="prompt" style="left: 10; top:23; width:100">Login</div> <div class="prompt" style="left: 10; top:48; width:100">Passwort</div> <input class="edit" type="text" name="login" style="left:75; top:20; width:150"> <input class="edit" type="password" name="pw" style="left:75; top:45; width:150">

</div>

Login Felder hinzufügen und schöne Maske basteln

Neue Styles hinzufügen

.mybody {font-family: arial; color:#333333; background-color: #ffffee; font-size: 12} .box {position:absolute; border:none} .prompt {position:absolute; text-align:left} .edit {position:absolute; border-style:inset}

PHP - Login bei der Abfrage - Codeerweiterung

// Stelle eine Verbindung zum MYSQL-Datenbanksystem auf dem Rechner 'localhost' als Benutzer 'root' her $dbconnect = mysql_connect ('localhost', 'root');if ($dbconnect == false) exit ("Verbindung zur Datenbank kann nicht hergestellt werden.");

// Selektiere die Datenbank 'computerag' als diejenige, mit der jetzt gearbeitet werden soll$selected = mysql_select_db ('computerag', $dbconnect);if ($selected == false) exit ("Kann die Datenbank 'computerag' nicht selektieren");

// Check if the login is correctif (CheckLogin ($dbconnect, $login, $pw) == false) exit ("Login fehlgeschlagen");

Aufrufen der Funktion CheckLogin

Hinzufügen der Funktion CheckLogin

Diese übernehmen wir aus der Datei adressen-eintragen.php

Der <body> bekommt einen Style

<body class="mybody">

PHP - Login bei der Abfrage - Nur eigene Adressen anzeigen

Erweitern der Datenbankabfrage

WHERE name LIKE '$filter%'

Bisherige WHERE-Klausel in der Abfrage

Hinzufügen der Abfrage auf den Benutzernamen

WHERE name LIKE '$filter%' AND login= '$login'

PHP - Nur eigene Adressen anzeigen - Code

if (empty($filter)) $select = "SELECT name, vorname, strasse, plz, ort, telefon FROM adressen WHERE login='$login' ORDER BY name, vorname";

else $select = "SELECT name, vorname, strasse, plz, ort, telefon FROM adressen WHERE login='$login' AND name LIKE '$filter%' ORDER BY name, vorname";

Die fertige Abfrage sieht dann so aus

PHP - Login bei der Abfrage - Ausprobieren

Ausprobieren ... Fertig !!

PHP - Hochladen auf die Webseite

• Datenbank-Login an das Zielsystem anpassen

• Hochladen der PHP-Dateien

• Einen Link Abfrage und Eintragen anlegen

Hochladen der PHP-Dateien

PHP - Hochladen - Datenbank-Login anpassen

$dbconnect = mysql_connect ('localhost', 'root');

Bisheriger Login (Datenbank auf dem lokalen Server)

$dbconnect = mysql_connect ('localhost', 'computerag', 'passwort')

Neuer Login (Datenbank auf dem WEB-Server)

PHP - Hochladen - Link anlegen

Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.

Documents

Transcript of Computer AG Schiller-Gymnasium Witten Thomas Schmidt Januar 2008.