Scribd Logo
Unggah

Selamat datang di Scribd!

  • Code Ignitor

    Diunggah oleh

    khusus gratis
    8 tayangan10 halaman

    Judul Asli

    code ignitor

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    8 tayangan10 halaman

    Code Ignitor

    Diunggah oleh

    khusus gratis

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 10

    Dalam membuat sebuah website pasti dibutuhkan tampilan yang keren dan pasti kamu akan

    kewalahan jika membuat nya dari nol karena akan membutuhkan banyak waktu, maka dari itu disini saya
    akan berbagi tentang cara integrasi template adminlte 3 dengan codeigniter. Dengan menggunakan
    template kamu tidak perlu membuat desain sendiri dari nol untuk membuat tampilan yang keren bin
    kece, cukup memanfaatkannya sehingga muncul tampilan seperti yang diinginkan. Karena dalam suatu
    template pasti banyak fitur – fitur yang tidak semuanya harus digunakan dan kamu bisa memilih dan
    mengembangkan fitur – fitur tersebut.

    Apa itu Template AdminLTE?

    AdminLTE 3 adalah desain yang secara default digunakan untuk backend atau bisa dikatakan
    administrator namun itu tergantung mau digunakan untuk bagian backend ataupun frontend. Bagi para
    penggemar template adminlte bisa langsung mendownloadnya pada situs resmi AdminLTE dan langsung
    mendapatkan desain sesusai dengan yang didownload, namun karena bahasan kita kali ini berkaitan
    dengan codeigniter maka akan ada beberapa perubahan dalam mengelola template adminlte yang
    dinamakan integrasi template adminlte 3 dengan codeigniter.

    TAHAPAN

     Download adminlte di adminlte.io


     Extract File codeignitor3 pada xampp/htdoc dan rename menjadi appku

     Buat folder assets Pada folder appku


     Buat folder dengan nama templates pada folder appku\application\views
     Buat tiga file di dalam folder tersebut dengan nama header.php , sidebar.php dan footer.php
    Dimana untuk masing masing menu mempunyai script berikut :

    header.php

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>My APP | <?= $title ?> </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/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">
      <!-- Tempusdominus Bootstrap 4 -->
      <link rel="stylesheet" href="<?=base_url ('assets/template') ?>/plugins/tempusdominus-
    bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
      <!-- iCheck -->
      <link rel="stylesheet" href="<?= base_url('assets/template') ?
    >/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
      <!-- JQVMap -->
      <link rel="stylesheet" href="<?= base_url('assets/template') ?
    >/plugins/jqvmap/jqvmap.min.css">
      <!-- Theme style -->
      <link rel="stylesheet" href="<?= base_url('assets/template') ?>/dist/css/adminlte.min.css">
      <!-- overlayScrollbars -->
      <link rel="stylesheet" href="<?= base_url('assets/template') ?
    >/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
      <!-- Daterange picker -->
      <link rel="stylesheet" href="<?= base_url('assets/template') ?
    >/plugins/daterangepicker/daterangepicker.css">
      <!-- summernote -->
      <link rel="stylesheet" href="<?= base_url('assets/template') ?
    >/plugins/summernote/summernote-bs4.min.css">
    </head>

    sidebar.php

    <body class="hold-transition sidebar-mini">


    <div class="wrapper">

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

        <!-- Right navbar links -->


        <ul class="navbar-nav ml-auto">
          <!-- Navbar Search -->
       
          <!-- Messages Dropdown Menu -->
         
        </ul>
      </nav>
      <!-- /.navbar -->

      <!-- 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/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">AdminLTE 3</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/template') ?>/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>

         

          <!-- 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="<?=base_url('dashboard') ?>" class="nav-link">
                      <i class="nav-icon fas fa-university"></i>
                      <p>Dashboard</p>
                    </a>
                  </li>

                <li class="nav-item">
                    <a href="<?=base_url('pelanggan') ?>" class="nav-link">
                      <i class="nav-icon fas fa-users"></i>
                      <p>Pelanggan</p>
                    </a>
                  </li>

                <li class="nav-item">
                    <a href="<?=base_url('barang') ?>" class="nav-link">
                      <i class="nav-icon fas fa-wallet"></i>
                      <p>Barang</p>
                    </a>
                  </li>

              <li class="nav-item">
                    <a href="<?=base_url('penjualan') ?>" class="nav-link">
                      <i class="nav-icon fas fa-shopping-cart"></i>
                      <p>Penjualan</p>
                    </a>
                  </li>
            </ul>
          </nav>
          <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
      </aside>

      <!-- Content Wrapper. Contains page content -->


      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
          <div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-6">
                <h1 class="m-0"><?= $title?> </h1>
              </div><!-- /.col -->
              <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"><?= $title?></li>
                </ol>
              </div><!-- /.col -->
            </div><!-- /.row -->
          </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->


        <div class="content">
          <div class="container-fluid">

    Footer.php

    </div><!-- /.container-fluid -->


        </div>
        <!-- /.content -->
      </div>
      <!-- /.content-wrapper -->
    <footer class="main-footer">
        <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong>
        All rights reserved.
        <div class="float-right d-none d-sm-inline-block">
          <b>Version</b> 3.2.0
        </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/template') ?>/plugins/jquery/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="<?= base_url('assets/template') ?>/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/template') ?
    >/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- ChartJS -->
    <script src="<?= base_url('assets/template') ?>/plugins/chart.js/Chart.min.js"></script>
    <!-- Sparkline -->
    <script src="<?= base_url('assets/template') ?>/plugins/sparklines/sparkline.js"></script>
    <!-- JQVMap -->
    <script src="<?= base_url('assets/template') ?>/plugins/jqvmap/jquery.vmap.min.js"></script>
    <script src="<?= base_url('assets/template') ?
    >/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
    <!-- jQuery Knob Chart -->
    <script src="<?= base_url('assets/template') ?
    >/plugins/jquery-knob/jquery.knob.min.js"></script>
    <!-- daterangepicker -->
    <script src="<?= base_url('assets/template') ?>/plugins/moment/moment.min.js"></script>
    <script src="<?= base_url('assets/template') ?
    >plugins/daterangepicker/daterangepicker.js"></script>
    <!-- Tempusdominus Bootstrap 4 -->
    <script src="<?= base_url('assets/template') ?
    >/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
    <!-- Summernote -->
    <script src="<?= base_url('assets/template') ?>/plugins/summernote/summernote-
    bs4.min.js"></script>
    <!-- overlayScrollbars -->
    <script src="<?= base_url('assets/template') ?
    >/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
    <!-- AdminLTE App -->
    <script src="<?= base_url('assets/template') ?>/dist/js/adminlte.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="<?= base_url('assets/template') ?>/dist/js/demo.js"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
    <script src="<?= base_url('assets/template') ?>/dist/js/pages/dashboard.js"></script>
    </body>
    </html>

     Edit file autoload.php pada folder appku/application/config

     Edit file config.php pada folder application/config

     Edit file routes.php pada folder application/config


     Buat file dengan nama HTACCESS pada folder appku

    Dan tulis script didalamnya seperti di bawah ini

     Buatlah file Barang.php pada folder appku/application/controller Dan isikan script tersebut
    Buatlah file barang.php pada folder appku/application/view Dan isikan script tersebut

     Jalankan file menggunakan browser (chrome/mozila) dengan mengetik localhost/appk


     SELAMAT ANDA TELAH BERHASIL

    Anda mungkin juga menyukai