In 5 Minuten
Programmieren Lernen


Lernen Sie gleich hier eine Foto-Sharing Web-Applikation zu Programmieren. Legen Sie los - die Zeit läuft!

Ihre Aufgabe

Programmieren Sie eine Foto-Sharing Web-Applikation, mit der Sie Fotos auf einen Server hochladen und Verlinken können. Das Ergebnis sollte ein individueller Link zum einzelnen Foto sein, den man zum Verschicken per Email und SMS, aber auch zum Posten auf Plattformen benutzen kann.
Click here for the tutorial in ENGLISH!

Die Lösung:

1. Code

Kopieren Sie den folgenden Code:
<h3>Foto Sharing App</h3>
<form action="http://www.wowoodu.com/p/fotoupload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile" >            
    <input type="submit" value="Foto verlinken" >  
 </form>

2. Host

Öffnen Sie in einem neuen Fenster oder einem zusätzlichen Tab die folgende Seite: w3schools Tryit Editor.

3. Programmierung

Ersetzen Sie den folgenden Satz im Programmfenster des Tryit Editors durch den vorher kopierten Code:
The content of the body element is displayed in your browser.
Fügen Sie den Code also genau zwischen den beiden sogenannten Body Tags ein:
<body>
...
</body>

4. Testing

Dann klicken Sie auf "See Result".  Im rechten Fenster wird nun das Resultat Ihrer Programmierung angezeigt. Probieren Sie die Web-App jetzt mal aus. Wählen Sie mit dem linken Button eines Ihrer Fotos und klicken Sie den rechten Button, um es auf den Server zu laden.

5. Bug Fixing

Sollte es nicht funktionieren, ist bei der Programmierung ein Fehler passiert. Wiederholen Sie die Schritte 1-4 und versuchen Sie, den Fehler zu finden und zu korrigieren. Sollte das nicht funktionieren, verändern Sie in Schritt 1 einfach den ganzen Code: kopieren Sie den folgenden Code und ersetzen Sie dann den gesamten Code im Fenster des Editors damit.

<!DOCTYPE html>
<html>
<body>
<h3>Foto Sharing App</h3>
<form action="http://www.wowoodu.com/p/fotoupload.php" method="post" enctype="multipart/form-data">
 <input type="file" name="uploadFile" > 
 <input type="submit" value="Foto verlinken" > 
</form>
</body>
</html>


Also, haben Sie's geschaftt?
 

Gratulation!

Sie haben gerade in 5 Minuten Programmieren gelernt!


Das soll Programmieren sein? Ja, ist es. Rekapitulieren wir mal: Sie haben Wir sehen uns das gleich mal im Einzelnen an. Die Praxisübung war der Anfang, jetzt wollen Sie sicher ein bißchen was darüber lernen.

Ressourcen

Sich von einer Ressource Code zu beschaffen, anstatt alles selbst zu schreiben, ist heute vollkommen normal. Sehen Sie sich die kleinen Sonderzeichen in Ihrem Code nochmal an. Wenn man da 100 Zeilen Code schreibt, ist die Wahrscheinlichkeit für kleine Fehler enorm hoch. Und kleine Fehler können das Funktionieren des ganzen Programmes verhindern.

Das Schöne heute ist, dass es im Internet bereits soviel Dokumentation über Programmierlösungen gibt, dass Sie für alles, was Sie suchen, mehrere Lösungen finden werden. In den weiteren Kapiteln informiere ich Sie auch jeweils über die hilfreichsten Ressourcen.

Host

Ihr Programm muss genauso wie eine Textdatei irgendwo gespeichert sein. Und da Ihr Programm das Internet braucht, um für User verwendbar zu sein, mussten wir das Programm auf einem Computer speichern, der mit dem Internet verbunden ist. Das nennt man einen Host.

