ProcessWire CMS – Panduan Pemula

Diterbitkan: 2022-03-10
Ringkasan cepat Sistem untuk mengelola konten lebih sering daripada tidak berdasarkan pendapat. Misalnya, sebagian besar dari mereka mengharapkan struktur konten kaku tertentu untuk memasukkan data dan kemudian memiliki cara terukir khusus untuk mengakses dan mengeluarkan data itu, apakah itu masuk akal atau tidak. Selain itu, mereka jarang menawarkan alat yang efektif untuk keluar dari jalur yang telah ditentukan jika suatu kasus memerlukannya.

ProcessWire adalah sistem manajemen konten (CMS) yang didistribusikan di bawah Lisensi Publik Mozilla versi 2.0 (MPL) dan Lisensi MIT. Ini dirancang dari bawah ke atas untuk mengatasi masalah yang disebabkan oleh jenis opini yang tepat (yang, mau tidak mau, menghasilkan pengembang dan pengguna yang frustrasi) dengan menjadi — Anda dapat menebaknya — tidak memiliki opini. Pada intinya, ini didasarkan pada beberapa konsep inti sederhana dan menawarkan API yang sangat mudah digunakan dan kuat untuk menangani konten apa pun. Mari kita langsung ke dalamnya!

Bacaan Lebih Lanjut tentang SmashingMag:

  • Merancang untuk Sistem Manajemen Konten
  • Mengapa Generator Situs Web Statis Adalah Hal Besar Berikutnya
  • Kumpulan Ikon Sistem Manajemen Konten (CMS) (12 Ikon Gratis)
  • Memulai Dengan Sistem Manajemen Konten

GUI Admin

Setelah menginstal ProcessWire (yang membutuhkan PHP 5.3.8+, MySQL 5.0.15+ dan Apache), Anda akan melihat halaman beranda dari GUI admin default:

Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

ProcessWire admin GUI.
GUI admin memiliki struktur yang cukup sederhana. Ini juga sepenuhnya responsif, sehingga akan terlihat sedikit berbeda di layar lebar.

Catatan: Halaman yang Anda lihat di hierarki halaman hierarki (lebih lanjut nanti) ada di sana karena saya memilih profil situs web "Default (Edisi Pemula)" selama proses instalasi. Ini benar-benar opsional. Anda juga dapat memulai dengan profil situs web kosong, yang memungkinkan Anda membangun semuanya dari awal.

Anda sebenarnya dapat memilih dari banyak tema admin, meskipun untuk ProcessWire 2.6+ tema default atau tema Reno direkomendasikan. Karena Reno sudah dikemas dengan setiap instalasi ProcessWire, beralih ke itu cukup mudah: Cukup instal dan pilih di profil pengguna Anda.

Tangkapan layar tema "Reno".
Memasang tema baru untuk GUI admin itu mudah. Yang ini bernama Reno. (Lihat versi GIF animasi)

Mari kita lihat sekilas navigasi back-end utama:

Tangkapan layar navigasi utama di bagian belakang.
  • "Halaman" Ini adalah titik masuk dari GUI admin. Ini menampilkan hierarki halaman hierarki dan, dengan demikian, semua konten situs web Anda di bagian belakang.
  • "Pengaturan" Ini adalah tempat untuk mengatur arsitektur model data umum instalasi Anda melalui templat dan bidang (lebih lanjut tentang itu nanti). Ini juga tempat modul ProcessWire sering menambahkan entri untuk fungsionalitas khusus dan antarmuka pengguna — misalnya, memvisualisasikan pesan log langsung di GUI admin atau mengelola semua bahasa yang berbeda saat menangani konten multi-bahasa.
  • "Modul" Di sinilah Anda mengelola semua modul situs web Anda. Pikirkan modul ProcessWire sebagai plugin WordPress: Mereka memperluas dan menyesuaikan sistem.
  • “Akses” Di sinilah Anda mengelola pengguna, peran pengguna, dan izin pengguna.

Tiga Konsep Inti Sederhana

Konsep inti yang membentuk arsitektur model data keseluruhan ProcessWire persis tiga: halaman, bidang, dan templat . Mari kita lihat satu per satu.

Semuanya Adalah Halaman: Atau, Satu Pohon Halaman untuk Mengatur Mereka Semua

Sebuah halaman di ProcessWire dapat menghasilkan halaman biasa di ujung depan situs web Anda, siap untuk dikunjungi oleh pengguna Anda (seperti "Beranda" dan "Tentang" pada tangkapan layar di atas). Tetapi sebuah halaman juga bisa ada hanya di bagian belakang, tanpa bagian depan — misalnya, halaman pengaturan tersembunyi tempat Anda menyimpan slogan global, logo, dan pemberitahuan hak cipta situs web Anda. Ketika saya mengatakan "semuanya adalah halaman" di ProcessWire, saya sungguh-sungguh. Heck, bahkan tautan navigasi utama di GUI admin terbuat dari halaman tersembunyi di hierarki halaman hierarki!

Cuplikan layar yang menunjukkan bahwa bahkan navigasi back-end dibuat dari halaman.
Di ProcessWire, semuanya adalah halaman. Bahkan navigasi utama dan sub-navigasi dibuat dari halaman dari hierarki halaman hierarki.

Ini sangat meta sehingga saya teringat meme Xzibit tertentu. Tapi mari kita berhenti di situ.

Konsep halaman yang hanya terlihat di bagian belakang cukup kuat karena membuka seluruh dunia kemungkinan tentang cara menyusun dan mengakses data melalui halaman lain (imajinasi Anda menjadi satu-satunya batasan). Anda dapat membuat katalog produk besar-besaran, atau aplikasi intranet dengan ratusan ribu item berdasarkan hierarki halaman yang kompleks, atau hanya blog sederhana dengan kategori dan tag blog biasa (setiap kategori dan tag menjadi halaman di pohon halaman) .

Joss Sanglier, anggota terkemuka di komunitas ProcessWire, menguraikan konsep halaman menjadi ini:

[I]n halaman ProcessWire […] bukanlah kumpulan informasi yang besar, tetapi hal-hal kecil, tidak lebih dari tautan ke dunia bidang dan template yang lebih menarik; hanya sedikit data dalam database besar Anda yang menarik.

Halaman di ProcessWire digunakan untuk segala macam hal. Mereka dapat digunakan sebagai penanda dalam daftar halaman Anda. Mereka dapat digunakan sebagai induk grup untuk halaman lain. Mereka dapat digunakan sebagai kategori, tag atau daftar atau pengguna. Dan mereka bahkan dapat digunakan untuk pilihan drop-down sederhana — hanya untuk memberikan label dan nilai.

Mari sedikit berinteraksi dengan hierarki halaman hierarki:

Tangkapan layar seret dan lepas di pohon halaman.
Anda dapat memindahkan halaman dalam hierarki halaman hierarki dengan menarik dan melepas. (Lihat versi GIF animasi)

Seperti yang Anda lihat, halaman dapat diedit, dipindahkan, atau dibuang, dan halaman tersebut dapat memiliki anak dan cucu dalam jumlah tak terbatas.

Mari kita buka halaman "Beranda":

Tangkapan layar dari halaman Beranda yang dibuka
Halaman "Beranda" dari profil situs web "Default (Edisi Pemula)" menampilkan beberapa bidang sederhana, yang semuanya opsional.

Ini membawa kita ke konsep inti ProcessWire berikutnya, bidang.

Bidang Adalah Wadah Tempat Anda Menempatkan Data

Bidang pada dasarnya adalah wadah tempat Anda meletakkan data. Pada titik ini, penting untuk menyadari bahwa ProcessWire tidak memiliki konsep bidang khusus, seperti halnya WordPress, karena setiap bidang di ProcessWire adalah bidang khusus . Saat Anda membuat bidang, Anda bisa memberinya label, deskripsi, dan beberapa catatan tambahan yang akan muncul di bawahnya.

Mari edit bidang "Judul" dan tambahkan deskripsi dan catatan ke dalamnya:

Tangkapan layar bidang judul dengan deskripsi dan catatan khusus.
Setiap bidang dapat diberikan deskripsi khusus dan catatan. (Lihat versi GIF animasi)

Jenis bidang yang telah diinstal sebelumnya mencakup sebagian besar kebutuhan input data dasar. Misalnya, Anda dapat membuat hal-hal seperti kotak centang, pemilih tanggal, kumpulan bidang (bidang yang mengelompokkan bidang lain ke dalam unit logis visual), pengunggah file dan gambar dan, tentu saja, bidang teks dan bidang teks (editor WYSIWYG default adalah CKEditor ).

Ada juga banyak jenis bidang yang dikemas sebelumnya dan pihak ketiga untuk dipilih. Modul inti yang berguna, yang tidak diinstal secara default, adalah bidang pengulang . Ini memungkinkan Anda membuat baris kumpulan data secara dinamis.

Tangkapan layar repeater.
Repeater adalah cara yang rapi dan mudah untuk membuat baris data dengan jenis yang sama. (Lihat versi GIF animasi)

ProcessWire juga cocok untuk menangani gambar . Misalnya, Anda dapat memutuskan varian gambar mana yang harus dibuat oleh ProcessWire secara otomatis dari gambar setelah mengunggahnya (yang memungkinkan kasus penggunaan yang bagus untuk gambar responsif). Dan memilih thumbnail untuk gambar sangatlah mudah.

Tangkapan layar memotong gambar.
ProcessWire sangat cocok untuk bekerja dengan gambar. (Lihat versi GIF animasi)

Jenis bidang lain yang berguna adalah jenis bidang halaman . Anda dapat menautkan halaman lain dengan halaman yang sedang Anda edit dan, dengan demikian, membuat hubungan di antara mereka. Dalam pengaturan bidang, Anda dapat memutuskan bagaimana tampilan input dan interaksi dengan bidang seharusnya — misalnya, apakah satu halaman atau beberapa halaman harus dapat dipilih, atau apakah hanya halaman anak dari halaman induk tertentu yang dapat dipilih. Jika Anda ingin menulis, katakanlah, sebuah posting blog, Anda dapat memilih untuk hanya mengizinkan kategori posting blog untuk dilengkapi secara otomatis.

Tangkapan layar bidang halaman pelengkapan otomatis.
Bidang halaman dapat memiliki manifestasi yang sangat berbeda. Ini satu: Fungsi pelengkapan otomatis memungkinkan Anda memilih halaman yang sudah ada (di menu tarik-turun) tetapi juga membuat halaman baru langsung di dalam bidang. (Lihat versi GIF animasi)

Fitur rapi yang dapat Anda aktifkan dalam pengaturan bidang adalah kemampuan untuk mengedit konten bidang di bagian depan situs web Anda . Setelah pengguna masuk ke bagian belakang ProcessWire, mereka dapat beralih ke bagian depan situs web dan mengedit serta menyimpan konten tepat di tempat yang akhirnya akan dirender.

