編集を簡単にするシンプルなCMSを作成する方法-IT業界-php.cn

編集を簡単にするシンプルなCMSを作成する方法

この記事では、ウェブサイトを簡単に編集および更新できる独自のコンテンツ管理システムを構築する簡単な方法を見ていきます。

Froalaとのパートナーシップでこの記事を作成しました。 SitePointを可能にしてくれたパートナーをサポートしてくれてありがとう。

キーテイクアウト

フロントエンド開発のためにHTML/CSS/JavaScript/jQueryとブートストラップの組み合わせを利用して、応答性と設計の容易さを確保します。

バックエンド操作にPHPとMicrosoft SQL Serverを使用します。ユーザーの好みに応じてMySQLやMariadBなどの他のDBMに切り替えるオプションを備えています。 WysiWyg HTMLエディターであるFroalaを統合して、コンテンツの編集機能を強化し、管理者がWebサイトのコンテンツを効果的に管理しやすくします。

ページコンポーネントを追加するためのダイナミックツールバーと入力管理用モーダルシステムを含むユーザーフレンドリーなインターフェイスの作成に焦点を当てます。

また、彼らはしばしばコーディングの経験をほとんどまたはまったく必要としません。これにより、ブロガー、企業、開発者、または少ない労力でウェブサイトを構築したい人に適しています。
CMSは、さまざまな分野でさまざまな目的に使用されます。たとえば、ブログ、会社、またはフリーランスのWebサイト、教育ウェブサイト、さらにはeコマースプラットフォームにパワーを付けることができます。このため、CMSを使用すると、人気のある関連するオプションのままであり、今後数年間Web開発でその場所を確保しています。
市場には利用可能なCMSがたくさんあります。一部はオープンソースですが、価格で使用できるものもあります。オープンソースと有料のCMSの両方が実行可能な選択肢であり、その利点があります。独自のCMSを作成したい場合もあります。

あなたは、挑戦を求めている開発者、CMSの作成を任された学生、またはCMS業界の有名人になることを目指しているビジネスです。コンテンツ管理システムを作成したい場合は、この記事はお客様のためです。

独自のCMSを構築する準備

次のツールを使用して、基本的な（つまり、十分に使用可能な）CMSを作成します。

html/css/javascript/jquery for the frontend
ブートストラップ
php
データベースとテーブルを作成するための
>

私たちが作るCMSは基本的ですが、それもかなり堅実です。これは、私たちが使用するWysiWygエディターであるFroalaが、CMSエディターに必要な機能のほとんどを備えているためです。この記事では、CMSの最終目標が何であれ、正しい軌道に乗るはずです。

また、DBMS（データベース管理システム）は、Microsoft SQL Serverです。これは私が最もよく知っているからです。 MySQLやMariadBなど、好みのDBMSに簡単に交換できます。データベースで特に複雑なことは何もしていないため、

dbmsの選択はここではそれほど重要ではありません。

先に進む前に、あなたが既にPHP、選択したDBMS、およびFroalaがコンピューターにインストールされていると仮定しましょう。まだ持っていない場合は、それぞれのWebサイトにアクセスして指示に従ってインストールできます。

CMSには何がありますか？

通常、コンテンツ管理システムには、管理者とエンドユーザーがいます。管理者は、ウェブサイトのページ、コンポーネント、コンテンツを管理します。彼らはサイトを維持し、すべての機能が機能するようにし、必要に応じて改善を作成します。

一方、エンドユーザーは、CMSを搭載したWebサイトのページとコンポーネントと対話して、コンテンツを作成、編集、および消費します。両方のユーザーは通常、CMS内のWysiWygエディターと対話し、コンテンツの作成と編集を行います。

デモンストレーションの目的で、物事をシンプルに保つために、管理者向けのシングルページCMSのみを実装します。制作CMSでは、このチュートリアルの範囲を超えた他の多くの要因を考慮する必要があります。これらには、ユーザー管理とアクセス権、セキュリティ（入力消毒、パラメーター化されたクエリなど）、パフォーマンスなどが含まれます。

単純なCMSでは、管理者は次のタスクを実行できるはずです。

ツールバーと対話して、見出し、テキスト、リンク、Froala Editorインスタンスなどのページコンポーネントを作成します

froalaインスタンスと対話して、表示されるコンテンツを投稿する

投稿されたコンテンツを表示
ビューモードを入力します。これは、ツールバー
データベースのセットアップ

