网络

如何创建一个简单的CMS，使编辑变得容易

    必威西盟体育网页登录SitePoint赞助商
    分享

    在这篇文章中，我们将看看一个简单的方法来建立你自己的内容管理系统，使编辑和更新你的网站变得容易。

    我们与<一个href＝＂https://froala.com/?utm_source=Sitepoint&utm_medium=LeadsAcquisition&utm_content=article" rel="sponsored">Froala．感谢您对合作伙伴的支持，是他们让SitePoint成为可能。必威西盟体育网页登录

    cms是什么

    内容管理系统(cms)是制作高度依赖内容的平台的强大且流行的工具。它们为用户提供了创建、发布、查看和编辑内容的简单方法。

    此外，它们通常只需要很少甚至不需要编码经验。这使得他们成为博主，企业，开发人员，或任何想要建立一个网站的人一个很必威滚好的选择。

    cms用于不同领域的不同目的。例如，它们可以用于博客、公司或自由职业者网站、教育网站，甚至电子商务平台。必威滚正因为如此，使用CMS仍然是一个流行的和相关的选择，确保其在未来几年的web开发中的地位。

    市场上有很多可用的cms。有些是开源的，而另一些则可以有偿使用。开源和付费cms都是可行的选择，都有各自的优势。在某些情况下，您可能希望创建自己的CMS。

    你可能是一个寻求挑战的开发人员，一个肩负创建CMS任务的学生，或者一个渴望成为CMS行业大品牌的企业。如果您想创建一个内容管理系统，那么本文非常适合您。

    准备构建自己的CMS

    我们将使用以下工具制作一个基本的(即足够可用的)CMS:

      <李>HTML/CSS/JavaScript/jQuery前端<李>引导响应和简单的设计<李>后端PHP<李>MS SQL Server(或等效)用于存储数据<李>SSMS (SQL Server Management Studio或同等工具)用于创建数据库和表<李>Froala，所见即所得(所见即所得)<一个href＝＂https://froala.com/wysiwyg-editor/?utm_source=Sitepoint&utm_medium=LeadsAcquisition&utm_content=article" rel="sponsored">HTML编辑器内容编辑

    虽然我们将制作的CMS是基本的，但它也将非常坚固。这是因为我们将使用的所见即所得编辑器Froala具有CMS编辑器中需要的大多数功能。无论CMS的最终目标是什么，本文都将引导您走上正确的轨道。

    另外，请注意，我将使用的DBMS(数据库管理系统)是Microsoft SQL Server，因为它是我最熟悉的。你可以很容易地把它换成你喜欢的DBMS，比如MySQL或MariaDB。由于我们没有对数据库做任何特别复杂的事情，DBMS的选择在这里不太重要．

    在继续之前，让我们假设您已经在计算机上安装了PHP、您选择的DBMS和Froala。如果您还没有安装，可以通过访问它们各自的网站并按照说明安装它们。

    CMS里有什么?

    通常，在内容管理系统中，有管理员和最终用户。管理员管理网站的页面、组件和内容。他们维护网站，确保每个功能都能正常工作，并在需要的地方进行改进。

    另一方面，终端用户与cms支持的网站的页面和组件交互，以创建、编辑和消费内容。这两个用户通常与CMS中的WYSIWYG编辑器进行交互，以创建和编辑内容。

    出于演示目的和简单起见，我们将仅为管理员实现单页CMS。在产品CMS中，我们需要考虑许多超出本教程范围的其他因素。其中包括用户管理和访问权限、安全性(输入消毒、参数化查询等)、性能等等。

    在我们简单的CMS中，管理员应该能够执行以下任务:

      <李>与工具栏交互创建页面组件，如标题、文本、链接和一个Froala编辑器实例<李>与Froala实例交互以发布将要显示的内容<李>查看已发布内容<李>进入视图模式，隐藏工具栏

    管理员通常也可以编辑和删除页面组件，但让我们坚持创建和删除组件。了解了这些功能后，让我们从创建数据库模式开始我们的过程。

    建立数据库

    由于我们有简单的需求，我们也有一个更简单的数据库结构。对于我们的示例CMS，我们将只使用两个不相关的表:

      <李>帖子
      • post_id: int，标识(1,1)，不是null，主键<李>post_content: varchar(max)，不为空<李>posted_on: datetime2(7)，不为空
      <李>组件
      • component_id: int，标识(1,1)，不是null，主键<李>component_type: char(8)，不为空<李>component_content: varchar(255)，可空<李>created_on: datetime2(7)，不为空

    第一张表格，帖子，将存储编辑器组件中的内容，而组件表将存储使用工具栏生成的页面元素。

    注意url有一个最大长度2048个字符在大多数浏览器中，但在我们的数据库中，我们将它设置为255个字符。此外，您可能还希望将两个表的ID列更改为应用程序的随机字符串。

    新建接口

    我们将包括引导，引导图标和Froala的CSS和JS文件的CDN链接。我们还有自定义的CSS和JS文件:

    <！——包括引导CSS——><链接href＝＂https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css＂rel＝＂样式表＂完整性＝＂sha384-gH2yIJqKdNHPEq0n4Mqa / HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl / vI1Bx＂crossorigin＝＂匿名＂><！——包括引导图标——><链接rel＝＂样式表＂href＝＂https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css＂><！—包括Froala编辑器CSS—><链接href＝＂css / froala_editor.pkgd.min.css＂rel＝＂样式表＂类型＝＂文本/ css＂/><！-包括自定义CSS- ><链接href＝＂css / index.css＂rel＝＂样式表＂类型＝＂文本/ css＂/><！——包括Popper JS——><脚本src＝＂https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js＂完整性＝＂sha384-Xe + 8 cl9oja6tn / veChSP7q + mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk＂crossorigin＝＂匿名＂>脚本><！——包括Bootstrap JS——><脚本src＝＂https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js＂完整性＝＂sha384-ODmDIVzN + pFdexxHEHFBQH3/9 / vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK＂crossorigin＝＂匿名＂>脚本><！——包括jQuery ><脚本src＝＂https://code.jquery.com/jquery-3.6.1.js＂完整性＝＂sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC / 7句=＂crossorigin＝＂匿名＂>脚本><！——包括Froala JS——><脚本类型＝＂text / javascript＂src＝＂js / froala_editor.pkgd.min.js＂>脚本><！——包括自定义JS——><脚本类型＝＂text / javascript＂src＝＂js / index.js＂>脚本>

    下面我们要处理的组件是导航栏和工具栏。导航栏包含网站的标题或品牌和一个图标按钮，用于切换工具栏的可见性(可以将其视为“切换管理视图”按钮)。

    另一方面，工具栏包含四个按钮，对应于可以以编程方式添加到页面的四个组件:

    <div类＝＂行＂><导航类＝＂导航条navbar-expand-xl＂><div类＝＂container-fluid＂><一个类＝＂navbar-brand设置＂href＝＂＃＂>Froala CMS一个><ul类＝＂Navbar-nav me-auto mb-2 mb-lg-0＂><李类＝＂nav-item＂><一个类＝＂碧碧眼文字白＂href＝＂＃＂onclick＝＂toggleToolbar ()＂>一个>李>ul>div>导航>div>

    上面的代码创建了导航栏和组件。导航栏的背景色为# 0098 f7，给它一个蓝色色调。的toggleToolbar ()Onclick事件负责隐藏工具栏元素。接下来，为工具栏编写代码:

    <div类＝＂行mt-5 px-xl-5 mx-xl-5＂id＝＂工具栏＂><p类＝＂铅ms-xl-5＂>这是你的CMS工具栏。您可以通过单击下面的任何按钮向页面添加新组件。若要切换工具栏的可见性，请单击眼(<我类＝＂bi bi-eye＂>我>)图标。p><div类＝＂col-xxl-3 col-md-4＂><div类＝＂m-xl-5阴影p-xl-5圆形边框border-0 toolbarBox＂data-bs-toggle＝＂模态＂data-bs-target＝＂# headingModal＂><div类＝＂行文本中心显示-4＂><我类＝＂bi bi-type-h1＂>我>div><div类＝＂行文本中心h3＂><标签>标题标签>div>div>div><div类＝＂col-xxl-3 col-md-4＂><div类＝＂m-xl-5阴影p-xl-5圆形边框border-0 toolbarBox＂data-bs-toggle＝＂模态＂data-bs-target＝＂# textModal＂><div类＝＂行文本中心显示-4＂><我类＝＂bi bi-fonts＂>我>div><div类＝＂行文本中心h3＂><标签>文本标签>div>div>div><div类＝＂col-xxl-3 col-md-4＂><div类＝＂m-xl-5阴影p-xl-5圆形边框border-0 toolbarBox＂data-bs-toggle＝＂模态＂data-bs-target＝＂# linkModal＂><div类＝＂行文本中心显示-4＂><我类＝＂bi bi-link-45deg＂>我>div><div类＝＂行文本中心h3＂><标签>链接标签>div>div>div><div类＝＂col-xxl-3 col-md-4＂><div类＝＂m-xl-5阴影p-xl-5圆形边框border-0 toolbarBox＂onclick＝＂createComponent (＇编辑器＇）＂><div类＝＂行文本中心显示-4＂><我类＝＂bi bi-pencil-square＂>我>div><div类＝＂行文本中心h3＂><标签>编辑器标签>div>div>div>div>

    我们使用Bootstrap的网格显示(单击<一个href＝＂https://getbootstrap.com/docs/5.2/layout/grid/" rel="sponsored">在这里要了解更多)和大小选项，使其按钮组件为我们的工具栏。为了更好的可读性，我们还在按钮标签旁边使用了引导图标。在制作自己的CMS时，有很多方法可以表示工具栏。

    通常的选项是导航条，卡片,或offcanvas元素。在本例中，我们使用类似卡片的矩形表示它们，每个矩形都具有类似按钮的行为。

    我们还将为工具栏框添加一些事件。请注意，我们将打开一个模态，其代码如下所示，分别对应于前三个框(标题、文本和链接)。

    每个都包含一个输入字段(两个用于链接，一个用于文本，一个用于URL)。最后，我们将调用createComponent函数初始化<一个href＝＂https://froala.com/solutions/content-management/?utm_source=Sitepoint&utm_medium=LeadsAcquisition&utm_content=article" rel="sponsored">CMS的所见即所得HTML编辑器：

    <div类＝＂模态消失＂id＝＂headingModal＂tabindex＝＂－1＂aria-labelledby＝＂headingModalLabel＂aria-hidden＝＂真正的＂><div类＝＂模态对话框＂><div类＝＂模式内容＂><div类＝＂modal-header＂><h5类＝＂modal-title＂id＝＂headingModalLabel＂>添加一个标题:h5><按钮类型＝＂按钮＂类＝＂btn-close＂data-bs-dismiss＝＂模态＂aria-label＝＂关闭＂>按钮>div><div类＝＂modal-body＂><div类＝＂mb-3＂><输入类型＝＂文本＂类＝＂表单控件＂id＝＂headingContent＂>div>div><div类＝＂modal-footer＂><按钮类型＝＂按钮＂类＝＂btn btn-light＂onclick＝＂resetValue (＇标题＇）＂data-bs-dismiss＝＂模态＂>取消按钮><按钮类型＝＂按钮＂类＝＂btn btn-primary＂onclick＝＂createComponent (＇标题＇）＂data-bs-dismiss＝＂模态＂>保存按钮>div>div>div>div>

    上面的代码显示了其中一个情态动词——具体地说，就是用于向页面添加新标题的情态动词。当用户点击“Heading”按钮/卡片时，会显示此模式。当退出或取消按钮，或添加标题。

    其他情态动词的工作原理类似，但请注意，一个正确的链接输入应该有两个输入字段的文本和URL(现在，我们只使用一个):

    .toolbarBox:徘徊＊，.toolbarBox:徘徊｛背景颜色：rgb（228，228，228）；光标：指针；｝

    最后，我们将上面的代码片段添加到我们的index.css文件更改工具栏框的背景颜色和鼠标光标悬停。完成后，您的用户界面应该如下所示。

    <我mg src="https://uploads.sitepoint.com/wp-content/uploads/2022/10/1666078296image4.png" alt="我们目前的界面＂loading="lazy">

    现在我们已经设置了接口，是时候使用JavaScript添加功能了。

    发送数据

    在我们的index.js文件中，我们将为以下特性定义五个函数:创建组件、切换工具栏可见性、重置输入字段、加载帖子和加载组件。让我们看看它们都做了什么。

    1. createComponent(组件类型)

      我们将使用这个函数将创建的组件发送到数据库。这需要组件类型，该参数描述了组件的类型(链接、标题、文本、编辑器)。首先，必须使用a确定组件类型切换实例声明。对于标题、文本和链接，我们只将它们的内容及其组件类型发送到php / . php使用AJAX请求。另一方面，对于编辑器，我们只需要发送组件类型。成功保存内容后，我们将调用getComponents ()函数“刷新”显示的组件。

      <李>

      toggleToolbar ()

      属性的添加或删除d-flex而且d-none根据需要从工具栏中创建类。

      <李>

      resetValue(组件类型)

      一个函数组件类型参数,resetValue通过按ID获取每个元素并将其值设置为空字符串，重新初始化输入字段的值。

      <李>

      getComponents ()

      这个函数首先发出一个Ajax HTTP请求php / load.php从数据库中获取组件的数据。如果成功，它将根据从数据库中检索到的组件动态生成HTML<标题>元素为标题组件)。之后，对于每个编辑器组件，初始化一个Froala实例保存按钮。最后,一个点击事件监听器被添加到按钮中，用于保存编辑器中编写的帖子。一旦成功，getPosts ()函数被调用以“刷新”帖子列表。

      <李>

      getPosts ()

      的getPosts ()函数由一个Ajax请求组成，该请求从数据库中检索所有帖子php / loadPosts.php．类似于getComponents ()，此函数动态生成HTML以显示帖子。

    在文档加载时，两者都是getComponents ()而且getPosts ()函数被调用。现在已经有了向服务器发送数据所需的JS代码，剩下的就是在后端处理数据了。

    准备后端

    您可能已经注意到，我们有四个PHP文件——两个用于添加组件和帖子，两个用于加载它们。它们由类似的代码组成，从连接到数据库开始sqlsrv_connect，得到$ _POST变量(如果有的话)，以及定义和运行查询。下面列出了这些文件中涉及的查询:

    1. load.php：
    美元的查询＝SELECT component_id, component_type, component_content FROM component ORDER BY created_on；
    1. loadPosts.php：
    美元的查询＝“SELECT post_id, post_content, posted_on FROM post ORDER BY posted_on”；
    1. . php：
    美元的查询＝“INSERT INTO component (component_type, component_content, created_on) VALUES (?， ?， getdate ())"；
    1. addPost.php：
    美元的查询＝“INSERT INTO post (post_content, posted_on) VALUES (?获取当前日期())”；

    设置好这些PHP文件后，您应该能够使用所见即所得编辑器的编辑功能执行CMS的所有基本功能。在制作自己的CMS时，除了其他安全措施外，请记住清除输入和参数化查询，以保护用户和应用程序免受某些漏洞的侵害。

    想看看我们的基础CMS在行动吗?让我们来测试一下!

    首先，让我们使用构建的工具栏创建一些页面组件。

    如您所见，我们现在可以轻松地创建组件，这些组件将保存到组件数据库表中，并使用PHP显示回接口。如果使用SSMS检查表，应该会看到如下所示的数据。

    <我mg src="https://uploads.sitepoint.com/wp-content/uploads/2022/10/1666078758image2.png" alt="表格中的数据＂loading="lazy">

    现在我们已经创建了每个组件中的一个，包括一个编辑器实例，让我们尝试向页面添加一个帖子。

    在上面的视频中，我们可以看到一个强大的所见即所得编辑器可以提供的一些功能。这些功能包括字体格式化、保留格式的复制粘贴和图像上传。它还在右下角显示字符数敏感写入器的字符数。

    保存内容后，我们看到它显示在编辑器的下方。你可能想要为你的帖子添加更多的填充和设计或完全改变显示，但现在这样就可以了。

    Froala提供了100多个功能，可以丰富内容编辑和用户体验。它们也很好地防止了压倒性的用户。该编辑器是可定制的，因此您可以只包含希望用户使用的功能。

    保存了文章的内容之后，现在可以检查数据库表了。

    <我mg src="https://uploads.sitepoint.com/wp-content/uploads/2022/10/1666078708image3.png" alt="表格中的数据＂loading="lazy">

    上图显示了我们创建的编辑器的内容，以及它的ID和发布日期。上的HTML代码也可以看到post_content列被保留。

    对于较大的CMS应用程序，您可以存储额外的帖子信息，包括用户详细信息、评论、页面交互和统计信息等等。当然，您必须为此创建其他相关的表。

    最后，让我们看看最终用户如何使用工具栏切换按钮查看页面。

    这样你就有了一个可以构建的CMS;为未来复杂的CMS项目奠定了坚实的基础。

    接下来是什么?

    现在您已经拥有了构建简单但可靠的CMS所需的工具和知识，是时候确定下一步了。在将这个CMS转换为成熟的CMS时，您可以做很多改进。

    一个改进是界面和新功能的添加。其中包括用户访问权限、评论区、搜索引擎、附加工具、页面组件和主题等等。

    另一个明显的改进是安全性。你可以用它来保护CMS、服务器、数据、用户和你的业务。我们建议您查看一下<一个href＝＂https://owasp.org/www-project-secure-coding-practices-quick-reference-guide/migrated_content" rel="sponsored">这个链接阅读来自OWASP(开放Web应用程序安全项目)的指南，该指南解释了最佳安全实践。

    您可能还想了解更多关于所见即所得编辑器的信息。例如，您可以检查它是否有一个全面且易于理解的文档页面(<一个href＝＂https://froala.com/wysiwyg-editor/docs/?utm_source=Sitepoint&utm_medium=LeadsAcquisition&utm_content=article" rel="sponsored">点击这里看一个例子)。

    另一种熟悉编辑器的方法是使用它的演示和免费试用版。当你看到它能带来的好处时，你可以在你方便的时候做出承诺。这些编辑器节省了时间，您将需要额外的几个月(甚至几年)来创建和优化CMS的其他功能。

    最后，您需要阅读更多关于CMS最佳实践的内容。它们会不断变化，所以更新总是更好的。

    我们希望您喜欢阅读这篇指南，您创建CMS的目标现在似乎更容易实现了。

    <一个side class="flex space-x-4">

    分享本文