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

Kupas Tuntas Kuliah Jurusan Sistem Informasi

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!

"Boleh Konsultasi Masuk Jurusan Sistem Informasi via IG atau Tiktok."

Tips Skripsi Program Studi Sistem Informasi