편집하기 쉬운 간단한 CMS를 만드는 방법

이 기사에서는 웹 사이트를 쉽게 편집하고 업데이트 할 수있는 자체 컨텐츠 관리 시스템을 구축하는 간단한 방법을 살펴 보겠습니다.

우리는 Froala와 파트너십을 통해이 기사를 만들었습니다. Sitepoint를 가능하게하는 파트너를 지원해 주셔서 감사합니다.

키 테이크 아웃

는 대응 성과 디자인의 용이성을 보장하기 위해 프론트 엔드 개발을위한 HTML/CSS/JavaScript/JQuery 및 부트 스트랩의 조합을 활용합니다. 백엔드 작업에는 PHP 및 Microsoft SQL Server를 사용하며 사용자 기본 설정에 따라 MySQL 또는 MariaDB와 같은 다른 DBM으로 전환 할 수 있습니다. wysiwyg html 편집기 인 Froala를 통합하여 컨텐츠 편집 기능을 향상시켜 Admins가 웹 사이트 콘텐츠를 효과적으로 관리 할 수 ​​있도록합니다. 페이지 구성 요소를 추가하기위한 동적 도구 모음과 입력 관리를위한 모달 시스템을 포함하는 사용자 친화적 인 인터페이스를 작성하는 데 중점을 둡니다. CMS가 컨텐츠 생성,보기, 편집 및 삭제와 같은 기본 기능을 지원하고 향후 개발에서 확장 성 및 보안 향상 가능성을 지원합니다.

CMS는 무엇입니까 CMS (Content Management Systems)는 컨텐츠에 크게 의존하는 플랫폼을 만드는 데 강력하고 인기있는 도구입니다. 사용자가 컨텐츠를 작성, 게시,보기 및 편집 할 수있는 쉬운 방법을 제공합니다. 또한, 그들은 종종 코딩 경험이 거의 또는 전혀 필요하지 않습니다. 이를 통해 블로거, 비즈니스, 개발자 또는 노력이 적은 웹 사이트를 구축하려는 사람에게는 좋은 선택이됩니다. CMS는 다른 필드에서 다른 목적으로 사용됩니다. 예를 들어, 블로그, 회사 또는 프리랜서 웹 사이트, 교육 웹 사이트 또는 전자 상거래 플랫폼에 전원을 공급하는 데 사용될 수 있습니다. 이 때문에 CMS를 사용하는 것은 인기 있고 관련성이 높은 옵션으로 남아 있으며 앞으로 몇 년 동안 웹 개발에서 자리를 확보합니다.

시장에는 사용 가능한 CMS가 많이 있습니다. 일부는 오픈 소스이고 다른 일부는 가격에 사용될 수 있습니다. 오픈 소스와 유료 CMS는 모두 실행 가능한 선택이며 장점이 있습니다. 자신의 CMS를 만들려는 사례도있을 수도 있습니다.

당신은 도전을 추구하는 개발자, CMS를 만드는 일을하는 학생 또는 CMS 산업에서 큰 이름이되기를 열망하는 비즈니스가 될 수 있습니다. 컨텐츠 관리 시스템을 만들려면이 기사가 귀하를위한 것입니다.

자신의 CMS를 구축하기 위해 준비 우리는 다음 도구를 사용하여 기본 (즉, 사용 가능한 충분한) CMS를 만들 것입니다 :

