Cara membuat CMS mudah yang memudahkan penyuntingan

Dalam artikel ini, kami akan melihat cara mudah untuk membina sistem pengurusan kandungan anda sendiri yang membuat penyuntingan dan mengemas kini laman web anda mudah. ​​

Kami mencipta artikel ini dengan kerjasama Froala. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Takeaways Key

menggunakan gabungan HTML/CSS/JavaScript/JQuery dan Bootstrap untuk pembangunan frontend untuk memastikan respons dan kemudahan reka bentuk.
GEPAT PHP dan Microsoft SQL Server untuk operasi backend, dengan pilihan untuk beralih ke DBM lain seperti MySQL atau Mariadb mengikut keutamaan pengguna.
Mengintegrasikan Froala, editor WYSIWYG HTML, untuk meningkatkan keupayaan penyuntingan kandungan, menjadikannya lebih mudah bagi pentadbir untuk menguruskan kandungan laman web dengan berkesan.
• Fokus untuk mewujudkan antara muka mesra pengguna yang merangkumi bar alat dinamik untuk menambah komponen halaman dan sistem modal untuk pengurusan input.
• Pastikan CMS menyokong fungsi asas seperti membuat, melihat, mengedit, dan memadam kandungan, dengan potensi untuk peningkatan skalabilitas dan keselamatan dalam perkembangan masa depan.
apa cmss

Sistem Pengurusan Kandungan (CMSS) adalah alat yang kuat dan popular untuk membuat platform yang sangat bergantung kepada kandungan. Mereka menyediakan cara mudah untuk pengguna membuat, menerbitkan, melihat, dan mengedit kandungan.

Juga, mereka sering memerlukan sedikit pengalaman pengekodan. Ini menjadikan mereka pilihan yang baik untuk blogger, perniagaan, pemaju, atau sesiapa yang ingin membina laman web dengan usaha yang kurang.

CMSS digunakan untuk tujuan yang berbeza di seluruh bidang yang berbeza. Sebagai contoh, mereka boleh digunakan untuk menguasai blog, laman web syarikat atau bebas, laman web pendidikan, atau platform e -dagang. Oleh kerana itu, menggunakan CMS tetap menjadi pilihan yang popular dan relevan, memperoleh tempatnya dalam pembangunan web untuk tahun -tahun akan datang.

Terdapat banyak CMS yang ada di pasaran. Sesetengahnya adalah sumber terbuka, sementara yang lain boleh digunakan untuk harga. Kedua-dua sumber terbuka dan dibayar CMS adalah pilihan yang berdaya maju dan mempunyai kelebihan mereka. Mungkin ada juga contoh di mana anda ingin membuat CMS anda sendiri.

Anda boleh menjadi pemaju mencari cabaran, pelajar yang ditugaskan untuk mewujudkan CMS, atau perniagaan yang bercita -cita menjadi nama besar dalam industri CMS. Jika anda ingin membuat sistem pengurusan kandungan, maka artikel ini adalah untuk anda.

bersiap untuk membina cms anda sendiri

kami akan membuat CMS asas (iaitu, cukup boleh digunakan) menggunakan alat berikut:

• html/css/javascript/jQuery untuk frontend
• bootstrap untuk responsif dan reka bentuk mudah
• php untuk backend
• MS SQL Server (atau setaraf) untuk menyimpan data
• SSMS (SQL Server Management Studio atau setaraf) untuk membuat pangkalan data dan jadual
• froala, wysiwyg (apa yang anda lihat adalah apa yang anda dapat) editor html untuk penyuntingan kandungan

Walaupun CMS yang akan kita buat adalah asas, ia juga akan menjadi sangat kukuh. Ini kerana Froala, editor WYSIWYG yang akan kami gunakan, mempunyai kebanyakan ciri yang anda inginkan dalam editor CMS. Artikel ini harus meletakkan anda di landasan yang betul, apa pun matlamat akhir untuk CMS anda.

Juga, ambil perhatian bahawa DBMS (Sistem Pengurusan Pangkalan Data) yang saya akan gunakan adalah Microsoft SQL Server, kerana ia adalah yang paling saya kenal. Anda boleh menukarnya dengan mudah untuk DBMS pilihan anda, seperti MySQL atau MariaDB. Seperti yang kita tidak melakukan apa -apa yang sangat rumit dengan pangkalan data, pilihan DBMS tidak penting di sini .

