User Tools

Site Tools



This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
en:menu [2015/05/26 10:23]
wvdkuil [Miscellaneous]
en:menu [2015/05/27 15:55] (current)
Line 1: Line 1:
 +====== Install the Leuven-Template step 6 of 7 ======
 +There are seven steps to follow described in this "How to"
 +  - Upload the needed scripts to the root of your website ​
 +  - Set the permissions of the folders ​
 +  - Test the webserver first 
 +  - Manually change the settings files 
 +  - Configure the upload of weather-data
 +  - **You are here**
 +  - Almost finished ​
 +<WRAP tabs>
 +  * [[how_to_install|1]]
 +  * [[folder_contents|2]]
 +  * [[test_program|3]]
 +  * [[settings|4]]
 +  * [[upload|5]]
 +  * **[[menu|The menu]]**
 +  * [[how_to_install7|7]]
 +===== Technical aspects of the menu-system used =====
 +The menus are generated from 1 xml file **weather27/​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: 
 +<​code>​ <​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
 +As an example a small part from the  **weather27/​wsMenuData.xml** of the current download ​
 +<WRAP column 30%>​{{:​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"​
 +<​code><​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>​ </​code>​
 +==== Parameters ====
 +|nr|Unique 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.| |
 +|show|Describes if the page is ("​yes"​) shown or not. The allowed values ​​are "​yes"​ "​no" ​ .\\ <wrap hi>Or a reference to a $SITE entry can be used.</​wrap>​ 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|
 +|<wrap hi>​hide</​wrap> ​ |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 | |
 +|<wrap hi>​top</​wrap> ​ |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 | |
 +|caption|This 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 | |
 +|link|The name of the (PHP) script which generates the page or the name of a html-page| |
 +|gizmo|Indicates whether ('​1'​) or not ('​0'​) the ajaxgizmo is displayed.| ​ 0  |
 +|css|Sometimes 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"​**\\ <wrap important>​You have to specify all subfolders below the weather27/ folder.</​wrap>​| |
 +|head|For 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.\\ <wrap important>​You have to specify all subfolders below the weather27/ folder.</​wrap>​| |
 +|noutf8|Some pages can  not be shown correctly with UTF-8 character sets. Here you specify for which character should be used that  page only.||
 +===== Operation of the menu-system =====
 +==== Generation ====
 +During generation of the html page 
 +  * the **weather27/​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:
 +<​code><​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>​
 +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://​​weather27/​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; ​
 +<​code>​$SITE['​menuWidth'​] = '​180';​ //​ 140 = default width of Vertical menu DO NOT CHANGE</​code>​
 +=== 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 =====
 +<WRAP important>​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.</​WRAP>​
 +<WRAP tabs>
 +==== Only one item in the drop down menu ====
 +<WRAP column 50%>{{ :​menu_apadapt1.jpg?​nolink ​ }}
 +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** weather27/​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"​**
 +{{ :​menu_apadapt2.jpg?​nolink|}}
 +<WRAP clear></​WRAP>​
 +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.
 +<WRAP column 50%>The resulting code looks like =>
 +and the menu looks OK also:
 +{{ :​menu_apadapt3.jpg?​nolink ​ }}
 +<​code><​item ​  ​nr="​25" ​  ​show="​yes"​
 + link="​gauges/​gauge.php"​
 + caption="​Steelseries"​
 + title="​Steel series"​
 + head="​gauges/​topcss.php"​ />
 +<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"​ />
en/menu.txt · Last modified: 2015/05/27 15:55 (external edit)