2024

Overview (EN)

First Year

1st Period

Block One

Block Two

2nd Period

Block Three

Block Four

3rd Period

Block Five

Block Six

4th Period

Block Seven

Block Eight

Second Year

1st Period

Block Nine

Block Ten

2nd Period

Block Eleven

Block Twelve


Front End

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.

sta-je-html.jpg


HTML

HTML staat voor HyperText Markup Language .

Het is de taal voor het maken van websites. Een website gemaakt in HTML bestaat uit bouwblokken die jouw internet browser vertellen hoe alles op de website eruit komt te zien.


Untitled.png


Gebruik eens de toets combinatie (CTRL + U) op de pagina van de opdracht, dan zie je precies hoe de structuur van de website in elkaar zit!

Untitled 1.png

Er staan vast dingen tussen waarvan je niet precies weet wat het doet, <a>, <h1>, <div>, <span> en wat zijn de teksten die tussen de <> tekens staan? Bijvoorbeeld

class="dupe-option" role="presentation". En wat doen uberhaupt die “<>”tekens?? En hoe werkt dit allemaal samen????

Het doel van deze module is dat jij aan het eind voldoende basis kennis hebt van HTML en een redelijk idee hebt hoe bijvoorbeeld, de bovenstaande 2 voorbeelden werken! :)

Laten we beginnen met het maken van jouw eerste HTML pagina!

Opdracht

Inleveren

Voorbeeld:

image-1720177943220.png

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.

Als het goed is hebben jullie Visual studio code geïnstalleerd. Zo niet, je kan het gemakkelijk downloaden in de windows store :)

Untitled.png

en kan dit gemakkelijk openen via de zoekbalk

Untitled 1.png

Maak een nieuwe map genaamd “Frontend1” en open deze map (”Folder”) in visual studio code

Untitled 2.png

Untitled 3.png

Nu je de map geopend hebt, kan je in deze map een nieuw HTML bestand maken met “new file”.
Druk weer op “File” links boven en daarna “New File”. “New file” = Nieuw bestand

Untitled 4.png

Untitled 5.png

Je kan dit net gemaakte HTML bestand ook openen door in de map er op te klikken. Je ziet al een chrome icoontje of het icoontje van een andere browser.

Untitled 6.png

Laten we iets zetten in dit HTML bestand.

Opdracht

Voeg het volgende toe aan je HTML bestand en herlaad de website

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

Inleveren

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

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!

03 - De basics

In dit hoofdstuk leer je de basisprincipes van HTML-elementen en tags, met voorbeelden en enkele best practices.

Tag

Tags zijn de bouwstenen van HTML. Ze worden gebruikt om het begin en het einde van een HTML-element aan te geven. Tags zelf doen niets anders dan een structuur aangeven.

Starttag : in het onderstaande voorbeeld de <p> ,
Sluittag : in het onderstaande voorbeeld de </p>


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

Element

Een element is hetzelfde als een tag maar het heeft inhoud! Elementen bestaan daarom dus ook uit een starttag , en meestal een eindtag . Maar ook content (De inhoud).

Starttag : in het onderstaande voorbeeld de <p> ,
Content : in het onderstaande voorbeeld de tekst; “Dit is een alinia”
Sluittag : in het onderstaande voorbeeld de </p>

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

Attribuut

Een attribuut is een extra stukje tekst dat je toevoegt aan een HTML-element om meer informatie toe te voegen.
Attributen worden gebruikt om eigenschappen van een element te veranderen en of toe te voegen. Bijvoorbeeld bij een link.

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

Het href attribuut wordt gebruikt om de locatie aan te geven waar de link naar toe verwijst.

Basis HTML Elementen

Je hebt een heel veel elementen hier beneden staan een aantal voorbeelden.

Koppen : Kan je zien als titels, je hebt verschillende niveaus van koppen met <h1> tot <h6> . Bijvoorbeeld:

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

Paragrafen : Gebruik de <p> tag voor tekstblokken (alinia’s). Bijvoorbeeld:

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

Links : Gebruik de <a> tag voor links en het href label voor waar de link naar toe verwijst. Bijvoorbeeld:

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

Afbeeldingen : Voeg afbeeldingen toe met de <img> tag en het src attribuut. Bijvoorbeeld:

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

De HTML img tag zoekt naar een afbeelding door te kijken in dezelfde map als het HTML-bestand waarin het staat. Als de afbeelding daar niet te vinden is, kan de browser deze niet laten zien. Lees dit artikel om een goede basis te krijgen over pathing : dit is erg belangrijk ook naast deze module!

Zo heb je er nog een hoop die je gebruikt bij specifieke doeleinden.

EXTRA: Commentaar

In HTML kan je commentaar schrijven in de code, deze code wordt niet uitgevoerd en kan je gebruiken om code te beschrijven en of uit te leggen.

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

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

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

Opdracht

Inleveren

  1. Screenshot van d gehele broswer waarop deze pagina te zien is

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!

04 - Semantic elements

Nu we de basics onder de knie hebben gaan we de pagina indelen! Het indelen wordt gedaan met semantische elementen. Semantische elementen in HTML zijn elementen die een duidelijke betekenis geven aan de inhoud die ze bevatten.

Semantiek : “de betekenis van een woord of een zin

<nav> = bevatten de navigatie links

structuur.png

Zulke elementen maken de structuur van een webpagina begrijpelijker voor zowel de browser als de ontwikkelaars. Hier zijn wat belangrijke semantische elementen en hun betekenissen:

<header> </header>

Bevat inleidende inhoud of navigatie links voor een deel van de site of pagina.

<nav> </nav>

Geeft een deel van de pagina aan die navigatie links bevat.

<main> </main>

Bevat de belangrijkste inhoud van het document.

<article> </article>

Een element waar je informatie kan neerzetten dat niet.

<section> </section>

Geeft een groep van inhoud aan die bij elkaar komen, meestal met een kop.

<aside> </aside>

Bevat inhoud die hoort bij de hoofdinhoud, zoals zijbalken.

<footer> </footer>

Bevat informatie zoals auteursrechtinformatie of contactgegevens.

Extra informatie

Semantische elementen worden vooral gebruikt bij het verbeteren van de SEO van een pagina. Naast dat wordt het ook gebruikt voor de overzichtelijkheid van de HTML code.

" SEO staat voor Search Engine Optimization, oftewel het verbeteren van een website met als doel hogere posities te krijgen in de organische zoekresultaten van zoekmachines. Hoe hoger jouw website scoort op relevante zoekwoorden, hoe groter de kans dat mensen jouw website bezoeken. En omdat SEO geen kosten per klik met zich meebrengt, in tegenstelling tot SEA, is het een duurzame manier om meer website bezoekers te realiseren. "

Opdracht

Inleveren

  1.  Een ".txt" bestand in met de antwoorden op de vragen

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>
skeleton.png


<!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.

h5-group container.png

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

container.png

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

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

In het vorige hoofdstuk hebben we het kort gehad over inline-containers, containers die gebruikt worden voor kleine elementen voornamelijk tekst. In deze opdracht gaan we hier wat dieper op in.

Inline Containers

Inline containers zijn HTML-elementen die worden gebruikt voor het stylen van tekst of kleine stukjes inhoud zonder een nieuwe regel te beginnen, wat block containers wel doen (bijvoorbeeld: <div>) . Ze zijn handig wanneer je specifieke styling op delen van een tekst wilt doen, zoals het dik maken van een woord.

Hieronder een aantal veel gebruikte tekst formatting tags:

<span> </span>

<span> wordt gebruikt om een klein deel van de tekst of een groep inline elementen aan te geven. Het voordeel van een span vergeleken een <div> is dat een <span> geen nieuwe regel forceert op de tekst. (probeer dit uit als je nieuwsgierig bent)

<a> </a>

<a> wordt gebruikt om links te maken naar andere paginas of websites. Het kan tekst, afbeeldingen of andere tags bevatten. Het zorgt ervoor dat je erop kan klikken

<strong> </strong>

<strong> geeft aan dat de tekst extra belangrijk is en maakt deze vetgedrukt.

<em> </em>

<em> geeft aan dat de tekst extra nadruk heeft en maakt deze cursief.

<b> </b>

<b> maakt de tekst vetgedrukt.

<i> </i>

<i> maakt de tekst cursiefs.

<small> </small>

<small> maakt de tekst kleiner dan de rest van de tekst.

<mark> </mark>

<mark> markeert tekst met een achtergrondkleur om aan te geven dat deze belangrijk is. Zoals met een gele stift bij het studeren

Opdracht

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!

07 - Lists

Lists zijn containers die je gebruikt om items die verband hebben met elkaar te weergeven. HTML heeft verschillende soorten lijsten ieder met zijn eigen doel en opmaak.

In dit hoofdstuk laten we er 2 zien

Unorderd lists

Unorderd lists worden gebruikt om items weer te geven die geen specifieke volgorde hebben. Ze worden weergegeven met bullet points.

Starttag : in het onderstaande voorbeeld de <ul> (Unordered List)
List-items : in het onderstaande voorbeeld de <li> (List Items)

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

Ordered lists

Ordered lists worden gebruikt om items weer te geven die in een specifieke volgorde moeten staan. Ze worden weergegeven met nummers.

Starttag : in het onderstaande voorbeeld de <ol> (Ordered List)
List-items : in het onderstaande voorbeeld de <li> (List Items)

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

Opdracht

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!

08 - Tables

Tabellen worden gebruikt om gegevens in een grid vorm te presenteren, zoals bijvoorbeeld in excel. HTML heeft specifieke tags om tabellen te maken.

Standaard tabel

Een standaard tabel bestaat uit een <table> element met rijen ( <tr> )  en cellen ( <td> ).

Starttag : in het onderstaande voorbeeld de <table>

Rijen : in het onderstaande voorbeeld de <tr> (Table Row)

Cellen : in het onderstaande voorbeeld de <td> (Table Data)

“border=1”: zorgt ervoor dat je de tabel goed kan zien, anders zie je niet de onderstaande zwarte lijnen

Table Header

De tableheader wordt gebruikt om kolom koppen te maken. Het wordt gemaakt met de <th> tag.

Starttag : in het onderstaande voorbeeld de <th> (Table Header)

<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 3.png

Tussenopdracht

Tabellen Met Header, Body en Footer

Nu je een tabel hebt gaan we deze uitbreiden. Een uitgebreide tabel kan een kop ( <thead> ), een lichaam ( <tbody> ) en een voettekst ( <tfoot> ) hebben.

Dit helpt grote tabellen overzichtelijk te maken. Net zoals een HTML pagina, je kan het dus vergelijken met de semantische HTML elementen in een pagina. <header> , <body> , <footer>

<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 1.png

Gecombineerde Cellen

Met de attributen colspan en rowspan kun je cellen maken die uit meerdere columns of rows bestaan.

( colspan betekent dat een cel meerdere kolommen beslaat, en rowspan betekent dat een cel meerdere rijen beslaat.)

<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>

Opdracht

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!

09 - Forms

Forms zijn een manier om gegevens van de gebruiker te verzamelen en naar een andere plek te sturen. HTML heeft verschillende elementen om een formulier te bouwen.

Standaard Formulier

Een formulier bestaat uit een <form> element met verschillende invoerelementen, Met deze link kan je ze allemaal bekijken het zijn er 11 maar wij bespreken er maar een aantal hiervan.


Starttag : in het onderstaande voorbeeld de <form>

Invoerelementen : in het onderstaande voorbeeld de <input>

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

Het action attribuut verteld de form waar de data naar toe moet worden gestuurd wanneer er op de submit input word gedrukt. De method beschrijft hoe de data wordt verstuurd (in deze module is dat niet belangrijk)

Input types

Het input element wordt het meest gebruikt in forms en hebben verschillende types. Dit kan je aangeven met het type= attribuut in de input. De name attribuut geeft de naam van de variabele aan waar de data in komt te staan van het desbetreffende element in de 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">

input fields.png

Zoals je misschien al opvalt hebben deze input elements geen sluit tag, dit hoeft inderdaad niet.

Tussenopdracht

Andere invoerelementen

Naast <input> zijn er nog een aantal elemtenen die gebruikt worden in een form om data te verzamelen hier nog 2 voorbeelden.

Select

Wordt gebruikt om een enkele optie te selecteren uit een dropdown menu.

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

select.png

Textarea

Wordt gebruikt om grotere hoeveelheden tekst in te voeren.

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

Opdracht

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!

10 - Eindopdracht

Het doel van deze eindopdracht is om al je kennis van HTML toe te passen door een volledige webpagina te maken die gebruikmaakt van verschillende HTML-elementen en technieken die je hebt geleerd. Deze opdracht omvat elementen uit alle hoofdstukken van de module. Deze wordt uiteindelijk mondeling besproken.

Het gaat niet om het uiterlijk van de website maar het gaat om de code!

Je gaat een blog maken. Blog → “Een blog is een informatief of inspirerend artikel dat online staat, regelmatig verschijnt, een persoonlijk haakje heeft met een informele tone-of-voice en waarop lezers kunnen reageren.”

de blog bevat:

  1. Een blogpost met onderwerp naar keuze en bevat een table (Uitgebreide table met header body en footer) en een list met data
  1. De blogpost heeft minsten 4 vormen tekst formatting
  1. De blogpost heeft minstens 2 afbeelding(en)
  2. De blogpost heeft een logische layout/ structuur (alles is goed gegroupeerd met containers <div> <span> en logische semantische elementen)
  3. Review formulier over de blog

Naast de eindopdracht worden er ook theorie vragen gesteld over de module dus verwerk zoveel mogelijk in je eindopdracht en zet er commentaar bij des te minder je hoeft te onthouden!

Tips:

Inleveren

  1. Een schermafdruk van je hele browser waarop je blog te zien is.
  2. De HTML code
Front End

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:

    image-1717574533140.png

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:

p {
  color: blue;
}

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

.intro {
  font-size: 20px;
}

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

#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:

image-1717577805552.png

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

Voorbeeld:

image-1717586844812.png

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:

image-1717588788333.png


05 - Box Model en Layout

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

<!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:

image-1717590065334.png

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.

image-1717591361877.png

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:

image-1718105546995.png

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:

image-1718105173530.png

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:

image-1718105883522.png

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:

image-1718106256699.png

09 - CSS Grid Geavanceerd

Geavanceerd gebruik van CSS Grid:

image-1718106729521.png

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:

image-1718107350939.png

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:

image-1718108159159.png

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:

image-1718109222228.png

12 - Animaties met CSS

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

code:

image-1718109952546.png

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:

image-1718110369379.png


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:

image-1688328258540.png

Wireframes kun je bijvoorbeeld maken met Lucidchart of Powerpoint.

Screenshot 2023-07-14 143000.png

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:

Screenshot 2023-07-14 142428.png

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

Voorbeeld:

image-1718195684524.png

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

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:

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

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:

Als er weer op de knop wordt gedrukt dan worden:

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.

image-1712404637053.png

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
Regel
Uitleg
1
Zodra de DOM (HTML-document) is geladen voer de volgende code uit.
2
Laad alle cellen uit de tabel met het id rondeTellerTabel en de class rondes.
3
Itereer door alle gevonden cellen (iteren betekent 'doorlopen').
4
Laat alle gevonden cellen luisteren naar een click en als er een click plaatsvindt, roep dan de functie verhoogRondes aan.

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:

We hebben nog één extra eis:

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.

image-1712404975032.png

De eisen:

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:

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).

image-1712409645862.png

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:

    image-1712409789855.png


  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

image-1712418445270.png

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.

Inleveren

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


Front End

Flex Boxes

Basisstappen om Flexbox te gebruiken

.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

image.png

<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;

xx

Programmeren1

Programmeren1

Wat is Programmeren?

01 Inleiding

Inleiding

Wat is programmeren?

image-1681546166494.png

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

image-1681546405543.png

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

image-1681546689394.png

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:

image-1681475595555.png

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.

image-1681476608665.png

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

image-1681477008155.png

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:

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).

WhileloopinC2.png

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

Screenshot 2023-04-19 144156.png

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

Screenshot 2023-04-19 145429.png

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.


Programmeren1

Theorie PHP1

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

Wat is een webserver

Wat ga je leren?

In deze les leer je het verschil tussen een front-end taal en een back-end taal.

Je leert dat PHP een back-end taal is en dat je daarom een (web)server nodig hebt om PHP te kunnen gebruiken.

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.

Bestandssorrten Functie
HTML Basis opmaak van een webpagina
CSS Detail opmaak van een webpagina
JavaScript Interactie programmeren in de browser
PHP Interactie programmeren op de server

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 .

image-1655279215130.png

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.

Bestandssorrten Functie Waar
HTML Basis opmaak van een webpagina Front-end / browser
CSS Detail opmaak van een webpagina Front-end / browser
Javascript Interactie programmeren in de browser Front-end / browser
PHP Interactie programmeren op de server Back-end / server

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

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?

Ter voorbereiding van PHP gaan we in deze les leren hoe we XAMPP kunnen installeren.

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. Start Xampp en start daarna Apache en MySQL

    image-1653120218472.png


  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?

In alle programmeertalen gebruik je variabelen. In deze les leer je wat een variabele is en hoe je deze kan gebruiken.
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.

image-1653122885951.png               image-1653135643886.png

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)

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?

Variabelen heb je in alle soorten en maten. De twee belangrijkste zijn getallen en strings.


In deze les leer je wat een string variabele is en hoe je er in PHP mee kan werken.

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

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?

Een veel gebruikt type variabele is integer. In deze les je wat een integer variabele is en hoe je daar mee kan werken in PHP.

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.

Bewerking teken voorbeeld
optellen + echo $a + $b;
aftrekken - echo $a - $b;
vermenigvuldigen (keer) * echo $a * $b;
delen / echo $a / $b;

Ga door naar de opdrachten.

Condition if-then-else

Wat ga je leren?

Code wordt regel voor regel van boven naar beneden uitgevoerd, 

Je hebt echter ook code die alleen maar wordt uitgevoerd als er aan een voorwaarde (of conditie) is voldaan.
Hiervoor heb je conditional statements in PHP, if (in het Nederlands: als).


In deze les leer je hoe je met een if in PHP kan werken en hoe je dus kan zorgen dat code alleen wordt uitgevoerd als er aan die ene voorwaarde wordt voldaan.

IF

Stel je maakt een spel en je moet bepalen of de speler het juiste antwoord heeft gegeven:

  • Juiste antwoord? Score wordt verhoogd met 1.
  • Onjuiste antwoord? Score blijft hetzelfde.

Er komt dus alleen iets bij de score als er aan een voorwaarde is voldaan.

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.

teken voorbeeld betekent
= $antwoord = 12

De waarde van $antwoord wordt 12

== $antwoord == 12

Is de waarde van $antwoord gelijk aan 12?

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

teken voorbeeld betekent
== $antwoord == 12

Is de waarde van $antwoord  gelijk aan 12?

!= $antwoord != 12

Is de waarde van $antwoord ongelijk aan 12?

> $antwoord > 12

Is de waarde van $antwoord groter dan 12?

< $antwoord < 12

Is de waarde van $antwoord kleiner dan 12?

>= $antwoord >= 12

Is de waarde van $antwoord groter of gelijk aan 12?

<= $antwoord <= 12

Is de waarde van $antwoord kleiner of gelijk aan 12?

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?

In deze les leer je hoe je HTML en PHP samen kunt gebruiken.


Je leert ook het wat het include en require in PHP doet en hoe je dat kunt gebruiken.

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.";
?>
 <!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?

In deze les gaan we leren hoe we condities kunnen combineren.

We leren hoe we code alleen kunnen laten uitvoeren als er aan twee voorwaarden wordt voldaan.

En we leren hoe we code kunnen uitvoeren als er aan één van de twee voorwaarden wordt voldaan.

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



Betekenis Voorbeeld
&& and AND, aan beide voorwaarden moet zijn voldaan if ( $temperatuur >= 21 && $dagVanDeWeek == "za" ) {
|| or OR, aan één van beide voorwaarden zijn voldaan if ( $dagVanDeWeek == "za" || $dagVanDeWeek == "zo" ) {

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

KC.jpg

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

Inleveren

  1. Screenshot van je resultaat.
Programmeren1

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?

In deze les leer je het verschil tussen een front-end taal en een back-end taal.

Je leert dat PHP een back-end taal is en dat je daarom een (web)server nodig hebt om PHP te kunnen gebruiken.

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.

Bestandssoorten Functie
HTML Basis opmaak van een webpagina
CSS Detail opmaak van een webpagina
JavaScript Interactie programmeren in de browser
PHP Interactie programmeren op de server

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 .

image-1655279215130.png

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.

Bestandssoorten Functie Waar
HTML Basis opmaak van een webpagina Front-end / browser
CSS Detail opmaak van een webpagina Front-end / browser
JavaScript Interactie programmeren in de browser Front-end / browser
PHP Interactie programmeren op de server Back-end / server

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?

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:

  1. Het bestand opdracht1-jouw-naam.php
  2. Een schermafdruk van jouw hele browser scherm waarin dus ook de URL (web adres te zien is) te zien is en waarin je de output van jouw code laat zien.

Variabelen

Wat ga je leren?

In alle programmeertalen gebruik je variabelen. In deze les leer je wat een variabele is en hoe je deze kan gebruiken.
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.

image-1653122885951.png               image-1653135643886.png

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)

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.

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?

Code lezen en begrijpen wat er gebeurt.

Hiervoor krijg je code en worden er vragen over deze code gesteld. Je kunt alles gewoon zelf uitproberen, ga niet gokken, maar controleer je antwoorden door het zelf te proberen!

Als tweede opdracht in deze les krijg je een stukje code met twee foutjes. Kun jij deze foutjes vinden en oplossen?

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

KC.jpg

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

Inleveren

  1. Screenshot van je resultaat.
Programmeren1

PHP1

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

mijnNaam en mijnLeeftijd

Wat ga je leren?

Code lezen en begrijpen wat er gebeurt.

Hiervoor krijg je code en worden er vragen over deze code gesteld. Je kunt alles gewoon zelf uitproberen, ga niet gokken, maar controleer je antwoorden door het zelf te proberen!

Als tweede opdracht in deze les krijg je een stukje code met twee foutjes. Kun jij deze foutjes vinden en oplossen?

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?

Antwoord: ....


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

Antwoord: ....


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

Antwoord: ....


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

Antwoord: ....


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?

Antwoord: ....


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

Antwoord: ....


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.

Opdracht

Maak een nieuw bestand en noem dat php107a-jouw-naam.php

Maak de onderstaande code af op regel 4 (vervang de puntjes).
Plaats daar een vergelijking: controleer of de waarde van $variabele1 en $variabele2 gelijk zijn.

$variabele1 = 10;
$variabele2 = 10;

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

Inleveren

  1. php07a-jouw-naam.php

Bronnen

Jaap vd Veen - statements
W3 Schools - operators
W3 Schools - if else

Conditions 2

Opdracht

Maak een nieuw bestand en noem dat php107b-jouw-naam.php

Maak de onderstaande code af door de puntjes op regel 4 te vervangen door een vergelijking te maken. Controleer of de waarde van $variabele1 en $variabele2 ongelijk zijn.

$variabele1 = 10;
$variabele2 = 11;

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

Inleveren

  1. php07b-jouw-naam.php

Bronnen

Jaap vd Veen - statements
W3 Schools - operators
W3 Schools - if else

Conditions 3

Opdracht

Maak een nieuw bestand en noem dat php107c-jouw-naam.php

Maak de onderstaande code af door de puntjes op regel 4, 6 en 8 te vervangen. Maak een if-then-else constructie en zorg ervoor dat de juiste tekst op het scherm wordt weergegegeven.

$variabele1 = 10;
$variabele2 = 10;

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

Inleveren

  1. php107c-jouw-naam.php

Bronnen

Jaap vd Veen - statements
W3 Schools - operators
W3 Schools - if else

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

image-1654093629221.png

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

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:

Uitslapen1.png

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:

opg2.png

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:

table.png

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.

10%: boven de 21 graden, maar niet boven de 25 graden

15%: boven de 25 graden, maar niet boven de 30 graden

20%: boven de 30 graden

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

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:

temperatuur prijsBestelling Eindbedrag Correct (ja/nee)
20 40 44 ja/nee
20 42 42 ja/nee
22 42 41,8 ja/nee
30 10 12,5 ja/nee
50 5 8 ja/nee

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

10%: boven de 21 graden, maar niet boven de 25 graden

15%: boven de 25 graden, maar niet boven de 30 graden

20%: boven de 30 graden

Bezorgkosten

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

Inleveren

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

KC.jpg

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

Inleveren

  1. Screenshot van je resultaat.


Programmeren1

PHP2

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

Inleiding Arrays

Wat ga je leren?

In deze les leer je wat een array is en hoe je een array kan gebruiken. Je leert dat een array bestaat uit elementen.

Je leert dat alle elementen van een array een nummer hebben en dat de computer begint te tellen bij 0. Het eerste element van een array heeft hierdoor de key 0.

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 deze les gaan we leren wat een foreach loop is en hoe je daarmee makkelijk dingen met een array kan doen.

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?

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?

In alle programmeertalen heb je functies. Met functies kun je code opdelen in logsiche blokken en kan je veel voorkomende stukjes code hergebruiken.

In deze les leer je wat een functie is en hoe je die in PHP kan gebruiken.

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.

image-1654442163332.png

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:

PHP Function input Output Voorbeeld
strlen() string lengte van de string echo strlen("Hello");
str_word_count() string aantal woorden van de string echo str_word_count("Hello there!");

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.

image-1654445242685.png

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
input
functie
output
pasje + pincode
geldautomaat
cash
geld (+keuze) snoepautomaat
snoep
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:

function naam bedenk een logische naam
function input een getal, de temperatuur in graden celcius
function output een getal, de temperatuur omgerekend in graden fahrenheit

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.

Input Output
[12,3,21,5,3,20] 41
[12,3,21,5,3,20,21,3,2,1,-4,0] 42
[2,1] 3
[0,0] 0
[2] foutmelding: "array has only one value"

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.

In deze les leren hoe een array van een array er uit ziet en hoe je er met en zonder gebruikt te maken van een loop gegevens uit kan lezen.

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).

Input Output
mijnFunctie(3,2,1) 6
mijnFunctie(1,12,3) 16
mijnFunctie(0,4,0) 4
mijnFunctie(7,0,3) 10
mijnFunctie(0,0,0) 0

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.

Input Output
mijnFunctie(3,2,1) 6
mijnFunctie(1,12,3) 16
mijnFunctie(0,4,0) 0
mijnFunctie(7,0,3) 0
mijnFunctie(0,0,0) 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.

Input Output
mijnFunctie(3,2,1) 6
mijnFunctie(1,12,3) 16
mijnFunctie(0,4,0) 4
mijnFunctie(7,0,3) 10
mijnFunctie(0,0,0) 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.

Input Output
mijnFunctie(3,2,1) 0
mijnFunctie(1,12,3) 1
mijnFunctie(0,4,0) 0
mijnFunctie(7,0,3) 1
mijnFunctie(0,0,0) -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.

Input Output
mijnFunctie( [3,2,1] ) 6
mijnFunctie( [1,12,3,1,2] ) 19
mijnFunctie( [1,12,3,1,2,1] ) 20
mijnFunctie( [2,4] ) 6
mijnFunctie( [4] ) 4

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.

Uitslag Punten
1-3 0
4-0 3
0-0 1
1-1 1
0-2 0

FCR heeft dus in dit voorbeeld 5 punten.

Maak een functie die de punten aan de hand van de uitslagen berekend.

