Bahagian tutorial ini akan membawa anda untuk memahami dan menghasilkan templat Drupal secara sendiri bermula dari rangka sehingga boleh diguna pakai pada laman web Drupal. Kemahiran anda dalam mengendalikan (x)HTML, CSS dan PHP amat diperlukan kerana ketiga-tiga bahasa aturcara akan digunakan sepenuhnya.

Saya tidak akan menyentuh secara mendalam mengenai bahasa yang diperlukan sebaliknya lebih ke arah penggunaan dan manipulasi ketiga-tiga bahasa ini. Anda perlu merujuk kepada tutorial asas yang disediakan di laman ini menerusi navigasi utama.

Keperluan dalam menghasilkan templat

Seperti mana-mana tutorial sebelum ini, anda perlu memenuhi beberapa keperluan yang ditetapkan terlebih dahulu dan semestinya tidak akan dihuraikan dengan lanjut berkenaannya.

  1. Kemahiran dalam HTML, CSS dan PHP
  2. Pemahaman konsep Drupal dan templat Drupal
  3. Kemahiran menggunakan perisian grafik seperti Photoshop

Namun begitu, sepanjang tutorial ini huraian yang lengkap untuk menghasilkan satu templat akan dibicarakan. Satu contoh "layout" atau lakaran templat yang akan kita hasilkan akan dibentangkan.

Jadi, anda boleh menggunakan format yang sama tetapi berlainan lakaran (lakaran sendiri) atau boleh untuk gunakan lakaran yang disertakan sebagai panduan dan seterusnya mengubah suai hasil dari lakaran ini mengikut kepada keperluan anda.

Lakaran yang akan digunakan dalam tutorial ini adalah hasil rekaan dan merupakan hak cipta sepenuhnya laman http://parasolx.net dibawah seliaan "parasolx". Jadi sebarang salinan yang sama, atau penggunaan sepenuhnya lakaran ini pada mana-mana laman web dalam apa jua bentuk paparan adalah DILARANG. Gunakan kemudahan ini hanya untuk proses pembelajaran sahaja.

Lakaran templat Drupal

Sebelum kita memulakan proses menghasilkan satu templat sendiri, anda perlu mempunyai lakaran laman. Lakaran templat yang diberi nama "Parasolx" ini telah dilakarkan menggunakan Adobe Photoshop.

Dalam tutorial ini, penghasilan templat agak berbeza seperti yang digunakan di laman http://parasolx.net. Jadi anda tidak perlu untuk merujuk kepada laman tersebut. Fokus kepada tutorial yang disediakan di sini sahaja.

Dalam lakaran ini juga, saya akan menghasilkan satu templat dengan terdapatnya 3 kolum pembahagi secara keseluruhannya. Kolum tersebut adalah dibahagian kiri, tengah dan kanan. Untuk bahagian "header" dan "footer" akan dimuatkan dibahagian tengah.

Sebelum kita melangkah lebih jauh, anda perlu hasilkan satu fail pelipat (folder) dan namakannya sebagai "parasolx". Kita akan menghasilkan satu templat berdasarkan kepada lakaran ini. Seterusnya kita beralih kepada penetapan "region" pada lakaran.

Penetapan lakaran untuk "Region"

Dengan lakaran yang dihasilkan ini, kita akan menentukan seterusnya "Region" yang akan memberi ruangan kepada peletakkan kandungan dinamik seperti blok dan kandungan paparan. Untuk templat ini, saya menetapkan "region" yang asas datangnya dari sistem Drupal iaitu:

  1. Header
  2. Left sidebar
  3. Right sidebar
  4. Footer
  5. Content (diperlukan)

dan juga satu penambahan ruangan yang baru iaitu "Top". Untuk region "Top", ianya bukan terhasil dari sistem Drupal sendiri sebaliknya saya sediakan terlebih dahulu pada lakaran ini agar tutorial untuk menghasilkan "region" sendiri akan lebih mudah dan lancar.

Dalam proses lakaran atau perancangan awal, kita boleh untuk tidak menggunakan ke semua "region" yang dihasilkan oleh sistem Drupal. Sekiranya anda mahu wujudkan lakaran 2 kolum, boleh buangkan salah satu "region sidebar". Tetapi "region content" mesti dimasukkan kerana kandungan laman akan dipaparkan di ruangan ini.

Penetapan "region" ini akan kita lihat dan menulis kod aturcara di dalam fail .info bagi menerangkan kewujudannya. Selain itu ianya akan mempunyai hubung kait dengan fail page.tpl.php mana akan menentukan kedudukan region ini posisinya.

Dalam fail page.tpl.php nanti akan mengandungi segala kod aturcara yang melibatkan penggunaan PHP, CSS dan HTML manakala fail .info hanya mempunyai maklumat mengenai bilangan, nama dan maklumat tambahan kepada "region".

Kita beralih ke tutorial untuk menghasilkan fail .info terlebih dahulu.

Di bawah dilampirkan fail keseluruhan templat untuk dimuat turun.

Penilaian: 
4
Average: 3.3 (3 votes)
File attachments: 

Komen

SoLarIZe's picture

so, based on penerangan, setiap region nie perlu dirujuk pada mana... kita create sendiri ke...
or kalau x silap dalam drupal tu mmg dah ada tetapan region kan...
yg region khas tu lak, nk create kat mana, pada coding template ke or pada drupal tu sendiri...
contoh di atas adalah mengikut lakaran pada URL www.parasolx.net kan, n ak tgk parasolx.net tu mempunyai 2 column, main tuk info n sidebar tuk recent entries, comments dan sebagainya... adakah benda nie sume leh di setting di bhgian region...
untuk pembelajaran mmbuat template nie, adakah nnti KS akan fokus kepada 3 column or 2 column or bergantung pada user sendiri nk wat berapa column / region...
maknanya, region nie pun penting tuk kita wat tetapan layout, betul ke?

parasolx's picture
Admin

terima kasih atas komen tersebut.. ini menampakkan terdapat sedikit penambahbaikkan tutorial perlu dilakukan. ke semua persoalan tersebut telah saya kemas kini dan jawapan penuh akan dijawab pada tutorial yang selanjutnya.

------

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

SoLarIZe's picture

owh.. ok, thanks... sorylah kalau ak bertanya bnyak soklan.. cuma nk dapat additional info about theming dalam drupal nie... nk paham dengan lebih lanjut supaya nnti kot2 ak nk wat theme drupal x tersalah langkah ke... anyway, thanks para..

zailir's picture

baguh nih. bagi saya setiap web developer yg serius mesti tahu buat theme sendiri...baru ada kelas gitu..lagi pun tk la kita asyik bergantung pd theme percuma atau yg dibeli yg mana kadang-kala tidak menepati 100% seperti yg kita kehendaki. kalau dah tahu buat theme sendiri,kita buleh godek apa saja sehingga puas hati.

belajar sikit sikit,lama-lama buleh buleh buat duit