So erstellen Sie ein einfaches CMS, das die Bearbeitung erleichtert

In diesem Artikel werden wir uns auf eine einfache Möglichkeit befassen, Ihr eigenes Content -Management -System zu erstellen, das die Bearbeitung und Aktualisierung Ihrer Website erleichtert.

Wir haben diesen Artikel in Zusammenarbeit mit Froala erstellt. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglichen.

Key Takeaways

• Verwenden Sie eine Kombination aus HTML/CSS/JavaScript/JQuery und Bootstrap für die Frontend -Entwicklung, um die Reaktionsfähigkeit und das einfache Design zu gewährleisten.
• Verwenden Sie PHP- und Microsoft SQL Server für Backend -Operationen mit der Option, zu anderen DBMs wie MySQL oder MariADB nach Benutzerpräferenz umzusteigen.
• Integrieren Sie Froala, einen Wysiwyg -HTML -Editor, um die Bearbeitungsfunktionen der Inhalte zu verbessern, und erleichtert Administratoren die effektive Verwaltung von Website -Inhalten.
• Konzentrieren Sie sich auf das Erstellen einer benutzerfreundlichen Schnittstelle, die eine dynamische Symbolleiste zum Hinzufügen von Seitenkomponenten und einem modalen System für die Eingabeverwaltung enthält.
• Stellen Sie sicher, dass das CMS grundlegende Funktionen wie das Erstellen, Betrachten, Bearbeiten und Löschen von Inhalten unterstützt, mit Potenzial für Skalierbarkeit und Sicherheitsverbesserungen in zukünftigen Entwicklungen.

Welche CMSS sind

Content Management Systems (CMSS) sind leistungsstarke und beliebte Tools, um Plattformen zu erstellen, die stark von Inhalten abhängig sind. Sie bieten den Benutzern einfache Möglichkeiten, Inhalte zu erstellen, zu veröffentlichen, anzeigen und zu bearbeiten.

Außerdem benötigen sie oft wenig bis gar keine Codierungserfahrung. Dies macht sie zu einer guten Wahl für Blogger, Unternehmen, Entwickler oder jeden, der eine Website mit weniger Aufwand aufbauen möchte.

CMSS werden für verschiedene Zwecke über verschiedene Felder hinweg verwendet. Zum Beispiel können sie verwendet werden, um Blogs, Unternehmen oder freiberufliche Websites, Bildungswebsites oder sogar E -Commerce -Plattformen zu betreiben. Aus diesem Grund bleibt die Verwendung eines CMS eine beliebte und relevante Option, wobei der Platz in der Webentwicklung für die kommenden Jahre sichern.

Es gibt viele verfügbare CMS auf dem Markt. Einige sind Open Source, während andere für einen Preis verwendet werden können. Sowohl Open-Source- als auch kostenpflichtige CMS sind praktikable Entscheidungen und haben ihre Vorteile. Es kann auch Fälle geben, in denen Sie Ihr eigenes CMS erstellen möchten.

Sie könnten ein Entwickler sein, der eine Herausforderung anstrebt, ein Student, der mit der Erstellung eines CMS beauftragt ist, oder ein Unternehmen, das in der CMS -Branche ein großer Name sein möchte. Wenn Sie ein Content -Management -System erstellen möchten, ist dieser Artikel für Sie.

Vorbereiten Sie sich darauf vorbereiten, Ihr eigenes CMS

zu erstellen

Wir werden mit den folgenden Tools ein grundlegendes (d. H. Nutzbar genug) CMS erstellen:

• html/css/javaScript/jQuery für das Frontend
• Bootstrap für Reaktionsfähigkeit und einfaches Design
• PHP für das Backend
• MS SQL Server (oder gleichwertig) zum Speichern von Daten
• SSMS (SQL Server Management Studio oder gleichwertig) zum Erstellen der Datenbank und Tabellen
• Froala, ein Wysiwyg (was Sie sehen, ist das, was Sie erhalten) HTML -Editor für die Bearbeitung von Inhalten

Während das CMS, das wir machen, grundlegend ist, ist es auch ziemlich solide. Dies liegt daran, dass Froala, der von uns verwendete Wysiwyg -Editor, die meisten Funktionen in einem CMS -Editor enthält. Dieser Artikel sollte Sie auf den richtigen Weg bringen, unabhängig vom Endziel für Ihr CMS.

Beachten Sie auch, dass das DBMS (Datenbankverwaltungssystem), das ich verwenden werde, Microsoft SQL Server ist, da ich am besten vertraut bin. Sie können es problemlos gegen Ihre bevorzugten DBMs wie MySQL oder Mariadb austauschen. Da wir mit der Datenbank nichts besonders kompliziertes tun, spielt DBMS -Auswahl hier keine Rolle .

Bevor wir fortfahren, gehen wir davon aus, dass Sie bereits PHP, die DBMs Ihrer Wahl haben und Froala auf Ihrem Computer installiert sind. Wenn Sie es noch nicht getan haben, können Sie sie installieren, indem Sie ihre jeweiligen Websites besuchen und den Anweisungen befolgen.

Was ist in einem CMS?

In Content -Management -Systemen gibt es normalerweise Administratoren und Endbenutzer. Administratoren verwalten die Seiten, Komponenten und Inhalte der Website. Sie pflegen die Website, stellen sicher, dass jede Funktion funktioniert, und erstellen bei Bedarf Verbesserungen.

Endbenutzer dagegen interagieren mit den Seiten und Komponenten der CMS-betriebenen Website, um Inhalte zu erstellen, zu bearbeiten und zu konsumieren. Beide Benutzer interagieren normalerweise mit einem WYSIWYG -Editor innerhalb des CMS für die Erstellung und Bearbeitung von Inhalten.

Für Demonstrationszwecke und um die Dinge einfach zu halten, werden wir nur ein einseitiges CMS für Administratoren implementieren. In einer Produktion CMS müssten wir viele andere Faktoren berücksichtigen, die über den Rahmen dieses Tutorials hinausgehen. Dazu gehören Benutzerverwaltung und Zugriffsrechte, Sicherheit (Eingabedeinigung, parametrisierte Abfragen usw.), Leistung und mehr.

In unserem einfachen CMS sollten Administratoren in der Lage sein, die folgenden Aufgaben auszuführen:

• Interagieren Sie mit einer Symbolleiste, um Seitenkomponenten wie Überschriften, Text, Links und eine Froala -Editor -Instanz zu erstellen
• Interagieren Sie mit einer Froala -Instanz, um Inhalte zu veröffentlichen, die
angezeigt werden.
Veröffentlichte Inhalt anzeigen
Ansichtsmodus eingeben, der die Symbolleiste

verbirgt

Administratoren können in der Regel Seitenkomponenten bearbeiten und löschen, aber lassen Sie uns beim Erstellen und Löschen von Komponenten halten. Beginnen wir unseren Prozess, indem wir ein Datenbankschema erstellen.

Einrichten der Datenbank

Da wir einfache Anforderungen haben, haben wir auch eine einfachere Datenbankstruktur. Für unser Beispiel -CMS verwenden wir nur zwei nicht verwandte Tabellen:

• post
  • post_id: int, identity (1,1), nicht null, primärer Schlüssel
  • post_content: varchar (max), nicht null
  • post_on: datetime2 (7), nicht null
• Komponente
  • component_id: int, identity (1,1), nicht null, primärer Schlüssel
  • component_type: char (8), nicht null
  • component_content: varchar (255), nullierbar
  • erstellt_on: datetime2 (7), nicht null

Die erste Tabelle, Post, speichert Inhalte von einer Editor -Komponente, während die Komponententabelle Seitenelemente speichert, die mit der Symbolleiste generiert werden.

Beachten Sie, dass URLs in den meisten Browsern eine maximale Länge von 2048 Zeichen haben, aber in unserer Datenbank werden wir sie nur auf 255 Zeichen setzen. Darüber hinaus möchten Sie möglicherweise die ID -Spalten beider Tabellen in randomisierte Zeichenfolgen für Ihre Anwendung ändern. Erstellen der Schnittstelle

wir werden die CDN -Links für Bootstrap, Bootstrap -Symbole und Froalas CSS- und JS -Dateien einfügen. Wir haben auch unsere benutzerdefinierten CSS- und JS -Dateien:

Die folgenden Komponenten, an denen wir arbeiten, sind die Navigationsleiste und die Symbolleiste. Die NAVABAR enthält den Titel oder die Marke der Website und eine Symbolschaltfläche für die Umschaltung der Sichtbarkeit der Symbolleiste (denken Sie an eine Schaltfläche "Administratoransicht").

<span><!--Include Bootstrap CSS-->
</span><span><span><span><link</span> href<span>="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"</span> rel<span>="stylesheet"</span> integrity<span>="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"</span> crossorigin<span>="anonymous"</span>></span>
</span>
<span><!--Include Bootstrap Icons-->
</span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"</span>></span>
</span>
<span><!--Include Froala Editor CSS-->
</span><span><span><span><link</span> href<span>="css/froala_editor.pkgd.min.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>    
</span>
<span><!--Include Custom CSS-->
</span><span><span><span><link</span> href<span>="css/index.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>
</span>
<span><!--Include Popper JS-->
</span><span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"</span> integrity<span>="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>
<span><!--Include Bootstrap JS-->
</span><span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"</span> integrity<span>="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>
<span><!--Include jQuery-->
</span><span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.6.1.js"</span> integrity<span>="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>
<span><!--Include Froala JS-->
</span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/froala_editor.pkgd.min.js"</span>></span><span><span></script</span>></span>
</span>
<span><!--Include Custom JS-->
</span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/index.js"</span>></span><span><span></script</span>></span>
</span>

