2024

• Overview (EN)
• Front End
• Front End - 1 HTML
• Front End 2 - CSS
• Front End 4 - DOM Manipulation
• Flex Boxes
• Programmeren1
• Wat is Programmeren?
• Theorie PHP1
• PHP Intro
• PHP1
• PHP2
• PHP3
• PHP4 OOP
• PHP5 PDO
• PHP6 Refresh
• Yii
• Yii 1 - Intro
• Yii 2
• Yii 3
• Yii Challange
• Python
• Python 1 JSON
• Python 2 Flask
• Python 3 - Game of Pong
• Python 3 - Game of Pong Challenge
• Kerntaken
• Plannen c24
• Ontwerpen c24
• Testen C24
• Ontwerpen C22
• Testen C22
• Challenges
• Portfolio Challenge
• Voetbal Challenge
• Javascript Challenge
• Frond End 2
• React 2 (React Movie Explorer - concept 13/1)
• React 2 (React To-Do Master - concept 13/1)
• React 2 (TicTacToe 19-1-25)
• Digitale vaardigheden
• Compleet
• Digitale Vaardigheden Gevorderd
• Level Up Check
• Kennis-checks
• Beoordeling B3v1
• Handige JS / JQuery Functions
• Prompt Engineering

Overview (EN)

First Year

1st Period

Block One

• • General introduction.
  • Introduction to programming; variables, conditional statements, flow-control and loops.
  • Fast and short introduction into file management and code editors.
  • Introduction to HTML; tags/element, attribute, paragraphs, headers, links, images, header body, nav, section, article, footer.
  • HTML containers, HTML lists, HTML tables, HTML forms.

Block Two

• • PHP and web server (XAMPP)
  • Introduction to PHP; variables, numbers, strings, variables, conditional statements, flow-control and logical operators.
  • Introduction of CSS; selectors, coloring, sizing, alignments.
  • Internal- versus external CSS file.
  • CSS Box model, flex box, grid, media queries

2nd Period

Block Three

• • PHP; arrays, foreach, introduction into functions, advanced looping.
  • JavaScript; variables, arrays, input/output, conditional statements, loops, functions, session storage.
  • Introduction DOM
  • Database design; ERD, Entities, Attributes, data-types, 1:N relations, Primary Keys and Foreign Keys.

Block Four

• • PHP; functions, value-key arrays (associative arrays in PHP).
  • FE4, JavaScript and programming the (HTML)DOM.
  • SQL; PhpMyAdmin, select, aliases, and/or, delete and primary keys.

3rd Period

Block Five

• • PHP Introduction into OOP; classes, objects, methods, public, private and basic inheritance.
  • Databases design; ERD construction, including N:M relations.
  • Planning of IT projects

Block Six

• • PDO; PHP and databases
  • SQL; insert, update, introduction join (left join)
  • Building a full working CRUD in PHP

4th Period

Block Seven

• • PHP forms and advanced use of functions.
    
  • Introduction to PHP frameworks (Yii), routing.
    
  • IT projects and designing

Block Eight

• • Python; JSON, API programming
    
  • Introduction into React
    
  • Introduction to WordPress

Second Year

1st Period

Block Nine

• • Python/Flask, routing.
  • Devops (git)
  • PHP Frameworks (Yii); git, rouitng, relations, selecting, sorting.
  • IT Projects and testing

Block Ten

• • Python and (simple) game development.
  • PHP Frameworks (Yii), creating your own CRUD.
  • ???

2nd Period

Block Eleven

• • Introduction to RegEx
  • Bootstrap/Less
  • PHP Frameworks, introduction to Laravel.
  • IT Projects and 'Lessons Learned' (reflections).

Block Twelve

• • React
    
  • Laravel
  • Bin/Hex
  • ???

Front End

Front End - 1 HTML

python reformatterCanvas.py 18665 52539 https://www.roc.ovh/books/2024/page/front-end-1-html

01 - Intro + wat is HTML

Welkom bij de Frontend Module 1!

In deze module leer je hoe je je eerste webpagina maakt met behulp van HTML.

Laten we beginnen met een overzicht van wat HTML is en wat je daarvan zult leren in deze module.

HTML

Opdracht

• Ga naar de "Voortgangsoverzicht pagina" van je Canvas Monitor en zoek op de structuur van de websitepagina naar op welke regel je naam voorkomt.
• Wat staat er op de eerste en laatste regel?
• Hoeveel regels telt de code?
• Noteer op welke regel je naam staat en welke HTML-code er vermeld staat.
• Zoek uit wat deze code doet.

Inleveren

• Screenshot van de code waar je naam staat.
• pdf bestand met antwoord op de vragen.
  

Voorbeeld:

02 - Jouw eerste HTML pagina

Oke, nu we een kleine introductie hebben gehad van HTML weten we dat het gebruikt wordt voor het maken van website.

<h1> Dit is een titel! </h1>
<p> en dit een ondertekst!</p>

03 - De basics

<p> </p>
(<p> = alina, een manier om tekst te weergeven in een element)

<p>Dit is een alinea.</p>
(<p> = alina, een manier om tekst te weergeven in een element)

<a href="https://www.talnet.nl">Bezoek Example</a>

<h1>Hoofdtitel</h1>
<h2>Subtitel</h2>

<p>Dit is een paragraaf tekst.</p>

<a href="https://www.example.com">Bezoek Example</a>

<img src="afbeelding.jpg" alt="Beschrijving van de afbeelding">

<!-- Dit is een stukje commentaar -->

<!--
	En
	Dit 
	Is
	Veel
	Commentaar
-->

<!-- Deze tag is belangrijk! Niet verwijderen -->
<p> </p>

04 - Semantic elements

<header> </header>

<nav> </nav>

<main> </main>

<article> </article>

<section> </section>

<aside> </aside>

<footer> </footer>

05 - Layout

Nu we het hebben gehad over de basics van HTML en een aantal semantische elementen is het belangrijk om te bespreken hoe de layout van een gemiddeld HTML bestand eruit ziet.

Een HTML bestand heeft altijd een basisstructuur en bestaat uit het volgende (HTML skeleton)

<!DOCTYPE html>
<html>
	<head>
		<title>Mijn website!</title>
	</head>
	<body>
		<h1>Welkom op mijn webpagina!</h1>
		<p>Dit is een paragraaf tekst.</p>
	</body>
</html>

<!DOCTYPE html>: Geeft aan dat het een HTML 5 document is, dit is belangrijk omdat browsers verschillende HTML-versies op verschillende manier kunnen weergeven. DOCTYPE html zorgt ervoor dat het altijd op dezelfde manier wordt weergeven ongeacht de browser.

<html>: Dit element vertelt de browser dat alles binnen dit element HTML code is.

<head>: Dit element bevat informatie over je html document, zoals titels, links naar stylesheets ( CSS ) en scripts

<body>: Bevat de zichtbare inhoud van de webpagina. Teksts, foto’s, etc

Containers

Wat ook belangrijk is voor de layout van html bestanden zijn containers. Containers kan je zien als dozen waar dingen in zitten zoals HTML elementen die bij elkaar horen. Bijvoorbeeld een aantal foto’s. Een voorbeeld van zo’n “doos” is een <div> container.

Een <div> is een html tag dat gebruikt wordt om groter HTML elementen te groeperen. Zoals een aantal foto’s.

Deze containers met foto’s kunnen ook gewoon weer in een container gestopt worden!

Voor kleinere elementen zoals stukken tekst kan je een <span> container gebruiken. In het volgende hoofdstuk vertellen we wat het verschil is.

Een div wordt ook wel een “block-container” genoemd omdat het gebruikt wordt om grote html elementen te bevatten waarbij een <span> een “inline-container” genoemd wordt omdat het kleine html elementen bevat.

Je hebt meerdere block containers, kan je al raden welke?… De semantische elementen! Dit zijn ook containers wat HTML elementen die bij elkaar horen groeperen. Denk aan <article>, <footer>, <nav> etc. Dit zijn allemaal containers.

Voorbeeld:

<nav>
    <a href="home">Home</a>
    <a href="about">Over ons</a>
    <a href="contact">Contact</a>
</nav>

Opdracht

• Maak een nieuw HTML bestand “opdracht6.html” en maak een website waar je een nieuwsartikel kan lezen.

• Om dit te doen, maak een HTML skeleton en gebruik de volgende containers
  • <header>
  • <nav>
  • <article>
  • <footer>
    

Inleveren

1. Screenshot van d gehele broswer waarop deze pagina te zien is
   
2. het HTML bestand.

WAARSCHUWING: Aan het einde van deze module is er een eindopdracht die mondeling besproken wordt. Als blijkt dat je onvoldoende kennis hebt over de onderwerpen van deze module, gaan we ervan uit dat er gefraudeerd is (bijvoorbeeld door het gebruik van ChatGPT of het overnemen van werk van anderen). Zorg ervoor dat dit niet gebeurt!

06 - Formatting

<span> </span>

<a> </a>

<strong> </strong>

<em> </em>

<b> </b>

<i> </i>

<small> </small>

<mark> </mark>

07 - Lists

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

08 - Tables

<table border=1>
  <tr>
    <th>kolom 1</th>
    <th>kolom 2</th>
  </tr>
    <tr>
        <td>Cel 1</td>
        <td>Cel 2</td>
    </tr>
    <tr>
        <td>Cel 3</td>
        <td>Cel 4</td>
    </tr>
</table>

<table border=1>
    <thead>
        <tr>
            <th>Kop 1</th>
            <th>Kop 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cel 1</td>
            <td>Cel 2</td>
        </tr>
        <tr>
            <td>Cel 3</td>
            <td>Cel 4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Voettekst 1</td>
            <td>Voettekst 2</td>
        </tr>
    </tfoot>
</table>

<table border=1>
    <tr>
        <th>Kop 1</th>
        <th>Kop 2</th>
        <th>Kop 3</th>
    </tr>
    <tr>
        <td>Cel 1</td>
        <td colspan="2">Cel 2 en 3</td>
    </tr>
    <tr>
        <td rowspan="2">Cel 4 en 5</td>
        <td>Cel 6</td>
        <td>Cel 7</td>
    </tr>
    <tr>
        <td>Cel 8</td>
        <td>Cel 9</td>
    </tr>
</table>

09 - Forms

<form action="submit.html" method="post">
	<input type="text" name="naam" placeholder="Voer je naam in">
	<input type="submit" value="Verzenden">
</form>

<!-- tekst -->
<input type="text" name="naam" placeholder="Voer je naam in">

<!-- wachtwoord -->
<input type="password" name="wachtwoord" placeholder="Voer je wachtwoord in">

<!-- email-->
<input type="email" name="email" placeholder="Voer je e-mail in">

<!--radio button-->
<input type="radio" name="gender" value="man"> Man

<!-- checkbox -->
<input type="checkbox" name="hobby" value="lezen"> Lezen

<!-- Form submit(verstuur) button -->
<input type="submit" value="Verzenden">

<!-- Form reset button -->
<input type="reset" value="Reset">

<select name="land">
    <option value="nederland">Nederland</option>
    <option value="belgie">België</option>
    <option value="duitsland">Duitsland</option>
</select>

<textarea name="opmerkingen" placeholder="Voer je opmerkingen in"></textarea>

10 - Eindopdracht

Front End 2 - CSS

01 - Introductie

Wat is CSS?

CSS is een taal die wordt gebruikt om de stijl van een website te beschrijven. Met CSS kun je bepalen hoe HTML-elementen eruitzien, zoals de kleuren, lettertypen, marges en afstanden.

Dit helpt om je website mooier, aantrekkelijker en gebruiksvriendelijker te maken.

HTML en CSS

HTML wordt gebruikt voor de structuur van een website.

CSS wordt gebruikt voor de opmaak en lay-out.

Consistent

Als je CSS op de juiste manier gebruikt dan hoef je maar één keer een stijl aan te maken. Deze wordt dat netjes op de hele HTML toegepast. Op die manier zien bijvoorbeeld al je <h1> headers er hetzelfde uit. Dit heet consistent. Je website heeft een consistente vormgeving als de vormgeving uniform is.

CSS maakt het dus eenvoudig om een consistente stijl te behouden over meerdere pagina's.

Responsive

Als je CSS goed toepast kan je er ook voor zorgen dat je website er op je laptop én op je telefoon goed uit ziet. Dit heet responsive. Met CSS kun je je website dus aanpassen aan verschillende schermformaten, zoals smartphones, tablets en desktopcomputers.

Voorbeeld

Kijk nu naar het voorbeeld (EN)  van hoe CSS wordt gebruikt.

Link naar CSS introductievideo: https://youtu.be/0afZj1G0BIE

WAARSCHUWING: Aan het einde van deze module is er een eindopdracht die mondeling besproken wordt. Als blijkt dat je onvoldoende kennis hebt over de onderwerpen van deze module, gaan we ervan uit dat er gefraudeerd is (bijvoorbeeld door het gebruik van ChatGPT of het overnemen van werk van anderen).
Zorg ervoor dat dit niet gebeurt!

Opdracht

Maak je eigen webpagina mooi met CSS

1: Maak een nieuw HTML-bestand met visual studio code
bestandsnaam: 01-CSS-je_eigen_naam.html en voeg de volgende code toe :

<!DOCTYPE html>
<html>
<head>
<title>Opdracht 1 - CSS Introductie</title>
<style>
p {
    font-family: Cambria;
    text-align: center;
}
h1 {
    font-size: 30px;
    color: rgb(218, 186, 235);
    text-align: center;
}
body {
 	font-size: normal; 
}
.intro {
 	color:blueviolet;
}
</style>
</head>
<body>
  <h1 id="titel">Welkom op de website van ......!</h1>
  <p class="intro">Dit is een introductie over mijzelf.</p>
  <p class="intro">Ik woon in ...... en kom met de ..... naar school</p>
  <p class="intro">Ik hou van programmeren en het maken van websites.</p>
</body>
</html>

Herken je de class in de paragraaf <p class=....> ? Nee, kijk dan nog eens naar de video of zoek op wat class precies inhoud!

2: Vul de puntjes in.

3: Zoek uit met welke CSS code de achtergrond van je website een andere kleur krijgt.
Geef je website je favoriete kleur door in de CSS van de body een regel toe te voegen onder de regel font-size: normal;

4: Open het HTML-bestand in een webbrowser en zie hoe de CSS de stijl van je webpagina verandert.

Experimenteer met verschillende CSS eigenschappen en waarden om de opmaak verder aan te passen.
Bekijk en probeer de Try it Yourself >> op:  https://www.w3schools.com/css/default.asp

Inleveren:

1. HTML bestand
2. Screenshot
   (van je browser waarin je webpagina hebt geopend, zorg dat de URL van je pagina zichtbaar is.)
   
   Voorbeeld:
   

   

02 - Basisconcepten van CSS

CSS staat voor Cascading Style Sheet en word gebruikt om een website vorm te geven. Als je met HTML de structuur bouwt dan is CSS de opmaak. We kunnen nu dus ook wat meer creativiteit laten zien.

Selectors

Een CSS-selector is een patroon dat wordt gebruikt om de HTML-elementen te selecteren die je wilt stylen. Hier zijn enkele veelvoorkomende selectors:

• Element selector: selecteert alle elementen van een bepaald type.

p {
  color: blue;
}

Dit verandert de tekstkleur van alle <p>-elementen naar blauw.

• Class selector: selecteert elementen met een specifieke class.

.intro {
  font-size: 20px;
}

Dit stelt de lettergrootte in van alle elementen met de class "intro" op 20 pixels.

• ID selector: selecteert het element met een specifiek ID.

#header {
  background-color: yellow;
}

Dit verandert de achtergrondkleur van het element met het ID "header" naar geel.

Eigenschappen en waarden

CSS gebruikt eigenschappen en waarden om de stijl te definiëren. Enkele veelvoorkomende eigenschappen zijn:

color: de kleur van de tekst.
background-color: de achtergrondkleur van een element.
font-size: de grootte van de tekst.
margin: de ruimte buiten een element.
padding: de ruimte binnen een element.

Bekijk en probeer de Try it Yourself >> op: https://www.w3schools.com/css/css_selectors.asp

Opdracht

1. Maak een nieuw HTML-bestand met visual studio code en voeg de onderstaande code bij 4. toe
   bestandsnaam: 02-CSS-je_eigen_naam.html
2. Vul in de puntjes de ontbrekende gegevens.
3. Bekijk je werk.
   Open het HTML-bestand in een webbrowser en zie hoe de CSS de stijl van je webpagina verandert.
   Experimenteer met verschillende CSS-eigenschappen en waarden om de opmaak verder aan te passen naar wat je zelf mooi vind.

4. Code
   

   <!DOCTYPE html>
   <html>
   <head>
   <title>Opdracht2 - CSS - ...</title>
   <style>
   body {
       background-color: ....;
   }
   #header {
       background-color: ....;
   }
   h1 {
       font-family: ....;
       font-size: ...;
       color: ...;
       text-align: ...;
   }
   h2 {
       font-family: ...;
       font-size: ...;
       color: ...;
       text-align: ...;
   }
   .intro {
       font-size: ...;
       color: rgb(...);
       text-align: ...;
   }
   .alinea {
       font-size: ...;
       color: ...;
       text-align: ...;
   }
   p {
       font-family: verdana;
       color:blueviolet;
       text-align: left;
   }
   </style>
   
   </head>
   <body>
       <div id="header">
           <h1 id="titel">Welkom op de website van .....!</h1>
       </div>
       <h2>Dit is een introductie over mijzelf.</h1>
       <p class="intro">Ik woon in .... en kom met de .... naar school.</p>
       <p class="alinea">Ik hou van .... en .....
           In mijn vrije tijd .... en ....<br>
           Als sport ....<br>
           Ik probeer iedere dag .....
       </p>
   </body>
   </html>

Inleveren:

1. HTML bestand
2. Screenshot
   van je browser waarin je webpagina hebt geopend, zorg dat de URL van je pagina zichtbaar is!

Voorbeeld:

03 - CSS Linken aan bestand

Je merkt al dat je code stuk langer gaat worden. Het is het netste om jouw CSS-code apart in een speciaal ".css" bestand te schrijven. Hierdoor wordt de html overzichtelijker en kan je css voor meerdere HTML bestanden gebruikt worden.

Er zijn ook nadelen waar je rekening mee moet houden. Voor een beginner is het lastig om met meerdere bestanden rekening te houden en de juiste naamgeving te gebruiken. Bij inline of interne CSS zie je direct de stijlen direct de stijlen op de HTML van toepassing zijn.

Als je met grote projecten met meerdere pagina's gaat werken is het overzichtelijker, onderhoudsvriendelijker en efficiënter om CSS code te linken aan een bestand.

<link rel="stylesheet" type="text/css" href="03-CSS-Yildiz-Style.css" />

Zorg dat je als het href attribuut de naam van jouw css bestand staat, dit is hoofdletter gevoelig!!!

Opdracht

1. Kopieer het html bestand van de vorige opdracht en geef het de,
   bestandsnaam: 03-CSS-je_eigen_naam.html
2. Maak in de zelfde map een nieuw bestand met de naam en extensie "03-CSS-je_eigen_naam-Style.css".
3. Knip uit je html bestand het gedeelte wat tussen de <style> tags staat en plak het in je css bestand.
4. Voeg aan je html bestand ergens tussen de <head> tags de link naar je css bestand toe. Dit doen we door de volgende regel  van het HTML-bestand te zetten:

Laat je werk aan je vakdocent zien.

Inleveren 3 bestanden

• HTML bestand
• CSS bestand
• Screenshot HTML code
  Zorg dat de URL van je pagina zichtbaar is!

Voorbeeld:

04 - Kleuren in CSS

Wat zijn Kleuren in CSS?

Kleuren zijn een belangrijk onderdeel van webdesign. Ze helpen om de aandacht van gebruikers te trekken, emoties over te brengen, en de leesbaarheid van tekst te verbeteren. In CSS kun je kleuren op verschillende manieren specificeren: met namen, hexadecimale waarden, RGB, RGBA, HSL, en HSLA.

Kleuren Specificeren in CSS

1. Kleurnamen
CSS ondersteunt een lijst van 147 standaardkleurnamen zoals red, blue, green, enz.

p {
  color: red;
}

2. Hexadecimale Kleuren
Hexadecimale kleuren gebruiken een combinatie van zes letters en cijfers om een kleur te definiëren, voorafgegaan door een #. Het formaat is #RRGGBB, waarbij RR, GG, en BB de rode, groene, en blauwe componenten van de kleur zijn.

p {
  color: #ff5733; /* Een tint oranje */
}

3. RGB Kleuren
RGB staat voor rood, groen en blauw. Kleuren worden gedefinieerd door de intensiteit van deze drie kleuren op een schaal van 0 tot 255.

p {
  color: rgb(255, 87, 51); /* Dezelfde tint oranje als hierboven */
}

4. RGBA Kleuren
RGBA is hetzelfde als RGB, maar met een extra parameter voor de alfa (transparantie) waarde, die gaat van 0 (volledig transparant) tot 1 (volledig ondoorzichtig).

p {
  color: rgba(255, 87, 51, 0.5); /* Dezelfde tint oranje met 50% transparantie */
}

5. HSL Kleuren
HSL staat voor tint (hue), verzadiging (saturation) en lichtheid (lightness). De tint gaat van 0 tot 360 (kleurenspectrum), verzadiging en lichtheid gaan van 0% tot 100%.

p {
  color: hsl(14, 100%, 60%); /* Dezelfde tint oranje */
}

6. HSLA Kleuren
HSLA is hetzelfde als HSL, maar met een extra parameter voor alfa (transparantie).

p {
  color: hsla(14, 100%, 60%, 0.5); /* Dezelfde tint oranje met 50% transparantie */
}

Opdracht

1. Maak een nieuw HTML-bestand met de naam 04-CSS-je_eigen_naam.html

2. Voeg de volgende code met inline css toe ( vul de puntjes in )

3. Wijzig de kleuren naar persoonlijke smaak.
Open het HTML-bestand in een webbrowser en zie hoe de CSS-kleuren de uitstraling van je webpagina veranderen. Experimenteer met verschillende kleurmethoden (kleurnamen, hexadecimaal, RGB, RGBA, HSL, HSLA) en waarden om de opmaak verder aan te passen.

<!DOCTYPE html>
<html>
<head>
<title>Opdracht4 - CSS kleuren - ....</title>
<style>
body {
  background-color: #....; /* AliceBlue achtergrondkleur */
  font-family: Arial, sans-serif;
}
h1 {
  color: hsl(240, ...%, ...%); /* Helder blauw */
  text-align: center;
}
.intro {
  color: rgb(..., ..., 0); /* DarkOrange tekstkleur */
  font-size: ..px;
  text-align: center;
}
.box {
  background-color: rgba(75, 0, 130, 0.5); /* Indigo met 50% ondoorzichtigheid */
  color: #.....; /* Wit */
  padding: 20px;
  margin: 20px auto;
  text-align: center;
  width: 50%;
}
.outro {
  color: #ff69b4; /* HotPink tekstkleur */
  text-align: ....;
}
</style>
</head>
<body>
    <h1>Welkom op mijn gekleurde website van .....!</h1>
    <br>
    <hr>
    <p class="intro">CSS kleuren zijn heel leuk om mee te werken.</p>
    <div class="box">Dit is een gekleurde box.</div>
    <p class="outro">Bedankt voor je bezoek en tot ziens!</p>
    <hr>
  </body>
</html>

Inleveren:

1. HTML bestand
   
2. Screenshot browser
   Zorg dat de URL van je pagina zichtbaar is!

Voorbeeld:

05 - Box Model en Layout

Het Box Model: Het CSS box model beschrijft de opbouw van elementen op een webpagina. Het bestaat uit:

• Content: De inhoud van de box, waar tekst en afbeeldingen worden weergegeven.
• Padding: Ruimte binnen de box, tussen de content en de border.
• Border: De rand om de padding en content heen.
• Margin: Ruimte buiten de border, tussen de box en andere elementen.

