10월 CMS용 커스텀 플러그인 개발

게시 됨: 2022-03-10

빠른 요약 ↬ 객체 지향적이고 읽기 쉬운 코드 작성을 좋아한다면 이 기사가 적합합니다. 자신만의 플러그인을 작성하는 방법과 10월이 다음 프로젝트에 좋은 선택이 될 수 있는 이유를 배우게 됩니다.

작년에 저는 WordPress에 대한 좋은 대안을 찾기 위해 PHP의 새로운 CMS 시스템에 대해 조사했습니다. 이상적으로는 깨끗하고 현대적인 코드베이스를 갖춘 오픈 소스 솔루션이어야 했습니다.

그 중 하나가 내 관심을 끌었습니다. 10월 CMS. 나는 그것을 시도했고 거의 즉시 그것을 좋아했습니다. 코드 구조가 정말 좋았고 커스텀 플러그인을 작성하기 쉬웠습니다.

이 기사는 플랫폼에서 기대할 수 있는 것에 대한 개요를 제공하고 사용하기로 결정하기 전에 먼저 맛을 볼 수 있도록 하는 것을 목표로 합니다.

CMS 플랫폼으로 10월을 선택하는 이유는 무엇입니까?

개인적으로 내 프로젝트에 사용하기로 결정한 몇 가지 주요 이유가 있습니다.

라라벨 제공

10월은 최신 웹 앱을 만들기 위한 가장 강력한 PHP 프레임워크인 Laravel을 기반으로 합니다. 최고라고 자신있게 말씀드릴 수 있습니다. 사용 및 이해가 매우 쉽고 라우팅, ORM(객체 관계형 매핑), 권한 부여, 캐싱 및 훌륭하고 명확한 MVC 구조를 제공하는 기타 많은 기능에서 현대 프레임워크에 필요한 모든 기능을 갖추고 있습니다. Laravel에 의해 구동되기 때문에 October는 이러한 모든 기능을 큰형으로부터 물려받았습니다.

깨끗한 코드와 문서

다른 많은 CMS 솔루션과 달리 10월에는 매우 깨끗하고 잘 문서화된 코드베이스가 있습니다. 객체 지향 패러다임을 사용하여 작성되었습니다. 10월은 평범한 PHP 대신 Twig를 템플릿 엔진으로 사용하여 개발자를 위한 작업을 단순화합니다. 기술 문서도 잘 작성되어 있어 대부분의 질문에 대한 답변을 빠르게 찾을 수 있습니다.

훌륭한 커뮤니티

10월 커뮤니티는 아직 크지 않지만 매우 유용하고 반응이 좋습니다. 가입할 수 있는 공개 Slack 채널이 있으며 여기에서 개발자가 문제 해결을 기꺼이 도와드릴 것입니다.

큰 시장

WordPress 및 기타 CMS와 마찬가지로 10월에는 테마 및 플러그인 시장이 있습니다. 선택할 수 있는 좋은 테마가 많지는 않지만 현재 700개 이상의 플러그인이 있으므로 그 중 하나를 검색하고 설치하기만 하면 기능을 추가할 수 있을 가능성이 큽니다. 플러그인의 가장 큰 특징은 관리자 대시보드에 프로젝트 ID를 추가하기만 하면 모든 프로젝트 간에 쉽게 동기화할 수 있다는 것입니다.

점프 후 더! 아래에서 계속 읽기 ↓

플러그인 및 구성 요소

플러그인은 10월에 새로운 기능을 추가하는 기반입니다. 플러그인은 사용자 정의 구성 요소, 모델 등록, 데이터베이스 구조 업데이트 또는 번역 추가를 담당하는 여러 파일 및 디렉토리로 구성될 수 있습니다.

플러그인은 일반적으로 프로젝트의 plugins/ 디렉토리에 생성됩니다. 많은 플러그인이 다른 사람들이 사용할 수 있도록 마켓플레이스에 제출되기 때문에 각 플러그인에는 일반적으로 플러그인을 만든 회사 또는 개발자의 이름으로 시작하는 사용자 지정 네임스페이스가 있어야 합니다. 예를 들어 이름이 Acme 이고 Blog라는 멋진 플러그인을 만든 경우 플러그인은 Acme\Blog 네임스페이스 아래에 있게 됩니다.

플러그인 디렉토리 구조가 어떻게 생겼는지 보여드리겠습니다:

보시다시피 10월 CMS에 플러그인과 플러그인의 모든 구성 요소를 등록하는 역할을 하는 plugin.php 라는 파일도 있습니다.

언급해야 할 또 다른 중요한 점은 위에 나열된 모든 디렉토리가 플러그인을 실행하는 데 필요한 것은 아니라는 것입니다. 플러그인의 구조는 다음과 같을 수 있으며 여전히 완벽하게 작동합니다.

대부분의 경우 하나의 플러그인은 기능의 한 부분만 추가하도록 빌드됩니다. 예를 들어 '번역' 플러그인은 웹사이트의 콘텐츠를 다른 언어로 번역하고 사용자에게 다국어 지원을 제공하도록 설계되었습니다.

10월 CMS에는 귀하의 요구 사항을 찾을 수 있는 훌륭한 시장이 있습니다.

WordPress 및 기타 인기 있는 CMS와 달리 10월 플러그인에도 구성 요소가 있을 수 있습니다. 10월 문서에 따르면 구성 요소는 "모든 페이지, 부분 또는 레이아웃에 첨부할 수 있는 구성 가능한 건물 요소"입니다. 예에는 다음이 포함될 수 있습니다. 문의 양식, 탐색, FAQ 목록 및 답변; 기본적으로 여러 페이지에서 재사용할 수 있는 하나의 빌딩 블록으로 함께 묶는 것이 합리적입니다.

구성 요소는 플러그인의 일부로 생성되며 components/ 하위 디렉토리에 있습니다.

각 구성 요소에는 구성 요소 를 정의하는 componentName.php와 같은 PHP 파일과 구성 요소 부분을 위한 선택적 하위 디렉터리가 있습니다. 구성 요소 부분 폴더는 구성 요소 자체와 동일한 소문자 이름을 가져야 합니다.