Andererseits enthält die Symbolleiste vier Schaltflächen, die den vier Komponenten entsprechen, die programmgesteuert zur Seite hinzugefügt werden können:

Der obige Code erstellt die Navigationsleiste und Komponenten. Die Hintergrundfarbe der Navigationsstange lautet #0098F7, sodass sie einen blauen Farbton verleiht. Die Toggletoolbar () Onclick -Veranstaltung ist dafür verantwortlich, die Symbolleistenelemente zu verbergen. Schreiben Sie als nächstes den Code für die Symbolleiste:

<span><span><span><div</span> class<span>="row"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar navbar-expand-xl"</span>></span>
</span>    <span><span><span><div</span> class<span>="container-fluid"</span>></span>
</span>      <span><span><span><a</span> class<span>="navbar-brand text-white"</span> href<span>="#"</span>></span>Froala CMS<span><span></a</span>></span>
</span>      <span><span><span><ul</span> class<span>="navbar-nav me-auto mb-2 mb-lg-0"</span>></span>
</span>        <span><span><span><li</span> class<span>="nav-item"</span>></span>
</span>          <span><span><span><a</span> class<span>="bi bi-eye text-white"</span> href<span>="#"</span> <span>onclick<span>="<span>toggleToolbar()</span>"</span></span>></span><span><span></a</span>></span>
</span>        <span><span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></nav</span>></span>
</span><span><span><span></div</span>></span>
</span>

Wir verwenden das Grid -Display von Bootstrap (klicken Sie hier, um mehr zu erfahren) und die Größenoptionen, um die Schaltflächenkomponenten für unsere Symbolleiste zu erstellen. Wir verwenden auch Bootstrap -Symbole neben den Button -Beschriftungen, um eine bessere Lesbarkeit zu erhalten. Wenn Sie Ihr eigenes CMS erstellen, können Sie Ihre Symbolleiste repräsentieren.

<span><span><span><div</span> class<span>="row mt-5 px-xl-5 mx-xl-5"</span> id<span>="toolbar"</span>></span>
</span>  <span><span><span><p</span> class<span>="lead ms-xl-5"</span>></span>
</span>    This is your CMS toolbar. You can add new components to your page by clicking any of the buttons below. To toggle the visibility of the toolbar, click the eye (<span><span><span><i</span> class<span>="bi bi-eye"</span>></span><span><span></i</span>></span>) icon on the navbar.
</span>  <span><span><span></p</span>></span>
</span>  <span><span><span><div</span> class<span>="col-xxl-3 col-md-4"</span>></span>
</span>    <span><span><span><div</span> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> data-bs-toggle<span>="modal"</span> data-bs-target<span>="#headingModal"</span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center display-4"</span>></span>
</span>        <span><span><span><i</span> class<span>="bi bi-type-h1"</span>></span><span><span></i</span>></span>
</span>      <span><span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center h3"</span>></span>
</span>        <span><span><span><label</span>></span>Heading<span><span></label</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="col-xxl-3 col-md-4"</span>></span>
</span>    <span><span><span><div</span> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> data-bs-toggle<span>="modal"</span> data-bs-target<span>="#textModal"</span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center display-4"</span>></span>
</span>        <span><span><span><i</span> class<span>="bi bi-fonts"</span>></span><span><span></i</span>></span>
</span>      <span><span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center h3"</span>></span>
</span>        <span><span><span><label</span>></span>Text<span><span></label</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="col-xxl-3 col-md-4"</span>></span>
</span>    <span><span><span><div</span> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> data-bs-toggle<span>="modal"</span> data-bs-target<span>="#linkModal"</span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center display-4"</span>></span>
</span>        <span><span><span><i</span> class<span>="bi bi-link-45deg"</span>></span><span><span></i</span>></span>
</span>      <span><span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center h3"</span>></span>
</span>  <span><span><span><label</span>></span>Link<span><span></label</span>></span>
</span>       <span><span><span></div</span>></span>
</span>     <span><span><span></div</span>></span>
</span>   <span><span><span></div</span>></span>
</span>   <span><span><span><div</span> class<span>="col-xxl-3 col-md-4"</span>></span>
</span>    <span><span><span><div</span> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> <span>onclick<span>="<span>createComponent('editor')</span>"</span></span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center display-4"</span>></span>
</span>        <span><span><span><i</span> class<span>="bi bi-pencil-square"</span>></span><span><span></i</span>></span>
</span>      <span><span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center h3"</span>></span>
</span>        <span><span><span><label</span>></span>Editor<span><span></label</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>   <span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span>
</span>

Die üblichen Optionen sind die

navi

