View CodeIgniter


Untuk mengikuti tutorial ini anda harus menyelesaikan tutorial sebelumnya.
Membuat tampilan web yang menarik pasti menjadi idaman setiap pengembang web. Pada bagian view inilah kita menyiapkan tampilan halaman web yang baik. Tutorial ini membahas cara membuat view dengan template admin lte.
  1. Silahkan download template admin LTE 3 pada situs resmi atau di sini.
  2. Ekstrak
  3. Rename folder dengan nama template.
  4. Pastekan di folder berlajarcodeigniter (projek)
  • belajarcodeigniter
    • application
      • view
        • _includes
          • breadcrumb_mahasiswa_list.php
          • footer.php
          • head_table.php
          • navbar.php
          • sidebar.php
        • mahasiswa
          • mahasiswa_list.php
          • mahasiswa_form.php
          • mahasiswa_read.php
    • system
    • template
      • pages
        • tables
          • data.html
Kita buat folder mahasiswa dan file mahasiswa_list.php isinya copas dari data.html. yang perlu diubah pertama kali saat modifikasi adalah url dari css dan javascript.

<link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
<!--menjadi-->
<link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/fontawesome-free/css/all.min.css">

Anda hanya perlu me replace ../../ menjadi <?php echo base_url(); ?>template/



Baiklah mari kita buat semua file dan folder seperti pada tulisan berwarna merah. Berdoa dimulai 😇

#breadcrumb
Berikut ini kode untuk breadcumb, karena masing-masing halaman nantinya beda breadcumbnya sehingga dinamai breadcrumb_mahasiswa_list.php
<!--Nama file:breadcrumb_mahasiswa_list.php--!>
<section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Data Mahasiswa</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Data Mahasiswa</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

#footer
Berikut ini kode untuk footer yang sudah dimodifikasi.
<!--Nama file: footer.php-->
<footer class="main-footer">
    <div class="float-right d-none d-sm-block">
      <b>Version</b> 3.0.3-pre
    </div>
    <strong>Copyright &copy; 2020 <a href="http://belajarwebmedan.blogspot.com">BWM</a>.</strong> All rights
    reserved.
</footer>
  
#head
Berikut ini isi file head_table.php yang sudah diedit.
<!--Nama file:head_table.php-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Admin</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="<?php echo base_url(); ?>template/dist/css/adminlte.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>

#navbar
Untuk bagian navbar tidak ada kode yang diedit.
<!-- Nama file: navbar.php--!>
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="<?php echo base_url(); ?>template/index3.html" class="nav-link">Home</a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>

    <!-- SEARCH FORM -->
    <form class="form-inline ml-3">
      <div class="input-group input-group-sm">
        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
        <div class="input-group-append">
          <button class="btn btn-navbar" type="submit">
            <i class="fas fa-search"></i>
          </button>
        </div>
      </div>
    </form>

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-comments"></i>
          <span class="badge badge-danger navbar-badge">3</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="<?php echo base_url(); ?>template/dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Brad Diesel
                  <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
                </h3>
                <p class="text-sm">Call me whenever you can...</p>
                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="<?php echo base_url(); ?>template/dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  John Pierce
                  <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
                </h3>
                <p class="text-sm">I got your message bro</p>
                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="<?php echo base_url(); ?>template/dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Nora Silvester
                  <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
                </h3>
                <p class="text-sm">The subject goes here</p>
                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
        </div>
      </li>
      <!-- Notifications Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-bell"></i>
          <span class="badge badge-warning navbar-badge">15</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <span class="dropdown-item dropdown-header">15 Notifications</span>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fas fa-envelope mr-2"></i> 4 new messages
            <span class="float-right text-muted text-sm">3 mins</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fas fa-users mr-2"></i> 8 friend requests
            <span class="float-right text-muted text-sm">12 hours</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fas fa-file mr-2"></i> 3 new reports
            <span class="float-right text-muted text-sm">2 days</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
          <i class="fas fa-th-large"></i>
        </a>
      </li>
    </ul>
</nav>

