Ein weiter Weg? Vom Baukasten zu, FTP Server

Wir alle haben einmal klein angefangen. Sei es auf Oyla, Beepworld oder einem anderen "Homepage Baukasten". Doch auf solchen Baukästen ist man schon ziemlich eingeschränkt.

Mit einem richtigen Server inkl. Datenbanken und FTP Zugriff hat man viel mehr Möglichkeiten.

Und es ist gar nicht so schwer, wie viele eventuell denken.

In diesem Tutorial geht es nur mal darum, von Oyla auf Bplaced umzuziehen. Datenbanken werden hier keine berücksichtigt (dies folgt in einem späteren Post).

Auf welchen Hostern habe ich so ein Angebot?

Kostenlose Hoster die inkl. Datenbank und FTP Zugang sind gibt es inzwischen wie Sand am Meer.

Ich persönlich war schon auf BPlaced, Kilu, Pytal, Taess, und Funpic.

Funpic, Kilu und Pytal haben Werbung. Das hat mich persönlich ein wenig gestört. Bei Funpic und Kilu fällt (bzw. fiel damals) außerdem sehr häufig der Server aus bzw. die Homepage war nicht zu erreichen.

Mit BPlaced war ich sehr zufrieden. mit Taess ebenfalls.

Momentan bin ich mit PinkPearl auf Ani-Network.

Bei diesem Tutorial werde ich von den Hostern BPlaced ausgehen.

Was für zusätzliche Programme brauche ich?

Ein FTP Programm wie zum Beispiel das kostenlose Programm Filezilla (dieser Link ist für Windows) wäre gut. Ansonsten wird keine weitere Software benötigt.

Was muss ich auf meinem Hoster alles einstellen?

Bei der Anmeldung auf BPlaced reicht das folgende Paket völlig aus:

Bild 1: BPlaced Anmeldung

Unter "FTP Verwaltung" müsst ihr nichts einstellen. Dort wurde bereits automatisch ein Konto für euch angelegt.

Bild 2: FTP Verwaltung

Wie ihr seht: eigentlich müsst ihr überhaupt nichts einstellen.

Wie bekomme ich meine Textseiten auf BPlaced?

Um Texseiten zu erstellen, legt ihr einfach eine neue Datei auf eurem Rechner an.

Diese heißt Index.php.

Nun schreibt ihr etwas in diese Datei rein.

Zum Beispiel:

Hallo, das ist meine erste Homepage auf Bplaced.

Bearbeiten könnt ihr die Datei mit dem normalen "Editor" von Windows, mit dem kostenlosen Programm Notepad++, UltraEdit oder anderen HTML Editoren.

Startet nun euer FTP Programm (zum Beispiel Filezilla).

Bild 3: Filezilla

Und gebt oben (siehe Bild 3) eure Daten ein. Ihr findet sie auf BPlaced in eurer FTP Verwaltung (siehe Bild 2).

Euer Passwort ist einfach das Passwort, welches ihr bei der Anmeldung angegeben habt.

Der Benutzername ist ebenfalls der Benutzername, den ihr bei der Anmeldung angeben habt.

Und der Server ist einfach euer Benutzername + .bplaced.net (Beispiel: pinkpearlinfo.bplaced.net).

"Port" könnt ihr ruhig frei lassen. Klickt dann auf "Verbinden".

Wenn ihr verbunden seid sieht das Ganze ca. so aus:

Bild 4: Filezilla anzeige nach dem Verbinden

Die zwei Abteilungen die uns interessieren sind die zwei untersten.

Links seht ihr die Ordner auf eurem Rechner. Rechts die Ordner und Dateien von eurer Homepage.

Navigiert euch im linken Bereich einfach auf den Ordner, indem eure angelegte Index.html ist und zieht in den rechten Bereich. Alternativ könnt ihr auch einfach die Datei von dem Explorer in euren rechten Bereich ziehen. So muss es dann auf der rechten Seite aussehen:

Bild 5: Filezilla mit Index.php

Wenn ihr jetzt auf eure Homepage geht (z.B. pinkpearlinfo.bplaced.net) sehr ihr den Text, den ihr in die index.php geschrieben habt.

Info: BPlaced ruft immer automatisch beim Aufrufen der Seite eure inde.php auf.

Nun könnt ihr all eure Oyla Seiten so anlegen. Der Inhalt eurer Startseite kopiert ihr in die Index.php, dann erstellt ihr eine webby.php und kopiert dort den Inhalt eurer webby Seite usw.

Zieht dann alle erstellten Textseiten in den rechten Bereich von Filezilla.

Eure Textseiten könnt ihr dann zum Beispiel so aufrufen:

pinkpearlinfo.bplaced.net/webby.php

Wie bekomme ich ein Layout auf meine Seite?

Das ist natürlich ganz schön umständlich, wenn der Besucher immer nur eine Seite sieht. Für so etwas hat man ein Layout, indem alle Textseiten verlinkt sind.

Erstellt nun eine header.php und eine footer.php. In diese beiden Dateien werden wir unser Layout verfrachten. Ich habe mich für dieses Design von PinkPearl entschieden.

Öffnet die Index.html in der .zip, nachdem ihr das Design gedownloadet habt und kopiert den kompletten Inhalt in eure header.php.

Schneidet nun von dieser header.php den ganz unteren teil

</div>

<div id="footer"></div>

</div>

</body>

</html>

aus und fügt diesen in die footer.php ein.

Damit ist die footer.php fertig.

In der header.php könnt ihr jetzt noch alles löschen, was unter

<div id="content">

steht.

Und fertig ist die header.php.

Nun müssen das Layout ja noch in unsere Textseiten eingebunden werden.

Öffnet eure index.php und fügt ganz oben folgendes ein:

<? include "header.php" ?>

und ganz unten fügt ihr folgendes ein:

<? include "footer.php" ?>

Das includieren müsst ihr auf all euren Textseiten tun.

Erklärung:
"<?" zeigt dem Browser, das PHP Code kommt.
"?>" zeigt dem Browser, das kein PHP Code mehr kommt.
"include "header.php" fügt nun der Inhalt der header.php an dieser Stelle ein.

Dann könnt ihr wieder alle in den rechten Bereich in Filezilla ziehen (also hochladen).

Schon habt ihr ein Layout auf eurer Page. Zuletzt müsst ihr jetzt nur noch eure Textseiten in die Navigation bringen. Öffnet dazu eure header.php und sucht folgenden Eintrag (ist ziemlich unten)

<a class="navi" href="#">Webmiss</a>

Nun ändert ihr diese Zeile einfach ab:

<a class="navi" href="webby.php">Webmiss</a>

So könnt ihr schließlich alle eure Textseiten verlinken.

Speichert die Datei, zieht sie wieder auf euren Server (in Filezilla) und klickt auf "Webmiss".

Hier könnt ihr euch die Dateien auch downloaden.
Einfach die pinkpearlinfo_tut1.zip entpacken und alle darin enthalten Dateien auf Filezilla "ziehen".

pinkpearlinfo_tut1.zip hier downloaden.