, Karten oder offcanvas Elemente. In diesem Fall repräsentieren wir sie mit kartenähnlichen Rechtecken, die jeweils ein knopfartiges Verhalten haben. Wir werden auch einige Ereignisse für unsere Symbolleistenboxen hinzufügen. Beachten Sie, dass wir einen Modal öffnen, dessen Code unten für jedes der ersten drei Kästchen (Überschrift, Text und Link) angezeigt wird.

enthält jeweils ein Eingangsfeld (zwei für Links, eines für Text und eines für die URL). Schließlich rufen wir die Funktion createComponent zur Initialisierung unseres Wysiwyg HTML -Editors für CMS an:

Der obige Code zeigt einen der Modale an - insbesondere derjenige, der zum Hinzufügen einer neuen Überschrift zur Seite verwendet wird. Dieser Modal wird angezeigt, wenn ein Benutzer auf die Schaltfläche/die Überschrift "Überschrift" klickt. Es wird abgewiesen, wenn die Schaltfläche "Beenden oder Abbrechen" klickt oder eine Überschrift hinzugefügt wird.

<span><span><span><div</span> class<span>="modal fade"</span> id<span>="headingModal"</span> tabindex<span>="-1"</span> aria-labelledby<span>="headingModalLabel"</span> aria-hidden<span>="true"</span>></span>
</span>  <span><span><span><div</span> class<span>="modal-dialog"</span>></span>
</span>    <span><span><span><div</span> class<span>="modal-content"</span>></span>
</span>      <span><span><span><div</span> class<span>="modal-header"</span>></span>
</span>        <span><span><span><h5</span> class<span>="modal-title"</span> id<span>="headingModalLabel"</span>></span>Add a heading:<span><span></h5</span>></span>
</span>        <span><span><span><button</span> type<span>="button"</span> class<span>="btn-close"</span> data-bs-dismiss<span>="modal"</span> aria-label<span>="Close"</span>></span><span><span></button</span>></span>
</span>      <span><span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="modal-body"</span>></span>
</span>        <span><span><span><div</span> class<span>="mb-3"</span>></span>
</span>          <span><span><span><input</span> type<span>="text"</span> class<span>="form-control"</span> id<span>="headingContent"</span>></span>
</span>        <span><span><span></div</span>></span>
</span>      <span><span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="modal-footer"</span>></span>
</span>        <span><span><span><button</span> type<span>="button"</span> class<span>="btn btn-light"</span>  <span>onclick<span>="<span>resetValue('heading')</span>"</span></span> data-bs-dismiss<span>="modal"</span>></span>Cancel<span><span></button</span>></span>
</span>        <span><span><span><button</span> type<span>="button"</span> class<span>="btn btn-primary"</span> <span>onclick<span>="<span>createComponent('heading')</span>"</span></span> data-bs-dismiss<span>="modal"</span>></span>Save<span><span></button</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>

Die anderen Modale funktionieren ähnlich, aber beachten Sie, dass ein ordnungsgemäßes Verknüpfungseingang zwei Eingabefelder für den Text und die URL haben sollte (vorerst verwenden wir nur einen):

<span><!--Include Bootstrap CSS-->
</span><span><span><span><link</span> href<span>="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"</span> rel<span>="stylesheet"</span> integrity<span>="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"</span> crossorigin<span>="anonymous"</span>></span>
</span>
<span><!--Include Bootstrap Icons-->
</span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"</span>></span>
</span>
<span><!--Include Froala Editor CSS-->
</span><span><span><span><link</span> href<span>="css/froala_editor.pkgd.min.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>    
</span>
<span><!--Include Custom CSS-->
</span><span><span><span><link</span> href<span>="css/index.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>
</span>
<span><!--Include Popper JS-->
</span><span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"</span> integrity<span>="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>
<span><!--Include Bootstrap JS-->
</span><span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"</span> integrity<span>="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>
<span><!--Include jQuery-->
</span><span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.6.1.js"</span> integrity<span>="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>
<span><!--Include Froala JS-->
</span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/froala_editor.pkgd.min.js"</span>></span><span><span></script</span>></span>
</span>
<span><!--Include Custom JS-->
</span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/index.js"</span>></span><span><span></script</span>></span>
</span>

Schließlich fügen wir den Codes -Snippet oben zu unserer Index.css -Datei hinzu, um die Hintergrundfarbe und den Mauszeiger eines Symbolleistenkastens auf Schwebes zu ändern. Sobald Sie fertig sind, sollte Ihre Benutzeroberfläche wie unten gezeigt angezeigt werden.

Nachdem wir die Schnittstelle eingerichtet haben, ist es Zeit, JavaScript Funktionen hinzuzufügen.

Senden der Daten

In unserer Index.js -Datei definieren wir fünf Funktionen für die folgenden Funktionen: Erstellen von Komponenten, Umschalten der Symbolleiste -Sichtbarkeit, Zurücksetzen der Eingabefelder, Laden von Posts und Laden von Komponenten. Mal sehen, was jeder von ihnen tut.

