• English
  • Nederlands

User Tools

Site Tools


en:menu

Install the Leuven-Template step 6 of 7

There are seven steps to follow described in this "How to"

  1. Upload the needed scripts to the root of your website
  2. Set the permissions of the folders
  3. Test the webserver first
  4. Manually change the settings files
  5. Configure the upload of weather-data
  6. You are here
  7. Almost finished

Technical aspects of the menu-system used

The menus are generated from 1 xml file weather28/wsMenuData.xml The xml satructure is a further development of the xml as used in the Saratoga-Template.

XML

The general structure of the xml file:

 <menu>
    <item   caption=value   param=value . . . /> 	een menu van het hoogste niveau
    <item   caption = value  > 				begin uitklap menu
        <item   caption=value param=value . . ./>		een menu-keuze op het tweede niveau
        <item   caption=value param=value . . ./>		een menu-keuze op het tweede niveau
    </item>						einde uitklap menu
</menu>

As an example a small part from the weather28/wsMenuData.xml of the current download

menu.jpg In the XML there are 6 entries, but in the image you see only 3

Menu number 23 and 24 received a a "no" in its show tag as the setting for MeteoplugPage is false. And for menu 21 there is no clientraw, so that menu becomes also show="no"

<item   caption = "Live Data">
	<item 	nr      = "21"	show    = "wdlPage"
	        img     = "img/menu_updated.gif"
	        caption = "WD Live" 	
		link    = "wdl/incWdlive.php"	 	
        />
	<item 	nr      = "22"  show    = "mwPage"
	        img     = "img/menu_updated.gif"
	        caption = "Meteoware Live"
		link    = "mwlive/wsMWlive_v3.php"	
        />	
	<item 	nr      = "23"  show    = "MeteoplugPage"
	        caption = "WD Live Meteoplug" 
		link    = "inc/meteoplugWDlive.php"					 			
        />			
	<item 	nr      = "24"  show    = "MeteoplugPage"
		caption = "Meteohub/plug Live Data"	                
		link    = "inc/meteoplugDashboard.php"
        />
	<item 	nr      = "25" 	show    = "yes"
		caption = "Steelseries"
		link    = "gauges/gaugePage.php"
        />
	<item 	nr      = "26" 	show    = 'wuId'
		caption= "WU live"
		link    = "inc/WU_Live.php"
        />	
</item>	

Parameters

parameterdescriptiondefault
nrUnique number/string which identifies the page.
Only this number is displayed in the browser address area.
The name (or the link) of the script does not appear in the address area.
showDescribes if the page is ("yes") shown or not. The allowed values ​​are "yes" "no" .
Or a reference to a $SITE entry can be used. Example: show="wdlPage" links to $SITE["wdlPage"]. If this entry in the $SITE table is set to false, the page will not be part of the menu.
yes
hide If this parameter is set the menu item is known and can be used from a link in a script, but the item is not shown in the menu itself
top If this parameter is set to "no" the positioning of the page is set to display also the header, so page is is not moved upwards to the data-area.
This param is used internbasly also to move to certain parts of the page
externalTo include an external (other website new-page) link
captionThis short description of the program to be executed will be shown in the menu.
title If a longer description is wnated, one can set this here. The longer discription is shown in the yellow box when hoovering above the menu entry
linkThe name of the (PHP) script which generates the page or the name of a html-page
gizmoIndicates whether ('1') or not ('0') the ajaxgizmo is displayed. 0
cssSometimes pages need a specific CSS file. One can specify the location of such a file here.
A css file WU-HistoryTan.css in the folder wu is specified as css="wu/WU-HistoryTan.css"
You have to specify all subfolders below the weather28/ folder.
headFor some programs (GOOGLE map V2 or mesonet for instance) one has to include specific files in the head section.
The specification head="progr_name.php" results in the execution of this program just before the end of the head section of the generated html. Such a program will normally generate CSS or includes nofollow metatags.
You have to specify all subfolders below the weather28/ folder.
noutf8Some pages can not be shown correctly with UTF-8 character sets. Here you specify for which character should be used that page only.

Some pages are displayed when selecting the menu item, but also from inside a script (forecast, severe weather) or when clicking an image (partners, rain- and thunder).