単純な要件があるため、データベース構造も簡単です。サンプルCMSでは、2つの無関係なテーブルのみを使用します。

post
- post_id：int、ID（1,1）、nullではなく、プライマリキー
- post_content：varchar（max）、null
- post_on：datetime2（7）、null コンポーネント
- ではありません

ですが、データベースでは255文字のみに設定します。さらに、両方のテーブルのID列をアプリケーションのランダム化文字列に変更することもできます。

インターフェイスの作成

ブートストラップ、ブートストラップアイコン、FroalaのCSSおよびJSファイルのCDNリンクを含めます。また、カスタムCSSおよびJSファイルを搭載します：

次のコンポーネントに取り組むコンポーネントは、Navbarとツールバーです。 Navbarには、サイトのタイトルまたはブランドと、ツールバーの可視性を切り替えるためのアイコンボタンが含まれています（「トグル管理ビュー」ボタンと考えてください）。

一方、ツールバーには、プログラムでページに追加できる4つのコンポーネントに対応する4つのボタンが含まれています。

上記のコードは、Navbarとコンポーネントを作成します。 Navbarの背景色は＃0098F7で、青い色合いを与えます。 Toggletoolbar（）onClickイベントは、ツールバー要素を隠す責任があります。次に、ツールバーのコードを記述します：

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

ログイン後にコピー

Bootstrapのグリッドディスプレイ（ここをクリックして詳細をご覧ください）とサイジングオプションを使用して、ツールバーのボタンコンポーネントを作成します。また、Bootstrapアイコンをボタンラベルとともに使用して、読みやすくします。独自のCMSを作成するとき、ツールバーを表現する方法はたくさんあります。

通常のオプションは、

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

ログイン後にコピー

navbar

、

カード、または

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

ログイン後にコピー

offcanvas

要素です。この場合、それぞれがボタンのような動作を持っているカードのような長方形を使用してそれらを表します。

また、ツールバーボックスにいくつかのイベントを追加します。最初の3つのボックス（見出し、テキスト、リンク）のそれぞれについて、以下にコードを示しているモーダルを開くことに注意してください。

それぞれに入力フィールドが含まれています（リンク用に2つ、テキスト用、もう1つはURL用）。最後に、CMSのWysiWyg HTMLエディターを初期化するためのCreateComponent関数を呼び出します：上記のコードは、モーダルの1つ、特にページに新しい見出しを追加するために使用されるモーダルの1つを示しています。このモーダルは、ユーザーが「見出し」ボタン/カードをクリックすると表示されます。出口またはキャンセルボタンがクリックされるか、見出しが追加されたときに却下されます。

他のモーダルも同様に動作しますが、適切なリンク入力にはテキストとURLに2つの入力フィールドが必要であることに注意してください（今のところ、1つだけを使用します）：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">  <link href="css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />  <link href="css/index.css" rel="stylesheet" type="text/css" />  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>  <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>  <script type="text/javascript" src="js/froala_editor.pkgd.min.js"></script>  <script type="text/javascript" src="js/index.js"></script> 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

最後に、上記のコードスニペットをindex.cssファイルに追加して、ツールバーボックスの背景色とホバーのマウスカーソルを変更します。終了したら、以下に示すようにユーザーインターフェイスが表示されます。

インターフェイスをセットアップしたので、JavaScriptで機能を追加する時が来ました。

データの送信

index.jsファイルでは、次の機能の5つの機能を定義します。コンポーネントの作成、ツールバーの可視性の切り替え、入力フィールドのリセット、投稿の読み込み、コンポーネントの読み込み。それぞれが何をしているのか見てみましょう。

createComponent（componentType）
この関数を使用して、作成したコンポーネントをデータベースに送信します。コンポーネントのタイプ（リンク、見出し、テキスト、エディター）をパラメーターとして記述するComponentTypeを使用します。まず、スイッチケースステートメントを使用してコンポーネントタイプを決定する必要があります。見出し、テキスト、リンクについては、AJAXリクエストを使用してコンポーネントタイプとともにPHP/add.phpにコンテンツを送信します。一方、編集者の場合、コンポーネントタイプを送信するだけです。内容が正常に保存されたら、getComponents（）関数を呼び出して、表示されるコンポーネントを「更新」します。

toggletoolbar（）

この関数は、必要に応じてツールバーからd-flex and d-noneクラスを追加または削除するだけです。

resetValue（componentType）

