Lebak Cyber Tips dan Trik Komputer
Membuat Aplikasi Penjualan Dengan Codeigniter – Membuat Template
lebakcyber.net – Membuat Aplikasi Penjualan Dengan Codeigniter – Membuat Template. Setelah pada tutorial sebelumnya kita sudah membuat database untuk aplikasi penjualan yang akan kita buat menggunakan Codeigniter, maka pada tutorial ini kita akan coba untuk membuat template yang nantinya akan digunakan pada halaman-halaman aplikasi penjualan yang kita buat.
Pertama silahkan teman-teman download terlebih dahulu source untuk template yang akan kita gunakan melalui link dibawah ini :
Download Template
Setelah teman-teman mendownload templatenya, sekarang ekstrak template tersebut pada folder CI yang digunakan dan jangan lupa rubah nama folder intinya menjadi penjualan, jadi nanti tampilannya seperti pada gambar dibawah ini :
Setelah folder assets berhasil di ekstrak, selanjutnya kita tinggal buat template untuk header, sidebar dan footer.
Buat sebuah folder baru dengan nama admin dan juga folder templates didalam folder htdocs -> penjualan -> application -> views seperti pada gambar dibawah ini :
Lalu didalam folder templates tersebut kita buat tiga buah file php baru yang nantinya akan kita beri nama header.php, sidebar.php dan juga footer.php.
Membuat F[ile header.php
Pertama kita buat file header.php yang nantinya akan kita gunakan sebagai header pada halaman aplikasi penjualan yang kita buat, silahkan ketikan perintah php dibawah ini untuk membuat file header.php :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php echo $title ?></title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="<?php echo base_url('assets') ?>/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="<?php echo base_url('assets') ?>/plugins/datatables/dataTables.bootstrap.css">
<!-- Theme style -->
<link rel="stylesheet" href="<?php echo base_url('assets') ?>/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="<?php echo base_url('assets') ?>/dist/css/skins/_all-skins.min.css">
<!-- Pace style -->
<link rel="stylesheet" href="<?php echo base_url('assets') ?>/plugins/pace/pace.min.css">
</head>
<body class="hold-transition skin-red">
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="<?php echo base_url('index.php/welcome') ?>" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>A</b>LT</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Administrator</b></span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="<?php echo base_url('assets') ?>/dist/img/avatar5.png" class="user-image" alt="User Image">
<span class="hidden-xs"><?php echo $this->session->userdata('nama') ?></span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="<?php echo base_url('assets') ?>/dist/img/avatar5.png" class="img-circle" alt="User Image">
<p>
<?php echo $this->session->userdata('nama') ?>
<small>Terdaftar Pada <?php echo date('d-M-Y H:i:s', strtotime($this->session->userdata('createDate'))) ?></small>
</p>
</li>
<li class="user-footer">
<div class="pull-left">
<a href="<?php echo base_url('index.php/admin/profile') ?>" class="btn btn-default btn-flat">
<div class="fa fa-user"></div> Profile
</a>
</div>
<div class="pull-right">
<a href="<?php echo base_url('index.php/home/logout') ?>" class="btn btn-default btn-flat tombol-yakin" data-isiData="Ingin keluar dari sistem ini!">
<div class="fa fa-sign-out"></div> Sign out
</a>
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<!-- <li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
</li> -->
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
Membuat File sidebar.php
Selanjutnya kita buat file sidebar.php yang akan kita gunakan sebagai sidebar pada halaman aplikasi penjualan yang kita buat, silahkan teman-teman ketikan perintah dibawah ini untuk membuat file sidebar.php :
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="<?php echo base_url('assets') ?>/dist/img/avatar5.png" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p><?php echo $this->session->userdata('nama') ?></p>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">DAFTAR MENU</li>
<li class="treeview">
<a href="<?php echo base_url('index.php/admin/dashboard') ?>">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li class="treeview">
<a href="<?php echo base_url('index.php/admin/kategori') ?>">
<i class="fa fa-shopping-bag"></i> <span>Kategori</span>
</a>
</li>
<li class="treeview">
<a href="<?php echo base_url('index.php/admin/produk') ?>">
<i class="fa fa-calendar"></i> <span>Produk</span>
</a>
</li>
<li class="treeview">
<a href="<?php echo base_url('index.php/admin/transaksi') ?>">
<i class="fa fa-book"></i> <span>Transaksi</span>
</a>
</li>
<li class="treeview">
<a href="<?php echo base_url('index.php/admin/user') ?>">
<i class="fa fa-group"></i> <span>Manajemen Pengguna</span>
<span class="pull-right-container">
<span class="label label-danger pull-right">
<?php
$jumlahUser = $this->db->query('SELECT id FROM tb_user')->num_rows();
echo $jumlahUser . " User";
?>
</span>
</span>
</a>
</li>
<li class="treeview">
<a href="<?php echo base_url('index.php/admin/kelola') ?>">
<i class="fa fa-home"></i> <span>Pengaturan Toko</span>
</a>
</li>
<li class="treeview">
<a href="<?php echo base_url('index.php/admin/profile') ?>">
<i class="fa fa-user"></i> <span>Profile</span>
</a>
</li>
<li class="treeview">
<a href="<?php echo base_url('index.php/home/logout') ?>" class="tombol-yakin"
data-isiData="Ingin keluar dari sistem ini!">
<i class="fa fa-sign-out"></i> <span>Keluar</span>
</a>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
Membuat File footer.php
Yang terakhir kita buat file footer.php didalam folder templates tersebut yang akan kita gunakan sebagai footer pada setiap halaman aplikasi penjualan yang kita buat, silahkan teman-teman masukan perintah dibawah ini untuk membuat file footer.php :
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.0
</div>
<strong>Copyright © 2020 - <?php echo date('Y') ?> <a href="https://lebakcyber.net" target="blank">lebakcyber.net</a>.</strong> All rights
reserved.
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-user bg-yellow"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
<p>New phone +1(800)555-1234</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
<p>nora@example.com</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-file-code-o bg-green"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
<p>Execution time 5 seconds</p>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Update Resume
<span class="label label-success pull-right">95%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-success" style="width: 95%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Laravel Integration
<span class="label label-warning pull-right">50%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Back End Framework
<span class="label label-primary pull-right">68%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" style="width: 68%"></div>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Other sets of options are available
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Allow the user to show his name in blog posts
</p>
</div>
<!-- /.form-group -->
<h3 class="control-sidebar-heading">Chat Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked>
</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right">
</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Delete chat history
<a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
</label>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- jQuery 2.2.3 -->
<script src="<?php echo base_url('assets') ?>/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="<?php echo base_url('assets') ?>/bootstrap/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="<?php echo base_url('assets') ?>/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url('assets') ?>/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="<?php echo base_url('assets') ?>/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="<?php echo base_url('assets') ?>/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="<?php echo base_url('assets') ?>/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="<?php echo base_url('assets') ?>/dist/js/demo.js"></script>
<!-- PACE -->
<script src="<?php echo base_url('assets') ?>/plugins/pace/pace.min.js"></script>
<!-- page script -->
<script type="text/javascript">
// To make Pace works on Ajax calls
$(document).ajaxStart(function() {
Pace.restart();
});
$('.ajax').click(function() {
$.ajax({
url: '#',
success: function(result) {
$('.ajax-content').html('<hr>Ajax Request Completed !');
}
});
});
</script>
<!-- Sweet Alert -->
<script src="<?php echo base_url('assets/sweetalert') ?>/sweetalert.min.js"></script>
<script>
//Notifikasi
const flashData = $('.flash-data').data('flashdata');
if (flashData) {
swal({
title: "Success!",
text: flashData,
icon: "success",
button: "Ok!",
});
}
//Konfirmasi
$('.tombol-yakin').on('click', function(e) {
e.preventDefault();
const href = $(this).attr('href');
const isiData = $(this).data('isidata');
swal({
title: 'Apakah anda yakin?',
text: isiData,
icon: 'warning',
buttons: true,
dangerMode: true,
}).then((willDelete) => {
if (willDelete) {
document.location.href = href;
}
});
});
</script>
<script>
$(function() {
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false
});
});
</script>
</body>
</html>
Oke setelah ketiga buah file header.php, sidebar.php dan juga footer.php berhasil kita buat nanti tampilan folder filenya seperti pada gambar dibawah ini :
Sampai tahap ini kita sudah berhasil untuk membuat template untuk aplikasi penjualan yang akan kita buat menggunakan codeigniter. Semoga tutorial ini bisa teman-teman ikuti dengan baik dan sampai jumpa di lanjutan tutorial membuat aplikasi penjualan dengan menggunakan Codeigniter selanjutnya.
