Assalamu'alaikum Wr Wb.
Selamat Pagi Sahabat Ngelmu Tekno,
Bertemu lagi bersama saya selaku admin Ngelmu Tekno di seri tutorial Codeigniter yang kedua, kali ini saya akan membahas bagaimana caranya framework Bootstrap bisa di instal di framework Codeigniter, atau dengan kata lain kita bisa memperindah tampilan website kita. Seperti yang sudah kita ketahui bahwa framework Bootstrap sangatlah berguna bagi para Web Developer terutama pada bagian front end developer, dikarenakan framework Bootstrap ini menyediakan beberapa source kode yang siap digunakan untuk membangun sebuah website, sehingga website yang kita bangun akan responsive dan mobile friendly.
Bootstrap bisa dibaratkan sebagai baju maupun berbagai macam jenis hiasan yang bisa digunakan oleh sebuah website untuk memperindah tampilan user interface dari sebuah website sehingga website akan terlihat dinamis dan indah, dikarenakan bootstrap mempunyai kumpulan code css dan javascript yang siap digunakan oleh web developer, selain itu bootstrap juga telah menyediakan beberapa font yang indah dan siap digunakan kita pun bisa menaruh custome font di dalam folder font bootstrap.
Tutorial kali ini merupakan tutorial lanjutan dari Tutorial Bootstrap : Penjelasan & Instalasi Codeigniter bagi yang ingin mengikuti tutorial ini alangkah baiknya baca tutorial codeigniter sebelumnya. Silahkan klik link dibawah ini terlebih dahulu.
Sebelum melakukan instalasi Bootstrap pada Codeigniter alangkah baiknya kita ulas terlebih dahulu apa itu Bootstrap. Bootstrap merupakan sebuah framework front end yang dikembangkan oleh Twitter pada Agustus 2011, awal mula nama bootstrap adalah Twitter Bootstrap namun kini telah diubah menjadi Bootstrap. Seperti yang kita ketahui bahwa bootstrap merupakan framework front end yang digunakan untuk memperindah tampilan user interfaces pada sebuah website, dengan menggunakan framework bootstrap ini website kita akan indah, cepat, dan responsive pada semua perangkat.
Menggunakan bootstrap bisa dibilang cukup mudah, untuk pemanggilan css kita hanya perlu mengetahui lokasi file css bootstrap dan mendeklarasikan pathnya pada source kode view kita, setelah dideklarasikan kita hanya perlu memanggil class maupun id yang ingin kita gunakan pada source kode view kita, namun pemanggilan class dan id harus sesuai atau sudah ada di dalam css bootsrap jika belum ada kita bisa menambahkannya secara manual. Begitu juga dengan penggunaan javascript.
Kelebihan menggunakan framework Bootstrap
Menggunakan framework bootstrap akan sangat membantu dalam pembangunan webiste. Berikut kelebihan-kelebihan menggunakan framework bootstrap daripada tidak menggunakan framework bootstrap
Cara instalasi Bootstrap pada Codeigniter
Instalasi framework Bootstrap pada framework Codeigniter sangatlah mudah, Berikut saya akan jelaskan langkah demi langkah.
Implementasi Bootstrap pada Codeigniter
Setelah proses instalasi Bootstrap pada Codeigniter dilakukan, kita akan mengimplementasikannya pada project Codeigniter kita. Disini kita akan membuat 1 buah controller baru dan 1 buah view baru. Berikut saya akan jelaskan langkah demi langkah.
Ya, sampai disini saya kira tutorial instalasi bootstrap pada codeigniter dan implementasinya sudah selesai. Sudah terpampang jelas pada view v_example.php kita telah memanggil class-class yang sudah terdeklarasikan dalam css bootstrap dan siap untuk digunakan. Pada tutorial diatas kita hanya membuat sebuah navbar header selebihnya bisa kalian kerjakan sendiri dan kreasikan sesuka hati.
Jika belum jelas, mari kita diskusikan bersama di kolom komentar
Mungkin sampai disini saja tutorial instalasi bootstrap pada codeigniter dan implementasinya, semoga bisa bermanfaat bagi anda semua yang sedang belajar tentang codeigniter. Nantikan tutorial Codeigniter selanjutnya hanya di Ngelmu Tekno
Sekian dari saya,
Wassalamu'alaikum Wr Wb
Salam Ngelmu Tekno
Menggunakan framework bootstrap akan sangat membantu dalam pembangunan webiste. Berikut kelebihan-kelebihan menggunakan framework bootstrap daripada tidak menggunakan framework bootstrap
- Mempermudah pengerjaan
- Mempersingakat waktu pengerjaan
- Memperindah tampilan website
- Tampilan website akan lebih dinamis
- Ringan
- Responsive
- Mobile Friendly
- SEO
Cara instalasi Bootstrap pada Codeigniter
Instalasi framework Bootstrap pada framework Codeigniter sangatlah mudah, Berikut saya akan jelaskan langkah demi langkah.
- Download framework Bootstrap di https://getbootstrap.com/
- Download Jquery di https://jquery.com/download/
- Setelah Bootstrap terdownload silahkan ekstrak file mentah bootstrap.
- Kunjungi folder Codeigniter latihanci yang berada pada xampp/htdocs anda.(Seperti yang telah dilakukan pada tutorial sebelumnya.)
- Kemudian buatlah folder baru di dalam folder Codeigniter latihanci dengan nama 'assets' tanpa tanda petik.(Nama folder boleh bebas, namun saya rekomendasikan 'assets'.)
- Kembali ke folder bootstrap yang sudah di download tadi.
- Silahkan copykan folder bootstrap hasil ekstrakan tadi ke dalam folder assets yang baru saja kita buat yang ada pada folder Codeigniter latihanci.
- Kemudian rename folder bootstrap-3.3.7-dist menjadi bootstrap agar mempermudah pengerjaan.
- Folder latihanci merupakan folder Codeigniter yang sudah kita buat pada tutorial sebelumnya, dan sudah pernah kita copykan ke xampp/htdocs
- Pembuatan folder assets berfungsi untuk mempermudah pengerjaan dan agar project yang kita buat menjadi terstruktur. Folder assets disini berperan sebagai folder penyimpanan vendor-vendor dari luar, maka dari itu bootstrap kita copykan di folder ini.
Implementasi Bootstrap pada Codeigniter
Setelah proses instalasi Bootstrap pada Codeigniter dilakukan, kita akan mengimplementasikannya pada project Codeigniter kita. Disini kita akan membuat 1 buah controller baru dan 1 buah view baru. Berikut saya akan jelaskan langkah demi langkah.
- Buka text editor kesayangan anda.
- Buka folder project Codeigniter latihanci pada text editor anda.
- Expand folder application.
- Buka autoload.php, tambahkan 'url' pada autoload helper.
- Kemudian copykan jquery yang sudah anda dowload ke /assets/bootstrap/js (Sebelum mengcopykan file jquery silahkan rename jquery-3.2.1.min menjadi jquery.min.js hal ini untuk mempermudah penulisan source kode)
- Buatlah sebuah controller, namai Example.php
- Tuliskan script dibawah ini ke dalam Example.php
- Setelah membuat controller kita akan membuat sebuah view baru, namai v_example.php
- Tuliskan script dibawah ini ke dalam v_example.php
- Sampai sini proses implementasi bootstrap pada codeigniter sudah selesai, kita bisa menjalankannya lewat browser. ketikan url 'localhost/latihanci/index.php/example' maka akan tampil halaman seperti dibawah ini
- Halaman diatas adalah halaman versi desktop, mari coba kecilkan ukuran browser, maka toggle navigation akan menggantikan menu.
- Disini kita mengatur helper pada file autoload.php dengan parameternya diisi dengan 'url' karena disini kita membutuhkan helper url sebagai base_url untuk memanggil css dan javascript bootstrap.
- Pada gambar diatas kita membutuhkan jquery karena disini kita membuat sebuah toggle navigation, agar toggle navigation tersebut bisa aktif maka kita membutuhkan jquery.
- Pada controller Example.php kita memanggil view v_example.php dengan perintah $this->load->view("v_example.php") sehingga ketika controller Example.php dijalankan maka akan menampilkan view dari v_example.php
- Pada view v_example.php kita melakukan pemanggilan css bootstrap pada baris ke 5 tepat di bawah <head>
- Pada view v_example.php kita melakukan pemanggilan jquery dan javascript bootstrap pada baris ke 35 yaitu tepat di atas </body>
Ya, sampai disini saya kira tutorial instalasi bootstrap pada codeigniter dan implementasinya sudah selesai. Sudah terpampang jelas pada view v_example.php kita telah memanggil class-class yang sudah terdeklarasikan dalam css bootstrap dan siap untuk digunakan. Pada tutorial diatas kita hanya membuat sebuah navbar header selebihnya bisa kalian kerjakan sendiri dan kreasikan sesuka hati.
Jika belum jelas, mari kita diskusikan bersama di kolom komentar
Mungkin sampai disini saja tutorial instalasi bootstrap pada codeigniter dan implementasinya, semoga bisa bermanfaat bagi anda semua yang sedang belajar tentang codeigniter. Nantikan tutorial Codeigniter selanjutnya hanya di Ngelmu Tekno
Sekian dari saya,
Wassalamu'alaikum Wr Wb
Salam Ngelmu Tekno