Drupal telah memperkenal konsep "nodes" yang menjadi nadi kepada sistem tersebut sehingga membolehkannya berkembang dengan lebih fleksibel. Jika page.tpl.php mengawal keseluruhan paparan laman, maka node.tpl.php mengawal paparan untuk kandungan tersebut.

Seperti lain-lain fail, node.tpl.php mempunyai API yang tersendiri yang boleh digunakan untuk mengawal bentuk paparannya keapda pengguna. Senarai API yang terlibat adalah seperit berikut:

Pemboleh ubah

  • $title: tajuk kandungan
  • $content: output kandungan sama ada dipaparkan penuh atau sebahagian bergantung kepada $teaser
  • $picture: gambar penulis
  • $date: tarikh kandungan dihantar
  • $links: pautan tambahan kepada kandungan seperti: "Read more", "Tambah komen"
  • $name: nama penulis
  • $node_url: pautan untuk kandungan (nodes)
  • $term: terma atau tag yang digunakan pada kandungan
  • $submitted: paparan maklumat penghantaran dari theme_node_submitted()

Pemboleh ubah lain

  • $node: keseluruhan data mengenai "nodes", data yang dipapar belum lagi selamat
  • $type: jenis kandungan, contoh: story, page
  • $comment_count: bilangan komen yang dihantar kepada kandungan tersebut
  • $uid: ID penulis
  • $created: masa kandungan dihantar dalam format Unix
  • $zebra: output sama ada bilangan "genap" atau "ganjil"

Status "nodes"

  • $teaser: penunjuk untuk keadaan separuh paparan
  • $page: penunjuk untuk keadaan paparan penuh
  • $promote: penunjuk untuk dipaparkan di laman utama
  • $sticky: penunjuk untuk tetapkan kedudukan pada paling atas
  • $status: penunjuk untuk kandungan dipaparkan
  • $comment: tetapan untuk komen
  • $readmore: penunjuk sama ada perlu pautan bacaan penuh atau tidak
  • $is_front: penunjuk untuk paparan laman hadapan
  • $logged_in: penunjuk untuk pengguna log masuk
  • $is_admin: penunjuk untuk pengguna adalah "admin"

Lakaran paparan pada node.tpl.php

Untuk bahagian kandungan atau "nodes" ini, tidak banyak lakaran yang perlu dibuat. Kebiasannya kita akan tertumpu ke arah menggunakan API yang digunakan bagi menyediakan maklumat atau informasi yang diperlukan sahaja. Mungkin tidak melibatkan semua elemen. Jadi di bawah ini saya sertakan lakaran untuk paparan setiap kandungan.

Fail node.tpl.php-7992

Gambar rajah di atas akan kita hasilkan melalui gabungan beberape penambahan CSS elemen dan juga API Drupal yang disediakan. Kita akan terus menulis kod aturcara dengan memasukkan elemen API tanpa perlu lagi membuat rangka kasar memandangkan kita sudah berada di tahap ini.

Penulisan kod aturcara node.tpl.php

Seperti dalam blok, kita perlu menghasilkan keunikan untuk setiap lapisan yang dihasilkan oleh Drupal. Ini bagi memudahkan untuk kita melakukan proses modifikasi terhadap paparan hanya melalui CSS sahaja. Selain itu, disebabkan "nodes" mempunyai satu lagi tetapan unik iaitu status.

Status ini merangkumi dua keadaan iaitu penting (sticky) dan dipaparkan atau tidak (published dan unpublished). Kedua-dua situasi ini mempunyai paparan yang berlainan agar ia mudah untuk dikenali dan difahami oleh semua golongan. Oleh itu kod aturcara bagi lapisan yang paling luar agak berbeza dan panjang berbanding blok tetapi konsep tetap sama.

<div id="node-<?php print $node->nid; ?>"
  class="node<?php if ($sticky) { print ' sticky'; } ?>
  <?php if (!$status) { print ' node-unpublished'; } ?> clear-block">

Pertama, kita hasilkan satu ID unik untuk setiap kandungan agar ID ini tidak akan berlaku duplikasi dengan yang lain. Jadi penggunaan API $node->nid adalah nombor unik yang akan menghasilkan setiap kandungan mempunyai ID CSS tersendiri. Seperti yang diterangkan dalam blok sebelum ini, untuk paparan yang berubah-ubah, kita akan menggunakan "class" berbanding ID.

Oleh itu, penambahan "class" dilakukan. Terdapat dua API digunakan bersama iaitu $sticky dan $status. Kedua-dua "class" CSS ini secara lalainya telah dimuatkan di bawah modules/node/node.css. Kita akan melakukan perubahan sedikit dengan melakukan proses tulis tindih (overwrite). Manakala untuk "class" clear-block, kita biarkan sahaja.

Kod CSS tersebut yang perlu ditambah dalam style.css adalah seperti di bawah dengan menggunakan satu fail latar belakang untuk class sticky:

