Penerapan Template Bootstrap

BAB IX

Proyek Membuat Web Template

(Studi Kasus: CMS Lokomedia)

Responsive Web Design dengan PHP & Bootstrap182

Bab 9

Proyek Membuat Web Template (Studi Kasus: CMS Lokomedia)

Pada bab ini, kita akan mencoba membuat sebuah template untuk CMS Lokomedia menggunakan Bootstrap. Template ini ataupun CMS Lokomedia yang menggunakan template Bootstrap akan kita beri nama LokoBootstrap versi 1.1.

Dalam pembuatan template ini, ada beberapa aturan dasar untuk mengarahkan seperti apa template yang ingin kita buat tersebut, yaitu:

1. Sebisa mungkin kita menggunakan fitur, komponen ataupun pengaturan yang sudah disediakan oleh Bootstrap. Misalnya pada CMS Lokomedia menggunakan dropdown menu dari jQuery Superfish, kita akan tinggalkan plugin dropdown menu tersebut dan kita gunakan dropdown menu yang sudah disediakan oleh Bootstrap.

2. Apabila ada elemen halaman web pada CMS Lokomedia yang tidak tersedia di Bootstrap, maka kita akan gunakan elemen tersebut, namun styling-nya akan kita ubah agar sesuai dengan pengaturan Bootstrap maupun dengan tema (theme) dari template yang kita buat.

3. Kita usahakan agar kustomisasi terhadap pengaturan Bootstrap (CSS dan Javascript) seminimal mungkin, kecuali apabila diperlukan untuk menyesuaikan dengan fitur responsive Bootstrap ataupun untuk menyesuaikan dengan tema dari template.

9.1 Mapping Layout dan Elemen CMS LokomediaTahap pertama kita coba melakukan pemetaan terhadap elemen halaman dan layout yang ada pada CMS Lokomedia. Versi CMS Lokomedia yang akan kita buatkan template Bootstrap-nya adalah Lokomedia eljQuery versi 1 yang penulis dapat dari folder Source Code/bab5/lokojquery pada CD yang menyertai buku “Proyek Website Super WOW dengan PHP dan jQuery”, sedangkan databasenya adalah dbjquery.sql yang terdapat pada folder Source Code/bab5/database. Atau Anda bisa mendapatkan CMS Lokomedia secara gratis melalui website resminya yang beralamat:

http://bukulokomedia.com/artikel-167-update-cms-lokomedia-161-dropdown-menu-3-level.html

Pertama, kita analisa dulu elemen-elemen apa saja yang terdapat CMS Lokomedia el jQuery versi 1 tersebut, baik pada halaman utama nya maupun pada halaman lainnya. Lihat gambar 9.1.

Bab IX. Proyek Membuat Web Template CMS Lokomedia 183

Gambar 9.1 Halaman utama CMS Lokomedia (template eL jQuery)


Elemen-elemen yang terdapat pada halaman utama CMS Lokomedia sebagai berikut:

1. Motto

2. Logo dan nama website (CMS Lokomedia)

3. Navigation menu menggunakan plugin dropdown menu jQuery superfish.

4. Header image

5. Bagian Intro yang terdiri dari tanggal dan jam, search field dan RSS link.

6. Konten 3 kolom yang terdiri dari:

a. Kolom kiri

• Slideshow headline berita

• List berita sebelumnya dengan fitur tooltip (plugin jQuery Tipsy).

• Galery foto dengan fitur pop up window (plugin Fancy Box).

b. Kolom tengah

• Tabs dengan plugin jQuery tabs.

• List kategori berita

• List download

• List agenda

c. Kolom kanan (sidebar)

• Sekilas info menggunakan plugin jQuery news ticker.

• Statistik user

• Polling

• Banner

7. Footer

Adapun lebar halaman website CMS Lokomedia adalah 960px dengan layout halaman utama (home) 3 kolom dan halaman kedua adalah 2 kolom. Lihat gambar 9.2.


Gambar 9.2 Halaman kedua CMS Lokomedia (detail berita)


Pengaturan halaman dengan 3 kolom atau 2 kolom tergantung pada module yang sedang aktif, apabila module yang aktif adalah module ‘home’ maka halaman terdiri dari 3 kolom, sedangkan selain module home, maka halaman menjadi 2 kolom.

Pengaturan module apa yang aktif dilakukan oleh file .htaccess, sedangkan pengaturan halaman dan isinya diatur oleh file kiri.php.

Pada halaman 2 kolom, maka kolom pertama berisi berita atau detail berita, sedangkan kolom kedua adalah sama dengan kolom ketiga (sidebar) pada halaman utama.

Dari hasil analisa elemen halaman utama dan layout, maka kita buat rencana layout web template CMS LokoBootstrap versi 1.1 menggunakan Twitter Bootstrap versi 2.3.2 dengan beberapa kondisi berikut:

1. Kita gunakan Fixed Layout dengan grid 12 kolom.

2. Menggunakan HTML5, karena HTML5 merupakan standard-nya Bootstrap, oleh karena itu beberapa markup HTML tag pada CMS Loko el jQuery versi 1 kita ganti agar sesuai dengan standar markup pada HTML5.

3. Menggunakan font-family Roboto Condensed Regular, salah satu font-family favoritnya penulis, bisa didownload di http://www.fontsquirrel.com/ menggantikan font bawaan dari Bootstrap, yaitu Helvetica Neue. Font Roboto Condensed ini kita letakan di folder fonts/.

4. Menggunakan jQuery versi terkini pada saat buku ini ditulis, yaitu versi 2.0.2 yang bisa kita donwload dari http://jquery.com/download/.

5. Themes kita gunakan gaya themes yang sedang trend belakangan ini, yaitu: simple, clean dan minimalis, dimana menggunakan warna yang lembut dengan tekstur yang tipis atau tidak ada sama seklai. Untuk themes kita kali ini warna background berkisar antara putih, abu-abu dan hitam tanpa tekstur, bentuk elemen halaman banyak berbentuk kubus (kotak) dan perbedaaan antara header, content section dan footer, kita beri batas yang jelas dengan perbedaan kontras warna.

6. Elemen Intro (Tanggal, Jam, Kolom Pencarian dan RSS) kita pindahkan ke baris atas dijadikan satu dengan Motto. Pada kolom pencarian, kita tidak gunakan plugin jQuery untuk mengaktifkan placeholder ...cukup kita gunakan atribut placeholder pada elemen input yang merupakan standar pada HTML5.

7. Logo kita pertahankan, tapi nama situs CMS Lokomedia kita hilangkan.

8. Navigation menu kita satukan dengan logo dan menggunakan fitur standar dari Bootstrap dengan sedikit modifikasi pada CSS nya.

9. Header Image kita ganti dengan SlideShow untuk mempromosikan website ataupun untuk banner iklan pihak ketiga menggunakan jCarousel standar Bootstrap.

10. Untuk kolom konten berita tetap 3 kolom, hanya pada kolom kontent sebelah kiri yang terdiri dari 2 kolom dan isinya diatur oleh file kiri.php, urutan kolomnya kita tukar yaitu kolom tabs yang tadinya di tengah kita pindahkan di sebelah kiri,


sehingga pembagian kolomnya menjadi seperti berikut:

a. Kolom Kiri:

• Tabs menggunakan fitur Tabs dari Bootstrap

• Daftar Kategori Berita menggunakan komponen Tabel Bootstrap

• Daftar Download menggunakan komponen Tabel Bootstrap

• Daftar Agenda menggunakan komponen Tabel Bootstrap

b. Kolom Tengah:

• SlideShow Headline Berita menggunakan jCarousel dari Bootstrap

• Daftar Berita Sebelumnya menggunakan fitur ToolTip Bootstrap

• Galeri Foto dengan fitur Pop Up Window menggunakan plugin jQuery Fancy Box (tidak berubah).

c. Kolom Kanan (Sidebar):

• Sekilas Info menggunakan plugin jQuery News Ticker (tidak berubah).

• Statistik User menggunakan komponen Tabel Bootstrap

• Polling menggunakan komponen Form dan Tabel Bootstrap

• Banner (tidak berubah).

11. Footer tidak ada perubahan mendasar.

Catatan:

jQuery versi 2.x tidak lagi mendukung browser IE 6,7 dan 8, oleh karena itu apabila dianggap bahwa website kita masih banyak diakses oleh browser IE 6,7 dan 8, maka dapat menggunakan jQuery versi 1.9.x.

Untuk memberi gambaran sekilas mengenai layout yang akan kita buat, kerangkanya bisa dilihat pada gambar 9.3.

Adapun tampilan halaman utama template LokoBootstrap yang akan kita buat, hasilnya bisa dilihat dulu pada gambar 9.4.


Gambar 9.3 Rancangan layout halaman utama template LokoBootstrap


Gambar 9.4 Halaman utama template LokoBootstrap

9.2 Markup HTML5 untuk Layout Web HTML Markup halaman utama dan halaman kedua untuk template LokoBootstap sederhana saja. Pada dasarnya, seluruh halaman terbagi atas tiga bagian besar, yaitu Header, Content dan Footer.


<header id=”header” >...</header>

<section id=”content”> ...</section>

<footer id=”footer”>....</footer>

9.2.1 Header

Bagian <header>...</header> kita kembangkan lagi dengan menambah beberapa markup seperti berikut: <header>

<div class=”container”> <div class=”row”> <div class=”span12”> Baris ke 1 </div> </div>

<div class=”row”><div class=”span12”>

Baris ke 2</div>

</div>

<div class=”row”><div class=”span12”>

Baris ke 3</div>

</div></div>

</header>

Penjelasan Skrip:

Pada <header>...</header>, kita buat sebuah container dengan class .container (lihat lagi sub-bab 2.4) untuk memperoleh Fixed Layout 12 kolom yang mempunyai posisi di tengah layar. Pada container juga kita buat 3 baris (row) yang didalam setiap baris tersebut ada sebuah kolom dengan lebar 12 (.span12).

