recherche

Maison >Périphériques technologiques >Industrie informatique >Comment créer un CMS simple qui facilite l'édition

Comment créer un CMS simple qui facilite l'édition

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌original
2025-02-09 09:32:10883parcourir

Comment créer un CMS simple qui facilite l'édition

Dans cet article, nous examinerons un moyen simple de créer votre propre système de gestion de contenu qui facilite l'édition et la mise à jour de votre site Web.

Nous avons créé cet article en partenariat avec Froala. Merci de soutenir les partenaires qui rendent le point de point possible.

Les plats clés

  • Utilisez une combinaison de HTML / CSS / JavaScript / jQuery et bootstrap pour le développement du frontend pour assurer la réactivité et la facilité de conception.
  • Utilisez PHP et Microsoft SQL Server pour les opérations backend, avec une option pour passer à d'autres SGBD comme MySQL ou MARIADB selon les préférences de l'utilisateur.
  • Intégrer Froala, un éditeur HTML WYSIWYG, pour améliorer les capacités d'édition de contenu, ce qui permet aux administrateurs de gérer efficacement le contenu du site Web.
  • Focus sur la création d'une interface conviviale qui comprend une barre d'outils dynamique pour ajouter des composants de page et un système modal pour la gestion des entrées.
  • Assurez-vous que le CMS prend en charge les fonctionnalités de base telles que la création, la visualisation, l'édition et la suppression du contenu, avec un potentiel d'évolutivité et d'améliorations de sécurité dans les développements futurs.

ce que sont les CMS

Les systèmes de gestion de contenu (CMSS) sont des outils puissants et populaires pour fabriquer des plates-formes qui dépendent fortement du contenu. Ils fournissent aux utilisateurs des moyens faciles de créer, publier, afficher et modifier le contenu.

De plus, ils nécessitent souvent peu ou pas d'expérience de codage. Cela en fait un bon choix pour les blogueurs, les entreprises, les développeurs ou toute personne qui souhaite créer un site Web avec moins d'efforts.

Les CMS

sont utilisés à différentes fins sur différents champs. Par exemple, ils pourraient être utilisés pour alimenter les blogs, les sites Web d'entreprise ou indépendants, les sites Web éducatifs ou même les plateformes de commerce électronique. Pour cette raison, l'utilisation d'un CMS reste une option populaire et pertinente, sécuriser sa place dans le développement Web pour les années à venir.

Il y a beaucoup de CMS disponibles sur le marché. Certains sont open source, tandis que d'autres peuvent être utilisés pour un prix. Les CMS open-source et payants sont des choix viables et présentent leurs avantages. Il pourrait également y avoir des cas où vous souhaitez créer votre propre CMS.

Vous pourriez être un développeur à la recherche d'un défi, un étudiant chargé de créer un CMS ou une entreprise qui aspire à être un grand nom dans l'industrie CMS. Si vous souhaitez créer un système de gestion de contenu, cet article est pour vous.

se préparer à construire votre propre CMS

