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

  • Bin ich da mit diesem Ansatz auf der richtigen Spur?

    Bist du. Du solltest den Dateien allerdings die Extension .html geben. Zum einen hast du in Editoren ein besseres Syntax-Highlighting und es sind ja auch HTML-Dateien. und so etwas

    bitte nicht, das geht auch einfacher:

    PHP
    <?php
    
    include("header.html");
    
    include("body.html");
    
    include("navigation.html");
    
    ?>
  • 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!

  • Wenn du in einer Datei, die per include eingebunden wird, weitere include- bzw. readfile-Befehle nutzen willst, dann muss die importierende Datei im Normalfall die Extension .php haben.


    Alles, was hier bisher besprochen wurde, sind absolut simple Grundlagen, die man sich alleine aneignen sollte. Dafür gibt es die Doku und Tutorials, und das massenhaft im Netz.

  • Wenn du in einer Datei, die per include eingebunden wird, weitere include- bzw. readfile-Befehle nutzen willst, dann muss die importierende Datei im Normalfall die Extension .php haben.

    Nein, aber sie muss eben mit include eingebunden werden, nicht mit require.

  • Warum so kompliziert. In den eingelesenen Dateien steht doch 'eh html-Quelltext. Du kannst


    Code
    <div class="article">
    ...
    </div>

    doch direkt in die thema1.html schreiben,als erste und letzte Zeile. Wobei das div-Element wohl gerne ein article-Element wäre.


    Oder das öffnende div (article) als letzte Zeile in die navigtion.html und das schließende div (article) als erste Zeile in die sidebox.

  • Oder das öffnende div (article) als letzte Zeile in die navigtion.html und das schließende div (article) als erste Zeile in die sidebox.

    Diese Variante finde ich nicht besonders gut. Es ist in der Regel besser, wenn man nach Möglichkeit öffnende und schließende Tags in einer Datei hat, da behält man besser die Übersicht.

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

  • Aufteilung ist ja schön und gut, aber du übertreibst es heftig.


    Und ob eine Datei existiert bzw. der Pfad richtig ist, kannst du leicht selber überprüfen:

    PHP
    <?php
    
       if (file_exists("./architecture/head.html"))
          readfile("./architecture/head.html");
       else
         die("Shit, ./architecture/head.html nicht gefunden");
    ?>
  • Bei deinem "Ordnerbaum" blicke ich nicht durch was da wo liegt - da fehlt (fast) jegliche Einrückung um das vernünftig erkennen zu können. Ich vermute aber mal dass du wirklich ../ brauchst um eine Eben höher zu kommen (in dem Link geht es um Links in HTML, ./ und ../ gilt auf Dateisystembasis aber genauso).

    PHP ist es völlig egal was da in welcher Datei steht, dass da einzelne HTML-Tags in einer Datei stehen interessiert PHP nicht - am Ende muss aber trotzdem valides HTML rauskommen sonst ist es ein Glücksspiel ob die Darstellung in den Browsern passt oder nicht. Einfach ein div offen lassen ist also nicht wobei dein wrapper-Div sowieso überflüssig ist, du hast bereits ein Element das die komplette Seite enthält: body. Aber dein raten woran es liegen könnte ist Blödsinn: schalte display_errors ein (oder schau ins Errorlog) und setze error_reporting hoch dann sagt dir PHP schon wo das Problem liegt.


    Außerdem halte ich das Stückeln für unübersichtlich und fehleranfällig, aber wenn du meinst … Was machst du wenn du für body mal ein Attribut (z.B. id oder class) brauchst?


    Auch ist dein HTML kaputt:

    • img ist ein leeres Element, </img> gibt es nicht (dito bei hr)
    • vergiss Attribute wie align (beim img)
    • img *muss* ein alt-Attribut haben
    • a darf kein button enthalten
    • im head fehlt ein meta-Element mit der Viewportangabe
    • <div class="sidebox"> klingt nach <aside>
    • <a id="pagetop"></a> ist Unsinn, ID für body oder zumindest ein Element ohne Bedeutung (span/div) reicht
    • <div class="wrapper"> ist Unsinn und </div> fehlt, siehe oben
  • 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 dürfte eigentlich nicht verraten, wie, so peinlich ist mir das.

    Das sollte dir auch peinlich sein einen simplen Syntaxfehler nicht an der Fehlermeldung gesehen zu haben bzw. bereits im Editor - meiner meldet mir da einen Syntaxfehler wenn vor dem "php" ein Leerzeichen kommt.

  • 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)?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!