구성 요소가 어떻게 작동하는지 보여주기 위해 구성 요소가 블로그 게시물 표시를 담당한다고 가정해 보겠습니다.

 namespace Acme\Blog\Components; class BlogPosts extends \Cms\Classes\ComponentBase { public function componentDetails() { return [ 'name' => 'Blog Posts', 'description' => 'Displays a collection of blog posts.' ]; } // This array becomes available on the page as {{ component.posts }} public function posts() { return ['First Post', 'Second Post', 'Third Post']; } }

보시다시피 구성 요소에는 두 가지 주요 기능이 있습니다. 첫 번째 componentDetails() 는 웹 페이지에 구성 요소를 추가하고 사용할 관리자에게 구성 요소에 대한 정보를 제공합니다.

두 번째 함수인 posts() 는 다음과 같이 부분 구성 요소( blogposts/default.htm 파일) 내에서 사용할 수 있는 더미 게시물을 반환합니다.

 url = "/blog" [blogPosts] == {% for post in blogPosts.posts %} {{ post }} {% endfor %}

10월 CMS에서 구성 요소가 존재하는지 확인하려면 registerComponents() 라는 함수 내부의 기본 플러그인 파일을 사용하여 구성 요소를 등록해야 합니다.

 public function registerComponents() { return [ 'October\Demo\Components\Todo' => 'demoTodo' ]; }

사용자 지정 연락처 양식 플러그인 만들기

사용자 지정 연락처 양식 플러그인을 만들 것입니다. 플러그인 작동 방식에 대한 가정은 다음과 같습니다.

양식에는 이름, 성, 이메일, 메시지 필드가 있습니다.
데이터는 Ajax를 사용하여 서버에 제출됩니다.
데이터가 제출된 후 관리자는 사용자가 보낸 메시지가 포함된 이메일을 받게 됩니다.

이 튜토리얼의 목적을 위해 우리는 10월 CMS를 새로 설치할 것입니다:

플러그인 구조를 생성할 터미널에서 명령을 실행하여 플러그인 생성을 시작해 보겠습니다. php artisan create:plugin progmatiq.contactform

progmatiq.contactform 인수에는 작성자 이름(progmatiq)과 플러그인 이름(contactform)이 포함됩니다.

이제 plugin.php 파일을 열고 다음 방법으로 플러그인 세부 정보를 수정해야 합니다.

 public function pluginDetails() { return [ 'name' => 'Contact Form', 'description' => 'A simple contact form plug-in', 'author' => 'progmatiq', 'icon' => 'icon-leaf' ]; }

다음은 살펴봐야 할 몇 가지 다른 방법입니다.

registerComponents()
여기에서 플러그인이 제공하는 구성 요소 배열을 정의할 수 있습니다.
registerPermissions()
나중에 애플리케이션의 다른 영역에서 사용할 수 있는 사용자 지정 권한을 등록할 수 있습니다.
registerNavigation()
관리자 대시보드 메뉴에 URL이 있는 사용자 정의 메뉴 항목을 추가할 수 있습니다.

이제 ContactForm 구성 요소를 생성해 보겠습니다.

플러그인의 루트 디렉토리 안에 components/ 라는 새 폴더를 만드십시오.
components/ 폴더 안에 contactForm.php 라는 파일을 생성합니다.

10월에 구성 요소가 수행하는 작업을 알려주는 다음 코드를 붙여넣습니다. componentDetails() 라는 구성 요소 내부에 메서드를 만들어 이를 수행할 수 있습니다.

 <?php namespace Progmatiq\Contactform\Components; use Cms\Classes\ComponentBase; class ContactForm extends ComponentBase { public function componentDetails() { return [ 'name' => 'Contact Form', 'description' => 'A simple contact form' ]; } }

이제 플러그인 내부에 컴포넌트를 등록해야 합니다. 이를 위해 registerComponents() 메서드를 수정합니다.

 public function registerComponents() { return [ 'Progmatiq\Contactform\Components\ContactForm' => 'contactForm', ]; }

이 함수는 플러그인이 제공하는 구성 요소 배열을 반환합니다. 구성 요소의 전체 클래스 이름은 이 메서드의 키이고 값은 Twig 템플릿 내에서 구성 요소를 참조하는 데 사용할 별칭입니다.

구성 요소를 등록하면 새 연락처 페이지를 만들고 구성 요소를 추가할 수 있습니다(단계의 번호는 스크린샷 참조).

관리 대시보드에서 CMS (1) > 페이지 (2)로 이동하고 + 추가 (3)를 클릭합니다.
페이지에 이름과 URL을 지정하십시오(4).
파일 이름을 지정하고(5) 기본 레이아웃을 선택합니다(6).

페이지에 새 구성 요소를 추가해 보겠습니다.

왼쪽 메뉴(1)에서 구성 요소 를 클릭한 다음 "문의 양식" 구성 요소를 선택합니다. (2)를 클릭하면 페이지에 추가됩니다.
페이지에 헤드라인을 제공하고 {% component 'contactForm' %} Twig 지시문을 사용하여 구성 요소를 렌더링하는 코드를 배치해야 합니다.

 <div class="container"> <h1> Contact </h1> {% component 'contactForm' %} </div>

지금 연락처 페이지를 열면 "연락처"라는 제목이 표시되고 다른 것은 표시되지 않습니다.

문의 양식에 렌더링할 HTML이 없기 때문입니다.

component/ 폴더 안에 contactform/default.htm 파일을 생성해야 합니다.

컴포넌트에 html 보기 추가하기 — 구성 요소에 HTML 보기 추가(큰 미리보기)

그리고 파일에 다음 HTML 코드를 추가합니다.

 <form method="POST" data-request="onSend" data-request-validate data-request-success="this.reset(); alert('Thank you for submitting your inquiry')" > <div> <label for="first_name">First Name</label> <input type="text" name="first_name" class="form-control"> <p data-validate-for="first_name" class="text-danger"></p> </div> <div> <label for="last_name">Last Name</label> <input type="text" name="last_name" class="form-control"> <p data-validate-for="last_name" class="text-danger"></p> </div> <div> <label for="email">Email</label> <input type="text" name="email" class="form-control"> <p data-validate-for="email" class="text-danger"></p> </div> <div> <label for="content">Content</label> <textarea rows="6" cols="20" name="content" class="form-control"></textarea> <p data-validate-for="content" class="text-danger"></p> </div> <div> <button type="submit" class="btn btn-primary" data-attach-loading>Send</button> </div> </form>

이 코드의 대부분은 매우 간단합니다. 그러나 10월에서 사용할 수 있는 특별한 data-* 속성으로 맛을 냈습니다.

<form> 태그에는 세 가지 특수 속성이 있습니다.
- data-request="onSend" . 이 속성은 Ajax를 사용하여 양식을 제출할 때 구성 요소의 onSend 함수(다음에 생성할)가 호출되어야 함을 10월에 알려줍니다.
- data-request-validate 는 양식이 유효하지 않은 경우 서버에서 보낼 오류를 사용하여 양식 Ajax 유효성 검사를 활성화합니다.
- data-request-success="this.reset(); alert('Thank you for submitting your inquiry')" 는 양식을 지운 다음 요청이 성공하고 유효성 검사 또는 서버 측 오류가 없는 경우 경고 메시지를 트리거합니다.
모든 입력에는 해당 입력에 대해 서버에서 반환한 유효성 검사 오류를 표시하는 역할을 하는 다음 블록이 있습니다.

 <p data-validate-for="content" class="text-danger"></p>

제출 버튼에는 서버에서 요청을 처리하는 동안 스피너를 추가하고 버튼을 비활성화하는 data-attach-loading 속성이 있습니다. 이는 이전 요청이 완료될 때까지 사용자가 양식을 다시 제출하는 것을 방지하기 위해 수행됩니다.

다음은 현재 페이지의 모습입니다.

contactForm.php 구성 요소로 돌아가서 양식 제출 처리를 담당할 validate() 도우미 메서드와 onSend() 를 생성해 보겠습니다.

 public function onSend() { // Get request data $data = \Input::only([ 'first_name', 'last_name', 'email', 'content' ]); // Validate request $this->validate($data); // Send email $receiver = '[email protected]'; \Mail::send('progmatiq.contact::contact', $data, function ($message) use ($receiver) { $message->to($receiver); }); } protected function validate(array $data) { // Validate request $rules = [ 'first_name' => 'required|min:3|max:255', 'last_name' => 'required|min:3|max:255', 'email' => 'required|email', 'content' => 'required', ]; $validator = \Validator::make($data, $rules); if ($validator->fails()) { throw new ValidationException($validator); } }

가장 먼저 하는 일은 요청에서 데이터를 가져오고 validate() 도우미 메서드를 사용하여 유효성을 검사하는 것입니다. (사용 가능한 모든 유효성 검사 규칙은 설명서에서 찾을 수 있습니다.) 유효성 검사가 실패하면 validate() 메서드가 ValidationException 예외를 throw하고 코드 실행이 중지되고 서버는 상태 코드 406 및 유효성 검사로 응답합니다. 메시지.

유효성 검사가 성공하면 관리자에게 이메일을 보내드립니다.

참고 : 간단하게 제출할 이메일을 [email protected]으로 가정했습니다. 자신의 이메일을 사용하십시오!

다음은 contactForm.php 플러그인의 전체 코드입니다.

 <?php namespace Progmatiq\Contactform\Components; use Cms\Classes\ComponentBase; use October\Rain\Exception\ValidationException; class ContactForm extends ComponentBase { public function componentDetails() { return [ 'name' => 'Contact Form', 'description' => 'A simple contact form' ]; } public function onSend() { // Get request data $data = \Input::only([ 'first_name', 'last_name', 'email', 'content' ]); // Validate request $this->validate($data); // Send email $receiver = '[email protected]'; \Mail::send('progmatiq.contact::contact', $data, function ($message) use ($receiver) { $message->to($receiver); }); } protected function validate(array $data) { // Validate request $rules = [ 'first_name' => 'required|min:3|max:255', 'last_name' => 'required|min:3|max:255', 'email' => 'required|email', 'content' => 'required', ]; $validator = \Validator::make($data, $rules); if ($validator->fails()) { throw new ValidationException($validator); } } }

보시다시피 Mail::send() 함수가 수락하는 첫 번째 인수는 이메일 본문에 대해 렌더링될 이메일 템플릿의 이름입니다. 관리자 패널에서 생성해야 합니다. 설정 > 메일 템플릿 으로 이동하고 새 템플릿 버튼을 클릭합니다. 그런 다음 아래 화면에 표시된 대로 양식을 작성하십시오.

다음은 사용할 이메일 본문입니다.

 You have received a new contact inquiry **First Name**: {{ first_name }} *** **Last Name**: {{ last_name }} *** **Email**: {{ email }} *** **Message**: {{ content }} ***

이제 이메일 템플릿을 저장합니다. 다음으로 해야 할 일은 이메일을 보낼 SMTP 서버를 구성하는 것입니다.

설정 > 메일 구성 으로 이동하여 모든 설정을 입력합니다.

분명히, 나는 내 개인 구성을 공유하지 않을 것입니다. 자신의 설정을 사용합니다.

이 단계에서는 문의 양식 구성 요소 테스트를 시작할 모든 준비가 완료되었습니다.

먼저 "콘텐츠" 필드를 비워두고 잘못된 이메일을 입력할 때 유효성 검사가 작동하는지 확인합니다.

유효성 검사가 예상대로 작동합니다. 이제 올바른 데이터를 입력하고 이메일이 관리자에게 성공적으로 전송되는지 확인하겠습니다.

[email protected] 이 받게 될 이메일은 다음과 같습니다.

양식이 성공적으로 제출되면 작업이 성공했음을 알리는 경고 메시지가 사용자에게 표시됩니다.

결론

이 튜토리얼에서는 플러그인과 구성 요소가 무엇인지, 그리고 이를 10월 CMS와 함께 사용하는 방법을 다루었습니다.

필요에 맞는 기존 플러그인을 찾을 수 없는 경우 프로젝트에 대한 사용자 정의 플러그인을 만드는 것을 두려워하지 마십시오. 그렇게 어렵지 않고 모든 것을 제어할 수 있으며 언제든지 업데이트하거나 확장할 수 있습니다. Mailchimp 또는 HubSpot과 같은 다른 서비스와 통합하려는 경우 오늘 우리가 만든 것과 같은 간단한 연락처 양식 플러그인을 만드는 것도 유용할 수 있습니다.

이 튜토리얼이 도움이 되었기를 바랍니다. 질문이 있는 경우 주저하지 말고 아래의 의견 섹션에 질문하십시오.