.
프론트 엔드 에 대한 html/css/javaScript/jQuery 응답 성과 쉬운 디자인을위한 부트 스트랩
• 백엔드의 PHP MS MS SQL Server (또는 동등한) 데이터 저장 데이터베이스 및 테이블 생성을위한 SSMS (SQL Server Management Studio 또는 Equivalent) Froala, wysiwyg (당신이 보는 것은 당신이 얻는 것) 컨텐츠 편집을위한 HTML 편집기
우리가 할 CMS는 기본이지만 매우 견고합니다. 우리가 사용할 wysiwyg 편집기 인 Froala는 CMS 편집기에 원하는 대부분의 기능을 가지고 있기 때문입니다. 이 기사는 CMS의 최종 목표에 관계없이 올바른 길을 가야합니다.
• 또한, 내가 사용할 DBMS (데이터베이스 관리 시스템)는 Microsoft SQL Server입니다. MySQL 또는 MariaDB와 같은 선호하는 DBM에 대해 쉽게 교체 할 수 있습니다. 데이터베이스와 특히 복잡한 일을하지 않기 때문에 dbms 선택은 여기서는 중요하지 않습니다 .
우리가 진행하기 전에, 당신이 선택한 dbms, froala가 컴퓨터에 이미 설치되어 있다고 가정 해 봅시다. 아직하지 않은 경우 해당 웹 사이트를 방문하고 지침을 따라 설치할 수 있습니다. CMS의 내용은 무엇입니까? 일반적으로 컨텐츠 관리 시스템에는 관리자 및 최종 사용자가 있습니다. 관리자는 웹 사이트의 페이지, 구성 요소 및 콘텐츠를 관리합니다. 그들은 사이트를 유지하고 모든 기능이 작동하도록하며 필요한 경우 개선을 만듭니다.
• 반면에 최종 사용자는 CMS 구동 웹 사이트의 페이지 및 구성 요소와 상호 작용하여 컨텐츠를 작성, 편집 및 소비합니다. 두 사용자는 일반적으로 CMS 내의 Wysiwyg 편집기와 컨텐츠 생성 및 편집을 위해 상호 작용합니다.
데모 목적으로, 간단하게 유지하기 위해 관리자에 대한 단일 페이지 CM을 구현합니다. 프로덕션 CMS에서는이 튜토리얼의 범위를 벗어난 다른 많은 요소를 고려해야합니다. 여기에는 사용자 관리 및 액세스 권한, 보안 (입력 소독, 매개 변수화 쿼리 등), 성능 등이 포함됩니다.
• 간단한 CMS에서 관리자는 다음과 같은 작업을 수행 할 수 있어야합니다.
는 툴바와 상호 작용하여 제목, 텍스트, 링크 및 Froala 편집기 인스턴스와 같은 페이지 구성 요소를 만듭니다. 는 Froala 인스턴스와 상호 작용하여 표시 될 컨텐츠를 게시합니다. view view 게시 된 내용 도구 모음을 숨긴 뷰 모드를 입력하십시오
• 관리자는 일반적으로 페이지 구성 요소를 편집하고 삭제할 수 있지만 구성 요소를 작성하고 삭제하는 데 고수하겠습니다. 이러한 기능을 염두에두고 데이터베이스 스키마를 만들어 프로세스를 시작하겠습니다.
데이터베이스 설정 간단한 요구 사항이 있으므로 더 간단한 데이터베이스 구조가 있습니다. 샘플 CMS의 경우 두 가지 관련없는 테이블 만 사용합니다.
• 포스트 <: :> post_id : int, Identity (1,1), null, 1 차 키 post_content : varchar (max), null <: :> posted_on : dateTime2 (7), null
구성 요소 component_id : int, Identity (1,1), null, 1 차 키 component_type : char (8), null
• component_content : varchar (255), nullable <:> create_on : dateTime2 (7), null
• 첫 번째 테이블 인 Post는 편집기 구성 요소에서 컨텐츠를 저장하고 구성 요소 테이블은 툴바를 사용하여 생성 된 페이지 요소를 저장합니다.
  는 대부분의 브라우저에서 URL의 최대 길이가 2048 자의 최대 문자
  • 를 가지지 만 데이터베이스에서는 255 자로 만 설정합니다. 또한 두 테이블의 ID 열을 응용 프로그램의 무작위 문자열로 변경할 수도 있습니다.
  인터페이스 생성 우리는 부트 스트랩, 부트 스트랩 아이콘 및 Froala의 CSS 및 JS 파일에 대한 CDN 링크를 포함합니다. 또한 사용자 정의 CSS 및 JS 파일이 있습니다
  • 다음 구성 요소는 Navbar와 Toolbar입니다. Navbar에는 사이트 제목 또는 브랜드와 도구 모음의 가시성을 전환하기위한 아이콘 버튼이 포함되어 있습니다 ( "Toggle Admin View"버튼으로 생각하십시오).
  반면에, 툴바에는 페이지에 프로그래밍 방식으로 추가 될 수있는 4 개의 구성 요소에 해당하는 4 개의 버튼이 포함되어 있습니다.
  • 위의 코드는 Navbar와 구성 요소를 만듭니다. Navbar의 배경색은 #0098F7이므로 파란색 색조를줍니다. ToggleToolBar () OnClick 이벤트는 도구 모음 요소를 숨길 책임이 있습니다. 다음으로 도구 모음에 대한 코드를 작성하십시오 :
  우리는 Bootstrap의 그리드 디스플레이 (자세한 내용을 보려면 여기를 클릭하십시오)와 크기 조정 옵션을 사용하여 도구 모음의 버튼 구성 요소를 만듭니다. 또한 더 나은 가독성을 위해 버튼 레이블과 함께 부트 스트랩 아이콘을 사용하고 있습니다. 자신만의 CMS를 만들 때 툴바를 대표 할 수있는 방법이 많이 있습니다.
  • 일반적인 옵션은
  navbar
  , cards 또는
offcanvas 요소입니다. 이 경우, 우리는 각각 버튼과 같은 동작을 갖는 카드와 같은 사각형을 사용하여 표현합니다.