Sebelum kita meneruskan, mari kita anggap anda sudah mempunyai PHP, DBMS pilihan anda, dan Froala dipasang pada komputer anda. Sekiranya anda belum melakukannya, anda boleh memasangnya dengan melawat laman web masing -masing dan mengikuti arahan.

Apa yang ada dalam CMS?

Biasanya, dalam sistem pengurusan kandungan, terdapat pentadbir dan pengguna akhir. Admin menguruskan halaman, komponen, dan kandungan laman web. Mereka mengekalkan laman web ini, memastikan setiap ciri berfungsi, dan mewujudkan penambahbaikan di mana diperlukan.

Pengguna akhir, sebaliknya, berinteraksi dengan halaman dan komponen laman web berkuasa CMS untuk membuat, mengedit, dan menggunakan kandungan. Kedua -dua pengguna biasanya berinteraksi dengan editor WYSIWYG dalam CMS untuk penciptaan kandungan dan penyuntingan.

Untuk tujuan demonstrasi, dan untuk menjaga perkara yang mudah, kami akan melaksanakan CMS tunggal untuk pentadbir sahaja. Dalam CMS pengeluaran, kita perlu mempertimbangkan banyak faktor lain yang berada di luar skop tutorial ini. Ini termasuk pengurusan pengguna dan hak akses, keselamatan (sanitisasi input, pertanyaan parameter, dll), prestasi, dan banyak lagi.

Dalam CMS mudah kami, pentadbir harus dapat menjalankan tugas -tugas berikut:

• Berinteraksi dengan bar alat untuk membuat komponen halaman seperti tajuk, teks, pautan, dan contoh editor Froala
• berinteraksi dengan contoh froala untuk menyiarkan kandungan yang akan dipaparkan
• Lihat Kandungan Dihantar
• Masukkan mod Lihat, yang menyembunyikan bar alat

Pentadbir juga biasanya boleh mengedit dan memadam komponen halaman, tetapi mari kita tetap membuat dan memadam komponen. Dengan fungsi ini, mari kita mulakan proses kami dengan membuat skema pangkalan data.

menyediakan pangkalan data

Oleh kerana kita mempunyai keperluan mudah, kita juga mempunyai struktur pangkalan data yang lebih mudah. Untuk CMS sampel kami, kami akan menggunakan hanya dua jadual yang tidak berkaitan:

• pos
  • post_id: int, identiti (1,1), bukan null, kunci utama
  • post_content: varchar (max), tidak null
  • posted_on: datetime2 (7), tidak null
• Komponen
  • component_id: int, identiti (1,1), bukan null, kunci utama
  • component_type: char (8), tidak null
  • component_content: varchar (255), nullable
  • created_on: datetime2 (7), tidak null

Jadual pertama, pos, akan menyimpan kandungan dari komponen editor, manakala jadual komponen akan menyimpan elemen halaman yang dihasilkan menggunakan bar alat.

Perhatikan bahawa URL mempunyai panjang maksimum 2048 aksara dalam kebanyakan pelayar, tetapi dalam pangkalan data kami, kami akan menetapkannya kepada 255 aksara sahaja. Selain itu, anda juga mungkin mahu menukar lajur ID kedua -dua jadual ke rentetan rawak untuk aplikasi anda.

Membuat antara muka

Kami akan memasukkan pautan CDN untuk bootstrap, ikon bootstrap, dan fail CSS dan JS Froala. Kami juga akan mempunyai fail CSS dan JS Custom kami:

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

Komponen berikut yang akan kami kerjakan ialah Navbar dan bar alat. NAVBAR mengandungi tajuk atau jenama laman web dan butang ikon untuk menukarkan penglihatan bar alat (fikirkannya sebagai butang "togol admin toggle").

Sebaliknya, bar alat mengandungi empat butang yang sepadan dengan empat komponen yang boleh ditambahkan secara programatik ke halaman:

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

Kod di atas mewujudkan navbar dan komponen. Warna latar belakang navbar adalah #0098F7, memberikan warna biru. Acara toggleToolBar () onClick bertanggungjawab untuk menyembunyikan elemen bar alat. Seterusnya, tulis kod untuk bar alat:

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

Kami menggunakan paparan grid Bootstrap (klik di sini untuk mengetahui lebih lanjut) dan pilihan saiz untuk membuat komponen butangnya untuk bar alat kami. Kami juga menggunakan ikon bootstrap di samping label butang untuk dibaca yang lebih baik. Apabila membuat CMS anda sendiri, terdapat banyak cara anda boleh mewakili bar alat anda.

Pilihan biasa ialah

