Iklan_1

Education & Financial Konsulting

Education & Financial Konsulting
Education & Financial Konsulting

Agrobisnis & Pariwisata

Agrobisnis & Pariwisata
Agrobisnis & Pariwisata

Digital & Network Development

Digital & Network Development
Digital & Network Development

#1 Membuat Dashboard dengan Code Igniter dan Bootstrap

Silahkan ikut langkah berikut:



*/Tahap Persiapan/*
Download CodeIgniter => codeigniter.com
Download startbootstrap-sb-admin-2-gh-pages => https://startbootstrap.com/themes/sb-admin-2/ => download free

Ekstrak => CodeIgniter =>Rename "sesuaikan dengan nama yang dinginkan, misal infokampus"
pindahkan folder infokampus ke =>xampp =>htdocs
check di brouser => localhost/infokampus
pindahkan folder infokampus ke text editor

*/configurasi/*
buka folder application => config => autoload.php
atur pada bagian :
$autoload['libraries'] = array('database','session','form_validation');
atur pada bagian :
$autoload['helper'] = array('url','form','security');
buka folder application => config => config.php
atur pada bagian :
$config['base_url'] = 'http://localhost/infokampus/';
save

*/membuat template dasboard/*
buka folder startbootstrap-sb-admin-2-gh-pages = copy semua folder yang ada didalam mulai dari CSS sampai vendor
buat folder baru dengan nama assets => paste
buka folder startbootstrap-sb-admin-2-gh-pages => index.html
klik kanan => klik kanan =>view page source
ctrl A => copy
buka folder application => views => new folder => administrator
buka folder application => views => new folder => templates_administrator

pada folder administrator => new file =>paste => save dengan nama dashboard.php
cut mulai dari <!DOCTYPE html> sampai </head>
pada folder templates_administrator => new file =>paste
save dengan nama header.php

cut mulai dari <body id="page-top"> sampai <!-- End of Topbar -->
pada folder templates_administrator => new file =>paste
save dengan nama sidebar.php

cut mulai dari <!-- Bootstrap core JavaScript--> sampai </html>
pada folder templates_administrator => new file =>paste
save dengan nama footer.php

*/cnfigurasi controler/*
buka folder application => controllers => new folder => administrator
pada folder administrator => new file => save =>dashboard.php

ketik skrip berikut:
<?php

class Dashboard extends CI_Controller{
public function index ()
{
$this->load->view('templates_administrator/header');
$this->load->view('templates_administrator/sidebar');
$this->load->view('administrator/dashboard');
$this->load->view('templates_administrator/footer');
}

}

panggil =>  http://localhost/infokampus/index.php/administrator/dashboard kemudian enter

buka web codeigniter.com => pilih menu documentation => pilih  Online UG versi 3

seaerch => ketik  htaccess => pilih CodeIgniter URLs

copy=>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

pada folder infokampus =>new file => paste =>save dengan nama .htaccess
panggil =>  http://localhost/infokampus/administrator/dashboard kemudian enter

*/configurasi link css/*
buka file header.php
lakukan perubahan pada link dengan nama <?php echo base_url ()?>assets/vendor/ seperti contoh dibawa:
<link href="<?php echo base_url ()?>assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="<?php echo base_url ()?>assets/css/sb-admin-2.min.css" rel="stylesheet">

buka file footer.php
lakukan perubahan pada link dengan nama <?php echo base_url ()?>assets/vendor/ seperti contoh dibawa:
<script src="<?php echo base_url ()?>assets/vendor/jquery/jquery.min.js"></script>
  <script src="<?php echo base_url ()?>assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Core plugin JavaScript-->
  <script src="<?php echo base_url ()?>assets/vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom scripts for all pages-->
  <script src="<?php echo base_url ()?>assets/js/sb-admin-2.min.js"></script>

  <!-- Page level plugins -->
  <script src="<?php echo base_url ()?>assets/vendor/chart.js/Chart.min.js"></script>

  <!-- Page level custom scripts -->
  <script src="<?php echo base_url ()?>assets/js/demo/chart-area-demo.js"></script>
  <script src="<?php echo base_url ()?>assets/js/demo/chart-pie-demo.js"></script>

=> chcek link css <=

*/modifikasi tampilan sidebar/*
lakukan perubahan pada:
<div class="sidebar-brand-text mx-1">Info Kampus</div>
merubah <i class="fas fa-laugh-wink"></i> => searching university di brousher https://fontawesome.com/icons?d=gallery
blok <i class="fas fa-laugh-wink"></i> paste <i class="fas fa-university"></i>

sesuaikan dengan skrip berikut:

<div class="sidebar-brand-icon">
          <i class="fas fa-university"></i>
        </div>
        <div class="sidebar-brand-text mx-1">Info Kampus</div>

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

<i class="fas fa-university"></i>
          <span>Akademik</span>
        </a>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
          <div class="bg-white py-2 collapse-inner rounded">
            <h6 class="collapse-header">Submenu Akademik:</h6>
            <a class="collapse-item" href="buttons.html">Jurusan</a>
            <a class="collapse-item" href="cards.html">Program Studi</a>
            <a class="collapse-item" href="cards.html">Mata Kuliah</a><a class="collapse-item" href="cards.html">Mahasiswa</a><a class="collapse-item" href="cards.html">Tahun Akademik</a><a class="collapse-item" href="cards.html">KRS</a><a class="collapse-item" href="cards.html">Input Nilai</a>
            <a class="collapse-item" href="cards.html">KHS</a><a class="collapse-item" href="cards.html">Cetak Transkip</a>
            <a class="collapse-item" href="cards.html">Dosen</a>
          </div>
        </div>

<span>Pengaturan</span>
        </a>
        <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
          <div class="bg-white py-2 collapse-inner rounded">
            <h6 class="collapse-header">Sub-Menu Pengaturan:</h6>
            <a class="collapse-item" href="utilities-color.html">User</a>
            <a class="collapse-item" href="utilities-border.html">Menu</a>

<span>Info Kampus</span>
        </a>
        <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
          <div class="bg-white py-2 collapse-inner rounded">
            <h6 class="collapse-header">Sub-Menu Info Kampus</h6>
            <a class="collapse-item" href="login.html">Identitas</a>
            <a class="collapse-item" href="register.html">Kategori</a>
            <a class="collapse-item" href="forgot-password.html">Informasi Kampus</a>
            <a class="collapse-item" href="404.html">Tentang Kampus</a>
            <a class="collapse-item" href="blank.html">Fasilitas</a>
            <a class="collapse-item" href="404.html">Materi Kuliah</a>
            <a class="collapse-item" href="404.html">Gallery</a>
            <a class="collapse-item" href="404.html">Kontak</a>


<i class="fas fa-sign-out-alt"></i>
          <span>Logout</span></a>

*/mengatur dashboard/*
 hapus <div class="row" earning overview sampai </div> utility classes


Share Post:

Yogi Iskandar


Yogi Iskandar

Yogi Iskandar

Sponsor By:

SUBSCRIBER


SUBSCRIBER

Iklan_Foot