Dengan markup tersebut, kita akan memperoleh tiga buah baris yang lebarnya 12 kolom dengan posisi berada di tengah layar.

Kemudian pada baris pertama, kita isi dengan markup lebih lanjut yang kita beri id selector #topmenu. <div id=”topmenu”>

<ul class=”pull-left”> <li><span id=”date”></span>,

<span id=”clock”></span></p> </li>

</ul>

<ul class=”pull-right”> <liclass=”first”>


<a href=”#”>CMS GRATIS UNTUK INDONESIA</a></li>

<li class=”divider”> </li><li><form class=”form” method=”POST” id=”searchform” action=”hasil-pencarian.html”> <input type=”text” name=”kata” class=”span2” placeholder=”Pencarian ...”>

<button type=”submit” class=”btn btn-inverseGO</button> </form>

</li> <li><a href=”rss.xml” target=”_blank”>

<img src=”images/rss_circ.png” width=”24px” title=”rss” border=”0”>

</a></li>

</ul>

<divclass=”clearfix”></div></div>

Penjelasan Skrip:

Pada #topmenu terdiri dari tiga bagian utama, yaitu:

Bagian pertama untuk menampilkan Tanggal dan Jam yang kita tempatkan di sebelah kiri menggunakan cllas .pull-left. Tanggal dan Jam ditampilkan melalui fungsi startclock, sebuah fungsi Javascript yang berada pada file js/clock.js. Sesuai konversi, maka link ke file clock.js tersebut kita letakkan di bawah, dan fungsi startclock, kita aktifkan dibawah halaman melalui kode menggunakan jQuery library seperti berikut:

<script type=”text/javascript” charset=”utf-8”> $(document).ready(function(){ startclock(); });</script>

Skrip tersebut kalau kita terjemahkan menggunakan bahasa awam artinya adalah:

“Apabila seluruh elemen dalam halaman telah ditampilkan oleh browser, maka jalankan fungsi startclock“.

Ini adalah sebuah metode dalam jQuery untuk memastikan bahwa semua fungsi Javascript tidak menghalangi parsing (menampilkan elemen halaman) yang sedang dilaksanakan oleh browser.

Bagian kedua menampilkan Motto, Kolom Pencarian dan Link ke RSS yang kita tempatkan di sebelah kanan dengan class .pull-right.

Dan bagian ketiga fungsinya adalah mengosongkan sisi kanan untuk memastikan tidak ada lagi yang tampil di sisi kanan dengan tag <div class=”clearfix”></div>.

Selanjutnya, baris kedua dari bagian <header> ...</header>, kita isi dengan Navigation Bar (lihat lagi sub-bab 5.5).


<div class=”navbar navbar-inverse navbar-static-top”><div class=”navbar-inner”> <a class=”btn btn-navbar” data-toggle=”collapse”

data-target=”.nav-collapse”> <span class=”icon-bar”></span> <span class=”icon-bar”></span> <span class=”icon-bar”></span> </a>

<a class=”brand” href=”index.php”><img src=”img/logo2.png” width=”76” height=”36” alt=”” /></a>

<div class=”nav-collapse collapse navbar-responsive-collapse”>

<?php ... ?></div> 

</div> 

</div> 

Penjelasan Skrip:

Isi dari bagian navigation bar setelah tag <div class=”navbar-inner”> terdiri dari tiga bagian yaitu:

Bagian pertama untuk membuat tombol (button) pada saat navigation bar ditampilkan di layar berukuran kecil, yaitu pada tag <a class=”btn btn-navbar” ......>.

Bagian kedua untuk menampilkan logo dengan tag:<a class=”brand” href=”index.php”><img src=”img/logo2.png” width=”76” height=”36” alt=”” /></a>

Bagian tersebut kita buat diluar container dengan class .nav-collapse, kenapa? Agar pada saat container nav-collapse disembunyikan (collapse) pada viewport yang lebih kecil (smartphone, tablet mode portrait, dan sebagainya), maka logo tetap akan tampil.

Bagian ketiga untuk menampilkan menu yang akan menggunakan skrip PHP dan akan kita bahas pada bagian selanjutnya.

Baris terakhir dari <header> ...</header>, kita isi SlideShow untuk menampilkan promosi dari website ataupun bisa juga iklan dari pihak luar menggunakan plugin Carousel yang merupakan standar Bootstrap. (lihat lagi sub-bab 7.12). <div id=”mySlide1” class=”carousel slide “> <ol class=”carousel-indicators”>

<li data-target=”#mySlide1” data-slide-to=”0” class=”active”></li><li data-target=”#mySlide1” data-slide-to=”1”></li><li data-target=”#mySlide1” data-slide-to=”2”></li>

</ol><div class=”carousel-inner”> ... </div><a class=”carousel-control left” href=”#mySlide1” data-slide=”prev”>&lsaquo;</a>


<a class=”carousel-control right” href=”#mySlide1” data-slide=”next”>&rsaquo;</a>

</div>

Penjelasan Skrip:

Untuk markup lengkapnya dapat dilihat pada file media.php yang berada pada folder lokobootstrap didalam CD yang menyertai buku ini.

Slideshow pada bagian header kita beri id #mySlide1 (karena nanti ada slideshow lain yang kita beri id # mySlide2) merupakan contoh implementasi Carousel dengan data statik, adapun pada #mySlide2 kita gunakan data dinamis dengan skrip PHP untuk memberikan data image dan data caption pada plugin Carousel.

Untuk membuat slideshow #mySlide1 berjalan otomatis, maka kita tambahkan skrip berikut di bagian Javascript yang terletak dibagian bawah halaman utama kita:

<script type=”text/javascript” charset=”utf-8”> $(document).ready(function(){ startclock(); $(‘#mySlide1’).carousel(); });</script>

Catatan:

SlideShow kita kasih class .hidden-phone, sehingga pada handphone gambarnya tidak akan tampil.

9.2.2 Content

Pada <section id=”content”>...</section>, kita isi dengan container yang berisi satu baris dengan lebar 12 kolom. <section id=”content”>

<div class=”container”>

<div class=”row”>

<div class=”konten-utama”> <?php include ‘kiri.php’; ?> </div>

<div class=”span4” > Diisi dengan sidebar (listticker, statistik user, polling dan banner) </div>

</div>

</div></section>


Penjelasan Skrip:

Kita lihat markup tersebut, baris pada container terbagi menjadi dua bagian utama, yaitu:

Sebelah kiri yang isinya file kiri.php. File ini nantinya akan membuat layout secara dinamis, yaitu apakah di bagian tersebut akan berisi 2 kolom atau hanya berisi 1 kolom, bergantung kepada module yang aktif.

Sebelah kanan (sidebar) yang berisi komponen-komponen sidebar dengan lebar 4 kolom.

9.2.3 Footer

Bagian footer tidak banyak perubahan, kita gunakan hanya untuk menampilkan copyright:<footer id=”footer”>

<div class=”container”> <div class=”row”> <div class=”span12”> <div class=”copy”> <p>Copyright © 2010 by bukulokomedia.com. All rights reserved.</p> </div> </div> </div></div>

</footer>

9.3 Make it Dynamic!Bagian terdahulu baru menjelaskan mengenai HTML5 markup, belum sampai ke sisi dinamis dari template LokoBootstrap yang menggunakan skrip PHP. Bagian berikut akan membahas mengenai sisi dinamis dari template LokoBootstrap.

9.3.1 Dropdown Menu

Bootstrap sudah mempunyai fitur navigation bar dan plugin dropdown menu sendiri yang akan kita coba implementasikan dalam web template ini.

Untuk menampilkan dropdown menu secara dinamis, maka kita tetap menggunakan fungsi PHP yang sudah disediakan oleh CMS Lokomedia dengan sedikit modifikasi agar sesuai dengan styling milik Bootstrap.

Modifikasi pertama:if ($data[$parent]) { if($parent<=0){ $html = “$tab<ul class=’nav pull-right pull-down’>”; } else{ $html = “$tab<ul class=’dropdown-menu’ role=’menu’ >”

}


Penjelasan Skrip:

Untuk menempatkan class pada <ul> induk yang isinya merupakan main menu atau pada <ul> anak yang isinya adalah sub-menu dengan melihat apakah parent_id-nya 0 atau bukan, kalau parent_id = 0, maka itu adalah menu utama maka kita beri class .nav dengan class tambahan .pull-right dan .pull-down. Sedangkan apabila parent_id-nya selain 0, berarti mempunyai sub-menu, maka kita berikan class .dropdown-menu.

Modifikasi kedua yang kita lakukan untuk mengetahui apakah elemen <li> nya adalah untuk menu utama atau untuk sub-menu. if($child){

$html .= “$tab<li class=’dropdown’>”;$html .= ‘<a href=”’.$v->url.’” data-target=”#”

data-toggle=”dropdown” class=”dropdown-toggle”>‘.$v->judul.’ <span class=”caret”></span></a>’;

}else{

$html .= “$tab<li>”;$html .= ‘<a href=”’.$v->url.’”>’.$v->judul.’</a>’;

}

Penjelasan Skrip:

Skrip tersebut memanfaatkan hasil iterasi pada fungsi get_menu( ) untuk mencari ada tidaknya sub-menu, apabila ada maka elemen <li> kita beri class .dropdwon dan anchor link <a> untuk sub menu tersebut kita beri class .dropdown-toggle dan juga data atribut.data-target=”#” dan data-toggle=”dropdown” apabila hasil iterasi fungsi get_menu( ) tidak ada (false) maka kita tidak memberikan style apa-apa pada elemen <li> dan <a>, karena elemen tersebut memuat menu utama.

Skrip lengkap untuk menampilkan dropdown menu yang sudah dimodifikasi bisa dilihat pada skrip media.php yang ada di CD terlampir.

Hasil kolaborasi skrip PHP tersebut dengan styling dari Bootstrap menghasilkan sebuah dropdown menu yang anggun dan cantik seperti terlihat pada gambar 9.5.

Gambar 9.5 Tampilan menu DropDown

Kembali penulis ingin mengingatkan bahwa sebuah DropDown menu pada Bootstrap ditampilkan dengan aksi klik pada link parent-nya bukan dengan aksi on hover (lihat


kembali Catatan pada sub-bab 5.3).

Akibatnya pada template ini adalah pada menu utama Profil dan menu utama Berita halaman menu tersebut tidak bisa ditampilkan (halaman untuk sub-menu nya tidak ada masalah), karena ketika di klik, aksi klik tersebut hanya menampilkan sub-menunya dalam bentuk DropDown.

Koreksi nya adalah dengan memasukan link halaman menu utama tersebut ke dalam sub-menunya, misalnya untuk halaman semua berita, mungkin bisa ditambahkan dalam sub-menunya sebuah sebuah link dengan judul ‘Semua Berita’. Untuk menu utama Profil, linknya penulis masukan ke dalam sub-menu Tentang Kami yang kebetulan di database masih kosong. Sehingga kalau sub-menu Tentang Kami di klik, maka yang muncul adalah halaman Profil.

Catatan:

Jadi ke depan, kalau pembaca ingin membuat sistem menu dalam Bootstrap, kalau ada menu utama yang mempunyai sub-menu, maka pada menu utama tersebut tidak usah ada link ke halaman ... karena tidak akan terbuka ketika di-klik ....

Di luar persoalan aksi klik atau on hover tersebut, ada sedikit masalah estetika pada dropdown menu kita, yaitu karena warna background dropdown menu standar Bootstrap versi 2.3.2 adalah berwarna putih degan teks warna hitam dan pada saat on hover pada elemen dropdown (menu) background berwarna biru dengan teks berwarna putih. Ini membuat tampilannya tidak sesuai (menurut penulis) dengan latar belakangnya yang berwarna gelap, oleh karena itu kita perlu melakukan modifikasi pada CSS dropdown menu kita agar tampil fungsional, cantik, resposinve dan padu dengan latar belakangnya.

Modifikasi css-nya bisa dilihat pada file custom.css mulai baris 192 s/d 205.

Hasil dropdown menu yang sudah kita modifikasi akan terlihat seperti pada gambar 9.6.

Gambar 9.6 DropDown menu setelah dimodifikasi pada file custom.css

Nampak sekarang ...apabila mouse on hover pada menu utama, maka warna menu utama berubah menjadi hijau daun, dan apabila pada menu utama yang mempunyai dropdown menu di-klik, maka warnanya kan berubah menjadi hijau, kemudian ada garis berwarna hijau dibawahnya, lalu dropdown menunya ditampilkan dengan latar belakang warna


gelap dengan teks putih agak pucat karena menggunakan color :#a29e9f, sedangkanpada saat on hover teksnya akan berwarna putih terang karena menggunakan color: #ffffff; cantik dan dahsyat kan???

Masih ada beberapa fitur pada navigation bar dan dropdown menu yang belum diterapkan, misalnya menampilkan ikon di sebelah kiri menu baik pada menu utama maupun sub-menu ataupun pembuatan divider (separator). Dalam contoh ini, penulis tidak implementasikannya, karena harus mengubah atau menambah field pada tabel menu dan juga melakukan modifikasi yang lebih rumit pada skrip fungsi get_menu yang semuanya saat ini berada di luar cakupan penulisan buku ini.

9.3.2 Konten Utama

Yang penulis maksud dengan konten utama adalah konten yang terdapat pada kolom pertama dan kolom kedua pada halaman home, baik layout maupun isinya diatur oleh file kiri.php.

Pada template LokoBootstrap, isi kedua kolom tersebut sebagai berikut :

• Kolom 1 (kiri):

o Tab menggunakan fitur tab dari Bootstrap

o Daftar Kategori Berita menggunakan komponen Tabel Bootstrap

o Daftar Download menggunakan komponen Tabel Bootstrap

o Daftar Agenda menggunakan komponen Tabel Bootstrap

• Kolom 2 (tengah):

o SlideShow Headline Berita menggunakan jCarousel dari Bootstrap

o Daftar Berita Sebelumnya dengan fitur ToolTip dari Bootstrap

o Galeri foto dengan fitur PopUp Window menggunakan plugin Fancy Box (tidak berubah).

Pengaturan layout Kolom 1 (kiri) berada pada file kiri.php, yaitu pada tag <div class=”span4”>... </div> baris 6 s/d 120. Sedangkan pengaturan Kolom 2 (tengah) berada pada tag <div class=”span4”>...</div> baris 121 s/d 187.

Kolom 1 - Tab Berita

Tab Berita menggunakan standar dari Bootstrap (lihat lagi sub-bab 5.4), sedangkan skrip PHP-nya hanya sedikit kita modifikasi pada bagian HTML tag-nya untuk menyesuaikan dengan standar Tab dari Bootstrap dan agar tampil lebih seimbang dan lebih gaya, maka kita tambahkan foto. Hasilnya bisa dilihat pada gambar 9.7.

Markup HTML dan skrip PHP yang mengatur tampilan Tab Berita bisa dilihat pada file kiri.php, tepatnya baris 8 s/d 66.


Gambar 9.7 Tab Berita (Terpopuler, Terkini, Komentar)

Kolom 1 - Kategori Berita

Pada bagian Kategori Berita, kita gunakan Block Level Button pada headernya dan kita tambahkan icon. Untuk data list-nya kita gunakan navigation list dari Bootstrap (lihat lagi sub-bab 5.4.1) ditambah dengan Badges untuk tampilan Jumlah Berita didalam setiap Kategori Berita. Lihat gambar 9.8.

Gambar 9.8 Kategori Berita


Markup HTML dan skrip PHP yang mengatur tampilan Kategori Berita bisa dilihat pada file kiri.php, tepatnya baris 68 s/d 89.

Kolom 1 - Download

Pada bagian Download, kita gunakan Button Block Level untuk judul pada headernya dan gabungan antara tabel untuk menghasilkan border luar dan navigation list untuk tampilan data list download-nya. Lihat gambar 9.9.

Gambar 9.9 Bagian Download

Markup HTML dan skrip PHP yang mengatur tampilan Download bisa dilihat pada file kiri.php, tepatnya baris 91 s/d 105.

Kolom 1 - Agenda

Pada bagian Agenda, kita gunakan Block Level Button untuk judul pada headernya dan tabel untuk data agendanya. Lihat gambar 9.10.

Gambar 9.10 Bagian Agenda


Markup HTML dan skrip PHP yang mengatur tampilan Agenda bisa dilihat pada file kiri.php, tepatnya baris 106 s/d 119.

Kolom 2 - SlideShow Headline Berita

Pada bagian ini, kita akan menerapkan slideshow menggunakan plugin Carousel dari Bootsrap dengan menggunakan data dinamis yang dihasilkan dari skrip PHP.

Markup HTML untuk slideshow hampir sama saja dengan slideshow pada bagian header, kecuali pada bagian navigasi nya (tanda panah di kiri dan kanan gambar) tidak diaktifkan.

Tidak ada modifikasi pada skrip PHP-nya, kita hanya mengganti html tag <div id=’div$no’> menjadi <div class=’item’> agar sesuai dengan markup Carousel Bootstrap. Agar slideshow berjalan otomatis maka pada bagian bawah halaman sebelum tag </body> kita tambahkan skrip Javascript seperti berikut:

<script type=”text/javascript” charset=”utf-8”> $(document).ready(function(){

startclock();$(‘#mySlide1’).carousel();

$(‘#mySlide2’).carousel(); });</script>

Jadi sekarang ada dua perintah untuk menjalankan plugin Carousel, yaitu untuk slide dengan id #mySlide1 pada bagian header, dan perintah untuk menjalankan plugin Carousel dengan id #mySlide2 yang isinya adalah header berita.

Adapun tampilan SlideShow Headline Berita bisa dilihat pada gambar 9.11.

Gambar 9.11 Slideshow Headline Berita


Kolom 2 - Daftar Berita Sebelumnya

Daftar Berita Sebelumnya menggunakan unordered list (<ul>) dari Bootstrap. Tidak ada modifikasi pada skrip PHP, hanya perubahan pada class-class yang digunakan disesuaikan dengan style Bootstrap.

Sedangkan untuk tooltipnya, kita gunakan tooltip dari Bootstrap. Untuk itu, pada elemen <a> kita beri class .tip dan data atribut data-toggle=’tooltip’ dan letakkan tooltip di sebelah kanan judul berita dengan data atribut data-placement=’right’. Kemudian untuk mengaktifkan tooltip sama seperti Carousel, gunakan perintah jQuery seperti berikut:

<script type=”text/javascript” charset=”utf-8”> $(document).ready(function(){

startclock(); $(‘#mySlide1’).carousel(); $(‘#mySlide2’).carousel(); $(“.tip”).tooltip(); });</script>

Adapun tampilan Daftar Berita Sebelumnya yang disertai dengan ToolTip apabila mouse diarahkan pada salah satu judul berita bisa dilihat pada gambar 9.12.

Gambar 9.12 Daftar Berita Sebelumnya disertai Tooltip

Markup HTML dan skrip PHP yang mengatur tampilan Daftar Berita Sebelumnya bisa dilihat pada file kiri.php, tepatnya baris 151 s/d 168.


Kolom 2 - Galeri Foto

Pada Galeri Foto, kita gunakan fitur Thumbnail dari Bootstrap. Disini ada sedikit masalah ‘teknis’ yang penulis hadapi, dimana lebar container untuk kolom tengah 4 kolom (.span4), kalau kita mengikuti standar Bootstrap untuk thumbnail, maka foto akan ditampilkan pada lebar 1 kolom (4 foto per baris) atau pada lebar 2 kolom (2 foto per baris). Disinilah timbul masalah, karena ukuran foto yang ingin ditampilkan.

Apabila foto ditampilkan dengan lebar 1 kolom standar Bootstrap, maka akan terlalu kecil, sulit untuk memberikan caption (keterangan), sedangkan apabila ditampilkan dengan lebar 2 kolom (140 px) ... ukuran foto aslinya hanya 100px, maka foto akan tampil kurang bagus dan juga terlalu banyak baris ke bawah untuk menampilkan 6 foto.

Oleh karena itu, penulis membuat opsi lain, yaitu menampilkan foto dengan lebar tidak diatur oleh Bootstrap (tidak menggunakan class .span1 ataupun .span2). Penulis ubah lebar fotonya menjadi 98px dengan tinggi 65px, adapun kode CSS-nya sebagai berikut:

.kolom2-galery .thumbnail a img { width:98px; height:65px; border:1px solid #aaa; padding: 1px; }

Untuk efek PopUp-nya, kita gunakan plugin jQuery Lightbox 0.5 yang bisa di download dari http://webscripts.softpedia.com. Ekstrak file downloadnya lalu lakukan hal berikut:

• Copy file jquery.lightbox-0.5.css ke folder css di template kita

• Copy file jquery.lightbox-0.5.min.js ke folder js di template kita.

• Copy semua file gambar dari folder images ke folder images di template kita.

• Link file jquery.lightbox-0.5.css melalui file media.php di bagian <head> tepat di bawah custom.css.

• Link file jquery.lightbox-0.5.min.js via file media.php letakkan di bagian bawah.

• Aktifkan plugin lightbox dengan menambahkan skrip $(‘a#galeri’).lightBox(); sehingga sekarang tampilan bagian yang mengaktifkan semua plugin menjadi: <script type=”text/javascript” charset=”utf-8”> $(document).ready(function(){ startclock(); $(‘#mySlide1’).carousel(); $(‘#mySlide2’).carousel(); $(“.tip”).tooltip();

$(‘a#galeri’).lightBox();

});</script>

Adapun tampilan Galeri Foto bisa dilihat pada gambar 9.13.


Gambar 9.13 Galeri Foto

Untuk melihat efek lightbox-nya, silahkan klik salah satu foto, maka akan tampil foto dalam ukuran aslinya pada sebuah bingkai. Lihat gambar 9.14.

Gambar 9.14 Efek Lightbox pada Foto


9.3.3.3 Konten pada Sidebar

Untuk konten pada sidebar yaitu kolom ketiga (kanan), kitacopy seluruh isi dari file aslinya yang berada dalam elemen <div id=”sidebar”>...</div> ke dalam file media.php. Markup HTML danskrip PHP untuk pengaturan sidebar mulai baris 181 s/d 277 pada file media.php.

Kolom 3 - Sekilas Info

Pada bagian Sekilas Info, kita tetap gunakan plugin listticker seperti pada template CMS Lokomedia el jquery versi 1. Plugin tersebut kita letakkan di dalam tabel sebagai border luarnya.

Pada Bagian headernya kita gunakan Block Level Button ditambah dengan ikon dari glyphicon. Untuk menyesuaikan dengan lebar kolom, maka kita memodifikasi beberapa item CSS pada file ticker.css yang berada di folder css.

Adapun tampilan Sekilas Info bisa dilihat pada gambar 9.15.

Gambar 9.15 Bagian Sekilas Info

Kolom 3 - Statistik User

Kita mengunakan tabel Bootsrap untuk bagian Statistik User, modifikasi hanya pada tag HTML-nya untuk memasukan class-class yang digunakan oleh Tabel Bootstrap. Header sama seperti bagian yang lain menggunakan Block Level Button. Lihat gambar 9.16.


Gambar 9.16 Bagian Statistik User

Kolom 3 - Polling

Pada bagian Polling, kita gunakan Tabel, dimana didalam Tabel kita gunakan form Bootstrap. Modifikasi hanya pada tag HTML untuk menyesuaikan dengan Tabel dan Form Bootstrap. Untuk bagian header-nya sama seperti bagian lain. Lihat gambar 9.17.

Gambar 9.17 Bagian Pollling


Kolom 3 - Banner

Tidak ada modifikasi sama sekali pada bagian banner. Skrip PHP maupun tag HTML-nya sama seperti aslinya. Perubahan mungkin hanya pada CSS-nya.

Gambar 9.18 Rancangan layout halaman kedua template LokoBootstrap


9.3.4 Halaman Kedua (Detail Berita)

Pada halaman kedua, dalam contoh ini adalah halaman detail berita, layout untuk kontennya agak berbeda dengan halaman utama, dimana pada halaman utama terbagi menjadi 3 kolom (lihat lagi gambar 9.3), sedangkan halaman kedua terbagi menjadi 2 kolom. Lihat gambar 9.18.

Adapun tampilan halaman kedua (detail berita) template LokoBootstrap yang akan kita buat, hasilnya bisa dilihat dulu pada gambar 9.19.

Gambar 9.19 Halaman kedua template LokoBootstrap


Pada halaman kedua tidak banyak perubahan yang penulis lakukan, hanya di sebelah kiri ditambahkan link untuk share ke media sosial seperti Facebook, Google Plus dan Twitter agar halaman tidak terlalu membosankan.

Pada form isi komentar, kita tambahkan juga sedikit validasi pada field nama, komentar dan kode yang ada pada form isi komentar menggunakan validasi standar dari HTML5.

Sehingga sekarang terdapat dua validasi, yaitu validasi standar HTML5 dan validasi menggunakan PHP pada file simpankomentar.php.

Validasi menggunakan HTML5 juga kita tambahkan pada form Hubungi Kami, sehingga sama seperti form Isi Komentar, maka form Hubungi Kami sekarang mempunyai dua validasim yaitu validasi dengan HTML5 dan validasi menggunakan skrip PHP yang ada di file kiri.php. Lihat gambar 9.20.

Gambar 9.20 Validasi form komentar menggunakan HTML5

Tampilan pagination kita ubah menggunakan styling Bootstrap. Untuk itu, tambahkan beberapa tag HTML pada skrip PHP untuk menampilkan paging yang ada di file class_paging.php pada folder config.


9.4 Fitur TambahanPenulis juga menambahkan beberapa fitur yang sebelumnya tidak ada pada CMS Lokomedia el jQuery 1, diantaranya:

Button share social media pada halaman kedua atau halaman detail berita seperti nampak pada gambar 9.21.

Gambar 9.21 Tombol share ke sosial media

Link tesebut saat ini belum berfungsi karena belum menggunakan kode snipet yang disediakan oleh masing-masing media sosial tersebut.

Berikut beberapa link untuk mendapatkan kode snipet untuk mengaktifkan tombol share tersebut:

http://developers.facebook.com/docs/reference/plugins/like/

https://developers.google.com/+/web/+1button/

https://dev.twitter.com/docs/tweet-button

Selain button share atau follow button untuk twitter, ada juga tambahan lain yaitu fitur Alert dari Bootstrap yang ditampilkanpada halaman kedua. Lihat gambar 9.22.


Gambar 9.22 Alert apabila terjadi kesalahan saat mengisi form komentar

Fitur Alert juga penulis terapkan pada:

• Hasil pencarian (jika tidak ada kata kunci yang dimasukkan pada kolom pencarian).

• Isi komentar, apabila ada field wajib yang tidak di-isi.

• Halaman hubungi kami, apabila ada field yang tidak di-isi.

9.5 Testing! Testing! Testing!Nah, akhirnya kita sampai di ujung perjalanan pembuatan template LokoBootstrap ini. Walaupun kita sudah mengikuti semua petunjuk dari Bootstrap dan kita yakin bahwa template ini akan berjalan di semua browser utama dan yakin akan fitur responsive-nya ... namun ...tidak ada yang bisa menggantikan peranan testing...untuk memastikan bahwa semuanya berjalan sesuai keinginan kita.

Gambar 9.23 Berbagai pilihan manual testing pada Sauce Labs


Untuk melakukan testing kompatibilitas pada semua browser, kita gunakan jasa dari www.saucelabs.com. Berikut langkah-langkahnya:

• Upload template kita ke web hosting agar bisa diakses secara online.

• Login ke situs www.saucelabs.com. Apabila belum mempunyai ID, daftar dulu.

• Pilih manual testing. Lihat gambar 9.23.

Dari gambar 9.23, kita bisa lihat kita dapat melakukan cross browser compatibility testing terhadap web template kita, mulai dari Smartphone berbasis IOS (iPhone) dan Android sampai ke desktop dengan pilihan sistem operasi Windows 8, Windows 7, Windows XP, OS X (keluarga Macbook) dan juga Linux ... sedangkan pilihan untuk browser nya sendiri tersedia untuk semua tipe browser utama seperti IE6, IE7, IE8, IE9, Firefox, Chrome, Safari, dan sebagainya.

Berikut contoh testing di Sauce Labs dengan setting sistem operasi OS X Leopard (Macbook) dan browser Firefox21. Lihat gambar 9.24.

Gambar 9.24 Testing dengan setting sistem operasi OSX Mac dan browser Firefox 21.

Sedangkan testing tampilan pada Tablet (iPad) bisa dilihat pada gambar 9.25.

Dan terakhir, testing tampilan pada Smartphone (iPhone) bisa dilihat pada gambar 9.26.

Dari hasil testing tersebut dapat disimpulkan bahwa template LokoBootstrapyang kita buat bisa tampil di semua browser utama dan juga tablet serta smartphone dengan baik.


Gambar 9.25 Testing tampilan pada Tablet (iPad)


Gambar 9.26 Testing tampilan pada Smartphone (iPhone)

Penerapan Template Bootstrap

Documents