navbar , kad , atau offcanvas elemen. Dalam kes ini, kami mewakili mereka menggunakan segi empat tepat seperti kad, masing-masing mempunyai tingkah laku seperti butang.

Kami juga akan menambah beberapa acara untuk kotak bar alat kami. Perhatikan bahawa kami akan membuka modal yang kodnya ditunjukkan di bawah untuk setiap tiga kotak pertama (tajuk, teks, dan pautan).

masing -masing mengandungi medan input (dua untuk pautan, satu untuk teks dan satu untuk URL). Akhirnya, kami akan memanggil fungsi CreateComponent untuk memulakan editor WYSIWYG HTML kami untuk CMS:

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

Kod di atas menunjukkan salah satu modal - khususnya, yang digunakan untuk menambah tajuk baru ke halaman. Modal ini ditunjukkan apabila pengguna mengklik butang "tajuk"/kad. Ia ditolak apabila butang keluar atau membatalkan diklik, atau tajuk ditambah.

modal lain berfungsi sama, tetapi perhatikan bahawa input pautan yang betul harus mempunyai dua medan input untuk teks dan URL (untuk sekarang, kami akan menggunakan hanya satu):

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

Akhirnya, kami akan menambah coretan kod di atas ke fail index.css kami untuk menukar warna latar belakang kotak bar alat dan kursor tetikus pada hover. Setelah selesai, antara muka pengguna anda harus muncul seperti yang ditunjukkan di bawah.

Sekarang kami telah menyediakan antara muka, sudah tiba masanya untuk menambah fungsi dengan JavaScript.

Menghantar data

Dalam fail index.js kami, kami akan menentukan lima fungsi untuk ciri -ciri berikut: Membuat komponen, menukarkan penglihatan bar alat, menetapkan semula medan input, memuatkan jawatan, dan komponen pemuatan. Mari lihat apa yang mereka lakukan.

1. createComponent (ComponentType)
   Kami akan menggunakan fungsi ini untuk menghantar komponen yang dibuat ke pangkalan data. Ia memerlukan ComponentType, yang menggambarkan jenis komponen (pautan, tajuk, teks, editor), sebagai parameternya. Pertama, kita mesti menentukan jenis komponen menggunakan pernyataan switch-case. Untuk tajuk, teks, dan pautan, kami hanya akan menghantar kandungan mereka bersama -sama dengan jenis komponen mereka kepada PHP/Add.php menggunakan permintaan AJAX. Sebaliknya, untuk editor, kita hanya perlu menghantar jenis komponen. Selepas kandungannya berjaya disimpan, kami akan memanggil fungsi GetComponents () untuk "menyegarkan" komponen yang dipaparkan.

2. toggleToolBar ()
   Fungsi ini hanya menambah atau membuang kelas D-Flex dan D-tiada dari bar alat seperti yang diperlukan.

3. ResetValue (ComponentType)
   Fungsi yang mempunyai parameter ComponentType, ResetValue menghidupkan semula nilai medan input dengan mendapatkan setiap elemen dengan ID dan menetapkan nilainya kepada rentetan kosong.

4. getComponents ()
   Fungsi ini mula -mula membuat permintaan HTTP AJAX kepada PHP/LOAD.PHP untuk mendapatkan data komponen dari pangkalan data. Jika berjaya, ia secara dinamik menjana HTML mengikut komponen yang diambil dari pangkalan data (mis., Satu

   elemen untuk komponen tajuk). Selepas itu, untuk setiap komponen editor, contoh Froala diasaskan bersama dengan butang simpan. Akhir sekali, pendengar acara klik ditambah ke butang untuk menyimpan jawatan yang ditulis dalam editor. Pada kejayaan, fungsi getPosts () dipanggil untuk "menyegarkan" senarai jawatan.

5. getPosts ()
   Fungsi getPosts () terdiri daripada permintaan AJAX yang mengambil semua jawatan dari pangkalan data melalui php/loadposts.php. Sama seperti getComponents (), fungsi ini secara dinamik menjana HTML untuk memaparkan jawatan.

Pada beban dokumen, kedua -dua fungsi getComponents () dan getPosts () dipanggil. Sekarang bahawa anda mempunyai kod JS yang diperlukan untuk menghantar data ke pelayan, semua yang tersisa adalah untuk memprosesnya di backend.

Menyediakan backend

Seperti yang anda perhatikan sebelum ini, kami mempunyai empat fail PHP - dua untuk menambah komponen dan jawatan, dan dua untuk memuatkannya. Mereka terdiri daripada kod yang sama, bermula dari menyambung ke pangkalan data dengan sqlsrv_connect, mendapatkan pembolehubah $ _post (jika ada), dan menentukan dan menjalankan pertanyaan. Disenaraikan di bawah adalah pertanyaan yang terlibat dalam fail ini:

