Opdracht E2 doorsturen

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

Navigatiemenu aanpassen

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>