Membuat halaman dashboard di codeigniter

Membuat halaman dashboard di codeigniter, Halo semuanya, kita kembali lagi melanjutkan tutorial membuat web dengan codeigniter dan sekarang kita memasuki tahapan merancang template admin part ke 3 ya. Buat kalian yang baru saja nemu artikel ini, dan jika ingin mengikuti saya sarankan kalian baca dulu artikel sebelum sebelumnya ya, biar nanti bisa mengikuti urutannya.

Membuat halaman dashboard

Sekarang kalian buka folder Controllers yang ada di folder application, lalu buat folder baru dengan nama admin. Nah di folder admin inilah kita nantinya akan menyimpan file-file controler biar rapi.
Sekarang buat file baru di dalam folder admin dengan nama Dahsboard.php lalu copy kode php berikut ini

Read More
<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Dashboard extends CI_Controller
{
    //load data
    public function __construct()
    {
        parent::__construct();
    }

    //listing data user
    public function index()
    {
        $data = array(
            'title'     => 'Welcome To Admin',
            'content'   => 'backend/dashboard/dashboard'
        );
        $this->load->view('backend/layout/wrapp', $data, FALSE);
    }
}

Setelah kita membuat controller sekarang kita ke folde views/backend lalu buat folder dashboard di dalam backend kemudian tambahkan file dashboard.php

<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
</div>
<div class="row">
    <div class="col-xl-4 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">Total Artikel</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">790 Post</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-newspaper fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4 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">Total Kategori</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">6 Kategori</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-tag fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4 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-success text-uppercase mb-1">Total User</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">6 User</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-user fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Sekarang coba Cek dengan mengakses url http://localhost/belajarweb/admin/dashboard maka tampilannya akan seperti gambar di bawah ini

Membuat halaman dashboard

Jika belum sama berarti ada yang tertinggal, silahkan cek kembali tutorial dari awal.

Buat kamu yang sedang belajar desain grafis kamu bisa belajar secara interaktif melalui Channel youtube Tutorial desain Grafis

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *