# 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. # 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). # 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); ```