Membuat Halaman Login dan Dashboard Pada Codeigniter3

A. Pembuatan Database

1. Pastikan untuk mengaktifkan aplikasi XAMPP terlebih dahulu.

2. Buat struktur database nya seperti dibawah ini.

Email jadikan sebagai Primary Key. Password nya menjadi MD5 dan aktifkan Boolean lalu pilih Y.

3. Setting pada folder config dengan nama file autoload.php

<?php

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

| -------------------------------------------------------------------

| AUTO-LOADER //ini akan otomatis meload fitur yang kalian butuhkan disinilah CI jadi modular untuk efektivitas manajemen memori

| -------------------------------------------------------------------

| This file specifies which systems should be loaded by default.

| In order to keep the framework as light-weight as possible only the

| absolute minimal resources are loaded by default. For example,

| the database is not connected to automatically since no assumption

| is made regarding whether you intend to use it. This file lets

| you globally define which systems you would like loaded with every

| request.

| -------------------------------------------------------------------

| Instructions

| -------------------------------------------------------------------

| These are the things you can load automatically: ini adalah fitur yang bisa di autoload

| 1. Packages

| 2. Libraries

| 3. Drivers

| 4. Helper files

| 5. Custom config files

| 6. Language files

| 7. Models

| -------------------------------------------------------------------

| Auto-load Packages

| -------------------------------------------------------------------

| Prototype:

| $autoload['packages'] = array(APPPATH.'third_party', '/usr/local/shared');

$autoload['packages'] = array();

| -------------------------------------------------------------------

| Auto-load Libraries

| -------------------------------------------------------------------

| These are the classes located in system/libraries/ or your

| application/libraries/ directory, with the addition of the

| 'database' library, which is somewhat of a special case.

| Prototype:

| $autoload['libraries'] = array('database', 'email', 'session');

| You can also supply an alternative library name to be assigned

| in the controller:

| $autoload['libraries'] = array('user_agent' => 'ua');

$autoload['libraries'] = array('database','session');

| -------------------------------------------------------------------

| Auto-load Drivers

| -------------------------------------------------------------------

| These classes are located in system/libraries/ or in your

| application/libraries/ directory, but are also placed inside their

| own subdirectory and they extend the CI_Driver_Library class. They

| offer multiple interchangeable driver options.

| Prototype:

| $autoload['drivers'] = array('cache');

| You can also supply an alternative property name to be assigned in

| the controller:

| $autoload['drivers'] = array('cache' => 'cch');

$autoload['drivers'] = array();

| -------------------------------------------------------------------

| Auto-load Helper Files

| -------------------------------------------------------------------

| Prototype:

| $autoload['helper'] = array('url', 'file'); baca bagian ini untuk mengetahui apa saja yang perlu ditambah

$autoload['helper'] = array('url');

| -------------------------------------------------------------------

| Auto-load Config files

| -------------------------------------------------------------------

| Prototype:

| $autoload['config'] = array('config1', 'config2');

| NOTE: This item is intended for use ONLY if you have created custom

| config files. Otherwise, leave it blank.

$autoload['config'] = array();

| -------------------------------------------------------------------

| Auto-load Language files

| -------------------------------------------------------------------

| Prototype:

| $autoload['language'] = array('lang1', 'lang2');

| NOTE: Do not include the "_lang" part of your file. For example

| "codeigniter_lang.php" would be referenced as array('codeigniter');

$autoload['language'] = array();

| -------------------------------------------------------------------

| Auto-load Models

| -------------------------------------------------------------------

| Prototype:

| $autoload['model'] = array('first_model', 'second_model');

| You can also supply an alternative model name to be assigned

| in the controller:

| $autoload['model'] = array('first_model' => 'first');

$autoload['model'] = array();

Pada bagian libraries silahkan tambahkan database dan sesion, kemudian pada bagian helper silahkan tambahkan url.

4. masuk ke folder config, pilih file database.php. setting seperti sourcecode dibawah ini.

$db['default'] = array(

'dsn' => '',

'hostname' => 'localhost',

'username' => 'root', //biasanya user name itu root

'password' => '',

'database' => 'kelas_tifb', //ke database yang ingin kita sambungkan

'dbdriver' => 'mysqli',

'dbprefix' => '',

'pconnect' => FALSE,

'db_debug' => (ENVIRONMENT !== 'production'),

'cache_on' => FALSE,

'cachedir' => '',

'char_set' => 'utf8',

'dbcollat' => 'utf8_general_ci',

'swap_pre' => '',

'encrypt' => FALSE,

'compress' => FALSE,

'stricton' => FALSE,

'failover' => array(),

'save_queries' => TRUE

);

