Integrasi Admin LTE Ke CodeIgniter


 

Integrasi Admin LTE dengan Codeigniter

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 :

<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Auth extends CI_Controller
{
public function index()
{
$this->load->view('login');
}
public function login()
{
redirect('dashboard1');
}
}
view rawAuth.php hosted with ❤ by GitHub
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 3 | Log in</title>
<link href='<?=base_url("assets/uploads/images/avatar.png"); ?>' rel='shortcut icon' type='image/x-icon' />
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="<?=base_url('assets');?>/vendor/AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet"
href="<?=base_url('assets');?>/vendor/AdminLTE-3.0.5/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="<?=base_url('assets');?>/vendor/AdminLTE-3.0.5/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="<?=base_url('assets');?>/vendor/AdminLTE-3.0.5/index2.html"><b>Admin</b>LTE</a>
</div>
<!-- /.login-logo -->
<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action="<?=base_url();?>index.php/dashboard1" method="post">
<div class="input-group mb-3">
<input type="email" class="form-control" placeholder="Email">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="password" class="form-control" placeholder="Password">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="icheck-primary">
<input type="checkbox" id="remember">
<label for="remember">
Remember Me
</label>
</div>
</div>
<!-- /.col -->
<div class="col-4">
<button type="submit" class="btn btn-primary btn-block">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
<div class="social-auth-links text-center mb-3">
<p>- OR -</p>
<a href="#" class="btn btn-block btn-primary">
<i class="fab fa-facebook mr-2"></i> Sign in using Facebook
</a>
<a href="#" class="btn btn-block btn-danger">
<i class="fab fa-google-plus mr-2"></i> Sign in using Google+
</a>
</div>
<!-- /.social-auth-links -->
<p class="mb-1">
<a href="forgot-password.html">I forgot my password</a>
</p>
<p class="mb-0">
<a href="register.html" class="text-center">Register a new membership</a>
</p>
</div>
<!-- /.login-card-body -->
</div>
</div>
<!-- /.login-box -->
<!-- jQuery -->
<script src="<?=base_url('assets');?>/vendor/AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<?=base_url('assets');?>/vendor/AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="<?=base_url('assets');?>/vendor/AdminLTE-3.0.5/dist/js/adminlte.min.js"></script>
</body>
</html>
view rawlogin.php hosted with ❤ by GitHub
Integrasi Template AdminLTE 3 dengan CodeIgniter Login

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

Tutorial By Mikho Rahayoni

Komentar

Postingan populer dari blog ini

Aplikasi Pembelajaran online ETHOL (Enterprise Technology Hybrid Online Learning)