Software installieren
XAMPP
Theoretisch brauchen wir neben unserem Internetbrowser kein zusätzliches Programm, um eine Website zu erstellen. Praktisch sieht das jedoch etwas anders aus.Browser wie Firefox, Chrome und Edge lesen HTML, CSS und Javascript und wandeln dies in eine visuelle Darstellung um. Wenn wir z.B. eine "index.htm" (die Endung steht für html) anlegen, können wir diese im Browser öffnen (Rechtsklick -> Öffnen mit...) und bekommen die komplette Website zu sehen. Aber die Möglichkeiten damit, eine Website zu erstellen, sind stark eingeschränkt. Auf jeder Seite müsste das gesamte Layout in der Datei stehen. Jetzt stellt euch vor, ihr habt 30 Unterseiten und möchtet eine Seite in der Navigation hinzufügen. Ihr müsstet jede einzelne Seite aufrufen und das Design anpassen.
Damit wir das nicht tun müssen, verwenden wir PHP für unsere Website. Aber unser Browser kann kein PHP. Deshalb brauchen wir ein Zusatzprogramm: XAMPP.
XAMPP erzeugt einen "localhost", der es uns ermöglicht, einen lokalen Server anzulegen. Quasi ein Offline-Webspace auf unserem Rechner.
Ladet euch die neueste XAMPP-Version runter und installiert sie.
Bei der Installation werdet ihr wahrscheinlich nicht alle Funktionen brauchen. Ich z.B. programmiere nicht in Perl und brauche daher auch keine Unterstützung davon. Für FTP nutze ich Filezilla separat. Tomcat (wohl etwas für Java) und Mercury Mail Server kenne ich nicht, aber brauche es auch nicht. Was ihr aber auf jeden Fall braucht sind Apache, MySQL und phpmyadmin! Wenn ihr euch unsicher seid, könnt ihr auch einfach alles ausgewählt lassen.
Im nächsten Schritt wählt ihr als Pfad "C:\xampp" aus, wenn nicht schon so angegeben.
Jetzt seid ihr auch schon fertig, XAMPP ist installiert. Um euren Server zu starten, klickt einfach neben "Apache" auf starten. Um eure Datenbank zu starten, klickt auf "starten" neben "MySQL". Damit das beim nächsten Start von XAMPP automatisch passiert, klickt rechts auf Konfig. Unter "Module automatisch starten" kreuzt ihr Apache und MySQL an. Legt am besten noch eine Verknüpfung auf dem Desktop an, falls ihr dies noch nicht getan habt. Und... fertig installiert!
Eure Websiten legt ihr unter C:\xampp\htdocs an. Für "Momokos MahoDou" könnte das zum Beispiel "mahodou" sein, also C:\xampp\htdocs\mahodou. Legt zum ausprobieren am besten mal den Ordner "beispiel" an. Erstellt dann eine Textdatei (Rechtsklick -> Neu -> Textdokument) und benennt es in index.htm um (Achtet darauf, dass dahinter kein .txt steht!). Öffnet die Datei und schreibt etwas hinein, z.B. Hallo Welt! Wenn ihr jetzt euren Browser öffnet und dort in die Adressleiste localhost/beispiel eingebt, sollte euch der Inhalt der Datei angezeigt werden.
Eure Startseite heißt immer index. Entweder index.htm oder index.html oder index.php. Der Index wird angezeigt, wenn keine genaue Datei im Ordner angegeben ist, also wie bei localhost/beispiel oder localhost/beispiel/unterordner. Der Browser macht daraus automatisch localhost/beispiel/index.htm beziehungsweise localhost/beispiel/unterordner/index.htm.
Und das war's auch schon. Falls noch nicht alles klar ist, macht das nichts. Denn spätestens beim richtigen Erstellen der Website werden die restlichen Fragen auch geklärt :)
Filezilla
Wenn ihr euren Webspace habt, ist es an der Zeit, ihn zu nutzen. Dafür braucht ihr ein Zusatzprogramm, das FTP kann. FTP steht für "File Transfer Protocol", also "Dateiübertragungsprotokoll". Damit kann man Dateien von seinem Computer auf den Webspace hochladen. Übrigens steht HTTP, was immer vor den URLs in der Adressleiste steht, für "Hypertext Transfer Protocol". Beides sind also Protokoll-Arten. Das aber nur am Rande, damit ihr eine ungefähre Ahnung habt, was wir tun.Ich nutze für FTP immer . Natürlich könnt ihr auch andere Programme nutzen, aber da ich nie ein anderes verwendet habe, werde ich euch erklären, wie ihr Filezilla einrichtet.
Installiert euch zunächst Filezilla von der offiziellen Website. Öffnet dann das Programm und euch sollte folgende Benutzeroberfläche angezeigt werden:
Nun legen wir eine Verbindung an. Theoretisch kann man die Zugangsdaten auch oben in die Felder eintragen, aber wir wollen es ja nicht ständig wiederholen, oder?
Dazu klickt ihr als erstes oben links auf das Symbol. Dann auf "Neuer Server". Benennt euren Server wie ihr wollt und tragt rechts die Zugangsdaten ein. Wenn ihr bei eurem Hoster noch keinen FTP-Account angelegt habt, müsst ihr dies spätestens jetzt tun. Falls ihr bei lima-city seid, findet ihr dies unter "FTP-Zugang" und dort sind auch noch weitere Anweisungen, welche Verbindungstypen ihr auswählen sollt (Z.B. "Die Verschlüsselung sollte mit "Explizites FTP über TLS erfordern" erzwungen werden.").
Seid ihr fertig, klickt ihr auf ok. Nun könnt ihr auf das kleine Dreieck neben dem Symbol oben links klicken und es öffnet sich ein Dropdown-Menü mit dem gerade angelegten Server. Wenn ihr darauf klickt, wird die Verbindung aufgebaut und in dem rechten Feld das Dateiverzeichnis des Webservers angezeigt. Was genau dort beim ersten Start drin ist, ist vom Hoster abhängig. Manchmal gibt es schon vorgefertigte htaccess-Dateien oder Ordner.
Um Dateien auf den Webserver zu kopieren, müsst ihr sie links nur doppelklicken oder rüberziehen. Ihr könnt auch Dateien direkt aus eurem Explorer in das rechte Feld ziehen.
Kleiner Tipp: Das zweite Symbol von rechts aktiviert den synchronisierten Verzeichniswechsel. Wenn ihr im linken Feld z.B. in einen Ordner geht, tut das Programm dies auch im rechten Feld, sofern es einen Ordner mit dem gleichen Namen gibt. Sehr praktisch!