Menambahkan file gambar, CSS dan JS CodeIgniter 3 - #3 - Tutorial Komputer Terbaik untuk Pemula dan Ahli

gurukomline.com pada tutorial kali ini saya akan membahas, bagaimana caranya menyisipkan file gambar, CSS dan JavaScript (JS) ke dalam CodeIgniter 3. Ketiga file ini (gambar, CSS, dan JS) sangat diperlukan untuk membangun sebuah aplikasi menggunakan Framework CodeIgniter 3.

Pada tutorial ini kita akan memberikan contoh menyisipkan satu file gambar dan satu buah file CSS (untuk mengatur tampilan antar muka (frontend)) seperti mengatur style text, images dan satu buah file javascript. OK, lebih jelasnya silahkan ikuti tutorial langkah demi langkahnya ya dibawah ini

Membuat Folder baru dengan nama "assets"

Buatkan satu buah folder dengan nama assets di dalam root project. Dan di dalam folder assets buatkan tiga buah folder lagi sebagai berikut:

Folder "images"

Buatkan folder images di dalam folder assets yang sudah dibuat sebelumnya.
Kemudian masukan gambar yang akan digunakan dalam project kita. misalnya disini saya memasukan gambar "tugu-jogja.jpg

Folder "css"

Buatkan folder css di dalam folder assets.
Kemudian buatkan satu buah file css dengan nama style.css, dan tuliskan kode css seperti dibawah ini.

Folder "js"

Buatkan folder js dalam folder assets.
Kemudian buatkan satu buah file javascript dengan nama mylib.js dan tuliskan kode js seperti dibawah ini.

AutoLoad Helpers

Buka file autoload.php di dalam folder config
Tambahkan url helper sebagai berikut

Set BASE URL

Buka file config.php dalam folder config dan isikan variabel base_url seperti dibawah ini

Membuat Controller Baru

Buatkan satu buah Controller dengan nama Latihan2.php dalam folder conrollers dan tuliskan kode programnya seperti dibawa ini

Set Default Controller

Buka file routes.php di dalam folder config dan isikan variabel default_controller seperti dibawah ini:

Membuat View

Buatkan folder baru namanya latihan dalam folder views dan buatkan satu file dengan nama index.php seperti dibawah ini:

Jalankan Aplikasi

ketikan URL: http://localhost/stok_barang/ di browser

Hasilnya

Sekian dulu tuturial dari gurukomline.com semoga bisa membantu dan bisa dipahami penjelasan dari saya. Jika ada yang kurang paham silahkan tanyakan di kolom komentar di bawah ini.