Wie kann ich das in html gut darstellen?

PWolff  09.06.2023, 22:01

So was geht nicht mit HTML allein. Willst du Antworten lediglich zur HTML-Oberfläche oder für ein Komplettsystem?
herotown34665 
Fragesteller
 09.06.2023, 22:45

Auch CSS und Javascript wenn nötig.

Es musst nicht soviel mit css gearbeitet werden, da ich es noch auf mein Bedürfnis anpassen will. Es soll nur diese Funktionen haben.

1 Antwort

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, Webentwicklung
10.06.2023, 02:11
Wie kann ich ein Input search intigieren, die Inhalte aus den Beiträgen durchsucht und das Eingabe Feld auf der Übersicht mit allen Beiträgen ist.

Du müsstest die zu durchsuchenden Beiträge zuerst einmal zusammensuchen/indizieren. Im besten Fall sind sie in einer Datenbank gespeichert.

Wenn man einmal davon ausgeht, dass es mehr als nur ein paar hundert Beiträge gibt, wäre eine Bibliothek wie Lucene ziemlich hilfreich oder für noch komplexere Systeme Search-Engines wie z.B. Solr oder Sphinx.

Auf der Webseite müsstest du lediglich ein Formular mit Eingabefeld platzieren.

Beispiel:

<form>
  <label for="query">Search for:</label>
  <input id="query" name="query">
  <button>Start search</button>
</form>

Die Eingabe wird zur Serveranwendung geschickt, wo du die Eingabe validierst und an die Search Engine weiterreichst. Die Ergebnisse kannst du anschließend aufbereiten und im Response zurückgeben.

