Tugas 4 PBKK

Tugas 4 PBKK

Pada pertemuan kali ini kita akan melanjutkan pokok pembahasan kita sebelumnya dengan menggunakan Template Bootstrap SBAdmin. Di bawah ini merupakan tata cara pengerjaannya :
  1. Pertama-tama kita harus membuat sebuah direktori baru bernama "_partials" pada direktori application/views/admin

  2. Untuk codenya bisa dilihat code dibawah ini:
    3. head.php yang berfungsi untuk meinyimpan isi dari tag <head>;
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

<title><?php echo SITE_NAME .": ". ucfirst($this->uri->segment(1)) ." - ". ucfirst($this->uri->segment(2)) ?></title>

<!-- Bootstrap core CSS-->
<link href="<?php  $this->load->helper('url'); echo base_url('assets/bootstrap/css/bootstrap.min.css') ?>" rel="stylesheet">

<!-- Custom fonts for this template-->
<link href="<?php echo base_url('assets/fontawesome-free/css/all.min.css') ?>" rel="stylesheet" type="text/css">

<!-- Page level plugin CSS-->
<link href="<?php echo base_url('assets/datatables/dataTables.bootstrap4.css') ?>" rel="stylesheet">

<!-- Custom styles for this template-->

<link href="<?php echo base_url('css/sb-admin.css') ?>" rel="stylesheet">
    navbar.php yang berfungsi untuk menyimpan kode navbar;
    <nav class="navbar navbar-expand navbar-dark bg-success static-top">

    <a class="navbar-brand mr-1" href="<?php echo site_url('admin') ?>"><?php echo SITE_NAME ?></a>

    <button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
        <i class="fas fa-bars"></i>
    </button>

    <!-- Navbar Search -->
    <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
            <div class="input-group-append">
                <button class="btn btn-light" type="button">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
    </form>

    <!-- Navbar -->
    <ul class="navbar-nav ml-auto ml-md-0">
        <li class="nav-item dropdown no-arrow mx-1">
            <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
                <i class="fas fa-bell fa-fw"></i>
                <span class="badge badge-danger">9+</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>

        <li class="nav-item dropdown no-arrow mx-1">
            <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
                <i class="fas fa-envelope fa-fw"></i>
                <span class="badge badge-danger">7</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="messagesDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>

        <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
                <i class="fas fa-user-circle fa-fw"></i> Admin
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                <a class="dropdown-item" href="#">Settings</a>
                <a class="dropdown-item" href="#">Activity Log</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Logout</a>
            </div>
        </li>
    </ul>

</nav>
    sidebar.php yang berfungsi untuk menyimpan kode menu bagian samping (sidebar);
    <!-- Sidebar -->
<ul class="sidebar navbar-nav">
    <li class="nav-item <?php echo $this->uri->segment(2) == '' ? 'active': '' ?>">
        <a class="nav-link" href="<?php echo site_url('admin') ?>">
            <i class="fas fa-fw fa-tachometer-alt"></i>
            <span>Overview</span>
        </a>
    </li>
    <li class="nav-item dropdown <?php echo $this->uri->segment(2) == 'products' ? 'active': '' ?>">
        <a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
            <i class="fas fa-fw fa-boxes"></i>
            <span>Products</span>
        </a>
        <div class="dropdown-menu" aria-labelledby="pagesDropdown">
            <a class="dropdown-item" href="<?php echo site_url('admin/products/new') ?>">New Product</a>
            <a class="dropdown-item" href="<?php echo site_url('admin/products') ?>">List Product</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fas fa-fw fa-users"></i>
            <span>Users</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fas fa-fw fa-cog"></i>
            <span>Settings</span></a>
    </li>
</ul>
    breadcrumb.php yang berfungsi untuk menyimpan kode link breadcrumb;
    <!-- Breadcrumbs-->
<ol class="breadcrumb">
<?php foreach ($this->uri->segments as $segment): ?>
    <?php 
        $url = substr($this->uri->uri_string, 0, strpos($this->uri->uri_string, $segment)) . $segment;
        $is_active =  $url == $this->uri->uri_string;
    ?>


    <li class="breadcrumb-item <?php echo $is_active ? 'active': '' ?>">
        <?php if($is_active): ?>
            <?php echo ucfirst($segment) ?>
        <?php else: ?>
            <a href="<?php echo site_url($url) ?>"><?php echo ucfirst($segment) ?></a>
        <?php endif; ?>
    </li>
