div-code aus einer text-datei auslesen und einfügen?
Hallo Leute,
Ich habe eine Website, welche in bestimmte Bereiche aufgeteilt ist. Diese Bereiche enthalten im Code auch gewisse Tags, wie zum Beispiel p oder span. Ich möchte aber, das man diese Inhalte bearbeiten kann ohne, dass man direkt die Html-Datei der Seite bearbeitet. Ich hatte mir das so vorgestellt, dass der Code, der in diesen Bereichen vorhanden ist, in einer anderen Datei gespeichert wird und die Haupt-Html-Datei liest dann diese Datei aus und nimmt den Inhalt und fügt ihn in die Bereiche ein. Ich bin offen für Javascript oä.
Danke im Voraus
2 Antworten
Ja, das ist die übliche Vorgehensweise: Daten werden von Markup strikt getrennt.
HTML selbst bietet dir hierfür lediglich object- oder iframe-Tag an.
Empfehlenswerter wäre es allerdings, eine Programmiersprache für diese Aufgabe zu nutzen. Dein HTML-Dokument musst du dafür in jedem Fall über einen Webserver ausspielen lassen.
a) Du schreibst dir das HTML-Dokument auf Serverseite zusammen.
Für diesen Anwendungsfall eignen sich Programmiersprachen wie PHP, C# (mit ASP.NET), JavaScript (auf nodeJS-Basis) oder Python (es gibt natürlich noch viele weitere Optionen).
Ein exemplarisches Beispiel mit PHP:
<?php $data = readDataFromFile("data.csv"); ?>
<!doctype html>
<title><?= $data["title"] ?></title>
<p><?= $data["text"] ?></p>
Wie du konkret Dateien auslesen kannst (das heißt, was in der Funktion readDataFromFile stehen müsste; dabei würde ich die Daten folgend in ein Array ablegen, so wie es mein Snippet oben nutzt), kannst du in der PHP-Dokumentation nachlesen. Wie es bei den anderen oben genannten Techniken abläuft, findest du wiederum in deren Dokumentationen.
Lerne am besten überhaupt erst einmal die Grundlagen einer geeigneten Programmiersprache, bevor du mit deinem konkreten Projekt startest.
b) Du holst dir die Daten clientseitig mit JavaScript und einem AJAX-Request.
Die Daten würde ich mir dazu im JSON-Format in einer JSON-Datei abspeichern, so ist es leichter, diese später zu parsen und an die einzelnen Texte heranzukommen.
Ein exemplarisches Beispiel:
<!doctype html>
<title>Example</title>
<h1 id="headline"></h1>
<p id="text"></p>
<script src="setData.js"></script>
setData.js:
function setText(elementId, value) {
document.getElementById(elementId).innerText = value;
}
const request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
const data = JSON.parse(this.responseText);
setText"headline", data["headline"]);
setText("text", data["text"]);
}
};
request.open("GET", "data.json", true);
request.send();
data.json:
{
"headline": "Welcome!",
"text" : "This is my website."
}
Der Nachteil an dieser Methode ist, dass die Webseite länger brauchen wird, ihre Inhalte zu laden, denn die werden ja erst nach dem Parsen der JSON-Datei nachträglich in die richtigen Stellen des DOM eingefügt. Zudem besteht eine essentielle Abhängigkeit darin, dass die Ausführung von JavaScript im Browser aktiviert/zugelassen ist.
omg ok sorry hab mir noch nicht ganz zu ende durchgelesen :D
Ich würde das über eine Datenbank lösen, nicht über Dateien. Das ist wesentlich kompfortabler.
Ich finde aber nirgendwo einen Hinweis auf den PHP-Befehl readDataFromFile. Auch nicht auf der php.net Seite