Setakat ini, kita sudah menyediakan 3 fail penting iaitu parasolx.info, page.tpl.php dan style.css. Kita sudah menyediakan sepenuhnya kerangka laman. Tutorial yang selanjutnya hanya akan berkisar kepada penambahbaikkan paparan templat dengan mengubah suai perkara-perkara yang lebih spesifik.

Pertama kita akan melihat fail block.tpl.php. Fail ini akan membina paparan pakej kandungan yang ditetapkan di Administer Site building Block. Blok akan memenuhi ruangan atau menyediakan maklumat lanjut kepada kandungan utama. Terlebih dahulu kita lihat API Drupal yang boleh digunakan dalam fail ini.

Pembolehubah

  • $block->subject: Tajuk blok
  • $block->content: Kandungan blok
  • $block->module: Modul yang menghasilkan blok ini
  • $block->delta: ID unik untuk setiap blok yang terbina
  • $block->region: kedudukan blok pada "region"

Pemboleh ubah bantuan

  • $block_zebra: menentukan sama ada nilai tersebut "genap" atau "ganjil"
  • $zebra: fungsi yang hampir sama dengan $block_zebra tetapi tidak bergantung kepada kedudukan "region"
  • $block_id: nombor pembilang untuk setiap blok pada setiap "region"
  • $is_front: penentu syarat untuk halaman utama atau tidak
  • $logged_in: penentu syarat untuk pengguna log masuk atau tidak
  • $is_admin: penentu syarat sama ada pengguna sekarang adalah "admin" atau tidak

Lakaran dan perancangan binaan blok

Seperti dalam page.tpl.php, kita perlu mempunyai lakaran atau perancangan terlebih dahulu sebelum menulis kod aturcara bagi fail block.tpl.php. Ini kerana dengan kod aturcara yang fleksibel, ianya akan memudahkan kita untuk modifikasi dengan lebih spesifik.

Sebagai contoh, untuk blok pertama kita gunakan latar belakang biru, manakala untuk blok kedua kita gunakan latar belakang berwarna merah. Semua ini harus bermula dari aturcara HTML dan PHP sendiri sebelum kita tetapkannya melalui CSS. Mungkin agak rumit difahami tetapi kita akan bergerak dari satu perkara ke perkara seterusnya.

Terlebih dahulu, dapatkan gambaran atau lakaran kepada lapisan yang akan dibina iaitu seperti ini:

Untuk binaan blok ini, saya menggunakan 3 lapisan sahaja iaitu div block id, H2 dan div content. Antara sebab mengapa H2 dipilih sebagai lapisan untuk tajuk blok dan bukannya <div> yang biasa kerana ini merupakan salah satu teknik SEO. Dalam SEO, kita sebolehnya menggunakan tag "heading" untuk setiap tajuk kandungan walaupun untuk mini kandungan.

Kod aturcara kasar yang akan kita tulis adalah seperti berikut:

<div id="block">
  <h2> tajuk blok </h2>
  <div class="content"> kandungan di sini </div>
</div>

Perhatikan perbezaan penulisan untuk kod HTML di atas. Jika sebelum ini, ke semua lapisan yang kita bina dalam page.tpl.php menggunakan atribut ID bagi mewakili identiti untuk digunakan dalam fail CSS. Sebaliknya untuk kes blok, bahagian lapisan kandungan menggunakan class.

Seperti yang saya utarakan sebelum ini, kita ingin mencipta blok yang mampu untuk diubah suai secara lebih fleksibel seandainya kita mempunyai blok yang banyak. Dan caranya adalah kita mengawal dari CSS. Dalam terma dan panduan CSS, kita sukar untuk melakukan tetapan berbilang untuk stail sekiranya elemen tersebut menggunakan ID.

Ini kerana ID adalah unik dan sekiranya ianya muncul secara berbilang dalam satu laman, ke semuanya akan menggunakan stail atau tetapan CSS yang sama. Tag class mempunyai fungsi berlainan di mana kita boleh untuk menulis tindih (overwrite) stail yang telah ditetapkan secara global. Jadi dalam kes ini, seandainya kita ingin mengubah stail "content", ianya lebih mudah dilakukan berbanding kita menggunakan id="content".

Kemasukkan API Drupal

Apabila rangka penulisan kod telah dibuat, sekarang kita akan memasukkan elemen dan API Drupal ke dalam aturcara sebelum ini agar boleh diterjemahkan oleh sistem Drupal.

Masihkah anda ingat blok boleh datang hasil daripada modul, pakej menu dan dibuat secara manual. Oleh itu bagi mendapat ID unik, kita akan gunakan beberapa API Drupal untuk digabungkan bersama-sama. Kita mulakan dengan <div id="block"> terlebih dahulu. Kodnya adalah seperti ini:

<div id="block-<?php print $block->module .'-'. $block->delta; ?>">

Dalam kod di atas saya telah memasukkan API $block->module supaya ianya akan ditulis berdasarkan nama modul yang menghasilkannya. API $block->delta pula ditambah supaya tidak berlaku duplikasi blok yang sama SEKIRANYA modul tersebut menghasilkan dua blok untuk digunakan.

Jadi dari contoh di atas, andai kata ianya terhasil dari modul yang bernama "shoutbox" dan modul ini menyediakan 3 blok untuk digunakan pada "region", maka output atau hasil nama yang akan dikeluarkan adalah:

  • <div id="block-shoutbox-0">
  • <div id="block-shoutbox-1">
  • <div id="block-shoutbox-2">