コンポーネントタイプパラメーターを持つ関数は、各要素をIDで取得し、その値を空の文字列に設定することにより、入力フィールドの値を再itializeする。

getComponents（）

この関数は、最初にAJAX HTTP要求をPHP/load.phpに要求して、データベースからコンポーネントのデータを取得します。成功した場合、データベースから取得されたコンポーネント（例：見出しコンポーネントの

要素など）に従ってHTMLを動的に生成します。その後、すべてのエディターコンポーネントについて、Froalaインスタンスが[保存]ボタンとともに初期化されます。最後に、編集者内に記述された投稿を保存するために、クリックイベントリスナーがボタンに追加されます。成功すると、getposts（）関数が呼び出され、投稿のリストが「更新」されます。

getposts（）

getPosts（）関数は、PHP/loadposts.phpを介してデータベースからすべての投稿を取得するAJAX要求で構成されています。 getComponents（）と同様に、この関数は、投稿を表示するためにHTMLを動的に生成します。

ドキュメントロードでは、getComponents（）とgetPosts（）関数の両方が呼び出されます。データをサーバーに送信するために必要なJSコードができたので、残っているのはバックエンドでそれを処理することだけです。

バックエンドの準備

先ほど気づいたかもしれませんが、4つのPHPファイルがあります。2つはコンポーネントと投稿を追加し、2つはロードするためです。これらは、SQLSRV_Connectを使用してデータベースに接続することから、$ _POST変数（ある場合）を取得し、クエリを定義および実行することから、同様のコードで構成されています。以下にリストされているのは、これらのファイルに関連するクエリです

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

ログイン後にコピー

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

ログイン後にコピー

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

ログイン後にコピー

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

ログイン後にコピー

これらのPHPファイルを設定したら、WYSIWYGエディターの編集力を使用して、CMSのすべての基本機能を実行できるはずです。独自のCMSを作成するときは、入力を消毒し、他のセキュリティ対策の中でもクエリをパラメーター化して、特定の脆弱性からユーザーとアプリケーションを安全に保つことを忘れないでください。

私たちのベースのCMSが動作しているのを見たいですか？テストしましょう！

まず、構築したツールバーを使用して、いくつかのページコンポーネントを作成しましょう。

ご覧のとおり、コンポーネントテーブルに保存され、PHPを使用してインターフェイスに表示されるコンポーネントを簡単に作成できるようになりました。 SSMを使用してテーブルを確認すると、以下に示すデータが表示されます。

編集を簡単にするシンプルなCMSを作成する方法

エディターインスタンスを含む各コンポーネントのいずれかを作成したので、ページに投稿を追加してみましょう。

コンテンツを保存した後、エディターのすぐ下に表示されていることがわかります。あなたはあなたの投稿のためにさらにパディングを追加してデザインまたはディスプレイを変更したいかもしれませんが、これは今のところもやるでしょう。

Froalaは、コンテンツの編集とユーザーエクスペリエンスを豊かにできる100を超える機能を提供します。また、圧倒的なユーザーを防ぐために適切に配置されています。エディターはカスタマイズ可能であるため、ユーザーに使用したい機能のみを含めることができます。

投稿の内容を保存して、データベーステーブルを確認できます。

編集を簡単にするシンプルなCMSを作成する方法

上の画像は、作成したエディターのコンテンツと、そのIDと投稿日を示しています。また、post_content列のHTMLコードが保持されていることも確認できます。

大規模なCMSアプリケーションの場合、ユーザーの詳細、コメント、ページインタラクション、統計など、追加の投稿情報を保存できます。もちろん、これのために他の関連テーブルを作成する必要があります。

最後に、ツールバーのトグルボタンを使用してエンドユーザーがページを表示する方法を見てみましょう。

次は何ですか？

シンプルだが堅実なCMSを構築するために必要なツールと知識があるので、次のステップを決定する時が来ました。このCMSを本格的なものに移行することで、多くの改善を行うことができます。

1つの改善は、インターフェイスと新機能の追加です。これらには、ユーザーアクセス権、コメントセクション、検索エンジン、追加のツール、ページコンポーネント、およびテーマが含まれます。

あなたができるもう1つの明らかな改善はセキュリティです。 CMS、サーバー、データ、ユーザー、およびビジネスを保護できます。最良のセキュリティプラクティスを説明するOWASP（Open Webアプリケーションセキュリティプロジェクト）のガイドについては、このリンクをチェックすることをお勧めします。

