Blog Nur Akhwan

(Bag 2) – Pembuatan Template Website - Website Profil Sekolah dengan Codeigniter dan Twitter Bootstrap

Template Website...? Ya, ini adalah sebuah bahasa Inggris. Menurut kamus besar bahasa google 4 juta milliar (teringat kamus bahasa inggris SMP-ku dulu 4 milliar, loh gan) itu arti dari kata “Template” sendiri adalah “Contoh” (diakses pada tanggal 20/04/2013, pukul 09.41). Nah loh, gak begitu nyambung, yak. Ane cari lagi, di google, arti kata template, buat menemukan arti sebenarnya yang mudah dimengerti dari kata template ini.  Nah, akhirnya dapet yang begitu nyambung, arti dari template website adalah sebuah desain tampilan halaman  dengan berisikan dokumen file model-model tambahan yang dikodekan dalam bahasa program dan siap pakai.


Itu kiranya pengertian template website. Klo ane ambil kesimpulan dari setiap ane membikin template adalah : membuat desain tampilan sebuah halaman web utama/utuh, yang dalam penggunaannya nanti ada salah satu bagian yang akan diisi oleh konten-konten dari website atau intinya bagian tertentu itu berubah-ubah... (kira-kira begitu, komandan). Lihat gambar dibawah ini :
Tapi dalam konteks ini, sesuai judulnya, kita akan memanfaatkan sebuah framework CSS Twitter Bootstrap, yang pengertiannya sudah dijelaskan dalam bagian pertama bahasan ini. Insya Alloh, Twitter bootstrap ini sudah mengadopsi teknologi yang bersifat “responsive design”, HTML5, dan CSS3. 





Banyak cara mecari template website ini, salah satunya dengan mendownload template gratis yang banyak bertebaran di internet. Untuk akhir-akhir ini template yang paling populer adalah template yang bersifat “responsive design” atau template tersebut bisa menyesuaikan layar device user/pengunjungnya. Secara, hari gini, banyak orang yg mengakses lewat Smartphone, Tablet, Kapsul (eh.. ora, lho), Blackberry, dll (yang satupun ane kagak punya, lho gan.. HP ane, tipe Nokia 103 dan Motorolla WX-193, -- sebuah pengakuan jujur, lho ini, hahaha). Trus yang ngetren lagi yang sudah HTML5 dan CSS 3, yang merupakan teknologi pemrograman web statis saat ini (2013). Hehe. 

OK, langsung saja. Pada pembuatan website ini kita akan membuat template dengan 2 kolom utama (kolom 2: sidebar, klom 3: konten), header (nomor 1), footer (4), seperti gambar di bawah ini :



Kita akan membuat templatenya dengan menggunakan twitter bootstrapnya. Langsung saja, karena saya tidak menjelaskannya satu-persatu, panjang bener, gan.. sumpah, maka akan langsung saya sertakan dalam file download di bawah ini.

Simpan file tersebut dengan nama index.html. Nah jika dibuka, makan belum menghasilkan template jadi, melainkan hanya menampilkan tampilan acak-acakan dan gak beraturan. Itu karena file CSS dan Javascript dari Twitter bootstrapnya belum kita sertakan. Buatlah sebuah folder dengan nama “aset” yang berfungsi untuk menyimpan file CSS dan Javascript dari Twitter Bootstrapnya. 

Selanjutnya buka folder ekstrak’an dari hasil download Twitter bootstrapnya. Buka folder : 

“twitter-bootstraps/docs/assets/”, akan didapatkan 4 folder seperti ini : 


Untuk folder “img” itu banyak terdapat  file yang sebenarnya tidak perlu, nah kita hapus saja file tersebut. Buka folder “img” tersebut, dan hapus beberapa file, dan sisakan hanya file-file berikut ini (file-file image intinya twitter bootstrap):

Kemudian balik ke folder “assets” , dan copykan semua foldernya (css, ico, js, dan img) ke folder “aset” di folder template yang kita buat tadi. Ilustrasinya seperti ini :


Nah, sekarang buka file “index.html” tersebut, maka akan ditampilkan template kita sudah jadi, dan akan seperti ini :


Mungkin agak berbeda dengan punya saya. Ada gambar yang tak tampil, dan lain sebagainya. Untuk gambar, itu nanti bisa diperbaiki sendiri, yak. Trus mungkin berbeda dengan punya saya yang ada warna biru-birunya, itu karena punya saya sudah saya ubah sedemikian rupa di file “aset/css/bootstrap.css”-nya. OK, sekian dulu untuk bahasan untuk Pembuatan Template dengan framework CSS , Twitter Bootstrap kali ini, akan kita lanjutkan di bahasan selanjutnya, yaitu mengisikan template ke Codeigniternya. Hehehe..  Untuk file template jadinya, bisa didownload di link berikut ini :






Oh, hiya... Jangan lupa klo membutuhkan WEBSITE PROFIL, WEBSITE SEKOLAH, SISTEM INFORMASI atau APLIKASI LAIN YANG BERBASIS WEB, hubungi ane saja, gan. Hubungi saja lewat YM di samping, atau untuk respon cepat tanggap (kayak PMI) hubungi 085292747190, SMS OK, telpon OK...

Tidak ada komentar:

Posting Komentar