Clever Geek Handbook

Membuat plugin kustom untuk CMS Oktober

Kami terus meninjau CMS Oktober dan fitur-fiturnya. Kami di LOVATA telah bekerja dengan sistem ini selama 6 tahun dan selama waktu ini kami telah memastikan bahwa popularitasnya yang terus meningkat memang pantas didapatkan.



Hari ini kami telah menyiapkan terjemahan artikel lain, kali ini oleh Andriy Haydash. Artikel ini tentang membuat fungsionalitas kustom melalui plugin. Anda dapat menemukan artikel sebelumnya tentang perbandingan Oktober CMS vs WordPress di sini .



Jika Anda suka menulis kode berorientasi objek dan mudah dibaca, maka artikel ini cocok untuk Anda. Anda akan belajar bagaimana menulis plugin Anda sendiri dan mengapa Oktober bisa menjadi pilihan yang baik untuk proyek Anda berikutnya.



Tahun lalu, saya melakukan sedikit riset tentang CMS berbasis PHP baru yang mencari alternatif WordPress yang bagus . Idealnya, ini harus menjadi solusi open source dengan basis kode modern.



Kemudian saya tertarik dengan CMS Oktober . Saya mencobanya dan saya langsung menyukainya . Oktober memiliki struktur kode yang baik dan plugin Anda sendiri mudah ditulis.



Tujuan artikel ini adalah untuk membantu Anda memahami apa itu platform dan apa yang diharapkan darinya sebelum Anda memutuskan untuk menggunakannya.



Mengapa memilih Oktober sebagai platform CMS Anda?



Ada beberapa alasan utama mengapa saya memutuskan untuk menggunakan Oktober untuk proyek saya.



Ditulis dalam kerangka Laravel



Oktober CMS dibangun di atas Laravel , kerangka kerja PHP paling kuat untuk membangun aplikasi web modern. Saya dapat mengatakan dengan pasti bahwa dia adalah yang terbaik. Kerangka ini sangat mudah digunakan dan sangat mudah dipahami. Selain itu, ia memiliki semua fitur yang dibutuhkan oleh kerangka kerja modern: perutean (perutean) , pemetaan relasional objek (ORM), otorisasi, caching, dan banyak lainnya, menyediakan struktur yang bagus dan dapat dipahami sesuai dengan konsep Model-View-Controller. Sejak Oktober CMS ditulis dalam kerangka Laravel, itu mewarisi semua fitur ini dari "kakaknya".



Kode dan dokumentasi bersih



Tidak seperti banyak CMS lainnya, Oktober memiliki basis kode yang sangat bersih dan terdokumentasi dengan baik yang ditulis menggunakan paradigma berorientasi objek.



Alih-alih PHP lama yang bagus, Oktober menggunakan Twig sebagai bahasa templatingnya, membuat pekerjaan pengembang lebih mudah. Dokumentasi teknis juga ditulis dengan baik dan memberikan jawaban cepat untuk sebagian besar pertanyaan.



Komunitas yang hebat



Meski komunitas Oktober masih kecil, namun masyarakat disana tanggap dan selalu siap membantu. Ada saluran Slack yang dapat Anda ikuti, dan pengembang akan dengan senang hati membantu Anda menyelesaikan masalah Anda dengan komunitas yang pindah ke Discord .



Pasar besar



Seperti WordPress dan CMS lainnya, Oktober memiliki pasar tema dan plugin. Pemilihan tema yang bagus tidak terlalu banyak, tetapi ada lebih dari 700 plugin (Pada Juni 2020, ada lebih dari 900 plugin yang diterbitkan dan sekitar 200 tema - kira-kira. Terjemahan) , Jadi kemungkinan besar Anda dapat memperluas fungsionalitas hanya dengan mencari dan menginstal satu dari mereka. Fitur khas dari plugin adalah plugin tersebut dapat dengan mudah disinkronkan antara semua proyek Anda hanya dengan menambahkan ID proyek Anda di area admin.



