Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Processwire
Webdesign

Cara Membuat Tema Berbasis AJAX untuk ProcessWire

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Dalam tutorial ini kita akan melihat pengaturan tema sederhana di ProcessWire, kita akan menyelidiki keluaran tertunda (sekarang strategi tema default dalam ProcessWire), dan mengatur situs kita untuk meminta konten baru menggunakan AJAX.

Untuk menemani tutorial ini, saya telah membuat tema baru untuk ProcessWire, memanfaatkan AJAX dan keluaran tertunda, yang dapat ditemukan di Github. Anda juga dapat menemukan demo tema di sini: demo Profil Artis.

Untuk instruksi tentang menginstal ProcessWire, dan untuk mempelajari dasar-dasar pada AJAX, lihat sumber daya berikut:

Keluaran Langsung dan Tertunda

ProcessWire (PW) memiliki sistem templating yang sangat fleksibel; ini memungkinkan Anda untuk mengkodekan struktur apa pun yang Anda pilih dengan membuat file php dalam folder /site/templates dan kemudian mengaitkannya dengan admin ProcessWire di setup > templates > add new. Katanya, ada dua strategi umum yang ditemukan dalam forum PW untuk templating: keluaran langsung dan keluaran tertunda.

Keluaran Langsung

Keluaran langsung melihat setiap file php dalam perintah dari keluaran halaman tertentu. Ini bagus jika setiap template sangat berbeda dari yang lain. Namun, saya menemukan ini rumit jika hanya perubahan kecil diperlukan di setiap template. Anda mungkin juga menemukan diri Anda menyalin dari template lain atau menyertakan banyak file. Berikut ini adalah template yang sangat dasar (mis. basic-page.php).

Keluaran Tertunda

Keluaran tertunda melihat file-file umum (seperti _init.php) yang dipanggil sebelumnya, dan _main.php setelah file template (misalnya basic-page.php). _Main.php Anda digunakan sebagai induk untuk markup Anda (html) dan template spesifik diturunkan untuk menambahkan konten ke keluaran variabel yang telah ditetapkan dalam file _main.php.

Dalam contoh di bawah ini saya menambahkan bidang body dan video dari halaman template ke variabel $content dan menampilkan markup halaman dalam file _main.php saya karena selalu dijalankan sesudahnya.

basic-page.php:

_main.php:

The Artist Profile

The Artist Profile adalah contoh tema yang menggunakan keluaran tertunda. Struktur HTML utama ditulis dalam file _main.php dan termasuk head, footer, logo dan navigasi halaman. Template halaman saat ini menetapkan variabel $content–misalnya basic-page.php saya.

Anda dapat menginstal The Artist Profile untuk melihat bagaimana saya mengumpulkan tema dan menggunakan AJAX di file main.js. Saya sekarang akan berjalan melalui beberapa konsep kerja dalam tema ini.

Strategi Data AJAX

AJAX memungkinkan pengguna kita untuk menampilkan konten baru dari situs kita tanpa memuat ulang bagian halaman seperti logo, footer dan navigasi. Ini juga berarti pengguna kita tidak akan pernah melihat jendela browser putih kosong ketika halaman baru sedang diminta.

Dengan menggunakan AJAX, kita dapat meminta jenis data umum dari situs web kita seperti HTML, JSON, atau XML. Untuk menjaga hal-hal yang sederhana kita akan meminta HTML dari situs kita, namun jika Anda membuat atau menggunakan perpustakaan template frontend yang ada, kita dapat meminta JSON sebagai gantinya, mengurangi jumlah data per permintaan (ada banyak perpustakaan yang dapat Anda gunakan di frontend, satu contoh adalah mustache).

Dalam tema kita, saya ingin logo, navigasi, dan footer tetap sama, tetapi untuk area konten utama berubah secara dinamis (atau secara asinkron) saat kita mengklik tautan.

Menggunakan AJAX di Tema ProcessWire Kita