1. LOAD.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>

2. loadposts.php:

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

add.php:

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

addpost.php:

Sebaik sahaja anda menetapkan fail PHP ini, anda sepatutnya dapat melaksanakan semua fungsi asas CMS dengan kuasa penyuntingan editor WYSIWYG. Apabila membuat CMS anda sendiri, ingatlah untuk membasmi input dan parameterkan pertanyaan, antara langkah -langkah keselamatan yang lain, untuk memastikan pengguna dan aplikasi anda selamat dari kelemahan tertentu.

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

ingin melihat CMS asas kita dalam tindakan? Mari kita uji!

Pertama, mari buat beberapa komponen halaman menggunakan bar alat yang kami bina.

Sekarang bahawa kami telah mencipta salah satu daripada setiap komponen, termasuk contoh editor, mari cuba menambah jawatan ke halaman kami.

Dalam video di atas, kita dapat melihat beberapa ciri yang boleh ditawarkan oleh editor WYSIWYG yang kuat. Ini termasuk pemformatan fon, salinan-padat semasa memelihara format, dan muat naik imej. Ia juga menunjukkan bilangan aksara di sudut kanan bawah untuk penulis kiraan yang sedar. Selepas menyimpan kandungan, kami melihatnya dipaparkan tepat di bawah editor. Anda mungkin mahu menambah lebih banyak padding dan merancang atau menukar paparan sepenuhnya untuk siaran anda, tetapi ini akan dilakukan buat masa ini.

Froala menyediakan lebih dari seratus ciri yang dapat memperkayakan pengeditan kandungan dan pengalaman pengguna. Mereka juga diletakkan dengan baik untuk menghalang pengguna yang luar biasa. Editor boleh disesuaikan, jadi anda hanya boleh memasukkan ciri -ciri yang anda mahu pengguna anda gunakan.

Setelah menyelamatkan kandungan jawatan kami, kami kini boleh menyemak jadual pangkalan data.

Imej di atas menunjukkan kandungan editor yang kami buat, bersama dengan ID dan tarikh penyiarannya. Anda juga dapat melihat bahawa kod HTML pada lajur Post_Content dipelihara.

Untuk aplikasi CMS yang lebih besar, anda boleh menyimpan maklumat pos tambahan, termasuk butiran pengguna, komen, interaksi halaman, dan statistik, antara lain. Sudah tentu, anda perlu membuat jadual lain yang berkaitan untuk ini.

Akhirnya, mari kita lihat bagaimana pengguna akhir melihat halaman menggunakan butang togol bar alat kami.

dan di sana anda memilikinya - CMS yang boleh anda bina; Yayasan rock-pepejal untuk projek CMS rumit pada masa akan datang.

Apa yang akan datang?

Sekarang anda mempunyai alat dan pengetahuan yang diperlukan untuk membina CMS yang mudah tetapi kukuh, sudah tiba masanya untuk menentukan langkah seterusnya. Anda boleh membuat banyak penambahbaikan dalam peralihan CMS ini menjadi yang penuh sesak.

Satu peningkatan adalah antara muka dan penambahan ciri -ciri baru. Ini termasuk hak akses pengguna, bahagian komen, enjin carian, alat tambahan, komponen halaman, dan tema, untuk menamakan beberapa.

Satu lagi peningkatan jelas yang boleh anda buat ialah keselamatan. Anda boleh melindungi CMS, pelayan, data, pengguna, dan perniagaan anda dengannya. Kami mengesyorkan menyemak pautan ini untuk panduan dari OWASP (Open Web Application Security Project) yang menerangkan amalan keselamatan terbaik.

Anda mungkin juga ingin mengetahui lebih lanjut mengenai editor WYSIWYG pilihan anda. Sebagai contoh, anda boleh menyemak sama ada ia mempunyai halaman dokumentasi yang komprehensif dan mudah difahami (klik di sini untuk melihat contoh).

Satu lagi cara untuk membiasakan diri dengan editor adalah menggunakan demo dan percubaan percuma. Dan apabila anda melihat manfaat yang boleh dibawa, anda boleh melakukan kemudahan anda. Editor ini menjimatkan masa, dan anda memerlukan bulan -bulan tambahan (atau bahkan tahun) untuk membuat dan menggilap ciri -ciri lain CMS anda.