Plugin dan komponen



Plugin adalah dasar untuk menambahkan fitur baru ke Oktober CMS. Sebuah plugin dapat terdiri dari beberapa file dan direktori yang bertanggung jawab untuk mendaftarkan komponen kustom, model, memperbarui struktur database, atau menambahkan terjemahan. Sebuah plugin biasanya dibuat dalam proyek di direktori plugins /. Karena banyak plugin yang ditambahkan ke pasar untuk digunakan orang lain, setiap plugin harus memiliki namespace sendiri, yang biasanya dimulai dengan nama perusahaan atau pengembang yang membuat plugin. Jadi, misalnya, jika nama Anda adalah Acme dan Anda telah membuat plugin hebat bernama Blog, plugin Anda akan disebut Acme \ Blog.



Izinkan saya menunjukkan kepada Anda seperti apa struktur direktori plugin:



gambar



Seperti yang Anda lihat, ada file bernama plugin.php yang bertanggung jawab untuk mendaftarkan plugin dan semua komponennya di CMS Oktober.



Perlu disebutkan bahwa tidak semua direktori yang tercantum di atas diperlukan untuk menjalankan plugin. Plugin Anda dapat memiliki struktur berikut dan masih berfungsi dengan baik:



gambar



Seringkali , satu plugin hanya menambahkan satu fungsi. Misalnya, plugin Terjemahan dirancang untuk membantu Anda menerjemahkan konten situs Anda ke dalam berbagai bahasa dan memberikan dukungan pengguna multibahasa.



Oktober CMS memiliki pasar yang besar di mana Anda dapat menemukan semua yang Anda butuhkan.



gambar



Tidak seperti Wordpress dan CMS populer lainnya, plugin Oktober dapat berisi komponen. Menurut dokumentasi Oktober, komponen adalah "modul khusus yang dapat dilampirkan ke halaman mana pun, sebagian, atau tata letak". Misalnya, formulir umpan balik, navigasi, FAQ (daftar pertanyaan yang sering diajukan dan jawabannya); pada kenyataannya, segala sesuatu yang logis untuk digabungkan menjadi satu modul yang dapat digunakan kembali di beberapa halaman.



Komponen dibuat sebagai bagian dari plugin dan terletak di komponen / subdirektori :



gambar



Setiap komponen memiliki file PHP, misalnya componentName.php, yang mendefinisikan komponen , serta subdirektori opsionaluntuk parsial. Folder parsial untuk komponen harus memiliki nama huruf kecil yang sama dengan komponen itu sendiri.



Untuk memahami cara kerja komponen, anggaplah komponen kita bertanggung jawab untuk menampilkan postingan blog. 



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'];
    }
}


Seperti yang Anda lihat, komponen memiliki dua fungsi utama. Yang pertama, componentDetails (), memberikan informasi tentang komponen kepada administrator yang akan menambah dan menggunakan komponen di halaman web mereka. Fungsi kedua, posts (), mengembalikan postingan kosong, yang kemudian dapat digunakan di dalam bagian komponen (file blogposts / default.htm), seperti ini: 



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


Untuk membuat CMS Oktober tahu bahwa komponen kita ada , kita harus mendaftarkannya menggunakan file plugin utama di dalam fungsi registerComponents (): 



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


Cara membuat plugin formulir kontak



Kami akan menulis plugin untuk membuat formulir umpan balik. Beginilah cara kerjanya:



  • Formulir tersebut akan berisi kolom berikut: nama depan, nama belakang, alamat email, pesan.
  • Data tersebut akan dikirim ke server menggunakan Ajax.
  • Setelah mengirimkan data, administrator akan menerima email dengan pesan yang dikirim pengguna. Untuk tutorial ini, kita akan menggunakan instalasi bersih CMS Oktober:


gambar



Mari mulai membangun plugin kita dengan menjalankan perintah di terminal yang menghasilkan struktur plugin: 