If you do not want such a "multi-use" page in the menu, set it to hide="yes" and do not use show="no". That way the menu entry is not shown, but still all links to the page remain valid.

Operation of the menu-system

Generation

During generation of the html page

  • the weather28/wsMenuData.xml file is read
  • an <ul><li> structure is generated to correctly display the menu contianing non-hidden menu items only
  • Also the menu information is stored in a temporary PHP table to check the validity of the menu choices of the user.
    • The hidden menu entries are also sored in this table.

Our example from the previous page would result in:

<li class="withImg"><a href="#" title="">Live Data</a>
   <ul>
     <li><a href="index.php?p=22" >Meteoware Live</a></li>
     <li><a href="index.php?p=25" >Klokjes</a></li>     
     <li><a href="index.php?p=26" >WU live</a></li>
   </ul>
</li>

As you can see the generated html contains NO exact program name and NO folder name. The menu choice of the user is send to the web server using a simple GET (which is visible in the browser address area).

In our example, if the user chooses Meteoware Live , this choice is loaded to the web server as: http://www.your_web_site.com/weather28/index.php?p=22
The only information a hacker could see is a number for that menu choice.

Validity checks

Every menu choice is validated against the menu table in the first script which is executed: index.php
Numbers which are not in the table can not exist or are typed by a hacker manually. If that is the case the program reroutes the user to the start page.

Miscellaneous

Horizontal versus vertical

There is no difference in treatment or difference in html code between Horizontal or Vertical menus.

Adapt menu width

Default it is set to 140px in a setting. Example how to change to 180px; Change:

$SITE['menuWidth']	= '180';	// 140 = default width of Vertical menu DO NOT CHANGE

Use / xml changes

As said by Ken True from Saratoga in his documentation of the menu structure, xml is quite strict and the least carelessness results in a total stop of the template.

Not everything is suitable for a production website.

A number of pages are really only useful during the construction of the website. The have a show="debug' setting and will automatically be removed from the menu when debugging is finished/ switched off.

Not everything is immediately displayed after installation.

A number of pages are dependent on correct values ​​in _my_texts/wsUserSettings.php. Therefore, after the initial installation, they will be shown only after the correct values ​​in the settings are inserted.

How to modify the menu

CAUTION: xml is even more critical with errors as PHP.
So ALWAYS make a copy of the menu-file as a fall-back in case your website goes to black.

Only one item in the drop down menu

menu_apadapt1.jpg There are some menus with a lot of choices. There are others with only one left after all settings are done. If there is only one item in a drop down menu left, it looks more professional to move that one item to the main menu.

We therefore have to adept the menu specification in weather28/wsMenuData.xml. The safest way to do this is:

  • copy the menu specification (3) from within the enclosing <item ..></item>(1-2) and
  • pasting that just before the enclosing <item ..></item>(1)
  • and setting the enclosing <item ..></item>(4) to show="no"

Why are we doing it in this way: because when you later want to go back to the drop-down version when you added other visible menu entries, you only have to set the show="no" / show="yes" and/ or remove the extra item.

The resulting code looks like ⇒

and the menu looks OK also: menu_apadapt3.jpg

<item   nr="25"   show="yes"		
	link="gauges/gauge.php"
	caption="Steelseries"
	title="Steel series"
	head="gauges/topcss.php" />
</item>
<item caption="Live Data" show="no">
    <item   nr="21"   show="wdlPage"
	link="wdl/incWdlive.php"
	caption="WD Live"
	title="WD Live Data" />
    <item   nr="23"   show="MeteoplugPage"
	link="inc/meteoplugWDlive.php"
	caption="WD Live Meteoplug" 
	title="WD Live Data by Meteohub" />
    <item   nr="24"   show="no"
	link="inc/meteoplugLiveDashboard.php"
	caption="Meteoplug"	
	title="Meteohub/plug Live Data" />
    <item   nr="25"   show="yes"		
	link="gauges/gauge.php"
	caption="Steelseries"
	title="Steel series"
	head="gauges/topcss.php" />
</item>
en/menu.txt · Last modified: 2016/06/18 06:21 by wvdkuil