Fail page.tpl.php merupakan fail utama yang mengawal kedudukan dan posisi "region", rangka keseluruhan halaman templat dan pemaparan susunan kandungan secara lengkap. Fail ini boleh ditulis dalam aturcara PHP dan HTML. Fail ini mengandungi pemboleh ubah (API) yang paling banyak. API tersebut disenaraikan seperti di bawah:

Pemboleh ubah umum

  • $base_path: URL di mana Drupal dipasang. Kebiasaannya nilai ini ditakrifkan sebagai "/"
  • $css: senarai CSS yang digunakan pada laman tersebut
  • $directory: fail pelipat/direktori untuk templat tersebut, contoh: themes/garland atau themes/parasolx
  • $is_front: pemboleh ubah yang mentakrifkan sama ada ia adalah laman utama atau tidak
  • $logged_in: pemboleh ubah yang mentakrifkan sama ada pengguna adalah berdaftar dan telah log masuk
  • $is_admin: pemboleh ubah sama ada pengguna mempunyai kuasa sebagai "admin"

Data meta

  • $language: penggunaan bahasa pada laman yang dipaparkan.
  • $head_title: tajuk untuk laman, yang digunakan pada tag HTML <title>
  • $head: digunakan pada tag HTML <head> yang mengandungi data-data meta, kata kunci dan sebagainya
  • $style: pemboleh ubah untuk memanggil masuk fail-fail CSS
  • $script: pemboleh ubah untuk memanggil masuk semua fail-fail Javascript
  • $body_classes: set kelas CSS untuk tag HTML <body>. Ianya digunakan untuk menandakan sama ada templat akan dipaparkan dalam pelbagi bentuk/bentuk tertentu (2 lajur, 3 lajur, tiada lajur)

Identiti laman

  • $front_page: URL untuk halaman utama. Sila gunakan ini berbanding $base_url sekiranya mahu pautan ke halaman utama
  • $logo: lintasan untuk gambar logo halaman, ditetapkan dalam konfigurasi templat
  • $site_name: paparan nama laman
  • $site_slogan: paparan slogan laman
  • $mission: paparan misi laman

Navigasi

  • $search_box: memaparkan kotak borang carian pada laman, tiada sekiranya modul "Search" dimatikan
  • $primary_links (array): tatasusunan untuk kekotak pautan utama
  • $secondary_links (array): tatasusunan untuk kekotak pautan sokongan

Kandungan halaman

  • $left: pemaparan kandungan "region left sidebar"
  • $breadcrumbs: pemaparan "breadcrumbs" laman
  • $title: tajuk laman yang dipaparkan dalam bentuk kod HTML (digunakan dalam tag <body>)
  • $help: teks bantuan, kebiasaanya dilihat oleh golongan "admin" sahaja
  • $message: paparan status atau mesej untuk sebarang ralat. Pastikan ianya dimuatkan dalam sebarang templat
  • $tabs: tab pautan yang terdapat pada laman, seperti "Edit", "Track".
  • $header: pemaparan kandungan "region header"
  • $content: kandungan utama untuk setiap halaman Drupal ("region content")
  • $right: pemaparan kandungan "region right sidebar"

Penutup

  • $feed_icons: pemaparan ikon suapan, pada laman yang mempunyai fungsi ini
  • $footer_message: mesej kekaki yang ditetapkan pada ruangan administrasi
  • $footer: pemaparan kandungan "region footer"
  • $closure: penutupan kepada semua aturcara kod, pastikan ianya berada di bahagian paling terakhir kandungan dinamik

Persediaan lakaran kepada potongan kecil

Daripada lakaran yang telah siap direka, sekarang kita perlu mendapat gambaran terlebih dahulu mengenai kedudukan dan posisi lapisan yang akan membentuk templat. Jika berdasarkan kepada gambar rajah di bawah ini, kita akan membina rangka laman menggunakan teknik "tableles" iaitu sepenuhnya menggunakan <div> dan CSS.

Daripada lakaran posisi lapisan yang akan kita bentuk, jadi bolehlah kita mulakan untuk menghasilkan aturcara lakaran terlebih dahulu. Buat masa ini, kita abaikan dahulu API Drupal yang perlu dimasukkan. Di bawah ini adalah lakaran kod aturcara dalam bahasa HTML.

<div id="wrapper">
  <div id="head">
    <div id="top"> region khas: top </div>
  </div>
  <div id="left"> region left </div>
  <div id="center">
    <div id="header"> region header </div>
    <div id="content"> region content </div>
    <div id="footer"> region footer </div>
  </div>
  <div id="right"> region right </div>
  <div id="foot">
  </div>
</div>

HTML di atas kemudiannya akan dikawal dari fail CSS nanti. Tetapi sebelum itu kita perlu menyediakan gambar-gambar berserta saiznya untuk lebih memudahkan kerja apabila menulis kod bagi CSS nanti. Berdasarkan kepada lakaran sebelum ini, saya potong lakaran tersebut kepada 4 gambar utama.