Input Punten
[ [1,3], [4,0], [0,0] ,[1,1],[0,2] ] 5
[ [1,1], [0,0], [0,2] ,[1,1],[0,2] ] 3
[ [1,1], [0,0], [0,0] ,[1,1],[2,2] ] 5
[ [1,0], [1,0], [2,0] ,[1,1],[0,2] ] 10
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.

Input Output
swap([1,2]) [2,1]
swap([3,2]) [2,3]
swap([1,1]) [1,1]
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


Programmeren1

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.

image-1727530367600.png

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).

Input Output
mijnFunctie(3,2,1) 6
mijnFunctie(1,12,3) 16
mijnFunctie(0,4,0) 4
mijnFunctie(7,0,3) 10
mijnFunctie(0,0,0) 0

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:

Screenshot 2022-10-05 153345.png

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.

Input Output
mijnFunctie(3,2,1) 6
mijnFunctie(1,12,3) 16
mijnFunctie(0,4,0) 0
mijnFunctie(7,0,3) 0
mijnFunctie(0,0,0) 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:

Screenshot 2022-10-05 154108.png

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.

Input Output
mijnFunctie(3,2,1) 0
mijnFunctie(1,12,3) 1
mijnFunctie(0,4,0) 0
mijnFunctie(7,0,3) 1
mijnFunctie(0,0,0) -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:

Screenshot 2022-10-05 160616.png

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.

Input Output
mijnFunctie( [3,2,1] ) 6
mijnFunctie( [1,12,3,1,2] ) 19
mijnFunctie( [1,12,3,1,2,1] ) 20
mijnFunctie( [2,4] ) 6
mijnFunctie( [4] ) 4

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.

Uitslag Resultaat Punten
1-3 verloren 0
4-0 gewonnen 3
0-0 gelijk 1
1-1 gelijk 1
0-2 verloren 0


FCR heeft in bovenstaand voorbeeld 5 punten.

Maak een functie die de punten aan de hand van de uitslagen berekend.

Input Punten
[ [1,3], [4,0], [0,0] ,[1,1],[0,2] ] 5
[ [1,1], [0,0], [0,2] ,[1,1],[0,2] ] 3
[ [1,1], [0,0], [0,0] ,[1,1],[2,2] ] 5
[ [1,0], [1,0], [2,0] ,[1,1],[0,2] ] 10


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.

Input Output
swap([1,2]) [2,1]
swap([4,2]) [2,4]
swap([1,1]) [1,1]

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.

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


Andere namen Hoe benader je een element? Voorbeeld
Indexed Array gewoon array, 1 dimensionaal array, eenvoudig array via de key, die is altijd 0,1,2,3,4.... $myArray[13]
Associatieve Array key-value array, dictionary (Python), hash table via de key, dit moet een unieke string zijn waarvan je zelf de waarde bepaald. $myArray['datum'];

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.

image.png

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)

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.




Programmeren1

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:

image.png

Voeg op deze manier een zelf verzonnen game toe met titel, uitgever, platform, voorraad en prijs.

Inleveren:

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)

image.png

Inleveren:

C1 - Ophalen uit database deel 1

Voor een bonuspunt:

Zet achter idere game-titel, het platform tussen haakjes. De output op het scherm ziet er dan uit als onderstaand plaatje:

image.png


Inleveren:

C2 - Ophalen uit database deel 2

Deze opdracht is een vervolg op de vorige opdracht.


Tip: Doe het stap voor stap:

image.png
Inleveren:

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)

d1-opdracht.png

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:

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:

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?

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:

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


Programmeren1

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:

image.png

Voeg op deze manier een zelf verzonnen game toe met titel, uitgever, platform, voorraad en prijs.

Inleveren:

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)

image.png

Inleveren:

C1 - Ophalen uit database deel 1


Voor een bonuspunt:

Zet achter idere game-titel, het platform tussen haakjes. De output op het scherm ziet er dan uit als onderstaand plaatje:

image.png


Inleveren:

C2 - Ophalen uit database deel 2

Deze opdracht is een vervolg op de vorige opdracht.


Tip: Doe het stap voor stap:

image.png
Inleveren:

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)

d1-opdracht.png

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:

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:

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?

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:

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


Programmeren1

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

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

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:

image-1656091001501.png

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

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

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.

Test Uitkomst
echo netEuro(12); € 12.00
echo netEuro(12.5); € 12.50
echo netEuro(12.6666); € 12.67

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

Opgave 6, onvoldoendes

Kijk naar het filmpje: https://www.youtube.com/watch?v=INHM0S_8GHA

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.

Input Output
echo onvoldoendes([6,6,7]);
echo onvoldoendes([6,3,6,7]); (array met één element ) 3
echo onvoldoendes($PHPCijfers); (array met de volgende elementen) 4,5,4,5,5,4

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

Opgave 7, Goedemorgen

Maak een PHP programmaatje dat afhankelijk van de tijd een boodschap afdrukt.

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:

Conditie Input Output
Het is 16:00 uur echo begroeting("Vasco"); Goedemidag Vasco
Het is 16:00 uur echo begroeting("Jesse"); Goedemidag Jesse
Het is 11:59 uur echo begroeting("Nadir"); Goedemorgen Nadir

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

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)

Input Output
echo telGroteGetallen( [10,20,20] ); 40
echo telGroteGetallen( [9, 10, 11] ); 11
echo telGroteGetallen($array); 34

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

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.

Input Output
echo kleineWoorden("dit is een voorbeeld"); 3
echo kleineWoorden("a b c d"); 4
echo kleineWoorden("abcd"); 0
echo kleineWoorden($string); 9

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

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.";
Input Output
echo kleineWoorden(4,"dit is een voorbeeld"); 3
echo kleineWoorden(3,"dit is een voorbeeld"); 1
echo kleineWoorden(1,"dit is een voorbeeld"); 0
echo kleineWoorden(0,"dit is een voorbeeld"); 0
echo kleineWoorden(2,"a b c d"); 4
echo kleineWoorden(6,"abcde"); 1
echo kleineWoorden(4,$string); 9
echo kleineWoorden(3,$string); 6
echo kleineWoorden(10,$string); 19

Maak een functie en test tenminste met de bovenstaande test cases.

Inleveren

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
Input Output
echo breekAf(32, "Deze student is erg goed in programmeren in PHP"); Deze student is erg goed in
echo breekAf(18, "Deze student is erg goed in programmeren in PHP"); Deze student is
echo breekAf(19, "Deze student is erg goed in programmeren in PHP"); Deze student is erg
echo breekAf(20, "Deze student is erg goed in programmeren in PHP"); Deze student is erg
echo breekAf(11, "Deze student is erg goed in programmeren in PHP"); Deze
echo breekAf(24, "Deze student is erg goed in programmeren in PHP"); Deze student is erg goed
echo breekAf(3, "Deze student is erg goed in programmeren in PHP"); <lege string>

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

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.

Screenshot 2023-02-13 171251.png

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.



Programmeren1

Herhaling Arrays en Loops

Opgave A

Pas de code aan zodat het land én de hoofdstad nast elkaar op één regel wordt afgedrukt.

Output

Nederland: Amsterdam
België: Brussel
Duitsland: Berlijn

Code
<?php
$landen = [
    "Nederland" => [
        "hoofdstad" => "Amsterdam",
        "inwoners" => 17000000,
        "talen" => ["Nederlands", "Fries"]
    ],
    "België" => [
        "hoofdstad" => "Brussel",
        "inwoners" => 11500000,
        "talen" => ["Nederlands", "Frans", "Duits"]
    ],
    "Duitsland" => [
        "hoofdstad" => "Berlijn",
        "inwoners" => 83000000,
        "talen" => ["Duits"]
    ]
];

foreach ($landen as $land => $info) {
    echo $info['hoofdstad'] . "<br>";
}
?>

Opgave B

De PHP code heeft een serie temperaturen per dag. Er zijn twee functies die het gemiddelde van de twee laagste waarden berekent en een functie die het gemiddelde van de twee hoogste waarden berekend.

Het programma werkt niet helemaal want er wordt tekens 0 afgedrukt.
Bestudeer de code en haal de (twee) fouten eruit. Hiervoor hoef je slechts twee regels aan te passen.

<?php
// Array met temperaturen per uur voor drie dagen (24 waarden per dag)
$threeDays = [
    'Day 1' => [12, 13, 14, 15, 11, 10, 9, 8, 7, 6, 5, 4, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
    'Day 2' => [15, 14, 13, 16, 17, 18, 19, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4],
    'Day 3' => [10, 11, 12, 13, 14, 15, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0, -1]
];

// Functie om het gemiddelde van de twee laagste waarden te berekenen
function averageLowestTwo($temperatures) {
    sort($temperatures);
    $lowestTwo = array_slice($temperatures, 0, 2);
    return array_sum($lowestTwo) / count($lowestTwo);
}

// Functie om het gemiddelde van de twee hoogste waarden te berekenen
function averageHighestTwo($temperatures) {
    rsort($temperatures);
    $highestTwo = array_slice($temperatures, 0, 2);
    return array_sum($highestTwo) / count($highestTwo);
}

// Loop door elke dag heen en bereken de gemiddelden
foreach ($threeDays as $day => $temps) {
    echo "$day:\n";
    $avgLowest = 0;
    $avgHighest = 0
    echo "Gemiddelde van de twee laagste temperaturen: $avgLowest\n";
    echo "Gemiddelde van de twee hoogste temperaturen: $avgHighest\n";
    echo "<br>";
}
?>

Yii

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

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.

Model Hierin staat waar de verbinding tussen jouw code en de database beschreven
View Dit is de front-end en is vooral HTML/CSS (bootstrap) met hier een daar een 'vleugje' PHP
Control Dit is waar je bepaald wat er gebeurt, als je op een knop drukt ergens dan wordt de code uit de bijbehorende control uitgevoerd.

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.


  image-1594413597727.png


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?

image.png

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.

image-1618344180761.png

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:

Screenshot 2022-05-20 183633-1.png

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.)


image-1594285274135.png


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.)

image-1618227641051.png

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.

image-1618227971123.png

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.

image-1612557541726.png

(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.)

image-1594288457454.png

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:

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.

image-1612558210976.png

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:

image-1612558884647.png

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:

image-1594292626981.png

Onderdeel Wat is het? Uitleg
Scheme protocol hoe wordt de informatie verzonden (http, https, ftp, smb, file, ...)
domain name domein domein verwijst naar een server of een groep servers.
file path path verijst naar de file die de webserver moet 'uitvoeren'
parameters variabelen hiermee kun je informatie naar de webserver sturen.
anchor verwijzing binnen de pagina hiermee kun je naar een onderdeel van de pagina springen.
Voorbeeld: https://www.roc.ovh/link/302#bkmrk-nog-een-keer-in-sche

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?

image-1613336806883.png


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:
path file public function
/kaart/overzicht KaartController actionOverzicht
/klas-lokaal/overzicht klasLokaalController actionOverzicht
/klas-lokaal/stoel-maat klasLokaalController actionStoelMaat
/klas-lokaal/index klasLokaalController actionIndex
/klas-lokaal klasLokaalController actionIndex

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:

image-1594296881002.png


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:

    image-1613993167595.png


  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:

    image-1613993783698.png


    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:

    image-1615820099350.png

    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'.

    image-1614009669414.png


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.

image-1614009669414.png

--

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.

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'.

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

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!

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):

image-1614025244735.png

Test of dit werkt!

Met de Yii module Html kunnen we dit eenvoudiger doen.

We vervangen de regel die de waarde returned in:

image-1614026085274.png

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.

image-1614026443516.png


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:

image-1614026822965.png


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:

image-1617127616569.png



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



Aan het einde heb je jouw gridview aangepast en ziet het er zo uit:

image-1656156229447.png


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

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.

Screenshot 2023-02-13 171251.png

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?

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.


image-1614620329168.png


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




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

Maak de function actionOverzicht in de CountryController zoals hierboven is aangegeven.

Als je alle stappen goed hebt doorlopen krijg je als deze code aanroept een foutmelding.

image-1614623472969.png 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

Maak de view overzicht zoals hierboven is aangegeven.

Het overzicht is bijna niet geformatteerd.

image-1614627165703.png

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.

Verander de /view/country/overzicht nu zo dat het netjes in een table wordt gezet. De output komt er als volgt uit te zien:


image-1614627534845.png

De kolommen staan nu dus netjes onder elkaar.


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

--

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

image-1614629726011.png


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

Selectie (SurfaceArea < 100000)


Opdracht

Inleveren

Hoofdstad


Opdracht

Lees de uitleg (op de vorige pagina) goed door en plaats de kolom hoofdstad in het overzicht.


image-1615887892142.png


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 .

image-1615896595590.png


Inleveren

  1. Jouw aangepaste country view. Plaats in je country view commentaar met jouw naam.

Eén taal


Opdracht

Lees de uitleg hierboven goed door. Druk in de laatst kolom n taal af.


image-1616504705123.png


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:
image.png

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

Gebruik de loop zoals hierboven is aangegeven, vul deze aan en maak het volgende overzicht.


image-1616505080100.png


Zorg ervoor (met CSS) dat de tabel er netjes uitgelijnd uit ziet zoals hierboven in het voorbeeld.


Je hebt nu een 1:N ( n op meer) relatie gemaakt. In volgende lessen gaan we hier opnieuw mee aan de slag.

Inleveren


Percentage



Opdracht

In de Countrylanguages tabel staat naast de taal ook het percentage. Dit is het percentage van de bevolking dat deze taal spreekt. Zet dit percentage tussen haakjes achter elke taal. Voorbeeld:


image-1616505413868.png


Inleveren

    • 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

Screenshot 2022-12-25 101520.png

Sorteren


Opdracht

Sorteer de talen op percentage aflopend van hoog naar laag. Op die manier komt de meest gesproken van een land bovenaan.


image-1616506111435.png

Tip: gebruik Google om te zoeken hoe je de relatie in het model verandert zodat je aflopend kunt sorteren.



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

Yii 3

Koffie opdracht

De opdracht

Maak de coffee database met de drie tabellen, menu , medewerker en bestelling .

Maak voor elke tabel een CRUD.


Volg de stappen hieronder om dit uit te voeren.


In stap 1 maak je een nieuwe database

In stap 2-6 maak je een nieuw Yii project aan. De uitgebreide instructie met voorbeelden kan je vinden in les 1.


In stap 7-12 maken we de tabellen en de CRUD pagina's.


Voer stap 1 tot en met 13 uit.


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)

image-1616594908052.png

Genereer het model en de CRUD voor medewerkers in Yii en zet de volgende namen in de database.utmelding meer krijgt.

image-1616594707813.png

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

image-1616595011664.png

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.

image-1616594739223.png


Bestelling

Maak nu de tabel bestelling in de database.

image-1616595477669.png

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:

image-1616595571596.png

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!).
Screenshot 2022-11-30 160819.png

--

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?

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, ....).

Statisch betekent dat de waarden niet veranderen. Het tegenovergestelde is dynamische en dat betekent dat de waarden veranderen, omdat deze waarden bijvoorbeeld uit de database komen.

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

Screenshot 2022-11-28 195157.png

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.

image-1616605065315.png

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

Maak nu een drop down voor de bestelling zodat de medewerker
uit een lijstje van koffiesoorten kan kiezen bij het opnemen van
de bestelling.

image-1616605448841.png

Gebruik hiervoor het stappenplan dat hieronder is beschreven.

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?

Aanpassen update view

Weet je nog dat de -update view niet rechtstreeks door de actionCreate van de BestellingController wordt aangeroepen?

Hoe zit dat nu?

image-1616610519616.png

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

Zorg ervoor dat de update weer werkt en dat de objecten op de juiste manier worden doorgegeven. Lees hiervoor de uitleg die op de vorige pagina staat.


Pas de actionUpdate in de BestellingController aan.

Pas de update view van de BestellingController aan.


Zorg dat de update van een Bestelling goed werkt.

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.

Pas de labels in het form aan zodat er Medewerker, Klantnaam, Bestelling en Status Bestelling komt te staan:


image-1616611684520.png


Zoek zelf uit hoe dit moet. Tip gebruik de zoektermen:


How to change label text of the ActiveField?


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

Zorg er nu voor dat je vanuit de controller de medewerkers opvraagt en deze verstuurd naar de index view.


Gebruik de

 

ArrayHelper::map()

functie om je object om te zetten in een list.


En gebruik de list dan in de gridview.

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

Pas tenslotte het label aan en zorg ervoor dat de kolom waarin de medewerker wordt getoond in de gridview (van de index view van bestelling) er als volgt uit ziet:


image-1616622153704.png


Als er een naam wordt geselecteerd dan worden alle bestellingen die door deze medewerker zijn uitgevoerd geselecteerd.



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

In deze opdracht gaan we alle stappen die we hebben uitgevoerd om de kolom Medewerker aan te passen nog een keer uitvoeren maar nu voor de kolom menu_id .


Pas de menu_id kolom aan in het bestellingenoverzicht ( index view van Bestelling ).


Zorg ervoor dat je met een drop down alle koffie soorten ( menu ) kunt selecteren. Je kunt dan dus alle bestellingen 'Americano' opzoeken.


image-1616622602808.png


Zorg ervoor dat je de juiste relatie legt tussen de Bestelling en Menu .


Pas dan de grid view aan zodat je in de bestelling kolom geen id's meer ziet, maar dat je de naam van de bestellingen ziet.


image-1616622580235.png


Let ook op het label. Dit is veranderd van menu_id naar Bestelling .


Succes!


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

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

image-1655803735254.png

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:

Zorg dat je de antwoorden weet op de bovenstaanden vragen en dat je in code kan aanwijzen waar bepaalde onderdelen staan.

--


Python

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:

Gebruik alle bronnen die je kan vinden om zo snel als je kunt iets te ontwikkelen, maar zorg er altijd voor dat je elke regel code begrijpt.

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:

image-1688543576041.png

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.

image-1688543664694.png

Python heeft dus Nederlandse roots.

Maar wat heeft Python zo bekendgemaakt?


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:

Screenshot 2023-07-10 134645.png

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

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)
    

Uitleg

Met @app wordt een route bepaald. Zo wordt er bijvoorbeeld bepaald dat als er wat naar /greet wordt gepost, de functie def greet(): wordt uitgevoerd.
render_template opent een html tempate en in het voorbeeld bij greet() wordt de variabele name meegegeven en die krijgt de waarde van name. (de eerste name is de naam die je in de template kan gebruiken en de tweede name is de variabele).

Heb je meer vragen over de code, zoek het dan op (internet, ChatGPT) of vraag het aan de docent.

  1. Maak een templates -map in dezelfde directory als het Python-bestand.

  2. Maak een nieuw HTML-bestand genaamd index.html in de templates -map en open het met een teksteditor.

  3. 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>
  1. Maak een nieuw HTML-bestand genaamd greet.html in de templates -map en open het met een teksteditor.

  2. 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>

Uitleg

De templates in Flask, zijn JINJA tempaltes. Dit zijn HTML templates waarin variabelen kunnen worden afgedrukt. In dit voorbeeld {{ name }}.

Een JINJA template kan ook code bevatten dat staat tussen {% en %}, daarover later meer.

  1. Sla zowel het Python-bestand ( app.py ), het index.html -bestand als het greet.html -bestand op.

  2. Ga naar de opdrachtprompt of terminalvenster en navigeer naar de projectdirectory waar het Python-bestand zich bevindt.

  3. Voer het volgende commando in: python app.py.

  4. Flask start de ontwikkelingsserver en geeft een URL weer, http://127.0.0.1:5000/ .

  5. Open de weergegeven URL in je webbrowser en je zou een formulier moeten zien waar je je naam kunt invullen en verzenden.

  6. 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.

Inleveren

  1. Schermafdruk van de gehele browser van de pagina waarin je de naam moet invullen, en
  2. schermafdruk van de gehele browser van de pagina waarin de boodschap wordt getoond.



Aanpassen app en form


Neem de code die je bij de vorige opdracht hebt gemaakt als uitgangspunt.

Pas de code die aan de route /greet is verbonden aan:

@app.route('/greet', methods=['POST'])
def greet():
   current_time = datetime.now().strftime('%H:%M:%S') current_date = datetime.now().strftime('%Y-%m-%d') name = request.form.get('name') return render_template('greet.html', name=name)


Je ziet dat er twee variabelen zijn bijgekomen, current_time en current_date.

In de HTML template moet je deze waarden afdrukken. Je moet daarvoor twee dingen doen:

  1. Zorg ervoor dat je de waarden current_time en current_date doorgeeft aan de HTML-template.
    Pas daarvoor de laatste regel van de def greet():  aan.
    Gebruik Internet of ChatGPT om uit te vinden hoe dat moet.
  2. Pas de Jinja template aat en zorg ervoor dat de datum en tijd wordt afgedrukt.

