Teil 6 HTML-Templates

home php eigenes-cms-entwickeln

Angular das große Handbuch zum JavaScript-Framework. Einführung und fortgeschrittene TypeScript-Techniken   -  Angular ist das JavaScript-Framework für professionelle Webapplikationen - hier lernen Sie es umfassend kennen! Christoph Höller macht Sie mit allen relevanten Technologien, Standards und Kernbestandteilen des Frameworks vertraut. Am Praxisbeispiel einer Projektverwaltung führt Ihnen der Webprofi die Komponenten und Konzepte von Angular vor. Formulare, Routing, HTTP-Anbindung und Testing - hier lernen Sie Schritt für Schritt, wie Sie eigene Angular-Webapplikationen erstellen. Inkl. aller neuen Features und Komponenten. Aktuell inkl. Material Design.

Wir sind Mitglied im Amazon.Partnernet und können mit Affiliate-Links den Betrieb der Webseite etwas unterstützen, für Sie als Leser ist das natürlich vollkommen kostenlos.

HTML-Templates stellen das Layout und Design Ihres Content Management Systems dar.

Templates anlegen

Die Templates des Basic-CMS sind im wesentlichen leere HTML-Vorlagen, die an bestimmten Stellen so genannte Tokens statt des Beitragsinhalts besitzen. Die Tokens im Format {xyz} fungieren als Platzhalter für die Ersetzungen der realen Beitragsdaten. Folglich werden die folgenden Token benötigt:

  • {title} Titel des Beitrags
  • {author} der Autor des Artikels
  • {description} Anleser des Beitrags
  • {content} der Haupt-Text

MVC Design MVC Design Pattern: Die Templates

Verzeichnis des Templates

Die Verzeichnis-Struktur ist noch übersichtlich und als Vorgriff auf den zu erwartenden Ausbau des eigenen CMS, werden alle Templates im Verzeichnis templates gelagert. Aktuell befindet sich dort lediglich das allgemeine Template basic.template.

Ein Template gestalten

Zunächst kann das HTML-Template vollkommen frei mit Hilfe der freien CSS-Bibliothek Bootstrap ganz nach eigenen Vorstellungen gestaltet werden. Wichtig ist, das die benötigten Tokens wie {title}, {description} usw. an den richtigen Stellen im HTML-Dokument platziert werden. Die hinterlegten Tokens werden zur Laufzeit des CMS von der View mit den echten Daten des Beitrags ersetzt und im MVC-Modell an den Controller weiter nach oben gereicht.

<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <style>
        ul {
            float:              left;
            margin-right:       1em;
            list-style-type:    none;
            padding-left:       0px;
        }
        li {
            background-color:   STEELBLUE;
            margin-bottom:      0.8em;
            padding:            0.8em;
        }
        a {
            text-decoration:    none;
            font-weight:        bold;
            color:              #ffffff;
        }
    </style>
</head>
<body>
    <div class="container-fluid bg-light py-4 shadow-lg">
        <div class="container">
            <h1> {title} </h1>
            <p class="lead"> {description} </p>
        </div>
    </div>

    <div class="container pt-5">
        <div class="text-center"><a href="/"><img src="{logo}" class="img-fluid w-25"></a></div>
        <p> {content} </p>
    </div>
</body>
</html>

basic.template

Das basic.template ist ein ganz einfaches Beispiel-Template und kann mit Hilfe des Bootstrap-CSS Frameworks responsiv auf allen Endgeräten sinnvoll angezeigt werden. Bootstrap wird dynamisch zur Laufzeit hinzu-gelinkt. Die verwendeten Template-Tokens, entsprechen den Metadaten aus den Beiträgen, neu hinzugegkommen ist {content} welcher den Beitragstext aufnimmt und speichern soll.

Individueller CSS Style

In diesem Prototyp ist der individuelle CSS-Style innerhalb des Templates mit dem style-tag angelegt, das ist zwar absolut HTML konform, sollte aber später als externe Datei:

style.css

externe Style Angaben

in einem separaten Verzeichnis ausgelagert werden. Auch das CSS-Framework Bootstrap wird dynamisch hinzugelinkt, dies sollten Sie später ebenfalls herunterladen, um es in einem Style-Verzeichnis zu lagern, denn hat einmal der Server des Bootstrap-Projektes ein Verbidungsproblem oder ist 'down', dann funktioniert Ihre Webseite ebenfalls nicht mehr.


 11.02.2024    Kontakt@Oliver-Lohse.de    ein eigenes CMS entwickeln programmieren

KI für Content Creation - Texte, Bilder, Audio und Video erstellen mit ChatGPT und Co   -  Nominiert für den Tiger-Award 2024 in der Kategorie „Business Bestseller“. Schnell und effektiv Content erstellen mit ChatGPT und DeepL. Texte optimieren für SEO mit Semrush und Yoast. Bilder, Audio und Videos kreieren mit DALL-E, Midjourney, Adobe Firefly, Adobe Podcast u.v.m. KI-Tools sinnvoll in den gesamten Content-Marketing-Prozess integrieren. KI-Technologien wie ChatGPT und Co. erleichtern Content Creation um ein Vielfaches – Sie müssen nur wissen, wie diese Tools effektiv eingesetzt werden können.

Wir sind Mitglied im Amazon.Partnernet und können mit Affiliate-Links den Betrieb der Webseite etwas unterstützen, für Sie als Leser ist das natürlich vollkommen kostenlos.

Weitere passende Beiträge

Teil 9 Wie gehts weiter?

 php  ein eigenes CMS entwickeln programmieren


Wie gehts mit dem eigenen CMS weiter? Was kann verbessert werden und welche Ausbauoptionen gibt es noch?

Teil 8 Erster Start des eigenen CMS

 php  ein eigenes CMS entwickeln programmieren


Starten Sie das selbst entwickelte Content Management System im Browser.

Teil 7 Beiträge und Kategorien anlegen

 php  ein eigenes CMS entwickeln programmieren


Legen Sie mit Hilfe von Markdown einfach und effizient Beiträge an.

Teil 5 Die View (MVC)

 php  ein eigenes CMS entwickeln programmieren


Die View zeigt die Daten des CMS im Browser-Fenster des Lesers an.

Teil 4 Das Model (MVC)

 php  ein eigenes CMS entwickeln programmieren


Das Model ist für die Datenbeschaffung in Ihrem Content Management System verantwortlich und greift auf Beiträge zu.

Teil 3 Der Controller (MVC)

 php  ein eigenes CMS entwickeln programmieren


Der Controller übernimmt die Steuerung Ihres eigenen Content Management Systems, er steuert die Verarbeitung.

Teil 2 htaccess und index.php

 php  ein eigenes CMS entwickeln programmieren


Für das CMS sind die beiden Server-Dateien htaccess und index.php die Schaltzentralen des CMS.

Teil 1 Vorwort und Download

 php  ein eigenes CMS entwickeln programmieren


Was das eigene Content Management System können soll und welche Eigenschaften es haben wird.

Impressum


CMSWorkbench.de ist eine reine Entwickler-Webseite und dient vorwiegend als Wissensspeicher für die Entwicklung von CMS

Datenschutz


Die Webseite verwendet keinerlei Tracking- oder Speicher-Mechanismen, die Rückschlüsse auf Ihre IP oder das Leseverhalten zulassen

Affiliate


Wir sind Mitglied im Amazon Partnernet und können mit Affiliate-Links (* den Betrieb der Seite etwas unterstützen, für Sie ist das natürlich kostenlos

Kontakt


Sie können mit uns über eMail Kontakt aufnehmen, schreiben Sie an Kontakt@Oliver-Lohse.de