Ihr PC/Tablet/Handy ist zwar mit dem Internet verbunden, verfügt aber vermutlich nicht über einen Html-Editor. Daher mussten wir eine andere schnelle und einfache Hosting-Lösung für den 5-Minuten Kurs finden. Und das war der Tryit-Editor der Ressource w3schools.

Wenn Sie weiter Programmieren wollen, brauchen Sie einen richtigen Host und den bekommen Sie bei einem Hosting-Provider. Wie Sie zu einem Host kommen finden Sie im Kapitel Website - Hosting.

Hosting


HTML

Hyper Text Markup Language ist die Standard (Programmier)-Sprache für die Kreation von Webseiten.
Markups werden verwendet, um die gewünschte Darstellung des Textes zu beschreiben, so dass der Browser (MS Explorer, Firefox, Safari, Chrome, Opera) weiss, wie der Text angezeigt werden soll. Markups sollen deutlich vom Text zu unterscheiden sein.

In html heissen sie Tags. Sehen wir uns mal die Tags in Ihrem Html-Code an:
<h3>Foto Sharing App</h3>
<form action="http://www.wowoodu.com/p/fotoupload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile" >            
    <input type="submit" value="Foto verlinken" >  
 </form>
Die Tags sind die seltsamen Buchstaben, Zahlen und Worte in den eckigen Klammern, die sich im Fall von <h3> deutlich von dem dazwischenliegenden lesbaren Text unterscheiden. In Ihrem Code befinden sich 3 Tags:
  1. <h3> beschreibt, dass die Überschrift "Foto Sharing App" eine Überschrift (h für Headline) der Stufe (oder Grösse) 3 ist. Es gibt 6 vordefinierte Formate für Headlines.
  2. <form> beschreibt, dass der folgende Inhalt ein Eingabeformular darstellt.
  3. <input> ist ein Bestandteil dieses Form Tags und beschreibt, dass der User hier eine Eingabe machen kann oder muss.
Die Tags müssen immer am Anfang und am Ende des zu beschreibenden Textes stehen. Der Tag am Ende sieht genauso aus wie der am Anfang, aber er hat zusätzlich nach der eckigen Klammer links einen Schrägstrich. Ein vollständiger Tag sieht daher so aus:
<tag> </tag>

Aber da findet sich ja noch einiges mehr an unverständlichem Zeug!

Manche Tags können, andere Tags müssen mit Parametern versehen werden, die die Ausführung weiter beschreiben. Nehmen wir einmal nur den Form Tag ohne den Inhalt des Formulars:
<form action="http://www.wowoodu.com/p/fotoupload.php" method="post" enctype="multipart/form-data">
    
</form>
Der Parameter action="http://www.wowoodu.com/p/fotoupload.php" beschreibt, was nach dem Absenden des Formulars (das war der Button "Foto verlinken") geschehen soll.
Nämlich: rufe die Datei sonncomfotoupload.php auf, die Du im Internet an der Adresse wowoodu.com im Ordner p findest.
Danach kommt noch ein Parameter: method="post".
Es gibt zwei Möglichkeiten Formulare abzuschicken: GET und POST. Letzteres verschickt die Daten verdeckt und kann nicht so leicht gehackt werden. Es gibt aber auch gute Gründe für die Verwendung von GET - aber dazu in einem späteren Kapitel.

Und noch ein Parameter ist da: enctype="multipart/form-data". Dieser Parameter beschreibt, wie die Daten bei der Übermittlung verschlüsselt werden sollen. Mit "multipart/form-data" werden sie nicht verschlüsselt. Das ist wichtig, beim Hochladen von Dateien, wie unserem Foto.

Dann lösen wir jetzt noch das Rätsel um die Tags die innerhalb des Form Tags sind:
    <input type="file" name="uploadFile" >            
    <input type="submit" value="Foto verlinken" >
Es handelt sich um den Input Tag.
In Formularen ist ja immer etwas auszufüllen, oder anzugeben (z.B. wo unser Foto am PC liegt), oder ein Button zum Absenden zu klicken. In unserem Fall geben Sie bekannt, welches Foto hochgeladen werden soll und müssen dann den Knopf bzw. Button zum Hochladen klicken. Die Parameter innerhalb der Input Tags beschreiben das.

