{"id":215,"date":"2025-07-21T13:45:43","date_gmt":"2025-07-21T11:45:43","guid":{"rendered":"https:\/\/cibis.de\/blog\/?p=215"},"modified":"2025-07-21T13:46:26","modified_gmt":"2025-07-21T11:46:26","slug":"comic-archiv","status":"publish","type":"post","link":"https:\/\/cibis.de\/blog\/comic-archiv\/2025\/","title":{"rendered":"Comic Archiv"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Dokumentation: Das Comic-Archiv &#8211; Struktur &amp; L\u00f6sungsans\u00e4tze<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Diese Dokumentation gibt einen \u00dcberblick \u00fcber die Architektur, die Kernfunktionen und die technischen L\u00f6sungsstrategien des Comic-Archivs.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h4 class=\"wp-block-heading\">1. Projekt\u00fcbersicht &amp; Architektur<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Das Ziel des Projekts ist die Erstellung einer robusten und benutzerfreundlichen Webanwendung zur Verwaltung einer Comicsammlung. Die Architektur wurde bewusst auf mehrere Dateien aufgeteilt, um eine klare Trennung der Zust\u00e4ndigkeiten zu gew\u00e4hrleisten und die Wartbarkeit zu erh\u00f6hen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Dateistruktur:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>index.php<\/code> (Startseite):<\/strong> Dient als zentraler Navigations-Hub. Sie zeigt eine \u00dcbersicht und l\u00e4dt alle anderen Anwendungsbereiche in einen iFrame-Container. Dies erzeugt das Gef\u00fchl einer Single-Page-Application (SPA), bei der der Benutzer die Hauptseite nie verl\u00e4sst.<\/li>\n\n\n\n<li><strong><code>start.php<\/code> (Titeleingabe):<\/strong> Das Herzst\u00fcck der Datenerfassung. Hier werden einzelne Comics erfasst, bearbeitet und gel\u00f6scht.<\/li>\n\n\n\n<li><strong><code>serie.php<\/code> (Serieneingabe):<\/strong> Eine spezialisierte Maske zur schnellen Erfassung ganzer Comic-Serien.<\/li>\n\n\n\n<li><strong><code>comics.php<\/code> (Datenbankanzeige):<\/strong> Eine reine Ansichts- und Suchseite, optimiert f\u00fcr das Durchsuchen und Filtern des gesamten Archivs.<\/li>\n\n\n\n<li><strong><code>backend.php<\/code> (Datenbankwartung):<\/strong> Ein Werkzeugkasten f\u00fcr fortgeschrittene Datenpflege, wie die Massenbearbeitung von Autoren oder das Finden von Duplikaten.<\/li>\n\n\n\n<li><strong><code>backup.php<\/code> (Datensicherung):<\/strong> Eine kritische Sicherheitsfunktion zum Erstellen und Wiederherstellen von Datenbank-Backups.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Zentrale Hilfsdateien:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um Code-Wiederholungen zu vermeiden (DRY-Prinzip) und die Wartung zu vereinfachen, wurden drei zentrale Dateien ausgelagert:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>config.php<\/code>:<\/strong> Enth\u00e4lt ausschlie\u00dflich die Zugangsdaten zur Datenbank. \u00c4ndern sich diese, muss nur diese eine Datei angepasst werden.<\/li>\n\n\n\n<li><strong><code>functions.php<\/code>:<\/strong> Beinhaltet alle wiederkehrenden PHP-Funktionen (z.B. zur Namensformatierung oder zur Erstellung von Sortier-Links).<\/li>\n\n\n\n<li><strong><code>style.css<\/code>:<\/strong> Definiert das gesamte visuelle Erscheinungsbild der Anwendung. Dies sorgt f\u00fcr ein konsistentes Design und beschleunigt die Ladezeiten durch Browser-Caching.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">2. Kernfunktionen &amp; Technische L\u00f6sungen<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Dateneingabe (<code>start.php<\/code> &amp; <code>serie.php<\/code>)<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Problem:<\/strong> Die manuelle Eingabe von sich wiederholenden Daten (wie Autorennamen oder Verlage) ist fehleranf\u00e4llig und zeitaufwendig.<\/li>\n\n\n\n<li><strong>L\u00f6sung:<\/strong>\n<ol class=\"wp-block-list\">\n<li><strong>Normalisierte Datenbanken:<\/strong> Es wurden separate Tabellen <code>AutorenDB<\/code> und <code>ZeichnerDB<\/code> erstellt. Diese enthalten jeden K\u00fcnstlernamen nur ein einziges Mal.<\/li>\n\n\n\n<li><strong>Datenbankgest\u00fctzte Vorschl\u00e4ge:<\/strong> Die Eingabefelder f\u00fcr &#8222;Autor&#8220;, &#8222;Zeichner&#8220;, &#8222;Verlag&#8220; und &#8222;Serie&#8220; nutzen HTML5-<code>&lt;datalist><\/code>-Elemente. Diese werden dynamisch mit den bereits vorhandenen Eintr\u00e4gen aus der Datenbank gef\u00fcllt, was die Tipparbeit reduziert und die Konsistenz erh\u00f6ht.<\/li>\n\n\n\n<li><strong>Intelligentes Ausf\u00fcllen:<\/strong> Ein JavaScript-Listener f\u00fcllt automatisch das Feld &#8222;Erscheinungsjahr&#8220; mit dem fr\u00fchesten bekannten Jahr aus, sobald eine bereits existierende Serie ausgew\u00e4hlt wird.<\/li>\n\n\n\n<li><strong>KI-gest\u00fctzte Erfassung:<\/strong> Die Integration der Gemini-API erm\u00f6glicht es, durch das Fotografieren eines Covers die meisten Felder automatisch ausf\u00fcllen zu lassen, was den Erfassungsprozess massiv beschleunigt.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Datenbankanzeige &amp; Suche (<code>comics.php<\/code>)<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Problem:<\/strong> Eine gro\u00dfe Datenmenge muss effizient durchsuchbar, sortierbar und \u00fcbersichtlich dargestellt werden.<\/li>\n\n\n\n<li><strong>L\u00f6sung:<\/strong>\n<ol class=\"wp-block-list\">\n<li><strong>Serverseitige Verarbeitung:<\/strong> Alle Such-, Sortier- und Paginierungs-Operationen finden direkt auf dem Server statt. So werden immer nur die relevanten Daten an den Browser gesendet, was auch bei Tausenden von Eintr\u00e4gen schnell bleibt.<\/li>\n\n\n\n<li><strong>Flexible Sortierung:<\/strong> Die <code>createSortLink()<\/code>-Funktion generiert dynamisch die Links in den Tabellenk\u00f6pfen und merkt sich den aktuellen Sortierstatus \u00fcber GET-Parameter.<\/li>\n\n\n\n<li><strong>Intelligente Paginierung:<\/strong> Die <code>generatePaginationLinks()<\/code>-Funktion zeigt bei vielen Seiten nicht mehr alle Seitenzahlen an, sondern k\u00fcrzt die Anzeige intelligent (z.B. &#8222;1, 2, 3, &#8230;, 20, 21, &#8230;&#8220;), um die Navigation \u00fcbersichtlich zu halten.<\/li>\n\n\n\n<li><strong>Inline-Bearbeitung:<\/strong> Ein JavaScript erm\u00f6glicht es, ausgew\u00e4hlte Tabellenzeilen direkt in bearbeitbare Formularfelder umzuwandeln und alle \u00c4nderungen gesammelt zu speichern. Dies vermeidet den Umweg \u00fcber eine separate Bearbeitungsseite f\u00fcr kleine Korrekturen.<\/li>\n\n\n\n<li><strong>Interaktive K\u00fcnstlernamen:<\/strong> Autoren- und Zeichnernamen werden als klickbare Links dargestellt, die eine neue Suche nach dem jeweiligen K\u00fcnstler ausl\u00f6sen.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Datenbankwartung (<code>backend.php<\/code>)<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Problem:<\/strong> Inkonsistente Daten (z.B. &#8222;Marvel&#8220; vs. &#8222;Marvel Comic Group&#8220;) erschweren die Suche und Auswertung.<\/li>\n\n\n\n<li><strong>L\u00f6sung:<\/strong>\n<ol class=\"wp-block-list\">\n<li><strong>Normalisierungsfunktion:<\/strong> Die <code>normalize_for_similarity()<\/code>-Funktion ist das Herzst\u00fcck der Duplikatssuche. Sie konvertiert einen String in eine vereinfachte Basisform (Kleinschreibung, Entfernung von Suffixen wie &#8222;Verlag&#8220; oder &#8222;Comics&#8220;), um semantisch gleiche, aber unterschiedlich geschriebene Eintr\u00e4ge zu finden.<\/li>\n\n\n\n<li><strong>Kontrollierte Zusammenf\u00fchrung:<\/strong> Anstatt \u00c4nderungen automatisch durchzuf\u00fchren, pr\u00e4sentiert das Tool dem Benutzer eine Liste der gefundenen Duplikatsgruppen. Der Benutzer hat die volle Kontrolle und kann f\u00fcr jede Gruppe den korrekten &#8222;Master-Eintrag&#8220; ausw\u00e4hlen, einen neuen Namen manuell eingeben oder die \u00c4nderung \u00fcberspringen.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">3. Sicherheit<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>SQL-Injection-Pr\u00e4vention:<\/strong> Alle Datenbankabfragen, die Benutzereingaben enthalten, werden konsequent \u00fcber <strong>Prepared Statements<\/strong> (<code>$conn->prepare()<\/code>, <code>$stmt->bind_param()<\/code>) ausgef\u00fchrt. Dies ist die wichtigste Ma\u00dfnahme, um die Datenbank vor b\u00f6sartigen Angriffen zu sch\u00fctzen.<\/li>\n\n\n\n<li><strong>Cross-Site-Scripting (XSS) Pr\u00e4vention:<\/strong> Alle Daten, die aus der Datenbank gelesen und im HTML ausgegeben werden, werden mit <code>htmlspecialchars()<\/code> behandelt. Dies verhindert, dass sch\u00e4dlicher Code in die Seite eingeschleust und im Browser anderer Benutzer ausgef\u00fchrt wird.<\/li>\n\n\n\n<li><strong>Datensicherung:<\/strong> Die <code>backup.php<\/code> nutzt serverseitige Systembefehle (<code>mysqldump<\/code>). Um die Sicherheit zu erh\u00f6hen, werden alle an diese Befehle \u00fcbergebenen Variablen mit <code>escapeshellarg()<\/code> behandelt, was Command-Injection-Angriffe verhindert.<\/li>\n<\/ul>\n<div class=\"gsp_post_data\" \r\n\t            data-post_type=\"post\" \r\n\t            data-cat=\"code,php,projekte\" \r\n\t            data-modified=\"120\"\r\n\t            data-created=\"1753105543\"\r\n\t            data-title=\"Comic Archiv\" \r\n\t            data-home=\"https:\/\/cibis.de\/blog\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Dokumentation: Das Comic-Archiv &#8211; Struktur &amp; L\u00f6sungsans\u00e4tze Diese Dokumentation gibt einen \u00dcberblick \u00fcber die Architektur, die Kernfunktionen und die technischen L\u00f6sungsstrategien des Comic-Archivs.<\/p>\n","protected":false},"author":1,"featured_media":216,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,7,20],"tags":[],"class_list":["post-215","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","category-php","category-projekte"],"_links":{"self":[{"href":"https:\/\/cibis.de\/blog\/wp-json\/wp\/v2\/posts\/215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cibis.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cibis.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cibis.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cibis.de\/blog\/wp-json\/wp\/v2\/comments?post=215"}],"version-history":[{"count":1,"href":"https:\/\/cibis.de\/blog\/wp-json\/wp\/v2\/posts\/215\/revisions"}],"predecessor-version":[{"id":217,"href":"https:\/\/cibis.de\/blog\/wp-json\/wp\/v2\/posts\/215\/revisions\/217"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cibis.de\/blog\/wp-json\/wp\/v2\/media\/216"}],"wp:attachment":[{"href":"https:\/\/cibis.de\/blog\/wp-json\/wp\/v2\/media?parent=215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cibis.de\/blog\/wp-json\/wp\/v2\/categories?post=215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cibis.de\/blog\/wp-json\/wp\/v2\/tags?post=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}