Skip to main content

3, Menu

In deze les gaan we routing zoals we dat in de vorige les hebben geleerd toepassen. We gaan een menu maken en we gaan de menu's koppelen aan de routing

Views

In de folder views zien we drie folder staan:

  1. country
    In de country fodler staan de views die we met de CRUD generator hebben gegeneerd.
  2. layouts,
    hierin staat de standaard layout van elke Yii pagina.
  3. site
    hierin staan een aantal standaard Yii pagina's zoals de about en de contact page.

Nav Widget in main.php

In de main.php in de folder layouts staat de standaard Yii pagina structuur. Het menu is hier ook een onderdeel van.

In de main.php staat een stuk PHP-code die gebruik maakt van een Yii widget. Een Yii widget is eigenlijk een plug-in zoals we die ook bij WordPress kennen.

De code voor de menu bar heeft de volgende structuur:

<?php
	// plaats deze code in de main.php en vervang daarmee de standaard menu

    NavBar::begin([
      
     // hier wordt het type en de stijl van de menu bepaald
       'brandLabel' => Yii::$app->name,  // de naam van het menu
       'brandUrl' => Yii::$app->homeUrl, // de home page waar je naar toe gaat als je op de naam klikt
       'options' => [
          'class' => 'navbar-inverse navbar-fixed-top', // de Bootstrap 4 style van het menu
        ],
      
   ];
                  
                  
    echo Nav::widget([
      
      // hier worden de menu's en menu items bepaald
        'options' => ['class' => 'navbar-nav navbar-right'],
        'items' => [
            [ 'label' => 'Country',
                'items' => [
                    ['label' => 'Overzicht', 'url' => ['/country/index', ''] ],
                    ['label' => 'Voeg toe', 'url' => ['/country/index', ''] ],
                    ['label' => 'Europa', 'url' => ['/country/index', ''] ],
                ],
            ],
        ],
    ]);
                  
   NavBar::end();
 ?>

In Yii worden parameters voor Widget via assiociative arrays mee gegeven. Deze hebben de structuur:

[ 'key1' => 'waarde1', 'key2' => 'waarde2' ]

de waarde kan dan ook weer een assiociative array zijn:

[ 'key1' => 'waarde1', 'key2' => [ 'andere_key1'=> 'andere_waarde1', ........ ]  ]

Opgaven menu aanpassen

  1. Pas het menu aan en plaats de code zoals hierboven beschreven:

    image-1613993167595.png

     

  2. Om een country toe te voegen moet in de controller CountryController de method/function actionCreate() worden uitgevoerd.
    Bedenk hoe je de routing naar deze pagina opzet en pas het menu aan 'voeg toe' zodat deze is gekoppeld aan actionCreate() van de CountryController.

  3. In elk menu item staat de route, bijvoorbeeld 'country/index' en daarna staat een ''. Deze laatste lege string zijn de parameters. Als we alle landen uit Europa willen filteren dan kunne we de volgende URL gebruiken:

    image-1613993783698.png


    Het gedeelte na de ? is de parameter. In Yii zet je een paramter als volgt in een assiociatieve array (element): 'countrySearch[Continent]'=>'Europe'
    Het hele menu item ziet er dus als volgt uit:

    image-1613993954355.png
    Pas je menu aan en test uit of alle drie de menu items goed werken.

  4.  Maak nu een extra menu item en noem dat Asia. Dit menu item laat alle landen van Asia zien.

  5. Maak nu een menu item voor alle werelddelen: North America, South America, Asia, Europe, Africa, Antarctica en Oceania.
  6. Maak met de CRUD generator een CRUD voor city en maak een extra menu city met als items 'Overzicht' en 'Voeg toe'.

--

 

Back to top