Inleveren

  1. Aangepaste code in app.py (waar de def greet() in staat, en
  2. aangepaste Jinja template, waar de datum en tijd wordt afgedrukt.

Welke dag?


Inleiding

Weet jij op welke dag van de week jij bent geboren?

We gaan een formulier waarin we de gebruiker om een datum vragen. Python bepaald dan op welke dag van de week deze datum valt en toont dat aan de gebruiker.

Jij voert dus (bijvoorbeeld) jouw geboortedag in en jouw programma berekend dan dat jij op een maandag bent geboren.


App.py

De app.py ziet er als volgt uit:

from flask import Flask, render_template, request
import datetime

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        date_string = request.form['date']
        date_object = datetime.datetime.strptime(date_string, "%Y-%m-%d")
        day_as_number = date_object.weekday()
      days_of_week_array = ['Maandag', 'Dinsdag', 'Woensdag', 'Vrijdag', 'Zaterdag', 'Zondag']
        day_of_week = days_of_week_array[day_as_number] 
      return render_template('template.html', day_of_week=day_of_week)
  return render_template('template.html')

if __name__ == '__main__':
    app.run(debug=True)


De functie index() kijkt eerst of er een post is gedaan of dat er een pagina wordt opgevraagd. Als er een post is gedaan dan moet het resultaat worden berekend en worden getoond en anders moet de gebruiker eerst om input worden gevraagd (index.html).

Er zijn dus twee manieren om de functie te returnen: via de result.html template of via de index.html template.

Opdracht

Maak een werkende (Flask) app en plaats alle bestanden op de juiste plaats.

De templates die je moet gebruiken staan hieronder.Neem de code van de app.py over en vul de juiste template in. Vervang de 'template.html' voor de juiste template naam!

De templates zelf staan hieronder.

Je moet dus de volgende stappen uitvoeren:

  1. Zet alle bestanden in de juiste folders en laat de Flask app werken.
  2. Zorg dat de juiste templates worden aangeroepen; vervang hiervoor de 'template.html' in de app.py
  3. Probeer te begrijpen hoe de app werkt en voorzie de app.py van commentaar.
    Plaats in ieder geval commentaar bij regels 9, 10 en 11 (de eerste drie regels na de if). Leg in eigen woorden uit wat deze regels doen en plaats dat in het commentaar.
  4. Test of alles werkt; er zit één foutje in de code. Corrigeer deze fout en lever de gecorrigeerde code van app.py in.

Templates

We hebben twee templates, die moeten beiden in de template directory staan.

De index.html template ziet er als volgt uit:

<!DOCTYPE html>
<html>
<head>
    <title>Dag van de week</title>
</head>
<body>
    <h1>Vind de dag van de week</h1>
    <form method="POST" action="/">
        <label for="date">Voer een datum in:</label>
        <input type="date" id="date" name="date" required>
        <br><br>
        <input type="submit" value="Vind dag van de week">
    </form>
</body>
</html>

En de result.html ziet er als volgt uit:

<!DOCTYPE html>
<html>
<head>
    <title>Dag van de week</title>
</head>
<body>
    <h1>Dag van de week</h1>
    <p>De opgegeven datum valt op een: {{ day_of_week }}</p>
    <a href="/">Terug naar startpagina</a>
</body>
</html>


Inleveren

  1. Zorg dat de app werkt en dat er commentaar wordt toegevoegd en lever alleen de app.py in.

Weersvoorspelling 1


We gaan een eenvoudige webapplicatie maken die een weersvoorspelling laat zien.

API

We halen de informatie van https://www.weatherapi.com registreer je daar voor een gratis account. Je krijgt dan een API key, zeg maar een sleutel die toegang geeft tot de weersvoorspelling.

Als je de key hebt dan gaan we verder.

Flask app

Maak een nieuwe Flask app. Maak een nieuwe folder en noem die bijvoorbeeld weather .

In weather maak je een bestand app.py en je maakt twee folders templates en static .

Screenshot 2023-07-11 210134.png

In het bestand app.py zetten we de volgende code.

from flask import Flask, render_template, request
import requests

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/forecast', methods=['POST'])
def forecast():
    country = request.form.get('country')
    city = request.form.get('city')

    api_key = 'your_weather_api_key'  # Vervang dit met je eigen WeatherAPI-sleutel

    url = f'http://api.weatherapi.com/v1/forecast.json?key={api_key}&q={city},{country}&days=3'

    response = requests.get(url)
    data = response.json()

    forecast_days = data['forecast']['forecastday']

    return render_template('forecast.html', country=country, city=city, forecast_days=forecast_days)

if __name__ == '__main__':
    app.run(debug=True)

Plaats de persoonlijke API key die je hebt gekregen in de code.

De applicatie werkt als volgt:

  1. Je gaat naar localhost:5000 en via de route functie in de app wordt de pagina geopend die in de template index.html staat.
  2. Deze index.html is een form waarin de gebruiker wordt gevraagd om input; de naam van het land en de naam van de stad.
  3. Het formulier wordt gepost naar de route /forecast en daar wordt het ingevoerd land en stad gebruikt om via de API een weersvoorspelling op te vragen.
  4. De voorspelling wordt getoond met de template forecast.html.

Zorg dat je dit goed begrijpt want je moet zo een paar onderdelen zelf aanvullen.

Allereerst moet je de twee templates maken in de templates folder:

  1. index.html
  2. forecast.html

In index.html zet je de volgende code:

<!DOCTYPE html>
<html>
<head>
    <title>Weersvoorspelling</title>
</head>
<body>
    <h1>Weersvoorspelling</h1>
  <form action="!!zet hier de juiste action in!!" method="POST">
        <label for="country">Selecteer een land:</label>
      !! Zet hier de html-code in om een land in te kunnen voeren.!!
!! Zorg ervoor dat je juiste naam gebruikt, want die heb je nodig in de code die je aanroept als je het formulier post.!!
        <label for="city">Selecteer een stad:</label>
        <input type="text" id="city" name="city" required><br><br>
        <input type="submit" value="Zoek weersvoorspelling">
    </form>
</body>
</html>

Let op in de index.html is het formulier niet helemaal af:

  1. je moet nog invullen waarnaar toe het formulier moet worden gepost en;
  2. je moet nog een <input> maken.

In de code staat met !! aangegeven waar je iets moet aanpassen. Dus alles tussen !! en !! moet je vervangen door eigen code!

In forecast.html zet je de volgende code.

<!DOCTYPE html>
<html>
<head>
    <title>Weersvoorspelling</title>
</head>
<body>
    <h1>Weersvoorspelling voor {{ city }}, {{ country }}</h1>
    <table>
        <tr>
            <th>Datum</th>
            <th>Min Temperatuur</th>
            <th>Max Temperatuur</th>
            <th>Weersomstandigheden</th>
        </tr>
        {% for day in forecast_days %}
            <tr>
                <td>{{ day['date'] }}</td>
                <td>{{ day['day']['mintemp_c'] }}°C</td>
                <td>{{ day['day']['maxtemp_c'] }}°C</td>
                <td>{{ day['day']['condition']['text'] }}</td>
            </tr>
        {% endfor %}
    </table>
</body>
</html>

De forecast template is helemaal compleet.

Pas de template index.html aan en maak de applicatie werkend.

Inleveren

  1. De aangepast index.html.
  2. Een screenshot waarin je de weers voorspelling laat zien van Amsterdam. Vul hiervoor bij land Netherlands en bij stad Amsterdam.

Zorg dat alles goed werkt want in de volgende opdracht gaan we onze app uitbreiden.

Voorbeeld

Screenshot 2023-07-11 211742.png



Weersvoorspelling 2


We nemen de code van de vorige opdracht als uitgangspunt.

API output bestuderen

Zet in de app.py na de regel waar de url variabele wordt gemaakt (waarschijnlijk regel 18), de vogelende regel code:

print(f"{url}")

Draai het programma nog een keer en zoek in het cmd window de url die je net hebt  afgerdukt op.

Screenshot 2023-07-11 212742.png

De API key is hier onleesbaar gemaakt.

Kopieer de URL in de browser en bestudeer de JSON die je terug krijgt.

Als je goed kijkt dan zie je ook dat de tijd dat de zon opkomt  en ondergaat ook in JSON staat ( sunrise en sunset ).

Pas de code aan zodat je de volgende output krijgt:

Screenshot 2023-07-11 213749.png

  1. Bedenk eerst welk bestand (template) je moet aanpassen.
  2. Zoek in de JSON hoe de structuur in elkaar zit en hoe je de tijden van sunrise en sunset kan ophalen.
  3. Bereid de tabel uit met twee kolommen en vergeet de kolom headers <th> niet.
  4. Maak met CSS of Bootsptrap (of een ander CSS framework) jouw tabel netjes zoals in het voorbeeld.

Succes!

Inleveren

  1. forecast.html
  2. een schermafdruk van de tabel waarin de twee extra kommen Zon op en Zon onder worden afgedrukt.


Weersvoorspelling 3


We gaan een laatste stukje toevoegen aan onze code.

De opdracht is om de voorspelling er als volgt uit te laten zien.

Screenshot 2023-07-11 215151.png

Wat er is bijgekomen zijn de drie icoontje boven aan de tabel.

  1. In de JSON die de API terug geeft staat een link naar het juiste  icoontje (zoek naar 'icon').
  2. Gebruik die link om een <img> af te drukken in de template.
  3. Zet dan de datum (die je al hebt want die wordt in de eerste kolom van de tabel afgedrukt), voor het icoontje.

Nu wordt het lastig.

Probeer de datum om te zetten in een dag van de week (eerst in het Engels) en als het je lukt daarna in het Nederlands. Gebruik internet en ChatGPT.

Inleveren

  1. app.py
  2. een schermafdruk van je geheel browser met daarin de de dag van de week en de icoontjes boven de tabel zoals in het voorbeeld is aangegeven.

Succes!



Python

Python 3 - Game of Pong

Opdracht 1 - het scherm

Inleiding

In deze module gaan we een oud spel 'Pong' maken. Pong is een oud Arcade-spel en je keert een hiermee een paar basis concepten van game development.

Deze module is niet makkelijk. Lees goed wat er staat en probeer de code te begrijpen. Begrijp je de code niet, dan loop je vast verderop in de cursus.

Houd je aan de opdracht. Een alternatieve versie van Pong (via AI) wordt niet geaccepteerd. Tevens wordt code waar niet om is gevraagd ook afgekeurd.

Nogmaal lees goed wat er staat en vraag telkens aan het eind van de opdracht of je alles begrijpt. Indien niet lees de opdracht dan nog een keer door. Vraag een mede student en als je er dan nog niet uitkomt vraag de docent.

turtle

We gaan gebruik maken van de turtle module van Python.

import turtle

De turtle module in Python is een eenvoudige manier om grafische tekeningen te maken door middel van een virtuele "schildpad" die over het scherm beweegt en lijnen tekent.

De turtle-module gebruiken we om grafische objecten te maken en te verplaatsen. Het helpt ons om het speelveld, de paddle, en de bal te tekenen.

Nadat de turtle module is geïmporteerd, maken we een window (venster) voor het spel.

# Venster instellen
wn = turtle.Screen()
wn.title("Pong voor <Jouw Naam>")
wn.bgcolor("black")
wn.setup(width=800, height=600)
wn.tracer(0)

input("Press any key to continue...") # tijdelijke toevoeging t.b.v. testen

Hier maken we een venster met de titel "Pong voor<Jouw Naam>". Vervang <Jouw Naam> door jouw naam.

De achtergrondkleur is zwart en de afmetingen van het venster zijn 800 bij 600 pixels. Met wn.tracer(0) zorgen we ervoor dat het scherm alleen ververst als wij dat willen, wat handig is voor het maken van animaties.

Opdracht

Test de code.

Leg in je eigen woorden uit waarom regel 8 in de code staat. Wat heeft regel 8 te maken met testen?

Wat gebeurt er als deze regel er niet in staat.

Inleveren

Korte uitleg in eigen woorden waarom regel 8 in de code staat.


Opdracht 2 - paddle

In deze opdracht maken we een paddle voor de speler. De paddle is een rechthoek die de speler kan verplaatsen om de bal terug te kaatsen.

We gaan ook leren wat coördinaten zijn.

De code voor de paddle:

# Paddle
paddle = turtle.Turtle()
paddle.shape("square")
paddle.color("white")
paddle.shapesize(stretch_wid=6, stretch_len=1)
paddle.penup()
paddle.goto(0, 0)

wn.update()
Uitleg:
Coördinaten

Het scherm is verdeeld in coördinaten. Een coördinaat is (0,0) en dat is het midden van het scherm.

Het eerste cijfer wordt de x-waarde genoemd en is de horizontale positie (links-rechts).

Het tweede cijfer wordt de y-waarde genoemd en is de verticale positie (boven-beneden).

Het eerste cijfer in een coördinaat is de x-waarde en de tweede coördinaat is de y-waarde.
De x-waarde geeft de horizontale postie weer en de y-waarde geeft de vertikale positie weer.

Voorbeelden

(10,0) x-waarde is 10 en de y-waarde is 0; 10 punten rechts van het midden.
(0,10)  10 punten boven het midden.
(-10,0) 10 punten links van het midden.
(0,-10) 10 punten onder het midden
(10,-10) 15 punten rechts en dan 10 naar beneden vanuit het midden.

Opdracht

Verander de code zodat de paddle aan de linkerkant van het scherm staat. Hiervoor moet je dus de coördinaten aanpassen.

image-1716544749432.png

Test je programma uit en zorg ervoor dat je een witte paddle ziet aan de linkerkant van het venster.

Inleveren

Screenshot van het scherm waarin je de paddle ziet.


Opdracht 3 - paddle bewegen

We gaan ervoor zorgen dat je de paddle kan bewegen.

De paddle kan twee richtingen op: up (naar boven) en down (naar beneden).

We maken eerst twee functies die de paddle up of down kunnen bewegen.

def paddle_up():
    y = paddle.ycor()
    if y < 250:
        y += 20
    paddle.sety(y)

def paddle_down():
    y = paddle.ycor()
    if y > -240:
        y -= 20
    paddle.sety(y)

# Toetsenbordbinding
wn.listen()
wn.onkeypress(paddle_up, "w")
wn.onkeypress(paddle_down, "s")    
Uitleg:

Als we deze code plaatsen dan gebeurt er nog niets. Dat komt omdat we de coördinaten wel veranderen, maar we doen geen scherm-update.

Gedurende het spel moeten we telkens een scherm update uitvoeren. Dit doen we in een loop die we voor nu even 'oneindig maken' (stopt niet vanzelf).

while True:
    wn.update()

Deze loop wordt ook wel de game loop genoemd.

De game-loop is het programma-onderdeel dat steeds controleert of er iets gebeurt en tekent telkens een nieuw scherm tekent.

Opdracht

Test je spel uit en als het goed is, kan je de paddle bewegen.

Tip: Omdat de code nu een game-loop heeft, zal je deze moeten onderbreken met een CTRL-C in de command prompt waar je het spel hebt gestart.

Inleveren

De gehele werkende code (.py) tot nu toe.


Opdracht 4 - de bal

Om te beginnen maken we een bal, op eenzelfde manier als we de paddle hebben gemaakt.

Deze code staat boven de game-loop.

# Bal
ball = turtle.Turtle()
ball.shape("square")
ball.color("white")
ball.penup()
ball.goto(0, 0)
ball.dx = 0.1
ball.dy = -0.1
Uitleg:

Test

Test je code uit. Als het goed is zie je een stilstaande bal in het midden van het scherm.

Beweging

Waarom beweegt de bal niet??

Dat komt omdat de coördinatoren van de bal niet worden aangepast.

In de game-loop, voor het updaten van het scherm, gaan we dit doen met deze code.

# Beweeg de bal
ball.setx(ball.xcor() + ball.dx)
ball.sety(ball.ycor() + ball.dy)
Uitleg:

Test

Test je code uit. Je ziet nu een bewegende bal, die vrij snel het beeld uit verdwijnt.

Opdracht

Leg in eigen woorden uit waarom de bal uit het scherm verdwijnt.

Inleveren

Korte uitleg waarom de bal van het scherm verdwijnt in eigen woorden.


Opdracht 5 - bal stuitert terug

Je weet nu dus waarom de bal van het scherm verdwijnt?

De vraag is nu: wat doen we eraan?

Het punt is dat als de bal de randen van ons scherm nadert de bal terug moet 'stuiteren'.

Dat betekent dat we moeten detecteren wanneer de bal de randen bereikt en dat we dan de richting van de bal moeten veranderen.

Laten we proberen te detecteren als de bal de rand raakt en als dat zo is dan veranderen we de richting.

Daarvoor plaatsen we deze code in de game-loop.

# detecteer randen van het scherm
if (ball.xcor() > 200 or ball.xcor() < -200 ):
   ball.dx *= -1
if (ball.ycor() > 200 or ball.ycor() < -200 ):
   ball.dy *= -1

De ball.dx en ball.dy geven de snelheid in horizontalen- en verticale richting aan.

Er staat dus: als de x-coördinaat van de bal groter dan of kleiner dan een bepaalde waarde is, vermenigvuldig dan de horizontale snelheid met -1. Stel de snelheid is 1 dat wordt deze dan -1 en stel de snelheid is -1 dan wordt die 1. Dus als de snelheid naar rechts is, dan gaat die naar links en andersom.

Hetzelfde gebeurt met de y-coördinaat.

Test

Test je code uit. Je ziet nu een bewegende bal, die terug stuitert, maar niet precies bij de randen van het scherm.

Taak 1

Pas de code aan zodat de bal werkelijk aan de rand van het scherm terug 'stuitert'. Pas hiervoor de coördinaten in de code aan.

Taak 2

Zorg ervoor dat de bal aan alle kanten van het scherm terug stuitert, maar niet als die aan de linkerkant komt.

Dus de bal stuitert terug als die aan de onder-, boven of rechterkant komt, maar niet als die aan de linkerkant komt.

Inleveren

De aangepaste volledige code tot nu toe.


Opdracht 6 - raak of mis?

De bel verdwijnt nu als die aan de linkerkant van het scherm komt. Dat is goed, behalve als daar de paddle staat. We moeten dus code maken in de game-loop die detecteert of de ball en de paddle elkaar raken.

# Detecteer botsing met paddle
if (ball.dx < 0 and ball.xcor() < -350): # ball beweegt naar links en zit bij de linker zijkant.
    if (paddle.ycor() - 60 < ball.ycor() < paddle.ycor() + 60): # bal 'raakt' de bal
        ball.dx *= -1 # beweeg de bal de andere kant uit (horizontaal)
        ball.dy *= -1 # beweeg de bal de andere kant uit (verticaal)
    else:
        ball.dx = 0 
        ball.dy = 0
Uitleg:

Test

Test je code uit. Op zich moet het spel nu werken. De bal verdwijnt als je hem mist maar als je de bal raakt met de paddle dan stuitert de bal terug.

Opdracht

Maak een variabele score.

# Score variabele
score = 0

Telkens als je de bal raakt dan verhoog je de score.

Om te testen of het werkt, druk je telkens nadat de score is, verhoogt de variabele score af.

score = score + 1
print(score)

Speel het spel en houd je cmd-windows in de gaten. Als het goed is wordt de score daar afgedrukt.

Inleveren

Eens schermafdruk van het gehele cmd-window waarin de score wordt afgedrukt.



Opdracht 7 - Score op scherm

Weg hebben een variabele score. Deze gaan we op het scherm plaatsen.

Om de score bij te houden en op het scherm te tonen maken we een nieuw turtle object.

# Score variabele
score = 0

# Pen om de score weer te geven
pen = turtle.Turtle()
pen.speed(0)
pen.color("white")
pen.penup()
pen.hideturtle()
pen.goto(0, 260)
pen.write("Score: 0", align="center", font=("Courier", 24, "normal"))

def update_score():
    pen.clear()
    pen.write("Score: {}".format(score), align="center", font=("Courier", 24, "normal"))

We hebben nu een 'lege score', om die te vullen maken we een functie.

def update_score():
    pen.clear()
    pen.write("Score: {}".format(score), align="center", font=("Courier", 24, "normal"))

We hebben de functie om de score op het scherm af te drukken. Wat we nu moeten doen is de score telkens als die is veranderd opnieuw op het scherm zetten.

update_score()  # Werk de score weergave bij

Als de code werkt dan kan de print() die we in de vorige opdracht hebben geplaatst uit de code worden gehaald.

Inleveren

Eens schermafdruk van het spel waarbij de score wordt getoond. Zorg ervoor dat er een score hoger dan 0 wordt getoond.

Voorbeeld

image-1716630823508.png


Opdracht 8 - Levens

Telkens als het spel stop omdat je de bal niet hebt geraakt me de paddle, stop het spel.Het spel stopt door de bal stil te zetten. De x- en y-snelheid wordt op 0 gezet.

Dit gaan we aanpassen. Je begint met drie levens en telkens als je de bal mist, stopt het spel voor 3 seconden. Als je nog genoeg levens hebt, zal het spel na 2 seconden weer verder gaan. De bal verandert van richting (terug naar recht) en de snelheid wordt weer op de beginwaarde 0.1 gezet.

Als je levens op zijn dan stopt het spel en wordt er in het midden van het scherm 'Game Over' getoond.

Stappenplan

Stap 1 - Laat "Game Over" zien.

Maak een functie die de tekst game over laat zien.

def game_over():
    pen.goto(0, 0)
    pen.write("Game Over", align="center", font=("Courier", 36, "normal"))

Roep deze functie aan op de plaats in de game-loop waar het spel eindigt.

Stap 2a - Maak een variabele die het aantla levens bijhoud

Net zoals je de score bijhoud, houd je ook het aantal levens bij. Maak een variabele en zet de initiële waarde op 3. Zorg dat op de juisten plaats in de game-loop het aantal levens wordt veminderd met één.

Stap 2b - Game stopt alleen als aantal levens 0 is.

Nu veranderd het moment dat we game-over laten zien. Alleen als het aantal levens 0 is, laten we game over zien.

Op de plaats in de code waar je de bal hebt gemist, kunnen er twee dingen gebeuren:

  1. Je controleert of het aantal levens 0 is, dan zet je de snelheid van de bal op 0 en roep je de functie game_over() aan.
  2. Is het aantal levens niet 0, dan vermidner je het aantal levens met 1 en laat je de bal terug stuiteren alsof je heb had geraakt met de paddle.
Stap 3 - druk jet aantal levens af

Je kunt hiervoor de bestaande functie aanpassen en naast de score ook het aantal levens aanpassen.

def update_score():
    pen.clear()
    pen.write("Score: {} Levens: {}".format(score, lifes), align="center", font=("Courier", 24, "normal"))

Zorg er wel voor dat als je het aantal levens aanpast, je deze functie aanroept zodat de score wordt ververst.

Zorg er ook voor dat er bij het begin van het spel "Score: 0 Levens: 3" wordt getoond.

Stap 4 - pauzeer de game als je de bal mist

Met het volgende commando kan je de game 3 seconden pauzeren (vergeet niet de module time te importeren).

time.sleep(3)

Zodra je de bal mist, dan pauzeer je de game voor 3 seconden.

Inleveren

Eens schermafdruk van het spel waarbij de score en het aantal levens wordt getoond.

Voorbeeld

image-1716632670176.png


Opdracht 9 - be creative!

Maak een variatie op het spel. Kies zelf één of meer van de volgende opties.

  1. De bals stuitert nu altijd op een bepaalde manier. Dat komt omdat de ball.dx en ball.dy een vaste waarde hebben 0,1 of -0.1. Je kunt dit laten variëren. Dat kan je at random doen, maar je kan het ook laten afhangen waar op de paddle je de bal raakt. Raak je hem aan de boven of onderkant dan kan je wat doen met de ball.dy, maak hem dan bijvoorbeeld 01.15 of -0.15.
  2. Je zou de snelheid langzaam kunnen opvoeren. Bijvoorbeeld na elke 5 punten gaat de bal iets sneller. Vergeert niet de snelheid weer aan te passen na het verliezen van een leven.
  3. Je kan de paddle groter en kleiner maken. Bijvoorbeeld na elke 5 punten iets kleiner. Vergeet hem dan niet na het verliezen van een leven weer op de originele grootte te zetten.
  4. Je zou de paddle in het midden een gat kunnen geven. Komt de bal precies in het gat dn krijg je er een leven bij.
  5. Pas de kleur van de bal aan al naar gelang je meer punten scoort.

Heb jij nog een ander idee, bespreek dit dan met de docent.

Inleveren

Beschrijf op de eerste regels in de code in commentaar wat je hebt gekozen en hoe je dat gedaan hebt. Lever daarna je gehele code in.


Opdracht 10 - Quiz

Vraag in de klas (op school) of je de bijbehorende quiz mag maken. De quiz bevat 7 vragen over deze module.

Je krijgt 7 vragen en je moet er minimaal 5 goed hebben (dat is 70% of hoger).

Je hebt maximaal 3 pogingen.

Inleveren

Schermafdruk met een uitslag van 70% og hoger.

Python

Python 3 - Game of Pong Challenge

(moet nog uitgewerkt worden; samenwerkingsopdracht?)

Samenwerken

Deze Challenge heeft 5 opdrachten die allemaal moeten worden gemaakt.

De opdrachten zijn deze keer in het Engels, maar je kan deze natuurlijk laten vertalen door AI.

1 - Advanced Ball Movement

Now let's make the movement of the ball more interesting. You should make the ball go faster when it hits the paddle, and randomly change the direction of the ball within a small range.

Instructions

  1. Ensure that the speed of the ball increases by 5% each time it hits a paddle.
  2. Make the ball have a small random variation in angle when it hits a paddle to make the game more unpredictable.
  3. Test your code to check if the ball responds correctly.

Deliverables

  1. The code (.py)
  2. A short explanation, in a.txt file, about how you implemented the implementation of the variations in speed and angle.
    In this .txt file, you specify the members of the team and the author(s) of the modified code.

2 - Score Multiplier and Bonus Points

Introduction

In this assignment, we'll introduce a score multiplier feature. If a player hits the ball multiple times without missing, their score will increase faster. This concept is similar to a combo multiplier in many games, encouraging players to keep the ball in play to maximize their score.

Task

  1. Multiplier Logic:
    • Create a multiplier variable starting at 1.
    • Every time the ball hits the paddle without the player missing, increase the multiplier by 0.5 (up to a maximum of 3x).
    • When the player misses, reset the multiplier to 1.
  2. Update Score Function:
    • Modify the update_score() function to display the current multiplier alongside the score.
Example Code Snippet:
# Initialize the multiplier
multiplier = 1.0

# Update the score function to include the multiplier
def update_score():
    pen.clear()
    pen.write(f"Score: {score} Levens: {lives} Multiplier: {multiplier}x", align="center", font=("Courier", 24, "normal"))

# Update multiplier in the game loop
if hit_paddle:
    multiplier = min(multiplier + 0.5, 3)
    score += int(1 * multiplier)
else:
    multiplier = 1

Deliverable

  1. A .txt document
  2. A short description of a few lines in a.txt file, about how your code works.
    In this .txt file you specify the members of the Team and the author(s) of the modified code.

3 - Handling Game State and Pausing

Introduction

Managing game state is crucial in game development. In this assignment, you'll implement a pause functionality, allowing players to pause and resume the game.

Task

  1. Game State Variable:
    • Introduce a game_state variable that can be either "playing" or "paused".
  2. Pause and Resume Functions:
    • Create functions to pause and resume the game. When paused, the game loop should not update the ball or paddle positions.
    • Bind a keyboard key (e.g., "p") to toggle between "playing" and "paused".
Example Code Snippet:
game_state = "playing"

def toggle_pause():
    global game_state
    if game_state == "playing":
        game_state = "paused"
    else:
        game_state = "playing"

wn.listen()
wn.onkeypress(toggle_pause, "p")

while True:
    if game_state == "playing":
        # Game logic updates
        wn.update()
    else:
        # Game is paused; do not update game logic
        pass

Deliverable

  1. A .py file with the pause functionality implemented. Include a comment explaining how the pause feature is beneficial in games.
  2. In this .py file you specify the members of the team and the author(s) in comments. Place this at the top of your code.

4 - Power-Ups and Advanced Features

Introduction

Adding power-ups can make games more engaging. In this assignment, you'll introduce a new feature: power-ups that appear randomly and affect the game when collected.

Task

  1. Power-Up Implementation:
    • Create a new turtle object representing a power-up. Randomly place it on the screen every 20 seconds.
    • If the ball hits the power-up, apply a random effect such as increasing the paddle size, slowing down the ball, or adding an extra life.
  2. Effect Duration:
    • Ensure that power-up effects last only for a certain period (e.g., 10 seconds), after which the game returns to normal.
Example Code Snippet
import random

def spawn_power_up():
    power_up = turtle.Turtle()
    power_up.shape("circle")
    power_up.color("blue")
    power_up.penup()
    x = random.randint(-350, 350)
    y = random.randint(-250, 250)
    power_up.goto(x, y)
    return power_up

def apply_power_up(effect):
    global paddle, ball
    if effect == "increase_paddle":
        paddle.shapesize(stretch_wid=8)
        # Reset after 10 seconds
        wn.ontimer(lambda: paddle.shapesize(stretch_wid=6), 10000)
    elif effect == "slow_ball":
        ball.dx *= 0.5
        ball.dy *= 0.5
        wn.ontimer(lambda: reset_ball_speed(), 10000)

# Example effect application in the game loop
if ball.distance(power_up) < 20:
    apply_power_up(random.choice(["increase_paddle", "slow_ball"]))

Deliverable

  1. A .py file with the power-up feature implemented. Include comments explaining each power-up and its impact on the game.
  2. In this .py file you specify the members of the team and the author(s) in comments. Place this at the top of your code.

5 - Collision Detection and Physics

Introduction

Improving collision detection can make a game feel more realistic. In this assignment, we'll refine the collision detection to account for the ball's velocity and angle, providing a more physics-based gameplay experience.

Task

  1. Advanced Collision Detection:
    • Adjust the ball’s direction based on where it hits the paddle (top, middle, or bottom). If it hits the top, it should bounce off at a sharper angle; if it hits the middle, it should bounce back more vertically.
  2. Implement Angled Bounces:
    • Modify the game so that when the ball hits the paddle near its edges, it alters its dx and dy to create an angled bounce.
Example Code Snippet
def check_collision():
    global ball, paddle
    if ball.distance(paddle) < 50 and ball.xcor() < -340:
        # Calculate where the ball hit the paddle
        hit_pos = ball.ycor() - paddle.ycor()
        ball.dy = hit_pos * 0.05
        ball.dx *= -1

Deliverable

  1. A .py file with advanced collision detection and physics implemented. Include a brief explanation of how physics enhances gameplay realism.
  2. In this .py file you specify the members of the team and the author(s) in comments. Place this at the top of your code.
--

Kerntaken

Kerntaken

Plannen c24

Waarom?

Inleiding

ICT, is veel meer dan coderen. Als ICT'er maak je documentatie, ontwerpen, planningen en ga zo maar door. Voor het examen moeten jullie ook een aantal van deze zaken leren. Eén van deze zaken is het kunnen maken van een planning.

Wat, hoe en waarom plannen?

Stel jij wilt een nieuwe keuken laten bouwen en de aannemer zegt;

"we maken een nieuwe keuken, de prijs weet ik pas als ik klaar ben en ik denk dat ik over vier weken klaar ben, maar dat weet ik nog niet helemaal zeker want ik weet niet wat en wie ik precies allemaal nodig zal hebben.".

Ga jij hiermee akkoord? Waarschijnlijk niet, je wilt eerst weten wat het kost en wanneer het klaar is en dat staat allemaal in een planning.

Er zijn heel veel redenen waarom je een planning nodig hebt.

  1. Je wilt weten wanneer je klaar bent, zodat de klant of opdrachtgever weet wanneer hij wat kan verwachten.
  2. Als je een project uitvoert met meerdere personen dan wil je weten wanneer je deze personen nodig hebt.
  3. Je wilt weten hoeveel tijd (en daarmee geld) het kost om iets te maken. De klant, of jou baas wil dat van tevoren weten.
  4. Bij projecten kunnen zich problemen voordoen. Soms kun je daar alvast van tevoren over nadenken, dan ben je voorbereid mochten deze problemen zich voortdoen.
  5. Via een planning kun je iedereen op de hoogte brengen van het project en kun je tijdens het project bepalen of je nog op schema bent. Je kunt op deze manier snel escaleren (met je baas gaan praten dat er mogelijk tegenslagen zijn).
  6. Omdat je jezelf dwingt via een planning van tevoren na te denken over allerlei zaken zal dit de kwaliteit ten goede komen.
  7. Door precies te omschrijven wat je gaat doen geef je eigenlijk ook aan wat je niet gaat doen. Dit voorkomt dat er dingen van jou worden verwacht waar je niet op heb gerekend.

In deze module gaan we stap-voor-stap leren hoe je een planning moet maken.

Opdracht

Bedenk een situatie waarin jij geen planning had, maar waarbij het achteraf gezien wel handig was geweest om die wel te hebben. Omschrijf dit kort in je eigen woorden.

Stap 1, SMART

De eerste stap is het bepalen van je doel. Dat doe je zo nauwkeurig mogelijk en daarbij gebruik je zo min mogelijk algemene termen.

Als je een doel beschrijft dan houd je rekening met SMART:

Specifiek, Meetbaar, hAalbaar, Relevant, Tijdsgebonden.

SMART komt uit het Engels en staat eigenlijk voor Specific, Measurable, Achievable, Relevant en Time Restricted

Als je niet precies weet wat SMART is, zoek het dan nog eens op.

Oefening

Bij elke doel dat hieronder beschreven is, geef jij aan aan welke letters het voldoet en waarom wel of juist niet., bijvoorbeeld.

Ik wil een webpagina-aanpassingen in systeem XYZ waardoor de sortering van alle studenten in het overzicht worden gesorteerd op achternaam in plaats van op voornaam. Het moet vrijdag af zijn.

Specifiek Zeker er wordt heel duidelijk precies verteld wat er gedaan moet worden.
Meetbaar Ja hoor, het is makkelijk te controleren of het vrijdag af is.
Haalbaar Ik denk het wel, het lijkt niet zo moeilijk
Relevant Er staat niet waarom dit moet, dit is dus niet aangetoond.
Tijdsgebonden Ja/nee er staat wel vrijdag maar niet welke vrijdag, kan dus beter.

Nu jij......(en er staan nog een uitgebreider voorbeeld onderaan deze opdracht).

Opdracht

Student: <vul hier e naam in>

case 1

Kan je iets maken in de Canvas Monitor zodat studenten niet meer kunnen kopiëren van elkaar? Kan het over twee maanden af zijn. Het is belangrijk omdat studenten steeds meer werk kopiëren van elkaar en daar niets van leren. De studenten lopen dan later vast als ze op stage moten of als ze examen moeten doen.

Specifiek
Meetbaar
Haalbaar
Relevant
Tijdsgebonden

case 2

Ik wil een uitbreiding op de Canvas Monitor waardoor studenten in hun overzicht kunnen zien of ze op schema lopen. Dit moet automatisch worden berekend. Het zou handig zijn als we dit met ingang van volgend schooljaar kunnen gaan gebruiken, zodat we onze nieuwe 1ste jaars daar vanaf het begin mee kunnen leren omgaan. Iedereen die dan meer dan twee weken achter loopt moet dan dinsdag verplicht naar school komen (ipv thuiswerken).

Specifiek
Meetbaar
Haalbaar
Relevant
Tijdsgebonden

case 3

De website moet een stuk strakker, het ziet er nu niet uit. Ik vind het belangrijk dat dit over twee dagen is geregeld omdat de klant dan komt kijken hoe het met het project staat. Als hij dit ziet dan schrikt hij zich helemaal rot!

Specifiek
Meetbaar
Haalbaar
Relevant
Tijdsgebonden

case 4

Ontwikkel een webapplicatie om de administratie van klantinteracties te verbeteren voor een klein verkoopbedrijf. Het project moet binnen zes maanden voltooid zijn. Het project moet een vermindering van 20% in de tijd die nodig is voor het invoeren en verwerken van klantgegevens opleveren. De applicatie moet gebruiksvriendelijk zijn en integreren met de bestaande CRM-software.

Specifiek
Meetbaar
Haalbaar
Relevant
Tijdsgebonden

Inleveren

Maak een PDF-document, kopieer de vier opdrachten erin, bepaal van alle vier de cases of deze SMART zijn.

Zet je naam in het PDF document.

Voorbeeld

Ontwikkel een geautomatiseerd facturatiesysteem voor een middelgroot productiebedrijf om de verwerking van inkomende en uitgaande facturen te versnellen. Het systeem moet binnen een maand geïmplementeerd zijn en moet leiden tot een 50% snellere facturatieverwerking dan het huidige systeem. Het projectteam zal bestaan uit vier softwareontwikkelaars. De applicatie moet ook gebruiksvriendelijk zijn voor niet-technische medewerkers van de financiële afdeling. Zonder dit systeem zal er een extra medewerker moeten worden aangenomen om al de facturaties op tijd te verwerken.

Specifiek Ja, want er wordt genoemd dat er een geautomatiseerd facturatiesysteem moet komen en nee omdat er wordt gezegd gebruikersvriendelijk" en dat wordt niet gespecificeerd. Verder wordt het systeem niet echt gespecificeerd; hoeveel facturen moeten worden verwerkt en wat moet er precies met de facturen gebeuren?
Meetbaar Ja, want er wordt gezegd dat de applicatie moet zorgen voor van de vermindering van de facturatieverwerkingstijd met 50%.
Haalbaar Onduidelijk want de eisen zijn onvoldoende gespecificeerd; waar moet het systeem precies aan voldoen?
Relevant Ja, want zonder deze software moet er een extra medewerker worden aangenomen en dat kost per jaar 2 minimaal 34 000 euro.
Tijdsgebonden Ja, er wordt gevraagd om het project in een maand af te ronden, het is echter onduidelijk waarom precies. Wat gaat er mis als het project 2 of 3 maanden kost?

Stap 2a, eisen

In examens worden veel fouten gemaakt omdat zaken te algemeen worden opgeschreven.

Voorbeeld:

De website moet er strak uitzien , of

de website moet veilig zijn , of

de website moet een geode performance laten zien

Voor al deze uitspraken geldt dat er discussie kan ontstaan, over bijvoorbeeld wat er strak uit ziet (dat kan immers heel persoonlijk zijn) of wat is veilig, of wat is goede performance? Hoe dan?

"De website moet er strak uitzien"

Dit moet je specifiek maken bijvoorbeeld.

Zie je dat je op deze manier minder ruimte voor discussie over laat? Nu hoeven deze zaken niet allemaal in de planning te worden opgenomen, maar je moet wel voorkomen dat je algemene termen als 'strak', 'veilig', 'mooi' en 'snel' gebruikt. In de planning houd je het op hoofdlijnen en werk je deze later uit in het ontwerp.

Dus je kan ook zeggen: de website ziet er uit volgens de styleguide die onderdeel van het ontwerp is. Dit is dan gelijk een activiteit die je moet plannen, het maken van een styleguide kost immers tijd.

Opdracht

Maak een de uitspraak  " De website moet passen bij de frisse uitstraling van verse groenten " specifiek.

Bedenk zelf iets, zie het als een voorstel aan de klant. De klant heeft jou gevraagd om een website met een frisse uitstraling van verse groenten, jij maakt dit nu concreet en doet een voorstel aan de klant. Beschrijf dit en maak ook een heel eenvoudig voorbeeld (plaatje).

Inleveren

PDF met specifieke omschrijving met voorbeeld plaatje.

Zet ook je naam in de PDF.

Stap 2b eisen

Opdracht

Beschrijf de opdracht die je vorig jaar hebt gemaakt voor de CRUD Challenge.
Beschrijf wat je doel is, wat ga je maken en wat zijn alle eisen?

Noem ten minste 10 concrete eisen.

image-1687948362350.png

Ken je de opdracht niet (meer)? Ga dan naar de volgende link en bekijk wat er moet worden gebouwd.

https://stampwerk.nl

Inleveren

TXT-bestand met ten minste 10 specifieke eisen in eigen woorden.

Zet je naam in de PDF.

Kennis-check 1

Voer de kennis-check uit tijdens de les. Vraag de docent om de juisten kennis-check open te zetten.

Inleveren

Een screendump van je resultaat en het resultaat moet 60% of hoger zijn.

Kennis-check "Specifiek"

Als je goed begrijpt wat specifiek is voer dan de kennis-check 'Specifiek' uit tijdens de les. Vraag de docent om de juisten kennis-check open te zetten.

Inleveren

Een screendump van je resultaat en het resultaat moet 80% of hoger zijn .

Stap 3, opdelen in stappen

Welke stappen moet je allemaal nemen om het project af te ronden?

Om te kunnen bepalen hoeveel tijd iets kost en wanneer het klaar is, helpt het om je project in stappen op te delen.

Laten we een voorbeeld nemen.

Opdracht

Stel je moet een CRUD maken voor, -laten we zeggen een te-laat-kom-system. Dus je wilt bijhouden van alle werknemers hoe laat ze binnenkomen 's morgens. Het systeem moet responsief zijn en op een mobiel device draaien. Je gaat dit in Yii maken. Houd er rekening mee dat in Yii een CRUD systeem vrij snel kan genereren (dus zonder code te tikken).

Je moet het invoeren van de te laat meldingen zo eenvoudig mogelijk maken en gebruik maken van drop downs om in zo min mogelijk aantal handelingen een te laat melding te maken.

Wat schat je hoeveel tijd dat kost. Denk hier even over na en probeer in te schatten hoeveel tijd dit kost. Heb je een aantal uren in je hoofd, schrijf dit op en ga dan verder.

Laten we nu het volgende eens bekijken.

  1. Overleg met opdracht gever wat er precies moet worden vastgelegd in de database. Als uitgangspunten nemen we de velden genoemd bij 7 en 8.
  2. Eventueel aanpassen planning naar aanleiding van gesprek.
  3. database opzetten met phpMyAdmin voor het te laat kom systeem met de 2 tabellen te laat voor de tijden en een tabel waarin alle werknemers staan. Velden staan bij 7 en 8.
  4. Installeren nieuw Yii project.
  5. Maken model (2x) met de Yii model-generator.
  6. Maken CRUD (2x) met de Yii model-generator.
  7. Aanpassen 4 CRUD schermen voor te laat meldingen met werknemer_id (FK), datum, aantal minuten te laat en reden.
  8. Aanpassen 4 CRUD schermen voor het registreren van medewerkers met medewerker_id (PK), naam, telefoon, datum in dienst.
  9. Te laat meldingenscherm aanpassen voor eenvoudige invoer (dropdowns en dergelijke) om vastleggen te laat melding zo snel mogelijk te kunnen doen.
  10. Testen op laptop.
  11. Testen op mobiel.
  12. Laten zien aan opdracht gever.
  13. Laatste wijzigingen maken en/of fouten oplossen.

Zet nu bij elk van deze taken een aantal uren, tel deze op en kijk hoeveel je afwijkt van de eerste schatting?

Vraag : wat is je conclusie?

Inleveren

Beschrijf het aantal uren dat je eerst inschatte (dus toen je nog niet alle stapjes had gelezen) en het aantal uren dat je inschatte toen je alle stapjes had gelezen.

En beschrijf wat jouw conclusie is.

Stap 4, specifieke stappen

Stappen in de planning zijn specifiek of niet.

Niet specifieke stappen gelden kunnen gelden voor veel (ICT) projecten. Je zou bij wijze van spreke een standaar planning kunnen maken met de volgende stappen:

Enzovoorts.

Zie je dat al deze stappen voor elk project zouden kunnen gelden? Of je nu een video-registratie systeem of een te-laat melding systeem maakt, deze stappen zouden voor beiden van toepassing kunnen zijn.

Wat zijn dan specifiek stappen?

Voorbeelden
Opzetten database Niet specifiek
Opzetten database met de tabellen inkoop_order, factuur, klant en order_boek. Specifiek, geldt niet voor een ander project.
Maken loginscherm Niet specifiek
Maak login dat is gekoppeld aan Canvas waarbij gebruikers dan kunnen aanloggen met hun schoolaccount. Specifiek

Opdracht

Bepaal van elk van deze stappen of ze specifiek of niet specifiek zijn.

Stap Omschrijving Specifiek? Toelichting
1 Overleg met opdracht gever wat er precies moet worden vastgelegd in de database. Als uitgangspunten nemen we de velden genoemd bij 7 en 8. ja/nee
2 Eventueel aanpassen planning naar aanleiding van gesprek. ja/nee
3 database opzetten met phpMyAdmin voor het te laat kom systeem met de 2 tabellen te laat voor de tijden en een tabel waarin alle werknemers staan. Velden staan bij 7 en 8. ja/nee
4 Installeren nieuw Yii project. ja/nee
5 Maken model (2x) met de Yii model-generator. ja/nee
6 Maken CRUD (2x) met de Yii model-generator. ja/nee
7 Aanpassen 4 CRUD schermen voor te laat meldingen met werknemer_id (FK), datum, aantal minuten te laat en reden. ja/nee
8

Aanpassen 4 CRUD schermen voor het registreren van medewerkers met medewerker_id (PK), naam, telefoon, datum in dienst.

ja/nee
9

Te laat meldingenscherm aanpassen voor eenvoudige invoer (dropdowns en dergelijke) om vastleggen te laat melding zo snel mogelijk te kunnen doen.

ja/nee
10

Testen op laptop.

ja/nee
11

Testen op mobiel.

ja/nee
12

Laten zien aan opdrachtgever.

ja/nee
13

Laatste wijzigingen maken en/of fouten oplossen.

ja/nee

Neem de tabel over en vul de laatste kolommen in. Gebruik eigen woorden en gebruik geen ChatGPT of (andere) AI!

Inleveren

PDF met de complete tabel en plaats jouw naam boven aan in de PDF.

Stap 5, uren en prioriteit

We gaan onze planning uitbreiden. De uren hadden we ingeschat bij de vorige stap.

We gaan deze aanvullen met de datum af en prioriteit .

Datum af

Dit is de deadline voor de stap. Op deze datum is de stap dus af.

Als je per stap aangeeft wanneer het klaar moet zijn, dan kun je tijdens het project controleren of je nog op schema ligt of dat je voor- of achter loopt.

Prioriteit

De prioriteiten spreken we van tevoren af zodat we weten wat we per se moeten afmaken of wat we mogelijk later zouden kunnen opleveren als we in tijdnood komen.

Prioriteiten

We kiezen een eenvoudig systeem om prioriteiten te stellen:

  1. Absoluut noodzakelijk
  2. Erg fijn om te hebben
  3. Niet strikt noodzakelijk

Opdracht

Neem de tabel over en vul de laatste vier kolommen in.

Uren

Bij uren, neem je de uren over die je in de vorige opdracht ook al had bedacht.

Datum af

Je begin te plannen vanaf volgende week en je hebt 4 uur per dag beschikbaar om aan dit project te werken. Zet dan ij de datum wanneer de stap klaar moet zijn.

Prioriteit

Vul de prioriteit in 1, 2 of 3. Hierboven staat wat 1,2 en 3 betekenen.

Toelichting

Leg uit waarom je deze stap prioriteit 1,2 of 4 hebt gegeven.

Stap Omschrijving Uren Datum af Prioriteit Toelichting
1 Overleg met opdracht gever wat er precies moet worden vastgelegd in de database. Als uitgangspunten nemen we de velden genoemd bij 7 en 8.



2 Eventueel aanpassen planning naar aanleiding van gesprek.



3 database opzetten met phpMyAdmin voor het te laat kom systeem met de 2 tabellen te laat voor de tijden en een tabel waarin alle werknemers staan. Velden staan bij 7 en 8.



4 Installeren nieuw Yii project.



5 Maken model (2x) met de Yii model-generator.



6 Maken CRUD (2x) met de Yii model-generator.



7 Aanpassen 4 CRUD schermen voor te laat meldingen met werknemer_id (FK), datum, aantal minuten te laat en reden.



8

Aanpassen 4 CRUD schermen voor het registreren van medewerkers met medewerker_id (PK), naam, telefoon, datum in dienst.





9

Te laat meldingenscherm aanpassen voor eenvoudige invoer (dropdowns en dergelijke) om vastleggen te laat melding zo snel mogelijk te kunnen doen.





10

Testen op laptop.





11

Testen op mobiel.





12

Laten zien aan opdrachtgever.





13

Laatste wijzigingen maken en/of fouten oplossen.






TOTAAL




Inleveren

Plaats je naam in de PDF.

PDF met aangevulde tabel. Vergeet niet je toelichting in eigen woorden toe te voegen.

En vergeet niet het totaal aantal uren (onderaan) te vermelden.

Kennis-check 2

Voer de kennis-check uit tijdens de les. Vraag de docent om de juisten kennis-check open te zetten.

Inleveren

Een screendump van je resultaat en het resultaat moet 60% of hoger zijn.

Event Tracker

Opdracht

Maak een planning voor onderstaand project

Project: Event Tracker

Ontwikkel een eenvoudige webapplicatie genaamd Event Tracker, die speciaal is ontworpen voor studenten om belangrijke school- en vrijetijdsevenementen bij te houden. Deze applicatie stelt gebruikers in staat evenementen zoals schoolproject, deadlines, sportwedstrijden, en sociale bijeenkomsten te creëren en te beheren.

Doel

Het hoofddoel is om een eenvoudige tool te bieden waar studenten hun school- en persoonlijke evenementen efficiënt kunnen beheren, wat hen helpt bij het organiseren van hun tijd en verantwoordelijkheden.

Functionaliteiten van de Webapplicatie

    • Evenementenbeheer: Gebruikers kunnen evenementen aanmaken, bekijken, bewerken en verwijderen.
    • Evenementenoverzicht: Een eenvoudige kalenderweergave waarop alle aankomende evenementen worden getoond.
    • Gebruikersinteractie: Gebruikers kunnen details van evenementen invoeren zoals datum, tijd, en een korte beschrijving.

Technische Specificaties

    • Talen: PHP voor de backend logica, JavaScript voor de client-side dynamica, en HTML/CSS voor de frontend presentatie.
    • Database: MySQL met één enkele tabel:
      • Events met kolommen voor evenement-ID, gebruikers-ID (voor identificatie van wie het evenement heeft aangemaakt), titel, beschrijving, datum, tijd en eventuele extra opmerkingen.
    • Veiligheid: Basis sessiemanagement om de interacties van gebruikers te beheren.

Design

Het design zal helder en gebruiksvriendelijk zijn, met een moderne look die aansluit bij de visuele voorkeuren van tieners. De interface zal ook responsief zijn om goed te werken op zowel smartphones als computers.


Maak een planning, maak minimaal 12 stappen en maak ten minste 4 specifieke stappen .

Stap Omschrijving Specifiek Uren Prioriteit
1



2



3



4



5



6



7



8



9



10



11



12



13



14



15



16



17



18




TOTAAL




Inleveren

PDF met planning. Zet je naam in het pdf-document.

Gamebuddy

Opdracht

Maak een planning voor onderstaand project

Project: GameBuddy

Doel

Ontwikkel een eenvoudige webapplicatie, GameBuddy, die fungeert als een platform voor jonge gamers, specifiek gericht op jongeren. Het platform dient als een basisnetwerk voor gamers om verbinding te maken, spelervaringen te delen, en speelschema's te organiseren.

Het hoofddoel is het creëren van een interactief en gebruiksvriendelijk platform waar jonge gamers gemakkelijk vrienden kunnen maken, hun speeltijden kunnen delen, en hun gaming ervaringen kunnen coördineren. Dit project streeft ernaar om een toegankelijke en functionele online gemeenschap te bouwen voor jonge gamers.

Functionaliteiten van de Webapplicatie

    • Gebruikersprofielen: Gebruikers kunnen profielen aanmaken waarin ze hun favoriete spellen en gaming tijden vermelden.
    • Vriendschapsnetwerk: Functionaliteit om vrienden toe te voegen en een lijst van vrienden te onderhouden.
    • Speelschema's: Een eenvoudige kalender waar gebruikers hun geplande speeltijden kunnen posten en bekijken.

Technische Specificaties

    • Talen: PHP voor de backend logica, JavaScript voor dynamische gebruikersinteracties, en HTML/CSS voor de frontend.
    • Database: MySQL met drie tabellen:
    • Users voor het opslaan van gebruikersgegevens zoals gebruikersnaam, e-mail, en wachtwoord.
    • Friends voor het beheren van de vriendenlijst, met verwijzingen naar gebruikers-ID's.
    • Schedules voor het opslaan van gebruikers geplande speeltijden.
    • Veiligheid: Basis gebruikersauthenticatie voor het inloggen en registreren van gebruikers.

Design

Het design zal strak en modern zijn, aantrekkelijk voor jongeren, met een eenvoudige en heldere gebruikersinterface. Het zal ook responsief zijn om toegankelijk te zijn via zowel desktops als mobiele apparaten. Indien er tijd over is, kan een light- en dark theme worden gemaakt.


Maak een planning, maak minimaal 12 stappen en maak ten minste 6 specifieke stappen .

Stap Omschrijving Specifiek Uren Prioriteit
1



2



3



4



5



6



7



8



9



10



11



12



13



14



15



16



17



18




TOTAAL




Inleveren

PDF met planning en vergeet niet je naam in het document te zetten.

Voortgang

Tijdens de uitvoering van het project moeten we aan de hand van de planning de voortgang bewaken.

Je kunt daarvoor deze template gebruiken.

Projectlog-ls.docx

De bedoeling is dat je elke dag of om de paar dagen controleert of je voortgang in overeenstemming met de planning is.

Opdracht

Doe alsof je met het project bent begonnen.

  1. Gebruik de template, maak deze leeg en zet je naam er in.
  2. Vul de eerste 5 dagen van het project de status in.
  3. Op dag 4 heb je onverwacht bijna niet kunnen werken.
  4. Op dag 5 heb je de opgelopen achterstand weer ingehaald door extra hard te werken.

Inleveren

PDF met ingevulde projectlog.

Plaats je naam bovenaan in de projectlog.

Optioneel - QuizMaster

Deze opdracht is niet verplicht, maar als je te weinig punten hebt, dan kun je hier extra punten mee halen!

Opdracht

Maak een planning voor onderstaand project


Opdracht Titel
: Ontwikkeling van een Online Quiz Applicatie - "QuizMaster"

Projectbeschrijving : Het doel van dit project is het ontwikkelen van een webgebaseerde applicatie, genaamd "QuizMaster", die docenten in staat stelt om aangepaste quizzes te maken en studenten deze te laten beantwoorden. De applicatie moet functioneel vergelijkbaar zijn met de Socrative-app, maar met enkele toegevoegde kenmerken.

Belangrijkste functies en eisen :

  1. Gebruikersaccounts : Er moeten twee typen gebruikersaccounts zijn: docenten en studenten. Docenten kunnen quizzes maken en resultaten bekijken. Studenten kunnen quizzes beantwoorden.

  2. Quiz Creatie : Docenten moeten de mogelijkheid hebben om quizzes te maken en te beheren. Ze moeten in staat zijn om vragen toe te voegen, te bewerken en te verwijderen, evenals om quizzes op te slaan voor later gebruik. Elke vraag moet een multiple choice vraag zijn met één correct antwoord en tot vier verkeerde antwoorden.

  3. Categorieën : Docenten moeten in staat zijn om vragen in verschillende categorieën in te delen. Elke quiz kan een of meer categorieën bevatten.

  4. Quiz Beantwoorden : Studenten moeten in staat zijn om in te loggen, een quiz te selecteren en de quiz te beantwoorden. Ze moeten hun naam invoeren voor het begin van de quiz.

  5. Resultaten : Na het voltooien van de quiz moeten studenten hun scores kunnen zien. Docenten moeten ook in staat zijn om de scores van elke student te zien en te downloaden.

  6. UI/UX : De applicatie moet een strak en modern ontwerp hebben. Het moet responsive zijn om goed te werken op zowel desktops als mobiele apparaten.

  7. API: via een API-interface kunnen gegevens vanuit de applicaties worden gelezen. Do kunnen de quiz vragen via de API worden geëxporteerd. Eventueel (indien niet te veel werk) zou het ook handig zijn als quiz vragen via de API kunnen worden geüpdate.

Technische specificaties : De applicatie moet worden ontwikkeld met behulp van het Laravel PHP framework. MariaDB moet worden gebruikt als de database.

Deliverables :

  1. Volledige broncode van de applicatie.
  2. Gedocumenteerde API en databasestructuur.
  3. Gebruikershandleiding voor zowel studenten als docenten.
  4. Technische documentatie, inclusief installatie-instructies en systeemvereisten.
  5. Testplan en testrapport.

Tijdlijn : Het project moet binnen 12 weken voltooid zijn.

Budget : Het budget voor het project wordt nog bepaald, maar het aantal te besteden uren moet tussen de 200 en 450 uur uitkomen.

Let op: deze beschrijving is een startpunt. Het zal waarschijnlijk nodig zijn om verder te verfijnen en meer details toe te voegen op basis van gesprekken met de ontwikkelaar(s) en andere stakeholders.

Bepaal alle stappen/taken, en zet deze onder elkaar in Excel. Bepaal de uren per taak. Tel de uren op en bepaal per taak de prioriteit.

Maak een planning, maak minimaal 18 stappen en maak ten minste 8 specifieke stappen .

Stap Omschrijving Specifiek Uren Prioriteit
1



2



3



4



5



6



7



8



9



10



11



12



13



14



15



16



17



18




TOTAAL




Inleveren

PDF met planning en vergeet niet je naam in het document te zetten.


Kerntaken

Ontwerpen c24

01 De Webwinkel algemeen

Inleiding, we gaan een ontwerpt maken voor een webwinkel. We doen dit om stapje-voor-stapje te oefenen met het maken van een ontwerp.

Bedenk voor jezelf een webshop die je zou kunnen maken.

Laten we beginnen met wat algemene zaken.

Algemene vragen:

  1. Wat ga je in de webwinkel verkopen?
  2. Hoe moet de lay-out van de productpagina eruitzien?
  3. Zijn er specifieke ontwerpvereisten of stijlen die moeten worden gevolgd?
  4. Wat zijn de beveiligings- en privacyvereisten?
  5. Hoe wordt klantinformatie beschermd, vooral bij het schrijven van beoordelingen?
  6. Hoe moet de navigatie op de productpagina werken?
  7. Zijn er links naar gerelateerde producten, categorieën, of recent bekeken items?

Opdracht

In je hoofd heb je een webwinkel die jij wilt maken.

Kopieer de vragen naar MS Word, en geef zo goed mogelijk antwoord op alle vragen.

Inleveren

PDF met antwoord op alle vragen.

02 Productpagina

De beschrijving die we voor de productpagina hebben is:

Dit is niet specifiek. Om een ontwerp te maken moeten we dit specifiek maken.

Vragen die je zou kunnen stellen zijn:

Voor productdetails:

  1. Hoe moet de lay-out van de productpagina eruitzien?
  2. Welke productinformatie moet worden weergegeven?
  3. Hoeveel productfoto's moeten er getoond worden en hoe groot zijn de foto's?
  4. Hoe worden klantbeoordelingen weergegeven?
  5. How worden de beoordelingen gesorteerd. Wat komt bovenaan te staan?
  6. Wat moet er in de tekst van een beoordeling staan?
  7. Moeten beoordelingen gesorteerd kunnen worden, zo ja, hoe?
  8. Op welke manieren kunnen beoordelingen gesorteerd worden?
  9. Kan iedereen een beoordeling schrijven of alleen geregistreerde klanten?
  10. Zijn er vereisten voor het controleren of iemand het product daadwerkelijk heeft gekocht??
  11. Moeten er ook foto’s of video's in beoordelingen kunnen staan?
  12. Wat zijn de beveiligings- en privacyvereisten?
  13. Hoe wordt klantinformatie beschermd, vooral bij het schrijven van beoordelingen?
  14. Hoe moet de navigatie op de productpagina werken?

Opdracht

Ontwerp (in je hoofd) een ontwerp en geef antwoord op alle gestelde vragen.

Wees zo concreet mogelijk, dus let op dat je dit soort woorden niet gebruikt.

groot, groter, snel, sneller, slim, slimmer, mooi, mooier, efficiënt, efficiënter, geavanceerd,  geavanceerder, aantrekkelijk, aantrekkelijker, gebruikersvriendelijk, gebruikersvriendelijker.

meer info over concreet

Inleveren

PDF met antwoord op alle vragen, 1 tot en met 14.

03 Wire frame

Een wire-frame is een voorbeeldtekening van hoe iets eruit gaat zien, zoals een website of een app. Het helpt om te zien en te bespreken hoe het eindresultaat eruit zal zien voordat je het echt gaat maken.

Voorbeelden van tools, die je gratis kan gebruiken (per 2024):

Kies zelf een tool.

Powerpoint

Deze wireframe is gemaakt met powerpoint.

In dit voorbeeld (hieronder) zie je een website waar je CV's kan plaatsen en waar werkgevers stage plaatsen kunnen aanbeiden.

image-1717163619893.png

Figma

Onderstaand voorbeeld van een product pagina  is gemaakt met Figma. De wire-frame is nog geen detail ontwerp waarin alles precies is uitgewerkt, maar het geeft op hoofdlijnen een beeld van wat je gaat maken.

Voorbeeld in Figma

image-1717162834195.png

Omschrijving

In dit ontwerp wordt de naam van de webshop bovenaan de pagina getoond. Rechtsboven is het navigatiemenu. Je kunt daarmee naar andere onderdelen van de website navigeren.

Op de productpage wordt het product genoemd met daaronder een beschrijving. Naast de beschrijving worden twee plaatjes van het product getoomd. Onder de productomschrijving staat een knop om het product naar mijn Winkelmandje te verplaatsen.

Opdracht

Teken een wire-frame van de productpagina in een tool naar keuze. Je kunt de wireframe die hierboven staat als uitgangspunt nemem, maar denk wel aan punt 4 (zie hieronder).

Zorg dat de volgende punten minimaal in het ontwerp staan getekend.

  1. Het menu.
  2. De banner.
  3. Productomschrijving, afbeelding en bestelknop.
  4. Verder laat je op de pagina een paar product reviews zien. Je kunt vanuit hier ook via een knop navigeren naar alle product reviews.

Inleveren

PDF met jouw persoonlijke mock-up van een product pagina, met daaronder een korte beschrijving van de pagina.

04 Onderbouwen ontwerp

Als je een webpagina ontwerpt dan moet je rekening houden met een aantal 'good practices' dat zijn zaken die over het algemeen als goed worden gezien.

Je hebt bij de vorige opdracht een wire-frame gemaakt.

Misschien heb je er niet zo over nagedacht, maar waarom heb je het gemaakt zoals je het gemaakt hebt?

  1. Waarom staan de plaatjes links en de tekst rechts?
  2. Waarom staat de bestelknop aan de linkerkant?
  3. Waarom staat er een hamburger menu en geen 'gewoon' menu?
  4. Waarom staan er twee plaatjes en geen 3 of 4?

Jij hebt misschien een ander ontwerp gemaakt. Of misschien als je over deze vragen nadenkt wil je je ontwerp nog aanpassen?

Opdracht

Neem je Wire Frame van de vorige opdracht. Als je wilt mag je hem nog aanpasen.

Onderbouw waarom je het ontwerp zo maakt.

Voorbeelden:

Inleveren

  1. Wire Frame
  2. PDF met daarin onderbouwing van het ontwerp (minimaal 4 punten).

05 Responsive

Responsive design betekent dat een website of applicatie zich automatisch aanpast aan verschillende schermgroottes en apparaten, zoals mobiele telefoons, tablets en computers. Het doel is om de inhoud altijd goed leesbaar en bruikbaar te maken, ongeacht op welk apparaat je de site bekijkt.

Hier zijn de belangrijkste punten:

  1. Aanpassing aan schermgrootte: De website past zich aan aan de breedte en hoogte van het scherm. Dit gebeurt automatisch, zodat je niet hoeft te scrollen of in te zoomen om alles te kunnen zien.

  2. Flexibele lay-out: De elementen op de website, zoals tekst, afbeeldingen en knoppen, verschuiven en schalen mee met de schermgrootte. Dit zorgt ervoor dat de inhoud er altijd goed uitziet en goed werkt.

Als je een CSS-framework als Bootstrap of Tailwind gebruikt, is dit meestal allemaal al geregeld voor je.

Voorbeeld van responisve design, links zie je een formulier zoals het op een PC/Laptop te zien is en rechts zoals je het op een mobiele telefoon ziet.

Opdracht

Neem je Wireframe als voorbeeld en omschrijf op welke punten jouw website voldoet aan 'responsive design'. Noem minimaal drie punten.

Inleveren

PDF met een beschrijving van minimaal 3 punten waar je rekening mee gaat houden ten aanzien van een repsonsive design.

06 Site map

Een site map van een website is als een plattegrond voor een gebouw. Het laat zien hoe alle pagina's van de website met elkaar verbonden zijn en waar je alles kunt vinden. 

Wat is een site map?
Waarom is een site map belangrijk?

Opdracht

Bedenk een site map voor een eenvoudige web winkel. Je kunt producten opzoeken, details bekijken, producten in een winkelmandje plaatsen, winkelmandje bekijken en afrekenen/bestellen. Daarnaast staat er ergens een contactpagina.

Maak een site map voor deze website.

Inleveren

PDF, met site map, je kunt diverse tools gebruiken, bijvoorbeeld Powerpoint, Word of Lucichart.

07 RBA tabel

Een RBA-tabel (Role-Based Access tabel) is een lijst die bepaalt welke personen binnen een organisatie toegang hebben tot welke functies of gegevens, gebaseerd op hun rol.

Hoe het werkt:

  1. Gebruikers: De mensen die het systeem gebruiken.
  2. Rollen: Groepen met bepaalde rechten, zoals 'beheerder', 'manager', of 'medewerker'.
  3. Toegangsrechten: Wat iemand met een bepaalde rol mag doen, zoals gegevens bekijken, bewerken, of verwijderen.

In een RBA-tabel staat welke gebruikers welke rol hebben en wat ze met die rol mogen doen. Dit maakt het makkelijk om rechten te beheren en de veiligheid te waarborgen.

Voorbeeld: stel je hebt een webshop en je wilt aangeven wie welke rechten krijgt op een bestelling.

Je ziet bijvoorbeeld dat iemand van de administratie een bestelling niet mag aanpassen (update) maar wel kan lezen.

Bestelling RBA tabel

Rol Create Read Update Delete
klant ingelogd ja ja ja ja
klant niet ingelogd ? ? ? ?
administrator nee ja nee nee
hoofd administratie ?
? ? ?

Opdracht

Ga uit van de bovenstaande RBA-tabel.

De opdrachtgever heeft aangegeven dat in enkele gevallen een klant met de administratie belt als er wat is misgegaan. De medewerker van de administratie moet dan de mogelijkheid hebben om een bestelling te verwijderen.

In enkele uitzonderlijke gevallen moet soms een Bestelling worden aangepast. Om fraude te voorkomen mag niet iedereen dat van de administratie zomaar een bestelling aanpassen. Dat mag allleen het hoofd van de administratie. Er moet dus een extra rol komen en deze rol mag een bestelling lezen of aanpassen.

Pas de bestaande RBO tabel aan:

  1. lees de bovenstaande text en vul de 'hoofd administratie' regel in (vervang de ?).
  2. bedenk zelf wat er zou staan op de regel 'klant niet ingelogd', dit is dus een bezoeker zonder account (vervang de ?).

Inleveren

Aangepaste RBA tabel in PDF.

08 Security / veiligheid

Op het nternet zijn veel hackers actief. Om je web-site veilig te houden moeten we met veel zaken rekning houden. Een paar belangrijke zijn:

Controleer invoer

Door 'vreemde' invoer te geven zou je dode iets onvoorspelbaars kunnen doen. Stel de prijs wordt als volgt berekend:

$afrekenprijs = $aantal * prijs_per_stuk;

Stel je koopt een iPhone van 895,= euro en bij aantal vul je -1 in. Wat zou er dan kunnen gebeuren?

Juist je moet -895,= euro betalen, je krijgt dus geld gestort op je rekening!

Hoe voorkom je dit?

Dit kan op front-end en op de back-end. De front-end is gebruikersvriendelijker (sneller), maar is ook makkelijker te hacker (weet jij hoe?). Dus voor de veiligheid checken we de invoer op de back-end én voor de gebruikersvriendelijkheid op de front-end!

Controleer zoveel mogelijk alle invoer op de front-end én op de back-end!

Geef geen duidelijk foutmeldingen

Als je ontwikkeld wil je zo goed mogelijk de foutmelding krijgen. Dat helpt bij het zoeken naar fouten.

Maar als hacker heb je ook veel aan foutmeldingen. Je ziet al snel welke framework is gebruikt of welke database is gebruikt. Een Yii foutmelding ziet er namelijk anders uit dan een Laravel foutmelding. En elke informatie is voor een hacker waardevol. Jij wilt de hacker zo min mogelijk informatie verstrekken. Dus foutmeldingen gaan naar een log file waar jij alleen bij kan, en de eindgebruiker (of hacker) ziet niets, of hooghuit een vage melding dat er een fout is opgetreden.

Dit zag je ook terug in de Plesk module. Super onhandig want er ging wat fout en je zag niets (behalve als je in de log file keek).

Op een productie systeem laat je geen specifieke foutmeldingen zien.

Encryptie

Stel je database wordt gehacked en in de database staan logins en wachtwoorden en die wachtwoorden zijn gewoon leesbaar. Dan heb je een probleem, zeker als gebruikers een wachtwoord vaker gebruiken (op andere systemen).

Als je wachtwoorden encrypted in de database opslaat dan is het lastiger om wachtwoorden te 'stelen'. Hackers maken gebruik van zogenaamde rainbow tabellen waardoor encrypted wachtwoorden soms toch te lezen zijn. Om dan weer te voorkomen zou je een encrypty moeten gebruiken met 'salting'. Je gooit dat als het ware zout door een password. Hierdoor kunnen rainbow tabellen niet wordne gebruikt. het gaat nu te ver om uit te leggen hoe dat precies werkt, maar wat je moet onthoduen is:

Wachtwoorden in de database (en evetnueel andere kwetsbare data) moet je beschermen met encrypty het liefst met salting.

Voorkom SQL injection

Met SQL-injection kan je ongewenste code meesturen in bijvoorbeeld een wachtwoord. De code wordt dan uitgevoerd als het wachtwoord wordt gecontroleerd. Op deze manier kan je teogang krijgen tot een systeem zonder het wachtwoord te weten.

Hier kan je je op verschillend emanieren tegen beschermen.

Afhankelijk van wat voor technieken je gebruikt (framework, PDO, ....) kun je verschillende dingen doen om SQL-injection te voorkomen.

Voorkom cross site scripting

Cross site scripting is van af één verkeerde server een (aangepast) formulier gebruiken en daarmee ongecontroleerde gegevens naar een andere server sturen.

Om dit te voorkomen kan je CSRF-tokens gebruiken. In de meeste frameworks zoals Laravel en Yii is dit al voor je ingebouwd.

Voorkom cross site scripting door gebruik te maken van CSRF-tokens.

Wil je meer weten van een bepaalde techniek, vraag dan je docent.

Voor jou is het belangrijk om te bepalen wat jij moet doen met jow project om een secure systeem te maken.

Opdracht

...

09 Ethiek

10 Privacy



Kerntaken

Testen C24

Kerntaken

Ontwerpen C22

Ontwerp - Web site

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, bijvoorbeeld:

image-1688328258540.png

Wireframes kun je bijvoorbeeld maken met Lucidchart of Powerpoint.

Screenshot 2023-07-14 143000.png

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:

Screenshot 2023-07-14 142428.png

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 )

