Instalasi Dan Konfigurasi Template Bootstrap Pada Drupal 7

Sebelum melangkah lebih jauh untuk mempelajari tentang Membuat Website Cantik melaluiataubersamaini Drupal dan Bootstrap, ada beberapa hal yang perlu Anda ketahui diantaranya :

1. Saya memakai Drupal versi 7.50, versi ketika artikel ini ditulis, tapi kini sudah update lagi menjadi versi 7.56, [ baca : Teknik Update Drupal ]
2. Template Boostrap yang saya gunakan yaitu versi bootstrap-7.x-3.6 yang sanggup Anda download  eksklusif dari situs Drupal
3. Supaya proses instalasi eksekutif praktis maka Saya disini menggunakan Module Administrastion Menu Drupal
4. Saya memakai metode Boostrap Source dimana source code Bootsrap ditempelkan ke template boostrap yang terdapat pada Drupal. Bila memakai CDN hal tersebut tidak perlu dilakukan, namun kalau ingin menyebarkan 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 semoga sanggup melaksanakan kustomisasi dengan lebih bebas

Tutorial ini akan dibagi kedalam 3 tahap :

a)  Tahap yang pertama yaitu Instalasi Template Boostrap

b)  Pembuatan sub theme Bootstrap

c)  Selanjutnya tahap instalasi dan konfigurasi Bootstrap dengan metode source files bootstrap

Berikut ini yaitu Instalasi dan Konfigurasi Template Bootstrap Pada Drupal 7

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 menyerupai gambar dibawah ini
   

Sampai disini Proses instalasi template Drupal sudah selesai. Proses selanjutnya yaitu 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
   

c). Instalasi dan Konfigurasi Bootstrap melaluiataubersamaini Metode Source Files

1. Siapkan source code bootstrap, Anda sanggup download dari situs resmi bootstrap http://getbootstrap.com/getting-started/
2. Extract folder yang sudah didownload, kemudian buka foldernya dan cari folder js
   
3. Copy tiruana file Javascript yang ada, dan paste ke folder dist/js
4. Bila sudah dicopy tiruana, copy folder dist dan paste ke bootsrap_subtheme, kemudian rename folder dist menjadi bootstrap
5. Edit file bootstrap_subtheme.info dan menambahkan 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 menyerupai gambar dibawah ini. Bila Sudah simpulan klik Save
   
7. Sampai disini sebanarnya proses pemasangan script sudah simpulan 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 hidangan Advanced dan selanjutnya pada CDN provider pilih None. Klik Save configuraton
   

Sampai disini thap instalasi dan konfigurasi sudah simpulan tiruana, dan kalau berhasil nanti template bootstrap akan tampil dengan tepat menyerupai yang terlihat pada gambar dibawah ini.

Untuk pelengkap saja, disini kalau tiruananya sudah simpulan 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 menyebarkan drupal dengan bootstrap menambahkan file – file diatas kedalam sub theme template bootstrap. Untuk menambahkan file – file diatas ke folder templtes subtheme bootstrp caranya yaitu 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 
   
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 menyerupai yang terlihat gambar dibawah ini
   

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

Website Cantik melaluiataubersamaini Drupal & Bootstrap

Share :