Tangkapan layar konten pengeditan di front-end situs web Anda.
Apakah Anda penggemar pengeditan konten front-end? ProcessWire telah Anda liput. (Lihat versi GIF animasi)

Setelah melihat halaman dan bidang di ProcessWire, Anda mungkin bertanya pada diri sendiri: Bagaimana halaman mengetahui bidang mana yang dimilikinya? Dan di mana saya dapat menentukan bagaimana bidang diurutkan dan dirender pada halaman? Jadi, mari kita beralih ke konsep inti terakhir, template.

Template Adalah Cetak Biru Halaman

Setiap kali Anda membuat halaman di hierarki halaman hierarki, ProcessWire perlu mengetahui templat mana yang terkait dengannya. Itu karena halaman perlu mengetahui bidang mana yang harus dirender, dan informasi itu selalu menjadi bagian dari template masing-masing.

Singkat cerita: Templat berisi semua informasi yang perlu diketahui halaman tentang isinya (bidang apa yang dimilikinya, bagaimana bidang tersebut dirender dan bagaimana perilakunya).

Mari kita buka template "Beranda" dari contoh instalasi kita.

Tangkapan layar pengaturan template
Template di ProcessWire sangat fleksibel dan merupakan salah satu alasan mengapa ProcessWire lebih terasa seperti kerangka kerja daripada CMS. (Lihat versi besar)

Hal utama yang harus diperhatikan adalah jumlah pengaturan. Ada banyak hal yang bisa ditemukan di sini. Misalnya, Anda dapat membatasi akses ke halaman yang dibuat dengan template ini untuk peran pengguna tertentu. Atau Anda dapat memutuskan apakah halaman yang dibuat dengan template ini harus di-cache untuk jangka waktu tertentu (untuk meningkatkan kinerja), ditambah kondisi di mana cache harus dibersihkan.

Pengaturan kuat lainnya disembunyikan di tab "Keluarga". Di sini, Anda dapat menentukan apakah halaman yang dibuat dengan templat ini dapat memiliki halaman turunan dan templat mana yang diizinkan untuk halaman induk atau halaman turunannya. Ini memungkinkan Anda untuk membuat tipe hierarki keluarga templat yang Anda inginkan. Ini adalah cara yang fleksibel dan praktis (dan sebenarnya salah satu cara yang paling ampuh) untuk menyusun data Anda, dan ini adalah salah satu dari banyak cara ProcessWire menunjukkan fleksibilitasnya.

Mari kita mengalihkan perhatian kita ke daftar bidang dalam template. Melihat tangkapan layar di atas, Anda dapat melihat bahwa urutan bidang menyerupai urutan bidang yang akan dirender di halaman beranda. Anda cukup menarik dan melepas bidang untuk mengubah urutan dalam daftar, sehingga mengubah urutan tampilan saat mengedit halaman beranda.

Tangkapan layar kiri setengah: seret dan lepas bidang dalam pengaturan template. Tangkapan layar kanan setengah: mengubah urutan bidang pada halaman "Beranda".
Mengubah urutan bidang dalam pengaturan templat (kiri) memengaruhi urutan bidang yang dirender pada halaman (kanan). (Lihat versi GIF animasi)

Anda juga dapat mengubah lebar bidang pada halaman. Cukup klik pada bidang dan ubah. Mari kita menempatkan bidang "Judul" dan "Judul" berdampingan.

Tangkapan layar bidang yang ditampilkan berdampingan
Anda memiliki kendali penuh atas bagaimana bidang dirender pada halaman. (Lihat versi GIF animasi)

Contoh lain tentang bagaimana Anda dapat menyesuaikan dan menyesuaikan antarmuka pengguna halaman dan bidangnya adalah dependensi bidang masukan. Ini memungkinkan Anda untuk menentukan kondisi di mana bidang tertentu di editor halaman ditampilkan atau diperlukan. Mari buat bidang "Judul" terlihat di UI hanya jika pengguna memasukkan sesuatu di bidang "Judul", dan mari tandai bidang "Ringkasan" sebagai wajib hanya jika pengguna memasukkan sesuatu di bidang "Judul":

Tangkapan layar pengaturan untuk dependensi bidang masukan
Bidang "Judul" akan ditampilkan di halaman hanya setelah pengguna memasukkan sesuatu di bidang "Judul". (Lihat versi GIF animasi)

Berikut adalah video yang menunjukkan kepada Anda bagaimana dependensi bidang input dapat digunakan untuk meningkatkan pengalaman pengguna saat bekerja dengan ProcessWire:

Bagaimana dependensi bidang input dapat digunakan untuk meningkatkan pengalaman pengguna saat bekerja dengan ProcessWire

Jumlah, urutan, dan tampilan bidang pada halaman sepenuhnya di bawah kendali Anda. Anda dapat menempatkan hanya satu bidang dalam template, tidak ada sama sekali (tidak terlalu berguna) atau lebih dari 50 bidang, 100 atau bahkan lebih. Anda dapat memesannya dengan cara apa pun yang Anda inginkan, tentukan mana yang diperlukan atau terlihat dan mana yang tidak, dan tentukan dalam keadaan apa mereka harus diperlukan atau terlihat. Di sinilah pendekatan non-opini ProcessWire bersinar.

Roundup: Halaman, Bidang, Template

Mari kita rekap hubungan teknis antara halaman, bidang, dan templat: Anda menambahkan bidang ke templat, dan Anda memilih templat saat membuat halaman baru. Bidang yang Anda lihat saat mengedit halaman adalah bidang yang telah Anda tambahkan ke template yang dipilih.

Cara lain untuk melihat ini adalah melalui analogi dari dunia pemrograman:

  • Template seperti kelas.
  • Bidang seperti properti kelas.
  • Halaman adalah instance dari kelas.

Setelah Anda menginternalisasi konsep-konsep ini, Anda akan dilengkapi dengan semua yang perlu Anda ketahui untuk dikembangkan di ProcessWire. Dan alasannya adalah karena filosofi ProcessWire hanya didasarkan pada ketiga konsep ini. Cukup keren, bukan?

File Template Dan API: Pasangan Dimaksudkan Untuk Bersama

Tempat Anda mengambil data yang dimasukkan di bagian belakang ProcessWire dan mengeluarkannya di bagian depan, tentu saja, adalah sistem file — lebih khusus lagi, folder /site/templates/ dari instalasi ProcessWire Anda. Sebuah template dapat memiliki file PHP fisik dengan nama yang sama yang terkait dengannya; jadi, template home akan memiliki file home.php di folder /site/templates/ .

Catatan: Bagaimana Anda mengembangkan file template Anda sepenuhnya terserah Anda. Jika Anda terbiasa dengan gaya WordPress dalam mengembangkan sesuatu, Anda dapat melanjutkan seperti biasanya. Atau, jika Anda memiliki pengaturan yang cukup rumit dan besar serta ingin membuat arsitektur yang lebih canggih, Anda dapat menggunakan pendekatan yang terinspirasi MVC, yang juga akan berfungsi dengan baik. Ryan Cramer memiliki tutorial pengantar yang cukup bagus, berjudul "Cara Menyusun File Template Anda," di mana Anda dapat mempelajari berbagai pendekatan untuk pengembangan file template di ProcessWire.

Kode yang Anda tulis dalam file template sebagian besar akan terdiri dari konstruksi PHP dasar ( kondisi if , loop foreach , pernyataan echo ), markup HTML, dan API ProcessWire. API ini sangat terinspirasi oleh jQuery — jadi, ini benar-benar seperti mengulangi dan melintasi konten yang telah Anda masukkan di bagian belakang melalui metode, penyeleksi, dan kemampuan rantai (antarmuka lancar). Sangat mudah digunakan dan sangat ekspresif, seperti jQuery.

Mari kita mulai dengan melihat beberapa contoh sederhana untuk membantu Anda menggunakan API. Namun sebelum kita mulai, ingatlah untuk menandai lembar contekan ProcessWire API, referensi bermanfaat dengan gambaran umum semua metode API yang tersedia.

Tangkapan layar Lembar Curang ProcessWire
Lembar contekan API akan melayani Anda sebagai pendamping yang baik.

Hal pertama yang ingin kita lakukan adalah mengakses dan menampilkan konten bidang halaman. API memperlihatkan sebuah variabel untuk kita tangani dengan ini: $page .

Mendapatkan Halaman Saat Ini Dengan Variabel $page

Variabel $page berisi semua bidang dari satu halaman. Ini termasuk bidang bawaan (seperti nama templat halaman), serta bidang yang Anda, sebagai pengembang, tambahkan ke templat halaman.

Mari kita buka home.php , yang merupakan file template dari template home , dan tambahkan baris ini ke dalamnya:

 echo $page->title;

Ini memberi tahu ProcessWire untuk mengambil bidang "Judul" dari halaman tempat kita berada saat ini ("Beranda") dan menampilkannya. Katakanlah kita juga memiliki bidang "Judul" di halaman, yang ingin kita gunakan sebagai ganti bidang "Judul" tetapi hanya jika pengguna telah memasukkan sesuatu di dalamnya.

 echo $page->get("headline|title");

Kami menggunakan metode get untuk mengakses bidang halaman (jadi, $page->get(“title”) pada dasarnya setara dengan contoh kode pertama di atas), dan kami menulis “headline|title” dalam metode get . Ini memberitahu ProcessWire untuk terlebih dahulu memeriksa bidang "Judul" dan menampilkan konten judul. Namun jika kolom “Judul” kosong, maka kolom “Judul” digunakan sebagai pengganti.

Menggunakan variabel API dalam string PHP juga dimungkinkan. Dua pernyataan echo berikut untuk mengeluarkan jumlah anak halaman adalah setara:

 echo "This page has " . $page->numChildren . " children pages."; echo "This page has {$page->numChildren} children pages.";

Mari kita dapatkan anak-anak dari halaman root kita (ingat, kita masih di home.php ) dan menampilkannya sebagai daftar tautan:

 echo "<ul>"; foreach ($page->children as $child) { echo "<li><a href='{$child->url}'>{$child->title}</a></li>"; } echo "</ul>";

Contoh lain dari bidang bawaan (seperti children -anak dan url dalam contoh di atas) adalah mengulangi semua induk laman dan membuat navigasi remah roti:

 echo "<ul>"; foreach ($page->parents as $parent) { echo "<li><a href='{$parent->url}'>{$parent->title}</a></li>"; } // output the page itself at the end echo "<li>{$page->title}</li>"; echo "</ul>";

Pada halaman root (“Beranda”), ini hanya akan menampilkan judulnya, karena $page->parents akan kosong.

