Universeller Seitenaufbau zum Importieren in alle Seiten?

Liebe Freunde,

Ich bin begeistert davon, wie übersichtlich alles durch das Inkludieren externer Texte via PHP in die Hauptseite wird. Ich kann den Artikel oder Bericht separat lagern und bearbeiten, ohne zig Zeilen in der Hauptdatei zu durchsuchen.

Nun möchte ich herausfinden, ob man mit PHP include nicht gar ganze Elemente zentral lagern und importieren kann! Lasst mich erklären, wie ich darauf komme, indem ich mein Problem schildere.

Meine Lernwebsite hat viele Seiten.

Index (Home)

Kategorie 1

Unterkategorie 1

Unterkategorie 2

Unterkategorie 3

Kategorie 2

Unterkategorie 1

Unterkategorie 2

Kontakt

About

Und je weiter die Seite wächst, desto mehr Seiten werden es. Ich möchte natürlich, dass alle Seiten, abgesehen vom Inhalt der <div content> gleich aufgebaut sind. Oben der header, dann die navigation, links seine Sidebar, rechts eine Sidebox, darunter eine Ad-Box, in der Mitte der Content, unten der Footer etc. Bislang habe ich die Indexseite nach meinen Belieben gestaltet. etliche Zeilen Code. Okay. Jetzt könnte ich hingehen, copy paste in alle weiteren Seiten. Bloß, dass der Content anders ist.

Was jedoch, wenn ich mich entscheide, bloß dieses eine Bisschen zu verändern? Den Platz von Boxen vertauschen oder etwas anderes? Müsste ich jede einzelne Seite bearbeiten und dort die Elemente manuell ändern? Ich meine, analog dazu dient CSS ja als die universelle Datei, sodass man alle Style-Geschichten auslagert in eine separate Datei, die dann für alle gültig ist.

Dasselbe schwebt mir vor mit dem generellen Aufbau. So stelle ich mir vor, dies zu lösen:

Ich lege einen Ordner "Architecture" an. Hier erstelle ich folgende beispielhafte Dateien:

header.txt

body.txt

navigation.txt

sidebox.txt

sidebar.txt

content_area.txt

footer.txt

jede dieser Dateien befülle ich mit den jeweiligen Scripts aus der ursprünglichen Index.html. Nur dass nun alles separiert ist.

Nun brauche ich jede weitere Seite nur noch anzuweisen:

<? php

include(header.txt)

?>

<? php

include(body.txt)

?>

<? php

include(navigation.txt)

?>

und so weiter und schon wird aus einer universellen Datei importiert. Wenn ich nun beschließe, der Navigation ein Element hinzuzufügen, so tue ich es in der universellen Datei und schon gilt das für alle anderen weiteren Seiten. Ob es 10, 100 oder 1000 seien.

Bin ich da mit diesem Ansatz auf der richtigen Spur?

Liebe Grüße

Wow genial,

danke für die schnelle Antwort. Werde mich gleich daran machen, es umzusetzen!

Ja, in der Tat ist momentan nur HTML geplant. Ist das readfile in diesem Sinne exakt anstatt des include zu setzen? Sprich:

<? php

readfile("header.html");

readfile("body.html");

readfile("...");

?>

Meintest du das so? Magst du auch kurz erläutern, warum include hier falsch oder unnötig wäre?

Lieben Dank

Nun eine Stufe weiter: kann man dem importierten Teil befehlen, wiederum etwas in sich hineinzuimportieren? Ich erkläre:

Ich habe einen Ornder "architecture" man könnte auch "structure" oder "base" etc nennen. Da sind alle Teile meiner Seite(n) als einzelne Dateien.

header.html

navigation.html

adbox.html

article.html

sidebox.html

etc etc etc

Ich habe einen weiteren Ordner der da z.B. heißt "txt", in dem ich meine Artikel als separate Dateien lagere.

thema1.html

thema2.html

thema3.html

thema4.html

etc etc etc

Diese Texte füge ich derzeit noch manuell in die Seiten, indem ich folgendes mache

<div class="article">

<? php

readfile("thema1.html")

?>

</div>

Jetzt frage ich mich, ob ich eine Seite so aufbauen kann, dass die Architektur komplett importiere UND dem importierten Part befehlen kann, eine bestimmte Datei in sich zu importieren. Ich stelle mir den Code IN ETWA! wie folgt vor:

<? php

readfile("header.html");

readfile("navigation.html");

include("article.html") readfile ("thema1.html");

readfile("sidebox");

readfile("adbox");

readfile("footer");

?>

Auf diese Weise hätte ich alles univer...salisiert? Und wäre auf jeden Fall wunschlos glücklich, da ich nun alles aus meinen zentralen Dateien aus steuern könnte.

Ich hoffe ich konnte meinen Wunsch verständlich äußern: Eine importierte Datei soll wiederum eine andere in sich importieren.

Lieben Dank!

Hmmm, da habe ich gar nicht drüber nachgedacht. Man könnte in der Tat die einzelnen Artikeldateien mit

<div class="article">

...

</div

versehen. So spare ich mir die ganze include Inception und importiere lediglich die thema1.html und habe bereits alles was ich brauche drin.

Liebe Freunde,

ich habe mich nun recht lange mit dem "include" "readfile" und "require" herumgeschlagen aber ich bekomme als Ergebnis lediglich eine leere Seite. Dies kann eigentlich nur zwei Ursachen haben. 1) ich gebe den Pfad falsch an oder 2) ich habe die Aufteilung der Seitenarchitektur falsch gemacht. Ich möchte euch nun eine ausführliche und 1:1 getreue Situation meines offline-Ordners aufführen. Vielleicht fällt jemandem ja ein schwerwiegender Fehler auf.

1. Ordnerbaum

mywebsite

      index.php

      format.css

      /architecture

adbox.html

articleopen.html

articleclose.html

bodyopen.html

bodyclose.html

buttontop.html

footer.html

head.html

header.html

mainnav.html

pagetop.html

sidebox.html

wrapperopen.html            

/pages

page1.php

page2.php

about.php

/txt

article1.txt

article2.txt

/img

img1.jpg

img2.jpg

2. Index

Der Index dient mir als Vorlage. Er sieht meines Erachtens für den Anfang gut aus. Also habe ich seine einzelnen Elemente in die jeweiligen Dateien im Ordner "architecture" aufgeteilt. Der Index sieht so aus:

<!doctype html>

<html lang="de">

<head>

<meta charset="utf-8">

<title>Home</title>

<link rel="stylesheet" href="format.css">

</head>

<body>

<a id="pagetop"></a>

<div class="wrapper">

<header class="main-head">

<img src="img/sit-twist.jpg"></img>

</header>

<nav class="main-nav">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="...">Topic1</a>

<ul>

<li><a href="...">Subtopic1</a> <ul>

<li><a href="...">Subsubtopic1</a></li> <li><a href="...">Subsubtopic2</a></li>

</ul>

</li>

<li><a href="...">Subtopic2</a></li> </ul>  

</li>

<li><a href="...">Topic2</a>

<ul>

<li><a href="...">Subtopic1</a></li>

<li><a href="...">Subtopic2</a></li>

<li><a href="...">Subtopic3</a></li>

</ul>

</li>

<li><a href="...">Topic3</a></li>

<li><a href="/pages/about.php">About</a></li>

</ul>
</nav>

<article class="content">

<h2>Home</h2>

<hr></hr>

<img src="img/img1.jpg" width="20%" align="left" hspace="20px" vspace="20px"</img>

<p><a href="#pagetop"><button id="buttontop" title="back to top">Back to top</button></a></p>

</article>

<div class="sidebox">

<img src="img/img2.jpg"></img>

<h3>About</h3>

<p>Read <a href="...">more...</a></p>

</div>

<div class="adbox">

<p></p>

</div>

<footer class="main-footer">

<p>Copyright 2020</p>

</footer>

</body>

</html>

3. Die Architekturdateien im "architecture"-Ordner

Die in Punk 2. aufgeführte Indexstruktur habe ich nach meinem Verständnis so aufgebrochen, dass wenn ich die einzelnen Elemente später durch reihenfolgenmäßiges Includen aneinanderreihe, wieder diese Aufbau zustande kommt. Ich habe die Dateien wie folgt mit Inhalt versehen:

head.html

<head>

<meta charset="utf-8">

<title>Home</title>

<link rel="stylesheet" href="format.css">

</head>

bodyopen.html

<body>

pagetop.html

<a id="pagetop"></a>

wrapperopen.html

<div class="wrapper">

header.html

<header class="main-head">

<img src="img/img1.jpg"></img>

</header>

mainnav.html

<nav class="main-nav">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="...">Topic1</a>

<ul>

<li><a href="...">Subtopic1</a>

<ul>

<li><a href="...">Subsubtopic1</a></li>

<li><a href="...">Subsubtopic2</a></li>

</ul>

</li>

<li><a href="...">Subtopic2</a></li>

<ul>

<li><a href="...">...</a></li>

</ul>

<li><a href="...">...</a></li>

</ul>

</li>

<li><a href="...">...</a>

<ul>

<li><a href="...">...</a></li>

<li><a href="...">...</a></li>

<li><a href="...">...</a></li>

</ul>

</li>

<li><a href="...">Image Gallery</a></li>

<li><a href="/html/about.php">About</a></li>

</ul>

</nav>

articleopen.html

<article class="content">

buttontop.html

<p><a href="#pagetop"><button id="buttontop" title="back to top">Back to top</button></a></p>

articleclose.html

</article>

sidebox.html

<div class="sidebox">

<img src="img/img2.jpg"></img>

<h3>About</h3>

<p>Read <a href="...">more...</a></p>

</div>

adbox.html

<div class="adbox">

<p></p>

</div>

footer.html

<footer class="main-footer">

<p>Copyright 2020</p>

</footer>

bodyclose.html

</body>

Wenn man nun alle Dateien in dieser Reihenfolge aneinanderheftet, erhält man die exakte Struktur der oben aufgeführten und funktionierenden index.php

4. Testseite und Include

Nun erstelle ich eine leere Seite im /pages Ordner welche ich "testinclude.php" nenne. Ich formatiere sie direkt zu Beginn als .php, denn ich plane mit PHP die Elemte aus dem Architekturordner zu importieren. Einige immer wiederkehrende Elemente wie das Doctype behalte ich bei, denn die sind unveränderbar. Lediglich die Elemente, welche ich später vielleicht modifizieren möchte, habe ich in die Architekturdatein ausgelagert. Die testinclude.php Seite sieht nun wie folgt aus:

<!doctype html>

<html lang="de">

<? php

readfile("./architecture/head.html");

readfile("./architecture/bodyopen.html");

readfile("./architecture/pagetop.html");

readfile("./architecture/wrapperopen.html");

readfile("./architecture/header.html");

readfile("./architecture/mainnav.html");

readfile("./architecture/articleopen.html");

readfile("./architecture/buttontop.html");

readfile("./architecture/articleclose.html");

readfile("./architecture/sidebox.html");

readfile("./architecture/adbox.html");

readfile("./architecture/footer.html");

readfile("./architecture/bodyclose.html");

?>

</html>

Wenn ich die Seite so speichere und versuche aufzurufen, so erhalte ich eine durchweg leere, weiße Seite.

Problemvermutung 1: Pfad

Da die Seite im /pages Ordner liegt, die zu importierenden Dateien in einem anderen Ordner auf derselben Ebene, benutze ich einen relativen Pfad. Also ./ um den Ordner in die höhere Ebene zu verlassen und /architecture um in den Architekturordner zu gelangen. Zum Schluss dann die jeweilige Datei.

Ergo: "./architecture/datei.html".

