Abonniere die Beiträge von PinkPearl Info

EMail Adresse hinzufügen

Teile dich mit!

Verwende den Hashtag #ppiupdate in den Sozialen Medien (wie zum Beispiel Twitter), um Besucher auf deine Updates aufmerksam zu machen.
Mehr Infos...

Samstag, 6. Oktober 2012

Ein weiter Weg? Vom Baukasten zu, FTP Server

lulu
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.
















8 Kommentare:

  1. Ich muss gestehen es stimmt tatsächlich. Es ist ein weiter Weg von Homepagebaukasten zu einer eigenen Seite, die du mit einem eigenen Editor selbst gestalten kannst, aber es ist machbar.
    Bei der Erklärung mit den Zeichen muss das erste zeichen statt so <? nicht so lauten <?php ?
    Aber ansonsten schöne Tutorial für Anfänger^^

    AntwortenLöschen
    Antworten
    1. es gibt unterschiedliche Tags mit denen man den PHP-Code einleiten und schließen kann. Bei <? handelt es sich um die Kurzform von <?php und muss - je nach PHP Version - erst in einer php.ini-Datei eingeschaltet werden. alsoo sollte man eher <?php verwenden ; )

      Schöner Artikel auch wenn ich mit bplaced keine guten Erfahrungen gemacht habe, mitunter lange Ladezeiten und an vielen Stellen sehr umständlich. Bin dann vo einiger Zeit zu Strato gewechselt, dort bekommt man für kleines Geld auch gleich richtig guten Service ; )

      Löschen
    2. Ja meine ich auch... weil <? kenne ich jetzt nicht so xDDD
      Ja mit bplaced habe ich keine guten erfahrungen gemacht, weswegen ich umgezogen bin. Musste lange warten bis mein Wallpaper hochgeladen war oder so und bei taess.net geht es schneller^^

      Löschen
    3. Auf Bplaced funktioniert auch "<?" Es ist schneller zum Schreiben =) Daher hab ich mir das angewöhnt ;D Aber es ist das Gleiche wie "<?PHP

      @Creeperz: Ich hatte eigentlich keine Probleme bei bplaced o.o Von Strato habe ich noch nie gehört =) Hört sich aber gut an. Nur der Kostenpunkt ist da halt da^^

      @Annis: s.o. xD

      Löschen
  2. Toller Blog, wie immer ^^
    Wobei ich mit meinen Servern recht zufrieden bin. Hab für mich beschlossen jetzt den Weg einzuschlagen der mir gefällt und das ich nicht unbedingt auf so einen Server muss :)

    Nun ich könnte schon zweimal schreiben xD
    Wenn ich darf ich würde ich mal was über Homepagesnamen schreiben.
    Jeder hat ja so seinen sehr eigenen Namen und eine Bedeutung ^^

    AntwortenLöschen
    Antworten
    1. dankeee <3
      Nöö, muss man ja auch nid Oo
      Oyla, bzw. nPage hat sich ja auch ziemlich gemaußert und reicht ja aus =)
      Hihi wenn du Lust und Zeit hast kannst du ruhig noch nen Gastpost schreiben xD

      Löschen
  3. Also, ich habe keine Ahnung von Programmieren und verstehe rein gar nichts ^^"
    Wozu benötige ich das FTP Programm?

    "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."
    Wo kommen die Textseiten her? Muss ich den Text nicht erst irgendwo eingeben...???

    Wie kann ich ein eigenes Design erstellen, anstatt ei fertiges zu benutzen? Einfach abändern geht ja auch nicht.

    Danke im Vorraus...

    AntwortenLöschen
    Antworten
    1. Die Textseiten hast du ja schon auf Oyla :D Nun erstellst du auf deinem Rechner eine webby.php. Das geht ganz einfach: gehe in den Explorer und dort mache dort rechtsklick: Neu: Textdocument. Diese bennenst du jetzt "webby".
      Die Datei heißt dann webby.txt. Jetzt lannst du rechtsklick auf die Datei machen: umbennen und statt .txt einfach .php hinschreiben :D
      Oder du öffnest deine Datei im Text Editor (einfach doppelklick auf deine webby.txt) und speicherst sie als .php ab (Datei: Speichern Unter:)

      Dann gehst du in deine Oyla Textseite. Zum Beispiel auf die webby. Dort kopierst du den ganzen Text raus und fügst ihn in der eben erstellen .php Datei ein.

      Das FTP Programm benötigst du, um deine Seite auf den Server zu laden. Sonst ist deine Seite ja auf dem jeweiligen Server nicht drauf. Ein FTP Programm erleichtert dir das. Du kannst dich dort leicht mit einem Server verbinden und dann deine gesamte Seite einfach drauf "ziehen"

      Bei Fragen einfach melden :*

      Löschen

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates