Pepen Aandrian Syah Membuat Template
Membuat Template dengan Bootstrap pada
Codeigniter
Pepen Aandrian Syah
pepenaan@gmail.com
Abstrak
Bootstrap adalah suatu Framework yang digunakan untuk membuat tampilan / desain
suatu halaman website. Kali ini saya kan membuat artikel tenang bagaimana caranya
membuat template dengan Bootstrap ada Codeigniter.
Kata Kunci: framework codeigniter, codeigniter, bootstrap
Pendahuluan
Penulis berharap dengan artikel ini, pembaca dapat memahami dan memanfaatkan
artikel ini dengan sebaik-baiknya, dan kemudian penulis juga berharap agar yang
membaca tulisan ini dapat belajar pemogramman berbasis web dengan semangat.
Pembahasan
Banyak teman – teman penulis yang bertanya mengenai penggunaan bootstrap pada
CodeIgniter. Bootstrap merupakan salah satu framework HTML dan CSS yang pada
filenya telah terdapat jQuery yaitu framework JavaScript. Banyak web designer yang
menggunakan bootstrap untuk sebagai framework yang mereka gunakan. Jika membuka
wapplyzer, tercatat 1.126.686 website yang menggunakan bootstrap pada 26 April 2016
sebagai frameworknya. Dengan hal tersebut juga, terdapat banyak template – template
website yang dibuat oleh web designer baik yang gratis ataupun berbayar.
Berdasarkan hal tersebutlah, banyak mahasiswa tingkat akhir yang menggunakan CI
dan bootstrap ataupun orang yang belajar tentang CI yang menggunakan bootstrap
untuk tampilannya.
Setelah menginstall CodeIgniter silakan unduh template bootstrap salah satunya
di Bootstrap Zero. Langkah lengkapnya adalah sebagai berikut.
Dalam folder belajar (folder CI yang dibuat pada tutorial 1) buat satu folder dan beri
nama assets.
Buat folder assets dalam folder CodeIgniter
Kemudian cari file template yang telah diunduh dan ekstrak. Dalam folder hasil ekstrak
tersebut terdapat folder CSS dan JavaScript serta file – file pendukung lainnya seperti
gambar.
Hasil ekstrak file unduhan yang berisi folder dan file pendukung.
Pindahkan folder dan file pendukung tersebut ke dalam folder assets yang telah kita
buat pada folder atau direktori CodeIgniter (belajar) tersebut. File yang berekstensi html
atau php tidak dipindahkan.
Memindahkan folder dan file pendukung
Kemudian buka editor Anda (editor favorite penulis adalah Sublime Text 3)
Buka file autoload.php yang terletak pada belajar/application/config. Kemudian pada
baris 92 atau cari $autoload[‘helper’] = array(); dalam array tersebut tambahkan helper
URL. Helper URL akan dibahas pada postingan lain.
$autoload['helper'] = array('url');
Mengaktifkan helper URL pada autoload.php
Buka file welcome_message.php yang terletak pada belajar/application/views.
File welcome_message.php merupakan tampilan awal setelah menginstall CodeIgniter.
Tampilan ini dapat diganti namun akan dibahas pada satu postingan lain karena
berhubungan dengan file routing.php dan controller.
Tampilan welcome_message.php
Hapus tag yang ada kecuali skrip PHP yang berada paling atas file (). Buka salah satu
tampilan dari template yang kita unduh dalam kasus ini penulis
memilih login.html yang akan menjadi tampilan awal saat dijalankan.
Salin tag pada file tersebut dan pindahkan ke welcome_message.php. Sesuaikan
beberapa hal seperti titlenya.
Tampilan setelah memindahkan tag
Kemudian cari tag yang berisi tag untuk meload css dan JavaScript () dan ubah menjadi
Codeigniter
Pepen Aandrian Syah
pepenaan@gmail.com
Abstrak
Bootstrap adalah suatu Framework yang digunakan untuk membuat tampilan / desain
suatu halaman website. Kali ini saya kan membuat artikel tenang bagaimana caranya
membuat template dengan Bootstrap ada Codeigniter.
Kata Kunci: framework codeigniter, codeigniter, bootstrap
Pendahuluan
Penulis berharap dengan artikel ini, pembaca dapat memahami dan memanfaatkan
artikel ini dengan sebaik-baiknya, dan kemudian penulis juga berharap agar yang
membaca tulisan ini dapat belajar pemogramman berbasis web dengan semangat.
Pembahasan
Banyak teman – teman penulis yang bertanya mengenai penggunaan bootstrap pada
CodeIgniter. Bootstrap merupakan salah satu framework HTML dan CSS yang pada
filenya telah terdapat jQuery yaitu framework JavaScript. Banyak web designer yang
menggunakan bootstrap untuk sebagai framework yang mereka gunakan. Jika membuka
wapplyzer, tercatat 1.126.686 website yang menggunakan bootstrap pada 26 April 2016
sebagai frameworknya. Dengan hal tersebut juga, terdapat banyak template – template
website yang dibuat oleh web designer baik yang gratis ataupun berbayar.
Berdasarkan hal tersebutlah, banyak mahasiswa tingkat akhir yang menggunakan CI
dan bootstrap ataupun orang yang belajar tentang CI yang menggunakan bootstrap
untuk tampilannya.
Setelah menginstall CodeIgniter silakan unduh template bootstrap salah satunya
di Bootstrap Zero. Langkah lengkapnya adalah sebagai berikut.
Dalam folder belajar (folder CI yang dibuat pada tutorial 1) buat satu folder dan beri
nama assets.
Buat folder assets dalam folder CodeIgniter
Kemudian cari file template yang telah diunduh dan ekstrak. Dalam folder hasil ekstrak
tersebut terdapat folder CSS dan JavaScript serta file – file pendukung lainnya seperti
gambar.
Hasil ekstrak file unduhan yang berisi folder dan file pendukung.
Pindahkan folder dan file pendukung tersebut ke dalam folder assets yang telah kita
buat pada folder atau direktori CodeIgniter (belajar) tersebut. File yang berekstensi html
atau php tidak dipindahkan.
Memindahkan folder dan file pendukung
Kemudian buka editor Anda (editor favorite penulis adalah Sublime Text 3)
Buka file autoload.php yang terletak pada belajar/application/config. Kemudian pada
baris 92 atau cari $autoload[‘helper’] = array(); dalam array tersebut tambahkan helper
URL. Helper URL akan dibahas pada postingan lain.
$autoload['helper'] = array('url');
Mengaktifkan helper URL pada autoload.php
Buka file welcome_message.php yang terletak pada belajar/application/views.
File welcome_message.php merupakan tampilan awal setelah menginstall CodeIgniter.
Tampilan ini dapat diganti namun akan dibahas pada satu postingan lain karena
berhubungan dengan file routing.php dan controller.
Tampilan welcome_message.php
Hapus tag yang ada kecuali skrip PHP yang berada paling atas file (). Buka salah satu
tampilan dari template yang kita unduh dalam kasus ini penulis
memilih login.html yang akan menjadi tampilan awal saat dijalankan.
Salin tag pada file tersebut dan pindahkan ke welcome_message.php. Sesuaikan
beberapa hal seperti titlenya.
Tampilan setelah memindahkan tag
Kemudian cari tag yang berisi tag untuk meload css dan JavaScript () dan ubah menjadi