php artisan create:plugin progmatiq.contactform


gambar



Argumen progmatiq.contactform berisi nama penulis (progmatiq) dan nama plugin (formulir kontak).



gambar



Sekarang kita perlu membuka file plugin.php kita dan mengubah informasi plugin dengan cara berikut: 



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


Berikut adalah beberapa metode lain yang perlu diperhatikan:



  • registerComponents ()

    Di sini Anda dapat menentukan larik komponen yang disediakan plugin Anda.
  • registerPermissions ()

    Anda dapat mendaftarkan izin khusus, yang kemudian dapat Anda gunakan di area lain aplikasi.
  • registerNavigation ()

    Anda bisa menambahkan item menu url kustom ke menu admin.


Mari buat komponen ContactForm:



  • Buat komponen / folder baru di direktori root plugin Anda.
  • Buat file contactForm.php di direktori komponen /.


gambar



  • Tempelkan kode berikut untuk memberi tahu Oktober apa yang dilakukan komponen kita. Kita bisa melakukan ini dengan membuat metode componentDetails () di dalam komponen kita.


<?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'
        ];
    }
}


Sekarang kita perlu mendaftarkan komponen di dalam plugin. Untuk melakukan ini, kami memodifikasi metode registerComponents (): 



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


Fungsi ini mengembalikan larik komponen yang disediakan plugin kami. Nama kelas yang sepenuhnya memenuhi syarat dari komponen adalah kunci dalam metode ini, dan nilainya adalah alias yang akan kita gunakan untuk mereferensikan komponen kita di templat Twig.



Setelah kami mendaftarkan komponen, kami dapat membuat halaman kontak baru dan menambahkan komponen kami (nomor langkah cocok dengan nomor ilustrasi di tangkapan layar):



  1. Di panel admin, buka CMS (1)> Halaman (2) dan klik + Tambahkan (3).
  2. Beri nama dan URL halaman Anda (4).
  3. Beri nama file Anda (5) dan pilih tata letak default (6).


gambar



Mari tambahkan komponen baru kita ke halaman:



  1. Klik Komponen di menu sebelah kiri (1) lalu pilih komponen formulir Kontak kami. Setelah Anda mengkliknya (2), itu harus ditambahkan ke halaman.
  2. Kita perlu menempatkan potongan kode yang akan menambahkan judul ke halaman kita, dan juga membuat komponen menggunakan direktif Twig {% component 'contactForm'%}:


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


gambar



Jika Anda membuka halaman kontak sekarang, Anda tidak akan melihat apa pun kecuali header yang bertuliskan "Kontak".



gambar



Masalahnya, formulir kami tidak memiliki HTML untuk ditampilkan.



Kita perlu membuat file contactform / default.htm di dalam folder components /.



gambar



Anda juga perlu menambahkan HTML berikut ke file: 



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


Sebagian besar kodenya cukup sederhana. Namun, ini memiliki atribut data- * khusus yang dapat digunakan pada bulan Oktober:



Tag memiliki tiga atribut khusus: 



data-request="onSend"


Atribut ini memberi tahu Oktober bahwa fungsi onSend dari komponen kita (yang akan kita buat selanjutnya) harus dipanggil ketika formulir dikirimkan menggunakan Ajax. 



data-request-validate


akan mengaktifkan validasi formulir melalui Ajax menggunakan kesalahan yang akan dikirim dari server jika formulir tidak valid. 



data-request-success="this.reset(); alert('Thank you for submitting your inquiry')"


membersihkan formulir dan kemudian mengeluarkan pesan jika permintaan berhasil dan tidak ada validasi atau kesalahan server.



Setiap masukan memiliki blok berikut, yang bertanggung jawab untuk menampilkan kesalahan validasi yang dikembalikan oleh server untuk masukan yang diberikan: 



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


Tombol kirim memiliki atribut data-attach-loading yang menambahkan spinner dan menonaktifkan tombol ketika server memproses permintaan. Ini untuk mencegah pengguna mengirimkan formulir lagi sampai permintaan sebelumnya telah diproses.