#sidebar
Sidebar ini adalah menu yang berada di sebelah kiri. Berikut kode yang sudah diedit.
<!--Nama file: sidebar.php-->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="<?php echo base_url(); ?>template/index3.html" class="brand-link">
      <img src="<?php echo base_url(); ?>template/dist/img/AdminLTELogo.png"
           alt="AdminLTE Logo"
           class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light">Belajar Web Medan</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar user (optional) -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
          <img src="<?php echo base_url(); ?>template/dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="#" class="d-block">Admin</a>
        </div>
      </div>

      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-item">
            <a href="../widgets.html" class="nav-link">
              <i class="nav-icon fas fa-home"></i>
              <p>
                Home
              </p>
            </a>
          </li>
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-bars"></i>
              <p>
                Master Data
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="<?php echo base_url(); ?>template/index.html" class="nav-link">
                  <i class="fa fa-users nav-icon"></i>
                  <p>Mahasiswa</p>
                </a>
              </li>
            </ul>
          </li>          
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
</aside>

Setelah bagian-bagian nya dipisah agar mudah dibaca selanjutnya disatukan kembali pada file mahasiswa_list.php. Fungsi yang digunakan untuk memanggil / menginclude file adalah 
$this->load->view('nama view');. Bagian terpentin dari view ini adalah bisa mengambil dan menampilkan data yang dikirim dari controller. Contoh kasus kali ini adalah data mahasiswa yang dikirim dari controller untuk ditampilkan di view. Biasanya data yang dikirm ke view menggunakan array. Mengambil datanya yaitu menyebutkan index dari array pengirim.

//contoh
$data = array(
            'mhs' => $mahasiswa,
            'tes' => "Halo"
        );
$this->load->view('mahasiswa/mahasiswa_list', $data);

Pada view data yang diambil adalah $mhs dan $tes yang asalnya dari array $data.. Mari kita lanjutkan..

#view
View kali ini adalah view mahasiswa_list.php yang gunanya untuk menampilkan data ke dalam tabel.
<!--nama file: mahasiswa_list.php -->
<!DOCTYPE html>
<html>
<?php $this->load->view('_includes/head_table');?>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
  <!-- Navbar -->
<?php $this->load->view('_includes/navbar.php');?>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
<?php $this->load->view('_includes/sidebar.php');?>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
<?php $this->load->view('_includes/breadcrumb_mahasiswa_list.php');?>
    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <!--h3 class="card-title">DataTable with default features</h3-->
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>No.</th>
                  <th>NIM</th>
                  <th>Nama</th>
                  <th>Jenis Kelamin</th>
                  <th>Agama</th>
                  <th>Aksi</th>
                </tr>
                </thead>
                <tbody>           
                <?php
                $no = 0;
                foreach ($data as $row)
                {
                ?>
                  <tr>
                  <td><?php echo ++$no ?></td>
                  <td><?php echo $row->nim ?></td>
                  <td><?php echo $row->nama ?></td>
                  <td><?php echo $row->jenis_kelamin ?></td>
                  <td><?php echo $row->agama ?></td>
                  <td>
                    <button class="btn btn-warning"><i class="fa fa-edit"> Edit</i></button>
                    <button class="btn btn-danger"><i class="fa fa-trash"> Hapus</i></button>
                  </td>
                  </tr>
                <?php
                }
                ?>                
                </tbody>
              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
<?php $this->load->view('_includes/footer.php');?>
  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<?php $this->load->view('_includes/js_table.php');?>
</body>
</html>


#controller
Untuk controller hanya sedikit saja yang di ubah dari controller sebelumnya.
<!--Nama file: Mahasiswa.php-->
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Mahasiswa extends CI_Controller {

function __construct()
    {
        parent::__construct();
        $this->load->model('Mahasiswa_model');
    }
public function index()
{
$mahasiswa = $this->Mahasiswa_model->get_all();

        $data = array(
            'data' => $mahasiswa
        );

        $this->load->view('mahasiswa/mahasiswa_list', $data);
}
}

Panggil dengan link "localhost/belajarcodeigniter/mahasiswa".

Selanjutnya anda dapat melanjutkan membuat view:
  1. mahasiswa_form.php untuk tambah dan edit
  2. mahasiswa_read.php untuk melihat detil
Jika sudah selesai views ini dapat digunakan kembali secara terus menurus untuk semua menu. Kita cukup copas folder mahasiswa dan edit beberapa bagiannya.

Catatan: Setelah tutorial ini berhasil, anda dapat mengikuti tutorial selanjutnya.

Terima Kasih 😅😄

Popular posts from this blog

Cara Membuat Kalkulator Dengan Java Script

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

Aplikasi CRUD menggunakan Template Admin LTE