31 besökare, 7 medlemmar och 4 Studenter är online nu
Loopia

PHP och MySQL

TIPS! Läs guiden Responsiv meny » för anpassning till mobila enheter och smartphones.

Infoga menyn med PHP include

OBS! Förutsättningen för att använda Include är att du har tillgång till PHP på din webbserver.

Med funktionen INCLUDE kan du infoga innehållet från ett annat PHP-dokument och det är användbart för menyer, sidhuvud och sidfot och annan information som är återkommande på många sidor i din webbplats.

Läs mer om INCLUDE hos PHP.net

Menyn är sparad som en egen fil med namnet meny.php och innehåller en meny i form av en CSS-formaterad punktlista <UL><LI>.

Här visas inte grunderna om hur en CSS-meny är uppbyggd. Läs mer om detta i guiden CSS-meny »

Koden i menyfilen meny.php:

<!-- Menybox -->
<div id="meny_container">

<!-- Listmeny -->
<ul id="meny">
<li><a href="index.php">Startsidan</a></li>
<li><a href="sida2.php">Sidan 2</a></li>
<li><a href="sida3.php">Sidan 3</a></li>
<li><a href="sida4.php">Sidan 4</a></li>
<li><a href="sida5.php">Sidan 5</a></li>
<li><a href="sida6.php">Sidan 6</a></li>
</ul>

</div>

 

De sidor som ska visa menyn använder <?php include ?> för att inkludera menyn.

Här är ett exempel på hur menyn inkluderas på startsidan index.php:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webdesignskolan, CSS-meny med PHP include</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<link href="meny.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="sidlayout">
<?php include "meny.php"; ?>
<div id="content">
<h1>Rubrik</h1>
<p>Sidinnehåll här</p>
</div>
</div>
</body>
</html>

Så här ser resultatet ut i webbläsaren:

Klicka här för att se exemplet

 

Hämta hela exemplet som ZIP-fil här

 

TIPS! Om du inte har något program som hanterar ZIP-arkiv kan du hämta programmet WinZip hos www.winzip.com

 

Använd sökvägar relativa till site root

När du använder samma meny på alla sidor i din webbplats kan du använda länkar med sökvägar som är relativa till dokumentet. Det fungerar om alla sidor som använder menyn ligger i samma mapp men inte om du har dina sidor i undermappar.

Den bästa lösningen är att använda sökvägar relativa till dokumentroten (site root) på din webbserver.

Exemplen nedan visar tre typer av länkar:

  • relativa till dokumentet
  • relativa till dokumentroten
  • absoluta sökvägar.

 

 FEL: sökvägar relativa till dokumentet

Om sidorna ligger i undermappar och länkarna har sökvägar som är relativa till dokumentet kan koden se ut som exemplet nedan.

Koden fungerar inte om du använder den i någon av de övriga sidorna eftersom sökvägen då blir fel:

<!-- Menybox -->
<div id="meny_container">

<!-- Listmeny -->
<ul id="meny">
<li><a href="
index.php">Sidan 1</a></li>
<li><a href="
../undermapp/sida2.php">Sidan 2</a></li>
<li><a href="
../undermapp/sida3.php">Sidan 3</a></li>
<li><a href="
../undermapp/sida4.php">Sidan 4</a></li>
<li><a href="
../undermapp/sida5.php">Sidan 5</a></li>
<li><a href="
../undermapp/sida5.php">Sidan 6</a></li>
</ul>

</div>

 

 FEL: absoluta sökvägar

Du kan även använda absoluta sökvägar som innehåller hela domännamnet men om du har flera domännamn som pekar till samma webbplats fungerar inte detta.

I exemplet nedan är webbplatsens URL: https://webdesignskolan.se

<!-- MENY BOX -->
<div id="meny_container">

<!-- LISTMENY -->
<ul id="meny">
<li><a href="https://webdesignskolan.se/page1/sida1.php">Sidan 1</a></li>
<li><a href="https://webdesignskolan.se/page2/sida2.php">Sidan 2</a></li>
<li><a href="https://webdesignskolan.se/page3/sida3.php">Sidan</a></li>
<li><a href="https://webdesignskolan.se/page4/sida4.php">Sidan 4</a></li>
<li><a href="https://webdesignskolan.se/page5/sida5.php">Sidan 5</a></li>
<li><a href="https://webdesignskolan.se/page6/sida6.php">Sidan 6</a></li>
</ul>

</div>

OBS! Den aboluta sökvägen i koden ovan fungerar inte om besökaren använder ett annat av våra domännamn som tex:

webdesignskolan.se
www.webdesignskolan.com
www.webdesignskolan.nu

 

 RÄTT: sökvägar relativa till dokumentroten

