Cara Mengembangkan Sebuah Tema Processwire

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Di panduan pemula ini kamu akan belajar cara membuat tema CMS ProcessWire-mu sendiri. Kita alan membuat sebuah situs ysng sangat sederhana, melingkupi template, field, struktur tema dan variabel PHP.

Jangan lupa untuk mengikuti panduan pertama kami Cara Memasang dan Mengatur CMS ProcessWire

Tempat Kamu Menemukan Tema ProcessWire-mu

Tidak seperti CMS lain semisal WordPress, ProcessWire tidak memiliki proses pemilihan tema sebagai bagian admin-nya, di mana kamu bisa berganti tema dengan menekan tombol yang telah dilabel dengan baik. Namun, ini bukanlah hal yang buruk, ProcessWire memiliki sistemnya sendiri: folder "site/templates" yang berisi semua berkas yang berhubungan dengan temamu.

Membuat Tema Kosong

Cara terbaik untuk membuat sebuah tema kosong adalah dengan memilih profil site-blank saat memasang ProcessWire (PW). Site-blank berisi struktur situs paling dadar di folder "sites/template" mu-ini termasuk berkas dan folder.

/scripts
/styles
/errors
home.php
basic-page.php
admin.php

Kamu bisa membuat folder "site/templates" baru dengan berkaxmu sendiri setelah pemaxangan jika kamj ingin, ketimbang memulai dengan profil site-blank, tapi pastikan setidaknya kamj memiliki berkas-berkas di atas.

Struktur Tema ProcessWire

Routing

Mempelajari cara PW merutekan halamannya akn membantu kita membangun template kostum kita nanti.

Ketika halaman PW diminta (misalnya www.benbyford.com/about), PW meminta di dalam CMS dan mengecek template mana yang ditugaskan, pada kasus ini kita telah menugaskan template "basic-page"; berkas "basic-page.php" di dalam "site/templates/" dirender dan HTML yang diminta terkirim ke pengguna (PW mengizinkan penggunaan format lain seperti JSON atai XML).

Tips: secara bawaan, template diacu ke PW dengan nama yang sama dengan berkas template PHP, namun kamu bisa merunah nama template dan berkas terasosiasi kapanpun setelah pembuatan melalui PW admin.

Sebagai contoh, mari tambahkan beberapa HTML & PHP ke berkas "home.php" kita:

<!DOCTYPE html>
<html lang="en">
<head>
    <title><?php echo $page->title; ?></title>
</head>
<body>
    <h1><?php echo $page->title; ?></h1>
</body>
</html>

Sekarang pergi ke URL situsmu di browser dan sadari sekarang title dan h1 sudah terisi dengsn judul berandamu (secara bawaan: Home)

Memasukkan Berkas PHP Lain

Membuat banyak berkas template dengan HTML yang sangag mirip tidaklah efisien, jadi mari buat beberapa berkas PHP .inc yang bisa dimasukkan ke tiap template. Sebuah pola struktur umum dalam membuat adalah membuat berkas "head.inc" dan "foot.inc" yang digunakan untuk mengkonstruksi kode HTML seperti <head>, navigasi, logo, footer dan skrip.

Mari edit berkas "home.php" kita lagi untuk mengimplementasikan yang di atas:

<?php include('./head.inc'); // include header markup ?>

<h1><?php echo $page->title; ?></h1>

<?php include('./foot.inc'); // include footer markup ?>

Tambahkan head.inc kita:

<!DOCTYPE html>
<html lang="en">
<head>
    <title><?php echo $page->title; ?></title>
</head>
<body>

Dan foot.inc:

1	</body>
2	</html>

Saya dengar kamu bertanya kenapa menggunakan berkas .inc. ketika menambahkan sebuah template baru ke PW admin, sistem mencari ke folder site/templates/ untuk berkas .php yang beljm digunakan oleh sebuah tema. Dengan menggunakan berkas .inc ketimbang .php kamu tidak akan kebingungan antara berkas template dengan berkas yang ingin kamu masukkan ke template.