Ich las in Foren, dass man den Ordner mit zwei Punkten verlässt. Ist das richtig? Also "../architecture/datei.html"?

Problemvermutung 2: CSS

Die CSS Datei befindet sich wie die Index.php im Rootverzeichnis also an oberster Ebene. In der Index.php verweise ich auf Stylesheet "format.css" also ohne Pfadangabe. Das lässt die Datei vermuten, dass die CSS Datei im selben Verzeichnis ist. Das stimmt ja aber nur bei der index.php. Alle anderen Seiten befinden sich im /pages Ordner.

Lösungsvermutung: Ich kann mir vorstellen, dass ich eine Architekturdatei erstellen muss, welche explizit stylesheet als "./format.css" ansteuert, da man ja wieder erst mit ./ aus dem Ordner in die Rootebene heraustreten muss.

Problemvermutung 3: Aufteilung

Vielleicht ist die Aufbröselung der Architektur schlichtweg falsch und PHP kann mit diesen Schnipseln nichts anfangen.

Problemvermutung 4: Wrapper

Ich sehe, dass ich nur <div class="wrapper"> habe, welcher für mein CSS wichtig ist. Allerdings habe ich diesen div nie mit </div> beendet. Zwar funktioniert das in der gesamtheitlichen index.php aber vielleicht verursacht das ja beim Importieren diese Darstellungsprobleme.

Ich hoffe, dass ich mein Problem ausführlich genug beschrieben habe und hoffe sehr, dass erfahrenen Leuten sofort mein Patzer ins Auge springt.

Leider hat das mit dem Einrücken beim Erstellen des Posts wunderbar geklappt aber beim Absenden ist alles wieder an den Zeilenanfang gerückt. Da entschuldige ich mich für und versuche das übersichtlicher zu gestalten.

An der HTML werde ich gemäß deinen Tipps feilen. Aber darf ich davon ausgehen, dass die Testseite die alles importiert hat formell richtig ist?

Okay. Wow. Wer hätte das gedacht. All das Chaos wurde behoben. Ich dürfte eigentlich nicht verraten, wie, so peinlich ist mir das.

Ich habe

<? php (also mit Leertaste zwischen ? und php)

statt

<?php (also zusammen)

verwendet.

...Herrje...

Ich schreibe derzeit in Atom aber wirklich erstellt habe ich die Codes im ganz banalen leeren Editor ohne jegliche Warn- oder Fehlermeldungen.

m.scatello mir macht noch die Phrase zu denken, dass ich es heftig übertreibe. Irgendwie kam es mir vor, als sei das noch nicht genug.

Bin ich denn etwa auch mit diesem Ansatz auf dem Falschen Dampfer, wenn ich eine universelle Struktur haben möchte?

Angenommen:

Meine Website hat mittlerweile 500 Seiten. Abgesehen vom Inhalt in der content-area sehen die alle gleich aus. In der Sidebox steht immer dasselbe, in der Adbox ist immer derselbe Link.

Nun will ich lediglich das Bild in der Sidebox durch ein anderes austauschen und einen weiteren Link hinzufügen, weil mal wieder ein neues Social Media groß rausgekommen ist. Natürlich renne ich nicht hin und editiere alle 500 .html Dateien oder?

Da schien mir mein Aufbau geeignet für zu sein. Ich editiere lediglich die sidebox.html im /architecture Ordner und alle 500 Seiten haben ja eh die Aufgabe, die sidebox.html zu importieren. Eine Änderung wird also bei allen wirksam. Und so verfahre ich mit der gesamten Struktur der Seite.

Ich möchte jetzt erstmal nicht weitergehen in Richtung Datenbanken, MySQL usw. Eigentlich wollte ich eher eine Basic-Seite bauen. OK gemacht. Und okay mich etwas mit PHP austoben. Aber das wärs auch schon.

Was WÄRE denn eurer Meinung nach der gängige Weg, eine solche "universelle" Struktur zu erschaffen, die man bequem auf alle weiteren Folgeseiten projeziert (seien es hunderte oder gar tausende)?