Changing a HTML menu bar to use PHP

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
Pooky
Forum Newbie
Posts: 7
Joined: Fri May 20, 2005 10:03 am

Changing a HTML menu bar to use PHP

Post by Pooky »

I have started helping out to maintain a site that someone else built (http://www.maestro.org.uk). However I have stumbled across some problems.

The navigation/menu bar is in every html file, so if you want to change one link you have to change all the other 40 odd html files too. Now I can see this is a long winded way of doing it and don't want to spend 6 hours updating every bit of html when I could spend the 6 hours making it work better, i.e just having one file to update which updates all the other pages too. Now I know this is possible using php (I don't know any php) but how?

I would like to be able to do the same for the headers and footers to.

The navigation/menu bar also has drop down links and the colour changes on the menu bar when you click it?

What is the best way to go about doing this bearing in mind my knowledge is limited in html (I am fine at editing but not creating from scratch) and have no php knowledge. However I am willing to learn...

I started to have a go (forgetting about the drop down links for the moment) with the index page.

So I took the relevant navigation bar html from the index.html file and named it navigation.html

Code: Select all

<!-- Navigation Bar -->
            <TABLE cellspacing=&quote;0&quote; cellpadding=&quote;0&quote; width=&quote;100%&quote; border=&quote;0&quote;>
              <TBODY>
              <TR>
                <TD class=menu1><IMG height=&quote;5&quote; alt=&quote;&quote; 
                  src=&quote;spacer.gif&quote; width=&quote;150&quote; border=&quote;0&quote;><BR>  
                  <IMG height=&quote;10&quote; alt=&quote;&quote; src=&quote;next012.gif&quote; width=&quote;10&quote; 
                  border=&quote;0&quote;> Home Page
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/blog/&quote;>Blog</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/news/&quote;>Latest News</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/club/&quote;>About Us</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/club/join.html&quote;>Join The Club</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/maestro/&quote;>The Maestro</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
			src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
			href=&quote;http://www.maestro.org.uk/montego/&quote;>The Montego</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/forums/&quote;>Discussion Forums</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/insurance/&quote;>Insurance</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/memonly.html&quote;>Members Area</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
			src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
			href=&quote;http://www.maestro.org.uk/images/&quote;>Photographic Archive</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/events/&quote;>Events Diary</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/monstro/&quote;>Monstro</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/technical/&quote;>Technical FAQ</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/classifieds/&quote;>Classifieds</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/suppliers/&quote;>Suppliers Directory</A>		
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/club/committee.html&quote;>Committee Contacts</A>
			<BR>  <IMG height=&quote;10&quote; alt=&quote;&quote; 
                  src=&quote;next011.gif&quote; width=&quote;10&quote; border=&quote;0&quote;> <A 
                  href=&quote;http://www.maestro.org.uk/links/&quote;>Links</A>
			<BR><IMG height=&quote;5&quote; alt=&quote;&quote; src=&quote;spacer.gif&quote; 
                  width=&quote;150&quote; border=&quote;0&quote;><BR></TD></TR>

              <TR>
                <TD class=bluebar valign=center align=middle>Copyright<BR></TD></TR>
              <TR>
                <TD class=menu3><IMG height=&quote;5&quote; alt=&quote;&quote; 
                  src=&quote;spacer.gif&quote; width=&quote;150&quote; border=&quote;0&quote;><BR>Website design, graphics and text © The Maestro & Montego Owners Club unless otherwise stated.
<BR><IMG height=&quote;5&quote; alt=&quote;&quote; src=&quote;spacer.gif&quote; 
                  width=&quote;150&quote; border=&quote;0&quote;><BR></TD></TR>
              <TR>
                <TD class=bluebar valign=center align=middle>Advertisers<BR></TD></TR>
              <TR>
                <TD class=menu2><IMG height=&quote;5&quote; alt=&quote;&quote; 
                  src=&quote;spacer.gif&quote; width=&quote;150&quote; border=&quote;0&quote;><br><div align=&quote;center&quote;>

<!-- AdButton Code -->
<table  width=&quote;120&quote; border=&quote;0&quote; cellspacing=&quote;4&quote; cellpadding=&quote;2&quote;>
<tr><td >
<a href=&quote;http://www.maestro.org.uk/events/centenary/&quote;><img src=&quote;http://www.maestro.org.uk/events/centenary/banner120x60.gif&quote; width=&quote;122&quote; height=&quote;62&quote; border=&quote;0&quote;></a>
</td></tr>
<tr><td >
<div align=&quote;center&quote;><iframe src=&quote;http://www.dgm2.com/m/acui.asp?cid=1452&rand=їTIMESTAMP]&quote; scrolling=&quote;no&quote; marginwidth=0 marginheight=0 frameborder=0 vspace=0 hspace=0 width=120 height=60>
   <A href=&quote;http://www.dgm2.com/m/theaa/b.asp?A=13425&I=2562&C=spctpg1&quote;>
      <IMG SRC=&quote;http://www.dgm2.com/m/theaa/i.asp?A=13425&I=2562&quote; BORDER=0>
   </a>
</iframe></div>
</td></tr>
</table>