Im ersten Fall handelt es sich um den Input Typ "File", also eine Datei ist hochzuladen. Sie wird gleich auch mit einem Namen versehen, "uploadFile". Das ist eigentlich eine Variable, denn das Formular soll ja nicht nur ein bestimmtes Foto hochladen helfen, sondern möglichst immer wieder mit anderen Fotos verwendbar sein.

Im zweiten Fall handelt es sich um den Input Typ "Submit". Das Beschreibt einen Button, dessen Klicken zum abschicken des Formulars führt. Damit Sie verstehen, was nach dem Abschicken passieren wird - also das Verlinken Ihres Fotos - wurde als Value, also als Wert, der als Text im Button stehen soll, die Bezeichnung "Foto verlinken" gewählt. Man hätte diesen Parameter auch weglassen können, dann wäre im Button "Submit" gestanden.

Das war also die Entzauberung Ihres Html-Codes: Form Tags, Input Tags und eine Absendemethode. Sie können sich übrigens von jeder beliebigen Website den Html-Code ansehen, indem Sie im Browser die rechte Maustaste drücken und "Quellcode anzeigen" auswählen. Jetzt können Sie auch grundsätzlich verstehen, was dort eigentlich steht: Tags und der Text.

Mehr über Html und wie Sie es am schnellsten selbst einsetzen, gibt es später.

PHP

Ursprünglich Personal Home Page - mittlerweile PHP: Hypertext Preprocessor, ist eine serverseitige Programmiersprache, die für Web Development und für allgemeines Programmieren eingesetzt werden kann. Fast 40% aller Webseiten arbeiten mit PHP. Wann immer auf der Seite des Servers etwas zu tun ist, bevor Sie etwas im Browser sehen können, ist meist PHP involviert.

Was ist denn  da zu tun? Na, zum Beispiel haben Sie etwas in ein Suchfeld eingegeben, oder eine Restaurantadresse angefordert, oder auf Amazon Buchvorschläge abgerufen, oder auf Facebook nach einem Freund gesucht.

In unserem Fall wollten Sie ein Foto auf einen Server laden. In so einem Fall muss Das ist jede Menge Arbeit und dazu steht PHP am Server bereit, um diese Arbeit auszuführen. Also sehen wir uns den PHP-Code in der fotoupload.php für Ihre Foto-App mal genauer an. Schrecken Sie sich nicht, wir werden dieses Knäuel an Zeichen, Ziffern und Buchstaben gleich unten entwirren. Sie werden sehen, dass es dann viel von seinem Schrecken verliert:
<?php
$new = $rand = substr(md5(microtime()),rand(0,26),4);
$target_dir = "u/";
$target_dir = $target_dir . basename($new.".jpg");

if (move_uploaded_file($_FILES["uploadFile"]["tmp_name"], $target_dir)) 
{
$piclink = "http://flin.co/w?i=".$target_dir;
?>
<h1>Verlinkung erfolgreich!</h1>
<p>Hier ist der Link zu Ihrem Foto:<br>
<a href="<?php echo $piclink;?>">
<?php echo $piclink;?>
</a>
</p>
<h2>Gratulation!</h2>
<p>Sie haben soeben Ihr erstes funktionierendes Programm geschrieben. Den Link können Sie kopieren und damit das Bild per SMS oder Email an Freunde schicken oder es online posten.
</p>
<strong>
Das Bild bleibt übrigens nur für 24h sichtbar!
</strong>
<?php
} 
else 
{
echo "Sorry, there was an error uploading your file.";
}
?>
Also was ist da im einzelnen drinnen, in diesem Code?