ERD

ERD's hebben we het over gehad bij DB ontwerp. Een duidelijk ERD kan de database structuur goed weergeven en is erg handig voor developers die mogelijk na jou met de site aan de slag gaan.

Screenshot 2023-07-14 143533.png

Opgave

Opdracht: Maak een Sitemap voor een Online Boekwinkel

Context: Je bent de hoofdontwerper van een nieuwe online boekwinkel genaamd 'BoekParadijs'. De boekwinkel wil een brede selectie van boeken aanbieden in verschillende genres, evenals audio- en e-boeken. Daarnaast zal de winkel een blogsectie hebben waarin boekrecensies, auteurinterviews en literair nieuws worden gedeeld. De website zal ook pagina's hebben voor klantenservice, over ons, FAQ, en contactinformatie.

Taak: Jouw taak is om een sitemap te cre ren voor de BoekParadijs website. De sitemap moet alle belangrijke pagina's en hun hi rarchische relaties weergeven. Je moet ook rekening houden met de gebruikerservaring en hoe de klant door de website zou navigeren.

Stappen:

  1. Identificeer de belangrijkste secties en pagina's van de website. Dit omvat de homepage, productpagina's (verschillende genres, audio boeken, e-boeken), de blog, klantenservice, FAQ, over ons en contactpagina's.

  2. Bepaal de hi rarchie van de website. Wat zijn de belangrijkste categorie n en subcategorie n? Hoe verhouden deze pagina's zich tot elkaar?

  3. Teken je sitemap uit op papier of gebruik een online tool zoals Lucidchart, Balsamiq, Microsoft Visio of POwerpoint (of een andere goede tool). Zorg ervoor dat de structuur van de website gemakkelijk te begrijpen is vanuit de sitemap. Zet er een korte omschrijving/uitleg bij.

  4. Geef je sitemap aan een collega of klasgenoot en vraag hen om feedback . Is de structuur van de website duidelijk? Zijn er pagina's die ze niet kunnen vinden? Geef aan wie de feedback heeft gegeven!