Für eine Umsetzung benötigst du folglich nicht nur HTML-Kenntnisse. Um die Webanwendung zu bauen, die die Logik umsetzt, brauchst du eine Programmiersprache und dazu evt. noch ein Webframework (z.B. C# mit ASP.NET, Java mit Spring MVC oder Jakarta EE, PHP, Ruby (on Rails), o.ä.).

Wenn die Suche dynamischer ablaufen soll (ohne notwendiges Neuladen der Seite), wären zudem noch JavaScript-Kenntnisse erforderlich. Auf das Eingabefeld kann man einen Event Listener setzen, um bei Eingabe einen AJAX-Request mit dem Suchbegriff an den Server abzuschicken. Der Server könnte die Ergebnisdaten als HTML-String oder im JSON-Format zurückgeben. Das Skript müsste dieses Ergebnis in das DOM einbauen.

Minimal-Beispiel:

<form>
  <label for="query">Search for:</label>
  <input id="query" name="query">
</form>
<section id="results"></section>
<script>
  const results = document.getElementById("results");
  const searchInput = document.getElementById("query");
  searchInput.addEventListener("input", () => {
    const searchword = searchInput.value;
    const requestUrl = `/search?${new URLSearchParams({ query: searchword }).toString()}`;
    fetch(requestUrl)
      .then(response => response.html())
      .then(html => results.innerHTML = html);
  });
</script>

Dies sollte am besten noch mit Debouncing-Mechanismen und Filter-/Validationsmechanismen erweitert werden. Beispielsweise ist eine Suche in der Regel erst ab zwei bis drei Buchstaben sinnvoll oder bei sich ändernden Suchanfragen kann man den zuvor abgefeuerten Request mit einem AbortController vorzeitig abbrechen.

Des Weiteren solltest du dir Gedanken darüber machen, wie viele Beiträge bei einer Suche direkt zurückgegeben werden sollen und wenn nicht alle, wie weitere Beiträge erreichbar sind (Stichworte: lazy loading, pagination).

Dazu sollte es, wenn möglich, eine Möglichkeit geben den Inhalt ein Lesezeichen zu geben, das man nur selbst sieht, wenn möglich ohne Login.

Du kannst alle gemerkten URLs (oder besser: Die Beitrags-IDs / relative Adressen, mit denen sich die jeweilige Beitrags-URL ermitteln lässt) als JSON-Array mit JavaScript in einem Cookie speichern. Wie du mit Cookies arbeiten kannst, wird auf dieser Seite erklärt. Grundlagenkenntnisse in JavaScript sind vorausgesetzt.

Jede Beitragsbox bekommt einen Button, die Beitrags-ID könnte in einem data-Attribut stehen. Ob der Beitrag schon in der Merkliste steht, müsste man beim Erzeugen des Buttons ermitteln und dementsprechend einen Zustand setzen.

Beispiel:

<button data-bookmarked="false" data-id="123">Add</button>

Jeder Button bekommt des Weiteren einen Event Handler für das click-Event zugewiesen. In dem muss der Cookie aktualisiert werden.

const button = evt.currentTarget;

if (button.dataset.bookmarked === "false") {
  let bookmarks;

  try {
    bookmarks = new Set(JSON.parse(getCookie("bookmarks")));
  }
  catch (ex) {
    bookmarks = new Set();
  }

  bookmarks.add(button.dataset.id);
  setCookie(JSON.stringify(bookmarks));
  button.dataset.bookmarked = true;
  button.textContent = "Remove";
}
else {
  let bookmarks;

  try {
    bookmarks = JSON.parse(getCookie("bookmarks"));
  }
  catch (ex) {
    bookmarks = [];
  }

  bookmarks = bookmarks.filter(bookmark => bookmark !== button.dataset.id);
  setCookie("bookmarks", JSON.stringify(bookmarks), 365);
  button.dataset.bookmarked = false;
  button.textContent = "Add";
}
Zusätzlich noch eine Funktion für light/Dark Mode, wie kann ich machen, dass der aktuelle Mode gespeichert wird und bei erneuten Aufruf der Seite wieder eingestellt wird.

Auch diese Information kann in einem Cookie gespeichert werden. Für die Toggle-Komponente könnte man eine Checkbox nehmen.

const root = document.querySelector("body");
const toggle = document.getElementById("toggle");
toggle.addEventListener("change", () => {
  if (toggle.checked) {
    root.classList.add("dark");
  }
  else {
    root.classList.remove("dark");
  }

  setCookie("theme", +toggle.checked, 365);
});

Wenn die Seite geladen wird, liest du den Cookie aus und setzt je nach gemerkten Wert eine Klasse auf dem Root.

window.addEventListener("DOMContentLoaded", () => {
  const darkMode = parseInt(getCookie("theme") || 0);

  if (darkMode === 1) {
    root.classList.add("dark");
    toggle.checked = true;
  }
  else {
    root.classList.remove("dark");
    toggle.checked = false;
  }
});
herotown34665 
Fragesteller
 10.06.2023, 08:26

Ich würde mit meinen Kenntnissen nur den light/dark Mode hinbekommen.

Hast du da vielleicht auch ein HTML und CSS Code den ich zum ausprobieren nehmen kann?

Ist das auch möglich ohne Cookies, wenn nicht, von wo soll ich mir ein Banner holen?

Oder muss ich den Cookie für den Mode selbst machen?

0
regex9  10.06.2023, 09:06
@herotown34665
Hast du da vielleicht auch ein HTML und CSS Code den ich zum ausprobieren nehmen kann?
<!doctype html>
<title>Example</title>
<style>
  body { background: white; color: black }
  .dark { background: black; color: white }
</style>
<body>
  <label>Toggle <input id="toggle" type="checkbox"></label>
  <script>/* js script ... */</script>
</body>
Ist das auch möglich ohne Cookies, (...)

a) Man kann die Daten auch im Web Storage speichern. Eine Info für den Nutzer braucht es trotzdem.

b) Du kannst die Daten serverseitig speichern (z.B. in einer Session oder in einer Datei/Datenbank). Damit du die gespeicherten Daten dem jeweiligen Nutzer zuordnen kannst, braucht es eine Authentifikation.

c) Beziehe dich auf die Browsereinstellungen des Nutzers. Die kannst du mittels des CSS Media Queries prefers-color-scheme ermitteln.

Beispiel:

@media (prefers-color-scheme: light) {
  body { background: white; color: black }
}
@media (prefers-color-scheme: dark) {
  body { background: black; color: white }
}

Mehr dazu findest du unter anderem hier.

d) Verzichte auf eine persistente Speicherung der Einstellungen.

(...) von wo soll ich mir ein Banner holen?

Es gibt zahlreiche Cookie-Banner-Anbieter. Consent Manager, CookieYes, OneTrust, TrustArc, ... passende Suchbegriffe für eine eigene Recherche in Kombination wären consent manager tools.

Oder muss ich den Cookie für den Mode selbst machen?

Den Cookie musst du selbst über die DOM-API anlegen. Genaueres steht im Artikel, den ich in meiner obigen Antwort verlinkt habe.

0