Skip to main content

3, Views en 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 onze eigen view maken en die aan een menu koppelen.

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.beschreven:

    image-1613992758628.pngimage-1613993167595.png

    Het

     

    menu ziet er dus zo uit.

  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 daana staat een ''. Deze laatste lege string zijn de parameters. Als we alle landen uit Europa willen filteren dan kunne we de volgende URL gebruiken:

    /country/index?countrySearch[Continent]=Europe

    Het gedeelte na de ? is de parameter. In Yii zet je een paramter als volgt in een assiociatieve array:

    'countrySearch[Continent]'=>'Europe'

    Het hele menu item ziet er dus als volgt uit:
    ['label' => 'Europa', 'url' => ['/country/index', 'countrySearch[Continent]'=>'Europe'] ],
  4.  

 

 

 

Van Controller  naar View

Verander de controller ExampleController.php die je in de vorige les hebt gemaakt in:

<?php

namespace app\controllers;

use Yii;
use yii\web\Controller;

class ExampleController extends Controller
{
  public function actionSay($message = 'empty')
  {
    return $this->render('say', ['message' => $message]);
  }
}

In regel 12 roep je binnen Yii de view say aan en geef je de variabele $message mee.

De views staan in de directory views. In deze directory staan weer directories waarvan de naam overeenkomt met de controller-namen. En daarin staan dan de view zelf. De verwijzing naar de view say vanuit de controller in het bovenstaande voorbeeld verwijst dus naar views/example/say.php De views bestaan uit HTML-code en korte stukjes PHP-code.

Dus maak in de directory views een nieuwe directory met de naam example en maak daarin een nieuwe file say.php.

Zet in de file view/example/say.php

<?php
use yii\helpers\Html;
?>

<h2>
Hello <?= $message ?> !!!
</h2>

Je hebt nu een verbinding gemaakt tussen de controller functie (methode) say in de ExampleController naar de view/example/say.php

Menu item maken

Als je het vorige voorbeeld bekijkt dan zie je dat de view say.php niet alleen wordt getoond. Waar komt de menu bar anders vandaan?

Dat komt, omdat alle pagina's beginnen met de views/layouts/main.php. Vanuit layout/main.php wordt alles geregeld en vanuit deze file wordt ook de view die wij hebben gemaakt aangeroepen.

In de file views/layouts/main.php wordt de standaard pagina layout beschreven.

Kijk maar eens naar de file views/layouts/main.php, daar zie je op regel 66, <?= $content ?> op deze plaats komt jouw eigen view te staan. In ons voorbeeld say.php.

Opdracht: zoek in de file views/layouts/main.php naar de menubar. Zoek naar de standaard menu items zoals Home, About en Contact. Probeer zelf uit te vinden hoe je het country overzicht (country/index) kan toevoegen aan de menu-bar.

Als het is gelukt dan zal het nieuwe menu-item in alle pagina's zichtbaar zijn.

Tip: bedenk eerst wat de routing ook alweer was naar onze country pagina. Wat was de controller en wat was de functie (method) en hoe vertalen we die in de juiste route?

Country overzicht aanpassen

Onze CRUD-generator (Gii) heeft voor ons een country overzicht gemaakt. Als je de CountryController.php opent dan zie je dat function (method) actionIndex de view index aanroept. Open deze index file.

Widget

Je ziet dat er op regel 23 een zogenaamde widget wordt aangeroepen. Een widget is standaard Yii module waarmee je een stukje front end (in de view) kan plaatsen. In de parameters van deze widget zie je dat de kolommen Code, Name, Continent, Region en SurfaceArea worden afgedrukt.

Opdracht: verander de lay-out in het country overzicht en laat de volgende kolommen in deze volgorde zien: Code, Name, Population, SurfaceArea en Capital.

Population laat inwoneraantal zien en SurfaceArea laat oppervlakte zien.

Foreign Key

In het country overzicht staat nu de Capital, maar daar staat een nummer. Dit is de foreign key naar de tabel Cities. In de volgende les gaan we er voor zorgen dat we deze kolom vullen met de naam van de hoofdstad in plaats van deze foreign key.

Extra

Stel we willen het kopje boven de kolom veranderen, dan kan dan als volgt. Vervang bijvoorbeeld 'SurfaceArea' in de GridView door het volgende array.

[ 'label' => 'Oppervlakte',
  'attribute' => 'SurfaceArea',
],

Dit verteld de GridView snippet dat het label Oppervlakte moet zijn (dit wordt boven aan de pagina gezet) en dat de waarde in de kolom moet worden gevuld met 'SurfaceArea'.

Opdracht: pas nu de kolom Population ook aan en zet in de kolom header 'Inwoners'.

We gaan de kolombreedte  aanpassen. Vervang het blok van net door het volgende:

[ 'label' => 'Oppervlakte',
  'attribute' => 'SurfaceArea',
  'contentOptions' => ['style' => 'width:30px; white-space: normal;'],
],

Opdracht: Opdracht pas de breedte van de kolom Inwoners (Population) ook aan.

--

 

Back to top