Skip to main content

02 Opdracht

 ['class' => 'yii\grid\ActionColumn', 'template' => '{update} {view} {delete}',],

Zorg ervoor dat jouw Yii World project weer draait.

In deze opdracht hebben we een refresh en gaan we nog een keer kijken naar de standaard Yii gridview. We gaan de gegenereerde grid view van country aanpassen.

Wat leren we?

  • we frissen onze kennis weer wat op en leren met het MVC model te werken.
  • we leren hoe we de standaard Yii grid view kunnen tweaken (aanpassen).
  • we leren hoe je in PHP ene getal kan laten afronden.
  • we nemen ook een klein stukje CSS-vormgeving mee.

Checklist

  1. Controleer of je de views Country, City en CountryLanguage nog hebt. Heb je de models én de controllers?
  2. Open jouw Yii project in VSC
  3. Controleer de map models, heb je de bestanden 6 bestanden City.php, CitySearch.php, Country.php, CountrySearch.php, CountryLanguage.php en CountryLanguageSearch.php?
    Als je deze bestanden niet hebt, ga dan terug naar Yii deel 1 en doorloop nog een keer alle stappen.
  4. Type php yii serve in het terminal window in VCS in en controleer op localhost:8080/country of you website het nog doet.

OK all fine, let's go!

Om er weer in te komen gaan we onze country view aanpassen.

In stap 1 is dit wat er moet uitkomen. Controleer de kolommen. Heb je deze kolommen al? Dat kan want de laatste opgave van Yii Level 1 ging ook over dit onderwerp. Lees de opgave toch even door want je moet het overzicht precies zo maken als in het voorbeeld inclusief het afronden op twee decimalen.

image-1655802388771.png

We hebben de volgende kolommen:

image-1655802427760.png

Maak de eerste drie kolommen Name, Continent en Population (in Yii L1 wordt uitgelegd hoe dat moet).

De kolom Bevolkingsdichtheid is een berekende kolom. De bevolkingsdichtheid is het aantal inwoners (Population) gedeeld door de oppervlakte (SurfaceArea).

Bevolkingsdichtheid = aantal inwoners / oppervlakte

Je kunt daarvoor de volgende Yii-code op de juiste plaats in de Grid view van country zetten:

[
  'label' => 'Bovolkingsdichtheid',
  'attribute'=>'Population',
  'contentOptions' => ['style' => 'width:30px; white-space: normal;'],
  'format' => 'raw',
   'value' => function ($data) {
      return  $data->Population/$data->SurfaceArea;
   }
 ],

Opdracht: Plaats de code op de juiste plaats in jouw grid view van country.

Opdracht: Test de code. Zie je dat het werkt?

Nu alleen nog de getallen afronden op 2 decimalen. Je kunt hiervoor de php functie number_format gebruiken.

Opdracht: Zoek nu zelf uit hoe je de bevolkingsdichtheid kan afronden op twee decimalen.

Als laatste stap gaan we onze kolom nog wat stylen. Check de gegeven code. Zie je de styling?

Opdracht: Pas de styling aan zodat je kolom er als volgt, komt uit te zien:

image-1655802941138.png

Opdracht: Pas je jouw overzicht aan en zet je jouw voornaam in de kolom header Bevolkingsdichtheid.

Opdracht: De eerste kolom met het volgnummer moet weg.

Opdracht: De laatste kolom heeft drie icoontjes, oogje, pennetje en prullenmand. Verwijder het oogje.

Deze laatste opdracht is lastig en de opdracht is om zelf proberen uit te vinden hoe dat werkt. Als hint wordt deze code gegeven:

 ['class' => 'yii\grid\ActionColumn', 'template' => '{update} {view} {delete}',],

Probeer deze code uit door het toe te voegen als kolom. Bedenk dan hoe je de het oogje (het view-knopje) kan weghalen.


Uiteindelijk ziet de grid view er zo uit:

image-1656507597597.png

Als de grid view er zo uit ziet als hierboven, kan je de opdracht inleveren.

Inleveren

  1. Screenshot van je aangepaste city view zoals het voorbeeld hierboven, maar dan met jouw naam in de kolomnaam.
  2. Jouw aangepaste code (view/country/index.php).
Back to top