Das folgende Bild (Anklicken zum Vergrössern) zeigt die einzelnen Elemente in diesem PHP-Code. Es handelt sich um eine Wenn/Dann Funktion mit der Bedingung, dass die obengenannten Arbeiten (Foto prüfen, Zufallsname, Hochladen und Link schicken) ausgeführt werden und den beiden Konsequenzen für den Erfolgs- bzw. Misserfolgsfall.

Die Elemente unseres PHP-Codes

Als erstes muss man PHP immer erst "einschalten". Stellen Sie sich das wie ein Wörterbuch vor. Dieses Wörterbuch für PHP muss man am Server installiert haben, damit PHP überhaupt einsetzbar ist. (Wenn Sie einen Host buchen, ist php meist Teil des Paketes und ist vorinstalliert.)

Zum Einschalten müssen Sie Dateien, die PHP-Code enthalten die Endung .php geben. Deshalb heisst die Datei in Ihrem Formular "fotoupload.php". Ausserdem müssen Sie am Anfang <?php und am Ende des Codes ?> setzen. Daher also:
<?php
// Dazwischen kommt der ganze Code. (Dies hier nach den beiden Schrägstrichen ist übrigens ein Kommentar, der das Programm nicht stört. Man verwendet diese Kommentare um den Code leichter verständlich zu machen.)
?>

Jetzt zerlegen wir die einzelnen Elemente des PHP-Codes mal Stück für Stück:
Sehr sehr Ungeduldige können diese Zerlegung ausnahmsweise überspringen. Ich empfehle aber die Lektüre bald nachzuholen, denn sonst fehlen Ihnen wesentliche Grundkenntnisse in PHP.

überspringen

Nach dem Einschalten von PHP werden gleich mal 3 Variablen gesetzt. Variablen beginnen mit einem $ gefolgt von einem beliebigen Namen. Variablen machen einerseits den Code einfacher, andererseits ermöglichen sie den Einsatz des Programmes für verschiedene Bilder (und nicht nur eines).

Die Erklärung zu den hier notwendigen Variablen finden Sie in den hier eingebetteten Kommentaren:
<?php

$new = $rand = substr(md5(microtime()),rand(0,26),4);
// Diese Variable erhält durch die Funktion rand einen vierstelligen zufallsgenerierten Namen aus Buchstaben und Zahlen. Den brauchen wir, um die Gleichnamigkeit von Fotodateien zu verhindern.

$target_dir = "u/";
// Diese Variable bezeichnet das Zielverzeichnis am Server, wo das Foto dann gespeichert werden soll - dieses Verzeichnis heisst "u".

$target_dir = $target_dir . basename($new.".jpg");
// Die Variable wird aber gleich umfunktioniert und zusätzlich zum Zielverzeichnis mit dem oben erzeugten Zufallsnamen und der Dateiendung .jpg versehen.