Mengasosiasikan Template Baru dengan CMS

Kamu bisa membuat template sebanyak yang kamu inginkan ke halaman di situs PW, jadilah liar! Cotohnya mari buat sebuah template bsru untuk halaman bernama "Contact". Saya mulai dengan:

Menduplikasi berkas "home.php" dan menamainya "contact-page.php"
Di PW admin, bernavigasilah ke setup > templates > add new template.
Pilih "contact-page.php" mu dari daftar centang, pilih "home" dari daftat field duplikat dan klik Add Templates.

CMS-nya sekarang tahu mengenai berkas template barumu dan dia akan menunjukkannya sebagai opsi template saat membuat halaman baru. Coba buat sebuah halaman baru di bawah beranda, beri dia nama "Contact" dan pilih template contact-page baru kita. Sekarang kamu setidaknya memiliki dua template aktif di situsmu: "home", dan "contact-page".

Luar biasa! Sekarang kita tahu cara membuat berkas template, menambahkan mereka ke PW, dan membuat halaman dengan template baru kita.

Variabel ProcessWire

Terakhir, kita ingin tahu cara merender konten yang ditambahkan ke PW admin melalui template kita, dan bahkan menggunakan vanilla PHP ke situs kita. Salah satu hal favorit sya mengenai PW adalah dia memberikan theme coder-nya akses instan ke konten melalui variable dan sepaket fungsi berguna untuk fungsionalitas paling sederhana. Semua yang dia tidak miliki bisa kamu tulis sendiri di PHP tanpa perlu khawatir mengenai apa yang sistem akan lakukan ke kodemu. Kamu juga tidak perlu mengikuti struktur kelas yang ketat (saya mencarimu di Drupa!). Dengan kata lain: dia memberikanmu sepaket alat lalu pergi.

Untuk rangkuman dari semua variabel dan fungsi di PW cek the Processwire API Cheatsheet, dan untuk penjelasan lebih lanjut lihat dokumentasi variabel PW.

Mari secara cepat mencontohkan beberapa variabel utama untuk membuat template kita lebih fungsional.

Mengedit home.php kita lagi, mari tambahkan judul halaman, badan, dan konten samping menggunakan variabel $page. $page memberikanmu akses ke semua konten yang diunggah ke dalam halaman di PW admin.

<?php include('./head.inc'); // include header markup ?>

    <div id='content'>
    <?php 
  	// output 'title'
		echo "<h1>" . $page->title . "</h1>";
	
		// output body copy
		echo $page->body;  
	
	?>
    </div><!-- end content -->

    <div id='sidebar'>
    <?php
		// output sidebar text if the page has it
		echo $page->sidebar; 
	?>
    </div><!-- end sidebar -->
    
<?php include('./foot.inc'); // include footer markup ?>

Mari tambahkan juga sebuah navigasi sederhana ke head.inc menggunakan variabel $page. $page memberikanmu akses ke halaman lain di situsmu, yang bisa meminta konten darinya.

<!DOCTYPE html>
<html lang="en">
<head>
    <title><?php echo $page->title; ?></title>
</head>
<body>
    <nav>
    <?php
        // Get all children of the homepage
        $child_pages = $pages->get("/")->children;

        // foreach through each child page
        foreach ($child_pages as $child) {

            // echo child page link and title
            echo '<a href="'. $child->url .'">'. $child->title .'</a>';
        }
    ?>
    </nav>

Tahap Selanjutnya

Sekarang kamu tahu beberapa dasar dari membuat tema di PW. Saya ingin memintamu untuk melihat beberapa proful situs lain yang mengandung PW untuk melihat cara mereka terstruktur. Menurut saya, bereksperimen dan mendapatkan umpan balik dari komunitas juga bisa sangat menguntungkan.

Tip: kamu akan menemukan banyak modul yang bisa membantumu membangun situs di modules page. Jika kamu pecinta LESS dan minifikasi skrip, saya merekomendasikan modul AIOM.

Dan juga, lihatlah tutorial selanjutnya di Envato Tuts+.