Ekspresi | Belajar HTML dan PHP | Sunda | Kontak | Gmail | Uang Adsense
Kuliah Sistem Informasi,
PMB Online STMIK Jabar 2020
STMIK JABAR
LP3I Tasikmalaya
STAI Al-Falah
Belajar Pemrograman PHP, MySQL, Framework CI, Domain, Hosting dan CMS Wordpress
Inkubator | Daftar Isi | Bisnis Bitcoin | Tools Penting | PrivacyPolicy | Inggris Arab

Thursday, August 6, 2020

Membuat Desain Template Dengan CI (Web 2-7: CI 2)

Web 2-7: CI 2 Membuat Template

Sebelum mempraktikkan tutorial ini, kita harus menyelesaikan dulu tutorial Web 2-5: CI 2 Menggunakan Bootstrap.

1.       Pastikan CI sudah disimpan di htdocs
2.       Buka direktori application/views/admin
3.       Buat folder  _partials
4.       Di folder _partials, buat file atas.php
5.       Copy script berikut ini:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

<title><?php echo SITE_NAME .": ". ucfirst($this->uri->segment(1)) ." - ". ucfirst($this->uri->segment(2)) ?></title>

<!-- Bootstrap core CSS-->
<link href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css') ?>" rel="stylesheet">

<!-- Custom fonts for this template-->
<link href="<?php echo base_url('assets/fontawesome-free/css/all.min.css') ?>" rel="stylesheet" type="text/css">

<!-- Page level plugin CSS-->
<link href="<?php echo base_url('assets/datatables/dataTables.bootstrap4.css') ?>" rel="stylesheet">

<!-- Custom styles for this template-->
<link href="<?php echo base_url('css/sb-admin.css') ?>" rel="stylesheet">

6.       Di folder _partials, buat file navigasi.php
7.       Ketik script berikut:
<nav class="navbar navbar-expand navbar-dark bg-success static-top">

    <a class="navbar-brand mr-1" href="<?php echo site_url('admin') ?>"><?php echo SITE_NAME ?></a>

    <button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
        <i class="fas fa-bars"></i>
    </button>

    <!-- Navbar Search -->
    <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
            <div class="input-group-append">
                <button class="btn btn-light" type="button">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
    </form>

    <!-- Navbar -->
    <ul class="navbar-nav ml-auto ml-md-0">
        <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">9+</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
                <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>
        </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">7</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="messagesDropdown">
                <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>
        </li>

        <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">
                <i class="fas fa-user-circle fa-fw"></i> Admin
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                <a class="dropdown-item" href="#">Settings</a>
                <a class="dropdown-item" href="#">Activity Log</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Logout</a>
            </div>
        </li>
    </ul>

</nav>

8.       Di folder _partials, buat file kiri.php
9.       Ketik script berikut:
<!-- Sidebar -->
<ul class="sidebar navbar-nav">
    <li class="nav-item <?php echo $this->uri->segment(2) == '' ? 'active': '' ?>">
        <a class="nav-link" href="<?php echo site_url('admin') ?>">
            <i class="fas fa-fw fa-tachometer-alt"></i>
            <span>Overview</span>
        </a>
    </li>
    <li class="nav-item dropdown <?php echo $this->uri->segment(2) == 'products' ? 'active': '' ?>">
        <a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
            <i class="fas fa-fw fa-boxes"></i>
            <span>Products</span>
        </a>
        <div class="dropdown-menu" aria-labelledby="pagesDropdown">
            <a class="dropdown-item" href="<?php echo site_url('admin/products/add') ?>">New Product</a>
            <a class="dropdown-item" href="<?php echo site_url('admin/products') ?>">List Product</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fas fa-fw fa-users"></i>
            <span>Users</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fas fa-fw fa-cog"></i>
            <span>Settings</span></a>
    </li>
</ul>

10.   Di folder _partials, buat file breadcrumb.php
11.   Ketik script berikut:
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<?php foreach ($this->uri->segments as $segment): ?>
       <?php
                       $url = substr($this->uri->uri_string, 0, strpos($this->uri->uri_string, $segment)) . $segment;
                       $is_active =  $url == $this->uri->uri_string;
       ?>


       <li class="breadcrumb-item <?php echo $is_active ? 'active': '' ?>">
                       <?php if($is_active): ?>
                                       <?php echo ucfirst($segment) ?>
                       <?php else: ?>
                                       <a href="<?php echo site_url($url) ?>"><?php echo ucfirst($segment) ?></a>
                       <?php endif; ?>
       </li>
<?php endforeach; ?>
</ol>

12.   Di folder _partials, buat file scrollatas.php
13.   Ketik script berikut:
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
       <i class="fas fa-angle-up"></i>
</a>

14.   Di folder _partials, buat file bawah.php
15.   Ketik script berikut:
<!-- Sticky Footer -->
<footer class="sticky-footer">
  <div class="container my-auto">
    <div class="copyright text-center my-auto">
      <span>Copyright © <?php echo SITE_NAME ." ". Date('Y') ?></span>
    </div>
  </div>
</footer>

16.   Di folder _partials, buat file modal.php
17.   Ketik script berikut:
<!-- Logout Modal-->
<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="login.html">Logout</a>
      </div>
    </div>
  </div>
</div>

18.   Di folder _partials, buat file js.php
19.   Ketik script berikut:
<!-- Bootstrap core JavaScript-->
<script src="<?php echo base_url('assets/jquery/jquery.min.js') ?>"></script>
<script src="<?php echo base_url('assets/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>

