Trust made in Germany.

Diese und andere Websites (Teil 1: Programmierung)

Artikelinformationen

Warum ist diese Website eigentlich so einfach gestaltet und wie funktioniert das Ganze überhaupt? Mit dieser Artikelserie möchte ich einen Überblick darüber geben, welche Komponenten für das Bereitstellen einer Website notwendig sind und in welcher Beziehung diese zueinander stehen.

Dieser Artikel ist eher leichte Kost und für jeden Kollegen (egal in welchem IT-Bereich), für die die Zusammenhänge noch ein weißes Tuch sind.

Teil 1: Programmierung
Teil 2: Bereitstellung
Teil 3: Vorsicht
Teil 4: Nachsicht

Vorwort

Bevor es weiter geht ist es wichtig eine Lanze für professionelle Web-Entwickler zu brechen: // Webangebote professionell und sicher anzubieten ist kein Nebenjob (mehr)! Obwohl ich "früher" sogar selbst Webseiten und Webanwendungen angeboten habe, kann ich das heute niemandem mehr ohne entsprechende Kernaufgabe empfehlen. Die nötige Qualität und Expertise die für komplexe asynchrone User- und Backend-Interfaces und gleichzeitiger Erhaltung erforderlicher Resilienz gegen allgegenwärtige Bedrohungen notwendig ist, kann man nicht mehr "nebenbei" aufbringen.

Die logische Konsequenz aus meinem Dilemma zwischen "ich möchte es selber machen" und "es muss einem gewissen Qualitätsniveau entsprechen" war für mich die Reduktion auf ein Maß, welches auch noch mit meinem Nebenjob-Skill-Level beherrschbar bleibt.

Holen Sie sich einen Kaffee und stöbern Sie. Der Artikel funktioniert mit und ohne anfassen, d.h. für Pragmatiker habe ich auch kleine Aufgaben eingebaut. Falls Sie gerade im Zug sitzen oder ausprobieren eh überbewertet wird, überspringen Sie diese einfach.

Clientseitige Sprachen

HTML

Die einfachste Form einer Website ist letztendlich eine Textdatei mit "HTML-Code" (Hypertext Markup Language). Wenn Sie so eine Datei öffnen wird der Inhalt jedesmal neu vom Browser Ihrer Wahl geparst und angezeigt.

Sie brauchen dafür also erst einmal keine besondere Vorbereitung. Kopieren Sie sich folgenden Inhalt einfache in eine Datei und speichern Sie diese als *.html ab. Wenn Sie die Datei öffnen, werden Sie begrüßt.

<!DOCTYPE html>
<html>
    <head>
        <style>  
        h1 {color: rgb(100, 97, 97);}
        .text { color: #f75f00;}
        </style>
        <title>Steinbock Solutions Titel</title>
    </head>
    <body>
    <h1>Herzlich Willkommen</h1>
    <span class='text'>Hier könnte Ihr Text stehen.</span>
    </body>
</html>

Das Ergebnis wird dann so oder so ähnlich ausfallen:

Warum eigentlich "so oder so ähnlich"? Naja, wie bereits erwähnt wird die Website jedesmal neu geparsed, dass bedeutet zum Leidwesen der Programmierer jedoch auch, dass das Ergebnis je nach Browser anders ausfallen könnte. Früher hat man die Hälfte der Zeit damit verbracht den Code so anzupassen dass sie in allen Browsern vernünftig angezeigt werden. Dies wurde zwar durch den Umstand dass sich die Engines mit der Zeit angeglichen haben und 'alle' nur noch Google Chrome verwenden erheblich verbessert, aber es verwenden halt 'alle' nur noch Chrome. Ja, Safari ist mit ca. 20% sicherlich auch noch zu erwähnen, allerdings würde ich dort auch nicht von einem durch den durchschnittlichen Apple-Benutzer frei gewähltem Produkt sprechen ;)

"Kannste so machen, dann ist es halt kacke!"
>>> Empfehlung zur Browserwahl

Mit HTML bauen Sie also Ihre Website, zeigen Texte an, erstellen Links und Formulare machen Medien wie Bilder oder Videos zugänglich.

CSS

Sie haben also eine kleine Website vorliegen, ohne dass Sie die Details kennen müssen. Neben dem semantischen Aufbau der Webseite muss diese auch formatiert werden, wie z.b. die Farbe des Fließtextes oder der Überschrift. Und schon landen wir bei einer weiteren Komponente: CSS.