도구 모음 상자에 대한 이벤트도 추가하겠습니다. 처음 3 개의 상자 (헤딩, 텍스트 및 링크)에 대해 코드가 아래에 표시되는 모달을 열 것입니다.

각각에는 입력 필드가 포함되어 있습니다 (링크의 경우 2 개, 텍스트 용 및 URL 1 개)가 포함됩니다. 마지막으로 CMS 용 WYSIWYG HTML 편집기를 초기화하기 위해 CreateComponent 함수를 호출합니다.

위의 코드는 모달 중 하나, 특히 페이지에 새 헤드를 추가하는 데 사용되는 모달 중 하나를 보여줍니다. 이 모달은 사용자가 "헤딩"버튼/카드를 클릭하면 표시됩니다. 종료 또는 취소 버튼을 클릭하거나 제목이 추가되면 기각됩니다. 다른 모달도 비슷하게 작동하지만 적절한 링크 입력에는 텍스트와 URL에 대해 두 개의 입력 필드가 있어야합니다 (현재는 하나만 사용합니다).

마지막으로, 위의 코드 스 니펫을 index.css 파일에 추가하여 도구 모음 상자의 배경색을 변경하고 마우스 커서를 호버합니다. 완료되면 사용자 인터페이스가 아래와 같이 나타납니다.

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

이제 인터페이스를 설정 했으므로 이제 JavaScript로 기능을 추가 할 차례입니다.

데이터 보내기 <.> index.js 파일에서 구성 요소 생성, 도구 모음 가시성 토글, 입력 필드 재설정, 게시물로드 및로드 구성 요소의 5 가지 기능을 정의합니다. 그들 각각이 무엇을하는지 봅시다.
CreateComponent (componentType) 우리는이 기능을 사용하여 생성 된 구성 요소를 데이터베이스로 보냅니다. 구성 요소 유형 (링크, 헤딩, 텍스트, 편집기)을 매개 변수로 설명하는 ComponentType가 필요합니다. 먼저 스위치 케이스 문을 사용하여 구성 요소 유형을 결정해야합니다. 제목, 텍스트 및 링크의 경우 ajax 요청을 사용하여 구성 요소 유형과 함께 컨텐츠를 Php/add.php로 전송합니다. 반면, 편집자의 경우 구성 요소 유형 만 보내면됩니다. 내용이 성공적으로 저장되면 GetComponents () 기능을 호출하여 표시된 구성 요소를 "새로 고침"합니다.

toggletoolbar () 이 기능은 단순히 필요에 따라 도구 모음에서 D-Flex 및 D- NONE 클래스를 추가하거나 제거합니다.

resetValue (componentType) componentType 매개 변수가있는 함수는 재설정이 ID에 의해 각 요소를 가져 와서 값을 빈 문자열로 설정하여 입력 필드의 값을 재설정합니다.
getComponents () 이 기능은 먼저 AJAX HTTP 요청을 PHP/Load.php에 요청하여 데이터베이스에서 구성 요소의 데이터를 가져옵니다. 성공하면 데이터베이스에서 검색된 구성 요소 (예 : 제목 구성 요소의

요소)에 따라 HTML을 동적으로 생성합니다. 그 후 모든 편집기 구성 요소의 경우 Froala 인스턴스가 저장 버튼과 함께 초기화됩니다. 마지막으로, 클릭 이벤트 리스너는 편집자 내에 작성된 게시물을 저장하기 위해 버튼에 추가됩니다. 성공시 GetPosts () 함수는 게시물 목록을 "새로 고침"하도록 호출됩니다.