Nous ferons un CMS de base (c'est-à-dire assez utilisable) en utilisant les outils suivants:

  • html / css / javascript / jQuery pour le frontend
  • bootstrap pour la réactivité et la conception facile
  • php pour le backend
  • MS SQL Server (ou équivalent) pour stocker les données
  • SSMS (SQL Server Management Studio ou équivalent) pour créer la base de données et les tables
  • Froala, un éditeur HTML Wysiwyg (ce que vous voyez est ce que vous obtenez) pour l'édition de contenu

Bien que le CMS que nous fabriquerons soit basique, il sera également assez solide. En effet, Froala, l'éditeur WYSIWYG que nous utiliserons, possède la plupart des fonctionnalités que vous souhaitez dans un éditeur CMS. Cet article devrait vous mettre sur la bonne voie, quel que soit l'objectif final de votre CMS.

Aussi, prenez note que le DBMS (Database Management System) que j'utiliserai est Microsoft SQL Server, car c'est ce que je connais le plus. Vous pouvez facilement l'échanger pour vos SGBD préférés, tels que MySQL ou MARIADB. Comme nous ne faisons rien de particulièrement compliqué avec la base de données, le choix de DBMS n'a pas beaucoup d'importance ici .

Avant de continuer, supposons que vous avez déjà PHP, les SGBD de votre choix et Froala installés sur votre ordinateur. Si vous ne l'avez pas déjà fait, vous pouvez les installer en visitant leurs sites Web respectifs et en suivant les instructions.

Qu'y a-t-il dans un CMS?

Habituellement, dans les systèmes de gestion de contenu, il existe des administrateurs et des utilisateurs finaux. Les administrateurs gèrent les pages, les composants et le contenu du site Web. Ils maintiennent le site, garantissant chaque fonctionnalité et créant des améliorations si nécessaire.

Les utilisateurs finaux, en revanche, interagissent avec les pages et les composants du site Web alimenté par CMS pour créer, modifier et consommer du contenu. Les deux utilisateurs interagissent généralement avec un éditeur WYSIWYG au sein de la CMS pour la création et l'édition de contenu.

À des fins de démonstration, et pour garder les choses simples, nous implémenterons uniquement un CMS d'une page pour les administrateurs. Dans une CMS de production, nous devons considérer de nombreux autres facteurs qui dépassent le champ d'application de ce tutoriel. Il s'agit notamment de la gestion des utilisateurs et des droits d'accès, de la sécurité (désinfection des entrées, des requêtes paramétrées, etc.), des performances, etc.

Dans notre simple CMS, les administrateurs devraient pouvoir effectuer les tâches suivantes:

  • Interagissez avec une barre d'outils pour créer des composants de page tels que les en-têtes, le texte, les liens et une instance de l'éditeur Froala
  • Interagissez avec une instance Froala pour publier du contenu qui sera affiché
  • Afficher le contenu publié
  • Entrez le mode View, qui masque la barre d'outils

Les administrateurs peuvent également généralement modifier et supprimer les composants de la page, mais respectons la création et la suppression des composants. Avec ces fonctionnalités à l'esprit, commençons notre processus en créant un schéma de base de données.

Configuration de la base de données

Puisque nous avons des exigences simples, nous avons également une structure de base de données plus simple. Pour notre échantillon CMS, nous n'utiliserons que deux tables non apparentées:

  • post
    • post_id: int, identité (1,1), pas nul, clé primaire
    • post_content: varchar (max), pas null
    • posté_on: datetime2 (7), pas nul
  • Composant
    • Component_id: int, identité (1,1), pas nul, clé primaire
    • Component_Type: char (8), pas null
    • Component_Content: varchar (255), nullable
    • créé_on: datetime2 (7), pas nul

Le premier tableau, Post, stockera le contenu à partir d'un composant d'éditeur, tandis que le tableau des composants stockera les éléments de page générés à l'aide de la barre d'outils.

Notez que les URL ont une longueur maximale de 2048 caractères dans la plupart des navigateurs, mais dans notre base de données, nous le définirons uniquement sur 255 caractères. De plus, vous pouvez également modifier les colonnes ID des deux tables en chaînes randomisées pour votre application.

Création de l'interface

Nous inclurons les liens CDN pour Bootstrap, les icônes bootstrap et les fichiers CSS et JS de Froala. Nous aurons également nos fichiers CSS et JS personnalisés: 

<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>

Les composants suivants sur lesquels nous travaillerons sont le Navbar et la barre d'outils. La barre navale contient le titre ou la marque du site et un bouton d'icône pour basculer la visibilité de la barre d'outils (considérez-le comme un bouton «Toggle Admin View»).

D'un autre côté, la barre d'outils contient quatre boutons correspondant aux quatre composants qui peuvent être ajoutés par programme à la page: 

<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>

Le code ci-dessus crée la barre navale et les composants. La couleur d'arrière-plan de la barre de navigation est # 0098F7, ce qui lui donne une teinte bleue. L'événement ToggleToolbar () OnClick est responsable de la cachette des éléments de la barre d'outils. Ensuite, écrivez le code de la barre d'outils: 

<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>

Nous utilisons l'affichage de la grille de bootstrap (cliquez ici pour en savoir plus) et des options de dimensionnement pour fabriquer ses composants de bouton pour notre barre d'outils. Nous utilisons également des icônes bootstrap à côté des étiquettes des boutones pour une meilleure lisibilité. Lorsque vous faites votre propre CMS, il existe de nombreuses façons de représenter votre barre d'outils.

Les options habituelles sont les éléments navbar , cartes , ou offCanvas . Dans ce cas, nous les représentons en utilisant des rectangles de type carte, chacun ayant un comportement de type bouton.

Nous allons également ajouter des événements pour nos boîtes de barre d'outils. Notez que nous ouvrirons un modal dont le code est illustré ci-dessous pour chacune des trois premières cases (en-tête, texte et lien).

chacun contient un champ de saisie (deux pour les liens, un pour le texte et un pour l'URL). Enfin, nous appellerons la fonction CreateComponent pour initialiser notre éditeur HTML WYSIWYG pour CMS: 

<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>

Le code ci-dessus montre l'un des modaux - en particulier, celui utilisé pour ajouter une nouvelle rubrique à la page. Ce modal est affiché lorsqu'un utilisateur clique sur le bouton / carte de la tête. Il est rejeté lorsque le bouton de sortie ou d'annulation est cliqué, ou qu'un en-tête est ajouté.

Les autres modaux fonctionnent de manière similaire, mais notez qu'une entrée de liaison appropriée doit avoir deux champs d'entrée pour le texte et l'URL (pour l'instant, nous n'utiliserons qu'un): 

<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>

Enfin, nous allons ajouter l'extrait de code ci-dessus au fichier index.css pour modifier la couleur d'arrière-plan d'une boîte d'outils et le curseur de souris sur le plan de volant. Une fois terminé, votre interface utilisateur doit apparaître comme indiqué ci-dessous.

Comment créer un CMS simple qui facilite l'édition

Maintenant que nous avons configuré l'interface, il est temps d'ajouter des fonctionnalités avec JavaScript.

Envoi des données

Dans notre fichier index.js, nous définirons cinq fonctions pour les fonctionnalités suivantes: création de composants, basculer la visibilité de la barre d'outils, réinitialiser les champs d'entrée, charger des poteaux et le chargement des composants. Voyons ce que chacun d'eux fait.

  1. createComponent (ComponentType)

    Nous utiliserons cette fonction pour envoyer des composants créés à la base de données. Il faut ComponentType, qui décrit le type de composant (lien, en-tête, texte, éditeur), comme paramètre. Tout d'abord, nous devons déterminer le type de composant à l'aide d'une instruction de cas de commutateur. Pour les titres, les textes et les liens, nous enverrons simplement leur contenu avec leur type de composant à php / add.php à l'aide d'une demande AJAX. D'un autre côté, pour les éditeurs, nous n'aurons qu'à envoyer le type de composant. Une fois le contenu enregistré avec succès, nous appellerons la fonction getComponents () pour «actualiser» les composants affichés.

  2. toggletoolbar ()

    Cette fonction ajoute ou supprime simplement les classes D-Flex et D-None de la barre d'outils selon les besoins.

  3. ResetValue (ComponentType)

    Une fonction qui a le paramètre ComponentType, ResetValue réinitialise la valeur des champs d'entrée en obtenant chaque élément par ID et en définissant sa valeur sur une chaîne vide.

  4. getComponents ()

    Cette fonction fait d'abord une demande AJAX HTTP à PHP / Load.php pour obtenir les données des composants de la base de données. En cas de succès, il génère dynamiquement du HTML selon les composants récupérés à partir de la base de données (par exemple, un élément

    pour les composants de cap). Ensuite, pour chaque composant d'éditeur, une instance Froala est initialisée avec un bouton de sauvegarde. Enfin, un écouteur d'événements de clic est ajouté aux boutons pour enregistrer les publications écrites au sein des éditeurs. Au cours du succès, la fonction getPosts () est appelée pour «actualiser» la liste des publications.

  5. getPosts ()

    La fonction getPosts () se compose d'une demande AJAX qui récupère tous les messages de la base de données via php / loadpost.php. Semblable à getComponents (), cette fonction génère dynamiquement du HTML pour afficher les publications.

Sur la charge de document, les fonctions GetComponents () et GetPosts () sont appelées. Maintenant que vous avez le code JS nécessaire pour envoyer des données au serveur, il ne reste plus que de le traiter dans le backend.

Préparation du backend

Comme vous l'avez peut-être remarqué plus tôt, nous avons quatre fichiers PHP - deux pour l'ajout de composants et de messages, et deux pour les charger. Ils sont constitués d'un code similaire, à partir de la connexion à la base de données avec SQLSRV_Connect, d'obtenir les variables $ _post (le cas échéant), et de définir et d'exécuter la requête. Vous trouverez ci-dessous les requêtes impliquées dans ces fichiers:

  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>
  1. loadpost.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>
  1. 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>
  1. 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>

Une fois que vous avez défini ces fichiers PHP, vous devriez être en mesure d'effectuer toutes les fonctions de base d'un CMS avec la puissance d'édition d'un éditeur WYSIWYG. Lorsque vous faites votre propre CMS, n'oubliez pas de désinfecter les entrées et de paramétrer les requêtes, entre autres mesures de sécurité, pour protéger vos utilisateurs et applications de certaines vulnérabilités.

curieux de voir notre CMS de base en action? Tessons-le!

Tout d'abord, créons des composants de page à l'aide de la barre d'outils que nous avons construite.

Comme vous pouvez le voir, nous pouvons désormais créer facilement les composants, qui sont enregistrés dans notre table de base de données de composants et affichés à l'interface à l'aide de PHP. Si nous vérifions notre tableau à l'aide de SSMS, nous devrions voir les données ci-dessous.

Comment créer un CMS simple qui facilite l'édition

Maintenant que nous avons créé un de chaque composant, y compris une instance d'éditeur, essayons d'ajouter un message à notre page.

Dans la vidéo ci-dessus, nous pouvons voir certaines fonctionnalités qu'un puissant éditeur WYSIWYG peut offrir. Ceux-ci incluent le formatage des polices, la copiation de copie tout en préservant le format et les téléchargements d'images. Il montre également le nombre de caractères dans le coin inférieur droit pour l'écrivain conscient du nombre de personnages.

Après avoir enregistré le contenu, nous le voyons affiché juste en dessous de l'éditeur. Vous voudrez peut-être ajouter plus de rembourrage et de conception ou modifier complètement l'écran pour vos messages, mais cela fera l'affaire pour l'instant.

Froala fournit plus d'une centaine de fonctionnalités pouvant enrichir l'édition de contenu et l'expérience utilisateur. Ils sont également bien placés pour empêcher les utilisateurs écrasants. L'éditeur est personnalisable, vous ne pouvez donc inclure uniquement les fonctionnalités que vous souhaitez que vos utilisateurs utilisent.

Ayant enregistré le contenu de notre message, nous pouvons maintenant vérifier la table de base de données.

Comment créer un CMS simple qui facilite l'édition

L'image ci-dessus montre le contenu de l'éditeur que nous avons créé, ainsi que son identifiant et sa date de publication. Vous pouvez également voir que le code HTML de la colonne post_content est conservé.

Pour les applications CMS plus grandes, vous pouvez stocker des informations de publication supplémentaires, y compris les détails de l'utilisateur, les commentaires, les interactions de pages et les statistiques, entre autres. Bien sûr, vous devez faire d'autres tables connexes pour cela.

Enfin, voyons comment les utilisateurs finaux voient la page à l'aide de notre bouton de basculement de la barre d'outils.

Et là vous l'avez - un CMS sur lequel vous pouvez construire; une base solide pour les projets CMS compliqués à l'avenir.

Quelle est la prochaine étape?

Maintenant que vous avez les outils et les connaissances nécessaires pour créer un CMS simple mais solide, il est temps de déterminer vos prochaines étapes. Vous pouvez apporter de nombreuses améliorations dans la transition de ce CMS en un CMS à part entière.

Une amélioration est l'interface et l'ajout de nouvelles fonctionnalités. Il s'agit notamment des droits d'accès aux utilisateurs, des sections de commentaires, des moteurs de recherche, des outils supplémentaires, des composants de page et des thèmes, pour n'en nommer que quelques-uns.

Une autre amélioration évidente que vous pouvez apporter est la sécurité. Vous pouvez protéger votre CMS, votre serveur, vos données, vos utilisateurs et votre entreprise. Nous vous recommandons de consulter ce lien pour un guide de OWASP (Open Web Application Security Project) qui explique les meilleures pratiques de sécurité.

Vous pouvez également en savoir plus sur l'éditeur WYSIWYG de votre choix. Par exemple, vous pouvez vérifier s'il a une page de documentation complète et facile à comprendre (cliquez ici pour voir un exemple).

Une autre façon de vous familiariser avec un éditeur est d'utiliser ses démos et son essai gratuit. Et lorsque vous voyez les avantages qu'il peut apporter, vous pouvez vous engager à votre convenance. Ces éditeurs gagnent du temps et vous aurez besoin de ces mois (voire des années) supplémentaires pour créer et polir les autres fonctionnalités de votre CMS.

Enfin, vous devrez en savoir plus sur les meilleures pratiques CMS. Ils changent de temps en temps, donc être mis à jour est toujours mieux.

Nous espérons que vous avez aimé lire ce guide et que votre objectif de créer un CMS semble maintenant plus facile à atteindre.

Questions fréquemment posées (FAQ) sur la création d'un CMS simple pour l'édition facile

Quelles sont les principales fonctionnalités à considérer lors de la création d'un CMS simple?

Lors de la création d'un CMS simple, il est important de considérer les fonctionnalités qui le rendront convivial et efficace. Ceux-ci incluent une interface simple et intuitive, une gestion de contenu facile, une flexibilité et des options de personnalisation. Le CMS devrait également avoir un système de sécurité robuste pour protéger votre contenu. De plus, envisagez d'incorporer des fonctionnalités conviviales pour améliorer la visibilité de votre site sur les moteurs de recherche.