?>
Mit der genauen Funktionsweise der hier eingesetzten Funktion "rand" wollen wir uns hier nicht befassen. Der Rest des gesamten PHP Codes besteht aus einer einfachen Wenn/Dann-Funktion mit einer Bedingung:
"Wenn das Bild hochgeladen und gespeichert werden kann, dann tu das und schick dem Client den Link. Wenn das nicht geht, dann schick dem Client eine entsprechende Fehlermeldung."
if (Bedingung) 
{
//dann tu das und schick dem Client den Link. (positive Konsequenz)
} 
else 
// also wenn das nicht geht
{
// dann schick dem Client eine Fehlermeldung. (negative Konsequenz)
}
?>
Wir schreiben mal die Bedingung:
if (move_uploaded_file($_FILES["uploadFile"]["tmp_name"], $target_dir))
Die Bedingung bedient sich der PHP-Funktion move_uploaded_file also verschiebe-die-hochgeladene-datei. Diese braucht als Angabe den Namen des Files, der hier als Variable geschrieben steht, damit man das Programm für jedes beliebige Foto verwenden kann: $_FILES["uploadFile"]["tmp_name"]. Hier taucht jetzt der im HTML-Formular vergebene Variablenname "uploadFile" wieder auf und wird als "temporary_name" bezeichnet, weil die Bilddatei mit dieser Funktion nun gleich umbenannt und in das nun angeführte Zielverzeichnis verschoben wird. Das Umbenennen und die Angabe des Zielverzeichnisses wurde ja oben mit der Variablen $target_dir erledigt. Wenn das alles klappt - und das ist ja die wesentliche Funktion unserer Web-Applikation, dann kann die positive Konsequenz der Bedingung ausgeführt werden:
{
$piclink = "http://flin.co/w?i=".$target_dir;
?>
<h1>Verlinkung erfolgreich!</h1>
<p>Hier ist der Link zu Ihrem Foto:<br>
<a href="<?php echo $piclink;?>">
<?php echo $piclink;?>
</a>
</p>
<h2>Gratulation!</h2>
<p>Sie haben soeben Ihr erstes funktionierendes Programm geschrieben. Den Link können Sie kopieren und damit das Bild per SMS oder Email an Freunde schicken oder es online posten.
</p>
<strong>
Das Bild bleibt übrigens nur für 24h sichtbar!
</strong>
<?php
}
Wir lösen das mal in Einzelelemente auf: der gesamt Code zwischen den beiden geschwungenen Klammern ist, was gemacht werden soll, wenn der Upload gelingt.

Als erstes wird wieder mal eine Variable erzeugt, die den gesamten Link zum Foto enthält. Sie sehen da die Webadresse von Flin.co, das ist mein Fotosharing Service, den ich für diese Anleitung verwende. Daran wird das mittlerweile bekannte Zielverzeichnis angehängt. In der Variablen steht jetzt sowas wie: http://flin.co/w/u/2e34.jpg.