getPosts () getPosts () 함수는 php/loadposts.php를 통해 데이터베이스에서 모든 게시물을 검색하는 ajax 요청으로 구성됩니다. getComponents ()와 유사 하게이 함수는 게시물을 표시하기 위해 HTML을 동적으로 생성합니다.
1. 문서로드에서 getComponents () 및 getPosts () 함수가 모두 호출됩니다. 이제 서버로 데이터를 전송하는 데 필요한 JS 코드가 있으므로 남은 것은 백엔드에서 처리하는 것입니다.

   백엔드 준비 앞에서 알 수 있듯이 4 개의 PHP 파일이 있습니다. 2 개는 구성 요소와 게시물을 추가하고 2 개는로드했습니다. SQLSRV_CONNECT로 데이터베이스에 연결하고 $ _Post 변수를 얻고 쿼리를 정의하고 실행하는 것부터 시작하여 유사한 코드로 구성됩니다. 아래에 나열된 파일과 관련된 쿼리가 있습니다

   load.php :

   loadposts.php :
   add.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>

   <.> addPost.php :
   이 PHP 파일을 설정하면 Wysiwyg 편집기의 편집력으로 CMS의 모든 기본 기능을 수행 할 수 있어야합니다. 자신의 CMS를 만들 때 입력을 소독하고 다른 보안 조치 중에서도 쿼리를 특정 취약점으로부터 안전하게 유지하기 위해 쿼리를 매개 변수화해야합니다.
   우리의 기본 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>

   먼저, 우리가 만든 도구 모음을 사용하여 일부 페이지 구성 요소를 만들어 봅시다.
   3. 보시다시피, 이제 컴포넌트를 쉽게 만들 수 있으며 구성 요소를 구성 요소 데이터베이스 테이블에 저장하고 PHP를 사용하여 인터페이스에 다시 표시 할 수 있습니다. SSM을 사용하여 테이블을 확인하면 아래에 표시된 데이터가 표시됩니다.

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

   이제 편집기 인스턴스를 포함하여 각 구성 요소 중 하나를 만들었으므로 페이지에 게시물을 추가 해 보겠습니다.
   위의 비디오에서 강력한 Wysiwyg 편집기가 제공 할 수있는 몇 가지 기능을 볼 수 있습니다. 여기에는 글꼴 서식, 형식을 보존하는 동안 복사 포지트 및 이미지 업로드가 포함됩니다. 또한 캐릭터 카운트에 민감한 작가의 오른쪽 코너의 캐릭터 수를 보여줍니다. 컨텐츠를 저장 한 후에는 편집기 바로 아래에 표시됩니다. 더 많은 패딩 및 디자인을 추가하거나 게시물에 대한 디스플레이를 완전히 변경하고 싶을 수도 있지만 지금은 이렇게 할 것입니다. Froala는 컨텐츠 편집 및 사용자 경험을 풍부하게 할 수있는 100 개가 넘는 기능을 제공합니다. 또한 압도적 인 사용자를 막기 위해 잘 배치되었습니다. 편집기는 사용자 정의 할 수 있으므로 사용자가 사용하려는 기능 만 포함 할 수 있습니다. 게시물의 내용을 저장 한 후 이제 데이터베이스 테이블을 확인할 수 있습니다.
   위의 이미지는 ID 및 게시 날짜와 함께 우리가 만든 편집기의 내용을 보여줍니다. Post_Content 열의 HTML 코드가 보존되어 있음을 알 수 있습니다.

   더 큰 CMS 애플리케이션의 경우 사용자 세부 사항, 주석, 페이지 상호 작용 및 통계를 포함한 추가 게시물 정보를 저장할 수 있습니다. 물론, 당신은 이것을 위해 다른 관련 테이블을 만들어야합니다. 마지막으로, 최종 사용자가 도구 모음 토글 버튼을 사용하여 페이지를 어떻게 보는지 봅시다.

   그리고 거기에 당신은 그것을 가지고 있습니다 - 당신이 구축 할 수있는 cms; 향후 복잡한 CMS 프로젝트를위한 암석이 풍부한 재단.

   > 다음은 무엇입니까?

   이제 간단하지만 견고한 CMS를 구축하는 데 필요한 도구와 지식이 있었으므로 이제 다음 단계를 결정해야합니다. 이 CMS를 본격적으로 전환하는 데 많은 개선을 할 수 있습니다.

   . 한 가지 개선은 인터페이스와 새로운 기능의 추가입니다. 여기에는 사용자 액세스 권한, 댓글 섹션, 검색 엔진, 추가 도구, 페이지 구성 요소 및 테마가 포함됩니다. 당신이 할 수있는 또 다른 명백한 개선은 보안입니다. CMS, 서버, 데이터, 사용자 및 비즈니스를 보호 할 수 있습니다. 최상의 보안 관행을 설명하는 OWASP (Open Web Application Security Project) 에서이 링크를 확인하는 것이 좋습니다. 당신은 또한 당신이 선택한 Wysiwyg 편집기에 대해 더 배우고 싶을 수도 있습니다. 예를 들어, 포괄적이고 이해하기 쉬운 문서 페이지가 있는지 확인할 수 있습니다 (예를 보려면 여기를 클릭하십시오).

   편집자에 익숙해지는 또 다른 방법은 데모와 무료 평가판을 사용하는 것입니다. 그리고 그것이 가져올 수있는 이점을 볼 때, 당신은 당신의 편의에 따라 커밋 할 수 있습니다. 이 편집자는 시간을 절약 할 수 있으며 CMS의 다른 기능을 만들고 연마하려면 추가 몇 달 (또는 몇 년)이 필요합니다.

   마지막으로 CMS 모범 사례에 대한 자세한 내용을 읽어야합니다. 그들은 때때로 바뀌므로 업데이트되는 것이 항상 좋습니다.

   우리는 당신 이이 가이드를 읽는 것을 즐기고 CMS를 만드는 목표를 달성하기가 더 쉬워 보이기를 바랍니다.

위 내용은 편집하기 쉬운 간단한 CMS를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!