I want my page to load the header and side menu once and they may remain reload when I navigate to another page . I need to know how facebook does it at the same time what libraries and languages are needed to execute such a task
/*main page*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Feedback</title>
<link rel="icon" href="images/22_64.png" type="image/x-icon" sizes="32x32"/>
<link rel="stylesheet" href="style/style.css">
<script src="js/main.js"></script>
<script src="js/ajax.js"></script>
<script>
function _(id){ return document.getElementById(id); }
function submitForm(){
}
</script>
</head>
<body id="feedback_body">
<?php include_once("header.php"); ?>
<?php if(isset($_SESSION['username'])) { ?>
<?php include_once("side_menu.php"); ?>
<?php } ?>
<div id="for_feedback">
<table width="" height="auto" style="background-color:orange; width:100%; color:#fff; font-size:20px;"><tr><td style="height:40px; width:auto; text-align:center;"><b>Please let us any problem you find.</b></td></tr></table><br />
<form id="my_form" onsubmit="submitForm(); return false;">
<div style="float:left;"><input style="width:240px; height:28px; border-radius:3px;" id="n" placeholder=" Name" required>
<span><input style="width:240px; height:28px; border-radius:3px;" id="e" placeholder=" Email Address" type="email" required></span></div>
<br /><br /><br />
<textarea id="m" style="width:793px; border-radius:4px; font-family:Tahoma, Geneva, sans-serif; box-shadow: inset 2px 2px #888888;" placeholder=" Describe your problem here" rows="10" required></textarea>
<div style="float:right; margin-right:5px;"><span id="statuser"></span><input id="mybtn" class="feedback_btn" type="submit" value="Send"></div>
</form>
</div>
</body>
</html>
/*Header*/
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<link rel="icon" href="images/22_64.png" type="image/x-icon" sizes="32x32"/>
<link rel="stylesheet" href="style/search.css" />
<link rel="stylesheet" href="style/bootstrap.css" />
<script src="js/bootstrap.js"></script>
<script src="dialog2.js"></script>
<header id="header">
<div id="logo">
<a href="home">
<div id="main_ico"></div>
</a>
</div>
<div id="logsign">
<?php if(isset($_SESSION['username'])) {
if($numrows400 < 1){
echo " ".$feedback." ".$changepwd;
}
else{
echo " ".$feedback." ".$changepwd;
}
include_once("php_includes/db_conx.php");
$sql71 = "SELECT * FROM online WHERE onlineuser='$log_username'";
$query71 = mysqli_query($db_conx, $sql71);
$numrows = mysqli_num_rows($query71);
if($numrows < 1){
$sql70 = "INSERT INTO online(onlineuser, lastcheck) VALUES('$log_username',now())";
$query = mysqli_query($db_conx, $sql70);
}else
{
$sql70 = "UPDATE online SET lastcheck=now() WHERE onlineuser='$log_username' LIMIT 1";
$query = mysqli_query($db_conx, $sql70);
}
}
?> <?php echo $loginLink; ?>
</div>
<div id="home">
<?php if(isset($_SESSION['username'])) { ?>
<a href="home">
<img src="images/home.png" height="32" width="32"alt="home" title="Home">
</a><?php } ?>
</div>
<div id="home">
<?php if(isset($_SESSION['username'])) { ?>
<?php echo "<a title=".$log_username." href=".$log_username.">".$user_top."</a>"; ?>
<?php } ?>
</div>
<div id="home">
<!-- <a href="feed.php">Feed</a>-->
<?php if(isset($_SESSION['username'])) { ?>
<a href="all_groups"><img src="images/group3.png" alt="groups" border="0" title="Groups" ></a>
<?php } ?></div>
<div id="home">
<?php if(isset($_SESSION['username'])) { ?>
<?php echo $messager; ?>
<?php } ?>
</div>
<form class="search" action="search" id="search" method="get">
<?php if(isset($_SESSION['username'])) { ?>
<input name="searchquery" type="text" size="44" placeholder="Search..." maxlength="88" required />
<?php } ?>
</form><span id="statuses">checking...</span>
<div id="home_2">
<?php if(isset($_SESSION['username'])) {
if($numrows400 < 1){
echo $notedrop;
}
else{
echo $notedrop1; }
} ?>
</div>
</header>
<script src="js/main.js"></script>
<script src="js/ajax.js"></script>
<script src="js/jquery-2.1.4.js"></script>
/*side menu*/
<div id="main_panel">
<ul style="list-style:none;">
<a href="h" style="color:#CCC;"><li id="sub_panel" <?php if ($thisPage == "h"){?> class="active" <?php }?>><b>H</b></li></a>
<a href=<?php echo $le; ?> style="color:#CCC;"><li id="sub_panel" <?php if ($thisPage == "u"){?> class="active" <?php }?> ><b>P</b></li></a>
<a href="i" style="color:#CCC;"><li id="sub_panel" <?php if ($thisPage == "i"){?> class="active" <?php }?> ><b>M<?php echo $messer ?></b></li></a>
<a href="n" style="color:#CCC;"><li id="sub_panel" <?php if ($thisPage == "n"){?> class="active" <?php }?> ><b>N<span id="panelnoti"><?php echo $noter ?></span></b></li></a>
</ul>
<hr />
<ul>
<a href="a" style="color:#CCC;"><li id="sub_panel" <?php if ($thisPage == "g"){?> class="active" <?php }?>><b>G [<?php echo $g_check; ?>]</b></li></a>
</ul>
<div style="max-height:230px; min-height:100px; overflow-y:auto;">
<?php echo $mg; ?>
</div>
<hr />
<ul style="list-style:none;">
<a href="b" style="color:#CCC;"><li id="sub_panel" <?php if ($thisPage == "b"){?> class="active" <?php }?>><b>R</b></li></a>
<a href="p" style="color:#CCC;"><li id="sub_panel" <?php if ($thisPage == "p"){?> class="active" <?php }?>><b>P</b></li></a>
<a href="s" style="color:#CCC;"><li id="sub_panel" <?php if ($thisPage == "sphp"){?> class="active" <?php }?>><b>S</b></li></a>
<a href="t" style="color:#CCC;"><li id="sub_panel" <?php if ($thisPage == "t.php"){?> class="active" <?php }?>><b>T</b></li></a>
<a href="l" style="color:#CCC;"><li id="sub_panel"><b>L</b></li></a><br />
</ul>
<code style="color:#CCC;">© 2016</code>
</div>