1. createComponent (componentType)

   Wir werden diese Funktion verwenden, um erstellte Komponenten an die Datenbank zu senden. Es nimmt KomponentType, das den Komponententyp (Link, Überschrift, Text, Editor) als Parameter beschreibt. Zunächst müssen wir den Komponententyp mit einer Switch-Case-Anweisung bestimmen. Für Überschriften, Texte und Links senden wir ihren Inhalt mithilfe einer AJAX -Anforderung zusammen mit ihrem Komponententyp an PHP/add.php. Andererseits müssen wir für Redakteure nur den Komponententyp senden. Nachdem der Inhalt erfolgreich gespeichert wurde, werden wir die Funktion getComponents () aufrufen, um die angezeigten Komponenten zu „aktualisieren“.

2. ToggletoolBar ()

   Diese Funktion fügt nach Bedarf einfach die D-Flex- und D-NONE-Klassen aus der Symbolleiste hinzu oder entfernt.

3. ResetValue (componentType)

   Eine Funktion, die den Parameter von Komponentypen hat, stellt das Wert von Eingabefeldern neu initialisiert, indem jedes Element per ID abgerufen und ihren Wert auf eine leere Zeichenfolge festgelegt wird.

4. getComponents ()

   Diese Funktion macht zuerst eine AJAX -HTTP -Anforderung an PHP/load.php, um die Daten der Komponenten aus der Datenbank abzurufen. Wenn es erfolgreich ist, erzeugt es dynamisch HTML gemäß den aus der Datenbank abgerufenen Komponenten (z. B. ein

   -Elements für Überschriftenkomponenten). Danach wird für jede Editor -Komponente eine Froala -Instanz zusammen mit einer Speicherschaltfläche initialisiert. Zuletzt wird ein Klick -Ereignis -Listener zu den Schaltflächen hinzugefügt, um Beiträge zu speichern, die in Editoren geschrieben wurden. Bei Erfolg wird die Funktion von GetPosts () aufgerufen, um die Liste der Beiträge zu „aktualisieren“.

5. getPosts ()

   Die Funktion getPosts () besteht aus einer AJAX -Anforderung, die alle Beiträge aus der Datenbank über PHP/loadPosts.php abruft. Ähnlich wie GetComponents () generiert diese Funktion html dynamisch für die Anzeige der Beiträge.

Bei Dokumentenladen werden sowohl die Funktionen getComponents () als auch GetPosts () aufgerufen. Nachdem Sie den erforderlichen JS -Code zum Senden von Daten an den Server haben, müssen Sie nur noch im Backend verarbeiten.

Vorbereitung des Backend

Wie Sie vielleicht zuvor bemerkt haben, haben wir vier PHP -Dateien - zwei zum Hinzufügen von Komponenten und Posts und zwei zum Laden. Sie bestehen aus ähnlichem Code, beginnend mit der Verbindung mit der Datenbank mit SQLSRV_CONNECT, erhalten Sie die $ _post -Variablen (falls vorhanden) und das Definieren und Ausführen der Abfrage. Im Folgenden sind die an diesen Dateien beteiligten Abfragen aufgeführt:

1. load.php:

<span><!--Include Bootstrap CSS-->
</span><span><span><span><link</span> href<span>="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"</span> rel<span>="stylesheet"</span> integrity<span>="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"</span> crossorigin<span>="anonymous"</span>></span>
</span>
<span><!--Include Bootstrap Icons-->
</span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"</span>></span>
</span>
<span><!--Include Froala Editor CSS-->
</span><span><span><span><link</span> href<span>="css/froala_editor.pkgd.min.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>    
</span>
<span><!--Include Custom CSS-->
</span><span><span><span><link</span> href<span>="css/index.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>
</span>
<span><!--Include Popper JS-->
</span><span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"</span> integrity<span>="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>
<span><!--Include Bootstrap JS-->
</span><span><span><span><script</span> src<span>="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"</span> integrity<span>="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>
<span><!--Include jQuery-->
</span><span><span><span><script</span> src<span>="https://code.jquery.com/jquery-3.6.1.js"</span> integrity<span>="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="</span> crossorigin<span>="anonymous"</span>></span><span><span></script</span>></span>
</span>
<span><!--Include Froala JS-->
</span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/froala_editor.pkgd.min.js"</span>></span><span><span></script</span>></span>
</span>
<span><!--Include Custom JS-->
</span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/index.js"</span>></span><span><span></script</span>></span>
</span>

2. loadPosts.php:

