4, Views

In deze les leer je ...

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. Deze staat in views/country.

Je ziet dat er op regel 23 een zogenaamde widget wordt aangeroepen.

1. Kolommen aanpassen

In de parameters van deze widget zie je dat de kolommen Code, Name, Continent, Region en SurfaceArea worden afgedrukt. Je ziet ook dat bepaalde kolommen niet worden afgedrukt deze staan in commentaar.

Opdracht 1

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.

2. Kopjes aanpassen

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',
],

Je ziet dat we de surface area nu hebben vervangen door een assiociative array. Dus waar in de code het woord 'SurfaceArea' staat plaats je het assiociative array zoals hierboven is aangegeven.

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 2

Pas nu de kolom Population aan; en zet in de kolom header 'Inwoners'.

3. Kolom breedte aanpassen

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 3

Pas de breedte van de kolom Inwoners (Population) ook aan; zet de breedte op 30 pixels.

4. Waarde van kolom aanpassen

Stel we willen km2 achter de oppervlakte plaatsen, dan kunnen we de waarde van de kolom als volgt aanpassen:

[
	'label' => 'Oppervlakte',
    'attribute' => 'SurfaceArea',
	'format' => 'raw',
    'value' => function($data) {
      							  return sprintf("%8d k&#13217", $data->SurfaceArea);
                            	}
]

Regel 4 t/m 7 in deze code verandert de waarde van de kolom.

Opdracht 4

Test uit wat de code doet, haal de 'format'=> 'raw' weg en kijk wat er gebeurt. Waarom is deze regel nodig?

Vervang regel 6 door

return 'hallo';

en kijk wat er gebeurt.