Inleveren

Lever je definitieve sitemap in als een PDF-bestand.

Het document bevat drie onderdelen:

  1. De sitemap.
  2. Korte uitleg.
  3. Feedback van klasgenoot (met naam).

Ontwerpen

Inleiding

Een ontwerp moet de klant een idee geven van wat hij krijgt. Het moet wat vertellen over de functionaliteiten en de gebruikers interface. De user story is een manier om uit tel leggen wat er gebouwd gaat worden. De user story's kunnen ook zeker deel uit maken van de planning, maar komen ook vaak terug in het ontwerp.

User Story

Een user story is een eenvoudige manier om te beschrijven wat een gebruiker van een product of software wil kunnen doen. Het helpt de mensen die de software maken om zich te focussen op de behoeften van de gebruiker. Een user story ziet er meestal zo uit: "Als [een type gebruiker], wil ik [een bepaalde actie kunnen doen], zodat ik [een bepaald resultaat kan bereiken]".

Hier is een voorbeeld: "Als een bezoeker van de website, wil ik een zoekfunctie kunnen gebruiken, zodat ik snel de informatie kan vinden die ik nodig heb."

Dus, het idee is om te beschrijven wie iets wil doen (de bezoeker van de website), wat ze willen doen (een zoekfunctie gebruiken), en waarom ze het willen doen (om snel informatie te kunnen vinden). User story's helpen teams om te begrijpen wie hun gebruikers zijn, wat ze nodig hebben en waarom. Ze helpen ook om het werk op te delen in behapbare stukken die makkelijker te plannen en te beheren zijn.

Voorbeeld

Stel je voor dat je werkt voor een softwarebedrijf dat een e-commerce website ontwikkelt voor een lokaal modebedrijf. Het bedrijf wil dat klanten hun producten online kunnen bekijken, in hun winkelwagentje kunnen plaatsen, kunnen afrekenen en hun bestelgeschiedenis kunnen bekijken.

Je hebt een ontmoeting gehad met de bedrijfseigenaar en ze heeft je de volgende informatie gegeven:

Jouw taak: Identificeer en schrijf minstens vier user stories op basis van de bovenstaande informatie.

De user story's voor deze case zouden er zo uit kunnen zien:

  1. Producten bekijken en filteren : "Als klant wil ik de collectie kleding en accessoires online kunnen bekijken en deze kunnen filteren op categorie, prijs en maat, zodat ik gemakkelijk de items kan vinden die ik wil kopen."

  2. Items aan winkelwagentje toevoegen/verwijderen : "Als klant wil ik in staat zijn om items aan mijn winkelwagentje toe te voegen en te verwijderen, zodat ik kan beslissen wat ik wil kopen voordat ik afreken."

  3. Veilig afrekenen : "Als klant wil ik veilig kunnen afrekenen met mijn creditcard of PayPal, zodat ik mijn aankopen op een veilige en betrouwbare manier kan voltooien."

  4. Bestelgeschiedenis en status bekijken : "Als klant wil ik mijn bestelgeschiedenis kunnen bekijken en de status van mijn huidige bestellingen kunnen volgen, zodat ik ............."

Opdracht

Maak deze laatste user story af en lever het in als TXT bestand.

User Stories - bibliotheek

Stel je voor dat je werkt voor een softwareontwikkelingsbedrijf dat is ingehuurd om een nieuwe mobiele app te bouwen voor een lokale bibliotheek. De bibliotheek wil haar leden in staat stellen om boeken en andere bronnen te zoeken, reserveren, en te verlengen via de app. Ook willen ze dat de leden meldingen kunnen ontvangen als hun boeken bijna te laat zijn.

Je hebt een ontmoeting gehad met de bibliothecaris en ze heeft je de volgende informatie gegeven:

Jouw taak: Identificeer en schrijf minstens vier user stories op basis van de bovenstaande informatie. Vergeet niet de structuur te volgen: "Als [een type gebruiker], wil ik [een bepaalde actie kunnen doen], zodat ik [een bepaald resultaat kan bereiken]".

Tips:

Als je klaar bent met de oefening, vergelijk dan je user stories met die van je medestudenten. Zijn er functies die je hebt gemist, of heb je iets opgenomen dat zij niet hebben? Bespreek de verschillen en zie of je een consensus kunt bereiken.

Inleveren

Uitgewerkte User story's in PDF.

User Stories - projectmanagement-systeem

Stel je voor dat je werkt voor een softwareontwikkelingsbedrijf dat is ingehuurd om een geavanceerd projectmanagement-systeem te bouwen. Het systeem moet projectmanagers in staat stellen om projecten te maken en te beheren, taken toe te wijzen aan teamleden, de voortgang van het project te volgen en rapporten te genereren.

Je hebt een ontmoeting gehad met de opdrachtgever en ze hebben je de volgende informatie gegeven:

Als projectmanager wil ik rapporten kunnen maken om de huidige status, voortgang en prestaties van een project te kunnen laten zien. - is dit goed ?

Dit is gedeeltelijk goed, maar denk in het doel van de actor. De actor is in dit geval de projectmanager. Waar wordt hij voor betaald, wat is zijn doel? Het kan zijn dat hij moet rapporteren over de status van zijn project aan zijn baas of dat hij de voortgang wil kunnen zien om vroegtijdig in te grijpen als het misgaat, of om medewerkers te complimenteren als het goed gaat. Het is immers de verantwoordelijkheid van de PM om ervoor te zorgen dat de medewerkers weten wat ze moeten doen en dat ook daadwerkelijk goed doen.

Bij een user story denk je dus in doelen en vanuit de v erantwoordelijkheid van de actor .

Jouw taak: Identificeer en schrijf minstens vier user stories op basis van de bovenstaande informatie.

Inleveren

Uitgewerkte User story's in PDF.

User Stories - sportschoolketen

Stel je voor dat je deel uitmaakt van een softwareontwikkelingsteam dat werkt aan een nieuwe app voor een sportschoolketen. Deze app moet leden van de sportschool de mogelijkheid geven om hun fitnessdoelen te volgen, lessen te boeken, persoonlijke trainingssessies te organiseren en hun voortgang bij te houden.

Tijdens een meeting met de manager van de sportschoolketen, ontvang je de volgende informatie:

Jouw taak: Identificeer en schrijf minstens vier user stories op basis van de bovenstaande informatie.

Inleveren

Uitgewerkte User story's in PDF.

Van User Storie naar Ontwerp

Het omzetten van de user story naar een ontwerp vraagt om creativiteit en technisch inzicht. Je moet namelijk weten wat er kan en wat er niet (makkelijk) kan. Laten we het voorbeeld uit de vorige opgave nemen.
User story 1: "Als lid van de sportschool wil ik mijn fitnessdoelen kunnen instellen en bijhouden op basis van mijn persoonlijke behoeften en wensen, zodat ik gemotiveerd blijf en mijn voortgang kan zien."

Ontwerpvoorstel:

Voor deze user story zou je een 'Mijn Fitnessdoelen' sectie in de app kunnen ontwerpen. Deze sectie zou kunnen bestaan uit:

  1. Doelen instellen : Maak een interface waar gebruikers hun fitnessdoelen kunnen instellen. Dit kan een formulier zijn waar ze hun huidige gewicht, streefgewicht, gewenste spiermassa, het aantal dagen dat ze willen sporten, en andere relevante details kunnen invoeren. Je zou ook een kalender of een slider kunnen toevoegen waarmee gebruikers een streefdatum kunnen instellen.

  2. Voortgang bijhouden : Laat gebruikers hun dagelijkse of wekelijkse voortgang bijhouden door hun gewicht, genomen lessen, verbrande calorie n, enz. in te voeren. Dit zou kunnen worden weergegeven in de vorm van een grafiek of tabel, die hun voortgang over tijd laat zien in vergelijking met hun doelen.

  3. Meldingen : Om gebruikers gemotiveerd te houden, kun je pushmeldingen of reminders toevoegen. Deze kunnen bijvoorbeeld een herinnering sturen om hun voortgang in te voeren of ze feliciteren als ze een mijlpaal hebben bereikt.


Nu zou je de ontwerpen moeten illustreren aan de hand van GUI ontwerpen. Neem bijvoorbeeld punt 2. De GUI zou er zo uit kunnen zien:

image-1688325663652.png image-1688325695287.png

Toelichting

Als omschrijving zou je nog kunnen toevoegen wat je bij de verschillende velden kan en mag invullen, bijvoorbeeld:

Als GUI kiezen we voor Bootstrap. Dit is een vele gebruikte interface die snel ontwikkeld en die er clean/eenvoudig uitziet. Later kunnen we de GUI eventueel aanpassen maar een meer "op-maat" ontwerp.

Hoe maak je een GUI ontwerp?

Deze GUI is gemaakt met behulp van ChatGPT. Er zijn talloze handige online tools om GUI ontwerpen te maken.

Tools voor ontwerpen GUI:

Opdracht

Maak een mooi ontwerp van user story 1 uit de vorige opgave:

Fitnessdoelen instellen en volgen : "Als lid van de sportschool wil ik mijn fitnessdoelen kunnen instellen en bijhouden op basis van mijn persoonlijke behoeften en wensen, zodat ik gemotiveerd blijf en mijn voortgang kan zien."

1. Maak een ontwerp met een sportieve uitstraling.

2. leg uit waarom je dit gekozen hebt en waarom het een sportieve uitstraling heeft.

3. Leg uit hoe het formulier werkt en wat de gebruiker moet/mag invullen.

Inleveren

PDF met ontwerp (plaatje) n de uitleg; waarom heeft dit een sportieve uitstraling en hoe werkt het formulier?

Ontwerp - pushbericht

We hebben nog een derde user story;

Meldingen : Om gebruikers gemotiveerd te houden, kun je pushmeldingen of reminders toevoegen. Deze kunnen bijvoorbeeld een herinnering sturen om hun voortgang in te voeren of ze feliciteren als ze een mijlpaal hebben bereikt.

Opdracht

Maak een ontwerp van minimaal drie pushberichten. Probeer verschillende soorten pushberichten te bedenken.

Laat zien hoe de berichten er uitzien en licht toe wat de functie is en waarom je voor het ontwerp hebt gekozen.

Ethiek, privacy en security

De onderwerpen ethiek, privacy en security worden steeds belangrijker. Wat betekent deze begrippen eigenlijk?

Ethiek

Ethiek is een verzameling regels en principes waarmee wordt bepaald wat goed en wat slecht is.

Hoe zorg jij er dus voor dat er op jouw website:

Deze dingen kunnen niet van toepassingen zijn, maar het is goed om je deze dingen af te vragen en te kijken of er zaken zijn waarmee je rekening meer moet houden.

Privacy

Privacy betekent dat iemand dingen kan doen zonder dat de buitenwereld daar weet van heeft, inbreuk op maakt, of invloed op heeft. Rekening houden met privacy is belangrijk omdat niet alle mensen willen dat al hun gegevens openbaar op het Internet te vinden zijn.

Hoe zorg jij er dus voor dat er op jouw website:

Security

Security zorgt ervoor dat de website minder makkelijk kan worden gehackt.

Hoe zorg jij ervoor dat:

Al deze vragen zijn voorbeelden van vragen die je jezelf kan stellen bij het ontwerpen van een website.

Kijk of er vragen zijn die voor jouw website relevant zijn en beschrijf ze dan.

Voorbeeld

In het voorbeeld van de sportschool was er gekozen voor een drietal dropdowns waarmee waarden konden worden ingevoerd. Het nadeel si misschien dat dit iets onhandig invoert, maar het voordeel is dat de gebruiker wordt gelimiteerd in het posten van 'ongeldige' invoer. Er kunnen geen negatieve waarden of strings worden ingevoerd. Dit is goed voor de security want daarmee hebben hackers minder mogelijkheden om de site te hacken (bijv. SQL injection).

Opdracht

Je hebt een eerder een ontwerp voor pushberichten gemaakt. Dat gingen over user story:

Meldingen : Om gebruikers gemotiveerd te houden, kun je pushmeldingen of reminders toevoegen. Deze kunnen bijvoorbeeld een herinnering sturen om hun voortgang in te voeren of ze feliciteren als ze een mijlpaal hebben bereikt.

Ga na of en hoe de onderwerpen ethiek, privacy en security te maken kunnen hebben met het ontwerpen van deze functionaliteit?

Dus kun je rekening houden met ethiek, privacy of security bij het ontwerp van deze functionaliteit? Leg uit waar dit het geval kan zijn.

Inleveren

PDF-documentje waarin jij uitlegt hoe je met het ontwerp van de user story pushberichten rekening kan houden met n of meer van de onderwerpen ethiek, privacy en/of security.

Eindopdracht

We gaan nog eens terug naar de user story over de bibliotheek:

Boek reserveren : "Als lid van de bibliotheek wil ik een boek kunnen reserveren dat momenteel is uitgeleend, zodat ik het kan lenen zodra het beschikbaar is."

Opdracht

Werk de user story uit.

Inleveren

Zet dit allemaal in een PDF en lever dat in.

Kerntaken

Testen C22

Testrapport

Een testrapport bestaat uit

De volgorde (of eigenlijk hi rarchie) is dus: use case - scenario - stappen

In de volgende lessen gaan we deze stappen oefenen.

Opgave

Neem als voorbeeld de CRUD Challenge die je vorig jaar hebt gemaakt.

Benoem n use case en bedenk n scenario die bij deze use case hoort.

Inleveren

Use case (in de vorm als....wil ik....zodat.....) met een bijbehorend test scenario.

Stappen

Voorbeeld stappen