[...]
        <style>  
        h1 {color: rgb(100, 97, 97);}
        .text { color: #f75f00;}
        </style>
        [...]
    <span class='text'>[Hier könnte Ihr Text stehen.</span>
[...]

Mit "Cascading Style Sheets", selbst eine Gestaltungssprache, werden die Inhalte formatiert. In dem <style>...</style>-Element finden Sie die Formatierungen und im Inhalt nur <span class='text'> nur noch eine Referenz dorthin.

Übersichtshalber verwenden wir hier das <style>...</style>-Element, im 'echten' Leben würden wir dafür eine separate Datei schreiben und sie in HTML referenzieren.

Es ist übrigens heute absoluter Standard, Inhalte von der Formatierung zu trennen. Nur so funktionieren die Ihnen bekannten Funktionen, mit denen man "per Knopfdruck" das Design ganzer Websites ändert. Denken Sie daran, hier wird Ihnen ein Überblick verschafft; verwechseln Sie es also nicht mit einem Tutorial. Möchten Sie den ganzen Prozess lernen, sollten sie schonmal viel Kaffee kochen. Am Ende des Artikels finden Sie ein paar Tipps dazu (Zum Lernen, nicht zum Kaffee).

JavaScript

Jetzt ist die Website leider (oder Gott sei Dank) ziemlich statisch. Wollten Sie nun z.B. eine laufende Digital-Uhr einblenden (tun Sie das nicht!) oder Benutzereingaben interaktiv auswerten, hätten Sie ein Problem. Dafür erweitern wir unser Portfolio nun um "JavaScript" (Achja, bitte nie mit JAVA verwechseln!). JavaScript wird ebenfalls im Browser geparsed und erweitert unseren Funktionsumfang erheblich. Hier gibt es mittlerweile extrem mächtige Bibliotheken die dann natürlich aus der HTML-Datei ausgelagert werden, der Einfachheit halber behalten wir aber die eine zentrale Datei. Kopieren Sie sich den aktualisierten Quellcode in Ihre Datei und probieren Sie es aus:

<!DOCTYPE html>
<html>
    <head>
        <style>  
        h1 {color: rgb(100, 97, 97);}
        .text { color: #f75f00;}
        </style>
        <title>Steinbock Solutions Titel</title>
    </head>
    <body>
    <h1>Herzlich Willkommen</h1>
    <span class='text'>Hier könnte Ihr Text stehen.</span>
    <script>
    alert("Nervige Nachricht!");
    </script>
    </body>
</html>

Ihnen sollte also ein Fenster entgegenspringen was Sie vielleicht, wenn Sie noch zu jung sind, garnicht mehr kennen. Früher konnte man mit einem Hagel dieser Fensterchen schnell einen Browser zum Absturz, oder zumindest zur Unbedienbarkeit bringen. Heute sind die Engines schlauer und fragen Sie ob sie dieses Feuerwerk wirklich ertragen wollen.

Damit Sie eine Vorstellung davon haben wozu es genutzt werden kann:

Formulareingaben eines Benutzers prüfen, bevor sie zurück zum Server gesendet werden (dazu später mehr)
Auf Mausklicks reagieren
Berechnungen ausführen
Den Benutzer warnen, dass er nicht Ihren Lieblingsbrowser verwendet

Zusammenfassung

HTML, CSS und JavaScript werden fast auf allen Websites verwendet und sind damit Grundpfeiler für die Darstellung und Funktion. Bei Interesse an der Thematik, rate ich Ihnen auch die genannte Reihenfolge beim autodidaktischen Lernen. Es gibt dazu unzählige Referenzen und Tutorials im Internet. Meiner Meinung nach ist SelfHTML.org (Extern: SelfHTML) immernoch eine der besten Einstiege.

Natürlich ist es im "echten" Leben viel komplexer, aber es reicht um das System zu verstehen.

Serverseitige Sprachen

PHP

Zwar können wir unsere Datei nun schon im Internet zur Verfügung stellen, jedoch fehlen uns meistens noch sehr wichtige Funktionen. Stellen Sie sich vor, Sie haben sich eingearbeitet und stellen ein HTML-Formular zur Eingabe von Daten zur Verfügung, z.B. eine Login-Maske damit der Benutzer sich anmelden kann.

Die bis jetzt zur Verfügung stehenden Methoden führen immer wieder in eine Sackgasse: Wenn Sie die Logik für sicherheitsrelevante Überprüfungen in JavaScript schreiben würden, könnte der aufrufende Benutzer diese ja einfach manipulieren. Wir erinnern uns: Die clientseitigen Sprachen werden erst auf dem Client des Empfängers durch den Browser geparst.

Dies ist nur ein Beispiel von Tausenden, wo wir eine Logik benötigen die in "unserer Hand" (d.h. in der Hand des Betreibers) liegt. Dafür werden Sprachen verwendet, die bereits auf dem Server ausgeführt werden und dessen Ergebnis dann eine Datei ist, die wiederum durch den Browser geparst werden kann (bestehend z.B. aus HTML/CSS/JavaScript).

Ein weit verbreitetes Beispiel für so eine Sprache ist "PHP" (welches ein rekursives Akronym und Backronym für PHP: Hypertext Preprocessor ist... wie bitte? Vergessen Sie das, es ist unwichtig und wohl eher was für Sprachwissenschaftler:))

<!DOCTYPE html>
<html>
    <head>
        <style>  
        h1 {color: rgb(100, 97, 97);}
        .text { color: #f75f00;}
        </style>
        <title>Steinbock Solutions Titel</title>
    </head>
    <body>
    <h1>Herzlich Willkommen</h1>
       
    <?php
    echo "<span class='text'>Hier könnte Ihr Text stehen.</span>";
    echo "<script>";
    echo "alert(\"Nervige Nachricht!\");";
    echo "</script>";
    ?>

    </body>
</html>

Wir haben also unser Script ein wenig geändert. Betrachten Sie den Bereich zwischen den Markierungen <?php [...] ?>. Dieser Markierungen zeigen dem PHP-Parser auf dem Server (von dem die Website ausgeliefert wird), dass für Ihn interpretierbarer Code vorliegt. Der simple echo-Befehl dient nur der Ausgabe von Strings. Was für den PHP-Parser hier jedoch ein String ist, ist für den Empfangenden Parser des Browser ein HTML/CSS/JavaScript-Element.

Dieses Beispiel hat nun wahrlich kein besonderen nutzen, ist aber hoffentlich einfach zu verstehen. Anstelle des echo-Befehls könnten Sie sich z.B. eine Datenbankverbindung vorstellen, womit der Server z.b. weitere Informationen aus dem Backend holen könnte.

Nun, gern würde ich Ihnen nun Empfehlen sich diese Datei wie gewohnt auf dem Desktop anzuschauen...Ihnen wird jedoch auffallen dass das wie erwähnt ohne einen serverseitigen Parser nicht funktioniert. Falls Sie das Mini-Beispiel trotzdem nachvollziehen möchten, folgt ein kleiner Exkurs für eine schnelle und einfache Umsetzung.

XAMPP

Zwar kommen wir später zu den Informationen rund um die Bereitstellung, hier jedoch die Kurzfassung:

Bereitstellung der Website (Webserver): Apache
Parsen der PHP-Dokumente: PHP-Modul für Apache

Eine der beliebtesten Test-Umgebungen dafür ist XAMPP von apachefriends.org (Extern: apachefriends.org) und für alle Betriebssysteme verfügbar. XAMPP stellt Ihnen mit wenigen klicks einen Apache-Webserver (zur Bereitstellung von HTML/PHP-Webseiten) und weitere Funktionen zur Verfügung. Anbei eine Mini-Anleitung für dieses Beispiel:

XAMPP herunterladen
Installation mit den Optionen "Apache" und "PHP" (alles andere abwählen)
Im XAMPP Control Panel den Apache starten
Script im Installationsordner unter "xampp\test\index.php" abspeichern
Website über "http://localhost/test/" aufrufen
Fertig

ASP.Net, Ruby & Co.

Es sei erwähnt das es einige weitere serverseitige Scriptsprachen wie ASP.Net und Ruby gibt, dessen wichtige Eigenschaften aber die gleichen bleiben: sie sind serverseitig.

AJAX-Evolution

Sie sollten wissen dass nahezu jede moderne Website mit umfangreicher Benutzerinteraktion heute Methoden aus dem Bereich AJAX (Asynchronous JavaScript and XML) verwendet. Diese Methode ermöglicht dynamisches Nachladen von Inhalten in HTML-Dokumente über JavaScript. Stellen Sie sich eine Webseite vor, die Ihnen einen Serverstatus anzeigt. Um den Serverstatus zu erfahren muss durch den Webserver eine Backend-Funktion abgefragt werden, jedoch gibt es über das zustandslose HTTP-Protokoll (über das die Webseite ausgeliefert wurde) keine "Verbindung", die eine Änderung oder Aktualisierung signalisieren könnte. Mit AJAX wird über JavaScript in diesem Beispiel einfach der Server ein weiteres mal kontaktiert (idealerweise nun reduziert auf die Information "Online" oder "Offline") und die neuen Informationen in den Dokumentenbaum des Browsers dynamisch eingepflegt. Wenn Ihnen das aufgrund der mangelnden Erfahrung noch nicht gänzlich einleuchtet ist das auch nicht schlimm. Später, wenn wir uns die Protokolle ansehen, wird es deutlicher. Merken Sie sich: Ein komfortables "Office Online" oder "Google Maps" ist ohne Funktionen des dynamischen Nachladens nicht möglich.

Zusammenfassung

Sie wissen jetzt welche Dateien und Dateiinhalte für die Darstellung einer Webseite verantwortlich sind. Im nächsten Teil der Serie geht es darum, diese Dateien einem potentiellem Besucher auch zugänglich zu machen.

Weiter zu Teil 2: Bereitstellung

Zurück zur Übersicht