Sebelumnya, saya menunjukkan cara membuat gambar mini di GUI admin. Membuat thumbnail juga dapat dilakukan secara terprogram dengan bantuan API. Mari kita ulangi semua gambar yang diunggah di bidang “Gambar”, buat varian gambar besar dengan lebar 600 piksel dengan tinggi proporsional, dan gambar mini 150 × 150 piksel, dengan opsi khusus seperti pengaturan pemotongan dan kualitas gambar. Pada akhirnya, kami ingin menautkan gambar kecil ke gambar besar. Kedengarannya rumit? Tidak.

 $options = array( "quality" => 90, "cropping" => "northwest" ); foreach ($page->images as $image) { $large = $image->width(600); $thumbnail = $image->size(150, 150, $options); echo "<a href='{$large->url}'><img src='{$thumbnail->url}' alt='></a>"; }

ProcessWire cukup pintar dalam hal ini karena ia membuat gambar dalam berbagai ukuran dengan cepat dan menyimpan cache-nya, sehingga ia harus membuat versi sekali saja.

Berikut adalah satu contoh $page terakhir untuk menunjukkan kepada Anda bahwa API terasa seperti Anda berinteraksi dengan DOM saat menggunakan jQuery. Mari dapatkan anak terakhir dari halaman induk tempat kita berada saat ini.

 $wantedPage = $page->parent->children()->last();

Selain variabel $page , API memperlihatkan variabel penting lainnya: $pages .

Mendapatkan Semua Halaman Dengan Variabel $pages

Dengan $pages , Anda memiliki akses ke semua halaman di instalasi ProcessWire Anda. Dengan kata lain, ini memberi Anda akses ke semua konten Anda dari mana saja .

Misalnya, Anda dapat memiliki halaman pengaturan tersembunyi (artinya, tidak dapat diakses di ujung depan) di instalasi ProcessWire Anda; Anda dapat menambahkan pengaturan global, seperti judul dan deskripsi situs web Anda; dan Anda dapat mengakses dan mengeluarkan gumpalan konten ini dari file template apa pun yang Anda inginkan.

 $settings = $pages->get("template=settings"); echo "<h1>{$settings->global_title}</h1>"; echo "<p>{$settings->global_description}</p>";

Salah satu kasus penggunaan umum untuk satu halaman topik blog adalah untuk menampilkan semua posting blog di mana topik tersebut direferensikan. Cukup tulis ini di file templat topik:

 $pages->find("template=blog-post, topics=$page");

Catatan: topics adalah bidang di template blog-post tempat Anda akan menambahkan semua kategori topik yang khusus untuk posting blog.

Pengaturan kuat lainnya disembunyikan di tab "Keluarga". Di sini, Anda dapat menentukan apakah halaman yang dibuat dengan templat ini dapat memiliki halaman turunan dan templat mana yang diizinkan untuk halaman induk atau halaman turunannya. Ini memungkinkan Anda untuk membuat tipe hierarki keluarga templat yang Anda inginkan. Ini adalah cara yang fleksibel dan praktis (dan sebenarnya salah satu cara yang paling ampuh) untuk menyusun data Anda, dan ini adalah salah satu dari banyak cara ProcessWire menunjukkan fleksibilitasnya.

Mari kita mengalihkan perhatian kita ke daftar bidang dalam template. Melihat tangkapan layar di atas, Anda dapat melihat bahwa urutan bidang menyerupai urutan bidang yang akan dirender di halaman beranda. Anda cukup menarik dan melepas bidang untuk mengubah urutan dalam daftar, sehingga mengubah urutan tampilan saat mengedit halaman beranda.

Tangkapan layar kiri setengah: seret dan lepas bidang dalam pengaturan template. Tangkapan layar kanan setengah: mengubah urutan bidang pada halaman "Beranda".
Mengubah urutan bidang dalam pengaturan templat (kiri) memengaruhi urutan bidang yang dirender pada halaman (kanan). (Lihat versi GIF animasi)

Anda juga dapat mengubah lebar bidang pada halaman. Cukup klik pada bidang dan ubah. Mari kita menempatkan bidang "Judul" dan "Judul" berdampingan.

Tangkapan layar bidang yang ditampilkan berdampingan
Anda memiliki kendali penuh atas bagaimana bidang dirender pada halaman. (Lihat versi GIF animasi)

Contoh lain tentang bagaimana Anda dapat menyesuaikan dan menyesuaikan antarmuka pengguna halaman dan bidangnya adalah dependensi bidang masukan. Ini memungkinkan Anda untuk menentukan kondisi di mana bidang tertentu di editor halaman ditampilkan atau diperlukan. Mari buat bidang "Judul" terlihat di UI hanya jika pengguna memasukkan sesuatu di bidang "Judul", dan mari tandai bidang "Ringkasan" sebagai wajib hanya jika pengguna memasukkan sesuatu di bidang "Judul":

Tangkapan layar pengaturan untuk dependensi bidang masukan
Bidang "Judul" akan ditampilkan di halaman hanya setelah pengguna memasukkan sesuatu di bidang "Judul". (Lihat versi GIF animasi)

Berikut adalah video yang menunjukkan kepada Anda bagaimana dependensi bidang input dapat digunakan untuk meningkatkan pengalaman pengguna saat bekerja dengan ProcessWire:

Bagaimana dependensi bidang input dapat digunakan untuk meningkatkan pengalaman pengguna saat bekerja dengan ProcessWire

Jumlah, urutan, dan tampilan bidang pada halaman sepenuhnya di bawah kendali Anda. Anda dapat menempatkan hanya satu bidang dalam template, tidak ada sama sekali (tidak terlalu berguna) atau lebih dari 50 bidang, 100 atau bahkan lebih. Anda dapat memesannya dengan cara apa pun yang Anda inginkan, tentukan mana yang diperlukan atau terlihat dan mana yang tidak, dan tentukan dalam keadaan apa mereka harus diperlukan atau terlihat. Di sinilah pendekatan non-opini ProcessWire bersinar.

