# 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. # Kennisopdracht blok 7 **Eind jaar 1** ## Opdracht 1 - formulier **Opdracht: Maak een Dropdown Menu met Landen voor het EK 2024** In deze opdracht ga je een dropdown menu maken waarin alle landen die deelnemen aan het EK 2024 worden weergegeven. Volg de onderstaande stappen om deze opdracht te voltooien. Gebruik deze code als uitgangspunt. ```PHP EK 2024 Landen Dropdown ``` Gebruik het array om een dropdown te maken en plaats je eigen naam in de code. Het resultaat ziet er zo uit: ![image-1717778319210.png](https://www.roc.ovh/uploads/images/gallery/2024-06/scaled-1680-/image-1717778319210.png) ### Inleveren 1. php code met naam formulier01.php ## Opdracht 2 - Form CSS **Opdracht: Maak een Formulier voor het Invoeren van de Uitslag van een Gespeelde Wedstrijd** In deze opdracht ga je een formulier maken waarin de uitslag van een gespeelde wedstrijd kan worden ingevoerd. Dit formulier zal bestaan uit twee dropdown menu's voor de teams, twee tekstvelden voor het invoeren van de scores, en een submit-knop. Bereid heet formulier uit zodat het er als volgt uitziet; ![image-1717779031192.png](https://www.roc.ovh/uploads/images/gallery/2024-06/scaled-1680-/image-1717779031192.png) We gaan nu de styling aanpassen. Gebruik CSS zodat het formulier er min of meer als volgt uitziet: ![image-1717781459521.png](https://www.roc.ovh/uploads/images/gallery/2024-06/scaled-1680-/image-1717781459521.png) De knop '*Uitslag Invoeren*' doet voorlopig nog niets. ##### Eisen Probeer aan zoveel mogelijk eisen te voldoen voor een hogere score. - Jouw formulier lijkt op het bovenstaande plaatje. - Minimale score is 0 (je kunt dus geen -1 of lager invullen). - Maak gebruik van div tags. - Maak gebruik van flex-box. - Gebruik een externe CSS bestand. - De HTML-code is correct; alle tags zijn afgesloten en de structuur klopt. ### Inleveren 1. php code met de naam formulier02.php 2. css code met de naam styles.css 3. schermafdruk van je formulier ## Opdracht 3 - database We gaan een database maken. De database moet aan de volgende eisen voldoen. 1. Maak een nieuwe database en noem die *euro24*. 2. Maak een tabel uitslagen, met de kolommen: *id, team1, teams2, score1, score2* 3. Maak van id een auto-increment (en daarmee een primary key). 4. Plaats ten minste drie test regels in de database. ![image-1717795495394.png](https://www.roc.ovh/uploads/images/gallery/2024-06/scaled-1680-/image-1717795495394.png) ##### Eisen Probeer aan zoveel mogelijk eisen e voldoen voor een hogere score. - De aangemaakte databasenaam en tabel naam is correct. - De veldnamen zijn correct en hebben het juiste data-type. - De kolom id is PK en auto-increment. ### Inleveren 1. Een schermafdruk van phpmyadmin waarin je laat zien dat de database is gemaakt en dat je drie record in de database hebt gemaakt. 2. Een export bestand (.sql). ## Opdracht 4 - read Maak een html-pagina waarmee je alle gegevens uit de database afdrukt. De gegevens moeten netjes in een (html) table komen te staan. ![image-1717795742990.png](https://www.roc.ovh/uploads/images/gallery/2024-06/scaled-1680-/image-1717795742990.png) ##### Eisen Probeer aan zoveel mogelijk eisen e voldoen voor een hogere score. 1. Maak gebruik van PDO 2. Druk de gegevens af in een HTML table. 3. gebruik <table border=1> om te laten zien dat de tabel correct is. ### Inleveren 1. Een schermafdruk van de pagina waarmee je de gegevens uit de database haalt. 2. De php/html code met de naam opdracht04.php 3. De HTML-code is correct; alle tags zijn afgesloten en de structuur klopt. ## Opdracht 5 - read CSS [![image-1717795960302.png](https://www.roc.ovh/uploads/images/gallery/2024-06/scaled-1680-/image-1717795960302.png)](https://www.roc.ovh/uploads/images/gallery/2024-06/image-1717795960302.png) Gebruik CSS om de vormgeving zoveel mogelijk te laten lijken op het bovenstaande voorbeeld. ##### Eisen Probeer aan zoveel mogelijk eisen e voldoen voor een hogere score. 1. Gebruik een externe CSS bestand. 2. Margin top en margin left van de pagina is 60 pixels. 3. Het gebruikte font is *sans-serif* en de font-grootte is 1.2em 4. De tabel is 600 pixels breed 5. De ruimte tussen de tekst en de lijntjes in de tabel (padding) is 12 pixels. 6. De kleur van de tabel lijntjes is #dddddd (lichtgrijs). 7. De kleur van de tabel header is lightblue. 8. De HTML-code is correct; alle tags zijn afgesloten en de structuur klopt. ### Inleveren 1. Schermafdruk van jouw webpagina. 2. Code en CSS (als apart CSS-bestand) die je hebt gebruikt om de pagina te maken. ## Opdracht 6 - insert Gebruik het formulier dat je eerder hebt gemaakt in opdracht 2 en zorg ervoor dat je de uitslag invoert in de database. ##### Eisen Probeer aan zoveel mogelijk eisen te voldoen voor een hogere score. 1. Op de overzichtspagina die je bij opdracht 5 hebt gemaakt plaats je een extra knop: 'uitslag invoeren'. ![image-1717797977941.png](https://www.roc.ovh/uploads/images/gallery/2024-06/scaled-1680-/image-1717797977941.png) 2. Als je op deze knop druk dan wordt het formulier dat je bij opdracht 2 hebt gemaakt geopend. 3. ![image-1717781459521.png](https://www.roc.ovh/uploads/images/gallery/2024-06/scaled-1680-/image-1717781459521.png) 4. Zodra je op dit formulier, de gegevens invult en de knop 'Uitslag Invoeren' indrukt worden de gegevens in de database opgeslagen. 5. Nadat de gegevens zijn opgeslagen wordt de pagina die je bij opdracht 5 hebt gemaakt getoond. De toegevoegde uitslag is te zien. [![image-1717798122255.png](https://www.roc.ovh/uploads/images/gallery/2024-06/scaled-1680-/image-1717798122255.png)](https://www.roc.ovh/uploads/images/gallery/2024-06/image-1717798122255.png) 6. De HTML-code is correct; alle tags zijn afgesloten en de structuur klopt. ### Inleveren 1. De code van het formulier 2. De code van de overzichtspagina 3. Alle CSS-bestanden ## Opdracht 7 - controle Je mag geen uitslag invoeren waarbij de twee landen hetzelfde zijn. Maak een controle op de invoer van twee dezelfde landen. Je kunt deze controle met JavaScript maken (front end) of met PHP (back-end). In deze opdracht kiezen we voor de controle in d back-end, dus via PHP. Zorg dat je een controle maakt, zodat er geen record in de database kan worden ingevoerd waarin Team 1 en Team 2 hetzelfde land zijn. ##### Eisen Probeer aan zoveel mogelijk eisen te voldoen voor een hogere score. 1. De PHP-code is correct en de controle wordt juiste uitgevoerd. 2. De PHP-code is netjes en correct uitgelijnd. 3. Er staat commentaar in de code om aan te geven waar de controle in de code plaatsvindt. ### Inleveren Complete (PHP) code waarmee je de gegevens in de database wegschrijft én waarbij je de controle uitvoert. ## Opdracht 8 - delete Zet in de tabel achter elke regel een link. Deze link roept een delete functie aan. [![image-1717798562101.png](https://www.roc.ovh/uploads/images/gallery/2024-06/scaled-1680-/image-1717798562101.png)](https://www.roc.ovh/uploads/images/gallery/2024-06/image-1717798562101.png) De regel wordt dus verwijderd uit de database als op de delete link wordt gedrukt. ##### Eisen Probeer aan zoveel mogelijk eisen te voldoen voor een hogere score. 1. De link staat op de juiste manier in de tabel. 2. De table structuur klopt. 3. Wanneer je op delete, drukt, wordt het juiste id als parameter meegegeven. 4. Als op de link gedrukt wordt, wordt via een JavaScript eerst aan de gebruiker gevraagd of hij deze regel wil verwijderen: "Weet je zeker dat je deze regel wil verwijderen?". 5. Het verwijderen werkt. 6. Nadat de regel is verwijderd wordt de pagina (automatisch) opnieuw geladen en is de regel verwijderd. ### Inleveren 1. Alle code. 2. Een beschrijving van hoe de delete werkt; in welk bestand staat welke code op welke regel. \-- ## ! Docenten ```SQL CREATE DATABASE euro24; -- Use the newly created database USE euro24; -- Create the uitslagen table CREATE TABLE uitslagen ( id INT AUTO_INCREMENT PRIMARY KEY, team1 VARCHAR(255) NOT NULL, team2 VARCHAR(255) NOT NULL, score1 INT NOT NULL, score2 INT NOT NULL ); -- Verify the creation of the table DESCRIBE uitslagen; INSERT INTO uitslagen (team1, team2, score1, score2) VALUES ('Nederland', 'Duitsland', 2, 1), ('Frankrijk', 'Spanje', 3, 2), ('Italië', 'Engeland', 1, 1); ``` # Praktijk-check (blok 2) ## Opdracht 1 ```PHP Bestelling Overzicht
40) { $bestelkosten = 0; } else { $bestelkosten = 4; } $bedragNaKorting = $bedrag - $korting; $bedragBestelling = $bedragNaKorting + $bestelkosten; // Adjusted calculation echo "

