Membuat Halaman Dashboar Di Codeigneter

Tutorial Membuat Halaman Dashboar Di Codeigneter

Assalamualaikum warahmatullahi wabarakatuh

Hallo guyss... apa kabar? Semoga kalian sehat selalu ya

Baiklah di sini saya akan membahas bagaimana sih cara membuat Halaman dasboar dari Codeigneter. Berikut langkah langkah pembuatan nya

1. Membuat menu login, aktifkan terlebih dahulu xampp klik star pada apache dan mysql.

2. Buat Database menggunakan php my admin dengan nama seperti gambar, untuk email buat sebagai primary key.

3. Kemudian pada file config lakukan Setting, Pada bagian base URL silahkan copy url belajarcodeigniter.test

4. Pada config buat setinggan dengan sourcode dan format 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();

5. Langkah selanjutnya kita masuk ke folder config, lalu pilih file database.php. pada file ini kita menambahkan username dan password 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

);

6. Lalu masuk ke folder controller, buat file dengan nama Auth.php. Buatlah sourcecodenya seperti dibawah ini.

<?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 */

<?php $base_url = base_url() . 'assets/'; ?>
<!-- http://nama-domain/assets/ -->
<!-- $base_url -> nama variabel untuk menampung home dir 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>

    <!-- Custom fonts for this template-->
    <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"> 

    <!-- Custom styles for this template-->
    <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">

        <!-- Outer Row -->
        <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">
                        <!-- Nested Row within Card Body -->
                        <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>
                                        </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>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>

    <!-- Bootstrap core JavaScript-->
    <script src="<?= $base_url ?>vendor/jquery/jquery.min.js"></script>
    <script src="<?= $base_url ?>vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

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

    <!-- Custom scripts for all pages-->
    <script src="<?= $base_url ?>js/sb-admin-2.min.js"></script>

</body>

</html>

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

<!DOCTYPE html>

<head>

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

<!-- <style>

.bg-login-image {

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

background-position: center;

background-size: cover;

}

</style> -->

</head>

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

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

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

</div>

<?php endif ?>

</div>

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

</div>

</div>

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

Me</label>

</div>

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

</a> -->

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

<hr>

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

</a>

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

</a>

</form>

<hr>

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

</div>

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

</div>

</body>

</html>

8. Maka hasil tampilan halaman login akan menjadi seperti ini.

9. Selanjutnya kita akan membuat halaman dashboar. Pertama kita buat di 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

10. Buatlah di dalam folder view beri nama folder pages, kemudian buat file dengan nama dashboard.php dengan sourcode sebagai berikut.

Light

</div>

Dark

</div>

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

</div>

<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>

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

</div>

<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

11. Buatlah kembali di dalam folder view dengan nama folder template dan buat beberapa file yang pertama header.php isi sourcecode-nya seperti dibawah ini :

</button>

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

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

</button>

</div>

</form>

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

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

</a>

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

aria-labelledby="searchDropdown">

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

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

</button>

</div>

</form>

</div>

</li>

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

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

</a>

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

aria-labelledby="alertsDropdown">

Alerts Center

</h6>

</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>

</div>

<div>

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

$290.29 has been deposited into your account!

</div>

</a>

</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>

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

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

</a>

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

aria-labelledby="messagesDropdown">

Message Center

</h6>

</div>

<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>

</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>

</a>

</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>

</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>

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

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

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

</span>

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

</a>

Profile

</a>

Settings

</a>

Activity Log

</a>

Logout

</a>

</div>

</li>

</ul>

</nav>

12. Kemudian Buat file javascript.php dengan sourcecode seperti dibawah ini.

13. Selanjutnya file sidebar.php isi sourcecode-nya seperti dibawah ini :

</div>

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

</a>

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

</li>

Interface

</div>

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

<span>User Managements</span>

</a>

</li>

</div>

</ul>

14. File stylesheet.php dengan isi sourcecode-nya seperti dibawah ini.

<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">

15. Terakhir File dengan nama template.php dengan isi sourcecode-nya seperti dibawah ini.

nama template.php

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

<!DOCTYPE html>

<head>

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

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

</head>

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

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

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

</div>

</div>

</footer>

</div>

</div>

</a>

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

aria-hidden="true">

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

</button>

</div>

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

<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>

Nah itu lah tadi tutorial membuat dashboard di codeigneter.

Semoga penjelasan ini dapat di pahami dan jika ada kesalahan dalam penjelasan penulis mohon maaf karena penulis juga masih banyak belajar

Saya mengucapkan terima kasih dan sampai jumpaa....

Dadah guysss.......

Cari Blog Ini

Rahmadina

Membuat Halaman Dashboar Di Codeigneter

Komentar

Posting Komentar