If you ever tried making a simple website with only a handful of pages, you probably noticed that once you need to edit some menu element, you have to edit all of your pages, which can be very irritating.The simplest way to solve this problem without resorting to coding is using frames. I encourage you not to do that. You can see for your self why.
Instead you can apply one of the following PHP techniques.
In this method you put the unique content of your pages in different files like "news.html", "about.html" etc. While the HTML that is the same for all the pages, like the menu, stays in index.php.
To make this work you need to put the code that will load the contents of your pages into index.php. In PHP the include() function is just what we need to do the job. Alternatively you can use require(), it won't make a big difference.
Next, through our hyper links, we need to tell that function which file it should load into our main page. We need a variable for that, in this example I will call our variable "page" for the sake of simplicity. Which means that our links would look something like this:
<a href="index.php">Home</a><br />
<a href="index.php?page=page1">Page1</a><br />
<a href="index.php?page=page2">Page2</a><br />
<a href="index.php?page=page3">Page3</a><br />Now we can work with the include() function.
As you probably noticed form our links above, the first link called "Home" doesn't assign any parameters to the "page" variable. To make include() work and protect our website form the Cross-site scripting vulnerability at the same time we will use a switch().
switch($_GET['page']) {
case "page1": include('page1_content.html'); break;
case "page2": include('page2_content.html'); break;
case "page3": include('page3_content.html'); break;
default: include('home.html');
}
Since I chose to call the variable "page" the switch looks this way: "
switch($_GET['page']) {" and the next four lines decide which file should be loaded depending on the value of the variable. So the line case "page1": include('page1_content.html'); break; means: if the variable was set to 'page1' then load page 'page1_content.html'.But the last line:
default: include('home.html'); means: if the variable "page" is set to anything else then home.html will be loaded.One more thing: we have to make sure that the variable $_GET['page'] is set, else PHP will output an error. Therefore we will add this line before the switch():
if(!isset($_GET['page'])) $_GET['page']="";This line will define the variable $_GET['page']
in case it hasnt already been defined.(Thanks to Arthur for reminding me)
Now if we put it all together we will get something similar to this:
<html>
<head>
<title>My Website</title>
</head>
<body>
<a href="index.php">Home</a><br />
<a href="index.php?page=page1">Page1</a><br />
<a href="index.php?page=page1">Page2</a><br />
<a href="index.php?page=page1">Page3</a><br />
...
<?phpif(!isset($_GET['page'])) $_GET['page']="";
switch($_GET['page']) {
case "page1": include('page1_content.html'); break;
case "page2": include('page2_content.html'); break;
case "page3": include('page3_content.html'); break;
default: include('home.html');
}
?>
</body>
</html>
One of the disadvantages of this method is that all of your pages will have the same title, unless you're willing to write a little bit more code.
2) The menu include method
In this method you have your menu in a separate file like 'menu.html', which you include on all of your html pages like "index.php", "about.php" etc. using this code:
<?php
include('menu.html');
?>So our typical page would look like this:
<html>
<head>
<title>My Website</title>
</head>
<body>
<?php
include('menu.html');
?>
<h1> Hello and welcome to my website</h1>
The content of the page goes here.
</body>
</html>
This way you can easily have different titles on different pages and easily change your menu on all the pages by editing one file.
In case you have something on the bottom of the page like "All rights reserved" or "This website is a registered trademark..." which is the same on all the pages you can put it in separate file like "footer.html" and include it with the code:
<?php
include('footer.html');
?>
hello but i followed your instructions and i got Notice: Undefined index: id in C:\wamp\www\index.php on line 101. how would i come about on fixing this error? it is really starting to bug me out.
ReplyDeleteplease reply as soon as possible.
Hello Arthur. I see the problem.
ReplyDeleteYou can solve it by putting this line of code before the switch:
if(!isset($_GET['page'])) $_GET['page']="";
So the code would look something like this:
...
<?php
if(!isset($_GET['page'])) $_GET['page']='';
switch($_GET['page']) {
...
This line will make sure that the variable $_GET['page'] is not empty.
Thank you for pointing out this problem. I shouldn't have neglected the fact that php doesn't like to work with undefined variables.
Another way to remove that error message is to disable error reporting which is usually done when your website is finished. You can do it by adding this line of code somewhere in the beginning of your script:
error_reporting(0);
I will add this part to the tutorial shortly.
Thanks a lot.
ReplyDelete@ilker
ReplyDeleteYou're welcome.
Is it possible for you to post a whole tutorial for developing a simple site in php?
ReplyDeleteHighly appreciated by php newbies like me.
Thanks
@sandy
ReplyDeleteIt is possible though unlikely in the near future. I'll see what I can do.
Thanks! This was very helpful for me. This might be obvious to everyone else, but this is the first site to create a very self contained, useful example.
ReplyDeleteThe funny thing is that your blog page is in a framed page
ReplyDelete@Andy P
ReplyDeleteThank you!
@Carlos
ReplyDeleteIt is true that there are inline frames here. They are for ads and the "navbar" on top.
If you're seeing other kinds of frames then you're probably viewing the blog from a third party site (e.g. http://www.blogcatalog.com/blog/nevereverblog)
The correct URL is http://nevereverblog.blogspot.com/
Hi Alex, this is a great and simple code. I'm very new to this lark so here it goes. I have created an index.php with the nav menu
ReplyDeleteI put it in a DIV to format with css etc. I also have a lot of other elements like a banner, an mp3 player etc.
The php code I put in a separate DIV,
Am I right to do this? Do I need more...cos I have a problem in that every time I click on a nav link the whole page renews, not just the content in the DIV. Or am I just being an idiot! Thanks a million
Hi Brian!
ReplyDeleteI'm glad you liked the tutorial.
If you want the content to change only inside the DIV when you click a link, you have to use AJAX.
There are thousands of tutorials on AJAX.
You might wanna check out http://www.w3schools.com/ajax/default.asp
and/or google "AJAX tutorial".
It's very simple, but keep in mind that you need a web server for AJAX to work.
Good luck.
Another way to get the title is by the URL index.php?page=Title%20Here
ReplyDeleteand then display it with
or write a fancy mod_rewrite in the .htaccess