Untuk memisahkan satu elemen dengan elemen tag yang lain, tanda sengkang (hyphen, -) kerana ianya kurang menyebabkan ralat pada sistem Drupal berbanding penggunaan garis bawah (underscore, _). Kod tersebut masih belum lengkap kerana kita masih perlu memasukkan class juga kepada lapisan ini. Maka kod penambahan:

<div id="block-<?php print $block->module .'-'. $block->delta; ?>"
  class="block block-<?php print $block->module ?>">

Sekali lagi API $block-module digunakan bagi mendapatkan elemen "class" yang unik. Perhatikan terdapat satu "class" ditulis iaitu block sebelum kita menulis "class" unik. Ini kerana secara lalainya, blok sendiri mempunyai CSS yang terdapat di bahagian direktori modules Drupal. Jadi nilai ini perlu dimuatkan untuk memanggil fail CSS modul tersebut.

Seterusnya adalah tajuk. Seperti dalam kes page.tpl.php, jika akan menggunakan PHP bersyarat (condition string) untuk membolehkan Drupal memaparkan blok sama ada bertajuk atau tidak. Kodnya adalah seperti ini:

<?php if (!empty($block->subject)): ?>
  <h2><?php print $block->subject ?></h2>
<?php endif; ?>

Dan bahagian terakhir adalah kandungan blok itu sendiri. Kodnya adalah seperti berikut:

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

Penulisan lengkap block.tpl.php

Daripada ke semua kod yang ditulis tadi, maka kod lengkap untuk fail block.tpl.php adalah seperti berikut:

<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="block block-<?php print $block->module ?>">

<?php if (!empty($block->subject)): ?>
  <h2><?php print $block->subject ?></h2>
<?php endif;?>

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

Kod aturcara untuk CSS

Dalam binaan blok di atas, terkandung beberapa lapisan yang memerlukan bantuan daripada CSS untuk menghasilkan paparan yang lebih menarik. Oleh itu, kita perlu menambah kod CSS ini ke dalam fail style.css yang sedia ada.

Untuk blok kita perlu menyediakan dua kondisi CSS yang berbeza kerana jika lihat semula lakaran templat, hanya ruangan pada "region left & right" sahaja yang mempunyai latar belakang pada tajuknya. Manakala selain dari dua "region" ini ianya akan dipaparkan tanpa latar belakang.

Jadi kod aturcara CSS perlu ditulis untuk kondisi secara UMUM dahulu kemudian diikuti dengan kondisi yang lebih spesifik supaya kondisi yang selepas akan menindih (overwrite) kondisi sebelumnya. Dan kodnya adalah seperti berikut:

/* kondisi umum */
.block {
  width: 100%;
  display: block;
  margin-bottom: 10px;
}
.block h2 {
  font-size: 14px;
  color: #252525;
  line-height: 20px;
  font-family: tahoma;
  font-weight: bold;
}
.block .content {
  width: 100%;
  display: block;
}
/* kondisi spesifik untuk left dan right */
#left .block h2, #right .block h2 {
  width: 160px;
  height: 40px;
  background: url(images/block.jpg) no-repeat left center #fff;
  line-height: 40px;
  color: #ffffff;
  padding-left: 10px;
}
#left .block .content, #right .block .content {
  margin-top: 5px;
}
/* kondisi spesifik untuk TOP */
#top > .block > h2 {
  display: none;
}

Bagi bahagian "region top", kita tidak perlu untuk paparkan sebarang tajuk untuk blok tersebut memandangkan ruangan yang begitu kecil dan terhad. Jadi kod yang ditulis adalah untuk menyembunyikannya sahaja.

Penilaian: 
Average: 3.5 (2 votes)

Komen

SoLarIZe's picture

by the way, camne nk wat custom color block...
maksud ak mcm KS nie, ada block kaler biru, ada kaler merah n ada block tu ada image kat header block tu..
mcm mana nk wat custom macam tu.. adakah terus dari coding dari file block.tpl.php or kena setting kat bhgn admin..
camne ey.. kurang jelas di situ...

parasolx's picture
Admin

cuba rujuk pada bahagian pertama penulisan blok.. kita tetapkan satu unik ID berdasarkan pada block tersebut.
setiap kali drupal render blok tuh, dia akan assign ID tertentu. dengan ID tuh, kita guna firebugs, dapatkan dia punye CSS.

kemudian alterkan dengan CSS untuk ID blok tersebut based pada H2 dia. jadi akan berubah jadi warna lain kalu kita set pada CSS kod yang lain.

------

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

SoLarIZe's picture

yg KS nya ak tgk dia ada guna

.sidebar .block h2 {}

pastu ada .sidebar .tutorial h2{}, lbh kurang mcm tu lah... based apa ko kata tu, rujuk pada line nie

class="block block-<?php print $block->module ?>"

then pada CSS lak yg nie =

#left .block h2, #right .block h2 {}... 

so, camne nnti kita nk wat tetapan tuk block2 nie... adakah pada bhgn setting di administer > block > pastu kena configure pape ke.. camne ey.. explain lebih lanjut leh..

parasolx's picture
Admin

KS ni kita mg dah heavy modified theming dia.. jadi kalu bleh jgn tgk sangat KS kalu untuk tahu asas Drupal dia handle theme. kita tgk pada CSS class #left .block h2. Ini adalah default value untuk semua block di sebelah kanan.

andai kata ade satu block dengan DI="block-user-0".. jadi dalam CSS kita just tambah di bahagian paling bawah fail CSS tuh dengan ini:
#left .block-user-0 h2 { ... }

------

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