Dan seperti inilah tampilan halaman kita sekarang:



gambar



Mari kembali ke komponen contactForm.php kita dan buat metode helper onSend () dan validate () yang akan bertanggung jawab untuk mengirimkan formulir: 



public function onSend()
    {
        // Get request data
        $data = \Input::only([
            'first_name',
            'last_name',
            'email',
            'content'
        ]);
 
        // Validate request
        $this->validate($data);
 
        // Send email
        $receiver = 'admin@gmail.com';
 
        \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);
        }
    }


Hal pertama yang kita lakukan adalah mendapatkan data dari permintaan dan memvalidasinya menggunakan metode helper validate (). Semua aturan validasi yang tersedia yang dapat Anda gunakan dapat ditemukan di dokumentasi . Jika validasi gagal, metode validate () memunculkan ValidationException - eksekusi kode akan berhenti, dan server akan mengeluarkan kode status 406 dan pesan kegagalan validasi.



Jika validasi berhasil, kami akan mengirimkan email ke administrator kami.



Catatan: untuk kesederhanaan, saya berasumsi bahwa email yang ingin kami kirimi permintaan adalah admin@gmail.com. Pastikan untuk menggunakan alamat email Anda sendiri!



Berikut kode lengkap untuk plugin contactForm.php Anda: 



<?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 = 'admin@gmail.com';
 
        \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);
        }
    }
}


Seperti yang Anda lihat, argumen pertama yang diambil oleh fungsi Mail :: send () adalah nama template email yang akan muncul di badan pesan. Kita perlu membuatnya di panel admin. Buka Pengaturan> Template Email dan klik tombol Template Baru. Kemudian isi form seperti yang terlihat pada layar di bawah ini:



gambar



Berikut adalah body email yang akan kita gunakan:



Anda telah menerima pertanyaan kontak baru



** First Name **:

{{first_name}}

***

** Last Name **:

{{last_name}}

***

** Email **:

{{email}}

** *

** Pesan **:

{{content}}

***


Sekarang simpan template email Anda. Hal berikutnya yang perlu kita lakukan adalah menyiapkan server SMTP yang akan mengirim email.



Buka Pengaturan> Konfigurasi Email dan isi semua pengaturan.



gambar



Tentu saja, saya tidak akan membagikan konfigurasi saya. Gunakan pengaturan Anda sendiri.



Pada tahap ini, kami siap untuk mulai menguji komponen formulir umpan balik.



Pertama, mari kita periksa apakah validasi berfungsi saat kita membiarkan bidang Konten kosong dan memasukkan alamat email yang tidak valid:



gambar



Validasi berfungsi seperti yang diharapkan. Sekarang mari masukkan detail yang benar dan lihat apakah email berhasil dikirim ke administrator kami.



Berikut adalah email yang akan diterima admin@gmail.com:



gambar



Setelah berhasil mengirimkan formulir, pengguna akan melihat pesan yang sesuai:



gambar



Keluaran



Pada artikel ini, kita melihat apa itu plugin dan komponen dan mengetahui cara menggunakannya di CMS Oktober.



Jangan takut untuk membuat plugin Anda sendiri untuk proyek Anda jika Anda tidak dapat menemukan plugin yang sesuai dengan kebutuhan Anda. Ini tidak terlalu sulit dan Anda dapat sepenuhnya mengontrol, memperbarui, dan mengembangkannya kapan saja. Bahkan membuat plugin untuk formulir kontak sederhana, seperti yang kami lakukan hari ini, dapat membantu jika Anda ingin mengintegrasikannya dengan layanan lain nanti, seperti Mailchimp atau HubSpot.



Saya harap artikel ini bermanfaat bagi Anda. Jika Anda memiliki pertanyaan, jangan ragu untuk bertanya di kolom komentar.


More articles:


All Articles