Question posted in 
I’m currently making a website with the system of replacing content of the main div in the “body” part. Now I figured out that I messed up a bit because every content will be placed in the same url. Do you have a idea of fixing this?
HTML/PHP(index.php):
<html>
<head>
<link rel="shortcut icon" href="pics/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link id="w" rel="stylesheet" href="Style/cs-index.css"></link>
<script type="text/javascript" src="Javascript/js-index.js"></script>
<title>7STAR.GA</title>
</head>
<body>
<nav id="nav" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:goToHome();">7STAR .GAMING</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="javascript:goToHome();">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Teamspeak <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="javascript:goToRanks();">Ranks</a></li>
<li><a href="javascript:goToStatistics();">Statistics</a></li>
<li><a href="#">Medals</a></li>
<li><a href="#">Musicbots</a></li>
<li><a href="javascript:goToViewer();">TSViewer</a></li>
</ul>
</li>
<li><a id="navB3" href="#">Knowledge Base</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a title="Twitter" href="javascript:goToExternal('twitter');"><img src="pics/twitter.jpg"></a> </li>
<li><a title="Steam" href="javascript:goToExternal('steam');"><img src="pics/steam.jpg"></a> </li>
<li><a title="Google" href="javascript:goToExternal('google');"><img src="pics/google.jpg"></a> </li>
<li><a title="Facebook" href="javascript:goToExternal('facebook');"><img src="pics/facebook.jpg"></a> </li>
<li><a title="Youtube" href="javascript:goToExternal('youtube');"><img src="pics/youtube.jpg"></a> </li>
</ul>
</div>
</div>
</nav>
<div id="inhalt">
<div id="jumboHome"class="jumbotron">
<h1 id="home">Home</h1>
<p id="homeUnder">7STAR .GAMING is a multi-gaming clan with a friendly community.</p>
</div>
<center>
<div class="page-header">
<h1>7STAR .GAMING<small> Since 2014</small></h1>
</div>
<div id="text" class="alert alert-info" role="alert">
<p>We are just another generic League of Legends gaming community based in good ol' EUW.
We will be offering our lovely gentle members a variety of people to play League of Legends with, and we just want to have fun, even when we lose ;D/
If we have piqued your interest, visit us at our Teamspeak 3 server !Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,</p>
</div>
</center>
<div id="jax">
</div>
</div>
<center><div id="viewer" class="alert alert-info downer" role="alert">
<?php include_once('plugins/tsviewer/tsviewer.php')?>
</center></div>
</body>
Javascript:
function goToExternal(site){
if(site=="twitter"){
window.open("https://twitter.com/7STARGA");
window.focus();
} else if(site=="steam"){
window.open("http://steamcommunity.com/groups/7STARGAMING/");
window.focus();
} else if(site=="google"){
window.open("https://plus.google.com/117232671286534599197/posts");
window.focus();
} else if(site=="youtube"){
window.open("#");
window.focus();
} else if(site=="facebook"){
window.open("https://www.facebook.com/7STARGA");
window.focus();
}
}
function goToHome(){
document.getElementById("viewer").style.display="none";
document.getElementById("inhalt").innerHTML =
"<div id="jumboHome"class="jumbotron">"
+"<h1 id="home">Home</h1>"
+"<p id="homeUnder">7STAR .GAMING is a multi-gaming clan with a friendly community.</p>"
+"</div>"
+"<center>"
+"<div class="page-header">"
+"<h1>7STAR .GAMING<small> Since 2014</small></h1>"
+"</div>"
+"<div id="text" class="alert alert-info" role="alert">"
+"<p>We are just another generic League of Legends gaming community based in good ol' EUW."
+" We will be offering our lovely gentle members a variety of people to play League of Legends with, and we just want to have fun, even when we lose ;D "
+"If we have piqued your interest, visit us at our Teamspeak 3 server !Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+"Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,</p>"
+"</div>"
+"</center>"
+"<div id="jax">"
+"</div>"
}
function goToViewer(){
document.getElementById("viewer").style.display="block";
document.getElementById("inhalt").innerHTML = "<div id="jumboHome"class="jumbotron">"
+"<h1 id="home">TeamSpeak Viewer</h1>"
+"<p id="homeUnder">7STAR .GAMING offers a nice and big Teamspeak.</p>"
+"</div>"
+"<center>"
+"<div class="page-header">"
+"<h1>Teamspeak<small> Overview</small></h1>"
+"</div>"
+"</center>"
+"<div id="jax">"
+"</div>";
}
function goToRanks(){
document.getElementById("viewer").style.display="none";
document.getElementById("inhalt").innerHTML = "<div id="jumboHome"class="jumbotron">"
+"<h1 id="home">Ranks</h1>"
+"<p id="homeUnder">7STAR .GAMING offers a wide range of nice Teamspeak Ranks</p>"
+"</div>"
+"<center>"
+"<div class="page-header">"
+"<h1>Ranks<small> Overview</small></h1>"
+"</div>"
+"<div id="text" class="alert alert-info" role="alert">"
+"<p>We are using <mark>a system</mark> that awards you a <mark>higher rank based on the amount of hours you are connected to our teamspeak server</mark>. Once you have met the required amount of hours to earn a rank, <mark>a bot will automatically raise your rank</mark> by one. <mark>We're using the ranks of the United States Army</mark>, as many people are familiar with them and it is easier to know who your supervisors are.<br>Here are our Teamspeak Ranks:</p>"
+"</div>"
+"<div id="table" class="alert alert-info" role="alert">"
+"<table id="tableRank" class="table table-striped table-hover">"
+"<thead>"
+"<tr>"
+"<th>Name</th>"
+"<th>Hours</th>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Private</td>"
+"<td>0</td>"
+"</tr>"
+"<tr>"
+"<td>Private First Class</td>"
+"<td>10</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Specialist</td>"
+"<td>13</td>"
+"</tr>"
+"<tr>"
+"<td>Corporal</td>"
+"<td>16</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Sergeant</td>"
+"<td>20</td>"
+"</tr>"
+"<tr>"
+"<td>Staff Sergeant</td>"
+"<td>24</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Sergeant First Class</td>"
+"<td>31</td>"
+"</tr>"
+"<tr>"
+"<td>Master Sergeant</td>"
+"<td>38</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>First Sergeant</td>"
+"<td>48</td>"
+"</tr>"
+"<tr>"
+"<td>Sergeant Major</td>"
+"<td>60</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Command Sergeant Major</td>"
+"<td>75</td>"
+"</tr>"
+"<tr>"
+"<td>Sergeant Major of the Army</td>"
+"<td>93</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Warrant Officer 1</td>"
+"<td>116</td>"
+"</tr>"
+"<tr>"
+"<td>Warrant Officer 2</td>"
+"<td>146</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Warrant Officer 3</td>"
+"<td>182</td>"
+"</tr>"
+"<tr>"
+"<td>Warrant Officer 4</td>"
+"<td>227</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Warrant Officer 5</td>"
+"<td>284</td>"
+"</tr>"
+"<tr>"
+"<td>Second Lieutenant</td>"
+"<td>355</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>First Lieutenant</td>"
+"<td>444</td>"
+"</tr>"
+"<tr>"
+"<td>Captain</td>"
+"<td>555</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Major</td>"
+"<td>694</td>"
+"</tr>"
+"<tr>"
+"<td>Lieutenant Colonel </td>"
+"<td>867</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Colonel </td>"
+"<td>1084</td>"
+"</tr>"
+"<tr>"
+"<td>Brigadier General</td>"
+"<td>1694</td>"
+"</tr>"
+"</thead>"
+"<tr>"
+"<td>Major General</td>"
+"<td>2118</td>"
+"</tr>"
+"</table>"
+"</div>"
+"</center>"
+"<div id="jax">"
+"</div>";
document.getElementById("text").style.width ="550px";
document.getElementById("text").style.height ="143px";
}
If you need style.css too I could post that too.
2
Answers
If you need to have different content with the same layout (top and bottom HTML), maybe you should look into MVC. It will be easier to implement and maintain later on.
Here is an extremely simplified example to help on your problem: First you make a
layout.php, with the HTML that’s common to all pages:Then you create the page with the contents:
When you include the
main.layout.phpfile, it will output the variables$titleand$contentscreated on thecontents.phpfile.This example is roughly based on the examples from Symfony versus Flat PHP page, it’s worth checking out, it gives a great step-by-step overview on how MVC works.
There are several frameworks you can choose from, one that I like is MINI because its easy to use.
But you will salso need to setup ModRewrite handle url copy-paste use case.
And then check in java script which page was requested by user:
If you don’t want to / can’t use ModRewrite, then you either need to copy your file in all these locations (bad) or use one URL with different #ids