</div><BR></TD></TR></TBODY></TABLE></TD>
<!-- End of Navigation Bar -->
I then put this in the index.html file where the navigation html was.

Code: Select all

<?php 
    include ("navigation.html");
    ?>




but it doesn't work as I see nothing where the menu bar used to be?


However can anyone help me do it properly with the drop down menus or point me in the right direction?

I guess from reading around I need to use something called arrays but it fast going over my head.
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

Post by phpScott »

save your index.html page as index.php

then goto yoursite/index.php

it shoudl be there if not you might have a include path problem to sort out but that is usually minor
Pooky
Forum Newbie
Posts: 7
Joined: Fri May 20, 2005 10:03 am

Post by Pooky »

Excellent, I spent ages trying to work that out :oops: So my first bit of php has worked I can't be that dumb after all :lol: Thanks for the help!

Now on to the more complex part how do I incorporate the whole menu structure into it

i.e instead of

Home
Blog
Latest News
About Us
Join The Club

as it is now with the navigation.html file

How do I make it so the whole menu structure is incorporated from the one file?

So it will do

Home
Blog
Latest News
About Us
.......Club Profile
.......Members Benefits
.......The Committee
.......The Constitution
Join The Club


Hope that makes sense?
Last edited by Pooky on Fri May 20, 2005 1:42 pm, edited 1 time in total.
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

Post by phpScott »

if all the menu links are static html then just put then all into you navigation.html page.
then on all the pages that you want this file to be included on just do like you did for you index.html page and resave then as whatever.php.

remeber to update your navigation.html page to link to the new .php page.

if you have the same links and things at the bottom of all your pages create a footer.html page that has the code in it and just include where that information was just like the navigation.html page.
Pooky
Forum Newbie
Posts: 7
Joined: Fri May 20, 2005 10:03 am

Post by Pooky »

I don't think they are static :? Although there are always the same if I press a link on the index page, it opens up a new menu bar with some different options? So the menu bar changes depending on what page you are on? I can't explain it very well :oops: the website is http://www.maestro.org.uk
QdollarSign
Forum Newbie
Posts: 5
Joined: Fri May 20, 2005 1:30 pm

Post by QdollarSign »

those are static links, but your navigation is dynamic you will need to pass a variable to tell the navigation.php if it should open the menu like the about page.


so change navigation.html to navigation.php 1st


then at the start of the navigation file add this code.

Code: Select all

<?php $page = $_GET["page"];
then after the about link add this.

Code: Select all

</php if ($page = "about")?>
<a href="yourlink?page=whateverlinkitis">blah</a>
then end the if after you have added all the drop down links to about.

Code: Select all

<?php ; ?>
you can repaet this as many time as you like, all links that have dropdowns will need the ?page=whatever at the end of the link.

Hope this helps!
Q$
Pooky
Forum Newbie
Posts: 7
Joined: Fri May 20, 2005 10:03 am

Post by Pooky »

Right I have had a good go at this just starting on the "About" section.


Code: Select all

<!-- Navigation Bar -->
 <?php $page = $_GET["page"]; 	          
	<TABLE cellspacing="0" cellpadding="0" width="100%" border="0">
              <TBODY>
              <TR>
                <TD class=menu1><IMG height="5" alt="" 
                  src="spacer.gif" width="150" border="0"><BR>&nbsp; 
                  <IMG height="10" alt="" src="next012.gif" width="10" 
                  border="0"> Home Page								
			<BR>&nbsp; <IMG height="10" alt="" 
                  src="next011.gif" width="10" border="0"> <A 
                  href="http://www.maestro.org.uk/blog/">Blog</A>
			<BR>&nbsp; <IMG height="10" alt="" 
                  src="next011.gif" width="10" border="0"> <A 
                  href="http://www.maestro.org.uk/news/">Latest News</A>
			<BR>&nbsp; <IMG height="10" alt="" 
                  src="next011.gif" width="10" border="0"> <A 					
                  href="club.php">About Us</A>
	                </php if ($page = "About Us")?>
		        <BR>&nbsp; <IMG height="10" alt="" 
                  src="next027.gif" width="22" border="0"> <A 
                  href="club.php?page=">Club Profile</A>						
			<?php ; ?>
			<BR>&nbsp; <IMG height="10" alt="" 
                  src="next011.gif" width="10" border="0"> <A 
                  href="http://www.maestro.org.uk/club/join.html">Join The Club</A>
			<BR>&nbsp; <IMG height="10" alt="" 
                  src="next011.gif" width="10" border="0"> <A 
                  href="http://www.maestro.org.uk/maestro/">The Maestro</A>

...............

<!-- End of Navigation Bar -->
I have put the bit in at the top (line 2). Then added the second part (line 19) and tried to do the linking bit (line 22) but can't quite follow the instructions, I wasn't sure what was meant by

Code: Select all

<a href="yourlink?page=whateverlinkitis">blah</a>


whateverlinkitis?

Also I put the last bit on line 23.


Is this correct assuming I work out what I need to finish off line 22? Or am I just being entirely dense somewhere?
Pooky
Forum Newbie
Posts: 7
Joined: Fri May 20, 2005 10:03 am

Post by Pooky »

Can someone let me know what I am doing wrong, or point me to a decent article to read on this please :)
Post Reply