Die Idee – Warum eine eigene Webseite?
Seit ich meine Hütte am Robmen im Mürtschental betreibe, hatte ich den Wunsch, eine eigene Webseite zu erstellen. Sie sollte nicht nur Informationen zur Hütte und Umgebung bieten, sondern auch nützliche Funktionen enthalten – z. B. eine Wetterstation-Anzeige, welche ich als Minorarbeit gebaut habe, eine Galerie einen interaktiven Routenplaner und ein Buchung und Bewertungssystem.
Doch die grosse Frage war: Wie setze ich das Ganze technisch um?
Zuerst habe ich WordPress ausprobiert, weil es als einfache Lösung für Webseiten bekannt ist. Aber schnell stellte ich fest, dass es nicht so intuitiv war, wie ich gedacht hatte. Viele Funktionen waren an Plugins gebunden, und wenn ich spezielle Anpassungen machen wollte, musste ich tief in den PHP- und CSS-Code eingreifen.
Also entschied ich mich, die Seite von Grund auf selbst zu coden – mit HTML, CSS und JavaScript!
Der technische Aufbau – Vom Code zur Webseite
Mein Ziel war es, eine strukturierte und moderne Webseite zu bauen, die schnell lädt und einfach zu bedienen ist. Hier sind einige der wichtigsten Features, die ich umgesetzt habe:
- Startseite mit Infos über die Hütte & das Mürtschental
- Wetterdaten und Webcam in Echtzeit (Live-Dashboard + Vorhersage von Obstalden) mithilfe von Iframe
- Interaktiver Routenplaner mit Kartenintegration von Komoot
- Galerie mit Slideshow-Effekt für Landschaftsbilder & Wetterstation
- Buchungssystem und Bewertungssystem
- Herunterladen von Geotiff vom Gelände
Ich habe verschiedene JavaScript-Bibliotheken verwendet, um bestimmte Funktionen zu verbessern, darunter:
- Leaflet.js für interaktive Karten
- Swiper.js für die Bildergalerie
- Fetch-API & iFrames für externe Wetterdaten
Dabei war ChatGPT eine riesige Hilfe! Allerdings musste ich lernen, die richtigen Fragen zu stellen und mein Problem genau zu beschreiben, um präzise und funktionierende Antworten zu erhalten. Ausserdem war es hilfreich bereits den MinorNT besucht zuhaben, um die Code Struktur zu verstehen und zu bearbeiten
Herausforderungen & Learnings – Was nicht sofort funktioniert hat
Natürlich lief nicht alles sofort reibungslos. Besonders knifflig war der Routenplaner, den ich ursprünglich selbst programmieren wollte. Ich hatte geplant, dass der Benutzer Start- und Zielpunkte setzen kann und die Route dann berechnet wird.
Doch es gab mehrere Probleme:
– Falsche Pfade in der Ordnerstruktur
– Fehlende Karten- und Höhenmeter-Daten für kleine Wanderwege
– API-Authentifizierung war kompliziert & hatte Limitierungen
– Berechnung der Wege war ungenau und oft nicht durchführbar
Letztendlich entschied ich mich für eine vereinfachte Lösung mit vordefinierten Routen von Komoot, was besser funktionierte. Die Falschen Pfade habe ich dann nach langem suchen und probieren erkannt.
HTML vs. WordPress – Mein persönlicher Vergleich
Nachdem ich beide Methoden ausprobiert habe, kann ich sagen:
Ich bevorzuge das direkte Coden mit HTML, CSS & JavaScript.
- Mehr Kontrolle über das Design & die Funktionen
- Kein Ballast durch unnötige Plugins
- Schnellere Ladezeiten & weniger Serverbelastung
Allerdings muss ich zugeben, dass WordPress mit der Zeit einfacher wurde, nachdem ich einige YouTube-Tutorials angeschaut habe. Dennoch hätte ich ohne HTML- & JavaScript-Kenntnisse viele Dinge nicht umsetzen können.
PHP Bildgalerie erstellen
Eine dynamische Bildergalerie mit PHP ermöglicht es, Bilder hochzuladen, anzuzeigen und zu verwalten. Zunächst wird eine saubere Verzeichnisstruktur erstellt, die aus einem uploads/-Ordner für die hochgeladenen Bilder sowie den Hauptdateien index.php (Galerieansicht), upload.php (Bild-Upload), styles.css (Design) und footer.php (wiederverwendbarer Footer) besteht.
Für den Upload wird ein HTML-Formular erstellt, mit dem Benutzer Bilder auswählen und auf den Server hochladen können. Das Formular sendet die Dateien an ein PHP-Skript, das sie speichert und überprüft. Das PHP-Skript verarbeitet die hochgeladene Datei, prüft den Dateityp und speichert sie im uploads/-Ordner. Falls das Verzeichnis nicht existiert, wird es automatisch erstellt. Um die Sicherheit zu gewährleisten, sind nur sichere Dateiformate wie JPG, PNG und GIF erlaubt. Um Namenskonflikte zu vermeiden, wird jedem Bild eine eindeutige ID zugewiesen. Nach dem erfolgreichen Hochladen erscheint eine Bestätigungsmeldung.
Damit die Galerie automatisch aktualisiert wird, scannt die index.php-Seite den uploads/-Ordner und zeigt alle vorhandenen Bilder in einem Galerie-Layout an. Die Gestaltung wird mit CSS verbessert, indem die Bilder in einem flexiblen Raster-Layout dargestellt werden. Jedes Bild erhält einen Rahmen, eine Vorschaugröße und eine Hover-Animation für eine ansprechende Darstellung.
Um die Nutzererfahrung weiter zu verbessern, kann eine Lightbox-Funktion eingebaut werden. Damit können Bilder im Vollbildmodus geöffnet werden, indem ein Overlay eingeblendet wird. Beim erneuten Klicken schließt sich das Bild wieder.
Ein weiterer wichtiger Bestandteil ist die footer.php-Datei, die das aktuelle Jahr, Navigation und Copyright-Hinweise enthält. Diese wird auf jeder Seite mit PHP-Includes eingebunden, sodass Änderungen an einer zentralen Stelle für die gesamte Webseite übernommen werden.
Diese PHP-Bildergalerie ist nicht nur einfach zu verwalten, sondern kann auch erweitert werden, beispielsweise mit einem Login-System, einer Suchfunktion für Bilder oder einer Datenbank-Anbindung, um Metadaten wie Bildtitel und Beschreibungen zu speichern. Mit diesen Funktionen entsteht eine moderne, dynamische Galerie, die flexibel, erweiterbar und benutzerfreundlich ist.
