Tilbake til startsida IKT i praksis - PHP

Meny
 
 
 
PHP
Sidemeny
 
Pascal
 
Open Office
 

Sidemeny i php og stilark

Den menyen du ser til venstre her finst bare på ei fil som blir henta inn og brukt på alle ikt-sidene. Menyen er laga i html-kode med hjelp av php for å tilpassa menyen til dei einskilde sidene. Layouten er laga med stilark.

For akkurat dette oppsettet kunne nok programmeringa av menyen vore ein god del enklare, men er gjort slik det er gjort for å vise noen av eigenskapane til php. Sjølvsagt finst det fleire løysingar enn dei eg har brukt her. Har du merknader, er det bare å ta kontakt. Du finn adressa nedst på sida.

Sidemeny i html og stilark

Det første ønskjet mitt var å lage ein aktiv meny som blei vist nokolunde likt på alle nettlesarane. Eg måtte difor halde meg til koder som blei tolka likt same kva utstyr han blei brukt på. Utgangspunktet er difor enkel htmlkode og stilark:

<table class="sidemeny" border="0" width="160">
<tbody>
<tr valign="top">
<td nowrap="nowrap" width="120">
<div style="width:115px; height: 14px">Meny</div>
<div class="tab"><a href="ikt.html">Framsida IKT</a></div>
<div class="tab"><a href="a href="stilark.html">Stilark</a></div>
<div class="gruppe">PHP</div>
<div class="tab"><a href="a href="php-tips.html">Generelle tips</a></div>
</td>
</tr>
</tbody>
</table>

Stilarket ser slik ut:

