() translation by (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).
1 |
<?php
|
2 |
include("./_head.php"); |
3 |
|
4 |
echo "Your html content"; |
5 |
|
6 |
include("./_foot.php"); |
7 |
?>
|
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:
1 |
<?php
|
2 |
$content = $page->body . $page->video; |
3 |
?>
|
_main.php:
1 |
<?php
|
2 |
include("./head.inc"); |
3 |
?>
|
4 |
|
5 |
<div id="page"> |
6 |
<header class=""> |
7 |
<a id="logo" href="<?php echo $pages->get('/')->url; ?>"> |
8 |
<h1>
|
9 |
<?php echo $pages->get('/')->title; ?> |
10 |
</h1>
|
11 |
</a>
|
12 |
</header>
|
13 |
<aside>
|
14 |
<nav>
|
15 |
<?php
|
16 |
// echo nav links
|
17 |
$children = $pages->get('/')->children; |
18 |
foreach($children as $child){ |
19 |
echo '<a name="'.$child->title.'" class="ajax-link'.$class.'" href="'. $child->url .'">'. $child->title .'</a>'; |
20 |
}
|
21 |
?>
|
22 |
</nav>
|
23 |
</aside>
|
24 |
<div class="content-container cf"> |
25 |
<div class="content current-content"> |
26 |
<?php
|
27 |
// add content to page from template file
|
28 |
echo $content; |
29 |
?>
|
30 |
</div>
|
31 |
</div>
|
32 |
<?php
|
33 |
include("./foot.inc"); |
34 |
?>
|
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:
1 |
<div class="content-container cf"> |
2 |
<div class="content current-content"> |
3 |
<?php
|
4 |
echo $content; |
5 |
?>
|
6 |
</div>
|
7 |
</div>
|
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:
1 |
if(!$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:
1 |
<?php
|
2 |
// include page structure if not an ajax request
|
3 |
if(!$ajax): |
4 |
include("./head.inc"); |
5 |
?>
|
6 |
|
7 |
<div id="page"> |
8 |
<header class=""> |
9 |
<a id="logo" href="<?php echo $pages->get('/')->url; ?>"> |
10 |
<h1>
|
11 |
<?php echo $pages->get('/')->title; ?> |
12 |
</h1>
|
13 |
</a>
|
14 |
</header>
|
15 |
<aside>
|
16 |
<nav>
|
17 |
<?php
|
18 |
// nav content here
|
19 |
?>
|
20 |
</nav>
|
21 |
</aside>
|
22 |
<div class="content-container cf"> |
23 |
<div class="content current-content"> |
24 |
<?php endif; // end if ajax ?> |
25 |
|
26 |
<?php |
27 |
// if ajax then only return $content
|
28 |
echo $content; |
29 |
?>
|
30 |
|
31 |
<?php if(!$ajax): ?> |
32 |
</div>
|
33 |
</div>
|
34 |
<?php
|
35 |
include("./foot.inc"); |
36 |
endif; // end if ajax |
37 |
?>
|
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:
1 |
$(function() { |
2 |
|
3 |
var href; |
4 |
var title; |
5 |
|
6 |
$('body').on('click','a.ajax-link',function(e) { // nav link clicked |
7 |
|
8 |
href = $(this).attr("href"); |
9 |
title = $(this).attr("name"); |
10 |
|
11 |
// load content via AJAX
|
12 |
loadContent(href); |
13 |
|
14 |
// prevent click and reload
|
15 |
e.preventDefault(); |
16 |
});
|
17 |
|
18 |
function loadContent(url){ // Load content |
19 |
|
20 |
// variable for page data
|
21 |
$pageData = ''; |
22 |
|
23 |
// send Ajax request
|
24 |
$.ajax({ |
25 |
type: "POST", |
26 |
url: url, |
27 |
data: { ajax: true }, |
28 |
success: function(data,status){ |
29 |
$pageData = data; |
30 |
}
|
31 |
}).done(function(){ // when finished and successful |
32 |
|
33 |
// construct new content
|
34 |
$pageData = '<div class="content no-opacity ajax">' + $pageData + '</div>'; |
35 |
|
36 |
// add content to page
|
37 |
$('.content-container').append($pageData); |
38 |
|
39 |
// remove old content
|
40 |
$('.content.current-content').remove(); |
41 |
|
42 |
// show new content and clean up classes
|
43 |
$(this).removeClass('no-opacity').removeClass('ajax').addClass('current-content'); |
44 |
|
45 |
}); // end of ajax().done() |
46 |
} // end of loadContent() |
47 |
});
|
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+.