Je bent een software tester voor de website van de Openbare Bibliotheek Amsterdam ( https://www.oba.nl/ ). Je taak is om een testrapport te maken over de volgende use case:

Use Case: Als lid van de bibliotheek wil ik een Boek Zoeken en reserveren zodat ik het boek kan ophalen en kan lenen.

Scenario 1: Een gebruiker wil een specifiek boek vinden en hij weet alleen de titel van het boek.

Scenario 2: Een gebruiker wil een specifiek boek vinden en hij weet alleen het ISBN-nummer van het boek.

Scenario 3: Een gebruiker wil een specifiek boek vinden en hij weet alleen de naam van de schrijver van het boek.

Stappen voor scenario 1
  1. De gebruiker gaat naar de homepage van de website.
  2. De gebruiker klikt op het zoekveld in het midden van de pagina.
  3. De gebruiker voert de titel van het boek in.
  4. De website geeft een lijst met resultaten weer die overeenkomen met de zoekterm van de gebruiker.
  5. De gebruiker klikt op de titel van het boek dat hij/zij wil reserveren.
  6. De gebruiker wordt naar een pagina geleid met details over het geselecteerde boek.

Opdracht

Beschrijf het stappenplan voor scenario 1,2 en 3. Let op het stappenplan zoals het hier staat mist een paar details .

Inleveren

3 keer een volledig stappenplan voor scenario 1 2 en 3.

Tip

Let op je mag een stappenplan maken omdat de stappen bijna allemaal hetzelfde zijn. Op het punt waar het verschillend is, maak je dan een onderverdeling:

  1. ....
  2. ....
  3. Hier zijn drie mogelijkheden:
    1. sub scenario 1
    2. sub scenario 2
    3. sub scenario 3
  4. ....
  5. ....

Hang Man - inleiding

Inleiding

Je gaat een Python spelletje installeren. Dit spel gaan we testen.

Spel

Je hebt een hang man spel, waarvan hier de code:

# versie 0.9 hangman

import random

def hangman():
word_list = ["python", "hangman", "programming", "game", "computer"]
word = random.choice(word_list).lower()
guessed_letters = []
attempts = 8

print("Welkom bij Hangman!")
print("Probeer het woord te raden door letters te kiezen.")
print(f"Je hebt {attempts} pogingen voordat het spel voorbij is.")

while True:
hidden_word = ""
for letter in word:
if letter in guessed_letters:
hidden_word += letter + " "
else:
hidden_word += "_ "

print("\n" + hidden_word)

if "_" not in hidden_word:
print("Gefeliciteerd! Je hebt het word geraden.")
break

if attempts == 1:
print(f"Helaas, je hebt het woord niet geraden. Het woord was {word}.")
break

guess = input("Kies een letter: ").lower()

if len(guess) != 1 or not guess.isalpha():
print("Invalid input. Voer n enkele letter in.")
continue

if guess in guessed_letters:
print("Je hebt deze letter al geraden. Probeer het opnieuw.")
continue

guessed_letters.append(guess)

if guess in word:
print("Goed geraden!")
else:
attempts -= 1
print(f"Fout! Je hebt nog {attempts} pogingen over.")

if __name__ == "__main__":
hangman()

Kopieer de code en speel het spel een keer.

Opdracht 1

Maak een inleiding.

Geef een korte beschrijving van de software die wordt getest, de versie van de software, het doel van het testen en andere relevante informatie, zoals de datum van de test.

Inleveren

De inleiding van het testrapport

Hang man - use cases en scenario's

Use Cases

Je hebt eigenlijk maar een paar use cases:

  1. Als speler wil het spel starten omdat ik het spel wil gaan spelen
  2. Als speler wil een beurt spelen en een letter raden om het woord te raden
  3. Als speler wil ik het spel stoppen omdat ik het niet wil afmaken
  4. Als beheerder wil ik de woorden die een speler kan raden veranderen

Bedenk bij alle use cases de stappen die je wilt uitvoeren om het te testen.

Bij use case 2 moet je meerdere zaken testen, denk aan ongeldige invoer, of een letter invoeren die je al hebt geraden, of een hoofdletter invullen van een kleine letter die al is geraden, bedenk verschillende scenario's en beschrijf de stap of stappen.

Bij use case 2 eindigt het spel ook. Het eindigt of omdat je te veel beurten hebt gehad, of omdat je hebt gewonnen en het woord hebt geraden.

Opdracht

Maak een hoofdstukje van elke use case en beschrijf bij elke use case een scenario. Beschrijf de stap of stappen die je moet doorlopen voor het scenario.

Bij use case 2 beschrijf je minimaal 5 scenario's met de bijbehorende stappen.

Als alle stappen zijn beschreven dan voer je alle suit en beschrijf je per proces de bevindingen.

Inleveren

Werk alle scenario's uit en beschrijf deze. Verdeel de scenario's per use case.

--

Hang Man - bevindingen

In de vorige opgave heb je een aantal stappenplannen gemaakt.

Voer alle stappenplannen uit en beschrijf per stappen plan je bevindingen.

Je voert minimaal alle stappenplannen uit, maar mocht je tegen zaken aanlopen die misschien niet in de stappenplannen staan, dan is dat prima. Noteer ook deze bevindingen.

Hoe beschrijf je een bevinding?

Stel je hebt een scenario waarin je de letter A hebt geraden en dat de letter A is afgekeurd. Als je de A opnieuw raadt wil je niet dat dit als een beurt wordt gerekend.

Je bevinding zou er dan als volgt kunnen uitzien:

Nadat de letter A was ingevoerd en was afgekeurd werd de beurt geteld. Ik had n raad-poging minder over. Toen ik opnieuw de A invoerde kreeg ik een boodschap dat ik A al had geprobeerd en het aantal raad-pogingen bleef gelijk. Bij het invoeren van een a (kleine letter) nadat ik een A had geraden was het resultaat hetzelfde. De raadpogingen zijn dus case insensitive.

Opdracht

Voer alle scenario's uit, en beschrijf je bevindingen.

Je kan de scenario's die je had opgesteld nummeren zodat je de bevindingen ook kan nummeren zodat je weet welke bevinding bij welke scenario hoort.

Nog overzichtelijker is om alles in een tabel te zetten!

Inleveren

Scenario's (die je al had) met daarbij de bevindingen.

Hang Man - conclussies

Als laatste maken we paragraaf conclusies.

In de conclusies benoem je het algemene beeld, zoals:

Opdracht

Beschrijf de conclusies van je test.

Tafels leren

Je gaat opnieuw een Python programma testen.

Tafels leren

Met het Python-programma tafels leren .

Use cases

Opstellen testplan

Maka een testplan zoals je dat hebt geoefend.

Maak de volgende hoofdstukken:

  1. Inleiding ,
  2. Use cases.
  3. Scenario's per use case.
  4. S tappenplan per scenario.
  5. Voer je stappenplan uit.
  6. Beschrijf je bevindingen per scenario.
  7. Beschrijf de algehele conclussie .

Inleveren

Volledig testplan in pdf.

Code

# version 3.1 (July 2023)
import time
import random

# De tijd wanneer het spel start
start_time = time.time()

# Tijdslimiet voor het spel in seconden
time_limit = 20

# Teller voor het aantal goede antwoorden
correct_count = 0

# Bepaal het initi le bereik voor de getallen
number_range = 5

# Bewaar de laatste vraag
last_question = None

while True:
# Bereken hoeveel tijd er al verstreken is
elapsed_time = time.time() - start_time

# Als de tijdslimiet is bereikt, stop dan met het spel
if elapsed_time > time_limit:
print("Tijd is op!")
print(f"Je hebt {correct_count} vragen goed beantwoord.")
print(f"Je eindigde op moeilijkheidsgraad {number_range - 4}.")
break

# Bereken de resterende tijd en print deze
remaining_time = time_limit - elapsed_time
print(f"Resterende tijd: {remaining_time:.2f} seconden")

# Verhoog het bereik elke keer dat de gebruiker vijf vragen correct beantwoordt
if correct_count % 3 == 0 and correct_count > 0:
number_range += 1
print(f"Moeilijkheidsgraad verhoogd! Je zit nu op moeilijkheidsgraad {number_range - 4}.")

# Genereer een nieuwe vraag
num1, num2 = random.randint(1, number_range), random.randint(1, number_range)

# Controleer of de nieuwe vraag hetzelfde is als de vorige vraag
# Als dat het geval is, genereer dan een nieuwe vraag
while (num1, num2) == last_question:
num1, num2 = random.randint(1, number_range), random.randint(1, number_range)

# Bewaar de huidige vraag als de laatste vraag
last_question = (num1, num2)

correct_answer = num1 * num2

# Stel de vraag aan de gebruiker
user_answer = int(input(f"Wat is {num1} * {num2}? "))

# Controleer het antwoord
if user_answer == correct_answer:
print("Correct!")
correct_count += 1
else:
print("Fout! Het juiste antwoord was: ", correct_answer)

Challenges

Challenges

Portfolio Challenge

O1 - Ontwerp de basis pagina's

Bouw een website die over jezelf gaat, de teksten van je website ga je tijdens de persoonlijk profileren lessen opstellen.

De opdracht:

Opdracht

  1. Bouw een pagina voor de homepage (index .html ).
  2. Bouw een pagina voor je profiel (profiel.html).
  3. Bouw een pagina voor je overmij (overmij.html).
  4. Bouw een pagina voor je visie ( visie .html).

Zorg dat alle pagina's hetzelfde menu hebben. Menu's moeten ook werken!
Maak van je website iets persoonlijks, geef het een mooie vorm, gebruik een achtergrond plaatje, doe iets met de font keuze.

Leef je uit en gebruik de technieken die je hebt geleerd!

Inleveren bij deze opdracht:

  1. index.html
  2. profiel.html
  3. overmij.html
  4. visie.html

  5. screenshot van index.html in browser
  6. screenshot van profiel .html in browser
  7. screenshot van overmij.html in browser
  8. screenshot van visie.html in browser

O2 - Maak de website compleet

Plaats jouw opdrachten van Persoonlijk Profileren op jouw website. De vorm mag jezelf bepalen.

De vervolgpagina's vul je met onderstaande:

Vervolgpagina Mijn profiel:
- Plaats hier een foto van jezelf
- Schrijf hier je naam, leeftijd, de stad waar je woont

Vervolgpagina Over mij:
- Plaats hier de 6 lesopdrachten van persoonlijk profileren (tijdlijn, normen &waarden, DISC, kernkwadranten, SWOT analyse, 360 graden feedback)

Vervolgpagina Mijn visie:

Als je tevreden bent kun je de files inleveren en tonen aan een van de docenten.

Inleveren bij deze opdracht:

 

 

Challenges

Voetbal Challenge

Challenge

In deze challenge krijg je een aantal voetbaluitslagen en met die uitslagen moet jij berekenen hoeveel punten de voetbalclubs hebben.

Voorkennis

Voor deze challenge heb je kennis nodig van:

Data structuren

Data structuren zijn manieren waarop gegevens in de computer zijn opgeslagen. In deze challenge gaan we kijken naar een datastructuur van voetbaluitslagen. Uit deze uitslagen gaan we per ploeg berekenen hoeveel punten deze club in totaal heeft.

In deze challenge bestaat de datastructuur uit een array van gespeelde wedstrijden.

Elke wedstrijd is een assciociative array, bijvoorbeeld:

['thuis' => 'FC Twente', 'uit' => 'Fortuna Sittard', 'uitslag'=> [1,2] ]

Het assiociative array heeft drie elementen. De naam van de thuisclub, de naam van de uitclub en de uitslag. De uitslag zelf is weer een (indexed) array met twee elementen.

De uitdaging

Je hebt een datastructuur $uitslagen (zie regel 3 en volgende in code hieronder).

Deze datastructuur is een array van acciociative arrays waarin van een aantal gespeelde wedstrijden de eindscore staat.

Je ziet op bijvoorbeeld regel 4 dat Feyenoord tegen FC Twente heeft gespeeld en dat de uitslag 1-2 was. FC Twente heeft dus gewonnen.

De opdracht is om een lijstje te maken waarin van alle voetbalclubs het aantal punten dat zij hebben behaald wordt berekend.

De punten worden als volgt berekend;

Uitslag Punten
Gewonnen 3
Gelijkspel 1
Verloren 0

Voorbeeld, later we FC Twente nemen.

FC Twente heeft 3 x gespeeld (regel 4, 21 en 31). FC Twente heeft 2x gewonnen en 1x verloren. FC Twente heeft dus 6 punten uit 3 wedstrijden.

De output zou dan worden:

Club Punten Gespeeld
FC Twente 6 3
... ... ..

The code

Je krijgt al een heel stuk code aangeleverd.

  1. Er is een datastructuur voor de uitslage ($uitslagen).
  2. Dan wordt er een tabel afgedrukt met alle uitslagen.
  3. Vervolgens wordt er twee lege data structuren gemaakt.
    • $punten hierin komt per ploeg te staan hoeveel punten ze hebben. Bijvoorbeeld $punten['FC Twente'] wordt op 0 gezet, maar zal uiteindelijk de waarde 6 moeten krijgen.
    • $gespeeld hierin komt per ploeg te staan hoeveel wedstrijden zij gespeeld hebben. Bijvoorbeeld $gespeeld['FC Twente'] wordt op 0 gezet, maar zal uiteindelijk de waarde 3 moeten krijgen.
  4. Na deze code moet jij code toevoegen die de punten en het aantal gespeelde wedstrijden berekend.
  5. Het laatste code-stukje drukt alle punten en aantal gespeelde wedstrijden af.

Je mag de bestaande code veranderen. Het enige dat vast staat is de $uitslagen array. Deze blijft ongewijzigd!

<?php

$uitslagen=[
['thuis' => 'Feyenoord', 'uit' => 'FC Twente', 'uitslag'=> [1,2] ],
['thuis' => 'AZ', 'uit' => 'RKC Waalwijk', 'uitslag'=> [1,3] ],
['thuis' => 'PEC Zwolle', 'uit' => 'PSV', 'uitslag'=> [1,2] ],
['thuis' => 'Heracles Almelo', 'uit' => 'Sparta Rotterdam', 'uitslag'=> [1,3] ],
['thuis' => 'sc Heerenveen', 'uit' => 'Go Ahead Eagles', 'uitslag'=> [3,1] ],
['thuis' => 'FC Groningen', 'uit' => 'SC Cambuur', 'uitslag'=> [2,3] ],
['thuis' => 'Vitesse', 'uit' => 'Ajax', 'uitslag'=> [2,2] ],
['thuis' => 'Willem I', 'uit' => 'FC Utrecht', 'uitslag'=> [3,0] ],
['thuis' => 'N.E.C.', 'uit' => 'Fortuna Sittard', 'uitslag'=> [0,1] ],

['thuis' => 'Ajax', 'uit' => 'sc Heerenveen', 'uitslag'=> [5,0] ],
['thuis' => 'RKC Waalwijk', 'uit' => 'Heracles Almelo', 'uitslag'=> [2,0] ],
['thuis' => 'Fortuna Sittard', 'uit' => 'Vitesse', 'uitslag'=> [1,2] ],
['thuis' => 'Sparta Rotterdam', 'uit' => 'PEC Zwolle', 'uitslag'=> [2,0] ],
['thuis' => 'Go Ahead Eagles', 'uit' => 'Feyenoord', 'uitslag'=> [0,1] ],
['thuis' => 'SC Cambuur', 'uit' => 'Willem I', 'uitslag'=> [1,1] ],
['thuis' => 'PSV', 'uit' => 'N.E.C.', 'uitslag'=> [3,2] ],
['thuis' => 'FC Twente', 'uit' => 'FC Groningen', 'uitslag'=> [3,0] ],
['thuis' => 'FC Utrecht', 'uit' => 'AZ', 'uitslag'=> [2,2] ],

['thuis' => 'Feyenoord', 'uit' => 'PSV', 'uitslag'=> [2,2] ],
['thuis' => 'AZ', 'uit' => 'Ajax', 'uitslag'=> [2,2] ],
['thuis' => 'Vitesse', 'uit' => 'sc Heerenveen', 'uitslag'=> [1,2] ],
['thuis' => 'N.E.C.', 'uit' => 'Go Ahead Eagles', 'uitslag'=> [1,0] ],
['thuis' => 'FC Groningen', 'uit' => 'Sparta Rotterdam', 'uitslag'=> [1,2] ],
['thuis' => 'PEC Zwolle', 'uit' => 'FC Utrecht', 'uitslag'=> [1,1] ],
['thuis' => 'Willem I', 'uit' => 'Heracles Almelo', 'uitslag'=> [4,0] ],
['thuis' => 'FC Twente', 'uit' => 'Fortuna Sittard', 'uitslag'=> [1,2] ],
['thuis' => 'SC Cambuur', 'uit' => 'RKC Waalwijk', 'uitslag'=> [0,0] ],

['thuis' => 'N.E.C.', 'uit' => 'Fortuna Sittard', 'uitslag'=> [0,0] ],

];

echo "<table border=1>";
echo "<tr><th>Thuis</th><th>Uit</th><th></th><th></th></tr>";
foreach ($uitslagen as $uitslag) {
  echo "<tr>";
  echo "<td>".$uitslag['thuis']."</td>";
  echo "<td>".$uitslag['uit']."</td>";
  echo "<td>".$uitslag['uitslag'][0]."</td>";
  echo "<td>".$uitslag['uitslag'][1]."</td>";
  echo "</tr>";
}
echo "</table>";

$punten=[];
$gespeeld=[];
foreach ($uitslagen as $uitslag) {
  $punten[$uitslag['thuis']]=0;
  $punten[$uitslag['uit']]=0;
  $gespeeld[$uitslag['thuis']]=0;
  $gespeeld[$uitslag['uit']]=0;
}

// bereken hier de punten en aantal gespeelde wedstrijden per team.
//
// Het is de bedoeling om:
//    de punten in het array $punten[] te zetten;
//    en het aantal gespelede wedstrijden in $gespeeld[];
// Deze arays zien er als volgt uit:
//    $punten['naam van de club'] = 0
//    $gespeeld['naam van de club'] = 0
// Alle waarden zijn dus 0 en is jou taak om beiede arrays met de juiste waarden te vullen.
// Gebruik alleen code die je al hebt geoeffend; je moet de code kunnen uitleggen.

echo "<table border=1>";
echo "<tr><th>Club</th><th>Punten</th><th>Gespeeld</th></tr>";
foreach ($punten as $key => $value) {
  echo "<tr>";
  echo "<td>".$key."</td>";
  echo "<td>".$value."</td>";
  echo "<td>".$gespeeld[$key]."</td>";
  echo "</tr>";
}
echo "</table>";

Output

De output is gesorteerd op punten en laat een lijstje zien van alle voetbalclubs en hun behaalde punten. De tabel ziet er netjes uit.

Onderstaand plaatje is een voorbeeld, de uitkomsten kunnen iets anders zijn.

image-1657872023212.png

Aanpak

Er zijn meerdere mogelijkheden om dit aan te pakken. Hieronder wordt een mogelijke oplossing beschreven. Je hoeft deze stappen niet te volgend.

  1. We moeten door de uitslagen array heen lopen om per wedstrijd te bepalen welke ploeg hoeveel punten krijgt.
    Maak dus een loop die door de uitslagen loopt.

  2. In de loop maak je twee variabelen $ thuisClub en $ uitClub . Je geeft deze de waarden (naam) van de thuis en uitclub.
    -> Test of je deze twee variabelen de juiste waarde heb gegeven door ze af te drukken.

  3. In de loop maak je nog twee variabelen $ thuisScore en $ uitScore . Je geeft deze de waarden van het aantal doelpunten dat de thuis- en uitclub hebben gescoord.
    -> Test of je ook deze twee variabelen de juiste waarde heb gegeven door ze af te drukken.

  4. Nu zijn er drie mogelijkheden:
    De $thuisScore > $ uitScore , de $ thuisClub krijgt 3 punten
    De $ uitScore > $ thuisScore , de $ uitClub krijgt 3 punten
    De $ thuisScore == $ uitScore , de $ thuisClub en $ uitClub krijgen beiden 1 punt.

    Maak de juiste if's en vul het punten array.

    Denk eraan dat de key van het punten array de naam van de club is en die staat in $ thuisClub en $ uitClulb .
    -> Test , bedenk een manier om te testen of de club de juiste punten krijgt.

  5. Voor de thuis- en uitclub moet je het aantal gespeelde wedstrijden met één ophogen. Hiervoor hoog je de juiste waarde op in het $ gespeeld array. Ook in het $ gespeeld array is de key de naam van de club.

  6. Test de gehele berekening.

Eisen

  1. Zorg ervoor dat alle uitkomsten kloppen (60 punten). Vergeet niet te sorteren.

  2. Zorg ervoor dat de output gestyled is (gebruik styles en classes). Maak er wat moois van, overtuig de klant dat jij iets moois kan maken (20 punten)

  3. Zorg ervoor dat de HTML code klopt en volledig is. Dus gebruik <html>, <head> etc (10 punten).

  4. De code klopt, het inspringen en uitlijnen is goed en je hebt duidelijk commentaar toegevoegd om uit te leggen wat je doet (10 punten).

Inleveren

  1. Screendump van jouw gehele browser met het resultaat.
  2. De PHP code en eventueel je CSS style sheet.

--

Challenges

Javascript Challenge

Bestelsysteem kantine

Maak een bestelsysteem voor de kantine van het ROC. In het scherm van het systeem zijn twee blokken zichtbaar. Het linkerblok bestaat uit een bestellijst / formulier, waarin kan worden aangegeven wat wordt besteld en de aantallen. Hier staan minimaal 4 te bestellen producten. Elk product heeft een andere prijs. In het rechter blok wordt een overzicht gegeven van de bestelling. Hierin staan de bestelde producten, de kosten per product (rekening houdend met het aantal dat wordt besteld) en de totale kosten van de bestelling.

Na het invoeren van een bestelling, kan op een knop ‘OPNIEUW’ worden geklikt om de bestelling te resetten en opnieuw te beginnen.

Overige functionele eisen:
• In het overzicht worden alleen regels opgenomen voor producten die zijn besteld
• Er mogen geen negatieve aantallen worden opgenomen in de bestelling
• Als er nog geen productaantallen zijn ingevoerd, is het rechter blok leeg
• Als een product wordt aangepast naar 0 stuks, verdwijnt de bestelling in het besteloverzicht (rechter blok)

https://talnet.instructure.com/media_objects_iframe/m-5aCLxZqnohJPEKDnEHqsMXcHpt6rezai

Functionaliteit

Punten

Het scherm heeft een duidelijke verzorgde opmaak met een eigen stijl. De menulijst en de bestelling worden als twee blokken die naast elkaar staan weergegeven.

20

De bestellijst geeft alleen de producten weer die worden besteld (dus waarvan het aantal bestellingen groter dan 0 is). In eerste instantie is de bestellijst leeg.

20

Bij veranderen van een productaantal zie je een verandering op de bestellijst.

10

De productregel op de bestellijst geeft zowel de prijs per product, het aantal en de totaal prijs voor dat product weer.

10

Onder de bestelregels staat de totaalprijs van de hele bestelling.

10

Na het klikken op de ‘opnieuw’-knop, wordt het scherm gereset en kan een nieuwe bestelling worden ingevoerd.

10

Een besteld product dat na de bestelling weer op het aantal 0 wordt gezet, verdwijnt als regel in het blok van de bestelling.

10

Het aantal bestellingen van een product kan niet negatief zijn.

10

Inleveren

Frond End 2

Frond End 2

React 2 (React Movie Explorer - concept 13/1)

Vite + React


Projectnaam: "React Movie Explorer"

Beschrijving: Studenten bouwen een interactieve webapplicatie waarmee gebruikers informatie over films kunnen opzoeken. De applicatie gebruikt een externe API, zoals de OMDb API of een andere gratis films-API. Gebruikers kunnen zoeken naar films, details bekijken (zoals titel, genre, plot, en poster), en een lijst van favoriete films bijhouden.


Functionaliteiten:

  1. Zoekfunctionaliteit:

    • Gebruiker kan een film zoeken op naam.
    • Zoekresultaten worden dynamisch weergegeven.
  2. Film Details:

    • Klik op een film in de lijst om meer details te bekijken (bijvoorbeeld een aparte pagina of een popup).
  3. Favorieten:

    • Gebruikers kunnen films toevoegen aan een lijst met favorieten.
    • Favorieten worden opgeslagen in de localStorage, zodat ze blijven bestaan na het herladen van de pagina.
  4. Responsief Design:

    • De app werkt goed op zowel desktop als mobiel.
  5. Vite + React:

    • Vite zorgt voor een snelle ontwikkelomgeving.
    • Studenten leren component-gebaseerde ontwikkeling met React, inclusief statebeheer met useState en useEffect.

Extra Opties voor Gevorderde Studenten:


Benodigde tools en kennis:

  1. Tools:

    • Vite: Voor snelle projectopzet.
    • React: Voor het bouwen van componenten.
    • API zoals OMDb API (registreer voor een gratis API-sleutel).
    • CSS-framework (optioneel): Tailwind, Bootstrap, of handgemaakte CSS.
  2. Kennis:

    • Basis JavaScript en ES6+ (bijv. fetch API).
    • React-beginselen (useState, useEffect, props, componenten).
    • Basis HTML/CSS.

Projectopbouw:

  1. Les 1: Introductie en opzet

    • Installeer Node.js, Vite, en maak een nieuw project.
    • Begrijp de folderstructuur van Vite + React.
    • Bouw een eenvoudige React-component die een "Hello World" bericht toont.
  2. Les 2: API-integratie

    • Leer hoe je de OMDb API gebruikt met fetch.
    • Bouw een zoekbalk en toon resultaten.
  3. Les 3: Statebeheer en favorieten

    • Gebruik useState voor statebeheer.
    • Voeg een favorietenfunctie toe en sla favorieten op in localStorage.
  4. Les 4: Styling en afronding

    • Voeg styling toe met CSS of een framework.
    • Maak de app responsive.
    • Voeg een themawisselaar toe als bonus.

Les 1: Introductie en opzet

Doel van de les

In deze les leren studenten hoe ze een Vite + React-project opzetten, de folderstructuur begrijpen en een eenvoudige React-component bouwen die een "Hello World" bericht toont.


Stap 1: Installeren van Node.js

  1. Controleer of Node.js is geïnstalleerd:

    • Open een terminal (Command Prompt, PowerShell of een andere terminal).
    • Typ het volgende commando:
      node -v
      
    • Als er een versie wordt weergegeven (bijvoorbeeld v18.16.0), dan is Node.js al geïnstalleerd.
  2. Installeer Node.js als dit nog niet is gebeurd:

  3. Controleer ook npm (Node Package Manager):

    • Typ in de terminal:
      npm -v
      
    • Dit toont de versie van npm. Het wordt automatisch met Node.js geïnstalleerd.

Stap 2: Een Vite + React-project opzetten

  1. Maak een nieuw project aan met Vite:

    • Typ in de terminal:
      npm create vite@latest my-react-app
      
    • Kies de volgende opties:
      • Projectnaam: my-react-app (of een andere naam naar keuze).
      • Framework: React.
      • Variant: JavaScript (voor beginners).
  2. Navigeer naar de projectmap:

    cd my-react-app
    
  3. Installeer de benodigde afhankelijkheden:

    npm install
    
  4. Start de ontwikkelserver:

    npm run dev
    
    • Noteer het adres (meestal http://localhost:5173) dat in de terminal wordt weergegeven.
    • Open dit adres in een webbrowser. Je zou een standaard Vite-react-startpagina moeten zien.

Stap 3: Begrijp de folderstructuur

In de projectmap zie je de volgende belangrijke mappen en bestanden:

Leg uit dat src/ de map is waar alle React-code zich bevindt.


Stap 4: Bouw een eenvoudige React-component

  1. Open de App.jsx in een code-editor (bijv. VS Code).
  2. Pas de inhoud aan om een eenvoudige "Hello World"-component te maken:
    function App() {
      return (
        <div>
          <h1>Hello World</h1>
          <p>Welkom bij je eerste React-app!</p>
        </div>
      );
    }
    
    export default App;
    
  3. Opslaan en bekijken:
    • Sla het bestand op.
    • Ga terug naar de browser en vernieuw de pagina. Je zou nu de tekst "Hello World" en "Welkom bij je eerste React-app!" moeten zien.

Extra uitdaging (optioneel)


Samenvatting van de les


Voorbereiding voor les 2


Les 2: API-integratie

Doel van de les

Studenten leren hoe ze de OMDb API kunnen gebruiken met de fetch-methode in JavaScript en bouwen een eenvoudige zoekfunctionaliteit om filmresultaten weer te geven in hun React-app.


Stap 1: De OMDb API begrijpen

  1. Wat is de OMDb API?

    • Een gratis API waarmee je informatie over films kunt ophalen, zoals titel, jaar, genre, en een poster.
    • API-documentatie: OMDb API.
  2. Vraag een API-sleutel aan:

    • Ga naar de website van OMDb en registreer je voor een gratis API-sleutel.
    • Noteer deze sleutel, want deze is nodig om de API te gebruiken.

Stap 2: Een zoekfunctionaliteit toevoegen

  1. Bewerk de App.jsx:

    • Open het bestand App.jsx.
    • Vervang de bestaande code door onderstaande basisopzet:
      import { useState } from 'react';
      
      function App() {
        const [searchTerm, setSearchTerm] = useState('');
        const [movies, setMovies] = useState([]);
      
        const API_KEY = 'JOUW_API_SLEUTEL_HIER';
      
        const searchMovies = async () => {
          const response = await fetch(`https://www.omdbapi.com/?apikey=${API_KEY}&s=${searchTerm}`);
          const data = await response.json();
          if (data.Search) {
            setMovies(data.Search);
          } else {
            setMovies([]);
          }
        };
      
        return (
          <div>
            <h1>React Movie Explorer</h1>
            <div>
              <input
                type="text"
                placeholder="Zoek een film..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
              <button onClick={searchMovies}>Zoeken</button>
            </div>
            <div>
              {movies.length > 0 ? (
                <ul>
                  {movies.map((movie) => (
                    <li key={movie.imdbID}>
                      <h2>{movie.Title}</h2>
                      <p>{movie.Year}</p>
                      <img src={movie.Poster} alt={movie.Title} />
                    </li>
                  ))}
                </ul>
              ) : (
                <p>Geen films gevonden. Probeer een andere zoekterm.</p>
              )}
            </div>
          </div>
        );
      }
      
      export default App;
      
  2. Uitleg over de code:

    • Statebeheer:
      • searchTerm: Houdt bij wat de gebruiker intypt in de zoekbalk.
      • movies: Slaat de zoekresultaten op.
    • fetch:
      • Roept de OMDb API aan met de ingevoerde zoekterm.
    • Dynamische rendering:
      • De lijst met films wordt weergegeven op basis van de API-resultaten.

Stap 3: Test de zoekfunctionaliteit

  1. Start de ontwikkelserver:
    npm run dev
    
  2. Open de app in de browser:
    • Typ een zoekterm in (bijvoorbeeld "Avengers") en klik op de knop "Zoeken".
    • Controleer of de resultaten worden weergegeven met titel, jaar, en poster.

Stap 4: Styling toevoegen (optioneel)

  1. Basis CSS toevoegen:

    • Maak een nieuw bestand App.css in de src/ map:
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        text-align: center;
      }
      
      input {
        padding: 8px;
        margin: 10px;
        width: 200px;
      }
      
      button {
        padding: 8px 12px;
        background-color: #007BFF;
        color: white;
        border: none;
        cursor: pointer;
      }
      
      button:hover {
        background-color: #0056b3;
      }
      
      img {
        max-width: 150px;
        margin: 10px;
      }
      
      ul {
        list-style-type: none;
        padding: 0;
      }
      
      li {
        display: inline-block;
        margin: 10px;
      }
      
  2. Importeer de CSS in App.jsx:

    import './App.css';
    
  3. Bekijk het resultaat:

    • Herlaad de pagina om te zien hoe de app er nu uitziet met styling.

Samenvatting van de les


Voorbereiding voor les 3


Les 3: Statebeheer en favorieten

Doel van de les

Studenten leren hoe ze statebeheer met useState toepassen in React en een favorietenfunctionaliteit implementeren. Favorieten worden opgeslagen in localStorage, zodat deze behouden blijven na het herladen van de pagina.


Stap 1: Favorieten toevoegen aan state

  1. Pas de App.jsx aan:
    • Open het bestand App.jsx.
    • Voeg een nieuwe state toe voor het opslaan van favorieten:
      import { useState, useEffect } from 'react';
      
      function App() {
        const [searchTerm, setSearchTerm] = useState('');
        const [movies, setMovies] = useState([]);
        const [favorites, setFavorites] = useState([]);
      
        const API_KEY = 'JOUW_API_SLEUTEL_HIER';
      
        const searchMovies = async () => {
          const response = await fetch(`https://www.omdbapi.com/?apikey=${API_KEY}&s=${searchTerm}`);
          const data = await response.json();
          if (data.Search) {
            setMovies(data.Search);
          } else {
            setMovies([]);
          }
        };
      
        const addToFavorites = (movie) => {
          const updatedFavorites = [...favorites, movie];
          setFavorites(updatedFavorites);
          saveToLocalStorage(updatedFavorites);
        };
      
        const removeFromFavorites = (movie) => {
          const updatedFavorites = favorites.filter(fav => fav.imdbID !== movie.imdbID);
          setFavorites(updatedFavorites);
          saveToLocalStorage(updatedFavorites);
        };
      
        const saveToLocalStorage = (items) => {
          localStorage.setItem('favorites', JSON.stringify(items));
        };
      
        const loadFavoritesFromLocalStorage = () => {
          const storedFavorites = JSON.parse(localStorage.getItem('favorites')) || [];
          setFavorites(storedFavorites);
        };
      
        useEffect(() => {
          loadFavoritesFromLocalStorage();
        }, []);
      
        return (
          <div>
            <h1>React Movie Explorer</h1>
            <div>
              <input
                type="text"
                placeholder="Zoek een film..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
              <button onClick={searchMovies}>Zoeken</button>
            </div>
            <div>
              <h2>Zoekresultaten</h2>
              {movies.length > 0 ? (
                <ul>
                  {movies.map((movie) => (
                    <li key={movie.imdbID}>
                      <h2>{movie.Title}</h2>
                      <p>{movie.Year}</p>
                      <img src={movie.Poster} alt={movie.Title} />
                      <button onClick={() => addToFavorites(movie)}>Voeg toe aan favorieten</button>
                    </li>
                  ))}
                </ul>
              ) : (
                <p>Geen films gevonden. Probeer een andere zoekterm.</p>
              )}
            </div>
            <div>
              <h2>Favorieten</h2>
              {favorites.length > 0 ? (
                <ul>
                  {favorites.map((favorite) => (
                    <li key={favorite.imdbID}>
                      <h2>{favorite.Title}</h2>
                      <p>{favorite.Year}</p>
                      <img src={favorite.Poster} alt={favorite.Title} />
                      <button onClick={() => removeFromFavorites(favorite)}>Verwijder uit favorieten</button>
                    </li>
                  ))}
                </ul>
              ) : (
                <p>Geen favorieten toegevoegd.</p>
              )}
            </div>
          </div>
        );
      }
      
      export default App;
      

Stap 2: Uitleg over de code

  1. Statebeheer:

    • favorites: Houdt een lijst bij van favoriete films.
  2. LocalStorage:

    • Functie saveToLocalStorage: Slaat de favorieten op in de browser.
    • Functie loadFavoritesFromLocalStorage: Laadt favorieten uit localStorage bij het laden van de app.
  3. Favorieten toevoegen/verwijderen:

    • Toevoegen: De film wordt toegevoegd aan de favorietenlijst en opgeslagen in localStorage.
    • Verwijderen: De film wordt uit de favorietenlijst verwijderd en de wijzigingen worden opgeslagen.
  4. Gebruik van useEffect:

    • useEffect wordt gebruikt om de opgeslagen favorieten te laden bij het opstarten van de applicatie.

Stap 3: Test de applicatie

  1. Start de ontwikkelserver:
    npm run dev
    
  2. Voer een zoekopdracht uit:
    • Zoek een film en voeg deze toe aan de favorieten.
  3. Controleer de favorietenlijst:
    • Zie hoe de favorieten verschijnen onder de sectie "Favorieten".
  4. Herlaad de pagina:
    • Controleer of de favorieten behouden blijven dankzij localStorage.

Extra uitdaging (optioneel)


Samenvatting van de les


Voorbereiding voor les 4


Les 4: Film Details en Responsief Design

Doel van de les

Studenten leren hoe ze een gedetailleerde weergave van filminformatie kunnen implementeren (bijvoorbeeld in een popup of aparte pagina) en hoe ze een responsief ontwerp kunnen toevoegen zodat de applicatie goed werkt op zowel desktop als mobiel.


Stap 1: Gedetailleerde weergave van een film

  1. Voeg een functie toe voor het ophalen van filmgegevens:

    • Pas de App.jsx aan om een gedetailleerde weergave van een geselecteerde film te tonen.

    • Voeg state toe om de details van de geselecteerde film bij te houden:

      const [selectedMovie, setSelectedMovie] = useState(null);
      
      const fetchMovieDetails = async (movieId) => {
        try {
          const response = await fetch(`https://www.omdbapi.com/?apikey=${API_KEY}&i=${movieId}`);
          const data = await response.json();
          setSelectedMovie(data);
        } catch (error) {
          console.error('Fout bij het ophalen van filmgegevens:', error);
        }
      };
  2. Open details bij klikken op een film:

    • Pas de movies.map-functie aan om een knop toe te voegen die de details opent:

      {movies.map((movie) => (
        <li key={movie.imdbID}>
          <h2>{movie.Title}</h2>
          <p>{movie.Year}</p>
          <img src={movie.Poster} alt={movie.Title} />
          <button onClick={() => fetchMovieDetails(movie.imdbID)}>Bekijk details</button>
        </li>
      ))}
  3. Toon de filmgegevens:

    • Voeg een sectie toe om de details weer te geven:

      {selectedMovie && (
        <div className="movie-details">
          <h2>{selectedMovie.Title}</h2>
          <p><strong>Jaar:</strong> {selectedMovie.Year}</p>
          <p><strong>Genre:</strong> {selectedMovie.Genre}</p>
          <p><strong>Plot:</strong> {selectedMovie.Plot}</p>
          <img src={selectedMovie.Poster} alt={selectedMovie.Title} />
          <button onClick={() => setSelectedMovie(null)}>Sluiten</button>
        </div>
      )}
  4. Styling voor de details-popup:

    • Voeg styling toe in een nieuw bestand App.css of in-line:

      .movie-details {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 1000;
      }
      
      .movie-details button {
        margin-top: 10px;
        padding: 10px;
        background-color: #007BFF;
        color: white;
        border: none;
        cursor: pointer;
      }
      
      .movie-details button:hover {
        background-color: #0056b3;
      }

Stap 2: Responsief ontwerp toevoegen

  1. Voeg algemene styling toe:

    • Zorg ervoor dat de pagina een nette indeling heeft:

      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        text-align: center;
      }
      
      ul {
        display: flex;
        flex-wrap: wrap;
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
      
      li {
        flex: 1 1 calc(33.333% - 20px);
        margin: 10px;
        box-sizing: border-box;
      }
      
      @media (max-width: 768px) {
        li {
          flex: 1 1 calc(50% - 20px);
        }
      }
      
      @media (max-width: 480px) {
        li {
          flex: 1 1 100%;
        }
      }
  2. Voeg mobiele ondersteuning toe:

    • Gebruik media queries om de app goed te laten werken op mobiele apparaten.

    • Zorg ervoor dat de film-details zich aanpassen aan kleinere schermen:

      .movie-details {
        width: 90%;
        max-width: 500px;
      }

Stap 3: Test de applicatie

  1. Start de ontwikkelserver:

    npm run dev
  2. Zoek naar een film, klik op "Bekijk details" en controleer of de details worden weergegeven.

  3. Test de app op verschillende schermformaten (desktop, tablet, mobiel).


Extra uitdaging (optioneel)


Samenvatting van de les


Voorbereiding voor toekomstige lessen

 

Frond End 2

React 2 (React To-Do Master - concept 13/1)

ChatGPT:  Hier is een ander leuk projectidee dat geschikt is voor beginnende studenten om Vite + React te leren:


Projectnaam: "React To-Do Master"

Beschrijving: Studenten maken een eenvoudige maar functionele to-do lijstapplicatie waarin gebruikers taken kunnen toevoegen, bewerken, verwijderen en als voltooid kunnen markeren. Dit project introduceert de basisprincipes van React en laat studenten werken met state, props en eenvoudige interacties.


Functionaliteiten:

  1. Taken toevoegen:

    • Gebruikers kunnen een nieuwe taak toevoegen via een invoerveld.
    • Elke taak heeft een titel en een optionele beschrijving.
  2. Taken weergeven:

    • Een lijst van taken wordt weergegeven.
    • Taken die voltooid zijn, worden visueel anders getoond (bijvoorbeeld door een streep of grijze kleur).
  3. Taken beheren:

    • Gebruikers kunnen een taak als voltooid markeren.
    • Gebruikers kunnen taken verwijderen.
    • Optioneel: gebruikers kunnen de taaknaam en beschrijving bewerken.
  4. LocalStorage-integratie:

    • De takenlijst wordt opgeslagen in localStorage, zodat taken blijven bestaan na een herstart van de applicatie.
  5. Responsief design:

    • De app werkt zowel op desktop als mobiel.

Extra Opties voor Gevorderde Studenten:


Benodigde tools en kennis:

  1. Tools:

    • Vite: Voor het opzetten van het project.
    • React: Voor het bouwen van componenten.
    • CSS of een framework zoals Tailwind voor styling.
  2. Kennis:

    • Basis JavaScript (ES6+) en React-beginselen (useState, props).
    • HTML/CSS voor eenvoudige opmaak.

Projectopbouw:

  1. Les 1: Introductie en opzet

    • Installeer Vite en maak een nieuw project.
    • Begrijp de folderstructuur en bouw een "Hello World" component.
    • Maak een basisonderdeel voor de to-do lijst (bijvoorbeeld een leeg invoerveld en een knop).
  2. Les 2: Taken toevoegen en weergeven

    • Gebruik useState om een takenlijst in de state op te slaan.
    • Bouw een eenvoudige lijstweergave waarin ingevoerde taken worden getoond.
  3. Les 3: Taken beheren

    • Voeg functionaliteit toe om taken te verwijderen en als voltooid te markeren.
    • Gebruik conditionele rendering om voltooide taken visueel anders weer te geven.
  4. Les 4: Styling en afronding

    • Voeg eenvoudige CSS-styling toe om de app aantrekkelijk te maken.
    • Integreer localStorage zodat taken behouden blijven na een herstart.

Waarom dit project?

Laat me weten of je hulp nodig hebt met het uitschrijven van een lesplan of codevoorbeelden! 😊

Frond End 2

React 2

01 - React

React is een tool die je helpt om websites te bouwen die snel en interactief zijn.
Stel je voor dat je een website maakt zoals Instagram of YouTube, waar je op knoppen kunt klikken, reacties kunt plaatsen, of video’s kunt bekijken zonder dat de hele pagina opnieuw geladen hoeft te worden.
React zorgt ervoor dat dit soepel en makkelijk werkt.

In plaats van dat je alles steeds opnieuw bouwt, kun je met React kleine bouwstenen maken (we noemen die componenten). Bijvoorbeeld: een knop, een zoekbalk of een bericht. Je kunt die bouwstenen hergebruiken, net als LEGO-blokjes, om snel een complete website te maken.

React is dus als een gereedschap voor moderne webbouwers om gave, interactieve websites te maken!

Opdracht

Ga naar linkedin.com/learning React Essential Training via SPL
>> Neem door: hoofdstuk 1 en 2

Inleveren:

Beantwoord de volgende vragen in eigen woorden:
- Wat is React?
- Wat is JSX?
- Noem 5 bedrijven die gebruik maken van React?

  1. Noteer je vragen met antwoorden in de tekstvenster en 
    lever een schreenshot van de Training waarbij vinkjes staan bij hoofdstuk 1 en 2.

afbeelding.png


02 - Versie beheer

Wat is versiebeheer met GitHub?
Stel je voor dat je aan een schoolproject werkt, bijvoorbeeld een presentatie of een website, en je wilt elke stap opslaan.
Zo kun je altijd teruggaan naar een eerdere versie als iets fout gaat.
Dat is wat versiebeheer doet: het bewaart alle veranderingen die je maakt.

GitHub is een soort online kluis voor je projecten.
Je kunt er jouw werk opslaan, delen met anderen en samenwerken zonder dat je bestanden kwijtraakt of per ongeluk iets overschrijft. Het werkt samen met een programma genaamd Git, dat al je wijzigingen netjes bijhoudt.

Als je nog geen account hebt op GitHub maak dan een account op GitHub
Ga naar github.com en maak een gratis account aan. Installeer Git op je computer en koppel het aan VS code, zodat je kan werken met versiebeheer en het kunnen samenwerken. Dat ga je later met jouw team doen.



Opdracht

Zorg ervoor dat git en github werkt.
Bij deze les is geen instructie je gaat zelf op onderzoek hoe het moet.
“Bijvoorbeeld via GitHub-documentatie, de instructies van VS Code of op https://www.linkedin.com/learning/learning-github”

Inleveren:

  1. Lever één screenshot in dat je laat zien dat je github werkt.
  2. Link naar je github account.

03 - Nieuw project met React Vite

Stap voor stap gaan wij een Boter Kaas en Eieren (Tic-Tac-Toe) spel maken in React
Onderstaande handleiding is bedoeld voor studenten om eenvoudig een Boter Kaas en Eieren-spel te maken met React.
We gebruiken Vite als bundler en ontwikkelserver omdat die lekker snel werkt. 

Handleiding Tic Tac Toe

Stap 0: Benodigdheden

Stap 1: Nieuw React-project opzetten met Vite

npm create vite@latest tictactoe -- --template react
cd tictactoe
npm install
npm run dev

Stap 2: Projectstructuur begrijpen
Na het creëren van het project heb je ongeveer deze mappen en bestanden:

tictactoe/
├─ index.html
├─ package.json
├─ vite.config.js
└─ src/
   ├─ App.css
   ├─ App.jsx
   ├─ main.jsx
   └─ ...

Opdracht

Voer de bovenstaande stappen uit en maak via github een Commit  zodat je weer terug kan als je iets verkeert gaat.
Ruim onnodige bestanden op.

Inleveren:
1. Screenshot van je  project
2. Link naar je github account waar het project staat.


04 - Tic Tac Toe

Nu je React project hebt geinstalleerd ga je verder 

Stap 1: Styling toevoegen (App.css)

Open src/App.css in je code-editor. Vervang (of voeg toe) onderstaande CSS:
Dit zorgt voor een simpel maar overzichtelijk design van het bord en de knoppen.

.app {
  text-align: center;
  font-family: Arial, sans-serif;
}
.board {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-gap: 5px;
  margin: 20px auto;
}
.square {
  width: 100px;
  height: 100px;
  font-size: 24px;
  font-weight: bold;
  background-color: #f0f0f0;
  border: 2px solid #333;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.square:hover {
  background-color: #ddd;
}
.info {
  margin-top: 20px;
  font-size: 18px;
}
.reset-button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.reset-button:hover {
  background-color: #0056b3;
}

Stap 2: De React-code (App.jsx)

import React, { useState } from 'react';
import './App.css';

function App() {
  // 1. State voor het bord: een array van 9 posities (3x3)
  const [board, setBoard] = useState(Array(9).fill(null));

  // 2. State voor wie er aan de beurt is: X begint
  const [isXNext, setIsXNext] = useState(true);

  // 3. Check of er een winnaar is:
  const winner = calculateWinner(board);

  // Functie die afhandelt wat gebeurt bij klik
  const handleClick = (index) => {
    // Als het vakje al gebruikt is of er al een winnaar is, niets doen
    if (board[index] || winner) return;

    // Kopieer het bord en zet X of O in de aangeklikte plek
    const newBoard = [...board];
    newBoard[index] = isXNext ? 'X' : 'O';
    setBoard(newBoard);

    // Wissel van speler
    setIsXNext(!isXNext);
  };

  // Functie om het spel opnieuw te starten
  const resetGame = () => {
    setBoard(Array(9).fill(null));
    setIsXNext(true);
  };

  return (
    <div className="app">
      <h1>Boter Kaas en Eieren</h1>

      {/* Bord-weergave */}
      <div className="board">
        {board.map((value, index) => (
          <Square
            key={index}
            value={value}
            onClick={() => handleClick(index)}
          />
        ))}
      </div>

      {/* Info: Winnaar, gelijkspel of volgende speler */}
      <div className="info">
        {winner ? (
          <h2>Winnaar: {winner}</h2>
        ) : board.every((square) => square) ? (
          <h2>Gelijkspel!</h2>
        ) : (
          <h2>Volgende speler: {isXNext ? 'X' : 'O'}</h2>
        )}
      </div>

      {/* Knop om opnieuw te starten */}
      <button onClick={resetGame} className="reset-button">
        Opnieuw Spelen
      </button>
    </div>
  );
}

// Klein componentje voor één vakje van het bord
function Square({ value, onClick }) {
  return (
    <button className="square" onClick={onClick}>
      {value}
    </button>
  );
}

// Functie die nagaat of iemand gewonnen heeft
function calculateWinner(board) {
  const lines = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8], // Horizontale rijen
    [0, 3, 6], [1, 4, 7], [2, 5, 8], // Verticale kolommen
    [0, 4, 8], [2, 4, 6], // Diagonalen
  ];
  for (let [a, b, c] of lines) {
    // board[a], board[b], board[c] zijn gelijk en niet null -> winnaar
    if (board[a] && board[a] === board[b] && board[a] === board[c]) {
      return board[a]; // 'X' of 'O'
    }
  }
  return null; // Geen winnaar
}

