Tutorial membuat web dengan codeigniter - merancang template admin part 2

Tutorial membuat web dengan codeigniter - merancang template admin part 2

Baca Juga

Advertidement
Oke sekarang kita masuk ke part 2 untuk merancang template ya. setelah sebelumnya kita sudah membuat konfigurasi sekarang buka kembali projek. Buat temen temen yang baru baca artikel ini silahkan kalian kembali ke part sebelumnya agar kita paham apa yang sedang kamu pelajari di artikel ini,  disini saya menggunakan visual studio code sama seperti tutorial sebelumnya.

Kita buka folder views di folder Application application\views buat 2 buah folder lalu beri nama backend dan frontend. Lalu di dalam folder backend buat folder layout lalu silahkan buat file php seperti di bawah ini

1. head.php
 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Administrator</title>
    <link href="<?php echo base_url('assets/template/backend/vendor/fontawesome-free/css/all.min.css'); ?>" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link href="<?php echo base_url('assets/template/backend/css/sb-admin-2.min.css'); ?>" rel="stylesheet">
    <link href="<?php echo base_url('assets/template/backend/vendor/datatables/dataTables.bootstrap4.min.css'); ?>" rel="stylesheet">

</head>

<body id="page-top">
    <div id="wrapper">


2. header.php
 

<div id="content-wrapper" class="d-flex flex-column">
    <div id="content">
        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
            <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                <i class="fa fa-bars"></i>
            </button>
            <ul class="navbar-nav ml-auto">
                <div class="topbar-divider d-none d-sm-block"></div>
                <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">
                        <span class="mr-2 d-none d-lg-inline text-gray-600 small">Admin Name</span>
                        <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
                    </a>
                    <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
                        <a class="dropdown-item" href="#">
                            <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                            Profile
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                            <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                            Logout
                        </a>
                    </div>
                </li>
            </ul>
        </nav>
        <div class="container-fluid">


3. sidebar.php
 

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
        <div class="sidebar-brand-icon rotate-n-15">
            <i class="fab fa-app-store"></i>
        </div>
        <div class="sidebar-brand-text mx-3">Admin </div>
    </a>
    <hr class="sidebar-divider my-0">
    <li class="nav-item">
        <a class="nav-link" href="<?php echo base_url('admin/dashboard'); ?>">
            <i class="fas fa-fw fa-tachometer-alt"></i>
            <span>Dashboard</span></a>
    </li>
    <hr class="sidebar-divider">
    <div class="sidebar-heading">
        Main Menu
    </div>
    <li class="nav-item">
        <a class="nav-link" href="<?php echo base_url('admin/article'); ?>">
            <i class="fas fa-fw fa-rss"></i>
            <span>Article</span></a>
    </li>
    <hr class="sidebar-divider">
    <li class="nav-item">
        <a class="nav-link" href="<?php echo base_url('admin/category'); ?>">
            <i class="fas fa-fw fa-tag"></i>
            <span>Category</span></a>
    </li>
    <hr class="sidebar-divider">
    <li class="nav-item">
        <a class="nav-link" href="<?php echo base_url('admin/user'); ?>">
            <i class="fas fa-fw fa-user"></i>
            <span>User</span></a>
    </li>
    <hr class="sidebar-divider">
    <div class="sidebar-heading">
        Seting Web
    </div>
    <li class="nav-item">
        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTree" aria-expanded="true" aria-controls="collapseTwo">
            <i class="fas fa-fw fa-cog"></i>
            <span>Konfigurasi</span>
        </a>
        <div id="collapseTree" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
            <div class="bg-white py-2 collapse-inner rounded">
                <h6 class="collapse-header">Setings:</h6>
                <a class="collapse-item" href="<?php echo base_url('admin/meta'); ?>">Meta</a>
                <a class="collapse-item" href="<?php echo base_url('admin/meta/logo'); ?>">Logo</a>
                <a class="collapse-item" href="<?php echo base_url('admin/meta/favicon'); ?>">Favicon</a>
            </div>
        </div>
    </li>
    <hr class="sidebar-divider">
    <div class="text-center d-none d-md-inline">
        <button class="rounded-circle border-0" id="sidebarToggle"></button>
    </div>
</ul>


4. footer.php
 

</div>
</div>
<footer class="sticky-footer bg-white">
    <div class="container my-auto">
        <div class="copyright text-center my-auto">
            <span>Copyright &copy; Your Website 2019</span>
        </div>
    </div>
</footer>
</div>
</div>
<script src="<?php echo base_url('assets/template/backend/vendor/jquery/jquery.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/template/backend/vendor/bootstrap/js/bootstrap.bundle.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/template/backend/vendor/jquery-easing/jquery.easing.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/template/backend/js/sb-admin-2.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/template/backend/vendor/datatables/jquery.dataTables.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/template/backend/vendor/datatables/dataTables.bootstrap4.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/template/backend/js/demo/datatables-demo.js'); ?>"></script>
</body>

</html>


5. content.php
 

<?php
if ($content) {
    $this->load->view($content);
}


6. wrapp.php
 

<?php
require_once('head.php');
require_once('sidebar.php');
require_once('header.php');
require_once('content.php');
require_once('footer.php');


Struktur folder view sekarang menjadi seperti gambar di bawah ini

Advertidement

Related Posts

No comments:

Post a Comment

Blog Ini Dofollow Ya bro tapi jangan nyepam komentar secara bijak dan sesuai dengan postingan