Tutorials
Simpel Website Routing
Hallo, Toen ik begon met mijn eerste website heb ik heel veel moeten zoeken naar een goede manier om mijn routing te regelen voor de website. Zoals misschien wel 99% van de mensen doet bij hun eerste website heb ook ik in het begin gewoon 6 statische pagina's gemaakt en elke keer wanneer ik iets veranderde dan moest datgene op 6 pagina's worden veranderd. Maar nadat ik uiteindelijk wat verder kwam in het begrijpen van wat ik allemaal kan met php begon ik includes te gebruiken om bijvoorbeeld de footer en de header en soms het menu gewoon te includen en zo had ik elk onderdeel maar 1 keer nodig. Uiteindelijk vond ik zelfs dit veel te veel werk want ik moest dit nog steeds op elke pagina includen. Vandaar nu deze tutorial.. het is misschien niet de beste manier om je routing te hebben maar het is een hele mooie en makkelijke manier om dit zodanig te regelen dat je nauwelijks iets hoeft te veranderen en je tijd kan steken in jezelf te ontwikkelen in plaats van uitzoeken waar je dat ene linkje nog niet aangepast hebt. Als er mensen zijn die tips hebben dan zijn die zeer welkom.
Pagina 1
Indeling website
Om je website van de routing te kunnen voorzien heb je een goed map/bestand structuur nodig. ik zal in deze tutorial even er van uitgaan dat je maar 2 pagina's hebt.
Aller eerst maken we de belangrijkste componenten aan. deze zijn als volgt
Dit zijn de belangrijkste bestanden die je nodig hebt om je routing te laten werken
hieronder zal ik even uitleggen waar elk bestand voor dient.
- index.php : hier include je al je componenten tot een geheel. dit wordt de core van je website.
- index-header.php : hier komt je header. Dat wil zeggen alles vanaf de <html> tag tot aan je <body> tag
- index-body.php : Hier komt het belangrijkste. Namelijk: je code om de juiste pagina te includen.
- index-footer.php : hier komt alles na je content div/article/section tot aan je </html> tag
- index.ini : hier komt je routing, je pagina titels, eventueel content ( als je liever geen database gebruikt ) maar in dit tutorial gaan we er even vanuit dat je deze wel wilt gebruiken omdat de meest gebruikelijke manier is.
Aller eerst maken we de belangrijkste componenten aan. deze zijn als volgt
Root
+
|
|
+----> index.php
|
+----> index-header.php
|
+----> index-body.php
|
+----> index-footer.php
|
+----> index.ini
|
+----> /css
|
+----> /js
Dit zijn de belangrijkste bestanden die je nodig hebt om je routing te laten werken
hieronder zal ik even uitleggen waar elk bestand voor dient.
- index.php : hier include je al je componenten tot een geheel. dit wordt de core van je website.
- index-header.php : hier komt je header. Dat wil zeggen alles vanaf de <html> tag tot aan je <body> tag
- index-body.php : Hier komt het belangrijkste. Namelijk: je code om de juiste pagina te includen.
- index-footer.php : hier komt alles na je content div/article/section tot aan je </html> tag
- index.ini : hier komt je routing, je pagina titels, eventueel content ( als je liever geen database gebruikt ) maar in dit tutorial gaan we er even vanuit dat je deze wel wilt gebruiken omdat de meest gebruikelijke manier is.
Pagina 2
index.php
In de 'core' van je website zoals ik het eerder al noemde weef je al je componenten tot een geheel. Voor een simpele website volstaat dit al
<?php
include 'index-header.php';
include 'index-body.php';
include 'index-footer.php';
?>
<?php
include 'index-header.php';
include 'index-body.php';
include 'index-footer.php';
?>
Pagina 3
index-header.php
In je index-header komt er niet heel veel spannends. Hier komen voornamelijk je php functies die later in de content afgehandeld worden met eventueel een echo.
Het enige wat wel belangrijk is om je menu hier dynamisch op te halen. Dit gaan we op de volgende manier doen.
<?php
/*
* Menu block
*/
$menu = '';
if (file_exists("index.ini") && is_array($content = parse_ini_file("index.ini", true)))
{
if (array_key_exists("navigation", $content))
{
foreach ($content["navigation"] as $basename => $title)
{
if(isset($_GET['page']) and $_GET['page'] == $basename)
{
$class = 'current';
}
else
{
$class = '';
}
$menu .= '<li><a class="' . $class . '" href="index.php?page=' . $basename . '">' . $title . '</a></li>';
}
}
}
?>
Zoals je in het scriptje ziet heb ik ook een Class genaamd current meegegeven aan de link die op dat moment opgehaald word. dit omdat ik zie dat heel veel mensen hun actieve menu-item willen opmaken met een ander kleurtje o.i.d. en dat kan nu door in je CSS sheet een class .current te gebruiken en deze te stylen.
Voor nu is dit alles wat er in je index-header komt te staan. ( en de nodige html tags natuurlijk )
Het enige wat wel belangrijk is om je menu hier dynamisch op te halen. Dit gaan we op de volgende manier doen.
<?php
/*
* Menu block
*/
$menu = '';
if (file_exists("index.ini") && is_array($content = parse_ini_file("index.ini", true)))
{
if (array_key_exists("navigation", $content))
{
foreach ($content["navigation"] as $basename => $title)
{
if(isset($_GET['page']) and $_GET['page'] == $basename)
{
$class = 'current';
}
else
{
$class = '';
}
$menu .= '<li><a class="' . $class . '" href="index.php?page=' . $basename . '">' . $title . '</a></li>';
}
}
}
?>
Zoals je in het scriptje ziet heb ik ook een Class genaamd current meegegeven aan de link die op dat moment opgehaald word. dit omdat ik zie dat heel veel mensen hun actieve menu-item willen opmaken met een ander kleurtje o.i.d. en dat kan nu door in je CSS sheet een class .current te gebruiken en deze te stylen.
Voor nu is dit alles wat er in je index-header komt te staan. ( en de nodige html tags natuurlijk )
Pagina 4
index-body.php
Het is belangrijk om dit goed te hebben. hier komt namelijk je menu en je content
voor het menu item is niet iets heel moeilijks nodig alleen een enkel echo om hetgeen wat je aanmaakt in je index-header nu weer te kunnen geven.
voor het menu item is niet iets heel moeilijks nodig alleen een enkel echo om hetgeen wat je aanmaakt in je index-header nu weer te kunnen geven.
<header>
<nav role="navigation" class="navigation">
<?php
echo '
<ul>
'.$menu.'
</ul>
';
?>
</nav>
</header>
?>
Voor de content zie ik veel mensen een switch gebruiken. maar om nu elke keer wanneer je een pagina toevoegt ook in je script te gaan rommelen.. dat willen we natuurlijk niet. Hieronder een veel makkelijkere manier om je content toe te voegen.
ik maak eerst een pagina aan die heet main.php hier komt alles wat in mijn homepage thuis hoort. De uiteindelijke code voor de content wordt dan.
[code]
<div class="container" role="main">
<?php
// load the content
$page = isset($_GET['page']) ? $_GET['page'] : "main.php";
if( file_exists($page)) include($page);
else include("404.html");
?>
</div>
Pagina 5
index-footer.php
Voor de footer is er niets nodig kwa php. Hier komt bijvoorbeeld je footer.. je JS bestanden die in de footer kunnen etc etc..
Kortom, alles na je content blok.
Kortom, alles na je content blok.
Pagina 6
index.ini
Hier komt het belangrijkste, namelijk: het menu..
dit wordt op de volgende manier opgebouwd: bestandsnaam / value
hieronder een voorbeeldje.
Het [title] blok is optioneel. als je daar maar 1 title wilt hebben kan je natuurlijk gewoon een title opgeven in je index-header.php maar wil je dit ook dynamisch hebben dan voeg je de volgende code toe tussen je title tags.
<?php
if (file_exists("index.ini") && is_array($title = parse_ini_file("index.ini", true)))
{
if (array_key_exists("title", $title))
{
foreach ($title["title"] as $basename => $title)
{
if(isset($_GET['page']) and $_GET['page'] == $basename)
{
echo $title;
}
}
}
}
?>
dit wordt op de volgende manier opgebouwd: bestandsnaam / value
hieronder een voorbeeldje.
[navigation]
main.php = "Home"
about.php = "About"
[title]
main.php = "HOME | Reshad F Tutorial"
about.php = "ABOUT | Reshad F Tutorial"
Het [title] blok is optioneel. als je daar maar 1 title wilt hebben kan je natuurlijk gewoon een title opgeven in je index-header.php maar wil je dit ook dynamisch hebben dan voeg je de volgende code toe tussen je title tags.
<?php
if (file_exists("index.ini") && is_array($title = parse_ini_file("index.ini", true)))
{
if (array_key_exists("title", $title))
{
foreach ($title["title"] as $basename => $title)
{
if(isset($_GET['page']) and $_GET['page'] == $basename)
{
echo $title;
}
}
}
}
?>
Pagina 7
Tot Slot
Dit is de opbouw voor een makkelijke routing. als je pagina's toe wilt voegen hoef je enkel het bestandje aan te maken en in je index.ini toevoegen en klaar. Veel simpeler dan wanneer je een switch moet veranderen of 6 pagina's moet wijzigen als je een link verandert. Natuurlijk heb je nog andere manieren ( zoals het gebruik van een Framework of enkel de routing Class van een Framework ) maar niet elke beginnende PHP developer zal gelijk alles van een Framework begrijpen. Vandaar deze tutorial.
Ik hoop dat jullie er wat aan hebben.
Ik hoop dat jullie er wat aan hebben.
Reacties
0