Den bästa lösningen är att använda sökvägar som är relativa till dokumentroten (site root): Då kan du vara säker på att menyn fungerar i alla sidor i din webbplats oavsett vilket domännamn som används.

I exemplet nedan är webbplatsens URL: https://webdesignskolan.se men det har ingen betydelse för sökvägarna som då bara innehåller mappnamn och sidnamn:

<!-- Menybox -->
<div id="meny_container">

<!-- Listmeny -->
<ul id="meny">
<li><a href="
/index.php">Sidan 1</a></li>
<li><a href="
/undermapp/sida2.php">Sidan 2</a></li>
<li><a href="
/undermapp/sida3.php">Sidan 3</a></li>
<li><a href="
/undermapp/sida4.php">Sidan 4</a></li>
<li><a href="
/undermapp/sida5.php">Sidan 5</a></li>
<li><a href="
/undermapp/sida5.php">Sidan 6</a></li>
</ul>

</div>

 

Visa den aktiva sidan med PHP

Du kan använda PHP för att identifiera aktiv sida och lägga till en IF-sats i varje menyval.

Funktionen basename() för att hämta filnamnet

Metoden för att identifiera den aktuella sidan är att använda PHP-funktioner för att hämta filnamnet från webbservern. Den fördefinierade variabeln $_SERVER kan tillsammans med elementet PHP_SELF användas för att hämta hela sökvägen till aktuell PHP-sida.

Sökvägen som visas är relativ till dokumentroten (site root)

Läs mer om "$_SERVER" och "PHP_SELF" hos PHP.net

Om du bara vill visa filnamnet och inte hela sökvägen kan du använda funktionen basename()

Läs mer om "basename" hos PHP.net

Prova funktionen genom att använda koden nedan i ett av dina egna PHP-dokument:

<?php

echo '<p>
Sökvägen (relativ till site root) till den här filen är: <br><strong>' .
$_SERVER['PHP_SELF']
. '</strong></p>';

echo '<p>
Filnamnet är: <br><strong>' .
basename($_SERVER['PHP_SELF'])
. '</strong></p>';

?>

Så här ser resultatet ut i webbläsaren:

 

Visa den aktiva sidan med PHP och CSS

Med IF-satser som kontrollerar om aktuell sidan har samma filnamn som hämtas med funktionen basename($_SERVER['PHP_SELF']) kan du flytta identifieraren "current".

Det krävs en hel del extra kod för att få den extra finessen men du använder ju samma meny på alla dina sidor i webbplatsen så det kan vara värt besväret.

I exemplet nedan tilldelas variabeln $current_file funktionen basename:

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

IF-satsen kontrollerar om filnamnet för den aktuella filen är detsamma som målet för länken. Om det är sant används identifieraren "current":

echo'<li> <a href="/folder/filnamn.php"' ;

if ($current_file == basename('/folder/filnamn.php')) {
echo 'id="current"';
}

echo '>
Meny 1</a></li>';

Så här kan hela koden se ut i filen meny.php:

<?php

// hämtar filnamn till aktuell sida
$current_file= basename($_SERVER['PHP_SELF']);


echo'<div id="meny_container">';

// start meny
echo'<ul id="meny">';

// MENY 1
echo'<li><a href="/index.php"';
if ($current_file == basename('/index.php'))
{echo 'id="current"';}

echo '>
Startsidan</a></li>';

// MENY 2
echo'<li><a href="/sida2.php"';
if ($current_file == basename('/sida2.php'))
{echo 'id="current"';}

echo '>
Sidan 2</a></li>';

// MENY 3
echo'<li><a href="/sida3.php"';
if ($current_file == basename('/sida3.php'))
{echo 'id="current"';}

echo '>
Sidan 3</a></li>';

// MENY 4
echo'<li><a href="/sida4.php"';
if ($current_file == basename('/sida4.php'))
{echo 'id="current"';}

echo '>
Sidan 4</a></li>';

// MENY 5
echo'<li><a href="/sida5.php"';
if ($current_file == basename('/sida5.php'))
{echo 'id="current"';}

echo '>
Sidan 5</a></li>';

// MENY 6
echo'<li><a href="/sida6.php"';
if ($current_file == basename('/sida6.php'))
{echo 'id="current"';}

echo '>
Sidan 6</a></li>';

// slut meny
echo '</ul> </div> ';

?>

Så här ser resultatet ut i webbläsaren:

Klicka här för att se exemplet

 

Hämta hela exemplet som ZIP-fil här

 

TIPS! Läs guiden Responsiv meny » för anpassning till mobila enheter och smartphones.