<span><span><span><div</span> class<span>="row"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar navbar-expand-xl"</span>></span>
</span>    <span><span><span><div</span> class<span>="container-fluid"</span>></span>
</span>      <span><span><span><a</span> class<span>="navbar-brand text-white"</span> href<span>="#"</span>></span>Froala CMS<span><span></a</span>></span>
</span>      <span><span><span><ul</span> class<span>="navbar-nav me-auto mb-2 mb-lg-0"</span>></span>
</span>        <span><span><span><li</span> class<span>="nav-item"</span>></span>
</span>          <span><span><span><a</span> class<span>="bi bi-eye text-white"</span> href<span>="#"</span> <span>onclick<span>="<span>toggleToolbar()</span>"</span></span>></span><span><span></a</span>></span>
</span>        <span><span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></nav</span>></span>
</span><span><span><span></div</span>></span>
</span>

3. add.php:

<span><span><span><div</span> class<span>="row mt-5 px-xl-5 mx-xl-5"</span> id<span>="toolbar"</span>></span>
</span>  <span><span><span><p</span> class<span>="lead ms-xl-5"</span>></span>
</span>    This is your CMS toolbar. You can add new components to your page by clicking any of the buttons below. To toggle the visibility of the toolbar, click the eye (<span><span><span><i</span> class<span>="bi bi-eye"</span>></span><span><span></i</span>></span>) icon on the navbar.
</span>  <span><span><span></p</span>></span>
</span>  <span><span><span><div</span> class<span>="col-xxl-3 col-md-4"</span>></span>
</span>    <span><span><span><div</span> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> data-bs-toggle<span>="modal"</span> data-bs-target<span>="#headingModal"</span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center display-4"</span>></span>
</span>        <span><span><span><i</span> class<span>="bi bi-type-h1"</span>></span><span><span></i</span>></span>
</span>      <span><span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center h3"</span>></span>
</span>        <span><span><span><label</span>></span>Heading<span><span></label</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="col-xxl-3 col-md-4"</span>></span>
</span>    <span><span><span><div</span> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> data-bs-toggle<span>="modal"</span> data-bs-target<span>="#textModal"</span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center display-4"</span>></span>
</span>        <span><span><span><i</span> class<span>="bi bi-fonts"</span>></span><span><span></i</span>></span>
</span>      <span><span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center h3"</span>></span>
</span>        <span><span><span><label</span>></span>Text<span><span></label</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="col-xxl-3 col-md-4"</span>></span>
</span>    <span><span><span><div</span> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> data-bs-toggle<span>="modal"</span> data-bs-target<span>="#linkModal"</span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center display-4"</span>></span>
</span>        <span><span><span><i</span> class<span>="bi bi-link-45deg"</span>></span><span><span></i</span>></span>
</span>      <span><span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center h3"</span>></span>
</span>  <span><span><span><label</span>></span>Link<span><span></label</span>></span>
</span>       <span><span><span></div</span>></span>
</span>     <span><span><span></div</span>></span>
</span>   <span><span><span></div</span>></span>
</span>   <span><span><span><div</span> class<span>="col-xxl-3 col-md-4"</span>></span>
</span>    <span><span><span><div</span> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> <span>onclick<span>="<span>createComponent('editor')</span>"</span></span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center display-4"</span>></span>
</span>        <span><span><span><i</span> class<span>="bi bi-pencil-square"</span>></span><span><span></i</span>></span>
</span>      <span><span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="row text-center h3"</span>></span>
</span>        <span><span><span><label</span>></span>Editor<span><span></label</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>   <span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span>
</span>

4. addpost.php:

<span><span><span><div</span> class<span>="modal fade"</span> id<span>="headingModal"</span> tabindex<span>="-1"</span> aria-labelledby<span>="headingModalLabel"</span> aria-hidden<span>="true"</span>></span>
</span>  <span><span><span><div</span> class<span>="modal-dialog"</span>></span>
</span>    <span><span><span><div</span> class<span>="modal-content"</span>></span>
</span>      <span><span><span><div</span> class<span>="modal-header"</span>></span>
</span>        <span><span><span><h5</span> class<span>="modal-title"</span> id<span>="headingModalLabel"</span>></span>Add a heading:<span><span></h5</span>></span>
</span>        <span><span><span><button</span> type<span>="button"</span> class<span>="btn-close"</span> data-bs-dismiss<span>="modal"</span> aria-label<span>="Close"</span>></span><span><span></button</span>></span>
</span>      <span><span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="modal-body"</span>></span>
</span>        <span><span><span><div</span> class<span>="mb-3"</span>></span>
</span>          <span><span><span><input</span> type<span>="text"</span> class<span>="form-control"</span> id<span>="headingContent"</span>></span>
</span>        <span><span><span></div</span>></span>
</span>      <span><span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="modal-footer"</span>></span>
</span>        <span><span><span><button</span> type<span>="button"</span> class<span>="btn btn-light"</span>  <span>onclick<span>="<span>resetValue('heading')</span>"</span></span> data-bs-dismiss<span>="modal"</span>></span>Cancel<span><span></button</span>></span>
</span>        <span><span><span><button</span> type<span>="button"</span> class<span>="btn btn-primary"</span> <span>onclick<span>="<span>createComponent('heading')</span>"</span></span> data-bs-dismiss<span>="modal"</span>></span>Save<span><span></button</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>