Roundup: Halaman, Bidang, Template

Mari kita rekap hubungan teknis antara halaman, bidang, dan templat: Anda menambahkan bidang ke templat, dan Anda memilih templat saat membuat halaman baru. Bidang yang Anda lihat saat mengedit halaman adalah bidang yang telah Anda tambahkan ke template yang dipilih.

Cara lain untuk melihat ini adalah melalui analogi dari dunia pemrograman:

  • Template seperti kelas.
  • Bidang seperti properti kelas.
  • Halaman adalah instance dari kelas.

Setelah Anda menginternalisasi konsep-konsep ini, Anda akan dilengkapi dengan semua yang perlu Anda ketahui untuk dikembangkan di ProcessWire. Dan alasannya adalah karena filosofi ProcessWire hanya didasarkan pada ketiga konsep ini. Cukup keren, bukan?

File Template Dan API: Pasangan Dimaksudkan Untuk Bersama

Tempat Anda mengambil data yang dimasukkan di bagian belakang ProcessWire dan mengeluarkannya di bagian depan, tentu saja, adalah sistem file — lebih khusus lagi, folder /site/templates/ dari instalasi ProcessWire Anda. Sebuah template dapat memiliki file PHP fisik dengan nama yang sama yang terkait dengannya; jadi, template home akan memiliki file home.php di folder /site/templates/ .

Catatan: Bagaimana Anda mengembangkan file template Anda sepenuhnya terserah Anda. Jika Anda terbiasa dengan gaya WordPress dalam mengembangkan sesuatu, Anda dapat melanjutkan seperti biasanya. Atau, jika Anda memiliki pengaturan yang cukup rumit dan besar serta ingin membuat arsitektur yang lebih canggih, Anda dapat menggunakan pendekatan yang terinspirasi MVC, yang juga akan berfungsi dengan baik. Ryan Cramer memiliki tutorial pengantar yang cukup bagus, berjudul "Cara Menyusun File Template Anda," di mana Anda dapat mempelajari berbagai pendekatan untuk pengembangan file template di ProcessWire.

Kode yang Anda tulis dalam file template sebagian besar akan terdiri dari konstruksi PHP dasar ( kondisi if , loop foreach , pernyataan echo ), markup HTML, dan API ProcessWire. API ini sangat terinspirasi oleh jQuery — jadi, ini benar-benar seperti mengulangi dan melintasi konten yang telah Anda masukkan di bagian belakang melalui metode, penyeleksi, dan kemampuan rantai (antarmuka lancar). Sangat mudah digunakan dan sangat ekspresif, seperti jQuery.

Mari kita mulai dengan melihat beberapa contoh sederhana untuk membantu Anda menggunakan API. Namun sebelum kita mulai, ingatlah untuk menandai lembar contekan ProcessWire API, referensi bermanfaat dengan gambaran umum semua metode API yang tersedia.

Tangkapan layar Lembar Curang ProcessWire
Lembar contekan API akan melayani Anda sebagai pendamping yang baik.

Hal pertama yang ingin kita lakukan adalah mengakses dan menampilkan konten bidang halaman. API memperlihatkan sebuah variabel untuk kita tangani dengan ini: $page .

Mendapatkan Halaman Saat Ini Dengan Variabel $page

Variabel $page berisi semua bidang dari satu halaman. Ini termasuk bidang bawaan (seperti nama templat halaman), serta bidang yang Anda, sebagai pengembang, tambahkan ke templat halaman.

Mari kita buka home.php , yang merupakan file template dari template home , dan tambahkan baris ini ke dalamnya:

 echo $page->title;

Ini memberi tahu ProcessWire untuk mengambil bidang "Judul" dari halaman tempat kita berada saat ini ("Beranda") dan menampilkannya. Katakanlah kita juga memiliki bidang "Judul" di halaman, yang ingin kita gunakan sebagai ganti bidang "Judul" tetapi hanya jika pengguna telah memasukkan sesuatu di dalamnya.

 echo $page->get("headline|title");

Kami menggunakan metode get untuk mengakses bidang halaman (jadi, $page->get(“title”) pada dasarnya setara dengan contoh kode pertama di atas), dan kami menulis “headline|title” dalam metode get . Ini memberitahu ProcessWire untuk terlebih dahulu memeriksa bidang "Judul" dan menampilkan konten judul. Namun jika kolom “Judul” kosong, maka kolom “Judul” digunakan sebagai pengganti.

Menggunakan variabel API dalam string PHP juga dimungkinkan. Dua pernyataan echo berikut untuk mengeluarkan jumlah anak halaman adalah setara:

 echo "This page has " . $page->numChildren . " children pages."; echo "This page has {$page->numChildren} children pages.";

Mari kita dapatkan anak-anak dari halaman root kita (ingat, kita masih di home.php ) dan menampilkannya sebagai daftar tautan:

 echo "<ul>"; foreach ($page->children as $child) { echo "<li><a href='{$child->url}'>{$child->title}</a></li>"; } echo "</ul>";

Contoh lain dari bidang bawaan (seperti children -anak dan url dalam contoh di atas) adalah mengulangi semua induk laman dan membuat navigasi remah roti:

 echo "<ul>"; foreach ($page->parents as $parent) { echo "<li><a href='{$parent->url}'>{$parent->title}</a></li>"; } // output the page itself at the end echo "<li>{$page->title}</li>"; echo "</ul>";

Pada halaman root (“Beranda”), ini hanya akan menampilkan judulnya, karena $page->parents akan kosong.

