Et af de mest populære indlæg her på siden har siden 2007 været Dynamiske Sider med PHP Include , hvor jeg gennemgik hvordan du nemt og enkelt med PHP include kunne inkludere dit indhold ind i dit design, således alt design, navigation osv lå i index.php, mens indhold lå for sig selv. Indlægget blev senere udbygget med unikke metatags i forhold til seo. Disse artikler er efterhånden gamle, og visse funktioner virker heller ikke længere i forhold til de nyeste versioner af PHP. Derfor kommer her version 2012 af Dynamiske sider med PHP include – i denne version går vi skridtet videre og tilføjer pæne urls, som igen også har værdi i forhold til seo.
Artiklen her gennemgår overgangen fra statiske html sider til dynamiske php sider slavisk, så hvis du bare ønsker det fulde eksempel og den endelige kode, så spring til sidste afsnit 
Hvorfor dynamiske sider?
Hvis du kun arbejder i HTML så har du formentlig en side med alt struktur og navigation osv i alle dine dokumenter fx i index.html, om-mig.html osv osv. Og hvis dette er tilfælde, har du uden tvivl også været pisse irriteret når du lige skulle ind og ændre noget på 10 sider… Efter denne artikel vil du slippe for det!
Krav til din server
For at få det fulde ud af dette blogindlæg er følgende krævet:
- PHP
- Apache server med mod_rewrite aktivt
PHP include virker dog også fint på IIS og andre webservere med PHP, der får du bare ikke de “pæne urls” med i købet.
Fra statisk til dynamisk – index.html til index.php
Hvad enten du opsætter dine designs i tabeller eller divs, så kan denne tutorial bruges. Lad os antage vi har en flot side som denne:
Dine sider kalder du formentlig .html, og det første vi skal gøre der derfor at omdøbe index.html til index.php . I første omgang gør dette ingen forskel, din side vil stadig se ens ud og opføre sig på samme måde. Dernæst skal vi kigge på vores links som nu hedder:
|
1 2 3 |
<a href="/om-mig.html">Om Mig</a>
<a href="/mit-cv.html">Mit CV</a>
<a href="/kontakt.html">Kontakt</a> |
Disse links skal i stedet pege på index.php og informationen om hvilken side der er tale om tilføjer vi til en GET variabel kaldet side:
|
1 2 3 |
<a href="index.php?side=om-mig">Om Mig</a>
<a href="index.php?side=mit-cv">Mit CV</a>
<a href="index.php?side=kontakt">Kontakt</a> |
GET variablen side kan vi nu modtage i index.php og bestemme hvilket indhold vi skal vise.
Klargøring af indholdet der skal vises i index.php
Alt dit indhold (de filer du tidligere har linket til i index.html) anbefaler jeg du ligger ind i en undermappe, dette gør strukturen mere overskuelig, mappen kunne fx hedde indhold. Heri ligger du om-mig.html, mit-cv.html og kontakt-mig.html – i disse filer fjerne du alt HTML der omhandler designet af siden, dvs alt fra <html> til der hvor dit indhold står, og alt efter indholdet til og med </html> Vores “Om mig” side kunne fx se sådan her ud:
|
1 2 |
<h1>Om mig</h1>
<p>Denne side handler om mig, og kun mig ;-)</p> |
Ligeledes skal du oprette en index.html i indholds mappen, som har det indhold du har stående i index.php, således at index.php kun har design og intet indhold.
Vi opretter også 404.html som skal vises hvis siden ikke findes, indholdet i denne bestemmer du selv, men igen, den skal kun indeholde indhold, intet design!
PHP Include i index.php
Nu er vores indhold klar til brug, men for at index.php kan inkludere det, skal der selvfølgelig indsættes noget kode på siden.
Først og fremmest finder du det sted i index.php hvor du ønsker at indholdet skal vises (dvs der hvor du fjernede indholdet i forrige afsnit). Her indsættes koden:
|
1 2 3 4 |
<?php
//inkluder siden
include("indhold/".$_GET['side']);
?> |
include er en af PHPs funktioner til at inkludere en fil i en anden. Her fortæller vi PHP at den skal hente GET variablen “side”, som vi sender med fra vores menu, og derefter gå ind i mappen indhold og hente denne side ud. Klikker man fx på “Om Mig” så oversætter PHP koden til include(‘indhold/om-mig.html’); og denne side bliver derfor inkluderet i index.php.
Hvad med forsiden og fejlsiden?
Kommer man ind på forsiden nu vil man blive modtaget af en fejlbesked om at PHP ikke kan inkludere indholdet. Går man derimod ind på index.php?side=index.html så får vi vist vores forside indhold. Dette gør folk selvfølgelig ikke, så det vi gør, er at sætte GET variablen “side” til index.html hvis den ikke er sat i forvejen, samt tilføjer .html til alle andre sider.
|
1 2 3 4 5 |
if (!isset($_GET['side'])) {
$_GET['side']='index.html';
} else {
$_GET['side'].='.html';
} |
Her checker vi simpelthen på om variablen ikke er sat, eller om den er tom, og hvis det er tilfælde sætter vi den til index. Koden indsættes øverst i index.php
Udover en forside skal vi også have en fejlside, hvis man fx prøver at tilgå en side der ikke eksisterer. Denne kaldte vi 404.html – og derfor skal vi sætte GET variablen side til 404 hvis der er opstået en fejl.
|
1 2 3 4 5 6 7 8 |
<?php
//sikkerhedscheck
//check om siden eksisterer, hvis ikke sæt side til 404 og sæt header til 404 siden findes ikke
if (!is_file('indhold/'.$_GET['side']) || stristr($_GET['side'],'..')) {
$_GET['side']='404.html';
header('HTTP/1.0 404 Not Found');
}
?> |
Her checker vi først om filen eksisterer med is_file(), udover dette checker vi med stristr() om variablen skulle indeholde “..” – Dette gør vi af sikkerhedshensyn, da vi på den måde er sikker på at indhold uden for indholdsmappen ikke kan inkluderes. Forsøges dette vises 404 siden i stedet.
Vi sender også header 404 not found, dette er standarden for at fortælle en browser samt søgemaskiner at denne side ikke eksisterer.
Nu har vi i bund og grund vores dynamiske hjemmeside klar. I følgende afsnit ser vi på hvordan vi kan gøre denne dynamiske side mere SEO venlig.
Unikke metatags – title, description og keywords
Ovenstående virker fuldt ud, men i forhold til søgemaskinerne er det et problem at der ikke er metatags som title og description og i høj grad at de ikke er unikke hvis vi tilføjer dem i index.php. Dette kan vi også løse med PHP ved at tilføje informationen omkring metatags direkte i vores indholdssider, og så hente denne ud i vores index.php Herunder beskriver jeg den metode som jeg synes er langt den smarteste, hvis du vil høre lidt mere omkring hvorfor kan du læse mit gamle blogindlæg om PHP Include med metatags.
For at få unikke metatags på alle vores indholdssider, skal vi selvfølgelig bruge lidt PHP i index.php , men udover det så tilføjer vi information om title, description og keywords i vores indholdssider. Dette gør vi simpelthen ved at tilføje en HTML kommentar i toppen af alle dokumenter, hvor linie 1 i kommentaren bliver title tagget, linie 2 bliver description og linie 3 bliver keywords:
|
1 2 3 4 5 |
<!--
Om mig - her kan du læse om mig
Test test blah blah test test blah dette er beskrivelsen
om mig, keywords,her
--> |
Når dette er lavet på alle indholdssider (husk de skal være unikke og beskrive den enkelte sides indhold ikke dit site generelt) så skal vi tilføje PHP koden til index.php som læser disse kommentarer:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php
//opsætning af metatags og titel - dette er for søgemaskineoptimeringsskyld
$info=file('indhold/'.$_GET['side']); //hent filen
if (isset($info[0]) && trim($info[0])=='<!--' && trim($info[4])=='-->') { //hvis linje 1 og linje 5 indeholder start og slut for kommentar
$titel=trim($info[1]); //hent linje 2
$beskrivelse=trim($info[2]); //hent linje 3
$keywords=trim($info[3]); //hent linje 4
} else {
$titel='Standard titel - SKrives her - bruges kun hvis de ikke er udfyldt på den enkelte side, og det bør den altid være';
$beskrivelse='Standard beskrivelse';
$keywords='Standard beskrivelse';
}
?> |
Her læser vi først indholdsfilen ind som et array ved at bruge file(), derefter kan vi hive title, description og keywords ind fra linie 2,3,4. Udover dette checker vi lige om der rent faktisk er metainformation i filen, og ellers sætter vi en standard.
Herefter er det bare at sætte $title, $description og $keywords ind i de rigtige HTML tags i index.php :
|
1 2 3 |
<title><?php echo $titel;?></title>
<meta name="description" content="<?php echo $beskrivelse;?>" />
<meta name="keywords" content="<?php echo $keywords;?>" /> |
Og nu har vi vores dynamiske sider med seo venlige metatags, så er der lidt større chance for vi rent faktisk også får besøg på vores side.
Pæne urls med mod_rewrite
Da vi startede med vores statiske sider havde vi faktisk nogle ganske pæne URLS fx i form af om-mig.html – dem har vi nu skrevet om til index.php?side=om-mig – Dette er ikke nær så læsevenligt, og du får heller ikke nær så meget værdi med i forhold til søgemaskineoptimering. Det er der heldigvis en løsning på. Når vi har Apache som webserver og modulet mod_rewrite aktiveret (det er det på de fleste apache installationer) så kan vi nemlig nemt og elegant få webserveren til at omdirigere om-mig.html til index.php?side=om-mig.html uden at brugeren (og søgemaskinerne) ser det. Derfor ændrer vi alle vores links i index.php tilbage til at pege på fx om-mig.html, så vores menu igen ser sådan her ud:
|
1 2 3 |
<a href="/om-mig.html">Om Mig</a>
<a href="/mit-cv.html">Mit CV</a>
<a href="/kontakt.html">Kontakt</a> |
Samtidig fjerner vi lige alle de steder vi tilføjer .html til GEt variablen “side”. Så vores PHP kode ser sådan her ud i stedet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php
if (!isset($_GET['side'])) {
$_GET['side']='index.html';
}
//sikkerhedscheck
//check om siden eksisterer, hvis ikke sæt side til 404 og sæt header til 404 siden findes ikke
if (!is_file('indhold/'.$_GET['side']) || stristr($_GET['side'],'..')) {
$_GET['side']='404.html';
header('HTTP/1.0 404 Not Found');
}
//opsætning af metatags og titel - dette er for søgemaskineoptimeringsskyld
$info=file('indhold/'.$_GET['side']); //hent filen
if (isset($info[0]) && trim($info[0])=='<!--' && trim($info[4])=='-->') { //hvis linje 1 og linje 5 indeholder start og slut for kommentar
$titel=trim($info[1]); //hent linje 2
$beskrivelse=trim($info[2]); //hent linje 3
$keywords=trim($info[3]); //hent linje 4
} else {
$titel='Standard titel - SKrives her - bruges kun hvis de ikke er udfyldt på den enkelte side, og det bør den altid være';
$beskrivelse='Standard beskrivelse';
$keywords='Standard beskrivelse';
}
?> |
Nu skal vi så have Apache til at videresende forespørgslerne. Dette gør vi ved at lave en .htaccess fil (dette kan du gøre i din favorit editor eller blot notepad) – i denne fil indsætter vi følgende kode:
|
1 2 3 4 5 6 7 8 |
RewriteEngine On
options +FollowSymlinks
RewriteBase /
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.* - [L]
RewriteRule ^(.+)/? index.php?side=$1 [L,QSA] |
Linie 1 fortæller blot apache at den skal starte modulet mod_rewrite, som er nødvendigt for at omskrive indhold. Dernæst sikrer vi os at der ikke bliver omskrevet filnavne som rent faktisk eksisterer på serveren. Dvs. hvis der ligger en fil der hedder om-mig.html så kan den rent faktisk godt tilgås uden at den bliver sendt videre til index.php?side=index.html.
Opfyldes alle krav videresendes forespørgslen til index.php med det som brugeren har indtastet efter / som GET variablen side. Nemt og enkelt.
Du kan læse mere om mod_rewrite i mit blog indlæg: Introduktion til Pæne URLS med mod_rewrite
- Live eksempel af Dynamiske sider med PHP Include og pæne urls med mod_rewrite
- Download komplet eksempel med pæne urls og metatags (virker kun på apache med mod_rewrite slået til)
Hvorfor ikke bare et CMS?
I min verden er det ikke altid logisk at gå i gang med et CMS, denne artikel henvender sig til dem som gerne vil klare det med PHP selv, og specielt til små sider synes jeg faktisk det kan være overkill med et CMS. Her kan du være oppe og køre inden for 10 minutter, og uden brug af database, og redigeringen af indhold kan du klare i alt lige fra notepad til din yndlings html editor.
Downloads og live eksempler
Her kan du downloade alle filer fra dette blogindlæg, eller du kan se siden i aktion her (nyd lige mit fantastiske designgen 😉 )
- Live eksempel af Dynamiske sider med PHP Include og pæne urls med mod_rewrite
- Live eksempel uden mod_rewrite
- Download komplet eksempel med pæne urls og metatags (virker kun på apache med mod_rewrite slået til)
- Download komplet eksempel uden mod_rewrite (virker på alle webservere med php)
Hvis du har spørgsmål eller kommentarer så skriv endelig en kommentar til mig herunder
Jeg er vældig interesseret i denne måde at lave en menu på:
Dynamiske sider med PHP Include og mod_rewrite – version 2012
I din index fil har du denne:
Hvorfor har du kommet den i en div?
Endelig har du i style.css dette;
#content {
width:620px;
padding:10px;
border-left:1px solid #309;
float:right;
min-height:200px;
}
.clearFix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Men hvad bevirker clearFix.after?
Jeg håber selvfølgelig du vil svare mig på mine spørgsmål
mvh Erik Jensen