Sobald Sie diese PHP -Dateien eingerichtet haben, sollten Sie in der Lage sein, alle grundlegenden Funktionen eines CMS mit der Bearbeitungsleistung eines WYSIWYG -Editors auszuführen. Denken Sie bei der Herstellung Ihres eigenen CMS daran, die Eingaben zu bereinigen und die Abfragen unter anderem die Sicherheitsmaßnahmen zu parametrisieren, um Ihre Benutzer und Anwendungen vor bestimmten Schwachstellen sicher zu halten.

Neugierig, unser Basis -CMS in Aktion zu sehen? Testen wir es!

Erstellen Sie zunächst einige Seitenkomponenten mit der von uns erstellten Symbolleiste.

Wie Sie sehen können, können wir nun die Komponenten, die in unserer Komponentendatenbanktabelle gespeichert und mit PHP wieder an die Schnittstelle angezeigt werden, einfach erstellen. Wenn wir unsere Tabelle mit SSMS überprüfen, sollten wir die unten angegebenen Daten sehen.

Nachdem wir eine von jeder Komponente erstellt haben, einschließlich einer Editor -Instanz, versuchen wir einen Beitrag zu unserer Seite hinzuzufügen.

Im obigen Video können wir einige Funktionen sehen, die ein leistungsstarker Wysiwyg -Editor anbieten kann. Dazu gehören Schriftart Formatierung, Kopieren des Formats und Bild-Uploads. Es zeigt auch die Anzahl der Zeichen in der unteren rechten Ecke für den Charakter Count-Count-bewusster Schriftsteller.

Nach dem Speichern des Inhalts sehen wir, dass er direkt unter dem Editor angezeigt wird. Möglicherweise möchten Sie mehr Polsterung und Design hinzufügen oder die Anzeige für Ihre Beiträge vollständig ändern, dies ist jedoch vorerst ausgelegt.

Froala bietet über hundert Funktionen, mit denen die Bearbeitung von Inhalten und die Benutzererfahrung bereichert werden können. Sie sind auch gut platziert, um überwältigende Benutzer zu verhindern. Der Editor ist anpassbar, sodass Sie nur die Funktionen, die Ihre Benutzer verwenden möchten, einbeziehen können.

Nachdem wir den Inhalt unseres Beitrags gespeichert haben, können wir jetzt die Datenbanktabelle überprüfen.

Das obige Bild zeigt den Inhalt des von uns erstellten Editors sowie seine ID und das Datum der Veröffentlichung. Sie können auch sehen, dass der HTML -Code in der Spalte post_content erhalten bleibt.

Für größere CMS -Anwendungen können Sie unter anderem zusätzliche Beitragsinformationen, einschließlich Benutzerdetails, Kommentare, Seiteninteraktionen und Statistiken, speichern. Natürlich müssten Sie dafür andere verwandte Tabellen erstellen.

Sehen wir uns schließlich an, wie Endbenutzer die Seite mit unserer Symbolleistenschaltfläche anzeigen.

Und da haben Sie es - ein CMS, auf dem Sie aufbauen können; Eine felsenfeste Grundlage für komplizierte CMS-Projekte in der Zukunft.

Was kommt als nächstes?

Jetzt, da Sie über die erforderlichen Werkzeuge und Kenntnisse verfügen, um ein einfaches, aber solides CMS zu erstellen, ist es an der Zeit, Ihre nächsten Schritte zu bestimmen. Sie können viele Verbesserungen beim Übergang dieses CMS in einen ausgewachsenen.

vornehmen.

Eine Verbesserung ist die Schnittstelle und das Hinzufügen neuer Funktionen. Dazu gehören Benutzerzugriffsrechte, Kommentarbereiche, Suchmaschinen, zusätzliche Tools, Seitenkomponenten und Themen, um nur einige zu nennen.

Eine weitere offensichtliche Verbesserung, die Sie vornehmen können, ist die Sicherheit. Sie können Ihre CMS, Server, Daten, Benutzer und Ihr Unternehmen damit schützen. Wir empfehlen, diesen Link nach einem Leitfaden von OWASP (Open Web Application Security Project) zu überprüfen, das die besten Sicherheitspraktiken erklärt.

Möglicherweise möchten Sie auch mehr über den Wysiwyg -Editor Ihrer Wahl erfahren. Beispielsweise können Sie überprüfen, ob es eine umfassende und leicht verständliche Dokumentationsseite hat (klicken Sie hier, um ein Beispiel anzuzeigen).

