## Opdracht F1 Code re-organiseren

### Mappen structuur

De applicatie wordt groter en groter op een gegeven moment hebben we meer dan 100 .php bestanden. Het terugvinden van een bestand wordt dan steeds moeilijker. Het is handig om de bestanden te organiseren in mappen.

Hiervoor maken we de volgende mappen structuur aan (images had je al)

root
app
controllers
models
views
parts
src
views
webroot
images

In de "webroot" komen bestanden te staan die direct voor de hele wereld toegankelijk zijn.
In de "src" directory komen bestanden te staan die in elke website gebruikt zouden kunnen worden.
In de "app" directory komen de bestanden te staan die specifiek voor de betreffende webapplicatie zijn.

Doe dit ook voor jou project OF download van GitHub (bespaart veel tijd)

Als je kiest voor de snelle weg Download van GitHub moet je alle bestanden uit opdracht_F1 (uit gedownload zip bestand) kopieren naar je root folder van USBwebserver. Alle bestanden die je al had kan je verwijderen. Wijzig het path in settings van USBwebserver naar `{path}/root/webroot` en dat is alles. Lees onderstaande kort door zodat je wel weet wat er is gebeurt.

### Naamgeving views

We gaan nu views en controllers aanmaken. Om voor ons zelf te weten dat we met een view aan het werk zijn, is het prettig om in de bestandsnaam view op te nemen. Bijvoorbeeld home.view.php.

Omdat we dit bij de views doen is het niet meer nodig voor de controllers.

### Views maken

In de map views maken we een nieuw mapje `parts`. Hier in komen de footer.php, header.php en navigatie-menu.php. Na het plaatsen in deze map wijzig je de namen naar footer.view.php, header.view.php en navigatie-menu.view.php.

Deze onderdelen zullen we op bijna elke pagina gebruiken. Het is daarom handig om deze op een centrale makkelijk te vindbare plek neer te zetten. (parts)

Verplaats home.php, about.php en contact.php naar views. En hernoem de bestanden met een view.php. Maak ook 3 lege bestanden in controllers (about.php, contact.php en home.php)
Als het goed is ziet je directory structuur er dan uit zoals hieronder.

Uiteraard werkt onze pagina niet meer door alle verplaatsingen.

Wijzig in router.php de require naar het juiste pad

    if ($uri == "") {
        require "controllers/home.php";
        die();
    }
    if ($uri == "home") {
        require "controllers/home.php";
        die();
    }
    if ($uri == "contact") {
        require "controllers/contact.php";
        die();
    }
    if ($uri == "about") {
        require "controllers/about.php";
        die();
    }

    http_response_code(404);
    require "views/404.view.php";
    die();

In onze controllers zetten we de $title en doen een require van de view. Voorbeeld voor controller/home.php

    <?php
    $title = "Home";

    require __DIR__ . "/../../app/views/home.view.php";

De betekenis van ../ betekend een directory terug. Dus in dit geval vanuit webroot twee directories terug. En daarna volgen we het path app => views => home.view.php
Later in de cursus zullen we dit enorm vereenvoudigen.

home.view.php

    <?php
    require __DIR__ . "/../../app/views/parts/header.view.php";
    require __DIR__ . "/../../app/views/parts/navigatie-menu.view.php";
    ?>
        <div class="sm:mx-10">
            <h1 class="text-3xl my-4">Home</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aspernatur cupiditate delectus
                deleniti
                dignissimos dolor, dolore fuga fugiat magni maiores minima mollitia nihil obcaecati quia quidem recusandae
                repellendus totam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam exercitationem iusto
                molestias
                nemo nostrum perspiciatis quas quia quibusdam veritatis? At debitis ducimus eos molestiae mollitia numquam
                pariatur
                praesentium quas vitae!</p>
        </div>
    <?php
    require __DIR__ . "/../../app/views/parts/footer.view.php";

Let op we verwijderen de `$title` uit home.view.php en passen de paden aan bij de require.
Doe hetzelfde voor about.php en contact.php en de bijhorende views.

Belangrijk

!! Om alles te laten werken is het belangrijk dat we bij de settings van USBWebserver het path aanpassen naar `{path}/root/webroot` !!