Introduction
This time I will share how I create a PHP Native Layouting as shown below.
Turn on Local Server
The first thing we will do is, turn on the local server on our computer using the XAMPP application.
Then open File Explorer and go to your xampp\htdocs\ folder. Then you create a special folder for this tutorial.
Open Code Editor
Then open your code editor application and open the folder/workspace that you created earlier. And it's time to code!
Let's Code!
<!-- index.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.0">
<title>Document</title>
</head>
<body>
<!-- Wrapper div -->
<div id="wrapper">
<!-- Header div -->
<div id="header">
<?php
include('header.php'); // File containing header code
?>
</div>
<!-- Content div -->
<div id="content">
<!-- Left Col div -->
<div id="leftCol">
<?php
include('leftMenu.php'); // File containing the menu
?>
</div>
<!-- Center col -->
<div id="centerCol">
<?php
$page = $_GET['page']; // To get the page
if($page == null) {
$page = 'home'; // Set page to home, if not set
}
switch ($page) {
case 'home':
include('home.php');
break;
case 'about':
include('about.php');
break;
case 'contact':
include('contact.php');
break;
}
?>
</div>
</div>
<!-- Footer div -->
<div id="footer">
<?php
include('footer.php'); // File containing the footer
?>
</div>
</div>
</body>
</html>
<!-- header.php -->
<?php
echo "This is header";
?>
<!-- leftMenu.php -->
<?php
echo "<a href='./?page=home'>Home</a>"; // set page to home
echo "<a href='./?page=about'>About</a>"; // page = about
echo "<a href='./?page=contact'>Contact</a>"; // page = contact
?>
<!-- home.php -->
<?php
echo "This is home";
?>
<!-- about.php -->
<?php
echo "This is about";
?>
<!-- contact.php -->
<?php
echo "This is contact";
?>
<!-- footer.php -->
<?php
echo "This is footer";
?>