Eine andere Möglichkeit, sich mit einem Editor vertraut zu machen, besteht darin, seine Demos und die kostenlose Testversion zu verwenden. Und wenn Sie die Vorteile sehen, die sie bringen können, können Sie sich nach Belieben verpflichten. Diese Redakteure sparen Zeit und Sie benötigen diese zusätzlichen Monate (oder sogar Jahre), um die anderen Funktionen Ihres CMS zu erstellen und zu polieren.

Schließlich müssten Sie mehr über CMS -Best Practices lesen. Sie ändern sich von Zeit zu Zeit, daher ist es immer besser, aktualisiert zu werden.

Wir hoffen, dass Sie es genossen haben, diesen Leitfaden zu lesen, und dass Ihr Ziel, ein CMS zu erstellen, jetzt einfacher zu erreichen scheint.

häufig gestellte Fragen (FAQs) zum Erstellen eines einfachen CMS für die einfache Bearbeitung

Was sind die wichtigsten Funktionen beim Erstellen eines einfachen CMS? Dazu gehören eine einfache und intuitive Schnittstelle, einfache Inhaltsverwaltung, Flexibilität und Anpassungsoptionen. Das CMS sollte auch über ein robustes Sicherheitssystem verfügen, um Ihre Inhalte zu schützen. Erwägen Sie außerdem, SEO-freundliche Funktionen einzubeziehen, um die Sichtbarkeit Ihrer Website in Suchmaschinen zu verbessern.

Wie kann ich sicherstellen, dass mein CMS benutzerfreundlich ist? Konzentrieren Sie sich darauf, eine intuitive Oberfläche zu erstellen, die leicht zu navigieren ist. Dies umfasst klare Menüs, leicht zu findende Schaltflächen und eine logische Struktur. Bieten Sie außerdem eine umfassende Dokumentation und Unterstützung, damit Benutzer verstehen, wie das CMS effektiv verwendet wird.

Wie kann ich mein CMS flexibel und anpassbar machen? Funktionen, mit denen Benutzer das Layout, das Design und die Funktionalität ihrer Websites ändern können. Dies kann Optionen zum Ändern von Themen, Hinzufügen von Plugins und das Anpassen von Code enthalten. Stellen Sie außerdem sicher, dass Ihr CMS verschiedene Inhaltstypen wie Text, Bilder und Videos unterstützt. um Ihren Inhalt zu schützen. Dies kann Funktionen wie starke Kennwortanforderungen, Zwei-Faktor-Authentifizierung und regelmäßige Sicherheitsaktualisierungen umfassen. Erwägen Sie außerdem, Maßnahmen zum Schutz vor häufigen Sicherheitsbedrohungen wie SQL-Injektion und Cross-Site-Skripten einzubeziehen. Friendly, sollten Sie Funktionen in Betracht ziehen, mit denen die Sichtbarkeit Ihrer Website in Suchmaschinen verbessert wird. Dies kann Optionen zum Hinzufügen von Meta-Tags, zum Erstellen von SEO-freundlichen URLs und zum Integrieren in beliebte SEO-Tools enthalten. Stellen Sie außerdem sicher -Party -Tools mit Ihrem CMS können seine Funktionalität verbessern und sie effizienter machen. Dies kann Tools für SEO, Analytics, Social Media -Integration und mehr umfassen. Stellen Sie jedoch sicher, dass diese Integrationen die Sicherheit oder Leistung Ihres CMS nicht beeinträchtigen.

Wie kann ich sicherstellen von Inhalten und Benutzern ohne Kompromisse bei der Leistung. Dies könnte die Optimierung Ihres Codes, die Verwendung effizienter Datenbanken und die Implementierung von Caching -Techniken beinhalten. Erwägen Sie außerdem eine flexible Architektur, die sich an sich ändernde Bedürfnisse anpassen kann.

Mit welchen Programmiersprachen soll ich mein CMS erstellen? Zu den beliebten Auswahlmöglichkeiten gehören jedoch PHP, JavaScript und Python. Diese Sprachen werden weit verbreitet, haben eine starke Unterstützung der Community und bieten verschiedene Bibliotheken und Frameworks an, die den Entwicklungsprozess vereinfachen können.

Wie kann ich die Leistung meines CMS? Erwägen Sie von Tools, mit denen die Benutzeraktivität simulieren und wie Ihr CMS reagiert. Dies kann Lasttest -Tools, Leistungsüberwachungstools und Analysetools umfassen. Überprüfen Sie die Leistung Ihres CMS regelmäßig und machen Sie die erforderlichen Optimierungen, um sicherzustellen, dass sie effizient bleibt. Um sicherzustellen, dass sie es effektiv nutzen können. Dies könnte das Erstellen detaillierter Dokumentationen, die Bereitstellung von Tutorials und das Angebot eines Support -Forums oder Helpdesks umfassen. Erwägen Sie außerdem, ein Feedback -System einzubeziehen, um Benutzerersichten zu sammeln und Verbesserungen vorzunehmen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein einfaches CMS, das die Bearbeitung erleichtert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!