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.

Silahkan download template admin LTE 3 pada situs resmi atau di sini.
Ekstrak
Rename folder dengan nama template.
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:

mahasiswa_form.php untuk tambah dan edit
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 😅😄

Search This Blog

Belajar Web Medan

View CodeIgniter

Popular posts from this blog

Cara Menggunakan Template Admin LTE Sebagai Template Web Dinamis

Aplikasi CRUD menggunakan Template Admin LTE

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman