Mengubah Tampilan CodeIgniter Dengan Bootstrap Di Xampp

Pada pembahasan kali ini Bang Plowotan akan memberikan tutorial untuk mengubah tampilan default dari CodeIgniter dengan Bootstrap

Sebenarnya apa sih CodeIgniter dan Bootstrap itu?

CodeIgniter adalah sebuah framework php yang bersifat open source (terbuka) dan menggunakan metode MVC (Model, View, Controller). codeigniter bersifat free alias tidak berbayar atau gratis jika anda menggunakannya. framework codeigniter di buat dengan tujuan sama seperti framework lainnya yaitu untuk memudahkan developer atau programmer dalam membangun sebuah aplikasi berbasis web tanpa harus membuat nya dari awal.
Kelebihan CodeIgniter Adapun beberapa kelebihan dari codeigniter adalah
  • syntax yang terstruktur
  • kemudahan dalam menggunakannya
  • codeigniter menyediakan fasilitas helper dan library yang dapat membantu developer dalam membuat pagination, session, manipulasi url dan lainnya yang akan kita pelajari pada tutorial codeigniter selanjutnya.
  • keamanan yang sudah lumayan karena user atau pengakses aplikasi tidak berhubungan langsung dengan database.
Bootstrap
Bootstrap adalah sebuah library framework CSS yang di buat khusus untuk bagian pengembangan front-end website. bootstrap merupakan salah satu framework HTML, CSS dan javascript yang paling populer di kalangan web developer. pada saat ini hampir semua web developer telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat. karena anda hanya perlu menambahkan class-class tertentu untuk misalnya membuat tombol, grid, navigasi dan lainnya.

Sebelum melanjutkan proses mengubah tampilan dari CodeIgniter dengan Bootstrap siapkan bahan berikut terlebih dahulu :
Sebagai acuannyam berikut ini adalah struktur folderdari CodeIgniternya:
ci_bootstrap/
|-- application/
|-- assets/
|---- css/
|------ bootstrap.min.css
|------ style.css
|---- js/
|------ bootstrap.min.js
|------ jquery.min.js
|---- fonts/
|------ glyphicons-halflings-regular.eot
|------ glyphicons-halflings-regular.svg
|------ glyphicons-halflings-regular.ttf
|------ glyphicons-halflings-regular.woff
|------ glyphicons-halflings-regular.woff2
|-- system/
|-- user_guide/
|-- index.php
|-- .htaccess

Pada tutorial yang akan digunakan ini akan mengambil tampilan dari Bootstrap yakni Static Top Navbar, kalian bisa melihat tampilannya di link berikut Static Top Navbar

Selanjutnya jika bahan yang dibutuhkan sudah disiapkan maka kamu bisa ikuti langkah-langkah dibawah ini :

  1. Extrak file dari CodeIgniter-3.1.6.zip & Assets.zip di lokasi bebas.
  2. Kemudian buka folde htdocs yang terdapat di dalam folder xampp (lokasi instalasi Xampp) dan buatlah folder dengan nama codeigniter kemudian masuk di dalam folder tersebut. 
  3. Selanjutnya copy file yang ada di dalam file CodeIgniter-3.1.6.zip yang sudah kamu extrak sebelumnya ke dalam folder codeigniter yang berada di dalam htdocs xampp.
  4. Lalu buka Xampp Control Panel dan jalankan modul Apache saja.
  5. Kemudian buka browser lalu ketik "localhost/codeigniter" *Nama folder yang kamu buat tadi. Maka akan muncul tampilan default dari CodeIgniter.
  6. Selanjutnya masuk lagi ke dalam folder codeigniter di dalam htdocs xampp dan copykan folder assets yang berada di dalam Assets.zip yang sudah kamu download tadi ke dalam folder codeigniter.
  7. Kemudian buka file Welcome.php di dalam folder application/controllers. ubah kode pada bagian public function index sepeti gambar di bawah ini.
  8. Selanjutnya buat file home.php didalam folder application/views dan masukan kode seperti di bawah ini.
  9. Lalu buat juga file header.php di dalam folder yang sama tadi.
  10. Terakhir buat file footer.php di dalam folder yang sama juga.
  11. Langkah terakhir yakni coba kamu buka kembali browsernya lalu masukan urlnya seperti pada langkah ke-6. Maka tampilan dari CodeIgniter akan berubah seperti berikut.

Post a Comment

Previous Post Next Post

recent posts