Comment puis-je m'assurer que mon CMS est convivial?

Pour vous assurer que votre CMS est convivial, Concentrez-vous sur la création d'une interface intuitive facile à naviguer. Cela comprend des menus clairs, des boutons faciles à trouver et une structure logique. De plus, fournissez une documentation complète et un support pour aider les utilisateurs à comprendre comment utiliser efficacement le CMS.

Comment puis-je rendre mon CMS flexible et personnalisable?

pour rendre votre CMS flexible et personnalisable, envisager d'incorporer fonctionnalités qui permettent aux utilisateurs de modifier la disposition, la conception et les fonctionnalités de leurs sites. Cela pourrait inclure des options pour modifier les thèmes, l'ajout de plugins et la personnalisation du code. De plus, assurez-vous que votre CMS prend en charge divers types de contenu, tels que du texte, des images et des vidéos.

Quelles mesures de sécurité dois-je mettre en œuvre dans mon CMS?

La mise en œuvre de mesures de sécurité robustes dans votre CMS est cruciale pour protéger votre contenu. Cela pourrait inclure des fonctionnalités telles que les exigences de mot de passe solides, l'authentification à deux facteurs et les mises à jour de sécurité régulières. De plus, envisagez d'incorporer des mesures pour protéger contre les menaces de sécurité communes, telles que l'injection SQL et les scripts croisés.

Comment puis-je faire de mon SEO CMS?

pour faire de votre CMS SEO Friendly, envisagez d'incorporer des fonctionnalités qui aident à améliorer la visibilité de votre site sur les moteurs de recherche. Cela pourrait inclure des options pour ajouter des balises Meta, créer des URL conviviales et intégré aux outils de référencement populaires. De plus, assurez-vous que votre CMS prend en charge les temps de chargement rapide et la conception conviviale, car ces facteurs peuvent également avoir un impact sur le référence -Les outils en partie avec votre CMS peuvent améliorer sa fonctionnalité et le rendre plus efficace. Cela pourrait inclure des outils pour le référencement, l'analyse, l'intégration des médias sociaux, etc. Cependant, assurez-vous que ces intégrations ne compromettent pas la sécurité ou les performances de votre CMS.

Comment puis-je m'assurer que mon CMS est évolutif?

Pour vous assurer que votre CMS est évolutif, concevez-le pour gérer les quantités croissantes du contenu et des utilisateurs sans compromettre les performances. Cela pourrait impliquer l'optimisation de votre code, l'utilisation de bases de données efficaces et la mise en œuvre de techniques de mise en cache. De plus, envisagez d'utiliser une architecture flexible qui peut s'adapter aux besoins changeants.

Quels langages de programmation dois-je utiliser pour créer mon CMS?

Le choix des langages de programmation pour la création de votre CMS dépend de vos besoins et de votre expertise spécifiques. Cependant, les choix populaires incluent PHP, JavaScript et Python. Ces langues sont largement utilisées, ont un solide support communautaire et offrent diverses bibliothèques et cadres qui peuvent simplifier le processus de développement.

Comment puis-je tester les performances de mon CMS?

pour tester les performances De votre CMS, envisagez d'utiliser des outils qui peuvent simuler l'activité des utilisateurs et surveiller comment votre CMS réagit. Cela pourrait inclure des outils de test de charge, des outils de surveillance des performances et des outils d'analyse. De plus, passez régulièrement les performances de votre CMS et effectuez les optimisations nécessaires pour vous assurer qu'elle reste efficace.

Comment puis-je fournir une prise en charge des utilisateurs de mon CMS?

Fournir un support complet pour les utilisateurs de votre CMS est crucial pour s'assurer qu'ils peuvent l'utiliser efficacement. Cela pourrait inclure la création de documents détaillés, la fourniture de tutoriels et l'offre d'un forum d'assistance ou d'un service d'assistance. De plus, envisagez d'incorporer un système de rétroaction pour rassembler les informations des utilisateurs et apporter des améliorations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Python php JavaScript sql mysql jquery css ajax bootstrap less html String NULL define if switch count for while date format include require try char int using Nullable Length Interface finally Event copy delete JS number function this display padding background column flex input table database mariadb http microsoft cms Access SEO Foundation Other
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：10 des meilleures polices de programmationArticle suivant：10 des meilleures polices de programmation

Articles Liés

Voir plus