<!-- Core plugin JavaScript-->
<script src="<?php echo base_url('assets/jquery-easing/jquery.easing.min.js') ?>"></script>
<!-- Page level plugin JavaScript-->
<script src="<?php echo base_url('assets/chart.js/Chart.min.js') ?>"></script>
<script src="<?php echo base_url('assets/datatables/jquery.dataTables.js') ?>"></script>
<script src="<?php echo base_url('assets/datatables/dataTables.bootstrap4.js') ?>"></script>
<!-- Custom scripts for all pages-->
<script src="<?php echo base_url('js/sb-admin.min.js') ?>"></script>
<!-- Demo scripts for this page-->
<script src="<?php echo base_url('js/demo/datatables-demo.js') ?>"></script>
<script src="<?php echo base_url('js/demo/chart-area-demo.js') ?>"></script>

20.   Buka views/admin/tampil.php
21.   Ubah menjadi seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
       <?php $this->load->view("admin/_partials/atas.php") ?>
</head>
<body id="page-top">

<?php $this->load->view("admin/_partials/navigasi.php") ?>

<div id="wrapper">

       <?php $this->load->view("admin/_partials/kiri.php") ?>

       <div id="content-wrapper">

                       <div class="container-fluid">

        <!--
        karena ini halaman tampil (home), kita matikan partial breadcrumb.
        Jika anda ingin menampilkan breadcrumb di halaman tampil,
        silahkan hilangkan komentar (//) di tag PHP di bawah.
        -->
                       <?php //$this->load->view("admin/_partials/breadcrumb.php") ?>

                       <!-- Icon Cards-->
                       <div class="row">
                                       <div class="col-xl-3 col-sm-6 mb-3">
                                       <div class="card text-white bg-primary o-hidden h-100">
                                                       <div class="card-body">
                                                       <div class="card-body-icon">
                                                                       <i class="fas fa-fw fa-comments"></i>
                                                       </div>
                                                       <div class="mr-5">26 New Messages!</div>
                                                       </div>
                                                       <a class="card-footer text-white clearfix small z-1" href="#">
                                                       <span class="float-left">View Details</span>
                                                       <span class="float-right">
                                                                       <i class="fas fa-angle-right"></i>
                                                       </span>
                                                       </a>
                                       </div>
                                       </div>
                                       <div class="col-xl-3 col-sm-6 mb-3">
                                       <div class="card text-white bg-warning o-hidden h-100">
                                                       <div class="card-body">
                                                       <div class="card-body-icon">
                                                                       <i class="fas fa-fw fa-list"></i>
                                                       </div>
                                                       <div class="mr-5">11 New Tasks!</div>
                                                       </div>
                                                       <a class="card-footer text-white clearfix small z-1" href="#">
                                                       <span class="float-left">View Details</span>
                                                       <span class="float-right">
                                                                       <i class="fas fa-angle-right"></i>
                                                       </span>
                                                       </a>
                                       </div>
                                       </div>
                                       <div class="col-xl-3 col-sm-6 mb-3">
                                       <div class="card text-white bg-success o-hidden h-100">
                                                       <div class="card-body">
                                                       <div class="card-body-icon">
                                                                       <i class="fas fa-fw fa-shopping-cart"></i>
                                                       </div>
                                                       <div class="mr-5">123 New Orders!</div>
                                                       </div>
                                                       <a class="card-footer text-white clearfix small z-1" href="#">
                                                       <span class="float-left">View Details</span>
                                                       <span class="float-right">
                                                                       <i class="fas fa-angle-right"></i>
                                                       </span>
                                                       </a>
                                       </div>
                                       </div>
                                       <div class="col-xl-3 col-sm-6 mb-3">
                                       <div class="card text-white bg-danger o-hidden h-100">
                                                       <div class="card-body">
                                                       <div class="card-body-icon">
                                                                       <i class="fas fa-fw fa-life-ring"></i>
                                                       </div>
                                                       <div class="mr-5">13 New Tickets!</div>
                                                       </div>
                                                       <a class="card-footer text-white clearfix small z-1" href="#">
                                                       <span class="float-left">View Details</span>
                                                       <span class="float-right">
                                                                       <i class="fas fa-angle-right"></i>
                                                       </span>
                                                       </a>
                                       </div>
                                       </div>
                       </div>

                       <!-- Area Chart Example-->
                       <div class="card mb-3">
                                       <div class="card-header">
                                       <i class="fas fa-chart-area"></i>
                                       Visitor Stats</div>
                                       <div class="card-body">
                                       <canvas id="myAreaChart" width="100%" height="30"></canvas>
                                       </div>
                                       <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
                       </div>

                       </div>
                       <!-- /.container-fluid -->

                       <!-- Sticky Footer -->
                       <?php $this->load->view("admin/_partials/bawah.php") ?>

       </div>
       <!-- /.content-wrapper -->

</div>
<!-- /#wrapper -->


<?php $this->load->view("admin/_partials/scrollatas.php") ?>
<?php $this->load->view("admin/_partials/modal.php") ?>
<?php $this->load->view("admin/_partials/js.php") ?>
   
</body>
</html>

22.   Selesai
23.   Buka http://localhost:7777/ciku/index.php/admin
Sampai jumpa di CRUD menggunakan CI!

"Bitcoin and Forex are high risk business. We must join them smartly."
Belajar Bahasa Inggris dan Arab di WA dan FB Gratis!

No comments:

Post a Comment