Erhalten Sie Zugang zu diesem und mehr als 300000 Büchern ab EUR 5,99 monatlich.
- Herausgeber: Books on Demand
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Deutsch
Mit diesem Buch möchte ich Ihnen die Möglichkeit geben, die Grundlagen moderner Webtechnologien im Selbststudium zu erlernen, zu verstehen und zu beherrschen. Entstanden ist das Buch als Lektüre zu meiner gleichnamigen Veranstaltung, und genau so funktioniert auch dieses Buch. Keine trockene Theorie, keine seitenlangen Auflistungen von Befehlen, Syntax oder Code. Stattdessen werde ich mit Ihnen ein konkretes Web-Projekt erarbeiten und Sie durch alle Entwicklungsschritte begleiten. Für Sie bedeutet das: Learning by doing Denn nur das, was Sie selber machen, lernen, verstehen und beherrschen Sie auch.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 231
Veröffentlichungsjahr: 2015
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Ähnliche
Inhalt
Vorwort
I. Das Fundament
1. Das Projekt FahrFlott
1.1. Das Pflichtenheft
1.1.1. Die Gestaltungsvorgaben
1.1.2. Der öffentliche Bereich
1.1.3. Der Verwaltungsbereich
1.2. Die Planung
1.2.1. Einzelseiten, Template oder CMS?
1.2.2. Das Template
1.3. Einführung in Datenbanken
1.3.1. Die FahrFlott-Datenbank
2. Struktur mit HTML
2.1. Was ist eigentlich HTML?
2.2. Der Aufbau einer Seite
2.3. Die wichtigsten tags im Kopfbereich
2.3.1. Der Seitentitel
2.3.2. Die Meta-Angaben
2.3.3. Einbinden von Programmbibliotheken
2.3.4. Einbinden von zugehörigen Dateien
2.4. Die wichtigsten tags im Körper
2.4.1. Container
2.4.2. Bilder und links
2.4.3. Tabellen
2.4.4. Aufzählungen
2.4.5. Überschriften und Absätze
2.5. Das Template der Website - Teil 1
2.5.1. Die Template-Datei
index.php
2.5.2. Der Firebug im Firefox
3. Funktionalität mit PHP
3.1. Allgemeines zu Programmiersprachen
3.2. Spezielles zu PHP
3.2.1. Konstanten, Variablen und Arrays
3.2.2. Abfragen
3.2.3. Schleifen
3.2.4. Prozeduren und Funktionen
3.3. Ein kurzer Ausflug zum Webserver
3.4. Die Initialisierungsdatei
system.php
3.5. Das Template der Website - Teil 2
3.6. Der Kopfbereich
3.7. Der Fußbereich
3.8. Der linke Bereich
3.8.1. Das Navigationsmodul
3.8.2. Das Anmelde-Modul
3.9. Der rechte Bereich
3.9.1. Die Startseite
4. Optik mit CSS
4.1. Die Syntax von CSS
4.2. Die Möglichkeiten von CSS
4.2.1. Das Box-Modell
4.2.2. Fließende Container
4.2.3. Animationen
4.2.4. Die Media-Queries
4.2.5. Schriften
4.3. CSS-Formatierungen in der
styles.css
4.3.1. Globale Definitionen
4.3.2. Formatierungen für den Kopfbereich
4.3.3. Formatierungen für die linke Seite
4.3.4. Formatierungen für die rechte Seite
4.3.5. Formatierungen für den Fussbereich
II. Der Rohbau
5. Kommunikation mit Formularen
5.1. Formulare in HTML
5.1.1. Formularfelder
5.2. Die Benutzeranmeldung
5.2.1. Das Anmelde-Modul
mod_access.php
5.2.2. Der CSS-Code zum Anmeldemodul
5.2.3. Umgang mit Sessions
5.2.4. Auswertung des Anmeldeformulars
5.3. Das Kontaktformular
5.3.1. Die Struktur des Kontaktmoduls
5.3.2. Das Gerüst des Kontaktformulars
5.3.3. Die Formularfelder des Kontaktformulars
5.3.4. Der CSS-Code zum Kontaktformular
5.3.5. Die Verarbeitung des Formulars
6. Datenbanken für die Daten
6.1. Die Structured Query Language SQL
6.1.1. Abfragen
6.1.2. Einfügen
6.1.3. Verändern
6.1.4. Löschen
6.1.5. Verknüpfungen
6.2. Verwaltung mit phpMyAdmin
6.2.1. Datenbank und Tabellen anlegen
6.2.2. Zugriffsrechte vergeben
6.3. Datenbankzugriff unter PHP
6.3.1. Eine Hilfsfunktion
6.3.2. Datenbankverbindung in der
system.php
7. Datenbankbasierte Seiten
7.1. Fertigstellung des Kontaktformulars
7.2. Die Besucherseite
Fahrzeugklassen
7.2.1. Der Code für die Seite
Fahrzeugklassen
7.2.2. Die Formatierung der Seite
Fahrzeugklassen
7.3. Die Klassenverwaltung
7.3.1. Das Formulargerüst
7.3.2. Die Formularfelder
7.3.3. Die Formularverarbeitung
7.3.4. Der Tabellenbereich
7.3.5. Die Formatierung
7.4. Die Kundenverwaltung
7.5. Die Fahrzeugverwaltung
III. Die Fertigstellung
8. Komfort mit Javascript
8.1. Die Programmiersprache Javascript
8.1.1. Einbinden von Javascript-Code
8.1.2. Die Syntax von Javascript
8.2. Das Document Object Modell DOM
8.2.1. Zugriff auf DOM-Elemente
8.2.2. Ereignisse verarbeiten
8.3. Einige Beispiele in Javascript
8.3.1. Den Inhalt von Elementen verändern
8.3.2. Ereignisse verarbeiten
8.3.3. Mehrere Elemente ansprechen
9. Mehr Komfort mit jQuery
9.1. Was ist denn ein Framework?
9.2. jQuery
9.2.1. Einbinden von jQuery
9.2.2. Zugriff auf das DOM
9.2.3. Methoden von jQuery
9.2.4. Ereignisse verarbeiten
9.3. AJAX zur direkten Kommunikation
9.4. Einige Beispiele in jQuery
9.4.1. Ereignisse verarbeiten
9.4.2. Mehrere Elemente ansprechen
9.4.3. Spaltenwerte addieren
9.4.4. Ein Beispiel zu AJAX
10. Fertigstellung der Website
10.1. Optimierung der Navigation
10.2. Overlay-Ansicht der Fahrzeugbilder
10.3. Löschfunktion der Verwaltungsseiten
10.3.1. Löschen von Fahrzeugen
10.3.2. Löschen von Fahrzeugklassen
10.4. Editierfunktion der Verwaltungsseiten
10.4.1. Editierfunktion bei der Klassenverwaltung
10.4.2. Editierfunktion bei der Kundenverwaltung
10.5. Alterskontrolle bei der Kundenverwaltung
10.6. Verwaltungsformulare zurücksetzen
10.7. Die Rechnungsverwaltung
10.7.1. Die Basisfunktionalität
10.7.2. Die Verarbeitung der Daten
10.7.3. Die Javascript-Routinen
10.8. Die Rechnungsanzeige
10.8.1. Anzeige der Rechnung ermöglichen
10.8.2. Die Rechnungsdatei
mod_rechnung.php
11. Optionale Features
11.1. Das jQuery-Plugin
datepicker
11.1.1. Den
datepicker
einbinden
11.1.2. Umstellung auf Deutsch
11.1.3. Optische Gestaltung
11.2. Tabellen sortieren
11.2.1. Plugin einbinden
11.2.2. Sonderspalten sortieren
11.3. Bilder der Fahrzeugklassen anzeigen
11.4. Eingabekontrolle bei Formularfeldern
11.5. Daten direkt im Tabellenbereich editieren
11.6. Eine Diashow auf der Startseite
12. Die Sahnebonbons
12.1. Rechnungstabelle absichern
12.2. Rechnung als PDF erzeugen
12.2.1. Die PDF-Rechnung erzeugen
12.2.2. Die Ausgabeblöcke setzen
12.3. Rechnung als Overlay
12.4. Navigation im Fußbereich
12.5. Klassenlöschung mit Fahrzeugübertrag
IV. Der Anhang
A. Spezialfunktionen
A.1. PHP-Spezialfunktionen
A.1.1.
convert_date($datum)
A.1.2.
in_ multiarray($needie, $haystack)
A.1.3.
support($array)
A.1.4. Die Serverdatei
ajaxcommand.php
A.2. Javascript-Spezialfunktionen
A.2.1.
convert_date(datum)
A.2.2.
betrag(x)
B. Die Entwicklungsumgebung
B.l. Der virtuelle Webserver
B.1.1. Einrichtung unter Apple OS X
B.1.2. Einrichtung unter Windows
B.1.3. Dienste auf dem Webserver
B.1.4. Die Startseite des Webservers
B.2. Der Arbeitsplatz
B.2.1. Der Webbrowser
B.2.2. Der Editor
B.2.3. Die Webserver-Dateifreigabe
C. Internet-Ressourcen
Index
Vorwort
Liebe Leserin, lieber Leser,
der Gedanke zu diesem Buch kam mir, als ich für eines meiner IT-Trainings keine passende Lektüre gefunden habe.
Die einzigen Bücher, die alle notwendigen Themen abdeckten, waren zum einen ohne Neuauflage seit vielen Jahren auf dem Markt und deshalb vergriffen und zum anderen so umfangreich, dass sie sich zwar gut als Nachschlagewerk, nicht jedoch als begleitende Lektüre zu einer Veranstaltung eigneten.
Also beschloss ich, ein Buch zu schreiben, mit dem Sie sich in recht kurzer Zeit ein umfangreiches Wissen über moderne Webtechnologien selber aneignen können.
Dieses Buch erhebt nicht den Anspruch, Sie mit allen Technologien bis in die Tiefe vertraut zu machen. Mein Ziel ist es vielmehr, mit Ihnen anhand eines kleinen Web-Projektes die meisten der heute üblichen Techniken zu erarbeiten.
Wenn Sie dieses Buch durchgearbeitet haben, werden Sie in der Lage sein, selber zu entscheiden, welche der Techniken Sie durch weiterführende Literatur oder Veranstaltungen vertiefen möchten, welche Vor- und Nachteile die jeweiligen Technologien haben und mit welchem Aufwand Sie bei der Entwicklung eigener Projekte rechnen müssen.
Mir ist natürlich klar, dass die Entwicklung von Webseiten durch den Einsatz passender Entwicklungsumgebungen massiv erleichtert werden kann. Dennoch verzichte ich in diesem Buch darauf, denn so praktisch diese Entwicklungsumgebungen auch sein mögen, am Anfang müssen Sie sich erst einmal viel Wissen aneignen, um mit ihnen umgehen zu können. Und das lenkt von den eigentlichen Themen dieses Buches ab. Deshalb empfehle ich Ihnen, nur einen einfachen Editor zu verwenden. Sehen Sie sich dazu auch Abschnitt B im Anhang an.
Vielleicht bin ich da auch etwas altmodisch, aber Code, den Sie selber in einem Editor geschrieben haben, in dem Sie selber die Fehler gesucht und gefunden haben, in dem Sie jedes Paar Klammern und jede Einrückung selber vorgenommen haben, diesen Code haben Sie verstanden. Und dann können Sie immer noch auf eine Entwicklungsumgebung umsteigen, sich über die vielen Arbeitserleichterungen freuen und über die leider auch immer vorhandenen Einschränkungen ärgern.
Dieses Buch gliedert sich in drei wesentliche Teile. Im ersten Teil, dem Fundament, werden Sie die die Technologien HTML, PHP und CSS kennenlernen und eine erste strukturelle Umsetzung des Projektes erstellen. Im zweiten Teil, dem Rohbau, werden Sie die Funktionalität der einzelnen Seiten erstellen und dazu Formulare sowie die Datenbanksprache SQL kennenlernen. Und im dritten Teil, der Fertigstellung, werden Sie Javascript und das Javascript-Framework jQuery kennlernen, um den Benutzerkomfort der Seiten zu steigern zusätzliche Funktionalitäten zu ermöglichen.
Ein paar Worte zum Stil des Codes
Jeder Programmierer hat seinen eigenen Stil. Das ist auch gut so, denn sonst wäre die Programmierung von Anwendungen nur halb so kreativ. Allerdings gibt es durchaus guten und schlechten Code, wobei die Meinungen hier natürlich ebenfalls auseinandergehen.
Meiner ganz privaten Meinung nach kennzeichnet vor allem die Lesbarkeit einen guten Programmierstil. Es ist heute nicht mehr notwendig, extrem kompakten Code zu erstellen, wie das noch in den 80er Jahren oft nötig war. Ebenso ist es (meistens) nicht mehr zwingend notwendig, optimal performanten Code zu erstellen. Die moderne IT verfügt über so hohe Ressourcen, dass wir uns durchaus etwas Platz- und Rechenzeitverschwendung leisten können. Von daher habe ich in diesem Buch Code dargestellt, der sicher Optimierungspotential aufweist. Aber dafür ist er einfach zu lesen und zu verstehen.
Programmcode im Text?
Ich habe lange überlegt, ob es Sinn macht, den Programmcode ebenfalls in den Text zu integrieren. Schließlich liegt Ihnen ja der Quellcode in seinen verschiedenen Inkarnierungen vor (Download siehe Anhang B.1). Ich habe mich aber dennoch entschlossen, wesentliche Teile des Codes in den Text aufzunehmen, denn vielleicht wollen Sie das Buch ja nicht gerade am Schreibtisch lesen oder haben keinen Laptop neben Ihrem Sessel stehen. Außerdem erkläre ich viele Zeilen des Codes und nehme dabei Bezug auf die abgedruckten Zeilennummern, so kann ich sicher sein, dass Sie den richtigen Bezug haben. Und schließlich ist es etwas anderes, gedruckten Code zu lesen und zu verstehen, als Code, der Ihnen am Bildschirm in einem Editor angezeigt wird.
Und nun wünsche ich Ihnen viel Vergnügen beim Einstieg in die Webtechnologien.
Jörg Barres, im Sommer 2014
Teil I.
Das Fundament
1. Das Projekt FahrFlott
1.1. Das Pflichtenheft
Der Fahrzeugverleih FahrFlott GmbH benötigt zur besseren Verwaltung seines Fuhrparks sowie einer leichteren Kunden- und Rechnungsverwaltung eine Web-basierte Lösung. Diese soll einen öffentlich zugänglichen Bereich für Online-Besucher sowie einen abgesicherten Verwaltungsbereich haben.
Abb. 1.1.: Die Designvorgabe
1.1.1. Die Gestaltungsvorgaben
Die FahrFlott GmbH hat sich für die Gestaltung der Website von einem Grafiker einen Entwurf fertigen lassen. Dieser ist in Abbildung 1.1 zu sehen.
Das groß dargestellte Bild eines Sportwagens soll beim Öffnen der Seite animiert erscheinen, ebenso der Logo-Schriftzug im Kopfbereich.
Selbstverständlich sind moderne Designaspekte wie abgerundete Ecken oder animierte Effekte, etwa beim Überfahren mancher Elemente mit der Maus, ebenso zu berücksichtigen.
Gestalterisch teilt sich die Website in vier Bereiche auf, den Kopfbereich mit dem Logo der FahrFlott GmbH, den Fußbereich mit Angaben zum Copyright, den AGBs und dem Impressum, einen linken Bereich für die Navigation und die Anmeldung sowie schließlich noch einen Inhaltsbereich.
Besonders wichtig ist der Einsatz der Firmenschriftart „Pacifico“, die sowohl im Logotext als auch für Überschriften eingesetzt werden soll.
1.1.2. Der öffentliche Bereich
Für den Besucher sollen auf der Website die wichtigsten Informationen über die Fahr-Flott GmbH zu finden sein. Das beinhaltet neben der ansprechenden Startseite vor allem eine Präsentation der vorhandenen Fahrzeuge mit den jeweiligen Preisangaben. Und natürlich darf auch ein Kontaktformular für Anfragen nicht fehlen.
1.1.3. Der Verwaltungsbereich
Der Verwaltungsbereich darf nur nach Eingabe von Benutzername und Kennwort zugänglich sein. Da die FahrFlott GmbH nur wenige Mitarbeiter beschäftigt, soll auf eine Benutzerverwaltung verzichtet werden. Stattdessen soll ein fester Zugangsaccount verwendet werden.
Die Verwaltung soll folgende Kriterien erfüllen:
Fahrzeugklassen:
Alle vorhandenen Fahrzeuge sind einer Fahrzeugklasse zugeordnet um eine Rechnungserstellung zu vereinfachen. Für jede Fahrzeugklasse lassen sich ein Tagessatz und eine Kilometerpauschale definieren. Außerdem soll ein repräsentatives Bild für jede Fahrzeugklasse verwaltet werden können. Dieses Bild soll auch dem „normalen“ Besucher zugänglich sein.
Selbstverständlich sollen die vorhandenen Klassen editiert oder gelöscht werden können. Sollten beim Löschen einer Klasse noch Fahrzeuge in dieser Klasse registriert sein, soll ein Hinweis erscheinen und die Klasse nicht gelöscht werden können.
Fahrzeuge:
Von jedem Fahrzeug sollen neben der zugewiesenen Fahrzeugklasse noch das amtliche Kennzeichen, der aktuelle Kilometerstand sowie das Baujahr editiert, gelöscht oder neu angelegt werden können.
Kunden:
Die Kundenverwaltung soll das Anlegen neuer sowie das Editieren und Löschen vorhandener Kunden ermöglichen. Von den Kunden werden folgende Angaben benötigt: Anrede, Vorname, Nachname, Geburtsdatum, Telefon sowie die Adresse.
Kunden, die jünger als 18 Jahre sind, dürfen nicht erfasst werden, hier soll gegebenenfalls ein Hinweis erscheinen.
Rechnungen:
Für vorhandene Kunden müssen hier die Rechnungen erstellt, geändert und gelöscht werden können. Dabei sollen die Rechnungswerte, also die Beträge für die Mietdauer, die gefahrenen Kilometer und der Gesamtbetrag automatisch berechnet werden. Das Rechnungsdatum ist immer gleich dem Erstelldatum der Rechnung, bei einer nachträglichen Änderung der Rechnungswerte darf es nicht mehr veränderbar sein.
Der km-Stand des gemieteten Fahrzeugs zu Beginn der Miete wird aus den Fahrzeugdaten als Vorgabewert eingetragen, kann aber nach oben verändert werden. Der Abgabe-km-Stand soll als neuer km-Stand des Fahrzeugs gespeichert werden.
Außerdem soll die Rechnung als separate Seite zum Druck aufbereitet angezeigt werden können.
1.2. Die Planung
Eine gute Planung zahlt sich spätestens bei Korrekturen und Erweiterungen eines Projektes aus. Bei umfangreichen Projekten ist eine sorgfältige Planung unerläßlich, auch wenn Sie sicher viel lieber gleich mit der Umsetzung anfangen würden.
1.2.1. Einzelseiten, Template oder CMS?
Bei kleinen Websites, die nur einen Visitenkartencharakter haben, können Sie auch heute noch ohne Probleme mit einzeln erstellten Seiten arbeiten. Mit einer guten Entwicklungsumgebung sind auch spätere Änderungen, die viele oder alle der Einzelseiten betreffen, leicht umzusetzen. Der große Vorteil bei Einzelseiten ist meiner Ansicht nach, dass sich jede Seite ganz individuell bearbeiten lässt und sich damit auch ausgefallenere Dinge realisieren lassen. Allerdings ist hier natürlich die große Gefahr von Inkonsistenzen gegeben, vor allem bei Layout- und Designanpassungen.
Auch wenn es heute schick ist, ein CMS (Content Management System) für eine Website einzusetzen, ist das oft mit vielen Nachteilen verbunden. Falls Sie nämlich kein CMS kennen und beherrschen, kommt neben der eigentlichen Website-Erstellung noch der Aufwand des Lernens für das CMS hinzu. Und je nach CMS kann das ganz schön viel Aufwand sein. Und außerdem, welches CMS wollen Sie denn nehmen? Das „Ich kann wirklich alles Monster Typo3“, oder doch lieber den Tausendsassa Joomla? Oder oder oder?
Die englische Wikipedia1 spuckt eine solche Menge verschiedener CMS aus, alleine um das am besten für Ihr Projekt passende zu finden können Sie schon Tage mit Recherchen zubringen.
Und wenn das gewünschte CMS die benötigte Funktionalität nicht bereitstellt und sie sich auch nicht als Plugin nachrüsten lässt, dann müssten Sie sich die Funktionalität auch noch selber programmieren. In der „Sprache“ des jeweiligen CMS. Und das kann ganz schön aufwendig und lernintensiv sein.
Andererseits, haben Sie sich erst einmal mit einem CMS vertraut gemacht und vielleicht schon die eine oder andere Erweiterung geschrieben, werden Sie wohl nie wieder etwas anderes einsetzen wollen. Ein gutes CMS nimmt Ihnen soviel von der eintönigen Arbeit bei der Seitenerstellung ab und bietet Ihnen so viele Vorteile, dass Sie vermutlich nur mit Grauen an Ihre früheren CMS-losen Projekte zurückdenken. Allerdings benötigen Sie eine ganze Menge an Kenntnissen in HTML, CSS, Javascript, PHP usw., wenn Sie „Ihr“ CMS individuell anpassen wollen. Und genau diese Themen behandeln wir ja in diesem Buch.
Für unser Projekt, und für Sie, die Sie ja schließlich HTML, CSS, PHP usw. kennenlernen möchten, ist die template-basierte Variante meiner Ansicht nach das vernünftigste. Durch den Einsatz eines Templates (Vorlage) reduzieren wir viele der unnötigen und fehleranfälligen Tätigkeiten, die bei Einzelseiten entstehen können, und nutzen gleichzeitig alle Vorteile, die Einzelseiten mit sich bringen. Außerdem lassen sich mit solchen Lösungen durchaus auch größere und komplexe Websites erstellen, ohne dass Sie ein CMS nutzen müssten.
1.2.2. Das Template
Abb. 1.2.: Das Basislayout
Bei diesem Projekt lässt sich die Struktur für die Template-Basisseite wie in Abbildung 1.2 realisieren. Der grundsätzliche Aufbau ist leicht zu durchschauen, es gibt nur vier wesentliche Bereiche.
Kopf- und Fußbereich sind einfach zu realisieren und erhalten mit den zugehörigen IDs eindeutige Kennungen.
Die beiden grau dargestellten Bereiche hätte man früher eventuell über eine Tabellenkonstruktion gelöst, dass lässt sich heute mit CSS jedoch wesentlich besser realisieren. Auch diese beiden Bereiche erhalten eindeutige Kennungen über ihre jeweiligen IDs. Dabei entspricht die ID des rechten Bereichs dem jeweiligen Seitennamen, so dass wir die verschiedenen Seiten gezielt ansprechen können. Zusätzlich weisen wir ihm noch die Klasse ’inhalt’ zu, die wir für die allgemeine Formatierung des Bereichs nutzen werden.
Der linke Bereich enthält dabei zwei Module, die Navigation (also das Menü) und das Modul zur Anmeldung bzw. Abmeldung. Auch hier geben wir beiden wieder eindeutige IDs, um sie später leichter ansprechen zu können.
Im rechten Bereich befinden sich drei unterschiedliche Module. Je nachdem, welche Seite angezeigt wird, werden nicht immer alle drei angezeigt. Auf der Startseite beispielsweise wird nur ein Textbereich nötig sein, auf den Verwaltungsseiten benötigen wir jedoch sowohl Formulare zur Bearbeitung als auch Tabellen zur Anzeige der Daten. Um diese beiden komplexeren Bereiche leichter ansprechen zu können, erhalten sie ebenfalls eindeutige IDs.
1.3. Einführung in Datenbanken
Sämtliche Nutzdaten unserer Website werden in einer Datenbank gespeichert. Falls Sie noch nicht mit Datenbanken gearbeitet haben, es ist wirklich nicht kompliziert.
Stellen Sie sich eine Datenbank einfach als eine Sammlung zusammengehöriger Tabellen vor. Jede dieser Tabellen hat einen eindeutigen Namen und enthält Spalten, die die benötigten Daten aufnehmen. Dabei hat jede dieser Spalten ebenfalls einen eindeutigen Namen. Außerdem ist für jede Spalte noch festgelegt, welche Art von Daten (der Datentyp2) in ihr abgelegt werden kann, also beispielsweise Texte, Zahlen oder Datumswerte.
Das Ganze ist also nicht viel anders als in einer Tabellenkalkulation, nur dass dort die Spalten keinen Namen haben müssen und sich in jeder Spalte auch Daten verschiedener Datentypen ablegen lassen.
Für die Arbeit mit Datenbanken ist es äußerst hilfreich, wenn jede Tabelle eine Spalte enthält, die eindeutige Werte beinhaltet, die sogenannten Primärschlüssel. Das erleichtert den Zugriff auf die benötigten Daten enorm und ermöglicht Verbindungen zu anderen Tabellen. Denken Sie hier einmal an Ihre Strom- oder Telefonrechnung. Jede Rechnung hat viele Gemeinsamkeiten mit den anderen Rechnungen, die Anschrift, die Kundennummer, den Absender usw. Aber jede Rechnung hat auch einen eindeutigen Inhalt, nämlich die Rechnungsnummer und die Rechnungsposten.
Einer der großen Vorteile einer Datenbank besteht nun darin, Tabellen anhand dieser eindeutigen Spalten miteinander zu verknüpfen. Bleiben wir einmal bei dem Beispiel Ihrer Stromrechnung. Ihr Energieversorger hat sicherlich eine Tabelle, welche Ihre Kundendaten enthält, also Name, Anschrift, Tarif etc. Und natürlich Ihre eindeutige Kundennummer.
Wenn jetzt eine Rechnung erstellt wird, stehen die Verbrauchsdaten in der Rechnungstabelle. Aber es wäre doch unsinnig, hier auch noch die ganzen Kundendaten mit hineinzuschreiben, denn diese liegen ja schon in der Kundentabelle. Stattdessen steht in der Rechnungstabelle nur Ihre Kundennummer, und alle benötigten Informationen lassen sich dann über diese eindeutige Nummer aus der Kundentabelle abrufen. Damit spart man eine große Menge an Redundanzen (mehrfach gespeicherte Daten) ein, denn Sie und viele andere Kunden erhalten ja viele Stromrechnungen über die Jahre.
Auch bei den Tabellen der FahrFlott-Datenbank werden solche Verknüpfungen auftreten, doch mehr dazu im nächsten Abschnitt.
1.3.1. Die FahrFlott-Datenbank
Wir benötigen für unser Projekt in der Datenbank Tabellen für die Fahrzeugklassen, die Fahrzeuge, die Kunden und die Rechnungen.
Für jede dieser Tabellen müssen wir uns überlegen, welche Daten wir in der Tabelle ablegen möchten, welche Spalten diese Tabelle also enthalten soll und von welchem Datentyp die Daten sind. Die konkrete Umsetzung werden wir dann in Kapitel 6 behandeln.
Die Tabelle Massen für die Fahrzeugklassen beinhaltet nur wenige Spalten. Die erste Spalte id_Klasse enthält den Primärschlüssel (ID) der einzelnen Datensätze, um diesen müssen wir uns nicht weiter kümmern, da dessen Verwaltung die Datenbank übernimmt.
In die Spalten Masse, tagessatz und kmsatz schreiben wir dann später die Informationen zur Fahrzeugklasse hinein, also beispielsweise „Limousine“, „60“ und „1.25“. Wichtig ist hier, dass wir keine Einheiten angeben, also nicht etwa „60,-EUR“, denn diese Spalten dürfen nur Zahlen enthalten. Die passende Einheit werden wir später auf der jeweiligen Seite mit PHP oder Javascript hinzufügen.
Die Spalte bildname wird den Dateinamen des Bildes für die Fahrzeugklasse enthalten, dieser ist natürlich vom Datentyp text und kann somit beliebige Zeichenfolgen aufnehmen. Dennoch sollten wir darauf achten, bei Dateinamen keine Sonderzeichen oder gar Leerzeichen zu verwenden, da viele Serverbetriebssysteme und dort eingesetzte Programmiersprachen, wie etwa auch PHP, damit Probleme bekommen können. Von daher ist es sinnvoll, sich auf die Buchstaben, Ziffern und eventuell den Unterstrich _ zu beschränken.
Die letzte Spalte dient dazu, den Status der jeweiligen Fahrzeugklasse aufzunehmen, also ob sie gelöscht ist oder nicht. Natürlich könnten wir den entsprechenden Datensatz beim Löschen auch aus der Tabelle entfernen, meine Erfahrung hat mir aber gezeigt, dass es oft Fälle gibt, bei denen man gelöschte Daten gerne wiederherstellen möchte, ohne sie komplett neu einzugeben. Und da unsere kleine Datenbank sicher keine Millionen von Datensätzen enthalten wird, haben wir auch keine Probleme, was den Speicherplatz angeht.
Die Tabelle 1.2fahrzeuge für die einzelnen Fahrzeuge sollten Sie jetzt schon fast vollständig selber verstehen, das einzig Neue ist die zweite Spalte id_Klasse. Hiermit verknüpfen wir jedes Fahrzeug mit einer Fahrzeugklasse und können so für jedes Fahrzeug leicht die benötigten Daten aus der Tabelle Masse abrufen.
Zur Tabelle kunden muss ich jetzt nichts mehr schreiben, hier tauchen schon keine unbekannten Dinge mehr auf.
Tab. 1.1.: Die Tabelle Massen
Tab. 1.2.: Die Tabelle fahrzeuge
Tab. 1.3.: Die Tabelle kunden
Tab. 1.4.: Die Tabelle rechnungen
Als letztes haben wir noch die Rechnungstabelle, auch hier sollten die einzelnen Spalten für Sie mittlerweile verständlich sein. Ebenso wie in der Tabelle fahrzeuge bringen wir hier Verknüpfungen mit anderen Tabellen über die jeweiligen IDs unter.
Solche Verknüpfungen nennt man auch Fremd- oder Sekundärschlüssel, da sie sich auf Daten einer anderen Tabelle beziehen. Diese Verknüpfungen sind für die Rechnungstabelle in Abbildung 1.3 verdeutlicht.
Bei unserer Rechnungstabelle handelt es sich um eine minimale Form, da wir hier auf alle Daten verzichten, die sich aus bereits vorhandenen Werten berechnen lassen. So benötigen wir weder eine Spalte für die Anzahl der Tage noch eine Spalte für den Rechnungsbetrag.
Die Anzahl der Tage können wir jederzeit über die Werte der Spalten datum_ von und datum_ bis berechnen, die gefahrenen Kilometer über die Werte km_von und km_bis. Über die ID des Fahrzeugs können wir die Fahrzeugklasse herausbekommen, und damit die Werte für den Tagessatz und den km-Satz. Und so können wir dann auch den Rechnungsbetrag bestimmen.
Abb. 1.3.: Die Verknüpfungen der Rechnungstabelle
Ideal ist das allerdings nicht, denn wenn die FahrFlott GmbH einmal die Werte für eine Klasse ändert, erhalten wir andere Rechnungswerte als bei der ursprünglichen Rechnung. Von daher wäre es durchaus sinnvoll, die Tabelle um die klassenspezifischen Spalten tagessatz und kmsatz zu erweitern. Aber das können Sie ja später leicht als Übung für die Rechnungsverwaltung selber durchführen. Oder Sie schauen im Abschnitt 12.1 nach.
1http://en.wikipedia.org/wiki/List_of.content.management.systems
2 Datenbanksysteme unterstützen eine große Menge unterschiedlicher Datentypen, um die Daten optimal speichern und verarbeiten zu können. Wir verwenden hier nur die folgenden Typen: integer für ganze Zahlen, float für Kommazahlen, text für Texte, date für Datumswerte und boolean für ja/nein Werte
2. Struktur mit HTML
2.1. Was ist eigentlich HTML?
HTML, die Hyper Text Markup Language, ist eine Seitenbeschreibungssprache. Das bedeutet, in dieser Sprache gibt es Elemente, die die strukturelle Gliederung der jeweiligen Seiteninhalte beschreiben.
Anders als zum Beispiel in einer Textverarbeitung, wo Sie die Inhalte (Überschriften, Absätze, Tabellen etc.) nach Ihren Wünschen formatieren können, geben Sie in HTML neben den reinen Inhalten auch die Art der Inhalte an.
In der Textverarbeitung würden Sie vielleicht Überschriften in der Schriftart Times mit 17pt Größe in fett formatieren, für das Textverarbeitungsprogramm handelt es sich dabei aber immer noch um ganz normalen Text mit einer bestimmten Formatierung.
In HTML schreiben Sie jedoch in das Dokument zusätzlich zum reinen, unformatierten Text noch die Information, dass es sich hierbei um eine Überschrift handelt. Der Browser erkennt dann diese Information und formatiert die Überschrift anhand seiner Voreinstellungen oder anhand der Vorgaben in der zugehörigen CSS-Datei.
Um ein HTML-Dokument zu erstellen, müssen Sie also neben den reinen textlichen Inhalten auch die benötigten strukturellen Informationen mit angeben. Die dazu verwendeten Befehle nennt man tags.
Während es früher nur wenige essentielle tags gab, versucht man heute mit der fünften Version von HTML weitere semantische Informationen im Dokument unterzubringen. Auf diese Weise kann zum Beispiel das Vorleseprogramm eines sehbehinderten Website-Besuchers nicht relevante Teile, wie etwa den Seitenkopf oder die Fußzeile, erkennen und nur den inhaltlich wichtigen Teil der Seite vorlesen.
Außerdem ist es ein wichtiges Ziel, die Strukturierung und den eigentlichen Inhalt einer Seite von den Designangaben zu trennen. Dadurch erreicht man nicht nur leichter lesbare Dokumente, sondern kann spätere Änderungen am Design wesentlich einfacher durchführen oder Dokumente für unterschiedliche Ausgabeformate aufbereiten. Wie das mit der optischen Formatierung vor sich geht, werden wir dann beim Thema CSS in Kapitel 4 besprechen.
HTML hat sich seit seiner Erfindung 1992 stark weiterentwickelt und immer wieder Änderungen in der formalen Syntax der Schreibweise erfahren. Aus diesem Grund sind die meisten Webbrowser sehr tolerant, was Fehler bei den tags angeht. Im weit verbreiteten Internet-Explorer von Microsoft gibt es dazu sogar einen speziellen „Kompatibilitätsmodus“. Nichtsdestotrotz sollten Sie natürlich versuchen, syntaktisch korrekten Code zu schreiben, auch wenn die Seite in Ihrem Browser trotz eventueller Fehler richtig angezeigt wird.
Die wichtigste syntaktische Regel bei HTML lautet:
Zu jedem öffnenden tag gehört auch ein schließender tag
Die einzelnen tags werden dabei von den „Kleiner“ < und „Größer“ > Zeichen umschlossen. Das schließende tag bekommt dabei noch einen Schrägstrich / vorangestellt. Allgemein sieht das Ganze dann so aus:
Es gibt allerdings einige Ausnahmen von dieser Regel, etwa für tags, die keinen Inhalt umschließen. Diese tags enthalten den abschließenden Schrägstrich bereits im öffnenden tag selber. Solche tags haben dann diese Struktur:
2.2. Der Aufbau einer Seite
Ganz am Anfang einer HTML-Seite befindet sich das tag doctype. Es kennzeichnet die Dokumentendeklaration DTD der Seite und wird vom Browser ausgewertet. In seinen Attributen finden sich Angaben darüber, welcher HTML-Standard verwendet wird. Bis HTML Version 4 war diese Angabe ausgesprochen kompliziert, das ist mit HTML5 deutlich besser geworden. Eine korrekte Deklaration für eine HTML5-Seite sieht so aus:
Das Besondere am doctype ist, dass es kein schließendes tag hierfür gibt.
Das darauf folgende tag kennzeichnet den Beginn der HTML-Seite und heißt schlicht html. Optional kann man noch eine Sprachinformation über das Attribut lang hinzufügen, die vom Browser ausgewertet wird.
Das html-tag umschließt die beiden Bereiche, aus denen eine HTML-Seite besteht, den Kopf (head) und den Körper (body). Dabei hat der Kopf nichts mit der Ausgabe vom Seitenkopf zu tun, er beinhaltet vielmehr weitere, vor allem technische Informationen über das Dokument. Das können Angaben zum Autor des Dokumentes, dem Seitentitel der im Browser angezeigt wird oder Informationen über einzubindende Dateien sein. Die eigentlichen strukturellen tags für die Webseite stehen im Körper. Damit sieht das Grundgerüst einer Webseite wie in Abbildung 2.1 aus.