.tab, .gruppe, tab-aktiv {
margin-left : 5px;
width : 115px;
height : 14px
}
.gruppe {color : #336666}
.tab-aktiv {color: #C0C0C0}

Menyen er godt brukbar slik han er, særleg om nettstaden har få sider. Bare kopier menyen inn på sidene der du ønskjer han skal visast.

Einaste ulempa er at alle menyinnslaga er aktiv, også det for den sida menyen er på. Dersom du er på framsida for IKT og trykker på menyinnslaget «Framsida IKT» vil sida bli lasta omigjen. Kan vere nyttig i noen tilfelle, men som oftast bare irriterande. Difor ønskjer eg å gråe ut menyinnslaget for den sida menyen er på. Ikkje noen stor prosess, men det må gjerast for kvar einaste side. På sida ikt.html må eg altså forandre
<div class="tab"><a href="ikt.html">Framsida IKT</a></div>
til
<div class="tab-aktiv">Framsida IKT</div> og tilsvarande på dei andre sidene.

tab-aktiv set skriftfargen til grå.

Alt ovanfor her er oppskrift på ein grei meny i html-kode der programmeringa er forenkla ved hjelp av stilark. Er nettsatden på bare noen få sider, er det i grunnen lite vits i å bruke tid på meir sofistikert programmering.

Tilfør PHP

Er nettstaden på mange sider, kan det vere nokså mykje arbeid å forandre menyen på kvar side kvar gong det blir lagt inn nye sider på nettstaden, eller gjort andre endringar som også krev forandringar i menyen som t.d. at eit av menyinnslaga er så langt at menyen må gjerast breiare. Då kunne det vere enklare å bare ha éin meny som gjeld for alle sidene og som er sett opp slik at alt som har med menyen å gjere blir programmert på denne sida. Det er det vi kan få til med php.

(I det vidare reknar eg med at du har litt kjennskap til php slik at eg ikkje treng kommentere alle kodene som blir brukte).

Sjølve menyen blir lagt inn i ei separat fil som vi kan kalla meny.txt. Det meste er eigentleg i html og stilark, så det enklaste er å byrje med den same menyen som vist øvst på sida og deretter legge inn nødvendig php-kode.

Eg har vald å vise den ferdige koden, og heller kommentere ut frå denne. Så kan du lese eller hoppe over etter som det passar.

1<?php
2$filnamn = basename($_SERVER['PHP_SELF']);
3$breidde = '115px';
4$avstand = '14px';
5$stil = 'style="width: ' . $breidde . '; height: ' . $avstand;
6$skille = '<div style="width: ' . $breidde . '; height: 10px">&nbsp;</div>';
7$tab1 = '<div class="tab-1" ' . $stil . '">';
8$tab2 = '<div class="tab-2" ' . $stil . '">';
9$tab1_her = '<div class="tab-1" ' . $stil . '; color: #CCCCCC">';
10 $tab2_her = '<div class="tab-2" ' . $stil . '; color: #CCCCCC">';
11?>
12<table border="0" width="160">
13<tbody>
14<tr valign="top">
15<td class="sidemeny" nowrap="nowrap">
16<?php
17print '<div ' . $stil . '">Meny</div>';
18print $skille;
19if ($filnamn == 'ikt.php') print ($tab1_her . 'Framsida IKT </div>');
20else print ($tab1 . '<a href="ikt.php">Framsida IKT</a></div>');
21print $skille;
22if ($filnamn == 'stilark.php') print ($tab1_her . 'Stilark </div>');
23else print ($tab1 . '<a href="stilark.php">Stilark</a></div>');
24print $skille;
25print '<div class="gruppe" style="width: 115px; height: 14px;">PHP</div>';
26if ($filnamn == 'php-tips.php') print ($tab2_her . 'Generelle tips </div>');
27else print ($tab2 .'<a href="php-tips.php">Generelle tips</a></div>');
28if ($filnamn == 'php-heading.php') print ($tab2_her . 'Heading </div>');
29else print ($tab2 . '<a href="php-heading.php">Heading</a></div>');
30if ($filnamn == 'php-footer.php') print ($tab2_her . 'Footer </div>');
31else print ($tab2 . '<a href="php-footer.php">Footer</a></div>');
32if ($filnamn == 'php-sidemeny.php') print ($tab2_her . 'Sidemeny </div>');
33else print ($tab2 . '<a href="php-sidemeny.php">Sidemeny</a></div>');
34print $skille;
35if ($filnamn == 'kurs.php') print ($tab1_her . 'Kurstilbod IKT</div>');
36else print ($tab1 . '<a href="kurs.php">Kurstilbod IKT</a></div>');
37?>
38</td>
39</tr>
40</tbody>
41</table>

Linjenummera heilt til venstre høyrer ikkje med til programmet. Dei er sett inn for lettare å kunne referere til kva linje eg meiner.

Den øvste linja finn ut kva for side menyen er på. Filnamnet blir lagt inn i variabelen $filnamn. For denne sida vil altså $filnamn innehalde php-sidemeny.php. Dette skal vi bruke for å gråe ut menyinnslaget for denne sida.

Linjene 3 - 10 definerer diverse merkverdige variablar. Eg kunne nok brukt stilark i staden, men har vald å gjere det på denne måten for å kunne styre alt som har med menyen å gjere frå denne sida. Variabelen $breidde bestemmer makslengda for kvart menyinnslag. I dette tilfellet var 115 pikslar nok, men skulle det seinare dukke opp innslag som treng meir plass, er det bare å forandre denne variabelen. Variabelen $avstand bestemmer avstanden mellom menyinnslaga.

Dei neste 6 linjene treng ei nærare forklaring. Menyen bruker stilark, men i tillegg også stilar inne i noen av html-taggane. Dette er gjort for å kunne bestemme menybreidda og linjeavstanden med variablane $breidde og $avstand. Difor $stil = 'style="width: ' . $breidde . 'height: ' . $avstand;. Med dei verdiane som er definert for $breidde og $avstand, blir verdiane for $stil slik: $stil = 'style="width: 115px; height: 14px"'. Det som blir skrive ut i linje 17 er såleis <div style="width: 115px; height: 14px">Meny</div>. Altså vanleg html-kode.

For å sleppe å ha så mange variablar eller stilar, har eg definert, i linje 6, ein variabel som skriv ut <div style="width: 115px; height: 10px">&nbsp;</div>, altså ei tom linje. Denne blir brukt der eg ønskjer mellomrom i menyen.

Linje 19 og 20 høyrer saman. Variabelen $filnamn blir definert i linje 2 og inneheld namnet på den fila som er aktiv. Når den sida du les nå er oppe, vil variabelen bli definert til $filnamn = 'php-sidemeny.php'. I linje 19 kontrollerer php om det er denne fila som er opna. Dersom svaret er ja, blir linja $tab1_her . 'Framsida IKT </div> skrive ut. Studerer du variabeldefinisjonane, finn du ut at dette eigentleg er <div class="tab-1" style="width: 115px;height: 14px; color: #CCCCCC">Framsida IKT </div>.

Dersom det ikkje er ikt.php som er open, vil utsegna etter else bli skriven ut. Igjen kan ein bruke variabeldefinisjonane øvst på sida og finne ut at nå blir utskrifta <div class="tab-1" style="width: 115px;height: 14px"><a href="ikt.php">Framsida IKT </div>. Altså ei lenke til framsida.

Slik held ein på nedover til alle menyinnslaga har fått kodene sine. Skulle du seinare ha behov for å legge inn fleire innslag, er det bare å følgje mønsteret.

Stilarket

For sidemenyen er følgjande stilark brukt:

.sidemeny {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
.tab-1, .tab-2, .gruppe {
margin-left : 5px;
color : #CC6633;
}
.tab-2 { margin-left : 16px;}
.gruppe {
color : #336666;
}

 


Send melding

© Innhald og design:  Kolbjørn StuestølStuestøl heimesideSist endra 11. april 2013