Scribd
Upload
26 views8 pages

Code Belajar Bareng Bootstrap

part6

Uploaded by

Yhuda Pranata
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views8 pages

Code Belajar Bareng Bootstrap

part6

Uploaded by

Yhuda Pranata
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Dokumentasi Code Tutorial Bootstrap AdminLTE + CodeIgniter

Part 6 – Cara Membuat Menu Di Dashboard

Yukk Sobat Ngoding, Kita Belajar Bareng..


di Nandi Susila Channel https://www.youtube.com/channel/UCvKFpSukTb3xQYFXQGLDuSg

Header.php :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar Bareng Bootstrap</title>

<!-- Google Font: Source Sans Pro -->


<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700
&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="<?= base_url('assets/lte/');
?>plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet"
href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="<?= base_url('assets/lte/');
?>plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="<?= base_url('assets/lte/'); ?>plugins/icheck-
bootstrap/icheck-bootstrap.min.css">
<!-- JQVMap -->
<link rel="stylesheet" href="<?= base_url('assets/lte/');
?>plugins/jqvmap/jqvmap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="<?= base_url('assets/lte/');
?>dist/css/adminlte.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="<?= base_url('assets/lte/');
?>plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="<?= base_url('assets/lte/');
?>plugins/daterangepicker/daterangepicker.css">
<!-- summernote -->
<link rel="stylesheet" href="<?= base_url('assets/lte/');
?>plugins/summernote/summernote-bs4.min.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

<!-- Preloader -->


<div class="preloader flex-column justify-content-center align-items-
center">
<img class="animation__shake" src="<?= base_url('assets/lte/');
?>dist/img/logo.png" alt="" height="100" width="150">
</div>

<!-- Navbar -->


<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="" 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>

<!-- 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="<?= base_url('assets/lte/'); ?>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>

</ul>
</nav>
<!-- /.navbar -->
sidebar.php :
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="index3.html" class="brand-link">
<img src="<?= base_url('assets/lte/'); ?>dist/img/logo.png" alt=""
class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light">Bootstrap</span>
</a>

<!-- Sidebar -->


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

<!-- SidebarSearch Form -->


<div class="form-inline">
<div class="input-group" data-widget="sidebar-search">
<input class="form-control form-control-sidebar" type="search"
placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-sidebar">
<i class="fas fa-search fa-fw"></i>
</button>
</div>
</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 menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Menu 1
<i class="right fas fa-angle-left"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="" class="nav-link active">
<i class="fas fa-tachometer-alt"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-tachometer-alt"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-tachometer-alt"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>

<li class="nav-item menu-open">


<a href="#" class="nav-link active">
<i class="nav-icon fas fa-copy"></i>
<p>
Menu 2
<i class="right fas fa-angle-left"></i>
<span class="badge badge-info right">3</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="" class="nav-link active">
<i class="far fa-circle nav-icon"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>

</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
footer.php :
<footer class="main-footer">
<strong>Copyright &copy; 2021-2022 <a href="">Belajar Bareng
Bootstrap</a>.</strong>
All rights reserved.
<div class="float-right d-none d-sm-inline-block">

</div>
</footer>

<!-- Control Sidebar -->


<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->


<script src="<?= base_url('assets/lte/');
?>plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="<?= base_url('assets/lte/'); ?>plugins/jquery-ui/jquery-
ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="<?= base_url('assets/lte/');
?>plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="<?= base_url('assets/lte/');
?>plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="<?= base_url('assets/lte/');
?>plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="<?= base_url('assets/lte/');
?>plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="<?= base_url('assets/lte/');
?>plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="<?= base_url('assets/lte/'); ?>plugins/jquery-
knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="<?= base_url('assets/lte/');
?>plugins/moment/moment.min.js"></script>
<script src="<?= base_url('assets/lte/');
?>plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="<?= base_url('assets/lte/'); ?>plugins/tempusdominus-bootstrap-
4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="<?= base_url('assets/lte/'); ?>plugins/summernote/summernote-
bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="<?= base_url('assets/lte/');
?>plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="<?= base_url('assets/lte/'); ?>dist/js/adminlte.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="<?= base_url('assets/lte/'); ?>dist/js/demo.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="<?= base_url('assets/lte/');
?>dist/js/pages/dashboard.js"></script>
</body>
</html>

You might also like