Jadi pada bagian ini yang perlu kalian tambah adalah username dan databasenya.

5. Masuk ke folder controller, buat file nama Auth.php (pastikan nama controller dimulai dengan huruf besar di awal kata).

<?php

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

class Auth extends CI_Controller {

public function __construct()

{

parent::__construct();

$this->load->model('M_user','user');

}

public function index()

{

$this->load->view('login');

}

public function checklogin()

{

$postData = $this->input->post();

$data = [

'email'=>$postData['email'],

'password'=>md5($postData['password'])

];

//check account sesuai dengan inputan form

$checkUser = $this->user->getuserlogin($data);

if($checkUser){

//jika berhasil login akan di alihkan ke halaman dashboard\

$sessi=[

'username'=>$checkUser->nama,

'email'=>$checkUser->email,

'login'=>TRUE

];

$this->session->set_userdata($sessi);

redirect(base_url().'dashboard');

}else{

//jika tidak login akan dialihkan ke form login

$this->session->set_flashdata('error', 'Username dan Password Salah');

redirect(base_url());

}

public function logout()

{

$sessi = [

'username' =>"",

'email'=>"",

'login'=>FALSE

];

$this->session->unset_userdata($sessi);

$this->session->sess_destroy();

redirect(base_url());

}

/* End of file Auth.php and path \application\controllers\Auth.php */

6. folder View, buatlah sebuah file dengan nama login.php, kemudian isi sourcecodenya seperti dibawah ini :

<?php $base_url = base_url() . 'assets/'; ?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="description" content="">

<meta name="author" content="">

<title>SB Admin 2 - Login</title>

<link href="<?= $base_url ?>vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<link href="<?= $base_url ?>css/sb-admin-2.min.css" rel="stylesheet">

<!-- <style>

.bg-login-image {

background: url(<?= $base_url ?>img/logo.jpg);

background-position: center;

background-size: cover;

}

</style> -->

</head>

<body class="bg-gradient-primary">

<div class="container">

<div class="row justify-content-center">

<div class="col-xl-10 col-lg-12 col-md-9">

<div class="card o-hidden border-0 shadow-lg my-5">

<div class="card-body p-0">

<div class="row">

<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>

<div class="col-lg-6">

<div class="p-5">

<div class="text-center">

<h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>

<?php if($this->session->flashdata('error')) :?>

<div class="alert alert-danger" role="alert">

<?= $this->session->flashdata('error')?>

</div>

<?php endif ?>

</div>

<form class="user" action="<?= base_url('auth/checklogin') ?>" method="POST">

<div class="form-group">

<input type="email" name="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address...">

</div>

<div class="form-group">

<input type="password" name="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password">

</div>

<div class="form-group">

<div class="custom-control custom-checkbox small">

<input type="checkbox" class="custom-control-input" id="customCheck">

<label class="custom-control-label" for="customCheck">Remember

Me</label>

</div>

<!-- <a href="index.html" class="btn btn-primary btn-user btn-block">

Login

</a> -->

<button class="btn btn-primary btn-user btn-block">Login</button>

<hr>

<a href="index.html" class="btn btn-google btn-user btn-block">

<i class="fab fa-google fa-fw"></i> Login with Google

</a>

<a href="index.html" class="btn btn-facebook btn-user btn-block">

<i class="fab fa-facebook-f fa-fw"></i> Login with Facebook

</a>

</form>

<hr>

<div class="text-center">

<a class="small" href="forgot-password.html">Forgot Password?</a>

</div>

<div class="text-center">

<a class="small" href="register.html">Create an Account!</a>

</div>

<script src="<?= $base_url ?>vendor/jquery/jquery.min.js"></script>

<script src="<?= $base_url ?>vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<script src="<?= $base_url ?>vendor/jquery-easing/jquery.easing.min.js"></script>

<script src="<?= $base_url ?>js/sb-admin-2.min.js"></script>

</body>

</html>

tampilan halaman login seperti gambar dibawah ini.

B. Pembuatan Halaman Dashboard selesai pembuatan halaman login sekarang kita berpindah ke halaman dashboard.

1. Buat folder controller beri nama dengan Dashboard.php, kemudian isi source codenya seperti dibawah ini

<?php

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

class Dashboard extends CI_Controller {

public function __construct()

{

parent::__construct();

if($this->session->userdata('login')!=TRUE && $this->session->userdata('username') == "")

{

redirect(base_url());

}

public function index()

{

$data['pages']='pages/dashboard';

$this->load->view('template',$data);

}

//end of dashboard.php

2. Buatlah folder view beri nama folder pages, buat file dengan nama dashboard.php

<div class="container-fluid">

<div class="d-sm-flex align-items-center justify-content-between mb-4">

<h1 class="h3 mb-0 text-gray-800">Dashboard</h1>

<a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i

class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>

</div>

<div class="row">

<div class="col-xl-3 col-md-6 mb-4">

<div class="card border-left-primary shadow h-100 py-2">

<div class="card-body">

<div class="row no-gutters align-items-center">

<div class="col mr-2">

<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">

Earnings (Monthly)</div>

<div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>

</div>

<div class="col-auto">

<i class="fas fa-calendar fa-2x text-gray-300"></i>

</div>

<div class="col-xl-3 col-md-6 mb-4">

<div class="card border-left-success shadow h-100 py-2">

<div class="card-body">

<div class="row no-gutters align-items-center">

<div class="col mr-2">

<div class="text-xs font-weight-bold text-success text-uppercase mb-1">

Earnings (Annual)</div>

<div class="h5 mb-0 font-weight-bold text-gray-800">$215,000</div>

</div>

<div class="col-auto">

<i class="fas fa-dollar-sign fa-2x text-gray-300"></i>

</div>

<div class="col-xl-3 col-md-6 mb-4">

<div class="card border-left-info shadow h-100 py-2">

<div class="card-body">

<div class="row no-gutters align-items-center">

<div class="col mr-2">

<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Tasks

</div>

<div class="row no-gutters align-items-center">

<div class="col-auto">

<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">50%</div>

</div>

<div class="col">

<div class="progress progress-sm mr-2">

<div class="progress-bar bg-info" role="progressbar" style="width: 50%"

aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>

</div>

<div class="col-auto">

<i class="fas fa-clipboard-list fa-2x text-gray-300"></i>

</div>

<div class="col-xl-3 col-md-6 mb-4">

<div class="card border-left-warning shadow h-100 py-2">

<div class="card-body">

<div class="row no-gutters align-items-center">

<div class="col mr-2">

<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">

Pending Requests</div>

<div class="h5 mb-0 font-weight-bold text-gray-800">18</div>

</div>

<div class="col-auto">

<i class="fas fa-comments fa-2x text-gray-300"></i>

</div>

<div class="row">

<div class="col-xl-8 col-lg-7">

<div class="card shadow mb-4">

<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">

<h6 class="m-0 font-weight-bold text-primary">Earnings Overview</h6>

<div class="dropdown no-arrow">

<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"

aria-haspopup="true" aria-expanded="false">

<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>

</a>

<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"

aria-labelledby="dropdownMenuLink">

<div class="dropdown-header">Dropdown Header:</div>

<a class="dropdown-item" href="#">Action</a>

<a class="dropdown-item" href="#">Another action</a>

<div class="dropdown-divider"></div>

<a class="dropdown-item" href="#">Something else here</a>

</div>

<div class="card-body">

<div class="chart-area">

<canvas id="myAreaChart"></canvas>

</div>

<div class="col-xl-4 col-lg-5">

<div class="card shadow mb-4">

<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">

<h6 class="m-0 font-weight-bold text-primary">Revenue Sources</h6>

<div class="dropdown no-arrow">

<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"

aria-haspopup="true" aria-expanded="false">

<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>

</a>

<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"

aria-labelledby="dropdownMenuLink">

<div class="dropdown-header">Dropdown Header:</div>

<a class="dropdown-item" href="#">Action</a>

<a class="dropdown-item" href="#">Another action</a>

<div class="dropdown-divider"></div>

<a class="dropdown-item" href="#">Something else here</a>

</div>

<div class="card-body">

<div class="chart-pie pt-4 pb-2">

<canvas id="myPieChart"></canvas>

</div>

<div class="mt-4 text-center small">

<span class="mr-2">

<i class="fas fa-circle text-primary"></i> Direct

</span>

<span class="mr-2">

<i class="fas fa-circle text-success"></i> Social

</span>

<span class="mr-2">

<i class="fas fa-circle text-info"></i> Referral

</span>

</div>

<div class="row">

<div class="col-lg-6 mb-4">

<div class="card shadow mb-4">

<div class="card-header py-3">

<h6 class="m-0 font-weight-bold text-primary">Projects</h6>

</div>

<div class="card-body">

<h4 class="small font-weight-bold">Server Migration <span class="float-right">20%</span></h4>

<div class="progress mb-4">

<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20"

aria-valuemin="0" aria-valuemax="100"></div>

</div>

<h4 class="small font-weight-bold">Sales Tracking <span class="float-right">40%</span></h4>

<div class="progress mb-4">

<div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="40"

aria-valuemin="0" aria-valuemax="100"></div>

</div>

<h4 class="small font-weight-bold">Customer Database <span class="float-right">60%</span></h4>

<div class="progress mb-4">

<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60"

aria-valuemin="0" aria-valuemax="100"></div>

</div>

<h4 class="small font-weight-bold">Payout Details <span class="float-right">80%</span></h4>

<div class="progress mb-4">

<div class="progress-bar bg-info" role="progressbar" style="width: 80%" aria-valuenow="80"

aria-valuemin="0" aria-valuemax="100"></div>

</div>

<h4 class="small font-weight-bold">Account Setup <span class="float-right">Complete!</span></h4>

<div class="progress">

<div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100"

aria-valuemin="0" aria-valuemax="100"></div>

</div>

<div class="row">

<div class="col-lg-6 mb-4">

<div class="card bg-primary text-white shadow">

<div class="card-body">

Primary

<div class="text-white-50 small">#4e73df</div>

</div>

<div class="col-lg-6 mb-4">

<div class="card bg-success text-white shadow">

<div class="card-body">

Success

<div class="text-white-50 small">#1cc88a</div>

</div>

<div class="col-lg-6 mb-4">

<div class="card bg-info text-white shadow">

<div class="card-body">

Info

<div class="text-white-50 small">#36b9cc</div>

</div>

<div class="col-lg-6 mb-4">

<div class="card bg-warning text-white shadow">

<div class="card-body">

Warning

<div class="text-white-50 small">#f6c23e</div>

</div>

<div class="col-lg-6 mb-4">

<div class="card bg-danger text-white shadow">

<div class="card-body">

Danger

<div class="text-white-50 small">#e74a3b</div>

</div>

<div class="col-lg-6 mb-4">

<div class="card bg-secondary text-white shadow">

<div class="card-body">

Secondary

<div class="text-white-50 small">#858796</div>

</div>

<div class="col-lg-6 mb-4">

<div class="card bg-light text-black shadow">

<div class="card-body">

Light

<div class="text-black-50 small">#f8f9fc</div>

</div>

<div class="col-lg-6 mb-4">

<div class="card bg-dark text-white shadow">

<div class="card-body">

Dark

<div class="text-white-50 small">#5a5c69</div>

</div>

<div class="col-lg-6 mb-4">

<div class="card shadow mb-4">

<div class="card-header py-3">

<h6 class="m-0 font-weight-bold text-primary">Illustrations</h6>

</div>

<div class="card-body">

<div class="text-center">

<img class="img-fluid px-3 px-sm-4 mt-3 mb-4" style="width: 25rem;"

src="img/undraw_posting_photo.svg" alt="...">

</div>

<p>Add some quality, svg illustrations to your project courtesy of <a target="_blank" rel="nofollow"

href="https://undraw.co/">unDraw</a>, a

constantly updated collection of beautiful svg images that you can use

completely free and without attribution!</p>

<a target="_blank" rel="nofollow" href="https://undraw.co/">Browse Illustrations on

unDraw →</a>

</div>

<div class="card shadow mb-4">

<div class="card-header py-3">

<h6 class="m-0 font-weight-bold text-primary">Development Approach</h6>

</div>

<div class="card-body">

<p>SB Admin 2 makes extensive use of Bootstrap 4 utility classes in order to reduce

CSS bloat and poor page performance. Custom CSS classes are used to create

custom components and custom utility classes.</p>

<p class="mb-0">Before working with this theme, you should become familiar with the

Bootstrap framework, especially the utility classes.</p>

</div>

</div

3. Buatlah folder view dengan nama folder template kemudian buat lah file di dalamnya header.php, javascript.php, sidebar.php, stylesheet.php.

4. Bagian view/template/header.php isi sourcecode-nya seperti dibawah ini :

<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">

<i class="fa fa-bars"></i>

</button>

<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">

<div class="input-group">

<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..."

aria-label="Search" aria-describedby="basic-addon2">

<div class="input-group-append">

<button class="btn btn-primary" type="button">

<i class="fas fa-search fa-sm"></i>

</button>

</div>

</form>

<ul class="navbar-nav ml-auto">

<li class="nav-item dropdown no-arrow d-sm-none">

<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown"

aria-haspopup="true" aria-expanded="false">

<i class="fas fa-search fa-fw"></i>

</a>

<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"

aria-labelledby="searchDropdown">

<form class="form-inline mr-auto w-100 navbar-search">

<div class="input-group">

<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..."

aria-label="Search" aria-describedby="basic-addon2">

<div class="input-group-append">

<button class="btn btn-primary" type="button">

<i class="fas fa-search fa-sm"></i>

</button>

</div>

</form>

</div>

</li>

<li class="nav-item dropdown no-arrow mx-1">

<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown"

aria-haspopup="true" aria-expanded="false">

<i class="fas fa-bell fa-fw"></i>

<span class="badge badge-danger badge-counter">3+</span>

</a>

<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"

aria-labelledby="alertsDropdown">

<h6 class="dropdown-header">

Alerts Center

</h6>

<a class="dropdown-item d-flex align-items-center" href="#">

<div class="mr-3">

<div class="icon-circle bg-primary">

<i class="fas fa-file-alt text-white"></i>

</div>

<div>

<div class="small text-gray-500">December 12, 2019</div>

<span class="font-weight-bold">A new monthly report is ready to download!</span>

</div>

</a>

<a class="dropdown-item d-flex align-items-center" href="#">

<div class="mr-3">

<div class="icon-circle bg-success">

<i class="fas fa-donate text-white"></i>

</div>

<div>

<div class="small text-gray-500">December 7, 2019</div>

$290.29 has been deposited into your account!

</div>

</a>

<a class="dropdown-item d-flex align-items-center" href="#">

<div class="mr-3">

<div class="icon-circle bg-warning">

<i class="fas fa-exclamation-triangle text-white"></i>

</div>

<div>

<div class="small text-gray-500">December 2, 2019</div>

Spending Alert: We've noticed unusually high spending for your account.

</div>

</a>

<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>

</div>

</li>

<li class="nav-item dropdown no-arrow mx-1">

<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown"

aria-haspopup="true" aria-expanded="false">

<i class="fas fa-envelope fa-fw"></i>

<span class="badge badge-danger badge-counter">7</span>

</a>

<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"

aria-labelledby="messagesDropdown">

<h6 class="dropdown-header">

Message Center

</h6>

<a class="dropdown-item d-flex align-items-center" href="#">

<div class="dropdown-list-image mr-3">

<img class="rounded-circle" src="img/undraw_profile_1.svg" alt="...">

<div class="status-indicator bg-success"></div>

</div>

<div class="font-weight-bold">

<div class="text-truncate">Hi there! I am wondering if you can help me with a

problem I've been having.</div>

<div class="small text-gray-500">Emily Fowler · 58m</div>

</div>

</a>

<a class="dropdown-item d-flex align-items-center" href="#">

<div class="dropdown-list-image mr-3">

<img class="rounded-circle" src="img/undraw_profile_2.svg" alt="...">

<div class="status-indicator"></div>

</div>

<div>

<div class="text-truncate">I have the photos that you ordered last month, how

would you like them sent to you?</div>

<div class="small text-gray-500">Jae Chun · 1d</div>

</div>

</a>

<a class="dropdown-item d-flex align-items-center" href="#">

<div class="dropdown-list-image mr-3">

<img class="rounded-circle" src="img/undraw_profile_3.svg" alt="...">

<div class="status-indicator bg-warning"></div>

</div>

<div>

<div class="text-truncate">Last month's report looks great, I am very happy with

the progress so far, keep up the good work!</div>

<div class="small text-gray-500">Morgan Alvarez · 2d</div>

</div>

</a>

<a class="dropdown-item d-flex align-items-center" href="#">

<div class="dropdown-list-image mr-3">

<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60" alt="...">

<div class="status-indicator bg-success"></div>

</div>

<div>

<div class="text-truncate">Am I a good boy? The reason I ask is because someone

told me that people say this to all dogs, even if they aren't good...</div>

<div class="small text-gray-500">Chicken the Dog · 2w</div>

</div>

</a>

<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>

</div>

</li>

<div class="topbar-divider d-none d-sm-block"></div>

<li class="nav-item dropdown no-arrow">

<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"

aria-haspopup="true" aria-expanded="false">

<span class="mr-2 d-none d-lg-inline text-gray-600 small">

<?= $this->session->userdata('username') ?>

</span>

<img class="img-profile rounded-circle" src="<?= $base_url ?>img/undraw_profile.svg">

</a>

<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">

<a class="dropdown-item" href="#">

<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>

Profile

</a>

<a class="dropdown-item" href="#">

<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>

Settings

</a>

<a class="dropdown-item" href="#">

<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>

Activity Log

</a>

<div class="dropdown-divider"></div>

<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">

<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>

Logout

</a>

</div>

</li>

</ul>

</nav>

5. view/template/javascript.php isi sourcecode-nya seperti dibawah ini :

<script src="<?= $base_url ?>vendor/jquery/jquery.min.js"></script>

<script src="<?= $base_url ?>vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<script src="<?= $base_url ?>vendor/jquery-easing/jquery.easing.min.js"></script>

<script src="<?= $base_url ?>js/sb-admin-2.min.js"></script>

<script src="<?= $base_url ?>vendor/chart.js/Chart.min.js"></script>

<script src="<?= $base_url ?>js/demo/chart-area-demo.js"></script>

<script src="<?= $base_url ?>js/demo/chart-pie-demo.js"></script>

6. view/template/sidebar.php isi sourcecode-nya seperti dibawah ini :

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">

<div class="sidebar-brand-icon rotate-n-15">

<i class="fas fa-laugh-wink"></i>

</div>

<div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>

</a>

<hr class="sidebar-divider my-0">

<li class="nav-item active">

<a class="nav-link" href="index.html">

<i class="fas fa-fw fa-tachometer-alt"></i>

<span>Dashboard</span></a>

</li>

<hr class="sidebar-divider">

<div class="sidebar-heading">

Interface

</div>

<li class="nav-item">

<a class="nav-link" href="<?= base_url() ?>admin/user">

<i class="fas fa-fw fa-cog"></i>

<span>User Managements</span>

</a>

</li>

<hr class="sidebar-divider">

<div class="text-center d-none d-md-inline">

<button class="rounded-circle border-0" id="sidebarToggle"></button>

</div>

</ul>

7. view/template/sidebar.php isi sourcecode-nya seperti dibawah ini :

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">

<div class="sidebar-brand-icon rotate-n-15">

<i class="fas fa-laugh-wink"></i>

</div>

<div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>

</a>

<hr class="sidebar-divider my-0">

<li class="nav-item active">

<a class="nav-link" href="index.html">

<i class="fas fa-fw fa-tachometer-alt"></i>

<span>Dashboard</span></a>

</li>

<hr class="sidebar-divider">

<div class="sidebar-heading">

Interface

</div>

<li class="nav-item">

<a class="nav-link" href="<?= base_url() ?>admin/user">

<i class="fas fa-fw fa-cog"></i>

<span>User Managements</span>

</a>

</li>

<hr class="sidebar-divider">

<div class="text-center d-none d-md-inline">

<button class="rounded-circle border-0" id="sidebarToggle"></button>

</div>

</ul>

8. view/template/stylesheet.php isi sourcecode-nya seperti dibawah ini :

<link href="<?= $base_url ?>vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

<link

href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"

rel="stylesheet">

<link href="<?= $base_url ?>css/sb-admin-2.min.css" rel="stylesheet">

9. Lalu buatlah file baru pada folder view dengan nama template.php

<?php $base_url = base_url() . 'assets/' ?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="description" content="">

<meta name="author" content="">

<title>SB Admin 2 - Dashboard</title>

<?php include_once "template/stylesheet.php" ?>

</head>

<body id="page-top">

<div id="wrapper">

<?php include_once "template/sidebar.php" ?>

<div id="content-wrapper" class="d-flex flex-column">

<div id="content">

<?php include_once "template/header.php" ?>

<?php $this->load->view($pages) ?>

</div>

<footer class="sticky-footer bg-white">

<div class="container my-auto">

<div class="copyright text-center my-auto">

</div>

</footer>

</div>

</div>

<a class="scroll-to-top rounded" href="#page-top">

<i class="fas fa-angle-up"></i>

</a>

<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"

aria-hidden="true">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>

<button class="close" type="button" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">×</span>

</button>

</div>

<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>

<div class="modal-footer">

<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>

<a class="btn btn-primary" href="<?= base_url() ?>auth/logout">Logout</a>

</div>

<?php include_once "template/javascript.php" ?>

</body>

</html>

Cari Blog Ini

Informatika