Untuk melakukan ini, kita perlu membuat dua elemen HTML kontainer yang dapat kita tambahkan konten baru. Elemen kontainer tidak akan berubah, tetapi akan menahan elemen dalam dan konten yang ditambahkan padanya. Konten baru akan ditambahkan sementara konten lama dianimasikan, lalu dihapus. Ini akan menciptakan tampilan dan nuansa cairan.

Dengan file _main.php saya, kontainer terlihat seperti ini:

Ok, sejauh ini bagus. Sekarang mari kita tambahkan cek untuk variabel ProcessWire $ajax yang bermanfaat. $ajax menyatakan apakah permintaan itu berasal dari AJAX atau tidak. Berikut contoh pemeriksaan jika bukan AJAX:

Dalam file _main.php tema saya, saya dapat membungkus konten yang tidak saya perlukan untuk permintaan AJAX, yaitu semua selain echo $content. Ini terlihat seperti ini:

Sekarang template kita siap untuk memberi kita seluruh markup halaman jika permintaan halaman normal, atau hanya $content jika permintaan AJAX.

Meminta Halaman di JavaScript Menggunakan AJAX jQuery

Saya menggunakan perpustakaan JavaScript jQuery untuk tema saya. Saya telah mereferensikan file main.js di foot.inc saya, setelah tautan ke versi terbaru dari perpustakaan jQuery.

Dengan menggunakan fungsi .on dan .ajax jQuery, kita dapat membuat permintaan AJAX ke konten halaman baru kapan saja kita mengklik tautan dengan kelas .ajax-link.

Sejauh ini kode main.js kita terlihat seperti ini:

Kode di atas memiliki .on('click','a.ajax-link', function(){ FUNGSI KITA DISINI }) yang memungkinkan kita untuk memicu fungsi loadContent() kita kapan saja sebuah tautan diklik. Dalam fungsi loadContent() kita menggunakan url dari tautan untuk mengirim permintaan ajax, dan kemudian ketika .done() kita menambahkan data ke elemen .content-container.

Semua di atas akan berfungsi dengan baik, tetapi ada banyak tambahan kecil yang bisa kita tambahkan untuk membuat semuanya mulus.

Trik, Tip dan Logika AJAX

Pertama, kita dapat meng-animasikan konten kita masuk dan keluar (tautan ini ke bagian animasi dari file main.js). Animasi sangat bagus untuk membuat situs web yang tampak apik, tetapi juga dapat bertindak sebagai pemicu psikologis untuk menyoroti bahwa sesuatu telah berubah.

Selanjutnya, kita ingin menginisialisasi ulang fungsi JavaScript apa pun yang kita perlukan untuk halaman tersebut, mis. lightbox, slideshow, masonry, dsb., dan kita menaruhnya setelah kita menambahkan data HTML baru ke halaman. Karena konten baru telah diambil melalui AJAX, mungkin tidak terikat dengan listener JavaScript untuk click, dll. dan karena itu tidak akan memicu kecuali kita telah mengaktifkan ulang fungsi apa pun yang kita perlukan di halaman.

Membuat pemeriksaan yang sudah dimuat berguna untuk mencegah permintaan tidak berguna. Menambahkan pemeriksaan cepat untuk melihat apakah tautan baru telah diklik dan kemudian return true; jika itu mencegah pengguna mengakses halaman yang sama beberapa kali.

Terakhir, tetapi mungkin yang paling penting, kita sekarang dapat menggunakan riwayat html5 untuk melacak halaman saat ini dan memuat ulang konten halaman saat pengguna menekan tombol kembali.

Merangkum

Dengan menggunakan beberapa strategi di atas, kita dapat menciptakan pengalaman AJAX yang mulus untuk situs web kita, dan menggunakan ProcessWire kita dapat mengintegrasikan permintaan AJAX dalam tema kita dalam waktu singkat.

Untuk lebih lanjut tentang ProcessWire dan AJAX lihat tutorial kami di Envato Tuts+.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.