14. Navigationsbjælke 2: PHP-delen

Indledning

Som omtalt i forrige kapitel skal du nu til at bruge PHP til at gøre livet (eller i hvert tilfælde hjemmesidefremstillingen og vedligeholdelsen) lidt nemmere for dig selv. Til dette skal du bruge array-funktionen (se Kapitel 10 og Kapitel 11). Samtidig skal du bruge PHP til at integrere menuen i alle siderne. Til dette skal du bruge funktionen include (se Kapitel 6).

Omdøb filer til .php

Det første du skal gøre, er at omdøbe alle dine sider fra Kapitel 13, så de får filnavnet .php.

Dvs. følgende sider:

• guppy.htm
• index.htm
• menu.htm
• neon.htm
• platy.htm
• zebra.htm

Skal for fremtiden hedde:

• guppy.php
• index.php
• menu.php
• neon.php
• platy.php
• zebra.php

Der er mange måder at omdøbe filer på. Du skal bare bruge den metode du synes bedst om.

Opret en liste med sidernes navne og beskrivelser

Du skal nu ændre i startsiden (index.php), så der bliver brugt PHP-koder de rette steder. Det første du skal gøre, er at oprette en liste (et array) der indeholder filnavne og beskrivelser på dine sider:

1. Sørg for at siden index.php er åbnet i WebWriter
2. Flyt markøren op på første linie, lav et par tomme linier og tilføje følgende:

   <?
   $sider['index.php'] = "Startside";
   $sider['guppy.php'] = "Guppyer";
   $sider['neon.php'] = "Neonfisk";
   $sider['platy.php'] = "Platyer";
   $sider['zebra.php'] = "Zebrafisk";
   ?>
   

   (Du kan måske huske måden at skrive listen på fra Kapitel 12 ellers kan du jo lige genopfriske din hukommelse).
   Nu har du puttet sidernes filnavne og en beskrivelse ind i arrayet $sider.
3. Du skal nu oprette en variabel, der kan gemme navnet på den aktuelle side (dette skal vi bruge senere, når du skal tilføje id'et #current til det aktuelle faneblad).

   $selv = basename($_SERVER['PHP_SELF']);
   

   Forklaring:
   $_SERVER er en variabel, som indeholde en masse oplysninger der kommer fra serveren (i dette tilfælde fra Apache).
   $PHP_SELF indeholde oplysninger om filnavnet på den aktuelle side
   inklusiv navnet (eller navnene) på den (eller de) mapper, filen ligger i.
   basename er en funktion, der skræller alt undtagen filnavnet.
   Vi får altså på denne måde filnavnet lagt over i variablen $selv.
   Toppen af din side skulle nu se således ud:

   <?
   $sider['index.php'] = "Startside";
   $sider['guppy.php'] = "Guppyer";
   $sider['neon.php'] = "Neonfisk";
   $sider['platy.php'] = "Platyer";
   $sider['zebra.php'] = "Zebrafisk";
   
   $selv = basename($_SERVER['PHP_SELF']);
   
   ?>
   
   

Omdan menuen til PHP

1. Flyt nu markøren ned til linien, hvor der står <div class="menu"> (hos mig er det på linie 69.
2. Slet alle punkterne indenfor punktopstillingen (dvs. alle de linier, der starter med <li>, så der kun bliver følgende tilbage:

   <div class="menu">
   <ul id="navlist">
   
   
   </ul>
   </div>
   

3. Sæt markøren under linien <ul id="navlist"> og skriv følgende løkke:

   <?
   foreach ($sider as $hyper_link => $link_tekst)
    {
     echo " <li>";
     echo "<a href=\"$hyper_link\"";
   		if($selv == $hyper_link)
   			{
   		echo " id=\"current\"";
   			}
     echo ">$link_tekst";
     echo "</a> ";
   	echo "</li>";
    }
   ?>
   
   

   Forklaring:
   foreach ($sider as $hyper_link => $link_tekst) løber listen $sider igennem. For hvert punkt på listen splittes indholdet i 2 variabler: $hyper_link og $link_tekst. Disse to skal vi bruge inde i funktionen.
   { her starter løkken
   echo " <li>"; Vi starter med at indsætte et listepunkt
   echo "<a href=\"$hyper_link\""; Her opretter vi starten på et link, nemlig adressen, som vi henter fra variablen $hyper_link
   if($selv == $hyper_link)
   {
   echo " id=\"current\"";
   }
   
   if-sætning bruges til at kontrollere om den side vi nu kigger på (dvs. den aktive side) er det samme som navnet fanebladet på menuen. Hvis det er rigtigt, så indsætter vi id'et #current i linket (hvilket farver linkets "faneblad" hvidt).
   echo ">$link_tekst"; Her afsluttes den første del af linket og vi henter det navn på siden, der er gemt i variablen $link_tekst
   echo "</a> "; Her afslutter vi linket
   echo "</li>"; Her afslutter vi punktet (dette er ikke helt nødvendigt men en pænere måde at afslutte punkter på). } her slutter løkken

Indsæt et billede

1. Sæt markøren ned på den tomme linie under sætningen:

   <H1>Populære akvariefisk</H1>
   

2. Indsæt billedet velkomstfisk.gif

Gem menu og top i selvstændig fil

Du skal nu klippe den øverste del af siden ud og gemme den i en selvstændig .php-fil, så den kan bruges på samtlige sider:

1. Marker fra billedet og opefter. Sådan gør du det lettest:
   1. Sæt markøren lige foran afsnitsoverskriften <h2>Indledning</H2>
   2. Hold Ctrl og Shift nede samtidigt og tryk på Home-tasten.
   3. Klik det markerede ud (Ctrl-X)
   4. Opret en ny Tom side
   5. Sæt ind med Ctrl-V
   6. Gem siden som top.php
   7. Luk siden
2. Gem index.php igen.

Tilret siderne med top.php

Det næste du nu skal gøre, er at sørge for at top.php (som indeholder alle HTML-startkoderne + din menu) bliver brugt på alle siderne. Til dette bruger vi funktionen include (se evt. Kapitel 6 om Include).

1. Du har forhåbentligt stadig index.php åbnet i WebWriter (ellers åbn den nu).
2. Sæt markøren øverst i dokumentet og skriv følgende:

   <?
   include "top.php";
   ?>
   

3. Gem index.php igen og luk siden
4. Åbn siderne: guppy.php, neon.php, platy.php, zebra.php
5. Skift til siden guppy.php
6. Sæt markøren lige foran afsnitsoverskriften <h2>Guppy</2>
7. Marker alt det ovenover ved at taste Ctrl-Home
8. Slet med Delete-tasten
9. Indsæt koden herunder allerøverst på siden:

   <?
   include "top.php";
   ?>
   

10. Gem siden igen
11. Lav det samme med resten af siderne
12. Gem alle
13. Upload til serveren og afprøv om de virker.