Membuat Konten Dinamis Web Admin (Tutorial Codeigniter 4 #Part 3)

Membuat Konten Dinamis Web Admin (Tutorial Codeigniter 4 #Part 3)

Membuat Konten Dinamis Web Admin (Tutorial Codeigniter 4 #Part 3)


Sekarang saya akan memberikan tutorial Membuat Konten Dinamis Web Admin Dengan Codeigniter 4, berdasarkan tutorial Part 1 yang pernah saya jelaskan mengenai bagian yang akan diambil sebagai konten dinamis.

 

Jadi konten dinamis ini akan kita simpan disebuah folder dimana file-file dari folder tersebut yang akan dijadikan konten dinamisnya..

 

Oh ya sebelum anda melanjutkan tutorial ini baca dulu tutorial sebelumnya Membuat Web Administrator Dengan CodeIgniter 4 (Tutorial CodeIgniter 4 #Part 1) & Membuat Halaman Login Web Admin (Tutorial CodeIgniter 4 #Part 2).

 

Buat sebuah folder di public/include dengan nama component dan dalam folder public/include/component buat sebuah folder dengan nama dashboard dan buat file di dalam folder dashboard dengan nama dashboar.php, dashboard.css, dashboard.js dan data_dashboard.php.

 

pada file dashboard.css, dashboard.js anda bisa menambahkan CSS dan JS sedangkan data_dashboard.php digunakan untuk menambahkan css dan js dinamis yang hanya digunakan untuk komponen tersebut, misal di dashboard kita akan menggunakan chartJs maka untuk file css dan js chartJs akan diload disini dan juga pembuatan title serta data lain yang akan di passing ke dashboard.php.

 

Buka file data_dashboard.php yang telah dibuat tadi di public/include/component/dashboard/data_dashboard.php dan isikan kode berikut :

 

<?php

$dataIndex['title'] = "Dashboard";
$dataContent['users'] = $this->moduser->asObject()->findAll();

Akan ditampilkan di halaman dahsboard.php

 

Buka file dashboard.php yang telah dibuat tadi di public/include/component/dashboard/dashboard.php dan isikan kode berikut :

 

<div class="app-main__inner">
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-car icon-gradient bg-mean-fruit">
                    </i>
                </div>
                <div>Dashboard
                    <div class="page-title-subheading">Dashboard Analisis, Menampilkan statistik pengunjung
                    </div>
                </div>
            </div> 
        </div>
    </div>       
    <div class="row">
        <div class="col-md-12">
            <div class="main-card mb-3 card">
                <div class="card-header">Semua Pengguna</div>
                
                <div class="table-responsive">
                    <table class="align-middle mb-0 table table-borderless table-striped table-hover">
                        <thead>
                        <tr>
                            <th class="text-center">ID</th>
                            <th>Username</th>
                            <th class="text-center">User Level</th>
                            <th class="text-center">Status</th>
                        </tr>
                        </thead>
                        <tbody>
                        <?php 
                        if (count($users) > 0) {
                            foreach ($users as $user) { ?>
                                <tr>
                                    <td class="text-center text-muted">#<?=$user->user_id;?></td>
                                    <td>
                                        <div class="widget-content p-0">
                                            <div class="widget-content-wrapper">
                                                <div class="widget-content-left mr-3">
                                                    <div class="widget-content-left">
                                                        <img width="40" class="rounded-circle" src="./include/admin/assets/images/avatars/3.jpg" alt="">
                                                    </div>
                                                </div>
                                                <div class="widget-content-left flex2">
                                                    <div class="widget-heading"><?=$user->username;?></div>
                                                    <div class="widget-subheading opacity-7">Biografi pengguna aplikasi</div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center"><?=$user->user_level;?></td>
                                    <td class="text-center">
                                        <div class="badge badge-success"><?=$user->active;?></div>
                                    </td>
                                </tr>
                        <?php }
                        } ?>
                        </tbody>
                    </table>
                </div>
                <div class="d-block text-center card-footer">
                </div>
            </div>
        </div>
    </div>
</div>

ini merupakan view dashboard

 

Buka file public/include/admin/index.php hapus bagian tag <div class="app-main__inner"> dan gantikan dengan <?=$content;?>.sehingga hasil akhirnya seperti berikut :

 

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Language" content="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title><?=$title;?> - Administrator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
    <meta name="description" content="This is an example dashboard created using build-in elements and components.">
    <meta name="msapplication-tap-highlight" content="no">
    <!--
    =========================================================
    * ArchitectUI HTML Theme Dashboard - v1.0.0
    =========================================================
    * Product Page: https://dashboardpack.com
    * Copyright 2019 DashboardPack (https://dashboardpack.com)
    * Licensed under MIT (https://github.com/DashboardPack/architectui-html-theme-free/blob/master/LICENSE)
    =========================================================
    * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
    -->
<link href="./include/admin/main.css" rel="stylesheet">
</head>
<body>
    <div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
        <?=$header;?>
        <?=$sidebar;?>
        <div class="app-main">
            <?=$menu;?>

            <div class="app-main__outer">
                <?=$content;?>
                <?=$footer;?>
            </div>
            
            <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
        </div>
    </div>
<script type="text/javascript" src="./include/admin/assets/scripts/main.js"></script></body>
</html>

 

Buat sebuah file di app/views/admin dengan nama content.php dan tambahkan kode berikut :

 

<?php (isset($com_path) && $com_path != '') ? include_once ($com_path) : '';?>

 

Buat sebuah file di app/views/admin dengan nama 404.php dan tambahkan kode berikut :

 

<?php include ('./include/admin/404.php');?>

 

Buat sebuah file di public/include/admin dengan nama 404.php dan tambahkan kode berikut :

 

<div class="app-main__inner">
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-info icon-gradient bg-strong-bliss">
                    </i>
                </div>
                <div>404 - Opss!, Halaman tidak ditemukan.
                    <div class="page-title-subheading">Halaman yang anda cari tidak dapat ditemukan oleh sistem kami
                    </div>
                </div>
            </div>
        </div>
    </div>          
    <div class="row">
        <div class="col-md-12">
            <div class="main-card mb-3 card">
                <h1 class="text-center">404</h1>
            </div>
        </div>
    </div>
</div>

Ini merupakan halaman 404.

 

Buka file app/controllers/Admin.php dan gantikan kodenya dengan kode berikut :

 

<?php namespace App\Controllers;
use CodeIgniter\Controller;

use App\Libraries\Notification;

class Admin extends Controller
{
    protected $helpers = ['form','date'];
	protected $session = null;
	protected $request = null;

	public function __construct()
	{
		$this->session = session();
		$this->request = \Config\Services::request();
		$this->language = \Config\Services::language();
		$this->language->setLocale(ADM_LANG);
		define('FULL_URL', $_SERVER['QUERY_STRING'] ? current_url().'?'.$_SERVER['QUERY_STRING'] : current_url());

		$this->notif = new Notification();
		$this->moduser = model('App\Models\ModUsers');
	}


	public function index()
	{
		if ($this->session->has('message')) {
			$dataIndex['message'] = $this->session->get('message');
		} else {
			$dataIndex['message'] = "";
		};

        if (!isset($_SESSION['admin_logged_in'])) {
			$dataIndex['title'] = "Login - Administrator";
			$this->session->removeTempdata('message');
			return view('admin/login', $dataIndex);
		}

        $dataIndex['header'] = view("admin/header");
        $dataIndex['sidebar'] = view("admin/sidebar");
        $dataIndex['menu'] = view("admin/menu");
		$dataIndex['footer'] = view("admin/footer");
		
        $view = $this->request->getVar('view');
		$childView = $this->request->getVar('child');

		$com_file = "./include/component/" . $view . "/" . $view . ".php";
		$act_file = "./include/component/" . $view . "/" . $childView . ".php";
        $css_com_path = "./include/component/" . $view . "/" . $view . ".css";
        $js_com_path = "./include/component/" . $view . "/" . $view . ".js";
		
		$data_com_file = "./include/component/" . $view . "/data_" . $view . ".php";
		if (file_exists($data_com_file)) {
			include ($data_com_file);
		}
				
		$dataContent['com_path'] = '';
			
		if (FULL_URL == base_url('admin') && (!isset($view)) && (!isset($childView))) {
			return redirect()->to(base_url('admin?view=dashboard'));
		} elseif (FULL_URL != base_url('admin') && (isset($view)) && (!isset($childView))) {
			if (file_exists($com_file)){
				$dataContent['com_path'] = $com_file;
				if (file_exists($css_com_path)){
					$dataIndex['css'] = '<link rel="stylesheet" href="' . base_url($css_com_path) . '">';
				}
				if (file_exists($js_com_path)){
					$dataIndex['js'] = '<script src="' . base_url($js_com_path) . '"></script>';
				}
				$dataIndex['content'] = view('admin/content', $dataContent);
			} else {
				
				$dataIndex['title'] = "Opss!, Halaman tidak ditemukan";
				$dataIndex['content'] = view('admin/404');
			}
		} elseif (FULL_URL != base_url('admin') && (isset($view)) && (isset($childView))) {
			if (file_exists($com_file) && file_exists($act_file)){
				$dataContent['com_path'] = $act_file;
				if (file_exists($css_com_path)){
					$dataIndex['css'] = '<link rel="stylesheet" href="' . base_url($css_com_path) . '">';
				}
				if (file_exists($js_com_path)){
					$dataIndex['js'] = '<script src="' . base_url($js_com_path) . '"></script>';
				}
				$dataIndex['content'] = view('admin/content', $dataContent);
			} else {
				$dataIndex['title'] = "Opss!, Halaman tidak ditemukan";
				$dataIndex['content'] = view('admin/404');
			}
			
		} elseif (FULL_URL != base_url('admin') && (!isset($view)) && (!isset($childView))) {
			$dataIndex['title'] = "Opss!, Halaman tidak ditemukan";
			$dataIndex['content'] = view('admin/404');
		}

		$this->session->removeTempdata('message');
		return view('admin/index', $dataIndex);
        
	}

	public function login()
	{
		$username = $this->request->getPost('username');
		$password = $this->request->getPost('password');

		if (isset($_SESSION['admin_logged_in'])) {
			return redirect()->to(base_url('admin'));
		}

		if (!isset($_SESSION['admin_logged_in']) && (empty($username) || empty($password))){
			$this->notif->message('Data login tidak lengkap', 'danger');
			return redirect()->to(base_url('admin'));
		}

		if (!isset($_SESSION['admin_logged_in']) && isset($username) && isset($password)) {
			$datauser = [
				'username' => $username,
				'password' => md5($password)
			];
			$user = $this->moduser->asObject()->where($datauser)->limit(1)->find();;
			if (count($user) > 0) {
        		if ($user[0]->active === 'N') {
					$this->notif->message('Akun anda tidak aktif', 'danger');
					return redirect()->to(base_url('admin'));
				} elseif ($user[0]->user_level !== '1') {
					$this->notif->message('Akun anda bukan Admin, dan tidak memiliki akses ke halaman ini', 'danger');
					return redirect()->to(base_url('admin'));
				} else {
					$data_session = array(
						'admin_user_id' => $user[0]->user_id,
						'admin_username' => $user[0]->username,
						'admin_level' => $user[0]->user_level,
						'admin_logged_in' => TRUE
					);
					$this->session->set($data_session);
					return redirect()->to(base_url('admin'));
				}
			} else {
				$this->notif->message('username atau password anda salah', 'danger');
				return redirect()->to(base_url('admin'));
			}
		}
        
	}

	public function logout(){
		$array_items = array('admin_user_id','admin_username','admin_level','admin_logged_in');
		$this->session->remove($array_items);
		return redirect()->to(base_url('admin'));
	}


}

 

Keterangan :

 

Mendefinisikan FULL_URL

define('FULL_URL', $_SERVER['QUERY_STRING'] ? current_url().'?'.$_SERVER['QUERY_STRING'] : current_url());

 

Mengambil variabel url.

$view = $this->request->getVar('view');
$childView = $this->request->getVar('child');

 

Mengambil file data komponen.

$com_file = "./include/component/" . $view . "/" . $view . ".php";
$act_file = "./include/component/" . $view . "/" . $childView . ".php";
$css_com_path = "./include/component/" . $view . "/" . $view . ".css";
$js_com_path = "./include/component/" . $view . "/" . $view . ".js";
		
$data_com_file = "./include/component/" . $view . "/data_" . $view . ".php";
if (file_exists($data_com_file)) {
	include ($data_com_file);
}

 

Membuat variable awal untuk kontennya

$dataContent['com_path'] = '';

 

Membuat view

if (FULL_URL == base_url('admin') && (!isset($view)) && (!isset($childView))) {
			return redirect()->to(base_url('admin?view=dashboard'));
		} elseif (FULL_URL != base_url('admin') && (isset($view)) && (!isset($childView))) {
			if (file_exists($com_file)){
				$dataContent['com_path'] = $com_file;
				if (file_exists($css_com_path)){
					$dataIndex['css'] = '<link rel="stylesheet" href="' . base_url($css_com_path) . '">';
				}
				if (file_exists($js_com_path)){
					$dataIndex['js'] = '<script src="' . base_url($js_com_path) . '"></script>';
				}
				$dataIndex['content'] = view('admin/content', $dataContent);
			} else {
				
				$dataIndex['title'] = "Opss!, Halaman tidak ditemukan";
				$dataIndex['content'] = view('admin/404');
			}
		} elseif (FULL_URL != base_url('admin') && (isset($view)) && (isset($childView))) {
			if (file_exists($com_file) && file_exists($act_file)){
				$dataContent['com_path'] = $act_file;
				if (file_exists($css_com_path)){
					$dataIndex['css'] = '<link rel="stylesheet" href="' . base_url($css_com_path) . '">';
				}
				if (file_exists($js_com_path)){
					$dataIndex['js'] = '<script src="' . base_url($js_com_path) . '"></script>';
				}
				$dataIndex['content'] = view('admin/content', $dataContent);
			} else {
				$dataIndex['title'] = "Opss!, Halaman tidak ditemukan";
				$dataIndex['content'] = view('admin/404');
			}
			
		} elseif (FULL_URL != base_url('admin') && (!isset($view)) && (!isset($childView))) {
			$dataIndex['title'] = "Opss!, Halaman tidak ditemukan";
			$dataIndex['content'] = view('admin/404');
		}

 

Buka file public/include/admin/menu.php dan cari kode :

<a href="index.html" class="mm-active">
	<i class="metismenu-icon pe-7s-rocket"></i>
	Dashboard Example 1
</a>

gantikan dengan

<a href="admin?view=dashboard" class="mm-active">
	<i class="metismenu-icon pe-7s-rocket"></i>
	Dashboard
</a>

 

Buka halaman http://localhost:8080/admin?view=dashboard silahkan login dan lihat hasilnya, data loginnya ada di tutorial Membuat Halaman Login Web Admin (Tutorial CodeIgniter 4 #Part 2)

 

Bagikan


Artikel Dipost Oleh Hariadi

Seorang freelancer website and software developer, gemar dengan ilmu seputar IT serta penuh semangat untuk belajar.


0 Komentar

Tidak ada komentar


Berikan komentar ...