Ini adalah antara bahagian atau fail yang terakhir untuk dipelajari. Setelah itu kita selesai menghasilkan satu templat bermula dari lakaran. Untuk fail terakhir ini iaitu comment.tpl.php akan lebih menumpu kepada bahagian komen. Drupal tidak mengendalikan komen sebagai "node" kerana ianya mempunyai "table" tersendiri di pangkalan data.

Berikut merupakan API yang boleh digunakan dalam fail ini:

  • $author: penulis komen
  • $content: kandungan komen
  • $date: tarikh dan masa komen
  • $links: operasi pautan untuk komen tersebut
  • $new: penanda komen terbaru
  • $picture: gambar penulis (sekiranya diaktifkan)
  • $signature: tandatangan penulis (sekiranya diaktifkan)
  • $status: status komen; untuk kegunaan pihak "admin"
  • $submitted: frasa untuk penghantaran komen
  • $title: tajuk komen

API di atas hampir ke semunya kita akan gunakan untuk menghasilkan templat bagi komen. Jika dalam fail-fail templat sebelum ini, kita memerlukan ID unik untuk setiap aturcara yang ditulis. Berbeza dengan fail kali ini ianya tidak diaplikasikan sebalik kita hanya akan hasilkan perbezaan warna latar belakang untuk setiap bilangan genap dan ganjil sahaja.

Penulisan kod aturcara comment.tpl.php

Bahagian <div> yang pertama akan menentukan paparan sama ada comment tersebut adalah "terbaru", "tidak dipaparkan (unpublished)" dan penentuan bilangan genap dan ganjil. Kodnya adalah seperti berikut:

<div class="comment<?php print ($comment->new) ? ' comment-new' : ''; print ' '. $status; print ' '. $zebra; ?>">

$comment->new digunakan untuk menentukan sama ada komen tersebut baru dihantar, maka "class" comment-new akan dimuatkan. $status menentukan "class" sama ada ianya dipaparkan atau disembunyikan. $zebra untuk menentukan bilangan ganjil dan genap.

Ke semua "class" akan kita kawalnya melalui CSS nanti. Seterusnya kita akan masukkan kod untuk memaparkan maklumat masa, waktu dan siapa yang menghantar komen.

  <div class="meta">
  <?php if ($submitted): ?>
    <span class="submitted"><?php print $submitted; ?></span>
  <?php endif; ?>
  </div>

 

Seterusnya kita akan masukkan kod untuk "avatar" penghantar dan tajuk komen. Dalam bahagian komen, bagi menepati keperluan SEO, "heading" <h3> akan digunakan berbanding <h2> memandangkan komen selalunya berada dibahagian bawah kandungan.

  <?php print $picture ?>
  <h3><?php print $title ?></h3>

Sekarang kita akan tulis aturcara untuk memaparkan kandungan dan tandatangan penghantar komen sekiranya ada. Maka sekali lagi kondisi penyata akan dimasukkan.

   <div class="content">
     <?php print $content ?>
     <?php if ($signature): ?>
     <div class="signature">
       <?php print $signature ?>
     </div>
     <?php endif; ?>
   </div>

Dan akhirnya sekali adalah pautan untuk memberi fungsi tambahan seperti "Add new comment", bacaan dan arahan tertentu kepada "admin" berkaitan dengan komen tersebut. Penutup kepada <div> yang dibuka pada awal tadi dimasukkan sebagai penutup aturcara.

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

Dengan itu maka siaplah aturcara penulisan untuk fail comment.tpl.php.

Kod CSS untuk fail comment.tpl.php

Untuk fail comment.tpl.php, susunan kod haruslah tidak diubah seperti berikut bagi membolehkan kod ditulis tindih (overwrite) apabila keadaan atau status komen tersebut berubah.

#comments .comment {
  padding: 5px;
  border: 1px solid #d0d0d0;
}
#comments .odd {
  background: url(images/comment-odd.gif) repeat-x bottom center #fff;
}
#comments .even {
  background: url(images/comment-even.gif) repeat-x bottom center #fff;
}
#comments .comment-new {
  background: #ffedb7;
  border: 1px solid #ffc000;
}
#comments .comment-unpublished {
  background: #ffdede;
  border: 1px solid #de5252;
}
#comments h3 {
  border-bottom: 1px solid #c4dce9;
  font-weight: bold
}
.signature {
  font: 12px/100% Georgia;
  font-style: italic;
}

Dan ambil perhatian setiap elemen yang ditulis harus dimulakan dengan ID #comments bagi mengelakkan stail tersebut diaplikasikan kepada keseluruhan laman.

Penilaian: 
3
Average: 3 (1 vote)