Kali ini saya akan memberikan salah satu contoh Cara Membuat Web Administrator Dengan CodeIgniter 4, saya akan menggunakan template Architect UI sebagai contohnya. Tapi anda bisa saja menggunakan template apa saja sesuai keinginan anda.
Jika anda ingin menggunakan template Architect UI anda bisa mendownloadnya disini.
Download juga Codeigniter 4 disini. atau baca dulu ni Cara Install Codeigniter 4 di Localhost Dan Web Hosting
Disini saya menggunakan Xampp sebagai local server saya, dengan begitu saya akan membangun Web Administrator ini di C:\xampp\htdocs\ci4-project dimana ci4-project merupakan root direktori Web App saya, Anda boleh menggunakan nama folder lain, Maka dalam folder ci4-project terdapat folder dan file dengan struktur seperti berikut :
Indonesia
English--app
--public
--system
--writable
env
.gitignore
composer.json
-- Dan lain-lain
Buat sebuah folder dengan nama admin di app > views dan buat beberapa file didalam folder admin seperti berikut :
Isi setiap file dengan kode berikut :
<?php include ('./include/admin/index.php');?>
//Sesuaikan nama filenya
Sesuaikan nama filenya, contoh jika di header.php maka kodenya seperti berikut :
<?php include ('./include/admin/header.php');?>
Sesuaikan dengan file yang lain.
Buat folder baru dengan struktur seperti dibawah didalam folder public.
--public
----include
------admin
Jadi di dalam folder public ada folder include dan dalam folder include ada folder admin, selanjutnya tambahkan file didalam folder public > include > admin seperti berikut :
Pindahkan juga semua file tamplate Architect UI ke folder public > include > admin kecuali file htmlnya, jadi yang diambil adalah file css dan javascript serta plugins dan image.
Copy paste kode index.html template Achitect UI ke dalam index.php yang ada di folder public > include > admin setelah itu kita akan pindahkan bagian header,sidebar,menu dan footer ke file yang telah dibuat di public > include > admin
Untuk header.php ambil bagian :
<div class="app-header header-shadow">
<div class="app-header__logo">
<div class="logo-src"></div>
<div class="header__pane ml-auto">
<div>
<button type="button" class="hamburger close-sidebar-btn hamburger--elastic" data-class="closed-sidebar">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
</div>
<div class="app-header__mobile-menu">
<div>
<button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
<div class="app-header__menu">
<span>
<button type="button" class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
<span class="btn-icon-wrapper">
<i class="fa fa-ellipsis-v fa-w-6"></i>
</span>
</button>
</span>
</div> <div class="app-header__content">
<div class="app-header-left">
<div class="search-wrapper">
<div class="input-holder">
<input type="text" class="search-input" placeholder="Type to search">
<button class="search-icon"><span></span></button>
</div>
<button class="close"></button>
</div>
<ul class="header-menu nav">
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link">
<i class="nav-link-icon fa fa-database"> </i>
Statistics
</a>
</li>
<li class="btn-group nav-item">
<a href="javascript:void(0);" class="nav-link">
<i class="nav-link-icon fa fa-edit"></i>
Projects
</a>
</li>
<li class="dropdown nav-item">
<a href="javascript:void(0);" class="nav-link">
<i class="nav-link-icon fa fa-cog"></i>
Settings
</a>
</li>
</ul> </div>
<div class="app-header-right">
<div class="header-btn-lg pr-0">
<div class="widget-content p-0">
<div class="widget-content-wrapper">
<div class="widget-content-left">
<div class="btn-group">
<a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="p-0 btn">
<img width="42" class="rounded-circle" src="assets/images/avatars/1.jpg" alt="">
<i class="fa fa-angle-down ml-2 opacity-8"></i>
</a>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<button type="button" tabindex="0" class="dropdown-item">User Account</button>
<button type="button" tabindex="0" class="dropdown-item">Settings</button>
<h6 tabindex="-1" class="dropdown-header">Header</h6>
<button type="button" tabindex="0" class="dropdown-item">Actions</button>
<div tabindex="-1" class="dropdown-divider"></div>
<button type="button" tabindex="0" class="dropdown-item">Dividers</button>
</div>
</div>
</div>
<div class="widget-content-left ml-3 header-user-info">
<div class="widget-heading">
Alina Mclourd
</div>
<div class="widget-subheading">
VP People Manager
</div>
</div>
<div class="widget-content-right header-user-info ml-3">
<button type="button" class="btn-shadow p-1 btn btn-primary btn-sm show-toastr-example">
<i class="fa text-white fa-calendar pr-1 pl-1"></i>
</button>
</div>
</div>
</div>
</div> </div>
</div>
</div>
Ganti dengan <?=$header;?>
Ganti
<img width="42" class="rounded-circle" src="assets/images/avatars/1.jpg" alt="">
menjadi
<img width="42" class="rounded-circle" src="./include/admin/assets/images/avatars/1.jpg" alt="">
Untuk sidebar.php ambil bagian setelahnya :
<div class="ui-theme-settings">
<button type="button" id="TooltipDemo" class="btn-open-options btn btn-warning">
<i class="fa fa-cog fa-w-16 fa-spin fa-2x"></i>
</button>
<div class="theme-settings__inner">
<div class="scrollbar-container">
<div class="theme-settings__options-wrapper">
<h3 class="themeoptions-heading">Layout Options
</h3>
<div class="p-3">
<ul class="list-group">
<li class="list-group-item">
<div class="widget-content p-0">
<div class="widget-content-wrapper">
<div class="widget-content-left mr-3">
<div class="switch has-switch switch-container-class" data-class="fixed-header">
<div class="switch-animate switch-on">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
</div>
</div>
</div>
<div class="widget-content-left">
<div class="widget-heading">Fixed Header
</div>
<div class="widget-subheading">Makes the header top fixed, always visible!
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="widget-content p-0">
<div class="widget-content-wrapper">
<div class="widget-content-left mr-3">
<div class="switch has-switch switch-container-class" data-class="fixed-sidebar">
<div class="switch-animate switch-on">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
</div>
</div>
</div>
<div class="widget-content-left">
<div class="widget-heading">Fixed Sidebar
</div>
<div class="widget-subheading">Makes the sidebar left fixed, always visible!
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="widget-content p-0">
<div class="widget-content-wrapper">
<div class="widget-content-left mr-3">
<div class="switch has-switch switch-container-class" data-class="fixed-footer">
<div class="switch-animate switch-off">
<input type="checkbox" data-toggle="toggle" data-onstyle="success">
</div>
</div>
</div>
<div class="widget-content-left">
<div class="widget-heading">Fixed Footer
</div>
<div class="widget-subheading">Makes the app footer bottom fixed, always visible!
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<h3 class="themeoptions-heading">
<div>
Header Options
</div>
<button type="button" class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-header-cs-class" data-class="">
Restore Default
</button>
</h3>
<div class="p-3">
<ul class="list-group">
<li class="list-group-item">
<h5 class="pb-2">Choose Color Scheme
</h5>
<div class="theme-settings-swatches">
<div class="swatch-holder bg-primary switch-header-cs-class" data-class="bg-primary header-text-light">
</div>
<div class="swatch-holder bg-secondary switch-header-cs-class" data-class="bg-secondary header-text-light">
</div>
<div class="swatch-holder bg-success switch-header-cs-class" data-class="bg-success header-text-dark">
</div>
<div class="swatch-holder bg-info switch-header-cs-class" data-class="bg-info header-text-dark">
</div>
<div class="swatch-holder bg-warning switch-header-cs-class" data-class="bg-warning header-text-dark">
</div>
<div class="swatch-holder bg-danger switch-header-cs-class" data-class="bg-danger header-text-light">
</div>
<div class="swatch-holder bg-light switch-header-cs-class" data-class="bg-light header-text-dark">
</div>
<div class="swatch-holder bg-dark switch-header-cs-class" data-class="bg-dark header-text-light">
</div>
<div class="swatch-holder bg-focus switch-header-cs-class" data-class="bg-focus header-text-light">
</div>
<div class="swatch-holder bg-alternate switch-header-cs-class" data-class="bg-alternate header-text-light">
</div>
<div class="divider">
</div>
<div class="swatch-holder bg-vicious-stance switch-header-cs-class" data-class="bg-vicious-stance header-text-light">
</div>
<div class="swatch-holder bg-midnight-bloom switch-header-cs-class" data-class="bg-midnight-bloom header-text-light">
</div>
<div class="swatch-holder bg-night-sky switch-header-cs-class" data-class="bg-night-sky header-text-light">
</div>
<div class="swatch-holder bg-slick-carbon switch-header-cs-class" data-class="bg-slick-carbon header-text-light">
</div>
<div class="swatch-holder bg-asteroid switch-header-cs-class" data-class="bg-asteroid header-text-light">
</div>
<div class="swatch-holder bg-royal switch-header-cs-class" data-class="bg-royal header-text-light">
</div>
<div class="swatch-holder bg-warm-flame switch-header-cs-class" data-class="bg-warm-flame header-text-dark">
</div>
<div class="swatch-holder bg-night-fade switch-header-cs-class" data-class="bg-night-fade header-text-dark">
</div>
<div class="swatch-holder bg-sunny-morning switch-header-cs-class" data-class="bg-sunny-morning header-text-dark">
</div>
<div class="swatch-holder bg-tempting-azure switch-header-cs-class" data-class="bg-tempting-azure header-text-dark">
</div>
<div class="swatch-holder bg-amy-crisp switch-header-cs-class" data-class="bg-amy-crisp header-text-dark">
</div>
<div class="swatch-holder bg-heavy-rain switch-header-cs-class" data-class="bg-heavy-rain header-text-dark">
</div>
<div class="swatch-holder bg-mean-fruit switch-header-cs-class" data-class="bg-mean-fruit header-text-dark">
</div>
<div class="swatch-holder bg-malibu-beach switch-header-cs-class" data-class="bg-malibu-beach header-text-light">
</div>
<div class="swatch-holder bg-deep-blue switch-header-cs-class" data-class="bg-deep-blue header-text-dark">
</div>
<div class="swatch-holder bg-ripe-malin switch-header-cs-class" data-class="bg-ripe-malin header-text-light">
</div>
<div class="swatch-holder bg-arielle-smile switch-header-cs-class" data-class="bg-arielle-smile header-text-light">
</div>
<div class="swatch-holder bg-plum-plate switch-header-cs-class" data-class="bg-plum-plate header-text-light">
</div>
<div class="swatch-holder bg-happy-fisher switch-header-cs-class" data-class="bg-happy-fisher header-text-dark">
</div>
<div class="swatch-holder bg-happy-itmeo switch-header-cs-class" data-class="bg-happy-itmeo header-text-light">
</div>
<div class="swatch-holder bg-mixed-hopes switch-header-cs-class" data-class="bg-mixed-hopes header-text-light">
</div>
<div class="swatch-holder bg-strong-bliss switch-header-cs-class" data-class="bg-strong-bliss header-text-light">
</div>
<div class="swatch-holder bg-grow-early switch-header-cs-class" data-class="bg-grow-early header-text-light">
</div>
<div class="swatch-holder bg-love-kiss switch-header-cs-class" data-class="bg-love-kiss header-text-light">
</div>
<div class="swatch-holder bg-premium-dark switch-header-cs-class" data-class="bg-premium-dark header-text-light">
</div>
<div class="swatch-holder bg-happy-green switch-header-cs-class" data-class="bg-happy-green header-text-light">
</div>
</div>
</li>
</ul>
</div>
<h3 class="themeoptions-heading">
<div>Sidebar Options</div>
<button type="button" class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-sidebar-cs-class" data-class="">
Restore Default
</button>
</h3>
<div class="p-3">
<ul class="list-group">
<li class="list-group-item">
<h5 class="pb-2">Choose Color Scheme
</h5>
<div class="theme-settings-swatches">
<div class="swatch-holder bg-primary switch-sidebar-cs-class" data-class="bg-primary sidebar-text-light">
</div>
<div class="swatch-holder bg-secondary switch-sidebar-cs-class" data-class="bg-secondary sidebar-text-light">
</div>
<div class="swatch-holder bg-success switch-sidebar-cs-class" data-class="bg-success sidebar-text-dark">
</div>
<div class="swatch-holder bg-info switch-sidebar-cs-class" data-class="bg-info sidebar-text-dark">
</div>
<div class="swatch-holder bg-warning switch-sidebar-cs-class" data-class="bg-warning sidebar-text-dark">
</div>
<div class="swatch-holder bg-danger switch-sidebar-cs-class" data-class="bg-danger sidebar-text-light">
</div>
<div class="swatch-holder bg-light switch-sidebar-cs-class" data-class="bg-light sidebar-text-dark">
</div>
<div class="swatch-holder bg-dark switch-sidebar-cs-class" data-class="bg-dark sidebar-text-light">
</div>
<div class="swatch-holder bg-focus switch-sidebar-cs-class" data-class="bg-focus sidebar-text-light">
</div>
<div class="swatch-holder bg-alternate switch-sidebar-cs-class" data-class="bg-alternate sidebar-text-light">
</div>
<div class="divider">
</div>
<div class="swatch-holder bg-vicious-stance switch-sidebar-cs-class" data-class="bg-vicious-stance sidebar-text-light">
</div>
<div class="swatch-holder bg-midnight-bloom switch-sidebar-cs-class" data-class="bg-midnight-bloom sidebar-text-light">
</div>
<div class="swatch-holder bg-night-sky switch-sidebar-cs-class" data-class="bg-night-sky sidebar-text-light">
</div>
<div class="swatch-holder bg-slick-carbon switch-sidebar-cs-class" data-class="bg-slick-carbon sidebar-text-light">
</div>
<div class="swatch-holder bg-asteroid switch-sidebar-cs-class" data-class="bg-asteroid sidebar-text-light">
</div>
<div class="swatch-holder bg-royal switch-sidebar-cs-class" data-class="bg-royal sidebar-text-light">
</div>
<div class="swatch-holder bg-warm-flame switch-sidebar-cs-class" data-class="bg-warm-flame sidebar-text-dark">
</div>
<div class="swatch-holder bg-night-fade switch-sidebar-cs-class" data-class="bg-night-fade sidebar-text-dark">
</div>
<div class="swatch-holder bg-sunny-morning switch-sidebar-cs-class" data-class="bg-sunny-morning sidebar-text-dark">
</div>
<div class="swatch-holder bg-tempting-azure switch-sidebar-cs-class" data-class="bg-tempting-azure sidebar-text-dark">
</div>
<div class="swatch-holder bg-amy-crisp switch-sidebar-cs-class" data-class="bg-amy-crisp sidebar-text-dark">
</div>
<div class="swatch-holder bg-heavy-rain switch-sidebar-cs-class" data-class="bg-heavy-rain sidebar-text-dark">
</div>
<div class="swatch-holder bg-mean-fruit switch-sidebar-cs-class" data-class="bg-mean-fruit sidebar-text-dark">
</div>
<div class="swatch-holder bg-malibu-beach switch-sidebar-cs-class" data-class="bg-malibu-beach sidebar-text-light">
</div>
<div class="swatch-holder bg-deep-blue switch-sidebar-cs-class" data-class="bg-deep-blue sidebar-text-dark">
</div>
<div class="swatch-holder bg-ripe-malin switch-sidebar-cs-class" data-class="bg-ripe-malin sidebar-text-light">
</div>
<div class="swatch-holder bg-arielle-smile switch-sidebar-cs-class" data-class="bg-arielle-smile sidebar-text-light">
</div>
<div class="swatch-holder bg-plum-plate switch-sidebar-cs-class" data-class="bg-plum-plate sidebar-text-light">
</div>
<div class="swatch-holder bg-happy-fisher switch-sidebar-cs-class" data-class="bg-happy-fisher sidebar-text-dark">
</div>
<div class="swatch-holder bg-happy-itmeo switch-sidebar-cs-class" data-class="bg-happy-itmeo sidebar-text-light">
</div>
<div class="swatch-holder bg-mixed-hopes switch-sidebar-cs-class" data-class="bg-mixed-hopes sidebar-text-light">
</div>
<div class="swatch-holder bg-strong-bliss switch-sidebar-cs-class" data-class="bg-strong-bliss sidebar-text-light">
</div>
<div class="swatch-holder bg-grow-early switch-sidebar-cs-class" data-class="bg-grow-early sidebar-text-light">
</div>
<div class="swatch-holder bg-love-kiss switch-sidebar-cs-class" data-class="bg-love-kiss sidebar-text-light">
</div>
<div class="swatch-holder bg-premium-dark switch-sidebar-cs-class" data-class="bg-premium-dark sidebar-text-light">
</div>
<div class="swatch-holder bg-happy-green switch-sidebar-cs-class" data-class="bg-happy-green sidebar-text-light">
</div>
</div>
</li>
</ul>
</div>
<h3 class="themeoptions-heading">
<div>Main Content Options</div>
<button type="button" class="btn-pill btn-shadow btn-wide ml-auto active btn btn-focus btn-sm">Restore Default
</button>
</h3>
<div class="p-3">
<ul class="list-group">
<li class="list-group-item">
<h5 class="pb-2">Page Section Tabs
</h5>
<div class="theme-settings-swatches">
<div role="group" class="mt-2 btn-group">
<button type="button" class="btn-wide btn-shadow btn-primary btn btn-secondary switch-theme-class" data-class="body-tabs-line">
Line
</button>
<button type="button" class="btn-wide btn-shadow btn-primary active btn btn-secondary switch-theme-class" data-class="body-tabs-shadow">
Shadow
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Ganti dengan <?=$sidebar;?>
Untuk menu.php ambil bagian :
<div class="app-sidebar sidebar-shadow">
<div class="app-header__logo">
<div class="logo-src"></div>
<div class="header__pane ml-auto">
<div>
<button type="button" class="hamburger close-sidebar-btn hamburger--elastic" data-class="closed-sidebar">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
</div>
<div class="app-header__mobile-menu">
<div>
<button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
<div class="app-header__menu">
<span>
<button type="button" class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
<span class="btn-icon-wrapper">
<i class="fa fa-ellipsis-v fa-w-6"></i>
</span>
</button>
</span>
</div> <div class="scrollbar-sidebar">
<div class="app-sidebar__inner">
<ul class="vertical-nav-menu">
<li class="app-sidebar__heading">Dashboards</li>
<li>
<a href="index.html" class="mm-active">
<i class="metismenu-icon pe-7s-rocket"></i>
Dashboard Example 1
</a>
</li>
<li class="app-sidebar__heading">UI Components</li>
<li
>
<a href="#">
<i class="metismenu-icon pe-7s-diamond"></i>
Elements
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul
>
<li>
<a href="elements-buttons-standard.html">
<i class="metismenu-icon"></i>
Buttons
</a>
</li>
<li>
<a href="elements-dropdowns.html">
<i class="metismenu-icon">
</i>Dropdowns
</a>
</li>
<li>
<a href="elements-icons.html">
<i class="metismenu-icon">
</i>Icons
</a>
</li>
<li>
<a href="elements-badges-labels.html">
<i class="metismenu-icon">
</i>Badges
</a>
</li>
<li>
<a href="elements-cards.html">
<i class="metismenu-icon">
</i>Cards
</a>
</li>
<li>
<a href="elements-list-group.html">
<i class="metismenu-icon">
</i>List Groups
</a>
</li>
<li>
<a href="elements-navigation.html">
<i class="metismenu-icon">
</i>Navigation Menus
</a>
</li>
<li>
<a href="elements-utilities.html">
<i class="metismenu-icon">
</i>Utilities
</a>
</li>
</ul>
</li>
<li
>
<a href="#">
<i class="metismenu-icon pe-7s-car"></i>
Components
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul
>
<li>
<a href="components-tabs.html">
<i class="metismenu-icon">
</i>Tabs
</a>
</li>
<li>
<a href="components-accordions.html">
<i class="metismenu-icon">
</i>Accordions
</a>
</li>
<li>
<a href="components-notifications.html">
<i class="metismenu-icon">
</i>Notifications
</a>
</li>
<li>
<a href="components-modals.html">
<i class="metismenu-icon">
</i>Modals
</a>
</li>
<li>
<a href="components-progress-bar.html">
<i class="metismenu-icon">
</i>Progress Bar
</a>
</li>
<li>
<a href="components-tooltips-popovers.html">
<i class="metismenu-icon">
</i>Tooltips & Popovers
</a>
</li>
<li>
<a href="components-carousel.html">
<i class="metismenu-icon">
</i>Carousel
</a>
</li>
<li>
<a href="components-calendar.html">
<i class="metismenu-icon">
</i>Calendar
</a>
</li>
<li>
<a href="components-pagination.html">
<i class="metismenu-icon">
</i>Pagination
</a>
</li>
<li>
<a href="components-scrollable-elements.html">
<i class="metismenu-icon">
</i>Scrollable
</a>
</li>
<li>
<a href="components-maps.html">
<i class="metismenu-icon">
</i>Maps
</a>
</li>
</ul>
</li>
<li >
<a href="tables-regular.html">
<i class="metismenu-icon pe-7s-display2"></i>
Tables
</a>
</li>
<li class="app-sidebar__heading">Widgets</li>
<li>
<a href="dashboard-boxes.html">
<i class="metismenu-icon pe-7s-display2"></i>
Dashboard Boxes
</a>
</li>
<li class="app-sidebar__heading">Forms</li>
<li>
<a href="forms-controls.html">
<i class="metismenu-icon pe-7s-mouse">
</i>Forms Controls
</a>
</li>
<li>
<a href="forms-layouts.html">
<i class="metismenu-icon pe-7s-eyedropper">
</i>Forms Layouts
</a>
</li>
<li>
<a href="forms-validation.html">
<i class="metismenu-icon pe-7s-pendrive">
</i>Forms Validation
</a>
</li>
<li class="app-sidebar__heading">Charts</li>
<li>
<a href="charts-chartjs.html">
<i class="metismenu-icon pe-7s-graph2">
</i>ChartJS
</a>
</li>
<li class="app-sidebar__heading">PRO Version</li>
<li>
<a href="https://dashboardpack.com/theme-details/architectui-dashboard-html-pro/" target="_blank">
<i class="metismenu-icon pe-7s-graph2">
</i>
Upgrade to PRO
</a>
</li>
</ul>
</div>
</div>
</div>
Ganti dengan <?=$menu;?>
Untuk footer.php ambil bagian :
<div class="app-wrapper-footer">
<div class="app-footer">
<div class="app-footer__inner">
<div class="app-footer-left">
<ul class="nav">
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link">
Footer Link 1
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link">
Footer Link 2
</a>
</li>
</ul>
</div>
<div class="app-footer-right">
<ul class="nav">
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link">
Footer Link 3
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link">
<div class="badge badge-success mr-1 ml-0">
<small>NEW</small>
</div>
Footer Link 4
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Ganti dengan <?=$footer;?>
sehingga untuk index.php hasil akhirnya seperti ini :
Ganti
<link href="./main.css" rel="stylesheet"></head>
menjadi
<link href="./include/admin/main.css" rel="stylesheet"></head>
Ganti
<script type="text/javascript" src="./assets/scripts/main.js"></script>
menjadi
<script type="text/javascript" src="./include/admin/assets/scripts/main.js"></script>
Ganti
<title>Analytics Dashboard - This is an example dashboard created using build-in elements and components.</title>
menjadi
<title><?=$title;?> - Administrator</title>
Selanjutnya buat Controller dengan nama Admin.php dan isikan kode dibawah :
<?php namespace App\Controllers;
use CodeIgniter\Controller;
class Admin extends Controller
{
public function __construct()
{
}
public function index()
{
$dataIndex['title'] = "Dashboard";
$dataIndex['header'] = view("admin/header");
$dataIndex['sidebar'] = view("admin/sidebar");
$dataIndex['menu'] = view("admin/menu");
$dataIndex['footer'] = view("admin/footer");
//$dataIndex['content'] = view("admin/content");
return view('admin/index', $dataIndex);
}
}
//$dataIndex['content'] = view("admin/content"); ini merupakan konten dinamis yang akan kita buat di tutorial selanjutnya.
Akses dengan alamat http://localhost:8080/admin
Sekian tutorial Membuat Web Administrator Dengan CodeIgniter 4 (Tutorial CodeIgniter 4 #Part 1) nantikan tutorial selanjutnya 
Artikel Dipost Oleh Hariadi
Seorang freelancer website and software developer, gemar dengan ilmu seputar IT serta penuh semangat untuk belajar.
Copyright © 2014 - 2024. All rights reserved By Haysia Development.
sudah di perbaiki ya gan, makasih infonya.