"; echo "Je bent $leeftijd jaar en je krijgt $korting euro korting."; echo "
"; echo "Het bedrag na korting is $bedragNaKorting euro en de bestelkosten zijn $bestelkosten euro."; echo "
"; echo "Je moet het volgende bedrag afrekenen: $bedragBestelling euro"; echo "

"; ?>
``` Op regel 39 en 40 staan het bedrag en de leeftijd. ##### Dit moet de code doen: - Indien iemand 21 of jonger is, geef een korting van 4 euro. - Indien de kosten (na korting) meer dan 40 euro zijn dan zijn de bestelkosten 0. - Zijn de kosten 40 euro of minder dan zijn de bestelkosten 4 euro. ### Opdracht Zorg dat de code werkt en doet wat het moet doen. Plaats een titel boven de pagina en .....iets met CSS ### Inleveren De verbeterde en werkende code (.php bestand). # Praktijk Check Blok 3 (v1) ## Opdracht 1 - Array in PHP Maak een array in PHP met getallen. Noem deze array *$myArray*. - Zet deze **getallen** in de array: `12`, `45`, `78`, `23`, `56`. Druk het array af in de browser, de output ziet er als volgt uit. ``` De array heeft de volgende waarden: 12, 45, 78, 23, 56 ``` - Voeg iets toe aan de code. Voeg met code het getal `89` toe aan het einde van de array. Druk het array op nieuw af, de output ziet er als volgt uit: ``` Het array heeft de volgende waarden: 12, 45, 78, 23, 56, 89 ``` - Tel met code alle getallen in de array bij elkaar op en laat de uitkomst zien. ``` Het array heeft de volgende waarden: 12, 45, 78, 23, 56, 89 De som van de getallen in de lijst is: 303 ``` ### Inleveren Jouw complete PHP waarin **alle** opdrachten staan (.php bestand). ## Opdracht 2 - Loop in PHP Gebruik het volgende array: ``` $kleuren = ["rood", "blauw", "groen", "geel"]; ``` Maak PHP code waarbij het het array afdrukt. Doe dit twee maal: één maal met een **foreach** loop en één maal met een **for-loop**. Jouw code bevat dus twee loops. Output van de code is: ``` foreach loop: rood blauw groen geel for loop: rood blauw groen geel ``` #### Inleveren 1. De PHP code (.php bestand). ## Opdracht 3 - Entiteit Maak twee **entiteiten** met Lucidchart. **Entiteit 1:** **Student** Een student heeft de volgende eigenschappen: - Studentnummer (Primary Key - PK) - Voornaam - Achternaam - Geboortedatum - Emailadres - Volgt een opleiding (opleidingscode, bijvoorbeeld 'DK02A') **Entiteit 2:** **Opleiding** Een opleiding heeft de volgende eigenschappen: - Opleidingscode (Primary Key - PK) - Naam van de opleiding - Niveau - Startdatum van de opleiding ### Relatie Teken de **relatie** tussen de entiteiten **Student** en **Opleiding**. #### Denk hierbij goed na: - **Behoort één student tot meerdere opleidingen, of behoort één opleiding tot meerdere studenten?** - Plaats het **harkje** aan de juiste kant. - Vergeet niet de **Foreign Key (FK)** in de juiste entiteit op te nemen. ### Inleveren 1. Screenshot van het complete ERD gemaakt in Lucichart. ## Opdracht 4 - 6 Boxes Maak met HTML en CSS een website dit er zoveel mogelijk als volgt uitziet: ![image.png](https://www.roc.ovh/uploads/images/gallery/2024-11/scaled-1680-/image.png) #### Eisen 1. De achtergrond kleur van de body is: #f5F5F5 2. De groene achtergrondkleur is: #90EE90 3. De rode achtergrondkleur is: #F08080 4. De hoogte en breedte van de boxes is 80 pixels. 5. De 6 boxen staan in het midden van de pagina. 6. De HTML en CSS staan in één bestand. ### Inleveren 1. code inclusief CSS (.php file). 2. screenshot van het resultaat in je browser. ## Opdracht 5 - aanpassen ### Inleiding Jouw collega heeft code gemaakt, maar is plotseling weg, en de code is nog niet helemaal af. Jij moet de code afmaken. ### Wat doet de code? De code bestaat uit een array met daarin arrays van temperaturen. ``` $metingenWeek=[ [14,11,12], [6,11,11], ....... ``` Elke groepje van drie getallen is een dag. De eerste waarde is de temperatuur 's morgens, de tweede 's middags, en de laatste s'avonds. Deze getallen worden afgerukt en de gemiddelde waarde van de dag wort er onder gezet. ``` Temperatuur van dag 1

's ochtends: 14

's middags : 11

's avonds : 12

gemiddelde is: 12.3 ``` Dit is de code. ``` $metingenWeek=[ [14,11,12],

                [6,11,11],

                [7,12,14],

                [9,14,13],

                [10,15,13],

                [11,15,14],

                [13,16,14]

              ];



function gemiddelde($inputArray) {

  $arraySize = 0;

  $som = 0;

  foreach($inputArray as $item) {

    $arraySize = $arraySize + 1;

    $som = $som + $item;

  }

  return round($som / $arraySize, 1);

}



$dagNummer = 1;

foreach($metingenWeek as $dag) {

    echo "Temperatuur van dag ".$dagNummer."
";

    echo "'s ochtends: ".$dag[0]."
";

    echo "'s middags : ".$dag[1]."
";

    echo "'s avonds  : ".$dag[2]."
";

    echo "gemiddelde is: xxx

";

    $dagNummer = $dagnummer + 1;

} ``` De code is niet helamaal af. Aan jouw de taak om een paar kleine aanpassingen aan de code te maken. Het is niet de bedoeling om de gehele code opnieuw te maken. ### Opdracht 1. **Typo verbeteren (3 punten)** Er zit een kleine fout in de variabelenaam `$dagnummer`. Pas dit aan naar `$dagNummer`, zodat de code geen foutmelding meer geeft. 2. **Gemiddelde waarde berekenen en afdrukken (3 punten)** Vervang `xxx` met de daadwerkelijke gemiddelde waarde. Gebruik de functie `gemiddelde()` om dit te berekenen. 3. **Gebruik een HTML-tabel voor nettere weergave (4 punten)** Pas de weergave van de resultaten aan, zodat de waarden netjes onder elkaar worden afgedrukt in een HTML-tabel. Als opdracht 2 niet lukt, mag je de `xxx` laten staan en alsnog deze opdracht uitvoeren. Het resultaat moet er ongeveer zo uitzien: ![image.png](https://www.roc.ovh/uploads/images/gallery/2024-11/scaled-1680-/DFtimage.png) ### Inleveren 1. php code 2. Screenshot van browser waarin het resultaat te zien is. # 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](https://www.roc.ovh/uploads/images/gallery/2024-12/scaled-1680-/5LFimage.png)](https://www.roc.ovh/uploads/images/gallery/2024-12/5LFimage.png) Voor elk van de volgende fouten **één** punt aftek (van de 20). - Entiteitnaam student - Entiteitnaam opleiding - attribuut vergeten (6 bij student, 4 bij opleiding) attribuutnaam mag iets afwijken. - datatype (bij varchar mag de lengte enigszins afwijken). opleidingscode (PK) en opleiding tellen als één. - PK student - PK opleiding - datatype FK en PK (opleidingscodes) moeten hetzelfde zijn. - datatype geschreven met hoofdletter(s) - lengte varchar niet realistisch Voor elk van de volgende fouten **drie** punten aftrek (van de 20). - Harkje staat aan student kant (3 punten) - FK staat aan student kant (3 punten) - Opleidingscode is FK (3 punten) ### Opgave 4, Boxes 4 punten voor: - 6 dezelfde boxes - kleuren goed - letters A..F staan in het midden van een box (h en v) - boxes middenin pagina, in juiste vorm (vierkant 2x3) 1 punt voor - styles staan geen onnodige dingen in - code is netjes ingesprongen - logische class namen - alles goed ingeleverd (twee bestanden html/php plus screenshot) ### 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](https://www.roc.ovh/uploads/images/gallery/2024-12/scaled-1680-/OtVimage.png)](https://www.roc.ovh/uploads/images/gallery/2024-12/OtVimage.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) # Praktijk Check Blok 3 (v2) ## Opdracht 1 - Array in PHP ##### Opdracht 1 Maak een array in PHP met getallen. Noem deze array *$myArray*. - Zet deze **getallen** in de array: `13`, `4`, `78`, `23`, `6`. Druk dearray af in de browser. De output ziet er als volgt uit. ``` De array heeft de volgende waarden: 13 - 4 - 78 - 23 - 6 ``` ##### Opdracht 2 - Voeg iets toe aan de code. Voeg met code het getal `9` toe aan het einde van de array. Druk de array opnieuw af, de output ziet er als volgt uit: ``` De array heeft de volgende waarden: 13 - 4 - 78 - 23 - 6 - 9 ``` ##### Opdracht 3 - Gebruik een loop om te bepalen wat het hoogste getal van de array is. Voordat de loop begint, zet je de variabele $hoogste op 0. In de loop vergelijk je dan of het array element groter is dan $hoogste. Als dat zo is dan geef je $hoogste de waarde van het array element. ``` De array heeft de volgende waarden: 13 - 4 - 78 - 23 - 6 - 9 Het hoogste getal in de lijst is: 78 ``` ### Inleveren Jouw complete PHP waarin **alle** opdrachten staan (.php bestand). ## Opdracht 2 - Loops ##### Opdracht 1 Gebruik een for-loop om alle getallen van 1 tot en met 10 af te drukken. De output ziet er als volgt uit (zorg dat de output er precies zo uit ziet): ``` De getallen zijn: Getal 1 Getal 2 Getal 3 Getal 4 Getal 5 Getal 6 Getal 7 Getal 8 Getal 9 Getal 10 ``` ##### Opdracht 2 Gebruik een for-loop om alle getallen van 10 tot en met 1 af te drukken. De output ziet er als volgt uit (zorg dat de output er precies zo uitziet): ``` De getallen zijn: Getal 10 Getal 9 Getal 8 Getal 7 Getal 6 Getal 5 Getal 4 Getal 3 Getal 2 Getal 1 ``` ##### Opdracht 3 Maak PHP code waarbij die het volgende array afdrukt. ``` $kleuren = ["rood", "blauw", "groen", "geel"]; ``` Gebruik een loop (je mag zelf weten wat voor een loop) om deze array achterste voren af te drukken. Je mag de array niet aanpassen door de array bijvoorbeeld anders te sorteren. ``` De kleuren zijn: geel groen blauw rood ``` #### Inleveren 1. De PHP code (.php bestand) waarin alle drie de opdrachten staan. ## Opdracht 3 - Entiteit Maak twee **entiteiten** met Lucidchart. **Entiteit 1:** **Bestelling** Een bestelling heeft de volgende eigenschappen: - BestellingID (Primary Key - PK) - Datum bestelling - Datum verstuurd - Totale prijs - Aantal artikelen. - Gewicht **Entiteit 2:** **Klant** Een klantheeft de volgende eigenschappen: - Klantnummer (Primary Key - PK) - Volledige naam - Adres - postcode - woonplaats - telefoon - email ### Relatie Teken de **relatie** tussen de entiteiten **Bestelling** en **Klant**. #### Denk hierbij goed na: - **Behoort één bestelling bij meerdere klanten, of behoort één klant bij meerdere bestellingen?** - Plaats het **harkje** aan de juiste kant. - Vergeet niet de **Foreign Key (FK)** in de juiste entiteit op te nemen. ### Inleveren 1. Screenshot van het complete ERD gemaakt in Lucichart. ## Opdracht 4 - 6 Boxes Maak met HTML en CSS een website dit er zoveel mogelijk als volgt uitziet: ![afbeelding.png](https://www.roc.ovh/uploads/images/gallery/2024-12/scaled-1680-/qm8afbeelding.png) #### Eisen 1. 1. De achtergrondkleur van de body is: hsl(0, 0%, 94%) 2. De blauwe achtergrondkleur is: rgb(70, 130, 180) 3. De groene achtergrondkleur is: #32CD32 4. De hoogte en breedte van de blauwe boxes is 150 pixels. 5. De groene boxen zijn 200pixels breed en 120pixels hoog. 6. De tekst in de boxes, is *italic*, **bold.** 7. Het font-type is Verdana. 8. De tekst is gedraaid, dat doe je via CSS met *transform: rotate(10deg);* of *transform: rotate(-10deg);* De tekst in de blauwe boxen zijn -10 graden gedraaid en de tekst in de groene bxen zijn +10 graden gedraaid. 9. De pagina is responsive; als je de pagina smaller maakt dan worden de boxen onder elkaar gepaatst. Let op, voor elke eis krijg je apart punten. Lukt iets niet, ga dan gewoon door naar de voglende eis. ### Inleveren 1. HTML bestand, plaats de HTML én de CSS in een bestand en lever die in. 2. screenshot van het resultaat in je browser. ## Opdracht 5 - aanpassen ### Inleiding Jouw collega heeft code gemaakt, maar is plotseling weg, en de code is nog niet helemaal af. Jij moet de code afmaken. ### Wat doet de code? De code bestaat uit een array met daarin arrays van personen. ```php $peopleArray = [ [ "John Doe", // Naam van de eerste persoon ["PHP", "JavaScript", "Python"]], // Vaardigheden van John [ "Ahmed Al-Farsi", // Naam van de tweede persoon ["Java", "C#", "Ruby"]], // Vaardigheden van Ahmed [ "Maria Gonzalez", // Naam van de derde persoon ["JavaScript", "React", "Node.js"]], // Vaardigheden van Maria [ "Li Wei", // Naam van de vierde persoon ["Python", "Django", "Flask"]], // Vaardigheden van Li [ "Zahra Hassan", // Naam van de vijfde persoon ["PHP", "Laravel", "JavaScript"]] // Vaardigheden van Zahra ]; ``` Zorg ervoor dat je de bovenstaande array gebruikt en dat je een tabel maakt die er als volgt uit ziet: [![image.png](https://www.roc.ovh/uploads/images/gallery/2024-12/scaled-1680-/f8qimage.png)](https://www.roc.ovh/uploads/images/gallery/2024-12/f8qimage.png) Je krijgt punten voor de volgende onderdelen: - het juist uitlezen van de array - het gebruik maken van een loop om de array uit te lezen - het gebruik maken van een table in html - het maken van de eerste regel in de tabel "Student Skills List" - het juiste gebruik van CSS om de table metr drie kolommen zoals hierboven in het voorbeeld is weergeven. - het blauw maken van de header regel in de tabel - Het wit/en licht grijs maken van de regels in de tabel. ### Inleveren 1. php code 2. Screenshot van browser waarin het resultaat te zien is. # Praktijk Check Blok 3 (v3) ## Opdracht 1 - Array in PHP ##### Opdracht 1 Maak een array in PHP met getallen. Noem deze array *$myArray*. - Zet deze **getallen** in de array: `13`, `41`, `718`, `231`, `61`. Druk dearray af in de browser. De output ziet er als volgt uit. ``` De array heeft de volgende waarden: 41 13 718 231 61 ``` ##### Opdracht 2 - Voeg iets toe aan de code. Voeg met code het getal `92` toe aan het einde van de array. Druk de array opnieuw af, de output ziet er als volgt uit: ``` De array heeft de volgende waarden: 41 13 718 231 61 92 ``` ##### Opdracht 3 - Gebruik een loop om te bepalen wat het kleinste getal van de array is. Voordat de loop begint, zet je de variabele $kleinste op 0. In de loop vergelijk je dan of het array element kleiner is dan $kleinste. Als dat zo is dan geef je $kleinste de waarde van het array element. ``` De array heeft de volgende waarden: 41 13 718 231 61 92 Het kleinste getal is: 13 ``` ### Inleveren Jouw complete PHP waarin **alle** opdrachten staan (.php bestand). ## Opdracht 2 - Loops ##### Opdracht 1 Gebruik een for-loop om alle even getallen van 2 tot en met 20 af te drukken. De output ziet er als volgt uit (zorg dat de output er precies zo uit ziet): ``` De getallen zijn: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20 ``` ##### Opdracht 2 Gebruik een for-loop om alle even getallen van 20 tot en met 2 af te drukken. De output ziet er als volgt uit (zorg dat de output er precies zo uitziet): ``` De getallen zijn: 20, 18, 17, 16, 14, 12, 10, 8, 6, 4, 2 ``` ##### Opdracht 3 Maak PHP code waarbij die het volgende array afdrukt. ``` $studenten = ["Ahmed", "Isa", "Gerald", "Giovanni"]; ``` Gebruik een loop (je mag zelf weten wat voor een loop) om deze array achterste voren af te drukken. Je mag de array niet aanpassen door de array bijvoorbeeld anders te sorteren. ``` De studenten zijn: Ahmed Isa Gerald Giovanni ``` #### Inleveren 1. De PHP code (.php bestand) waarin alle drie de opdrachten staan. ## Opdracht 3 - Entiteit Maak twee **entiteiten** met Lucidchart. **Entiteit 1:** **Kassabon** Een bestelling heeft de volgende eigenschappen: - Volgnummer (Primary Key - PK) - Datum bon - Aantal artikelen - Totale prijs - Aantal artikelen. - Bonuspunten **Entiteit 2:** **Klant** Een klantheeft de volgende eigenschappen: - Klantnummer (Primary Key - PK) - Volledige naam - Adres - Postcode - Woonplaats - Telefoon - email ### Relatie Teken de **relatie** tussen de entiteiten **Bestelling** en **Klant**. #### Denk hierbij goed na: - **Behoort één bestelling bij meerdere klanten, of behoort één klant bij meerdere bestellingen?** - Plaats het **harkje** aan de juiste kant. - Vergeet niet de **Foreign Key (FK)** in de juiste entiteit op te nemen. ### Inleveren 1. Screenshot van het complete ERD gemaakt in Lucichart. ## Opdracht 4 - 6 Boxes Maak met HTML en CSS een website dit er zoveel mogelijk als volgt uitziet: ![afbeelding.png](https://www.roc.ovh/uploads/images/gallery/2024-12/scaled-1680-/qm8afbeelding.png) #### Eisen 1. 1. De achtergrondkleur van de body is: hsl(0, 0%, 94%) 2. De blauwe achtergrondkleur is: rgb(70, 130, 180) 3. De groene achtergrondkleur is: #32CD32 4. De hoogte en breedte van de blauwe boxes is 150 pixels. 5. De groene boxen zijn 200pixels breed en 120pixels hoog. 6. De tekst in de boxes, is *italic*, **bold.** 7. Het font-type is Verdana. 8. De tekst is gedraaid, dat doe je via CSS met *transform: rotate(10deg);* of *transform: rotate(-10deg);* De tekst in de blauwe boxen zijn -10 graden gedraaid en de tekst in de groene bxen zijn +10 graden gedraaid. 9. De pagina is responsive; als je de pagina smaller maakt dan worden de boxen onder elkaar gepaatst. Let op, voor elke eis krijg je apart punten. Lukt iets niet, ga dan gewoon door naar de voglende eis. ### Inleveren 1. HTML bestand, plaats de HTML én de CSS in een bestand en lever die in. 2. screenshot van het resultaat in je browser. ## Opdracht 5 - aanpassen ### Inleiding Jouw collega heeft code gemaakt, maar is plotseling weg, en de code is nog niet helemaal af. Jij moet de code afmaken. ### Wat doet de code? De code bestaat uit een array met daarin arrays van personen. ```php $peopleArray = [ [ "John Doe", // Naam van de eerste persoon ["PHP", "JavaScript", "Python"]], // Vaardigheden van John [ "Ahmed Al-Farsi", // Naam van de tweede persoon ["Java", "C#", "Ruby"]], // Vaardigheden van Ahmed [ "Maria Gonzalez", // Naam van de derde persoon ["JavaScript", "React", "Node.js"]], // Vaardigheden van Maria [ "Li Wei", // Naam van de vierde persoon ["Python", "Django", "Flask"]], // Vaardigheden van Li [ "Zahra Hassan", // Naam van de vijfde persoon ["PHP", "Laravel", "JavaScript"]] // Vaardigheden van Zahra ]; ``` Zorg ervoor dat je de bovenstaande array gebruikt en dat je een tabel maakt die er als volgt uit ziet: [![image.png](https://www.roc.ovh/uploads/images/gallery/2024-12/scaled-1680-/f8qimage.png)](https://www.roc.ovh/uploads/images/gallery/2024-12/f8qimage.png) Je krijgt punten voor de volgende onderdelen: - het juist uitlezen van de array - het gebruik maken van een loop om de array uit te lezen - het gebruik maken van een table in html - het maken van de eerste regel in de tabel "Student Skills List" - het juiste gebruik van CSS om de table metr drie kolommen zoals hierboven in het voorbeeld is weergeven. - het blauw maken van de header regel in de tabel - Het wit/en licht grijs maken van de regels in de tabel. ### Inleveren 1. php code 2. Screenshot van browser waarin het resultaat te zien is.