Der zweite Teil (mit dem für Sie bereits erkennbaren Html ist bloss, der Text, den Sie gesehen haben: "Verlinkung erfolgreich" etc.

Aber da passiert gleich was Seltsames - PHP wird abgeschaltet! Mit ?> Und dann kommt lauter HTML (das Sie jetzt bereits selbst erkennen).

Das ist das Schöne an PHP und HTML: die beiden vertragen sich so gut, dass man PHP ein- und ausschalten kann, wie man es braucht und trotzdem macht das Programm beim neuerlichen Einschalten einfach dort weiter, wo wir zuletzt ausgeschalten haben.

In unserem Fall muss also hier ausgeschalten werden, damit nach dem Hochladen, der ganze Text mit HTML dargestellt werden kann und der Browser dadurch erfährt, dass da eine Headline und dann ein normaler Absatz dargestellt werden sollen.

Aber mitten im HTML kommt dann dieses seltsame Gebilde:
<a href="<?php echo $piclink;?>">
<?php echo $piclink;?>
</a>
Hier wird ganz einfach der Link zum Bild ausgegeben. Der HTML-Tag <a href></a> beschreibt, dass in den Anführungszeichen nach dem href= ein Link - also eine Internetadresse folgt. Und zwischen den Tags  <a href> </a> kann man reinschreiben, was durch Klicken des Links besucht wird. Man hätte also hier auch einfach "Link zum Foto" schreiben können. Dann hätte das so ausgesehen:
<a href="<?php echo $piclink;?>">
Link zum Bild
</a>
Und was ist das?
<?php echo $piclink;?>
Hier wird mitten im HTML-Code PHP eingeschalten um den Link, der ja in der Variablen $piclink gespeichert ist - Sie erinnern sich: da ist etwas drin, was etwa wie der Link http://flin.co/w/u/2e34.jpg aussieht- mit dem Befehl echo auszugeben. Danach wird  PHP wieder abgeschalten und es geht mit HTML weiter.
Nach dem ganzen Text für die positive Konsequenz folgt die Anweisung für die negative Konsequenz:
else 
{
echo "Sorry, there was an error uploading your file.";
}
Also im anderen Falle (else): "Wenn das nicht geht, dann schick dem Client eine entsprechende Fehlermeldung." Wie im positiven Fall steht die Anweisung, was zu tun ist, zwischen den geschwungenen Klammern und bedient sich des PHP-Befehls echo zur Ausgabe der Fehlermeldung.
Jetzt bauen wir das alles wieder zusammen und Sie werden sehen, jetzt ist der PHP Code einigermassen verständlich:
<?php
$new = $rand = substr(md5(microtime()),rand(0,26),4);
$target_dir = "u/";
$target_dir = $target_dir . basename($new.".jpg");

if (move_uploaded_file($_FILES["uploadFile"]["tmp_name"], $target_dir)) 
{
$piclink = "http://flin.co/w?i=".$target_dir;
?>
<h1>Verlinkung erfolgreich!</h1>
<p>Hier ist der Link zu Ihrem Foto:<br>
<a href="<?php echo $piclink;?>">
<?php echo $piclink;?>
</a>
</p>
<h2>Gratulation!</h2>
<p>Sie haben soeben Ihr erstes funktionierendes Programm geschrieben. Den Link können Sie kopieren und damit das Bild per SMS oder Email an Freunde schicken oder es online posten.
</p>
<strong>
Das Bild bleibt übrigens nur für 24h sichtbar!
</strong>
<?php
} 
else 
{
echo "Sorry, there was an error uploading your file.";
}
?>


Zurückspringen

Wo ist eigentlich dieser PHP-Code in Ihrer Web-Applikation?

Wir sehen uns einfach mal den Quellcode der fotoupload.php an. Dann sollten wir ja sehen, wie der PHP-Code in einer echten Programmdatei aussieht. Gehen Sie auf www.flin.co/fotoupload.php, klicken Sie auf die rechte Maustaste und wählen Sie Quellcode anzeigen.

Wieso kommt da nur HTML aber keinerlei PHP?

Ganz oben haben Sie gelernt, dass PHP serverseitig ist. Der Code den Sie sehen ist ausschliesslich der Code der negativen Konsequenz unserer Wenn/Dann-Funktion. Wie kommt das?
Nun, die fotoupload.php ist nicht dazu da, einfach so aufgerufen zu werden. Sie soll ja nur nach Absenden des Formulars mit dem Foto aufgerufen werden. Sie haben die Datei aber einfach so aufgerufen und die Exekution des PHP-Codes ausgelöst. Dieser hat im Sinne unserer Wenn/Dann-Funktion nach dem hochgeladenen Foto gesucht. Da war aber keins, weil die Datei ja nicht durch das Formular aufgerufen wurde. Also hat PHP am Server auftragsgemäss nur die negative Konsequenz ausliefern lassen, nämlich die Fehlermeldung.

Jetzt wissen Sie aber schon recht viel über PHP. Mehr darüber gibt es später.

Testing und BugFixing

Auch das ist sind wichtige Bereiche der Programmierung. Oft ist das BugFixing überhaupt der schwierigste Teil, denn wenn etwas nicht funktioniert, müssen Sie erst mal herausfinden, warum es nicht funktioniert. Profis haben es da nicht einfacher. Denken Sie nur an die vielen Updates, die Sie zu Ihrer PC-Software und zu Ihren Smartphone Apps bekommen. Wenn Sie nachsehen, wozu denn das Update dient, werden Sie fast immer auch "BugFixes" in der Liste sehen.

Aber ich kann doch jetzt nicht programmieren!

Doch - es fehlt Ihnen bloss noch an mehr Erfahrung. Sie haben die wesentlichen Elemente kennengelernt, um selbst eine dynamische Website oder eine Web-Applikation zu entwickeln:

Also wie sammle ich jetzt mehr Erfahrung?

Einfach dranbleiben! Fordern Sie meine Unterlagen für's einfache Erlernen des Programmierens an. Sie müssen nicht langweiligen Stoff durchackern, um Wissen anzuhäufen, das so nicht verwertbar ist. Man kann auch so wie bei der Foto-Sharing Applikation an sinvollen Projekten lernen, die interessieren, weil man sie auch praktisch verwenden kann. Beispielweise finden Sie in den Unterlagen die Anleitung für die Entwicklung einer Marktplatz-Plattform, wo Angebot und Nachfrage zusammengeführt wird. Es erwartet Sie:
Unterlagen anfordern

Die Unterlagen


Fordern Sie hier Ressourcen, Anleitungen und Tips an und programmieren Sie damit verwendbare Applikationen:



Hosting

Eine Website ist nichts anderes als ein oder mehrere Dateien, die auf einem Computer gespeichert werden. Dieser Computer ist ständig mit dem Internet verbunden und wird Host genannt. Die Dateien am Host können nun von jedem, der die Adresse kennt (der Besucher), aufgerufen und angesehen werden. Wieso man dann im Browser (also Explorer, Firefox, Safari, Opera, etc.) etwas bestimmtes sieht, wird im Kapitel "Programmierung" behandelt.


Server Farm - Quelle: Wikipedia

Dieser Computer - der Host - könnte auch Ihr eigener Laptop sein, aber den wollen Sie eigentlich nicht dafür nutzen ständig über das Internet besuchbar zu sein. Deshalb bieten sogenannte "Hosting-Provider" Speicherplatz auf Ihren Computern an.

Damit diese Computer Besuchern über das Internet Dateien zur Verfügung stellen können, braucht man eine spezielle Software - den Server. Dieser wird normalerweise ebenfalls vom Hosting-Provider zur Verfügung gestellt. Meist sind Host und Server bereits vorkonfiguriert.

Host und Server werden meist als ein Gerät gesehen, dass man dann Server nennt. Die Besucher fragen übers Internet beim Server um eine bestimmte Datei an. Der Server kann diese Anfragen von "Clients" beantworten. Als Sie diesen Artikel aufgerufen haben, hat Ihr Computer - der Client - eine Anfrage an meinen Server geschickt. Mein Server hat die Anfrage positiv beantwortet und den Code für diese Seite zurückgeschickt. Ihr Browser interpretiert den Code und zeigt die schöne Seite an, die Sie gerade lesen.

Also: ein Hosting-Provider hat eine grosse Anzahl von Computern (meist stehen die in einer "Server Farm" wie oben abgebildet). Den Speicherplatz auf den Computern bietet er Ihnen an, damit Sie eine Website drauf speichern können und ihn als Server benutzen können. Und immer wenn dann ein Client eine Anfrage an den Server richtet, bedient er diese Anfrage.

So funktioniert das Darstellen von Inhalten im Internet.

Hosting kostet nicht viel - durchschnittlich 6 Euro im Monat, abhängig vom Leistungsumfang. Der Leistungsumfang ist insbesondere der Speicherplatz. Das müssen Sie sich wie eine Wohnung vorstellen. Je grösser die Wohnung desto teurer. Dazu kommen noch Zusatzleistungen wie Datenbanken, Programmiersprachen, etc. Um ca. 6 Euro ist meist eine riesige Menge Speicherplatz, MySQL Datenbank, Unterstützung der Programmiersprache php und jede Menge PlugIns (Zusatzprogramme) enthalten.

Ich selbst habe gute Erfahrungen mit dem Unlimited Host von 1und1 gemacht. Sie können sich auf deren Website: 1&1 Hosting: Alle Produkte und Leistungen! einen guten Überblick über alle verfügbaren Hostingprodukte machen. Wie gesagt, der Unlimited Host wird als Einstieg für die meisten von Ihnen ausreichen, zumal man jederzeit auf ein umfangreicheres Produkt upgraden kann. Für mich reicht er jetzt bereits für 8 Website-Projekte. Selbst wenn man mal einen ganz eigenen Server braucht (Dedicated Server), kann man auch darauf leicht upgraden.

Server  300x250 gif statisch
fotoupload