Tampilkan postingan dengan label Cara memasukan template. Tampilkan semua postingan
Tampilkan postingan dengan label Cara memasukan template. Tampilkan semua postingan

Minggu, 27 Januari 2019

Cara Memasukan Template Bootstrap ke Codeigniter


Assalamu’alaikumWr-wb.

Yaa, kembali lagi di Bagas Tone, blog tentang program dsbnya. Pada tutorial sebelumnya telah membahas tentang Penting !! Cara Setting base_url dan Menghilangkan index.php, dimana dalam menjalankan codeigniter perlu setting tersebut.

Pembasan kali ini apa si? Yaa, jadi pembahasan kali ini tentang templating Codeigniter. Templateing itu jadi sebuah langkah dimana kita pengen membuat tampilan website Codeigniter kita sesuai template website yang telah kita rancang atau download. Tidak hanya templating, kali ini berisi tentang :

1.      Manage Folder
2.      Templating
3.      Layouting
4.      View to Controller
5.      Testing

Jadi pada finallnya kita akan menampilkan template yang sudah di bagi sesuai layout yaitu :
- header

- Isi atau Content

- Footer


Yang harus kalian siapin adalah :
1.      Download template yang akan dipakai di : download 
2.      Aktifin apache dan mysql di XAMPP control panel, jangan lupa
3.      Cari dan buka hasil downloadnya
4.      Buka Sublime Text 3nya dan open folder ci_latihan, seperti tutorial sebelumnya.

Langkah 1 : Manage Folder
1.      Setelah dibuka hasil download tempaltenya, copy folder css – vendor.

2.      Buka C:\xampp\htdocs\ci_latihan à buat folder baru dengan nama assets. Paste di dalam folder assets.  Hasil akhirnya kegini :



Langkah 2 : Templating
1.      Buka folder downloadan templatenya, seleksi index.html dan about.html à drag ke Sublime Text 3nya


2.      Buat file baru dengan nama beranda.php dan about.php dan sebuah folder baru yang berisi header.php dan footer.php di application/view/

3.      Copy seluruh isi index.html ke beranda.php dan isi about.html ke about.php. Jangan lupa di save (ctrl+s).
4.      Kemudian tambahkan cooding ini “ <?php echo base_url(); ?>assets/ “ di link yang mengarah ke assets.
a.       Cooding di atas (header), cari “ <link href=


b.      Di tengah cari  img , dan lakukan di “ src=


c.       Di bawah (footer atau script), cari script dan lakukan di “ src=



Yang perlu diketahui, perbedaan di kotak merah dan biru yaitu merah tidak perlu tapi harus konek ke internet ketika dijalankan (supaya font sesuai template) dan biru adalah wajib di lakukan karna berkaitan dengan tampilan.

Lakukan hal yang sama di about.php

Langkah ke 4 : Layouting
1.      Setelah itu focus ke beranda.php. Lakukan Cut cooding dari atas sampai tag “ </nav> “. Paste di header.php.


2.      Kemudian Cut kembali cooding dari tag “ <footer> “ sampai bawah. Paste di footer.php. Jangan lupa di save (ctrl+s).



3.      Nah pastiin yang tersisa di beranda.php adalah dari tag “ <section> “ sampai “ </section> “. Pastiin juga di about hanya section yang tersisa.
 


Langkah ke 4 : View to Controller
1.      Buat controller baru dengan nama Beranda.php dan About.php


2.      Load View “header, beranda dan footer” di Controller Beranda.php. Load View juga “header, about dan footer” di Controller About.php


Langkah ke 5 : Testing



1.      Buka browser kesayangan kalian
2.      Akses url : “ localhost/ci_latihan/Beranda
3.      Jika berhasil maka akan tampil tampilan beranda.php. Kemudian klik menu About , jika berhasil maka akan mengakses Controller About.php dan menampilkan View dari about.php

Yahaha.. akhirnya selesai jugaa 😉. Nah setalah mengikuti langkah 1 sampai 5 kalain sudah bisa manage folder, templateing, layouting dan koneksi view ke controller. Alhamdulillah 😊

Yoosh, semoga tutorialnya bermanfaat bagi kalian yang lagi semangat skripsi atau ngooding Codeignier :D :D.

Jika ada yang bingung step di atas tanyakan di kolom komentar dibawah. Yang mau request juga bisa seputar codeigniter 😊 😊






Terimakasih telah mengikuti sejauh ini. Akhir kata Wassalamu’alaikum Wr-wb. 
Download Template