Gambar-gambar tersebut saya simpankannya di dalam satu fail pelipat yang dinamakan "images". Gambar-gambar ini akan kita panggil dalam fail CSS iaitu style.css nanti. Tetapi sebelum itu, kita lengkapkan fail page.tpl.php terlebih dahulu dengan memasukkan API Drupal sepenuhnya.

Penulisan kod page.tpl.php dengan API Drupal

Terlebih dahulu, kita perlu hasilkan satu fail yang dinamakan page.tpl.php. Hasilkan fail ini dengan menggunakan perisian Notepad kerana ianya menyokong pemprosesan aksara secara asas.

Sebagai pemula kod aturcara, kita perlu tetapkan jenis dokumen untuk laman web tersebut berpiawai kepada XHTML 1.0. Ini kerana Drupal menyokong sepenuhnya XHMTL dan sebarang aturcara yang ditulis akan kita ikuti sepenuhnya kepada piawai ini.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Kemudian kita akan teruskan dengan tag pembuka untuk fail jenis HTML. Oleh kerana sebelum ini kita telah tetapkan laman ini piawai kepada XHMTL, jadi elemen bahasa serta arah bacaan ditetapkan dengan menggunakan API Drupal. Lihat kod tersebut:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">

Fail page.tpl.php ini adalah jenis fail PHP dan ambil perhatian bahawa setiap kali API Drupal ingin digunakan, ianya perlu ditulis atau dirangkum dalam kod <?php ... ?> bagi memberitahu sistem ini adalah kod PHP. Setiap akhir baris kod sebelum ianya ditutup, pastikan tatatanda ";" diletakkan walaupun hanya sebaris kod ditulis.

Seterusnya kita akan memasuki bahagian kepala dokumen HTML iaitu tag <head> ... </head>. Kod aturcaranya adalah seperti di bawah ini:

  <head>
    <?php print $head; ?>
    <title><?php print $head_title; ?></title>
    <?php print $styles; ?>
    <?php print $scripts; ?>
  </head>

Tag <head> digunakan seperti biasa yang berbezanya adalah kod PHP yang terkandung di dalamnya. Pastikan akan menggunakan API $head sejurus tag <head> bagi mengelakkan sebarang aktiviti menggondam menerusi teknik XSS. Kemudian diikuti dengan tag HTML <title>. API Drupal yang digunakan adalah $head_title.

Seterusnya kod diteruskan dengan memanggil masuk fail CSS iaitu $styles dan JavaScript fail (ditetapkan dalam parasolx.info sebelum ini ATAU mungkin hadir dari modul-modul Drupal).

Sekarang kita akan masuk ke ruangan <body> yang akan memaparkan kandungan-kandungan laman kepada pengguna. Dengan mengambil kembali kod untuk lapisan-lapisan yang kita bina sebelum ini, hasilnya adalah seperti ini:

  <body>
  <div id="wrapper">
    <div id="head">
      <div id="top"> region khas: top </div>
    </div>
    <div id="left"> region left </div>
    <div id="center">
      <div id="header"> region header </div>
      <div id="content"> region content </div>
      <div id="footer"> region footer </div>
    </div>
    <div id="right"> region right </div>
    <div id="foot">
    </div>
  </div>
  </body>

Sekarang kita akan kemaskan rangka kod-kod di atas dengan memasukkan API Drupal untuk setiap bahagian yang berkenaan. Dalam templat "Parasolx" ini, kita hanya menyediakan sepenuhnya templat ini kekal kepada 3 lajur. Jadi API Drupal untuk $body_classes tidak akan digunakan.

Untuk <div id="wrapper"> juga tidak mengandungi apa-apa API Drupal memandangkan ianya akan menjadi latar belakang templat dan dikonfigurasi menerusi fail CSS. Seterusnya <div id="head"> juga tidak perlu mengandungi API, ianya akan ditetapkan dalam CSS.

Sekarang kita sudah tiba ke bahagian "region" yang pertama. Jika anda lihat kembali fail parasolx.info, kita telah tetapkan "region" khas ini (custom make) dengan menggunakan kod ini: regions[top] = Atas. Drupal akan membaca arahan ini dan menterjemahkan API yang baru iaitu $top (nama yang terdapat pendakap, [ ]). Sintaks PHP; If() akan digunakan bagi menyediakan situasi yang mana sekiranya terdapat sebarang kandungan pada "region" ini dimuatkan, ianya akan dipaparkan dan muncul. Jika tiada, ianya tidak akan dipaparkan. Maka keseluruhan kod aturcaranya adalah seperti ini:

<?php if ($top): ?>
  <div id="top"> region khas: top </div>
<?php endif ?>

Sekarang kita hanya perlu tukarkan perkataan percubaan tadi kepada aturcara PHP kerana kandungan/output arahan adalah berdasarkan kepada PHP. Jadi kita akan masukkan arahan print $top bagi menggantikan teks percubaan. Hasilnya adalah seperti ini:

