Onze home pagina of te wel root pagina gaat home.php heten.
Hiervoor maken we in de map controllers een bestand home.php.
<?php $title = "Home"; //hier volgt later nog meer logica require "view/home.view.php";
Boven aan in deze pagina doen we onze logica. Daarna sturen we deze logica naar een view. Deze is geplaatst in de view directory. Als naamgeving gebruiken home.view.php doordat we in de naam van de view. 'view' gebruiken kun je snel zien dat het de view betreft.
<?php require "parts/header.view.php"; require "parts/menu.view.php"; ?> <!-- Hier komt al je html code --> <?php require "parts/footer.view.php";
Op elke pagina komen een aantal dingen steeds weer terug. Het starten met HTML met de <head>
Al deze code hebben we ondergebracht in het bestand 'header.view.php'. Op bijna elke pagina komt een navigatie menu deze code hebben we in 'menu.view.php' geplaatst. Het zelfde geldt voor de footer. Als we het navigatie menu willen aanpassen kan dat in één bestand en dan wijzigt het menu op elke pagina.
<!doctype html> <html lang="nl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><?= $title??'website' ?></title> <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body>
Natuurlijk kan je hier je eigen header kwijt. Pas aan naar eigen wens. Let op dat de header een variabele 'title' gebruikt. Deze moet natuurlijk wel in de controller worden gedefinieerd.
<?php //hier komt je menu, ontwerp zelf wat of leen wat code van andere pagina's bv van https://tailwindui.com/components/preview ?> <nav> <div class="flex gap-8 bg-blue-50 p-2"> <div class="flex"> <!-- Logo van je website --> <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="bedrijfslogo"> <span class="ml-4 font-medium"><?= $config['app']['name'] ?></span> </div> <div> <a href="/" class="hover:text-indigo-700 <?= isUri("/") ? 'bg-purple-200 rounded p-2' : '' ?>">Home</a> </div> <div> <a href="/about" class="hover:text-indigo-700 <?= isUri("/about") ? 'bg-purple-200 rounded p-2' : '' ?>">About</a> </div> <div> <a href="/contact" class="hover:text-indigo-700 <?= isUri("/contact") ? 'bg-purple-200 rounded p-2' : '' ?>">Contact</a> </div> </div> </nav>
Ons menu bevat een logo en naam van onze website. Daarnaast drie links naar de pagina's van onze website. Deze moeten we natuurlijk wel nog aanmaken.
In ons menu wordt de isUri() functie gebruikt. Deze kijkt of we op de betreffende pagina zijn. Zodat de opmaak kan worden aangepast.
isUri('/home') ? 'style bij waar' : 'style bij niet waar'