We gaan nu de voorgaande theorie toepassen. In index.php halen we de uri op en zetten dit in $uri
.
<?php $uri = trim(parse_url($_SERVER['REQUEST_URI'])['path'], "/");
Daarna kunnen we kijken. Als de $uri
gelijk is aan "about", dan willen we about.php inladen.
if($uri == "about"){ require "about.php"; }
Om deze vergelijking te maken gebruiken we if( ... )
. Let op de dubbele ==
in de vergelijking. Een dubbele ==
betekend is het ene gelijk aan het andere. Een enkele =
zal de waarde van $uri
wijzigen in "about". Deze wijziging is altijd waar.
Maar we hebben drie pagina's dus moeten we dit steeds herhalen. Omdat we eerst onze home pagina willen laten zien mag dit ook met een lege $uri.
if ($uri == "") { require "home.php"; } if ($uri == "contact") { require "contact.php"; } if ($uri == "about") { require "about.php"; }
Als de $uri overeenkomt met "contact" dan mag er eigenlijk wel gestopt worden met uitvoeren. Dit kan door die() of exit()
if ($uri == "") { require "home.php"; die(); } if ($uri == "home") { require "home.php"; die(); } if ($uri == "contact") { require "contact.php"; die(); } if ($uri == "about") { require "about.php"; die(); }
Omdat je heel veel keer een if( ...) krijgt kan je ook gebruik maken van een PHP switch statement. Dit doet hetzelfde maar is iets korter
switch ($uri){ case "": case "home": require "home.php"; break; case "contact": require "contact.php"; break; case "about": require "about.php"; break; default: require "404.php"; //pagina niet gevonden break; }
Je zou een default waarde kunnen opgeven als de $uri
aan geen van de opties voldoet.
Maak een keuze van één van de twee opties en plaats in je index.php
Door onze router doen onze urls van het menu het niet meer. Dit moeten we aanpassen.
Let op de link wordt nu bijvoorbeeld home
of /
i.p.v. home.php
<nav class="bg-gray-500"> <div class="flex justify-between items-center"> <div class="flex justify-start items-center text-xl space-x-4"> <a href="/" class="flex items-center"> <img src="images/wizard-logo.png" alt="wizard" class="h-10 p-2"> <span class="font-bold">Code Wizards</span> </a> <a href="/" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md font-medium">Home</a> <a href="contact" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md font-medium">Contact</a> <a href="about" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md font-medium">About</a> </div> <div class="justify-end"> <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md font-medium">Login</a> </div> </div> </nav>