Günter Pomaska Grundkurs Web-Programmierung
~+_..._..---+--- Pascal Masterkurs Computergrafik von Doug Cooper und Michael Clancy und Bildverarbeitung Grundkurs Programmieren mit Deiphi von Alfred Nischwitz und Peter Haberäcker von Wolf-Gert Matthäus Grundkurs MySQL und PHP Grundkurs Vlsual Basic von Martin Pollakowski von Sabine Kämper Grundkurs Mediengestaltung Vlsual Basic für technische von David Starmann Anwendungen Web-Programmlerung von Jürgen Radel von Oral AVC, Ralph Trittmann und Werner Mellis Grundkurs Smalltalk Grundkurs UNX/Unux Objektorientierungvon Anfang an von Wilhelm Schaffrath von Johannes Brauer Das L1nux-Tutorlal-lhrWeg Grundkurs Software-Entwlcklung zum LP-Zertiflkat mltc++ von Helmut Pils von Dietrich May Grundkurs Wrtschaftsinformatik Grundkurs JAVA von Dietmar Abts und Wilhelm Mülder von Dietmar Abts Grundkurs Theoretische nformatik Aufbaukurs JAVA von Gottfried Vossen und Kurt-Ulrich Witt von Dietmar Abts Anwendungsorientierte f------+- Grundkurs java-technologien Wirtschaftsinformatik von Erwin Merker von Paul Alpar, Heinz Lothar Grob, Peter Grundkurs Algorithmen und Weimann und Robert Winter Datenstrukturen in JAVA Business ntelllgence-grundlagen von Andreas Solymosi und Ulrich Grude und praktische Anwendungen Grundlegende Algorithmen von Hans-Georg Kemper, Walid Mehanna von Volker Heun und Garsten Unger - ------1 Objektorientierte Grundkurs Programmierung n JAVA Geschäftsprozess-Management von Andreas Gadatsch von Otto Rauh Grundkurs nformatik Grundkurs SAP R/3@ von Hartmut Ernst von Andre Maassen und Markus Schoenen Das PC Wissen für T-Berufe Controlling mit SAP R/3....~ von Rainer Egewardt von Gunther Friedl, Christian Hilz Rechnerarchitektur und Burkhard Pedell von Paul Herrmann Kostenträgerrechnung mitsap R/3 Grundkurs Relationale Datenbanken von Franz Klenger und Ellen Falk-Kalms von Rene Steiner Kostenstelenrechnung mit SAP R/3@ von Franz Klenger und Ellen Falk-Kalms N N _ Grundkurs Datenbankentwurf +_ von Helmut Jarosch Prozessmodelllerung mitars@ Datenbank-Engineering von Heinrich Seidimeier von Alfred Moos TL kompakt und verständlich Netze - Protokolle - Spezifikationen von Alfred Olbrich von Alfred Olbrich Grundkurs Betriebswirtschaftslehre Grundkurs Verteilte Systeme von Notger Carl, Rudolf Fiedler, William J6rasz von Günther Bengel und Manfred Kiesel Masterkurs T-Controlllng - ---l Grundkurs Mobile Kommunikationssysteme von Andreas Gadatsch und Elmar Mayer von Martin Sauter Grundkurs Web-Programmierung Grundlagen der Rechnerkommunikation von Günter Pomaska von Bernd Schürmann f------,------,-----,--------,------------\-------+- i i,
Günter Pomaska Grundkurs Web-Programmierung nteraktion, Grafik und Dynamik Mit XHTML und CSS, XML, JavaSeript, Applets, SVG, PHP ~vleweg
Bibliografische nformation Der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im nternet über <http://dnb.ddb.de> abrufbar. Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in diesem Werk berechtigt auch ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne von Warenzeichen- und Markenschutz-Gesetzgebung als frei zu betrachten wären und daher von jedermann benutzt werden dürfen. Höchste inhaltliche und technische Qualität unserer Produkte ist unser Ziel. Bei der Produktion und Auslieferung unserer Bücher wollen wir die Umwelt schonen: Dieses Buch ist auf säurefreiem und chlorfrei gebleichtem Papier gedruckt. Die Einschweißfolie besteht aus Polyäthylen und damit aus organischen Grundstoffen, die weder bei der Herstellung noch bei der Verbrennung Schadstoffe freisetzen. 1. Auflage Januar 2005 Alle Rechte vorbehalten Friedr. Vieweg & Sohn VerlagjGWV Fachverlage GmbH, Wiesbaden 2005 Lektorat: Dr. Reinald Klockenbusch j Andrea Broßler Der Vieweg Verlag ist ein Unternehmen von Springer Science+Business Media. www.vieweg-it.de Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Jede Verwertung außerhalb der engen Grenzen des Urheberrechtsgesetzes ist ohne Zustimmung des Verlags unzulässig und strafbar. Das gilt insbesondere für Vervielfältigungen, Übersetzungen, Mikroverfilmungen und die Einspeicherung und Verarbeitung in elektronischen Systemen. Konzeption und Layout des Umschlags: Ulrike Weigel, www.corporatedesigngroup.de Druck- und buchbinderische Verarbeitung: MercedesDruck, Berlin Gedruckt auf säurefreiem und chlorfrei gebleichtem Papier. SBN-13: 978-3-528-05895-1 e-sbn-13: 978-3-322-80260-6 001: 10.1007/978-3-322-80260-6
Vorwort Web, Statik und Dynamik Sprachen und Werkzeuge Hypertext Markup Language (HTML) ist die Beschreibungssprache für nternetseiten. Ein Dokument, formuliert in HTML, wird von einem Webserver auf Anfrage an einen Webbrowser, den Client, übermittelt. Der Webbrowser hat die Aufgabe der Umsetzung des Dokumenteninhalts in grafisch ansprechende Form. Durch eingebettete Hyperlinks wird auf beliebig verteilte Dokumente im Web verwiesen. Das Verhalten der Seite ist statisch. Der Bildschirminhalt verändert sich nur nach Anforderung einer neuen Webseite. Der Anteil statischer Webseiten an den gesamten nternetanwendungen ist nur noch gering und verliert an Bedeutung. Das nternet ist dynamisch. Durch Benutzereingriffe verändert sich der nhalt angezeigter Webseiten. Hierbei ist zu unterscheiden zwischen clientseitiger Dynamik und serverseitiger Dynamik. m ersteren Fall erfolgen die Veränderungen durch Prozesse auf dem Clientrechner. Serverseitige Dynamik besteht in der Ausführung von Scripten oder Programmen auf dem Fremdrechner. Sprachen und Werkzeuge zur Erstellung dynamischer Webseiten sind u. a. JavaScript, Java, XML, SVG, PHP, SQL, um nur einige mit ihren Abkürzungen zu benennen. Diese Technologien ermöglichen nternetanwendungen, die für ein breiteres Spektrum einsetzbar sind als nur zur Publikation von HTML-Dokumenten. Technisch-wissenschaftliche Anwendungen können webfähig programmiert werden. Es gibt für alle Anwender nur noch eine einzige, aktuelle Softwareversion auf einem Webserver. Der Zugang wird dem autorisierten Personenkreis von jedem Ort aus und zu jeder Zeit gewährleistet. Mit der Anwendung von Datenbanken stehen dem Benutzer der Webseite umfangreiche Datenmengen bei schnellem Zugriff zur Verfügung. Mit welchem Wissen muss sich nun ein Anwender ausstatten, um die mit dem Web verfügbaren Ressourcen zu nutzen? Sprachspe~ zifikationen, Referenzen und fertige Programme bietet das Web in hinreichender Fülle. Die Existenz, Verfügbarkeit und das Zu- V
sammenspiel der Werkzeuge muss transparent werden. Kenntnisse in Auszeichnungssprachen, Scriptsprachen und objektorientierten Konzepten sind Voraussetzung zum Verständnis bestehender und sich neu entwickelnder Technologien. Das notwendige Basiswissen wird im vorliegenden Buch Studierenden und Praktikern vermittelt. Programmieren lernt man nur durch Programmieren Die Arbeit mit dem Buch XHTML und CSS ist ein Muss Das Buch ist in erster Linie als Arbeitsbuch konzipiert und kann unterrichtsbegleitend oder zum Selbststudium verwendet werden. Durch die Vielzahl der Beispiele werden Programmiersituationen dargestellt, die in Anwendungen immer wieder auftreten. nsofern ist es auch ein Nachschlagwerk für den Praktiker. Es ersetzt aber in keinem Kapitel eine Sprachreferenz. Diese finden Sie im Web aktuell, umfangreich und komplett an autorisierter Stelle. n diesem Programmierpraktikum wird der Lernprozess als zielorientiertes Learning by Coding mit Reduzierung auf das Notwendige abgebildet. Der Leser soll Modifikationen der Aufgabenstelungen selbst vornehmen können, die sich im nternet bietenden Ressourcen für eigene Anwendungen nutzen und mit Fachleuten der T-Branche dialogfähig werden. Sie erhält mit dieser praxisorientierten Sammlung von Programmbeispielen kompaktes Lehrmaterial, mit dem in die populären Sprachen des nternets eingeführt wird. Den meisten Nutzen wird hnen das Buch bringen, wenn Sie es aktiv durcharbeiten und die Programmbeispiele gleichzeitig an hrem Computer ausführen und modifizieren. Es ist nicht notwendig, alle Kapitel des Buches der Reihenfolge nach durchzugehen. Unbedingt erforderlich für Arbeiten an nternetprojekten ist ein gewisser aktiver Sprachschatz in Extensible Hypertext Markup Language (XHTML) und Cascading Style Sheets (CSS). Das Kapitel 2 ist demnach Pflichtlektüre. Bei Extensible Markup Language (XML) ist das schon anders. Aber es ist anzumerken, dass die Grafiksprachen für das Web, SVG und X3D auf dem XML-Standard basieren. Zukünftig führt V
Objektorientierte Programmierung wohl bei ernsthaften Web-Anwendungen kein Weg an XML vorbei. Wenn Sie wollen, überspringen Sie Kapitel 3 zunächst. m Jargon der EDV-Leute ausgedrückt, ist das Kapitel über Java hard stuff. Grafische Anwendungen in Form von Applets sind ein attraktives Übungsfeld. Sie müssen sich schon intensiv mit Java auseinandersetzen. Geben Sie nicht so schnell auf. Wenn Sie ungeduldig sind, machen Sie doch weiter mit JavaSeript. Vielleicht kehren Sie später einmal zum Kapitel 4 zurück und finden Gefallen an objektorientierter Programmierung. JavaScript bringt Schwung auf die Seite Grafik mit SVG Mit wenig Aufwand gelangen Sie durch JavaScript zu Erfolgserlebnissen. Fertige Scripts aus dem Web bringen Schwung auch auf hre Webseiten. Vorgestellt werden die Applikationsobjekte, das Dom und die Sprachelemente von JavaScript. Eine etwas umfangreichere JavaScript-Anwendung macht ausgiebig von den Methoden des Math-Objekts Gebrauch. Sofern Sie es mit zweidimensionalen Grafiken zu tun haben, ist Scalable Vector Graphics (SVG) das richtige Werkzeug zur Formulierung von Grafikdaten. Durch Einsatz von nteraktion und Animation erhalten hre llustrationen Dynamik. PHP Anwendungen auf dem Server ausführen Mit der nstallation eines lokalen Webservers und dem Einsatz von PHP (Hypertext Pre-Processor) beschreiten Sie den Weg zur serverseitigen Dynamik. Die Basisstrukturen der Programmiersprachen unterscheiden sich nicht wesentlich voneinander. Wenn Sie bereits programmieren, werden Sie sich schnell für PHP begeistern. Aber PHP ist auch ohne Vorkenntnisse leicht zu erlernen und kann hre erste Programmiersprache werden. Eine Entwicklungsumgebung ist einfach zu installieren. Durch die Vielfältigkeit der Funktionen ist PHP auch eine Alternative zu nur lokal einsetzbaren Programmiersprachen. Fahren Sie nun hren Rechner hoch. Laden Sie hren Lieblingseditor, und schon kann es losgehen mit der praktischen Web Programmierung. V
Günter Pomaska, November 2004 Online-Service zum Buch Als Online-Service zu diesem Buch wurde die nternetpräsenz www.programmierpraktikum.de geschaltet. Alle Programme des Titels sind dort unter einer Benutzeroberfläche lauffähig installiert. Als Leser des Buches können Sie sich registrieren und erhalten danach u. a. Zugang zum Download des vollständigen Quelltextes aller Programme und profitieren von Updates..- ~,.._..-..-...- o-f u..._~ 0--_....... 0.-....-..-- ------...---..,._,-"_~,,,..-...-...- -...e--._...---... - ---- "-"..,_~.-. -"--'-~--,----...- --..-...-...,...'-... -...-._-... _.--...-..-.--..-...- V
nhaltsverzeichnis Vorwort Programme online - www.programmierpraktikum.de V 1 Statische und dynamische Webseiten 1 1.1 Das nternet - nfrastruktur und Software 1 1.2 Statische Webseiten 5 1.3 Clientseitige Dynamik 6 1.4 Serverseitige Dynamik 7 2 Webseiten - Struktur und Publikation 11 2.1 HTML Grundlagen 12 2.2 Cascading Style Sheets CSS " 30 2.3 Seitengestaltung mit Stilvorlagen 35 2.4 Von HTML zu XHTML 39 2.5 Validierung von XHTML und CSS 43 2.6 Publikation von Webseiten 44 2.7 Zusammenfassung 51 3 Extensible Markup Language XML 53 3.1 Verarbeitung von XML-Dokumenten 53 3.2 Struktur von XML-Dokumenten 55 3.3 Document Type Definition DTD 59 3.4 XML-Dokumente mit HTML und CSS 62 3.5 Extensible Stylesheet Language XSL 65 3.6 XML nach HTML-Transformation 68 X
3.7 Eine XML-Applikation 71 3.8 Zusammenfassung 76 4 Programmieren vonjava-applets 77 4.1 nstallation einer Entwicklungsumgebung 78 4.2 Einführung in objektorientiertes Programmieren ~ 80 4.3 ]ava-applets 90 4.4 Computergrafik mit dem ]ava-awt 93 4.5 Animationen... 103 4.6 Grafische Benutzeroberflächen 116 4.7 Einführung in die 3D-Grafik 128 4.8 Zusammenfassung 148 5JavaScript 149 5.1 Clientseitige Dynamik mit ]avascript 149 5.2 Einführung in ]avascript 150 5.3 Sprachelemente von ]avascript 160 5.4 Ereignisbehandlung 169 5.5 Formularauswertung und Berechnungen 178 6 Scalable Vector Graphics SVG 183 6.1 Einführung in SVG 184 6.2 Grafikelemente: Geometrie und Attribute 189 6.3 Transformationen 198 6.4 Grafik-Effekte 203 6.5 nteraktion und Animation 206 6.6 SVG in HTML-Seiten einbinden 215 6.7 SVG-mplementierungen und Konverter 218 6.8 Zusammenfassung.. 222 x
7 Serverseitige Dynamik mit PP 223 7.1 Einrichten einer PHP-Entwicklungsumgebung 224 7.2 Grundlagen von PHP 229 7.3 PHP Anwendungen 242 7.4 Hochladen von Dateien mit PHP 265 7.5 Dynamische Grafik mit PHP 267 7.6 Zusammenfassung 279 Literaturhinweise, nternet-quellen.. 281 Sachwortverzeichnis 285 X