また、選択したWysiWygエディターについて詳しく知りたいと思うかもしれません。たとえば、包括的でわかりやすいドキュメントページがあるかどうかを確認できます（例を参照するにはここをクリックしてください）。

編集者に慣れるもう1つの方法は、そのデモと無料トライアルを使用することです。そして、あなたがそれがもたらすことができる利点を見るとき、あなたはあなたの都合の良いときにコミットすることができます。これらの編集者は時間を節約し、CMSの他の機能を作成および研磨するために、余分な月（または数年）が必要になります。

最後に、CMSのベストプラクティスの詳細を読む必要があります。それらは時々変化するので、更新されることは常により良いです。

このガイドを読んで楽しんで、CMSを作成するという目標が簡単に達成できるように思われることを願っています。

簡単な編集のためのシンプルなCMSを作成することについて、よく尋ねられる質問（FAQ）

シンプルなCMSを作成する際に考慮すべき重要な機能は何ですか？

シンプルなCMSを作成するときは、ユーザーフレンドリーで効率的にする機能を考慮することが重要です。これらには、シンプルで直感的なインターフェイス、簡単なコンテンツ管理、柔軟性、カスタマイズオプションが含まれます。 CMSには、コンテンツを保護するための堅牢なセキュリティシステムも必要です。さらに、SEOフレンドリーな機能を組み込んで、検索エンジンでのサイトの可視性を向上させるのに役立つことを検討してください。

CMSがユーザーフレンドリーであることを確認するにはどうすればよいですか？ナビゲートしやすい直感的なインターフェイスの作成に焦点を当てます。これには、クリアメニュー、見つけやすいボタン、論理構造が含まれます。さらに、ユーザーがCMSを効果的に使用する方法を理解するのに役立つ包括的なドキュメントとサポートを提供します。

CMSを柔軟でカスタマイズ可能にするにはどうすればよいですか？ユーザーがサイトのレイアウト、設計、機能を変更できる機能。これには、テーマの変更、プラグインの追加、コードのカスタマイズのオプションが含まれます。さらに、CMSがテキスト、画像、ビデオなどのさまざまなコンテンツタイプをサポートするようにします。コンテンツを保護するため。これには、強力なパスワード要件、2要素認証、定期的なセキュリティの更新などの機能が含まれます。さらに、SQLインジェクションやクロスサイトスクリプトなどの一般的なセキュリティの脅威から保護するための手段を組み込むことを検討してください。フレンドリーで、検索エンジンでのサイトの可視性を向上させるのに役立つ機能を組み込むことを検討してください。これには、メタタグを追加し、SEOに優しいURLの作成、人気のあるSEOツールと統合するためのオプションが含まれます。さらに、CMSがSEOにも影響を与える可能性があるため、CMSが高速読み込み時間とモバイルフレンドリーな設計をサポートしていることを確認してください。 -CMSを使用したパルティツールは、その機能を強化し、より効率的にすることができます。これには、SEO、分析、ソーシャルメディアの統合などのツールが含まれます。ただし、これらの統合がCMSのセキュリティやパフォーマンスを妥協しないようにしてください。

CMSがスケーラブルであることを確認するにはどうすればよいですか？パフォーマンスを損なうことなくコンテンツとユーザーの。これには、コードの最適化、効率的なデータベースの使用、キャッシュテクニックの実装が含まれます。さらに、変化するニーズに適応できる柔軟なアーキテクチャの使用を検討してください。

CMSを作成するためにどのプログラミング言語を使用する必要がありますか？

CMSを作成するためのプログラミング言語の選択は、特定のニーズと専門知識に依存します。ただし、一般的な選択には、PHP、JavaScript、Pythonが含まれます。これらの言語は広く使用されており、コミュニティの強力なサポートがあり、開発プロセスを簡素化できるさまざまなライブラリとフレームワークを提供しています。 CMSのうち、ユーザーアクティビティをシミュレートし、CMSの応答方法を監視できるツールを使用することを検討してください。これには、ロードテストツール、パフォーマンス監視ツール、分析ツールが含まれます。さらに、CMSのパフォーマンスを定期的に確認し、効率を確保するために必要な最適化を行います。効果的に使用できるようにします。これには、詳細なドキュメントの作成、チュートリアルの提供、サポートフォーラムまたはヘルプデスクの提供が含まれます。さらに、ユーザーの洞察を収集し、改善を行うためにフィードバックシステムを組み込むことを検討してください。

以上が編集を簡単にするシンプルなCMSを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。