membuat templating atau memecah template
on going
untuk memecah bagian HTML menjadi beberapa bagian seperti header, footer dan content, itu disebut templating, untuk membuat templating bisa memanggil function view
example :
view
- auth
- layout
- header.php
- footer.php
- pages
- login.php
- layout
controller di load di awal view sebelum meletakan berkas view
<?php
# load controllernya
controller("loginController");
?>
<!-- # load template header -->
<?= view("auth/layout/header")?>
# content here ...
berkas login.php
<!-- # load template header -->
<?= view("auth/layout/header")?>
<div class="limiter">
<div class="container-login100">
# content here ...
</div>
</div>
<!-- # load template footer -->
<?= view("auth/layout/footer")?>
berkas header.php
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<title><?= title() ?></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="<?= asset("vendor/bootstrap/css/bootstrap.min.css") ?>">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="<?= asset("fonts/font-awesome-4.7.0/css/font-awesome.min.css") ?>">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="<?= asset("fonts/Linearicons-Free-v1.0.0/icon-font.min.css") ?>">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="<?= asset("vendor/animate/animate.css") ?>">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="<?= asset("vendor/css-hamburgers/hamburgers.min.css") ?>">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="<?= asset("vendor/animsition/css/animsition.min.css") ?>">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="<?= asset("vendor/select2/select2.min.css") ?>">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="<?= asset("vendor/daterangepicker/daterangepicker.css") ?>">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="<?= asset("css/util.css") ?>">
<link rel="stylesheet" type="text/css" href="<?= asset("css/main.css") ?>">
<!--===============================================================================================-->
</head>
<body>
berkas footer.php
<!--===============================================================================================-->
<script src="<?= asset("vendor/jquery/jquery-3.2.1.min.js") ?>"></script>
<!--===============================================================================================-->
<script src="<?= asset("vendor/animsition/js/animsition.min.js") ?>"></script>
<!--===============================================================================================-->
<script src="<?= asset("vendor/bootstrap/js/popper.js") ?>"></script>
<script src="<?= asset("vendor/bootstrap/js/bootstrap.min.js") ?>"></script>
<!--===============================================================================================-->
<script src="<?= asset("vendor/select2/select2.min.js") ?>"></script>
<!--===============================================================================================-->
<script src="<?= asset("vendor/daterangepicker/moment.min.js") ?>"></script>
<script src="<?= asset("vendor/daterangepicker/daterangepicker.js") ?>"></script>
<!--===============================================================================================-->
<script src="<?= asset("vendor/countdowntime/countdowntime.js") ?>"></script>
<!--===============================================================================================-->
<script src="<?= asset("js/main.js") ?>"></script>
</body>
</html>