Webseite - Eine "View" definieren und dort verschiedene Inhalte laden lassen?

... komplette Frage anzeigen

4 Antworten

Was du suchst, ist ein Website-Aufbau mit dynamischem Content.

https://css-tricks.com/dynamic-page-replacing-content/

Ein Tutorial mit Files zum herunterladen und nachvollziehen.

Wenn es sich bei dem dynamischen Inhalt um den Hauptinhalt der Webseite handelt (also den Sub-Seiten), dann ist mMn die größte Schwierigkeit, immer die Website-URL aktuell zu halten, deswegen kommen in dem Tutorial neben jQuery auch noch ein paar weitere Plugins zum Einsatz.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von MoinMoin2014
19.05.2016, 14:43

HA! Genau das selbe hatte ich gerade probiert! Nachvollzogen habe ich es und auch nachgeahmt, jedoch funktioniert das bei mir nicht so ganz, aber da muss ich mich noch weiter reinarbeiten, aber fettes Dankeschön! :)

0

Da gibt es viele Möglichkeiten.

Du kannst zum Beispiel den Inhalt von Bilder mit der Funktion

$inhalt=file_get_contents('dateiname.html') einlesen und anschließend mit echo ausgeben.

Die eingelesene Datei sollte keine <HEAD>,<BODY> oder <HTML> enthalten, dise hast Du ja schon im Footer, Header definiert.

Noch einfacher geht es mit include().

Nun möchtest Du aber das die Navigation stehenbleibt und nur der Inhalt wechselt. Das macht man mit sogenannten AJAX Calls. JQuery bietet ein gutes Framework dazu. Hierzu rufts du per Javascript ein PHP Script per Ajax Request auf und und als Response kriegst du den Inhalt der Website, den du anschließend in den DOM Tree per Javascript einfügst. Die Aktivierung des Menues kannst  auch mit JavaScript/Jquery ganz einfach machen.

Antwort bewerten Vielen Dank für Deine Bewertung

Das, was du suchst, nennt sich Templating. Es gibt da ganz verschiedene Engines, die dir das ermöglichen (Closure SoyNunjucks, Marionette/Backbone, AngularJS, etc.) oder du machst das selbst.

Grundsätzlich arbeitest du mit oft Platzhaltern, die dann durch die Daten aus dem Template (HTML-Datei, Datenbankdatensatz, json/xml) ersetzt werden.

HTML:

<!DOCTYPE html>
<html>
<head>
    <!-- Head -->
</head>
<body>
    <header>{{Header}}</header>
    <nav>{{Navigation}}</nav>
    <main>{{Content}}<main>
</body>
</html>

So könnte das beispielsweise aussehen.

Es gibt die Möglichkeit, die Templates auch direkt im HTML-Dokument zu erstellen: http://codepen.io/Minilexikon/pen/zqVWLE

Wenn du mit einem Objekt arbeiten willst, sieht das so aus: http://codepen.io/Minilexikon/pen/NNZYeG

Ansonsten gibt es auch noch sogenannte HTML-Precompiler wie Jade oder Haml.

Antwort bewerten Vielen Dank für Deine Bewertung

Am besten mit JavaScript und einem AJAX aufruf. Das ganze kannst du mit der JavaScript-Bibliothek jQuery relativ einfach umsetzen.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von MoinMoin2014
19.05.2016, 14:28

Ich bin schon an was ähnlichem am werkeln, kann sein, dass ich's gleich habe, dennoch danke

0
Kommentar von MoinMoin2014
19.05.2016, 14:31

Genauere Instruktionen wären jedoch hilfreicher :)

0

Was möchtest Du wissen?