<?php endforeach; ?>
</ol>
    scrolltop.php yang berfungsi untuk menyimpan kode tombol scrolltop;
    <!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>
    footer.php yang berfungsi untuk menyimpan kode footer;
    <!-- Sticky Footer -->
<footer class="sticky-footer">
  <div class="container my-auto">
    <div class="copyright text-center my-auto">
      <span>Copyright  <?php echo SITE_NAME ." ". Date('Y') ?></span>
    </div>
  </div>
</footer>
    modal.php yang berfungsi untuk menyimpan kode modal;
    <!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
        <a class="btn btn-primary" href="login.html">Logout</a>
      </div>
    </div>
  </div>
</div>


<!-- Logout Delete Confirmation-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Are you sure?</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">Data yang dihapus tidak akan bisa dikembalikan.</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
        <a id="btn-delete" class="btn btn-danger" href="#">Delete</a>
      </div>
    </div>
  </div>
</div>
    js.php yang berfungsi untuk meload javascript.
    <!-- Bootstrap core JavaScript-->
<script src="<?php echo base_url('assets/jquery/jquery.min.js') ?>"></script>
<script src="<?php echo base_url('assets/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>

<!-- Core plugin JavaScript-->
<script src="<?php echo base_url('assets/jquery-easing/jquery.easing.min.js') ?>"></script>
<!-- Page level plugin JavaScript-->
<script src="<?php echo base_url('assets/chart.js/Chart.min.js') ?>"></script>
<script src="<?php echo base_url('assets/datatables/jquery.dataTables.js') ?>"></script>
<script src="<?php echo base_url('assets/datatables/dataTables.bootstrap4.js') ?>"></script>
<!-- Custom scripts for all pages-->
<script src="<?php echo base_url('js/sb-admin.min.js') ?>"></script>
<!-- Demo scripts for this page-->
<script src="<?php echo base_url('js/demo/datatables-demo.js') ?>"></script>
<script src="<?php echo base_url('js/demo/chart-area-demo.js') ?>"></script>
  3. Setelah menambah script diatas maka hasilnya bisa dilihat dibawah ini :

Untuk Source Codenya bisa dilihat di :

Komentar

Posting Komentar

Postingan populer dari blog ini

Project Charter E-Surat Pemerintah Kota Surabaya Kelas : MPPL - E Anggota Kelompok : Haekal Azmi (05111540000110) Tubagus Irkham Izzata A (05111740000012) M Thalut Nadhil Q (05111740000143)
Baca selengkapnya

UTS PBKK A

Gambar
UTS PBKK A Buatlah asumsi dan tuliskan deskripsi sistemnya              Kali ini saya membuat sebuah sistem informasi bernama Ansha's Shop . Dimana toko online ini menjualkan beberapa barang elektronik, pakaian, dan barang-barang olah ra ga. Sistem informasi ini mempunyai 2(dua) role, yaitu sebagai admin dan user. admin berkerja sebagai pemilik toko sedangkan user bertindak sebagai pembeli. Dan jika user mau menggunakan sistem informasi ini, maka user harus daftar akun dan login terlebih dahulu. Setelah itu, baru mereka bisa menggunakan sistem informasi ini. Sistem informasi ini bisa diakses melalui :  Anshasshop Untuk code lebih lengkapnya bisa dilihat di   Source Code Terangkan fitur yang ada di aplikasi sertakan screenshoot aplikasi untuk menjelaskan 1. GUEST Jadi untuk fitur-fitur yang bisa diakses oleh Guest adalah Fitur Dashboard yang tampilanya seperti gambar dibawah ini :             Disini para pengunjung dapat melihat barang-barang yang di
Baca selengkapnya

Tugas 2 PBKK

Gambar
Tugas 2 PBKK Pada pertemuan kali ini saya akan menambah 2 halaman baru pada web ini, Yaitu halaman About Us dan Contact Us. nb : klik foto jika terlihat kurang jelas Pertama-tama kita harus menambahkan route about dan contact pada file routes.php pada folder confi Setelah menambahkan route pada file routes.php langkah selanjutnya adalah membuat function about dan contact pada file Welcome.php Dan tentu saja kita perlu membuat 2 file yang bernama about.php dan contact.php pada folder views Setelah menambahkan langkah langkah diatas maka hasil dari kerja kita diatas adalah Halaman pada Welcome Halaman pada About Us Halaman pada Contact Us Cukup segitu saja untuk kali ini, untuk source codenya bisa dilihat di Source Code
Baca selengkapnya