Instalasi dan Konfigurasi Template Bootstrap Pada Drupal 7

Sebelum melangkah lebih jauh untuk mempelajari tentang Membuat Website Cantik Dengan Drupal dan Bootstrap, ada beberapa hal yang perlu Anda ketahui diantaranya :
  1. Saya menggunakan Drupal versi 7.50, versi saat artikel ini ditulis, tapi sekarang sudah update lagi menjadi versi 7.56, [ baca : Cara Update Drupal ]
  2. Template Boostrap yang saya gunakan adalah versi bootstrap-7.x-3.6 yang bisa Anda download  langsung dari situs Drupal
  3. Supaya proses instalasi administrator mudah maka Saya disini menggunakan Module Administrastion Menu Drupal
  4. Saya menggunakan metode Boostrap Source dimana source code Bootsrap ditempelkan ke template boostrap yang terdapat pada Drupal. Bila menggunakan CDN hal tersebut tidak perlu dilakukan, namun bila ingin mengembangkan Drupal dengan template Boostrap secara offline maka menambahkan source code tidak perlu dilakukan. Source Bootstrap yang Saya gunakan versi 3.3.7, silahkan didownload pada halaman bootstrap
  5.  Dalam tutorial ini juga akan dijelaskan tentang bagaimana membuat sub theme template bootstrap dengan tujuan supaya bisa melakukan kustomisasi dengan lebih bebas
Tutorial ini akan dibagi kedalam 3 tahap :
a)  Tahap yang pertama adalah Instalasi Template Boostrap
b)  Pembuatan sub theme Bootstrap
c)  Selanjutnya tahap instalasi dan konfigurasi Bootstrap dengan metode source files bootstrap


a). Tahap Instalasi
  1. Download template Bootstrap versi 7.x-3.6 di situs resmi Drupal
  2. Klik Apperance > Install new theme
  3. Selanjutnya aktifkan Template Bootstrap tersebut, klik enabled. Bila tidak terkoneksi dengan internet maka nanti tampilan website Drupal Anda akan terlihat seperti gambar dibawah ini
    Tampilan site drupal bootstrap yang tidak terhubung ke internet

Sampai disini Proses instalasi template Drupal sudah selesai. Proses selanjutnya adalah tahap pembuatan sub theme

b). Tahap pembuatan sub theme Bootstrap
  1. Masuk ke direktori Drupal, \sites\all\themes\bootstrap
  2. Selanjutnya masuk ke direktori starterkits dan Copy Folder CDN ke \sites\all\themes\
  3. Rename folder CDN tersebut menjadi bootstrap_subtheme
  4. Bila sudah direname, buka folder bootstrap_subtheme, disana akan terlihat sebuah file dengan nama cdn.starterkit. Rename file tersebut menjadi bootstrap_subtheme.info
  5. Sampai disini pembuatan sub theme bootstrap sudah selesai.  Klik Enable and set default
    Sub theme bootstrap berhasil dibuat
c). Instalasi dan Konfigurasi Bootstrap Dengan Metode Source Files
  1. Siapkan source code bootstrap, Anda bisa download dari situs resmi bootstrap http://getbootstrap.com/getting-started/
  2. Extract folder yang sudah didownload, kemudian buka foldernya dan cari folder js
    file js dalam folder bootstrap
  3. Copy semua file Javascript yang ada, dan paste ke folder dist/js
  4. Bila sudah dicopy semua, copy folder dist dan paste ke bootsrap_subtheme, kemudian rename folder dist menjadi bootstrap
  5. Edit file bootstrap_subtheme.info dan tambahkan script dibawah ini

    
    ;;;;;;;;;;;;;;;;;;;;;
    ;; Stylesheets
    ;;;;;;;;;;;;;;;;;;;;;
    stylesheets[all][] = bootstrap/css/bootstrap.min.css
    stylesheets[all][] = css/style.css
    
    
    ;;;;;;;;;;;;;;;;;;;;;
    ;; Scripts
    ;;;;;;;;;;;;;;;;;;;;;
    
    scripts[] = 'bootstrap/js/affix.js'
    scripts[] = 'bootstrap/js/alert.js'
    scripts[] = 'bootstrap/js/button.js'
    scripts[] = 'bootstrap/js/carousel.js'
    scripts[] = 'bootstrap/js/collapse.js'
    scripts[] = 'bootstrap/js/dropdown.js'
    scripts[] = 'bootstrap/js/modal.js'
    scripts[] = 'bootstrap/js/tooltip.js'
    scripts[] = 'bootstrap/js/popover.js'
    scripts[] = 'bootstrap/js/scrollspy.js'
    scripts[] = 'bootstrap/js/tab.js'
    
  6. Sehingga nanti kurang lebih scriptnya akan terlihat seperti gambar dibawah ini. Bila Sudah selesai klik Save
    script yang mengarah ke folder bootstrap
  7. Sampai disini sebanarnya proses pemasangan script sudah selesai namun tampilan template bootstrap masih akn terlihat acak – acakan, untuk itu Anda perlu menonaktifkan CDN. Klik Apperance, selanjutnya pada bootstrap_subtheme klik Settings
  8. Pilih menu Advanced dan selanjutnya pada CDN provider pilih None. Klik Save configuraton
    menonaktifkan CDN Provider Template Bootstrap

Sampai disini thap instalasi dan konfigurasi sudah selesai semua, dan bila berhasil nanti template bootstrap akan tampil dengan sempurna seperti yang terlihat pada gambar dibawah ini.
tampilan bootstrap dengan metode source file


Untuk tambahan saja, disini bila semuanya sudah selesai diinstal maka Anda perlu menambahkan beberapa file kedalam folder template yang terdapat dalam folder bootstrap_subtheme. File tersebut terdiri dari
  1. html.tpl.php
  2. page.tpl.php
  3. block.tpl.php
  4. node.tpl.php
Sebenarnya Saya kurang begitu paham dengan file – file diatas, tapi beberapa orang yang mengembangkan drupal dengan bootstrap menambahkan file – file diatas kedalam sub theme template bootstrap. Untuk menambahkan file – file diatas ke folder templtes subtheme bootstrp caranya adalah sbb :
 
  1. Buka folder \sites\all\themes\bootstrap\templates
  2. Copy html dan page tpl di folder system dan paste ke \sites\all\themes\bootstrap_subtheme\templates 
    mengcopy file template bootstrap ke sub theme
  3. Untuk block.tpl.php copy dari folder block
  4. Selanjutnya pindah direktori ke \modules\node dan copy file node.tpl.php 
  5. Nanti dalam \sites\all\themes\bootstrap_subtheme\templates akan tada 4 file seperti yang terlihat gambar dibawah ini
    4 file php dalam folder template sub theme bootstrap

Semua yang dijelaskan diatas juga Saya dokumentasikan dalam video projek website dengan judul "Website Cantik Dengan Drupal & Bootstrap"  atau juga bisa dilihat tahapan pembuatan websitenya pada halaman " Membuat Website Cantik Dengan Drupal dan Bootstrap "


Website Cantik Dengan Drupal & Bootstrap


3 Responses to "Instalasi dan Konfigurasi Template Bootstrap Pada Drupal 7"

  1. Sayangnya saya gak pakai drupal kang :-) gak ngerti juga sih sama drupal kang, apakah sudah banyak yang menggunakan drupal versi 7.50 ?

    ReplyDelete
  2. kang pernah ngalami g cdn nya aktif, trus tau ga cara nonaktifkannya

    ReplyDelete
    Replies
    1. lewat konfigurasi template/pengaturan templatenya mas

      Delete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin