Cara Integrasi Template AdminLTE 3 dengan CodeIgniter

Cara Integrasi Template AdminLTE 3 dengan CodeIgniter

Diperbaharui 3 Agustus 2020 1:34 AM

Pada artikel kali ini kita mulai mengembangkan pembuatan website menggunakan codeigniter, dimana kali ini kita akan belajar cara integrasi template adminlte 3 dengan codeigniter.

Sebelum lanjut untuk yang baru terjun ke framework codeigniter saya sarankan untuk membaca dan memahami dasar-dasar menggunakan framework codeigniter yang sudah saya buatkan pada seri tutorial dasar menggunakan codeigniter.

Dalam membuat sebuah website pasti dibutuhkan tampilan yang keren dan pasti kamu akan kewalahan jika membuat nya dari nol karena akan membutuhkan banyak waktu, maka dari itu disini saya akan berbagi tentang cara integrasi template adminlte 3 dengan codeigniter. Dengan menggunakan template kamu tidak perlu membuat desain sendiri dari nol untuk membuat tampilan yang keren bin kece, cukup memanfaatkannya sehingga muncul tampilan seperti yang diinginkan. Karena dalam suatu template pasti banyak fitur – fitur yang tidak semuanya harus digunakan dan kamu bisa memilih dan mengembangkan fitur – fitur tersebut.

Apa itu Template AdminLTE?

AdminLTE 3 adalah desain yang secara default digunakan untuk backend atau bisa dikatakan administrator namun itu tergantung mau digunakan untuk bagian backend ataupun frontend. Bagi para penggemar template adminlte bisa langsung mendownloadnya pada situs resmi AdminLTE dan langsung mendapatkan desain sesusai dengan yang didownload, namun karena bahasan kita kali ini berkaitan dengan codeigniter maka akan ada beberapa perubahan dalam mengelola template adminlte yang dinamakan integrasi template adminlte 3 dengan codeigniter.

Cara Integrasi Template AdminLTE 3 dengan CodeIgniter

1. Download framework codeigniter dan ganti namanya menjadi ci-adminlte-v3

2. Download template [ adminlte-v3 ] kemudian ekstrak dan simpan di folder assets/vendor/

3. Buka project ci-adminlte-v3 di text editor

4. Buat controller application/controllers/Dashboard1.php dan masukkan code berikut :

<?php

defined('BASEPATH') or exit('No direct script access allowed');

class Dashboard1 extends CI_Controller
{
    public function index()
    {
        $this->load->view('dashboard1');
    }
}

5. Buka link demo template adminlte v3 [ demo adminlte v3 ] dan lihat page source dengan menekan Ctrl+U kemudian copy semua codenya.

6. Buat view application/views/dashboard1.php dan paste code yang telah dicopy.

7. Lihat hasilnya dengan mengakses http://ci-adminlte-v3.test/index.php/dashboard1 dan inspek dengan menekan Ctrl+Shift+I → Network → F5, maka akan terlihat warna merah yang menandakan bahwa css, js dan images tidak berhasil dipanggil

8. Setelah saya lihat-lihat ternyata hanya ada 2 kata yang menentukan lokasi file berada, yaitu plugins dan dist sehingga untuk membuat lokasinya sesuai lakukan cara berikut :

  • Replace plugins menjadi <?=base_url(‘assets’);?>/vendor/AdminLTE-3.0.5/plugins
  • Replace dist menjadi <?=base_url(‘assets’);?>/vendor/AdminLTE-3.0.5/dist

Sekarang coba refresh kembali dan tampilannya sudah sempurna tanpa adanya merah-merah ganggu seperti pada gambar berikut :

Integrasi Template AdminLTE 3 dengan CodeIgniter

Untuk Dashboard v2 dan v3 caranya sama saja, jadi silakan lakukan hal yang sama secara mandiri.

Tambahan untuk halaman login :

Integrasi Template AdminLTE 3 dengan CodeIgniter Login

Itulah cara integrasi template adminlte 3 dengan codeigniter yang dapat saya sampaikan, semoga bermanfaat.

Baca Juga : Tutorial CRUD CodeIgniter

susantokun avatar
susantokun
Lahir di Bumi ini atas perjuangan Ayah dan Ibu yang senantiasa membuat dan mengeluarkan sehingga lahirlah Susanto pada tanggal 27 Maret 1996 di Cianjur - Jawa Barat.
Kebijakan Berkomentar :
  • Dilarang berkomentar yang mengandung SPAM, SARA, HOAX, PORNO.
  • Mohon sertakan informasi detail saat terjadi error (pesan error, sreenshoot, code, logs, dsb.).
Silakan baca terlebih dahulu kebijakan berkomentar sebelum berkomentar.
KOMENTAR TERBARU