Im Code-Archiv veröffentliche ich zukünftig den Quellcode der von mir realisierten Projekte (HTML, PHP, mySQL). Für Standardroutinen in C, C++ und VHDL (umfangreich, siehe Projekt “Realisierung eines Calculators”) Code sei an dieser Stelle auf den Downloadbereich ([1] Studium) verwiesen. Dass ich insbesondere von meinen www-Seiten (aus Sicherheitsgründen) nur Code von Projekten veröffentlichen kann, die derzeit offline bzw. durch neue Auftritte ersetzt worden sind, versteht sich von selbst!

//————————————————–z.Zt. im mu21.de Code-Archiv————————————————–//

• News-System mu21.de pre-web 2.0-Standard
  • [2] show.php
  • [3] index.php
  • [4] header.php
  • [5] mu21.css

• Feedback-Formular mu21.de pre-web 2.0-Standard
  • [6] feedback.php
  • [7] submit.php

• [8] Straßenkarten, Satellitenbilder und Routenplanung mit Google Maps API
  • [9] mu21-google-maps-api.html
  • [10] mu21-routenplaner-google-maps.html
  • [11] mu21-google-maps-API-mySQL.php

//————————————————–z.Zt. im mu21.de Code-Archiv————————————————–//

Den Anfang bildet der Code zum [12] mu21.de pre-web 2.0-Standard, den ich sukzessive veröffentlichen werde:

show.php:
[13] show.php…
…das Herzstück - oder: Codeschnipsel 1 des mu21.de pre-web 2.0-Standards

Anfangs, als das www noch nicht so böse wie heute war, benötige ich die Datei show.php in der vorliegenden Form innerhalb meines “News-Systems” noch nicht. Damals war show.php alleinig dafür zuständig den Seitenaufruf in der Form “index.php?dir=Verzeichnis&file=Dateiname” (sei er vom Benutzer oder eben dynamisch generiert) zu übersetzten und den richtigen Rückgabewert für index.php zu liefern. Mit der Zeit häuften sich jedoch Angriffe, die auf Code-Injection (d.h. es war eine Sicherheitslücke gegeben, mit der es potentiellen Angreifern möglich wurde ihren (fremden) (Schad-) Code einzuschleusen und auch auszuführen, [14] XSS) innerhalb des damaligen index.php schließen ließen. Also habe ich den Code innerhalb von index.php mit mehreren switch-Anweisungen in der Datei schow.php abgesichert.

index.php:
[15] index.php…
…der Index - oder: Codeschnipsel 2 des mu21.de pre-web 2.0-Standards

Durch den Index wurde den Seiten ein generelles [16] Look-and-Feel gegeben (Header, Menüstruktur, Präsentationsfläche, Footer). Hierzu habe ich mit Tabellen und Bildern gearbeitet. Spielereien habe ich mir damals natürlich nicht verkneifen können (onmouseover=”window.status=’[Menüname]‘; return true” onmouseout=”window.status=”;)). Um mir Schreibarbeit zu sparen und um auf allen Seiten den gleichen Meta-Tag zu haben, habe ich mit den Meta-Tag inkludiert. Ebenso mit <?PHP setlocale(LC_TIME,”de_DE”); echo strftime(”%A, %x %X”); ?> ;-). Durch den Aufruf von show.php (include(”show.php”);) wurde der Inhalt der Seiten dem Benutzer dargestellt. Die Seiten konnten somit über “index.php?dir=Verzeichnis&file=Dateiname” aufgerufen werden.

header.php:
[17] header.php…
…der Header - oder: Codeschnipsel 3 des mu21.de pre-web 2.0-Standards

Nachdem die Seiten durch index.php bereits ein einheitliches Look-and-Feel erhielten, folgten schließlich durch die Datei header.php die allgemeingültigen Meta-Tags. Gemeinsamkeiten sollten alle mu21.de Seiten in der Beschreibung (”description” und “keywords”) in den Seiten-Eigenschaften (”page-topic”, “page-type”) und natürlich in den Äquivalent-Einträgen (”http-equiv-…”) aufweisen. Das gemeinsame Favicon habe ich an dieser Stelle ebenfalls definiert. Der durchgängige Header ließ sich durch hinzufügen von verschieden Meta-Tags auf den einzelnen Seiten dennoch flexibel handhaben (insbesondere der Seitentitel “<title>mu21.de [nt & lifestyle]<title>” konnte damit angepasst werden).

mu21.css:
[18] mu21.css…
…das Cascading Style Sheet - oder: Codeschnipsel 4 des mu21.de pre-web 2.0-Standards

CSS, Cascading Style Sheets: Ein erschöpfendes Thema (egal, von welcher Seite es aufgefasst wird)… Die Fortschritte bei der Entwicklung (falls es um Nuancen im Style geht) kaum sichtbar, die Arbeit aber unerschöpflich! Ein unglaubliches Nachschlagewerk zum Thema findet ihr bei [19] edition-w3c.de.

