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!