Sebelumnya, saya menunjukkan cara membuat gambar mini di GUI admin. Membuat thumbnail juga dapat dilakukan secara terprogram dengan bantuan API. Mari kita ulangi semua gambar yang diunggah di bidang “Gambar”, buat varian gambar besar dengan lebar 600 piksel dengan tinggi proporsional, dan gambar mini 150 × 150 piksel, dengan opsi khusus seperti pengaturan pemotongan dan kualitas gambar. Pada akhirnya, kami ingin menautkan gambar kecil ke gambar besar. Kedengarannya rumit? Tidak.

 $options = array( "quality" => 90, "cropping" => "northwest" ); foreach ($page->images as $image) { $large = $image->width(600); $thumbnail = $image->size(150, 150, $options); echo "<a href='{$large->url}'><img src='{$thumbnail->url}' alt='></a>"; }

ProcessWire cukup pintar dalam hal ini karena ia membuat gambar dalam berbagai ukuran dengan cepat dan menyimpan cache-nya, sehingga ia harus membuat versi sekali saja.

Berikut adalah satu contoh $page terakhir untuk menunjukkan kepada Anda bahwa API terasa seperti Anda berinteraksi dengan DOM saat menggunakan jQuery. Mari dapatkan anak terakhir dari halaman induk tempat kita berada saat ini.

 $wantedPage = $page->parent->children()->last();

Selain variabel $page , API memperlihatkan variabel penting lainnya: $pages .

Mendapatkan Semua Halaman Dengan Variabel $pages

Dengan $pages , Anda memiliki akses ke semua halaman di instalasi ProcessWire Anda. Dengan kata lain, ini memberi Anda akses ke semua konten Anda dari mana saja .

Misalnya, Anda dapat memiliki halaman pengaturan tersembunyi (artinya, tidak dapat diakses di ujung depan) di instalasi ProcessWire Anda; Anda dapat menambahkan pengaturan global, seperti judul dan deskripsi situs web Anda; dan Anda dapat mengakses dan mengeluarkan gumpalan konten ini dari file template apa pun yang Anda inginkan.

 $settings = $pages->get("template=settings"); echo "<h1>{$settings->global_title}</h1>"; echo "<p>{$settings->global_description}</p>";

Salah satu kasus penggunaan umum untuk satu halaman topik blog adalah untuk menampilkan semua posting blog di mana topik tersebut direferensikan. Cukup tulis ini di file templat topik:

 $pages->find("template=blog-post, topics=$page");

Catatan: topics adalah bidang di template blog-post tempat Anda akan menambahkan semua kategori topik yang khusus untuk posting blog.

Mari bekerja sedikit lebih banyak dengan mesin pemilih ProcessWire. Mari saya tunjukkan beberapa contoh dengan merujuk Anda ke situs web demo ProcessWire, direktori gedung pencakar langit AS. Situs web demo berisi banyak halaman dan memiliki arsitektur model data yang menarik (yaitu hal-hal seperti arsitek, kota, bangunan, dan lokasi yang saling merujuk satu sama lain), dan ini adalah contoh penggunaan yang baik untuk menunjukkan apa yang dapat Anda lakukan dengan penyeleksi.

Contoh ini menemukan semua gedung pencakar langit yang menyebutkan frasa "pembangunan negara kekaisaran" di salinan tubuhnya:

 $pages->get("template=cities")->find("template=skyscraper, body*=empire state building");

Catatan: Pertama kita mendapatkan halaman dengan template cities ; kemudian, kami mendapatkan semua halaman dengan skyscraper template. Alasan mengapa kami dapat mengaitkan metode dengan cara ini adalah karena semua halaman pencakar langit adalah sub-anak dari halaman "Kota".

Mari temukan semua gedung pencakar langit karya arsitek Adrian Smith, Eric Kuhne atau William Pereira dan urutkan hasilnya berdasarkan ketinggian dalam urutan menaik:

 $adrian = $pages->get("template=architect, name=adrian-smith"); $eric = $pages->get("template=architect, name=eric-kuhne"); $william = $pages->get("template=architect, name=william-pereira"); $skyscrapers = $pages->find("template=skyscraper, architects=$adrian|$eric|$william, sort=height");

Anda dapat mengoptimalkan kode dengan menemukan semua arsitek yang diminta dalam satu langkah, bukan tiga:

 $architects = $pages->find("template=architect, name=adrian-smith|eric-kuhne|william-pereira"); $skyscrapers = $pages->find("template=skyscraper, architects=$architects, sort=height");

Catatan: Metode get berpotensi selalu mengembalikan satu halaman; metode find berpotensi selalu mengembalikan banyak halaman.

Anda dapat merevisi kode lebih lanjut dengan menggunakan sub-selektor (ya, Anda dapat memiliki penyeleksi di dalam penyeleksi):

 $skyscrapers = $pages->find("template=skyscraper, architects=[name=adrian-smith|eric-kuhne|william-pereira], sort=height");

Variabel API lainnya

$page dan $pages bukan satu-satunya variabel API yang dapat Anda gunakan. Ada banyak yang lain, seperti $session (untuk membuat pengguna masuk dan keluar dan mengarahkan ke halaman lain), $user (untuk membuat koneksi ke pengguna yang sedang melihat halaman) dan $config (yang untuk pengaturan khusus untuk instalasi ProcessWire Anda). Mari kita lihat dua contoh.

Pertama, mari arahkan pengguna ke halaman beranda:

 $session->redirect($pages->get("template=home")->url);