.sticky {
  padding: 5px;
  border: 1px dashed #8bb5e3;
  background: url(images/sticky.gif) repeat-x bottom center #fff;
}
.node-unpublished {
  background: #ffcbcb;
}

Sekarang kita akan masukkan elemen untuk gambar penulis dan tajuk kandungan. Di bahagian ini, tajuk untuk kandungan agak perlu beri penekanan sedikit. Untuk situasi di mana Drupal akan memaparkan senarai-senarai "nodes" dalam satu halaman, tajuk ini perlu menjadi pautan supaya pengguna boleh klik dan di bawa ke kandungan penuh.

Seterusnya, apabila Drupal membawa pengguna dari senarai "nodes" ke paparan penuh kandungan, tajuk tersebut tidak perlu lagi untuk dijadikan pautan. Jika kita rujuk kepada fail page.tpl.php, API Drupal untuk $title sudah ditetapkan. bermakna pada halaman penuh, node.tpl.php tidak sepatutnya untuk memaparkan tajuk tersebut. Jika tidak duplikasi tajuk akan terhasil.

Fail node.tpl.php-7993

Maka kod aturcara untuk menjadikan keadaan tersebut adalah seperti ini yang mana kod aturcara untuk gambar (picture -- avatar) ditulis terlebih dahulu agar ianya menepati kedudukan dalam kod CSS nanti:

<?php print $picture ?>

<?php if ($page == 0): ?>
  <h2><a href="https://www.drupalnote.my/%3C?php_print_%24node_url_%3F%3E" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>

Seterusnya adalah kemasukkan informasi mengenai meta data kepada kandungan tersebut. Ini termasuklah kandungan tersebut dihantar oleh siapa dan masa serta tarikh penghantaran.

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

Berpandukan kepada gambar rajah lakaran, bahagian seterusnya adalah memaparkan kandungan. Kodnya adalah seperti ini:

  <div class="content">
    <?php print $content ?>
  </div>

Dibahagian bawah kandungan terdapat pautan untuk digunakan kepada kandungan dan juga tag-tag yang digunakan dan juga penutup kepada lapisan pertama yang kita buka. Maka keseluruhan kodnya adalah seperti berikut:

    <?php if ($taxonomy): ?>
      <div class="terms terms-inline"><?php print $terms ?></div>
    <?php endif;?>

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

</div>

Dengan itu selesailah kita menulis rangka kepada node.tpl.php. Yang tinggal hanyalah modifikasi untuk CSS yang kita tetapkan agar kedudukan dan posisinya menjadi seperti yang kita mahukan.

Kod CSS untuk node.tpl.php

Untuk kod CSS, kita akan mulakan dengan memberikan jarak susunan antara "nodes" ketika ianya disenaraikan pada muka hadapan.

.node {
  margin-bottom: 15px;
}

Seterusnya adalah paparan untuk tajuk setiap "nodes". Ambil perhatian bahawa dalam "nodes" mengandungi data-data utama yang mungkin mengandungi pautan dan tajuk "nodes" itu sendiri adalah pautan. Jadi kodnya adalah seperti ini:

.node h2 {
  border-bottom: 1px solid #c4dce9;
  line-height: 180%;
}
.node h2 a:hover {
  text-decoration: none
}

a {
  text-decoration: none;
  color: #055b8b;
}
a:hover {
  text-decoration: underline;
  color: #ed0000;
}

Seterusnya kod untuk "breadcrumbs", "mission" dan maklumat penghantaran entri termasuk tag-tag.

.breadcrumb {
  margin: 0 60px;
}
.mission {
  background: none repeat scroll 0 0 #fffbdd;
  border: 1px solid #AAAAAA;
  font: 14px/normal Georgia;
  font-style: italic;
  padding: 10px;
}
.meta {
  font-size: 11px;
}

Akhir sekali adalah kawalan untuk gambar. Berdasarkan pada lakaran, gambar tersebut akan berada disebelah kiri. Tetapi pastikan anda menghidupkan fungsi untuk gambar ini dipaparkan terlebih dahulu.

.picture {
  float: right;
  border: 1px solid #c4dce9;
  margin: 0 0 5px 5px;
}

Untuk bahagian paling bawah iaitu tag dan pautan fungsi seperti tambah komen dan lain-lain, kita akan hasilkan paparan seperti dalam gambar dibawah bersama kod CSSnya:

Fail node.tpl.php-7994

.terms ul.links li {
  float: right;
  border: none;
  border-right: 3px solid #c8f442;
  font-size: 11px;
}
ul.links li {
  font-size: 11px;
  padding: 0 5px;
  border-left: 3px solid #ff9d9d;
}

 

Penilaian: 
3
Average: 3 (3 votes)

Komen

Nazril's picture

saya rasa page ini mcm tergantung jer... mcm tak habis..

parasolx's picture
Admin

a'ah.. ade sikit je lagi.. tapi belum publish lagi.. nnt dah siap semua saya akan publish semua sekaligus.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training