export default App;

Stap 3: Applicatie starten en testen

Zorg dat je ontwikkelserver draait:

npm run dev

Open (of herlaad) in je browser de link die in de terminal staat, meestal http://127.0.0.1:5173/.
Je ziet nu een 3x3-bord. Klik op een vakje om een X te plaatsen, klik vervolgens op een ander vakje voor O, enzovoorts.

Je ziet nu een 3x3-bord. Klik op een vakje om een X te plaatsen, klik vervolgens op een ander vakje voor O, enzovoorts.

Werkt alles?

  1. Zie je “Volgende speler: X” of “Volgende speler: O”?
  2. Komt er “Winnaar: X (of O)” in beeld als er 3 op een rij is?
  3. Krijg je “Gelijkspel” als alle vakjes vol zijn maar niemand heeft gewonnen?
  4. Werkt de knop “Opnieuw Spelen”?

Als het werkt, heb je een volledig React boter kaas en eieren spel gebouwd! 


Opdracht

Voer de bovenstaande stappen uit en zorg ervoor dat je een versie hebt opgeslagen github.

Inleveren:


05 - Samenwerken in een team.

Je hebt een basisversie van Boter Kaas en Eieren (Tic-Tac-Toe) in React gebouwd. Deze werkt, maar kan nog veel spannender worden! In deze opdracht gaan jullie in teams samenwerken om het spel uit te breiden met nieuwe functionaliteiten en styling.

Doel
  1. Samenwerken in een groep van 3 of 4 studenten.
  2. Werken met Git/GitHub om code samen te voegen.
  3. Leren hoe je React-uitbreidingen maakt: scorebord, AI, highlight van de winnende rij, of een ander idee.
  4. Presenteren van jullie eindresultaat aan de klas/docent.
Te ondernemen stappen
  1. Vorm een team

    • Vraag aan de docent met wie je samenwerkt.
    • Maak onderling afspraken over communicatie en taakverdeling.
  2. Verdeel de uitbreidingen
    Ieder kiest een uitbreiding of verzint zelf iets. Bijvoorbeeld:

    1. Scorebord: Houd bij hoe vaak X en O winnen, en toon dit in de UI.
    2. Winnende rij highlighten: Licht de winnende vakjes extra op.
    3. AI-tegenstander: Laat een eenvoudige computer ook meespelen.
    4. App versie voor mobile telefoon
    5. Eigen idee: Bedenk zelf een toffe functie (zoals een timer, statistieken, grotere spelborden, etc.).
  3. Afspraken maken

    • Wie doet wat? Noteer dit kort.
    • Hoe delen jullie de code? Gebruik bijv. Git en maak voor elk onderdeel een eigen branch.
  4. Implementeren

    • Pas de React-code aan om jouw gekozen feature te bouwen.
    • Werk tegelijkertijd aan styling en layout (CSS).
    • Test alles grondig in je groep (check of alle functies goed samenwerken).
  5. Samenvoegen en testen

    • Maak Pull Requests (PR’s) of merge van ieders branch naar de hoofdbranch.
    • Test als team het geheel: Werkt het scorebord? Komt de highlight goed in beeld? Doet de AI een zet?
  6. Eindpresentatie

    • Demonstreer jullie spel. Speel een potje, laat zien hoe je feature(s) werken.
    • Licht kort jullie rol en uitdagingen toe.

Opdracht

Voer bovenstaande stappen uit 

Inleveren:

  1. presentatie.  (na presentatie is deze opdracht voldaan)

06 - Ieder een eigen game

Met je team werk je samen aan één nieuw spel, gebouwd in React (met Vite).
Samen ga je onderzoeken wat de mogelijkheden zijn met React.

 Welk spel ga je bouwen?

    • Dat mag een bordspel, kaartspel, quiz, platformer of ander genre zijn.
    • Enkele voorbeelden ter inspiratie:
      • Memory (kaarten omdraaien en matchen)
      • Ganzebord (pionnen, dobbelsteen, speciale vakken)
      • Pictionary-achtige app (tekenen, raden)
      • Quiz-/Trivia-spel met meerkeuzevragen
      • Of een eigen origineel concept!
  1. Spelregels en Doel

    • Beschrijf kort en bondig de regels en het doel van je spel.
    • Wat maakt het spel “leuk” of uitdagend voor de speler?
  2. Layout en Styling

    • Maak een (schets)ontwerp van de interface.
    • Werk met componenten (bijv. Board, Card, Player, Question, Controls, etc.).
    • Zorg voor een herkenbare en aantrekkelijke styling (CSS).
  3. Functionaliteit

    • Minimaal:
      • State management met React Hooks (bijv. useState, useEffect).
      • Interactie: De gebruiker kan klikken, invoeren of anderszins interacteren.
      • Logica: Het spel reageert op de acties volgens de afgesproken spelregels.
    • Optioneel (maar aanbevolen):
      • Scoren of bijhouden van voortgang.
      • Speciaal effect of animaties bij winst/verlies of bij interactie.
      • LocalStorage of session om (een deel van) de voortgang op te slaan.

2. Samenwerkingsafspraken
  1. Teamrollen

    • Verdeel onderling wie het game concept uitwerkt, wie de frontend vormgeeft, wie de logica programmeert, enzovoort.
    • Minimaal één keer per week overleg (live of online).
  2. Versiebeheer

    • Gebruik een Git-repository (GitHub, GitLab, Bitbucket).
    • Maak voor elk onderdeel (feature) een aparte branch; doe Pull Requests en code reviews.
  3. Planning

    • Stel een globale tijdslijn op: ontwerp → implementatie basis → testen → uitbreiden → presentatie.
    • Zorg dat iedereen tussentijds kan laten zien hoe ver hij/zij is.

Inleveren
  1. Werkende React-app

    • Gemaakt met Vite.
    • Startbaar via npm install en npm run dev
  2. Git-repository

    • Gedeelde repository met duidelijke commit-geschiedenis van alle teamleden.
  3. Documentatie

    • Korte handleiding: hoe werkt het spel? Wat zijn de regels?
    • Korte technische uitleg: hoe hebben jullie de logica opgezet? Welke componenten zijn er?
    • Afgesproken taken: wie heeft wat gebouwd?
    • Problemen en oplossingen: noem eventuele uitdagingen en hoe jullie die oplosten.
  4. Presentatie (als onderdeel van de les)

    • Demo van het spel (kort potje spelen, of laten zien hoe het werkt).
    • Toelichting op jullie samenwerking (verdeling, processen).
    • Vragen van de docent/medestudenten beantwoorden.

Digitale vaardigheden

Digitale vaardigheden

Compleet

Info:
PS C:\Prog\CanvasImport-Export> python .\reformatterCanvas.py 12231

Inleiding

Digitale Vaardigheden voor de Toekomst

In onze samenleving gebruiken we steeds meer digitale informatie en technologie. Denk aan computers, tablets en smartphones. We hebben mensen nodig die begrijpen hoe al deze systemen werken en hoe ze samenhangen.

De cursussen 'Digitale Vaardigheden Basis' en 'Digitale Vaardigheden Gevorderd' leren je de belangrijkste dingen over digitale technologie. Het maakt niet uit welk softwareprogramma je gebruikt of hoe je werkt, deze cursussen zijn nuttig voor iedereen.

Deze cursussen zijn belangrijk voor beroepen waar veel met digitale informatie wordt gewerkt, zoals het maken van rapporten, het analyseren van data of het beheren van content op websites.

Als je deze cursussen afrondt, krijg je een certificaat. Dit laat werkgevers zien dat jij de digitale vaardigheden hebt die zij nodig hebben, waardoor je een grotere kans hebt op een goede baan.

Veel succes.