<!DOCTYPE html>
<html>
<head>
    <title>Opdracht 5 - CSS Box Model - ......</title>
    <style>
        .box {
            width: 200px;
            padding: 20px;
            border: 5px solid blue;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1 id="titel">Welkom op de website van ......!</h1>
    <div class="box">
        Dit is een voorbeeld van het CSS box model.
    </div>
</body>
</html>

Opdracht:

1. Maak een nieuw HTML-bestand met de naam 05-CSS-je_eigen_naam.html
   
2. Voeg de bovenstaande code toe en experimenteer met de waarden voor padding, border en margin.
3. Maak onderstaande voorbeeld  (met eigen naam).
   

Inleveren:

1. HTML bestand
   
2. Screenshot browser
   Zorg dat de URL van je pagina zichtbaar is!

Voorbeeld:

06 - Flexbox Basis

Wat is Flexbox?

Flexbox is een CSS3 layout module die een efficiënte manier biedt om items in een container te verdelen en uit te lijnen.

Opdracht

1. Maak een nieuw HTML-bestand met de naam 06-CSS-je_eigen_naam.html
2. Voeg de bovenstaande code toe en pas de waarden van justify-content aan om te zien hoe de items zich verplaatsen.
3. Maak een overzicht met verschillende waarden.

Inleveren:

1. HTML bestand
   
2. Screenshot browser
   Zorg dat de URL van je pagina zichtbaar is!

Voorbeeld:

07 - Flexbox Geavanceerd

Uitgebreid gebruik van Flexbox:

<!DOCTYPE html>
<html>
<head>
    <title>Opdracht 7 - Flexbox Geavanceerd - Yildiz</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            height: 400px;
        }
        .item {
            background-color: lightcoral;
            padding: 20px;
            margin: 10px;
            width: 100px;
            height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
    </div>
</body>
</html>

Opdracht

1. Maak een nieuw HTML-bestand met de naam 07-CSS-je_eigen_naam.html
2. Voeg de bovenstaande code toe en experimenteer met flex-wrap en align-items.
3. Lever in: HTML-bestand, screenshot van je webpagina.

Inleveren:

1. HTML bestand
   
2. Screenshot browser
   Zorg dat de URL van je pagina zichtbaar is!

Voorbeeld:

08 - CSS Grid Basis

Wat is CSS Grid?

CSS Grid is een layout systeem dat een rasterstructuur biedt voor het plaatsen van items op een webpagina.

Basisgebruik:

Opdracht:

1. Maak een nieuw HTML-bestand met de naam 08-CSS-je_eigen_naam.html.
2. Voeg de bovenstaande code toe en pas de grid-template-columns aan om meer kolommen toe te voegen of te verwijderen.
3. Lever in: HTML-bestand, screenshot van je webpagina.

Inleveren:

1. HTML bestand
   
2. Screenshot browser
   Zorg dat de URL van je pagina zichtbaar is!

Voorbeeld:

09 - CSS Grid Geavanceerd

Geavanceerd gebruik van CSS Grid:

Opdracht:

1. Maak een nieuw HTML-bestand met de naam 09-CSS-je_eigen_naam.html.
2. Voeg de bovenstaande code toe en pas de grid-template-areas aan om een andere layout te creëren
3. Lever in: HTML-bestand, screenshot van je webpagina.

Inleveren:

1. HTML bestand
   
2. Screenshot browser
   Zorg dat de URL van je pagina zichtbaar is!

Voorbeeld:

10 - Oefenen met flex en grid 

Opdracht:

1. Speel het spel: https://flexboxfroggy.com (minimaal tot oefening 5, kom je verder dan krijg je extra punten)
2. Bekijk de 3 hoofdstukken over flexbox https://www.roc.ovh/w3schools.com/css (doe de "try it yourself oefeningen.)
3. Speel het spel: https://cssgridgarden.com (minimaal tot oefening 5, kom je verder dan krijg je extra punten)
   
4. Bekijk de 3 hoofdstukken over grid op https://www.w3schools.com/css/css_grid (doe de "try it yourself oefeningen)

Inleveren:

1. Screenshot totale scherm van flexboxfroggy om te laten zien dat je minimaal tot oefening 5 gekomen bent.
2. Screenshot totale scherm van van cssgridgarden om te laten zien dat je minimaal tot oefening 5 gekomen bent.
3. Kom je in aanmerking voor bonuspunten, geef dat dan even aan in commentaar.

11 - Responsief Design met Media Queries

Wat zijn Media Queries?
Media Queries maken het mogelijk om CSS-regels toe te passen op basis van de eigenschappen
van het apparaat waarop de site wordt bekeken.

Code:

Opdracht:

1. Maak een nieuw HTML-bestand met de naam 11-CSS-je_eigen_naam.html.
2. Voeg de bovenstaande code toe en experimenteer met verschillende max-width waarden en stijlen.
3. Laat je opdracht aan de docent zien en lever een screencast van je browser in.

Inleveren:

1. HTML bestand
   
2. Screencast browser
   Zorg dat de URL van je pagina zichtbaar is!

Voorbeeld:

12 - Animaties met CSS

CSS animaties maken het mogelijk om overgangen tussen verschillende CSS-stijlen te animeren.

code:

Opdracht:

1. Maak een nieuw HTML-bestand met de naam 12-CSS-je_eigen_naam.html.
2. Voeg de bovenstaande code toe en pas de animation-duration en @keyframes waarden aan om andere animaties te creëren.
3. Laat je opdracht aan de docent zien en lever een screencast van je browser in.

Inleveren:

1. HTML bestand
   
2. Screencast browser
   Zorg dat de URL van je pagina zichtbaar is!

Voorbeeld:

Eind Project Ontwerp

Deze eindopdracht zal dienen als een afsluitend project waarin je al je kennis van CSS en HTML toepast. Je gaat een website maken die aan specifieke criteria voldoet. In deze website toont je vaardigheden en interesses. Kijk naar het CSS introductievideo : https://youtu.be/0afZj1G0BIE en bouw je eigen website zoals in de video.
Voordat je gaat maken, ontwerp je eerst hoe het gaat worden. Zonder ontwerp kan je niet bouwen. Wees creatief en maak er iets moois van.

Daarna ga je met het realiseren van je website aan de slag.

Als je klaar bent

Veel succes.

Ontwerp

De site als geheel heeft vaak een ontwerp (template). Je hebt een soort pagina structuur die vaak terugkomt op alle pagina's.
Dit kun je weergeven in een wireframe, mag iemand anders je website op een

bijvoorbeeld:

Wireframes kun je bijvoorbeeld maken met Lucidchart of Powerpoint.

Wireframe in Powerpoint

Een wireframe kun je in principe gebruiken om een schets te maken voor alle pagina's niet alleen voor de template-pagina.

Site map

In een site map laat je de structuur van je gehele website zien. Dus hoe je navigeert van de ene naar de andere pagina. Bijvoorbeeld:

Een website sitemap geeft de structuur van je website visueel weer. Daarom is het bepalen en vastleggen van een sitemap een belangrijke eerste stap tijdens de ontwikkeling van je website. Alle informatie die je op je website wil aanbieden zal ergens op een web pagina in de sitemap een plek krijgen.

(bron: https://onlineexpert.be/online-tips/website-ontwikkeling/website-sitemap-maken )

Laat je ontwerp goedkeuren en ga dan verder met het realiseren.

Inleveren 1 bestanden

• Ontwerp van je website.
  

Voorbeeld:

Eind Project Realisatie

Maak een website met een header, footer, navigatie en tekst gedeelte. De navigatie gedeelte staan minimaal 4 links naar andere pagina's of website's.

Testen

Ben je klaar met het realiseren van je website dan laat je het door twee andere personen testen met een test rapport. Zij geven feedback over de werking en lay-out van je website.
Heb je goedkeuring dan kan je het testrapport en website inleveren

Inleveren 2 bestanden

• Testrapport
  
• Software (zip bestand)

Eind Project Presenteren

Bij het beroep hoort het laten zien wat je hebt gemaakt. Nu is het de tijd om met trots je product te tonen aan belangstellende en rond je deze module af.

Eisen

Later in je examen moet je ook preenteren. Daarbij zijn dit de belangrijkste puten:

• Je presenteert overtuigend (positief, met passie, trots en met een goede energie)?
  
• Reageer je op de juiste manier op vragen/feedback?
  
• Is film bestand kleiner dan 400 MB?

Vraag in de les om uitleg.

Inleveren 2 bestanden

1. Powerpoint met de presentatie
2. Kort filmpje (ongeveer 2 à 3 minuten) waarin je een indruk geeft van je presentatie.

Front End 4 - DOM Manipulation

Inleiding

Neem eerste de theorie door op de deze pagina!

De opdrachten van dit blok sluiten op elkaar aan. Je moet ze dus in de jusite volgorde maken.

Waarschuwing: als je de opdrachten met ChatGPT maakt en je snapt niet wat je doet dan loop je met de laatste opdrachten vast. Deze opdrachtnen zijn getest en kunnen niet met behulp van ChatGPT 4.0 integraal worden opgelost.

Kom je ergens niet verder, ga dan niet verder met de volgende opdracht maar vraag hulp!

Opdracht 1, kleur aanpassen (via id)

Je hebt de volgende HTML/JS-code.

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Tekstkleur Veranderen</title>
</head>
<body>
    <p id="tekst">Dit is een voorbeeldtekst.</p>
    <button onclick="veranderKleur()">Verander Kleur</button>

    <script>
        function veranderKleur() {
            // maak de code af en plaats hieronder de code die de kleur van de tekst verandert
            ... 
        }
    </script>
</body>
</html>

De JavaScript-functie wordt aangeroepen vanuit de onclick attribuut van de HTML-knop.

Wanneer de knop wordt ingedrukt, moet de kleur van de tekst in het paragraafelement veranderen. Maak hiervoor het script af.

Zorg dat je in het script zoekt naar het element met het id "tekst". Als je het element hebt gevonden dan kan je de daarna de kleur aanpassen.

Inleveren

Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende HTML-pagina in.

Opdracht 2, kleur aanpassen (via class)

Je hebt de volgende HTML/JS-code:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Achtergrondkleur Veranderen</title>
</head>
<body>
    <p class="kleurVerander">Dit is een voorbeeldtekst 1.</p>
    <p class="kleurVerander">Dit is een voorbeeldtekst 2.</p>
    <p class="kleurVeranderNiet">Dit is een voorbeeldtekst 3.</p>
    <p class="kleurVerander">Dit is een voorbeeldtekst 4.</p>
  
    <button onclick="veranderAchtergrondKleur()">Verander Achtergrondkleur</button>

    <script>
        function veranderAchtergrondKleur() {
            // maak de code af en plaats hieronder de code die de kleur van de tekst met de class kleurVerander verandert
            ... 
        }
    </script>
</body>
</html>

De JavaScript-functie wordt aangeroepen vanuit de onclick attribuut van de HTML-knop.

Wanneer de knop wordt ingedrukt, moet de kleur van de tekst in alle paragraafelement met de class kleurVerander veranderen. Maak hiervoor het script af.

Maak gebruik van document.getElementsByClassName en gebruik een for-loop.

Denk erom dat document.getElementsByClassName een array met elementen terug geeft en dat je met de loop door het array moet heenlopen.

Bedek zelf een mooie kleur.

Inleveren

Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende HTML-pagina in.

Opdracht 3, stijl toggle

Je hebt de volgende HTML/JS-code:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Tekststijl Veranderen</title>
</head>
<body>
    <h1>Dit is een koptekst</h1>
    <p>Dit is een gewone paragraaf.</p>
    <p class="speciaal">Dit is een speciale paragraaf.</p>
    <div>Dit is een div element.</div>
    <p class="speciaal">Nog een speciale paragraaf.</p>
    <p id="speciaal">Nog een speciale paragraaf.</p>

    <button onclick="veranderTekstStijl()">Verander Tekststijl</button>

    <script>
        function veranderTekstStijl() {
            var elementen = document.querySelectorAll(........);
            for (......) {
		      // Maak de elementen green, bold, and italic (schuingedrukt)
            }
    </script>
</body>
</html>

Vul de code aan op de puntje en zorg ervoor dat zodra op de knop wordt gedrukt:

• alle elementen met de class speciaal groen, vet en schuingedrukt worden.

Als er weer op de knop wordt gedrukt dan worden:

• alle elementen met de class speciaal worden weer zwarte, niet vet en niet schuingedrukt.

De knop wisselt dus telkens de stijl alle tekst met de class speciaal.

Inleveren

Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende script in.

Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende HTML-pagina in.

Opdracht 4, counter

Bekijk het volgende voorbeeld.

<div id="nummerDiv">123</div>
<button onclick="toonGetal()">Toon Getal</button>

<script>
    function toonGetal() {
         var divElement = document.getElementById('nummerDiv');
         var getal = divElement.innerText; // Lees de tekst (in dit geval een getal) uit de div
         alert("Het getal in de div is: " + getal);
    }
</script>

Probeer te begrijpen wat er gebeurt en test de code om te kijken of je snapt wat er gebeurt!

Opdracht

1. maak een extra button
2. als je op de button druk dan roep je een javaScript funcite aan (bedenk zelf een naam voor de functie).
3. met een console.log druk je de waarde af die in de div staat; in dit voorbeeld dus 123.
4. tel 1 op bij het getal en druk dit getal ook af met een console.log. In dit voorbeeld is dat dus 124.
   
   

   Als je in JS een getal bij een getal optelt met + dan 'denkt' JS standaard dat je een string hebt. Dan wordt 1+1 dus 11 en niet 2! Om dit te voorkomen moet je aangeven dat je geen string maar een integer hebt.
   
   Dit doe je met parseInt(string).
   
   Dus parseInt(getal) + 1 wordt dan 2.
   
   Dus, stel getal = 1
   
   getal + 1 wordt 11 en
   parseInt(getal) + 1 wordt 2

5. dan zet je het getal (in dit voorbeeld dus 124) terug in de div.

Als jet goed is, heb je nu een div met een getal en telkens als je op de knop druk wordt het getal opgehoogd.

Inleveren

Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende HTML-pagina in.

Opdracht 5, Ronde teller

Maak een interactieve webpagina met een tabel die schaatsers en hun rondeteller weergeeft.

De gebruiker kan het aantal ronden voor elke schaatser verhogen door op de teller in de tabel te klikken. 

Begin met deze HTML/CSS-code:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Schaatser Ronde Teller</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
        td.rondes {
            cursor: pointer;
            background-color: #e6ffe6;
        }
        td.rondes:hover {
            background-color: #ccffcc;
        }
    </style>
</head>
<body>

    <table>
        <tr>
            <th>Schaatser</th>
            <th>Aantal Rondes</th>
        </tr>
        <tr>
            <td>Mo Mot</td>
            <td class="rondes" onclick="verhoogRondes(this)">0</td>
        </tr>
        <tr>
            <td>Ayoub Allemaal</td>
            <td class="rondes" onclick="verhoogRondes(this)">0</td>
        </tr>
        <tr>
            <td>Klaas Kaas</td>
            <td class="rondes" onclick="verhoogRondes(this)">0</td>
        </tr>
        <tr>
            <td>Goedele Goedgeluk</td>
            <td class="rondes" onclick="verhoogRondes(this)">0</td>
        </tr>
        <tr>
            <td>Roos Rommelhuis</td>
            <td class="rondes" onclick="verhoogRondes(this)">0</td>
        </tr>
        <tr>
            <td>Lars Leeghoofd</td>
            <td class="rondes" onclick="verhoogRondes(this)">0</td>
        </tr>
    </table>

</body>
</html>

Maak de code af en maak een script waarbij als je op het ronde nummer drukt, de ronde met een wordt verhoogd. Denk aan het gebruik van parseInt (vorige opdracht).

Inleveren

Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende HTML-pagina in.

Opdracht 6, eventListener

In plaats van een functie aan heel veel rijen toe te voegen, kan je ook een zogenaamde eventListener maken.

Een event is een gebeurtenis en een eventListener luistert dus of er een bepaalde gebeurtenis plaatsvindt.

We gaan onze code uit de vorige opdracht (5) aanpassen.

1. haal alle onclick attributen uit de <td>'s weg.
2. geef de tabel een id 'rondeTellerTabel'

Bekijk de volgende code:

document.addEventListener('DOMContentLoaded', function() {
            var rondesCellen = document.querySelectorAll('#rondetellerTabel .rondes');
            rondesCellen.forEach(function(cel) {
                cel.addEventListener('click', verhoogRondes);
            });
        });

Uitleg

De functie verhoogRondes moeten we iets aanpassen.

function verhoogRondes() {
            var huidigeRondes = parseInt(this.innerText);
            this.innerText = huidigeRondes + 1;
        }

Hier gebruiken we this, this is het huidige element waarop is gelicked.

Zorg ervoor dat de ronde teller weer werkt maar nu met de eventListener zoals hierboven uitgelegd.

Lees goed en aandachtig en als het moet lees het nog eens stap voor stap. Als je alle stappen volgt en begrijpt dan zul je de opdracht kunnen maken.

Inleveren

De aangepaste code waarin je ronde kan tellen van de vorige opdracht, maar nu maak je gebruik van de eventlistener zoals uitgelegd.

Opdracht 7, shift key

We nemen de code van onze vorige opdracht en gaan functionaliteit uitbreiden.

Soms wordt er namelijk per ongeluk op de verkeerde kolom geclicked. Je wilt dan het rondenummer verlagen.

Als de shif-key wordt ingedrukt terwijl we clicken moet de het rondenummer worden verlaagd.

Je kun in JS testen of de shift-key wordt ingedrukt:

if (event.shiftKey) {

Gebruik dit en bereid de JS code uit zodat:

• als je clicked, wordt het rondenummer één hoger (dat hadden we al).
• als je shift-clicked, wordt het rondenummer één lager (nieuw).

We hebben nog één extra eis:

• het rondenummer mag mag niet negatief worden.

Inleveren

De aangepaste code (volledig werkende HTML/CSS/JS) van de vorige opdracht aangevuld met de functionaliteit zoals hierboven beschreven.

Plaats commentaar in de code met uitleg én plaats commentaar met jouw naam.

Opdracht 8, shift key en kleur

We maken nog een laatste aanpassing aan de ronde teller. Zorg dat je de vorige opdracht helemaal af hebt.

Als je op de rondeteller klikt wordt de rondeteller verhoogd, doe je dat met shift dan wordt de ronde teller verlaagd.

De achtergrondkleur van de ronde teller is groen. Om aan te geven dat de rondeteller is verlaagd wordt de achtergrondkleur rood. Als daarna de teller weer wrodt verhoogd, wordt de achtergrond kleur weer groen.

De eisen:

• standaard staan alle ronde tellers op 0 en zijn ze groen.
• als je op een ronde teller clicked dan, wordt die verhoogd en is/wordt de achtergrondkleur groen.
• als je op een rondeteller shift-clicked, dan wordt die verlaagd en/is wordt de achtergrondkleur rood.
• de achtergrondkleur mag neit negatief worden (lager dan 0), dus als je op een 0 shift-clicked dan gebeurt er niets; de achtergrondkleur blijft hetzelfde en de rondeteller wordt niet verlaagd.

Inleveren

De aangepaste code (volledig werkende HTML/CSS/JS) van de vorige opdracht aangevuld met de functionaliteit zoals hierboven beschreven.

Plaats commentaar in de code met uitleg én plaats commentaar met jouw naam.

Opdracht 9, uitklappen

Bekijk en test de volgende code.

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Elektronica Producten</title>
    <style>
        .detailRow {
            display: none;
            background-color: #f9f9f9;
        }
        .clickableRow:hover {
            background-color: #f1f1f1;
            cursor: pointer;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<table id="infoTabel">
    <tr>
        <th>Product</th>
        <th>Categorie</th>
    </tr>
    <tr class="clickableRow">
        <td>iPhone 13</td>
        <td>Smartphone</td>
    </tr>
    <tr class="detailRow">
        <td colspan="2">Merk: Apple | Opslag: 128GB | Kleur: Zwart</td>
    </tr>
    <tr class="clickableRow">
        <td>Samsung Galaxy S21</td>
        <td>Smartphone</td>
    </tr>
    <tr class="detailRow">
        <td colspan="2">Merk: Samsung | Opslag: 256GB | Kleur: Phantom Gray</td>
    </tr>
    <tr class="clickableRow">
        <td>Dell XPS 13</td>
        <td>Laptop</td>
    </tr>
    <tr class="detailRow">
        <td colspan="2">Merk: Dell | Scherm: 13.3 inch | CPU: Intel i7</td>
    </tr>
    <tr class="clickableRow">
        <td>MacBook Air</td>
        <td>Laptop</td>
    </tr>
    <tr class="detailRow">
        <td colspan="2">Merk: Apple | Scherm: 13.3 inch | CPU: M1</td>
    </tr>
    <tr class="clickableRow">
        <td>Sony WH-1000XM4</td>
        <td>Hoofdtelefoon</td>
    </tr>
    <tr class="detailRow">
        <td colspan="2">Merk: Sony | Type: Over-ear | Noise Cancelling: Ja</td>
    </tr>
    <tr class="clickableRow">
        <td>Google Nest Hub</td>
        <td>Smart Home</td>
    </tr>
    <tr class="detailRow">
        <td colspan="2">Merk: Google | Scherm: 7 inch | Assistent: Google Assistent</td>
    </tr>
</table>

<script>
    document.querySelectorAll('.clickableRow').forEach(row => {
        row.addEventListener('click', function() {
            var detailRow = this.nextElementSibling;
            detailRow.style.display = 'table-row';
        });
    });
</script>

</body>

Deze code laat een tabel zien en als je op de regel clicked dan worden details getoond.

clickableRow

De hoofdregels waar je op kan clicken hebben de class clickableRow.

detailRow

De detail regels die zichtbaar/onzichtbaar worden door op de hoofdregels te clicken heben de class detailRow.

Opdracht

Stap 1

Pas de code aan zodat als de detailregel wordt getoond en er weer op de clickableRow wordt gedrukt de detailregel weer wordt 'weggehaald' (style.display = 'none').

Het klikken op de clickableRow wordt dus een toggle: het laat de details zien en als er weer wordt geclicked worden de details weer weggehaald.

Stap 2a

We willen een andere vormgeving; de detail-regels moeten inpsringen. Jou lead developer gevraagd om de code op te bouwen en om geen table te gebruiken maar div. Je kirjgt dus een div met een class clickabelDIv en daaronder een div met een class detailRow

Zorge ervoor dat de twee kolommen in de clickableDIv apart in de div staan. Je hebt telkens de naam van het product (bijvoorbeeld iPhone 13) en de catergorie (bijvoorbeeld Smartphone), Maak hier twee divs van die naast elkaar staan (tip: gebruik flexbox). Je hebt dus twee divs die in een div staan:

<div class="clickableRow">
    <div class="product">iPhone 13</td>
    <div class="category">Smartphone</td>
</div>
<div class="detailRow">
  ......

Stap 2b

Als de table is omgebouwd in divs, zorg er dan voor dat de clickableRows en detailRowbeter te ondersheiden zijjn:

• De grootte van het lettertype van de clickableRows is meer dan die van de detailsRows.
• De detailsRows krijgen een margin waardoor het lijkt dat deze inspringen (iets naar rechts gaan)

Stap 3

Pas de kleuren van de tabel aan zodat de tabel mooi is en goed leesbaar is

Stap 4

Plaats commentaar in de code waarin je uitlegt hoe de code werkt. Zet ook je naam in ergens in het commentaar.

Voorbeeld

Als je klaar bent dan zou het er zo kunnen uitzien (kleuren zelf kiezen).

Inleveren

De aangepaste code (volledig werkende HTML/CSS/JS) van de vorige opdracht aangevuld met de functionaliteit zoals hierboven beschreven.

Opdracht 10, Winkelmandje

Je hebn nu een soort productpagina gemaakt bij opdracht 9. 

We gaan een begin maken met een winkelmandje. Hiervoor gebruiken we de code van de vorige opdracht en breiden deze uit.

1. Op elke detailRow komt een knopje Bestellen - maak deze knop en geef deze knop een mooi CSS stijl.
   
   Voorbeeld:
   

   

   
   
2. Bovenin de pagina maak je een nieuwe div, dit is het winkelmandje.
3. Als de knop Bestel wordt ingedrukt dan wordt het product toegevoegd als een regel in het winkelmandje. Al sje bijvoorbeeld op iPhone 13 clicked dan verschijnt er een regel in het winkelmandje met iPhone 13.
4. Als je dezelfde knop weer indrukt dan komt er een tweede regel iPhone13 in het winkelmandje.
5. Maak vervolgens een knop in de het winkelmandje waarmee je het winkelmandje leeg kunt maken.

Voorbeeld

Inleveren

De aangepaste code (volledig werkende HTML/CSS/JS) van de vorige opdracht aangevuld met de functionaliteit zoals hierboven beschreven.

Optie, Teller in winkelmandje

Zet in het winkelmandje achter elk product een teller waarmee je klan aangeven hoeveel je wilt bestellen. Gebruik een (deel van de) code van de rondeteller.

• Zorg ervoor dat het aantal niet lager dan 0 en niet hoger dan 10 kan worden. 
• (optioneel) zorg ervoor dat er geen dubelle regels in het winkelmandje kunnen ontstaan.

Inleveren

De aangepaste code (volledig werkende HTML/CSS/JS) van de vorige opdracht aangevuld met de functionaliteit zoals hierboven beschreven.

Flex Boxes

Basisstappen om Flexbox te gebruiken

• Voeg display: flex; toe aan de container.
• Gebruik eigenschappen zoals:
  • justify-content: Hiermee regel je hoe de items horizontaal worden uitgelijnd. Bijvoorbeeld: justify-content: center; zet de items in het midden.
  • align-items: Dit regelt de verticale uitlijning van de items.
  • flex-wrap: Hiermee kun je ervoor zorgen dat de items naar een volgende rij gaan als er te weinig ruimte is.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.item {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 10px;
}

flex-basis

Stel, je wilt dat een container de hele breedte van de pagina in beslag neemt dan pas je het item aan

.container {
    display: flex;
}

.item {
    flex-basis: 100%;
}

More on: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Basis structuur

<html>
<head>
    <style>

        .container {
            display: flex;
            flex-direction: column;
            height: 98vh;
        }

        .header {
            background-color: salmon;
            flex: 0 0 100px;
            text-align: center;
            padding: 20px;
        }

        .content {
            display: flex;
            flex: 1;
        }

        .menu {
            background-color: lightblue;
            flex: 1;
            padding: 20px;
            text-align: center;
            margin: 10 10 10 0;
        }

        .main {
            background-color: lightgreen;
            flex: 4;
            padding: 20px;
            text-align: center;
            margin: 10 0 10 0;
        }

        .footer {
            background-color: lightgray;
            flex: 0 0 100px;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="content">
            <div class="menu">Menu</div>
            <div class="main">Main</div>
        </div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

flex: 0 0 100px;

• The item will not grow (flex-grow: 0).
• The item will not shrink (flex-shrink: 0).
• The item has a fixed size of 100 pixels (flex-basis: 100px).

xx

Programmeren1

Wat is Programmeren?

01 Inleiding

Inleiding

Wat is programmeren?

Programmeren is het het schrijven van instructies in een programmeertaal waarmee een computer taken kan uitvoeren.

Het is als het schrijven van een recept waarbij je de computer vertelt wat het moet doen in kleine stappen, zoals het uitvoeren van berekeningen, het weergeven van informatie op het scherm, het opslaan van gegevens of het uitvoeren van bepaalde acties.

Het si dus belangrijk dat we een opdracht in stapjes leren opdelen.

In deze module leren we:

1. Hoe delen we een taak op in stapjes?
2. Wat is een programmeertaal?
   We gebruiken hiervoor LUA (maar dat is eigenlijk niet belangrijk want alle programmeertalen lijken heel erg veel op elkaar).
3. Hoe schrijf je code en waar bestaat code uit?
4. We leren hoe een computer een programma uitvoert (spoiler stap voor stap).
5. We leren wat variabelen zijn en hoe we hier mee kunnen werken.
6. We leren hoe we de volgorde van instructies die de computer moet uitvoeren kunnen beïnvloeden.
7. We leren een aantal basis elementen van de computertaal en we gaan hiermee aan de slag.

Aan het eind van deze module kun je zelf een paar eenvoudige programmaatjes maken.

Opdracht

We beginnen met een oefening op in stapjes te leren denken.

Stel dat jij pauze hebt en bij de Albert Heijn een broodje gaat kopen. Welke stappen moet je dan uitvoeren. Noem er minimaal 8.

Denk aan betalen, broodje kiezen, naar de AH lopen, terug naar school lopen, de AH inlopen, betalen, naar de broodjes lopen, ......

Inleveren

Een PDF-document opdracht1-<jouw-naam>.pdf , waarin je alle stappen beschrijft in de juiste volgorde.

Voorbeeld: Stel je heet Merouane Alhidi dan heet jouw document dus " opdracht1-MerouaneAlhidi.pd f".
Zorg ervoor dat je jouw Word document ook bewaard als pdf.

--

02 Stappen

Stappen

Stap voor stap in de juiste volgorde

Bij programmeren moet je de computer stap voor stap vertellen wat er moet worden gedaan, omdat computers niet dezelfde manier van denken hebben als mensen. Computers begrijpen alleen heel specifieke en exacte instructies, en ze voeren deze instructies uit in de volgorde waarin ze zijn geprogrammeerd. Dit betekent dat de programmeur heel precies moet zijn en alle stappen die nodig zijn om een bepaalde taak uit te voeren, moet beschrijven.

Als de programmeur een taak wil automatiseren, moet hij of zij deze taak in kleinere stappen opdelen en voor elke stap specifieke instructies voor de computer schrijven. Deze instructies worden in de code geschreven in de programmeertaal van keuze, en elke regel code vertelt de computer wat er moet gebeuren in een bepaalde stap van het proces. De computer voert deze stappen vervolgens uit in de volgorde waarin ze in de code zijn geschreven, en produceert zo het gewenste resultaat.

Daarom is het essentieel om bij het programmeren de computer stap voor stap te vertellen wat er moet worden gedaan, om ervoor te zorgen dat de code correct wordt uitgevoerd en het gewenste resultaat wordt geproduceerd. Zelfs kleine fouten in de code of het ontbreken van een enkele stap kunnen leiden tot ernstige problemen en bugs in de software.

Oefenen

Stel je bent thuis en je wilt naar school, welke stappen voer je dan uit?

1. Check hoe laat ik op school moet zijn.
2. Bepaal hoe laat ik moet vertrekken van huis.
3. Begin 5 minuten voor vertrek mijn spullen in te pakken; laptop, lader, schoolpas, tas, telefoon en natuurlijk mijn OV kaart en jas.
4. Vertrek van huis met de spullen op de tijd die is bepaald in stap 2.
5. Pak de fiets uit de schuur.
6. Sluit het huis en de schuurdeur af.
7. Ga naar het busstation (bijvoorbeeld).
8. Ik kan 5 minuten voordat de bus vertrek aan op het busstation en zet mijn fiets op slot.
9. ....

En ga zo maar door. Snap je?

Opdracht A

Stel, je wilt gaan douchen, welke stappen moet je dan uitveren?

Neem de onderstaande stappen over en zet ze in de juiste volgorde.

1. Spoel de shampoo uit je haar met water.
2. Spoel je lichaam volledig af met water.
3. Maak je haar en lichaam volledig nat met water.
4. Zet de douche aan en zorg ervoor dat de temperatuur van het water naar wens is.
5. Stap in de douchecabine en sluit de deur of het gordijn.
6. Breng shampoo aan op je haar en masseer het in je hoofdhuid.
7. Droog jezelf af met een handdoek.
8. Breng douchegel of zeep aan op een washandje of spons en was je lichaam.
9. Schakel de douche uit en stap uit de douchecabine.
10. Spoel het washandje of de spons uit met water en herhaal stap 6 indien nodig.

Maak een document en zet de 10 stappen in de juiste volgorde.

Inleveren (1 bestand)

stappen02a-<jouw-naam>.pdf, met de 10 stappen, in de juiste uitvoeringsvolgorde uit opdracht A .

--

03 Eerste code

Eerste code

Computer code

Voor deze opdracht gaan we code maken die we via een website kunnen testen. De taal die we gebruiken is LUA, maar dat is niet zo belangrijk omdat de meeste computertalen heel erg veel op elkaar lijken.

Ga naar: https://www.lua.org/cgi-bin/demo

Typ het volgende programma van twee regels op de website in en druk op run:

print ( "Hallo" ) print ( "Ik ben de computer en ik spreek LUA" )

Druk op run en je ziet het resultaat:

Het programma wordt regel voor regel uitgevoerd. Eerst regel 1 en dan regel 2.

Opdracht

Voeg zelf een regel toe aan deze code. Verzin zelf een tekst en zorg ervoor dat de tekst op de derde regel wordt afgedrukt.

Inleveren

Een schermafdruk van je gehele browser met de LUA-code en het resultaat. Noem dit document opdracht03-<jouw-naam>.

--

04 Flow control (goto)

Flow control (goto)

Flow contro l is een moeilijk woord voor de code die ervoor zorgt in welke volgorde je code wordt uitgevoerd.

Standaard worden de regels code één voor één uitgevoerd. Eerst de eerste regel, dan de tweede, enzovoorts.

Maar we kunnen met de code de volgorde ook aanpassen. Je kunt bijvoorbeeld aan het eind van het programma zeggen dat de code door moet gaan op regel 1.

Dat ziet er zo uit:

::begin::
print("Hallo")
print("Ik ben de computer en ik spreek LUA")
goto begin

Op regel 1 zetten we een label, we geven deze regel een naam. Dan voeren we de code op regel 2 en 3 uit. En als we klaar zijn dan staar er op regel 4 dat de code door moet gaan op de regel met de naam ::begin::

Opdracht

Wat doet deze code? Voer de code uit. Als je de code uitvoert dan staat er de tekst "Your program was aborted" (jou programma is afgebroken), waarom is dat?

Dus leg uit wat je code doet en waarom die wordt afgebroken.

Inleveren

Een PDF-document (opdracht04-<jouwnaam>.pdf) waarin je in eigen woorden uitlegt wat het programma doet en waarom het programma is afgebroken.

Je mag overleggen met elkaar, maar je moet je eigen PDF-document maken.

--

05 Variabelen

Variabelen

Een variabele in een programmeertaal wordt gebruikt om een waarde op te slaan die later kan worden gebruikt of gewijzigd. Het is een soort container (of doosje) waarin je gegevens kan opslaan, zoals een getal, een tekst, of een object.

Stel je wilt de computer laten onthouden dat de jouw naam Bob is en dat jij 35 jaar oud bent. Dan kun je twee variabelen maken, name en age, in de variabele name stop je dan de waarde Bob en in de variabele age stop je dan de waarde 35.

De naam ( name en age ) kan je in je code zelf kiezen.

name="Max Bisschop"
age=35

Als je deze code uitvoert dan gebeurt er niets. Dat komt omdat er geen output is. Je drukt niets af zoals in de vorige opdrachten.

Opdracht

Bedenk twee eigen variabele en geef die een waarde.

Druk vervolgens de twee variabelen af.

Inleveren

Screenshot van je gehele browser met de opdracht. Noem het bestand opdracht5-<jouw-naam>.png

Voorbeeld

06 Rekenen met variabelen

We kunnen ook rekenen met variabelen. Kijk naar de volgende code:

getal=1
print(getal)
getal=getal+2
print(getal)

Tip: als je in een programmeertaal een = ziet dan kun je dit beter lezen als 'wordt' en dus niet als 'is'.

Regel 1: Deze code maakteen variabele genaamd getal en geeft deze de waarde 1.
In het kort staat er dus: de variabele getal wordt 1

Regel 2: druk de variabel getal af.

Regel 3: Getal wordt getal plus getal. Getal was 1 dus getal wordt 1+2. Getal wordt dus 3.

Regel 4: druk de variabel getal af.

Regel 2 en 4 zijn hetzelfde, maar er wordt toch wat anders afgedruk. Dat komt dus omdat de waarde van de variabele op regel 3 wordt veranderd.

Opdracht

Gebruik de volgende code en vul aan op de plaats van de ....

Zorg ervoor dat op regel 7 het laatste cijfer van jouw studentennummer wordt afgedrukt.

Dat doe je dus door de code over te nemen en alleen op de plaats van de puntjes de code aan te passen.

getal=10
getal=getal-5
print(getal)
getal=getal*2
print(getal)
getal=getal....
print(getal)

Inleveren

Een screendump opgave6-<jouw-naam>.png van je gehele browser met oplossing.

--

07 if-then-else-end

Check deze code:

leeftijd = 18

if leeftijd >= 18 then
    print("Je bent volwassen!")
    print("Ben er maar trot op!")
else
    print("Je bent minderjarig.")
    print("Jammer dan.")
    print("Maar je wordt vanzelf volwassen ;)")
end

Deze code controleert de waarde van de variabele leeftijd en beslist op basis daarvan welke boodschap moet worden afgedrukt op het scherm.

De if-then-else begint met "if", gevolgd door de voorwaarde die wordt gecontroleerd.

De if-then-else-end heeft 3 delen.

1. De voorwaarde op de erste regel
2. De stappen die worden uitgevoerd als de voorwaarde waar is, dit staat tussen then en else .
3. De stappen die worden uitgevoerd als de voorwaarde niet waar is, dit staat tussen else en end .

Als de voorwaarde waar is, dan wordt de code in de "then"-blok uitgevoerd. In dit geval, als de leeftijd groter of gelijk is aan 18, dan wordt de boodschap "Je bent volwassen!" afgedrukt op het scherm.

Als de voorwaarde onwaar is, wordt de code in de "else"-blok uitgevoerd. In dit voorbeeld, als de leeftijd kleiner is dan 18, dan wordt de boodschap "Je bent minderjarig." afgedrukt op het scherm.

Het "end"-trefwoord sluit de hele if-then-else af.

Opdracht

Maak een variabele temperatuur en geeft deze een waarde.

Maak een if-then-else-end. Als de temperatuur < 19 is dan druk je af dat de kachel aan moet. Als dit niet zo is dan druk je af dat het nog niet zo koud is dat de kachel aan moet.

Inleveren

Een screendump, opdracht7-<jouw-naam>.png van je gehele browser met oplossing.

--

08 Herhalen totdat

Kijk naar het volgende programmaatje:

a=1

::begin::
a=a+1
print(a)
goto begin

Deze code zet de variabele op 1 en telt er dan 1 bij op.

De variabele wordt afgedruk en dan gaar de code weer naar regel 3. Dit gaat eindeloos door. Stel we willen stoppen als a 15 is.

a=1
::begin::
a=a+1
print(a)
if (a == 15) then
  print("klaar")
else
  goto begin
end

Het wordt al wat ingewikkelder, maar laten dit programma stap voor stap bekijken.

1. de variabele a krijgt de waarde 1
2. Regel 2 krijgt de naam begin
3. de variabele a krijgt de waarde van a plus 1, dus de variabele a wordt 1 hoger.
4. de waarde van de variabele a wordt afgedrukt
5. De regel is een if-then-else en regel 5 tot en met 9 horen bij elkaar. Op deze regel staan als de waarde van a 15 doe dan wat er na de then staan (dus op regel 6).
6. Doe dit als de if op regel 5 waar is. Druk dan klaar af.
7. Na de else staat wat er moet gebeuren als de vergelijking op regel 5 NIET waar is.
8. Doe dit als de if op regel 5 niet waar is. Ga nu naar de regel met de naam begin (dat is regel 2).
9. De end geeft aan dat dit het einde is van het if-then-else-end.

Opdracht

Gebruik het voorbeeld, maar pas het aan:

• gebruik je eigen variabele naam in plaats van a . Bedenk een naam van tenminste 5 letters.
• druk alle getallen van 10 tot en met 20 af.

Inleveren

Een screendump, opdracht8-<jouw-naam>.png van je gehele browser met oplossing.

--

09 While

De vorige opdracht kan je mooier en eenvoudiger uitvoeren met een while .

De while ziet zo uit.

a=1
while( a < 15 )
do
   print(a)
   a=a+1
end

Alles wat tussen de do en end staat wordt uitgevoerd zolang (while) de vergelijking op regel 2 waar is.

Programmablok en inspringen

De code tussen regel 3 en 6 wordt een programmablok genoemd. Een programmablok wordt altijd ingesprongen. Dat is technisch niet in alle talen verplicht, maar dit maakt de code wel een stuk leesbaarder.

Variabelenamen

De variabelenaam a is slecht gekozen. a zegt niets en in een programma heb je wel 100den variabelen, als die allemaal a, b, c of zo heten dan weet je niet waar dit voor staat. Je zou bijvoorbeeld veel beter de naam optellen of teller of getallen, of .... kunnen gebruiken. Kun jij een goede  logische naam bedenken?

Je kunt een while-loop ook in een soort grafiekje weergeven, we noemen dat een flow chart (een diagram die de flow laat zien).

Opdracht

De volgende (hieronder) code is slecht geschreven. Er zit een fout in en de code springt niet juist in.

Pas de code aan zodat de getallen 20 tot en met 1 in aflopende volgorde wordt afgedrukt. Dus de output moet worden 20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1 (maar dan wel onder elkaar.

Vervang de variabele a door een eigen gekozen variabele waarbij de naam van de variabele tenminste 5 lang is.

Dus je doet drie dingen:

1. Pas de code aan zodat de getallen 20 tot en met 1 wordt afgedrukt (tip: het plus teken op regel 6 is waarschijnlijk niet juist!).
2. Laat de code inspringen zoals het hoort.
3. Vervang de variabele-naam a in een zelfgekozen naam van tenminste 5 lang. Gebruik een logische naam.

a=20

while (a>1) 
do
print(a)
a=a+1
end

Inleveren

Een screendump, opdracht9-<jouw-naam>.png van je gehele browser met oplossing.

--

10 Tafel

Bekijk de onderstaande code

tafel=8
teller=0

teller=teller+1
print(teller.."X"..tafel.."="..teller*tafel)

teller=teller+1
print(teller.."X"..tafel.."="..teller*tafel)

teller=teller+1
print(teller.."X"..tafel.."="..teller*tafel)

teller=teller+1
print(teller.."X"..tafel.."="..teller*tafel)

Voer deze code (hierboven) uit en bekijk de output.

1X8=8
2X8=16
3X8=24
4X8=32

Het doel is om de code uit te breiden zodat de gehele tafel van 8 wordt afgedrukt, dus:

1X8=8
2X8=16
3X8=24
4X8=32
5x8=40
6*8=48
7*8=56
8*8=64
9*8=72
10*8=80

We kunnen natuurlijk de regel 13 en 14  nog een paar keer kopiëren, Maar stel we zouden door willen gaan tot aan 100*8=8000, dat zou heel veel (stom) werk zijn.

Da moet dus anders kunnen en daarvoor kunnen we de while gebruiken die we in de vorige opdracht hebben geleerd.

Opdracht

Maak een tafel van 12, dus 1x12=12, 2x12=24 enzovoorts. Gebruik daarvoor (delen van) de code die hierboven staat. Gebruik alleen while die je in de vorige les hebt leren gebruiken zodat je efficiëntere code krijgt (= minder regels code).

Inleveren

Een screendump, opdracht10-<jouw-naam>.png van je gehele browser met oplossing.
Je laat de tafel van 12 zien en je gebruikt daarbij een while loop.

--

11 eindopdracht 1

Bekijk de volgende code:

num = 10

-- Test of het getal even is
if num % 2 == 0 then
  print("Het getal is even")
else
  print("Het getal is oneven")
end

Commentaar

Op regel 3 zie je in het begin --, dat is een manier in LUA om commentaar toe te voegen. Alles na de -- wordt dus niet gezien als code, maar is er om uit te leggen in 'gewone niet-code-taal' wat er gebeurt.

Opdracht

Maak LUA-code die alle even getallen tussen 0 en 100 afdrukt. het eerste getal dat wordt afgedrukt is dus 2 en het laatste getal is 98.

Tip: gebruik delen van de code hierboven en gebruik de while .

Eisen:

1. spring goed in (programma blokken)
2. maak gebruik van logische variabele namen
3. gebruik commentaar in je code.

Elk programmablok moet inspringen en een blok in een blok moet je dus twee maal laten inspringen!

Inleveren (1 bestand)

* Screendump, eindopdracht1-<jouw-naam>.png van je gehele browser met oplossing.

12 eindopdracht 2

Voor deze opdracht heb je alle kennis nodig van de voorgaande opdrachten.

Opdracht

Kies zelf een oneven getal tussen 0 en 100.
Zet in het commentaar bij je code welk getal jij hebt gekozen.

Maak een LUA-programma die alle oneven getallen tussen 0 en 100 (dus eerste is 1 en laatste is 99), bij elkaar optelt behalve het oneven getal dat jij hebt gekozen.

Eisen:

1. spring goed in (programma blokken)
2. maak gebruik van logische variabele namen
3. gebruik commentaar in je code

De output moet er als volgt uit zien:

Als je alle oneven getallen tussen 0 en 100 optelt, behalve het door mij gekozen getal, dan krijg je XX

Op de plaats van de XX komt natuurlijk het antwoord.

Zorg dat je de code begrijpt en dat je alleen dingen gebruikt die zijn uitgelegd!

Inleveren (1 bestand)

Screendump, eindopdracht2-<jouw-naam>.png van je gehele browser met oplossing.

Theorie PHP1

python reformatterCanvas.py 18661 c https://www.roc.ovh/books/2024/page/php1

Wat is een webserver

Wat ga je leren?

Lees de tekst goed want in de volgende opdracht krijg je vragen over deze tekst.

Een webserver is een computer die verbonden is met het internet en waar bestanden op staan op staan die nodig zijn om een website te laten zien.

Elke website die jij bezoekt op het World Wide Web staat ergens op een webserver. Zo'n webserver heeft een map (folder) met daarin webpagina's die bestaan uit HTML pagina's, CSS bestanden, Javascript, PHP bestanden en derglijke.

Tot nu toe ben je gewend om de HTML-bestanden gewoon vanaf je eigen computer te starten door er dubbel op te klikken. De browser leest de bestanden en laat deze een mooie (of lelijke) pagina zien.

Je bent als gebruiker van webapplicaties gewend om bijvoorbeeld in te loggen, een bericht achter te laten of een email te sturen. Deze applicaties zijn dynamisch . Dynamische applicaties hebben een input (invoer) en zetten deze om in een output (uitvoer) .

Bijvoorbeeld:

input : gebruikersnaam en wachtwoord
output : een boodschap dat het aanloggen is gelukt of een boodschap dat het aanloggen niet is gelukt.

Om een dynamische webapplicatie te maken heb je meestal een webserver nodig die de pagina's serveert . De webserver krijgt van de browser, de cliënt een verzoek en de webserver behandeld het verzoek en stuurt een antwoord terug. Net als een ober die een drankje serveert .

Stel je wilt een overzicht van alle studenten in een klas. Je vraagt via de browser dan om het overzicht, bijvoorbeeld door op een menu te klikken. Het verzoek gaat dan via internet naar een webserver en die stuurt het antwoord via internet weer terug naar jouw browser .

Omdat je nog geen toegang hebt tot een echte webserver gaan we er eentje simuleren. Simuleren is het 'net doen alsof'. We simuleren de webserver met een gratis applicatie (wij doen dat met XAMPP) die je kunt installeren op je eigen laptop. Dat heet dan een lokale server. Dat wordt ook wel localhost genoemd. Je laptop is dus door het gebruik van XAMPP een web server geworden.

Om een dynamische applicatie te maken gaan we in deze module gebruik maken van PHP.

De server heet ook wel back-end (achterkant). PHP is een back-end-taal. Dat betekent dat de taal dus op de back-end, de server draait.

Een bezoeker van de site (de eindgebruiker) kan de code die op de server staat niet zien of wijzigen.

Database

Met PHP kun je ook een database benaderen waarin je gegevens kan opslaan voor een langere periode, bijvoorbeeld de gegevens van een gebruiker zoals voornaam, achternaam, email en wachtwoord.

Als je met PHP aan de slag gaat dan kun je pagina's dynamisch maken. Dit betekent dat de output afhankelijk is van de input van de gebruiker.

XAMPP

Tijdens deze module maak je gebruik van een locale server. We gebruiken hiervoor XAMPP.

Je kunt XAMPP downloaden en installeren als je dat nog niet hebt gedaan.

Weet je (nog) niet hoe je XAMPP moet installeren op jouw Windows machine of heb je een "port conflict", kijk dan hier

Links to an external site. .

Inleveren

Volg de instructies in de les en lever je werk dat je in de les hebt gemaakt hier in.

XAMPP

Wat ga je leren?

PHP is een back-end taal. Dat betekent dat deze taal op de server draait. Op de server wordt je code uitgevoerd. Omdat wij (nog) geen server op het internet hebben, installeren wij een soort server op onze laptop. Onze laptop is dan een back-end en ook front-end tegelijkertijd. Onze browser (front-end) 'praat' dus met de PHP server Xammp (back-end).

Later gaan we ook databases gebruiken en daarvoor installeren we een database server. Dit is een onderdeel van Xampp.

OK let's go!

We gaan XAMPP installeren! Volg alle stappen zoals die hier beschreven staan.

1. Download Xampp

1. Links to an external site.
   
   

2. Installeer Xampp met het installatieprogramma.

   • installeer deze op: C:\Xampp
   • Tijdens de installatie kies je drie opties: Apache (dat is de PHP-server), MySQL (dat is de database server) en PHPMyAdmin, dat is de tool om de database mee te beheren.

1. Start Xampp en start daarna Apache en MySQL
   
   

   

   
   

2. Maak een nieuwe folder in c:\xampp\htdocs\phplevel1-jouw-naam

   • vervang jouw-naam door jouw naam
     Overal waar in het vervolg jouw-naam staat, vervang je de tekst door jouw naam.
     
     
3. Start VCS en open de folder c:\xampp\htdocs\phplevel1-jouw-naam
   
   
4. Maak een nieuw bestand en noem deze php01-jouw-naam.php
   • Vergeet niet jouw-naam te vervangen!
     
     
5. Type de volgende code in:

<?php

echo "Hello world!";

?>

Voer de code uit.

Ga naar C:\xampp\htdocs en verwijder het bestand index.php

Ga nu naar de browser en type als url, localhost in.

Open nu de folder en het bestand dat je net hebt gemaakt.

Wat gebeurt er in deze code?

Op regel 1 <?php

wordt tegen de webserver verteld dat we code in php gaan maken. De server/XAMPP weet dan welke taal jij gata praten.

Op regel 3, echo

Het woordje echo betekent dat de server output moet gaan maken. Deze output wordt naar de web browser gestuurd.

Op regel 3 "Hello world!"

echo moet iets naar de browser sturen, dan moet je natuurlijk wel vertellen wat dat is. Het zinnetje na de echo is dat wat er naar de browser wordt gestuurd. Dit zinnetje staat tussen "" om aan te geven waar het zinnetje begint en waar het eindigt.

Op regel 3 ;

Na ELK commando in PHP staat een ; om aan te geven dat het commando afgelopen is en. De meest gemaakte fout in PHP is dat je een ; vergeet. Wedden dat jij dat dit jaar ook tig keer gaat vergeten?

Op regel 5 ?>

We zijn klaar met onze commando's in PHP. We vertellen de server/XAMPP dat we stoppen met "PHP praten".

Test de code en controleer of er in je browser de tekst Hello World! verschijnt.

Je hoeft niets in te leveren, maar als PHP/XAMPP niet werkt dan kan je de volgende opdracht niet maken.

Variabelen

Wat ga je leren?

Computer geheugen

Een variabele is een plek in het geheugen van de computer waar je informatie in op kan slaan.

Het geheugen van een computer loopt bijvoorbeeld van adres 0 tot aan adres 32768.

Dan kan het zijn dat je op plaats 21 311 een plaats hebt waar je jouw naam hebt opgeslagen en op plaats 18711 heb je een plaats in het geheugen waar je jouw leeftijd hebt opgeslagen. Omdat deze getallen lastig zijn te onthouden kunnen we deze geheugenplaatsen een naam geven. Dat heet een variabele.

Variabele namen

Als je gaat programmeren ga je best veel gebruik maken van variabelen. We geven dus een naam aan een geheugenplekje, bijvoorbeeld plaats 21311 is waar jouw naam staat, noemen we mijnnaam en de plaats 18711 waar jouw leeftijd in staat noemen we mijnleeftijd.

Doosje of lade

Je zou een variabele ook kunnen zien als een doosje of een lade waar je iets kan instoppen.

Net als bij een doos of een lade, kan je de doos/lade openen en kijken wat er in zit; er kan niets in zitten, maar er kunnen ook getallen of zinnetjes in zitten. En....je kunt de inhoud ook veranderen.

In de eerste 2 minuten van deze video (NL)

Links to an external site.

wordt dit nog een keer uitgelegd.
In dit filmpje gaat het over de programmeertaal Python, maar dit geldt ook voor PHP (en bijna alle andere computertalen)

PHP Variabele

In PHP kun je een variabele makkelijk herkennen omdat die altijd met een $-teken begint, bijvoorbeeld $mijnnaam, $mijnleeftijd zijn twee variabelen.

Hoe ken je een waarde toe aan een variabele?

Stel jij heet Mohammed en je wilt de variable $voornaam de waarde Mohammed geven. Je gebruikt daar voor het = teken. Zie dit niet als 'is' maar als 'wordt' .

<?php
$mijnnaam="Mohammed";
?>

op regel 1 wordt de computer verteld dat je PHP code gaat gebruiken.

op regel 2 hier staat dat de variabele met de naam $mijnnaam de waarde Mohammed krijgt. Dus $mijnnaam wordt "Mohammed".

Mohammed is een zinnetje dus dat staat tussen "".

In dit geval is het een zinnetje van één woord, maar het zou ook meer woorden kunnen bevatten daarom staat een zinnetje, ook al is het maar één woordt altijd tussen "". De computer weet dan precies waar het zinnetje begint en waar het eindigt.

En niet vergeten de ; om aan te geven dat het commando klaar is!

Elk PHP commando wordt in PHP (en ook in bijv. JavaScript en C#, C, C++ en Java) afgesloten met een ;

Even terug naar het doosje of de lade; we hebben dus een doosje gemaakt met het label mijnnaam en in het doosje hebben we de string-waarde "Mohammed" gezet.

Het = teken dat we hebben gebruikt kun je dus lezen als 'stop de volgende waarde in dit doosje'.

Variabele naamgeving

Zoals gezegd, een variabele naam in PHP begint altijd met een $-teken met daarachter een woord zonder spaties. De variabele bestaat dus altijd uit één woord. Omdat je soms duidelijk wil maken wat er in de variabele staat gebruik je goede namen die vaak wat langer zijn.

Bijvoorbeeld $hoofdpersonagevandefilm.

Om dit leesbaar te maken, maken we hiervan hoofdPersonageVanDeFilm.

Dus $hoofdpersonagevandefilm wordt $hoofdPersonageVanDeFilm

Zie je het verschil?

In code ziet het er dan zo uit.

$hoofdPersonageVanDeFilm = "Ryan Reynolds";

Zo bestaat de naam van de variabele nog steeds uit één woord, maar is het wel beter leesbaar.

Let op want de variabele $mijnnaam en $mijnNaam zijn twee verschillende variabelen. We zeggen dan dat variabelenamen hoofdlettergevoelig zijn (in het Engels; case sensitive).

Strings

Wat ga je leren?

We hebben al kennis gemaakt met strings in de vorige les over variabelen, maar in deze les gaan we hier nog wat verder op in.

Je hebt verschillende soorten variabelen.

Om te beginnen zijn er twee hoofdsoorten: strings en getallen.  In deze les gaan we kijken naar strings.

Strings

Strings (letterlijk vertaald een ketting) is een ketting van letters en/of getallen achter elkaar. Om het begin en een eind van een string aan te geven staat een string altijd tussen quotes. Je mag enkele of dubbele quotes gebruiken.

<?php

$string = "dit is een voorbeeld";
$nogEenString = 'dit is ook een string';

echo $string;
echo $nogEenString;

?>

Op regel 3 staat een string tussen dubbele quotes en op regel 4 staat een string tussen enkele quotes '.

Met strings kan je verschillende dingen doen. Zo kan je strings aan elkaar plakken. Dat heet concatenation

Links to an external site.(Engels).

In PHP plak je strings aan elkaar door tussen twee string een punt te zetten.

<?php
$voornaam="Alexandra";
$achternaam="Gaona";

echo $voornaam." ".$achternaam;
?>

Op regel 5 worden eigenlijk drie strings aan elkaar geplakt. Eerst de string die in de variabele $voornaam staat dan de string " " (deze staat niet in een variabele) en dan string die in de variabele $achternaam staat.

Als je de HTML code <br> afdrukt dan wordt er een regel overgeslagen. "<br>" is een string.

echo "<br>"; // regel overslaan

Dus regel 1 drukt de string "<br>" af en de browser slaat dan een regel over.

De // aan het einde van de regel is overigens commentaar. Het doet niets en het heeft alleen als doel om je code duidelijker te maken (voor anderen of later voor jezelf).

Maak nu de opdrachten.

Getallen

Wat ga je leren?

Naast strings hebben we ook getallen. Deze zijn weer onderverdeeld in gehele getallen (integers) en gebroken getallen (float). Dat verschil is in PHP niet zo belangrijk omdat PHP zelf het juiste soort kiest.

Getallen zijn wel anders dan strings want je kunt er mee rekenen. Om aan te geven dat je een getal bedoeld en geen string, zet je een getal niet tussen quotes.

Dus $voorbeeld="9" is de string "9" en $voorbeeld=9 is het getal 9.

<?php

$getal1=12;
$getal2=13;
echo $getal1 + $getal2;

?>

Net zoals je getallen kan optellen, kun je ook andere bewerkingen uitvoeren.

Ga door naar de opdrachten.

Condition if-then-else

Dat ziet er in PHP zo uit:

$score=0;

$vraag = "Hoeveel is 10+2?";
$antwoord = 12;

if ( $antwoord == 12 ) {
	$score = $score + 1;
}

echo "De score is: $score";

Op regel 6 wordt het antwoord gecontroleerd. Is het antwoord juist dan wordt alle code tussen { en } uitgevoerd. In dit geval is dat alleen regel 7.

Op regel 4 zie je = en op regel 6 ==

Dat komt omdat ze beide iets anders betekenen.

We kunnen ons afvragen of waarden gelijk zijn, maar er zijn nog een heel stel andere voorwaarden. De belangrijkste zijn:

ELSE

Stel voor dat als de score fout is dat er dan een punt van de score wordt afgetrokken, dan zou je dat zo kunnen coderen

$score=0;

$vraag = "Hoeveel is 10+2?";
$antwoord = 12;

if ( $antwoord == 12 ) {
	$score = $score + 1;
} else {
   $score = $score -1;
}

echo "De score is: $score";

HTML, PHP en include

Wat ga je leren?

Include

Om je code overzichtelijk te houden, stop je niet al je code in één groot bestand, maar je deelt het op in meerdere kleinere bestanden. Je kunt dan snel de juiste code vinden.

Zo kun je php code hebben die een footer afdrukt. Stel je wilt je volgende footer:

<?php
echo "<hr>";
echo "(c) Copyright<br>";
echo "De inhoud en structuur van onze webpagina's zijn auteursrechtelijk beschermd.";
?>

Deze footer wil je in je pagina afdrukken dan kun je deze pagina 'includen'. Dat gaat als volgt:

 <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

<?php
include 'footer.php';
?>

</html> 

Zie je wat er op regel 9 gebeurt? Je voegt als het ware de inhoud van de footer.php toe op regel 9. Hieronder zie je dan wat de include eigenlijk doet.

 <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

<?php
echo "<hr>";
echo "(c) copyright<br>";
echo "De inhoud en structuur van onze webpagina's zijn auteursrechtelijk beschermd.";
?>

</html> 

De include verwijst altijd naar een bestand.

Let erop dat je alleen php code kan uitvoeren als de naam van het bestand op .php eindigt. Bovenstaand voorbeeld werkt dus alleen als de naam eindigt in .php.

Je kunt de naam van het bestand ook als string mee geven, tussen " zoals in het voorbeeld, maar je kunt natuurlijk ook een variabele meegeven:

include $footer;

De code van het bestand waarvan de naam in de variabele $footer staat wordt nu ingevoegd.

Nog een voorbeeld

Voorbeeld: home.php

<?php  
    include 'database.php';
?>
<html>
<head>
</head>
<body>
    <div class="menu">
        <?php include 'menu.php'; ?>
    </div>
</body>
</html>

Je ziet in bovenstaand voorbeeld op regel 9 dat een menu met behulp van php wordt ingevoegd in de <div class="menu"> .... </div>

Je ziet dat php geopend wordt <?php en er dan normale php-code volgt. Zodra de php code klaar is dan sluiten we de php code weer met ?>.

Logical operators en korte broeken

Wat ga je leren?

We hebben het gehad over if-then-else.

Met een if-then-else kun je voorwaardelijk code uitvoeren. Alleen als een bepaalde vergelijking waar is dan wordt bepaalde code uitgevoerd.

Stel je hebt een variabele $temperatuur waarin de temperatuur staat en stel je hebt een andere variabele waarin de dag van de week staat. Dus bijvoorbeeld:

$temperatuur = 21;
$dagVanDeWeek = 'ma';

Dus in dit voorbeeld is het maandag en de temperatuur is 21 graden. Stel dat ik code moet schrijven die mij advies geeft over het dragen van een korte broek. Ik wil alleen een korte broek aan doen als het zaterdag is én als de temperatuur minimaal 21

is. Dat zijn dus twee voorwaarden die waar moeten zijn.

Hoe doe je dat in code?

$temperatuur = 21;
$dagVanDeWeek = 'ma';

if ( $temperatuur >= 21 && $dagVanDeWeek == "za" ) {
  echo "Advies is om vandaag een korte broek aan te trekken.";
} else {
  echo "Advies is om vandaag geen korte broek aan te trekken.";
}

Zie je het && - teken?

Dat betekent dat beide voorwaarden waar moeten zijn. Dus de temperatuur is groter of gelijk aan 21 graden én de dag van de week is 'za'.

Stel dat we nu op zaterdag of zondag altijd een korte broek willen dragen, hoe zou de code er dan uit zien?

$temperatuur = 21;
$dagVanDeWeek = 'ma';

if ( $dagVanDeWeek == "za" || $dagVanDeWeek == "zo" ) {
  echo "Advies is om vandaag een korte broek aan te trekken.";
} else {
  echo "Advies is om vandaag geen korte broek aan te trekken.";
}

Zie je het || - teken?

Dat betekent dat aan één van de voorwaarden moet worden voldaan. Dus als de dag van de week zaterdag óf zondag is dan volgt het advies voor het dragen van een korte broek.

In de voorbeelden wordt && gebruikt voor and en || voor or. In de meeste programmeertalen kun je ook gewoon het woord and en or gebruiken. Dat werkt in PHP ook.

Dus de volgende twee regels doen hetzelfde.

if ( $temperatuur >= 21 && $dagVanDeWeek == "za" ) {....

if ( $temperatuur >= 21 and $dagVanDeWeek == "za" ) {....

Dus samengevat

Haakjes in condities

Stel we willen alleen een korte broek aan als de temperatuur minimaal 21 graden is én de dag zaterdag is of de dag zondag is.

Dan krijgen we de volgende code:

if ( $temperatuur >= 21 && $dagVanDeWeek == "za" || $dagVanDeWeek == "zo" ) {

Maar stel dat het anders is. Op zondag willen we altijd een korte broek dragen en op zaterdag alleen als de temperatuur minimaal 21 graden is. Dus in code:

if ( $dagVanDeWeek == "zo" || $temperatuur >= 21 && $dagVanDeWeek == "za" ) {

Maar deze code is bijna hetzelfde als de vorige code, alleen de volgorde is anders. Om de code goed uit te voeren moeten we haakjes gebruiken:

Korte broek in het weekend als de temperatuur 21 graden of hoger is:

if ( $temperatuur >= 21 && ( $dagVanDeWeek == "za" || $dagVanDeWeek == "zo" )  ) {

Het geen tussen haakjes, de || wordt eerst uitgevoerd, daarna volgt de &&

Altijd een korte broek op zondag én op zaterdag alleen een korte broek als de temperatuur 21 graden of hoger is.

if ( ($temperatuur >= 21 && $dagVanDeWeek == "za" ) || $dagVanDeWeek == "zo" ) {

Hier wordt eerst de && uitgevoerd en daarna volgt de ||.

KennisCheck

Als je alles hebt gelezen en hebt uitgevoerd dan gaan jullie klassikaal een Kennischeck uitvoeren.

• Voer de juiste naam en klas in bij de kennis-check
• Zorg ervoor dat je 80% of hoger scoort.

Inleveren

1. Screenshot van je resultaat.

PHP Intro

Update

python reformatterCanvas.py 18661 56420 https://www.roc.ovh/books/2024/page/php-intro

Wat is een webserver

Wat ga je leren?

Lees de tekst goed, want in de volgende opdracht krijg je vragen over deze tekst.

Een webserver is een computer die verbonden is met het internet en waar bestanden op staan op staan die nodig zijn om een website te laten zien.

Elke website die jij bezoekt op het world wide web staat ergens op een webserver. Zo'n webserver heeft een map (folder) met daarin webpagina's die bestaan uit HTML-pagina's, CSS-bestanden, JavaScript, PHP-bestanden en dergelijke.

Tot nu toe ben je gewend om de HTML-bestanden gewoon vanaf je eigen computer te starten door er dubbel op te klikken. De browser leest de bestanden en laat deze een mooie (of lelijke) pagina zien.

Je bent als gebruiker van webapplicaties gewend om bijvoorbeeld in te loggen, een bericht achter te laten of een e-mail te sturen. Deze applicaties zijn dynamisch. Dynamische applicaties hebben een input (invoer) en zetten deze om in een output (uitvoer) .

Bijvoorbeeld:

input : gebruikersnaam en wachtwoord
output : een boodschap dat het aanloggen is gelukt of een boodschap dat het aanloggen niet is gelukt.

Om een dynamische webapplicatie te maken heb je meestal een webserver nodig die de pagina's serveert. De webserver krijgt van de browser, de cliënt een verzoek en de webserver behandeld het verzoek en stuurt een antwoord terug. Net als een ober die een drankje serveert .

Stel, je wilt een overzicht van alle studenten in een klas. Je vraagt via de browser dan om het overzicht, bijvoorbeeld door op een menu te klikken. Het verzoek gaat dan via internet naar een webserver en die stuurt het antwoord via internet weer terug naar jouw browser .

Omdat je nog geen toegang hebt tot een echte webserver gaan we er eentje simuleren. Simuleren is het 'net doen alsof'. We simuleren de webserver met een gratis applicatie (wij doen dat met XAMPP) die je kunt installeren op je eigen laptop. Dat heet dan een lokale server. Dat wordt ook wel localhost genoemd. Je laptop is dus door het gebruik van XAMPP een webserver geworden.

Om een dynamische applicatie te maken gaan we in deze module gebruik maken van PHP.

De server heet ook wel back-end (achterkant). PHP is een back-end-taal. Dat betekent dat de taal dus op de back-end, de server draait.

Een bezoeker van de site (de eindgebruiker) kan de code die op de server staat niet zien of wijzigen.

Database

Met PHP kun je ook een database benaderen waarin je gegevens kan opslaan voor een langere periode, bijvoorbeeld de gegevens van een gebruiker zoals voornaam, achternaam, e-mail en wachtwoord.

Als je met PHP aan de slag gaat dan kun je pagina's dynamisch maken. Dit betekent dat de output afhankelijk is van de input van de gebruiker.

XAMPP

Tijdens deze module maak je gebruik van een lokale server. We gebruiken hiervoor XAMPP.

Je kunt XAMPP downloaden en installeren als je dat nog niet hebt gedaan.

Weet je (nog) niet hoe je XAMPP moet installeren op jouw Windows machine of heb je een "port conflict",

of heb je andere problemen, kijk dan eens of de info op deze pagina je kan helpen.

Opdracht

1. Installeer XAMPP op de manier zoals uitgelegd in de les.
2. Volg de instructies in de les en voer de kennischeck uit in de les, 8 vragen en minimale score is 80%

Inleveren

1. Volg de instructies in de les en lever een screenshot van je XAMPP in.
   
2. Lever een screenshot van de kennis-check die je tijdens de les hebt uitgevoerd in.

Welkom!

Je hebt XAMPP geïnstalleerd.

Voer de volgende stappen uit.

1. Start XAMPP.
2. In de folder C:\xampp\htdocs staat een bestand index.php. Verwijder dit bestand!
3. Maak een nieuwe folder aan en noem die PHP1
4. Met VSC open je de net aangemaakte folder.
5. In deze folder maak je met VCS een nieuw bestand en je noemt dit bestand opdracht1-jouw-naam.php.
   • Vervang jouw-naam door jouw naam
     Overal waar in het vervolg jouw-naam staat, vervang je de tekst door jouw naam.
6. Met VSC open je het net aangemaakte bestand.
7. Je maakt de volgende code.
   

   <?php
   
   echo "Hello world!";
   
   ?>

8. Ga nu naar de browser en type als url, localhost in.
9. Open nu de folder en het bestand dat je net hebt gemaakt, wat gebeurt er?

Als het goed is zie er output in de browser verschijnt:

Uitleg code

Wat gebeurt er in deze code?

• Op regel 1 <?php
  wordt tegen de webserver verteld dat we code in php gaan maken. De server/XAMPP weet dan welke taal jij gata praten.
• Op regel 3, echo
  Het woordje echo betekent dat de server output moet gaan maken. Deze output wordt naar de web browser gestuurd.
• Op regel 3 "Hello world!"
  echo moet iets naar de browser sturen, dan moet je natuurlijk wel vertellen wat dat is. Het zinnetje na de echo is dat wat er naar de browser wordt gestuurd. Dit zinnetje staat tussen "" om aan te geven waar het zinnetje begint en waar het eindigt.
• Op regel 3 ;
  Na ELK commando in PHP staat een ; om aan te geven dat het commando afgelopen is en. De meest gemaakte fout in PHP is dat je een ; vergeet. Wedden dat jij dat dit jaar ook tig keer gaat vergeten?
• Op regel 5 ?>
  We zijn klaar met onze commando's in PHP. We vertellen de server/XAMPP dat we stoppen met "PHP praten".

Test de code en controleer of er in je browser de tekst Hello World! verschijnt.

Opdracht

Verander de (php) code zodat de volgende output in de browser verschijnt:

Welkom jouw-Voornaam !

Vergeet niet jouw-Voornaam te vervangen door jouw voornaam.

Inleveren

Je moet twee bestanden inleveren:

Variabelen

Wat ga je leren?

Computer geheugen

Een variabele is een plek in het geheugen van de computer waar je informatie in op kan slaan.

Het geheugen van een computer loopt bijvoorbeeld van adres 0 tot aan adres 32768.

Dan kan het zijn dat je op plaats 21 311 een plaats hebt waar je jouw naam hebt opgeslagen en op plaats 18711 heb je een plaats in het geheugen waar je jouw leeftijd hebt opgeslagen. Omdat deze getallen lastig zijn te onthouden kunnen we deze geheugenplaatsen een naam geven. Dat heet een variabele.

Variabele namen

Als je gaat programmeren ga je best veel gebruik maken van variabelen. We geven dus een naam aan een geheugenplekje, bijvoorbeeld plaats 21311 is waar jouw naam staat, noemen we mijnnaam en de plaats 18711 waar jouw leeftijd in staat noemen we mijnleeftijd.

Doosje of lade

Je zou een variabele ook kunnen zien als een doosje of een lade waar je iets kan instoppen.

Net als bij een doos of een lade, kan je de doos/lade openen en kijken wat er in zit; er kan niets in zitten, maar er kunnen ook getallen of zinnetjes in zitten. En....je kunt de inhoud ook veranderen.

In de eerste 2 minuten van deze video (NL)

Links to an external site.

wordt dit nog een keer uitgelegd.
In dit filmpje gaat het over de programmeertaal Python, maar dit geldt ook voor PHP (en bijna alle andere computertalen)

PHP Variabele

In PHP kun je een variabele makkelijk herkennen omdat die altijd met een $-teken begint, bijvoorbeeld $mijnnaam, $mijnleeftijd zijn twee variabelen.

Hoe ken je een waarde toe aan een variabele?

Stel jij heet Mohammed en je wilt de variable $voornaam de waarde Mohammed geven. Je gebruikt daar voor het = teken. Zie dit niet als 'is' maar als 'wordt' .

<?php
$mijnnaam="Mohammed";
?>

op regel 1 wordt de computer verteld dat je PHP code gaat gebruiken.

op regel 2 hier staat dat de variabele met de naam $mijnnaam de waarde Mohammed krijgt. Dus $mijnnaam wordt "Mohammed".

Mohammed is een zinnetje dus dat staat tussen "".

In dit geval is het een zinnetje van één woord, maar het zou ook meer woorden kunnen bevatten daarom staat een zinnetje, ook al is het maar één woordt altijd tussen "". De computer weet dan precies waar het zinnetje begint en waar het eindigt.

En niet vergeten de ; om aan te geven dat het commando klaar is!

Elk PHP commando wordt in PHP (en ook in bijv. JavaScript en C#, C, C++ en Java) afgesloten met een ;

Even terug naar het doosje of de lade; we hebben dus een doosje gemaakt met het label mijnnaam en in het doosje hebben we de string-waarde "Mohammed" gezet.

Het = teken dat we hebben gebruikt kun je dus lezen als 'stop de volgende waarde in dit doosje'.

Variabele naamgeving

Zoals gezegd, een variabele naam in PHP begint altijd met een $-teken met daarachter een woord zonder spaties. De variabele bestaat dus altijd uit één woord. Omdat je soms duidelijk wil maken wat er in de variabele staat gebruik je goede namen die vaak wat langer zijn.

Bijvoorbeeld $hoofdpersonagevandefilm.

Om dit leesbaar te maken, maken we hiervan hoofdPersonageVanDeFilm.

Dus $hoofdpersonagevandefilm wordt $hoofdPersonageVanDeFilm

Zie je het verschil?

In code ziet het er dan zo uit.

$hoofdPersonageVanDeFilm = "Ryan Reynolds";

Zo bestaat de naam van de variabele nog steeds uit één woord, maar is het wel beter leesbaar.

Let op want de variabele $mijnnaam en $mijnNaam zijn twee verschillende variabelen. We zeggen dan dat variabelenamen hoofdlettergevoelig zijn (in het Engels; case sensitive).

Opdracht

Lees de tekst aandachtig door en maak de kennis-check in de les.

Inleveren

Schermafdruk van de kennischeck met een score van 80% of meer.

Variabelen 1

We gaan met deze code aan de slag.

<?php
$mijnNaam="Mohammed";
?>

Maak een nieuw bestand in c:\xampp\htdocs\phplevel1-jouw-naam

Noem het bestand php02-jouw-naam.php

Maak je eigen code en geef daarbij de variabele $mijnnaam de waarde van jouw naam.

Als je een variabele als een doosje ziet waar je iets in stopt, dan stop je dus jouw naam in het doosje $mijnnaam.

Test de code uit. Wat zie je? Niets? Dat klopt want we hebben geen output gemaakt.

We gaan een regel toevoegen aan onze code waarin we output maken. Tussen regel 2 en 3 voegen we een extra regel toe.

echo $mijnNaam;

Let op! De variabele naam is hier veranderd van $ mijnnaam naar $ mijnNaam . Je zult de naam van de variabele dus ook op regel 2 moeten aanpassen anders heb je twee verschillende variabelen. $ mijnnaam is namelijk niet dezelfde variabele als $ mijnNaam .

Test je code en als het goed is zie je nu dat de waarde van jouw variabele op het scherm (in je browser) wordt afgedrukt.

Inleveren

1. Het bestand php02-jouw-naam.php

Variabelen 2

Breid de code uit de vorige opdracht uit.

Voeg een extra variabele toe mijnLeeftijd en geef die de waarde van jouw-leeftijd. Druk ook de leeftijd af.

De leeftijd is een nummer en dus geen zinnetje. De leeftijd daarom niet tussen "" plaatsen!
Test je code!

Inleveren

1. Het bestand php03-jouw-naam.php
2. Een screenshot waarop jouw PHP-code te zien is.

mijnNaam en mijnLeeftijd

Wat ga je leren?

We beginnen met deze foutloze code:

1  <?php
2 
3  $mijnNaam="Random";
4  $mijnLeeftijd=23;
5 
6  $mijnNaam="Foobar";
7  $mijnLeeftijd=$mijnLeeftijd+1;
8  
9   echo "ik heet $mijnNaam en ik ben $mijnLeeftijd jaar oud.";
10
11  ?>

Kijk naar de code hierboven en probeer te voorspellen wat de output is. Wat er dus wordt afgedrukt.

Tip: als je de waarde van een variabele wil veranderen dan kun je de waarde gewoon overschrijven. Je hoeft de variabele niet eerst leeg te maken of.zo.

Maak een nieuw bestand in c:\xampp\htdocs\phplevel1-jouw-naam

Noem het bestand php04-jouw-naam.php

Zet de code erin en kijk of er inderdaad gebeurt wat jij had voorspelt.

Open MS Word, kopieer de vraag en tik daaronder jouw antwoord. Test aan de hand van code of jouw antwoord klopt.

1: Stel je drukt op regel 5 de waarde van $mijnNaam af, wat is dan de waarde?


2: Stel je drukt op regel 8 de waarde van $mijnNaam af, wat is dan de waarde?


3: Stel je drukt op regel 5 de waarde van $mijnLeeftijd af, wat is dan de waarde?


4: Stel dat je regel 4 twee maal uitvoert.


5: Stel dat je regel 7 twee maal uitvoert.
   Je kopieert dus regel 7 naar regel 8, zodat deze twee maal voorkomt.
   Wat is nu de waarde van $mijnLeeftijd vlak na regel 8?


6: Leg bij opdracht 5 in eigen woorden uit wat er gebeurt.

Inleveren

Sla het MS Word bestand op in PDF formaat met de naam PHP04-jouw-naam.pdf en lever dat in.

Fouten vinden

Als programmeur maak je code, maar een veel belangrijker onderdeel van je werk wordt het opsporen en verbeteren van fouten.

Soms zijn dat fouten die anderen hebben gemaakt, maar vaak zijn het ook fouten die je zelf hebt gemaakt. Het verbeteren van fouten wordt ook wel debuggen genoemd.

Maak een bestand PHP05-jouw-naam.php (let op dat dit bestand een PHP bestand is).

Kopieer de volgende code naar PHP05-jouw-naam.php en test de code uit.

<?php

$mijnNaam = "Random";
$mijnLeeftijdNu = 23;
$mijnLeeftijdVolgendJaar = $mijnLeeftijdNu+1

echo "ik heet $mijnnaam en ik ben $mijnLeeftijd jaar oud, volgend jaar ben ik $mijnLeeftijdVolgendJaar oud.";

?>

De programmeur heeft op 2 regels foutjes gemaakt. Lees de foutmelding en probeer de twee fouten op te lossen.

Verbeter de code, test het en als alles goed werkt lever je dit bestand ook  in.

Inleveren

1. PHP05-jouw-naam.php , hierin staat de verbeterde en getest code.

KennisCheck

Als je alles hebt gelezen en hebt uitgevoerd dan gaan jullie klassikaal een Kennischeck uitvoeren.

• Voer de juiste naam en klas in bij de kennis-check
• Zorg ervoor dat je 80% of hoger scoort.

Inleveren

1. Screenshot van je resultaat.

PHP1

python reformatterCanvas.py 18661 56422 https://www.roc.ovh/books/2024/page/php1

mijnNaam en mijnLeeftijd

Wat ga je leren?

We beginnen met deze foutloze code:

1  <?php
2 
3  $mijnNaam="Random";
4  $mijnLeeftijd=23;
5 
6  $mijnNaam="Foobar";
7  $mijnLeeftijd=$mijnLeeftijd+1;
8  
9   echo "ik heet $mijnNaam en ik ben $mijnLeeftijd jaar oud.";
10
11  ?>

Kijk naar de code hierboven en probeer te voorspellen wat de output is. Wat er dus wordt afgedrukt.

Tip: als je de waarde van een variabele wil veranderen dan kun je de waarde gewoon overschrijven. Je hoeft de variabele niet eerst leeg te maken of.zo.

Maak een nieuw bestand in c:\xampp\htdocs\phplevel1-jouw-naam

Noem het bestand php04-jouw-naam.php

Zet de code erin en kijk of er inderdaad gebeurt wat jij had voorspelt.

Open MS Word, kopieer de vraag en tik daaronder jouw antwoord. Test aan de hand van code of jouw antwoord klopt.

Sla het MS Word bestand op in PDF formaat met de naam PHP04-jouw-naam.pdf en lever dat in.

--

Fouten vinden

Als programmeur maak je code, maar een veel belangrijker onderdeel van je werk wordt het opsporen en verbeteren van fouten.

Soms zijn dat fouten die anderen hebben gemaakt, maar vaak zijn het ook fouten die je zelf hebt gemaakt. Het verbeteren van fouten wordt ook wel debuggen genoemd.

Maak een bestand PHP05-jouw-naam.php (let op dat dit bestand een PHP bestand is).

Kopieer de volgende code naar PHP05-jouw-naam.php en test de code uit.

<?php

$mijnNaam = "Random";
$mijnLeeftijdNu = 23;
$mijnLeeftijdVolgendJaar = $mijnLeeftijdNu+1

echo "ik heet $mijnnaam en ik ben $mijnLeeftijd jaar oud, volgend jaar ben ik $mijnLeeftijdVolgendJaar oud.";

?>

De programmeur heeft op 2 regels foutjes gemaakt. Lees de foutmelding en probeer de twee fouten op te lossen.

Verbeter de code, test het en als alles goed werkt lever je dit bestand ook  in.

Inleveren

1. PHP05-jouw-naam.php , hierin staat de verbeterde en getest code.

Strings 1

Lees de theorie

Opdracht

01 <?php
02 $voornaam="Alexandra";
03 $achternaam="Gaona";
04
05 echo $voornaam." ".$achternaam;
06 echo "Alexandra"." "."Gaono";
07 ?>

Test de code.

Regel 5 en 6 doen beide hetzelfde, althans hetzelfde wordt afgedrukt. Toch is er verschil. Hoe moet je de code bijvoorbeeld aanpassen, zodat de voornaam 'Ali' wordt?

Leg in eigen woorden uit wat het verschil is tussen regel 5 en regel 6.

Tip1: verander regel 2 en geef $voornaam een andere waarde, bijvoorbeeld jouw voornaam.
Wat gebeurt er? Zie je nu het verschil?

Tip2: denk aan wat een variabele is, en waar wordt die gebruikt?

Je kunt als template het volgende gebruiken.

Op regel 5 wordt ..... afgedrukt omdat ......
Op regel 6 wordt ..... afgedrukt omdat .......

Inleveren

1. jouw uitleg (in text veld)

Strings 2

Opdracht

Maak een nieuw bestand php05b-jouw-naam.php

<?php
$voornaam="Alexandra";
$achternaam="Gaona";
echo $voornaam." ".$achternaam;
echo "Alexandra ".$achternaam;
?>

Gebruik dit laatste voorbeeld en verander de voor- en achternaam in je eigen naam en verander de code zodat het volgende wordt afgedrukt.

Welkom jouw-voornaam jouw achternaam!

Ik ben blij om je te zien!

Gebruik de variabelen $voornaam en $achternaam. Geef de variabelen de juisten waarden. Dus $voornaam wordt jouw voornaam en $achternaam krijgt jouw achternaam.

Maak gebruik van string concatenation (aan elkaar plakken van strings).

De output, de tekst in je browser bestaat uit 3 regels. Gebruik de string "<br>" om een regel over slaan.

Test je code uit!

Inleveren

1. screenshot waarin je laat zien dat je code werkt.
2. jouw code php05b-jouw-naam.php.

Strings 3

Opdracht

Bedenk nu zelf 2 variabelen, geef deze een waarde en maak een juiste Nederlandse zin met deze twee variabelen.

Voorbeeld:

$huisdier="hond";
$kleur="zwart";

echo "Mijn ".$huisdier." is ".$kleur;

Dus bedenk een eigen voorbeeld met eigen variabelen.

Dit zijn de regels:

1. Bedenk minimaal 2 eigen logische variabele namen.
2. Geef deze variabele een logische waarde.
3. Druk een zin af. Gebruik string concatenation (aan elkaar plakken van strings) en druk een juiste Nederlandse zin af.

Inleveren

1. screenshot waarin je laat zien dat je code werkt.
2. jouw code php05c-jouw-naam.php.

Getallen 1

Lees eerst de theorie .

Opdracht

Test de volgende code.

01 $a=20;
02 $b=8;
03
04 echo "$a - $b";
05 echo $a - $b;

Beschrijf wat er wordt afgedrukt op regel 4 en wat er wordt afgedrukt op regel 5.

Leg in jouw eigen woorden uit waarom er op regel 4 wat anders wordt afgedrukt als op regel 5.

Kom je er niet uit? Maak dan de volgende twee zinnen af.
Op regel 4 wordt ..... afgedrukt omdat ......
Op regel 5 wordt ..... afgedrukt omdat ......

(hint: denk aan variabele en strings)

Inleveren

Uitleg in online text

Getallen 2

Opdracht

Maak het bestand php06-jouw-naam.php.

Maak de variabele $mijnLeeftijd en geef de variabele de waarde die overeenkomt met je leeftijd.

Maak een variabele $vorigJaar en bereken met de variabele $mijnLeeftijd hoe oud je vorige jaar was.

Maak een variabele $overZesJaar en bereken met de variabele $mijnLeeftijd hoe oud je over zes jaar bent.

Druk de uitkomsten af met de volgende code

// maak hier je eigen code
//
//

echo "Ik ben $mijnLeeftijd jaar";
echo "<br>";
echo "Vorig jaar was ik $vorigJaar oud";
echo "<br>";
echo "Over 6 jaar ben ik $overZesJaar oud";

Test je code!

Inleveren (2 bestanden)

* php06-jouw-naam.php
* schermafdruk van je hele browser scherm, URL is zichtbaar, met output van je code

Conditions 1

Lees eerst de theorie.

$variabele1 = 10;
$variabele2 = 10;

if(.......) {
    echo "De twee waarden zijn gelijk";
}

Conditions 2

$variabele1 = 10;
$variabele2 = 11;

if(.......) {
    echo "De twee waarden zijn ongelijk";
}

Conditions 3

$variabele1 = 10;
$variabele2 = 10;

....
    echo "De twee waarden zijn gelijk";
....
    echo "De twee waarden zijn ongelijk";
....

Include

Lees eerst de theorie.

Maak een eigen footer.php en zet daarin een eigen footer. Noem het bestand php108a-footer-jouw-naam.php

Maak een eenvoudige webpagina php8a-jouw-naam.php

Maak een titel <h2> Mijn Webpagina .

Zet daaronder welkom < jouw naam>

Gebruik tenminste een <body> en <html> tag

Geef de variabele $footer de naam van het bestand waarin jouw footer staat en include de footer door gebruik te maken van de variabele $footer en het php statement include.

Test of je code werkt voordat je het inlevert!

Inleveren

• php8a-jouw-naam.php
• php108a-footer-jouw-naam.php

Logische operators 1

Lees eerst de theorie.

Neem onderstaande code over:

<?php
$werkdagVanDeWeek=[ 'ma','di','wo','do','vr'];
$vrijeDag=[ 'ja', 'nee'];

echo "<table border=1>";
echo "<tr><th>dag</th><th>vrije dag</th><th>advies</th></tr>";

foreach($werkdagVanDeWeek as $dag) {
  foreach($vrijeDag as $vd) {

    echo "<tr>";
    echo "<td>$dag</td><td>$vd</td><td>";

    // je moet vroeg opstaan op vrijdagen als het geen vrije dag is
    if ( $dag .. .... && $vd.. .... ) {
      echo "07:00 uur op staan";
    } else {
      echo "uitslapen";
    }

    echo "</td>";
  }
}
echo "</table>";

Maak de conditie in het if-statement af door op de puntjes de code aan te vullen.

Je moet alleen vroeg opstaan op vrijdagen als het geen vrije dag is.

De output van de code moet er dus als volgt uit zien:

Inleveren (2 bestanden)

* Screenshot van de output inclusief de URL
* php01-conditions01-jouw-naam.php

Logische operators 2

Neem onderstaande code over:

<?php
$dagVanDeWeek=[ 'ma','di','wo','do','vr','za','zo' ];
$vrijeDag=[ 'ja', 'nee'];

echo "<table border=1>";
echo "<tr><th>dag</th><th>vrij dag</th><th>advies</th></tr>";

foreach($dagVanDeWeek as $dag) {
  foreach($vrijeDag as $vd) {

    echo "<tr>";
    echo "<td>$dag</td><td>$vd</td><td>";

    // je moet vroeg opstaan op elke doordeweekse dag (maandag, dinsdag, woensdag, donderdag of vrijdag)
    if ( .... .. .... .. .... .. .... .. .... ) {
      echo "06:30 uur op staan";
    } else {
      echo "uitslapen";
    }

    echo "</td>";
  }
}
echo "</table>";

Maak de conditie in het if-statement af door op de puntjes de code aan te vullen.

Je moet vroeg opstaan op elke doordeweekse dag (maandag, dinsdag, woensdag, donderdag of vrijdag).

De output van de code moet er dus als volgt uit zien:

Inleveren

1. Screenshot van de output inclusief de URL.
2. Je code php01-conditions02-jouw-naam.php

Logische operators 3

Neem onderstaande code over:

<?php
$dagVanDeWeek=[ 'ma','di','wo','do','vr','za','zo' ];
$vrijeDag=[ 'ja', 'nee'];

echo "<table border=1>";
echo "<tr><th>dag</th><th>vrij dag</th><th>advies</th></tr>";

foreach($dagVanDeWeek as $dag) {
  foreach($vrijeDag as $vd) {

    echo "<tr>";
    echo "<td>$dag</td><td>$vd</td><td>";

    // je werkt op maandag en dinsdag; je moet dus vroeg opstaan op maandag of dinsdag als het geen vrije dag is.
    if ( ......... ) {
      echo "06:30 uur op staan";
    } else {
      echo "uitslapen";
    }

    echo "</td>";
  }
}
echo "</table>";

Maak de conditie in het if-statement af door op de puntjes de code aan te vullen.

Let op dit is een lastige, controleer je antwoord goed!

Kom je er niet uit? Lees dan het stuk over " Logische operatoren en korte broeken " en dan vooral het stukje " haakjes in condities ".

Je moet alleen vroeg opstaan op maandagen als het geen vrije dag is.

De output van de code moet er dus als volgt uit zien:

Alleen op de maandag en dinsdag die geen vrije dagen zijn, moet je vroeg op staan.

Inleveren

1. Screenshot van de output inclusief de URL.
2. Je code php01-conditions03-jouw-naam.php

Eindopdracht coderen - deel 1

Wat ga je leren?

Met alles wat we hebben geleerd gaan we een PHP programma maken. Let's go!

Korting

Een webshop geeft zomerse korting op alle artikelen als dit weekend bepaalde zomerse temperaturen worden bereikt.

De korting bepaal je in de code aan de hand van de temperatuur.

Bezorgkosten

De bezorgkosten zijn standaard 4 euro per bestelling, maar als de prijs van de bestelling (na zomerse korting) meer dan 40 euro is dan zijn de bezorgkosten 0.

Code

<?php

// Dit zijn de temperatuur en prijs van de bestelling.
$temperatuur= 20;
$prijsBestelling= 40;

// bepaal de $korting aan de hand van de temperatuur
$korting = 0;
if ( ... ) {
  $korting = 10;
}
if ( ... ) {
  $korting = 15;
}
if ( ... ) {
  $korting = 20;
}

$prijsBestelling = $prijsBestelling - ($prijsBestelling*$korting/100) 

// bepaal de $bezorgkosten aan de hand van de $prijsBestelling if ( ... ) {  ... } else {  ... } // druk resultaat af echo "Bedrag bestelling: $prijsBestelling"; echo "<br>"; echo "Temperatuur dit weekend: $temperatuur"; echo "<br>"; echo "Korting: $korting"; echo "<br>"; echo "Bezorgkosten: $bezorgkosten"; echo "<br>"; echo "<br>"; echo "Eindbedrag: ".$prijsBestelling-$korting+$bezorgkosten;

Maak de code af en zorgen ervoor dat het eindbedrag juist wordt berekend .

Bepaal eerst de $bezorgkosten op regel 8, dan de korting op regel 12.

Het eindbedrag moet uitkomen op 44 euro (geen korting en wel bezorgkosten).

Inleveren

• code php10-jouw-naam.php

Eindopdracht testen - deel 2

Inleiding

Deze opdracht is wat groter. Lees het goed door.

Testen van code is belangrijk en is onderdeel van het Examen Software development.

In deze opdracht gaan we software testen aan de hand van een testplan. Dit testplan moet jij (af)maken en uitvoeren.

Testen

In de code die je in deel één hebt gemaakt kun je met verschillende waarden testen. Laten we bijvoorbeeld testen wat er uit komt als de temperatuur 20 is, en de prijs van de bestelling 40.

Vul testwaarden in op regel 4 en 5 en test de code.  Wat komt er uit jouw code en klopt dat?

Testsplan

Maak een testplan . Dit is een kort documentje waarin beschrijft wat je gaat testen. Dit ga je dan uitvoeren en je noteert de uitkomsten.

In het test documentje staat bijvoorbeeld het volgende:

Uitleg

De getallen zijn niet willekeurig, maar zijn uitgerekend, bijvoorbeeld op 4 staat:

temperatuur is 30 en de prijs van de bestelling is 10 .

Bij een temperatuur van 30 is de korting 20% , dus de prijs van de bestelling wordt 8 euro (10 - 20%).

Daar komen 4 euro bezorgkosten bij, dus wordt de prijs 12 euro en dat staat in de laatste kolom.

Nu ga je testen of je code deze berekening ook goed maakt. Je verandert de waarden van temperatuur en  de prijs van de bestelling in de code en kijkt wat er dan uitkomt. Is dat 12? Top dan is de test geslaagd! Vul dan "ja" in bij de laatste kolom.

Komt er geen 12 uit jouw code dan is de code niet goed of je berekening is onjuist. Je zult dan de berekening of de code moeten aanpassen.

In de laatste kolom moet je ja of nee invullen afhankelijk van het resultaat. Bepaal minimaal 10 test scenario's. Je hebt er al 5 (hierboven), dus je moet er zelf nog minimaal 5 bij bedenken en uitrekenen.

Je moet dus 10 combinaties maken, uitrekenen wat er uit moet komen, opschrijven en dan testen of dat er ook uit komt.

Kortingen

Bezorgkosten

Bezorgkosten zijn 4 euro voor bedragen tot en met 40 euro. Daarboven zijn de bezorgkosten 0.

Inleveren

• testlog test10-jouw-naam.pdf (gebruik "save as" in MS Word en kies PDF als bestandstype)

PHP Eindtest

PHP Eindtest. Je krijgt 5 willekeurige vragen. Je krijgt 6 minuten de tijd om de quiz te maken.

Je mag deze test maximaal 6x doen.

KennisCheck

Als je alles hebt gelezen en hebt uitgevoerd dan gaan jullie klassikaal een Kennischeck uitvoeren.

• Voer de juiste naam en klas in bij de kennis-check
• Zorg ervoor dat je 80% of hoger scoort.

Inleveren

1. Screenshot van je resultaat.

PHP2

python reformatterCanvas.py 18661 52532 https://www.roc.ovh/books/2024/page/php2

Inleiding Arrays

Wat ga je leren?

In bijna alle talen heb je een speciaal soort variabele; het array. Een array is een verzameling van variabelen. Een soort lijst waarin allemaal variabelen zitten.

In Python heb je ook arrays en daar wordt het list genoemd. In PHP noemen we het een array.

In het Engels betekent een array, "een groep mensen of dingen die op een bepaalde manier zijn geordend".

Als je een variabele als een bladzijde van een boek ziet waar je een nummer op kan zetten of een string. Dan is een array een boek. Een boek heeft dan bladzijden en op elke bladzijde staan dan een variabele.

In een array begin je altijd op bladzijde 0. Op pagina 0 van het boek staat dus de eerste variabele.

Hoe ziet dat er uit in code?

$mijnArray=['maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag','zondag'];

Je hebt hier dus een array, op bladzijde 0 staat de string 'maandag', op bladzijde 1 staat de string 'dinsdag', enzovoorts.

$mijnArray=['maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag','zondag'];
echo $mijnArray[0];
echo "<br>";
echo $mijnArray[1];

Een "bladzijde" van een array heet een element. Op regel 2 van de code wordt dus het eerste element van het array $mijnArray afgedrukt., op regel 4 wordt het tweede element van $mijnArray afgedrukt.

Bekijk nu het filmpje tot aan 4:49 (foreach loop dus niet).

Als je het filmpje hebt bekeken dan weet je wat de key van een array is en hoe je een array waarde kan wijzigen.

Snap je alles, ga dan de opgave maken.

Opgave

Een array heeft een naam, een key en een value (waarde).

Stel de naam='mijnArray', de key=3 en de waarde=0.

Hoe zet je dit om in PHP code?

Inleveren

De PHP code (zie opgave).

Print 2de array element

Gebruik array $myArray=[15,25,35,45,55,65] en druk het tweede element af (dit is dus 25).

Lever de code in en gebruik de naam php201a-jouw-naam.php

Find the right element

Vervang in de onderstaande code de xxx. Maak gebruik van het array $seizoenen en druk het juiste seizoen af.

$seizoenen=['lente', 'zomer', 'herfst', 'winter' ];

echo "Het koudste seizoen is de ".xxx;
echo "Het warmste seizoen is de ".xxx;

Lever de code in en gebruik de naam php201c-jouw-naam.php

Changing array value

Gebruik array

$myArray=[10,20,30,40,50,60];

Stap 1

Verander de eerste drie elementen één-voor-één in 3,2 en 1. Gebruik hiervoor code.

Dus niet de getallen 10, 20 en 30 vervangen in de regel $myArray=[10,20,30,40,50,60]) , maar een index (key) gebruiken en in drie afzonderlijke stappen de eerste drie waardes veranderen.

Stap 2

Druk alleen het 2de en 3de element af.

De output ziet er dan als volgt uit:

2
1

Vergeet de <br> niet!

Inleveren

1. Lever de php code in.
   

Inleiding foreach

Wat ga je leren?

In de vorige les hebben we kennis gemaakt met arays. Als je iets met een array wilt doen dan kun je natuurlijk element voor element benaderen en (bijvoorbeeld) afdrukken:

echo myArray[0];
echo myArray[1];
echo myArray[2];
echo myArray[3];
echo myArray[4];
.....

Maar er zijn handigere methoden om iets met een array te doen. Daarvoor hebben we een loop.

Met een foreach loop kun je door een array heen lopen. Je kunt element voor element doorlopen.

Kijk naar het tweede gedeelte van de film (vanaf 4:49, het eerste gedeelte heb je in de vorige les al bekeken).

Er zijn meerdere soorten loops en daar gaan we nog een keer uitgebreid naar kijken. Voor nu kijken we eerst even naarde foreach loop. Deze is belangrijk om dat je die kunt gebruiken om door een array heen te lopen. Stel je wilt alle elementen van een array afdrukken.

Dat kan op deze manier:

$mijnArray=['maandag','dinsdag','woensdag','donderdag','vrijdag'];

echo $myArray[0];
echo "<br>";
echo $myArray[1];
echo "<br>";
echo $myArray[2];
echo "<br>";
echo $myArray[3];
echo "<br>";
echo $myArray[4];
echo "<br>";

Dit is alleen onhandig want stel dat we zaterdag en zondag toevoegen aan het array dan moeten we regels toevoegen om deze elementen af te drukken.

Dat kan dus handiger, kijk maar de volgende code.

$mijnArray=['maandag','dinsdag','woensdag','donderdag','vrijdag'];

foreach($mijnArray as $dag)
{
  echo $dag;
  echo "<br>";
}

Wow dat is korter, toch?

Hoe werkt dit?

• Op regel  3 staat: zet één-voor-één elk element uit het array $mijnArray in de variabele $day en voer de code uit die tussen de { en } staat.
• Op regel 4 begint het codeblok, dit is het begin van de code die voor elk element wordt uitgevoerd.
• Op regel 5 wordt de $dag afgedrukt. Dat wordt dus voor elk element van $mijnArray gedaan.
• Op regel 6 wordt er een nieuwe regel afgedrukt en ook dit wordt voor elk element van het array uitgevoerd.
• Op regel 7 wordt het codeblok afgesloten, dit is het einde van de loop.

Opdracht

In het programmaatje dat hierboven staat worden alle werkdagen van de week afgedrukt. Bereid dit uit zodat alle dagen van de week op de jusite volgorde wordne afgedrukt.

Inleveren

Aangepast programma met foreach loop.

Klasgenoten

Maak een array met namen van klasgenoten. Zet in ieder geval 10 namen in het array. De namen zijn strings dus denk erom dat de namen tussen " moeten staan.

Druk de inhoud van het array af en zet op elke regel een naam. Gebruik dus een <br> na elke naam. Gebruik een loop om de namen af te drukken (uitleg op vorige pagina) .

Inleveren

Lever de code in en gebruik de naam php202b-jouw-naam.php

Jouw naam in lijst, vet!

Maak de vorige opdracht en zorg ervoor dat jouw eigen naam ook ergens in het array staat. We hebben dus nog steeds een array met minstens tien namen.

Zet in de foreach loop een if statement. Als de loop bij jouw naam is dan dan druk je een !-teken af achter de naam.

Stel jij heet Omar, dan zou de if er zo uit zien:

if ($naam == "Omar") {
  echo "!";
}

Zet dit in de loop en controleer of er alleen achter jouw eigen naam een ! wordt afgedrukt.

Let er dus op dat de complete if in het code blok van de loop komt te staan. Let er ook op dat in het voorbeeld $naam wordt gebruikt, het kan zijn dat jij in jouw loop voor een andere variabele naam hebt gekozen.

Uitdaging (optioneel voor 2 bonuspunten): kun je je naam met uitroepteken ook vetgedrukt of misschien zelf rood-vergedruk afdrukken?

Inleveren

Lever de code in en gebruik de naam php202c-jouw-naam.php

Functions

Wat ga je leren?

Stel je hebt een stukje code waarin je een lastige berekening maakt en deze berekening wil je op verschillende plaatsen in jouw code uitvoeren dan zou het handig zijn dat je niet telkens opnieuw die (lastige) berekening moet maken. Dat hoeft ook niet als je functies gebruikt, Een functie is een stukje code dat je op elke moment kan uitvoeren.

PHP heeft zelf ook veel ingebouwde functies die jij kunt gebruiken, maar daarover in een andere les over functies meer.

Een functie is een stukje code. De code ontvangt input doet er wat mee en de function maakt dan output.

Geldautomaat

In het dagelijks leven zijn er nog veel meer dingen die je met een function kan vergelijken. Neem bijvoorbeeld een geldautomaat. 

Je stopt er wat in (pasje, pincode) en de function gaat van alles doen zoals je saldo en pincode controleren. Als alle controles goed gaan krijg je als output geld.

Wiskunde

In de wiskunde heb je ook functies en doen hetzelfde:

f(x) = x * x + 3

Deze functie krijgt als input een waarde x en zet deze om in output. Als je in deze functie 2 stopt dan krijg je er 7 uit (2 * 2 + 3).

Voorbeeld

Stel we willen deze laatste wiskunde functie in PHP-code omzetten, dan ziet dat er zo uit.

function myFunction($x) {
  $output = $x * $x + 3;
  return($output);
}

Regel 1, begin je de functie. Dat doe je altijd met het woord function, gevolgd door de functienaam die je zelf mag verzinnen. Dan volgt een { om aan te geven dat alle code tussen { en } bij de function hoort. De function loopt dus door tot en met regel 4.

De function krijgt de waarde $x als input. In het volgende voorbeeld laat ik zien hoe je deze waarde aan de functie meegeeft.

Regel 2, we zetten het resultaat van de berekening in de variabele $output.

Regel 3, hier maken we de output. In het volgende voorbeeld laat ik zien hoe je die output kunt krijgen.

Regel 4, Dit is het einde van de function.

Hoe roepen we deze function aan en hoe ontvangen we de output?

$in=4;
$uit=myFunction($in);
echo $uit;

$uit=myFunction(6);
echo $uit;

echo myFunction(9);

Je ziet hier drie voorbeelden van hoe je de function kan aanroepen. In het eerste voorbeeld geven we de variabele $in de waarde 4, en we geven deze waarde mee als input van de function. Het resultaat komt in $uit. En op regel 3 drukken we de waarde van $uit dan af.

Op regel 5 geven we gelijk de waarde 6 als input mee.

Op regel 7 geven we gelijk de waarde 9 mee en drukken de output gelijk af zonder deze eerst op te slaan in een variabele.

In het volgende filmpje laat een dialectische bekende programmeur zien hoe je een functie kan maken voor het omrekenen van liters naar gallons. Gallons is in Amerika de maat voor volume. Je koop daar dus bijvoorbeeld geen liter Cola maar een halve gallon.

PHP-functions

PHP heeft zelf een groot aantal ingebouwde functions. Hieronder een paar voorbeelden:

voorbeeld

$str="The quick brown fox jumps over the lazy dog";

$res1=strlen($str);
$res2=str_word_count($str);

echo "De string is %res1 letters en bestaat uit $res2 woorden.";

Op regel 3 en 4 worden twee ingebouwde PHP functions gebruikt.

Weet je overigens waar de zin ("The quick brown fox.....") op slaat?

Deze zin wordt soms gebruikt voor testen omdat elke letter van het alfabet er precies in keer in voorkomt.

Opdracht

Je hebt u een paar opdrachten van functies waarbij input wordt omgezet in output:

1. pasje + pincode -> geld-automaat -> cash
2. geld (+keuze) -> snoep automaat -> snoep
3. koe -> slachthuis -> vlees

Inleveren

Bedenk zelf een extra regel in de tabel hierboven.

Bedenk zelf een functie waarbij input wordt omgezet in output. Omschrijf de input, functie en output.

Bereken functie

Berekenen met een function()

Zorg dat je de theorie hebt doorgelezen.

Bekijk het voorbeeld en maak een eigen functie. De berekening die de function moet maken is:

$output = $x * 2;

De output van de functie is alleen het resultaat (één getal dus). De output wordt met een return teruggeven.

Noem de function myVoornaam (vervang voornaam door jouw eigen voornaam) en test of je code werkt.
Test minimaal twee gevallen en laat de code die je hebt gebruikt om te testen in je code staan.

Inleveren

php203a-jouw-naam.php met daarin de function en de testcode.

Temperatuur

Temperatuur

Maak een function waarmee je de temperatuur van graden in Fahrenheit kan omrekenen.

Het omrekenen doe je als volgt:

$farenheit = ($celcius * 9/5) + 32;

Maak een function die aan de volgende voorwaarden voldoet:

Test jouw functie . Roep de function op met tenminste 3 verschillende input waarden en druk de resultaten af. Laat deze testen in je code staan.

Op deze pagina kun je celcius in fahrenheit om laten rekenen. Gebruik deze site om te testen.

Inleveren

php203b-jouw-naam.php met daarin de function en tenminste drie testen waarin je laat zien dat de juisten waarden door de function laat berekenen.

De twee hoogste (bonus)

Deze opdracht is optioneel en verplicht voor eventuele "studieversnellers"

Maak een functie die één array als input krijgt en die de twee hoogste waarden van het array bij elkaar optelt.

Laat in je code zien dat je al deze input scenario's test.

Inleveren

De code in met de naam php203c-optioneel-jouw-naam.php

Complexe Arrays

We hebben al naar arrays gekeken. In de terugblik hieronder kijken we nog een keer naar deze 'eenvoudige' arrays. Deze arrays zijn 'eenvoudig' omdat ze uit één array bestaan. Je hebt ook arrays die bestaan uit arrays. Een array van arrays dus. Dit zijn multidimensionale arrays of complexe arrays. We praten vanaf nu over complexe arrays maar:

complex array = multidimensionale array

Een complex array is dus een array van een array. Je hebt zelfs arrays van arrays van arrays van arrays,.... maar voor nu houden we het bij arrays van arrays.

Terugblik

Zoals uitgelegd in voorgaande lessen kan een array meerdere waarden bevatten. Iedere waarde is gekoppeld aan een voor de array unieke sleutel. Deze sleutels worden gebruikt om een specifieke waarde uit de array af te kunnen lezen of te kunnen bewerken.

Bijvoorbeeld

$fruit = ['appel', 'banaan', 'citroen']; 
$fruit = array('appel', 'banaan', 'citroen'); 

Beide regels zijn hetzelfde en eigenlijk gebruiken we altijd de eerste variant. De tweede staat erbij omdat je dit soms kan tegenkomen in code.

Stel je wilt het eerste element uit het $fruit array afdrukken, dat kan met:

echo $fruit[0]; 

Het eerste element heeft dus key 0, het tweede key 1, het derde key 2, enzovoorts.

Het array $fruit is een 'eenvoudig' array. Er bestaan ook complexe arrays. Dit zijn arrays in arrays. Als je later leert om gegevens uit een database te halen dan krijg je te maken met complexe arrays.

Complex array - metingen

Laten we een complex array bouwen.

Stel je wilt elke dat de temperatuur drie maal opmeten. Een keer 's morgens, één keer 's middags en één keer 's avonds.

Je kunt dit dan opslaan in een array met drie elementen.

$metingen = [ 7, 12, 11 ];

Stel dat je van meerdere dagen de metingen wilt opslaan. Dan kun je een array van een array maken. Je maakt dan een array waarin arrays zitten die dan elk drie elementen hebben, bijvoorbeeld:

$metingenWeek=[ [14,11,12], [ 6,11,11], [7,12,14], [9,14,13], [10,15,13] , [11,15,14 ], [13,16,14] ];

Je hebt nu array met metingen van 7 dagen en elke dag heb je een array met drie metingen. Zo kun je zien dat de eerste dag de warmste ochtend had en dat de laatste dag de warmste middag had.

print_r()

Met de PHP function print_r() kan je een array afdrukken.

Stel voor dat je de temperatuur van de eerste dag (element 0!) van de ochtend wil afdrukken, hoe doe je dat dan?

echo $metingenWeek[0][0];

Stel wel willen het volgende afdrukken:

Dag 1:
  dagdeel 14
  dagdeel 11
  dagdeel 12

 Dag 2:
   dagdeel 6
   dagdeel 11
   dagdeel 11

 etc., etc.

We maken een loop en hebben het volgende programmaatje gemaakt.

$metingenWeek=[ [14,11,12], [ 6,11,11], [7,12,14], [9,14,13], [10,15,13] , [11,15,14 ], [13,16,14] ];

$dagNummer=0;

foreach($metingenWeek as $dag) {
    echo "Dag ".$dagNummer."<br>"; 
    echo "'s ochtends: ".$metingenWeek[0][0]."<br>";
    echo "'s middags : ".$metingenWeek[0][1]."<br>";
    echo "'s avonds  : ".$metingenWeek[0][2]."<br>";  
}

Helaas er zitten twee fouten in het programmaatje.

De code heeft een complex array met metingen van de temperatuur. Elke dag heeft drie meetwaarden; 's morgens, 's middags en 's avonds.

Zo is de meetwaarde van de ochtend van de 2de dag 6 graden.

Check of je dit terug kan vinden in het array $metingenWeek in de code.

Test de code uit.

Probleem 1

Het dagnummer blijft op 0 staan. Los dit op en zorg ervoor dat de 7 dagen allemaal worden afgedrukt en dat het juiste dagnummer wordt afgedrukt. De dagnummers beginnen te tellen bij 1.

Pas de code aan zodat de dagnummers correct worden afgedrukt.

Probleem 2

Voor 's morgens, 's middags en 's avonds worden telkens dezelfde getallen afgedrukt. Dat klopt niet. In het voorbeeld staan voor dag 1 en dag 2 de juiste waarden afgedrukt. De programmeur heeft een foutje (of eigenlijk twee) gemaakt. Spoor de fout op en zorg ervoor dat de output klopt en dat de juisten getallen (temperaturen) worden afgedrukt.

Vergeet je code niet te testen!

Inleveren

De aangepaste en geteste code in php02-04a-jouw-naam.php

De hoogste meetwaarde

Je kunt deze opdracht alleen maken als je de vorige opdracht (goed) hebt gemaakt.

Je gaat het programmaatje dat je hebt gemaakt uitbreiden.

Je gaat je vorige programma aanpassen zodat de output er als volgt, komt uit te zien:

Dag 1:
  dagdeel 14
  dagdeel 11
  dagdeel 12
  hoogste waarde is 14

 Dag 2:
   dagdeel 6
   dagdeel 11
   dagdeel 11
   hoogste waarde is 11

 etc., etc.

Je drukt dus telkens per dag de hoogste temperatuur af. Dat doe je voor alle dagen.

Tip: kijk naar de PHP functie max() op https://www.w3schools.com/php/func_math_max.asp

Deze functie kan handig van pas komen. Je kan en mag de opdracht ook op een andere manier oplossen.

Gaat het jouw lukken? Succes!

Inleveren

De aangepaste en geteste code in php02-04b-jouw-naam.php

Nog meer loops

We hebben eerder gezien hoe we met een foreach loop door een array kunnen heen lopen.

We hebben ook loops die we kunnen gebruiken zonder dat we een array hebben.

Stel we willen de getallen 1,2,3,4,5,6,7,8,9,10 op het scherm zetten, dan kan dat ook met een loop.

for($i=1; $i<=10, $i=$i+1) {
  echo $i.", ";
}

Wat gebeurt hier?

Op regel 1 worden loop gemaakt. We gebruiken de variabele $i en zetten die op 1 ($i=1), dan zeggen we doe de loop zolang $i kleiner of gelijk is aan 10 en elke keer dat de volgende keer in de loop komen dan doen we $i = $i + 1 en we verhogen $i dus met 1.

Op regel 2 drukken we het resultaat af en op regel 4 sluiten we het codeblok dat deel van de loop uitmaakt.

Het is gebruikelijk om voor een for-loop de variabele $i te gebruiken.

Opdracht

Verander de code zodat je alle getallen van 2 tot en met 9 afdrukt.

Inleveren

De aangepaste code

Loops voorspellen

Je hebt 5 loops (a t/m e). Bedenk vooraf van elke loop wat jij denkt dat die doet. Schrijf dat in eigen woorden op. Test daarna of je antwoorden kloppen en geef bij elke loop weer of je antwoord klopt. Als je antwoord niet klopt dan verbeter je je antwoord.

//loop A
for($i=1; $i<=20; $i=$i+1) {
  echo $i.", ";
}

//loop b
for($i=20; $i<30; $i=$i+1) {
  echo $i.", ";
}

//loop c
for($i=2; $i<100; $i=$i+2) {
  echo $i.", ";
}

//loop d
for($i=10; $i>0; $i=$i-1) {
  echo $i.", ";
}

//loop e
for($i=100; $i>0; $i=$i-2) {
  echo $i.", ";
}

Inleveren: een pdf bestand waarin je de stappen die hierboven staan beschreven bent doorgelopen. Het voorbeeld hieronder laat zien wat we als uitwerking ongeveer van je verwachten:

Voorbeeld:

//loop a
Deze loop begint bij 3 en wordt telkens 1 opgehoogd, de loop stop bij 10. Dus de output is 3,4,5,6,7,8,9,10

Nadat ik heb getest blijkt dat de 10 niet wordt afgedrukt dat komt omdat er <10 staat en niet <=10

//loop b

Deze loop .......

Ik heb getest en het antwoord klopt.

// loop c
 Deze loop.....

 Ik heb getest en ....

 // loop d
  Deze loop.....

 Ik heb getest en ....

 // loop e
  Deze loop .....

 Ik heb getest en ....

Inleveren

PDF, php205a-jouw-naam.pdf met de uitgewerkte opgaven.

foreach versus for

Je kunt een array ook met een for-loop doorlopen. Bestudeer de volgende code.

$myArray=[1,3,2];

foreach($myArray as $item) {
    echo $item;
    echo "<br>";
}

for($i=0; $i<3; $i++) {
    echo $myArray[$i];
    echo "<br>";
}

Test je code! Probeer de code uit en probeer te verklaren wat je ziet.

Maak code die het volgende array afdrukt één keer met een foreach-loop en daarna met een for-loop.

$myColors['rood','paars','oranje','blauw','wit'];

Inleveren

php205b-jouw-naam.php met de uitgewerkte code met de twee soorten loops.

Oneindig optellen

Opdracht

Maak een for-loop waarin alle getallen van 1 tot en met 100 worden opgeteld.

Jouw code laat de optelsom zien van 1+2+3+4+5+6+7+.....99+100.

Uitleg

Je kunt natuurlijk de volgende code inleveren:

echo 1+2+3+4+5+6+7+8+9+10+11+12;

En dan tot 100. Dat kan, maar stel dat ik nu vraag om alle getallen van 1 tot en met 10 000 op te tellen? Dan is dat bijna niet meer te doen. Je moet voor deze opdracht dan ook een loop gebruiken.

Als je niet weet hoe je dat aanpakt dan maak je dit probleem eerst eenvoudiger; je drukt eerst alle getallen 1 tot en met 100 af. Als dat gelukt is dan ga je al deze getallen bij elkaar op tellen.

Dus stel dat je dit doet voor de getallen 1 t/m 5 dan zou er 15 uitkomen (1+2+3+4+5=15).

Dus voor de duidelijkheid de code laat één getal zien en dat getal is dus de som van alle cijfers 1 t/m 100 .

Inleveren

php205c-jouw-naam.php met de uitgewerkte opgaven.

Nog meer functies

Nog een voorbeeld van een function

In deze les wordt een iets complexere functie gemaakt. In deze functie worden de even getallen uit een array gefilterd.

Parameters

Dat wat je meegeeft aan een function heten parameters. In de vorige voorbeelden (filmpjes) zagen we dat we telkens precies één parameter meegaven. In het eerste voorbeeld was dat een getal en in het tweede voorbeeld was dat een array.

Je kunt ook minder of meer parameter meegeven, bijvoorbeeld nul:

function welkom() {
    $tekst = 'Welkom op mijn website';
    return $tekst;    
}

En je kunt ook meer parameters meegeven, bijvoorbeeld drie:

function welkom2($tekst, $naam, $hoofdletters = FALSE ) {
    //bepaal tekst
    if ($tekst == 1) {
        $uitvoer = 'Welkom '. $naam;
    }
    elseif ($tekst == 2) {
        $uitvoer = 'Tot ziens, '.$naam;
    }
    //bepaal hoofdletters
    if ($hoofdletters == TRUE) {
        $uitvoer = strtoupper($uitvoer);
    }
    //geef resultaat
    return $uitvoer;
}

De derde parameter is wat vreemd want de waarde wordt al bepaald in de functie, althans zo lijkt het. Dit is een zogenaamde optionele parameter. Je hoeft hem niet mee te geven en als je hem niet meegeeft dan is die 'by default' false.

Dus

welkom2(2, 'Mark', False )
is hetzelfde als
welkom2(2, 'Mark')

Apart bestand

Als je veel functies hebt dan kun je die in een apart bestand zetten dat houd de boel overzichtelijk en maakt samenwerking ook makkelijker, omdat iedereen aan zijn eigen set functions kan werken.

Stel je zet de functie uit het laatste voorbeeld in een apart bestand met de naam mijnFuncties.php, dan zou de volgende code gewoon werken.

<?php
include_once('mijnFuncties.php');
echo welkom2(1,'Ayoub',true);
?>

Opdracht

Maak een php file, mijnFuncties.php met de functie welkom2() uit één van de voorbeelden van hierboven.

Maak een file php16a-jouw-naam.php en include het bestand mijnFuncties.php file.

Voeg de volgende regel toe aan php16a-jouw-naam.php

$mijnArray=['Nouaman','Aart','Samil','Raine','Diego','Olmer','Wessel','Jari','Maxey','Brian','Kikiya'];

Gebruik het bovenstaande array en roep voor elk van de namen de welkom2() functie twee maal aan, één keer om de welkom-boodschap af te drukken en één keer om de Tot-ziens-boodschap af te drukken.

Gebruik een loop en roep vanuit de loop de functie op de juiste manier aan.

foreach($mijnArray as $name) {
    // roep functie aan met welkom-bookdschap
    // roep functie aan met Tot-ziens-boodschap
}

Dus de output ziet er zo uit:

Welkom Nouaman
Tot ziens Nouaman

Welkom Aart
Tot ziens Aart

Welkom Samil
Tot ziens Samil

....

Welkom Kikiya
Tot ziens Kikiya

Inleveren

Drie bestanden:

1. php16a-jouw-naam.php
   (vanuit dit bestand wordt de functie gebruikt die in mijnFuncties.php is gedefinieerd)
   
   
2. mijnFuncties.php
   
   
3. een screenshot van je browser inclusief URL waarin je het resultaat laat zien.

...

!Copy 6

In deze les gaan we stof herhalen. We gaan met functies werken en je leert onderdelen die je later later nodig hebt voor de challenge.

Opgave 1

We hebben een functie die het volgende doet. De functie krijgt drie waarden en returned de som van de twee getallen (dus de twee input variabelen opgeteld).

Maak een functie die dit doet.

En test met alle input waarden zoals hierboven aangegeven. Je kunt de volgende template gebruiken.

function mijnFunctie($a, $b, $c) {
   // maak hier de code voor jouw functie 
}

echo mijnFunctie(3,2,1);
echo "<br>";
echo mijnFunctie(1,12,3);
echo "<br>";
echo mijnFunctie(0,4,0);
echo "<br>";
echo mijnFunctie(7,0,3);
echo "<br>";
echo mijnFunctie(0,0,0);

Inleveren

Lever de code in en gebruik de naam php71-jouw-naam.php

Opgave 2

We hebben een functie die het volgende doet. De functie krijgt drie waarden en returned de som van de twee getallen (dus de twee input variabelen opgeteld). Er is nu een uitzondering. Zodra er een 0 in één van de input variabelen voorkomt dan wordt de return waarde 0.

Maak een functie die dit doet.

Gebruik de template van opgave 1.

Inleveren

Lever de code in en gebruik de naam php72-jouw-naam.php

Opgave 3

We hebben een functie die het volgende doet. De functie krijgt drie waarden en returned de som van de twee getallen (dus de twee input variabelen opgeteld). Er is nu een uitzondering. Zodra alle input variabelen 0 zijn wordt de return waarde 0.

Maak een functie die dit doet.

Gebruik de template van opgave 1.

Inleveren

Lever de code in en gebruik de naam php73-jouw-naam.php

Opgave 4

We hebben een functie die het volgende doet.

De functie telt de drie input waarden bij elkaar op.

Is de som groter of gelijk aan 10 dan wordt de return waarde 1.
Is de som kleiner dan 10 en groter dan 0 dan wordt de return waarde 0.
Is de som 0 dan wordt de return waarde -1.

Maak een functie die dit doet.

Gebruik de template van opgave 1.

Inleveren

Lever de code in en gebruik de naam php74-jouw-naam.php

Opgave 5 - array optellen

We hebben een functie die het volgende doet.

De functie telt alle waarden van een array bij elkaar op. De som alle getallen van het array wordt door de functie gereturned.

Let op het input array kan verschillende lengtes hebben.

Maak een functie die dit doet.

Je kunt een array doorlopen met een foreach-loop zoals we in les 2 hebben gehad.

Je kunt de template van opgave 1 gebruiken, maar je moet deze wel aanpassen.

Inleveren

Lever de code in en gebruik de naam php74-jouw-naam.php

Opgave 7 - voetbal

De voetbaluitslagen staan in een array.

$uitslagen = [ [1,3], [4,0], [0,0] ,[1,1],[0,2] ];

In dit lijstje heeft de club FCR (Footbal Club Royal), vijf wedstrijden gespeeld. De uitslagen waren 1-3, 4-0, 0-0, 1-1 en 0-2.

Maak een functie die met deze uitslagen het aantal punten voor FCR uitrekent.

Voor een gewonnen wedstrijd krijgt FCR 3 punten, voor gelijkspel 1 punt en voor een verloren spel 0 punten.

FCR heeft dus in dit voorbeeld 5 punten.

Maak een functie die de punten aan de hand van de uitslagen berekend.

Template

function berekenScore($uitslagen) {
  // bereken score
  
  
  return($score);
}

echo berekenScore([ [1,3], [4,0], [0,0] ,[1,1],[0,2] ]);
echo "<br>";
echo berekenScore([ [1,1], [0,0], [0,2] ,[1,1],[0,2] ]);
echo "<br>";
echo berekenScore([ [1,1], [0,0], [0,0] ,[1,1],[2,2] ]);
echo "<br>";
echo berekenScore([ [1,0], [1,0], [2,0] ,[1,1],[0,2] ]);

Inleveren

Lever de code in en gebruik de naam php77-jouw-naam.php

Opgave 8 - swap

In de vorige opgave hadden we het over de uitslag van een voetbalwedstrijd. Een uitslag 1,0 betekende dat de thuisploeg (FCR) 1 doelpunt heeft gemaakt en de uit spelende ploeg had 0 punten gescoord.

Soms staat de uitslag in de verkeerde volgorde. FCR heeft met 3-2 gewonnen en de uitslag is 2-3.

Nu moet jij een functie maken die twee getallen in een array omdraait.

Template

function swap($uitslag) {
  // swap de twee elementen van het array
  
  
  return($swap);
}

print_r( swap($uitslag([2,1])) );
echo "<br>";
print_r( swap($uitslag([2,3])) );
echo "<br>";
print_r( swap($uitslag([1,1])) );

Inleveren

Lever de code in en gebruik de naam php78-jouw-naam.php

PHP3

python reformatterCanvas.py 18661 52533 https://www.roc.ovh/books/2024/page/php3

01 De Som

We gaan verder met functies. Weet je nog wat een functie is? Een functie heeft (meestal) parameters, dit is de input en de output wordt door een functie teruggegeven aan waar de functie wordt aangeroepen.

Voorbeeld

<?php

function telErEenBijOp($getal) {
  $output = $getal + 1;
  return $output;
}

Functienaam: de functie heet telErEenBijOp/

Input: De input is $getal

Output: De output wordt in de functie berekend in regel 4. In regel 4 staat $output wordt $getal plus één.

Nu gaan we zelf fucnites maken.

De Som van drie getallen

De functie heeft drie waarden als input en returned de som van de drie getallen (dus de drie input variabelen opgeteld).

Kijk naar dit schema en kijk of je begrijpt wat er gebeurt. Telkens wordt de input getransformeerd (veranderd). De input 3,2,1 wordt bijvoorbeeld verandert in 6, de input 1,12,3 in 16 etc.

Maak een functie die dit doet.

En test met alle input waarden zoals hierboven aangegeven. Gebruik de volgende template:

function mijnFunctie($a, $b, $c) {
   // maak hier de code voor jouw functie 
   ...
   return $uitkomst;
}

echo "mijnFunctie(3,2,1): ";
echo mijnFunctie(3,2,1);
echo "<br>";
echo "mijnFunctie(1,12,3): ";
echo mijnFunctie(1,12,3);
echo "<br>";
echo "mijnFunctie(0,4,0): ";
echo mijnFunctie(0,4,0);
echo "<br>";
echo "mijnFunctie(7,0,3): ";
echo mijnFunctie(7,0,3);
echo "<br>";
echo "mijnFunctie(0,0,0): ";
echo mijnFunctie(0,0,0);

Klopt je output?

Je output moet er dus als volgt uit zien:

Opdracht

1. Maak de code en zorg dat de output klopt zoals hierboven is aangegven.
2. Voeg één extra test zelf toe, dus onder de mijnFunctie(0,0,0) gebruik de 3 gegevens van je geboortedatum als input (bijv. 1,4,2000 als je op 1 april 2000 bent geboren).
   

Inleveren (2 bestanden)

* php71-jouw-naam.php
* schermafdruk van de test waarbij alle juiste waarden worden afgedrukt zoals in het voorbeeld.

02 Optellen en de nul

De som van drie getallen, maar niet altijd

De functie krijgt drie waarden en returned de som van de drie getallen (dus de drie input variabelen opgeteld).

Er is nu een uitzondering . Zodra er een 0 in één van de input variabelen voorkomt, dan wordt de return waarde 0.

Maak een functie die dit doet en plaats testcode in je code die alle bovenstaande situaties test. Gebruik eenzelfde soort template als in de vorige opgave.

Let op dat je een return gebruikt in de functie!

De output ziet er dan als volgt uit:

Tip : gebruik voor de situatie met een 0, een conditional statement en een extra return.

Opdracht

1. Maak de code en zorg dat de output klopt zoals hierboven is aangegven.
2. Voeg één extra test zelf toe, dus onder de mijnFunctie(0,0,0) bedenk je zelf die willekeurige getallen tussen 0 en 100 die je als input geeft.
   

Inleveren (2 bestanden)

* php72-jouw-naam.php
* schermafdruk van de test waarbij alle juiste waarden worden afgedrukt zoals in het voorbeeld.

03 Tussen 0 en 10?

De som van drie getallen met voorwaarden

De functie telt de drie input waarden bij elkaar op.

Is de som groter of gelijk aan 10 dan wordt de return waarde 1.
Is de som kleiner dan 10 en groter dan 0 dan wordt de return waarde 0.
Is de som 0 dan wordt de return waarde -1.

Maak een functie die dit doet. Test alle input waarden weer net als in de vorige opgave.

Vergeet niet een return te gebruiken in de functie!

De output ziet er als volgt uit:

Opdracht

1. Maak de code en zorg dat de output klopt zoals hierboven is aangegeven.
2. Voeg één extra test zelf toe, dus onder de mijnFunctie(0,0,0) bedenk je zelf die willekeurige getallen tussen 0 en 100 die je als input geeft.
   

Inleveren (2 bestanden)

* php73-jouw-naam.php
* schermafdruk van je gehele browser waarin je laat zien dat je code werkt (zoals in het voorbeeld)

04 Array optellen

De som van alle waarden in een array

De functie telt alle waarden van een array bij elkaar op. De som alle getallen van het array wordt door de functie ge-returned.

Let op het input array kan verschillende lengtes hebben.

Maak een functie die dit doet.

Je kunt een array doorlopen met een foreach-loop.

Je kunt de template van opdracht 1 gebruiken, maar je moet deze wel aanpassen.

Waarom een return gebruiken?

We maken telkens een functie die het resultaat via een return als het ware terug geeft aan de code die de functie aanroept. Dat doen we omdat we mogelijk met de uitkomst nog meer berekeningen willen doen. Soms wordt de output van de ene functie de input van de volgende functie. Dat kan alleen als je het resultaat via een return 'terug' geeft.

Opdracht

1. Maak de code en zorg dat de output klopt zoals hierboven is aangegeven.
2. Zet je naam en de datum als commentaar bovenin je code.
   

Inleveren (2 bestanden)

* php74-jouw-naam.php

* schermafdruk van de test waarbij alle juiste 5 waarden worden afgedrukt zoals in het voorbeeld.

05 Voetbal

De voetbalclub FCR (Footbal Club Royal) heeft vijf wedstrijden gespeeld.
De uitslagen waren 1-3, 4-0, 0-0, 1-1 en 0-2.

De voetbaluitslagen staan in een array.

$uitslagen = [ [1,3], [4,0], [0,0] ,[1,1],[0,2] ];

Voor een wedstrijd krijgt FCR 0, 1 of 3 punten.

FCR heeft in bovenstaand voorbeeld 5 punten.

Maak een functie die de punten aan de hand van de uitslagen berekend.

function berekenScore($uitslagen) {
  // bereken score
  
  
  return $score;
}

echo berekenScore([ [1,3], [4,0], [0,0] ,[1,1],[0,2] ]);
echo "<br>";
echo berekenScore([ [1,1], [0,0], [0,2] ,[1,1],[0,2] ]);
echo "<br>";
echo berekenScore([ [1,1], [0,0], [0,0] ,[1,1],[2,2] ]);
echo "<br>";
echo berekenScore([ [1,0], [1,0], [2,0] ,[1,1],[0,2] ]);

Inleveren (2 bestanden)

* php75-jouw-naam.php

* schermafdruk waarin je laat zien dat je je code test met de bovenstaande test cases.

06 Swap values

De opdracht heet "Swap values", dit betekent "waarden verwisselen"

In de vorige opgave hadden we het over de uitslag van een voetbalwedstrijd. Een uitslag 1,0 betekende dat de thuisploeg (FCR) 1 doelpunt heeft gemaakt en de uit spelende ploeg had 0 punten gescoord.

Soms staat de uitslag in de verkeerde volgorde. FCR heeft met 3-2 gewonnen en de uitslag is 2-3.

Nu moet jij een functie maken die twee getallen in een array omdraait.

De input en output zijn beiden een array.

Template

function swap($uitslag) {
  // swap de twee elementen van het array
  
  
  return $swap;
}

print "<pre>";
print_r( swap([1,2]) );
echo "<br>";
print_r( swap([4,2]) );
echo "<br>";
print_r( swap([1,1]) );

Output

Je ziet als het goed is dat je een array terug krijgt waarbij de waarden zijn omgedraaid. De output ziet er dan als volgt uit:

Array
(
    [0] => 2
    [1] => 1
)

Array
(
    [0] => 2
    [1] => 4
)

Array
(
    [0] => 1
    [1] => 1
)

Inleveren

* php76-jouw-naam.php
* schermafdruk van de test waarbij alle juiste waarden worden afgedrukt

07 Druk ass. array af

Terugblik

Tot nu toe hebben we twee soorten arrays gezien.

• Eenvoudige arrays
• 
  Complexe arrays (multidimensionale arrays).

Voorbeelden

$array1=['waarde 1', 'waarde 2', 'waarde 3', 'waarde 4'];
$array2=[ ['waarde 1a', 'waarde 2a', 'waarde 3a', 'waarde 4a'],
          ['waarde 1b', 'waarde 2b', 'waarde 3b', 'waarde 4b'],
          ['waarde 1c', 'waarde 2c', 'waarde 3c', 'waarde 4c']
        ];

Herken je het complexe array?

$array2 is een array van 3 arrays en elk van die drie arrays heeft 4 elementen.

Associatieve array

In deze les gaan we kennis maken met nog een type array, het associatieve array.

Er bestaan verschillende namen voor een associatieve array:
In Python heet het een dictionairy en soms wordt ook wel de meer algemenere term "key-value array" gebruikt. Je zult aan het eind van de les wel begrijpen waarom.

associatieve array = dictionary = key-value array

Het verschil tussen een 'gewoon' (indexed) array en een associatieve array is de key (sleutel).

Snap je dit nog niet helemaal, of wil je nog meer voorbeelden zien, kijk dan deze video.

https://www.youtube.com/watch?v=5lJLecI0BTA

De key

Met een key bepaal je welke elementen je wilt zien in een array. Bijvoorbeeld:

$array=['Amsterdam','Rotterdam','Den Haag','Almere'];
echo $array[1];

Kijk naar regel 2, daar staat een [1]. Dat is de key . De key is 1 en dat betekent dat je het tweede element van het array afdrukt. In dit geval 'Rotterdam' dus. Nee niet 'Amsterdam' want een array begint te tellen bij 0.

Stel je wilt de plaats 'Almere' overschrijven? Dat kan met:

$array[3]='Utrecht';

Bij een associatieve array moet jij zelf voor elk element de key bepalen. Dat ziet er bijvoorbeeld zo uit:

$array[ 'naam' => 'Nike Chui' , 'datum' => '12 november 2020' , 'project' => 'PHP Project'];

Om nu het tweede element van dit array af te drukken gebruik je:

echo $array['datum'];

Het maakt niet uit op welke plaats de datum staat, de key is datum. De waarde die bij deze key hoort, wordt afgedrukt.

Stel je wilt de datum aanpassen dan kun je dat als volgt doen:

$array['datum']='1 december 2020';

Samengevat

Opdracht

Lees eerst de tekst/uitleg hierboven.

Neem dan deze template en vul de code aan zodat je het hele associatieve array afdrukt.

$array=[ 'naam' => 'Nike Chui' , 'datum' => '12 november 2020' , 'project' => 'PHP Project'];

De output moet er als volgt uit komen te zien (dus elke waarde op een nieuwe regel).

Nike Chui
12 november 2020
PHP Project

Let op, het gebruik van een (for) loop is bij deze opgave niet toegestaan.

Inleveren (2 bestanden)

1. php77-jouw-naam.php
2. schermafdruk met de juiste output (mag in ander font als in het voorbeeld)

08 Key and value

In de vorige opdracht werden alle waarden afgedrukt. We kunnen ook de keys en de waarden afdrukken met een loop. Dat is vooral handig als we niet weten hoe groot het array. We maken een loop en drukken gewoon het hele associatieve array af.

We gebruiken hetzelfde array, maar de output moet anders worden, namelijk:

key=naam, value=Nike Chui
key=datum, value=12 november 2020
key=project, value=PHP Project

Zoek zelf op hoe je dat doet, bijvoorbeeld op: https://www.w3schools.com/php/php_arrays_associative.asp

Gebruik de foreach loop om alle keys en values af te drukken. De output moet er precies zo uitzien als in deze opdracht staat (let dus op de komma's en de regels).

Inleveren (2 bestanden)

* php78-jouw-naam.php

* schermafdruk van de output

09 Maak ass. array

Maak zelf een associatieve array met de volgende 4 elementen:

voornaam, achternaam, geboortedatum, woonplaats

Maak het array door gebruik te maken van [ en ].

Gebruik als waarden je eigen voornaam/achternaam/geboortedatum/woonplaats.

Druk alle waarden uit dit associatieve array af (hoe, met of zonder loop, dat mag je zelf weten).

Inleveren (2 bestanden)

* php79-jouw-naam.php.

* schermafdruk van de output in de browser.

10 array from database

Wat je in de praktijk vaak tegenkomt zijn arrays van associatieve arrays. Als je (later) gegevens uit de database haalt dan krijg je ook vaak een array van associatieve arrays terug. Hoe ziet dat eruit?

$uitslagen=[
[ 'thuis' => 'FC Twente', 'uit' => 'FC Utrecht', 'uitslag' => [0,1] ],
[ 'thuis' => 'FC Twente', 'uit' => 'FC Volendam', 'uitslag' => [4,2] ],
[ 'thuis' => 'FC Emmen', 'uit' => 'Feyenoord', 'uitslag' => [1,3] ],
[ 'thuis' => 'Vitesse', 'uit' => 'FC Twente', 'uitslag' => [0,1] ],
];

Elke regel is eigenlijk een associatieve array. Er staan 4 associatieve arrays in het array $uitslagen.

Probeer maar eens:

echo "<pre>";
print_r($uitslagen[0]);
echo "</pre>";

Met print_r() kun je een array afdrukken.

Je kunt op deze manier dus $uitslagen[0], $uitslagen[1], $uitslagen[2] en $uitslagen[3] afdrukken.

Stel je wilt de thuisploeg afdrukken van de tweede uitslag. Hoe gaat dat?

echo $uitslagen[1]['thuis'];

En... stel je wilt weten hoeveel de thuisploeg van de derde wedstrijd heeft gescoord.

echo $uitslagen[3]['uitslag'][0]

Je begint dus met de vierde regel (3) dan neem je de 'uitslag' en van de uitslag neem je dan het eerste element (0).

OK, nu jij. Gebruik het array $uitslagen en druk de volgende gegevens af:

Het aantal doelpunten dat FC Twente heeft gescoord.

De output moet er als volg uit zien.

FC Twente scoort 0 punten
FC Twente scoort 4 punten
FC Twente scoort 1 punten

De waarden 0, 4 en 1 moet je uit het (gegeven) associatieve array halen.

Inleveren (2 bestanden)

* php84-jouw-naam.php
* schermafdruk van je gehele browser en laat daarbij de output zien

Bonusvraag

Deze vraag levert (2) bonuspunten op

Je weet nu waar precies de uitslag van 'FC Twente' staat. Stel dat je dat niet weet en je moet regel voor regel eerst kijken of 'FC Twente' heeft gespeeld en zo ja of het de thuis- of uitploeg was. Hoe zou je code er dan uit zien?

Tip: je moet hierbij een loop gebruiken!

10 array from database versie b

Dit is een extra/alternatieve opgave. Alleen maken indien je te weinig punten hebt gehaald met de andere opdrachten.

Wat je in de praktijk vaak tegenkomt zijn arrays van assioicative arrays. Als je (later) gegevens uit de database haalt dan krijg je ook vaak een array van assiociative arrays terug. Hoe ziet dat eruit?

$uitslagen=[
[ 'thuis' => 'FC Twente', 'uit' => 'FC Utrecht', 'uitslag' => [3,1] ],
[ 'thuis' => 'FC Twente', 'uit' => 'FC Volendam', 'uitslag' => [4,4] ],
[ 'thuis' => 'Vitesse', 'uit' => 'Feyenoord', 'uitslag' => [0,2] ],
[ 'thuis' => 'FC Emmen', 'uit' => 'Feyenoord', 'uitslag' => [0,3] ],
[ 'thuis' => 'Vitesse', 'uit' => 'FC Twente', 'uitslag' => [1,0] ],
[ 'thuis' => 'Feyenoord', 'uit' => 'FC Twente', 'uitslag' => [1,1] ],
];

Elke regel is eigenlijk een assioicative array. Er staan 6 assiociative arrays in het array $uitlsagen.

Probeer maar eens:

echo "<pre>";
print_r($uitslagen[0]);

Met print_r() kun je een array afdrukken.

Je kunt op deze manier dus $uitslagen[0], $uitslagen[1], $uitslagen[2] en $uitslagen[3] afdrukken.

Stel je wilt de thuisploeg afdrukken van de tweede uitslag. Hoe gaat dat?

echo $uitslagen[1]['thuis'];

En Stel je wilt weten hoeveel de thuisploeg van de derde wedstrijd heeft gescoord.

echo $uitslagen[3]['uitslag'][0]

Je begint dus met de vierde regel (3) dan neem je de 'uitslag' en van de uitslag neem je dan het eerste element (0).

OK, nu jij. Gebruik het array $uitslagen en druk de volgende gegevens af:

Het aantal doelpunten dat FC Twente heeft gescoord.

De output moet er als volg uit zien.

FC Twente scoort 3 punten
FC Twente scoort 4 punten
FC Twente scoort 0 punten
FC Twente scoort 1 punten

De waarden 3, 4, 0 en 1 moet je uit het assiociative array halen.

Inleveren

1. Lever de code in en gebruik de naam php84-jouw-naam.php
2. Lever een schermafdruk van je gehele browser en laat daarbij de output zien, gebruik de naam php84-jouw-naam.png

11 Thuisploeg

Gebruik het associatieve array (van de vorige opdracht);

$uitslagen=[
[ 'thuis' => 'FC Twente', 'uit' => 'FC Utrecht', 'uitslag' => [0,2] ],
[ 'thuis' => 'FC Twente', 'uit' => 'FC Volendam', 'uitslag' => [5,1] ],
[ 'thuis' => 'FC Emmen', 'uit' => 'Feyenoord', 'uitslag' => [0,1] ],
[ 'thuis' => 'Vitesse', 'uit' => 'FC Twente', 'uitslag' => [0,0] ],
];

Je gaat nu in een loop de punten van de thuisploeg uitrekenen.

Je krijgt 3 punten als je de wedstrijd wint, 1 bij een gelijkspel en 0 als je de wedstrijd verliest.

In de eerste wedstrijd heeft de thuisploeg 0 punten gescoord, in de tweede wedstrijd 3, in de derde wedstrijd 0 en in de vierde wedstrijd 1.

De output van jouw code ziet er als volgt uit:

Wedstrijd 1: de thuisploeg krijgt 0 punten
Wedstrijd 2: de thuisploeg krijgt 3 punten
Wedstrijd 3: de thuisploeg krijgt 0 punten
Wedstrijd 4: de thuisploeg krijgt 1 punten

Lastig? Probeer dit in stapjes te doen:

Stap 1, maak eerst een loop waarin je de uitslagen afdrukt (gebruik print_r).

Stap 2, druk nu de uitslagen niet af met print_r maar druk de afzonderlijke scores af, dus 0 1 en dan 3 1 enzovoorts.

Stap 3 gebruik nu een if, en test of het eerste getal groter is dan het tweede. Als dat zo is dan druk je 3 af omdat de thuisploeg dan 3 punten krijgt.

Stap 4 maak nog een if, en test of het eerste en tweede getal gelijk zijn. Als dat zo is dan druk je 1 af.

Stap 5 maak nog een if, en test of het tweede getal groter is dan het eerste. als dat zo is dan druk je 0 af.

Stap 6 je bent bijna klaar je moet nu alleen nog text om de uitslag heen printen. Dus druk nu niet 0 af, maar 'de thuisploeg krijgt 0 punten.

Stap 7, nu nog het eerste gedeelte. Maak een variabele $teller en zet de waarde op 1. Druk af Wedstrijd $teller en hoog daarna de $teller op met 1 ($teller = $teller + 1)

Inleveren (2 bestanden)

* php85-jouw-naam.php

* schermafdruk van je gehele browser en laat daarbij de output zien, gebruik de naam php85-jouw-naam.png

12 Eindopdracht Boeken *

Opdracht

Je krijgt een associatief array en daarmee ga je het volgende overzicht maken.

De rode lijn is de cursor, als je met de muis over de tabel gaat dan wordt de regel die waar je muis over heen gaat een andere kleur. Dat geldt natuurlijk niet voor de titel regel van de tabel.

Het array waar je mee gaat werken is:

$boeken = [
    "Harry Potter en de Steen der Wijzen" => ["auteur" => "j.k. rowling", "jaar" => 1997],
    "De Hobbit" => ["auteur" => "J.r.r. Tolkien", "jaar" => 1937],
    "Het spel der tronen" => ["auteur" => "George R.R. martin", "jaar" => 1996],
    "1984" => ["auteur" => "George Orwell", "jaar" => 1949],
    "Moord op de Oriënt-Expres" => ["auteur" => "Agatha Christie", "jaar" => 1934],
    "Moby Dick" => ["auteur" => "herman melville", "jaar" => 1851]
];

Deel 1 van de opdracht, HTML, PHP en CSS (10 punten)

• Voeg zelf twee boeken toe aan dit array!
• Voeg de CSS-styling toe aan HTML (inline).

Deel 2 van de opdracht, functie (10 punten)

Zoals je ziet staan niet alle namen van de auteurs goed in de data $boeken.

Zo staat er:

j.k. rowling in plaats van J.K. Rowling

J.r.r. Tolkien in plaats van J.R.R. Tolkien

Maak een functie genaamd:

formatName($naam)

deze functie herstelt de naam zodat de hoofdletters goed komen te staan.

Dus elk woord in de $naam en elke letter die wordt gevolgd door een punt (.) moet een hoofdletter worden.

Met behulp van de functie worden dan alle namen zo afgedrukt als in het voorbeeld.

Je mag ChatGPT gebruiken maar zorg er wel voor dat je de code kan uitleggen. Het kan zijn dat docenten hier om vragen!

Inleveren

1. php/html bestand met inline css.

PHP4 OOP

A - Maak in PHP een databaseverbinding

Maak een nieuw .php bestand met de volgende naam:

connect-[jouwnaam].php - dus bijvoorbeeld connect-hans.php

Maak in dit php-bestand een verbinding met een database, genaamd ‘games’. Gebruik hiervoor de standaard gebruiker in xampp. Geef het verbindingsobject de naam ‘$conn1’.

Maak daarna een tweede verbinding met een tweede database, genaamd ‘artiesten’. Gebruik hiervoor een ander gebruikersaccount. Deze heeft als gebruikersnaam ‘roc-student’ en als wachtwoord ‘welkom123’. Geef het verbindingsobject de naam ‘$conn2’.

Inleveren:

connect-[jouwnaam].php

Tip: Je gaat vaker een verbindingen met databases maken, sla dit soort bestanden op een voor jou logische plek op zodat je ze later snel terug kunt vinden als naslagwerk.

B1 - insert game

Open PhpMyAdmin in je browser en maak een nieuwe database aan met de naam ‘winkel’. Importeer het volgende bestand games.sql

Maak een nieuw .php bestand met de volgende naam:
nieuw-spel1-[jouwnaam].php
(vervang [jouwnaam] met je eigen naam)

Maak in dit bestand een database verbindingsobject met de naam ‘$conn’.

Maak in dit bestand een variabele $sql, waarin je als string een query maakt waarmee je de volgende game toevoegt aan de tabel ‘games’ in de database ‘winkels’:

Titel:           F1 2022
Uitgever:    EA Sports
Platform:    Playstation 5
Voorraad:   28
Prijs:         69,-

Zorg met een exec() er voor dat de query wordt uitgevoerd en de gegevens in de database worden toegevoegd.

Let op de tabel 'games' heet in jouw versie van de database niet meer games. Bestudeer de database en bedenk zelf wat de nieuwe naam is van deze tabel.

Tip1 : Het id van de tabel is auto-increment. Deze hoef je dus geen waarde mee te geven.

Tip2 : Test de query eerst in PhpMyAdmin om te kijken of deze werkt. Dit kan in PhpMyAdmin door links op de database ‘winkel’ te klikken en daarna de tab ‘SQL’ te selecteren.

Inleveren

Het geteste en werkende PHP-bestand dat je hebt gemaakt.

B2 - insert game deel 2

Maak een nieuw .php bestand met de volgende naam:
nieuw-spel2-[jouwnaam].php
(vervang [jouwnaam] met je eigen naam)

Voeg net als in opdracht 2a een nieuw spel toe in de tabel ‘games’. De gegevens van dit spel stop je eerst in variabelen. Deze variabelen gebruik je vervolgens om de query mee te maken.

Bijvoorbeeld:

Voeg op deze manier een zelf verzonnen game toe met titel, uitgever, platform, voorraad en prijs.

Inleveren:

• nieuw-spel2-[jouwnaam].php
  (vervang [jouwnaam] met je eigen naam)
• Een screenshot van je browser met daarin PHPMyAdmin en de weergave van je databasetabel met het nieuwe spel

B3 - Insert met form

We gaan nog een stapje verder. In plaats van de spellen die je in de database wilt toevoegen in het PHP-bestand te zetten, ga je nu een formulier maken waarmee een bezoeker van de pagina een game kan invullen om toe te voeren.

Maak twee nieuwe .php bestanden met de volgende namen:
nieuw-spel3-[jouwnaam].php
voeg-toe3-[jouwnaam].php
(vervang [jouwnaam] met je eigen naam)

Inleveren:

• De twee in deze opdracht gemaakte .php-bestanden
• Een screendump van je browser met het formulier

C1 - Ophalen uit database deel 1

• In deze opdracht halen we alle gametitels uit de database en tonen deze in de browser in een list (<ul>).
• Gebruik hiervoor de tabel producten van de database webshop die je eerder hebt gebruikt.
• Maak nieuwe .php bestanden met de volgende namen:
  opdracht-c1-[jouwnaam].php
  database-connectie-[jouwnaam].php
  (vervang [jouwnaam] met je eigen naam)
• Zorg voor volledige en nette html in het opdracht-c1-[jouwnaam].php bestand (<html>,<head>,<body>, etc.)
• het bestand met de database-connectie gebruik je door middel van een ‘require’
• Het eindresultaat ziet er ongeveer uit als onderstaande plaatje:
  
  

Voor een bonuspunt:

Zet achter idere game-titel, het platform tussen haakjes. De output op het scherm ziet er dan uit als onderstaand plaatje:

Inleveren:

• opdracht-c1-[jouwnaam].php
• database-connectie-[jouwnaam].php
• Een screenshot van je gehele browser met daarin het resultaat op je scherm en de url in de adresbalk.
  (vervang [jouwnaam] met je eigen naam)

C2 - Ophalen uit database deel 2

Deze opdracht is een vervolg op de vorige opdracht.

• Maak nieuw .php bestand met de volgende naam:
  opdracht-c1-[jouwnaam].php
  (vervang [jouwnaam] met je eigen naam)
• Include hierin het bestand database-connectie-[jouwnaam].php uit de vorige opdracht (met een 'require').
• Haal alle gegevens van de tabel 'klanten' op vanuit de database
• Maak hier een nette html-tabel van met tabelheaders en toon deze op het browserscherm met de kolommen:
  • voornaam
  • achternaam
  • woonplaats
• De output op je scherm moet er ongeveer uitzien als onderstaand plaatje:

Tip: Doe het stap voor stap:

• Maak eerst een html-tabel met één rij met vaste testnamen (dus nog niet uit de database).
• Bepaal daarna welk gedeelte van de tabel herhaald moet worden en dus in de foreach-loop moet komen te staan.
• Vervang daarna de vaste waarden met de gegevens uit de database

Inleveren:

• opdracht-c2-[jouwnaam].php
• database-connectie-[jouwnaam].php
• Een screenshot van je browser met daarin het resultaat op je scherm en de url in de adresbalk.
  (vervang [jouwnaam] met je eigen naam)

D1 - Voorbereiding

Opdracht a

In deze opdracht ga je vooral voorbereidend werk doen voor het kunnen maken van de laatste twee opdrachten. Je gaat hierin verder met de tabel, die je in opdracht C2 (SELECT) hebt gemaakt.

Voeg hieraan twee kolommen toe. In deze kolommen staan per rij twee links.
• Een link voor het verwijderen van het record (van de betreffende rij)
• Een link voor het updaten van het record (van de betreffende rij)

De bedoeling is dat in de link een argument wordt meegegeven die je kunt gebruiken voor het maken van een query. Als je een query wilt maken voor het verwijderen van een bepaald record, geef je meestal de primary key mee. Dus als je bijvoorbeeld het record van ‘Jan’ wilt verwijderen en Jan heeft als primary key: ‘id = 8’, dan zal de link er uitzien als iets van:

https://studentnummer.jouw.website/verwijder.php?id=8

De waarde van id kun je in je script (verwijder.php) dan weer gebruiken als een $_GET variabele.

! in deze opdracht maak je alleen de links in de tabel. Het verwijderen / updaten, hoeft dus nog niet te werken!

Inleveren:

• opdracht-D1-[jouwnaam].php
• Een screenshot van je browser met daarin het resultaat op je scherm en de url in de adresbalk.
  (vervang [jouwnaam] met je eigen naam)

D2 - Verwijderen van een record

Zorg ervoor dat als je in je browser op een 'verwijder'-link klikt, het betreffende record wordt verwijderd uit de database en dat de tabel (na het verwijderen) in zijn geheel weer wordt getoond. Het verwijderde record is uiteraard verdwenen op je scherm.

Bedenk zelf hoe je dit doet en of je alles verwerkt in één script, of dat je meerdere php-bestanden aanmaakt. Beide is mogelijk en goed.

Inleveren:

• opdracht-D2-[jouwnaam].php
• database-connectie-[jouwnaam].php
• eventueel andere .php bestanden die je gebruikt hebt. Zorg ervoor dat jouw naam in de bestandsnaam staat. Bijvoorbeeld: verwijder-[jouwnaam].php
• Een screenshot van je browser met daarin het resultaat op je scherm en de url in de adresbalk.
  (vervang [jouwnaam] met je eigen naam)

D3 - Updaten van een record

Zorg ervoor dat als je in je browser op een 'move'-link klikt, het betreffende record wordt geüpdate in de database en dat de tabel (na het updaten) in zijn geheel weer wordt getoond. Het geupdate record wordt uiteraard aangepast op je scherm getoond.

Wat moet er worden geüpdatet?

• Als de woonplaats van klant niet 'Amstelveen' is, update je de woonplaats van die klant naar 'Amstelveen'.
• Als de woonplaats van klant 'Amstelveen' is, update je de woonplaats van die klant naar een zelf verzonnen woonplaats in de provincie Gelderland (zoek er maar een op).

Bedenk zelf hoe je dit doet en of je alles verwerkt in één script, of dat je meerdere php-bestanden aanmaakt. Beide is mogelijk en goed.

Inleveren:

• opdracht-D3-[jouwnaam].php
• database-connectie-[jouwnaam].php
• eventueel andere .php bestanden die je gebruikt hebt. Zorg ervoor dat jouw naam in de bestandsnaam staat. Bijvoorbeeld: verwijder-[jouwnaam].php
• Een screenshot van je browser met daarin het resultaat op je scherm en de url in de adresbalk.
  (vervang [jouwnaam] met je eigen naam)

Schrijf een reflectie

Het is gelukt! Je Crudchallenge is ingeleverd en goed gekeurd. In deze challenge zijn veel onderdelen die je hebt geleerd tijdens de verschillende PHP-modules samengekomen. Veel technieken die je hebt gebruikt in de challenge waren een herhaling voor je. Maar bij elke opdracht kom je ook weer nieuwe uitdagingen tegen.

Om stil te staan bij wat je van deze challenge hebt geleerd, ga je (minimaal) twee reflecties hierop maken en inleveren.

Bij een reflectie kijk je terug op wat je hebt gedaan en bedenk je wat er goed is gegaan. Of wat beter had gekund. Dit om bij een volgende keer dat je iets vergelijkbaars tegenkomt te bedenken wat je hebt geleerd. Wat je wéér zo zou doen, of juist anders.

Voorbeeld van een geval waar een reflectie over gemaakt zou kunnen worden:
Je hebt voor het maken van de tabel een while-loop gebruikt. Maar dat vond je lastig en kwam er na het vragen van hulp aan een collega-student achter dat je beter een foreach-loop kon gebruiken.

Een reflectie (stuk tekst) hoeft niet heel uitgebreid te zijn. Beschrijf beknopt, maar wel in duidelijk leesbare zinnen waar het over gaat.

Download het reflectiesjabloon en vul jouw reflecties in. Maak van het bestand een pdf-bestand met als naam:

reflecties-<jouw-naam>.pdf

PHP5 PDO

A - Maak in PHP een databaseverbinding

Maak een nieuw .php bestand met de volgende naam:

connect-[jouwnaam].php - dus bijvoorbeeld connect-hans.php

Maak in dit php-bestand een verbinding met een database, genaamd ‘games’. Gebruik hiervoor de standaard gebruiker in xampp. Geef het verbindingsobject de naam ‘$conn1’.

Maak daarna een tweede verbinding met een tweede database, genaamd ‘artiesten’. Gebruik hiervoor een ander gebruikersaccount. Deze heeft als gebruikersnaam ‘roc-student’ en als wachtwoord ‘welkom123’. Geef het verbindingsobject de naam ‘$conn2’.

Inleveren:

connect-[jouwnaam].php

Tip: Je gaat vaker een verbindingen met databases maken, sla dit soort bestanden op een voor jou logische plek op zodat je ze later snel terug kunt vinden als naslagwerk.

B1 - insert game

Open PhpMyAdmin in je browser en maak een nieuwe database aan met de naam ‘winkel’. Importeer het volgende bestand games.sql

Maak een nieuw .php bestand met de volgende naam:
nieuw-spel1-[jouwnaam].php
(vervang [jouwnaam] met je eigen naam)

Maak in dit bestand een database verbindingsobject met de naam ‘$conn’.

Maak in dit bestand een variabele $sql, waarin je als string een query maakt waarmee je de volgende game toevoegt aan de tabel ‘games’ in de database ‘winkels’:

Titel:           F1 2022
Uitgever:    EA Sports
Platform:    Playstation 5
Voorraad:   28
Prijs:         69,-

Zorg met een exec() er voor dat de query wordt uitgevoerd en de gegevens in de database worden toegevoegd.

Let op de tabel 'games' heet in jouw versie van de database niet meer games. Bestudeer de database en bedenk zelf wat de nieuwe naam is van deze tabel.

Tip1 : Het id van de tabel is auto-increment. Deze hoef je dus geen waarde mee te geven.

Tip2 : Test de query eerst in PhpMyAdmin om te kijken of deze werkt. Dit kan in PhpMyAdmin door links op de database ‘winkel’ te klikken en daarna de tab ‘SQL’ te selecteren.

Inleveren

Het geteste en werkende PHP-bestand dat je hebt gemaakt.

B2 - insert game deel 2

Maak een nieuw .php bestand met de volgende naam:
nieuw-spel2-[jouwnaam].php
(vervang [jouwnaam] met je eigen naam)

Voeg net als in opdracht 2a een nieuw spel toe in de tabel ‘games’. De gegevens van dit spel stop je eerst in variabelen. Deze variabelen gebruik je vervolgens om de query mee te maken.

Bijvoorbeeld:

Voeg op deze manier een zelf verzonnen game toe met titel, uitgever, platform, voorraad en prijs.

Inleveren:

• nieuw-spel2-[jouwnaam].php
  (vervang [jouwnaam] met je eigen naam)
• Een screenshot van je browser met daarin PHPMyAdmin en de weergave van je databasetabel met het nieuwe spel

B3 - Insert met form

We gaan nog een stapje verder. In plaats van de spellen die je in de database wilt toevoegen in het PHP-bestand te zetten, ga je nu een formulier maken waarmee een bezoeker van de pagina een game kan invullen om toe te voeren.

Maak twee nieuwe .php bestanden met de volgende namen:
nieuw-spel3-[jouwnaam].php
voeg-toe3-[jouwnaam].php
(vervang [jouwnaam] met je eigen naam)

Inleveren:

• De twee in deze opdracht gemaakte .php-bestanden
• Een screendump van je browser met het formulier

C1 - Ophalen uit database deel 1

• In deze opdracht halen we alle gametitels uit de database en tonen deze in de browser in een list (<ul>).
• Gebruik hiervoor de tabel producten van de database webshop die je eerder hebt gebruikt.
• Maak nieuwe .php bestanden met de volgende namen:
  opdracht-c1-[jouwnaam].php
  database-connectie-[jouwnaam].php
  (vervang [jouwnaam] met je eigen naam)
• Zorg voor volledige en nette html in het opdracht-c1-[jouwnaam].php bestand (<html>,<head>,<body>, etc.)
• het bestand met de database-connectie gebruik je door middel van een ‘require’
• Het eindresultaat ziet er ongeveer uit als onderstaande plaatje:
  
  

Voor een bonuspunt:

Zet achter idere game-titel, het platform tussen haakjes. De output op het scherm ziet er dan uit als onderstaand plaatje:

Inleveren:

• opdracht-c1-[jouwnaam].php
• database-connectie-[jouwnaam].php
• Een screenshot van je gehele browser met daarin het resultaat op je scherm en de url in de adresbalk.
  (vervang [jouwnaam] met je eigen naam)

C2 - Ophalen uit database deel 2

Deze opdracht is een vervolg op de vorige opdracht.

• Maak nieuw .php bestand met de volgende naam:
  opdracht-c1-[jouwnaam].php
  (vervang [jouwnaam] met je eigen naam)
• Include hierin het bestand database-connectie-[jouwnaam].php uit de vorige opdracht (met een 'require').
• Haal alle gegevens van de tabel 'klanten' op vanuit de database
• Maak hier een nette html-tabel van met tabelheaders en toon deze op het browserscherm met de kolommen:
  • voornaam
  • achternaam
  • woonplaats
• De output op je scherm moet er ongeveer uitzien als onderstaand plaatje:

Tip: Doe het stap voor stap:

• Maak eerst een html-tabel met één rij met vaste testnamen (dus nog niet uit de database).
• Bepaal daarna welk gedeelte van de tabel herhaald moet worden en dus in de foreach-loop moet komen te staan.
• Vervang daarna de vaste waarden met de gegevens uit de database

Inleveren:

• opdracht-c2-[jouwnaam].php
• database-connectie-[jouwnaam].php
• Een screenshot van je browser met daarin het resultaat op je scherm en de url in de adresbalk.
  (vervang [jouwnaam] met je eigen naam)

D1 - Voorbereiding

Opdracht a

In deze opdracht ga je vooral voorbereidend werk doen voor het kunnen maken van de laatste twee opdrachten. Je gaat hierin verder met de tabel, die je in opdracht C2 (SELECT) hebt gemaakt.

Voeg hieraan twee kolommen toe. In deze kolommen staan per rij twee links.
• Een link voor het verwijderen van het record (van de betreffende rij)
• Een link voor het updaten van het record (van de betreffende rij)

De bedoeling is dat in de link een argument wordt meegegeven die je kunt gebruiken voor het maken van een query. Als je een query wilt maken voor het verwijderen van een bepaald record, geef je meestal de primary key mee. Dus als je bijvoorbeeld het record van ‘Jan’ wilt verwijderen en Jan heeft als primary key: ‘id = 8’, dan zal de link er uitzien als iets van:

https://studentnummer.jouw.website/verwijder.php?id=8

De waarde van id kun je in je script (verwijder.php) dan weer gebruiken als een $_GET variabele.

! in deze opdracht maak je alleen de links in de tabel. Het verwijderen / updaten, hoeft dus nog niet te werken!

Inleveren:

• opdracht-D1-[jouwnaam].php
• Een screenshot van je browser met daarin het resultaat op je scherm en de url in de adresbalk.
  (vervang [jouwnaam] met je eigen naam)

D2 - Verwijderen van een record

Zorg ervoor dat als je in je browser op een 'verwijder'-link klikt, het betreffende record wordt verwijderd uit de database en dat de tabel (na het verwijderen) in zijn geheel weer wordt getoond. Het verwijderde record is uiteraard verdwenen op je scherm.

Bedenk zelf hoe je dit doet en of je alles verwerkt in één script, of dat je meerdere php-bestanden aanmaakt. Beide is mogelijk en goed.

Inleveren:

• opdracht-D2-[jouwnaam].php
• database-connectie-[jouwnaam].php
• eventueel andere .php bestanden die je gebruikt hebt. Zorg ervoor dat jouw naam in de bestandsnaam staat. Bijvoorbeeld: verwijder-[jouwnaam].php
• Een screenshot van je browser met daarin het resultaat op je scherm en de url in de adresbalk.
  (vervang [jouwnaam] met je eigen naam)

D3 - Updaten van een record

Zorg ervoor dat als je in je browser op een 'move'-link klikt, het betreffende record wordt geüpdate in de database en dat de tabel (na het updaten) in zijn geheel weer wordt getoond. Het geupdate record wordt uiteraard aangepast op je scherm getoond.

Wat moet er worden geüpdatet?

• Als de woonplaats van klant niet 'Amstelveen' is, update je de woonplaats van die klant naar 'Amstelveen'.
• Als de woonplaats van klant 'Amstelveen' is, update je de woonplaats van die klant naar een zelf verzonnen woonplaats in de provincie Gelderland (zoek er maar een op).

Bedenk zelf hoe je dit doet en of je alles verwerkt in één script, of dat je meerdere php-bestanden aanmaakt. Beide is mogelijk en goed.

Inleveren:

• opdracht-D3-[jouwnaam].php
• database-connectie-[jouwnaam].php
• eventueel andere .php bestanden die je gebruikt hebt. Zorg ervoor dat jouw naam in de bestandsnaam staat. Bijvoorbeeld: verwijder-[jouwnaam].php
• Een screenshot van je browser met daarin het resultaat op je scherm en de url in de adresbalk.
  (vervang [jouwnaam] met je eigen naam)

Schrijf een reflectie

Het is gelukt! Je Crudchallenge is ingeleverd en goed gekeurd. In deze challenge zijn veel onderdelen die je hebt geleerd tijdens de verschillende PHP-modules samengekomen. Veel technieken die je hebt gebruikt in de challenge waren een herhaling voor je. Maar bij elke opdracht kom je ook weer nieuwe uitdagingen tegen.

Om stil te staan bij wat je van deze challenge hebt geleerd, ga je (minimaal) twee reflecties hierop maken en inleveren.

Bij een reflectie kijk je terug op wat je hebt gedaan en bedenk je wat er goed is gegaan. Of wat beter had gekund. Dit om bij een volgende keer dat je iets vergelijkbaars tegenkomt te bedenken wat je hebt geleerd. Wat je wéér zo zou doen, of juist anders.

Voorbeeld van een geval waar een reflectie over gemaakt zou kunnen worden:
Je hebt voor het maken van de tabel een while-loop gebruikt. Maar dat vond je lastig en kwam er na het vragen van hulp aan een collega-student achter dat je beter een foreach-loop kon gebruiken.

Een reflectie (stuk tekst) hoeft niet heel uitgebreid te zijn. Beschrijf beknopt, maar wel in duidelijk leesbare zinnen waar het over gaat.

Download het reflectiesjabloon en vul jouw reflecties in. Maak van het bestand een pdf-bestand met als naam:

reflecties-<jouw-naam>.pdf

PHP6 Refresh

Opgave 1, $_GET

In deze opgave kijken we terug hoe het ook alweer zat met $_GET. Deze variabele wordt gevuld als je een form invult met de method=GET.

<form action="/action_page.php" method="get">
    <input type="text" id="name" name="name">

Maar deze code zorgt ervoor dat de parameters via de URL (link, web adres) worden doorgegeven. Stel in dit voorbeeld voer je de naam Ties in. Dan zie je de URL:

?name=Ties

Maak een PHP pagina die jouw naam van de URL leest en deze op het scherm toont. Je hoeft geen form te maken.

Bijvoorbeeld, de URL is:

localhost/phprefresh/opgave1.php?naam=Prince

Op het scherm verschijnt nu:

Welkom Prince!

(let op het uitroepteken achter de naam).

Inleveren

• de php-code in php-01-jouwnaam.php

Opgave 2, forms

We hebben in de vorige opgave met de $_GET gewerkt. Nu gaan we met een form de $_GET variabele vullen.

Je mag ook method="post" gebruiken, maar dat is lastige om te zien wat er dan gebeurt omdat de form variabelen niet via de URL worden verstuurd.

Maak een eenvoudig HTML form en vraag de gebruiker twee getallen in te voeren. Dat mag/kan in één veld, maar dat mogen ook in twee aparte velden.

Vermenigvuldig (keer-som) deze twee getallen.

Toon het resultaat op het scherm.

Bijvoorbeeld, stel je hebt 3 en 5 ingevuld dan toon je:

3 x 5 = 15

Inleveren

• php-02-jouwnaam.php - met je PHP code (form en berekening).
• php-02-jouwnaam.png - met je schermafdruk van de hele browser waarin je het resultaat laat zien.

Opgave 3, loops

Hoe zat het ook alweer met al die loops. In deze opgave gaan we twee loops maken een for-loop en een while-loop .

Zoek eerst even hoe het ook weer zat met die loops; hoe werken die ook alweer?

Maak twee loops. Maak een while loop en een for loop en druk de getallen 1 tot en met 20 af.

De output moet er als volgt uit zien:

Zorg ervoor dat de output er precies zo uitziet (compleet met de teksten boven de getallen)!

De getallen zijn dus rood en bold en tussen de getallen staat een spatie-streepje-spatie en achter het laatste getal staat niets meer.

Rood en bold ? Weet je niet meer hoe dat gaat. Zoek naar de juiste CSS code!

Inleveren

• php-03-jouwnaam.php - met je PHP code.
• php-03-jouwnaam.png - schermafdruk van jouw gehele browser met de juiste output.

Opgave 4, html refresh

Voor deze opgave moet je zelf één en ander opzoeken op internet. Dit hebben we nog niet eerder gehad, maar is wel iets dat soms erg handig kan zijn. We gaan een tijd afdrukken die automatisch loopt.

Zoek eerst uit hoe je de huidige tijd (in PHP) in uren en minuten op het scherm kan afdrukken.

Als je de tijd op het scherm laat zien dan veranderd deze alleen als je de pagina refreshed, probeer maar!

Er bestaat een zogenaamde HTML meta-tag die er voor zorgt dat je browser de pagina elke x seconden ververst. Zoek uit hoe dit werkt en laat de pagina die de tijd laat zien zichzelf elke 10 seconden verversen.

Controleer of jouw pagina zichzelf elke 10 seconde ververst.

Dit kan handig zijn als je een CRUD hebt gemaakt en je wilt dat de (Read) pagina zich elke paar minute ververst.

Opmerking: Om een tijd op het scherm te tonen kun je beter JavaScript gebruiken, maar we hebben het hier in PHP gedaan om de refresh te demonstreren.

Inleveren

• de php code in php-04-jouwnaam.php

Opgave 5, Euro

Maak een functie die als input een getal krijgt en dat als een 'net' Euro getal terug geeft. In onderstaand schema staat wat de functie moet doen.

Bij elk bedrag wordt dus afgerond op twee decimalen (centen) en er wordt een euro getal afgedrukt voor het bedrag.

Maak de functie netEuro en test (tenmiste) met de waarden zoals die hierboven zijn gegeven.

Inleveren

• php-05-jouwnaam.php - met je PHP code.
• php-05-jouwnaam.png - schermafdruk van jouw gehele browser met de juiste output.

Opgave 6, onvoldoendes

En maak daarna een functie onvoldoendes($PHPCijfers); De functie krijgt als input een array met getallen en als output wordt een array gegeven waarin alleen de onvoldoendes staan.

Voorbeeld:

$PHPCijfers=[4,5,4,5,6,6,5,8,7,6,4,8];

Dus de output van de functie wordt:

4,5,4,5,5,4

Omdat de output een array is kun je die afdrukken met print_r(). Door een <pre> ervoor te gebruiken is de output beter leesbaar.

Maak de functie en test met tenminste de drie gegeven test cases.

Je code ziet er dus ongeveer zo uit:

function onvoldoendes($array) {
  ...
  ...
  ...
}

echo "<pre>";
print_r( onvoldoendes([6,6,7]) );
print_r( onvoldoendes([6,3,6,7]) );
print_r( onvoldoendes($PHPCijfers) );

Let op de haakjes. Neem bijvoorbeeld regel 8.
De buitenste () horen bij de print_r() functie. De () na de onvoldoendes horen bij onze functie onvoldoendes() en de [] haken geven aan dat we een array gebruiken.

Probeer dit begrijpen want dit komt terug in frameworks (Yii en Laravel).

Op de plaats van de puntjes maak je jouw functie af.

Inleveren

• de php code in php-06-jouwnaam.php
• screenshot van jouw browser die de output toont

Opgave 7, Goedemorgen

Maak een PHP programmaatje dat afhankelijk van de tijd een boodschap afdrukt.

• Het uur is kleiner dan 12: "Goedemorgen".
• Het uur is 12 uur of groter én kleiner dan 18: "Goedemiddag".
• Het uur is groter dan 18: "Goedenavond".

Er is een PHP een functie om de huidige tijd te bepalen. Je hoeft alleen maar te kijken naar het uur.Het maakt immers niet uit of het 11:00 of 11:59 is, het uur is kleiner dan 12 dus is de boodschap 'Goedemorgen'.

Zoek zelf hoe je in PHP de tijd en het uur kan bepalen.

Zet je code in een functie en noem deze functie begroeting ).

De functie krijgt als input een naam mee.

De parameter (de naam) wordt achter de begroeting gezet en de complete begroeting wordt door de functie in een return terug gegeven.

Dus bijvoorbeeld, het is 4 uur 's middags en plaatst de volgende code:

Maak een functie en test tenminste met de bovenstaande test cases.

Om de conditie te testen hoef je niet te wachten tot het (bijvoorbeeld) 16:00 uur is. Je kunt in de code ook even tijdelijk de variabele waarin je uur staat instellen.
Stel je hebt ergens PHP code die ervoor zorgt dat $uur de waarde krijgt van het huidige uur. Dan kun je daarna even tijdelijk om te testen $uur=11 neerzetten.

Je code ziet er dus ongeveer zo uit:

function begroeting($naam) {
  ...
  ...
  ...
}

echo begroeting("Vasco");
echo begroeting("Jesse");

Inleveren

• php-07-jouwnaam.php - met je PHP code.
• php-07-jouwnaam.png - schermafdruk van jouw gehele browser met de juiste output.

Opgave 8, Optellen

Je gaat een functie maken die alle getallen uit een array die groter zijn dan 10 optelt.

Neem bijvoorbeeld dit array.

$array = [11,11,5,2,12,6,7,8,1,10,9];

Er zijn drie getallen groter dan 10. Dat zijn 11, 11 en 12. Opgeteld is dat 34. De functie geeft dus 34 terug.

Noem de functie telGroteGetallen(array)

De $array in de laatste test heeft de waarden zoals in het voorbeeld is gegeven.

Maak een functie en test tenminste met de bovenstaande test cases.

Inleveren

• php-08-jouwnaam.php - met je PHP code.
• php-08-jouwnaam.png - schermafdruk van jouw gehele browser met de juiste output.

Opgave 9a, vier letters

Je gaat een functie maken die alle woorden telt die minder dan vier letters hebben.

Neem bijvoorbeeld deze string.

$string = "Voor de vormgeving is het handig om te weten hoe het eruit komt te zien voordat je daadwerkelijk tekst gaat plaatsen.";

De string heeft 9 woorden kleiner dan vier letters, tel maar na!

Hoe doe je dit in PHP?

1. Zet deze string om in een array. Tip: maak gebruik van de PHP-functie explode
2. Maak een variabele teller en zet die op 0 (je hebt immers nog 0 woorden gevonden die kleiner zijn dan vier letters).
3. Loop met een foreach loop door het array.
4. Maak een if in de loop en test of het woord minder dan vier karakters heeft.
5. Als de if waar is dan hoog je een teller op.
6. Aan het einde van de loop heb je in je teller het aantal woorden dat kleiner is dan vier. Return deze waarde

Noem nu een functie kleineWoorden (string) die de string als parameter mee krijgt en die als output het aantal woorden kleiner dan vier letter terug geeft.

De $string in de laatste test is dus de string zoals gegeven in het voorbeeld. Test je code met tenminste de 4 gegeven tests

Maak een functie en test tenminste met de bovenstaande test cases.

Inleveren

• php-09a-jouwnaam.php - met je PHP cod
• php-09a-jouwnaam.png - schermafdruk van jouw gehele browser met de juiste output.

Opgave 9b, kleine woorden

Deze opgave is een vervolg-opgave van 7a.

Pas de functie kleineWoorden() aan zodat je aan de functie kan meegeven wat een klein woord is.

Stel je wilt alleen de woorden tellen die kleiner zijn dan 3 letters dan kun je de functie aanroepen met: kleineWoorden(3,$string) De functie telt dan alle woorden die kleiner zijn dat 3 karakters.

De $string in de testen is:

$string = "Voor de vormgeving is het handig om te weten hoe het eruit komt te zien voordat je daadwerkelijk tekst gaat plaatsen.";

Maak een functie en test tenminste met de bovenstaande test cases.

Inleveren

• php-09b-jouwnaam.php - met je PHP cod
• php-09b-jouwnaam.png - schermafdruk van jouw gehele browser met de juiste output.

Opgave 10, Eindopgave

Stel je hebt een grid view (Read) en je hebt een kolom met een opmerking. De opmerking kan lang zijn en voor het overzicht wil je alleen het eerste deel van de opmerking afdrukken. Je wilt geen woorden afbreken want dat ziet er lelijk uit.

De opgave is dus om een functie te maken waarmee je een (lange) string afbreekt en alleen de eerst woorden laat zien zodat de totale lengte van de string niet langer is dan N karakters. N geef je mee aan de functie.

OK, lastig? Hier komt een voorbeeld.

Stel je hebt deze opmerking.

opmerking = "Deze student is erg goed in programmeren in PHP";

In jouw overzicht heb je ongeveer ruimte voor 32 karakters. Je roept dan de functie aan

echo breekAf(32, $string);

Als je afbreekt op 32 karakters dan krijg je:

Deze student is erg goed in prog

Nu hebben we een 'half' woord (prog) dus de output wordt:

Deze student is erg goed in

Maak een functie en test tenminste met de bovenstaande test cases.

Verbetervoorstel

Indien het getal groter is dan de hele regel, bijvoorbeeld in dit geval:

echo breekAf(200, "Deze student is erg goed in programmeren in PHP");

Hoe kun je je code optimaliseren voor dit geval? Hoe kun je ervoor zorgen dat jouw code sneller wordt uitgevoerd?

Schrijf in een paar regels hoe je dit kan doen. Doe dit in de vorm van een instructie aan een andere programmeur (dit kan in één paragraaf).

Inleveren

• php-10-jouwnaam.php - met je PHP code
• php-10-jouwnaam.png - schermafdruk van jouw gehele browser met de juiste output.
• Verbetervoortsel-jouwnaam.pdf - Verbetervoorstel in PDF

Version control, GIT en VSC

Als je met een framework dan pas je vaak meerdere bestanden aan. Soms maak je fouten en weet je even niet meer waarom het opeens niet meer werkt. Dan is het handig als je even naar de vorige stap terug kan.

Dat kan als je version control toepast. In VCS kun je GIT daarvoor gebruiken.

In de module DevOps is uitgelegd hoe dit werkt. Als deze module niet beschikbaar is, dan loop je wat voor, en zul je zelf even moeten opzoeken hoe je GIT en VSC kan gebruiken.

Als GIT goed is geïnstalleerd, dan zie je het volgende in jouw VSC-editor.

Bij het rode rondje zie je de wijzigingen die je hebt gemaakt.

Bij het oranje rondje kun je een korte versienaam intypen en met commit, kun je deze versie dan 'commiten'.

Inleveren

Laat zien dat GIT werkt in je browser door een scherm afdruk van je gehele VCS in te leven.

Yii

Yii 1 - Intro

01 Wat is Yii?

In deze les gaan we leren wat een framework is en waarom we Yii gaan leren.
We leren verder wat MVC en CRUD is en wat heeft dat te maken heeft met een framework.

Voor het examen moet je een webapplicatie bouwen.

Je moet zelf weten hoe je dat doet. De meeste studenten kiezen voor PHP. Waarom? Het is relatief eenvoudig en de meeste web applicaties zijn ontwikkeld met PHP (bron (Koppelingen naar een externe site.)).

Veel websites lijken op elkaar en doen vaak dezelfde dingen. Ze maken een verbinding naar de database, laten gegevens zien, je kunt aanloggen, je kunt soms gegevens veranderen en ga zo maar door.

Om niet telkens al deze 'standaard' zaken van 'scratch' af aan te moeten bouwen zijn er zogenaamde frameworks ontwikkeld. Elk framework is eigenlijk een verzamelingen bouwblokken die je telkens op nieuw kunt gebruiken voor jouw website. Alle frameworks zijn net een beetje anders, maar er zijn ook veel overeenkomsten.

Wat zijn belangrijke zaken als je voor een framework kiest:

1. Wordt het framework actief onderhouden; bestaat het al wat langer? Je wilt niet in iets gaan investeren dat volgend jaar misschien niet meer bestaat.
2. Hoe moeilijk is het om een framework te leren; wat is de complexiteit?
3. Hoe snel kun je iets ontwikkelen met het framework?
4. Hoe flexibel is een framework; kun je er echt alles mee maken?

Bij punt 3 en 4 is het vaak het een of het ander. Of je kunt heel snel iets bouwen en je bent niet zo flexibel, of je kunt er eigenlijk alles mee ontwikkelen maar het kost veel tijd om dat te doen.

Bijvoorbeeld: PHP is super flexibel je kunt er echt alles mee ontwikkelen, het Laravel framework is ook redelijk flexibel, het Yii framework is iets minder flexibel en als je naar bijvoorbeeld WordPress kijkt (wat je ook als een soort framework zou kunnen zien), dan is dat het minst flexibel. Aan de andere kant kun je met WordPress heel snel een site maken, je bent alleen een beetje beperkt in de functionaliteiten.

Waarom Yii?

Laravel is het meest gebruikte PHP-framework. Yii staat in de meeste lijstjes ongeveer op plaats 7. Dat komt, omdat je weliswaar "snel even wat kan bouwen", maar je kunt het vrij lastig alles precies zo maken als jij het wilt. Het is is minder flexibel en om het precies zo te krijgen wilt dan moet je meer moeite doen. Als je straks een project maakt dan kun je waarschijnlijk ongeveer 70%-80% van je code maken met Yii, daarvoor hoef je heel weinig te programmeren en heb je tijd om je te storten op de overige 20%-30%. De projecten en examens die jullie gaan doen lenen zich goed om met Yii te maken. Je bent namelijk redelijk vrij in het ontwerp en kunt dus de 'Yii-manier' aanhouden.

Maar wat dan als ik later verder wil met (bijvoorbeeld) Laravel? Dat kan en Yii en Laravel hebben dezelfde opzet, MVC

Links to an external site.. Je zult in Laravel dus veel dingen terugvinden die je in Yii hebt geleerd.

MVC?

MVC, wat is dat? MVC staat voor Model, View en Controller. Deze drie-deling wordt gemaakt in je code, zodat je eenvoudiger code kunt terugvinden.

In een plaatje ziet dat er als volgt uit. De gebruiker doet wat en stuurt daarmee een verzoek (request) naar de juiste controller. De controller 'overlegt' met het model als er iets met data moet gebeuren en het resultaat wordt via de view aan de gebruiker getoond.

In de introductie van deze module (workshop) komen deze begrippen terug. Als het nu allemaal nog wat onduidelijk is, geen probleem we gaan er mee aan de slag en zullen snel een gevoel krijgen wat MVC precies is en hoe het werkt.

Uitleg MVC YouTube (EN)

 

CRUD?

Nog even....waar staat CRUD ook alweer voor? CRUD staat voor Create, Read, Update en Deleten. In een  CRUD-applicatie kun je dus gegevens aanmaken (create), lezen (read), bewerken (update) en verwijderen (delete). 

Voor jouw examen moet je minimaal een CRUD kunnen maken.

Yii heeft een CRUD-generator en je kan zonder te coderen een standaard CRUD-applicatie maken. Super handig dus voor het examen. In de volgende les gaan we hier gelijk mee aan de slag.

Quiz

We gaan even een korte kennis quiz doen en gaan je bevragen over MVC, CRUD, en Frameworks. Als je de tekst op deze pagina goed hebt gelezen dan kun je de kennis quiz maken.

02 Installation Yii

In de komende paar opdrachten gaan we alles klaarmaken en installeren voor het werken met Yii. Aan het eind van de opdracht 4 heb je volledig werkende Yii CRUD-applicatie.

Een CRUD-applicatie is een applicatie waarmee je records kunt aanmaken (Create), records kunt lezen (Read), records kunt aanpassen (Update) en records kunt verwijderen (Delete).

We gaan drie stappen doen om een werkende web app te maken:

1. installeren van alle software
2. maken van een eenvoudige database
3. generen van code

In drie stappen hebben we straks een werkende web app in PHP gemaakt.

Voordat je met deze les begint weet je hoe je met phpMyAdmin (Koppelingen naar een externe site.) (of een andere tool) een database kunt maken en hoe je een .sql file kan importeren. Ook heb je XAMPP ge nstalleerd.

Installatie

De installatie kent een aantal stappen. Hieronder zijn de 5 stappen beschreven die je moet uitvoeren om tot een succesvolle Yii installatie te komen.

1 - XAMPP

Je hebt XAMPP (Koppelingen naar een externe site.) ge nstalleerd. Voor Yii hebben dit nodig, omdat we een database gaan gebruiken.

Heb je nog geen XAMPP of werkt die niet meer dan kun je hier (Koppelingen naar een externe site.) lezen hoe je XAMPP kan installeren.

2 - Composer

Zorg er voor dat je composer (Koppelingen naar een externe site.) hebt ge nstalleerd. Composer is de installer van de WEB tools.

Uitleg, wat is Composer?
Als we een framework als Yii of Laravel gaan gebruiken dan installeren we eigenlijk een hele grote doos met allemaal bouwblokken. Deze blokken moeten allemaal samen werken en zijn vaak afhankelijk van elkaar. De blokken worden door verschillende mensen ontwikkeld en op n of andere manier moet er voor worden gezorgd dat de juisten blokken zijn ge nstalleerd. Hiervoor dient Composer. Composer is als het ware de installer van PHP tools, deze worden vaak libraries of packages genoemd. Librabries zijn dan de blokken functionaliteit die je kunt gebruiken om een programma te maken.

https://getcomposer.org/ (Koppelingen naar een externe site.)

Let op: check goed of de installatie errors/warnings geeft. Zijn er errors, lees deze dan goed en los de issues met behulp van ChatGPT op!

Tip: Zorg dat XAMPP al in ge nstalleerd voordat je composer installeert; composer heeft namelijk de locatie van php.exe nodig.

In deze korte video wordt getoond hoe je Composer kunt installeren:

3 - Create new yii Project

We maken het Yii project world aan.

Je hoeft niet zelf een map/folder aan te maken. Dit doet composer voor jou. Zorg ervoor dat je in de terminal in de parent-folder bent.

Vul de volgende code in de terminal:

composer create-project --prefer-dist yiisoft/yii2-app-basic world

Dit commando maakt een folder aan met de naam world. Dit is je nieuwe Yii project folder (er staan honderden bestanden in).

Errors?

Let op, check of je errors en of warnings krijgt! Zie je die, probeer die dan met behulp van ChatGPT op te lossen! Extra uitleg: bij sommige installaties van XAMPP staan bepaalde extensies niet aan. Zo staat bijvoorbeeld de ZIP extensie soms uit in de PHP config. Als dit zo is dan kan de Yii installatie fout gaan. Check daarom de output en pas de configuratie met behulp van ChatGPT aan.

Let op dat het nieuwe Yii project wordt gemaakt in de folder waarin je de cmd box opent. Stel je wilt je jouw nieuwe project op je Desktop maken dan open je een cmd box en je tikt het commando cd Desktop in. Voer dan het composer commando uit (zoals hierboven aangegeven) en het nieuwe Yii project zal op je Desktop worden gemaakt.

Start Development Server

yii heeft een ingebouwde php server als je die opstart dan draait jouw website op http://localhost:8080/ (Koppelingen naar een externe site.)

Let wel dat je XAMPP ook blijft draaien voor je database.

In VSC open je jouw Yii project en daarna open je een nieuwe terminal.

In de terminal type je dan het commando in:

php yii serve

De Yii webserver draait nu. Ga naar je browser en controleer of op je via localhost:8080 jouw nieuwe Yii project ziet.

Wil je cmd box gebruiken of lukt dit niet. Kijk dan naar de instructiefilm (Koppelingen naar een externe site.)

4 - Configure web.php

We moeten nu nog het een en ander configureren in Yii. We willen dat Yii zoveel mogelijk voor ons regelt. Om te beginnen mag Yii de routing regelen (dit wordt uitgelegd in de volgende les (Koppelingen naar een externe site.) ).

Open config/web.php - en zet het gedeelte dat urlmanager heet, uit commentaar (uncomment prettyURL). Het moet er als volgt uitzien (ongeveer op regel 50 van config/web.php).

'urlManager' => [
            'enablePrettyUrl' => true,
            'showScriptName' => false,
            'rules' => [
            ],
        ],

Dit is een instelling die de routing (Koppelingen naar een externe site.) (waarover later meer) eenvoudiger maakt.

5 - Database

Let er op dat je database goed is gedefinieerd en dat je ook de relaties heb vastgelegd. Dat kun je doen met phpMyAdmin (Koppelingen naar een externe site.) . De ingebouwde Yii CRUD-generator (Koppelingen naar een externe site.) werkt alleen goed als de database en de relaties goed zijn vastgelegd.

Maak de database world en importeer deze file: https://www.roc.ovh/attachments/22

Lukt niet of weet je niet precies hoe je een database moet importeren? In deze les (Koppelingen naar een externe site.) staat beschreven hoe je deze database kunt installeren. In deze les staat de SQL-file world.sql (Koppelingen naar een externe site.) waarmee je de database World kan maken.

We gaan Yii vertellen welke database er moet worden gebruikt.

We openen de file config/db.php en zetten daar het volgende in:

return [
    'class' => 'yii\db\Connection',
    'dsn' => 'mysql:host=127.0.0.1;dbname=world',
    'username' => 'root',
    'password' => '',
    'charset' => 'utf8',
];

Let op dat je geen localhost gebruikt om naar je database te verwijzen. Gebruik 127.0.0.1.

6 - Klaar?

Klaar? Test jouw installatie!

Je had al gezien dat je een leeg Yii project hebt, ga nu naar: http://localhost:8080/gii

Jouw scherm ziet er ongeveer zo uit:

Maak een screen shot van jouw hele scherm met browser en lever deze in.

02 Eerste CRUD

Je hebt Yii geinstalleerd en je hebt de database world geinstalleerd?

Het is tijd om een CRUD te maken met Yii.

Eerste CRUD

We gaan een CRUD maken en met Yii is dat heel makkelijk.

We moeten eerst een verbiding met de database maken. Weet je nog welke letter van MVC daar ook alweer voor stond?
Yep, de M van Model. Het model beschrijft hoe jouw Yii applicatie een verbinding met de database kan maken. We gaan dus een Model maken.

Stap 1 - models maken

We gaan opnieuw naar de component builder, open http://localhost:8080/gii/model (Koppelingen naar een externe site.)

Klik links op 'Model Generator' en type de naam van de databasetabel country in:

De naam van het model wordt automatisch aangemaakt Country . Let op dat de 'Model Class Name' met een hoofdletter begint; kijk goed naar het voorbeeld. De naam van een class (oop) wordt altijd met een hoofdletter geschreven.

Druk onderaan op de pagina op preview , Yii laat nu zien welke file hij gaan aanmaken voor je. Druk op generate om de file te maken.

De file model/country is nu aangemaakt, we gaan later meer in op de inhoud van deze file. Wat voor nu belangrijk is om te onthouden is dat de model/country.php file de verbinding is tussen de tabel country en Yii. Elke keer als Yii informatie uit de country tabel nodig heeft dan gebruikt Yii de model/country.php file

Omdat er vanuit de country tabel wordt verwezen naar de andere twee tabellen, City en Countrylanguage maak je nog twee modellen van deze twee tabellen.

In je model directory (folder) heb je nu dus de volgende files staan:

City.php
ContactForm.php
Country.php
Countrylanguage.php
LoginForm.php
User.php

Controleer dit en als het klopt (let op de hoofdletters!) ga dan door.

Stap 2 - CRUD maken

We gaan de complete CRUD maken.

Ga terug naar de component builder, open (Koppelingen naar een externe site.) http://localhost:8080/gii/model (Koppelingen naar een externe site.)

Klik links op 'CRUD Generator' en type het volgende in:

Let goed op de hoofdletters, deze zijn belangrijk. Het View path wordt leeg gelaten, daar kan Yii zelf iets voor kiezen.

Druk op preview, je ziet 8 files die klaar staan om te worden aangemaakt.

Druk op generate om de files aan te maken.

Controller

In de directory controllers staat een file CountryController.php. Dit is de controller van de country CRUD. Al het denkwerk dat nodig is om de country CRUD aan te sturen zit in de CountryController.php file.

View

In de views/country directory staan de views. De index.php is de standaard view en deze file bevat de (voornamelijk HTML code) om de pagina weer te geven.

Weten we nog waar de controller en view ook alweer vandaan komen? Het Framework is gebouwd volgens de MVC-architectuur. In stap 1 hebben we het model gemaakt en in deze 2de stap hebben we de view en controller gemaakt.

(deze sheet is uit de vorige les)

De controller is waar alle verzoeken van de gebruiker naar toe gaan. De view is de presentatielaag met voornamelijk HTML, CSS, en JavaScript. En in het model wordt de verbinding met de database gemaakt.

Klaar ?

Ga naar http://localhost:8080/country (Koppelingen naar een externe site.)

Je hebt een CRUD van Country gemaakt, compleet met search en sort-functionaliteiten. Je hebt ook een mooie pagina selector waarmee je daar de verschillende pagina's kan navigeren. Je kunt country's lezen/tonen, aanpassen, verwijderen en aanpassen. Probeer het maar! Wees niet bang om de database 'kapot' te maken, want je kunt in een paar tellen de database opnieuw importeren.

In de volgende lessen gaan we de automatisch gebouwde applicatie stap-voor-stap aanpassen.

Voor nu kan je trots zijn op je eerste (?) web CRUD applicatie.

Extra hulp met Filmpje

Niet gelukt? Kijk in dit filmpje nog een keer alle stappen door: Instructie Yii - les1 (Koppelingen naar een externe site.)

Opdracht 1

Maak voor de tabellen:

• city
• countrylanguage

ook een (complete) CRUD met de Crud Generator. Je moet natuurlijk wel eerst de models hebben gemaakt in stap -1.

Controleer op http://localhost:8080/city (Koppelingen naar een externe site.) en http://localhost:8080/countrylanguage (Koppelingen naar een externe site.) of de CRUD werkt.

GIT

"Meester, gisteren werkje het nog en ik heb niets gedaan?"

Bij Yii loop je soms vast. Je maakt wijzigen in een door het framework gemaakte files. Soms werkt er opeens niets meer (echt dat gebeurt iedereen!).

Met GIT kun je ervoor zorgen dat je steeds een werkende versie opslaat. Werkt het dan niet meer, dan kun je terug naar de vorige werkende versie.

Wert GIT nog niet in jouw VCS? Hier staat hoe je GIT in VCS kunt 'aanzetten'.

Opdracht 1

Ga in de code-editor (VSC) naar de map views en probeer te vinden waar het overzicht Countries is gemaakt. Haal code weg zodat de kolom Surface Area niet meer wordt getoond.

Opdracht 2

Kun je de in dezelfde view de groene knop 'Create Country' verplaatsen en onderaan de pagina plaatsen?
Dus het moet er zo uit te komen zien:

Inleveren

1. Lever een compleet screenshot in van de country read page (Grid View; zoals plaatsje hierboven met het rode kruis).
   
2. Lever een compleet screenshot in van de read page (Grid View) van city
3. Lever een compleet screenshot in van de read page (Grid View) van countrylanguage
4. Lever het (aangepaste) bestand views/country/index.php in - noem dit bestand jouw-naam-index.php

Resultaat

Jouw country overzicht ziet er dus zo uit:

--

03 Countries CRUD in Yii

Je hebt een CRUD gemaakt voor de country's tabel. De volgende vragen gaan over de door jouw gemaakte applicatie.

Je kunt deze vragen pas maken als je de pagina de opdrachten in een CRUD voor de world database hebt gemaakt hebt gemaakt.

Voor een paar vragen moet je de applicatie ( http://localhost:8080/country ) hebben draaien.

04 Routing

In deze les leer je wat routing is en hoe je binnen Yii de routing kunt instellen.

Het begrip routing komt terug in alle of veel frameworks waarmee je web applicaties kan maken; Yii, Laravel, Flask, Django,...

Wat is routing? (Algemeen)

Routing is de manier waarop de webserver en jouw programma weet welke pagina er moet worden getoond. Kijk maar eens goed naar de URL in je browser. Je kunt de URL opdelen in 5 stukjes:

Het schema bepaald hoe de informatie wordt opgevraagd (bij een webserver is dit meestal http en https). De domain name is de naam van de server(s). Het file path verteld de server welke informatie er moet worden getoond. De parameters zijn variabele die mee kunnen worden gegeven bijvoorbeeld om waarden die een gebruiker heeft ingevoerd naar de webserver te sturen. Tot slotte is het anchor (weinig gebruikt) een verwijzing naar een stukje binnen een pagina.

Normaal gesproken komt het file path overeen met de locatie van de bestanden op de server. Het file path is het path vanaf de document root. Stel de document root staat op jouw laptop naar:

c:\www

Je hebt XAMPP opgestart en je gaat naar:

http://localhost/ opgave1/uitslag/index.php

Dan wordt de file

c:\www\ opgave1\uitslag\index.php

door de webserver uitgevoerd. Het file path wordt dus achter de document root geplaatst

Hoe kom je van de URL in je browser naar de file op jouw laptop?

Met routing zorg je ervoor dat je ergens een vertaling wordt gemaakt tussen het URL en de file PHP die moet worden uitgevoerd.

Alles wat hierboven is beschreven is de standaard routing. Zo werkt het op jouw laptop als je plain PHP gebruikt (dat is PHP zonder framework).

Routing zorgt ervoor dat het path en eventueel de parameters de juiste code uitvoeren. Bij eenvoudige web applicaties is het path gewoon de locatie van de file op de harddisk, maar voor meer ingewikkelde programma's kan dat al snel onoverzichtelijk worden.

Met een framework werkt het daarom anders.

Routing in Yii

Standaard hoef je niets te doen voor routing. Er zit al heel veel voorgebakken in Yii.

Stel je typt in je browser in

localhost:8080/ country / index

Dit path bestaat uit twee delen; country en index .
country verwijst naar controllers/ Country Controller en
index verwijst naar de public function action Index in de class Country Controller.

Het path bestaat in Yii uit twee delen, de verwijzing naar de controller en de verwijzing naar de functie/method.

De vertaling van path naar controller en function/method gaat als volgt:

1. het eerste deel van het path is de controller-naam, maar
   1. de controller-naam begint altijd met een hoofdletter, en;
   2. als er een streepje (-) in het path staat dan is dat een nieuw woord en in de controller begint dit nieuwe woord met een hoofdletter. Voorbeeld: dit-is-het-eerste-deel wordt DitIsHetEersteDeel.
2. Het tweede deel van het path wordt op dezelfde manier vertaald maar er wordt ook nog eens het woord action voorgezet. Voorbeeld: dit-is-het-tweede-deel wordt actionDitIsHetTweedeDeel.

Een paar voorbeelden:

In de laatste regel ontbreekt het tweede deel van het path. In dat geval wordt de actionIndex uitgevoerd.

Opdracht 1

We gaan in onze World-applicatie oefenen met routing.

(1) Zet in de CountryController class een nieuwe public function:

public function actionHello() {
    echo "Hello World!";
    exit;
}

Save de aangepaste CountryController en bedenk met welke url je nu deze nieuwe functie (method) moet aanroepen.

Controleer dat, zodat je in jouw browser het volgende ziet:

Opdracht 2

Maak een nieuwe file controllers/ExampleController.php en zet daar het volgende in.

<?php

namespace app\controllers;

use Yii;
use yii\web\Controller;


/**
 * CountryController implements the CRUD actions for country model.
 * Code by Ayoub
 */

class ExampleController extends Controller
{
  public function actionSay($message = '')
  {
    echo "Hello $message";
    exit;
  }
}

Vervang de naam Ayoub in de code 2X.

Ga nu naar http://localhost:8080/............. maar vervang de puntjes zodat je de functie (method) actionSay van de ExampleController uit laat voeren.

Extra uitdaging (optioneel)

Je kunt via de URL ook een parameter meegeven, zodat in plaats van "Hello Ayoub" er "Hello <jouw naam>" op het scherm komt.
Je hoeft hiervoor niets aan de code te veranderen. Je moet alleen de URL aanpassen, weet jij hoe?

Inleveren

1. Het bestand: controllers/CountryController.php
2. Het bestand: controllers/ExampleController.php
3. Screendump van het volledig scherm met browser waarop Hello gevolgd door jouw naam op het scherm verschijnt.

--

Verdieping (manual routing)

In de vorige les hebben een instelling in de config/web.php aangepast. Hierdoor hebben we eenvoudige routing aan gezet. Als je dit uit zet dan werkt de routing iets anders. Voor nu niet belangrijk maar als je wilt weten hoe het precies zit, kijk dan naar dit Engelse Youtube filmpje:

https://www.youtube.com/embed/QcZiS43iVxU

Verder is er nog meer informatie te vinden op de offici le Yii documentatie pagina's: https://www.yiiframework.com/doc/guide/2.0/en/runtime-routing
--

04 Routing Quiz

05 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 folder staan de views die we met de CRUD-generator hebben gegeneerd.
2. lay-outs,
   hierin staat de standaard lay-out van elke Yii pagina.
3. site
   hierin staan een aantal standaard Yii pagina's zoals de about en de contact page.

Elke pagina die je laadt met Yii wordt gevormd door main.php in de lay-outs view.

In de main.php staat <?= $content ?> dit is kort voor <?php echo $content ?> . Het toont jouw pagina die in de variabele $content staat:

Haal de regel

<?= $content ?>

maar eens even tijdelijk weg en kijk wat er gebeurt!

Nav Widget in main.php

In de main.php in de folder lay-outs 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-expand-md navbar-dark bg-dark fixed-top',
        ],
      
   ]);
                  
                  
    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', 'CountrySearch[Continent]' => 'Europe'] ],
                ],
            ],
        ],
    ]);
                  
   NavBar::end();
 ?>

In Yii worden parameters voor Widgets 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

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

   

   
   

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 kunnen we de volgende URL gebruiken:
   

   

   
   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:

   

   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 een extra menu city met als items 'Overzicht' en 'Voeg toe'.
   
   

   

Inleveren

Lever jouw views/layouts/main.php file in. Hierin staat als het goed is jouw menu ( Country en City ).

Check je werk goed!

Het country menu bevat 9 menu-items en het City menu bevat 2 menu-items.

--

06 Grid View

In deze les leer je aanpassingen in de Gridview maken.

Je leert hoe je kolommen wel of niet zichtbaar kan maken, hoe je de kolom headers kan aanpassen, hoe je de kolom breedte kan aanpassen, hoe je de inhoud van de kolom zelf kan aanpassen en als laatste leren hoe we een link kunnen maken van een kolom.

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.

Gridview Widget

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

Een Widget is een plug-in waarmee je functionaliteit aan Yii toevoegt. De Gridview Widget is misschien wel de meest uitgebreide widget en het zorgt ervoor dat we een mooi overzicht van onze data krijgen.

Opdracht

De opdracht bestaat uit 8 stappen. In deze stappen gaan we de country view aanpassen (views/country/index.php).
Test na elke stap of de aanpassingen werken!

Stap 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.

• Verander de lay-out in het country overzicht en laat de volgende kolommen in deze volgorde zien:
  Code , Name , Population , Surface Area en Capital .
  Population laat inwoneraantal zien en SurfaceArea laat oppervlakte zien.

Test of het werkt!

Stap 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'.

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

Test of het werkt!

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

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

Test of het werkt!

Stap 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 5 t/m 7 in deze code verandert de waarde van de kolom. Dit is een functie en de return waarde van de functie wordt in de kolom afgedrukt.

Test of het werkt!

Als je achter return bijvoorbeeld "Hallo" zet dan wordt er in de kolom Oppervlakte overal Hallo afgedrukt. Probeer maar!

Stap 5 - Link maken van een kolom

In de Capital kolom zien we geen plaatsnaam, maar een nummer. Dit is het ID van een plaats in de city tabel.

Dus de Capital kolom uit country is de foreign key die wijst naar de primary key ID in city.

In de city view kun je een plaatsnaam zoeken door bijvoorbeeld de volgende URL te gebruiken:

http://localhost:8080/city/index?CitySearch[ID]=179

179 is het ID van Brussels, de hoofdstad van Belgi .

We gaan nu de value van de kolom Capital vervangen door de link.

Laten we om te beginnen de kolom Capital een beetje gaan aanpassen:

1. Vervang de kolomnaam van de kolom Capital door 'Hoofdstad'.
   
   
2. Verander de breedte van deze kolom naar 30px.
   
   
3. Vervang de value van de kolom in
   'format' => 'raw', 'value' => function($data) { return "/city/index?CitySearch[ID]=179"; } (alle kolommen krijgen dus dezelfde waarde).

Je ziet nu (in de browser):

Test of dit werkt!

Dat is nog geen link. Dat komt omdat we met <a href="">...</a> een link moeten maken. Dat kan maar dat is lastig omdat we met " in " quotes zitten. Dus dubbele quotes in dubbele quotes. We kunnen een 'gewone' <a href> maken, maar het is een gepriegel.

Met de Yii module Html kunnen we dit eenvoudiger doen.

We vervangen de regel die de waarde returned in:

Je ziet nu in de browser een nummer (FK naar city ) en als je daar op klikt, ga je naar de city Bruxelles [Brussel]

Test of dit werkt!

We zijn er bijna, we moeten nu alleen de 179 nog variabel maken, anders linkt elke regel naar Brussel.

Stap 6 - Testen en laatste aanpassing

1. Maak je code werkend met bovenstaande code.
   
   
2. Als je nu op het nummer klikt ga je naar de hoofdstad van het betreffende land.
   Test of dit werkt!
   
   
3. Verander nu de tekst van de link zodat je in de kolom Hoofdstad, in 'naar hoofdstad'.
   
   
4. Als je er op klikt dan ga je dus naar de index view van de hoofdstad.
   
   
5. Verander ook de breedte van de kolom naar 200px zodat de kolom netjes past.
   
   

De kolom ziet er dus als volgt uit:

Stap 7, kolommen aanpassen

1. Zet de kolommen in de volgende volgorde:
   Code - Name - Hoofdstad - Inwoners- Oppervlakte
   
   
2. Verander de kolomnamen als volgt:
   Code - Naam - Hoofdstad - Inwoners - Oppervlakte
   
   
3. Zorg dat de naam van het land vet gedrukt wordt (bold).
   
   
4. Haal vervolgens de volgnummers (1,2,3,4....) in de eerste kolom weg
   
   
5. Verplaats de edit kolom (de laatste) naar voren.

Het hele overzicht ziet er uit zoals te zien is op het volgende plaatje:

Stap 8 - bevolingsdichtheid

De bevolkingsdichtheid zegt iets over de hoeveelheid inwoners in een land. Natuurlijk heeft Amerika meer inwoners dan Nederland, maar het land is ook vele groter. Om te vergelijken hoe dichtbevolkt een land is, kun je uitrekenen hoeveel mensen er gemiddeld per km2 (dit een gebied van 1000x1000 meter) wonen.

bevolkingsdichtheid = aantal inwoners / oppervlakte.

Stel een land heeft een oppervlakte van 100 km2 en je er wonen 200 mensen. Dan heb je in dit land dus gemiddeld 2 inwoners per km2, want:

2 = 200 / 100

• Maak nu een nieuwe kolom in het country overzicht en bereken daarin de bevolkingsdichtheid.
  
  
• Gebruik de php functie round() om de bevolkingsdichtheid met 0 decimalen af te drukken.

Aan het einde heb je jouw gridview aangepast en ziet het er zo uit:

Het Eindresultaat

Inleveren

1. Maak een schermafdruk van jouw Country's aangepaste Gridview en lever deze in.
2. Stuur ook jouw (aangepaste) country view in.

--

Yii 2

Debug ready

Opdracht debugging

Om straks de opgave goed te kunnen maken, gaan we een eenvoudige debug functie maken.

Easy Debugging

Als je de aanpassingen in dit onderdeel uitvoert, dan kun je later in de code de volgende twee functies gebruiken:

_d($objectnaam) bekijk $object de code loopt gewoon door.
_dd($objectnaam) bekijk $object de uitvoering van de code stopt.

Hoe krijg je dit? Eenvoudig twee stappen.

Stap 1 , New file config/functions.php

<?php
/**
 * Debug function
 * _d($var);
 */
function _d($var,$caller=null)
{
    if(!isset($caller)){
        $caller = debug_backtrace(1)[0];
    }
    echo '<code>Line: '.$caller['line'].'<br>';
    echo 'File: '.$caller['file'].'</code>';
    echo '<pre>';
    yii\helpers\VarDumper::dump($var, 10, true);
    echo '</pre>';
}

/**
 * Debug function with die() after
 * _dd($var);
 */
function _dd($var)
{
    $caller = debug_backtrace(1)[0];
    _d($var,$caller);
    die();
}

Stap 2 , Edit config/web.php - voeg regel 3 en 4 toe.

<?php

/* Include debug functions */
require_once(__DIR__.'/functions.php');

Inleveren

Jouw aangepaste functions.php

--

Version control, GIT en VSC

Als je met een framework werkt, pas je vaak meerdere bestanden aan. Soms maak je fouten en weet je even niet meer waarom het opeens niet meer werkt. Dan is het handig als je even naar de vorige stap terug kan.

Dat kan als je version control toepast. In VCS kun je GIT daarvoor gebruiken.

In de module DevOps is uitgelegd hoe dit werkt. Als deze module niet beschikbaar is, dan loop je wat voor, en zul je zelf even moeten opzoeken hoe je GIT en VSC kan gebruiken.

Als GIT goed is ge nstalleerd, dan zie je het volgende in jouw VSC-editor.

Bij het rode rondje zie je de wijzigingen die je hebt gemaakt.

Bij het oranje rondje kun je een korte versienaam intypen en met commit, kun je deze versie dan 'commiten'.

Inleveren

Laat zien dat GIT werkt in je browser door een scherm afdruk van je gehele VSC in te leven.

Yii Refresh

Grid view (2)

Zorg ervoor dat jouw Yii World project uit Yii Level 1 weer (nog) draait

In deze opdracht hebben we een refresh en gaan we nog een keer kijken naar de standaard Yii gridview.

Wat leren we?

• We frissen onze kennis weer wat op en leren met het MVC model te werken.
• Hoe we de standaard Yii grid view kunnen tweaken (aanpassen).
• Hoe je in PHP een af kan ronden.
• Hoe je de vormgeving met CSS aan kunt passen.

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

Dit moet er uit komen:

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.

Stap 1 - kolomnamen naar rechts uitlijnen

De laatste drie kolommen zijn naar rechts uitgelijnd.

De header kan je met de volgende code naar rechts uitlijnen.

'headerOptions' => [ 'style' => 'text-align:right;' ],

Dit voeg je toe aan het array waarin je de kolom in de Gridview.
Dat is het hele code blok dat tussen [ en [ staat.

Stap 2 - getallen naar rechts uitlijnen

Zorg ervoor dat de inhoud van de kolommen ook naar rechts uitlijnt. Voeg hiervoor de juiste CSS toe aan het codeblokje dat over de kolom gaat.
Weet je niet meer hoe het werkt, kijk dan nog een keer hoe je dit in Yii Level hebt gedaan.

Stap 3 - bevolkingsdichtheid 2 decimalen

Bevolkingsdichtheid rond je af op 2 decimalen (is nu 0).

Stap 4 - inwoneraantal met " thousand seperator "

In de kolom Inwoners formatteer je het getal zodat er een spatie tussen de getallen komt. Dit is de zognaamde "thousand seperator". Gebruik hiervoor de PHP functie "number_format".

Stap 5 - 0 inwoners wordt onbewoond

Landen als Antarctica hebben 0 inwoners. Vervang de 0 door " Onbewoond ".

Tip: met "if ( $data->Population == 0 ) { ..." kan je testen of het aantal inwoners 0 is.

Stap 6 - Kolom een kleur geven

De kleur van het font van de kolom Naam wordt donkerblauw (CSS darkblue ). Zie voorbeeld.

Het font blijft wel bold.

Check of alles goed werkt!

Inleveren

1. Screenshot van je aangepaste city view zoals het voorbeeld hierboven. Laat een compleet screenshot zien zodat ook je datum en tijd rechtsonder in het beeld is te zien.
2. Jouw aangepaste code ( view/country/index.ph p).

Menu (oops)

Inleiding

We gaan een eigen overzicht maken. We beginnen met het aanmaken van een menu, dan een controller en daarna ook nog een view. We leren data op te halen vanuit de controller en tonen die vervolgens onze eigen view.

Het ophalen van data doen we met een eenvoudige query die we in de Controller plaatsen. Vanuit de Controller gaan we via het Model naar de database. De volgorde wordt:

Menu

Om te beginnen voegen we een nieuwe methode (=functie) toe aan de controllers/CountryControlle r class. De methode geeft voor nu alleen "oops" terug en doet verder nog even niets. We noemen de methode actionOverzicht, door de hem zo te noemen weet Yii dat het deze functie aan moet roepen als de gebruiker de url /country/overzicht aanroept. Het koppelen van een url aan een stuk logica, zoals een functie of methode noemen we routing .

Opdracht

Maak een menu item overzicht onder country dat naar /country/overzicht gaat.

In Yii level 1 hebben we met menu's geoefend.

Test het menu uit.

Het menu gaat naar de actionOverzicht in de CountryController en returned "oops". We krijgen dus een leeg scherm met "oops".

Inleveren

• Een schermafdruk van jouw gehele browser (url moet zichtbaar zijn) waarin je het via het menu naar jouw overzicht gaat en waar "oops" wordt afgedrukt.

Controller

We gaan in onze nieuwe controller functie actionOverzicht code plaatsen, deze code haalt alle data van alle countries op en roept vervolgens de view overzicht aan.

Controller

We halen onze "oops" weg en gaan dus een stukje code toevoegen aan onze CountryController.

Let op zet jouw naam op regel 3.

public function actionOverzicht()
{
    // Zet hier jouw naam.
    // Dit is de query, dit is te vergelijken met select * from Country
    $countries = Country::find()->all();
  
   // De code hieronder genereert de html, dit noemt men de view binnen MVC (model view controller).
    // Zoals je kunt zien geven we de $countries array door aan de "overzicht" view. 
    // In de overzicht View kunnen we nu $countries gebruiken.

    return $this->render('overzicht', [
        'countries' => $countries,
    ]);
}

Opdracht

Als je alle stappen goed hebt doorlopen krijg je als deze code aanroept een foutmelding.

What? Een fout? Waarom nu?

Leg uit waarom je een foutmelding krijgt.

Inleveren

1. Uitleg waarom je een foutmelding krijgt.
   (maak een .txt bestand met notepad en zet daarin de uitleg)
2. CountryController.php

View

View

Het menu 'overzicht' gaat naar de actionOverzicht deze voert een query uit en roept de view overzicht op. Dit overzicht gaan we nu maken.

We gaan dus in de folder views/country een nieuwe file overzicht.php aanmaken en plaatsen daar de volgende code in.

<?php
    foreach ($countries as $country) {
        echo $country->Name;
        echo " - ";
        echo $country->Code;
        echo " - ";
        echo number_format($country->Population, 0, ',', ' ');
        echo "<br>";
    }
?>

Opdracht

Het overzicht is bijna niet geformatteerd.

Weet je nog hoe een HTML table er uit ziet?

<table>

	<tr>
    	<td> .. </td>
        <td> .. </td>
        <td> .. </td>
     </tr>
     
     <tr>
    	<td> .. </td>
        <td> .. </td>
        <td> .. </td>
     </tr>
     
</table>

Hierboven staat een skelet van een table met twee rijen en drie kolommen.

Vind je dit lastig? Kijk dan de video.

Je hebt nu zelf een view opgebouwd zonder gebruik te maken van de Gridview widget. Het kost meer tijd en moeite om zelf een overzicht zonder Gridview widget te maken, maar je hebt wel veel meer controle over hoe jouw overzicht er uit komt te zien.

Inleveren

• Een screenshot van je browser (met URL) met daarin het overzicht dat je hebt gemaakt en
• de aangepaste en werkende view/country/overzicht.php

--

Europa

We hebben een eigen overzicht gemaakt. Dat gaan we nog een keer doen en nu met alle landen van Europa, een selectie dus.

Opdracht

• Maar een nieuw menu-item en noem dit " Overzicht Europe" .
  
  
• Maak een nieuwe function actionOverzichtEurope, zet deze in de juiste controller en koppel deze aan het menu-item.
  
  (let op de vertaling naar de routering; in de routering staat nooit een hoofdletter en woorden worden gescheiden door een streepje "-" , zie les 2 over routing ).
  
  
• Laat in dit overzicht alle landen van Europa zien. Op de vorige pagina staat uitgelegd hoe dit moet.
  
  
• Druk de volgende kolommen af:
  Name en Surface Area
  
  
• Zet de twee kolommen netjes onder elkaar (in table)
  
  
• Formateer de Surface Aera netjes met spatie tussen de duizendtallen en lijn ze recht uit.
  
  
• Maak de headers bold .
  
  
• Sorteer het overzicht op Surface Area van grootste land naar kleinste.
  
  Het overzicht komt er dus zo uit te zien:

Je hebt geleerd dat je een overzicht kan maken via een (Yii-)query. Met de query kan je de selectie en sortering aanpassingen. De query wordt geplaatst in de controller en maakt gebruik van het model. In dit voorbeeld het model van country .

Inleveren

• Jouw aangepaste en werkende view/country/overzicht.php in tabel vorm, en
• Een schermafdruk yii-04a-jouw-naam van jouw gehele browser waarin je je overzicht laat zien.

Selectie (SurfaceArea < 100000)

Opdracht

• Pas het overzicht van de vorige opdracht aan zodat je alleen alle kleine Europese landen ziet.
  
  
• Een land is klein als
  SurfaceArea < 100000 Pas hiervoor de controller aan.
  
  
• Je hebt dus te maken met twee zoekcriteria.
  
  Zoek zelf op internet uit hoe je in een 'Yii-query' twee zoekcriteria kan combineren met andWhere() of gebruik de query methode om met Yii data uit de database te halen.
  
  

Inleveren

• Jouw aangepaste en werkende countryController.php

Hoofdstad

Opdracht

Lees de uitleg (op de vorige pagina) goed door en plaats de kolom hoofdstad in het overzicht.

Maak hiervoor twee aanpassingen:

1. maak de relatie in het model van Country , en
2. pas de view overzicht aan door daar de kolom Hoofdstad aan toe te voegen.

Inleveren

1. Een schermafdruk yii-05a-<jouw naam> van je country view waarin de kolommen Naam, Hoofdstad en Oppervlakte worden afgedrukt, zoals in het voorbeeld hierboven. Maak een afdruk van je gehele browserscherm.

Clickable hoofdstad

We gaan de Hoofdstad clickable maken. Als je naar http://localhost:8080/city gaat dan zie je het overzicht van steden. Klik op een oogje op een van de steden. Let op de URL. Je ziet http://localhost:8080/city/view?id=<NR> als url en <NR> is het ID van de stad.

Dus als je bijvoorbeeld klikt op http://localhost:8080/city/view?id=5 dan zie je informatie over Amsterdam.

Opdracht

Maak elke hoofdstad in het overzicht dat je bij opdracht 1 hebt gemaakt clickable. Als je op de link klikt dan open je het overzicht van de stad, bijvoorbeeld http://localhost:8080/city/view?id=5 .

Tip: je kunt Html:a() gebruiken om een link te maken. Dit is in de vorige les uitgelegd .

Inleveren

1. Jouw aangepaste country view. Plaats in je country view commentaar met jouw naam.

Eén taal

Opdracht

Nu hebben we n taal per land, maar in de meeste landen wordt meer dan n taal gesproken. Daar gaan we in de volgende opdracht naar kijken.

Let op: je hebt in je model een query staan die alleen alle landen uit Europa selecteert. Zorg dat je hierbij alle kolommen selecteert, omdat je anders de kolommen mist die je nodig hebt om de link (join) te maken.

Dus dit is onjuist:

In dit voorbeeld selecteer je maar drie kolommen (Name, SurfaceArea en Capital) en de kolom Code waarmee je de join naar de tabel Countrylanguages moet maken zit er niet bij. Je voegt dus de juiste kolommen toe of je aat de hele select regel weg zodat alle kolommen worden geselecteerd.

Inleveren

Een schermafdruk yii-06a-jouw-naam met het scherm van jouw gehele browser waarin je het landenoverzicht laat zien en waarbij je n taal afdrukt.

Meer talen

Om alle talen die bij n land horen af te drukken, gaan we met een loop door het array $country->countrylanguages heen.

Gebruik hiervoor de volgende loop.

foreach( $country->countrylanguages as $taal) {
	// vul zelf de juiste variable in om de taal af te drukken
    echo .....;
	echo " <br/>";
}

Opdracht

Je hebt nu een 1:N ( n op meer) relatie gemaakt. In volgende lessen gaan we hier opnieuw mee aan de slag.

Inleveren

• Een schermafdruk yii-06b-jouw-naam.png waarin je je complete scherm laat zien waarin het landenoverzicht te zien is met alle talen zoals in het voorbeeld.

Percentage

Opdracht

Inleveren

1. • Een schermafdruk yii-06c-jouw-naam.png waarin je je complete scherm laat zien waarin het landenoverzicht te zien is met talen en percentages zoals in het voorbeeld.

Voorbeeld

Sorteren

Opdracht

Inleveren

1. Een schermafdruk yii-06d-jouw-naam.png waarin je je complete scherm laat zien waarin het landenoverzicht te zien is zoals in het voorbeeld.
2. De code van de view van country. Voeg in jouw code commentaar toe waarin je jouw naam zet.

Yii 3

Koffie opdracht

De opdracht

Stap 1, maak een database coffee.

Stap 2, maak een nieuw Yii project coffee.  Gebruik de onderstaande regel voor in de Terminal.

Let op dat je <naam van de map hier!!> vervangt voor de naam van dit project

composer create-project --prefer-dist yiisoft/yii2-app-basic <naam van de map hier!!>

Stap 3, pas de database configuratie file in de Yii aan en laat deze verwijzen naar de coffee database.

Stap 4, pas de web.php in de Yii config aan en zet smart routing aan (uncomment het gedeelte bij 'urlManager').

Stap 5, maak de file functions.php met daarin de functies dd() en d(). Dit is beschreven in les 1 .

Stap 6, roep functions.php aan vanuit de web.php configuratie file. Ook dit staat in les 1 beschreven.

Stap 7, we gaan nu de tabellen, models en CRUD's maken voor medewerker, menu en bestelling. Hieronder vind je terug hoe je de tabellen moet maken.

medewerker

Maak de tabel in de database.

Gebruik hiervoor localhost/phpmyadmin (hiervoor moet XAMPP draaien)

Genereer het model en de CRUD voor medewerkers in Yii en zet de volgende namen in de database.utmelding meer krijgt.

Houd rekening met Yii-fout die we eerder tegenkwamen . Pas de gegeneerde code zodat je geen foutmelding meer ziet!

Menu

Maak nu de tabel menu in de database

Stap 10, Genereer het model en de CRUD voor menu en zet de volgende namen en prijzen in de database.

De prijzen zetten we in de database als centen. Dus E 1.95 wordt 195. Dit maakt het coderen eenvoudiger omdat we op deze manier met integers (gehele getallen kunnen werken).

Zet de testdata in de database zoals je hieronder kan zien.

Bestelling

Maak nu de tabel bestelling in de database.

Stap 12, Genereer het model en de CRUD voor bestelling. (er hoeft geen data in de database gezet te worden voor Bestelling)

We hebben nu een tweede standaard Yii applicatie en we gaan nu aanpassingen maken in het invoerformulier 'Create Bestelling'.

Als we nu een nieuwe bestelling maken dan zien we het volgende scherm:

Stap 13 , timestamp halen we weg, want die wordt automatisch ingevoerd (default). Die hoeven we dus niet in te voeren.

Open de _form.php in de view van bestelling en haal de timestamp regel er uit.

Controleer in alle drie de CRUD's of ID in het invoerveld staat. Controleer hiervoor de drie _form.php bestanden in de views van medewerker, bestelling en menu.

Haal de ID's uit het invoer forms en test of je gegevens kan invoeren.

Inleveren

1. Schermafdruk van de browser met je form.php van de view bestelling. Noem het bestand yii-07-jouwnaam.png
2. het bestand _form.php van de view bestelling (dus views/bestelling_form.php).
   Zet jouw naam in commentaar in dit bestand.

Schermafdruk ziet er zo ongeveer uit (je moet wel je hele browserscherm inleveren!).

--

Forms en Dropdown

Inleiding

We gaan onze koffie applicatie uitbreiden.

Om het invoeren van gegevens eenvoudiger te maken gaan we drop down menu's toevoegen.

We gaan naar twee soorten drop-downs kijken; die met vaste waarden en die met dynamische waarden (uit de database).

Bij het invoeren van een bestelling gaan we allereerst de status via een drop down invoeren.

Daarna gaan we waarde voor de medewerker ook uit een drop down halen. Deze waarde moet uit de database komen.

We gaan eerst de insert aanpassen. Dus aanmaken van een nieuwe bestelling. De update doen we later.

Wat gaan we leren?

• hoe je in Yii in een formulier een drop-down kan maken.
• hoe je in Yii een query in de controller kan toevoegen en de resultaten kan doorsturen naar de view.

Drop down in Bestelling

We gaan kijken naar de bestelling tabel en CRUD.

Als we de status in de database als een enum hebben aangemaakt dan weet Yii dat de status uit beperkt aantal waarden kan hebben en als het goed is maakt Yii dan vanzelf een een drop down in het form.

Klopt dat heb jij een drop down?

Indien niet, dan kun je de code aanpassen in het form aanpassen.

In de view _form.php van Bestellingen moet de volgende regel staan:

<?= $form->field($model, 'status')->dropDownList([ 'besteld' => 'Besteld', 'klaar' => 'Klaar', 'betaald' => 'Betaald', '' => '', ], ['prompt' => '']) ?>

Deze regel laat een drop down menu in het formulier zien. Kijk eens goed naar de parameter van dropDownList.

[ 'besteld' => 'Besteld', 'klaar' => 'Klaar', 'betaald' => 'Betaald', '' => '', ], ['prompt' => '']

De eerste parameter is een associative array waarin elk element bestaat uit een key en een value.

De key is de waarde die het element uit het form krijgt (de value) en deze waarde wordt door Yii in de database gezet. De key komt dus overeen met de waarde in de database. De value van het associatieve array is wat de gebruiker op het scherm ziet.

Deze waarde kan je dus veranderen. Je kunt dus bijvoorbeeld 'betaald' veranderen in 'afgerekend'. Het enige dat dan gebeurt is dat je iets ander op het scherm ziet.

In dit voorbeeld is de key en de value gelijk (de waarde op het scherm is hetzelfde als de waarde in de database).

Dus samengevat, de key is de waarde in de database en de value is wat de gebruiker op het scherm ziet.

Stel we willen in het form van bestelling de medewerker veranderen. Dan moeten we dus de foreign key die naar medewerker verwijst veranderen. Het juiste id van de medewerker moet in de tabel bestelling worden ingevuld.

De waarde wordt dus het id, maar dat is niet wat je de gebruiker wilt laten zien.

Dus als we voor de medewerkers een drop down willen maken dan hebben we een assiociative array nodig dat er zo uit ziet:

[ '1'=> 'Ayoub', '2'=> 'Brahim','3'=> 'Carla','4'=> 'Diego','5'=> 'Eisa' ]

De keys zijn de id's die als foreign keys in de bestelling tabel staan en de namen zijn de namen van de medewerkers.

Opdracht

Maak nu een statische drop down met de waarden zoals in het voorbeeld van de vorige pagina (Ayoub, Brahim, Carla, ....).

De waarden worden dus (nog) niet uit de database gehaald.

Inleveren

1. Schermafdruk yii-08a-jouw-naam met het form waarin je de drop down (opengeklapt) laat zien. Maak een schermafdruk van je gehele browser.

Voorbeeld

Dynamische drop down

Opdracht, Dynamische drop down

In de vorige opdracht hebben we een drop down van medewerkers gemaakt, maar we willen de lijst van medewerkers natuurlijk uit de database halen.

In deze opdracht leg ik stap-voor-stap uit wat je moet doen om dat voor elkaar te krijgen.

Lees alles aandachtig door en sla geen stappen over!

Data uit de database halen doen we in de controller.

Open de BestellingController. Vanuit deze code wordt de create view aangeroepen en vanuit de create view wordt de _form.php aangeroepen. Waarom dit in twee stappen gaat leggen we later uit.

We veranderen de code in Bestelling controller:

use app\models\Medewerker;
use Yii;
..
..

public function actionCreate()
{
    $model = new Bestelling();
    $medewerkers = Medewerker::find()->all();

    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->redirect(['view', 'id' => $model->id]);
    }

    return $this->render('create', [
        'model' => $model,
        'medewerkers' => $medewerkers
    ]);
}

De eerste regel use app\models\Medewerker; zetten we bovenaan in de BestellingController. Hiermee vertellen we Yii dat vanuit de BestellingController gebruik willen gaan maken van het model Medewerker .

Let op dat je op de bovenaan in je code use Yii; moet hebben staan.

Let ook op wat je moet aanpassen, de code die hierboven staat kan in een nieuwere Yii versie iets anders zijn. Kopieer alleen de regels die er voor zorgen dat de create view de $medewerkers krijgt.

We kunnen de medewerkers ook ophalen via een sql-query. Je mag regel 10 ook vervangen in de volgende twee regels:

// $medewerkers = Medewerker::find()->all();
// dit is hetzelfde als
$sql="select * from medewerker";
$medewerkers = Yii::$app->db->createCommand($sql)->queryAll();

Vanuit de controller zie je dat de $medewerkers (waar dus alle medewerkers in staat) wordt doorgegeven aan de create view (van bestelling).

Dus wat hebben we gedaan tot nu toe?

In de function actionCreate die wordt aangeroepen als we een nieuwe bestelling willen maken, voegen we een object toe waarin alle medewerkers zitten. In regel 10 halen we alle medewerkers op en in regel 18 sturen we het resultaat naar de view create.php (van bestelling ).

In de view create.php van bestelling controller passen we het laatste stukje code aan

<?= $this->render('_form', [
    'model' => $model,
    'medewerkers' => $medewerkers
]) ?>

Hiermee geven we het object $medewerkers door aan de view _form van bestelling.

We hebben dus deze volgorde afgelegd: bestellingController.php (controller) -> create.php (view) -> _form.php (view)

In het view _form zetten we nu bovenaan in het PHP-gedeelte.

_dd($medewerkers);

Dit is de debugfunctie en hiermee controleren we of we inderdaad alle medewerkers naar de view hebben gestuurd.

We hebben nu als het goed is een lijst van medewerkers in de _form maar we moeten het ombouwen naar een assiociative array.

Pas hiervoor de code aan in de view _form van bestelling.

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;

// hiermee maken we een array met de id's(als key) en de name (als value) 
$medewerkerList = ArrayHelper::map($medewerkers,'id','naam');
_dd($medewerkerList);
?>

...
...
...

Deze code laat het eerst stukje van de view_form zien.

Met de functie ArrayHelper::map zetten we het object $medewerkers om in een assiociative array. Met _dd() laten we dat zien. Probeer maar! Als het goed is, zie je het volgende:

[
    1 => 'Ayoub'
    2 => 'Brahim'
    3 => 'Carla'
    4 => 'Diego'
    5 => 'Eisa'
]

En dit is precies wat we nodig hebben om de Drop Down te maken.

Pas de regel in de view _form van bestelling waarin de user het id van de medewerker moet intypen aan. Verander deze regel in:

<?= $form->field($model, 'medewerker_id')->dropDownList($medewerkerList, ['prompt' => ''])->label('Medwerker') ?>

Als het goed is heb je hiermee een werkend menu gekregen.

Gelukt? Wordt de lijst van medewerkers in de drop down uit de database gehaald?

Inleveren

1. de view _form.php van bestelling
2. schermafdruk yii-08b-jouw-naam met het form waarin je de drop down van de medewerkers (opengeklapt) laat zien. Maak een schermafdruk van je gehele browser

--

Nog een drop down

We gaan nog een keer stap-voor-stap alle stappen uitvoeren om nog een drop down in bestelling te maken.

Opdracht

Het stappenplan voor een drop down

Schrijf eerst het volgende op:

In welk model komt de drop down? Dit noemen we de target.
(in opdracht 2 hierboven is dat Bestelling )

Waar komt de informatie voor de Drop Down uit? Dit noemen we de source.
(in opdracht 2 hierboven is dat Menu )

Voer nu de stappen 1-6 uit

1. Zet in de target controller welke source model we willen gebruiken.

// in controller van target
use app\models\<SourceModelnaam>;

2. Haal in de target controller in de actionCreate() de informatie uit de source op.

// sourceName bedenk jij zelf en daarin staat de informatie die in de drop down moet komen.
$sourceName = source::find()->all();

3. Geef vanuit de target controller in de actionCreate() de informatie door aan de view.

return $this->render('create', [
     'sourceName' => $sourceName,
     ....
]);

4. Open de view create in de target (view) en geef de informatie door aan _form view.

<?= $this->render('_form', [
    'sourceName' => $sourceName,
    ...
]);

5. Open de view _form in de target (view) en zet de informatie om in een assiociative array

// in dit voorbeeld worden id en naam gebruikt:
//   id is het veld dat moet worden opgeslagen
//   naam is het veld dat in de drop te zien is
$sourceNameList = ArrayHelper::map($sourceName,'id','naam');

6. Pas het invoerveld aan in de _form van de target (view).

// veld_in_de_db is het veld van de target dat in dit invoerveld wordt weggeschreven.
<?= $form->field($model, 'veld_in_de_db')->dropDownList($$sourceNameList, ['prompt' => '']) ?>

Als je alles correct gedaan hebt dan moet je nog 1 regel aanpassen in de code om de functionaliteit te gebruiken. Yii controleert automatisch of alle databasekolommen zijn ingevuld in het formulier. Dit controleren wordt validatie genoemd. Deze regels staan in het model. Omdat je geen Bestelling ID opgeeft bij het maken van een bestelling moet je deze requirement verwijderen op regel 33 van model Bestelling.

return [
	[ ['naam', 'medewerker_id', 'menu_id', 'status'], 'required'],
    ...
    ...
]

Inleveren

1. schermafdruk yii-09-jouw-naam met het form waarin je de drop down van de producten (opengeklapt) laat zien. Maak een schermafdruk van je gehele browser.
2. de BestellingController.php en zet jouw naam bij de aanpassingen die je hebt gedaan.

Drop down afmaken

Inleiding

De insert en update lijken op elkaar en gebruiken hetzelfde form (_form.php).

We hebben nu de insert aangepast, maar de update nog niet. Controleer maar! We moeten nu de update dus ook nog aanpassen.

Wat gaan we leren?

• Hoe in Yii de insert en update met elkaar zijn verweven. Dit werk ook ongeveer zo in Laravel.
• Hoe we labels aanpassen in het Yii insert- en update formulier.

Aanpassen update view

Weet je nog dat de -update view niet rechtstreeks door de actionCreate van de BestellingController wordt aangeroepen?

Hoe zit dat nu?

De actionCreate en actionUpdate vanuit de controller gaan bieden naar hun 'eigen' view maar via deze eigen view komen beide op hetzelfde form uit. Dat komt omdat een update en create hetzelfde form gebruiken.

Als we nu dus een update uitvoeren van de bestelling (pennetje vanuit de gridview) dan krijgen we een foutmelding. Dat komt omdat de form verwacht dat er gegevens voor de drop down worden meegestuurd.

Om dit te fixen kopiëren we de code in de controller die we in de actionCreate hebben gemaakt dus naar de actionUpdate.

Deze twee functies zijn bijna hetzelfde. Bij de create wordt alleen een nieuw object gemaakt en bij de update wordt een bestaand object ingeladen.

Nu moeten we de objecten nog doorgeven van de update view naar de _form view. Net zoals we dat ook deden bij  de create. 

Opdracht

Inleveren

1. de BestellingController.php en zet jouw naam bij de aanpassingen die je hebt gedaan.

Final Touch

Opdracht

De final touch

Laten we nog wat labels aanpassen. Dit zijn de teksten die boven de invoervelden in het form staan.

Inleveren

1. schermafdruk yii-010b-jouw-naam met het bestellingen form waarin je de aangepaste labels laat zien. Maak een schermafdruk van je gehele browser.

Relaties en drop down

Todo inleiding

We gaan nog één keer bepaalde dingen herhalen en op een ander manier gebruiken.

We leren hoe we drop downs in een Gridview plaatsen en we leren ook hoe we een relatie kunnen gebruiken in de gridview.

In de gridview van de Bestellingen pas de kolom status aan:

[
    'attribute'=>'status',
    'filter'=>array('besteld'=>'is besteld', 'klaar'=>'is klaar', 'betaald'=>'is betaald'),
],

In de database is de waarde van deze kolom besteld, klaar of betaald. Om duidelijk het verschil tussen de waarde van de kolom in de database en de getoonde waarde te laten zien zijn de getoonde waardes 'is besteld', 'is klaar' en 'ís betaald'.

Let op dat

array('besteld'=>'is besteld', 'klaar'=>'is klaar', 'betaald'=>'is betaald')

hetzelfde is als

['besteld'=>'is besteld', 'klaar'=>'is klaar', 'betaald'=>'is betaald']

Als we nu een drop down willen bij de medewerkers dan moeten we dit hetzelfde aanpakken als we in de vorige les hebben gedaan:

Bovenaan in de view zetten we:

$medewerkerList=['1'=>'test1','2'=>'test2','3'=>'test3'];

Test dit uit. Als je test1 selecteert dan selecteer je dus de medewerkers met id 1.

Vanuit de controller maken we een object dat alle medewerkers bevat. Dit object geven we door aan de grid view (index). Daar maken we van het object een list en de list plaatsen we in de kolom als value van de key 'filter'.

Dus we veranderen de kolom medewerker:

[
    'attribute' => 'medewerker_id',
    'filter'    => $medewerkerList,
],

Opdracht

In de kolom medewerker zien we nu de id's van de medewerker. Als we de naam willen afdrukken moeten we de relatie maken. Dit hebben we eerder gedaan, zet in het model van Bestelling de volgende code:

public function getMedewerkers()
{
   return $this->hasOne(Medewerker::className(), ['id' => 'medewerker_id']);
}

Plaats nu in de gridview in de index view van de bestelling:

[
    'attribute' => 'medewerker_id',
  	'label'     => 'Medewerker',
    'filter'    => $medewerkerList,
    'value'     => 'medewerkers.naam'
],

Hiermee zetten we de waarde van deze kolom op naam van de relatie medewerkers .

Inleveren

1. schermafdruk yii-011a-jouw-naam met de bestellingen index view waarin je laat zien dat de relatie is gemaakt met de tabel medewerker. Maak een schermafdruk van je gehele browser.

Medewerker tonen

Opdracht

Hiermee zetten we de waarde van deze kolom op naam van de relatie medewerkers .

Inleveren

1. schermafdruk yii-011b-jouw-naam met de bestellingen index view waarin je laat zien dat de drop down is gevuld met de namen van de medewerkers. Maak een schermafdruk van je gehele browser.

Menus en drop down

Opdracht

Inleveren

1. Laat in de les zien dat alles werkt.
   
   lukt dat niet maak dan een heel kort demo filmpje (10 to 30 seconden).
   1. In dat filmpje laat je zien dat je een nieuwe bestelling aan kan maken en gebruik maakt van de drop downs in het form.
   2. In het filmpje laat je zien dat je een bestelling kan aanpassen.
   3. In het filmpje laat je zien dat de grid view werkt en dat via de twee drop downs een selectie kan maken.

--

Yii Challange

Yii Challenge

Weet je nog dat je een CRUD opdracht hebt gemaakt voor te-laat-komers.

Het voorbeeld staat hier:

https://stampwerk.nl

Maak een database en maak de CRUD in yii.

Probeer het overzicht zo goed mogelijk na te maken.

De eisen:

1. Noem de database telaat , voor de tabelnaam mag je zelf een naam verzinnen.
2. De kolomnamen moeten overeenkomen met het voorbeeld.
3. De knop weer eentje te laat ! moet ook onder aan de pagina staan.
4. De statistieken moeten overeen komen met het voorbeeld.
5. ID's dienen automatisch te worden gegenereerd (dus geen ID's in forms).

De statistieken

Om dit deel te kunnen maken passen moeten we twee zaken aanpassen: de index.php in de view en de controller.

1. We passen eerst de view aan en laten voorlopig nog vaste (statische) waarden zien.
2. Daarna zorgen we ervoor dat er waarden vanuit de controller aan de view worden doorgegeven. We gebruiken hiervoor nog steeds vaste waarden, maar nu worden ze wel in de controller gezet.
3. Als laatse stap voegen we in de controller een query toe en halen de waarden uit de database. De waarden zijn hiermee dynamisch geworden.

De stappen worden hieronder uitgelegd. Je krijgt hier en daar stukjes voorbeeld code, maar je moet de code wel op de juiste manier aanpassen en elke stap goed testen.

Stap 1, aanpassen view (statisch)

We beginnen eerst met de view. Pas de view aan zodat deze er komt uit te zien zoals in het voorbeeld. Neem voor de waarden voorlopig even vaste waarden die (nog) niet uit de database komen. Vul bijvoorbeeld op elke regel 999 als waarde in. Als je tevreden bent met de opmaak dan gaan we de data uit de database halen.

Stap 2, aanpassen controller met statisch waarden

In de controller staat een method/function actionIndex(). Dit is waar de gegevens worden opgehaald die in de view worden getoond. Op de laatste regel van de actionIndex wordt de view aangeroepen en worden de gegevens vanuit de controller naar de view gestuurd.

return $this->render('index', [
    'searchModel' => $searchModel,
    'dataProvider' => $dataProvider,
]);

Wij gaan hier gegevens aan toevoegen.

return $this->render('index', [
    'searchModel' => $searchModel,
    'dataProvider' => $dataProvider,
 	'hoogste' => $hoogste,
    'gemiddelde' => $gemiddelde,
    'totaal' => $totaal,
]);

Geef de drie variabelen elk een vaste waarde, bijvoorbeeld.

$hoogste=111;
$gemiddelde=222;
$totaal=333;

Zet deze code ook in de actionIndex en pas de view aan zodat je deze waarden (nog steeds vaste) waarden ziet. Je ziet in de view dus niet meer 999 maar 111, 222 en 333.

Als dit werkt dan heb je ervoor gezorgd dat de waarden die in de controller (actionIndex) worden getoond in de view. Top!

Stap 3, aanpassen controller met dynamische waarden

Nu moeten we de drie waarden uit de database halen. Dat gaat in Yii als volgt.

$sql="select max() as hoogst, avg() as gemiddeld, sum() as totaal from ....";
$result = Yii::$app->db->createCommand($sql)->queryOne();

Op regel 1 maak je de query af zodat de drie waarden worden berekend.

Tip: Controleer je query eerst in phpmyadmin of die werkt. Pas als de query werkt zet je hem in de controller.

In de query worden aliases gebruikt (hoogst, gemiddeld en totaal), dit ....

Controleer met

dd($results);

of de query het gewenste resultaat geeft.

Als het goed is heb je nu de gegevens, bijvoorbeeld:

$hoogste=$results['hoogste'];

Het resultaat van de query wordt nu in de variabele $hoogste gezet. Doe dit met alle drie de variabelen.

Als alles werkt zijn de waarden van de drie variabelen (hoogste, gemiddelde en totaal) nu dynamisch. Ze komen uit de database en worden vanuit de controller gevuld en aan de view doorgegeven.

Top! Je hebt nu helemaal van scratch een volledig CRUD gemaakt. Weet je nog dat je deze CRUD ook in 'vanilla' PHP had gemaakt? je hebt nu hetzelfde met Yii gemaakt. En wat vind je makkelijker?

Evaluatie

Maak een kort documentje waarin je twee voordelen en twee nadelen van het gebruik van Yii ten opzichte van 'vanilla' PHP (php zonder framework) beschrijft.

Onderbouw de voor- en nadelen aan de hand van de opdrachten die jij hebt gemaakt. Maak dus niet een algemeen verhaal, maar wees specifiek waar jij tegenaan gelopen bent of wat jij juist heel handig vond. Benoem de opdracht als onderbouwing.

ChatGPT mag je gebruiken zolang je maar aan de bovenstaande voorwaarde voldoet.

Beschrijf verder welke twee tips jij studenten wilt geven die nog aan de Yii module moeten beginnen.

Je kunt onderstaande template gebruiken.

Evaluatie Yii jouw-naam.docx

Noem het documentje evaluatie-jouw-naam.pdf

Inleveren

Let op je moet vier documenten inleveren: 1 screenshot, 2 php files en een documentje.

1. Screenshot yii-10-jouwnaam met de index view waarbij je de te laat meldingen en de statistieken laat zien. Maak een screenshot van jouw complete browser scherm.
2. De aangepaste controller en plaats in de code commentaar. Leg uit wat de regels die jij hebt toegevoegd doen.
3. De aangepaste view.
4. De evaluatie. Noem het documentje evaluatie-jouw-naam.pdf

Eindgesprek Yii Challenge

Heb je alle Yii opdrachten gedaan en heb je de challenge ingeleverd dan kan je een eindgesprek aanvragen bij een docent.

In het eindgesprek wordt gecontroleerd of je voldoende hebt geleerd.

Vragen die (bijvoorbeeld) je kunt verwachten:

• wat vond je lastig aan Yii?
• hoe ben je aan je antwoorden gekomen?
• kun je uitleggen wat routing is en hoe dat in Yii is vormgegeven?
• kun je uitleggen wat MVC is of kun je hiervan voorbeelden geven aan de hand van je code?
• wat is de Yii grid view en waarom zou je dat wel (of juist niet) gebruiken?
• geef een demo van jouw Challange.
• Stel je wilt een de kleur van iets aanpassen, waar doe je dat in de code?

Zorg dat je de antwoorden weet op de bovenstaanden vragen en dat je in code kan aanwijzen waar bepaalde onderdelen staan.

--

Python

Python 1 JSON

Chat GPT

Gebruik ChatGPT, maar gebruik het goed!

In deze module moeten jullie ChatGPT gebruiken. Maar voordat we dat gaan doen, eerst even een soort van regel:

Deze regel luidt:

En waarom is dat?

Veel bedrijven zijn super afhankelijk van hun software. Zo is er een bedrijf 'Knight Capital' waar het volgende mee is gebeurd.

Tijdens de fatale handelsdag in 2012 werd een nieuwe handelssoftware geïmplementeerd bij Knight Capital, maar er werd een bug geïntroduceerd in het algoritme van de software. Hierdoor begon de software onjuiste orders te plaatsen op verschillende aandelenmarkten.

De ongecontroleerde en foutieve orderstroom zorgde ervoor dat Knight Capital enorme hoeveelheden aandelen kocht of verkocht tegen verkeerde prijzen. Dit resulteerde in een verlies van ongeveer $440 miljoen binnen enkele minuten.

Het bedrijf ging failliet.

Dit incident heeft de financiële sector veranderd. Er kwam meer regelgeving, en alle software werd nog beter getest. Als programmeur in de financiële sector kam een nieuwe regel:

"Als de software werkt, maar je begrijpt niet precies wat en hoe het werkt dan mag het niet in productie."

Als je dus stukken software kopieert van het internet of van ChatGPT en je weet niet precies hoe het werkt dan plak je al die stukjes code aan elkaar waarvan telkens mogelijk kleine onbedoelde foutjes code zitten. Als die onbedoelde kleine stukjes software zullen vroeg of laat tot een storing leiden. Het hangt natuurlijk af van in welke sector je werkt, hoe erg dan de gevolgen van een storing zijn.

Dus gebruik zoveel ChatGPT als je wil, maar zie je een commando dat je niet begrijpt, laat het je dan uitleggen. Begrijp je het dan nog niet, gebruik het dan niet, zoek een andere oplossing!

Vanaf nu zul je ook meer worden beoordeeld op het kunnen uitleggen hoe code werkt .

Voordelen van het snappen van hoe code werkt:

• Je vindt sneller bugs/fouten.
• Er zitten minder fouten in je code.
• Er zit minder onnodige code in je project en daarom is je code veiliger. Onnodige code wordt namelijk veel gebruikt om te kunnen hacken.
• Iedereen kan aan ChatGPT code geven en vragen wat er fout aan is. Maar omdat je het echt begrijpt kun jij ook bugs oplossen die ChatGPT niet kan oplossen. Daarom ben je meer $$$$ waard dan iemand anders. En door ChatGPT worden je skills steeds belangrijker en unieker.

Dus gebruik alle hulpmidellen die je ter beschikking staan, maar zorg dat je kan uitleggen wat je hebt gemaakt.

Python

In deze module(s) gaan we Python leren. Niet alles wordt meer stap-voor-stap uitgelegd. Vraag ChatGPT om uitleg. Vraag bijvoorbeeld aan chatGPT hoe je een if-then-else maakt.

Als je bijvoorbeeld aan ChatGPT de volgende vraag stelt:

Hoe maak je in Python een if-the-else?

Dan krijg je een uitleg en een voorbeeld. Mocht je dat niet krijgen dan kun je ook om een voorbeeld vragen!

Opdracht

Maak een txt bestand en leg daarin in eigen woorden uit wat het vercshil is van een if-then-else in PHP en in Python.

Noem minimaal twee veschillen.

Wat is Python?

Guido van Rossum is een Nederlandse computerprogrammeur die bekend staat als de maker van de programmeertaal Python.

Python heeft dus Nederlandse roots.

Maar wat heeft Python zo bekendgemaakt?

• Python heeft veel library's waarmee je heel makkelijk bepaalde zaken kan doen, zo zijn er tegenwoordig veel library's waarmee je een AI-model kan maken. Maar er is bijvoorbeeld ook een Library om via de Canvas-API gegevens met Canvas uit te wisselen. De Canvas Monitor maakt daar gebruik van en is gedeeltelijk geschreven in Python.
• Python werkt platformonafhankelijk. Als je iets programmeert op Windows dan draait dat ook op een mac of op Linux.
• Er zijn Frameworks (net als Yii, Laravel en React) gebouwd rond Python. De bekendste zijn: Django en Flask. Met Flask gaan we later kennis maken.

Populariteit

Python is momenteel (2023) erg populair en staat volgens de TIOBE index op nummer 1.

Volgens gebruikers van Stack Overflow was Python de op twee na populairste technology (na JavaScript en HTML).

Let op: dit is wat andes als meest gebruikte technology, daarbij komt PHP vaak op nummer één uit.

Python wordt ook veel gebruikt in het onderwijs (HBO en Universiteit).

Python is momenteel (2023) erg populair en staat volgens de TIOBE index op nummer 1.

Installatie Python

Om Python op een Windows-machine te installeren, kun je de volgende stappen volgen:

1. Ga naar de officiële Python-website op https://www.python.org/downloads/ .

2. Klik op de knop "Downloaden" onder de meest recente versie van Python (bijvoorbeeld Python 3.9.6).

3. Scroll naar beneden op de downloadpagina en selecteer de juiste installatieprogramma voor je Windows-besturingssysteem. Kies tussen de 32-bits (x86) of 64-bits (x86-64) versie, afhankelijk van je systeemconfiguratie.

4. Nadat het installatieprogramma is gedownload, dubbelklik je erop om het uit te voeren.

5. In het installatieprogramma wordt een dialoogvenster geopend. Zorg ervoor dat je het selectievakje "Add Python to PATH" aanvinkt en klik op "Install Now" om de standaardinstallatie te starten.

6. De installatie begint en Python wordt op je systeem geïnstalleerd. Het kan enige tijd duren. Zorg ervoor dat je de optie "Disable path length limit" selecteert als deze wordt weergegeven.

7. Na de installatie wordt er een dialoogvenster geopend met de titel "Setup was successful". Vink het selectievakje "Disable path length limit" aan als deze optie beschikbaar is en klik op "Close" om de installatie te voltooien.

8. Om te controleren of Python correct is geïnstalleerd, open je CMD (Win + R, typ "cmd" en druk op Enter) en typ je "python --version" gevolgd door Enter. Je zou de geïnstalleerde versie van Python moeten zien.

Gefeliciteerd! Je hebt Python succesvol geïnstalleerd op je Windows-machine. Nu kun je Python gebruiken om scripts uit te voeren, applicaties te ontwikkelen en meer.

Opdracht

Laat zien dat je python succesvol hebt geïnstalleerd.

Open een CMD window en type python --version.

Je ziet bijvoorbeeld dit:

Lever een screenshot van je eigen CMD-window in waarin je laat zien dat Python is geïnstalleerd.

--

Inspringen

Allereerst.... superbelangrijk , in Python is het inspringen belangrijk. Doe je dit niet op de juiste manier, dan werkt je code niet!

import random

def raad_het_getal():
    willekeurig_getal = random.randint(1, 100)
    aantal_pogingen = 0

    while True:
        gok = int(input("Raad het getal tussen 1 en 100: "))

        if gok == willekeurig_getal:
            print(f"Gefeliciteerd! Je hebt het juiste getal geraden in {aantal_pogingen} poging(en).")
            break
        elif gok < willekeurig_getal:
            print("Te laag! Probeer het opnieuw.")
        else:
            print("Te hoog! Probeer het opnieuw.")

raad_het_getal()

Opdracht

Maak een bestand aan (in VCS of andere editor) en zet het bovenstaande Python programmaatje er in. Voer het programma uit en bestudeer hoe het werkt.

Je ziet na elke : begint er een programma-blok. Op regel 3 begin je met het maken van een functie. Je springt dan in en alles wat op dit niveau is ingesprongen (of verder) hoort bij de functie. Regel 19 is dus de eerste regel die niet meer bij de functie hoort.

Regel 11 en 12 hoort bij de if , 14 bij de elif en 16 bij de else .

Probeer het spel uit.

Er is een klein foutje gemaakt; als je het spel hebt gespeeld dan wordt er gezegd dat je het getal hebt geraden in 0 pogingen.

Pas de code aan zodat als je het getal hebt geraden het aantal pogingen wordt afgedrukt. Dus je drukt bijvoorbeeld af:

"Goed zo je hebt het getal binnen 6 beurten geraden."

Tip: om sneller te kunnen testen kun je het spel ook even veranderen in 'Raad een getal tussen 1 en 10'. Let wel; op dat je de juiste versie van het spel inlevert en dat is de versie waarbij je een getal van 1..100 moet raden.

Inleveren

Aangepaste python code

JSON 1

In Python wordt vaak een API gebruikt. API's geven vaak JSON-output, bijvoorbeeld:

{
  "personen": [
    {
      "naam": "Alice",
      "leeftijd": 25,
      "stad": "Amsterdam"
    },
    {
      "naam": "Bob",
      "leeftijd": 32,
      "stad": "Rotterdam"
    },
    {
      "naam": "Charlie",
      "leeftijd": 42,
      "stad": "Utrecht"
    }
  ]
}

Maak dit JSON bestand aan en noem het "data.json". Dus maak een nieuw bestand en zet de bovenstaande gegevens in dit nieuwe bestand.

Maak het volgende Python script in dezelfde directory/folder aan.

import json

# JSON-bestand lezen
with open("data.json") as json_bestand:
    data = json.load(json_bestand)

# Gegevens verwerken
personen = data["personen"]
for persoon in personen:
    naam = persoon["naam"]
    leeftijd = persoon["leeftijd"]
    stad = persoon["stad"]
    print(f"Naam: {naam}, Leeftijd: {leeftijd}, Stad: {stad}")

Controleer of je code werkt.

Zoek op wat het commando import JSON doet.

Opdracht regel 10, 11 en 12 zou je weg kunnen laten, maar dan moet je wel regel 13 aanpassen.

Opdracht

Haal regel 10, 11 en 13 weg (dat zijn de drie regels en de eerste begint met naam=).

Pas nu het print commando aan zodat de juiste gegevens worden afgedrukt.

Inleveren

Aangepaste code json1-<jouw naam>.py

JSON 2

Neem voor deze opgave de code van de vorige opdracht JSON 1

Pas daarna de JSON aan zodat iedereen een telefoonnummer krijgt en pas de code aan zodat het telefoonnummer wordt afgedrukt. Het telefoonnummer wordt als laatste afgedrukt (dus na de stad).

Inleveren

json2-<jouw-naam>.py

loop en if

We hebben nu wat geoefend met Python. We gaan nu even kijken naar een paar belangrijke kenmerken van Python. Ja mag gebruik maken van chat GPT. We gaan één stuk code maken waar we telkens een paar regels aan vast plakken.

Comments

Zet bovenaan in je code de datum en je naam in commentaar.

Loops.

Maak een loop waarmee de getallen 1 t/m 10 worden afgedrukt.

Maak een loop waarmee de getallen 12,14,16,18,....36 worden afgedrukt.

If-then-else

Maak een if-then-else. Test de variabele leeftijd. Is deze groter dan 18 druk dan de tekst af:

"Je bent 18, zorg ervoor dat je een zorgverzekering heb afgesloten".

Ben je jonger dan 18, druk dan de tekst af:

"Je hoeft nog geen zorgverzekering af te sluiten"

Inleveren

Je hebt nu een stuk Python code met commentaar, twee loops en een if-then-else.

Lever de code in loops-if-<jouw naam>.py

strings

Strings zijn variabelen waarmee je niet kan rekenen.

Jouw naam kan een string zijn.

naam = 'Ahmed Al-Hassan' , weet je nog in PHP zou je $naam = 'Ahmed Al-Hassan' gebruiken.

Maak een stukje code waarin je de volgende stappen laat zien:

1. String Creatie Maak een string aan met de waarde 'Hallo Wereld'.

2. String Concatenatie Maak twee strings, "Python" en "Programmering". Voeg deze twee strings samen om een nieuwe string te maken, "Python Programmering".

3. String Lengte Maak een string aan met de waarde 'OpenAI'. Gebruik de len() functie om de lengte van deze string te bepalen.

4. Toegang tot elementen van de string Maak een string 'Kunstmatige Intelligentie'. Print het vijfde karakter van de string.

5. String Slice Gebruik de string van de vorige oefening. Print de substring van het derde tot en met het zevende karakter.

6. String Bewerkingen Maak een string 'Python is leuk!'. Verander 'leuk' naar 'geweldig' in de string.
   
   

Gebruik de code die hieronder staat en vul de code aan op de plaats van puntjes.

# 1. String Creatie
my_string = ......
print(my_string)

# 2. String Concatenatie
string1 = 'Python'
string2 = 'Programmering'
new_string = ........
print(new_string)

# 3. String Lengte
ai_string = 'OpenAI'
lengte = ........
print(lengte)

# 4. Toegang tot elementen van de string
intelligence_string = 'Kunstmatige Intelligentie'
print(.........)  

# 5. String Slice
print(.......])

# 6. String Bewerkingen
fun_string = 'Python is leuk!'
new_fun_string = ..........('leuk', 'geweldig')
print(new_fun_string)

Inleveren

1. De code die uit de 6 onderdelen bestaat, string-<jouw naam>.py
2. Een screenshot van je CMD window waarin je laat zien dat de code werkt en 6 maal de juiste waarde afdrukt.

JSON 3

Maak de volgende code af.

In het programma wordt een JSON-structuur gegeven waarin persoonsnamen staan met hun leeftijd.

Maak de code af zodat de maximale leeftijd wordt gevonden.

import json

# JSON data
json_data = """
{
    "mensen": [
        {"naam": "Johan Vermeulen", "leeftijd": 23},
        {"naam": "Ahmed Al-Hassan", "leeftijd": 26},
        {"naam": "María Rodríguez", "leeftijd": 30},
        {"naam": "Emma de Vries", "leeftijd": 28},
        {"naam": "Mohammed Abdulrahman", "leeftijd": 35}
    ]
}
"""

def vind_max_leeftijd(json_data):
    # Zet de JSON data om naar een Python object
    data = json.loads(json_data)

    # Initieer de maximale leeftijd variabele
    max_leeftijd = 0

    # TODO: Schrijf hier de code die door de data loopt, 
    #       de leeftijden vergelijkt en de maximale leeftijd vindt

    return max_leeftijd

# Test de functie
print(vind_max_leeftijd(json_data))  # Dit zou 35 moeten printen

Inleveren

Gebruik de code van hierboven en vul de code aan (bij # TODO) zodat de maximale leeftijd wordt gevonden.

Lever de aangepaste en werkende code, gebruik de naam leeftijd-<jouw-naam>.py

JSON 4

Gebruik de code van de vorige opdracht, maar zorg dat de functie twee waarden returned; de hoogste leeftijd en de naam van de persoon met de hoogste leeftijd.

De laatste twee regels van de code worden.

naam, leeftijd = vind_oudste_persoon(json_data)
print(f'De oudste persoon is {naam} met de leeftijd van {leeftijd} jaar.') 

Pas de functie aan zodat de naam en leeftijd worden afgedrukt.

Inleveren

Aangepaste code json4-<jouw-naam>.py.

API en JSON

We hebben de volgende code

import requests
import json

def vind_langste_username():
    # Verzend een GET verzoek naar de JSONPlaceholder API
    response = requests.get("https://jsonplaceholder.typicode.com/users")
    
    # Zet de JSON response om naar een Python object
    data = json.loads(response.text)

    # Initieer de lengte variabele voor de langste gebruikersnaam en de bijbehorende gebruiker
    max_len = 0
    user_met_max_len = ''

    # TODO: Schrijf hier de code die door de data loopt, 
    #       de lengtes van de gebruikersnamen vergelijkt en de langste gebruikersnaam en bijbehorende gebruiker vindt

    return user_met_max_len, max_len

# Test de functie
naam, lengte = vind_langste_username()
print(f'De gebruiker met de langste gebruikersnaam is {naam} met een lengte van {lengte} karakters.')  

Deze code laadt een JSON-bestand via een API. Vervolgens moet je de langste naam selecteren. Vul daarvoor de code aan.

Let op, je hebt de library requests nodig (import requests) deze library moet je waarschijnlijk installeren.

Dat doe je met het volgende commando.

pip install requests

Pip is de installer voor Python (zoals composer voor PHP).

Gebruik alle hulpbronnen, maar zorg dat je de code kan uitleggen.

Inleveren

Aangevulde werkende code, api-<jouw-naam>.py

Python 2 Flask

Installatie

Met Python kan je ook web applicaties maken. Daarvoor zijn twee bekende frameworks beschikbaar, Django en Flask.

Django is een beetje de grote broer van Flask. Flask is eenvoudiger en beter geschikt voor wat eenvoudigere web applicaties.

Flask heeft niet echt een MVC structuur, maar heeft wel routing, een mooie template engine en database integratie.

Wij gaan kennismaken met Flask en zullen kijken naar routing en de (Jinja) template engine van Flask.

Maar eerst installeren.

Installatie

We hebben Python al geïnstalleerd (heb je dat niet meer vraag dan Chat GPT hoe je Python moet installeren of kijk in Python L1).

Met pip installeer je Flask:

pip install flask

Maak een map waarin je jouw Flask project gaat maken, en noem die map bijvoorbeeld mijFirstFlask.

Open de nieuwe folder in VCS.

Het eerste begin

1. Maak een nieuw Flask-project en maak een templates -map aan in de projectdirectory. Hierin plaatsen we de HTML-templates.

2. Maak een nieuw Python-bestand, bijvoorbeeld app.py , en plaats het in de projectdirectory.

3. Open het Python-bestand ( app.py ) met een teksteditor en voeg de volgende code toe:

   from flask import Flask, render_template
   
   app = Flask(__name__)
   
   @app.route('/')
   def home():
       return render_template('index.html')
   
   if __name__ == '__main__':
       app.run(debug=True)
       

4. Maak een nieuw HTML-bestand in de templates-map, index.html, en open het met een teksteditor.

   Voeg deze HTML-code toe aan het index.html-bestand en zet achter Welkom jouw naam.

   <!DOCTYPE html>
   <html>
   <head>
       <title>Mijn Flask-project</title>
   </head>
   <body>
       <h1>Welkom <vul hier jouw naam in> bij mijn Flask-project!</h1>
       <p>Dit is een basisstructuur voor een Flask-project.</p>
   </body>
   </html>

5. Sla zowel het Python-bestand ( app.py ) als het HTML-bestand ( index.html ) op.

6. Ga naar de opdrachtprompt of terminalvenster en navigeer naar de projectdirectory waar het Python-bestand zich bevindt.

7. Voer het volgende commando in: python app.py (of python3 app.py als je meerdere Python-versies hebt geïnstalleerd).

8. Flask start de ontwikkelingsserver en geeft een URL weer, bijvoorbeeld http://127.0.0.1:5000/ .

9. Open de weergegeven URL in je webbrowser en je zou de inhoud van het index.html -bestand moeten zien, inclusief de welkomstboodschap.

Inleveren

Een schermafdruk van je gehele browser waarin je laat zien dat de template de welkomstboodschap wordt getoond.

Flask Form

In deze opdracht ga je in Flask je een eenvoudige webpagina maken met een formulier. In het formulier vraag je de gebruiker om zijn naam en vervolgens gebruik je die naam voor een begroeting.

1. Maak een nieuw Python-bestand, bijvoorbeeld app.py , en open het met een teksteditor.

2. Voeg de volgende code toe aan het Python-bestand:

app.py

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/greet', methods=['POST'])
def greet():
    name = request.form.get('name')
    return render_template('greet.html', name=name)

if __name__ == '__main__':
    app.run(debug=True)
    

3. Maak een templates -map in dezelfde directory als het Python-bestand.

4. Maak een nieuw HTML-bestand genaamd index.html in de templates -map en open het met een teksteditor.

5. Voeg de volgende code toe aan het index.html -bestand:

<!DOCTYPE html>
<html>
<head>
    <title>Flask Opdracht</title>
</head>
<body>
    <h1>Vul je naam in:</h1>
    <form action="/greet" method="POST">
        <input type="text" name="name" required>
        <input type="submit" value="Verzenden">
    </form>
</body>
</html>
 

6. Maak een nieuw HTML-bestand genaamd greet.html in de templates -map en open het met een teksteditor.

7. Voeg de volgende code toe aan het greet.html -bestand:

<!DOCTYPE html>
<html>
<head>
    <title>Flask Opdracht</title>
</head>
<body>
    <h1>Hallo, {{ name }}!</h1></body>
</html>

8. Sla zowel het Python-bestand ( app.py ), het index.html -bestand als het greet.html -bestand op.

9. Ga naar de opdrachtprompt of terminalvenster en navigeer naar de projectdirectory waar het Python-bestand zich bevindt.

10. Voer het volgende commando in: python app.py.

11. Flask start de ontwikkelingsserver en geeft een URL weer, http://127.0.0.1:5000/ .

12. Open de weergegeven URL in je webbrowser en je zou een formulier moeten zien waar je je naam kunt invullen en verzenden.

13. Nadat je op "Verzenden" hebt geklikt, zou je begroet moeten worden met de boodschap "Hallo, [naam]!" waarbij [naam] de ingevoerde naam is.

Met deze eenvoudige opdracht kun je een formulier maken in Flask en de ingevoerde naam gebruiken om een begroeting weer te geven. Je kunt deze opdracht verder aanpassen en uitbreiden met meer functionaliteit en stijling naar wens.

Zorg ervoor dat je begrijpt hoe dit werkt, want in een volgende opdracht moet je zelf een formulier maken.

JINJA

De HTML-template is een zogenaamde JINJA template. In een JINJA template kan je python variabelen kan je afdrukken door de variabelen tussen {{ }} te zetten.

Als je (via ChatGPT) meer informatie wilt geef dan aan dat je in Flask met een JINJA template werkt.