lifelong learner — urip iku urup, currently working on accenture.

Cara membuat tema custom pada drupal 8 – 3. template dengan twig

0
Degananda.com -

Repository

File ahir hasil dari bagian 1 hingga 3 mengenai pembuatan tema custom di drupal dapat anda lihat dilink github dibawah ini

https://github.com/degananda/drupalabs/releases/tag/1.0

Templating dasar tema drupal

Templating pada drupal atau istilah mudahnya adalah dalam membuat view atau html file pada drupal kita menggunakan twig. Twig adalah template engine yang digunakan pada php. Jika anda familiar dengan angular/react maka tentunnya telah mengenal template engine.

Jika anda belum familiar dengan template engine ataupun twig silahkan ikuti dengan cara melihat contoh implementasinnya dalam membuat template pada drupal.

File template yang memiliki extensi .twig akan kita gunakan sebagai template untuk menampilkan data. Ya hanya untuk menampilkan data layaknya html. Kita akan menuliskan kode-kode html seperti head, body, div, table, span dan lain sebagainnya pada file .twig.

Jika membutuhkan data dari server kita memiliki dua opsi yakni melalui php ataupun melalui javascript(ajax call) tergantung dari kebutuhan dan masalah bisnis yang kita hadapi.

Membuat template pada drupal

Tema “vividgray” yang kita buat pada ulasan sebelumnya tidak akan dapat menampilkan data apapun tanpa adannya template. Data-data yang kita akan tampilkan dalam halaman akan dirender oleh file berextensi .twig.

untuk dapat membuat tema maka kita perlu membuat folder bernama “template” pada folder tema kita.

file template harus bernama html.html.twig. Jika selain itu maka drupal tidak akan dapat mengidentikasi bahwa file tersebut merupakan suatu template. Kemudian didalam file tersebut isikan “hello world 2” atau isikan kode html seusai dengan keinginan anda. Gunannya adalah untuk melakukan uji coba apakah kita dapat menampilkannya pada halaman.

html.html.twig

Mengapa kita berikan nama html.html.twig ? karena pada dasarnya drupal akan melakukan overriding mekanisme pemanggilan index ketika kita menggunakan nama yang sama sesuai dengan core template dari drupal.

Mudahnya seperti ini default theme drupal menggunakan html.html.twig sebagai indexnya (index.html/index.php) sehingga ketika kita menambahkan html.html.twig pada folder templates maka secara otomatis core template akan teroverride.

berikut adalah isi dari html.html.twig saya

hello world 2

masih bingung? kita menggunakan html.html.twig karena file itu adalah index.html dari theme kita.

uji coba

untuk melakukan uji coba maka yang perlu kita lakukan adalah melakukan install terhadap theme tersebut. Buka admin/appearances dan install custom theme yang telah kita buat

jangan lupa untuk melakukan set as default terhadap theme tersebut agar drupal dapat menggunakan tema kita.

Buka pada browser

klik tombol back to my site

jika semua berjalan dengan baik maka akan tampil “hello world 2” pada browser anda. Sampai dengan step ketiga dalam membuat tema di drupal ini kita telah berhasil membuat “hello world” dengan mekanisme theme drupal.

done ~ dengan ini maka kita telah siap untuk membuat custom web dengan menggunakan drupal. Langkah-langkah selanjutnya adalah

  1. Membuat theme template sederhana
  2. Mempelajari mekanisme twig
  3. Mempelajari mekanisme pembuatan modul
  4. Mempelajari mekanisme form
  5. Mempelajari mekanisme mengkonsumsi API

apakah itu cukup ? tentu tidak masih terdapat topik lain seperti hak akses(permission) , user role, user group dan lain sebagainnya. Silahkan simak dan ikuti kelanjutan tutorial mengenai drupal pada blog ini.

Terimakasih.