Het keuzedeel Digitale Vaardigheden Gevorderd wordt aangeboden in combinatie met veel nieuwe kwalificatiedossiers. De totale studielast bedraagt 240 uur. Hieronder vind je een link naar de volledige en officiële tekst van het keuzedeel. Het lesmateriaal is ingedeeld naar kerntaken en werkprocessen.

Open bestand Het volledige dossier kun je hier lezen

Maak een Digitaal Project

Doel: Leer en laat zien dat je goed bent met computers door een digitaal project te maken. In dit project verzamel je informatie, werk je die uit en presenteer je alles met behulp van verschillende digitale tools.

Beschrijving: Je gaat een digitaal project maken over een onderwerp dat je interessant vindt en dat te maken heeft met een vak waar digitale vaardigheden belangrijk zijn.

Stappen:

  1. Kies een Onderwerp:

    • Denk aan iets wat je interesseert, zoals een hobby, een schoolvak, of een actueel onderwerp. Bijvoorbeeld: "Klimaatverandering", "Social Media Trends", of "De Geschiedenis van Videogames".
  2. Informatie Verzamelen:

    • Zoek online naar informatie, zoals websites, artikelen, video's en meer. Zoek minstens 5 verschillende bronnen.
    • Schrijf de belangrijkste dingen op die je hebt gevonden.

  3. Informatie Verwerken:

    • Gebruik een tekstverwerkingsprogramma (zoals Word of Google Docs) om je informatie netjes op een rijtje te zetten.
    • Maak een korte samenvatting van wat je hebt geleerd.
    • Voeg plaatjes of grafieken toe om je verhaal duidelijker te maken.
  4. Presenteren:

    • Maak een digitale presentatie (bijvoorbeeld met PowerPoint of Google Slides) waarin je je onderwerp uitlegt.
    • Zorg dat je presentatie minimaal 5 dia's heeft:
      • Een titelpagina met je onderwerp en naam.
      • Dia's met de belangrijkste punten.
      • Een slotdia met wat je hebt geleerd.
    • Gebruik plaatjes, video's, of grafieken om je verhaal leuker te maken.
  5. Certificaat Simulatie:

    • Maak een nep-certificaat met een programma zoals Canva waarin je laat zien dat je de digitale vaardigheden beheerst. Zet je naam erop, de naam van de cursus (bijvoorbeeld "Digitale Vaardigheden Basis") en een korte beschrijving van je project.

Inleveren:

Beoordeling: 

Je wordt beoordeeld op:

Veel succes en wees creatief! Dit project helpt je om belangrijke digitale vaardigheden te leren en te laten zien.

01 Stichting Praktijkleren -  LinkedIn Learning

Stichting Praktijk Leren verzorgt online lesmateriaal, examens en biedt toegang tot instructie video’s van LinkedIn Learning. Daar gaan wij deze blok gebruik van maken.

Ga naar https://www.stichtingpraktijkleren.nl

  1. Jouw account is al aangemaakt tijdens de introductie module, volg de instructies, maak gebruik van je xxxxxx@talnet.nl gebruikersnaam

Inleveren (2 bestanden):

Maak 2 screenshots (URL én jouw account gegevens dienen goed leesbaar te zijn)
* van je accountgegevens pagina
* van je persoonlijke gegevens pagina

Werken met Office 365

Microsoft Office 365 is een verzameling van internet-diensten, bedoeld voor bedrijven, thuisgebruik en het onderwijs. Deze internetdiensten worden deels aangeboden als online diensten, deels als applicaties op desktop-pc, tablet en telefoon en als combinatie van beide. De applicaties op desktop / pc is vergelijkbaar met het kantoorpakket Microsoft Office met het verschil dat men via Office 365 altijd de beschikking heeft over de meest recente versie.

Leerdoelen

image-1720008340807.png

Doe de trainingen voor Word, Excel PowerPoint en Outlook bij : Werken met office 365

Let op! 
Open voor deze module altijd de programma's op je computer (desktop versie) en niet in de browser!
De mogelijkheden die je in de browser opent zijn namelijk beperkt als je het programma.

01 Opdracht

  1. Open Microsoft Word en kies voor een nieuw, leeg document.
  2. Stel het papierformaat in op A5 (dit is de helft van A4)
  3. Stel de marges in op:
    boven: 1 cm, onder: 2 cm, links: 4 cm, rechts: 3 cm
  4. Typ (of kopieer) het volgende in je document:
    =RAND(10)
  5. Zorg dat je cursor achter de =RAND(10) staat en klik op enter op je toetsenbord.
    (er wordt automatisch tekst in je document geschreven.)
  6. Geef je document de 1. pagina afdrukstand liggend en de 2. pagina staand
  7. Plaats in de voettekst je links uitgelijnd de datum en rechts naam klas en studentennummer
  8. Sla het document op als O2-jouwnaam.dotx ( jouwnaam = je eigen naam ).

Inleveren

Voorbeeld

image-1720011892443.png

02. Werken met Excel

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.

image-1717591361877.png

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:

image-1718105546995.png

03 - 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:

image-1718105883522.png

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:

image-1718106256699.png

{{@page_id}}

{{@page_id}}

{{@page_id}}

Digitale vaardigheden

Digitale Vaardigheden Gevorderd

Info:
PS C:\Prog\CanvasImport-Export> python .\reformatterCanvas.py 12231

Inleiding

Digitale Vaardigheden voor de Toekomst

In onze samenleving gebruiken we steeds meer digitale informatie en technologie. Denk aan computers, tablets en smartphones. We hebben mensen nodig die begrijpen hoe al deze systemen werken en hoe ze samenhangen.

De cursussen 'Digitale Vaardigheden Basis' en 'Digitale Vaardigheden Gevorderd' leren je de belangrijkste dingen over digitale technologie. Het maakt niet uit welk softwareprogramma je gebruikt of hoe je werkt, deze cursussen zijn nuttig voor iedereen.

Deze cursussen zijn belangrijk voor beroepen waar veel met digitale informatie wordt gewerkt, zoals het maken van rapporten, het analyseren van data of het beheren van content op websites.

Als je deze cursussen afrondt, krijg je een certificaat. Dit laat werkgevers zien dat jij de digitale vaardigheden hebt die zij nodig hebben, waardoor je een grotere kans hebt op een goede baan.

Veel succes.


Het keuzedeel Digitale Vaardigheden Gevorderd wordt aangeboden in combinatie met veel nieuwe kwalificatiedossiers. De totale studielast bedraagt 240 uur. Hieronder vind je een link naar de volledige en officiële tekst van het keuzedeel. Het lesmateriaal is ingedeeld naar kerntaken en werkprocessen.

Open bestand Het volledige dossier kun je hier lezen

Maak een Digitaal Project

Doel: Leer en laat zien dat je goed bent met computers door een digitaal project te maken. In dit project verzamel je informatie, werk je die uit en presenteer je alles met behulp van verschillende digitale tools.

Beschrijving: Je gaat een digitaal project maken over een onderwerp dat je interessant vindt en dat te maken heeft met een vak waar digitale vaardigheden belangrijk zijn.

Stappen:

  1. Kies een Onderwerp:

    • Denk aan iets wat je interesseert, zoals een hobby, een schoolvak, of een actueel onderwerp. Bijvoorbeeld: "Klimaatverandering", "Social Media Trends", of "De Geschiedenis van Videogames".
  2. Informatie Verzamelen:

    • Zoek online naar informatie, zoals websites, artikelen, video's en meer. Zoek minstens 5 verschillende bronnen.
    • Schrijf de belangrijkste dingen op die je hebt gevonden.

  3. Informatie Verwerken:

    • Gebruik een tekstverwerkingsprogramma (zoals Word of Google Docs) om je informatie netjes op een rijtje te zetten.
    • Maak een korte samenvatting van wat je hebt geleerd.
    • Voeg plaatjes of grafieken toe om je verhaal duidelijker te maken.
  4. Presenteren:

    • Maak een digitale presentatie (bijvoorbeeld met PowerPoint of Google Slides) waarin je je onderwerp uitlegt.
    • Zorg dat je presentatie minimaal 5 dia's heeft:
      • Een titelpagina met je onderwerp en naam.
      • Dia's met de belangrijkste punten.
      • Een slotdia met wat je hebt geleerd.
    • Gebruik plaatjes, video's, of grafieken om je verhaal leuker te maken.
  5. Certificaat Simulatie:

    • Maak een nep-certificaat met een programma zoals Canva waarin je laat zien dat je de digitale vaardigheden beheerst. Zet je naam erop, de naam van de cursus (bijvoorbeeld "Digitale Vaardigheden Basis") en een korte beschrijving van je project.

Inleveren:

Beoordeling: 

Je wordt beoordeeld op:

Veel succes en wees creatief! Dit project helpt je om belangrijke digitale vaardigheden te leren en te laten zien.

01 Stichting Praktijkleren -  LinkedIn Learning

Stichting Praktijk Leren verzorgt online lesmateriaal, examens en biedt toegang tot instructie video’s van LinkedIn Learning. Daar gaan wij deze blok gebruik van maken.

Ga naar https://www.stichtingpraktijkleren.nl

  1. Jouw account is al aangemaakt tijdens de introductie module, volg de instructies, maak gebruik van je xxxxxx@talnet.nl gebruikersnaam

Inleveren (2 bestanden):

Maak 2 screenshots (URL én jouw account gegevens dienen goed leesbaar te zijn)
* van je accountgegevens pagina
* van je persoonlijke gegevens pagina

Werken met Office 365

Microsoft Office 365 is een verzameling van internet-diensten, bedoeld voor bedrijven, thuisgebruik en het onderwijs. Deze internetdiensten worden deels aangeboden als online diensten, deels als applicaties op desktop-pc, tablet en telefoon en als combinatie van beide. De applicaties op desktop / pc is vergelijkbaar met het kantoorpakket Microsoft Office met het verschil dat men via Office 365 altijd de beschikking heeft over de meest recente versie.

Leerdoelen

image-1720008340807.png

Doe de trainingen voor Word, Excel PowerPoint en Outlook bij : Werken met office 365

Let op! 
Open voor deze module altijd de programma's op je computer (desktop versie) en niet in de browser!
De mogelijkheden die je in de browser opent zijn namelijk beperkt als je het programma.

01 Opdracht

  1. Open Microsoft Word en kies voor een nieuw, leeg document.
  2. Stel het papierformaat in op A5 (dit is de helft van A4)
  3. Stel de marges in op:
    boven: 1 cm, onder: 2 cm, links: 4 cm, rechts: 3 cm
  4. Typ (of kopieer) het volgende in je document:
    =RAND(10)
  5. Zorg dat je cursor achter de =RAND(10) staat en klik op enter op je toetsenbord.
    (er wordt automatisch tekst in je document geschreven.)
  6. Geef je document de 1. pagina afdrukstand liggend en de 2. pagina staand
  7. Plaats in de voettekst je links uitgelijnd de datum en rechts naam klas en studentennummer
  8. Sla het document op als O2-jouwnaam.dotx ( jouwnaam = je eigen naam ).

Inleveren

Voorbeeld

image-1720011892443.png

02. Werken met Excel

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.

image-1717591361877.png

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:

image-1718105546995.png

03 - 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:

image-1718105883522.png

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:

image-1718106256699.png

Level Up Check

Level Up Check

Kennis-checks

Kennis Check Blok 1.1

Opdracht

Maak de kennis-check over blok 1.

Onderwerpen

HTML en introductie programmeren

Inleveren

Schermafdruk van jouw score.

Kennis Check Blok 1.2

Opdracht

Maak de kennis-check over blok 1

Onderwerpen

HTML en introductie programmeren

Inleveren

Schermafdruk van jouw score.

Kennis Check Blok 2.1

Opdracht

Maak de kennis-check over blok 1

Onderwerpen

HTML en CSS

Inleveren

Schermafdruk van jouw score.

Kennis Check Blok 2.2

Opdracht

Maak de kennis-check over blok 1

Onderwerpen

HTML en CSS

Inleveren

Schermafdruk van jouw score.

Kennis Check Blok 3.1

Opdracht

Maak de kennis-check over blok 1

Onderwerpen

HTML en CSS

Webserver (XAMPP)

PHP: Variabelen, Strings, Getallen, Condities, Include, Logische operators.

Inleveren

Schermafdruk van jouw score.

Kennis Check Blok 3.2

Opdracht

Maak de kennis-check over blok 1

Onderwerpen

HTML en CSS

Webserver (XAMPP)

PHP: Variabelen, Strings, Getallen, Condities, Include, Logische operators.

Inleveren

Schermafdruk van jouw score.

Level Up Check

Beoordeling B3v1

Opgave 1, Arrays

deel 1

2 punt voor getallen in array

2 punten voor juiste code (geen foutmeldingen en opmaak incluisef {} )

2 punten voor deze output

De array heeft de volgende waarden:
12, 45, 78, 23, 56
deel 2

4 punten toevoegen 89 aan array via code

2 punt voor deze output:

Het array heeft de volgende waarden:
12, 45, 78, 23, 56, 89
deel 3

optellen waarden array 4 punten

2 punt voor deze output:

De som van de getallen in de lijst is: 303

Checklist:

Deel 1
  1. array goed gedeclareerd (2):
  2. code juist (werkt) (1):
  3. code opmaak juist (inpringen {{ ...) (1):
  4. Output 1 (2):
Deel 2
  1. 89 via code aan array (4):
  2. Output 2 (2):
Deel 3
  1. Optellen (4):
  2. juiste som 303 (2):
  3. Ouput 3 (2):

2,1,1,2
4,2
4,2,2

Opgave 2, loops (20 punten)

Per juiste loop maximaal 10 punten.

  1. $kleuren = ["rood", "blauw", "groen", "geel"]; 2 punten (let op naam van array!)
  2. foreach loop: (3 punten)
  3. foreach loop: 5 afdrukken (2 voor titel, 3 voor kleuren)
  4. for loop: (3 punten)
  5. for loop: 5 afdrukken (2 voor titel, 3 voor kleuren)
  6. (alleen indiend 2 loops) code stijl (inspringen), variabele namen en geen fouten: 4 punten

Opgave 3, ERD (20 punten)

image.png

Voor elk van de volgende fouten één punt aftek (van de 20).

Voor elk van de volgende fouten drie punten aftrek (van de 20).

Opgave 4, Boxes

4 punten voor:

1 punt voor

Opgave 5, Code Aanpassen

Geen tabel in welke vorm dan ook is maximaal 8 punten.

fout aanpassen $dagnummer -> $dagNummer (3 punten).

Juiste $gemiddelde wordt afgedrukt (5 punten).

resultaten in tabel (2 punten)

<table> structuur is helemaal juist (2 punten).

Geen onnodige code en stijl juist (inspringen/variabele namen) 2 punten
(verkeerde code/code niet afgemaakt -2) Bij beperkte code (1)

tabel ziet er uit zoals opgave 6:

image.png

--

Alleen werkende code (type hersteld): 3

Plus gemiddelde wordt aangeroepen en afgedrukt in loop: 8

Iets van een table: 10

Juiste tabel strutuur +2

Juiste code structuur (code niet teveel aangepast en inspringen e.d. goed) +2

Juiste weergave +6

--

Alleen opdracht 1: 3

Wel gemiddelde geen tabel:  8

Opdracht 1 versie 2

Deel 1: array 4 output 2
Deel 2: [] 4 (of array_push) en output 2
Deel 3: for 6 output 2

Opdracht 2 versie 2

Deel 1: for loop goed 2, getallen goed 2, output goed 2
Deel 2: for loop goed 2, getallen goed 2, output goed 2
Deel 3:  for loop goed 2, kleuren reverse 4, output goed 2

Opgave 4, Boxes

Vier boxen kleur en vorm goed: 6
Tekst goed (italic, bold, verdana) :4
Body kleur: 2
Responsive: flex wrap of mediaquery: 2
Tekst gerotteerd: 4
Geen onnodige ongevraagde CSS/stijl goed: 2

Opgave 5

6: Table ziet er goed uit qua vorm; Blauwe header en wit grijze regels. Juiste titles.
3: Array via loop verwerken
3: skills goed verwerkt.
6: Table goed toegepast.
2: juiste code (overig)

Handige JS / JQuery Functions

Prevent dragging on page

let initialX, initialY;
let dragging = false;

document.addEventListener('mousedown', function (event) {
    // Store the initial mouse position when the mouse button is pressed
    initialX = event.clientX;
    initialY = event.clientY;
    dragging = true; // Set dragging to true on mousedown
});

document.addEventListener('mouseup', function () {
    dragging = false; // Reset dragging on mouseup
});

document.addEventListener('mousemove', function (event) {
    if (dragging) {
        // Calculate the distance moved
        let deltaX = Math.abs(event.clientX - initialX);
        let deltaY = Math.abs(event.clientY - initialY);
        let distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY); // Pythagoras theorem to calculate the distance

        // If the distance dragged is more than 100 pixels, blank the screen
        if (distance > 400) {
            document.body.style.visibility = 'hidden'; // Blank the page
            setTimeout(function () {
                document.body.style.visibility = 'visible'; // Restore
            }, 200); 

            // Reset dragging to prevent repeated triggering
            dragging = false;
        }
    }
});

Prompt Engineering

Indeling

Inleiding tot Prompt Engineering

Stel je voor dat je een geavanceerde cheat code hebt voor de meest intelligente game buddy ooit - maar dan in de wereld van kunstmatige intelligentie. Dat is eigenlijk precies wat prompt engineering is!

Prompt engineering is als het "hacken" van AI, maar dan op een slimme, creatieve manier. Net zoals je in een game moet weten hoe je een personage de beste uitrusting geeft of een speciale move leert, zo leer je bij prompt engineering hoe je AI exact krijgt wat je wilt.

Waarom is dit cool? Omdat AI steeds meer onderdeel wordt van de technologische wereld waarin jullie opgroeien. Stel je voor: in plaats van uren te zoeken op internet of handmatig iets uit te werken, kun je met de juiste prompt in seconden een geweldige oplossing krijgen.

Stel je wilt een game maken in Python. Een slechte prompt zou zijn: "Help me met programmeren". Maar een slimme prompt is: "Ik ben een beginnersprogrammeur en wil een simpele game maken in Python. Kan je me stap voor stap uitleggen hoe ik een basic platformgame kan bouwen, met commentaar dat geschikt is voor iemand die net begint met coderen?"

Prompt engineering gaat dus over:

Het is eigenlijk net een speciale taal leren waarmee je AI kunt "manipuleren" - maar dan op een slimme, ethische manier. Net zoals programmeurs een programmeertaal leren, leer jij de taal om AI exact te krijgen wat je wilt.

Ben je klaar om de geheime codes te ontrafelen van hoe je AI echt slim kunt laten werken?

Opdracht

Hier zijn drie propmts:

  1. Schrijf iets over klimaat en over de verandering.
  2. Leg klimaatverandering uit.
  3. Beschrijf de oorzaken van klimaatverandering.

Stel je wilt een spreekbeurt houden over klimaatverandering. Wat zou dan de beste prompt zijn?

Test de drie prompts en beoordeel wat jij de beste prompt vind.

Leg uit in een PDF wat de beste prompt is en waarom je dat vind. Denk daarbij aan de 4 punten die in de tekst in het rood zijn gemarkeerd.

Inleveren

PDF met de beste van de drie prompts en leg uit aan de hand van de 4 rood gemarkeerde punten waarom dit de beste prompt is.

Waarom Communicatie met AI Anders Is

Stel je voor dat AI een heel intelligente, maar net iets andersdenkende vriend is. Net zoals je bij een nieuwe vriend leert hoe je het beste communiceert, moet je bij AI ook een speciale "taal" ontwikkelen.

De Mentale Kaart van AI

AI werkt niet zoals een mens. Ze heeft geen echte emoties of persoonlijke ervaringen, maar wel een enorme database aan informatie en patronen. Communiceren met AI is als het navigeren door een gigantische informatiebibliotheek, waar jij de gids bent die precies aangeeft welk boek of welke plank interessant is.

Sleutelprincipes van AI-Communicatie:

  1. Perspectief Geven
    • AI heeft geen eigen referentiekader
    • Jij moet context en richting verschaffen
    • Hoe meer details, hoe nauwkeuriger het antwoord
  2. Taalkundige Precisie
    • Elke nuance in je prompt kan het resultaat veranderen
    • Woorden hebben letterlijke, niet emotionele betekenis
    • Wees expliciet en concreet
  3. Cognitieve Instructies
    • Gebruik werkwoorden die een denkproces beschrijven
    • Voorbeelden: "analyseer", "vergelijk", "onderscheid"
    • Geef stapsgewijze instructies

Praktisch Voorbeeld

Slechte prompt: "Vertel me over klimaatverandering" Goede prompt: "Analyseer klimaatverandering vanuit het perspectief van een wetenschapper. Beschrijf drie belangrijkste oorzaken, twee mogelijke gevolgen en geef een objectieve inschatting van de mondiale impact in de komende 50 jaar."

Mentale Modellen

Je kunt AI "instrueren" door haar tijdelijk in een specifiek denkmodel te plaatsen:

Psychologische Tactieken

Eindopdracht: De AI-Communicatie-Uitdaging

Opdracht

  1. Kies een complex onderwerp (bijv. Klimaatverandering, Kunstmatige Intelligentie, Ruimtevaart)
  2. Maak drie prompts met toenemende complexiteit:
    • Prompt 1: Basis informatieverzameling
    • Prompt 2: Analytische benadering
    • Prompt 3: Meerperspectief onderzoek
  3. Lever in:
    • Alle drie de prompts
    • De gegenereerde AI-antwoorden
    • Een reflectie van minimaal 300 woorden waarin je beschrijft:
      • Welke verschillen je zag tussen de prompts
      • Hoe context de antwoorden beïnvloedde
      • Wat je hebt geleerd over communicatie met AI

Beoordelingscriteria:

Bonusvraag: Leg in maximaal 100 woorden uit waarom context zo belangrijk is bij communicatie met AI.

Leerdoelen:

Wil je dat ik de opdracht verder toelicht of specifieke voorbeelden geef van hoe studenten dit kunnen aanpakken?

---

 

Software Development en AI

Samenvatting

In de tijd van AI blijven bepaalde vaardigheden onmisbaar voor programmeurs:

Deze vaardigheden zorgen ervoor dat programmeurs ondanks AI ondersteuning innovatief en efficiënt werken aan robuuste softwareoplossingen van hoge kwaliteit.

Vraag

Wat moet een programmeur in de tijd van AI nog (goed) kunnen?

Antwoord

In de tijd van AI is het programmeerveld sterk aan het veranderen. AI kan veel routinetaken overnemen of ondersteunen, maar er blijft genoeg over dat een programmeur goed moet kunnen. Hier zijn enkele belangrijke vaardigheden en aandachtspunten:

  1. Probleemoplossend denken

    • AI-modellen kunnen suggesties geven en bepaalde onderdelen automatiseren, maar ze begrijpen de context niet altijd perfect. Een programmeur moet het probleem kunnen analyseren, de vereisten bepalen en oplossingen ontwerpen.

    • Het vermogen om kritisch te denken, complexe vraagstukken op te breken in kleinere stappen en creatief te zijn in het vinden van oplossingen is cruciaal.

  2. Architectuur en ontwerp

    • Een AI-tool kan code genereren, maar jij moet de structuur en architectuur van het systeem bepalen. Hoe werken verschillende componenten samen? Welke (cloud)services, databases en API’s zijn nodig? Dit vereist kennis van design patterns, software-architectuur en best practices.

    • Schaalbaarheid, beveiliging en onderhoudbaarheid zijn onderwerpen waar AI niet zomaar de beste keuzes voor maakt. Dat vereist inzicht en ervaring van een programmeur.

  3. Kennis van algoritmes en datastructuren

    • Ook al kan AI codevoorbeelden genereren, als programmeur is het essentieel om te begrijpen hoe algoritmes en datastructuren werken.

    • Dit is belangrijk voor het optimaliseren van prestaties, oplossen van knelpunten en het nemen van bewuste ontwerpbeslissingen.

  4. Code lezen en debuggen

    • Code genereren is één ding, maar fouten opsporen, de logica doorgronden en zorgen dat de code robuust is, blijft een menselijke taak. AI kan helpen met hints, maar het uiteindelijke debuggen, verifiëren en corrigeren van de code blijft een programmeurstaak.

    • Het kunnen interpreteren van foutmeldingen, logs en stack traces is en blijft essentieel.

  5. Samenwerken en communiceren

    • Softwareontwikkeling is vaak een teaminspanning. Kunnen samenwerken met andere ontwikkelaars, projectmanagers, designers, enzovoort, is van grote waarde.

    • Het vertalen van complexe technische vraagstukken naar begrijpelijke taal voor niet-technische stakeholders is een vaardigheid die AI niet zomaar vervangt.

  6. Domainedeskundigheid

    • Kennis van de context waarin de software gebruikt wordt (bijvoorbeeld de financiële sector, gezondheidszorg, gaming, etc.) is heel waardevol.

    • AI kan generiek code genereren, maar het begrijpen van specifieke domeinvereisten, regelgeving en de gebruikersbehoeften vereist menselijk inzicht.

  7. Verantwoordelijkheid en ethiek

    • Met AI en machine learning ontstaan er nieuwe vraagstukken rondom privacy, bias en veiligheid. Als programmeur moet je bewust omgaan met data, algoritmes en de mogelijke impact daarvan op gebruikers en de samenleving.

    • Begrip van ethische aspecten en wetgeving (zoals AVG/GDPR) wordt steeds belangrijker.

  8. Blijven leren en aanpassen

    • De technologie ontwikkelt zich razendsnel. Een goede programmeur leert continu bij: nieuwe frameworks, tools en best practices, maar ook nieuwe AI- en data-analysetechnieken.

    • Het vermogen om je snel aan te passen en nieuwe dingen te leren is belangrijker dan ooit.

  9. Creativiteit en innovatie

    • Waar AI patronen uit het verleden kan herkennen, ben jij degene die écht vernieuwende ideeën kan bedenken en kan experimenteren met nieuwe technologieën en aanpakken.

    • Het vermogen om ‘out of the box’ te denken en AI-tools slim in te zetten geeft je een voorsprong.


Kortom: AI kan veel helpen en zal steeds beter worden, maar de menselijke programmeur blijft nodig om complexe problemen op te lossen, robuuste architecturen op te zetten, de juiste ontwerpkeuzes te maken en de software af te stemmen op echte gebruikers en echte bedrijfsdoelen. De kernvaardigheden van een programmeur – zoals kritisch denken, samenwerken, domeinkennis en creativiteit – worden alleen maar belangrijker in een wereld waarin AI volop aanwezig is.

Hoewel een developer nog steeds een begrip van programmeren en software-architectuur nodig heeft, wordt het onthouden van minutieuze details en het handmatig uitvoeren van routine- of low-level taken minder relevant dankzij de ondersteuning van AI en geavanceerde tooling. Dit stelt developers in staat om zich te richten op de creatie van innovatieve, schaalbare en goed ontworpen oplossingen.

Bronnen

How AI Is Transforming Software Development

https://www.forbes.com/sites/delltechnologies/2024/09/18/how-ai-is-transforming-software-development/

Generative AI and Software Engineering Education -  Carnegie Mellon University

https://www.youtube.com/watch?v=tXzPSyG6V-4&t=1491s

Computer prgrammning will be replaced by robots

https://www.infoq.com/presentations/programming-future-robots/

AI and the Future of Coding

https://medium.com/jonathans-musings/ai-and-the-future-of-coding-43caad31c3d3

Fun fact ('vibe' coding)

https://fly.pieter.com

https://www.news18.com/business/man-uses-ai-builds-1-million-business-in-just-17-days-9266748.html