Skip to main content

3, Views en Menu

 In deze les leergaan jewe hoerouting jezoals vanuitwe dat in de vorige les hebben geleerd toepassen. We gaan een Controllermenu maken en we gaan onze eigen view maken en die aan een viewmenu kankoppelen.

aanroepen.

Views

Je

In leertde watfolder eenviews viewzien iswe endrie jefolder leertstaan:

dat
  1. country
    In erde eencountry viewfodler bestaatstaan waarinde views die we met de CRUD generator hebben gegeneerd.
  2. layouts,
    hierin staat de standaard layout van deelke paginaYii wordtpagina.
    3. beschreven.
  3. site
    hierin Omstaan een extraaantal menu-itemstandaard toeYii tepagina's voegenzoals gaande weabout en de contact page.

Nav Widget in main.php

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

In de viewsmain.php aanpassen.
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
    NavBar::begin([
      
     // hier wordt het type en de stijl van de menu bepaald
      
   ];
   echo Nav::widget([
     
     // hier worden de menu items bepaald
     
   ]
   NavBar::end();
 ?>

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