Akhir sekali, anda perlu membaca lebih lanjut mengenai amalan terbaik CMS. Mereka berubah dari semasa ke semasa, jadi dikemas kini sentiasa lebih baik.

kami berharap anda menikmati membaca panduan ini dan matlamat anda untuk mewujudkan CMS sekarang kelihatan lebih mudah untuk dicapai.

Soalan Lazim (Soalan Lazim) Mengenai Membuat CMS Mudah Untuk Penyuntingan Mudah

Apakah ciri-ciri utama yang perlu dipertimbangkan ketika membuat CMS yang mudah? Ini termasuk antara muka yang mudah dan intuitif, pengurusan kandungan mudah, fleksibiliti, dan pilihan penyesuaian. CMS juga harus mempunyai sistem keselamatan yang mantap untuk melindungi kandungan anda. Di samping itu, pertimbangkan untuk memasukkan ciri-ciri mesra seo untuk membantu meningkatkan keterlihatan laman web anda di enjin carian.

Bagaimana saya boleh memastikan CMS saya mesra pengguna? Fokus pada mewujudkan antara muka intuitif yang mudah dinavigasi. Ini termasuk menu yang jelas, butang yang mudah dicari, dan struktur logik. Di samping itu, berikan dokumentasi dan sokongan yang komprehensif untuk membantu pengguna memahami cara menggunakan CMS dengan berkesan. Ciri -ciri yang membolehkan pengguna mengubah suai susun atur, reka bentuk, dan fungsi laman web mereka. Ini termasuk pilihan untuk menukar tema, menambah plugin, dan menyesuaikan kod. Di samping itu, pastikan CMS anda menyokong pelbagai jenis kandungan, seperti teks, imej, dan video. untuk melindungi kandungan anda. Ini termasuk ciri-ciri seperti keperluan kata laluan yang kuat, pengesahan dua faktor, dan kemas kini keselamatan biasa. Di samping itu, pertimbangkan untuk menggabungkan langkah-langkah untuk melindungi daripada ancaman keselamatan yang sama, seperti suntikan SQL dan skrip lintas tapak. Mesra, pertimbangkan untuk menggabungkan ciri -ciri yang membantu meningkatkan keterlihatan laman web anda pada enjin carian. Ini termasuk pilihan untuk menambah tag meta, mewujudkan URL mesra SEO, dan mengintegrasikan dengan alat SEO yang popular. Di samping itu, pastikan CMS anda menyokong masa pemuatan cepat dan reka bentuk mesra mudah alih, kerana faktor-faktor ini juga boleh memberi kesan kepada SEO. Alat -alat dengan CMS anda dapat meningkatkan fungsinya dan menjadikannya lebih efisien. Ini termasuk alat untuk SEO, analisis, integrasi media sosial, dan banyak lagi. Walau bagaimanapun, pastikan integrasi ini tidak berkompromi dengan keselamatan atau prestasi CMS anda. kandungan dan pengguna tanpa menjejaskan prestasi. Ini boleh melibatkan mengoptimumkan kod anda, menggunakan pangkalan data yang cekap, dan melaksanakan teknik caching. Di samping itu, pertimbangkan untuk menggunakan seni bina yang fleksibel yang boleh menyesuaikan diri dengan perubahan keperluan.

Bahasa pengaturcaraan apa yang harus saya gunakan untuk membuat CMS saya? Walau bagaimanapun, pilihan popular termasuk PHP, JavaScript, dan Python. Bahasa -bahasa ini digunakan secara meluas, mempunyai sokongan komuniti yang kuat, dan menawarkan pelbagai perpustakaan dan rangka kerja yang dapat memudahkan proses pembangunan. Daripada CMS anda, pertimbangkan untuk menggunakan alat yang boleh mensimulasikan aktiviti pengguna dan memantau bagaimana CMS anda bertindak balas. Ini termasuk alat ujian beban, alat pemantauan prestasi, dan alat analisis. Di samping itu, kerap mengkaji semula prestasi CMS anda dan membuat pengoptimuman yang diperlukan untuk memastikan ia tetap cekap. untuk memastikan mereka boleh menggunakannya dengan berkesan. Ini termasuk membuat dokumentasi terperinci, menyediakan tutorial, dan menawarkan forum sokongan atau meja bantuan. Di samping itu, pertimbangkan untuk memasukkan sistem maklum balas untuk mengumpulkan pandangan pengguna dan membuat penambahbaikan.

Atas ialah kandungan terperinci Cara membuat CMS mudah yang memudahkan penyuntingan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!