Dan mari kita lakukan sesuatu jika pengguna saat ini masuk:

 if ($user->isLoggedin()) { /* do something */ }

Memperluas Fungsi ProcessWire Dengan Modul

ProcessWire dibangun di atas arsitektur modular dan mudah diperluas, dan ini menunjukkan: Setiap instalasi terdiri dari inti ProcessWire (inti dari ProcessWire, yang memungkinkan fungsionalitas dasar) dan satu set modul yang telah dikemas sebelumnya (disebut modul inti) yang berada di atas inti dan memperluasnya.

Modul Inti

Beberapa modul pra-paket ini diinstal dan diaktifkan secara default, dan yang lainnya dihapus secara default. Misalnya, sistem komentar bawaan ProcessWire adalah modul yang dapat Anda aktifkan atau nonaktifkan kapan saja. Juga, hal-hal seperti bidang repeater yang kita bicarakan sebelumnya dan dukungan multi-bahasa untuk konten pada dasarnya hanyalah modul yang dapat Anda instal jika Anda membutuhkannya dalam proyek Anda.

Other examples of neat little core modules are Page Names , which validates text input when you're typing a page name (automatically transforming, say, umlauts like a to ae ), and Page Path History , which keeps track of past URLs where pages have lived and automatically redirects to the new location whenever an old URL is accessed.

Finding and Installing Modules

The official modules repository is the main spot where you can find and download ProcessWire modules. On a module's page, you will find the description and purpose of the module and links to the respective GitHub repository and support forum. Module authors are highly encouraged to post their modules in the official repository because it has the highest visibility and is the place people think of first when they want to find a ProcessWire module.

Installing a module is as easy as dragging the module's files to the /site/modules/ directory and installing it in the admin GUI. There are other ways to install a module, such as by installing the Modules Manager, which enables you to browse (and install) modules without leaving the admin GUI.

Commercial Modules

While most modules are free, there are a few commercial ones, too. The ones being promoted in ProcessWire's store are by the lead developer, Ryan Cramer. There you will find the following modules:

  • ProDrafts enables you to maintain separate draft and live versions of any page. It also provides a comparison and diff tool, as well as automatic saving capabilities.
  • ProFields are a group of ProcessWire modules that help you manage more data with fewer fields, saving you time and energy.
  • ProCache (among other things) provides an impressive performance boost for your website by completely bypassing PHP and MySQL and enabling your web server to deliver pages of your ProcessWire website as if they were static HTML files.

Don't miss the screenshots and videos on the module pages to get a first impression. This is finely executed software.

There are also commercial modules outside of the official website, such as Padloper, an e-commerce platform built on top of ProcessWire. To be fair, what is definitely missing in the ProcessWire cosmos is a way for module authors to easily publish their commercial modules in a centralized spot.

How Do ProcessWire Modules Generally Compare to WordPress Plugins?

The reason why ProcessWire has so fewer modules than WordPress (approximately 400 versus more than 40,000) is not so much because it is less popular (an understatement, of course), but more because the core itself is already so feature-rich that adding a ton of modules to extend it is simply not necessary. For example, you don't need a module to create a gallery slideshow or to get the first child of something or to generate thumbnails. All of that (and much more) is already covered out of the box.

So, whereas in WordPress your typical method of solving a problem would be to search for a plugin, in ProcessWire you would first look to the tools available in core; in 90% of cases, that would provide you with the solution.

What You Can Build With ProcessWire

Because ProcessWire behaves more like a framework than a CMS (the core is actually a framework, and the CMS is an application built on top of it), the use cases for building things with ProcessWire are pretty broad. You may want to check out some websites powered by ProcessWire (especially the most liked websites).

ProcessWire is a good fit if you want to develop a JSON REST API, an image-resizing app for employees, a front end for managing millions of products (scalability is pretty impressive — you can have literally millions of pages on a single installation), a web application for displaying the financial results of companies, a simple blog, a website for a big university, or just a simple one-page informational website.

Where To Go From Here: There's A Lot To Discover

Naturally, a beginner's guide can't talk about everything the tool has to offer. So, here is a short list of other ProcessWire features, facts, links and tools worth mentioning:

  • Check out ProcessWire Weekly and ProcessWire's blog to stay up to date on the latest news.
  • ProcessWire has built-in caching mechanisms (for example, a template and markup cache).
  • Wireshell is a command-line interface for ProcessWire based on the Symphony Console component.
  • Security is a top priority for ProcessWire.
  • Visit grab.pw (isn't that the coolest domain name ever?) to download the latest stable version of ProcessWire (ZIP file, 10MB).
  • ProcessWire has a small and friendly community. The discussion board is the central place to discuss any questions and problems.
  • ProcessWire has good multi-language support. The multi-language modules are part of the prepackaged core modules.
  • ProcessWire has a transparent roadmap, and development is very active. There is a new minor release nearly every week.
  • See what others have to say about ProcessWire in the reviews section and on alternativeTo. There's also an interesting Quora thread titled “How does ProcessWire compare to WordPress.”
  • ProcessWire.tv is a searchable collection of ProcessWire tutorial videos.

Ringkasan

ProcessWire is a system that rewards you [for] being curious. We aim to show you how to fish so that you can catch the big fish.

This statement by Ryan Cramer, the creator of ProcessWire, encapsulates what ProcessWire is all about.

I think what resonates with a lot of people is that ProcessWire is a system that goes from simple to complex, not the other way around. It doesn't assume what you want to build, but instead lays a strong, non-opinionated foundation by offering you effective, powerful tools and leaving the rest to you. That conceptual aesthetic has, to me, a certain appeal to it.