Das im folgenden vorgestelte [20] Feedback-Formular verwendete ich ebenfalls im mu21.de pre-web 2.0-Standard:

feedback.php:
[21] feedback.php…
…Teil 1 (HTML) des Feedback-Formulars - oder: Codeschnipsel 5 des mu21.de pre-web 2.0-Standards

Um vor der ansteigenden Spam-Welle wenigstens ein bisschen flüchten zu können, entschied ich mich, die Besucher meiner Webseite nur noch durch ein Feedback-Formular Kontakt mit mir aufnehmen zu lassen. Wenig später machte mir dann allerdings § 55 Abs. 2 RStV (Impressumspflicht) (Nein, zu § 55 Abs. 2 RStV gibt es an dieser Stelle keinen Link, schließlich ist man durch den § 55 ebenfalls verpflichtet bei verlinkten Seiten darauf hinzuweisen, insofern man eben nicht lt. § 55 der Verantwortliche… Ich hoffe ihr versteht was ich meine!) einen Strich durch die Rechnung: Egal, das selbstgeschriebene Feedback-Formular blieb! Die geforderte E-Mail-Adresse veröffentlichte ich also aufgrund § 55… schön brav im Impressum als .jpeg. Der Link dazu führte jedoch nicht zu einer “E-Mail-Adresse” (mailto: “…”) sondern zum Feedback-Formular.

Der erste Teil (der HTML-Teil) beschrieb das Formular an sich (Textfelder, Textbox) und sorgte dafür, dass die Benutzereingaben “Your name:”, Your eMail:” und “Your message:” in den Variablen “$Name”, “$message” und “$eMail” zur weiteren verarbeitung gespeichert wurden.

submit.php:
[22] submit.php…
…Teil 2 (PHP) des Feedback-Formulars - oder: Codeschnipsel 6 des mu21.de pre-web 2.0-Standards

Die bereits erwähnten Variablen “$Name”, “$message” und “$eMail” werden nun von submit.php ausgewertet. Da es sich bei allen Eingabefeldern in feedback.php um sog. Mussfelder handelt, folgte zuerst die Prüfung auf Vollständigkeit der Eingabe mit “if(empty($Name)OR empty($eMail) OR empty ($message))”. Falls ein (ernsthafter) Benutzer mir eine Angabe vorenthalten wollte, erhielt er mittels “javascript:history.back(1)” die Möglichkeit seine Eingaben bequem (ohne Löschung der bisherigen) zu korrigieren. Waren alle Eingaben korrekt, wurde eine E-Mail mit diesen an mich generiert, verschickt (inkl. “X-Sender-IP: $REMOTE_ADDR” zu Spam-fighting Zwecken) und eine Statusmeldung ausgegeben (Echo-Replys).

Hier stelle ich Möglichkeiten zur Erstellung von Straßenkarten, Satellitenbilder und Routenplanungen mit Google Maps API vor. Diese kommen im aktuellen mu21.de-web 2.0-Standard zum Einsatz:

Verwendung von Google Maps API:
[23] Verwendung von Google Maps API
Grundsätzliches zur Verwendung der Schnittstelle zur Anwendungsprogrammierung

Aufgrund der derzeitigen Copyright- und (bei Verletzungen die damit verbundene) Abmahn-Problematik, der Unsicherheiten für Webmaster im Bezug auf die Urheberrechte von Kartenmaterial bietet sich als Abhilfe die Google Maps API Programmierung geradezu an. Einige Kenntnisse in Java Script und Objektorientierter Programmierung (z.B. C++) reichen aus, um ansprechende Karten zu erstellen und diese auf der Webseite zu veröffentlichen. Neben grundlegenden Urheberrechtsbelange und die Beantragung des “Maps API key” zeige ich grundlegende Strategien zur Gewinnung der Longitude und der Latitude eines Ortes auf. Damit Karten wie z.B. nachfolgende erstellt werden können:

mu21-google-maps-API.html:
[24] mu21-google-maps-API.html…
…Straßenkarte, Satellitenbild, Marker und Polyline mit Google Maps API - oder: Codeschnipsel 1 des mu21.de-web-2.0-Standards

Mit diesem Beispiel ist es möglich attraktive Straßenkarten und Satellitenbilder zu erstellen. Zum Einsatz kommen dabei Navigationselemente, Marker und Polylines. Damit können Gebiete in der Karte graphisch hervorgehoben und bestimmte Orte gekennzeichnet werden.

mu21-routenplaner-google-maps.html:
[25] mu21-routenplaner-google-maps.html…
…Routenplaner (hier: Straßenkarte und Streckenbeschreibung) mit den Directions Elements von Google Maps API - oder: Codeschnipsel 2 des mu21.de-web-2.0-Standards

Mit dem hier vorgestellten Code lässt sich eine Routenplaner Funktion realisieren. Um Missbrauch zu verhindern lasse ich im Beispiel keine Benutzereingaben (Start- / Endpunkt der Navigation) zu. Hierbei sei auf die offizielle [26] Dokumentation verwiesen.

Viel Spaß beim schmökern!