Integrasi CodeIgniter Dan Bootstrap
Halo halo, salam sejahtera buat kawan-kawan semua, gimana kabar kalian ? sehat kan. Harus sehat ya, soal nya di artikel kali ini saya akan membahas tentang bagaimana cara menambahkan bootstrap di project Codeingniter kalian. Kalo kemaren kemaren kita sibuk di script sistem, kali ini kita akan beranjak 1 level lebih tinggi, yaitu ke tampilan website.
Ok, langsung saja kita lanjut, sebelumnya untuk kawan-kawan yang belum membaca artikel sebelumnya yaitu : mengedit data gambar menggunakan codeigniter harap dibaca dulu ya untuk menghindari kebingungan. nah sebelum kita melangkah lebih jauh, pastikan kawan-kawan mendownload file-file yang di butuhkan disini. kalo sudah, sekarang ikuti langkah-langkah di bawah ini dengan teliti dan hati-hati :
1. Exstrack file "assets.rar" yang barusan kawan-kawan download, maka kalian akan menemukan 3 folder dan 1 file di dalamnya yaitu :
kemudian buatlah folder bernama "assets" di dalam folder "belajarci" dan copy 3 folder dan 1 file tadi ke dalam nya.
2. Kemudian kita tinggal dulu folder assets tadi, buka project kalian di texteditor lalu edit "main.php" yang berada di "belajarci/application/views/main.php" seperti berikut :
Penjelasan Script :
Sebenarnya di penjelasan kali ini gak terlalu berubah banyak sih untuk script, hanya sicrpt html nya jadi saya akan menjelaskan perubahan-perubahan penting saja.
- script <link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet"> berfungsi untuk memanggil file bootstrap.min.css yang berada di lokasi "belajarci1/assets/css/bootstrap.min.css" nah kalo temen-temen bingung apasih arti dari "<?php echo base_url(); ?>" arti script ini adalah "https//127.0.0.1/namafolderkalian/" coba kalian tulis alamat ini di browser "127.0.0.1/namafolder/assets/css/bootstrap.min.css" maka akan muncul script css yang sangat banyak di browser kalian.
nah sekarang apa sih css itu bang ? hehehe css adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Jadi gampangnya css adalah sebuah bahasa khusus yang membuat tampilan website lebih menarik.
- scirpt "<script src="<?php echo base_url(); ?>assets/jquery-3.3.1.min.js"></script>" berfungsi untuk memanggil file javasacript atau ".js" yang bernama "jquery-3.3.1" di folder "belajarci1/assets/jquery-3.3.1.min.js".
kawan-kawan pasti bertanya-tanya apasih jquery itu ???
jQuery adalah sebuah library JavaScript. Dalam dunia pemrograman, library adalah kumpulan dari berbagai fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript. Nah dalam kasus kita disini adalah, paket bootstrap itu membutuhkan jquery.
- script "<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>" memiliki fungsi yang sama, yaitu memanggil file "bootstrap.min.js" di folder "belajarci1/assets/js/bootstrap.min.js"
- Terakhir untuk kawan-kawan yang bingung dengan tambahan script html lainya kalian bisa lihat langsung di website resmi bootstrap , kemudian untuk script di bawah nya egak saya jelaskan karena memang sama langkah-langkah dan penjelasan script nya
Sebenarnya di penjelasan kali ini gak terlalu berubah banyak sih untuk script, hanya sicrpt html nya jadi saya akan menjelaskan perubahan-perubahan penting saja.
- script <link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet"> berfungsi untuk memanggil file bootstrap.min.css yang berada di lokasi "belajarci1/assets/css/bootstrap.min.css" nah kalo temen-temen bingung apasih arti dari "<?php echo base_url(); ?>" arti script ini adalah "https//127.0.0.1/namafolderkalian/" coba kalian tulis alamat ini di browser "127.0.0.1/namafolder/assets/css/bootstrap.min.css" maka akan muncul script css yang sangat banyak di browser kalian.
nah sekarang apa sih css itu bang ? hehehe css adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Jadi gampangnya css adalah sebuah bahasa khusus yang membuat tampilan website lebih menarik.
- scirpt "<script src="<?php echo base_url(); ?>assets/jquery-3.3.1.min.js"></script>" berfungsi untuk memanggil file javasacript atau ".js" yang bernama "jquery-3.3.1" di folder "belajarci1/assets/jquery-3.3.1.min.js".
kawan-kawan pasti bertanya-tanya apasih jquery itu ???
jQuery adalah sebuah library JavaScript. Dalam dunia pemrograman, library adalah kumpulan dari berbagai fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript. Nah dalam kasus kita disini adalah, paket bootstrap itu membutuhkan jquery.
- script "<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>" memiliki fungsi yang sama, yaitu memanggil file "bootstrap.min.js" di folder "belajarci1/assets/js/bootstrap.min.js"
- Terakhir untuk kawan-kawan yang bingung dengan tambahan script html lainya kalian bisa lihat langsung di website resmi bootstrap , kemudian untuk script di bawah nya egak saya jelaskan karena memang sama langkah-langkah dan penjelasan script nya
3. jangan lupa kita edit juga file "input.php" yang berada di "belajarci/application/views/input.php" seperti berikut :
4. Terakhir jangan lupa edit juga file "edit.php" yang berada di "belajarci/application/views/edit.php" seperti berikut :
5. Selanjut nya silahkah kawan-kawan coba buka "127.0.0.1/belajarci" kenapa kog pake "127.0.0.1" bukan "localhost", alasanya karena kadang kalo pake "localhost" icon-icon yang telah kita pasang di project kita tidak muncul.
Ok sekian dulu tutorial singkat kali ini, kalo kawan-kawan masih banyak yang bingung silahkan coret-coret tab komentar di bawah ini atau download source code nya disini. sampai ketemu di artikel selanjutnya dan salam sejahtera untuk kawan-kawan semua.
mantab bos, upload artikel baru dong
BalasHapus