View CodeIgniter
- Get link
- Other Apps
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 © 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);
#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 😅😄
- Get link
- Other Apps