<?php if ($top): ?>
  <div id="top"><?php print $top; ?></div>
<?php endif ?>

Jadi teknik ini dilakukan sama untuk "region" yang seterusnya. Lapisan yang tidak mempunyai "region" tidak perlu untuk memasukkan API Drupal iaitu "center" dan "foot". Kita teruskan format penulisan ini untuk bahagian yang masih belum iaitu "left", "header", "content", "footer" dan "right".

Untuk "region" left dan right, kod aturcaranya adalah seperti berikut:

<?php if ($left): ?>
  <div id="left"><?php print $left; ?></div>
<?php endif ?>
<?php if ($right): ?>
  <div id="right"><?php print $right; ?></div>
<?php endif ?>

Untuk bahagian "region header", terdapat penambahan API Drupal berbanding ketiga-tiga "region" di atas iaitu $mission dan $messages. Oleh kerana itu, kita tidak perlu untuk masukkan syarat PHP (if) memandangkan lapisan ini akan sentiasa muncul walaupun tidak mempunyai kandungan yang ditetapkan sebaliknya hanya ditakrifkan kepada output $header terus. Jadi kod aturcaranya adalah seperti ini:

<div id="header">
  <?php if (!empty($header)): print $header; endif ?>
  <?php if ($show_messages && $message): print $messages; endif; ?>
  <?php if ($mission): print '<div class="mission">'. $mission .'</div>'; endif; ?>
</div>

Untuk API tersebut saya telah hasilkan sendiri satu elemen CSS yang baru iaitu "mission". Elemen ini akan saya masukkan ke dalam fail CSS untuk memaparkan hasilnya. Juga, kandungan $header akan muncul di atas $message dan $mission nanti. Seterusnya kita beralih ke bahagian "region content".

Dalam bahagian ini terdapat beberapa API yang perlu dimasukkan. Dan API ini adalah wajib kerana ianya mengawal fungsi-fungsi kandungan seperti ubahsuai, tab-tab modifikasi laman, butang suapan RSS dan lain-lain. Jadi kod aturcara untuk bahagian kandungan ini adalah:

<div id="content">
  <?php if ($title): print '<h1>'. $title .'</h1>'; endif; ?>
  <?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul>'; endif; ?>
  <?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
  <?php print $help ?>
  <?php print $content ?>
  <?php print $feed_icons ?>
</div>

Bahagian yang terakhir adalah "region footer". Dalam lapisan ini kita akan muatkan mesej untuk bahagian kaki laman dan aturcaranya adalah seperti berikut:

 <div id="footer">
   <?php print $footer_message ?>
   <?php print $footer ?>
</div>

Bahagian terakhir adalah </body></html> yang akan menutup dokumen HTML kita. Namun sebelum itu perlu dimasukkan API Drupal yang akan juga berfungsi penutup segala proses API yang telah kita gunakan sebelum ini. Aturcaranya adalah seperti berikut:

  <?php print $closure ?>
</body>
</html>

Kompilasi kod aturcara page.tpl.php

Dari penerangan dan perancangan yang ditunjukkan di atas, kita akan gabungkan ke semua kod tersebut untuk dimuatkan ke dalam fail page.tpl.php dan simpankannya sebagai nama tersebut.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">

  <head>
    <?php print $head; ?>
    <title><?php print $head_title; ?></title>
    <?php print $styles; ?>
    <?php print $scripts; ?>
  </head>

  <body>
  <div id="wrapper">
    <div id="head">
    <?php if ($top): ?>
      <div id="top"><?php print $top; ?></div>
    <?php endif ?>
    </div>

    <?php print $breadcrumb; ?>

    <div id="left-space"></div>

    <?php if ($left): ?>
      <div id="left"><?php print $left; ?></div>
    <?php endif; ?>

    <!-- Lajur tengah bermula -->

    <div id="center">
      <div id="header">
        <?php if (!empty($header)): print $header; endif ?>
        <?php if ($show_messages && $message): print $messages; endif; ?>
        <?php if ($mission): print '<div class="mission">'. $mission .'</div>'; endif; ?>
      </div>
      <div id="content">
        <?php if ($title): print '<h1>'. $title .'</h1>'; endif; ?>
        <?php if ($tabs): print $tabs; endif; ?>
        <?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
        <?php print $help ?>
        <?php print $content ?>
        <?php print $feed_icons ?>
      </div>
      <div id="footer">
         <?php print $footer_message ?>
         <?php print $footer ?>
      </div>
    </div>

    <!-- Lajur tengah berakhir -->

    <?php if ($right): ?>
      <div id="right"><?php print $right; ?></div>
    <?php endif; ?>

    <div id="foot"></div>

  </div>
  <?php print $closure ?>
</body>
</html>

Dalam kod penuh di atas, satu penambahan kod CSS (div) telah saya lakukan bagi membolehkan templat ini berfungsi dengan sempurna apabila digunakan. Baris kod tersebut dikawal dari fail CSS.

Penilaian: 
Average: 5 (1 vote)